/* roboto-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* roboto-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/roboto-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }



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

#wrapper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: rgb(63,94,251);
    background: linear-gradient(315deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
    overflow: hidden;
}

.bg {
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    background: rgb(38,150,157);
    background: linear-gradient(31deg, rgba(38,150,157,1) 0%, rgba(141,206,151,1) 100%);
    z-index: 1;
}

div {
    position: absolute;
}

.legende {
    z-index: 2;
}

.interface {
    z-index: 20;
}

.hide {
    display: none;
}

/* Interface */

.interface-background {
    width: 320px;
    height: 1080px;
    left: 0px;
    top: 0px;
    background: #282D3A;
    box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07);
    z-index: 1;
}

.interface-background-top {
    width: 320px;
    height: 218px;
    left: 0px;
    top: 0px;
    background: #455264;
    z-index: 2;
}

.eu-flag {
    box-sizing: border-box;
    width: 66px;
    height: 44px;
    left: 27px;
    top: 22px;
    z-index: 3;
}

.interface-intro-txt {
    width: 267px;
    height: 121px;
    left: 27px;
    top: 81px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 133%;
    color: #EBE9E9;
    z-index: 3;
}

.interface-txt-1 {
    width: 236px;
    height: 28px;
    left: 27px;
    top: 260px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    color: #FFFFFF;
    z-index: 3;
}

.interface-txt-2 {
    width: 142px;
    height: 28px;
    left: 27px;
    top: 460px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    color: #FFFFFF;
    z-index: 3;
}

.interface-txt-3 {
    width: 142px;
    height: 28px;
    left: 31px;
    /*top: 731px;*/
    top: 842px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    color: #EBE9E9;
    border: 1px solid #D9D9D9;
    border-radius: 13px;
    padding: 6px 3px;
    z-index: 3;
}

.interface-txt-4 {
    width: 71px;
    height: 19px;
    left: 27px;
    top: 1007px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 133%;
    color: #EBE9E9;
    z-index: 3;
}

.interface-txt-5 {
    width: 96px;
    height: 19px;
    left: 116px;
    top: 1007px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 133%;
    color: #EBE9E9;
    z-index: 3;
}

.interface-txt-6 {
    width: 198px;
    height: 19px;
    left: 27px;
    top: 1033px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 133%;
    color: #EBE9E9;
    z-index: 3;
}

.interface-txt-7 {
    width: 198px;
    height: 19px;
    left: 27px;
    top: 1055px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 133%;
    color: #EBE9E9;
    z-index: 3;
}

.icon-facebook {
    left: 27px;
    top: 949px;
    z-index: 3;
}

.icon-youtube {
    left: 79px;
    top: 949px;
    z-index: 3;
}

.icon-twitter {
    left: 131px;
    top: 949px;
    z-index: 3;
}

.icon-instagram {
    left: 183px;
    top: 949px;
    z-index: 3;
}

.icon-linkedin {
    left: 235px;
    top: 949px;
    z-index: 3;
}

.click {
    cursor: pointer;
    z-index: 5;
}

.menus{
    position: absolute;
    top: 260px;
    left: 27px;
    background: #282d3a;
    width: 280px;
    z-index: 99;
    font-family: 'Roboto';
    font-size: 20px;
}

.menus div{
    position: relative;
}

.menus .title{
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    color: #FFFFFF;
    z-index: 3;
    margin-bottom: 25px;
}

.menus label{
    position: relative;
    display: block;
    margin-bottom: 23px;
    cursor: pointer;
}

