/* Media Queries */

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

@media screen and (max-width:825px) {
	
	.topBar { height: 40px; }
	.topBar .content { width: 90%; }
	
	.pageTitle { width: 100%; padding: 0 2.5%; box-sizing: border-box; }
	
	.mainContent { width: 90%; clear:both; margin: 0 auto 20px auto; } 
	section { clear:both; } 
	
	section.welcome ul.promo { text-align:center; }
	section.welcome ul.promo li img { width: 30%; }
	section.ourMission { margin-top: 15px; }
	.newslettertop img { float: none; width: 70%; height:auto; margin: 10px 20px; }
	
	section.lastRow .home-questionForm  { padding: 20px 15px; }
	
	section.lastRow .home-questionForm iframe { height:425px; }
	
	.hand1 { left: 3%; top: 15px; }
	.hand2 { left: 12%; top: 0px; }
	.hand3 { left: 20%; top: 40px; }
	.hand4 { right: 25%; top: 0px; }
	.hand5 { right: 15%; top: 60px; }
	.hand6 { right: 3%; top: 30px; }

}

@media screen and (max-width: 768px) {
/* new MS class for responsive image */
	.ms-rteImage-5 { float:none; width: 100% !important; height: auto !important; max-width: 720px; margin: 0px !important; }

/*@media screen and (max-width:720px) {*/
	
	#s4-ribbonrow, #suiteBar { display:none; }

	/* nav#globalNav */
	nav#globalNav { font-size: .9em; }
	nav#globalNav > ul > li > a { width: auto; padding: 12px 15px 16px 15px; }	 
	
	section.lastRow .home-questionForm, section.lastRow .home-socialmedia { width: 100%; margin:15px auto; float:none; overflow: auto; }
	
	p.staffCol1, .staffCol1 { clear: both; float:none; width: 100%; overflow:auto; margin: 1em 0 2em 0; }
	p.staffCol2, .staffCol2 { clear: both; float:none; width: 100%; overflow:auto; }
}

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

	header #logo a {
	width: 240px; height: 150px;
	background: url(/childdevelopmentservices/Style%20Library/CDS/images/cds-logo-small.png); }
	
	nav#globalNav a.mobile_menu { text-indent:-9999px; }
	
	nav#globalNav ul ul ul a { color:#332a87 !important; }
	
	.topBar { width: 100%; overflow: auto; }
	.topBar .content { width: 94%; }
	.topBar .content .topinfo { width: 100%; float:none; text-align:right;  padding-top: 3px; }
	.topBar .content .topinfo a:link, .topBar .content .topinfo a:visited  {  padding-right: 5px; }
	span.cds-phone  { padding-left: 5px; }
	
	section.welcome h2 { font-size: 1.25em; }
	section.ourMission p { font-size: 1em; }
	
	.pageLayout-1-Colleft, .pageLayout-1-Colright, .pageLayout-2-Colleft, .pageLayout-2-Colright  { float:none; width: 100%; }
	
	aside.notification { margin-top: 30px; }
	
	section.lastRow .home-questionForm iframe { height:450px; }
	
	.mainContent .LeftColumn-2colA  { float:none; width: 90%; margin:0 auto 30px auto; padding-right:0; border:none;  }
	.mainContent .RightColumn-2colA { float:none; width: 90%; margin: 30px auto;   }

	.mainContent .LeftColumn-2colB, .mainContent .LeftNavColumn-2colC { float:none; width: 90%; margin:0 auto;  }
	.mainContent .RightColumn-2colB, .mainContent .RightColumn-2colC  { float:none; width: 90%; margin:0 auto 30px auto; padding-left:0; border:none;  }

	ul.horizontallinks { margin: 0 0 25px 0; }
	
	/* nav#globalNav */
	
	nav#globalNav { padding: 50px 5% 20px 5%; height:0px; overflow: auto; border-top: none; }
	nav#globalNav a.mobile_menu { display: block; }
	nav#globalNav ul,
	nav#globalNav ul ul,
	nav#globalNav ul ul ul { display: block; position: static; }
	
	nav#globalNav > ul { text-align:left;  }
	nav#globalNav > ul > li { display:block; height: auto; padding:0 10px; margin:0; }
	
	nav#globalNav > ul { padding: 0; }
	nav#globalNav > ul > li { float: none; margin-top: 25px; border-top: 1px dotted #332a87; }
	
	nav#globalNav ul li { background: none; }  
	nav#globalNav ul li:hover { background: none; } /* white background in phone view */
	
	nav#globalNav ul li a {
		width: auto;
		display: block;
		margin: 8px 0;
		padding: 6px 15px 6px 2px;
		border-bottom: none;
	}	
	
	nav#globalNav ul ul, nav#globalNav ul ul ul,
	nav#globalNav ul > li > ul > li:hover,
	nav#globalNav ul > li > ul > li > ul > li:hover { background-color: transparent; }
	
	nav#globalNav ul ul li, nav#globalNav ul ul ul li  { border-bottom: none }
	
	nav#globalNav ul ul { margin-left: 40px; list-style:disc; }
	nav#globalNav ul ul ul { margin-left: 60px; list-style:circle; }

	nav#globalNav ul li a, nav#globalNav ul li a:visited {  color: #332a87; }
	nav#globalNav ul ul ul a { color: #332a87; }
	nav#globalNav ul > li:hover > a { color: #332a87; }
	nav#globalNav ul > li:hover > a:hover { color: #900; }
	
	nav#globalNav a[aria-haspopup="true"]::after { display:none; }
	
}

@media screen and (max-width:480px) {
	
	/* nav#globalNav */
	section.welcome h2 { font-size: 1em; line-height:1.4; }
	nav#globalNav { padding-top: 30px;} 
	nav#globalNav a.mobile_menu { left: auto; right: 40px; top: 8px; margin-left: 0px;  }
	
	.topBar { width:100%; height: auto; padding-bottom:15px; }
	.topBar .content { width: 90%; }
	.topBar .content .cds-phone     { width: 90%; float:none; text-align:center;  font-size:1.2em;  }
	.ms-srch-sb { width: 100%; }
	.topBar .content .cds-searchbox { width: 100%; float:none; margin: 10px 0; }
	.cds-searchbox input, .ms-srch-sb input { width: 80%; background: #000066; padding: 10px 8px; }
	.ms-srch-sb-border, .ms-srch-sb-borderFocused, .ms-srch-sb-border:hover { border-color: #000066; background: #000066; border-radius: 5px; }
	.ms-srch-sb > .ms-srch-sb-searchLink { margin-top:10px}
	
	.pageTitle-breadcrumb { border-bottom:none; background:none; }
	.breadcrumb { float: none; width:100%; padding: 10px 15px; box-sizing: border-box;  font-size: 1em;text-align:center; line-height:2;  }
	.pageTitle h1 { float: none; width:100%; font-size: 1.2em; text-align:center;  }
	
	section.mainContent { margin: 15px auto; }
	
	footer  { height: auto; padding: 10px 15px 15px 15px; }
	
	.newlettertop img { width: 90%; }
	
	aside.notification h3 { font-size: 1.2em; }
	
	.hand1 { left: 1%; top: 15px; }
	.hand2 { display:none; }
	.hand3 { left: 12%; top: 40px; }
	.hand4 { right: 25%; top: 120px; }
	.hand5 { right: 12%; top: 65px; }
	.hand6 { right: 2%; top: 0px; }
}

@media screen and (max-width:400px) {
	
	.hand5 { right: 3%; top: 5px; }
	.hand3, .hand4, .hand6 { display:none; }
	
	#carousel { width:95%; margin: 0 auto; height: auto; }	
}