/**
*****************************************************************
* AUTHOR :: NCodeArt
* PROJECT :: NC-Roll Coming-Soon Page
* VERSION :: 0.05
* 
* This file is licensed to NCodeArt. 
* it's not allowed to copy or reuse it Copyright NCodeArt 2015
*****************************************************************
*/


/**
******************************************************************
*	DESKTOP LAYOUT 
******************************************************************
*/
@media (min-width: 1200px) {
	

}
@media (min-width: 992px) and (max-width: 1199px) {
	
	/*----------  COUNTDOWN  ----------*/
	.countdown-widget .dash{ min-width: 180px; }
	.countdown-widget .dash .digit{ font-size: 70px; }

	/*----------  INTRO-SECTION-1  ----------*/
	.intro-section-1 .content{ max-width: 90%; }
	.intro-section-1 .carousel-widget .title{ font-size: 60px; line-height: 1.2; }

	/*----------  INTRO-SECTION-2  ----------*/
	.intro-section-2 .content .main-text{ font-size: 55px; }
	.intro-section-2 .clock-wrp{ padding: 20px 0; }
	.intro-section-2 .clock-wrp-1 .countdown-widget .dash{ padding: 0 10px; min-width: auto; }
	.intro-section-2 .countdown-widget .dash .digit{ font-size: 50px; }

	/*----------  INTRO-SECTION-4  ----------*/
	.intro-section-4 .caption .main-text{ font-size: 60px; }

	/*----------  CONTACT-SECTION-3  ----------*/
	.contact-section-3 .contact-form-wrp .content{ width: 90%; }
	.contact-section-3 .popup-form .btn{ width: 100%; }

	/*----------  PORTFOLIO-SECTION-2  ----------*/
	.portfolio-section-2 .row .l, 
	.portfolio-section-2 .row .r{
		padding: 0 50px;
	}

	/*----------  CONTACT-SECTION-4  ----------*/
	.contact-section-4 .contact-content .container{ padding: 40px; }
	.contact-section-4 .content{ width: 100%; }
	.contact-section-4 .popup-form .btn{ width: 100%; }
	
}

@media (min-width: 992px) {
	
	
}

