/*
 * responsive.custom.css is for custom media queries that are not set via the
 * theme settings, such as cascading media queries.
 *
 * By default all the other responsive stylesheets used in Adaptivetheme use a
 * "stacking method", however cascading media queries use a waterfall method so
 * you can leverage the cascade and inheritance for all browsers that support
 * media queries.
 *
 * @SEE http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack
 *
 * NOTE: this file loads by default, to disable go to your theme settings and
 * look under the "CSS" settings tab.
 */

/*
 * Really small screens and up
 */
/* @media only screen and (min-width: 220px) {} */

/*
 * Smalltouch sizes and up
 */
/* @media only screen and (min-width: 320px) {} */

/*
 * Smalltouch sizes and down
 */

 @media only screen and (max-width: 1200px){
 		#site-name {
 		font-size: 2.2em;
 		margin-left: 15px;
 	}
 }


 @media only screen and (max-width: 1175px) {
 
 	ul.nice-menu li, ul.nice-menu-down li.menuparent {
 		margin: 0 5px;
 	}
 
 }
 
  @media only screen and (max-width: 1125px) {
  	#site-name {
  		font-size: 2em;
  		margin-top: 1.4em;
  	}
  }
 
 @media only screen and (max-width: 1095px) {
 	
 	.region-header {
 		width: 410px;
 	}
 	
 	#site-name{
 		font-size: 1.8em;
 		margin-top: 2em;
 	}
 	
 	#menu-bar{
 		top: 50px;
 	}
 
 }
 
 
 @media only screen and (max-width: 1024px) {
 	#menu-bar{
 		border-bottom: none;
 		right: 50px;
 	}
 	
 	.responsive-menus.responsified span.toggler{
 		padding: 1px 10px;
 	}
 	
 	/*.responsive-menus.responsified.responsive-toggled.absolute .responsive-menus-simple{
 		width: 300px;
 		right: 0;
 		display: block;
 	}
 	*/
  #block-nice-menus-1 {
 		background-color:purple;
 	}
 	
 	#highlightLink a {
 		color: #41273b;
 	}
 	
 	#highlightLink {
 		padding: 0;
 	}
 	
 	  	.DisChargeOverlay, .diversityAnalyticsOverlay {
  		bottom: 83px;
  		height: 122px;
  	}
 
 }
 
  @media only screen and (max-width: 960px){
  	.frontSlideshow .views-field-body{
  		width: 60%;
  	}
  }
 
   @media only screen and (max-width: 870px){
  	.frontSlideshow .views-field-body{
  		font-size: 1.2em;
  	}
  
  	
  }
 
    @media only screen and (max-width: 745px){
  	.frontSlideshow .views-field-body{
  		font-size: 1em;
  	}
  	
  		.DisChargeOverlay, .diversityAnalyticsOverlay {
  		bottom: 108px;
  		height: 200px;
  	}
  }
 
   @media only screen and (max-width: 640px){
  	.frontSlideshow .views-field-body{
  		width: 100%;
  		bottom: 0;
  		padding: 0 .5em;
  	}
  	
  	.frontSlideshow .Right .views-field-body{
  		right: 0;
  	}
  	
  	.frontSlideshow .Left .views-field-body{
  		left: 0;
  	}
  	
  	.frontSlideshow .views-field-body p{
  		margin-bottom: 0;
  	}
  	
  	#block-views-slideshow-block .block-inner{
  		margin-left: 0;
  		margin-right: 0;
  	}
  	
  	.flexslider {
  		border: none;
  	}
  	
  		#menu-bar{
		position: relative;
		top: 0px;
		right: 0;
	}
	
	.responsive-menus.responsified span.toggler{
		box-shadow: none;
		border-radius: 0;
	}
	
	.responsive-menus.responsified.responsive-toggled.absolute .responsive-menus-simple{
		width: 100%;
	}
	
	#site-name{
		width: 100vw;
		text-align: center;
		margin-left: 0;
	}
	
  }
 
  @media only screen and (max-width: 525px) {
	
	#menu-bar{
		position: relative;
		top: 0px;
		right: 0;
	}
	
	.responsive-menus.responsified span.toggler{
		box-shadow: none;
		border-radius: 0;
	}
	
	.responsive-menus.responsified.responsive-toggled.absolute .responsive-menus-simple{
		width: 100%;
	}
	
	#header, .site-logo{
		width: 100%;
	}
	
	#siteName{
		font-size: 2em;
	}
	
	.region-header{
		width: 470px;
	}
	
	.DisChargeOverlay, .diversityAnalyticsOverlay {
  		height: 225px;
  	}
	  
}
 
@media only screen and (max-width: 480px) {
  
  #siteName{
  	font-size: 1.5em;
  }
  
  .region-header{
  	width: 100%;
  }
  
  .region[class*="float-blocks"] .block {
    float: none;
    width: 100%;
  }
  
  .frontSlideshow .views-field-body{
  	bottom: -50px;
  }
  
  .flex-control-nav{
  	bottom: -90px;
  }
  
	.diversityAnalyticsImage {
		width: 100%;
		display: block;
	}
	
	.diversityAnalyticsImage img {
		width: 100vw;
	}
	
	.DisChargeOverlay, .diversityAnalyticsOverlay {
		height: 200px;
		bottom: 90px;
	}
	
	.diversityAnalyticsImage p, .diversityAnalyticsOverlay p {
		margin: 0;
	}
	
	.diversityAnalyticsImage {
		margin-top: -80px; /*Using this negative margin to make the dis charges title card closer to employment diversity. changing hight of the image breaks blocks of the bottom. */
	}
}

/*
 * Tablet sizes and up
 */
/* @media only screen and (min-width: 768px) {} */

/*
 * Desktops/laptops and up
 */
/* @media only screen and (min-width: 1025px) {} */