/* NORMALIZE */

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}
  
*, *:before, *:after {
    box-sizing: inherit;
}
  
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
}
  
ol, ul {
    list-style: none;
}
  
img {
    max-width: 100%;
    height: auto;
    display: block;
}

:root {
    --red: #b52200;
    --yellow: #ffd05a;
}

/* GLOBAL */

body {
    padding: 0;
    margin: 0;
    background: #0a0b0a url(../img/crt-bg.webp) center top / 100% auto repeat-y;
    color: #fff;
    font-family: neue-haas-unica, sans-serif;
    font-size: 20px;
}

a {
    text-decoration: none;
}

#mobile-nav {
	display: none;
}

.sr-text {
    display: none;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
}

figure {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Oxanium;
    text-transform: uppercase;
}

.swiper-bracket-image {
	position: relative;
    padding: 10px;
}

.swiper-bracket-image img {
}

.bracket {
    position: absolute;
    width: 27px;
    height: 27px;
    background-size: contain;
    background-repeat: no-repeat;
}

.bracket.top-left {
    top: 0;
    left: 0;
    background-image: url(../img/bracket-top-left.svg);
}

.bracket.top-right {
    top: 0;
    right: 0;
    background-image: url(../img/bracket-top-right.svg);
}

.bracket.bottom-right {
    bottom: 0;
    right: 0;
    background-image: url(../img/bracket-bottom-right.svg);
}

.bracket.bottom-left {
    bottom: 0;
    left: 0;
    background-image: url(../img/bracket-bottom-left.svg);
}

.bracket.top-left.yellow {
    background-image: url(../img/bracket-top-left-yellow.svg);
}

.bracket.top-right.yellow {
    background-image: url(../img/bracket-top-right-yellow.svg);
}

.bracket.bottom-right.yellow {
    background-image: url(../img/bracket-bottom-right-yellow.svg);
}

.bracket.bottom-left.yellow {
    background-image: url(../img/bracket-bottom-left-yellow.svg);
}

.bracket.top-left.white {
    background-image: url(../img/bracket-top-left-white.svg);
}

.bracket.top-right.white {
    background-image: url(../img/bracket-top-right-white.svg);
}

.bracket.bottom-right.white {
    background-image: url(../img/bracket-bottom-right-white.svg);
}

.bracket.bottom-left.white {
    background-image: url(../img/bracket-bottom-left-white.svg);
}

.notched-bg {
    background: url(../img/notched-line.svg) left center / 10px auto repeat-y;
}

.notched-bg-white {
    background: url(../img/notched-line-white.svg) left center / 10px auto repeat-y;
}

.notched-bg-alt {
    background: url(../img/notched-line-yellow.svg) left center / 10px auto repeat-y;
}

.clip-placeholder {
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
}

.clip {
    width: 100%;
}

@media (max-width: 1600px) {


    body {
        font-size: 16px;
    }

    .container {
        max-width: 1120px;
    }

    .bracket {
        width: 21px;
        height: 21px;
    }

}

@media (max-width: 1180px) {

    body {
        font-size: 15px;
    }

    .container {
        max-width: 780px;
    }

    .bracket {
        width: 15px;
        height: 15px;
    }

}

@media (max-width: 820px) {

    .container {
        width: 100%;
        padding: 0 20px;
        max-width: 440px;
    }

    .bracket {
        width: 18px;
        height: 18px;
    }

}

/* SLIDERS */

.swiper-container {
    position: relative;
}

.thumbs-slider .swiper {
    width: 1324px;
    /* padding: 0 58px; */
    margin-left: auto;
    margin-right: auto;
}

.thumbs-slider .swiper-button-prev {
    left: 0;
    top: 113px;
}

.thumbs-slider .swiper-button-next {
    right: 0;
    top: 113px;
}

.double-thumbs-slider.thumbs-slider .swiper-button-prev,
.double-thumbs-slider.thumbs-slider .swiper-button-next {
    top: 250px;
}

.thumbs-slider .swiper-pagination {
    margin-top: 60px;
}

.thumbs-slider .swiper-slide,
.thumbs-slider .swiper-slide a {
    width: 420px;
}

.thumbs-slider .swiper-slide img {
    display: block;
}

.thumbs-slider .swiper-slide h3 {
    font-size: 16px;
    color: var(--red);
    letter-spacing: 0.18em;
    margin: 0;
    text-align: center;
}

.thumbs-slider .swiper-slide {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    width: 28px;
    height: 50px;
    cursor: pointer;
}

.swiper-button-prev {
    background: url(../img/arrow-left.svg) center center / contain no-repeat;
}

.swiper-button-next {
    background: url(../img/arrow-right.svg) center center / contain no-repeat;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    display: none !important;
}

.swiper-pagination {
    justify-content: center;
    display: flex;
    gap: 0;
    position: static;
}

.swiper-pagination-bullet {
    width: 30px;
    height: 30px;
    border: none;
    background: url(../img/dot.svg) 0 0 / 100% 100% no-repeat;
    cursor: pointer;
    transition: 0.2s all linear;
    padding: 0;
    border-radius: 0;
    opacity: 1;
}

