*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

*, *:before, *:after {
    box-sizing: border-box;
}

@font-face{
    font-family:'almoni';
    src:url('https://cdn.static.pikoya.com/platforms/sections/play_walla_co_il/images/ploni-walla-light-aaa.otf') format('truetype'), url('https://s3.amazonaws.com/static.pikoya.com/platforms/sections/play_walla_co_il/images/ploni-walla-light-aaa.otf') format('truetype');
}
@font-face{
    font-family:'almoni-semi';
    src:url('https://cdn.static.pikoya.com/platforms/sections/play_walla_co_il/images/ploni-walla-regular-aaa.otf') format('truetype');
}
@font-face{
    font-family:'almoni-bold';
    src:url('https://cdn.static.pikoya.com/platforms/sections/play_walla_co_il/images/ploni-walla-bold-aaa.otf') format('truetype');
}

@font-face {
    font-family: 'walla-icons';
    font-display: block;
    src: url('https://cdn.static.pikoya.com/platforms/sections/d6c1ad5a-6d74-32b4-bdcc-d3a190c2622a/wallaicons.ttf') format('truetype');
    font-weight: 500;
}

a {cursor: pointer;}
:root {
    --white: #ffffff;
    --black: #000000;
    --darkgrey: #363636;
    --color1: #066bed;
    --color2: #061A9A;
    --color3: #9543FF;
    --color4: #C49832;
    --color5: #12664E;
    --color6: #FFB400;
    --color7: #FF5757;
    --color8: #FF5757;
    --color9: #F41987;
    --color10: #F41987;
    --color11: #02CA37;
}

#game-new {
    offset-anchor: auto;
}

html {
    font-size: 1px;
    height: 100%;
    scroll-behavior: smooth;
}

body {
    font-size: 16rem;
}

html, body {
    margin: 0 auto;
    direction: rtl;
    font-family: 'almoni-semi', sans-serif;
    
}

.container {
    max-width: 970px;
    margin: 0 auto;
    position: relative;
}

.flex-h {
    display: flex;
    justify-content: space-evenly;
}

/******** HEADER *********/

header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    padding: 2px 0;
    background-color: var(--darkgrey);
    z-index: 1000000000000;
}

header .container {
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--white);
    direction: ltr;
}

header .logo, footer .logo {
        width: 72px;
        height: 20px;
}

header .logo img, footer .logo img {
    width: 100%;
}

.header-vertical-name {
    display: none;
}

header menu {
    padding: 7px 0;
}

header menu ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    direction: rtl;
}

header menu ul li {
    padding-left: 24px;
    position: relative;
    
}

header menu ul li:after {
    content: '';
    width: 1px;
    height: 12px;
    background-color: #aaa9a9;
    display: block;
    position: absolute;
    top: 4px;
    left: 13px;
}

header menu ul li:last-child:after {
    display: none;
}

header menu ul a {
    position: relative;
    color: var(--white);
    font-size: 17rem;
    font-family: 'almoni-bold', sans-serif;
    line-height: 22.1px;
}

header menu ul a:after {
    content: '';
    opacity: 0;
    position: absolute;
    top: -3px;
    left: -4px;
    right: -4px;
    height: 2px;

    -webkit-transition: opacity 0.3s,-webkit-transform 0.3s;
    transition: opacity 0.3s,transform 0.3s;
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
}

header menu ul a[color="color-1"]:after {
    background-color: var(--color1);
}
header menu ul a[color="color-2"]:after {
    background-color: var(--color2);
}
header menu ul a[color="color-3"]:after {
    background-color: var(--color3);
}
header menu ul a[color="color-4"]:after {
    background-color: var(--color4);
}
header menu ul a[color="color-5"]:after {
    background-color: var(--color5);
}
header menu ul a[color="color-6"]:after {
    background-color: var(--color6);
}
header menu ul a[color="color-7"]:after {
    background-color: var(--color7);
}
header menu ul a[color="color-8"]:after {
    background-color: var(--color8);
}
header menu ul a[color="color-9"]:after {
    background-color: var(--color9);
}
header menu ul a[color="color-10"]:after {
    background-color: var(--color10);
}
header menu ul a[color="color-11"]:after {
    background-color: var(--color11);
}

