.slider-wrapper { height: 763px; position: relative; background: url('/modules/main/images/slider/ETR_online_game_screenshot_03.jpg') no-repeat; background-size: cover; background-position: center top; }
.slider-wrapper:after { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 2; background: rgba(0,0,0,0.3); content: " "; }
.slider-wrapper video { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.slider-wrapper .content { position: absolute; z-index: 2; top: 100px; left: 0px; width: 100%; text-align: center; z-index: 3; }
.slider-wrapper .title { color: white; font-size: 130px; font-family: "Bebas Neue"; font-weight: 300; line-height: 100%; transform: rotate(-10deg); text-align: center; display: table; margin: auto; text-shadow: 0 0 18px black; }
.slider-wrapper .title span { display: block; font-family: "Bebas Neue"; font-size: 100px; }
.slider-wrapper .subtitle { font-size: 20px; display: table; margin: 100px auto 30px; color: white; text-align: center; line-height: 150%; text-shadow: 0 0 18px black; }
.slider-wrapper .content .godown { border: 2px solid white; border-radius: 100%; margin: 20px auto 0; display: table; padding: 0px 10px; color: white; font-size: 40px; font-weight: normal; cursor: pointer; }
.slider-wrapper .content .godown:hover { transition: 0.6s; background: black; }
.slider-wrapper .content .godown:before { font-family: "Fontawesome"; content: "\f107"; }
.badges { text-align: center; display: flex; gap: 120px; padding: 100px 0; align-items: center; justify-content: center; }
section.title_section { height: 400px; background: url('/modules/main/images/image_background.jpg') no-repeat; background-size: cover; background-position: center center; color: white; }
section.title_section .container { display: flex; flex-direction: column; height: 100%; align-items: center; justify-content: center; }
section.title_section p { text-align: center; padding: 0 15%; line-height: 150%; font-size: 20px; }
.video-block .container { display: flex; align-items: center; border-bottom: 1px solid #dcdcdc; margin: 60px auto; padding-bottom: 80px; }
.video-block .container > div:nth-child(1) { flex-grow: 1; }
.video-block iframe { width: 740px; height: 416px; }
.video-block ul { list-style-type: none; text-align: left; margin: 0; padding: 0; }
.video-block li { padding: 16px 0px; display: flex; align-items: center; transform-origin: left center; font-size: 20px; line-height: 130%; }
.video-block li:before { content: url('/modules/main/images/icon_pipe.png'); margin: 0px 20px 0px 0; transform-origin: center center; line-height: 130%; }
.hditw { text-align: center; }
.hditw h2 { margin: auto; }
.hditw .steps { margin: 200px auto 120px; display: inline-flex; text-align: center; font-size: 17px; line-height: 160%; position: relative; }
.hditw .steps .mb { display: none; }
.hditw .steps:before { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); width: 780px; height: 2px; border-bottom: 2px solid black; content: " "; }
.hditw .steps .title { color: var(--yellow); }
.hditw .steps > div { width: 400px; padding: 0 40px; position: relative; }
.hditw .steps > div:before { position: absolute; top: -110px; left: 50%; transform: translateX(-50%); }
.hditw .steps > div:after { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); content: " "; background: white; width: 20px; height: 20px; border-radius: 100%; border: 2px solid black; }
.hditw .steps .step1:before { content: url('/modules/main/images/icon_videocall.png'); }
.hditw .steps .step2:before { content: url('/modules/main/images/icon_gamemaster.png'); }
.hditw .steps .step3:before { content: url('/modules/main/images/icon_teamplay.png'); }
.teambuilding .container { display: flex; padding-bottom: 60px; }
.teambuilding .container:last-child { border-bottom: 1px solid #dbdbdb; padding-bottom: 100px; margin-bottom: 40px; }
.teambuilding .content, .teambuilding .image { width: 50%; }
.teambuilding h2 { margin-top: 70px; display: table; }
.teambuilding p { line-height: 150%; max-width: 85%; }
.teambuilding button { margin: 20px 25px 0 0; }
.teambuilding .container:first-child .image { text-align: right; }
.skins-compare { padding: 60px 0; text-align: center; }
iframe { margin: 40px 0; width: 1280px; height: 720px; }
#map { height: 550px; width: 100%; margin: 30px 0 0; }
.online-escape-rooms { padding: 120px 0; text-align: center; background: #ededed; }
.online-escape-rooms .rooms-container { display: flex; flex-wrap: wrap; justify-content: center; margin: 50px auto; }
.online-escape-rooms .rooms-container > div { width: 480px; background: #ffffff; border-radius: 10px; padding: 45px 40px; margin: 10px 10px; box-shadow: 0 10px 50px rgba(0,0,0,0.05); position: relative; cursor: pointer; }
.online-escape-rooms .rooms-container > div > div { position: relative; }
.online-escape-rooms .rooms-container img:not(.badge) { width: 100%; object-fit: cover; object-position: center center; border-radius: 5px; }
.online-escape-rooms .rooms-container .title { font-size: 28px; font-weight: 700; padding: 20px 0; }
.online-escape-rooms button { margin-bottom: 10px; }
.online-escape-rooms button:nth-child(odd) { margin-right: 10px; }
.badge { position: absolute; bottom: 20px; right: 20px; transform-origin: right bottom; }
.faq { padding: 120px 0 0px; text-align: center; }
.faq .container { border-bottom: 1px solid #dbdbdb; padding-bottom: 120px; }
.faq-container { text-align: left; padding: 120px 0; }
.faq-container .box { padding-top: 20px; cursor: pointer; }
.faq-container .title { font-size: 16px; font-weight: 700; user-select: none; border-bottom: 1px solid #dadada; padding-bottom: 20px; }
.faq-container .content { font-size: 16px; padding: 20px; display: none; background: #ededed; font-weight: 500; line-height: 150%; margin-top: -3px; border-radius: 4px; }
.faq .content a { color: var(--yellow) !important; font-weight: bold; }

@media (max-width: 1680px) {
.slider-wrapper { height: 720px; }
.slider-wrapper .content { top: 110px; }
.slider-wrapper .title { font-size: 120px; }
.slider-wrapper .title span { font-size: 90px; }
.slider-wrapper .subtitle { font-size: 19px; margin: 90px auto 30px; }
.slider-wrapper .content .godown { font-size: 38px; padding: 0 10px; }
.badges { gap: 100px; padding: 70px 0; }
.badges > img { transform: scale(0.875); transform-origin: center center; }
section.title_section { height: 350px; }
section.title_section p { padding: 0 15%; font-size: 19px; }
.video-block .container { margin: 50px auto; padding-bottom: 70px; }
.video-block iframe { width: 647px; height: 364px; }
.video-block li { padding: 12px 0px; font-size: 18px; }
.video-block li:before { transform: scale(0.875); margin: 0px 18px 0px 0; }
.hditw .steps { margin: 170px auto 100px; font-size: 16px; }
.hditw .steps:before { top: -24px; width: 740px; }
.hditw .steps > div { width: 380px; padding: 0 40px; }
.hditw .steps > div:before { top: -110px; transform-origin: center bottom; transform: translateX(-50%) scale(0.875); }
.hditw .steps > div:after { top: -34px; width: 20px; height: 20px; }
.teambuilding .container:first-child img { width: 487px; max-width: 100%; }   /* 557 */
.teambuilding .container:nth-child(2) img { width: 566px; max-width: 100%; }  /* 647 */
.teambuilding .container:last-child { padding-bottom: 80px; margin-bottom: 30px; }
.skins-compare { padding: 50px 0; }
iframe { margin: 40px 0; width: 1120px; height: 630px; }
#map { height: 500px; }
.online-escape-rooms { padding: 100px 0; }
.online-escape-rooms .rooms-container { margin: 40px auto; }
.online-escape-rooms .rooms-container > div { width: 420px; padding: 40px 30px; }
.badge { transform: scale(0.875); }
.faq { padding: 100px 0 0px; }
.faq .container { padding-bottom: 100px; }
.faq-container { padding: 100px 0; }
.faq-container .box { padding-top: 18px; }
.faq-container .title { font-size: 16px; padding-bottom: 18px; }
.faq-container .content { font-size: 16px; padding: 18px; }
}

@media (max-width: 1440px) {
.slider-wrapper { height: 620px; }
.slider-wrapper .content { top: 90px; }
.slider-wrapper .title { font-size: 90px; }
.slider-wrapper .title span { font-size: 66px; }
.slider-wrapper .subtitle { font-size: 17px; margin: 90px auto 20px; }
.slider-wrapper .content .godown { font-size: 32px; padding: 0 10px; }
.badges { gap: 70px; padding: 40px 0; }
.badges > img { transform: scale(0.75); }
section.title_section { height: 300px; }
section.title_section p { padding: 0 15%; font-size: 17px; }
.video-block .container { margin: 35px auto; padding-bottom: 50px; }
.video-block iframe { width: 555px; height: 312px; }
.video-block li { padding: 7px 0px; font-size: 17px; }
.video-block li:before { transform: scale(0.75); margin: 0px 15px 0px 0; }
.hditw .steps { margin: 160px auto 50px; font-size: 14px; }
.hditw .steps:before { top: -24px; width: 640px; }
.hditw .steps > div { width: 320px; padding: 0 40px; }
.hditw .steps > div:before { top: -110px; transform: translateX(-50%) scale(0.75); }
.hditw .steps > div:after { top: -34px; width: 20px; height: 20px; }
.teambuilding .container:first-child img { width: 418px; }   /* 557 */
.teambuilding .container:nth-child(2) img { width: 485px; }  /* 647 */
.teambuilding .content { width: 60%; }
.teambuilding .image { width: initial; flex-grow: 1; }
.teambuilding .container:last-child .content { padding-left: 80px; }
.teambuilding .container:last-child { padding-bottom: 60px; margin-bottom: 20px; }
.skins-compare { padding: 35px 0; }
iframe { margin: 30px 0; width: 960px; height: 540px; }
#map { height: 400px; }
.online-escape-rooms { padding: 80px 0; }
.online-escape-rooms .rooms-container { margin: 20px auto; }
.online-escape-rooms .rooms-container > div { width: 400px; padding: 40px 30px; }
.badge { transform: scale(0.75); }
.faq { padding: 80px 0 0px; }
.faq .container { padding-bottom: 80px; }
.faq-container { padding: 60px 0; }
.faq-container .box { padding-top: 15px; }
.faq-container .title { font-size: 15px; padding-bottom: 15px; }
.faq-container .content { font-size: 15px; padding: 15px; }
}

@media (max-width: 1366px) {
.slider-wrapper { height: 500px; }
.slider-wrapper .content { top: 70px; }
.slider-wrapper .title { font-size: 76px; }
.slider-wrapper .title span { font-size: 56px; }
.slider-wrapper .subtitle { font-size: 16px; margin: 60px auto 10px; }
.slider-wrapper .content button.white { margin: 70px auto 60px; }
.slider-wrapper .content .godown { font-size: 26px; padding: 0 8px; }
.video-block iframe { width: 525px; height: 295px; }
.video-block li { padding: 4px 0px; font-size: 16px; }
.video-block li:before { transform: scale(0.71); margin: 0px 12px 0px 0; }
section.title_section { height: 285px; }
}

@media (max-width: 1280px) {
.teambuilding .container:first-child img { width: 368px; }   /* 557 */
.teambuilding .container:nth-child(2) img { width: 427px; }  /* 647 */
.online-escape-rooms { padding: 60px 0; }
.online-escape-rooms .rooms-container > div { width: 30%; padding: 40px 30px; }
.badge { transform: scale(0.66); }
iframe { margin: 30px 0; width: 845px; height: 475px; }
}

@media (max-width: 1024px) {
.slider-wrapper { height: 500px; }
.slider-wrapper .content { top: 120px; }
.slider-wrapper .title { font-size: 46px; }
.slider-wrapper .title span { font-size: 36px; }
.slider-wrapper .subtitle { font-size: 14px; margin: 60px auto 20px; }
.slider-wrapper .content .godown { font-size: 26px; padding: 0 8px; }
.badges { gap: 25px 40px; padding: 30px 0; flex-wrap: wrap; }
.badges > img { transform: initial; width: 100px; }
section.title_section { height: initial; padding: 20px; }
section.title_section p { padding: 0; font-size: 15px; }
.video-block .container { margin: 20px auto; padding-bottom: 30px; }
.video-block iframe { width: 100%; margin: auto; }
.video-block .container { display: block; text-align: center; }
.video-block .container > div:nth-child(1) { padding-left: 20px; }
.video-block ul { margin: 20px 0; padding: 0 15px 0 0; line-height: 170%; }
.video-block ul li:before { transform: scale(0.65); margin: 0px 8px 0px 0; }
.hditw h2 { display: table; }
.hditw .steps { flex-wrap: wrap; padding: 0 15px; margin: 40px 0; }
.hditw .steps:before { border-bottom: 0px; border-left: 2px solid black; width: 2px; height: 80%; margin-top: 25px; }
.hditw .steps > div:after { all: initial; }
.hditw .steps > div:before { top: initial; transform: scale(0.75); }
.hditw .steps > div { padding: 0px 0 50px; width: 50%; }
.hditw .steps .mb { display: block; }
.hditw .steps .step1 { xbackground: red; text-align: left; padding-left: 20px; }
.hditw .steps .step2 { xbackground: blue; text-align: right; padding-right: 20px; }
.hditw .steps .step3 { xbackground: red; text-align: left; padding-left: 20px; }
.hditw .step1 .title:before, .hditw .step3 .title:before { position: absolute; left: -14px; content: " "; background: white; width: 20px; height: 20px; border-radius: 100%; border: 2px solid black; }
.hditw .step2 .title:after { position: absolute; right: -11px; content: " "; background: white; width: 20px; height: 20px; border-radius: 100%; border: 2px solid black; }
.hditw .steps .step1:before, .hditw .steps .step3:before { left: -60px; transform: scale(0.6); transform-origin: center top; top: -5px; }
.hditw .steps .step3:before { left: -70px; }
.hditw .steps .step2:before { right: -90px; transform: scale(0.6); transform-origin: center top; top: -5px; }
.hditw .step3 { padding-bottom: 0px !important; }
.teambuilding .container { padding: 0 20px; flex-direction: column; }
.teambuilding .content { width: 100%; }
.teambuilding h2 { margin-top: 0px; }
.teambuilding button { margin: 10px 20px 0 0; }
.teambuilding p { max-width: 100%; }
.teambuilding .container:last-child .content { order: 1; padding: 0; }
.teambuilding .container:last-child .image { order: 2; }
.teambuilding img { height: 250px; margin: 30px auto; display: table; }
.teambuilding .container:first-child img { width: initial; }
.teambuilding .container:nth-child(2) img { width: initial; }
.skins-compare { padding: 20px 0; }
iframe { margin: 20px 0; max-width: 360px; width: 100%; height: 200px; }
#map { height: 300px; }
.online-escape-rooms { padding: 40px 0; }
.online-escape-rooms .rooms-container > div { max-width: 400px; width: 94%; padding: 30px 25px; }
.faq-container { padding: 40px 20px; }
.faq-container .box { padding-top: 10px; }
.faq-container .title { padding-bottom: 10px; }
.faq-container .content { padding: 10px; }
}