@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url(//db.onlinewebfonts.com/c/4c19fc875e7ba1e6831129de3ab5ac0b?family=Retro+Gaming);
@import url('http://fonts.cdnfonts.com/css/minecraft-4');
*{
    background-image:url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8ae1c281-ed89-448d-871b-a2e351a6ba6f/d3l1qoj-f1b1c676-9602-4c65-bd7d-ea518fbc8b88.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzhhZTFjMjgxLWVkODktNDQ4ZC04NzFiLWEyZTM1MWE2YmE2ZlwvZDNsMXFvai1mMWIxYzY3Ni05NjAyLTRjNjUtYmQ3ZC1lYTUxOGZiYzhiODgucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.uuol1k13qvT9fW-5cdwPSJOFq5rmqahGAxi7W4yJiVA);
    color: rgb(255, 171, 76);
    font-family: "Ubuntu";
    margin: 0;
}

.last-name{
     /* Centramos el contenido de la sección y determinamos el color de fondo */
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     background-color: rgb(36, 35, 35);
     background-size: .2em 100%;
     font: 10.5em/1 Open Sans, Impact;   
     margin-top: 10%;
     
}

.text {
  /* Establecemos las características del texto */
  fill: none;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
   /* Establecemos la animación */
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
}

.text:nth-child(5n + 1) {
  stroke: #F2385A;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
  stroke: #F5A503;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
  stroke: #1b1bde;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
  stroke: #56D9CD;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
  stroke: #3AA1BF;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

.text:nth-child(5n + 1) {
  stroke: #F2385A;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
  stroke: #F5A503;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
  stroke: #E9F1DF;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
  stroke: #56D9CD;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
  stroke: #3AA1BF;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

  /* Pacman */

        svg {
          position: absolute;
          width: 50%;

        }


          .pagination {
            position: fixed;
            margin-top: 50px;
            margin-left: 41%;
            display: flex;
            flex-direction: row;
            --ddim: 10px;
            --rd: 15px;
            --rdim: calc(var(--rd)*2);
            --pm: #ffff03;
            width: 100%;
            height: 30px;
            background: none;
            z-index: 2;
          }
          
          label {
            content: '';
            margin: 0 10px;
            height: var(--ddim);
            width: var(--ddim);
            background: #f7b997;
            cursor: pointer;
          }
          
          label:first-child {margin-left: 0;}
          label:last-child {margin-right: 0;}
          input {display: none;}
          
          .pacman {
            content: '';
            position: absolute;
            top: calc(-1*var(--ddim));
            left: calc(-1*var(--ddim)/2);
            height: var(--rdim);
            width: var(--rdim);
            transition: transform 250ms linear;
            cursor: cell;
          }
          
          .pacman:before,
          .pacman:after {
            content: '';
            position: absolute;
            height: var(--rd);
            width: var(--rdim);
            left: 0;
            background: var(--pm);
            transition: inherit;
          }
          
          .pacman:before {
            top: 0;
            border-top-left-radius: var(--rdim);
            border-top-right-radius: var(--rdim);
            transform-origin: bottom center;
            transform: rotate(-45deg);
          }
          
          .pacman:after {
            bottom: 0;
            border-bottom-left-radius: var(--rdim);
            border-bottom-right-radius: var(--rdim);
            transform-origin: top center;
            transform: rotate(45deg);
          }
          
          @keyframes waka {
            0% {}
            50% {transform: rotate(0);}
            100% {}
          }
          
          input[type="radio"]:hover ~ .pacman:before,
          input[type="radio"]:hover ~ .pacman:after {
            animation: waka 500ms infinite;
          }
          
          input[id="dot-1"]:checked ~ .pacman {transform: translateX(var(--ddim));}
          input[id="dot-2"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)));}
          input[id="dot-3"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*2));}
          input[id="dot-4"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*3));}
          input[id="dot-5"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*4));}
          input[id="dot-6"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*5));}
          input[id="dot-7"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*6));}
          input[id="dot-8"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*7));}

  /* Pacman termina */

header{
        width: 100%;
        left: 0%;
        top: 0%;
        height: 30px;
        position: fixed;
        background: rgb(255, 228, 89);
        color:rgba(23,23,23,255);
        text-align: center;
        font-size: 20px;
        font-family: Ubuntu;
        z-index: 90;
 }
   
  /* Botonera */

        .botones{
          width: 1%;
          display: flex;
          justify-content: space-evenly;
          position: fixed;
          z-index: 100;
          margin-top: 6%;
          background: fixed;
          flex-direction: column;
        }

        button {
          position: relative;
          display: inline-block;
          cursor:pointer;
          vertical-align: middle;
          align-self: center;
          font-family: inherit;
          font-size: 30px;
          border: none;
          padding-left: 50%;
          cursor:crosshair;
        }

        .actual-text{
          color: rgb(255, 228, 89);
          text-align: center;
          justify-content: center;
          font-family: "Retro Gaming";
          
        }


/* contenedor principal */
.contenido{
    width: 90vw;
    margin: auto;
    display: flex;
    flex-direction: column;
}

