/*--- SETTINGS ---*/
* {
    font-size: 13.5px;
    padding: 0 0 0 0;
    margin: 0 auto;
}

    *, *:hover, *:focus, *.active {
        text-decoration: none;
        outline: none;
        list-style-type: none;
    }

body, html {
    font-family: 'Helvetica Neue Light', sans-serif;
    line-height: 1.3;
    z-index: 0;
}

i, b, span, p, thead, tbody, td, tr, th, code, pre, nav, footer, article, header {
    /*etc...*/
    font-size: inherit;
}

h1 {
    font-size: 23px;
}

h2 {
    font-size: 18px;
}

h3 {
    font-size: 16.5px;
}

h4 {
    font-size: 14.5px;
}

h5 {
    font-size: 13.5px;
}

h6 {
    font-size: 12.5px;
}

a, button {
    cursor: pointer;
}
/*--- LAYOUT ---*/
.line {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    float: left;
    clear: right;
}

.line-compress {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    float: left;
    clear: right;
    padding: 0 2% 0 2%;
}

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .offset-left1, .offset-left2, .offset-left3, .offset-left4, .offset-left5, .offset-left6, .offset-left7, .offset-left8, .offset-left9, .offset-left10, .offset-right1, .offset-right2, .offset-right3, .offset-right4, .offset-right5, .offset-right6, .offset-right7, .offset-right8, .offset-right9, .offset-right10 {
    float: left;
    vertical-align: top;
    left: 0;
    min-height: 0.5px;
}

.col1 {
    width: 10%;
}

.col2 {
    width: 20%;
}

.col3 {
    width: 30%;
}

.col4 {
    width: 40%;
}

.col5 {
    width: 50%;
}

.col6 {
    width: 60%;
}

.col7 {
    width: 70%;
}

.col8 {
    width: 80%;
}

.col9 {
    width: 90%;
}

.col10 {
    width: 100%;
}

.offset-left1 {
    margin-left: 10%;
}

.offset-left2 {
    margin-left: 20%;
}

.offset-left3 {
    margin-left: 30%;
}

.offset-left4 {
    margin-left: 40%;
}

.offset-left5 {
    margin-left: 50%;
}

.offset-left6 {
    margin-left: 60%;
}

.offset-left7 {
    margin-left: 70%;
}

.offset-left8 {
    margin-left: 80%;
}

.offset-left9 {
    margin-left: 90%;
}

.offset-left10 {
    margin-left: 100%;
}

.offset-right1 {
    margin-right: 10%;
}

.offset-right2 {
    margin-right: 20%;
}

.offset-right3 {
    margin-right: 30%;
}

.offset-right4 {
    margin-right: 40%;
}

.offset-right5 {
    margin-right: 50%;
}

.offset-right6 {
    margin-right: 60%;
}

.offset-right7 {
    margin-right: 70%;
}

.offset-right8 {
    margin-right: 80%;
}

.offset-right9 {
    margin-right: 90%;
}

.offset-right10 {
    margin-right: 100%;
}
/*--- BUTTONS ---*/
button {
    cursor: pointer;
    border: none;
}

.btn {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 5px 2%;
    display: block;
}

    .btn.btn-medium {
        padding: 9.5px 2%;
        font-size: 14.5px;
    }

    .btn.btn-large {
        padding: 14px 2%;
        font-size: 17px;
    }

    .btn:hover {
        opacity: 0.8;
        text-decoration: none;
    }

    .btn:focus {
        box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1) inset;
        text-decoration: none;
    }

    .btn.active {
        box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.09) inset;
        text-decoration: none;
    }

        .btn.active:hover {
            opacity: 1;
        }

    .btn.disabled {
        cursor: none;
    }
/*--- COLORS ---*/
.color-white {
    color: #fff;
}

.color-black {
    color: #333;
}

.color-muted {
    color: rgba(0, 0, 0, 0.5);
}

.color-muted-inverse {
    color: rgba(255, 255, 255, 0.5);
}

.color-error {
    color: red;
}

.color-info {
    color: #3F42F6;
}

.color-success {
    color: #2AC171;
}
/*--- UTILS ---*/
/*lines*/
.hr {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    float: none;
    clear: both;
    height: 0;
}
/*float*/
.push-left {
    float: left;
}

