/*
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
[ MASTER STYLESHEETS ]

AUTHOR : NCode.Art
PROJECT NAME : Zest Under-Construction Template
VERSION : 0.05
LAYOUT : 1
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/


/*......................................................
	DESKTOP LAYOUT
........................................................*/
@media only screen and (min-width: 1500px){

}
@media only screen and (min-width: 1200px) and (max-width: 1499px){

	/*	PORTFOLIO PAGE
	---------------------------------*/
	.portfolio-wrp{ width: auto; }

	/*	CONTACT-US PAGE
	---------------------------------*/
	.form-wrapper #cntForm{ width: auto; }

	/*	SUBSCRIBE PAGE
	---------------------------------*/
	.subscription{ width: auto; }

}
@media only screen and (min-width: 980px) and (max-width: 1199px){

	/*	LAYOUT
	---------------------------------*/
	.page .container{ width: 75%; }

	/*	GENERAL
	---------------------------------*/
	.title .hd{ font-size: 36px; }
	.title .separator{ margin-top: 22px; }
	.title p{ font-size: 24px; margin-top: 24px; }

	/*	COVER PAGE
	---------------------------------*/
	.sripples{ width: 340px; height: 340px; }
	.sripple{ width: 340px; height: 340px; }

	.days .dash .digit{ font-size: 130px; min-width: 75px; }
	.days .dash_title .text{ font-size: 28px; }

	/*	HOME PAGE
	---------------------------------*/
	.tagline .hd{ font-size: 50px; }
	.tagline p{ font-size: 24px; }

	/*	ABOUT-US
	---------------------------------*/
	.info-box{ width: 90%; margin: auto; }

	/*	PORTFOLIO PAGE
	---------------------------------*/
	.portfolio-wrp{ width: auto; }
	.img-box .img-wrapper .img{ 
		min-width: 0; 
		min-height: 0; 
		padding: 15px;
	}

	/*	CONTACT-US PAGE
	---------------------------------*/
	.form-wrapper #cntForm{ width: auto; }
	.contact-box .text p, 
	.contact-box .text a{
		font-size: 14px;
	}

	/*	SUBSCRIBE PAGE
	---------------------------------*/
	.subscription{ width: auto; }
}



/*......................................................
	TABLET LAYOUT
........................................................*/
@media only screen and (min-width: 768px) and (max-width: 979px){

	/*	LAYOUT
	---------------------------------*/
	.page .container{ width: 70%; }

	/*	GENERAL
	---------------------------------*/
	.title .hd{ font-size: 36px; }
	.title .separator{ margin-top: 22px; }
	.title p{ font-size: 24px; margin-top: 24px; }

	/*	COVER PAGE
	---------------------------------*/
	#cover-page{ min-height: 0 !important; }
	.equal-part{ display: none; }
	.navigation-wrapper{ 
		width: 0;
		height: 100%;
		left: 50%;
		margin-left: 0;
	 }
	 .navigation-wrapper .inner-wrapper{
	 	position: fixed;
	 	left: 0;
	 	top: 0;
	 }
	.navigation-wrapper .menu-icon{ 
		position: fixed; 
		top: 40px !important;
		left: initial;
		right: 40px;
		margin-top: 0;
	}
	.navigation li .navigation-link{ font-size: 18px; }
	.sripples{ width: 340px; height: 340px; }
	.sripple{ width: 340px; height: 340px; }

	.days .dash .digit{ font-size: 130px; min-width: 75px; }
	.days .dash_title .text{ font-size: 28px; }

	/*	HOME PAGE
	---------------------------------*/
	.clock-wrp{ height: 400px; }
	.tagline .hd{ font-size: 50px; }
	.tagline p{ font-size: 24px; margin-top: 24px; }

	/*	ABOUT-US
	---------------------------------*/
	.info-box-carousel .owl-carousel .owl-item{ padding: 3px 0; }
	.info-box{ width: 100%; margin: auto; }

	/*	PORTFOLIO PAGE
	---------------------------------*/
	.portfolio-wrp{ width: auto; }
	.img-box .img-wrapper .img{ min-width: 0; min-height: 0; }

	/*	CONTACT-US PAGE
	---------------------------------*/
	.form-wrapper #cntForm{ width: auto; }
	.contact-box .text p, 
	.contact-box .text a{
		font-size: 14px;
	}

	/*	SUBSCRIBE PAGE
	---------------------------------*/
	.subscription{ width: auto; }

}



