/* W3.CSS 4.04 Apr 2017 by Jan Egil and Borge Refsnes */

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */

img{border-style:none}
button{font:inherit;margin:0}
button{overflow:visible}button{text-transform:none}
button{-webkit-appearance:button}
button::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring{outline:1px dotted ButtonText}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */
html{overflow-x:hidden}img{margin-bottom:-5px}
.w3-button{border:none;display:inline-block;outline:0;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-button:disabled{cursor:not-allowed;opacity:0.3}:disabled *{pointer-events:none}
.w3-display-container{position:relative}
.w3-content{max-width:100%;margin:auto}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-button:hover{color:white!important;background-color:rgb(192,30,45)!important}
/* Colors */
.w3-black{color:#fff!important;background-color:#000!important}

#container {
 min-height: 100%;
 position: relative;
 text-align: center;
}

#header {
 padding: 1em;
 color: white;
 background: black; 
 text-align: center;
 display: block;
}

#navContainer {
width: 100%;
display: inline-block;
text-align: center;
background-color: rgb(190, 30, 45);
}

#contactContainer {
width: 100%;
display: inline-block;

}

#menu {
width: 80%;
display: inline-block;
text-align: center;
background-color: rgb(190, 30, 45);
}

#cocktailmenu {
width: 80%;
display: inline-block;
text-align: center;
background-color: rgb(190, 30, 45);
font-family: Majesti, "Majesti Banner";
}

#content {
 padding-bottom: 70px;
 background-color: rgb(65, 57, 61);
 text-align: center;
}

#footer {
 height: 50px;
 line-height: 50px;
 left:0px;
 bottom:0px;
 position: absolute;
 width: 100%;
 display: inline-block;
 color: white;
 background: black;
 font-family: Majesti, "Majesti Banner Regular";
 text-align: center;
 vertical-align: center;
 clear: both;
}

#thumbnails .block{
    display: block;
    text-align: center;
    border: 0px;
    overflow: hidden;
    width: 100%;
}

#social .iconSize {
 width: 27px;
 }

#aboutUs {
 width: 75%;
 display: inline-block;
 text-align: center;
}

#restaurant {
 width: 75%;
 display: inline-block;
 text-align: center;
}

.socialMargin {
  margin: 10px 0px 0px 0px;
}

.header img {
  background: black;
  width:100%;
  float: left;
  overflow: hidden;
}

.logoSize {
  width: 80%;
  margin-bottom: 5px;
}

.socialHour {
  width: 80%;
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 10px;
}

.center {
  margin: auto;
  width: 80%;
  padding: 10px;
  text-align: center;
}

ul.navBar {
 list-style-type: none;
 border: 0;
 margin: 0;
 padding: 0;
 overflow: hidden;
 width: 80%;
 background-color: rgb(190, 30, 45);
 font-family: Athelas;
 text-align: center;
 display: inline-block;
}

ul.menuCategory {
 list-style-type: none;
 border: 0;
 margin: 0;
 padding: 0;
 overflow: hidden;
 width: 80%;;
 background-color: rgb(190, 30, 45);
 font-family: Majesti, "Majesti Banner";
 text-align: center;
 display: inline-block;
}

ul.cocktails {
 text-align: center;
 display: inline-block;
 list-style-type: none;
 border: 0;
 margin: 0;
 padding: 0;
 overflow: hidden;
 width: 80%;;
 background-color: rgb(190, 30, 45);
}

ul.cocktails2 {
 list-style-type: none;
 border: 0;
 margin: 0;
 padding: 0px 0px 20px 0px;
 overflow: hidden;
 width: 80%;;
 background-color: black;
 text-align: center;
 display: inline-block;
}

ul.menuFood {
 text-align: center;
 list-style-type: none;
 border: 0;
 margin: 0;
 padding: 0;
 overflow: hidden;
 width: 100%;
 background-color: black;
 font-family: Majesti, "Majesti Banner";
}

li.menuDescription {
 font-size: 10pt;
 margin: -20px 0px 10px 0px;

}

li.item {
 display: inline-block;
 margin-left: 20px;
}

li.price {
 display: inline-block;
 margin-left: 10px;
 color: rgb(190, 30, 45);
}

