@import url('https://fonts.googleapis.com/css?family=Heebo:300,400|Martel:400,700|Comfortaa:400');

/* ===== France Flag Official color ===== */
.france-color {
	
}
.fr-color01 {
	background-color: #0055A4;
    color: #0055A4;
    display: block;
    height: 8px;
    line-height: 1px;
}
.fr-color02 {
	background-color: #fff;
    color: #fff;
    display: block;
    height: 8px;
    line-height: 1px;
}
.fr-color03 {
	background-color: #EF4135;
    color: #EF4135;
    display: block;
    height: 8px;
    line-height: 1px;
}
/* ===== /France Flag Official color ===== */


#ovp-link {
	display: block;
    font-size: 120%;
    margin-top: 22px;
    margin-left: 0px;
    margin-right: 5px;
    margin-bottom: 0px;
    float: left;
    padding-bottom: 4px;
}
#ovp-link a {
	color: #444;
    text-decoration: none;
}
#ovp-link a:hover {
	color: #aaa;
    text-decoration: none;
}
#fhk-home {
	margin-top: 1px;
}
.top-banner {
	background-color: #000000;
    height: 471px;
    width: 100%;
    display: block;
    /*
    background-image: url("../img/topbanner.jpg");
    background-repeat: no-repeat;
    background-position: left 50px; 
    background-repeat: repeat-x;
    */
}
.top-banner2 {
	background-color: #f5731d;
    background-image: url("../img/bg-mid2.jpg");
    background-repeat: no-repeat;
    background-position: 80% bottom;
    height: 330px;
    width: 100%;
    display: block;
}
#slick-frame {
	border-bottom: 2px solid #000;
}
#slick-frame img {
	border: 10px solid #fff;
    margin-right: 2px;
}
#slick-frame button {
	display: none !important;
}
#slick-frame .fhk-slick {
    display: none;
}
#slick-frame.slick-initialized .fhk-slick {
    display: block;
}
.top-banner {
	position: relative;
    z-index: 15;
}
.site-title {
	position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 25;
}
.site-title-overlay {
	position: absolute;
    background-image: url("../img/title-overlay.png");
    background-repeat: repeat-x;
    width: 100%;
    height: 400px;
    top: 0;
    left: 0;
    z-index: 20;
}
.site-title-overlay2 {
	position: absolute;
    background-image: url("../img/title-overlay.png");
    background-repeat: repeat-x;
    width: 100%;
    height: 330px;
    top: 0;
    left: 0;
    z-index: 20;
}

#fhk-background {
    background-color: #f5731d;
    color: #fff;
    font-family: 'Martel', serif;
    font-weight: 400;
    padding-bottom: 20px;
    text-shadow: 2px 2px 2px rgba(118, 40, 12, 0.5);
}
#fhk-background p {
	padding-top: 10px;
    padding-bottom: 5px;
    font-size: 110%;
    line-height: 1.6;
}
.bg-mid {
	background-image: url("../img/bg-mid.jpg");
    background-repeat: no-repeat;
    background-position: 70% bottom; 
}
.fhk-bg-text {
    display: block;
    margin-top: 20px;
    background-color: rgba(170, 60, 20, 0.6);
    border-radius: 20px;
    -moz-border-radius: 20px;
    padding-top: 8px; 
    padding-bottom: 10px;
    padding-left: 30px !important;
    padding-right: 30px !important;
}
.anchor {
	padding-top: 51px;
}
#fhk-message {
    padding-bottom: 0px;
}
#fhk-message p {
	padding-top: 10px;
    padding-bottom: 5px;
    font-size: 110%;
    line-height: 1.6;
}
.cityu-president {
	display: block;
    line-height: 1;
    padding-left: 15px;
    padding-top: 8px;
    margin-bottom: 5px;
}
.fhk-msg-text {
	margin-top: 10px;
    background-color: rgba(225, 180, 200, 0.6);
    border-radius: 20px;
    -moz-border-radius: 20px;
    padding-top: 8px; 
    padding-bottom: 10px;
    padding-left: 30px !important;
    padding-right: 30px !important;
    margin-bottom: 20px;
}
#fhk-review {
	padding-top: 0px;
    padding-bottom: 0px;
    background-color: #000;
    height: 394px;
    border-top: solid 2px #000;
    border-bottom: solid 2px #000;
}
.bottom-pic01, .bottom-pic02, .bottom-pic03, .bottom-pic04 {
	height: 390px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding-left: 0;
    padding-right: 0;
}
.bottom-pic-frame {
	width: 100%;
    height: 100%;
    border: 10px solid #fff;
}
.bottom-banner {
	position: relative;
    z-index: 25;
}
#vp-review-btn {
    display: block;
    margin-top: 280px;
    font-family: 'Comfortaa', sans-serif;
    font-size: 180%;
    width: 300px;
    
}
#vp-review-btn a {
	color: #fff;
    text-decoration: none;
}
.vp-review-btn-frame {
	border: 3px solid #fff;
    background-color: rgba(255,0,80,0.7);
	/* border-radius: 10px;
    -moz-border-radius: 10px; */
    -webkit-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	-o-transition: 0.3s ease;
	transition: 0.3s ease;
}
.vp-review-btn-frame:hover {
	background-color: rgba(255,80,0,1.0);
    -webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1);
	-o-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1);
	z-index: 5;
}
#fhk-footer {
	padding-top: 10px;
    padding-bottom: 20px;
}

