@charset "utf-8";

  html, body {
  height: 100%;
  margin: 0 auto;
  position: relative;
}

  body {
  font: 16px/1.5 'Open Sans', Helvetica, Helvetica Neue, Arial, sans-serif;
  color: rgba(0, 0, 0, 0.9);
  background: #ddb55e;
  background: -webkit-linear-gradient(left, #bc923f, #e8bd67, #e8bd67, #bc923f);
  background: -o-linear-gradient(left, #bc923f, #e8bd67, #e8bd67, #bc923f);
  background: -moz-linear-gradient(left, #bc923f, #e8bd67, #e8bd67, #bc923f);
  background: linear-gradient(to left, #bc923f, #e8bd67, #e8bd67, #bc923f);
}

h2{
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-size: 9em;
  color: #fff;
  line-height: .90em;
  text-transform: uppercase;
  position: relative;
}
 
p {
  padding-bottom: 20px;
  text-align: left;
  color: #603813;
}

.container{
  margin: 0 auto;
  padding: 0;
  width: 100vw;
  background: none;
  position: relative;
}


section {
  margin: 0 auto;
  padding: 0;
  height: 100vh;
  max-width: 80%;
  position: relative;
  text-align: center;
  display:block;
  vertical-align: text-bottom;
}
 
section .inner,
section .inner2,
section .inner3,
section .inner4,
section .inner5,
section .inner6,
section .inner7,
section .inner8,
section .inner9,
section .inner10,
section .inner11, {
  margin: 0 auto;
  max-width: 80%;
  display:block;
  vertical-align: text-bottom;
}

section .inner p{
  width: 45%;
}

section .body-container{
  margin: 0;
  width: 45%;
  display: block;
}

section .content{
  width: 100%;
  min-height: 710px;
}

/* Content of the following sections aligned next to the iphone */
section .innerText {
  margin-left: 0;
  width: 45%;
  height: auto;
  position: absolute;
  top: 30%;
  left: 0;
  text-align: left;
  border-bottom: 2px solid #603813;
}

section .innerText a{
  color: #fff;
  text-decoration: none;
}

section .innerText a:hover{
  color: #8c6239;
}



/*--------- BOTTOM LEFT CORNER CITY NAME --------*/
.bottom_corner{
  float: left;
  bottom:0;
  left: 0;
  display: block;
  position: fixed;
  z-index: -1;
}

.bottom_corner h2{
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-size: 25em;
  color: #ddb35f;
}

#sixteen{
  background: #603813;
  background: -webkit-linear-gradient(left, #603813, #8c6239, #8c6239, #603813);
  background: -o-linear-gradient(left, #603813, #8c6239, #8c6239, #603813);
  background: -moz-linear-gradient(left, #603813, #8c6239, #8c6239, #603813);
  background: linear-gradient(to left, #603813, #8c6239, #8c6239, #603813);
}



/*--------------- IMAGES ---------------*/

.intro-images{
  width: 600px;
  height: 600px;
  top: 25%;
  left: 7%;
  position: absolute;
  float: right;
  z-index: 1;
}

#rect1,
#rect2{
  width: 220px;
}

#rect1{
  margin-left: 100%;
  top: 100px;
}
#rect2{
  margin-left: 160%;
  margin-top: -500px;
}

.rect3{
  margin-left: 125%;
  margin-top: -600px;
}

.iphone {
  width: 290px;
  height: 600px;
  position: fixed;
  top: 23%;
  left: 50%;
  z-index: 1;
}

.iphone img{
  position: absolute;
}

img.large-cans{
  left: 55%;
}

img.side-products,
img.side-products2,
img.side-products3{
  width: 220px;
}

img.can-right{
  margin: 0;
  top: 70%;
  left: 127%;
}

img.can-left{
  top: 70%;
  left: 2%;
}


/*------- BOTTOM RIGHT CORNER BEER LIST --------*/
#product-list{
  width: 180px;
  text-align: right;
  bottom: 0;
  right: 2%;
  float: right;
  position: fixed;
  display: block;
}

.product-group{
  position:absolute;
  vertical-align: bottom;
}

#product-list a{
  font-weight: 400;
  color: #603813;
  text-decoration: none;
}

#product-list a:hover{
  color: #fff;
  text-decoration: none;
}

#product-list ul{
  text-align: right;
  list-style: none;
  vertical-align: bottom;
  position: absolute;
}

#product-list ul li,
#product-list ul li a{
  font-weight: 200;
  text-align: right;
  text-decoration: none;
  float: right;
}

/*------------ NAVIGATION BAR ---------*/
.affix {
  top: 0;
  width: 100%;
}

.affix + .container-fluid {
    padding-top: 70px;
}

#navbar-hide {
  display: none;
}

.navbar{
  height: 100%;
  width: 300px;
  background: none;
  border: none;
  z-index: 100;
}

.navbar.white{
  background: #603813;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  color: #fff;
}

