@media screen and (max-width: 1200px)
{
.downto2{
  background-size:300px;
}
    #tuxbandera {
        width: 200px;
    }
    header{
        background-color: transparent;
        height: 80px;
    }
    .headcontact {
        height: 80px;
    }
    .headnav,.head-contact{
        display: none;
    }
    .headbars {
        display: block;
        float: left;
        cursor: pointer;
        padding:5px 20px;
        border-radius: 40px;
        transition: 0.3s all cubic-bezier(0.075, 0.82, 0.165, 1);
        -webkit-transition: 0.3s all cubic-bezier(0.075, 0.82, 0.165, 1);
        -moz-transition: 0.3s all cubic-bezier(0.075, 0.82, 0.165, 1);
        -ms-transition: 0.3s all cubic-bezier(0.075, 0.82, 0.165, 1);
        -o-transition: 0.3s all cubic-bezier(0.075, 0.82, 0.165, 1);
        position:fixed;
        z-index: 310;
        right:20px;
        top:20px;
        transform:scale(1.2);
        background-color: #0E0E21;
        user-select: none;
    }
    .bar1,
    .bar2, 
    .bar3 {
        width: 20px;
        height: 2px;
        margin: 5px 0;
        background-color: #FFCC00;
        transition: 0.4s;
        border-radius: 2px;
    }
    .bar2{
        width: 10px;
    }
    .bar3{
        width: 5px;
    }
    .change{
        transform: scale(1);
    }
    .change .bar1,
    .change .bar2, 
    .change .bar3 {
        background-color: #fff;
    }
    .change .bar1 {
        transform: rotate(-45deg) translate(-2px, 0);
        -webkit-transform: rotate(-45deg) translate(-2px, 0);
        -moz-transform: rotate(-45deg) translate(-2px, 0);
        -ms-transform: rotate(-45deg) translate(-2px, 0);
        -o-transform: rotate(-45deg) translate(-2px, 0);
    }
    .change .bar1,.change .bar3{
        height: 3px;
    }
    .change .bar2 {opacity: 0;}
    
    .change .bar3 {
        width: 20px;
        transform: rotate(45deg) translate(-2px,0);
        -webkit-transform: rotate(45deg) translate(-2px,0);
        -moz-transform: rotate(45deg) translate(-2px,0);
        -ms-transform: rotate(45deg) translate(-2px,0);
        -o-transform: rotate(45deg) translate(-2px,0);
    }
    .menu-options {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        position:fixed;
        left: 0;
        top:-100%;
        z-index:290;
        overflow: hidden;
        overflow-y: auto;
        background: rgba(14, 14, 33, 0.6);
        transition: 0.6s all cubic-bezier(0.075, 0.82, 0.165, 1);
        -webkit-transition: 0.6s all cubic-bezier(0.075, 0.82, 0.165, 1);
        -moz-transition: 0.6s all cubic-bezier(0.075, 0.82, 0.165, 1);
        -ms-transition: 0.6s all cubic-bezier(0.075, 0.82, 0.165, 1);
        -o-transition: 0.6s all cubic-bezier(0.075, 0.82, 0.165, 1);
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
    }
    .menucontent{
        display: none;
        width: 80%;
        height: auto;
        overflow: hidden;
        color:#fff;
    }
    .menucontent a{
        color:#fff;
        line-height: 30px;
        display: block;
        width: 100%;
    }
    .menucontent a h1{
        line-height: 60px;
        font-size: 1.8em;
    }
    .menucontent .menucontacto{
        color:#FFCC00;
    }
    .hero{
        height:76vh;
    }
    .slidetext{
        font-size: 0.5em;
        width: 90%;
    }
    .swiper-button-next,.swiper-button-prev{
        display: none;
    }
    .marcas-imgs{
        height: 150px;
      }
      .marcas-imgs img{
        height: auto;
        width: 100%;
      }
      .expe-icon{
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .expe-icon img{
        height: 100%;
        float:none;
        margin:auto;
      }
      .expe-text{
        width: 100%;
        height: auto;
      }
      .expe-text p{
        text-align: center;
        margin-bottom: 50px;
      }
      .expe-text div{
        width: 80%;
      }
      .expe-text img{
        margin:20px auto;
        width: 300px;
      }
      .tuxpaladar{
        height: 200px;
        background-size: 100% auto;
        background-attachment: local;
      }
      .mccain{
        height: 40vh;
        background-size: cover;
        background-attachment: fixed;
      }
      .productos > .cont{
        margin:0;
        border-radius: 0;
        width: 100%;
      }
      .product{
        width: 100%;
        height: 300px;
      }
      .product-text{
        font-size: 1.3em;
      }
      .trocas{
        height: 40vh;
        background-size: cover;
        background-position: top;
      }
      .trocasback img{
        margin:30px auto;
        width: 300px;
      }
      .trocasback h1{
        display: block;
        margin:0 20px;
        font-size: 1.2em;
        text-align: center;
      }
      footer{
        height: auto;
        overflow: hidden;
        font-size: 0.8em;
      }
      .foo{
        display: block;
        margin:0 0 60px 0;
        overflow: hidden;
        height: auto;
      }
      .foocont{
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    float: left;
    margin:10px 0;
      }
      .contacto{
        height: auto;
        overflow: hidden;
        background-position-y: 80px;
        background-position-x: right;
        background-size: auto 400px;
      }
      .contacto-cont{
        margin:200px 0 150px 0;
        overflow: hidden;
      }
      .contacto-text{
        margin-bottom: 50px;
      }
      .contacto-text a{
        font-size: 1.2em;
        line-height: 20px;
      }
      .contacto-text,.contacto-form{
        width: 100%;
      }
      .contacto-form input,.contacto-form textarea{
        font-size: 1.2em;
      }
      .listproduct{
        width: 100%;
        height: 180px;
        /* margin:40px 0; */
        /* margin:0; */
      }
      .listimg{
        width: 40%;
      }
      /* .listimg img{
        height: 90%; 
      } */
      .listtext{
        width: 60%;
        /* font-size: .6em; */
        /* padding: 0 10px; */
      }
      .listaheader{
        padding: 200px 0 100px 0;
        background-image:  url(imgs/productosfondo2.jpg);
      }
      .listaheader h1{
       font-size: 1.8em;
      }
}