body {
margin: 0px;
height: 100%;
}


img {
border-width: 0px;
}


@font-face {
    font-family: "CenturyGothic-Bold";
    src: url('../font/CenturyGothic-Bold.eot');
    src: url('../font/CenturyGothic-Bold.eot') format('embedded-opentype'),
         url('../font/CenturyGothic-Bold.woff') format('woff'),
         url('../font/CenturyGothic-Bold.ttf') format('truetype'),
         url('../font/CenturyGothic-Bold.svg#CenturyGothic-Bold') format('svg');
}


@font-face {
    font-family: "CenturyGothic";
    src: url('../font/CenturyGothic.eot');
    src: url('../font/CenturyGothic.eot') format('embedded-opentype'),
         url('../font/CenturyGothic.woff') format('woff'),
         url('../font/CenturyGothic.ttf') format('truetype'),
         url('../font/CenturyGothic.svg#CenturyGothic') format('svg');
}


#preload {
display: none;
}


#intro {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #CD1623;
text-align: center;
z-index: 3;
}

#logo_universal {
position: absolute;
top: 5%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: auto;
height: 6%;
z-index: 1;
}

#logo_carta {
position: absolute;
top: 18%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: auto;
height: 25%;
z-index: 1;
}

.intro_santa {
position: absolute;
bottom: -60%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: auto;
height: 60%;
-webkit-transition: transform 20s;
-moz-transition: transform 20s;
-o-transition: transform 20s;
-ms-transition: transform 20s;
transition: transform 20s;
z-index: 2;
}
@media screen and (orientation:portrait) {
.intro_santa {
transform: translateX(-12%)
}
}


.rotate_90 { 
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}


#stars02 {
z-index: 1;
}


#intro_santa {
z-index: 2;
}


#stars01 {
z-index: 3;
}


#filter {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #CD1623;
text-align: center;
overflow-y: scroll;
z-index: 1;
}


#filter_santa {
position: fixed;
top: 20%;
left: 0px;
width: auto;
height: 80%;
z-index: 2;
}
@media screen and (orientation:portrait) {
#filter_santa {
position: absolute;
top: 9%;
width: 55%;
height: auto;
}
}


#logo_bg {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 25%;
background-color: #fff;
}


#logo_carta02 {
position: absolute;
top: 10%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: auto;
height: 80%;
}
@media screen and (orientation:portrait) {
#logo_carta02 {
left: auto;
right: 11%;
margin-left: inherit;
margin-right: inherit;
}
}


#participate {
position: absolute;
top: 29%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: auto;
height: 26%;
display: block;
}
@media screen and (orientation:portrait) {
#participate {
display: none;
}
}


#participate_mobile {
display: none;
}
@media screen and (orientation:portrait) {
#participate_mobile {
position: absolute;
top: 33%;
left: auto;
right: 8%;
width: 54%;
height: auto;
display: block;
}
}


.form {
position: absolute;
top: 65%;
left: 20%;
width: 60%;
height: 100%;
color: #fff;
font-family: "CenturyGothic-Bold", Arial, Helvetica, sans-serif;
font-size: 3vh;
}
@media screen and (orientation:portrait) {
.form {
top: 67%;
left: 0px;
width: 100%;
height: 90%;
font-size: 5.5vw;
line-height: 5.5vw;
}
}


#final_form {
top: 6%;
text-align: center;
color: #000;
}
@media screen and (orientation:portrait) {
#final_form {
top: 8.5%;
}
}


#disclaimer {
margin-top: 15px;
margin-left: 10%;
width: 80%;
font-size: 2vh;
letter-spacing: 0px;
line-height: 2.5vh;
}
@media screen and (orientation:portrait) {
#disclaimer {
font-size: 3.5vw;
line-height: 3.5vw;
}
}


input {
width: 40%;
height: 70px;
font-family: "CenturyGothic-Bold", Arial, Helvetica, sans-serif;
font-size: 2.5vh;
color: #E4585B;
border-radius: 50px; 
border-width: 0px;
padding-left: 2%;
margin-bottom: 1%;
margin-top: 1%;
}
@media screen and (orientation:portrait) {
input {
width: 78%;
height: 9.5%;
font-size: 5.5vw;
border-radius: 80px; 
border-width: 0px;
padding-left: 8%;
margin-bottom: 3%;
margin-top: 3%;
}
}