.nav{
  height: 100%;
}

.navbar-inverse{
}

.navbar-list{
  height: 100%;
  width: 300px;
  font-size: 1.1em;
  line-height: 1.3em;
  color: #fff;
  display: block;
}

.navbar-list a{
  color: #fff;
}

.navbar-list li{
  padding: 15px 30px;
  width: 300px;
  border-bottom: 0.5px solid #8c6239;
}

.navbar-list a{
  text-decoration: none;
}

.navbar-list a:hover{
  color: #ddb35f;
  text-decoration: none;
}

.breweries{
  cursor: pointer;
}

li.beer-menu{
  margin-left: 0;
  padding: 0;
  border: none;
}

.navbar-list ul{
  margin: 0;
  padding: 0;
  width: 300px;
  text-decoration: none;
  list-style: none;
}

.navbar-list ul li{
  margin: 0;
  padding-left: 60px;
  width: 300px;
}

.active{
  background: none;
}

.active button{
  background: none;
  padding: 10px;
  border: none;
  outline: none;
}

ul.button-ul{
  background: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul.button-ul li{
    display: inline-block;
}

ul.button-ul li p{
  font-family: 'Anton', sans-serif;
  font-size: 1.5em;
  font-weight: 400;
}

ul.button-ul p.white{
  color: #fff;
}

button.nav-button{
  margin: 10px 10px 20px 20px;
  padding: 10px;
  width: 28.43px;
  height: 50px;
  background-image: url("https://s3.amazonaws.com/beer-boroughs/img/can-outline.svg");
  background-size: 28.43px 50px;
  background-repeat: no-repeat;
}

button.nav-button-white{
  margin: 10px 10px 10px 20px;
  padding: 10px;
  width: 28.43px;
  height: 50px;
  background-image: url("https://s3.amazonaws.com/beer-boroughs/img/can-outline-white.svg");
  background-size: 28.43px 50px;
  background-repeat: no-repeat;
}

/*--- WAVE ---*/
.wave{
  width: 100vw;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  z-index: -100;
  position: absolute;
}

#feel-the-wave{
  width: 100%;
}

/*--- MAP ---*/
#mapContainer{
  margin-left: 50%;
  width: 600px;
  height: 500px;
  float: right;
  top: 25%;
  position: absolute;
}

#mapContainer p {
  margin: 20px 0 0 -200px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.3em;
  line-height: 1.3em;
  color: #000;
  text-align: center;
}

#mapid {
  width: 600px; 
  height: 500px;
  top:0; 
  bottom:0; 
  text-align: center; 
}

.leaflet-popup-content-wrapper {
      border-radius: 1px !important;
      -moz-border-radius: 1px !important;
      -webkit-border-radius: 1px !important;
    }

#area-chart {
  margin-left: 55%;
  width: 250px;
  height: 300px;
  float: right;
  top: 38%;
  position: absolute;
}

#legend{
  margin: 0;
  margin-top: -15%;
  margin-left: 70%;
  width: 200px;
  float: left;
}

.chart-caption{
  margin-top: -3%;
  margin-left: 55%;
  float: left;
}

g.tick line{
  stroke: #603813;
}
g.tick text{
  fill: #603813;
}


/* ----------------------------------------------------*/
/* -------------- Tablet Pro Landscape ---------------*/

