@font-face {
    font-family: 'PPAgrandir-WideRegular';
    src: url('../fonts/PPAgrandir-WideRegular.woff2') format('woff2'),
        url('../fonts/PPAgrandir-WideRegular.woff') format('woff'),
        url('../fonts/PPAgrandir-WideRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Agrandir-GrandLight';
    src: url('../fonts/Agrandir-GrandLight.woff2') format('woff2'),
        url('../fonts/Agrandir-GrandLight.woff') format('woff'),
        url('../fonts/Agrandir-GrandLight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PPAgrandir-NarrowLight';
    src: url('../fonts/PPAgrandir-NarrowLight.woff2') format('woff2'),
        url('../fonts/PPAgrandir-NarrowLight.woff') format('woff'),
        url('../fonts/PPAgrandir-NarrowLight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PPAgrandir-NarrowMedium';
    src: url('../fonts/PPAgrandir-NarrowMedium.woff2') format('woff2'),
        url('../fonts/PPAgrandir-NarrowMedium.woff') format('woff'),
        url('../fonts/PPAgrandir-NarrowMedium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body {
  font-family: 'PPAgrandir-NarrowLight';
}
a, a:hover, a:focus {
  color: #000000;
}
.fw-medium{
    font-family: 'PPAgrandir-NarrowMedium';
    font-weight: 400;
}
option{
    font-family: 'PPAgrandir-NarrowLight', Arial;
}

/************ TITLES ************/
h1, h2, h3, .h1, .h2, .h3 {
  line-height: 1;
  font-family: 'PPAgrandir-NarrowLight';
  text-transform: uppercase;
   
}
h1, .h1{
    font-size: 4rem;
    text-transform: none;
}
h2, .h2{
    font-size: 3rem;
}
h3, .h3{
    font-size: 2rem;
}
h4, .h4{
    font-size: 1.6rem;
}
/************ BUTTONS ************/
.btn {
  text-transform: uppercase;
  font-weight: 400;
  border-radius: 0 !important;    
  font-family: 'PPAgrandir-NarrowMedium';
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn svg{
    margin-left: 5px;
}
.btn:not(.btn-sm, .btn-lg){
  font-size: 1rem;
}
.btn.btn-primary, .btn.btn-primary:hover,
.btn.btn-primary:focus{
  background: none;
  border: 1px solid #000000;
  color: #000000;
    box-sizing: border-box;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus{
  background: #f0f0f0;
}
:not(.btn-group) .btn.btn-primary:hover,
:not(.btn-group) .btn.btn-primary:focus{
  box-shadow: 5px 5px 0 #000;
}

/************ HEADER ************/
.section-infobar {
  font-family: 'PPAgrandir-NarrowLight';
}
.navbar-brand{
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.navbar.navbar-compact .navbar-brand img,
.offcanvasNavbar .offcanvas-header img{
  max-height: 50px;
    width: auto !important;
}
.navbar a.nav-link {
  color: inherit;
  text-transform: uppercase;
  font-family: 'PPAgrandir-NarrowMedium';
}


@media (max-width: 1400px) {
    .navbar.navbar-compact .navbar-brand img{
        height: 40px !important;
    }
    .navbar-nav .nav-link svg{
        height: 30px;
    }
}


/************ CUSTOM HP BANDEAU ************/
.custom-banner .btn-group div:first-child .btn{
    background: #000;
    color: #fff !important;
    height: 100%;
}
.custom-banner .btn-group div:first-child .btn:hover{
    box-shadow: -5px 5px 0 #aaa;
}
.custom-banner .container{
    transform: translateY(-50%);
}
.custom-banner h1 > .d-block,
.custom-banner h1 .lottie-animation{
    width: 60px;
    display: inline-block !important;
}

@media (max-width: 768px) {
    .custom-banner .container{
        position: static !important;
        transform: none;
    }   
    .custom-banner .btn-group{
        display: block;
        width: 100%;
    }
    .custom-banner .btn-group .btn{
        width: 100%;
        min-height: 60px;
        justify-content: center;
    }
    .custom-banner .btn-group div:first-child .btn{
        margin-left: -1px;
    }
}



/************ CUSTOM CONTENT SLIDER  ************/
.slider-content .carousel-inner{
    z-index: 1;
}
.slider-content .nav-slider{
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 20;
}
.slider-content .nav-slider .carousel-indicators{
    position: static;
    display: block;
}
.slider-content .nav-slider .carousel-indicators [data-bs-target]{
  display: none;
  width: auto;
  height: auto;
  margin: 0;
  text-indent: 0;
  cursor: pointer;
  border: 0;
  background: none;
  opacity: 1;
}
.slider-content .nav-slider .carousel-indicators .active {
  opacity: 1;
    display: inline;
}
.slider-content .nav-slider button{
    border: 0;
    padding: 0;
    background: none;
}
.slider-content .nav-slider button + button{
    margin-left: 10px;
}

/*
.slider-content .content-slider-item .lottie-animation,
.slider-content .content-slider-item #animation-container,
.slider-content .content-slider-item .animation,
.slider-content .content-slider-item .animation svg{
    width: 100% !important;
    max-width: none !important;
    display: block !important;
}
*/

@media (max-width: 768px) {
    .slider-content .carousel-inner{
        padding-bottom: 80px;
        min-height: 660px;
    }
    .slider-content .nav-slider{
        left: 1rem;
        bottom: 1rem;
    }
}

/************ SCROLLING INFOBAR ************/
/*
.custom-ib .ib:last-child{
    margin-bottom: 0 !important;
}
*/

/************ SCROLLING INFOBAR ************/
.scrolling-infobar{
    white-space: nowrap;
}
.scrolling-infobar > div{
    white-space: nowrap;
    -webkit-animation:autoScrollX 90s linear infinite;
    -moz-animation:autoScrollX 90s linear infinite;
    animation:autoScrollX 90s linear infinite;
}
.scrolling-infobar p{ margin: 0; }

@-moz-keyframes autoScrollX { 100% { -moz-transform: translateX(-100%); } }
@-webkit-keyframes autoScrollX { 100% { -webkit-transform: translateX(-100%); } }
@keyframes autoScrollX { 100% { -webkit-transform: translateX(-100%); transform:translateX(-100%); } }



/************ COMPARE TABLE ************/
.compare-table .table p {
  margin: 0;
}
.compare-table .table br {
  display: none;
}
.compare-table .table tr:not(:last-child) td{
    border-bottom-color: #dee2e6 !important;
}


/************ ACCORDIONS ************/
.accordion-button p{
    margin-bottom: 0;
}
.accordion-button:after,
.accordion-button:not(.collapsed):after{
    background-image: url("/eshop-themes/ziqy/img/arrow-down.svg");
    background-position: center;
}
.accordion-button:not(.collapsed):after{
    transform: rotate(-180deg);
}
.accordion-button.text-white:after,
.accordion-button.text-white:not(.collapsed):after{
    background-image: url("/eshop-themes/ziqy/img/arrow-down-white.svg");
}


/************ ACCORDIONS IN PARENT COMPONENT ************/
.image-text-section .accordion{
    border-top: 1px solid #000;
    margin-top: 2rem;
}
.image-text-section .text-white .accordion-item{
    border-color: #fff;
}
.image-text-section .accordion-item{
    background: none;
    border-color: #000;
}
.image-text-section .accordion-item .accordion-button{
    background: none;
    padding: 8px 0;
    font-size: 1.1rem;
    font-weight: 700;
}
.image-text-section .accordion-item .accordion-body{
    padding-left: 0;
    padding-right: 0;
}


/************ VIDEO ************/
@media (max-width: 992px) {
    .custom-video h1{
        font-size: 3rem;
    }
}
@media (max-width: 768px) {
    .custom-video h1{
        font-size: 2rem;
    }
}

/********** slick slider **********/
.slick-slider, .slick-slider * {
    max-width: none !important;
    height: auto !important;
}
.slick-list{
    overflow: hidden;
}
.carousel-control-prev{
    left: 15px;
}
.carousel-control-next{
    right: 15px;
}


/********** JOIN US banner **********/
.join-us-banner img{
    max-width: 200px;
}
.join-us-banner .price{
    font-family: 'PPAgrandir-NarrowMedium'; 
    line-height: 1;
}
.join-us-banner .price b{
    display: block;
    font-weight: bolder;
    font-size: 2.5rem;
}


/********** PACK choose sneakers **********/
.delete-pack-product{
    margin-top: -1.5rem;
}