html {
    font-size: 1em;
    line-height: 1.4;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    
    font: 16px/26px Helvetica, Helvetica Neue, Arial, sans-serif;
    font-family:  Helvetica, Helvetica Neue, Arial, sans-serif;
    padding-top: 80px;
    overflow-x: hidden!important;
    overflow-y: scroll;
    scrollbar-color: #63C7C7 #666666;
    scrollbar-width: thin;
}

body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
/* border-radius: 10px; */
background-color: #666666;
}
  
body::-webkit-scrollbar-thumb {
background-color: #63C7C7;
border: 3px solid transparent;
border-radius: 9px;
background-clip: content-box;
}
*::-webkit-scrollbar {
width: 12px;
}

*::-webkit-scrollbar-track {
/* border-radius: 10px; */
background-color: #666666;

}

*::-webkit-scrollbar-thumb {
background-color: #63C7C7;
border: 3px solid transparent;
border-radius: 9px;
background-clip: content-box;
}

* {
scrollbar-color: #63C7C7 #666666;
scrollbar-width: thin;
}

iframe{
 overflow: hidden;
}

iframe.center{
    margin: 0 auto;
    display: block;
}

#header {
    width: 100%;
    max-width: 1920px;
    margin:  0px auto;
    box-sizing: border-box;
    padding:  0px 40px;
}

.header-container {
    border-bottom: 20px solid #fff;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 500;
}

.reload-text {
    font-family:  Helvetica, Helvetica Neue, Arial;
    display: none;
    float:  left;    
    padding: 0;
    top: 0;
    color: #222222;
    margin: 0;
    line-height: 80px;
}

#brand-logo{
    position: relative;
    width: auto;
    height: 50px;
    left: 10px;
    /*top: 10px;*/
}

#reload_btn{
    display: table;
    vertical-align: middle;
    background: none;
    height: 100%;
    text-align: right;
    border: none;
    color: #e81f23;
    width: 100px;
    margin-right: 20px;
    float: right;
}



#reload_btn:focus{
  outline: none;
}

#reload-icon{
    margin-top: 20px;
    float: right;
    width: 60px;
    vertical-align:  middle;
    
    
}

.right{
    float: none;
}

.left{
    float: none;
}

.left-col{
    width: 100%;
}
.right-col{
    width: 100%;
}

.shadow{
    -webkit-box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.41);
box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.41);
}

.campaign-name{
    text-align: center;
    font-size: 16px;
    padding-top: 60px;
}

.city-name{
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 16px;
    margin: 0 auto;
    border-radius: 60px;
    width: 90%;
    -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.33);
    box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.33);
}

p.banner-title{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ===================
    ALL: Orange Theme
   =================== */

.footer-container,
.main aside {
    border-top: 20px solid #e81f23;
}

.header-container,
.footer-container,
.main aside {
    background: #fff;
       border-bottom: 5px solid #0172BC;
}

.title {
    color: white;
}



/* ==========================================================================
   Author's custom styles
   ========================================================================== */





 .billboard-visible{
    display: none!important;
  }


 .leaderboard-visible{
    display: none!important;
  }

  /* ==========================================================================
   View On Desktop
   ========================================================================== */

.view_on_desktop_leaderboard {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 300px;
}

.view_on_desktop_billboard {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 300px;
}

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

    .view_on_desktop_leaderboard {
        display: none!important;
    }

    .view_on_desktop_billboard {
        display: none!important;
    }

}



/* ==========================================================================
   Theme Switcher
   ========================================================================== */


   .dark-theme {
    background: #000;
    color: #fff;
}

.dark-theme .city-name{
    background-color: #000;
    color: #fff;
    border: 2px solid white;
}

.dark-theme .replay-banner {
    color: #fff;
    border: 2px solid #fff;
}

.light-theme {
    background: #fff;
    color: #000;
}

.light-theme .city-name{
    background-color: #e2e2e2;
    color: #000;
    border: none;
}

