/* SCROLLSPY NAV */

#home-bookmarks {
    position: fixed;
    right: 60px;
    top: calc(50% + 40px);
    transform: translateY(-50%);
    padding: 15px 27px 15px 0;
    z-index: 2;
    background: url(../img/scrollspy-nav.svg) right center / auto 100% no-repeat;
}

#home-bookmarks ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 54px;
    text-align: right;
}

#home-bookmarks ul li a {
    display: block;
    padding-right: 20px;
    font-size: 13px;
    font-family: Oxanium;
    letter-spacing: 0.1em;
    color: var(--red);
    text-transform: uppercase;
    position: relative;
}

#home-bookmarks ul li a:after {
    position: absolute;
    height: 2px;
    width: 7px;
    right: 0;
    top: 50%;
    margin-top: -1px;
    background: var(--red);
    content: "";
}
#home-bookmarks ul li a:hover,
#home-bookmarks ul li a.active {
    font-weight: 800;
    font-size: 14px;
}

/* HOME HERO */ 

#intro {
    height: 100vh;
    padding-bottom: 53.22%;
    position: relative;
    background: url(../img/hero-art-xl-pt1@2x.webp) top center / cover no-repeat;
}

@media screen and (min-width: 2750px) {
  #intro {
    padding-bottom: 0%;
  }
}

#intro .content {
    width: 430px;
    padding-bottom: 25px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

#hero-reviews {
    left: 60px;
}

#hero-reviews-right {
    right: 60px;
    text-align: right;
}

.reviews-list {
    display: flex;
    flex-direction: column;
}

.hero-reviews-list {
    position: absolute;
    transform: translateY(-50%);
    top: calc(50% + 40px);
    gap: 40px;
    width: 240px;
}

.hero-reviews-list .stars {
    height: 14px;
}

.reviews-list img {
    display: block;
}

#hero-reviews-right img {
    margin-left: auto;
}

h2.review-rating {
	color: var(--red);
    font-size: 38px;
    text-transform: uppercase;
	margin-bottom: -10px;
}

.reviews-list p {
    font-family: Oxanium;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 20px 0;
}

.hero-reviews-list p {
    font-size: 20px;
}

#mobile-reviews, #mobile-reviews-row-2 {
    display: none;
}

#intro h1 {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 47.2%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 430px;
}

#hero-logo {
    width: 100%;
    display: block;
}

#hero-platforms {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

#hero-metaquest {
    height: 15px;
    width: auto;
	margin-top: 4px;
}

#hero-psvr {
    height: 22px;
    width: auto;
}

#hero-steam {
    width: 107px;
    height: auto;
}

#hero-buttons {
    display: flex;
    justify-content: center;
    gap: 26px;
}

#arrow-down-icon {
    margin: 45px auto 0;
    width: 50px;
    height: auto;
    display: block;
}

span.small-note {
	font-family: Oxanium;
	font-size: 17px;
}

span.small-note:before {
	content: url(../img/icon-sound.svg);
    display: inline-block;
    margin-right: 11px;
    margin-top: 3px;
    vertical-align: middle;
    width: 26px;
}

@media screen and (min-width: 2750px),
screen and (max-height: 1280px){
	#intro h1 {
        width: 360px;
        top: 48.3%;
    }	
}

@media (max-width: 1600px) {

    #intro {
        background-image: url(../img/hero-art-large-pt1@2x.webp);
        padding-bottom: 63.15%;
    }

    #hero-logo {
        width: 100%;
    }

    #intro h1 {
        width: 21.2%;
        top: 48%;
    }
    
    #intro .content {
        width: 380px;
        padding-bottom: 18px;
    }

    .hero-reviews-list {
        top: calc(50% + 30px);
        gap: 30px;
        width: 180px;
    }
    
    .hero-reviews-list .stars {
        height: 10px;
    }

    .hero-reviews-list p {
        font-size: 14px;
        margin: 14px 0;
    }
	
	h2.review-rating {
    font-size: 28px;
	}
    
    #hero-platforms {
        margin-top: 32px;
    }

    #hero-metaquest {
        height: 14px;
    }
    
    #hero-psvr {
        height: 19px;
    }
    
    #hero-steam {
        width: 95px;
    }
    
    #hero-buttons {
        gap: 23px;
    }

    #arrow-down-icon {
        margin: 38px auto 0;
        width: 35px;
    }
	
	span.small-note {
		font-size: 15px;
	}

	span.small-note:before {
    	width: 20px;
	}


}

@media (max-width: 1180px) {

    #intro {
        background-image: url(../img/hero-art-med-pt1@2x.webp);
        padding-bottom: 132.74%;
    }

    #intro .content {
        width: 380px;
        padding-bottom: 30px;
    }

    #hero-reviews,
    #hero-reviews-right {
        display: none;
    }

    #mobile-reviews {
        width: 100%;
		padding: 60px 30px 10px 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
		gap: 40px;
    }
	
	#mobile-reviews-row-2 {
		width: 100%;
		padding: 45px 30px 10px 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
		gap: 40px;
	}
	
	h2.review-rating {
        font-size: 25px;
    }
    
    #mobile-reviews .stars, #mobile-reviews-row-2 .stars {
        height: 12px;
    }

    #mobile-reviews img, #mobile-reviews-row-2 img {
        margin: 0 auto;
    }

    #mobile-reviews li, #mobile-reviews-row-2 li {
        text-align: center;
        width: 33.33%;
    }

    #mobile-reviews p, #mobile-reviews-row-2 p {
        font-size: 18px;
    }

    #intro h1 {
        width: 36.34%;
        min-width: 305px;
        top: 47%;
    }

    #hero-platforms {
        margin-top: 27px;
    }

    #hero-metaquest {
        height: 14px;
    }
    
    #hero-psvr {
        height: 19px;
    }
    
    #hero-steam {
        width: 95px;
    }

    #hero-buttons {
        gap: 18px;
    }

    #arrow-down-icon {
        margin: 56px auto 0;
        width: 35px;
    }
	
	span.small-note {
		font-size: 13px;
	}

	span.small-note:before {
    	width: 16px;
	}

}

