/* Box sizing */
.box-border { box-sizing: border-box !important; }
.box-content { box-sizing: content-box !important; }
.box-unset { box-sizing: unset !important; }

/* Overflow */
.o-hidden { overflow: hidden !important; }
.o-scroll { overflow: scroll !important; }
.o-auto { overflow: auto !important; }
.o-inherit { overflow: inherit !important; }
.o-unset { overflow: unset !important; }

.no-scrollbar {
overscroll-behavior: none !important;
-ms-overflow-style: none !important;
scrollbar-width: none !important;
}
.no-scrollbar::-webkit-scrollbar { display: none !important; }

.multiply { mix-blend-mode: multiply !important; }
.overlay { mix-blend-mode: overlay !important; }
.greyscale { filter: grayscale(1) !important; }
.invert { filter: invert(1) !important; }

.blur-1 { 
-webkit-backdrop-filter: blur(calc(var(--spacer) * 1)) !important; 
backdrop-filter: blur(calc(var(--spacer) * 1)) !important; 
}
.blur-2 { 
-webkit-backdrop-filter: blur(calc(var(--spacer) * 2)) !important; 
backdrop-filter: blur(calc(var(--spacer) * 2)) !important; 
}
.blur-3 { 
backdrop-filter: blur(calc(var(--spacer) * 3)) !important; 
-webkit-backdrop-filter: blur(calc(var(--spacer) * 3)) !important; 
}
.blur-4 { 
backdrop-filter: blur(calc(var(--spacer) * 4)) !important; 
-webkit-backdrop-filter: blur(calc(var(--spacer) * 4)) !important; 
}
.blur-5 { 
backdrop-filter: blur(calc(var(--spacer) * 5)) !important; 
-webkit-backdrop-filter: blur(calc(var(--spacer) * 5)) !important; 
}

/* Transition */
.t-duration-0 { transition-duration: 0s; }
.t-duration-1 { transition-duration: .1s; }
.t-duration-2 { transition-duration: .2s; }
.t-duration-3 { transition-duration: .3s; }
.t-duration-4 { transition-duration: .4s; }
.t-duration-5 { transition-duration: .5s; }
.t-duration-6 { transition-duration: .6s; }
.t-duration-7 { transition-duration: .7s; }
.t-duration-8 { transition-duration: .8s; }
.t-duration-9 { transition-duration: .9s; }
.t-duration-10 { transition-duration: 1s; }
.t-duration-11 { transition-duration: 1.1s; }
.t-duration-12 { transition-duration: 1.2s; }
.t-duration-13 { transition-duration: 1.3s; }
.t-duration-14 { transition-duration: 1.4s; }
.t-duration-15 { transition-duration: 1.5s; }

.t-effect-linear { transition-timing-function: linear; }
.t-effect-ease-in { transition-timing-function: ease-in; }
.t-effect-cubic { transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96); }

/* Background Video */
video.bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
}

/* Background Image */
div.bg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 101%;
height: 101%;
transition: 1s;
}
div.bg-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 101%;
height: 101%;
background-size: cover;
background-image: var(--default-image);
background-color: #fff;
background-position: center;
background-repeat: no-repeat;
transition: 1s;
}
div.bg-img-f {
position: absolute;
top: 0;
left: 0;
width: 101%;
height: 101%;
background-size: cover;
background-image: var(--default-image);
background-color: #fff;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
img.bg,
iframe.bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 101%;
height: 101%;
}

.bg-cover {
object-fit: cover !important;
background-size: cover !important;
}
.bg-contain {
object-fit: contain !important;
background-size: contain !important;
}
.o-center {
object-position: center !important;
background-position: center !important;
}
.o-top {
object-position: top !important;
background-position: top !important;
}
.o-right {
object-position: right !important;
background-position: right !important;
}
.o-bottom {
object-position: bottom !important;
background-position: bottom !important;
}
.o-left {
object-position: left !important;
background-position: left !important;
}

.skeleton {
animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
0% { background-color: hsl(10, 0%, 85%); }
100% { background-color: hsl(10, 0%, 95%); }
}
@media (max-width: 1000px) {
.t-box-border { box-sizing: border-box !important; }
.t-box-content { box-sizing: content-box !important; }
.t-box-unset { box-sizing: unset !important; }
.o-t-center {
object-position: center !important;
background-position: center !important;
}
.o-t-top {
object-position: top !important;
background-position: top !important;
}
.o-t-right {
object-position: right !important;
background-position: right !important;
}
.o-t-bottom {
object-position: bottom !important;
background-position: bottom !important;
}
.o-t-left {
object-position: left !important;
background-position: left !important;
}     
}
@media (max-width: 768px) {
.p-box-border { box-sizing: border-box !important; }
.p-box-content { box-sizing: content-box !important; }
.p-box-unset { box-sizing: unset !important; }
.o-p-center {
object-position: center !important;
background-position: center !important;
}
.o-p-top {
object-position: top !important;
background-position: top !important;
}
.o-p-right {
object-position: right !important;
background-position: right !important;
}
.o-p-bottom {
object-position: bottom !important;
background-position: bottom !important;
}
.o-p-left {
object-position: left !important;
background-position: left !important;
}
div.bg-img-f {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 101%;
height: 101%;
background-size: cover;
background-image: var(--default-image);
background-color: #fff;
background-position: center;
background-repeat: no-repeat;
background-attachment: unset;
}
}