@import url('https://fonts.googleapis.com/css?family=Raleway:300,500,700');
*{
	box-sizing: border-box;
}

.juego_cara_a_cara {
	margin: 40px 0px;
	padding: 0;
	font-family: 'Raleway', sans-serif;
}
.juego_cara_a_cara h2{
	font-size: 1.8em;
    color: #677893;
    font-family: 'Raleway', sans-serif !important;
    line-height: normal;
    text-transform: inherit;
    letter-spacing: normal;
	display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

.juego_cara_a_cara p{
	font-family: 'Raleway', sans-serif !important;
	display: block;
	color: #27303F;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
	font-weight: 500;
	font-size: 18px;
}

.juego_cara_a_cara .step{
	color: #27303F;
	position: relative;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.juego_cara_a_cara .screen{
	position: relative;
	width: 100%;
	padding: 8px 0 0 8px;
}

.juego_cara_a_cara .show.options{
	display: flex;
}
.juego_cara_a_cara .show.step{
	display: block;
}
.juego_cara_a_cara .hidden{
	display: none!important;
}
.juego_cara_a_cara #hero,#clon,#assets{
	width: 250px;
	height: 350px;
	display: inline-block;
	position: relative;
}
.juego_cara_a_cara #assets{
	width: 400px;
}
.juego_cara_a_cara .step_assets #assets{
	height: auto;
}
.juego_cara_a_cara .row{
	display: block;
}
.juego_cara_a_cara #gender{
	width: 400px;
}
.juego_cara_a_cara #time{
	width: 250px;
}
.juego_cara_a_cara .box.top{
	display: inline-block;
	position: relative;
	margin-bottom: 15px;
	height: 60px;
}
.juego_cara_a_cara .box.top .inn{
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 60px;
}

.juego_cara_a_cara .element{
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-size: cover;
	background-position: 50% 100%;
	background-repeat: no-repeat!important;
}
.juego_cara_a_cara .box{
	margin: 0 5px;
	border-radius: 10px;
	overflow: hidden;
	background: #dfdfdf;
	-webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.53);
-moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.53);
box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.53);
}
.juego_cara_a_cara #assets .tabs{
	height: 75px;
	background: grey;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.juego_cara_a_cara .tabs a.btn{
	cursor: pointer;
	display: block;
	width: 100%;
	height: 100%;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	color: white;
	font-size: .8em;
	text-align: center;
	line-height: 75px;
	padding: 0;
}

.juego_cara_a_cara .tabs a.active{
	background-color: #425065;
}
.juego_cara_a_cara .options{
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-around;
	padding: 5px;
	display: none;
}
.juego_cara_a_cara .options a{
	width: 183px;
	height: 78px;
	background: #F5A98C;
	border-radius: 8px;
	margin: 5px;
	text-indent: -9999em;
	background-size: 80%!important;
	background-position: 50% 50%!important;
	background-repeat: no-repeat!important;
	overflow: hidden;
}

.juego_cara_a_cara #hair.options a,#nose.options a{
	background-size: contain!important;
}
.juego_cara_a_cara #back.options a{
	background-size: cover!important;
}
.juego_cara_a_cara .box .element.back{
	background-size: cover!important;
}

.juego_cara_a_cara .btn{
	background: #677893;
	color: #ffffff;
	display: inline-block;
	padding: .5em 1em;
	border-radius: 4px;
	text-transform: uppercase;
	cursor: pointer;
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
}
.juego_cara_a_cara .btn:hover{
	background: #7587a3;
}
.juego_cara_a_cara #win.btn{
	background: orange;
}
.juego_cara_a_cara .box.off:before{
	content: '';
	display: block;
	position: absolute;
	background: rgba(255,255,255,.85);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}
.juego_cara_a_cara .off{
	box-shadow: none!important
}
.juego_cara_a_cara a.boolean{
	display: block;
	width: 40px;
	height: 20px;
	cursor: pointer;
}
.juego_cara_a_cara .bar{
	display: block;
	width: 40px;
	height: 20px;
	background: grey;
	border-radius: 10px;
	position: relative;
	-webkit-box-shadow: inset 0px 5px 0px 0px rgba(0,0,0,0.21);
-moz-box-shadow: inset 0px 5px 0px 0px rgba(0,0,0,0.21);
box-shadow: inset 0px 5px 0px 0px rgba(0,0,0,0.21);
}
.juego_cara_a_cara .bar span{
	position: absolute;
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 10px;
	top: 2px;
	transition: all 0.5s ease;
	background: rgba(255,255,255,.8);
}
.juego_cara_a_cara .el .bar span{
	right: 3px;
}
.juego_cara_a_cara .ella .bar span{
	left: 3px;
}