.light-theme .replay-banner {
    color: #8C8C8C;
    border: 2px solid #8C8C8C;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {
  .leaderboard-visible{
        display: none!important;
   }

    #reload_btn{
        right: 0px;
    }

    #header {
       padding:  0px 10px;
    }

}

@media only screen and (max-width: 480px) {
    #header {
       padding:  0px 10px;
    }
}    

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

    .reload-text{
    display: none;
}

  .billboard-visible{
        display: none!important;
   }

  .leaderboard-visible{
        display: none!important;
   }

   .right{
        float: right;
    }

    .left{
        float: left;
    }

    .left-col{
        width: 50%;
    }
    .right-col{
        width: 50%;
    }

     .city-name{
       width: 70%;
       font-size: 18px;
    }

    .campaign-name{
        font-size: 22px;
    }

}


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


/* ===============
    Maximal Width
   =============== */

   .billboard-visible{
    display: block!important;
   }

     .leaderboard-visible{
    display: block!important;
   }
    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }

     .city-name{
       width: 50%;
       font-size: 20px;
    }

    .campaign-name{
        font-size: 30px;
        padding-top: 80px;
    }
}

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

/* ===============
    Maximal Width
   =============== */

   .billboard-visible{
    display: block!important;
   }

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }


     .city-name{
       width: 50%;
    }


    .campaign-name{
    font-size: 32px;
    }
}

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

/* ===============
    Maximal Width
   =============== */

    .campaign-name{
    font-size: 34px;
    }

   .billboard-visible{
    display: block!important;
   }

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }

    .city-name{
        font-size: 20px;
       width: 50%;
    }
}

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

/* ===============
    Maximal Width
   =============== */
  

   
}



.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.replay-banner{
  cursor: pointer;
  text-transform: uppercase;
  text-align: center;
  max-width: 120px;
  margin: 0 auto;
  position: relative;
  top: 30px;
  border-radius: 50px;
  z-index: 0;
  height: 30px;
  line-height: 28px;
  padding: 0;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.replay-banner:hover{

  background: #3EDD5C;
  color: #FFF;
  border: 2px solid #3EDD5C;
/*  max-width: 120px;
  margin: 0 auto;
  position: relative;
  top: 30px;
  border-radius: 50px;
  transform: all 0.3s ease;*/
}

/*
-------------------------------- HELPER STYLES ----------------------------------------------
---------------------------------------------------------------------------------------------
*/

/* OPACITY HELPERS */

.invisible{opacity: 0;}

/*. TYPOGRAPHY HELPERS */

.text-align-center{text-align: center;}

/*. CENTERING HELPERS */

.absolute-center{position: absolute;margin: 0 auto;left: 0;right: 0;margin-left: auto;margin-right: auto;}
.center-block-element{margin: 0 auto;}

.display-table-one{/*Add this to parent vertical center element*/
  display:table;
 
}

.display-table{/*Add this to parent vertical center element*/
  display:table;
   margin-left: auto;
    margin-right: auto;
}

.vertical-center{/*Add this to next child element of the .display-table element*/
  display:table-cell;
  vertical-align:middle;
}

/*. POSITIONING HELPERS */

.pos-a{position: absolute;}
.pos-r{position: relative;}
.top-0{top: 0;}
.right-0{right: 0;}
.bottom-0{bottom: 0;}
.left-0{left: 0;}
.zero-scale{transform: scale(0);}

/*. POSITIONING HELPERS STACKING ORDER */

/*. .z-i-1 = Z Index 1 */

.z-i-1{z-index: 1;}
.z-i-2{z-index: 2;}
.z-i-3{z-index: 3;}
.z-i-4{z-index: 4;}
.z-i-5{z-index: 5;}
.z-i-6{z-index: 6;}
.z-i-7{z-index: 7;}
.z-i-8{z-index: 8;}
.z-i-9{z-index: 9;}
.z-i-10{z-index: 10;}
.z-i-11{z-index: 11;}
.z-i-12{z-index: 12;}

/*. RESPONSIVE HELPERS */

.img-responsive{ display: block; max-width: 100%; height: auto;}