/* Box Model Hack */

* {
  box-sizing: border-box;
}

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

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/
html{
  font-size: 62.5%;
}

body {
  margin: 1% 2%;
  background-color: rgb(29, 34, 40);
}
h1,h2,h3,h4,h5,h6,p,a,li,label{  
  color: rgb(220, 220, 220);
}

h1{
  font-size: 4.4rem;
}
h2{
  font-size: 3.0rem;
}
h3{
  font-size: 3.0rem;
}
h4{
  font-size: 2.4rem;
}
h5{
  font-size: 2.1rem;
}
h6{
  font-size: 1.8rem;
}
header a{
  font-size: 2.1rem;
}
a{
  font-size: 1.8rem;
}
p{
  font-size: 2.1rem;
}
label, input, button{
  font-size: 2.1rem;
}
li{
  font-size: 2.1rem;
}

header a, h4{  
  color: rgb(5, 133, 212);
}
/******************************************
/* LAYOUT
/*******************************************/
/******************** header style ***********************/
header{
  display: flex;
  flex-direction: row;
  align-items: center;
}
header img{
  flex-basis: 20%;
}
header nav{
  flex-basis: 80%;
  text-align: right;
}
header a{
  text-decoration: none;
  /*color: black;*/
  padding-bottom: 5px;
  border-bottom: 3px solid rgb(179, 179, 179);
}

#logo{
  height: 80px;
  width: 240px;
}
li {  
  display: inline-block;
  list-style: none;
  padding: 0 5% 0 0%;
}

/******************** main style ***********************/
main{
  height: 500px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 30px 0;
}
.left-main-sect,
.right-main-sect {
  flex: 1;
  padding: 30px 5%;
}
.left-main-sect *{
  text-align: left;
}
.left-main-sect h1{
  text-shadow: 2px 2px 5px gray;
}

/******************** food style ***********************/
#favFood{
  /*background-color: rgb(245, 245, 245);*/
  background-color: rgb(22, 25, 30);
  padding: 0 5%;
}

.upper-food-sect,
.lower-food-sect{
  display: flex;
  flex-direction: row;
}
.upper-food-sect{
  padding: 30px 0 0 0;
}
.lower-food-sect{
  padding: 0 0 30px 0;
}

.food{
  flex: 1;
  margin: 20px 1% 20px 1% ;
  padding: 1% 2% 0% 2%;
  /* box-shadow: rgba(77, 77, 208, 0.2) 0px 7px 29px 0px; */
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    
}

#food1, #food2, #food3, #food4, #food5, #food6{ 
  height: 250px;
  width: 100%;
  padding: 15px 0 0 0;
  object-fit: cover;
  background-color: 
}

.food p{
  text-align: justify;
}

/******************** feedback style ***********************/
#feedback{
  height: 350px;
  padding: 50px 5%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#feedback > *{
  flex:1;
  padding: 0 3%;
}
form label{
  display: inline-block;
  text-align: left;
  width: 25%;
  margin: 10px 0;
}
form input{
  display: inline-block;
  height: 1.5em;
  width: 73%;
  margin: 10px 0;
}
form #comments{
  height: 90px;
}
form button{
  display: block;
  margin: 10px auto 0 auto;
  padding: 0.25em 1em ;
  text-align: center;
  border-radius: 10px;
  background-color: #55ACEE;
}
#feedback .form-text{
  text-align: center;
}

/******************** location style ***********************/
#location{
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 360px;
  padding: 30px 5%;
  /* background-color: rgb(245, 245, 245);   */
  background-color: rgb(22, 25, 30);
}
#location *{
  flex: 1;
}
#location h2,
#location p{
  padding: 0 5%;
  text-align: center;
}

/*************** map style ****************/
.mapouter{
  position:relative;
  text-align:right;
  width:540px;
  height:300px;
}
.gmap_canvas {
  overflow:hidden;
  background:none!important;
  width:540px;
  height:300px;
}
.gmap_iframe {
  width:540px!important;
  height:300px!important;
}
/*************** footer style ****************/
footer{
  height: 410px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-content{
  flex-basis: 75%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: top;
  padding: 50px 5%;
}
.footer-content > *{
  flex: 1;
  padding: 0 2%;
}
.footer-content h4
{  
  padding-bottom: 5px;
  border-bottom: 1px solid rgb(179, 179, 179);
}
.footer-content ul{
  padding-left: 0;
}
.footer-content li{  
  list-style: none;
  display: block;
  padding: 5px 0;
}
/*************** ob-banner style ****************/
.ob-banner{
  flex-basis: 25%;
  background-color: black;
  color: lightgray;
  font-family: sans-serif;
  padding: 1% 0;
  width: 100%;
  height: 100px;
}
.ob-banner p{  
  font-size:2.1rem;
  text-align:center;
  margin: 0;
}
.ob-banner div{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.ob-banner div a{
  margin: 5px 0;
}

/******************************************
/* TWITTER LOGO
/*******************************************/
.fa {
  padding: 0.5rem;  
  font-size:2.1rem;
  width: 4rem;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}
/* Github */
.fa-github {
  background: white;
}
/******************************************
/* ADDITIONAL STYLES
/*******************************************/