/*
 Theme Name:   MagmaLeads2016
 Theme URI:    https://magmaleads.be
 Description:  Theme for Magma Leads Landing Pages
 Author:       Kristoff Henry
 Author URI:   https://magnetischemarketing.be
 Template:     Divi
 Version:      1.0.3
*/

/* ------------------- Homepage styling -------------------- */

html {
    height: 100%;
}

body.home {
    min-height: 100%;
    background: #00c3aa;
}

#home {
    font-family: 'Roboto', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 300;

    text-align: center;
    min-height: 100%;
}

#home .site-inner {
    padding: 50px 20px 120px 20px;
}

#home .et_pb_column {
    background: #00ab94;
    padding: 30px 20px 40px 20px;
}

#home h2 {
    font-family: 'Roboto', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight:400 !important;
}


#home .site-branding {
    color: #fff;
}

#home .site-branding h1 {
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    font-size: 280%;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: #fff;
}

#home .site-description-sub {
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
    padding: 20px 20px 40px 20px;
}

/* ----- No sidebar on all templates ------ */

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
 
/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}


/* ---------- Vertically align any element -------*/

.magma-vertical-align { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
} 

/* ----------------- Gravity Forms styling ----------------- */

/* Add a CSS ID 'gravity_form' to divi module ! */

#gravity_form .gform_wrapper li {
    padding: 0; 
    margin-bottom: 10px;
}

#gravity_form .gform_wrapper li .ginput_container {
    padding: 3px 0;
    margin-top: 0px;
}

#gravity_form .gform_body input {
    background-color: #fff;
    border: 1px solid #e1e1e1;
    color: #919191;
    font-size: 14px;
    padding: 8px;
    height: 34px !important;
    width: 100%;
}

/* Create small space between two fields on 1 line */
#gravity_form .gform_body .ginput_left input {
    width: 98.5%;   
}

/* Spacing between adress lines to improve readability */
#gravity_form .gform_body .ginput_complex span label {
    margin-bottom:14px;
}

/* Styling of form Footer that contains button */
#gravity_form .gform_footer {
    margin-top: 30px;
}

/* Styling of submit button */
#gravity_form .gform_footer .gform_button {
    background-color: #009BE2;
    color: #ffffff;
    border-color: #000066;
    width: 100%;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 18px;
}

/* Styling of consent checkbox - move asterix behind label */

#gravity_form .magma_consent {
    margin-top: 0;
}
#gravity_form .magma_consent>label {
    display: none;
}

/* */
#gravity_form.btn_green .gform_footer .gform_button {
    background-color: #25bc4b;
}

#gravity_form .magma_hide_label div label {
    display: none;
}

/* Styling error messages for not filled in but required fields */
#gravity_form .gform_body .gfield_error input {
    background-color: #faa;
    color: #333;
}

#gravity_form .gform_body div.validation_message {
    color:#f00;
    background-color: #fff;
    padding: 2px !important;
}

#gravity_form .gform_wrapper span.ginput_product_price {
    color: #ffffff;
    font-weight: bold;
    font-size: 120%;
}

#gravity_form .gform_wrapper .top_label span.ginput_total {
    color: #F6D971;
    font-weight: bold;
    font-size: 120%;
}

.gform_wrapper.gf_browser_chrome ul.gform_fields li.gfield input[type=radio] {
    margin-left: 2px !important;
}

/* ----------------- End of Gravity Forms styling ----------------- */

/* ------------Additional Gravity Forms styling for inline forms  ---*/
/* Add class magma_gf_inline to the form settings
   Add class gf_left_half and gf_right_half to the two fields
*/

.magma_form_centered li input {
    padding: 10px !important;
    width: 100% !important;
        margin: 0 auto !important;
}

@media only screen and ( min-width: 769px ) {
    .magma_form_centered li input {
        width: 80%;
    }
}

.magma_form_centered .gform_footer input[type=submit] {
    float: none !important;
    margin: 0 auto !important;
    
}

.magma_gf_inline .gform_body {
    width: 100%;
    display: inline-block;
    vertical-align: top;
}

@media only screen and ( min-width: 769px ) {
    .magma_gf_inline .gform_body {
        width: 74%;
    }
}