@media (max-width: 820px) {

    #intro {
        padding-bottom: 178%;
        background-image: url(../img/hero-art-small-pt1@2x.webp);
    }

    #intro .content {
        width: 310px;
        padding-bottom: 16px;
    }

    #mobile-reviews {
        padding: 55px 20px;
        gap: 40px;
        flex-direction: column;
    }
	
	#mobile-reviews-row-2 {
        padding: 0px 20px;
        gap: 40px;
        flex-direction: column;
    }
	
	#mobile-reviews li, #mobile-reviews-row-2 li {
        width: 100%;
        max-width: 460px;
        margin: auto;
    }

    #mobile-reviews br, #mobile-reviews-row-2 br {
        display: none;
    }

    #intro h1 {
        width: 43%;
        top: 39.2%;
        min-width: 240px;
    }

    #hero-platforms {
        margin-top: 30px;
    }
    
    #hero-metaquest {
        height: 11px;
    }
    
    #hero-psvr {
        height: 16px;
    }
    
    #hero-steam {
        width: auto;
        height: 19px;
    }

    #hero-buttons {
        flex-direction: column;
        gap: 12px;
    }

    #arrow-down-icon {
        margin: 35px auto 0;
    }
	
	span.small-note {
		font-size: 12px;
	}

	span.small-note:before {
    	width: 15px;
	}

}

/* TRAILERS */

#trailers {
    padding-top: 120px;
    position: relative;
    border-top: 2px solid var(--red);
}

#mobile-reviews:before,
#trailers:before {
    position: absolute;
    content: "";
    width: 189px;
    height: 8px;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: url(../img/notch-top.svg) 0 0 / contain no-repeat;
}

#trailers-slider {
    margin-top: 65px;
}

#trailers-slider h3 {
	margin-top: 20px;
}

#trailers-slider-mobile {
    display: none;
}

@media (max-width: 1600px) {

    #trailers {
        padding-top: 70px;
    }

    #trailers-slider {
        margin: 50px auto 0;
    }

}

@media (max-width: 1180px) {

    #trailers {
        margin-top: 0;
        border-top: none;
    }

    #trailers:before {
        display: none;
    }

    #trailers-slider {
        margin: 40px auto 0;
    }

    #mobile-reviews {
        position: relative;
        border-top: 2px solid var(--red);
    }

}

@media (max-width: 820px) {

    #trailers-slider {
        margin-top: 40px;
    }

    #trailers {
        margin-top: 10px;
    }
    
	#trailers-slider-mobile h3 {
		padding-top: 15px;
	}

}

/* EDITIONS */

#editions {
    padding-top: 120px;
}

#editions-list {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}

#editions-list > li figure {
    width: 670px;
    /* height: 458px; */
    padding: 10px;
    position: relative;
}

#editions-list > li h3 {
    font-size: 23px;
    font-weight: normal;
    letter-spacing: 0.25em;
    margin: 36px auto 32px;
}

#standard-edition h3 {
    color: var(--red);
}

#deluxe-edition h3 {
    color: var(--yellow);
}

.features-wrap {
    padding-left: 28px;
    height: 117px;
    margin-bottom: 60px;
}

.features li {
    font-size: 20px;
}

#deluxe-edition .features li:before {
    background-image: url(../img/bullet-alt.svg);
}

#editions-list > li h4 {
    font-size: 18px;
    font-weight: normal;
}

#editions-list > li#deluxe-edition h4 {
    color: var(--yellow);
}

#editions-list > li .platforms {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 18px;
    margin-bottom: 32px;
}

#editions-list > li .platforms .metaquest {
    height: 13px;
}

#editions-list > li .platforms .psvr {
    height: 18px;
}

#editions-list > li .platforms .steam {
    width: 91px;
}

.notes {
    margin-top: 75px;
}

@media (max-width: 1600px) {

    #editions {
        padding-top: 90px;
    }
    
    #editions-list {
        margin-top: 40px;
    }

    #editions-list > li figure {
        width: 520px;
        padding: 9px;
    }
    
    #editions-list > li h3 {
        font-size: 18px;
        margin: 30px auto 22px;
    }

    .features-wrap {
        padding-left: 22px;
        height: 98px;
        margin-bottom: 34px;
    }
    
    .features li {
        font-size: 16px;
    }

    .features li:before {
        width: 6px;
        height: 10px;
        margin-right: 14px;
    }

    #editions-list > li h4 {
        font-size: 14px;
    }

    #editions-list > li .platforms {
        gap: 17px;
        margin-bottom: 24px;
    }
    
    #editions-list > li .platforms .metaquest {
        height: 12px;
    }
    
    #editions-list > li .platforms .psvr {
        height: 17px;
    }

    #editions-list > li .platforms .steam {
        width: 81px;
    }

    .notes {
        margin-top: 40px;
    }

}

@media (max-width: 1180px) {

    #editions {
        padding-top: 0;
        margin-top: 70px;
    }

    #editions-list {
        margin-top: 43px;
    }

    #editions-list > li {
        width: 375px;
    }

    #editions-list > li figure {
        width: 375px;
        padding: 7px;
    }
    
    #editions-list > li h3 {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .features-wrap {
        padding-left: 21px;
        height: 108px;
        margin-bottom: 32px;
    }

    .features li {
        font-size: 15px;
		text-indent: -16px;
		padding-left: 16px;
    }
    
    .features li:before {
        width: 6px;
        height: 10px;
        margin-right: 10px;
    }

    #editions-list > li h4 {
        font-size: 13px;
    }
    
    #editions-list > li .platforms {
        gap: 15px;
        margin-bottom: 27px;
    }

    #editions-list > li .platforms .metaquest {
        height: 11px;
    }
    
    #editions-list > li .platforms .psvr {
        height: 16px;
    }
    
    #editions-list > li .platforms .steam {
        width: auto;
        height: 19px;
    }

    .notes {
        margin-top: 60px;
    }
    
}

