* {
    margin: 0;
    padding: 0;
}
/* esto hace que baje mas suave del menu */
:root {
    scroll-behavior: smooth;
}
.success {
   font-family:  Quicksand, sans-serif;
   color: white;
   text-align: center;
   font-size: 24px;
   border-radius:7px;
   background-color:#87CDFA;
    
   
}
.circular-button{
  border-radius: 0%; /* Hace el botón cuadrado */
    width: 15px; /* Establece el ancho del botón */
    height: 15px; /* Establece la altura del botón */
    margin-right: 5px;
    margin-left: 5px;
    background-color: #c7c6c6; /* Color de fondo del botón */
}

.error {
   font-family:  Quicksand, sans-serif;
   color: white;
   text-align: center;
   font-size: 24px;
   border-radius:7px;
   background-color:#87CDFA;
}
.container .nav {

	/* estos 3 parametrso son para centrar texto */
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1430px;
    margin: 0 auto;
    height: 3rem;
	background-color: #fffff6;
    font-size: 24px;
    font-family:  Quicksand, sans-serif;
    font-weight:400;
    overflow: hidden;
}

.container .nav ul {
    /* pone la lista en horizontal */
	display: flex;
    list-style: none;
}

.container .nav ul li {
    padding-inline: 20px;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .nav ul li a{
   text-decoration: none;
   color: rgb(0, 0, 0);
}

.container .nav ul li a:hover {
color: #fcb7ef;

}

/* Estilo menu nuevo */
.ventana{
    max-width: 100%;
    position: absolute;
    display: block;
}
.topnav {
    overflow: hidden;
    background-color: #fffff6;
    display: flex;
    justify-content: center;
    align-items: center;
}

.topnav a {
    align-items: center;
    color: lightpink;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 25px;
    font-family: Quicksand, sans-serif;
    font-weight: 400;
}

.topnav a:hover {
    color: rgb(191, 193, 195);
}



.topnav .icon {
    display: none;
}

/* fin estilo menu nuevo */


.caja1 {
max-width: 1490px;
height: 1010px;
margin:0 auto;
overflow: hidden;

}
 .estu3{
    max-width: 1500px;
    margin:0 auto;
    margin-top: 170px;
}

.imagen2 {

margin:0 auto;
max-width: 1430px;

 }


#cerrar{
    position: absolute;
    margin-top: 1px;
    right: 2px;

}

#equipo1 {
    text-align: center;
    font-size: 44px;
    font-family: 'Quicksand';
    }
#rectangulo{
    position: absolute;
    width: 579px;
    height: 656px;
    left: 110px;
    top: 1959px;
    background: url(9-Best-Mellotron-Plugins-2021-Free-Paid.jpg);
    border-radius: 79px;

}
.imagenesRedondeadas{
    width: 400px;
    height:300px;
    text-shadow: 3px;
    border-radius: 30px 30px 0 0 ;
    transition: 5s;
    opacity: 1;

}
.imagenesRedondeadas:hover{
    opacity: 0.5;
}
.letrasServicios{
    padding: 20px;
    font-size:20px;
    font-family: 'Quicksand';
    font-family: 500px;
    margin-top: 3%;
    color: black;


}
.cajaServicios{
    background-color:gray;
    width: auto;
    max-width: 1430px;
    margin: 0 auto;
    padding: 30px;
    padding-top: 50px;



}

.cajaServiciosServicios{
    background-color:none;
    width: auto;
    max-width: 1430px;
    margin: 0 auto;
    padding: 30px;
    padding-top: 50px;
}

    .cajaServiciosServicios7{
        background-color:none;
        width: auto;
        max-width: 1430px;
        margin: 0 auto;
        margin-top: 80px;
        padding: 30px;
        padding-top: 50px;

}
.cajaServicios1{
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    width: auto;
    max-width: 1430px;
    margin: 0 auto;
    padding: 30px;
    padding-top: 50px;



}
.cajaServicios1a{
    
    width: auto;
    max-width: 1430px;
    margin: 0 auto;
    padding: 30px;
    padding-top: 50px;



}
.cajaServiciosFantasia{
    background-color: none;    
    width: auto;
    max-width: 1430px;
    margin: 0 auto;
    padding: 30px;
    padding-top: 50px;



}

