/*!
Theme Name: Insostenibili
Author: Netizens s.r.l.
Author URI: https://www.netizens.it/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: insostenibili
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

/*####################################################################
############################## GENERAL ###############################
####################################################################*/
*{
	line-height: 1.3;
	background-repeat: no-repeat;
	box-sizing: border-box;
	margin: 0;
}
body{
	overflow-x: hidden;
	font-size: 16px;
	font-weight: normal;
    font-style: normal;
    font-display: swap;
	font-family: 'SFProText';
}
h1, h2, h3, p{
	margin-top: 0;
	line-height: 1.2;
	color: #272827;
}
h1, h2, h3{
	font-family: 'Saltbush';
	font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.bg-primary{
	background-color: #755F80 !important;
}
.bg-light-blue{
	background-color: #D3E3E0 !important;
}
.bg-progetto{
	background-color: #EBD8B5 !important;
}
.bg-greenboard{
	background-color: #E8F0F2 !important;
	background-image: url("assets/img/bg-filter-greenboard.png");
	background-position: center;
	background-size: cover;
	background-blend-mode: multiply;
}
.bg-filter{
	background-image: url("assets/img/bg-filter.png");
	background-position: center;
	background-size: cover;
	background-blend-mode: difference;
}
.text-white, .text-white *{
	color: #FFF !important;
}
.text-primary, .text-primary *{
	color: #755F80 !important;
}
.text-progetto, .text-progetto *{
	color: #8C7470 !important;
}
.text-red, .text-red *{
	color: #BF6B6B !important;
}
.text-green, .text-green *{
	color: #86A579 !important;
}
.text-grey, .text-grey *{
	color: #A2A2A2;
}
.font-size-26{
	font-size: 20px;
}
.font-size-40, .font-size-40 *{
	font-size: 40px;
}
.height-auto{
	height: auto !important;
}
.pt-6{
	padding-top: 50px !important;
}
.wpb_wrapper p{
	margin-bottom: 10px;
}
/*###################################################################
############################## HEADER ###############################
####################################################################*/
.site-header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
.admin-bar .site-header{
	top: var(--wp-admin--admin-bar--height);
}
#menu-main-menu{
	list-style: none;
	padding-left: 0;
	display: table;
	width: 100%;
}
#menu-main-menu a{
	font-size: 14px;
	color: #FFF;
	text-transform: uppercase;
	text-decoration: none;
}
#menu-main-menu>li{
	float: left;
	margin-right: 30px;
}
#menu-main-menu>li:last-child{
	margin-right: 0;
}

/*###################################################################
############################## PAGES ################################
####################################################################*/
.vc_section.vc_section-has-fill.hp-video-section{
	padding-top: 60px;
	padding-bottom: 100px;
}
.site-main{
	padding-top: 30px;
	max-width: 100vw;
	overflow: hidden;
}
.custom-video-player:after{
	background-size: 50px auto;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("assets/img/icon-video-play.png");
	background-position: center;
	background-repeat: no-repeat;
	transition: opacity 0.3s ease-in-out;
	cursor: pointer;
	opacity: 1;
}
.custom-video-player.playing:after{
	opacity: 0;
	pointer-events: none;
}
.home-video{
	padding: 20px 29px 29px 24px;
	padding: 20px 15px 24px 15px;
	background-image: url("assets/img/bg-video-home.png");
	background-size: contain;
	background-position: center;
}
.section-storia{
	padding-top: 0px !important;
}
.negative-margin-top{
	margin-top: -100px;
}
.box-storia{
	position: relative;
}
.box-storia .btn-storia{
	position: absolute;
	width: 30px;
	height: 30px;
}
.box-storia .btn-storia:before{
	content: "";
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	cursor: pointer;
	background-image: url("assets/img/plus-icon.png");
	background-color: #000;
	border-radius: 100%;
	background-size: 50% auto;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	transform: rotate(0deg);
	transition: all .3s ease-in-out;
}
.box-storia .btn-storia.active:before{
	transform: rotate(45deg);
	background-image: url("assets/img/plus-icon-black.png") !important;
	background-color: #FF0000 !important;
}
.box-storia .btn-storia[order="1"]{
	left: 6%;
    top: 32%;
}
.box-storia .btn-storia[order="2"]{
	left: 20%;
	top: 32%;
}
.box-storia .btn-storia[order="3"]{
	left: 43%;
	top: 54%;
}
.box-storia .btn-storia[order="4"]{
	left: 62%;
    top: 43%;
}
.box-storia .btn-storia[order="5"]{
	left: 76%;
	top: 36%;
}
.box-storia .btn-storia[order="6"]{
	left: 90%;
	top: 36%;
}
.infobox{
	opacity: 0;
	pointer-events: none;
	transition: all .3s ease-in-out;
	background-color: #FFF;
	border-radius: 14px;
	width: 225px;
	font-size: 13px;
	padding: 15px;
	position: absolute;
	top: 45px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9;
}
.infobox:before{
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 15px;
	height: 15px;
	display: block;
	background-image: url("assets/img/tringle-up.png");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.box-storia .btn-storia[order="1"] .infobox{
	transform: translateX(-10%);
}
.box-storia .btn-storia[order="1"] .infobox:before{
	left: -80%;
}
.box-storia .btn-storia[order="2"] .infobox{
	transform: translateX(-25%);
}
.box-storia .btn-storia[order="2"] .infobox:before{
	left: -50%;
}
.box-storia .btn-storia[order="5"] .infobox{
	transform: translateX(-70%);
}
.box-storia .btn-storia[order="5"] .infobox:before{
	left: 40%;
}
.box-storia .btn-storia[order="6"] .infobox{
	transform: translateX(-90%);
}
.box-storia .btn-storia[order="6"] .infobox:before{
	left: 80%;
}
.infobox b{
	display: block;
	line-height: 1.1;
}

.infobox p{
	color: #8C7470;
}
.box-storia .btn-storia.active .infobox{
	opacity: 1;
	pointer-events: all;
}
.box-storia h2{
	font-size: 70px;
}
#slider-chapters{
	padding-top: 40px;
	user-select: none;
}
.slider-chapters-container{
	position: relative;
	padding-left: 25px;
	padding-right: 25px;
}

