.mb-download-subscribe {

    overflow: hidden;
    width: 100%;
    margin: 0 auto;

    input {

        display: block;
        width: 100%;
        margin-bottom: 1em;

        .box-sizing();
    }

    .mb-subscribe-field {

        width: 50%;
    }
}

.mb-download-captcha {

    overflow: hidden;
    width: 100%;
    margin: 0 auto;

    .mb-captcha-field {

        overflow: hidden;
        width: 100%;
        margin: 0 auto;

        .mb-captcha-enter-field {

            float: left;
            width: 40%;
        }
    }

    .mb-captcha-code {

        float: left;
        width: 100%;
        height: 38px;
        padding: .39em .5em;

        .box-sizing();
    }

    .mb-captcode {

        float: left;
        width: 25%;
        height: 38px;
        cursor: pointer;
        padding: .19em .5em;

        .box-sizing();

        span {

            i, .dashicons {
                
                display: inline-block;
                width: auto;
                height: 31px;
                font-size: 2rem;
                .transition(all .3s ease);
            }
        }
    }

    #mb-captcha {

        float: left;
        width: 35%;
        height: 38px;
    }
}

.st-download-copy {

    float: left;
    width:100%;
}

.mb-modal {

    content: "";

    visibility: hidden;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 99999999;

    background: rgba(0,0,0,.6);

    .transition(all .2s ease);
    .box-sizing();

    .mb-modal-dialog {

        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        overflow-y: scroll;

        z-index: 11;

        width: 96%;
        max-height: 60%;
        margin: 0 auto;

        border: @gray solid 1px;
        background: #fefefe;

        .border-radius(5px);
        .transition-transform(~"0.3s ease-out");
        .transition(all .3s ease);
        .translate(0, 0);

        .box-sizing();

        .mb-modal-body {

            padding: @space/2;
            text-align: center;

            p {

                margin: 0;
                padding: 0;
            }

            .mb-modal-errors {

                overflow: hidden;
                width: 100%;
                margin: 0 auto;
                color: red;
                font-size: .7rem;

                .box-sizing();
            }

        }

        .mb-modal-header,
        .mb_modal_footer {

            padding: @space/4 @space/2;
        }

        .mb-modal-header {

            border-bottom: @gray-lighter solid 1px;

            h3 {

                margin: 0;
                padding: 0;
                font-size: 2rem;
            }
        }

        .mb-modal-footer {

            overflow: hidden;
            border-top: @gray-lighter solid 1px;
            text-align: center;
            .box-sizing();

            .mb-modal-cancel, .mb-modal-download-btn, .mb-modal-subscribe-btn {

                display: block;
                margin: 1em;
                padding: .3em 1em;
                color: #000;
                text-decoration: none;

                .appearance();
                .opacity(.8);
                .box-sizing();

                &:hover {

                    .opacity(1);
                }
            }
        }
    }
}

#modal-closer:target {

    .mb-modal-without-js {

        visibility: hidden;
        .transition(all .2s ease);

        .mb-modal-dialog {

            top: -100%;
            .transition(all .2s ease);
        }
    }
}

.mb-modal-without-js {

    content: ""; 
    visibility: visible;

    position: fixed;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 

    z-index: 99999999;

    background: rgba(0,0,0,.6);

    .transition(all .2s ease);
    .box-sizing();

    .mb-modal-dialog {

        position: fixed; 
        top: 20%;
        left: 0;
        right: 0;
        bottom: 0;

        overflow-y: scroll;

        z-index: 11;

        width: 96%;
        max-height: 50%;
        margin: 0 auto;

        border: @gray solid 1px;
        background: #fefefe;

        .border-radius(5px);
        .transition-transform(~"0.3s ease-out");
        .transition(all .3s ease);
        .translate(0, 0); 
        .box-sizing();

        .mb-modal-body {

            padding: @space/2;
            text-align: center;

            p {

                margin: 0;
                padding: 0;
            }

            .mb-modal-errors {

                overflow: hidden;
                width: 100%;
                margin: 0 auto;
                color: red;

                .box-sizing();
            }
        }

        .mb-modal-header,
        .mb-modal-footer {

            padding: @space/4 @space/2;
        }

        .mb-modal-header {

            border-bottom: @gray-lighter solid 1px;

            h3 {

                margin: 0;
                padding: 0;
                font-size: 2rem;
            }
        }

        .mb-modal-footer {

            overflow: hidden;
            border-top: @gray-lighter solid 1px;
            text-align: right;

            .mb-modal-download-btn, .mb-modal-subscribe-btn {

                float: right;
            }
        }
    }
}

@media only screen and(min-width:768px) {

    .mb-modal, .mb-modal-without-js {

        .mb-modal-dialog {

            overflow-y: scroll;
            width: 60%;
            height: 50%;

            .mb-modal-body {

                .mb-modal-errors {

                    width: 50%;
                }
            }

            .mb-modal-footer {

                .mb-modal-cancel {
                    
                    float: left;
                }
                
                .mb-modal-download-btn, .mb-modal-subscribe-btn {
                    
                    float: right;
                }
            }
        }

    }

    .mb-download-subscribe {

        width: 50%;
    }

    .mb-download-captcha {

        width: 50%;

        .mb-captcha-field {

            .mb-captcha-enter-field {

                width: 62%;
            }
        }

        .mb-captcode {

            width: 15%;
        }

        #mb-captcha {

            width: 23%;

        }
    }
}