html,
body {
	margin: 0 auto;
	overflow-x: hidden;
	width: 100%;
	height: 100%;
	max-width:640px;
	margin-top: 0px;
	font-family: 'Roboto';
	font-size:18px;
	font-weight:400;
	color:#221F1F;
	background-color: #ffffff;
	text-align: left;
}
html {background-color:#F6F8F9;}
#app
{
	width:100%;
	float: left;
	position:relative;
}

img {display: block; width:100%; object-fit: cover;position: relative;}
section {width:100%; position:relative; float:left; min-height:310px;}
.hidden {display: none;}

p {font-size:14px; font-weight:400; width: 100%; text-align: left; color:#333333; position: relative; float: left; line-height: 20px; margin-top: 10px;}
a, a:hover, a:visited, a:focus {color:#0066FF; text-decoration: none; font-size:14px;}

.text-center {text-align: center;}
.mt-0 {margin-top:0 !important;}
.mt-10 {margin-top:10px !important;}
.mt-15 {margin-top:15px !important;}
.mt-20 {margin-top:20px !important;}

h2
{
	color:#01466f;
	font-size:26px;
	font-weight: 500;
	font-family: 'Roboto Condensed';
	margin-bottom: 0;
}

header {width:100%; position: relative; float: left;}

.logo
{
	width:100%;
	float: left;
	position:relative;
}

.logo img {max-width:88px; margin-left:20px; margin-top:20px;}

.container
{
	width: 92%;
	max-width:640px;
	position: relative;
	margin:0 auto;
	margin-top:20px;
}

.container p {margin-bottom:0;}
header .container
{
	width:100%;
	float: left;
	position:relative;
	background-color:#C8141E;
	padding-bottom: 10px;
	margin-top: 10px;
}

.game header .container {height: 300px; padding: 20px 0;}

/* .game header .container::after
{
	content: '';
    border-bottom: 5px solid #00476f;
    width: 150px;
    height: 0px;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
} */

header .container h1
{
	color:#ffffff;
	font-size:30px;
	font-weight: 500;
	margin:0;
	width:320px;
	padding: 10px 0 0 30px;

}
header .container p {color:#ffffff; width:320px; padding-left:30px;}

.img_area, .btn_area
{
	width:100%;
	position: relative;
	float:left;
	margin-top: 10px;
}
/* .btn_area {margin-top:0;} */
.img_area img {max-width:300px; margin:0 auto;}

.btn
{
	position: relative;
    display: inline-block;
    font-size:18px;
	font-weight:700;
	background-color: #c8141f;
    border-radius: 5px;
    border: 2px solid #c8141f;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
	/* transition: all .3s ease-in-out; */
	/* margin: 10px 0 0 0; */
	height:47px;
	width:290px;
	left: 50%;
    transform: translateX(-50%);
}
.btn:hover {background-color: #DD2C3E;border: 2px solid #DD2C3E;}


.btn a, .btn a:hover, .btn a:visited, .btn a:focus {
	font-size:18px; 
	color: #ffffff; 
	position: relative; 
	margin: 10px; 
	text-decoration: none;
	line-height: 47px;
}

.btn.disabled
{
	background-color: #a6a6a6;
	border-color:#a6a6a6;
	/* pointer-events: none; */
}

.social_area
{
	width:290px;
	float: left;
	position: relative;
	background-color:#edeef3;
	padding:10px;
	margin-top:40px;
	left: 50%;
    transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
}

.social_title
{
	width:160px;
	position: relative;
	float: left;
	font-size: 22px;
	font-weight:700;
	color:#00476F;
	font-family: 'Roboto Condensed';
	line-height: 34px;
}

.social_btn
{
	width:130px;
	position: relative;
	float: left;
}

.social_item
{
	width:35px;
	position: relative;
	float: left;
	margin-right: 10px;
}
.social_item:last-child {margin-right:0px;}

.social_item img {width:30px; margin:0 auto;border-radius: 7px;}

footer{
	width:100%;
	max-width: 640px;
	position: relative;
	float: left;
	z-index: 999999;
    line-height: 30px;
}

footer .container{
	border-top: 1px solid #dedede;
    padding-top: 25px;
}

.telefonica
{
	float:left;
	position: relative;
	width:100%;
}

.telefonica img {width:143px; float:left;}

footer p {color:#00476F; margin-top:10px;}

p.error
{
	text-align: center;
	font-size:13px;
	color:#c8141f;
}
.wheel
  {
	width: 300px;
    height: 300px;
    position: relative;
	margin: 0 auto;  
  }

  /* .wheel img {border: 3px solid #fff; border-radius: 100%;} */

  .wheel.spin
  {
	/* animation: rotation 1s 2 linear; */
	animation-name: rotation, rotation;
    animation-delay: 0s, 2s;
    animation-duration: 1s, 2s;
    /*animation-fill-mode: forwards;*/
    animation-timing-function: linear, ease-out;
    animation-iteration-count: 2, 1;
  }
  @keyframes rotation {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(360deg);
	}
  }

  #wheel{
	-webkit-transition: all;
	-moz-transition:    all;
	-o-transition:      all;
	-ms-transition:     all;
	transition:         all;
	transition-timing-function: linear;
	transition-delay: 0s;
	transition-duration: 4s;
}

.animation_end {
	-webkit-transition: all;
	-o-transition:      all;
	-ms-transition:     all;
	-moz-transition:    all;
	transition:         all;
	transition-timing-function: ease-out !important;
	transition-delay: 0s !important;
	transition-duration: 1.5s !important;
}

  #spin{
	width: 90px;
    height: 90px;
    position: absolute;
    top: 50%;
    left: 50%;
	border-radius:50%;
	box-shadow:rgba(0,0,0,0.1) 0px 3px 0px;
	z-index:1000;
	background:#cc1613;
	border: 5px solid #000000;
	border-radius: 100%;
	cursor:pointer;
	transform: translate(-50%, -50%);
  -webkit-user-select: none; 
  -moz-user-select: none;    
  -ms-user-select: none;     
  -o-user-select: none;
  user-select: none;   
}


#spin:after{
	content:"LOS";	
	text-align:center;
	line-height:90px;
	color:#fff;
	/* text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0,0,0,0.3) ; */
	position: relative;
	z-index: 100000;
	width: 90px;
    height: 90px;
    display: block;
    font-size: 20px;
    font-weight: 700;
}

#spin:active:after{
	font-size:13px;	
}

#spin:before {
	content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 20px 10px;
    border-color: transparent transparent #000000 transparent;
    top: -19px;
    left: 34px;
}

