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

*, *::before, *::after {
-webkit-box-sizing: content-box;
box-sizing: content-box;}
body {
margin: 0;
padding: 0;}

nav{
  margin-bottom: 2vh;
  font-family: 'Amaranth', sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  min-height:8vh;
  background-color: #ffffff;
}
.logo_index{
  margin-top: 2vh;
  width: 30%;
  height: 17vh;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('/img/logod.jpg');
}
.logo{
  -webkit-transform: scale(0.1);
  -ms-transform: scale(0.1);
  transform: scale(0.1);
}
.ham{
  display:none;
  background-color:transparent;
  cursor: pointer;
  border:none;
  margin:0;
  padding:0;
}

.br-1, .br-2, .br-3{
  background-color: #080808;
  display:block;
  height:3px;
  width: 28px;
  margin:10px auto;
  border-radius:2px;    
}
.enlaces-menu{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  padding:0;
}
.enlaces-menu li{
  padding: 0 40px;
  list-style-type: none;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.enlaces-menu li a{
  text-decoration:none;
  font-size: 1rem;
  color:#2f012d;
  font-weight:bold;
}
/* DISPOSITIVOS MOVILES */
@media (max-width:980px) {
.ham{
  display:block;
  cursor:pointer;
  position: absolute; 
  top:55px;
  right:55px;
  -webkit-transition: 0.5s  0.5s;
  -o-transition: 0.5s  0.5s;
  transition: 0.5s  0.5s; 
}
nav{
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding-top: 10px;
  padding-bottom: 10px;
}
.logo_index{
  width: 60%;
  height: 15vh;
}
.enlaces-menu{
  background-color: #b7f1f891;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  height: 70vh;         
  margin:0;
  padding:5px 0; 
  display:none;
  opacity:0;
  -webkit-transition: opacity 5s ease-out;
  -o-transition: opacity 5s ease-out;
  transition: opacity 5s ease-out;
  width:100%;
}
.enlaces-menu li{
  text-align:center;
  width:100%;
  padding:30px 0;    
}
.enlaces-menu li a{
  color: white;
  font-size: 1.9rem;   
} 
}
/* Animaciones */
@-webkit-keyframes muestraMenu {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes muestraMenu {
  from {opacity: 0;}
  to {opacity: 1;}
}
.enlaces-menu.activado{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex; 
  -webkit-animation: muestraMenu 350ms ease-in-out both; 
  animation: muestraMenu 350ms ease-in-out both;
  background-image:-webkit-gradient(from(#0000004f),to(rgba(0, 0, 0, 0.447))),url('../img/arbol2.jpg');
  background-image: -o-linear-gradient(#00000036,#0000002f),  url('../img/arbol2.jpg');
  background-image: linear-gradient(#00000015,#0000001c),  url('../img/arbol2.jpg');
  background-position: center;
  background-size: 100% 75vh;
        
  background-repeat: no-repeat;
}
.br-1.animado{
  -webkit-transform: rotate(-45deg) translate(-10px, 8px);
  -ms-transform: rotate(-45deg) translate(-10px, 8px);
  transform: rotate(-45deg) translate(-10px, 8px);
}
.br-2.animado{
  opacity: 0;
}
.br-3.animado{
  -webkit-transform: rotate(45deg) translate(-10px, -8px);
  -ms-transform: rotate(45deg) translate(-10px, -8px);
  transform: rotate(45deg) translate(-10px, -8px);
}
.ham.girar:hover{
  -webkit-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
}