/* Table of Contents
==================================================
01. RETINA STYLES
02. BASE STYLES (1140px)
03. #DESKTOP (960px)
04. #Tablet (Portrait)
05. #Mobile (Portrait)
*/


/*
=============================================== 01. RETINA STYLES ===============================================
*/
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
	body nav select {background:#FAFAFA url(../images/select-arrow@2x.png) center right no-repeat; background-size:contain;}
}
/* IE7-IE8 Fixes*/
.lt-ie9	body nav select {background: url(../images/select-arrow.png) center right no-repeat;}


/*
=============================================== 02. BASE STYLES (1140px) ===============================================
*/
/* Note: Design for a width of 1040px */
html {-webkit-text-size-adjust: none;}	/* Removes webkit font resizing */ 
body {max-width:100%; width:100%; float: none; background-color: white;}
img {max-width:100%; height: auto; }
#main-navigation-mobilestonehill {display: none;}

/*
=============================================== 03. #DESKTOP (960px) ===============================================
*/
/* Note: Design for a width of 960px */
@media only screen and (min-width: 959px) and (max-width: 1190px) {
	
	#main .width-container { width:90%; }
    header .width-container { width:90%; }
    .width-container { width:90%; }
	.sf-menu a, ul.sub-menu li a { padding-right:31.5px;padding-left:31.5px;}
    img {float: none;margin: 0 auto;}
    h2 {font-size:40px;}
    .homepage-content-section-stonehill h2:before, .homepage-content-section-stonehill h2:after {top: 19px;}
    h1 {font-size: 68px;}
    h3, .about #main h3, .visit #main h3, .blog #main h3, .contact #main h3 {font-size: 30px;}
    h4, .events-homepage-stonehill div h4 {font-size:24px;}
    h5 {font-size: 20px;}
    h6 {font-size: 16px;}
    .about p, .visit p, .blog p, .contact p {font-size: 14px;}
    .home p, p {font-size: 16px;}
    .button-style-stonehill {font-size: 10px;}
}


/*
=============================================== 04. #Tablet (Portrait) ===============================================
*/
/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
	#main .width-container { width:92%;}
    header .width-container { width:92%;}
    .width-container { width:92%;}
	
    /*----- NAVIGATION -----*/
    .sf-menu a, ul.sub-menu li a { padding-right:22px; padding-left:22px; font-size: 14px;}
	.sf-menu .sf-sub-indicator {font-size: 10px;}
    #homepage-footer-nav-stonehill li a {padding: 0 21px;}
    
    /*----- FONT SIZE -----*/
    h2 {font-size:28px}
    .homepage-content-section-stonehill h2:before, .homepage-content-section-stonehill h2:after {top: 16px;}
    .full-page-width-stonehill h2:before, .full-page-width-stonehill h2:after {top: 14px;}
    h1 {font-size:45px;}
    h3, .about #main h3, .visit #main h3, .blog #main h3, .contact #main h3 {font-size: 30px;}
    h4, .events-homepage-stonehill div h4 {font-size:25px;}
    h5 {font-size: 18px;}
    h6 {font-size: 16px;}
    .hover-bottle-stonehill h6 {font-size: 13px;}
    .bottle-button-stone-hill {padding: 10px 0px;}
    .visit .button-style-stonehill {padding: 10px 68px;}
    
    p, .home p.price-stonehill, .home p, .about p, .visit p, .blog p, .contact p {font-size: 14px;}
	
	body header .tp-caption.pro-button-slider.rev-btn.video-btn-pro {
		display: none !important;
	}

	.tasting-room-text-stonehill button {
		margin-top: 0;
	}	
    
    /*----- GENERAL STYLES -----*/
    #our-story-stonehill ul {margin:0;}
    .hover-bottle-text {margin: 20% 0;}
    .about-content-box-stonehill {position: relative; overflow: hidden;}
    .about .float-right-stonehill {float: right;}
    .float-left-stonehill {float: left;}
    .map-stonehill, #map-progression iframe  {height: 539px;}
    #about-img-1, #about-img-5 {overflow: hidden;}
    #about-img-1 img, #about-img-5 img {height: auto; width: auto; max-width: none;}
}
 
