/* Scene 1 (Intro) */
#tree-1 {display: block; left: 200px; bottom: 13%; width: 197px; height: 218px}
#tree-2 {left: 1200px; bottom: 12%; width: 493px; height: 407px}
#tree-2 .head {left: 180px; top: 125px}
#tree-2.right .head {-webkit-transform: translate3d(20px, 0, 0) scaleX(-1); transform: translate3d(20px, 0, 0) scaleX(-1)}
#tree-2 .head .eye {-webkit-animation: eye 4s steps(1,end) infinite; animation: eye 4s steps(1,end) infinite}

/* Scene 2 (Fish) */
#item-1 {width: 94px; height: 73px}
#scene-2 {left: 1680px; width: 1850px}
#tree-3 {left: 200px; bottom: 10%; width: 410px; height: 348px}
#tree-4 {left: 1000px; bottom: 12%; width: 228px; height: 176px}
#tree-5 {left: 1600px; bottom: 10%; width: 256px; height: 285px}
#fish {left: 735px; bottom: 0%; width: 100px; height: 110px}
#fish .fish {-webkit-animation: fish 2s ease infinite; -webkit-animation-delay: 0.1s; animation: fish 2s ease infinite; animation-delay: 0.1s}
#fish .eye {-webkit-animation: eyes 4s steps(1,end) infinite; animation: eyes 4s steps(1,end) infinite}
#fish .fish-hole {z-index: 0}
#fish .fish-hole,
#fish .fish-hole-mask {left: -30px; bottom: 0}
#button-fish {position: absolute; left: 860px; bottom: 27%}
#cow {left: 1260px; bottom: 10%; width: 205px; height: 180px}
#cow .head {left: 160px; top: 20px; -webkit-animation: cow-head 6s ease infinite; animation: cow-head 6s ease infinite}
#cow .head .eye {-webkit-animation: eye 4s steps(1,end) infinite; animation: eye 4s steps(1,end) infinite}
#cow .tail {left: 58px; top: 50px; -webkit-transform-origin: top right; -webkit-animation: cow-tail 4s linear infinite; transform-origin: top right; animation: cow-tail 4s linear infinite}
#button-cow {position: absolute; left: 1490px; bottom: 24%}

/* Scene 3 (Radio) */
#scene-3 {left: 3530px; width: 900px}
#tree-6 {left: 200px; bottom: 13%; width: 207px; height: 204px}
#radio {left: 500px; bottom: 11%; width: 200px; height: 320px}
#radio > * {bottom: 0}
#radio > .radio {-webkit-transform-origin: center bottom; transform-origin: center bottom}
#radio > .snow {z-index: 19}
#radio > [class*="note"] {opacity: 0}
#radio.active > .note {left: 70px; bottom: 75px; -webkit-transform-origin: center bottom; -webkit-animation: note 3.75s linear 1s infinite; transform-origin: center bottom; animation: note 3.75s linear 1s infinite}
#radio.active > .note2 {-webkit-animation-delay: 1.75s; animation-delay: 1.75s}
#radio.active > .note3 {-webkit-animation-delay: 2.50s; animation-delay: 2.50s}
#radio.active > .note4 {-webkit-animation-delay: 3.25s; animation-delay: 3.25s}
#radio.active > .note5 {-webkit-animation-delay: 3.75s; animation-delay: 3.75s}
#radio.active > .radio {-webkit-animation: radio 1.25s linear 0.5s infinite; animation: radio 1.25s linear 0.5s infinite}
#radio #item-3 {z-index: 18; width: 32px; height: 37px; left: 90px; bottom: 4%}
#button-radio {position: absolute; left: 700px; bottom: 24%}

/* Scene 4 (Gift) */
#scene-4 {left: 4430px; width: 2400px}
#tree-7 {left: 250px; bottom: 13%; width: 538px; height: 300px}

