/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, 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;
}
body {
	line-height: 1;
}
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;
}
/* RESEST CSS ^^ */

/* General and Desktop */
#header{
    background:url(Images/heroimage.png) center top no-repeat;
    background-size:cover;
    padding-bottom:50px;
}

h1{
    font-family: din-2014-narrow, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 8vw;
    text-align:center;
    color:white;
}
#inferno{
    padding-top: 20vw;
    padding-bottom:20vw;
}
img{
    width:100%;
}
#container{
    max-width:1440px;
    margin:auto;
}

#limage{
    width:4.390208333333333%;
    align-content:center;
}

#maintext{
    font-family: din-2014-narrow, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size:48px;
    text-align:center;
    color:white;
}
.navbar {
   width: 100%;
   box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
   background:#303030;
 }
 
 .nav-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 62px;
 }
 
 .navbar .menu-items {
   display: flex;
 }
 
 .navbar .nav-container li {
   list-style: none;
 }
 
 .navbar .nav-container a {
   text-decoration: none;
   color: #ffffff;
   font-weight: 500;
   font-size: 1.2rem;
   padding: 0.7rem;
   font-family: din-2014-narrow, sans-serif;
   font-weight: 600;
   font-style: normal;
   font-size:36px;
 }
 
 .navbar .nav-container a:hover{
     font-weight: bolder;
 }
 
 .nav-container {
   display: block;
   position: relative;
   height: 60px;
 }
 
 .nav-container .checkbox {
   position: absolute;
   display: block;
   height: 32px;
   width: 32px;
   top: 20px;
   right: 20px;
   z-index: 5;
   opacity: 0;
   cursor: pointer;
 }
 
 .nav-container .hamburger-lines {
   display: block;
   height: 26px;
   width: 32px;
   position: absolute;
   top: 17px;
   right: 20px;
   z-index: 2;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
 .nav-container .hamburger-lines .line {
   display: block;
   height: 4px;
   width: 100%;
   border-radius: 10px;
   background: #ffffff;
 }
 
 .nav-container .hamburger-lines .line1 {
   transform-origin: 0% 0%;
   transition: transform 0.4s ease-in-out;
 }
 
 .nav-container .hamburger-lines .line2 {
   transition: transform 0.2s ease-in-out;
 }
 
 .nav-container .hamburger-lines .line3 {
   transform-origin: 0% 100%;
   transition: transform 0.4s ease-in-out;
 }
 
 .navbar .menu-items {
   padding-top: 120px;
   box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
   height: 100vh;
   width: 100%;
   transform: translate(-150%);
   display: flex;
   flex-direction: column;
   margin-left: -40px;
   padding-left: 50px;
   transition: transform 0.5s ease-in-out;
   text-align: center;
   background:#303030;
   justify-content:center;
 }
 
 .navbar .menu-items li {
   margin-bottom: 1.2rem;
   font-size: 1.5rem;
   font-weight: 500;
 }
 
 .logo {
   position: absolute;
   top: 5px;
   right: 15px;
   font-size: 1.2rem;
   color: #0e2431;
 }
 
 .nav-container input[type="checkbox"]:checked ~ .menu-items {
   transform: translateX(0);
 }
 
 .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
   transform: rotate(45deg);
 }
 
 .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
   transform: scaleY(0);
 }
 
 .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
   transform: rotate(-45deg);
 }
 
 .nav-container input[type="checkbox"]:checked ~ .logo{
   display: none;
 }

#navlogo{
    display:flex;
    justify-content:center;
}

.navbar{
   display:none;
}

nav{
    background:#303030;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items: center;
}

a{
    color:white;
    font-family: din-2014-narrow, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size:30px;
    text-decoration:none;
    padding:25px;
}

#button{
    background-color:#C00303;
    border-radius:50px;
}
*{
   transition:all 0.5s;
}

h2{
    color: #C00303;
    font-family: din-2014, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size:24px;
    text-align:center;
}

