@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap");
* {
    box-sizing: border-box;
}

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

@keyframes ltr {
    from {
        background-position-x: 100%;
    }
    to {
        background-position-x: 0%;
    }
}

@keyframes pulse {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.25;
    }
}

.pointer {
    cursor: pointer;
}

#SponsoredPage {
    height: unset;
    min-height: 0;
    display: flex;
    background-position: bottom;
    background-size: contain;
    background-color: #232527;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 0.05em;
}

#SponsoredPageContent>div {
    position: inherit !important;
    width: 100vw !important;
}

#BodyWrapper,
#RepositionBody,
#Body {
    margin-bottom: -18px;
}

@media (max-width: 945px) {
    .bannerAd,
    .rectangleAd {
        display: none;
    }
}

h1,
h2,
h3,
h4 {
    margin-block-start: 0;
    margin-block-end: 0;
    margin: 0 !important;
    display: block;
    text-align: left;
    color: #fff;
}

h1 {
    line-height: 1;
    font-size: 112px !important;
    font-weight: 600;
}

h2 {
    font-size: 70px;
    font-weight: 600;
}

h3 {
    font-size: 31px;
    font-weight: normal;
}

h4 {
    font-size: 18px;
    font-weight: 500;
    color: #e17722 !important;
    padding-bottom: 20px;
}

@media (max-width: 1366px) {
    h1 {
        font-size: 8vw !important;
    }
    h2 {
        font-size: 5.2vw;
    }
    h3 {
        font-size: 2vw;
    }
    h4 {}
}

@media (max-width: 792px) {
    h1 {
        font-size: 10vw !important;
    }
    h2 {
        font-size: 8.7vw;
    }
    h3 {
        font-size: 5vw;
    }
    h4 {
        font-size: 12px;
    }
}

.arrow-prev,
.arrow-prev.disabled:hover,
.arrow-next,
.arrow-next.disabled:hover {
    height: 57px;
    width: 57px;
    float: left;
    position: absolute !important;
    cursor: pointer;
    margin: 0px;
    padding: 0px;
    margin-top: -25px;
}

.arrow-next,
.arrow-prev {
    top: 140px !important;
    z-index: 100;
    background-size: 225%;
}

.arrow-prev,
.arrow-prev.disabled:hover {
    margin-right: 0px;
    left: -51px;
}

.arrow-next,
.arrow-next.disabled:hover {
    margin-left: 0px;
    right: -37px;
}

.arrow-prev.disabled:hover,
.arrow-next.disabled:hover {
    cursor: default;
}

.arrow-prev,
.arrow-prev.disabled:hover {
    background-position: -2px -4px;
}

.arrow-prev:hover {
    background-position: -2px 66px;
}

.arrow-next,
.arrow-next.disabled:hover {
    background-position: 60px -2px;
}

.arrow-next:hover {
    background-position: 60px 68px;
}

.rlogo {
    background-image: none !important;
    background-image: url("http://roblox.com/images/Logo/logo_R.svg");
}

@media (max-width: 792px) {
    p {
        font-size: 4.75vw !important;
    }
    .large-text {
        font-size: 14vw !important;
    }
}

.logo-link img {
    background-size: contain;
    width: 150px;
    background-position: center;
    margin-top: 4px;
}

body {
    background-color: #191919;
}

#body {
    background-color: #222;
    max-width: none;
}

.location-picker {
    display: none;
}

.header {
    background-color: transparent;
    position: absolute;
    min-width: unset;
}

@media (max-width: 792px) {
    .header {
        /* display: none */
    }
}

.header .headerLeft .location-picker {
    display: inline-block;
    position: absolute;
    right: 0;
    margin-top: 0;
    border-radius: 3px;
    overflow: hidden;
}

.header .headerLeft .location-picker .location-left {
    background-color: #8b8787;
    padding: 5px;
    padding-left: 14px;
    align-items: center;
}

.header .headerLeft .location-picker .location-left .location-label {
    color: #393939;
    font-size: 16px;
    font-weight: 700;
}

.header .headerLeft .location-picker .location-left .location-icon-container {
    width: 30px;
    height: 30px;
    margin-left: 5px;
}

.header .headerLeft .location-picker .location-left .location-icon-container .background-image {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.header .headerLeft .location-picker .location-right {
    background-color: #6b6b6b;
    padding: 10px;
    align-items: center;
}

.header .headerLeft .location-picker .location-right .up-arrow {
    width: 1px;
    height: 0;
    border: 9px solid transparent;
    border-top-width: 0px;
    border-bottom-width: 16px;
    border-bottom-color: #ffffff;
}

.header .headerLeft .location-picker .location-right .down-arrow {
    width: 1px;
    height: 0;
    border: 9px solid transparent;
    border-bottom-width: 0px;
    border-top-width: 16px;
    border-top-color: #ffffff;
}

.header .headerLeft .location-picker .invisible-select {
    position: absolute;
    opacity: 0;
    height: 100%;
    width: 100%;
    color: #000000;
}

#link-templates {
    display: none !important;
}

#link-templates a {
    display: none !important;
}

