/** Shopify CDN: Minification failed

Line 222:0 Unexpected "}"

**/

* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --max-width: 1170px;
    --banner-image-height: 60vh;  
}

body {
    font-family: "DIN Neuzeit Grotesk", sans-serif;
}


h2.text-primary-color,h2.text-alternative-color {
    font-size: 2rem;
    text-align: left;
    font-weight: 500;
    margin: 3rem 0 3rem 0;
}
.section-center__heading {
    text-align: center;
    font-size: 2rem;
    padding:3rem 0 3rem 0;
}
h3.heading:after {
    display: none;
}
.heading {
    font-size: 2rem;
    text-align: center;
    font-weight: 500;
    line-height: 2.5rem;
}

.container.spray h3 {
    text-align: center;
    font-size: 2rem;
    padding:3rem 0 3rem 0;
}

.heading,.hero_title {
    font-size: 2rem;
    text-align: center;
    font-weight: 500;
}

.hero_title {
    padding-bottom: 1.25rem;
    text-align: left;
}
.heading--left {
    text-align: left;
}
.--left-align {
    text-align: left;
}

.text-primary-color {
    color:#005D5E;
}

p.text-alternative-color {
    text-align: left;
}

/* .heading  {
    color:#005d5e;
} */

.sub-heading {
    color:#777777;
}

.heading {
    padding:3rem 0 3rem 0;
}
img {
    width: 100%;
    object-fit: cover;
}

img.mobile {
    display: none;
}

.centered {
    text-align: center;
}

.invert-order-skin-patches {
    grid-row:1;
}


.section-center {
    width: 90vw;
    margin: 0 auto;
    max-width: var(--max-width);
}
.hero-section {
    background-size: cover;
    background-position: center;
}
.hero-section.skin-patches {
        background-image: url(/cdn/shop/files/CBD-Patch-image-block.jpg?v=1637243237);
        height: var(--banner-image-height);
        display: grid;
        place-items: center;
}

.hero-section.peace-gummies {
        background-image: url(/cdn/shop/files/Peace-Gummies-image-block.jpg?v=1637588457);
        height: var(--banner-image-height);
        display: grid;
        place-items: center;
}

.hero-section.peace-capsules {
        background-image: url(/cdn/shop/files/Peace-Capsules-image-block.jpg?v=1637589446);
        height: var(--banner-image-height);
        display: grid;
        place-items: center;
}



