/*
Project Name: Sample Business Site, Central Café
Client: FEWD25, Final Project
Author: Andy Aronoff
Developer @GA in DC
*/

/******************************************
/* Colors
/*******************************************
/*  hsla(11, 100%, 4%, 1); /* coffee bean black-brown */
/*  hsla(360, 100%, 100%, 0.33); /* transparent CLOSE white */
/*  hsla(360, 100%, 100%, 0.7); /* transparent white */
/*  hsla(360, 100%, 100%, 0); /* transparent ENTIRELY */

/******************************************
/* @Media Queries
/*******************************************
/*  @media screen and (min-width: 700px) {}
/*  @media screen and (min-width: 1000px) {}
/*  @media screen and (min-width: 1300px) {}

/******************************************
/* SETUP
/*******************************************/

/* Box Model Hack */
* {
  -moz-box-sizing: border-box; /* Firexfox */
  -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
  box-sizing: border-box; /* IE */
}

/* Clear fix hack */
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
}

/******************************************
/* STYLES
/*******************************************/

.blackBrownBand {
  background-color: hsla(11, 100%, 4%, 1); /* coffee bean black-brown */
  border: none;
  height: 75px;
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background-color: hsla(11, 100%, 4%, 1); /* coffee bean black-brown */
  color: white;
  display: block;
  font-family: "Roboto", Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  width: 100%;
}

ul {
  list-style: none;
}

header {
  display: ;
}

#portfolioItem {
  display: none;
}

#portfolio {
  background-color: hsla(360, 100%, 100%, 0); /* transparent ENTIRELY */
  color: hsla(360, 100%, 100%, 0.7); /* transparent white */
  font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
  font-size: 26px;
  font-style: italic;
  height: 75px;
  left: 10px;
  padding: 14px 5px 0 0;
  position: absolute;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 100px;
  z-index: 100;
}
  @media screen and (min-width: 700px) {
    #portfolioItem {
      display: block;
    }
  }

#codepen {
  background-color: hsla(360, 100%, 100%, 0); /* transparent ENTIRELY */
  color: hsla(360, 100%, 100%, 0.7); /* transparent white */
  font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
  font-size: 26px;
  font-style: italic;
  height: 75px;
  padding: 14px 5px 0 0;
  position: absolute;
  right: 150px;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 100px;
  z-index: 100;
}

.hamburger {
  background-color: hsla(360, 100%, 100%, 0); /* transparent ENTIRELY */
  border: 3px solid white;
  border-radius: 5px;
  height: 50px;
  position: fixed;
  right: 12.5px;
  text-align: center;
  top: 11.5px;
  width: 50px;
  z-index: 10;
}

.hamburger p { /* creating the 3 lines */
  font-family: "Arial", sans-serif;
  font-size: 38px;
  line-height: .25;
  margin-top: -9.5px;
}

nav {
  opacity: .95;
  position: fixed;
  right: 0;
  top: 0;
  width: 0;
}

nav li a {
  background-color: hsla(11, 100%, 4%, 1); /* coffee bean black-brown */
  border-bottom: 1px dotted hsla(360, 100%, 100%, 0.7); /* transparent white */
  border-left: 1px dotted hsla(360, 100%, 100%, 0.7); /* transparent white */
  color: white;
  display: block;
  font-family: "Arial", sans-serif;
  font-size: 20px;
  height: 50px;
  line-height: 1.2;
  padding: 12.5px 0 0 25px;
  text-decoration: none;
  width: 251px;
 }

.firstNav {
  background-color: hsla(11, 100%, 4%, 1); /* coffee bean black-brown */
  border-left: 1px dotted hsla(360, 100%, 100%, 0.7); /* transparent dotted menu border white */
  color: hsla(360, 100%, 100%, 0.33); /* transparent CLOSE white */
  display: block;
  font-style: italic;
  font-weight: lighter;
  height: 75px;
  padding: 25px 0 0 115px;
  width: 251px;
}

.lastNav {
  border-radius: 0 0 0 10px; /* top-left, top-right, bottom-right, bottom-left */
}

/* different pages, #id by section */
section {
  position: absolute;
  width: 100%;
  z-index: -1;
}
#homepage {
  display: none;
}
#ourStory {
  display: none;
}
#menu {
  display: none;
}
#shop {
  display: none;
}
#contact {
  display: none;
}