@media (max-width: 820px) {

    #editions {
        margin-top: 80px;
    }

    #editions-list {
        flex-direction: column;
        gap: 50px;
    }

    #editions-list > li {
        width: 100%;
    }

    #editions-list > li .content {
        max-width: 350px;
        margin: 0 auto;
    }

    #editions-list > li figure {
        width: 100%;
    }

    #editions-list > li .btn {
        margin: 0 auto;
        display: block;
    }

    .notes {
        margin-top: 50px;
    }

    .features-wrap {
        height: auto;
    }

    #editions-list > li .platforms {
        justify-content: center;
    }

}

/* OVERVIEW */

#overview {
    padding-top: 95px;
    margin-top: 15px;
    position: relative;
    overflow: hidden;
}

#overview .content {
    margin-top: 0px;
}

#overview h3 {
    font-family: Oxanium;
    letter-spacing: 0.25em;
    font-size: 50px;
    line-height: 1.2;
    margin-bottom: 40px;
    padding-right: 40px;
}

#overview .content {
    width: 50%;
}

#overview-text {
    line-height: 1.3;
    height: 340px;
    padding-left: 44px;
    background: url(../img/para-bg-360.svg) left center / contain no-repeat;
}

#overview .container {
    position: relative;
}

#overview .split-container{
	display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 75px;
}

	#overview figure.mobile-version {
		display: none;
	}

#overview figure {
	margin-left: 23px;
    position: relative;
	width: 50%;
	top: -40px;
    /*position: absolute;
    top: 65px;
    left: calc(50% - 120px);
    right: 0;
    height: 770px;*/
}

#overview figure img {
	display: block;
    width: 920px;
	max-width: none;
	margin-left: -60px;
}

#overview figure figcaption {
    margin-left: 10px;
}

.gray-caption {
    height: 24px;
    box-sizing: border-box;
    position: relative;
    background: url(../img/line-gray.svg) 0 0 / 100% 9px no-repeat;
    padding-top: 11px;
    color: #3c3c3b;
    width: 700px;
    font-size: 13px;
}

.gray-caption:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../img/dot-gray.svg) 0 0 / contain no-repeat;
    position: absolute;
    left: -34px;
    top: 0;
}

#overview .mobile-text {
    display: none;
}

@media (max-width: 1600px) {

    #overview {
        margin-top: 35px;
    }
    
    #overview .content {
        margin-top: 0px;
    }

    #overview h3 {
        font-size: 34px;
        margin-bottom: 28px;
    }
    
    #overview .content {
        width: 510px;
    }
    
    #overview-text {
        height: 295px;
        padding-left: 32px;
    }

    #overview figure {
        /*left: calc(50% - 20px);*/
        height: 534px;
    }
	
	#overview figure img {
    	width: 670px;
	}

    #overview figure figcaption {
        margin-left: 74px;
    }

    .gray-caption {
        height: 16px;
        padding-top: 6px;
        width: 480px;
        font-size: 10px;
    }
    
    .gray-caption:before {
        width: 16px;
        height: 16px;
        left: -23px;
    }
    
}

@media (max-width: 1180px) {

    #overview {
        margin-top: 25px;
    }
	
	#overview .split-container{
		    display: grid;
    justify-content: space-between;
    align-items: center;
    gap: 0px;
		
	}

    #overview .content {
        margin: 0;
        align-items: center;
        width: 330px;
    }

    #overview h3 {
        font-size: 40px;
        padding-right: 40px;
        height: 374px;
        margin: 0;
        display: flex;
        align-items: center;
    }

    #overview .notched-bg {
        display: none;
    }

    #overview .mobile-text {
        display: block;
        margin: 45px auto 0;
        max-width: 780px;
        line-height: 1.3;
        text-align: center;
    }

    #overview figure {
		position: absolute;
		height: auto;
		top: -15px;
        left: calc(50% - 110px);
    }

    #overview figure img {
		width: 140%;
        object-fit: contain;
        object-position: left bottom;
		margin-left: 10px;
    }
	
	.gray-caption{
		width: 390px;
	}

}

@media (max-width: 820px) {

    #overview {
        position: relative;
        margin-top: 0;
        padding-top: 60px;
    }

    #overview h3 {
        text-align: center;
        width: 100%;
        font-size: 30px;
        height: auto;
        margin-top: 25px;
        padding: 0;
    }

    #overview .content {
        width: 100%;
    }

    #overview .mobile-text {
        margin-top: 30px;
    }

    #overview .gray-caption {
        width: 335px;
    }

    #overview figure {
		display: none;
    }
	
	#overview figure.mobile-version {
		display: block;
        position: relative;
        width: 100%;
        left: 0;
        padding: 0px;
        margin-left: 0px;
	}
	
	#overview figure img {
        width: 100%;
		margin-left: 20px;
	}
	
	#overview figure figcaption {
        margin-left: 43px;
    }
	
    .gray-caption {
        background: none!important;
        border-top: 1px solid #3c3c3b;
    }
	
}

@media (max-width: 440px) {
	
	#overview figure figcaption {
        margin-left: 0px;
    }
	#overview .gray-caption {
        width: 100%;
    }
	#overview .gray-caption:before {
        visibility: hidden;
    }
	#overview figure img {
        margin-left: 0px;
    }
	
}

/* FEATURES */

#features {
    margin-top: 35px;
    padding-top: 65px;
}

#features .section-title {
    margin-bottom: 75px;
}

.feature {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 75px;
    margin-top: 65px;
}

.feature-right {
    flex-direction: row-reverse;
}

.feature .heading-wrap {
    display: flex;
}

.feature .heading-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 25px;
}

.feature .heading-wrap img {
    width: 67px;
    height: 61px;
}

.feature .heading-wrap h3 {
    font-size: 23px;
    letter-spacing: 0.25em;
}

.feature-right .heading-wrap {
    flex-direction: row-reverse;
    justify-content: right;
}

.feature:not(.feature-right) .content {
    padding-right: 25px;
}

.feature-right .content {
    padding-left: 25px;
}

.feature-right .content h3 {
    text-align: right;
}

.feature .text {
    font-size: 22px;
    line-height: 1.3;
    padding-left: 45px;
}

.feature-right .text {
    padding-left: 0;
    padding-right: 45px;
    text-align: right;
    background: url(../img/notched-line.svg) right center / 10px auto repeat-y;
}

.feature figure {
	display: flex;
    margin-left: 23px;
    position: relative;
    padding: 10px;
    min-width: 670px;
}

