﻿.preview-bar {position: fixed; top: 0; left: 0; right: 0; z-index: 99999;}
.preview-bar > div { position: relative; width: 90%;  max-width: 700px; margin: 0 auto; padding: 12px 20px; background: #00b16a; color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; text-align: center;
                        border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    }
.preview-bar a {position: absolute; top: 10px; right: 20px; color: rgba(255,255,255,.5); font-size: 20px;}
.preview-bar a:hover {color: rgba(255,255,255,.8);}

.mxb-form-wrapper { position: relative; }


.mxb-wrapper #footer { font-size: 12px; padding: 0 34px; max-width: 800px; }
.mxb-wrapper #footer, .mxb-wrapper #footer a { color: #777; transition: all 0.3s; }
.mxb-wrapper #footer a:hover { text-decoration: none; }
.mxb-wrapper #footer .social a { color: #999;}
.mxb-wrapper #footer .social a:hover { color: #222; }
.mxb-wrapper #footer .credit a { text-decoration: none; }
.mxb-wrapper #footer .credit a:hover { color: #222; }
.mxb-wrapper .content-flex{display: flex; flex-direction: row; padding: 0 16px;}
.mxb-wrapper .content-flex > div {flex-grow: 1; width: 40%;  margin-bottom: 15px;}
.mxb-wrapper .content-flex .business {text-align: left;}
.mxb-wrapper .content-flex .social { flex: 0 1 auto; text-align: center; font-size: 20px;}
.mxb-wrapper .content-flex .social li {display: inline-block; margin: 0 6px;}
.mxb-wrapper .content-flex .credit {text-align: right;}

@media screen and (max-width:900px) {
    .mxb-wrapper #footer {font-size: 12px;}
    .mxb-wrapper #footer {padding: 0 10px 10px 10px;}
    .mxb-wrapper .content-flex {flex-direction: column;  flex-wrap: wrap; padding: 15px 0;}
    .mxb-wrapper .content-flex > div {flex: 1 0 100% !important; padding: 0 10px !important; width: auto; text-align: center !important;}
    .mxb-wrapper .content-flex .left {display: none;}
    .mxb-wrapper .content-flex .social {order: 2; font-size: 14px; width: auto;}
    .mxb-wrapper .content-flex .title {order: 1;}
}

@media screen and (max-width:600px) {
    .mxb-wrapper .content-flex { flex-wrap: wrap; padding-left: 5px;}
    .mxb-wrapper .content-flex > div {text-align: left !important;}
    .mxb-wrapper .content-flex .social li:first-child {margin-left: 0;}
}

.mxb-wrapper .confirmation-wrapper {  padding: 100px 50px; }
.mxb-wrapper .confirmation { width: 100%; max-width: 260px; margin: 0 auto; text-align: center;   border-radius: 4px; }
.mxb-wrapper .confirmation .icon { /*font-size: 60px;*/  padding: 0 0 0 0; }
.mxb-wrapper .confirmation span { color: rgba(144, 198, 149, .5); }
.mxb-wrapper .confirmation.alert span { color: rgba(207, 0, 15, .5); }
.mxb-wrapper .confirmation.loading span { color: rgba(200,200,200, .5); }
.mxb-wrapper .confirmation .fa-thumbs-up, .confirmation .fa-exclamation, .confirmation .fa-spinner { color: #fff; }
.mxb-wrapper .confirmation h2 { font-size: 24px; font-weight: bold; color: #555; margin-bottom: 15px; padding: 0px 20px 10px 20px; }
.mxb-wrapper .confirmation p { font-size: 16px; color: #888;  padding: 0 20px 50px 20px; }

.mxb-modal-form { position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(245,245,245,.95); font-family: Roboto, sans-serif; }
.mxb-modal-form p { line-height: 2rem; }
.mxb-modal-form > div { position: relative; top: 40%; left: 50%; transform: translate(-50%,-40%); width: 100%; background: #fff; max-width: 380px; border: 1px solid #ddd; border-radius: 5px; padding: 30px 50px; margin: 20px; }
.mxb-modal-form > div input[type="text"] { padding: 10px; font-size: 16px; width: 100%; border: 1px solid #ccc; border-radius: 3px; outline: none !important; }
.mxb-modal-form button { padding: 0.5em 2em; margin: 10px 0; text-align: center; background: #555; border-radius: 2px; color: #fff; font-size: 16px; border: none; transition: all 0.3s; }
.mxb-modal-form button.cancel { background: #eee; color: #888; }
.mxb-modal-form button:hover { background: #222; cursor: pointer; }
.mxb-modal-form button.cancel:hover { background: #ddd; }