 /*============================================================================================================================ */
/*                                                RESPONSIVE DESIGN - MEDIA QUERIES                                             */
/*============================================================================================================================= */
/* _______________________________________________________________________________________________________________________________

							==================== Max Device Width 1280px ====================
_______________________________________________________________________________________________________________________________ */

@media only screen and (max-device-width : 1280px) {

	html {
		background: #080808 url("../images/bkg_body-us1.jpg") top center no-repeat;
		background-size: cover;
		height: 100%;
		overflow: hidden;
	}
	body {
		height: 100%;
		overflow-y: scroll;
	}

}
/* _______________________________________________________________________________________________________________________________

							==================== Max Width 1200px ====================
_______________________________________________________________________________________________________________________________ */

@media only screen and (max-width : 1200px) {

	section.header_wrapper {
		padding: 0 20px;
	}
	div.content {
		padding: 60px 20px;
	}
	footer.btm {
		padding: 20px;
	}
	footer.built_by {
		padding: 40px 20px 0 20px;
	}

}
@media only screen and (max-width : 1150px) {

	div.content.appform {
		padding: 60px 40px 60px 20px;
	}
	a.scrollToTop{
		right: 40px;
	}

}
/* _______________________________________________________________________________________________________________________________

							==================== Max Width 1024px ====================
_______________________________________________________________________________________________________________________________ */

@media only screen and (max-width : 1024px) {

	ul.important_documents li {
		margin: 5px;
		padding: 10px;
	}
	ul.important_documents li img {
		max-width: 240px;
		margin-bottom: 5px;
	}

}
/* _______________________________________________________________________________________________________________________________

							==================== Max Width 1000px ====================
_______________________________________________________________________________________________________________________________ */

@media only screen and (max-width : 1000px) {

	br.min_tablet_l {
		display: none;
	}
	/* Content =============================================================================================== Max Width 1000px */	
	ul.important_documents li img {
		max-width: 180px;
	}

}
/* _______________________________________________________________________________________________________________________________

							==================== Max Width 800px ====================
_______________________________________________________________________________________________________________________________ */

@media only screen and (max-width : 800px) {

	br.min_tablet_l {
		display: none;
	}
	div.form_section.mob-line-height label {
		width: calc(100% - 44px);
		line-height:normal;
	}
	/* Test Mode ============================================================================================== Max Width 800px */
	div.testmode p {
		left: 10px;
	}
	div.testmode a {
		right: 10px;
	}
	ul.tm_enabled {
		text-align: left;
		float: right;
	}
	ul.tm_enabled li:last-child {
		margin: 0 10px 0 0;
	}
	/* Content ================================================================================================ Max Width 800px */
	article.main.login div.left {
		float: none;
		width: 100%;
		padding: 0;
		border-right: none;
	}
	div.login_block_wrapper {
		float: none;
		margin: 40px auto 0 auto;
		padding: 0;
	}
	/* Form Sections ========================================================================================== Max Width 800px */
	section.form_process_wrapper {
		padding: 20px 0px;
	}
	/* Selectboxit ============================================================================================ Max Width 800px */
	.selectboxit-container {
		  width: 100%;
	}
	span.selectboxit-btn {
		width: 90% !important;
	}

}
/* _______________________________________________________________________________________________________________________________

							==================== Max Width 736px ====================
_______________________________________________________________________________________________________________________________ */

