/*
Project: RCS Native Longform Intesa01
Company: The6th
Developer: F. Marra
Date: 05/10/2016
*/

/************************************************************************

	DESKTOP BREAKPOINTS

************************************************************************/
@media (max-width: 1366px) {
	.section-head {display: block;width: 100%;padding: 30px;}
	.divider[height="15"] {height: 5px;}
	.quiz .buttons {width: 90%;margin: 30px auto 0;}
	.quiz .buttons .answer{width:80px;height:80px;}	
	.quiz .section-head i {border-top-width: 50px;bottom: -50px;}
	/*typography*/
	body {font-size: 16px;line-height: 22px;}
	.site-main .site-section.textual p.quote {font-size: 24px;line-height: 30px;}
	.intro-text-wrap {line-height: 26px;font-size: 18px;}
	h1 {font-size: 46px;line-height: 50px;}
	h2,.quiz .question span, .quiz .question p  {font-size: 28px;line-height: 38px;}	
	.site-section.gallery .gallery-cover h2 {font-size: 30px;}
	.site-section.gallery .gallery-cover p, .site-section.gallery .slide-single .slide-text h3 {font-size: 30px;line-height: 38px;}	
	.site-section .gallery-carousel .gallery-slides .slide-single .slide-text h2 {font-size: 22px;line-height: 34px;}	
	.quiz .buttons .answer-text {font-size: 18px;line-height: 24px;}	
}
@media (max-width: 1080px) {
	.site-header .header-top .top-center a img{height: 36px;}
}

/************************************************************************

	TABLET BREAKPOINTS

************************************************************************/
/*LANDSCAPE*/
@media (max-width: 1024px) {
	.content-wrap{width: 100%;padding: 30px 70px;}
	.intro-section p{max-width: 600px;margin: 0 auto;}
	.quiz .buttons .answer:hover:before, .quiz .buttons .answer:hover:after {opacity: 0;}
	h1 {font-size: 42px;line-height: 46px;}
}
@media (max-width: 960px) {
	.site-header .header-top .top-center a.site-logo-two {
	   display:none;
	}
}
/*PORTRAIT*/
@media (max-width: 790px) {
	.content-wrap {width: 100%;padding: 30px;}
	.site-header .header-top .top-center a.site-logo-two,
	.site-header .header-top .top-left a span.vocedi-text,
	.site-header .header-top .top-right,
	.lateral-navigation,
	.site-section.gallery .gallery-carousel .gallery-controls .gallery-navigation{display: none;}
	.site-header .header-top .responsive-share,.site-header .responsive-share.close{display: block;}
	.social-lateral-bar {position: absolute;left: auto;top: -400%;margin-top: 0;right: 0;width: 70px;}
	.social-lateral-bar.active{top:0}
	.site-header .header-top .top-left a{margin-top: -25px;left: 5px;}
	.site-header .header-top .top-left a i.vocedi-bg{width: 50px;height: 50px;line-height: 50px;vertical-align: top;}
	.site-section.gallery .gallery-carousel .slide-single .slide-text{width: 100%!important;}
	.quiz .buttons .answer-text{padding: 0px 30px;}
}

