* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
  min-height: 100%;
  position: relative;
}
body{
  margin-bottom: 40px;
}
a, a:hover {
    color: black;
    text-decoration: none;
}

#logo a{
  display: flex;
  flex-flow: column;
}
#logo a img{
  flex: 30%;
  max-height: 400px;
  padding: 1rem;
}

#contenido{
  display: flex;
  flex-flow: column;
}

header{
  background-color: black;
  display: flex;
  flex-flow: column;
  text-align: center;
}
#titulo{
  font-family: 'Nunito', sans-serif;
}
#titulo{
  font-size: 3rem;
  color:white;
  padding: 1rem;
}

#tel{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  color:white;
  font-family: 'Anton', sans-serif;
  font-size: 2rem;
  padding:1rem;
}

#tel p{
  padding:0 1rem;
  color:white;
}
#tel a{
  color:white;
}

#contacto{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  font-size: 2rem;
  color:black;
  background-color: lightgray;
  padding: 0.5rem;
  border-bottom: 3px solid black;
}

#contactar{
  cursor: pointer;
  width: 130px;
  border-radius: 5px;
  background-color: black;
  font-size: 1rem;
  color:white;
  padding: 0.5rem 1rem;
  margin-left: 2rem;
}
main{
  display: flex;
  flex-flow: column;
}
#marcas{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding-top: 1rem;
  max-width: 1024px;
    align-self: center;
}

#marcas img{
  /*flex: 1 1 auto;*/
  max-height: 3rem;
  width: auto;
  padding: 0.2rem;
  flex: 1 1 auto;
}

footer{
  height: 20px;
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-flow:row wrap;
  justify-content: space-between;
  font-size: 0.9rem;
  font-family: 'Lato', Arial, sans-serif;
  margin-top: 2rem;
}

footer p{
  margin: 0 1rem;
}

@media (max-width: 600px) {
  footer{
    display: flex;
    flex-flow:column;
    text-align: center;
  }
  #marcas{
    display: flex;
    flex-flow: column;
  }

  #marcas img{
    flex: 100%;
    max-height: 3rem;
    width: auto;
    padding: 0.2rem;
  }
  #contactar{
    margin-left: 0;
  }
}
