/* Primary Colors */
/* Secondary Colors */
/* APEX colors */
/* stylelint-disable media-feature-no-missing-punctuation */
@-webkit-keyframes pulse { 0% { color: white; }
  30% { color: #3e7ebe; }
  60% { color: white; }
  100% { color: white; } }
@keyframes pulse { 0% { color: white; }
  30% { color: #3e7ebe; }
  60% { color: white; }
  100% { color: white; } }

@-webkit-keyframes pulse_first { 0% { background-color: rgba(255, 255, 255, 0.3); }
  30% { background-color: #3e7ebe; }
  60% { background-color: rgba(255, 255, 255, 0.3); }
  100% { background-color: rgba(255, 255, 255, 0.3); } }

@keyframes pulse_first { 0% { background-color: rgba(255, 255, 255, 0.3); }
  30% { background-color: #3e7ebe; }
  60% { background-color: rgba(255, 255, 255, 0.3); }
  100% { background-color: rgba(255, 255, 255, 0.3); } }

@-webkit-keyframes fader { 0% { opacity: 1; }
  100% { opacity: 0; } }

@keyframes fader { 0% { opacity: 1; }
  100% { opacity: 0; } }

#vr { position: relative; height: calc(100vh - 134px); overflow: hidden; }

#video_wrap { position: absolute; top: 0; right: 0; bottom: 0; left: -20vw; overflow: hidden; z-index: 1; }

#video_wrap::before { content: ''; position: absolute; top: 0; right: 0; width: 340px; height: 100vh; background: white; z-index: 1; }

#videos { height: 100%; width: 177.77777778vh; /* 100 * 16 / 9 */ min-width: 100%; min-height: 56.25vw; /* 100 * 9 / 16 */ position: absolute; left: 50%; top: 50%; pointer-events: none; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.direction-buttons { position: absolute; top: calc(50% - 1em); left: 20vw; height: 1.25em; width: calc(100vw - 340px); font-size: 3.5em; }

.direction-buttons .direction { float: left; position: relative; color: rgba(255, 255, 255, 0.7); margin: 0 0 0 .35em; width: 1.45em; height: 1.45em; line-height: 1.55em; text-align: center; border-radius: 50%; background-color: transparent; cursor: pointer; }

.direction-buttons .direction .fa { text-indent: -.1em; }

.direction-buttons .direction.next { margin: 0 .55em 0 0; float: right; }

.direction-buttons .direction.next .fa { text-indent: .1em; }

.mobile .direction-buttons .direction.next, .direction-buttons .direction.tickle { transition: background-color 1s, color 1s; transition-delay: 2s; background-color: rgba(255, 255, 255, 0.3); text-shadow: none; color: white; -webkit-animation: pulse 3s infinite; animation: pulse 3s infinite; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; }

.mobile .content.section_1 .direction-buttons .direction.next { background-color: rgba(62, 126, 190, 0.8); -webkit-animation: pulse_first 3s infinite; animation: pulse_first 3s infinite; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; }

.mobile .content.section_7 .direction-buttons .direction.next { display: none; }

.no-touch .direction-buttons .direction:hover { background-color: rgba(255, 255, 255, 0.2); color: white; }

.direction-buttons .direction.disabled { color: rgba(255, 255, 255, 0.2); background: none; cursor: not-allowed; }

.slidewrapper { position: absolute; top: 0; right: 0; width: 300px; height: 100vh; overflow: hidden; }

.slidewrapper::after { content: ''; width: 40px; height: 100%; position: absolute; top: 0; right: 0; z-index: 1; background: white; }

.chapter { position: absolute; z-index: 1; top: 44px; right: -100%; width: 100%; transition: all .5s; }

.chapter.active { right: 0; }

.chapter.completed { right: 100%; }

.chapter .info_inner { width: calc(100% - 40px); background-color: white; }

.restartvideo { /* color: white; background-color: $glow-green; font-size: .85em; text-transform: uppercase; padding: .5em 1.5em; border-radius: 2em; */ cursor: pointer; margin-top: 2em; display: inline-block; opacity: 0; }

.restartvideo.finished { transition: opacity 1s; opacity: 1; }

#slidenav { position: absolute; bottom: 20px; left: calc(50% - (7 * 40px)); z-index: 2; }

#slidenav ul { padding: 0; border: 1px solid rgba(255, 255, 255, 0.3); list-style-type: none; height: 10px; }

#slidenav ul li.slidenav { display: block; position: relative; float: left; background-color: rgba(0, 0, 0, 0.1); height: 8px; width: 40px; cursor: pointer; transition: background-color .75s; }

#slidenav ul li.slidenav.active { background-color: rgba(255, 255, 255, 0.8); }

#slidenav ul li.slidenav span { visibility: hidden; }

#slidenav ul li.slidenav::before, #slidenav ul li.slidenav::after { content: ''; opacity: 0; transition: opacity .8s; transition-delay: .25s; }

#slidenav ul li.slidenav:hover { background: rgba(255, 255, 255, 0.4); }

#slidenav ul li.slidenav:hover::before, #slidenav ul li.slidenav:hover::after { opacity: 1; }

#slidenav ul li.slidenav:hover::before { content: attr(title); position: absolute; top: -40px; left: -100%; background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.8); white-space: pre; padding: .25em 1.5em; border-radius: .35em; }

#slidenav ul li.slidenav:hover::after { content: ''; position: absolute; top: -13px; left: calc(50% - 8px); border: 8px solid transparent; border-top-color: rgba(0, 0, 0, 0.5); }

.contact-us-button { /* color: white; background-color: $glow-green; font-size: .85em; text-transform: uppercase; padding: .75em 1.5em; border-radius: 2em; */ cursor: pointer; display: inline-block; position: absolute; right: 40px; bottom: 40px; z-index: 1; }

.contact-us-button a, .contact-us-button a:hover, .contact-us-button a:visited { color: white; text-decoration: none; }

/* mobile overrides  */
body.mobile { /*  image fade matrix  */ }

body.mobile #video_wrap { position: static; width: 100vw; height: 100vh; background-size: cover; background-repeat: no-repeat; background-position: -40vw center; }

body.mobile #video_wrap #videos { display: none; }

body.mobile #video_wrap::after { content: ''; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; opacity: 0; background-size: cover; background-repeat: no-repeat; background-position: -40vw center; pointer-events: none; }

body.mobile .direction-buttons { left: 0; }

body.mobile .animating #video_wrap:after { opacity: 0; -webkit-animation: fader 1s 1; animation: fader 1s 1; }

body.mobile .section_1 #video_wrap { background-image: url(../../../content/dam/illumina-marketing/images/systems/v2/takeover/apex/img/vr/lrg_section_1.jpg); }

body.mobile .section_2 #video_wrap { background-image: url(../../../content/dam/illumina-marketing/images/systems/v2/takeover/apex/img/vr/lrg_section_2.jpg); }

body.mobile .section_3 #video_wrap { background-image: url(../../../content/dam/illumina-marketing/images/systems/v2/takeover/apex/img/vr/lrg_section_3.jpg); }

body.mobile .section_4 #video_wrap { background-image: url(../../../content/dam/illumina-marketing/images/systems/v2/takeover/apex/img/vr/lrg_section_4.jpg); }

body.mobile .section_5 #video_wrap { background-image: url(../../../content/dam/illumina-marketing/images/systems/v2/takeover/apex/img/vr/lrg_section_5.jpg); }

body.mobile .section_6 #video_wrap { background-image: url(../../../content/dam/illumina-marketing/images/systems/v2/takeover/apex/img/vr/lrg_section_6.jpg); }

body.mobile .section_7 #video_wrap { background-image: url(../../../content/dam/illumina-marketing/images/systems/v2/takeover/apex/img/vr/lrg_section_7.jpg); }

body.mobile .section_2 #video_wrap::after { background-image: url(../../../content/dam/illumina-marketing/images/systems/v2/takeover/apex/img/vr/lrg_section_1.jpg); }

body.mobile .section_3 #video_wrap::after { background-image: url(../../../content/dam/illumina-marketing/images/systems/v2/takeover/apex/img/vr/lrg_section_2.jpg); }

body.mobile .section_4 #video_wrap::after { background-image: url(../../../content/dam/illumina-marketing/images/systems/v2/takeover/apex/img/vr/lrg_section_3.jpg); }

body.mobile .section_5 #video_wrap::after { background-image: url(../../../content/dam/illumina-marketing/images/systems/v2/takeover/apex/img/vr/lrg_section_4.jpg); }

body.mobile .section_6 #video_wrap::after { background-image: url(../../../content/dam/illumina-marketing/images/systems/v2/takeover/apex/img/vr/lrg_section_5.jpg); }

body.mobile .section_7 #video_wrap::after { background-image: url(../../../content/dam/illumina-marketing/images/systems/v2/takeover/apex/img/vr/lrg_section_6.jpg); }

body.mobile #slidenav { display: none; }

body.mobile .restartvideo { display: none; }

body.mobile div.modal-backdrop.fade.in { position: fixed; overflow: hidden; }

@media only screen and (max-width: 1200px) { #video_wrap { left: -30vw; }
  .direction-buttons { left: 30vw; } }

@media only screen and (max-width: 1024px) { #video_wrap { left: -36vw; }
  .direction-buttons { left: 36vw; } }

@media only screen and (max-width: 900px) { body.mobile #vr { height: calc(56.25vw + 300px); }
  body.mobile #video_wrap::before { position: static; width: 0; height: 0; display: none; }
  body.mobile #video_wrap { width: 100vw; height: 56.25vw; background-position: center center; }
  body.mobile #video_wrap::after { width: 100vw; height: 56.25vw; background-position: center center; }
  body.mobile .direction-buttons { width: 100%; top: calc((56.25vw / 2) - 1em); font-size: 3em; }
  body.mobile .slidewrapper { position: relative; width: 100%; height: auto; overflow: visible; top: 0; right: 0; padding: 24px; }
  body.mobile .slidewrapper::after { display: none; }
  body.mobile .chapter { top: 0; padding: 24px; }
  body.mobile #slidenav { display: none; }
  body.mobile .contact-us-button { right: auto; left: 24px; } }

@media only screen and (max-width: 670px) { body.mobile #vr { height: auto; overflow: hidden; }
  body.mobile #vr_content { height: 540px; }
  body.mobile #vr_content.section_1, body.mobile #vr_content.section_3, body.mobile #vr_content.section_6, body.mobile #vr_content.section_7 { height: 620px; }
  body.mobile .slidewrapper { height: calc((100vh - 56.25vw) - 82px); } }

@media only screen and (max-width: 600px) { body.mobile .direction-buttons, .direction-buttons { font-size: 2.5em; } }

@media only screen and (max-width: 400px) { body.mobile .direction-buttons, .direction-buttons { font-size: 2em; } }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .mobile #vr {
    background-color: #000 !important;
    background-image: url("../../../content/dam/illumina-marketing/images/systems/v2/takeover/apex/img/portrait-orientation.png");
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center; 
    height:387px !important;}
    .mobile #vr_content {
      display: none !important; } }

/* page overrides */
.breadcrumb { display: none !important; }

/*# sourceMappingURL=../maps/vr.css.map */