/*$large-size: 1440px;
$medium-size: 1024px;
$tablet-size: 768px;
$small-size: 425px;*/

#contadores{
    display:flex;
    flex-direction:row;
    justify-content: center;
    background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(https://grupodietrich.com/wp-content/themes/dietrich-theme/images/new-home/back-counter.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding:200px;
    background-size: cover;
    color: #fff;
}
[data-inviewport] { /* THIS DEMO ONLY */
  height:60px;  
}


[data-inviewport="contar"] {
  font-size: 70px;
  font-weight: 200;
}
h2.counter-txt{
  font-size: 18px;
  font-weight: 200;
}

#contadores .grid{
  justify-items: center;
}

#contadores h2{
  color: #fff;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex-col{
  flex-direction: column;
}

.flex-row{
  flex-direction: row;
}

.flex-center {
  justify-content: center;
  align-items: center;
  align-content: center;
}

.flex-space{
  justify-content: space-around;
}

.even-width{
  flex: 1 1 0px;
}
#aniversario{
    display:flex;
    flex-direction:row;
    justify-content: center;
    padding:150px;
    background-color: #666;
}
.hurrytimer-campaign{
  display: flex;
  flex-direction: column;
  flex: 1 1 0px;
}
.hurrytimer-headline{
  color: #fff;
  font-size:70px;
}

.hurrytimer-timer{
  display: flex;
  flex-direction: row;
  color: #fff;
  font-size:70px;
  flex-wrap: wrap;
  justify-content: space-around;
}
.hurrytimer-timer-block{
    display: flex;
    flex-direction: initial;
    flex: 1 1 0px;
    justify-content: center;
    align-items: baseline;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
}
.hurrytimer-timer-label{
  font-size:24px;
  margin-left: 5px;
}
/*-----------   header    ----------------------------*/
#btnWpp{
    position: fixed;
    right: 25px;
    top: 85vh;
    cursor: pointer;
    display: none;
}
#mainHeaderNew {
    background-color: transparent;
    position: absolute;
    z-index: 10;
    width: 100%;
}
#mainLogoNew {
    max-width: 250px;
    padding: 20px 15px;
    font-size: 0;
}
#mainLogoNew img {
    height: 60px;
    width: auto;
}
#mainNavNew {
    margin-right: 10px;
    margin-bottom: -15px;
    height: 100%;
    display: inline-grid;
    align-content: center;
}
#mainNavNew > ul > li > a {
    padding: 34px 13px;
    color: #fff;
}
#mainNavNew > ul > li > a:hover{
    color: #fff;
}
#helpContainer{
    display: flex;
    height: 100%;
    align-items: center;
    cursor:pointer;
    justify-content: center;
}
#helpContainer img{
    margin-right: 28px;
    height: 20px;
    display: none;
}
#helpContainer .cuestion-container{
    color: #fff;
    font-size: 14px;
    padding: 10px;
    width: 208px;
    text-align: center;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(2px);
}

#mainNavNew .horizontal-nav li > ul > li > ul{
    position: absolute;
}
#mainNavNew li a:hover {
    color: #808285;
}

#mainNavNew li > ul.father-ul {
    top: 75%;
}
#mainNavNew li > a:after{
    content: "";
    position: absolute;
    bottom: 21px;
    left: 0;
    width: 100%;
    height: 0px;
    background: linear-gradient(270deg, #D4D4D4 6.46%, rgba(217, 217, 217, 0.00) 99.82%);
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}
#mainNavNew li > a:hover:after{
    height: 2px;
}

#mainNavNew li ul > li:hover {
    background-color: #4A494A;
}
#mainNavNew li ul > li:hover > a{
    color: #fff;
}
#mainNavNew ul.child-ul {
    left: 100%;
    top: 0;
}
#mainNavNew ul.father-ul li > a::after, #mainNavNew ul.child-ul li > a::after{
    visibility: hidden;
}
#mainNavNew .header-nav-mobile{
    display: none;
}
#logo-dietrich-helper img{
    height: 50px;
}
#hambg{
    display: none;
}
#mainNavNew .nav-mobile-redes{
    display: none;
}
@media screen and (max-width: 1140px){
    #helpContainer .cuestion-container{
        width: 115px;
        font-size: 11px;
    }
}
@media screen and (max-width: 1024px){
    .col-xl-8#column-mobile{
        display: none;
    }
    #btnWpp {
        right: 0px;
    }
    #mainNavNew{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100vh;
        z-index: 1000;
        background: #fafafa;
        display: flex;
        flex-direction: column;
        overflow: scroll;
    }
    #mainNavNew .header-nav-mobile{
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 6px 20px;
        align-items: center;
    }
    #mainLogoNew{
        margin-left: 0;
        padding: 10px 15px;
    }
    #mainLogoNew img {
        max-height: 50px;
        width: auto;
    }
    #mainNavNew li {
        text-align: center;
    }
    #mainNavNew .no-active{
        display: none!important;
    }
    #mainNavNew li > a{
        color: #777679!important;
        font-size: 21px;
        margin: auto;
        padding: 20px 15px!important;
    }
    #mainNavNew li > a:hover{
        color: #777679;
    }
    #mainNavNew li > a:after {
        display: none;
    }
    #logo-dietrich-mobile{
        padding: 10px;
    }
    #logo-dietrich-mobile img{
        height: 44px;
        width: auto;
    }
    #cross-mobile{
        padding: 0 10px;
    }
    #helpContainer{
        display: block;
        width: inherit;
        height: inherit;
        padding: 22px 15px;
    }
    #helpContainer img{
        margin-right: 0px;
        height: 25px;
        width: auto;
        display: block;
    }
    #helpContainer .cuestion-container{
        display: none;
    }
    #hambg{
        display: block;
        padding: 22px 15px;
    }
    #hambg img{
        height: 30px;
    }
    #mainNavNew ul.father-ul{
        position: inherit;
        background: #fafafa;
        padding-top: 0px!important;
    }
    #mainNavNew ul.father-ul li > a{
        padding: 10px!important;
        font-size: 18px;
        color: #B3B3B3!important;
    }

    #mainNavNew .nav-mobile-redes{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 42px;
    }
    #mainNavNew .nav-mobile-redes ul{
        display: flex;
    }
    #mainNavNew .nav-mobile-redes ul li a{
        padding: 8px!important;
        width: inherit;
    }
}

/*-----------   Slider  Home  ----------------------------*/
#bannerPrincipal .banner-home .bx-wrapper {
    box-shadow: none;
    border: none;
}
ul#carousel li{
    height: 95vh;
}
.banner-home > #carousel > li {
    display: none;
}
.banner-home > #carousel > li:first-of-type {
    display: block;
}
#bannerPrincipal .banner-home-mobile{
    display: none;
}
#bannerPrincipal .banner-home-mobile .bx-wrapper{
    box-shadow: none;
    border: none;
}
#bannerPrincipal .banner-home .bx-wrapper .bx-viewport,
#bannerPrincipal .banner-home .bx-wrapper ul#carousel{
    height: 100%!important;
}
#bannerPrincipal .banner-home-mobile .bx-wrapper .bx-viewport,
#bannerPrincipal .banner-home-mobile .bx-wrapper ul#carousel-mobile{
    height: 100%!important;
}
#bannerPrincipal .banner-home .bx-wrapper ul#carousel li, #bannerPrincipal .banner-home-mobile .bx-wrapper ul#carousel-mobile li {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}
ul#carousel-mobile li{
    height: 85vh;
}
.banner-home > #carousel-mobile > li {
    display: none
}
.banner-home > #carousel-mobile > li:first-of-type {
    display: block;
}
#bannerPrincipal .logos-marcas{
    position: absolute;
    top: 110px;
    display: flex;
    flex-direction: column;
    padding-left: 15px;
}
#bannerPrincipal .logos-marcas a{
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
}
#bannerPrincipal .logos-marcas a img{
    width: 90px;
}
#vw-logo-banner{
    height: 40px;
    width: 40px!important;
}
#mav-logo-banner{
    height: 40px;
    width: 112px!important;
}
#dks-logo-banner{
    width: 84px!important;
}
#bannerPrincipal .banner-home .bx-wrapper ul#carousel li div#textSlider, #bannerPrincipal .banner-home-mobile .bx-wrapper ul#carousel-mobile li div#textSlider{
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 999;
}
#bannerPrincipal .banner-home .bx-wrapper ul#carousel li.filtro-oscuro-principal::after, #bannerPrincipal .banner-home-mobile .bx-wrapper ul#carousel-mobile li.filtro-oscuro-principal::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
}
#bannerPrincipal .banner-home .bx-wrapper .bx-pager, #bannerPrincipal .banner-home-mobile .bx-wrapper .bx-pager{
    bottom: 12px;
}

