html {
background-color: #040404;
/* background-image: url(../images/bg-page.jpg); */
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-attachment: fixed;
}
/* reset bold */
b {
font-weight: 200;
}
/* Remove cursor */
.no-cursor {
cursor: default !important;
}
/* Remove padding */
.no-padding {
padding: 0 !important;
}
.icon {
width: 24px;
height: 24px;
fill: currentColor;
position: relative;
}
/* This height cover the full page view */
.height-100 {
height: 100vh;
min-height: 100%;
}
/* This height cover the full page view for all media */
.height-100-media {
height: 100vh;
}
/* This height is set to cover 2/3 page view */
.height-75 {
height: 75vh;
}
/* This height is set to cover 1/2 page view */
.height-50 {
height: 50vh;
}
/* This height is set to cover 1/3 page view */
.height-33 {
height: 33.33vh;
}
/* This height is set to cover 1/4 page view */
.height-25 {
height: 25vh;
}
/* This height is set to cover 1/4 page view */
.height-20 {
height: 20vh;
}
/* Height 100-Custom subtract px from 100% */
.height-100-custom {
height: calc(100vh - 400px);
}
/* This is a custom height */
.height-custom {
height: 400px;
}
/* Vertical align center */
.v-center {
align-items: center;
display: flex;
}
/* Horizontal align center */
.h-center {
justify-content: center;
display: flex;
}
/* This one allows to put any layer in the BG */
.z-index-up-9 {
z-index: 9;
}
/* This one allows to put a space on top of a block */
.block-break-top {
margin-top: 100px;
}
/* This one allows to put a space on bottom of a block */
.block-break-bottom {
margin-bottom: 120px;
}
/* This can be used to put a margin on the page top, after the menu */
.page-top-margin {
margin-top: 100px;
}
.card-bg {
background-image: url(../images/bg-texture.png);
background-repeat: repeat;
}
.block-poster {
height: 100vh;
margin-right: 5px;
background-image: url(../images/bg-texture.png);
background-repeat: repeat;
}
.block-poster img {
height: 100vh;
object-fit: cover;
}
.col-container {
display: flex;
}
.kapow-content {
overflow: hidden;
height: 100vh;
}
.block-scroll {
height: auto;
overflow-x: auto;
display: -webkit-inline-box;
scrollbar-width: none !important;
}
.kapow-col {
width: 420px;
margin-right: 5px;
}
.kapow-col-last {
width: 420px;
}
.kapow-card {
background-color: #040404;
margin-bottom: 5px;
overflow: hidden;
position: relative;
scrollbar-width: none !important;
}
.kapow-card-video {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
background-color: #0e0e0e;
}
.custom-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 2;
pointer-events: none;
}
.kapow-card-video video {
position: relative;
z-index: 1;
width: 100%;
height: auto;
cursor: url("../images/glove-cursor.png") 16 16, pointer;
}
.kapow-card-active:hover {
filter: brightness(.5);
transition: all .2s ease-in-out;
cursor: url("../images/glove-cursor.png") 16 16, pointer;
}
.kapow-card:last-child {
margin-bottom: 0;
}
.card-33 {
height: 33vh;
}
.card-50 {
height: 50vh;
}
.card-100 {
height: 100vh;
}
.kapow-card img {
object-fit: cover;
width: 100%;
height: 100%;
}
.card-content {
padding: 20px;
overflow-y: auto;
}
.card-content h1 {
color: #fff;
font-size: calc(1rem + .9vw);
}
.card-content p {
color: #fff;
margin-top: 10px;
font-size: calc(.8rem + .4vw);
}
.card-content p span {
font-size: calc(1rem + .6vw);
margin-bottom: 10px;
margin-top: 20px;
display: block;
}
.card-content hr {
margin-bottom: 20px;
display: block;
margin-top: 10px;
height: 5px;
background-color: #fff;
}
.card-content i {
text-decoration: underline;
font-style: normal;
}
/* Popup CSS style */
.popup-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
z-index: 9999;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px); /* Safari support */
}
.popup-overlay.active {
opacity: 1;
visibility: visible;
}
.popup-content {
background: #040404;
max-width: 800px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
padding: 40px;
position: relative;
border: 2px dashed #393939;
transform: scale(0.95);
transition: transform 0.3s ease;
scrollbar-width: none !important;
}
.popup-overlay.active .popup-content {
transform: scale(1);
}
.popup-close {
position: absolute;
top: 15px;
right: 20px;
font-size: 26px;
color: #fff;
background: none;
border: none;
cursor: pointer;
}
body.no-scroll {
overflow: hidden;
}
/* Hidden blocks */
.popup-data {
display: none;
}
/* Example custom style */
.popup-dark {
color: #fff;
}
.popup-dark h2 {
font-size: calc(1rem + .9vw);
margin-bottom: 20px;
}
.popup-dark p {
font-size: calc(.8rem + .4vw);
margin-top: 10px;
}
.popup-dark p span {
font-size: calc(1rem + .6vw);
margin-bottom: 10px;
margin-top: 20px;
display: block;
}
.popup-dark hr {
margin-bottom: 20px;
display: block;
margin-top: 10px;
height: 5px;
background-color: #fff;
}
.popup-dark img {
width: 100%;
object-fit: cover;
margin-top: 10px;
}
.popup-dark audio {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
.col-2-content{
padding: 10px
}
.punch-hit {
animation: punchImpact 0.15s ease;
}
@keyframes punchImpact {
0% { transform: scale(1); }
40% { transform: scale(0.94); }
100% { transform: scale(1); }
}
/* --------------------------------------------------------- */
/* CSS media */
@media (max-width: 1920px) {
}
@media (max-width: 1600px) {
}
/* Macbook Pro */
@media (max-width: 1440px) {
}
/* iPad Pro */
@media (max-width: 1366px) {
}
@media (max-width: 1280px) {
}
@media (max-width: 1024px) {
}
@media (max-width: 1080px) {
}
@media (max-width: 980px) {
}
@media (max-width: 768px) {
.block-poster img {
object-fit: contain;
}
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 360px) {
}
@media (max-width: 280px) {
}