core.css

core.css

.line,
.line-compress {
    float: left;
    width: 100%
}

a,
button {
    cursor: pointer
}

.btn.active,
.btn:focus,
.btn:hover {
    text-decoration: none
}

.btn,
.line,
.line-compress,
select,
select:focus,
select:hover,
textarea,
textarea:focus,
textarea:hover {
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

.bottom,
.overlay {
    bottom: 0
}

.middle,
.right {
    right: 0
}

* {
    padding: 0;
    margin: 0 auto
}

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

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

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

h1 {
    font-size: 23px
}

h2 {
    font-size: 18px
}

h3 {
    font-size: 16.5px
}

h4 {
    font-size: 14.5px
}

h6 {
    font-size: 12.5px
}

.line {
    box-sizing: border-box;
    clear: right
}

.line-compress {
    box-sizing: border-box;
    clear: right;
    padding: 0 2%
}

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

.btn,
.col10,
.hr,
.separator10,
.separator100,
.separator15,
.separator3,
.separator30,
.separator70,
.separator50 {
    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%
}

button {
    border: none
}

.btn {
    box-sizing: border-box;
    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: .8
}

.btn:focus {
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .1)inset
}

.btn.active {
    box-shadow: 0 0 0 200px rgba(0, 0, 0, .09)inset
}

.btn.active:hover {
    opacity: 1
}

.btn.disabled {
    cursor: none
}

.color-white {
    color: #fff
}

.color-black {
    color: #333
}

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

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

.color-error {
    color: red
}

.color-info {
    color: #3F42F6
}

.color-success {
    color: #2AC171
}

.hr {
    border-top: 1px solid rgba(0, 0, 0, .05);
    float: none;
    clear: both;
    height: 0
}

.push-left {
    float: left
}

.push-right {
    float: right
}

.push-center {
    margin: 0 auto;
    float: none
}

.center-content {
    text-align: center
}

.left-content {
    text-align: left
}

.right-content {
    text-align: right
}

.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-light {
    font-weight: lighter
}

.font-medium {
    font-weight: 500
}

.font-bold {
    font-weight: 700
}

.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
}

.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
}

.layer1 {
    z-index: 1
}

.layer2 {
    z-index: 2
}

.layer3 {
    z-index: 3
}

.layer4 {
    z-index: 4
}

.border {
    -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1)
}

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

.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 #90ee90;
    -webkit-box-shadow: 0 0 0 1px #90ee90;
    box-shadow: 0 0 0 1px #90ee90
}

.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%
}

.separator3 {
    min-height: 3px;
    clear: both;
    float: none
}

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

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

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

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

.separator70 {
    min-height: 70px;
    clear: both;
    float: none
}

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

.separator100 {
    min-height: 100px;
    clear: both;
    float: none
}

.hide {
    display: none
}

.show {
    display: inherit
}

.hidden {
    visibility: hidden
}

.visible {
    visibility: visible
}

.half-opacity {
    opacity: .5
}

.less-opacity {
    opacity: .75
}

.toggle-opacity-hover {
    opacity: .65
}

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

.toggle-opacity-inverse-hover:hover {
    opacity: .65
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.relative-absolute {
    position: relative absolute
}

.top {
    top: 0
}

.left {
    left: 0
}

.middle {
    left: 0
}

.bg-black {
    background-color: #222
}

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

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

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

.bg-error {
    background-color: red
}

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

.bg-success {
    background-color: green
}

@-webkit-keyframes fadeOut {
    25% {
        opacity: .6
    }
    75% {
        opacity: .4
    }
    100% {
        opacity: 0
    }
}

@keyframes fadeOut {
    25% {
        opacity: .6
    }
    75% {
        opacity: .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 .85s linear;
    -moz-animation: fadeOut .85s linear;
    -o-animation: fadeOut .85s linear;
    animation: fadeOut .85s linear;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards
}

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

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

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

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

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

.no-border {
    border: none
}

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

.no-bg {
    background-color: none
}

.no-padding {
    padding: 0
}

.no-margin {
    margin: 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
}

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, .15);
    -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15)
}

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

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

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

textarea,
textarea:focus,
textarea:hover {
    box-sizing: border-box;
    font-size: inherit;
    width: 100%;
    padding: 10px 15px;
    border: none;
    box-shadow: 0 0 0 1px #ddd
}

.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 {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 100%
}

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

.overlay.overlay-light {
    background-color: rgba(255, 255, 255, .85)
}

*,
h5 {
    font-size: 13.5px
}

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

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

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