/* Custom css for popups and slide-ins */

.pum .pum-container {
    min-width     : 50% !important;
    max-width     : 100% !important;
    width         : 50% !important;
    border-radius : 5px !important;
    position: fixed!important;
}

.pum[class*="smallere"] .pum-container {
    min-width : 35% !important;
    width     : 35% !important;
}

.pum .pum-container .pum-close {
    position         : absolute;
    height           : 36px;
    width            : 36px;
    left             : auto;
    right            : -16px;
    bottom           : auto;
    top              : -16px;
    padding          : 0px;
    color            : #444444;
    font-family      : inherit;
    font-weight      : 400;
    font-size        : 16px;
    line-height      : 36px;
    border           : 1px none #ffffff;
    border-radius    : 28px;
    box-shadow       : 1px 1px 7px 1px rgba(2, 2, 2, 0.45);
    text-shadow      : 0px 0px 0px rgba(0, 0, 0, 0.00);
    background-color : rgba(255, 255, 255, 1.00);
    z-index          : 3;
}

.pum .pum-container .pum-flex-container .pum-image-container {
    width                      : 50%;
    height                     : 100%;
    display                    : block;
    position                   : absolute;
    left                       : 0;
    top                        : 0;
    background-size            : cover;
    background-position        : center;
    background-repeat          : no-repeat;
    border-radius              : 0 !important;
    border-top-right-radius    : 5px !important;
    border-bottom-right-radius : 5px !important;
    overflow                   : hidden;
    display                    : flex;
    align-items                : center;
    justify-content            : center;
}

.pum .pum-container .pum-flex-container .pum-image-container+.pum-main-content {
    padding-left : calc(50% + 40px);
}

.pum .pum-container .pum-flex-container .pum-main-content .pum-title {
    font-size   : 26px;
    line-height : 30px;
}

.pum .pum-container .pum-flex-container .pum-main-content .pum-content {
    font-size : 14px;
}

.pum .pum-container .pum-flex-container .pum-main-content .pum-content .mc4wp-form {
    margin-top : 20px;
}

.pum .pum-container .pum-flex-container .pum-main-content .pum-content .mc4wp-form p {
    padding-bottom : 10px;
}

.pum .pum-container .pum-flex-container .pum-main-content .pum-content .mc4wp-form label {
    margin-bottom : 3px;
    display       : block;
}

/* Popup maker - Popup central 1/3 theme */

.pum[class*="popup-1-3"] .pum-container .pum-flex-container .pum-image-container {
    width : 33.33%;
}

.pum[class*="popup-1-3"] .pum-container .pum-flex-container .pum-main-content {
    padding-left : calc(33.33% + 40px);
}

/* Popup maker - Slide-in */

.pum[class*="slide-in"] .pum-container .pum-flex-container .pum-image-container+.pum-main-content {
    padding-left : 0;
}

@media screen and (max-width: 980px) {
    .pum[class*="slide-in"] .pum-container {
        border-radius : 0 !important;
    }

    .pum[class*="slide-in"] .pum-container .pum-flex-container.dark-mode::after {
        border-radius : 0 !important;
    }

    .pum[class*="slide-in"] .pum-container .pum-flex-container.keep-image-proportions .pum-image-container {
        margin        : -50px !important;
        width         : calc(100% + 100px) !important;
        margin-bottom : 30px !important;
    }

}

@media screen and (min-width: 981px) {
    .pum[class*="slide-in"] .pum-container {
        top                    : unset !important;
        left                   : unset !important;
        right                  : 0;
        bottom                 : 0;
        margin                 : 0;
        min-width              : 400px !important;
        width                  : 400px !important;
        max-width              : 100% !important;
        padding                : 30px;
        border-radius          : 0 !important;
        border-top-left-radius : 5px !important;
        max-height             : 100vh;
    }

    .pum[class*="slide-in"] .pum-container .pum-close {
        right       : unset;
        left        : 0;
        top         : 0;
        background  : transparent;
        box-shadow  : none;
        color       : #fff;
        font-size   : 30px;
        text-shadow : 1px 1px 1px rgb(0 0 0 / 0.7);
    }

    .pum[class*="slide-in"] .pum-container .pum-flex-container:not(.pum-has-image)+.pum-close {
        color       : #000;
        text-shadow : none;
    }

    .pum[class*="slide-in"] .pum-container .pum-flex-container .pum-main-content .pum-title {
        font-size   : 18px;
        line-height : 22px;
    }

    .pum[class*="slide-in"] .pum-container .pum-flex-container .pum-main-content .pum-content {
        font-size : 12px;
    }

    .pum[class*="slide-in"] .pum-container .pum-flex-container .pum-image-container+.pum-main-content {
        padding-top : 300px !important;
    }

    .pum[class*="slide-in"] .pum-container .pum-flex-container.keep-image-proportions .pum-image-container+.pum-main-content {
        padding-top : 0 !important;
    }
}