/**
******************************************************************
*	MOBILE & TABLET COMMON
******************************************************************
*/
@media (min-width: 200px) and (max-width: 991px) {
	body.layout-1 section.section{ 
		padding: 100px 0; 
		height: auto !important;
	}

	/*----------  TYPOGRAPHY  ----------*/
	h1, .hd-1 { font-size: 40px; margin-bottom: 30px; }
	h2, .hd-2 { font-size: 30px; margin-bottom: 20px; }
	h3, .hd-3 { font-size: 20px; margin-bottom: 15px; }
	h4, .hd-4 { font-size: 18px; margin-bottom: 15px; }
	h5, .hd-5 { font-size: 16px; margin-bottom: 15px; }
	h6, .hd-6 { font-size: 14px; margin-bottom: 10px; }

	/*----------  TITLE  ----------*/
	.title { font-size: 30px !important; margin-bottom: 20px; }
	.title-sub { font-size: 16px !important; margin-bottom: 20px; }
	.title.mini{ font-size: 20px !important; }

	/*----------  INTRO-SECTION-1  ----------*/
	.clock-wrp-2{
		position: inherit;
		margin-bottom: -100px;
		margin-top: 40px;
	}

	/*----------  INTRO-SECTION-2  ----------*/
	.intro-section-2{ padding-bottom: 0 !important; }
	.intro-section-2 .row > [class*="col-"]{ height: auto; }
	.intro-section-2 .content{ transform: none; }
	.intro-section-2 .content .main-text{ font-size: 55px; }
	.intro-section-2 .clock-wrp{ 
		padding: 20px 0; 
		border-top-left-radius: 0px;
    	border-bottom-left-radius: 0px;
    	right: 0;
    	margin-top: 40px;
	}
	.intro-section-2 .clock-wrp-1 .countdown-widget .dash{ padding: 0 10px; min-width: auto; }
	.intro-section-2 .countdown-widget .dash .digit{ font-size: 50px; }
	.intro-section-2 .r{ 
		height: auto !important;
		position: inherit;
	    bottom: 0;
	    width: 100%;
	    padding-right: 0px;
	    padding-left: 0px;
	}
	.intro-section-2 .r .content{
		max-width: 100%;
	    transform: none;
	    top: inherit;
	}

	/*----------  INTRO-SECTION-4  ----------*/
	body.layout-1 section.intro-section-4{ padding-top: 0; padding-bottom: 0; }

	/*----------  FEATURE SECTION-2  ----------*/
	.feature-section-2{ padding-top: 0 !important; }
	.feature-section-2 .bg-section{ height: 300px; }
	.feature-section-2 .content-wrp{ height: auto; }
	.feature-section-2 .content{ padding-top: 40px; padding-bottom: 0; }

	/*----------  FEATURE SECTION-3  ----------*/
	.feature-section-3{ padding-top: 0 !important; }
	.feature-section-3 .bg-section{ height: 300px; }
	.feature-section-3 .content-wrp{ height: auto; }
	.feature-section-3 .content{ padding-top: 40px; padding-bottom: 0; }
	

	/*----------  CONTACT-SECTION-1  ----------*/
	.contact-section-1{ padding-top: 0 !important; padding-bottom: 0 !important; }
	.contact-section-1 .map{ 
		position: inherit; 
		width: 100%;
		height: 300px;
	}
	.contact-section-1 .contact-box-wrp{ height: auto; width: 100%; }
	.contact-section-1 .contact-box-1{ 
		height: auto;
		padding: 30px;
	}

	/*----------  CONTACT-SECTION-2  ----------*/
	.contact-section-2{ padding: 0 !important; }
	.contact-section-2 .l, 
	.contact-section-2 .r{
		height: auto;
		padding: 100px 0;
	}

	/*----------  CONTACT-SECTION-3  ----------*/
	.contact-section-3 .contact-box-wrp{ height: auto; }
	.contact-section-3{ padding-top: 0 !important; padding-bottom: 0 !important; }
	.contact-section-3 .contact-box-1{ height: auto; }
	.contact-section-3 .contact-form-wrp{ height: auto; padding-bottom: 100px; padding-top: 40px; }
	.contact-section-3 .contact-box-1{ padding: 30px; }

	/*----------  FOOTER-SECTION-2  ----------*/
	.footer-section-2 .row{ display: block; text-align: center; }
	.footer-section-2 .l{ text-align: center; }
	.footer-section-2 .social-links-1 a{ width: 100px; height: 100px; }

	/*----------  PORTFOLIO-SECTION-2  ----------*/
	.portfolio-section-2{ padding: 0 !important; }
	.portfolio-section-2 .row .l, 
	.portfolio-section-2 .row .r{
		height: auto;
		padding: 0 50px;
	}
	.portfolio-section-2 .row .l{ padding-top: 100px; padding-bottom: 40px; }
	.portfolio-section-2 .row .r{ padding-bottom: 100px; padding-top: 40px; }
	
	/*----------  CONTACT-SECTION-4  ----------*/
	.contact-section-4{ padding-top: 0 !important; padding-bottom: 0 !important; }
	.contact-section-4 .contact-content{
		position: inherit;
	}
	.contact-section-4 .map{
		position: inherit;
		height: 300px;
	}
	.contact-section-4 .contact-content .container{
		padding: 40px 0 100px 0;
	}
	.contact-box2{ 
		width: 80%; 
		margin: auto;
		margin-bottom: 40px;
	}
			
}

/**
******************************************************************
*	TABLET
******************************************************************
*/
@media (min-width: 768px) and (max-width: 991px) {

	/*----------  NAVIGATION  ----------*/
	#menu-button{ top: 15px; right: 15px; }

	/*----------  COUNTDOWN  ----------*/
	.countdown-widget .dash{ min-width: 150px; }
	.countdown-widget .dash .digit{ font-size: 50px; }

	/*----------  INTRO-BOX-1  ----------*/
	.info-box1{ width: 80%; margin: auto; margin-bottom: 40px; }

	/*----------  INTRO-SECTION-1  ----------*/
	.intro-section-1 .content .main-text{ font-size: 60px; }
	.intro-section-1 .content{ max-width: 100%; }
	.intro-section-1 .carousel-widget .title{ font-size: 50px; line-height: 1.2; }

	/*----------  INTRO-SECTION-4  ----------*/
	.intro-section-4 .logo-wrp{ top: 10px; left: 10px; }
	.intro-section-4 .logo{ width: 80px; }
	.intro-section-4 .caption{ max-width: 90%; }
	.intro-section-4 .caption .main-text{ font-size: 50px; }
	.intro-section-4 .caption .sub-text{ font-size: 22px; }

	/*----------  FOOTER-SECTION-2  ----------*/
	.footer-section-1 .social-links-1{ margin-bottom: 40px; }
	.footer-section-1 .social-links-1 a{ width: 100px; height: 100px; }
}

