/*
--------------------
WARNING!
Copyright Progress Systems Limited.
Explicit permission is required to copy or use any documents from this website
--------------------
*/


/* 

	LEFT: Loan Calculator (65%) + RIGHT: HTML Announcement 3 (No background)
	
	IMPORTANT: In Display Settings (Office Area) Homepage Order needs to be: 
	
	+ Loan Calculator
	+ HTML Announcement 3


*/



/*LOAN CALCULATOR --------------------------------------------------------------------------------------- */

#loanSliderContainerHome { 
	width:64%;
	margin: auto auto auto 0;
	background:none;
}


/*CHANGE TO WHATEVER ANNOUNCEMENT IS USED AFTER NEWS HEADLINES LAYER*/

#divHTMLAnnouncements2Wrapper #announcements_content_dynamic {
    background: rgba(0, 0, 0, 0) url(../../../templates/current/images/mobile_app.png) no-repeat scroll right -20px bottom -2px / 180px auto;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    height: 492px;
    padding: 30px;
    position: absolute;
    right: 0;
    top: -552px;
    width: 35%;
	
}

#divHTMLAnnouncements2Wrapper #announcements_content_dynamic:before {
	background: rgba(255, 255, 255, 0.4);
    content: "";
    height: 425px;
    left: 0;
    position: absolute;
    top: 35px;
    width: 1px;
}





/* -------------------------------------------------- MEDIA QUERIES ------------------------------------------*/


/* -------------------------------------------------- MEDIA QUERIES ------------------------------------------*/


/* -------------------------------------------------- MEDIA QUERIES ------------------------------------------*/


/* -------------------------------------------------- MEDIA QUERIES ------------------------------------------*/


/* -------------------------------------------------- MEDIA QUERIES ------------------------------------------*/







@media only screen and ( max-width: 75em ) /* 1200 */ {
	
	#divHTMLAnnouncements2Wrapper #announcements_content_dynamic {right:20px;}
	
	#divSliderLoanCalculatorWrapperOuter {padding-left:20px; padding-right:20px;}
	
	#loanSliderContainerHome {margin: auto auto auto 0;width: calc(63% - 15px);}
		
}


@media only screen and ( max-width: 64em ) /* 1024 */{
	
	#divHTMLAnnouncements2Wrapper #announcements_content_dynamic {top:-555px; height:auto;}

}

@media only screen and ( max-width: 61.25em ) /* 980 */ {
	
	#divHTMLAnnouncements2Wrapper { max-width:600px;}
	
	#divHTMLAnnouncements2Wrapper #announcements_content_dynamic {width:100%; position: relative; top:0; right:0; margin:auto; float:none; left:0; display: block;}
	
	#loanSliderContainerHome { width:100%; margin: auto;}
	
	#divSliderLoanCalculatorWrapperOuter {padding: 30px 20px;}
	
	#divHTMLAnnouncements2Wrapper #announcements_content_dynamic {
	background-position: right 40px center;
    height: auto;
	border:none;
}

#divHTMLAnnouncements2Wrapper #announcements_content_dynamic::before {
	display:none;
}


@media only screen and ( max-width: 61.25em ) /* 980 */ {
	
}


@media only screen and ( max-width: 55em ) /* 880 */ {
	
}


@media only screen and ( max-width: 50em ) /* 800 */ {
	
}


@media only screen and ( max-width: 48em ) /* 768 */ {

}


@media only screen and ( max-width: 45em ) /* 720 */ {	

	#divSliderLoanCalculatorWrapperOuter {padding: 0;}
	
}


@media only screen and ( max-width: 40em ) /* 640 */ {
	
	
}


@media only screen and ( max-width: 37.5em ) /* 600 */ {

}


@media only screen and ( max-width: 35.5em ) /* 568 */ {

}


@media only screen and ( max-width: 32.5em ) /* 520 */ {
	
	#divHTMLAnnouncements2Wrapper #announcements_content_dynamic {background-image:none;}
	
	#divHTMLAnnouncements2Wrapper #announcements_content_dynamic #spot2 {margin:auto; text-align:center;}
	
	#divHTMLAnnouncements2Wrapper #announcements_content_dynamic #spot2 li {background:none;}
	
	#divHTMLAnnouncements2Wrapper #announcements_content_dynamic #spot1 {text-align:center;}
	
	#buttons {margin:20px auto 0;}

}


@media only screen and ( max-width: 30em ) /* 480 */ {

}


@media only screen and ( max-width: 26.6875em ) /* 427 */ {
	
}


@media only screen and ( max-width: 25em ) /* 400 */ {
	
}


@media only screen and ( max-width: 22.5em ) /* 360 */ {
	
}


@media only screen and ( max-width: 20em ) /* 320 */ {
	
	#divHTMLAnnouncements2Wrapper #announcements_content_dynamic {padding:10px;}
}