@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

h1,
h2,
h3 {
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

p,
h4 {
    font-family: "Montserrat", sans-serif;
    Fallback,
    sans-serif;
}

@media (hover:hover) and (pointer:fine) {
    :root {
        --desktopshow: visible;
        --desktophide: hidden;
        --varif: 100vw;
        --varih: 100vh;
        --varimh: 100vh;
        --varresol: translate(70px, 0px);
        --postnew1: 50vh;
        --bigpostnew1: 100vh;
        --mobilof: visible;
        --leadpad: 35vh;
        --nemleadpad: 10vh;
        --respad3: 25%;
        --mobilhide: flex;
        --oknew: 155vh;
        --resovar2: 170vh;
        --piros: 80vw;
        --mobil-show: none;
        --mobil-hide: block;
        --transx: 80px;
        --transy: 0px;
        --transx2: 20px;
        --transy2: 0px;
        --startmw: 76vw;
        --ferde: calc(3vw + 4vh);
        --ferdeh: calc(92vh - 6vw);
        --kispostnew1paddingmw: calc(50vh - 3vw - 22px);
        --balfaszpadding: calc(2vw + 15px) 0px calc(2vw + 15px) 0px;
        --paddingjav: translateX(calc(-2vw - 15px));
        --viewmoremw: 45vh;
        --desktopshadow: 0px 0px 200px 40px rgba(0, 0, 0, 1);
        --flexdir: column;
        --flexdir2: row;
        --hellow: 100%;
        --oszto: 2;
        --dpad: calc(2vw + 15px);
        --mpad: 0px;
        --bigw: auto;
        --bigh: 100vh;
        --awardmw: 1250px;
        --awardleftpad: 6vw;
        --awardspad: calc(var(--leadpad) / 1.85) calc(var(--leadpad) / 1.2) calc(var(--leadpad) / 1.85) 0px;
        --awfont: 16px;
    }
}

@media screen and (min-width:2200px) and (pointer:fine) {
    :root {
        --startmw: 67.5vw;
    }
}

@media (hover:none) and (pointer:coarse) {
    :root {
        --desktopshow: hidden;
        --desktophide: visible;
        --varif: auto;
        --varih: auto;
        --varimh: auto;
        --varresol: translate(0px, 70px);
        --postnew1: 100vw;
        --bigpostnew1: 100%;
        --mobilof: hidden;
        --leadpad: 10vh;
        --nemleadpad: 10vh;
        --respad3: 10vh;
        --mobilhide: none;
        --oknew: 100vw;
        --resovar2: 100vw;
        --pirosh: 80vw;
        --mobil-show: block;
        --mobil-hide: none;
        --transx: 0px;
        --transy: 80px;
        --transx2: 0px;
        --transy2: 20px;
        --startmw: 100vw;
        --ferde: calc(2vw + 15px);
        --ferdeh: calc(65vh - 0vw);
        --kispostnew1paddingmw: calc(100vw - 4vw - 30px);
        --balfaszpadding: 0px calc(2vw + 15px) 0px calc(2vw + 15px);
        --paddingjav: translateY(calc(-2vw - 15px));
        --viewmoremw: calc(100vh - 4vw - 30px);
        --endh: 100vw;
        --desktopshadow: ;
        --flexdir: row;
        --flexdir2: column;
        --hellow: 33%;
        --helomh: 10vh;
        --kepekh: 50vw;
        --oszto: 1;
        --studiopad: calc(0.75vh + 0.75vw);
        --mobilcenter: center;
        --dpad: 0px;
        --mpad: calc(2vw + 15px);
        --bigw: 100vw;
        --bigh: auto;
        --awardleftpad: 0px;
        --awardspad: 0px var(--leadpad) var(--leadpad) var(--leadpad);
        --awfont: 13px;
    }
}

@media (hover:none) and (pointer:coarse) and (orientation:landscape) {
    :root {
        --postnew1: 100vw;
        --bigpostnew1: 100vw;
        --leadpad: 35vh;
        --nemleadpad: 35vh;
        --respad3: 25%;
        --mobilhide: flex;
        --lshide: none;
        --viewmoremw: 100vw;
        --endh: 100vh;
        --oszto: 2;
    }
}

@media (hover:none) and (pointer:coarse) and (orientation:portrait) and (max-width:320px) {
    :root {
        --hellow: auto;
        --mailmw: 80px;
        --mailh: 18px;
    }
}

#body {
    overscroll-behavior: none !important;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--bgcolor);

    a:hover {
        color: var(--brandcolor);
    }

    -webkit-transition:all 0.6s ease;
    -moz-transition:all 0.6s ease;
    -o-transition:all 0.6s ease;
    transition:all 0.6s ease;
}

