/* =============================================================================
   Tipografia
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500&display=swap');

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

h1,h2,h3,h4,h5,h6,h7,h8,h9,h10 {
  text-align: center;
  padding: 5px;
  text-decoration: none;
  font-size: 4vh;
  
}

p {
 margin: .2vh;
}

br {
 margin: .5vh; 
}



/* =============================================================================
   Estructura
   ========================================================================== */

* {
    margin: 0;
	  padding: 0;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
}

body {
  background-image: url("http://ecomotos.mx/images/fondo.jpg");
  justify-content: center;
  font-family: 'Roboto', Sans-serif;
    font-weight: 400;
	font-style: italic;
  font-weight: norlmal;
}

header {
  height: 120px;;
  
  background: white;
  color: white;
  text-decoration: none;
  z-index: 1000;
  box-shadow: 0vh 0vh .9vh #232332;

  position: fixed;
  left: 0;
  top: 0;
  right: 0;
}

main {
  background: White;
  padding-top: 83px; 
}

footer {
  justify-content: center;
  margin: auto;
  margin-top: 0;
}


/* =============================================================================
   HEADER
   ========================================================================== */

#contenedor {
  height: 115px;
  padding: 5px;
  margin: auto;
  
  background: black;
}

#LOGO_top {
  display: flex;
  justify-content: center;
  width: 27%;
  height: auto;
  margin-left: 5%;
  margin-top: .3vw;
}

#LOGO_top img {
  width: 100%;
  height: auto;
  margin: auto;
  padding: 5px;
}

header label {
  cursor: pointer;
}

.menu { 
    display: block;
    margin-top: -68px;
    margin-left: 45%;
    background: none;
}

.menu a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 15px 20px;
  
  font-weight: 400;
  letter-spacing: .5pt;
}

.menu a:hover {
  color: silver;
  transition: .3s;

}

.menu ul {
  display: flex;
  background: none;
  list-style: none; 
}

#menu-bar {
  display: none;
}

.icon-menu {
  display: none;
}



/* Responsive menu */


@media (min-width:1926px) {
  
  #LOGO_top {
    width: 25%;
  }

  
}


@media (max-width:1850px) {
  
  #LOGO_top {
    margin-top: 1vw;
    width: 27%;
  }
  
  .menu {
    margin-top: -55px;
    margin-left: 40%;
  }

  
}

@media (max-width:1810px) {
  
  .menu {
    margin-top: -58px;
    margin-left: 40%;
  }

  
}

@media (max-width:1300px) {
  
  .menu {
    margin-top: -35px;
    margin-left: 40%;
  }

  
}

@media (max-width:1220px) {

  #LOGO_top {
  width: 39%;
  height: auto;
  margin-left: 5%;
  }
  
  .menu {
    margin-left: 46%;
    margin-top: -50px;
  }
  
  .menu ul {
    margin-left: 45px;
    font-size: 1.5vh;
  }
  
  .menu a {
    padding: 10px;
  }
}

@media (max-width:996px) {
  
  .menu {
    margin-top: -35px;
    margin-left: 43%;
  }

  
}


@media (max-width:965px) {
  
  #LOGO_top {
  margin-left: 8%;
  margin-top: 2vw;
  }
  
  .menu {
    margin-top: -40px;
    margin-left: 43%;
  }
  
  .menu ul {
    margin-left: 62px;
    font-size: 1.3vh;
  }
  
  .menu a {
    padding: 10px;
  }
  
  header {
    height: 7.5rem;
  }
  
}


@media (max-width:870px) {

  #LOGO_top {
  width: 48%;
  height: auto;
  margin-left: 3%;
  margin-top: .7vw;
  }
  
  #LOGO_top img{
    width: 100%;
    height: auto;
  }
  
  .icon-menu {
    display: block;
    margin-left: 83%;
    margin-top: -60px;
  }
  
  .icon-menu img{
    margin-bottom: -30px;
    height: 35px;
  }
  
  header label {
    display: block;
  }
  
  .menu {
    position: absolute;
    top: 155px;
    right: 0;
    width: 100%;

    background: rgb(23,23,23,.95);
    transform: translateX(100%);
    transition: all 0.3s;
  }

  .menu ul {
    padding: 0;
    margin: auto;
    float: left;
    width: 80%;
    
    display: block;
  }
  
  .menu li {
    padding: 0;
    margin: auto;
    
    width: 80%;
    height: auto; 
    font-size: 30px; 
    
    text-align: left;
    justify-content: center;

  }
  
  
   .menu ul li:hover {
		 position: static;
   }
  
   #menu-bar:checked ~ .menu {
        transform: translateX(0%);
   }
  
}