#marten {left: 100px; bottom: 12%; width: 127px; height: 104px}
#marten .marten {left: 30px; -webkit-animation: marten 6s linear infinite; animation: marten 6s linear infinite}
#marten .marten .eye {-webkit-animation: eye 4s steps(1,end) infinite; animation: eye 4s steps(1,end) infinite}

#chair {left: 830px; bottom: 16%; width: 227px; height: 147px}
#chair .chair {-webkit-transform-origin: 20% 100%; -webkit-transition: -webkit-transform 0.25s ease; transform-origin: 20% 100%; transition: transform 0.25s ease}
#chair.active .chair {-webkit-transform: translate3d(0,-20px,0) rotate(20deg); transform: translate3d(0,-20px,0) rotate(20deg)}
#chair .snow {top: 100px}
#button-chair {position: absolute; left: 950px; bottom: 28%}

#tree-8 {left: 1300px; bottom: 12%; width: 226px; height: 174px}

#snowman {left: 1500px; bottom: 12%; width: 251px; height: 174px}
#snowman .snowman {left: 100px; -webkit-transform-origin: center bottom; -webkit-animation: snowman 1.5s ease infinite alternate; transform-origin: center bottom; animation: snowman 1.5s ease infinite alternate}
#snowman .snow {top: 120px}

#tree-9 {left: 1800px; bottom: 12%; width: 220px; height: 290px}

#gifts {z-index: 19; left: 2100px; bottom: 13%; width: 123px; height: 112px}
#gifts #item-5 {z-index: 18; left: 35px}
#gifts .gifts {z-index: 19}
#gifts .snow {z-index: 19; top: 75px}
#button-gift {position: absolute; left: 2200px; bottom: 23%}

/* Scene 5 (creche) */
#scene-5 {left: 6830px; width: 1800px}
#boy {left: 100px; bottom: 12%; width: 132px; height: 140px}
#boy .body {top: 65px; left: 60px}
#boy .head {left: 60px}
#boy .arm {top: 63px; left: 32px; -webkit-transform: rotateZ(20deg); -webkit-transform-origin: center right; transform: rotateZ(20deg); transform-origin: center right; -webkit-animation: boy-arm .75s ease infinite alternate; animation: boy-arm .75s ease infinite alternate}
#boy .snowball {top: 55px; left: 31px; -webkit-animation: boy-snowball .75s ease infinite alternate; animation: boy-snowball .75s ease infinite alternate}
#boy .snow {top: 100px;}
#boy.active {}
#boy.active .head {-webkit-transform: scaleX(-1); transform: scaleX(-1)}
#boy.active .arm {-webkit-animation: boy-active-arm 4s ease; animation: boy-active-arm 4s ease}
#boy.active .snowball {-webkit-animation: boy-active-snowball 4s linear; animation: boy-active-snowball 4s linear}

#christmas-tree {left: 300px; bottom: 12%; width: 168px; height: 348px}
#christmas-tree .lamps {top: 170px; left: 17px}
#christmas-tree .snow {top: 320px}
#christmas-tree .star {left: 58px; -webkit-transform-origin: center bottom; transform-origin: center bottom}
#christmas-tree .tree {width: 186px; height: 348px; -webkit-transform-origin: center bottom; transform-origin: center bottom}
#christmas-tree .snow-tree {top: 130px; left: 55px}
#christmas-tree.active .tree {-webkit-animation: christmas-tree-active 1s ease-in 1.3s; animation: christmas-tree-active 1s ease-in 1.3s}
#christmas-tree.active .star {-webkit-animation: christmas-star-active 1s ease 1.3s; animation: christmas-star-active 1s ease 1.3s}
#christmas-tree.active .snow-tree.snow1 {-webkit-animation: christmas-snow-active .7s linear 1.3s; animation: christmas-snow-active .7s linear 1.3s}
#christmas-tree.active .snow-tree.snow2 {-webkit-animation: christmas-snow-active .6s linear 1.4s; animation: christmas-snow-active .6s linear 1.4s}
#button-christmas-tree {position: absolute; left: 430px; bottom: 40%}