@media only screen and (max-width : 736px) {

	 br.min_tablet_p {
		display: none;
	 }
	 br.max_phone_l {
        display: block;
	    font-size: 1px;
	    line-height: 0px;
	    margin: 0px;
	    clear: both;
	    height: 0px;
    }
	/* Buttons ================================================================================================= Max Width 736px */
	input.secondary_button.back,
	input.secondary_button.logoff,
	input.secondary_button.print {
		font-size: 0;
		width: 63px;
		padding: 0;
		background-position: -4px 50%;
	}
    div.wrapper.tm_enabled {
        padding-top: 67px;
    }
	/* Test Mode ============================================================================================== Max Width 736px */
	div.testmode {
		height: 67px;
		padding: 0 0 8px 0;
	}
	div.testmode p {
		position: relative;
		left: auto;
		top: auto;
		text-align: center;
		margin-bottom: 8px;
	}
	ul.tm_enabled {
		float: none;
		text-align: center;
	}
	ul.tm_enabled li:last-child {
		margin: 0;
	}
	/* Content ================================================================================================ Max Width 736px */
	ul.important_documents li img {
		max-width: 140px;
	}
	/* Form Sections ========================================================================================== Max Width 736px */
	div.form_process.two_step div.top {
		width: 240px;
	}
	div.form_process.three_step div.top {
		width: 360px;
	}
	div.form_process.four_step div.top {
		width: 480px;
	}
	div.form_process.five_step div.top {
		width: 620px;
	}
	div.form_process div.top div.step_indicator {
		width: 120px;
	}
	div.form_process div.top div.left,
	div.form_process div.top div.right {
		width: 45px;
	}
	div.form_process.two_step div.bottom {
		width: 240px;
	}
	div.form_process.three_step div.bottom {
		width: 360px;
	}
	div.form_process.four_step div.bottom {
		width: 480px;
	}
	div.form_process.five_step div.bottom {
		width: 620px;
	}
	div.form_process div.bottom div.wizard_step {
		width: 120px;
	}
	div.form_process div.bottom div.wizard_step p {
		font-size: 0.9rem;
	}
	div.form_section,
	div.form_section.no_btm_margin,
	.cols_3 div.form_section {
		float: none;
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}
	div.form_section.chkgrp,
	.cols_3 div.form_section {
		margin-bottom: 0;
	}
	.cols_3 div.form_section:last-of-type {
		margin-bottom: 20px;
	}
	abbr {
		display: block;
		font-size: 0.7rem;
		text-align: center;
		float: none;
		width: 20px;
		height: auto;
		line-height: 1.3;
		margin-top: 0px;
		margin-bottom: 20px;
	}
	.cols_3 abbr {
		float: none;
		display: block;
		font-size: 2em;
		position: relative;
		right: 0;
		bottom: 21px;
		width: 100%;
		height: 46px;
		line-height: 46px;
		margin-top: 0;
		text-align: left;
		margin-bottom: 0;
	}
	dt,
	.registered dt{
		float: none;
		width: 100%;
		text-align: left;
	}
	dd,
	.registered dd {
		float: none;
		margin: 0 0 5px 0;
		padding: 0.5em 0 0.5em 0;
	}
	dd:last-of-type {
		margin: 0;
	}

}
/* _______________________________________________________________________________________________________________________________

							==================== Max Width 640px ====================
_______________________________________________________________________________________________________________________________ */

@media only screen and (max-width : 640px) {
	
	/* Content ================================================================================================ Max Width 640px */
	ul.important_documents li img {
		max-width: 140px;
	}
	div.registration_details {
		top: 20px;
	}	
	/* Form Sections ========================================================================================== Max Width 640px */
	div.form_process.two_step div.top {
		width: 124px;
	}
	div.form_process.three_step div.top {
		width: 186px;
	}
	div.form_process.four_step div.top {
		width: 248px;
	}
	div.form_process.five_step div.top {
		width: 310px;
	}
	div.form_process div.top div.step_indicator {
		width: 62px;
	}
	div.form_process div.top div.left,
	div.form_process div.top div.right {
		width: 16px;
	}
	div.form_process div.bottom,
	div.form_process.two_step div.bottom,
	div.form_process.three_step div.bottom,
	div.form_process.four_step div.bottom,
	div.form_process.five_step div.bottom,
	div.form_process div.bottom div.wizard_step,
	div.form_process.two_step div.bottom div.wizard_step,
	div.form_process.three_step div.bottom div.wizard_step,
	div.form_process.four_step div.bottom div.wizard_step,
	div.form_process.five_step div.bottom div.wizard_step {
		width: 100%;
		height: auto;
	}
	div.form_process div.bottom div.wizard_step p {
		line-height: normal;
		text-align: center;
		font-size: 1rem;
	}
	div.form_process div.bottom div.wizard_step.hide {
		display: none;
	}	
	div.form_error.extra_margin {
		margin-top:10px;
	}
	div.form_error.no_margin {
		margin-top:15px;
	}

}
/* _______________________________________________________________________________________________________________________________

					==================== Max Width 567px (Smartphones Landscape) ====================
_______________________________________________________________________________________________________________________________ */