#bannerPrincipal .banner-home .bx-wrapper .bx-pager.bx-default-pager a.active, #bannerPrincipal .banner-home-mobile .bx-wrapper .bx-pager.bx-default-pager a.active{
    background: #fff;
}
#bannerPrincipal .banner-home .bx-wrapper .bx-pager.bx-default-pager a, #bannerPrincipal .banner-home-mobile .bx-wrapper .bx-pager.bx-default-pager a{
    background: rgb(255 255 255 / 50%);
    width: 7px;
    height: 7px;
}
.padding-banner{
    padding-top:0px;
}

.divisor{
    height: 4px;
    width: 100%;
    background: linear-gradient(270deg, #D4D4D4 6.46%, rgba(217, 217, 217, 0.00) 99.82%);
}
@media all and (max-width: 1400px){
    #bannerPrincipal .logos-marcas{
        top: 100px;
        padding-left: 13px;
    }
    /*
    #bannerPrincipal .logos-marcas a img#vw-logo-banner{
        width: 38px!important;
    }
    */
    #bannerPrincipal .logos-marcas a img{
        width: 65px!important;
    }
    #bannerPrincipal .logos-marcas a{
        margin-bottom: 8px;
    }
    #mav-logo-banner {
        margin-bottom: 10px;
    }
}
@media all and (max-width: 1024px){
    #bannerPrincipal .logos-marcas{
        top: 88px;
        left: -2%;
        padding-left: 50px;
    }
    #bannerPrincipal .banner-home{
        display: none;
    }
    #bannerPrincipal .banner-home-mobile{
        display: block!important;
    }
    #bannerPrincipal .logos-marcas a img{
        width: 80px;
    }
}
@media all and (max-width: 768px){
    .padding-banner{
        padding-top:84px;
    }
    #bannerPrincipal .logos-marcas{
        top: 80px;
        left: -14px;
        padding-left: 15px;
    }
    #bannerPrincipal .logos-marcas a{
        margin-bottom: 22px;
    }
    #bannerPrincipal .logos-marcas a img {
        height: auto;
        width: 103px;
        padding-left: 36px;
    }



    #bannerPrincipal .logos-marcas a img#vw-logo-banner {
        width: 59px!important;
        height: 25px!important;
        margin-top: 50px;
    }
    #mav-logo-banner {
        width: 106px!important;
    }
    #dks-logo-banner{
        width: 90px!important;
    }
}
/*-----------   Container ayuda  ----------------------------*/

.options-help-container{
    width: 95%;
    height: 95vh;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 4px;
    background: #4A494A;
    z-index: 11;
    padding: 65px 75px;
    display: none;
}

.options-help-container h2{
    color: #fff;
    font-weight: 200;
    font-size: 4em;
    line-height: 1.2em;
    margin: 10px 0px 50px;
    letter-spacing: 1px;

}
.options-help-container input[type=search]{
    border-radius: 4px;
    background: rgba(119, 118, 121, 0.60);
    box-shadow: none;
    border: none;
    color: #fff;
    height: 44px;
    width: 300px;
    padding: 0 50px;
}
.options-help-container input[type=search]::placeholder{
    color: #fff;
    font-size: 20px;
    font-weight: 300;
}
.options-help-container form{
    margin: 50px 0;
    position: relative;
}
.options-help-container form img{
    position: absolute;
    display: block;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}
.options-help-container ul.servicios-options-help li{
    list-style-type: none;
    display: flex;
    flex-direction: column;
}
.options-help-container ul.servicios-options-help li.wo-child{
    flex-direction: row;
    align-items: center;
    margin-bottom: 42px;
}
.options-help-container ul.servicios-options-help .select-concesionaria{
    display: flex;
    margin: 5px 0;
    justify-content: center;
    visibility: hidden;
    transition: all 0.1s;
}
.options-help-container ul.servicios-options-help .title-option-cont{
    display: flex;
    align-items: center;
}
.options-help-container ul.servicios-options-help .select-concesionaria .option{
    height: 32px;
    width: 106px;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.options-help-container ul.servicios-options-help .select-concesionaria .op-1{
    border-radius: 2px 0px 0px 2px;
}
.options-help-container ul.servicios-options-help .select-concesionaria .op-2{
    border-radius: 0px 2px 2px 0px;
}
.options-help-container ul.servicios-options-help .select-concesionaria .option a{
    text-decoration: none;
    color: #fff;
    font-size: 14px;
}
.options-help-container ul.servicios-options-help .select-concesionaria .option:hover{
    background-color: #D9D9D9;
}
.options-help-container ul.servicios-options-help .select-concesionaria .option:hover a{
    color:#4A494A; 
}
.options-help-container ul.servicios-options-help li a{
    color: #D9D9D9;
    font-size: 18px;
    font-weight: 300;
    cursor: pointer;
    text-decoration: none;
}
.options-help-container ul.servicios-options-help li .item-line{
    height: 8px;
    width: 16px;
    margin-right: 10px;
    background: linear-gradient(270deg, #D4D4D4 6.46%, rgba(217, 217, 217, 0.00) 100%);
}
.options-help-container ul.redes-options-help {
    display: flex;
}
.options-help-container ul.redes-options-help{
    margin-bottom: 21px;
}
.options-help-container ul.redes-options-help li{
    list-style-type: none;
    margin-right: 10px;
}
.options-help-container ul.redes-options-help li a{
    padding: 8px;
}
.options-help-container .contact-help-buttons li{
    list-style: none;
}
.col-redes{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 50%;
    padding-top: 112px;
    margin-left: 60px;
}
.options-help-container .options-help {
    position: relative;
}
.options-help-container .options-help #crossCloseHelper{
    position: absolute;
    right: -16px;
    top: -40px;
    padding: 20px;
    cursor: pointer;
}
.options-help-container .options-help .logo-dietrich-helper{
    display: none;
}
.active{
    display: block!important;
}
#help-options-fix{
    padding-bottom: 15px;
    background-color: #f5f5f5;
}
#help-options-fix .options-help-container{
    display: block!important;
    position: inherit;
    transform: translateX(2%);
}
#help-options-fix .options-help-container .cross-close-helper{
    display: none!important;
}
#help-options-fix .options-help-container .logo-dietrich-helper{
    display: none!important;
}
.option-active{
    visibility: visible!important;
}
@media all and (max-width: 1330px){
    #help-options-fix .options-help-container{
        transform: translateX(3%);
    }
    .options-help-container{
        width: 95%;
        height: 105vh;
        padding: 45px;
    }
    .options-help-container h2{
        font-size: 3em;
        margin: 10px 0px 30px;
    }
    .col-redes{
        flex-direction: row;
        padding-top: 0;
    }
}
@media all and (max-width: 1000px){
    .col-border-mobile{
        margin-right: 0!important;
    }
    .col{
        margin-right: 0!important;
    }
    .options-help-container .btn-primary{
        height: 32px;
        padding: 8px 64px;
        margin-top: 0;
    }
    .options-help-container .btn-outline{
        height: 32px;
        padding: 5px 34px;
    }
}
@media all and (max-width: 768px){
    .options-help-container{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0;
        padding: 15px 15px;
        transform: translateX(0%);
        overflow: auto;
    }
    .options-help-container .options-help{
        padding-top: 28px;
    }
    .options-help-container .options-help #crossCloseHelper{
        right: 0px;
        top: 0px;
        padding: 15px;
    }
    .options-help-container .options-help .logo-dietrich-helper{
        display: block;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    .options-help-container h2 {
        font-size: 24px;
        margin: 40px 0px 30px;
    }
    .options-help-container form {
        margin: 25px 0;
    }
    .options-help-container input[type=search] {
        padding: 0px 38px;
        width: 228px;
    }
    .options-help-container input[type=search]::placeholder{
        font-size: 16px;
    }
    .options-help-container form img{
        height: 15px;
    }
    .options-help-container ul.servicios-options-help li {
        margin-bottom: 20px;
    }
    .options-help-container ul.servicios-options-help li a {
        font-size: 16px;
    }
    #help-options-fix .options-help-container{
        height: 1290px;
        transform: translateX(0%);
        border-radius: 0;
        overflow: inherit;
    }
    .col-border-mobile{
        margin-right: 0!important;
        border-bottom: 1px solid #D9D9D9;
        margin-bottom: 15px;
    }
    .col-redes{
        margin-left: 0;
        padding-top: 40px;
        flex-direction: column;
    }
}

