@charset "UTF-8";
/* CSS Document */
/* Body ----------------------------------------------------------------------------------------------------*/
.svg-arrow-left, .svg-arrow-right {
	width: 1.5rem;
	height: 1.5rem;
	position: relative;
	top: -0.2rem;
	font-size: 1.5rem;
	display: block;
}
.svg-arrow-left {
	left: -0.7rem;
	float: left;
}
.svg-arrow-right {
	right: -0.7rem;
	float: right;
}
.svg-pen-icon {
	right: -0.7rem;
	float: right;
	width: 1.7rem;
	height: 1.7rem;
	position: relative;
	top: -0.25rem;
	font-size: 1.5em;
	display: block;
}
.svg-basic {
	display: block;
	position: absolute;
}
#mascot-fox {
	height: 28rem;
	top: 14%;
	left: 8%;
    animation: bounceInDown 1s;
 	animation-fill-mode: both;
	animation-delay: 0.4s;
}
#mascot-fox #fox-head {
	animation: swing-head-fox 0.4s alternate infinite;
	animation-delay: 0.4s;
}
#mascot-fox #fox-arm-left {
	animation: swing-arm-fox 0.32s alternate infinite;
	animation-delay: 0.42s;
}
#mascot-fox #fox-arm-right {
	animation: swing-arm-fox 0.34s alternate infinite;
	animation-delay: 0.42s;
}
#rope-fox {
	width: 0.5rem;
	height: 27rem;
	top: -4%;
	left: 19%;
	z-index: -2;
    animation: bounceInDown 1s;
 	animation-fill-mode: both;
	animation-delay: 0.4s;
}
#mascot-deer {
	height: 15rem;
	right: 8%;
	top: 11%;
    animation: bounceInDown 1s;
 	animation-fill-mode: both;
	animation-delay: 0.6s;
}
#mascot-deer #deer-head {
	animation: swing-head-deer 0.35s alternate infinite;
	animation-delay: 0.6s;
}
#mascot-deer #deer-hand-right {
	animation: shake-handr-deer 0.5s alternate infinite;
	animation-delay: 0.65s;
}
#mascot-deer #deer-hand-left {
	animation: shake-handr-deer 0.5s alternate infinite;
	animation-delay: 0.65s;
}
#rope-deer {
	width: 0.5rem;
	height: 15rem;
	top: -5%;
	right: 16%;
	z-index: -2;
    animation: bounceInDown 1s;
 	animation-fill-mode: both;
	animation-delay: 0.6s;
}
#mascot-cub {
	width: 8.7rem;
	height: 9.2rem;
	top: 9%;
	left: 4%;
	z-index: -1;
    animation: bounceInDown 0.8s;
 	animation-fill-mode: both;
	animation-delay: 0.8s;
}
#mascot-cub #cub-head {
	animation: swing-head-cub 0.45s alternate infinite;
}
#mascot-cub #cub-arm-left {
	animation: swing-arml-cub 0.35s alternate infinite;
	animation-delay: 1.05s;
}
#mascot-cub #cub-arm-right {
	animation: swing-armr-cub 0.35s alternate infinite;
	animation-delay: 1.05s;
}
#rope-cub {
	width: 0.5rem;
	height: 10rem;
	top: -5%;
	left: 9%;
	z-index: -2;
    animation: bounceInDown 0.8s;
 	animation-fill-mode: both;
	animation-delay: 0.8s;
}
#mascot-bear {
	width: 29.5em;
	height: 21em;
	bottom: 0;
	right: 1%;
	z-index: -1;
    animation: zoomIn 0.8s;
 	animation-fill-mode: both;
	animation-delay: 0.8s;
}
#mascot-bear #vengala {
	animation: light-show 0.15s ease infinite;
}
#stars {
	width: 100%;
	height: 11.1111em;
	top: 0;
	left: 0;
	z-index: -3;
}
.star-child:nth-child(odd) {
	animation: bounceInDown 1s;
 	animation-fill-mode: both;
	animation-delay: 0.4s;
}
.star-child:nth-child(even) {
	animation: bounceInDown 1s;
 	animation-fill-mode: both;
	animation-delay: 0.6s;
}
.svg-choose, .svg-steps {
	height: 13.5em;
	margin: 0 0 1em;
	text-align: center;
}
#santa-holder {
	animation: move-santa 0.75s 1;
 	animation-fill-mode: both;
	animation-delay: 0.8s;
}
.santa-mouth {
	animation: jesus-breath 0.7s infinite;
 	animation-fill-mode: both;
	animation-delay: 1s;
}
#jesus-body-inside, .jesus-mouth {
	animation: jesus-breath 1.8s infinite;
 	animation-fill-mode: both;
	animation-delay: 0.9s;
}
#reyes-star {
	animation: move-star 1s 1;
 	animation-fill-mode: both;
	animation-delay: 2.2s;
}
#svg-pencil {
	width: 14em;
	height: 24em;
	top: 6em;
	left: 84%;
	z-index: 10;
}
#svg-ruler {
	width: 21em;
	height: 32em;
	top: 0.8em;
	left: 74%;
	z-index: -10;
}
#svg-pen {
	width: 21em;
	height: 32em;
	top: 95%;
	left: 2%;
	z-index: 10;
}
.svg-steps {
	margin: -0.5em 0 0.6em;
}
#printer-page {
	animation: move-page 1.5s 1;
 	animation-fill-mode: both;
	animation-delay: 0.8s;
}
#printer-lights-red {
	animation: flash 2s 1;
 	animation-fill-mode: both;
	animation-delay: 0.8s;
}
#printer-lights-green {
	animation: flash 0.7s 4;
 	animation-fill-mode: both;
	animation-delay: 0.7s;
}
#envelope-page {
	animation: move-letter 0.8s 1;
 	animation-fill-mode: both;
	animation-delay: 2.8s;
}
#delivery-father-inside {
	animation: move-father-arm 0.7s 1;
 	animation-fill-mode: both;
	animation-delay: 3.9s;
}
#delivery-child-inside {
	animation: move-child-arm 0.7s 1;
 	animation-fill-mode: both;
	animation-delay: 3.7s;
}
/* Responsify ----------------------------------------------------------------------------------------------------*/
@media (min-width: 1200px) {

#svg-pencil {
	top: 6em;
	left: 80%;
}
#svg-ruler {
	top: 0.8em;
	right: 1em;
	left: auto;
}
#svg-pen {
	top: 105%;
	left: 6%;
}

}
@media (max-width: 768px) {

}
@media (max-width: 600px){

}
@media (max-width: 480px){

}
@media (max-width: 360px){

}
@media (max-width: 320px) {


}