@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@300&display=swap');
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 120%;  
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}
.material-icons:hover{
    background-color: var(--gris00000);
    color: var(--turquesa0);
}
*{
    margin: 0;
    padding: 0;
    font-size: 100%;
    max-width: 100%;
    font-weight: normal;
    border-radius: 0;
    outline: none;
    box-sizing: border-box;
}
:root{
    --blanco000: rgba(255, 255, 255,   1);
    --negro0000: rgba(  0,   0,   0,   1);
    --negro0001: rgba(  0,   0,   0, .75);
    --negro0002: rgba(  0,   0,   0,  .5);
    --negro0003: rgba(  0,   0,   0, .25);
    --azul00000: rgba( 48,  88, 166,   1);
    --azul00001: rgba( 48,  88, 166, .25);
    --azul00002: rgba( 48,  88, 166,  .5);
    --azul00003: rgba( 48,  88, 166, .75);
    --turquesa0: rgba( 39, 102, 120,   1);
    --turquesa1: rgba( 39, 102, 120, .25);
    --turquesa2: rgba( 39, 102, 120,  .5);
    --turquesa3: rgba( 39, 102, 120, .75);
    --verde0000: rgba( 54, 166, 146,   1);
    --amarillo0: rgba(167, 145,  72,   1);
    --gris00000: rgba( 92,  99, 102,   1);
    --gris00001: rgba(133, 146, 158, .75);
    --gris00002: rgba(133, 146, 158,  .5);
    --gris00003: rgba(133, 146, 158, .25);
    --rojo00000: rgba(254,   9,  31,   1);
    --rojo00001: rgba(254,   9,  31, .25);
    --rojo00002: rgba(254,   9,  31,  .5);
    --rojo00003: rgba(254,   9,  31, .75);
}
.fondoverde{
    background-color: var(--verde0000);
    color: var(--blanco000);
}
.fondoazul{
    background-color: var(--azul00000);
    color: var(--blanco000);
}
.fondoturquesa{
    background-color: var(--turquesa0);
    color: var(--blanco000);
}
.fondoturquesa00{
    background-color: var(--turquesa2);
    color: var(--blanco000);
}
.fondogris{
    background-color: var(--gris00000);
    color: var(--blanco000);
}
.fondogris00{
    background-color: var(--gris00002);
    color: var(--blanco000);
}
.fondomenu{
    background-color: var(--negro0003);
    color: var(--blanco000);
}
.fondorojo{
    background-color: var(--rojo00000);
    color: var(--blanco000);
}
.blanco{
    color:var(--blanco000);
}
.bordeverde{border: solid var(--verde0000) 3px;}
.bordeazul{border: solid  var(--azul00000) 3px;}
.bordeturquesa{border: solid var(--turquesa0) 3px;}
.bordegris{border: solid var(--gris00000) 3px;}
.bordeverded{border-right: solid var(--verde0000) 3px;}
.bordeverdei{border-left: solid var(--verde0000) 3px;}
.bordeverdea{border-top: solid var(--verde0000) 3px;}
.bordeverdeb{border-bottom: solid var(--verde0000) 3px;}
.bordeazuli{border-left: solid  var(--azul00000) 3px;}
.bordeazuld{border-right: solid  var(--azul00000) 3px;}
.bordeazula{border-top: solid  var(--azul00000) 3px;}
.bordeazulb{border-bottom: solid  var(--azul00000) 3px;}
.bordeturquesai{border-left: solid var(--turquesa0) 3px;}
.bordeturquesad{border-right: solid var(--turquesa0) 3px;}
.bordeturquesaa{border-top: solid var(--turquesa0) 3px;}
.bordeturquesab{border-bottom: solid var(--turquesa0) 3px;}
.bordegrisi{border-left: solid var(--gris00000) 3px;}
.bordegrisd{border-right: solid var(--gris00000) 3px;}
.bordegrisa{border-top: solid var(--gris00000) 3px;}
.bordegrisb{border-bottom: solid var(--gris00000) 3px;}
html{
    color: var(--gris00000);
    font-family: 'Urbanist', sans-serif;
    box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6{
    padding: .75% 0;
}
input, select, 
button, a , i, span, img,
label{
    border: none;
    cursor: pointer;   
}
button{padding: 1%; border-radius:4px;}
button:hover{
    background-color: var(--gris00000);
    color: var(--turquesa0);
}
::placeholder{
    color: var(--gris00002);
}
a{
    text-decoration: none;
    text-decoration-color: none;

}
img{
    width: 100%;
}
.sombraazul{
    -webkit-box-shadow: 5px 5px 0px 0px var(--azul00001), 10px 10px 0px 0px var(--turquesa1), 0px -35px 15px 5px rgba(0,0,0,0); 
box-shadow: 5px 5px 0px 0px var(--azul00002), 10px 10px 0px 0px var(--turquesa2), 0px -35px 15px 5px rgba(0,0,0,0);
}
/**************************
*** Emergentes
**************************/
#vemergente{
    position:fixed;
    background-color: var(--gris00002);
    color: var(--blanco000);
    z-index: 500;
    display:none;
}
#vemergente i{
    position:absolute;
    top:2%;
    right: 2%;
}
#vcorreos{
    position:fixed;
    background-color: var(--gris00002);
    color: var(--blanco000);
    z-index: 500;
    display:none;
}
#vcorreos i{
    position:absolute;
    top:2%;
    right: 2%;
}
#contexto{
    background-color: var(--blanco000) !important;
    /*color: var(--blanco000) !important;*/
    padding: 2%;
}
/**************************
*** WEB
**************************/
#menu{
    position:fixed;
}
#admonxx{
    display: none;
}
#nosotxx{
    display: block;
}
#inversio00{
    position: absolute;
    top: 0;
    right: 2%;
}
#inversio01{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#inversio02{
    position: absolute;
    bottom: 0;
    left: .5%;

}
#cuentareg{
    position: fixed;
    bottom: 0;
    z-index: 20000;
}
/**************************
*** Registro
*/
#registro00{
    position:fixed;
}
input[type="file"]#nuestroinput{
    opacity: 1;
    border-radius: 150px;
}
/*label[for="nuestroinput"] {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background-color: var(--turquesa2);
    display: inline-block;
    transition: all .5s;
    cursor: pointer;
    padding: 15px !important;
    text-transform: uppercase;
    width: fit-content;
    text-align: center;
    border-radius: 50px;
}
#nuestroinput label i:hover{
    content: "f029";
}
/**************************
*** Programas
*/
#programas00{
    position:fixed;
}
/************************
*** Menu Principal
*************************/
#optmenu00{
    position:absolute;
    top:11%;
    right:2%;
    z-index: 10000;
}
@media only screen and (max-width:6400px) {
    #admonxx{
        display: block;
    }
    #nosotxx{
        display: none;
    }
}

/********************************************
********** scroll bar ***********************
*********************************************/
::-webkit-scrollbar{ width: 1px; }
::-webkit-scrollbar-button{ width:1px; }