@media only screen 
  and (max-width: 1366px) 
  and (min-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5){


        section {
          margin: 0 auto;
          padding: 0;
          height: 100vh;
          max-width: 80%;
          position: relative;
          text-align: center;
          display:block;
          vertical-align: text-bottom;
        }
         
        section .inner,
        section .inner2,
        section .inner3,
        section .inner4,
        section .inner5,
        section .inner6,
        section .inner7,
        section .inner8,
        section .inner9,
        section .inner10,
        section .inner11, {
          margin: 0 auto;
          max-width: 80%;
          display:block;
          vertical-align: text-bottom;
        }

        section .innerText {
          margin: 0 auto;
          padding: 0;
          width: 50%;
          float: left;
          left: 0;
          top: 40%;
        }

        section .innerText p{
          margin: 0 auto;
          width: 100%;
          float: left;
          left: 0;
          font-size: 1em;
        }

        section .innerText h2{
          font-size: 6em;
        }

        section .body-container{
          margin: 0;
          width: 40%;
          display: block;
        }

        section .content{
          width: 100%;
          min-height: 710px;
        }

      .intro-images{
          width: 600px;
          height: 600px;
          top: 40%;
          left: 35%;
          position: absolute;
          float: right;
          z-index: 1;
        }

        #rect1,
        #rect2{
          width: 150px;
        }

        #rect1{
          margin-left: 0;
          top: 100px;
        }
        #rect2{
          margin-left: 80%;
          margin-top: -350px;
        }

        .rect3{
          margin-left: 45%;
          margin-top: -400px;
          width: 200px;
        }

      .iphone{
        margin-left: 5%;
      }
       
      img.large-cans{
        width: 200px;
        top: -10%;
        left: 40%;
        /*transform: translate(55%, 10%);*/
      }

      img.can-right,
      img.can-left{
          width: 150px;
      }

      img.can-right{
        margin: 0;
        left: 90%;
        /*transform: translate(175%, 30%);*/
      }

      img.can-left{
        /*transform: translate(5%, 30%);*/
      }

      #product-list{
        display: none;
      }


      /*--------- BOTTOM LEFT CORNER CITY NAME --------*/
      .bottom_corner{
        float: left;
        bottom:0;
        left: 0;
        display: block;
        position: fixed;
        z-index: -1;
      }

      .bottom_corner h2{
        margin: 0;
        font-family: 'Anton', sans-serif;
        font-size: 17em;
        color: #ddb35f;
      }

      /*------------------- MAP -------------------*/
      #mapContainer{
        margin-left: 55%;
        width: 500px;
        height: 400px;
        float: right;
        top: 40%;
        position: absolute;
      }

      #mapContainer p {
        margin: 20px 0 0 -200px;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 1.3em;
        line-height: 1.3em;
        color: #000;
        text-align: center;
      }

      #mapid {
        width: 500px; 
        height: 400px;
        top:0; 
        bottom:0; 
        text-align: center; 
      }

      #area-chart {
        margin-left: 55%;
        width: 250px;
        height: 300px;
        float: right;
        top: 40%;
        position: absolute;
      }

      #legend{
        margin: 0;
        margin-top: -15%;
        margin-left: 75%;
        width: 200px;
        float: left;
      }

      .chart-caption{
        margin-top: -1%;
        margin-left: 60%;
        float: left;
      }

      /*-------------- WAVE ---------------*/

      .wave{
          width: 100vw;
          -ms-transform: rotate(180deg);
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
          z-index: -100;
          position: absolute;
        }

        #feel-the-wave{
          width: 100%;
        }

}


/* ----------------------------------------------------*/
/* -------------- Tablet Pro Portrait -----------------*/


@media only screen 
  and (max-width: 1366px) 
  and (min-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5){

        section{
          margin: 0 auto;
          width: 100%;
          vertical-align: top;
        }

        section .inner,
        section .inner3,
        section .inner4,
        section .inner5,
        section .inner6,
        section .inner7,
        section .inner8,
        section .inner11, {
          width: 100%;
          min-height: 800px;
          display:block;
          vertical-align: top;
        }

        #two{
          width: 100%;
          height: 1300px;
          display:block;
          vertical-align: top;
        }
        section #three,
        section #four,
        section #five{
          height: 200px;
          display:block;
          vertical-align: top;
        }

        section #three{
          margin-top: 500px;
        }

        .content{
          margin: 0 auto;
          width: 70%;
          vertical-align: top;
        }
         
        /* Content of the following sections aligned next to the iphone */
        section .innerText {
          margin: 0 auto;
          padding: 0;
          width: 70%;
          top: 20%;
          left: 15%;
        }

        section .innerText p{
          margin: 0 auto;
          width: 100%;
          float: left;
          left: 0;
          font-size: 1.2em;
        }

        section .innerText h2{
          font-size: 9em;
        }

        section .body-container{
          margin: 0 auto;
          height: 100px;
          width: 70%;
          display: block;
        }

        /*--- BOTTOM LEFT CORNER CITY NAME ---*/

        .bottom_corner h2{
          margin: 0;
          font-family: 'Anton', sans-serif;
          font-size: 12em;
          color: #ddb35f;
        }

        /*--------------- IMAGES ---------------*/

        .intro-images{
            width: 400px;
            height: 500px;
            top: 60%;
            left: 28%;
            float: left;
          }

          #rect1,
          #rect2{
            width: 150px;
          }

          #rect1{
            margin-left: 0;
            top: 100px;
            left: 0;
            float: left;
          }
          #rect2{
            margin-left: 60%;
            margin-top: -335px;
            float: left;
          }

          .rect3{
            margin-left: 25%;
            margin-top: -380px;
            width: 190px;
            float: left;
          }

        .iphone {
          width: 600px;
          height: 400px;
          position: fixed;
          top: 60%;
          left: 20%;
          /*transform: translate(325%, 0);*/
          z-index: 1;
        }

        .iphone img{
          position: absolute;
          top: 100px;
          left: 0;
        }
        
        img.large-cans{
          margin-top: 0;
          width: 190px;
          top: -20%;
          left: 35%;
        }

        img.can-right,
        img.can-left{
          width: 150px;
          top: 0;
        }

        img.can-right{
          margin: 0;
          left: 60%;
        }

        img.can-left{
          left: 15%;
        }

        #product-list{
          display: none;
        }

        /*--- MAP and CHART ---*/
        #mapContainer {
          margin: 0 auto;
          margin-left: 0;
          width: 100%;
          top: 55%;
          position: absolute;
          text-align: center;
        }

        #mapid {
          margin: 0 auto;
          width: 600px; 
          height: 500px;
          text-align: center; 
        }


        #mapContainer p {
          margin: 20px 0 0 -200px;
          font-family: 'Roboto Condensed', sans-serif;
          font-size: 1.3em;
          line-height: 1.3em;
          color: #000;
          text-align: center;
        }

        #area-chart {
          margin: 0 auto;
          margin-left: 25%;
          top: 60%;
          width: 300px;
          display: block;
          position: absolute;
          text-align: center;
        }

        #legend{
          margin: 0;
          margin-top: 100%;
          margin-left: 55%;
          width: 200px;
          float: left;
        }

        .chart-caption{
          margin-top: -1%;
          margin: 0 auto;
          width: 100%;
          text-align: center;
        }

        /*--- WAVE ---*/
        .wave{
          width: 100vw;
          -ms-transform: rotate(180deg);
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
          z-index: -100;
          position: absolute;
        }

        #feel-the-wave{
          width: 100%;
          transform: translate(0,400px);
        }



}


