﻿#bw {

}


.turq-bg {
    background-color: #44c7dd;
}

.turq {
    color: #44c7dd;
}

.mag-bg {
    background-color: #f50057;
}

.red-bg {
    background-color: #bc252f;
}

.gold-bg {
    background-color: #c49033;
}

.mag {
    color: #f50057;
}

.white {
    color: #FFF;
}

.boxed {
    box-sizing: border-box;
}

.p15 {
    padding: 15px;
}

.uc {
    text-transform: uppercase;
}

.pt-narrow {
    font-family: 'PT Sans Narrow', sans-serif;
}

.f16 {
    font-size: 16px;
}

.f18 {
    font-size: 18px;
}

.fonts-24p {
    font-size: 14px;
}

.f24 {
    font-size: 24px;
}

.f28 {
    font-size: 28px;
}

.f36 {
    font-size: 24px;
}

.f72 {
    font-size: 48px;
}

.f72-zero {
    font-size: 48px;
    line-height: 48px;
}

.charcoal {
    color: #444;
}

.almost-black {
    color: #111;
}

.charcoal-to-orange {
    color: #444;
}

    .charcoal-to-orange:hover {
        color: #ff470f;
    }

.charcoal-to-white {
    color: #444;
}

    .charcoal-to-white:hover {
        color: #FFF;
    }

.charcoal-to-medium {
    color: #444;
}

    .charcoal-to-medium:hover {
        color: #777;
    }

.medium-grey {
    color: #777;
}

.purple {
    color: #6a2c99;
}

.pink-to-charcoal {
    color: #f50057;
}

    .pink-to-charcoal:hover {
        color: #444;
    }

.green-to-charcoal {
    color: #297d3f;
}

    .green-to-charcoal:hover {
        color: #444;
    }

.orange-border-bottom {
    border-bottom: 1px solid #ff470f;
}

.green-border-bottom {
    border-bottom: 1px solid #297d3f;
}

.squiggle {
    background: url(../img/squiggle-charcoal.png) repeat-x;
}

.squiggle-white {
    background: url(../img/squiggle-white.png) repeat-x;
}


.solid-padded-text {
    font-size: 18px;
}

.btn-grey-to-light-grey {
    background: #444 !important;
    color: #FFF !important;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 18px;
    padding-left: 32px;
    padding-right: 32px;
}

    .btn-grey-to-light-grey:hover {
        background: #CCC !important;
        color: #444 !important;
    }

.btn-grey-to-white {
    background: #444 !important;
    color: #FFF !important;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 18px;
    padding-left: 32px;
    padding-right: 32px;
}

    .btn-grey-to-white:hover {
        background: #FFF !important;
        color: #444 !important;
    }


#hero-overlay {
    position: absolute;
    width: 90%;
    height: 90%;
    background-color: rgba(255, 255, 255, 0.7);
    left: 5%;
    top: 5%;
    z-index: 5;
}

#dot_container {
    margin-top: 30px;
}

#hero-banner-intro {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    text-align: center;
    z-index: 10;
    position: relative;
    background-color: rgba(255,255,255,0.8);
    display: inline-block;
    margin: 20px;
    box-sizing: border-box;
    padding: 30px;
}

#hero-banner-intro-text p {
    font-size: 18px;
    line-height: 32px;
}

.grad-purple-blue {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c7c6ff+33,c0ffff+100 */
    background: #c7c6ff; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #c7c6ff 33%, #c0ffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #c7c6ff 33%,#c0ffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #c7c6ff 33%,#c0ffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7c6ff', endColorstr='#c0ffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.grad-red-purple {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffb7b7+0,c1c2ff+100 */
    background: #ffb7b7; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #ffb7b7 0%, #c1c2ff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #ffb7b7 0%,#c1c2ff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #ffb7b7 0%,#c1c2ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb7b7', endColorstr='#c1c2ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.grad-slate-purple {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#606877+0,926593+100 */
    background: #606877; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #606877 0%, #926593 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #606877 0%,#926593 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #606877 0%,#926593 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606877', endColorstr='#926593',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.opac-spot-pink {
    background-color: rgba(245, 0, 87, 0.5);
}