#ourmission{
    display:flex;
    padding-top:305px;
}

#stk1{
    /* 600px divided by 1440px */
    width:150vw;
    padding-left:64px;
    padding-right:85px;
    padding-top:50px;
}

#stktext{
    border-left:#C00303;
    border-left-style: solid;
    border-left-width:1vw;
    display:flex;
    flex-direction:column;
    display:table-caption;
    
    
    
}
#bullogo {
    width: 40px;
    height: 100%;
}

#favcol{
    display:flex;
    justify-content:space-around;
    padding-top:125px;
}

.col{
    width:28.472222222222222%;
    
}

#reservation{
    background:#303030;
    width:100%;
    text-align:center;
    margin-top:165px;
    padding-bottom:37px;
}
h3{
    font-family: din-2014-narrow, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size:96px;
    color:white;
    padding-top:92px;
 }
 h4{
    font-family: din-2014-narrow, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:48px;
    color:white;
    padding:12px;

 }

#boxes{
    display:flex;
    justify-content:space-between;
    padding-top:10px;
}

 #name{
    width:22.5694444%;
    background:white;
    text-align:left;
    padding:5px;
    margin-left:20vw;
 }
 #Phone{
    width:22.5694444%;
    background:white;
    text-align:left;
    padding:5px;
    margin-right:20vw;
 }

 h5{
    font-family: din-2014, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size:30px;
    color:#303030;
 }

 h6{
    font-family: din-2014-narrow, sans-serif;
    font-weight: 700;
    font-style: normal;
    color:white;
    font-size:5vw;
    padding:5vw;
    text-align:center;
 }

 #ourmission{
    background:url(Images/OUR\ MISSION.png) left top no-repeat;
    padding-top:126px;
    margin-top:126px;
    margin-left:42px;
 }
 #favorites{
    background:url(Images/FAVORITES.png) left top no-repeat;
    margin-top:126px;
    margin-left:42px;
 }

 #location{
    display:flex;
    background:url(Images/FIND\ US.png) left top no-repeat;
    margin-top:126px;
    margin-left:42px;
    padding-bottom:125px;
    padding-top:50px;
 }
 #map{
    width:40vw;
    padding-right:64px;
    padding-left:85px;
    padding-top:150px;
    padding-bottom:150px;
 }
 
 #adloc{
    border-right:#C00303;
    border-right-style: solid;
    border-right-width:1vw;
    display:flex;
    flex-direction:column;
    text-align:right;
    display:table-caption;
    justify-content:right;
    align-content:end;

 }

 #footer{
    background:#303030;
    display:flex;
 }
 #left{
    justify-content:center;
    width:33.333333333333%;
 }
 #links{
    display:flex;
    flex-direction:column;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    padding-top:130px;
    padding-bottom:95px;
 }
 .linkb{
    color:white;
    font-family: din-2014-narrow, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size:36px;
    text-decoration:none;
 }
 #middle{
    width:33.333333333333%;
    display:flex;
    align-items:center;
    flex-direction:column;
 }
 #blogo{
    width:8vw;
    padding-top:75px;
 }
 #btext{
    text-align:center;
 }
 #ftext{
    font-family: din-2014-narrow, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size:54px;
    text-align:center;
    color:white;
 }

 #right{
    width:33.333333333333%;
    justify-content:center;
    align-content:center;
    
 }
 #socials{
    display:flex;
    justify-content:space-between;
    padding-top:10px;
 }
 #twitter{
   padding-right:105px;
   padding-left:105px;
 }

