/*
Theme Name: an7framework
Description: Custom template for WordPress.
Version: 1.4
Author: Andrea Noto
*/

/* Misc
_________________________________________________________________________________________________________________*/

body {margin: 0;}
body:has(.menu-1.active) {overflow: hidden;}
.full-w {width: 100%; margin: 0 auto;}
.cont-w {max-width: 1200px; margin: 0 auto;}
.clr {clear: both;}
.img-res {max-width: 100%; height: auto;}

h1 {font-family: 'Grandstander', cursive; font-size: 70px; font-weight: 800; line-height: 1.0; letter-spacing: -4px; text-transform: none; text-decoration: none;}
h2 {font-family: 'Grandstander', cursive; font-size: 50px; font-weight: 800; line-height: 1.0; letter-spacing: -3px; text-transform: none; text-decoration: none;}
h3 {font-family: 'Grandstander', cursive; font-size: 36px; font-weight: 800; line-height: 1.0; letter-spacing: -3px; text-transform: none; text-decoration: none;}
h4 {font-family: 'Grandstander', cursive; font-size: 26px; font-weight: 700; line-height: 1.0; letter-spacing: -1px; text-transform: none; text-decoration: none;}
h5 {font-family: 'Grandstander', cursive; font-size: 20px; font-weight: 700; line-height: 1.0; letter-spacing: -1px; text-transform: none; text-decoration: none;}
h6 {font-family: 'Grandstander', cursive; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: 0px; text-transform: none; text-decoration: none;}
p  {font-family: 'Grandstander', cursive; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: 0px; text-transform: none; text-decoration: none;}

a {text-transform: none; text-decoration: none;}
a:hover {text-transform: none; text-decoration: none;}

