/*! Please do not edit directly from this file
 * This CSS is compiled from SASS: /devdesign/featured/nav/_sources/nav.scss
 */
/*-------------------
      Base Sizes
--------------------*/
/* This is the single variable that controls them all */
/* The size of page text  */
/*-------------------
     Transitions
--------------------*/
/*---------Quantum Ultra Styles---------*/
/*---------hero backgrround colors, text, and images---------*/
.featured-hero {
  overflow: hidden; }
  @media (max-width: 1199.98px) {
    .featured-hero {
      height: 600px;
      min-height: 600px; } }
  @media (max-width: 767.98px) {
    .featured-hero .featured-hero-header .featured-hero-title {
      font-size: 1.75rem; }
    .featured-hero .hero-subtitle {
      font-size: 1.25rem; } }
  .featured-hero .intro {
    background-image: none;
    background-position: 50% 50%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: background 1s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s, opacity 1s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s;
    -o-transition: background 1s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s, opacity 1s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s;
    transition: background 1s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s, opacity 1s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s; }
    .featured-hero .intro.zoomed {
      background-color: #000; }
      .featured-hero .intro.zoomed:after {
        opacity: 0; }
    .featured-hero .intro:after {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: -1;
      width: 100%;
      height: 100%;
      content: '';
      background-size: cover;
      opacity: 0.45;
      -webkit-transition: background 1s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s, opacity 1s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s;
      -o-transition: background 1s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s, opacity 1s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s;
      transition: background 1s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s, opacity 1s cubic-bezier(0.68, -0.55, 0.265, 1.4) 0s; }
    .featured-hero .intro.bg1:after {
      background-image: url("../jpg/14c1n1.jpg"); }
    .featured-hero .intro.bg2:after {
      background-image: url("../jpg/2136dr.jpg"); }
    .featured-hero .intro.bg3:after {
      background-image: url("../jpg/31wiwt.jpg"); }
    .featured-hero .intro.bg4:after {
      background-image: url("../jpg/4mdlj.jpg"); }
    .featured-hero .intro.bg5:after {
      background-image: url("../jpg/5o00q.jpg"); }
    .featured-hero .intro.bg6:after {
      background-image: url("../jpg/6p6zr.jpg"); }
    .featured-hero .intro.bg7:after {
      background-image: url("../jpg/2sbmo.jpg"); }
    .featured-hero .intro.bg8:after {
      background-image: url("../jpg/8t8f0.jpg"); }
    .featured-hero .intro.bg9:after {
      background-image: url("../jpg/3azu5.jpg"); }
    .featured-hero .intro.bg10:after {
      background-image: url("../jpg/10fwro.jpg"); }
    .featured-hero .intro.bg11:after {
      background-image: url("../jpg/11p736.jpg"); }
    .featured-hero .intro.bg12:after {
      background-image: url("../jpg/12ul88.jpg"); }
    .featured-hero .intro.bg13:after {
      background-image: url("../jpg/13sza5.jpg"); }
    .featured-hero .intro.bg14:after {
      background-image: url("../jpg/1aklj.jpg"); }
  .featured-hero .intro-screen {
    position: absolute;
    left: 52%;
    width: 900px;
    bottom: 0rem;
    right: 0; }
    @media (max-width: 1199.98px) {
      .featured-hero .intro-screen {
        width: 600px;
        bottom: 6rem;
        left: 60%; } }
    @media (max-width: 991.98px) {
      .featured-hero .intro-screen {
        display: none !important; } }
  .featured-hero .intro-image {
    position: absolute;
    right: 0;
    left: 38em;
    margin: 0 auto;
    width: 600px;
    bottom: 15px;
    text-align: center;
    z-index: 1;
    max-width: 600px; }
    @media (max-width: 1199.98px) {
      .featured-hero .intro-image {
        left: 33em;
        bottom: 100px;
        width: 400px; } }
    @media (max-width: 991.98px) {
      .featured-hero .intro-image {
        position: static;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        bottom: 15px; } }

/*---------logos---------*/
.logorow img {
  display: inline-block;
  padding: .5rem 1.5rem;
  max-height: 60px; }
  @media (max-width: 1199.98px) {
    .logorow img {
      padding: .5rem 0;
      max-height: 50px; } }

/*---------video player icon for vidoe buttons---------*/
.link-video {
  color: #fff !important;
  background-color: #0275d8;
  border: 1px solid #0275d8;
  padding: .5rem 1rem;
  border-radius: 4px; }
  .link-video:before {
    content: "\f03d";
    padding-right: .5rem;
    padding-left: 0; }

/*---------hover effect for tabs---------*/
.nav-link__icon {
  opacity: .25; }
  .nav-link__icon:hover {
    opacity: .50; }

.nav-link.active .nav-link__icon {
  opacity: 1; }

/*---------video player---------*/
.video-box {
  height: auto !important;
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: #fff; }
  .video-box:hover .play-video {
    background: url(../png/play-small-hoverl68v.png) no-repeat; }
    .video-box:hover .play-video.dark {
      background: url(../png/play-small-dark-hoverzzny.png) no-repeat; }
  .video-box:hover .play-small {
    background: url(../png/play-xsmall-hoverpki2.png) no-repeat; }
    .video-box:hover .play-small.dark {
      background: url(/content/featured/quantumultra/img/icons/play-xsmall-dark-hover.png) no-repeat; }
  .video-box img {
    max-width: 100%;
    width: 100%;
    max-height: inherit;
    height: auto;
    margin: 0;
    background: #000;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
  .video-box .play-video {
    position: absolute;
    width: 32px;
    height: 32px;
    bottom: 10px;
    right: 10px;
    background: url(../png/play-smallr7fi.png) no-repeat; }
    .video-box .play-video.center {
      top: 50%;
      left: 50%;
      margin-top: -16px;
      margin-left: -16px; }
  .video-box .play-small {
    width: 24px;
    height: 24px;
    bottom: 10px;
    right: 10px;
    background: url(../png/play-xsmalllnio.png) no-repeat; }
    .video-box .play-small.center {
      top: 50%;
      left: 50%;
      margin-top: calc(-12px + .5rem);
      margin-left: -12px; }
    .video-box .play-small.dark {
      background: url(/content/featured/quantumultra/img/icons/play-xsmall-dark.png) no-repeat; }