#wpl{
   color: #C00303;
   font-family: din-2014-narrow, sans-serif;
   font-weight: 700;
   font-style: normal;
   font-size:8vw;
   text-align:left;
   word-spacing: unset;
   display: table-caption;
   padding-left:70px;
}
#wpl2{
   color: #C00303;
   font-family: din-2014-narrow, sans-serif;
   font-weight: 700;
   font-style: normal;
   font-size:8vw;
   display: table-caption;
   text-align:right;
   word-spacing: unset;
   padding-right:70px;
   padding-left:25vw;
   padding-top:125px;
}
#statement{
   padding-left:71px;
   text-wrap:wrap;
   padding-right:45px;
   font-family: din-2014-narrow, sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size:22px;
   line-height: 156.6%; /* 34.452px */
   letter-spacing: 2.42px;
}

#hours{
   font-family: din-2014-narrow, sans-serif;
   font-weight: 600;
   font-style: normal;
   font-size:40px;
   color:white;
   align-content:center;
}
#times{
   display:flex;
   flex-direction:column;
   margin-left:auto;
   margin-right:auto;
   text-align:center;
   padding-top:200px;
   padding-bottom:95px;
}
#days{
   font-family: din-2014-narrow, sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size:26px;
   color:white;
}

.add{
   font-family: din-2014-narrow, sans-serif;
   font-weight: 600;
   font-style: normal;
   font-size:3vw;
   color:#C00303;
   
}
#address{
   padding-right:70px;
   padding-left:170px;
}
#address2{
   display:none;
}

/* MENU PAGE CSS */
#headerm{
   background:none;
}

#mhero{
   background:url(Images/halfhero.png) center center no-repeat;
   margin-bottom:10%;
}
#ahero{
   background:url(Images/about_hero.png) center center no-repeat;
   margin-bottom:10%;
}
#chero{
   background:url(Images/contact_hero.jpg) center center no-repeat;
   margin-bottom:10%;
}

#mherotxt{
   font-family: din-2014-narrow, sans-serif;
   font-weight: 700;
   font-style: normal;
   font-size:80px;
   color:white;
   padding-top:10%;
   padding-bottom:10%;
}
#contact{
   text-align:center;
   margin-left:18%;
   margin-right:18%;
}
#ch2{
   font-size:40px;
}
#cherotext{
   font-family: din-2014-narrow, sans-serif;
   font-weight: 700;
   font-style: normal;
   font-size:80px;
   color:white;
   padding-top:10%;
   padding-bottom:10%;
   
}
.ch3{
   text-align:left;
   font-size:36px;
}
#alignleft{
   text-align:left;
}
#cherotxt{
   font-family: din-2014-narrow, sans-serif;
   font-weight: 700;
   font-style: normal;
   font-size:80px;
   color:white;
   padding-top:10%;
   padding-bottom:10%;
}
.storytxt{
   font-family: din-2014-narrow, sans-serif;
   font-weight: 600;
   font-style: normal;
   text-align:center;
   font-size:28px;
   line-height: 140%; /* 34.452px */
   letter-spacing: 2.42px; 
   padding:1.5%;
   color:#303030;
}
#story{
   margin-left:18%;
   margin-right:18%;
}
#hook{
   font-size:36px;
   font-family: din-2014-narrow, sans-serif;
   font-weight: 700;
   font-style: normal;
   color:#C00303;
}

#appetizer{
   margin-left:6.9%;
   margin-right:6.9%;
   padding-top:10%;
   background:url(Images/MENU.png) left top no-repeat;
   background-size:auto;
}
#salads{
   margin-left:6.9%;
   margin-right:6.9%;
   padding-top:5%;
}
#steaks{
   margin-left:6.9%;
   margin-right:6.9%;
   padding-top:5%;
}
#grill{
   margin-left:6.9%;
   margin-right:6.9%;
   padding-top:5%;
}
#sides{
   margin-left:6.9%;
   margin-right:6.9%;
   padding-top:5%;
}
#dessert{
   margin-left:6.9%;
   margin-right:6.9%;
   padding-top:5%;
}

