.navbar{
    background-color: white;
    display: flex;
    padding: 5px 10px 5px 10px !important;
}

.logo{
    height: 4rem;
}

.btn-bars{
    font-size: 1.5rem;
    line-height: 2rem;
    cursor:pointer;
    margin-right: 15px;
}

/* .menu{
    display: flex;
    flex-direction: column;
} */

.menu ul{
    padding-left: 0px !important;
}

.menu ul li{
    list-style: none;
    border-top: 1px solid lightgrey;
    padding: 11px 0px;
}

.menu ul li:hover a{
    color: #5a8abb;
}

.menu ul li a{
    display: block;
    position: relative;
    text-decoration: none;
    color: #000;
    font-size: 1rem;
    font-weight: 400;
}

footer{
    padding: 40px;
    background-color: #030339;
    color: lightgray;
}

footer p{
    margin-bottom: 0.5rem;
}

.socials{
    display: flex;
    justify-content: space-evenly;
    margin-top: 40px;
}

.social:hover{
    background-color: #808184;
    color: white;
    border-radius: 50%;
}

.social a{
    border: 2px solid lightgray;
    border-radius: 50%;
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
}

.social i{
    font-size: 20px;
    font-weight: 400;
}

.politicas li{
    margin-bottom: 15px;
}

.copy{
    padding: 20px;
    /* background-color: #283470; */
    background-color: #ffff;
    font-weight: 600;
}

.menu-footer ul{
    list-style: none;
    text-align: center;
}

.menu-footer ul li{
    margin-bottom: 15px;
}

.menu-footer ul li a{
    text-decoration: none;
    color: lightgray;
}

.imagen-footer{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 12rem;
}

.imagen-footer img{
    height: 12rem;
    object-fit: cover;
    object-position: center center;
}

/*
  =====================================
  CSS for <iframe> embedded Google Map
  =====================================
*/
.mapWrapper {
    position: relative;
    /*
    Do math with the height of your iframe divided by the width, then converted to percent
    In this example the height is 400 and the width is 600
    400 / 600 = .66666667
    which is 66.6666667% */
    padding-bottom: 36.363636363%;
    height: 0;

}
.mapWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* This sets an overlay element that covers the map and helps prevent people from zooming the map while scrolling. */
.overlay {
   background:transparent;
   position:relative;
   width:100%;
   height:100%;
   z-index: 1;
}