/* 
Brown rgba(88,50,41,1)
Cream rgba(232,214,187,1)
Orange rgba(248,164,118,1)
*/


/* @media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
    }
  }

@media screen and (max-width : 276px) {
    #nav-icon {
        display: block !important;
        margin-top: 2rem !important;
        width: 34px !important;
    }

    .navbar {
        height: 9vh !important;
    }
    .hamburger {
        margin-top: 1.5rem !important;
    }
    .navbar-brand {
        height: 14vh !important;
        margin-top: .5rem !important;
    }
    #nav-icon span {
        height: 2.5px !important;
    }
    #nav-icon span:nth-child(1) {
        top: 0px !important;
    }
    #nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
        top: 6px !important;
    }
    #nav-icon span:nth-child(4) {
        top: 12px !important;
    }
}


@media screen and (min-width : 276px) and (max-width : 575px) {
    #nav-icon {
        display: block !important;
        width: 42px !important;
        margin-top: 1.5rem !important;
    }

    .navbar {
        height: 9vh !important;
    }
    .navbar-brand {
        height: 9vh !important;
        margin-top: 0.25rem !important;
    }
    #nav-icon span {
        height: 3px !important;
    }
    #nav-icon span:nth-child(1) {
        top: 0px !important;
    }
    #nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
        top: 7px !important;
    }
    #nav-icon span:nth-child(4) {
        top: 14px !important;
    }
}  

@media screen and (min-width : 576px) and (max-width : 768px) {
    #nav-icon {
        display: block !important;
        margin-top: 1.5rem !important;
    }

    .navbar {
        height: 9vh !important;
    }
    .navbar-brand {
        margin-top: 2vh !important;
        height: 10vh !important;
    }
    #nav {
        margin-top: 1.5rem !important;
    }
}

@media screen and (min-width : 769px) and (max-width : 1020px) {
    #nav-icon {
        display: block !important;
        margin-top: 1.5rem !important;
    }

    .navbar {
        height: 9vh !important;
    }
    .navbar-brand {
        height: 10vh !important;
        margin-top: 1.5vh !important;
    }
}


@media screen and (min-width : 1021px) {
        #nav-icon {
            display: block !important;
            margin-top: 1.5rem !important;
            margin-left: 1vw;
        }
}
 */
 #form-alert {
    z-index: 100001;
    height: 75px;
    position: absolute;
    width: 50%;
    right: 25%;
    top: 20vh;
    color: white;
}

.alert-dismissible {
    padding-right: 3rem !important;
    font-size: 2.5vh;
}

.help-block.with-errors {
    color: #ff5050;
    margin-top: 5px;
}

.messages {
    position: absolute;
    z-index: 999;
}

 .divider-home{
    overflow:hidden;
    position:relative;
    }
    .divider-home::before{ 
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 127% 173px;
    background-position: 50% 100%; 
    transform: rotateY(180deg); background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 476.62 100.69"><path fill="%23e8d6bb" d="M476.62 100.69V0l-238.3 95.47L0 0v100.69Z"/></svg>'); 
    }
    
    @media (min-width:2100px){
    .divider-home::before{
    background-size: 127% calc(2vw + 173px);
    }
    }
     
    .divider-home2{
        overflow:hidden;
        position:relative;
        }
        .divider-home2::before{ 
        content:'';
        font-family:'shape divider from ShapeDividers.com';
        position: absolute;
        z-index: 3;
        pointer-events: none;
        background-repeat: no-repeat;
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw; 
        background-size: 127% 173px;
        background-position: 50% 100%; 
        transform: rotateY(180deg); background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 476.62 100.69"><path fill="%23e8d6bb" d="M476.62 100.69V0l-238.3 95.47L0 0v100.69Z"/></svg>'); 
        }
        
        @media (min-width:2100px){
        .divider-home2::before{
        background-size: 127% calc(2vw + 173px);
        }
        }










 .custom-shape-divider-top-1708538439 {
    position: absolute;
    top: 254vh;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1708538439 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 123px;
    transform: rotateY(180deg);
}

.custom-shape-divider-top-1708538439 .shape-fill {
    fill: #F8A476;
}


 .custom-shape-divider-bottom-1708527478 {
    position: absolute;
    z-index: 20;
    bottom: -8vh;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1708527478 svg {
    position: relative;
    display: block;
    width: calc(108% + 1.3px);
    height: 150px;
}

.custom-shape-divider-bottom-1708527478 .shape-fill {
    fill: rgba(232,214,187,1);
    
}

/* --------------- Universal Classes --------------- */

body {
    margin: 0;
    height: auto;
    overflow-x: hidden;
}

.none {
    display: none;
}

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

.needle-break {
    position: absolute;
    max-height: 20vh;
    width: 60%;
    left: 20%;
}

h1, h2, h3, h4, h5 {
    font-family: 'Diaspora', sans-serif;
    font-weight: 400;
    /* text-transform: uppercase; */
}

li {
    font-family: 'Diaspora', sans-serif;
    font-weight: 600;
    /* text-transform: uppercase; */
}

p {
    font-family: 'Armandine', sans-serif;
    margin-bottom: 0rem;
    margin-top: 0;
}

.row {
    --bs-gutter-x: 0rem !important;
  }
  .text-right {
    text-align: right;
  }
  
  .container-fluid {
    --bs-gutter-x: 0rem !important;
  }

h1 {
  font-size: calc(1.25rem + 1.2vw) !important;
}

h2 {
  font-size: calc(1.1rem + 1.1vw) !important;
}

h3 {
  font-size: calc(1rem + 1vw) !important;
}

h4 {
  font-size: calc(0.75rem + 0.8vw) !important;
}

h5 {
  font-size: calc(0.6rem + 0.35vw) !important;
}

p {
  font-size: calc(0.5rem + 0.4vw) !important;
  letter-spacing: 0.065rem;
}

/* Fonts */
@font-face {
    font-family: 'Diaspora';
    src: url('../images/fonts/Diaspora.otf') format('opentype');
  }



/* --------------- SECTIONS --------------- */


/* ------------------ HOMEPAGE -------------------- */

/* Header */

.spacer {
    /* height: 12vh; */
    background-color:rgba(232,214,187,1);
}

#homepage .header {
    background: url("../landing/landing4.jpg") center/cover no-repeat;
    background-position: center -150px;
    border-top: 1px solid rgb(198, 162, 162);
    height: 90vh;
    
}


.header .header-text {
    height: 90vh;
    position: relative;
    background-color:  rgba(232,214,187,0.4);

}

.header .header-text img {
    width: 45%;
}

.header .header-tagline p {
    color: rgba(88, 50, 41, 1);
    font-size: calc(0.55rem + 1vw) !important;
    position: absolute;
    top: 40%;
    left: -8.5%;
    transform: rotate(90deg);
}

.header .header-image img {
    height: 95vh;
    position: relative;
    left: 1vw;
}


/* Header Explanation */
.header-ex {
    background-color: rgba(232,214,187,1);
    padding: 5% 0%;
}

.header-ex h1 {
    font-size: calc(2rem + 1.2vw) !important;
    font-weight: bolder;
}

.header-ex img {
    height: 420px;
    padding: 0px 0px 20px 0px;
    filter: drop-shadow(2px 2px 6px rgb(144, 144, 144));

}

.header-ex .logos img {

    height: 100px;
    padding: 0%;
}

.header-ex .explanation {
    background-image: url("../images/cracked-bg-low.png");
    opacity: 1;
    background-position:  50% 100%;
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    /* z-index: -1; */
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 0%;  
}

.header-ex .explanation .text {
    padding: 8% 8%;
}

.header-ex .explanation p {
    text-align: center;
    margin: 6% 3%;
    font-size: calc(0.8rem + 0.4vw) !important;
    letter-spacing: 0.125rem;
}

.header-ex h5 {
    font-weight: 600;
}

#thelineup .row {
    padding: 6vh 0vw 0vh 0vw;
}

.header-ex2 .explanation h1 {
    /* font-size: 8vh; */
    font-weight: bolder;
}

/* Header2 Explanation */
.header-ex2 {
    background-color: rgba(232,214,187,1);
}

.header-ex2 .explanation {
    text-align: center;
    width: 40vw !important;
}


/* Section 1 */
.section1 {
    /* background-color: rgba(232,214,187,1); */
    background-color: rgba(248, 164, 118,1);
    padding: 5% 0%;
}

.section1 h1 {
    position: relative;
    font-weight: 800 !important;
}
.section1 h2 {
    position: relative;
    padding-top: 3vh;
}

.section1 .needle-break {
    bottom: -57vh;
}

.section1 .text {
    background-image: url("../images/bg-3-low.png");
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    margin: 0% 15%;
    padding: 5% 3% 3% 3%;
    border-radius: 5px;
    background-color: white;
    border: 1px solid black;
    filter: drop-shadow(2px 2px 6px rgb(144, 144, 144));
}

.section1 .text p {
    padding: 1% 5%;
    font-size: calc(0.8rem + 0.4vw) !important;
    letter-spacing: 0.125rem;
}
.section1 .text h1 {
    margin-bottom: 4%;
    font-size: calc(2rem + 1.2vw) !important;
    font-weight: bolder;
}

/* Section 2 */
.section2 .needle-break {
    bottom: -117vh;
}

.section2 {
    height: 55vh;
    background-color: rgba(248, 164, 118,1);
}

.section2 h4 {
    margin: 0px !important;
}

.section2 img {
    max-height: 150px;
}

.section2 h1 {
    font-size: 12vh;
    font-weight: 800 !important;
}

.section2 .hashtag {
    margin-bottom: 25%;
}

/* Section 3 */

.section3 {
    padding: 10% 0%;
    background-color: rgba(232,214,187,1);
}

.section3 h2, .section3 h5 {
    font-weight: 800 !important;
}

.section3 .col-lg-4 img {
    max-height: 175px;
    height: 100%;
    margin-bottom: 10px;
}

.section3 a {
    text-decoration: none;
    color: rgba(248, 164, 118,1);
    transition: 0.5s ease-in-out;
}

.section3 a:hover {
    transform: scale(1.1);
    color: rgb(251, 186, 151);
}

.section3 .a {
    padding-bottom: 20%;
    padding-left: 10%;
}

.section3 .c {
    padding-top: 20%;
    padding-right: 10%;
}

.section3 .needle-break {
    bottom: -177vh;
}


/* Section 4 */
.section4 {
    background-color: rgba(248, 164, 118,1);
}


