*{
     box-sizing: border-box;
     border-style: none;
     margin:0%;
     padding:0%;
     font-family: 'Poppins', sans-serif;
     line-height: 1.5;
     color: black; /*slategray*/
     transition: all .3s;
     -webkit-tap-highlight-color: transparent;
}

html, body {height: 100%;}

body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: white;
}

main {
    flex: 1;
    overflow: auto;
}

a {text-decoration: none;}

.franja{
  position: sticky;
  top:0%;
  width:100%;
  overflow: hidden;
  background-color: white;
}

.navegacion{
  padding-right: 5%;
  text-align: right;
  background-color: white;
}

.navegacion ul{
list-style:none;
}

.menu{
display:block;

}
.menu > li{
  position: relative; 
  display: inline-block;
  margin-left: 2%;
  text-align: left;
}

.menu > li > a {
position:relative;
display: block;
text-decoration: none;
}



.row::after {
     content: "";
     clear: both;
     display: table;
}
   
[class*="col-"] {
     float: left;
     padding: 0%;
}
   
/* For mobile phones: */
[class*="col-"] {
     width: 100%;
}

.encabezado{
  background-image: url(irf.png);
  background-repeat: no-repeat;
  background-size: auto 90%;
  margin-left: 10%;
  margin-bottom: 1%;
  height: 7em;
  overflow: hidden;
}

.encdiv{
  font-size: larger;
  margin-left: 3em;
  margin-top: 3.1em;
}


.cuerpo{
  font-size: small;
  max-height: 90%;
}

.cuerpo > li {
  padding-left: 3em;
  text-indent: -1.4em;
}


.filainicio{
  display: flex;
  width: max-content;
  height: 30em;
}

.contenedorinicio{
  background-repeat: no-repeat;
  background-size: cover;
}

.nombreinicio{
  display: flex;
  float: right;
  font-size: xx-large;
  position: relative;
  top: 35%;
  right: 5%;
  max-width: 40%;
  text-align: right;
}



.cabecera{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: x-large;
  position: sticky;
  top: 0;
  padding-top:3%;
  padding-bottom: 3%;
  background-color: white;
}

.volver{
  margin-right: 1%;
  font-size: larger;
  cursor: pointer;
  user-select: none;
}

.marcoseccion{
  background-repeat: no-repeat;
  background-size: auto 60%;
  background-position: center;
  height: 9em;
  display: flex;
  justify-content: center;
  cursor: pointer;
  margin: auto;
}

.txtseccion{
  font-size: medium;
  color: white;
  display: flex;
  align-self: center;
}

.marcocuadro{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 26em;
  margin: 10%;
  cursor: pointer;
}

.txtcuadro{
  text-align: center;
  font-size: small;
}

p{color: inherit}

.nombrecuadro{
  font-weight: bold;
  font-size: larger;
  color: inherit;
}

.cortina {
  display: none;
  position: fixed;
  left: 0%;
  top: 0%;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.95);
}

.lateral{
  width:10%;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

/*.imgflecha{                 
    display:block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    opacity: 0.5;
    scale: 50%;
}*/

.simbolo{
  font-size: x-large;
  color: lightgrey;
  margin:auto;
  user-select: none;
}

.rowcarr{
    display: inline-flex;
    width: 100%;
    height: 70%;
  }

.contenedor{
  display: flex;
  width:80%;
  height:80%;
  margin:auto;
  align-items: center; /*tb puede servir align-content*/
  user-select: none;
}

.imagen {
  margin: auto;
  max-height: 100%;
  max-width: 100%;
}


.lateral1{
  text-align: center;
}

.imagenlateral{
  display: flex;
  margin: auto;
  height: 20em;
  /* background-image: url(frente.png); */
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
}

.bio{
  font-size: medium;
  padding: 10%;
  padding-top: 0;
}

.pie{
  font-size: small;
  text-align: center;
}

.colpie{
  padding: 0.4em;
  padding-bottom: 0;
}

.cortinacarga{
  position: fixed;
  left: 0%;
  top: 0%;
  width:100%;
  height:100vh;
  background:white;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 70%;
}

/* For tablets: */
@media only screen and (min-width: 600px) {
     .col-s-1 {width: 8.33%;}
     .col-s-2 {width: 16.66%;}
     .col-s-3 {width: 25%;}
     .col-s-4 {width: 33.33%;}
     .col-s-5 {width: 41.66%;}
     .col-s-6 {width: 50%;}
     .col-s-7 {width: 58.33%;}
     .col-s-8 {width: 66.66%;}
     .col-s-9 {width: 75%;}
     .col-s-10 {width: 83.33%;}
     .col-s-11 {width: 91.66%;}
     .col-s-12 {width: 100%;}
     [class*="col-"] {padding: 2%;}
}

/* For desktop: */
@media only screen and (min-width: 768px) {
     .col-1 {width: 8.33%;}
     .col-2 {width: 16.66%;}
     .col-3 {width: 25%;}
     .col-4 {width: 33.33%;}
     .col-5 {width: 41.66%;}
     .col-6 {width: 50%;}
     .col-7 {width: 58.33%;}
     .col-8 {width: 66.66%;}
     .col-9 {width: 75%;}
     .col-10 {width: 83.33%;}
     .col-11 {width: 91.66%;}
     .col-12 {width: 100%;}
     [class*="col-"] {
       padding: 2%;
       padding-top: 0;
      } /*2%*/
    .lateral1{
      overflow: initial;
      text-align: center;
      position: sticky;
      top: 0;
      border-top: solid;
      border-color: white;
      border-width: 1em;
    }
    .cuerpo {font-size: medium;   padding-top: 0;}
    .imagenlateral {
      height: 25em;
    }
    .marcoseccion{
      background-size: contain;
      max-width: 18em;
    }
    .marcocuadro{height:8em; margin:0;}
    .simbolo{font-size: xxx-large;}
    .txtseccion{font-size: larger;}
    .bio{font-size: small;}
    .lat3{text-align: right; margin-right: 5%;}
    .pie {padding:0}
    .nombreinicio{
      top: 30%;
      text-align: right;
    }
    .cortinacarga{background-size: auto 100%;}

}

@media screen and (max-width: 780px) and (orientation: landscape) {
  .body {
    display: none;
  }
}