html *,
body *,
.column,
.container-fluid,
.container,
.container-full,
.row,
.col-vs-1,
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-vs-2,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-vs-3,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-vs-4,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-vs-5,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-vs-6,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-vs-7,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-vs-8,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-vs-9,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-vs-10,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-vs-11,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-vs-12,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12,
.col-vs-13,
.col-xs-13,
.col-sm-13,
.col-md-13,
.col-lg-13,
.col-vs-14,
.col-xs-14,
.col-sm-14,
.col-md-14,
.col-lg-14,
.col-vs-15,
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15,
.col-vs-16,
.col-xs-16,
.col-sm-16,
.col-md-16,
.col-lg-16,
.col-vs-17,
.col-xs-17,
.col-sm-17,
.col-md-17,
.col-lg-17,
.col-vs-18,
.col-xs-18,
.col-sm-18,
.col-md-18,
.col-lg-18,
.col-vs-19,
.col-xs-19,
.col-sm-19,
.col-md-19,
.col-lg-19,
.col-vs-20,
.col-xs-20,
.col-sm-20,
.col-md-20,
.col-lg-20,
.col-vs-21,
.col-xs-21,
.col-sm-21,
.col-md-21,
.col-lg-21,
.col-vs-22,
.col-xs-22,
.col-sm-22,
.col-md-22,
.col-lg-22,
.col-vs-23,
.col-xs-23,
.col-sm-23,
.col-md-23,
.col-lg-23,
.col-vs-24,
.col-xs-24,
.col-sm-24,
.col-md-24,
.col-lg-24,
.of-control,
.of-text-field,
.of-textarea,
.of-btn,
.of-btn>.of-menu,
.of-btn>.of-menu>.of-menu-item,
.of-btn-circle,
.of-composite-control>.of-label,
.of-dialog .of-dialog-container,
.of-dialog .of-content-container,
.of-dialog .of-close-button,
.of-well {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
.btn-action {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.of-btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}
.full-line {
    display: block;
    width: 100%
}
.row:after,
.of-composite-control:after,
.of-dropdown .of-dropdown-menu:after,
.row:before,
.of-composite-control:before,
.of-dropdown .of-dropdown-menu:before,
.clearfix:after,
.clearfix:before {
    content: ' ';
    display: table;
    clear: both
}
html,
body {
    font-family: "proxima-nova", serif;
    direction: ltr;
    margin: 0px;
    padding: 0px
}
html *,
body * {
    direction: inherit
}
html.ltr,
html .ltr,
body.ltr,
body .ltr {
    font-family: "proxima-nova", serif
}
html.rtl,
html .rtl,
body.rtl,
body .rtl {
    font-family: "Droid Arabic Kufi", sans-serif;
    direction: rtl
}
.of-box-container {
    padding-top: 5px;
    padding-bottom: 5px
}
.of-clickable {
    cursor: pointer
}
.column {
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    float: left
}
.rtl .column,
.column.rtl {
    float: right
}
.container-fluid {
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: auto;
    margin-right: auto;
    width: 100%
}
.container,
.container-full {
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: auto;
    margin-right: auto
}
@media (min-width: 1250px) {
    .container,
    .container-full {
        max-width: 1120px
    }
}
@media (max-width: 479px) {
    .hidden-vs {
        display: none !important
    }
}
@media (min-width: 480px) and (max-width: 654px) {
    .hidden-xs {
        display: none !important
    }
}
@media (min-width: 655px) and (max-width: 952px) {
    .hidden-sm {
        display: none !important
    }
}
@media (min-width: 953px) and (max-width: 1249px) {
    .hidden-md {
        display: none !important
    }
}
@media (min-width: 1250px) {
    .hidden-lg {
        display: none !important
    }
}
.visible-vs {
    display: block !important
}
@media (min-width: 480px) {
    .visible-vs {
        display: none !important
    }
}
.visible-xs {
    display: none !important
}
@media (min-width: 480px) and (max-width: 654px) {
    .visible-xs {
        display: block !important
    }
}
.visible-sm {
    display: none !important
}
@media (min-width: 655px) and (max-width: 952px) {
    .visible-sm {
        display: block !important
    }
}
.visible-md {
    display: none !important
}
@media (min-width: 953px) and (max-width: 1249px) {
    .visible-md {
        display: block !important
    }
}
.visible-lg {
    display: none !important
}
@media (min-width: 1250px) {
    .visible-lg {
        display: block !important
    }
}
@media (min-width: 1250px) {
    .container-full {
        max-width: auto
    }
}
.row {
    position: relative
}
.container>.row,
.container-full>.row,
.container-fluid>.row,
*[class*="col-"]>.row,
.col-vs-6 .row {
    margin-left: -5px;
    margin-right: -5px
}
.col-vs-1 {
    width: 4.16667%
}
.col-vs-2 {
    width: 8.33333%
}
.col-vs-3 {
    width: 12.5%
}
.col-vs-4 {
    width: 16.66667%
}
.col-vs-5 {
    width: 20.83333%
}
.col-vs-6 {
    width: 25%
}
.col-vs-7 {
    width: 29.16667%
}
.col-vs-8 {
    width: 33.33333%
}
.col-vs-9 {
    width: 37.5%
}
.col-vs-10 {
    width: 41.66667%
}
.col-vs-11 {
    width: 45.83333%
}
.col-vs-12 {
    width: 50%
}
.col-vs-13 {
    width: 54.16667%
}
.col-vs-14 {
    width: 58.33333%
}
.col-vs-15 {
    width: 62.5%
}
.col-vs-16 {
    width: 66.66667%
}
.col-vs-17 {
    width: 70.83333%
}
.col-vs-18 {
    width: 75%
}
.col-vs-19 {
    width: 79.16667%
}
.col-vs-20 {
    width: 83.33333%
}
.col-vs-21 {
    width: 87.5%
}
.col-vs-22 {
    width: 91.66667%
}
.col-vs-23 {
    width: 95.83333%
}
.col-vs-24 {
    width: 100%
}
.col-vs-1,
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-vs-2,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-vs-3,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-vs-4,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-vs-5,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-vs-6,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-vs-7,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-vs-8,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-vs-9,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-vs-10,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-vs-11,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-vs-12,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12,
.col-vs-13,
.col-xs-13,
.col-sm-13,
.col-md-13,
.col-lg-13,
.col-vs-14,
.col-xs-14,
.col-sm-14,
.col-md-14,
.col-lg-14,
.col-vs-15,
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15,
.col-vs-16,
.col-xs-16,
.col-sm-16,
.col-md-16,
.col-lg-16,
.col-vs-17,
.col-xs-17,
.col-sm-17,
.col-md-17,
.col-lg-17,
.col-vs-18,
.col-xs-18,
.col-sm-18,
.col-md-18,
.col-lg-18,
.col-vs-19,
.col-xs-19,
.col-sm-19,
.col-md-19,
.col-lg-19,
.col-vs-20,
.col-xs-20,
.col-sm-20,
.col-md-20,
.col-lg-20,
.col-vs-21,
.col-xs-21,
.col-sm-21,
.col-md-21,
.col-lg-21,
.col-vs-22,
.col-xs-22,
.col-sm-22,
.col-md-22,
.col-lg-22,
.col-vs-23,
.col-xs-23,
.col-sm-23,
.col-md-23,
.col-lg-23,
.col-vs-24,
.col-xs-24,
.col-sm-24,
.col-md-24,
.col-lg-24 {
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    float: left
}
.rtl .col-vs-1,
.col-vs-1.rtl,
.rtl .col-xs-1,
.col-xs-1.rtl,
.rtl .col-sm-1,
.col-sm-1.rtl,
.rtl .col-md-1,
.col-md-1.rtl,
.rtl .col-lg-1,
.col-lg-1.rtl,
.rtl .col-vs-2,
.col-vs-2.rtl,
.rtl .col-xs-2,
.col-xs-2.rtl,
.rtl .col-sm-2,
.col-sm-2.rtl,
.rtl .col-md-2,
.col-md-2.rtl,
.rtl .col-lg-2,
.col-lg-2.rtl,
.rtl .col-vs-3,
.col-vs-3.rtl,
.rtl .col-xs-3,
.col-xs-3.rtl,
.rtl .col-sm-3,
.col-sm-3.rtl,
.rtl .col-md-3,
.col-md-3.rtl,
.rtl .col-lg-3,
.col-lg-3.rtl,
.rtl .col-vs-4,
.col-vs-4.rtl,
.rtl .col-xs-4,
.col-xs-4.rtl,
.rtl .col-sm-4,
.col-sm-4.rtl,
.rtl .col-md-4,
.col-md-4.rtl,
.rtl .col-lg-4,
.col-lg-4.rtl,
.rtl .col-vs-5,
.col-vs-5.rtl,
.rtl .col-xs-5,
.col-xs-5.rtl,
.rtl .col-sm-5,
.col-sm-5.rtl,
.rtl .col-md-5,
.col-md-5.rtl,
.rtl .col-lg-5,
.col-lg-5.rtl,
.rtl .col-vs-6,
.col-vs-6.rtl,
.rtl .col-xs-6,
.col-xs-6.rtl,
.rtl .col-sm-6,
.col-sm-6.rtl,
.rtl .col-md-6,
.col-md-6.rtl,
.rtl .col-lg-6,
.col-lg-6.rtl,
.rtl .col-vs-7,
.col-vs-7.rtl,
.rtl .col-xs-7,
.col-xs-7.rtl,
.rtl .col-sm-7,
.col-sm-7.rtl,
.rtl .col-md-7,
.col-md-7.rtl,
.rtl .col-lg-7,
.col-lg-7.rtl,
.rtl .col-vs-8,
.col-vs-8.rtl,
.rtl .col-xs-8,
.col-xs-8.rtl,
.rtl .col-sm-8,
.col-sm-8.rtl,
.rtl .col-md-8,
.col-md-8.rtl,
.rtl .col-lg-8,
.col-lg-8.rtl,
.rtl .col-vs-9,
.col-vs-9.rtl,
.rtl .col-xs-9,
.col-xs-9.rtl,
.rtl .col-sm-9,
.col-sm-9.rtl,
.rtl .col-md-9,
.col-md-9.rtl,
.rtl .col-lg-9,
.col-lg-9.rtl,
.rtl .col-vs-10,
.col-vs-10.rtl,
.rtl .col-xs-10,
.col-xs-10.rtl,
.rtl .col-sm-10,
.col-sm-10.rtl,
.rtl .col-md-10,
.col-md-10.rtl,
.rtl .col-lg-10,
.col-lg-10.rtl,
.rtl .col-vs-11,
.col-vs-11.rtl,
.rtl .col-xs-11,
.col-xs-11.rtl,
.rtl .col-sm-11,
.col-sm-11.rtl,
.rtl .col-md-11,
.col-md-11.rtl,
.rtl .col-lg-11,
.col-lg-11.rtl,
.rtl .col-vs-12,
.col-vs-12.rtl,
.rtl .col-xs-12,
.col-xs-12.rtl,
.rtl .col-sm-12,
.col-sm-12.rtl,
.rtl .col-md-12,
.col-md-12.rtl,
.rtl .col-lg-12,
.col-lg-12.rtl,
.rtl .col-vs-13,
.col-vs-13.rtl,
.rtl .col-xs-13,
.col-xs-13.rtl,
.rtl .col-sm-13,
.col-sm-13.rtl,
.rtl .col-md-13,
.col-md-13.rtl,
.rtl .col-lg-13,
.col-lg-13.rtl,
.rtl .col-vs-14,
.col-vs-14.rtl,
.rtl .col-xs-14,
.col-xs-14.rtl,
.rtl .col-sm-14,
.col-sm-14.rtl,
.rtl .col-md-14,
.col-md-14.rtl,
.rtl .col-lg-14,
.col-lg-14.rtl,
.rtl .col-vs-15,
.col-vs-15.rtl,
.rtl .col-xs-15,
.col-xs-15.rtl,
.rtl .col-sm-15,
.col-sm-15.rtl,
.rtl .col-md-15,
.col-md-15.rtl,
.rtl .col-lg-15,
.col-lg-15.rtl,
.rtl .col-vs-16,
.col-vs-16.rtl,
.rtl .col-xs-16,
.col-xs-16.rtl,
.rtl .col-sm-16,
.col-sm-16.rtl,
.rtl .col-md-16,
.col-md-16.rtl,
.rtl .col-lg-16,
.col-lg-16.rtl,
.rtl .col-vs-17,
.col-vs-17.rtl,
.rtl .col-xs-17,
.col-xs-17.rtl,
.rtl .col-sm-17,
.col-sm-17.rtl,
.rtl .col-md-17,
.col-md-17.rtl,
.rtl .col-lg-17,
.col-lg-17.rtl,
.rtl .col-vs-18,
.col-vs-18.rtl,
.rtl .col-xs-18,
.col-xs-18.rtl,
.rtl .col-sm-18,
.col-sm-18.rtl,
.rtl .col-md-18,
.col-md-18.rtl,
.rtl .col-lg-18,
.col-lg-18.rtl,
.rtl .col-vs-19,
.col-vs-19.rtl,
.rtl .col-xs-19,
.col-xs-19.rtl,
.rtl .col-sm-19,
.col-sm-19.rtl,
.rtl .col-md-19,
.col-md-19.rtl,
.rtl .col-lg-19,
.col-lg-19.rtl,
.rtl .col-vs-20,
.col-vs-20.rtl,
.rtl .col-xs-20,
.col-xs-20.rtl,
.rtl .col-sm-20,
.col-sm-20.rtl,
.rtl .col-md-20,
.col-md-20.rtl,
.rtl .col-lg-20,
.col-lg-20.rtl,
.rtl .col-vs-21,
.col-vs-21.rtl,
.rtl .col-xs-21,
.col-xs-21.rtl,
.rtl .col-sm-21,
.col-sm-21.rtl,
.rtl .col-md-21,
.col-md-21.rtl,
.rtl .col-lg-21,
.col-lg-21.rtl,
.rtl .col-vs-22,
.col-vs-22.rtl,
.rtl .col-xs-22,
.col-xs-22.rtl,
.rtl .col-sm-22,
.col-sm-22.rtl,
.rtl .col-md-22,
.col-md-22.rtl,
.rtl .col-lg-22,
.col-lg-22.rtl,
.rtl .col-vs-23,
.col-vs-23.rtl,
.rtl .col-xs-23,
.col-xs-23.rtl,
.rtl .col-sm-23,
.col-sm-23.rtl,
.rtl .col-md-23,
.col-md-23.rtl,
.rtl .col-lg-23,
.col-lg-23.rtl,
.rtl .col-vs-24,
.col-vs-24.rtl,
.rtl .col-xs-24,
.col-xs-24.rtl,
.rtl .col-sm-24,
.col-sm-24.rtl,
.rtl .col-md-24,
.col-md-24.rtl,
.rtl .col-lg-24,
.col-lg-24.rtl {
    float: right
}
@media (min-width: 480px) {
    .col-xs-1 {
        width: 4.16667%
    }
    .col-xs-2 {
        width: 8.33333%
    }
    .col-xs-3 {
        width: 12.5%
    }
    .col-xs-4 {
        width: 16.66667%
    }
    .col-xs-5 {
        width: 20.83333%
    }
    .col-xs-6 {
        width: 25%
    }
    .col-xs-7 {
        width: 29.16667%
    }
    .col-xs-8 {
        width: 33.33333%
    }
    .col-xs-9 {
        width: 37.5%
    }
    .col-xs-10 {
        width: 41.66667%
    }
    .col-xs-11 {
        width: 45.83333%
    }
    .col-xs-12 {
        width: 50%
    }
    .col-xs-13 {
        width: 54.16667%
    }
    .col-xs-14 {
        width: 58.33333%
    }
    .col-xs-15 {
        width: 62.5%
    }
    .col-xs-16 {
        width: 66.66667%
    }
    .col-xs-17 {
        width: 70.83333%
    }
    .col-xs-18 {
        width: 75%
    }
    .col-xs-19 {
        width: 79.16667%
    }
    .col-xs-20 {
        width: 83.33333%
    }
    .col-xs-21 {
        width: 87.5%
    }
    .col-xs-22 {
        width: 91.66667%
    }
    .col-xs-23 {
        width: 95.83333%
    }
    .col-xs-24 {
        width: 100%
    }
}
@media (min-width: 655px) {
    .col-sm-1 {
        width: 4.16667%
    }
    .col-sm-2 {
        width: 8.33333%
    }
    .col-sm-3 {
        width: 12.5%
    }
    .col-sm-4 {
        width: 16.66667%
    }
    .col-sm-5 {
        width: 20.83333%
    }
    .col-sm-6 {
        width: 25%
    }
    .col-sm-7 {
        width: 29.16667%
    }
    .col-sm-8 {
        width: 33.33333%
    }
    .col-sm-9 {
        width: 37.5%
    }
    .col-sm-10 {
        width: 41.66667%
    }
    .col-sm-11 {
        width: 45.83333%
    }
    .col-sm-12 {
        width: 50%
    }
    .col-sm-13 {
        width: 54.16667%
    }
    .col-sm-14 {
        width: 58.33333%
    }
    .col-sm-15 {
        width: 62.5%
    }
    .col-sm-16 {
        width: 66.66667%
    }
    .col-sm-17 {
        width: 70.83333%
    }
    .col-sm-18 {
        width: 75%
    }
    .col-sm-19 {
        width: 79.16667%
    }
    .col-sm-20 {
        width: 83.33333%
    }
    .col-sm-21 {
        width: 87.5%
    }
    .col-sm-22 {
        width: 91.66667%
    }
    .col-sm-23 {
        width: 95.83333%
    }
    .col-sm-24 {
        width: 100%
    }
}
@media (min-width: 953px) {
    .col-md-1 {
        width: 4.16667%
    }
    .col-md-2 {
        width: 8.33333%
    }
    .col-md-3 {
        width: 12.5%
    }
    .col-md-4 {
        width: 16.66667%
    }
    .col-md-5 {
        width: 20.83333%
    }
    .col-md-6 {
        width: 25%
    }
    .col-md-7 {
        width: 29.16667%
    }
    .col-md-8 {
        width: 33.33333%
    }
    .col-md-9 {
        width: 37.5%
    }
    .col-md-10 {
        width: 41.66667%
    }
    .col-md-11 {
        width: 45.83333%
    }
    .col-md-12 {
        width: 50%
    }
    .col-md-13 {
        width: 54.16667%
    }
    .col-md-14 {
        width: 58.33333%
    }
    .col-md-15 {
        width: 62.5%
    }
    .col-md-16 {
        width: 66.66667%
    }
    .col-md-17 {
        width: 70.83333%
    }
    .col-md-18 {
        width: 75%
    }
    .col-md-19 {
        width: 79.16667%
    }
    .col-md-20 {
        width: 83.33333%
    }
    .col-md-21 {
        width: 87.5%
    }
    .col-md-22 {
        width: 91.66667%
    }
    .col-md-23 {
        width: 95.83333%
    }
    .col-md-24 {
        width: 100%
    }
}
@media (min-width: 1250px) {
    .col-lg-1 {
        width: 4.16667%
    }
    .col-lg-2 {
        width: 8.33333%
    }
    .col-lg-3 {
        width: 12.5%
    }
    .col-lg-4 {
        width: 16.66667%
    }
    .col-lg-5 {
        width: 20.83333%
    }
    .col-lg-6 {
        width: 25%
    }
    .col-lg-7 {
        width: 29.16667%
    }
    .col-lg-8 {
        width: 33.33333%
    }
    .col-lg-9 {
        width: 37.5%
    }
    .col-lg-10 {
        width: 41.66667%
    }
    .col-lg-11 {
        width: 45.83333%
    }
    .col-lg-12 {
        width: 50%
    }
    .col-lg-13 {
        width: 54.16667%
    }
    .col-lg-14 {
        width: 58.33333%
    }
    .col-lg-15 {
        width: 62.5%
    }
    .col-lg-16 {
        width: 66.66667%
    }
    .col-lg-17 {
        width: 70.83333%
    }
    .col-lg-18 {
        width: 75%
    }
    .col-lg-19 {
        width: 79.16667%
    }
    .col-lg-20 {
        width: 83.33333%
    }
    .col-lg-21 {
        width: 87.5%
    }
    .col-lg-22 {
        width: 91.66667%
    }
    .col-lg-23 {
        width: 95.83333%
    }
    .col-lg-24 {
        width: 100%
    }
}
.of-control {
    outline: none;
    font-family: inherit;
    border: none
}
.of-control {
    position: relative;
    line-height: 2.6em;
    font-size: 16px;
    padding: 0px 0.6em;
    border: 1px solid #4a86d7
}
.of-control.primary {
    border: 1px solid #4a86d7
}
.of-control.danger {
    border: 1px solid #ffa388
}
.of-control.success {
    border: 1px solid #94e2a8
}
.of-control.info {
    border: 1px solid #fc9
}
.of-control.xs {
    font-size: 8px
}
.of-control.sm {
    font-size: 10px
}
.of-control.md {
    font-size: 16px
}
.of-control.lg {
    font-size: 18px
}
.of-control[class*="col-"] {
    padding: 0px 5px
}
.of-control.left>.of-wrapper {
    padding-left: 2.6em
}
.of-control.right>.of-wrapper {
    padding-right: 2.6em
}
.of-control .of-wrapper {
    margin-left: -5px;
    margin-right: -5px
}
.of-control.no-border {
    border: none
}
.of-control+.of-control {
    margin-top: 2px
}
.of-text-field,
.of-textarea {
    outline: none;
    font-family: inherit;
    border: none
}
.of-text-field {
    line-height: 2.6em;
    height: 2.6em;
    font-size: 16px;
    padding: 0px 0.6em;
    border: 1px solid #4a86d7
}
.of-text-field.primary {
    border: 1px solid #4a86d7
}
.of-text-field.danger {
    border: 1px solid #ffa388
}
.of-text-field.success {
    border: 1px solid #94e2a8
}
.of-text-field.info {
    border: 1px solid #fc9
}
.of-text-field.xs {
    font-size: 8px
}
.of-text-field.sm {
    font-size: 10px
}
.of-text-field.md {
    font-size: 16px
}
.of-text-field.lg {
    font-size: 18px
}
.of-textarea {
    border: 1px solid #eee;
    resize: none;
    padding: 0px 0.6em;
    font-size: 16px
}
.of-textarea.full-line {
    width: 100%
}
.of-textarea.primary {
    border: 1px solid #4a86d7
}
.of-textarea.danger {
    border: 1px solid #ffa388
}
.of-textarea.success {
    border: 1px solid #94e2a8
}
.of-textarea.info {
    border: 1px solid #fc9
}
.of-textarea.xs {
    font-size: 8px
}
.of-textarea.sm {
    font-size: 10px
}
.of-textarea.md {
    font-size: 16px
}
.of-textarea.lg {
    font-size: 18px
}
.of-btn {
    cursor: pointer;
    direction: inherit;
    display: inline-block;
    font-family: inherit
}
.of-btn {
    position: relative;
    font-size: 16px;
    height: 2.6em;
    line-height: 2.6em;
    padding: 0px 0.6em;
    background: #259;
    color: #fff;
    -webkit-transition: all 0.5s cubic-bezier(0, 0, 0, 1);
    -o-transition: all 0.5s cubic-bezier(0, 0, 0, 1);
    transition: all 0.5s cubic-bezier(0, 0, 0, 1)
}
.of-btn>.of-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    border: 1px solid #eee;
    line-height: 2.6em;
    min-height: 5.2em;
    background-color: #eee;
    z-index: 20
}
.of-btn>.of-menu>.of-menu-item {
    color: black;
    width: 100%;
    padding: 0px 5px;
    margin-top: 1px;
    text-align: left;
    background-color: #fff
}
.of-btn>.of-menu.active {
    display: block
}
.of-btn.ltr>.of-menu>.of-menu-item,
.ltr .of-btn>.of-menu>.of-menu-item {
    text-align: left
}
.of-btn.rtl>.of-menu>.of-menu-item,
.rtl .of-btn>.of-menu>.of-menu-item {
    text-align: right
}
.of-btn:hover {
    background: #3579d2
}
.of-btn:active,
.of-btn.active {
    background: #193e6f
}
.of-btn.primary {
    background: #259
}
.of-btn.primary:hover {
    background: #3579d2
}
.of-btn.primary:active,
.of-btn.primary.active {
    background: #193e6f
}
.of-btn.danger {
    background: #f52
}
.of-btn.danger:hover {
    background: #ff906f
}
.of-btn.danger:active,
.of-btn.danger.active {
    background: #ee3700
}
.of-btn.success {
    background: #4c6
}
.of-btn.success:hover {
    background: #80dc97
}
.of-btn.success:active,
.of-btn.success.active {
    background: #2fae4f
}
.of-btn.info {
    background: #f93
}
.of-btn.info:hover {
    background: #ffbf80
}
.of-btn.info:active,
.of-btn.info.active {
    background: #ff8000
}
.of-btn.xs {
    font-size: 8px
}
.of-btn.sm {
    font-size: 10px
}
.of-btn.md {
    font-size: 16px
}
.of-btn.lg {
    font-size: 18px
}
.of-btn-circle {
    display: inline-block;
    height: 2.6em;
    width: 2.6em;
    line-height: 2.6em;
    color: #fff;
    background-color: blue;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    margin-left: 5px;
    text-align: center;
    -webkit-transition: all 0.5s cubic-bezier(0, 0, 0, 1);
    -o-transition: all 0.5s cubic-bezier(0, 0, 0, 1);
    transition: all 0.5s cubic-bezier(0, 0, 0, 1)
}
.of-btn-circle:hover {
    background-color: #2929ff;
    color: white
}
.of-btn-circle:active {
    background-color: #00c;
    color: white
}
.of-btn-circle:visited {
    color: white
}
.of-composite-control>.of-label {
    display: block;
    float: left;
    font-weight: bold;
    background-color: #eee;
    padding: 0px 5px;
    line-height: 2.6em;
    height: 2.6em
}
.of-composite-control>.of-label span {
    font-size: 0.8em
}
.of-composite-control>.of-text-field,
.of-composite-control>.of-control,
.of-composite-control>.of-textarea {
    float: left;
    display: block;
    border: 1px solid #eee
}
.of-composite-control>.of-text-field:focus,
.of-composite-control>.of-control:focus,
.of-composite-control>.of-textarea:focus {
    border-bottom: 1px solid #85e284
}
.rtl .of-composite-control>.of-label,
.rtl .of-composite-control>.of-text-field,
.rtl .of-composite-control>.of-textarea,
.rtl .of-composite-control>.of-control,
.of-composite-control.rtl>.of-label,
.of-composite-control.rtl>.of-text-field,
.of-composite-control.rtl>.of-textarea,
.of-composite-control.rtl>.of-control {
    float: right
}
.of-composite-control+.of-composite-control,
.of-composite-control+.of-btn,
.of-composite-control+.of-text-field,
.of-composite-control+.of-textarea,
.of-composite-control+.of-control,
.of-composite-control+.of-textarea,
.of-text-field+.of-composite-control,
.of-composite-control .of-text-field+.of-text-field,
.of-composite-control .of-text-field+.of-textarea,
.of-composite-control .of-text-field+.of-btn,
.of-composite-control .of-text-field+.of-control,
.of-control+.of-composite-control,
.of-composite-control .of-control+.of-control,
.of-composite-control .of-control+.of-btn,
.of-composite-control .of-control+.of-textarea,
.of-composite-control .of-control+.of-text-field,
.of-btn+.of-composite-control,
.of-composite-control .of-btn+of-btn,
.of-composite-control .of-btn+.of-control,
.of-composite-control .of-btn+.of-text-field,
.of-composite-control .of-btn+.of-textarea,
.of-textarea+.of-composite-control,
.of-composite-control .of-textarea+.of-textarea,
.of-composite-control .of-textarea+.of-text-field,
.of-composite-control .of-textarea+.of-btn,
.of-composite-control .of-textarea+.of-control {
    margin-top: 5px
}
.of-dialog {
    position: fixed;
    display: none;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    z-index: 9999999999
}
.of-dialog[data-visible="true"] {
    display: block
}
.of-dialog .of-backdrop {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 300
}
.of-dialog .of-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5em;
    text-align: center;
    text-transform: uppercase;
    color: #1C1C1C
}
.of-dialog .of-dialog-container {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%
}
.of-dialog .of-content-container {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    line-height: 20px;
    font-size: 14px;
    z-index: 310;
    color: #1C1C1C;
    background-color: white;
    overflow: auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px
}
@media (max-width: 480px) {
    .of-dialog .of-content-container {
        font-size: 12px
    }
}
.of-dialog .of-content-border {
    display: block;
    padding: 20px 20px
}
.of-dialog .of-content-border a {
    color: #eaad2d
}
.of-dialog .of-close-button {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #1C1C1C;
    height: 32px;
    width: 32px;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    line-height: 32px;
    z-index: 322
}
.of-dialog .of-close-button i {
    line-height: 32px
}
.of-dialog.copy-dialog .of-content-container {
    height: auto
}
@media (min-width: 655px) {
    .of-dialog .of-title {
        font-size: 20px
    }
    .of-dialog .of-dialog-container {
        height: 350px;
        top: 50%;
        margin-top: -175px;
        width: 500px;
        left: 50%;
        margin-left: -250px
    }
    .of-dialog.copy-dialog .of-dialog-container {
        height: 250px;
        margin-top: -125px
    }
    .of-dialog.embed-dialog .of-dialog-container {
        width: 500px;
        margin-left: -250px;
        height: 360px;
        margin-top: -180px
    }
    .of-dialog.embed-dialog .of-dialog-container .text-area {
        height: 140px
    }
    .of-dialog.embed-dialog .of-dialog-container select {
        display: none;
        border: 1px solid #1C1C1C;
        color: white;
        width: auto;
        padding: 5px 10px;
        font-size: 14px;
        height: 31px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin-bottom: 10px;
        border-radius: 0;
        position: relative;
        background: url(../img/arrow-down.png) 96%/10% no-repeat #030723;
        padding-right: 32px
    }
}
@media (min-width: 953px) {
    .of-dialog.sources-dialog .of-dialog-container {
        height: 460px;
        margin-top: -230px
    }
}
a,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    color: inherit
}
.text-uppercase {
    text-transform: uppercase
}
.text-lowercase {
    text-transform: lowercase
}
.text-capitalize {
    text-transform: capitalize
}
.text-left {
    text-align: left !important
}
.text-right {
    text-align: right !important
}
.text-center {
    text-align: center !important
}
.text-justify {
    text-align: justify !important
}
.text-line-through {
    text-decoration: line-through
}
.text-overline {
    text-decoration: overline
}
.text-underline {
    text-decoration: underline
}
.text-bold {
    font-weight: bold
}
.text-100 {
    font-weight: 100
}
.text-200 {
    font-weight: 200
}
.text-300 {
    font-weight: 300
}
.text-400 {
    font-weight: 400
}
.text-500 {
    font-weight: 500
}
.text-600 {
    font-weight: 600
}
.text-700 {
    font-weight: 700
}
.text-800 {
    font-weight: 800
}
.text-900 {
    font-weight: 900
}
.text-xs {
    font-size: 8px
}
.text-sm {
    font-size: 10px
}
.text-md {
    font-size: 16px
}
.text-lg {
    font-size: 18px
}
.of-btn,
.no-text-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}
.info-link,
.info-link:visited,
.info-link:hover {
    color: #1C1C1C;
    text-decoration: underline;
    display: block;
    font-weight: bold
}
.of-well {
    padding: 1.5em
}
.of-well.xs {
    padding: 8px
}
.of-well.sm {
    padding: 10px
}
.of-well.md {
    padding: 16px
}
.of-well.lg {
    padding: 18px
}
html,
body,
#SiteContainer,
.app-container {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    font-family: "proxima-nova", serif;
    color: #030723;
    font-size: 12px;
    overflow: hidden
}
@media (min-width: 655px) {
    html,
    body,
    #SiteContainer,
    .app-container {
        font-size: 12px
    }
}
body {
    background: black
}
@font-face {
    font-family: 'icomoon';
    src: url("../fonts/icomoon.eot?w7041b");
    src: url("../fonts/icomoon.eot?w7041b#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?w7041b") format("truetype"), url("../fonts/icomoon.woff?w7041b") format("woff"), url("../fonts/icomoon.svg?w7041b#icomoon") format("svg");
    font-weight: normal;
    font-style: normal
}
[class^="icon-"],
[class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.icon-twitter:before {
    content: "\e900"
}
.icon-close:before {
    content: "\e901"
}
.icon-embed:before {
    content: "\e902"
}
.icon-facebook:before {
    content: "\e903"
}
.icon-info:before {
    content: "\e904"
}
.logo {
    display: block;
    margin: auto;
    max-width: 80%
}
.share-widget .share-button {
    color: #999;
    display: inline-block;
    width: auto;
    height: 25px;
    margin-left: 10px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
    font-weight: normal;
    letter-spacing: 2px
}
.share-widget .share-button span {
    display: none;
    font-size: 14px;
    float: right;
    margin-left: 10px
}
.share-widget .share-button.info {
    padding-left: 10px;
    border-left: 1px solid #888
}
.share-widget .share-button:hover {
    color: #888
}
.share-widget .share-button.embed {
    display: none
}
@media (min-width: 655px) {
    .share-widget .share-button.embed {
        display: inline-block
    }
    .share-widget .share-button span {
        display: inline-block
    }
}
.embed-code-container {
    color: #888;
    text-align: center;
}
.embed-textarea {
    padding: 10px;
}
.embed-code-container textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 130px;
    height: 130px;
    border: 1px solid #D5D5D5;
    background: white;
    color: #888
}
.embed-code-container .copy-to-clipboard-btn {
    display: block;
    padding: 0 10px;
    text-transform: uppercase;
    color: white;
    background: #D5D5D5;
    margin: auto;
    text-align: center;
    margin-top: 20px;
    max-width: 80%;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    background: #1C1C1C
}
.bottom-bar {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45px;
    line-height: 45px;
    padding: 0 15px;
    background-color: white;
    z-index: 2;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15)
}
.bottom-bar .lenstore-logo {
    display: inline-block;
    height: 30px;
    margin-top: 7px
}
.bottom-bar .lenstore-logo img {
    height: 100%;
    width: auto;
    vertical-align: top
}
.bottom-bar .share-widget {
    float: right;
    font-size: 20px
}
.top-bar {
    height: 75px;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    color: white;
    padding: 0 20px;
    font-weight: 600;
    background: black
}
@media (max-width: 480px) {
    .top-bar {
        height: 130px
    }
}
@media (min-width: 655px) {
    .top-bar {
        padding: 0 20px;
        height: 75px
    }
}
@media (min-width: 953px) {
    .top-bar {
        height: 55px
    }
}
.top-bar .filter-label {
    display: inline-block;
    float: left;
    height: 30px;
    line-height: 30px;
    letter-spacing: 2px;
    margin-top: 5px;
    margin-right: 15px
}
@media (max-width: 480px) {
    .top-bar .filter-label {
        margin-top: 25px
    }
}
@media (min-width: 953px) {
    .top-bar .filter-label {
        margin-top: 15px
    }
}
.top-bar .filter-container {
    display: block;
    width: 100%;
    float: left
}
@media (min-width: 953px) {
    .top-bar .filter-container {
        width: auto;
        display: inline-block
    }
}
@media (max-width: 480px) {
    .top-bar .of-dropdown {
        margin-top: 0;
        width: 100%
    }
    .top-bar .of-dropdown:last-of-type {
        width: 100%;
        margin-right: 0;
        margin-top: 7px
    }
}
@media (min-width: 480px) {
    .top-bar .of-dropdown {
        width: 49%;
        margin-right: 2%
    }
    .top-bar .of-dropdown:last-of-type {
        width: 49%;
        margin-right: 0
    }
}
@media (min-width: 953px) {
    .top-bar .of-dropdown {
        width: 150px;
        margin-top: 15px;
        margin-right: 15px
    }
    .top-bar .of-dropdown:last-of-type {
        width: 220px
    }
}
.top-bar .legends {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: right;
    float: right
}
@media (min-width: 953px) {
    .top-bar .legends {
        float: right;
        margin-top: 18px
    }
}
.top-bar .legends>div {
    display: block;
    height: 20px;
    line-height: 20px;
    letter-spacing: 2px;
    margin-left: 15px
}
@media (min-width: 480px) {
    .top-bar .legends>div {
        display: inline-block
    }
}
.top-bar .legends>div.legend-career:before {
    content: '';
    width: 15px;
    height: 8px;
    display: inline-block;
    margin-right: 10px;
    margin-top: 2px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    background: #ea3e80;
    background: -moz-linear-gradient(left, #ea3e80 0%, #f4723f 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, #ea3e80), color-stop(100%, #f4723f));
    background: -webkit-linear-gradient(left, #ea3e80 0%, #f4723f 100%);
    background: -o-linear-gradient(left, #ea3e80 0%, #f4723f 100%);
    background: -ms-linear-gradient(left, #ea3e80 0%, #f4723f 100%);
    background: linear-gradient(to right, #ea3e80 0%, #f4723f 100%)
}
.of-dropdown {
    position: relative;
    font-size: 16px;
    display: inline-block;
    width: 150px
}
.of-dropdown .mCSB_inside>.mCSB_container {
    margin-right: 0 !important
}
.of-dropdown .of-dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    z-index: 1
}
.of-dropdown .of-dropdown-label {
    display: block;
    margin: 0px auto;
    position: relative;
    cursor: pointer;
    background: #171717;
    color: #888;
    font-weight: normal;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px
}
.of-dropdown .of-dropdown-label .of-label-text {
    position: relative;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    padding: 0 15px
}
.of-dropdown .of-dropdown-label .of-label-text:after {
    position: absolute;
    content: ' ';
    height: 0px;
    width: 0px;
    border: 4px solid transparent;
    border-top: 4px solid white;
    right: 10px;
    top: 50%;
    margin-top: -2px
}
.of-dropdown .of-dropdown-label[data-active="true"] {
    color: #1C1C1C;
    background: white;
    font-weight: bold
}
.of-dropdown .of-dropdown-label[data-active="true"] .of-label-text:after {
    border-top-color: #1C1C1C
}
.of-dropdown .of-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    margin-top: 2px;
    background-color: #D5D5D5;
    color: #888;
    overflow: auto;
    width: 100%;
    max-height: 200px;
    font-weight: normal;
    z-index: 2;
    font-size: 14px
}
.of-dropdown .of-dropdown-item {
    display: block;
    cursor: pointer;
    border-bottom: 1px solid rgba(136, 136, 136, 0.25)
}
.of-dropdown .of-dropdown-item .of-item-label {
    height: 30px;
    line-height: 30px;
    padding: 0 15px
}
.of-dropdown .of-dropdown-item:hover {
    background: rgba(136, 136, 136, 0.25)
}
.of-dropdown[data-active="true"] .of-dropdown-menu {
    display: block
}
.of-dropdown[data-active="true"] .of-dropdown-overlay {
    display: block
}
.splash-screen {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 45px;
    z-index: 1;
    overflow: auto;
    background-color: white;
    color: black;
    font-size: 16px;
    padding: 50px 20px;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear
}
.splash-screen[data-visible="true"] {
    display: block
}
.splash-screen .splash-logo {
    display: block;
    position: relative;
    max-width: 400px;
    margin: auto
}
.splash-screen img {
    width: 100%;
    height: auto;
    vertical-align: top
}
.splash-screen .splash-desc {
    max-width: 700px;
    width: 100%;
    padding: 20px;
    margin: auto;
    text-align: center;
    display: block;
    margin-top: 10px
}
.splash-screen .splash-start-btn {
    max-width: 180px;
    margin: auto;
    display: block;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    padding: 0 30px;
    background: black;
    letter-spacing: 3px;
    cursor: pointer;
    color: white;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px
}
.splash-screen .splash-start-btn:hover {
    background: #a0a0a0
}
.splash-screen .splash-copyright {
    display: block;
    text-align: center;
    margin-top: 30px;
    font-size: 10px
}
@media (max-width: 655px) {
    .splash-screen {
        padding: 20px
    }
    .splash-screen .splash-logo {
        max-width: 300px
    }
    .splash-screen .splash-desc {
        margin-top: 0
    }
}
.spot-game-container {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 45px;
    background: black;
    z-index: 1;
    overflow: auto
}
.spot-game-container .spc-holder {
    padding-top: 100px;
    padding-bottom: 20px /* */
}
@media (max-width: 655px) {
    .spot-game-container .spc-holder {
        padding-top: 70px; /* */
        /* padding-top: 50px; */
    }
}
@media (max-width: 480px) {
    .spot-game-container .spc-holder {
        padding-top: 40px
    }
}
.spot-game-container[data-visible="true"] {
    display: block
}
@media (max-width: 480px) {
    .spot-game-container {
        background: white
    }
}
.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: white !important
}
.spot-it-component {
    display: none
}
.spot-it-component[data-visible="false"] {
    display: none !important
}
.spot-it-component .si-inner {
    max-width: 500px;
    background: white;
    display: block;
    margin: auto;
    padding: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px
}
.spot-it-component .si-inner .si-head {
    display: block;
    min-height: 50px; /* 56 */
    position: relative
}
.spot-it-component .si-inner .si-head .si-label {
    font-weight: bold;
    padding: 10px;
    max-width: 60%; /* 80% */
    font-size: 16px;
    line-height: 18px
}
@media (max-width: 480px) {
    .spot-it-component .si-inner .si-head .si-label {
        font-size: 14px;
        line-height: 16px
    }
}
.spot-it-component .si-inner .si-head .si-timer {
    position: absolute;
    top: 0; /* -7.5px*/
    right: 10px;
    height: 55px;
    line-height: 55px;
    font-size: 30px;
    font-weight: bold
}
@media (max-width: 480px) {
    .spot-it-component .si-inner .si-head .si-label {
        display: block;
        max-width: none;
        padding-right: 70px
    }
    .spot-it-component .si-inner .si-head .si-timer {
        font-size: 18px
    }
}
.spot-it-component .si-inner .si-content {
    display: block;
    position: relative;
    cursor: pointer
}
.spot-it-component .si-inner .si-content .si-msg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 20px;
    display: none;
    z-index: 1;
    text-align: center
}
.spot-it-component .si-inner .si-content .si-target {
    position: absolute;
    opacity: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    z-index: 100
}
.spot-it-component .si-inner .si-content .si-img {
    display: block
}
.spot-it-component .si-inner .si-content .si-img img {
    width: 100%;
    height: auto
}
.spot-it-component .si-inner .si-content .si-img.si-img-answer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.spot-it-result {
    display: none
}
.spot-it-result[data-visible="true"] {
    /* margin-top:20px; */
    display: block
}
.spot-it-result .sir-inner {
    max-width: 700px;
    background: white;
    margin: auto;
    padding: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    color: #cacaca
}
.spot-it-result .sir-spotted {
    display: block;
    /* height: 100px; */
    /* line-height: 100px; */
    font-weight: normal;
    
    height: 110px;
    max-width: 290px;
    margin: auto;
}
.spot-it-result .sir-spotted div {
    position: relative;
    width: 60px;
    display: inline-block;
    font-weight: bold;
    color: #1C1C1C
}
.spot-it-result .sir-spotted div span {
    /* position: absolute; */
    font-size: 60px;
    /* top: -56px; */
    /* left: 12px */

    position: relative;
    top: 12px;
}
.spot-it-result .sir-spotted div:nth-child(2) {
    color: #999
}
@media (max-width: 655px) {
    .spot-it-result .sir-spotted {
        height: 70px;
        /* line-height: 70px */

        line-height: 35px;
    }
    .spot-it-result .sir-spotted div {
        width: 35px
    }
    .spot-it-result .sir-spotted div span {
        font-size: 40px;
        /* left: 6px; */
        /* top: -40px */

        top: 8px;
    }
    /* .spot-it-component .si-inner {
        max-width: 440px;
    } */
}
.spot-it-result .sir-compare .sir-btn {
    display: block;
    background: black;
    max-width: 250px;
    padding: 10px 20px;
    text-transform: uppercase;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
    color: white;
    margin: auto;
    cursor: pointer
}
@media (max-width: 655px) {
    .spot-it-result .sir-compare .sir-btn {
        font-size: 13px
    }
}
.spot-it-result .sir-compare .sir-compare-graph {
    display: none
}
.spot-it-result .sir-compare .sir-compare-graph[data-visible="true"] {
    display: block
}
.spot-it-result .sir-compare .sir-compare-graph p {
    font-weight: bold;
    font-size: 18px;
    color: black;
    max-width: 550px;
    margin: auto;
    margin-bottom: 20px
}
.spot-it-result .sir-compare .sir-compare-graph .sir-graph-copy {
    /* margin-top: -20px; */
    border-bottom: 1px solid #f3f1f1;
    margin-bottom: 20px;
    padding: 0 20px;

    margin-top: 20px;
}
@media (max-width: 480px) {
    .spot-it-result .sir-compare .sir-compare-graph .sir-graph-copy {
        /* margin-top: -10px */
    }
}
.spot-it-result .sir-compare .sir-compare-graph .sir-compare-graph-title p {
    font-size: 14px;
    font-weight: normal
}
.spot-it-result .sir-compare .sir-compare-request {
    display: none
}
.spot-it-result .sir-compare .sir-compare-request[data-visible="true"] {
    display: block
}
.spot-it-result .sir-compare .sir-compare-request p {
    font-weight: normal;
    color: black;
    max-width: 550px;
    margin: auto;
    margin-bottom: 10px
}
.spot-it-result .play-btn {
    display: inline-block;
    margin: auto;
    height: 42px;
    line-height: 42px;
    background: #1C1C1C;
    color: white;
    font-weight: bold;
    margin-top: 20px;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    -ms-border-radius: 21px;
    -o-border-radius: 21px;
    border-radius: 21px;
    padding: 0 20px;
    cursor: pointer;
    letter-spacing: 3px
}
.spot-it-result .sir-share {
    display: none;
    padding: 20px;
    padding-top: 0px
}
.spot-it-result .sir-share[data-visible="true"] {
    display: block
}
.spot-it-result .sir-share p {
    font-weight: normal !important;
    text-transform: uppercase;
    max-width: 400px !important;
    margin: auto !important;
    margin-bottom: 10px !important;
    margin-top: 20px !important;
    font-size: 14px !important;
    color: #999999 !important
}
.popup-message {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d
}
.popup-message[data-visible="true"] {
    display: block
}
.popup-message .pm-backdrop {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25)
}
.popup-message .pm-container {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}
.popup-message .pm-content-container {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 500px;
    width: 100vw;
    padding: 20px;
    color: white;
    text-align: center;
    font-size: 16px;
}
.popup-message .pm-close-button {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    padding: 0 30px;
    background: black;
    letter-spacing: 3px;
    cursor: pointer;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px
}
.background-swapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    z-index: -1;
    background-position: center
}
@media (max-width: 480px) {
    .background-swapper {
        display: none
    }
}
.survey-form-component {
    display: none
}
.survey-form-component[data-visible="true"] {
    display: block;
    /* margin-top: 10px; */
}
.survey-form-component .survey-form-inner {
    max-width: 700px;
    background: white;
    display: block;
    margin: auto;
    padding: 30px 20px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    color: #cacaca;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px
}
.survey-form-component .sfc-head {
    font-size: 24px;
    font-weight: normal;
    max-width: 500px;
    margin: auto;
    color: black;
    margin-bottom: 20px
}
.survey-form-component .sfc-control-holder {
    padding: 10px 0;
    max-width: 300px;
    margin: auto
}
.survey-form-component .sfc-control-holder .sfc-lbl {
    margin-bottom: 5px;
    font-weight: normal
}
.survey-form-component .sfc-control-holder .sfc-lbl.sfc-warning {
    color: darkred
}
.survey-form-component .sfc-control-holder .sfc-lbl.sfc-warning[data-visible="false"] {
    display: none
}
.survey-form-component select {
    /* -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none; */
    height: 42px;
    line-height: 42px;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    -ms-border-radius: 21px;
    -o-border-radius: 21px;
    border-radius: 21px;
    /* text-indent: 20px; */
    border: 1px solid #D5D5D5;
    background: white;
    color: #1C1C1C;
    width: 100%;
    font-weight: normal
}
.survey-form-component select.age-input {
    width: 110px;
    text-align: center
}
.survey-form-component input {
    height: 42px;
    line-height: 42px;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    -ms-border-radius: 21px;
    -o-border-radius: 21px;
    border-radius: 21px;
    border: 1px solid #D5D5D5;
    width: 90px;
    text-align: center;
    color: #1C1C1C;
    font-weight: normal
}
.survey-form-component .sfc-submit {
    display: inline-block;
    margin: auto;
    height: 42px;
    line-height: 42px;
    background: #1C1C1C;
    color: white;
    font-weight: bold;
    margin-top: 20px;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    -ms-border-radius: 21px;
    -o-border-radius: 21px;
    border-radius: 21px;
    padding: 0 20px;
    cursor: pointer;
    letter-spacing: 3px
}
@media (max-width: 655px) {
    .survey-form-component .sfc-head {
        font-size: 16px;
        line-height: 18px;
        margin-bottom: 10px
    }
    .survey-form-component .sfc-control-holder {
        padding: 5px 0
    }
    .survey-form-component .sfc-submit {
        margin-top: 10px
    }
}
.radio-selector-container {
    display: inline-block;
    width: 220px;
    text-align: center
}
.radio-selector-container .radio-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #e3e3e3;
    display: inline-block;
    width: 49%;
    padding: 10px 20px;
    font-weight: normal
}
.radio-selector-container .radio-item:first-child {
    -webkit-border-top-left-radius: 21px;
    -webkit-border-bottom-left-radius: 21px;
    -moz-border-radius-topleft: 21px;
    -moz-border-radius-bottomleft: 21px;
    border-top-left-radius: 21px;
    border-bottom-left-radius: 21px
}
.radio-selector-container .radio-item:last-child {
    -webkit-border-top-right-radius: 21px;
    -webkit-border-bottom-right-radius: 21px;
    -moz-border-radius-topright: 21px;
    -moz-border-radius-bottomright: 21px;
    border-top-right-radius: 21px;
    border-bottom-right-radius: 21px;
    margin-left: -1px
}
.radio-selector-container .radio-item:hover {
    background-color: #D5D5D5;
    color: #1C1C1C;
    cursor: pointer
}
.radio-selector-container[data-current-selection="male"] div.radio-item[data-key="male"] {
    background-color: #1C1C1C;
    color: white;
    border-color: #888;
    font-weight: bold
}
.radio-selector-container[data-current-selection="female"] div.radio-item[data-key="female"] {
    background-color: #1C1C1C;
    color: white;
    border-color: #888;
    font-weight: bold
}
.btn-action {
    margin: 10px 0px;
    display: inline-block;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
    padding: 10px 20px;
    font-family: "proxima-nova", serif;
    font-weight: normal;
    width: 140px;
    height: 30px;
    line-height: 30px;
    padding: 0
}
@media (max-width: 655px) {
    .btn-action {
        width: 120px
    }
}
.btn-action.btn-facebook {
    background-color: #3c61ac
}
.btn-action.btn-twitter {
    background-color: #2ab1f0;
    margin-left: 10px
}
.btn-action.btn-embed {
    background-color: #ec9f36;
    margin-left: 10px
}
@media (max-width: 655px) {
    .btn-action.btn-embed {
        display: none
    }
}
.btn-action .btn-label {
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-size: 14px
}
.btn-action .btn-label i {
    font-size: 16px;
    margin-right: 7px;
    display: inline-block;
    height: 30px;
    line-height: 29px
}
.btn-action:hover {
    cursor: pointer
}
.bar-graph-container .axis-y .tick {
    display: none
}
.bar-graph-container .axis-y .tick:first-child,
.bar-graph-container .axis-y .tick:nth-last-child(3) {
    display: block !important
}
.bar-graph-container .axis-y .tick line {
    display: none
}
.bar-graph-container .axis-y .tick text {
    font-size: 12px
}
.bar-graph-container .axis-x .tick line {
    display: none
}
.bar-graph-container .axis-x .tick text {
    font-size: 12px
}
.bar-graph-container .y-axis-label {
    font-size: 8px;
    text-transform: uppercase;
    fill: #c4c4c4
}
.bar-graph-container path.domain {
    stroke-width: 1px;
    stroke: #c4c4c4;
    fill: transparent
}
.bar-graph-container .graph-canvas {
    height: 230px;
    max-width: 400px;
    margin: 0 auto
}
.bar-graph-container .your-score-group text {
    fill: orange;
    font-size: 10px;
    text-transform: uppercase
}
.bar-graph-container .your-score-group .label-triangle {
    fill: orange
}
@media (min-width: 655px) {
    .bar-graph-container .graph-canvas {
        height: 230px
    }
    .bar-graph-container .your-score-group text {
        font-size: 10px
    }
    .bar-graph-container .axis-x .tick text,
    .bar-graph-container .axis-y .tick text {
        font-size: 12px
    }
    .bar-graph-container .y-axis-label {
        font-size: 12px
    }
}
@media (min-width: 953px) {
    .bar-graph-container .graph-canvas {
        height: 230px
    }
    .bar-graph-container .your-score-group text {
        font-size: 12px
    }
    .bar-graph-container .axis-x .tick text,
    .bar-graph-container .axis-y .tick text {
        font-size: 12px
    }
    .bar-graph-container .y-axis-label {
        font-size: 12px
    }
}
.beat-chart {
    display: block;
    margin: auto;
    max-width: 600px;
    padding: 0 20px;
    margin-bottom: 30px
}
.beat-chart .bc-inner {
    position: relative
}
.beat-chart .bc-inner .bc-grid {
    text-align: center;
    font-weight: normal;
    margin-bottom: 10px
}
.beat-chart .bc-inner .bc-grid .left {
    float: left;
    color: #ec4560
}
.beat-chart .bc-inner .bc-grid .left:after {
    content: '';
    position: absolute;
    top: 25px;
    bottom: 0;
    width: 1px;
    left: 0;
    border-left: 1px solid rgba(28, 28, 28, 0.25)
}
.beat-chart .bc-inner .bc-grid .right {
    float: right;
    color: #a1ec45
}
.beat-chart .bc-inner .bc-grid .right:after {
    content: '';
    position: absolute;
    top: 25px;
    bottom: 0;
    width: 1px;
    right: 0;
    border-right: 1px solid rgba(28, 28, 28, 0.25)
}
.beat-chart .bc-inner .bc-grid .middle {
    display: inline-block
}
.beat-chart .bc-item {
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid #f3f1f1;
    margin-bottom: 10px
}
.beat-chart .bc-item .bc-item-inner {
    position: relative;
    margin-bottom: 5px
}
.beat-chart .bc-item .bc-item-inner .bc-icon {
    width: 50px;
    height: 50px;
    display: block;
    margin: auto;
    position: relative;
    z-index: 2;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: white;
    border: 2px solid #a1ec45
}
.beat-chart .bc-item .bc-item-inner .bc-icon>div {
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-size: contain
}
.beat-chart .bc-item .bc-item-inner .bc-icon>div.icon-s-1 {
    background-image: url("../img/icons/01.png")
}
.beat-chart .bc-item .bc-item-inner .bc-icon>div.icon-s-2 {
    background-image: url("../img/icons/02.png")
}
.beat-chart .bc-item .bc-item-inner .bc-icon>div.icon-s-3 {
    background-image: url("../img/icons/03.png")
}
.beat-chart .bc-item .bc-item-inner .bc-icon>div.icon-s-4 {
    background-image: url("../img/icons/04.png")
}
.beat-chart .bc-item .bc-item-inner .bc-icon>div.icon-s-5 {
    background-image: url("../img/icons/05.png")
}
.beat-chart .bc-item .bc-item-inner .bc-indicator {
    position: relative;
    top: -25px;
    width: 50%
}
.beat-chart .bc-item .bc-item-inner .bc-indicator .bc-indicator-line {
    position: absolute;
    height: 1px;
    border: 1px dashed #999999
}
.beat-chart .bc-item .bc-item-inner .bc-indicator .bc-indicator-line:after {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    background: #1C1C1C;
    top: -7px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}
