html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before { box-sizing: border-box; }

html { font-size: 62.5%; }

body { background: #000; font-size: 1.6rem; font-family: "PT Sans", sans-serif; color: #242322; overflow: hidden; }

a { color: #a5c4bc; text-decoration: none; }

/* -------------------------------- 

Patterns - reusable parts of our design

-------------------------------- */
.cd-btn { display: inline-block; padding: 1.6em 2.4em; font-size: 1.4rem; letter-spacing: .15em; color: #ffffff; font-weight: 700; text-transform: uppercase; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* -------------------------------- 

Typography

-------------------------------- */
h1 { font-size: 1.6rem; line-height: 1; margin: 0.5em 0 0.3em 0; font-family: sans-serif; text-align: center; text-transform: uppercase; }
@media only screen and (min-width: 768px) { h1 { font-size: 3rem; } }

p { line-height: 1.6; margin: 0 auto; max-width: 800px; }

/* -------------------------------- 

Main Content

-------------------------------- */
div.background-container { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; overflow: hidden; }
div.background-container img { height: 105%; width: 105%; position: relative; left: -1%; top: -1%; }

.cd-main-content { position: relative; z-index: 1; width: 100%; height: 100vh; /* vertically align its content */ display: table; }
.cd-main-content .center { /* vertically align inside parent element */ display: table-cell; vertical-align: middle; text-align: center; }
.cd-main-content .tree { width: 1029px; height: 776px; position: relative; margin: 0px auto; z-index: -1; }

/* -------------------------------- 

Modal window 

-------------------------------- */
.cd-modal { position: fixed; top: 0; left: 0; z-index: 1000000; height: 100%; width: 100%; overflow: hidden; background-size: cover; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; transition: opacity 0.3s 0s, visibility 0s 0.3s; }
.cd-modal .modal-content { height: 100%; overflow-y: auto; padding: 3em 5%; color: #e4dcca; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.cd-modal .modal-content h1.lines { padding: 10px; position: relative; top: 95%; text-shadow: 2px 2px 10px #000; display: block; font-weight: lighter; text-transform: uppercase; }
.cd-modal .modal-close { /* 'X' icon */ position: absolute; z-index: 1; top: 20px; right: 5%; height: 45px; width: 45px; border-radius: 50%; background: rgba(0, 0, 0, 0.3) url('../../../../images/sacrifice/teaser/cd-icon-close.svg?1458562309') no-repeat center center; /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; visibility: hidden; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s; -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s; transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s; }
.no-touch .cd-modal .modal-close:hover { background-color: rgba(0, 0, 0, 0.5); }
.cd-modal.visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.7s, visibility 0s; -moz-transition: opacity 0.7s, visibility 0s; transition: opacity 0.7s, visibility 0s; }
.cd-modal.visible .modal-content { /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */ -webkit-overflow-scrolling: touch; }
.cd-modal.visible .modal-close { visibility: visible; opacity: 1; -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s; -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s; transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
@media only screen and (min-width: 1100px) { .cd-modal .modal-content { padding: 6em 5%; }
  .cd-modal .modal-close { height: 60px; width: 60px; }
  .cd-modal p { font-size: 2rem; } }

/* -------------------------------- 

Transition Layer 

-------------------------------- */
.cd-transition-layer { position: fixed; top: 0; left: 0; z-index: 28; height: 100%; width: 100%; opacity: 0; visibility: hidden; overflow: hidden; }
.cd-transition-layer .bg-layer { position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-2%); -moz-transform: translateY(-50%) translateX(-2%); -ms-transform: translateY(-50%) translateX(-2%); -o-transform: translateY(-50%) translateX(-2%); transform: translateY(-50%) translateX(-2%); /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */ height: 100%; /* our sprite is composed of 25 frames */ width: 2500%; background: url('../../../../images/sacrifice/teaser/ink.png?1527894920') no-repeat 0 0; background-size: 100% auto; z-index: 5; opacity: 0.8; }
@media (min-width: 1980px) { .cd-transition-layer .bg-layer { background-size: 100% 100%; } }
.cd-transition-layer.visible { opacity: 1; visibility: visible; }
.cd-transition-layer.opening .bg-layer { -webkit-animation: cd-sequence 0.8s steps(24); -moz-animation: cd-sequence 0.8s steps(24); animation: cd-sequence 0.8s steps(24); -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; }
.cd-transition-layer.closing .bg-layer { -webkit-animation: cd-sequence-reverse 0.8s steps(24); -moz-animation: cd-sequence-reverse 0.8s steps(24); animation: cd-sequence-reverse 0.8s steps(24); -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; }
.no-cssanimations .cd-transition-layer { display: none; }

@-webkit-keyframes cd-sequence { 0% { /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
-webkit-transform: translateY(-50%) translateX(-2%); }
  100% { /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
-webkit-transform: translateY(-50%) translateX(-98%); } }
@-moz-keyframes cd-sequence { 0% { /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
-moz-transform: translateY(-50%) translateX(-2%); }
  100% { /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
-moz-transform: translateY(-50%) translateX(-98%); } }
@keyframes cd-sequence { 0% { /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
-webkit-transform: translateY(-50%) translateX(-2%); -moz-transform: translateY(-50%) translateX(-2%); -ms-transform: translateY(-50%) translateX(-2%); -o-transform: translateY(-50%) translateX(-2%); transform: translateY(-50%) translateX(-2%); }
  100% { /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
-webkit-transform: translateY(-50%) translateX(-98%); -moz-transform: translateY(-50%) translateX(-98%); -ms-transform: translateY(-50%) translateX(-98%); -o-transform: translateY(-50%) translateX(-98%); transform: translateY(-50%) translateX(-98%); } }
@-webkit-keyframes cd-sequence-reverse { 0% { -webkit-transform: translateY(-50%) translateX(-98%); }
  100% { -webkit-transform: translateY(-50%) translateX(-2%); } }
@-moz-keyframes cd-sequence-reverse { 0% { -moz-transform: translateY(-50%) translateX(-98%); }
  100% { -moz-transform: translateY(-50%) translateX(-2%); } }
@keyframes cd-sequence-reverse { 0% { -webkit-transform: translateY(-50%) translateX(-98%); -moz-transform: translateY(-50%) translateX(-98%); -ms-transform: translateY(-50%) translateX(-98%); -o-transform: translateY(-50%) translateX(-98%); transform: translateY(-50%) translateX(-98%); }
  100% { -webkit-transform: translateY(-50%) translateX(-2%); -moz-transform: translateY(-50%) translateX(-2%); -ms-transform: translateY(-50%) translateX(-2%); -o-transform: translateY(-50%) translateX(-2%); transform: translateY(-50%) translateX(-2%); } }
.cd-btn { position: relative; z-index: 100; cursor: pointer; }

.scene { display: none; position: absolute; overflow: hidden; left: 0px; width: 100%; height: 100%; }

.background-container { text-align: center; /* ensures the image is always in the h-middle */ overflow: hidden; }
.background-container video { display: inline-block; position: relative; /* allows repositioning */ left: 100%; /* move the whole width of the image to the right */ margin-left: -200%; /* magic! */ width: auto; height: 100%; min-height: 1080px; }
@media (max-width: 600px) { .background-container video { left: -8%; } }
@media (max-width: 400px) { .background-container video { left: -50%; } }
@media (max-width: 600px) { .background-container video img { height: 100%; width: auto; } }

.eyes-btn { position: relative; margin: 0px auto; width: 290px; height: 90px; display: block; left: 150px; top: 200px; }
@media (max-width: 600px) { .eyes-btn { margin-left: 5px; margin-top: -30px; width: 230px; height: 50px; } }

.tree-btn { position: relative; margin: 0px auto; width: 290px; height: 90px; display: block; top: 230px; left: -240px; }
@media (max-width: 600px) { .tree-btn { left: -150px; margin-top: -35px; width: 150px; height: 150px; } }

.png-imgs { position: absolute; width: 100%; height: 100%; text-align: center; overflow: hidden; }
.png-imgs img { position: absolute; top: 0px; left: 0px; min-height: 105%; text-align: center; }
.png-imgs img.lines { z-index: 6; text-align: center; min-height: 110%; top: -5%; left: -7%; opacity: 0.5; }
.png-imgs img.dark { z-index: 4; left: -3%; top: -3%; }
.png-imgs img.flowers { z-index: 5; text-align: center; min-height: 110%; top: -5%; left: -7%; opacity: 0.5; }
.png-imgs img.details { z-index: 4; text-align: center; min-height: 110%; top: -5%; left: -7%; opacity: 0.5; }

.foreground .foreground-item { width: 800px; height: 1036px; position: absolute; z-index: 10; bottom: -5%; }
.foreground .left-item { left: -25%; }
.foreground .right-item { right: -25%; }

/* PRELOADER */
#blackOverlay { width: 100%; height: 100%; background: url('../../../../images/sacrifice/teaser/loadBG.jpg?1527894920') center top no-repeat; background-size: cover; position: fixed; top: 0; left: 0; z-index: 100; }

#jpreOverlay, #qLoverlay { background: url('../../../../images/sacrifice/teaser/loadBG.jpg?1527894920') center top no-repeat; background-size: cover; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 11; }

#jpreSlide { font-size: 22px; font-weight: 700; color: #FFF; text-align: center; width: 100%; position: relative !important; left: 0; top: 0 !important; }

#jpreLoader, #qLloader { width: 575px; height: 1px; background: #000; margin: 0 auto; position: relative !important; left: 0 !important; clear: both; top: 0 !important; }

.splash-container { width: 600px; position: relative; margin: 0px auto; display: block; z-index: 22222222; margin-top: 20%; }
@media (max-width: 600px) { .splash-container { width: 100%; } }
.splash-container .splash-logo { width: 600px; height: 270px; background: url('../../../../images/sacrifice/teaser/logo.png?1527894920') center top no-repeat; background-size: 100%; }
@media (max-width: 600px) { .splash-container .splash-logo { width: 100%; } }
.splash-container .enter-site { background-color: Transparent; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-transform: uppercase; color: #9d905c; border: 1px solid #9d905c; text-decoration: none; padding: 6px 10px; margin-right: 10px; position: relative; z-index: 111; width: 200px; text-align: center; position: relative; margin: -20px auto 0px auto; cursor: pointer; display: none; }
.splash-container .enter-site:hover { background: #9d905c; color: #000; }

#jSplash { width: 100%; position: relative; margin: 0 auto; background-size: 100%; height: 250px; margin-top: 20%; }
@media (max-width: 600px) { #jSplash { width: 300px; } }
#jSplash #controls { position: absolute; left: 0; margin-top: 140px; width: 600px; left: 50%; margin-left: -300px; text-align: center; }
@media (max-width: 600px) { #jSplash #controls { width: 300px; } }
#jSplash #controls img { position: relative; width: 100px; margin: 0 auto; margin-left: 20px; }
#jSplash #controls p { clear: both; font-size: 12px; text-align: center; padding: 0; margin: 0 auto; padding-left: 20px; width: 200px; position: relative; font-weight: lighter; padding-top: 15px; }

#jpreBar, #qLbar { width: 600px; height: 0; position: absolute; bottom: 0; background: #fff; }

#jprePercentage, #qLpercentage { color: #888; text-align: center; position: absolute; height: 30px; width: 575px; text-indent: -1000000px; }

#eyes #bgvid2 { position: absolute; min-width: 100%; min-height: 100%; top: 0; left: 0; z-index: -1; }
@media (max-width: 600px) { #eyes #bgvid2 { left: -105%; } }
@media (max-width: 875px) { #eyes #bgvid2 { margin-left: -55%; height: 100%; } }

#tree #bgvid3 { position: absolute; min-width: 100%; min-height: 100%; top: 0; left: 0; z-index: -1; }
@media (max-width: 875px) { #tree #bgvid3 { left: -75%; } }
@media (max-width: 600px) { #tree #bgvid3 { left: -165%; top: -30%; } }
@media (max-width: 400px) { #tree #bgvid3 { left: -250%; } }

.button-wrap-contain { position: absolute; bottom: 50px; margin-left: -200px; left: 50%; width: 500px; }
.button-wrap-contain .button-wrap { position: absolute; margin: 0px auto; width: 500px; text-align: center; font-size: 14px; bottom: 0%; z-index: 25 !important; line-height: 25px; }
.button-wrap-contain .button-wrap .btn { background-color: rgba(0, 0, 0, 0.3); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-transform: uppercase; color: #9d905c; border: 1px solid #9d905c; text-decoration: none; padding: 6px 10px; margin-right: 10px; position: relative; }
@media (max-width: 400px) { .button-wrap-contain .button-wrap .btn { width: 34%; line-height: 15px; } }
.button-wrap-contain .button-wrap .btn:hover { background: #9d905c; color: #000; }
.button-wrap-contain .button-wrap .need-help { position: relative; top: 20px; color: #9d905c; line-height: 20px; }
@media (max-width: 400px) { .button-wrap-contain .button-wrap .need-help { display: block; margin: 0 auto; line-height: 17px; width: 300px; } }
.button-wrap-contain .button-wrap .need-help a { text-decoration: underline; color: #9d905c; }
.button-wrap-contain .button-wrap .logo { width: 350px; height: 175px; position: relative; margin: 0px auto; background: url('../../../../images/sacrifice/teaser/logo.png?1527894920') center top no-repeat; background-size: cover; top: 20px; }
@media (max-width: 400px) { .button-wrap-contain .button-wrap .logo { top: 35px; } }

#gift { text-align: center; }
#gift img { max-width: 500px; width: 100%; height: auto; }

.videoContainer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }

iframe { /* optional */ width: 100%; height: 100%; }

.sound-control { position: absolute; width: 32px; height: 32px; top: 20px; left: 20px; cursor: pointer; background: rgba(0, 0, 0, 0.5); border-radius: 50%; background-size: 100%; z-index: 111; }
.sound-control.playing { background: url('../../../../images/sacrifice/teaser/soundOn.png?1527894920') center top no-repeat; background-size: 100%; }
.sound-control.muted { background: url('../../../../images/sacrifice/teaser/muted.png?1527894920') center top no-repeat; background-size: 100%; }