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

							==================== Max Width 1280px ====================
_______________________________________________________________________________________________________________________________ */

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

	footer.transaction-site {
		padding: 1.25em;
	}

	footer.links {
		padding: .9375em 1.25em;
	}
}
/* ____________________________________________________________________________________________________________________________

							==================== Max Width 1200px ====================
_______________________________________________________________________________________________________________________________ */

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

	/* Content =============================================================================================== Max Width 1200px */
	div.banner {
		padding: 8em 30px 3em 30px;
	}

	div.content {
		padding: 0 30px;
	}
	/* Important Dates ======================================================================================= Max Width 1200px */
	.dates-outer-wrapper {
		padding: 3em .5em;
	}

	.dates-wrapper .key-date {
		width: calc(33.3333% - 1em);
		margin: 1.25em .5em;
	}
	/* Content - Form Sections =============================================================================== Max Width 1200px */
	div.form_section_conditions {
		width: 70%;
	}
	/* Buttons =============================================================================================== Max Width 1200px */
	section.content_wrapper.form div.button_area {
		margin: 30px 30px 0 30px;
	}
	/* Footer ================================================================================================ Max Width 1200px */
	footer.transaction-site {
		padding: 20px;
	}

	footer.links {
		padding: 15px 20px;
	}
}
/* ____________________________________________________________________________________________________________________________

							==================== Max Width 1100px ====================
_______________________________________________________________________________________________________________________________ */

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

	/* Content - Form Sections =============================================================================== Max Width 100px */
	div.form_section_conditions {
		width: 90%;
	}
	/* Footer ============================================================================================== Max Width 1100px */
	div.footer-right div.tagline p {
		padding: 12px 30px 0 0
	}
}
/* _______________________________________________________________________________________________________________________________

							==================== Max Width 1024px (Desktop Notebook) ====================
_______________________________________________________________________________________________________________________________ */

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

	/* Content =============================================================================================== Max Width 1024px */
	section.header_wrapper {
		padding: 15px 20px;
	}

	div.sitebranding {
	width: 109px;
	height: 60px;
	margin: .4375em 0;
}

	div.navigation_wrapper,
	div.content {
		padding: 0 20px;
	}

	div.banner {
		padding: 8em 20px 3em 20px;
	}
	/* Conditions Page layout overrides --------------------------------------------------------------------------------------- */
	div.form_section.form_section_conditions div.form_section_grouper {
		width: 90%;
	}
	/* Content - Forms ======================================================================================= Max Width 1024px */
	div.form_block {
		padding: 20px 0 15px 0;
	}

	div.form_section label.two_lines_tablet {
		line-height: normal;
	}
	/* Buttons =============================================================================================== Max Width 1024px */
	section.content_wrapper.form div.button_area {
		margin: 30px 20px 0 20px;
	}
	/* 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;
		margin: 0 auto;
	}

	footer.links ul,
	footer.links p {
		text-align: center;
	}

	footer.links div.footer-left {
		float: none;
		width: 100%;
	}

	footer.links div.footer-right {
		float: none;
		width: 100%;
		text-align: center;
		padding-top: 10px;
	}
}
/* _______________________________________________________________________________________________________________________________

							==================== Max Device Width 1024px (iPad Landscape) ====================
_______________________________________________________________________________________________________________________________ */

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

	/* Buttons ======================================================================================== Max Device Width 1024px */
	input.secondary_button.print {
		display: none;
	}
}
/* _______________________________________________________________________________________________________________________________

							==================== Max Width 1000px ====================
_______________________________________________________________________________________________________________________________ */

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

	/* Content - Form Sections =============================================================================== Max Width 1000px */
	div.form_section_conditions {
		width: 100%;
	}

	div.form_section.form_section_conditions div.form_section_grouper {
		width: 60%;
	}

	div.form_section_conditions div.form_section_middle {
		width: 100%;
	}
}
/* _______________________________________________________________________________________________________________________________

							  ==================== Max Width 800px ====================
_______________________________________________________________________________________________________________________________ */

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

	h2.withLeftMargin,
	.withLeftMargin {
		margin-left: 0;
	}

	br.min_tablet_l {
		display: none;
	}
	/* 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 */
	div.wrapper {
		overflow: hidden;
	}

	div.form_section_accept_terms label {
		font-size: 0.9em;
	}

	article.main {
		float: none;
		width: 100%;
	}

	aside {
		width: auto;
		text-align: center;
	}

	aside.left_float,
	aside.right_float {
		float: none;
		margin-top: 40px;
	}

	.dates-wrapper .key-date {
		width: calc(50% - 2em);
		margin: 1em auto;
	}
	/* Content - Forms ======================================================================================== Max Width 800px */
	div.wizsteps_wrapper {
		padding: 0 15px;
	}

	div.form_section_title {
		float: none;
		width: 90%;
		margin-right: 2%;
	}

	div.form_section_title h2 {
		font-size: 1.2em;
		margin-bottom: 0;
	}

	div.form_section_preamble {
		float: none;
		width: 90%;
		margin-top: 0;
		margin-right: 0;
	}

	div.form_section_preamble p:first-child {
		margin-top: 10px;
	}

	div.form_section_help {
		float: none;
		position: absolute;
		top: 14px;
		right: 14px;
	}

	div.form_section_grouper {
		float: left;
		width: 60%;
	}

	div.form_section_left {
		float: none;
		width: 100%;
		margin-right: 0;
	}

	div.form_section_left label {
		height: auto;
		text-align: left;
		line-height: normal;
		padding-bottom: 6px;
	}

	label br {
		display: none;
	}

	div.form_section_middle,
	div.form_section_middle.wide {
		float: none;
		width: 100%;
	}

	div.form_section_middle img {
		margin-bottom: 0;
	}

	div.form_section_right {
		width: 38%;
		padding-top: 23px;
	}

	div.form_section_right.radio_group,
	div.form_section_right.checkbox_group {
		padding-top: 0;
	}

	div.declare {
		width: auto;
	}

	table.dialog {
		font-size: 1.2em;
	}

	.vadialog {
		width: 80%;
	}
	/* Review Page layout overrides ------------------------------------------------------------------------------------------- */
	div.form_section.form_section_accept_terms div.form_section_grouper {
		float: none;
		width: 100%;
	}
	/* Selectboxit ============================================================================================ Max Width 800px */
	.selectboxit-container {
		width: 100%;
	}

	span.selectboxit-btn {
		width: 90% !important;
	}
	/* Buttons ================================================================================================ Max Width 800px */
	input.primary_button.submit {
		left: 77% !important;
	}

	input.print {
		display: none;
	}
	/* Misc =================================================================================================== Max Width 800px */
	div.form_section_accept_terms div.form_section_middle {
		float: left;
		width: 49%;
	}

	footer.transaction-site {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	footer.transaction-site div.footer-left {
		margin-bottom: 1.5em;
	}

	footer.transaction-site div.footer-left p {
		text-align: center;
	}
}

