:root{
    --white: #f9f9f9;
    --black: #828590;
    --gray: #85888C;
} /* variables*/

* {
  transition: 250ms;
}
 .tls{
    font-family:oyen77;
    color: #44B09E;
    }

.nav{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: var(--black);
    overflow: hidden;

}
.menu a{
    display: block;
    padding: 30px;
    color: var(--white);
}
.menu a:hover{
    background-color: var(--gray);
}
.nav{
    max-height: 0;
    transition: max-height .5s ease-out;
}

/* Menu Icon */
.hamb{
    cursor: pointer;
    float: right;
    padding: 40px 20px;
}/* Style label tag */

.hamb-line {
    background: var(--white);
    display: block;
    height: 2px;
    position: relative;
    width: 24px;

} /* Style span tag */

.hamb-line::before,
.hamb-line::after{
    background: var(--white);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.hamb-line::before{
    top: 5px;
}
.hamb-line::after{
    top: -5px;
}

.side-menu {
    display: none;
} /* Hide checkbox */

/* Toggle menu icon */
.side-menu:checked ~ nav{
    max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}
 #pico{
font-size: 14px;
  font-family: century;
  top: 12.7vh;
  position: fixed;
  left: 22px;
  align-content: normal;
  display: flex;

  }
body {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
    font-family: courier, sans-serif;
    background-image: url("./igm/ibeimo.jpg");
      background-repeat: no-repeat;
      background-position: center right;                                                                                                    
      background-attachment: fixed;

}
         .nogales {
font-size: 14px;
z-index:4  ;
  font-family: century;
  top: 15.75vh;
  margin:0.6px;
  position: fixed;
  left: 22px;
  align-content: normal;
  display: flex;
   background-color:  brown; 
  }

@font-face {
font-family:circunferencia;
src: url(fonts/cirncunferencia.eot) ;}
@font-face {font-family:circunferencia;
src: url(fonts/cincunferencia.ttf) format("opentype"); }



     p {
  margin: 0 5px 10px;
  padding: 5px;
  
}

article,.columna_derecha {


		-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;

	}
    
   article {

        font-size:24px;
        font-family:ouuye9843;
        z-index: 2;

	}
        .columna_derecha{
        font-family:ouuye9843;
        }
         
       article  p {
       font-size: 23px;
       color: #44B09E;
       text-align: left;
       font-family:oyen77;
    
       }
    
       
    sectiona h1{
    color:#FEF9E7;
    }


    .tls{
    font-family:oyen77;
    color: #44B09E;
    }

   
     .barra {
    font-family: 'Lato', sans-serif;
    /**Alto y ancho de donde se va a activar cuando pase el mouse**/
    width:10%;
    height:7%;
    /*Para que este siempre en la misma parte de la pantalla aunque se haga scroll*/
    position:fixed;
    /*Tiempo en el que va a transitar la animacion*/
    transition: .4s all ;
    /*este arriba de todo en la pantalla*/
    z-index: 1;  
}

.barra ul{
    /*solucionar espacios no deseados*/
    padding:0px;
    text-align: center;
        
}
.barra  li{
    /*Velocidad de transicion del contenido*/
    transition:all .3s;
    list-style: none; 
}

.barra a{
    text-decoration: none;
    
    font-weight: normal;
    
    /*La letra crece con el menu de esta manera no se va a ver como se ajusta al margen mientras crece*/
    transition: .3s all ;
    /*Se ocultan los elementos*/
    font-size: 0px;
    padding:0px;
}

.barra  h2{
    text-align: center;
    color:darkgreen;
    padding:7px;
    padding-bottom:7px;

    /*Se oculta el h2*/
    font-size:0px;   
}

.barra img{
    padding-top: 30px;
    padding-left: 10px;
}