.swiper-pagination-bullet:hover,
.swiper-pagination-bullet-active {
    background-image: url(../img/dot-active.svg);
}

@media (max-width: 1600px) {

    .thumbs-slider .swiper {
        width: 1028px;
        /* padding: 0 46px; */
    }

    .thumbs-slider .swiper-button-prev,
    .thumbs-slider .swiper-button-next {
        top: 100px;
    }

    .double-thumbs-slider.thumbs-slider .swiper-button-prev,
    .double-thumbs-slider.thumbs-slider .swiper-button-next {
        top: 196px;
    }

    .thumbs-slider .swiper-pagination {
        margin-top: 35px;
    }

    .thumbs-slider .swiper-slide,
    .thumbs-slider .swiper-slide a {
        width: 327px;
    }
    
    .thumbs-slider li h3 {
        font-size: 15px;
    }

    .thumbs-slider .swiper-slide {
        display: flex;
        flex-direction: column;
        gap: 21px;
    }

    .swiper-button-prev,
    .swiper-button-next {
        width: 22px;
        height: 39px;
    }

    .swiper-pagination {
        /* gap: 8px; */
    }

    .swiper-pagination-bullet {
        width: 25px;
        height: 25px;
        background-image: url(../img/dot-med.svg);
    }
    
    .swiper-pagination-bullet:hover,
    .swiper-pagination-bullet-active {
        background-image: url(../img/dot-med-active.svg);
    }

}

@media (max-width: 1180px) {

    .thumbs-slider .swiper {
        width: 695px;
        /* padding: 0 92px; */
    }

    .double-thumbs-slider.thumbs-slider .swiper-button-prev,
    .double-thumbs-slider.thumbs-slider .swiper-button-next {
        top: 206px;
    }

    .swiper-button-prev,
    .swiper-button-next {
        width: 18px;
        height: 32px;
    }

    .thumbs-slider .swiper-pagination {
        margin-top: 25px;
    }

    .thumbs-slider .swiper-slide,
    .thumbs-slider .swiper-slide a {
        width: 335px;
    }

}

@media (max-width: 820px) {


    .thumbs-slider .swiper-slide,
    .thumbs-slider .swiper-slide a {
        width: 335px;
        height: 229px;
    }

    .thumbs-slider .swiper {
        width: 335px;
    }

    .thumbs-slider:not(#experience360-slider) .swiper {
        height: 474px;
    }

    .thumbs-slider:not(#experience360-slider) .swiper-button-prev,
    .thumbs-slider:not(#experience360-slider) .swiper-button-next {
        top: 224px;
    }

    .thumbs-slider .swiper-slide h3 {
        font-size: 12px;
    }

}

@media (max-width: 440px) {

    .thumbs-slider .swiper-button-prev,
    .thumbs-slider .swiper-button-next {
        display: none;
    }

}

/* THUMBS */

.thumb-16-9 { 
    width: 420px;
    position: relative;
}

.thumb-16-9:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/thumb-xl.svg) 0 0 / 100% 100% no-repeat;
    content: "";
    z-index: 1;
}

.thumb-16-9 img {
    width: 420px;
    clip-path: 
    polygon(96.33571428571429% 2.33650793650794%, 
    25.2452380952381% 2.33650793650794%, 
    23.93095238095238% 0, 
    6.56428571428571% 0, 
    5.25% 2.33650793650794%, 
    0 2.33650793650794%, 
    0 91.02222222222222%, 
    3.66428571428571% 97.54920634920635%, 
    74.68333333333333% 97.53650793650794%,
    76.06904761904762% 100%, 
    93.43571428571429% 100%, 
    94.81904761904762% 97.53650793650794%, 
    99.9% 97.53650793650794%, 
    99.9% 8.85079365079365%,
    96.33571428571429% 2.33650793650794%);

    /* clip-path: polygon(404.61px 5.52px, 106.03px 5.52px, 100.51px 0px, 27.57px 0px, 22.05px 5.52px, 0px 5.52px, 0px 215.04px, 15.39px 230.43px, 313.67px 230.43px, 319.49px 236.25px, 392.43px 236.25px, 398.24px 230.43px, 420px 230.43px, 420px 20.91px, 404.61px 5.52px); */
}

.play-icon {
    width: 130px;
    height: 130px;
    background: url(../img/play-btn.svg) 0 0 / contain no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
}

@media (max-width: 1600px) {

    .thumb-16-9,
    .thumb-16-9 img { 
        width: 327px;
    }
    
    .thumb-16-9 {
        /* clip-path: polygon(314.7px 4.29px, 82.47px 4.3px, 78.17px 0, 21.45px 0, 17.15px 4.3px, 0 4.3px, 0 167.26px, 11.97px 179.22px, 243.97px 179.22px, 248.49px 183.75px, 305.22px 183.75px, 309.75px 179.22px, 326.67px 179.22px, 326.67px 16.26px, 314.7px 4.29px); */
    }

    .play-icon {
        width: 101px;
        height: 101px;
    }

}