#section4 {
    position: relative;
}

#section2 {
    background-color: #000000;
}

.sponsored-product-text {
    display: none !important;
}

.uppercase {
    text-transform: uppercase;
}

.bold {
    font-weight: bold !important;
}

img:not([src]) {
    display: none;
}

.header .headerLeft {
    float: unset;
    width: 100%;
    text-align: left;
    max-width: 1366px;
    box-sizing: border-box;
    position: relative;
    left: 8.5px;
    padding: 12px 125px;
    margin: auto;
}

@media (max-width: 1366px) {
    .header .headerLeft {
        left: 0.62225vw;
        padding: 12px 9.15081vw;
    }
}

.flex-row {
    display: flex;
    flex-direction: row;
}

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

.flex-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.row-column {
    display: flex;
    flex-direction: row;
}

@media (max-width: 792px) {
    .row-column {
        flex-direction: column;
    }
}

.row-column-reverse {
    display: flex;
    flex-direction: row;
}

@media (max-width: 792px) {
    .row-column-reverse {
        flex-direction: column-reverse;
    }
}

.column-reverse {
    display: flex;
    flex-direction: column;
}

@media (max-width: 792px) {
    .column-reverse {
        flex-direction: column-reverse;
    }
}

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

.vcenter {
    display: flex;
    align-items: center;
}

.thumbnail {
    width: 100%;
    height: 100%;
}

.gradient-bg {
    display: inline-block;
    background: -moz-linear-gradient( bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-gradient( linear, left bottom, left bottom, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -webkit-linear-gradient( top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: -o-linear-gradient( bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: -ms-linear-gradient( bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

div.wdw-grad {
    height: 3px;
    width: 100%;
    max-width: 1366px;
    background-color: indigo;
    background-image: linear-gradient(to right, #fadc01, #cc1914, #cc1814);
    margin: 0 auto 0 auto;
}

.mapbg {
    background-position: top;
    position: relative;
    background-repeat: repeat-y;
    background-size: 1366px auto;
}

@media (max-width: 1366px) {
    .mapbg {
        background-size: contain;
    }
}

.bloxy-silhouette {
    background-position: center;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
    pointer-events: none;
    background-position-y: 300%;
}

@media (max-width: 1366px) {
    .bloxy-silhouette {
        background-size: contain;
    }
}

#SponsoredPageContent {
    font-family: "Montserrat", sans-serif;
}

.section.footer .legal {
    padding-top: 150px;
}

@media (max-width: 1366px) {
    .section.footer .legal {
        padding-top: 10vw;
    }
}

@media (max-width: 792px) {
    .section.footer .legal {
        padding-top: 15vw;
    }
}

#footer-text {
    max-width: 1366px;
    margin: auto;
    justify-content: space-between;
    padding: 50px;
    font-size: 10px;
    color: #868e96;
    font-family: "Montserrat", sans-serif;
}

@media (max-width: 792px) {
    .section.legal .container {
        padding-top: 1px;
    }
}

#footer-text .legal-stuff {
    justify-content: center;
}

@media (max-width: 792px) {
    #footer-text .legal-stuff {
        margin-top: 20px;
    }
}

#footer-text .legal-stuff a {
    color: #868e96;
    transition: color 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#footer-text .legal-stuff a:hover {
    color: #009dff;
}

#footer-text .legal-stuff .dotsep:before {
    content: "";
    width: 3px;
    height: 3px;
    background-color: #868e96;
    border-radius: 50%;
    margin: 0px 8px;
    position: relative;
    display: inline-block;
    bottom: 2px;
    right: -2px;
}

.section .container div.buttons a {
    display: inline;
    font-weight: 700;
    padding: 20px 50px !important;
}

@media (max-width: 792px) {
    .section .container div.buttons a.second-btn {
        padding: 2.08333vw 23.1vw !important;
    }
    .section .container div.buttons a {
        padding: 2.08333vw 21.75vw !important;
    }
}

div.buttons>div.section-button {
    float: left;
    margin-top: 60px;
    margin-right: 50px;
}

@media (max-width: 1366px) {
    div.buttons>div.section-button {
        margin-right: 4vw;
    }
}

@media (max-width: 792px) {
    div.buttons>div.section-button {
        margin-top: 2vw;
    }
}


/* 
@media (max-width: 792px) {
    div.buttons>div.section-button:last-of-type {
        margin-top: 0;
    }
} */

button {
    width: 159px;
    height: 42px;
    font-weight: 600 !important;
    font-size: 17px !important;
    color: black !important;
}

@media (max-width: 1366px) {
    button {}
}

@media (max-width: 792px) {
    button {}
}

button.lang-jumpin {
    float: left;
}

@media (max-width: 792px) {
    button.lang-jumpin {
        float: unset;
        width: 100%;
    }
}

.horizontal-button,
.three-row div {
    cursor: pointer;
    position: relative;
}

a span.link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.horizontal-button {
    background-size: cover;
    margin-bottom: 50px;
    width: 100%;
    height: 455px;
}

@media (max-width: 1366px) {
    .horizontal-button {
        height: 33.29vw;
    }
    .horizontal-button:last-of-type {
        margin-top: -3.4vw;
    }
}

@media (max-width: 792px) {
    .horizontal-button {
        height: 187.5vw;
    }
    .horizontal-button:nth-of-type(1) {
        background-image: url(https://images.rbxcdn.com/599106dbf364fae7b98f9fd0052a2571);
    }
    .horizontal-button:last-of-type {
        background-image: url(https://images.rbxcdn.com/4eaa39f42120feeaff5268c499564a8f);
        margin-top: 24vw;
    }
}

div.three-row {
    height: 664px;
    /* display: inline; */
    margin-bottom: 50px;
}

@media (max-width: 1366px) {
    div.three-row {
        height: 50vw;
        margin-bottom: 0vw;
    }
}

@media (max-width: 792px) {
    div.three-row {
        height: 456vw;
    }
}

div.three-row div {
    width: 352px;
    height: 100%;
    float: left;
    margin-right: 30px;
    background-size: contain;
    background-repeat: no-repeat;
}

@media (max-width: 1366px) {
    div.three-row div {
        width: 25.7vw;
        margin-right: 2.3vw;
    }
}

@media (max-width: 792px) {
    div.three-row div {
        width: 82vw;
        height: 151vw;
        margin-bottom: 5vw;
    }
}

div.three-row div:last-of-type {
    margin-right: 0px;
}

.page-content {
    background-position: top;
    background-size: auto;
    background-repeat: no-repeat;
    background-color: black;
}

@media (max-width: 1366px) {
    .page-content {
        background-size: cover;
    }
}

@media (max-width: 792px) {
    .page-content {
        background-size: contain;
    }
}

.section {
    width: 100%;
    /* background-color: #030328; */
    background-position: center;
    background-size: cover;
    position: relative;
}

.section.mapbg {
    background-position: top;
    position: relative;
    background-repeat: repeat-y;
    background-size: 1366px auto;
}

@media (max-width: 1366px) {
    .section.mapbg {
        background-size: contain;
    }
}

.section.light {
    background-color: #191919;
}

.section.dark {
    background-color: #000;
}

.section.top {
    margin: 60px 0 0 0;
    padding: 0;
    z-index: 0;
}

.section.top .container {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    padding: 50px 125px;
    height: auto;
}

@media (max-width: 1366px) {
    .section.top .container {
        padding: 2.19619vw 9.15081vw;
        /* height: 51.9vw */
    }
}

@media (max-width: 792px) {
    .section.top .container {
        padding: 10.19619vw 6.25vw;
        height: auto;
    }
}

#clock table {
    margin: 0 auto;
}

#clock span {
    font-size: 138px;
    font-weight: 600;
    color: white;
}

#clock p {
    text-align: center;
}

