body {
    background-color: #EEEFF7;
    font-size: 1.15rem;
    font-family: 'Dosis', sans-serif;
    line-height: 1.3em;
    color: #3D393A;
    margin: 0px;
    padding: 0px;
}

a, a.badge {
    text-decoration: none !important;
    color: #EF4138;
}

    a:hover, a.badge:hover {
        text-decoration: none !important;
        color: #f15b2b;
        border-bottom: 1px dashed #f15b2b;
    }

.text-primary {
    color: #e9352c !important;
}

.border-primary {
    border-color: #e9352c !important;
}

.bg-primary {
    background-color: #e9352c !important;
}

.bg-accent-gradient {
    background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
}

.bg-accent-gradient-2 {
    background-image: linear-gradient(-20deg, #45584D 0%, #303B39 100%);
}

.bg-accent-gradient-3 {
    background-image: linear-gradient(-20deg, #016367 0%, #01455E 100%);
}

.bg-accent-gradient-4 {
    background-image: linear-gradient(-20deg, #3B373C 0%, #2F2F30 100%);
}

.form-check-input {
    border: 1px solid #CCCCCC;
}

/*Global Headings*/
h1 {
    font-weight: 700;
    line-height: 1em;
    font-size: 2.6rem;
    font-family: 'Barlow Condensed', sans-serif;
    color: #3D393A;
}

.hero-card h2 {
    font-weight: 700;
    line-height: 1em;
    font-size: 2.5rem;
    font-family: 'Barlow Condensed', sans-serif;
    color: #3D393A;
}

h2 {
    font-size: 2.4rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    color: #EF4138;
    line-height: 1.1em;
}

h3 {
    font-size: 1.8rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 400;
    color: #EF4138;
}

h4 {
    font-size: 1.4rem;
    font-weight: 400;
    color: #EF4138;
}

h5 {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px dashed #8A8A8A !important;
    padding-bottom: 5px;
    letter-spacing: .05em;
}

    h5.h5-light {
        border-bottom: 1px dashed #FFFFFF !important;
    }

h6 {
    text-transform: uppercase;
    font-size: .9rem;
    font-weight: 300;
    letter-spacing: .05rem
}

.acrylic {
    backdrop-filter: blur(3px) saturate(100%);
    background-color: rgba(255,255,255,.15);
}

    .acrylic:hover {
        backdrop-filter: blur(6px) saturate(100%);
        background-color: rgba(0,0,0,.2);
    }

.globalIcons .acrylic {
    backdrop-filter: blur(3px) saturate(100%);
    background-color: rgba(255,255,255,.15);
}

    .globalIcons .acrylic:hover {
        backdrop-filter: blur(6px) saturate(100%);
        background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
        background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
        background-image: linear-gradient(to top, #dad4ec 0%, #dad4ec 1%, #f3e7e9 100%);
    }

.acrylic-dark {
    backdrop-filter: blur(6px) saturate(100%);
    background-color: rgba(0,0,0,.2);
}

.border-dashed {
    border: 1px dashed #8A8A8A !important;
}

.star {
    font-size: .8rem;
    margin-right: 1px;
    color: #FFBB00;
}

/*Hero Cards*/
.hero h1 {
    font-weight: 700;
    line-height: 1.2em;
    font-size: 2.2rem;
    font-family: 'Barlow Condensed', sans-serif;
    color: #3D393A;
}

.hero h4 {
    font-size: 1.25rem;
    font-family: 'Dosis', sans-serif;
    font-weight: 500;
    color: #EF4138;
}

.hero a p {
    font-size: 1.2rem;
    line-height: 1.2em;
    color: #7E7E7E;
    font-family: 'Dosis', sans-serif;
}

@media (min-width: 768px) {
    .hero-card, .hero-card img, .hero-card h1 {
        transition: all .6s ease-out;
        transform-origin: 50% 50%;
    }

        .hero-card:hover {
            -webkit-transform: translate(0px, 0px) scale(1.05,1.05);
            transform: translate(0px, 0px) scale(1.05,1.05);
            -webkit-box-shadow: 0px 40px 300px 0px rgba(0,0,0,.5) !important;
            -moz-box-shadow: 0px 40px 300px 0px rgba(0,0,0,.5) !important;
            box-shadow: 0px 40px 300px 0px rgba(0,0,0,.5) !important;
            cursor: pointer;
            -webkit-font-smoothing: subpixel-antialiased;
        }

            .hero-card:hover img {
                -webkit-transform: translate(0px, 0px) scale(1.2,1.2);
                transform: translate(0px, 0px) scale(1.2,1.2);
            }

    .hero-col-1:hover, .hero-col-2:hover, .hero-col-3:hover {
        z-index: 1;
        position: relative;
    }

    .hero-card-1:hover {
        -webkit-transform: translate(0px, 0px) scale(1.15,1.15) rotate(-1.5deg);
        transform: translate(0px, 0px) scale(1.15,1.15) rotate(-1.5deg);
        z-index: 10 !important;
    }

    .hero-card-2:hover {
        -webkit-transform: translate(0px, 0px) scale(1.15,1.15) rotate(0deg);
        transform: translate(0px, 0px) scale(1.15,1.15) rotate(0deg);
        z-index: 0 !important;
    }

    .hero-card-3:hover {
        -webkit-transform: translate(0px, 0px) scale(1.15,1.15) rotate(1.5deg);
        transform: translate(0px, 0px) scale(1.15,1.15) rotate(1.5deg);
        z-index: 0 !important;
    }
}

/*Location Cards*/
.location-card-item {
    z-index: 0 !important;
}

    .location-card-item:hover {
        z-index: 100 !important;
    }

    .location-card-item h2 {
        font-weight: 700;
        line-height: 1.2;
        color: inherit;
        font-size: 1rem;
        letter-spacing: .01rem;
    }

    .location-card-item .location-address {
        font-size: .8rem;
        color: #6c757d;
        font-family: 'Open Sans', sans-serif;
    }


/*Color Cards*/
.color-cards .card, .surface-cards .color-item .card {
}

.color-cards h1 {
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    font-size: 1.6rem;
    font-family: 'Varela Round', sans-serif;
    letter-spacing: .04rem;
    margin-bottom: 18px;
}

.color-cards .color-item a p, .surface-cards .color-item a p {
    color: #FFFFFF;
    font-size: .8rem;
    line-height: .8rem;
}

.color-cards .color-item a:hover, .surface-cards .color-item a:hover {
    color: #FFFFFF;
}

/*logo Cards*/
.logo-hover {
    transition: all .6s ease-out;
    transform-origin: 50% 50%;
}

    .logo-hover:hover {
        -webkit-transform: translate(0px, 6px) scale(1.15,1.15);
        transform: translate(0px, 6px) scale(1.15,1.15);
        -webkit-box-shadow: 0px 30px 60px 0px rgba(89,37,23,.45) !important;
        -moz-box-shadow: 0px 30px 60px 0px rgba(89,37,23,.45) !important;
        box-shadow: 0px 30px 60px 0px rgba(89,37,23,.45) !important;
        cursor: pointer;
        -webkit-font-smoothing: subpixel-antialiased;
        z-index: 100 !important;
        backdrop-filter: blur(5px) saturate(100%);
        background-color: rgba(255,255,255,.20);
    }

/*Hover Cards*/
.card-hover, .card-hover img, .card-hover-left img, .card-hover-center img, .card-hover-center-partner img, .swatch-hover-center, .swatch-hover-center img, .swatch-hover {
    transition: all .6s ease-out;
    transform-origin: 50% 50%;
}

    .card-hover:hover {
        -webkit-transform: translate(0px, 0px) scale(1.05,1.05) rotate(2deg);
        transform: translate(0px, 0px) scale(1.05,1.05) rotate(2deg);
        -webkit-box-shadow: 0px 20px 40px 0px rgba(0,0,0,.20) !important;
        -moz-box-shadow: 0px 20px 40px 0px rgba(0,0,0,.20) !important;
        box-shadow: 0px 20px 40px 0px rgba(0,0,0,.20) !important;
        cursor: pointer;
        -webkit-font-smoothing: subpixel-antialiased;
        z-index: 100 !important;
    }

        .card-hover:hover .card-border {
            margin-top: -25px;
            margin-left: -25px;
            border: 1px dashed #e9352c !important;
            -webkit-animation: spin .6s linear both;
            -moz-animation: spin .6s linear both;
            animation: spin 1s .6 linear both;
            pointer-events: none !important;
        }

        .card-hover:hover img {
            -webkit-transform: translate(0px, -25px) scale(1.5,1.5);
            transform: translate(0px, 25px) scale(1.2,1.2);
            z-index: 0 !important;
        }

.card-hover-left {
    transition: all .6s ease-out;
    transform-origin: 50% 50%;
}

    .card-hover-left:hover {
        -webkit-transform: translate(0px, 0px) scale(1.05,1.05) rotate(-2deg);
        transform: translate(0px, 0px) scale(1.05,1.05) rotate(-2deg);
        -webkit-box-shadow: 0px 20px 40px 0px rgba(0,0,0,.20) !important;
        -moz-box-shadow: 0px 20px 40px 0px rgba(0,0,0,.20) !important;
        box-shadow: 0px 20px 40px 0px rgba(0,0,0,.20) !important;
        cursor: pointer;
        -webkit-font-smoothing: subpixel-antialiased;
        z-index: 100 !important;
    }

        .card-hover-left:hover img {
            -webkit-transform: translate(0px, -25px) scale(1.5,1.5);
            transform: translate(0px, 25px) scale(1.2,1.2);
            z-index: 0 !important;
        }

.card-hover-center, .card-hover-center-partner, .swatch-hover-center {
    transition: all .6s ease-out;
    transform-origin: 50% 50%;
}

    .card-hover-center:hover {
        -webkit-transform: translate(0px, 0px) scale(1.3,1.3);
        transform: translate(0px, 0px) scale(1.3,1.3);
        -webkit-box-shadow: 0px 50px 75px 0px rgba(0,0,0,.80) !important;
        -moz-box-shadow: 0px 50px 75px 0px rgba(0,0,0,.80) !important;
        box-shadow: 0px 50px 75px 0px rgba(0,0,0,.80) !important;
        cursor: pointer;
        -webkit-font-smoothing: subpixel-antialiased;
        z-index: 100 !important;
    }

    .swatch-hover-center:hover {
        -webkit-transform: translate(0px, 0px) scale(1.2,1.2);
        transform: translate(0px, 0px) scale(1.2,1.2);
        -webkit-box-shadow: 0px 50px 75px 0px rgba(0,0,0,.80) !important;
        -moz-box-shadow: 0px 50px 75px 0px rgba(0,0,0,.80) !important;
        box-shadow: 0px 50px 75px 0px rgba(0,0,0,.80) !important;
        cursor: pointer;
        -webkit-font-smoothing: subpixel-antialiased;
        z-index: 100 !important;
    }

        .card-hover-center:hover img, .swatch-hover-center:hover img {
            -webkit-transform: translate(0px, 25px) scale(1.4,1.4);
            transform: translate(0px, 25px) scale(1.4,1.4);
            z-index: 0 !important;
        }


    .card-hover-center-partner:hover {
        -webkit-transform: translate(0px, 0px) scale(1.1,1.1);
        transform: translate(0px, 0px) scale(1.1,1.1);
        -webkit-box-shadow: 0px 20px 40px 0px rgba(0,0,0,.80) !important;
        -moz-box-shadow: 0px 20px 40px 0px rgba(0,0,0,.80) !important;
        box-shadow: 0px 20px 40px 0px rgba(0,0,0,.80) !important;
        cursor: pointer;
        -webkit-font-smoothing: subpixel-antialiased;
        z-index: 100 !important;
    }

        .card-hover-center-partner:hover img {
            -webkit-transform: scale(1.1,1.1);
            transform: scale(1.1,1.1);
            z-index: 0 !important;
        }

.swatch-hover {
    transition: all .6s ease-out;
    transform-origin: 50% 50%;
}

    .swatch-hover:hover {
        -webkit-transform: translate(0px, 0px) scale(2.25,2.25);
        transform: translate(0px, 0px) scale(2.25,2.25);
        -webkit-box-shadow: 0px 20px 40px 0px rgba(0,0,0,.20) !important;
        -moz-box-shadow: 0px 20px 40px 0px rgba(0,0,0,.20) !important;
        box-shadow: 0px 20px 40px 0px rgba(0,0,0,.20) !important;
        cursor: pointer;
        -webkit-font-smoothing: subpixel-antialiased;
        z-index: 100 !important;
    }

/*Article Timeline ---------------------------------------------------------------------------*/
/*Article Item*/
.article-item {
    /*    color: #6c757d;
    font-size: .9rem;
    font-weight: 400;*/
}

/*    .article-item h1 {
        font-weight: 800;
        line-height: 1.3;
        font-size: 2rem;
        color: #333333;
    }

    .article-item h2 {
        font-weight: 400;
        font-size: .8rem;
    }

    .article-item p {
        color: #6c757d;
        font-size: .9rem;
        font-weight: 400;
    }

    .article-item h1 a:hover {
        border-bottom: 2px solid #0284cf;
    }*/


/*Product Activity Actions*/
/*.article-footer-date {
}

    .article-footer-date h3 {
        font-weight: 400;
        line-height: 1.2;
        font-size: .7rem
    }

.article-footer-avatar {
    max-width: 38px;
}*/

/*END Product Timeline ---------------------------------------------------------------------------*/



/*Product Timeline ---------------------------------------------------------------------------*/
/*Product Activity Item*/
/*.product-milestone-details-item {
    color: #6c757d;
    font-size: .9rem;
    font-weight: 400;
}

    .product-milestone-details-item h1 {
        font-weight: 800;
        line-height: 1.2;
        font-size: 2rem;
        color: #333333;
    }

    .product-milestone-details-item h2 {
        font-weight: 400;
        font-size: .8rem;
    }

    .product-milestone-details-item p {
        color: #6c757d;
        font-size: .9rem;
        font-weight: 400;
    }*/


/*Product Activity Actions*/
/*.product-milestone-details-footer-date {
}

    .product-milestone-details-footer-date h3 {
        font-weight: 400;
        line-height: 1.2;
        font-size: .7rem
    }

.product-milestone-details-footer-avatar {
    max-width: 38px;
}*/
/*END Product Timeline ---------------------------------------------------------------------------*/

/*Article Timeline ---------------------------------------------------------------------------*/
/*Article Item Details*/
/*.article-details-item {
    color: #6c757d;
    font-size: .9rem;
    font-weight: 400;
}

    .article-details-item h1 {
        font-weight: 800;
        line-height: 1.2;
        font-size: 2rem;
        color: #333333;
    }

    .article-details-item h2 {
        font-weight: 400;
        font-size: .8rem;
    }

    .article-details-item p {
        color: #6c757d;
        font-size: .9rem;
        font-weight: 400;
    }*/

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(-6.5eg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(-6.5deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(-6.5deg);
        transform: rotate(-6.5deg);
    }
}

/*Article Timeline ---------------------------------------------------------------------------*/
/*Article Item*/
.product-article-details-item {
    color: #6c757d;
    font-size: .9rem;
    font-weight: 400;
}

    .product-article-details-item h1 {
        font-weight: 800;
        line-height: 1.2;
        font-size: 2rem;
        color: #333333;
    }

    .product-article-details-item h2 {
        font-weight: 400;
        font-size: .8rem;
    }

    .product-article-details-item p {
        color: #6c757d;
        font-size: .9rem;
        font-weight: 400;
    }

/*Experts*/
.expert p {
    font-size: 1rem;
    line-height: 1.3em;
}

/*Testimonials*/
.testimonial p {
    font-size: 1rem;
    line-height: 1.3em;
}

/*Footer*/
.footer-site-brand {
    color: #FFFFFF !important;
    letter-spacing: .25rem;
    font-weight: 300
}

a.footer-site-brand:hover {
    text-decoration: none
}

.footer-site-brand .logo-text {
    letter-spacing: normal;
    font-weight: 300;
    margin-left: -2px;
    font-size: 1.2rem;
    vertical-align: -4px;
}

.footer-logo-mark {
}

footer h5 {
    text-transform: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01rem;
}

footer ul {
    margin: 0 0 !important;
}

    footer ul li {
        padding: 5px 0;
        font-size: .85rem;
        margin: 0 0 0 0 !important;
    }

footer a {
    color: #f89521;
}

footer ul li a:hover {
    text-decoration: none;
    color: #f15b2b;
}



/* change transition duration to control the speed of fade effect */
/*Global Slideshow Settings*/
.carousel-item {
    transition: transform 4.8s ease-in-out;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
    transition: opacity 0s 4.8s;
}

.color-detail .carousel-item {
    transition: transform .8s ease-in-out !important;
}

.color-detail .carousel-fade .active.carousel-item-start,
.color-detail .carousel-fade .active.carousel-item-end {
    transition: opacity 0s .8s !important;
}

/*Inspiration Slideshow Settings*/
.location-card-item .carousel-item {
    transition: transform .8s ease-in-out;
}

.location-card-item .carousel-fade .active.carousel-item-start,
.location-card-item .carousel-fade .active.carousel-item-end {
    transition: opacity 0s .8s;
}


.markdown {
    padding: 0;
    margin: 0px 0 16px 0;
    text-align: left;
    line-height: 1.5rem;
    /*white-space: pre-line;*/
}

    /*Markdown Styles*/
    .markdown img {
        width: 100%;
    }

    .markdown h1 {
        font-weight: 600;
        line-height: 1.1em;
        font-size: 2rem;
        font-family: 'Barlow Condensed', sans-serif;
        color: #3D393A;
    }

    /*        .markdown h1:first-child {
            display: none;
        }*/

    .markdown h2 {
        font-size: 1.5rem;
        font-family: 'Barlow Condensed', sans-serif;
        font-weight: 400;
        color: #EF4138;
        line-height: 1.1em;
    }

    .markdown h3 {
        font-size: 1.1rem;
        font-family: 'Barlow Condensed', sans-serif;
        font-weight: 400;
        color: #EF4138;
        line-height: 1.1em;
    }

    /*
    .markdown h4 {
        border: none;
        font-size: 1.1rem;
        font-weight: 600;
        line-height: 1.8rem;
        color: unset;
        margin-bottom: auto;
        font-family: 'Barlow Condensed', sans-serif;
    }

    .markdown h5 {
        margin-bottom: 0.5rem;
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 1.4rem;
        text-transform: none;
        letter-spacing: normal;
        color: #333333;
        margin-bottom: -10px;
    }

    .markdown h6 {
        text-transform: none;
        letter-spacing: normal;
        margin-bottom: 0.75rem;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.1rem;
        color: #333333;
        margin-bottom: -10px;
    }*/

    .markdown p {
        /*        padding: 0;
        margin: 0px 0 0px 0;*/
        text-align: left;
        font-size: 1.1rem;
        line-height: 1.35em;
    }

    .markdown a {
        text-decoration: none !important;
        color: #ef4138;
        font-weight: 500;
    }

        .markdown a:hover {
            text-decoration: none !important;
            color: #f15b2b;
            border-bottom: 1px dashed #f15b2b;
        }

    .markdown blockquote {
        border-left: 3px solid #CCC;
        margin-left: 22px;
        margin-right: 15px;
        padding-left: 13px;
    }

    .markdown code {
        padding: 10px 15px;
        background: #f8f8f8;
        display: block;
        border-radius: 8px;
        border: 2px dotted #CCC;
        margin-top: 13px;
    }

    .markdown b, strong {
        font-weight: 600;
    }

    .markdown ul {
        padding-left: 40px;
        /*        margin-bottom: 0px;*/
    }

    .markdown ol {
        padding-left: 40px;
        list-style-type: decimal;
        line-height: .8rem;
    }

    .markdown ul li {
        line-height: 1.4rem;
        padding: 0;
        margin-bottom: 8px;
    }

    .markdown ol li {
        line-height: 1.4rem;
        padding: 0;
        margin-bottom: 8px;
    }

    .markdown hr {
        border-top: 1px solid rgba(0, 0, 0, 0.2);
        display: none !important;
    }

/*Markdown Styles*/

/*RESPONSIVE*/
@media (max-width: 574px) {
    .home-cards {
        max-width: 94%;
    }

    .swatch-hover-center:hover {
        -webkit-transform: translate(0px, 0px) scale(1.1,1.1);
        transform: translate(0px, 0px) scale(1.1,1.1);
    }
}

@media (min-width: 575px) {
    .home-cards {
        max-width: 75%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .home-cards {
        max-width: 75%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .home-cards {
        max-width: 95%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .home-cards {
        max-width: 95%;
    }
}

/* Extra large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) {
    .home-cards {
        max-width: 90%;
    }
}

/* Extra large devices (large desktops, 1500px and up) */
@media (min-width: 1500px) {
    .home-cards {
        max-width: 95%;
    }
}

/* Extra large devices (large desktops, 1600px and up) */
@media (min-width: 1600px) {
    .home-cards {
        max-width: 90%;
    }
}

/* Extra large devices (large desktops, 1700px and up) */
@media (min-width: 1700px) {
    .home-cards {
        max-width: 85%;
    }
}

/* Extra large devices (large desktops, 1800px and up) */
@media (min-width: 1800px) {
    .home-cards {
        max-width: 70%;
    }
}