/* =========================================================
   GLOBAL
   ========================================================= */
.text-dark-golden-yellow { color: #d19a23; }
.text-green { color: #5fbe07; }
.border-color-dark-golden-yellow { border-color: #d19a23 !important; }
.text-shadow-none { text-shadow: none !important; }

:root {
	--primary-font: "Montserrat", sans-serif !important;
	--text-shadow-header: 0 0 10px black, 0 0 10px black;
}
@font-face {
	font-family: "aquavit";
	src: url("../fonts/aquavit-regular.otf");
}
.alt-font {
	font-family: "aquavit";
	word-spacing: initial;
}
.text-justify { text-align: justify; }

@media(max-width: 570px){
	.img-virgolette { width: 30px; }
}
@media(max-width: 980px){
	#section-numbers { padding-bottom: 100px !important; }
}

.progress-inverse .progress-bar-percent { transform: translateY(200%); }
.progress-inverse .progress-bar-percent:after { top: -24% !important; transform: rotate(180deg); }

header .navbar-brand img { max-height: 68px; }
header .header-top-bar { display: block; }
header .disable-fixed { top: 0 !important; position: relative !important; }
body section.top-space-padding { padding-top: 0 !important; }
@media (max-width: 767px) {
	header .header-top-bar {
		display: block;
		height: 50px;
	}
	header .header-top-bar + .navbar { top: 42px; }
}

@media(max-width: 1700px){ #trex { opacity: .3; } }

@media(max-width:768px){
	.fascia-header-iniziale { font-size: 12px !important; line-height: 15px !important; }
}


/* =========================================================
   HERO h1 / pagedescription - colore bianco su immagine
   ========================================================= */
/* index.php (sempre bianco) */
#header-home .header-h1, #header-home .header-pagedescription { color: #fff !important; text-shadow: var(--text-shadow-header); }

@media(max-width: 1800px){ #header-donate .header-pagedescription { color: #fff !important; text-shadow: var(--text-shadow-header); } }
@media(max-width: 1660px){ #header-families h1, #header-families .header-pagedescription { color: #fff !important; text-shadow: var(--text-shadow-header); } }
@media(max-width: 1580px){ #header-meetzo h1, #header-meetzo .header-pagedescription { color: #fff !important; text-shadow: var(--text-shadow-header); } }
@media(max-width: 1460px){ #header-donate .header-h1 { color: #fff !important; text-shadow: var(--text-shadow-header); } }
@media(max-width: 1450px){ #header-services h1, #header-services .header-pagedescription { color: #fff !important; text-shadow: var(--text-shadow-header); } }
@media(max-width: 1380px){ #header-events h1, #header-events .header-pagedescription { color: #fff !important; text-shadow: var(--text-shadow-header); } }
@media(max-width: 1360px){ #header-contactus h1, #header-contactus .header-pagedescription { color: #fff !important; text-shadow: var(--text-shadow-header); } }
@media(max-width: 992px){
	.header-h1, .header-pagedescription { color: #fff !important; text-shadow: var(--text-shadow-header); }
	.header-h1 > br, .header-pagedescription > br { display: none; }
}



/* =========================================================
   HOME (index.php)
   ========================================================= */
#home-vimeo-video span { position: absolute; width: 100%; height: 100%; background: #0000006b; z-index: 2; }
#home-vimeo-video iframe { width: 100%; height: 116%; }
@media(max-width: 992px){ #home-vimeo-video iframe { width: 100%; height: 113%; } }

#home-headersection { min-height: 800px; }
@media(min-width: 350px){
	#home-vimeo-video iframe { width: 430%; height: 100%; transform: translateX(-38%) translateY(-4%); }
	#home-headersection { min-height: 600px; }
}
@media(min-width: 600px){
	#home-vimeo-video iframe { width: 305%; transform: translateX(-34%) translateY(-4%); }
	#home-headersection { min-height: 750px; }
}
@media(min-width: 1100px){
	#home-vimeo-video iframe { width: 180%; transform: translateX(-22%) translateY(-4%); }
	#home-headersection { min-height: 850px; }
}
@media(min-width: 1400px){
	#home-vimeo-video iframe { width: 130%; transform: translateX(-13%) translateY(-10%); }
	#home-headersection { min-height: 750px; }
}
@media(min-width: 1700px){
	#home-vimeo-video iframe { width: 125%; transform: translateX(-11%) translateY(-10%); }
	#home-headersection { min-height: 850px; }
}
@media(min-width: 1900px){
	#home-vimeo-video iframe { width: 120%; transform: translateX(-10%) translateY(-10%); }
	#home-headersection { min-height: 900px; }
}
@media(min-width: 2000px){
	#home-vimeo-video iframe { width: 125%; transform: translateX(-10%) translateY(-15%); }
	#home-headersection { min-height: 900px; }
}
@media(min-width: 2190px){
	#home-vimeo-video iframe { width: 115%; height: 100%; transform: translateX(-6%) translateY(-10%); }
	#home-headersection { min-height: 950px; }
}

#container-video-whywearedifferent, #container-video-whywearedifferent .parent-iframe-container { height: 700px; }
#container-video-whywearedifferent > div:first-child { top: -4px; }
#container-video-whywearedifferent > div:last-child { bottom: -4px; }
#container-video-whywearedifferent .iframe-container {
	position: relative;
	top: -40%;
	padding-bottom: 56.15%;
}
#container-video-whywearedifferent .iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#container-video-whywearedifferent .iframe-container { top: -15%; }

@media(max-width: 2000px){ #container-video-whywearedifferent .iframe-container { top: -20%; } }
@media(max-width: 1950px){ #container-video-whywearedifferent .iframe-container { top: -16%; } }
@media(max-width: 1540px){
	#container-video-whywearedifferent, #container-video-whywearedifferent .parent-iframe-container { height: 600px; }
	#container-video-whywearedifferent .iframe-container { top: -5%; }
	#container-video-whywearedifferent .iframe-container iframe { position: absolute; top: 0; left: 0; width: 130%; height: 100%; transform: translateX(-10%); }
}
@media(max-width: 1110px){
	#container-video-whywearedifferent, #container-video-whywearedifferent .parent-iframe-container { height: 400px; }
	#container-video-whywearedifferent .iframe-container { top: -13%; }
}
@media(max-width: 810px){
	#container-video-whywearedifferent, #container-video-whywearedifferent .parent-iframe-container { height: 400px; }
	#container-video-whywearedifferent .iframe-container { top: -0%; }
}
@media(max-width: 725px){
	#container-video-whywearedifferent, #container-video-whywearedifferent .parent-iframe-container { height: 300px; }
	#container-video-whywearedifferent .iframe-container { top: -10%; }
}
@media(max-width: 580px){ #container-video-whywearedifferent .iframe-container { top: 0%; } }
@media(max-width: 545px){
	#container-video-whywearedifferent, #container-video-whywearedifferent .parent-iframe-container { height: 200px; }
	#container-video-whywearedifferent .iframe-container { top: -10%; }
}
@media(max-width: 405px){ #container-video-whywearedifferent .iframe-container { top: 0%; } }
@media(max-width: 370px){
	#container-video-whywearedifferent, #container-video-whywearedifferent .parent-iframe-container { height: 150px; }
	#container-video-whywearedifferent .iframe-container { top: -5%; }
}

.cardservice:hover { cursor: pointer; }
.cardservice img { transition: all linear .4s; }
.cardservice:hover img { transform: scale(1.1); }
.cardservice hr { transition: all linear .5s; width: 0; }
.cardservice:hover hr { width: 100%; }

@media(max-width:768px){
	.title-our-inspiration { margin-bottom: 10px!important; padding-bottom: 10px!important; }
}


/* =========================================================
   ABOUT-US (about-us.php)
   ========================================================= */
#container-video-vimeo, #container-video-vimeo .parent-iframe-container { height: 860px; }
#container-video-vimeo > div:first-child { top: -4px; }
#container-video-vimeo > div:last-child { bottom: -4px; }
#container-video-vimeo .iframe-container {
	position: relative;
	top: -42%;
	padding-bottom: 56.15%;
}
@media(max-width: 1950px){ #container-video-vimeo .iframe-container { top: -9%; } }
@media(max-width: 1540px){ #container-video-vimeo .iframe-container { top: 0%; } }
@media(max-width: 1410px){
	#container-video-vimeo, #container-video-vimeo .parent-iframe-container { height: 600px; }
	#container-video-vimeo .iframe-container { top: -6%; }
}
@media(max-width: 1110px){
	#container-video-vimeo, #container-video-vimeo .parent-iframe-container { height: 500px; }
	#container-video-vimeo .iframe-container { top: -14%; }
}
@media(max-width: 1020px){
	#container-video-vimeo, #container-video-vimeo .parent-iframe-container { height: 450px; }
	#container-video-vimeo .iframe-container { top: -10%; }
}
@media(max-width: 880px){
	#container-video-vimeo, #container-video-vimeo .parent-iframe-container { height: 350px; }
	#container-video-vimeo .iframe-container { top: -11%; }
}
@media(max-width: 680px){ #container-video-vimeo .iframe-container { top: 0%; } }
@media(max-width: 630px){
	#container-video-vimeo, #container-video-vimeo .parent-iframe-container { height: 300px; }
	#container-video-vimeo .iframe-container { top: -11%; }
}
@media(max-width: 580px){ #container-video-vimeo .iframe-container { top: 2%; } }
@media(max-width: 520px){
	#container-video-vimeo, #container-video-vimeo .parent-iframe-container { height: 250px; }
	#container-video-vimeo .iframe-container { top: -6%; }
}
@media(max-width: 480px){ #container-video-vimeo .iframe-container { top: 0%; } }
@media(max-width: 440px){
	#container-video-vimeo, #container-video-vimeo .parent-iframe-container { height: 200px; }
	#container-video-vimeo .iframe-container { top: -6%; }
}
@media(max-width: 380px){ #container-video-vimeo .iframe-container { top: 0%; } }
@media(max-width: 340px){
	#container-video-vimeo, #container-video-vimeo .parent-iframe-container { height: 150px; }
	#container-video-vimeo .iframe-container { top: -6%; }
}

@media(max-width: 1290px){ #header-aboutus { background-position-x: -250px !important; } }
@media(max-width: 1270px){ #header-aboutus { background-position-x: -450px !important; } }
@media(max-width: 1190px){ #header-aboutus { background-position-x: -250px !important; } }
@media(max-width: 1070px){ #header-aboutus { background-position-x: -450px !important; } }
@media(max-width: 991px){ #header-aboutus { background-position-x: -250px !important; } }
@media(max-width: 660px){ #header-aboutus { background-position-x: -450px !important; } }
@media(max-width: 580px){ #header-aboutus { background-position-x: -300px !important; } }


/* =========================================================
   DONATE (donate.php)
   ========================================================= */
@media(min-width: 780px){ .zbf-titletypeamount { padding: 0 60px; } }
@media(max-width: 780px){ .fs-26 { font-size: 24px; } }
.zbf-btn-amount {
	background-color: #384945;
	color: #FFF;
	padding: 12px 0px;
	font-size: 1.4rem;
	border-radius: .5rem;
	width: 250px;
	max-width: 100%;
}
.zbf-btn-amount.onetime {
	background-color: #fdde3c;
	color: #384945;
}
.zbf-btn-amount.onetime.btnipt { border: 0 !important; }
.zbf-btn-amount.onetime.btnipt.shadow { box-shadow: 0 0 8px 0px #515151; }
.zbf-btn-amount.onetime.active, .zbf-btn-amount.onetime:not(.btnipt):hover {
	background-color: #fdde3c;
	color: #384945;
	border: 3px solid #384945;
	box-shadow: 0 0 9px 1px #797977;
}
.zbf-btn-amount.monthly.btnipt { border: 0 !important; }
.zbf-btn-amount.monthly.btnipt.shadow { box-shadow: 0 0 8px 0px #515151; }
.zbf-btn-amount.monthly.active, .zbf-btn-amount.monthly:not(.btnipt):hover {
	background-color: #384945;
	color: #fff;
	border: 3px solid #fff;
	box-shadow: 0 0 9px 1px #797977;
}

.zbf-ipt-amount {
	width: 30%;
	background-color: transparent !important;
	border: 0 !important;
	padding: 0;
	border-radius: 0;
	border-bottom: 2px solid !important;
	font-size: 1.4rem;
	font-weight: 600;
	text-align: center;
}
.zbf-ipt-amount.onetime {
	color: #384945;
	border-color: #384945;
}
.zbf-ipt-amount.monthly {
	color: #fff;
	border-color: #fff;
}


/* =========================================================
   GALLERY (gallery.php)
   ========================================================= */
.zbf-switch-container { --widthswitch: 180px; --heightswitch: 30px; width: fit-content; }

.zbf-switch {
	position: relative;
	display: inline-block;
	width: var(--widthswitch);
	height: var(--heightswitch);
}
.zbf-switch input { display: none; }

.zbf-slider {
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	cursor: pointer;
	background-color: #fff;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: var(--heightswitch);
	border: 3px solid #c9c9c9;
}

.zbf-slider:before {
	position: absolute;
	content: "";
	height: calc(var(--heightswitch) - 10px);
	width: calc(var(--heightswitch) - 10px);
	left: 4px;
	bottom: 2px;
	background-color: #c9c9c9;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 50%;
}

input:checked + .zbf-slider:before {
	-webkit-transform: translateX( calc(var(--heightswitch) - 12px) );
	-ms-transform: translateX( calc(var(--heightswitch) - 12px) );
	transform: translateX( calc(var(--widthswitch) - var(--heightswitch) - 4px) );
}

.zbf-switch-label { top: calc( var(--heightswitch) + 10px ); }
.zbf-switch-label.start-0 { transform: translateX(-50%); }
.zbf-switch-label.end-0 { transform: translateX(50%); }

@media(max-width: 668px){ #header-gallery { background-position-x: -400px !important; } }


/* =========================================================
   OUR-CAUSES (our-causes.php)
   ========================================================= */
@media(max-width: 991px){ #header-causes { background-position-x: -800px !important; } }
@media(max-width: 761px){ #header-causes { background-position-x: -600px !important; } }
@media(max-width: 668px){ #header-causes { background-position-x: -600px !important; } }


/* =========================================================
   MEET ZO (meet-zo.php)
   ========================================================= */
@media(max-width: 650px){ #header-meetzo { background-position-x: 95% !important; } }
@media(max-width: 550px){
	#header-meetzo {
		background-position-x: 50% !important;
		background-image: url('/img/meetzo-header-bg-mobile.jpg') !important;
	}
}
/* @media(max-width: 500px){ #header-meetzo { background-position-x: 89% !important; } }
@media(max-width: 450px){ #header-meetzo { background-position-x: 85% !important; } }
@media(max-width: 400px){ #header-meetzo { background-position-x: 80% !important; } } */


/* =========================================================
   EVENT (event.php)
   ========================================================= */
@media(max-width: 800px){ #header-events { background-position-x: 90% !important; } }
@media(max-width: 700px){ #header-events { background-position-x: 86% !important; } }
@media(max-width: 600px){ #header-events { background-position-x: 81% !important; } }



/* =========================================================
SERVICES (services.php) - "Our Approach" infographic
========================================================= */
@media(max-width: 1200px){ #title-weareextensionfamily { font-size: 2.2rem; } }
@media(max-width: 800px){ #header-services { background-position-x: 96% !important; } }
@media(max-width: 700px){ #header-services { background-position-x: 89% !important; } }
@media(max-width: 600px){
	#header-services { background-position-x: 83% !important; }
	#title-weareextensionfamily { font-size: 2rem !important; }
}

.zbf-approach{ display:flex; justify-content:center; border-radius:6px; box-shadow:0 20px 40px rgba(0,0,0,.12); }
.zbf-step{ flex:1; display:grid; grid-template-rows:1fr 1fr; color:#fff; text-align:center; position:relative;overflow:hidden; }
.zbf-step-head, .zbf-step-text{ display:flex; flex-direction:column; justify-content:center; padding:30px 20px; }
.zbf-step:not(:first-child)::after{ content: ''; position: absolute; top: 14%; left: -15px; width: 14px; height: 72%; border-radius: 50%; box-shadow: 0 0 7px 12px rgba(0, 0, 0, .32); z-index: 2; clip-path: inset(-40px -40px -40px 50%); }
.zbf-step--green{ background:linear-gradient(180deg,#31bc3b 0%,#31bc3b 50%,#138c18 50%,#138c18 100%); }
.zbf-step--lime{ background:linear-gradient(180deg,#bacc2c 0%,#bacc2c 50%,#879825 50%,#879825 100%); }
.zbf-step-num{ display:block; font-weight:600; font-size:50px; line-height:1; letter-spacing:-3px; margin-bottom:25px; }
.zbf-step-title{ color:#fff; font-weight:600; font-size:17px; line-height:1.4; margin-bottom:0; }
.zbf-step-num, .zbf-step-title { font-family: "Michroma", sans-serif; }
.zbf-step-text{ font-size:16px; line-height:2; margin:0; opacity:.97; }
@media(max-width:1200px){
	.zbf-approach{ flex-wrap:wrap; box-shadow:none; }
	.zbf-step{ flex:0 0 30%; max-width:30%; }
	.zbf-step:not(:last-child){ box-shadow:none; }
}
@media(max-width:991px){
	.zbf-approach{ flex-wrap:wrap; box-shadow:none; }
	.zbf-step{ flex:0 0 50%; max-width:50%; }
	.zbf-step:not(:last-child){ box-shadow:none; }
}
@media(max-width:768px){
	.zbf-step{ flex:0 0 100%; max-width:100%; }
	.h3-services { font-size: 2.4rem !important; }
}



/* =========================================================
   OUR FAMILIES (families.php)
   ========================================================= */
@media(max-width: 800px){ #header-families { background-position-x: 76% !important; } }
@media(max-width: 500px){ #header-families { background-position-x: 72% !important; } }

#families-container { padding-left: 50px; padding-right: 50px; }
@media(min-width: 1350px){ #families-container { padding-left: 140px; padding-right: 140px; } }
@media(max-width: 550px){ #families-container { padding-left: 10px; padding-right: 10px; } }


/* =========================================================
   IN PIU PAGINE
   ========================================================= */
#families-container div.carditem { height: 550px; display: flex; flex-direction: column; justify-content: space-between; }
@media(min-width: 610px) and (max-width: 770px){
	#families-container div.carditem { height: 650px; }
}
.img-gallery { max-width: 100%; width: 400px; height: 300px; }