

@media only screen and (min-width : 1440px)  {
  .imagetablet, .imagemobile {
    display: none;
  }
}

@media only screen  and (min-width : 1025px) and (max-width : 1440px)  {
  .imagetablet, .imagemobile {
    display: none;
  }
  .caption{
    padding: 100px!important;
  }
  .layer-r1-1 {
    width: 50%;
    max-width: inherit;
  }

  .layer-r1-1 img {
    width: 70%;
  }

  .layer-r1-2 {
    width: 50%;
    padding-left: 50px;
  }
  /* .layer-r1-3{
    left: 10%;
  } */

  .layer-r1-4, .layer-r1-6, .layer-r1-10, .layer-r1-12 {
    width:100%!important;
    max-width: 600px!important;
    left: 35%;
  }

  .layer-r1-4{
    bottom: 50% !important;
    left: 45% !important;
  }

  .layer-r1-12{
    bottom: 25% !important;
    max-width: 500px !important;
    left: 35% !important;
  }
  .layer-r1-13 img{
    width: 70% !important;
  }

  .layer-r1-10{
    bottom: 30%;
  }

  .layer-r1-6{
    bottom: 10%;
    left: 30% !important;
  }
  .layer-r1-8 img{
    width: 65% !important;
  }

  .layer-r1-7 {
    right: -20%;
    /* top: 1%; */
  }

  .layer-r1-15{
    width:100%!important;
    max-width: 400px!important;
    left: 35%;
  }

    .fotorel1 {
      margin-right: 30px;
    }

  .slideshow .slide .title {
    font-size: 60px;
    margin-bottom: 20px;
  }

  .w3-container p {
    font-size: 18px;
    line-height: 1.3;
  }

  .slideshow .slide .chapter {
    margin-bottom: 20px;
    padding: 5px 40px;
  }

  .imagemobile {
    display: none;
  }

  .subtitle {
    font-size: 26px;
  }

  .titlehome {
    font-size: 66px;
  }

  .layer-home-2 {
    width: 50%;
  }

  .layer-home-3 {
    top: 15%;
  }

  .layer-home-1 img, .layer-home-3 img {
    width: 80%;
  }

  .titlehome b {
    font-size: 70px;
  }

  .btn-3d p {
    margin: 15px;
  }

  .layer-home-6 {
    width: 640px;
  }

  .layer-home-6 iframe {
    height: 300px !important;
  }

  .yellow {
    font-size: 50px;
  }

  .layer-home-7 {
    width: 35%;
    top: 5%;
  }
  .texto-glosario {
    padding-top: 90px;
    font-size: 22px;
  }
  .titleglosario{
    font-size: 120px;
  }
  .texto-glosario h6 {
    margin-top: 30px;
  }
}

