@media screen and (max-width: 768px) {
    .principal, #banner, #ambassadors {
        height: 450px;
        min-height: auto;
    }
    /* .carousel-item {
        padding: 0 70px;
    }
    .carousel-item__text {
        width: 70%;
        flex: 1 1 65%;
    }
    .carousel-item__figure {
        width: 30%;
        flex: 1 1 35%;
    } */
    .carousel-control-next, .carousel-control-prev {
        width: 60px;
    }
    .principal-carousel__button {
        font-size: 0.8rem;
    }
    .how-all {
        min-height: auto;
    }
    .h4, h4 {
        font-size: 1.2rem;
    }
    .card-user {
        padding: 25px 10px 0 10px;
    }
    .card-user .card-user-img {
        grid-column: 1/3;
    }
    .card-user .card-user-info {
        grid-column: 3/-1;
        padding-left: 10px;
    }
    .card-user-container:nth-child(even) .card-user .card-user-info {
        grid-column: 1/3;
    }
    .card-user .card-user-info .card-user-text {
        font-size: 14px;
        margin-bottom: 15px;
    }
    .card-user .card-user-info .card-user-btn {
        font-size: 11px;
    }

    .card-text {
        font-size: 15px;
    }

    .card-story {
        padding: 0 25px 0 0;
    }
    .card-story .card-story-img {
        grid-column: 1/3;
    }
    .card-story .card-story-info {
        grid-column: 4/-1;
    }

    .menu-footer__brand {
        width: 30%;
        margin-bottom: 20px;
    }
    .menu-footer__submenu {
        width: 30%;
        margin: 20px 0;
    }
    .video .video-container {
        grid-column: 1/-1;
    }
    .card-info {
        min-height: 380px;
    }
    .featured-gallery figure {
        margin: 10px;
    }
    .cta-bk-btn {
        min-height: 400px;
    }
    .banner {
        min-height: 500px;
    }
    .banner-title {
        font-size: 2rem;
    }
    .card-info .card-info-text .card-info-text-title {
        font-size: 2.2rem;
    }
    .card-info-text-description,
    .card-info-text-description p {
        font-size: 16px;
    }
    .card-info {
        grid-template-rows: 40px 1fr 40px;
    }
    .card-info .card-info-img {
        grid-column: 3/-1;
    }
    .card-info .card-info-text {
        grid-column: 1/3;
        padding: 15px;
    }
    .card-info.card-info-right .card-info-img {
        grid-column: 1/3;
    }
    .card-info.card-info-right .card-info-text {
        grid-column: 3/-1;
    }
    .timeline-item {
        align-self: baseline !important;
        width: 100%;
        padding: 0 30px 150px 80px;
    }
    .timeline-item:before {
        left: 10px !important;
        padding: 0 !important;
        top: 50px;
        text-align: center !important;
        width: 60px;
        border: none !important;
    }
    .timeline-item:last-child {
        padding-bottom: 40px;
    }
    .timeline:before {
        left: 40px;
    }
    /* .carousel#team-carousel .carousel-inner .carousel-item>div {
        display: none;
    }

    .carousel#team-carousel .carousel-inner .carousel-item>div:first-child {
        display: block;
    }
    .carousel#team-carousel .carousel-inner .carousel-item-right.active,
    .carousel#team-carousel .carousel-inner .carousel-item-next {
        transform: translateX(33.333%);
    }

    .carousel#team-carousel .carousel-inner .carousel-item-left.active,
    .carousel#team-carousel .carousel-inner .carousel-item-prev {
        transform: translateX(-33.333%);
    } */
    .principal-ss {
        padding: 15px 15px 80px 15px;
    }
    .card-story .card-story-info .card-story-text {
        font-size: 14px;
        margin-bottom: 15px;
    }
    .card-story .card-story-info .card-story-btn {
        font-size: 11px;
    }
    .ss-title.title-light h1 {
        font-size: 30px;
    }
    .banner-store {
        min-height: 400px;
    }
    .store {
        grid-template-columns: 0.35fr 20px 1fr;
    }
    .masonry {
        column-count: 2;
    }
    .merchant-data .merchant-data-section {
        flex-wrap: wrap;
    }
    .merchant-data .merchant-data-section div {
        width: 40%;
        margin: 20px;
    }
    .title-absolute h1 {
        font-size: 3em;
    }
}
@media screen and (max-width: 640px) {
    .carousel-item {
        background-position: left center;
    }
    .carousel-item__figure img {
        width: 200px!important;
        margin: 0 auto;
    }
    .carousel-control-next, .carousel-control-prev {
        width: 50px;
    }
    .card-user-container {
        margin: 20px 15px;
    }
    .team .carousel-item__text,
    .team .carousel-item__figure,
    .carousel-item__text,
    .carousel-item__figure {
        flex: 1 100%;
        width: 50%;
        text-align: center;
        padding-right: 0;
    }
    .intro-content, .intro-figure,
    .how-content, .how-figure,
    .what-content, .what-figure {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .what-all {
        flex-direction: column-reverse;
    }
    .how-content {
        padding-right: 140px;
    }
    .banner-top__text-img {
        width: 250px;
    }
    .separator-athlete__text {
        font-size: 1em;
    }
    .masonry {
        column-count: 1;
    }
    .single_product .single_product-gallery {
        grid-template-columns: repeat(5, 1fr);
        flex: 1 1 100%;
    }
    .single_product .single_product-info {
        flex: 1 1 100%;
        padding: 15px;
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 576px) {
    .title-absolute h1 {
        font-size: 4em;
    }
    #banner, #ambassadors {
        height: auto;
        padding: 30px 5px;
        background-size: 620px;
        background-repeat: no-repeat;
        background-color: #000000;
    }
    #banner {
        background-position: bottom right;
    }
    #ambassadors {
        background-position: bottom left;
    }
    .banner-item__text,
    .banner-item__content.banner-item_right .banner-item__text {
        padding: 0;
    }
    .banner-page {
        height: 60px;
    }
    .banner-page img {
        width: 200px;
    }
    .login-img {
        max-width: 100%;
    }
    .how-content {
        padding-right: 95px;
    }
    .video {
        min-height: 380px;
    }
    .principal-history {
        padding: 100px 15px 30px 15px;
        min-height: auto;
    }
    .cta-all {
        min-height: 400px;
    }
    .merchant-data .merchant-data-section div {
        width: 100%;
        margin: 20px;
    }
    .product-card {
        flex: 0 0 45%;
    }
    .post-title {
        font-size: 2rem;
    }
