@font-face {
    font-family: restaurante;
    src: url(./font/Restaurant.otf);
  }
  @font-face{
    font-family: futuraBold ;
    src: url(./font/FuturaStd-Bold.otf);
  }
  @font-face{
    font-family: futuraLight ;
    src: url(./font/FuturaStd-Light.otf);
  }
  @font-face{
    font-family: futuraMedium ;
    src: url(./font/FuturaStd-Medium.otf);
  }
  /*MODAL*/
  .modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  /* Modal Content/Box */
  .modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
  text-align: center;
  }

  /* The Close Button */
  .close {
  color: red;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
  }

  .close:hover,
  .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
  }
  .loader {
  background: url(./img/logo.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 25rem;
  height: 7rem;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin: auto;
}
#loading{
margin-top: 15rem;
}
  body{
    font-family: futuraMedium;
}
  /*Fondo landing*/
.landing{
    background: url("./img/fondo.jpg");
background-size: cover;
background-position: center ;
min-height: 50rem;
}
.blockchain{
    background: url("./img/blockchain.jpg");
background-size: cover;
background-position: center ;
min-height: 20rem;
}
.ia{
    background: url("./img/ia.jpg");
background-size: cover;
background-position: bottom ;
min-height: 25rem;
}
.internet{
    background: url("./img/internet-of-things.jpg");
background-size: cover;
background-position: center ;
min-height: 25rem;
}
.vacuna{
    background: url("./img/vacuna.jpg");
background-size: cover;
background-position: center ;
min-height: 25rem;
}
.empresa{
    background: url("./img/empresa.jpg");
background-size: cover;
background-position: center ;
min-height: 25rem;
}
.china{
    background: url("./img/china.jpg");
background-size: cover;
background-position: center ;
min-height: 25rem;
}
.iese{
    background: url("./img/Logo-IESE.png");
    background-size: contain;
    background-position: center;
    BACKGROUND-REPEAT: NO-REPEAT;
min-height: 25rem;
}
.codigo{
    background: url("./img/codigo.jpg");
background-size: cover;
background-position: center ;
min-height: 25rem;
}
.covid2{
    background: url("./img/covid.jpg");
background-size: cover;
background-position: center ;
min-height: 25rem;
}
.transformacion{
    background: url("./img/change.jpg");
background-size: cover;
background-position: center ;
min-height: 25rem;
}
.profesor{
    background: url("./img/oscar3.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center ;
min-height: 25rem;
}
.conferencias{
    background: url("./img/oscar4.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center ;
min-height: 25rem;
}
.Nosotros{
min-height: 50rem;
}
#logoGrande{
    margin: auto;
     width: 50%;

}
/*NAVBAR*/
#myTopnav{
    /*position: fixed;*/
    width: 100%;
    z-index: 1;
}
.nav-item a{
    color: black !important;
}
#redSocial{
    height: 27px;
    margin-top: auto;
    margin-bottom: auto;
}
.alturaNav{
      max-width: 30%;
    max-height: 4rem;
}
.alturaNav img{
    width: 15%;
    margin-left: 15rem;
}
.scrolled{
    background-color: rgb(1,159,230, .6);
    position: fixed;
    width: 100%;
    z-index: 1;
  }

  /*CONTENEDOR*/
  #contacto{
    background: #C9DAC5;
  }
  #contacto .contenedor{
    border-top: none;

  }
  .contenedor{
    border-top: 2px solid grey;
  }
  /*SOBRE OSCAR*/
  .info-oscar{
      margin: 5rem 0;
  }
  .gris{
      background-color: #E7E5E5;
      height: 50rem;
      display: grid;
      place-items: center;
    }
  .gris img{
    width: 70%;
    margin-left: 30rem;
  }
  .sobre-oscar{
      padding: 0 10rem;
  }
  .sobre-oscar h3{
      margin-top: 5rem;
      font-weight: bold;
  }
  /*ARTICULOS*/
  #galeria1 {
            margin: 1rem auto;
            width:100%;
            max-width:960px;
            column-count: 2;
        }
  #galeria2 {
            margin: 1rem auto;
            width:100%;
            max-width:960px;
            column-count: 1;
        }
  #galeria {
    padding: 3rem 0;
}
#galeria a{
    color: black;
}
.columna1, .columna2, .columna3, .columna4, .columna5{
    border-right: 2px solid #bbb;
}
figcaption{
    font-weight: bold;
    font-size: 1.5rem;
}
/*LIBROS*/
.libros{
    margin: 5rem 0;
}
.libros h1{
    font-weight: bold;
    margin-bottom: 3rem;
}
/*AREAS*/
.areas h1{
    font-weight: bold;
    margin-bottom: 3rem;
    margin-top: 3rem;
}
/*SERVICIOS*/
#servicios a{
  color: black;

}
.servicios{
    padding: 5rem;
    background: #C9DAC5;
}
.servicios h1{
    font-weight: bold;
    margin-bottom: 3rem;
}
.servicios h3{
    font-weight: bold;
    margin-bottom: 1rem;
}
.servicios p{
    margin-top: 1rem;
}
.consejero{
margin-left: auto;
}
.escritor{
    margin-right: auto;
}
/*CONTACTO*/
.suscribete h1{
    color: black;
    text-align: center;
  }
  .contacto .contenedor {
      margin: 5rem auto;
      box-sizing: border-box;
  }
  .contacto .empresaNosotros {
      border-top: 5px solid #FFC258;
      width: 242px;
      margin-bottom: 0.5rem;
      margin: 1rem auto;
  }
  .contacto .row{
    margin-top: 1rem;
      width: 90%;
      margin: 1rem auto;
  }
  .widthForm{
    width: 50rem;
  }
  .boton{
    width: 7rem;
      border: 1px #212735;
      background: #FFC258;
      color: #212735;
      margin: 3rem 0;
      height: 3rem;
      border-radius: 8px;
      box-shadow: 0 12px 16px 0 rgb(255,194,89,.4), 0 17px 50px 0 rgb(255,194,89,.19);
    }
    .boton:active {
    background-color: #FFC258;
    box-shadow: 0 5px #FFC258;
    transform: translateY(4px);
    border:none;
  }
  .boton:focus {
  outline: none;
  }
  .textarea{
    width: 95%;
    margin: auto;
  }
  textarea {
    width: 100%;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    resize: none;
}
#editor .contenedor {
    margin: 5rem;
    box-sizing: border-box;
        width: 100%;
}
#editor textarea {
  width: 100%;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  height: 50rem;
  resize: auto;
}
  /*QUIEN ES OSCAR*/
  .nosotrosIzquierda1{
    display: grid ;
    place-items: center;
  }
  .nosotrosIzquierda2{
    display: grid ;
    place-items: center;
  }
  .nosotrosIzquierda{
    display: grid ;
    place-items: center;
    margin: auto;
  }
  .nosotrosIzquierda2 img{
      margin: 10rem 0;
  }
  .rownosotros h2{
      font-weight: bold;
  }
  #textoNosotros{
    margin-top: 5rem;
    padding-right: 5rem;
  }
