html {
  height:100%;
  background-color:#FFFFFF;
}
body {
  font-family: "Montserrat",sans-serif !important;
}

.truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#video_optimize_message{
  width:100%;
  height:40px;
  background-color:#056fff;
  position:relative;
  line-height:40px;
  text-align:center;
  color:white;
  display:none;
}

#Interscroller-message-row {
  opacity: 0.7;
  position: fixed;
  width:100%;
  display:none;
}

.interscroller-message-fade-in {
  -webkit-transition: opacity 400ms;
  transition: opacity 400ms;
  opacity: 0.7 !important;
}

.interscroller-message-fade-out {
  -webkit-transition: opacity 400ms;
  transition: opacity 400ms;
  opacity: 0 !important;
}

#interscroller-message-wrapper{
  font-size:0.9em;
  display:flex;
  justify-content: center;
  align-items:center;
}
#interscroller-message-inner {
  padding:5px 15px;
  background-color:#333;
  color:#fff;
  border-radius: 4px;
}

#interscroller-message-img{
  height:24px;
  width:24px;
  vertical-align:middle;
}

/* adds room to scroll for interscroller ad */
.main-content-ad-spacer { display:none }
.main-content-ad-spacer.active {
  margin:0;
  height:calc(100vh + 200px);
  display: block;
}

/*retina display*/
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
  #video_optimize_message{
    font-size:.85em;
  }
}

/*mobile*/
@media (max-width: 400px) {
  #video_optimize_message{
    font-size:.85em;
  }
}

#preview-nav-wrapper {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:2;
}
#preview-nav-top {
  background-color:#151825;
  height:55px;
}
#preview-nav-bottom {
    background-color:#242635;
    height:40px;
    color:#ffffff;
}
#preview-nav-bottom-inside {
  line-height:30px;
  font-size: 13px;
  font-weight:normal;
  color:#fff;
}

#preview-nav-bottom-inside .row {
    display: flex;
    line-height:40px;
}

#header-container {
  padding: 8px 0;
}

#main-content {
  text-align:center;
  margin-top:110px;
  padding:0;
}

#main-content.hasVideoMessage {
    margin-top: 150px;
}

.height2k {
    height: 2000px;
}

#main-content-ad-wrapper {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#main-content-ad-wrapper div:first-of-type {
    position: relative;
}
#main-content-ad-wrapper .widthGT {
    left: 50%;
}
#main-content-ad-wrapper .widthLTE {
    left: 0;
    margin-left: 0;
}

#main-content-ad-wrapper .iab_sf {
  margin: 0 auto;
}

#header-buttons {
  text-align:right;
  color:#fff;
}
#header-buttons img {
  vertical-align: middle;
}
#header-buttons a {
  color:#fff;
  text-decoration:none;
}

.header-btn {
  display:inline-block;
  width:32px;
  height:32px;
  border:1px solid #fff;
  text-align:center;
  line-height:30px;
}
#no-backup-message {
  color:#fff;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Default styles mobile first*/
#header-buttons {
  display:none;
}


#header-buttons-ad, #header-buttons-mobile, #header-buttons-backup {
  margin-left:4px;
}

#header-buttons-console, #header-buttons-mobile, #header-buttons-backup, #header-buttons-ad {
  border-radius:2px;
}




#qr-code {
  border:20px solid #fff;
  display:none;
  height:256px;
  width:256px;
}

#header-buttons-console span {display:none;}
#header-buttons-ad span {display:none;}
#header-buttons-backup span {display:none;}
#header-buttons-mobile span {display:none;}
#header-buttons .pushed, #header-buttons-console:hover, #header-buttons-ad:hover, #header-buttons-backup:hover, #header-buttons-mobile:hover {
  color:#1A2228;
  background-color:#fff;
  -webkit-transition: background-color 300ms linear;
    -moz-transition: background-color 300ms linear;
    -o-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}


#header-buttons-console img {
  width: 16px;
    height: 16px;
    background-image: url(/ui/img/previewer/console-26-ffffff.png);
    background-size:  cover;
}
#header-buttons-ad img {
  width: 16px;
    height: 16px;
    background-image: url(/ui/img/previewer/desktop-16-ffffff.png);
}
#header-buttons-backup img {
  width: 16px;
    height: 16px;
    background-image: url(/ui/img/previewer/backup-16-ffffff.png);
}
#header-buttons-mobile img {
  width: 16px;
    height: 16px;
    background-image: url(/ui/img/previewer/mobile-16-ffffff.png);
}