@media only screen  and (min-width : 769px) and (max-width : 1024px) {
  .imagemobile {
    display: none;
  }
  .caption {
    padding: 50px!important;
  }

  .slideshow .slide .title {
    font-size: 63px;
  }

  .slideshow .slide .caption {
    display: flex;
    max-width: 1024px;
    flex-direction: column;
    align-items: center;
  }

  /* .fotorel1 {
  } */

  .layer-r1-1 {
    width: 100%;
    margin-bottom: 40px;
  }

  .layer-r1-2 {
    width: 100%;
    max-width: 550px;
    padding: 0 !important;
  }

  .layer-r1-3 {
    left: 0%;
  } 

  .layer-r1-4 {
    bottom:10%!important;
    right: 15%;
    top: -18%;
  }

  .layer-r1-10 {
    top:10%!important;
    right: 15%;
  }

  .layer-r1-5 {
    max-width: 1024px;
    width: 100%;
    top: 40%;
    left: 2%;
  }

  .layer-r1-6 {
    top: -25%!important;
    max-width: 900px!important;
  }

  .layer-r1-7 {
    width: 700px;
    right: -11%;
    top: 0%;
  }

  .layer-r1-8 {
    left: 30%;
  }

  .layer-r1-12{
    max-width: 700px!important;
    bottom: inherit!important;
    top: 10%!important;
    right: 15%!important;
  }

  .layer-r1-13{
    left: -5%!important;
  }

  .layer-r1-14{
    left: 15%!important;
  }
  .layer-r1-15{
    top: 25%!important;
  }


  .slideshow .arrows .arrow {
    top: 96%;
  }

  .w3-container {
    padding: 30px;
  }

  .w3-container p {
    font-size: 16px;
    text-align: initial;
  }

  .w3-modal-content2 {
    max-width: 750px;
  }

  .tabletcontainer {
    padding: 40px !important;
    max-width: 470px;
    width: 100%;
  }

  .tooltip .tooltiptext {
    visibility: hidden;
    width: 340px !important;
    font-size: 20px;
    text-align: initial;
  }

  .slideshow .slide .text {
    font-size: 28px;
  }

  .btn {
    font-size: 18px;
    top: -15%!important;
    left: 15%!important;
  }

  .photo {
    width: 40px;
    height: 35px;
  }

  .caption5 {
    align-items: flex-start !important;
    display: flex !important;
  }

  .imagetablet {
    position: relative;
    display:inherit;
  }
  .layer-r1-11 {
    margin-top: 170px;
  }

  .layer-r1-11 img {
    width: 80% !important;
  }

  .layer4tablet {
    align-items: flex-end;
  }

  .imagemobile {
    display: none;
  }

  .ctmobile {
    flex-direction: column;
  }

  .layer-home-2 {
    width: 70%;
    padding-left: 0;
    text-align: center;
  }

  .layer-home-1 img {
    width: 100%;
  }

  .layer-home-1 {
    padding-bottom: 50px;
  }

  .titlehome {
    font-size: 80px;
  }

  .subtitle {
    font-size: 32px;
  }

  #Inicio {
    background-image: url(./back/backhome_1_mbl.jpg);
  }

  .layer-home-3 img {
    width: 100%;
  }

  .layer-home-3 {
    top: 14%;
    width: 70%;
    left: -5%;
  }

  .layer-home-4 {
    width: 60%;
    padding-left: 50px;
    position: relative;
    left: -80px;
  }

  #Videos {
    background-image: url(./back/backhome_3_mbl.jpg);
  }

  .layer-home-5 {
    top: 63%;
  }

  .layer-home-6 {
    top: 0%;
  }

  .layer-home-7 {
    width: 50%;
    top: 0%;
  }

  .ctmobile2 {
    flex-direction: column;
  }

  .conclusion {
    padding: 0;
    margin: 0 auto;
    position: static;
    text-align: center;
  }

  .enlaces {
    justify-content: space-around;
  }

  .btn-3d {
    margin-right: 0px;
  }
  .texto-glosario {
    max-width: 800px;
    padding-top: 90px;
  }
  .titleglosario {
    font-size: 90px;
  }
  .texto-glosario h6 {
    font-size: 36px;
    margin-top: 40px;
  }
  .texto-glosario p{
    font-size: 20px!important;
  }
  /* HOME  */
    .ctmobile {
      flex-direction: column;
      background: url('../back/backhome_1.jpg');
      background-position: center;
      background-size: cover;
    }
    .ctmobile .subtitle{
      font-size: 30px;
      margin-bottom: 1px;
    }
    .ctmobile .titlehome{
      font-size: 50px;
    }
    .ctmobile .description{
      font-size: 17px !important;
      text-align: justify;
    }
    .ctmobile strong{
      font-size: 16px !important;
    }
    .scrolldown h4{
      font-size: 40px;
      width: 350px;
    }
    .scrolldown {
        width: 348px;
        bottom: 15px;
        left: 32%;
        margin-left: 1px;

    }
    .fa{
      font-size: 30px;
    }
    .layer-home-1{
      padding-bottom: 0px;
    }
    .layer-home-1 img{
      width:  75%;
    }

  /* FIN HOME  */


  /* SECCIÓN RELATO  */

    .ct .subtitle{
      font-size: 30px;
    }
    .titlehome b{
      font-size: 50px;
    }
    .ct .description{
      font-size: 27px;
      text-align: justify;
    }
    #Violeta .ct {
      background: url('../back/backhome_2.jpg');
      background-position: center;
      background-size: cover;
    }
   .layer-home-4{
     width: 85%;
   }

   .layer-home-4 .btn-3d p{
     font-size: 20px !important;
   }
  /* FIN SECCIÓN RELATO  */



  /* INICIO SECCIÓN VIDEOS */
    #Videos{
      background-image: url('../back/backhome_3.jpg');
      background-position: center bottom;
    }
    .layer-home-5{
      z-index:3;
    }

  /* FIN SECCIÓN VIDEOS */


  /* INICIO SECCIÓN ENLACES */

  .enlaces {
      justify-content: space-evenly;
  }

  /* FIN SECCIÓN ENLACES */



}

@media only screen and (min-width : 100px) and (max-width :1024px) {
  .an .ct {
    transform: none;
    opacity: 100;
  }
}

