.dark-mode .site-wrapper {
    background-image: url(../../img/lines-min.png);
    background-repeat: repeat-x;
    background-size: 1350px;
}

.dark-mode .body1, .dark-mode .body2, .dark-mode .body3 {
    color: var(--unreal-grey);
}

.dark-mode .site-head  {
    background: transparent;
}

.dark-mode .hamburger-inner,.dark-mode  .hamburger-inner::before,.dark-mode  .hamburger-inner::after {
    background-color: #fff;
}


.dark-mode .site-head a.rootLink  {
    color: var(--dark-12);
}
.dark-mode .new-hamburger-open .site-head-logo img, .dark-mode .site-foot img {
    filter: invert(1);
}
.dark-mode .site-head-logo img, .dark-mode .site-foot img {
    filter: invert(1);
}

.dark-mode .dark-investors img {
    filter: invert(.7);
}

.dark-mode .site-foot a, .dark-mode .globalNav a.rootLink {
    background-image: linear-gradient(#ffffff, #ffffff);
    color: var(--dark-12);
}

.dark-mode .button-primary {
    border-radius: 0;
    background: url(../../img/solid-button.svg) no-repeat top left;
    padding: 20px 63px;
    border: none;
}

.dark-mode .button-primary:hover {
    border-radius: 0;
    color: white;
    opacity: .8;
}

.dark-mode .button-large:after {
    background: white;
}

.dark-mode .audio-btn.button-primary {
    border-radius: 0;
    background: url(../../img/play-button.svg) no-repeat top left;
    padding: 25px 100px 27px 61px;
    border: none;
}

.dark-mode .audio-btn .button-primary:hover {
    border-radius: 0;
    color: white;
    opacity: .8;
}

.card .audio-btn.button-primary {
    bottom: -20px;
    left: calc(50% - 76px);
    position: absolute;
    line-height: 0px;
}

.audio-btn.button-primary.playing {
    background-color: #555;
    border-color: transparent;
    color: #ffffff !important;
}

.dark-shadow {
    box-shadow: 0 1px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 30px 0 rgba(0, 0, 0, .3);
}

.dark-mode hr {
    border-top: 1px solid #222;
}

.preload-images {
	background: url(../../img/solid-button.svg) no-repeat -9999px -9999px;
	background: url(../../img/solid-button2.svg) no-repeat -9999px -9999px;
}

.voice-demo-item .card .audio-btn.button-primary {
    bottom:30px;
}

.produced-demo {
    max-width: 850px;
    width: 100%;
    text-align: left;
    background: url(../../img/questdesktop.jpg) no-repeat top left;
    background-size: cover;
    margin: auto;
    padding: 46px 26px 26px;
    box-shadow: 0 1px 23px 0 rgba(0, 0, 0, 0.5), 0 2px 30px 0 rgba(0, 0, 0, .7);
}


.voice-demo-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: 80px 0 0;
}
.voice-demo-item {
    padding: 15px;
    padding-bottom: 60px;
}
.voice-demo-item:first-of-type {
    padding-left: 10px;
}
.voice-demo-item:last-of-type {
    padding-right: 10px;
}
.voice-demo-item.animation {
    padding-top: 48px;
}
.voice-demo-item.voice-apps {
    padding-top: 84px;
}
.voice-demo-item.advertising {
    padding-top: 110px;
}
.voice-demo-item label {
    margin-bottom: 7px;
}
.voice-demo-item .card {
    background: var(--unreal-mid-grey);
    border-radius: 4px;
    height: 430px;
    position: relative;
    box-shadow: 0 1px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 30px 0 rgba(0, 0, 0, .3);
}

.voice-demo-item .card img {
    margin-top: -32px;
    margin-bottom: 20px;
}

.voice-demo-item .headline4 {
    margin-bottom: 22px;
}


.v010.voice-demo-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 80px 0 0;
    background-image: url({{config.ASSET_URL}}/slp/img/bgpaint.webp);
  }
  

  .v010 .voice-demo-item:first-of-type {
      padding-left: 10px;
  }
  .v010 .voice-demo-item:last-of-type {
      padding-right: 10px;
  }
  .v010 .voice-demo-item.animation {
      padding-top: 48px;
  }
  .v010 .voice-demo-item.voice-apps {
      padding-top: 84px;
  }
  .v010 .voice-demo-item.advertising {
      padding-top: 110px;
  }
  .v010 .voice-demo-item label {
      margin-bottom: 7px;
  }
  .v010.voice-demo-item .card {
      border-radius: 4px;
      height: 390px;
      position: relative;
      box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.09), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  }
  
  .v010 .voice-demo-item .card img {
      display: inline-block;
  }
  
  .v010 .voice-demo-item .headline4 {
      margin-bottom: 22px;
  }
  