@media (max-width: 1366px) {
    #clock span {
        font-size: 10.2vw;
    }
    #clock p {}
}

@media (max-width: 792px) {
    #clock span {
        font-size: 17vw;
    }
    #clock p {
        font-size: 2.3vw !important;
    }
}

.dont-shrink {
    flex-shrink: 0;
}

.section {
    padding-bottom: 80px;
}

@media (max-width: 1366px) {
    .section {
        padding-bottom: 8vw;
    }
}

@media (max-width: 792px) {
    .section {
        padding-bottom: 15vw;
    }
}

.section.schedule .container a,
.section.schedule .container p {
    text-align: left !important;
}

.section.schedule .container a {
    margin-top: 16px !important;
    font-size: 33px !important;
    letter-spacing: 4;
    font-weight: 500;
}

@media (max-width: 1366px) {
    .section.schedule .container a {
        font-size: 2.5vw !important;
    }
    .section.schedule .container p {
        font-size: 2vw !important;
    }
}

@media (max-width: 792px) {
    .section.event .container a {
        margin: 3.75vw 0 0 -2.8vw !important;
    }
    .section.schedule .container a {
        text-align: left !important;
        font-size: 5vw !important;
        font-weight: bold;
    }
    .section.schedule .container p {
        font-size: 4vw !important;
    }
}

.section.schedule .container a:after {
    text-decoration: none !important;
}

.section.event .container a,
.section.spotlight .container a,
.section.merch .container a,
.section.schedule .container a,
.section.schedule .container p {
    color: #e17722;
    text-align: left;
    font-size: 23px;
    display: table;
    /* margin: 50px 0px 0px 0px; */
}

.section.schedule .container p {
    margin: 25px 0 50px 0;
    color: white !important;
}

@media (max-width: 1366px) {
    .section.event .container a,
    .section.spotlight .container a,
    .section.merch .container a,
    .section.schedule .container a,
    .section.schedule .container p {
        margin: 3.75vw 0px 0vw 0px;
    }
    .section.schedule .container p {
        margin: 25px 0 50px 0;
        font-size: 1.7vw;
    }
    .section.schedule .container a {
        font-size: 2vw;
    }
}