.game header .container
{
	background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 32%, rgba(0,69,112,1) 100%);
/* background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,69,112,1) 100%); */
/* background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,69,112,0.8715861344537815) 100%); */
border:5px solid #c90c0f;
width:98%;
}
.checkbox_block_txt {
    display: table;
}

.check_row {margin:30px 0;}
.checkbox_block
{
	display: table-cell;
	vertical-align: top;
	width:10%;
}
.checkbox_block_txt .check
{
	width:32px;
	height:32px;
	border:2px solid #000000;
	background-color:transparent;
	border-radius: 10px;
	position: absolute;
	left:0;
	cursor:pointer;
}
.checkbox_block_txt .check svg{
	width:20px;
	height:14px;
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%); 
	-moz-transform:translate(-50%, -50%); 
	-o-transform:translate(-50%, -50%);
}
.checkbox_block_txt .check.clicked svg line {stroke:#00476f;transition: fill .2s ease-in-out;}
.check_txt
{
	display: table-cell;
	vertical-align: top;
	width:90%;
}
.check_txt p {margin-top:0;}


/*
=====================
====MEDIA SCREENS====
=====================
*/
@media screen and (max-width:480px)
{
	.checkbox_block {width: 15%;}
	.check_txt {width: 85%;}
}

@media screen and (max-width:360px)
{
	.social_area {width:220px;}
	.social_title {width: 145px;}
	.btn {width: 220px;}
	header .container h1 {font-size:26px;}
}

@media screen and (max-width:320px)
{
	.game header .container {height: 250px;}
	.wheel {width: 250px; height: 250px;}
	#spin {
		width: 70px;
		height: 70px;
		position: absolute;
		top: 51%;
		left: 51%;
	}
	#spin:after 
	{
		width: 70px;
		height: 70px;
		line-height:70px;
		font-size:18px;
	}

	.checkbox_block {width: 18%;}
	.check_txt {width: 82%;}
}