body {
    margin:0;
    padding:0;
    background:#ff9e1a;
  }
  p{
    font-size:90%;    
  }
span{
    font-size:100%;   
    font-family: 'Roboto', sans-serif; 
    font-weight: 900;  
}
.cabecera{
    position:absolute;
    width:200px;        
    height:200px;        
    z-index:8;
    cursor:pointer;
    margin-left:18%;
    margin-top:-6%;
    color:black;
    z-index:11;
    font-family: 'Roboto', sans-serif;
}
.cabecera img{
    width:100%;
    height:auto;
    z-index:11;
}
.menus{
    margin-top:0%;
    width:100%;
    height:auto;    
    background:black;
    position:relative;
    z-index:7;
    cursor:pointer;
}
.menus img{
    width:100%;
    height:auto;
    z-index:7;
}
.pie{
    overflow:hidden;
    position:relative;
    width:100%;
    height:20%;
    background:#ff9e1a;
    z-index:5;   
    margin-top:0%;
}
.pie img{
    width:17%;
    margin-left:0%;
}
.fondo{
    position:relative;
    margin-top:-80%;
    margin-left:0%;
    width:100%;
    height:auto;
    z-index:1;
}
.fondo img{
    margin-top:-250px;
    width:50%;
    height:auto;
}
.titulos{
    position:relative;
    margin-top:-3%;
    margin-left:32.5%;
    width:25%;
    height:15%;
    z-index:7;
    font-family: 'Roboto', sans-serif;
    font-size:80%;
    color:grey;
}
.contenido{
    position:relative;
    margin-top:7%;
    margin-left:32.5%;
    width:30%;
    height:auto;
    z-index:6;
    font-family: 'Roboto', sans-serif;
    font-size:90%;
}

.formulario{
    margin-top:2%;
    margin-bottom:20px;
    width:100%;
    height:45px;
    background:#ff9e1a;
    border-color:black;
    font-family: 'Roboto', sans-serif;
    font-size:100%;
    border:solid 1px;
    padding:10px;
}

#formulario_boton{
    margin-top:-3%;
    margin-bottom:20px;
    margin-left:30px;
    width:70%;
    height:45px;
    background:#ff9e1a;
    border-color:black;
    font-family: 'Roboto', sans-serif;
    font-size:90%;
    border:solid 1px;
    padding:10px;    
    z-index:20;
}

#botonAgregar{
    margin-top:2%;
    margin-bottom:20px;
    width:100%;
    height:45px;
    background:#ffa01aa1;
    border-color:black;
    font-family: 'Roboto', sans-serif;
    font-size:90%;
    border:solid 1px;
    padding:10px;
    cursor:pointer;
    z-index:20;
}

.cntndr_botones{
    background:;
    width:70%;
    margin-left:30%;
    height:auto;
}
.botones{
    width:60%;
    height:50px;
    background:black;
    color:#a65800;
    font-size:80%;
    margin-top:8px;
    border:none;    
    cursor:pointer; 
    transition: background 0.5s ease;
    position:relative;
    border-radius:2.5px;
}   

.botones:hover{
    background:white;
    color:black;
    font-size:100%;
    transition: background 0.5s ease;
}
.boton_submit{
    width:40%;
    height:60px;
    background:black;
    color:#ff9e1a;
   font-size:60%;
    margin-top:2%;
    border:none;    
    cursor:pointer; 
transition: background 0.5s ease;
position:relative;
border-radius:2.5px;
text-align: left;
vertical-align: top;
}
.boton_submit:hover{
    background:white;
    color:black;
    font-size:100%;
    transition: background 0.5s ease;
}

