/* Page Media
*************************************/

/* First Page Breakpoint @ (1199 - 992)
*************************************/
@media only screen and (max-width: 1199px){

	/*Typography*/
	.header-container h1 {
	    margin-bottom: 15px;
	    font-size: 50px;
		line-height: 50px;
	}
	h3 {
	    font-size: 23px;
	    line-height: 23px;
	}
	p.subheader {
	    font-size: 20px;
	    line-height: 24px;
	}

	/*Milestones Container*/
	.milestone-wrapper .milestone-container {
	    width: 250px;
	}

	/*Milestones Position*/
	.milestone-container.one {
	    top: 235px;
	}
	.milestone-container.two {
	    top: 565px;
	}
	.milestone-container.three {
   		top: 890px;
	}
	
	/*How to Apply Container*/
	.how-apply-container .left-container, .how-apply-container .right-container {
		max-width: 480px;
	}

	/*Animation Hide*/
	.animated-bg-container{
		display: none;
	}
	.icogroup-image{
		display: block;
	}

}


/* Second Page Breakpoint @ (992 - 768)
*************************************/
@media only screen and (max-width: 991px){


	/*Typeface*/
	.header-container h1 {
	    margin-bottom: 10px;
	    font-size: 44px;
	    line-height: 44px;
	}
	.how-to-apply-wrapper h2 {
		margin-bottom: 20px;
		font-size: 36px;
		line-height: 38px;
	}
	h3 {
	    font-size: 20px;
	    line-height: 20px;
	    margin-bottom: 0;
	}
	h4 {
	    font-size: 24px;
	    line-height: 26px;
	    margin: 5px 0;
	}
	p.subheader {
	    font-size: 18px;
	    line-height: 20px;
	}
	p {
	    font-size: 14px;
	    line-height: 16px;
	    margin-bottom: 0;
	}
	
	/*Buttons*/
	button.red-btn {
		font-size: 14px;
		line-height: 14px;
		padding: 10px 25px;
	}

	/*Milestones Container*/
	.milestone-wrapper .milestone-container {
	    width: 215px;
	}

	/*Milestones Position*/
	.milestone-container.one {
	    top: 175px;
	}
	.milestone-container.two {
	    top: 465px;
	}
	.milestone-container.three {
   		top: 745px;
	}

	/*Filp & Match Wrapper*/
	.flip-match-wrapper {
	    bottom: 145px;
	}
	
	/*How To apply Container*/
	.how-to-apply-wrapper {
	    margin-bottom: 45px;
	}
	.how-apply-container .left-container, .how-apply-container .right-container {
	    max-width: 370px;
	}
	.right-container .appstore-cta{
		width: 145px;
	}
	/*Apply Online Container*/
	.booknowwrap {
	    width: 150px;
	}
	a.booknow {
	    font-size: 24px;
	    line-height: 24px;
	    padding-left: 15px;
	    text-align: right;
	}
	
	/*Important Notices Section*/
	.important-notices-section p strong {
	    font-size: 18px;
	}
	.important-notices-section ul.custom-list li a {
	    font-size: 14px;
	    line-height: 14px;
	}
	
	/*Footer*/
	#footer {
	    margin-top: 45px;
	}

}