/************************************************************************

	MOBILE BREAKPOINTS

************************************************************************/
/*LANDSCAPE*/
@media (max-width: 760px) 	{
	.site-header .header-top{height: 44px;}
	.site-header .header-top .top-left a {margin-top: -17px;}
	.site-header .header-top .top-left a i.vocedi-bg {height: 34px;width: 34px;line-height: 34px;}
	.site-header .header-top .top-center a {line-height: 0;}
	.site-header .header-top .top-center a img{height: auto;width: 300px;}	
	.site-header .header-top .responsive-share{height: 34px;width: 34px;background-size: 20px;}
	.site-header .header-bottom{background: #fff;border-top: 1px solid #dedede;height: 23px;border-bottom: 5px solid #94345D;position: relative;}
	.site-header .header-bottom .sentence{color: #333333;line-height: 18px;font-size: 11px;height: 18px;display: block;position: relative;}
	.site-header .header-bottom .sentence .numix{display: none;}
	.social-lateral-bar {top: -500%;}
	.social-lateral-bar a.whatsapp {display:block}
	.site-header .header-bottom .sentence i{display: inline-block;height: 14px;width: 14px;background: #808080;border-radius: 100%;-moz-border-radius: 100%;-webkit-border-radius: 100%;color: #fff;font-family: "Plaifair Display";text-transform: lowercase;line-height: 15px;font-weight: bold;margin-left: 3px;position: absolute;top: 1px;}
	.site-header .header-bottom .tooltip i{display:none}
	.site-header .header-bottom .tooltip .popup:before{content:none}
	.site-main .site-section.abstract-bg:after {background-size: cover;top: 0;left: 0;z-index: 0;}
	.site-main .site-section:last-child {padding-bottom: 0;}
	.site-footer{padding: 0 15px}	
	.site-footer {position: relative;float: left;border-bottom: 0;border-top: 5px solid #94345D;margin: 0;}
	.site-footer .footer-small{display:none	}
	.site-footer .footer-large{width: 100%;margin: 0;}
	.site-footer .content-wrap .row{height:auto;padding:10px 0;}
	.site-main .site-section{height:auto!important;padding: 0;z-index: auto;}
	.content-wrap {width: 100%;z-index:100}
	.site-main .site-section:first-child {padding-top: 95px;background-position: 40% 50%;background-size: cover;}
	.scroll-next{display:none;}
	.site-section.gallery .gallery-carousel .gallery-controls .gallery-navigation{display:none;}
	.site-section.gallery .slide-single .gallery-controls{margin-top: 0px;}
	.site-main .site-section[number="9"] .section-head:before{content:none;}
	.quiz .section-body{margin: 20px;}
	.quiz .buttons {width: 100%;margin-top: 10px;}
	.video-section .video-background{margin-top:0}
	.video-section .play-button{width: 100px;height: 100px;background-size: cover;margin: -50px;border-radius: 100%;background-color: rgba(0,0,0,0.2);}
	/*typography*/
	body {font-size: 15px;line-height: 22px;}
	.site-main .site-section.textual p.quote {font-size: 20px;line-height: 26px;}
	.intro-text-wrap {line-height: 22px;font-size: 16px;}
	h1 {font-size: 36px;line-height: 40px;}
	h2,.quiz .question span, .quiz .question p  {font-size: 24px;line-height: 28px;}	
	.site-section.gallery .gallery-cover h2 {font-size: 24px;}
	.site-section.gallery .gallery-cover p, .site-section.gallery .slide-single .slide-text h3 {font-size: 24px;line-height: 32px;margin-bottom: 20px;}	
	.site-section.gallery .gallery-cover span{width: 26px;height: 36px;margin-left: -13px;margin-top: 30px;}
	.site-section .gallery-carousel .gallery-slides .slide-single .slide-text h2 {font-size: 20px;line-height: 30px;}	
	.quiz .buttons .answer-text {font-size: 16px;line-height: 20px;padding: 0;margin-top: 5px;}		
}
/*PORTRAIT*/
@media (max-width: 540px) {
	.site-header .header-top .top-center{line-height:0}
	.site-header .header-top .top-center a img {width: 200px;}
	h1 {font-size: 28px;line-height: 34px;}
	.site-header .header-bottom .sentence {font-size: 10px;}
	.quiz .buttons {width: 100%;margin: 0;}
	.quiz .buttons .answer-wrap{width: 100%;text-align: left;margin-top: 15px;}
	.quiz .buttons .answer {width: 60px;height: 60px;position: absolute;z-index: 100;display: inline-block;left: 0;text-align: 0;}
	.quiz .buttons .answer-text {margin-top: 0;padding-left: 80px;top: 0;text-align: left;position: relative;margin-bottom: 20px;}
	.quiz .section-head{padding: 0 15px;height: 15%;}	
	.quiz .section-head i {border-top-width: 30px;bottom: -30px;}
	h2, .quiz .question span, .quiz .question p {font-size: 22px;line-height: 24px;padding: 15px 0 30px;}
	.quiz.site-section {min-height: 0;padding-bottom: 30px;}	
	.quiz .section-body {height: auto!important;padding-top: 30px;padding-bottom: 0;margin: 0;}
	.quiz .section-body  .content-wrap {width: 100%;padding: 30px;z-index: 100;height: 100%;}	
	.quiz .question p.total{margin-top: 15px;font-size: 16px;line-height: 22px;}
	.site-section .gallery-carousel.grid-controlled .gallery-slides .slide-single .answer {padding: 0 ;}
	.site-main .site-section.video-section {min-height: 40vh;}	
	.image-stripe {width: 100%;min-height: 33.3334vh;height: auto;}
	.site-section.gallery .gallery-cover h2 {padding-top: 0;}
	.site-section.gallery .gallery-cover p {font-size: 20px;line-height: 30px;margin-bottom: 10px;margin-top: 0;}
	.site-main .site-section[number="4"] {background: #82786e;}
	.site-main .site-section[number="4"].textual p {	color:#fff}
	.site-section.gallery .slide-single .slide-text h3,.site-section.gallery .slide-single .slide-text p{
		margin-left:10%;
		margin-right: 10%;
		width: 80%;
	}
}
@media (max-width: 330px){
	.site-header .header-bottom .sentence {font-size: 8px;}
}