.feature figure figcaption {
    position: absolute;
    left: 0;
    top: 50%;
    transform: rotate(-90deg) translate(-50%, -1em);
    color: var(--red);
    transform-origin: left center;
    line-height: 1;
}

.feature-right figure figcaption {
    left: auto;
    right: 0;
    transform: rotate(-90deg) translate(50%, 1em);
    color: var(--red);
    transform-origin: right center;
}

@media (max-width: 1600px) {

    #features {
        margin-top: 20px;
    }

    #features .section-title {
        margin-bottom: 70px;
    }
    
    .feature {
        gap: 58px;
        margin-top: 50px;
    }

    .feature .heading-wrap {
        gap: 20px;
        margin-bottom: 19px;
    }
    
    .feature .heading-wrap img {
        width: 52px;
        height: 48px;
    }
    
    .feature .heading-wrap h3 {
        font-size: 18px;
    }

    .feature:not(.feature-right) .content {
        padding-right: 23px;
    }
    
    .feature-right .content {
        padding-left: 23px;
    }
    
    .feature .text {
        font-size: 16px;
        padding-left: 35px;
    }

    .feature-right .text {
        padding-left: 0;
        padding-right: 35px;
    }
    
    .feature figure {
        margin-left: 18px;
        padding: 9px;
        min-width: 521px;
    }

    .feature-right figure {
        margin-left: 0;
        margin-right: 18px;
    }

}

@media (max-width: 1180px) {

    #features {
        margin-top: 10px;
    }

    #features .section-title {
        margin-bottom: 0;
    }

    .feature {
        margin-top: 55px;
    }
    
    .feature .heading-wrap {
        gap: 13px;
        margin-bottom: 13px;
    }

    .feature .heading-wrap img {
        width: 36px;
        height: 33px;
    }

    .feature .heading-wrap h3 {
        font-size: 15px;
    }

    .feature:not(.feature-right) .content {
        padding-right: 0;
    }
    
    .feature-right .content {
        padding-left: 0;
    }

    .feature .text {
        font-size: 15px;
        padding-left: 25px;
    }

    .feature-right .text {
        padding-left: 0;
        padding-right: 25px;
    }

    .feature figure {
        margin-left: 12px;
        padding: 6px;
        min-width: 363px;
    }
    
    .feature-right figure {
        margin-left: 0;
        margin-right: 12px;
    }

}

@media (max-width: 820px) {

    #features {
        margin-top: 0;
        padding-top: 60px;
    }

    #features .section-title {
        margin-bottom: 40px;
    }

    .feature {
        display: block;
        margin-top: 32px;
    }

    .feature figure {
        width: 100%;
    }

    .feature figure,
    .feature-right figure {
        margin-left: 0;
        margin-right: 0;
        min-width: 100%;
    }

    .feature .content {
        margin-top: 30px;
    }

    .feature-right .content h3 {
        text-align: left;
    }

    .feature .heading-wrap {
        gap: 18px;
    }

    .feature .heading-wrap img {
        width: 40px;
        height: auto;
    }

    .feature-right .heading-wrap {
        flex-direction: row;
        justify-content: flex-start;
    }

    .feature-right .text {
        padding-right: 0;
        padding-left: 25px;
        background-position: 0 0;
        text-align: left;
    }
}

/* STORY */

#story {
    margin-top: 85px;
    padding-top: 35px;
}

#story-feature {
	display: flex;
    margin: 65px auto;
    position: relative;
    padding: 10px;
    width: 1040px;
}


#story .content {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

#story h3.subtitle {
    margin: 0.35em auto 1em;
}

@media (max-width: 1600px) {

    #story {
        margin-top: 65px;
    }
    
    #story-feature {
        margin-bottom: 58px;
        padding: 10px;
        width: 883px;
    }

    #story .content {
        max-width: 820px;
    }

}

@media (max-width: 1180px) {

    #story {
        margin-top: 40px;
    }

    #story-feature {
        margin: 30px auto;
        padding: 9px;
        width: 765px;
    }

    #story .content {
        max-width: 720px;
    }
    
}

@media (max-width: 820px) {
    
    #story-feature {
        width: 100%;
    }

}

/* THE WORLD */

#world {
    margin-top: 75px;
    padding-top: 65px;
}

#world-slider {
    padding: 0 90px;
    position: relative;
    margin-top: 80px;
}

#world-slider > .swiper > .swiper-wrapper > .swiper-slide {
    display: flex;
    justify-content: space-between;
}

#world-slider > .swiper > .swiper-wrapper > .swiper-slide figure {
    width: 564px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#world-slider > .swiper > .swiper-wrapper > .swiper-slide figure img {
    width: 564px;
    height: auto;
    position: relative;
}

#world-slider > .swiper > .swiper-wrapper > .swiper-slide .text {
    padding-left: 40px;
    margin-bottom: 45px;
    margin-top: 35px;
}

#world-slider > .swiper > .swiper-wrapper > .swiper-slide h3 {
}

#world-slider > .swiper > .swiper-wrapper > .swiper-slide h3 span {
    display: block;
    color: var(--red);
    letter-spacing: 0.125em;
    margin-bottom: 0.5em;
    font-size: 23px;
}

#world-slider > .swiper > .swiper-wrapper > .swiper-slide h3 strong {
    letter-spacing: 0.25em;
    font-size: 38px;
	font-weight: 600;
}

#world-slider > .swiper > .swiper-wrapper > .swiper-slide > figure figcaption {
    background: url(../img/line-gray-2.svg) 0 0 / 100% 9px no-repeat;
    width: 536px;
    position: absolute;
    bottom: 0;
    left: 34px;
}

#world-slider > .swiper > .swiper-wrapper > .swiper-slide .content {
    width: 600px;
}

#world-slider .swiper-button-prev {
    left: 0;
    top: 260px;
}

#world-slider-thumbs {
    position: absolute;
    left: 750px;
    bottom: 135px;
    width: 280px;
    gap: 26px;
    justify-content: left;
}

#world-slider-thumbs .swiper-slide {
    height: auto;
    opacity: 0.5;
    width: 180px;
    background: none;
    cursor: pointer;
}