@media (max-width: 1180px) {

    .thumb-16-9,
    .thumb-16-9 img { 
        width: 335px;
    }

    .thumb-16-9:before {
        /* background-image: url(../img/thumb-med.svg); */
    }
    
    .play-icon {
        width: 104px;
        height: 104px;
    }

    .thumb-16-9 {
        /* clip-path: polygon("323.07px 4.41px, 84.66px 4.41px, 80.25px 0, 22.02px 0, 17.61px 4.41px, 0 4.41px, 0 171.71px, 12.29px 183.99px, 250.46px 183.99px, 255.11px 188.64px, 313.34px 188.64px, 317.99px 183.99px, 335.36px 183.99px, 335.36px 16.7px, 323.07px 4.41px"); */
    }

}

/* BUTTONS */

.btn {
    min-width: 198px;
    display: inline-block;
    height: 60px;
    text-align: center;
    letter-spacing: 0.18em;
    font-size: 14px;
    line-height: 60px;
    text-transform: uppercase;
    color: #000;
    background: url(../img/btn-filled.svg) 0 0 / 100% 100% no-repeat;
    font-family: Oxanium;
    font-weight: 700;
    border: none;
}

.btn-drawer {
    min-width: 220px;
    display: inline-block;
    height: 112px;
    text-align: center;
    letter-spacing: 0.18em;
    font-size: 14px;
    line-height: 65px;
    text-transform: uppercase;
    color: #000;
    font-family: Oxanium;
    font-weight: 700;
    border: none;
}

.psvr-steam-drop{
    background: url(../img/button-drawer-ps-steam-meta.svg) 0 0 / 100% 100% no-repeat;
}

.ps5-pro-steam-drop{
    background: url(../img/button-drawer-ps5-pro-steam.svg) 0 0 / 100% 100% no-repeat;
}

.epic-drop{
    background: url(../img/button-drawer-epic.svg) 0 0 / 100% 100% no-repeat;
}

.meta-drop{
    background: url(../img/button-drawer-meta.svg) 0 0 / 100% 100% no-repeat;
}

.btn-outline {
    background-image: url(../img/btn-outline.svg);
    color: var(--red);
}

.btn-alt {
    background-image: url(../img/btn-alt.svg);
}

.btn-outline-wide {
    background-image: url(../img/btn-outline-wide.svg);
    color: var(--red);
    width: 240px;
}

.btn-outline-wide-white {
    background-image: url(../img/btn-outline-wide-white.svg);
    color: #FFFFFF;
    width: 240px;
}

.btn-alt-wide {
    background-image: url(../img/btn-alt-wide.svg);
    width: 240px;
    color: var(--yellow);
}


@media (min-width: 1601px) {

    .btn-large {
        min-width: 220px;
        height: 66px;
        font-size: 16px;
        line-height: 66px;
    }
    
}

@media (max-width: 1600px) {

    .btn {
        min-width: 166px;
        height: 50px;
        line-height: 50px;
        font-size: 12px;
        background-image: url(../img/btn-filled-med.svg);
    }
	
	.btn-drawer {
		min-width: 172px;
        height: 87px;
        line-height: 50px;
        font-size: 12px;
	}

    .btn-outline {
        background-image: url(../img/btn-outline-large.svg);
    }
    
    .btn-alt {
        background-image: url(../img/btn-alt-med.svg);
    }

    .btn-outline-wide {
        background-image: url(../img/btn-outline-wide-med.svg);
        width: 200px;
    }
	
	.btn-outline-wide-white {
        background-image: url(../img/btn-outline-wide-white-med.svg);
        width: 200px;
    }
    
    .btn-alt-wide {
        background-image: url(../img/btn-alt-wide-med.svg);
        width: 200px;
    }
	
	.psvr-steam-drop{
    	background: url(../img/button-drawer-ps-steam-meta-med.svg) 0 0 / 100% 100% no-repeat;
	}

	.meta-drop{
    	background: url(../img/button-drawer-meta-med.svg) 0 0 / 100% 100% no-repeat;
	}
    

}

/* FORMS */

input[type="email"] {
    border: 1px solid var(--red);
    height: 59px;
    line-height: 59px;
    font-size: 20px;
    font-family: Oxanium;
    color: var(--red);
}

#mce-success-response,
#mce-error-response {
    margin-top: 1em;
}

@media (max-width: 1600px) {

    input[type="email"] {
        height: 53px;
        line-height: 53px;
        font-size: 18px;
    }

}

@media (max-width: 1180px) {

    input[type="email"] {
        font-size: 17px;
    }

}

@media (max-width: 820px) {

    input[type="email"] {
        height: 45px;
        line-height: 45px;
        font-size: 15px;
    }

}

/* SECTION TITLES */

.section-title {
    color: var(--red);
    font-size: 28px;
    text-transform: uppercase;
    padding-bottom: 12px;
}

.section-title .num {
    opacity: 0.5;
}

.section-title .sep {
    margin: 0 0.25em;
}

