body,html { padding:0px; margin:0px; background:#f2f2f2; font-family: 'Montserrat', sans-serif; }
h1 { text-transform:capitalize; }
h2 { font-size:18px; margin-bottom:10px; }

#header2020{ position: fixed; top: 0; z-index:99; flex-direction: row; flex-wrap: wrap; width: -webkit-fill-available; display: flex; justify-content: space-between; align-items: center; background:#fff; box-shadow:0px 4px 10px rgba(0, 0, 0, 0.12); }
#header2020 .logo img { height: 50px; margin: 6px; margin-left: 22px; }
.header_giochionline { font-size:16px; color:#8851a9; }

.login { margin-right: 2%; color: #ffffff; border-radius: 20px; background: #27d525; font-size: 0.9em; }
.login a { color:#fff; text-decoration:none; display:block; padding: 8px 18px; border-radius: 20px;}
.login a:hover { background-color:#693; }

a:hover img { opacity: 0.8; transition: all 0.3s; }

.nodesktop { display:none; }
.onlymobile { display:none; }

#container { margin-top: 80px; display: grid; grid-gap: 10px; grid-template-columns: 320px minmax(200px, 1fr); }
#menu-left { min-width: 320px; }
#menu-left ul { list-style-type: none; margin: 0; padding: 0; font-size: 16px; border: none; padding: 16px; position: sticky; top: 66px; }
#menu-left ul li { line-height: 50px; border: none; display: block; margin: 0; }
#menu-left ul li a { padding: 0 15px;    display: block;    text-decoration: none;    color: #333; }
#menu-left ul li:hover {background: #e7e3e3; }
#menu-left ul li i { margin-right:16px; }
#menu-left ul li i {background: #fff;    width: 30px;    height: 30px;    border-radius: 50%;    text-align: center;    line-height: 30px;    vertical-align: middle;    padding: 4px; }
.menu-selected { background:#66C; color:white!important; }

#mainpage { margin-top: 12px; max-width: 1180px; width: 100%; margin-right: 20px;}

.tagslabel { background:#09F; color:#fff; font-size:14px; border-radius:20px; padding:3px 12px; display:inline-block; margin:2px 6px; text-decoration:none; width: auto; text-align:center; }
a:hover.tagslabel { background:#0CF; }

@media only screen and (max-width: 600px) { .swiper_tags .fa-fire { margin-left:6px; } .tagslabel { font-size:16px; } }

.circle_icon { background: #d8e1d7;    width: 30px;    height: 30px;    border-radius: 50%;    text-align: center;    line-height: 30px;    vertical-align: middle;    padding: 4px; }

/* nuovo gioco scheda top */
.btn_round { border-radius:20px; background:#000; padding:12px 40px; text-decoration:none; color:white; display: inline-block; margin-top:40px; }
.btn_round:hover { background:#660!important; }
.newtopgame { height:320px; overflow:hidden; position:relative; margin-top: 8px; }
.newtop_bg { filter: blur(8px); -webkit-filter: blur(8px); width:100%; height:100%; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.05); }
.newtop_front { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; z-index: 2; color:white; text-align:center; }
.newtop_front h2 { font-size: 2em; margin: 0px; color:#fff; }
.newtop_front a { text-decoration:none!important; }

.modal_login > div { position:fixed; z-index:99999; left: 50%; top: 50%; transform: translate(-50%, -50%); background:#fff; text-align:center; padding: 24px; font-size: 20px; border-radius: 20px;  box-shadow: 1px 5px 20px 0px rgba(0, 0, 0, 0.52); background: linear-gradient(135deg, rgba(226,226,226,1) 0%, rgba(255,255,255,1) 34%, rgba(235,235,235,1) 73%, rgba(254,254,254,1) 100%); width: 500px; }

@media only screen and (max-width: 700px) {
	.modal_login > div {  width: 70%; }
	.newtopgame { height:auto; margin: 10px; border-bottom: 1px solid #d5d5d5; padding-bottom: 16px; }
	.newtopgame h2 { font-size:1.2em; }
	.newtop_bg { background:none;} 
	.newtop_front { all: unset; }
	.newtop_front p { display:none; }
	.newtop_front img { border-radius:16px; float:none!important; margin:0px; width: 100%; height: auto;  }
	.newtop_front h2 { color: #06C; width: 60%; }
	.btn_round { float:right; margin-top: -40px; }
}


/* rating stars */
	.rating-box { position:relative; vertical-align: middle; font-size: 2em; font-family: 'Font Awesome\ 5 Free';
  display:inline-block; color: #dbdbdb;  font-weight: 900;
}
.rating-box:before{
    content: "\f005 \f005 \f005 \f005 \f005";
  }
.rating-box .rating { position: absolute; left:0; top:0; white-space:nowrap; overflow:hidden; color: orange;
  }
  .rating-box .rating:before {
      content: "\f005 \f005 \f005 \f005 \f005";
    }
	
.ratingsmall { font-size:1em; margin: 6px 0px; }

/* motore di ricerca */
.search { width: 300px; }
.searchbox { position:relative; }
.searchicon { position: absolute; z-index: 99; right: -32px; top: 14px; color: #959595;}
#categories-basic { background: #f2f2f2; border-radius: 20px; padding: 12px!important; font-size: 17px; }
#categories-basic:hover, #categories-basic:focus {     box-shadow: 0px -1px 13px rgba(140, 102, 255, 0.55); background: #fff; }

/* home - altre categorie - bottom */
.cerchio_grid { display: grid; grid-template-columns: repeat(9, 1fr); grid-gap: 12px; border-radius:12px; background-color:#656a98; padding:12px; }
.cerchio_box { padding:6px; text-align:center; background-color:#464a68; border-radius:10px; text-align:center; }
.cerchio_box_img { border-radius:14px; width:80px; height:80px; margin:6px auto; }
.cerchio_box a { display:block; color:#FFFFFF; font-size:11px; text-decoration:none; }
.cerchio_box a:hover { color:#FFCC00; }

/* The Dropdown Menu */
.dropbtn { border: none; cursor: pointer; }
.dropdown { position: relative; }
.dropdown-content {  position: absolute;  top: 0px; right:0px;  transition: all .3s ease; opacity: 0;  background-color: #f9f9f9;  min-width: 180px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1; }
.dropdown-content a { color: #747474;  padding: 12px 16px;  text-decoration: none;  display: block; }
.dropdown-content a:hover { background-color: #f1f1f1 }
.dropdown:hover .dropdown-content { display: block; opacity: 1; top: 35px; }
.dropdown:hover .dropbtn { background-color: #3e8e41; }

/* home - preferiti top */
.boxshadow { background-color: #FFFFFF; box-shadow: 0px 6px 13px rgba(102, 102, 102, 0.12); border-radius: 12px;  }
#preferiti_top { display: grid; grid-template-columns: repeat(9, 1fr); grid-column-gap: 1.4%; padding-bottom: 8px; }
.prbox {  padding: 8px; font-size: 13px; height: 130px;   margin-bottom: 6px; text-align: center; position:relative;     }
.prbox a { color:#000000; text-decoration:none; display:block; border-radius:12px; height: 100%; }
.prbox a img { border: 0px; width: 75px; height: 75px; border-radius: 3rem; object-fit: cover; margin-bottom: 10px; }
.prbox a:hover { color:#0099FF; background:#f2f2f2; }

/* paginazione */
#pagination { display: table; margin: 6px auto; }
#pagination a { display:inline-block; border-radius:5rem; background:#09F; text-align:center; color:#fff; padding:6px; text-decoration:none; margin: 0px 4px; margin-top: 34px; min-width: 16px; height: 16px; }
#pagination a:hover { background-color: #69C; }

@media only screen and (max-width: 900px) {#preferiti_top { margin-left:8px; } }

/* ultimi box grid */
.latest_box { overflow: hidden; margin:6px; }
.latest_grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 12px; }
.latest_box a { text-decoration:none; color:#000; }
.latest_box h3 { margin: 8px 0px; }
.latest_box .l_text { padding: 6px 12px; font-size:14px; }
.latest_box .tagslabel { color: #fff; font-size: 11px; margin:2px 2px;}
@media only screen and (max-width: 900px) { .latest_box { margin:16px; } }

/* latest games list */
.boxelenco { display:block; margin:8px 0px; }
.boxelenco img { float:left; margin-right:10px; }
.latestlist_grid { display: grid; grid-template-columns: auto 350px; grid-gap: 10px; }
.latest_list { padding:9px 0px 12px 6px; border-bottom:1px solid #CCC; height: 65px; }
.latest_list img { display: inline-block; float: left; margin-right: 10px; }
.latest_box p { color:#888; }
.latest_list .tag_piccolo a { color:#690; font-size:11px; }
.latest_list .l_text { padding:0px; }
.listtit { font-weight:600; font-size: 15px; }

@media only screen and (max-width: 700px) {
	.latest_grid { display: grid;    grid-template-columns: auto auto; grid-gap: 0px; }
	.latest_box { margin:8px; }
	.latest_box p {font-size:13px; margin: 6px 0px; color:#000; }
	.latest_box h3 { margin: -5px 0px 0px 0px; }
	.latest_box span { display:block; }
	.latest_box img { height: 130px!important; display: inline; object-fit: cover; }
}

/* giochi cloud bubble */
.giochi_cloud a { border: 1px solid #e3e3e3; border-radius: 4rem; padding: 6px 16px; display: inline-block;    font-size: 12px; color: #606a70; margin: 6px; }

@media only screen and (max-width: 600px) {	
.latestlist_grid { display: block; }
.latest_list { height: auto; }
.latest_list img { height:67px!important; }
}

/* giochi random e simili a */
#giochi_random { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 24px; }
.giochi_rand { padding: 12px; }
.giochi_rand a { text-decoration:none; color:#09F; }
.lista_gruppi { display:block; font-size:12px; color:#62a321!important; text-transform:capitalize; padding:4px 2px; border-bottom:1px solid #CCC; }

@media only screen and (max-width: 600px) {	
	#giochi_random { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 16px; margin: 12px;}
}

/* giochi in pillole */
#dascoprire ul { display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 16px;  list-style-type: none; margin: 0px; padding: 0px; font-size:11px; }
#dascoprire li { border: 1px solid #e8e8e8; border-radius: 10px; background: #fff; height: 45px; line-height: 45px;  text-transform:uppercase; overflow:hidden; text-align:center; }
.pill img { height: 45px; width: 45px; object-fit: cover; margin-right:2px; float:left;}
.pill a { color:#069; font-weight:600; text-decoration:none; display: block; }
.pill a:hover { background:#069; color:#fff;  }
.pill p { margin:0px; padding:0px; }
@media only screen and (max-width: 600px) {	
	#dascoprire ul { display: block; font-size:1.2em; margin:16px; }
	#dascoprire li { margin: 6px 0; }
}

/* footer */
footer { padding:12px 12px;padding-left: 2%; border-top:1px solid #CCC; font-size:13px; margin-top: 36px; }
footer a { color: #333; }
@media only screen and (max-width: 900px) {
	footer { text-align:center; }
}

@media only screen and (max-width: 1280px) {
	#container { grid-template-columns: 250px minmax(200px, 1fr); }
	#menu-left { min-width: 250px; }
	.cerchio_grid { grid-template-columns: repeat(6, 1fr); }
}



@media only screen and (max-width: 700px) {
	h1 { font-size:1.4em; text-align:center; }
	h2 { margin-left: 16px; }
	.onlymobile { display:block }
	.nomobile { display:none; }
	#container { grid-template-columns: 100%; }
	.cerchio_grid { grid-template-columns: repeat(3, 1fr); grid-gap: 6px; }
  .login { margin:12px; }
  .login a { color: #746c6c; background: #f2f2f2; padding: 12px 18px; border-radius:0px; }
  /* .latest_grid { display:block!important; } */
  #menu-left { display:none; width: 100%; height:100%; z-index: 999; position: fixed; overflow:scroll; background: #fff; top: 63px; border-top:1px solid #e7e7e7;  }
  #menu-left ul { padding:2px; top: 6px; width: -webkit-fill-available; position: relative; }
  #categories-basic { margin: 5px; }
  #container { margin-top: 64px; }
  #header2020 { box-shadow:none; }
  #header2020 .logo img { height: 44px; margin: 5px 0px; }
  .search, .header_giochionline { display:none; }
  .showmenu { display:inline-block; font-size: 2em;  margin: 0px 0px 0px 2px; padding: 8px; color: #a7b8e9;  vertical-align: super;}
  .searchicon { display:inline-block; position:inherit; right:0px; top:0px; padding: 8px; font-size: 1.4em; color: #bcbcbc; }
  .search { position: absolute; left: 43px; top: 8px; }
  .searchbox { position: initial; }
  .easy-autocomplete-container { width: 122%!important; margin-left: -39px!important; margin-top: 3px!important; }
  .easy-autocomplete { width:96%!important; }
}