.beat-chart .bc-item .bc-item-inner .bc-indicator[data-side="left"] {
    left: 0
}
.beat-chart .bc-item .bc-item-inner .bc-indicator[data-side="left"] .bc-indicator-line {
    right: 25px
}
.beat-chart .bc-item .bc-item-inner .bc-indicator[data-side="left"] .bc-indicator-line:after {
    left: -15px;
    background: #ec4560
}
.beat-chart .bc-item .bc-item-inner .bc-indicator[data-side="right"] {
    left: 50%
}
.beat-chart .bc-item .bc-item-inner .bc-indicator[data-side="right"] .bc-indicator-line {
    left: 25px
}
.beat-chart .bc-item .bc-item-inner .bc-indicator[data-side="right"] .bc-indicator-line:after {
    right: -15px;
    background: #a1ec45
}
.beat-chart .bc-item .bc-item-inner .bc-indicator[data-side="none"] {
    display: none
}
.beat-chart .bc-item .bc-copy {
    color: #1C1C1C;
    padding: 0 10px
}
.beat-chart .bc-item[data-side="left"] .bc-item-inner .bc-icon {
    border-color: #a1ec45
}
.beat-chart .bc-item[data-side="right"] .bc-item-inner .bc-icon {
    border-color: #a1ec45
}
.beat-chart .bc-item[data-found="false"] .bc-item-inner .bc-icon {
    border-color: #ec4560
}
.beat-chart .bc-item[data-found="false"] .bc-item-inner .bc-icon:after {
    display: none;
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ec4560;
    content: 'x';
    color: white;
    top: -5px;
    right: -10px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}