.section-title .heading {
    letter-spacing: 0.25em;
}

.separator-01 {
	background: url(../img/heading-xl-01.svg) center bottom / 100% 8px no-repeat;
}

.separator-02 {
	background: url(../img/heading-xl-02.svg) center bottom / 100% 8px no-repeat;
}

.separator-03 {
	background: url(../img/heading-xl-03.svg) center bottom / 100% 8px no-repeat;
}

.separator-04 {
	background: url(../img/heading-xl-04.svg) center bottom / 100% 8px no-repeat;
}

.separator-05 {
	background: url(../img/heading-xl-05.svg) center bottom / 100% 8px no-repeat;
}

.separator-06 {
	background: url(../img/heading-xl-06.svg) center bottom / 100% 8px no-repeat;
}

.separator-07 {
	background: url(../img/heading-xl-07.svg) center bottom / 100% 8px no-repeat;
}

.separator-08 {
	background: url(../img/heading-xl-08.svg) center bottom / 100% 8px no-repeat;
}

.separator-09 {
	background: url(../img/heading-xl-09.svg) center bottom / 100% 8px no-repeat;
}

.separator-10 {
	background: url(../img/heading-xl-10.svg) center bottom / 100% 8px no-repeat;
}

.preheading,
.postheading {
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-family: Oxanium;
    color: #fff;
}

.preheading {
    font-size: 20px;
}

.postheading {
    font-size: 25px;
}

@media (max-width: 1600px) {

    .section-title {
        font-size: 24px;
        padding-bottom: 10px;
    }

    .preheading {
        font-size: 16px;
    }

    .postheading {
        font-size: 20px;
    }
	
	.separator-01 {
		background: url(../img/heading-large-01.svg) center bottom / 100% 6px no-repeat;
	}
	
	.separator-02 {
		background: url(../img/heading-large-02.svg) center bottom / 100% 6px no-repeat;
	}
	
	.separator-03 {
		background: url(../img/heading-large-03.svg) center bottom / 100% 6px no-repeat;
	}
	
	.separator-04 {
		background: url(../img/heading-large-04.svg) center bottom / 100% 6px no-repeat;
	}
	
	.separator-05 {
		background: url(../img/heading-large-05.svg) center bottom / 100% 6px no-repeat;
	}
	
	.separator-06 {
		background: url(../img/heading-large-06.svg) center bottom / 100% 6px no-repeat;
	}
	
	.separator-07 {
		background: url(../img/heading-large-07.svg) center bottom / 100% 6px no-repeat;
	}
	
	.separator-08 {
		background: url(../img/heading-large-08.svg) center bottom / 100% 6px no-repeat;
	}
	
	.separator-09 {
		background: url(../img/heading-large-09.svg) center bottom / 100% 6px no-repeat;
	}
	
	.separator-10 {
		background: url(../img/heading-large-10.svg) center bottom / 100% 6px no-repeat;
	}

}

