*{
    margin:0;
    padding:0;
}


body{
  
  padding: 0px;  
  
        background-image: url(/imagenes/fondo2.jpeg) ;          /*(imagenes/fondo2.jpeg); */
        background-position: top;
        background-attachment: fixed;
        background-repeat: no-repeat; 
        background-size: 100%;

    
    font-family: 'Muli', sans-serif;
   z-index: -1; 
}

.contenedor {
    width: 100%;

}

.container-formas-general{
    width: 300px;
    color: white;
}

.container-formas{
    box-shadow: 3px 3px 8px #5681a6;
    border-style: solid;
    margin-bottom: 10px;
    max-width: 200px;
    border-width: 0.2px;
   /*  border-color: red;
   background-color: red;*/
}
.boton-clases-formas{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: row;
    color: white;
    text-decoration: none;
}

.flecha-formas{
    width: 50px;
    height: 50px;
}

.header{
    position:fixed;
    z-index:2;
    width: 100%;
    background-color: black;
   
   padding:10px;
    color: white;
  /*  display: grid;*/
    grid-template-areas: "col1 col2 col3";
}

.cuerpo-header{

/*    grid-area: col2;*/
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.titulo {
    display:none;
    font-family: 'Josefin Sans', sans-serif;
    color:black;
    /*color: white;
    font-family: 'Comic Neue', cursive;*/
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    /*display: flex;*/
    justify-content: center;
    text-align: center;
    max-width:300px;
    /*background-color:rgba(204, 204, 204, 70%) ;*/
}

.clase{
    margin-right: 10px;
}

.profesores{
    padding-top: 10px;
    padding-bottom: 10px;
}

.online{
    margin-left: 10px;
}

.imagen-header{
    border-left-style: solid;
    border-right-style: solid;
    border-color: white;
    border-width: 1px;
    padding-left: 10px;
    padding-right: 10px;
    width: 40px;
}




.clases{

    margin: auto;
    max-width: 300px;
    padding-left: auto;
    padding-right: auto;
}

ul, ol{
    list-style: none;
}

.nav li  a{
    /* background-color: #99a8ff; */
    background-color: #ff4900;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    border-bottom-style:solid ;
    border-bottom-color: #1e2024;
    margin-left: auto;
    margin-right: auto;
    
}

.nav li ul {
    display: none;
    background-color: #99a8ff;

}

/* .nav li:hover >ul{
    display: block;

} */

.boton{
    min-width: 300px;
    border-style: none;
    /* border-right-style: solid;
    border-bottom-style: solid; 
    background-color: red;
    /* border-color: #267dc9; */
  min-height: 50px;
    color: red;
    position: relative;
    box-shadow: 3px 3px 8px #5681a6;
}


.boton-boton{
    min-width: 40px;
    border-style: none;
    /* border-right-style: solid;
    border-bottom-style: solid; */
    background-color: #174a75;
    /* border-color: #267dc9; */
    min-height: 30px;
    color: white;
    position: relative;
    box-shadow: 3px 3px 8px #5681a6;
}




.boton-formas{
    min-width: 200px;
    border-style: none;
    /* border-right-style: solid;
    border-bottom-style: solid; 
    background-color: #174a75;
    /* border-color: #267dc9; */
    min-height: 30px;
    color: white;
    position: relative;
    box-shadow:3px 3px 8px #5681a6;
}

.alerta{
    display: none;
    align-content: center;
    justify-content: center;
    text-align: center;
    align-items: center;
    min-height: 50px;
    max-width: 250px;
    color: white;
    background-color: orange;
    border-radius: 10px;   
}

.boton::after{
    position: absolute;
    bottom: 0px;
    right: 0px;
    content: ' ';
    width: 100%;
    height: 70%;
  /*   background-color: white; */
/*     background: linear-gradient(to right, #0f2027, #203a43, #2c5364); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  filter: blur(1px);
    z-index: -1 ;
}

.nav li  a:hover{
    background-color: #ff5f1f;
}

.footer{
    background-color: black;
    width: 100%;
    
}


@media (max-width:760px){
        body{
        background-color:#030521;
        background-image: url(/imagenes/foto3.jpeg);              /*(/imagenes/foto3.jpeg);*/
        background-position: top;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    
    .titulo{
        display:none;
    }

}