/* *****************************************
                  Reset CSS.
***************************************** */
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  -ms-box-sizing: inherit;
  box-sizing: inherit;
  font-family: 'Montserrat', sans-serif;
  color: white;
}
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
abbr, acronym, address, big, cite, code, del, dfn, 
em, img, ins, kbd, q, s, samp, small, strike, 
strong, sub, sup, tt, var, b, u, i, center, dl, 
dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, figure, figcaption, 
footer, header, hgroup, menu, nav, output, section, 
summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, 
header, hgroup, menu, nav, section {
  display: block;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input {
  color: black;
}
/* *****************************************
                Navigation.
***************************************** */
nav {
  text-shadow: 1px 2px 2px #000;
  padding-top: 15px;
}
nav.mainNavigation>a {
  vertical-align: bottom;
}
.mainNavigation, .smallMainNavigation {
  background-color: #336699;
}
.mainNavigation {
  word-spacing: 14px;
  height: 95px;
}
.smallMainNavigation {
  word-spacing: 12px;
  height: 50px;
}
  .mainNavigation>a, .smallMainNavigation>a {
  font-weight: 700;
}
  .mainNavigation>a {
    font-size: 36px;
    word-spacing: 7px;
    letter-spacing: 3px;
}
  .smallMainNavigation>a {
    font-size: 20px;
    word-spacing: 7px;
    letter-spacing: 3px;
}
  .mainNavigation>a:hover {
    font-size: 46px;
    color: orange;
}
.secondNavigation {
  background-color: orange;
  padding: 5px 75px 10px 75px;
}
  .secondNavigation .col {
  vertical-align: middle;
}
  .secondNavigation>a {
  font-weight: 400;
  word-spacing: 5px;
  letter-spacing: 1.3px;
}
        .secondNavigation>div>div>a {
  font-size: 28px;
}
          .secondNavigation>div>div>a:hover {
  color: #336699;
  font-size: 32px;
}
.sign-up>a:hover {
  color: #336699;
  font-size: 24px;
}
#sign-in {
  line-height: 35px;
}
span.sign-up {
  font-size: 13px;
}
.mainNavigation, .smallMainNavigation, .secondNavigation {
  opacity: .8;
}



/* *****************************************
                  Landing.
***************************************** */
.parallax {
  perspective: 1px;
  height: 70vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax_layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax_group {
  position: relative;
  height: 70vh;
  min-height: 800px;
  transform-style: preserve-3d;
  transform: translateZ(0);
}
  #doubleSunrise.parallax_layer_deep {
  background-image: url("img/sunriseSplit.jpg")!important;
  background-repeat: no-repeat;
  background: 33.3% 33.3% / cover;
  background-position: bottom;
  min-height: 800px;
  vertical-align: middle;
  z-index: -1;
}
.parallax_layer_deep {
  transform: translateZ(-2px) scale(3);
}
#landing_window {
  min-height: 800px;
}
  #landing_window.parallax {
}
  .signature.col {
  height: 30%;
  padding: 75px 0px;
}
  .cow.col {
  height: 50%;
  padding: 20px 0px;
}
.blurb {
  height: 20%;
  margin-top: 45px;
  padding: 145px 0px 37px;
  font-size: 36px; 
  line-height: 150%;
  text-shadow: 1px 2px 2px #000;
}




