/* Linea neon blanco */

#BorderLineTop{
  width: 100%;
  padding-top: 5.2vw;
  border-bottom: 1px solid #ffff;
  animation: MyLineMove 3s infinite;
  animation: MyLineShadow 5s infinite;
  box-shadow: 1px 2px #ffff;
}

#BorderLineBotton{
  width: 100%;
  border-top: 0px solid #ffff;
  animation: MyLineMove 3s infinite;
  animation: MyLineShadow 5s infinite;
  box-shadow: 0px 2px #ffff;
}

@keyframes MyLineMove {
  50% {border-color: 0px 1px #b1b1b1;}
}

@keyframes MyLineShadow {
  50% {box-shadow: 0px 1px 15px #b1b1b1;}
}

/*============Footer============*/

.footerContact{
  color: #fff;
  padding: 5vh 1vw;
  background-color: #170730;
  text-align: center;
  display: flex;
  position: fixed;
  top: 80vh;
  width: 100%; 
  height: 100%;
}

/* iconos de footer */

.bounce {
animation: Bounce 2s ease infinite;
}

@keyframes Bounce {
  70% { transform:translateY(0%); }
  80% { transform:translateY(-15%); }
  90% { transform:translateY(0%); }
  95% { transform:translateY(-7%); }
  97% { transform:translateY(0%); }
  99% { transform:translateY(-3%); }
  100% { transform:translateY(0); }
}


#fondo{
  background: url("../img/error404.png") no-repeat;
  background-size: cover;  
  overflow: hidden;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  width: auto; 
  height: 100vh;
}

.text h1{
  color: white;
  font-size: 10em;
  text-align: center;
  text-shadow: -5px 5px 0px rgba(255, 255, 255, 0.7), -10px 10px 0px rgba(250, 250, 250, 0.4), -15px 15px 0px rgba(253, 252, 252, 0.2);
  font-family: monospace;
  font-weight: bold;
  display: flex;
  justify-content: center;
  margin-top: -40vw;
}

.text h2{
  color: black;
  font-size: 3em;
  text-shadow: -5px 5px 0px rgba(0,0,0,0.7);
  text-align: center;
  font-family: monospace;
  font-weight: bold;
}

.text h3{
  color: white;
  margin-left: 30px;
  font-size: 1.5em;
  text-shadow: -5px 5px 0px rgba(0,0,0,0.7);
  text-align: center;
  font-family: monospace;
  font-weight: bold;
}



/*================Nuevo Nav===================*/
.main-header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0vw;
  background: rgb(18, 12, 43);
  background: linear-gradient(333deg, rgba(18,12,43,1) 39%, rgba(150,129,245,1) 96%);
  padding: 0 0.4rem;
  z-index: 100;
}

.main-logo {
  color: rgb(255, 255, 255);
  font-size: 32px;
  text-decoration: none;
  padding-bottom: 5vh;
}

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  margin-left: -100%;
  transition: all 0.2s linear;
  z-index: 100;
  
}

.main-nav.show {
  margin-left: 0;
}


.nav-links {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
}

.link-item {
  margin-top: 2rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  position: relative;
}

.button-menu {
  z-index: 200;
  width: 40px;
  height: 40px;
  border: none;
  display: flex;
  background: none;
  flex-direction: column; /* Pondrá un span debajo del otro*/
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 
  Dibujamos una línea recta por cada span creando el tipico menu hamburguesa
*/

.button-menu span {
  width: 37px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #ffffff;
  border-radius: 3px;
  transform-origin: 4px 0px;
  transition: all 0.2s linear;
}

/* 
  con los span dibujamos un icono de cerrar 
  para mostrar cuándo la navegación este abierta 
*/

.button-menu.close span {
  opacity: 1;
  transform: rotate(45deg) translate(0px, 0px);
  background: #ffffff;
}

.button-menu.close span:nth-child(2) {
  transform: rotate(-45deg) translate(-8px, 5px);
}

.button-menu.close span:nth-child(3) {
  display: none;
}


/*================Responsive===================*/

@media screen and (max-width: 320px) {
  
  #BorderLineTop{
    width: 100%;
    padding-top: 1vw;
    border-bottom: 0.5px;
  }

  .nav-links {
    background: rgb(18,12,43);
    background: linear-gradient(12deg, rgba(18,12,43,1) 68%, rgba(150,129,245,1) 100%);
  }

  .footerContact{
    top: 95vw;
  }

  .text{
    font-size: 0.4em;
    padding-bottom: 25vh;
  }

  #fondo{
    width: auto; 
    height: 90vh;
  }

  .main-logo {
    padding-bottom: 1vh;
  }

}