.letrasTamaños{
   font-size: 22px; 
   font-family: Quicksand; 
   margin-top: 10px; 
   margin-left: 85px; 
   margin-right: 85px;
   text-align: center;
	
}

.logoRedes{
  display: flex;
   text-align: center;
   flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
  margin-top: 30px;
  margin-right: 30px;



}

.logoRedes1{
    display: flex;
     text-align: center;
     flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
    margin-top: 30px;
    margin-right: 30px;
  
  
  
  }
.contacto{
    background-color: gray;
    width: auto;
    padding-top: 3%;
    max-width: 1430px;
    margin: 0 auto;
    padding: 30px;
text-align: center;

}

.cajaEstudio{
    max-width: 1490px;
    margin: 0 auto;
    background-color: rgb(207, 203, 203);   
    padding-top: 50px;
    height:1199px;
    
   
    /* para dejar espacio por fuera de la caja el margin es por dentro */

} 

.input{
    width:20vw ;
    border-radius: 5px;
    border-color: rgb(0, 0, 0);
    height: 30px;
    font-family: Quicksand;
    font-size: 20px;

}
.inputGrander{
    width:40vw ;
    height: 200px;
    border-radius: 5px;
    border-color: rgb(0, 0, 0);
   



}

.formulario{
    margin-top: 30px;
   




}
.contenedorFormulario{
display: flex;
padding:  0 8vw;
font-family: Quicksand;


}
.elestudio{
    display: flex;
    max-width: 1100px;
    margin: 0px auto;
    width: auto;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    background-color: #ffffff;
    /* margin-left: 160px; */
    padding-top: 50px;




}

.primeraCaja{
    display: flex;
    background-color: gray;
    flex-wrap: wrap;
    /* padding: 30px; */
    justify-content: center;
    max-width: 1430px;
    margin: 0 auto;
    padding-top: 70px;
    padding-bottom: 70px;
    padding: 30px;

}
.textoServicios{
    color: black;
    text-decoration: none;
}

a{
    text-decoration: none;
}
/* es para cambiar el color de las letras cuando pones cursor encima */
.textoServicios:hover {
    color: #7f807e;

  }
.segundaCaja{
    /* margin-top: 100px;
    margin-right: 100px;
    margin-left: 100px; */
    max-width: 1430px;
    background-color: #ffffff;
    height: 400px;
    width: 390px;
    border-radius: 30px;
    text-align: center;
    overflow: hidden;
}
.terceraCaja{
    /* margin-top: 100px; */
    max-width: 1430px;
    background-color: #ffffff;
    height: 400px;
    width: 390px;
    border-radius: 30px;
    text-align: center;
    overflow: hidden;



}
.cuartaCaja{
    /* margin-top: 700px; */
    background-color: #ffffff;
    height: 400px;
    width: 390px;
    border-radius: 30px;
    text-align: center;
    overflow: hidden;
    max-width: 1430px;




}
.quintaCaja{
    /* margin-top: 700px; */
    background-color: #ffffff;
    height: 400px;
    width: 390px;
    border-radius: 30px;
    text-align: center;
    overflow: hidden;
}

 .segundaCaja,.terceraCaja,.cuartaCaja,.quintaCaja{

    margin: 60px;
 }

 .primeraCajaProducciones{
    width: auto;
    height: auto;
    max-width: 1430px;
    margin: 0 auto;
    display: flex;
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    flex-wrap: wrap;
    padding: 60px;
    justify-content: center;
    /* se utiliza para separar los divs dentro de una estructura de Grid */
    gap: 90px;



}
.primeraCajaProducciones5{
    width: auto;
    height: auto;
    max-width: 1430px;
    margin: 0 auto;
    display: flex;
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    flex-wrap: wrap;
    padding: 60px;
    justify-content: center;
    /* se utiliza para separar los divs dentro de una estructura de Grid */
    gap: 90px;



}