@media (max-width: 1100px) {
    .v010.voice-demo-container {
        grid-template-columns: 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px;
        margin-left: -10vw;
        overflow-x: scroll;
        padding-left: 10%;
        width: calc(100% + 13vw);
                padding-top: 32px;
    }
    .voice-demo-item {
        padding: 0;
        margin: 0 0 0 20px;
    }
    .voice-demo-item:first-of-type,
    .voice-demo-item:last-of-type {
        padding-left: 0;
        padding-right: 0;
    }
    .voice-demo-item:last-of-type {
        padding-right: 30px;
    }
    .voice-artists .row.row-padding .col-md-4 {
        margin: 0 auto;
        width: 480px;
    }
    .v010.voice-demo-item .card {
        height: 450px;
    }
}
@media (max-width: 1024px) {
    .v010.voice-demo-container {
        width: calc(100% + 13vw);
    }
}
@media (max-width: 950px) {
    .v010.character-demo-container {
        width: calc(100% + 14vw);
    }

}
@media (max-width: 850px) {
    .voice-examples br {
        display: none;
    }
    .voice-artists .body2 {
        width: 100%;
    }
    .voice-demo-container {
        height: 520px;
        width: calc(100% + 18vw);
    }
    .voice-examples .body2.text-center {
        margin-bottom: 40px;
    }
    .replica-voice.home .replica-example {
        margin-bottom: 30px;
    }
    .dark-mode .gradient-label {
        width: 80%;
    }
}
@media (max-width: 450px) {
    .voice-examples .body2.text-center {
        margin-bottom: 20px;
    }
}
@media (max-width: 740px) {
    .v010.voice-demo-container {
        grid-template-columns: 290px 290px 290px 290px 290px 290px 290px 290px 290px 290px 290px 290px 290px 290px 290px;
        margin-left: -10%;
        overflow-x: scroll;
        padding-left: 15px;
        width: 123%;
        padding-top: 32px;
    }
    .v010.voice-demo-item .card {
        height: 450px;
    }
}


@media only screen and (max-width: 480px) {
    .voice-demo-container {
        width: 117%;
    }
}

.voice-examples .body2.text-center {
    margin-bottom: 130px;
}

.dark-mode .gradient-label {
    background: #4c4c4c;
    color:#aaa;
}

/* Unreal Landing */

.unreal-hero.video .background {
    background: url(../../img/backgrounds/bg-unreal-desktop.svg) center -50px no-repeat;
    background-size: 1920px 800px;
    display: block;
    top: 0;
    height: 800px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
    z-index: -1;
  }

.replica-audition .cell, .replica-take .cell, .replica-effect .cell, .replica-direct .cell, .replica-save .cell  {
    padding-left: 110px;
}


  .replica-audition .table,   {
      height: 376px;
  }
  
  .replica-take .table {
      height: 284px;
  }
  
  .replica-direct .table {
      height: 275px;
  }
  
  .replica-effect .table {
      height: 170px;
  }
  
  .replica-save .table {
      height: 356px;
  }

.voice-examples .headline3 {
    margin-bottom:30px;
}

.voice-examples .headline3, .voice-examples .body2 {
    text-align: center;
}

@media (max-width: 1100px) {

}

@media (max-width: 1024px) {

}

@media (max-width: 950px) {
    .voice-examples .headline3, .voice-examples .body2 {
        text-align: left;
    }
    .left-align-line {
        position: absolute;
        left: 0px;
        top: 10px;
    }
    .replica-audition .cell, .replica-take .cell, .replica-effect .cell, .replica-direct .cell, .replica-save .cell  {
        padding-left: 0px;
    }
    .neg-margin {
        margin-bottom: -70px;
    }
    .produced-demo {
        max-width: 850px;
        width: 100%;
        text-align: left;
        background: url(../../img/questmobile.jpg) no-repeat top left;

        margin: auto;
        padding: 300px 13px 13px;
    }

}

@media (max-width: 850px) {
    .dark-mode .site-head  {
        background: var(--unreal-dark);
    }
}

@media (max-width: 450px) {

}

@media (max-width: 740px) {

}

.dark-mode .row-padding {
    padding-bottom:30px;
}