@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,200&family=Poppins:wght@500&display=swap');

* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}

body {
  background-color: aquamarine;
  height: max-content;
}

.botonera {
  background-color: darkgreen;
  width: 100%;
  height: 12vh;
  padding-top: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 1rem;
  position: fixed;
  z-index: 100;
}

.button {
  position: relative;
  padding: 10px 20px;
  border-radius: 7px;
  border: 1px solid rgb(61, 106, 255);
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  background: transparent;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

button:hover {
  background: rgb(61, 106, 255);
  box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

button:hover::before {
  -webkit-animation: sh02 0.5s 0s linear;
  -moz-animation: sh02 0.5s 0s linear;
  animation: sh02 0.5s 0s linear;
}

button::before {
  content: "";
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 50px 30px #fff;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

@keyframes sh02 {
  from {
    opacity: 0;
    left: 0%;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
    left: 100%;
  }
}

button:active {
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: box-shadow 0.2s ease-in;
  -moz-transition: box-shadow 0.2s ease-in;
  transition: box-shadow 0.2s ease-in;
}

.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;   
}

.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;
}
}




svg {
position: absolute;
width: 80%;

}

.last-name {
  height: 90vh;
  background-color: black;
}

.Conociendome {
  height: fit-content;
  background-color: coral;
}

.titulo_seccion {
  font-size: 70px;
  font-family: serif;
  color: black;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 11vh;
  padding-top: 15px;
}

.pregunta {
  font-size: 15px;
  text-align: left;
  font-family: "Poppins", sans-serif;
  padding-left: 200px;
}

.respuesta {
  font-size: 20px;
  font-family: 'Josefin Sans', sans-serif;
  right: 1vw;
  padding-right: 200px;
  text-align: right;
}

.PasoporelIllia {
  height: fit-content;
  background-color: deeppink;
}

.wrapper {
	width: 300px;
	height: 300px;
	margin: 15% auto;
  padding-top: 5vh;
}

.box-area {
	-webkit-animation: animate 10s ease-in-out infinite;
	        animation: animate 10s ease-in-out infinite;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	-webkit-transform-origin: 100px 100px 0;
	    -ms-transform-origin: 100px 100px 0;
	        transform-origin: 100px 100px 0;
}

@-webkit-keyframes animate {
	from, to {
		-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}

	16% {
		-webkit-transform: rotateY(-90deg);
		        transform: rotateY(-90deg);
	}

	33% {
		-webkit-transform: rotateY(-90deg) rotateZ(90deg);
		        transform: rotateY(-90deg) rotateZ(90deg);
	}

	50% {
		-webkit-transform: rotateY(-180deg) rotateZ(90deg);
		        transform: rotateY(-180deg) rotateZ(90deg);
	}

	66% {
		-webkit-transform: rotateY(-270deg) rotateZ(90deg);
		        transform: rotateY(-270deg) rotateZ(90deg);
	}

	83% {
		-webkit-transform: rotateX(-270deg);
		        transform: rotateX(-270deg);
	}
	
}

@keyframes animate {
	from, to {
		-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}

	16% {
		-webkit-transform: rotateY(-90deg);
		        transform: rotateY(-90deg);
	}

	33% {
		-webkit-transform: rotateY(-90deg) rotateZ(90deg);
		        transform: rotateY(-90deg) rotateZ(90deg);
	}

	50% {
		-webkit-transform: rotateY(-180deg) rotateZ(90deg);
		        transform: rotateY(-180deg) rotateZ(90deg);
	}

	66% {
		-webkit-transform: rotateY(-270deg) rotateZ(90deg);
		        transform: rotateY(-270deg) rotateZ(90deg);
	}

	83% {
		-webkit-transform: rotateX(-270deg);
		        transform: rotateX(-270deg);
	}
	
}

.box-area div {
	position: absolute;
	width: 300px;
	height: 300px;
	line-height: 300px;
}

.box-area .box1 {
	background-image: url('../img/clase.jpeg');
	background-size: cover;
	background-position: center center;
	-webkit-transform: translateZ(100px);
	        transform: translateZ(100px);
}

.box-area .box2 {
	background-image: url('../img/curso.jpeg');
	background-size: cover;
	background-position: center center;
	-webkit-transform: rotateY(90deg) translateZ(100px);
	        transform: rotateY(90deg) translateZ(100px);
}

.box-area .box3 {
	background-image: url('../img/ratablanca.jpeg');
	background-size: cover;
	background-position: center center;
	-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
	        transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
}

.box-area .box4 {
	background-image: url('../img/torneofutbol.jpeg');
	background-size: cover;
	background-position: center center;
	-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
	        transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
}

.box-area .box5 {
	background-image: url('../img/viajemedio.jpeg');
	background-size: cover;
	background-position: center center;
	-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
	        transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
}

.box-area .box6 {
	background-image: url('../img/villavicencio.jpeg');
	background-size: cover;
	background-position: center center;
	-webkit-transform: rotateX(-90deg) translateZ(100px);
	        transform: rotateX(-90deg) translateZ(100px);
}

.Viendoelfuturo {
  height: 90vh;
  background-color: goldenrod;
  height: fit-content;
  
}

.fotosfuturo{
  justify-content: space-around;
  display: flex;
  padding-top: 15vh;
}

.foto{
  height: 30vh;
}

.Contactos {
  height: 60vh;
  background-color: white;
}

.redes{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.footer {
  background-color: darkgreen;
  width: 100%;
  height: 10vh;
  bottom: 0%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 1rem;
  position: fixed;
}

.textofooter {
  font-size: xx-large;
  font-family: fantasy;
  color: chartreuse;
}