#tree-10 {left: 500px; bottom: 12%; width: 228px; height: 196px}

#creche {left: 1500px; bottom: 10%; width: 337px; height: 343px}
#creche .crib {z-index: 19}
#creche .jesus {-webkit-animation: jesus 3s ease infinite; animation: jesus 3s ease infinite}
#creche .angel1 {width: 80px; height: 100px; -webkit-transform-origin: bottom right;; transform-origin: bottom right; -webkit-animation: angel 3s ease infinite; animation: angel 3s linear infinite}
#creche .angel1 .aureole {left: 40px}
#creche .angel1 .body {top:10px; left: 15px}
#creche .angel1 .wing1 {top: 25px; left: 10px; -webkit-transform-origin: right; transform-origin: right; -webkit-animation: wing 0.2s linear infinite alternate; animation: wing 0.2s linear infinite alternate}
#creche .angel1 .wing2 {top: 47px; left: 48px; -webkit-transform-origin: left; transform-origin: left; -webkit-animation: wing 0.2s linear infinite alternate-reverse; animation: wing 0.2s linear infinite alternate-reverse}
#creche .angel2 {width: 80px; height: 100px; left: 280px; -webkit-transform-origin: bottom left; transform-origin: bottom left; -webkit-animation: angel 3s ease infinite reverse; animation: angel 3s linear infinite reverse}
#creche .angel2 .aureole {left: 30px}
#creche .angel2 .body {top:10px; left: 15px}
#creche .angel2 .wing1 {top: 52px; left: 18px; -webkit-transform-origin: right; transform-origin: right; -webkit-animation: wing 0.2s linear infinite alternate; animation: wing 0.2s linear infinite alternate}
#creche .angel2 .wing2 {top: 40px; left: 52px; -webkit-transform-origin: left; transform-origin: left; -webkit-animation: wing 0.2s linear infinite alternate-reverse; animation: wing 0.2s linear infinite alternate-reverse}
#creche #item-7 {z-index: 18; top: 210px; left: 210px}
#button-creche {position: absolute; left: 1750px; bottom: 20%}

#tree-11 {left: 980px; bottom: 12%; width: 281px; height: 289px}

/* Scene 6 (wafer) */
#scene-6 {left: 8630px; width: 3100px}

#wafer {left: 800px; width: 200px; height: 215px; bottom: 10%}
#wafer #item-8 {z-index: 18; top: 10px; left: 0}
#wafer .hand {width: 62px; height: 193px; left: 88px; top: 90px; -webkit-transition: all 1.5s ease; transition: all 1.5s ease}
#wafer .finger {z-index: 19; top: 20px; left: 0}
#wafer .snow {top: 140px}
#wafer.active .hand {top: 20px}
#button-wafer {position: absolute; left: 780px; bottom: 20%}

#tree-12 {left: 80px; bottom: 8%; width: 328px; height: 357px}
#tree-13 {left: 570px; bottom: 10%; width: 227px; height: 182px}
#tree-14 {left: 1100px; bottom: 6%; width: 410px; height: 348px}
#tree-15 {left: 1600px; bottom: 10%; width: 240px; height: 190px}
#tree-16 {left: 1610px; bottom: 2%; width: 1112px; height: 247px; z-index: 31}

@media screen and (max-height: 900px) {
    #tree-16 {bottom: 2%; height: 235px}
}

#bear {left: 990px; bottom: 11%; width: 200px; height: 170px}
#bear .head {top: 10px; -webkit-animation: cow-head 4s ease infinite; animation: cow-head 4s ease infinite}
#bear .body {left: 25px}
#bear .snow {top: 100px}

