@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&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-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}
*{
    margin: 0;
    padding: 0;
    font-size: 100%;
    max-width: 100%;
    font-weight: normal;
    border-radius: 0;
    outline: none;
    box-sizing: border-box;
}
:root{
    --amarillo0: rgba(167, 145,  72,   1);
    --amarillo1: rgba(167, 145,  72, .25);
    --amarillo2: rgba(167, 145,  72, .50);
    --amarillo3: rgba(167, 145,  72, .75);
    --azul00000: rgba( 48,  88, 166,   1);
    --azul00001: rgba( 48,  88, 166, .25);
    --azul00002: rgba( 48,  88, 166,  .5);
    --azul00003: rgba( 48,  88, 166, .75);

    --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);
    
    --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);
    --verde0001: rgba( 54, 166, 146, .25);
    --verde0002: rgba( 54, 166, 146, .50);
    --verde0003: rgba( 54, 166, 146, .75);
    
    --gris00000: rgba(133, 146, 158,   1);
    --gris00001: rgba(133, 146, 158, .75);
    --gris00002: rgba(133, 146, 158,  .5);
    --gris00003: rgba(133, 146, 158, .25);

    --rojo00000: rgba(252,   3,   3,   1);
    --rojo00001: rgba(252,   3,   3, .25);
    --rojo00002: rgba(252,   3,   3, .50);
    --rojo00003: rgba(252,   3,   3, .75);

    --cafe00000: rgba( 65,  42,   2,    1);
    --cafe00001: rgba( 65,  42,   2,  .25);
    --cafe00002: rgba( 65,  42,   2,  .50);
    --cafe00003: rgba( 65,  42,   2,  .75);
}
html{
    color:var( --cafe00000);
}
.fondoamarillo{
    background-color: var(--amarillo0);
    color: var(--blanco000);
}
.fondoamarillo001{
    background-color: var(--amarillo1);
    color: var(--cafe00000);
}
.fondoamarillo002{
    background-color: var(--amarillo2);
    color: var(--cafe00000);
}
.fondoamarillo003{
    background-color: var(--amarillo2);
    color: var(--blanco000);
}
.fondoazul{
    background-color: var(--azul00000);
    color: var(--blanco000);
}
.fondoazul001{
    background-color: var(--azul00001);
    color: var(--blanco000);
}
.fondoazul002{
    background-color: var(--azul00002);
    color: var(--blanco000);
}
.fondoazul003{
    background-color: var(--azul00003);
    color: var(--blanco000);
}
.fondogris{
    background-color: var(--gris00000);
    color: var(--blanco000);
}
.fondogris001{
    background-color: var(--gris00001);
    color: var(--blanco000);
}
.fondogris002{
    background-color: var(--gris00002);
    color: var(--cafe00003);
}
.fondogris003{
    background-color: var(--gris00003);
    color: var(--blanco000);
}
.fondorojo{
    background-color: var(--rojo00000);;
    color: var(--blanco000);
}
.fondorojo001{
    background-color: var(--rojo00001);;
    color: var(--blanco000);
}
.fondorojo002{
    background-color: var(--rojo00002);;
    color: var(--blanco000);
}
.fondorojo003{
    background-color: var(--rojo00003);;
    color: var(--blanco000);
}
.fondoverde{
    background-color: var(--verde0000);
    color: var(--blanco000);
}
.fondoverde001{
    background-color: var(--verde0001);
    color: var(--blanco000);
}
.fondoverde002{
    background-color: var(--verde0002);
    color: var(--blanco000);
}
.fondoverde003{
    background-color: var(--verde0003);
    color: var(--blanco000);
}
.fondoturquesa{
    background-color: var(--turquesa0);
    color: var(--blanco000);
}
.fondoturquesa001{
    background-color: var(--turquesa1);
    color: var(--blanco000);
}
.fondoturquesa002{
    background-color: var(--turquesa2);
    color: var(--blanco000);
}
.fondoturquesa003{
    background-color: var(--turquesa3);
    color: var(--blanco000);
}
.fondonegro{
    background-color: var(--negro0000);
    color: var(--blanco000);
}
.fondonegro001{
    background-color: var(--negro0001);
    color: var(--blanco000);
}
.fondonegro002{
    background-color: var(--negro0002);
    color: var(--blanco000);
}
.fondonegro003{
    background-color: var(--negro0003);
    color: var(--blanco000);
}

.fondocafe{
    background-color: var(--cafe00000);
    color: var(--blanco000);
}
.fondocafe001{
    background-color: var(--cafe00001);
    color: var(--blanco000);
}
.fondocafe002{
    background-color: var(--cafe00002);
    color: var(--blanco000);
}
.fondocafe003{
    background-color: var(--cafe00003);
    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;}
.bordecafei{border-left: solid var(--cafe00000) 3px;}
.bordecafed{border-right: solid var(--cafe00000) 3px;}
.bordecafea{border-top: solid var(--cafe00000) 3px;}
.bordecafeb{border-bottom: solid var(--cafe00000) 3px;}
html{
    color: var( --cafe00000);
    font-family: "Ubuntu", sans-serif;
    font-weight: 700;
    font-style: normal;
    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;   
    padding:.75%;
}
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;
    cursor: pointer; 

}
.cmenu:hover{
    /*text-decoration: none;*/
    background-color: var(--amarillo001);
    color: var(--blanco000);
    border-radius: 5px;
    cursor: pointer; 
}
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);
}
#servicios{
    cursor: pointer;
}
#servicio0101, #servicio0201, #servicio0301, #servicio0401{
    background: linear-gradient(to bottom, rgb(0 0 0 /.25),rgb(0 0 0 /.25));
    color: var(--blanco000);
    font-weight: bolder;
}
/**************************
*** 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(--negro0001);
    color: var(--blanco000);
    padding: 2%;
}
/**************************
*** Programas
*/
#programas00{
    position:fixed;
}
/************************
*** Menu Principal
*************************/
#optmenu00{
    position:absolute;
    top:11%;
    right:2%;
    z-index: 10000;
}
@media only screen and (max-width:640px) {
    *{
        width: 100%;
        height: auto;
    }
    #redes *{
        width: 100%;
        height: auto;
    }
    #menu{
        display: none;
    }
    #menuver{
        display: block;
    }
    #xcontacto{
        display: none;
    }
    #xredes{
        display: none;
    }
    .ancho02{width: 100%;}
    .ancho05{width: 100%;}
    .ancho10{width: 100%;}
    .ancho15{width: 100%;}
    .ancho20{width: 100%;}
    .ancho23{width: 100%;}
    .ancho25{width: 100%;}
    .ancho28{width: 100%;}
    .ancho30{width: 100%;}
    .ancho35{width: 100%;}
    .ancho40{width: 100%;}
    .ancho45{width: 100%;}
    .ancho50{width: 100%;}
    .ancho55{width: 100%;}
    .ancho60{width: 100%;}
    .ancho65{width: 100%;}
    .ancho70{width: 100%;}
    .ancho75{width: 100%;}
    .ancho80{width: 100%;}
    .ancho85{width: 100%;}
    .ancho90{width: 100%;}
    .ancho95{width: 100%;}
    .ancho00{width: 100%;}
}

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