#final_form input {
width: 65%;
color: #000;
border-color: #DFDDD0;
border-style: solid;
border-width: 4px;
background-color: transparent;
padding-left: 4%;
margin-bottom: 0%;
margin-top: 0%;
}
@media screen and (orientation:portrait) {
#final_form input {
width: 75%;
height: 5%;
}
}


#birthday {
width: 12%;
}
@media screen and (orientation:portrait) {
#birthday {
width: 17%;
}
}


#final_form #birthday {
width: 15%;
}
@media screen and (orientation:portrait) {
#final_form #birthday {
width: 15%;
}
}


select {
height: 75px;
font-family: "CenturyGothic-Bold", Arial, Helvetica, sans-serif;
font-size: 2.5vh;
color: #E4585B;
margin-top: 1%;
border-radius: 50px; 
border-width: 0px;
padding-left: 2%;
margin-bottom: 1%;
-webkit-appearance:none;
background-color: #fff;
cursor: pointer;
}
@media screen and (orientation:portrait) {
select {
height: 11%;
font-size: 5.5vw;
border-radius: 80px; 
border-width: 0px;
padding-left: 8%;
margin-bottom: 3%;
margin-top: 3%;
}
}


#final_form select {
color: #000;
border-color: #DFDDD0;
border-style: solid;
border-width: 4px;
background-color: transparent;
}


#select_month {
width: 12%;
}
@media screen and (orientation:portrait) {
#select_month {
width: 28%;
}
}


#final_form #select_month {
height: 80px;
width: 20%;
}
@media screen and (orientation:portrait) {
#final_form #select_month {
height: 6.7%;
width: 27%;
}
}


#select_gender {
width: 40%;
}
@media screen and (orientation:portrait) {
#select_gender {
width: 88%;
}
}


.send {
width: 39% !important;
height: auto;
border-width: 0px !important;
padding: 0px !important;
margin-bottom: 10%;
cursor: pointer;
}
@media screen and (orientation:portrait) {
.send {
width: 85% !important;
height: auto;
margin-bottom: 3%;
-webkit-appearance: none;
}
}


#final_form_send {
width: 60% !important;
}
@media screen and (orientation:portrait) {
#final_form_send {
width: 88% !important;
height: auto !important;
}
}


#header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #CD1623;
text-align: center;
overflow: hidden;
}


#welcome_title {
position: absolute;
top: 4%;
left: 5%;
font-family: "CenturyGothic-Bold", Arial, Helvetica, sans-serif;
font-size: 4vh;
line-height: 6.2vh;
color: #fff;
text-align: left;
}
@media screen and (orientation:portrait) {
#welcome_title {
top: 2%;
left: 7%;
font-size: 6vw;
line-height: 9.5vw;
}
}


#welcome_title span {
font-family: "CenturyGothic", Arial, Helvetica, sans-serif;
font-size: 8.5vh;
letter-spacing: -0.2vh;
}
@media screen and (orientation:portrait) {
#welcome_title span {
font-size: 11vw;
letter-spacing: -0.2vw;
}
}


#welcome_instructions {
position: absolute;
top: 8%;
left: 0px;
width: 100%;
font-family: "CenturyGothic-Bold", Arial, Helvetica, sans-serif;
font-size: 3vh;
line-height: 3.5vh;
letter-spacing: -0.05vh;
color: #F5BFC2;
text-align: center;
}
@media screen and (orientation:portrait) {
#welcome_instructions {
top: 15%;
font-size: 4.4vw;
line-height: 4.9vw;
}
}


#open_letter {
position: absolute;
top: 0px;
right: 0px;
width: auto;
height: 17%;
border-radius: 0px;
margin: 0px;
cursor: pointer;
z-index: 2;
}
@media screen and (orientation:portrait) {
#open_letter {
width: 30%;
height: auto;
}
}


#categories {
position: absolute;
top: 20%;
left: 0px;
width: 100%;
height: 14%;
z-index: 2;
}
@media screen and (orientation:portrait) {
#categories {
top: 22%;
height: 17%;
}
}


.categories_in {
padding-left: 4%;
padding-right: 4%;
height: 100%;
overflow: auto;
overflow-y: hidden;
white-space: nowrap;
display: none;
}


.categories_in img {
display: inline-block;
text-align: center;
width: auto;
height: 85%;
cursor: pointer;
}


#catalog_container {
position: absolute;
top: 26%;
left: 0px;
width: 100%;
height: 74%;
background-color: #fff;
z-index: 1;
-webkit-overflow-scrolling:touch;
}
@media screen and (orientation:portrait) {
#catalog_container {
top: 30%;
height: 70%;
}
}