/* *****************************************
                  Products.
***************************************** */
      h2#products.cow_header.centered {
  background: url("img/cowheader1.jpg") no-repeat;
  background-size: 110% auto;
}
      h2#products.cow_header.centered>span {
  opacity: 1;
  text-shadow: 1px 2px 2px #000;
}

  h3.subhead {
  height: 135px;
  width: 100%;
  padding: 35px 0px 50px 50px;
  background-color: white;
  box-shadow: 1px 3px 2px black;
}
  .subhead>img {
  max-height: 60px;
  width: auto;
}
.dairy.slide {
  overflow-x: scroll;
  overflow-y: hidden;
  min-width: 1125px;
  height: auto;
  background-color: #336699;;
}
  ul.dairy {
  width: 7910px;
  height: 750px;
}
  ul.dairy, ul.beverage {
    margin: 0;
    padding: 0;

  }
  ul.dairy>li>div, ul.beverage>li>div {
  float: left;
  margin: 5px 2.5px 5px 2.5px;
  width: 1125px;
  height: 750px;
}
.beverage.slide {
  overflow-x: scroll;
  overflow-y: hidden;
  min-width: 1125px;
  height: auto;
  background-color: orange;
}
  ul.beverage {
  width: 5650px;
  height: 750px;
}
#whole {
  background-image: url("img/whole.jpg");
}
#onePercent {
  background-image: url("img/onePercent.jpg");
}
#twoPercentAndSkim {
  background-image: url("img/twoPercentAndSkim.jpg");
}
#chocolateMilk {
  background-image: url("img/chocolateMilk.jpg");
}
#vanillaStrawberry {
  background-image: url("img/vanillaStrawberry.jpg"); 
}
#halfAndHalf {
  background-image: url("img/halfAndHalf.jpg");
}
#eggNogButterMilk {
  background-image: url("img/eggNogButterMilk.jpg");
}
#icedTeaDietTea {
  background-image: url("img/icedTeaDietTea.jpg");
}
#greenTeaDietGreen {
  background-image: url("img/greenTeaDietGreen.jpg");
}
#lemonadeOrangeDrink {
  background-image: url("img/lemonadeOrangeDrink.jpg");
}
#orangeJuice {
  background-image: url("img/orangeJuice.jpg");
}
#springWater {
  background-image: url("img/springWater.jpg");
}
#whole, #onePercent, #twoPercentAndSkim, #chocolateMilk, 
#halfAndHalf, #eggNogButterMilk, #icedTeaDietTea, #vanillaStrawberry,
#greenTeaDietGreen, #lemonadeOrangeDrink, #orangeJuice, #springWater {
  vertical-align: top;
  background-size: 100% 100%;
  font-size: 20px;
  line-height: 40px;
}
#whole>p, #onePercent>p, #twoPercentAndSkim>p, #chocolateMilk>p, 
#halfAndHalf>p, #eggNogButterMilk>p, #icedTeaDietTea>p, #vanillaStrawberry>p,
#greenTeaDietGreen>p, #lemonadeOrangeDrink>p, #orangeJuice>p {
  margin: 135px 0 0 0;
  padding: 25px 25px 25px 40px;
  vertical-align: top;
  text-shadow: .75px .75px .75px #000;
}
#whole>p>b, #onePercent>p>b, #twoPercentAndSkim>p>b, #chocolateMilk>p>b, 
#halfAndHalf>p>b, #eggNogButterMilk>p>b, #icedTeaDietTea>p>b, #vanillaStrawberry>p>b,
#greenTeaDietGreen>p>b, #lemonadeOrangeDrink>p>b, #orangeJuice>p>b {
  font-weight: 700;
  letter-spacing: 1.5px;
}
#springWater>p {
  margin: 135px 0 0 0;
  padding: 25px 40px 25px 25px;
  vertical-align: top;
  color: #555;
  text-shadow: 1.75px 1.75px 1.75px #fff;
}
#springWater>p>b {
  text-shadow: 1.5px 1.5px 1.5px #000;
} 

/* *****************************************
                  History.
***************************************** */
.history.slide {
  overflow-x: scroll;
  overflow-y: hidden;
  min-width: 1125px;
  height: auto;
  background-color: darkgreen;
}
  ul.history {
  width: 5650px;
  height: 750px;
}
  ul.history {
    margin: 0;
    padding: 0;

  }
  ul.history>li>div {
    float: left;
    margin: 5px 2.5px 5px 2.5px;
    width: 1125px;
    height: 750px;
}
      h2#history.cow_header.centered {
  background: url("img/cowheader2.jpg") no-repeat;
  background-size: 110% auto;
}
        h2#history.cow_header.centered>span {
  opacity: 1;
  text-shadow: 1px 2px 2px #000;
}
#theGuersHouse {
  background-image: url("img/theGuersHouse.jpg");
}
#theGuersPlant {
  background-image: url("img/theGuersPlant.jpg");
}
  #theGuersPlant>p {
    position: relative;
    left: 25%;
  }
#firstIcedTea {
  background-image: url("img/firstIcedTea.jpg");
}
  #firstIcedTea>p {
    position: relative;
    left: 55%;
  }
