.roles{
	background-image: url('../img/btn_roles.png');
	background-repeat:no-repeat;
	position: absolute;
	top: 132px;
	left: 120px;
	width: 280px;
	height:65px;
	cursor: pointer;
}
.roles:hover{
	opacity: 0.85;
}
.rolesactivo{
	background-image: url('../img/btn_rolessobre.png');
}

.activ{
	background-image: url('../img/btn_activ.png');
	background-repeat:no-repeat;
	position: absolute;
	top: 132px;
	right: 120px;
	width: 280px;
	height:65px;
	cursor: pointer;
}
.activ:hover{
	opacity: 0.85;
}
.activactivo{
	background-image: url('../img/btn_activsobre.png');
}

.nino{
	position: absolute;
	bottom: 57px;
	right: 32px;
	opacity: 0;	
}

#btnRolcom{
	position:absolute;
	width: 402px;
	height: 73px;
	top: 200px;
	left: 481px;
}
#btnRolcom:hover{
	background: rgba(255,255,0,0.2);
}

#btnCarac{
	position:absolute;
	width: 402px;
	height: 73px;
	top: 343px;
    left: 68px;
}
#btnCarac:hover{
	background: rgba(255,255,0,0.2);
}

#btnCompor{
	position:absolute;
	width: 402px;
	height: 73px;
	top: 343px;
    left: 893px;
}
#btnCompor:hover{
	background: rgba(255,255,0,0.2);
}

.ladoA{
	position: absolute;
	bottom: 252px;
	left: 144px;
	cursor: pointer;
}

.ladoB{
	position: absolute;
	bottom: 252px;
	right: 144px;
	cursor: pointer;
}

.reiniciar{
	position: absolute;
	bottom: 220px;
	left: 232px;
	cursor: pointer;
}

.reiniciar2{
	position: absolute;
	bottom: 220px;
	right: 232px;
	cursor: pointer;
}

.reiniciar3{
	position: absolute;
	top: 220px;
	right: 655px;
	cursor: pointer;
}

#tituloCarac{
	position:absolute;
	width: 402px;
	height: 73px;
	top: 137px;
	left: 484px;
	cursor: pointer;
}

#tituloComp{
	position:absolute;
	width: 402px;
	height: 73px;
	top: 137px;
	left: 484px;
	cursor: pointer;
}

.btnpas{
	position: absolute;
	top: 235px;
	left: 175px;
	cursor: pointer;
}

.btnfal{
	position: absolute;
	top: 368px;
	left: 175px;
	cursor: pointer;
}

.btnsoci{
	position: absolute;
	top: 500px;
	left: 175px;
	cursor: pointer;
}

.fig1{
	position: absolute;
	top: 260px;
	left: 462px;
	visibility:visible;
}
.fig2{
	position: absolute;
	top: 270px;
	left: 430px;
	visibility:hidden;
}
.fig3{
	position: absolute;
	top: 260px;
	left: 465px;
	visibility:hidden;
}
.fig4{
	position: absolute;
	top: 260px;
	left: 516px;
	visibility:hidden;
}

.select1{
	position: absolute;
	font-size: 22px;
	bottom: 120px;
	left: 130px;
}

.select2{
	position: absolute;
	font-size: 22px;
	bottom: 120px;
	left: 360px;
}

#validar{
	position:absolute;
	bottom: 37px;
	right: 46px;
	background-color: #2A6C95;
	width: 150px;
	font-size: 35px;
	color: white;
	text-align: center;
	border-radius: 10px;
}
#validar:hover{ opacity:0.8;}
#validar:active{ bottom: 35px;}


.drop{
	position:absolute;
	width:5%;
	height:3.5%;
	border: dashed 2px #000;
}

#drop_1{
	left:28.7%;
	top:36%;
	width:8.2%;
}

#drop_2{
	left:40.2%;
	top:36%;
	width:10.1%;
}

.drop.card{
	border-radius: 10px;
	width: 250px;
	height:25px;
	padding: 10px 5px;
	color:#FFF;
	font-size: 20px;
	text-align:center;
	opacity: 0.9;
}

.contenedor{
	position:absolute;
	right:48px;
	top: 365px;
}

.opt{
	border-radius: 10px;
	width: 250px;
	height:25px;
	padding: 10px 5px;
	color:#FFF;
	background-color: #009FE3;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	font-size: 20px;
	text-align:center;
	opacity: 0.9;
	margin-bottom: 50px;
	cursor:pointer;
}


.drags{
	position:absolute;
	width:10%;
	height:73%;
	right:6%;
	top:16%;	
}

p{
	margin:0;
	text-align:center;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.drags > div{
	display:inline-block;
	float:left;
	height:4.7%;
	margin-bottom:4.1%;
	width:100%;
	background:rgba(255, 255, 255, 0.6);
	cursor:pointer;
}

.drags > div:hover{
	transform:scale(1.1);
}

.drags > div:active{
	transform:scale(1);
}