.push-right {
    float: right;
}

.push-center {
    margin: 0 auto;
    float: none;
}
/*align-x*/
.center-content {
    text-align: center;
}

.left-content {
    text-align: left;
}

.right-content {
    text-align: right;
}
/*align-y*/
.v-top {
    vertical-align: top;
}

.v-middle {
    vertical-align: middle;
}

.v-bottom {
    vertical-align: bottom;
}

.v-super {
    vertical-align: super;
}

.v-text {
    vertical-align: text-bottom;
}

.v-sub {
    vertical-align: sub;
}
/*font*/
.font-light {
    font-weight: lighter;
}

.font-medium {
    font-weight: 500;
}

.font-bold {
    font-weight: bold;
}
/*overlfow*/
.over-hidden {
    overflow: hidden;
}

.over-y-hidden {
    overflow-y: hidden;
}

.over-x-hidden {
    overflow-x: hidden;
}

.over-scroll {
    overflow: scroll;
}

.over-x-scroll {
    overflow-x: scroll;
}

.over-y-scroll {
    overflow-y: scroll;
}
/*text*/
.breakword {
    word-break: break-all;
}

.lowercase {
    text-transform: lowercase;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.ellips {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*layers*/
.layer1 {
    z-index: 1;
}

.layer2 {
    z-index: 2;
}

.layer3 {
    z-index: 3;
}

.layer4 {
    z-index: 4;
}
/*borders*/
.border {
    -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.border-info {
    -moz-box-shadow: 0 0 0 1px lightblue;
    -webkit-box-shadow: 0 0 0 1px lightblue;
    box-shadow: 0 0 0 1px lightblue;
}

.border-error {
    -moz-box-shadow: 0 0 0 1px lightred;
    -webkit-box-shadow: 0 0 0 1px lightred;
    box-shadow: 0 0 0 1px lightred;
}

.border-success {
    -moz-box-shadow: 0 0 0 1px lightgreen;
    -webkit-box-shadow: 0 0 0 1px lightgreen;
    box-shadow: 0 0 0 1px lightgreen;
}
/*radius*/
.radius3 {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.radius5 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.radius10 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.radius20 {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.radius-full {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}
/*vertical spacing*/
.separator3 {
    min-height: 3px;
    clear: both;
    float: none;
    width: 100%;
}

.separator5 {
    min-height: 5px;
    clear: both;
    float: none;
    width: 100%;
}

.separator10 {
    min-height: 10px;
    clear: both;
    float: none;
    width: 100%;
}

.separator15 {
    min-height: 15px;
    clear: both;
    float: none;
    width: 100%;
}

.separator30 {
    min-height: 30px;
    clear: both;
    float: none;
    width: 100%;
}

.separator50 {
    min-height: 50px;
    clear: both;
    float: none;
    width: 100%;
}

.separator100 {
    min-height: 100px;
    clear: both;
    float: none;
    width: 100%;
}
/*visibility*/
.hide {
    display: none;
}

.show {
    display: inherit;
}

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}
/*opacity*/
.half-opacity {
    opacity: 0.5;
}

.less-opacity {
    opacity: 0.75;
}

.toggle-opacity-hover {
    opacity: 0.65;
}

    .toggle-opacity-hover:hover {
        opacity: 1;
    }

.toggle-opacity-inverse-hover {
    opacity: 1;
}

    .toggle-opacity-inverse-hover:hover {
        opacity: 0.65;
    }
/*statements*/
.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.relative-absolute {
    position: relative absolute;
}
/*positions*/
.top {
    top: 0;
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.bottom {
   
}

.middle {
    left: 0;
    right: 0;
}
/*--- BACKGROUNDS ---*/
.bg-black {
    background-color: #222;
}

.bg-white {
    background-color: #fff;
}

.bg-muted {
    background-color: rgba(0, 0, 0, 0.15);
}

.bg-muted-inverse {
    background-color: rgba(255, 255, 255, 0.75);
}

.bg-error {
    background-color: red;
}

.bg-info {
    background-color: #3F42F6;
}

.bg-success {
    background-color: green;
}
/*--- ANIMATIONS ---*/
@-webkit-keyframes fadeOut {
    25% {
        opacity: 0.6;
    }

    75% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    25% {
        opacity: 0.6;
    }

    75% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }
}

.fade-out-slow {
    -webkit-animation: fadeOut 0.85s linear;
    -moz-animation: fadeOut 0.85s linear;
    -o-animation: fadeOut 0.85s linear;
    animation: fadeOut 0.85s linear;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.fade-out-medium {
    -webkit-animation: fadeOut 0.45s linear;
    -moz-animation: fadeOut 0.45s linear;
    -o-animation: fadeOut 0.45s linear;
    animation: fadeOut 0.45s linear;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.fade-out-fast {
    -webkit-animation: fadeOut 0.15s linear;
    -moz-animation: fadeOut 0.15s linear;
    -o-animation: fadeOut 0.15s linear;
    animation: fadeOut 0.15s linear;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.fade-in-slow {
    -webkit-animation: fadeIn 0.85s linear;
    -moz-animation: fadeIn 0.85s linear;
    -o-animation: fadeIn 0.85s linear;
    animation: fadeIn 0.85s linear;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.fade-in-medium {
    -webkit-animation: fadeIn 0.45s linear;
    -moz-animation: fadeIn 0.45s linear;
    -o-animation: fadeIn 0.45s linear;
    animation: fadeIn 0.45s linear;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.fade-in-fast {
    -webkit-animation: fadeIn 0.15s linear;
    -moz-animation: fadeIn 0.15s linear;
    -o-animation: fadeIn 0.15s linear;
    animation: fadeIn 0.15s linear;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
/*NO!*/
.no-border {
    border: none;
}

.no-radius {
    -moz-border-radius: 0 0 0 0;
    -webkit-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
}

.no-bg {
    background-color: none;
}

.no-padding {
    padding: 0 0 0 0;
}

.no-margin {
    margin: 0 0 0 0;
}

.no-list-style {
    list-style-type: none;
}

.no-float {
    float: none;
}

.no-height {
    height: 0;
    max-height: 0;
}

.no-width {
    width: 0;
    max-width: 0;
}

.no-opacity {
    opacity: 0;
}
/*--- COMPONENTS --*/
/*forms*/
input[type="text"], input[type="email"], input[type="password"], input[type="search"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    border: none;
    padding: 0 1.5%;
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

select, select:hover, select:focus {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    border: none;
    background: none;
    padding: 8px 0 0 0;
    height: 30px;
    border-radius: 3px;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

    select option, select option:hover {
        padding: 5px;
    }

input[type="radio"], input[type="checkbox"], input[type="radio"]:hover, input[type="checkbox"]:hover, input[type="radio"]:focus, input[type="checkbox"]:focus {
    box-shadow: none;
    width: auto;
    padding: 0;
}

textarea, textarea:focus, textarea:hover {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    font-size: inherit;
    width: 100%;
    padding: 10px 15px;
    border: none;
    box-shadow: 0 0 0 1px #ddd;
}
/*badges*/
.badge {
    padding: 0 5px;
    font-size: inherit;
}

.badge-medium {
    padding: 3px 8px;
    font-size: 15px;
    font-size: inherit;
}

.badge-large {
    padding: 6px 15px;
    font-size: 16.5px;
}
/*overlay*/
.overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
}

    .overlay.overlay-dark {
        background-color: rgba(0, 0, 0, 0.65);
    }

    .overlay.overlay-light {
        background-color: rgba(255, 255, 255, 0.85);
    }
/*--- RESPONSIVE ---*/
/*desktop*/
@media screen and (min-width:800px) {
    .mobile, .tablet {
        display: none;
    }

    .desktop {
        display: inherit;
    }
}
/*tablet*/
@media screen and (max-width:800px) {
    .mobile, .desktop {
        display: none;
    }

    .tablet {
        display: inherit;
    }

    .line-tablet {
        width: 100%;
        margin: 0 auto;
    }
}
/*mobile*/
@media screen and (max-width:400px) {
    .tablet, .desktop {
        display: none;
    }

    .mobile {
        display: inherit;
    }

    .line-mobile {
        width: 100%;
        margin: 0 auto;
    }
}