.pum[class*="slide-in"] .pum-container .pum-flex-container .pum-image-container {
    height                 : 300px;
    width                  : 100%;
    border-radius          : 0 !important;
    border-top-left-radius : 5px !important;
}

.pum[class*="slide-in"] .pum-container .pum-flex-container.keep-image-proportions .pum-image-container {
    height        : auto;
    position      : relative;
    margin        : -30px;
    margin-bottom : 30px;
    width         : calc(100% + 60px);
}

/* Popup maker - Dark mode */

.pum .pum-container .pum-flex-container.dark-mode * {
    z-index : 2;
}

.pum .pum-container .pum-flex-container.dark-mode::after {
    content       : '';
    position      : absolute;
    top           : 0;
    left          : 0;
    height        : 100%;
    width         : 100%;
    background    : #1F1F1F;
    border-radius : 4px !important;
    z-index       : 1;
}

.pum .pum-container .pum-flex-container.dark-mode .pum-main-content .pum-content,
.pum .pum-container .pum-flex-container.dark-mode .pum-main-content .pum-content *,
.pum .pum-container .pum-flex-container.dark-mode .pum-main-content .pum-title {
    color : #fff;
}


/* Popup maker - form fields */

.pum p {
    padding-bottom : 10px;
}

.pum input.text,
.pum input.title,
.pum input[type=email],
.pum input[type=password],
.pum input[type=tel],
.pum input[type=text],
.pum select,
.pum textarea {
    background-color   : #fff;
    height             : 40px;
    width              : 100%;
    padding            : 0 10px;
    color              : #474750 !important;
    -webkit-box-sizing : border-box;
    box-sizing         : border-box;
    font-size          : 14px;
    line-height        : 40px;
    border             : 1px solid #d4d4d4;
    border-radius      : 3px;
    outline            : 0;
    -webkit-appearance : none;
    -moz-appearance    : none;
    appearance         : none;
    -webkit-box-shadow : 0 0 0 0 transparent;
    box-shadow         : 0 0 0 0 transparent;
    -webkit-transition : border .1s,
        -webkit-box-shadow .1s;
    transition: border .1s,
        -webkit-box-shadow .1s;
    transition: border .1s,
        box-shadow .1s;
    transition: border .1s,
        box-shadow .1s,
        -webkit-box-shadow .1s;
}

.pum input[type="submit"] {
    color                      : #fff;
    background                 : #EE7134;
    border                     : 1px solid #EE7134;
    border-top-right-radius    : 1px;
    border-bottom-right-radius : 1px;
    height                     : 50px;
    margin                     : 0;
    line-height                : 50px;
    font-size                  : 16px;
    display                    : block;
    width                      : 100%;
    font-weight                : 700;
    border-radius              : 3px;
    cursor                     : pointer;
}

.pum .wpcf7 .ajax-loader {
    position : absolute;
}

.pum .wpcf7-list-item {
    margin-left : 0;
}


/* Popup maker responsive fixes */

@media screen and (max-width: 1500px) {
    .pum .pum-container {
        width : 60% !important;
    }
}

@media screen and (max-width: 1200px) {
    .pum .pum-container {
        width : 70% !important;
    }
}

@media screen and (max-width: 1024px) {
    .pum .pum-container {
        width : 80% !important;
    }
}

@media screen and (max-width: 980px) {
    .pum .pum-container {
        position   : fixed;
        margin     : 0;
        top        : unset !important;
        right      : 0 !important;
        bottom     : 0 !important;
        left       : 0 !important;
        width      : 100% !important;
        max-height : 100vh;
        overflow   : scroll !important;
    }

    .pum .pum-container .pum-flex-container .pum-image-container {
        display : none !important;
    }

    .pum .pum-container .pum-flex-container .pum-main-content {
        padding : 0 !important;
    }

    .pum .pum-container .pum-close {
        right           : 30px;
        top             : -50px;
        height          : 40px;
        width           : 40px;
        font-size       : 20px;
        font-weight     : 600;
        display         : flex;
        align-items     : center;
        justify-content : center;
    }

    .pum .pum-container .pum-flex-container:not(.mobile-image)+.pum-close {
        right       : 10px;
        top         : 10px;
        z-index     : 1;
        background  : transparent;
        box-shadow  : none;
        font-size   : 30px;
        font-weight : 400;
    }

    .pum .pum-container .pum-flex-container.dark-mode:not(.mobile-image)+.pum-close {
        color : #fff;
    }

    .pum .pum-container .pum-flex-container.mobile-image .pum-image-container {
        display : block !important;
        height  : 40vh;
        width   : 100%;
    }

    .pum .pum-container .pum-flex-container.mobile-image .pum-main-content {
        padding-top : 40vh !important;
    }

    .pum .pum-container .pum-flex-container.mobile-image.keep-image-proportions .pum-main-content {
        padding-top : 0 !important;
    }

    .pum .pum-container .pum-flex-container.mobile-image+.pum-close {
        top : 15px;
    }
}