@media  screen and (min-width: 321px) and (max-width:349px){
  
  .main-header {
    padding-top: 5vw;
    height: 8vh;
    margin-top: -48vh;
  }

  .animate-charcter{
    font-size: 9vw;
  }

  .main-logo {
    padding-bottom: 1vh;
  }

  .button-menu{
    padding-bottom: 3vw;
  }

  .nav-links {
    background: rgb(18,12,43);
    background: linear-gradient(12deg, rgba(18,12,43,1) 68%, rgba(150,129,245,1) 100%);
  }

  .footerContact{
    top: 160vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 60vw;
    padding-right: 6vw;
    margin-right: 8vw;
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(0,0,0,0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }


}

@media  screen and (min-width: 350px) and (max-width:490px){
  
  .main-header {
    padding-top: 5vw;
       
  }

  .animate-charcter{
    font-size: 9vw;
  }

  .main-logo {
    padding-bottom: -0.1vh;
  }

  .button-menu{
    padding-bottom: 3vw;
  }

  .nav-links {
    background: rgb(18,12,43);
    background: linear-gradient(12deg, rgba(18,12,43,1) 68%, rgba(150,129,245,1) 100%);
  }

  .footerContact{
    top: 75vw;
  }

  .text{
    font-size: 0.5em;
    padding-bottom: 25vw;
  }

  #fondo{
    width: auto; 
    height: 88vh;
  }

}

