iframe
{
	display:none;
}
/*área de juego*/
.contenido
{
    padding: 0px;
    margin: auto;
    width: 930px;
    height: 630px;

    background-color: #bfdfbf;
   background-size: 930px 630px;
    position: relative;
  /*IMPORTANTE*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.areagame
{
    position: absolute;
    top:  10%;
    left: 0%; 
    padding: 0px;
    margin: auto;
    width: 930px;
    height: 630px;
    border-radius: 8%;
    background-color: #ffffff;
    background-size: 190px 380px;
}
.areaimgs
{
    position: absolute;
    top:  100%;
    left: 0%; 
    padding: 0px;
    margin: auto;
    width: 930px;
    height: 80px;
    border-radius: 8%;
  
    background-size: 190px 380px;
}
  body {
                font-size: 32px;
            }
            
#sistemainformatico 
          {        
    position: absolute;
    top:  50%;
    left: 46%;          
    width: 150px;
    height: 80px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #cac4c4;
            }
#firmware 
          {        
    position: absolute;
    top:  70%;
    left: 46%;          
    width: 150px;
    height: 80px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #cac4c4;
            }

#hardware 
          {        
    position: absolute;
    top:  50%;
    left: 25%;          
    width: 150px;
    height: 80px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #cac4c4;
            } 
#software 
          {        
    position: absolute;
    top:  30%;
    left: 46%;          
    width: 150px;
    height: 80px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #cac4c4;
            } 
#personalinfor 
          {        
    position: absolute;
    top:  50%;
    left: 68%;          
    width: 150px;
    height: 80px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #cac4c4;
            }
#cpu 
          {        
    position: absolute;
    top:  30%;
    left: 9%;          
    width: 150px;
    height: 80px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #cac4c4;
            }
#perifericos 
          {        
    position: absolute;
    top:  50%;
    left: 3%;          
    width: 150px;
    height: 80px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #cac4c4;
            }
#redes 
          {        
    position: absolute;
    top:  70%;
    left: 9%;          
    width: 150px;
    height: 80px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #cac4c4;
            }  
#lengprogramacion
          {        
    position: absolute;
    top:  10%;
    left: 28%;          
    width: 150px;
    height: 80px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #cac4c4;
            }  
#sistoperativos
          {        
    position: absolute;
    top:  2%;
    left: 45%;          
    width: 150px;
    height: 80px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #cac4c4;
            }                      
#appinformaticas 
          {        
    position: absolute;
    top:  10%;
    left: 62%;          
    width: 150px;
    height: 80px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #cac4c4;
            }  

/* */
#usuarios
          {        
    position: absolute;
    top:  30%;
    left: 82%;          
    width: 150px;
    height: 80px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #cac4c4;
            }
#desarrolladores 
          {        
    position: absolute;
    top:  50%;
    left: 86%;          
    width: 150px;
    height: 80px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #cac4c4;
            }
#tecnicos 
          {        
    position: absolute;
    top:  70%;
    left: 82%;          
    width: 150px;
    height: 80px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #cac4c4;
            }
.disable-selection 
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.noseleciona
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.resolver
{
    font-size: 15px;
    background-color: #009d00;
    width: 90px;
    height: 40px;
    position: absolute;
    top:  12%;
    left: 86%; 
    border-radius: 10%;
}
.repetir
{
    font-size: 15px;
    background-color: #009d00;
    width: 90px;
    height: 40px;
    position: absolute;
    top:  12%;
    left: 75%; 
    border-radius: 10%;

}
.estudia
{

    position: absolute;
    top:  5%;
    left: 89%; 

}
.profebien
{
  position: absolute;
    top:  5%;
    left: 80%;  
}

.f1
{
     width: 56px;
    height: 40px;
  transform: rotate(90deg);
  position: absolute;
    top:  43%;
    left: 50%;  
}
.f2
{
     width: 56px;
    height: 40px;
  transform: rotate(270deg);
  position: absolute;
    top:  63%;
    left: 50%;  
}
.f3
{
     width: 56px;
    height: 40px;
  transform: rotate(180deg);
  position: absolute;
    top:  53%;
    left: 60%;  
}
.f4
{
     width: 56px;
    height: 40px;
 /* transform: rotate(180deg);*/
  position: absolute;
    top:  53%;
    left: 40%;  
}
.f5
{
     width: 56px;
    height: 40px;
 /* transform: rotate(180deg);*/
  position: absolute;
    top:  53%;
    left: 18%;  
}
.f6
{
     width: 56px;
    height: 40px;
 transform: rotate(45deg);
  position: absolute;
    top:  43%;
    left: 20%;  
}
.f7
{
     width: 56px;
    height: 40px;
  transform: rotate(315deg);
  position: absolute;
    top:  63%;
    left: 20%;  
}
.f8
{
     width: 56px;
    height: 40px;
 transform: rotate(90deg);
  position: absolute;
    top:  18%;
    left: 50%;  
}
.f9
{
     width: 56px;
    height: 40px;
 transform: rotate(45deg);
  position: absolute;
    top:  24%;
    left: 40%;  
}
.f10
{
     width: 56px;
    height: 40px;
  transform: rotate(140deg);
  position: absolute;
    top:  23%;
    left: 60%;  
}

.f11
{
     width: 56px;
    height: 40px;
 transform: rotate(250deg);
  position: absolute;
    top:  64%;
    left: 80%;  
}
.f12
{
     width: 46px;
    height: 40px;
 transform: rotate(180deg);
  position: absolute;
    top:  53%;
    left: 82%;  
}
.f13
{
     width: 56px;
    height: 40px;
  transform: rotate(130deg);
  position: absolute;
    top:  43%;
    left: 80%;  
}

.parrafo{
    position: absolute;
    top: -1%;
    font-size: 20px;
    font-weight: bolder;
}
.parrafo2{
    position: absolute;
    top: 2%;
    left: 16.7%;
    font-size: 20px;
    font-weight: bolder;
}