.litteNavContainer{
  position: relative;
  background-color: rgb(38, 38, 38);
  border-bottom: 3px solid rgb(195, 150, 9);
  height: 44px;
}

.litteNavContainer-adm{
  position: relative;
  background-color: rgb(38, 38, 38);
  height: 44px;
}

.littleNav{
  top: 7px;
  position: absolute;
}

.littleNav a{
  color: white;
  font-size: 13px;
}

.littleNav-left{
  left: 20%;
}

.littleNav-right{
  right: 20%;
}

#searchButton{
  height: 22px;
  border: none;
  border-top: 2px solid rgb(195, 150, 9);
  border-left: 2px solid rgb(195, 150, 9);
  border-bottom: 2px solid rgb(195, 150, 9);
  width: 39px;
  cursor: pointer;
  background-color: rgb(219, 219, 219);
  vertical-align: middle;
}

#searchButton:hover{
  background-color: rgb(54, 54, 54);
  color: white;
}

#searchInput{
  width: 60px;
  box-sizing: border-box;
  border: none;
  border-top: 2px solid rgb(195, 150, 9);
  border-right: 2px solid rgb(195, 150, 9);
  border-bottom: 2px solid rgb(195, 150, 9);
  padding: 2px 0 2px 8px;
  -webkit-transition: width 0.4s ease-in-out;
      transition-property: width;
      transition-duration: 0.4s;
      transition-timing-function: ease-in-out;
      transition-delay: 0s;
  transition: width 0.4s ease-in-out;
  background-size: 16px 16px;
  height: 22px;
  color: white;
  background-color: rgb(38, 38, 38);
  vertical-align: middle;
}

#searchInput:focus{
  width: 200px;
}

#car-value{
  color: #c39609;
  font-size: 14px;
}

.submitButton{
  cursor: pointer;
  background-color: rgb(38, 38, 38);
  border: 2px solid rgb(193, 149, 13);
  width: 80px;
  height: 40px;
  color: white;
  border-radius: 6px;
}

.submitButton:hover{
  background-color: rgb(96, 96, 96);
}

.black-gold-select{
  border: 1px solid rgb(195, 150, 9);
}
.black-gold-select:hover{

}

input{
  border: 1px solid rgb(195, 150, 9);
}


header{
  background-color: white;
  margin-bottom: 25px;
}
.navBar{
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 115px;
  max-width: 1200px;
  margin: 0 auto;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.iconNavBar{
  background-color: inherit;
  border: none;
  padding: 0;
  background: none;
  width: 30px;
  height: 30px;
}

.buttons-navBar{
  text-align: center;
  width: 251px;
}

.links-cascade{
  display: inline-block;
}

.primary-link{
  padding: 14px 16px;
}
.seconds-links{
  display: none;
  position:absolute;
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  background-color: var(--main-color);
  background-color: rgb(16, 217, 127);
}

.links-cascade:hover .seconds-links{
  display: block;
}


.seconds-links a {
  display: block;
  padding: 12px 16px;
  text-align: left;
  color: white;
}

.buttons-navBar .iconNavBar {
  display: none;
}

.buttons-navBar a:hover{
  color: var(--main-color);
}

.seconds-links a:hover{
  color: black;
}




#logo {
  width: 205px;
}

#logo-footer{
  width: 140px;
}

body, html{
  background-color: rgb(245, 245, 245);
  /*background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");*/
  /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}

.principalNav{
  background-color: white;
  -webkit-box-shadow: 0 3px 10px black;
          box-shadow: 0 3px 10px black;
          height: 126px;
}
.principalSec{
  background-color: white;
  -webkit-box-shadow: 0 3px 10px black;
          box-shadow: 0 3px 10px black;
  margin-top: 20px;
}

.carOptions{
  font-size: 12px;
  padding-top: 65px;
  text-align: center;
}

.padding-top-6px{
  padding-top: 6px;
}

.padding-left-4px{
  padding-left: 4px;
}

.padding-left-20px{
  padding-left: 20px;
}

.error-msg{
  display: block;
  margin-top: 10px;
  border-radius: 5px;
  width: 255px;
  text-align: left;
  font-size: 10px;
}

.error-msg h1{

}

.error{
  border: 1px solid red;
}


.item-navBar{

}

.dropdown-navBar{

}

.dropdown-navBar:hover .dropdown-content-navBar{
  display: block;
}

.dropbtn{

}
/*NavBar Items Cascada*/
.dropdown-content-navBar{
  display: none;
  background-color: white;
  position: absolute;
  z-index: 1;
  min-width: 160px;
  border: 1px solid #d7d7e1;
}
/*Items Cascada*/
.dropdown-content-navBar a {
  display: block;
}

