html, body{
	background:#101415;
	position:relative;
	width:100vw;
	height:100vh;
	overflow:hidden;
	text-align:center;
	margin:0px auto;
	padding:0px;
}
body{background:url(../img/bg.webp) no-repeat center center scroll transparent;background-size:cover;font-family:bxFont;}
main{padding:30px 0px 20px;overflow:auto;height:100%;box-sizing:border-box;}
main:before,#premio:before{
  /*url(../img/confetti.webp)*/
  background:none no-repeat center center scroll transparent; background-size:cover;
  content:"";
  opacity:0;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:5;
}
hr{border-color:transparent;display:inline-block;width:100%;}
.mainBody{opacity:0;}
.mainBody.iniciado{opacity:1;}
#premio:before{background-image:url(../img/confetti-2.webp);filter:sepia(80%);}
.zi{position:relative;z-index:100;}
*{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
@font-face {
    font-family: 'bxFont';
    src: url('../fonts/f.eot');
    src: url('../fonts/f.eot?#iefix') format('embedded-opentype'),
         url('../fonts/f.woff2') format('woff2'),
         url('../fonts/f.woff') format('woff'),
         url('../fonts/f.ttf') format('truetype'),
         url('../fonts/f.svg#goboldregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
img{max-width:100%;max-height:100%;}
.img{height:150px;max-height:30vh;max-width:50vw;}
.play{cursor:pointer;}
#btns {
  display:none;
  position: fixed;
  flex-flow: column;
  left: 0px;
  top: 50%;
  padding:10px;
  transform: translate(0%, -50%);
  z-index: 99999;
}
.btn{
  background: #fff;
  cursor: pointer;
  margin: 4px auto;
  font-size: medium;
  font-style: italic;
  text-transform: uppercase;
  padding: 5px 30px;
  position: relative;
  font-family: bxFont;
  font-weight: 100;
  z-index: 100;
}
.btn.secondary{background:#953232;color:#FFF;font-size:medium;}
.btn.alternative{background:#bbff01;color:#000;font-size:medium;}
.maxw{display:inline-block;width:400px;max-width:90vw;margin:0px auto;}
.tcenter{text-align:center;}
.tleft{text-align:left;}
.fr{float:right;}
.fl{float:left;}
#r{position:relative;transform:rotate(-20deg);z-index:10;}
.ruleta{position:relative;margin:50px auto 20px;z-index:1;overflow:hidden;}
.ruleta .logo{background:#1d1b1a;position:absolute;height:80px;top:calc(50% - 8px);left:50%;transform:translate(-50%, -50%);}
.ruleta .flecha{position:absolute;height:150px;bottom:50%;left:50%;transform:translate(-45%, 5%);z-index:9999;}
.logo-header{max-width:40vh;margin-top:20px;}
.logo-footer{width:auto;height:80px;margin:30px auto 0px;}
#premio{
  display: none;
  position: absolute;
  top: calc(50% - 3px);
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%) rotate(-10deg);
  height: 70%;
  width: 100%;
  z-index: 9999;
}
#premio .content{position:relative;top:50%;left:50%;transform:translate(-50%,-50%);max-width:80%;}
#premio .content *{margin:0px auto;padding:0px;color:#FFF;}
#premio .content #nombre{font-size:xxx-large;display:none;}
#premio .content #descripcion{display:none;}
#premio #imagen {
  height:auto;
  width:auto;
  margin:0px auto;
  max-height:none;
  max-width:80vw;
  position:relative;
  transform:translate(-50%, 0%) rotate(10deg);
  object-fit: contain;
  left: 50%;
  top: 50%;
}
main.completado:before{opacity:0.3;}
main.completado #r,main.completado .flecha{opacity:0;}
main.completado #premio:before{opacity:1;}
main.completado #premio{display:block;}
main.completado .ruleta{margin:30px auto 10px;}
.titulo, .subtitulo{
  font-size: 60px;
  background: #FFF;
  line-height: 40px;
  padding: 0px 30px 10px;
  display: inline-block;
  transform: rotate(-10deg);
  margin: 20px auto 0px;
  vertical-align: top;
  width: max-content;
}
.subtitulo{
  background: #C6C6C6;
  margin: 5px auto 0px;
  padding: 0px 30px 15px;
  display: block;
  line-height: 25px;
}
#home{
  position: fixed;
  z-index: 999;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#home .cover{
  position: absolute;
  width: 100%;
  left: 0px;
  height: 35vh;
  object-fit: cover;
  object-position: top center;
}
.vcenter{
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999
}