/* Fourth Page Breakpoint @ (768 - 480)
*************************************/
@media only screen and (max-width: 767px){

    /*container*/
    .container {max-width: 480px !important;}

	/*Typography*/
	.header-container h1 {
		font-size: 34px;
	    line-height: 34px;
	}
	h3 {
	    font-size: 17px;
	    line-height: 17px;
	}
	p.subheader, p {
	    font-size: 14px;
	    line-height: 16px;
	}
	/*Masthead bg*/
	.mastheadbg-video-wrapper {
	    margin-top: 0;
	    max-width: 100% !important;
	    margin-bottom: 30px;
	    padding: 0;
	}

	/*Road Pathway*/
	.road-pathway{
		margin: auto;
	}

	/*MileStones*/
	.milestone-wrapper .milestone-container {
		width: 190px;
		left: 46%;
		-ms-transform: translateX(-50%);
		-webkit-transform : translateX(-50%);
		transform: translateX(-50%);
	}

	/*Milestones Position*/
	.milestone-container.one {
	    top: 125px;
	}
	.milestone-container.two {
	    top: 380px;
	}
	.milestone-container.three {
	    top: 635px;
	}

	/*Filp & Match Section*/
	.flip-match-inner {
	    padding: 40px 0;
	}
	.flip-match-inner img {
	    width: 320px;
	    max-width: 100%;
	    margin-bottom: 5px;
	}
	.flip-match-wrapper {
		-webkit-background-size: contain;
		background-size: contain;
		bottom: 50px;
	}

	/*Two Cols Container*/
	.two-col-container > div {
		text-align: center;
	}
	.header-image-container {
	    margin-bottom: 10px;
	}
	.related-services-container {
	    padding: 10px;
	}
	
	/*How to Apply Wrapper*/
	.how-to-apply-wrapper {
	    margin-bottom: 20px;
	}
	.how-apply-container > .row{
		margin: 0;
	}
	.how-to-apply-wrapper h2 {
	    margin-bottom: 10px;
	    font-size: 28px;
	    line-height: 28px;
	}
	.how-apply-container .left-container, .how-apply-container .right-container {
	    max-width: 100%;
	    width: 100%;
	    margin-bottom: 15px;
	    padding: 25px 20px 30px;
	}
	.how-apply-container .or-container {
		top: 38%;
	}
	.how-apply-container .right-container {
	    float: none;
	    padding: 20px;
	}

	/*Important Notices*/
	.important-notices-section ul.custom-list {
	    margin-top: 10px;
	}

	/*More videos*/
	.more-videos-wrapper {
	    width: 400px;
	    margin: 15px auto 0;
	}
	.more-videos-header {
	    margin-bottom: 5px;
	}
	.more-videos-header h4 {
	    font-size: 16px;
	    line-height: 18px;
	}
	.more-videos-header span.arrow {
	    width: 12px;
	    height: 8px;
	    margin: 4px 0;
	}
}


/* Last Page Breakpoint @ (768 - 480)
*************************************/
@media only screen and (max-width: 480px){

    /*container*/
    .container, .container-fluid {max-width: 100%; min-width: 320px;}

	/*Typography*/
	.header-container h1 {
	    font-size: 26px;
	    line-height: 28px;
	}
	.how-to-apply-wrapper h2 {
	    margin-bottom: 10px;
	    font-size: 24px;
	    line-height: 26px;
	}
	h3 {
	    font-size: 20px;
	    line-height: 20px;
	}
	h4 {
	    font-size: 20px;
	    line-height: 22px;
	}
	#footer ul{
	    padding-left: 0;
	}
	button.red-btn {
	    padding: 10px 10px;
	}

	/*Masthead Image Icons image*/
	.product-icons-wrap .container-top .image-container {
	    margin-bottom: -40px;
	}
	.product-icons-wrap .container-bottom {
	    padding: 40px 0 30px;
	}

	/*Milestones Wrapper*/
	.roadmap-path-container{
		min-width: 0 !important;
	}
	.milestone-wrapper .milestone-container {
	    width: 170px;
	    left: 50%;
	}
	
	/*How to apply section*/
	.how-to-apply-shadow-container {
	    margin-bottom: 20px;
	}
	.how-to-appy-header p{
		font-size: 16px;
		line-height: 18px;
	}
	.how-apply-container .left-container, .how-apply-container .right-container {
		margin-bottom: 15px;
		padding: 15px 15px 20px;
	}
	.how-apply-container .or-container {
	    top: 32%;
	    transform: scale(0.8) translateY(-50%) translateX(-50%);
	}
	.right-container .appstore-cta {
	    width: 120px;
	}

	/*Apply Online Container*/
	.booknowwrap {
	    width: 130px;
	}
	a.booknow {
	    font-size: 20px;
	    line-height: 20px;
	}

	/*Important Notices*/
	.important-notices-section p strong {
	    font-size: 16px;
	}
	
	/*Lightbox Iframe container*/
	.white-popup.iframe-state {
	    width: 99%;
	    margin: 15px auto 0 !important;
	    padding-top: 40px;
	}
	button.iframe-box-close{
		padding: 0px 5px 0 0;
		-webkit-transition : all 500ms ease-out;
		-moz-transition : all 500ms ease-out;
		-o-transition : all 500ms ease-out;
		transition : all 500ms ease-out;
	}

	/*More videos*/
	.more-videos-wrapper {
	    width: 270px;
	}

	/*Footer*/
	#footer {
	    margin-top: 25px;
	}
}