li.cocktailName {
 font-size: 14pt;
}

li.cocktailDesc {
 font-size: 10pt;
 margin-top: -20px;
}

li.navList {
 display: inline-block;
 vertical-align: top;
}


li.navList a {
 float: right;
 display: block;
 color: white;
 text-align: center;
 padding: 14px 14px 14px 14px;
 text-decoration: none;
}

li.navList a:hover {
 background-color: maroon;
}

li.cocktailList {
 display: inline-block;
 text-align: center;
 list-style-type: none;
 border: 0;
 margin: 0;
 padding: 0;
 overflow: hidden;
 width: 80%;
 font-family: Majesti, "Majesti Banner";
}

li.contact {
 list-style-type: none;
 text-align: center;
 display: block;
 padding: 10px;
 margin: 0;
 background-color: rgb(190, 30, 45);
}

li.hours {
 list-style-type: none;
 text-align: center;
 display: block;
 padding: 10px;
 margin: 0;
 background-color: black;
}

html,
body {
 text-align: center;
 margin: 0;
 padding: 0;
 height: 100%;
 font-family: Majesti, "Majesti Banner Regular";
 color: white;
 background-color: rgb(65, 57, 61);
}

p {
 margin-left: 10px;
 margin-right: 10px;
 font-family: Majesti, "Majesti Banner Regular";
}

a {
 color: rgb(190, 30, 45);
 text-decoration: none;
}

a:hover {
 color: rgb(190, 30, 45);
 text-decoration: underline;
}

a:visited {
 color: rgb(190, 30, 45);
 text-decoration: none;
}

a.imageLink {
  text-decoration:none;
  
}

input[type=text], select, textarea {
 width: 100%;
 padding: 5px;
 border: 0px;
 border-radius: 0px;
 box-sizing: border-box;
 margin-top: 6px;
 margin-bottom: 15px;
 resize: vertical;
}

#comments {
 width: 100%;
 height: 200px;
 padding: 5px;
 border: 0px;
 border-radius: 0px;
 box-sizing: border-box;
 margin-top: 6px;
 margin-bottom: 15px;
 resize: vertical;
}

input[type=submit] {
 background-color: rgb(190, 30, 45);
 color: white;
 padding: 12px 20px;
 border: none;
 border-radius: 4px;
 cursor: pointer;
}

input[type=submit]:hover {
 background-color: maroon;
}

.contactForm {
  border-radius: 0px;
  background-color: black;
  padding: 20px;
  display: inline-block;
  width: 90%;
  vertical-align: middle;
}


/*                            */
/* RESPONSIVE CSS BEGINS HERE */
/*                            */

@media screen and (min-width: 790px) {

a {
 color: rgb(190, 30, 45);
 text-decoration: none;
}

a:hover {
 color: rgb(190, 30, 45);
 text-decoration: underline;
}

a:visited {
 color: rgb(190, 30, 45);
 text-decoration: none;
}

ul.navBar {
 text-align: right;
 list-style-type: none;
 border: 0;
 margin: 0;
 padding: 0;
 overflow: hidden;
 width: 100%;
 background-color: rgb(190, 30, 45);
 font-family: Athelas;
}

ul.menuCategory {
 text-align: left;
 list-style-type: none;
 border: 0;
 margin: 0;
 padding: 0;
 overflow: hidden;
 width: 100%;
 background-color: rgb(190, 30, 45);
 font-family: Majesti, "Majesti Banner";
}

ul.menuFood {
 text-align: left;
 list-style-type: none;
 border: 0;
 margin: 0;
 padding: 0;
 overflow: hidden;
 width: 100%;
 background-color: black;
 font-family: Majesti, "Majesti Banner";
}

ul.cocktails {
 text-align: center;
 list-style-type: none;
 border: 0;
 margin: 0;
 padding: 0;
 overflow: hidden;
 width: 70%;;
 display: inline-block;
}

ul.cocktails2 {
 list-style-type: none;
 border: 0;
 margin: 0;
 padding: 0px 0px 20px 0px;
 overflow: hidden;
 width: 70%;;
 background-color: black;
 text-align: center;
 display: inline-block;
}

li.cocktailHead {
 margin: 0;
}

li {
 margin-left: 0px;
}

li.price {
 float: right;
 margin-right: 60px;
 display: inline-block;
 color: rgb(190, 30, 45);
}

li.menuDescription {
 font-size: 10pt;
 margin-left: 30px;
}

li.cocktailName {
 font-size: 14pt;
}

li.cocktailDesc {
 font-size: 10pt;
 margin-top: -20px;
}

.logoSize {
  width: 380px;
}

.socialHour {
  width: 70%;
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 10px;
}

#header {
 padding: 1em;
 color: white;
 background: black; 
 text-align: left;
 }