/* --------------------------------------------*/
/* -------------- Tablet 1024 -----------------*/


@media only screen 
  and (min-width: 768px)
  and (max-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1){

        .container{
          margin: 0 auto;
          padding: 0;
          width: 100vw;
          background: none;
          position: relative;
        }


        section {
          margin: 0 auto;
          padding: 0;
          height: 100vh;
          max-width: 80%;
          position: relative;
          text-align: center;
          display:block;
          vertical-align: text-bottom;
        }
         
        section .inner,
        section .inner2,
        section .inner3,
        section .inner4,
        section .inner5,
        section .inner6,
        section .inner7,
        section .inner8,
        section .inner9,
        section .inner10,
        section .inner11, {
          margin: 0 auto;
          max-width: 80%;
          display:block;
          vertical-align: text-bottom;
        }

        section .innerText {
          margin: 0 auto;
          padding: 0;
          width: 50%;
          float: left;
          left: 0;
          top: 40%;
          transform: translate(0,0);
        }

        section .innerText p{
          margin: 0 auto;
          width: 100%;
          float: left;
          left: 0;
          font-size: 1em;
        }

        section .innerText h2{
          font-size: 6em;
        }

        section .body-container{
          margin: 0;
          width: 40%;
          display: block;
        }

        section .content{
          width: 100%;
          min-height: 710px;
        }

        .intro-images{
          width: 300px;
          height: 400px;
          top: 40%;
          left: 60%;
          float: left;
        }

        #rect1,
        #rect2{
          width: 150px;
        }

        #rect1{
          margin-left: 0;
          left: 0;
          top: 100px;
          float: left;
        }
        #rect2{
          margin-left: 85%;
          margin-top: -335px;
          float: left;
        }

        .rect3{
          margin-left: 35%;
          margin-top: -400px;
          width: 200px;
          float: left;
        }

      .iphone {
        width: 400px;
        height: 600px;
        position: fixed;
        top: 30%;
        left: 50%;
        /*transform: translate(0, 0);*/
        z-index: 1;
      }
       
      img.large-cans{
        width: 200px;
        left: 30%;
        top: -10%;
      }

      .side-products,
      .side-products2,
      .side-products3{
        width: 150px;
      }

      img.can-right,
      img.can-left{
          width: 150px;
      }

      img.can-right{
        margin: 0;
        left: 175%;
        /*transform: translate(175%, 30%);*/
      }

      img.can-left{
        left: 5%;
        /*transform: translate(5%, 30%);*/
      }

      #product-list{
        display: none;
      }


      /*--------- BOTTOM LEFT CORNER CITY NAME --------*/
      .bottom_corner{
        float: left;
        bottom:0;
        left: 0;
        display: block;
        position: fixed;
        z-index: -1;
      }

      .bottom_corner h2{
        margin: 0;
        font-family: 'Anton', sans-serif;
        font-size: 17em;
        color: #ddb35f;
      }

      /*------------------- MAP -------------------*/
      #mapContainer{
        margin-left: 55%;
        width: 400px;
        height: 350px;
        float: right;
        top: 37%;
        position: absolute;
      }

      #mapContainer p {
        margin: 20px 0 0 -200px;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 1.3em;
        line-height: 1.3em;
        color: #000;
        text-align: center;
      }

      #mapid {
        width: 400px; 
        height: 350px;
        top:0; 
        bottom:0; 
        text-align: center; 
      }

      #area-chart {
        margin-left: 55%;
        width: 250px;
        height: 300px;
        float: right;
        top: 50%;
        position: absolute;
      }

      #legend{
        margin: 0;
        margin-top: -23%;
        margin-left: 80%;
        width: 200px;
        float: left;
      }

      .chart-caption{
        margin-top: -5%;
        margin-left: 60%;
        font-size: 12px;
        float: left;
      }

      /*-------------- WAVE ---------------*/

      .wave{
          width: 100vw;
          -ms-transform: rotate(180deg);
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
          z-index: -100;
          position: absolute;
        }

        #feel-the-wave{
          width: 100%;
        }


}