@media (max-width: 1180px) {

    .section-title {
        font-size: 20px;
        padding-bottom: 8px;
    }

    .preheading {
        font-size: 14px;
    }

    .postheading {
        font-size: 18px;
    }
	
	.separator-01 {
		background: url(../img/heading-med-01.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-02 {
		background: url(../img/heading-med-02.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-03 {
		background: url(../img/heading-med-03.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-04 {
		background: url(../img/heading-med-04.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-05 {
		background: url(../img/heading-med-05.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-06 {
		background: url(../img/heading-med-06.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-07 {
		background: url(../img/heading-med-07.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-08 {
		background: url(../img/heading-med-08.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-09 {
		background: url(../img/heading-med-09.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-10 {
		background: url(../img/heading-med-10.svg) center bottom / 100% 5px no-repeat;
	}

}

@media (max-width: 820px) {

    .section-title {
        font-size: 16px;
        padding-bottom: 7px;
    }

    .preheading {
        font-size: 12px;
    }

    .postheading {
        font-size: 17px;
    }
	
	.separator-01 {
		background: url(../img/heading-small-01.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-02 {
		background: url(../img/heading-small-02.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-03 {
		background: url(../img/heading-small-03.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-04 {
		background: url(../img/heading-small-04.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-05 {
		background: url(../img/heading-small-05.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-06 {
		background: url(../img/heading-small-06.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-07 {
		background: url(../img/heading-small-07.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-08 {
		background: url(../img/heading-small-08.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-09 {
		background: url(../img/heading-small-09.svg) center bottom / 100% 5px no-repeat;
	}
	
	.separator-10 {
		background: url(../img/heading-small-10.svg) center bottom / 100% 5px no-repeat;
	}

}


/* HEADER */

header {
    height: 80px;
    background: #0a0b0a;
    width: 100%;
    padding: 0 30px 0 15px;
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}

#survios-logo {
    width: 80px;
    height: 80px;
    margin-right: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#survios-logo svg {
    width: 50px;
    height: auto;
}

#header-logo {
    display: block;
}

#header-logo img {
    height: 38px;
    width: auto;
    display: block;
}

#main-nav {
    font-family: Oxanium;
    display: flex;
    flex-wrap: nowrap;
}

#main-nav a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #fff;
    text-align: center;
    position: relative;
    transition: 0.2s all linear;
}

#main-nav a.active {
  	color: var(--red);
}

#buy-btn a.active {
  	color: #000;
}

#main-nav li:not(#buy-btn) a:hover,
#main-nav li.active:not(#buy-btn) a {
    color: var(--red);
}

#menu-toggle,
#menu-close {
    display: none;
}

@media (min-width: 1181px) {

    #main-nav {
        margin-left: auto;
        margin-top: 8px;
        gap: 8px;
    }

    #main-nav a {
        height: 80px;
        padding: 0 20px;
        font-size: 14px;
        font-weight: 700;
    }

    #main-nav a:before,
    #main-nav a:after {
        top: 11px;
        width: 14px;
        height: 58px;
        opacity: 0;
        transition: 0.3s all linear;
        content: "";
        position: absolute;
    }

    #main-nav a:before {
        background: url(../img/menu-hover-left.svg) left center / 100% 100% no-repeat;
        left: 0;
    }
    
    #main-nav a:after {
        background: url(../img/menu-hover-right.svg) right center / 100% 100% no-repeat;
        right: 0;
    }

    #main-nav a:hover::before,
    #main-nav a.active::before,
    #main-nav a:hover::after,
    #main-nav a.active::after {
        opacity: 1;
    }

    #buy-btn {
        margin-left: 12px;
    }

    #buy-btn a {
        width: 188px;
        height: 88px;
        padding-bottom: 8px;
        background: url(../img/buy-btn.svg) left bottom  / 100% 100% no-repeat;
        color: #000;
    }

    #buy-btn a:hover {
        color: #000;
    }
    
    #buy-btn a:before {
        background-image: url(../img/menu-hover-left-black.svg);
        left: 10px;
    }
    
    #buy-btn a:after {
        background-image: url(../img/menu-hover-right-black.svg);
        right: 10px;
    }

}

@media (max-width: 1600px) {

    header {
        height: 60px;
        padding: 0 30px;
    }

    #survios-logo {
        margin-right: 45px;
        width: auto;
        height: 60px;
    }

    #survios-logo svg {
        width: 37px;
    }

    #header-logo img {
        height: 30px;
    }

    #main-nav a {
        height: 60px;
        font-size: 13px;
    }

    #main-nav a:before,
    #main-nav a:after {
        top: 8px;
        width: 13px;
        height: 44px;
    }

    #buy-btn {
        margin-left: 10px;
    }

    #buy-btn a {
        width: 158px;
        height: 69px;
        padding-bottom: 9px;
        background-image: url(../img/buy-btn-large.svg);
    }

    #buy-btn a:before {
        left: 9px;
    }

    #buy-btn a:after {
        right: 9px;
    }

}

@media (max-width: 1180px) {

    header {
        padding: 0;
        height: 70px;
        z-index: 100;
    }

    #menu-toggle,
    #menu-close {
        width: 40px;
        position: absolute;
        right: 30px;
        cursor: pointer;
    }

    #menu-toggle {
        top: 20px;
        height: 30px;
    }

    #menu-close {
        top: 15px;
        height: 40px;
    }

    #menu-toggle.active,
    #menu-close.active {
        display: block;
    }

    #survios-logo {
        width: auto;
        height: 70px;
        margin-right: 0;
        position: absolute;
        top: 0;
        left: 27px;
    }

    #survios-logo svg {
        width: 44px;
    }

    #header-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
        
    #header-logo img {
        height: 35px;
    }

    #main-nav {
        display: none;
    }

    #mobile-nav.open {
        transform: none;
        margin-top: 0;
    }

    #mobile-nav {
        background: #0a0b0a;
        position: fixed;
        width: 100%;
        top: 70px;
        left: 0;
        transition: 0.4s all linear;
        z-index: 90;
        transform: translateY(-100%);
        margin-top: -70px;
        display: block;
        flex-direction: column;
    }

    #mobile-nav li {
        padding: 0 23px;
        width: 100%;
    }

    #mobile-nav li a {
        font-family: Oxanium;
        text-transform: uppercase;
        font-size: 15px;
        letter-spacing: 0.15em;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 45px;
        position: relative;
        text-align: center;
        color: #fff;
    }

    #mobile-nav li#mobile-buy-btn a {
        color: var(--red);
        font-weight: 700;
    }

    #mobile-nav li:not(#mobile-buy-btn) a {
        border-bottom: 1px solid #212121;
    }

}

@media (max-width: 640px) {

    header {
        height: 60px;
        padding: 0 20px;
    }

    #menu-toggle,
    #menu-close {
        right: 20px;
    }
	
	#menu-close {
        top: 10px;
	}

    #menu-toggle {
        top: 15px;
    }

    #survios-logo {
        height: 60px;
        left: 20px;
    }

    #header-logo img {
        height: 30px;
    }

    #mobile-nav {
        top: 60px;
    }

}

@media (max-width: 440px) {

    #header-logo img {
        height: 25px;
    }

}

