/*General*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}



body{
    font-family: Roboto;
}

/*Header*/
.container-fluid {
    padding-right:0;
    padding-left:0;
    margin-right:auto;
    margin-left:auto
 }

header{
    width: 100%;
    height: 100vh;
    background: url("../images/header_2.jpg")no-repeat 50% 50%;
    background-size: cover;
    z-index: 100;
}

.fila-superior{
    background: rgba(0, 0, 0, 0.6);
}

.logo {
    margin-top: 20px;
    margin-left: 80px;    
}

.contacto-superior{
    padding: 20px;
}
.contacto-superior a{
    display: block;
    color: #ffffff;
    text-decoration: none;
}
.contacto-superior a:hover{
    color:#ffffff;
}


/*Redes sociales y contacto*/
/*whatsapp*/
.whatsapp .fa-circle{
    color: #009688;
}
.whatsapp:hover .fa-circle{
    color: #ffffff;
}

.whatsapp:hover .fa-whatsapp{
    color:  #009688;
}

/*facebook*/
.facebook .fa-circle{
    color: #39559F;
}
.facebook:hover .fa-circle{
    color: #ffffff;
}

.facebook:hover .fa-facebook-official{
    color:  #39559F;
}

/*Mail*/

.mail .fa-circle{
    color: #DC9924;
}
.mail:hover .fa-circle{
    color: #ffffff;
}

.mail:hover .fa-envelope{
    color:  #DC9924;
}

/*Como llegar*/
.como-llegar{
    padding: 20px;
}
.como-llegar a{
    text-decoration: none;
    color:#ffffff;
}

.como-llegar a:hover .fa-location-arrow{
    color: #ad3f3f;
}

/*Horario*/

.horario{
    color: #ffffff;    
}


nav{
    width: 100%;
    z-index: 100;
    position: static;
}

nav ul{
    list-style:none;
     background: rgba(0, 0, 0, 0.6);
     overflow: hidden;
     color: #ffffff;
     padding: 0;
     text-align: center;
     margin: 0;
     z-index: 100;
     transition: 1s;
     
}

#small-logo{
    display: none;
    margin-left: 80px;
    margin-top: 20px;
}

nav ul li {
    display: inline-block;
    padding: 20px;
    z-index: 100;
}

nav ul li a{
    text-decoration: none;
    color: #ffffff;
}

nav ul li a:hover{
    color: #b15fb1;
    text-decoration: none;
}

.menu-icon{
    width: 100%;
    background: #000000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #ffffff;
    display: none;
}

.servicios{
    text-align: center;
    margin: 5%;
    font-weight: bold;
    color: #ffffff;
}

/*Fin del header*/

/*Contenido*/
.contenido{
    background-image: url("../images/symphony.png");
}
/*Galeria*/
.galeria{
}

.galeria h3{
    text-align: center;
    color: #5e5e5e;
}

.galeria .fa-picture-o{
    color: #b15fb1;
}

.galeria img{
    width: 100%;
    height: 100%;
}
.galeria a{
    margin-top: 30px;
}

.galeria .btn-secondary{
    background-color: #b15fb1;
}

.card{
    margin-top: 30px;
}

/*Ubicacion y contacto*/
.ubicacion-contacto h3{
    text-align: center;
    color: #5e5d5d
}

.ubicacion-contacto .fa-user-circle{
    color:  #666565;
}

.ubicacion-contacto .fa-map-marker{
    color:  #ad3f3f;
}

/*Mapa*/
#mapa{
    display: inline-block;
    width: 100%;
    height: 400px;
    padding: 10px; 
}
/*Contacto inferior*/
.contacto-inferior{
    font-weight: bold;
    
    
}
.contacto-inferior a{
    display: inline-block;
    color: #363636;

}
.contacto-inferior a:hover{
    color: #000000;
    text-decoration: none;
}

.contacto-inferior ul{
    list-style: none;
}

.auto{
    margin-top: 10%;
    margin-left: 10%;
   
}

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

/*Footer*/
footer{
    background-color:  #000000;
    color: #ffffff;
    padding: 10px;
}

footer a{
    color: #ffffff;
}
footer a:hover{
    color: #DC9924;
    text-decoration: none;
}
@media(max-width:580px){
    .logo{
        top:0;
        margin-top: 16px;
        padding: 10;
        margin: 10;
    }

    .logo img{
        width: 70%;
        height: 70%;
    }
    nav{
        z-index: 100;
        width: 100%;
    }

    nav ul{
        max-height: 0px;
        background:rgba(0, 0, 0,.6);
        overflow: hidden;
        z-index: 100;
    }

    .showing{
        max-height: 20em;
    }
    
    nav ul li{
        box-sizing: border-box;
        display: inline-block;
        width: 100%;
        padding: 24px 0;
        text-align: center;
        z-index: 100;
    }

    .menu-icon{
        display: inline-block;
        background-color: rgba(0, 0, 0,.6);
        z-index: 100;
    }

}