@font-face {font-family:fpnf;src:url(images/fpnf.ttf)}
body{color:#3b4045;background-color:#f0f4f4;padding:0;margin:0;font-family:verdana,arial;font-size:15px;min-width:320px}
section{min-width:300px;max-width:1200px;margin:auto;padding:0 5px;display:block}
a{color:#fff;outline:0;text-decoration:none;border:none;-moz-transition:color 0.4s ease 0s;-webkit-transition:color 0.4s ease 0s;-o-transition:color 0.4s ease 0s;transition:color 0.4s ease 0s}

h1{color:#96a6a8;font-size:24px;}
h2{margin:10px 0 10px;color:#f35b05;font-size:20px;font-weight:normal;}
hr{clear:both;border:none;border-top:1px dashed #ddd}

/*--- header ---*/
header{-moz-box-shadow:1px 5px 5px 0 rgba(0,0,0,0.1);-webkit-box-shadow:1px 5px 5px 0 rgba(0,0,0,0.1);box-shadow:1px 5px 5px 0 rgba(0,0,0,0.1)}
header>section{background-color:#ff9c00;display:grid;height:120px;grid-template-columns:repeat(2,1fr);}
.logo{color:#fff;text-decoration:none;display:block;position:relative;width:200px;height:50px}
.logo:before{display:block;padding-top:10px;font-size:31px;font-family:fpnf;content:"FREEPLAYNOW.com"}

/*--- main menu ---*/
.secbar{height:91px;display:none;border-top:5px solid #f35b05;background-color:#3b4045;}

.mmnu{display:grid;grid-template-columns:repeat(9,1fr);}
.mmnu a{color:#ddd;font-size:15px;text-transform:uppercase;text-decoration:none;text-align:center;}
.mmnu a.on{color:#fff;background-color:#ff9c00;border-bottom:3px solid #fff}
.mmnu a:hover{color:#fff;border-bottom:3px solid #fff}
.mmnu a:before{height:70px;display:block;font-size:70px;font-family:fpnf;}

.mmnu .mnuindex:before, .inmowrap .mnuindex:before{content:"1"}
.mmnu .mnuaction:before, .inmowrap .mnuaction:before{content:"2"}
.mmnu .mnuracing:before, .inmowrap .mnuracing:before{content:"3"}
.mmnu .mnustrategy:before, .inmowrap .mnustrategy:before{content:"4"}
.mmnu .mnugirls:before, .inmowrap .mnugirls:before{content:"5"}
.mmnu .mnuadventure:before, .inmowrap .mnuadventure:before{content:"6"}
.mmnu .mnusports:before, .inmowrap .mnusports:before{content:"7"}
.mmnu .mnupuzzle:before, .inmowrap .mnupuzzle:before{content:"8"}
.mmnu .mnuarcade:before, .inmowrap .mnuarcade:before{content:"9"}

/*--- menu mobile ---*/
.mobbtn{visibility:hidden;justify-self:right;margin-top:5px;width:32px;height:35px;display:block}
.mobbtn:before{color:#fff;font-size:38px;font-family:fpnf;content:"C"}

#mnumob{display:none;top:0;left:-100%;width:100%;height:100%;float:left;position:fixed;z-index:999;-moz-transition: left 0.4s ease 0s;-webkit-transition: left 0.4s ease 0s;-o-transition: left 0.4s ease 0s;transition: left 0.4s ease 0s;min-width:320px}
#mnumob.on{left:0}
#mnumob.off{left:-100%}
.mowrap{box-sizing:border-box;background-color:#3b4045;padding:10px 15px;overflow:hidden;width:85%;position:relative;height:120%;-moz-box-shadow:5px 0 5px 0 rgba(0,0,0,0.2);-webkit-box-shadow:5px 0 5px 0 rgba(0,0,0,0.2);box-shadow:5px 0 5px 0 rgba(0,0,0,0.2);cursor:default}
.inmowrap{top:50px;height:-webkit-calc(100% - 50px);height:-moz-calc(100% - 50px);height:calc(100% - 50px);width:85%;overflow:hidden;position:absolute}

.inmowrap a:before{font-size:30px;font-family:fpnf;width:40px;display:inline-block;text-align:center}
.inmowrap{display:grid;grid-column:1/3;grid-auto-rows:42px;grid-gap:1px}
.inmowrap a{font-size:16px;text-transform:uppercase;color:#ccc;padding:4px 8px}
.inmowrap a:hover{background-color:#a6aeb5;color:#fff}
.inmowrap .on{color:#ccc;background-color:#7b8086}

/*--- searchbox ---*/
.srcbox{padding-top:8px;text-align:right}
.srcbox input{box-sizing:border-box;width:100%;color:#999;margin:0;padding:7px 30px 7px 10px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;border:none;font-size:16px;-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,0.05);-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,0.05);box-shadow:0 2px 5px 0 rgba(0,0,0,0.05)}
.srcbox input:focus{color:#000}
.srcbox button{position:relative;z-index:10;float:right;font-size:24px;cursor:pointer;font-family:fpnf;padding:5px;border:none;margin-left:-35px;background:none;color:#f35b05}
.srcbox button:before{content:"B";}

/*--- main ---*/
main{padding:20px 0 50px;min-height:600px}
main>section{display:grid;grid-template-columns:320px auto;grid-gap:10px}
.fulltop, .fullbottom{grid-column:1/3;}

.morelink{-moz-transition:background-color 0.4s ease 0s;-webkit-transition:background-color 0.4s ease 0s;-o-transition:background-color 0.4s ease 0s;transition:background-color 0.4s ease 0s;color:#f6f8f9;background-color:#ff9c00;display:block;text-align:center;width:200px;margin:auto;padding:10px;text-transform:uppercase;font-weight:normal;border-radius:25px;-webkit-border-radius:25px;-moz-border-radius:25px}
.morelink:hover{color:#fff;background-color:#3b4045}
.morelink:after{border:1px solid #f6f8f9;border-width:0 3px 3px 0;display:inline-block;padding:5px;content:"";transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);margin-left:15px;position:absolute;}

/*--- play ---*/
#movie{padding:40px 5px;text-align:center}
#rate a, #rate span{border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;color:#f4f6f7;text-transform:uppercase;background-color:#ff9c00;margin:10px 8px 10px 0;padding:5px 3px 0;text-align:center;display:inline-block}
#rate a:before, #rate span:before{display:inline-block;font-size:44px;font-family:fpnf;line-height:44px}
#rate a:hover, #rate .on{color:#fff;background-color:#3b4045}
#rate span{color:#999;background-color:#ccc}

.like:before{content:"G"}
.hate:before{content:"H"}

/*--- rating ---*/
.rt0, .rt1, .rt2, .rt3, .rt4, .rt5, .rt6, .rt7, .rt8, .rt9, .rt10{font-size:11px;font-family:fpnf;display:block}
.rt0:before,.rt1:before,.rt2:before,.rt3:before,.rt4:before,.rt5:before,.rt6:before,.rt7:before,.rt8:before,.rt9:before,.rt10:before{color:#dde1e1;display:inline-block;width:60px;content:"IIIII"}
.rt0:after,.rt1:after,.rt2:after,.rt3:after,.rt4:after,.rt5:after,.rt6:after,.rt7:after,.rt8:after,.rt9:after,.rt10:after{color:#9fa5ac;display:inline-block;width:60px;margin:0 0 0 -60px}
.rt0:after{content:""}.rt1:after{content:"J"}.rt2:after{content:"I"}.rt3:after{content:"IJ"}.rt4:after{content:"II"}.rt5:after{content:"IIJ"}.rt6:after{content:"III"}.rt7:after{content:"IIIJ"}.rt8:after{content:"IIII"}.rt9:after{content:"IIIIJ"}.rt10:after{content:"IIIII"}

/*--- game box ---*/
.gamebox{display:grid;grid-template-columns:repeat(7,1fr);grid-gap:12px;padding-bottom:20px}
.gtitle{height:20px;overflow:hidden;text-overflow:ellipsis;font-weight:500;display:block}
.gamebox a{color:#777;}
.gamebox a:hover{color:#f35b05;}
.gamebox img{border:3px solid #fff;border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;width:100%;height:auto;-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,0.2);box-shadow:0 2px 5px 0 rgba(0,0,0,0.2)}

/*--- pagination ---*/
.pagination{grid-column:1/7}
.pagination .info{clear:both;display:block;padding:25px 0}
.info em{font-weight:bold}
.pagination a,.pagination span span{color:#fff;background-color:#f35b05;font-weight:bold;cursor:pointer;border:2px solid #f35b05;padding:7px 10px;margin:2px;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px}
.pagination span span{color:#f35b05;background-color:#fff;font-weight:bold}
.pagination a:hover{color:#f35b05;background-color:#fff}

/*--- cat list ---*/
.catmenu{display:grid;grid-template-columns:repeat(8,1fr);margin:0 0 50px}
.catmenu a{color:#ecf0f1;display:block;margin:4px 0 4px 15px}
.catmenu a:hover,.catmenu .on{color:#fff;text-decoration:underline}
.catmenu h3{font-size:18px;font-weight:normal;text-transform:uppercase}
.catmenu h3 a{color:#ffcc00}

/*--- footer ---*/
footer{border-top:8px solid #f35b05;padding:10px 0;color:#f4f6f7;background-color:#3b4045;-moz-box-shadow:1px -5px 5px 0 rgba(0,0,0,0.1);-webkit-box-shadow:1px -5px 5px 0 rgba(0,0,0,0.1);box-shadow:1px -5px 5px 0 rgba(0,0,0,0.1)}
.cmnu{padding:10px 0 20px}
.cmnu a{color:#ffcc00;padding:0;height:20px;margin:0 5px}
.cmnu a.on{color:#fff;text-decoration:underline}
.cmnu a:hover{color:#fff;text-decoration:underline}

footer hr{border:1px solid #303438;-moz-box-shadow:0 3px 5px 0 rgba(0,0,0,0.1);-webkit-box-shadow:0 3px 5px 0 rgba(0,0,0,0.1);box-shadow:0 3px 5px 0 rgba(0,0,0,0.1)}
.desktop1000{visibility:hidden}

@media(max-width:1080px){.gamebox{grid-template-columns:repeat(6,1fr)}.main .gamebox{grid-template-columns:repeat(7,1fr)}}
@media(max-width:1020px){.main .gamebox{grid-template-columns:repeat(5,1fr)}}
@media(max-width:960px){.catmenu{grid-template-columns:repeat(4,1fr)}.gamewrap{position:relative;padding-bottom:100%;padding-top:0px;height:0 !important;margin:0;width:inherit !important}.gamewrap iframe{position:absolute;top:0;left:0;width:100% !important;height:100% !important;}.gamebox{grid-template-columns:repeat(5,1fr)}.main .gamebox{grid-template-columns:repeat(4,1fr)}}
@media(max-width:768px){.mobbtn{visibility:visible}#mnumob{display:block}.main .gamebox{grid-template-columns:repeat(3,1fr)}.gamebox{grid-template-columns:repeat(4,1fr)}.srcbox{grid-column:1/3}}
@media(max-width:720px){.main .gamebox{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){aside{text-align:center}.fulltop,.fullbottom{grid-column:1}main>section{grid-template-columns:1fr}.catmenu{grid-template-columns:repeat(2,1fr)}.gamebox{grid-template-columns:repeat(3,1fr)}.main .gamebox{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.gamebox{grid-template-columns:repeat(2,1fr)}.main .gamebox{grid-template-columns:repeat(2,1fr)}}
@media(min-width:769px){.secbar{display:block}header>section{background:none;height:50px;grid-template-columns:repeat(3,1fr);}.logo{color:#3b4045}.logo:hover{color:#555;}}
@media(min-width:1000px){.desktop1000{visibility:visible}}