.magma_gf_inline .gform_body {
    margin-bottom: 0;
}


.magma_gf_inline .gform_footer {
    display: inline-block;
    width: 25% !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: top;
}

.magma_gf_inline .gform_footer input.gform_button {
    margin-top: 17px !important;
    padding-top: 7px!important;
    padding-bottom: 7px!important;
    border-width: 1px !important;
    width: 100%;
}


.magma_gf_inline .gform_body .ginput_complex span {
    padding-top: 0 !important;
}


/* ------------ Gravity Forms Button Color Stylings  -----*/
/* Add class to form settings */

.magma_gf_button_lime input.gform_button {
    color: #57472D !important;
    background-color: #D3E645 !important;
    border-color: #D3E645 !important;
}

.magma_gf_button_dark-orange input.gform_button {
    color: #57472D !important;
    background-color: #cb6601 !important;
    border-color: #fff !important;
}

.magma_gf_button_light-transparent input.gform_button {
    color: #fff !important;
    background-color: transparent !important;
    border-color: #fff !important;
}

/* ------------ Gravity Forms Radio Button Inline Stylings  -----*/
/* Add class to form settings */

.magma_gf_radio_inline li {
    display: table;
    width: 5%;
    min-width: 30px;
    float: left;
    text-align: center;
}

.magma_gf_radio_inline li input {
    display: table-footer-group !important;
    margin-bottom: 4px;
}

.magma_gf_radio_inline li label {
    display: table-header-group !important;
}


/* ----------------- List styling ----------------- */

/* add "check-marks" CSS class  */
.check-marks li {
    list-style-type: none;
    position: relative;
    margin-bottom: 20px !important;
    margin-left: 5px !important; 
    line-height: 1.3;   
}

.check-marks li:before {
    content: '\4e';
    position: absolute;
    font-family: 'ETmodules';
    left: -25px;
    color: #009be2;
} 

.check-marks-green li:before {
    color: green;
}

.check-marks-red li:before {
    color: red;
}

.check-marks-bold li:before {
    font-weight: bold;
}

/* ----------------- Disclaimer styling ----------------- */

/* add "disclaimer" CSS class  */

.disclaimer {
    position: relative;
    padding-left: 35px;
}

.disclaimer:before {
    content: '\e06e';
    position: absolute;
    font-family: 'ETmodules';
    left: 0;
    top: 8px;
    color: #aaaa00;
    font-size: 200%;
}

/* ----- Blurb styling to align buttons to bottom  ------ */

.blurb_sunk_buttons {
    position: relative;
}

.blurb_sunk_buttons .et_pb_button_module_wrapper {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}


/* ----------------- Global styling ----------------- */

/* Make full use of available width on small screens */

@media only screen and (max-width: 980px) {
    .et_pb_row {
        width: 100%;
    }
}

/* ----------------- Legacy styling ----------------- */
    
/* gravity forms styling */
/* Add a CSS ID 'gravity_form' to divi module ! */

/*#gravity_form .gform_wrapper li {
    padding: 3px 0;
    margin-bottom: 10px;
}*/

#gravity_form .gform_body input {
    background-color: #fff;
    border: 1px solid #e1e1e1;
    color: #919191;
    font-size: 14px;
    padding: 8px;
    height: 34px !important;
    width: 100%;
}

#gravity_form .gfield_radio label {
    padding-top: 11px;
    
}

#gravity_form .gform_body input[type="radio"] {
    width: auto !important;
}

/* Create small space between two fields on 1 line */
#gravity_form .gform_body .ginput_left input {
    width: 98.5%;   
}

/* Spacing between adress lines to improve readability */
#gravity_form .gform_body .ginput_complex span label {
    margin-bottom:14px;
}

/* Styling of form Footer that contains button */
#gravity_form .gform_footer {
    margin-top: 30px;
}

/* Styling of submit button */
#gravity_form .gform_footer .gform_button {
    background-color: #F6921E;
    color: #ffffff;
    border-color: #F6921E;
    width: 100%;
    text-align: center;
    border-radius: 5px;
    
}

#gravity_form.btn_green .gform_footer .gform_button {
    background-color: #25bc4b;
}

