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

/* Misc
_________________________________________________________________________________________________________________*/

body {margin: 0;}
.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: 'Montserrat', sans-serif; font-size: 56px; font-weight: 700; line-height: 1.0; letter-spacing: -2px; text-transform: none; text-decoration: none;}
h2 {font-family: 'Montserrat', sans-serif; font-size: 44px; font-weight: 700; line-height: 1.2; letter-spacing: -2px; text-transform: none; text-decoration: none;}
h3 {font-family: 'Montserrat', sans-serif; font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -2px; text-transform: none; text-decoration: none;}
h4 {font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: -1px; text-transform: none; text-decoration: none;}
h5 {font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: 0px; text-transform: none; text-decoration: none;}
h6 {font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: 0px; text-transform: none; text-decoration: none;}
p  {font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; 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: #104476; border: none; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; text-align: center;}
.button-1:hover {color: #fff; background: black; transition: 0.4s;}

.button-2 {cursor: pointer; padding: 10px 40px; border-radius: 5px; color: #fff; background: none; border: 1px solid #fff; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; text-align: center;}
.button-2:hover {color: #fff; background: #104476; border: 1px solid #104476; transition: 0.4s;}

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

.button-4 {cursor: pointer; padding: 5px 30px; border-radius: 5px; color: #000; background: #fff; border: none; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; text-align: center;}
.button-4:hover {color: #fff; background: black; transition: 0.4s;}

.button-5 {cursor: pointer; padding: 5px 30px; border-radius: 5px; color: #fff; background: #104476; border: none; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 600; text-align: center;}
.button-5:hover {color: #fff; background: black; transition: 0.4s;}

/* Header
_________________________________________________________________________________________________________________*/

header {position: absolute; background: none;}
header .icons-1 {list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 20px; background: none;}
header .icons-1 li a {color: #fff; font-size: 22px;}
header .icons-1 li a:hover {color: #104476; transition: 0.4s;}
header .logo {display: flex; justify-content: left;}
header .logo img {height: 180px; width: auto;}
header .menu-1 {list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: right; gap: 40px; background: none; margin-top: -120px;}
header .menu-1 li a {color: #fff; font-size: 26px; font-weight: 700; font-family: 'Montserrat', sans-serif; border-bottom: 5px solid #104476;}
header .menu-1 li a:hover {color: #104476; 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;}

.blog header {display: none;}
.archive header {display: none;}
.search header {display: none;}
.single header {display: none;}
.error404 header {display: none;}

/* Main Content
_________________________________________________________________________________________________________________*/

.intro-1 {background-image: url("img/intro-1.jpg"); background-size: cover; background-position: top center; padding: 200px 0px 80px 0px;}
.intro-1 h1 {color: #fff; display: flex; justify-content: right; text-align: right; margin-bottom: 60px; margin-top: 40px;}
.intro-1 .button-wrapper {padding: 0; margin: 0; display: flex; justify-content: right; gap: 30px; margin-bottom: 100px;}
.intro-1 .postlist-3 {display: flex; justify-content: space-between;}
.intro-1 .postlist-3 .post {width: 30%; padding: 10px 20px; border-left: 1px solid #fff; border-bottom: 0px solid #fff; border-radius: 0px; background: none;}
.intro-1 .postlist-3 .post h4 {color: #fff; font-weight: 700;}
.intro-1 .postlist-3 .post h5 {color: #fff; font-size: 14px;}
.intro-1 .postlist-3 .post .cat-wrapper a {display: inline-block; font-size: 13px; color: #fff; background: #104476; border-radius: 5px; padding: 1px 25px; transition: all 0.4s ease;}
.intro-1 .postlist-3 .post .cat-wrapper a:hover {color: #fff; background: #000;}
.intro-1 .postlist-3 .post p {color: #fff;}
.intro-1 .postlist-3 .post a {color: #fff;}
.intro-1 .postlist-3 .post a:hover {color: #104476; transition: 0.4s;}
.intro-1 .search {display: flex; justify-content: center; margin-top: 50px;}
.intro-1 .search .search-field {width: 400px; padding: 10px; background: #f6f6f66e; border-radius: 5px; border: 1px solid lightgrey; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 400; color: #fff;}
.intro-1 .search .search-submit {width: 100px; padding: 10px; background: #fff; border-radius: 5px; border: none; margin-left: 10px; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 400;}
.intro-1 .search .search-submit:hover {background: #104476; color: #fff; transition: 0.4s;} 

.intro-2 {background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('img/intro-2.jpg'); no-repeat center center; background-size: cover; padding: 20px 0px 0px 0px; height: 80vh;}
.intro-2 .logo {display: block; text-align: center;}
.intro-2 .logo img {height: 130px; width: auto;}
.intro-2 h1 {color: #fff; display: flex; justify-content: center; margin: 40px 0px;}
.intro-2 .menu {list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: space-evenly; margin-top: 30px;}
.intro-2 .menu li a {color: #fff; font-size: 20px; font-weight: 700; font-family: 'Montserrat', sans-serif;}
.intro-2 .menu li a:hover {color: #104476; transition: 0.4s;}
.intro-2 .search {display: flex; justify-content: center; margin-top: 50px;}
.intro-2 .search .search-field {width: 400px; padding: 10px; background: #f6f6f66e; border-radius: 5px; border: 1px solid lightgrey; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 400; color: #fff;}
.intro-2 .search .search-submit {width: 100px; padding: 10px; background: #fff; border-radius: 5px; border: none; margin-left: 10px; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 400;}
.intro-2 .search .search-submit:hover {background: #104476; color: #fff; transition: 0.4s;}

.intro-3 {background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('img/intro-3.jpg'); no-repeat center center; background-size: cover; padding: 20px 0px 0px 0px; height: 60vh;}
.intro-3 .logo {display: block; text-align: center;}
.intro-3 .logo img {height: 130px; width: auto;}
.intro-3 .menu {list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: space-evenly; margin-top: 30px;}
.intro-3 .menu li a {color: #fff; font-size: 20px; font-weight: 700; font-family: 'Montserrat', sans-serif;}
.intro-3 .menu li a:hover {color: #104476; transition: 0.4s;}
.intro-3 .search {display: flex; justify-content: center; margin-top: 50px;}
.intro-3 .search .search-field {width: 400px; padding: 10px; background: #f6f6f66e; border-radius: 5px; border: 1px solid lightgrey; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 400; color: #fff;}
.intro-3 .search .search-submit {width: 100px; padding: 10px; background: #fff; border-radius: 5px; border: none; margin-left: 10px; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 400;}
.intro-3 .search .search-submit:hover {background: #104476; color: #fff; transition: 0.4s;}

.section-head {position: relative; width: 100%; z-index: 3; overflow: hidden; margin-bottom: 40px;}
.section-logo {width: 5%; float: left; position: relative; margin-right: -15px;}
.section-logo img {width: 40px; height: auto;}
.section-title {position: relative; width: 80%; z-index: 1; display: inline-block; margin-top: -8px;}
.section-title::after {position: absolute; content: ''; top: 30px; left: 20%; height: 3px; width: 100%; background: #104476;}
.section-line {position: absolute; top: 10px; width: 100%; height: 3px; background-color: #104476;}
.section-img {display: grid; place-items: center; height: 100%;}

.studio {margin: 60px 0px;}
.materie {margin-bottom: 80px;}
.materie h4 {color: #104476; font-weight: 700; margin-bottom: 20px;}

.lastposts {margin: 50px 0px;}
.lastposts .postlist-1 {display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 30px;}
.lastposts .postlist-1 .post {width: 40%; border-radius: 5px; -webkit-box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.2);}
.lastposts .postlist-1 .post .featured-img {width: 100%; height: 260px; border-radius: 5px 5px 0px 0px; overflow: hidden; position: relative; display: block;}
.lastposts .postlist-1 .post .featured-img a img.img-res {width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out; transform: scale(1); filter: brightness(0.95);}
.lastposts .postlist-1 .post .featured-img:hover a img.img-res {transform: scale(1.04); filter: brightness(1);}
.lastposts .postlist-1 .post .post-body {padding: 20px;}
.lastposts .postlist-1 .post .post-body h3 {font-size: 22px; font-weight: 600; line-height: 1.4; position: relative;}
.lastposts .postlist-1 .post .post-body h3 a {color: #104476; transition: color 0.4s ease;}
.lastposts .postlist-1 .post .post-body h3 a:hover {color: #000;}
.lastposts .postlist-1 .post .post-body h5 {color: inherit; font-size: 13px; font-weight: 500;}
.lastposts .postlist-1 .post .post-body .cat-wrapper a {display: inline-block; font-size: 13px; color: #fff; background: #104476; border-radius: 5px; padding: 1px 25px; transition: all 0.4s ease; margin-bottom: 20px;}
.lastposts .postlist-1 .post .post-body .cat-wrapper a:hover {color: #fff; background: #000;}
.lastposts .postlist-1 .post .post-body p {color: inherit;}
.lastposts .postlist-1 h4.no-post {color: #000; margin: 80px 0px;}
.lastposts .button-wrapper {display: flex; justify-content: center; margin: 40px 0px;}

.team {margin-bottom: 80px;}
.team .team-box {text-align: center; margin-bottom: 30px;}
.team .team-img {width: 320px; height: auto; border-radius: 10px; margin-bottom: 20px;}
.team h4 {font-size: 22px; font-weight: 600;}
.team .modal-body p {text-align: left;}
.team .modal-body a {color: #104476; font-weight: 700;}
.team .modal-body a:hover {color: #000; transition: 0.4s;}

.contatti {margin-bottom: 40px;}
.contacts-box {display: flex; align-items: center; gap: 10px; padding: 12px 0;}
.contatti .contacts-icon {width: 50px;}
.contatti .contacts-box .contacts-icon {width: 25px; font-size: 22px; text-align: center; color: #104476;}
.contatti .contacts-name h5 {font-weight: 700; margin-top: 6px;}
.contatti .contacts-box .contacts-details {margin-left: auto; text-align: right;}
.contatti a {color: #000;}
.contatti a:hover {color: #104476; transition: 0.4s;}
.contatti h4 {color: #104476; font-weight: 700; margin-bottom: 20px;}
.contatti .logo {display: flex; justify-content: center; margin: 50px 0px;}
.contatti .logo img {width: 120px; height: auto;}

.form-1 .wpcf7 {width: 70%; margin: auto; text-align: center; background-color: #104476; border-radius: 5px; padding: 25px;}
.form-1 .wpcf7 label {color: #fff; font-size: 16px; font-weight: 600;}
.form-1 .wpcf7 input {font-size: 15px; font-weight: 400; line-height: 1.4;}
.form-1 .wpcf7 textarea {color: #000; font-size: 16px; font-weight: 400; line-height: 1.4; border: 1px solid #d5d5d5; border-radius: 5px; height: 100px;}
.form-1 .wpcf7 .button-4 {display: block; margin: auto;}

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

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

/* Posts Content
_________________________________________________________________________________________________________________*/

.index {margin: 50px 0px;}
.index .postlist-1 {display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 30px;}
.index .postlist-1 .post {width: 40%; border-radius: 5px; -webkit-box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.2);}
.index .postlist-1 .post .featured-img {width: 100%; height: 260px; border-radius: 5px 5px 0px 0px; overflow: hidden; position: relative; display: block;}
.index .postlist-1 .post .featured-img a img.img-res {width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out; transform: scale(1); filter: brightness(0.95);}
.index .postlist-1 .post .featured-img:hover a img.img-res {transform: scale(1.04); filter: brightness(1);}
.index .postlist-1 .post .post-body {padding: 20px;}
.index .postlist-1 .post .post-body h2 {font-size: 22px; font-weight: 600; line-height: 1.4; position: relative;}
.index .postlist-1 .post .post-body h2 a {color: #104476; transition: color 0.4s ease;}
.index .postlist-1 .post .post-body h2 a:hover {color: #000;}
.index .postlist-1 .post .post-body h5 {color: inherit; font-size: 13px; font-weight: 500;}
.index .postlist-1 .post .post-body .cat-wrapper a {display: inline-block; font-size: 13px; color: #fff; background: #104476; border-radius: 5px; padding: 1px 25px; transition: all 0.4s ease; margin-bottom: 20px;}
.index .postlist-1 .post .post-body .cat-wrapper a:hover {color: #fff; background: #000;}
.index .postlist-1 .post .post-body p {color: inherit;}
.index .postlist-1 h4.no-post {color: #000; margin: 80px 0px;}

.index-single {margin: 50px 0px;}
.index-single .postsingle-1 {display: flex; flex-direction: column; gap: 30px;}
.index-single .postsingle-1 .post {width: 70%; margin: auto; border-radius: 5px; -webkit-box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.2); overflow: hidden;}
.index-single .postsingle-1 .post h1 {color: #104476; font-size: 34px; font-weight: 700; line-height: 1.2; padding: 20px 20px 0px 20px;}
.index-single .postsingle-1 .post h5 {color: inherit; font-size: 16px; padding: 0px 0px 5px 20px;}
.index-single .postsingle-1 .post .cat-wrapper {margin: 0px 0px 20px 20px;}
.index-single .postsingle-1 .post .cat-wrapper a {display: inline-block; font-size: 16px; color: #fff; background: #104476; border-radius: 5px; padding: 0px 25px; transition: 0.4s;}
.index-single .postsingle-1 .post .cat-wrapper a:hover {color: #fff; background: #000;}
.index-single .postsingle-1 .post .featured-img {width: 100%; height: auto; object-fit: cover; object-position: center; overflow: hidden;}
.index-single .postsingle-1 .post .post-body {padding: 20px;}
.index-single .postsingle-1 .post .post-body p {color: #000;}
.index-single .postsingle-1 .post .post-body h4 {color: #000; font-size: 18px;}
.index-single .postsingle-1 .post .post-body h6 {color: #000; font-size: 14px; margin: 40px 0px;}
.index-single .postsingle-1 .post .post-body .icons-share {list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: left; gap: 15px;}
.index-single .postsingle-1 .post .post-body .icons-share li a {color: #104476 !important; font-size: 22px;}
.index-single .postsingle-1 .post .post-body .icons-share li a:hover {color: #000 !important; transition: 0.4s;}
.index-single .postsingle-1 .post .comments-wrapper {display: none;}
.index-single .postsingle-1 .post a {color: #104476;}
.index-single .postsingle-1 .post a:hover {color: #000; transition: 0.4s;}

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

/* Footer
_________________________________________________________________________________________________________________*/

footer {background-color: #104476;}
footer .block-1 {width: 100%; display: flex; justify-content: center; padding-top: 40px;}
footer .block-1 img {height: 140px; width: auto;}
footer .block-2 {width: 100%; display: flex; justify-content: center; padding-top: 20px;}
footer .icons-1 {list-style-type: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 15px; background: none;}
footer .icons-1 li a {color: #fff; font-size: 22px;}
footer .icons-1 li a:hover {color: #000; transition: 0.4s;}
footer .block-3 {width: 100%; text-align: center; padding-top: 20px;}
footer .copyright {width: 100%; text-align: center; padding-bottom: 20px;}
footer .copyright p {font-size: 14px;}
footer p {color: #fff; font-size: 14px; font-weight: 400;}
footer a {color: #fff;}
footer a:hover {color: #000; transition: 0.4s;}

/* Tablet Devices
_________________________________________________________________________________________________________________*/

@media (max-width: 992px) {

  h1 {font-size: 38px;}
  h2 {font-size: 32px;}
  h3 {font-size: 28px;}

  .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 .logo img {width: 120px; height: auto;}
  header .menu-1-button {display: none;}

  .intro-1 h1 {margin-top: 0px;}

  .section-logo {width: 7%;}
  .section-title::after {display: none;}

  .lastposts .postlist-1 .post {width: 45%;}
  .lastposts .postlist-1 .post .featured-img {width: 100%; height: 180px;}
  .team .team-img {width: 180px; height: auto;}
  .form-1 .wpcf7 {width: 100%;}

  .index .postlist-1 .post {width: 45%;}
  .index .postlist-1 .post .featured-img {width: 100%; height: 180px;}
  .index-single .postsingle-1 .post {width: 100%;}
  
}

/* Mobile Devices
_________________________________________________________________________________________________________________*/

@media (max-width: 768px) {

  header .icons-1 {justify-content: center; margin-bottom: 20px;}
  header .logo img {height: 90px; width: auto;}
  header .menu-1 {display: grid; gap: 10px; text-align: right; padding-top: 30px;}
  header .menu-1 li a {font-size: 20px;}

  .intro-1 {padding: 150px 0px 80px 0px;}
  .intro-1 h1 {justify-content: center; text-align: center; margin-top: 40px;}
  .intro-1 .button-wrapper {display: grid; justify-content: center; gap: 20px; margin-bottom: 50px;}
  .intro-1 .postlist-3 {overflow-x: auto;}
  .intro-1 .postlist-3 .post {width: 70%; margin-right: 30px;}
  .intro-1 .search .search-field {width: 190px;}
  .intro-1 .search .search-submit {width: 90px;}

  .intro-2 {height: 90vh;}
  .intro-2 .logo img {width: 80px; height: auto;}
  .intro-2 .menu {display: grid; text-align: center; gap: 5px; margin-top: 20px;}
  .intro-2 .search .search-field {width: 190px;}
  .intro-2 .search .search-submit {width: 90px;}

  .intro-3 {height: 70vh;}
  .intro-3 .logo img {width: 80px; height: auto;}
  .intro-3 .menu {display: grid; text-align: center; gap: 5px; margin-top: 20px;}
  .intro-3 .search .search-field {width: 190px;}
  .intro-3 .search .search-submit {width: 90px;}  

  .section-head {margin-bottom: 20px;}
  .section-title {margin-top: 0px; margin-left: 10px;}
  .section-logo {width: 15%;}

  .studio {margin: 30px 0px;}
  .materie {margin-bottom: 0px;}
  .lastposts {margin: 30px 0px;}
  .lastposts .postlist-1 .post {width: 100%;}
  .team {margin-bottom: 30px;}
  .contatti h5 {font-size: 16px;}
  .contatti .py-4 {padding: 5px 0px !important;}

  .index .postlist-1 .post {width: 100%;}
  .index-single .postsingle-1 .post h1 {font-size: 26px;}

}