.chapter-box{
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.38);
	background-color: #755F80;
	border-radius: 13px;
}
.chapter-box:before{
	width: 58px;
	height: 56px;
	line-height: 56px;
	font-size: 30px;
	margin-top: -35px;
	content: attr(chapter);
	display: block;
	position: absolute;
	color: #755F80;
	font-family: 'Daft Brush';
	text-align: center;
	background-image: url("assets/img/icon-dot-white.png");
	background-size: contain;
	background-position: center;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.chapter-box .chapter-icon{
	width: 40px;
	height: auto;
}
.chapter-box .chapter-title{
	font-family: 'Saltbush';
	text-transform: uppercase;
	font-size: 30px;
}
.chapter-box .chapter-content{
	font-size: 15px;
	line-height: 1.2;
}
.btn-chapter{
	width: 100%;
	display: block;
	border: 0;
	border-radius: 10px;
	outline: none;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	line-height: 45px;
	padding-right: 30px;
	cursor: pointer;
	background-position: calc(100% - 14px) 50%;
}
.btn-book, .btn-vincitori{
	width: 150px;
	font-size: 15px;
	display: block;
	border: 0;
	border-radius: 10px;
	outline: none;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	line-height: 45px;
	padding-right: 40px;
	cursor: pointer;
}
.btn-chapter, .btn-book, .btn-vincitori{
	font-size: 15px;
	background-size: auto 15px;
	background-position: calc(100% - 14px) 50%;
}
.btn-chapter.read{
	background-color: #86A579;
	background-image: url("assets/img/icon-read-book.png");
}
.btn-chapter.listen{
	background-color: #BF6B6B;
	background-image: url("assets/img/icon-podcast.png");
}

.slider-pagination{
	width: auto !important;
}
.slider-pagination .swiper-pagination-bullet{
	background-image: url("assets/img/icon-dot.png");
	background-size: contain;
	background-position: center;
	background-color: transparent;
	width: 18px;
	height: 18px;
	opacity: 1 !important;
}
.slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
	background-image: url("assets/img/icon-dot-white.png");
}
.slider-navigation{
	width: 30px;
	height: 30px;
	background-size: contain;
	background-position: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}
.slider-navigation.prev{
	background-image: url("assets/img/arrow-slider-left.png");
	left: 0;
}
.slider-navigation.next{
	background-image: url("assets/img/arrow-slider-right.png");
	right: 0;
}
.swiper-button-disabled{
	opacity: 0;
	pointer-events: none;
}