header menu ul a:hover:after {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

header .mail {
    display: flex;
    direction: rtl;
}

header .mail .mail-text {
    line-height: 1;
}

header .mail .line-1 {
    font-size: 16px;
}
header .mail .line-2 {
    font-size: 13px;
    color: #d2d1d1;
}

header .mail .icon {
    width: 30px;
    height: 30px;
    margin-left: 10px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    background-image: url(https://cdn.static.pikoya.com/platforms/sections/play_walla_co_il/images/icon-mail.svg);
}

header .mail:hover .icon {
    background-image: url(https://cdn.static.pikoya.com/platforms/sections/play_walla_co_il/images/icon-mail-hover.svg);
}

header .walla-icon-envelop {display: none;}

header .walla-icon-envelop:before {
        color: #ffffff;
    font-size: 35rem;
    font-family: 'walla-icons';
    content: 's';
}

.menu-strip {
    background-color: #FFC400;
    margin-top: 40px;
    color: var(--white);
    margin-bottom: 24px;
}

.menu-strip .container {
    display: flex;
    align-items: center;
    padding: 1px 0;
}

.menu-strip h1 {
    font-size: 42rem;
    line-height: 35px;
    margin-left: 15px;
    margin-top: 4px;
    margin-right: -3px;
    font-family: 'almoni-bold', sans-serif;
}

.menu-strip ul {
    display: flex;
    list-style: none;
}

.menu-strip ul a {
    margin-top: 12px;
    padding: 3px 6px 11px 6px;
    line-height: 25px;
    font-family: 'almoni-semi', sans-serif;
    white-space: nowrap;
}

.menu-strip ul a:hover {
    
}

.menu-strip li {
    position: relative;
    margin-left: 16px;
}

.menu-strip li:after {
    content: '';
    width: 1px;
    height: 12px;
    background-color: #aaa9a9;
    display: block;
    position: absolute;
    top: 7px;
    left: -8px;
}

.menu-strip li:last-child:after {
    display: none;
}

/******** BREAD CRUMBS ********/

.bread {
    padding-bottom: 2px;
    border-BOTTOM: solid 1px var(--gray8, #d8d8d8);
    margin-bottom: 16px;
    font-size: 14px;
    display: flex;
    font-weight: 400;
}

.bread .item.cur {
    color: var(--black);
    margin-left: 16px;
}
.bread .item {
    margin-left: 12px;
    position: relative;
    color: var(--gray5, #7f7f7f)
}

.bread .item:after {
    
    content: '//';
    color: var(--gray5, #7f7f7f);
    padding: 0 5px;
    
/*    content: ' \2022';*/
    font-size: 16px;
    position: relative;
    top: 2px;
    right: 4px;
}

.bread .item.cur:after {
    content: ' \003E';
    right: 0px;
}

.bread .item:last-child::after {
    content: "";
}


/*********************************/

.title {
    border-bottom: 2px solid #b3b3b3;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: relative;
    margin: 48px 0;
    scroll-margin-top: 100px;
}
.title .tag {
    font-size: 20px;
    color: #373737;
    background-color: #ffffff;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 60px;
    position: absolute;
    border: 1px solid #373737;
}

/********** HERO *********/

.hero {
    display: flex;
    height: 360px;
    gap:24px;
}

.hero .card.big {
    width:calc(100% - 254px);
    display: flex;
    font-size: 20px;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
    background: linear-gradient(180deg, #ff8348 0%, #f26522 100%);

}

.hero .card.big .text-block {
    display: flex;
    flex-direction: column;
    max-width: 200px;
    text-align: right;
}

.card.big .game-name {
    font-size: 40px;
    font-family: 'almoni-bold', sans-serif;
}

.hero .card.big .img {
    width: auto;
/*    height: 100%;*/
    /* outline: 8px solid var(--black); */
    font-size: 18px;
    margin: 0;
}

.card.big .play-icon-small {
    bottom: -4px;
}

.card.big .full-width {
    flex: 1 100%;
    display: flex;
    justify-content: flex-end;
}

.card.big a {
    display: flex;
    flex-wrap: wrap;
    font-size: 20px;
    justify-content: space-evenly;
    align-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 12px;
    box-sizing: border-box;
}

.card.big .flex-h {
    align-items: center;
    width: 100%;
    height: calc(100% - 31px);
}

.card.big button {
    font-size: 16px;
}

.hero .card.small {
    width:230px;
    background-color: #a2b427;
    background: rgb(162,180,39);
    background: linear-gradient(180deg, #bbcd3d 0%, #a2b427 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero .card.small .strip {
    min-height: 140px;
}

.hero .card.small .img {
    margin-bottom: 24px;
}

.hero .card.small .game-desc {
    -webkit-line-clamp: 2;
}

/*

.hero .card.small a {
    width:230px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
*/

.game-array {
    display: flex;
}

/********** GAME CARD **********/

.card {
    border-radius: 4px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
    background: #14c17b;
    background: linear-gradient(180deg, #29db93 0%, #14c17b 100%);
    box-sizing: border-box;
    color: var(--white);
}

.card.game-1, .card:nth-child(6n+2){
    background: #c72564;
    background: linear-gradient(200grad, #ff4990 0%, #c72564 100%);
}
.card.game-2, .card:nth-child(6n+3){
    background: #FFC400;
    background: linear-gradient(180deg, #ffc400 0%, #f0bb0b 100%);
}
.card.game-3,  .card:nth-child(6n+4),
#games-new .card.game-0{
    background: #1978bb;
    background: linear-gradient(145deg, #2aa4f9 0%, #1978bb 100%);
}
.card.game-4,  .card:nth-child(6n+5),
#games-new .card.game-3{
    background: #643985;
    background: linear-gradient(142deg, #b34fff 0%, #643985 100%);
}
.card:nth-child(6n+6),
#games-new .card.game-2{
    background: #cf041c;
    background: linear-gradient(180deg, #ff4158 0%, #cf041c 100%);
}

.card:not(.hero .card), .card:not(.hero .card) a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.card .img {
        display: flex;
    justify-content: center;
    align-items: center;
    margin: 36px auto;
    position: relative;
    height: 160px;
    /* overflow: hidden; */
    aspect-ratio: 1/1;
    width: 160px;
    flex: 100%;
    max-height: 160px;
}

.card .img .icon {
    width: 160px;
    height: 160px;
}

.card .img img {
    height: auto;
    width: 100%;
}

.card .img ,icon {
    
}

.card .play-icon-small {
    position: relative;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--black);
    font-weight: 600;
    display: none;
}

.card .play-icon-small img {
    margin-bottom: 4px;
}

.icon img {
    filter: contrast(0) brightness(5);
}

.card .text-block:not(.hero .text-block) {
    flex-direction: column;
    display: flex;
    align-items: flex-start;
}

.strip {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding: 12px;
    height: -webkit-fill-available;
}

.card .game-name {
    font-size: 22px;
    margin-bottom: 4px;
}

.card .game-desc {
    text-align: right;
    margin-bottom: 12px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card button {
    background-color: white;
    color: black;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
}

/********** GAME PAGE **********/

.game-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.game-info .game-name {
    font-size: 42rem;
    font-family: 'almoni-bold', sans-serif;
    line-height: 1;
}

.game-info .game-desc {
    font-size: 22rem
}

.game iframe {
    border: 0;
    outline: 1px solid #ccc;
}

.game-frame .mobile {
	display: none;
}

.game-frame a {
	background-color: #ffc400;
    color: #ffffff;
    padding: 16px 44px;
    border-radius: 8px;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.game-frame button {
    background-color: #ffffff;
    color: #7f6307;
    padding: 6px 24px;
    border-radius: 8px;
	margin-top: 12px;
	font-weight: bold;
}

@media (orientation: landscape) {
	.game iframe {
		aspect-ratio:16/9!important;
	}
}

@media (orientation: portrait) {
	.game:not(.bnr_tower + .game) {
		height: calc(100vh - 220px);
	}
	.game-frame:not(.bnr_tower + .game .game-frame) {
/*		height: calc(100vh - 360px);*/
	}
	.game iframe {
		aspect-ratio:9/16!important;
		height: 100%;
		background:#fff;
	}
	
	.game iframe body {
		background:#fff;
	}
}

/*********** GAME ARRAY *********/

.game-array {
/*    display: flex;*/
    display: grid;
    gap:20px;
    margin-bottom: 24px;
    grid-template-columns: repeat(4,minmax(180px,1fr));
}

/*********** BANNERS *********/

.bnr_tower {
    position: absolute;
    top: 0;
    left: -184px;
}
.bnr_tower:nth-of-type(2) {
    right: -184px;
    left: inherit;
}

.bnr_970, .bnr_728, .bnr_250 {
    margin-bottom: 24px;
}

.bnr_970 center {
    width: 970px;
    margin: 0 auto;
}

.bnr_728 center {
    width: 728px;
    margin: 0 auto;
}

.bnr_250 center {
    width: 300px;
    margin: 0 auto;
}

.bnr_250.mobile {
    display: none;
}

center:before {
    content: "Advertisement";
    font-size: 10px;
    position: relative;
    top: 2px;
}

.bnr_160 {
    
}

.bnr_160 center {
    width: 160px;
    margin: 0 auto; 
}

/********** FOOTER ********/

footer {
    margin-top: 24px;
    background-color: var(--darkgrey);
    color: var (--white);
    padding: 8px;
}

footer .container {
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    color: var(--white);
    justify-content: space-between;
    align-items: center;
}

footer .copyrights {
    color: #898989;
    font-size: 12px;
    white-space: nowrap;
}

footer menu {
    display: flex;
        width: -webkit-fill-available;
    justify-content: space-evenly;
}

footer menu ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
}

footer menu li {
    padding: 0 4px;
    line-height: 1
}

/******** MOBLIE MENU *********/

.black_cover {
    
}

.black_cover.open {
    background: rgb(0, 0, 0);
    position: fixed;
    inset: 0px;
    opacity: 0;
    z-index: 9999;
    animation: 0.2s ease 0s 1 normal forwards running fade-in;
}

.tb_menu_toggle {
    display: none;
    cursor: pointer;
    background-color: #000000;
    padding: 15px 9px;
    height: 100%;
}

.tb_menu_toggle i {
    width: 25px;
    height: 4px;
    background-color: #ffffff;
    margin: 3px 0;
    -webkit-transition: 1s;
    transition: 1s;
    display: block;
}

.tb_menu_toggle.open i:first-child {
    -webkit-transform: rotate(-45deg) translate(-6px, 4px);
    -moz-transform: rotate(-45deg) translate(-6px, 4px);
    -ms-transform: rotate(-45deg) translate(-6px, 4px);
    transform: rotate(-45deg) translate(-6px, 4px);
}

.tb_menu_toggle.open i:last-child {
    -webkit-transform: rotate(45deg) translate(-6px, -4px);
    -moz-transform: rotate(45deg) translate(-6px, -4px);
    -ms-transform: rotate(45deg) translate(-6px, -4px);
    transform: rotate(45deg) translate(-6px, -4px);
}

.tb_menu_toggle.open i:nth-child(2) {
    opacity: 0;
}

.mobile-menu {
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #191919;
    position: fixed;
    top: 0;
    margin-bottom: 0;
    left: initial;
    bottom: 0;
    right: -265px;
    width: 250px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 10000;
    transition: 0.6s;
}

.mobile-menu.open {
    visibility: visible!important;
    -webkit-animation-name: swipe-to-right;
    -webkit-animation-name: swipe-to-right;
    animation-name: swipe-to-right;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    right: 0;
}

header.open {
    margin-right: 250px;
}

.mobile-menu .logo {
    display: block;
    padding: 15px 12px;
    background-color: #000000;
    width: 100%;
    height: auto;
}

.mobile-menu .logo a {
    display: flex;;
}

.mobile-menu .logo img {
    height: 20px;
    width: auto;
}

.mobile-menu ul {
    list-style: none;
    text-align: right;
    grid-area: nav;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    position: relative;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.mobile-menu li a {
    display: block;
    padding: 0 10px;
    border-bottom: solid 1px #4c4c4c;
    font-size: 19rem;
    position: relative;
    height: 38px;
    color: #ffffff;
    font-size: 17rem;
    line-height: 38px;
    width: 100%;
    font-size: 17rem;
    font-family: 'almoni-bold', sans-serif;
}

/******** RESPONSIVE **********/

@media (max-width: 1400px) {

    .bnr_tower {
        display: none;
    }
    
}

@media only screen and (max-width: 1000px) {
    
    .bnr_970 {
        display: none;
    }
    
}

@media only screen and (max-width: 970px) {
    
    .container {
        margin: 0 12px;
    }
    
    .content {
        margin-top: 94px;
    }
    
    header {
        z-index: 10000;
        position: fixed;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        top: 0;
        left: 0;
        right: 0;
        background: #FFC400;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        margin-right: 0;
        -webkit-transition: 0.6s;
        transition: 0.6s;
        height: 54px;
    }
    
    header .container {
        margin: 0;
        width: 100vw;
        gap:10px;
    }
    
    header .logo, header menu {
        display: none;
    }
    
    .menu-strip {
        position: fixed;
        top: 54px;
        z-index: 1000;
        left: 0;
        right: 0;
        margin-top: 0;
        font-family: 'almoni-regular',arial;
        border-top: solid 1px #333333;
        background-color: #4c4c4c;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        overflow: scroll;
        overflow-y: hidden;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #ffffff;
        height: 40px;
    }
    
    .tb_menu_toggle {
        display: inline-block;
        z-index: 99999;
    }
    
    .vertical-name {
        display: none;
    }
    
    .header-vertical-name {
        display: flex;
        margin-left: auto;
    }
    
    header .mail {display: none;}
    
    .header-vertical-name .vertical-name {
        display: flex;
        font-size: 26px;
        
    }
    
    .header-vertical-name .vertical-name img {
        margin-left: 4px;
    }
    
    header .walla-icon-envelop {
        display: block;
        margin-left: 10px;
    }

    .title {
        scroll-margin-top: 130px;
    }
    
}

@media only screen and (max-width: 800px) {
    
    .content {
        margin-top: 104px;
    }
    
    .hero {
        height: auto;
    }
    
    .game-array {
        flex-wrap: wrap;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .card:not(.hero .card), .card.small, .card.big {
        flex: 1 1 40%;
    }
    
    .card.small, .card.big {
        
    }
    
    
    
    .card.big a {
        padding: 0;
    }
    
    .card.big .flex-h {
        flex-direction: column-reverse;
        justify-content:flex-end;
        height: auto;
    }
    
    .card.big .flex-h .icon {
        width: 160px;
        margin: 36px 0;
    }
    
    .hero .card.big .img {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 36px auto;
        position: relative;
        height: 160px;
        overflow: hidden;
        aspect-ratio: 1/1;
        width: 160px;
        flex: 100%;
        max-height: 160px;
    }
    
    .card.big .flex-h .icon img {
        width: 100%;
        height: auto;
    }
    
    .hero .card.big .text-block {
        margin-top: 12px;
        max-width: none;
        padding: 0 12px;
    }
    
    .card.big .game-name {
        font-size: 22px;
        font-family: 'almoni-semi', sans-serif;
    }
    
    .card.big .game-desc {
        font-size: 16px;
        margin-bottom: 0;
    }
    
    .card.big .full-width {
        padding-bottom: 12px;
        padding-left: 12px;
    }
    
    .bnr_728 {
        display: none;
    }
    
    footer menu {
        flex-direction: column;
    }
    
    footer menu ul:first-child {
        margin-bottom: 12px;
    }
    
    
    
}

@media only screen and (max-width: 500px) {
	
	.game-frame .mobile {
		display: flex;
		justify-content: center;
		margin: 24px 0;
	}
	
	.game-frame .mobile img {
		width: 100px;
		margin: 24px;
	}
	
	.game-frame iframe {
		display: none;
	}
	
    footer .container {
        flex-wrap: wrap;
    }
    footer menu {
        order: -1;
        width: 100%;
        flex: 0 0 100%;
        /* flex-direction: row; */
        gap: 8px;
        margin-bottom: 8px;
    }
    
    footer menu ul.settings {
        overflow-x: scroll;
        margin-bottom: 4px;
        justify-content: flex-start;
    }
    
    footer menu li {
        white-space: nowrap;
    }
}

@media only screen and (max-width: 460px) {
    
    .hero {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .game-array {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .card:not(.hero .card), .hero .card.small, .hero .card.big {
        flex: 1 1 100%;
    }
    
    .card .img {
        flex: auto;
    }
    
    .strip {
        height: inherit;
    }
    
    .bnr_250.mobile {
        display: block;
    }
    
}
    
/********* ANIMATIONS ********/

 @-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.8;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.8;
    }
}