/*-----------   botones  ----------------------------*/
.btn-primary{
    border-radius: 2px;
    padding: 12px 68px;
    background: #d9d9d9;
    backdrop-filter: blur(2px);
    border: none;
    transition: background-color 0.3s;
    margin-top: 14px;
    height: 44px;
}
.btn-primary a{
    color: #4a494a;
    text-decoration: none;
}
.btn-primary:hover{
    background: #8c8c8c;
    color: #fff;
}
.btn-tertiary{
    border-radius: 2px;
    background: #555454;
    height: 44px;
    padding: 15px 38px;
    color: #fff;
}
.btn-outline{
    border-radius: 2px;
    padding: 12px 38px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    backdrop-filter: blur(2px);
    background: transparent;
    margin-top: 14px;
    color: #fff;
    height: 44px;
}
.btn-outline a{
    color: #d9d9d9;
    text-decoration: none;
}
.btn-outline:hover{
    background: #8c8c8c;
}
/*-----------   tipografia  ----------------------------*/
#bannerPrincipal h1{
    color: #777679;
    font-weight: 200;
    font-size: 70px;
    margin: 40px 0px;
}
#nuestras-marcas h2{
    color: #777679;
    font-weight: 200;
    font-size: 70px;
    margin: 10px 0px;
}
#nuestras-marcas h3{
    color: #fff;
    font-weight: 200;
    font-size: 30px;
}

@media screen and (max-width: 768px){
    #bannerPrincipal h1{
        font-size: 40px;
    }
    #nuestras-marcas h2{
        font-size: 35px;
    }
    #nuestras-marcas h3{
        font-size: 18px;
    }
}

/*-----------   nuestras marcas  ----------------------------*/
#nuestras-marcas{
    margin: 70px 0;
    overflow: hidden;
}
#nuestras-marcas .concesionario-principal{
    max-height: 500px;
    padding: 7px;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}
#nuestras-marcas .concesionario-principal a{
    height: 100%;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 2px;
    position: relative;
    
}
#nuestras-marcas .concesionario-principal img.background-conces{
    width: 100%;
    transition: transform .2s; 
    position: relative;
}
#nuestras-marcas .concesionario-principal img.background-conces:hover{
    transform: scale(1.1);
}
#nuestras-marcas .concesionario-secundario{
    max-height: 280px;
    padding: 7px;
    position: relative;
    overflow: hidden;
}
#nuestras-marcas .concesionario-secundario a{
    height: 100%;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 2px;
}
#nuestras-marcas .concesionario-secundario img.background-conces{
    width: 100%;
    height: 100%;
    transition: transform .2s; 
    position: relative;
}
#nuestras-marcas .concesionario-secundario img.background-conces:hover{
    transform: scale(1.1);
}
#nuestras-marcas .conces-name{
    position: absolute;
    bottom: 35px;
    left: 40px;
}
#nuestras-marcas .concesionario-principal .logo-conces{
    position: absolute;
    top: 40px;
    right: 40px;
    height: 40px;
    width: auto;
}
#nuestras-marcas .concesionario-secundario .logo-strong{
    height: 30px!important;
}
#nuestras-marcas .concesionario-secundario .logo-conces{
    position: absolute;
    bottom: 70px;
    left: 40px;
    height: 40px;
    width: auto;
}
@media screen and (max-width: 1024px){
    #nuestras-marcas h3{
        font-size: 20px;
    }
    #nuestras-marcas .concesionario-secundario .logo-conces{
        bottom: 60px;
    }
}
@media screen and (max-width: 768px){
    #nuestras-marcas{
        margin: 38px 0;
    }
    .mt-80{
        margin-top: 40px!important;
    }
    #nuestras-marcas .concesionario-principal .logo-conces {
        height: 24px;
        top: 20px;
        right: 20px;
    }
    #nuestras-marcas .concesionario-secundario .logo-conces {
        bottom: 43px;
        height: 34px;
        left: 20px;
    }
    #nuestras-marcas .concesionario-secundario .logo-strong{
        height: 24px!important;
        bottom: 48px;
    }
    #nuestras-marcas .conces-name {
        bottom: 25px;
        left: 20px;
    }
}
/*-----------   Tiendas  ----------------------------*/
#tiendas{
    background-color: #f5f5f5;
    padding: 20px 0px;
    height: 110vh;
    position: relative;
    overflow: hidden;
}
#tiendas .h1{
    color: #777679;
    font-weight: 200;
    font-size: 70px;
    margin: 40px 0px;
}
#tiendas .img-principal{
    position: relative;
}
#tiendas .img-principal img{
    height: 500px;
    width: auto;
    position: absolute;
    opacity: 0;
    transition: all 0.3s;
}
#tiendas .adicional-img{
position: absolute;
top: 300px;
left: 0;
opacity: 0;
transition: all 0.3s;
}
#tiendas .links-tiendas{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}
#tiendas .links-tiendas ul > li{
    list-style-type: none;
    margin-bottom: 30px;
}
#tiendas .links-tiendas ul > li > a{
    text-decoration: none;
    font-size: 26px;
    font-weight: 300;
}
.img-principal img.active{
    z-index: 99;
    opacity: 1!important;
}
#tiendas .links-tiendas .adicional-img.active{
    z-index: 99;
    opacity: 1!important;
}
#tiendas .links-tiendas ul > li > a.active, #tiendas .links-tiendas ul > li > a:hover{
    color: #4A494A;
    font-weight: 500;
}
#tiendas .logo-tienda {
    position: absolute;
    right: 0;
    top: 0;
}
#tiendas .logo-tienda .logo-tienda-chico{
    height: 60px;
}
#tiendas .logo-tienda .logo-tienda-mediano{
    height: 40px;
}
#tiendas .logo-tienda .logo-tienda-grande{
    height: 35px;
}
#tiendas .logo-tienda img{
    position: absolute;
    right: 0px;
    top: -100px;
    display: none;
}
@media screen and (max-width: 1300px){
    #tiendas .img-principal img{
        height: 410px;
    }
    #tiendas .adicional-img{
        top: 260px;
    }
    #tiendas .adicional-img img{
        height: 150px;
    }
    #tiendas .links-tiendas ul > li > a{
        font-size: 24px;
    }
}
@media screen and (max-width: 1024px){
    #tiendas{
        height: 800px;
    }
    #tiendas .img-principal img{
        height: 340px;
    }
    #tiendas .adicional-img{
        top: 240px;
    }
    #tiendas .adicional-img img{
        height: 100px;
    }
    #tiendas .links-tiendas ul > li > a{
        font-size: 20px;
    }

}
@media screen and (max-width: 768px){
    #tiendas{
        padding: 1px 0px;
    }
    #tiendas .h1{
        font-size: 35px;
    }
    #tiendas .img-principal img{
        height: 308px;
    }
    #tiendas .links-tiendas{
        padding: 16px 0;
        margin-top: 308px;
    }
    #tiendas .links-tiendas ul > li{
        margin-bottom: 20px;
    }
    #tiendas .links-tiendas ul > li > a{
        font-size: 18px;
    }
    #tiendas .adicional-img {
        top: 190px;
    }
    #tiendas .adicional-img img{
        height: 112px;
    }
    #tiendas .logo-tienda img{
        top: -70px;
        right: 10px    
    }
    #tiendas .logo-tienda .logo-tienda-chico{
        height: 40px;
        transform: translateY(-50%);
    }
    #tiendas .logo-tienda .logo-tienda-mediano{
        height: 25px;
    }
    #tiendas .logo-tienda .logo-tienda-grande{
        height: 15px;
    }
}
/*-----------   marcas secundarias  ----------------------------*/
#marcasSecundarias .divisor-mini{
    height: 3px;
    width: 40px;
    background: linear-gradient(270deg, #D4D4D4 10.46%, rgba(217, 217, 217, 0.00) 98.99%);
    margin-top: 28px;
}
#marcasSecundarias .marca-secundaria{
    height: 70vh;
    padding: 30px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}