.opac-spot-violet {
    border-radius: 0;
}

.email-prod-reel {
    margin-top: 30px;
}

#email-hero-cont {
    margin-top: 20px;
}

#email-product-highlight {
    margin-top: 20px;
}

#email-product-highlight-l {
    width: 100%;
    margin-bottom: 20px;
    padding: 20px 25px;
}

#email-product-highlight-r {
    width: 100%;
    position: relative;
    min-height: 360px;
}

#email-product-highlight-tit {
    display: inline-block;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-bottom: 12px;
    font-size: 22px;
    width: 100%;
}

#email-product-highlight-spot {
    padding: 50px 30px 0;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    right: calc(100% - 195px);
    top: 0px;
    position: absolute;
}

#email_spotlight_pp {
    font-size: 22px;
    display: none;
}

#email-product-highlight-bn {
    font-size: 18px;
    display: none;
}

#email-product-highlight-buy-btn {
    position: absolute;
    bottom: 0;
    bottom: 50px;
    right: 0;
}

.f28-s {
    font-size: 16px;
    line-height: 16px;
}

#email-product-highlight-btn {
    width: 100%;
}

#email-product-highlight-inn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 20px;
}

#ephl-squig {
    width: 240px;
    height: 15px;
    margin: 30px auto;
}

#ephl-disc {
    width: 100%;
    display: flex;
    align-items: flex-start;
    font-size: 62px;
    line-height: 62px;
    justify-content: center;
}

    #ephl-disc span {
        font-size: 16px;
        line-height: 48px;
        padding-right: 5px;
    }

.fleft {
    width: 100%;
    float: left;
}

#dot-mar {
    margin-top: 30px;
}

#dot-container {
    margin-top: 10px;
}

#email-article-blurb p {
    margin-bottom: 20px;
}

#email-article-l {
    width: 100%;
    min-height: 440px;
    float: left;
    position: relative;
}

#email-article-ll {
    width: 100%;
    margin-left: 0;
    bottom: 0;
    padding: 20px;
    position: absolute;
    background: rgba(60, 220, 247, 0.8)
}

#email-article-r {
    width: 100%;
    background: #FFF;
    position: relative;
}



#email_article_l {
    width: 100%;
    min-height: 440px;
    float: left;
    position: relative;
    z-index: 50;
}

#email-quot {
    font-size: 24px;
}

#email-quot-text {
    display: inline-block;
    margin-left: 10px;
}

#email-testi {
    padding: 15px;
    border-radius: 4px;
    background: #fbf5ff; 
    margin-top: 60px;
}

.email-purp-spot {
    margin: 0;
    padding: 50px 24px 0;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background-color: #6A2C99;
    text-align: center;
    margin-bottom: 20px;
}

#email-sla {
    margin-top: 60px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

#eph-mt {
    border-bottom: solid 1px #444;
    display: inline-block;
    padding-bottom: 10px;
    text-align: center;
    width: 100%;
}

#eph-st {
    margin-top: 15px;
    padding-bottom: 10px;
    width: 100%;
    text-align: center;
}

#brand-staff-pick {
    width: 100%;
    left: 0;
}

    #brand-staff-pick .gen-btn {
        position: relative;
        margin-top: 30px;
        bottom: 0;
        right: 0;
    }

#brand-quick-intro {
    font-family: 'PT Sans Narrow';
    color: #FFF;
    position: relative;
    left: 0;
    top: 0px;
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
}

#brand-cam-shots {
    margin-top: 40px;
}

#lower-reel {
    margin-top: 20px;
}

@media all and (min-width:640px) {

    #hero-banner-intro-text {
        padding-top: 40px;
    }

    #eph-mt {
        text-align: left;
    }

    #eph-st {
        width: 90%;
        text-align: left;
    }

    #ephl-squig {
        margin: 30px 0;
    }

    #ephl-disc {
        justify-content: flex-start;
    }
}

