/*
    FONT REFERENCE

    Futura PT Medium
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;

    Futura PT Book
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;

    Futura PT Book Oblique
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: italic;

    Futura PT Demi
    font-family: futura-pt, sans-serif;
    font-weight: 600;
    font-style: normal;

    Futura PT Bold
    font-family: futura-pt-bold, sans-serif;
    font-weight: 700;
    font-style: normal;

    Libre Baskerville
    font-family: 'Libre Baskerville', serif;
    font-weight: 400
    font-style: normal;

    Libre Baskerville Italic
    font-family: 'Libre Baskerville', serif;
    font-weight: 400
    font-style: italic

    Libra Bakerville Bold
    font-family: 'Libre Baskerville', serif;
    font-weight: 700
    font-style: normal

    Font Awesome Pro Solid
    font-family: "Font Awesome 5 Pro"; 
    font-weight: 900; 

    Font Awesome Pro Regular
    font-family: "Font Awesome 5 Pro"; 
    font-weight: 400; 

    Font Awesome Pro Light
    font-family: "Font Awesome 5 Pro"; 
    font-weight: 300; 

*/

:root {
    --main-body-font: 'Libre Baskerville', serif;
    --main-body-font-weight-regular: 400;
    --main-body-font-weight-bold: 700;
    --main-body-font-style: normal;
    --main-body-font-size: 0.79875rem; /* 71% of XD version ( 12.78px */

    --main-text-color: #333333;
    
    /* Futura PT (Book) */
    --font-futura: futura-pt, sans-serif;
    --font-futura-weight: 400;
    --font-futura-style: normal;
    /* Futura PT (Medium) */
    --font-futura-medium-weight: 500;
    /* Futura PT (Demi) */
    --font-futura-demi-weight: 600;
    /* Futura PT (Bold) */
    --font-futura-bold: futura-pt-bold, sans-serif;
    --font-futura-bold-weight: 700;
    /* Font Awesome Pro */
    --font-awesome: "Font Awesome 5 Pro";
    --font-awesome-weight-solid: 900;
    --font-awesome-weight-regular: 400;
    --font-awesome-weight-light: 300;

    /* Colors */
    --color-purple: #592987;
    --color-lightPink: #FFC1E4;
    --color-deepPink: #DE5DA5;
    --color-aqua: #6EC4C2;
    --color-deepAqua: #54D4C8;
    --color-lightAqua: #D8F0F0;
    --color-inactive: #cccccc;
    --color-avoid: #E5635C;
    --color-favorite: #6EC4C2;
    --color-allergy: #ED9121;
    --color-avoidallergy: #9e0508;

    /* Padding */
    --padding-6: 4.5rem;
}


body {
    font-family: var( --main-body-font );
    font-weight: var( --main-body-font-weight-regular );
    font-style: var( --main-body-font-style );
    font-size: var( --main-body-font-size );
    line-height: 1.875rem;
    color: var( --main-text-color );
}

h1 {
    font-family: var( --font-futura-bold );
    font-weight: var( --font-futura-bold-weight );
    font-size: 2.375rem;
    margin-bottom: 20px;
}

h2 {
    font-family: var( --font-futura );
    font-weight: var( --font-futura-bold-weight );
    font-size: 1.5rem;
    margin-bottom: 20px;
}

h3 {
    font-family: var( --font-futura );
    font-weight: var( --font-futura-demi-weight );
    font-size: 1.3rem;
}
    
img {
    max-width: 100%;
    height: auto;
}

a {
    color: var( --main-text-color );
}

input {
    font-family: var( --font-futura );
    font-weight: var( --font-futura-weight );
}

blockquote {
    font-style: italic;
    color: var( --color-deepPink );
    font-size: 120%;
    margin-left: 40px;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #585858;
    opacity: 1;
    font-style: italic;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #585858;
    font-style: italic;
}

/* Bootstrap Overrides */

.btn {
    font-family: var( --font-futura );
    font-weight: var( --font-futura-demi-weight );
    border: 2px solid var( --main-text-color );
    border-radius: 100px;
    padding: 0.8rem 3rem 0.8rem 3rem;
}

.btn-primary {
    background-color: #333333;
    color: #ffffff;
    padding: 0.87rem 3rem 1rem 3rem;
    border: 2px solid var( --main-text-color );
}