#marcasSecundarias .marca-secundaria * {
    position: relative;
    z-index: 5;
}
#marcasSecundarias .marca-secundaria .img-principal img{
    height: 100%;
    width: auto;
}
#marcasSecundarias .marca-secundaria .contenido-marca img.mav-img-hover{
    height: 78px;
}
#marcasSecundarias .marca-secundaria .contenido-marca .container-padding{
    padding-top: 40px;
}
#marcasSecundarias .marca-secundaria .img-principal{
    display: flex;
    justify-content: flex-end;
    height: 50vh;
}
#marcasSecundarias .marca-secundaria .img-principal, #marcasSecundarias .marca-secundaria .contenido-marca{
    height: 60vh;
}
#marcasSecundarias .marca-secundaria .contenido-marca img{
    height: 78px;
}
#marcasSecundarias .marca-secundaria .contenido-marca img.logo-ando-secundaria{
    height: 30px;
}
#marcasSecundarias .marca-secundaria .contenido-marca p{
    color: #4A494A;
    font-size: 18px;
    line-height: 25px;
    margin-top: 28px;
    font-weight: 200;
}
#marcasSecundarias .marca-secundaria .contenido-marca p.tipo-marca{
    color: #777679;
    font-weight: 200;
    font-size: 28px;
} 
#marcasSecundarias .marca-secundaria .grid{
    height: 100%;
}
#marcasSecundarias .marca-secundaria::before {
    content: ' ';
    background-color: #4A494A;
    transform: scaleY(0);
    transform-origin: top;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: all 0.7s ease;
}
#marcasSecundarias .marca-secundaria:hover::before{
    transform: scaleY(1);
}
#marcasSecundarias .marca-secundaria .contenido-marca img.imagen-hover{
    display: none;
}
#marcasSecundarias .marca-secundaria:hover p, #marcasSecundarias .marca-secundaria:hover p.tipo-marca{
    color: #fff;
}
#marcasSecundarias .marca-secundaria .contenido-marca a{
    display: none;
}
#marcasSecundarias .active{
    display: block;
}
#marcasSecundarias .marca-secundaria .contenido-marca img.dks-white{
    padding-left: 10px;
}
#marcasSecundarias .marca-secundaria .contenido-marca img.ando-grey{
    height: 30px!important;
}
#marcasSecundarias .btn-outline{
    padding: 12px 38px;
    border: 1px solid #fff;
    border-radius: 2px;
    background: transparent;
    margin-top: 28px;
    color: #fff;
    width: 200px;
    height: 44px;
    text-align: center;
}
@media screen and (max-width: 1024px){
    #marcasSecundarias .marca-secundaria{
        background-color: #4A494A;
    }
    #marcasSecundarias .marca-secundaria .contenido-marca img.imagen-white{
        display: none;
    }
    #marcasSecundarias .marca-secundaria p{
        color: #fff!important;
        font-size: 16px;
    }
    #marcasSecundarias .btn-outline{
        margin-top: 16px;
        display: block!important;
    }
    #marcasSecundarias .marca-secundaria .contenido-marca img.imagen-hover{
        display: block;
    }
    #marcasSecundarias .marca-secundaria .contenido-marca img {
        height: 70px;
    }

}
@media screen and (max-width: 768px){
    #marcasSecundarias .divisor-mini{
        width: 48px;
        margin-top: 18px;
    }
    #marcasSecundarias .marca-secundaria{
        height: 85vh;
        background-color: #4A494A;
        padding: 0px!important;
        display: inherit;
    }
    #marcasSecundarias .marca-secundaria .contenido-marca{
        height: inherit;
    }
    #marcasSecundarias .marca-secundaria .contenido-marca img{
        height: 50px;
    }
    #marcasSecundarias .marca-secundaria .contenido-marca img.logo-ando-secundaria{
        height: 28px;
    }
    #marcasSecundarias .marca-secundaria .contenido-marca p{
        font-size: 16px;
        margin-top: 18px;
    }
    #marcasSecundarias .marca-secundaria .img-principal img{
        height: 280px;
    }
    #marcasSecundarias .marca-secundaria .img-principal{
        justify-content: flex-start;
        padding-top: 28px;
    }
    #marcasSecundarias .marca-secundaria .tipo-marca{
        font-size: 20px;
    }
    #marcasSecundarias .marca-secundaria p{
        font-size: 14px;
        color: #fff!important;
    }
    #marcasSecundarias .marca-secundaria:hover .img-principal{
        padding-top: 28px;
    }
    #marcasSecundarias .marca-secundaria .contenido-marca img.mav-img-hover{
        height: 50px;
    }
    #marcasSecundarias .marca-secundaria .contenido-marca img.imagen-white{
        display: none;
    }
    #marcasSecundarias .marca-secundaria .contenido-marca img.dks-white{
        padding-left: 10px;
    }
    #marcasSecundarias .marca-secundaria .contenido-marca img.mav-white{
        height: 55px!important;
    }
    #marcasSecundarias .marca-secundaria .contenido-marca img.imagen-hover{
        display: block;
    }
    #marcasSecundarias .btn-outline{
        margin-top: 16px;
        display: block!important;
    }
    #marcasSecundarias .marca-secundaria .contenido-marca .container-padding{
        padding-top: 22px;
    }
    #marcasSecundarias .marca-secundaria .contenido-marca .container-big{
        padding-top: 40px!important;
    }
    #marcasSecundarias .last-secondary{
        height: 90vh!important;

    }
}
/*-----------   Partnerships  ----------------------------*/