/* _______________________________________________________________________________________________________________________________

					==================== Max Width 768px (iPad Portrait) ====================
_______________________________________________________________________________________________________________________________ */

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

	.form_section_accept_terms label.checkbox {
		line-height: 1.3;
	}
}

/* _______________________________________________________________________________________________________________________________

					==================== Max Width 736px (Smartphones Landscape) ====================
_______________________________________________________________________________________________________________________________ */

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

	br.min_tablet_p {
		display: none
	}

	body {
		font-size: 90%;
	}
	/* Header ================================================================================================= Max Width 568px */
	section.header_wrapper {
		padding: 10px 20px;
	}

	div.offer_title {
		padding: 1em;
	}

	div.offer_title p.offer_title {
		font-size: 1.6em;
	}

	div.offer_title.form {
		display: none
	}
	/* Navigation ============================================================================================= Max Width 736px */
	div.navigation_wrapper {
		display: none;
	}

	div.navigation_wrapper {
		padding: 0 15px;
	}

	nav.main {
		display: none;
	}

	#navicon {
		display: block;
		position: absolute;
		top: 5px;
		right: 0px;
		text-decoration: none;
		z-index: 9;
		width: 60px;
		height: 60px;
	}

	#navicon:before,
	#navicon.closed:before {
		font-family: "Material-Design-Iconic-Font";
		font-size: 40px;
		display: block;
		content: '\f197';
		color: #004C5A;
		width: 60px;
		height: 60px;
		line-height: 60px;
		transition: color 0.3s;
		text-align: center;
		margin: 0;
	}

	#navicon:before {
		color: white;
		content: '\f136';
	}

	#navicon.closed:before {
		content: '\f197';
	}

	.mobile-nav {
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-moz-box-orient: vertical;
		-moz-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		height: 100%;
		max-width: 300px;
		width: 100%;
		z-index: 5;
		top: 0;
		right: -300px;
		position: fixed;
		background: #004C5A;
		text-align: center;
	}

	.mobile-nav a {
		height: 60px;
		line-height: 60px;
		color: white;
		border-top: 1px solid rgba(0,0,0,0.3);
		text-decoration: none;
	}

	.mobile-nav a.selected,
	.mobile-nav a:hover {
		background: #086171;
	}

	.fade {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
	}

	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;
	}
	/* Banner ================================================================================================= Max Width 736px */
	section.banner_wrapper,
	div.banner {
		height: auto;
	}

	div.banner {
		padding: 20px;
	}

	a.btn_offer_document {
		margin-bottom: 1em;
	}
	/* Content ================================================================================================ Max Width 736px */
	div.home_banner div.button_area {
		margin-top: 10px;
	}
	/* Important Dates ======================================================================================== Max Width 736px */

	/* Content - Form ========================================================================================= Max Width 736px */
	div.form_process_wrapper {
		padding: 15px;
	}

	div.form_section.residency div.form_section_left,
	div.form_section.residency div.form_section_middle {
		float: none;
		width: 100%;
		margin-right: 0;
	}

	div.large_radio_label {
		width: 80%;
	}

	input.textbox.designation {
		width: 81%;
	}
	/* Buttons ================================================================================================ Max Width 736px */
	input.primary_button.submit {
		left: 70% !important;
	}
}