@media (max-width:770px) {
  
  #LOGO_top {
  width: 50%;
  margin-left: 1%;
  margin-top: 1.5vw;
  }
  
}


@media (max-width:660px) {
  
  #LOGO_top {
  width: 58%;
  margin-left: 1%;
  margin-top: 2vw;
  }
  
}

@media (max-width:540px) {
  
  #LOGO_top {
  width: 65%;
  margin-left: 2%;
  margin-top: 4vw;
  }
  
  header {
    padding-bottom: 22.5vw;
  }
  
}

@media (max-width:530px) {
  
  header {
    padding-bottom: 23vw;
  }
  
}

@media (max-width:510px) {
  
  header {
    padding-bottom: 24vw;
  }
  
}

@media (max-width:490px) {
  
  header {
    padding-bottom: 25vw;
  }
  
}

@media (max-width:474px) {
  
  header {
    padding-bottom: 26vw;
  }
  
}

@media (max-width:468px) {
  
  header {
    padding-bottom: 26vw;
  }
  
}

@media (max-width:455px) {
  
  header {
    padding-bottom: 27vw;
  }
  
}

@media (max-width:440px) {
  
  header {
    padding-bottom: 27.6vw;
  }
  
  #LOGO_top {
  width: 70%;
  margin-left: 3%;
  margin-top: 6vw;
  }
  
}


@media (max-width:360px) {
  
  header {
    height: 15vh;
  }
  
  #LOGO_top {
  width: 70%;
  margin-left: 3%;
  margin-top: 6vw;
  }
  
  .menu {
    top: 155px;
  }
  
  .menu li {
    padding-left:.6vw;
  }
  
}

@media (max-width:353px) {
  
  header {
    height: 15vh;
    padding-bottom: 0;
  }
}

@media (max-width:340px) {
  
  header {
    height: 15.5vh;
    padding: 0;
  }
  
    .menu {
    top: 165px;
  }
  
  .menu li {
    padding-left: 33vw;
  }
}

@media (max-width:329px) {
  
  div#contenedor {
    height: 113px;
  }
  
    header {
    height: 14.5vh;
      padding: 0;
  }
    
  .menu {
    top: 153px;
  }
  
  #LOGO_top {
    width: 85%;
    margin-left: -5%;
    margin-top: 1vw;
  }
  
}





/* =============================================================================
   FOOTER
   ========================================================================== */

#top-bottom {
  display: flex;
  width: 100%;
  background: black;
  padding: 10px;
  margin: auto;
}

#credit {
  width: 100%;
  height: auto;
  margin: auto;
  padding: 0;
}

#credit img {
  margin: auto;
  padding: 0;
}

#credit a{
  float: left;
  margin: auto;
  padding: 0;
  width: auto;
}

#credit .logo_bottom {
  height: auto;
  margin: auto;
}

#credit .social-icon {
  padding-top: 1vw; 
  float: right;
}

#logo_bottom {
  padding: 0;
  margin: auto;
  width: auto;
}

#social_img {
  display: flex;
  width: 38px;
  height: auto;
  margin: auto;
}

#bottom {
  padding: 10px;
  background: rgb(23,23,23);
}

#copyright {
  color: white;
  font-size: 1.29vh;
}

#foot-link {
  font-size: 1.3vh;
  margin: 3px;
  color: white;
}

#foot-link a{
  color: yellow;
  text-decoration: none;
}


/* Responsive menu */

@media (min-width:966px) {
  
 #top-bottom {
  width: 100%;
  background: black;
  padding: 16px;
}

#logo_bottom {
  height: 70px;
  padding: 2px;
  margin-right: 50%;
}

#social_img {
  width: 50px;
  margin-bottom: 10px;
}
 
#copyright {
  font-size: 15px;
}

#foot-link {
  font-size: 15px;
}
    
}


@media (max-width:601px) {

  
  
}

@media (max-width:390px) {
  #copyright {
     font-size: 1.1vh;
  }
  
}



@media (max-width:340px) {
    #social_img {
     width: 30px;
  }
  
  .menu li {
    margin: 0;
    padding: 0;
  }
  
  #contenedor {
    padding-top: 3vh; 
    height: 15vh;
  }

}

@media (max-width:330px) {
  #social_img {
    width: 25px;
     margin: auto;
  }
}