/* 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; }

/* Border */
.b-0 { border: none !important; }
.b-1 { border: 1px solid currentColor !important; }
.b-2 { border: 2px solid currentColor !important; }
.b-3 { border: 3px solid currentColor !important; }

.bt-0 { border-top: none !important; }
.bt-1 { border-top: 1px solid currentColor !important; }
.bt-2 { border-top: 2px solid currentColor !important; }
.bt-3 { border-top: 3px solid currentColor !important; }

.br-0 { border-right: none !important; }
.br-1 { border-right: 1px solid currentColor !important; }
.br-2 { border-right: 2px solid currentColor !important; }
.br-3 { border-right: 3px solid currentColor !important; }

.bb-0 { border-bottom: none !important; }
.bb-1 { border-bottom: 1px solid currentColor !important; }
.bb-2 { border-bottom: 2px solid currentColor !important; }
.bb-3 { border-bottom: 3px solid currentColor !important; }

.br-0 { border-right: none !important; }
.br-1 { border-right: 1px solid currentColor !important; }
.br-2 { border-right: 2px solid currentColor !important; }
.br-3 { border-right: 3px solid currentColor !important; }

.b-shadow { box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; }
.b-r { border-radius: 50% !important; }
.b-r-1 { border-radius: 1px !important; }
.b-r-2 { border-radius: 2px !important; }
.b-r-3 { border-radius: 3px !important; }
.b-r-4 { border-radius: 4px !important; }
.b-r-5 { border-radius: 5px !important; }
.b-r-6 { border-radius: 6px !important; }
.b-r-7 { border-radius: 7px !important; }
.b-r-8 { border-radius: 8px !important; }
.b-r-9 { border-radius: 9px !important; }
.b-r-10 { border-radius: 10px !important; }

/* Opacity */
.o-0 { opacity: 0 !important; }
.o-5 { opacity: .05 !important; }
.o-10 { opacity: .1 !important; }
.o-15 { opacity: .15 !important; }
.o-20 { opacity: .2 !important; }
.o-25 { opacity: .25 !important; }
.o-30 { opacity: .3 !important; }
.o-35 { opacity: .35 !important; }
.o-40 { opacity: .4 !important; }
.o-45 { opacity: .45 !important; }
.o-50 { opacity: .5 !important; }
.o-55 { opacity: .55 !important; }
.o-60 { opacity: .6 !important; }
.o-65 { opacity: .65 !important; }
.o-70 { opacity: .7 !important; }
.o-75 { opacity: .75 !important; }
.o-80 { opacity: .8 !important; }
.o-85 { opacity: .85 !important; }
.o-90 { opacity: .9 !important; }
.o-95 { opacity: .95 !important; }
.o-100 { opacity: 1 !important; }

/* Cursor */
.c-pointer { cursor: pointer !important; }
.c-copy { cursor: copy !important; }
.c-auto { cursor: auto !important; }
.c-lens { cursor: zoom-in !important; }

.unselectable {
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
-khtml-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important; 
}
.no-scrollbar {
overscroll-behavior: none !important;
-ms-overflow-style: none !important;
scrollbar-width: none !important;
}
.no-scrollbar::-webkit-scrollbar { display: none !important; }

.no-interaction { pointer-events: none !important; }

.multiply { mix-blend-mode: multiply !important; }
.overlay { mix-blend-mode: overlay !important; }
.greyscale { filter: grayscale(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; 
}

/* 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: 768px) {
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;
}
}