@font-face {
    font-family: 'beVietnamPro-light';
    src: url(./fonts/BeVietnamPro-Light.ttf);
}

@font-face {
    font-family: 'beVietnamPro-black';
    src: url(./fonts/BeVietnamPro-Black.ttf);
}



body {
    padding: 0px;
    margin: 0px;
}


a,
a:focus,
a:visited,
a:active {
    text-decoration: none !important;
}

.container {
    height: 100vh;
    width: 100vw;
}

.container-homepage {
    background-image: url('../images/hompage.png');
    background-size: 100% 100%;
}

.header {
    margin: 0 auto 0 auto;
    width: fit-content;
    padding: 70px 0px 87.25px 0px;
}

.header-image {
    /* margin: 70px auto 87.25px auto; */
    width: 400px;
}


.hero {
    margin: auto;
    width: fit-content;
}

.homepage-hero>img {
    width: 393px;
    height: 82.5px;
}

.homepage-grid {
    /* display: grid;
    grid-template-columns: repeat(2, 1fr); */
    row-gap: 41px;
    column-gap: 60px;
    margin: auto;
    /* width: fit-content; */
    margin-top: 95px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 672px;
}


.homepage-grid>div {
    width: 300px;
    height: 300px;
    position: relative;
    text-align: center;
}

.homepage-grid>div img:not(.white-circles) {
    margin-top: 20px;
}

.homepage-grid>div:nth-child(1) img:not(.white-circles) {
    width: 286px;
}

.homepage-grid>div:nth-child(2) img:not(.white-circles) {
    width: 224px;
}

.homepage-grid>div:nth-child(3) img:not(.white-circles) {
    width: 214px;
}

.homepage-grid>div:nth-child(4) img:not(.white-circles) {
    width: 286px;
}

.homepage-grid>div:nth-child(5) img:not(.white-circles) {
    width: 298px;
}

.homepage-grid lottie-player {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 300px;
}

.homepage-grid .white-circles {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 300px;
    opacity: 0.3;
}

.dialog {
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: none;
}

.dialog::-webkit-scrollbar {
    display: none;
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

.dialog-content {
    position: relative;
}

.image-page {
    width: 100%;
    vertical-align: top;
}

.back-button {
    z-index: 2;
    position: absolute;
    left: 75px;
}

.back-button-top>img {
    width: 107px;
}

.back-button>lottie-player {
    position: absolute;
    top: -142%;
}

.back-button-top {
    top: 89px;
}

.back-button-bottom {
    bottom: 100px;
    left: 497px !important;
}

.back-button-bottom>img {
    width: 86px;
}

.back-button-bottom>lottie-player {
    left: -7%;
}

.dialog-hero {
    position: absolute;
    z-index: 2;
}

.dialog-one .dialog-hero {
    top: 216px;
    left: 103px;
}

.dialog-one .dialog-hero img {
    width: 874px;
}

.dialog-hero lottie-player {
    position: absolute;
    left: 33%;
    top: -87%;
}

.dialog-one .dialog-hero .white-circles {
    position: absolute;
    left: 33%;
    top: -87%;
    width: 300px;
    opacity: 0.3;
}

iframe {
    position: absolute;
    z-index: 900000;
    top: 470px;
    left: 140px;
    border: none;
}

.language-selectors {
    margin-top: 85px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.language-selectors>div {
    width: 210px;
    display: flex;
    justify-content: space-between;
}

.language-selectors>div>* {
    font-family: 'beVietnamPro-light';
    font-size: 40px;
    color: #FFFFFF !important;
    background-color: transparent;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.56px;
    padding: 0px !important;
}

.language-selectors>div a {
    color: #FFFFFF !important;
}

.language-selectors>p {
    font-family: 'beVietnamPro-light';
    color: #FFFFFF;
    font-size: 18px;
    letter-spacing: 0.28px;
    text-align: center;
    margin-top: 0px !important;
    margin-bottom: 10px !important;
}



.language-selectors button.selected {
    font-size: 40px;
    font-family: 'beVietnamPro-black';
}

.next-step.open-dialog {
    position: absolute;
    bottom: 100px;
    right: 77px;
}

.next-step.open-dialog lottie-player {
    position: absolute;
    top: -130%;
    left: 7%;
}

.next-step.open-dialog .next-step {
    width: 120px;
}

.prev-step.open-dialog {
    position: absolute;
    bottom: 100px;
    left: 80px;
}

.prev-step.open-dialog lottie-player {
    position: absolute;
    top: -130%;
    left: 7%;
}

.prev-step.open-dialog .prev-step {
    width: 120px;
}

.open-video-player-4 {
    position: absolute;
    top: 684px;
    right: 150px;
}

.open-video-player-1 {
    position: absolute;
    right: 150px;
    top: 1875px;
}

#ita-wrapper .open-video-player-1 {
    top: 1899px;
}

.open-video-player-boat {
    position: absolute;
    top: 1653px;
    left: 150px;
}

.open-video-player>img {
    width: 201px;
}


.video-player {
    background-color: black;
    z-index: 99999;
}

/* .video-player-content{
    display: flex;
    align-items: center;
} */
.video-player .dialog-content {
    height: 100%;
}

.video-player video {
    position: relative;
    top: 35%;
}

.video-player .close-button {
    position: absolute;
    top: 82px;
    left: 75px;
}

.video-player .close-button img {
    width: 102px;
}

.video-player .close-button lottie-player {
    position: absolute;
    top: -80%;
}


#ita-wrapper .homepage-grid>div:nth-child(1) img:not(.white-circles) {
    width: 276px;
}

#ita-wrapper .homepage-grid>div:nth-child(2) img:not(.white-circles) {
    width: 240px;
}

#ita-wrapper .homepage-grid>div:nth-child(3) img:not(.white-circles) {
    width: 300px;
}

#ita-wrapper .homepage-grid>div:nth-child(4) img:not(.white-circles) {
    width: 284px;
}

#ita-wrapper .homepage-grid>div:nth-child(5) img:not(.white-circles) {
    width: 364px;
}

#ita-wrapper .homepage-grid>div:nth-child(5) {
    width: 370px !important;
}

#ita-wrapper .homepage-grid>div:nth-child(5) lottie-player {
    left: 9% !important;
}


#ita-wrapper .dialog-hero {
    left: 0px !important;
    top: 223px;
    width: 100%;
    text-align: center;
}

#ita-wrapper .dialog-hero lottie-player {
    left: 36.5%;
    top: -60%;
}

#ita-wrapper .dialog-one .dialog-hero img {
    width: 630px;
}

#dialog-two-ita .dialog-hero img {
    width: 706px !important;
}

#ita-wrapper #dialog-two-ita .dialog-hero lottie-player {
    top: -122% !important;
}

#dialog-three-ita .dialog-hero img {
    width: 904px !important;
}

#ita-wrapper #dialog-three-ita .dialog-hero lottie-player {
    top: -122% !important;
}

#dialog-four-ita .dialog-hero img {
    width: 750px !important;
}

#ita-wrapper #dialog-four-ita .dialog-hero lottie-player {
    top: -107% !important;
}

#dialog-five-ita .dialog-hero img {
    width: 750px !important;
}

#ita-wrapper #dialog-five-ita .dialog-hero lottie-player {
    top: -107% !important;
}


.scroll {
    position: fixed;
    bottom: 50px;
    z-index: 2;
    width: 79px;
    left: 500px;
}