.cajaProducciones{
    background-color: none;
    height: 450px;
    width: 470px;
    text-align: center;
    
}

.cajaProducciones1{
    margin-top: 30px;
    background-color: none;
    height: 450px;
    width: 470px;
    text-align: center;
    
}
.cajaProducciones2{
    margin-top: 30px;
    background-color: none;
    height: 450px;
    width: 470px;
    text-align: center;
    
}
.cajaProducciones3{
    margin-top: 30px;
    background-color: none;
    height: 450px;
    width: 470px;
    text-align: center;
    
}
.mellotro{
    height: 500px;
    width: 550px;

}

.cajaProduccionesTexto{
/* se utiliza para ceñir el texto a un margen */
word-wrap: break-word;
background-color: none;
text-align: left;
height: 500px;
width: 570px;
border-radius: 30px;
font-size: 23px;
font-family: 'Quicksand';

}

.cajaProduccionesTexto1{
    /* se utiliza para ceñir el texto a un margen */
    word-wrap: break-word;
    background-color:none;
    text-align: center;
    height: 500px;
    width: 500px;
    border-radius: 30px;
    font-size: 23px;
    font-family: 'Quicksand';
    padding: 15px;
    


    }
    .cajaProduccionesTexto5{
        /* se utiliza para ceñir el texto a un margen */
        word-wrap: break-word;
        background-color:none;
        text-align: center;
        height: 500px;
        width: 500px;
        border-radius: 30px;
        font-size: 23px;
        font-family: 'Quicksand';
        padding: 15px;
        
    
    
        }
    .cajaProduccionesTexto2{
        /* se utiliza para ceñir el texto a un margen */
        word-wrap: break-word;
        background-color:none;
        text-align: center;
        height: 500px;
        width: 500px;
        border-radius: 30px;
        font-size: 23px;
        font-family: 'Quicksand';
        padding: 15px;
    
    
        }

