*
html{ 
    font-size: 62%;
    box-sizing: border-box;
}

body{
    background:url(../img/hojas.jpg);
}

.cabecera{
    padding: 1rem;
    margin-top: -1rem;
    margin-left: -1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: fit-content;
    background-color: rgba(0, 0, 0, 0.5);
}

.logo{
    text-transform: capitalize;
    display: block;
    margin: 0%;
    color: orange;
    font-size: x-large;
    text-decoration: none;
}

.menu{
    display: flex;
    flex-direction: row;
}


.op{
    text-decoration: none;
    display: block;
    margin-left: 0.5rem;
    margin-right: 1.8rem;
    color: orange;
    text-transform: capitalize;
}

.si{
    font-size: small;
    margin: 0.3rem;
    text-decoration: none;
    color: orange;
    text-transform: capitalize;
}

.st{
    font-size: small;
    margin: 0.3rem;
    text-decoration: none;
    color: orange;
    text-transform: capitalize;
}

.cartel{

    width: auto;
    padding: 5%;
    padding-top: 10%;
    margin: 1rem;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: larger;
    color: lightsalmon;

}

.grande{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: black;
padding:4.1%;
margin: -1rem;
}

.galeria{
    background-color: rgb(248, 198, 133);
    padding: 2%;
    margin: -1rem;
    height: min-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.mitad1{
        
        margin: -1rem;
        padding: 0.5%;
        
}

.cuatros{
    display: flex;
    flex-direction: row;
    padding-left: 1.4%;
    padding-right: 1.4%;
    

}

.primero{
    width: 50%;
    margin-left: 4%;
    margin-right: -1.5%;
    
}

.segundo{
    width: 50%;
    margin-right: 4%;
   
    

}

.cua{
    background-color: rgb(245, 176, 111);
    margin:3%;
    width: auto;
}


.oto{
    width: 100%;
    height: auto;
}

.noticia{
    margin-top: 1rem;
    background-color: rgb(245, 176, 111);
}

.nov{
    margin: auto;
    margin-top: -4.5rem;
    text-transform: capitalize;
    color: rgb(0, 0, 0);
}

.titulo{
    background-color: rgb(245, 176, 111);
    margin-top: -1%;
    text-transform: capitalize;
}

.lorem{
    margin-top: -5%;
    text-transform: capitalize;
}

.leer{
    padding: 2%;
    background-color: orange;
    color: rgba(0, 0, 0, 0.425);
    font-size: small;
    text-transform: capitalize;
    text-decoration: none;
}
.barra1{
    background-color: rgb(233, 192, 155);
    display: flex;
    flex-direction: row;
    margin-left: 6.6%;
    margin-right: 6.6%;
    padding: 0.2%;
    padding-left: 1.5%;
    padding-top: 1%;
    

}

.op2{
    text-transform: uppercase ;
    font-size: x-small;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-right: 5%;
    text-decoration: none;
    color: rgb(0, 0, 0);
}

.treses{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: auto;
    padding: 0%;
    margin-top: 5%;
    margin-left: 3.5%;
    margin-right: 3.5%;
    
}

.tri{
    color: orange;
    background-color: orange;
    width: 33%;
}

.aside{
    margin-top: 0rem;
    display: block;
    color: rgb(243, 197, 136);
    background-color:orange;
    width: 100%;
    text-transform: uppercase ;
}


.otos{
    margin-top: -1.3rem;
    width: 100%;
    height: auto;
}

.barra2{
    background-color: orange;
    width: 90%;
    height: fit-content;
    margin-top: 3%;
    padding: 0.5%;
    justify-content: center;
    align-items: center;
  

}

.fin{
    color: white;
    text-align: center;
    margin: 0%;
    font-size: x-small;
    text-transform: uppercase;
}


@media (min-width: 800px){

    .cabecera{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: fit-content;
    }

    .logo{
        margin-left: 1.5%;
    }

    .menu{
        margin-right: 25% ;

       
    }


    .op{
        margin-right: 1.1rem;
        margin-left: 1.1rem;
    }

    .redes{
     margin-right: 2.2% ;
    }

    .grande{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgb(216, 226, 226);
        padding:2.1%;
        padding-left: 1.1%;
        padding-right: 1%;
        margin: -1rem;
        }

    .galeria{
        background-color: rgb(216, 226, 226);
        padding: 2%;
        padding-left: 0%;
        margin: -1rem;
        height: min-content;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        
     
        
    }
    
    .mitad1{
            
        width: 70%;
            margin: -1rem;
            margin-right: -4.9%;
            margin-top: -2.1%;
            padding: 0.5%;
            
    }
    
    .cuatros{
        display: flex;
        flex-direction: row;
        padding-left: 0%;
        padding-right: 1.4%;
        
    
    }
    
    .primero{
        width: 50%;
        margin-left: 0%;
        margin-right: -1.5%;
        
    }
    
    .segundo{
        width: 50%;
        margin-right: 4%;
        
    
    }
    
    .cua{
    
        margin:  3%;
        background-color: rgb(161, 201, 174);
        width: auto
       
    }
    
    
    .oto{
        width: 100%;
        height: auto;
    
    }
    
    .noticia{
        padding: 4%;
    }
    
    .nov{
        margin: auto;
        margin-top: -4.5rem;
        text-transform: capitalize;
        color: rgb(250, 250, 236);
    }
    
    .titulo{
        margin-top: -1%;
     text-transform: capitalize;
    }
    
    .lorem{
        margin-top: -5%;
        text-transform: capitalize;
    
    }
    
    .leer{
        padding: 2%;
        background-color: black;
        color: white;
        font-size: small;
        text-transform: capitalize;
        text-decoration: none;
    }
    .barra1{
        background-color: rgb(0, 0, 0);
        display: flex;
        flex-direction: row;
        margin-left: 1.4%;
        margin-right: 6.8%;
        padding: 0.2%;
        padding-left: 1.5%;
        padding-top: 1%;
        
    
    }
    
    .op2{
        text-transform: uppercase ;
        font-size: x-small;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        margin-right: 5%;
        text-decoration: none;
        color: rgb(255, 255, 255);
    }
    
    .treses{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 30%;
        
        padding: 0%;
        margin-top: -0.601%;
        margin-left: 0%;
        margin-right: 0%;
        
    }
    
    .tri{
        
        
        width: 103.62%;
    }
    
    .aside{
        margin-top: 0rem;
        display: block;
        color: rgb(255, 255, 255);
        background-color: black;
        width: 100%;
        text-transform: uppercase ;
    }
    
    
    .otos{
        margin-top: -1.3rem;
        width: 100%;
        height: auto;
    }
    
    .barra2{
        background-color: black;
        width: 100%;
        height: fit-content;
        margin-top: 3%;
        margin-right: -10rem;
        margin-left: -10rem;
        padding: 0.5%;
        justify-content: center;
        align-items: center;
      
    
    }
    
    .fin{
        color: white;
        text-align: center;
        margin: 0%;
        font-size: x-small;
        text-transform: uppercase;
    }
}