html {
    background-image: url("../images/website-wowz/bg.svg");
    background-attachment: fixed;
    background-size: cover;
}

/*logo*/
.desktop #game-list #logo {grid-row: 1/span 2; grid-column: 1/span 2; background:url("../images/website-wowz/logo-girl.png"); text-decoration: none; background-size: contain; background-repeat: no-repeat;}
.desktop.halloween #game-list #logo {grid-row: 1/span 2; grid-column: 1/span 2; background:url("../images/website-wowz/logo-girl-halloween.png"); text-decoration: none; background-size: contain; background-repeat: no-repeat;}
.desktop.christmas #game-list #logo {grid-row: 1/span 2; grid-column: 1/span 2; background: url("../images/website-wowz/logo-girl-christmas.png"); text-decoration: none; background-size: contain; background-repeat: no-repeat;}
.desktop.valentines #game-list #logo {grid-row: 1/span 2; grid-column: 1/span 2; background:url("../images/website-wowz/logo-girl-valentines.png"); text-decoration: none; background-size: contain; background-repeat: no-repeat;}
.mobile #game-list #logo { margin-top:0; height: 9rem; background-image:url("../images/website-wowz/logo.png");}

.desktop.list #logo-top a, .desktop.list #logo-top img  {width:150px;}
.desktop #logo-top a, .desktop #logo-top img { width:230px;}
.desktop #logo-top img {top:-60px;}
.desktop .scrolled #logo-top a, .desktop .scrolled #logo-top img {width:150px;}
.desktop .scrolled #logo-top img {top:-40px;}

.masonry.list #body .sidelist-thumb-text {grid-row: 3/span 3;}
.masonry.list #body .sidelist-thumb-text a { width:180px; height:31px; border-width: 0px; background:rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
.masonry.list #body .sidelist-thumb-text a:hover {background:rgba(255,255,255,.3); }

#mobile-menu-bar #logo { float:left; height: 50px; margin:0 5px; width:100px; background-image:url("../images/website-wowz/logo.png"); background-size: cover; background-position: 50% -16px; } /*portarit*/

@media (min-aspect-ratio:3/4)  /*landscape*/
	{
	#mobile-menu-bar #logo { width:50px; height:80px; background-image:url("../images/website-wowz/logo-menu-landscape.png"); background-position: 50%; margin:0; }
	}
	
#footer {background:none; color:#fff; padding:20px;}
#footer a {color:#fff;}
#footer a.variation {color:yellow;}

.page-text-bg {color: rgb(255, 255, 255); overflow:auto; text-align: left; float: left;}
.page-text {font-size: 14px; line-height: normal;}
.page-text a {color: rgb(221, 173, 255); text-decoration: none;}
.page-text h2 {color: rgb(255, 255, 255); font-size: 16px;}


