*,.container,.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {padding:0;margin:0}
body {
    overflow-x: hidden;background-color:#000;
    background-size: 100% auto;margin:0;
    background-attachment: fixed;color:#fff;
  }

  #reel {overflow:hidden;background-color:#000}

.content-section p {
    padding: 0 10%;
    line-height: 140%;
    font-size: 18px;
    margin-bottom: 20px;
    color: #fff;font-weight:bold;
    font-family: 'Roboto Mono', monospace;
  }
  @media (max-width: 1100px) {
    .content-section p {font-size:16px}
}   
  @media (max-width: 600px) {
    .content-section p {font-size:15px;line-height: 150%;}
}    
#reel a {font-weight: bold;color:#c94f32 !important;text-decoration:none}
a:hover {text-decoration:underline}
.roboto {font-family:'Roboto Mono' !important;}
.baloo {font-family:'Baloo Bhai', cursive !important;}

  #reel h1, #reel h2, #reel h3, #reel h4 { 
    font-family: 'Baloo Bhai', cursive;  
  }
  #reel h3 {
    text-align: left;  
    font-size: 48px;line-height: 46px;
    margin-bottom: 20px;padding:0 10% 0 0;
  }

  video {width:100%;}
  #logoVid {position: absolute;bottom:0;display:none}

  .landing {
    background: #000;
    height: 100vh !important;
  }
  .landing .credit {
    position: absolute;
    left:2%;
    font-size:11px;
  }
  p.credit {
    position: absolute;
    font-size:11px;
    color:#fff;
    padding:0 10px !important;
    margin:0;
    bottom:1%;
    width:98%;
  }
  .rightcredit {text-align: right !important}
  @media (max-width: 500px) {
    .credit {line-height: 100%}
}    

  .landing div {
    width: 100%;
    text-align: center;
    display: inline-block;
  }

  .sharing {color:#fff;font-weight: bold;position:relative}
  .sharing i {
    color: #fff;cursor: pointer;
    font-size: 25px;
    margin: 0 10px;
  }
  .sharing i:hover {
    -webkit-transform: scale(1.05) translateY(-2px);
    transform: scale(1.05) translateY(-2px);
  }

  .landing div p {
    color: #fff;
    font-size: 15px;
    font-style: italic;
    position: relative;
    padding: 0;
  }

  .landing div div {
    width: auto;
  }

  .landing .logo {
    width: 50%;
    vertical-align: bottom;
    margin: 0px auto 80px 25%;text-align: center;
  }

  .landing .logo img {
    width: 100%;
    margin-top: 190px;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  
  @media (max-width: 1100px) {
    .landing .logo {
        width: 60%;margin-left:20%;
      }
  }
  @media (max-width: 992px) {
 /*   .landing .byline {
      width: 45%;
      text-align: right;
      padding-right: 40px;
    }

    .landing .sharing {
      width: 55%;
      display: inline;
    }*/
    .landing .sharing {
      width: 100%;
      text-align: center;
      display: inline-block;
    }
  }
  @media (max-width: 600px) {
    /*.landing .byline {
      width: 40%;
    }
    .landing .sharing {
      width: 60%;
    }*/
    .landing .sharing {
      width: 100%;
      text-align: center;
      display: inline-block;
    }
  }

  @media (max-width: 500px) {
    /*.landing .byline, .landing .sharing {
      width: 100%;
      display: block;
      text-align: center;
    }

    .landing .byline {
      padding-top: 35px;
      padding-right: 0;
    }*/
    .landing .logo {height:300px;}

    .landing .sharing {
      padding-top:12px;
    }
  }

  .landing h1 {
    color: #fff;
    font-family: 'rift-soft', sans-serif;
    font-size: 5.65em;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    line-height: 40%;
    margin-top: 8%;
    text-shadow: 1px 3px 5px #333333;
  }

  .landing h1 span {
    font-size: 15px;
    font-family: Montserrat, sans-serif;
  }

  @media (max-width: 550px) {
    .landing h1 span {
      font-size: 12px;
    }
  }

  @media (max-width: 350px) {
    .landing h1 span {
      font-size: 9.5px;
    }
  }

  @media (max-width: 768px) {
    .landing h1 {
      font-size: 4.25em;
    }
  }

  @media (max-width: 550px) {
    .landing h1 {
      font-size: 3em;
      line-height: 50%;
    }
  }

  @media (max-width: 350px) {
    .landing h1 {
      font-size: 2.5em;
    }
  }

  .line__stretch {
    height: 1px;
    width: 100% !important;
    background-color: #fff;
    display: inline-block;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
  }

  .left {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);float:none;
  }

  .right {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);width:50%;float:none;
  }

  .fadein {
    opacity: 0;
  }
  p.fadein,h3.fadein { -webkit-transform: translateX(-5%);
    transform: translateX(-5%);}

  .scaleZero {
    -webkit-transform: scale(0);transform: scale(0);
  }

  .content-section {
    position: relative;width: 100%;max-width: none;
    margin: auto;background-color:#000;
  }