#church {left: 1900px; bottom: 7%; width: 647px; height: 939px}
#church .church-1 {z-index: 30}
#church .bell {top: 190px; left: 140px; -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation: bell 2s ease infinite; animation: bell 2s ease infinite}
#church .bell-background {top: 190px; left: 90px}
#church .snow {top: 190px; left: 90px}
#button-church {position: absolute; left: 1800px; bottom: 30%; z-index: 32}

/* Gate */
#gate {position: fixed; visibility: hidden; width: 100%; height: 100%; z-index: 100}
#gate .gate {position: absolute; width: 50%; height: 100%; background-color: #624833; background-repeat: no-repeat; background-size: cover; -webkit-transition: all 1s linear; transition: all 1s linear}
#gate .gate-1 {left: -50%; background-image: url('../images/gate_1.png'); background-position: center right}
#gate .gate-2 {left: 100%; background-image: url('../images/gate_2.png'); background-position: center left}
#gate.active {visibility: visible}
#gate.active .gate-1 {left: 0%}
#gate.active .gate-2 {left: 50%}

/* End */
#end {position: fixed; z-index: 90; width: 100%; height: 100%; white-space: normal}

#end .hand {position: absolute; top: 40%; width: 577px; height: 320px}
#end .hand.left {left: -200px; -webkit-transform-origin: left bottom; -webkit-transform: rotateZ(90deg); transform-origin: left bottom; transform: rotateZ(90deg)}
#end .hand.right {right: -770px; -webkit-transform-origin: left bottom; -webkit-transform: scale3d(-1, 1, 1) rotateZ(-90deg); transform-origin: left bottom; transform: scale3d(-1, 1, 1) rotateZ(-90deg)}

#end .paper {position: absolute; left: 50%; margin-left: calc(-50% + 330px); width: calc(100% - 660px); height: 880px; min-width: 635px; -webkit-transform-origin: -150% 50%; -webkit-transform: rotateZ(90deg); transform-origin: -150% 50%; transform: rotateZ(90deg)}
#end .paper .background {height: 100%; -webkit-animation: end-paper .5s ease 1s infinite alternate; animation: end-paper .5s ease 1s infinite alternate}
#end .paper .background .front {position: absolute; top: -20px; z-index: 1; width: 100%; height: 100%; background: #fff; border-radius: 10px}
#end header {height: 70px; margin-bottom: 40px; border-bottom: 2px solid #d8e3dd}
#end header figure {position: absolute; top: 20px; left: 42px; width: 147px; height: 92px; padding: 0 12px; background: #fff}
#end .big {display: inline-block; padding: 10px 0 15px; font-size: 30px}
#end .emerald {color: #4ab67f}
#end .inset {position: absolute; top: 0; z-index: 3; width: 100%; height: 100%; color: #7f6057; font-size: 17px; text-align: center}
#end .content {padding: 40px 50px}
#end .content .button {height: 91px}
#end .content p {margin-bottom: 40px; line-height: 30px}
#end .content p:last-child {margin-bottom: 0}
#end .content a {display: inline-block; margin: 0 10px; text-decoration: none}
#end footer {position: relative; border-top: 2px solid #d8e3dd; color: #7f6057; text-align: center}
#end footer .content {padding: 10px 150px}
#end footer .content button {top: -5px; vertical-align: middle; -webkit-transform: scale(0.6); transform: scale(0.6); cursor: default}
#end footer .content button:after {position: relative; bottom: 12px}
#end footer #collected-items {color: #4ab67f; font-size: 30px; font-weight: 700}
#end footer #character-footer {position: absolute; top: auto; bottom: -70px; left: 60px; z-index: 20; width: 110px; height: 220px; -webkit-transform: scale(0.5); transform: scale(0.5)}
#end footer #character-footer * {position: absolute; -webkit-transform-origin: top left; transform-origin: top left}
#end footer #character-footer .santa {width: 100px; height: 206px; left: 0}
#end footer #character-footer .body {width: 100px; height: 180px}
#end footer #character-footer .arm-left {top: 130px; left: 25px; -webkit-transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease}
#end footer #character-footer .arm-right {top: 120px; left: -30px; -webkit-transform: rotate(0deg); -webkit-transition: -webkit-transform 1s ease; -webkit-transform-origin: top right; transform: rotate(0deg); transition: transform 1s ease; transform-origin: top right}
#end footer #character-footer .leg-left {top: 160px; left: 10px; -webkit-transform-origin: top right; transform-origin: top right}
#end footer #character-footer .leg-right {top: 165px; left: 0px}
#end footer #character-footer .chest {top: 113px; left: -20px}
#end footer #character-footer .head {width: 100px; height: 150px; top: 12px; left: -30px; -webkit-transition: -webkit-transform .25s ease; -webkit-transform-origin: 50% 80%; transition: transform .25s ease; transform-origin: 50% 80%}
#end footer #character-footer .head .face .eye {-webkit-transform: translate3d(5px,0,0); transform: translate3d(5px,0,0)}
#end footer #character-footer .head .face {top: 33px; left: 27px}
#end footer #character-footer .head .hat {top: 0; left: 0}
#end footer #character-footer .sleigh {top: 38px; left: 20px; -webkit-transform: translate3d(0,0,0); -webkit-transition: -webkit-transform 1s ease; transform: translate3d(0,0,0); transition: transform 1s ease}
#end footer #character-footer .sleigh .skate {top: 150px}
#end footer #character-footer .sleigh .mask {width: 170px; height: 125px}
#end footer #character-footer .sleigh .dot {top: 50px; left: 125px}
#end footer #character-footer .sleigh .strips {top: 65px; left: 136px; -webkit-transition: -webkit-transform 1s ease; transition: transform 1s ease}
#end footer #character-footer .character-traces {opacity: 1; width: 128px; height: 10px; top: 208px; left: -100px; background: url('../images/character/traces.svg') repeat-x; -webkit-transition: opacity 0.25s linear; transition: opacity 0.25s linear}
#end footer #character-footer .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%)}