/* Extra small devices (phones, less than 576px) */
@media screen and (max-width : 275.99px) { 
    .nav-login .btn-cream {
        padding: 0%;
    }
    .nav-login {
        display: none !important;
    }

    #homepage .header {
        background-position: center right 0px;
    }
    
}
/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 276px) and (max-width : 575.99px) { 
    .nav-login .btn-cream {
        padding: 0%;
    }
    .nav-login {
        display: none !important;
    }


    #homepage .header {
        background-position: center right -125px;
    }
    .header .header-text img {
        width: 80%;
    }
    .header .header-tagline p {
        display: none;
    }
    .section1 .text {
        margin: 0% 10%;
        padding: 8% 8%;
    }
    .header-ex img {
        height: 275px;
    }
    .header-ex .logos img {
        height: 70px;
    }
    .section2 img {
        max-height: 120px;
    }
    .section3 .a {
        padding-bottom: 10%;
        padding-right: 30%;
    }

    .section3 .c {
        padding-top: 10%;
        padding-left: 30%;
    }

    .section3 .col-lg-4 img {
        max-height: 125px;
    }
}

/* Small devices (phones, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767.98px) { 
    .nav-login .btn-cream {
        padding: 0%;
    }
    #homepage .header {
        background-position: center right 0px;
    }
    .header .header-text img {
        width: 65%;
    }
    .header .header-tagline p {
        display: none;
    }
    .header-ex .row {
        flex-direction: column-reverse;
        align-items: center;
    }
    .header-ex img {
        height: 350px;
    }

    #homepage .section1 .splide__slide {
        width: calc(30.35%) !important;
        margin-left: calc(1.5%) !important;
        margin-right: calc(1.5%) !important;
        max-height: 400px;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 55%;
    }
    .section1 .text {
        margin: 0% 10%;
    }
    .section2 img {
        max-height: 135px;
    }
    .section3 .a {
        padding-bottom: 10%;
        padding-right: 30%;
    }

    .section3 .c {
        padding-top: 10%;
        padding-left: 30%;
    }
    .section3 .col-lg-4 img {
        max-height: 150px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991.98px) { 
    #homepage .header {
        background-position: center 0px;
    }
    .header .header-text img {
        width: 60%;
    }
    .header .header-tagline p {
        font-size: calc(0.75rem + 1vw) !important;
        top: 40%;
        left: -13.5%;
    }
    .section1 .text {
        margin: 0% 10%;
    }
    .section3 .col-lg-4 img {
        max-height: 150px;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    #homepage .header {
        background-position: center;
    }
    .header .header-text img {
        width: 50%;
    }
    .header .header-tagline p {
        font-size: calc(0.65rem + 1vw) !important;
        left: -10.5%;
    }
    .section1 .splide__img {
        position: relative;
        height: 72%;
        top: -4% !important;
    }
    #homepage .section1 .splide__slide {
        width: calc(30.35%) !important;
        margin-left: calc(1.5%) !important;
        margin-right: calc(1.5%) !important;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 72.5%;
    }
    #homepage .section1 .womens h2, #homepage .section1 h2 {
        top: -10%;
    }
    .header-ex .explanation {
        margin: 10% 0% 10% 5%;
    }
    .section1 .text {
        margin: 0% 10%;
    }
}

@media screen and (min-width: 1200px) {
    #homepage .header {
        background-position: center;
    }
}














/* The Line Up Slides */

@media screen and (max-width : 299.99px) { 
    #homepage .section1 .splide__slide {
        width: calc(46%) !important;
        margin-left: calc(2%) !important;
        margin-right: calc(2%) !important;
        max-height: 275px;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 30%;
    }
    #homepage .section1 .womens h2, #homepage .section1 h2 {
        margin-bottom: 10%;
    }
    #homepage .section1 .splide__slide h2 {
        font-size: calc(1.75rem + 1.2vw) !important;
    }
}
@media screen and (min-width : 300px) and (max-width : 349.99px) { 
    #homepage .section1 .splide__slide {
        width: calc(46%) !important;
        margin-left: calc(2%) !important;
        margin-right: calc(2%) !important;
        max-height: 300px;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 35%;
    }
    #homepage .section1 .womens h2, #homepage .section1 h2 {
        margin-bottom: 10%;
    }
}
@media screen and (min-width : 350px) and (max-width : 399.99px) { 
    #homepage .section1 .splide__slide {
        width: calc(46%) !important;
        margin-left: calc(2%) !important;
        margin-right: calc(2%) !important;
        max-height: 325px;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 39%;
    }
    #homepage .section1 .womens h2, #homepage .section1 h2 {
        margin-bottom: 10%;
    }
}
@media screen and (min-width : 400px) and (max-width : 449.99px) { 
    #homepage .section1 .splide__slide {
        width: calc(46%) !important;
        margin-left: calc(2%) !important;
        margin-right: calc(2%) !important;
        max-height: 360px;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 45%;
    }
    #homepage .section1 .womens h2, #homepage .section1 h2 {
        margin-bottom: 10%;
    }
    #homepage .pop-content2 p, #homepage .pop-content p {
        padding: 10% 5% 10% 5%;
    }
    #homepage .pop-content2 a, #homepage .pop-content a {
        margin-top: 0vh;
        position: relative;
        top: 0%;
    }

    #homepage .pop-content a, #homepage .pop-content2 a {
        font-size: calc(1rem + 1vw);
    }
}
@media screen and (min-width : 450px) and (max-width : 499.99px) { 
    #homepage .section1 .splide__slide {
        width: calc(46%) !important;
        margin-left: calc(2%) !important;
        margin-right: calc(2%) !important;
        max-height: 375px;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 50%;
    }
    #homepage .pop-content2 p, #homepage .pop-content p {
        padding: 10% 5% 10% 5%;
    }
    #homepage .pop-content2 a, #homepage .pop-content a {
        margin-top: 0vh;
        position: relative;
        top: 0%;
    }

    #homepage .pop-content a, #homepage .pop-content2 a {
        font-size: calc(1rem + 1vw);
    }
}

@media screen and (min-width : 500px) and (max-width : 575.99px) { 
    #homepage .section1 .splide__slide {
        width: calc(46%) !important;
        margin-left: calc(2%) !important;
        margin-right: calc(2%) !important;
        max-height: 375px;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 55%;
    }
    #homepage .pop-content2 p, #homepage .pop-content p {
        padding: 10% 5% 10% 5%;
    }
    #homepage .pop-content2 a, #homepage .pop-content a {
        margin-top: 0vh;
        position: relative;
        top: 0%;
    }

    #homepage .pop-content a, #homepage .pop-content2 a {
        font-size: calc(1rem + 1vw);
    }
}


@media screen and (min-width: 576px) and (max-width: 629.99px) { 
    #homepage .section1 .splide__slide h2 {
        font-size: calc(1.9em + 1.2vw) !important;
    }
    #homepage .section1 .splide__slide {
        width: calc(30.35%) !important;
        margin-left: calc(1.5%) !important;
        margin-right: calc(1.5%) !important;
        max-height: 350px;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 42.5%;
    }
    #homepage .pop-content2 p, #homepage .pop-content p {
        padding: 10% 5% 10% 5%;
    }
    #homepage .pop-content2 a, #homepage .pop-content a {
        margin-top: 0vh;
        position: relative;
        top: 0%;
    }

    #homepage .pop-content a, #homepage .pop-content2 a {
        font-size: calc(1rem + 1vw);
    }

}
@media screen and (min-width: 630px) and (max-width: 669.99px) { 

    #homepage .section1 .splide__slide {
        width: calc(30.35%) !important;
        margin-left: calc(1.5%) !important;
        margin-right: calc(1.5%) !important;
        max-height: 350px;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 45%;
    }
    #homepage .section1 .womens h2, #homepage .section1 h2 {
        top: -10%;
    }

}
@media screen and (min-width: 670px) and (max-width: 767.99px) { 

    #homepage .section1 .splide__slide {
        width: calc(30.35%) !important;
        margin-left: calc(1.5%) !important;
        margin-right: calc(1.5%) !important;
        max-height: 375px;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 50%;
    }
    #homepage .section1 .womens h2, #homepage .section1 h2 {
        top: -10%;
    }

}

@media screen and (min-width: 768px) and (max-width: 799.99px) {
    #homepage .section1 .splide__slide {
        width: calc(30.35%) !important;
        margin-left: calc(1.5%) !important;
        margin-right: calc(1.5%) !important;
        max-height: 400px;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 55%;
    }
    #homepage .section1 .womens h2, #homepage .section1 h2 {
        top: -10%;
    }

}
@media screen and (min-width: 800px) and (max-width: 874.99px) {
    #homepage .section1 .splide__slide {
        width: calc(30.35%) !important;
        margin-left: calc(1.5%) !important;
        margin-right: calc(1.5%) !important;
        max-height: 400px;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 57.5%;
    }
    #homepage .section1 .womens h2, #homepage .section1 h2 {
        top: -10%;
    }

}
@media screen and (min-width: 875px) and (max-width: 899.99px) {
    #homepage .section1 .splide__slide {
        width: calc(30.35%) !important;
        margin-left: calc(1.5%) !important;
        margin-right: calc(1.5%) !important;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 65%;
    }
    #homepage .section1 .womens h2, #homepage .section1 h2 {
        top: -10%;
    }

}
@media screen and (min-width: 900px) and (max-width: 949.99px) {
    #homepage .section1 .splide__slide {
        width: calc(30.35%) !important;
        margin-left: calc(1.5%) !important;
        margin-right: calc(1.5%) !important;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 65%;
    }
    #homepage .section1 .womens h2, #homepage .section1 h2 {
        top: -10%;
    }

}

@media screen and (min-width: 950px) and (max-width: 991.98px) {
    #homepage .section1 .splide__slide {
        width: calc(30.35%) !important;
        margin-left: calc(1.5%) !important;
        margin-right: calc(1.5%) !important;
    }
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 70%;
    }
    #homepage .section1 .womens h2, #homepage .section1 h2 {
        top: -10%;
    }

}


@media screen and (min-width: 1199.99px) and (max-width: 1299.99px)  {
    #homepage  .section1 .splide__img, #homepage .custom-pop .pop-content1, #homepage  .custom-pop .pop-content2, #homepage .custom-pop .pop-content3, #homepage  .custom-pop .pop-content4, #homepage .custom-pop .pop-content5, #homepage  .custom-pop .pop-content6 {
        height: 60%;
    }
    #homepage .section1 .splide__slide {
        height: 450px;
    }
}