#world-slider-thumbs .swiper-slide:hover,
#world-slider-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}


#world-slider-thumbs .swiper-slide img {
    width: 165px;
    height: auto;
}

#world-slider-thumbs .swiper-slide h4 {
    color: var(--red);
    font-size: 15px;
    line-height: 1.2;
    margin-top: 0.8em;
    text-align: center;
}

#world-slider .swiper-button-next {
    right: 0;
    top: 260px;
}

@media (max-width: 1600px) {

    #world {
        margin-top: 30px;
    }

    #world-slider {
        padding: 0 70px;
        margin-top: 68px;
    }

    #world-slider > .swiper > .swiper-wrapper > .swiper-slide figure {
        width: 564px;
        padding-bottom: 83px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    #world-slider > .swiper > .swiper-wrapper > .swiper-slide figure img {
        width: 440px;
        height: auto;
        position: relative;
    }
    
    #world-slider > .swiper > .swiper-wrapper > .swiper-slide >  .swiper-slide .text {
        padding-left: 35px;
        margin-bottom: 40px;
        margin-top: 32px;
    }
    
    #world-slider > .swiper > .swiper-wrapper > .swiper-slide h3 span {
        font-size: 14px;
    }
    
    #world-slider > .swiper > .swiper-wrapper > .swiper-slide h3 strong {
        font-size: 28px;
    }
    
    #world-slider > .swiper > .swiper-wrapper > .swiper-slide figure figcaption {
        width: 440px;
        margin-left: 15px;
    }
    
    #world-slider > .swiper > .swiper-wrapper > .swiper-slide .content {
        width: 464px;
    }
    
    #world-slider-thumbs {
        position: absolute;
        left: 608px;
        bottom: 40px;
        gap: 20px;
        width: 222px;
    }

    #world-slider-thumbs .swiper-slide,
    #world-slider-thumbs .swiper-slide img {
        width: 101px;
    }

    #world-slider-thumbs .swiper-slide h4 {
        font-size: 12px;
    }

    #world-slider .swiper-button-prev,
    #world-slider .swiper-button-next {
        top: 200px;
    }
    
}

@media (max-width: 1180px) {

    #world {
        margin-top: 15px;
    }

    #world-slider {
        padding: 0 30px;
        margin-top: 65px;
        margin-bottom: 135px;
    }

    #world-slider > .swiper > .swiper-wrapper > .swiper-slide {
        display: block;
    }
    
    #world-slider > .swiper > .swiper-wrapper > .swiper-slide figure {
        width: 439px;
        padding-bottom: 83px;
        margin: 0 auto;
    }

    #world-slider > .swiper > .swiper-wrapper > .swiper-slide figure img {
        width: 439px;
    }

    #world-slider > .swiper > .swiper-wrapper > .swiper-slide .text {
        padding: 0;
        max-width: 720px;
        background: none;
        margin: 24px auto 36px;
    }

    #world-slider > .swiper > .swiper-wrapper > .swiper-slide figure figcaption {
        margin: 0 auto;
        width: 439px;
    }
    
    #world-slider > .swiper > .swiper-wrapper > .swiper-slide .content {
        width: 100%;
        max-width: 720px;
        margin: 50px auto 34px;
    }
    
    #world-slider-thumbs {
        left: 50%;
        bottom: auto;
        top: 100%;
        transform: translateX(-50%);
        justify-content: center;
    }

    #world-slider .content {
        text-align: center;
    }

    #world-slider > .swiper > .swiper-wrapper > .swiper-slide figure figcaption {
        left: 0;
    }

    #world-slider .swiper-button-prev, 
    #world-slider .swiper-button-next {
        top: 189px;
    }

}

@media (max-width: 820px) {

    #world {
        margin-top: 0;
        padding-top: 60px;
    }

    #world .section-title {
        max-width: 100%;
        margin: 0 auto;
    }

    #world-slider {
        margin-top: 32px;
    }

    #world-slider > .swiper > .swiper-wrapper > .swiper-slide figure {
        padding-bottom: 65px;
        width: 360px;
    }

	#world-slider > .swiper > .swiper-wrapper > .swiper-slide figure figcaption {
        background: url(../img/line-gray-2.svg) 0 0 / 100% 8px no-repeat;
		margin: 0 auto;
        width: 360px;
    }
	
    #world-slider figure figcaption {
        width: 100%;
    }
	
    #world-slider .swiper-slide .content {
        margin-bottom: 0;
    }

    #world .container {
        padding: 0 10px;
    }

    #world .gray-caption {
        margin-left: 0;
        padding-left: 0;
    }

    #world .gray-caption:before {
        display: none;
    }
	
	#world-slider .swiper-button-prev,
    #world-slider .swiper-button-next {
        display: none;
    }

}

@media (max-width: 440px) {
	#world-slider {
        padding: 0 10px;
    }
	
    #world-slider > .swiper > .swiper-wrapper > .swiper-slide figure {
        width: 100%;
    }
	
	#world-slider > .swiper > .swiper-wrapper > .swiper-slide figure figcaption {
        width: 100%;
    }
}

/* EXPERIENCE 360 */

#experience-360 {
    margin-top: 60px;
    padding-top: 65px;
}

#experience-360 .figure-frame {
    position: relative;
    padding: 11px;
    margin-top: 45px;
}

#experience-360 .figure-frame .bracket {
    width: 38px;
    height: 38px;
}

#experience-360 .content {
	max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

#image-360 {
    width: 1420px;
    height: 786px;
    background: #000;
    display: block;
}

#experience-360 .figure-frame figcaption {
    position: absolute;
    left: 0;
    top: calc(100% + 25px);
}

#experience360-slider {
    margin: 90px auto 0;
}

#experience360-slider h3 {
    margin-top: -10px;
}

#experience360-slider .swiper-slide {
    opacity: 0.5;
    cursor: pointer;
    transition: 0.2s all linear;
}

#experience360-slider .swiper-slide.active, 
#experience360-slider .swiper-slide:hover {
    opacity: 1;
}

