@charset "utf-8";
/* CSS Document */

:root {
    --white: rgba(255,255,255,1); /* #fff */
    /*--black: rgba(0,0,0,1); #000 */
	--black: #212121;
    --grey: rgba(217,217,217,1); /* #d9d9d9 */
    --darkgrey: rgba(73,73,73,1); /* #494949 */
    --lightgrey: rgba(217,217,217,.2); /* #d9d9d9 */
    --red: rgba(159,48,26,1);
}

* {box-sizing: border-box;}
*, a, a:hover {transition: all .5s;}

body {/*font-family: "Inria Serif", serif;*/ font-family: 'Karla', sans-serif;}
.container {max-width: 1350px;}
i {-webkit-font-smoothing: antialiased;}

h1 {margin: 0; padding: 0; font-size: 45px; line-height: 55px; color: var(--black); font-weight: 800;}
h2 {margin: 0; padding: 0; font-size: 30px; line-height: 40px; color: var(--black); font-weight: 700;}
h3 {font-family: 'Karla', sans-serif; margin: 0; padding: 0; font-size: 20px; line-height: 30px; color: var(--black); font-weight: 700;}
h4 {margin: 0; padding: 0; font-size: 15px; line-height: 22px; color: /*var(--black)*/#AFAEA6; font-weight: 600;}
h5 {margin: 0; padding: 0; font-size: 12px; line-height: 18px; color: /*var(--black)*/#AFAEA6; font-weight: 800;}
p {margin: 0; padding: 0; font-size: 17px; line-height: 25px; color: /*var(--black)*/#9F9E95; font-weight: 400;}
ul, ol {font-family: "/*Inria Serif*/'Karla'", sans-serif; margin: 0; padding: 0;}
ul {/*font-family: "Inria Serif", serif;*/ font-family: 'Karla', sans-serif; margin: 15px 0 0 15px; padding: 0; font-size: 16px; line-height: 24px; color: var(--black); font-weight: 300;}
label {font-family: "/*Inria Serif*/'Karla'", sans-serif; }
.form-check {padding-left: 0;}
.form-check label {margin-top: 0;}
input.form-control {font-family: 'Karla', sans-serif; border: 1px solid var(--red); border-radius: 3px; background-color: transparent; color: var(--black);}
select.form-select {font-family: 'Karla', sans-serif; border: 1px solid var(--red); border-radius: 3px; background-color: transparent; color: var(--black);}
textarea.form-control {font-family: 'Karla', sans-serif; border: 1px solid var(--red); border-radius: 3px; background-color: transparent; color: var(--black); resize: none; min-height: 130px; max-height: 130px;}
.form-check-input {border: 1px solid var(--black);}
.wpcf7-list-item {margin-left: 0;}

.btn.btn-primary, .btn.btn-secondary, .btn.btn-info {font-family: "Roboto", sans-serif; font-size: 20px; line-height: 100%; font-weight: 700; color: var(--black); text-decoration: none; border-radius: 0;}

.btn.btn-primary {border: 1px solid var(--black); color: var(--black); padding: 12px 50px; background: transparent;}
.btn.btn-primary:hover {background: var(--black); color: var(--white);}

.btn.btn-secondary {background: transparent; padding: 3px 0; border: 0; border-bottom: 1px solid var(--black);}
.btn.btn-secondary:hover {color: var(--darkgrey); border-bottom: 1px solid var(--darkgrey);}

.btn.btn-tertiary {border: 1px solid var(--red); color: var(--white); padding: 12px 50px; background: var(--red); border-radius: 30px;}
.btn.btn-tertiary:hover {background: var(--black); color: var(--white);}

.btn.btn-info {border: 1px solid var(--white); color: var(--white); padding: 12px 50px; background: transparent;}
.btn.btn-info:hover {border: 1px solid var(--black); background: var(--black); color: var(--white);}

::placeholder {color: var(--black); opacity: 1;}
:-ms-input-placeholder {color: var(--black);}
::-ms-input-placeholder {color: var(--black);}

/** NAVBAR **/
nav.navbar {padding: 35px 0; background: transparent;}
nav.navbar a.navbar-brand {font-family: "Junge", cursive; font-size: 26px; color: var(--white); padding: 0;}
nav.navbar a.navbar-brand:hover {color: var(--white);}
nav.navbar.bg-light a.navbar-brand, nav.navbar.bg-light a.navbar-brand:hover {color: var(--black);}
.navbar-nav {margin: 0;}
.navbar-nav li.active .nav-link.active, .navbar-light .navbar-nav .nav-link {font-family: "Roboto", sans-serif; font-size: 15px; text-transform: uppercase; font-weight: 500; line-height: 22px; color: var(--white); padding: 0; margin: 0 35px; text-shadow: none; border-radius: 0; transition: all .5s; border-bottom: 3px solid transparent;}
.navbar.bg-light {background: rgba(255,255,255,.9) !important; padding: 15px 0; border-bottom: 1px solid var(--black);}
.navbar-nav.bg-light li.active .nav-link.active, .navbar-light.bg-light .navbar-nav .nav-link {color: var(--black);}
nav.navbar-light .navbar-nav .nav-link::after {content: ''; display: block; width: 0; height: 1px; background: var(--white); transition: width .3s; margin-top: 2px;}
nav.navbar-light.int .navbar-nav .nav-link::after {background: var(--black);}
nav.navbar-light.bg-light .navbar-nav .nav-link::after {background: var(--black);}
nav.navbar-light .navbar-nav .nav-link:hover::after, nav.navbar-light .navbar-nav .nav-link.active::after {width: 100%;}
.navbar-light .lang-item .nav-link:hover::after, .navbar-light.int .lang-item .nav-link.active::after {width: 0 !important;}
.dropdown-toggle::after {margin-left: 0; vertical-align: inherit; border: none;}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav li.active .nav-link.active {color: var(--white);}
.navbar-light.bg-light .navbar-nav .nav-link:hover, .navbar-light.bg-light .navbar-nav .nav-link.active, .navbar-light.bg-light .navbar-nav li.active .nav-link.active {color: var(--black);}
.navbar-light .navbar-nav .nav-link:focus {color: rgba(255,255,255,1);}
.navbar-light.int .navbar-nav .nav-link:focus {color: var(--black);}
.navbar-light.int .navbar-nav .nav-link:hover, .navbar-light.int .navbar-nav .nav-link.active, .navbar-light.int .navbar-nav li.active .nav-link.active{color: var(--black);}
.navbar-light.int.bg-light .navbar-nav .nav-link:hover, .navbar-light.int.bg-light .navbar-nav .nav-link.active, .navbar-light.int.bg-light .navbar-nav li.active .nav-link.active{color: var(--white);}

button.navbar-toggler span {display: block; width: 20px; height: 1px; background-color: var(--black);}
button.navbar-toggler.collapsed span {transform: rotate(0); position: relative; margin: 5px 0;}
button.navbar-toggler.collapsed span:first-child {transform: rotate(0);}
button.navbar-toggler span:first-child {transform: rotate(45deg);}

button.navbar-toggler.collapsed span:last-child {transform: rotate(0); margin-top: 0;}
button.navbar-toggler span:last-child {transform: rotate(130deg); margin-top: -1px;}
button.navbar-toggler.collapsed span:nth-child(2) {background-color: var(--black);}
button.navbar-toggler.collapsed span:nth-child(2) {display: block;}
button.navbar-toggler span:nth-child(2) {display: none;}

/*** Slide ***/
.cnt-slide .carousel {position: relative;}
.cnt-slide .carousel .carousel-item {position: relative; background-size: cover !important; background-repeat: no-repeat !important; height: 100vh; background-position: center !important;}
.cnt-slide .carousel .carousel-item:after {position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 10%; background: rgba(0,0,0,.9);}
.cnt-slide .carousel .carousel-caption {left: auto; top: 0; right: auto; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 99vh; z-index: 5;}
.cnt-slide .carousel .carousel-caption h1 {font-family: "Roboto", sans-serif; font-size: 25px; line-height: 35px; font-weight: 500; color: var(--white); text-align: left;}
.cnt-slide .carousel .carousel-control-next, .cnt-slide .carousel .carousel-control-prev {top: 50%; margin-top: -35px; border-radius: 50%; height: 70px; width: 70px; background: none;}
.cnt-slide .carousel .carousel-control-next {margin-right: 35px;}
.cnt-slide .carousel .carousel-control-prev {margin-left: 35px;}
.cnt-slide .carousel-control-next-icon, .cnt-slide .carousel-control-prev-icon {width: 15rem; height: 15rem;}

/** FOOTER **/
footer {background: var(--grey); padding: 50px 0;}
footer a.navbar-brand {color: var(--black);}
footer p {color: var(--black); font-size: 15px; line-height: 23px; margin-bottom: 5px; font-weight: 400;}
footer p a {color: var(--black); text-decoration: none;}
footer p a:hover {color: var(--black); text-decoration: underline;}
footer ul {list-style: none; margin: 0; font-size: 15px; line-height: 23px; font-weight: 400;}
footer ul li a {color: var(--black); text-decoration: none;}
footer ul li a:hover {color: var(--black); text-decoration: underline;}

/** COPY **/
.copy {background: var(--grey); padding: 15px 0; border-top: 1px solid var(--black);}
.copy p {color: var(--black); margin: 0; font-size: 12px; line-height: 15px;}
.copy p a {color: var(--black); text-decoration: none;}
.copy p a:hover {color: var(--black); text-decoration: underline;}
.copy ul.social {display: flex; list-style: none; margin: 0; justify-content: flex-end}
.copy ul.social li {margin-left: 10px;}
.copy ul.social li a {display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--black); color: var(--white); text-decoration: none;}
.copy ul.social li a:hover {background: var(--black); color: var(--white); opacity: .6;}
.copy ul.social i {font-size: 20px;}

/*** Back to top ***/
#btn-back-to-top {position: fixed; bottom: 25px; right: 20px; display: none; z-index: 9999; transition: all .5s; border-radius: 50%; color: var(--black); background: var(--white); width: 50px; height: 50px; font-size: 18px;}
#btn-back-to-top:hover {transition: all .5s; bottom: 35px; box-shadow: 0 0 15px 1px #000;}
#btn-back-to-top i {display: flex; justify-content: center; width: 18px; height: 10px; align-items: center;}

/** INTRO **/
.intro {padding: 7% 0 5%;}
.intro h2 {text-transform: none;}
.intro p {margin-top: 15px;}

/** LIST PROGETTI **/
.list-progetti {background: var(--lightgrey); padding: 4% 0;}
.list-progetti p {margin-top: 20px;}
.list-progetti .box {margin-top: 50px;}
.list-progetti .box a {overflow: hidden; /*border: 1px solid rgba(0,0,0,0.25);*/ display: block; /*padding: 15px;*/ text-decoration: none;}
.list-progetti .box a h3 {margin-top: 25px;}
.list-progetti .box a img {overflow: hidden;}
.list-progetti .box a:hover img {opacity: .7; transform: scale(1.20);}
.list-progetti .box a p {margin-top: 15px; min-height: 105px;}

/** ARCHIVIO PROGETTI **/
.archive-progetti {padding: 4% 0;}
.archive-progetti h2, .archive-progetti p {text-align: center;}
.archive-progetti p {margin-top: 20px;}
.archive-progetti .list {list-style: none; display: flex; margin: 40px 0 0 0; padding: 0; justify-content: space-between; flex-wrap: wrap;}
.archive-progetti .list li {flex-basis: 46%; /*border: 1px solid var(--black);*/ display: flex; justify-content: space-between; /*padding: 20px;*/ margin-bottom: 30px;}
/*.archive-progetti .list li:hover {background: var(--lightgrey);}*/
.archive-progetti .list li .img {flex-basis: 48%;}
.archive-progetti .list li .text {flex-basis: 48%; display: flex; flex-direction: column; justify-content: flex-start; padding: 0 10px 10px 0;}
.archive-progetti .list li .text h3 {min-height: 60px; max-height: 60px;}
.archive-progetti .list li .text h3 a, .archive-progetti .list li .text h3 a:hover {color: var(--black); text-decoration: none;}
.archive-progetti .list li .text p {text-align: left; margin-top: 0; min-height: 115px; max-height: 115px;}
.archive-progetti .list li a.link {color: var(--red); text-align: right; font-size: 14px; text-decoration: none; line-height: 20px; font-weight: 600;}
.archive-progetti .list li a.link:hover {color: var(--primary); text-decoration: underline;}

/** BOX CTA **/
.box-cta {background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important; padding: 5% 0;}
.box-cta p {font-size: 24px; line-height: 34px; color: var(--white);}

/** HEADER INTERNAL **/
.header-int {min-height: 500px; max-height: 500px; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; position: relative; display: flex; justify-content: center; align-items: center;}
.header-int:after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: rgba(0,0,0,.25); /*background: linear-gradient(180deg,rgba(0,0,0,1) 0%, rgba(255,255,255, 0.2) 95%);*/}
.header-int p {position: relative; z-index: 99; font-size: 28px; line-height: 38px; text-transform: uppercase; color: var(--white);}

/** CONTENT **/
.content {padding: 5% 0;}
.content h2 {text-transform: none;}
.content p {margin-top: 20px;}

/** STAFF **/
.cnt-staff {padding: 0 0 5%;}
.cnt-staff ul {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between;}
.cnt-staff ul li {flex-basis: 235px;}
.cnt-staff ul li h3 {margin-top: 15px;}
.cnt-staff ul li p {margin-top: 10px;}

/** LISTA ARCHIVIO **/
.list-archive {padding-bottom: 5%;}
.list-archive ul.archive {display: flex; list-style: none; flex-wrap: wrap; justify-content: space-between;}
.list-archive ul.archive li {width: 45%; display: flex; /*border: 1px solid var(--black); padding: 30px;*/ justify-content: space-between; align-items: flex-start; margin-bottom: 30px;}
.list-archive ul.archive li .box-img {max-width: 275px;}
.list-archive ul.archive li img {max-width: 275px;}
.list-archive ul.archive li .box-text {max-width: 280px; min-width: 280px;}
/*.list-archive ul.archive li:hover {background: rgba(231, 231, 231, .1);}*/
.list-archive ul.archive li h3 {min-height: 60px; max-height: 60px; line-height: 26px; font-size: 19px;}
.list-archive ul.archive li p {min-height: 115px; max-height: 115px; font-size: 16px; line-height: 22px;}
.list-archive ul.archive li h3 a, .list-archive ul.archive li p a {color: var(--black); text-decoration: none;}
.list-archive ul.archive li a.link {color: var(--red); text-align: right; font-size: 14px; text-decoration: none; line-height: 20px; font-weight: 600;}
.list-archive ul.archive li a.link:hover {color: var(--primary); text-decoration: underline;}

/** CONTENT ARCHIVIO **/
.content-archive {padding: 5% 0;}
.content-archive h2 {text-transform: none;}
.content-archive h3 {margin-top: 20px;}
.content-archive p {margin-top: 20px;}

/** GALLERY **/
.gallery {padding: 5% 0;}
.gallery .gallery-progetto img {margin: 0; max-height: 550px;}
.gallery-progetto a {display: block; cursor: zoom-in; margin: 0 20px;}
.gallery-progetto img {display: block; width: 100%; height: auto;}
.gallery .slide-arrow.prev-arrow.slick-arrow, .gallery .slide-arrow.next-arrow.slick-arrow {position: absolute; right: 0; top: 0; height: 100%; border: none; background: rgba(0,0,0,.5); font-size: 30px; color: var(--white); font-weight: 300 !important; padding: 0 10px;}
.gallery .slide-arrow.next-arrow.slick-arrow {right: 0; top: 0;}
.gallery .slide-arrow.prev-arrow.slick-arrow {left: 0; z-index: 999; right: auto;}

/** PROGETTI CORRELATI **/
.list-correlati {padding: 0 0 5% 0;}
.list-correlati h3 {border-bottom: 1px solid var(--black); padding-bottom: 5px;}
.list-correlati ul.projects {margin: 30px 0 0; padding: 0; display: flex; list-style: none; flex-wrap: wrap; justify-content: space-between;}
.list-correlati ul.projects.right {float: right;}
.list-correlati ul.projects li {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px;}
.list-correlati ul.projects li .box-img {max-width: 250px;}
.list-correlati ul.projects li img {max-width: 250px;}
.list-correlati ul.projects li .box-text {max-width: 330px; padding: 0 0 5px 0;}
/*.list-correlati ul.projects li:hover {background: rgba(0,0,0,.3);}*/
.list-correlati ul.projects li h3 {border-bottom: 0; font-size: 18px; line-height: 24px;}
.list-correlati ul.projects li h3 a, .list-correlati ul.projects li p a {color: var(--black); text-decoration: none;}

/** LISTA PROGETTI **/
.list-projects {padding: 5% 0; /*background: var(--lightgrey);*/}
.list-projects .box-projects {/*box-shadow: 0 4px 4px 0 rgba(0,0,0,.25);*/ background: var(--white); padding: 0 0 50px; margin-bottom: 50px;}
.list-projects .box-projects img {}
.list-projects .box-projects h3 a, .list-projects .box-projects p a {color: var(--black); text-decoration: none;}
.list-projects .box-projects h3 {margin: 10px 10px 0; min-height: 60px;}
.list-projects .box-projects p {margin: 10px 10px 0; min-height: 85px;}
.list-projects .box-projects span {display: block; margin: 10px 10px 0;}
.list-projects .box-projects a.link {font-family: "Roboto", sans-serif; color: var(--red); text-decoration: none; font-size: 16px; line-height: 16px; font-weight: 700; text-align: right;}
.list-projects .box-projects a.link:hover {color: var(--black);}

/** CONTENT PROGETTO **/
.content-progetto {padding: 5% 0;}
.content-progetto h2 {text-transform: none;}
.content-progetto h3 {margin-top: 20px;}
.content-progetto p {margin-top: 20px;}
.content-progetto p a {color: #9F9E95; text-decoration: underline;}

/** PAGINA CONTATTI **/
.cnt-contatti {margin-top: 5%; padding: 90px 0; background: url(../img/bkg-contatti.png) no-repeat; background-position: -60% 0%; background-size: contain; background-attachment: fixed;}
.cnt-contatti h2 {text-transform: none; margin-bottom: 30px;}
.cnt-contatti p {line-height: 22px;}
.cnt-contatti p a {color: /*var(--black)*/#9F9E95; text-decoration: underline;}
.cnt-contatti {line-height: 24px;}
.cnt-contatti .form input.form-control {min-height: 100px; border-radius: 0;}
.cnt-contatti .form .material-field {position: relative;}
.cnt-contatti .form .material-field-input {font-size: 18px; padding: 15px 25px; width: 100%; min-height: 100px; display: block; border-radius: 0; border: 1px solid var(--black); background: var(--white); border-bottom: 0;}
.cnt-contatti .form textarea.material-field-input {border-bottom: 1px solid var(--black); min-height: 450px; resize: none; padding-top: 35px;}
.cnt-contatti .form .material-field-input:focus {outline: none; border: 1px solid var(--black);}
.cnt-contatti .form .material-field-input:focus ~ .material-field-label {color: var(--grey); transform: scale(0.75) translate(-15px, -25px);}
.cnt-contatti .form .material-field-label {color: var(--black); background: #fff; font-size: 16px; font-weight: normal; position: absolute; pointer-events: none; top: 10px; left: 15px; padding: 0 8px; transition: 150ms cubic-bezier(0.4, 0, 0.2, 1) all; -moz-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1) all; -webkit-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1) all;}
.cnt-contatti .form .form-check-input {border: 1px solid var(--grey);}
.cnt-contatti .form .form-check label {color: var(--black);}