@charset "utf-8";
/* CSS Document */
/* Fencetech landing page*/
/*

8px: 0.5rem;
16px: 1rem;
24px: 1.5rem;
32px: 2rem;
40px: 2.5rem;
48px: 3rem;
56px: 3.5rem;
64px: 4rem;

*/

*, *:before, *:after {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}


:root {
    --site-inner-width: 1200px;
    --site-align: 0px auto;
    --margin-vrt: clamp(2rem, -0.143rem + 5.714vw, 5rem);
    --margin-vrt-md: clamp(1.5rem, 0.429rem + 2.857vw, 3rem);
    --margin-vrt-lg: clamp(4rem, 2.571rem + 3.81vw, 6rem);
}


iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 10vh;        /* Viewport-relative units */
    min-height: 1100px;
    width: 100vw;
}

.radial-rotate {
    background: radial-gradient(#c1022f 0%, #000000 80%);
    background-size: 300% 200%;
    background-position: 0% 0%;
    animation: bg-rotate 15s ease infinite;
}

@keyframes bg-rotate {

0% {
    background-position: 0% 100%;
}

50% {
    background-position: 100% 60%;
}

100% {
    background-position: 0% 100%;
}

}
.green {color: #71c221!important}

html {scroll-behavior: smooth;}

body {
    padding: 0px; 
    margin: 0px; 
    font-family: "aktiv-grotesk", "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";    
    font-size: 16px; /* 16px = 1rem */
    font-size: clamp(1rem, calc(2.5vw + 1rem), 1rem);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background-color: #000000;
    color: #FFFFFF;
    
   
}

h1 {font-weight: normal; font-size: clamp(2.2rem, calc(2.5vw + 1rem), 3rem);  margin:0px 0px 40px 0px; line-height: 1.3em;}
h2 {font-weight: normal; font-size: clamp(1.4rem, calc(1.5vw + 1rem), 1.8rem); margin:0px 0px 20px 0px; line-height: 1.3em; }
h3 {font-weight: normal; font-size: 1.1rem; }
hr {width: 100%; margin: 40px 0px 20px 0px; opacity: 0.3;}


.internal-pad {padding-left: var(--margin-vrt-md); padding-right: var(--margin-vrt-md);}

.inner-constrained {
    margin: 0px auto;
    max-width: 1400px;
    padding: 0 clamp(1rem, 0.286rem + 1.905vw, 2rem) 0 clamp(1rem, 0.286rem + 1.905vw, 2rem);
}

.button-container {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap:2rem;
    margin-top: var(--margin-vrt-md);
    margin-bottom: var(--margin-vrt-md);
}

a.button {
    color: #FFFFFF;
    background: #2e3d48;
    text-decoration: inherit;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 1rem 2rem;
    transition: background ease-in-out 0.2s;
}

a.button:hover { background: #11120e;} 


button {
    color: #FFFFFF;
    background: #2e3d48;
    text-decoration: inherit;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 1rem 2rem;
    transition: background ease-in-out 0.2s;
    cursor: pointer;
}

button:hover { background: #11120e;} 

.border-gradient {
  border: 10px solid;
  border-image-slice: 1;
  border-width: 3px;
}
.border-gradient-red {
  border-image-source: linear-gradient(to left, #000000, #c1022f);
}

@media screen and (max-width: 400px) {
   a.button {
    
    font-size: 0.9rem;
    
}
    
    button {
    
    font-size: 0.9rem;
    
}
}


/* header */ 

header {
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: clamp(1rem, 0.286rem + 1.905vw, 2rem)!important;
}

.logo {}
.logo img {width: 150px; height: auto}

/* Nav */ 

nav {
    display: flex;
    justify-content:space-between;
    align-items: center;
    gap:2rem; 
}
nav a {
    color: #FFF;
    text-decoration: none;
    transition: color ease-in-out 0.2s;
}

nav a:hover {color:#c1022f; }

@media screen and (max-width: 1000px) {
    
    header {
    display: flex;
    justify-content:space-between;
    flex-direction: column;
    align-items: center;
    gap:2rem;
    padding: clamp(1rem, 0.286rem + 1.905vw, 2rem)!important;
}
    
    nav {
    display: flex;
    justify-content:space-between;
    align-items: center;
    gap:2rem;
       
       
}
}

@media screen and (max-width: 400px) {
    nav a {
    font-size: 0.9rem;
}
}

/* Main */

main {


}


/* Hero*/

.hero-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #11120e;
    background-image: url("../image/hero-banner-bg.png");
    background-size: cover;
    background-position: center;
    }

video {width: 100%!important; height: auto!important}

.hero-banner-border {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    margin-bottom: var(--margin-vrt);
    
}
.hero-banner-border span {
    display: block; height: 15px;
}

.hero-banner-border span:nth-of-type(1) {background-color: #2c0000;}
.hero-banner-border span:nth-of-type(2) {background-color: #410000;}
.hero-banner-border span:nth-of-type(3) {background-color: #560000;}
.hero-banner-border span:nth-of-type(4) {background-color: #6c022f;}
.hero-banner-border span:nth-of-type(5) {background-color: #8d022f;}
.hero-banner-border span:nth-of-type(6) {background-color: #c1022f;}


/* Sections */

.gradient-padding {
    position: relative;
    padding-top:var(--margin-vrt-lg);
    padding-bottom: var(--margin-vrt-lg);
}

.gradient-padding::before {
    position: absolute;
    bottom: 0px;
    display: block;
    content: '';
    height: 280px;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 3%, rgba(0,0,0,0.7567401960784313) 13%, rgba(0,0,0,0) 64%);
    width: 100%;

}

.bg-split {
    padding-bottom: var(--margin-vrt-lg);
    background: rgb(33,30,30);
background: linear-gradient(0deg, rgba(33,30,30,1) 0%, rgba(65,1,7,1) 42%, rgba(190,2,47,1) 71%, rgba(190,2,47,0) 71%);
}


.dates {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap:4rem;
    margin-top: var(--margin-vrt-md);
    margin-bottom: var(--margin-vrt-md);
}

.dates .date-item {
    display: flex;
    align-items: center;
    gap:2rem;
}
.dates .date-item .date-image {
    width: 100px;
    height: 100px;
    background: rgb(36,42,46);
    background: linear-gradient(107deg, rgba(36,42,46,1) 34%, rgba(48,65,78,1) 80%);
    padding:20px;
}

.dates .date-item .date-image img {width: 54px; height: 54px}
.dates .date-item .date-text {text-align: left; font-size: 18px;}


@media screen and (max-width: 1000px) {
    .dates {
    display: flex;
    flex-direction: column;
}
    
    
    .dates .date-item {
    display: flex;
    width: 100%;
    max-width: 300px;
    align-items: center;
    gap:2rem;
     
}
    
    
}


.gradient-container {
    padding-top: 1px;
    padding-bottom: 1px;
    background: rgb(8,0,2);
    background: linear-gradient(107deg, rgba(8,0,2,1) 0%, rgba(54,0,13,1) 14%, rgba(0,0,0,1) 34%);
    background-size: contain!important
}


.gradient-containerxxx {
    padding-top: 1px;
    padding-bottom: 1px;
    background-image: url("../image/gradient.png");
    background-size: contain!important;
    background-repeat: no-repeat;
    background-position: left center;
}


section {
    margin-top: var(--margin-vrt-lg);
    margin-bottom: var(--margin-vrt-lg);
    text-align: center;
    
}

section.form-container-section {
    margin-bottom: 0px!important;
     
}

/* Hotspot section*/

.hotspot-container {
    position: relative;
     margin-top: var(--margin-vrt-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #11120e;
    background-size: cover;
    background-position: center;
    }


.hotspot {}
.hotspot .pulse-cross {width: 18.5%; display: block; height: 23%;  opacity: 0.4; animation: pulse 2s infinite }
.hotspot:hover .pulse-cross {background-color: rgba(255, 255, 255, 0.2); animation: pulse 2s infinite}


.hotspot-container img {width: 100%; height: auto}

.hotspot-actuator {position: absolute; width: 14.5%; height: 18%; left: 5.0%; top: 12%;  opacity: 1;  cursor: pointer}
.hotspot-swing {position: absolute; width: 14.5%; height: 18%; left: 28.5%; top: 6.5%;  opacity: 1;  cursor: pointer }
.hotspot-spartan {position: absolute; width: 14.5%; height: 18%; left: 5.2%; bottom: 4%;  opacity: 1; cursor: pointer }
.hotspot-cap {position: absolute; width: 14.5%; height: 18%; left: 48%; top: 3.5%;  opacity: 1;  cursor: pointer }
.hotspot-myq {position: absolute; width: 14.5%; height: 18%; right: 5.6%; top: 6%;  opacity: 1;  cursor: pointer }
.hotspot-techna {position: absolute; width: 14.5%; height: 18%; right: 4.7%; bottom: 4.5%;  opacity: 1;  cursor: pointer }

.hotspot-actuator .pulse-cross {position: absolute; right: 13.7%; top: 37.5%; }
.hotspot-swing .pulse-cross {position: absolute; right: 7%; top: 30.5%; }
.hotspot-spartan .pulse-cross {position: absolute; right: 9.5%; top: 38%; }
.hotspot-cap .pulse-cross {position: absolute; right: 12.7%; top: 29%; }
.hotspot-myq .pulse-cross {position: absolute; right: 11.0%; top: 38.5%; border-radius: 3px; }
.hotspot-techna .pulse-cross {position: absolute; right: 4.5%; top: 35.5%; }

/* game section*/

.game-container {
    margin-top: var(--margin-vrt-lg);
    padding: 0 var(--margin-vrt-md) 0 0;
    display: flex;
    gap:var(--margin-vrt-md);
   
    justify-items: flex-end;
    background: rgb(8,0,2);
    background: linear-gradient(38deg, rgba(8,0,2,1) 0%, rgba(54,0,13,1) 49%, rgba(193,1,48,1) 93%);
    
    }
.game-container .text {text-align: left; display: flex;  justify-content: space-between; flex-direction: column; flex-wrap: wrap; padding-top:var(--margin-vrt-md)}
.game-container .text a {color: #FFFFFF}
.game-container .text .text-inner {padding: 0 var(--margin-vrt-md) 20px}
.game-container .text .airpods { display: flex; }
.game-container .text .airpods img {max-width: 200px; width: 100%; height: auto!important; display: block}
.game-container .animation {padding:var(--margin-vrt-md) 0}
.game-container .animation img {width: 100%; height: auto}

.rules {text-decoration:underline; font-size: 0.8rem; cursor: pointer}

@media screen and (max-width: 1000px) {
    
    .game-container {
        padding:var(--margin-vrt-md);
    flex-direction: column
    } 
    
    .game-container .text .airpods { padding-top: 30px; display: flex; justify-content: center }
    .game-container .text {text-align: center;}
    .game-container .text .text-inner {padding: 0}
    .game-container .animation {padding: 0}
}


/* form section*/

.form-container {
    margin-top: var(--margin-vrt-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFF;
    padding: var(--margin-vrt-md); 
    }


.form-container form {display: grid; grid-template-columns: 1fr 1fr; gap:var(--margin-vrt-md) ; width: 100%;}

.form-container form input {width: 100%; display: block!important; background: #000000; color: #FFFFFF; padding:15px 20px; border: 0; border-radius: 3px; }
.form-container form label {width: 100%; text-align: left; display: block; margin-bottom: 5px; font-size: 0.9rem}
.form-container form .button-grid { grid-column: 1 / 3;}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF;
  -webkit-box-shadow: 0 0 0px 40rem #000000 inset;
}


/* footer */

footer {
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    background: rgb(20,22,23);
    background: linear-gradient(50deg, rgba(20,22,23,1) 0%, rgba(18,8,8,1) 50%, rgba(32,0,1,1) 100%);
}

footer .footer-inner-box {
    width: 80%;
    max-width: 1200px;
    margin-top: var(--margin-vrt);
    margin-bottom: var(--margin-vrt);
    padding:clamp(1rem, 0.286rem + 1.905vw, 2rem);
    background-color: #1a1f22;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
     align-items: center;
}

footer .footer-inner-box .footer-grid-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem
    
}

footer .footer-inner-box .footer-grid-item .socials {
    display: flex;
    gap: 1rem;
}
footer .footer-inner-box .footer-grid-item .socials img {
    width: 100%;
    height: auto;
    max-width: 44px;
}

footer .footer-inner-box .footer-grid-item img {
    width: 100%;
    height: auto;
    max-width: 180px;

}

footer .footer-inner-box .footer-grid-item:nth-of-type(2) {
    border-left: 1px solid #6a6e6f;
    border-right: 1px solid #6a6e6f;
}

footer .footer-legal {
    width: 80%;
    max-width: 1000px;
    margin-bottom: var(--margin-vrt);
    padding:clamp(1rem, 0.286rem + 1.905vw, 2rem);
    text-align: center;
    font-size: 0.9rem;
}


@media screen and (max-width: 800px) {
    
    footer .footer-inner-box {
   width: 94%;
    grid-template-columns: 1fr;
    
}
    footer .footer-inner-box .footer-grid-item:nth-of-type(2) {
    border-left: 0px solid #6a6e6f;
    border-right: 0px solid #6a6e6f;
        border-top: 1px solid #6a6e6f;
    border-bottom: 1px solid #6a6e6f;
        margin-top: 20px;
        margin-bottom: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
}
}
/* Modal styles */ 

.modal {
    position: fixed;
    top: 0;
    right: 0%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,0.99);
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease;
    color: #000000;
    box-sizing: border-box
}

.modal button.close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0,0,0,0.99);
    font-size: 1.5rem;
    cursor: pointer;
    color: #FFFFFF;
    z-index: 10;
    width: 35px;
    height: 35px;
    padding: 0px;
}

.modal button:hover.close {color: #c10230;}

.visible {
    opacity: 1;
    right: 0px;
    pointer-events: all;
}

.modal-inner {position: relative; width: 85%; max-width: 1336px; background-color: #11120e; padding: var(--margin-vrt);   color: #FFFFFF; display: flex; align-items: center; justify-content: center}


.modal-inner-pad { background-color: #000000; width: 100%; display: flex; align-content: flex-end }
.modal-inner-pad .image {display: flex; width: 40%; flex-direction: column; justify-content: flex-end; }
.modal-inner-pad .image img {width: 100%!important; height: auto!important}
.modal-inner-pad .text  { width: 60%; padding: var(--margin-vrt);}
.modal-inner-pad .text a.button {margin-top: 20px; display: inline-block;}
.modal-inner-pad .text-rules {max-height: 500px; padding: 30px; height: 100%; overflow-y: scroll; overflow-x: hidden; font-size: 0.8rem;}


@media screen and (max-width: 1000px) {
    
    .modal-inner-pad { flex-direction: column}
    .modal-inner-pad .image {width: 100%; text-align: center; align-items: center}
    .modal-inner-pad .image img {width: 50%!important; height: auto!important}
    .modal-inner-pad .text {width: 100%;}
}

@media screen and (max-width: 480px) {
    .modal {padding: 0.9rem;}
    
    .modal-inner-pad .image {display: none;}
    .modal-inner { width: 95%; padding: 10px;  }
    .modal-inner-pad .text {width: 100%; padding:1rem}
}


@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}