@import url('https://fonts.googleapis.com/css?family=Armata|Karla');

body{
  margin: 0;
  padding: 0;
  background: #8093A0;
  min-width: 512px;
}

nav{
  background-color: white;
  width: 100%;
  height: 12vw;
  max-height: 7vh;
  font-family: 'Armata', sans-serif;
  font-weight: bold;
}

a{
  text-decoration: none;
  color:inherit;
}

h1 {
  margin: 0;
}

h2{
  margin: 0;
}

h3{
  margin: 0;
}

h4{
  margin: 0;
}

p{
  margin: 0;
}

.logo{
  width: 24%;
  height: 100%;
  float: left;
  background-image: url("img/logoOficial.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position:center left;
  cursor: pointer;
}

.navButton{
  width:15%;
  height: 100%;
  color: #C23A41;
  float: right;
  line-height: 100%;
  text-align: center;
  position: relative;
  transition: all 0.15s ease;
}

.navButton:hover{
  background-color: #C23A41;
  color: white;
}

.navButton a{
    font-size: 150%;
    text-decoration: none;
    color: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wrapper{
  width: 100%;
  height: 93vh;
}

.sidebar{
  width:20%;
  height: 100%;
  float: left;
  background-color: #ECEFF1;
  box-sizing: border-box;
  padding: 0.5vw;
  overflow-y: scroll;
}

.menu{
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu li{
  padding: 0.3vw;
  margin: 0.3vw;
}
.menu a{
  text-decoration: none;
  font-family: "Armata", sans-serif;
  font-size: 1rem;
}
.submenu li:hover{
  color: #2196F3;
}
.highlight{
  color: #C23A41;
  font-weight: bold;
}
.main{
  width: 80%;
  height: 100%;
  float: left;
  background-color: #455A64;
  overflow-y: scroll;
  box-sizing: border-box;
  padding: 1.5vw;
  padding-bottom: 0;
}
.catalogItem{
  width: 100%;
  height: 15vw;
  background-color: white;
  margin-bottom: 1.5vw;
  box-sizing: border-box;
  padding: 0.75vw;
}

.catHG{
    float: left;
    margin-left: 2%;
    width: 73%;
    height: 100%;
}

.title{
  width: 100%;
  height: 26%;
  display: flex;
  align-items: center;
}
.catText{
  width: 100%;
  height: 74%;
  float: left;
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
  column-fill: auto;
}
.catHG h1{
  font-family: 'Armata', sans-serif;
  font-size: 1.6rem;
  line-height: 2rem;
  color: #C23A41;
}
.catHG p{
  font-family: 'Karla', sans-serif;
  font-size: 1vw;
  line-height: 1.5vw;
  color: black;
}

.catHG ul{
  margin: 0;
  padding: 0;
  padding-left: 1vw;
}

.catHG li{
  font-family: 'Karla', sans-serif;
  font-size: 1.2vw;
  line-height: 1.7vw;
  padding: 0.5%;
  color: black;
}
.catImg{
  width: 25%;
  height: 100%;
  float: left;
  background-color: lightblue;
}

#Ul{
  background-image: url("img/ultralight.jpg");
  background-position: left bottom;
  background-size: cover;
}

#Li{
  background-image: url("img/ligero.png");
  background-position: left bottom;
  background-size: cover;
}

#He{
  background-image: url("img/pesados.jpg");
  background-position: right bottom;
  background-size: cover;
}

#Drop{
  background-image: url("img/drop.png");
  background-position: center;
  background-size: contain;
  background-color: white;
  background-repeat: no-repeat;
}

#Cama{
  background-image: url("img/cama.jpg");
  background-position: left center;
  background-size: contain;
  background-color: white;
  background-repeat: no-repeat;
}

#Inv{
  background-image: url("img/invertida.png");
  background-position: center;
  background-size: cover;
  background-color: white;
}

#Multi{
  background-image: url("img/multihojas.jpg");
  background-position: center;
  background-size: cover;
}

#Basc{
  background-image: url("img/basculante.png");
  background-position: center;
  background-size: contain;
  background-color: white;
  background-repeat: no-repeat;
}

#Mono{
  background-image: url("img/mono.jpg");
  background-position: center;
  background-size: cover;
}

#MonoBaj{
  background-image: url("img/susp_baj.jpg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: white;
}

#FrenosAire{
  background-image: url("img/frenosAire.jpg");
  background-position: center;
  background-size: cover;
}

#Niv{
  background-image: url("img/niv.jpg");
  background-position: center;
  background-size: cover;
}

#Pat{
  background-image: url("img/Pat.jpg");
  background-position: center;
  background-size: cover;
}

#Levan{
  background-image: url("img/levan.jpg");
  background-position: center;
  background-size: cover;
}

#LevanMec{
  background-image: url("img/levanMec.jpg");
  background-position: center;
  background-size: cover;
}

#Rines{
  background-image: url("img/rim.png");
  background-position: center;
  background-size: cover;
}

#KingPin{
  background-image: url("img/11.jpg");
  background-position: right;
  background-size: cover;
}

#C300-15{
  background-image: url("img/300-15.jpg");
  background-position: center;
  background-size: cover;
}
#C300-U9{
  background-image: url("img/300-U9.jpg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: white;
}
#CPRO{
  background-image: url("img/CPRO.jpg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: white;
}
#SS2{
  background-image: url("img/SS2.jpg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: white;
}

#TZ{
  background-image: url("img/z.jpg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: white;
}

#TT{
  background-image: url("img/TT.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: white;
}



@media screen and (max-width: 1550px) {
  .sidebar{
    width: 30%;
  }
  .main{
    width: 70%;
  }
  .menu a{
    font-size: 0.8rem;
  }
  .catHG h1{
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 1050px){
  .navButton{
    width: 31%;
  }
  .navButton a{
    font-size: 100%;
  }
  .catHG h1{
    font-size: 1rem;
  }
}

@media screen and (max-width: 880px){
  .catHG h1{
    font-size: 0.9rem;
    line-height: 1.1rem;
  }
  .catHG li{
    font-size: 0.7rem;
  }
}

@media screen and (max-width: 706px){
  .sidebar{
    display: none;
  }
  .main{
    width: 100%;
  }
  .catHG h1{
    font-size: 0.9rem;
    line-height: 1.1rem;
  }
  .catalogItem{
    height: 70px;
  }
}

@media screen and (max-width: 610px){
  .sidebar{
    display: none;
  }
  .main{
    width: 100%;
  }
  .catHG h1{
    font-size: 0.9rem;
    line-height: 1.1rem;
  }
  .catalogItem{
    height: 105px;
  }
  .catHG li{
    font-size: 0.6rem;
    line-height: 0.8rem;
  }
  .catHG ul{
    list-style: none;
  }
}