#dairyExpoTrophy {
  background-image: url("img/dairyExpoTrophy.jpg");
}
  #dairyExpoTrophy>p {
    position: relative;
    left: 50%;
  }
#newIdentity {
  background-image: url("img/newIdentity.jpg");
}
  #newIdentity>p {
    position: relative;
    left: 60%;
  }
#theGuersHouse, #theGuersPlant, #firstIcedTea, #dairyExpoTrophy, #newIdentity {
  vertical-align: top;
  background-size: 100% 100%;
  font-size: 20px;
  line-height: 40px;
}
#theGuersHouse>p, #theGuersPlant>p, #firstIcedTea>p, #dairyExpoTrophy>p, #newIdentity>p {
  margin: 135px 0 0 0;
  padding: 25px 25px 25px 25px;
  vertical-align: top;
  color: #369;
}
#theGuersHouse>p>b, #theGuersPlant>p>b, #firstIcedTea>p>b, #dairyExpoTrophy>p>b, #newIdentity>p>b {
  font-weight: 700;
  color: #369;
  letter-spacing: 1.5px;
}
#firstIcedTea>p>a {
  color: #369;
  text-decoration: underline;
}#firstIcedTea>p>a:hover {
  color: orange;
  font-size: 24px;
}



/* *****************************************
                    News.
***************************************** */
      h2#news.cow_header.centered {
  background: url("img/cowheader3.jpg") no-repeat;
  background-size: 110% auto;
}
        h2#news.cow_header.centered>span {
  opacity: 1;
  text-shadow: 1px 2px 2px #000;
}





/* *****************************************
                  Contact.
***************************************** */
#contact {
  height: 188px;
  width: 100%;
  background-color: black;
  line-height: 50px;
}
.footerNavigation {
  font-size: 20px;
  color: white;
  height: 188px;
  width: 100%;
  word-spacing: 10px;
}
.footerNavigation>a:hover {
  font-size: 24px;
  color: orange;
}
span#addressPhone {
  font-size: 16px;
  color: white;
  word-spacing: 1.5px;
}



/* *****************************************
                 General CSS.
***************************************** */
body {
  min-width: 1125px;
  font-family: 'Montserrat', sans-serif;
  color: white;
  background-color: lightgray;
}
.cow_header {
  height: 55px;
  width: 100%;
  padding: 10px 0px;
  font-size: 32px;
  background-size: 120% 100%;
  display: inline-block;
  opacity: .65;
}
.slide {
  min-width: 1125px;
  min-height: 750px;
  background-color: orange;
}
.section {
  width: 100%;
}
.col {
  display: inline-block;
  height: 100%;
}
.thirty {
  width: 30%;
}
.thirty3 {
  width: 33%;
}
.thirty5 {
  width: 35%;
}
.forty {
  width: 39%;
}
.fifty {
  width: 49%;
}
.sixty {
  width: 59%;
}
.hundred {
  width: 100%;
}
.centered {
  text-align: center;
}
.right {
  text-align: right;
}
.left {
  text-align: left;
}
.bottom {
  vertical-align: bottom;
}
.top {
  vertical-align: top;
}
.middle {
  vertical-align: middle;
}
/* *****************************************
                Landing Page
***************************************** */
#landing_wrap {
  background: white;
}
#entrance {
  height: 100vh;
  width: 100vw;
  padding-left: 70px;
  vertical-align: bottom;
  background: url("img/dairyVariety.jpg") no-repeat;
  background-size: auto 100%;
  background-position: bottom left;
  font-size: 76px;
  text-shadow: 1px 2px 2px #000;
}
div#entrance {
  min-height: 1100px;
  min-width: 1600px;
}
#spacer {
  height: 80%;
  width: 100%;
}
#space {
  height: 2000px;
}

/* *****************************************
                Sign up Page
***************************************** */
.signUpWrap {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: url("img/bull.jpg");
  background-size: auto 100%;
  opacity: .5;
}
.form {
  color: black;
}
#cowWithArms {
  font-size: 46px;
  text-shadow: 1px 2px 2px #000;
  text-align: center;
  margin: 0 auto;
  z-index: 10;
}
.orderWrap {
  height: 100vh;
  width: 100vw;
  background: url("img/bull.jpg");
  background-size: auto 100%;
  opacity: .5;
  z-index: -10;
}