@media (max-width: 480px) {
    .pm-switch-mode {
        display: none !important
    }
}
.popup-message.pm-switch-mode .pm-backdrop {
    background-color: rgba(0, 0, 0, 0.75);
}

.page-embed .share-button.embed {
    display: none !important
}
.page-embed .pm-switch-mode {
    display: none !important
}
.loading-screen {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    color: black;
    z-index: 10000000
}
.loading-screen[data-hide="true"] {
    display: none
}
.loading-screen div {
    position: fixed;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 20px;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}
#StaticLogo {
    opacity: 0;
    position: absolute;
    z-index: -10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden
}
.lenstore-logo-fixed {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 150px;
    height: 100px;
    z-index: 1001;
    background-size: contain;
    background-image: url("../img/logo-it-white.png");
    background-repeat: no-repeat
}
@media (max-width: 655px) {
    .lenstore-logo-fixed {
        width: 100px
    }
}
@media (max-width: 480px) {
    .lenstore-logo-fixed {
        top: 10px;
        background-image: url("../img/logo-it-black.png")
    }
}

.embed .hide-on-embed {
    visibility: hidden !important;
    opacity: 0 !important;
    display: none !important;
}

.embed .beat-chart {
    margin-bottom: 0;
}

.embed .spot-it-result[data-graph-visible="true"] .sir-share.share-score-sharer-cont p {
    display: none;
}

.embed .spot-it-result[data-graph-visible="true"] .sir-share.play-again-cont {
    margin-top: 0px;
}

.embed .spot-it-result[data-graph-visible="true"] .sir-share[data-visible="true"] .play-btn {
    margin-top: 0;
}

.embed .spot-it-result[data-visible="true"][data-graph-visible="true"] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.embed .spot-it-result[data-visible="true"][data-graph-visible="true"] .sir-inner {
    height: 100%;
}

.embed .spot-it-result[data-visible="true"][data-graph-visible="true"] .sir-inner .sir-compare {
    margin-top: 40px;
}