// Variables
// ----------------------

@gray: #333;
@gray-light: #aaa;
@gray-lighter: #eee;
@space: 40px;
@blue: #428bca;
@blue-dark: darken(@blue, 5%);

// Btn 
// ----------------------
.btn {

    background: @blue;
    border: @blue-dark solid 1px;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    padding: 8px 15px;
    text-decoration: none;
    text-align: center;
    min-width: 60px;
    position: relative;
    transition: color .1s ease;
    /* top: 40em;*/

    &:hover {

        background: @blue-dark;
    }

    &.btn-big {

        font-size: 18px;
        padding: 15px 20px;
        min-width: 100px;
    }

}

.btn-close {

    color: @gray-light;
    font-size: 30px;
    text-decoration: none;
    position: absolute; right: 5px; top: 0;

    &:hover {
        color: darken(@gray-light, 10%);
    }
}

// Modal
// ----------------------
.mb_modal {

    content: ""; 
    visibility: hidden;
    background: rgba(0,0,0,.6);
    position: fixed;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 10;

    .mb_modal_dialog {

        top: -50%;

        .transition(all .3s ease);
        .translate(0, 0); 
    }
}

.mb_modal_dialog {

    background: #fefefe;
    border: @gray solid 1px;
    border-radius: 5px;
    position: fixed; 
    left: 50%; 
    top: 1%; 
    margin: 0px 0px 0px -35%;
    z-index: 11; 
    width: 70%;
    max-height: 85%;
    .translate(0, -500%);
    .transition-transform(~"0.3s ease-out");
}

.mb_modal_body {

    padding: @space/2;
}

.mb_modal_header,
.mb_modal_footer {

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

.mb_modal_header {

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

    h2 {
        font-size: 20px;
    }
}

.mb_modal_footer {

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