@charset "UTF-8";
/* IMPORTS */
/* VARIABLES */
/* MIXINS */
.polygon-top::before, .polygon-bottom::after, .polygon-connection::before, .polygon-connection > div::after {
  content: '';
  position: absolute;
  left: 0;
  z-index: 1;
  width: 0;
  height: 0;
  border-style: solid; }

a.facebook::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch a.facebook::before:hover::after,
  .no-touch a.facebook::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch a.facebook::before:hover::before,
  .no-touch a.facebook::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

a.instagram::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch a.instagram::before:hover::after,
  .no-touch a.instagram::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch a.instagram::before:hover::before,
  .no-touch a.instagram::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

a.weibo::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch a.weibo::before:hover::after,
  .no-touch a.weibo::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch a.weibo::before:hover::before,
  .no-touch a.weibo::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

a.youtube::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch a.youtube::before:hover::after,
  .no-touch a.youtube::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch a.youtube::before:hover::before,
  .no-touch a.youtube::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

a.linkedin::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch a.linkedin::before:hover::after,
  .no-touch a.linkedin::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch a.linkedin::before:hover::before,
  .no-touch a.linkedin::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

a.twitter::before {
  /*content: "";*/
  content: " ";
  padding-left: 8px;
  /*padding-right: 8px;*/
  padding-right: calc(1.05em + 8px);
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  /*font-size: 0.8125rem;*/
  font-size: 0.725rem;
  color: inherit;
  /*twitter x icon*/
  background: url(https://template.cityu.edu.hk/template/icon/icon-twitter-x.svg) left top no-repeat;
  background-size: 1em; }
  .no-touch a.twitter::before:hover::after,
  .no-touch a.twitter::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch a.twitter::before:hover::before,
  .no-touch a.twitter::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

a.wechats::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch a.wechats::before:hover::after,
  .no-touch a.wechats::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch a.wechats::before:hover::before,
  .no-touch a.wechats::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

a.flickr::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch a.flickr::before:hover::after,
  .no-touch a.flickr::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch a.flickr::before:hover::before,
  .no-touch a.flickr::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

a.blog::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit;
  font-weight: 800; }
  .no-touch a.blog::before:hover::after,
  .no-touch a.blog::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch a.blog::before:hover::before,
  .no-touch a.blog::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

a.rss::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit;
  font-weight: 800; }
  .no-touch a.rss::before:hover::after,
  .no-touch a.rss::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch a.rss::before:hover::before,
  .no-touch a.rss::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

a.video::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit;
  font-weight: 800; }
  .no-touch a.video::before:hover::after,
  .no-touch a.video::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch a.video::before:hover::before,
  .no-touch a.video::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

a.vimeo::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch a.vimeo::before:hover::after,
  .no-touch a.vimeo::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch a.vimeo::before:hover::before,
  .no-touch a.vimeo::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

a.blogger::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch a.blogger::before:hover::after,
  .no-touch a.blogger::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch a.blogger::before:hover::before,
  .no-touch a.blogger::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

a.wordpress::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch a.wordpress::before:hover::after,
  .no-touch a.wordpress::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch a.wordpress::before:hover::before,
  .no-touch a.wordpress::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

a.youku::before,
a.issuu::before {
  content: '';
  width: 13px;
  height: 13px;
  display: inline-block;
  margin-right: 8px;
  background-size: cover;
  position: relative;
  bottom: -2px; }

a.youku::before {
  background-image: url("../../images/icons/youku@2x.png"); }

a.issuu::before {
  background-image: url("../../images/icons/issuu@2x.png"); }

.paragraph--type--cityu-social-media a {
  text-transform: uppercase;
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 18px; }
  @media (max-width: 759.98px) {
    .paragraph--type--cityu-social-media a {
      font-size: 12px;
      line-height: 16px; } }

.paragraph--type--cityu-social-media a::before {
  color: #222;
  padding-left: 0; }