.button-1 {cursor: pointer; padding: 10px 40px; border-radius: 5px; color: #fff; background: #003399; border: none; font-family: 'Grandstander', cursive; font-size: 16px; font-weight: 700; text-align: center;}
.button-1:hover {color: #fff; background: #ffcc00; transition: 0.4s;}

.button-2 {cursor: pointer; padding: 10px 40px; border-radius: 5px; color: #fff; background: #ffcc00; border: none; font-family: 'Grandstander', cursive;; font-size: 16px; font-weight: 700; text-align: center;}
.button-2:hover {color: #fff; background: #003399; transition: 0.4s;}

.button-3 {cursor: pointer; padding: 10px 40px; border-radius: 5px; color: #fff; background: lightgreen; border: none; font-family: 'Grandstander', cursive; font-size: 16px; font-weight: 700; text-align: center;}
.button-3:hover {color: #fff; background: purple; transition: 0.4s;}

/* Header
_________________________________________________________________________________________________________________*/

header {position: relative; background: none; height: 120px; padding-top: 10px; background: rgba(0, 51, 153, 0.7);}
header .logo {display: flex; justify-content: left;}
header .logo img {height: 100px; width: auto;}
header .logo-cmb {display: flex; justify-content: right; margin-top: 25px;}
header .logo-cmb img {height: 40px; width: auto;}
header .menu-1 {list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: right; gap: 30px; background: none; margin-top: -100px;}
header .menu-1 li a {color: #fff; font-family: 'Grandstander', cursive; font-size: 17px; font-weight: 400; letter-spacing: -1px;}
header .menu-1 li a:hover {color: #ffcc00; transition: 0.4s;}
header .menu-1-button {cursor: pointer; display: none;}
header .menu-1-button .bar {background-color: #fff; display: block; width: 35px; height: 5px; margin: 6px 0; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}

/* Main Content
_________________________________________________________________________________________________________________*/

.logos {background: none; padding-top: 10px;}
.logos .main-logos {display: flex; justify-content: center; gap: 30px; margin-bottom: 10px;}
.logos .main-logos .logos-item img {height: 30px; width: auto;}
.logos .sponsor-logos {display: flex; justify-content: center; gap: 30px;}
.logos .sponsor-logos .logos-item img {height: 30px; width: auto;}

.intro-1 {background-image: url("img/intro-home.jpg"); background-size: cover; background-position: top center; padding: 110px 0px 0px 0px; height: 1000px; margin-top: -80px;}
.intro-1 h1 {color: #fff; display: flex; justify-content: center; text-align: center; margin-bottom: 35px; text-shadow: #003399 1px 0 5px;}
.intro-1 .button-wrapper {padding: 0; margin: 0; display: flex; justify-content: center; gap: 30px; display: none;}
.intro-1 .postlist-3 {display: flex; justify-content: space-between;}
.intro-1 .postlist-3 .post {width: 30%; padding: 10px 20px; border-left: 1px solid lightgreen; border-bottom: 1px solid #fff; border-radius: 5px; background: none;}
.intro-1 .postlist-3 .post h4 {color: #fff;}
.intro-1 .postlist-3 .post h6 {color: #fff;}
.intro-1 .postlist-3 .post p {color: #fff;}
.intro-1 .postlist-3 .post a {color: #fff;}
.intro-1 .postlist-3 .post a:hover {color: purple; transition: 0.4s;}

.chisiamo {margin: 50px 0px 0px 0px;}
.chisiamo h2 {color: #003399; border-bottom: 2px solid #ffcc00; text-shadow: #ffcc00 1px 0 5px; padding-bottom: 10px; margin-bottom: 30px;}
.chisiamo h3 {color: #003399; padding-top: 100px;}
.chisiamo .img-1 {max-width: 100%; padding-top: 30px;}
.chisiamo .img-2 {max-width: 100%; padding-top: 30px;}
.chisiamo .quote {display: flex; justify-content: center;}
.chisiamo .quotebox {margin: auto; width: 80%; text-align: center; background: rgba(0, 0, 0, 0.1); border: 2px solid #003399; border-radius: 4px; padding: 40px; margin: 40px 0px 40px 0px;}
.chisiamo .quotebox p {font-size: 14px;}
.lucia {margin: 50px 0px 50px 0px;}
.lucia h3 {color: #003399; padding-bottom: 10px; margin-bottom: 30px;}
.lucia img {text-align: center; max-width: 30%;}

.cosafacciamo {margin: 50px 0px 50px 0px;}
.cosafacciamo .container-fluid {background: rgba(0, 51, 153, 0.7); padding-top: 50px; padding-bottom: 50px; margin-bottom: 50px;}
.cosafacciamo h2 {color: #003399; border-bottom: 2px solid #ffcc00; text-shadow: #ffcc00 1px 0 5px; padding-bottom: 10px; margin-bottom: 50px;}
.cosafacciamo .services {text-align: center;}
.cosafacciamo .services svg {color: #fff; font-size: 80px;}
.cosafacciamo .services h4 {color: #fff; margin-top: 20px;}
.cosafacciamo .covid19 {color: #fff; margin: auto; text-align: center; width: 70%; margin-top: 50px;}
.cosafacciamo .cds h3 {color: #003399; padding-bottom: 10px; margin-bottom: 30px;}
.cosafacciamo .papafrancesco {text-align: center; margin-top: 60px;}
.cosafacciamo .papafrancesco h3 {color: #003399; padding-bottom: 10px; margin-bottom: 10px;}
.cosafacciamo .papafrancesco p {margin-bottom: 40px;}
.cosafacciamo .papafrancesco img {border-radius: 10px; border: 1px solid #003399; width: 600px;}

.eventi {margin: 50px 0px 50px 0px;}
.eventi h2 {color: #003399; border-bottom: 2px solid #ffcc00; text-shadow: #ffcc00 1px 0 5px; margin-bottom: 50px;}
.eventi .event {margin-bottom: 50px;}
.eventi .text h4 {color: #003399; margin-bottom: 20px; margin-top: 20px;}
.eventi .content img {border-radius: 10px; border: 1px solid #003399;}
.eventi .youtube-media iframe {width: 100%; height: 350px; border-radius: 10px;}
.eventi .media2 {text-align: center;}
.eventi video {border-radius: 10px;}

.gallery {margin: 50px 0px 50px 0px;}
.gallery h2 {color: #003399; border-bottom: 2px solid #ffcc00; text-shadow: #ffcc00 1px 0 5px; padding-bottom: 10px; margin-bottom: 50px;}
.gallery h4 {color: #003399; margin-bottom: 20px; text-align: center;}
.gallery p {color: #00339; margin-bottom: 40px; margin-top: 20px; text-align: center;}
.gallery img {border-radius: 10px;}

.sostienici {margin: 50px 0px 50px 0px;}
.sostienici h2 {color: #003399; border-bottom: 2px solid #ffcc00; text-shadow: #ffcc00 1px 0 5px; padding-bottom: 10px; margin-bottom: 50px;}
.sostienici h3 {color: #003399; margin-bottom: 20px;}
.sostienici .donazioni h3 {display: flex; justify-content: center; margin-top: 40px;}
.sostienici .donazioni p {text-align: center;}
.sostienici .volontari h3 {display: flex; justify-content: center; margin-top: 40px;}
.sostienici .volontari p {text-align: center;}

.contatti {margin: 50px 0px 50px 0px;}
.contatti .container-fluid {background: rgba(0, 51, 153, 0.7); padding-top: 50px; padding-bottom: 50px; margin-bottom: 50px;}
.contatti h2 {color: #003399; border-bottom: 2px solid #ffcc00; text-shadow: #ffcc00 1px 0 5px; padding-bottom: 10px; margin-bottom: 50px;}
.contatti .contact {text-align: center;}
.contatti .contact svg {color: #fff; font-size: 80px;}
.contatti .contact h4 {color: #fff; margin-top: 20px;}
.contatti .contact h5 {color: #fff; line-height: 1.4; margin-top: 10px; margin-bottom: 20px;}
.contatti .sede h3 {color: #003399; margin-bottom: 10px;}
.contatti .sede h5 {margin-bottom: 30px;}
.contatti .modal-content h4 {color: #003399; margin-top: 0px;}
.contatti .modal-content p {line-height: 1.5;} 

.lastposts h3 {color: #000; text-align: center;}
.lastposts .postlist-2 {display: flex; flex-direction: column; gap: 30px; margin-top: 50px;}
.lastposts .postlist-2 .post {padding: 25px; background-color: #f5f5f5; border-radius: 5px;}
.lastposts .postlist-2 .post h4 {color: #000;}
.lastposts .postlist-2 .post h6 {color: #000;}
.lastposts .postlist-2 .post img {border-radius: 5px;}
.lastposts .postlist-2 .post p {color: #000;}
.lastposts .postlist-2 .post a {color: purple;}
.lastposts .postlist-2 .post a:hover {color: lightgreen; transition: 0.4s;}

.privacy-policy h2 {color: #003399;}
.privacy-policy h3 {color: #003399;}
.privacy-policy h4 {color: #003399;}
.privacy-policy header {display: none;}

.p404 .col-12 {height: 100vh; padding-top: 80px; text-align: center;}
.p404 h1 {color: #003399; padding-bottom: 25px;}
.p404 h4 {color: #000;}

.form-1 {display: flex; justify-content: center;}
.form-1 .wpcf7 {width: auto; text-align: center; background-color: #f5f5f5; border-radius: 5px; padding: 25px;}
.form-1 .wpcf7 label {color: #000; font-size: 18px; font-weight: 600; line-height: 2.0; text-align: center;}
.form-1 .wpcf7 input {color: #000; font-size: 18px; font-weight: 400; line-height: 1.4; border: 1px solid #d5d5d5; border-radius: 5px;}
.form-1 .wpcf7 textarea {color: #000; font-size: 18px; font-weight: 400; line-height: 1.4; border: 1px solid #d5d5d5; border-radius: 5px; height: 100px;}
.form-1 .wpcf7 .button-1 {color: #fff; font-size: 16px; display: block; margin: auto; border: none;}

/* Posts Content
_________________________________________________________________________________________________________________*/

.index .postlist-1 {display: flex; flex-direction: column; gap: 30px; margin-top: 50px;}
.index .postlist-1 .post {padding: 25px; background-color: #f5f5f5; border-radius: 5px;}
.index .postlist-1 .post h4 {color: #000;}
.index .postlist-1 .post h5 {color: #000; margin-bottom: 25px;}
.index .postlist-1 .post img {border-radius: 5px;}
.index .postlist-1 .post p {color: #000;}
.index .postlist-1 .post h6 {color: #000;}
.index .postlist-1 .post a {color: purple;}
.index .postlist-1 .post a:hover {color: lightgreen; transition: 0.4s;}
.index .postlist-1 h4.no-post {color: #000; margin: 80px 0px;}

.single .postsingle-1 {display: flex; flex-direction: column; gap: 30px; margin-top: 50px;}
.single .postsingle-1 .post {padding: 25px; background-color: #f5f5f5; border-radius: 5px;}
.single .postsingle-1 .post img {border-radius: 5px;}
.single .postsingle-1 .post p {color: #000;}
.single .postsingle-1 .post h6 {color: #000; margin: 40px 0px;}
.single .postsingle-1 .post h4 {color: #000;}
.single .postsingle-1 .post .icons-share {list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: left; gap: 20px;}
.single .postsingle-1 .post li a {color: #000 !important; font-size: 30px;}
.single .postsingle-1 .post li a:hover {color: lightgreen !important; transition: 0.4s;}
.single .postsingle-1 .post .comments-wrapper {display: none;}
.single .postsingle-1 .post a {color: purple;}
.single .postsingle-1 .post a:hover {color: lightgreen; transition: 0.4s;}

.pagination {padding: 50px 0px; margin: auto;}
.pagination a, span.page-numbers {border: 1px solid lightgrey; border-radius: 5px; padding: 10px 15px; margin-right: 10px;}
.pagination a {color: #000;}
.pagination a:hover {color: lightgreen; transition: 0.4s;}

.sidebar-1 {width: 95%; height: auto; padding: 25px; background-color: #f5f5f5; border-radius: 5px; margin: 50px 0px;}
.sidebar-1 h4 {color: purple; margin-bottom: 20px;}
.sidebar-1 .widget_search {margin-bottom: 40px;}
.sidebar-1 .widget_search .wp-block-search__input {border: 1px solid #d5d5d5; border-radius: 5px; background-color: #fff;}
.sidebar-1 .widget_search .wp-block-search__button {color: #fff; background: purple; border-radius: 5px; border: none; padding: 5px 20px;}
.sidebar-1 .widget_search .wp-block-search__button:hover {background: lightgreen; transition: 0.4s;}
.sidebar-1 .widget_categories {margin-bottom: 40px;}
.sidebar-1 .widget_categories ul {list-style-type: none;}
.sidebar-1 .widget_categories li {font-family: 'Open Sans', sans-serif; font-size: 22px; font-weight: 600; margin-bottom: 10px;}
.sidebar-1 .widget_recent_entries {margin-bottom: 40px;}
.sidebar-1 .widget_recent_entries ul {list-style-type: none;}
.sidebar-1 .widget_recent_entries li {font-family: 'Open Sans', sans-serif; font-size: 22px; font-weight: 600; padding-left: 30px; margin-bottom: 10px;}
.sidebar-1 .widget_archive {margin-bottom: 40px;}
.sidebar-1 .widget_archive ul {list-style-type: none;}
.sidebar-1 .widget_archive li {font-family: 'Open Sans', sans-serif; font-size: 22px; font-weight: 600; margin-bottom: 10px;}
.sidebar-1 a {color: #000;}
.sidebar-1 a:hover {color: lightgreen; transition: 0.4s;}

/* Footer
_________________________________________________________________________________________________________________*/

footer {background: rgba(0, 51, 153, 0.7);}
footer .copyright {width: 100%; float: left; margin-top: 20px;}
footer .copyright p {font-size: 14px;}
footer p {color: #fff; font-size: 16px; font-weight: 400;}
footer a {color: #fff;}
footer a:hover {color: #ffcc00; transition: 0.4s;}

/* Tablet Devices
_________________________________________________________________________________________________________________*/

@media (max-width: 992px) {

  h1 {font-size: 46px;}
  h2 {font-size: 36px;}

  .button-1 {padding: 10px 30px; font-size: 14px;}
  .button-2 {padding: 10px 30px; font-size: 14px;}
  .button-3 {padding: 10px 30px; font-size: 14px;}

  header .menu-1-button {display: none;}
  header .menu-1 li a {font-size: 15px;}

  .eventi .youtube-media iframe {height: 200px;}
  
}

/* Mobile Devices
_________________________________________________________________________________________________________________*/

@media (max-width: 768px) {

  header .icons-1 {justify-content: center; margin-bottom: 20px;}
  header .logo img {height: 70px; width: auto;}
  header .menu-1 {position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 25px; padding: 25px 0px; background: #003399; transition: 0.4s; margin-top: 0px;}
  header .menu-1 li a {font-size: 18px;}
  header .menu-1.active {left: 0;}
  header .menu-1-button {display: block; position: absolute; top: 15px; right: 15px;}
  header .menu-1-button.active .bar:nth-child(1) {transform: translateY(11px) rotate(45deg);}
  header .menu-1-button.active .bar:nth-child(2) {opacity: 0;}
  header .menu-1-button.active .bar:nth-child(3) {transform: translateY(-11px) rotate(-45deg);}
  header .logo-cmb {justify-content: center; margin-top: -5px;}
  header .logo-cmb img {height: 35px; width: auto;}

  .logos {padding-top: 5px;}
  .logos .main-logos {gap: 10px;}
  .logos .main-logos .logos-item img {height: 21px; width: auto;}
  .logos .sponsor-logos {gap: 2px;}
  .logos .sponsor-logos .logos-item img {height: 21px; width: auto;}

  .intro-1 {background-image: url("img/intro-home-mobile.jpg"); width: 100%; height: 570px; padding: 90px 0px 0px 0px; margin-top: -65px;}
  .intro-1 .button-wrapper {display: none;}
  .intro-1 .postlist-3 {overflow-x: auto;}
  .intro-1 .postlist-3 .post {width: 50%; margin-right: 30px;}

  .chisiamo h3 {padding-top: 20px;}
  .lucia {margin: 0px 0px 50px 0px;}
  .cosafacciamo h2 {margin-bottom: 30px;}
  .cosafacciamo .services {margin-bottom: 30px;}
  .cosafacciamo .covid19 {margin-top: 0px;}
  .eventi h2 {margin-bottom: -10px;}
  .eventi .event {margin-bottom: 0px;}
  .eventi .text h4 {margin-top: 50px;}
  .gallery h2 {margin-bottom: 30px;}
  .sostienici h2 {margin-bottom: 30px;}
  .contatti h2 {margin-bottom: 30px;}
  .contatti .contact {margin-bottom: 30px;}

  .form-1 {display: block; overflow: hidden;}
  .form-1 .wpcf7 {display: flex; justify-content: center;}
  .form-1 .wpcf7 input {max-width: 70% !important;}
  .form-1 .wpcf7 textarea {max-width: 70% !important;}

}