﻿/* CSS Document */

/*-------------------------------------------

      Media Queries
-------------------------------------------*/

@media screen and (max-width: 1170px) {

.wrap {
    margin: 0 auto;
    width: 970px;
}

.carousel { height: 273px; overflow: hidden; background: #fff; }
		.slide-caption { position: relative; z-index: 10; float: right; width: 300px; min-height: 280px; padding: 53px 31px 0; }
			.slide-caption h2 { margin-bottom: 25px; color: #fff; font-size: 1.8em; line-height: 1.21; }

			.slide-callout { width: 706px; }
				.slide-callout p { max-width: 590px; min-height: 15px; margin-bottom: 4px; padding: 7px 16px 5px 11px; font-size: 1.1em; line-height: 1.4; }
					.slide-callout .more a { min-height: 15px; padding: 7px 8px 5px 8px; font: italic 1.1em Georgia, "Times New Roman", serif; }
.carousel-image img { width: 670px; height: 273px; } 

.carousel-controls { bottom: 34px; margin-left: -352px; } 




@media screen and (min-width: 850px) and (max-width: 1016px) {
  .header .logo, h1, .intro p, .breadcrumb  { margin-left: 10px; }
	form#search { display:block; }
		}
@media screen and (min-width: 851px) {
  html {
    min-width: 978px; } 
  #filter-drop { width: 978px !important; }
  .header-mobile { display: none; } 
  .header-mobile a.search-trigger, header-mobile a.utility-trigger {
    display: none; } 
    }
@media screen and (min-width: 651px) and (max-width: 850px) {
  html {
    min-width: 768px; }

  .wrap { width: 750px; }
  #filter-drop { width: 768px !important; }
  
}
@media screen and (min-width: 401px) and (max-width: 650px) {
  html {
    min-width: 480px; }

  .wrap {
    width: 480px; }

}

@media screen and (min-width: 651px) {
  .mobile-nav {
    display: none; } }
@media screen and (max-width: 850px) {

.carousel { height: 273px; overflow: hidden; background: #fff; }
		.slide-caption { position: relative; z-index: 10; float: right; width: 295px; min-height: 275px; padding: 53px 31px 0; }
			.slide-caption h2 { margin-bottom: 25px; color: #fff; font-size: 1.5em; line-height: 1.21; }

			.slide-callout { width: 706px; }
				.slide-callout p { max-width: 590px; min-height: 15px; margin-bottom: 4px; padding: 7px 16px 5px 11px; font-size: 1.1em; line-height: 1.4; }
					.slide-callout .more a { min-height: 15px; padding: 7px 8px 5px 8px; font: italic 1.1em Georgia, "Times New Roman", serif; }
.carousel-image img { width: 475px; height: 273px; } 

.carousel-controls { bottom: 34px; margin-left: -352px; } 





@media screen and (max-width: 650px) {
  


.carousel { height: 520px; overflow: hidden; background: #fff; }
		.slide-caption { position: relative; z-index: 10; width: 480px; min-height: 200px; padding: 0; 
      margin-top: 218px;
      background-position: bottom left;
      background-repeat: no-repeat; }
			.slide-caption h2 { margin: 15px; color: #fff; font-size: 2.0em; line-height: 1.4; }

			.slide-callout { width: 465px; padding-left: 15px; }
				.slide-callout p { max-width: 440px; min-height: 15px; margin-bottom: 4px; padding: 7px 6px 5px 8px; font-size: 1em; line-height: 1.4; overflow: hidden; }
					.slide-callout .more a { display: none; }
.carousel-image img { width: 480px; height: 320px; } 
.carousel .prev-image { left: -480px; }
.carousel .next-image { right: -480px; }

.carousel-controls { bottom: 24px; margin-left: -50px; } 

}

@media screen and (max-width: 400px) {
	
html { min-width: 320px; }
.wrap { width: 320px; } 

.carousel { height: 343px; overflow: hidden; background: #fff; }
		.slide-caption { position: relative; z-index: 10; width: 320px; min-height: 130px; padding: 0; 
      margin-top: 213px;
			background-image: url(../screen/vignette-480.png);
      background-position: bottom left;
      background-repeat: no-repeat; }
			.slide-caption h2 { margin: 10px 10px 10px 15px; color: #fff; font-size: 2em; line-height: 1.4; }

			.slide-callout { width: 310px; padding-left: 10px; }
				.slide-callout p { display: none; }
.carousel-image img { width: 320px; height: 213px; } 
.carousel .prev-image { left: -320px; }
.carousel .next-image { right: -320px; }

.carousel-controls { bottom: 18px; margin-left: -50px; } 

}