@media only screen and (min-width : 375px) and (max-width : 768px) {
  
  /* .imagetablet {
    position: relative;
    display:inherit;
  } */

  .slideshow .slide .caption {
    padding: 20px;
  }
  .container p {
    font-size: 24px !important;
  }
  .layer-r1-1 {
    width: 100%;
    margin-bottom: 40px;
  }
  .layer-r1-4 {
    right: 10%!important;
  }
  .contenttablet {
    max-width: 600px !important;
  }

  .layer-home-6 {
    width: 500px !important;
  }

  .layer-home-6 iframe{
    height: 220px !important;
  }
  .titlehome,.titlehome b{
    font-size: 60px;
  }
  .subtitle {
    font-size: 24px;
  }
  .btn-3d {
    font-size: 20px;
  }
  .yellow {
    font-size: 45px;
  }
  .layer-home-5 {
    top: 65%;
  }
  .btn-3d p {
    margin-left: 10px;
    text-align: left;
  }
  .texto-glosario {
    max-width: 600px;
    padding-top: 90px;
  }
  .titleglosario {
    font-size: 70px;
  }
  .texto-glosario h6 {
    font-size: 30px;
    margin-top: 30px;
  }
  .texto-glosario p{
    font-size: 16px!important;
  }

  /* INICIO SECCIÓN PREMIOS */

  .winners{
      padding: 0 2%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding-bottom: 70px ;
  }
   
  #Premios .titlehome{
        /* max-width: 430px; */
        padding: 0 3% 2% ;
        margin: auto;
  }
  
    /* FIN SECCIÓN PREMIOS */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .imagetablet {
    display: none !important;
  }

  .imagemobile {
    display: inherit;
    min-width: 1100px !important;

  }

  .slideshow .slide .caption {
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  .layer-r1-1 {
    margin-bottom: 20px;
    max-width: 600px;
  }

  .layer-r1-2 {
    padding-left: 0px;
    max-width: 700px;
  }

  .slideshow .slide .title {
    font-size: 80px;
    margin-bottom: 20px;
  }


  .slideshow .slide .chapter {
    font-size: 40px;
    margin-bottom: 20px;
    padding: 5px 60px;
  }

  .backhome{
    width: 80px !important;
  }

  .header, .header2 {
    padding: 20px 20px 10px 20px;
    align-items: center;
  }

  .logojep {
    width: 100%;
    max-width: 420px;
    margin-top: 20px;
  }

  .backhome svg {
    width: 100%;
    float: right;
  }

  .slideshow .slide .text {
    font-size: 60px;
  }

  .pagination {
    display: none;
  }

  #svg5-Layer_1 {
    width: 18%;
  }

  .layer-r1-11 img {
    width: 180% !important;
    top: 420px;
    position: relative;
  }

  h3 {
    font-size: 60px;
    margin-right: 10px !important;
    color: #1D506D;
  }

  .slideshow .arrows .next {
    right: 29%;
    top: 90%;
  }

  .layer-r1-3 {
    width: 640px;
    top: 40%;
    left: 0%;
  }

  .layer-r1-4 {
    width: inherit;
    right: 0%;
    top: -15%;
    display: inherit;
    z-index: inherit!important;
    position: relative;
  }

  .btnmobile {
    top: -10% !important;
    left: 20% !important;
  }

  .btnmobile2 {
    top: 5% !important;
    left: -15% !important;
  }

  .w3-container {
    padding: 40px;
  }

  .fotorel1 {
    max-width: 400px;
    width: 100%;
    float: left;
    margin-right: 40px;
  }

  .w3-container p {
    font-size: 35px;
    line-height: 1.3;
    text-align: start;
    margin-right: -20px;
  }

  .contenttablet {
    right: -5px;
  }

  .tabletcontainer {
    padding: 40px;
  }

  .layer-r1-5 {
    top: 40%;
    left: -15%;
  }

  .layer-r1-6 {
    width: 880px;
    position: relative;
    right: 0%;
  }

  .layer-r1-7 {
    top: 62%;

  }

  .tooltip .tooltiptext {
    width: 270px !important;
    font-size: 13px;
  }

  .layer-r1-8 {
    width: 60%;
    top: 60%;
    left: 0% !important;
  }

  .btnmobile3 {
    top: -10% !important;
    left: 63% !important;
  }

  .tooltipmobile {
    left: 35% !important;
  }

  .caption5 {
    max-width: 320px !important;
  }

  .caption5 .layer-r1-3 {
    width: 85%;
    left: -26%;
  }

  .btnmobile4 {
    left: 45% !important;
    top: -5% !important;
  }

  .layer-r1-9 {
    width: 150px;
    right: 6%;
    top: -16%;
  }

  .image6tablet {
    position: absolute;
    left: 0%;
    width: 60%;
    margin-top: -40px;
  }
