* {box-sizing: border-box;
}

#centrar_captcha {
    display: flex;
    float: right;
}
#label_user {
    padding: 0px 0px 0px 0px; 
}
#label_display_name {
    padding: 0px 0px 0px 0px; 
}  
p { 
    text-align: justify;
 }
#parrafo_formulario { 
    text-align: justify;
    float: left;
    padding: 10px;
  

 } 
#parrafo_pie {
    text-align: justify;
    color: gray;
}
#parrafo_login {
    float: left;
    padding: 0px 50px 0px 50px;
}
#parrafo_cuenta { 
    text-align: justify;
    color: rgba(35, 43, 48, 0.9);
    font-size: 125%;
    padding: 10px;

 } 
h2 {
    display: block;
    color: #ffffff;
    font-size: 1.5em;
    font-weight: 400;
    outline: 0;
    text-decoration: none;
    text-align: center;
    font-family: Segoe UI Light,"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
 }
 h1 {
    display: block;
    color: #ffffff;
    font-size: 1.5em;
    font-weight: 400;
    outline: 0;
    text-decoration: none;
    font-family: Segoe UI Light,"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
 }
 
a   
{   
 text-decoration:none; 
 
}    

a:hover {
    font-weight: bold;
    
    }

a.nounderline:link   
{   
 text-decoration:none;   
}   
    
#parrafo_sliden {
  animation-duration: 1s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

 
pre { 
    text-align: justify;
    font-size: 125%;
    color: rgba(0, 0, 0, 0.72);
    font-family: Segoe UI Light,"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;

 }
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 2px;
}


html {
    font-family: "Lucida Sans", sans-serif;
    
}


/* CONTENEDOR DE ERROR */
#error {
    position: relative;
    background-color: white;
    padding: 10px 15px;
    color: red;
    font-weight: bold;
    z-index: 9999;
    border-left: 4px solid red;
    border-radius: 4px;
    margin: 0 auto 10px auto;
}

/* CONTENEDOR DE ÉXITO */
#success {
    position: relative;
    background-color: white;
    padding: 10px 15px;
    color: green;
    font-weight: bold;
    z-index: 9999;
    border-left: 4px solid green;
    border-radius: 4px;
    margin: 0 auto 10px auto;
}

/* LISTA INTERNA */
#error ul,
#success ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

/* BOTÓN [X] DENTRO DE LA BARRA */
.cerrar-alerta {
    position: absolute;
    top: 5px;
    right: 10px;
    text-decoration: none;
    font-weight: bold;
    color: #0000ff;   /* azul o el color que quieras */
}
.cerrar-alerta:hover {
    text-decoration: underline;
}

.header {
    background-color: #5f5f5f;
    background-image: url('images/fondo_body.png');
    color: #ffffff;
    padding: 15px;
}
img {
    max-width: 100%;
    height: auto;
}
.menu ul {
    list-style-type: none;
    margin: 10px;
    padding: 0px;
    margin-bottom: 60px;
    background: white;
}
#parrafo_sliden {
  text-align: center;
  padding: 2px;
  animation-duration: 0.5s;
  animation-name: slidein;
  border-left: 2px solid black;
  border-radius:10px;
  background-image: linear-gradient(to right, transparent, #F8F8FF, #F8F8FF, white, white, white);
}
li {
    text-decoration: none;
     list-style-type: none;
}
.menu div{
    padding:2px;
}














.menu p{
    text-align:center;
}
.menu li:hover{
    background-color:#C9ff00;
    border-radius: 25px;
}
.menu a:visited {
    color: #ffffff;
}
.aside {
    background-color: #C9ff00;
    padding: 10px;
    
    text-align: center;
    font-size: 14px;
    /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
    border-radius: 0px;
}
.footer {
    background-color: #232B30;

    text-align: center;
    font-size: 12px;
    padding: 10px;
    margin: 10px 0px 0px 0px;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
    
}

@media only screen and (max-width: 600px) {
    /* For celular: */
    .col-m-12-phone {width: 100%; padding-top: 55%; height: 100%;}
}