/* }

@media screen and (max-width: 425px) { */
    .video {
        grid-template-columns: 0px 1fr 0px;
    }
    .card-user {
        grid-template-rows: 0px auto 1fr;
        background-size: 750px;
        background-repeat: no-repeat;
        background-position: left bottom;
    }
    .card-user .card-user-img,
    .card-user-container:nth-child(even) .card-user .card-user-img {
        grid-row: 3/-1;
        grid-column: 1/-1;
        justify-self: center;
        max-width: 300px;
    }
    .card-user .card-user-info,
    .card-user-container:nth-child(even) .card-user .card-user-info {
        grid-column: 1/-1;
        margin-bottom: 50px;
    }
    .card-user .card-user-info .card-user-title {
        font-size: 18px;
    }
    .card-user .card-user-info .card-user-subtitle {
        font-size: 16px;
        margin-bottom: 15px;
    }
    .menu-footer {
        background-position: bottom right;
        justify-content: flex-start;
    }
    .menu-footer__brand {
        width: 100%;
        margin-bottom: 20px;
    }
    .menu-footer__submenu {
        width: 50%;
        margin: 20px 0;
    }
    .team .carousel-item__text {
        padding-right: 0;
        padding: 35px 0 35px 0;
    }
    .team .carousel-control img{
        width: 50px;
    }
    .our-philosophy{
        background-position: right;
    }
    .cta-our-philo {
        min-height: initial;
    }
    .carousel-item__text {
        padding-right: 0;
        padding: 35px 0 35px 0;
    }
    .carousel-control img{
        width: 50px;
    }
    .how-all {
        flex-direction: column-reverse;
        min-height: initial;
    }
    .how-content {
        text-align: center;
        padding: 15px;
    }
    .how-figure {
        margin-bottom: 20px;
    }
    .call-to-action{
        background-position: right;
    }
    .cta-all, .call-to-action-2 {
        min-height: initial;
    }
    .what-all {
        min-height: initial;
    }
    .what-content {
        text-align: center;
    }
    .what-figure {
        margin-bottom: 20px;
    }
    .call-to-action-2 {
        padding: 30px 0;
        background-position: left;
    }
    .cta-content {
        max-width: 100%;
    }
    .menu-footer {
        background-position: bottom right;
        justify-content: flex-start;
    }
    .menu-footer__brand {
        width: 100%;
        margin-bottom: 20px;
    }
    .menu-footer__submenu {
        width: 50%;
        margin: 20px 0;
    }
    .card-info {
        grid-template-rows: 40px 1fr;
    }
    .card-info.card-info-bg.card-info-bg__bottom {
        background-position: bottom LEFT;
        background-size: 750px;
    }
    .card-info.card-info-right .card-info-img {
        grid-column: 1/-1;
    }
    .card-info .card-info-img img {
        max-width: 350px;
    }
    .card-info .card-info-img,
    .card-info .card-info-img.card-info-img__bottom {
        grid-row: 3/-1;
        grid-column: 1/-1;
    }
    .card-info .card-info-text,
    .card-info.card-info-right .card-info-text {
        grid-column: 1/-1;
    }
    .banner-item__content.banner-item_right {
        flex-direction: column-reverse;
    }
    .banner-item__figure {
        flex: 1 1 100%;
        min-height: 350px;
        width: 100%;
    }

    .banner-item__text {
        flex: 1 1 100%;
        width: 100%;
    }
    .our-philosophy {
        padding: 50px 15px;
    }
    .our-philosophy__content {
        column-count: 1;
    }
    .card-story {
        grid-template-rows: 15px 1fr;
        padding: 0;
    }
    .card-story .card-story-img {
        grid-row: 3/-1;
        grid-column: 1/-1;
    }
    .card-story .card-story-info {
        grid-column: 1/-1;
        padding: 15px;
    }
    .cont-filter-toggler,
    .close-filter {
        display: block;
    }
    .store {
        grid-template-areas:
            "products products products"
            "products products products"
            "products products products"
            "pagination pagination pagination";
    }
    .store #filters {
        position: fixed;
        top: 0;
        left: -100%;
        z-index: 9;
        width: 80%;
        height: 100%;
        transition: all 0.25s ease;
    }
    .store #filters.active {
        left: 0;
    }
    .filters-toggler {
        display: block;
    }
}