#products .banner {
    position: relative;
}

#products .banner .swiper-slide {
    height: 95vh;
    position: relative;
}

#products .banner .swiper-slide img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#products .banner .swiper-slide img:not(.bg):not(.ingredients) {
    transform: translateY(-12.5%) !important
}

#products .banner .swiper-slide img.bg {
    position: relative;
}

#products .banner .swiper-slide img.ingredients {
    object-fit: unset;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#products .banner .bars {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    z-index: 100;
    display: flex;
}

#products .banner .bars a {
    width: 11.10%;
    transform: translateY(36%);
    transition: all .5s;
}

#products .banner .bars a.active {
    transform: translateY(0%);
}

#products .banner .bars a:hover {
    transform: translateY(0%);
}

#products .banner .bars a img {
    width: 100%;
    transform: scale(1.6);
}

#products .information {
    color: #fff;
    position: relative;
    z-index: 100;
}

#products .information .left {
    padding: 30px;
    padding-left: 100px;
}

#products .information .left .title>div {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

#products .information .left h2 {
    font-family: 'Futura Std Condensed';
    font-weight: 700;
    font-size: 2rem;
}

#products .information .left .gi {
    display: inline-flex;
    font-size: .8rem;
    margin-top: 15px;
}

#products .information .left .gi div {
    padding: 5px
}

#products .information .left .gi div:first-child {
    border: solid 1px #fff;
    border-right: solid 1px #fff;
    padding-right: 5px;
}

#products .information .left .gi div:last-child {
    border: solid 1px #fff;
    border-left: none;
    padding-left: 5px;
}

#products .information .left .description p {
    font-size: .8rem;
    text-transform: uppercase;
    line-height: 1rem;
}

#products .information .left .description p:not(:first-child) {
    margin-top: 15px;
    padding-top: 15px;
    border-top: solid 1px #fff;
    line-height: 1.2rem;
}

#products .information .right {
    padding: 30px;
    padding-right: 100px;
    padding-top: 0;
}

#products .information .right .nav {
    transform: translateY(-100%);
    margin-left: -30px;
    border: none;
    align-items: end;
}

#products .information .right .nav-link {
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.76);
    background-color: #B68756;
    font-family: 'Futura Std Condensed';
    font-weight: 700;
    color: #fff;
    border: none;
}

#products .information .right .nav-link.active {
    font-size: 1.5rem;
    box-shadow: none;
    z-index: 100;
}

#products .information .right .tab-pane {
    font-size: 1rem;
}

#products .information .right .tab-pane p {
    margin-bottom: 15px;
    line-height: 1.5rem;
}

#products .information .right .tab-pane strong {
    font-family: 'Futura Std Condensed';
    font-weight: 700;
}

#products .information .right .tab-pane img {
    width: 100%;
}

#productIndex {
    background-image: url(../img/bmi_bg.jpg);
    background-size: cover;
    background-position: center;
    padding: 50px 0 0;
    color: #fff
}

#productIndex .packaging {
    width: 100%;
}

#productIndex .packaging>div {
    position: relative;
}

#productIndex .packaging a.variant {
    position: absolute;
    top: 0;
    left: 0;
    width: 10%;
    height: 100%;
    text-decoration: none;
    /* background-color: rgba(0,0,0,.5); */
}

#productIndex .packaging a.v1 {
    width: 10%;
    left: 1%
}

#productIndex .packaging a.v2 {
    left: 12.3%
}

#productIndex .packaging a.v3 {
    left: 23.5%
}

#productIndex .packaging a.v4 {
    left: 34.7%
}

#productIndex .packaging a.v5 {
    left: 45.6%
}

#productIndex .packaging a.v6 {
    left: 56.5%
}

#productIndex .packaging a.v7 {
    left: 67.5%
}

#productIndex .packaging a.v8 {
    left: 78.4%
}

#productIndex .packaging a.v9 {
    left: 89%
}

#productIndex .title {
    width: 30%;
}

#productIndex h1 {
    margin-top: 15px;
    font-family: 'Futura Std Condensed';
    font-weight: 700;
    padding: 5px;
    display: inline-block;
    background-color: #226613;
    font-size: 2rem;
}


#productIndex p {
    margin-top: 15px;
    line-height: 1.5rem;
}

#productIndex p a {
    color: #fff;
    text-decoration: underline;
}

#productIndex p strong {
    font-size: 1.5rem;
}

#productIndex .gi h1 {
    display: flex;
    background: none;
    padding: 0;
    align-items: center;
}

#productIndex .gi h1 span {
    background-color: #226613;
    padding: 5px;
    display: inline-block;
    height: auto
}

#productIndex .gi p {
    font-size: 1rem;
}

#productIndex .gi img {
    height: 50px;
}

#productIndex .packaging {
    margin-top: 90px;
    text-align: center;
    position: relative;
}

#productIndex .packaging img {
    width: 100%;
}

#productIndex .packaging .btn {
    position: absolute;
    top: 0;
    right: 50%;
    transform: translate(50%, -100%);
    font-size: 1.5rem;
    background-color: #56a746;
    margin-top: -15px;
    border: solid 2px #fff;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
}

#productIndex .footnote {
    background-color: #226613;
    text-align: center;
    font-size: .8rem;
    padding: 15px
}


@media (orientation: portrait) {
    #productIndex h1 {
        font-size: 1.2rem;
    }

    #productIndex p {
        font-size: 1rem;
    }

    #productIndex p br {
        display: none;
    }

    #productIndex .packaging {
        margin-top: 100px;
    }

    #productIndex .packaging .btn {
        font-size: 1rem;
        right: 50%;
        transform: translate(50%, -100%);
    }

    #products .information .left {
        padding-left: 15px;
        padding-bottom: 100px;
    }

    #products .information .right {
        padding-right: 15px
    }

    #products .banner {
        overflow: hidden;
    }

    #products .banner .swiper-slide {
        height: 40vh;
    }

    #products .banner .swiper-slide img.bg {
        height: 100%;
    }

    #products .banner .swiper-slide img {
        position: absolute;
        width: 100%;
        height: auto;
        object-fit: unset;
    }

    #products .banner .swiper-slide img:not(.bg):not(.ingredients) {
        transform: unset
    }

    #products .banner .bars {
        width: 100%;
    }

    #products .information .left .description {
        margin-top: 30px;
    }

    #productIndex .footnote {
        font-size: .6rem;
    }

    #productIndex .gi img {
        width: 75%;
        margin-top: 15px
    }

    #products .information .right .nav-link {
        font-size: 1rem;
    }

    #products .information .right .nav-link.active {
        font-size: 1.2rem;
    }

}