*{
    margin: 0;
    padding: 0;

}

body{
  width: 100%;
  background:rgb(216, 216, 214);
}



.hoja{
width: 100%;
height: auto;
background:rgb(253, 253, 251);

 }

 h3{

text-align: center;
  font-size: 20px;
  font-family: 'Raleway';
  color: #f3ecec;
background: rgb(130, 184, 246);
padding: 10px;

}

.arriba{
  color: #0a76be;
  display:block;
  margin-left: auto;
  margin-right: auto;
}

#nombre2, #nombre3, #nombre1{
position: relative;
  width:29px;
  height:29px;

margin: auto;
}


.icon-adobeacrobatreader:before {
  content: "\e90d";
  color: #ee3f24;
 
  font-size: 35px;

}


.icon-file-word:before {
  content: "\eae1";
  color: #245aee;
 
  font-size: 35px;



}




input[type="radio"]{

  /*width:29px;*/
  width: 70%;
  height:70%;
 /*margin:10px 5px 5px 55px;*/
/*margin: 38px 5px;*/
left: 44%;


}


label{
position: relative;
  font-family:cursive;
  font-size: 20px;
  background: #0a76be;
left: 46%;
}



/*-----------------------inserto-----------------------*/
 
.colora{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 120px 120px 120px 120px 120px 120px 120px 120px;
    
}
/*.colora > div{
  font-family: 'Raleway';

  width:25%;
  height: 25%;
  margin: 55px 25px;
 margin-left: 10px;
 border-radius: 8px;

margin: auto;
}*/

.colora > div{
font-family: 'Raleway';
width:30px;
height: 25px;

/*margin-left: 40px;*/
border-radius: 8px;
padding: 16px;
margin: auto;
text-align: center;

}



.c1{
  background-color:#FFFFFF;
  }
  .c2 {
  background-color:#5F7C8A;
  }
  
  .c3 {
  background-color:#9D9D9D;
  }
  
 .c4 {
  background-color:#785446;
  }

  .c5 {
  background-color:#FD5621;
  }

  .c6 {
  background-color:#FF9700;
  }

  .c7 {
  background-color:#FDC006;
  }
  
  .c8 {
  background-color:#FEEA3B;
  }
  .c9 {
  background-color:#CCDB38;
  }
  .c10 {
  background-color:#8AC149;
  }
  .c11 {
    background-color:#4BAF4F;
  }
  
  .c12 {
   background-color:#019587;
  }
  .c13 {
   background-color:#01BBD4;
  }
  
  .c14{
    background-color:#02A8F4;
    }
    .c15 {
    background-color:#2095F2;
    }
    
    .c16 {
    background-color:#3E50B4;
    }
    
   .c17 {
    background-color:#663AB6;
    }
  
    .c18 {
    background-color:#9B27B0;
    }
  
    .c19 {
    background-color:#363F46;
    }
  
    .c20 {
    background-color:#EA1E63;
    }
    
    .c21 {
    background-color:#F44236;
    }



 


/*------------------------fin inserto----------------------*/

input[type=file]{
/*position: relative;
display: block;*/

/*margin:10px 10px 10px 50px;*/
margin: auto;
box-sizing: border-box;
border: 3px solid#199ef7;
border-radius: 14px;

font-size: 0px;

width: 30%;
height: 55%;


/*background-color: rgb(238, 11, 11);*/

/*background-repeat: no-repeat;*/
padding: 10px 14px 12px 12px;

border-left: 8px solid #199ef7;

 }

 .lo0, .lof, .lo1,.lo2{
   position: relative;
   margin:10px 10px 10px 80px;
   width: 70%;
   height: 55%;
  text-align: center;
  
}







 .imagen{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 120px 120px 120px 120px 120px 120px;
grid-row: 2px;
  
}


.imagen > div{

  margin:10px;
}

input[type=text], textarea{
  position: relative;
  display: flex;
  width: 96%;

  box-sizing: border-box;
  border: 2px solid#199ef7;
  border-radius: 4px;
  font-size: 20px;
 
  background-color: white;

margin: auto;
  padding: 12px 10px 12px 10px;

border-left: 6px solid #199ef7;

}