/*......................................................
	MOBILE LAYOUT
........................................................*/
@media only screen and (min-width: 600px) and (max-width: 767px){

	/*	LAYOUT
	---------------------------------*/
	.page .container{ width: 70%; }

	/*	GENERAL
	---------------------------------*/
	.title .hd{ font-size: 34px; }
	.title .separator{ margin-top: 20px; }
	.title p{ font-size: 22px; margin-top: 22px; }

	/*	COVER PAGE
	---------------------------------*/
	.logo-wrapper{ width: 70px; }
	.navigation-wrapper .menu-icon,
	.navigation-wrapper .menu-icon .menu-circle{ 
		width: 70px; 
		height: 70px; 
	}
	.navigation-wrapper{ 
		width: 0;
		height: 100%;
		left: 50%;
		margin-left: 0;
	 }
	 .navigation-wrapper .inner-wrapper{
	 	position: fixed;
	 	left: 0;
	 	top: 0;
	 }
	.navigation-wrapper .menu-icon{ 
		position: fixed; 
		top: 40px;
		left: initial;
		right: 40px;
		margin-top: 0;
	}
	.sripples{ width: 310px; height: 310px; }
	.sripple{ width: 310px; height: 310px; }

	.days .dash .digit{ font-size: 110px; min-width: 64px; }
	.days .dash_title .text{ font-size: 24px; }
	.days .dash_title{ margin-top: 0; }
	.time .dash{ padding: 0 10px; }
	.dash .digit{ font-size: 36px; min-width: 22px; }

	/*	HOME PAGE
	---------------------------------*/
	.clock-wrp{ height: 350px; }
	.tagline .hd{ font-size: 46px; }
	.tagline p{ font-size: 22px; margin-top: 22px; }

	/*	ABOUT-US
	---------------------------------*/
	.info-box{ width: 80%; margin: auto; }

	/*	CONTACT-US PAGE
	---------------------------------*/
	.contact-box .text p, 
	.contact-box .text a{
		font-size: 14px;
	}

}
@media only screen and (min-width: 480px) and (max-width: 599px){

	/*	LAYOUT
	---------------------------------*/
	.page .container{ width: 70%; }

	/*	GENERAL
	---------------------------------*/
	.title .hd{ font-size: 32px; }
	.title .separator{ margin-top: 16px; }
	.title p{ font-size: 20px; margin-top: 20px; }

	/*	COVER PAGE
	---------------------------------*/
	.logo-wrapper{ width: 60px; height: auto; }
	.navigation-wrapper .menu-icon,
	.navigation-wrapper .menu-icon .menu-circle{ 
		width: 60px; 
		height: 60px; 
	}
	.navigation-wrapper{ 
		width: 0;
		height: 100%;
		left: 50%;
		margin-left: 0;
	 }
	 .navigation-wrapper .inner-wrapper{
	 	position: fixed;
	 	left: 0;
	 	top: 0;
	 }
	.navigation-wrapper .menu-icon{ 
		position: fixed; 
		top: 40px;
		left: initial;
		right: 40px;
		margin-top: 0;
	}
	.sripples{ width: 290px; height: 290px; }
	.sripple{ width: 290px; height: 290px; }

	@-webkit-keyframes sripple {
		from {
			-webkit-transform: scale(1);
			border-width: 5px;
			opacity: 0.8;
		}
		to {
			-webkit-transform: scale(1.2);
			border-width: 50px;
			opacity: 0;
		}
	}
	@-moz-keyframes sripple {
		from {
			-webkit-transform: scale(1);
			border-width: 5px;
			opacity: 0.8;
		}
		to {
			-webkit-transform: scale(1.2);
			border-width: 50px;
			opacity: 0;
		}
	}
	@-ms-keyframes sripple {
		from {
			-webkit-transform: scale(1);
			border-width: 5px;
			opacity: 0.8;
		}
		to {
			-webkit-transform: scale(1.2);
			border-width: 50px;
			opacity: 0;
		}
	}
	@keyframes sripple {
		from {
			-webkit-transform: scale(1);
			border-width: 5px;
			opacity: 0.8;
		}
		to {
			-webkit-transform: scale(1.2);
			border-width: 50px;
			opacity: 0;
		}
	}

	#countdown_dashboard .days{ margin-bottom: 15px; }
	.days .dash .digit{ font-size: 90px; min-width: 52px; }
	.days .dash_title .text{ font-size: 22px; padding: 10px 10px 14px 10px; }
	.days .dash_title{ margin-top: 0; }
	.time .dash{ padding: 0 8px; }
	.dash .digit{ font-size: 34px; min-width: 22px; }

	/*	HOME PAGE
	---------------------------------*/
	.clock-wrp{ height: 290px; }
	.tagline .hd{ font-size: 42px; }
	.tagline p{ font-size: 20px; margin-top: 20px; }
	.tagline + .btn{ margin-top: 30px; }

	/*	ABOUT-US
	---------------------------------*/
	.info-box{ width: 80%; margin: auto; }

	/*	CONTACT-US PAGE
	---------------------------------*/
	.contact-box .text p, 
	.contact-box .text a{
		font-size: 14px;
	}

	/*	SUBSCRIBE PAGE
	---------------------------------*/
	.subscription-form .btn{ position: inherit; margin-top: 10px; }
	.subscription i.error-text{ top: 20px; right: 20px; }

}
@media only screen and (min-width: 320px) and (max-width: 479px){

	/*	LAYOUT
	---------------------------------*/
	.page .container{ width: 80%; }

	/*	GENERAL
	---------------------------------*/
	.title-wrapper{ margin-bottom: 20px; }
	.title .hd{ font-size: 30px; }
	.title .separator{ margin-top: 16px; }
	.title p{ font-size: 16px; margin-top: 16px; }

	/*	COVER PAGE
	---------------------------------*/
	.logo-wrapper{ width: 50px; height: auto; }
	.navigation-wrapper .menu-icon,
	.navigation-wrapper .menu-icon .menu-circle{ 
		width: 50px; 
		height: 50px; 
	}
	.navigation-wrapper{ 
		width: 0;
		height: 100%;
		left: 50%;
		margin-left: 0;
	 }
	 .navigation-wrapper .inner-wrapper{
	 	position: fixed;
	 	left: 0;
	 	top: 0;
	 }
	.navigation-wrapper .menu-icon{ 
		position: fixed; 
		top: 40px;
		left: initial;
		right: 40px;
		margin-top: 0;
	}
	.menu span, 
	.menu span:before, 
	.menu span:after{
		width: 22px;
	}
	.menu span:before{ margin-top: -7px; }
	.menu span:after{ margin-top: 7px; }
	.example5 span:after,
	.example5 span:before{ 
		margin-top: 0; 
	}
	.sripples{ width: 250px; height: 250px; }
	.sripple{ width: 250px; height: 250px; }

	#countdown_dashboard .days{ margin-bottom: 15px; }
	.days .dash .digit{ font-size: 70px; min-width: 42px; }
	.days .dash_title .text{ font-size: 18px; padding: 10px 10px 14px 10px; }
	.days .dash_title{ margin-top: 0; }
	.time .dash{ padding: 0 8px; }
	.dash .digit{ font-size: 30px; min-width: 18px; }

	@-webkit-keyframes sripple {
		from {
			-webkit-transform: scale(1);
			border-width: 5px;
			opacity: 0.8;
		}
		to {
			-webkit-transform: scale(1.15);
			border-width: 50px;
			opacity: 0;
		}
	}
	@-moz-keyframes sripple {
		from {
			-webkit-transform: scale(1);
			border-width: 5px;
			opacity: 0.8;
		}
		to {
			-webkit-transform: scale(1.15);
			border-width: 50px;
			opacity: 0;
		}
	}
	@-ms-keyframes sripple {
		from {
			-webkit-transform: scale(1);
			border-width: 5px;
			opacity: 0.8;
		}
		to {
			-webkit-transform: scale(1.15);
			border-width: 50px;
			opacity: 0;
		}
	}
	@keyframes sripple {
		from {
			-webkit-transform: scale(1);
			border-width: 5px;
			opacity: 0.8;
		}
		to {
			-webkit-transform: scale(1.15);
			border-width: 50px;
			opacity: 0;
		}
	}

	/*	HOME PAGE
	---------------------------------*/
	.clock-wrp{ height: 250px; }
	.tagline .hd{ font-size: 30px; margin-bottom: 18px; }
	.tagline p{ font-size: 18px; margin-top: 18px; }
	.tagline + .btn{ margin-top: 30px; }

	/*	ABOUT-US
	---------------------------------*/
	.info-box{ width: 100%; margin: auto; }

	/*	PORTFOLIO PAGE
	---------------------------------*/
	.img-box .img-wrapper .img{ padding: 5px; }

	/*	CONTACT-US PAGE
	---------------------------------*/
	.contact-box .text p, 
	.contact-box .text a{
		font-size: 14px;
	}

	/*	SUBSCRIBE PAGE
	---------------------------------*/
	.subscription-form .btn{ position: inherit; margin-top: 10px; }
	.subscription i.error-text{ top: 20px; right: 20px; }

} 
@media only screen and (min-width: 320px) and (max-width: 767px){

	/*	LAYOUT
	---------------------------------*/
	.main-wrapper,
	.overlay{
		position: fixed;
		width: 100%;
		height: 100%;
		overflow-x: hidden;
	}
	#page-container .inner-container{
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		transform: none;
		top: 0;
		left: 0;
		padding: 80px 0 50px 0;
		position: fixed;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
	}
	.equal-part{ display: none; }

	/*	GENERAL
	---------------------------------*/
	.logo-wrapper{ top: 20px; left: 20px; }

	.separator,
	.separator > span{ width: 15px; height: 15px; }	

	/*	COVER PAGE
	---------------------------------*/
	#cover-page{ min-height: 0 !important; }
	.navigation-wrapper .menu-icon{ top: 20px !important; right: 20px; }

	/*	ABOUT-US PAGE
	---------------------------------*/
	.info-box-carousel .carousel .item{ padding-left: 3px; padding-right: 3px; }

	/*	PORTFOLIO PAGE
	---------------------------------*/
	.portfolio-wrp{ width: auto; }
	.img-box .img-wrapper .img{ min-width: 0; min-height: 0; }

	/*	CONTACT-US PAGE
	---------------------------------*/
	.form-wrapper #cntForm{ width: auto; }

	/*	SUBSCRIBE PAGE
	---------------------------------*/
	.subscription{ width: auto; }
}