#social {
 display: inline-block;
 padding: 1em;
 color: white;
 background: black; 
 text-align: right;
 float: right;
 vertical-align: middle;
 }

#social .iconSize {
 width: 47px;
 padding-right: 20px;
 }

#aboutUs {
 width: 40%;
 display: inline-block;
 text-align: left;
 float: left;
 margin-left: 50px;
}

#restaurant {
 width: 45%;
 display: inline-block;
}

.socialMargin {
  margin: 23px 0px 0px 0px;
}

#thumbnails .block{
  padding-top: 20px;
  display: inline-block;
  text-align: center;
  border: 0px;
  overflow: hidden;
  width: 33%;
  vertical-align: top;
}

#navContainer {
width: 100%;
}

#cocktailmenu {
text-align: center;
width: 70%;
list-style-type: none;
display: inline-block;
background-color: rgb(190, 30, 45);
font-family: Majesti, "Majesti Banner";
}

li.cocktailList {
 display: inline-block;
 text-align: center;
 list-style-type: none;
 overflow: hidden;
 width: 100%;
 font-family: Majesti, "Majesti Banner";
}

#contactContainer {
margin: 0 auto;
text-align: center;
width: 30%;
height: 100%;
display: inline-block;
overflow: hidden;
}

li.contact {
 list-style-type: none;
 text-align: center;
 display: block;
 padding: 10px;
 margin: 0;
 background-color: rgb(190, 30, 45);
 width: 100%;
}

li.hours {
 list-style-type: none;
 text-align: center;
 display: block;
 padding: 10px;
 margin: 0;
 background-color: black;
 width: 100%;
}

.contactForm {
  border-radius: 0px;
  margin-top: 20px;
  background-color: black;
  padding: 20px;
  display: inline-block;
  height: 100%;
  width: 90%;
  vertical-align: top;
}


.w3-button{border:none;display:inline-block;outline:0;padding:50px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}

.w3-content{max-width:90%;margin:auto}

}

@media screen and (min-height: 1070px) {

#contactContainer {
margin: 0 auto;
text-align: center;
width: 30%;
height: 780px;
display: inline-block;
overflow: hidden;
}

#comments {
 width: 100%;
 height: 430px;
 padding: 5px;
 border: 0px;
 border-radius: 0px;
 box-sizing: border-box;
 margin-top: 6px;
 margin-bottom: 15px;
 resize: vertical;
}

.logoSize {
  width: 480px;
}

.w3-button{border:none;display:inline-block;outline:0;padding:50px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}

.w3-content{max-width:90%;margin:auto}

}

@media screen and (max-height: 600px) {

#contactContainer {
margin: 0;
text-align: center;
width: 30%;
height: 335px;
display: inline-block;
overflow: hidden;
}

#comments {
 width: 100%;
 height: 50px;
 padding: 5px;
 border: 0px;
 border-radius: 0px;
 box-sizing: border-box;
 margin-top: 6px;
 margin-bottom: 15px;
 resize: vertical;
}

input[type=text], select, textarea {
 width: 100%;
 padding: 2px;
 border: 0px;
 border-radius: 0px;
 box-sizing: border-box;
 margin-top: 2px;
 margin-bottom: 10px;
 resize: vertical;
}

#thumbnails .block{
  padding-top: 20px;
  display: inline-block;
  text-align: center;
  border: 0px;
  overflow: hidden;
  width: 32%;
  vertical-align: top;
}

.w3-button{border:none;display:inline-block;outline:0;padding:50px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}

.w3-content{max-width:90%;margin:auto}

}