/*achievements*/
.ach-coins{display: inline-block; background: #00000026 url(../images/achievements/coin-wowz.png) 90% 50% no-repeat; background-size: 1.5em; padding: 0.2em 1.9em 0.2em 0.5em; line-height: 1.35em; height: 1.3em; min-width:0.7em; font-size: 20px; color: yellow; border-bottom: 2px solid #0000001a; border-radius: 15px; text-shadow: 0 0 3px #000; text-decoration:none;}
#menu-achievements {width:230px;}
[dir='ltr'] #menu-achievements .ach-coins {margin-left:5px;}
[dir='rtl'] #menu-achievements .ach-coins {margin-right:5px;}
#achievement-notification {display: none; position: fixed; left:0; z-index: 99999; padding-bottom:10px; bottom: -180px;width:100%; background: transparent linear-gradient(180deg, #00000000 0px, #000000 100%); pointer-events: none; }
#achievement-notification.active {display:block;}
#achievement-notification.paused {opacity:0.2;}

.achievement {
	position:relative;
    border: 2px solid #824bc7;
    border-bottom-width:4px;
    color: #ddd;
    border-radius: 18px;
    box-shadow: 0px 0px 4px #000, inset 0 2px 0 #cb6dfe;
    background: #9a62e0 2px 50% no-repeat;
	background-size: contain;
    margin: 10px 5px;
    width: 290px; min-height: 45px; padding: 12px 90px 12px 100px;
    transition: 1s;
    line-height: 16px;
}
.achievements-list .achievement {height:60px;}
.achievement.big{ width: 300px; height: 110px; padding: 14px 12px 12px 140px; background-position: 6px 6px; background-size: 120px;  }

#body .achievement { margin: 10px 0; }
#achievement-notification .achievement {float:right; margin:10px;}
#achievement-notification .achievement.daily_reward {height: 50px; width: 240px; padding: 200px 15px 90px 15px; background-size: 200px; background-position: 50% -5px;}	
.achievement p {margin-top:7px;}
.achievements-list .achievement p {margin-top:10px;}
.achievement.locked {background-color: #ccc; border-color: #eee; color: #444; box-shadow: 0px 0px 4px #000, inset 0 2px 0 #f0d4ff;}
.achievement .title {color: #fff;font-weight: bold; font-size: inherit; height: auto;}
#achievement-notification .achievement.daily_reward .title, .achievement.big .title {font-size:21px; height:30px;}
.achievement .title img { max-height: 1.2em; max-width: 1.2em; margin-right: 5px; opacity:0.6}
.achievement.locked .title {color: #444;}
.achievement.locked .title img {filter:brightness(0.4);}
.achievement .ach-coins {position: absolute;right:10px; top:0px;}
#achievement-notification .achievement.daily_reward .ach-coins, .achievement.big .ach-coins {position: relative; right: auto; top: auto;}
.achievement .ach-completed-bar, .achievement .ach-completed-meter { position:absolute; display:inline-block; width: 50px;border-radius: 10px; }
.achievements-list .achievement .ach-completed-bar, .achievements-list .achievement .ach-completed-meter {width:100px;}
.achievement .ach-completed-bar {border: 2px solid #ffffffab; position: absolute; bottom: 10px; right: 10px; height:7px; }
.achievement .ach-completed-meter {background: green; height:5px;  border-top: 2px solid #03c003;}
.achievement .ach-completed-bar i{ position: absolute; left: -107px; top: -3px; width: 100px; text-align:right; font-size:13px; line-height: 14px;}
.achievement.daily_reward .ach-completed-bar i {left: -62px; width: 60px; text-align: left;}


/*coin animation*/
.coin-animation, .coin-animation2{
    position:fixed;
    z-index:100000;
    width:60px;
    height:60px;
    animation:1s animateOpacity;
    background: url("../images/achievements/coin-wowz.png");
    background-size: contain;
}

@keyframes animateOpacity {
    from {opacity: 0;}
    10% {opacity: 0.6;}
    50% {opacity: 1;}
    90% {opacity: 0.6;}
    to {opacity: 0;}
}

/*modal window*/
.modal { display: none; position: fixed; z-index: 100000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); font-size:16px;}
.modal-box { position:absolute; top:50%; left:50%; transform: perspective(1px) translateY(-50%) translateX(-50%); margin: auto;  background: #d796e6; border: 2px solid #a05cf0; border-bottom-width:4px; box-shadow: 0px 0px 4px #000, inset 0px 2px 0 #e4aaf1; border-radius:20px;}
.mobile .modal-box {width:90vw;height:90vh;}
.modal-body { position:relative; padding:10px; z-index: 100001; background: #563b5d; color: #fff; border-top: 2px solid #e4abf2; border-bottom: 2px solid #e4abf2; border-radius:13px;}
.modal-body > p {margin:20px 10px 10px 10px;}
.modal-body a {text-decoration: none;}
.modal-body::-webkit-scrollbar { width: 17px;}
.modal-body::-webkit-scrollbar-track {  background:#9f66ad; border:2px solid #e4aaf1; border-top:0; border-bottom:0; border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
.modal-body::-webkit-scrollbar-thumb {  background: #9a62e0; border:2px solid #e4aaf1; border-radius: 10px; box-shadow:0px 0px 4px #444;}
.modal-body::-webkit-scrollbar-thumb:hover { background: #d587ff; border-color:#824bc7; }

.modal-title {	padding:0.4em; text-align:center; color: #fff; font-size:2em; text-shadow: 0px 0px 4px #444;}
.modal-title img { max-height: 1.2em; max-width: 1.2em; filter: drop-shadow(0px 0px 4px #444); }
.modal .button.close, .achievement .button.close {position:absolute; top: -0.6em; right: -0.7em; z-index: 100002; font-size: 34px; line-height: 34px; padding: 0em 0.2em; border-radius:30px; cursor:pointer; border-color:#824bc7;background:#9a62e0;color:#ddd; box-shadow: 0px 0px 4px #000, inset 0 2px 0 #cb6dfe; }
.achievement .button.close { opacity:1; transition:1s; font-size: 20px; line-height: 20px; pointer-events: auto; }
.modal .button.close:hover, .achievement .button.close:hover { color:#fff; background:#d796e6; border-color:#cb6dfe; box-shadow: 0px 0px 4px #000, inset 0 2px 0 #f0d4ff;}
.achievement.locked .button.close {opacity:0;}

.achievements-list .button.close {display:none;}
#body .achievements-list .achievement {width: 210px; padding: 12px 60px 12px 90px;}
#body .achievements-list .ach-coins {top:0;}


#achievements-window .modal-box { width: 530px; height: 530px; }
#achievements-window .modal-body { height:400px;overflow:auto; }
#cards-window .modal-box { width: 1000px; height: 620px; }
#cards-window .modal-body { height: 75%; overflow:auto; }


.wowz-cards div {margin: 35px 20px 70px 20px;}
.wowz-cards div, .wowz-cards img, .wowz-cards img::before {width:152px;height:208px; position:relative; float:left;}
.wowz-cards div::before { position: absolute; top:-30px; left:-14px; z-index:10; }
.wowz-cards div.c0::before { content: url(../js/wowz-cards-game/assets/elements/card-common.png); }
.wowz-cards div.c1::before { content: url(../js/wowz-cards-game/assets/elements/card-rare.png); }
.wowz-cards div.c2::before { content: url(../js/wowz-cards-game/assets/elements/card-awesome.png); }
.wowz-cards div::after { content: attr(data-cuteness); background: url(../js/wowz-cards-game/assets/elements/bunny-cuteness.png); position:absolute; bottom:-27px; left:-20px; width:47px; height:50px; font-size: 16px;  line-height:65px; color:#fff; z-index:20; }
.wowz-cards div.locked { opacity:0.3 }

.wowz-cards a, .wowz-cards div::after {text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000; text-align:center; font-weight:bold; font-family: "Comic Sans MS";}
.wowz-cards a { position:absolute; top:235px; left:-10px; display:block; width:160px; padding:5px; border-bottom: 2px solid #0000001a; border-radius: 15px; text-transform: capitalize; font-size:13px; background: #00000026; color:#ffdaab;  }
.wowz-cards div.locked a {font-size:15px; }

/*ON OFF switch*/
.onoffswitch {
    position: relative; width: 70px; float: left; margin: 7px; margin-left:14px;}
.onoffswitch-checkbox {
    display: none;}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;border: 2px solid #8a6795; border-radius: 20px;}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;transition: margin 0.3s ease-in 0s;}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 24px; padding: 0; line-height: 24px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;box-sizing: border-box;}
.onoffswitch-inner:before {
    content: "ON"; padding-left: 10px; background-color: #19D172; color: #FFFFFF;}
.onoffswitch-inner:after {
    content: "OFF"; padding-right: 10px; background-color: #EEEEEE; color: #999999; text-align: right;}
.onoffswitch-switch {
    display: block; width: 18px; margin: 3px; background: #A1A1A1; position: absolute; top: 0; bottom: 0; right: 42px; border: 2px solid #EBEBEB; border-radius: 20px; transition: all 0.3s ease-in 0s; }
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; background-color: #367527; border: 2px solid #24e481;}