.btn-book.download{
	background-color: #4E6467;
	background-image: url("assets/img/icon-download-book.png");
}
.btn-book.read{
	background-color: #86A579;
	background-image: url("assets/img/icon-read-book.png");
}
.btn-book.brown{
	background-color: #A46146;
	display: table;
    width: auto;
    text-align: center;
    padding: 0 30px;
}
.btn-vincitori{
	display: table;
    width: auto;
    text-align: center;
    padding: 0 20px;
}
.btn-vincitori.primary{
	background-color: #755F80;
}
.btn-vincitori.red{
	background-color: #BF6B6B;
}
.btn-vincitori.green{
	background-color: #86A579;
}
.book-img{
	position: relative;
}
.book-img img{
	position: relative;
	max-width: 100% !important;
	left: 50%;
	transform: translateX(-50%);
}
.df-container.df-lite{
	background-color: #A2A2A2 !important;
}
.page-template-page-book .site-main{
	background-color: #A2A2A2 !important;
}
.df-container>.df-ui-next, .df-container>.df-ui-prev{
	color: #755F80 !important;
	opacity: 1 !important;
}

/*###################################################################
######################### POPUP CHAPTERS ############################
####################################################################*/
.popup-chapter, .popup-experts, .popup-vincitori{
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background-color: rgba(0,0,0,0.6);
}
.popup-inner{
	padding: 0px;
	max-width: calc(100vw - 40px);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	position: relative;
	border-radius: 20px;
	background-color: #FFF;
}
.popup-vincitori .popup-inner{
	background-image: url("assets/img/bg-popup-vincitori.png");
	background-size: contain;
	background-position: center;
	border-radius: 0;
	background-color: transparent;
	padding: 20px;
}
.popup-chapter .popup-inner{
	padding: 20px;
}
.popup-chapter .chapter-img{
	max-width: 100%;
	height: auto;
	display: block;
}
.popup-chapter .chapter-title{
	font-size: 20px;
	font-family: 'Saltbush';
	text-transform: uppercase;
}
.popup-chapter .chapter-index-title{
	font-family: 'Saltbush';
	text-transform: uppercase;
}
.popup-chapter .chapter-content{
	font-size: 18px;
	color: #A2A2A2;
}
.popup-chapter .audio-file{
	width: 100%;
	display: block;
}
.popup-chapter .close-icon, .popup-vincitori .close-icon{
	top: -20px;
	right: -20px;
	width: 50px;
	height: 50px;
	position: absolute;
	cursor: pointer;
	background-image: url("assets/img/close-icon-popup.png");
	background-position: center;
	background-size: contain;
}
.img-progetto{
	max-width: 50%;
	float: left;
}

/*###################################################################
############################## EXPERTS ###############################
####################################################################*/
.expert-box{
	cursor: pointer;
}
.expert-title{
	font-family: 'Saltbush';
	text-transform: uppercase;
	font-size: 30px;
}
.expert-thumb{
	max-width: 120px;
	height: auto;
	display: block;
	margin: 0 auto;
	filter: grayscale(100%);
	transition: all 0.3s ease-in-out;
}
.expert-box:hover .expert-thumb, .expert-thumb.active{
	filter: none;
}
.expert_content, .excerpt-text{
	font-size: 15px;
}
.expert_content{
	max-height: 20vh;
	overflow-y: auto;
}
.popup-experts .excerpt-text{
	font-size: 16px;
}
.popup-experts .close-icon{
	top: -20px;
	right: -20px;
	width: 50px;
	height: 50px;
	position: absolute;
	cursor: pointer;
	background-position: center;
	background-size: contain;
}
.popup-experts[color='red'] .close-icon, .popup-vincitori[rank="2"] .close-icon{
	background-image: url("assets/img/close-icon-red.png");
}
.popup-experts[color='green'] .close-icon, .popup-vincitori[rank="3"] .close-icon{
	background-image: url("assets/img/close-icon-green.png");
}
.popup-experts[color='violet'] .close-icon, .popup-vincitori[rank="1"] .close-icon{
	background-image: url("assets/img/close-icon-violet.png");
}
.popup-experts[color='brown'] .close-icon{
	background-image: url("assets/img/close-icon-brown.png");
}
.popup-experts[color='red'] .expert_content, .popup-experts[color='red'] .expert-title{
	color: #BF6B6B;
}
.popup-experts[color='green'] .expert_content, .popup-experts[color='green'] .expert-title{
	color: #889577;
}
.popup-experts[color='violet'] .expert_content, .popup-experts[color='violet'] .expert-title{
	color: #755F80;
}
.popup-experts[color='brown'] .expert_content, .popup-experts[color='brown'] .expert-title{
	color: #8C7470;
}

/*###################################################################
########################### PROGETTO SCUOLE #########################
####################################################################*/
.vincitori-images{
	max-width: 50%;
	margin-left: auto;
	margin-right: auto;
}