#catalog_iframe {
width: 100%;
height: 100%;
}


#letter_container {
position: absolute;
top: 20% !important;
left: 0px;
width: 100%;
height: 80% !important;
background-color: #fff;
z-index: 1;
-webkit-overflow-scrolling:touch;
}
@media screen and (orientation:portrait) {
#letter_container {
top: 20% !important;
height: 80% !important;
}
}


#products_in {
position: absolute;
top: 0px;
left: 10%;
width: 80%;
margin-top: 6%;
background-color: #fff;
text-align: center;
}
@media screen and (orientation:portrait) {
#products_in {
margin-top: 16%;
left: 5%;
width: 90%;
}
}


#products_in span {
font-family: "CenturyGothic", Arial, Helvetica, sans-serif;
font-size: 8.5vh;
color: #DB2126;
}
@media screen and (orientation:portrait) {
#products_in span {
font-size: 9vw;
}
}


#products_in img {
float: left;
width: 30%;
height: auto;
margin-right: 2%;
-webkit-transition: transform .2s;
-moz-transition: transform .2s;
-o-transition: transform .2s;
transition: transform .2s;
}
@media screen and (orientation:portrait) {
#products_in img {
width: 47%;
}
}


#products_in img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}


#letter_title {
position: absolute;
top: 5%;
left: 5%;
font-family: "CenturyGothic", Arial, Helvetica, sans-serif;
font-size: 6.3vh;
line-height: 5.3vh;
color: #fff;
text-align: left;
}
@media screen and (orientation:portrait) {
#letter_title {
top: 4%;
left: 7%;
font-size: 11vw;
line-height: 9vw;
}
}


#letter_title_back {
height: auto;
width: 32%;
padding: 0px;
}
@media screen and (orientation:portrait) {
#letter_title_back {
width: 65%;
margin-top: 1%;
}
}


#opened_letter {
position: absolute;
top: 0px;
right: 0px;
width: auto;
height: 17%;
z-index: 2;
}
@media screen and (orientation:portrait) {
#opened_letter {
width: 30%;
height: auto;
}
}


#letter_container {
position: absolute;
top: 26%;
left: 0px;
width: 100%;
height: 74%;
text-align: center;
background-color: #fff;
overflow-x: scroll;
-webkit-overflow-scrolling:touch;
z-index: 1;
}
@media screen and (orientation:portrait) {
#letter_container {
top: 30%;
height: 70%;
}
}


.letter {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 60%;
margin-left: auto;
margin-right: auto; 
background-color: #fff;
box-shadow: 2px 10px 15px #000;
background-image: url('../img/spaceline.png');
background-repeat: repeat-y;
background-size: 100% auto;
font-family: "CenturyGothic", Arial, Helvetica, sans-serif;
font-size: 2.8vh;
letter-spacing: -0.2vh;
line-height: 3.2vh;
color: #000;
padding: 30px;
padding-top: 260px;
text-align: left;
padding-bottom: 300px;
}
@media screen and (orientation:portrait) {
.letter {
width: 70%;
font-size: 4.5vw;
letter-spacing: -0.2vw;
line-height: 5vw;
background-image: url('../img/spaceline_mobile.png');
padding-top: 220px;
}
}


#letter_form {
height: 170%;
}
@media screen and (orientation:portrait) {
#letter_form {
height: 185%;
}
}


#stamp {
position: absolute;
top: 0px;
right: 0px;
width: 30%;
height: auto;
z-index: 1;
}
@media screen and (orientation:portrait) {
#stamp {
width: 65%;
height: auto;
}
}


#letter_intro {
position: absolute;
top: 35px;
left: 0px;
width: 100%;
text-align: center;
font-family: "CenturyGothic-Bold", Arial, Helvetica, sans-serif;
text-align: center;
font-size: 8.5vh;
line-height: 7.5vh;
color: #000;
z-index: 2;
}
@media screen and (orientation:portrait) {
#letter_intro {
top: 10%;
font-size: 15vw;
line-height: 15vw;
}
}


#letter_intro span {
font-family: "CenturyGothic", Arial, Helvetica, sans-serif;
font-size: 4.5vh;
line-height: 4.5vh;
}
@media screen and (orientation:portrait) {
#letter_intro span {
font-size: 6vw;
line-height: 6.5vw;
}
}