.field--name-field-cityu-scholar-tel::before,
.field--name-field-cityu-poi-tel::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch .field--name-field-cityu-scholar-tel::before:hover::after,
  .no-touch .field--name-field-cityu-scholar-tel::before:focus::after, .no-touch
  .field--name-field-cityu-poi-tel::before:hover::after,
  .no-touch
  .field--name-field-cityu-poi-tel::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch .field--name-field-cityu-scholar-tel::before:hover::before,
  .no-touch .field--name-field-cityu-scholar-tel::before:focus::before, .no-touch
  .field--name-field-cityu-poi-tel::before:hover::before,
  .no-touch
  .field--name-field-cityu-poi-tel::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

.field--name-field-cityu-scholar-fax::before,
.field--name-field-cityu-poi-fax::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch .field--name-field-cityu-scholar-fax::before:hover::after,
  .no-touch .field--name-field-cityu-scholar-fax::before:focus::after, .no-touch
  .field--name-field-cityu-poi-fax::before:hover::after,
  .no-touch
  .field--name-field-cityu-poi-fax::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch .field--name-field-cityu-scholar-fax::before:hover::before,
  .no-touch .field--name-field-cityu-scholar-fax::before:focus::before, .no-touch
  .field--name-field-cityu-poi-fax::before:hover::before,
  .no-touch
  .field--name-field-cityu-poi-fax::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

.field--name-field-cityu-poi-telephone::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch .field--name-field-cityu-poi-telephone::before:hover::after,
  .no-touch .field--name-field-cityu-poi-telephone::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch .field--name-field-cityu-poi-telephone::before:hover::before,
  .no-touch .field--name-field-cityu-poi-telephone::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

.field--name-field-cityu-scholar-email::before,
.field--name-field-cityu-poi-email .field__item::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch .field--name-field-cityu-scholar-email::before:hover::after,
  .no-touch .field--name-field-cityu-scholar-email::before:focus::after, .no-touch
  .field--name-field-cityu-poi-email .field__item::before:hover::after,
  .no-touch
  .field--name-field-cityu-poi-email .field__item::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch .field--name-field-cityu-scholar-email::before:hover::before,
  .no-touch .field--name-field-cityu-scholar-email::before:focus::before, .no-touch
  .field--name-field-cityu-poi-email .field__item::before:hover::before,
  .no-touch
  .field--name-field-cityu-poi-email .field__item::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

.icon-map-marker::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch .icon-map-marker::before:hover::after,
  .no-touch .icon-map-marker::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch .icon-map-marker::before:hover::before,
  .no-touch .icon-map-marker::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

.icon-clock::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch .icon-clock::before:hover::after,
  .no-touch .icon-clock::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch .icon-clock::before:hover::before,
  .no-touch .icon-clock::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

.icon-utensils::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch .icon-utensils::before:hover::after,
  .no-touch .icon-utensils::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch .icon-utensils::before:hover::before,
  .no-touch .icon-utensils::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

.icon-male::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch .icon-male::before:hover::after,
  .no-touch .icon-male::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch .icon-male::before:hover::before,
  .no-touch .icon-male::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

.icon-dollar-sign::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch .icon-dollar-sign::before:hover::after,
  .no-touch .icon-dollar-sign::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch .icon-dollar-sign::before:hover::before,
  .no-touch .icon-dollar-sign::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

.icon-phone::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch .icon-phone::before:hover::after,
  .no-touch .icon-phone::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch .icon-phone::before:hover::before,
  .no-touch .icon-phone::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

.icon-info-circle::before {
  content: "";
  padding-left: 8px;
  padding-right: 8px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-size: 0.8125rem;
  color: inherit; }
  .no-touch .icon-info-circle::before:hover::after,
  .no-touch .icon-info-circle::before:focus::after {
    padding-left: 1rem;
    padding-right: 0; }
  .no-touch .icon-info-circle::before:hover::before,
  .no-touch .icon-info-circle::before:focus::before {
    padding-left: 1rem;
    padding-right: 0; }