#partners{
    padding: 50px 0 150px;
    background: #f5f5f5;
    overflow: hidden;
}
#partners .h1{
    color: #777679;
    font-weight: 200;
    font-size: 70px;
    margin: 40px 0px;
}
#partners p.description-partners{
    color: #555454;
    line-height: 27px;
    max-width: 350px;
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 40px;
}
#partners .partner-container{
    height: 300px;
    width: 100%;
    padding-right: 16px;
}
#partners .partner-container a{
    overflow: hidden;
    display: block;
    height: 100%;
    width: 100%;
}
#partners .select-repuestos{
    display: flex;
    margin: 5px 0;
    visibility: hidden;
    transition: all 0.1s;
}
#partners .select-repuestos .option{
    height: 32px;
    width: 106px;
    border: 1px solid #555454;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#partners .select-repuestos .op-1{
    border-radius: 2px 0px 0px 2px;
}
#partners .select-repuestos .op-2{
    border-radius: 0px 2px 2px 0px;
}
#partners .select-repuestos .option a{
    text-decoration: none;
    color: #555454;
    font-size: 14px;
    height: fit-content;
}
#partners .select-repuestos .option:hover{
    background-color: #D9D9D9;
}
#partners .select-repuestos .option:hover a{
    color:#4A494A; 
}
#partners .img-principal{
    width: 100%;
    height: auto;
    transition: transform .2s;
}
#partners .partner-container:hover .img-principal{
    transform: scale(1.1);
}
#partners p.logo-title{
    margin: 0;
    color: #777679;
    font-size: 24px;
    font-weight: 700;
}
#localizaLogo{
    padding-top: 10px;
}
#vecFleetLogo{
    padding-top: 5px;
}
@media screen and (max-width: 1024px){
    #partners p.logo-title{
        font-size: 18px;
    }
}
@media screen and (max-width: 768px){
    #partners{
        padding: 70px 0;
    }
    #partners .partner-container{
        height: initial;
    }
    #partners .partner-container a{
        height: initial;
    }
    #partners .h1{
        font-size: 35px;
        margin: 40px 0px;
        max-width: 78%;
    }
    #partners p.description-partners{
        font-size: 18px;
        margin-bottom: 20px;
        line-height: 23px;
    }
    #partners p.logo-title{
        font-size: 16px;
    }
    #partners p{
        font-size: 16px;
    }
    #localizaLogo{
        padding-top: 5px;
        height: 22px;
    }
    #vecFleetLogo{
        height: 35px;
        padding: 0px;
    }
}
/*-----------   mundo dietrich  ----------------------------*/
#bannerMd{
    height: 80vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 45px 20px;
}
#bannerMd .btn:hover{
    background-color: #807f7e;
}
#bannerMd .h1{
    color: #555454;
    font-weight: 300;
    font-size: 85px;
    margin: 30px 0px;
    text-align: center;
}
#bannerMd p{
    font-size: 32px;
    color: #555454;
    max-width: 750px;
    text-align: center;
    margin: auto;
    font-weight: 200;
    line-height: 42px;
}
#bannerMd .btn-md{
    text-align: center;
    margin-top: 30px;
}
@media screen and (max-width: 768px){
    #bannerMd .h1{
        font-size: 35px;
    }
    #bannerMd p{
        font-size: 18px;
        line-height: 26px;
    }
}

/*----------- resena libro ----------------------------*/

#bannerMd.invierno{
    background-image:url('https://promo.grupodietrich.com/wp-content/uploads/2025/06/chapelco.jpg');
    filter: grayscale(100%); 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: url(resources.svg#desaturate); 
    filter: gray; -webkit-filter: 
    grayscale(1);
    background-attachment: fixed;
}
#bannerMd.invierno:hover{
    filter: grayscale(0%); 
    -webkit-filter: initial; 
    -moz-filter: initial;
    -ms-filter: initial;
    -o-filter: initial;
    filter: initial;
    -webkit-filter: initial;
    transition: all 0.5s;
}

#marcasSecundarias{
    margin-bottom: 50px;
}
#marcasSecundarias .marca-secundaria,
#marcasSecundarias .marca-secundaria .contenido-marca {
    height: auto;
    padding-bottom:50px;
}

#marcasSecundarias .marca-secundaria .contenido-marca.resena-izq,
#marcasSecundarias .marca-secundaria .contenido-marca.resena-der {
    display: flex;
    justify-content: center;
}

#marcasSecundarias .marca-secundaria .contenido-marca.resena-izq p,
#marcasSecundarias .marca-secundaria .contenido-marca.resena-der p
{
    max-width:440px;
}

@media screen and (max-width: 1200px){
    section#libro .libro-banner img{
        width: 100%
    }


    section#libroNuevo .libro-banner.resena{ 
        height: 500px;
    }
   
}
/*----------- testimonios ----------------------------*/
#comments{
    padding: 150px 0;
    background-color: #f5f5f5;
    overflow: hidden;
}
#comments p.description-comments{
    color: #555454;
    line-height: 35px;
    max-width: 246px;
    font-size: 35px;
    font-weight: 300;
    margin-bottom: 40px;
}

#comments .container-comments{
    display: flex;
    justify-content: flex-end;
    padding-top: 34px;
}
#comments .container-comments .list-comments{
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    max-width: 1020px;
}
#comments .container-comments .arrows-comments{
    display: flex;
    align-items: flex-end;
    margin-right: 30px;
}
#comments .container-comments .arrows-comments img.a-left{
    padding: 0 5px 0 10px;
    cursor: pointer;
}
#comments .container-comments .arrows-comments img.a-right{
    padding: 0 10px 0 5px;
    cursor: pointer;
}
#comments .container-comments .list-comments .comment{
    border-radius: 2px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
    min-width: 328px;
    height: 368px;
    list-style-type: none;
    margin: 0 16px 32px 0;
    display: flex;
    flex-direction: column;
    padding: 35px 15px 15px;
    position: relative;
}
#comments .container-comments .list-comments .comment .name{
    color: #4A494A;
    font-size: 12px;
    text-transform: capitalize;
    font-weight: 500;
    max-width: 250px;
}
#comments .container-comments .list-comments .comment .date{
    color: #4A494A;
    font-size: 12px;
    font-weight: 300;
    padding: 10px 0;
}
#comments .container-comments .list-comments .comment .comment-text p{
    color: #000;
    font-size: 14px;
    padding: 10px 0;
    line-height: 18px;
    font-weight: 300;
}
#comments .container-comments .list-comments .comment img{
    height: auto;
    width: 60px;
    position: absolute;
    right: 15px;
    top: 15px;
}
#comments .container-comments .list-comments .comment img#vw-com{
    height: auto;
    width: 30px!important;
}
#comments .container-comments .list-comments .comment img#dks-com{
    height: auto;
    width: 40px!important;
}
#comments .container-comments .list-comments .comment .comment-text{
    max-width: 260px;
}
#comments .container-comments .list-comments .comment .divisor-com{
    height: 1px;
    width: 23px;
    background-color: #D9D9D9;
    margin: 10px 0;
}
@media screen and (max-width: 768px){
    #comments .container-comments .arrows-comments{
        display: none;
    }
    #comments{
        padding: 70px 0;
    }
}


/*-----------   Footer  ----------------------------*/
#mainFooterNew .main-color {
    background-color: #848282;
    padding: 35px 0px;
}
#mainFooterNew ul li {
    list-style: none;
    line-height: 1.6em;
    font-size: 0.8em;
}
#mainFooterNew ul li a {
    text-decoration: none;
    background-color: transparent;
}
#mainFooterNew ul li a:hover{
    background-color: transparent;
}
#mainFooterNew .logo-afip-colum, #mainFooterNew .logo-dietrich-colum{
    display: flex;
    flex-direction: column;
}
#mainFooterNew .logo-afip-colum{
    order: 1;
}
#footerLogoNew img{
    height: 75px;
    width: auto;
}
#mainFooterNew .logo-afip-colum .footer-icon-afip-new img{
    max-height: 80px;
    width: auto;
}
#mainFooterNew h5 a{
    text-decoration: none;
    font-weight: 700;
    font-weight: 700;
    font-size: 1em;
    line-height: 1.5em;
    padding: 0px 0px 15px;
}
#mainFooterNew .footer-h5-father{
    padding-bottom: 5px;
    cursor: pointer;
}
.f-drop ul{
    display: none;
}
#mainFooterNew ul{
    padding-bottom: 15px;
}
#mainFooterNew ul.social-list{
    display: flex;
    align-items: center;
}
#mainFooterNew .social-list-column{
    border-left: 1px solid rgb(217 217 217 / 25%);
    padding-left: 20px;
}



@media screen and (max-width: 1024px){
    #mainFooterNew .logo-dietrich-colum{
        align-items: center;
        padding-bottom: 60px;
    }
    #mainFooterNew .logo-afip-colum{
        order: 2;
        align-items: center;
    }
    #mainFooterNew .social-list-column{
        border: none;
        padding: 0!important;
        display: flex;
        flex-direction: column;
    }
    #mainFooterNew .social-list{
        order: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 60px;
    }
    #mainFooterNew .logo-afip-colum{
        align-items: start;
    }
    #mainFooterNew .logo-dietrich-colum{
        align-items: start;
    }
}
@media screen and (max-width: 768px){
    #mainFooterNew .logo-dietrich-colum{
        align-items: center;
        padding-bottom: 60px;
    }
    #mainFooterNew .logo-afip-colum{
        order: 2;
        align-items: center;
    }
    #mainFooterNew .social-list-column{
        border: none;
        padding: 0!important;
        display: flex;
        flex-direction: column;
    }
    #mainFooterNew .social-list{
        order: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 60px;
    }
}

