html, body {height: 100%;}
body {background: url(../img/bg.jpg) center no-repeat; background-size: cover; font-family: "Open Sans", sans-serif;}
.h100 {height: 100%;}
.desktop {display: block !important;}
.mobile {display: none !important;}
.l {float: left;}
.r {float: right;}
/* --------------------------------------------------
Contenedor general - Da el ancho del contenido
-------------------------------------------------- */
.cont-general{ position: relative; left: 0; right: 0; margin: auto; max-width: 800px;}
section{position: relative;}
.clear {clear: both;}
.mobilephone {position: fixed; bottom: 0; left: -1020px; right: 0; margin: auto; width: 310px; z-index: 99999;}
.santa {position: fixed; bottom: 0; right: -890px; left: 0; margin: auto; width: 578px;}
/* --------------------------------------------------
Header
-------------------------------------------------- */
header {background: #FFF; padding: 20px;}
header .logo {width: 180px; margin: auto;}
/* --------------------------------------------------
Fin Header
-------------------------------------------------- */
/* --------------------------------------------------
Section - Main
-------------------------------------------------- */
section.main {background: #F60; padding: 30px 50px; z-index: 9999;}
section.main p {font-size: 234.6%;}
section.main p span {font-weight: 700;}
section.main .bonus {font-size: 385%; font-weight: 700; line-height: 1.2;}
section.main .bonus span {color: #ccc;}
section.main .bonus span sup {font-size: 50%;}
section.main hr {border: 0; background: #fff; height: 1px; width: 0; margin: 25px auto; animation: growline .6s .2s forwards; -webkit-animation: growline .6s .2s forwards; -moz-animation: growline .6s .2s forwards;}
section.main .conheca {width: 335px; font-size: 184.6%; padding-top: 15px;}
section.main .prize {display: block; width: 350px; margin: auto; height: 80px; background: #fff; border: 2px solid #fff; color: #F60; text-align: center; font-weight: 700; font-size: 169.2%; line-height: 75px; -webkit-border-radius: 5px; border-radius: 5px; position: relative; overflow: hidden; z-index: 0; box-shadow: 0px 0px 16px 1px #fff; animation: pulse 4s 2s infinite; -webkit-animation: pulse 4s 2s infinite; -moz-animation: pulse 4s 2s infinite;
-webkit-transition: .3s;
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
transition: .3s;}
section.main .prize:hover {color: #FFF; border-color: #fff; box-shadow: 0px 0px 18px 5px #fff; animation: none; -webkit-animation: none; -moz-animation: none;}
section.main .prize:before {content: " "; display: block; position: absolute; left: -350px; top: 0; width: 100%; height: 100%; background: #F60; z-index: -1;
-webkit-transition: .3s;
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
transition: .3s;}
section.main .prize:hover:before {left: 0;}
section.main .login {text-align: center; font-size: 90%; margin-top: 15px;}
section.main .login a {text-decoration: underline;}
section.main .moreinfo {text-align: center; margin-top: 45px;}
section.main .moreinfo li {display: inline-block; vertical-align: middle;}
section.main .moreinfo li p {font-size: 108%;}
section.main .moreinfo .casinoonline {font-size: 90%;}
/* Animations */
.appearup {opacity: 0; position: relative; top: 40px; animation: appearup .7s .8s forwards; -webkit-animation: appearup .7s .8s forwards; -moz-animation: appearup .7s .8s forwards;}
.appeardown {opacity: 0; position: relative; bottom: 40px; animation: appeardown .7s .8s forwards; -webkit-animation: appeardown .7s .8s forwards; -moz-animation: appeardown .7s .8s forwards;}
.appear {opacity: 0; position: relative; animation: appear .7s 1.1s forwards; -webkit-animation: appear .7s 1.1s forwards; -moz-animation: appear .7s 1.1s forwards;}
.appear:nth-child(2) {animation-delay: 1.3s; -webkit-animation-delay: 1.3s; -moz-animation-delay: 1.3s;}
.appear:nth-child(3) {animation-delay: 1.5s; -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s;}
@keyframes growline {
from {width: 0;}
to {width: 100%;}
}
@-webkit-keyframes growline {
from {width: 0;}
to {width: 100%;}
}
@-moz-keyframes growline {
from {width: 0;}
to {width: 100%;}
}
@keyframes appearup {
from {opacity: 0; top: 40px;}
to {opacity: 1; top: 0;}
}
@-webkit-keyframes appearup {
from {opacity: 0; top: 40px;}
to {opacity: 1; top: 0;}
}
@-moz-keyframes appearup {
from {opacity: 0; top: 40px;}
to {opacity: 1; top: 0;}
}
@keyframes appeardown {
from {opacity: 0; bottom: 40px;}
to {opacity: 1; bottom: 0;}
}
@-webkit-keyframes appeardown {
from {opacity: 0; bottom: 40px;}
to {opacity: 1; bottom: 0;}
}
@-moz-keyframes appeardown {
from {opacity: 0; bottom: 40px;}
to {opacity: 1; bottom: 0;}
}
@keyframes appear {
from {opacity: 0;}
to {opacity: 1;}
}
@-webkit-keyframes appear {
from {opacity: 0;}
to {opacity: 1;}
}
@-moz-keyframes appear {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes pulse {
from {-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
box-shadow: 0px 0px 16px 1px #fff;}
10% {-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
box-shadow: 0px 0px 18px 3px #fff;}
20% {-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
box-shadow: 0px 0px 16px 1px #fff;}
}
@-webkit-keyframes pulse {
from {-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
box-shadow: 0px 0px 16px 1px #fff;}
10% {-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
box-shadow: 0px 0px 18px 3px #fff;}
20% {-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
box-shadow: 0px 0px 16px 1px #fff;}
}
@-moz-keyframes pulse {
from {-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
box-shadow: 0px 0px 16px 1px #fff;}
10% {-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
box-shadow: 0px 0px 18px 3px #fff;}
20% {-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
box-shadow: 0px 0px 16px 1px #fff;}
}
/* --------------------------------------------------
Fin Section - Main
-------------------------------------------------- */
/* MEDIA QUERIES */
@media (min-width: 900px) and (max-height: 690px) {
html, body {height: auto;}
.container {position: relative; top: 0; margin: 0;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);}
}
@media (max-width: 900px) {
.desktop {display: none !important;}
.mobile {display: block !important;}
html, body {height: auto;}
.cont-general {max-width: 90%;}
.container {position: relative; top: 0; margin: 30px 0;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);}
.woman {display: none;}
header {height: auto; padding: 10px;}
header .logo {float: none; text-align: center;}
header h3 {float: none !important; line-height: normal; text-align: center; font-size: 130%; margin-top: 20px;}
section.main {padding: 20px;}
section.main p {font-size: 200%;}
section.main .bonus {font-size: 320%;}
section.main .conheca {width: auto; padding: 0; font-size: 150%;}
section.main .prize {width: 100%; margin-top: 30px; height: 75px; font-size: 130%; line-height: 75px;}
section.main .prize:before {display: none;}
}
@media (max-width: 500px) {
section.main .moreinfo li {display: block; margin-right: 0; margin-bottom: 30px;}
section.main .moreinfo li:last-child {margin-bottom: 0;}
section.main .moreinfo li p {font-size: 100%; margin-left: 0; display: block;}
}