.navbar-default .navbar-nav>li>a {
    font-family: 'Heebo', sans-serif;
    font-weight: 400;
    color: #f5731d;
    font-size: 110%;
}
.vp-text-color01 {
	color: #8d0230;
}
.vp-text-color02 {
	color: #f5731d;
}
.vp-text-color03 {
	color: #fff;
}
.vp-text-color04 {
	color: #2f567b;
}
.vp-text-color05 {
	color: #811f4b;
}
.bg-color-01 {
	background-color: #ccc;
}
.bg-color-02 {
	background-color: beige;
}
.vp-v-top {
	vertical-align: top;
}

/* ===== Upcoming Lecture ====== */

.upcoming h1 {
    color: chocolate;
    display: block;
    width: 100%;
    border-bottom: solid 1px;
    border-color: #ccc;
    padding-bottom: 8px;
    margin-bottom: 20px;
}
.upcoming h3 {
    margin-bottom: 20px;
}
.upcoming h4 {
	padding-top: 20px;
}


/* ===== /Upcoming Lecture ====== */

/* ===== Past Lectures ====== */
.top-banner-pl {
	background-color: #f5731d;
    background-image: url("../img/bg-paris2.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 20px;
}
#fhk-pl-lectures-all {
	padding-top: 25px;
    padding-bottom: 25px;
}
.vp-gallery-bg {
	background-color: #222;
}
/* ===== Mixitup ===== */
#mix-recipients .mix {
    display: none;
}
.mix-controls {

}
button {
  display: inline-block;
  padding: .3em .8em;
  background: #3fa5c3;
  border: 0;
  color: #c1e5ef;
  font-size: 14px; 
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 5px;
}

button.active {
  background: #366892;
    color: #fff;
}
button:hover {
    background: #1f78c3;
    color: #fff;
}
button:focus {
  outline: 0 none;
}

button + label{
  margin-left: 1em;
}

.mix-container{
  padding: 0 0 0;
  
  -webkit-backface-visibility: hidden;
}

.mix-container:after{
  content: '';
  display: inline-block;
  /* width: 30%; */
}

.mix-container .mix,
.mix-container .gap {
    display: inline-block;
    /* width: 85%; */
}

.mix-container .mix {
    display: none;
}
.mix-container .mix a {
    display: block;
    border: 2px solid #f1f1f1;
    padding-top: 15px;
    padding-bottom: 12px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    color: #333;
    text-decoration: none;
    margin-top: 15px;
    margin-right: 5px;
    margin-bottom: 5px;
    background: #e8e8e8;
    -webkit-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	-o-transition: 0.3s ease;
	transition: 0.3s ease;
}
.mix-container .mix a:hover {
    border: 2px solid #f4d2b6;
    background-color: #f6ece3;
}

.mix img {
    border: solid 4px #fff;
}
#mix-lectures ul li {
	list-style-type: circle;
    /* list-style-position: inside; */

}


/* ===== /Mixitup ===== */

/* ===== /Past Lectures ====== */

/* ===== Media Queries ====== */