#end.animate .paper {-webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-animation: end-paper-start 1s ease; animation: end-paper-start 1s ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards}
#end.animate .hand.left {-webkit-animation: end-left-arm-start 1s ease, end-left-arm .5s ease 1s infinite alternate; animation: end-left-arm-start 1s ease, end-left-arm .5s ease 1s infinite alternate; -webkit-animation-fill-mode: forwards, forwards; animation-fill-mode: forwards, forwards}
#end.animate .hand.right {-webkit-animation: end-right-arm-start 1s ease .5s, end-right-arm .5s ease 1.5s infinite alternate; animation: end-right-arm-start 1s ease .5s, end-right-arm .5s ease 2s infinite alternate; -webkit-animation-fill-mode: forwards, forwards; animation-fill-mode: forwards, forwards}

#end .social {position: absolute; top: 25px; right: 20px; text-align: right; vertical-align: top}
#end .social > div,
#end .social > iframe {display: inline; z-index: 10; margin-bottom: 10px !important; margin-right: 0; text-align: right; vertical-align: top}
#end .fb-like,
#end .fb-like > span {vertical-align: top !important}
#end .copyright {position: absolute; top: 87px; right: 20px; font-size: 12px}
#end .copyright svg {vertical-align: middle}

@media screen and (max-height: 900px) {
    #end .paper {position: absolute; left: 50%; margin-left: calc(-50% + 330px); width: calc(100% - 660px); height: 690px}
    #end .inset {font-size: 14px}
    #end .content {position: relative; z-index: 1; padding: 30px 50px 10px}
    #end header,
    #end .content p {margin-bottom: 14px; line-height: 24px}
    #end .content .button {height: 45px}
    #end .content .button button {width: 170px; padding: 8px 10px; font-size: 20px}
    #end footer .content {padding: 10px 110px}
    #end footer #character-footer {left: 40px; bottom: -70px}
    #end .copyright {top: 80px; width: 200px}
}