.btn-primary:hover {
    background-color: var( --color-purple );
    color: #fff;
    border: 2px solid var( --color-purple );
}

a.btn-outline {
    background-color: transparent;
    border: 2px solid var( --main-text-color );
    font-size: 1rem;
    padding: 0.47rem 1rem 0.5rem 1rem;
}

a.btn-outline:hover {
    background-color: var( --main-text-color );
    color: #fff;
}

.btn.dropdown-toggle {
    position: relative;
    min-width: 125px;
    text-align: left;
}

.btn.dropdown-toggle:after {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.card {
    border-radius: 0px;
}

.card-footer, .card-footer:last-child {
    border-radius: 0px;
}

.lead {
    font-size: 1.125rem 
}

.lead strong {
    font-weight: var( --main-body-font-weight-bold );
}

.p-6 {
    padding: var( --padding-6 )!important;
}
.pt-6 {
    padding-top: var( --padding-6 )!important;
}
.pb-6 {
    padding-bottom: var( --padding-6 )!important;
}

/* Bootstrap: Tooltips */

.tooltip.show {
    opacity: 1;
}

.tooltip-inner {
    background-color: #fff;
    padding: 20px;
    color: var( --main-text-color );
    box-shadow: 0 0 16px rgba(182,191,191,.9);
    border: 1px solid rgba(0,0,0,.2);
    font-size: 0.875rem;
    max-width: 250px;
}

.tooltip-inner a {
    text-decoration: underline !important;
    cursor: pointer;
}

.tooltip-inner i {
    cursor: pointer;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
    border-bottom-color: #fff;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    border-top-color: #fff;
}



/* Alerts */

.alert {
    font-family: var( --font-futura );
    font-weight: var(--font-futura-medium-weight);
    font-style: italic;
    font-size: 1.2rem;
}

.alert-avoid {
    background-color: var( --color-avoid );
    color: #fff;
}

.alert-good {
    background-color: var( --color-good );
    color: #fff;
}

/* this icon needs a little manual tweaking. Jackie wanted specific positioning */
.alert i {
    vertical-align: middle;
}

/* Navbar */
.navbar {
    box-shadow: 0px 4px 8px #00000014;
}

.navbar > .container {
    max-width: 100%;
}

.navbar-nav {
    font-family: var( --font-futura );
    font-weight: var( --font-futura-medium-weight );
    font-size: 1rem;
}

.navbar-nav .nav-item {
    margin-right:20px;
}

.navbar-nav a {
    color: var( --main-text-color );
}


/* Pretty Dropdowns */

.prettydropdown > ul {
    border: 2px solid var( --main-text-color );
    font-size: 1rem;
    font-family: var( --font-futura );
    font-weight: var( --font-futura-demi-weight );
    border-radius: 25px;
    outline: none;
}

.prettydropdown > ul > li:not(:first-child) {
    font-weight: var( --font-futura-weight ); 
}

.prettydropdown:not(.disabled) > ul.active {
    border-color: var( --main-text-color );
}

.prettydropdown.arrow > ul > li.selected:before, .prettydropdown.arrow > ul > li.selected:after {
    right: 12px;
}

.prettydropdown.arrow > ul > li.selected:before {
    border-top-color: var( --main-text-color );
}

.prettydropdown > ul.active > li:not(.label):hover, .prettydropdown > ul.active > li.hover:not(.label), .prettydropdown > ul.active > li:first-child:hover:after {
    background: var( --color-aqua );
    color: #fff;
}

/* Helper Classes */

.clickable {
    cursor: pointer;
}

.carousel .arrow, .product-list .arrow {
    background-color: #ffffff;
    border: 3px solid var( --main-text-color );
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.carousel .arrow:hover, .product-list .arrow:hover {
    background-color: #e5635c;
    border: 3px solid #ffd4d3;
}

.carousel .arrow > i, .product-list .arrow > i {
    font-size:1.3rem;
    color: var( --main-text-color );
    margin-top:2px;
}

.carousel .arrow:hover > i, .product-list .arrow:hover > i {
    color: #ffffff;
}

.good {
    color: var( --color-favorite );
}

.bad, .avoid {
    color: var( --color-avoid );
}

.allergy {
    color: var( --color-allergy );
}

.color-aqua {
    color: var( --color-aqua );
}

.color-avoid {
    color: var( --color-avoid );
}

.color-allergy {
    color: var( --color-allergy );
}

.color-avoidallergy {
    color: var( --color-avoidallergy );
}

/* Tiny Slider 2 */

.slider-arrow {
    background-color: #ffffff;
    border: 3px solid var( --main-text-color );
    width: 45px;
    height: 45px;
    cursor: pointer;
    outline: none;
}

.slider-arrow:hover {
    background-color: #e5635c;
    border: 3px solid #ffd4d3;
}

.slider-arrow > i {
    font-size: 1.2rem;
    color: var( --main-text-color );
    margin-top: 2px;
}

.slider-controls > .slider-arrow.prev {
    position: absolute;
    top: 25%;
    left: -15px;
}

.slider-controls > .slider-arrow.next {
    position: absolute;
    top: 25%;
    right: -15px;
}

/* page header */

.page-header {
    background-color: var( --color-deepPink );
    position: relative;
    overflow: hidden;
    color: #fff;
    height: 206px;
}

.page-header .container {
    position: relative;
    height: 100%;
}

.page-header:before {
    content: "";
    display: block;
    position: absolute;
    right: -20px;
    bottom: 0px;
    width: 100%;
    height: 50%;
    background-image: url( '../img/chemical-white.svg' );
    background-position: top right;
    background-repeat: no-repeat;
    opacity: 0.2;
}

.page-header .container:before {
    content: "";
    display: block;
    position: absolute;
    left: -120px;
    top: 0px;
    width: 100%;
    height: 70%;
    background-image: url( '../img/chemical-white.svg' );
    background-position: top left;
    background-repeat: no-repeat;
    opacity: 0.2;
}

.page-header-left-checmical-none .container:before {
    display:none;
}

.page-header-right-checmical-large:before {
    right: 0px;
    height: 100%;
}

.page-header-title {
    font-family: var( --font-futura-bold );
    font-weight: var( --font-futura-bold-weight );
    font-size: 2.0rem;
    line-height: 2.7rem;
    text-shadow: 1px 1px 0px var( --main-text-color );
    text-transform: uppercase;
    color: #fff;
}

/* Plus/Minus More Buttons */

.btn-more, a.btn-more {
    color: var( --color-deepPink );
    font-size: 1.5rem;
}

.btn-more[aria-expanded="false"] i:before {
    content: "\f055"
}

.btn-more[aria-expanded="true"] i:before {
    content: "\f056"
}

/* Dots: numbers in circles */

.dot {
    height: 1.5rem;
    width: 1.5rem;
    background-color: var( --color-aqua );
    border-radius: 100%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 7px;
}

.dot div {
    position: absolute;
    top:50%;
    left:50%;
    transform: translateY( -48% ) translateX( -50% ); /* 48% visually looks better at this font size */
    color: #fff;
    font-weight: var(--main-body-font-weight-bold);
}

/* Utility Classes */

/* Pre-h1 are blocks that appear above h1 tags */
.pre-h1 {
    color: var( --color-deepPink );
    font-size: 0.7rem;
    font-style: italic;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

    .p-md-6 {
        padding: var( --padding-6 )!important;
    }
    .pt-md-6 {
        padding-top: var( --padding-6 )!important;
    }
    .pb-md-6 {
        padding-bottom: var( --padding-6 )!important;
    }

    .tns-slide-active .card {
        border-right: none;
    }
    
    .tns-inner {
        border-right: 1px solid #fff; /* hack to make sure cards always have a 1px right border */
    }

    .slider-arrow {
        width: 50px;
        height: 50px;
    }

    .slider-arrow > i {
        font-size: 1.3rem;
        margin-top: 2px;
    }
    
    .slider-controls > .slider-arrow.prev {
        left: -25px;
    }
    
    .slider-controls > .slider-arrow.next {
        right: -25px;
    }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

    .p-lg-6 {
        padding: var( --padding-6 )!important;
    }
    .pt-lg-6 {
        padding-top: var( --padding-6 )!important;
    }
    .pb-lg-6 {
        padding-bottom: var( --padding-6 )!important;
    }

    .page-header:before {
        right: -20px;
        top: 60px;
        height: 100%;
    }
    
    .page-header .container:before {
        left: -120px;
        top: 0px;
        width: 100%;
        height: 95%;
    }

    .page-header-right-checmical-large:before {
        top: 0px;
        right: 40px;
    }

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 


}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1600px) { 

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1900px) { 

}