#gravity_form .magma_hide_label div label {
    display: none;
}

/* Styling error messages for not filled in but required fields */
#gravity_form .gform_body .gfield_error input {
    background-color: #faa;
    color: #333;
}

#gravity_form .gform_wrapper div.validation_error {
    color: #fff;
    border-top: 1px dashed #fff;
    border-bottom: 1px dashed #fff;
}

#gravity_form .gform_body div.validation_message {
    color:#f00;
    background-color: #fff;
    padding: 2px !important;
}

#gravity_form .gform_wrapper select {
    height: 34px;
}

#gravity_form .gform_footer.top_label {
    margin-top: 0;
}

/*  Landing Pages Elements
    specific styling        */

#cta-row.cta-style1 .et_pb_column:last-child {
    background: #01538f;
}

#cta-row .et_pb_column:last-child .et_pb_blurp_container h4 {
    text-align: center !important;
}

/*  Custom symo styling        */

.et_pb_moduleSmodal {
    text-align: center;
}

.et_pb_moduleSmodal a {
    color: #fff !important;
    background-color: #f36a1b !important;
    border-color: #f36a1b !important;
}

.et_pb_moduleSmodal a:hover {
        background-color: rgba(243, 106, 27,0.75) !important;
}

/* ----------- ActiveCampaign Preference Center Styling ------------ */


    .ac-preference-center {
        border:2px solid #eee;
        padding:20px;
        margin-bottom:20px;
    }

    .ac-welcome-text h3 {
        font-size: 20px;
        line-height: 120%;
        padding-bottom: 40px;
    }

    .ac-list {
        border-bottom: 1px dotted #ccc;
        padding-bottom:10px;
        margin-bottom:20px;
    }

    .ac-list:last-child {
        border-bottom: none;
    }

    .ac-list-title {
        color:green;
        font-weight:bold;
    }

    .ac-action-text {
        display:block;
        font-weight:normal;
        font-size:13px;
        font-style: italic;
        margin-left: 22px;
    }

    .ac-success {
        color: green;
    }

    .ac-error {
        color: red;
    }

.ac-email-container input[type=email] {
    margin-top: 20px;
    margin-bottom: 40px;
}

.ac-preference-center-form .ac-save-button,
.ac-email-container input[type=submit] {
    display: block;
    background-color: limegreen;
    border: none;
    padding: 10px 15px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    color: white;
    font-weight: bold;
}

.ac-preference-center-form .ac-save-button:hover {
    background-color: darkgreen;
}

/* -------- Shopify Frame styling --------- */

.shopify-buy-frame { /* Centers the Frame */
    margin-left:auto;
    margin-right: auto;
}

/* ----- YouTube responsive embed  ----- */
/* Responsive Youtube video embed in avia codeblock */

/*.fluid-width-video-wrapper {
    padding-bottom: 56.25% !important;
    padding-top: 0 !important;
   
}*/

/*.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}*/


/* ----------------- Incompatibility fixes between
DIVI Overlays en Gravity Forms Divi Styling Add-On ----------------- */

body .gform_wrapper .gf_progressbar_percentage {
    height: 24px;
}

body .gform_wrapper .gf_progressbar_percentage span {
    margin-top: 0;
}


/* ----------------- Replacement CSS for Gravity Forms Divi Styling Add-On ----------------- */

/*** REMOVE LABEL ON FIELDS USING PLACEHOLDER ***/
.gform_wrapper .top_label .gfield_label,
.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label {
 display: none;
}
/*** FIELD STYLING ***/
input[type=text],
textarea {
 background: #eee;
 border: none;
 border-radius: 0;
 color: #999 !important;
 padding: 15px !important;
}
/*** BUTTON STYLING ***/
.gform_wrapper .gform_footer input.button {
 float: right;
 background: transparent;
 border: 2px solid #2ea3f2;
 font-size: 22px;
 color: #2ea3f2;
 padding: 12px 23px;
 border-radius: 5px;
 letter-spacing: 2px;
 cursor: pointer;
}
/*** BUTTON HOVER STYLING ***/
.gform_wrapper .gform_footer input.button:hover {
 background: rgba(0, 0, 0, 0.05);
 border: 2px solid transparent;
}