body {
background-color:#000;
background-image:url(../img/westbrook-beach-rev.jpg);
background-attachment:fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
width:100%;
height:100vh;
overflow-x:hidden;
padding:0; 
margin:0;
}

#topbar {
background-image:url(../bg/red-wood.jpg);
width:100%;
height:8vh;
position:absolute;
top:0;
left:0;
}

#videos {
width:100%;
height:20%;
height:auto;
margin-left:19.5%;
margin-top:12vh;
position:absolute;
top:9%;
left:0;
pointer-events: none;
z-index:-9999;
}

/*
#vid1, #vid2, #vid3 {
float:left;
width:23% !important;
height:auto !important;
margin-right:2%;
pointer-events: none;
border:5px solid grey;
}
*/

#pic1, #pic2, #pic3 {
float:left;
width:23% !important;
height:auto !important;
margin-right:2%;
pointer-events: none;
}

#pic3m {
display:none;
}



#mobile-navigation {
display:none;
}


#logo {
width:17%;
position:absolute;
left:2%;
top:11vh;
z-index:9999;
}

#logo-inside {
width:20%;
position:absolute;
left:2%;
top:9.5vh;
z-index:9999;
}

#topbar ul#nav {
margin-left:13%;
}

#topbar ul#nav-inside {
margin-left:14%;
}


#topbar ul li {
float:left; 
margin:0.5% 0 0 4%;
font-size:1.75em;
//text-transform:uppercase;
font-family:Georgia;
font-weight:600;
list-style-type: none;
}

#topbar ul li a span {
text-transform:none;
font-style:italic;
}

#topbar ul li a {
color:#efdaa8;
text-decoration:none;
}

#topbar ul li a:hover {
color:#fff;
transition: .5s;
}



#truck {
z-index:9999;
width:35%;
    position: absolute;
    left: 26%;
bottom:9.5vh;
    //margin: 7em -244px;
margin-left:-200px;
    animation: slide 4s 1;
}
@keyframes slide {
    from { left: -150%; }
    to { left: 26%; }
}

#address {
background-image:url(../bg/red-wood.jpg);
width:100vw;
text-align:center;
padding-top:15px;
padding-bottom:15px;
z-index:9999;
//position:absolute;
//bottom:0;
//left:0;
}

#address-mobile {
display:none;
}

#address p#full {
font-size:1.60vw;
color:#efdaa8;
}

#address p#mobile {
display:none;
color:#f2e4ce;
}

#footer {
background-image:url(../bg/red-wood.jpg);
width:100vw;
text-align:center;
padding-top:20px;
padding-bottom:20px;
color:#fff;
margin-bottom:0;
z-index:9999;
}



#address-mobile {
display:none;
}

#footer-m {
display:none;
}


/* Menu */

.menu, .catering {
background-color:#000;
width:100%;

margin:64px 0 0 0;
}


#bbq-menu {
  background:url(../bg/menu-bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#bbq-menu-content {
margin:3% 5% 0 48%;
padding-top:2%;
padding-left:2vw;
padding-bottom:26vh;
}

#lobster-menu {
  background:url(../bg/lobster-roll.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
height:105vh;
padding: 11vh 60vw 10vh 5vw
}

#lobster-menu-content-m {
display:none;
}

#grill-menu {
  background:url(../bg/grill.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}



#left-menu {
float:left;
width:45vw;


}

#right-menu {
float:left;
width:45vw;

}


#bbq-menu p {
color:#f0d781;
font-size:1.25vw;
margin:0;
padding:5px 0 5px 0;
}

#lobster-menu p {
color:#f7e8b5;
font-size:1.3vw;
margin:0;
padding:6px 0 5px 0;;
}

#grill-menu-content {
margin:0 5% 0 48%;
padding-top:2%;
padding-left:2vw;
padding-bottom:35vh;
}

#grill-menu p {
color:#f0d781;
font-size:1.25vw;
margin:0;
padding:3px 0 8px 0;
}

#grill-menu-content-m {
display:none;
}

#sides-left, #toppings-left  {
float:left;
margin-right:20px;
}

#sides-right, #toppings-right  {
margin-left:50px;
}

.menu h2, h2 {
color:#fbce97;
font-size:1.7vw;
margin:0;
padding:36px 0 0 0;
color:#fbdcb7;
}

.menu h3, h3 {
color:#fbce97;
font-size:1.4vw;
margin:0;
padding:12px 0 6px 0;
}

.smaller {
font-size:1.1vw;.
font-style:italic;
}

#pig-wings {
float:right;
width:26%;
margin-top:-5vh;
margin-left:1vw;
margin-right:7vw;
}


.fade-in-text {

  animation: fadeIn linear 1s;
  -webkit-animation: fadeIn linear 1.5s;
  -moz-animation: fadeIn linear 1.5s;
  -o-animation: fadeIn linear 1.5s;
  -ms-animation: fadeIn linear 1.5s;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

h1 {
font-size:2.5em;
color:#fff;
}



.hog {
z-index:9999;
   animation: fadeIn linear 1s;
  -webkit-animation: fadeIn linear 1.5s;
  -moz-animation: fadeIn linear 1.5s;
  -o-animation: fadeIn linear 1.5s;
  -ms-animation: fadeIn linear 1.5s;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

#mobile-catering-text {
display:none;
border:none;
}