.section{
   font-family: din-2014-narrow, sans-serif;
   font-weight: 700;
   font-style: normal;
   font-size:80px;
   text-align:left;
   color:#C00303;
   padding-right:25px;
}
.margins{
   margin-left:6.9%;
   margin-right:6.9%;
   display:flex;
   align-content:center;
}
.rectangle{
   background:#C00303;
   width:100%;
   height:15px;
   margin-top:34px;
}
#grec{
   width:56%;
   background:#C00303;
   height:15px;
   margin-top:34px;
}
.menu-container{
   margin-left:6.9%;
   margin-right:6.9%;
   margin-top:1%;
   display:flex;
   flex-wrap:wrap;
   justify-content:space-between;
}
.items{
   padding:0;
   color:#303030;
   font-family: din-2014-narrow, sans-serif;
   font-weight: 600;
   font-style: normal;
   font-size:33px;
   text-align:center;
   color:#303030;
}
.column3{
   width:29.894037066881547%;
}
.column2{
   width:40.211925866236906%;
}
.description{
   text-align:center;
   font-family: din-2014-narrow, sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size:20px;
   color:#303030;
}
.price{
   font-family: din-2014-narrow, sans-serif;
   font-weight: 600;
   font-style: normal;
   font-size:26px;
   color:#303030;
   text-align:center;
}
#footer{
   margin-top:10%;
}







/* Tablet CSS */
@media screen and (max-width:975px){


  

   #navbar
   
   .navbar{
      display:block;
   }

   #header{
      background-size:contain;
   }

   #ourmission{
      background-size:contain;
      background:top top;
      background-size:90vw;
      background-position:top center;
      margin-right:42px;
   }

   #favorites{
      background-size:contain;
      background:top top;
      background-size:75vw;
      background-position:top center;
   }

   #location{
      background-size:contain;
      background:top top;
      background-size:50vw;
      background-position:top center;
   }
   .normal{
      display:none;
   }
   nav{
      display:block;
   }
   #stk1{
      width:350vw;
   }
   #paragraph{
      display:none;
   }
   #stktext{
      padding-top:75px;
   }
   #favorites{
      flex-wrap:wrap;
   }
   .col{
      width:43.165467625899281%;
   }
   #favcol{
      flex-wrap:wrap;
   }
   #pork{
      display:none;
   }
   #ppork{
      display:none;
   }
   #boxes{
      display:block;
      align-items:center;
      margin:auto;
   }
   #name{
      margin:auto;
      margin-bottom:35px;
   }
   #Phone{
      margin:auto;
   }
   #map{
      width:350vw;
   }
   #wpl2{
      padding-left:84px;
   }
   #address{
      padding-left:25px;
   }
   #socials{
      display:none;
   }
   #footer{
      display:flex;
      flex-wrap:wrap;
   }
   #left{
      width:50%;
      order: 2;
   }
   #right{
      width:50%;
      order: 3;
      align-items:center;
   }
   #middle{
      width:100%;
      order:1;
   }
   .linkb{
      font-size:44px;
   }
   #hours{
      font-size:44px;
   }
   #days{
      font-size:34px;
      line-break:auto;
   }
   #navbar{
      display:none;
   }
   .navbar{
      display:block;
   }

#appetizer{
   background:url(images/MENU.png) center top no-repeat;
   background-size:30vw;
}
#grec{
   width:36%;
}





}
@media screen and (max-width:834px){


   .ch3{
      text-align:center;
   }
   #alignleft{
      text-align:center;
   }

   #story{
      margin-left:10%;
      margin-right:10%;

   }



   #grec{
      width:26%;
   }
   #mherotxt{
      font-size:64px;
   }
   #cherotxt{
      font-size:64px;
   }
   .menu-container{
      display:flex;
      flex-wrap:wrap;
   }
   .column3{
      width:50%;
      padding-top:2%;
   }
}

@media screen and (max-width:510px){

#header{
   background-size:cover;
   margin-bottom:50px;
}

