@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&display=swap');

#header #navigation {
	border-top: 2px solid #007749;
	border-bottom: 2px solid #007749;
	background: #007749;
}
#header #menu a {
	transition: 0.3s;
}
#header #menu .selected a {
	color: #DAECDE;
}
#header #menu li a:hover {
	text-shadow: .1em .1em .5em #fff;
}
.caja-flex {
  box-sizing: border-box;
  margin: 1.2em 0;
  }

.fila-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.columna-1 {
  display:flex;
  flex: 1;
  justify-content: center;
  padding: 1em 0;
}

.columna-1 img {
  width: 90%;
  height: auto;
  /*animation: fade-in-bck 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;*/
  animation: slide-in-blurred-left 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

@keyframes fade-in-bck {
  0% {
	transform: translateZ(80px);
    opacity: 0;
  }
  100% {
	transform: translateZ(0);
    opacity: 1;
  }
}

@keyframes slide-in-blurred-left {
  0% {
    -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
            transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
            transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}



.columna-2 {
  display:flex;
  flex: 1;
  padding: 5em 0 1em;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.texto-indice {
  color: #007749;
  text-align:center;
  transform: rotate(-5deg) skew(-5deg);
  
}
.texto-indice.linea-1 {
  font-family: 'Lilita One', sans-serif;
  font-size: 3em;
  font-weight: 600;
  animation: tracking-in-expand 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1.5s both;
}
.texto-indice.linea-2 {
  font-family: 'Paytone One', sans-serif;
  color: #FE5000;
  font-size: 5em;
  font-weight: 800;
  line-height: .9em;
  padding: .1em;
  text-shadow: .04em .04em #214C31;
  /*animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;*/
  animation: text-pop-up-top 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)  both;
}

h1.titulo-flex {
	font-family: 'Bowlby One SC', sans-serif;
	font-size: 3.2em;
	font-weight: 400;
}

@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes text-pop-up-top {
  0% {
    transform: translateY(30px) rotate(0deg) skew(0deg);
    transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    transform: translateY(0) rotate(-6deg) skew(-6deg);
    transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #007749, 0 2px 0 #007749, 0 3px 0 #007749, 0 4px 0 #007749, 0 5px 0 #007749, 0 6px 0 #007749, 0 7px 0 #007749,/* 0 8px 0 #007749, 0 9px 0 #007749,*/ 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}

.texto-indice.linea-3 {
  font-family: 'Lilita One', sans-serif;
  font-size: 2.8em;
  font-weight: 600;
  padding: .5em 0 0;
  animation: tracking-in-expand 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1.5s both;
}

.button {
    display: inline-block;
    background-color: #fe5000;
    color: white !important;
    font-size:2.5em;
    font-weight:600;
    padding: .3em .6em;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin: 1em auto;
}

.button:hover {
    background-color: #ff6f00;
}

@media screen and (max-width: 767px) {
  #header {
    width: 100%;
	height: 100%;
  }
  #menu-icono, #header #menu li a {
	  background: #007749;
  }
  .caja-flex {
	height: 100%;  
  }
  .fila-flex {
     flex-wrap:nowrap;
     flex-direction:column;
     align-itmes:center;
  }
  .columna-1,.columna-2 {
    flex: 1;
    width: 100%;
  }
  .columna-1 img {
    width: 66%;
	animation: fade-in-bck 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  }
  .columna-2 {
	  padding: 1em 0;
  }
  .texto-indice.linea-1 {
	  font-size: 2.5em;
	  
	}
	.texto-indice.linea-2 {
	  
	  font-size: 4.3em;
	  animation: text-pop-up-top 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
	}

	.texto-indice.linea-3 {
	  font-size: 2em;
	  
	}

	#navigation  {
		opacity:0;
		animation: delay-menu 0.10s cubic-bezier(0.215, 0.610, 0.355, 1.000) .10s both;
		}
		@keyframes delay-menu {
			100% {opacity:1;}
		}
	#content {
		opacity:0;
		animation: delay-menu 0.25s cubic-bezier(0.215, 0.610, 0.355, 1.000) .25s both;
		}
		@keyframes delay-menu {
			100% {opacity:1;}
		}
	main {
		display: contents;
	}
}