/* _______________________________________________________________________________________________________________________________

					==================== Max Width 568px (Smartphones Landscape) ====================
_______________________________________________________________________________________________________________________________ */

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

	/* Content ================================================================================================ Max Width 568px */
	div.form_block div.content {
		padding: 0;
	}

	div.form_section_conditions {
		float: none;
		width: 100%;
		margin-bottom: 20px;
	}
	/* Buttons ================================================================================================ Max Width 568px */
	input.primary_button.submit {
		left: 67% !important;
	}

	input.secondary {
		font-size: 0;
		height: 63px;
		line-height: 63px;
		width: 63px;
		margin-right: 10px;
		padding: 0;
	}

	input.secondary.cancel {
		padding: 0;
		margin-right: 10px;
	}

	input.secondary.back {
		padding: 0;
		margin-right: 10px;
	}
	/* Footer ================================================================================================= Max Width 568px */
	footer.top div.logo {
		margin: 15px 20px;
	}
	/*a.scrollToTop {
		margin: 15px 20px 15px 0;
	}*/
}

/* _______________________________________________________________________________________________________________________________

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

/* _______________________________________________________________________________________________________________________________

					==================== Max Width 480px (Smartphones Portrait) ====================
_______________________________________________________________________________________________________________________________ */

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

	br.max_phone_p {
		display: block;
		font-size: 1px;
		line-height: 0px;
		margin: 0px;
		clear: both;
		height: 0px;
	}

	br.min_tablet_p,
	br.min_phone_l {
		display: none;
	}

	div.navigation_wrapper,
	div.content {
		padding: 0 20px;
	}

	div.bpay.long {
		width: 100%;
	}
	/* Header ================================================================================================= Max Width 480px */
	section.header_wrapper {
		padding: 20px;
	}
	/* Banner ================================================================================================= Max Width 480px */
	p.footnote {
		font-size: 0.8em;
	}
	/* Content ================================================================================================ Max Width 480px */
	div.form_section.residency div.form_section_left {
		float: none;
		width: 100%;
	}

	div.form_section.residency div.form_section_middle {
		float: none;
		width: 100%;
	}

	div.form_section_accept_terms div.form_section_middle {
		width: 100%;
		float: none;
	}
	/* Conditions Page layout overrides --------------------------------------------------------------------------------------- */
	div.form_section_conditions {
		float: none;
		width: auto;
	}

	div.form_section.form_section_conditions div.form_section_grouper {
		width: 100%;
	}

	.dates-wrapper .key-date {
		width: calc(100% - 1.5em);
		margin: .75em auto;
	}
	/* Content - Form ========================================================================================= Max Width 480px */
	div.appform_block.first {
		padding: 0 0 40px 0;
	}

	div.form_section_title {
		float: none;
		width: auto;
		min-height: 0;
		margin-right: 0;
	}

	div.form_section_title h2 {
		font-size: 1.2em;
		padding-right: 50px;
	}

	div.form_section_preamble {
		width: 100%;
		margin-top: 25px;
	}

	div.form_section_header.no_preamble div.form_section_preamble {
		margin-top: 0;
	}

	div.form_section_preamble p {
		font-size: 0.9em;
	}

	div.form_section_help {
		float: none;
		position: absolute;
		top: 14px;
		right: 14px;
	}

	div.form_section_middle .selectboxit-container {
		margin-bottom: 0;
	}

	input.textbox {
		margin-bottom: 0;
	}

	input.textbox.designation {
		width: 79%;
	}

	input.account,
	span.account {
		width: 52.5%;
	}

	input.textbox.designation {
		float: left;
		width: 76%;
	}

	input.textbox.chesshin {
		width: 93%;
	}

	input.textbox.account {
		width: 50%;
	}

	div.form_section_middle abbr {
		width: 5%;
		margin: 0 2% 0 0;
	}

	div.form_section_middle abbr.middle {
		width: 10%;
	}

	div.form_section_middle abbr.right {
		width: 15%;
		margin: 0 0 0 2%;
	}

	span.bsb,
	span.account {
		width: 25%;
	}

	div.form_section_header {
		margin-bottom: 20px;
	}

	div.form_section_right {
		position: relative;
		float: none;
		width: auto;
		height: auto;
		padding-top: 0;
		padding-bottom: 15px;
	}

	div.form_section_right.radio_group,
	div.form_section_right.checkbox_group {
		padding-bottom: 0;
	}

	div.review_block {
		float: none;
		width: 100%;
		margin: 0;
		min-height: 0;
	}

	div.form_section_grouper,
	div.form_section_right {
		float: none;
		width: 100%;
	}

	.vadialog {
		width: 95%;
		padding: 1em;
	}

	.vadialog h3 {
		padding-right: 50px;
	}
	/* Error & Help Messages ================================================================================== Max Width 480px */
	div.form_section_right div.insitu_error_message,
	div.form_section_right div.insitu_help_message {
		margin-left: 0;
	}

	div.form_section_right div.insitu_help_box {
		background: url("../images/insitu-help-box-mobile.png") 20px top no-repeat;
		padding-top: 14px;
		margin-top: 3px;
		top: 0px;
		position: relative;
	}

	div.form_section_right div.insitu_error_box {
		background: url("../images/insitu-error-box-mobile.png") 20px top no-repeat;
		padding-top: 14px;
		margin-top: 3px;
	}

	div.form_section_right.radio_group div.insitu_error_box {
		background: url("../images/insitu-error-box-mobile-radio.png") bottom left no-repeat;
		padding-top: 0;
		padding-bottom: 14px;
		margin-top: 0;
		margin-bottom: 10px;
	}

	div.form_section_right.radio_group div.insitu_error_message {
		-webkit-border-radius: 8px 8px 8px 0;
		-moz-border-radius: 8px 8px 8px 0;
		border-radius: 8px 8px 8px 0;
	}

	div.form_section_right.checkbox_group div.insitu_error_box {
		background: url("../images/insitu-error-box-mobile.png") top left no-repeat;
		padding-top: 14px;
		padding-bottom: 0;
		margin-top: 3px;
		margin-bottom: 0;
	}

	div.form_section_right.checkbox_group div.insitu_error_message {
		-webkit-border-radius: 0 8px 8px 8px;
		-moz-border-radius: 0 8px 8px 8px;
		border-radius: 0 8px 8px 8px;
	}
	/* Buttons ================================================================================================ Max Width 480px */
	section.content_wrapper.form div.button_area {
		margin: 30px 20px 0 20px;
	}

	input.secondary {
		font-size: 0;
		height: 42px;
		line-height: 42px;
		width: 42px;
		margin-right: 10px;
		padding: 0;
	}

	input.secondary.print {
		float: left;
		padding: 0;
		margin-right: 10px;
		background: #353943 url("../images/ico_print.png") left 50% no-repeat;
	}

	input.secondary.cancel {
		padding: 0;
		margin-right: 10px;
	}

	input.secondary.back {
		padding: 0;
		margin-right: 10px;
	}
	/* Review Page & BPAY Layout ---------------------------------------------------------------------------------------------- */
	div.bpay {
		margin-left: -7px;
	}
	/* Selectboxit ============================================================================================ Max Width 480px */
	span.selectboxit-btn {
		width: 90% !important;
	}
	/* Footer ================================================================================================= Max Width 480px */
	footer.top div.logo {
		margin: 15px 10px;
	}

	footer.btm {
		padding: 15px 10px;
	}

	footer.built_by {
		padding: 20px 10px;
	}

	footer.links {
		padding: 15px 10px;
	}

	footer.links li {
		margin-right: 0;
	}

	footer.links div.footer-left,
	footer.links div.footer-right {
		float: none;
		width: 100%;
		text-align: center;
	}

	footer.links div.footer-left {
		margin-bottom: 1em;
	}
}