.image-container{
  right: 40%;
}


  .layer-r1-10 {
    max-width: 790px;
    bottom: 45%!important;
    right: 16%;
  }
  .layer-r1-11 {
    width: 260px;
  }
  .layer-r1-12 {
    max-width: 800px!important;
    bottom: inherit!important;
    top: 7%!important;
    right: 10%!important;
  }
  .layer-r1-14{
    left: 15%!important;
  }
  .layer-r1-15 {
      width: 785px;
      top: 170px !important;
      right: 10%;
  }
  .tooltipmobile2 {
    left: 0% !important;
  }

  .tooltipmobile3 {
    left: 0% !important;
  }

  .tooltip .tooltiptext {
      width: 770px !important;
      font-size: 30px;
  }

  .layer-r1-12 .tooltip .tooltiptext {
      margin-left: -400px !important;
  }
  .layer-r1-14 img{
    width: 650px !important;
    bottom: -150px;
  }
  .btn {
      font-size: 35px;
      top: 1%!important;
      left: 5%!important;
      padding:10px 20px !important;
  }
  .layer-r1-11 {
      padding-top: 20%;
  }

  .btnmobile5 {
    left: 15% !important;
    top: -30% !important;
  }

  .layer-home-2 {
    width: 70%;
    padding: 0;
    text-align: left;
  }
  .titlehome{
    font-size: 40px;
  }
  .titlehome,.titlehome b{
    font-size: 30px;
    text-align: center;
  }
  .subtitle {
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
  .btn-3d {
    font-size: 20px;
  }
  .yellow {
    font-size: 40px;
  }
  .layer-home-1 {
    width: 45%;
  }
  #Inicio {
    background-image: url(./back/backhome_1_mbl.jpg);
    background-size: 190%;
  }

  #Videos {
    background-image: url(./back/backhome_3_mbl.jpg);
  }
  .layer-home-3 {
    width: 60%;
  }
  .layer-home-4 {
    width: 90%;
    padding-left: 20px;
    text-align: left;
    top: 12%;
    position: relative;
    left: 0%
  }


  #Violeta {
    background-size: 560%;
  }
  #Violeta .ct{
    flex-direction: column-reverse;
  }
  .layer-home-5 {
    width: 250px;
    top: 67%;
    left: 3%;
  }
  .enlaces {
    flex-direction: column;
    align-items: center;
  }
  .btn-3d {
    font-size: 22px;
    padding: 0px 20px;
    margin-right: 10px;
    margin-bottom: 20px;
    align-items: center;
  }
  .btn-3d p {
    margin: 5px;
    font-size: 16px;
    text-align: center;
  }
  .btn-3d img {
    width: 35px;
  }
  .layer-home-6 {
    width: 375px;
    left: 3%;
    top: 1%;
  }
  .layer-home-6 iframe{
    width: 355px;
    height: 180px;
  }
  .ctmobile2 {
    flex-direction: column;
  }
  .layer-home-7 {
    width: 70%;
    top: 5%;
  }
  .conclusion{
    padding: 0;
    top: 5%;
  }
  .scrolldown h4{
    font-size: 25px;
  }
  .texto-glosario {
    max-width: 320px;
    padding-top: 100px;
    text-align: center;
  }
  .titleglosario {
    font-size: 40px;
    color:#B850B1;
  }
  .texto-glosario h6 {
    font-size: 26px;
    margin-top: 30px;
    font-weight: 900!important;
  }
  .texto-glosario p{
    font-size: 15px!important;
  }


  /* HOME  */
    .ctmobile {
      flex-direction: column;
      background: url('../back/backhome_1.jpg');
      background-position: center;
      background-size: cover;
    }
    .ctmobile .subtitle{
      font-size: 30px;
    }
    .ctmobile .titlehome{
      font-size: 50px;
    }
    .ctmobile .description{
      font-size: 27px !important;
      text-align: justify;
    }
    .ctmobile strong{
      font-size: 23px !important;
    }
    .scrolldown h4{
      font-size: 40px;
      width: 350px;
    }
    .scrolldown {
        width: 348px;
        bottom: 15px;
        left: 32%;
        margin-left: 1px;

    }
    .fa{
      font-size: 30px;
    }


  /* FIN HOME  */


  /* SECCIÓN RELATO  */

    .ct .subtitle{
      font-size: 30px;
    }
    .titlehome b{
      font-size: 50px;
      margin-bottom: 30px;
    }
    .ct .description{
      font-size: 27px;
      text-align: justify;
    }
    #Violeta .ct {
      background: url('../back/backhome_2.jpg');
      background-position: center;
      background-size: cover;
      padding-top: 350px;
    }
   .layer-home-4{
     width: 85%;
   }

   .layer-home-4 .btn-3d p{
     font-size: 40px !important;
   }
  /* FIN SECCIÓN RELATO  */



  /* INICIO SECCIÓN VIDEOS */
    #Videos{
      background-image: url('../back/backhome_3_mbl.jpg');
      background-position: center bottom;
    }
    .layer-home-6{
      width: 90% !important;
      margin: auto !important;
    }
    .layer-home-5{
      width: 70% !important;
    }
    .layer-home-6 .yellow{
      font-size: 90px !important;
      margin-top: -380px !important;
    }
    #ytplayer{
      margin-top: 280px;
      width: 90%;
      height: 500px;
    }

  /* FIN SECCIÓN VIDEOS */

}