/* ===== Mainly for Mobile ====== */
@media (max-width:768px) {
   .site-title p {
       font-family: 'Martel', serif;
       font-weight: 700;
       color: #fff;
       font-size: 2.8em;
       text-shadow: 4px 4px 4px rgba(150, 50, 10, 0.8);
       padding-top: 90px;
       padding-left: 5%;
       padding-right: 5%;
    }
    .hk {
	   white-space: nowrap;
    }
    .ovprt-link {
	   text-align: left;
    }
    #fhk-background p {
        padding-top: 6px;
        padding-bottom: 2px;
        font-size: 100%;
        line-height: 1.4;
    }
    #fhk-message p {
        padding-top: 6px;
        padding-bottom: 2px;
        font-size: 100%;
        line-height: 1.4;
    }
    /* ===== Sub-Mixitup ====== */
    .mix-container .mix {
        display: none;
        width: 98%;
    }
    .prof-photo {
        display: block;
        width: 150px;
        height: 200px;
        text-align: center;
    }
    .prof-content {
	   display: block;

    }
    .prof-photo-v2 {
        display: inline-block;
        width: 100%;
        margin-bottom: 10px;
        vertical-align: top;
    }
    .prof-photo-v2 img {
        border: solid 4px #e8e8e8;
    }
    .prof-box-v2 {
	   display: inline-block;
    }
    .prof-content-v2 {
        display: inline-block;
        width: 100%;
        margin-bottom: 15px;
    }
    /* ===== /Sub-Mixitup ====== */
}
/* ===== /Mainly for Mobile ====== */

@media (min-width:768px) {
   .site-title p {
       font-family: 'Martel', serif;
       font-weight: 700;
       color: #fff;
       font-size: 3.5em;
       text-shadow: 4px 4px 4px rgba(150, 50, 10, 0.8);
       padding-top: 110px;
       padding-left: 2%;
       padding-right: 2%;
    }
    .ovprt-link {
	   text-align: right;
    }
    /* ===== Sub-Mixitup ====== */
    .mix-container .mix {
        display: none;
        width: 98%;
    }
    .prof-photo {
        display: block;
        width: 170px;
        text-align: center;
        float: left;
    }
    .prof-content {
        margin-left: 8px;
        display: block;
        float: left;
        width: 70%;
    }
    .prof-photo-v2 {
        display: inline-block;
        width: 25%;
        margin-bottom: 10px;
        vertical-align: top;
    }
    .prof-photo-v2 img {
        border: solid 4px #e8e8e8;
    }
    .prof-box-v2 {
	   display: inline-block;
    }
    .prof-content-v2 {
        display: inline-block;
        width: 70%;
    }
    /* ===== /Sub-Mixitup ====== */
}
@media (min-width:992px) {
   .site-title p {
       font-family: 'Martel', serif;
       font-weight: 700;
       color: #fff;
       font-size: 4em;
       text-shadow: 4px 4px 4px rgba(150, 50, 10, 0.8);
       padding-top: 130px;
       padding-left: 2%;
       padding-right: 2%;
    }
    /* ===== Sub-Mixitup ====== */
    .prof-photo-v2 {
        display: inline-block;
        width: 100%;
        margin-bottom: 10px;
        vertical-align: top;
    }
    .prof-photo-v2 img {
        border: solid 4px #e8e8e8;
    }
    .prof-box-v2 {
	   display: inline-block;
    }
    .prof-content-v2 {
        display: inline-block;
        width: 100%;
    }
    /* ===== /Sub-Mixitup ====== */
}
@media (min-width:1200px) {
    #fhk-home p {
        padding-top: 50px;
        font-family: 'Martel', serif;
        font-weight: 700;
        color: #fff;
        font-size: 4.5em;
        text-shadow: 4px 4px 4px rgba(150, 50, 10, 0.8);
        padding-left: 2%;
        padding-right: 2%;
        padding-top: 130px;
    }
    .top-banner2 {
        background-image: url("../img/bg-mid2.jpg");
        background-repeat: no-repeat;
        background-position: 70% bottom;
    }
    .site-title p {
       
    }
    /* ===== Sub-Mixitup ====== */
    .mix-container .mix {
        display: none;
        /*width: 49%;*/ Updated by Tony on 8 Nov
        vertical-align: top;
    }
    .prof-photo {
        display: block;
        width: 170px;
        text-align: center;
        float: left;
    }
    .prof-content {
        margin-left: 8px;
        display: block;
        float: left;
        width: 60%;
    }
    /* ===== /Sub-Mixitup ====== */
}
/* ===== /Media Queries ====== */