/* ------------ info ----------- */

.info .header {
    background-color: rgba(248, 164, 118,1);
    border-top: 1px solid rgb(198, 162, 162);
    width: 100%;
    padding: 5% 2% 10% 2%;
}

.info .header .col-md-8 {
    justify-content: center;
    align-items: center;
}

.info .header .text1 {
    background-color: rgba(232, 214, 187, 0.2);
    padding: 3% 15%;
    border-radius: 1%;
    color: rgba(88, 50, 41, 1);
    position: relative;
    margin-top: 35%;
    display: flex;
    flex-direction: column;
    width: 55vw;
}

.info .header h1 {
    font-size: calc(6.5rem + 1.2vw) !important;
    padding: 4% 2% 10% 1%;
    background-color: rgba(232, 214, 187, 1);
    background: linear-gradient(to bottom, rgba(232, 214, 187, 0.2), rgba(248, 164, 118, 1));
    background-blend-mode: soft-light, screen;
    /* border-radius: 5%; */
    color: rgba(88, 50, 41, 1);
    position: absolute;
    margin-top: 8%;
    margin-left: -1%;
}

.info .faq1 {
    background-color: rgba(232,214,187,1);
    background: linear-gradient(to bottom, rgba(232,214,187,1), rgba(248, 164, 118,1));
    background-blend-mode: soft-light,screen;
}

.info .header-image {
    height: 300px ;
    margin-top: 15%;
}




.info .faq2 {
    background-color: rgba(248, 164, 118,1);
}

.info .faq2 .text p, .info .faq2 .text h2, .info .faq2 .text h5 {
    color: rgba(88,50,41,1);
}

.info .faq2 .text h2, .info .faq2 .text h5 {
    font-weight: bolder;
}

.info .faq2 .text p {
    text-align: justify;
}

.info .faq2 .text {
    background-color:rgba(232,214,187,1) ;
    /* padding: 4vh 5vw; */
    margin: 20vh 10.5vw;
    border-radius: 3%;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    padding: 8vh 5vw;
}




/* PH1 */
.ph1 {
    background-color: rgba(232,214,187,1);
    padding: 20vh 0vw 10vh 0vw;
    /* height: 75vh; */
}

.ph1 img {
    height: 100%;
    max-height: 500px; 
    z-index: 5;
}

.ph1 .text1 {
    background-image: url("../images/bg-3-low.png");
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 450px;
    text-align: center;
    margin: 10% 0%;
    padding: 8% 8%;
    border-radius: 5px;
    background-color: white;
    border: 1px solid black;
    filter: drop-shadow(2px 2px 6px rgb(144, 144, 144));
}

.ph1 .text1 h2 {
    font-weight: bolder;
}

.ph1 .text2 {
    margin-top: 2%;
    padding: 0% 10%;
}

.ph1 .needle-break {
    bottom: -72vh;
}

/* PH2 */
.ph2 {
    background-color: rgba(248, 164, 118, 1);
    padding: 5% 0%;
}
.ph2 .text2 {
    background-image: url("../images/bg-3-low.png");
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin: 10%;
    padding: 8% 8%;
    border-radius: 5px;
    background-color: white;
    border: 1px solid black;
    filter: drop-shadow(2px 2px 6px rgb(144, 144, 144));
}

.ph2 .text2 h5 {
    font-size: calc(.2rem + 1.2vw) !important;
    margin-bottom: 5%;
    font-weight: 700;
}
.ph2 .text2 h2, .ph2 .text2 h3, .ph2 .text2 h4, .ph2 .text1 h2, .ph2 .text1 h3, .ph2 .text1 h4 {
    font-weight: 800;
}

.ph2 .text1 {
    padding: 20% 0%;
    background-image: url("../images/cloud.png");
    background-position: center -115px;
    background-size: 115%;
    width: 100%;
}

.ph2 .text2 h2 {
    padding: 0% 5%;
    margin-bottom: 5%;
}



/* -------------- FAQ ---------------- */


.faq-logo {
    position: absolute;
    top: 20vh;
    left: 26.5vw;
    height: 30vh;
}

.faq-head .text1 {
    position: relative;
    margin-top: 36vh;
    margin-left: -1.1vw;
    display: flex;
    flex-direction: column;
    width: 55vw;
}

.faq-head .text1 h1 {
    font-size: 10vh;
    margin-top: 14vh;
    margin-left: -1.1vw;
}

.faq-head .text1 p {
    font-size: 3vh;
}


/* Swipe Image */
.swipe-img {
    top: 117.5px;
    right: 2.5%;
    height: 350px;
    width: auto;
    z-index:3;
    position: absolute;
}

.sticky-faq {
    position: sticky;
    top: 100px;
    z-index: 1;
}

.swipe-container {
    max-height: 350;
}

.swipe {
    transition: 2s;
}

.swipe.hide {
    opacity: 0;
}

/* Adjust color with %23(HEX CODE) */
.lineup4 .accordion {
    z-index: 100;
    --bs-accordion-active-bg: rgba(88,50,41,0.8) !important;
    --bs-body-bg: rgba(88,50,41,0.8) !important;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ad4f18'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    /* color: white; */
    width: 75% !important;
    transition-delay: .9s !important;

}

/* Adjust color with %23(HEX CODE) */
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ad4f18'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    transform: rotate(-180deg)
}

.accordion-header svg {
    margin-left: 37vw;

}

.accordion-button {
    color:  rgba(227, 214, 198, 1)  !important;
    padding: 2rem 1rem !important;
}

.accordion-body {
    background-color: rgba(227, 214, 198, 1) !important;
    color: rgba(30, 48, 22, 1) !important;
    padding: 4vh 6vh !important;
}

.accordion-button:focus {
    border-color: rgba(30, 48, 22, 0.1)!important;
    box-shadow: none !important;
}

.accordion-list,
.accordion-body h4,
.accordion-body h5 {
    margin-left: 1.5vw;
}

.accordion-list {
    list-style: auto;
}

/* Extra small devices (phones, less than 576px) */
@media screen and (max-width : 275.99px) { 
    .swipe-img {
        display: none;
    }
}

/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 276px) and (max-width : 399.99px) { 

    #philosophy .header::after {
        background-image: url("../images/open-book.png");
        opacity: 0.05;
        background-position: 50% 100%;
        content: '';
        font-family: 'shape divider from ShapeDividers.com';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-repeat: no-repeat;
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw;
        background-size: 110%;
        background-position: 50% 35%;
    }
    #thescience .header::after {
        background-image: url("../images/testtube.png");
        opacity: 0.05;
        background-position: 50% 100%;
        content: '';
        font-family: 'shape divider from ShapeDividers.com';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-repeat: no-repeat;
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw;
        background-size: 115%;
        background-position: 50% 35%;
    }
    #aboutus .header::after {
        background-image: url("../images/ying-yang.png");
        opacity: 0.05;
        background-position: 50% 100%;
        content: '';
        font-family: 'shape divider from ShapeDividers.com';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-repeat: no-repeat;
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw;
        background-size: 120%;
        background-position: 50% 30%;  
    }
    .info .header {
        padding: 30% 0% 20% 0%;
    }
    .info .header h1 {
        font-size: calc(2.75rem + 1.2vw) !important;
        margin: 10% 2% 5% 0%;
        padding: 4% 0% 10% 2%;
        text-align: center;
    }

    .info .header h4 {
        font-size: calc(0.65rem + 0.8vw) !important;
    }
    .info .header-image {
        display: none;
    }

    .info .header .text1 {
        padding: 5% 4%;
        margin-top: 70%;
        display: flex;
        width: 92vw;
    }
    .ph1 {
        padding: 60% 2% 25% 2%;
    }
    .ph1 .row {
        flex-direction: column-reverse;
    }
    .ph1 .text1 {
        height: auto;
        margin: 5% 6%;
    }
    .ph1 img {
        max-height: 300px;
    }
    .ph2 .text2 {
        height: auto;
        margin: 5% 6%;
    }
}


/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 400px) and (max-width : 575.99px) { 
    .info .header {
        padding: 20% 0% 20% 0%;
    }
    .header .col-sm-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .header .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .info .header h1 {
        font-size: calc(2.2rem + 1.2vw) !important;
        margin: 10% 0% 5% 0%;
        padding: 4% 0% 10% 2%;
    }

    .info .header h4 {
        font-size: calc(0.65rem + 0.8vw) !important;
    }
    .info .col-sm-2 {
        display: flex;
        align-items: center;
    }
    .info .header-image {
        height: 80px;
        margin-left: 25%;
        margin-top: 50%;
    }
    .info .header .text1 {
        padding: 3% 2%
    }
    .ph1 {
        padding: 40% 2% 25% 2%;
    }
    .ph1 .row {
        flex-direction: column-reverse;
    }
    .ph1 .text1 {
        height: auto;
        margin: 5% 6%;
    }
    
    .ph1 img {
        max-height: 300px;
    }
    .ph2 .text2 {
        height: auto;
        margin: 5% 6%;
    }
    .ph2 .text2 h2 {
        margin-bottom: 10%;
    }
    .ph2 .text1 {
        padding: 30% 0% 25% 0%;
        background-image: url("../images/cloud.png");
        background-position: center;
        background-size: 120%;
        width: 100%;
    }
    
    
}

/* Small devices (phones, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767.98px) { 
    .info .header {
        padding: 20% 0% 20% 0%;
    }
    .info .header h1 {
        font-size: calc(3rem + 1.2vw) !important;
        margin: 10% 2% 0% 0%;
        padding: 4% 0% 10% 2%;
    }
    .info .header-image {
        height: 125px;
        margin-left: 15%;
        margin-top: 25%;
   }
    .info .header .text1 {
        padding: 3% 2%
    }
    .ph1 {
        padding: 25% 2% 20% 2%;
    }

    .ph1 .row {
        flex-direction: column-reverse;
    }
    .ph1 .text1 {
        height: auto;
        margin: 5% 6%;
    }
    .ph2 .text2 {
        height: auto;
        margin: 5% 15%;
    }
    .ph2 .text1 {
        padding: 18% 0%;
    }
}
/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991.98px) { 
    .info .header h1 {
        font-size: calc(3.85rem + 1.2vw) !important;
    }
    .info .header .text1 {
        padding: 3% 10%
    }
    .info .header-image {
        height: 180px;
        margin-left: 10%;
    }
    .ph1 img {
        max-height: 400px;
    }
    .ph2 .text2 h2, .ph2 .text2 h3, .ph2 .text2 h4, .ph2 .text1 h2, .ph2 .text1 h3, .ph2 .text1 h4 {
        padding: 0% 15%;
    }
    .ph2 .text1 {
        background-position: center -80px;
        background-size: 145%;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    .info .header h1 {
        font-size: calc(4.85rem + 1.2vw) !important;
    }
    .info .header-image {
        height: 225px;
        margin-left: 5%;
    }
    .ph2 .text1 {
        background-position: center -117px;
        background-size: 140%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) and (max-width: 1399.99px) { 
    .info .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
    }
    .info .header-image {
        height: 260px;
        margin-left: 15%;
    }
    .ph2 .text1 {
        background-position: center -130px;
        background-size: 130%;
    }
}
/* Extra large devices (large desktops, 1400px and up) */
@media screen and (min-width: 1400px) {

}