@media (max-width: 792px) {
    .section.event .container a,
    .section.spotlight .container a,
    .section.merch .container a,
    .section.schedule .container a {
        margin: 3.75vw 0px 0vw 0vw;
        font-size: 5vw;
    }
    .section.schedule .container p {
        margin: 1.875vw 0 3.75vw 0;
    }
}

.section.schedule .container a:nth-of-type(2),
.section.schedule .container a:nth-of-type(3),
.section.schedule .container a:nth-of-type(4) {
    margin: 30px 0 0 0;
}

@media (max-width: 1366px) {
    .section.schedule .container a:nth-of-type(2),
    .section.schedule .container a:nth-of-type(3),
    .section.schedule .container a:nth-of-type(4) {
        margin: 2vw 0 0 0;
    }
}

@media (max-width: 792px) {
    .section.schedule .container a:nth-of-type(2),
    .section.schedule .container a:nth-of-type(3),
    .section.schedule .container a:nth-of-type(4) {
        margin: 4vw 0 0 0;
    }
}

.section.schedule .container a:nth-of-type(4) {
    padding-bottom: 67px;
}

.section.event .container h2 {
    width: 80%;
    line-height: 1.2;
}

@media (max-width: 792px) {
    .section.event .container h2 {
        width: 100%;
    }
}

.section.event .container .information,
.section.schedule .container .information,
.section.merch .container .copy {
    margin-left: 18%;
    width: 70%;
}

.section.schedule .container .information {
    padding-top: 70px;
}

@media (max-width: 1366px) {
    .section.schedule .container .information {
        padding-top: 3vw;
    }
}

@media (max-width: 792px) {
    .section.schedule .container .information,
    .section.merch .container .copy {
        margin-left: 0%;
        width: 100%;
    }
    .section.event .container .information {
        margin-left: -3%;
        width: 103%;
    }
}

.section.event .container .information p {
    line-height: 1.8;
    text-align: left;
    font-size: 23px;
}

.section.event .container .information .section-button {}

@media (max-width: 1366px) {
    .section.event .container .information p {
        font-size: 1.75vw;
    }
}

@media (max-width: 792px) {
    .section.event .container .information p {
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 8px;
        padding: 1px 7px 7px 8px;
    }
    .section.event .container .information .section-button {
        margin-left: 3vw;
    }
}

.section.spotlight .container .flex-column,
.section.schedule .container .schedule-banner {
    margin-top: 0;
}


/* 
@media (max-width: 1366px) {
    .section.spotlight .container .flex-column,
    .section.schedule .container .schedule-banner {
        margin-top: 3.7vw;
    }
}

@media (max-width: 792px) {
    .section.spotlight .container .flex-column {}
} */

.section.spotlight .container h2 {
    width: 100%;
}

.section.spotlight .container .album {
    width: 558px;
    padding-top: 21px;
}

@media (max-width: 1366px) {
    .section.spotlight .container .album {
        width: 50%;
    }
}

@media (max-width: 792px) {
    .section.spotlight .container .album {
        width: 100%;
    }
}

.section.spotlight .container .album .showcase-image {
    width: 100%;
    height: 558px;
    position: relative;
    box-shadow: 0px 0px 48px #413051;
}

@media (max-width: 1366px) {
    .section.spotlight .container .album .showcase-image {
        height: 40.9vw;
    }
}

@media (max-width: 792px) {
    .section.spotlight .container .album .showcase-image {
        /* width: 81.8vw; */
        height: 81.8vw;
    }
}

.section.spotlight .container .album .showcase-image a {
    margin: 0;
    position: absolute;
    bottom: 25px;
    right: 25px;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
}

.section.spotlight .container .album .showcase-image a .play-button {
    content: "";
    background-position: center;
    background-size: contain;
    width: 100px;
    height: 100px;
}

.section.spotlight .container .album .showcase-image a .play-button:hover {
    width: 110px;
    height: 110px;
    transform: translate(5px, 5px);
}

@media (max-width: 1366px) {
    .section.spotlight .container .album .showcase-image a {
        bottom: 1.7vw;
        right: 1.7vw;
    }
    .section.spotlight .container .album .showcase-image a .play-button {
        width: 7vw;
        height: 7vw;
    }
    .section.spotlight .container .album .showcase-image a .play-button:hover {
        width: 7.7vw;
        height: 7.7vw;
        transform: translate(0.35vw, 0.35vw);
    }
}

@media (max-width: 792px) {
    .section.spotlight .container .album .showcase-image a {
        bottom: 4vw;
        right: 4vw;
    }
    .section.spotlight .container .album .showcase-image a .play-button {
        width: 14.5vw;
        height: 14.5vw;
    }
    .section.spotlight .container .album .showcase-image a .play-button:hover {
        width: 15.95vw;
        height: 15.95vw;
        transform: translate(0.725vw, 0.725vw);
    }
}

.section.spotlight .container .column-right p {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    padding: 0px 7px 7px 10px;
    margin-left: -10px;
}

@media (max-width: 1366px) {
    .section.spotlight .container .column-right {}
}

@media (max-width: 792px) {
    .section.spotlight .container .column-right h2 {
        padding-top: 4vw;
    }
    .section.spotlight .container .column-right p {
        background-color: unset;
        padding: unset;
        margin-left: 0;
    }
}