#header-buttons-console.pushed img, #header-buttons-console:hover img {
    background-image: url(/ui/img/previewer/console-26.png);
}

#header-buttons-ad.pushed img, #header-buttons-ad:hover img {
    background-image: url(/ui/img/previewer/desktop-16-1a2228.png);
}
#header-buttons-backup.pushed img, #header-buttons-backup:hover img {
    background-image: url(/ui/img/previewer/backup-16-1a2228.png);
}
#header-buttons-mobile.pushed img, #header-buttons-mobile:hover img {
    background-image: url(/ui/img/previewer/mobile-16-1a2228.png);
}

/* for retina displays */
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
  #header-buttons-ad img {
    background-size: 16px 16px;
      background-image: url(/ui/img/previewer/desktop-32-ffffff.png);
  }
  #header-buttons-backup img {
    background-size: 16px 16px;
      background-image: url(/ui/img/previewer/backup-32-ffffff.png);
  }
  #header-buttons-mobile img {
    background-size: 16px 16px;
      background-image: url(/ui/img/previewer/mobile-32-ffffff.png);
  }
  #header-buttons-ad.pushed img, #header-buttons-ad:hover img  {
      background-image: url(/ui/img/previewer/desktop-32-1a2228.png);
  }
  #header-buttons-backup.pushed img, #header-buttons-backup:hover img {
      background-image: url(/ui/img/previewer/backup-32-1a2228.png);
  }
  #header-buttons-mobile.pushed img, #header-buttons-mobile:hover img {
      background-image: url(/ui/img/previewer/mobile-32-1a2228.png);
  }
}

#header-buttons-mobile {display:none;}

#header-buttons {
    display:inline;
    float:right;
    margin-top:-40px;
    width:140px;
    padding-right:10px;
    padding-top:6px;
}
#adventive-logo {
  padding-left:10px;
  padding-top: 10px;
}
#adventive-logo img {
    width: 140px;
    padding-top:0px;
}
#ad-size {
  text-transform: none;
  text-align:right;
  display:inline;
  float:right;
  flex-shrink: 0;
  margin: 0;
  font-size:0.9em;
}

#ad-name {
  flex-shrink: 1;
  flex-grow: 1;
  font-size:0.9em;
}

/* Larger than mobile */
@media (min-width: 400px) {
  #header-buttons {
    width:160px;
    padding-right:0;
  }
  #adventive-logo {
    padding-left:0;
    padding-top: 10px;
  }
  #header-buttons-mobile {display:inline-block;}
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
  #header-buttons {
    display:inline;
    float:left;
    margin-top:0;
    width:52%;
    margin-left:0;
    padding-top:3px;
  }
  #ad-size {
    margin-top:0;
    float:left;
  }
  #adventive-logo {
    padding-top:6px;
  }
  #adventive-logo img {
    width: 180px;
  }
  #ad-name, #ad-size {
    font-size:1.0em;
  }
}

/* Larger than tablet */
@media (min-width: 949px) {
  #header-buttons {display:block;}
  #header-buttons-console span {display:inline; margin-left:6px;}
  #header-buttons-ad span {display:inline; margin-left:6px;}
  #header-buttons-backup span {display:inline; margin-left:6px;}
  #header-buttons-mobile span {display:inline; margin-left:6px;}
  .header-btn {
    width:90px;
    font-size:.8em;
  }
  #header-buttons-mobile img {
    background-position:2px 0;
  }
}

/* Larger than desktop */
@media (min-width: 1050px) {
  #header-buttons {display:block;}
  #header-buttons-ad span {margin-left:8px;}
  #header-buttons-backup span {margin-left:8px;}
  #header-buttons-mobile span {margin-left:8px;}
  .header-btn {
    width:100px;
    font-size:1.0em;
  }
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
  #header-buttons {display:block;}
}

/* Simple modal */
#simplemodal-overlay {background-color:#000; z-index:30001 !important;}
#simplemodal-container {background-color:#333; border:8px solid #444; padding:12px; z-index:30002 !important;}