@font-face {
  font-family: Concert One;
  src: url(ConcertOne-Regular.ttf);
}

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('logoitsj.png') 50% 50% no-repeat rgb(249,249,249);
  opacity: .8;
}

h1{
  font-family: 'Concert One', cursive;
  font-size: 40px;
}

.principal{
  
  background: url('fondo.svg') ;
  width: 100%;
  height:100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

#his{
  font-size: 20;
  width: 150px;
  height: 25px;
  border: 1px solid black;
}

.btn-primary{
  background:white;
  color: #FF914D;
  border: white;

}

/* aprender */
.aprender{
  background: url('fondo.svg') ;
  width: 100%;
  height:100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

.aprender h1{
  color:#5E17EB
}

.numeros-amarillo h1{
  color:#434147;
  font-size:35px;
}

.numeros-amarillo{
  background:#ffde59;
}

.numeros-amarillo .interno h2{
  color:#5E17EB;
  font-family: 'Concert One', cursive;
  font-size: 70px;
}

.numeros-rojo h1{
  color:#d5d5d6;
  font-size:35px;
}

.numeros-rojo{
  background:#FF5756;
}

.numeros-rojo h2{
  color:#5E17EB;
  font-family: 'Concert One', cursive;
  font-size: 70px;
}

 .btn-secondary{

 }


 /*  */
 .content-input {
  font-family: 'Concert One', cursive;
  font-size:25px
}

.content-input input,
.content-select select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
 
.content-input input{
	visibility: hidden;
	position: absolute;
	right: 0;
  
}
 .content-input{
	position: relative;
	margin-bottom: 0px;
	padding:5px 0 5px 5px; /* 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*/
.content-input 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*/
.content-input input[type=radio] + i{
 height: 30px;
 width: 30px;
 border-radius: 100%;
 left: 15px;
}

.content-input 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*/
}


.content-input input[type=radio]:checked + i:before{
	transform: scale(1);
	opacity: 1;
}
.content-input:hover input[type=radio]:not(:checked) + i{
	background: #B1E8CD;
}