:root {
    --borderes: 2vw + 15px;
    --bgcolor: #f2eff2;
    --switchfill: black;
    --brandcolor: #d61820;
    --thumbBG: rgb(180, 180, 180);
    --logocolor: #2a2a2a;
    --logopostnew1height: 100vw;
}

body::-webkit-scrollbar {
    width: 12px;
}

body,
html {
    scrollbar-width: thin;
    scrollbar-color: #303030 black;
}

body::-webkit-scrollbar-track {
    background: black;
}

body::-webkit-scrollbar-thumb {
    background-color: #303030;
    border-radius: 10px;
    border: 4px solid black;
}

::-moz-selection {
    color: var(--bgcolor);
    background: rgba(214, 24, 32, 0.99);
}

::selection {
    color: var(--bgcolor);
    background: rgba(214, 24, 32, 0.999);
}

.textlink,
a {
    font-family: "Montserrat", sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

img[data-srcset],
[data-srcset] {
    opacity: 0;
    transform: translate(var(--transx), var(--transy));
}

img,
[srcset] {
    opacity: 1;
    transition: opacity 1.25s 0s, transform 0.8s ease 0.5s;
    transform: translate(0px, 0px);
}

#page {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
}

.section {
    flex: 0 0 var(--varif);
    height: var(--varih);
    min-height: var(--varimh);
    width: 100vw;
    max-width: 100%;
    background-color: var(--bgcolor);
    transition: background-color 1s;
}

.inverter {
    mix-blend-mode: difference;
}

.pik>source,
.pik>img {
    will-change: transform;
    width: 100%;
    object-fit: cover;
}

h1 {
    font-size: 30px;
}

@media screen and (min-width:320px) {
    h1 {
        font-size: calc(36px + 31 * ((100vw - 320px) / 680));
    }
}

@media screen and (min-width:2000px) {
    h1 {
        font-size: 120px;
    }
}

h2 {
    font-size: 18px;
}

@media screen and (min-width:320px) {
    h2 {
        font-size: calc(18px + 6 * ((100vw - 320px) / 680));
    }
}

@media screen and (min-width:2000px) {
    h2 {
        font-size: 30px;
    }
}

h3,
p {
    font-size: 12px;
    line-height: 150%;
}

@media screen and (min-width:320px) {

    h3,
    p {
        font-size: calc(12px + 1 * ((100vw - 320px) / 680));
    }
}

@media screen and (min-width:2000px) {

    h3,
    p {
        font-size: 15px;
    }
}

h4 {
    font-size: 18px;
    line-height: 160%;
}

@media screen and (min-width:320px) {
    h4 {
        font-size: calc(18px + 3 * ((100vw - 320px) / 680));
    }
}

@media screen and (min-width:2000px) {
    h4 {
        font-size: 26px;
    }
}

#nextwrap {
    width: calc(47vw - 4vh);
    right: calc(3vw + 4vh);
}

#next {
    text-align: right;
}

@media screen and (orientation:portrait) {
    #nextwrap {
        width: 100%;
        right: 0px;
    }

    #next {
        text-align: center;
    }
}

#mainmenu-side>a {
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color: white;
}

#mainmenu-side>p {
    font-family: "Montserrat", sans-serif;
    font-weight: 550;
    font-size: 13px;
    line-height: 26px;
    color: white;
}

#mainmenu-side {
    display: flex;
}