.paralax {
  height: 400px;
  width: 100%;
}
  @media screen and (min-width: 700px) {
    .paralax {
      height: 500px;
    }
  }
  @media screen and (min-width: 1000px) {
    .paralax {
      height: 600px;
    }
  }
  @media screen and (min-width: 1300px) {
    .paralax {
      height: 700px;
    }
  }

.paralax h2 {
  font-family: "Damion", cursive;
  font-size: 50px;
  padding-top: 100px;
  text-align: center;
}

.background1 {
  background-image: url("https://github.com/andyaro3/andyaro3.github.io/blob/master/images/coffeeshop1_mobile.jpg?raw=true"); /* url("../images/coffeeshop1_mobile.jpg"); */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.background2 {
  background-image: url("https://github.com/andyaro3/andyaro3.github.io/blob/master/images/coffeeshop2_mobile.jpg?raw=true"); /* url("../images/coffeeshop2_mobile.jpg"); */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.background3 {
  background-image: url("https://github.com/andyaro3/andyaro3.github.io/blob/master/images/coffeeshop3_mobile.jpg?raw=true"); /* url("../images/coffeeshop3_mobile.jpg"); */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.background4 {
  background-image: url("https://github.com/andyaro3/andyaro3.github.io/blob/master/images/coffeeshop4_mobile.jpg?raw=true"); /* url("../images/coffeeshop4_mobile.jpg"); */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.background5 {
  background-image: url("https://github.com/andyaro3/andyaro3.github.io/blob/master/images/coffeeshop5_mobile.jpg?raw=true"); /* url("../images/coffeeshop5_mobile.jpg"); */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.newPage {}
  .newPage h3 {
    display: block;
    font-family: "Damion", cursive;
    font-size: 50px;
    margin-left: 10%;
    width: 90%;
  }
  .newPage p {
    margin: 0 10%;
  }
  .newPage h4 {
    color: gold;
    font-size: 1.5rem;
    font-style: italic;
  }

.homepageContent {}
  .homepageContent img {
    display: none;
    float: right;
    height: auto;
    margin-right: 10%;
    padding: 5px 0 20px 20px;
    width: 200px;
  }
  .homepageHamburger {
    background-color: hsla(360, 100%, 100%, 0); /* transparent ENTIRELY */
    border: 3px solid white;
    border-radius: 5px;
    float: left;
    height: 50px;
    margin-left: 10%;
    text-align: center;
    width: 50px;
  }
  .homepageHamburger p { /* creating the 3 lines */
    font-family: "Arial", sans-serif;
    font-size: 38px;
    line-height: .25;
    margin-top: -9.5px;
  }
  .homepageFirstNav {
    color: hsla(360, 100%, 100%, 0.33); /* transparent CLOSE white */
    display: inline-block;
    float: left;
    font-style: italic;
    font-weight: lighter;
    height: 25px;
    margin-left: 20px;
    width: 50%;
  }

  @media screen and (min-width: 700px) {
    .homepageContent img {
      display: block;
    }
    .homepageFirstNav {
      margin-top: 10px;
    }
  }

.ourStoryContent {}
  .ourStoryContent img {
    display: none;
    float: left;
    height: auto;
    padding: 5px 20px 15px 0;
    width: 200px;
  }

  @media screen and (min-width: 700px) {
    .ourStoryContent img {
      display: block;
    }
  }

.menuContent {}
  .menuMain {
    background-color: hsla(11, 100%, 4%, 1); /* coffee bean black-brown */
    margin-left: 10%;
    width: 90%;
  }
  .menuh4 {
    font-size: 1.1rem;
    padding-bottom: .1px;
  }
  .menuGroup {
    display: inline;
    /*float: left;*/
    padding-left: 0;
  }
  .menuGroup li {
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    margin-left: 5%;
    overflow: hidden;
    width: 90%;
  }

  @media screen and (min-width: 700px) {
    .menuGroup:nth-Child(3) {
      clear: both; /* clearfix float */
    }
    .menuGroup li {
      width: 350px;
    }
    .menuGroup {
      float: left;
    }
  }
  @media screen and (min-width: 1000px) {
    .menuGroup li {
      width: 425px;
    }
  }
  @media screen and (min-width: 1300px) {
    .menuGroup {
      /*margin-right: 1%;*/
    }
    .menuGroup:nth-Child(3) {
      clear: none; /* undo clearfix float, allow float */
    }
    .menuGroup li {
      margin-left: 5%;
      width: 275px;
    }
  }

.shopContent {}
  .shopCatalog {
    margin: 30px 7% 0 12%;
  }
  .shopItem {
    background-color: white;
    display: block;
    float: left;
    height: 195px;
    margin: 0 15px 15px 0;
    width: 150px;
  }
  .shopItem a {
    color: hsla(11, 100%, 4%, 1); /* coffee bean black-brown */
    background-color: gold;
    display: block;
    font-weight: bold;
    height: 50px;
    margin: 125px 0 0 0;
    padding: 15px;
    position: absolute;
    text-decoration: none;
    text-align: center;
    width: 150px;
  }
  .shopItemToggled {
    box-shadow: inset 0 0 20px hsla(11, 100%, 4%, 1); /* animate, coffee bean black-brown */
  }
  .ccBeans1 {
    background-image: url("https://github.com/andyaro3/andyaro3.github.io/blob/master/images/photo-1447753072467-2f56032d1d48_mobile.jpg?raw=true"); /* url("../images/photo-1447753072467-2f56032d1d48_mobile.jpg"); */
    background-position: -100px -35px; /* -left/right -up/down */
    background-repeat: no-repeat;
    background-size: 350%;
    height: 100%;
    width: 100%;
  }
  .ccBeans2 {
    background-image: url("https://github.com/andyaro3/andyaro3.github.io/blob/master/images/photo-1447753072467-2f56032d1d48_mobile.jpg?raw=true"); /* url("../images/photo-1447753072467-2f56032d1d48_mobile.jpg"); */
    background-position: -250px -35px; /* -left/right -up/down */
    background-repeat: no-repeat;
    background-size: 350%;
    height: 100%;
    width: 100%;
  }
  .ccBeans3 {
    background-image: url("https://github.com/andyaro3/andyaro3.github.io/blob/master/images/photo-1447753072467-2f56032d1d48_mobile.jpg?raw=true"); /* url("../images/photo-1447753072467-2f56032d1d48_mobile.jpg"); */
    background-position: -250px -200px; /* -left/right -up/down */
    background-repeat: no-repeat;
    background-size: 350%;
    height: 100%;
    width: 100%;
  }
  .ccShirt {
    background-image: url("https://github.com/andyaro3/andyaro3.github.io/blob/master/images/photo-1458044508387-6825c08a7870_mobile.jpg?raw=true"); /* url("../images/photo-1458044508387-6825c08a7870_mobile.jpg"); */
    background-position: -110px -80px; /* -left/right -up/down */
    background-repeat: no-repeat;
    background-size: 280%;
    height: 100%;
    width: 100%;
  }
  .ccSweatshirt {
    background-image: url("https://github.com/andyaro3/andyaro3.github.io/blob/master/images/photo-1454391129723-a11d68a3a263_mobile.jpg?raw=true"); /* url("../images/photo-1454391129723-a11d68a3a263_mobile.jpg"); */
    background-position: -60px -20px; /* -left/right -up/down */
    background-repeat: no-repeat;
    background-size: 170%;
    height: 100%;
    width: 100%;
  }
  .ccHat {
    background-image: url("https://github.com/andyaro3/andyaro3.github.io/blob/master/images/photo-1446108440972-3798c860067c_mobile.jpg?raw=true"); /* url("../images/photo-1446108440972-3798c860067c_mobile.jpg"); */
    background-position: -140px -30px; /* -left/right -up/down */
    background-repeat: no-repeat;
    background-size: 250%;
    height: 100%;
    width: 100%;
  }
  .ccMug {
    background-image: url("https://github.com/andyaro3/andyaro3.github.io/blob/master/images/photo-1461914756888-80f9821f5d17_mobile.jpg?raw=true"); /* url("../images/photo-1461914756888-80f9821f5d17_mobile.jpg"); */
    background-position: -80px -30px; /* -left/right -up/down */
    background-repeat: no-repeat;
    background-size: 200%;
    height: 100%;
    width: 100%;
  }

.contactContent {}
  .contactGroup {
    margin-left: 10%;
    width: 80%;
  }
  .contactContent li {
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    margin-left: 5%;
    overflow: hidden;
    width: 350px;
  }
  .contactContent a {
    color: white;
    text-decoration: none;
  }

.foot {
  height: 200px;
  padding-top: 60px;
  text-align: center;
  width: 100%;
}
  .foot h4 {
    font-family: "Damion", cursive;
    font-size: 22px;
  }
  .foot img {
    margin: 20px 20px 20px 20px;
  }
  .foot p {
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    font-size: 14px;
  }