.hero-section.serumony {
    /* background-color: #EDCDD2; */
    /* https://www.freecodecamp.org/news/css-full-page-background-image-tutorial/ */
    background-image: url(https://cdn.shopify.com/s/files/1/0508/0455/5984/files/Serumony-image-block-scaled.jpg?v=1622644485);
    /* background-repeat: no-repeat; */
    height: var(--banner-image-height);
    display: grid;
    place-items: center;
    
}
.hero-section.skin-meditation {
    background-image: url(https://cdn.shopify.com/s/files/1/0508/0455/5984/files/Skin-Meditation-image-block-scaled.jpg?v=1622644486);
    height: var(--banner-image-height);
    display: grid;
    place-items: center;

}

.hero-section.lipcovery {
    background-image: url(https://cdn.shopify.com/s/files/1/0508/0455/5984/files/Lipcovery-image-block-scaled.jpg?v=1622644486);
    background-position: center top;
    height: var(--banner-image-height);
    display: grid;
    place-items: center;
}

.hero-section.acb {
    background-image: url(/cdn/shop/files/Active-Calm-Balm-image-block-new-2.jpg?v=1627460674);
    height: var(--banner-image-height);
    display: grid;
    place-items: center;
}

.hero-section.natural-spray {
    background-image: url(/cdn/shop/files/Harmony-CBD-Spray-Natural-banner.jpg?v=1660311950);
    display: grid;
    place-items: center;
    height: var(--banner-image-height);
}

.hero-section.mint {
    background-image: url(/cdn/shop/files/Harmony-CBD-Spray-Mint-banner.jpg?v=1660552770);
    display: grid;
    place-items: center;
    height: var(--banner-image-height);
}
.hero-section.citrus {
    background-image: url(/cdn/shop/files/Harmony-CBD-Spray-Citrus-banner.jpg?v=1660554635);
    display: grid;
    place-items: center;
    height: var(--banner-image-height);
}

.hero-section.dropper {
    background-image: url(https://cdn.shopify.com/s/files/1/0508/0455/5984/files/CBD-Drops-BG.jpg?v=1620809824);
    background-position: center top;
    height: var(--banner-image-height);
    display: grid;
    place-items: center;

}
.hero-section.zentouch {
    background-image: url(https://cdn.shopify.com/s/files/1/0569/6031/9663/files/CREME-CHAUFFANTE-MUSCULAIRE-WARMUP-HARMONY.jpg?v=1655719362);
    height: var(--banner-image-height);
    display: grid;
    place-items: center;
}
.hero-section.warmup {
    background-image: url(https://cdn.shopify.com/s/files/1/0569/6031/9663/files/Meilleure-Creme-chauffante-musculaire-Warmup-Harmony.jpg?v=1655468661);
    height: var(--banner-image-height);
    display: grid;
    place-items: center;
}
.hero-section.glowshield {
    background-image: url(https://cdn.shopify.com/s/files/1/0569/6031/9663/files/Meilleure-Creme-illuminatrice-visage-CBD-Glowshield-Harmony.jpg?v=1655469471);
    height: var(--banner-image-height);
    display: grid;
    place-items: center;
}
.hero-section.dropper-mint {
    background-image: url(https://cdn.shopify.com/s/files/1/0569/6031/9663/files/Harmony-CBD-Drops-mint-composition-Desktop.jpg?v=1651155822);
    background-position: center top;
    height: var(--banner-image-height);
    display: grid;
    place-items: center;
}
}
.hero-section.dropper-citrus {
    background-image: url(https://cdn.shopify.com/s/files/1/0569/6031/9663/files/Harmony-CBD-Drops-Citrus-composition-Desktop.jpg?v=1651155964);
    background-position: center top;
    height: var(--banner-image-height);
    display: grid;
    place-items: center;
}

.hero-box {
    display: grid;
    place-items: center;
    grid-template-columns: 1fr 1fr;

}
.sourses .intro{
    font-size: 1.25rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
  text-align:center;
}
.sourses .intro h2{
  text-align:center;
}
.sourses .grey-box{
background-color:#f7f7f7;
    padding: 2rem;
    margin: 4rem auto 0;
}


.hero-box-dropper__text {
    color: #fff;
}

.how-to-section {
    margin-bottom: 2rem;
}

.light-text {
    font-weight: 300;
    color:#777777;
    font-size:1rem;
}

.text-primary-color {
    color:#005D5E;
}

.text-alternative-color {
    color:#fff;
}

h2.text-primary-color {
    font-size: 3rem;
}

h2.text-alternative-color {
    font-size: 2rem;
    margin-bottom: 1rem;
}


.application-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:3rem;
    padding: 4rem 0;

}

/* https://stackoverflow.com/questions/46090760/controlling-the-size-of-an-image-within-a-css-grid-layout */
/* .box > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 */

 .how-to-box {
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

.how-to-box p {
    text-align: center;
}

.concentration-section {
    margin-bottom:3rem;
}

.concentration-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:1rem;
    justify-items: center;
    /* margin:2rem auto; */

}
.concentration-box--3{
    grid-template-columns: 1fr 1fr 1fr;
}

.concentration-box__item, .concentration-box__item-3col {
    width: 400px;   
}

.concentration-box__item:nth-child(2n-1) {
    justify-self: end;
}

.concentration-box__item:nth-child(2n) {
    justify-self: start;
} 

.concentration-box__item-3col--last {
    justify-self:center;
    grid-column: 1 / span 3;
}

.concentration-box__item-3col:nth-child(1) {
    justify-self: end;
}

.concentration-box__item-3col:nth-child(2) {
    justify-self: start;
} 

.dosage-box {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:3rem;

}
#activedosage{
  box-shadow: 0px 0px 0px 5px yellow;
}
#activedosage:hover{
  box-shadow: 0px 0px 0px 5px yellow !important;
}
.dosage-box a:hover {
  box-shadow: 0px 0px 0px 5px yellow;
}
.stamped-header-title{
  text-align:center;
}
.dosage-box:hover #activedosage {
  box-shadow: none;
}
.dosage-box a {
  transition: .5s ease;
}
.dosage-section  {
    display: grid;
    justify-items: center;
    justify-content: center;
  padding-bottom: 2rem;
}

.dosage-section p {
    text-align: center;
    padding-bottom: 4rem;
    width: 50%;
}

.graphic-section {
    background-color: #F7F7F7;
    display: flex;
}

.graphic-section .img-container {
    justify-self: center;
    width: 100vh;
    padding: 2.25rem 0;
   
}

.info-section {
    height: 20vh;
    display: grid;
    place-items: center;
}

.info-section > img {
    width: 100%;
}
.section-header {
    margin-bottom: 3rem;
}
.section-header > .sub-heading {
    text-align: center;
    color:#777777;
    font-size: 1rem;
}

.benefits-section {
    background-color: #FFF3EC;
    height: 100%;
    padding-bottom: 2rem;
}

.benefits-box {
    display: grid;
    grid-template-columns: 1fr;
    background-color: #FFFFFF;
    margin:3rem auto;
    
}


.features-section {
    background-color: #F7F7F7;
    height: 100%;
    padding: 2rem;
}

.features-box {
    display: grid;
    grid-template-columns: 1fr;
    background-color: #FFFFFF;
    margin:3rem auto;
    
}

/* .benefits-box > article {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
} */

.box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
}

.box_2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: start;
}


.benefit-desc {
    padding: 2rem;
    
}

.benefit-desc > h5 {
    color:rgb(0, 93, 94);
    font-size: 2rem;
    text-align: left;
    padding-bottom: 1rem;
}

.benefit-desc > p {
    color:#777777;
    font-size: 1rem;
    align-self: start;
    
}
.feature-desc {
    padding:1.5rem;
}
.feature-desc > h5 {
    color:black;
    font-size: 1.25rem;
    text-align: left;
    padding-bottom: 1rem;
}

.feature-desc > p {
    color:#777777;
    font-size: 0.9rem;
    align-self: start;

}

.ingredients-section {
    margin: 0 auto;
    overflow: hidden;
    background-color: #fff;
}

.ingredients-box {
    display: grid;
    grid-gap:5em;
    margin:0 auto;
    grid-template-columns: 1fr 1fr 1fr;
}

.ingredient-container {
    grid-column: 1 / 4;
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 2rem;
    align-items: center;
    position: relative;
}

.col-4 .ingredient-container {
    grid-template-columns: 1fr 1fr;
}


.col-4 .ingredient-container {
    grid-column: 1/3;
}

/* .ingredient-container::before{
    border-top: 4px solid #F8F8F8 ;
    display: block;
    content: "";
    width: 100%;
    top:0;
    position: absolute;
} */

.ingredient-narrow-container{
    grid-column: 2 / 4;
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 2rem;
    align-items: center;
    position: relative;
}

.ingredient-container__title {
    font-weight: 600;
    margin-bottom: 1.2rem;
}

.ingredients-box.col-4 {
    grid-template-columns: repeat(2,20rem);
    justify-content: center;

}

.ingredient.box-2 {
    grid-column: span 3;
    grid-template-columns: 1fr 2fr;
    grid-gap: 8rem;
    display: grid;
}

.ingredient.box-2 .text  {
    text-align: left;
}

.ingredient.box-2 .text p {
    margin-top: 1rem;
    color:#777777;
}

.ingredient {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.ingredient-name {
    font-weight: 600;
    margin: 1.2rem 0;
}

.ingredient > p, .ingredient-container p:last-child {
    color:#777777;
    font-size: 1rem;
}


.col2 {
    display: grid;
    grid-template-columns: 33% 1fr;
}

.general-section {
    background-color: #D9EBED;
    padding: 3rem 0;
}

.general-box {
    display: grid;
    grid-template-columns: 1fr;
    background-color: #FFFFFF;
    margin:0 auto;
}


.general-box > article > img {
    width: 100%;
}

.general-desc {
    padding: 2rem;
    
}

.general-desc > h5 {
    color:rgb(0, 93, 94);
    font-size: 2rem;
    text-align: left;
    padding-bottom: 1rem;
}

.general-desc > p {
    color:#777777;
    font-size: 1rem;
    align-self: start;
}

@media screen and (max-width: 780px) {
 .box,.box_2 {
     grid-template-columns: 1fr;
 }

 .how-to-box {
     grid-template-columns: 1fr;
     grid-gap:4rem;
 }

 .benefit-desc h5 {
     text-align: center;
 }

 .dosage-section p {
    width: 80%;
 }

 h2.text-alternative-color,p.text-alternative-color {
    text-align: center;
}

.dosage-box{
    grid-template-columns: 1fr;
}

 .ingredients-box {
     grid-template-columns: 1fr 1fr;
 }

 .invert-order {
    grid-row: 1;
 }
 .invert-order-skin-patches {
    grid-row:2;
}

.--left-align {
    text-align: center;
}
}

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

    .ingredient-container {
        grid-template-columns: 1fr;
    }
    h2.text-primary-color {
        margin:2rem 0 1rem 0;
        font-size: 2rem;
        text-align: center;
    }
    .hero-box {
        grid-template-columns: 1fr;
        text-align: center;
        height: 50%;
    }
    
    .concentration-box {
        grid-template-columns: 1fr;

    }

    .application-box {
        grid-gap:0rem;
    }

    .general-desc > h5 {
        text-align: center;
    }

    .concentration-box__item,.concentration-box__item-3col {
        width: 100%;
    }

    .concentration-box__item-3col--last {
        grid-column: 1;
    }

    .light-text {
        text-align:center;
    }
    
    .section-header > .heading {
        font-size: 2rem;
    }

    p {
        font-size: 1,2rem;
    }

    img.desktop {
        display: none;
    }

    img.mobile {
        display: block;
    }
    .hero-section {
        background-position: center bottom;
        background-repeat: no-repeat;
    }

    .hero-section.skin-patches {
        background-image: url(/cdn/shop/files/CBD-Patch-image-block-Mobile_f359753a-790b-4ff7-8223-b02ffc283b34.jpg?v=1637317218);
        background-position: center top;
        height: 100vh;
        place-items: start;
    }

    .hero-section.peace-gummies {
        background-image: url(/cdn/shop/files/Peace-Gummies-image-block-Mobile.jpg?v=1637588457);
        background-position: center top;
        height: 100vh;
        place-items: start;
    }

    .hero-section.peace-capsules {
        background-image: url(/cdn/shop/files/Peace-Capsules-image-block-Mobile.jpg?v=1637589446);
        background-position: center top;
        height: 100vh;
        place-items: start;
    }

    .hero-section.serumony {
        background-image: url(https://cdn.shopify.com/s/files/1/0508/0455/5984/files/Serumony-image-block-Mobile.jpg?v=1622644486);
        background-size:contain;
        background-position: center bottom;
        background-color: #EDCDD2;
        place-items: start;
        height: 100vh;

    }
    .hero-section.skin-meditation {
        background-image: url(https://cdn.shopify.com/s/files/1/0508/0455/5984/files/Skin-Meditation-image-block-Mobile.jpg?v=1622644485);
        height: 100vh;
        place-items: start;
    }

    .hero-section.lipcovery {
        background-image: url(https://cdn.shopify.com/s/files/1/0508/0455/5984/files/Lipcovery-image-block-Mobile.jpg?v=1622644485);
        background-position: center bottom;
        height: 100vh;
        place-items: start;

    }

    .hero-section.acb {
        background-image: url(/cdn/shop/files/Active-Calm-Balm-image-block-Mobile-NEW-2.jpg?v=1627460673);
        background-position: center top;
        height: 100vh;
        place-items: start;

    }

      .hero-section.citrus {
        background-image: url(/cdn/shop/files/Harmony-CBD-Spray-Citrus-banner-Mobile.jpg?v=1660554609);
        background-position: center top;
        place-items: start;
        height: 100vh;
    }
        .hero-section.mint {
        background-image: url(/cdn/shop/files/Harmony-CBD-Spray-Mint-banner-Mobile.jpg?v=1660552741);
        background-position: center top;
        place-items: start;
        height: 100vh;
    }

    .hero-section.dropper {
        background-image: url(https://cdn.shopify.com/s/files/1/0508/0455/5984/files/CBD-Drops-BG-Mobile.jpg?v=1620819062);
        background-position: center top;
        height: 100%;
        place-items: start;
    }
  .hero-box.dropper {
        padding: 3rem 0;
        align-self: self-end;
    }

    
    .hero-box-dropper__text {
        padding-bottom:2rem;
    }
    .hero_title {
        text-align: center;
    }
    .heading--left {
        text-align: center;
    }

    .hero-box.dropper div {
        grid-row: 1;
        height: 60vh;
    }

    .container.spray h3 {
        font-size: 1.5rem;
        padding: 2rem 0;
        text-align: center;
    }

    .feature-desc > h5,p  {
        text-align: center;
    }
}
@media screen and (max-width: 430px) {
    .ingredients-box {
        display: flex;
        flex-direction: column;
    }
    .ingredient.box-2 {
        display: flex;
        flex-direction: column;
        grid-gap:3rem;
        
    }
    .ingredient.box-2 .text {
        text-align: center;
    
    } 
    
    .ingredient.box-2 p {
        margin: 0;
    }
    
}