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; }

html, body {
  height: 100%; }

/* END RESET */

@font-face {
    font-family: 'brandon2';
    src: url('fonts/brandon2/brandon_light-webfont.eot');
    src: url('fonts/brandon2/brandon_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/brandon2/brandon_light-webfont.woff2') format('woff2'),
         url('fonts/brandon2/brandon_light-webfont.woff') format('woff'),
         url('fonts/brandon2/brandon_light-webfont.ttf') format('truetype'),
         url('fonts/brandon2/brandon_light-webfont.svg#dk_crayon_crumbleregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




* {
  box-sizing: border-box; }

video#bgvid {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background: black;
  background-size: cover; }

a:link{text-decoration: none;
color:whitesmoke;}
a:hover{text-decoration: none; color:whitesmoke;}
a:visited{text-decoration: none; color:whitesmoke;}
a:active{text-decoration: none; color:whitesmoke;}

#logo {
  top: 1px;
  width: 100%;
  height: 30%;
  margin-top: 20%;
  position: fixed;
  z-index: -99; }

#wrapper {
    font-family: 'brandon2', helvetica;
    font-size: 1rem;
    line-height: 1.5rem;
  margin-top: 100%; 

}

#map {
  width: 100%; }

.gm-style-iw * {
  display: block;
  width: 100%; }

.gm-style-iw h4, .gm-style-iw p {
  margin: 0;
  padding: 0; }

.gm-style-iw a {
  color: #4272db; }

.float-left {
  float: left;
  margin: 0 0 0 20px; }

.float-right {
  float: right;
  margin: 0 20px 0 0; }

.center {
  font-size: 2.5em;
  padding: 80px 0;
  text-align: center; }

.header {
  width: 80%; }

#nav {
  list-style: none;
  position: fixed;
  right: 20px;
  width: 25px; }

#nav li {
  margin: 0 0 15px 0; }

#intro {
  background: url(images/blueback.svg);
  background-size: cover;
  color: whitesmoke;
  height: 1000px;
  width: 100%;
  padding-left: 10%; 
}

#contact {
  padding-top: 8%; }

#PlanetTrog {
  height: 1000px;
  width: 100%; }

.story {
  margin: 0 auto;
  width: 100%; }

#nav {
  position: fixed;
  z-index: 100;
  list-style: none;
  left: 1%; }

#nav li {
  margin: 0 0 15px 0; }

#second {
  background: url(images/lightblueback.svg);
  background-size: cover;
  color: whitesmoke;
  height: 1000px;
  width: 100%;
  padding-left: 10%; 
}

.header {
    clear:both;
    margin: 10% 0;
}

#left, #right, #map{
width: 50%;
}

#days, #hours {
  text-align: right;
    float: left;
  width: 46%;
    padding: 2%;
}
#days{
padding-left: 0; 
}
#hours {
    text-align: left;
    overflow: hidden;
}


.icon {
    width: 70%;
    margin: 20% 0;
    
}

#right {
margin: 20% 0;
width: 100%;
}

#right2 {
margin: 20% 0;
width: 80%;
}

#rates {
  text-align: left;
  float: left;
  width: 90%;
  padding: 2%;
}

#concerts {
  text-align: left;
  float: left;
  width: 90%;
  padding: 2%;
}

.icon2 {
    width: 100%;
    margin: 20% 0;
    padding-right: 10%;
}


.scrollbar{
margin: 20% 2%;
width:50%;
height:600px;
overflow-y:scroll;
}
#bands{
    height:450px;
    font-size: .8rem;
} 

::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}



#music {
    margin-left: 65%;
    margin-top: -15%;
}







#third {
  background: url(images/blueback.svg);
  color: whitesmoke;
  height: 1000px; 
}

#fourth {
  background: url(images/lightblueback.svg);
  background-size: cover;
  color: whitesmoke;
  height: 1000px; 
}

#fifth {
  background: url(images/splitback.svg);
  background-size: contain;
    color: whitesmoke;
  height: 1140px;
  margin: 0 auto; 
}


.foodarcade{
    text-align: center;
    margin-top: 6%;
    margin-left: 31%;
    width: 52%;
}






.story {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
  width: 100%;
  padding-left: 5%; 
  //max-width: 1230px;
}

.story .float-left, .story .float-right {
  position: relative;
  width: 100%; }

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }
.swing {
    margin: 15%;
  width: 55%;
  height: auto;
  animation: swing 2s infinite alternate;
  -webkit-animation: swing 2s infinite; }








@media screen and (max-width: 600px) {
    #bgvid {
    display: none;
    }
    html, body{
        font-size: 1.3rem;
    background-color: black;
        margin: 0 auto;
    }
    #nav {
    display: none;
    }
    #wrapper{
    width: 100%;
    }
    
    #intro, .story, #left, #right, #right2, #map, #PlanetTrog{
    width: 100%;
    display: inline-block;
    height: 100%;
    margin:0;
        padding: 10px;
    }
    .icon{
    margin: -40px 0;
    }
    .swing{
    margin: -20px 0;
    margin-left:20%;
    }
    #PlanetTrog {
    height: 200px;
    }
    .header{
    width: 80%;
        margin-left: 10%;
    }
    
    #intro, #second, #third, #fourth, #fifth{
        width: 100%;
    height: 100%;}
    #rates {
    width: 100%;
        height: 100%;
    }
    
    .icon2 {
    margin: -10% 0;
    }
    #music{
    margin:0 25%;
    }
    #pizza, .scrollbar{
    display: none;
    }
    .foodarcade{
    width: 80%;
        margin-left: 19%;
    }
    
    #arcade{
    width: 55%;
        margin-left: 40%;
        margin-top: -100px;
    }
}