@import url('https://fonts.googleapis.com/css?family=Raleway');
/*body{background-color:#fff;background-image:url('');background-attachment:fixed}
.btn-nav{background-image:-webkit-linear-gradient(top, #6495ED 0, #2368E6 100%);background-image:-o-linear-gradient(top, #6495ED 0, #006f75 100%);background-image:linear-gradient(to bottom, #6495ED 0, #2368E6 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6495ED', endColorstr='#ff006f75', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);background-repeat:repeat-x;border-color:#000;color:#4cf6ff;background-color:#6495ED}
.btn-nav:hover,.btn-nav:focus{background-color:#2368E6;background-position:0 -15px} /* Cuando seleccionas boton  #006f75 */
/*.btn-nav:active,.btn-nav.active{background-color:#094AC0;border-color:#000}
.btn-nav:disabled,.btn-nav[disabled]{background-color:#006f75;background-image:none}
.progress{zoom:1;background-color:transparent\9;-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#8000aab3, endColorstr=#8000aab3)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#8000aab3, endColorstr=#8000aab3);background-color:rgba(113, 148, 244, 0.5)}  /* rgba(0,170,179,0.5)  */

/*
.question{font-family:'Raleway',sans-serif;color:#000}
table.question-answers>tbody>tr:nth-child(even)>th,table.question-answers>tbody>tr:nth-child(even)>td{font-size:1em;color:#000;background-color:#fff}
table.question-answers>tbody>tr:nth-child(even)>th select,table.question-answers>tbody>tr:nth-child(even)>td select,table.question-answers>tbody>tr:nth-child(even)>th textarea,table.question-answers>tbody>tr:nth-child(even)>td textarea,table.question-answers>tbody>tr:nth-child(even)>th input,table.question-answers>tbody>tr:nth-child(even)>td input{border-color:#000}
table.question-answers>tbody>tr:nth-child(even)>th input[type=radio]+label:before,table.question-answers>tbody>tr:nth-child(even)>td input[type=radio]+label:before,table.question-answers>tbody>tr:nth-child(even)>th input[type=checkbox]+label:before,table.question-answers>tbody>tr:nth-child(even)>td input[type=checkbox]+label:before{border-color:#000}
table.question-answers>tbody>tr:nth-child(odd)>th,table.question-answers>tbody>tr:nth-child(odd)>td{font-size:1em;color:#000;background-color:#f5fdff}
table.question-answers>tbody>tr:nth-child(odd)>th select,table.question-answers>tbody>tr:nth-child(odd)>td select,table.question-answers>tbody>tr:nth-child(odd)>th textarea,table.question-answers>tbody>tr:nth-child(odd)>td textarea,table.question-answers>tbody>tr:nth-child(odd)>th input,table.question-answers>tbody>tr:nth-child(odd)>td input{border-color:#000}
table.question-answers>tbody>tr:nth-child(odd)>th input[type=radio]+label:before,table.question-answers>tbody>tr:nth-child(odd)>td input[type=radio]+label:before,table.question-answers>tbody>tr:nth-child(odd)>th input[type=checkbox]+label:before,table.question-answers>tbody>tr:nth-child(odd)>td input[type=checkbox]+label:before{border-color:#000}
.t_later{font-family:'Raleway',sans-serif;font-size:1em;color:#f60}.btn-nav{color:#fff}*/
.selectable input,
.content-select select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
 
.selectable input{
	visibility: hidden;
	position: absolute;
	right: 0;
}

.selectable{
	position: relative;
	margin-bottom: 30px;
	margin-top: 10px;
	padding:5px 0 5px 60px; /* Damos un padding de 60px para posicionar el elemento <i> en este espacio*/
	display: block;
}

/* Estas reglas se aplicarán a todos las elementos i después de cualquier input*/
.selectable input + i{
 background: #f0f0f0;
 border:2px solid rgba(0,0,0,0.2);
 position: absolute; 
 left: 0; 
 top: 0;
}
 
/* Estas reglas se aplicarán a todos los i despues de un input de tipo radio*/
.selectable input[type=radio] + i{
 height: 30px;
 width: 30px;
 border-radius: 100%;
 left: 50px;
}
.selectable input[type=radio] + i:before{
	content: '';
	display: block;
	height: 18px;
	width: 18px;
	background: red;
	border-radius: 100%;
	position: absolute;
	z-index: 1;
	top: 4px;
	left: 4px;
	background:#2AC176;
	transition: all 0.25s ease; /* Todas las propiedades | tiempo | tipo movimiento */
	transform: scale(0) /* Lo reducimos a 0*/ ;
	opacity: 0; /* Lo ocultamos*/
}
.selectable input[type=radio]:checked + i:before{
	transform: scale(1);
	opacity: 1;
}
.selectable:hover input[type=radio]:not(:checked) + i{
	background: #B1E8CD;
}