@import url("reset.css");



@font-face {
    src: url("../fonts/IntroFont.otf") format("opentype");
    font-family: "IntroFont";
    font-style: normal;
    font-weight: normal;
}

@font-face {
    src: url("../fonts/TitleFont.otf") format("opentype");
    font-family: "TitleFont";
    font-style: normal;
    font-weight: normal;
}

.IntroFont{font-family: "IntroFont";}
.TitleFont{font-family: "TitleFont";}

sup{vertical-align: super;}
a{color: #000;}

*{-webkit-text-size-adjust: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
a{text-decoration:none;}
a:hover{text-decoration:none;}
html,body {background: #f1f9fe; color: #333;font-family: "Open Sans",sans-serif,Arial,Verdana,sans-serif;font-size: 13px;}
.img-responsive{width: 100%;}
.ani{display: none;}
.txt{position: relative; z-index: 100; padding: 10px 0;}
.isWeb{display: block;}
.isMobile{display: none;}
.space-block{height: 16px; display: block;}
p{margin-bottom: 10px; text-align: justify; line-height: 20px;}

.mobile-menu-wrapper{display: none;}

.page-header-bar{
    color: #1A4E7C;
    display: block;
    font-size: 28px;
    margin-bottom: 20px;
    padding: 10px 0 10px 20px;
    font-weight: bold;
}

.page-subpage-bar{
	color: #5ebc5e;
	display: block;
}
.page-subpage-bar .line{
	background-image: url(../img/learning-and-teaching/content1.png);
    background-size: 50%;
    height: 30px;
    background-repeat: no-repeat;
    font-size: 15px;
    margin-bottom: 10px;
    font-weight: bold;
}

.page-subheader-bar{
	background: url("../../img/titlebar.png") repeat ;
	color: #fff;
	display: block;
	font-size: 16px;
	padding: 5px 10px;
	margin-bottom: 10px;
}
.page-content{height: 674px;}
.col100{width: 100%; float: left;}
.col1{width: 540px; height: 600px; float: left;}
.col2{width: 410px; float: left;}

.col12{width: 710px; height: 674px; float: left;}
.col22{width: 240px; float: left;}

.col15{width: 490px; height: 560px; float: left;}
.col25{width: 460px; float: left;}


h2.subtitle{color: #27B6B8; font-size: 18px; margin-bottom: 10px;}

/* Popup */
#popup-block{}
.popup-item{
	
}

.popup-item1{
/* 	background-image: url(../../img/student-sharing/KristyChowOiChuen.jpg); */
}

/* Photo List */
.owl-carousel img{width: 55%; float: left;}
.owl-carousel .caption-block{
	color: #000;
	margin: 0;
	font-style: italic;
	font-size: 11px;
	float: left;
	position: absolute;
	width: 40%;
	height: 100%;
	padding-left: 20px;
	top:0;
	right: 0;
}

.owl-carousel .caption{
	display: table;
	width: 100%;
	height: 100%;
}

.owl-carousel .caption > span{
    vertical-align: bottom;
    display: table-cell;
    line-height: 16px;
}

.photo_list {
    clear: both;
    min-height: 300px;
    position: relative;
    width: 100%;
}

.photo_list .item {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.photo_list .item a{}
.photo_list .item img {
	width: 100%;
}

.photo_thumb{

}

.photo_caption {
    background: url(../../img/titlebar.png) repeat-y;
    background-size: contain;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    padding: 10px;
    text-align: justify;
    margin-top: -3px;
}

.btn-share{margin: 20px auto; text-align: center;}


.btn-studentsharing{
	display: block;
	background-image: url(../img/learning-and-teaching/all_round_talents.png);
	background-size: 197px 30px;
	width: 197px;
	height: 30px;
	position: absolute;
	bottom: 0;
	right: 0;
}
.btn-studentsharing:hover{
	background-image: url(../img/learning-and-teaching/all_round_talents_.png);
}

/*clearfix*/
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}
/*clearfix eof*/

.fixDiv{position:fixed;}
.floatDiv{position:absolute;}
.containerDiv{position:relative;}
.floatLeft{float:left;}
.floatRight{float:right;}

.btn-organisation-structure{width: 127px;height: 18px;background: url(../img/menu/btn_organisation_structure.png) no-repeat;}
.btn-organisation-structure:hover{background-position: bottom;}


.main-wrapper{width: 950px;height: 1038px;margin: 0 auto;position: relative;padding: 25px 0;}

.header-wrapper{padding: 10px; margin-bottom: 10px;}

.hkied-logo{width: 174px;height: 55px;background-image: url(../img/logo.png); background-size: 174px 55px; display: block;}

.topnav-wrapper{background-image: url(../img/topbar/bar.png); background-size: contain; background-repeat: no-repeat; height: 21px; margin: 0 10px;}
.topnav-wrapper ul{margin: 4px 0 0; padding: 0; float: right;}
.topnav-wrapper ul li{list-style: none; float:left; padding: 0;}
.topnav-wrapper ul li:last-child{border-right: none;padding-right: 0; margin-right: 18px;}
.topnav-wrapper ul li a{display: block;}
.topnav-wrapper ul li a.btn-home{width: 59px;height: 18px; background-image: url(../img/top_nav/btn_home.png); background-size: 79px 18px;}
.topnav-wrapper ul li a.btn-mainpage{width: 64px;height: 18px;background-image: url(../img/top_nav/btn_mainpage.png); background-size: 74px 18px;}
.topnav-wrapper ul li a.btn-lang{width: 60px;height: 18px;background-image: url(../img/top_nav/btn_lang.png); background-size: 86px 18px;}


.mainnav-wrapper{width: 950px; padding: 10px 9px 0;}
.mainnav-wrapper ul{margin: 0; padding: 0 ; width: 269px; float: left;}
.mainnav-wrapper ul:first-child,
.mainnav-wrapper ul:last-child{margin: 0;}
.mainnav-wrapper ul.listing{width: 190px;}
.mainnav-wrapper ul li{list-style: none; display: block; padding-bottom: 4px;}
.mainnav-wrapper ul.listing li{padding-bottom: 4px;}
.mainnav-wrapper ul:nth-child(2){margin-left: 4px; margin-right: 2px;}
.mainnav-wrapper ul:nth-child(3){margin-left: 2px; margin-right: 4px;}

.mainnav-wrapper ul li a{display: block;}
.mainnav-wrapper ul li a.btn1{width: 190px; height: 28px; background-size: 190px 28px; background-image: url(../img/main_nav/1.png);}
.mainnav-wrapper ul li a.btn2{width: 190px; height: 28px; background-size: 190px 28px; background-image: url(../img/main_nav/2.png);}
.mainnav-wrapper ul li a.btn3{width: 190px; height: 28px; background-size: 190px 28px; background-image: url(../img/main_nav/3.png);}
.mainnav-wrapper ul li a.btn4{width: 269px; height: 44px; background-size: 269px 44px; background-image: url(../img/main_nav/4.png);}
.mainnav-wrapper ul li a.btn5{width: 269px; height: 44px; background-size: 269px 44px; background-image: url(../img/main_nav/5.png);}
.mainnav-wrapper ul li a.btn6{width: 269px; height: 44px; background-size: 269px 44px; background-image: url(../img/main_nav/6.png);}
.mainnav-wrapper ul li a.btn7{width: 269px; height: 44px; background-size: 269px 44px; background-image: url(../img/main_nav/7.png);}
.mainnav-wrapper ul li a.btn8{width: 190px; height: 44px; background-size: 190px 44px; background-image: url(../img/main_nav/8.png);}
.mainnav-wrapper ul li a.btn9{width: 190px; height: 44px; background-size: 190px 44px; background-image: url(../img/main_nav/9.png);}

.mainnav-wrapper ul li a.btn1.active,
.mainnav-wrapper ul li a:hover.btn1{background-image: url(../img/main_nav/1_1.png);}

.mainnav-wrapper ul li a.btn2.active,
.mainnav-wrapper ul li a:hover.btn2{background-image: url(../img/main_nav/2_2.png);}

.mainnav-wrapper ul li a.btn3.active,
.mainnav-wrapper ul li a:hover.btn3{background-image: url(../img/main_nav/3_3.png);}

.mainnav-wrapper ul li a.btn4.active,
.mainnav-wrapper ul li a:hover.btn4{background-image: url(../img/main_nav/4_4.png);}

.mainnav-wrapper ul li a.btn5.active,
.mainnav-wrapper ul li a:hover.btn5{background-image: url(../img/main_nav/5_5.png);}

.mainnav-wrapper ul li a.btn6.active,
.mainnav-wrapper ul li a:hover.btn6{background-image: url(../img/main_nav/6_6.png);}

.mainnav-wrapper ul li a.btn7.active,
.mainnav-wrapper ul li a:hover.btn7{background-image: url(../img/main_nav/7_7.png);}

.mainnav-wrapper ul li a.btn8.active,
.mainnav-wrapper ul li a:hover.btn8{background-image: url(../img/main_nav/8_8.png);}

.mainnav-wrapper ul li a.btn9.active,
.mainnav-wrapper ul li a:hover.btn9{background-image: url(../img/main_nav/9_9.png);}

.mainnav-wrapper ul li a.btn10.active,
.mainnav-wrapper ul li a:hover.btn10{background-image: url(../img/main_nav/10_10.png);}

.subnav-wrapper{padding: 18px 9px 0;}
.subnav-wrapper ul{margin: 0; padding: 0;}
.subnav-wrapper ul li{list-style: none; float:left;}
.subnav-wrapper ul li:first-child{}
.subnav-wrapper ul li:last-child{}
.subnav-wrapper ul li a{width: 127px; height: 18px; display: block;}

.subnav-wrapper ul li a.btn-vision{background: url(../img/sub_nav/btn_vision_and_mission.png) no-repeat;}
.subnav-wrapper ul li a.btn-chairman{background: url(../img/sub_nav/btn_chairmans_foreword.png) no-repeat;}
.subnav-wrapper ul li a.btn-president{background: url(../img/sub_nav/btn_presidents_overview.png) no-repeat;}
.subnav-wrapper ul li a.btn-snapshots{background: url(../img/sub_nav/btn_snapshots.png) no-repeat;}
.subnav-wrapper ul li a.btn-facts{background: url(../img/sub_nav/btn_facts_and_figures.png) no-repeat;}
.subnav-wrapper ul li a.btn-majordonate{background: url(../img/sub_nav/btn_major_donate.png) no-repeat;}
.subnav-wrapper ul li a.btn-organisation{background: url(../img/sub_nav/btn_organisation_structure.png) no-repeat;}


.subnav-wrapper ul li a.btn-vision:hover,
.subnav-wrapper ul li a.btn-vision.active,
.subnav-wrapper ul li a.btn-chairman:hover,
.subnav-wrapper ul li a.btn-chairman.active,
.subnav-wrapper ul li a.btn-president:hover,
.subnav-wrapper ul li a.btn-president.active,
.subnav-wrapper ul li a.btn-snapshots:hover,
.subnav-wrapper ul li a.btn-snapshots.active,
.subnav-wrapper ul li a.btn-facts:hover,
.subnav-wrapper ul li a.btn-facts.active,
.subnav-wrapper ul li a.btn-majordonate:hover,
.subnav-wrapper ul li a.btn-majordonate.active,
.subnav-wrapper ul li a.btn-organisation:hover,
.subnav-wrapper ul li a.btn-organisation.active{background-position: bottom;}



.thirdnav-wrapper{padding: 10px 9px 0;}
.thirdnav-wrapper ul{margin: 0; padding: 0;}
.thirdnav-wrapper ul li{list-style: none; float:left;}
.thirdnav-wrapper ul li:first-child{}
.thirdnav-wrapper ul li:last-child{}
.thirdnav-wrapper ul li a{
	display: block;
	background-size: 233px 25px;
	width: 233px;
	height: 25px;
}


.thirdnav-wrapper ul li a.btn-governance{background-image: url(../img/third_nav/1.png);}
.thirdnav-wrapper ul li a.btn-treasurer{background-image: url(../img/third_nav/2.png);}
.thirdnav-wrapper ul li a.btn-independent{background-image: url(../img/third_nav/3.png);}
.thirdnav-wrapper ul li a.btn-balancesheets{background-image: url(../img/third_nav/4.png);}
.thirdnav-wrapper ul li a.btn-comprehensiveincome{background-image: url(../img/third_nav/5.png);}
.thirdnav-wrapper ul li a.btn-changesinfunds{background-image: url(../img/third_nav/6.png);}
.thirdnav-wrapper ul li a.btn-cashflow{background-image: url(../img/third_nav/7.png);}
.thirdnav-wrapper ul li a.btn-financial{background-image: url(../img/third_nav/8.png);}



.body-wrapper{padding: 30px 0; position: relative; overflow: hidden;}

.body-wrapper .course-title{
    background-image: url("../../img/others/graphic_2.png");
    background-repeat: no-repeat;
    background-size: 603px 34px;
    color: #168481;
    font-weight: bold;
    height: 34px;
    margin-bottom: 10px;
    margin-left: -20px;
    margin-top: 10px;
    padding: 5px 10px 5px 20px;
    width: 603px;
    line-height: 26px;
}
.body-wrapper .content-inner{
	padding: 0 20px;
}
.body-wrapper .content-inner .title {
	font-size: 18px;
	color:#996666;
	margin-bottom: 10px;
	font-weight: bold;
	line-height: 25px;
}

.body-wrapper .content-inner .title.title2{font-size: 17px; font-style: italic; color: #B46385;}
.body-wrapper .content-inner .title.title3{font-size: 17px; font-style: italic;color: #A9BE36;}
.body-wrapper .content-inner .title.title4{font-size: 17px; font-style: italic;color: #009DDD;}

.body-wrapper .content-inner .icon-photo{margin-bottom: 10px;}
.body-wrapper .content-inner .icon-photo img{max-width: 200px;}


.footer-wrapper{position: relative; margin-bottom: 20px;}
.footer-wrapper a.btn-enter{width: 78px; height: 16px; background-image: url(../img/btn_enter.png); background-size: 78px 16px; float: right; display: block; margin: 0 10px 0 20px;}
.footer-wrapper a.btn-enter:hover{background-image: url(../img/btn_enter2.png);}
.footer-wrapper .paging-control{float: right;width: 108px; height: 27px; position: relative; margin-right: 10px;}
.footer-wrapper .paging-control .paging-block{color: #6d6e71; font-size: 12px; position: absolute; top:13px; left: 30px; width: 60px; height: 10px; line-height: 12px;}
.footer-wrapper .paging-control .paging-block.style1{/* margin: 13px 18px; */}
.footer-wrapper .paging-control a.btn-prev{height: 12px;width: 6px; background-size: 6px 12px; background-image: url(../../img/paging/btn_left.png); display: block; position: absolute;right: 15px;top:13px;}
.footer-wrapper .paging-control a.btn-next{height: 12px;width: 6px; background-size: 6px 12px; background-image: url(../../img/paging/btn_right.png); display: block; position: absolute;right: 0;top:13px;}
.footer-wrapper .paging-control .underline{
	background-image: url(../../img/paging/paging.png);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -8px;
    right: 0;
    width: 80px;
    height: 3px;	
}


.intro-wrapper{width: 933px;height: 1038px;margin: 0 auto;position: relative;padding: 25px 0;}
.intro-wrapper{}


/* .vision-wrapper */
.vision-wrapper{
	height: 590px;
	position: relative;	
}

.vision-wrapper .header-block{
	background-image: url(../img/vision-and-mission/photo1.png);
	background-size: 333px;
	background-repeat: no-repeat;
	background-position: 0 0;	
	height: 590px;
	left: 0;
	position: relative;	
}

.vision-wrapper .header-block .title{
    color: #fff;
    font-size: 50px;
    text-align: left;
    margin: 50px 0 0 60px;
}

.vision-wrapper .sub-title{
    color: #1BB7D9;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}


.vision-wrapper ul{list-style-type: disc; margin-left: 20px; margin-bottom: 5px;}
.vision-wrapper ul li{padding: 5px 0; line-height: 20px;}


/* .learning-and-teaching */
.learning-and-teaching{
	height: 590px;
	position: relative;	
}

.learning-and-teaching .header-block{
	background-image: url(../img/learning-and-teaching/photo1.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top right;	
	height: 520px;
	right: 0;
	position: absolute;
	width: 610px;
}

.learning-and-teaching .title{
    color: #fff;
    font-size: 50px;
    text-align: left;
    margin: 100px 100px 50px 165px;
}
.learning-and-teaching .desc{
	color: #3A722F;
	font-size: 18px;
	text-align: justify;
	margin: 180px 0 0 160px;
	width: 320px;
	line-height: 26px;
}

.learning-and-teaching .photo2{
    background-image: url(../../img/learning-and-teaching/photo2.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 455px;
    height: 590px;
    position: absolute;
    top: 0;
    left: 0;
}

.learning-and-teaching .ppl-desc{
	width: 280px;
	position: absolute;
	bottom: 65px;
	left: 270px;
	line-height: 16px;
}

.body-wrapper.learning-and-teaching2 .content-inner .title{color: #5ebc5e;}
.body-wrapper.learning-and-teaching2 ul{margin-left: 10px;}
.body-wrapper.learning-and-teaching2 ul li{
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 10px;
}
.body-wrapper.learning-and-teaching2 .color-bg{background-color: #D9FFD7; margin: 10px 0;}

.body-wrapper.learning-and-teaching2 .page-subpage-bar.fullsize .line{
    background-size: 75%;
}



/* .research-and-knowledge-transfer */
.research-and-knowledge-transfer{
	height: 590px;
	position: relative;	
}

.research-and-knowledge-transfer  .left-block{position: relative;}

.research-and-knowledge-transfer .header-block{
	background-image: url(../img/research-and-knowledge-transfer/photo1.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;	
	height: 590px;
	left: 0;
	position: relative;	
}



.research-and-knowledge-transfer .header-block.col2{
	width: 610px;
}


.research-and-knowledge-transfer .header-block .sub-point{
	background-image: url(../img/research-and-knowledge-transfer/photo3.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;	
	width: 30%;
	height: 30%;
	position: absolute;
	bottom: 5%;
	right: 20%;
}


.research-and-knowledge-transfer .arrow-info{
	background-image: url(../img/research-and-knowledge-transfer/photo2.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;	
    position: absolute;
    bottom: 0;
    right: 5%;
    width: 35%;
    height: 85%;
}

.research-and-knowledge-transfer2.body-wrapper .content-inner .title{color: #F99D1C; line-height: 25px;}


.body-wrapper.research-and-knowledge-transfer2 ul{margin-left: 10px; margin-bottom: 10px;}
.body-wrapper.research-and-knowledge-transfer2 ul li{
    font-size: 11px;
    line-height: 20px;
    margin-bottom: 10px;
	position: relative;
    list-style: none;
}
.body-wrapper.research-and-knowledge-transfer2 ul li .bullet{
    position: absolute;
    top: 3px;
    left: -14px;
    font-size: 16px;
}

/* .partnership-and-community-engagement */
.partnership-and-community-engagement{
	height: 590px;
	position: relative;	
}
.partnership-and-community-engagement .left-block{position: relative;}

.partnership-and-community-engagement .header-block{
	background-image: url(../img/partnership-and-community-engagement/photo1.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;	
	height: 590px;
	left: 0;
	position: relative;	
}

.partnership-and-community-engagement .header-block.col2{
	width: 550px;
}


.partnership-and-community-engagement .pic{
    position: absolute;
    bottom: 2%;
    right: 0;
    width: 75%;
}

.body-wrapper.partnership-and-community-engagement2 ul{margin-left: 15px; margin-bottom: 10px;}
.body-wrapper.partnership-and-community-engagement2 ul li{
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 10px;
}

.partnership-and-community-engagement2{}
.partnership-and-community-engagement2.body-wrapper .content-inner .title{color: #006679;}


.fancybox-wrap{top:50px!important;}
.popup-item{position: relative; text-align: left;}
.popup-item .col-msg p{text-align: left;}
.popup-item a.btn-more{display: block; position: absolute; bottom: 10px; left: 10px; color: #5ebc5e;}
.popup-item1 .col-msg{right: 0; padding: 0px; position: absolute; bottom: 0; width: 45%;}
.popup-item1 .col-msg p{line-height: 20px; font-weight: 200;}
.popup-item1 .col-msg .top-msg{width: 100%; padding: 0;    }
.popup-item1 .col-msg .credit-msg{width: 100%; padding: 0; line-height: 20px; font-weight: 200; margin-bottom: 10px;}
.popup-item1 .col-msg .credit-msg b{font-weight: bold; font-size: 16px;}


.popup-item2 .col-msg{left: 3%; padding: 0px; position: absolute; top: 15%; width: 45%;}
.popup-item2 .col-msg p{line-height: 20px; font-weight: 200;}
.popup-item2 .col-msg .top-msg{width: 100%; padding: 0;    }
.popup-item2 .col-msg .credit-msg{width: 100%; padding: 0; line-height: 20px; font-weight: 200; margin-bottom: 10px;}
.popup-item2 .col-msg .credit-msg b{font-weight: bold; font-size: 16px;}


.popup-item3 .col-msg{right: 0; padding: 0px; position: absolute; bottom: 26%; width: 42%; color: #fff;}
.popup-item3 .col-msg p{line-height: 20px; font-weight: 200;}
.popup-item3 .col-msg .top-msg{width: 100%; padding: 0;    }
.popup-item3 .col-msg .credit-msg{width: 100%; padding: 0; line-height: 20px; font-weight: 200; margin-bottom: 10px;}
.popup-item3 .col-msg .credit-msg b{font-weight: bold; font-size: 16px;}



.popup-item4 .col-msg{left: 4%; padding: 0px; position: absolute; bottom: 20%; width: 45%;}
.popup-item4 .col-msg p{line-height: 20px; font-weight: 200;}
.popup-item4 .col-msg .top-msg{width: 100%; padding: 0;    }
.popup-item4 .col-msg .credit-msg{width: 100%; padding: 0; line-height: 20px; font-weight: 200; margin-bottom: 10px;}
.popup-item4 .col-msg .credit-msg b{font-weight: bold; font-size: 16px;}



.popup-item5 .col-msg{right: 0; padding: 0px; position: absolute; top: 8%; width: 26%;}
.popup-item5 .col-msg p{line-height: 20px; font-weight: 200;}
.popup-item5 .col-msg .top-msg{width: 100%; padding: 0;    }
.popup-item5 .col-msg .credit-msg{width: 100%; padding: 0; line-height: 20px; font-weight: 200; margin-bottom: 10px;}
.popup-item5 .col-msg .credit-msg b{font-weight: bold; font-size: 16px;}


.popup-item6 .col-msg{right: 0; padding: 0px; position: absolute; top: 27%; width: 41%;}
.popup-item6 .col-msg p{line-height: 20px; font-weight: 200;}
.popup-item6 .col-msg .top-msg{width: 100%; padding: 0;    }
.popup-item6 .col-msg .credit-msg{width: 100%; padding: 0; line-height: 20px; font-weight: 200; margin-bottom: 10px;}
.popup-item6 .col-msg .credit-msg b{font-weight: bold; font-size: 16px;}

.popup-item7 .col-msg{left: 5%; padding: 0px; position: absolute; bottom: 25%; width: 40%;}
.popup-item7 .col-msg p{line-height: 20px; font-weight: 200;}
.popup-item7 .col-msg .top-msg{width: 100%; padding: 0;    }
.popup-item7 .col-msg .credit-msg{width: 100%; padding: 0; line-height: 20px; font-weight: 200; margin-bottom: 10px;}
.popup-item7 .col-msg .credit-msg b{font-weight: bold; font-size: 16px;}

.popup-item8 .col-msg{left: 10%; padding: 0px; position: absolute; top: 25%; width: 45%; color: #fff;}
.popup-item8 .col-msg p{line-height: 20px; font-weight: 200;}
.popup-item8 .col-msg .top-msg{width: 100%; padding: 0;    }
.popup-item8 .col-msg .credit-msg{width: 100%; padding: 0; line-height: 20px; font-weight: 200; margin-bottom: 10px;}
.popup-item8 .col-msg .credit-msg b{font-weight: bold; font-size: 16px;}



.chairmans-forward .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.chairmans-forward .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.chairmans-forward .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.chairmans-forward .mCS-drak-thick.mCSB_scrollTools .mCSB_draggerRail,
.chairmans-forward .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color: #996666!important;}

.presidents-overview .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.presidents-overview .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.presidents-overview .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.presidents-overview .mCS-drak-thick.mCSB_scrollTools .mCSB_draggerRail,
.presidents-overview .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color: #996666!important;}



.vision-wrapper .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.vision-wrapper .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.vision-wrapper .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.vision-wrapper .mCS-drak-thick.mCSB_scrollTools .mCSB_draggerRail,
.vision-wrapper .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color: #1BB7D9!important;}

.learning-and-teaching2 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.learning-and-teaching2 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.learning-and-teaching2 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.learning-and-teaching2 .mCS-drak-thick.mCSB_scrollTools .mCSB_draggerRail,
.learning-and-teaching2 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color: #5ebc5e!important;}

.partnership-and-community-engagement2 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.partnership-and-community-engagement2 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.partnership-and-community-engagement2 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.partnership-and-community-engagement2 .mCS-drak-thick.mCSB_scrollTools .mCSB_draggerRail,
.partnership-and-community-engagement2 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color: #006679!important;}

.research-and-knowledge-transfer2 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.research-and-knowledge-transfer2 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.research-and-knowledge-transfer2 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.research-and-knowledge-transfer2 .mCS-drak-thick.mCSB_scrollTools .mCSB_draggerRail,
.research-and-knowledge-transfer2 .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color: #F99D1C!important;}


.owl-item .item{padding-left: 10px;}