table {width:100%;height:100%;vertical-align: middle;text-align: center;position: absolute; top: 0;left: 0;}
.half {width:50%;text-align: left;margin-left:5%}
.halfright {width:50%;text-align: left;right:0;left:auto}

.bg {width:100%;height:100%}
.mobile {display:none}

#compare {height:400px;background-color:#000}
#compare div {width:50%;height:100%;display: inline-block;background-size:cover;background-position: center;}
#compare .right {background-image:url('../jpg/kansascity.jpg');position:absolute;left:50%}
#compare .left {background-image:url('../jpg/stlouis.jpg');}
#compare p {padding:0 20%}

#mmmbbq {line-height:0}
#mmmbbq img {width:100%}
#mmmbbq div {position:absolute;top:20%;margin-left:5%;width:800px}
#mmmbbq p {padding-left:5%}
#mmmbbq p, #mmmbbq h3 {text-shadow: 2px 3px 10px black;color:#fff}
#mmmbbq .credit {bottom:150px}

#kcity {color:#000 !important;background-image:url('../png/kc-bbq.png');background-position: center;background-size:cover;
    background-repeat:no-repeat;height:900px;background-color:transparent;margin-top:-11%;z-index:100}
#kcity table {position: relative;margin-left: 32%;width:55%}
#kcity p {padding-left:10%;color:#000 !important;text-align:left}
#kcity .credit {bottom:15%}

#jazz {margin-top: -190px;}

#gates {color:#000 !important;background-image:url('../png/bbq-tray.png');background-position: center;background-size:cover;
   height:500px;overflow: hidden;}
#gates table {position: relative;margin-left:0}
#gates p {padding-left:10%;text-align:left;text-shadow: 4px 2px 4px black;}
#gates img {width:90%;top:24%;position: absolute;max-width:1400px;right:0}
#gates .credit {width:100%}

#stl {background-image:url('../png/grill-flames.png');background-position: center;background-size:cover;
    background-repeat:no-repeat;height:1100px;background-color:transparent}
#stl table {position: relative;margin-left: 20%;width:65%}
#stl p {padding-left:10%;text-align:left}
#stl h3 {color:#fff}

#videos {background-image:url('../jpg/stl-videos.jpg');background-size:cover;padding:150px 0;margin-top:-400px}
.vid-container-right {padding:5% 8% 0 0}
.vid-container-left {padding:5% 0 0 8%}
.video {position: relative;line-height:0}
.video video {height:100%}
.play {width:100%;height:100%;position:absolute;top: 0;}
.play img {top:50%;left:50%;position: absolute;margin-left:-22px;margin-top:-25px}
.video-text {height:100%;}
.row div,.video-text table {min-height:400px}
.video-text p {text-align:left}
#sugarfire div,#bogarts div {overflow: hidden}
#sugarfire,#bogarts {background-color:transparent}
#sugarfire .credit {bottom:-20px;width:95%}
#bogarts .credit {left:7%;bottom:-20px;z-index:100} 

#route66 {background-image:url('../png/r66.png');background-position: center;background-size:cover;overflow: hidden;
    background-repeat:no-repeat;height:900px;background-color:transparent;margin-top:-250px}
#route66 table {position: relative;}
#route66 p {padding-left:5%;padding-right:0;text-align:left;text-shadow: 4px 2px 4px black;}
#route66 h3 {color:#fff;text-shadow: 4px 2px 4px black;}

#loufest {background-color:transparent;margin-top:-5%}
#loufest table {position: absolute;width:66%;vertical-align: top;margin-left:17%}
#loufest table td {vertical-align: top}
#loufest table div {padding-top:15%}
#loufest p {padding:0;text-align:center}

#picnic {height:400px;margin-top:-400px}
#picnic p {text-align:center;padding:0;width:50%;margin-left:25%}
#picnic img {width:100%;position: absolute;top:0px}