@media only screen and (min-width: 100px) {
    /* For celular: */
    
    span { 
    color: #232b30; }
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-6-48 {width: 25%;    padding: 0px;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%; padding: 0px;}
    .col-m-12-uno {width: 45%; padding: 0px;}
    .col-m-12-tres {width: 100%; padding: 0px;}
    .col-m-12-movil {width: 100%; padding: 0px; margin: 0px 0px 0px 0px; background: white;}
    .col-m-12-movil-dos {width: 100%; padding: 0px; margin: 0px 0px 0px 0px; background: white;}
    
    
      .menu li {
    text-align:center;
    padding: 8px;
    margin-bottom: 7px;
    background-color :#232b30;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    
    
    
    .col-m-12-movil-cuatro {width: 100%; padding: 0px; margin: 0px 0px 0px 0px; background: white;}

    .col-m-12-footer {width: 100%; padding: 0px; margin: 8px; background: #232b30;     box-shadow: 0px 1px 18px rgba(0,0,0,0.12), 0 1px 18px rgba(0,0,0,0.24);}


}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    
    span { 
    color: #C9ff00; }
    .col-m-1 {width: 8.33%; margin: -0px 0px 0px 15px; background: white;}
    .col-m-1-footer {width: 12%;}
    .col-m-2 {width: 16.66%; margin: -0px 0px 0px 15px; background: white;}
    .col-m-2-footer {width: 15%; padding: 0px 0px 0px 0px;}
    .col-m-3 {width: 25%;}
    .col-m-3-footer {width: 17%; padding: 0px 0px 0px 0px;}
    .col-m-4 {width: 33.33%;    margin: 0px 0px 0px 15px;}
    
    .col-m-4-footer {width: 33.33%; padding: 0px;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 14%;}
    .col-m-6-footer {width: 50%; padding: 0px;}
    .col-m-6-48 {width: 12%;     padding: 0px;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-8-menu {width: 75%;}
    .col-m-9 {width: 75%;}
    .col-m-9-fondo-75 {width: 75%; height: 500px; background-image: url(images/fondo_75.png); background-size: 100%; background-repeat: no-repeat;}
    .col-m-9-fondo-75-register {width: 75%; height: 500px; background-image: url(images/fondo_75_register.png); background-size: 100%; background-repeat: no-repeat;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
    .col-m-12-login {width: 100%; height: 500px; background-image: url(images/fondo_75.png); background-size: 100%; background-repeat: no-repeat;}
    .col-m-12-dos {width: 30%; padding: 0px;}
    .col-m-12-tres {width: 25%; padding: 0px;}
    .col-m-12-footer {width: 100%; padding: 8px; margin: 0px 0px 0px -8px; background: #232b30;    position: fixed; bottom: 0;     box-shadow: 0px 1px 18px rgba(0,0,0,0.12), 0 1px 18px rgba(0,0,0,0.24);}
    .col-m-12-movil {width: 100%; padding: 0px; margin: 0px 0px 0px 0px; background: white;}
    .col-m-12-movil-dos {width: 28%; padding: 0px; margin: 0px 0px 0px 0px; background: white;}
    
    
    
     .menu li {
    text-align:center;
    padding: 8px;
    margin-bottom: 7px;
    background-color :#4d57cc96;
    border-radius: 20px;
    color: black;
    box-shadow: 0 1px 3px rgba(0,0,0,0), 0 1px 2px rgba(0,0,0,0);
    }
    
    
    
    
    
    .col-m-12-movil-cuatro {width: 35%; padding: 0px; margin: 0px 0px 0px 0px; background: white;}
    
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    
    span { 
    color: #C9ff00; }
    .col-1 {width: 8.33%; margin: 0px 0px 0px 10px; background: white;}
    .col-1-footer {width: 12%;}
    .col-2 {width: 16.66%; margin: 0px 0px 0px 10px; background: white;}
    .col-2-uno {width: 20%; margin: 0px 0px 0px 10px; background: white;}
    .col-2-footer {width: 15%; padding: 0px 0px 0px 0px; background: #232b30;}
    .col-3 {width: 25%; }
    .col-3-2022 {width: 50%; }
    .col-3-index {width: 25%;    margin: 0px 0px 0px 10px;}
    .col-3-footer {width: 17%; padding: 0px 0px 0px 0px;}
    .col-4 {width: 33.33%;    margin: 0px 0px 0px 0px; padding: 2px;}
    .col-4-index {width: 33.33%;    margin: 0px 0px 0px 15px;}
    
    .col-4-footer {width: 33.33%; padding: 0px;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-6-footer {width: 50%; padding: 0px;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-8-menu {width: 75%;}
    
    

    .menu li {
    text-align:center;
    padding: 8px;
    margin-bottom: 7px;
    background-color :#4d57cc96;
    border-radius: 20px;
    color: black;
    box-shadow: 0 1px 3px rgba(0,0,0,0), 0 1px 2px rgba(0,0,0,0);
    }
    
    
    .col-9 {width: 75%;}
    .col-9-fondo-75 {width: 75%; height: 500px; background-image: url(images/fondo_75.png); background-size: 100%; background-repeat: no-repeat;}
    .col-9-fondo-75-register {width: 75%; height: 500px; background-image: url(images/fondo_75_register.png); background-size: 100%; background-repeat: no-repeat;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%; padding: 0px;}
    .col-12-login {width: 100%; height: 500px; background-image: url(images/fondo_75.png); background-size: 100%; background-repeat: no-repeat;}
    .col-m-12-footer {width: 100%; padding: 8px; margin: 0px 0px 0px -8px; background: #232b30;    position: fixed; bottom: 0;     box-shadow: 0px 1px 18px rgba(0,0,0,0.12), 0 1px 18px rgba(0,0,0,0.24);}
    .col-12-fondo-75-register {width: 100%; height: 500px; background-image: url(images/fondo_75_register.png); background-size: 100%; background-repeat: no-repeat;}
    .col-12-arcossoft {width: 100%; height: 500px; background-image: url(images/fondo_arcossoft.png); background-size: 100%; background-repeat: no-repeat;}
}

/* menu circulo*/   
.circulo {
     width: 150px;
    height: 150px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #5F5F5F;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}
.circulo:hover {
    width: 150px;
    height: 150px;
    -webkit-transform: rotate(360deg); /* Safari */
    transform: rotate(360deg);
    box-shadow: 0 -1px 4px 4px rgba(0,0,0,0.2), 0 1px 4px 4px rgba(0,0,0,0.2);
}
.circulo_uno {
     width: 130px;
    height: 130px;
    margin: 10px 0px 0px 10px;
    position: absolute;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: white;
}
.circulo_uno_dos {
     width: 120px;
    height: 120px;
    margin: 5px 0px 0px 5px;
    position: absolute;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #5F5F5F;
    display: flex;
    align-items: center;
    justify-content: center;
}
.parrafo_circulo {
     text-align: center;
}