@media only screen and (max-width : 567px) {

    div.wrapper.tm_enabled {
        padding-top: 131px;
    }
	div.testmode {
		height: 131px;
	}
	ul.tm_enabled {
		width: 260px;
		margin: 0 auto;
	}
	ul.tm_enabled li {
		display: block;
		margin: 0 0 8px 0;
		text-align: left;
	}
	ul.tm_enabled li span.status {
		float: right;
		width: 100px;
		text-align: center;
	}
	div.offer_intro {
		max-width: 100%;
	}
	/* Form Sections ========================================================================================== Max Width 567px */
	dl {
		padding: 10px;
	}

}

/* _______________________________________________________________________________________________________________________________

							==================== Max Width 480px ====================
_______________________________________________________________________________________________________________________________ */

@media only screen and (max-width : 480px) {

    br.min_phone_l {
		display: none;
	}
	br.max_phone {
        display: block;
	    font-size: 1px;
	    line-height: 0px;
	    margin: 0px;
	    clear: both;
	    height: 0px;
    }
	section.header_wrapper {
		padding: 10px;
	}
	section.header_wrapper.login {
		padding: 0 10px;
	}
	input.primary_button.next, input.primary_button.logoff {
		padding: 0 55px 0 15px;
	}
	input.primary_button,
	input.secondary_button {
		max-width: 180px;
	}	
	div.sitebranding,
	.login div.sitebranding {
		float: none;
		max-width: 156px;
		margin: 0;
	}
	/* Banner ================================================================================================== Max Width 480px */
	section.banner_wrapper {
		float: none;
	}
	div.banner {
		padding: 60px 10px;
	}
	.identification div.banner {
		padding: 30px 10px;
	}
	div.offer_intro h1, div.offer_intro p.title {
		font-size: 2.3rem;
	}
    /* Content ================================================================================================ Max Width 480px */	
	ul.important_documents li img {
		max-width: 120px;
	}
	div.registration_details {
		top: auto;
		bottom: 20px;
	}
	div.content {
        display: block;
        padding: 30px 10px 60px 10px;
    }
	div.content.appform {
		padding: 30px 40px 60px 10px;
	}
	div.content p.intro {
		font-size: 1.3em;
	}
    article.center_aligned {
        padding: 50px 20px 20px 20px;
    }
	article.main div.info_block {
		width: 90%;
		height: auto;
		margin: 0 auto;
	}
	article.main div.info_block.left {
		float: none;
		margin-bottom: 30px;
	}
	article.main div.info_block.right {
		float: none;
	}
	article.main h1 {
		font-size: 2em;
	}
	article.main h2.large {
		font-size: 1.7em;
	}
    /* Form Sections ========================================================================================== Max Width 480px */
	div.form_section_grouper {
		padding: 10px;
	}
	div.form_section_grouper.no_btm_padding {
		padding: 10px 10px 0;
	}
	div.form_section, 
	div.form_section.no_btm_margin, 
	.cols_3 div.form_section {
		margin-bottom: 10px;
	}
	div.form_section.chkgrp,
	.cols_3 div.form_section {
		margin-bottom: 0;
	}
	.cols_3 div.form_section:last-of-type {
		margin-bottom: 10px;
	}
	/* Selectboxit ============================================================================================ Max Width 480px */
	span.selectboxit-btn {
		width: 90% !important;
	}
	footer.built_by {
		padding: 40px 10px 0 10px;
	}

}
/* _______________________________________________________________________________________________________________________________

							==================== Max Width 320px ====================
_______________________________________________________________________________________________________________________________ */

@media only screen and (max-width : 320px) {

	input.primary_button.next, 
	input.primary_button.logoff {
		padding: 0px 53px 0 13px;
	}

}