@media (max-width: 1600px) {

    #experience-360 .figure-frame {
        padding: 8px;
        margin-top: 40px;
    }

    #experience-360 .figure-frame .bracket {
        width: 30px;
        height: 30px;
    }
	
	#experience-360 .content {
		max-width: 820px;
	}
    
    #image-360 {
        width: 1104px;
        height: 611px;
    }

    #experience-360 .figure-frame figcaption {
        top: calc(100% + 20px);
    }
	
	#experience360-slider h3 {
    margin-top: 0px;
}
    
    #experience360-slider {
        margin-top: 70px;
    }

}

@media (max-width: 1180px) {

    #experience-360 {
        margin-top: 5px;
    }

    #experience-360 .figure-frame {
        padding: 7px;
        margin-top: 58px;
    }
    
    #experience-360 .figure-frame .bracket {
        width: 21px;
        height: 21px;
    }
	
	#experience-360 .content {
		max-width: 720px;
	}

    #image-360 {
        width: 769px;
        height: 425px;
    }

    #experience-360 .figure-frame figcaption {
        top: calc(100% + 13px);
    }

    #experience360-slider {
        margin: 60px auto 70px;
    }

}


@media (max-width: 820px) {

    #experience-360 {
        margin-top: 30px;
    }

    #image-360 {
        width: 100%;
    }

    #experience-360 .figure-frame {
        margin-top: 36px;
    }

    #experience360-slider {
        margin-bottom: 0;
    }

    #experience360-slider .swiper-pagination-bullets {
        display: none;
    }

}

/* SCREENSHOTS */

#screenshots {
    margin-top: 60px;
    padding-top: 65px;
}

#screenshots-slider {
    margin-top: 70px;
}

#screenshots-slider .swiper {
    height: 506px;
}

#screenshots-slider .swiper-slide {
    height: 237px;
}

#screenshots-slider .swiper-slide > a {
    display: block;
}

@media (max-width: 1600px) {

    #screenshots {
        margin-top: 20px;
    }
    
    #screenshots-slider {
        margin-top: 65px;
    }
    
    #screenshots-slider .swiper {
        height: 402px;
    }
    
    #screenshots-slider .swiper-slide {
        height: 189px;
    }
}

@media (max-width: 1180px) {

    #screenshots {
        margin-top: 15px;
    }

    #screenshots-slider {
        margin-top: 48px;
    }

}

@media (max-width: 820px) {

    #screenshots {
        margin-top: 10px;
    }

    #screenshots-slider .swiper-slide,
    #screenshots-slider .swiper-slide a {
        width: 335px;
        height: 189px !important;
    }

    #screenshots-slider .swiper {
        width: 335px;
    }

    #screenshots-slider .swiper {
        height: 394px !important;
    }

    #screenshots-slider .swiper-button-prev,
    #screenshots-slider .swiper-button-next {
        top: 204px !important;
    }

}

/* WALLPAPERS */

#wallpapers {
    margin-top: 60px;
    padding-top: 65px;
}

#wallpapers-list {
    margin-top: 70px;
    margin-left: auto;
    margin-right: auto;
    width: 1324px;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

#wallpapers-list li {
    position: relative;
    width: 420px;
    /* height: 237px; */
}

#wallpapers-list h3 {
    cursor: pointer;
    display: flex;
    justify-content: center;
    gap: 16px;
    line-height: 1;
    font-size: 16px;
    color: var(--red);
    letter-spacing: 0.18em;
    margin: 20px 0 0;
}

#wallpapers-list h3 img {
    height: 14px;
    width: auto;
    transition: 0.2s all ease-out;
}

#wallpapers-list h3.open img {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
}

#wallpapers-list .thumb-16-9:hover img {
    opacity: 1;
}

.wp-dropdown {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    width: 200px;
    padding: 15px;
    background: #000;
    border: var(--red) 1px solid;
    text-transform: none;
    z-index: 5;
    font-size: 16px;
}

.wp-dropdown a {
    color: var(--red);
}

.wp-dropdown h4 {
    font-size: 1em;
    color: #fff;
}

.wp-dropdown h4:last-of-type {
    margin-top: 1em;
}

@media (max-width: 1600px) {

    #wallpapers {
        margin-top: 20px;
    }

    #wallpapers-list {
        width: 1028px;
        gap: 24px;
    }

    #wallpapers-list li {
        width: 326px;
    }
	
	.wp-dropdown {
        font-size: 15px;
    }
}

@media (max-width: 1180px) {

    #wallpapers {
        margin-top: 15px;
    }

    #wallpapers-list {
        margin-top: 48px;
        width: 695px;
    }
	
	#wallpapers-list h3 {
        font-size: 14px;
    }

    .wp-dropdown {
        font-size: 14px;
        width: 180px;
    }

}

@media (max-width: 820px) {

    #wallpapers {
        margin-top: 10px;
    }

    #wallpapers-list li {
        width: 335px;
        /* height: 189px !important; */
    }

    #wallpapers-list {
        width: 335px;
    }

    #wallpapers-list h3 {
        font-size: 13px;
        gap: 14px
    }

    #wallpapers-list h3 img {
        height: 11px;
    }

    .wp-dropdown {
        bottom: 18px;
        width: 160px;
    }

}


/* PRESS & SOCIAL */

#press {
    margin-top: 65px;
    padding-top: 65px;
}

#social {
    margin-top: 150px;
}

#social h3.title {
    font-size: 45px;
    letter-spacing: 0.25em;
    line-height: 1.3;
    min-width: 500px;
}

#social .container {
    display: flex;
    align-items: center;
    max-width: 1140px;
    justify-content: space-between;
    gap: 15px;
}

#social-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 25px;
    min-width: 607px;
}

#social-list li {
    width: 133px;
    height: 146px;
    position: relative;
    background: url(../img/thumbnail-social.svg) 0 0 / contain no-repeat;
}

#social-list li a {
    display: block;
    width: 100%;
    height: 100%;
}

#social-list li svg {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translate(-50%, -50%);
}

#social-list li span {
	font-family: Oxanium;
    font-size: 11px;
    font-weight: 700;
    display: block;
    position: absolute;
    bottom: 22px;
    left: 0;
    text-align: center;
    color: var(--red);
    width: 100%;
    text-transform: uppercase;
}

#discord-icon {
    height: 49px;
}

