/* -------

NAME: bf-styles.css
SITE: CANOPY SAFETY
DESCRIPTION: Custom css applied only for landing pages created by BF for social campaigns - overriding
-------------------------------------

COMPANY: Blue Frontier
AUTHOR: Becky Allenby
DATE CREATED: 19/12/2019
LAST MODIFIED DATE: 20/01/2020
LAST MODIFIED BY: BA

------- */

body {max-height: 100%;}


/* Dual Logo Navigation for Landing Pages - DESKTOP */
#landing-nav-des .bg-blue {background: #3c3d41; left: 0;}
#landing-nav-des .bg-blue {left: auto;}
#landing-nav-des .fixed-logo .canopy {}
#landing-nav-des .fixed-logo .kvf {background: pink !important;}


/* Dual Logo Navigation for Landing Pages - MOBILE */
#landing-nav-mob {display: none;}
#landing-nav-mob .bg-black {background: #3c3d41; display: flex; align-items: center; padding: 5px 15px;}
#landing-nav-mob a {width: 50%;}
#landing-nav-mob a.canopy {padding-right: 20px;}
#landing-nav-mob a.canopy img {float: left;}
#landing-nav-mob a.kvf {padding-left: 20px;}
#landing-nav-mob a.kvf img {float: right; max-height: 85%;}


/* Area Styling - Header Box */
#bf-landing div#banner .vh100 {min-height: 1000px}
#bf-landing #banner .container {z-index: 9; display: flex; align-items: center; flex-wrap: wrap;}
#bf-landing .header-text {padding-right: 3em;}
#bf-landing .header-text h1 {text-align: left; line-height: 1.3em; font-weight: 600; margin-bottom: 0;}
#bf-landing .header-text h3 {text-align: left; font-size: 1.4em; line-height: 1.3em; color: #fff; margin-bottom: 0;}
#bf-landing .header-text p {text-align: left; color: #fff;}
#bf-landing .header-text img.bf-vector {margin-top: 1em; max-width: 100%;}
#bf-landing .background-img:before {opacity: 0.2;}


/* Area Styling - Header Box - Download/Thanks Page */
#bf-landing div.container.thanks {flex-wrap: nowrap !important;}
#bf-landing div.download-btns {display: flex;}
#bf-landing div.download-btns .btn {font-weight: 600; margin-top: 1em; font-size: 1.1rem; margin-right: 10px; max-width: 100%;}
#bf-landing div.download-btns .btn a {color: #fff;}
#bf-landing div.download-btns .btn a:hover {text-decoration: none;}


/* Area Styling - Form Box */
#bf-landing div.form-box {background: rgba(0,0,0,0.40); padding: 2em; text-align: center; -webkit-box-shadow: 10px 10px 30px -13px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 30px -13px rgba(0,0,0,0.75); box-shadow: 10px 10px 30px -13px rgba(0,0,0,0.75); width: 100%; overflow: hidden;}
#bf-landing div.form-box h2 {color: #fff; font-size: 1.9rem; font-weight: 600; line-height: 1.3em;}


/* Area Styling - iFrame */
#bf-landing iframe {width: 100%; height: 350px;}


/* Area Styling - Bottom Section */
#bf-landing #first {display: flex !important; align-items: center; background: #3c3d41; border-bottom: 1px solid #fff; color: #fff;}


/* Area Styling - Benefits Box */
#bf-landing #first .col-12.benefits-box {padding: 15px 0; display: flex; align-items: center;}
#bf-landing #first .benefits h3 {color: #fff; font-size: 1.9rem; font-weight: 600; line-height: 1.3em;}
#bf-landing #first .col-3.image {padding-left: 0;}
#bf-landing #first .col-3.image img {max-width: 100%;}
#bf-landing #first .col-9.benefits-content h4 {font-size: 1.2em; margin-bottom: 0.8rem;}
#bf-landing #first .col-9.benefits-content p {font-size: 0.9rem; margin-bottom: 0;}


/* Area Styling - Bottom Section - Download/Thanks Page */
#bf-landing #first.add-padd {padding: 50px 0 80px 0;}


/* Area Styling - About Box */
#bf-landing #first .about h2 {text-align: left; font-size: 2.5rem; line-height: 1.3em; font-weight: 600; margin-bottom: 0;}
#bf-landing #first .about h3 {text-align: left; font-size: 1.4em; line-height: 1.3em; color: #fff; margin-bottom: 0;}
#bf-landing #first .about p {text-align: left; color: #fff;}
#bf-landing #first .about .btn {font-weight: 600; margin-top: 1em;}
#bf-landing #first .about .btn a {color: #fff;}
#bf-landing #first .about .btn a:hover {text-decoration: none;}



/* MEDIA QUERIES */

/* Execute mobile nav earlier */
@media only screen 
and (max-width: 1140px) {
    #landing-nav-des {display: none;}
    #landing-nav-mob {display: block;}
    #mc_embed_signup .button {font-size: 17px !important;}
}

/* All screens 991px and below */
@media only screen 
and (max-width: 991px) {
    #bf-landing .header-text {padding-right: 2em;}
    #bf-landing #first .container {padding-top: 0 !important;}
    #bf-landing .vh100 {min-height: 110vh;}
    #bf-landing div.container.thanks, #bf-landing div.download-btns {flex-wrap: wrap !important;}
    #mc_embed_signup .button {font-size: 14px !important;}
}


/* All screens 767px and below */
@media only screen 
and (max-width: 767px) {
    #bf-landing #banner .container {width: 100%;}

    #bf-landing .col-12, #bf-landing .col-11, #bf-landing .col-10, #bf-landing .col-9, #bf-landing .col-8, 
    #bf-landing .col-7, #bf-landing .col-6, #bf-landing .col-5, #bf-landing .col-4, #bf-landing .col-3, #bf-landing .col-2, #bf-landing .col-1 {
        flex: 100%; 
        max-width: 100%;
    }
    #bf-landing .header-text {padding-right: 15px;}
    #bf-landing .header-text img.bf-vector {display: none;}
    #bf-landing #first .container {flex-direction: column-reverse; padding: 0 !important;}
    #bf-landing #first.add-padd {padding: 0px 0 80px 0;}
    #bf-landing #first .container.cta {flex-direction: column; padding: 0 15px !important;}
    #bf-landing #first .col-4.about.text-right {text-align: left !important;}
    #bf-landing div.download-btns .btn {font-size: 0.95rem;}
    #bf-landing iframe {height: 320px; padding: 20px 0;}
    #bf-landing #first .col-3.image {flex: 30%; max-width: 30%;}
    #bf-landing #first .col-9.benefits-content {flex: 70%; max-width: 70%;}
    #bf-landing div.form-box {margin: 40px 15px 50px 15px;}
    #bf-landing #first .benefits {margin: 70px 0px 60px 0px;}
} 

/* All screens 480px and below */
@media only screen 
and (max-width: 480px) {
    #bf-landing #first .col-3.image {flex: 50; max-width: 100%;}
    #bf-landing #first .col-9.benefits-content {flex: 100; max-width: 100%;}
}