@charset "UTF-8";

/* CUSTOM STYLE */
/* 香港教育大學　The University Education of Hong Kong 中國歷史動畫 */
/* CUSTOM COLORS */
/* 香港教育大學　The University Education of Hong Kong 中國歷史動畫 */
/* Default */
/* Header */
/* Footer */
/* Content */
/**/
/* Site Default */
html {
   position: relative;
   min-height: 100%;
}

body {
   font-family: "Arial", "Helvetica", "微軟正黑體", "Microsoft JhengHei", "黑體", "SimHei", "儷黑 Pro", "LiHei Pro Medium", "蘋果儷中黑", "Apple LiGothic Medium", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", "sans-serif" !important;
   font-size: 16px;
   /* preset browser font size */
   color: #333333;
   margin-bottom: 140px;
   background: url(../img/euhk_mers_ad_bg_new.jpg) bottom right no-repeat;
   background-size: cover;
}

/**/
/* Hyperlinks */
a,
a:link,
a:active,
a:visited {
   color: #333333;
   text-decoration: none;
}





/**/
/* Navbar */
nav {
   height: 120px;
   background: url(../img/euhk_mers_ad_bg_navbar.png) bottom center no-repeat;
   background-size: width 100%;
}

.header {
   padding: 0;
}

.header .row {
   height: 100%;
}

.navbar-logo {
   height: 60px;
   margin-left: 120px;
   display: flex;
}

.navbar-logo img {
   display: inline-block;
   max-height: 100%;
   margin: 10px;
}

.navbar-logo>a {
   display: inline-block;
}

.navbar-logo>div {
   float: right;
   padding-top: 15px;
   padding-right: 80px;
   display: block;
   margin: 0 0 0 auto;
}

.navbar-logo>div>a:nth-child(5),
.navbar-logo>div>a:nth-child(6) {
   padding-left: 5px;
}

.navbar-toggle {
   border-color: #ddd;
}

.navbar-toggle .icon-bar {
   background-color: #888;
}


.navbar-title {
   height: 250px;
   margin-left: -15px;
   margin-right: -15px;
}

.navbar-title img {
   max-height: 100%;
}

.navbar-title-quiz {
   height: 100px;
   margin-left: -15px;
   margin-right: -15px;
}

.navbar-title-quiz img {
   max-height: 100%;
}

.navbar-quiz {
   height: 270px;
   margin-left: -15px;
   margin-right: -15px;
}

.navbar-quiz img {
   max-height: 100%;
}

.navbar-hd {
   float: center;
   padding-top: 15px;
   display: block;
}

.circle-icon {
   border-radius: 50%;
   /* the magic */
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   color: #000000;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 12px;
   padding-right: 12px;
}

.circle-icon.active,
.circle-icon-eng.active {
   background-color: #ff7f00;
   color: #ffffff;
}

.circle-icon:hover,
.circle-icon-eng:hover {
   background-color: #ff7f00;
   color: #ffffff;
}

.circle-icon-eng {
   border-radius: 50%;
   /* the magic */
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   color: #000000;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 7px;
   padding-right: 7px;
}

.sidenav {
   height: 100%;
   width: 0;
   position: fixed;
   z-index: 1;
   top: 0;
   right: 0;
   background-color: #fff;
   /*background-color: #f8f8f8;*/
   /*background-color:transparent;*/
   overflow-x: hidden;
   transition: 0.5s;
   padding-top: 60px;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.sidenav a {
   padding: 12px 8px 12px 32px;
   text-decoration: none;
   /*font-size: px;*/
   color: #818181;
   display: block;
   transition: 0.3s;
   border-bottom: 1px solid #dfdfdf;

}

.sidenav a:first-child {
   border-bottom: 0px;
}



.sidenav a:first-child:hover {
   /*background-color: transparent;*/
   /* limits the scope of the previous rule */
}

.sidenav a:hover {
   color: #f1f1f1;
   background-color: #e4fdb8;
   color: #000;
   text-decoration: none;
   transition: all 0.3s;
}

.sidenav .closebtn {
   position: absolute;
   top: 0;
   right: 20px;
   font-size: 32px;
   margin-left: 50px;
   padding-top: 5px;
   background-color: transparent !important;

}

.sidenav .lang {
   position: absolute;
   top: 0;
   right: 98px;
   margin-top: 12px;
}

.sidenav .circle-icon {

   display: inline-block;
   padding-left: 8px;
   padding-right: 8px;
   padding-bottom: 4px;
   padding-top: 5px;
   border-bottom: 0px;
}

.sidenav .circle-icon:hover,
.sidenav .circle-icon.active:hover {
   background-color: #ff7f00;
   color: #ffffff;
}

.img-max-width {
   width: 100%;
}



/**/
/* Footer */
footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 120px;
   background: url(../img/euhk_mers_ad_bg_footer.png) top center no-repeat;
   background-size: width 100%;
}


.footer {
   height: 100%;
   text-align: right;
}

.footer-quiz {
   height: 100%;
   text-align: right;
}

footer-quiz {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 120px;
   background: url(../img/euhk_mers_ad_bg_footer_02.png) top center no-repeat;
   background-size: width 100%;
}


.footer-copyright {
   position: absolute;
   bottom: 0%;
   left: 50%;
   -webkit-transform: translate(-50%, 0%);
   transform: translate(-50%, 0%);
   width: 100%;
   padding-bottom: 10px;
   word-wrap: break-word;
   word-break: keep-all;
   text-align: center;
   font-size: 0.75em;
   color: #333333;
}

.footer-copyright a,
.footer-copyright a:visited {
   color: #333333;
}