.boton_subir_archivos{
    padding: 5px 10px;
    background: #f55d3e;
    color:#fff;
    border:0px solid #fff;
    }
         
    .boton_subir_archivos:hover{
    color:#fff;
    background: #f7cb15;
    }

    .boton_subir_archivos{
        padding: 5px 10px;
        background: #f55d3e;
        color:#fff;
        border:0px solid #fff;
    }
     
    .boton_subir_archivos:hover{
        color:#fff;
        background: #f7cb15;
    }

    #info{
        width:100%;
        height:auto;
        margin-top:-4.4%;
        background;
        color:red;
        position:relative;
        padding:5px;
        transition: 1.5s;
        font-family: 'Roboto', sans-serif;
        font-size:80%;
    }

    #boton_submit1{
        width:45px;
        height:45px;
        background:black;
    margin-top:-12.4%;
    margin-left:460px;
    
        color:#bb6824;
       font-size:60%;     
        border:none;    
        cursor:pointer; 
        opacity:1;
    transition: background 0.5s ease;
    position:relative;
    border-radius:2.5px;
    text-align: left;
    vertical-align: top;
    z-index: 5;
    }
    
    .foto_perfil img{   
        width:5%;
        height:5%;
        z-index:9;        
     }
     
     .foto_perfil{
        background:black;
        position:relative;
        margin-top:0%; 
        margin-left:0%;
        width:5%;
        height:5%;
        z-index:9;        
     }

     /* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default radio button */
  .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  /* Create a custom radio button */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: black;
    border-radius: 5%;
    margin-top:0%;
  }
  
  /* On mouse-over, add a grey background color */
  .container:hover input ~ .checkmark {
    background-color: #ac6c0d;
  }
  
  /* When the radio button is checked, add a blue background */
  .container input:checked ~ .checkmark {
    background-color: #ffc77a;
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .container input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .container .checkmark:after {
       top: 9px;
      left: 9px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white;
  }

    #boton1{
        width:20px;
        height:20px;
        background:green;
        margin-top:0%;
        margin-left:20%;
        position:absolute;
        z-index:100;
    }

    .radio{
        margin-top:10%;
    }



/*responsive//////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 600px) {
    .contenido{
        height:40%;
        font-size:75%;
    }
    
    .cntndr_botones{
        background:;
        width:100%;
        margin-top:0%;
        margin-left:0%;
        height:auto;
        position:relative;
    }
    .botones{
        width:50%;
        height:50px;
        background:black;
        color:#a65800;
        font-size:80%;
        margin-top:8px;
        border:none;    
        cursor:pointer; 
        transition: background 0.5s ease;
        position:relative;
        border-radius:2.5px;
    }   



    .cabecera{
        margin-top:-25%;
    }
    .cabecera img{
        width:60px;
        height:60px;
        z-index:5;
    }
    .titulos{
        margin-top:0%;
        width:80%;
        margin-left:10%;
        font-size:70%;
        text-align:center;
        color:rgb(71, 70, 70);
    }
    .contenido{        
        margin-top:3%;
        margin-left:10%;
        width:80%;
        height:15%;
        z-index:6;
        font-family: 'Roboto', sans-serif;
        font-size:80%;
    }
    .fondo img{
        margin-top:200%;
        width:100%;
        height:auto;        
    }
    .pie{          
        margin-top:2 0%;                
    }

    .table_content{        
        height:450px;        
        width:47%;  
        margin-left:25%;
        overflow: scroll;
        overflow-x:hidden;
    }
    
    .table{    
    display: table;  
    width:60%;    
    height:200px;    
    border:1px solid rgb(109, 109, 109);
}

.Title{
    display: table-caption;
    text-align: center;
    font-weight: bold;
    font-size: larger;
}

.Heading{
    display: table-row;
    font-weight: bold;
    text-align: center; 
}

.Row{
    display: table-row;
    background:grey;   
    border:1px solid #C00;      
}
.titulo_foto{
    width:150px;
    color:rgb(0, 0, 0);
    position:relative;
    margin-left:-22px; 
}
.content_table_text{ 
    width:150px;
    background:;  
    position:relative;
    padding-right:13px;
    text-align:center;
    margin-left:0px;
    margin-top:100px;
}

.content_table_nombre_user{     
    width:200px;
    background:;  
    color:black;
    position:relative;
    padding-right:13px;
    font-size:80%;
    text-align:left;
    margin-left:0px;
    margin-top:0px;
   
}
.content_table_mail{     
    width:auto;
    background:;  
    position:relative;
    padding-right:13px;
    text-align:;
    margin-left:-50px;
}

.content_table_foto img{
    width:100px;
    background:rgb(3, 3, 3);  
    position:relative;  
    margin-left:0px;
    margin-top:-130px;
    border:1px solid rgb(22, 22, 22);  
}
.content_table_radio{         
    width:160px;   
    background:;  
    position:relative;     
}

.Cell{  
    display: table-cell;
    border-top:solid;
    border-color:rgb(104, 104, 104);
    border-width: thin;   
   width:100px;
}

}