.xfooter{
  background-color: rgb(38, 38, 38);
  -webkit-box-shadow: 0 3px 10px black;
  box-shadow: 0 3px 10px black;
  margin-top: 40px;
  text-align: center;
  border-top: 8px solid #c39609;
}

.container-footer{
  display: flex;
  justify-content: center;
  height: 200px;
  margin: auto;
  width: 70%;
}

.container-big-footer{
  display: flex;
  justify-content: center;
  height: 300px;
  margin: auto;
  width: 70%;
}

.box-footer{
  display: block;
  margin: auto auto;
    width: 100%;
}

.box-footer a{
  display: block;
  color: white;

}

.errors-form{
  margin-top: 15px;
  color: white;
  background-color: #f35959;
}

.categories{
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  text-align: center;
  margin-bottom: 15px;
  padding-left: 40px;
}

.category{
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  background-color: white;
  border: 1px solid #909090;
  width: 225px;
  height: 38px;
  word-wrap: break-word;
  margin: 1px;
  cursor: pointer;
}
/*
.categories{
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  text-align: center;
  margin-bottom: 15px;
  justify-content: center;
}

.category{
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  background-color: white;
  border: 1px solid #909090;
  width: 225px;
  height: 38px;
  word-wrap: break-word;
  margin: 1px;
  cursor: pointer;
}
*/

.category-active{
  background-color: #f5f5f5;
  border: 1px solid black;
}

.category:hover{
  background-color: rgb(227, 227, 227);
}

.category a{
  color: dimgray;
}

.logo-red{
  width: 35px;
  margin: 5px;
}

.redes{
  display: flex;
  justify-content: center;
}

.map{
  width: 80px;
}

.ul li {
  display: inline;
  text-align: center;
}

.li a {
  display: inline-block;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0;
  margin: 0;
  text-decoration: none;
  color: #333;
  font-size: 20px;
  padding-right: 10px;
}


.two:hover ~ hr {
  margin-left: 58px; /*ONE WEIGHT + PADDING-R*/
  width: 33px;   /*TWO width - PADDING-R*/
}

.three:hover ~ hr {
  margin-left: 102px; /*58px + twoWeight + padding-r 58+44*/
  width: 43px; /*Tree - padding-r*/
}

.four:hover ~ hr {
  margin-left: 155px; /*102 + 53*/
  width: 80px;
}

hr {
  height: .25rem;
  width: 50px;
  margin: 0;
  background: rgb(195, 150, 9);
  border: none;
  transition: .3s ease-in-out;
  float: left; /*for ie11*/
}

@media screen and (max-width: 950px) {
  .category{
    width: 220px;
  }
}

@media screen and (max-width: 800px) {
  .principalNav{
    height: inherit;
  }
  .column{
    height: 115px;
  }
  .xfooter{
    height: 450px;
  }
  .container-footer{
    width: 100%;
    display: block;
  }
  .litteNavContainer{
    position: inherit;
    text-align: center;
    height: 65px;
  }

  .littleNav{
    position: inherit;
    padding-top: 5px;
  }
  .category{
    width: 190px;
  }
}

@media screen and (max-width: 600px) {
  .navBar{
    display: block;
    text-align: center;
    height: 100%;
  }
  .ul .li:not(:first-child), .links-cascade .primary-link {display: none;}
  .buttons-navBar button.iconNavBar {
    float: right;
    display: block;
  }
  .buttons-navBar button.iconNavBar {
    float: right;
    display: block;
  }

  .buttons-navBar{
    text-align: inherit;
    padding: 10px 0;
    width: 100%;
  }

  /*Centra dropdown-content text*/
  .seconds-links a {
      text-align: center;
  }

  .buttons-navBar a {
    padding: 0;
    font-size: 18px;
  }

  .buttons-navBar.responsive {position: relative;}
  .buttons-navBar.responsive .iconNavBar {
    position: absolute;
    right: 0;
    top: 0;
  }
  .buttons-navBar.responsive .li {
  /*  float: none;
    display: block;
    text-align: left;
    */
    display: block;
    padding: 10px 0px;
  }
  .buttons-navBar.responsive .links-cascade {
    display: block;
    text-align: center;
  }
  .buttons-navBar.responsive .seconds-links {position: relative;}
  .buttons-navBar.responsive .links-cascade .primary-link {
    display: block;
    width: 100%;
    text-align: center;
  }

  hr{
    display: none;
  }

  .category{
    width: 160px;
  }

}

@media screen and (max-width: 400px) {
  .littleNav a {
    font-size: 10px;
  }
  #searchInput{
    height: 20px;
  }
  #searchButton{
    height: 20px;
  }
  .category{
    width: 145px;
  }
  .categories{
    padding-left: 15px;
  }
}