@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {

    
    
}/*ends mobile query*/
/*************************************************************************************************************/
/*begins tablet query*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {

    
    
}/*ends tablet query*/
/*************************************************************************************************************/
/*begins laptop query*/
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { 

    @import url(http://weloveiconfonts.com/api/?family=brandico|fontelico|maki);

    /* maki */
    [class*="maki-"]:before {
      font-family: 'maki', sans-serif;
      color: white;
      font-size: 20px;
    }
    [class*="brandico-"]:before {
      font-family: 'brandico', sans-serif;
      color: white;
      font-size: 30px;
    }
    [class*="fontelico-"]:before {
      font-family: 'fontelico', sans-serif;
      color: white;
      font-size: 20px;
    }
    /* Initial note*/

    * {
      box-sizing: border-box;
      list-style: none;
      text-decoration: none;
    }

    h1 {
      font-family: 'Obritron', sans-serif, arial;
        text-align: center;
    }
    
    #home {
        width: 100%;
        height: 2em;
    }

    #logo {
      height: 150px;
      width: 250px;
/*      position: absolute;*/
      bottom: 40em;
      left: 35em;
    }

    #socialLinks {
        margin-right: 48em;
    }
    #socialLinks li {
        float: right;
        padding-left: 80px;
        margin-top: 15px;
    }

    .blackBar1 {
        background-color: rgba(28, 27, 27, 0.63);
        color: #F9F1D0;
        height: 60px;
    }

    .blackBar1 ul {
      margin-left: 7em;
    }


    .blackBar1 li {
      padding-top: .5em;
      font-size: 30px;
      margin-left: 180px;
      float: left;
    }
    .blackBar1 a {
      text-decoration: none;
      color: #F9F1D0;

    }

    .blackBar2 {
        background-color: rgba(28, 27, 27, 0.63);
        color: #F9F1D0;
        height: 60px;
        margin: 1em 0;
    }

    .blackBar3 {
        background-color: rgba(241, 112, 72, 0.63);
        color: #F9F1D0;
        height: 60px;
        position: relative;
        bottom: 0;
    }

    .blackBar3 li {
      position: relative;
      bottom: .7em;
      left: 17em;
      font-size: 20px;
      margin-left: 180px;
      float: left;
    }

    .blackBar3 a {
      color: #F9F1D0;
    }

    .blackBar3 span {
      position: relative;
      top: 1.5em;
      left: .3em;
    }

    #container {
      background-image: url("assets/grey-background.jpg");
    }

    .firstContainer {
      border: solid 1px black;
      width: 100%;
      border-style: none;
      padding: 2em 0 0 4em;

    }

    #newsProducts {
      display: inline-block;
      border: solid 2px #e0e0e0;
      border-radius: 5px;
      width: 500px;
      height: 250px;
      overflow: auto;
      background-color: white;
      padding: 1em;
      box-shadow: 2px 2px 8px white;
      background-color: rgba(227,227,227,0.63);
      color: #121212;
    }
    #theSpecials {
      font-size: 20px;
      display: inline-block;
      border: solid 2px #e0e0e0;
      border-radius: 5px;
      width: 500px;
      height: 250px;
      overflow: auto;
      background-color: white;
      padding: 1em;
      margin-left: 7em;
      background-color: rgba(227,227,227,0.63);
      box-shadow: 2px 2px 8px white;
      color: #121212;
    }

    #aboutUs {
      font-size: 18px;
      display: inline-block;
      border: solid 2px #e0e0e0;
      border-radius: 5px;
      width: 500px;
      height: 250px;
      overflow: auto;
      background-color: white;
      padding: 1em;
      margin-top: 1em;
      background-color: rgba(227,227,227,0.63);
      box-shadow: 2px 2px 8px white;
      color: #121212;
    }

    .header {
      height: 100%;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }

    .header h1 {
      font-size: 7em;
      color: #FBF5D8;
      position: absolute;
      top: 1.5em;
    }

    .header img {
      height: 200px;
      width: 93%;
      margin: 0 5em;
      background-image: center;
      background-size: contain;
    }
    
    .header ul {
      position: absolute;
      top: 150px;
      right: 605px;
      list-style: none;
    }

    #menu {
      overflow: hidden;
      margin: 2em auto;/*was 2em 0 0 9em*/
      width: 90%;/*was 955px*/
      overflow: auto;
    }

    #menu h3 {
       background: rgba(241, 112, 72, 0.63);
       color:#F9F1D0;
       cursor:pointer;
       margin:0 0 1px 0;
       padding: 20px 0;
        text-align: center;
    }
    #menu h3.current {
       background: rgba(250, 121, 81, 0.63) ;
       cursor:default;
    }
    #menu div.dropDown {
       padding:5px 10px;
       max-height: auto;
    }

    #filler {
        height: 400px;
        width: 100%;
    }

    #beerProducts {
        color: #e8e8e8;
    }

    #entreeProducts {
        color: #e8e8e8;
    }

    #gamesProducts {
        color: #e8e8e8;
    }

    #specialProducts {
        color: #e8e8e8;
    }

    #beerName {
      text-transform: uppercase;
      font-weight: bold;
      color:;
    }

    #entreeName {
      text-transform: uppercase;
      font-weight: bold;
      color:;
    }

    #gameName {
      text-transform: uppercase;
      font-weight: bold;
      color:;
    }
    .photoContainer {
      margin-top: 2em;
      margin-left: 7em;
    }

    .photoContainer img {
     width: 30%;
     height: 30%;
     margin: 1%;
     border: 1px solid #F9F1D0 ;
    }
    
    .slide img {
        width: 351px;
        height: 263px;
    }

    #reservations {
      height: 50px;
    }

    form {
    margin: 0 auto;
    margin-right: 10px;
    width: 500px;
    height: 450px;
    padding:1em;
    border: 1px solid black;
    border-radius: 1em;
    background-color: white;
    display: inline-block;
    }

    form div + div {
       margin-top: 4em;
    }

    label {
    display: inline-block;
    width: 90px;
    text-align: right;
    }

    input {
    font: 1em sans-serif;
    width: 300px;
    }


    .button {
      padding-left: 90px;
    }

    button {
      margin-left: .5em;
      height: 3em;
      width: 7em;
      border-radius: 30%;
      background-color: #343838;
    }

    button a {
      color: white;
    }

    #bottomContainer {
      width: 100%;
    }


    #reservationForm {
    position: relative;
    left: 4em;
    bottom: 2.5em;
    box-shadow: 2px 2px 8px white;
    background-color: rgba(227,227,227,0.63);
    }

    #reservationForm h2 a {
      color: #343838;
    }

    #map {
      width: 590px;
      height: 450px;
      position: relative;
      left: 2em;
      top: .3em;
    }

    #commentSection{
      height: 450px;
      background-color: rgba(227,227,227,0.63);
      box-shadow: 2px 2px 8px white;
      color: #121212;
      position: relative;
      left: 6em;
      top: .3em;
    }
    
    textarea{
      width: 100%;
      height: 100px;
    }

    .comButton {
      position: relative;
      bottom: 40px;
    }

    #comments a {
      color: #343838;
    }

    @media (max-width: 1024px) {
      min-width: 500px; 
    }
    
}/*ends laptop query*/
/************************************************************************************************************/
/*begins large screen query*/
@media only screen  and (min-width: 1824px) {

    @import url(http://weloveiconfonts.com/api/?family=brandico|fontelico|maki);

    /* maki */
    [class*="maki-"]:before {
      font-family: 'maki', sans-serif;
      color: white;
      font-size: 20px;
    }
    [class*="brandico-"]:before {
      font-family: 'brandico', sans-serif;
      color: white;
      font-size: 30px;
    }
    [class*="fontelico-"]:before {
      font-family: 'fontelico', sans-serif;
      color: white;
      font-size: 20px;
    }
    /* Initial note*/

    * {
      box-sizing: border-box;
      list-style: none;
      text-decoration: none;
    }

    h1 {
      font-family: 'Obritron', sans-serif, arial;
    }

    #logo {
      height: 350px;
      width: 500px;
      position: absolute;
      bottom: 40em;
      left: 35em;
    }

    #socialLinks{
        margin-right: 48em;
    }
    #socialLinks li{
        float: right;
        padding-left: 80px;
        margin-top: 15px;
    }

    .blackBar1 {
        background-color: rgba(28, 27, 27, 0.63);
        color: #F9F1D0;
        height: 60px;
    }

    .blackBar1 ul {
      margin-left: 26em;
    }


    .blackBar1 li {
      padding-top: .5em;
      font-size: 30px;
      margin-left: 180px;
      float: left;
    }
    .blackBar1 a {
      text-decoration: none;
      color: #F9F1D0;

    }

    .blackBar2 {
        background-color: rgba(28, 27, 27, 0.63);
        color: #F9F1D0;
        height: 60px;
        margin: 1em 0;
    }

    .blackBar3 {
        background-color: rgba(241, 112, 72, 0.63);
        color: #F9F1D0;
        height: 60px;
        position: relative;
        bottom: 1em;
    }

    .blackBar3 li {
      position: relative;
      bottom: .7em;
      left: 17em;
      font-size: 20px;
      margin-left: 180px;
      float: left;
    }

    .blackBar3 a {
      color: #F9F1D0;
    }

    .blackBar3 span {
      position: relative;
      top: 1.5em;
      left: .3em;
    }

    #container {
      background-image: url("assets/grey-background.jpg");
    }

    .firstContainer {
      border: solid 1px black;
      width: 100%;
      border-style: none;
      padding: 2em 0 0 6em;

    }


    #newsProducts {
      display: inline-block;
      border: solid 2px #e0e0e0;
      border-radius: 5px;
      width: 500px;
      height: 250px;
      overflow: auto;
      background-color: white;
      padding: 1em;
      box-shadow: 2px 2px 8px white;
      background-color: rgba(227,227,227,0.63);
      color: #121212;
    }
    #theSpecials {
      font-size: 20px;
      display: inline-block;
      border: solid 2px #e0e0e0;
      border-radius: 5px;
      width: 500px;
      height: 250px;
      overflow: auto;
      background-color: white;
      padding: 1em;
      margin-left: 7em;
      background-color: rgba(227,227,227,0.63);
      box-shadow: 2px 2px 8px white;
      color: #121212;
    }


    #aboutUs {
      font-size: 18px;
      display: inline-block;
      border: solid 2px #e0e0e0;
      border-radius: 5px;
      width: 500px;
      height: 250px;
      overflow: auto;
      background-color: white;
      padding: 1em;
      margin-left: 7em;
      background-color: rgba(227,227,227,0.63);
      box-shadow: 2px 2px 8px white;
      color: #121212;
    }



    .header {

      height: 100%;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }

    .header h1 {
      font-size: 200px;
      color: #FBF5D8;
      position: absolute;
      top: 175px;
      left: 500px;
    }


    .header img {
      height: 200px;
      width: 93%;
      margin: 0 5em;
      background-image: center;
      background-size: contain;
    }
    .header ul {
      position: absolute;
      top: 150px;
      right: 605px;
      list-style: none;
    }



    #menu {
      overflow: hidden;
      margin: 2em auto;/*was 2em 0 0 9em*/
      width: 90%;/*was 955px*/
      overflow: auto;
    }

    #menu h3 {
       background: rgba(241, 112, 72, 0.63);
       color:#F9F1D0;
       cursor:pointer;
       margin:0 0 1px 0;
       padding: 20px 0;
        text-align: center;
    }
    #menu h3.current {
       background: rgba(250, 121, 81, 0.63) ;
       cursor:default;
    }
    #menu div.dropDown {
       padding:5px 10px;
       max-height: auto;
    }

    #filler {
        height: 400px;
        width: 100%;
    }

    #beerProducts {
        color: #e8e8e8;
    }

    #entreeProducts {
        color: #e8e8e8;
    }

    #gamesProducts {
        color: #e8e8e8;
    }

    #specialProducts {
        color: #e8e8e8;
    }

    #beerName {
      text-transform: uppercase;
      font-weight: bold;
      color:;
    }

    #entreeName {
      text-transform: uppercase;
      font-weight: bold;
      color:;
    }

    #gameName {
      text-transform: uppercase;
      font-weight: bold;
      color:;
    }
    .photoContainer {
      margin-top: 2em;
      margin-left: 7em;
    }

    .photoContainer img {
     width: 30%;
     height: 30%;
     margin: 1%;
     border: 1px solid #F9F1D0 ;
    }

    #reservations {
      height: 50px;
    }

    form {
    margin: 0 auto;
    margin-right: 10px;
    width: 600px;
    height: 450px;
    padding:1em;
    border: 1px solid black;
    border-radius: 1em;
    background-color: white;
    display: inline-block;
    }

    form div + div {
       margin-top: 4em;
    }

    label {
    display: inline-block;
    width: 90px;
    text-align: right;
    }

    input{
    font: 1em sans-serif;
    width: 300px;
    }


    .button{
      padding-left: 90px;
    }

    button {
      margin-left: .5em;
      height: 3em;
      width: 7em;
      border-radius: 30%;
      background-color: #343838;
    }

    button a {
      color: white;
    }

    #bottomContainer {
      width: 100%;
    }


    #reservationForm {
    position: relative;
    left: 4em;
    bottom: 2.5em;
    box-shadow: 2px 2px 8px white;
    background-color: rgba(227,227,227,0.63);
    }

    #reservationForm h2 a {
      color: #343838;
    }

    #map {
      width: 590px;
      height: 450px;
      position: relative;
      left: 2em;
      top: .3em;
    }

    #commentSection{
      height: 450px;
      background-color: rgba(227,227,227,0.63);
      box-shadow: 2px 2px 8px white;
      color: #121212;
      position: relative;
      left: 6em;
      top: .3em;
    }
    textarea{
      width: 100%;
      height: 100px;
    }

    .comButton {
      position: relative;
      bottom: 40px;
    }

    #comments a {
      color: #343838;
    }

    @media (max-width: 1024px) {
      min-width: 500px; 
    }
    
}/*ends large screen query*/