@media  screen and (min-width: 491px) and (max-width:535px){
  
  .main-header {
    padding-top: 5vw;
    height: 8vh;
  }

  .animate-charcter{
    font-size: 9vw;
  }

  .main-logo {
    padding-bottom: 1vh;
  }

  .button-menu{
    padding-bottom: 3vw;
  }

  .nav-links {
    background: rgb(18,12,43);
    background: linear-gradient(12deg, rgba(18,12,43,1) 68%, rgba(150,129,245,1) 100%);
  }

  .footerContact{
    top: 115vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 60vw;
    padding-right: 6vw;
    margin-right: 8vw;
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(0,0,0,0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }


}

@media  screen and (min-width: 536px) and (max-width:580px){
  
  .main-header {
    padding-top: 5vw;
    height: 8vh;
  }

  .animate-charcter{
    font-size: 9vw;
  }

  .main-logo {
    padding-bottom: 1.5vh;
  }

  .button-menu{
    padding-bottom: 3vw;
  }

  .nav-links {
    background: rgb(18,12,43);
    background: linear-gradient(12deg, rgba(18,12,43,1) 68%, rgba(150,129,245,1) 100%);
  }

  .footerContact{
    top: 105vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 60vw;
    padding-right: 6vw;
    margin-right: 8vw;
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(0,0,0,0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }


}

@media  screen and (min-width: 581px) and (max-width:620px){
  
  .main-header {
    padding-top: 5vw;
    height: 10vh;
  }

  .animate-charcter{
    font-size: 9vw;
  }

  .main-logo {
    padding-bottom: 6vh;
  }

  .button-menu{
    padding-bottom: 3vw;
  }

  .nav-links {
    background: rgb(18,12,43);
    background: linear-gradient(12deg, rgba(18,12,43,1) 68%, rgba(150,129,245,1) 100%);
  }

  .footerContact{
    top: 50vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 20vw;
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(0,0,0,0.7);
    margin-left: 20vw;
  }

  #fondo{
    width: auto; 
    height: 89vh;
  }
}

@media  screen and (min-width: 621px) and (max-width:670px){
  
  .main-header {
    padding-top: 5vw;
    height: 11vh;
  }

  .animate-charcter{
    font-size: 9vw;
  }

  .main-logo {
    padding-bottom: 5vh;
  }

  .button-menu{
    padding-bottom: 3vw;
  }

  .nav-links {
    background: rgb(18,12,43);
    background: linear-gradient(12deg, rgba(18,12,43,1) 68%, rgba(150,129,245,1) 100%);
  }

  .footerContact{
    top: 49vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 20vw;

  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(0,0,0,0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }

  #fondo{
    width: auto; 
    height: 89vh;
  }
}

@media  screen and (min-width: 671px) and (max-width:700px){
  
  .main-header {
    padding-top: 5vw;
    height: 11vh;
  }

  .animate-charcter{
    font-size: 9vw;
  }

  .main-logo {
    padding-bottom: 5vh;
  }

  .button-menu{
    padding-bottom: 3vw;
  }

  .nav-links {
    background: rgb(18,12,43);
    background: linear-gradient(12deg, rgba(18,12,43,1) 68%, rgba(150,129,245,1) 100%);
  }

  .footerContact{
    top: 45vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 20vw;
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(0,0,0,0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }


}

@media  screen and (min-width: 701px) and (max-width:767px){
  
  .main-header {
    padding-top: 5vw;
    height: 11vh;
  }

  .animate-charcter{
    font-size: 9vw;
  }

  .main-logo {
    padding-bottom: 5vh;
  }

  .button-menu{
    padding-bottom: 3vw;
  }

  .nav-links {
    background: rgb(18,12,43);
    background: linear-gradient(12deg, rgba(18,12,43,1) 68%, rgba(150,129,245,1) 100%);
  }

  .footerContact{
    top: 45vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 25vw;
    
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(88, 87, 87, 0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }

  #fondo{
    width: auto; 
    height: 89vh;
  }

}

@media  screen and (min-width: 768px) and (max-width: 815px){
  
  .main-header {
    padding-top: 5vw;
    height: 10vh;
  }

  .animate-charcter{
    font-size: 6vw;
  }

  .main-logo {
    padding-bottom: 7vh;
  }
  
  .container>.row{
    flex-direction: column;
  }

  .button-menu {
    display: none;
  }

  .main-nav {
    position: static;
    margin-left: 0;
    flex-basis: 70%;
    height: 100%;
    margin-bottom: 5vw;
  }

  .nav-links {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }

  .link-item {
    display: inline-block;
    margin-top: -0.5vw;
    margin-right: 2rem;
  }

  .footerContact{
    top: 50vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 30vw;
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(88, 87, 87, 0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }

  #fondo{
    width: auto; 
    height: 89vh;
  }

}

@media  screen and (min-width: 816px) and (max-width: 855px){
  
  .main-header {
    padding-top: 5vw;
    height: 12vh;
  }

  .animate-charcter{
    font-size: 6vw;
  }

  .main-logo {
    padding-bottom: 6vh;
  }
  
  .container>.row{
    flex-direction: column;
  }

  .button-menu {
    display: none;
  }

  .main-nav {
    position: static;
    margin-left: 0;
    flex-basis: 70%;
    height: 100%;
    margin-bottom: 5vw;
  }

  .nav-links {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }

  .link-item {
    display: inline-block;
    margin-top: -0.5vw;
    margin-right: 2rem;
  }

  .footerContact{
    top: 45vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 35vw;
    padding-right: 6vw;
    margin-right: 8vw;
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(88, 87, 87, 0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }

  #fondo{
    width: auto; 
    height: 88vh;
  }
}

@media  screen and (min-width: 856px) and (max-width: 900px){
  
  .main-header {
    padding-top: 5vw;
    height: 12vh;
  }

  .animate-charcter{
    font-size: 6vw;
  }

  .main-logo {
    padding-bottom: 6vh;
  }
  
  .container>.row{
    flex-direction: column;
  }

  .button-menu {
    display: none;
  }

  .main-nav {
    position: static;
    margin-left: 0;
    flex-basis: 70%;
    height: 100%;
    margin-bottom: 5vw;
  }

  .nav-links {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }

  .link-item {
    display: inline-block;
    margin-top: -0.5vw;
    margin-right: 2rem;
  }

  .footerContact{
    top: 43vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 45vw;
    padding-right: 6vw;
    margin-right: 8vw;
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(88, 87, 87, 0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }

  #fondo{
    width: auto; 
    height: 88vh;
  }

}

@media  screen and (min-width: 901px) and (max-width: 970px){
  
  .main-header {
    padding-top: 5vw;
    height: 10vh;
  }

  .animate-charcter{
    font-size: 6vw;
  }

  .main-logo {
    padding-bottom: 4vh;
  }
  
  .container>.row{
    flex-direction: column;
  }

  .button-menu {
    display: none;
  }

  .main-nav {
    position: static;
    margin-left: 0;
    flex-basis: 70%;
    height: 100%;
    margin-bottom: 5vw;
  }

  .nav-links {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }

  .link-item {
    display: inline-block;
    margin-top: -0.5vw;
    margin-right: 2rem;
  }

  .footerContact{
    top: 70vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 60vw;
    padding-right: 6vw;
    margin-right: 8vw;
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(88, 87, 87, 0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }


}

@media  screen and (min-width: 971px) and (max-width: 1020px){
  
  .main-header {
    padding-top: 5vw;
    height: 12vh;
  }

  .animate-charcter{
    font-size: 6vw;
  }

  .main-logo {
    padding-bottom: 4vh;
  }
  
  .container>.row{
    flex-direction: column;
  }

  .button-menu {
    display: none;
  }

  .main-nav {
    position: static;
    margin-left: 0;
    flex-basis: 70%;
    height: 100%;
    margin-bottom: 5vw;
  }

  .nav-links {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }

  .link-item {
    display: inline-block;
    margin-top: -0.5vw;
    margin-right: 2rem;
  }

  .footerContact{
    top: 65vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 60vw;
    padding-right: 6vw;
    margin-right: 8vw;
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(88, 87, 87, 0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }


}

@media  screen and (min-width: 1021px) and (max-width: 1082px){
  
  .main-header {
    padding-top: 5vw;
    height: 12vh;
  }

  .animate-charcter{
    font-size: 6vw;
  }

  .main-logo {
    padding-bottom: 4vh;
  }
  
  .container>.row{
    flex-direction: column;
  }

  .button-menu {
    display: none;
  }

  .main-nav {
    position: static;
    margin-left: 0;
    flex-basis: 70%;
    height: 100%;
    margin-bottom: 5vw;
  }

  .nav-links {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }

  .link-item {
    display: inline-block;
    margin-top: -0.5vw;
    margin-right: 2rem;
  }

  .footerContact{
    top: 55vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 45vw;
    padding-right: 6vw;
    margin-right: 8vw;
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(88, 87, 87, 0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }

  #fondo{
    width: auto; 
    height: 88vh;
  }

}

@media  screen and (min-width: 1083px) and (max-width: 1182px){
  
  .main-header {
    padding-top: 5vw;
    height: 11vh;
  }

  .animate-charcter{
    font-size: 6vw;
  }

  .main-logo {
    padding-bottom: 4vh;
  }
  
  .container>.row{
    flex-direction: column;
  }

  .button-menu {
    display: none;
  }

  .main-nav {
    position: static;
    margin-left: 0;
    flex-basis: 68%;
    height: 100%;
    margin-bottom: 5vw;
  }

  .nav-links {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }

  .link-item {
    display: inline-block;
    margin-top: -0.5vw;
    margin-right: 2rem;
  }

  .footerContact{
    top: 55vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 45vw;
    padding-right: 6vw;
    margin-right: 8vw;
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(88, 87, 87, 0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }


}

@media  screen and (min-width: 1183px) and (max-width: 1259px){
  
  .main-header {
    padding-top: 5vw;
    height: 11vh;
  }

  .animate-charcter{
    font-size: 6vw;
  }

  .main-logo {
    padding-bottom: 4vh;
  }
  
  .container>.row{
    flex-direction: column;
  }

  .button-menu {
    display: none;
  }

  .main-nav {
    position: static;
    margin-left: 0;
    flex-basis: 66%;
    height: 100%;
    margin-bottom: 5vw;
  }

  .nav-links {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }

  .link-item {
    display: inline-block;
    margin-top: -0.5vw;
    margin-right: 2rem;
  }

  .footerContact{
    top: 55vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 55vw;
    padding-right: 6vw;
    margin-right: 8vw;
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(88, 87, 87, 0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }


}

@media  screen and (min-width: 1260px) and (max-width: 1281px){
  
  .main-header {
    padding-top: 5vw;
    height: 11vh;
    
  }

  .animate-charcter{
    font-size: 6vw;
  }

  .main-logo {
    padding-bottom: 4vh;
  }
  
  .container>.row{
    flex-direction: column;
  }

  .button-menu {
    display: none;
  }

  .main-nav {
    position: static;
    margin-left: 0;
    flex-basis: 66%;
    height: 100%;
    margin-bottom: 5vw;
  }

  .nav-links {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }

  .link-item {
    display: inline-block;
    margin-top: -0.5vw;
    margin-right: 2rem;
  }

  .footerContact{
    top: 53vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 55vw;
    padding-right: 6vw;
    margin-right: 8vw;
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(88, 87, 87, 0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }


}

@media  screen and (min-width: 1282px) and (max-width: 1299px){
  
  .main-header {
    padding-top: 5vw;
    height: 11vh;
  }

  .animate-charcter{
    font-size: 6vw;
  }

  .main-logo {
    padding-bottom: 4vh;
  }
  
  .container>.row{
    flex-direction: column;
  }

  .button-menu {
    display: none;
  }

  .main-nav {
    position: static;
    margin-left: 0;
    flex-basis: 66%;
    height: 100%;
    margin-bottom: 5vw;
  }

  .nav-links {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }

  .link-item {
    display: inline-block;
    margin-top: -0.5vw;
    margin-right: 2rem;
  }

  .footerContact{
    top: 50vw;
  }

  .text{
    font-size: 0.5em;
    padding-top: 55vw;
    padding-right: 6vw;
    margin-right: 8vw;
  }

  .text h1{
    margin-left: 20vw;
  }

  .text h2{
    font-size: 5em;
    text-shadow: -3px 3px 0px rgba(88, 87, 87, 0.7);
    margin-left: 20vw;
  }

  .text h3{
    margin-left: 15vw;
  }


}

@media  screen and (min-width: 1300px){
  
  .button-menu {
    display: none;
  }

  .main-nav {
    position: static;
    margin-left: 0;
    flex-basis: 60%;
    height: 100%;
    margin-bottom: 5vw;
  }

  .nav-links {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }

  .link-item {
    display: inline-block;
    margin-top: -0.5vw;
    margin-right: 2rem;
  }

  .main-header {
    height: 12vh;
    margin-top: -1vw;
  }

  .main-logo {
    padding-bottom: 4.5vh;
  }
  
  .text{
    padding-top: 45vw;

  } 

  #fondo{
    width: auto; 
    height: 89vh;
  }

}