.polygon-top {
  position: relative;
  margin-top: 16px; }
  .polygon-top::before {
    top: 0;
    border-width: 1rem 50vw 1rem 50vw;
    border-color: #F2F2F2 #F2F2F2 transparent transparent; }
    @media (min-width: 1000px) {
      .polygon-top::before {
        border-width: 1.5rem 50vw 1.5rem 50vw; } }
  @media (min-width: 760px) {
    .polygon-top {
      margin-top: 32px; } }
  @media (min-width: 1200px) {
    .polygon-top {
      margin-top: 48px; } }

.polygon-bottom {
  position: relative;
  margin-bottom: 16px; }
  .polygon-bottom::after {
    bottom: 0;
    border-width: 1rem 50vw 1rem 50vw;
    border-color: transparent #F2F2F2 #F2F2F2 transparent; }
    @media (min-width: 1000px) {
      .polygon-bottom::after {
        border-width: 1.5rem 50vw 1.5rem 50vw; } }
  @media (min-width: 760px) {
    .polygon-bottom {
      margin-bottom: 32px; } }
  @media (min-width: 1200px) {
    .polygon-bottom {
      margin-bottom: 48px; } }

.polygon-connection {
  position: relative;
  margin-top: 16px; }
  .polygon-connection::before {
    top: 0;
    border-width: 1rem 50vw 1rem 50vw;
    border-color: #F2F2F2 #F2F2F2 transparent transparent; }
    @media (min-width: 1000px) {
      .polygon-connection::before {
        border-width: 1.5rem 50vw 1.5rem 50vw; } }
  @media (min-width: 760px) {
    .polygon-connection {
      margin-top: 32px; } }
  @media (min-width: 1200px) {
    .polygon-connection {
      margin-top: 48px; } }
  .polygon-connection > div::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    top: -16px;
    left: 0;
    width: 100%;
    height: 16px;
    background-color: #F2F2F2; }
    @media (min-width: 760px) {
      .polygon-connection > div::before {
        top: -32px;
        height: 32px; } }
    @media (min-width: 1200px) {
      .polygon-connection > div::before {
        top: -48px;
        height: 48px; } }
  .polygon-connection > div::after {
    bottom: 0;
    border-width: 1rem 50vw 1rem 50vw;
    border-color: transparent #F2F2F2 #F2F2F2 transparent; }
    @media (min-width: 1000px) {
      .polygon-connection > div::after {
        border-width: 1.5rem 50vw 1.5rem 50vw; } }
  .polygon-connection > div::after {
    top: -48px; }
    @media (min-width: 760px) {
      .polygon-connection > div::after {
        top: -64px; } }
    @media (min-width: 1000px) {
      .polygon-connection > div::after {
        top: -80px; } }
    @media (min-width: 1200px) {
      .polygon-connection > div::after {
        top: -96px; } }

.block-call-to-action.polygon-top,
.block-call-to-action.polygon-bottom,
.block-call-to-action.polygon-connection {
  margin-top: 0;
  margin-bottom: 0; }
  .block-call-to-action.polygon-top::before,
  .block-call-to-action.polygon-bottom::before,
  .block-call-to-action.polygon-connection::before {
    display: none; }
  .block-call-to-action.polygon-top::after,
  .block-call-to-action.polygon-bottom::after,
  .block-call-to-action.polygon-connection::after {
    display: none; }
  .block-call-to-action.polygon-top > div::before,
  .block-call-to-action.polygon-bottom > div::before,
  .block-call-to-action.polygon-connection > div::before {
    display: none; }
  .block-call-to-action.polygon-top > div::after,
  .block-call-to-action.polygon-bottom > div::after,
  .block-call-to-action.polygon-connection > div::after {
    display: none; }

.polygon-top-hide {
  margin-bottom: 0; }
  .polygon-top-hide::before {
    display: none; }

.polygon-bottom-hide {
  margin-bottom: 0; }
  .polygon-bottom-hide::after {
    display: none; }