/* ---------------------- Lineup ----------------------- */

.lineup .header {
    background-color: rgba(248, 164, 118,1);
    border-top: 1px solid rgb(198, 162, 162);
    padding: 12% 2% 5% 2%;
    margin-bottom: -2%;

}

.lineup .header p {
    font-size: 3vh;
    margin-bottom: 2%;
}

.lineup .custom-shape-divider-top-1707479342 {
    position: absolute;
    top: 107vh;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1707479342 {
    position: absolute;
    top: 87vh;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1707479342 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 55px;
}

.custom-shape-divider-top-1707479342 .shape-fill {
    fill: #F8A476;
}

.lineup .header .text1 {
    background-color: rgba(232,214,187,0.2);
    padding: 6% 8% 2% 8%;
    margin: -10% 0% 0% 0%;
    border-radius: 1%;
    color: rgba(88,50,41,1);
}

.lineup .header h1 {
    font-size: calc(8.5rem + 1.2vw) !important;
    padding: 5% 3%;
    margin: 0% 6% 0% 0%;
    background-color: rgba(232,214,187,1);
    background: linear-gradient(to bottom, rgba(232,214,187,0.2), rgba(248, 164, 118,1));
    background-blend-mode: soft-light,screen;
    color: rgba(88,50,41,1);
}


/* Section 1 */
.lineup .lineup1 {
    background-color: rgba(232,214,187,1);
    background-blend-mode: soft-light,screen;
}

.lineup .lineup1 img {
    height: 200px;
    max-height: 100%;
}
.lineup .lineup1 {
    background-color: rgba(248, 164, 118,1);
}

.lineup .lineup1 .texts p, .lineup .lineup1 .text h2, .lineup .lineup1 .texts h3 {
    color: rgba(88,50,41,1);
}

.lineup .lineup1 .texts h2, .lineup .lineup1 .texts h3 {
    font-weight: bolder;
}

/* Heading texts */
.lineup .lineup1 .heading-text {
    margin: 5% 5%;
}
.lineup .lineup1 .heading-text h2 {
    margin-bottom: 0px;
}
.lineup .lineup1 .heading-text2, .lineup .lineup1 .headings {
    border-bottom: 1px solid rgba(88,50,41,1);
    border-top: 1px solid rgba(88,50,41,1);
    background-color: rgba(232,214,187,0.5);
}

.lineup .lineup1 h4 {
    padding: 7% 15%;
    text-align: center;
    font-weight: 600;
    margin-bottom: 0rem;
}

/* Main text */
.lineup .lineup1 .texts h2 {
    font-size:calc(3.25rem + 1.2vw) !important;
}

.lineup .lineup1 .text h3 {
    position: relative;
    z-index: 10;
    padding:5% 15% 5% 12%;
    margin-bottom: 0%;
    font-weight: bolder;
}

.lineup .lineup1 .text p {
    text-align: justify;
    padding: 2% 4% 6% 4%;
    position: relative;
    z-index: 10;
}

.lineup .lineup1 .texts {
    background-color: floralwhite;
    background-image: url("../images/bg-3-low.png");
    margin: 10% 10%;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 5px 0px;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.5)); 
    border: 1px solid rgba(88,50,41,1);
}

.lineup .lineup1 .text {
    width: 75%;
    border-radius: 30px;
    border: 1px solid rgba(88, 50, 41, 1);
    overflow: hidden;
    margin: 7% 0% 0% 0%;
    background-color: rgba(232, 214, 187, 0.3);
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.5));
}

/* .lineup .lineup1 .texts::before {
    opacity: 0.25;
    background-position:  50% 100%;
    content:'';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: cover;
    background-position: 50% 0%;  
}

/* Safari-specific fix */
@supports (-webkit-touch-callout: none) {
    .lineup .lineup1 .texts::before {
        opacity: 0; /* Adjust opacity ONLY for Safari */
    }
} */

.lineup .lineup1 .list {
    padding: 0vh 4vw 2.5vh 4vw;
}

/* FAQ 2 */

.lineup .lineup2 {
    background-color: rgba(248, 164, 118,1);
}

.lineup .lineup2 .texts p, .lineup .lineup2 .text h2, .lineup .lineup2 .texts h4 {
    color: rgba(88,50,41,1);
}

.lineup .lineup2 .texts h2, .lineup .lineup2 .texts h4 {
    font-weight: bolder;
}

.lineup .lineup2 .heading-text {
    /* padding: 6vh 4vw 0vh 4vw; */
    width: 50%;
    background-color:rgba(232,214,187,1) ;
}
.lineup .lineup2 .heading-text2 {
    width: 50%;
    border-bottom: 1px solid rgba(88,50,41,1);
    background-color:rgba(232,214,187,0.5);
}

.lineup .lineup2 .texts h2 {
    padding: 10%;
    z-index: 2;
    font-size: calc(4rem + 1.1vw) !important;
    position: absolute;
    margin-top: revert;
}

.lineup .lineup2 .heading h4 {
    z-index: 2;
    padding: 3% 10%;
    width: 100%;
    text-align:justify;
    font-weight: bold;
    font-size: 3.25vh;
}

.lineup .lineup2 .text h4 {
    position: relative;
    z-index: 10;

    padding: 5vh 4vw 2.5vh 4vw;
    margin-bottom: 0vh;
    text-align:justify;
    font-weight: bolder;
    font-size: 3.75vh;
}

.lineup .lineup2 .text p {
    text-align: justify;
    padding: 2vh 4vw 6vh 4vw;
    position: relative;
    z-index: 10;
}

.lineup .lineup2 .texts {
    background-image: url("../images/bg-3-low.png");
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    margin: 0% 15%;
    /* padding: 5% 3% 3% 3%; */
    border-radius: 5px;
    background-color: white;
    border: 1px solid black;
    filter: drop-shadow(2px 2px 6px rgb(144, 144, 144));
}

.lineup .lineup2 .text {
    width: 75%;
    border-radius: 30px;
    border: 1px solid rgba(88, 50, 41, 1);
    overflow: hidden;
    margin: 5% 5% 5% 5%;
    background-color: rgba(232, 214, 187, 0.3);
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.5));
}

.lineup .lineup2  .heading {
    position: relative;
    display: flex;
    width: 100%;
}

.lineup .lineup2  .image-container {
    width: 50%;
    height: fit-content;
    overflow: hidden; 
}

.lineup .lineup2  .image-container img {
    height: -webkit-fill-available;
    opacity: 0.8;
    border-top-right-radius:5% ;
    object-fit: cover;
    z-index: 1;
    overflow: hidden; 

}
.lineup .lineup2  .image-container2 {
    width: 50%;
    height: 30vh;
    overflow: hidden;
}

.lineup .lineup2  .image-container2 img {
    width: 100%;
    height: -webkit-fill-available;
    object-fit: cover;
    opacity: 0.8;
    z-index: 1;
}

.custom-shape-divider-top-1712686648 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1712686648 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 30vh;
    transform: rotateY(180deg);
}

.custom-shape-divider-top-1712686648 .shape-fill {
    fill: #F8A476;
}


.shapedividerstext{
    overflow:hidden;
    position:relative;
    }
    .shapedividerstext::before{ 
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 650px 150%;
    background-position: 100% 50%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.25 381" preserveAspectRatio="none"><g fill="%23F8A476"><path d="M68.78 381L34.92 0h42.33v381z"/><path d="M43.38 381L17.98 0h59.27v381z" opacity=".33"/><path d="M17.98 381L0 0h77.25v381z" opacity=".33"/></g></svg>'); 
    }
    
.custom-shape-divider-top-1707485613 {
    position: absolute;
    top: 354vh;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1707485613 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 143px;
}

.custom-shape-divider-top-1707485613 .shape-fill {
    fill: #F8A476;
}


/* lineup3 */

.lineup .lineup3 {
    background-color:rgba(232,214,187,1) ;
    padding: 10% 0% 5% 0%;
}

.lineup .lineup3 .texts {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url("../landing/landing4.jpg");
    opacity: 1;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 10% 10%;
    padding: 5% 0%;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 5px 0px;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.5)); 

}

.lineup .lineup3 .text {
    z-index: 5;
}

.lineup .lineup3 .b .text , .lineup .lineup3 .c .text  {
    margin-top: 10%;
}

.lineup .lineup3 .texts .text {
    background-image: url(../images/cloud.png);
    background-position: center;
    background-size: 140%;
    padding: 3% 18% 9% 18%;
}

.lineup .lineup3 .text div {
    margin: 15% 5%;
    position: relative;
}

.lineup .lineup3 .text h2{
    font-size: 6vh;
    font-weight: bolder;
}

.lineup .lineup3 .text p {
    font-size: 2.5vh;
}

/* FAQ 4 */

.lineup .lineup4 {
    background-color: rgba(248, 164, 118,1);
    padding: 8vh 0vh;
}

.lineup .lineup4 h3 {
    color:rgba(88,50,41,1) ;
    font-size: 8vh !important;
    margin: 5vh 0vw;
}
/* Extra small devices (phones, less than 576px) */
@media screen and (max-width : 275.99px) { 
    .swipe-img {
        display: none;
    }
}