/* SUBTITLES */

.subtitle {
    text-align: center;
}

.subtitle span {
    display: inline-block;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    position: relative;
    height: 40px;
    color: var(--red);
    font-size: 25px;
	line-height: 1;
    padding: 10px 80px;
    margin: 0 auto;
}

#story .subtitle span {
	padding: 11px 0px;
}

.subtitle span:before,
.subtitle span:after {
    content: "";
    position: absolute;
    width: 31px;
    height: 40px;
    bottom: 0;
}

#story .subtitle span:before {
    left: -80px;
    background: url(../img/t-left.svg) 0 0 / 100% 100% no-repeat;
}

#story .subtitle span:after {
    right: -80px;
    background: url(../img/t-right.svg) 0 0 / 100% 100% no-repeat;
}

.subtitle span:before {
    left: 0;
    background: url(../img/t-left.svg) 0 0 / 100% 100% no-repeat;
}

.subtitle span:after {
    right: 0;
    background: url(../img/t-right.svg) 0 0 / 100% 100% no-repeat;
}

@media (max-width: 1600px) {

    .subtitle span {
        height: 34px;
        font-size: 20px;
        padding: 9px 60px;
    }
	
	#story .subtitle span {
		padding: 9px 0px;
	}

    .subtitle span:before,
    .subtitle span:after {
        width: 26px;
        height: 34px;
    }
	
	#story .subtitle span:before {
    	left: -60px;
	}

	#story .subtitle span:after {
    	right: -60px;
	}
    
}

@media (max-width: 1180px) {

    .subtitle span {
        height: 29px;
        font-size: 18px;
        padding: 6px 60px;
    }

    .subtitle span:before,
    .subtitle span:after {
        width: 23px;
        height: 29px;
    }
    
}

@media (max-width: 820px) {

    .subtitle span {
        font-size: 16px;
        padding: 5px 75px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.3;
    }
	
	.subtitle span:before {
    	left: 40px;
	}

    .subtitle span:after {
    	right: 40px;
	}
	
	#story .subtitle span:before,
	#updates .subtitle span:before{
    	left: 0px;
	}

	#story .subtitle span:after,
	#updates .subtitle span:after{
    	right: 0px;
	}

    .subtitle span:before,
    .subtitle span:after {
        top: 50%;
        transform: translateY(-50%);
    }

}

/* CAPTIONS */

figcaption {
    font-family: Oxanium;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.1em;
    line-height: 1;
    color: var(--red);
}

figcaption.caption-left {
    position: absolute;
    left: 0;
    right: auto;
    top: 50%;
    transform: rotate(-90deg) translate(-50%, -1em);
    transform-origin: left center;
}

figcaption.caption-right {
    position: absolute;
    right: 0;
    left: auto;
    top: 50%;
    transform: rotate(-90deg) translate(50%, 1em);
    transform-origin: right center;
}

figure figcaption:before {
    width: 15px;
    height: 15px;
    display: block;
    float: left;
    background: url(../img/dot-active.svg) 0 0 / contain no-repeat;
    margin-right: 9px;
    content: "";
}

@media (max-width: 1600px) {

    figcaption {
        font-size: 10px;
    }

    figure figcaption:before {
        width: 11px;
        height: 11px;
    }

}

@media (max-width: 1180px) {

    figcaption {
        font-size: 9px;
    }

    figure figcaption:before {
        width: 8px;
        height: 8px;
    }

}

@media (max-width: 820px) {


    figure figcaption:not(.gray-caption),
    figure figcaption:not(.gray-caption)::before {
        display: none;
    }

    .gray-caption {
        font-size: 8px;
    }

}


/* FOOTER */

footer {
    padding-top: 55px;
    padding-bottom: 40px;
    position: relative;
    border-top: 2px solid var(--red);
	background-color: #0a0b0a;
}

footer:before {
    position: absolute;
    content: "";
    width: 189px;
    height: 8px;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: url(../img/notch-bottom.svg) 0 0 / contain no-repeat;
}

footer .container {
    display: flex;
    justify-content: space-between;
}

footer .col{
    width: 25%;
    padding-top: 20px;
}

footer .col:nth-child(2) {
    text-align: center;
    width: 50%;
    padding-top: 0;
}

footer .col:nth-child(3) {
	padding-top: 40px;
}

#esrb {
    height: 117px;
}

#footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
}

#footer-logos li.sep {
    content: "";
    height: 15px;
    width: 1px;
    background: #fff;
    margin: 0 36px;
    display: inline-block;
}

#footer-logo-alien {
    height: 20px;
}

#footer-logo-fox {
    width: 52px;
}

#footer-logo-survios {
    height: 21px;
}

#footer-nav {
    display: inline-flex;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.1em;
    margin-top: 40px;
}

#footer-nav a {
    display: block;
  	font-family: 'Oxanium';
    font-style: normal;
    font-weight: 400;
	color: #fff;
}

#footer-nav .sep {
    width: 3px;
    height: 13px;
    margin: 0 14px;
    background: url(../img/separator.svg) 0 0 / auto 100% no-repeat;
}