.menus label input{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.menus label span{
    position: relative;
    padding-left: 40px;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 23px;
    color: #EBE9E9;
}

.menus label span:after{
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #EBE9E9;
}

.menus label input:checked + span{
    color: #8DCE98;
}

.menus label input:checked + span:after{
    background: #8DCE98;
    border-color: #8DCE98;
}

.menus .sub_menu{
    margin-top: 30px;
}

.menus label.sub{
    margin-left: 40px;
}

.menus label.sub.off{
    opacity: 0.3 !important;
}

/* Szenarios */

.scene-1-video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.scene-2-video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.scene-3-video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.scene-4-video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.scene-5-video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.scene-6-video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.scene-7-video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.scene-8-video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.scene-9-video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.scene-10-video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.scene-11-video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.scene-12-video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.scene-13-image {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 17;
}

h3 {
    font-family: "Roboto";
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    color: #282D3A;
    margin-bottom: -3px;
}

p {
    font-family: "Roboto";
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    color: #282D3A;
}

.item-close {
    left: 1335px;
    top: 70px;
    cursor: pointer;
    z-index: 23;
}

.item-close-2 {
    left: 1505px;
    top: 70px;
    cursor: pointer;
    z-index: 23;
}

.item-close-3 {
    left: 1695px;
    top: 70px;
    cursor: pointer;
    z-index: 23;
}

.item-1-click {
    position: absolute;
    left: 440px;
    top: 340px;
    width: 170px;
    height: 120px;
    transform: rotate(31deg);
    cursor: pointer;
    z-index: 7;
}

.item-1-txt {
    left: 825px;
    top: 517px;
    width: 477px;
    z-index: 24;
}

.item-1-image {
    top: 147px;
    left: 825px;
    z-index: 24;
}

.item-1-bg {
    width: 543px;
    height: 759px;
    top: 114px;
    left: 792px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-2-click {
    position: absolute;
    left: 1360px;
    top: 740px;
    width: 180px;
    height: 160px;
    transform: rotate(38deg);
    cursor: pointer;
    z-index: 7;
}

.item-2-txt {
    left: 825px;
    top: 517px;
    width: 477px;
    z-index: 24;
}

.item-2-image {
    top: 147px;
    left: 825px;
    z-index: 24;
}

.item-2-bg {
    width: 543px;
    height: 736px;
    top: 114px;
    left: 792px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-3-click {
    position: absolute;
    left: 1043px;
    top: 775px;
    width: 300px;
    height: 150px;
    transform: rotate(31deg);
    cursor: pointer;
    z-index: 7;
}

.item-3-txt {
    left: 825px;
    top: 517px;
    width: 477px;
    z-index: 24;
}

.item-3-image {
    top: 147px;
    left: 825px;
    z-index: 24;
}

.item-3-bg {
    width: 543px;
    height: 708px;
    top: 114px;
    left: 792px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-4-click {
    position: absolute;
    left: 751px;
    top: 140px;
    width: 170px;
    height: 150px;
    transform: rotate(39deg);
    cursor: pointer;
    z-index: 7;
}

.item-4-txt {
    left: 825px;
    top: 517px;
    width: 477px;
    z-index: 24;
}

.item-4-image {
    top: 147px;
    left: 825px;
    z-index: 24;
}

.item-4-bg {
    width: 543px;
    height: 814px;
    top: 114px;
    left: 792px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-5-click {
    position: absolute;
    left: 1040px;
    top: 270px;
    width: 220px;
    height: 190px;
    transform: rotate(31deg);
    cursor: pointer;
    z-index: 7;
}

.item-5-txt {
    left: 825px;
    top: 517px;
    width: 477px;
    z-index: 24;
}

.item-5-image {
    top: 147px;
    left: 825px;
    z-index: 24;
}

.item-5-bg {
    width: 543px;
    height: 835px;
    top: 114px;
    left: 792px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-6-click {
    position: absolute;
    left: 1520px;
    top: 380px;
    width: 200px;
    height: 180px;
    transform: rotate(31deg);
    cursor: pointer;
    z-index: 7;
}

.item-6-txt {
    left: 825px;
    top: 517px;
    width: 477px;
    z-index: 24;
}

.item-6-image {
    top: 147px;
    left: 825px;
    z-index: 24;
}

.item-6-bg {
    width: 543px;
    height: 683px;
    top: 114px;
    left: 792px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-7-click {
    position: absolute;
    left: 740px;
    top: 770px;
    width: 190px;
    height: 130px;
    transform: rotate(31deg);
    cursor: pointer;
    z-index: 7;
}

.item-7-txt {
    left: 825px;
    top: 517px;
    width: 477px;
    z-index: 24;
}

.item-7-image {
    top: 147px;
    left: 825px;
    z-index: 24;
}

.item-7-bg {
    width: 543px;
    height: 658px;
    top: 114px;
    left: 792px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-8-click {
    position: absolute;
    left: 760px;
    top: 340px;
    width: 170px;
    height: 120px;
    transform: rotate(31deg);
    cursor: pointer;
    z-index: 7;
}

.item-8a-click {
    position: absolute;
    left: 750px;
    top: 520px;
    width: 170px;
    height: 120px;
    transform: rotate(31deg);
    cursor: pointer;
    z-index: 7;
}

.item-8b-click {
    position: absolute;
    left: 1060px;
    top: 520px;
    width: 170px;
    height: 120px;
    transform: rotate(31deg);
    cursor: pointer;
    z-index: 7;
}

.item-8c-click {
    position: absolute;
    left: 1370px;
    top: 520px;
    width: 170px;
    height: 120px;

    transform: rotate(31deg);
    cursor: pointer;
    z-index: 7;
}

.item-8d-click {
    position: absolute;
    left: 1370px;
    top: 160px;
    width: 170px;
    height: 120px;
    transform: rotate(31deg);
    cursor: pointer;
    z-index: 7;
}

.item-8-txt {
    left: 825px;
    top: 517px;
    width: 477px;
    z-index: 24;
}

.item-8-image {
    top: 147px;
    left: 825px;
    z-index: 24;
}

.item-8-bg {
    width: 543px;
    height: 712px;
    top: 114px;
    left: 792px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-9-click {
    position: absolute;
    left: 1670px;
    top: 110px;
    width: 190px;
    height: 180px;
    transform: rotate(31deg);
    cursor: pointer;
    z-index: 7;
}

.item-9-txt {
    left: 825px;
    top: 517px;
    width: 477px;
    z-index: 24;
}

.item-9-image {
    top: 147px;
    left: 825px;
    z-index: 24;
}

.item-9-bg {
    width: 543px;
    height: 712px;
    top: 114px;
    left: 792px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-10-click {
    position: absolute;
    left: 360px;
    top: 490px;
    width: 270px;
    height: 120px;
    transform: rotate(31deg);
    cursor: pointer;
    z-index: 7;
}

.item-10-txt {
    left: 825px;
    top: 517px;
    width: 477px;
    z-index: 24;
}

.item-10-image {
    top: 147px;
    left: 825px;
    z-index: 24;
}

.item-10-bg {
    width: 543px;
    height: 758px;
    top: 114px;
    left: 792px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-11-click {
    position: absolute;
    left: 440px;
    top: 710px;
    width: 270px;
    height: 140px;
    transform: rotate(31deg);
    cursor: pointer;
    z-index: 7;
}

.item-11-txt {
    left: 825px;
    top: 517px;
    width: 477px;
    z-index: 24;
}

.item-11-image {
    top: 147px;
    left: 825px;
    z-index: 24;
}

.item-11-bg {
    width: 543px;
    height: 680px;
    top: 114px;
    left: 792px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-13-click {
    position: absolute;
    left: 918px;
    top: 123px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    z-index: 18;
}

.item-13-txt {
    left: 965px;
    top: 404px;
    width: 331px;
    z-index: 24;
}

.item-13-image {
    top: 147px;
    left: 965px;
    z-index: 24;
}

.item-13-bg {
    width: 397px;
    height: 779px;
    top: 114px;
    left: 932px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-14-click {
    position: absolute;
    left: 1228px;
    top: 324px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    z-index: 18;
}

.item-14-txt {
    left: 965px;
    top: 404px;
    width: 331px;
    z-index: 24;
}

.item-14-image {
    top: 147px;
    left: 965px;
    z-index: 24;
}

.item-14-bg {
    width: 397px;
    height: 779px;
    top: 114px;
    left: 932px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-15-click {
    position: absolute;
    left: 1468px;
    top: 658px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    z-index: 18;
}

.item-15-txt {
    left: 965px;
    top: 404px;
    width: 331px;
    z-index: 24;
}

.item-15-image {
    top: 147px;
    left: 965px;
    z-index: 24;
}

.item-15-bg {
    width: 397px;
    height: 779px;
    top: 114px;
    left: 932px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-16-click {
    position: absolute;
    left: 1236px;
    top: 658px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    z-index: 18;
}

.item-16-txt {
    left: 770px;
    top: 404px;
    width: 331px;
    z-index: 24;
}

.item-16b-txt {
    left: 1134px;
    top: 404px;
    width: 331px;
    z-index: 24;
}

.item-16-image {
    top: 147px;
    left: 770px;
    z-index: 24;
}

.item-16b-image {
    top: 147px;
    left: 1134px;
    z-index: 24;
}

.item-16-bg {
    width: 761px;
    height: 804px;
    top: 114px;
    left: 737px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-17-click {
    position: absolute;
    left: 623px;
    top: 125px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    z-index: 18;
}

.item-17-txt {
    left: 770px;
    top: 404px;
    width: 331px;
    z-index: 24;
}

.item-17b-txt {
    left: 1134px;
    top: 404px;
    width: 331px;
    z-index: 24;
}

.item-17-image {
    top: 147px;
    left: 770px;
    z-index: 24;
}

.item-17b-image {
    top: 147px;
    left: 1134px;
    z-index: 24;
}

.item-17-bg {
    width: 761px;
    height: 804px;
    top: 114px;
    left: 737px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-18-click {
    position: absolute;
    left: 1668px;
    top: 513px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    z-index: 18;
}

.item-18-txt {
    left: 770px;
    top: 404px;
    width: 331px;
    z-index: 24;
}

.item-18b-txt {
    left: 1134px;
    top: 404px;
    width: 331px;
    z-index: 24;
}

.item-18-image {
    top: 147px;
    left: 770px;
    z-index: 24;
}

.item-18b-image {
    top: 147px;
    left: 1134px;
    z-index: 24;
}

.item-18-bg {
    width: 761px;
    height: 804px;
    top: 114px;
    left: 737px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.item-19-click {
    position: absolute;
    left: 1663px;
    top: 323px;
    width: 100px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    z-index: 18;
}

.item-19-txt {
    left: 590px;
    top: 404px;
    width: 331px;
    z-index: 24;
}

.item-19b-txt {
    left: 954px;
    top: 404px;
    width: 331px;
    z-index: 24;
}

.item-19c-txt {
    left: 1319px;
    top: 404px;
    width: 331px;
    z-index: 24;
}

.item-19-image {
    top: 147px;
    left: 590px;
    z-index: 24;
}

.item-19b-image {
    top: 147px;
    left: 954px;
    z-index: 24;
}

.item-19c-image {
    top: 147px;
    left: 1319px;
    z-index: 24;
}

.item-19-bg {
    width: 1124px;
    height: 804px;
    top: 114px;
    left: 557px;
    border-radius: 17px;
    background: #EBE9E9;
    z-index: 23;
}

.info-scene-1-click {
    left: 1720px;
    top: 970px;
    cursor: pointer;
    z-index: 10;
}

.info-scene-1-txt-1 {
    left: 1374px;
    top: 432px;
    width: 490px;
    z-index: 10;
}

.info-scene-1-txt-2 {
    left: 1374px;
    top: 107px;
    width: 490px;
    z-index: 10;
}

.info-scene-1-forward-click {
    left: 1828px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-1-back-click {
    left: 1374px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-2-click {
    left: 1720px;
    top: 970px;
    cursor: pointer;
    z-index: 10;
}

.info-scene-2-txt-1 {
    left: 1374px;
    top: 354px;
    width: 490px;
    z-index: 10;
}

.info-scene-2-txt-2 {
    left: 1374px;
    top: 107px;
    width: 490px;
    z-index: 10;
}

.info-scene-2-forward-click {
    left: 1828px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-2-back-click {
    left: 1374px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-3-click {
    left: 1720px;
    top: 970px;
    cursor: pointer;
    z-index: 10;
}

.info-scene-3-txt-1 {
    left: 1374px;
    top: 94px;
    width: 490px;
    z-index: 10;
}

.info-scene-3-txt-2 {
    left: 1374px;
    top: 107px;
    width: 490px;
    z-index: 10;
}

.info-scene-3-forward-click {
    left: 1828px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-3-back-click {
    left: 1374px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-4-click {
    left: 1720px;
    top: 970px;
    cursor: pointer;
    z-index: 10;
}

.info-scene-4-txt-1 {
    left: 1374px;
    top: 334px;
    width: 490px;
    z-index: 10;
}

.info-scene-4-txt-2 {
    left: 1374px;
    top: 334px;
    width: 490px;
    z-index: 10;
}

.info-scene-4-forward-click {
    left: 1828px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-4-back-click {
    left: 1374px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-5-click {
    left: 1720px;
    top: 970px;
    cursor: pointer;
    z-index: 10;
}

.info-scene-5-txt-1 {
    left: 1374px;
    top: 288px;
    width: 490px;
    z-index: 10;
}

.info-scene-5-txt-2 {
    left: 1374px;
    top: 288px;
    width: 490px;
    z-index: 10;
}

.info-scene-5-forward-click {
    left: 1828px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-5-back-click {
    left: 1374px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-6-click {
    left: 1720px;
    top: 970px;
    cursor: pointer;
    z-index: 10;
}

.info-scene-6-txt-1 {
    left: 1374px;
    top: 288px;
    width: 490px;
    z-index: 10;
}

.info-scene-6-txt-2 {
    left: 1374px;
    top: 288px;
    width: 490px;
    z-index: 10;
}

.info-scene-6-forward-click {
    left: 1828px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-6-back-click {
    left: 1374px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-7-click {
    left: 1720px;
    top: 970px;
    cursor: pointer;
    z-index: 10;
}

.info-scene-7-txt-1 {
    left: 1374px;
    top: 204px;
    width: 490px;
    z-index: 10;
}

.info-scene-7-txt-2 {
    left: 1374px;
    top: 204px;
    width: 490px;
    z-index: 11;
}

.info-scene-7-forward-click {
    left: 1828px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-7-back-click {
    left: 1374px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-8-click {
    left: 1720px;
    top: 970px;
    cursor: pointer;
    z-index: 10;
}

.info-scene-8-txt-1 {
    left: 1334px;
    top: 84px;
    width: 540px;
    z-index: 10;
}

.info-scene-8-txt-2 {
    left: 1334px;
    top: 84px;
    width: 540px;
    z-index: 10;
}

.info-scene-8-forward-click {
    left: 1828px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-8-back-click {
    left: 1374px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-9-click {
    left: 1720px;
    top: 970px;
    cursor: pointer;
    z-index: 10;
}

.info-scene-9-txt-1 {
    left: 1334px;
    top: 106px;
    width: 540px;
    z-index: 10;
}

.info-scene-9-txt-2 {
    left: 1334px;
    top: 106px;
    width: 540px;
    z-index: 10;
}

.info-scene-9-forward-click {
    left: 1828px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-9-back-click {
    left: 1374px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-10-click {
    left: 1720px;
    top: 970px;
    cursor: pointer;
    z-index: 10;
}

.info-scene-10-txt-1 {
    left: 1168px;
    top: 80px;
    width: 720px;
    z-index: 10;
}

.info-scene-10-txt-2 {
    left: 1168px;
    top: 80px;
    width: 720px;
    z-index: 10;
}

.info-scene-10-forward-click {
    left: 1828px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-10-back-click {
    left: 1374px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-11-click {
    left: 1720px;
    top: 970px;
    cursor: pointer;
    z-index: 10;
}

.info-scene-11-txt-1 {
    left: 751px;
    top: 112px;
    width: 1120px;
    z-index: 10;
}

.info-scene-11-txt-2 {
    left: 751px;
    top: 112px;
    width: 1120px;
    z-index: 10;
}

.info-scene-11-forward-click {
    left: 1828px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-11-back-click {
    left: 1374px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-12-click {
    left: 1720px;
    top: 970px;
    cursor: pointer;
    z-index: 10;
}

.info-scene-12-txt-1 {
    left: 751px;
    top: 112px;
    width: 1120px;
    z-index: 10;
}

.info-scene-12-txt-2 {
    left: 751px;
    top: 112px;
    width: 1120px;
    z-index: 10;
}

.info-scene-12-forward-click {
    left: 1828px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-12-back-click {
    left: 1374px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 11;
}

.info-scene-13-click {
    left: 1720px;
    top: 970px;
    cursor: pointer;
    z-index: 21;
}

.info-scene-13-txt-1 {
    left: 1374px;
    top: 495px;
    width: 490px;
    z-index: 20;
}

.info-scene-13-txt-2 {
    left: 1374px;
    top: 107px;
    width: 490px;
    z-index: 20;
}

.info-scene-13-forward-click {
    left: 1828px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 20;
}

.info-scene-13-back-click {
    left: 1374px;
    top: 900px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    z-index: 20;
}

.info-slide {
    left: 1615px;
    top: 900px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #28979E;
    z-index: 10;
}

.info-slide-1 {
    left: 1599px;
    top: 900px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #282D3A;
    z-index: 10;
}

.info-slide-2 {
    left: 1629px;
    top: 900px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #282D3A;
    z-index: 10;
}

.info-bg-pfeil {
    left: 1799px;
    top: 910px;
    z-index: 9;
}

.info-bg {
    right: -1910px;
    bottom: -935px;
    width: 100px;
    height: 100px;
    border-radius: 25px;
    background: #EBE9E9;
    z-index: 9;
}

.info-bg-fever {
    right: -1910px;
    bottom: -935px;
    width: 100px;
    height: 100px;
    border-radius: 25px;
    background: #EBE9E9;
    z-index: 19;
}

.info-bg-color {
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    background: transparent;
    z-index: 8;
}

.info-bg-color-fever {
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    background: transparent;
    z-index: 8;
}

.info-pfeil-forward {
    left: 1828px;
    top: 900px;
    z-index: 10;
}

.info-pfeil-back {
    left: 1374px;
    top: 900px;
    transform: rotate(180deg);
    z-index: 10;
}

.info-click-close {
    left: 1720px;
    top: 953px;
    cursor: pointer;
    z-index: 10;
}

.info-click-close-fever {
    left: 1720px;
    top: 953px;
    cursor: pointer;
    z-index: 20;
    z-index: 21;
}

.black-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    background: #282D3A;
    z-index: 22;
}

/* How to use */

.how-to-use-1 {
    left: 773px;
    top: 301px;
    z-index: 13;
}

.how-to-use-2 {
    left: 328px;
    top: 226px;
    z-index: 13;
}

.how-to-use-3 {
    left: 335px;
    top: 117px;
    z-index: 13;
}

.how-to-use-4 {
    left: 1381px;
    top: 702px;
    z-index: 13;
}

.how-to-use-skip {
    left: 1219px;
    top: 549px;
    width: 70px;
    height: 40px;
    background: red;
    cursor: pointer;
    z-index: 14;
}

.how-to-use-next {
    left: 1328px;
    top: 551px;
    width: 96px;
    height: 40px;
    background: blue;
    cursor: pointer;
    z-index: 14;
}

.how-to-use-next-2 {
    left: 911px;
    top: 400px;
    width: 96px;
    height: 40px;
    background: blue;
    cursor: pointer;
    z-index: 14;
}

.how-to-use-next-3 {
    left: 732px;
    top: 233px;
    width: 96px;
    height: 40px;
    background: blue;
    cursor: pointer;
    z-index: 14;
}

.how-to-use-next-4 {
    left: 618px;
    top: 255px;
    width: 96px;
    height: 40px;
    background: blue;
    cursor: pointer;
    z-index: 14;
}

.how-to-use-interface-click {
    left: 28px;
    /*top: 732px;*/
    top: 842px;
    width: 156px;
    height: 40px;
    background: transparent;
    cursor: pointer;
    z-index: 21;
}

.black-overlay-htu {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    background: #282D3A;
    z-index: 12;
}