.topgames-grid-section.grid-content-section { padding: 115px 0 0; max-width: 100%; overflow: hidden; background: linear-gradient(to top, rgb(0 0 0 / 0%), #FEFEFE), url(/warehouse/temp/ezugi/background-mobile.jpg); background-size: cover; background-position: bottom; background-repeat: no-repeat; margin: 0; }
.topgames-grid-section .section-title { margin-bottom: 0; }
.boxes { padding-bottom: 83px; }
.boxes .content-section-Btn { display: block; }
.boxes .sec-button { display: inline-block; }
.boxes-container { display: flex; align-items: center; max-width: 1300px; margin: 0 auto; text-align: start; padding-top: 60px; padding-bottom: 80px; }
.boxes-wrap .box { color: #fff; margin: 5px; position: relative; }
/*boxes init sizes*/
.boxes-wrap .box::before { content: ''; padding-top: 40%; display: block; }
.boxes-wrap .box-wide { width: 279px; }
.boxes-wrap .box-square { width: 225px; }
.boxes-wrap .box-high { width: 185px; }
.boxes-wrap .box-high-narrow { width: 145px; }
.boxes-wrap .box-high::before { padding-top: 146%; }
.boxes-wrap .box-high-narrow::before { padding-top: 180%; }
.boxes-wrap .box-wide::before { padding-top: 58%; }
/*spesfic sizes*/
.boxes-left .boxes-wrap .box-square::before { padding-top: 81.34%; }
.boxes-center .boxes-wrap .box-square { width: 243px; }
.boxes-center .boxes-wrap .box-square::before { padding-top: 82.5%; }
.boxes-center .boxes-wrap .box-square:nth-child(2)::before { padding-top: 114%; }
.boxes-right .boxes-wrap:nth-child(2) .box-wide::before { padding-top: 52.4%; }
.boxes-right .boxes-wrap:nth-child(3) .box-wide::before { padding-top: 54%; }

.boxes-wrap .box-inner { background: #000; background-image: url('./284719.jpg'); /* fallback */ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0 0 0 / 71%)), url(./284719.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; /* transition: .4s ease-in-out; */ width: 100%; height: 100%; bottom: 0; border-radius: 16px; }
.boxes-wrap .box-pop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 16px; transform-origin: center; display: flex; flex-direction: column; justify-content: flex-end; padding: 15px; /* transition-delay: .4s; */ box-shadow: 20px 23px 26px 0 rgb(0 0 0 / 16%); transition: box-shadow .6s; }
.boxes-wrap .box-pop::before { content: ''; position: absolute; left: 0; bottom: 0; height: 60%; width: 100%; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.91), rgba(84, 84, 84, 0)); pointer-events: none; border-radius: inherit; opacity: .7; z-index: -1; }
.boxes-wrap .box-pop:hover { z-index: 1; box-shadow: 0px 0px 50px 60px rgb(255 255 255 / 40%); transition-delay: 0s; }
.boxes-wrap .box-pop:hover, .box-pop:focus { color: #fff; }
.boxes-wrap .box h3 { font-size: 19px; font-weight: normal; margin: 0; }
.boxes-wrap .box-text { display: none; font-size: 22px; font-weight: 300; overflow: hidden; font-family: 'wotfard-light', sans-serif; }
.boxes-wrap .box--hover .box-text { display: block; height: 30px; }
.boxes-wrap { position: relative; display: flex; }
.boxes-left .boxes-wrap,
.boxes-center .boxes-wrap { flex-direction: column; }
.boxes-left .boxes-wrap { align-items: flex-end; }
.boxes-right .boxes-wrap:first-child { align-items: flex-end; }
.boxes-right .boxes-wrap:last-child { align-items: flex-start; }

@media(max-width: 1024px) {
    .boxes-container { overflow-x: auto; }
    .boxes-wrap .box-wide { width: 220px; }
    .boxes-wrap .box-high-narrow { width: 131px; }
    .boxes-wrap .box-high { width: 166px; }
    .boxes-wrap .box h3 { font-size: 18px; }
    .box-square, .boxes-center .boxes-wrap .box-square { width: 180px; }
}

@media(max-width: 767px) {
    .map-wrap::-webkit-scrollbar, .boxes-container::-webkit-scrollbar { display: none; }
    .map-wrap, .boxes-container { -ms-overflow-style: none; scrollbar-width: none; }

    .topgames-grid-section .section-title h2 { font-size: 130%; max-width: 100%; }
    .topgames-grid-section .section-title h3 { font-size: 85%; line-height: 1.25; }
    .topgames-grid-section .section-title { padding: 0 30px; }
    .topgames-grid-section.grid-content-section { padding-top: 50px; }
    .boxes-container { overflow-x: auto; padding-top: 45px; padding-bottom: 65px; }
    .boxes-wrap .box h3 { font-size: 80%; }
}


.locations-section.grid-content-section { max-width: 100%; margin: 0; padding: 85px 0 153px; overflow: hidden; }
.locations-section .section-title { margin-bottom: 0; }
.map { fill: #b3b3b3; }
.map-dot { fill: #f72442; }
.map-wrap { max-width: 1080px; margin: 0 auto; position: relative; padding: 100px 0 40px; overflow-y: hidden; }
.map-wrap .option-pin { position: absolute; transform: translateY(-100%) translateX(-30%); }
.map-wrap .a { fill: #fff }
.map-wrap .b { fill: #f72442 }
.map-wrap svg { height: auto; max-width: inherit; }
.option-icon { transform: scale(0); transition: 1s cubic-bezier(0.68, -0.55, 0, 1.73); transform-origin: bottom; }
.option-tooltip { visibility: hidden; position: absolute; top: 0; left: 0; transform: translateX(-120%); width: 273px; height: 273px; border-radius: 30px; box-shadow: 6px 6px 10px 0 rgb(0 0 0 / 16%); background-size: cover; overflow: hidden; opacity: 0; transition: .35s ease; }
.option-tooltip::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.68), rgba(84, 84, 84, 0)); }
.option-tooltip span { position: absolute; top: 20px; right: 15px; color: #fff; display: flex; align-items: center; font-size: 16px; letter-spacing: -0.3px; }
.option-tooltip span::after { width: 18px; height: 18px; content: ''; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); background-color: #f72442; display: block; border-radius: 50%; margin-left: 10px; animation: 1s blink ease infinite; }
.option-tooltip h3 { position: absolute; bottom: 0; right: 0; left: 0; display: flex; justify-content: space-between; padding: 25px 30px; z-index: 1; color: #fff; }
.option-tooltip h3::after { content: ''; display: block; width: 30px; height: 30px; background: red; }

.option-hovered .option-tooltip { visibility: visible; opacity: 1; }
.option-hovered { z-index: 1; }

.locations-section .content-section-Btn { display: block; }
.locations-section .sec-button { display: inline-block; }

@keyframes blink {
    from, to { opacity: 0; }
    50% { opacity: 1; }
}

@media(max-width: 767px) {

    .locations-section .section-title h2 { font-size: 130%; max-width: 100%; }
    .locations-section .section-title h3 { font-size: 85%; line-height: 1.25; }
    .locations-section .section-title { padding: 0 30px; order: 1; }
    .locations-section.grid-content-section { display: flex; flex-direction: column; padding-top: 0; padding-bottom: 37px; }
    .locations-section.grid-content-section.show { display: flex !important; }
    .locations-section .content-section-Btn { order: 2; margin-top: 40px; }
    .map-wrap { overflow-x: auto; padding-top: 72px; max-width: 748px; }
    .option-icon svg { width: 16px; height: auto; }
    .option-tooltip { width: 160px; height: 160px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
    .option-tooltip h3 { font-size: 70%; padding: 5px 15px; }
    .option-tooltip h3::after { width: 16px; height: 16px; }
    .option-tooltip span { font-size: 60%; }
    .option-tooltip span::after { width: 8px; height: 8px; margin-left: 4px; }
    .map-wrap .option-pin.option-0 { transform: none; left: 22.5% !important; top: 53% !important; }
    .map-wrap .option-pin.option-1 { transform: none; left: 27% !important; top: 38% !important; }
    .map-wrap .option-pin.option-2 { transform: none; left: 47% !important; top: 36.5% !important; }
    .map-wrap .option-pin.option-3 { transform: none; left: 50% !important; top: 36.5% !important; }
    .map-wrap .option-pin.option-4 { transform: none; left: 51.5% !important; top: 33% !important; }
    .map-wrap .option-pin.option-5 { transform: none; left: 67.5% !important; top: 53% !important; }
    .map-wrap .option-pin.option-6 { transform: none; left: 56% !important; top: 39.5% !important; }
    .map-wrap .option-pin.option-7 { transform: none; left: 50% !important; top: 43% !important; }
    .map-wrap .option-pin.option-8 { transform: none; left: 51.5% !important; top: 38% !important; }
}











.certificationPage #GridPage { padding-top: 107px; padding-bottom: 125px; }
.certificationPage #GridContent { float: none; }
.certificationPage #LobbyModule .grid-box { display: flex; margin: 0; width: 100%; padding: 20px 0; align-items: center; font-size: 100%; }
.certificationPage .grid-boxes { flex-direction: column; padding: 0; }
.certificationPage #LobbyModule .grid-boxes .grid-box-image { padding: 0; margin: 0; order: 3; }
.certificationPage .grid-box-image-container { position: static; }
.certificationPage .grid-content-section { max-width: 980px; padding: 0; margin-bottom: 0; }
.certificationPage #LobbyModule .grid-box:not(.lastIten):not(.grid-box-head) { border-bottom: 1px solid #707070; }
.certificationPage .grid-box-title { order: 1; }
.certificationPage .grid-boxes .grid-box-subtitle { order: 2; color: inherit; color: #656565; }
.certificationPage .grid-box-title, .certificationPage .grid-box-subtitle { font-size: 135%; }
.certificationPage .grid-box-fulltext { order: 4; font-size: 85%; }
.certificationPage .certificationPage #LobbyModule .grid-box > div { flex: 1 0 25%; text-align: start; }
.certificationPage .grid-boxes .box-image-animation:hover img { transform: none; }
.certificationPage .grid-boxes .box-image-animation img { max-width: 140px; }
.certificationPage #LobbyModule .grid-boxes .grid-box > div { flex: 0 25%; text-align: start; }
.certificationPage .grid-boxes .grid-box-title h3 a { color: inherit; font-size: 100%; }
.certificationPage #LobbyModule .grid-boxes .grid-box-title h3 { font-size: 100%; margin: 0; }
.certificationPage #LobbyModule .grid-box.grid-box-head { background: #f72442; color: #fff; font-family: 'wotfard-bold'; padding: 15px 20px; }
.certificationPage #LobbyModule .grid-box.grid-box-head > div { color: inherit; font-size: 85%; }
.certificationPage #LobbyModule .grid-boxes { padding-top: 0; }
.certificationPage #SiteFooter { float: none; }
.certificationPage .FooterForm.form-container-wide { float: none; }

@media(min-width: 1025px) {
    /*.certificationPage #LobbyModule .grid-boxes .grid-box:not(.grid-box-head) .grid-box-title,
    .certificationPage #LobbyModule .grid-boxes .grid-box:not(.grid-box-head) .grid-box-subtitle { font-size: 193%; }
    .certificationPage #LobbyModule .grid-boxes .grid-box:not(.grid-box-head) .grid-box-fulltext { font-size: 122%; }
    .certificationPage #LobbyModule .grid-boxes .grid-box.grid-box-head { font-size: 122%; }*/
}

@media(max-width: 767px) {
    .certificationPage #GridTop { }
    .certificationPage #GridTop::before { content: none; }
    .certificationPage #GridTop .top-caption { font-size: 100%; width: 100%; position: absolute; padding: 0; left: 50%; }
    .certificationPage #GridTop .top-caption h1 { text-align: center; font-size: 325%; line-height: 1.14; letter-spacing: -1.25px; position: relative; }
    .certificationPage #GridTop .top-caption h1::after { position: absolute; width: 15px; height: 15px; margin: 0; right: 0; }
    .certificationPage #LobbyModule .grid-box { flex-direction: column; align-items: flex-start; }
    .certificationPage #LobbyModule .grid-box.grid-box-head { display: none; }
    .certificationPage #LobbyModule .grid-boxes .grid-box-image { position: absolute; right: 0; width: 30%; }
    .certificationPage #LobbyModule .grid-boxes .grid-box > div:not(.grid-box-image) { width: 70%; }
    .certificationPage #LobbyModule .grid-boxes .grid-box > div:not(.grid-box-image):not(:last-child) { margin-bottom: 6px; }
    .certificationPage .lobby-grid #GridPage .max-width { padding: 0 20px; }
    .certificationPage #GridPage { padding-top: 25px; padding-bottom: 25px; }
    .certificationPage .grid-box-fulltext { font-size: 70%; }
    .certificationPage .grid-box-title, .certificationPage .grid-box-subtitle { font-size: 100%; }
}