@media (max-width: 1600px) {
    #picnic {margin-top:-370px}
    #picnic img {top:25px}
}
@media (max-width: 1500px) {
    #stl {height:900px}
    #videos {margin-top:-300px}
    #picnic  {margin-top:-350px}
    #picnic p {width:60%;margin-left:20%}
}
@media (max-width: 1400px) {
    #picnic  {margin-top:-320px}
    #picnic img {top:45px}
}
@media (max-width: 1250px) {
    #kcity {margin-top:-14%}
    #gates .half {margin-left:0}
    #gates img {right:0px;top:37%}
    #compare p {padding:0 10%}
    .row div,.video-text table {min-height:350px}
    #route66 .sign {top:-3%;left:-5%}
    #picnic  {margin-top:-280px}
    #picnic p {width:66%;margin-left:17%}
    #picnic img {top:70px}
}
@media (max-width: 1100px) {
    .half {width:70%}
    .halfright {width:100%}
    #route66 .half {width:50%}
    #mmmbbq .credit {bottom: 90px;}
    #kcity table {margin-left: 20%;width:66%}
    video {width:120%}
    #sugarfire .credit,#bogarts .credit {bottom:-5px;}
    #gates {height:475px}
    #gates td {vertical-align: top;}
    #gates td div {margin-top:15%}
    #gates img {width:96%;right:55px}
    #jazz {padding-bottom:200px}
    #jazz video {width:130%;margin-left:-15%}
    #jazz table {margin-top:130px;vertical-align:bottom}
    #jazz td {vertical-align:bottom}
    #jazz p {padding: 0 7%;}
    #picnic {margin-top:-250px}
    #picnic img {top:90px}
}
@media (max-width: 1000px) {
    #sugarfire .credit, #bogarts .credit { bottom: 25px;}
    #stl {height:1000px}
    #picnic {margin-top:-220px}
    #picnic img {width:112%;margin-left:-5%;top:110px}
}
@media (max-width: 900px) {
    video {width:133%}
    #sugarfire .credit, #bogarts .credit {bottom: -10px;}
    #gates img {width:100%;top:39%}
    #loufest img {width:125%;margin-left:-14%}
    #gates .half {width:90%}
    #jazz table {margin-top:140px;}
    .row div,.video-text table {min-height:320px}
    #route66 {background-position: 65% center}
    #picnic {height:300px}
    #picnic img {top:45px}
}
@media (max-width: 800px) {
    video {width:160%}
    #mmmbbq div {width:600px}
    #gates .half,.half {width:100%}
    #gates img {width:110%;top:auto;bottom:0;right:60px}
    #gates p {padding: 0 7%;}
    #route66 .sign {display:none}
    #loufest img {width:140%;margin-left:-22%}
    #picnic {height:400px}
    #picnic img {top: auto;bottom: 0;width:125%;}
    #jazz table {top:auto;bottom:5%}
    #kcity h3 {padding:0}
    #sugarfire .credit, #bogarts .credit {bottom: -22px;}
}
@media (max-width: 767px) {
    #videos {padding-top:250px}
    #videos video {left: 50%;width: 300px;margin: 0 0 0 -150px;position: absolute;}
    #sugarfire .credit, #bogarts .credit {bottom: auto;top: 320px;text-align: center !important;left: 0;}
    .vid-container-right, .vid-container-left {padding:0}
    #sugarfire .desktop {display:none}
    #sugarfire .mobile {display:block}
    #sugarfire .mobile table {position: unset}
    #stl table {margin-left: 10%;width: 85%;}
    #stl table div {margin-top:-100px}
    .landing .logo {width: 70%;margin-left:15%;}
    #mmmbbq {padding-bottom: 400px;}
    #mmmbbq div {width:95%;margin-top: 250px}
    #mmmbbq .credit {bottom:auto;top:15px}
}
@media (max-width: 650px) {
    video {    width: 200%;margin-left: -50%;}
    #kcity {margin-top: -21%;}
    #mmmbbq table {margin-top: 40px;}
    #mmmbbq div {margin-top: 220px}
    #kcity table,#stl table {margin-left: 10%;width: 86%;}
    #jazz {padding-bottom:300px}
    #loufest table,#picnic p {width:90%;margin-left: 5%;}
    #loufest img {width:150%;margin-left:-28%}
    #route66 .desktop {display:none}
    #route66 .mobile {display:block}
    #route66 table {position: absolute; top: auto;bottom: 10%;height: auto;}
    #route66 p {padding: 0 10%;}
    #route66 h3 { padding-left: 5%;}
    #gates img {width:120%;}
    .video-text, .video-text table {height:300px}
    .row div,.video-text table {min-height:300px}
}
@media (max-width: 550px) {
    #videos {padding-top:350px}
    .desktop {display:none}
    .mobile {display:block}
    #mmmbbq img {width:auto;height:300px;}
    #mmmbbq div {margin-top: 180px;}
    #picnic p {width:90%;margin-left: 5%;}
    #loufest {padding-bottom: 350px;}
    #loufest table {height: auto;top: 45%;}
}
@media (max-width: 500px) {
    #jazz  {padding-bottom: 100%;}
    video {width: 300%;margin-left: -100%;}
    #mmmbbq .credit {bottom: 40px;}
    #picnic {margin-top:-200px}
    #picnic img {width:140%}
}
@media (max-width: 450px) {
    #jazz  {padding-bottom: 115%;}
    .video-text, .video-text table {height:350px}
    .row div,.video-text table {min-height:350px}
    #sugarfire .credit, #bogarts .credit {margin-top:20px}
    #mmmbbq img {margin-left:-40px}
}
@media (max-width: 400px) {
    #jazz  {padding-bottom: 135%;}
    #stl {height:750px}
    .video-text, .video-text table {height:390px}
    .row div,.video-text table {min-height:390px}
    #reel h3 {font-size: 30px;line-height: 33px;}
    #gates img {width: 150%;right: 20px;}
    #route66 {height:800px}
    #picnic {margin-top:-150px}
    #mmmbbq img {margin-left:-80px}
}


#end {position: relative}
#end .credit {left:2%;}
.full-width .back-to-top {position: absolute;bottom:15%;right:5%;width:47px;cursor: pointer;transition:.3s all}
.full-width .back-to-top:hover {bottom:16%}