#form_intro {
width: 100%;
margin-top: 15%;
margin-bottom: 5%;
text-align: center;
font-family: "CenturyGothic", Arial, Helvetica, sans-serif;
text-align: center;
font-size: 5vh;
line-height: 4vh;
}
@media screen and (orientation:portrait) {
#form_intro {
width: 80%;
margin-left: 10%;
font-size: 7vw;
line-height: 6.5vw;
}
}


.simpleCart_items {
margin-top: 10%;
margin-bottom: 27%;
}
@media screen and (orientation:portrait) {
.simpleCart_items {
margin-top: 90%;
margin-bottom: 50%;
}
}


.itemRow {
margin-bottom: 19%;
}
@media screen and (orientation:portrait) {
.itemRow {
margin-bottom: 27%;
}
}


.item-thumb img {
position: absolute;
left: 13%;
width: 17%;
height: auto;
}
@media screen and (orientation:portrait) {
.item-thumb img {
left: 8%;
width: 22%;
max-width: 22%;
max-height: 10%;
}
}


.item-name {
margin-left: 33%;
font-size: 4.2vh;
line-height: 4.2vh;
width: 45%;
}
@media screen and (orientation:portrait) {
.item-name {
margin-left: 30%;
font-size: 5vw;
line-height: 4.5vw;
width: 54%;
}
}


.item-sku {
font-size: 0px;
}


.item-link img {
position: absolute;
margin-top: 100px;
left: 33%;
width: 20%;
}
@media screen and (orientation:portrait) {
.item-link img {
margin-top: 19%;
width: 40%;
}
}


.item-remove img {
position: absolute;
right: 13%;
width: 55px;
height: auto;
}
@media screen and (orientation:portrait) {
.item-remove img {
margin-top: -6%;
right: 8%;
width: 11%;
}
}


#ready {
margin-bottom: 4%;
margin-left: 31%;
width: 38%;
height: auto;
}
@media screen and (orientation:portrait) {
#ready {
margin-bottom: 10%;
margin-left: 0px;
width: 100%;
}
}


#congratulations {
position: absolute;
top: 5%;
left: 0px;
width: 100%;
font-family: "CenturyGothic", Arial, Helvetica, sans-serif;
font-size: 5vh;
line-height: 5vh;
color: #fff;
text-align: center;
}
@media screen and (orientation:portrait) {
#congratulations {
top: 4%;
font-size: 8vw;
line-height: 8vw;
}
}


#congratulations span {
font-family: "CenturyGothic-Bold", Arial, Helvetica, sans-serif;
}


#participating  {
font-family: "CenturyGothic", Arial, Helvetica, sans-serif !important;
font-size: 3vh;
line-height: 3vh;
}
@media screen and (orientation:portrait) {
#participating  {
font-size: 4.5vw;
line-height: 4.5vw;
}
}


#envelope {
position: absolute;
top: 25%;
left: -31%;
width: 31%;
height: auto;
cursor: pointer;
display: block;
}
@media screen and (orientation:portrait) {
#envelope {
display: none;
}
}


#envelope_mobile {
display: none;
}
@media screen and (orientation:portrait) {
#envelope_mobile {
position: absolute;
top: 26%;
left: -100%;
width: 100%;
height: auto;
display: block;
z-index: 1;
}
}


#jojojo {
position: absolute;
top: 15%;
right: -20%;
width: 20%;
height: auto;
display: block;
}
@media screen and (orientation:portrait) {
#jojojo {
display: none;
}
}


#jojojo_mobile {
display: none;
}
@media screen and (orientation:portrait) {
#jojojo_mobile {
position: absolute;
top: 21%;
right: -43%;
width: 43%;
height: auto;
display: block;
z-index: 2;
}
}


#validity {
position: absolute;
top: 76%;
left: 25%;
width: 50%;
font-family: "CenturyGothic", Arial, Helvetica, sans-serif;
font-size: 1.5vh;
line-height: 1.5vh;
color: #fff;
text-align: center;
z-index: 3;
}
@media screen and (orientation:portrait) {
#validity {
top: 70%;
left: 5%;
width: 90%;
}
}


#gotostore {
position: absolute;
top: 69%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: auto;
height: 6%;
cursor: pointer;
z-index: 3;
}
@media screen and (orientation:portrait) {
#gotostore {
top: 63%;
max-height: 6%;
max-width: 85%;
}
}