/* ---------------------------------------------------- */
/* --------------------- Tablet 768 ------------------- */

@media only screen 
  and (min-height: 768px)
  and (max-height: 1024px) 
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1){

        body {
          background-repeat: no-repeat;
          background-attachment: fixed;
          float: left;
          left: 0;
          margin: 0;
        }

        .container{
          margin: 0;
          width: 100vw;
        }

        section{
          margin: 0 auto;
          width: 100vw;
          vertical-align: top;
        }

        section .inner,
        section .inner3,
        section .inner4,
        section .inner5,
        section .inner6,
        section .inner7,
        section .inner8,
        section .inner11, {
          width: 100vw;
          min-height: 800px;
          display:block;
          vertical-align: top;
        }

        #two{
          width: 100vw;
          height: 1300px;
          display:block;
          vertical-align: top;
        }
        section #three,
        section #four,
        section #five{
          width: 100vw;
          height: 200px;
          display:block;
          vertical-align: top;
        }

        section #three{
          margin-top: 500px;
        }

        .content{
          margin: 0;
          width: 100vw;
          vertical-align: top;
        }
         
        /* Content of the following sections aligned next to the iphone */
        section .innerText {
          margin: 0 auto;
          padding: 0;
          width: 100%;
          float: left;
          left: 0;
          top: 15%;
          transform: translate(0,0);
        }

        section .innerText p{
          margin: 0 auto;
          width: 100%;
          float: left;
          left: 0;
          font-size: 1.2em;
        }

        section .innerText h2{
          font-size: 9em;
        }

        section .body-container{
          margin: 0;
          height: 100px;
          width: 100%;
          display: block;
        }

        /*--- BOTTOM LEFT CORNER CITY NAME ---*/

        .bottom_corner h2{
          margin: 0;
          font-family: 'Anton', sans-serif;
          font-size: 12em;
          color: #ddb35f;
        }

        /*--------------- IMAGES ---------------*/

         .intro-images{
            width: 400px;
            height: 500px;
            top: 62%;
            left: 20%;
            float: left;
          }

          #rect1,
          #rect2{
            width: 150px;
          }

          #rect1{
            margin-left: 0;
            top: 100px;
            left: 0;
            float: left;
          }
          #rect2{
            margin-left: 60%;
            margin-top: -335px;
            float: left;
          }

          .rect3{
            margin-left: 25%;
            margin-top: -380px;
            width: 190px;
            float: left;
          }


        .iphone {
          width: 400px;
          height: 400px;
          position: fixed;
          top: 60%;
          left: 23%;
          /*transform: translate(200%, 0);*/
          z-index: 1;
        }

        .iphone img{
          position: absolute;
          top: 0;
          left: 0;
        }

        .iphone img.active {
          z-index: 2;
        }
        .iphone p.screenHat img {
          max-width: 300px;
        }
        
        img.large-cans{
          margin-top: 0;
          width: 190px;
          top: -15%;
          left: 32%;
          /*transform: translate(60%, 70%);*/
        }

        img.can-right,
        img.can-left{
          width: 150px;
        }

        img.can-right{
          margin: 0;
          top: 0;
          left: 70%;
          /*transform: translate(175%, 90%);*/
        }

        img.can-left{
          top: 0;
          left: 3%;
          /*transform: translate(5%, 90%);*/
        }

        #product-list{
          display: none;
        }

        /*--- MAP and CHART ---*/
        #mapContainer {
          margin: 0;
          top: 48%;
          position: absolute;
          text-align: center;
          left: 0;
        }

        #mapContainer p {
          margin: 20px 0 0 -200px;
          font-family: 'Roboto Condensed', sans-serif;
          font-size: 1.3em;
          line-height: 1.3em;
          color: #000;
          text-align: center;
        }

        #area-chart {
          margin: 0 auto;
          margin-left: 20%;
          top: 53%;
          width: 300px;
          display: block;
          position: absolute;
          text-align: center;
        }

        #legend{
          margin: 0;
          margin-top: 118%;
          margin-left: 55%;
          width: 200px;
          float: left;
        }

        .chart-caption{
          margin-top: -1%;
          margin: 0 auto;
          width: 100%;
          text-align: center;
        }

        /*--- WAVE ---*/
        .wave{
          width: 100vw;
          -ms-transform: rotate(180deg);
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
          z-index: -100;
          position: absolute;
        }

        #feel-the-wave{
          transform: translate(0, 120px);
            width: 100%;
        }


}