/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 276px) and (max-width : 399.99px) { 
    .swipe-img {
        display: none;
    }
    .lineup .header h1 {
        font-size: calc(3.15rem + 1.2vw) !important;
        margin: 10% 6% 0% 0%;
    }
    .lineup .lineup1 img {
        display: none;
    }
    .lineup .lineup1 .texts h2 {
        font-size: calc(2rem + 1.1vw) !important;
        padding: 2% 0%;
    }
    .lineup .lineup1 .texts, .lineup .lineup2 .texts {
        margin: 10% 5%;
    }
    .lineup .lineup1 .text, .lineup .lineup2 .text {
        width: 85%;
    }
    .lineup .lineup1 .text h3 {
        padding: 15% 5% 5% 5%;
    }
    .lineup .lineup2 .texts h2 {
        font-size: calc(2rem + 1.1vw) !important;
        padding: 10% 10% 2% 2%;
    }
    .lineup1 li {
        font-size: calc(0.7rem + 0.4vw) !important;
        letter-spacing: 0.065rem;
        padding: 4%;
    }
    .lineup .lineup1 .list {
    padding: 0%;
    }

    .lineup .lineup2 .image-container img, .lineup .lineup2 .image-container2 img, .lineup2 .texts .heading-text, .lineup2 .texts .heading .d-flex {
        height: 225px;
    }

}
/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 400px) and (max-width : 575.99px) { 
    .swipe-img {
        display: none;
    }
    .lineup .header h1 {
        font-size: calc(4.5rem + 1.2vw) !important;
        margin: 10% 6% 0% 0%;
    }
    .lineup .lineup1 .headings {
        padding: 5% 0%;
    }
    .lineup .lineup1 img {
        height: 175px;
    }
    .lineup .lineup1 .heading-text {
        margin: 5% 5% 5% 5%;
    }
    
    .lineup .lineup1 .texts h2 {
        font-size: calc(2rem + 1.1vw) !important;
    }
    .lineup .lineup1 .text, .lineup .lineup2 .text {
        width: 85%;
    }
    .lineup .lineup2 .image-container img, .lineup .lineup2 .image-container, .lineup .lineup2 .image-container2 img, .lineup2 .texts .heading-text, .lineup2 .texts .heading .d-flex {
        height: 220px;
    }
    .lineup .lineup1 .texts, .lineup .lineup2 .texts {
        margin: 10% 5%;
    }

    .lineup .lineup2 .texts h2 {
        padding: 10% 2% 10% 5%;
    }
    .lineup .lineup2 .texts h2 {
        font-size: calc(3rem + 1.1vw) !important;
    }
    .lineup1 li {
        font-size: calc(0.7rem + 0.4vw) !important;
        letter-spacing: 0.065rem;
        padding: 4%;
    }

    .lineup .lineup3 .texts {
        margin: 10% 5%;
    }
    .lineup .lineup3 .texts .text {
        background-size: 160%;
        padding: 3% 12% 5% 12%;
    }
    .lineup .lineup4 .accordion {
        width: 90% !important;
    }
}

/* Small devices (phones, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767.98px) { 
    .swipe-img {
        display: none;
    }
    .lineup .header h1 {
        font-size: calc(6.5rem + 1.2vw) !important;
    }
    .lineup .lineup1 .heading-text {
        margin: 5% 0% 5% 5%;
    }
    .lineup .lineup1 img {
        height: 175px;
        margin-right: 5%;
    }
    .lineup .lineup1 .texts, .lineup .lineup2 .texts {
        margin: 10% 5%;
    }
    .lineup .lineup2 .texts h2 {
        font-size: calc(3.5rem + 1.1vw) !important;
    }
    .lineup .lineup2 .image-container img {
        height: 100%;
    }
    .lineup .lineup4 .accordion {
        width: 90% !important;
    }
    .lineup .lineup2 .image-container {
        height: 275px;
    }
    .lineup .lineup3 .texts {
        margin: 0% 5%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991.98px) { 
    .swipe-img {
        display: none;
    }
    
    .lineup1 .row {
        justify-content: center;
    }
    .lineup .lineup1 .texts, .lineup .lineup2 .texts {
        margin: 10% 0%;
    }
    .lineup .lineup3 .texts {
        margin: 15% 0% 10% 0%;
    }
    .lineup .lineup3 .texts .text {
        background-size: 125%;
        padding: 3% 18% 8% 20%;
    }
    .lineup1 .col-lg-8, .lineup2 .col-lg-8, .lineup2 .row, .lineup3 .row, .lineup .lineup3 .texts {
        align-items: center;
        justify-content: center;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    .lineup .header h1 {
        font-size: calc(6.5rem + 1.2vw) !important;
    }
    .swipe-img {
        height: 220px;
        top: 100px;
        right: 1.5%;
    }
    .lineup1 .col-lg-8, .lineup2 .col-lg-8 {
        align-items: start;
    }
    .lineup .lineup2 .texts, .lineup .lineup3 .texts {
        margin: 10% 5%;
    }
    
    .lineup .lineup1 .texts {
        margin: 10% 5% 10% 5%;
    }
    .lineup .lineup1 .texts h2 {
        font-size: calc(3rem + 1.2vw) !important;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) and (max-width: 1399.99px) { 
    .lineup .header h1 {
        font-size: calc(7.5rem + 1.2vw) !important;
    }
    .swipe-img {
        height: 300px;
        top: 100px;
        right: 1.5%;
    }
    .lineup1 .col-lg-8, .lineup2 .col-lg-8, .lineup3 .col-lg-8 {
        align-items: start;
    }
    .lineup .lineup1 .texts, .lineup .lineup2 .texts, .lineup .lineup3 .texts {
        margin: 10% 10% 10% 5%;
    }
}
/* Extra large devices (large desktops, 1400px and up) */
@media screen and (min-width: 1400px) {
    .lineup .lineup1 .texts, .lineup .lineup2 .texts, .lineup .lineup3 .texts  {
        margin: 10% 15% 10% 5%;
    }
    .lineup1 .col-lg-8, .lineup2 .col-lg-8, .lineup3 .col-lg-8 {
        align-items: start;
    }
}

/* ---------------------------- birdsandbees ----------------------------------*/
#birdsandbees .header h1 {
    padding: 5% 0%;
    margin: 0% 0% 0% 0%;
}
#birdsandbees .lineup2 .image-container img {
    height: -webkit-fill-available;
    opacity: 0.8;
    width: 100%;
    border-radius: 0%;
    z-index: 1;
    overflow: hidden;
}
#birdsandbees .lineup2 .texts h2 {
    padding: 6%;
}
/* Extra small devices (phones, less than 576px) */
@media screen and (max-width : 275.99px) { 
    .swipe-img {
        display: none;
    }
}

/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 276px) and (max-width : 399.99px) { 
    #birdsandbees .header h1 {
        font-size: calc(5rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}
/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 400px) and (max-width : 575.99px) { 
    #birdsandbees .header h1 {
        font-size: calc(5rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}

/* Small devices (phones, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767.98px) { 
    #birdsandbees .header h1 {
        font-size: calc(5rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991.98px) { 
    #birdsandbees .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    #birdsandbees .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
        text-align: center;
    }
    #birdsandbees .header {
        padding: 12% 2% 5% 7%;
    }
    #birdsandbees .swipe-img {
        height: 375px;
        top: 85px;
        right: 3.5%;
    }
}
/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) and (max-width: 1399.99px) { 
    #birdsandbees .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
        padding: 10% 0% 10% 3%;
        text-align:center;
    }
    #birdsandbees .header {
        padding: 12% 2% 5% 4%;
    }
    #birdsandbees .swipe-img {
        height: 500px;
        top: 85px;
        right: 5%;
    }
}
/* Extra large devices (large desktops, 1400px and up) */
@media screen and (min-width: 1400px) {
    #birdsandbees .header h1 {
        font-size: calc(6.5rem + 1.2vw) !important;
        padding: 10% 0% 5% 5%;
    }
    #birdsandbees .header {
        padding: 12% 2% 5% 4%;
    }
    #birdsandbees .swipe-img {
        height: 500px;
        top: 100px;
        right: 6.5%;
    }
}




/* --------------------------- Time to digest ----------------------------*/
/* Extra small devices (phones, less than 576px) */
#timetodigest .header h1 {
    padding: 5% 0%;
    margin: 0% 0% 0% 0%;
}
#timetodigest .lineup2 .image-container img {
    height: -webkit-fill-available;
    opacity: 0.8;
    width: 100%;
    border-radius: 0%;
    z-index: 1;
    overflow: hidden;
}
#timetodigest .lineup2 .texts h2 {
    padding: 6%;
}

@media screen and (max-width : 275.99px) { 
    .swipe-img {
        display: none;
    }
}
/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 276px) and (max-width : 399.99px) { 
    #timetodigest .header h1 {
        font-size: calc(5rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}
/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 400px) and (max-width : 575.99px) { 
    #timetodigest .header h1 {
        font-size: calc(5rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}
/* Small devices (phones, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767.98px) { 
    #timetodigest .header h1 {
        font-size: calc(5rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}
/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991.98px) { 
    #timetodigest .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}
/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    #timetodigest .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
        text-align: center;
    }
    #timetodigest .header {
        padding: 12% 2% 5% 7%;
    }
    #timetodigest .swipe-img {
        height: 375px;
        top: 85px;
        right: 3.5%;
    }
}
/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) and (max-width: 1399.99px) { 
    #timetodigest .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
        padding: 10% 0% 10% 3%;
        text-align:center;
    }
    #timetodigest .header {
        padding: 12% 2% 5% 4%;
    }
    #timetodigest .swipe-img {
        height: 500px;
        top: 100px;
        right: 6.5%;
    }
}
/* Extra large devices (large desktops, 1400px and up) */
@media screen and (min-width: 1400px) {
    #timetodigest .header h1 {
        font-size: calc(5.75rem + 1.2vw) !important;
        padding: 10% 0% 5% 0%;
    }
    #timetodigest .header {
        padding: 12% 2% 5% 4%;
    }
    #timetodigest .swipe-img {
        height: 500px;
        top: 35px;
        right: 7.5%;
    }
}

