@import url("https://fonts.googleapis.com/css?family=Titillium+Web");
#contenedor {
position: relative;
text-transform: uppercase;
font-size: 1em;
width: 100%;
font-family: Titillium Web;
font-weight: bolder;
}
#contenedor > .despliega{
margin-top:15px;
display:none;
color:white;
background-color: #e4202c;
cursor:pointer;
padding:10px;
}
#contenedor > .despliega >.icon:before{
font-family: FontAwesome;
padding-right: 10px;
content: '\f0fe';
padding-left:5px;
}
#contenedor > .despliega > .icondesplegado:before{
font-family: FontAwesome;
padding-right: 10px;
content: '\f146';
padding-left:5px;
}
#map {
margin: 0 auto;
height: 500px;
width: 100%;
}
#contenedor ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: stretch;
width: 100%;
margin: 0 auto;
list-style-type: none;
padding-left: 0px;
margin-bottom: 20px;
}
#contenedor ul li {
width: calc(100% * 0,11);
flex-grow: 0;
flex-basis: 1;
padding: 15px;
padding-left:5px;
margin: 1px;
display: inline;
border-bottom: 2px solid #fff;
}
#contenedor ul li:hover {
border-bottom: 2px solid #e4202c;
}
#contenedor ul li a {
color: grey;
text-decoration: none;
}
@media only screen and (max-width: 700px) {
#map {
height: 300px;
}
#contenedor ul {
justify-content: flex-start;
}
#contenedor ul li {
padding: 5px;
flex-basis: calc(100% * 0.30);
}
@media only screen and (max-width: 500px) {
#map {
display: none;
}
#contenedor > .despliega{
display:block;
}
#contenedor ul {
display:none;
justify-content: flex-start;
}
#contenedor ul li {
padding: 5px;
margin-left: 20px;
flex-basis: 100%;
position: relative;
text-align: center;
} }