/**
******************************************************************
*	MOBILE
******************************************************************
*/
@media (min-width: 200px) and (max-width: 767px) {	

	#fp-nav.right{ right: 0; }

	/*----------  NAVIGATION  ----------*/
	#menu-button{ top: 15px; right: 15px; }

	/*----------  INTRO-BOX-1  ----------*/
	.info-box1{ width: 80%; margin: auto; margin-bottom: 40px; }

	/*----------  CONTACT-SECTION-1  ----------*/
	.contact-box-1 .inner-wrp{ padding: 0; width: 100%;}

	/*----------  INTRO-SECTION-4  ----------*/
	.intro-section-4 .logo-wrp{ top: 10px; left: 10px; }
	.intro-section-4 .logo{ width: 80px; }
	.intro-section-4 .caption{ 
		transform : none; 
		top: 0;
		left: 0;
		padding-top: 200px;
	}
	

}
@media (min-width: 600px) and (max-width: 767px) {

	/*----------  COUNTDOWN  ----------*/
	.countdown-widget .dash{ min-width: 110px; }
	.countdown-widget .dash .digit{ min-width: auto; font-size: 40px; }

	/*----------  SOCIAL-LINKS  ----------*/
	.social-links-1 a{ width: 100px; height: 100px; }

	/*----------  INTRO-SECTION-1  ----------*/
	.intro-section-1 .content > img{ width: 100px; }
	.intro-section-1 .content .main-text{ font-size: 50px; }
	.intro-section-1 .content{ max-width: 100%; }
	.intro-section-1 .carousel-widget .title{ font-size: 40px; line-height: 1.2; }

	/*----------  INTRO-SECTION-2  ----------*/
	.intro-section-2 .content .main-text{ font-size: 45px; }
	.intro-section-2 .clock-wrp-1 .countdown-widget .dash{ padding: 0 20px; min-width: auto; }
	.intro-section-2 .countdown-widget .dash .digit{ font-size: 50px; }

	.intro-section-3 .info-wrp{ width: 90%; }
	.intro-section-3 .main-text{ font-size: 45px; }
	.intro-section-3 .sub-text{ font-size: 25px; }
	.clock-wrp-3 .countdown-widget .dash{ padding: 25px;  }

	/*----------  INTRO-SECTION-4  ----------*/
	.intro-section-4 .caption{ max-width: 90%; }
	.intro-section-4 .caption .main-text{ font-size: 50px; }
	.intro-section-4 .caption .sub-text{ font-size: 22px; }

	/*----------  FOOTER-SECTION-2  ----------*/
	.footer-section-1 .social-links-1{ margin-bottom: 40px; }
	.footer-section-1 .social-links-1 a{ width: 80px; height: 80px; }
	
}
@media (min-width: 480px) and (max-width: 599px) {

	/*----------  COUNTDOWN  ----------*/
	.countdown-widget .dash{ min-width: 90px; }
	.countdown-widget .dash .digit{ min-width: auto; font-size: 35px; }

	/*----------  SOCIAL-LINKS  ----------*/
	.social-links-1 a{ width: 100px; height: 100px; }

	/*----------  INTRO-SECTION-1  ----------*/
	.intro-section-1 .content > img{ width: 100px; }
	.intro-section-1 .content .main-text{ font-size: 45px; }
	.intro-section-1 .content{ max-width: 100%; }
	.intro-section-1 .carousel-widget .title{ font-size: 35px; line-height: 1.2; }

	/*----------  INTRO-SECTION-2  ----------*/
	.intro-section-2 .content{ max-width: 90%; }
	.intro-section-2 .content .main-text{ font-size: 45px; }
	.intro-section-2 .clock-wrp-1 .countdown-widget .dash{ padding: 0 20px; min-width: auto; }
	.intro-section-2 .countdown-widget .dash .digit{ font-size: 40px; min-width: auto; }

	.intro-section-3 .info-wrp{ width: 90%; }
	.intro-section-3 .main-text{ font-size: 45px; }
	.intro-section-3 .sub-text{ font-size: 25px; }
	.clock-wrp-3 .countdown-widget .dash{ padding: 25px;  }

	/*----------  INTRO-SECTION-4  ----------*/
	.intro-section-4 .caption{ max-width: 90%; padding-top: 120px; }
	.intro-section-4 .caption .main-text{ font-size: 40px; }
	.intro-section-4 .caption .sub-text{ font-size: 22px; }


	/*----------  CONTACT-SECTION-2  ----------*/
	.contact-section-2 .contact-form-wrp .content{ width: 90%; }

	/*----------  CONTACT-SECTION-3  ----------*/
	.contact-section-3 .contact-form-wrp .content{ width: 90%; }
	.contact-section-3 .popup-form .btn{ width: 100%; }
	
	.contact-section-4 .contact-form-wrp .content{ width: 90%; }
	.contact-section-4 .popup-form .btn{ width: 100%; }

	/*----------  SUBSCRIB SECTION-1  ----------*/
	.subscribe-section-1 .content{ width: 90%; }
	
	/*----------  SUBSCRIB SECTION-2  ----------*/
	.subscribe-section-2 .form-control{ width: 100%; }
	.subscribe-section-2 .btn{ width: 100%; }

	/*----------  FOOTER-SECTION-2  ----------*/
	.footer-section-1 .social-links-1{ margin-bottom: 40px; }
	.footer-section-1 .social-links-1 a{ 
		width: 60px; 
		height: 60px; 
		font-size: 30px;
	}

	/*----------  FOOTER-SECTION-2  ----------*/
	.footer-section-2 .logo{ width: 80px; margin-left: 0; }
	.footer-section-2 .social-links-1 a{
		width: 60px;
		height: 60px;
		font-size: 30px;
	}

	/*----------  FOOTER-SECTION-2  ----------*/
	.footer-section-3 .logo{ width: 80px; margin: auto; }
	.footer-section-3 .logo img{ width: 100%; }
	.footer-section-3 .social-links-1 a{
		width: 60px;
		height: 60px;
		font-size: 30px;
	}

}
@media (min-width: 200px) and (max-width: 479px) {
	
	/*----------  COUNTDOWN  ----------*/
	.clock-wrp-1 .countdown-widget .dash{ margin: 0; }
	.clock-wrp-2 .countdown-widget .dash{ 
		border-right: none; 
		border: 1px solid rgba(255,255,255,0.1);
	}
	.clock-wrp-2 .countdown-widget .dash:last-child{ border-right: 1px solid rgba(255,255,255,0.1); }
	.countdown-widget .dash{ min-width: 50%; }
	.countdown-widget .dash .digit{ min-width: auto; font-size: 30px; }

	/*----------  SOCIAL-LINKS  ----------*/
	.social-links-1 a{ width: 100px; height: 100px; }

	/*----------  INFO-BOX-1  ----------*/
	.info-box1{ width: 95%; }
	.info-box1 .img{
		width: 100px;
		min-height: 100px;
		font-size: 50px;
		line-height: 100px;
	}
	.info-box1 .info{ padding: 10px; }
	
	/*----------  INFO-BOX-2  ----------*/
	.info-box2 .img{ float: inherit; }
	.info-box2 .info{ margin: 15px 0 30px 0; }
	.info-box2 .img span.dir{ display: none; }
	

	/*----------  INTRO-SECTION-1  ----------*/
	.intro-section-1 .content .main-text{ font-size: 45px; }
	.intro-section-1 .content{ max-width: 100%; }
	.intro-section-1 .carousel-widget .title{ font-size: 35px; line-height: 1.2; }

	/*----------  INTRO-SECTION-2  ----------*/
	.intro-section-2 .content{ max-width: 90%; }
	.intro-section-2 .content .main-text{ font-size: 45px; }
	.intro-section-2 .clock-wrp-1 .countdown-widget .dash{ 
		min-width: 46%; 
		border-right: none;
		border: 1px solid rgba(255,255,255,0.1);
		margin: 3px;	
	}
	.intro-section-2 .countdown-widget .dash .digit{ font-size: 50px; }
	.intro-section-3 .info-wrp{ width: 90%; }
	.intro-section-3 .main-text{ font-size: 45px; }
	.intro-section-3 .sub-text{ font-size: 25px; }
	.clock-wrp-3 .countdown-widget .dash{ padding: 25px;  }

	.intro-section-2 .social-links a{
		width: 40px;
		height: 40px;
		font-size: 20px;
		line-height: 40px;
	}

	/*----------  INTRO-SECTION-4  ----------*/
	.intro-section-4 .caption{ max-width: 90%; padding-top: 120px; }
	.intro-section-4 .caption .main-text{ font-size: 30px; }
	.intro-section-4 .caption .sub-text{ font-size: 18px; }
	.intro-section-4 .caption .btn{ padding: 10px 25px; }

	/*----------  CONTACT-SECTION-2  ----------*/
	.contact-section-2 .contact-form-wrp .content{ width: 90%; }

	/*----------  CONTACT-SECTION-3  ----------*/
	.contact-section-3 .contact-form-wrp .content{ width: 90%; }
	.contact-section-3 .popup-form .btn{ width: 100%; }

	/*----------  CONTACT-SECTION-3  ----------*/
	.contact-section-3 .contact-form-wrp .content{ width: 90%; }
	.contact-section-3 .popup-form .btn{ width: 100%; }
	
	/*----------  CONTACT-SECTION-4  ----------*/
	.contact-section-4 .contact-form-wrp .content{ width: 90%; }
	.contact-section-4 .popup-form .btn{ width: 100%; }
	.contact-box2{ border-bottom: 1px solid #f3f4f5; }
	.contact-box2 .img{ 
		float: inherit; 
		margin: auto;
	}
	.contact-box2 .info{ 
		padding: 0; 
		justify-content: center;
	}
	.contact-box2:after { display: none; }
	
	/*----------  SUBSCRIB SECTION-1  ----------*/
	.subscribe-section-1 .content{ width: 90%; }
	.subscribe-section .title-icon{
		font-size: 50px;
		width: 100px;
		height: 100px;
	}

	/*----------  SUBSCRIB SECTION-2  ----------*/
	.subscribe-section-2 .form-control{ width: 100%; }
	.subscribe-section-2 .btn{ width: 100%; }

	/*----------  PORTFOLIO-SECTION-2  ----------*/
	.portfolio-section-2 .row .l, .portfolio-section-2 .row .r{ padding: 0 30px; }
	.portfolio-section-2 .row .r{
		padding-bottom: 100px;
    	padding-top: 40px;
	}
	.portfolio-section-2 .row .l{
		padding-top: 100px;
    	padding-bottom: 40px;
	}
	.portfolio-section-2 .popgallery-widget .cl{ width: 33.33%; }
	.portfolio-section-2 .title-icon{
		font-size: 50px;
		width: 100px;
		height: 100px;
	}

	/*----------  FOOTER-SECTION-2  ----------*/
	.footer-section-1 .logo{ width: 80px; height: 80px; margin: auto; }
	.footer-section-1 .ft-logo{ width: 80px; }
	.footer-section-1 .social-links-1{ margin-bottom: 40px; }
	.footer-section-1 .social-links-1 a{ 
		width: 60px; 
		height: 60px; 
		font-size: 30px;
		float: inherit;
		padding: 5px;
		margin: 3px;
		display: inline-block;
	}

	/*----------  FOOTER-SECTION-2  ----------*/
	.footer-section-2 .logo{ width: 80px; margin-left: 0; }
	.footer-section-2 .social-links-1 a{
		width: 40px;
		height: 40px;
		font-size: 16px;
	}

	/*----------  FOOTER-SECTION-2  ----------*/
	.footer-section-3 .logo{ width: 80px; margin: auto; }
	.footer-section-3 .logo img{ width: 100%; }
	.footer-section-3 .social-links-1 a{
		width: 40px;
		height: 40px;
		font-size: 16px;
	}
}