/* _______________________________________________________________________________________________________________________________

					==================== Max Width 320px (Smartphones Portrait) ====================
_______________________________________________________________________________________________________________________________ */

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

	/* Content ================================================================================================ Max Width 320px */
	a.btn_offer_document {
		font-size: 1.3em;
	}

	p.footnote {
		font-size: 0.7em;
	}
	/* Conditions Page Layout Overrides --------------------------------------------------------------------------------------- */
	div.form_section.form_section_conditions {
		padding: 0 5px;
	}

	div.form_section.form_section_conditions div.form_section_middle {
		padding-top: 8px;
	}

	div.form_section.form_section_conditions div.form_section_middle div.form_checkbox_group label.multiline {
		padding-top: 0;
	}
	/* Content - Form ========================================================================================= Max Width 320px */
	div.form_process h2 {
		font-size: 1.9em;
	}

	div.form_section_title {
		width: 80%;
	}
	/* Review Page & BPAY Layout ---------------------------------------------------------------------------------------------- */
	div.bpay {
		width: 276px;
	}

	div.bpay_details {
		width: 201px;
		padding: 10px;
	}
	/* Buttons ================================================================================================ Max Width 480px */
	input.primary_button.next,
	input.primary_button.finished {
		padding-right: 66px;
	}
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	.Safari10 input[type="text"]:focus,
	.Safari10 input[type="number"]:focus,
	.Safari10 input[type="password"]:focus,
	.Safari10 textarea:focus,
	.Safari10 select:focus,
	.Safari10 input[type="text"]:hover,
	.Safari10 input[type="number"]:hover,
	.Safari10 input[type="password"]:hover,
	.Safari10 textarea:hover,
	.Safari10 select:hover {
		font-size: 16px;
	}
}