/* esta es la clase generica */
.seccion{
    width: 100%;
    height: 180vh;
    padding-top: 7%;

}

/* cada una de ellas */
.presentacion{

    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2%;
    height: 70px;

}

    /* Zona de preguntas */
    
.preguntas{
    margin-top: 5%;
    align-items: center;
    height: 100vh;
    background-image: transparent;
    position: relative;
    }
        .tresp{
            position: absolute;
            display:flex;
            flex-direction: row;
            justify-content:space-evenly;
            margin-top: 5%;

        }
            .tresp img {
              width: 30%;
            }

        .tress{
            position: absolute;
            display:flex;
            flex-direction: row;
            justify-content:space-evenly;
            margin-top: 15%;

        }
            .tress img {
              width: 30%;
            }

        .trest{
            position: absolute;
            display:flex;
            flex-direction: row;
            justify-content:space-evenly;
            margin-top: 25%;
        }

            .trest img {
              width: 30%;
            }
        
        .tresc{
            position: absolute;
            display:flex;
            flex-direction: row;
            justify-content:space-evenly;
            margin-top: 35%;

        }
            .tresc img {
              width: 30%;
            }

        .tresq{
            position: absolute;
            display:flex;
            flex-direction: row;
            justify-content:space-around;
            margin-top: 45%;
            margin-left: 1%;
            margin-right: 1%;
        }
            .tresq img {
              width: 30%;

            }


    /* Termina zona de preguntas */

    /* Empieza la galería de fotos del colegio */

.subtituloillia{
  padding-top: 5%;
  color: #56D9CD;
  text-align: center;
  font-family: "Ubuntu";
}

.subtitulopre{
  padding-top: 5%;
  color: #56D9CD;
  text-align: center;
  font-family: "Ubuntu";
}


        .wrap {
          overflow: hidden;
          margin: 10px;

        }
        .box {
          float: left;
          position: relative;
          width: 20%;
          padding-bottom: 20%;
          margin-top: 7%;
        }
        .boxInner {
          position: absolute;
          left: 10px;
          right: 10px;
          top: 10px;
          bottom: 10px;
          overflow: hidden;
        }
        .boxInner img {
          width: 100%;
        }
        .boxInner .titleBox {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          margin-bottom: -50px;
          background: rgb(111, 175, 140);
          color: #FFF;
          padding: 10px;
          text-align: center;
          -webkit-transition: all 0.3s ease-out;
          -moz-transition: all 0.3s ease-out;
          -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
        }
        .nome .titleBox{
          background: rgb(255, 0, 0);
        }
        section.no-touch .boxInner:hover .titleBox, section.touch .boxInner.touchFocus .titleBox {
          margin-bottom: 0;
        }
        @media only screen and (max-width : 480px) {
          /* Smartphone view: 1 tile */
          .box {
            width: 100%;
            padding-bottom: 100%;
          }
        }
        @media only screen and (max-width : 650px) and (min-width : 481px) {
          /* Tablet view: 2 tiles */
          .box {
            width: 50%;
            padding-bottom: 50%;
          }
        }
        @media only screen and (max-width : 1050px) and (min-width : 651px) {
          /* Small desktop / ipad view: 3 tiles */
          .box {
            width: 33.3%;
            padding-bottom: 33.3%;
          }
        }
        @media only screen and (max-width : 1290px) and (min-width : 1051px) {
          /* Medium desktop: 4 tiles */
          .box {
            width: 25%;
            padding-bottom: 25%;
          }
        }

        /* Termina galería de preferencias */

.subtitulofu{
  position: absolute;
  margin-top: 10%;
  padding-left: 1%;
  color: #56D9CD;
  text-align: center;
  font-family: "Ubuntu";
  margin-left: 38%;
}
.subtitulofu2{
  position: absolute;
  padding-right: 1%;
  color: #ff0000;
  margin-top: 10%;
  text-align: center;
  font-family: "Ubuntu";
  font-size: 25px;
  margin-left: 38%;
}
.subtitulofu3{
  position: absolute;
  background: none;
  margin-top: 10%;
  color: #ffffff;
  font-family: "Ubuntu";
  font-size: 22px;
  z-index: 1;
  margin-left: 39%;
}

.subtitulosde{
  margin-top: 20%;
}

.c2f{
  color: rgb(255, 255, 255);
  margin-bottom: 3%;
  text-align: center;
  font-size: 30px;
  font-family: "Retro Gaming";
}



/* aqui propiedades del pie de pagina */
.piepacman{
    width: 100%;
    left: 0%;
    top: 30px;
    height: 50px;
    position: fixed;
    text-align: right;
    font-size: 20px;
    background: rgb(0, 0, 0);
    z-index: 1;
}

.pie{
    width: 100%;
    left: 0%;
    bottom: 0%;
    height: 30px;
    position: fixed;
    background: rgb(255, 228, 89);
    color:rgba(23,23,23,255);
    text-align: center;
    font-size: 20px;
    font-family: "Ubuntu";
}