* {
    box-sizing:border-box;
}

.content-area{
    max-width: 1224px;
    margin: 0 auto;
}

p {
    margin-top: 0;
    margin-bottom: 20px;
   
    line-height: 1.8;
}


html{
    height:100%;
}

body{
    display: grid;
    grid-template-rows: auto 1fr auto;

    background-repeat: no-repeat;
    background-position: top right;
    background-size: auto;
    min-height: 100vh;

    padding:0;
    margin:0;
    font-size: 18px;
    font-family: Raleway,Arial, Helvetica, sans-serif;
    
    color: #777;
    
    
}

footer{
 margin:unset;
}

.content-footer{
    display:flex;
}

.content-footer div{
    padding:10px;
}

.footer-direccion{
    width:50%;
}

.footer-telefono{
    width:50%;
}


@media screen and (max-width: 700px) {
    .content-footer{
       flex-direction: column;
    }
    .content-footer div{
        width: 100%;
    }

    

}

header{
    padding-top:5px;
}

#tiles{
    height:280px;
    border:5px solid rgb(208,182,93);
    border-radius: 10px 10px;
    z-index: 100;
    position: relative;
    background-color:white;
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.tile{
    flex:25%;
    text-align: center;
   
    background-size: contain;
}

.tile h1{
    color:white;
    text-shadow:2px 2px black;
}

#tile1{
   
    background-image:url(imagenes/mucheGreen2.jpg)
}
#tile2{
   
    background-image:url(imagenes/mucheYellow2.jpg)
}
#tile3{
   
    background-image:url(imagenes/mucheRed2.jpg)
}
#tile4{    
    
    background-image:url(imagenes/mucheBlue2.jpg)
}


#menu-bar{
    background-color:#E6E2D2;
    border-top:5px solid rgb(208,182,93);
    margin-top:-30px;
    padding-top:24px;
}

#nombreesipa, #nombreesipashort{
    font-family: Algerian; font-size: 40pt;
}

#nombreesipashort{
    display:none;
}

#logoesipa{
    float: left;
    margin-left: -124px;
}

.contacto{
    float: right;
    margin-top: -50px;
    margin-right: 10px;
}

.contacto img{
    padding-left:15px;
}

.contacto a{
    vertical-align: super;
}

@media screen and (max-width: 1500px) {
    .content-area{
        margin-left:144px;
        margin-right:24px;
    }

}


@media screen and (max-width: 1100px) {
    .tile{
        background-repeat:repeat;
        background-size:unset;
    }



}


@media screen and (max-width: 890px) {

    .content-area{
        margin-left:24px;
        margin-right:24px;
    }

    #logoesipa{
        float: left;
        margin-left: 0px;
        width:60px;
    }

}




@media screen and (max-width: 750px) {
    .topnav .aec_menuitem{
        padding-left:10px;
        padding-right:10px;
 
    }
    .aec_submenu .aec_menu_dropbtn {
        padding-left:10px;
        padding-right:10px;
        background-color: #524c46;
    background-image: linear-gradient(13deg, #cdc0b0, #61a11c00);
        
    }

}

@media screen and (max-width: 680px) {

    #menu-bar {
        background-color:transparent;
        border:unset;
    }

    .contacto{
        display:none;
    }
}

@media screen and (max-width: 560px) {
    #nombreesipa{
        display:none;
    }
    #nombreesipashort{
        display:inline-block;
    }

    .content-area{
        margin-left:5px;
        margin-right:5px;
    }

    #tiles{
        height: unset;
    }


}