/*------------- HOME LIBRO -----------------*/
section#libro{
    display:flex; 
    justify-content: center; 
    position: relative; 
    margin: 40px 0
}
section#libro .libro-banner{ 
    display: flex;
    justify-content: center;
    width:100%; 
    height:fit-content;
}
section#libro .libro-banner img{ 
    width: 1200px;
}

section#libroNuevo {
    flex-direction: row;
    display: flex;
    justify-content: center;
    position: relative;
    margin: 40px 0;
}

section#libroNuevo .libro-banner{ 
    display: flex;
    flex-direction: column;
    background-image: url(https://grupodietrich.com/wp-content/uploads/2025/06/GD_Banner_Mercadoshops_Banner_fondo_gris_final.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    justify-content: flex-start;
    padding: 80px 50px;
    width:1200px; 
    height:400px;
}

section#libroNuevo .libro-banner .txt-cont{ 
    width: 700px;
    display: flex;
    flex-direction: column;
}

section#libroNuevo .libro-banner img{ 
    width: 250px;
}
section#libroNuevo .libro-banner h2{ 
    font-family: 'Helvetica Neue LT Std';
    color: #000;
    font-size: 2.3em;
}

section#libroNuevo .libro-banner a{ 
    padding: 20px 50px;
    margin-top: 35px;
    color: #fff;
    background-color: #000;
    border: 1px solid #000;
    border-radius: 10px;
    text-decoration: none;
    font-size: 1.6em;
    font-weight: 700;
    width: fit-content;
}

section#libroNuevo .libro-banner a:hover{ 
    color: #000;
    background-color: transparent;
    border: 1px solid #000000;
    transition: 0.5s all;
}

@media screen and (max-width: 1200px){
    section#libro .libro-banner img{
        width: 100%
    }


    section#libroNuevo .libro-banner{ 
        background-image: url(https://grupodietrich.com/wp-content/uploads/2025/06/GD_Banner_Mercadoshops_Banner_fondo_gris_final_mobile_inferior.jpg);
        justify-content: flex-start;
        padding: 60px 0;
        width: 768px;
        height: 550px;
    }

    section#libroNuevo .libro-banner .txt-cont{ 
        width: auto;
        text-align: center;
        align-items: center;
        padding: 90px 10px;
    }

    section#libroNuevo .libro-banner h2{ 
    }

    section#libroNuevo .libro-banner a{ 
        padding: 20px 50px;
    }    
}

@media screen and (max-width: 767px){



    section#libroNuevo .libro-banner .txt-cont{ 
        padding: 20px 10px;
    }

    section#libroNuevo .libro-banner h2{ 
        font-size:1.5em;
    }

    section#libroNuevo .libro-banner a{ 
        padding: 10px 30px;
        font-size: 1.5em;
        margin-top: 15px;
    }    

}

/*------------- HOME CYBER-----------------*/


section#cyber {
    flex-direction: row;
    display: flex;
    justify-content: center;
    position: relative;
    margin: 40px 0;
}

section#cyber .libro-banner{ 
    display: flex;
    flex-direction: column;
background: #510BD9;
background: linear-gradient(0deg,rgba(81, 11, 217, 1) 0%, rgba(98, 54, 213, 1) 50%, rgba(81, 11, 217, 1) 100%);
    justify-content: center;
    padding: 80px 50px;
    width:100%; 
    height:500px;
}

section#cyber .libro-banner .txt-cont{ 
    width: 100%;
    display: flex;
    flex-direction: column;
}

section#cyber .libro-banner img{ 
    width: 200px;
}
section#cyber .libro-banner h2{ 
    font-family: 'Helvetica Neue LT Std';
    color: #f2f2f2;
    font-size: 2.5em;
    text-align: center;
}
section#cyber .libro-banner h4{ 
    color: #00FFFF;
    border: 2px solid red;
    padding: 10px 20px;
    border-radius: 10px;
    margin: 5px auto;
    animation: colorChange 4s infinite alternate;
}

@keyframes colorChange {
  0% {
    border-color: #D43365;
    color: #00FFFF;
  }
  50% {
    border-color: #00FFFF;
    color: #D43365;
  }
  100% {
    border-color: #D43365;
    color: #00FFFF
  }
}

section#cyber .libro-banner a{ 
    padding: 20px 50px;
    margin-top: 25px;
    color: #fff;
    background-color: #00FFFF;
    border: 1px solid #00FFFF;
    border-radius: 10px;
    text-decoration: none;
    font-size: 1.6em;
    font-weight: 700;
    width: fit-content;
}

section#cyber .libro-banner a:hover{ 
    color: #f2f2f2;
    background-color: #D43365;
    border: 1px solid #D43365;
    transition: 0.5s all;
}

@media screen and (max-width: 1200px){

    section#cyber .libro-banner{ 
        justify-content: flex-start;
        padding: 60px 0;
        width: 768px;
        height: 550px;
    }

    section#cyber .libro-banner .txt-cont{ 
        width: auto;
        text-align: center;
        align-items: center;
        padding: 90px 10px;
    }

    section#cyber .libro-banner h2{ 
    }

    section#cyber .libro-banner a{ 
        padding: 20px 50px;
    }    
}

@media screen and (max-width: 767px){

    section#cyber .libro-banner .txt-cont{ 
        padding: 20px 10px;
    }

    section#cyber .libro-banner h2{ 
        font-size:1.5em;
    }

    section#cyber .libro-banner a{ 
        padding: 10px 30px;
        font-size: 1.5em;
        margin-top: 15px;
    }    

}















/*-----------   utility  ----------------------------*/
#trigger{
    height: 1px;
}
.mt-80{
    margin-top: 80px;
}
.h-100{
    height:100px!important;
}
.text-white{
    color: #fff!important;
}
.no-active{
    display: none;
}
.overflow-hidden{
    overflow: hidden;
}
.grid {
    display: grid;
}
  
.no-gap {
    grid-gap: 0px !important;
}

.no-column-gap {
grid-column-gap: 0px !important;
}

.no-row-gap {
grid-row-gap: 0px !important;
}

.small-gap {
grid-gap: 8px !important;
}

.align-items-end {
align-items: end;
}

.align-items-start {
align-items: start;
}

.align-items-center {
align-items: center;
}

.grid-xl-1 {
grid-template-columns: repeat(1, 1fr);
}

.grid-xl-2 {
grid-template-columns: repeat(2, 1fr);
}

.grid-xl-3 {
grid-template-columns: repeat(3, 1fr);
}

.grid-xl-4 {
grid-template-columns: repeat(4, 1fr);
}

.grid-xl-5 {
grid-template-columns: repeat(5, 1fr);
}

.grid-xl-6 {
grid-template-columns: repeat(6, 1fr);
}

.grid-xl-7 {
grid-template-columns: repeat(7, 1fr);
}

.grid-xl-8 {
grid-template-columns: repeat(8, 1fr);
}

.grid-xl-9 {
grid-template-columns: repeat(9, 1fr);
}

.grid-xl-10 {
grid-template-columns: repeat(10, 1fr);
}

.grid-xl-11 {
grid-template-columns: repeat(11, 1fr);
}

.grid-xl-12 {
grid-template-columns: repeat(12, 1fr);
}

.col-xl-1 {
grid-column: span 1;
}
.col-xl-1.order-xl-1 {
order: 1;
}

.col-xl-0 {
display: none;
}

.col-xl-2 {
grid-column: span 2;
}
.col-xl-2.order-xl-2 {
order: 2;
}