@media (max-width:800px) {
    #mainmenu-side {
        display: none;
    }
}

#mainmenu>a,
#next {
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    sans-serif;
    font-size: 70px;
    letter-spacing: -0.04em;
    color: white;
    height: 17%;
    cursor: pointer !important;
}

@media (max-height:850px) {

    #mainmenu>a,
    #next {
        font-size: 70px;
        height: 15%;
    }
}

@media (max-height:770px) {

    #mainmenu>a,
    #next {
        font-size: 55px;
    }
}

@media (max-height:650px) {

    #mainmenu>a,
    #next {
        font-size: 50px;
    }
}

@media (max-height:500px) {

    #mainmenu>a,
    #next {
        font-size: 40px;
    }
}

#mainmenu>a:hover,
#wwu:hover {
    color: black;
}

.nextflex {
    flex-direction: column;
}

.nextbgs {
    height: 20vh;
    background: var(--bgcolor);
}

.nexttarget {
    height: 30vh;
}

@media screen and (orientation:portrait) {
    .nextflex {
        flex-direction: row;
        height: 100vw;
    }

    .nextbgs {
        width: 23vw;
        max-height: 100vw;
    }

    .nexttarget {
        width: 100vw;
        max-height: 100vw;
    }
}

#nextwrap {
    height: 100%;
    max-width: var(--postnew1);
    max-height: var(--bigpostnew1);
    animation: footer 4s linear;
}

@keyframes footer {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media (pointer:coarse) and (orientation:portrait) {
    #nextwrap {
        max-height: 100vw;
        bottom: 0px;
    }
}

@media (pointer:coarse) and (orientation:landscape) {
    #nextwrap {
        max-height: 20vw;
        bottom: 0px;
        width: calc(94vw - 8vh);
    }

    #next {
        text-align: center;
    }
}

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

.rotating {
    animation: rotating 30s linear infinite;
}

.hoover3 {
    transform: scale(1);
    transition: transform 0.3s ease;
    will-change: transform;
}

.hoover3:hover {
    transform: scale(1.1);
}

.hootrigger:hover .hoover,
.hootrigger:hover .hoover2 {
    opacity: 1;
    transform: translateY(0px);
}

.slide-img {
    opacity: 0;
}

.show {
    opacity: 1;
}

.desktopshow {
    visibility: var(--desktopshow);
    display: var(--mobil-hide);
}

.desktophide {
    visibility: var(--desktophide);
}

.disable-hover,
.disable-hover * {
    pointer-events: none !important;
}

.fancy {
    animation: anim1 1s ease-out;
}

.alt1.fancy {
    animation: anim2 1s ease-out;
}

.alt2.fancy {
    animation: anim3 0.65s ease-out;
}

.alt3.fancy {
    animation: anim4 2s ease-out;
}

.alt4.fancy {
    animation: anim2b 1s ease-out;
}

.alt5.fancy {
    animation: anim5 1s ease-out;
}

.alt6.fancy {
    animation: anim6 1s ease-out;
}

@keyframes anim1 {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes anim2 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes anim2b {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes anim3 {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes anim4 {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    25% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes anim5 {
    0% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes anim6 {
    0% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

#bigtitle {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out 0.4s, transform 0.6s ease-out 0.4s;
}

#smalltitle {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.45s ease-out 0.6s, transform 0.4s ease-out 0.65s;
}

.award {
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

.award:hover {
    transform: scale(1.1);
}

.cover {
    transition-delay: 0.15s;
    height: 100vw;
    box-sizing: border-box;
    transition: opacity 2s 1.24s, transform 1s 1.25s;
    z-index: 1;
}

.esports,
.esports:hover {
    cursor: url("img/esport_pointer2.png"), auto;
}

.award:hover {
    transform: scale(1.05);
}

.award>div>h4 {
    font-size: var(--awfont);
}

@media screen and (max-width:640px) {
    #logo {
        left:calc(3vw + 1.5vh) !important;
    }
    #smalltitle {
        line-height:120% !important;
    }
}