/*###################################################################
############################## FOOTER ###############################
####################################################################*/
.site-footer{
	background-color: #4E6467;
	padding-top: 40px;
	padding-bottom: 40px;
}
.footer-logo-1{
	max-width: 220px;
	height: auto;
	display: block;
}
.footer-logo-2{
	max-width: 90px;
	height: auto;
	display: block;
}
.site-footer p, .site-footer a{
	font-size: 13px;
}



/*####################################################################
############################ MEDIA QUERY #############################
####################################################################*/
@media (min-width:576px){

}
@media (min-width:768px){
	#menu-main-menu a{
		font-size: 16px;
	}
	.site-main{
		padding-top: 45px;
	}
}
@media (min-width:992px){
	
	#menu-main-menu>li{
		margin-right: 58px;
	}
	#menu-main-menu a{
		font-size: 18px;
	}
	.home-video{
		padding: 20px 29px 29px 24px;
	}
	.img-progetto{
		max-width: 100%;
		float: none;
	}
	.slider-pagination .swiper-pagination-bullet{
		width: 30px;
		height: 30px;
	}
	.custom-video-player:after{
		background-size: 80px auto;
	}
	.chapter-box .chapter-icon{
		width: 85px;
	}
	.chapter-box .chapter-content{
		font-size: 16px;
	}
	.footer-logo-1{
		max-width: 340px;
	}
	.footer-logo-2{
		max-width: 115px;
	}
	.site-footer p, .site-footer a{
		font-size: 14px;
	}
}
@media (min-width:1200px){
	.site-main{
		padding-top: 55px;
	}
	.site-footer{
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.container{
		max-width: calc(100% - 60px) !important;
	}
	.container.expert-container{
		max-width: 1370px !important;
	}
	body{
		font-size: 18px;
	}
	.font-size-26{
		font-size: 26px;
	}
	.font-size-xl-70, .font-size-xl-70 *{
		font-size: 70px;
	}
	.py-xl-6{
		padding-top: 6rem !important;
		padding-bottom: 6rem !important;
	}
	.py-xl-7{
		padding-top: 7rem !important;
		padding-bottom: 7rem !important;
	}
	.vc_section.vc_section-has-fill.hp-video-section{
		padding-top: 130px;
		padding-bottom: 170px;
	}
	.negative-margin-top, .negative-margin-top-xl{
		margin-top: -120px;
	}

	.slider-navigation{
		width: 60px;
		height: 60px;
	}
	.slider-chapters-container{
		padding-left: 50px;
		padding-right: 50px;
	}
	.btn-book{
		width: 210px;
		font-size: 21px;
		background-position: calc(100% - 34px) 50%;
		background-size: auto 21px;
		padding-right: 50px;
		line-height: 65px;
	}
	.btn-chapter{
		font-size: 16px;
		background-position: calc(100% - 13px) 50%;
	}
	
	.box-storia .btn-storia:not(.active):hover:before{
		background-color: #FFF;
		background-image: url("assets/img/plus-icon-black.png");
	}
	.expert_content, .excerpt-text{
		font-size: 18px;
	}
	.expert_content{
		overflow-y: hidden;
		max-height: 100%;
	}
	.expert-thumb{
		max-width: 180px;
	}
	.popup-inner{
		padding: 20px;
		max-width: 1160px;
		border-radius: 34px;
	}
	.popup-vincitori .popup-inner{
		max-width: 860px;
		padding: 30px;
	}
	.book-img img{
		max-width: 130% !important;
	}
	.popup-experts .close-icon{
		top: -30px;
		right: -30px;
		width: 80px;
		height: 80px;
	}
	.chapter-box:before{
		width: 78px;
		height: 76px;
		line-height: 76px;
		font-size: 55px;
		margin-top: -35px;
	}
	.popup-chapter .close-icon{
		top: -40px;
		right: -20px;
		width: 80px;
		height: 80px;
	}
	.popup-chapter .chapter-img{
		max-width: 280px;
	}
	.popup-chapter .chapter-title{
		font-size: 40px;
	}
}
@media (min-width:1600px){
	.btn-chapter{
		font-size: 18px;
		background-position: calc(100% - 21px) 50%;
	}
	.book-img img{
		max-width: 135% !important;
	}
	.container{
		max-width: 1640px !important;
	}
	.chapter-box .chapter-content{
		font-size: 17px;
	}
	.px-xxxl-4{
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}
	.infobox{
		top: 65px;
	}
	.box-storia .btn-storia{
		width: 45px;
		height: 45px;
	}
	.box-storia .btn-storia .infobox{
		transform: translateX(-50%) !important;
	}
	.infobox:before{
		top: -20px;
		width: 25px;
		height: 25px;
		left: 0 !important;
	}
}
@media (min-width:2000px){

}