@font-face {
    font-family: 'monserrat' ;
    src: url('../font/Monserrat-Bold.otf') format('opentype'),
         url('../font/Monserrat-Italic.otf') format('opentype'),
         url('../font/Monserrat-Regular.otf') format('opentype');         
    font-weight: normal ;
    font-style: normal ;
}
body{    
    font-family: "monserrat", Arial, Tahoma, sans-serif !important;    
    background-repeat: no-repeat;
    background-size: cover;
}
.wleft{
  float:left;
  width:20%;
  padding: .5em;
  box-sizing: border-box;
}
.wright{
  float:left;
  width:20%;
  padding: .5em;
  box-sizing: border-box;
}

.containerAll{
      padding: 5px 25px;
    box-sizing: border-box;
    height: auto;
    background-color: white;
    opacity: 0.85;
    top: 180px;
    position: relative;
    max-width: 1024px;
    margin: 0 auto;
    border-radius: 7px;
  float:left;
  /*
  width:60%;
  padding: .5em;
  box-sizing: border-box; 
  height: auto;
  background-color: white;
  opacity: 0.7;
  top:180px;
  position: relative;*/
}


.title{
	color:#76BD1D;
	font-size: 35px;
}
.subtema{
	color:#318DDE;
	font-size: 25px;
	text-align: right;
} 

.subtema::after{
	content: url('../imagenes/inicio_.png');
	position: relative;
	top: 5px;
	left: 10px;
}

.subtema2{
	color:purple;
	font-size: 25px;
	text-align: right;
}

.subtema2::after{
	content: url('../imagenes/tem_li.jpg');
	position: relative;
	top: 5px;
	left: 10px;
}


#question{
	    margin-left: 8%;
    color: #027cad;
    font-size: 1.7em;
    padding-top: 50px;
}
	/*margin-left: 8%;
	color:#00B1D8;
	font-size: 20px;
  padding-top: 85px;*/

.radioSel{
  color:black;
  font-size:17px;
  position:relative;
  display:block;
  padding: 20px 30px 0px 30px;
}
.radioSel span{
  position:relative;
   padding-left:20px;
}



.radio{
  color:black;
  font-size:17px;
  position:relative;
  display:block;
  padding: 20px 30px 0px 30px;
}
.radio span{
  position:relative;
   padding-left:20px;
}
.radio span:after{
  content:'';
  width:15px;
  height:15px;
  border:3px solid;
  position:absolute;
  left:0;
  top:1px;
  border-radius:100%;
  -ms-border-radius:100%;
  -moz-border-radius:100%;
  -webkit-border-radius:100%;
  box-sizing:border-box;
  -ms-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
.radio input[type="radio"]{
   cursor: pointer; 
  position:absolute;
  width:100%;
  height:100%;
  z-index: 1;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}
.radio input[type="radio"]:checked + span{
  color:#017b96;  
}
.radio input[type="radio"]:checked + span:before{
    content:'';
  width:5px;
  height:5px;
  position:absolute;
  background:#00B1D8;
  left:5px;
  top:6px;
  border-radius:100%;
  -ms-border-radius:100%;
  -moz-border-radius:100%;
}

.opciones{
	margin-left: 2%;
}

.bubbly-button {
  font-family: 'Helvetica', 'Arial', sans-serif;
  display: inline-block;
  font-size: 1em;
  padding: 0.7em 2em;
  -webkit-appearance: none;
  appearance: none;
  background-color: black;
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  }
  .bubbly-button:focus {
    outline: 0; }
  .bubbly-button:before, .bubbly-button:after {
    position: absolute;
    content: '';
    display: block;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1000;
    transition: all ease-in-out 0.5s;
    background-repeat: no-repeat; }
  .bubbly-button:before {
    display: none;
    top: -75%;
    background-image: radial-gradient(circle, black 20%, transparent 20%), radial-gradient(circle, transparent 20%, black 20%, transparent 30%), radial-gradient(circle, black 20%, transparent 20%), radial-gradient(circle, black 20%, transparent 20%), radial-gradient(circle, transparent 10%, black 15%, transparent 20%), radial-gradient(circle, black 20%, transparent 20%), radial-gradient(circle, black 20%, transparent 20%), radial-gradient(circle, black 20%, transparent 20%), radial-gradient(circle, black 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%; }
  .bubbly-button:after {
    display: none;
    bottom: -75%;
    background-image: radial-gradient(circle, black 20%, transparent 20%), radial-gradient(circle, black 20%, transparent 20%), radial-gradient(circle, transparent 10%, black 15%, transparent 20%), radial-gradient(circle, black 20%, transparent 20%), radial-gradient(circle, black 20%, transparent 20%), radial-gradient(circle, black 20%, transparent 20%), radial-gradient(circle, black 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%; }
  .bubbly-button:active {
    transform: scale(0.9);
    background-color: black;
    box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2); }
  .bubbly-button.animate:before {
    display: block;
    animation: topBubbles ease-in-out 0.75s forwards; }
  .bubbly-button.animate:after {
    display: block;
    animation: bottomBubbles ease-in-out 0.75s forwards; }

@keyframes topBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%; } }
@keyframes bottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%; }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%; } }