.juego_cara_a_cara #ella img{
	width: 40% !important;
    vertical-align: middle;
}

.juego_cara_a_cara #el img{
	width: 40% !important;
    vertical-align: middle;
}

.juego_cara_a_cara .content{
	margin-top: 0px !important;
    background-color: #f6f6f6 !important;
	position: initial;
}

.juego_cara_a_cara #msg .content{
    background-color: transparent !important;
}

.juego_cara_a_cara #el,#ella{
	opacity: 1;
}
#el.off,#ella.off{
	opacity: .5;
}
.juego_cara_a_cara #msg{
	font-weight: 500;
	position: absolute;
	top: 45%;
	width: 600px;
	left: 50%;
	margin-left: -300px;
	text-align: center;
	z-index: 100;
	font-size: 1.2em;
	line-height: 1.4em;
	padding: 0 2em;
}
.juego_cara_a_cara #msg .btn{
	margin-top: 1em;
}

img#tiempo{
	width: 15%;
}

/* TIEMPO */
.juego_cara_a_cara .time{
	background: grey;
	height: 30px;
	width: 160px;
	border-radius: 30px;
	overflow: hidden;
	position: relative;
	display: inline-block;
	margin-left: -20px;
	-webkit-box-shadow: inset 0px 5px 0px 0px rgba(0,0,0,0.21);
-moz-box-shadow: inset 0px 5px 0px 0px rgba(0,0,0,0.21);
box-shadow: inset 0px 5px 0px 0px rgba(0,0,0,0.21);
}
.juego_cara_a_cara .time .bartime{
	position: absolute;
	top: 0;
	left: 0;
	background: orange;
	height: 30px;
	display: inline-block;
	width: 100%;
	-webkit-box-shadow: inset 0px -10px 0px 0px rgba(0,0,0,0.10);
-moz-box-shadow: inset 0px -10px 0px 0px rgba(0,0,0,0.10);
box-shadow: inset 0px -10px 0px 0px rgba(0,0,0,0.10);
transition: all .5s ease;
}

.juego_cara_a_cara .step{
	display: none;
}

.juego_cara_a_cara p.titulo{
	font-weight: 300;
	font-size: 24px;
}
.juego_cara_a_cara .step p span{
	display: inline-block;
	width: 30px;
	height: 30px;
	background-color: #27303F;
	color: #ffffff;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	border-radius: 50%;
	margin: 0 10px 0 0;
}
.juego_cara_a_cara #tutorial .box.off:before{
	background: rgba(255,255,255,.45);
}
@media all and (max-height: 480px) and (max-width: 667px){
	.screen{
		height: 100vh;
		width: 100vw;
		margin: 0;
		padding: 0;
	}
	#hero,#clon,#assets{
		width: 25vw;
		height: calc(100vh - 90px);
	}


	#assets {
		width: 42vw;
	}
	#assets .tabs {
    	height: 55px;
    }
    .tabs a.btn{
    	line-height: 55px;
    }
	#gender{
		width: 34vw;
	}
	#gender a{
		position: relative;
	}
	#gender img, #time img{
		height: 30px;
	}
	#time{
		width: 29vw;
	}
	.bar,a.boolean{
		width: 35px;
	}
	.time{
		width: 20vw;
	}
	.box.top {
		margin-bottom: 10px;
	}
	#assets .tabs{
		font-size: 12px;
	}
	.options a {
	    width: 45%;
	    height: 60px;
	}
	#msg{
		top: 35%;
	}
	#msg .btn {
    	margin-top: .2em;
	}
	#assets .content{
		height: calc(100vh - 150px);
		overflow: hidden;
		overflow-y: auto;
	}
	#tutorial #assets .content{
		height: auto;
	}
	#check{
		margin: 5px;
    	border-radius: 5px;
	}
}