/*
	*********************************************************************************************************************
	Custom SASS - Project: Navidad 21
	Tasks: Html / Css / jQuery
	Client: Pryconsa
	Version: 1.0
	********************************************************************************************************************
*/
/* ********************************************************************************************************************* IMPORTS */
@import url(normalize.css);
@import url(animate.min.css);
@import url(grid.css);
@import url(svg-anims.css);
/* ********************************************************************************************************************* VARS */
/* ********************************************************************************************************************* GLOBAL */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;900&display=swap");
* { margin: 0; }

body, html { overflow-x: hidden; height: 100%; width: 100%; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 13px; line-height: 1.3; color: #333333; background-color: #e7e4d9; }

img { max-width: 100%; }

p { line-height: 25px; }

a, a:before, a:after { text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

a:hover, a:active, a:focus { outline: none; }

a { color: #333333; }

a.default-link { color: #49575e; text-decoration: underline; }

a.accent-link { color: #ef7e25; }

a.white-link { color: #fff; }

a.grey-link { color: #49575e; }

a.light-grey-link { color: #c4c8d2; }

a.dark-link { color: #4D4D4D; }

a.black-link { color: #000; }

a.white-link:hover, a.dark-link:hover, a.black-link:hover { color: #ef7e25; }

a.grey-link:hover { text-decoration: underline; }

a.light-grey-link:hover { color: #fff; }

a.arrowfy:before { position: relative; display: inline-block; content: ''; width: 11px; height: 9px; margin-right: 5px; margin-left: -16px; background: transparent url("../images/shared/arrow-link.png") left top no-repeat; opacity: 0; filter: alpha(opacity=0); pointer-events: none; }

a.arrowfy:hover:before { margin-left: 0; opacity: 1; filter: alpha(opacity=100); }

h1, h2, h3, h4, h5, h6 { font-weight: 400; -webkit-font-smoothing: antialiased; }

strong, .bold { font-weight: 700; }

button { font-family: 'Montserrat', sans-serif; }

textarea:focus, select:focus, input:focus { outline: 0; }

.colored { color: #ef7e25; }

ul li { list-style: none; }

.rwd-break { display: none; }

a.line-link { display: inline-block; padding-bottom: 6px; line-height: 0; color: #333333; }
a.line-link:after { content: ''; position: relative; width: 100%; height: 2px; margin-bottom: -5px; display: inline-block; background-color: transparent; transform: scaleX(0); -webkit-transform-origin: 0 0; transform-origin: 50% 0; -webkit-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -moz-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -ms-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); }
a.line-link:hover { color: #ef7e25 !important; }
a.line-link:hover:after { background-color: #ef7e25; transform: scaleX(1); }

.footer-link { position: relative; display: none; width: 320px; left: calc(50% - 160px); margin: 20px auto 60px 0; font-size: 12px; letter-spacing: 1px; text-align: center; color: #333333; border: 1px solid #49575e; padding: 6px 0; }
.footer-link.active { display: inline-block !important; }
.footer-link:hover { color: #fff; background-color: #ef7e25; border-color: #ef7e25; }

/* ********************************************************************************************************************* LAYOUT */
.flex { display: flex; flex-flow: row wrap; justify-content: space-between; }

.divider-20 { height: 20px; }

.divider-50 { height: 50px; }

.divider-80 { height: 80px; }

.divider-100 { height: 100px; }

.divider-120 { height: 120px; }

::selection { background: #dbdbdb; }

::-moz-selection { background: #dbdbdb; }

/* ********************************************************************************************************************* SHARED */
.claim { font-size: 20px; line-height: 1.5; text-align: center; }
.claim a { opacity: 0; font-weight: 900; }

input[type=checkbox] { height: 0; width: 0; visibility: hidden; }
input[type=checkbox] + label { position: relative; display: block; cursor: pointer; width: 80px; height: 34px; text-indent: -9999px; background: #dfdcd6; border-radius: 100px; box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.3); -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -ms-transition: background 0.5s ease; -o-transition: background 0.5s ease; transition: background 0.5s ease; }
input[type=checkbox] + label:after { content: ''; position: absolute; box-sizing: border-box; top: 2px; left: 2px; width: 30px; height: 30px; background: #fff; border-radius: 30px; border: 1px solid rgba(0, 0, 0, 0.3); -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); -ms-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); box-shadow: inset 0px 2px 4px 1px rgba(0, 0, 0, 0.1); }
input[type=checkbox] + label:active:after { width: 40px; }
input[type=checkbox]:checked + label { background: #ef7e25; }
input[type=checkbox]:checked + label:after { left: calc(100% - 2px); transform: translateX(-100%); }

.trail { position: absolute; pointer-events: none; height: 6px; width: 6px; border-radius: 3px; background: #ef7e25; filter: blur(4px); }

.dot { position: absolute; width: 35px; height: 35px; background: url(../images/flake.png); background-size: 30% 30%; background-repeat: no-repeat; }

.preload { position: absolute; width: 100%; margin-top: 45vh; text-align: center; }
.preload h6 { font-weight: 500; font-size: 14px; text-align: center; color: #555; }

.battery { position: absolute; display: table; border: 3px solid #555; padding: 5px; margin-top: -30px; left: calc(50% - 40px); transform: translateY(-50%); }
.battery:after { content: ""; display: block; width: 7px; height: 15px; background: #555; position: absolute; right: -7px; }
.battery .battery_item { display: block; width: 15px; height: 15px; float: left; background-color: #555; filter: alpha(opacity=0); opacity: 0; animation: _fade 0.5s 2s infinite alternate forwards; }
.battery .battery_item:not(:last-child) { margin-right: 5px; }
.battery .battery_item:first-child { animation-delay: 0.2s; }
.battery .battery_item:nth-child(2) { animation-delay: 0.4s; }
.battery .battery_item:last-child { animation-delay: 0.6s; }
@keyframes _fade { from { filter: alpha(opacity=0); opacity: 0; }
  to { filter: alpha(opacity=100); opacity: 1; } }
/* ********************************************************************************************************************* APP */
#app { display: none; width: 1200px; height: 850px; margin: 20px auto 30px auto; padding: 8px; background-color: #e8e5e0; border: 1px solid #b7b3a8; box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.1); }
#app .screen { position: relative; box-sizing: border-box; width: 100%; height: 100%; background-color: #ece9e4; border: 1px solid #b7b3a8; }
#app .header { box-sizing: border-box; height: 40px; background-color: #e5e2db; border-bottom: 1px solid #b7b3a8; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1); }
#app .header .home img { height: 30px; padding-top: 5px; }
#app .header .title { text-align: center; font-size: 18px; font-weight: 500; line-height: 40px; }
#app .header .time { text-align: right; font-size: 18px; font-weight: 500; line-height: 40px; }
#app .header .time > div { display: inline-block; vertical-align: top; box-sizing: border-box; }
#app .menu { padding: 25px; }
#app .menu li { position: relative; box-sizing: border-box; width: 18.5%; padding: 15px 15px 30px 15px; text-align: center; border-radius: 15px; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.12); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
#app .menu li:hover, #app .menu li.active { background-color: rgba(255, 255, 255, 0.3); box-shadow: 0px 5px 14px 0px rgba(0, 0, 0, 0.2); }
#app .menu li span { display: block; padding: 8px 0 0 0; font-size: 18px; font-weight: 800; }
#app .menu li .toggle { width: 80px; margin: 0 auto; }
#app .sections { position: relative; }
#app .sections .section { position: absolute; visibility: hidden; pointer-events: none; box-sizing: border-box; top: 0; padding: 25px 50px; opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
#app .sections .active { visibility: visible; pointer-events: auto; opacity: 1; }
#app .s01 { padding-top: 0 !important; }
#app .s01 .logo { display: block; width: 150px; }
#app .s01 .claim { margin-top: 20px; width: 50%; text-align: left; }
#app .s01 .feliz { position: absolute; top: 280px; left: 370px; width: 320px; }
#app .s02 .logo { display: block; width: 700px; margin: 50px auto; }
#app .s02 .logo svg { width: 100%; }
#app .s02 .claim { margin: 30px auto 0 auto; width: 95%; }
#app .s03 .logo { display: block; width: 300px; margin: 50px auto; }
#app .s03 .logo svg { width: 100%; }
#app .s03 .all img { position: absolute; left: calc(50% - 100px); top: 130px; width: 200px; opacity: 0; transform: scale(0.2); }
#app .s03 .all img.small { left: calc(50% - 85px); width: 170px; }
#app .s03 .claim { margin: 0 auto; width: 80%; }
#app .s04 .logo { display: block; width: 600px; margin: 50px auto; }
#app .s04 .logo svg { width: 100%; }
#app .s04 .claim { margin: 30px auto 0 auto; width: 92%; }
#app .s05 .logo { display: block; width: 520px; margin: 50px auto; }
#app .s05 .logo svg { width: 100%; }
#app .s05 .claim { margin: 30px auto 0 auto; width: 92%; }
#app .game { position: absolute; pointer-events: none; top: 40px; right: 0; width: 100%; height: calc(100% - 40px); }
#app .game .tools { position: absolute; pointer-events: auto; top: 540px; left: 50px; }
#app .game .tools li { margin-bottom: 0; }
#app .game .tools .toggle { display: inline-block; vertical-align: top; transform-origin: 0 0; margin-top: -12px; transform: scale(0.6); }
#app .game .tools span { display: inline-block; vertical-align: top; margin-left: -20px; font-size: 18px; font-weight: 800; }
#app .game .tree { position: absolute; bottom: 55px; right: 80px; }
#app .game .tree img { width: 340px; }
#app .game .lights { position: absolute; display: none; bottom: 90px; right: 50px; transform: scale(0.4); filter: blur(80px); transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1), filter 1s cubic-bezier(0.39, 0.575, 0.565, 1); }
#app .game .lights.active { transform: scale(1); filter: blur(0); }
#app .game .lights .bulb { position: absolute; display: none; width: 25px; height: 35px; filter: drop-shadow(0px 0px 10px #fcf37c); }
#app .game .lights .bulb.rotated { transform: rotate(-50deg); }
#app .game .lights .bulb.b0 { top: 70px; left: 170px; }
#app .game .lights .bulb.b1 { top: 162px; left: 238px; }
#app .game .lights .bulb.b2 { top: 202px; left: 80px; }
#app .game .lights .bulb.b3 { top: 260px; left: 200px; }
#app .game .lights .bulb.b4 { top: 273px; left: 120px; }
#app .game .lights .bulb.b5 { top: 325px; left: 12px; }
#app .game .lights .bulb.b6 { top: 370px; left: 320px; }
#app .game #snow { position: fixed; pointer-events: none; width: 100%; height: 100%; top: 0; left: 0; }
#app .game .gifts { position: absolute; display: none; bottom: 170px; right: 30px; width: 450px; transform: scale(0.2); filter: blur(80px); transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), filter 1s cubic-bezier(0.39, 0.575, 0.565, 1); }
#app .game .gifts.active { transform: scale(1); filter: blur(0); }
#app .game .gifts .gift { position: absolute; display: none; }
#app .game .gifts .gift.g1 { top: 10px; left: 10px; }
#app .game .gifts .gift.g2 { top: 45px; left: 100px; }
#app .game .gifts .gift.g3 { top: -50px; left: 230px; }
#app .game .gifts .gift.g4 { top: 10px; left: 330px; }
#app .game .candies { position: absolute; display: none; top: 260px; right: 0; width: 500px; transform: scale(0.2); filter: blur(80px); transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), filter 1s cubic-bezier(0.39, 0.575, 0.565, 1); }
#app .game .candies.active { transform: scale(1); filter: blur(0); }
#app .game .candies .candy { position: absolute; display: none; }
#app .game .candies .candy.c1 { top: 50px; left: 90px; }
#app .game .candies .candy.c2 { top: 25px; left: 290px; }
#app .game .candies .candy.c3 { top: 60px; left: 370px; }
#app .game .candies .candy.c4 { top: 120px; left: 140px; }
#app .game .candies .candy.c5 { top: 170px; left: 50px; }
#app .game .candies .candy.c6 { top: 160px; left: 100px; width: 70px; }
#app .game .candies .candy.c7 { top: 190px; left: 390px; }
#app .game .candies .candy.c8 { top: 280px; left: 50px; }
#app .game .candies .candy.c9 { top: 440px; left: 400px; }
#app .game .candies .candy.c10 { top: 460px; left: 90px; }
#app .shared > img { position: absolute; opacity: 0; }
#app .shared .img1 { bottom: -40px; left: -60px; }
#app .shared .img2 { bottom: -45px; left: 20px; }
#app .shared .img3 { bottom: -30px; right: -5px; }
#app .shared .img4 { bottom: -30px; right: -60px; }

/* ********************************************************************************************************************* FIREFOX POSITION FIXES */
@-moz-document url-prefix() {}
/* ********************************************************************************************************************* IMPORT RESPONSIVE */
/*
	*********************************************************************************************************************
	Custom RESPONSIVE SASS - Project: Navidad 21
	Tasks: Html / Css / jQuery
	Client: Pryconsa
	Version: 1.0
	********************************************************************************************************************
*/
/* ********************************************************************************************************************* IMPORTS */
/* ********************************************************************************************************************* VARS */
/* ********************************************************************************************************************* RESPONSIVE MEDIA QUERIES */
/* ********************************************************************************************************************* SMALL SCREENS < 1280 */
@media screen and (max-width: 1280px) { .claim { font-size: 18px; line-height: 1.4; }
  #app { width: 980px; height: 800px; }
  #app .menu li img { width: 110px; }
  #app .menu li span { font-size: 15px; }
  #app .s01 .claim { margin-top: 15px; width: 60%; }
  #app .s01 .feliz { top: 360px; left: 50px; width: 260px; }
  #app .s02 .claim { width: 100%; }
  #app .game .tools { top: 440px; } }
/* ********************************************************************************************************************* TABLET VERTICAL */
@media screen and (max-width: 1000px) { .claim { font-size: 16px; }
  #app { width: 700px; height: 800px; margin-top: calc((100vh - 800px) / 2 ); }
  #app .header > div { float: left; width: 33%; font-size: 16px !important; }
  #app .menu { padding: 15px; }
  #app .menu li img { width: 90px; }
  #app .menu li span { font-size: 11px; }
  #app .sections .section { max-width: 698px; }
  #app .s01 { padding-top: 15px !important; }
  #app .s01 .claim { margin-top: 15px; width: 65%; }
  #app .s01 .feliz { top: 400px; left: 50px; width: 220px; }
  #app .s02 .logo, #app .s04 .logo, #app .s05 .logo { width: 500px; }
  #app .s03 .all { transform-origin: center 0; transform: scale(0.7); 				/* img {
					width: 150px;

					&.small {
						left: calc(50% - 85px);
						width: 150px;
					}
				} */ }
  #app .s03 .all img { top: -100px; }
  #app .game .tools { top: 440px; }
  #app .game .tree { right: 10px; }
  #app .game .lights { right: -20px; }
  #app .game .gifts { right: -40px; }
  #app .game .candies { top: 210px; right: -70px; } }
/* ********************************************************************************************************************* LANDSCAPE MOBILES AND DOWN */
@media screen and (max-width: 767px) { .claim { margin-top: 10px !important; font-size: 13px; }
  #app { box-sizing: border-box; width: 350px; height: 700px; margin-top: 15px; }
  #app .header { height: 30px; }
  #app .header > div { font-size: 13px !important; line-height: 30px !important; }
  #app .header .home { width: 13%; }
  #app .header .home img { height: 20px; }
  #app .header .title { width: 12%; }
  #app .header .time { width: 73%; }
  #app .menu { padding: 10px; }
  #app .menu li { height: 70px; padding: 10px 10px 0 10px; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1); }
  #app .menu li img { width: 80px; }
  #app .menu li span { display: none; }
  #app .menu li .toggle { vertical-align: top; transform-origin: 0 0; margin-top: 0px; transform: scale(0.46); }
  #app .sections .section { max-width: 330px; padding: 20px; }
  #app .s01 .logo { width: 110px; }
  #app .s01 .claim { position: absolute; top: 4px; left: 150px; width: 170px; font-size: 12px !important; line-height: 1.3; }
  #app .s01 .feliz { top: 490px; left: 20px; width: 150px; }
  #app .s02 .logo, #app .s04 .logo, #app .s05 .logo { width: 250px; }
  #app .s03 .logo { width: 250px; }
  #app .s03 .all { transform-origin: center 0; transform: scale(0.6); }
  #app .s03 .all img { top: -100px; }
  #app .game .tools { top: 215px; left: 20px; }
  #app .game .tools li { height: 25px; }
  #app .game .tools .toggle { margin-top: -6px; transform: scale(0.5); }
  #app .game .tools span { margin-left: -25px; font-size: 14px; }
  #app .game .tree { transform-origin: center bottom; transform: scale(0.6); bottom: 80px; right: 10px; }
  #app .game .lights, #app .game .gifts, #app .game .candies { transform-origin: center 0; }
  #app .game .lights.active, #app .game .gifts.active, #app .game .candies.active { transform: scale(0.6); }
  #app .game .lights { bottom: -25px; right: 10px; }
  #app .game .gifts { bottom: 130px; right: -60px; }
  #app .game .candies { top: 290px; right: -80px; }
  #app .shared .img1 { bottom: -20px; left: -40px; }
  #app .shared .img2 { bottom: -25px; left: 40px; }
  #app .shared .img3 { bottom: -20px; right: 25px; }
  #app .shared .img4 { bottom: -20px; right: -30px; } }