/* =========================================================
   BROCHURE POPUP - COMPLETE CSS
========================================================= */


/* =========================================================
   BODY LOCK
========================================================= */

html.brochure-popup-open,
body.brochure-popup-open {

    overflow: hidden !important;

    height: 100% !important;

}


/* =========================================================
   MAIN MODAL
========================================================= */

#brochureModal {

    display: none;

    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 2147483647 !important;

    overflow: hidden !important;

    box-sizing: border-box;

}


/* =========================================================
   SHOW MODAL
========================================================= */

#brochureModal.brochure-modal-show {

    display: block !important;

}


/* =========================================================
   DARK BACKGROUND
========================================================= */

#brochureModal .brochure-modal-overlay {

    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    background: rgba(0, 0, 0, 0.78);

    z-index: 1;

}


/* =========================================================
   POPUP CONTAINER
========================================================= */

#brochureModal .brochure-modal-content {

    position: fixed !important;

    top: 50% !important;
    left: 50% !important;

    right: auto !important;
    bottom: auto !important;

    width: calc(100vw - 30px) !important;

    max-width: 500px !important;

    height: auto !important;

    max-height: calc(100vh - 30px) !important;

    margin: 0 !important;

    padding: 35px !important;

    box-sizing: border-box !important;

    background: #ffffff;

    border-radius: 8px;

    z-index: 2;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    transform: translate(-50%, -50%) !important;

    -webkit-transform: translate(-50%, -50%) !important;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.45);

    animation: brochurePopupOpen 0.25s ease-out;

}


/* =========================================================
   POPUP ANIMATION
========================================================= */

@keyframes brochurePopupOpen {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.94);

    }

    100% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);

    }

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

#brochureModal .brochure-close {

    position: absolute !important;

    top: 10px !important;
    right: 12px !important;

    width: 38px !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;

    background: transparent !important;

    color: #555 !important;

    font-size: 32px !important;

    font-weight: 300 !important;

    line-height: 38px !important;

    text-align: center;

    cursor: pointer;

    z-index: 10;

}


#brochureModal .brochure-close:hover {

    color: #000 !important;

}


/* =========================================================
   HEADER
========================================================= */

#brochureModal .brochure-modal-header {

    margin: 0 0 25px 0 !important;

    padding: 0 !important;

    text-align: center;

}


#brochureModal .brochure-modal-header h3 {

    margin: 0 0 8px 0 !important;

    padding: 0 !important;

    font-size: 25px;

    line-height: 1.3;

    font-weight: 600;

    color: #222;

}


#brochureModal .brochure-modal-header p {

    margin: 0 !important;

    padding: 0 !important;

    font-size: 14px;

    line-height: 1.6;

    color: #777;

}


/* =========================================================
   FORM GROUP
========================================================= */

#brochureModal .brochure-form-group {

    display: block;

    width: 100%;

    margin: 0 0 20px 0 !important;

    padding: 0 !important;

}


/* =========================================================
   LABEL
========================================================= */

#brochureModal .brochure-form-group label {

    display: block;

    width: 100%;

    margin: 0 0 7px 0 !important;

    padding: 0 !important;

    font-size: 14px;

    line-height: 1.5;

    font-weight: 600;

    color: #333;

}


#brochureModal .brochure-form-group label span {

    color: #e00000;

}


/* =========================================================
   INPUT
========================================================= */

#brochureModal .brochure-input {

    display: block;

    width: 100% !important;

    height: 50px !important;

    margin: 0 !important;

    padding: 0 14px !important;

    box-sizing: border-box !important;

    border: 1px solid #d8d8d8 !important;

    border-radius: 4px !important;

    background: #fff !important;

    color: #222 !important;

    font-family: inherit;

    font-size: 15px;

    line-height: 50px;

    outline: none !important;

    box-shadow: none !important;

}


#brochureModal .brochure-input:focus {

    border-color: #333 !important;

    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.06) !important;

}


/* =========================================================
   MESSAGE
========================================================= */

#brochureModal .brochure-message {

    display: block;

    width: 100%;

    min-height: 20px;

    margin: 0 0 10px 0 !important;

    padding: 0 !important;

    text-align: center;

    font-size: 14px;

    line-height: 1.5;

}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

#brochureModal .brochure-submit-btn {

    display: block;

    width: 100% !important;

    height: 50px !important;

    margin: 0 !important;

    padding: 0 20px !important;

    box-sizing: border-box !important;

    border: none !important;

    border-radius: 4px !important;

    cursor: pointer;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    line-height: 50px;

    text-align: center;

}


#brochureModal .brochure-submit-btn:disabled {

    opacity: 0.6;

    cursor: not-allowed;

}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 576px) {

    #brochureModal .brochure-modal-content {

        width: calc(100vw - 24px) !important;

        max-width: none !important;

        max-height: calc(100vh - 24px) !important;

        padding: 30px 20px !important;

        border-radius: 7px;

    }


    #brochureModal .brochure-modal-header h3 {

        font-size: 22px;

    }


    #brochureModal .brochure-modal-header p {

        font-size: 13px;

    }


    #brochureModal .brochure-close {

        top: 7px !important;

        right: 8px !important;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media screen and (max-width: 380px) {

    #brochureModal .brochure-modal-content {

        padding: 28px 16px !important;

    }


    #brochureModal .brochure-input {

        height: 46px !important;

        line-height: 46px;

    }


    #brochureModal .brochure-submit-btn {

        height: 46px !important;

        line-height: 46px;

    }

}