/******************************************************/
/****** CSS STYLES AT A PAGE WIDTH OF 1050 PIXELS ******/
/******************************************************/

@media only screen and (max-width:1130px)
{
	nav.single-sub-nav {text-align:center;}
	nav.single-sub-nav ul { margin:12px 0px 0px 45px;}
	
}

/******************************************************/
/****** CSS STYLES AT A PAGE WIDTH OF 1050 PIXELS ******/
/******************************************************/

@media only screen and (max-width:1050px)
{
	#hidden-view {padding:0px 0px 0px 45px;}
}

/******************************************************/
/****** CSS STYLES AT A PAGE WIDTH OF 900 PIXELS ******/
/******************************************************/

@media only screen and (max-width:900px)
{
/*** MAIN NAV ***/
	nav.main {height:300px; bottom:-225px;}
	#hover-nav { height:300px; position:relative;}
	.current-page {display:none;}
	#hidden-view {padding:0px 0px 0px 45px; font-size:1.1em; margin-bottom:0px;}
	#hidden-view #main-nav {margin-bottom:0px; position:absolute; left:45px; overflow:visible; }
	#hidden-view #main-nav li {float:none; padding-bottom:10px; margin-right:0px;}
	#hidden-view p {position:absolute; bottom:0px;}
	
/*** WEB SUB NAV ***/
	#top-view .carrot {display:none;}
	nav.single-sub-nav.active {display:none;}
	
/*** MOBILE SUB NAV ***/
	#main-nav .mobile-sub-nav {position:absolute; left:300px; width:400px;}
	
/*** CONTENT BOXES ***/
	.copy.left {width:300px;}
}

/******************************************************/
/****** CSS STYLES AT A PAGE WIDTH OF 675 PIXELS ******/
/******************************************************/

@media only screen and (max-width:675px)
{
	#top-view { height:auto;}
	#top-view .logo { float:none; display: inline-block; margin-left:20px;}
	#top-view .tagline { float:none; display:block; margin:20px 0px 0px 20px; width:260px;}
	#top-view .expand { position:absolute; right:0px; top:0px; margin-right:20px;}
	#top-view .close { position:absolute; right:0px; top:0px; margin-right:20px;}
	#hidden-view {padding-left:20px; }
	#hidden-view p {font-size:0.5em;}
	#hidden-view #main-nav {margin-bottom:0px; position:absolute; left:20px; }
}

/******************************************************/
/****** CSS STYLES AT A PAGE WIDTH OF 535 PIXELS ******/
/******************************************************/

@media only screen and (max-width:535px)
{
	/*** CONTACT PAGE ***/
	div.contact-info {display:none;}
	#mobile-contact {display:block;}
	#mobile-contact #map-wrap {display:none;}
	#mobile-contact h3 {margin:10px 0px 5px 0px; padding:0px;}
 	#mobile-contact ul {list-style-type:none; padding:0px; margin:0px;}
 	#mobile-contact.copy .copy-container ul li {height:20px; background:none; padding:0px; margin:0px;}
 	#mobile-contact.copy .copy-container ul.pdf-list {margin-top:20px !important;}
 	#mobile-contact.copy .copy-container .more-info ul.pdf-list li {height:33px; padding-left:40px;}
 	#mobile-contact.copy .copy-container .more-info ul.pdf-list li.calendar { background: url(../img/calender.png) no-repeat top left; }
 	#mobile-contact.copy .copy-container .more-info ul.pdf-list li.financial { background: url(../img/financial.png) no-repeat top left; }
	#mobile-contact.copy .copy-container .more-info ul.pdf-list li.general { background: url(../img/general.png) no-repeat top left; }
	#api-popUp {display:none;}
	
	/*** CONTENT BOXES ***/
	.copy.left {width:90%; left:0px;}
	.copy.right {width:90%; left:0px;}
	.centered-content {padding:0px; left:0px; margin:0% 5%!important; top:20px!important;}
	.copy .copy-container {margin-top:0px; height:80%;}
	
	/*** PRINCIPAL ***/
	#principal-mobile { display:block; }
	#principal-web { display:none; }
	
}

/******************************************************/
/****** CSS STYLES AT A PAGE WIDTH OF 480 PIXELS ******/
/******************************************************/

@media only screen and (max-width:480px)
{
	/*** FOOTER ***/
	#hidden-view p {font-size:0.5em;}
	.copyright span {display:none;}
	
	/*** HEADLINES ***/
	.image-callout {font-size:2.5em;}
	.image-callout.tr { margin:0px; padding:0px; max-width:75%; text-align:right; right:25px; top:30px;}
	.image-callout.br { margin:0px; padding:0px; max-width:75%; text-align:right; bottom:100px; right:25px;}
	.image-callout.bl { margin:0px; padding:0px; max-width:75%; text-align:left; bottom:100px; left:25px;}
	.image-callout.tl { margin:0px; padding:0px; max-width:75%; text-align:left; left:25px; top:30px;}
}