.cajaProducciones img,.cajaProducciones1 img,.cajaProducciones2 img,.cajaProducciones3 img{
    border-radius: 20px;
    width: 550px;
    height: 450px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.cajaProducciones,.cajaProducciones1 img,.cajaProducciones2 img,.cajaProducciones3 img.cajaProduccionesTexto{

    margin: 30px;
 }

.foto{

	max-width: 1300px;
    margin-left: 3%;
}
.foto2{
	max-width: 1100px;
    height: 900px;
   


}

.chute{
    width: 1100px;
    height:870px;
    overflow: hidden;
    margin-top: 30px;

}
.cajaFoto2{
    margin-top: 30px;
	max-width: 1100px;
    

}


.logoFooter{
    max-width: 120px;

}

.contenedorTrabajos {
    display: grid;
    max-width: 1400px;
    grid-template-areas:  'txt txt txt' 'iz cen der' 'iz2 cen2 der2';
    padding: 90px;
    gap: 100px;
    padding-bottom: 100px;
    background-color: #ece9e9 ;
    /* para centrar */
    margin:0 auto;
    padding-right: 0px;


}

.contenedorUltimoTrabajo {

    max-width: 1400px;
    padding: 90px;
    gap: 100px;
    padding-bottom: 100px;
    background-color: #ece9e9 ;
    /* para centrar */
    margin:0 auto;
    padding-right: 0px;
    text-align: center;
    margin-top: -80px;
   


}
.ultimovideo{
    margin-right: 75px ;
    width: 720px; 
    height: 476px;
	border-radius: 60px;
}

.contenedor .izquierda,
.contenedor .centro,
.contenedor .derecha {
   margin-top: 30%;
}


.contenedor .izquierda,
.contenedor .centro,
.contenedor .derecha,
.contenedor .izquierda2,
.contenedor .centro2,
.contenedor .derecha2  {
    width: 100%;
    height: 100%;


}


.izquierda {
    grid-area: iz;
}
.centro {
    grid-area: cen;
}

.derecha {
    overflow: hidden;
    grid-area: der;
}
.izquierda2 {
    grid-area: iz2;
}
.centro2 {
    grid-area: cen2;
}

.derecha2 {
    overflow: hidden;
    grid-area: der2;
}
.texto {
    text-align: center;
    grid-area: txt;
}
.letrasGrabaciones{
    font-family: Noto Serif; 
    font-size: 80px; 
    text-align: center; 
    color: #908f90;
}
.letrasGrabaciones2{
    max-width: 1400px;   
    font-family: Noto Serif; 
    font-size: 80px; 
    text-align: center; 
    color: #908f90;
    background-color: #ece9e9 ;
    padding-top: 20px;
    margin:0 auto;
    padding: 45px;
    margin-top: -40px;
    
   
}


.zoom {
   transition: transform 1s;
   /*Animation*/width: 50px;
   height: 50px;
   position: absolute;
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: -400px;
   -webkit-transition: transform 1s;
   -moz-transition: transform 1s;
   -ms-transition: transform 1s;
   -o-transition: transform 1s;
}
  .zoom2{
    transition: transform 1.2s; /* Animation */
    width: 200px;
    height: 300px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    
  }
  .zoom3{
    transition: transform 1s; /* Animation */
    width: 200px;
    height: 840px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
   
    
  }
  .zoom4{
    transition: transform 0.5s; /* Animation */
    max-width: 1430px;
    height: 840px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;

 
  }
  .zoom5{
    transition: transform 1.2s; /* Animation */
    width: 200px;
    height: 300px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    
  }
  .zoom:hover {
    transform: scale(1.1);
    /*opacity: 0.4;
    *//*(150%zoom-Note: if the zoom is too large, it will go outside of the viewport) */  ;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}


  .zoom2:hover ,.zoom5:hover {
    transform: scale(1.2);
    /* opacity: 0.4; */
     /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }
  .zoom4:hover {
    transform: scale(1);
    /*opacity: 0.4;
    *//*(150%zoom-Note: if the zoom is too large, it will go outside of the viewport) */  ;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}

  .logo{
    max-width: 300px;

/* position: absolute; */
    /* right:40%; */


}


/* #menu {
	background-color:rgb(162, 162, 250) ;
margin: 0;
} */
 .fondoEquipo{
    
    max-width: 1430px;
    background-image: url("fondoRosa.png");
    background-size: cover;
    background-position: center;
    height: 2600px;
    margin:0 auto;
    text-align: center;
    gap: 90px;

 }
 .totoburra{
    width: 1000px; 
    align-items: center;
    margin: 0 auto; 
    height: 700px; 
    padding-top: 30px;
 }

 

 @media (max-width:768px) {
    .cajaProducciones,
    .cajaEstudio
    .totoburra,
    .cajaProduccionesTexto {
        margin: 0px;
    }
   .logoFooter{
        max-width: 60px;
    }
    .cajaProducciones1{
        margin-top: -50px;
        margin-right: 60px;

    }
    .cajaProducciones2{
        margin-top: 250px;
        margin-bottom: -100px;
    }
    .cajaProducciones3{
        margin-top: 90px;

    }
    /* .cajaProduccionesTexto{
        margin-top: 10%;
        word-wrap: break-word;
        background-color:none;
        text-align: left;
        width: 600px;
        font-size: 23px;
        font-family: 'Quicksand';
        
    } */
   
    .cajaProducciones,.cajaProducciones1{
        background-color: none;
        height: 500px;
        width: 600px;
        }
        .cajaProducciones img,.cajaProducciones1 img{
            border-radius: 20px;
            text-align: center;
            width: 550px;
           margin-top: 70px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            -ms-border-radius: 20px;
            -o-border-radius: 20px;
        }
        
      
    .imagenesRedondeadas {
        /* no me hace caso!!!!! */
        width: 400px;
        height: 300px;
        text-shadow: 3px;
        border-radius: 30px 30px 0 0;
    }
    
    .primeraCajaProducciones {
        overflow: hidden;
        
    }
    .imagen2 {
        
        margin: 0 auto;
        max-width: 1430px;
    }
    .contenedorTrabajos {
        display: grid;
        max-width: 800px;
        grid-template-areas:  'txt' 'cen' 'der' 'iz' 'iz2' 'der2' 'cen2';
        padding: 70px;
        gap: 90px;
        padding-bottom: 0px;
        background-color: #ece9e9 ;
        /* para centrar */
        justify-content: center;
        padding-top: 70px;
        padding-bottom: 60px;
    }
  
    .ultimovideo{
        width: 450px; 
        height: 290px;
        margin-left: -90px;
    }
    
    .contenedorUltimoTrabajo {

        overflow: hidden;
       
    
    
    }
    .texto {
        text-align: center;
        grid-area: txt;
        overflow: hidden;
        
    }
   
    .letrasGrabaciones{
        margin-top: 30px;
        font-family: Noto Serif; 
        font-size: 30px; 
        text-align: center; 
        color: #908f90;
        background-color: #ece9e9 ;
        margin-bottom: -30px;
    }
    .letrasGrabaciones2{
        
        font-family: Noto Serif; 
        font-size: 50px; 
        text-align: center; 
        color: #908f90;
        background-color: #ece9e9 ;
        margin-bottom: -20px;
        
       
    }
    .cajaEstudio{
        max-width: 1490px;
        margin: 0 auto;
        background-color: rgb(207, 203, 203); 
        padding-top: 50px;
        height:900px;
        
       
        /* para dejar espacio por fuera de la caja el margin es por dentro */
    
    } 

.logoRedes1{
    display: flex;
     text-align: center;
     flex-wrap: wrap;
    justify-content: center;
    width:930px ;
    gap: 60px;
    margin-top: 30px;
    margin-right: 30px;
}
  
.letrasTamaños{
        font-size: 15px; 
        font-family: Quicksand; 
        margin-top: 10px; 
        margin-left: 25px; 
        margin-right: 25px;
        text-align: left;
     }
  
  .foto2{
	max-width: 700px;
    margin-top: -210px;
    height: 550px;


}
.elestudio{
    display: flex;
    max-width: 1500px;
    width: auto;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    background-color: rgb(207, 203, 203); 
    /* margin-left: 160px; */

}
.chute{
    width: 1100px;
    height:590px;
    margin-top: 30px;
    overflow: hidden;

}
.cajaServiciosServicios{
    background-color:none;
    width: auto;
    max-width: 1430px;
    margin: 0 auto;
    padding: 10px;
    padding-top: 50px;



}
.cajaServiciosServicios7{
    background-color:none;
    margin-top:  80px;
    max-width: 1430px;
    padding: 0px;
    padding-top: 50px;

}
.cajaServicios1{
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    padding: 3px;
    padding-top: 50px;
}
.cajaServicios1a{
    background-color: #ffffff ;
    width: auto;
    max-width: 1430px;
    margin: 0 auto;
    padding: 3px;
    padding-top: 50px;
    

}
.totoburra{
    
    
    margin-top: 30px;
 }


 .primeraCaja{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: gray;

}
.segundaCaja{
    /* margin-top: 100px;
    margin-right: 100px;
    margin-left: 100px; */
    
    background-color: #ffffff;
    height:400px;
    width: 230px;
    border-radius: 30px;
    text-align: center;
    overflow: hidden;
}
.terceraCaja{
    /* margin-top: 100px; */
    max-width: 1430px;
    background-color: #ffffff;
    height: 400px;
    width: 230px;
    border-radius: 30px;
    text-align: center;
    overflow: hidden;



}
.cuartaCaja{
    /* margin-top: 700px; */
    background-color: #ffffff;
    height: 400px;
    width: 230px;
    border-radius: 30px;
    text-align: center;
    overflow: hidden;
    max-width: 1430px;




}
.quintaCaja{
    /* margin-top: 700px; */
    background-color: #ffffff;
    height: 400px;
    width: 230px;
    border-radius: 30px;
    text-align: center;
    overflow: hidden;
}

.cajaProduccionesTexto{
    /* se utiliza para ceñir el texto a un margen */
    word-wrap: break-word;
    background-color: none;
    text-align: left;
    height: 550px;
    width: 1000px;
    border-radius: 30px;
    margin-bottom: 140px;
    font-size: 17px;
    font-family: 'Quicksand';
    margin: -20px;
    margin-top: 10px;
    
    }
    .cajaProduccionesTexto1{
        /* se utiliza para ceñir el texto a un margen */
        word-wrap: break-word;
        background-color:none;
        text-align: left;
        height: 500px;
        width: 500px;
        border-radius: 30px;
        font-size: 23px;
        font-family: 'Quicksand';
        padding: 15px;
        margin-bottom: 250px;
    
    
        }
        .cajaProduccionesTexto2{
            /* se utiliza para ceñir el texto a un margen */
            word-wrap: break-word;
            background-color:none;
            text-align: left;
            height: 500px;
            width: 1000px;
            border-radius: 30px;
            font-size: 20px;
            font-family: 'Quicksand';
            padding: 0px;
            margin-bottom: 30px;
        
        
            }
            .cajaProduccionesTexto5{
                /* se utiliza para ceñir el texto a un margen */
                word-wrap: break-word;
                background-color:none;
                text-align: center;
                height: 450px;
                width: 1000px;
                border-radius: 30px;
                font-size: 20px;
                font-family: 'Quicksand';
                margin-bottom: 0px;
                
            
            
                }
                .primeraCajaProducciones5{
                    width: auto;
                    height: auto;
                    max-width: 1430px;
                    margin: 0 auto;
                    display: flex;
                    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
                    flex-wrap: wrap;
                    padding: 30px;
                    justify-content: center;
                    /* se utiliza para separar los divs dentro de una estructura de Grid */
                    gap: 30px;
            
                }
                .fondoEquipo{
    
                    max-width: 1460px;
                    background-color: #8ec5fc;
                    background-position: center;
                    height: 1850px;
                    margin:0 auto;
                    text-align: center;
                    gap: 30px;
                
                 }
   
}

.btn-wsp{
      position: fixed;
      width: 55px;
      height: 55px;
      border-radius: 50px;
      background: rgb(119, 255, 0);
      color: white;
      line-height: 55px;
      bottom: 30px;
      right: 30px ;
      text-align: center;
      font-size: 30px;
      box-shadow: 0px 1px 10px rgb(0,0,0,0.3);
      z-index: 100;     
    }
       .btn-wsp:hover{
        text-decoration: none;
        color: rgb(102, 255, 0);
        background: rgb(156, 203, 248);
        animation: shake 1s;
        animation-iteration-count: infinite;

      }
    
      @keyframes shake{
        0% { transform: rotate(0deg); }
        0% { transform: translateY(0) }
        25% { transform: translateY(5px) }
        50% { transform: translateY(-5px) }
        75% { transform: translateY(5px) }
        100% { transform: translateY(0) }

}

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
        display: none;
        overflow: hidden;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
        background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
            }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav {
        display: block;
    }
    .topnav a.active {
        display: none;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}