#share_2 {
position: absolute;
bottom: 4%;
left: 35%;
width: 30%;
height: 15%;
font-family: "CenturyGothic-Bold", Arial, Helvetica, sans-serif;
font-size: 2.5vh;
line-height: 2.5vh;
color: #fff;
}
@media screen and (orientation:portrait) {
#share_2 {
left: 20%;
width: 60%;
height: 18%;
font-size: 4.5vw;
line-height: 4.5vw;
}
}


#share_2 img {
width: 13%;
height: auto;
margin-top: 2%;
cursor: pointer;
}
@media screen and (orientation:portrait) {
#share_2 img {
width: 27%;
margin-top: 5%;
}
}


#share {
position: absolute;
bottom: 3%;
left: 40%;
width: 20%;
height: 15%;
font-family: "CenturyGothic-Bold", Arial, Helvetica, sans-serif;
font-size: 2.5vh;
line-height: 2.5vh;
color: #fff;
}
@media screen and (orientation:portrait) {
#share {
left: 32%;
width: 35%;
height: 18%;
font-size: 4.5vw;
line-height: 4.5vw;
}
}


#share img {
width: 18%;
height: auto;
margin-top: 3%;
cursor: pointer;
}
@media screen and (orientation:portrait) {
#share img {
width: 37%;
margin-top: 5%;
}
}


#spacer {
position: absolute;
bottom: 3%;
left: 50%;
width: 2px;
height: 15%;
background-color: #fff;
}
@media screen and (orientation:portrait) {
#spacer {
height: 18%;
}
}


#download {
position: absolute;
bottom: 3%;
right: 28%;
width: 20%;
height: 15%;
font-family: "CenturyGothic-Bold", Arial, Helvetica, sans-serif;
font-size: 2.5vh;
line-height: 2.5vh;
color: #fff;
}
@media screen and (orientation:portrait) {
#download {
right: 10%;
width: 35%;
height: 18%;
font-size: 4.5vw;
line-height: 4.5vw;
}
}


#generate_pdf {
width: 18%;
height: 80px;
margin-top: 3%;
border-width: 0px;
background-image: url('../img/download_out.png');
background-repeat: no-repeat;
background-size: 100% auto;
background-color: transparent;
border-radius: 0px;
margin-top: 3%;
cursor: pointer;
}
@media screen and (orientation:portrait) {
#generate_pdf {
width: 37%;
margin-top: 5%;
-webkit-appearance: none;
}
}


#generate_pdf:hover {
background-image: url('../img/download_over.png');
}


#popup {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 5;
text-align: center;
display: none;
}


#message {
position: absolute;
top: 35%;
left: 37%;
width: 24%;
padding: 1.5%;
padding-bottom: 6%;
background-color: #fff;
border-width: 3px;
border-style: solid;
border-color: #DB2126;
border-radius: 40px;
font-family: "CenturyGothic-Bold", Arial, Helvetica, sans-serif;
font-size: 3.5vh;
line-height: 3.5vh;
color: #DB2126;
text-align: center;
}
@media screen and (orientation:portrait) {
#message {
left: 16%;
width: 60%;
padding: 4%;
padding-bottom: 19%;
font-size: 5vw;
line-height: 5.5vw;
}
}


#close {
position: absolute;
bottom: -30%;
left: 35%;
width: 30%;
height: auto;
cursor: pointer;
}
@media screen and (orientation:portrait) {
#close {
left: 32%;
width: 36%;
}
}


#instructions {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 5;
text-align: center;
display: block;
}
@media screen and (orientation:portrait) {
#instructions {
display: none;
}
}


#instructions_mobile {
display: none;
}
@media screen and (orientation:portrait) {
#instructions_mobile {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 5;
text-align: center;
display: block;
}
}


.step {
position: absolute;
width: auto;
height: 26%;
}
@media screen and (orientation:portrait) {
.step {
width: 55%;
height: auto;
}
}


#close_instructions {
position: absolute;
bottom: 8%;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
width: auto;
height: 12%;
cursor: pointer;
}


#close_instructions_mobile {
position: absolute;
bottom: 5%;
left: 40%;
width: 20%;
height: auto;
cursor: pointer;
}


#step01 {
top: 3%;
right: 4%;
}


#step01_mobile {
top: 3%;
right: 7%;
}


#step02 {
top: 7%;
left: 12%;
}


#step02_mobile {
top: 11%;
left: 6%;
}


#step03 {
top: 38%;
left: 12%;
}


#step03_mobile {
top: 40%;
left: 6%;
}