#ourmission{
   margin:auto;
   padding-top:50px;
}
#stk1{
   display:none;
}
#stktext{
   border:none;
   display:block;
   padding:0;
   width:100%;
   margin:auto;
}
#wpl{
   padding:0;
   margin:auto;
   display:block;
   text-align:center;
}
#paragraph{
   display:block;
   font-size:18px;
   text-align:center;
}

#favorites{
   margin:auto;
   margin-top:40px;
}
#favcol{
   padding-top:75px;
}
#mixed{
   display:none;
}
#mmixed{
   display:none;
}
.col{
   width:100%;
}
h3{
   font-size:50px;
   padding-top:30px;
}
h4{
   font-size:26px;
}
#Phone{
   width:67.175572519083969%;
}
#name{
   width:67.175572519083969%;
}
h6{
   font-size:7vw;
}
#location{
   margin:auto;
   padding-top:50px;
   margin-top:50px;
   padding-bottom:50px;
   display:block;
}
#map{
   width:100%;
   padding:0;
}
#adloc{
   border:none;
   text-align:center;
   display:block;
}

#wpl2{
   display:block;
   padding:0;
   padding-top:10px;
   text-align:center;
}
#address{
   display:none;
}
#address2{
   text-align:center;
   padding-top:10px;
   display:contents;
}
.add{
   font-size:6vw;
}
#left{
   display:none;
}
#right{
   margin:auto;
   width:100%;
   padding-left:85px;
   padding-right:85px;
   order:2;
}
#times{
   padding-top:25px;
   padding-bottom:50px;
}

/* Menu Page */






}



@media screen and (max-width:393px){



   #story{
      margin-left:1%;
      margin-right:1%;

   }
   .storytxt{
      font-size:16px;

   }
   #hook{
      font-size:20px;
      
   }

   #header{
      background-size:contain;
      padding:0;
      margin-bottom:25px;
   }
   #inferno h1{
      font-size:48px;
   }
   #statement{
      font-size:18px;
      padding-left:5px;
      padding-right:5px;
      line-height:120.6%;
   }
   #reservation{
      margin-top:40px;
   }
   h6{
      font-size:9vw;
   }
   #wpl2{
      font-size:11vw;
   }
   .add{
      font-size:8vw;
   }
   #middle{
      padding-left:53px;
      padding-right:53px;
   }
   #ftext{
      font-size:40px;
   }
   #blogo{
      width:15vw;
   }
   #right{
      padding-left:50px;
      padding-right:50px
   }
   #hours{
      font-size:34px;
   }
   #days{
      font-size:30px;
   }

   /* Menu Page */
   #mherotxt{
      font-size:48px;
      text-wrap:wrap;
      padding-left:12.7226463%;
      padding-right:12.7226463%;
   }
   #cherotxt{
      font-size:48px;
      text-wrap:wrap;
      padding-left:12.7226463%;
      padding-right:12.7226463%;
   }
   .section{
      font-size:42px;
   }
   .items{
      font-size:28px;
   }
   .description{
      font-size:18px;
   }
   .class{
      font-size:24px;
   }
   .rectangle{
      margin-top:12px;
   }
   .margins{
      margin-right:0;
      margin-left:3.45%;
   }
   #appetizer{
      margin:0;
   }
   #salads{
      margin:0;
   }
   #steaks{
      margin:0;
   }
   #grill{
      margin:0;
   }
   #sides{
      margin:0;
   }
   #dessert{
      margin:0;
   }
   #grec{
      width:24%;
      margin-top:12px;
   }
   .menu-container{
      margin-left:4.32569975%;
      margin-right:4.32569975%;
      display:block;
   }
   .column3{
      width:100%;
   }
   .column2{
      width:100%;
   }
   .items{
      text-align:left;
   }
   .description{
      text-align:left;
   }
   .price{
      text-align:left;
      padding:0;
      padding-bottom:10px;
   }

   .ch3{
      font-size:28px;
   }
   #ch2{
      font-size:36px;
   }
   #contact{
      margin-left:1%;
      margin-right:1%;
   }

}