.barra:hover{
    /*Tamaņo cuando el cursor seņale la barra*/
    width: 70%;
    height: 100vh;
    
    /*Color*/
    background: rgba(5, 33, 51, 0.98);
}
.barra:hover h2{
    /*posicion dentro de barra del h2*/
    padding:15px;
    font-size: 35px;
}
.barra:hover a{ 
    font-size:20px ;
    color:purple;
    /*Se usa el display block para que el enlace respete el margin*/
    display: block;
    padding:20px;
}
.barra:hover img{
    /*Desaparecer la imagen*/
    height:0px;
}


.barra:hover li{
    border-top:1px solid #03121b;
    /*Espacios entre las lineas y el contenido*/
    
    width:100%;
        
}
.barra:hover ul:last-of-type{


    border-bottom: 1px solid #03121b;
}

.barra:hover a:hover{ 
    font-size: 25px;
    padding: 30px 0px; 
    background: rgba(23, 78, 112, 0.98);  
}
 .textograndezote {
  left: -16vw;
  height: 40%;
  width: 69vw;
}
/*ENCABEZADO*/
header {
  background-color: #b0bdc9;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #b6b5b5;
  font-family: sans-serif, "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", courier, ;
    z-index: 1;
}

main {
  background-color: aliceblue;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/*ELEMENTOS HEADER*/
ul {
  list-style: none;
  display: flex;
}

a {
  text-decoration: none;
  color: white;
}

.enlap {
    text-decoration: none;
    color: #ffffff;
    font-size: 12px;
    background-color: #40596fdb;}

a:hover {
  color: #666c6f;
}

.header_icon {
  height: 80px;
}

/*SECCIONES ARTICULOS*/
section {
  display: flex;
  flex-direction: column;
  padding-left: 15px;
  padding-right: 15px;
}

article {
  border-bottom: 0px solid #b6b5b5;
  margin-bottom: 4px;
   font-family:ouuye9843;
}

p {
  text-align: center;
  font-size: 15px;
}

.img_article {
  width: 100%;
}

.img_derecha {
  width: 100%;
}

/*FOOTER*/
footer {
  background-color: #5f5f5f;
  width: 100%;
  padding:2px;
  margin: 2px;
  text-align: center;
  color: #85888c;
  font-family: candara, "Gill Sans MT", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  
}

li .pico{
position:relative;
}
/**************************/
/**************************/
/*MEDIA QUERIES*/

/*hasta 599px*/
@media screen and (max-width: 599px) {
  /*ENCABEZADO*/
              
                         
  .header {
    width: 97%;
    height: 61px;
    font-size: 14px;
  }                                                                             
  width: 54vw;
  }
  
  article .main {
  height: 85vh;
    width: 90vw;
    }
  footer a{
  font-family: candara;
  }

  li {
        padding: -17px;
    margin: -1px;
  }

  /*CONTENIDO*/
  main {
    flex-direction: column;
    width: 98%;
    padding-top: 10px;
    margin-top: 4%;
    display:flex;
    box-sizing: border-box;
  }

  section {
    width: 90%;
  }

  /*COLUMNA DERECHA*/
  .columna_derecha {
    display: flex;
    flex-direction: column;
    width: 90%;
  }

  .popular_stories {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: baseline;
    width: 100%;
  }

  .story_article {
    width: 45%;
  }
  
.fondprinc {
        position: absolute;
    top: -41vh;
    left: -2%;
    width: 70vw;
    height: 70vh;
    display: inline-flex;
}
    
  
   .imges{
  width:75vw;
  height: 52vh;
  }
  .col {
  width:40%;

  
  }
  .main{
          background-color: #70b2d9;
    background-image: linear-gradient(315deg, #b0b9ff 0%, #4b9b8580 74%);
    height:80%;
    width: 98vw;}
    
    .divtextualnos{
          background-color: #70b2d9;
    background-image: linear-gradient(315deg, #b0b9ff 0%, #4b9b85bf 74%);
    height:91%;
    width: 95vw;
    }
    
    .grid_2_of_2{ width: 30%;
height: 500px;
padding-left:3px;
padding-right:10%;opacity: 70%; }


  .textograndezote {
    left: -16%;
    height: 47%;
    width: 100vw;
    
}
          main{
    flex-direction: row;     }
      
   .logo{ font-size: 25px;
   font-family: fontreld;}  
  }
  
  .trabj{
z-index:1;
width: 14px;
height:11px;
left: 2px;
    position: inherit;
    top: 11%;
     font-size: 23px;
    }
  
  .grid_2_of_2{ width: 30%;
height: 500px;
padding-left:3px;
padding-right:30%;opacity: 70%; }

}

.col {
  background: #eee;
  display: block;
  float:left;
  margin: 1% 0 1% 4%;
}
.col:first-child { margin-left: 0 !important; width: 23%;}

/* Row */
.row:before,
.row:after { content:""; display:table; }
.row:after { clear:both;}
.row { zoom:1; /* For IE 6/7 */ }

/* Grid */
.grid_1_of_2{ width: 20%;
height: 500px;
padding-left:3px;
padding-right:0.9px;
opacity: 70%;}

.grid_2_of_2{ width: 30%;
height: 500px;
padding-left:3px;
padding-right:30%;opacity: 70%; }

.grid_3_of_2{ width: 30%;
height: 500px;padding-right:30%;
padding-left:3px;opacity: 70%;}

.grid_4_of_2{ width: 30%;
height: 500px;
padding-left:3px;opacity: 70%}  

/*************************/

/*desde 600 hasta 1199px*/
 /*@media only screen and (min-width: 600px) and (max-width: 1199px) {
 
  header {
    width: 90%;
    height: 85px;
    font-size: 16px;
  }

  li {
    padding-right: 10px;
  }

  main {
    flex-direction: row;
    flex-wrap: wrap;
    width: 90%;
    padding-top: 20px;
  }

  section {
    width: 43%;
  }

  .columna_derecha {
    display: flex;
    flex-direction: column;
    width: 90%;
  }

  .popular_stories {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: baseline;
    width: 100%;
  }

  .story_article {
    width: 22%;
  }


  footer {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
              */

    /*CONTENIDO*/
/*@media only screen and (min-width: 1200px) {
  ENCABEZADO
  header {
    width: 80%;
    min-width: 800px;
    height: 90px;
    font-size: 18px;
  }

.textograndezote[
top:25vh:
}

]

  li {
    padding-right: 20px;
  }

  
  main {
    width: 80%;
    min-width: 800px;
    padding-top: 30px;
  }

  /*COLUMNA DERECHA
  .columna_derecha {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    width: 65%;
  }

  /*FOOTER
  footer {
    padding-top: 2px;
    padding-bottom: 2px;
  }
}        
  */ */
/*************************/

/*desde 600 hasta 1199px*/
 /*@media only screen and (min-width: 600px) and (max-width: 1199px) {
 
  header {
    width: 90%;
    height: 85px;
    font-size: 16px;
  }

  li {
    padding-right: 10px;
  }

  main {
    flex-direction: row;
    flex-wrap: wrap;
    width: 90%;
    padding-top: 20px;
  }

  section {
    width: 43%;
  }

  .columna_derecha {
    display: flex;
    flex-direction: column;
    width: 90%;
  }

  .popular_stories {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: baseline;
    width: 100%;
  }

  .story_article {
    width: 22%;
  }


  footer {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
              */

    /*CONTENIDO*/
/*@media only screen and (min-width: 1200px) {
  ENCABEZADO
  header {
    width: 80%;
    min-width: 800px;
    height: 90px;
    font-size: 18px;
  }

.textograndezote[
top:25vh:
}

]

  li {
    padding-right: 20px;
  }

  
  main {
    width: 80%;
    min-width: 800px;
    padding-top: 30px;
  }

  /*COLUMNA DERECHA
  .columna_derecha {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    width: 65%;
  }

  /*FOOTER
  footer {
    padding-top: 2px;
    padding-bottom: 2px;
  }
}        
  */ */