.section.merch .container .perspective-carousel-item {
    background-size: cover;
}

.section .container .column-right {
    width: 50%;
    padding-left: 65px;
}

@media (max-width: 1366px) {
    .section .container .column-right {
        padding-left: 4vw;
    }
}

@media (max-width: 792px) {
    .section .container .column-right {
        width: 100%;
        padding-left: 0px;
    }
}

.section .container p {
    line-height: 1.8;
    text-align: left;
    font-size: 21px;
    color: #fff;
}


/* .section .container p {
    line-height: 2.25;
    text-align: left;
    font-size: 17;
    color: #fff;
} */

@media (max-width: 1366px) {
    .section .container p {
        font-size: 1.75vw;
    }
}

@media (max-width: 792px) {
    .section .container p {
        line-height: 1.75;
        font-size: 16;
    }
}

.section .container .column-left {
    text-align: left;
}

@media (max-width: 792px) {
    .section .container .column-left {
        padding-right: 0px;
    }
}

.section.schedule .schedule-banner {
    background-size: contain;
    background-repeat: no-repeat;
    height: 687px;
}

@media (max-width: 1366px) {
    .section.schedule .schedule-banner {
        height: 50vw;
    }
}

@media (max-width: 792px) {
    .section.schedule .schedule-banner {
        background-size: contain;
        height: 51vw;
    }
}

.section.schedule .schedule-container {}

.section.schedule .schedule-container h2 {
    text-align: left;
    /* padding-top: 25px; */
    line-height: 93%;
}

@media (max-width: 1366px) {
    .section.schedule .schedule-container h2 {
        /* padding-top: 8.5vw; */
    }
    .section.schedule .schedule-container p {
        font-size: 36px;
    }
}

@media (max-width: 792px) {
    .section.schedule .schedule-container h2 {
        /* padding-top: 55vw; */
        text-align: left;
    }
}

.container a {
    text-decoration: underline;
    font-weight: bold;
}

.legal {
    color: grey !important;
    font-size: 12px !important;
    line-height: 1.75 !important;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    padding: 0 7px 7px 7px;
}

@media (max-width: 1366px) {
    .legal {
        font-size: 1.25vw !important;
    }
}

@media (max-width: 792px) {
    .legal {
        font-size: 14px !important;
    }
}

.section .section-button {
    text-align: center;
    position: relative;
    width: fit-content;
    width: -moz-fit-content;
    height: auto;
    margin-top: 37px;
    padding: 17px 0;
}

@media (max-width: 1366px) {
    .section .section-button {
        margin-top: 1.46413vw;
    }
}

@media (max-width: 792px) {
    .section .section-button {
        margin-top: 1.46413vw;
    }
}

.section.top .container div.floating-image {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 175px;
    float: right;
    position: absolute;
    margin-top: 38px;
    margin-left: 225px;
}

@media (max-width: 1366px) {
    .section.top .container div.floating-image {
        height: 12.8vw;
        margin-left: 16vw;
        margin-top: 3vw;
    }
}

@media (max-width: 792px) {
    .section.top .container div.floating-image {
        height: 19.8vw;
        margin-top: 0vw;
        margin-left: 19vw;
    }
}