#footer-nav a:hover {
    color: var(--red);
}

.copyright {
    line-height: 1.3;
    color: #606060;
}

#copyright-desktop {
    margin-top: 32px;
    font-size: 11px;
}

#copyright-mobile {
    display: none;
}

#footer-platforms-top,
#footer-platforms-bottom{
    display: flex;
    flex-direction: row-reverse;
    gap: 22px;
	align-items: center;
}

#footer-platforms-top img,
#footer-platforms-bottom img{
    display: block;
}

#footer-platforms-top li,
#footer-platforms-bottom li{
    display: flex;
    justify-content: flex-end;
}

#footer-platforms-bottom{
	padding-top: 22px;
}

#footer-logo-steam {
    height: 28px;
}

#footer-logo-metaquest {
    height: 16px;
}

#footer-logo-psvr {
    height: 23px;
}

#footer-logo-ps5 {
    height: 24px;
}

#footer-logo-ps5-pro {
    height: 20px;
}

#footer-logo-steampc {
    height: 26px;
}

#footer-logo-epic {
    height: 30px;
}

#footer-logo-xbox {
    height: 25px;
}

#footer-logo-survios-mobile {
    display: none;
}

@media (max-width: 1600px) {

    footer .container {
        align-items: center;
    }

    footer .col{
        padding-top: 0;
    }

    #esrb {
        height: 81px;
    }

    #footer-nav {
        font-size: 11px;
        margin-top: 36px;
    }

    #footer-nav a:not(:last-child)::after {
        height: 12px;
        margin: 0 12px;
    }
	
	footer .col:nth-child(3) {
    	padding-top: 0;
	}

    #copyright-desktop {
        font-size: 10px;
    }
    
    #footer-platforms-top,
	#footer-platforms-bottom{
        gap: 20px;
    }

    #footer-logo-steam {
        height: 24px;
    }
    
    #footer-logo-metaquest {
        height: 14px;
    }
    
    #footer-logo-psvr {
        height: 20px;
    }
        
}

@media (max-width: 1180px) {

    #copyright-mobile {
        display: block;
    }

    #copyright-desktop {
        display: none;
    }

    footer {
        padding-bottom: 32px;
    }

    footer .container {
        flex-direction: column;
    }

    footer .col:nth-child(2),
    footer .col {
        width: 100%;
    }

    footer .col:nth-child(2) {
        order: 0;
    }

    footer .col:nth-child(1) {
        order: 1;
    }

    footer .col:nth-child(3) {
        order: 3;
    }

    #footer-platforms-top li,
	#footer-platforms-bottom li{
        justify-content: center;
    }

    #copyright-mobile {
        font-size: 9px;
        margin-top: 40px;
        text-align: center;
    }

    #footer-platforms-top,
	#footer-platforms-bottom{
        flex-direction: row-reverse;
        gap: 25px;
        justify-content: center;
    }

    #esrb {
        margin: 38px auto 34px;
        display: block;
    }

}

@media (max-width: 820px) {

    #footer-logo-survios,
    #footer-logos li:nth-child(2) {
        display: none;
    }

    #footer-logos li.sep {
        margin: 0;
    }

    #footer-logos {
        justify-content: space-between;
        flex-wrap: wrap;
        width: 162px;
        margin: 0 auto;
        row-gap: 30px;
    }

    #footer-logo-alien {
        width: 162px;
        height: auto;
    }

    #footer-logo-fox {
        width: 51px;
    }

    #footer-logo-survios-mobile {
        width: 44px;
        height: 39px;
        display: block;
    }
    
    #footer-nav {
        max-width: 450px;
        flex-wrap: wrap;
        margin: 40px auto 0;
        font-size: 10px;
        row-gap: 10px;
    }

    #footer-nav :nth-child(6) {
        display: none
    }

    #copyright-mobile {
        font-size: 8px;
    }
	
	#footer-platforms-top{
        padding: 0 30px 0 30px;
	}
	#footer-platforms-bottom{
        padding: 20px 30px 0 30px;
	}
    

}

@media (max-width: 420px) {
	#footer-nav {
        max-width: 350px;
    }
	#footer-nav .sep.mobile-drop{
		display: none;
	}
}

/* FEATURES */

.features li {
    line-height: 1.4;
}

.features li:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 13px;
    background-image: url(../img/bullet-white.svg);
    margin-right: 15px;
}

#editions-list > li h4 {
    letter-spacing: 0.12em;
    color: var(--red);
    margin-top: 0.5em;
}

/* NOTES */

.notes {
    color: #868686;
    font-size: 13px;
    line-height: 1.2;
    display: flex;
}

.notes .asterisk {
    width: 1.2em;
}

@media (max-width: 1600px) {

    .notes {
        font-size: 11px;
    }

}

@media (max-width: 1180px) {

    .notes {
        font-size: 10px;
    }

}

@media (max-width: 1180px) {

    .notes {
        font-size: 9px;
    }

}

/* AGE GATE & LOADING SCREEN */

