@charset "utf-8";
/* CSS Document */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    background:transparent;
}

article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { 
    display:block;
}

html {height:100%;}
html * {font-family: 'Rubik', Arial, Helvetica, sans-serif;}
body {	min-height: 100%;    line-height:1;	font-weight:normal;	overflow-x:hidden; }
ul, ol {list-style:none}
.spacer {margin-top:10px}
.left {float:left; display:block}
.right {float:right; display:block}
.notxt { color: transparent !important; font: 0/0 a !important; text-decoration: none !important; }
.clear {clear:both}
.hide {display:none;}
.desktop .mobile-only {display:none!important;}
.mobile .desktop-only {display:none!important;}
.website-fader {height: 100%; width: 100%; top: 0; left: 0; position:fixed; z-index:9997; opacity:0; pointer-events: none; background-color: rgba(0, 0, 0, 0.3); transition: .3s ease-in-out;}
.website-fader.visible{ opacity:1; pointer-events: auto; }

/*_____headers_______*/
.desktop.play #page {padding-bottom:60px;}
.classic #page {width:1000px; margin:auto; padding-top:10px;}

.desktop.masonry header, .mobile #search {  height:36px; padding: 10px; box-shadow: 0px 0px 4px 0px #000; width:100%; background:#c34d86 linear-gradient(#c34d86, #ff5bae); }
.desktop.masonry header {min-width:1024px;}
.classic header{ position:relative; z-index:9999; }
.masonry header {position:fixed; top:0; z-index:9999; width: 100%;}


