/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2014-10-08, 15:56:43
    Author     : m.wasilewski
*/

@font-face {
    font-family: 'Oldenburg';
    src: url('../fonts/oldenburg-regular-webfont.eot');
    src: url('../fonts/oldenburg-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/oldenburg-regular-webfont.woff2') format('woff2'),
         url('../fonts/oldenburg-regular-webfont.woff') format('woff'),
         url('../fonts/oldenburg-regular-webfont.ttf') format('truetype'),
         url('../fonts/oldenburg-regular-webfont.svg#oldenburgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Italic-webfont.eot');
    src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Italic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

html, body {overflow: hidden; width: 100%; height: 100%; margin: 0; background: #B9D8C9; font-family: 'Oldenburg'; -webkit-transition: background 1s ease; transition: background 1s ease}
body * {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; text-overflow: ellipsis; list-style: none; outline: none; -webkit-touch-callout: none; -webkit-user-select: none; -ms-user-select: none; user-select: none}
body.night {background: #5c6868}

.hide {display: none; opacity: 0}
figure[data-visible="false"]:not(.item) > * {display: none; opacity: 0}

main {position: fixed; z-index: 11; width: 100%; height: 100%; min-width: 1020px; white-space: nowrap; overflow-x: scroll; overflow-y: hidden; overflow: -moz-scrollbars-none; -ms-overflow-style: none}
main > * {position: absolute; top: 0; height: 100%; vertical-align: top}
main::-webkit-scrollbar {display: none}
main.freeze {overflow-x: hidden}

section * {position: absolute}

.css-awards {display: block !important; position: fixed; top: 0; left: 0; z-index: 110}
.css-awards a {display: block}
.css-awards .opl {margin-bottom: 20px}
.css-awards .awwwards {margin-bottom: 160px}

/* Buttons */
button.info {position: relative; z-index: 30; width: 70px; height: 70px; background: #CF5D5D; border: 0; border-radius: 100%; color: #fff; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
button.info:after {content: ''; display: block; width: 40px; height: 40px; background-size: 40px 40px; background-repeat: no-repeat; margin: 0 auto; -webkit-transform: translate3d(0,15px,0); transform: translate3d(0,15px,0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s;}
button.info,
button.info:before {opacity: 0; pointer-events: none; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); -webkit-transition: all 0.3s; transition: all 0.3s}
button.info:before {content: ''; position: absolute; top: 0; left: 0; opacity: 0.5; width: 70px; height: 70px; border-radius: 100%; background: #CF5D5D; box-shadow: 0 0 0 15px #CF5D5D}
button.info:after {background-image: url('../images/interface/icon_info.svg')}
button.grab:after {background-image: url('../images/interface/icon_grab.svg')}
button.info.active.static:before,
main:not(.freeze) button.info.active:before {-webkit-animation: pulse 1.5s linear infinite; animation: pulse 1.5s linear infinite}
button.info.active.static,
button.info.active.static:before,
main:not(.freeze) button.info.active,
main:not(.freeze) button.info.active:before,
main:not(.freeze) button.info.active:after {opacity: 1; pointer-events: auto; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1)}
button.grab.static,
main:not(.freeze) button.grab {background: #e8b504; -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
button.grab.active.static:before,
main:not(.freeze) button.grab.active:before {background: #e8b504; box-shadow: 0 0 0 15px #e8b504; -webkit-animation: pulse-grab 1.5s linear infinite; animation: pulse-grab 1.5s linear infinite}
main:not(.freeze) button.info:not(.big).active:hover {cursor: pointer; transform: scale3d(1.25, 1.25, 1.25); -webkit-transform: scale3d(1.25, 1.25, 1.25)}
button.info.big,
button.info.big:before {width: 140px; height: 140px}
button.info.big:after {width: 70px; height: 70px}
button.info.mouse:after {background-image: url('../images/interface/icon_mouse.svg'); background-size: 70px}

.red-button,
.green-button,
.progress-button {position: absolute; top: 700px; left: 185px; overflow: hidden; width: 300px; padding: 24px; background: #964A4A; border: 0; border-bottom: 5px solid #964A4A; border-radius: 10px; color: #fff; font-family: 'Oldenburg'; font-size: 30px; text-decoration: none; cursor: default}
.red-button:hover,
.green-button:hover,
.progress-button.finished:hover {top: 702px; border-bottom-width: 3px}
.red-button:active,
.green-button:active,
.progress-button.finished:active {top: 705px; border-bottom-width: 0}
.progress-button span { position: relative }
.progress-button.in-progress,
.progress-button.finished {color:transparent !important; cursor: pointer}
.progress-button.in-progress:after,
.progress-button.finished:after {position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; padding-top: inherit; color: #fff !important; text-align: center}
.progress-button.in-progress:after {content:attr(data-loading)}
.progress-button.finished:after {content:attr(data-finished)}
.progress-button .tz-bar {position:absolute; left:0; bottom:0; height:3px; width:0; background-color:#CF5D5D; border-radius: 10px 10px 0 0; -webkit-transition: width 0.5s, height 0.5s; transition: width 0.5s, height 0.5s}
.progress-button .tz-bar.background-horizontal {height:100%; border-radius:2px}
.progress-button .tz-bar.background-vertical {top:0; width:100%; height:0; border-radius: 10px}
.red-button,
.green-button {position: relative; top: 0px; left: auto; background: #CF5D5D; cursor: pointer}
.green-button {padding: 6px 30px; background: #4ab67f; border-color: #4b906d; font-size: 18px}
.red-button:hover,
.green-button:hover {top: 2px}
.red-button:active,
.green-button:active {top: 5px}

/* Intro */
#splash {position: absolute; top: 20px; left: 50%; z-index: 100; width: 680px; height: 870px; margin-left: -340px; text-align: center}
#splash button {z-index: 220}
#splash > svg {position: static}
#splash .copyright {position: absolute; bottom: 0; width: 100%; color: #76a5a8; font-family: 'Open Sans', 'Oldenburg', sans-serif; font-size: 16px; font-style: italic; text-align: center; letter-spacing: 1px}
#splash .copyright .html5 {width: 30px; height: 30px; vertical-align: middle}
#splash .copyright .merix {width: 100px; height: 32px; vertical-align: middle}
#splash .intro {position: relative; z-index: 1}
#splash .social {position: absolute; top: 0; right: 0; z-index: 202; vertical-align: top}
#splash .social > div {display: inline-block; vertical-align: top}
#intro {position: relative; z-index: 201; width: 680px; height: 652px}
#intro > svg {position: relative}
#intro .santa,
#intro .santa > * {position: absolute}
#intro .santa {top: 185px; left: 220px; width: 200px; height: 470px; -webkit-animation: intro-head 3s linear infinite; animation: intro-head 3s linear infinite}
#intro .santa .head {top: 0; left: 0}
#intro .santa .hat {top: 3px; left: 0; -webkit-transform-origin: top right; -webkit-animation: popup-hat 3s linear infinite; transform-origin: top right; animation: popup-hat 3s linear infinite}
#intro .santa .mouth {top: 385px; left: 102px; -webkit-animation: popup-mouth 1.5s linear infinite; animation: popup-mouth 1.5s linear infinite}

#loading-background {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #B9D8C9; z-index: 210}

#scene-1 {position: relative; width: 1680px}
#start-scroll {position: fixed; top: 20%; left: calc(50% - 100px); opacity: 0; width: 200px; color: #fff; font-weight: bold; font-style: italic; text-align: center; transition: all 0.3s ease; -webkit-transition: all 0.3s ease;  -ms-transition: all 0.3s ease}
main:not(.freeze) #start-scroll.active {opacity: 1}
#start-scroll p {left: -80px; margin-top: 40px; font-size: 20px; text-shadow: 0 1px 2px black}
#start-scroll .arrows {position: relative; left: 5px; top: 5px}
#start-scroll.hide,
#start-scroll.hide button.info.active {opacity: 0; display: block; pointer-events: none; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); -webkit-transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s}

@media screen and (max-height: 900px) {
    #splash {top: 10%; height: 570px}
    #splash #intro > img {height: 470px}
    #splash .santa {top: 54px; left: 225px; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-animation: intro-head-small 3s linear infinite; animation: intro-head-small 3s linear infinite;}
    #splash .progress-button {top: 460px; left: 225px; width: 220px; padding: 8px 12px; font-size: 24px}
    #start-scroll {top: 10%}
}

@media screen and (max-height: 650px) {
    #splash {top: 0}
}

/* Interface */
#interface {position: fixed; top: 50px; z-index: 100; right: 0; width: 135px; height: 654px; -webkit-transition: right 0.5s ease; transition: right 0.5s ease}
#interface .sleigh svg {position: relative}
#interface .table {position: absolute; top: 152px; right: 0; width: 100px; background: #4ab67f; border: 2px solid #fff; border-right: 0}
#interface .table .item {position: relative; width: 100px; height: 100px; background: #4ab67f; border-bottom: 2px solid #fff; text-align: center; cursor: not-allowed; -webkit-transition: background 0.25s ease; transition: background 0.25s ease}
#interface .table .item:before {content: ''; display: block; position: absolute; top: 0; left: -15px; opacity: 0; width: 30px; height: 30px; background: url('../images/interface/ok.svg') no-repeat; background-size: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 0.25s ease; transition: all 0.25s ease}
#interface .table .item svg {width: 50px; height: 70px; margin: 14px auto}
#interface .table .item:last-child {border-bottom: 0}
#interface .table .item .hidden {opacity: 0}
#interface .table .item.active {cursor: pointer}
#interface .table .item.active .hidden {opacity: 1}
#interface .table .item.active:hover {background: #73d6a4}
#interface .table .item.active:before {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
#switches {position: fixed; top: 0; right: 0; z-index: 100; height: 66px; background: #fff}
#switches button {float: left; min-width: 64px; height: 64px; background-color: #4ab67f; background-position: center center; background-repeat: no-repeat; border: 0; padding: 0 15px; margin: 0 0 2px 2px; color: #fff; font-family: 'Oldenburg'; font-size: 18px; cursor: pointer}
#switches button:hover {background-color: #73d6a4}
#switches .sounds[data-sounds="on"] {background-image: url('../images/interface/sound_on.svg')}
#switches .sounds[data-sounds="off"] {background-image: url('../images/interface/sound_off.svg')}

@media screen and (max-height: 900px) {
    #interface .table {width: 75px}
    #interface .table .item {width: 75px; height: 75px}
    #interface .table .item svg {height: 45px}
}

/*
 * Modal window
 */
#modal-overlay {display: none; position: fixed; z-index: 100; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5)}
#modal-overlay .box-modal {position: absolute; top: 82px; left: 100px; width: 690px; background: #76a5a8; border: 2px solid #fff; border-radius: 10px; color: #fff; line-height: 28px}
#modal-overlay .box-modal .close {position: absolute; top: -10px; right: -20px; z-index: 11; width: 54px; height: 54px; background: url(../images/close.svg) center no-repeat #75958f; background-size: 14px; border: 0; border-radius: 100%; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); text-indent: -999em; cursor: pointer; -webkit-transition: box-shadow 0.25s ease; transition: box-shadow 0.25s ease}
#modal-overlay .box-modal .close:hover {box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.5)}
#modal-overlay .box-modal .modal-content {display: none; padding: 40px 40px 40px 80px; white-space: normal}
#modal-overlay .box-modal .modal-content p + p {margin-top: 10px}
#modal-overlay .box-modal .modal-content h2 {margin-bottom: 20px; font-weight: 400}
#modal-overlay .box-modal .modal-content a {color: #fff}
#popup-head,
#popup-head > * {position: absolute}
#popup-head {top: -50px; left: -60px; width: 101px; height: 239px; -webkit-animation: popup-head 2s linear infinite; animation: popup-head 2s linear infinite}
#popup-head .hat {top: 4px; left: 0; -webkit-transform-origin: top right; -webkit-animation: popup-hat 2s linear infinite; transform-origin: top right; animation: popup-hat 2s linear infinite}
#popup-head .mouth {top: 200px; left: 52px; -webkit-animation: popup-mouth 1.5s linear infinite; animation: popup-mouth 1.5s linear infinite}

@media screen and (max-height: 700px) {
    #modal-overlay .box-modal {font-size: 14px}
}

/* Main character */
#character {position: fixed; top: auto; bottom: 8%; left: 35%; z-index: 20; width: 380px; height: 220px}
#character * {position: absolute; -webkit-transform-origin: top left; transform-origin: top left}
#character #santa {width: 100px; height: 206px; left: 300px}
#character #body {width: 100px; height: 180px}
#character #arm-left {top: 130px; left: 25px; -webkit-transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease}
#character #arm-right {top: 120px; left: -30px; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform 1s ease; transition: transform 1s ease; -webkit-transform-origin: top right; transform-origin: top right}
#character #leg-left {top: 160px; left: 10px}
#character #leg-right {top: 165px; left: 0px}
#character #chest {top: 113px; left: -20px}
#character #head {width: 100px; height: 150px; top: 12px; left: -30px; -webkit-transition: -webkit-transform .25s ease; transition: transform .25s ease; -webkit-transform-origin: 50% 80%; transform-origin: 50% 80%}
#character #head .face .eye {-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition: all 0.25s linear; transition: all 0.25s linear}
#character #head .face {top: 33px; left: 27px}
#character #head .hat {top: 0; left: 0}
#character #sleigh {top: 38px; left: 20px; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition: -webkit-transform 1s ease; transition: transform 1s ease}
#character #sleigh .skate {top: 150px}
#character #sleigh .mask {width: 170px; height: 125px}
#character #sleigh .dot {top: 50px; left: 125px}
#character #sleigh .strips {top: 65px; left: 136px; -webkit-transition: -webkit-transform 1s ease; transition: transform 1s ease}
#character #character-traces {opacity: 0; width: 128px; height: 10px; top: 208px; left: 195px; background: url('../images/character/traces.svg') repeat-x; -webkit-transition: opacity 0.25s linear; transition: opacity 0.25s linear}
#character #character-traces:before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 30px; height: 10px; background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(240,247,244,1)), color-stop(100%,rgba(240,247,244,0))); background: -webkit-linear-gradient(left,  rgba(240,247,244,1) 0%,rgba(240,247,244,0) 100%); background: -ms-linear-gradient(left,  rgba(240,247,244,1) 0%,rgba(240,247,244,0) 100%); background: linear-gradient(to right,  rgba(240,247,244,1) 0%,rgba(240,247,244,0) 100%)}
#sleigh-traces {top: auto; left: -100px; bottom: calc(8% - 2px); width: 0; height: 5px; background: #c6e0d4; border-radius: 2px}

.sleigh .items {-webkit-transform: translate3d(0,120px,0) scale(0.8); transform: translate3d(0,120px,0) scale(0.8)}
.sleigh .items .item {-webkit-transition: all 0.25s ease, opacity 1s ease; transition: all 0.25s ease, opacity 1s ease}
.sleigh .item-1 .eye {-webkit-animation: eyes 4s steps(1,end) infinite; animation: eyes 4s steps(1,end) infinite}
.sleigh .item-7 {-webkit-transform: translate3d(-20px,120px,0) scale(0.8); transform: translate3d(-20px,120px,0) scale(0.8)}
.sleigh.item-1 .item-1 {-webkit-transform: translate3d(-95.456198px,-172.153px,0) scale(1); transform: translate3d(-95.456198px,-172.153px,0) scale(1)}
.sleigh.item-3 .item-3 {-webkit-transform: translate3d(-95.456198px,-172.153px,0) scale(1); transform: translate3d(-95.456198px,-172.153px,0) scale(1)}
.sleigh.item-5 .item-5 {-webkit-transform: translate3d(-95.456198px,-172.153px,0) scale(1); transform: translate3d(-95.456198px,-172.153px,0) scale(1)}
.sleigh.item-7 .item-7 {-webkit-transform: translate3d(-95.456198px,-172.153px,0) scale(1); transform: translate3d(-95.456198px,-172.153px,0) scale(1)}
.sleigh.item-8 .item-8 {-webkit-transform: translate3d(-95.456198px,-172.153px,0) scale(1); transform: translate3d(-95.456198px,-172.153px,0) scale(1)}

#resolution-alert {position: fixed; z-index: 9999; width: 100%; height: 100%; background: url('../images/overlay_pattern.png'); text-align: center}
#resolution-alert > div {position: absolute; top: 50%; margin-top: -155px; width: 100%; height: 310px; padding: 20px; text-align: center}
#resolution-alert p {display: inline-block; padding: 15px 20px; color: #fff; background: #CF5D5D; border-bottom: 5px solid #964A4A; border-radius: 10px; text-align: center; white-space: normal}
#resolution-alert button {display: inline-block; width: auto; margin-top: 40px; padding: 20px 10px}


.ie .sleigh .items .item {opacity: 0}
.ie .sleigh.item-1 .item-1 {opacity: 1}
.ie .sleigh.item-3 .item-3 {opacity: 1}
.ie .sleigh.item-5 .item-5 {opacity: 1}
.ie .sleigh.item-7 .item-7 {opacity: 1}
.ie .sleigh.item-8 .item-8 {opacity: 1}