/* ----------------------------TheWorks---------------------------------- */
#gymbunny .header h1 {
    padding: 5% 0% 5% 10%;
    margin: 0% 0% 0% 0%;
}
#theworks .header h1 {
    padding: 5% 0%;
    margin: 0% 0% 0% 0%;
}
#theworks .lineup2 .image-container img, #gymbunny .lineup2 .image-container img {
    height: -webkit-fill-available;
    opacity: 0.8;
    width: 100%;
    border-radius: 0%;
    z-index: 1;
    overflow: hidden;
}
#theworks .lineup2 .texts h2, #gymbunny .lineup2 .texts h2 {
    padding: 6%;
}
/* Extra small devices (phones, less than 576px) */
@media screen and (max-width : 275.99px) { 
    .swipe-img {
        display: none;
    }
}
/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 276px) and (max-width : 399.99px) { 
    #theworks .header h1 {
        font-size: calc(5rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}
/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 400px) and (max-width : 575.99px) { 
    #theworks .header h1 {
        font-size: calc(5rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}
/* Small devices (phones, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767.98px) { 
    #theworks .header h1 {
        font-size: calc(5rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}
/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991.98px) { 
    #theworks .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}
/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    #theworks .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
        text-align: center;
    }
    #theworks .header {
        padding: 12% 2% 5% 7%;
    }
    #theworks .swipe-img {
        height: 225px;
        top: 100px;
        right: 1%;
    }
}
/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) and (max-width: 1399.99px) { 
    #theworks .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
        padding: 10% 0% 10% 3%;
        text-align:center;
    }
    #theworks .header {
        padding: 12% 2% 5% 4%;
    }
    #theworks .swipe-img {
        height: 275px;
        top: 100px;
        right: 2.5%;
    }
}
/* Extra large devices (large desktops, 1400px and up) */
@media screen and (min-width: 1400px) {
    #theworks .header h1 {
        font-size: calc(6.5rem + 1.2vw) !important;
        padding: 10% 0% 5% 5%;
    }
    #theworks .header {
        padding: 12% 2% 5% 4%;
    }
    #theworks .swipe-img {
        height: 350px;
        top: 100px;
        right: 2.5%;
    }
}




/* GlowUp */
#glowup .header h1 {
    padding: 5% 0%;
    margin: 0% 0% 0% 0%;
}
#glowup .lineup2 .image-container img {
    height: -webkit-fill-available;
    opacity: 0.8;
    width: 100%;
    border-radius: 0%;
    z-index: 1;
    overflow: hidden;
}
#glowup .lineup2 .texts h2 {
    padding-left: 6%;
}
/* Extra small devices (phones, less than 576px) */
@media screen and (max-width : 275.99px) { 
    .swipe-img {
        display: none;
    }
}

/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 276px) and (max-width : 399.99px) { 
    #glowup .header h1 {
        font-size: calc(5rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}
/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 400px) and (max-width : 575.99px) { 
    #glowup .header h1 {
        font-size: calc(5rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}

/* Small devices (phones, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767.98px) { 
    #glowup .header h1 {
        font-size: calc(5rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991.98px) { 
    #glowup .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}
/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    #glowup .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
        text-align: center;
    }
    #glowup .header {
        padding: 12% 2% 5% 7%;
    }
    #glowup .swipe-img {
        height: 375px;
        top: 85px;
        right: 3.5%;
    }
}
/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) and (max-width: 1399.99px) { 
    #glowup .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
        padding: 10% 0% 10% 3%;
        text-align:center;
    }
    #glowup .header {
        padding: 12% 2% 5% 4%;
    }
    #glowup .swipe-img {
        height: 450px;
        top: 40px;
        right: 6%;
    }
}
/* Extra large devices (large desktops, 1400px and up) */
@media screen and (min-width: 1400px) {
    #glowup .header h1 {
        font-size: calc(6.5rem + 1.2vw) !important;
        padding: 10% 0% 5% 5%;
    }
    #glowup .header {
        padding: 12% 2% 5% 4%;
    }
    #glowup .swipe-img {
        height: 500px;
        top: 35px;
        right: 7.5%;
    }
}







/* HeadSpace */
#headspace .header h1 {
    padding: 5% 0%;
    margin: 0% 0% 0% 0%;
}
#headspace .lineup2 .image-container img {
    height: -webkit-fill-available;
    opacity: 0.8;
    width: 100%;
    border-radius: 0%;
    z-index: 1;
    overflow: hidden;
}
#headspace .lineup2 .texts h2 {
    padding: 6%;
}
/* Extra small devices (phones, less than 576px) */
@media screen and (max-width : 275.99px) { 
    .swipe-img {
        display: none;
    }
}
/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 276px) and (max-width : 399.99px) { 
    #headspace .header h1 {
        font-size: calc(5rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}
/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 400px) and (max-width : 575.99px) { 
    #headspace .header h1 {
        font-size: calc(5rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}

/* Small devices (phones, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767.98px) { 
    #headspace .header h1 {
        font-size: calc(5rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991.98px) { 
    #headspace .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
        text-align: center;
        margin: 5% 10% 5% 10%;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    #headspace .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
        text-align: center;
    }
    #headspace .header {
        padding: 12% 2% 5% 7%;
    }
    #headspace .swipe-img {
        height: 375px;
        top: 85px;
        right: 3.5%;
    }
}
/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) and (max-width: 1399.99px) { 
    #headspace .header h1 {
        font-size: calc(6rem + 1.2vw) !important;
        padding: 10% 0% 10% 3%;
        text-align:center;
    }
    #headspace .header {
        padding: 12% 2% 5% 4%;
    }
    #headspace .swipe-img {
        height: 450px;
        top: 40px;
        right: 6%;
    }
}
/* Extra large devices (large desktops, 1400px and up) */
@media screen and (min-width: 1400px) {
    #headspace .header h1 {
        font-size: calc(6.5rem + 1.2vw) !important;
        padding: 10% 0% 5% 5%;
    }
    #headspace .header {
        padding: 12% 2% 5% 4%;
    }
    #headspace .swipe-img {
        height: 500px;
        top: 35px;
        right: 7.5%;
    }
}




/* ---------- Navbar ------------ */

.navbar {
    background-color: rgba(88,50,41,1);
    display: inline-flex;
    height: 8vh;
    align-items: center;
    align-content: center;
    position: sticky;
    /* Change from sticky??? */
}

.navbar-toggler {
    background-color: rgba(232,214,187,1) !important;
}

.navbar-brand {
    height: 7vh;
    margin-left: 2vw;
    z-index: 100;
    transition: 0.5s;
}

.navbar .navbar-brand {
    padding-left: 13vw;
}

.nav-login {
    padding-right: 2.5%;
    display: flex;
    align-items: center;
}

.nav-login a {
    color:#023cd4 !important;
    transition: 0.5s;
}

.nav-login a:hover {
    color:#029cd4 !important;
    transform: scale(1.02);
}

.contact-brand {
    margin: 0vh 0.5vw;
    text-decoration: none;
}

.contact-brand .btn-cream {
    border: none;
    box-shadow: none;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out; 
    border: 1px solid rgb(255, 165, 0, 0);

}

.contact-brand .btn-cream:hover {
    border: 1px solid rgb(255, 165, 0, 0.5);
}

.social {
    font-size: 2.5vh;
    margin: 0.25vw;
    padding: 0vh 1vw;
    transition: 0.2s;
}

.social:hover {
    cursor: pointer;
    transform: scale(1.1);
}
.nav-links {
    display: flex;
    justify-content: center;
}

.nav-links a {

    font-size: 3vh;
    text-decoration: none;
    color:rgba(255,219,104,1) !important;
    transition: 0.5s;
}

.nav-links a:hover {
    color:#029cd4 !important;
    /* transform: scale(1.02); */
}

.nav.container-fluid {
    --bs-gutter-x: 0 !important;
}

/* Hamburger Icon */

.navbar-toggler {
    /* opacity: 0; */
}
  
  #nav-icon {
    border: none;
    background: transparent;
    z-index: 100;
    position: relative;
    margin-bottom: 6vh;
    margin-left: 0vw;
    cursor: pointer;
    pointer-events: all !important;
  }
/* 
  #nav-icon:hover {
    transform: scale(1.1);
    transform-origin: center;
  } */
  
  #nav-icon img {
    display: block;
    position: absolute;
    height: 6vh;
    width: 6.5vh;
    opacity: 1;
  }
  

/* Navbar Modals */

/* Booking */

.modal-backdrop {
    --bs-backdrop-zindex: 1000 !important;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-backdrop-zindex);
    width: 100vw;
    height: 100vh;
    background-color: var(--bs-backdrop-bg);
}

.modal-dialog {
    max-width: 36vw !important;
    --bs-modal-margin: 3rem 1.75rem 1.75rem 1.75rem !important;
    margin: auto;
    top: 5%;
}

.modal-content {
    margin: auto;
    border-radius: 10px !important;
}

.modal-logo {
    max-height: 15vh;
    height: auto !important;
}

.modal-header {
    flex-direction: column-reverse;
    background-color: rgba(88,50,41,1);
}

.modal-body {
    background-color: rgba(232,214,187,1);
    border-bottom-left-radius: 2%;
    border-bottom-right-radius: 2%;
    /* padding: 5% !important; */
} 
.modal .btn-close {
    --bs-btn-close-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e8d6bb'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e) !important;
}
.bookings__content {
    background-color: rgba(232,214,187,1) !important;
}

#cliniko-online-bookings {
    background-color: #e8d6bb !important;
}

iframe {
    height: 404px !important;

}

#modal-booking1 iframe {
    height: 404px !important;
}

#cliniko-online-bookings iframe {
    height: 404px !important;
}

#cliniko-53816713 {
    height: 404px !important;
}


/* ---- Offcanvas ----- */

.offcanvas {
    opacity: 0.9;
    width: 35vw !important;
}

.close-needles {
    border: none;
    background: transparent;
    position: relative;
    left: 13vw;
}

.close-needles img {
    height: 7vh; 
   
}

.offcanvas .navbar-brand {
    z-index: -1;
    height: 9vh;
    padding-top: 2vh;
}

.offcanvas-body {
    background-color: rgba(88,50,41,1);
    padding-top: 10vh;
    display: flex !important;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.offcanvas-body .nav-login {
    margin-top: 4vh;
}

.offcanvas-body .contact-brand {
    margin-top: 1vh;
}

.offcanvas-body .bacc img {
    height: 10vh;
    filter: grayscale(100%);
    /* color: rgba(232,214,187,1) !important */
}

.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(88,50,41,1);
    /* padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x); */
    flex-direction: column-reverse;
    padding-top: 2.5vh;
}

.offcanvas .btn-close {
    margin-left: 90%;
    margin-top: 1% !important;
    color: white !important;
    background-color: rgba(232,214,187,0.4);

}

.offcanvas-header .navbar-brand {
    height: 12vh !important;
    margin-top: 2vh;
    padding-left: 0 !important;
}
/* 
.offcanvas-header .btn-close {
    padding
} */

