@font-face {
 font-family: infantil;
 src: url("fonts/cafeteria-regular.eot") /* EOT file for IE */
}
@font-face {
 font-family: infantil;
 src: url("fonts/cafeteria-regular.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: perpeta;
 src: url("fonts/perpeta.eot") /* EOT file for IE */
}
@font-face {
 font-family: perpeta;
 src: url("fonts/perpeta.ttf") /* TTF file for CSS3 browsers */
}

.titulo {font:35px covate;color:navy;text-decoration:none;text-shadow: 3px 3px 3px gray}
.tituloficha {font-family:arial;font-size:30pt;color:#000;text-decoration:none;}
.tituloaviso1 {font:55px infantil;color:#fff;text-decoration:none;line-height:45px;text-shadow: 3px 3px 3px #000}
.tituloaviso2 {font:45px infantil;color:#fff;text-decoration:none;line-height:40px;text-shadow: 3px 3px 3px #000}
.tituloaviso3 {font-family:arial;font-size:30pt;color:#fff;text-decoration:none;line-height:35px;text-shadow: 3px 3px 3px #000}
.titulo4d {font:90px infantil;color:#ffffff;text-decoration:none;font-weight:bold;text-shadow: 3px 3px 3px #000}
.titulo4e {font:60px infantil;color:#2b65ab;text-decoration:none;font-weight:bold}
.titulo4dx {font:55px infantil;color:#c00000;text-decoration:none;font-weight:bold;text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;}
.titulo4ex {font:40px infantil;color:#c00000;text-decoration:none;font-weight:bold;text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;}
.titulo4f {font:55px infantil;color:#fff;text-decoration:none}
.titulo4f:Hover {font:55px infantil;color:#fff;text-decoration:none}
.titulo5 {font:40px infantil;color:#fff;text-decoration:none}
.titulo5:Hover {font:40px infantil;color:#fff;text-decoration:none}
.datos {font:25px perpeta;color:#000;text-decoration:none;line-height:35px;text-align:justify}
.datos_1 {font:22px perpeta;color:#000;text-decoration:none;line-height:22px}
.datos1 {font-family:arial;font-size:10pt;color:#fff;font-weight:bold;text-decoration:none;line-height:25px}
.datos1a {font-family:arial;font-size:12pt;color:#fff;text-decoration:none;line-height:25px}
.datos2 {font-family:arial;font-size:24pt;color:#fff;text-decoration:none;line-height:40px;}
.datos3 {font-family:arial;font-size:14pt;color:#000;text-decoration:none;line-height:25px;}
.datos_eventos {font-family:arial;font-size:22pt;color:#000;text-decoration:none;line-height:25px;}
.pie {font-family:arial;font-size:23pt;color:#fff;text-decoration:none;line-height:45px}
.pie2 {font-family:arial;font-size:18pt;color:#000;line-height:35px;text-shadow: 2px 2px 2px silver;font-weight:bold}
.plan {font-family:arial;font-size:23pt;color:#000;text-decoration:none}
.titulo_eventos {font:30px infantil;color:#c00000;text-decoration:none}
.pie3 {font-family:arial;font-size:18pt;color:#000;text-decoration:none}

.link {font-family:arial; font-size:11pt;color:#000;text-decoration:none}
.link:Hover  {font-family:arial; font-size:11pt;color:#fff;text-decoration:none}
.link3 {font-family:arial; font-size:22pt;color:blue;text-decoration:none}
.link3:Hover {font-family:arial; font-size:22pt;color:blue;text-decoration:underline}
.link4 {font-family:arial; font-size:13pt;color:#fff;text-decoration:none;font-weight:bold}
.link4:Hover {font-family:arial; font-size:13pt;color:navy;text-decoration:none;font-weight:bold}
.link5 {font-family:arial; font-size:13pt;color:#fff;text-decoration:underline;}
.link5:Hover {font-family:arial; font-size:13pt;color:navy;text-decoration:none;}
.button {font-size:14;font-weight:bold; color:#ffffff; background-color:navy; border-style:outset; border-color:black}
.boxform {font-size:16;font-family:arial;color:navy;background-color:white;border-color:lightblue;border-width:1px;border-style:thin solid;}

.polaroid {    background-color:white;    padding:10px 10px 10px 10px;    border:1px solid #BFBFBF;    box-shadow:10px 10px 20px rgba(0, 0, 0, 0.8);}
.RotarDer {    background-color:white;    padding:10px 10px 10px 10px;    border:1px solid #BFBFBF;    box-shadow:10px 10px 20px rgba(0, 0, 0, 0.8);}
.RotarIzq {    background-color:white;    padding:10px 10px 10px 10px;    border:1px solid #BFBFBF;    box-shadow:10px 10px 20px rgba(0, 0, 0, 0.8);}

.circular { width: 220px; height: 220px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px;}
.circular2 { width: 300px; height: 300px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px;}
.circular_borde { width: 220px; height: 220px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; border:5px solid #fe7f00;}
.circular_borde2 { width: 220px; height: 220px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; border:5px solid #ffffff;}
.circular_shadow { width: 240px; height: 240px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; border:10px solid white; no-repeat; box-shadow:  0 0 8px rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); }

.elemento {
 -webkit-box-shadow: 2px 2px 5px #000;
 -moz-box-shadow:  2px 2px 5px #000;
 box-shadow: 2px 2px 5px #000;
 }
.elemento2 {
 -webkit-box-shadow: 2px 2px 5px #000;
 -moz-box-shadow:  2px 2px 5px #000;
 box-shadow: 2px 2px 5px #000;
background: url(images/azul24.jpg);
background-size: 100% 100%;
background-repeat: repeat;
 }
.vid1 {
     background: url(images/fondo_azul.jpg);
     background-size: 100%;
     background-repeat: no-repeat;
 } 
 .div1 {
     background: url(images/fondo_amarillo.jpg);
     background-size: 100%;
     background-repeat: no-repeat;
 }  

.backg {
     background-size: 100% 100%;
     background-repeat: no-repeat;
     } 
     
.shadow {
font:75px infantil;
color:yellow;
text-decoration:none;
text-shadow: 0 0 10px #ffffff,
                   0 0 20px #ffffff,
                   0 0 30px #ffffff,
                   0 0 30px #ffffff,
                   0 0 30px #ffffff,
                   0 0 30px #ffffff,
                   0 0 30px #ffffff,
                   0 0 30px #ffffff;
}
.texto_iluminado {
-moz-box-shadow: 0px 0px 40px #10253f; 
-webkit-box-shadow: 0px 0px 40px #10253f; 
box-shadow: 0px 0px 40px #10253f;
      
padding: 10px;
border: 1px solid #10253f;
width: 160px;
margin: 40px;
background-color: #10253f;
    }

.backg2 {
     background-size: 100% 100%;
     background-repeat: no-repeat;
 } 
.backg3 {
     background: url(images/fondo2.jpg);
     background-size: 100% 100%;
     background-repeat: no-repeat;
     font:20px arial;
     color:#ffffff;
     text-decoration:none;
     text-shadow: 3px 3px 3px #000000;
 }  
 
.icono-email {
background: white;  /* Fondo del icono */
box-sizing: border-box;
width: 40px;  /* Alto del icono */
height: 30px;  /* Ancho del icono */
border: 1px solid #777;  /* Borde del icono */
border-radius: 2px;
box-shadow: 1px 1px 3px rgba(0,0,0,.095);  /* Sombra */
position: relative;
}
.icono-email:before, .icono-email:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
}
.icono-email:before {
border: 19px solid transparent;
border-top: 20px solid #777; /* Color igual a color de borde */
}
.icono-email:after {
border: 18px solid transparent;
border-top: 19px solid white;  /* Color igual a color de fondo */
left:1px;
}

.fade {
   width: 300px; height: 300px; border-radius: 300px; -webkit-border-radius: 300px; -moz-border-radius: 300px;
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }
.fade:hover {
   width: 300px; height: 300px; border-radius: 300px; -webkit-border-radius: 300px; -moz-border-radius: 300px;
      opacity: 0.3;
      } 

.imagen {
.filter: invert(0.4) sepia(1) hue-rotate(20deg) saturate(1000%);
}