.control{
	padding: 25px 45px;
	text-align: right;
}

.containerRealimentacion{
	display:none;
	width:100%;
	margin: 0 auto;
}
.titleResultados{
  font-size: 30px;
  color: #00B1D8;
}

.title2Correct{
	display:none;
  font-size: 30px;
  padding-top: 50px;
  padding-left: 25px;
  color:#35C5BF;
}
.title2Incorrect{
	display:none;
  font-size: 30px;
  padding-top: 50px;
  padding-left: 25px;
  color:#D90000 ;
}

.containerResultados{
	display:none;
	width:100%;
	margin: 0 auto;
}

.imgR{
	position: relative;
    left: 35%;
    z-index: -10;
    width:20%;
}

#score{
	display: inline;
	font-size: 42px;
	z-index: 500;
	position: relative;
	top: -10%;
	left: 33%;
	color: #00B1D8;
}

p{
	color:black;
}

.containerInformacion h3{
  text-align: right;
  font-size: 25px;
}

.image{
  text-align: center;
}
#img{
  width:50%;
}
#img2{
  width:50%;
}

.mas{
  background: black;
  padding: 8px;
  border: 1px solid;
  top: 15px;
  left: 20px;
  position: relative;
  color: white;
  text-decoration: none;
}

.numero{
  float: left;
  width: 8%;
}
.numero span{
  font-size: 40px;
  color: #00B1D8;
  font-weight: bold;
}
.oracion{
  float: left;
  width: 72%;
}
.oracion p{
  position: relative;
  top: -10px; 
}
.ver{
  float: left;
  width: 20%;
}
.links{
  float: left;
  width: 100%;
}
.imgQ{
  margin-left: 45%;
  margin-top: 5%;
}
.containerInformacion{
  display: none;
float: left;
padding: .5em;
box-sizing: border-box;
background-color: white;
opacity: 0.85;
max-width: 985px;
margin: 0 auto;
position: relative;
left: 20%;
top: 65px;
border-radius: 7px;
}
p#realimentacionFinal {
    font-size: 1.8em;
    color: #d05423;
}
#frase3{
  font-size: 1.8em;
  color: #d05423;
}
#frase1{
  font-style: oblique;
}
@media (max-width: 1480px) {

}
@media(max-width: 1266px){
.containerInformacion{
  left:0%;
}
}

@media (max-width: 1280px) {
  .containerAll {    
    top: 80px;
  }
}
@media (max-width: 1024px) {
  .containerAll {
    top: 15px;
  }
}
@media (max-width: 920px) {
  .containerAll {
    top: 30px;
  }
  #question {
    padding-top: 0px;
  }
}
@media (max-width: 871px) {
  .imgR {
    width: 30%;
  }
}
@media (max-width: 800px) {
.control {
    padding: 10px;
  }
}

@media (max-width: 750px) {
  .containerAll {
    width:100%;
  }
}

@media (max-width: 640px) {

}
@media (max-width:624px){

}

@media (max-width: 555px) {   

}
@media (max-width:496px){
  .numero{
    width: 100%;
        text-align: center;
  }
  .oracion{
    width:100%;
        text-align: center;
  }
  .ver{
    width:100%;
        text-align: center;
  }
  .mas {   
    top: -9px;
    left:0px;
  } 
}
@media (max-width:386px){
#score {    
    font-size: 25px;  
    left: 0%;
}


}