.nav-collapse {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.nav-collapse a {
    text-decoration: none;
    color: rgba(232,214,187,1);
    font-size: 4.5vh;
    margin: 0.3vh;
}

.socials a {
    color: rgba(232,214,187,1);
}

/*  ---------- Footer ----------- */


.map iframe {
    width: 27vw;
    height: 27vw;
    visibility: visible !important;
}

.map a {
    display: none;
}



.footer {
    background-color: rgba(88,50,41,1);
}

.footer .container {
    max-width: 100%;
}

.footer-logo {
    background-color: rgba(232,214,187,1);
}

.footer-logo img {
    height: 125px;
}

.footer .col-lg-2 {
    align-items: center;
}

.footer a,
.footer i,
.footer .col-lg-3 h3,
.footer .col-lg-3 h5, .footer .text-uppercase,
.footer address
 {
    color: rgba(232, 214, 187, 1);
}

.footer li i {
    margin-top: 2.5%;
}

.shadow-1-strong {
    background-color: rgba(232,214,187,1);
}

.footer .logo {
    margin: 10%;
    border-radius: 50%;
    background-color:  rgba(232,214,187,1);
}
.footer .row {
    justify-content: space-between;
}

.copyright {
    color: rgba(232, 214, 187, 1);
    background-color: rgba(88, 50, 41, 1) !important;
}

/* Footer Modal */
.modal {
    --bs-modal-padding: 0.5rem !important;
}
.modal-dialog {
    --bs-modal-margin: 0rem 1.75rem 1.75rem 1.75rem !important;
}
.modal-content {
    --bs-modal-bg: rgba(232,214,187,1);
  }
  .modal-open {
  padding-right: 0 !important;
  }
  
  #footer-modal {
      position: relative;
      top: 45vh;
  }
  
  .footer .modal .modal-body {
    text-align:start;
  }
  .footer .modal .modal-body h1  {
    text-align:center;
  }

  .footer .modal address, .footer .modal a {
    color: black;
  }
  
  .footer .modal section {
    margin: 2% 0%;
  }

  .privacypolicy, .termsandconditions {
    --bs-modal-width: 60vw !important;
  }
  
  .privacypolicy, .termsandconditions, .contactform {
    z-index: 100000 !important;
  }
  .privacypolicy .modal-body p, .termsandconditions .modal-body p {
    text-align: left;
  }
  .privacypolicy .modal-body, .termsandconditions .modal-body {
    -webkit-box-shadow: inset 1px 1px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 1px 5px 0px rgba(0,0,0,0.75);
    box-shadow: inset 1px 1px 5px 0px rgba(0,0,0,0.75);
    overflow-y: scroll;
    max-height: 65vh;
    background-color: white;
    padding: 7% 10%;
    margin: 0% 5% 5% 5%;
  }
  .privacypolicy .modal-header, .termsandconditions .modal-header, .contactform .modal-header  {
    border-bottom: none !important;
  }
  .modal-header {
      display: flex;
      flex-direction: column-reverse;
  }
  .modal-logo {
    width:  25vw;
    padding: 5%;
  }
  #error_6eca97bade3b331fbe163d731d70bf420f2192c9 {
    display: none;
  }
  .modal .btn-brown {
    width: 10vw;
  }
  
  .modal-dialog {
    filter: drop-shadow(1px 1px 2px black);
    max-width: 45vw !important;

  }
  
/* Extra small devices (phones, less than 576px) */
@media screen and (min-width : 276px) and (max-width : 575.99px) { 
    .footer .row {
        justify-content: center;
    }
    .offcanvas {
        width: 100vw !important;
    }
    .offcanvas-header .navbar-brand {
        height: 10vh !important;
    }
    .map iframe {
        width: 70vw;
        height: 50vw;
        visibility: visible !important;
    }
}

/* Small devices (phones, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767.98px) { 
    .footer ul {
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        align-items: flex-start;
    }
    .map iframe {
        width: 50vw;
        height: 50vw;
        visibility: visible !important;
    }
    .footer .row {
        justify-content: center;
    }
    .offcanvas {
        width: 70vw !important;
    }
    .offcanvas-header .navbar-brand {
        height: 10vh !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991.98px) { 
    .footer ul {
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        align-items: flex-start;
    }
    .map iframe {
        width: 50vw;
        height: 50vw;
        visibility: visible !important;
    }
    .footer .row {
        justify-content: center;
    }
    .footer .col-lg-2:nth-child(2) {
        align-items: end;
        margin: 0% 2% 0% 0%;
    }
    .footer .col-lg-2:nth-child(3) {
        align-items: start;
        margin: 0% 0% 0% 2%;
    }
    .offcanvas {
        width: 55vw !important;
    }
    .offcanvas-header .navbar-brand {
        height: 11vh !important;
    }
}
/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    .footer ul {
    width: 120%;
    }
    .footer .row {
        justify-content: space-evenly;
    }
    .offcanvas {
        width: 42.5vw !important;
    }
    .offcanvas-header .navbar-brand {
        height: 90px;
    }
}
@media screen and (min-width: 1199.99px) and (max-width: 1299.98px) {
    .offcanvas {
        width: 40vw !important;
    }
    .offcanvas-header .navbar-brand {
        height: 100px;
    }
}
@media screen and (min-width: 1299.99px) and (max-width: 1399.98px) {
    .offcanvas {
        width: 37.5vw !important;
    }
}
/* Splide Sections */
/* Popover Styles */
.custom-pop {
    position: relative;
    display: inline-block;
}

.custom-pop .pop-content2, .custom-pop .pop-content3, .custom-pop .pop-content4, .custom-pop .pop-content5, .custom-pop .pop-content6 {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: -5%;
    background-repeat: no-repeat;
    background-size: 120%;
    background-position: center;
    border: 1px solid rgba(88,50,41,1);
    height: 65%;
    width: 100%;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1;
    opacity: 0;
    transition: ease-in-out 0.5s;
}

.custom-pop .pop-content1 {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: -5%;
    background-repeat: round; 
    border: 1px solid rgba(88,50,41,1);
    height: 65%;
    width: 100%;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1;
    opacity: 0;
    transition: ease-in-out 0.5s;
}

.pop-content1::before, .pop-content2::before, .pop-content3::before, .pop-content4::before, .pop-content5::before, .pop-content6::before{
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    top: -1px;
    z-index: 0;
    border-radius: 100%;
    pointer-events: none;
    background-repeat: no-repeat; 
    background-size: 100% 146px;
    background-position: 50% 0%;    
    background-color: rgba(0, 0, 0, 0.3)
    }
    .custom-pop .pop-content1 {
        background-image: url("../images/needle-back.jpg");
        background-blend-mode: blur(1px);
    }
    .custom-pop .pop-content2 {
        background-image: url("../images/lineup/Theglowup.jpg");
        background-blend-mode: blur(1px);
    }
    .custom-pop .pop-content3 {
        background-image: url("../images/lineup/Birdsandbees.JPG");
        background-blend-mode: blur(1px);
    }
    .custom-pop .pop-content4 {
        background-image: url("../images/lineup/Gymbunny.jpg");
        background-blend-mode: blur(1px);
    }
    .custom-pop .pop-content5 {
        background-image: url("../images/lineup/Timetodigest.jpg");
        background-blend-mode: blur(1px);
    }
    .custom-pop .pop-content6 {
        background-image: url("../images/lineup/Headspace.jpg");
        background-blend-mode: blur(1px);
    }


.custom-pop:hover .pop-content1, .custom-pop:hover .pop-content2, .custom-pop:hover .pop-content3, .custom-pop:hover .pop-content4, .custom-pop:hover .pop-content5, .custom-pop:hover .pop-content6 {
    visibility: visible;
    opacity: 1;
    border: 4px solid rgba(232,214,187,1);;
}

.pop-content1 p, .pop-content2 p, .pop-content3 p, .pop-content4 p, .pop-content5 p, .pop-content6 p {
    z-index: 3;
    padding: 10%;
    color:rgba(232,214,187,1);
    font-size: calc(0.4rem + 0.4vw) !important;
    margin-bottom: 0rem !important;
    font-weight: bolder;
    background-blend-mode: blur(1px);
}

.pop-content1 a, .pop-content2 a, .pop-content3 a, .pop-content4 a, .pop-content5 a, .pop-content6 a {
    z-index: 3;
    margin-top: 0%;
    font-size: calc(0.75rem + 0.4vw) !important;
    text-decoration: none;
    color: rgba(88,50,41,1);
    transition: 0.5s ease-in-out;
}

.pop-content1 a:hover, .pop-content2 a:hover, .pop-content3 a:hover, .pop-content4 a:hover, .pop-content5 a:hover, .pop-content6 a:hover {
    transform: scale(1.1);
    color: rgb(251, 186, 151);
}



/*  ------ Dividers --- */

.faq-divider{
    overflow:hidden;
    position:relative;
    }
    .faq-divider::before{
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    top: -1px;
    z-index: -5;
    pointer-events: none;
    background-repeat: no-repeat; 
    background-size: 100% 146px;
    background-position: 50% 0%;    
    background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23f8a476"/><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" opacity=".5" fill="%23f8a476"/><path d="M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z" opacity=".5" fill="%23f8a476"/></svg>'); 
    }
    
    @media (min-width:768px){
    .faq-divider::before{
    background-size: 100% 146px;
    background-position: 50% 0%;   
    }  
    }
     
    @media (min-width:1025px){
    .faq-divider::before{ 
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 100% 146px;
    background-position: 50% 0%;  
    }
    }
    @media (min-width:2100px){
    .faq-divider::before{
    background-size: 100% calc(2vw + 146px);
    }
    }
     
