/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 10/02/2018, 12:16:34 PM
    Author     : JuanKarlos
*/
@font-face {
  font-family: 'FreeSans';
  src: url('../letras/freefont-20120503/FreeSans.otf');
}

body {
    /*background-color: #ffa379;*/
    /*background-color: #ffffff;*/
    /*font-family: Rokkitt;*/
    /*font-family: 'FreeSans', fantasy, Arial, Calibri, Verdana, Rokkitt,"Century Gothic", "Bookman Old Style", Helvetica, sans-serif;*/
    font-family: Verdana, Rokkitt, 'FreeSans', "Century Gothic", "Bookman Old Style", Helvetica, sans-serif;
    color: black;

    background: #ffffff;
	  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffffff', EndColorStr='#ffa379');
	  background: -moz-linear-gradient(top, #ffffff, #ffa379);
	  /*background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffa379));*/
	  background: -o-linear-gradient(#ffffff, #ffa379);
	  background: linear-gradient(top, #ffffff, #ffa379);
	  /*width: 90vw;
    margin-left: 5vw;*/
	  /*height: 100vh;*/
	  font-size: 2em;
    /*display: grid;*/
    place-content: center;
    min-height: 100vh;
    margin: 0 auto;
    box-sizing: border-box;

    animation-duration: 3s;
    transition-timing-function: ease-in;
    animation-name: apareciendo; 
  }
    
  @keyframes apareciendo {
    from {
      opacity: 0;
      min-height: 0vh;
    }
    to {
      opacity: 1;
      min-height: 100vh;
    }
  }

/* The animation code */
/*@keyframes example {
  from {background-color: white;}
  to {background-color: orange;}
}*/
@keyframes example {
  from {width: 10%;}
  to {width: 100%};
}

/* The element to apply the animation to */
div .noticias {
  width: 100%;
  /*height: 100px;*/
  /*background-color: red;*/
  animation-name: example;
  animation-duration: 4s;
  transition-timing-function: ease-out;

}


h1 {
  color: #AA4444;
  font-size: 4em;
  font-weight: bold;

}

h2 {
  font-size: 2.5em;
  font-weight: bold;
  color: #AA4444;
}

h3 {
  font-weight: bold;
  color: #AA4444;
}

h4 {
  color: #AA4444;
}

hr {
  width: 100%;
}



p {
  /*text-indent:10px;*/
  color: #AA4444;
  font-size: 15pt;
  text-align: left;
  /*font-family: arial;*/
  padding: 10px;
  border-width: 0px;
  margin: 0;
}

a {
    color: #bb3333;
}
/*p:first-letter {
  font-size: 120%;
  color: #993333;
}*/


.botonimagen {
  background-image:url(../img/facebook2.png);
  background-repeat:no-repeat;
  /*height:16px;
  width:16px;*/
  background-position:center;
}

.btnImg {
  background: url(../img/facebook2.png) no-repeat;
}

.cEstado {
  position: fixed;
  bottom: 60px;
  right: 60px;
  width: 50px;
  height: 50px;
  border-radius: 20px;
  background-color: red;
  color: white;
  border-style: "solid 1px green";
  z-index: 999998;
}

/*.cEstado {
  background-color: red;
  border-radius: 20px;
  color: white;
  font-size: 14pt;
}*/

.input1 {
  color: #AA4444;
  font-size: 15pt;
}

.centrado {
	margin : 10px auto;
	display : block;
}

.cdiv {
  padding: 5px;
  background-color: white;
  border-style: solid;
  border-width: thin;
  border-color: #ffa379;
  border-radius: 20px;
  -moz-border-radius: 20px 20px 20px 20px;
  -webkit-border-radius: 20px 20px 20px 20px;
}

.cdiv0 {
  padding: 5px;
  background-color: white;
  border-style: solid;
  border-width: thin thin 0 thin;
  border-color: #ffa379;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-topright: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.cdiv1 {
  padding: 5px;
  background-color: white;
  border-style: solid;
  border-width: 0 1px 0 1px;
  border-color: #ffa379;
}

.cdiv2 {
  padding: 5px;
  background-color: white;
  border-style: solid;
  border-width: 0 thin thin thin;
  border-color: #ffa379;
  -webkit-border-bottom-left-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.fijo {
    position: absolute;
    margin: 10 px;
    padding: 10px;
    border: #111111 2px solid;
    /*background-color: red;*/
    /*height: 500px;
    width: 700px;*/
    /*top: 100px;
    left: 50px;*/
    border-radius: 20px;
    z-index: 99999;
}

.fijo_arriba {
  position: fixed;
  /*margin-left:  5%;*/
  padding: 0px;
  top: 0;
  /*left: 5%;*/
  width: 100%;
  text-align: center;
  z-index: 9999;
  /*background-image: url("../img/logo.png");*/
}

.fijo_contenido {
  position: absolute;
  margin: 0px;
  top: 52px;
  left: auto;
  width: 100%;
  text-align: center;
  z-index: 9990;
}

/*.parrafo:first-letter{
  font-size:200%;
  color:#993333;
  font-weight: bold;
}*/

.titulo {
    position: absolute;
    top: 36%;
    left: 42%;
    font-size: 24pt;
    color:  firebrick;
}

.logo {
  position: absolute;
  top: 10%;
  left: 25%;
  width: 204px;
  height:64px;
  margin-left: -102px;
  margin-top: -32px;
}

.labeld {
  text-align: right;
}

.menu1 {
  padding: 10px 10px 10px 10px;
  color: maroon;
  font-size: 12pt;
}

.ancho_imagen {
  -ms-interpolation-mode: bicubic; 
  max-width:500px;
  max-height: auto;
  min-width:300px;
  min-height: auto;
  border-style: ridge;
  border-color: #ffa379;
  border-width: 5px;
  padding: 5px;
}

.ancho_imagen1 {
  -ms-interpolation-mode: bicubic; 
  max-width: 97%;
  max-height: auto;
  min-width: 300px;
  min-height:auto;

}

li:hover{
  color: maroon;
  cursor: pointer;
  font-weight: bolder;
  /*background-color: #ffffff;*/
  /*border-radius: 40px;*/
}

li:active {
  /*border-radius: 40px;
  background-color: #ffa3ff;*/
  color: maroon;
}

.activo {
  color: #ff6666;
  font-weight: bolder;
  /*background-color: #ffddff;
  border-radius: 40px;*/
}

.divisor {
  background-color: maroon;
  width: 100%;
  height: 1px;
}

.btnLetra {
    /*font-family: "Courier New";*/
    width: 160px;
}

.divMenuFondo {
    background-color: #aaaaaa;
}

.interlineado0 {
    line-height: 0px;
}

.interlineado1 {
    line-height: 1px;
}

.interlineado2 {
    line-height: 2px;
}

.interlineado3 {
    line-height: 3px;
}

.interlineado4 {
    line-height: 4px;
}

.interlineado5 {
    line-height: 5px;
}

.Contenido {
   /*background-color: red;*/
   position: relative;
   padding: 35%;
   overflow: hidden;
}

.Contenido iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.degradado {
background: -webkit-linear-gradient(#ffa379, #ffffff); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#ffa379, #ffffff); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#ffa379, #ffffff); /* For Firefox 3.6 to 15 */
background: linear-gradient(#ffa379, #ffffff); /* Standard syntax */
color: maroon;
}

.degradado1 {
background: -webkit-linear-gradient(#999999, #111111); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#999999, #111111); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#999999, #111111); /* For Firefox 3.6 to 15 */
background: linear-gradient(#999999, #111111); /* Standard syntax */
font-size: 16pt;

}

.degradado2 {
background: -webkit-linear-gradient(#ffffff, #ffa379); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#ffffff, #ffa379); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#ffffff, #ffa379); /* For Firefox 3.6 to 15 */
background: linear-gradient(#ffffff, #ffa379); /* Standard syntax */
}

.degradado3 {
background: -webkit-linear-gradient(#3333ff, #9999ff); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#3333ff, #9999ff); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#3333ff, #9999ff); /* For Firefox 3.6 to 15 */
background: linear-gradient(#3333ff, #9999ff); /* Standard syntax */
font-size: 16pt;

}

.piepag {
  text-align: center;
  font-style: italic;
  font-size:10pt;
  color: black;
  padding: 0px 0px 0px 10px;
  width: 100%;
}

.imgBoton {
  padding: 2px 0px 0px 0px;
  border-radius: 8px 8px 8px 8px;
  cursor: pointer;
  opacity: 0.8;
}

.imgBoton:hover {
  width: 34px;
  height: 44px;
  opacity: 1.0;
  cursor: pointer;
  /*background-color: #AA4444;*/
}

#active1 {
  background-color: black;
  color: white;
}

#active1:hover {
  background-color: red;
  color: white;
}

#divEstado {
    width: 100%;
    color: black;
    background-color: white;
    margin: 0px;
    padding: 2px;
    /*border-radius: 200px 10px 10px 200px;
   -moz-border-radius: 200px 10px 10px 200px;
   -webkit-border-radius: 200px 10px 10px 200px;
   border: 1px solid #000000;*/
}

#divContenido {
    background-color: white;
}

#divLoguito {
  border-radius: 12px 12px 12px 12px;
 -moz-border-radius: 12px 12px 12px 12px;
 -webkit-border-radius: 12px 12px 12px 12px;
  opacity: 0.7;
  filter: alpha(opacity=70);
}

#l07  {
  margin-right: 10px;
}

@media screen and (min-width: 0px) and (max-width: 400px) {
h1 {
  color: #AA4444;
  font-size: 18pt;
  font-weight: bold;

}

h2 {
  font-size: 14pt;
  /*font-weight: bold;*/
  color: #AA4444;
}

h3 {
  /*font-weight: bold;*/
  font-size: 12pt;
  color: #AA4444;
}

h4 {
  color: #AA4444;
}

hr {
  width: 100%;
}



p {
  /*text-indent:10px;*/
  color: #AA4444;
  font-size: 10pt;
  text-align: left;
  /*font-family: arial;*/
  padding: 10px;
  border-width: 0px;
  margin: 0;
}

}

@media screen and (min-width: 401px) and (max-width: 720px) {
  h1 {
    color: #AA4444;
    font-size: 15pt;
    font-weight: bold;
  
  }
  
  h2 {
    font-size: 11pt;
    /*font-weight: bold;*/
    color: #AA4444;
  }
  
  h3 {
    /*font-weight: bold;*/
    font-size: 9pt;
    color: #AA4444;
  }
  
  h4 {
    color: #AA4444;
  }
  
  hr {
    width: 100%;
  }
  
  
  
  p {
    /*text-indent:10px;*/
    color: #AA4444;
    font-size: 10pt;
    text-align: left;
    /*font-family: arial;*/
    padding: 10px;
    border-width: 0px;
    margin: 0;
  }
  
  }

  @media screen and (min-width: 721px) and (max-width: 1000px) {
    h1 {
      color: #AA4444;
      font-size: 20pt;
      font-weight: bold;
    
    }
    
    h2 {
      font-size: 16pt;
      font-weight: bold;
      color: #AA4444;
    }
    
    h3 {
      /*font-weight: bold;*/
      font-size: 14pt;
      color: #AA4444;
    }
    
    h4 {
      color: #AA4444;
    }
    
    hr {
      width: 100%;
    }
    
    
    
    p {
      /*text-indent:10px;*/
      color: #AA4444;
      font-size: 11pt;
      text-align: left;
      /*font-family: arial;*/
      padding: 10px;
      border-width: 0px;
      margin: 0;
    }
    
    }
  
    @media screen and (min-width: 1001px) {
      h1 {
        color: #AA4444;
        font-size: 24pt;
        font-weight: bold;
      
      }
      
      h2 {
        font-size: 20pt;
        /*font-weight: bold;*/
        color: #AA4444;
      }
      
      h3 {
        /*font-weight: bold;*/
        font-size: 18pt;
        color: #AA4444;
      }
      
      h4 {
        color: #AA4444;
      }
      
      hr {
        width: 100%;
      }
      
      
      
      p {
        /*text-indent:10px;*/
        color: #AA4444;
        font-size: 12pt;
        text-align: left;
        /*font-family: arial;*/
        padding: 10px;
        border-width: 0px;
        margin: 0;
      }
      
      }