/*===========================*\
  PokémonFanGames v2.0
  Author: KleinStudio
\*===========================*/
html { height: 100%; image-rendering: -webkit-optimize-contrast; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale }
body { background: #fbfbfb; width: 100%; font-family: 'Roboto', sans-serif !important; font-weight: 300; font-size: 16px; color: #333; position: relative; min-height: 100%; display: flex; flex-flow: column; flex-grow: 1 }
*, ::before, ::after { box-sizing: border-box }
a { color: inherit; text-decoration: none }
form { margin: 0 }
b, strong { font-weight: 500 }
h1, h2, h3, h4, h5, h6 { display: inline-block; width: 100%; font-size: inherit; font-weight: inherit; margin: 0 }
ul, ol, li { list-style: none; padding: 0; margin: 0 }
input, button { border-radius: 0; -moz-appearance: none !important; -webkit-appearance: none !important; padding: 0; margin: 0; box-shadow: none; border: 0; background: transparent; font: inherit }
input:focus, button:focus { outline: 0 }
input::-webkit-input-placeholder { color: #969696 }
input:-moz-placeholder { color: #969696; opacity: 1 }
input::-moz-placeholder { color: #969696; opacity: 1 }
input:-ms-input-placeholder { color: #969696 }
input::-ms-input-placeholder { color: #969696 }
h1 { font-size: 24px }
h2 { font-size: 21px }
h3 { font-size: 18px }

article a { color: #0366d6 }
article a:hover { text-decoration: underline }
article h3 { font-size: 16px; font-weight: 500 }
article code { overflow-x: auto; max-width: 700px; width: 100%; display: inline-block; }
article img { max-width: 100% }
article > section { margin-top: 21px }

/*===========================*\
  Global
\*===========================*/
/* Spacers */
.pfgSpacer_both { margin: 21px 0 }
.pfgSpacer_bottom { margin-bottom: 21px }
.pfgSpacer_top { margin-top: 21px }
.pfgSpacer_both_small { margin: 14px 0 }
.pfgSpacer_bottom_small { margin-bottom: 14px }
.pfgSpacer_top_small { margin-top: 14px }
.pfgSpacer_both_tiny { margin: 7px 0 }
.pfgSpacer_bottom_tiny { margin-bottom: 7px }
.pfgSpacer_top_tiny { margin-top: 7px }

/* Text */
.pfgText_small { font-size: 14px }
.pfgText_gray { color: #969696 }
.pfgText_purple { color: #8e44ad }
.pfgText_uppercase { text-transform: uppercase }
.pfgText_heavy { line-height: 1.4 }
.pfgText_right { text-align: right }
.pfgText_center { text-align: center }
.pfgText_nowrap { white-space: nowrap }
.pfgText_spacer > li:not(:empty):not(:last-child) { margin-bottom: 4px }

/* Search Bar */
.pfgSearchBar { display: inline-flex; border: 1px solid #eaeaea; border-radius: 3px; padding-right: 14px; width: 100%; background: #FFF }
.pfgSearchBar input[type=search] { padding: 14px; width: 0; flex: 1 auto }
.pfgSearchBar button { cursor: pointer; margin-left: 7px }
.pfgSearchBar .fa-icon { color: #969696; }

/* Nav */
.pfgNav { line-height: 21px; color: #969696 }
.pfgNav a { color: inherit }
.pfgNav a:after { content: '\f105'; font-family: 'fa'; margin: 0 6px }
.pfgNav span { opacity: 0.5 }
.pfgNav *:first-child:before { content: '\f015'; font-family: 'fa'; margin-right: 4px; }

/* Flex */
.pfgFlex { display: flex }
.pfgFlex.pfgFlex_align { align-items: center }
.pfgFlex .pfgFlex_main { flex: 1 }

/* Responsive filters icons */
.pfgResponsiveFilters { font-size: 18px; display: flex; justify-content: flex-end }
.pfgResponsiveFilters span { cursor: pointer }
.pfgResponsiveFilters > div:not(:last-child) { margin-right: 10px }

/* Filtros */
.pfgFilters ul { margin-bottom: 14px }
.pfgFilters ul > div:not(:last-child) { margin-bottom: 7px }
.pfgFilters .button.gray { margin-top: 14px }

/* Elementos extra */
.pfgUnexpanded { transition: max-height .1s linear; max-height: 0; margin-bottom: 0; overflow: hidden } 

/* Sidemenu */
.pfgSideMenu a { font-size: 18px; color: #969696; display: block; border-left: 7px solid transparent; padding-left: 14px; padding-top: 14px; padding-bottom: 14px }
.pfgSideMenu a.active { color: #333; border-left-color: #8e44ad }

/* BBCodes */
.bb_list { display: inline-block; width: 100%; margin: 0; padding: 0; list-style-position: outside; margin-left: 35px }
ul.bb_list { list-style-type: disc }
ol.bb_list { list-style-type: decimal } 
.bb_list li { margin: 0; padding: 0; list-style: inherit } 
.bb_list li:not(:last-child) { margin-bottom: 4px } 

/* Wrapper */
.wrapper { width: 100%; max-width: 1130px; padding: 0 21px; margin: 0 auto }

/* Games showcase */
.game-showcase { display: flex; flex-wrap: wrap; margin: -14px -10px }
.game-showcase > li { width: 33.3%; padding: 14px 10px } 
.game-showcase img { width: 100%; display: block; margin-bottom: 21px; border-radius: 2px }

/* Pagination */
.pagination { text-align: center }
.pagination .page-number { margin: 4px; display: inline-block; font-weight: 500; border-radius: 40px; padding: 11px 15px 9px; line-height: 18px; text-align: center; min-width: 40px; height: 40px; background: #f0f0f0 }
.pagination a.page-number { transition: background .2s, color .2s; color: inherit }
.pagination .page-number.prev:before { font-family: 'fa'; content: "\f104" }
.pagination .page-number.next:before { font-family: 'fa'; content: "\f105" }
.pagination span.page-number, 
.pagination a.page-number:hover { background: #8e44ad; color: #FFF }

/* Share */
.share { margin-right: 8px; display: inline-block; border-radius: 40px; line-height: 40px; text-align: center; min-width: 40px; height: 40px; color: #FFF !important }
.share.twitter { background: #00aced }
.share.twitter:before { font-family: 'fa'; content: "\f099" }
.share.facebook { background: #3b5998 }
.share.facebook:before { font-family: 'fa'; content: "\f09a" }
.share.google { background: #d9534f }
.share.google:before { font-family: 'fa'; content: "\f0d5" }

/* Boxes */
.box { background: white; border: 1px solid #eaeaea; padding: 28px; border-radius: 2px; margin-right: auto; margin-left: auto } 
.alert-box { text-align: left; margin-bottom: 14px; background: #f0f0f0; color: #969696; padding: 14px; border-radius: 3px }
.pfgAdblock { border: 1px solid #eaeaea; padding: 21px; border-radius: 2px; color: #969696; display: flex; align-items: center; justify-content: center; line-height: 1.5; text-align: center; }


/*===========================*\
  Tablas
\*===========================*/
.pfgTable > li { display: flex; }
.pfgTable.pfgTable_align > li { align-items: center }
.pfgTable.pfgTable_border > li:not(:last-child) { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #eaeaea; }
.pfgTable.pfgTable_margin > li > div:not(:last-child) { margin-right: 7px }
.pfgTable .pfgTable_main { flex: 1 }
.pfgTable .pfgTable_readIcon { position: relative; width: 42px; height: 42px; border-radius: 50%; color: #8e44ad; border: 1px solid #8e44ad; margin-right: 14px !important }
.pfgTable .pfgTable_readIcon:before { position: absolute; font-family: 'fa'; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); content: '\f06e';  }
.pfgTable .pfgTable_readIcon.readed { opacity: 0.4  }
.pfgTable .pfgTable_readIcon.readed:before { content: '\f070' }
.pfgTable .pfgTable_StarsDate .fa-icon.puzle:not(.pfgText_purple) { color: #f0f0f0 }
.pfgTable .pfgTable_StarsDate .fa-icon.puzle:not(:last-child) { margin-right: 2px }

/*===========================*\
  Elementos
\*===========================*/
/* Button */
.button { width: 100%; cursor: pointer; display: inline-block; padding: 0 20px; font-weight: 500; border-radius: 40px; line-height: 40px; text-align: center; min-width: 40px; height: 40px; background: #8e44ad; color: #FFF !important }
.button.gray { background: #f0f0f0; color: inherit !important }

/* Radio Buttons */
.radio-button { display: block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
.radio-button input[type="radio"] { display: none }
.radio-button input[type="radio"] + label { min-height: 20px; position:relative; cursor: pointer; display: inline-block; vertical-align: top; padding-left: 28px }
.radio-button input[type="radio"] + label:before { content: ''; position:absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 10px; border: 1px solid #eaeaea }
.radio-button input[type="radio"] + label:after { content: ''; transition: transform 0.2s ease; transform: scale(0); position:absolute; left: 5px; top: 5px; width: 10px; height: 10px; border-radius: 5px; background: #8e44ad }
.radio-button input[type="radio"]:checked + label:after { transform: scale(1) }

/* Check Buttons */
.checkbox { display: block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
.checkbox input[type="checkbox"] { display: none }
.checkbox input[type="checkbox"] + label { min-height: 20px; position:relative; cursor: pointer; display: inline-block; vertical-align: top; padding-left: 28px }
.checkbox input[type="checkbox"] + label:before { content: ''; position:absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 3px; border: 1px solid #eaeaea }
.checkbox input[type="checkbox"] + label:after { content: ''; transition: transform 0.2s ease; transform: scale(0); position:absolute; left: 5px; top: 5px; width: 10px; height: 10px; border-radius: 2px; background: #8e44ad }
.checkbox input[type="checkbox"]:checked + label:after { transform: scale(1) }

/*==========================================*\
  Iconos
\*==========================================*/
.fa-icon { display: inline-block; }
.fa-icon:after { font-family: 'fa' }
.fa-icon.arrow-right:after { content: '\f105' }
.fa-icon.arrow-left:after { content: '\f104' }
.fa-icon.darrow-right:after { content: '\f101' }
.fa-icon.darrow-left:after { content: '\f100' }
.fa-icon.search:after { content: '\f002' }
.fa-icon.menu:after { content: '\f0c9' }
.fa-icon.filter:after { content: '\f0b0' }
.fa-icon.puzle:after { content: '\f12e' }
.fa-icon.gamepad:after { content: '\f11b' }
.fa-icon.book:after { content: '\f02d' }
.fa-icon.archive:after { content: '\f187' }

/*===========================*\
  Header
\*===========================*/
#header { height: 80px; background: #FFF; white-space: nowrap; border-bottom: 1px solid #eaeaea }
#header .wrapper { display: flex; align-items: center; height: inherit; }
#header .logo img { display: block; height: 40px }
#header .fa-icon { cursor: pointer; color: #969696; }
#header .fa-icon.menu { font-size: 24px; color: #8e44ad }  

/* Links a las secciones */
#header .links { font-size: 16px; flex: 1; justify-content: flex-end; display: flex; }
#header .links a { color: #969696; transition: color .2s; line-height: 80px; position: relative }
#header .links a:not(:last-child) { margin-right: 21px;}

#header .links a.active, #header .links a:hover { color: #333 }
#header .links a.active:after { content: ''; display: block; position: absolute; left: 0; bottom: 0; border-bottom: 2px solid #8e44ad; right: 0;}

/*===========================*\
  Main
\*===========================*/
main { flex: 1; overflow: hidden  }

/* Layout */
.pfgLayout { display: flex }
.pfgLayout .pfgMain { flex: 1 }
.pfgLayout .pfgSide { width: 100%; max-width:300px; margin-left: 42px }
.pfgLayout .pfgSide > li:not(:last-child) { margin-bottom: 28px }

/*===========================*\
  Footer
\*===========================*/
#footer { font-size: 14px }
#footer .container { border-top: 1px solid #eaeaea; padding: 21px 0 }

/*===========================*\
  PFG Gallery & Visor
\*===========================*/
.pfgGallery { display: flex; flex-wrap: wrap; margin: -7px }
.pfgGallery > li { width: 25%; padding: 7px }
.pfgGallery .pfgGallery_photo { cursor: zoom-in; background-size: cover; background-position: 50%; padding-top: 100%; }

#pfgVisor { display: none; color: #FFF; background: rgba(0, 0, 0, 0.8); touch-action: none; position: fixed; left: 0; top: 0; height: 100%; width: 100%; }
#pfgVisor .pfgVisor_image { cursor: zoom-out; display: flex; justify-content: center; align-items: center; height: inherit }
#pfgVisor .pfgVisor_image img { max-height: 100%; max-width: 100%; display: block; margin: 0 auto }

/*==========================================*\
  File
\*==========================================*/
#file .box { text-align: center }
#file .captcha { margin-top: 14px }
#file .captcha ul { display: block; margin-bottom: 28px }
#file .captcha li { text-align: center; display: inline-block }
#file .captcha img { cursor: pointer; display: block; margin-bottom: 7px }
#file .captcha .radio-button input[type="radio"] + label { padding-left: 20px }
#file .button { max-width: 300px }

/*==========================================*\
  Gamepage 
\*==========================================*/
#game .button:not(:last-child) { margin-bottom: 14px }
#game .pfgTable > li > div { width: 50% }

/*==========================================*\
  Side Menu
\*==========================================*/
#side-menu { display: none }
#dark-bg { display: none; opacity: 0 }

/*==========================================*\
  Contenido para tablets
\*==========================================*/
@media (min-width: 961px) { 
  .pfgShow_tablet { display: none !important } 

  /* Ads */
  .adsSpace_1 { width: 300px; height: 250px }
  .adsSpace_2 { display: none }
}

@media ( max-width: 960px ) { 
   .pfgHide_tablet { display: none !important }

  /* Ads */
  .adsSpace_1 { display: none }
  .adsSpace_2 { width: 728px; height: 90px }
  .adsSpace_2:not(.adsbygoogle) { height: auto; min-height: 90px }

  /*===========================*\
    Header 
  \*===========================*/
  #header .logo { text-align: center }
  #header .wrapper > div, #header .logo { width: 33.3% }
  #header .logo { width: 33.3% }
  #header .logo img { margin: 0 auto }
  #header .search-icon { text-align: right }
  
  /*===========================*\
    Main
  \*===========================*/
  /* Layout */
  .pfgLayout { flex-direction: column }
  .pfgLayout .pfgSide { margin-top: 28px; max-width: 100%; margin-left: 0 }
  .pfgLayout .heading { font-size: 21px }

  /*==========================================*\
    Side Menu
  \*==========================================*/
  body.side-open { overflow: hidden } 
  body.side-open #side-menu { transform: translateX(260px) } 
  #side-menu { display: block; transition: transform 0.2s; overflow: hidden; -webkit-overflow-scrolling: touch; position: fixed; height: 100%; width: 260px; top: inherit; left: -260px; overflow-y: auto; z-index: 9998; background: #fff } 
  #dark-bg { transition: opacity 0.2s; overflow: hidden; position: absolute; bottom: 0; top: 0; left: 0; right: 0; z-index: 9997; background: #000 }
  #dark-bg.animate { opacity: 0.3 }
}

/*==========================================*\
  Contenido para phablets
\*==========================================*/
@media (min-width: 731px) { 
  .pfgShow_phablet { display: none !important } 
}

@media ( max-width: 730px ) { 
  .pfgHide_phablet { display: none !important }

  /* Ads */
  .adsSpace_2 { width: 100%; height: 100px }
  .adsSpace_2:not(.adsbygoogle) { height: auto; min-height: 100px }

  /*===========================*\
    PFG Gallery
  \*===========================*/
  .pfgGallery > li { width: 33.333%; }

  /*===========================*\
    Global
  \*===========================*/
  .game-showcase > li { width: 50% } 
}

/*==========================================*\
  Contenido para móviles
\*==========================================*/
@media (min-width: 440px) { 
  .pfgShow_phone { display: none !important } 
}

@media (max-width: 440px) {   
  .pfgHide_phone { display: none !important }
  .box { background: transparent; border: 0; padding: 0; border-radius: 0 } 

  /*===========================*\
    PFG Gallery
  \*===========================*/
  .pfgGallery > li { width: 50%; }

  /*===========================*\
    Global
  \*===========================*/
  .game-showcase > li { width: 100% } 
}