.custom-shape-divider-top-1708526869 {
    position: absolute;
    top: 87vh;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1708526869 svg {
    position: relative;
    display: block;
    width: calc(108% + 1.3px);
    height: 69px;
}

.custom-shape-divider-top-1708526869 .shape-fill {
    fill: #F8A476;
}

/* Splides */

.splide__list {
    align-items: center;
}


.splide__slide img {
    opacity: 0.8;
    transition: all 0.5s ease-in-out;
 }
 
 .splide__slide.is-visible img {
    opacity: 1 !important;
 }

 /* Splide 1 Homepage */

.section1 .splide__slide {
    display: grid;
    justify-content: center;
    max-height: 475px;
    width: calc(21%) !important;
    margin-left: calc(2%) !important;
    margin-right: calc(2%) !important;
    padding-top: 2%;
    border-radius: 10px;
    background-color: rgba(88,50,41,1);
    border: 1px solid rgba(88,50,41,1);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;   
}

.section1 .splide__slide a {
    color: rgba(232,214,187,1);
}

.section1 .splide__slide h2 {
    border-radius: 10px;
    color: rgba(232,214,187,1);
    font-size: calc(2rem + 1.2vw) !important;
    text-decoration: underline;
    /* width: 97%; */
    /* background-color:  rgba(232,214,187,1); */
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;    */
}

.section1 .womens h2, .section1   h2 {
    top: -3.5vh;
}

.section1 h4 {
    color:rgba(88,50,41,1);
}

/* .section1 .womens .splide__img, .section1 .digest .splide__img, .section1 .headspace, .section1 .glow-up {
    position: relative;
    top: -4.5vh !important;
} */

/* .section1 .womens h2, .section1 .digest h2 {
    padding: 1.5vh 0vw 1.5vh 0vw;
    border-radius: 10px;
    color: white;
    font-size: 6.5vh !important;
    text-decoration: underline;
} */


.section1 .splide__img {
    position: relative;
    height: 65%;
    top: -4% !important;
    transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s  ease-in-out;
}

.section1 .splide__img-hover {
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s  ease-in-out;
}

.section1 .splide__img-hover:hover {
    /* transform: scale(1.05) !important; */
}

.section1 .splide__arrow--next {
    /* background-image: url("../images/arrow-right.svg") !important; */
    height: 10vh !important;
    right: 0em !important;
}

.section1 .splide__arrow--prev {
    /* background-image: url("arrow-left.png"); */
    height: 10vh !important;
    left: 0em !important;
}

.section1 .splide__arrow {
    /* background: rgb(204, 204, 204, 0.1) !important; */
    border-radius: 0 !important;
    height: 40vh !important;
    opacity: 1 !important;
    width: 1.5vw !important;
    transition: 0.1s !important;
}

.section1 .splide__arrow:hover {
    background: rgb(204, 204, 204, 0.3) !important;
}

.section1 .btn-brown {
    border: none;
    box-shadow: none;
}

.section1 .btn-brown:hover {
    cursor: pointer;
    border: 0.5px solid  rgba(102, 51, 51, 1);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; 
}


/* Splide 2 */

#splide2 {
    width: 100vw;
}
#splide2 .splide__slide {
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    border: 1px double black;
    margin: 2%;
}

#splide2 .splide__slide h3 {
    font-weight: 800;
    margin: 10% 10%;
}

#splide2 .splide__slide p {
    text-align: center;
    font-weight: 500 ;
    padding: 10% 0% 0%;
    text-align: center;
}

#splide2 .col-md-8 {
    background-color:rgba(119, 119, 99, 1);
}
.splide__slide .title {text-align: center;margin-bottom: 50px;position: relative;padding: 20px 0;max-width: 600px;margin: 0 auto;}
.splide__slide .title h5 {color: #EB6D2F;line-height: 1.2em;font-size: 18px;font-weight: 900;margin-bottom: -3px;}
.splide__slide .title h2 {color: #5A3733;line-height: 1.2em;font-weight: 900;font-size: 41px;letter-spacing: -1px;margin:0}
.splide__slide .title img {margin-top: -10px;}
.splide__slide .title p {margin: 0 0 10px;margin-bottom: 0;color: #5A3733;}
.splide__slide .item {background: rgb(243, 232, 215);padding: 50px 30px;border-radius:15px;}
.splide__slide .item .profile {display:flex;justify-content: center;align-items: center;padding-left: 15px;}
.splide__slide .item .profile img {border-radius: 100%;width:80px;height:80px;object-fit:cover}
.splide__slide .item .profile .information {padding-left:5px;margin-bottom:15px;display: flex;flex-direction: column;align-items: center;}
.splide__slide .item .profile .information .stars i {color:#ffd832}
.splide__slide .item .profile .information p {font-size: 24px;margin: 0px auto 0px;color: #5A3733;font-weight: 900;line-height: 1;}
.splide__slide .item .profile .information span {color: #EB6D2F;font-weight: bold;margin-top: -4px;line-height: 1.6em;font-size: 14px;}
.splide__slide .item>p {margin-bottom: 15px;font-size: 16px;line-height: 1.6em;display: block;z-index: 2;font-style: italic;color: #5A3733;text-align: center;}
.splide__slide .item .icon {text-align: center;}
.splide__slide .item .icon i {font-size: 32px;color: #FFD832;}

/* Buttons */

.btn-brown {
    display: block;
    box-sizing: border-box;
    margin: 0.5vw;
    width: 8.5vw;
    padding: 2%; 
    background: #fff; /* fallback color for old browsers */
    background: rgba(255, 255, 255, 0); 
    border-radius: 20px;
    border: 1px solid  rgba(102, 51, 51, 1);
    color: rgba(102, 51, 51, 1); 
    text-align: center;
    font-size: 2.5vh;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;   
    text-decoration: none; 
    letter-spacing: 1px; 
    transition: all 0.4s ease-out; 
  }
  
  .btn-brown:hover {
    transform: scale(1.01);
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
  }



  .btn-cream {
    display: block;
    box-sizing: border-box;
    margin: 0.5vw;
    width: 100%;
    padding: 4%; 
    background: #fff; /* fallback color for old browsers */
    background: rgba(255, 255, 255, 0); 
    border-radius: 20px;
    border: 1px solid  rgba(232,214,187,1);
    color: rgba(232,214,187,1); 
    text-align: center;
    font-size: calc(0.75rem + 0.4vw);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;   
    text-decoration: none; 
    letter-spacing: 1px; 
    transition: all 0.4s ease-out; 
  }
  
  .btn-cream:hover {
    transform: scale(1.01);
    cursor: pointer;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; */
  }


  /* HAMBURGER 4 */
  .hamburger {
    margin: 0 auto;
    margin-top: 30px;
    width: 30px;
    height: 30px;
    position: relative;
}

.hamburger .bar {
    padding: 0;
    width: 30px;
    height: 4px;
    background-color: maroon;
    display: block;
    border-radius: 4px;
    transition: all 0.4s ease-in-out;
    position: absolute; 
}

.bar1 {
    top: 0;
}

.bar2,
.bar3 {
    top: 13.5px;
}

.bar3 {
    right: 0;
}

.bar4 {
    bottom: 0;
}
.hamburger2 .bar2,
.hamburger3 .bar3,
.hamburger4 .bar4 {
    top: 13.5px;
}

.hamburger4 .bar5 {
    bottom: 0px;
}

.hamburger4 .bar {
    transition: all 0.4s ease-in-out, transform 0.4s ease-in-out 0.4s;
}

.hamburger4 .bar2 {
    width: 1px;
    transform: rotate(90deg);
    left: 13.5px;
}

.hamburger4 .bar3 {
    width: 1px;
    left: 13.5px;
    
}

.checkbox4:checked + label > .hamburger4 > .bar1{
    top: 13.5px;
    background-color: transparent;
}

.checkbox4:checked + label > .hamburger4 > .bar2{
    left: 0px;
    width: 30px;
    transform: rotate(45deg);
}

.checkbox4:checked + label > .hamburger4 > .bar3{
    left: 0;
    width: 30px;
    transform: rotate(-45deg);
}

.checkbox4:checked + label > .hamburger4 > .bar4{
    background-color: transparent;
}

.checkbox4:checked + label > .hamburger4 > .bar5{
    bottom: 13.5px;
    background-color: transparent; 
}



/* Slice Button */

/*--Button Styles--*/
.btn-slice {
	padding: 1.2rem 2.5rem;
  border: 2px solid #ffffff;
	border-radius: 0rem;
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.3rem;
  position: relative;
  
  -webkit-transition: all 1000ms cubic-bezier(0.890, 0, 0.140, 1); /* older webkit */
  -webkit-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); 
  -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); 
  -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); 
  transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); /* custom */

  -webkit-transition-timing-function: cubic-bezier(0.890, 0, 0.140, 1); /* older webkit */
  -webkit-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); 
  -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); 
  -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); 
  transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); /* custom */
}

.btn-slice .top  {
	position: relative;
	height: 6px;
	overflow: hidden;
  top: 0;
  -webkit-transition: all 300ms cubic-bezier(1.000, 0, 0.025, 1); /* older webkit */
  -webkit-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); 
  -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); 
  -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); 
  transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); /* custom */

  -webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.025, 1); /* older webkit */
  -webkit-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); 
  -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); 
  -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); 
  transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); /* custom */
  
  -webkit-transition-delay:0.35s;     
  -moz-transition-delay:0.35s; 
  -ms-transition-delay:0.35s;     
  -o-transition-delay:0.35s;     
  transition-delay:0.35s;
}

.btn-slice .bottom  {
	position: relative;
	height: 6px;
	overflow: hidden;
  bottom: 0;
  -webkit-transition: all 300ms cubic-bezier(1.000, 0, 0.025, 1); /* older webkit */
  -webkit-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); 
  -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); 
  -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); 
  transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); /* custom */

  -webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.025, 1); /* older webkit */
  -webkit-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); 
  -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); 
  -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); 
  transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); /* custom */
  
  -webkit-transition-delay:0.35s;     
  -moz-transition-delay:0.35s; 
  -ms-transition-delay:0.35s;     
  -o-transition-delay:0.35s;     
  transition-delay:0.35s;
}

.btn-slice .bottom span {
  top: -6px;
  position: absolute;
  left: 0;
}

.btn-slice:hover .top {
	top: -5px;
  -webkit-transition-delay:0.35s;     
  -moz-transition-delay:0.35s; 
  -ms-transition-delay:0.35s;     
  -o-transition-delay:0.35s;     
  transition-delay:0.35s; 
}

.btn-slice:hover .bottom {
	bottom: -5px;
  -webkit-transition-delay:0.35s;     
  -moz-transition-delay:0.35s; 
  -ms-transition-delay:0.35s;     
  -o-transition-delay:0.35s;     
  transition-delay:0.35s; 
}
.btn-slice:hover, .btn-slice:focus, .btn-slice:active {
	margin-left: 10px;
}
.btn-slice:before{
	content: '';
	height: 1px;
	width: 60px;
	background-color: #ffffff;
	position: absolute;
	margin-top: 6px;
	right: -35px;
  
  -webkit-transition: all 1000ms cubic-bezier(0.890, 0, 0.140, 1); /* older webkit */
  -webkit-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); 
  -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); 
  -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); 
  transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); /* custom */

  -webkit-transition-timing-function: cubic-bezier(0.890, 0, 0.140, 1); /* older webkit */
  -webkit-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); 
  -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); 
  -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); 
  transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); /* custom */
}
.btn-slice:hover:before{
	width: 130%;
}