/*.color input[type="radio"]{

  margin:10px 10px 10px 60px;
}










span{
top:275px;
position: absolute; 

left: 1455px;

}*/

input[type=submit], [type=reset]{ 

position: relative;
display: block;
top:20px;
  width: 25%;
  box-sizing: border-box;
  border: 2px solid#199ef7;
  border-radius: 4px;
  font-size: 18px;
  background-color: white;
margin: auto;
  background-repeat: no-repeat;
  padding: 12px 10px 12px 10px;

border-left: 6px solid #199ef7;

}







input[onclick="alert"]:hover{
  font-size: 45px;
  color: rgb(66, 140, 238);
}

 input[type=submit]:hover{
visibility: visible;
/*content:"Contenido insertado tras el contenido de los elementos '.padre'";*/

 }
 

input[type=text]:hover {
  background-color: #d4eaf8;
}



textarea:hover {
  background-color: #d4eaf8;
}

 
input[type=file]:hover {
  background-color: #d4eaf8;
}


.paso2{
  position: relative;
  top: -30px;
  color: rgb(39, 127, 243);
  font-family: 'Raleway';
  text-align: center;
  font-size: 24px;
}




.boton {

  float: right;
    background-color:rgb(67, 145, 235);
   
    color: white;
    padding: 9px 25px;
    text-align: center;
    text-decoration: none;
    font-family: 'Raleway';
    font-size: 14px;
    margin: 0px 8px;

   /*border: rgb(243, 243, 247) 2px solid;*/
  }
/*XXXXXXXXXXXXXXXXXXXXXXXXXXX  MEDIA QUERI   XXXXXXXXXXXXXXXXXXXXXXXXX*/

  @media screen and (min-width: 950px){
     .hoja{
      width: 70%;
      margin: auto;
          }

          .lo0, .lof, .lo1,.lo2{
             margin:10px 10px 10px 180px;
          }
         
              input[type=submit], [type=reset]{
                  margin: auto;
              }

              
                
            .colora{
                  width: 35%;
                  margin: auto;
                }
          
                
              

  }
/*XXXXXXXXXXXXXXXXXXX     F  I  N  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*XXXXXXXXXXXXXXXXXXX  MEDIA QUERI II   XXXXXXXXXXXXXXXXX*/
/*@media screen and (min-width: 580px){


  .hoja{
    width: 100%;
    margin: auto;
  }
  
  
   .colora{
    width: 60%;
    margin: auto;
  }


}*/



/*XXXXXXXXXXXXXXXXXXXX  FIN MEDIA QUERI II   XXXXXXXXXXXXXXXXXXXXXXX*/




















/*-------------------- media queries ---------------*/
  /*@media screen and (min-width: 800px){

  .hoja{
    width: 80%;
  margin: auto;
        }



        h3{
            font-size: 30px;
            font-family: 'Raleway';
          }

          input[type=text], textarea{
           
            width: 98%;
     
            font-size: 30px;
           
            background-color: white;
          
          
            padding: 12px 10px 18px 10px;
     margin: auto;

          
          }

           


            #nombre2, #nombre3, #nombre1{

             margin:10px 10px 10px 510px;
            
            }


      .lof, .lo1, .lo2{
        margin:10px 10px 10px 310px;
      }      



          input[type="radio"]{
       

        
           margin: 10px 10px;
           }
          


             .colora > div{
              width:12%;
    height: 45%;
   padding: 8px 15px;
    margin: auto;
            }
           
            input[type=file]{
             
              width: 30%;
              height: 55%;
        
              margin:10px 10px 10px 170px;
              
                }



               input[type=submit], [type=reset]{ 

                  padding: 12px 10px 12px 10px;
                margin: 2px 480px;
                               
                }


                .boton {
                    padding: 15px 25px;
                    
                    font-size: 14px;
                    margin: 0px 8px;
                      }



}*/