/*FOOTER*/
.footer{
    padding: 3rem 0;
    background: black;
}
.copy-info{
    margin-top: 0.5rem;
    text-align: center;
    color: white;
}
.copy-info a{
    color: white;
}
.fotos{
    text-align: center;
    margin-top: 2rem;
    margin:auto;
}
.redes{
    margin: 10rem auto;
}
#articulos a{
    color: black;
}
.textoArticulo{
    padding: 5rem 15rem;
}
.textoArticulo a{
    color: black;
}
@media screen and (max-width: 600px) {
  #conferencia{
    margin-top: 3rem;
  }
  #galeria1 {
            margin: 1rem auto;
            width:100%;
            max-width:960px;
            column-count: 1;
        }
  #galeria2 {
            margin: 1rem auto;
            width:100%;
            max-width:960px;
            column-count: 1;
        }
#iframe{
    width: 250px !important;
    height: auto !important;
}
    .alturaNav img {
        width: 50%;
        margin-left: 0;
    }
    .landing{
        background: url("./img/fondoMovil.jpg");
    background-size: cover;
    background-position: center ;
    min-height: 50rem;
    }
    .gris {
        background-color: #E7E5E5;
        height: 25rem;
        display: grid;
        place-items: center;
    }
    .gris img {
        width: 100%;
        margin-left: 0;
    }
    .sobre-oscar {
        background-color: #E7E5E5;
        padding: 0;
    }

    .columna1, .columna2, .columna3, .columna4, .columna5{
        border-right: none;
        border-bottom: 2px solid #bbb;
    }
    #textoNosotros {
        text-align: justify;
        margin-top: 5rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .redes{
        margin: 0 auto;
    }
    .twitter{
        margin-top:2rem;
    }
    .twitter img{
        width: 100%;
    } .linkdin img{
        width: 100%;
    }
    .linkdin{
        margin-top:2rem;
        margin-bottom: 2rem;
    }
    #articulos img{
        width: 100%;
    }
    .textoArticulo {
        padding: 0;
    }
}
@media only screen and (min-width: 500px) and (max-width: 900px) {

    .alturaNav img {
        width: 50%;
        margin-left: 0;
    }
    .sobreNosotros{
        margin-left: auto;
    }
    .landing{
        background: url("./img/fondoIpad.jpg");
    background-size: cover;
    background-position: center ;
   /* min-height: 50rem;*/
    }
    .gris {
        background-color: #E7E5E5;
        height: auto;
        display: grid;
        place-items: center;
    }
    .gris img {
        width: 100%;
        margin-left: 5rem;
    }
    .sobre-oscar{
        padding: 0 1rem;
    }
    .columna1, .columna2, .columna3, .columna4, .columna5{
        border-right: none;
        border-bottom: 2px solid #bbb;
    }
    .imagenesFooter img{
        width: 100%;
    }
    #articulos img{
        width: 100%;
    }
    .textoArticulo {
        padding:0;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1100px) {
    .gris {
        background-color: #E7E5E5;
        height: auto;
        display: grid;
        place-items: center;
    }
    .gris img {
        width: 100%;
        margin-left: 13rem;
    }
    .sobre-oscar{
         padding: 0;
         padding-left: 6rem;
    }
    .sobre-oscar h3 {
        margin-top: 0rem;
    }
    .nosotrosIzquierda2 img {
        margin: 4rem 0;
    }
    #articulos img{
        width: 100%;
    }
    .textoArticulo {
        padding: 0;
    }
}
@media only screen and (min-width: 1100px) and (max-width: 1500px) {
    .sobre-oscar{
        padding-left: 9rem;
        padding-right: 0;
    }
    .sobre-oscar h3 {
        margin-top: 2rem;
    }
    .nosotrosIzquierda1 img{
        width: 90%;
    }
    .textoArticulo {
        padding: 0;
    }
}

@media only screen and (min-width: 3000px){
  .gris {
    height: auto ;
}
}