.footer-copyright a:hover,
.footer-copyright a:active,
.footer-copyright a:focus,
.footer-copyright a:visited:hover,
.footer-copyright a:visited:active,
.footer-copyright a:visited:focus {
   color: #204000;
   text-decoration: underline;
}

/**/
/* Content */
.content-desc {
   margin-top: 210px;
   padding: 15px 15px;
   font-size: 1.5em;
   color: #000000;
   border-radius: 20px;
   background-color: rgba(255, 255, 255, 0.85);
}

.content-desc .text-euhk {
   font-weight: bold;
   color: #2a8700;
}

.content-desc .text-mers {
   font-weight: bold;
   color: #ee6ca8;
}

.content-desc .text-881903 {
   font-weight: bold;
   color: #00a1e4;
}

.content-desc .text-bf8e00 {
   font-weight: bold;
   color: #bf8e00;
}

.content-desc .text-ningpo {
   font-weight: bold;
   color: #db5658;
}





.content-desc-quiz {
   margin-top: 200px;
   padding: 15px 15px;
   font-size: 1.5em;
   color: #000000;
   border-radius: 20px;
   background-color: rgba(255, 255, 255, 0.85);
}


.content-desc-quiz02 {
   padding: 15px 15px;
   color: #000000;
   border-radius: 20px;
   background-color: rgba(255, 255, 255, 0.85);
}


.content-desc-quiz .text-title {
   font-size: 1.5em;
   font-weight: bold;
   text-align: center;
   color: #2a8700;
}

.content-desc-quiz .text-bd {
   font-weight: bold;
   color: #FF5C26;
}

.content-desc-quiz .text-h1 {
   font-weight: bold;
   color: #00a1e4;
}

.content-desc-quiz .text-h2 {
   font-weight: bold;
   color: #ee6ca8;
}

.content-desc-quiz .text-h3 {
   font-weight: bold;
   color: #2a8700;
}

.content-desc-quiz .text-h4 {
   font-weight: bold;
   color: #d62f2c;
}

.content-desc-quiz .text-h1-bd {
   font-size: 1.6em;
   font-weight: bold;
   color: #00a1e4;
}

.content-desc-quiz .text-h2-bd {
   font-size: 1.6em;
   font-weight: bold;
   color: #ee6ca8;
}


.content-quiz-title {
   margin-top: 10px;
}






.content-char {
   margin-top: 20px;
}

.content-quiz {
   margin-top: 5px;
}

.content-msg {
   /*display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;*/

   align-items: center;
   margin-top: 30px;
   margin-left: -15px;
   margin-right: -15px;
   overflow: hidden;
}

.content-msg img {
   max-height: 100px;
   min-width: 400px;
}

.wrapper-content-link {
   text-align: center;
}


.content-link {
   display: inline-block;
   margin-top: 15px;
   line-height: 1.125em;
   font-size: 1.125em;
   color: #ffffff;
   padding: 15px 20px;
   border-radius: 100px;
   background-color: rgba(3, 26, 4, 0.3);

}

.content-link a,
.content-link a:visited {
   xfont-weight: bold;
   color: #ffffff;
   xtext-shadow: 1px 1px #000000;
}

.content-link a:hover {
   xfont-weight: bold;
   text-decoration: underline;
   color: #ffffff;
}

.content-link>a>span {
   padding-right: 5px;
}

.lang-chi {
   display: block;
}

.lang-eng {
   display: none;
}

@media only screen and (max-width : 992px) {
   .navbar-logo {
      margin-left: 0;
   }

   .navbar-logo>div {
      padding-right: 0;
   }
}

@media only screen and (min-width: 769px) {
   #mySidenav {
      width: 0px !important;
   }
}

/* Bootstrap 3 MEDIA QUARY */
/**/
/* Mobile First Method */
/* Custom, iPhone Retina */
/* Extra Small Devices XS and Up, Phones */
/* Extra Small Devices XS Only, Phones */
/* Small Devices SM and Up, Tablets */
/* Small Devices SM Only, Tablets */
/* Medium Devices MD and Up, Desktops */
/* Medium Devices MD Only, Desktops */
/* Large Devices LG and Up, Wide Screens */
/**/
/* Non-Mobile First Method */
/* Large Devices LG and Down, Wide Screens */
/* Medium Devices MD Only, Wide Screens */
/* Medium Devices MD and Down, Desktops */
/* Small Devices MD Only, Desktops */
/* Small Devices SM and Down, Tablets */
@media only screen and (max-width: 768px) {
   body {
      margin-bottom: 110px;
   }

   nav {
      height: 120px;
   }

   .navbar-logo {
      /* text-align: center; */
      margin-left: 0;
   }

   .navbar-logo.text-bd {
      font-weight: bold;
      color: #FF5C26;
   }

   .navbar-title {
      margin-top: 5px;
   }

   .navbar-logo>div {
      display: none;
   }


   footer {
      height: 100px;
   }

   .content-char>.row:first-child>* {
      text-align: center;
   }
}

/* Extra small Devices SM Only, Tablets */
/* Extra Small Devices XS and Down, Phones */
@media only screen and (max-width: 480px) {
   body {
      font-size: 14px;
      margin-bottom: 90px;
   }

   nav {
      height: 80px;
   }

   .navbar-logo {
      max-height: 35px;
   }



   footer {
      height: 80px;
   }

   .footer-copyright {
      padding-bottom: 5px;
   }
}

/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {
   .content-desc {
      margin-top: 160px;
   }

   .navbar-logo {
      max-height: 35px;
   }

   .navbar-logo img {
      margin-left: 3px;
      margin-right: 3px;
   }

   .container-fluid {
      padding-left: 5px;
      padding-right: 5px;
   }


}

/**/
/* Media Quary Targets High Resolution Screens, Retina */

/*# sourceMappingURL=custom.css.map */