.col-xl-0 {
display: none;
}

.col-xl-3 {
grid-column: span 3;
}
.col-xl-3.order-xl-3 {
order: 3;
}

.col-xl-0 {
display: none;
}

.col-xl-4 {
grid-column: span 4;
}
.col-xl-4.order-xl-4 {
order: 4;
}

.col-xl-0 {
display: none;
}

.col-xl-5 {
grid-column: span 5;
}
.col-xl-5.order-xl-5 {
order: 5;
}

.col-xl-0 {
display: none;
}

.col-xl-6 {
grid-column: span 6;
}
.col-xl-6.order-xl-6 {
order: 6;
}

.col-xl-0 {
display: none;
}

.col-xl-7 {
grid-column: span 7;
}
.col-xl-7.order-xl-7 {
order: 7;
}

.col-xl-0 {
display: none;
}

.col-xl-8 {
grid-column: span 8;
}
.col-xl-8.order-xl-8 {
order: 8;
}

.col-xl-0 {
display: none;
}

.col-xl-9 {
grid-column: span 9;
}
.col-xl-9.order-xl-9 {
order: 9;
}

.col-xl-0 {
display: none;
}

.col-xl-10 {
grid-column: span 10;
}
.col-xl-10.order-xl-10 {
order: 10;
}

.col-xl-0 {
display: none;
}

.col-xl-11 {
grid-column: span 11;
}
.col-xl-11.order-xl-11 {
order: 11;
}

.col-xl-0 {
display: none;
}

.col-xl-12 {
grid-column: span 12;
}
.col-xl-12.order-xl-12 {
order: 12;
}

.col-xl-0 {
display: none;
}

.order-xl-1 {
order: 1;
}

.order-xl-2 {
order: 2;
}

.order-xl-3 {
order: 3;
}

.order-xl-4 {
order: 4;
}

.order-xl-5 {
order: 5;
}

.order-xl-6 {
order: 6;
}

.order-xl-7 {
order: 7;
}

.order-xl-8 {
order: 8;
}

.order-xl-9 {
order: 9;
}

.order-xl-10 {
order: 10;
}

.order-xl-11 {
order: 11;
}

.order-xl-12 {
order: 12;
}

