/* Screens Resolution : 1200px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {
	
	/* ---------------------------------
	4. RIGHT SECTION
	--------------------------------- */

	#rounded-countdown{ width: 92%; }
	
}


/* Screens Resolution : 992px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 992px) {
	
	.main-area{
		position: relative;
		height: auto;
		min-height: 100vh;
	}

	/* ---------------------------------
	3. LEFT SECTION
	--------------------------------- */

	.left-section{
		float: none;
		width: 100%;
		height: auto;
		min-height: auto;
		padding-top: 110px;
		padding-bottom: 40px;
	}

	.left-section .logo{
		top: 28px;
		left: 15px;
		gap: 12px;
	}

	.left-section .logo img{
		height: 30px;
	}

	.left-section .main-content{
		padding: 20px 0 10px;
		max-width: 100%;
	}

	.main-content .title{
		max-width: 11ch;
	}

	.main-content .email-input-area{ width: 100%; }
	
	.main-content .email-input-area .email-input{ padding: 0 115px 0 20px; }
	
	.main-content .email-input-area .submit-btn{ width: 100px; }

	.contact-cta-area{
		margin-top: 28px;
	}

	.left-section .footer-icons > li > a > i{
		height: 30px;
		line-height: 28px;
		width: 30px;
	}

	.footer-note{
		position: relative;
		left: 0;
		bottom: 0;
		margin-top: 26px;
		padding-bottom: 0;
	}

	
	/* ---------------------------------
	4. RIGHT SECTION
	--------------------------------- */

	.right-section{
		position: relative;
		top: auto;
		bottom: auto;
		right: auto;
		width: 100%;
		height: 48vh;
		min-height: 340px;
		background-position: center center;
	}

	.date-countdown{ width: 100%; }
	
	.date-countdown .time_circles > div > h4{ font-size: .7em !important; }

	#rounded-countdown{
		width: 88%;
	}
}


/* Screens Resolution : 767px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	
	/* ---------------------------------
	1. PRIMARY STYLES
	--------------------------------- */

	p{
		line-height: 1.6;
		font-size: 1em;
	}

	h1{
		font-size: 2.9em;
		line-height: .98;
	}

	h2{ font-size: 2.2em; line-height: 1.1; }
	h3{ font-size: 1.8em; }

	/* ---------------------------------
	3. LEFT SECTION
	--------------------------------- */

	.left-section{
		padding-top: 96px;
		padding-bottom: 28px;
	}

	.left-section .logo{
		top: 24px;
		left: 15px;
		gap: 10px;
	}

	.left-section .logo img{
		height: 28px;
	}

	.main-content .title{
		max-width: none;
		margin-bottom: 16px;
	}

	.contact-button{
		padding: 14px 22px;
	}

	.contact-email{
		margin-top: 12px;
	}

	.main-content .post-desc{
		margin-top: 12px;
	}

	/* ---------------------------------
	4. RIGHT SECTION
	--------------------------------- */

	.right-section{
		height: 42vh;
		min-height: 280px;
	}

	#rounded-countdown{
		width: 94%;
	}
}


/* Screens Resolution : 479px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 479px) {

	/* ---------------------------------
	1. PRIMARY STYLES
	--------------------------------- */

	body{
		font-size: 13px;
	}

	h1{
		font-size: 2.45em;
		line-height: 1;
	}

	p{
		font-size: .98em;
		line-height: 1.55;
	}

	/* ---------------------------------
	3. LEFT SECTION
	--------------------------------- */

	.left-section{
		padding-top: 88px;
	}

	.left-section .logo{
		top: 22px;
		left: 12px;
		gap: 8px;
	}

	.left-section .logo img{
		height: 26px;
	}

	.main-content .email-input-area{
		height: 48px;
	}

	.main-content .email-input-area .submit-btn{
		width: 96px;
		font-size: .85em;
	}

	.main-content .email-input-area .email-input{
		padding: 0 105px 0 18px;
	}

	.contact-button{
		width: 100%;
		text-align: center;
	}

	.footer-note{
		margin-top: 22px;
		font-size: .84rem;
	}

	/* ---------------------------------
	4. RIGHT SECTION
	--------------------------------- */

	.right-section{
		height: 38vh;
		min-height: 240px;
	}

	#rounded-countdown{
		width: 98%;
	}
}


/* Screens Resolution : 359px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 359px) {
	
	h1{
		font-size: 2.15em;
	}

	.left-section .logo img{
		height: 24px;
	}
	
}


/* Screens Resolution : 290px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 290px) {
	
	h1{
		font-size: 1.95em;
	}
	
}