#youtube-icon {
    width: 63px;
}

#instagram-icon {
    width: 56px;
}

#linkedin-icon {
    width: 55px;
}

#facebook-icon {
    width: 55px;
}

#twitch-icon {
    width: 55px;
}

#x-icon {
    width: 50px;
}

#tiktok-icon {
    width: 51px;
}

#social-list li svg {
	fill:#b52200;
}

@media (max-width: 1600px) {

    #press {
        margin-top: 25px;
    }

    #social {
        margin-top: 110px;
    }

    #social h3.title {
        min-width: 400px;
    }
    
    #social .container {
        max-width: 1020px;
    }

}

@media (max-width: 1180px) {

    #press {
        margin-top: 30px;
    }
    
    #social {
        margin-top: 85px;
    }

    #social h3.title {
        min-width: 100%;
        text-align: center;
        margin-bottom: 40px;
    }
    
    #social .container {
        max-width: 560px;
        display: block;
    }
    
    #social-list {
        min-width: 560px;
        gap: 24px;
    }

    #social-list li {
        width: 122px;
        height: 133px;
    }

    #social-list li svg {
        top: 56px;
    }

    #social-list li span {
        font-size: 9px;
        bottom: 19px;
    }

    #discord-icon {
        height: 45px;
    }
    
    #youtube-icon {
        height: 40px;
        width: auto;
    }
    
    #instagram-icon {
        width: 51px;
    }
    
    #linkedin-icon {
        width: 50px;
    }
    
    #facebook-icon {
        width: 50px;
    }
    
    #twitch-icon {
        width: 52px;
    }
    
    #x-icon {
        width: 46px;
    }
    
    #tiktok-icon {
        width: 47px;
    }

}

@media (max-width: 820px) {

    #press {
        padding-top: 60px;
        margin-top: 0;
    }

    #social h3.title {
        font-size: 30px;
        width: 260px;
        margin-left: auto;
        margin-right: auto;
    }

    #social {
        margin-top: 72px;
    }

    #social-list {
        gap: 18px;
        min-width: 100%;
        justify-content: center;
    }

    #social-list li {
        width: 96px;
        height: 104px;
    }

    #social-list li svg {
        position: absolute;
        top: 43px;
    }

    #social-list li span {
        font-size: 7px;
        bottom: 16px;
    }

    #discord-icon {
        height: 35px;
    }
    
    #youtube-icon {
        height: auto;
        width: 45px;
    }
    
    #instagram-icon {
        width: 40px;
    }
    
    #linkedin-icon {
        width: 39px;
    }
    
    #facebook-icon {
        width: 39px;
    }
    
    #twitch-icon {
        width: 39px;
    }
    
    #x-icon {
        width: 36px;
    }
    
    #tiktok-icon {
        width: 37px;
    }

}

/* UPDATES */

#updates {
    padding-top: 65px;
    padding-bottom: 75px;
    margin-top: 50px;
    position: relative;
}

#updates .container {
    position: relative; 
    padding: 46px 0;
}

#updates .bracket {
    width: 38px;
    height: 38px;
}

#updates .postheading {
    max-width: 900px;
    margin: 1em auto 1em;
    text-align: center;
}

#mce-EMAIL {
    width: 100%;
    text-align: center;
    background: transparent;
    text-transform: uppercase;
}

#mc-embedded-subscribe {
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 25px;
    cursor: pointer;
}

#mc_embed_signup_scroll {
    color: var(--red);
    letter-spacing: 0.2em;
    font-size: 15px;
    font-family: Oxanium;
    text-transform: uppercase;
}

#mc_embed_signup_scroll .label {
    margin: 3.5em 0 1.5em;
}

#mc_embed_shell {
    margin: 0 auto;
    width: 480px;
    text-align: center;
}

@media (max-width: 1600px) {

    #updates {
        margin-top: 20px;
    }
    
    #updates .container {
        padding: 55px 0 65px;
    }

    #updates .postheading {
        max-width: 820px;
    }

    #mc-embedded-subscribe {
        margin-top: 30px;
    }

    #mc_embed_signup_scroll {
        font-size: 14px;
    }

}

@media (max-width: 1180px) {

    #updates {
        padding-bottom: 85px;
        margin-top: 15px;
    }

    #updates .container {
        padding: 65px 30px;
    }

    #updates .postheading {
        max-width: 560px;
    }

    #mc_embed_signup_scroll {
        font-size: 13px;
    }

}

@media (max-width: 820px) {

    #updates {
        margin-top: 5px;
    }

    #updates .container {
        max-width: calc(100% - 40px);
    }

    #updates .bracket {
        width: 30px;
        height: 30px;
    }

    #updates span {
        display: inline-block;
        padding: 5px 50px;
    }

    #mc_embed_shell {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }

    #mc-embedded-subscribe {
        margin-top: 30px;
    }

    #mc_embed_signup_scroll {
        font-size: 12px;
    }

    #mc_embed_signup_scroll .label {
        margin: 3em 0 1em;
    }

}


/* CHARACTERS */

#characters {
    margin-top: 35px;
    padding-top: 65px;
}

#characters-slider {
    padding: 0 90px;
    position: relative;
    margin-top: -40px;
    height: 704px;
}

#characters-slider .swiper-wrapper {
    height: 704px;
}

#characters-slider > .swiper > .swiper-wrapper > .swiper-slide {
    display: flex;
    justify-content: space-between;
}

#characters-slider > .swiper > .swiper-wrapper > .swiper-slide figure {
    width: 600px;
    padding-bottom: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

#characters-slider > .swiper > .swiper-wrapper > .swiper-slide figure img {
    max-width: 100%;
    height: auto;
    position: relative;
}

#characters-slider > .swiper > .swiper-wrapper > .swiper-slide .text {
    padding-left: 40px;
    /* margin-bottom: 45px; */
    margin-top: 35px;
}

#characters-slider > .swiper > .swiper-wrapper > .swiper-slide h3 span {
    display: block;
    font-weight: 500;
    color: var(--red);
    letter-spacing: 0.125em;
    margin-bottom: 0.5em;
    font-size: 18px;
}

