/*
 * --------------
 * General styles
 * --------------
 */

*::selection {
    background-color: var( --color-orange );
}

body {
    overflow: hidden;
    width: 100vw;
    height: auto;
    font-size: 14px;
    line-height: 1.6em;
    letter-spacing: 0;
    color: var( --color-panthablack );
    font-family: var( --font-text ) !important;
}

.mobile.sidebar-opened body,
body.scroll-disabled {
    height: 100vh;
}

body.dragging {
    pointer-events: none;
}

.blockUI {
    opacity: 1 !important;
}

.loading {
    pointer-events: none;
}

.blockUI,
.loading {
    border: none !important;
    overflow: hidden;
}

.blockUI::after,
.loading::after {
    content: '';
    position: absolute;
    z-index: 50;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient( 45deg, var( --color-pearlgray-light ) 0px, var( --color-pearlgray-light ) 10px, var( --color-white ) 10px, var( --color-white ) 20px );
    animation-name: loading;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    background-size: 28.2842712475px 28.2842712475px;
    background-repeat: repeat;
    opacity: 0.9;
    border: 1px solid var( --color-pearlgray-light );
}

@keyframes loading {
    0% { 
        background-position: 0px;
    }
    100% { 
        background-position: 28.2842712475px;
    }
}

.hidden {
    display: none !important;
}

.element-collapsed {
    height: 0;
    overflow: hidden;
}

.heading {
    font-family: 'Oswald' !important;
    line-height: 1.2em !important; 
    text-transform: uppercase !important;
}

.large {
    font-weight: 700 !important;
    line-height: 1.2em !important; 
}

ul.large {
    padding-left: 1.6em !important;
}

ul.large > li {
    font-size: calc( 14px * 1.5 ) !important;
}

p.large, i.large, span.large {
    font-size: calc( 14px * 1.5 ) !important;
}

h1.large {
    font-size: calc( 50px * 1.5 ) !important;
}

h2.large {
    font-size: calc( 40px * 1.5 ) !important;
}

h3.large {
    font-size: calc( 20px * 1.5 ) !important;
}

h4.large {
    font-size: calc( 16px * 1.5 ) !important;
}

h5.large {
    font-size: calc( 10px * 1.5 ) !important;
}

.absolute-top-0 {
    position: absolute !important;
    top: 0 !important;
}

.absolute-top-10 {
    position: absolute !important;
    top: 10px !important;
}

.absolute-top-20 {
    position: absolute !important;
    top: 20px !important;
}

.absolute-right-0 {
    position: absolute !important;
    right: 0 !important;
}

.absolute-right-10 {
    position: absolute !important;
    right: 10px !important;
}

.absolute-right-20 {
    position: absolute !important;
    right: 20px !important;
}

.absolute-left-0 {
    position: absolute !important;
    left: 0 !important;
}

.absolute-left-10 {
    position: absolute !important;
    left: 10px !important;
}

.absolute-left-20 {
    position: absolute !important;
    left: 20px !important;
}

.absolute-bottom-0 {
    position: absolute !important;
    bottom: 0 !important;
}

.absolute-bottom-10 {
    position: absolute !important;
    bottom: 10px !important;
}

.absolute-bottom-20 {
    position: absolute !important;
    bottom: 10px !important;
}

.center-container-vertical {
    margin: 0 auto !important;
}

.background-top-left {
    background-position: top left !important;
}

.background-top-center {
    background-position: top center !important;
}

.background-top-right {
    background-position: top right !important;
}

.background-center-left {
    background-position: center left !important;
}

.background-center-center {
    background-position: center center !important;
}

.background-center-right {
    background-position: center right !important;
}

.background-bottom-left {
    background-position: bottom left !important;
}

.background-bottom-center {
    background-position: bottom center !important;
}

.background-bottom-right {
    background-position: bottom right !important;
}

.first-on-page {
    margin-top: 40px;
}

.last-on-page {
    margin-bottom: 80px;
}

.image-container-sm {
    max-width:  200px;
    max-height: 200px;
}

.image-container-md {
    max-width:  300px;
    max-height: 300px;
}

.image-container-lg {
    max-width:  400px;
    max-height: 400px;
}

.contain-image {
    padding-top: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    display: table;
}

.contain-image img {
    position: absolute;
    top: -50%;
    left: -50%;
    object-fit: cover;
    min-height: 100%;
    min-width: 100%;
    -webkit-transform: translate(50%,50%);
    -moz-transform:    translate(50%,50%);
    -ms-transform:     translate(50%,50%);
    -o-transform:      translate(50%,50%);
    transform:         translate(50%,50%);
}