@media screen and (max-width: 1440px) {
    .grid-lg-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-lg-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-lg-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-lg-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-lg-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .grid-lg-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .grid-lg-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    .grid-lg-8 {
        grid-template-columns: repeat(8, 1fr);
    }
    .grid-lg-9 {
        grid-template-columns: repeat(9, 1fr);
    }
    .grid-lg-10 {
        grid-template-columns: repeat(10, 1fr);
    }
    .grid-lg-11 {
        grid-template-columns: repeat(11, 1fr);
    }
    .grid-lg-12 {
        grid-template-columns: repeat(12, 1fr);
    }
    .col-lg-1 {
        grid-column: span 1;
    }
    .col-lg-1.order-lg-1 {
        order: 1;
    }
    .col-lg-0 {
        display: none;
    }
    .col-lg-2 {
        grid-column: span 2;
    }
    .col-lg-2.order-lg-2 {
        order: 2;
    }
    .col-lg-0 {
        display: none;
    }
    .col-lg-3 {
        grid-column: span 3;
    }
    .col-lg-3.order-lg-3 {
        order: 3;
    }
    .col-lg-0 {
        display: none;
    }
    .col-lg-4 {
        grid-column: span 4;
    }
    .col-lg-4.order-lg-4 {
        order: 4;
    }
    .col-lg-0 {
        display: none;
    }
    .col-lg-5 {
        grid-column: span 5;
    }
    .col-lg-5.order-lg-5 {
        order: 5;
    }
    .col-lg-0 {
        display: none;
    }
    .col-lg-6 {
        grid-column: span 6;
    }
    .col-lg-6.order-lg-6 {
        order: 6;
    }
    .col-lg-0 {
        display: none;
    }
    .col-lg-7 {
        grid-column: span 7;
    }
    .col-lg-7.order-lg-7 {
        order: 7;
    }
    .col-lg-0 {
        display: none;
    }
    .col-lg-8 {
        grid-column: span 8;
    }
    .col-lg-8.order-lg-8 {
        order: 8;
    }
    .col-lg-0 {
        display: none;
    }
    .col-lg-9 {
        grid-column: span 9;
    }
    .col-lg-9.order-lg-9 {
        order: 9;
    }
    .col-lg-0 {
        display: none;
    }
    .col-lg-10 {
        grid-column: span 10;
    }
    .col-lg-10.order-lg-10 {
        order: 10;
    }
    .col-lg-0 {
        display: none;
    }
    .col-lg-11 {
        grid-column: span 11;
    }
    .col-lg-11.order-lg-11 {
        order: 11;
    }
    .col-lg-0 {
        display: none;
    }
    .col-lg-12 {
        grid-column: span 12;
    }
    .col-lg-12.order-lg-12 {
        order: 12;
    }
    .col-lg-0 {
        display: none;
    }
    .order-lg-1 {
        order: 1;
    }
    .order-lg-2 {
        order: 2;
    }
    .order-lg-3 {
        order: 3;
    }
    .order-lg-4 {
        order: 4;
    }
    .order-lg-5 {
        order: 5;
    }
    .order-lg-6 {
        order: 6;
    }
    .order-lg-7 {
        order: 7;
    }
    .order-lg-8 {
        order: 8;
    }
    .order-lg-9 {
        order: 9;
    }
    .order-lg-10 {
        order: 10;
    }
    .order-lg-11 {
        order: 11;
    }
    .order-lg-12 {
        order: 12;
    }
}
@media screen and (max-width: 1024px) {
    .grid-md-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-md-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-md-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-md-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-md-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .grid-md-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .grid-md-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    .grid-md-8 {
        grid-template-columns: repeat(8, 1fr);
    }
    .grid-md-9 {
        grid-template-columns: repeat(9, 1fr);
    }
    .grid-md-10 {
        grid-template-columns: repeat(10, 1fr);
    }
    .grid-md-11 {
        grid-template-columns: repeat(11, 1fr);
    }
    .grid-md-12 {
        grid-template-columns: repeat(12, 1fr);
    }
    .col-md-1 {
        grid-column: span 1;
    }
    .col-md-1.order-md-1 {
        order: 1;
    }
    .col-md-0 {
        display: none;
    }
    .col-md-2 {
        grid-column: span 2;
    }
    .col-md-2.order-md-2 {
        order: 2;
    }
    .col-md-0 {
        display: none;
    }
    .col-md-3 {
        grid-column: span 3;
    }
    .col-md-3.order-md-3 {
        order: 3;
    }
    .col-md-0 {
        display: none;
    }
    .col-md-4 {
        grid-column: span 4;
    }
    .col-md-4.order-md-4 {
        order: 4;
    }
    .col-md-0 {
        display: none;
    }
    .col-md-5 {
        grid-column: span 5;
    }
    .col-md-5.order-md-5 {
        order: 5;
    }
    .col-md-0 {
        display: none;
    }
    .col-md-6 {
        grid-column: span 6;
    }
    .col-md-6.order-md-6 {
        order: 6;
    }
    .col-md-0 {
        display: none;
    }
    .col-md-7 {
        grid-column: span 7;
    }
    .col-md-7.order-md-7 {
        order: 7;
    }
    .col-md-0 {
        display: none;
    }
    .col-md-8 {
        grid-column: span 8;
    }
    .col-md-8.order-md-8 {
        order: 8;
    }
    .col-md-0 {
        display: none;
    }
    .col-md-9 {
        grid-column: span 9;
    }
    .col-md-9.order-md-9 {
        order: 9;
    }
    .col-md-0 {
        display: none;
    }
    .col-md-10 {
        grid-column: span 10;
    }
    .col-md-10.order-md-10 {
        order: 10;
    }
    .col-md-0 {
        display: none;
    }
    .col-md-11 {
        grid-column: span 11;
    }
    .col-md-11.order-md-11 {
        order: 11;
    }
    .col-md-0 {
        display: none;
    }
    .col-md-12 {
        grid-column: span 12;
    }
    .col-md-12.order-md-12 {
        order: 12;
    }
    .col-md-0 {
        display: none;
    }
    .order-md-1 {
        order: 1;
    }
    .order-md-2 {
        order: 2;
    }
    .order-md-3 {
        order: 3;
    }
    .order-md-4 {
        order: 4;
    }
    .order-md-5 {
        order: 5;
    }
    .order-md-6 {
        order: 6;
    }
    .order-md-7 {
        order: 7;
    }
    .order-md-8 {
        order: 8;
    }
    .order-md-9 {
        order: 9;
    }
    .order-md-10 {
        order: 10;
    }
    .order-md-11 {
        order: 11;
    }
    .order-md-12 {
        order: 12;
    }
}
@media screen and (max-width: 768px) {
    .grid-tbt-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-tbt-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-tbt-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-tbt-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-tbt-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .grid-tbt-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .grid-tbt-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    .grid-tbt-8 {
        grid-template-columns: repeat(8, 1fr);
    }
    .grid-tbt-9 {
        grid-template-columns: repeat(9, 1fr);
    }
    .grid-tbt-10 {
        grid-template-columns: repeat(10, 1fr);
    }
    .grid-tbt-11 {
        grid-template-columns: repeat(11, 1fr);
    }
    .grid-tbt-12 {
        grid-template-columns: repeat(12, 1fr);
    }
    .col-tbt-1 {
        grid-column: span 1;
    }
    .col-tbt-1.order-tbt-1 {
        order: 1;
    }
    .col-tbt-0 {
        display: none;
    }
    .col-tbt-2 {
        grid-column: span 2;
    }
    .col-tbt-2.order-tbt-2 {
        order: 2;
    }
    .col-tbt-0 {
        display: none;
    }
    .col-tbt-3 {
        grid-column: span 3;
    }
    .col-tbt-3.order-tbt-3 {
        order: 3;
    }
    .col-tbt-0 {
        display: none;
    }
    .col-tbt-4 {
        grid-column: span 4;
    }
    .col-tbt-4.order-tbt-4 {
        order: 4;
    }
    .col-tbt-0 {
        display: none;
    }
    .col-tbt-5 {
        grid-column: span 5;
    }
    .col-tbt-5.order-tbt-5 {
        order: 5;
    }
    .col-tbt-0 {
        display: none;
    }
    .col-tbt-6 {
        grid-column: span 6;
    }
    .col-tbt-6.order-tbt-6 {
        order: 6;
    }
    .col-tbt-0 {
        display: none;
    }
    .col-tbt-7 {
        grid-column: span 7;
    }
    .col-tbt-7.order-tbt-7 {
        order: 7;
    }
    .col-tbt-0 {
        display: none;
    }
    .col-tbt-8 {
        grid-column: span 8;
    }
    .col-tbt-8.order-tbt-8 {
        order: 8;
    }
    .col-tbt-0 {
        display: none;
    }
    .col-tbt-9 {
        grid-column: span 9;
    }
    .col-tbt-9.order-tbt-9 {
        order: 9;
    }
    .col-tbt-0 {
        display: none;
    }
    .col-tbt-10 {
        grid-column: span 10;
    }
    .col-tbt-10.order-tbt-10 {
        order: 10;
    }
    .col-tbt-0 {
        display: none;
    }
    .col-tbt-11 {
        grid-column: span 11;
    }
    .col-tbt-11.order-tbt-11 {
        order: 11;
    }
    .col-tbt-0 {
        display: none;
    }
    .col-tbt-12 {
        grid-column: span 12;
    }
    .col-tbt-12.order-tbt-12 {
        order: 12;
    }
    .col-tbt-0 {
        display: none;
    }
    .order-tbt-1 {
        order: 1;
    }
    .order-tbt-2 {
        order: 2;
    }
    .order-tbt-3 {
        order: 3;
    }
    .order-tbt-4 {
        order: 4;
    }
    .order-tbt-5 {
        order: 5;
    }
    .order-tbt-6 {
        order: 6;
    }
    .order-tbt-7 {
        order: 7;
    }
    .order-tbt-8 {
        order: 8;
    }
    .order-tbt-9 {
        order: 9;
    }
    .order-tbt-10 {
        order: 10;
    }
    .order-tbt-11 {
        order: 11;
    }
    .order-tbt-12 {
        order: 12;
    }
}
@media screen and (max-width: 425px) {
    .grid-sm-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-sm-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-sm-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-sm-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-sm-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .grid-sm-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .grid-sm-7 {
        grid-template-columns: repeat(7, 1fr);
    }
    .grid-sm-8 {
        grid-template-columns: repeat(8, 1fr);
    }
    .grid-sm-9 {
        grid-template-columns: repeat(9, 1fr);
    }
    .grid-sm-10 {
        grid-template-columns: repeat(10, 1fr);
    }
    .grid-sm-11 {
        grid-template-columns: repeat(11, 1fr);
    }
    .grid-sm-12 {
        grid-template-columns: repeat(12, 1fr);
    }
    .col-sm-1 {
        grid-column: span 1;
    }
    .col-sm-1.order-sm-1 {
        order: 1;
    }
    .col-sm-0 {
        display: none;
    }
    .col-sm-2 {
        grid-column: span 2;
    }
    .col-sm-2.order-sm-2 {
        order: 2;
    }
    .col-sm-0 {
        display: none;
    }
    .col-sm-3 {
        grid-column: span 3;
    }
    .col-sm-3.order-sm-3 {
        order: 3;
    }
    .col-sm-0 {
        display: none;
    }
    .col-sm-4 {
        grid-column: span 4;
    }
    .col-sm-4.order-sm-4 {
        order: 4;
    }
    .col-sm-0 {
        display: none;
    }
    .col-sm-5 {
        grid-column: span 5;
    }
    .col-sm-5.order-sm-5 {
        order: 5;
    }
    .col-sm-0 {
        display: none;
    }
    .col-sm-6 {
        grid-column: span 6;
    }
    .col-sm-6.order-sm-6 {
        order: 6;
    }
    .col-sm-0 {
        display: none;
    }
    .col-sm-7 {
        grid-column: span 7;
    }
    .col-sm-7.order-sm-7 {
        order: 7;
    }
    .col-sm-0 {
        display: none;
    }
    .col-sm-8 {
        grid-column: span 8;
    }
    .col-sm-8.order-sm-8 {
        order: 8;
    }
    .col-sm-0 {
        display: none;
    }
    .col-sm-9 {
        grid-column: span 9;
    }
    .col-sm-9.order-sm-9 {
        order: 9;
    }
    .col-sm-0 {
        display: none;
    }
    .col-sm-10 {
        grid-column: span 10;
    }
    .col-sm-10.order-sm-10 {
        order: 10;
    }
    .col-sm-0 {
        display: none;
    }
    .col-sm-11 {
        grid-column: span 11;
    }
    .col-sm-11.order-sm-11 {
        order: 11;
    }
    .col-sm-0 {
        display: none;
    }
    .col-sm-12 {
        grid-column: span 12;
    }
    .col-sm-12.order-sm-12 {
        order: 12;
    }
    .col-sm-0 {
        display: none;
    }
    .order-sm-1 {
        order: 1;
    }
    .order-sm-2 {
        order: 2;
    }
    .order-sm-3 {
        order: 3;
    }
    .order-sm-4 {
        order: 4;
    }
    .order-sm-5 {
        order: 5;
    }
    .order-sm-6 {
        order: 6;
    }
    .order-sm-7 {
        order: 7;
    }
    .order-sm-8 {
        order: 8;
    }
    .order-sm-9 {
        order: 9;
    }
    .order-sm-10 {
        order: 10;
    }
    .order-sm-11 {
        order: 11;
    }
    .order-sm-12 {
        order: 12;
    }
    .grid {
        grid-gap: 8px;
    }
}