/* --------------------------------------------- */
/* -------------- Mobile Portrait ---------------*/
@media only screen 
  and (max-width: 680px) 
  and (min-width: 320px)
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2){

      body {
          background-repeat: no-repeat;
          background-attachment: fixed;
          float: left;
          left: 0;
          margin: 0;
          height: 100%;
        }

        .container{
          margin: 0;
          width: 100vw;
        }

        section{
          margin: 0 auto;
          width: 100vw;
          vertical-align: top;
        }

        section .inner,
        section .inner3,
        section .inner4,
        section .inner5,
        section .inner6,
        section .inner7,
        section .inner8,
        section .inner11, {
          width: 100vw;
          height: 600px;
          display:block;
          vertical-align: top;
        }

        section #two,
        section #three,
        section #four,
        section #five{
          width: 100vw;
          height: 200px;
          display:block;
          vertical-align: top;
        }

        #two{
          height: 1000px;
        }

        #three{
          height: 800px;
        }

        .content{
          margin: 0;
          width: 100vw;
          vertical-align: top;
        }
         
        /* Content of the following sections aligned next to the iphone */
        section .innerText {
          margin: 0 auto;
          padding: 0;
          width: 100%;
          float: left;
          left: 0;
          top: 15%;
          transform: translate(0,0);
        }

        section .innerText p{
          margin: 0 auto;
          width: 100%;
          float: left;
          left: 0;
          font-size: 0.9em;
        }

        section .innerText h2{
          font-size: 3.5em;
        }

        section .body-container{
          margin: 0;
          height: 100px;
          width: 100%;
          display: block;
        }

        .iphone {
          width: 290px;
          height: 150px;
          position: fixed;
          top: 72%;
          left: 0;
          text-align: center;
        }

        .iphone img{
          margin: 0 auto;
          position: absolute;
          top: 0;
          left: 0;
          text-align: center;
        }

        .iphone img.active {
          z-index: 2;
        }
        
        img.large-cans{
          margin-top: 0;
          width: 110px;
          top: -34%;
          left: 45%;
        }

          #rect2{
            margin-left: 60%;
            margin-top: -335px;
            float: left;
          }


        .intro-images{
          margin: 0 auto;
          width: 100%;
          height: 200px;
          top: 60%;
          left: 0%;
          float: left;
        }

        #rect1,
        #rect2{
          width: 90px;
        }

        .rect3{
          width: 110px;
          margin-left: 33%;
          margin-top: -230px;
          float: left;
        }

        #rect1{
          margin-left: 10%;
          top: 100px;
          left: 0;
          float: left;
        }
        #rect2{
          margin-left: 60%;
          margin-top: -200px;
          float: left;
        }

        img.side-products,
        img.side-products2,
        img.side-products3{
          margin: 0 auto;
          width: 80px;
          text-align: center;
        }

        img.can-right{
          margin-left: 0;
          width: 80px;
          left: 75%;
        }

        img.can-left{
          width: 80px;
          left: 25%;
        }

        #product-list{
          display: none;
        }


        /*--- NAVIGATION BAR ---*/
        .affix {
          top: 0;
          width: 100%;
          padding-top: 25px;
        }

        .affix + .container-fluid {
            padding-top: 90px;
        }

        #navbar-hide {
          display: none;
        }

       .navbar{
          width: 100%;
          height: 12%;
          background: none;
          border: none;
          z-index: 100;
          background: #fff;
          box-shadow: 10px 0 15px rgba(0, 0, 2, 0.4);
          -webkit-box-shadow: 10px 0 15px rgba(0, 0, 2, 0.4);
          -moz-box-shadow: 10px 0 15px rgba(0, 0, 2, 0.4);
        }

        /*.navbar{
          display: none;
        }*/

        .navbar.white{
          height: 70%;
          background: #603813;
          border-radius: 0;
          -webkit-border-radius: 0;
          -moz-border-radius: 0;
          color: #fff;
          box-shadow: 10px 0 15px rgba(0, 0, 2, 0.4);
          -webkit-box-shadow: 10px 0 15px rgba(0, 0, 2, 0.4);
          -moz-box-shadow: 10px 0 15px rgba(0, 0, 2, 0.4);
        }

        .nav{
          width: 100%;
          height: 30%;
        }

        .navbar-inverse{
        }

        .navbar-list{
          padding-left:40px;
          width: 200%;
          font-size: 1.2em;
          line-height: 1.6em;
          background: #603813;
          display: block;
        }

        .navbar-list a{
          color: #fff;
        }

        .navbar-list li{
          padding: 8px 0 8px 0;
        }

        .navbar-list a:hover{
          color: #ddb35f;
          text-decoration: none;
        }

        .navbar-list ul{
          text-decoration: none;
          list-style: none;
        }

        .navbar-list ul li{
          padding-left: 20px;
        }

        .active{
          background: none;
        }

        .active button{
          background: none;
          padding: 10px;
          border: none;
          outline: none;
        }

        ul.button-ul{
          background: none;
          margin: 0;
          padding: 0;
          list-style-type: none;
        }

        ul.button-ul li{
            display: inline-block;
        }

        ul.button-ul li p{
          font-family: 'Anton', sans-serif;
          font-size: 1.5em;
          font-weight: 400;
        }

        ul.button-ul p.white{
          color: #fff;
        }

        button.nav-button{
          margin: 0 10px;
          padding: 0 10px;
          width: 17px;
          height: 30px;
          background-image: url("https://s3.amazonaws.com/beer-boroughs/img/can-outline.svg");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }


        button.nav-button-white{
          margin: 0 10px;
          padding: 0 10px;
          width: 17px;
          height: 30px;
          background-image: url("https://s3.amazonaws.com/beer-boroughs/img/can-outline-white.svg");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        li.beer-menu{
          background: #603813;
        }

        /*--- MAP and CHART ---*/
        #mapContainer {
          margin: 0;
          width: 100%;
          height: 250px;
          top: 55%;
          position: absolute;
          text-align: center;
          left: 0;
        }

        #mapContainer p {
          margin: 20px 0 0 -200px;
          font-family: 'Roboto Condensed', sans-serif;
          font-size: 1.3em;
          line-height: 1.3em;
          color: #000;
          text-align: center;
        }

        #mapid {
          margin: 0 auto;
          width: 100%; 
          height: 250px;
          top:0; 
          bottom:0; 
          text-align: center; 
        }

        #area-chart {
          margin: 0 auto;
          width: 290px;
          height: 300px;
          top: 60%;
          display: block;
          position: absolute;
          text-align: center;
        }

        #legend{
          margin: 0 auto;
          margin-top: 220%;
          margin-left: 0%;
          width: 100%;
          height: 130px;
          float: left;
        }

        .chart-caption{
          margin-top: -10%;
          margin: 0 auto;
          width: 100%;
          text-align: center;
        }

        /*--- BOTTOM LEFT CORNER CITY NAME ---*/
        
        .bottom_corner{
          float: left;
          bottom:0;
          left: 0;
          display: block;
          position: fixed;
          z-index: -1;
        }

        .bottom_corner h2{
          margin: 0;
          font-family: 'Anton', sans-serif;
          font-size: 5.1em;
          color: #ddb35f;
        }

      
        /*--- WAVE ---*/
        .wave{
          -ms-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }

        #feel-the-wave{
          transform: translate(0, -815px);
        }

}