#characters-slider > .swiper > .swiper-wrapper > .swiper-slide h3 strong {
    letter-spacing: 0.25em;
    font-size: 38px;
	font-weight: 600;
}

#characters-slider > .swiper > .swiper-wrapper > .swiper-slide h3 b {
    font-size: 20px;
    font-weight: 500;
    display: block;
	letter-spacing: 2pt;
}

#characters-slider > .swiper > .swiper-wrapper > .swiper-slide > figure figcaption {
    background: url(../img/line-gray-3.svg) 0 0 / 100% 8px no-repeat;
    width: 570px;
    position: absolute;
    bottom: 0;
    left: 34px;
}

#characters-slider > .swiper > .swiper-wrapper > .swiper-slide .content {
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#characters-slider .swiper-button-prev {
    left: 0;
    top: 316px;
}

#characters-slider .swiper-button-next {
    right: 0;
    top: 316px;
}

#characters-slider-thumbs {
    margin-top: 70px;
}

#characters-slider-thumbs .swiper-slide {
    height: auto;
    opacity: 0.4;
    width: 180px;
    background: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#characters-slider-thumbs .swiper-slide figure:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 180px;
    height: 165px;
    background: url(../img/thumbnail-square.svg) 0 0 / 100% 100% no-repeat;
}

#characters-slider-thumbs .swiper-slide figure {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#characters-slider-thumbs .swiper-slide:hover,
#characters-slider-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

#characters-slider-thumbs .swiper-slide img {
    width: 165px;
    height: auto;
}

#characters-slider-thumbs .swiper-slide h4 {
    color: var(--red);
    font-size: 14px;
    line-height: 1.2;
    margin-top: 0.8em;
    text-align: center;
}

#characters-slider-thumbs .swiper-wrapper {
    align-items: flex-start;
}

@media (max-width: 1600px) {

    #characters {
        margin-top: 10px;
    }

    #characters-slider {
        padding: 0 70px;
        height: 550px;
        margin-top: -25px;
    }

    #characters-slider .swiper-wrapper {
        height: 550px;
    }
    
    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide figure {
        width: 470px;
        padding-bottom: 16px;
    }
    
    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide .text {
        padding-left: 35px;
        /* margin-bottom: 40px; */
        margin-top: 32px;
    }

    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide h3 span {
        font-size: 14px;
    }
    
    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide h3 strong {
        font-size: 27px;
    }

    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide h3 b {
        font-size: 14px;
    }

    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide > figure figcaption {
        width: 444px;
        margin-left: 15px;
        left: 25px;
    }

    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide .content {
        width: 464px;
    }

    #characters-slider .swiper-button-prev,
    #characters-slider .swiper-button-next {
        top: 250px;
    }

    #characters-slider-thumbs {
        margin-top: 65px;
    }
    
    #characters-slider-thumbs .swiper-slide {
        width: 142px;
    }

    #characters-slider-thumbs .swiper-slide figure:after {
        width: 142px;
        height: 130px;
    }

    #characters-slider-thumbs .swiper-slide img {
        width: 130px;
    }

    #characters-slider-thumbs .swiper-slide h4 {
        font-size: 13px;
    }

}

@media (max-width: 1180px) {

    #characters {
        margin-top: 0;
    }

    #characters-slider {
        padding: 0 30px;
        height: auto;
        margin-top: -16px;
    }

    #characters-slider .swiper-wrapper {
        height: auto;
    }

    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide {
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }

    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide figure {
        width: 470px;
    }

    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide h3 span {
        font-size: 14px;
    }
    
    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide h3 strong {
        font-size: 27px;
    }

    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide h3 b {
        font-size: 14px;
    }

    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide .content {
        max-width: 100%;
        text-align: center;
    }

    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide .text {
        background: none;
        padding-left: 0;
    }

    #characters-slider .swiper-button-prev,
    #characters-slider .swiper-button-next {
        top: 315px;
    }

    #characters-slider-thumbs {
        margin-top: 55px;
        width: 688px;
        margin-left: auto;
        margin-right: auto;
    }

    #characters-slider-thumbs .swiper-slide {
        width: 122px;
    }

    #characters-slider-thumbs .swiper-slide figure:after {
        width: 122px;
        height: 112px;
    }

    #characters-slider-thumbs .swiper-slide img {
        width: 111px;
    }

    #characters-slider-thumbs .swiper-slide h4 {
        font-size: 12px;
    }

    #characters-slider-thumbs .swiper-wrapper {
        justify-content: center;
    }

    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide > figure figcaption {
        left: 0;
    }

}

@media (max-width: 820px) {

    #characters {
        margin-top: 0;
        padding-top: 60px;
    }

    #characters .section-title {
        max-width: 100%;
        margin: 0 auto;
    }

    #characters-slider {
        margin-top: -14px;
        padding: 0;
    }
    
    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide {
        gap: 40px;
    }

    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide figure {
        width: 370px;
    }

	  #characters-slider > .swiper > .swiper-wrapper > .swiper-slide figure figcaption {
        background: url(../img/line-gray-3.svg) 0 0 / 100% 5px no-repeat;
        width: 370px;
    }

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

    #characters-slider-thumbs {
        margin-top: 40px;
        width: 326px;
        margin-left: auto;
        margin-right: auto;
    }

    #characters-slider-thumbs .swiper-slide {
        width: 98px;
    }

    #characters-slider-thumbs .swiper-slide figure:after {
        width: 98px;
        height: 90px;
    }

    #characters-slider-thumbs .swiper-slide img {
        width: 88px;
    }

    #characters-slider-thumbs .swiper-slide h4 {
        font-size: 10px;
    }
    
}

@media (max-width: 440px) {
	#characters-slider {
        padding: 0 10px;
    }
	
    #characters-slider > .swiper > .swiper-wrapper > .swiper-slide figure {
        width: 100%;
    }
	
	#characters-slider > .swiper > .swiper-wrapper > .swiper-slide figure figcaption {
        width: 100%;
    }

    #characters-slider figure figcaption {
        width: 100%;
    }

    #characters .gray-caption {
        margin-left: 0;
        padding-left: 0;
    }

    #characters .gray-caption:before {
        display: none;
    }

}