/*============================================================================================================================ */
/*                                                RESPONSIVE DESIGN - MEDIA QUERIES                                             */
/*============================================================================================================================= */
/* _______________________________________________________________________________________________________________________________

							==================== Max Width 1240px ====================
_______________________________________________________________________________________________________________________________ */

@media only screen and (max-width : 1240px) {

	/* Footer ================================================================================================ Max Width 1240px */
	footer.transaction-site {
		padding: 20px;
	}

}
@media only screen and (max-width : 1100px) {

	/* Footer ============================================================================================== Max Width 1100px */
	div.footer-right div.tagline p {
		padding: 12px 30px 0 0
	}

}

/* _______________________________________________________________________________________________________________________________

							==================== 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;
	}

	/* Footer ================================================================================================ Max Width 1024px */

	footer.transaction-site div.footer-left {
		float: none;
		width: 100%;
		text-align: center;
	}

	footer.transaction-site div.footer-left p {
		padding: 20px 0 0
	}

	footer.transaction-site div.footer-right {
		float: none;
		width: 100%;
		text-align: center;
	}

	div.footer-right div.tagline {
		float: none;
		width: 100%;
	}

	div.footer-right div.tagline p {
		padding: 0
	}

	div.footer-right div.logos {
		float: none;
		width: 282px;
		margin: 20px auto 0 auto;
	}

}
/* _______________________________________________________________________________________________________________________________

							==================== 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;
	}

	/* Banner ================================================================================================= Max Width 800px */
	div.banner-title {
		padding: 50px 0;
	}

	div.banner p {
		max-width: 100%;
	}

	/* Content ================================================================================================ Max Width 800px */
	div.login-wrapper {
		flex-direction: column;
	}

	article.main div.left {
		flex: 1;
		padding-right: 30px;
	}

	div.login_block_wrapper {
		width: auto;
		padding: 1em 0 0;
		border-left: none;
		border-top: 1px solid #d1d5db;
	}

	div.login_block_wrapper .form_block {
		max-width: 450px;
		margin: 0 auto;
	}

	.qr-wrap {
		flex-direction: column;
	}

	.qr-code {
		order: 2;
		margin: 0 2em 0 0;
	}

	.next-steps {
		order: 1;
		margin-bottom: 2em;
	}

	/* Form Sections ========================================================================================== Max Width 800px */
	section.form_process_wrapper {
		padding: 20px 0px;
	}

	footer.nav ul {
		text-align: center;
	}

}
/* _______________________________________________________________________________________________________________________________

							==================== 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;
    }

	body {
		font-size: 90%;
	}

	h1 {
		font-size: 2.2em;
	}

	h2 {
		font-size: 1.6em;
	}

	h3 {
		font-size: 1.3em;
	}

	h4 {
		font-size: 1.2em;
	}

	dl {
		margin-bottom: 12px;
		padding: 12px;
	}

	dt {
		float: none;
		width: 100%;
		text-align: left;
	}

	dd {
		float: none;
		margin: 0 0 5px 0;
		padding: 0.5em 0 0.5em 0;
	}

	dd:last-of-type {
		margin: 0;
		padding: 0.5em 0 0 0;
	}

	/* Header ================================================================================================== Max Width 736px */
	div.sitebranding {
		width: 168px;
		height: 50px;
	}

	div.banner-title {
		padding: 0 0 20px 0;
	}

	div.banner p.title {
		font-size: 2.4em;
	}

	div.banner p {
		font-size: 1em;
	}

	/* Content ================================================================================================ Max Width 736px */
	div.content.form {
		padding: 35px 15px 60px;
	}

	ul.important_documents li img {
		max-width: 140px;
	}

	/* Form Sections ========================================================================================== Max Width 736px */
	div.hidden {
		margin-top: 12px;
	}

	div.form_input,
	.cols_3 div.form_input {
		float: none;
		width: 100%;
		margin-right: 0;
	}

	input.code {
		width: 60%
	}

	button.verify {
		left: 60%;
	}

	div.form_section_grouper p.label {
		margin-bottom: 5px;
	}

	/* Buttons ================================================================================================= Max Width 736px */
	input.secondary_button.back,
	input.secondary_button.cancel,
	input.secondary_button.print {
		font-size: 0;
		width: 40px;
		padding: 0;
		background-position: -4px 50%;
	}

	input.secondary_button.print {
		background-position: -6px 50%;
	}

	.vadialog {
		padding: 40px 20px;
	}

}
/* _______________________________________________________________________________________________________________________________

							==================== Max Width 640px ====================
_______________________________________________________________________________________________________________________________ */

@media only screen and (max-width : 640px) {
	
	/* Content ================================================================================================ Max Width 640px */
	ul.important_documents li img {
		max-width: 140px;
	}	

}
/* _______________________________________________________________________________________________________________________________

							==================== Max Width 480px ====================
_______________________________________________________________________________________________________________________________ */

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

    br.min_phone_l {
		display: none;
	}

	br.max_phone_p {
		display: block;
	}
	
	/* Header ================================================================================================= Max Width 480px */
	header.main {
		flex-direction: column;
	}

	div.banner-title {
		padding-top: 2em;
		text-align: center;
	}

	div.banner p.title {
		font-size: 2.2em;
		line-height: 1.2;
	}

	.offer_title p {
		padding-top: 1em;
	}

	.scrolled .offer_title {
		display: none;
	}

	/* Content ================================================================================================ Max Width 480px */
	ul.important_documents li img {
		max-width: 120px;
	}

    /* Form Sections ========================================================================================== Max Width 480px */	
	div.step_bubble span {
		font-size: 1.2em;
		line-height: 32px;
	}

	div.step_indicator {
		width: 50px;
	}

	div.step_bubbles div.left,
	div.step_bubbles div.right {
		width: 7px;
	}

	input.code {
		width: 55%
	}

	button.verify {
		left: 55%;
	}

	.key p span {
		margin-left: 0;
	}

	.phone-wrap .code-dropdown {
		width: 110px;
	}
	
    /* Footer ================================================================================================= Max Width 480px */
	footer.nav ul {
		text-align: center;
	}

	footer.main {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0px 15px 5px;
	}

	.footer-address p {
		text-align: center;
	}

	.footer-reach {
		order: 2;
		text-align: center;
	}

	.footer-logos {
		order: 1;
		margin: 1em 0 2em 0;
	}
}