/* --------------------------------------------- */
/* -------------- Mobile landscape --------------*/
@media only screen 
  and (max-width: 812px) 
  and (min-width: 320px)
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2){

          body {
          width: 100%;
          background-repeat: no-repeat;
          background-attachment: fixed;
          float: left;
          left: 0;
          margin: 0;
        }

        .container{
          margin: 0 auto;
          width: 100%;
        }

        section{
          margin: 0 auto;
          width: 100%;
          vertical-align: top;
        }

        section .inner,
        section .inner3,
        section .inner4,
        section .inner5,
        section .inner6,
        section .inner7,
        section .inner8,
        section .inner11, {
          width: 100%;
          height: 600px;
          display:block;
          vertical-align: top;
        }

        section #two,
        section #three,
        section #four,
        section #five{
          width: 100%;
          height: 600px;
          display:block;
          vertical-align: top;
        }

        section #three{
          margin-top: 400px;
        }

        .content{
          margin: 0 auto;
          width: 100%;
          vertical-align: top;
        }
         
        /* Content of the following sections aligned next to the iphone */
        section .innerText {
          margin: 0 auto;
          padding: 0;
          width: 50%;
          float: left;
          left: 0;
          top: 20%;
          transform: translate(0,0);
        }

        section .innerText p{
          margin: 0 auto;
          width: 100%;
          float: left;
          left: 0;
          font-size: 0.8em;
        }

        h2,
        section .innerText h2{
          font-size: 2em;
        }

        section .body-container{
          margin: 0;
          height: 100px;
          width: 100%;
          display: block;
        }

        #two{
          height: 760px;
        }

        #three{
          height: 600px;
        }

        #fifteen{
          margin-top: 100px;
        }

        .iphone {
          margin: 0 auto;
          width: 40%;
          height: 200px;
          position: fixed;
          top: 35%;
          left: 55%;
          text-align: center;
        }

        .iphone img{
          margin: 0 auto;
          position: absolute;
          top: 0;
          left: 0;
          text-align: center;
        }

        .iphone img.active {
          z-index: 2;
        }

        .intro-images{
          width: 250px;
          height: 200px;
          top: 30%;
          left: 60%;
          float: left;
        }

        #rect1,
        #rect2{
          width: 90px;
        }

        #rect1{
          margin-left: 0;
          left: 0;
          top: 100px;
          float: left;
        }
        #rect2{
          margin-left: 55%;
          margin-top: -80%;
          float: left;
        }

        .rect3{
          margin-left: 25%;
          margin-top: -90%;
          width: 110px;
          float: left;
        }

        img.large-cans{
          margin-top: 0;
          width: 110px;
          top: -15%;
          left: 33%;
        }

        .side-products,
        .side-products2,
        .side-products3{
          margin: 0 auto;
          width: 90px;
          text-align: center;
        }

        img.can-right{
          margin-left: 0;
          width: 90px;
          top: 0;
          left: 90%;
        }

        img.can-left{
          width: 90px;
          top: 0;
          left: -73%;
        }

        #product-list{
          display: none;
        }


        /*--- NAVIGATION BAR ---*/
        .affix {
          top: 0;
          width: 100%;
          padding-top: 10px;
        }

        .affix + .container-fluid {
            padding-top: 90px;
        }

        #navbar-hide {
          display: none;
        }

       .navbar{
          width: 100%;
          height: 12%;
          background: none;
          border: none;
          z-index: 100;
          background: #fff;
          box-shadow: 10px 0 15px rgba(0, 0, 2, 0.4);
          -webkit-box-shadow: 10px 0 15px rgba(0, 0, 2, 0.4);
          -moz-box-shadow: 10px 0 15px rgba(0, 0, 2, 0.4);
        }

        /*.navbar{
          display: none;
        }*/

        .navbar.white{
          width: 40%;
          height: 100%;
          background: #603813;
          border-radius: 0;
          -webkit-border-radius: 0;
          -moz-border-radius: 0;
          color: #fff;
          box-shadow: 10px 0 15px rgba(0, 0, 2, 0.4);
          -webkit-box-shadow: 10px 0 15px rgba(0, 0, 2, 0.4);
          -moz-box-shadow: 10px 0 15px rgba(0, 0, 2, 0.4);
        }

        .nav{
          width: 40%;
          height: 30%;
        }

        .navbar-inverse{
        }

        .navbar-list{
          padding-left:40px;
          width: 90%;
          font-size: 1em;
          line-height: 1.4em;
          background: #603813;
          display: block;
        }

        .navbar-list a{
          color: #fff;
        }

        .navbar-list li{
          padding: 8px 0 8px 0;
          width: 230px;
        }

        .navbar-list a:hover{
          color: #ddb35f;
          text-decoration: none;
        }

        .navbar-list ul{
          text-decoration: none;
          list-style: none;
        }

        .navbar-list ul li{
          padding-left: 20px;
          width: 230px;
        }

        .active{
          background: none;
        }

        .active button{
          padding: 10px;
          background: none;
          border: none;
          outline: none;
        }

        ul.button-ul{
          margin: 0;
          padding: 0;
          background: none;
          list-style-type: none;
        }

        ul.button-ul li{
            display: inline-block;
        }

        ul.button-ul li p{
          font-family: 'Anton', sans-serif;
          font-size: 1.5em;
          font-weight: 400;
        }

        ul.button-ul p.white{
          color: #fff;
        }

        button.nav-button{
          margin: 0 10px;
          padding: 0 10px;
          width: 17px;
          height: 30px;
          background-image: url("https://s3.amazonaws.com/beer-boroughs/img/can-outline.svg");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }


        button.nav-button-white{
          margin: 0 10px;
          padding: 0 10px;
          width: 17px;
          height: 30px;
          background-image: url("https://s3.amazonaws.com/beer-boroughs/img/can-outline-white.svg");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        li.beer-menu{
          background: #603813;
        }

        /*--- MAP and CHART ---*/
        #mapContainer {
          margin: 0;
          width: 250px;
          height: 200px;
          top: 30%;
          left: 55%;
          position: absolute;
          text-align: center;
        }

        #mapContainer p {
          margin: 20px 0 0 -200px;
          font-family: 'Roboto Condensed', sans-serif;
          font-size: 1.3em;
          line-height: 1.3em;
          color: #000;
          text-align: center;
        }

        #mapid {
          margin: 0 auto;
          width: 250px; 
          height: 200px;
          top:0; 
          bottom:0; 
          text-align: center; 
        }

        #area-chart {
          margin: 0 auto;
          margin-left: 58%;
          width: 250px;
          height: 300px;
          top: 25%;
          display: block;
          position: absolute;
          text-align: center;
        }

        #legend{
          margin: 0;
          margin-top: 41%;
          margin-left: 53%;
          width: 200px;
          float: left;
        }

        .chart-caption{
          margin-top: -7;
          margin-left: 60%;
          font-size: 12px;
          text-align: center;
        }

        /*--- BOTTOM LEFT CORNER CITY NAME ---*/
        
        .bottom_corner{
          float: left;
          bottom:0;
          left: 0;
          display: block;
          position: fixed;
          z-index: -1;
        }

        .bottom_corner h2{
          margin: 0;
          font-family: 'Anton', sans-serif;
          font-size: 5.1em;
          color: #ddb35f;
        }

      
        /*--- WAVE ---*/
        .wave{
          -ms-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }

        #feel-the-wave{
          transform: translate(0, -815px);
        }

}