.section.top .container div.hero-image,
div.footer-image {
    width: 129%;
    /* width: 100%; */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

div.hero-image {
    height: 1510;
    /* margin: 60 0 0 0; */
    margin: 125px auto 0px -161px;
    /* margin: -371px auto -165px -125px; */
}

div.footer-image {
    height: 1975px;
    /* margin: -241px auto -200px -125px; */
}

@media (max-width: 1366px) {
    .section.top .container div.hero-image {
        height: 105vw;
        margin: 9.4vw auto 3.5vw -11.8vw;
    }
    div.footer-image {
        height: 145vw;
        /* margin: -22.75vw auto -13.5vw -9.3vw; */
    }
}

@media (max-width: 792px) {
    .section.top .container div.hero-image {
        /* height: 68vw; */
        margin: 9.4vw auto 3.5vw -12.8vw;
    }
    div.footer-image {
        height: 144vw;
        /* margin: -23.75vw auto -19.5vw -9.3vw; */
    }
}

.section a.social-link {
    color: #c00e00;
}

.section a.lesson-link {
    color: #000;
}

.section .section-title {
    color: #000;
    font-size: 38px;
    font-weight: 700;
    max-width: 1116px;
    margin: 0 auto;
    padding-top: 50px;
    box-sizing: border-box;
    position: relative;
}

@media (max-width: 1366px) {
    .section .section-title {
        font-size: 2.78184vw;
        max-width: 81.69839vw;
        padding-top: 3.66032vw;
    }
}

@media (max-width: 792px) {
    .section .section-title {
        line-height: 1;
        font-size: 2.78184vw;
        max-width: 81.69839vw;
        padding-top: 3.66032vw;
    }
}

.section .main-btn {
    background-color: #e17722;
    border: 3px solid #e17722;
    color: white !important;
    font-weight: 500;
    padding: 10px 125px;
    font-size: 24px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase;
    /* margin: 0 !important; */
}

@media (max-width: 1366px) {
    .section .main-btn {
        padding: 0.7vw 9.1vw;
    }
}

@media (max-width: 792px) {
    .section .main-btn {
        padding: 2.08333vw 30.75vw;
        font-size: 5vw;
    }
    .section.top .section-button {
        margin-top: 3vw;
    }
}


/* .secondary-button {
    float: left;
    margin: 40px;
} */

.section .second-btn {
    border: 3px solid white;
    color: white !important;
    font-weight: 500;
    padding: 19px 99px;
    font-size: 24px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase;
}

.section .main-btn:hover {
    filter: drop-shadow(0px 0px 8px white);
}

.section .background-image {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.section .container h4 span:nth-of-type(2)::before {
    content: "|";
    padding-right: 5px;
}

.section .container h4 span:nth-of-type(2) {
    /* color: #858585; */
}

.section .container {
    width: 100%;
    max-width: 1366px;
    box-sizing: border-box;
    padding: 50px 125px;
    position: relative;
    z-index: 1;
    /* background-color: #030328; */
}

.section .container:before,
.section .container:after {
    content: unset !important;
}

.section .container.bottombg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}

@media (max-width: 1366px) {
    .section .container {
        padding: 0 9.15081vw;
        padding-bottom: 2.19619vw;
    }
}

.section .container.video {
    padding-bottom: 50px;
    padding-top: 50px;
}

@media (max-width: 1366px) {
    .section .container.video {
        padding-bottom: 3.66032vw;
        padding-top: 3.66032vw;
    }
}

.section .container.video .section-title {
    font-size: 26px;
    font-weight: 500;
    padding-top: 0;
}

@media (max-width: 1366px) {
    .section .container.video .section-title {
        font-size: 1.90337vw;
        padding-top: 0;
    }
}

@media (max-width: 792px) {
    .section .container.video .section-title {
        font-size: 5vw;
        font-weight: 700;
        padding-top: 0;
    }
}

.section .container.video .text-note {
    margin-top: 50px;
}

@media (max-width: 1366px) {
    .section .container.video .text-note {
        margin-top: 3.66032vw;
    }
}

@media (max-width: 792px) {
    .section .container.video .text-note {
        top: unset;
    }
}

.section .container .buttons-container .section-button {
    width: 48%;
    margin-right: 18px;
}

@media (max-width: 1366px) {
    .section .container .buttons-container .section-button {
        margin-right: 1.31772vw;
    }
}

.section .container .title-text {
    color: #000;
    text-align: left;
    font-weight: 900;
    font-size: 36px;
    margin-bottom: 5px;
}

@media (max-width: 1366px) {
    .section .container .title-text {
        font-size: 2.63543vw;
        margin-bottom: 0.36603vw;
    }
}

.section .container .text-note {
    color: #000;
    font-size: 10px;
    margin-top: 20px;
    font-weight: 100;
}

@media (max-width: 1366px) {
    .section .container .text-note {
        font-size: 0.73206vw;
        margin-top: 1.46413vw;
    }
}

@media (max-width: 792px) {
    .section .container .text-note {
        font-size: 1.66667vw;
        margin-top: 1.46413vw;
        text-align: center;
        top: -56.25vw;
        position: relative;
        font-weight: 500;
    }
}

.section .container .section-desc {
    font-size: 18px;
    color: #000;
    font-weight: 100;
}

@media (max-width: 1366px) {
    .section .container .section-desc {
        font-size: 1.31772vw;
    }
}

@media (max-width: 792px) {
    .section .container .section-desc {
        font-size: 1.31772vw;
    }
}

.section .container .section-desc.about-desc {
    font-size: 18px;
    margin-top: 10px;
}

@media (max-width: 1366px) {
    .section .container .section-desc.about-desc {
        font-size: 1.31772vw;
        margin-top: 0.73206vw;
    }
}

@media (max-width: 792px) {
    .section .container .section-desc.about-desc {
        font-size: 2.5vw;
        margin-top: 0.73206vw;
    }
    .section .container .section-desc.about-desc.lang-about {
        margin-top: 150vw;
    }
}


/* .section .container .template {
    display: none;
} */

.section .container .amounts-container {
    justify-content: center;
}

.section .container .amounts-container .card-container {
    height: 270px;
    width: 440px;
    margin: 20px;
    filter: drop-shadow(0px 0px 5px #fff);
}

@media (max-width: 1366px) {
    .section .container .amounts-container .card-container {
        height: 19.76574vw;
        width: 32.21083vw;
        margin: 1.46413vw;
        filter: drop-shadow(0px 0px 0.36603vw #fff);
    }
}

@media (max-width: 792px) {
    .section .container .amounts-container .card-container {
        height: 41.66667vw;
        width: 62.5vw;
        margin: 2.08333vw;
        filter: drop-shadow(0px 0px 0.625vw #fff);
    }
}

.section .container .arrow-container,
.section .container .arrow-container-virtual {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    cursor: pointer;
}

@media (max-width: 1366px) {
    .section .container .arrow-container,
    .section .container .arrow-container-virtual {
        height: 5.85652vw;
        width: 5.85652vw;
    }
}

@media (max-width: 792px) {
    .section .container .arrow-container,
    .section .container .arrow-container-virtual {
        height: 5.85652vw;
        width: 5.85652vw;
        margin-top: 2vw;
    }
}

.section .container .arrow-container:hover,
.section .container .arrow-container-virtual:hover {
    filter: brightness(1.5);
}

.section .container .perspective-carousel-container,
.section .container.perspective-carousel-container {
    justify-content: space-between;
    width: 100%;
}

@media (max-width: 792px) {
    .section .container .perspective-carousel-container .arrow-container.left,
    .section .container.perspective-carousel-container .arrow-container.left {
        margin-left: -6.25vw;
    }
    .section .container .perspective-carousel-container .arrow-container.right,
    .section .container.perspective-carousel-container .arrow-container.right {
        margin-right: -6.25vw;
    }
}

.section .container .linear-carousel-container {
    width: 100%;
    border: 3px solid #3f3f3f;
    background-color: #111;
    justify-content: space-around;
    margin-top: 50px;
    border-radius: 20px;
}

@media (max-width: 1366px) {
    .section .container .linear-carousel-container {
        border: 0.21962vw solid #3f3f3f;
        margin-top: 3.66032vw;
        border-radius: 1.46413vw;
    }
}

.section .container .linear-carousel {
    overflow: hidden;
    position: relative;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.section .container .linear-carousel.virtual-item-carousel {
    height: 200px;
    width: 80%;
    margin: 30px 0;
}

@media (max-width: 1366px) {
    .section .container .linear-carousel.virtual-item-carousel {
        height: 14.64129vw;
        margin: 2.19619vw 0;
    }
}

@media (max-width: 792px) {
    .section .container .linear-carousel.virtual-item-carousel {
        height: 41.66667vw;
        width: 41.66667vw;
        margin: 6.25vw 0;
    }
}

.section .container .linear-carousel.virtual-item-carousel.nocarousel {
    display: flex;
    flex-direction: row;
}

@media (max-width: 792px) {
    .section .container .linear-carousel.virtual-item-carousel.nocarousel {
        overflow-x: scroll;
    }
}

.section .container .perspective-carousel {
    overflow: hidden;
    position: relative;
    -webkit-perspective: 500px;
    perspective: 500px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.section .container .perspective-carousel.item-carousel {
    height: 320px;
    width: 100%;
    margin: 30px 0;
}

@media (max-width: 1366px) {
    .section .container .perspective-carousel.item-carousel {
        height: 23.42606vw;
        margin: 2.19619vw 0;
    }
}

@media (max-width: 792px) {
    .section .container .perspective-carousel.item-carousel {
        height: 23.42606vw;
        margin: 2.19619vw 0;
    }
}

.section .container .perspective-carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out;
    -webkit-transition: -webkit-transform 0.15s ease-in-out, opacity 0.15s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.section .container .perspective-carousel-item.virtual-item-container {
    height: 320px;
    width: 320px;
    background-color: #222;
    border-radius: 32px;
}

@media (max-width: 1366px) {
    .section .container .perspective-carousel-item.virtual-item-container {
        height: 23.42606vw;
        width: 23.42606vw;
        border-radius: 4vw;
    }
}

@media (max-width: 792px) {
    .section .container .perspective-carousel-item.virtual-item-container {
        height: 27.42606vw;
        width: 27.42606vw;
    }
}

.section .container .perspective-carousel-item.virtual-item-container:nth-child(1) {
    transform: translate3d(-350%, 0px, -300px);
}

.section .container .perspective-carousel-item.virtual-item-container:nth-child(2) {
    transform: translate3d(-140%, 0px, -200px);
}

.section .container .perspective-carousel-item.virtual-item-container:nth-child(3) {
    transform: translate3d(0px, 0px, -200px);
    opacity: 100%;
}

.section .container .perspective-carousel-item.virtual-item-container:nth-child(4) {
    transform: translate3d(140%, 0px, -200px);
}

.section .container .perspective-carousel-item.virtual-item-container:nth-child(5) {
    transform: translate3d(350%, 0px, -300px);
}

.section .container .linear-carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out;
    -webkit-transition: -webkit-transform 0.15s ease-in-out, opacity 0.15s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.section .container .linear-carousel-item.virtual-item-container {
    height: 200px;
    width: 200px;
    padding: 25px;
}

@media (max-width: 1366px) {
    .section .container .linear-carousel-item.virtual-item-container {
        height: 14.64129vw;
        width: 14.64129vw;
        padding: 1.83016vw;
    }
}

.section .container .linear-carousel-item.virtual-item-container:nth-child(1) {
    transform: translate(-250%, 0px);
}

.section .container .linear-carousel-item.virtual-item-container:nth-child(2) {
    transform: translate(-150%, 0px);
}

.section .container .linear-carousel-item.virtual-item-container:nth-child(3) {
    transform: translate(-50%, 0px);
}

.section .container .linear-carousel-item.virtual-item-container:nth-child(4) {
    transform: translate(50%, 0px);
}

.section .container .linear-carousel-item.virtual-item-container:nth-child(5) {
    transform: translate(150%, 0px);
}

.section .container .linear-carousel-item.virtual-item-container:nth-child(6) {
    transform: translate(250%, 0px);
}

@media (max-width: 792px) {
    .section .container .linear-carousel-item.virtual-item-container {
        height: 41.66667vw;
        width: 41.66667vw;
        padding: 5.20833vw;
    }
    .section .container .linear-carousel-item.virtual-item-container:nth-child(1) {
        transform: translate(-100%, 0px);
    }
    .section .container .linear-carousel-item.virtual-item-container:nth-child(2) {
        transform: translate(0%, 0px);
    }
    .section .container .linear-carousel-item.virtual-item-container:nth-child(3) {
        transform: translate(100%, 0px);
    }
    .section .container .linear-carousel-item.virtual-item-container:nth-child(4) {
        transform: translate(200%, 0px);
    }
    .section .container .linear-carousel-item.virtual-item-container:nth-child(5) {
        transform: translate(300%, 0px);
    }
    .section .container .linear-carousel-item.virtual-item-container:nth-child(6) {
        transform: translate(400%, 0px);
    }
}

.section .container .linear-carousel-item.virtual-item-container.nocarousel {
    position: relative;
    flex-shrink: 0;
}

.section .container .linear-carousel-item.virtual-item-container.nocarousel:nth-child(1) {
    transform: translate(0, 0);
}

.section .container .linear-carousel-item.virtual-item-container.nocarousel:nth-child(2) {
    transform: translate(0, 0);
}

.section .container .linear-carousel-item.virtual-item-container.nocarousel:nth-child(3) {
    transform: translate(0, 0);
}

.section .container .linear-carousel-item.virtual-item-container.nocarousel:nth-child(4) {
    transform: translate(0, 0);
}

.section .container .linear-carousel-item.virtual-item-container.nocarousel:nth-child(5) {
    transform: translate(0, 0);
}

.section .container .linear-carousel-item.virtual-item-container.nocarousel:nth-child(6) {
    transform: translate(0, 0);
}

.section .container .linear-carousel-item.virtual-item-container img {
    user-select: none;
}

.section .container .video-contain {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 50px auto;
    box-shadow: 0px 0px 48px #e17722;
}

@media (max-width: 1366px) {
    .section .container .video-contain {
        margin-top: 3.66032vw;
    }
}

@media (max-width: 792px) {
    .section .container .video-contain {
        margin: 0px auto;
        width: 100%;
        box-shadow: 0px 0px 7vw #e17722;
    }
}

.section .container .video-contain .text-container {
    color: #ffffff;
    font-size: 20px;
    padding: 3%;
    font-weight: 100;
}

@media (max-width: 1366px) {
    .section .container .video-contain .text-container {
        font-size: 4.16667vw;
    }
}

.section .container .video-contain .control-container {
    display: flex;
    position: relative;
}

.section .container .video-contain .control-container .tab-row {
    position: relative;
    bottom: -2px;
}

@media (max-width: 1366px) {
    .section .container .video-contain .control-container .tab-row {
        bottom: -1px;
    }
}

.section .container .video-contain .control-container .tab-row .video-tab {
    height: 70px;
    width: 330px;
    cursor: pointer;
}

@media (max-width: 1366px) {
    .section .container .video-contain .control-container .tab-row .video-tab {
        height: 5.12445vw;
        width: 24.15813vw;
    }
}

.section .container .video-contain .control-container .tab-row .video-tab.active {
    border-bottom: 2px;
}

@media (max-width: 1366px) {
    .section .container .video-contain .control-container .tab-row .video-tab.active {
        border-bottom: 1px;
    }
}

.section .container .video-contain .control-container .tab-row .video-tab .tab-name {
    margin: auto;
    color: #fff;
    background-color: #000000;
    font-weight: 100;
    height: 100%;
    width: 100%;
    font-size: 26px;
    line-height: 2.5;
}

@media (max-width: 1366px) {
    .section .container .video-contain .control-container .tab-row .video-tab .tab-name {
        font-size: 1.90337vw;
    }
}

.section .container .video-contain .iframe-container {
    width: 100%;
    background-position: top;
}

@media (max-width: 792px) {
    .section .container .video-contain .iframe-container {
        height: 45.95417vw;
    }
}

.section .container .video-contain .video-arrow {
    padding: 24px 18px;
    background-color: #111111;
    align-self: center;
    margin: 12px;
    border-radius: 3px;
}

.section .container .video-contain .video-arrow.disable {
    opacity: 0.4;
}

.section .container .video-contain .test-screenshot {
    background-size: contain;
    background-repeat: no-repeat;
}

.section .container .fixedratio {
    position: relative;
    padding-top: 56.25%;
    background-color: #000;
}

.section .container .fixedratio iframe {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.rectangleAd {
    width: 300px;
    height: 250px;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: -600px;
    top: 190px;
    bottom: 0;
}