@font-face{font-family:'Font';src:url(sources/Montserrat.woff2) format("woff2");font-weight:100 900;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Font',sans-serif;text-rendering:optimizeLegibility}
:root{--orange:#ff9500;--h1-size:7.3rem;--h2-size:3.6rem;--h3-size:2.2rem;--h4-size:1.8rem;--p-size:1.05rem;--light-background:#f6f6f6;--light-border:#dcdcdc;--light-border-hover:#b9b9b9;--main-text-width:1080px;--max-width-content:1640px;--links-gap:5rem;--section-padding:6rem;--spacing-large:6rem;--spacing-medium:4rem}
html,body{-ms-overflow-style:none;overflow-x:clip;scrollbar-width:none}
html{scroll-behavior:smooth}
body{background-color:#000;top:0!important}
.goog-te-banner-frame.skiptranslate,.goog-te-gadget,.goog-te-combo,.goog-te-banner-frame,iframe.goog-te-banner-frame,body>.goog-te-banner-frame.skiptranslate{display:none!important}
.no-scroll{overflow-y:hidden!important}
.dragging{user-select:none;scroll-behavior:auto}
.section-divider{width:100%;height:2px;background-color:#fff}
.section-divider::before{content:"";position:absolute;max-width:var(--max-width-content);width:90%;height:2px;background-color:var(--light-border);left:50%;transform:translateX(-50%);border-radius:2px}
.question{display:flex;gap:8px;position:relative}
.question p{font-size:calc(var(--p-size) + 1px);font-weight:500}
.question-div{background-color:var(--orange);height:auto;width:2px}
.skew-back{transform:skew(10deg)}
.main-text{position:relative;background-color:var(--light-background);padding:1rem 1.4rem 1rem 3.2rem;border-radius:.8rem;max-width:var(--main-text-width);z-index:1}
.main-text-i{position:absolute;left:0;top:0;user-select:none;display:flex;align-items:center;justify-content:center;height:100%;width:1.8rem;background-color:#c8c8c8;border-radius:.8rem 0 0 .8rem}
.heading{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:var(--spacing-medium)}
.heading-underline{width:0;height:3px;border-radius:3px;background:linear-gradient(to left,transparent 10%,var(--orange));transform:translateY(-6px);transition:.25s}
.heading-underline.fade{width:102%}
.fade-in-equipment.fade{height:6rem;margin:0}
textarea{overflow:auto;resize:none}
p{font-size:var(--p-size);line-height:1.5}
svg{flex-shrink:0}
h2{font-size:var(--h2-size);font-weight:600;z-index:1}
#loader{display:flex;align-items:center;justify-content:center;background-color:#fff;height:100%;opacity:1;position:fixed;transition:.5s;width:100%;z-index:10}
#loader.fade{opacity:0}
#loader-svg{width:max(200px,20%)}
#loader-path{animation:draw 4s forwards;fill:transparent;stroke:#000;stroke-dasharray:1378.605;stroke-dashoffset:1378.605;stroke-width:.3}
body::-webkit-scrollbar,html::-webkit-scrollbar,#loader.deactive{display:none}
a,button,li:not(.preserve-style){all:unset;cursor:pointer;user-select:none}
@keyframes draw {0%{stroke-dashoffset:1378.605} 100%{stroke-dashoffset:0}}
#loader-path.filling{animation:filling .5s forwards;stroke-dashoffset:0}
@keyframes filling {0%{fill:transparent} 100%{fill:#000}}
nav{position:fixed;top:0;transform:translateY(0);transition:.5s;width:100%;z-index:9}
#nav{-webkit-backdrop-filter:blur(10px);align-items:center;backdrop-filter:blur(10px);background-color:#000000b3;border-bottom:1px solid #3c3c3c;display:flex;height:70px;justify-content:center;position:relative;width:100%}
#nav-wrapper{align-items:center;color:#fff;display:flex;gap:15rem;height:70px;justify-content:center;max-width:var(--max-width-content)}
nav.hidden{transform:translateY(-70px)}
#logo,#logo-footer{-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-image:linear-gradient(to right,var(--orange) 50%,#fff 50%);background-position:100%;background-size:200% 100%;font-size:23px;font-weight:500;text-transform:uppercase;transition:.25s}
#languages{align-items:center;border:1px solid #ffffff40;border-radius:25px;display:flex;gap:4px;height:25px;justify-content:center;padding:0 3px;position:relative}
#lang-selector{background-color:#fff;border-radius:19px;height:19px;position:absolute;transform:translateX(-46px);transition:.25s;width:42px}
.lang-btn{align-items:center;border-radius:19px;color:#ffffffd9;display:flex;font-size:15px;height:19px;justify-content:center;text-transform:uppercase;transition:.25s;width:42px;z-index:1}
.lang-btn.active{color:#000;font-weight:500;pointer-events:none}
.lang-btn:hover{background-color:#ffffff26;color:#fff}
#hamburger-links{align-items:flex-start;background-color:#000;color:#fff;display:flex;flex-direction:column;gap:2rem;height:100dvh;justify-content:center;list-style:none;position:absolute;top:0;transform:translateY(-100%);transition:.5s;width:100%}
#hamburger-links li{font-size:28px;letter-spacing:2px;text-transform:uppercase}
#hamburger-links div{align-items:center;cursor:pointer;display:flex;gap:16px;justify-content:center;margin-left:10%}
.arrow-in{transform:translateX(-100%);transition:.25s}
.arrow-out{transform:translateX(0);transition:.25s}
#hamburger{align-items:center;cursor:pointer;display:none;flex-direction:column;gap:6px;height:40px;justify-content:center;width:40px}
#hamburger span{background-color:#fff;border-radius:2px;height:2px;transform-origin:center;transition:.25s;width:38px}
#hamburger span:nth-of-type(2){width:28px}
#hamburger.active span:nth-of-type(1){transform:translateY(8px) rotate(45deg);width:30px}
#hamburger.active span:nth-of-type(2){width:0}
#hamburger.active span:nth-of-type(3){transform:translateY(-8px) rotate(-45deg);width:30px}
#hamburger.active:hover span:nth-of-type(1){transform:translate(6px, 8px) rotate(45deg);width:18px}
#hamburger.active:hover span:nth-of-type(3){transform:translate(-6px, -8px) rotate(-45deg);width:18px}
#nav-links{display:flex;gap:100px}
#nav-links li,#links-footer ul li{cursor:pointer;font-size:15px;letter-spacing:1px;position:relative;text-transform:uppercase;transition:.25s;user-select:none}
#news,#orders,#downloads,#contact{align-items:center;background-color:#fff;color:#000;display:flex;flex-direction:column;height:100dvh;justify-content:center;overflow:clip;position:fixed;top:100%;transition:.5s;width:100%;z-index:9}
#news.active,#orders.active,#downloads.active,#contact.active{overflow:clip auto;top:0}
#news-content,#orders-content,#downloads-content,#contact-content{display:flex;flex-direction:column;gap:var(--links-gap);padding-bottom:15vh;position:absolute;top:14vh;width:min(90%,var(--max-width-content))}
#orders-content a,#how-to-start a,#rules a,#equipment a,#crafting a{color:var(--orange);font-weight:500}
.links-heading{display:flex;flex-direction:column;gap:2px;justify-content:center}
.links-heading-flex{display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.links-top-div{background-color:var(--light-border-hover);height:1px;width:100%}
.cross{align-items:center;cursor:pointer;display:flex;height:48px;justify-content:center;transition:.25s;user-select:none;width:48px}
.cross:hover div:nth-of-type(1){transform:translate(-7px,2px) rotate(45deg);width:21px}
.cross:hover div:nth-of-type(2){transform:translate(7px,2px) rotate(-45deg);width:21px}
.cross div{background-color:#000;border-radius:2px;height:2px;position:absolute;transition:.25s;width:36px}
.cross div:nth-of-type(1){transform:rotate(45deg)}
.cross div:nth-of-type(2){transform:rotate(-45deg)}
#news-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fill,minmax(600px,1fr))}
#news-grid h3{font-size:var(--h3-size)}
#news-grid h4{font-size:var(--p-size);color:var(--orange);font-weight:500}
#news-grid>div{border:1px solid var(--light-border);border-radius:1rem;display:flex;flex-direction:column;gap:8px;padding:1.5rem;position:relative;transition:.25s}
.orders-flex{align-items:center;display:flex;justify-content:space-evenly;width:100%}
.orders-flex h3{font-size:var(--h3-size);margin-bottom:8px}
#orders-offer,#orders-form{position:relative;align-items:center;border:1px solid var(--light-border);border-radius:1rem;display:flex;flex-direction:column;gap:20px;justify-content:center;padding:24px;width:760px;background-color:#fff}
#orders-blob{position:absolute;right:-50px;bottom:-50px;filter:blur(80px);z-index:-1}
#orders-offer div{align-items:flex-start;display:flex;gap:12px;justify-content:center}
#orders-offer div svg{transform:translateY(20%)}
#orders-form{width:740px}
#form{align-items:center;display:flex;flex-direction:column;gap:16px;justify-content:center;width:100%}
#send-btn-span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:.25s;padding-bottom:2px;}
#send-btn-span.success{transform:translateY(28px)}
#send-btn-span.error{transform:translateY(-27px)}
#send-btn-span svg{flex:1}
#send-btn{align-items:center;align-self:flex-end;background-color:#000;border-radius:32px;color:#fff;display:flex;font-size:18px;font-weight:500;gap:20px;justify-content:center;margin-right:15%;padding:0 26px;overflow:hidden;height:32px}
.form-inputs{border:2px solid var(--light-border);border-radius:12px;font-weight:500;outline:none;padding:12px;width:70%}
.form-inputs:focus{border:2px solid var(--orange)}
.form-inputs::placeholder{color:var(--light-border-hover);font-size:14px}
#downloads-content a{width:max-content}
#downloads-content button{align-items:center;border:2px solid var(--orange);border-radius:32px;display:flex;font-size:18px;font-weight:500;gap:20px;justify-content:center;padding:0 26px;transition:.25s;height:28px;}
.downloads-arrow-in{transform:translateY(-100%);transition:.25s}
.downloads-arrow-out{transform:translateY(0);transition:.25s}
#downloads-content button:hover .downloads-arrow-out{transform:translateY(100%)}
#downloads-content h3{font-size:var(--h3-size);font-weight:600;margin-right:24px}
#downloads-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fill,minmax(600px,1fr))}
#downloads-grid>div{border:1px solid var(--light-border);border-radius:1rem;display:flex;flex-direction:column;gap:8px;padding:1.5rem;position:relative;transition:.25s}
#downloads-grid>div>div{display:flex;gap:24px;margin-top:12px}
.downloads-icon{position:absolute;right:20px;top:20px}
#contact-flex{align-items:flex-start;display:flex;gap:2.5rem;justify-content:center;position:relative}
#contact-flex>div:first-of-type{border-radius:1rem;box-shadow:0 0 80px 0 #e6e6e6;display:flex;flex-direction:column;gap:2rem;padding:1.5rem}
#contact-flex>div:last-of-type{border:1px solid var(--light-border);border-radius:1rem;display:flex;flex-direction:column;gap:1rem;padding:1.5rem}
.contact-option{display:flex;flex-direction:column;position:relative}
.contact-option-span{background-color:var(--light-border-hover);border-radius:2px;height:100%;position:absolute;width:2px}
.contact-option>div{display:flex;flex-direction:column;gap:4px;margin-left:14px}
.contact-option div div{align-items:center;border-radius:1rem;display:flex;flex-direction:row-reverse;gap:12px;justify-content:center;padding:8px 4px;width:min-content}
.contact-option div div p{color:#000;cursor:pointer;position:relative}
#contact-content>div:nth-of-type(3){align-items:center;border:1px solid var(--light-border);border-radius:1rem;display:flex;flex-direction:column;gap:1.5rem;padding:2rem}
#contact-content p{font-weight:500}
#contact span{color:var(--orange);cursor:pointer}
#header,#how-to-start,#dictionary,#rules,#equipment,#media,#crafting,#history{background-color:#fff;position:relative;width:100%}
#header-content{background-color:#000;color:#fff;display:flex;flex-direction:column;gap:166px;min-height:0;padding:10rem 0;position:relative}
#background-svg-header,#background-svg-right-header{mask-image:linear-gradient(to right,#8c8c8c 25%,transparent);stroke-dasharray:105.6212310791}
#background-svg-header{margin-top:50px;stroke-dashoffset:105.6212310791}
#background-svg-header.active{animation:draw-background-svg 1s forwards,loop-background-svg 30s 5s infinite ease-in-out}
#background-svg-right-header{margin-bottom:-50px;stroke-dashoffset:-105.6212310791;transform:rotate(180deg)}
#background-svg-right-header.active{animation:draw-background-svg 1s forwards,loop-background-svg 30s 20s infinite ease-in-out}
#logo:hover,#logo-footer:hover{background-position:0}
#hamburger-links.active,#downloads-content button:hover .downloads-arrow-in{transform:translateY(0)}
#hamburger-links div:hover .arrow-in,#send-btn:hover .arrow-in{transform:translateX(0)}
#hamburger-links div:hover .arrow-out,#send-btn:hover .arrow-out{transform:translateX(100%)}
#nav-links li::after,#links-footer ul li::after,.contact-option div div p::after{background-color:var(--orange);bottom:-1px;content:"";height:1px;left:0;position:absolute;transition:width .25s;width:0}
#nav-links li:hover:after,#links-footer ul li:hover:after,.contact-option div div p:hover::after{width:100%}
@keyframes draw-background-svg {0%{stroke-dashoffset:105.6212310791} 100%{stroke-dashoffset:0}}
@keyframes loop-background-svg {3%{stroke-dasharray:105.6212310791;stroke-dashoffset:-105.6212310791} 3.001%{stroke-dasharray:0 105.6212310791;stroke-dashoffset:105.6212310791} 3.002%{stroke-dasharray:105.6212310791;stroke-dashoffset:105.6212310791} 0%,6%,100%{stroke-dasharray:105.6212310791;stroke-dashoffset:0}}
#introduction-flex{align-items:center;display:flex;gap:10rem;justify-content:center;opacity:0;transition:.5s;transform:translateX(40px)}
#introduction-flex.active{opacity:1}
#introduction-left{display:flex;flex-direction:column;justify-content:center;width:640px}
#introduction-left p:nth-of-type(2){color:#fff;padding:20px 1rem}
#pridejte-se{align-items:center;color:var(--light-border-hover);display:flex;font-size:19px;font-weight:600;padding-left:1rem;transform:translateY(22px)}
#introduction-left a{display:inline-block}
.cta-button{align-items:center;background:linear-gradient(to right,var(--orange) 50%,black 50%);background-size:200% 100%;border:2px solid var(--orange);border-radius:32px;display:flex;font-size:18px;font-weight:550;justify-content:center;padding:0 34px;height:28px;transition:.25s;white-space:nowrap}
#cta-button-how-to-start{background-color:var(--orange);background-position:0;color:#000}
#cta-button-how-to-start:hover{background-position:100%;color:#fff}
#cta-button-about-sport{background-position:100%;color:#fff}
#cta-button-about-sport:hover{background-position:0;color:#000}
#introduction-left>div a:first-of-type{margin:0 0 20px 1rem}
#introduction-left>div a:last-of-type{margin:0 0 0 24px}
#h1-div{align-items:center;display:flex;justify-content:space-between}
#h1-div div{align-items:center;display:flex;flex-direction:column;justify-content:center;gap:2px}
h1{color:var(--orange);font-family:"Font",sans-serif;font-size:var(--h1-size);font-weight:750;transform:scale(1,0.9)}
#h1-description{all:unset;display:flex;align-items:center;font-size:19px;justify-content:center;letter-spacing:1px}
#h1-description span{color:#fff;opacity:0;transform:translateX(-10px);transition:.25s}
#h1-description span.active{opacity:1;transform:translateX(0)}
.h1-divider{background-color:#969696;height:1px;margin:0 18px;transition:.25s;width:18px}
#introduction-video{position:relative;width:840px}
#introduction-video a{align-items:center;display:flex;gap:4px;justify-content:center;overflow:hidden;position:absolute;right:16px;top:10px;z-index:1}
#introduction-video video{border:1px solid #3c3c3c;border-radius:1rem;height:100%;padding:4px 4px 2px;width:100%}
#arrow-div{align-items:center;top:calc(100dvh - 52px);display:flex;justify-content:center;left:50%;position:absolute;transform:translateX(-50%)}
#arrow{animation:arrowAnimation 5s infinite;stroke-dasharray:16.970561;transform:translateY(4px);transition:.25s}
#arrow.hidden{opacity:0}
@keyframes arrowAnimation {0%,100%{transform:translateY(10px)} 8%,92%{transform:translateY(4px)}}
#reading-mode{bottom:8px;position:fixed;right:12px;z-index:6}
#reading-mode-btn{all:unset;align-items:center;cursor:pointer;display:flex;flex-direction:column;justify-content:center}
@keyframes rotate-reading {to{transform:rotate(360deg)}}
#scroll-spy{position:fixed;height:100vh;top:0;right:0;z-index:8;display:flex;align-items:center;justify-content:center;transform:translateX(100%);transition:.25s}
#scroll-spy.fixed{transform:translateX(0)}
#scroll-spy-line{height:calc(60vh + 6px);width:12px;background-color:#00000040;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin-right:12px;border-radius:12px}
#scroll-spy-pointer{position:absolute;width:6px;height:6vh;border-radius:6px;transform:translateY(-27vh);background-color:#fff;margin-right:12px;cursor:grab}
#scroll-spy-pointer:active{cursor:grabbing;background-color:var(--orange)}
#scroll-spy-pointer:hover{background-color:var(--orange)}
#how-to-start{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:var(--section-padding);padding-top:calc(var(--section-padding) / 2);scroll-margin-top:6rem;width:100%}
#how-to-start-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;gap:var(--spacing-large)}
#how-to-start-flex{display:flex;align-items:center;gap:2.5rem;position:relative}
.how-to-start-option{border-radius:.8rem;padding:1.5rem 2rem 1rem 2rem;display:flex;align-items:flex-start;flex-direction:column;transform:skew(-10deg);border:1px solid var(--light-border);box-shadow:0 0 80px 0 #f0f0f0;background-color:#fff;width:790px;z-index:1}
.how-to-start-blob{position:absolute;right:-50px;bottom:-50px;filter:blur(80px);z-index:0}
.how-to-start-option a{float:right}
#map-button,#napiste-button{display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:18px;color:#000;gap:20px;padding:0 26px;border:2px solid var(--light-border-hover);border-radius:32px;margin:1.2rem 0 0 1rem;height:28px}
#napiste-button:hover .arrow-in{transform:translateX(0)}
#napiste-button:hover .arrow-out{transform:translateX(100%)}
.how-to-start-option h3{margin:0 24px 10px 0;font-size:28px}
.text-arrow{transform:translateY(15%);margin:0 3px}
.option-svg{all:unset;position:absolute;right:18px;top:18px}
#dictionary{display:flex;flex-direction:column;align-items:center;justify-content:center}
#dictionary .heading{margin:0}
#dictionary .heading-underline{background:linear-gradient(to left,black 10%,var(--orange))}
.dictionary-divider{width:100%;height:1px;background-color:#646464}
#dictionary-content{display:flex;justify-content:center;align-items:center;gap:280px;color:#fff;background-color:#000;width:100%;margin-top:-12vw;padding:2rem 0}
#dictionary-content h2{color:#fff}
#dictionary-content>div{display:flex;flex-direction:column;gap:12px;min-width:780px}
#dictionary-content>div>div{display:flex;align-items:center;justify-content:space-between;padding:0 10px}
#rules{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:var(--section-padding);padding-top:calc(var(--section-padding) / 2)}
#rules-text{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-large);max-width:var(--max-width-content);width:90%}
#rules-content{position:relative;display:flex;justify-content:center;gap:40px;user-select:none;transition:.25s}
.arrow-rules{cursor:pointer;position:absolute;top:55%;z-index:1;transition:.25s}
#arrow-rules-right{right:calc(50vw - (650px));transform:translateY(-50%) rotate(-90deg)}
#arrow-rules-left{left:calc(50vw - (650px));transform:translateY(-50%) rotate(90deg)}
.arrow-rules.deactive{pointer-events:none}
.arrow-rules.deactive path{fill:var(--light-border)!important}
.rules-div{width:538px;box-shadow:0 0 80px 0 var(--light-border);position:relative;display:flex;flex-direction:column;gap:12px;padding:2rem;border-radius:1rem;transition:.25s;border:1px solid var(--light-border)}
.rules-div>div{display:flex;flex-direction:column;gap:2px}
.rules-div.deactive{opacity:0}
.rules-div:hover{transform:translateY(-6px);box-shadow:0 2px 30px 0 #c8c8c8}
.rules-div span{color:var(--orange);font-size:30px;letter-spacing:1px}
.rules-div-heading{display:flex;justify-content:space-between;align-items:center}
#swiper{display:flex;align-items:center;justify-content:center;width:200px;user-select:none;gap:8px;margin-top:-1.5rem}
#swiper span{width:8px;height:8px;border-radius:8px;background-color:#c8c8c8;transition:.15s}
#swiper span.active{background-color:var(--orange);width:24px}
#swiper span.deactive{display:none}
.connection-div-two-rules{width:100%;height:1px;background-color:var(--orange)}
#rules-text h3{font-size:var(--h3-size);padding-bottom:2px}
#equipment{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:var(--section-padding);padding-bottom:var(--section-padding)}
#equipment-text{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-large);width:100%}
#equipment-content{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));max-width:var(--max-width-content);width:90%;grid-column-gap:3rem;grid-row-gap:4rem}
#equipment-content>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px}
#equipment-content>div>div:not(.equipment-img-wrap){position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 12px}
#equipment-content h3{font-size:calc(var(--h3-size) - 0.2rem);margin-bottom:2px}
#equipment-content img{padding:1.5rem;border-radius:1rem;box-shadow:0 0 10px 0 var(--light-border);background-color:#fff;width:100%;object-fit:contain;height:280px}
.equipment-img-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding:10px;background-color:var(--light-background);border-radius:1.5rem;width:100%}
.equipment-icon{position:absolute;right:26px;top:26px}
.equipment-plus{position:absolute;top:6px;right:12px;cursor:pointer;background-color:var(--light-background);border-radius:50%;padding:2px}
#pomps{position:absolute;top:100%;left:0;transition:.25s;background-color:#ffffffb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--light-border);padding:1rem;border-radius:1rem;width:100%;z-index:1;opacity:0}
.equipment-plus:hover+#pomps{opacity:1;top:50px}
#media{display:flex;flex-direction:column}
#media-content{display:flex;align-items:center;background-color:#000;color:var(--light-border);font-size:var(--p-size);margin-top:-9vw;padding:2rem 0 5rem;gap:90px}
#media-content:hover .media{animation-play-state:paused!important}
.media{display:flex;align-items:stretch;flex:1;gap:40px;animation:scroll-left 48s linear infinite;animation-play-state:paused}
#media-content.fade .media{animation-play-state:running}
@keyframes scroll-left {to{transform:translateX(calc(-100% - 90px))}}
.media-div{position:relative;min-width:470px;cursor:pointer;flex:1;padding:1.5rem}
.media-div:hover .media-arrow-in{transform:translate(0)}
.media-div:hover .media-arrow-out{transform:translate(100%,-100%)}
.media-arrow-in{transform:translate(-100%,100%);transition:.25s}
.media-arrow-out{transform:translate(0,0);transition:.25s}
.media-div>a>div{display:flex;align-items:center;justify-content:space-between}
.media-div>a>div>div{display:flex;align-items:center;gap:12px}
#media h3{font-size:var(--h3-size);color:#fff;font-weight:600}
.media-div>a{display:flex;flex-direction:column;gap:6px}
.media-divider{flex:1;width:1px;background-color:#646464}
#crafting{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:calc(var(--section-padding) / 2);padding-bottom:var(--section-padding);scroll-margin-top:6rem}
#crafting>div:not(.main-text){display:flex;flex-direction:column;align-items:center;max-width:var(--max-width-content);width:90%}
#solid-core{height:15rem;overflow:hidden;position:relative;transition:height 1.5s;interpolate-size:allow-keywords;gap:2.5rem;background-color:var(--light-background);padding:4rem;border-radius:2rem;margin-top:var(--spacing-large)}
#solid-core.visible{height:auto}
.fade-crafting{position:absolute;height:10rem;width:100%;bottom:0;background:linear-gradient(to top,#fff 60%,transparent)!important;opacity:1}
#solid-core.visible .fade-crafting{opacity:0}
#arrow-crafting{position:absolute;bottom:60px;z-index:1;transition:.25s ease}
#arrow-crafting:hover{cursor:pointer;transform:translateY(5px)}
#solid-core.visible #arrow-crafting{transform:rotate(180deg);bottom:12px}
#solid-core>div{display:flex;align-items:stretch;justify-content:center;gap:2.5rem}
#pouzijeme{display:flex;flex-direction:column;gap:12px}
#pouzijeme ul{margin-left:32px;display:flex;flex-direction:column;gap:4px}
#pouzijeme li{font-size:var(--p-size)}
#crafting-situace{margin-left:32px;display:flex;flex-direction:column;gap:24px;line-height:1.4}
#crafting-situace li{font-size:var(--p-size)}
.solid-core-flex{display:flex;flex-direction:column;gap:2.5rem}
.solid-core-div{padding:2rem;display:flex;flex-direction:column;gap:24px;border:1px solid var(--light-border-hover);border-radius:1rem}
#solid-core img{border-radius:1rem}
#solid-core h4{color:var(--light-border-hover);font-size:var(--h4-size)}
#crafting h3{font-size:var(--h3-size)}
#crafting-in-progress h3{color:var(--light-border-hover)}
.preparing{font-size:18px;font-weight:600;color:var(--light-border-hover)}
.preparing-div{display:flex;align-items:flex-end;justify-content:center;gap:2px}
.preparing-div div{width:3px;height:3px;border-radius:3px;background-color:var(--light-border-hover);margin:0 0 5px 2px}
.preparing-div div:nth-of-type(1){animation:dots-loading 1.5s infinite}
.preparing-div div:nth-of-type(2){animation:dots-loading 1.5s .5s infinite}
.preparing-div div:nth-of-type(3){animation:dots-loading 1.5s 1s infinite}
@keyframes dots-loading {from{opacity:1} to{opacity:0}}
#crafting-in-progress{all:unset;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:4rem;margin-top:var(--spacing-large)}
#crafting-in-progress>div{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
#history{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:var(--section-padding);padding-bottom:var(--section-padding)}
#history-flex{position:relative;display:flex;gap:2.5rem;align-items:center;justify-content:center;z-index:1}
.history-text{border-radius:.8rem;padding:1.2rem 2rem;transform:skew(-10deg);border:1px solid var(--light-border);box-shadow:0 0 80px 0 #f0f0f0;width:750px;background-color:#fff;z-index:1}
#footer{position:relative;background-color:#000;width:100%;display:flex;align-items:center;flex-direction:column;overflow:clip}
#footer-content{display:flex;flex-direction:column;align-items:center;width:var(--max-width-content);gap:var(--spacing-large);margin-top:-12vw;padding:2rem 0}
#footer-content>div{display:flex;align-items:center;justify-content:center;gap:10rem;width:100%}
#links-footer ul{display:flex;flex-direction:column;align-items:center;gap:1.5rem;list-style:none;color:#fff}
#social-media{display:flex;align-items:center;gap:2.5rem}
#facebook-icon,#mail-icon{fill:#fff;transition:.25s}
#facebook-icon:hover,#mail-icon:hover{fill:var(--orange)}
#rights{color:var(--light-border-hover);font-size:calc(var(--p-size) - 2px)}
@media screen and (max-width: 1800px) {
#introduction-flex{flex-direction:column;gap:var(--spacing-large);transform:translateX(0)}
#introduction-left,#introduction-video{width:70%}
}
@media screen and (max-width: 1700px) {
#how-to-start-flex,#history-flex{flex-direction:column}
.how-to-start-option:first-of-type,.history-text:first-of-type{transform:skew(-10deg) translateX(-15%)}
.how-to-start-option:last-of-type,.history-text:last-of-type{transform:skew(-10deg) translateX(15%)}
}
@media screen and (max-width: 1600px) {
#background-svg-header,#background-svg-right-header{display:none}
#h1-div{align-self:center}
}
@media screen and (max-width: 1500px) {
:root{--h1-size:6.8rem;--h2-size:3.2rem}
#h1-description{font-size:17px}
#nav-links{display:none}
#hamburger{display:flex}
#nav-wrapper{gap:24vw}
.orders-flex{justify-content:space-between}
#dictionary-content{flex-direction:column;gap:3rem}
#dictionary-content>div{min-width:0;width:90%}
}
@media screen and (max-width: 1400px) {
#arrow-rules-right{right:calc(50vw - (340px))}
#arrow-rules-left{left:calc(50vw - (340px))}
}
@media screen and (max-width: 1300px) {
#solid-core{padding:2rem;max-width:100%!important;width:100%!important}
#solid-core>div{flex-direction:column}
.solid-core-div img{max-width:100%}
.solid-core-div{max-width:100%}
}
@media screen and (max-width: 1200px) {
:root{--links-gap:4rem;--p-size:1.02rem;--main-text-width:80%}
#background-svg-header,#background-svg-right-header{display:none}
#h1-div{align-self:center}
.orders-flex{justify-content:center}
.orders-flex>svg{display:none}
#contact-flex{flex-direction:column}
.how-to-start-option:first-of-type,.history-text:first-of-type{transform:skew(-10deg) translateX(0)}
.how-to-start-option:last-of-type,.history-text:last-of-type{transform:skew(-10deg) translateX(0)}
}
@media screen and (max-width: 1000px) {
:root{--h1-size:6.5rem;--p-size:1rem}
.h1-divider{margin:0 16px;width:16px}
#h1-description{font-size:16px}
.how-to-start-option:first-of-type,.history-text:first-of-type{width:90%;transform:skew(0)}
.how-to-start-option:last-of-type,.history-text:last-of-type{width:90%;transform:skew(0)}
.skew-back{transform:skew(0)}
}
@media screen and (max-width: 800px) {
:root{--h2-size:3rem}
.arrow-rules{top:auto;bottom:4rem}
#arrow-rules-right{right:10vw}
#arrow-rules-left{left:10vw}
#logo{display:none}
#nav-wrapper{gap:18vw}
#orders-offer,#orders-form{max-width:100%}
#introduction-left,#introduction-video{width:80%}
#footer-content>div{flex-direction:column;gap:3rem}
}
@media screen and (max-width: 700px) {
:root{--h1-size:6rem;--p-size:.92rem;--max-width-content:80%}
.heading-underline{display:none}
.rules-div{width:90vw}
#h1-description{font-size:15px}
.h1-divider{margin:0 12px}
#downloads-grid,#news-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
#downloads-grid>div>div{flex-direction:column;gap:12px}
#dictionary-content>div>div{flex-direction:column;align-items:flex-start;gap:4px}
}
@media screen and (max-width: 500px) {
:root{--h1-size:5.5rem;--h2-size:2.8rem;--h3-size:2rem;--main-text-width:90%;--max-width-content:90%;--spacing-large:5rem;--spacing-medium:3rem}
.cross{top:6vh}
#scroll-spy{display:none}
.h1-divider{margin:0 12px;width:14px}
#h1-description{font-size:14px}
#reading-mode{display:none}
#introduction-left,#introduction-video{width:90%}
#equipment-content{grid-template-columns:repeat(auto-fill,minmax(90%,1fr))}
.links-heading-flex{padding:0}
.how-to-start-option:first-of-type,.history-text:first-of-type,.how-to-start-option:last-of-type,.history-text:last-of-type{padding:1rem}
}