#logo-top {width:100%; z-index:2; }
#logo-top a, #logo-top img {display:block; width:250px; margin:auto; transition:.5s; position:relative; }
#logo-top img { position:absolute; }
#menu-top {transition:.5s; display: inline-block; margin: 2px 0 0 23%;}
@media (max-width:1250px) { #menu-top{opacity:0; pointer-events:none;} }
.scrolled #menu-top {margin-top:-50px;}
.desktop.masonry.list #logo-top a, .desktop.masonry.list #logo-top img, .scrolled #menu-top {opacity:0; pointer-events:none;}
.desktop.masonry.list .scrolled #logo-top a, .desktop.masonry.list .scrolled #logo-top img {opacity:1; pointer-events:auto;}

.desktop #b-back-header {float:left; margin-left:10px; z-index: 9998;}

/*dropdown menu*/
.desktop .menu {float:left; margin-left:5px; transition: 1s;}
.menu ul  {width:404px; background: #eeeeee linear-gradient(180deg, white 0%, #eeeeee 10%, #eeeeee 100%); display:none; position:absolute; z-index:9999; border:2px solid #febc5c; border-top:0px; border-radius:10px; border-top-left-radius:0px; padding:10px 0;  column-gap:0px; box-shadow: 0px 4px 5px 0px #00000090;}
.desktop header .menu ul{column-count:2;}
.menu ul a {color:#d62586; background:#fff; font-size:15px; font-weight:normal; text-decoration:none; display:block; float:left; width:194px; height:30px; line-height:30px; margin: 3px 0 0px 4px; border-radius: 10px; overflow:hidden;}
.menu li a.ico svg { margin-left:8px; margin-right:9px;}
.menu a.ico:hover svg, .menu a.active svg { fill:#fff!important;}
#menu1 a img {vertical-align:middle; margin-left:5px; margin-right:7px; }
.menu-title {display:block; position: relative; cursor:default; }
header .menu-title {z-index:9999;}

.desktop header .menu:hover ul {display:block;}
.desktop header .menu:hover .menu-title {color:#1a8a85; background:#fff; border-bottom-left-radius:0px; border-bottom-right-radius:0px; border-bottom-width:0px;}
.menu a:hover, .menu a.active {background-color:#d45190;color:#fff;}

#body.fader { opacity: .7; pointer-events: none;}
#body .menu-title {font-size: 17px; color: #1a8a85; padding: 20px 10px 10px 10px;}
.play #body .menu-title {display:none;}
.desktop #body .menu {float:left; margin:0 2px; background:none;}
.desktop #body .menu ul {display:block; width: 168px; border:0; box-shadow:none; background: #eeeeee; padding: 2px 0 4px 0; z-index:99;}
.desktop #body .menu ul a {width: 160px;}
.desktop.home .menu { margin-left:10px; }

/*search bar*/
.desktop #search {float:right; width: 255px; display:block; position:relative; z-index:9999; margin-right:5px}
.masonry #search {margin-right: 25px;}
#search input[type=text] {
width:110px; height:22px; line-height:22px; font-size:16px; color:#1a8a85; display:block; padding:5px; float:left;
border-top-left-radius: 10px; border-bottom-left-radius: 10px;
border:2px solid #febc5c; border-top-width:1px; border-bottom-width:3px; box-shadow:0px 0px 3px #333, inset 0 2px 0 #fff7d2;
}
#search button {
width:36px; height:36px; padding:0; display:block;
border-top-right-radius: 10px; border-bottom-right-radius: 10px;
border:2px solid #febc5c; border-top-width:1px; border-bottom-width:3px;
background:#f9f4cc linear-gradient(#e9e4bf,#f9f4cc); box-shadow:0px 0px 3px #333, inset 0 2px 0 #fff7d2;
float:left; cursor:pointer; margin-right:5px; font-size:16px; line-height: 1.9em;
}


.pagination {padding: 45px 0px; text-align:center; clear:both;}
/* button + top menu*/
.button, .pagination a, .pagination b {display:inline-block; text-decoration:none; padding: 7px 10px; margin:0 5px 0 5px;  font-size: 16px; color:#1a8a85; border:2px solid #febc5c; border-top-width:1px; border-bottom-width:3px; border-radius:10px; background:#f9f4cc linear-gradient(#e9e4bf,#f9f4cc); box-shadow:0px 0px 3px #333, inset 0 2px 0 #fff7d2; min-width: 10px; cursor:pointer; white-space: nowrap; }
.desktop .button.ico {padding:0px 10px; line-height: 1.9em;}
.button.square.ico { padding: 4px 4px 3px 4px; line-height:1em;}
.button.menu-title {margin:0;}
.button.active, .button:hover, .pagination a:hover, .pagination b, #search button:hover {color:#920a4c; border-color:#c34d85; background:#e9bed3 linear-gradient(#e9bed3,#fdcfe6); box-shadow:0px 0px 3px #333, inset 0 2px 0 #ffd1e8;}
.button.menu-title:hover {border-color:#febc5c;}

/* boys colors for menu */
.boys .button.active, .boys .button, .boys .pagination a,  .boys .pagination b, .boys #search button, .boys #search input[type=text], .boys.desktop header .menu:hover .menu-title {color:#006cc2;}
.boys .button.active, .boys .button:hover, .boys .pagination a:hover,  .boys .pagination b, .boys #search button:hover { border-color:#4d8ec3; background:#c0d8ea linear-gradient(#c0d8ea,#cfeafd); box-shadow:0px 0px 3px #333, inset 0 2px 0 #d1ecff;}
.boys .menu ul a:hover, .boys .menu a:hover, .boys .menu a.active {background-color:#0a7aaa; color:#fff;}
.boys .menu ul a {color:#0a7aaa; border-color:#c6dcfe;}

/* button icons */
.button svg, .ico svg, .ico img {display:inline-block; height:1.4em; fill:#1a8a85; /*#c64488;*/ top: .29em; position: relative;}
.button.square.ico svg {top: .13em;}
.desktop .button.text.ico svg {margin-right: .2em;}
.girls .button:hover svg, .girls .button.active svg, .girls .ico:hover svg {fill:#d62585;}
.boys .button svg, .boys .ico svg {fill:#006cc2;}
.boys .button:hover svg, .boys .button.active svg, .boys .ico:hover svg {fill:#006cc2;}

.menu-extra { text-shadow: 0px 0px 3px #000; height: 30px; }
.menu-extra li {display: inline-block;}
.menu-extra a { color:#fff; font-size:16px; text-decoration:none; height:30px; padding: 5px 10px; margin:3px 7px;}
.menu-extra a:hover, .menu-extra a.active, .menu-extra:hover a.active:hover {border-radius: 15px; border:2px solid #ffffffbd; background-color: #46464633; margin:1px 5px;}
.menu-extra:hover a.active {border:0;  margin:3px 7px;}
.menu-extra svg {fill:#fff!important; -webkit-filter: drop-shadow( 0 0 2px rgba(0, 0, 0, .7)); filter: drop-shadow( 0 0 2px rgba(0, 0, 0, .7)); }


#search-result {display:none; background:#fff;width:300px; position:absolute; top: 45px; right: 10px;
				border:3px solid #fff; border-radius: 5px; padding:5px; box-shadow: 0px 0px 4px 0px #000; z-index:9999;}
#search-result a {border-radius:5px;}

.sidelist-thumb-text img {float:left; margin-right:5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.sidelist-thumb-text a { display:block; float: left; height:60px; width:100%; text-decoration:none; font-size: 14px; background-color: rgba(255,255,255,.7); color:#c03680; margin-bottom:3px; line-height:60px; border-bottom:1px solid #f9f9f9; overflow:hidden;}
.sidelist-thumb-text a img {height:100%; margin-right:10px;}
.sidelist-thumb-text a:hover, .sidelist-thumb-text .title { background-color:#e06aa3; color:#fff;}
.sidelist-thumb-text .title {padding:4px; margin-bottom: 3px; border-radius: 5px;}
.sidelist-thumb-text .title {background:#c03680;}
.sidelist-thumb-text .more-games {display:block; margin-top:8px; text-align: center; width: 100%; line-height:40px; height:38px; text-decoration:underline;}
.sidelist-thumb-text .more-games:hover {text-decoration:none;}

.classic.list #body .sidelist-thumb-text {width:168px;float:left; margin-left:10px;font-weight:normal;}
.masonry.list #body .sidelist-thumb-text {position:absolute; top: 159px; left:0px; width:184px; height: 457px; margin:10px; overflow:hidden; font-weight:normal; }
.masonry.list #body .sidelist-thumb-text .menu-title {display:none;}
.play #body .sidelist-thumb-text {width:100%;margin-top:10px;}
.play #body .sidelist-thumb-text a {width:30.5%; float:left; margin:0.5% 1%; }
.play #body .sidelist-thumb-text ul {margin-top:10px;}
#body .sidelist-thumb-text a {height:40px; line-height:40px; border:2px solid #fec6e3; border-radius: 10px;}
.masonry.list #body .sidelist-thumb-text a {display: flex; align-items: center; width:180px; height:28px; margin: 3px 0; line-height: 14px; }
#body .sidelist-thumb-text a img {opacity: 0.8;}
#body .sidelist-thumb-text a:hover img {opacity: 1;}

.boys .sidelist-thumb-text a {color:#0a7aaa; border-color:#c6dcfe;}
.boys #body .sidelist-thumb-text a { border: 2px solid #b9dfff; border-radius: 5px;}
.boys .sidelist-thumb-text a:hover, .boys .sidelist-thumb-text .title { background-color:#0a7aaa; color:#fff;}

.desktop.masonry.list #body {padding-top: 70px;}
.classic.list #body, .desktop.play #body { background:white; position:relative;}
.desktop.play #body {width: 956px;}

/*game list*/
#game-list, .masonry #game-list-main { margin:auto; position:relative; min-height: 400px; }
.desktop.masonry #game-list { padding: 20px;}
.classic #game-list{width:820px; float:right; margin-bottom:30px;}

.desktop #game-list #logo {display:block; position:relative; width: 388px;  height: 139px; margin: 10px; top: 10px; text-decoration: none;}

.classic #game-list h1 {padding: 20px 10px 10px 10px;}
h1, h1 a{ color: #E765A3;  font-size: 21px; font-weight: normal; height: 30px; position: relative; }
.girls h1 a:hover {color:#d62586;}
.boys h1 a:hover {color:#000;}
h1 img {margin-right:10px;vertical-align: bottom; max-height:1.2em;}
#game-list-main {position:relative;}

.desktop.masonry #game-list h1{ color: #fff;  text-decoration: none; text-align:center; font-size:28px; text-shadow: 1px 1px 3px black;}

.desktop .thumb
{
	color:#000;
	line-height:20px;
	text-align:center;
	display:block;
	font-size:14px;
	text-decoration:none;
	float:left;
	margin:10px;
	position:relative;
	width:180px; height:135px; border-radius:6px; -webkit-border-radius:6px; border:2px solid #ffb4d9; box-shadow: 2px 2px 7px -3px #1F1F1F; overflow:hidden;
	background: #fff url(../images/loading-image.gif) 50% 50% no-repeat;
}

.desktop .thumb.small {font-size:10px; margin:7.5px; border-width:1px;}

.desktop .thumb .game-name {display:block; width:94%; position:absolute; left:0px; bottom:0px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 90%);  font-weight:normal; font-size:13px; line-height: 16px; text-shadow: 0px 0px 3px #000; opacity:0; transition: .3s ease-in-out; z-index:3; padding:10px 3%; pointer-events: none;}
.desktop .thumb img {width:180px; height:135px; transition: .2s ease-in-out;}
.desktop .thumb video {display:none; width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; /*background: #000 url(../images/loading-video.gif) 50% 50% no-repeat; background-size:50%;*/ opacity:0; border-radius:6px; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px;}
/*.desktop .thumb.x2 video {background-size:100%;}*/
.desktop .thumb.x2,  .desktop .thumb.x2 img, .desktop .thumb.x2 video { width: 384px; height: 294px; }
.desktop .thumb.small, .desktop .thumb.small img {width:117px;height:88px; transition: .2s ease-in-out;}

.desktop .thumb:hover .game-name {opacity:1;color:#fff;}
.girls.desktop .thumb:hover {border-color:#d62586 !important;}
.boys.desktop .thumb:hover {border-color:#000;}
.desktop .thumb:hover img {width:120%; height:120%; margin-top:-10%; margin-left:-10%; -webkit-filter: contrast(115%); filter: contrast(115%);}
.desktop .thumb:hover video {display:block; opacity:1;}

a.new {border-color:#fd359b!important;}
a.premium {border-color:#ffff00!important;} 
a .badge {display:block; position:absolute; top: 0; right: 5px; z-index:4; background:#fff url('../images/badge-popular.png') no-repeat 50% 50%; background-size: 70%; width:34px;height:34px; box-shadow: 0px 2px 11px 0px #000;  pointer-events: none; transition: .3s ease-in-out;}
a .badge:after { content: ""; position: absolute;left: 0;bottom: -6px;width: 0;height: 0; border-top: 6px solid #fff; border-left: 17px solid transparent; border-right: 17px solid transparent; }
a.new .badge {background-image:url('../images/badge-new.png');}
a.recently-played .badge {background-image: url('../images/badge-recently-played.png');}
.desktop .thumb.small .badge {width:24px;height:24px; top: -3px; right: -3px; }
.desktop .thumb.small .badge:after { bottom: -4px; border-top: 4px solid #fff; border-left: 12px solid transparent; border-right: 12px solid transparent;}
.desktop .thumb:hover .badge {top:-40px; opacity: 0;}

.tag0, .tag1, .tag2 {font-size: 10px; margin: 5px 0; white-space: nowrap; font-weight:normal;}
.tag0 {color:#A6F752;}
.tag1 {color:#32D7FF;}
.tag2 {color:#ED86BB;}

.tg {display:inline-block; padding:3px 10px; margin:2px; border-radius:10px; color:#fff; background-color:#e57cb0; font-size:11px;}
.tg:hover {color:#fff;}
.boys .tg {background-color:#364b6a;}


.page-text {    margin: 60px auto; font-size:14px; clear:both;}
.desktop .page-text {width: 900px;}
.page-text-bg {border-top: 3px solid #c0c0c0;clear:both;padding:20px; font-size:14px; background:#fff;}
.page-text-bg .page-text {margin:auto;height:120px;overflow:auto;}
.page-text-center {padding:100px; font-size:14px; background:#fff; text-align:center;}
.page-text-center h2{ color: #d62586; font-size: 18px; line-height: 34px;}

/* Footer______________________________*/
#footer { margin:auto; line-height: 18px; text-align:center; overflow: hidden; background:#fff; position:relative;}
#footer, #footer a {color:#d62586; font-size:14px; text-decoration:none;}
.play #footer {border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
#footer a:hover {text-decoration:underline}
/*.masonry.play #footer {width:956px; padding:10px 0; margin-left:60px;}*/
.masonry.play #footer { width: 90%; padding: 10px 5%; position: absolute;}
#footer a.variation {color:#900049;}

/* Banner placeholders______________________________*/
.adlabel{position:absolute;right:0;top:-20px; padding:0 5px 0 5px; font-size:11px;color:#999;}

.ad728x90, .ad728x90 iframe{width:728px; height:90px; margin: auto; position:relative; z-index:99;}
.adRectangleEx-w {float:left; width:336px; height:280px; margin:14px 0px 12px 28px; text-align:center;}
.adRectangleEx {display:inline-block;vertical-align:middle;}
.adSkyscraperEx-w{position: absolute;right: -134px;top: -60px;}
.adSkyscraperEx{ display:none; z-index:99; border:4px solid white; background: #fff; position:absolute; border-radius: 5px;}
.list .adSkyscraperEx{display: inline-block; left: 780px;top: 35px;}
.adLeaderboardEx-w {width:970px; clear:both; margin:40px auto 85px auto; text-align:center;}
.list .adLeaderboardEx-w {margin-top:20px; margin-bottom:20px; clear:both;}
.adLeaderboardEx {display:inline-block; background:#fff; border:4px solid #fff; border-radius: 5px;}

.play-sky-left {visibility:hidden;left:-302px;top:10px;}