/*
=============================================== 05. #Mobile (Portrait) ===============================================
*/
/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
	#main .width-container { width:95%;}
    header .width-container { width:95%;}
    .width-container { width:95%;}
    .visit #main .width-container, .contact #main .background-dark-stonehill .width-container {width: 95%;}
    
    #navigation {display: none;}
    #center-navigation-pro {display: none;}
    #mobilenav-stonehill {display: block;}
    #homepage-footer-nav-stonehill li a {padding: 0 7px; font-size: 14px;}
    
    .full-page-width-stonehill img {max-width: none; width: 200%;}
    .header-image-stonehill img {max-width: none; width: 150%;}
    .header-image-stonehill h1 {margin-left: 5%;}
    .full-page-width-stonehill, .header-image-stonehill{overflow: hidden;}
    .social-ico-nav {float: none; margin-left: 7px;}
    .shopping-cart {float: none;}
    #our-story-stonehill ul {margin: 0;}
    #our-story-stonehill ul li {float:none; padding:0;max-width: none;}
    #our-story-stonehill ul li, #our-story-stonehill ul li h5, #our-story-stonehill ul li h6 {text-align: center;}
    #our-story-stonehill ul li h5{margin-top: 20px;}
    #our-wines-stonehill > ul > li {max-width: 100%;}
    .events-homepage-stonehill, .events-homepage-stonehill>div, .visit-content-box-stonehill {width: 100%;}
    .about-content-box-stonehill .text-container-stonehill {width: 90%;}
    .about-content-box-stonehill, .page-paragraph-style-second, .page-paragraph-style-second .text-container-stonehill {margin-top: 50px;}
    .page-paragraph-style-second .text-container-stonehill {margin: 50px 3% 0 3%;}
    
    #about-img-1, #about-img-1 img, #about-img-2, #about-img-3, #about-img-4, #about-img-5, #about-img-5 img {width: 100%;}
    
    
    .map-container-stonehill {width: 100%; height: 50%;}
    .map-content-text-stonehill {width: 100%; height: auto;}
    #map-progression iframe {height: 400px;}
    .opening-hours-stonehill tr td {padding: 3px 10px;}
    .location-hours-stonehill {padding: 7px 0 0 0;}
    
    .blog-left-container {width: 100%;}
    .blog-right-container {width: 95%;}
    .comment-link-stonehill {float: right;}
    .blog-content-box-stonehill {margin-bottom: 10%;}
    .contact #main .background-dark-stonehill {padding-bottom: 7px;}
    .single-wine-img-stonehill {width: 100%;}
    .single-wine-details-stonehill {width: 100%;; margin: 0 2% 0 2%;}
    
    .next-prev-page-button {margin: 53px auto;}
    
    .button-style-stonehill, input.wpcf7-submit {padding: 7px 50px;}
    .wpcf7 {margin: 0 5% 0 0;}
    
	.hover-bottle-button a {width: 40%;}
	
	body header .tp-caption.pro-button-slider.rev-btn.video-btn-pro {
		display: none !important;
	}	
	
	.blog-content-text-stonehill {
		width: 80%;
	}
	
    #contact-container-pro {width: 100%;}
    
    /*----- FONT SIZE -----*/
    h2 {font-size:28px}
    .homepage-content-section-stonehill h2:before, .homepage-content-section-stonehill h2:after, .full-page-width-stonehill h2:before, .full-page-width-stonehill h2:after {top: 13px;}
    h1 {font-size:42px;}
    h3, .about #main h3, .visit #main h3, .blog #main h3, .contact #main h3 {font-size: 22px;}
    h4, .events-homepage-stonehill div h4 {font-size:24px;}
    h5 {font-size: 22px;}
    h6 {font-size: 16px;}
    h6 a {font-size: 15px;}
    .about p, .visit p, .blog p, .contact p {font-size: 14px;}
    .home p.price-stonehill, .home p {font-size: 16px;}
    h2 {font-size: 28px;}