@media all and (min-width:768px) {

    #h_hero_60 {
        width: 80%;
    }
    
    .fonts-24p {
        font-size: 24px;
    }

    .f36 {
        font-size: 36px;
        line-height: 36px;
    }

    .f72 {
        font-size: 72px;
        margin-left: -3px;
    }

    .f72-zero {
        font-size: 72px;
        line-height: 72px;
        margin-left: -3px;
    }

    #hero-banner-intro {
        text-align: center;
    }

    #hero-banner-intro-text {
        line-height: 72px;
    }

        #hero-banner-intro-text p {
            padding-top: 10px;
        }

    #email-product-highlight-buy-btn {
        bottom: 50px;
        right: 70px;
    }

    #email-product-highlight {
        display: flex;
        align-items: center;
    }

    #email-product-highlight-l {
        width: 54%;
        margin-right: 6%;
        margin-bottom: 0;
    }

    #email_article_l {
        min-height: 500px;
    }

    #email-product-highlight-r {
        width: 40%;
        min-height: 360px;
    }

    #email-product-highlight-tit {
        font-size: 28px;
        width: unset;
        border-bottom: 1px solid #FFF;
    }

    #email-product-highlight-bn {
        display: block;
    }

    #email-product-highlight-spot {
        padding: 55px 40px 0;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        left: -140px;
        top: -20px;
        position: absolute;
    }

    #email_spotlight_pp {
        font-size: 28px;
        display: block;
    }

    .f28-s {
        font-size: 28px;
        line-height: 28px;
    }

    #email-product-highlight-btn {
        width: 45%;
    }

    #email-product-highlight-inn {
        float: right;
        margin-top: 0;
    }

    #ephl-squig {
        width: 312px;
    }

    #ephl-disc {
        width: 55%;
        font-size: 48px;
        line-height: 90px;
    }

        #ephl-disc span {
            line-height: 68px;
        }

    #email-article-l {
        min-height: 500px;
    }

    #email-article-r {
        width: calc(40% - 30px);
    }

    #email-quot {
        font-size: 36px;
    }

    #email-quot-text {
        margin-left: 15px;
    }

    #email-testi {
        padding: 20px;
    }

    .email-purp-spot {
        margin: 0;
        margin-bottom: 0;
    }

    #email-sla {
        flex-direction: row;
    }

    #email-product-highlight-spot {
        color: #FFF;
    }

    .opac-spot-violet {
        background-color: rgba(0, 15, 150, 0.5);
    }

    #brand-staff-pick {
        width: calc(63.5% - 75px);
        height: 586px;
        left: 75px;
    }

        #brand-staff-pick .gen-btn {
            position: absolute;
            margin-top: 0;
            bottom: 20px;
            right: 33px;
        }

    #brand-quick-intro {
        font-family: 'PT Sans Narrow';
        color: #FFF;
        left: 24px;
        margin-top: -150px;
        width: calc(36.8% - 24px);
        height: 736px;
        padding: 30px;
        box-sizing: border-box;
    }

    #brand-massive-introduction {
        margin-top: 30px;
    }

    #brand-cam-shots {
        position: relative;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    #lower-reel {
        margin-top: -10px;
    }

    #email-article-r {
        background: linear-gradient(45deg, #E8E8E8 0%,#FAFAFA 100%);
    }

}

@media all and (min-width:1022px) {
    .fleft {
        width: 50%;
        float: left;
    }

    #h_hero_60 {
        width: 70%;
    }

    #dot-mar {
        margin-top: 0;
    }

    #dot-container {
        margin-top: 45px;
    }

    #email-product-highlight-btn {
        width: 40%;
    }

    #ephl-disc {
        width: 60%;
        font-size: 72px;
        line-height: 72px;
    }

        #ephl-disc span {
            line-height: 48px;
        }
}