#age-gate,
#loading {
    color: var(--red);
    font-family: Oxanium;
    text-transform: uppercase;
    background: #0a0b0a url(../img/crt-bg.webp) center top / 100% auto repeat-y;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    bottom: 0;
    z-index: 200;
    padding: 32px;
    display: none;
}

#loading .inner,
#age-gate .inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#loading .inner .bracket,
#age-gate .inner .bracket {
    width: 38px;
    height: 38px;
}

.date-label {
    letter-spacing: 0.25em;
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 32px;
}

.field label {
    letter-spacing: 0.2em;
    font-size: 12px;
    display: block;
    margin-top: 15px;
    text-align: center;
}

.date {
    display: flex;
    gap: 29px;
}

.field input {
    display: block;
    border: 1px solid var(--red);
    color: var(--red);
    height: 59px;
    line-height: 59px;
    font-family: Oxanium;
    font-size: 25px;
    text-transform: uppercase;
    text-align: center;
    background: transparent;
}

.field input:focus {
    outline: none;
}

#age-gate-submit {
    margin: 40px auto 0;
    display: block;
    cursor: pointer;
}

@media (min-width: 415px) {

    #age-gate-submit {
        min-width: 220px;
        height: 66px;
        font-size: 16px;
        line-height: 66px;
    }

}

#age-gate .blocked {
    font-weight: 700;
    color: #A1B200;
    font-size: 16px;
    text-align: center;
}

#age-gate .blocked strong {
    display: block;
    font-size: 18px;
}

#month, #day {
    width: 90px;
    appearance: textfield;
}

#year {
    width: 120px;
    appearance: textfield;
}

.error {
    text-align: center;
    margin-top: 1.5em;
    font-weight: 700;
}

@media (max-width: 414px) {

    .date-label {
        font-size: 22px;
        margin: 0 0 26px;
    }

    .field input {
        height: 50px;
        line-height: 50px;
        font-size: 20px;
    }

    #month, #day {
        width: 75px;
    }
    
    #year {
        width: 100px;
    }

}

/* LOADING */

#loading {
    z-index: 201;
    font-size: 20px;
    letter-spacing: 0.25em;
    display: block;
}

#loading p {
    margin-bottom: 1em;
}

#loading-bar {
    display: flex;
    gap: 10px;
    align-items: center;
}

#loading-bar li {
    width: 20px;
    height: 30px;
    background: var(--red);
    opacity: 0.4;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}

#loading .inner {
    flex-direction: column;
}

@keyframes opacity-1 {
    0% { opacity: 0.4; }
    8% { opacity: 0.4; }
    9% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes opacity-2 {
    0% { opacity: 0.4; }
    17% { opacity: 0.4; }
    18% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes opacity-3 {
    0% { opacity: 0.4; }
    26% { opacity: 0.4; }
    27% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes opacity-4 {
    0% { opacity: 0.4; }
    35% { opacity: 0.4; }
    36% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes opacity-5 {
    0% { opacity: 0.4; }
    44% { opacity: 0.4; }
    45% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes opacity-6 {
    0% { opacity: 0.4; }
    53% { opacity: 0.4; }
    54% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes opacity-7 {
    0% { opacity: 0.4; }
    62% { opacity: 0.4; }
    63% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes opacity-8 {
    0% { opacity: 0.4; }
    71% { opacity: 0.4; }
    72% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes opacity-9 {
    0% { opacity: 0.4; }
    80% { opacity: 0.4; }
    81% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes opacity-10 {
    0% { opacity: 0.4; }
    89% { opacity: 0.4; }
    90% { opacity: 0.4; }
    100% { opacity: 1; }
}

#loading-bar li:nth-child(1) {
    animation-name: opacity-1;
}

#loading-bar li:nth-child(2) {
    animation-name: opacity-2;
}

#loading-bar li:nth-child(3) {
    animation-name: opacity-3;
}

#loading-bar li:nth-child(4) {
    animation-name: opacity-4;
}

#loading-bar li:nth-child(5) {
    animation-name: opacity-5;
}

#loading-bar li:nth-child(6) {
    animation-name: opacity-6;
}

#loading-bar li:nth-child(7) {
    animation-name: opacity-7;
}

#loading-bar li:nth-child(8) {
    animation-name: opacity-8;
}

#loading-bar li:nth-child(9) {
    animation-name: opacity-9;
}

#loading-bar li:nth-child(10) {
    animation-name: opacity-10;
}

/* COOKIE CONSENT BANNER */

#cc-main {
    --cc-font-family: neue-haas-unica, sans-serif;
    --cc-btn-primary-bg: #000000;
    --cc-btn-primary-color: #b52200;
    --cc-btn-primary-border-color: #b52200;
    --cc-btn-primary-hover-bg: #b52200;
    --cc-btn-primary-hover-border-color: #b52200;
    --cc-btn-primary-hover-color: #000000;
    --cc-modal-border-radius: 0;
    --cc-btn-border-radius: 0;
}

.cm__btn {
    font-family: Oxanium, sans-serif !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
}