/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html { color: #fff; font-size: 62.5%; line-height: 1.4; background: #000; font-family: 'Roboto Condensed', sans-serif; letter-spacing: 2px; }
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.shim { clear: both; }
aside { display: none; }

@-webkit-keyframes animateNav {
    from { opacity: 0; }
    to { opacity: 1; }
}
@-moz-keyframes animateNav {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes animateNav {
    from { opacity: 0; }
    to { opacity: 1; }
}
header { position: fixed; z-index: 1000; left: 0; top: 0; height: 100%; width: 330px; background: url(../img/sideBarBg.png) no-repeat 0 bottom; -webkit-animation: animateNav 3s ease; -moz-animation: animateNav 3s ease; animation: animateNav 3s ease; }
.logo { background: rgba(80,83,89,.3); display: block; margin: 25% 0 18px 0;/*30% 0 18px 0*/ padding: 20px 40px; /*margin: 60% 0 18px 36px;*/ }
.logo:hover { background: rgba(80,83,89,.6); }
.logo img { max-width: 100%; }
nav { background: rgba(80,83,89,.2); max-width: 230px; padding: 16px 20px; font-weight: bold; }
nav ul, .icons ul { list-style: none; padding: 0; margin: 0; }
nav a { color: #fff; display: block; text-decoration: none; padding: 3px 16px; font-size: 2.2rem; }
nav a:hover { background: rgba(80,83,89,.4); }
.icons { position: absolute; bottom: 110px;/*80px*/ left: 30px; }
.icons li > a { display: block; width: 58px; height: 58px; background: url(../img/icons.png) no-repeat 0 0 #000; margin-top: 12px; border-radius: 60px; }
.icons li > a:hover { background-color: rgba(0,0,0,.5); }
li.fb > a { background-position: 0 0; }
li.tw > a { background-position: 0 -70px; }
li.mail > a { background-position: 0 -140px; }
li.insta > a { background-position: 0 -210px; }
.info { position: absolute; bottom: 0; left: 0; width: 250px; }
li.info > a { background-position: 0 -280px; }
.info > a, .mobileMenu > a { text-decoration: none; color: #fff; font-size: 2.2rem; font-weight: bold; display: block; padding: 10px 20px;/*20px*/ }
.info > a:hover, .mobileMenu > a:hover { background: rgba(0,0,0,.4); }
.info div, .mobileMenu div { display: none; position: absolute; bottom: 0; left: 70px; width: 250px; padding: 20px; background: #6f726c; background: -ms-linear-gradient(top, #6f726c 0%,#b3b1ab 100%); background: linear-gradient(to bottom, #6f726c 0%,#b3b1ab 100%); }
.info .close, .mobileMenu .close { background: url(../img/close.png) no-repeat top right; width: 23px; height: 23px; position: absolute; top: 0; right: 0; overflow: hidden; text-indent: -999em; }
.info .close:hover, .mobileMenu .close:hover { background: url(../img/close.png) no-repeat top right; }
.info div h3, .mobileMenu div h3 { text-transform: uppercase; font-size: 2.2rem; margin: 0 0 10px; }
.info div h4, .mobileMenu div h4 { font-size: 1.8rem; margin: 0; }
.info div p, .mobileMenu div p { font-size: 1.6rem; margin-top: 0; letter-spacing: 1px; }
.info div a, .mobileMenu div a { color: #fff; text-decoration: none; }
.info div a:hover, .mobileMenu div a:hover { background: #999; }
.info .emailList { font-size: 1.8rem; display: block; margin: 0; /*text-transform: uppercase;*/ font-weight: bold; }

.bottomNav, .popNav { position: fixed; bottom: 20%; left: 20%; z-index: 900; opacity: 0; }
.bottomNav.bottom { bottom: 0; }
.boxContainer { position: relative; text-align: center; }
.line { vertical-align: middle; }
.line { display: inline-block; background: url(../img/lineVert.png) no-repeat 0 0; width: 5px; height: 521px; margin: 0 30px; position: relative; top: -1000px; }
.box { display: inline-block; width: 340px; box-shadow: 0 5px 54px rgba(0,0,0,.13); text-align: left; vertical-align: bottom; }
.box h2 { text-transform: uppercase; margin: 0; font-size: 3.4rem; text-align: center; }
.box h2 a { color: #fff; text-decoration: none; padding: 30px; display: block; }
.box.active h2 a { background: url(../img/close.png) no-repeat top right; position: relative; z-index: 100; }
.box p, .box li { font-size: 2.6rem; line-height: 4.1rem; margin: 1.9rem 0; }
.box ul { margin: 0; padding: 0; list-style: none; }
.box li { margin: 0 0 1rem; position: relative; }
.box li > a { color: #1c1c1c; text-decoration: none; padding: 5px 13px; border: 2px solid rgba(255,255,255,0); width: 100%; display: block; box-sizing: border-box; }
.box li:hover > a, .foiLink.active { border: 2px solid #fff; background: #ccaf69; }
.innerBox { padding: 0 20px 30px; display: none; }
.innerBox.nano { width: 270px; height: 650px; padding: 0 26px; margin-bottom: 30px; }
.innerBox a { opacity: 0; }
.active .innerBox a { opacity: 1; }
.foiContainer { display: none; position: absolute; left: 100%; bottom: 25px; border-bottom: 4px solid #fff; }
.foiBox { position: relative; bottom: -40px; background: #c7c6c2; width: 300px; padding: 30px; margin-left: 20px; background: -ms-linear-gradient(top, #c7c6c2 0%,#f4f3f2 100%); background: linear-gradient(to bottom, #c7c6c2 0%,#f4f3f2 100%); }
.foiBox h4 { font-size: 2.5rem; margin: 0 0 1rem; text-transform: uppercase; color: #3e3e3d; line-height: 3rem; float: left; }
.foiBox h4 span { font-size: 2.3rem; text-transform: none; letter-spacing: 1px; }
.foiBox .join { float: right; text-decoration: none; color: #3e3e3d; padding: 0 4px; border: 2px solid #fff; font-weight: bold; }
.foiBox .join:hover { background: #f4f3f2; }
.foiBox ul { list-style: disc; padding-left: 2rem; }
.foiBox p, .foiBox li { font-size: 2rem; line-height: 3rem; margin: 1.4rem 0 0; color: #3e3e3d; letter-spacing: -.25px; clear: both; }
.foiBox li { margin: 0; }
.box .memberLink { font-size: 2rem; text-align: center; margin: 0; }
.box .memberLink a { color: #333; }
.orange { background: rgba(215,181,102,.85); }
.orange.active { background: rgba(215,181,102,1); }
.orange h2 a:hover { background-color: rgba(215,181,102,1); }
.blue { background: rgba(181,195,196,.85); margin: 0 70px; }
.blue h2 a:hover { background-color: rgba(181,195,196,1); }
.green { background: rgba(182,184,98,.85); }
.green.active { background: rgba(182,184,98,1); }
.green h2 a:hover { background-color: rgba(182,184,98,1); }
.eventsBox {  }
.eventsBox h3, .eventsBox h4 { font-size: 2.4rem; letter-spacing: 1px; margin: 0; }
.eventsBox h4 { color: #3e3e3d; }
.eventsBox p { font-size: 2rem; line-height: 3rem; color: #3e3e3d; letter-spacing: -.25px; margin-top: 0; }
.eventsBox a { color: #3e3e3d; }
#shipmap { display: none; position: fixed; width: 100%; height: 100%; background: rgba(255,255,255,.8) url(../img/foiMap.png) center/auto 80% no-repeat; z-index: 1000; }
#shipmap a { float: right; width: 33px; height: 33px; background: url(../img/close.png) top right no-repeat; overflow: hidden; text-indent: -999em; }

.popNav { width: 1383px; }
.popNav .boxContainer { background: url(../img/lineHorz.png) no-repeat center; }
.popNav .box { opacity: 0; padding: 30px; width: auto; max-width: 280px; vertical-align: bottom; }
.popNav .blue { margin: 0; }

.segment { background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; height: 100%; width: 100%; position: relative; }
@-webkit-keyframes animateHome {
    from { background-position: 0 0; opacity: 0; }
    to { background-position: 0 100%; opacity: 1; }
}
@-moz-keyframes animateHome {
    from { background-position: 0 0; opacity: 0; }
    to { background-position: 0 100%; opacity: 1; }
}
@keyframes animateHome {
    from { background-position: 0 0; opacity: 0; }  
    to { background-position: 0 100%; opacity: 1; }
}

.textBox { opacity: 0; padding: 30px; width: 340px; position: absolute; right: 10%; bottom: 15%; background: #c7c6c2; background: -ms-linear-gradient(top, #c7c6c2 0%,#f4f3f2 100%); background: linear-gradient(to bottom, #c7c6c2 0%,#f4f3f2 100%); }
.textBox.wide { width: 600px; }
.textBox h3 { font-size: 3.5rem; margin: 0; text-transform: uppercase; }
.textBox h4 { font-size: 1.8rem; line-height: 3.6rem; color: #8e724a; margin: 0; }
.textBox h4 + p { margin-top: 0; }
.textBox p, .textBox li { font-size: 2rem; line-height: 3.6rem; margin-top: 1.4rem; color: #1c1c1c; letter-spacing: -.25px; }
.textBox ul { padding-left: 2em; margin: 0; }
.textBox li { margin: 0; line-height: 3rem; }

main { height: 100%; width: 100%; position: absolute; z-index: 1; }
main > div { background-size: cover;/*auto 100%*/ background-position: center; background-repeat: no-repeat; height: 100%; width: 100%; position: relative; }
#home { background-image: url(../img/bgHome.jpg); background-position: 0 100%; /*display: table;*/ -webkit-animation: animateHome 5s ease; -moz-animation: animateHome 5s ease; animation: animateHome 5s ease; }
#about { background-image: url(../img/bgAbout.jpg); }
  #about > div { max-width: 80%; margin: 0 0 0 330px; position: absolute; bottom: 24%; height: 76%; width: 80%; }
  #aboutListContainer { border-left: 50px solid transparent; border-right: 50px solid transparent; position: absolute; bottom: 0; height: 800px; overflow: hidden; width: 100%; box-sizing: border-box; }
  #aboutList { width: 1866px; padding: 0 120px; position: absolute; bottom: 10px; left: -528px; }
  #aboutList > div { float: left; position: relative; }
  #aboutList a { font-weight: bold; color: #fff; text-decoration: none; padding: 1rem; margin: 0 .5rem; font-size: 2.5rem; display: block; }
  #aboutList .empty { width: 88px; height: 55px; }
  #about .active > a, #aboutList a:hover { background: #4c4c4c; }
  .aboutSlide { display: none; opacity: 0; position: absolute; left: -120px;/*-143px*/ bottom: 80px; padding: 30px;/*40px*/ background: #c7c6c2; background: -ms-linear-gradient(top, #c7c6c2 0%,#f4f3f2 100%); background: linear-gradient(to bottom, #c7c6c2 0%,#f4f3f2 100%); }
  .aboutSlide h3 { font-size: 3.5rem; margin: 0; text-transform: uppercase; }
  .aboutSlide p { font-size: 2rem;/*2.4rem*/ line-height: 3.6rem;/*4rem*/ margin-top: 1.4rem; color: #1c1c1c; }
  .aboutSlide img { width: 268px; }
  .active .aboutSlide { /*display: block; opacity: 1;*/ }
  .yearLine { width: 6px; height: 54px; background: #fff; position: absolute; bottom: -37px; left: 50%; margin-left: -3px; }
  .arrow { position: absolute; bottom: 0; cursor: pointer; z-index: 100; }
  #aboutPrev { left: 0; }
  #aboutNext { right: 0; }
#wines, #wines2, #wines3, #wines4, #wines5, #wines6, #wines7 { background-image: url(../img/bgWines.jpg); }
  .wineContainer { width: 80%;/*70%*/ height: 84%; position: absolute; right: 1%;/*10%%*/ top: 4%; }
  .wineContainer > h3 { font-size: 2rem;/*3.5rem*/ margin: 0; text-transform: uppercase; color: #111; position: absolute; /*top: 10%;*/ left: -100px; }
  .wine { text-align: center; }
  .wine.oneUp { width: 45%; margin: 0 auto; }
  .wine.twoUp { width: 45%; float: left; }
  .wine.fourUp { width: 20%; float: left; margin-left: 5%; }
  .wine.twoUp.left { margin-right: 10%; }
  .wine.fourUp.left { margin-left: 0; }
  .wine a { text-decoration: none; }
  .wine img { width: 100%;/*75%*/ }
  .wine h4 { font-size: 3rem; color: #3e3e3d; margin: -2em 0 0;/*-2.5em 0 0*/ text-transform: uppercase; font-weight: normal; letter-spacing: -.5px; }
  .wine p { color: #111; font-size: 2rem; margin: 0; letter-spacing: -.5px; }
  .winesBtn { border: 1px solid #999; display: inline-block; padding: 2px 10px; margin-top: 10px; }
  .winesBtn a { font-size: 3rem; text-transform: uppercase; color: #3e3e3d; text-decoration: none; letter-spacing: -.5px; }
  .winesBtn a:hover { background: #ccc; }
  .winesBtn span { font-size: 3rem; color: #787877; font-weight: bold; }
  .comingSold { border-top: 2px solid #959799; }
  .comingSold h3 { font-size: 2rem; margin: 0; text-transform: uppercase; color: #111; }
  .comingSold ul { text-align: center; list-style: none; text-transform: uppercase; color: #111; font-size: 1.4rem;/*1.6rem*/ }
  .comingSold li { margin-bottom: 15px;/*20px*/ }
  .coming, .sold { float: left; width: 33%;/*49%*/ padding-top: 20px; box-sizing: border-box; }
  .coming { border-right: 2px solid #959799; }
  .sold { padding-left: 40px; width: 66%; }
  .sold ul { /*-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px;*/ }
  .sold > ul > li > a { text-decoration: none; font-weight: bold; font-size: 18px; }
  .sold ul li { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
  .sold ul ul { display: none; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; }
  .sold a { color: #8e724a; }
#whereToFind {  background-image: url(../img/bgFind.jpg); }
  .findList { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; }
  .findList h3 { font-size: 2rem; margin: 0; text-transform: uppercase; color: #111;  -webkit-column-span: all; -moz-column-span: all; column-span: all; }
  .findList ul { text-align: center; list-style: none; text-transform: uppercase; color: #111; font-size: 1.4rem; margin-bottom: 20px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
  .findList ul li { margin-bottom: 10px; }
  .findList a { color: #8e724a; }
#winemaking { background-image: url(../img/bgWinemaking.jpg); }
#vineyards { background-image: url(../img/bgVineyard.jpg); }
  #vineyardMap { position: absolute; right: -40px; z-index: 100; top: -320px; }
  #map { position: absolute; right: 0; top: 20px; z-index: 110; }
  #map a { width: 36px; height: 36px; background: #adaf67; border-radius: 36px; display: block; overflow: hidden; text-indent: -999em; position: absolute; box-shadow: 2px 4px 10px rgba(0,0,0,.2); }
  #map a:hover { background: #949659; }
  #map a.active { background: #949659; }
  #map a.yakimaValley { right: 166px; bottom: 90px; }
  #map a.wallaWalla { right: 88px; bottom: 52px; }
  #map a.rattlesnakeHills { right: 208px; bottom: 103px; }
  #map a.snipesMountain { right: 194px; bottom: 63px; }
  #map a.horseHeaven { right: 152px; bottom: 50px; }
  #map a.columbiaValley { right: 118px; bottom: 95px; }
  .vineyard { padding: 30px 40px 40px; position: absolute; top: 0; right: 420px; z-index: 105; background: #efeeed; background: -ms-linear-gradient(top, #efeeed 0%,#cdcbc8 100%); background: linear-gradient(to bottom, #efeeed 0%,#cdcbc8 100%); }
  .vineyard img { width: 300px; }
  .vineyard h3 { font-size: 2.4rem; color: #1c1c1c; margin: 0 0 10px; letter-spacing: 0; text-transform: none; }
  .vineyard h4 { font-size: 2rem; color: #1c1c1c; margin: 10px 0 0; }
  .vineyard h5 { font-size: 2rem; color: #cfb26d; margin: 0; letter-spacing: 0; }
  .vineyard p { font-size: 1.7rem; color: #1c1c1c; margin: 0; line-height: 2.4rem; }
#tasting { background-image: url(../img/bgTasting.jpg); }
  #tasting a { color: #1c1c1c; }
  .mapIt { display: inline-block; background: none;/*#3e3948*/ color: #1c1c1c;/*#fff*/ text-decoration: none; padding: 2px 10px; border: 1px solid #fff; }
  .mapIt:hover { background: #ccc;/*#27252e*/ }
#sustain { background-image: url(../img/bgSustainability.jpg); }

header, nav, nav ul, nav li, a, .logo img, #aboutList, .innerBox a {
    -webkit-transition-duration: .5s;
       -moz-transition-duration: .5s;
        -ms-transition-duration: .5s;
         -o-transition-duration: .5s;
            transition-duration: .5s;
    }

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

/* ==================================
    Heights
=================================== */
@media only screen and (max-height: 1000px) {
  #aboutListContainer { height: 700px; }
  .aboutSlide p { font-size: 1.8rem;/*2rem*/ line-height: 3rem;/*3.4rem*/ margin-top: 0; }

  .wine img { width: 94%;/*54%*/ }
  .wine h4 { font-size: 2.4rem; }
  .wine p { font-size: 1.8rem; }
  .winesBtn a, .winesBtn span { font-size: 2.4rem; }
}

@media only screen and (max-height: 940px) {
  .icons li > a { width: 29px; height: 29px; background-size: 29px auto; }
  li.tw > a { background-position: 0 -35px; }
  li.mail > a { background-position: 0 -70px; }
  li.insta > a { background-position: 0 -105px; }
  li.info > a { background-position: 0 -140px; }
}

@media only screen and (max-height: 808px) {
  .icons li { float: left; margin-right: 5px; }
}

@media only screen and (max-height: 790px) {
  .textBox p, .textBox li { line-height: 2.4rem; }

  .innerBox.nano { height: 550px; }
}

@media only screen and (max-height: 768px) {
  main > div#wines { height: 45%; }
  main > div#wines .wineContainer { top: 15%; }
  main > div#wines2, main > div#wines3 { height: 40%; }
}

@media only screen and (max-height: 730px) {
  #about > div { height: 80%; bottom: 20%; }
  .innerBox.nano { height: 450px; }

  .findList ul li { margin-bottom: 6px; }
}

@media only screen and (max-height: 690px) {
  .logo { margin-top: 18%; }
}

@media only screen and (max-height: 670px) {
  .logo { margin: 10% 0 0; }
}

@media only screen and (max-height: 620px) {
  nav a { padding: 0 16px; font-size: 2rem; }
}

/* ==================================
    Widths
=================================== */
@media only screen and (max-width: 1890px) {
  .winesBtn a, .winesBtn span { font-size: 2rem; }
}

@media only screen and (max-width: 1680px) {
  .popNav .box { max-width: 200px; }
  .popNav .box h2 { font-size: 2.2rem; }
  .popNav .box p { font-size: 2rem; line-height: 3rem; }

  #about > div { width: 75%; }
  #aboutList { left: -792px; }

  .textBox { right: 5%; }
  .textBox h3 { font-size: 3rem; }
  .textBox p { font-size: 1.8rem; line-height: 3rem; }

  .vineyard h3 { font-size: 2.4rem; color: #1c1c1c; margin: 0 0 10px; letter-spacing: 0; text-transform: none; }
  .vineyard h4 { font-size: 2rem; color: #1c1c1c; margin: 10px 0 0; }
  .vineyard h5 { font-size: 2rem; color: #cfb26d; margin: 0; letter-spacing: 0; }
  .vineyard p { font-size: 1.7rem; color: #1c1c1c; margin: 0; line-height: 2.4rem; }

  .wine.fourUp.left { margin-left: 5%; }
  .wine h4 { font-size: 2rem; }
  .wine p { font-size: 1.6rem; }
  .winesBtn a, .winesBtn span { font-size: 1.6rem; }
}

@media only screen and (max-height: 780px) {
  #vineyardMap { right: 0; top: -242px; }
  #map { width: 400px; }
  #map > img { max-width: 100%; }
  #map a.yakimaValley { right: 138px; bottom: 75px; }
  #map a.wallaWalla { right: 60px; bottom: 40px; }
  #map a.rattlesnakeHills { right: 178px; bottom: 88px; }
  #map a.snipesMountain { right: 168px; bottom: 48px; }
  #map a.horseHeaven { right: 122px; bottom: 38px; }
  #map a.columbiaValley { right: 87px; bottom: 82px; }

  .vineyard { top: 40px; right: 380px; }
  .vineyard h3 { font-size: 2rem; color: #1c1c1c; margin: 0 0 10px; letter-spacing: 0; text-transform: none; }
  .vineyard h4 { font-size: 1.6rem; color: #1c1c1c; margin: 10px 0 0; }
  .vineyard h5 { font-size: 1.6rem; color: #cfb26d; margin: 0; letter-spacing: 0; }
  .vineyard p { font-size: 1.4rem; color: #1c1c1c; margin: 0; line-height: 2rem; }
}

@media only screen and (max-width: 1500px) {
  .popNav  { width: 982px; left: 26%; }
  .line { height: 420px; margin: 0 20px; }

  .blue { margin: 0 20px; }

   #aboutList { left: -1056px; }
}

@media only screen and (max-width: 1400px) {
  .bottomNav { left: 30%; }
  .box { width: 240px; }
  .box h2 { font-size: 2rem; }
  .box p, .box li { font-size: 1.4rem; line-height: 2rem; }

  .eventsBox h3, .eventsBox h4 { font-size: 1.6rem; }

  .innerBox.nano { width: 174px; }

  .foiContainer { bottom: 15px; }
  .foiBox h4 { font-size: 1.8rem; line-height: 2rem; }
  .foiBox h4 span { font-size: 1.6rem; }
}

@media only screen and (max-width: 1350px) {
  .popNav  { width: 800px; left: 26%; }
  .popNav .box { max-width: 150px; }
  .popNav .box h2 { font-size: 1.6rem; }
  .popNav .box p { font-size: 1.4rem; line-height: 2rem; }
  .line { height: 320px; margin: 0 10px; }

  #about > div { width: 68%; }
  .aboutSlide h3 { font-size: 3rem; }
  .aboutSlide p { font-size: 1.6rem; line-height: 2rem; }

  .wine h4 { font-size: 1.6rem; }
  .wine p { font-size: 1.4rem; }
  .winesBtn a, .winesBtn span { font-size: 1.2rem; }
}

@media only screen and (max-width: 1250px) {
  .bottomNav { left: 25%; }

  #aboutList { left: -1320px; }

  .wine.fourUp { width: 18%; }
  .wine.fourUp.left { margin-left: 12%; }
}

@media only screen and (max-width: 1100px) {
  .popNav { width: 720px; }
  .line { margin: 0 5px; }

  #about > div { width: 60%; }
  .aboutSlide { padding: 20px; left: -76px; }
  .aboutSlide img { width: 200px; }

  #vineyards .textBox { width: 290px; right: 3%; }
  #vineyardMap { top: -180px; right: 100px; }
  #map { /*right: -54px;*/ width: 306px; }
  #map img { max-width: 100%; }
  .vineyard { right: 230px; padding: 20px; }
  .vineyard img { width: 250px; }
  .vineyard h3 { font-size: 2rem; color: #1c1c1c; margin: 0 0 10px; letter-spacing: 0; text-transform: none; }
  .vineyard h4 { font-size: 1.6rem; color: #1c1c1c; margin: 10px 0 0; }
  .vineyard h5 { font-size: 1.6rem; color: #cfb26d; margin: 0; letter-spacing: 0; }
  .vineyard p { font-size: 1.4rem; color: #1c1c1c; margin: 0; line-height: 2rem; }
  #map a.yakimaValley { right: 129px; bottom: 69px; }
  #map a.wallaWalla { right: 53px; bottom: 35px; }
  #map a.rattlesnakeHills { right: 93px; bottom: 59px; }
  #map a.snipesMountain { right: 114px; bottom: 48px; }
  #map a.horseHeaven { right: 95px; bottom: 30px; }
  #map a.columbiaValley { right: 84px; bottom: 92px; }
}

@media only screen and (max-width: 1050px) {
  .blue { margin: 0 10px; }

  .innerBox.nano { width: 150px; }

  .box { width: 210px; }
  .box h2 { font-size: 1.6rem; }
}

@media only screen and (max-width: 1020px) {
  header .info, nav, .icons, .popNav, .bottomNav, main { display: none; }

  html { background: #333; background-image: url(../img/bgHome.jpg); background-position: bottom center; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; }
  aside { display: block; }

  header {  position: static; width: 100%; }
  .logo { text-align: center; margin: 0; padding: 40px; background: rgba(80,83,89,.7); }

  .orange, .orange .active { background: rgba(215,181,102,.95); }
  .blue { background: rgba(181,195,196,.95); margin: 0; }
  .green, .green .active { background: rgba(182,184,98,.95); }
  .mobileMenu > a:hover { background: none; }

  .mobileMenu { position: relative; bottom: auto; left: auto; width: 100%; border-top: 1px solid rgba(0,0,0,.3); }
  .mobileMenu div { position: static; width: 100%; box-sizing: border-box; background: none; border-top: 1px solid rgba(255,255,255,.3); color: #222; }
  .mobileMenu div a { color: #222; text-decoration: underline; }
  .mobileMenu div .mapIt { text-decoration: none; }
  .mobileMenu .close { top: 18px; right: 10px; }
  .mobileMenu div h3 { display: none; }
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *, *:before, *:after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
    a, a:visited { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    img { max-width: 100% !important; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }
}