/*
Name: Visia
Version: 1.3.1
Author: Aether Themes
Author URI: http://www.aetherthemes.com
*/

/* =Table of Contents
--------------------------------------------------------------
	=Common Styles
	=Typography
	=Buttons
	=Content Styles
	=Navigation
	=Hero
	=Services
	=Portfolio
	=Project
	=Team
	=Subscribe
	=Testimonials
	=Footer
	=Blog
	=Slider
	=Video
	=Media
*/


/* =Common Styles
-------------------------------------------------------------- */





    .conferenceapp-menu-button-container {
      display: none;
    }



    @media only screen and (max-width: 768px) {
      .conferenceapp-menu-button-container {
        display: flex;
        justify-content: end;
        align-items: center;
        padding-right: 20px;
        gap: 16px;
        margin-top: 3px;
      }
	  .icon.css-1n2mv2k p {
		margin: 0px;
	  }
	  .css-17uyvkx{
		display: none;
	  }
    }

	#hktdc-corporate-header {
  	min-height: 50px; /* 根據實際 header 高度調整 */
	}
	@media only screen and (max-width: 768px) {
	#hktdc-corporate-header {
  		min-height: 0px; /* 根據實際 header 高度調整 */
	}
    }
	#hktdc-corporate-header p {
	    margin: unset;
	    margin-top: unset;
	}

    .corporate-profile {
      /* display: inline-block;
      margin-right: 10px;
      right: 4px;*/
      cursor: pointer;
	  position: relative;
	  top: 5px;
    }
	img.css-1grcxmb {
		width: 25px;
		height: 25px;
	}

    #shareBtn {
    	margin: 5px 0px 0px 0px;
    	padding: 0px;
    }
	@media only screen and (max-width: 480px) {
		.css-14g5vu2 {
			position: fixed !important;
			border-radius: 0px !important;
			top: 86px !important;
			display: block;
			width: 100vw;
			padding-top: 10px !important;
			padding-bottom: 10px !important;
		}
		.css-wvjwk1 > a, .css-wvjwk1 > button {
			font-size: 1.3em;
			line-height: 1em;
		}
		.css-14g5vu2 .css-wvjwk1:first-child a {
			font-weight: bold;
		}
	}

    @media only screen and (max-width: 480px) {
		.nav-content li:nth-of-type(2) {
			/*padding-bottom: 20px;*/
		}
	}
	.nav-content li:nth-of-type(3) {
		border-top: 1px solid #fb5004 !important;
		/*padding: 0px !important;*/
		/*margin-top: 5px !important;*/
		margin-bottom: 20px;
		/*padding-bottom: 20px;*/
	}
	.user-login-logout a {
		color: #fb5004 !important;
		font-weight: bolder;
		border-bottom: 1px solid #f0f0f0;
		padding-bottom: 20px;
		margin-top: 0px;
	}
	.user-login-logout {
		border-top: 0px !important;
	}
	.nav-content li:nth-last-of-type(4) {
		/*border-top: 0px !important;*/
		/*margin-top: 0px !important;*/
		border-top: 1px solid #fb5004
	}
	.nav-content li:nth-last-of-type(2) {
		/*padding-bottom: 20px;*/

	}
	.nav-content li:last-of-type {
		padding-top: 40px !important;
		border-top: 1px solid #fb5004 !important;
	}
	.navmov > .nav-link > span.icon {
	    display: flex;
	    color: #fb5004;
	    font-weight: bolder;
	    gap: 3px;
		justify-content: center;
	}
	.navmov > .nav-link > span.icon > svg {
		position: relative;
		top: -1px;
	}


    .navbar-toggler {
      background: none;
      border: none;
      cursor: pointer;
      margin: 0 5px;
    }
    .mobile-top-bar-icon {
      width: 20px;
      height: 20px;
    }

    .mobile-share-btns {
      list-style: none;
      padding: 0;
    }
    .share-icon {
      width: 21px;
      height: 21px;
    }

.mobile-share-btns {
  padding-left: 0;
  text-align: center;
}
.itm-share {
  list-style: none;
  display: inline;
  margin-right: 1.5em;
  position: relative;
}
.itm-share:last-child {
  margin-right: 0;
}
.share-icon {
  cursor: pointer;
  width: 21px !important;
  height: 21px !important;
  position: relative;
  top: 2px;
  right: -1px;
}
.share-icon.smaller {
  width: 12px !important;
  height: 12px !important;
}

@media
 (min-width: 576px) {
  .share-icon {
    width: 21px !important;
    height: 21px !important;
  }  .share-icon.smaller {
    width: 18px !important;
    height: 18px !important;
  }
}

  /* new WeChat QR code */
  .wechat-qr {
    display: none;
    position: absolute;
    top: 50px; /* adjust position */
    left: 6vw;
    transform: translateX(-50%);
    background: white;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    z-index: 10000;
  }
  .wechat-qr.show {
    display: block;
  }
  .wechat-qr img {
    max-width: 200px;
    height: 200px;
  }
  .wechat-qr p {
    text-align: center;
    margin-top: 10px;
  }

    .css-1bfx0ml, .css-1fg9124, .css-1n2mv2k {
      display: flex;
      align-items: center;
    }
    .css-1n2mv2k div {
      width: 20px;
      height: 20px;
      border: 1px solid black;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 10px;
      color: #2A2A2E;
    }
    .css-1i33bg.ch-mobile-menu {
      display: inline-block;
    }


    .modal.fade.fit-modal.mdl-share {
      display: none;
    }
    .modal.fade.fit-modal.mdl-share.show {
      display: block !important;
	  z-index: 1000;
	  position: fixed;
    }
    .modal-dialog {
      width: 100vw;
      margin: 0 auto;
    }
    .modal-content {
      background: #ffffffee;
      border: 1px solid gray;
      height: 100vh;
    }
    .modal-body {
      padding: 20px;
    }
    .mdl-title {
      color: #000;
      font-size: 24px;
      text-align: center;
      margin-top: 50px;
      margin-bottom: 15px;
    }
    .close.mdl-close {
      cursor: pointer;
      float: right;
    }
    .mdl-close-icon {
      font-size: 20px;
    }


    .navigation.desktop { display: block; }
    .navigation.mobile { display: none; }
    @media only screen and (max-width: 480px) {
      .navigation.desktop { display: none; }
      .navigation.mobile { display: block; }
    }

    .mdl-close-icon {
    	font-size: 20px;
	    display: block;
	    width: 20px;
	    height: 20px;
	    -webkit-transform-origin: center center;
	    -o-transform-origin: center center;
	    transform-origin: center center;
	    -webkit-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	    transform: rotate(45deg);
    }
	.mdl-close-icon:before {
	    content: "";
	    background: #333;
	    position: absolute;
	    display: block;
	    width: 100%;
	    height: 2px;
	    left: 0;
	    top: 50%;
	    margin-top: -1px;
	}
	.mdl-close-icon:after {
	    content: "";
	    background: #333;
	    position: absolute;
	    display: block;
	    height: 100%;
	    width: 2px;
	    top: 0;
	    left: 50%;
	    margin-left: -1px;
	}

	.mdl-share {
	    display: none;
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.5);
	    z-index: 9999;
	    justify-content: center;
	    align-items: center;
	    opacity: 0;
	    transition: opacity 0.3s ease; /* fade */
	}


/* =Common Styles
-------------------------------------------------------------- */


body { 
	background: #fff;
	color: #616161;
	font: normal 15px "Open Sans", arial, sans-serif;
	font-weight: 400;
	line-height: 1.5em;
}

section { overflow: hidden; }
::selection { background: #060606; color: #fff; }
::-moz-selection { background: #060606; color: #fff; }
#loading { display: none; }


/* =Typography
-------------------------------------------------------------- */

.title { 
	color: #f47920;
	font: normal 18px "Open Sans", arial, sans-serif;
	font-size: 2em;
	letter-spacing: -0.02em;
	font-weight: 700;
	line-height: 1.5em;
}


p { color: #616161;
	line-height: 1.6em;
	margin: 0 0 20px;
}

em { font-style: italic; }
strong { font-weight: 400; }
small { font-size: 0.8em; }

h2,h3,h4,h5,h6 {
	color: #616161;
	font-style: normal;
	font-weight: 300;
	line-height: 1.17em;
	margin: 0 0 10px;
}

h1 {
	color: #f47920;
	font: normal 18px "Open Sans", arial, sans-serif;
	font-size: 2em;
	letter-spacing: -0.02em;
	font-weight: 700;
	line-height: 1.5em;
}

h2 {
	color: #f47920;
	font: normal 18px "Open Sans", arial, sans-serif;
	font-size: 2em;
	letter-spacing: -0.02em;
	font-weight: 700;
	line-height: 1.5em;
}

h3 {
	font-size: 1em;
	font-weight: 400;
	line-height: 1.7em;
	margin-top: 10px;
}

h4 {
	font-size: 1em;
	text-transform: uppercase;
	font-weight: 400;	
}

h5 {
	font-size: 1em;
	font-weight: 400;
}

h6 {
	font-size: 0.8em;
	text-transform: uppercase;
	font-weight: 400;
}

.content-bold{
	font: normal 15px "Open Sans", arial, sans-serif;
	font-weight: bold;
	color: #f47920;
	text-transform: uppercase;
	padding-right: 3px;
}


/* Typography for dark backgrounds */

.dark p, .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #fff; }
.dark a { color: #fff!important; }

/* Links */
a, a:visited { font-weight: 400; text-decoration: none; }


/* =Buttons
-------------------------------------------------------------- */

.button {
	display: inline-block;
	padding: 20px 55px;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.20em;
	font-weight: 400;
	border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
}

.dark .button { border: 1px solid #fff!important; }
.dark .button:hover { background: rgba(255, 255, 255, .1); filter: alpha(opacity=50); }

.button.no-border { border: none!important; padding: 20px 0px; }

.button.no-border:hover {
	border: none!important;
	background: transparent;
	opacity: .7;
    filter: alpha(opacity=70);
}

.button .icon {
	display: inline-block;
	margin-left: 17px;
	margin-bottom: -6px;
	width: 26px;
	height: 26px;
	cursor: pointer;
	background: url(../images/icons/right.png) no-repeat center center;
}


/* =Content Styles
-------------------------------------------------------------- */

.content { padding-top: 49px; text-align: center; }
.content.padded { padding-bottom: 100px; }

.parallax {
	width: 100%;
	background-attachment: fixed;
	background-position: 50% 0;
}

/* Parallax Fix */
@media only screen and (min-width: 1930px) { .parallax { background-size: cover; } }

.parallax.black { background-color: #060606; }

.parallax.no-parallax { background-size: cover!important; background-attachment: scroll!important; background-position: center!important; }

.parallax-bg1 { background-image: url(../images/parallax-bg1.png); }
.parallax-bg2 { background-image: url(../images/parallax-bg2.png); }
.parallax-bg3 { background-image: url(../images/parallax-bg3.png); }
.parallax-bg4 { background-image: url(../images/parallax-bg4.png); }


.sub-heading { margin: 48px auto; max-width: 630px; }

.border {
	display: block;
	width: 80px;
	height: 2px;
	background: #060606;
	margin: 0 auto;
}

.dark .border { background: #ffffff; }



/* Home page Upcoming Event Table */
.upcoming_event_table {
	border: solid 1px #f47920;
	width: 100%;
}

.upcoming_event_table th {
	padding: 5px;
	background-color: #f47920;
	color: #FFFFFF;
	font-size: 20px;
	text-align: left;
}

.upcoming_event_table td:nth-child(1) {
	padding: 5px;
	text-align: center;
	width: 20%;
}
.upcoming_event_table td:nth-child(2) {
	padding: 5px;
	width: 60%;
}
.upcoming_event_table td:nth-child(3) {
	padding: 5px;
	text-align: center;
}

/* Home page Upcoming Event Button */
.upcoming_event_btn {
	margin: 0px;
	background-color: #FFF;
	border:solid 1px #379ec0;
	display: inline-block;
	margin: 0px auto;
	width: 125px;
	padding-left: 0px;
	cursor: pointer;
	-webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition:    background-color 0.2s ease-in-out;
    -o-transition:      background-color 0.2s ease-in-out;
    transition:         background-color 0.2s ease-in-out;
}

.upcoming_event_btn:hover{
 background-color: #cbebf4;
}

.upcoming_event_btn img { padding-right: 0px !important}


.btn_upcoming_event{
	font-size: 1em;
	line-height: 32px;
	padding-left: 4px;
	color: #379ec0;
}

.btn_upcoming_event:after{
	content:'+';
	display:none;
}

.btn_upcoming_event:before{
	content:'Register Now';
	display:inline;
}

.upcoming_event_btn_full {
	margin: 0px;
	background-color: #FFF;
	border:solid 1px #ff4411;
	display: inline-block;
	margin: 0px auto;
	width: 125px;
	padding-left: 0px;
	cursor: pointer;
	-webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition:    background-color 0.2s ease-in-out;
    -o-transition:      background-color 0.2s ease-in-out;
    transition:         background-color 0.2s ease-in-out;
}

.upcoming_event_btn_full:hover{
 background-color: #ffdad1;
}

.upcoming_event_btn_full img { padding-right: 0px !important}


.btn_upcoming_event_full{
	font-size: 1em;
	line-height: 32px;
	padding-left: 4px;
	color: #ff4411;
}

.btn_upcoming_event_full:after{
	content:'+';
	display:none;
}

.btn_upcoming_event_full:before{
	content:'FULL';
	display:inline;
}




/* =Navigation
-------------------------------------------------------------- */

nav {
	position: fixed;
	top: 0;
	width: 100%;
	background: #fff;
	padding-bottom: 0px;
	z-index: 999;
}

/*.css-9r5xfc > div:nth-last-child(2) {
  display: none !important;
}*/



.navSelected {
	color: #f47920 !important;
}

.logo { 
	width: 32%;
	margin-left: 0;
	float: left;
	margin-top: 0.8em;
}

#share-menu{
	top: 7px;
	right: 0px;
	position: absolute;
	-webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition:    opacity 0.2s ease-in-out;
    -o-transition:      opacity 0.2s ease-in-out;
    transition:         opacity 0.2s ease-in-out;
	opacity: 0;
}

#share-menu li{
	display: inline-block;
	float: left;
	width: 25px;
}

#share-menu span{
	padding-right: 0px;
	margin: 0;
}

#share-menu2{
	padding-left: 8px;
}

#share-menu2 li{
	display: inline-block;
	float: left;
	width: 25px;
}

#share-menu2 span{
	padding-right: 0px;
	margin: 0;
}

#share-menu2 img { margin-top: 0 }

.share {
	position: absolute;
	z-index: 5;
	top: 0;
	right: 0;
	background-color: #b5b5b5;
	padding: 0 10px;
	cursor: pointer;
	-webkit-transition: right 0.2s ease-in-out;
    -moz-transition:    right 0.2s ease-in-out;
    -o-transition:      right 0.2s ease-in-out;
    transition:         right 0.2s ease-in-out;
}




#top-share:hover #share-menu{
	right: 0;
	cursor: pointer !important;
	opacity: 1;
}


#top-share:hover .share{
	right:140px;
	background: #ffaf75;
}

#top-share{
	position: absolute;
	top:-25px;
	right: 80px;
	width: 400px;
	height: 22px;
}

.btn-share{
	font-size: 13px;
	line-height: 28px;
	padding-left: 5px;
	color: #ffffff;
}

.icon-fb-share {
	float: right;
	top:-25px;
	right:40px;
	padding:0px;
	position:absolute;
	height:28px;
	width:28px;
}

.icon-fb-share img{
	opacity: 0.55;
	filter: gray;
	-webkit-filter: grayscale(1);
	-webkit-transition: all 0.3s ease-in-out;
}
.icon-fb-share img:hover {
	opacity: 1;
	filter: none;
	-webkit-filter: grayscale(0);
}


.icon-ig-share {
	float: right;
	top:-25px;
	right:0px;
	padding:0px;
	position:absolute;
	height:28px;
	width:28px;
}

.icon-ig-share img{
	opacity: 0.55;
	filter: gray;
	-webkit-filter: grayscale(1);
	-webkit-transition: all 0.3s ease-in-out;
}
.icon-ig-share img:hover {
	opacity: 1;
	filter: none;
	-webkit-filter: grayscale(0);
}




.btn {height: 60px;}

.navigation, .navmov { display: none; }

.desktop.navigation {
	display: block !important;
	width: 68%;
	margin-right: 0;
	margin-top: 44px;
	float: right;
}

.nav-line{
	/*margin-top:9px;*/
	width: 100%;
	border-bottom: 4px solid #f47920;
}

.desktop.navigation .nav-content { float: right; }

.desktop.navigation .nav-content li {
	float: left;
	margin-left: 15px;
	line-height: 30px; /* Set to the height of your own logo to center the text */
}

.desktop.navigation .nav-content li:first-of-type {
	margin-left: 0px;
}

.desktop.navigation .nav-content a {
	color: #616161;
	font-size: 14px;
	/*opacity: .5;
    filter: alpha(opacity=50);*/
}

.desktop.navigation .nav-content a:hover, .desktop.navigation .nav-content a.active  { opacity: 1; filter: alpha(opacity=100); }

.desktop.navigation .nav-content li:last-of-type { margin-right: 0px; }

@media only screen and (max-width: 480px) {
    .post-media img {
    	margin-top: 0px !important;
    }
}

/* Mobile Navigation */

.mobile.navigation {
	display: none;
	width: 90%;
	/*margin: 0 8%;*/
	float: left;
	font-size: 16px;
}

.mobile.navigation .nav-content {
	float: left;
	width: 100%;
	text-align: center;
}

.mobile.navigation .nav-content li {
	display: block;
	width: 84vw;
	margin-top: 20px;
	padding-top: 20px;
	/*border-top: 1px solid #f0f0f0;*/
	border-top: 1px solid #fb5004;
}

.mobile.navigation .nav-content li:first-of-type { border-top: none; }
.mobile.navigation .nav-content li:last-of-type {margin-bottom: 30px}

.mobile.navigation .nav-content a {
	display: block;
	color: #616161;
	font-size: 16px;

}

.nav-button {
	display: none;
	width: 23px;
	height: 25px;
	background: transparent;
	padding: 0;
	float: right;
	border: none;
	cursor: pointer;
}

/* Navigation Icon */
.icon-bar {
	display: block;
	float: left;
	width: 100%;
	height: 2px;
	margin-top: 6px;
	background: #060606;
}


/* =Hero
-------------------------------------------------------------- */

.hero { text-align: center; background-size: cover; }
.hero .content { padding-top: 0px; }

.ticker {
	overflow: hidden;
	height: 90px;
	vertical-align: baseline;
}

.ticker h1 {
	margin-bottom: 0px;
	height: 90px;
    -webkit-transition: margin-top 0.5s ease-in-out;
    -moz-transition:    margin-top 0.5s ease-in-out;
    -o-transition:      margin-top 0.5s ease-in-out;
    transition:         margin-top 0.5s ease-in-out;
}

.call-to-action { padding-top: 20px; }
.call-to-action li { display: inline-block; margin-right: 55px; }
.call-to-action li:last-of-type { margin-right: 0px;}


/* =Banner
-------------------------------------------------------------- */

.banner {  margin-top: 62px }

/* =About
-------------------------------------------------------------- */
.about {text-align: center; margin-bottom: 20px; background: #ffffff}
.gallery-title {text-align: center; margin-bottom: 20px; background: #ffffff}
.bold { font-weight: bold;}
.enrolment {text-align: center; margin-bottom: 0px}
.enrolment .photo{margin-top: 15px; }
.heading { margin: 0 auto; text-align: center; margin-top: 25px}
.heading2 {margin: 0 auto; margin-top: 10px;}
.heading3 {line-height: 1.8em}
.heading3-container {text-align: center; background: #efefef; padding: 10px 4%; margin: 20px auto 30px auto;margin-bottom: 15px;}
.enroll-header {text-align: center; background: #efefef; padding: 10px 4%; margin: 20px auto 30px auto;margin-bottom: 15px; width: 200px}
.enroll-line {border-bottom: 1px solid #cccccc; margin-bottom: 50px;display: none;}

.box3 {display: inline-block; margin-bottom: 20px}
.box3 li {width: 33.3%; height:220px;text-align: center; float:left; border-right: 1px solid #cccccc;}
.box3 li:last-of-type {border-right: none;}
.box3 li img{text-align: center; margin: 10px auto;}
.box3>li>span {float:left;width:100%;text-align: center;padding: 10px 20px;line-height: 1.7em;}

.organisations .box3 {margin-top: 0px; width: 100%; margin-bottom: 40px;}
.organisations .box3 li{border-right: none; margin: 30px auto; padding-bottom: 25px;padding-top: 0}
.organisations .box3 li a{ margin: 0 auto;}
.organisations .box3 li a .uni-logo {height:200px;width: 1%; display: table-cell; vertical-align: middle;text-align: center;}
.organisations .box3 li a .uni-logo img{text-align: center; vertical-align: middle; margin: 0px auto;}
.organisations .box3 li:hover .uni-logo{opacity: .7;filter: alpha(opacity=70);}

/* =Main
-------------------------------------------------------------- */

.month {margin: 0px auto; margin-bottom: 60px; background: #efefef; padding:10px 20px; text-align: center; width: 220px;font: normal 18px "Oswald", arial, sans-serif;
	font-size: 1.3em;
	letter-spacing: -0.02em;
	font-weight: 700;
	line-height: 1.5em;}
.line  { position:absolute; margin-left: 50%; left: -3px; margin-top: 130px; z-index: -99; width: 5px; height: 100%; background: #efefef;}
#char  { margin:0 auto;position: absolute;z-index: -9;left:-32px;padding-left: 50%;top:95px;}
#char img{ max-width: 64px; min-width: 38px}
#pin  { margin:0 auto;position: absolute;z-index: 9;left:-39px;padding-left: 50%;top:235px; pointer-events:none;}
#googleMap { width: 100%; height: 350px; margin: 0; padding: 0; overflow: hidden;}
.map-container {width: 100%; max-width: 740px}
#location1 {width: 100%; max-width: 800px; }
#location1 .mfp-close {width: 10%; padding-bottom: 10%}
iframe{ border: none}
.popup-close {float: right; cursor: pointer;}
.dim { z-index:-1; position:fixed; background:#000000; opacity:0.8; filter: alpha(opacity=80); width:100%; height:100%; top:0; left:0}
.map-popup {z-index:99999999999; display: none; position: fixed; right: 0; left: 0; margin-right: auto;  margin-left: auto; top:50%; margin-top: -220px}
.popup-box {background: #ffffff; max-width: 800px; width: 100%; border-top: 4px solid #f47920; text-align: left; padding: 30px; padding-top: 25px; margin: 0 auto}
.map {width: 100%; height: 300px; margin-top: 15px}
.group { margin-bottom: 90px; height: 100%;  }
.description .title {}
.group .description {text-align: justify;}
.group:nth-child(odd) .description { text-align: left; padding-right: 80px; }
.group:nth-child(odd) .image { text-align: right; padding-left: 15px; }
.m-image { display:none; text-align: right; padding-right: 15px; }
.group:nth-child(even) .description { text-align: left; padding-left: 80px; }
.group:nth-child(even) .image { text-align: left; padding-right: 15px; }
.group .description h3 {text-align: justify;}
.speaker .desc {text-align: justify;}
.group:last-of-type {margin-bottom: 50px; }
.detail {
	width: 140px;
	background-color: #f47920;
	padding-left: 18px;
	margin-top: 15px;
	cursor: pointer;
	-webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition:    background-color 0.2s ease-in-out;
    -o-transition:      background-color 0.2s ease-in-out;
    transition:         background-color 0.2s ease-in-out;
}

.index .detail {
	width: 128px
}

.detail2 {
	width: 140px;
	background-color: #f47920;
	padding-left: 18px;
	margin-top: 15px;
	
	-webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition:    background-color 0.2s ease-in-out;
    -o-transition:      background-color 0.2s ease-in-out;
    transition:         background-color 0.2s ease-in-out;
}

.index.detail2 {
	width: 100px
}


.detail:hover {
	background-color: #ffaf75.;
}

.btn-detail {
	font-size: 1em;
	line-height: 32px;
	padding-left: 8px;
	color: #ffffff;
}

.doc-container { position: relative; max-width: 700px; margin: 0 auto;}

.doc { position: absolute; right: 0;  display: inline-block; height:52px; padding:6px 14px; margin-bottom:5px; margin-left: 2px; background: #efefef}

.doc>div { text-align: left; float: left; line-height: 16px}

.doc>div>div { margin-left: 5px; margin-top: 3px }

.all-act {
	z-index: 99;
	width: 200px;
	background: url(../images/icon-detail2.png) no-repeat 28px 15px;
	background-color: #efefef;
	margin: 0px auto;
	margin-top: 0px;
	padding: 5px 0 5px 25px;
	cursor: pointer;
	-webkit-transition: background 0.2s ease-in-out;
    -moz-transition:    background 0.2s ease-in-out;
    -o-transition:      background 0.2s ease-in-out;
    transition:         background 0.2s ease-in-out;
}

.all-act:hover{
	background: url(../images/icon-detail.png) no-repeat 28px 15px;
	background-color: #ffaf75;
	color: #ffffff;
}

.all-act:hover .btn-all-act{
	color: #ffffff;
}

.btn-all-act{
	font-size: 1em;
	line-height: 32px;
	padding-left: 8px;
	color: #606060;
	text-align: center;
}

#online-enroll { 
	float: none;
	display: inline-block;
	background-color: #f47920;
	padding: 0px 25px;
	margin: 12px 10px;
	cursor: pointer;
	-webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition:    background-color 0.2s ease-in-out;
    -o-transition:      background-color 0.2s ease-in-out;
    transition:         background-color 0.2s ease-in-out;
}

#online-enroll:hover{
	background-color: #ffaf75;
}

#btn-online-enroll{
	padding: 0;
	float: none;
	font-size: 1em;
	line-height: 35px;
	color: #ffffff;
}

.content-num{
	color: #379ec0;
	font-size: 1.7em;
}

.profile {
	margin: 5px auto;
	margin-bottom: 20px;
	width: 170px;
	background-color: #f47920;
	padding-left: 0px;
	cursor: pointer;
	-webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition:    background-color 0.2s ease-in-out;
    -o-transition:      background-color 0.2s ease-in-out;
    transition:         background-color 0.2s ease-in-out;
}

.profile:hover{
	background-color: #ffaf75;
}


.profile2 {
	margin: 5px auto;
	padding-left: 0px;
	max-width: 500px;
	cursor: pointer;
	-webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition:    background-color 0.2s ease-in-out;
    -o-transition:      background-color 0.2s ease-in-out;
    transition:         background-color 0.2s ease-in-out;
}

.profile2:hover .speaker-preview{
	background-color: #a8a8a8;
}

.profile2:hover .speaker-preview-title{
	color: #616161;
}

.btn-profile{
	font-size: 1em;
	line-height: 32px;
	padding-left: 4px;
	color: #ffffff;
}

.share2 {
	display: inline-block;
	margin: 15px auto;
	margin-bottom: 10px;
	width: 125px;
	background-color: #b5b5b5;
	padding-left: 0px;
	-webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition:    background-color 0.2s ease-in-out;
    -o-transition:      background-color 0.2s ease-in-out;
    transition:         background-color 0.2s ease-in-out;
}

.event-share{ margin:10px auto; margin-bottom: 30px }


.btn-share2{
	font-size: 1em;
	line-height: 32px;
	padding-left: 4px;
	color: #ffffff;
}

.enroll2 {
	display: inline-block;
	margin: 15px auto;
	width: 125px;
	background-color: #f47920;
	padding-left: 0px;
	cursor: pointer;
	-webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition:    background-color 0.2s ease-in-out;
    -o-transition:      background-color 0.2s ease-in-out;
    transition:         background-color 0.2s ease-in-out;
}

.enroll2:hover{
	background-color: #ffaf75;
}

.enroll2 img { padding-right: 0px !important}

#btn-enroll-container{
	width: 220px;
	margin: 0 auto;
	cursor: pointer;
}

#btn-enroll-container:hover .enroll{
	background-color: #ffaf75;
}

.btn-enroll2{
	font-size: 1em;
	line-height: 32px;
	padding-left: 4px;
	color: #ffffff;
}

.speaker{
	border-top: 4px solid #f47920;
}


.speaker-bg{
	padding: 6px;
	background: #efefef;
	margin: 15px auto;
}

.speaker-photo{
	float: left;
	margin-right: 3%;
	height: 100%;
}


.speaker-title{
	font-size: 1.5em;
	font-weight: bold;
	margin-top: 15px;
	margin-bottom: 8px;
}

.speaker-des{float: left; width: 310px;}


.speaker-preview { margin: 0 auto; max-width: 500px; background: #d5d5d5; padding: 8px}
.speaker-preview-photo { width: 20%; float: left; padding-top: 2px}
.speaker-preview-des { width: 77%; margin-left:3%; float: left; text-align: left; padding-top: 10px}
.speaker-preview-title { font-weight: bold; }
.speaker-preview .heading2 { padding: 0 !important; margin:0 ; margin-top: 8px !important; font-size: 13px}

/* =Event
-------------------------------------------------------------- */
.event {margin: 20px auto; background: #efefef; max-width: 700px}
.event-point {margin: 20px auto; padding-bottom: 10px}
.event-point li {margin: 12px auto;  line-height: 1.7em; padding: 0 35px;}
.event-point li:last-of-type {}
.event-point img {padding-right: 6px; margin-top: -3px}
.event-top {margin-top:120px;}
.event-top .heading2{padding: 0 35px; margin-top: 15px}
.event-top .title{margin: auto}
.event-line {border-bottom: 1px solid #cccccc;width: 320px; margin: 0 auto; margin-bottom: 15px; }
.separate-line {margin-top:15px;margin-bottom: 40px; }

.content-point {margin-top: 10px; margin-bottom: 45px}
.content-point li { line-height: 2em;}
.content-point li:before{
      content:'•';/*■*/
      color: #f47920;
      padding-right: 5px;
      padding-bottom: 2px;
    } 

}

/* =Services
-------------------------------------------------------------- */

.icons .overview {
	position: relative;
	float: left;
	width: 16.6666666667%;
	text-align: center;
	overflow: visible;
}

/*.icon {
	display: inline-block;
	width: 64px;
	height: 64px;
	cursor: help;
	margin-bottom: 10px;
}*/

.icon.ux { background: url(../images/icons/ux.png) no-repeat top; background-size: 64px 128px; }
.icon.design { background: url(../images/icons/design.png) no-repeat top; background-size: 64px 128px; }
.icon.seo { background: url(../images/icons/seo.png) no-repeat top; background-size: 64px 128px; }
.icon.social { background: url(../images/icons/social.png) no-repeat top; background-size: 64px 128px; }
.icon.tech { background: url(../images/icons/tech.png) no-repeat top; background-size: 64px 128px; }
.icon.commerce { background: url(../images/icons/commerce.png) no-repeat top; background-size: 64px 128px; }
.icon.config { background: url(../images/icons/config.png) no-repeat top; background-size: 64px 128px; }
.icon.heart { background: url(../images/icons/heart.png) no-repeat top; background-size: 64px 128px; }
.icon.coffee { background: url(../images/icons/coffee.png) no-repeat top; background-size: 64px 128px; }
.icon.plane { background: url(../images/icons/plane.png) no-repeat top; background-size: 64px 128px; }
.icon.calculator { background: url(../images/icons/calculator.png) no-repeat top; background-size: 64px 128px; }
.icon.portfolio { background: url(../images/icons/portfolio.png) no-repeat top; background-size: 64px 128px; }
.icon:hover { background-position: bottom; }


.tooltip {
	display: none;
	position: absolute;
	width: 260px;
	background: #060606;
	background: rgba(6, 6, 6, .85);
	top: auto;
	bottom: 100%;
	left: 50%;
	margin-left: -130px;
	padding: 20px;
	margin-bottom: 30px;
	border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
}

.feature-list {
	font-style: italic;
	font-weight: 300;
	font-size: 0.9333333333333em;
	color: #fff;
	color: rgba(255, 255, 255, .90)!important;
	text-align: left;
	color: #fff;
}

.list-dot {
	display: inline-block;
	margin-right: 15px;
	width: 7px;
	height: 7px;
	border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
}

.feature-list li { padding-bottom: 10px; }

.arrow-down {
	display: none;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: auto;
	bottom: 100%;
	margin-bottom: 22px;
	width: 0; 
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid rgba(6, 6, 6, .85); 
}

.visible { display: block; }


/* =Portfolio
-------------------------------------------------------------- */

.portfolio { width: 100%; }
.projectlist { margin: 50px auto; background: transparent; margin-bottom: 0}
.projectlist li { width: 100%; margin: 0px auto; list-style-type: none; z-index: 0;}
.projectlist h3 {text-align: justify}
.projectlist .odd .photo{float: right; background: url(../images/act-imgbg.png); width: 411px; height: 220px}
.projectlist .odd .description{float: left; padding-right: 60px}
.projectlist .odd .photo img {width: 370px; height: 200px; position:absolute;right: 10px; top: 10px;}
.projectlist .even .photo{float: left; background: url(../images/act-imgbg2.png); width: 411px; height: 220px}
.projectlist .even .description{float: right; padding-left: 60px}
.projectlist .even .photo img {width: 370px; height: 200px; position:absolute;left: 10px; top: 10px;}
.projectlist li:last-of-type{margin-bottom: 0px;}

.projectlist li>div { display: block; padding-bottom: 85px; position: relative; }
.projectlist a:hover { 
	cursor: initial;
}

.date {
	color: #616161;
	font: normal 15px "Droid Sans", arial, sans-serif;
	font-weight: 300;
	font-weight: bold;
	display: inline-block;
}

.projectinfo { position: absolute; width: 100%; height: 100%; top: 0; z-index: 100; }
.meta { position: absolute; bottom: 0; margin-bottom: 25px; width: 100%; text-align: center; }
.meta h4, .project-title h4 { margin-bottom: 6px; }
.meta h6, .project-title h6 { margin-bottom: 0px; }
.meta em, .project-title em { font-family: "Times New Roman", Times, serif; font-style: italic; text-transform: lowercase; color: #424242; }
.projectlist a:hover .meta h4, .projectlist a:hover .meta em { color: #fff!important; }

/* Filtering */
#portfolio-grid .mix { }
.filtering { margin-top: 0; background: #f47920; text-align: center; line-height: 3em; max-width: 100%; margin: 0 auto}
.filtering li { margin-left: 10px; }
.filtering li:last-of-type {margin-right: 0;}
.filtering li:after {
	content: "/";
	color: #ffffff;
	padding-left: 15px;
}
.filtering li:last-of-type:after { content: ""; }
.filter {color: #fbc9a6; cursor: pointer; display: inline-block; }

.filtering2 { background: #f47920; line-height: 2em; max-width: 100%; margin: 0 auto;padding: 10px 0; text-align: center;}
.filtering2 li { margin-left: 10px; }
.filtering2 li:last-of-type {margin-right: 0;}
.filtering2 li:after {
	content: "/";
	color: #ffffff;
	padding-left: 15px;
}
.filtering2 li:last-of-type:after { content: ""; }
.filter2 {color: #fbc9a6; cursor: pointer; display: inline-block;  }
.filter2 a,.filter2  a:visited { color: #fbc9a6; font-weight: 400; text-decoration: none; }
.filter2 a:hover{ color: #ffffff}

.filter .filter-button {color: #fbc9a6 !important}
.filter .filter-button:hover {color: #ffffff !important}


.act .filter:hover{ color: #ffffff}


/* =Project
-------------------------------------------------------------- */

.ajax-section { position: relative; }
.loader { display: none; background: #fff url(../images/loading.gif) no-repeat center 250px; width: 100%; height: 100%; position: absolute; z-index: 200; }
.project-hero { position: relative; }
.closeProject { position: absolute; bottom: 0px; left: 50%; margin-left: -20px; z-index: 200; }
.nextProject { position: absolute; top: 67%; right: -100px; z-index: 200; }
.prevProject { position: absolute; top: 67%; left: -100px; z-index: 200; }
#ajaxpage { padding-top: 50px; padding-bottom: 50px; }

.nextProject a, .prevProject a { 
	display: block; 
	width: 20px; 
	height: 48px; 
	opacity: .4;
    filter: alpha(opacity=40);
}

.nextProject a:hover, .prevProject a:hover {
	opacity: 1;
    filter: alpha(opacity=100);
}

.nextProject a { background: url(../images/icons/project-next.png) no-repeat center center; }
.prevProject a { background: url(../images/icons/project-prev.png) no-repeat center center; }

.nextProject a.disabled, .prevProject a.disabled { display: none; }

.slider img { width: 100%; }

.slider-pager {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

.small-border {
	display: block;
	width: 150px;
	margin: 0 auto;
	height: 1px;
	background: #e9e9e9;
}

.bx-pager-item { display: inline-block; }
.bx-pager-link {
	display: inline-block;
	text-indent: -999em; 
	width: 12px; 
	height: 12px;
	margin: 0 5px;
	background: url(../images/projects/pager.png) no-repeat top center;
	background-size: 12px 24px; 
}

.bx-pager-link.active { background: url(../images/projects/pager-active.png) no-repeat top center; background-size: 12px 12px; }
.bx-pager-link:hover { background-position: bottom; }	

.project-title { text-align: center; padding: 25px 0px 50px; }
.project-info {  border-bottom: 1px solid #E9E9E9; }
.project-info h6 { border-bottom: 1px solid #E9E9E9; padding-bottom: 10px; margin-bottom: 20px;  }

i.icon-remove { 
	display: block; 
	width: 26px; 
	height: 26px;
	background: url(../images/icons/close.png) no-repeat;
	background-size: 26px 26px;
	filter: alpha(opacity=50);
	opacity: .5;
}

i.icon-remove:hover {
	filter: alpha(opacity=100);
	opacity: 1;
}

.project-gallery-next .bx-next, .project-gallery-prev .bx-prev { 
	position: absolute; 
	top: 45%; 
	opacity: .5; 
	filter: alpha(opacity=50); 
	right: auto;
	left: auto;
	text-indent: -999em;
	width: 34px;
	height: 36px;
	margin-top: -18px;
}

.project-gallery-next .bx-next  { 
	background: #ffffff url('../images/icons/project-gallery-next.png') no-repeat center center; 
	background-size: 22px 22px; 
	right: 0;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	   -moz-border-radius-topleft: 3px;
	   -moz-border-radius-bottomleft: 3px;
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
}

.project-gallery-prev .bx-prev  { 
	background: #ffffff url('../images/icons/project-gallery-prev.png') no-repeat center center; 
	background-size: 22px 22px; 
	left: 0;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	   -moz-border-radius-topright: 3px;
	   -moz-border-radius-bottomright: 3px;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px; 
}


/* =Team
-------------------------------------------------------------- */

.team-list { text-align: center; padding: 50px 0px 30px; float: left; }

.name { width: 100%; }
.name h4 { margin-bottom: 6px; }
.name h6 { margin-bottom: 20px; }
.name em { font-family: "Times New Roman", Times, serif; font-style: italic; text-transform: lowercase; color: #424242; }

.social-list li { display: inline-block; }

.social-icon.small {
	display: inline-block;
	width: 26px;
	height: 26px;
    filter: alpha(opacity=50);
	opacity: .5;
}

.social-icon.small:hover {
	filter: alpha(opacity=100);
	opacity: 1;
}

.social-icon.small.facebook { background: url(../images/icons/facebook-small.png) no-repeat center center; background-size: 26px 26px; }
.social-icon.small.twitter { background: url(../images/icons/twitter-small.png) no-repeat center center; background-size: 26px 26px;}
.social-icon.small.google { background: url(../images/icons/google-small.png) no-repeat center center; background-size: 26px 26px;}
.social-icon.small.behance { background: url(../images/icons/behance-small.png) no-repeat center center; background-size: 26px 26px;}
.social-icon.small.linkedin { background: url(../images/icons/linkedin-small.png) no-repeat center center; background-size: 26px 26px;}


/* =Subscribe
-------------------------------------------------------------- */

.value {
	display: block;
	color: #fff;
	font-size: 52px;
	font-weight: 300;
	padding-bottom: 20px;
	padding-top: 50px;
}

.subscribe { padding-top: 30px; }

/* =Testimonials
-------------------------------------------------------------- */

#bx-pager { margin-top: 50px; }
#bx-pager li { width: 25%; float: left; text-align: center; }
#bx-pager a img {
	opacity: .4;
    filter: alpha(opacity=40); 
}

#bx-pager a:hover img, #bx-pager a.active img {
	opacity: 1;
    filter: alpha(opacity=100);
}

.bxslider { text-align: center; padding-top: 35px; }
.bxslider h3 { line-height: 1.6em; }
.bxslider h6 { margin-bottom: 35px; color: #8f8f8f; }

.bx-next, .bx-prev {
	position: absolute;
	display: block;
	text-indent: -999em;
	top: 60%;
	width: 20px;
	height: 48px;
	cursor: pointer;
	opacity: .5;
    filter: alpha(opacity=50);
}

.bx-next:hover, .bx-prev:hover {
	opacity: 1;
    filter: alpha(opacity=100);
}

.bx-next {
	right: -100px;
	background: url(../images/icons/next.png) no-repeat center center;
}

.bx-prev {
	left: -100px;
	background: url(../images/icons/prev.png) no-repeat center center;
}


/* =Footer
-------------------------------------------------------------- */

footer {}
.contact { text-align: center; background: #efefef; padding:20px 100px 0px 100px;}

.enroll {
	margin: 0 auto;
	width: 220px;
	background-color: #f47920;
	cursor: pointer;
	-webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition:    background-color 0.2s ease-in-out;
    -o-transition:      background-color 0.2s ease-in-out;
    transition:         background-color 0.2s ease-in-out;
}

.enroll:hover{
	background-color: #ffaf75;
}

.btn-enroll{
	font-size: 1em;
	line-height: 40px;
	padding-left: 8px;
	color: #ffffff;
}


.contact ::selection {
	background: #fff;
	color: #060606; 
}

.contact ::-moz-selection { 
	background: #fff;
	color: #060606; 
}

.contact li img { margin-top: -1px; }

.contact li { margin: 5px auto; text-align: left; }

.contact ul {margin: 12px 0 16px 0; float: left; display: inline-block;}

.contact .logo-hktdc {float:left; display:inline-block; padding-top: 25px; padding-right: 25px;padding-left: 25px}

.contact a {color: #616161}

.contact-heading { margin-top: 30px; }

.contact a:hover img{opacity: .7;filter: alpha(opacity=70); }

.enrolment .contact {padding-top: 10px;}

.enrolment .main {margin-bottom: 30px;}

.enrolment .section:nth-child(even) .photo{display: inline-block;float: left; margin-right: 27px;}
.enrolment .section:nth-child(even) .text-group{width:665px;display: inline-block;float: left; text-align: left;}

.enrolment .section:nth-child(odd) .photo{display: inline-block;float: right; margin-left: 27px;}
.enrolment .section:nth-child(odd) .text-group{width:665px;display: inline-block;float: left; text-align: left;}

.enrolment .section { margin-top: 40px}

.enrolment .deadline { margin-bottom: 40px; margin-top:15px}

.deadline {margin:0 auto; margin-bottom: 10px}

.footer { text-align: center; margin: 0 8%; margin-top: 15px}


.border-line {  border-bottom: 1px solid #c2c2c2; width: 100%; margin-top:5px; }

#tel-email {width:20px; display:inline-block}

/* END FORMS */

.loader { margin-top: 15px; }

#alert {
	display: none;
	margin-top: 30px;
}

.universities { margin-top: 20px; margin-bottom: 5px; text-align: center;}

.universities li {
	display: inline-block;
	margin-right: 5px;
	margin-left: 5px;
	margin-bottom: 10px}

.universities :last-of-type {
	margin-right: 0;
}


.social-links {
	text-align: center;
	margin-top: 5px;
	margin-bottom: 20px;
}

.social-links li {
	display: inline-block;
	margin-right: 5px;
}


.social-links li:last-of-type { margin-right: 0px; }

.copyright { margin-bottom: 5px; text-align: center; font-size: 0.8em}

.uni-city {background: url(../images/uni-city-bw.jpg) no-repeat;background-position: center center; width: 35px; height: 40px}
.uni-city:hover {background: url(../images/uni-city-colour.jpg) no-repeat; background-position: center center; width: 35px; height: 40px}
.uni-hsmc {background: url(../images/uni-hsmc-bw.jpg) no-repeat; background-position: center center; width: 40px; height: 40px}
.uni-hsmc:hover {background: url(../images/uni-hsmc-colour.jpg) no-repeat; background-position: center center; width: 40px; height: 40px}
.uni-bu {background: url(../images/uni-bu-bw.jpg) no-repeat;background-position: center center; width: 32px; height: 40px}
.uni-bu:hover {background: url(../images/uni-bu-colour.jpg) no-repeat; background-position: center center; width: 32px; height: 40px}
.uni-hkdi {background: url(../images/uni-hkdi-bw.jpg) no-repeat; background-position: center center; width: 30px; height: 40px}
.uni-hkdi:hover {background: url(../images/uni-hkdi-colour.jpg) no-repeat; background-position: center center; width: 30px; height: 40px}
.uni-lu {background: url(../images/uni-lu-bw.jpg) no-repeat;background-position: center center; width: 37px; height: 40px}
.uni-lu:hover {background: url(../images/uni-lu-colour.jpg) no-repeat; background-position: center center; width: 37px; height: 40px}
.uni-thei {background: url(../images/uni-thei-bw.jpg) no-repeat; background-position: center center; width: 60px; height: 40px}
.uni-thei:hover {background: url(../images/uni-thei-colour.jpg) no-repeat; background-position: center center; width: 60px; height: 40px}
.uni-cu {background: url(../images/uni-cu2-bw.jpg) no-repeat;background-position: center center; width: 56px; height: 40px}
.uni-cu:hover {background: url(../images/uni-cu2-colour.jpg) no-repeat; background-position: center center; width: 56px; height: 40px}
.uni-poly {background: url(../images/uni-poly-bw.jpg) no-repeat; background-position: center center; width: 42px; height: 40px}
.uni-poly:hover {background: url(../images/uni-poly-colour.jpg) no-repeat; background-position: center center; width: 42px; height: 40px}
.uni-ust {background: url(../images/uni-ust-bw.jpg) no-repeat;background-position: center center; width: 26px; height: 40px}
.uni-ust:hover {background: url(../images/uni-ust-colour.jpg) no-repeat; background-position: center center; width: 26px; height: 40px}
.uni-hku {background: url(../images/uni-hku-bw.jpg) no-repeat; background-position: center center; width: 35px; height: 40px}
.uni-hku:hover {background: url(../images/uni-hku-colour.jpg) no-repeat; background-position: center center; width: 35px; height: 40px}
.uni-vtc {background: url(../images/uni-vtc2-bw.jpg) no-repeat;background-position: center center; width: 177px; height: 40px}
.uni-vtc:hover {background: url(../images/uni-vtc2-colour.jpg) no-repeat; background-position: center center; width: 177px; height: 40px}
.uni-twc {background: url(../images/uni-twc-bw.jpg) no-repeat;background-position: center center; width: 33px; height: 40px}
.uni-twc:hover {background: url(../images/uni-twc-colour.jpg) no-repeat; background-position: center center; width: 33px; height: 40px}
.uni-ied {background: url(../images/uni-ied-bw.jpg) no-repeat;background-position: center center; width: 36px; height: 40px}
.uni-ied:hover {background: url(../images/uni-ied-colour.jpg) no-repeat; background-position: center center; width: 36px; height: 40px}
.uni-centennial {background: url(../images/uni-centennial-bw.jpg) no-repeat;background-position: center center; width: 30px; height: 40px}
.uni-centennial:hover {background: url(../images/uni-centennial-colour.jpg) no-repeat; background-position: center center; width: 30px; height: 40px}
.uni-ou {background: url(../images/uni-ou-bw.jpg) no-repeat;background-position: center center; width: 36px; height: 40px}
.uni-ou:hover {background: url(../images/uni-ou-colour.jpg) no-repeat; background-position: center center; width: 36px; height: 40px}
.uni-caritas {background: url(../images/uni-caritas-bw.jpg) no-repeat;background-position: center center; width: 32px; height: 40px}
.uni-caritas:hover {background: url(../images/uni-caritas-colour.jpg) no-repeat; background-position: center center; width: 32px; height: 40px}



.fb {background: url(../images/soc-fb-bw.png) no-repeat; width: 22px;height: 22px}
.fb:hover {background: url(../images/soc-fb-colour.png) no-repeat; width: 22px;height: 22px}
.tw {background: url(../images/soc-tw-bw.png) no-repeat; width: 22px;height: 22px}
.tw:hover {background: url(../images/soc-tw-colour.png) no-repeat; width: 22px;height: 22px}
.in {background: url(../images/soc-in-bw.png) no-repeat; width: 22px;height: 22px}
.in:hover {background: url(../images/soc-in-colour.png) no-repeat; width: 22px;height: 22px}
.google {background: url(../images/soc-google-bw.png) no-repeat; width: 22px;height: 22px}
.google:hover {background: url(../images/soc-google-colour.png) no-repeat; width: 22px;height: 22px}



/* =Blog
-------------------------------------------------------------- */

#blog { margin-top: 30px; }

/* Post Styles */
.post { 
	position: relative;
	text-align: left;
	margin-top: 50px;
	padding: 0px 0px 30px 70px;
	border-bottom: 1px solid #e9e9e9;
}

.post-media { position: relative; }

.post-media img {
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	margin-top: 20px;
}

.post .date {
	position: absolute;
	text-align: center;
	width: 40px;
	padding-bottom: 10px;
	top: 0;
	left: 0;
	text-transform: uppercase;
	font-size: 1.6em;
	letter-spacing: 0.2em;
	line-height: 0.8em;
	border-bottom: 1px solid #e9e9e9;
}

.post .date small { font-size: 0.5833333333333333em; }

.post-title h2 {
	padding-top: 20px;
	text-transform: none;
	letter-spacing: normal;
}

.post.quote .post-title h2, .post.link .post-title h2 {
	font-size: 1em!important;
	text-transform: uppercase;
	letter-spacing: 0.20em;
	padding: 0;
}

.post-title a { color: #060606!important; }
.post-meta h6, .post-meta a { color: #a4a4a3!important; }


.gallery-next, .gallery-prev { position: absolute; z-index: 100; display: block; bottom: 10px; }
.gallery-next { right: 10px; }
.gallery-prev { right: 37px; }
.gallery-next .bx-next, .gallery-prev .bx-prev { 
	position: static; 
	width: auto; 
	height: auto; 
	top: auto; 
	opacity: 1; 
	filter: alpha(opacity=100); 
	right: auto;
	left: auto;
	text-indent: -999em;
	width: 22px;
	height: 22px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.gallery-next .bx-next  { background: #f47920 url('../images/blog/next.png') no-repeat; background-size: 22px 22px;}
.gallery-prev .bx-prev  { background: #f47920 url('../images/blog/prev.png') no-repeat; background-size: 22px 22px;}

#album {margin-bottom: 20px; text-align: center}
#album li {margin:0 auto; width: 33%; max-width: 400px; display: inline-block; vertical-align: top; margin-bottom: 1%}
#album li>a>div {padding: 15px; padding-bottom: 5px; background: #efefef}
#album .content-bold {text-align: center; height: 60px; width: 400px; color: #f47920; display: table-cell; vertical-align: middle}
#album li:hover .content-bold{color: #ffaf75}
#album .cover {position: relative}
#album li .cover .bw {position: absolute; top:0; left:0; display: none; opacity: 0;
   transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out}
#album li:hover .cover .bw {opacity: 1; display: block}

/* Sidebar styles */

.widget {
	text-align: left;
	margin-top: 50px;
}

.search {
	border: none;
	float: left;
	outline: none;
	padding: 0px 0px 0px 10px;
	width: 80%;
	height: 40px;
	background: #fff;
	color: #aaaaaa;
	border-bottom: 2px solid #e9e9e9;
	border-left: 1px solid #e9e9e9;
	border-top: 1px solid #e9e9e9;
	-webkit-appearance: none;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.search-submit {
	margin: 0;
	padding: 0;
	border: none;
	float: left;
	outline: none;
	cursor: pointer;
	width: 20%;
	height: 40px;
	text-indent: -999em;
	background: #fff url(../images/blog/search.png) no-repeat center center;
	background-size: 16px 16px;
	text-decoration: none;
	-webkit-appearance: none;
	border: 1px solid #e9e9e9;
	border-bottom: 2px solid #e9e9e9;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}


.textwidget {
	font-size: 0.8666666666667em;
	line-height: 1.6em;
}

.cat-item, .recentcomments {
	font-size: 0.8666666666667em;
	padding-bottom: 8px;
	margin-bottom: 15px;
	border-bottom: 1px solid #e9e9e9;
}


.cat-item a, .recentcomments a { color: #060606!important; font-weight: 400; }

.tagcloud a {
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 10px;
	font-size: 0.8em;
	text-transform: uppercase;
	padding: 5px 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.widget-archive a, .widget-recent-entries a {
	color: #060606!important; 
	font-weight: 400;
	font-size: 0.8666666666667em;
	display: block;
	padding-bottom: 8px;
	margin-bottom: 15px;
	border-bottom: 1px solid #e9e9e9;
}

/* Comments */

#comments { text-align: left; padding-top: 50px; }
#comments-title { margin-left: 70px; border-bottom: 2px solid #e9e9e9; padding-bottom: 30px; margin-bottom: 5px; }

.comment { float: left; }
.comment-body { position: relative; margin-left: 70px; border-top: 1px solid #e9e9e9; padding-top: 30px; }
.comment-author { position: absolute; top: 30px; left: -70px;}
.comment-author img { 
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.comment .children { margin-left: 70px; }

.fn { display: block; margin-bottom: 10px; }
.comment-meta, .comment-meta a { color: #a4a4a3!important; }

#respond { margin-left: 70px; margin-top: 50px; }
#reply-title { border-bottom: 2px solid #e9e9e9; padding-bottom: 30px; margin-bottom: 5px; }

.comment-reply-form { border-top: 1px solid #e9e9e9; }

.comment-notes { margin-top: 10px; color: #a4a4a3; }

.control-group label, .control-group .controls { display: inline-block; }
.control-group label { margin-left: 10px; font-weight: 400; }
.control-group .controls input { 
	margin-top: 15px;
	border: none;
	outline: none;
	height: 35px;
	background: #fff;
	padding-left: 15px;
	color: #a4a4a3;
	text-decoration: none;
	border: 1px solid #e9e9e9;
	border-bottom: 2px solid #e9e9e9;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 

}

.control-group .controls textarea {
	margin-top: 15px;
	border: none;
	outline: none;
	height: 180px;
	background: #fff;
	padding-left: 15px;
	padding-top: 15px;
	color: #a4a4a3;
	text-decoration: none;
	border: 1px solid #e9e9e9;
	border-bottom: 2px solid #e9e9e9;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.controls button {
	border: none;
	outline: none;
	padding: 0;
	margin: 0;
	outline: none;
	-webkit-appearance: none;
	background: #fff;
	cursor: pointer;
	margin-top: 15px;
	font-size: 0.8em;
	text-transform: uppercase;
	font-family: inherit;
	padding: 10px 20px;
	color: #a4a4a3;
	border: 1px solid #e9e9e9;
	border-bottom: 2px solid #e9e9e9;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #ffffff;
}

.controls button:hover {
	background: #fff;
	background: -moz-linear-gradient(top, #ffffff 0%, #f5f5f5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f5f5));
	background: -webkit-linear-gradient(top, #ffffff 0%,#f5f5f5 100%);
	background: -o-linear-gradient(top, #ffffff 0%,#f5f5f5 100%);
	background: -ms-linear-gradient(top, #ffffff 0%,#f5f5f5 100%);
	background: linear-gradient(top, #ffffff 0%,#f5f5f5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 );
}


/* =Slider
-------------------------------------------------------------- */
.slider-cover { width: 100%; background: #fff; }

#vegas-next, #vegas-prev {
	position: absolute;
	display: block;
	text-indent: -999em;
	width: 20px;
	height: 48px;
	cursor: pointer;
	top: 50%;
	margin-top: -24px;
}

#vegas-next:hover, #vegas-prev:hover {
	opacity: .5;
    filter: alpha(opacity=50);
}

#vegas-next {
	right: -100px;
	background: url(../images/icons/next.png) no-repeat center center;
}

#vegas-prev {
	left: -100px;
	background: url(../images/icons/prev.png) no-repeat center center;
}

.vegas-loading {
	display: none;
}

.vegas-overlay {
	background: transparent url(../images/slider/overlays/01.png);
	opacity: 0.5;
	z-index: -1;
}

.vegas-background {
	-ms-interpolation-mode: bicubic;
	image-rendering: optimizeQuality;
    max-width: none !important; /* counteracts global img modification by twitter bootstrap library */
	z-index: -2;
}

.vegas-overlay,
.vegas-background {
	-webkit-user-select: none;
	 -khtml-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}


/* =Video
-------------------------------------------------------------- */

#big-video-wrap{overflow:hidden;position:fixed;height:100%;width:100%;top:0;left:0; z-index: -2;}
#big-video-vid,#big-video-image{position:absolute;}
#big-video-control-container{position:fixed;bottom:20px;padding: 0 20px;width:100%;
  -webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;}
#big-video-control{width:100%;height:16px;position:relative;}
#big-video-control-middle{margin: 0 56px 0 24px;}
#big-video-control-bar{width:100%;height:16px;position:relative;cursor:pointer;}
#big-video-control-progress{position:absolute;top:7px;height:3px;width:0%;background:#fff;}
#big-video-control-track{position:absolute;top:8px;height:1px;width:100%;background:#fff;}
#big-video-control-bound-left{left:0;}
#big-video-control-bound-right{right:-1px}
#big-video-control-track .ui-slider-handle {opacity:0;}
#big-video-control-playhead{left:30%;}
#big-video-control-play{position:absolute;top:0;left:0;height:16px;width:16px;background-image:url('bigvideo.png');}
#big-video-control-timer{position:absolute;top:1px;right:0;color:#fff;font-size:11px;}
#big-video-control-playhead,#big-video-control-bound-left,#big-video-control-bound-right{position:absolute;top:0;height:16px;width:1px;background:#fff;}
#big-video-control .ui-slider-handle{border-left:solid 1px #fff; width:16px;height:16px;position:absolute;top:-8px;}
.transparent{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
.vjs-big-play-button{display:none !important;}



/* =Media
-------------------------------------------------------------- */

/* Large screens */
@media only screen and (min-width : 1680px) {
	.bx-next { right: -250px; }
	.bx-prev { left: -250px; }
	#nextProject { right: -250px; }
	#prevProject { left: -250px; }

}

/* Tablet Landscape */
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.parallax { background-size: cover; background-attachment: scroll; background-position: top center!important; }
	.fade, .slide, .entrance, .hatch { opacity: 1!important; }
	.ae-animation-fade, .ae-animation-slide, .ae-animation-entrance, .ae-animation-hatch { -webkit-animation-name: none; -moz-animation-name: none; -o-animation-name: none; animation-name: none; }
	#bx-prev, #bx-next { display: none; }
	#nextProject, #prevProject { display: none!important; }
	.projectlist a:hover .projectinfo { background: transparent; }
	.hero-video { background: url(../video/visia-video-poster.jpg) no-repeat; background-size: cover; background-position: top center;}
}

/* Smaller than 960px */
@media only screen and (max-width: 959px) {
	div.date_reg_img{top:280px; !important}
	.enrolment .section:nth-child(even) .photo{width:20%;display: inline-block;float: left; margin-right: 5%;}
	.enrolment .section:nth-child(even) .text-group{width:75%;display: inline-block;float: left; text-align: left;}

	.enrolment .section:nth-child(odd) .photo{width:20%;display: inline-block;float: right; margin-left: 5%;}
	.enrolment .section:nth-child(odd) .text-group{width:75%;display: inline-block;float: left; text-align: left;}

	.event-line {width: 84%; }
	nav .content{}
	.banner{margin-top: 52px;}
	.event-top {margin-top: 120px}
	.month { margin-left: 67%;}
	.all-act { background: url(../images/icon-detail2.png) no-repeat 38px 15px;background-color: #efefef; padding: 5px 0 5px 25px;}
	.all-act:hover {background: url(../images/icon-detail.png) no-repeat 38px 15px;background-color: #ffaf75;padding: 5px 0 5px 25px;}
	.btn-all-act{ padding-left: 0;}
	.box3 li{ height: 240px}
	.projectlist li {margin-left: 8%}
	.projectlist li:nth-child(odd) .photo{float: left; background: url(../images/act-imgbg2.png); width: 411px; height: 220px; margin-left: 0; }
	.projectlist li:nth-child(odd) .description{float: left; padding-left:0; padding-right: 0; width: 425px;}
	.projectlist li:nth-child(odd) .photo img {width: 370px; height: 200px; position:absolute;left: 10px; top: 10px;}
	.projectlist li:nth-child(even) .photo{float: left; background: url(../images/act-imgbg2.png); width: 411px; height: 220px; margin-left: 0; }
	.projectlist li:nth-child(even) .description{float: left; padding-left: 0; padding-right: 0; width: 425px;}
	.projectlist li:nth-child(even) .photo img {width: 370px; height: 200px; position:absolute;left: 10px; top: 10px;}
	.projectlist li .description .title,h3 {margin-top: 2px;}
	.filtering {line-height: 1.8em; padding: 15px 6%; margin-top:0px;}
	.filtering li { margin-left: 5px; }
	.filtering li:last-of-type {margin-right: 0;}
	.filtering li:after {	padding-left: 10px;}
	.filtering2 {line-height: 1.8em; padding: 15px 6%; margin-top:10px;}
	.filtering2 li { margin-left: 5px; }
	.filtering2 li:last-of-type {margin-right: 0;}
	.filtering2 li:after {	padding-left: 10px;}
	.heading { margin-left: 8%;margin-right: 8%;}
	.title {font-size: 20px;}
	body {font-size: 13px;}
	.date {font-size: 13px; margin-top: 10px; zoom:0.8; -moz-transform: scale(0.8); -moz-transform-origin: 0px 0px;}
	time.icon span, time.icon2 span {margin-top: 22px!important}
	time.icon_reg span{margin-top: 2px}
	.group:nth-child(odd) .description { text-align: left; padding-right: 200px; }
	.group:nth-child(odd) .image { text-align: left; padding-right: 100px; margin-bottom: 10px;}
	.m-image { display:block; text-align: left; padding-right: 100px; margin-bottom: 10px;}
	.group:nth-child(even) .description { text-align: left; padding-left: 0; padding-right: 200px; }
	.group:nth-child(even) .image { text-align: left; padding-left: 0; padding-right: 115px; margin-bottom: 10px;}
	.group:nth-child(odd) .image {display: none;}
	.group { padding-left: 8%;}
	.line  { position:absolute; left:auto; right: 90px; margin-top: 60px; z-index: -99; width: 3px; height: 100%; background: #efefef;}
	.act .line {right: 150px;}
	#char  { position:absolute; padding-left: 0; left: auto; margin: 0; top: 100px; right: 60px;}
	#char img { width: 90%;}
	#pin  { position:absolute; padding-left: 0; left: auto; margin: 0; top: 215px; right: 109px;}
	#pin img { width: 90%;}
	#top-share{ right: 5%}
	.logo {width: 60%; margin-left: 5%;margin-bottom: 8px; margin-top: 0em;}
	.nav-button { display: block; margin-top:2px;}
	.navigation { display: none; }
	.parallax { background-size: cover; background-attachment: scroll; background-position: top center!important; }
	.content.padded { padding-bottom: 50px; }
	.icons .overview { width: 33.3333333333%; margin-bottom: 30px; }
	.projectlist li { width: 50%; }
	.fade, .hatch { opacity: 1!important; }
	.entrance, .slide {opacity:0;}
	/*.ae-animation-fade, .ae-animation-slide, .ae-animation-entrance, .ae-animation-hatch { -webkit-animation-name: none; -moz-animation-name: none; -o-animation-name: none; animation-name: none; }
	*/
	.ae-animation-hatch { -webkit-animation-name: none; -moz-animation-name: none; -o-animation-name: none; animation-name: none; }
	#bx-prev, #bx-next { display: none; }
	.gallery-next, .gallery-prev { display: none;}
	#bx-pager { margin-top: 20px; }
	#bx-pager li { width: 50%; margin-top: 20px; }
	.social-links { margin-top: 0px; }
	#nextProject, #prevProject { display: none!important; }
	#respond { margin-left: 0px; }
	#vegas-prev, #vegas-next { display: none; }
	.tooltip { cursor: pointer; }
	.hero-video { background: url(../video/visia-video-poster.jpg) no-repeat; background-size: cover; background-position: top center;}
	#big-video-wrap { display: none; }
	time.icon,time.icon2,time.icon_reg {margin-top: 10px;}
	time.icon strong {font-size: 9px !important}
	time.icon_reg strong {font-size: 13px !important}
	time.icon em {font-size: 10px !important}
	table.upcoming_event_table{width:96%; margin-left: 2%; margin-right: 2%;}
	

	.organisations .box3 {margin-top: 25px; width: 100%}
	.organisations .box3 li{border-right: none; margin-bottom: 40px; width: 50%;padding-bottom: 25px;padding-top: 0}
	.organisations .box3 li a{ margin: 0 auto;}
	.organisations .box3 li a .uni-logo {height:200px;width: 1%; display: table-cell; vertical-align: middle;text-align: center;}
	.organisations .box3 li a .uni-logo img{text-align: center; vertical-align: middle; max-width: 80%}
	.organisations .box3 li:hover .uni-logo{opacity: .7;filter: alpha(opacity=70);}
	
	.contact .logo-hktdc {zoom:0.8; margin-top: 5px; margin-bottom: 0px; padding-left: 0; }
	.contact { padding:20px 8% 0px 8%;}
	.doc { top:16px; height: 42px; padding: 4px 8px }
	.doc>div>div { font-size: 11px; line-height: 14px }
	.doc img {width: 32px}
	
}

/* Tablet Portrait Size */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	time.icon_reg span {padding-top:3px;}

}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {
	.mfp-close{top:15px !important;}
	.speaker-title {margin: 5px auto; font-size: 1.2em;}
	.speaker-photo .heading2{margin-top: 0;}

	.speaker-des{width:67%; float: right}
	.speaker-photo {width: 30%;}
	.enroll2{margin-bottom: 30px}
	.upcoming_event_btn{margin-bottom: 30px}
	.profile{margin-bottom: 10px}
	.event-point li {width:84%}
	.month {margin-left: 8%; width: 84%;}
	.all-act {	background: url(../images/icon-detail2.png) no-repeat 30% 15px;	background-color: #efefef;	margin: 0 auto;	padding: 5px 0 5px 25px;}
	.all-act:hover {background: url(../images/icon-detail.png) no-repeat 30% 15px;background-color: #ffaf75;margin: 0 auto;	padding: 5px 0 5px 25px;}
	.btn-all-act{padding-left: 5%;}
	.group:nth-child(odd) .description { text-align: left; padding-right: 100px; }
	.group:nth-child(odd) .image { text-align: left; padding-right: 100px; margin-bottom: 10px;}
	.m-image { display:block; text-align: left; padding-right: 100px; margin-bottom: 10px;}
	.group:nth-child(even) .description { text-align: left; padding-left: 0; padding-right: 100px; }
	.group:nth-child(even) .image { text-align: left; padding-left: 0; padding-right: 115px; margin-bottom: 10px;}
	.group:nth-child(odd) .image {display: none;}
	.group { padding-left: 8%;}
	.line  { position:absolute; left:auto; right: 50px; margin-top: 60px; z-index: -99; width: 3px; height: 100%; background: #efefef;}
	.act .line {right: 50px;}
	#char  { position:absolute; padding-left: 0; left: auto; margin: 0; top: 95px; right: 19px;}
	#char img { width: 60%;}
	.filtering {line-height: 1.8em; padding: 15px 8%; margin-top:0px;}
	.filtering li { margin-left: 5px; margin-bottom: 0px;}
	.filtering li:last-of-type {margin-right: 0;}
	.filtering li:after {padding-left: 10px;}
	.filtering2 {line-height: 1.8em; padding: 15px 8%; margin-top:30px;}
	.filtering2 li { margin-left: 5px; margin-bottom: 0px;}
	.filtering2 li:last-of-type {margin-right: 0;}
	.filtering2 li:after {padding-left: 10px;}
	.projectlist li:nth-child(odd) .photo{float: left; zoom:0.5;background: url(../images/act-imgbg2.png); width: 411px; height: 220px; margin-left: 0; }
	.projectlist li:nth-child(odd) .description{float: left; padding-left: 0; padding-right: 230px}
	.projectlist li:nth-child(odd) .photo img {width: 370px; height: 200px; position:absolute;left: 8px; top: 10px;}
	.projectlist li:nth-child(even) .photo{float: left; zoom:0.5;background: url(../images/act-imgbg2.png); width: 411px; height: 220px; margin-left: 0; }
	.projectlist li:nth-child(even) .description{float: left; padding-left: 0; padding-right: 230px}
	.projectlist li:nth-child(even) .photo img {width: 370px; height: 200px; position:absolute;left: 8px; top: 10px;}
	.projectlist li .description h3 {display: none;}
	.projectlist li .description .title {margin-bottom: 8px;}
	#pin  { position:absolute; padding-left: 0; left: auto; margin: 0; top: 300px; right: -3px;}
	#pin img { width: 60%;}
	.about {text-align: center; margin-bottom: 0}
	.gallery-title {text-align: center; margin-bottom: 20px}
	.enrolment {margin-bottom: 0}
	.enrolment .box3 li:last-of-type {border-bottom: none;}
	.content-point {margin-top: 15px; margin-bottom: 45px}
	.enroll-line {display: block;}
	.box3 li {width: 84%; height:220px;text-align: center; float:left; border-bottom: 1px solid #cccccc;border-right:none; margin: auto 8%;height: auto;padding-top: 10px;padding-bottom: 10px}
	.box3 li:last-of-type {border-right: none;}
	.box3 li img {margin: 10px 0 auto;zoom:0.8;}
	.enrolment .photo {margin: 10px 0 auto;zoom:0.8;}
	.heading3-container {margin-bottom: 5px;}
	.universities{zoom:0.85;}
	.banner {margin-top: 52px;}
	.detail {width: 130px;}
	.index .detail {width: 118px;}
	#tel-email {width:15px; display:inline-block; margin: 10px auto}
	.border-line {}
	.icons .overview { width: 50%; }
	.team-list { padding: 30px 0px 0px; }
	.team-member { padding-bottom: 25px; }
	#respond { padding-bottom: 50px; border-bottom: 2px solid #e9e9e9; }
	.event-point li { padding: 0}
	
	.value { padding-top: 35px; }
	.subscribe input.submit, .subscribe input.text { width: 100%; margin-left: 0;}

	.organisations .box3 {margin-top: 0px; margin-bottom:40px; width: 100%}
	.organisations .box3 li{border-right: none; margin: 0 auto; width: 100%;padding-bottom: 25px;padding-top: 0}
	.organisations .box3 li:last-of-type{border: none;}
	.organisations .box3 li a{ margin: 0 auto; padding: 0}
	.organisations .box3 li a .uni-logo {height:200px;width: 1%; display: table-cell; vertical-align: middle;text-align: center;}
	.organisations .box3 li a .uni-logo img{text-align: center; vertical-align: middle; max-width: 100%}

	.contact .logo-hktdc {width: 20%; padding-right: 15px; padding-left: 0;margin-right: 10px}
	.contact ul {width: 75%;}
	nav {left: 0}

	#album li {width: 48%}
	#album li>a>div {padding: 10px; background: #efefef}
	div.date_reg_img{top:270px;!important;}
}

/* Mobile Landscape Size */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.banner { margin-top:45px; }
	.nav-button { display: block; margin-top:2px;}
	.project-info { border-bottom: none; }
	.tooltip { width: 150%; left: 5%; margin-left: 0; }
	.pull-left .tooltip { left: -55%;}
	div.date_reg_img {top:143px;!important;}
	
}


/* Mobile Portrait Size */
@media only screen and (max-width: 479px) {
	.event-title {padding: 0 8%}
	.event-top .heading{margin-left: 0; margin-right: 0; margin-top: 0}
	.event-top .heading2{padding: 0 8%;}
	.event-top {margin-top: 90px}
	#top-share:hover .share{
		right:140px;
		background: #ffaf75;
		opacity: 0;
	}
	.icon-fb-share{zoom:0.7;top:-29px;}
	.icon-ig-share{zoom:0.7;top:-29px;}
	#top-share{right: 15%; top: -20px;}
	#top-share .share {zoom:0.6; -moz-transform: scale(0.6); -moz-transform-origin: 100% 0px;}
	#top-share .share span{display: none;}
	.share {width: 44px; height: 34px;padding-left: 16px;padding-top: 0px}
	#share-menu {top:0px;}
	nav {padding-top: 20px;}
	.nav-button { display: block; margin-top:2px;}
	.social-links li {zoom:0.8;}
	.border-line { width: 100%;}
	.banner { margin-top:35px; }
	.call-to-action li { margin-right: 0px; width: 100%; }
	.projectlist li { width: 100%; }
	#bx-pager li { width: 100%; }
	.project-info { border-bottom: none; }
	.tooltip { width: 180%; left: 5%; margin-left: 0; }
	.pull-left .tooltip { left: -85%;}
	.doc-container { position: initial}
	.speaker-preview-des { padding-top: 2px}
	.speaker-preview .heading2 { margin-top: 5px !important; font-size: 11px}
	#album .content-bold {font-size: 13px; height: 60px}
	time.icon_reg span {padding-top:2px;}
	div time.icon_blue span {font-size:20px;margin-top:21px;}
	div time.icon_blue strong{font-size:14px;padding-top:1px;padding-top:1px;}
	div time.icon_grey span {font-size:20px;margin-top:21px;}
	div time.icon_grey strong{font-size:14px;padding-top:1px;padding-top:1px;}
	div.date_reg_img{top:143px;}
	.btn_upcoming_event:after{content:'+';display:inline;}
	.btn_upcoming_event:before{content:'Register Now';display:none;}
	div.upcoming_event_btn{width: 50px;}
}

@media only screen and (max-width: 320px) {
	.banner { margin-top:28px; }
	.upcoming_event_table td:nth-child(1){width:20%;}
}


/* Targets Retina Enabled Devices */
@media 
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (   -moz-min-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
  
	.icon.right { background: url(../images/icons/right@2x.png) no-repeat center center; background-size: 26px 26px; }
	.icon.ux { background: url(../images/icons/ux@2x.png) no-repeat top; background-size: 64px 128px; }
	.icon.design { background: url(../images/icons/design@2x.png) no-repeat top; background-size: 64px 128px; }
	.icon.seo { background: url(../images/icons/seo@2x.png) no-repeat top; background-size: 64px 128px; }
	.icon.social { background: url(../images/icons/social@2x.png) no-repeat top; background-size: 64px 128px; }
	.icon.tech { background: url(../images/icons/tech@2x.png) no-repeat top; background-size: 64px 128px; }
	.icon.commerce { background: url(../images/icons/commerce@2x.png) no-repeat top; background-size: 64px 128px; }
	.icon.config { background: url(../images/icons/config@2x.png) no-repeat top; background-size: 64px 128px; }
	.icon.heart { background: url(../images/icons/heart@2x.png) no-repeat top; background-size: 64px 128px; }
	.icon.coffee { background: url(../images/icons/coffee@2x.png) no-repeat top; background-size: 64px 128px; }
	.icon.portfolio { background: url(../images/icons/portfolio@2x.png) no-repeat top; background-size: 64px 128px; }
	.icon.plane { background: url(../images/icons/plane@2x.png) no-repeat top; background-size: 64px 128px; }
	.icon.calculator { background: url(../images/icons/calculator@2x.png) no-repeat top; background-size: 64px 128px; }
	.social-icon.small.facebook { background: url(../images/icons/facebook-small@2x.png) no-repeat center center; background-size: 26px 26px;}
	.social-icon.small.twitter { background: url(../images/icons/twitter-small@2x.png) no-repeat center center; background-size: 26px 26px;}
	.social-icon.small.google { background: url(../images/icons/google-small@2x.png) no-repeat center center; background-size: 26px 26px;}
	.social-icon.small.behance { background: url(../images/icons/behance-small@2x.png) no-repeat center center; background-size: 26px 26px;}
	.social-icon.small.linkedin { background: url(../images/icons/linkedin-small@2x.png) no-repeat center center; background-size: 26px 26px;}
	i.icon-remove { background: url(../images/icons/close@2x.png) no-repeat center center; background-size: 26px 26px;}
	.bx-pager-link { background: url(../images/projects/pager@2x.png) no-repeat top center; background-size: 12px 24px; }
	.bx-pager-link.active { background: url(../images/projects/pager-active@2x.png) no-repeat top center; background-size: 12px 12px; }
	.gallery-next .bx-next  { display:none;background: #f47920 url('../images/blog/next@2x.png') no-repeat; background-size: 22px 22px;}
	.gallery-prev .bx-prev  { display:none;background: #f47920 url('../images/blog/prev@2x.png') no-repeat; background-size: 22px 22px;}
	.search-submit { 	background: #fff url(../images/blog/search@2x.png) no-repeat center center; background-size: 16px 16px;}
	.notification.success p  { background: url(../images/icons/tick@2x.png) no-repeat; background-size: 26px 26px;}
	.notification.error p  { background: url(../images/icons/cross@2x.png) no-repeat; background-size: 26px 26px;}
	.project-gallery-next .bx-next  {  background: #fff url('../images/icons/project-gallery-next@2x.png') no-repeat center center; background-size: 22px 22px; }
	.project-gallery-prev .bx-prev  {  background: #fff url('../images/icons/project-gallery-prev@2x.png') no-repeat center center; background-size: 22px 22px; }

}

.container .mix,
.container .gap{
  display: inline-block;
}

.container .mix{
  display: none;
}

time.icon
{
  font-size: 1em; /* change icon size */
  display: block;
  position: relative;
  width: 62px;
  height: 62px;
  background-color: #fff;
  border: solid 1px #379ec0 !important;
  overflow: hidden;
  margin-bottom: 5px;
}

time.icon *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

time.icon strong
{
  font-size: 1em; 
  position: absolute;
  top: 0;
  padding: 0.85em 0 0.1em 0;
  color: #fff;
  background-color: #379ec0;
  text-transform: uppercase;
}

time.icon em
{
	position: absolute;
	z-index: 999;
	color: #fff;
	font-size:0.8em;
}

time.icon span
{
  font-size: 1.7em;
  margin-top: 1.2em;
  letter-spacing: -0.05em;
  color: #379ec0;
}

time.icon2
{
  font-size: 1em; /* change icon size */
  display: block;
  position: relative;
  width: 52px;
  height: 52px;
  background-color: #fff;
  border: solid 1px #379ec0;
  overflow: hidden;
  margin-bottom: 5px;
}

time.icon2 *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

time.icon2 strong
{
  font-size: 0.7em; 
  position: absolute;
  top: 0;
  padding: 0.2em 0;
  color: #fff;
  background-color: #379ec0;
  text-transform: uppercase;
}

time.icon2 em
{
	position: absolute;
	z-index: 999;
	color: #fff;
	font-size:0.5em;
}

time.icon2 span
{
  font-size: 1.5em;
  margin-top: 0.9em;
  letter-spacing: -0.05em;
  color: #379ec0;
}

time.icon3
{
  font-size: 1em; /* change icon size */
  display: block;
  position: relative;
  width: 62px;
  height: 62px;
  background-color: #fff;
  border: solid 1px #6d6f6f !important;
  overflow: hidden;
  margin-bottom: 5px;
}

time.icon3 *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

time.icon3 strong
{
  font-size: 1em; 
  position: absolute;
  top: 0;
  padding: 0.85em 0 0.1em 0;
  color: #fff;
  background-color: #6d6f6f;
  text-transform: uppercase;
}

time.icon3 em
{
	position: absolute;
	z-index: 999;
	color: #fff;
	font-size:0.8em;
}

time.icon3 span
{
  font-size: 1.7em;
  margin-top: 1.2em;
  letter-spacing: -0.05em;
  color: #6d6f6f;
}






 .date_reg_img{
	 position: absolute;
	 width: 52px;
}









/* date icon + register now */

time.icon_blue
{
  font-size: 1em; /* change icon size */
  display: block;
  position: relative;
  width: 52px;
  height: 52px;
  background-color: #fff;
  border: solid 1px #379ec0 !important;
  overflow: hidden;
  margin-bottom: 5px;
  margin-top: 20px;
}

time.icon_blue *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

time.icon_blue strong
{
  font-size:15px; 
  position: absolute;
  top: 0;
  padding:3px 0px 3px 0px;
  color: #fff;
  background-color: #379ec0;
  text-transform: uppercase;
}

time.icon_blue span
{
  font-size: 26px;
  margin-top: 0.8em;
  letter-spacing: -0.05em;
  color: #379ec0;
  padding-top: 1px;
}

time.icon_grey
{
  font-size: 1em; /* change icon size */
  display: block;
  position: relative;
  width: 52px;
  height: 52px;
  background-color: #fff;
  border: solid 1px #6d6f6f !important;
  overflow: hidden;
  margin-bottom: 5px;
}

time.icon_grey *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

time.icon_grey strong
{
  font-size:15px; 
  position: absolute;
  top: 0;
  padding:3px 0px 3px 0px;
  color: #fff;
  background-color: #6d6f6f;
  text-transform: uppercase;
}

time.icon_grey span
{
  font-size: 26px;
  margin-top: 0.8em;
  letter-spacing: -0.05em;
  color: #6d6f6f;
  padding-top: 1px;
}




/* date icon + register now */



.date-list{
	display: inline;
}

.event-point .icon{margin-bottom: 18px}




 .link-register a{
	position: relative;	
	display: inline-block; 
	line-height: 44px;
	font-size: 15px;
}

 .link-register2 a{
	position: relative;	
	display: inline-block; 
	line-height: 44px;
	font-size: 15px;
}

.link-register a { margin: 0px 0 0 0;}

.roll{
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;

    -webkit-perspective: 275px;
       -moz-perspective: 275px;
        -ms-perspective: 275px;
            perspective: 275px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;
}
.roll span {
   		-webkit-transition: -webkit-transform 0.3s ease; 
		-moz-transition: -moz-transform 0.3s ease; 
		transition: transform 0.3s ease; 
		-webkit-transform-origin: 50% 0 0; 
		-moz-transform-origin: 50% 0 0; 
		transform-origin: 50% 0 0; 
		-webkit-transform-style: preserve-3d; 
		-moz-transform-style: preserve-3d; 
		transform-style: preserve-3d; 
		display: inline-block; 
		padding: 0 60px; 
		position: relative;
}
.roll:hover span{
    -webkit-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
       -moz-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
        -ms-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
            transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
}
.roll span:after{
  		-webkit-transition: background 0.3s;
		-moz-transition: background 0.3s;
		transition: background 0.3s;
		-webkit-transform: rotateX(-90deg);
		-moz-transform: rotateX(-90deg);
		transform: rotateX(-90deg);
		-webkit-transform-origin: 50% 0 0; 	
		-moz-transform-origin: 50% 0 0; 
		transform-origin: 50% 0 0; 
		content: attr(data-hover); 
		height: 100%; 
		left: 0; 
		position: absolute; 
		top: 100%; 
		width: 100%;
		text-align: center;
}

.roll span { color: #fff; background-color: #f47920;}		
.roll span:after { color: #FFF; background: #379ec0;}

.link-register {display: inline-block; margin: 10px 15px}

.link-register2 {display: none;}


/* CORE CSS */
#footer {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
/* Container box to set the sides relative to */
.cube {
  width: 230px;
  height: 44px;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
/* The two faces of the cube */
.default-state,
.active-state {
  height: 44px;
}
/* Position the faces */
.default-state {
  -webkit-transform: translateZ(22px);
  -moz-transform: translateZ(22px);
  -o-transform: translateZ(22px);
  -ms-transform: translateZ(22px);
  transform: translateZ(22px);
}

.flip-to-bottom .active-state {
  -webkit-transform: rotateX(-95deg) translateZ(-26px);
  -moz-transform: rotateX(-95deg) translateZ(-26px);
  -o-transform: rotateX(-95deg) translateZ(-26px);
  -ms-transform: rotateX(-95deg) translateZ(-26px);
  transform: rotateX(-95deg) translateZ(-26px);
}
/* Rotate the cube */

.cube.flip-to-bottom:hover {
  -webkit-transform: rotateX(89deg);
  -moz-transform: rotateX(89deg);
  -o-transform: rotateX(89deg);
  -ms-transform: rotateX(89deg);
  transform: rotateX(89deg);
}
.cube {
  text-align: center;
  margin: 0 auto;
}
.default-state,
.active-state {
  background: #f47920;
  font-size: 15px;
  color: #fff;
  line-height: 44px;
  -webkit-transition: background 250ms ease;
  -moz-transition: background 250ms ease;
  -o-transition: background 250ms ease;
  transition: background 250ms ease;
}
.cube:hover .default-state {
  background: #f47920;
}
.active-state {
  background: #379ec0;
}
#flipto {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-top: 20px;
  color: #ccc;
}


.btn-container{
	width: 230px;
	margin: 0 auto;
}
.btn01,
.btn02 {
  background: #f47920;
  font-size: 15px;
  color: #fff;
  line-height: 44px;
  -webkit-transition: background 250ms ease;
  -moz-transition: background 250ms ease;
  -o-transition: background 250ms ease;
  transition: background 250ms ease;
}
.btn02{
	background: #379ec0;
}

@media screen and (min-width:0\0) {  
    
	.cube-container {display: none !important}
	.cube-container a {display: none !important;}
	.link-register {display: none !important;}
	.link-register2 {display: inline-block !important; margin: 10px 15px}
	.shine {
	width: auto;
	margin-left: 0;
	margin-right: 0;
    color: #f47920 !important;
    color: rgba(255, 196, 153, 1);
	}	
}  


.btn-video {
	color: #ffffff;
	background-color: #f47920;
	margin-right: 10px;
	padding:5px 10px;
	cursor: pointer;
	display: inline-block;
	-webkit-transition: background-color 0.1s ease-in-out;
    -moz-transition:    background-color 0.1s ease-in-out;
    -o-transition:      background-color 0.1s ease-in-out;
    transition:         background-color 0.1s ease-in-out;
}

.btn-video img{margin-right: 5px}

a:hover .btn-video{
	color: #ffffff;
	background-color: #ffaf75;
}

.shine
{
	display: inline-block;
	width: 300px;
	margin-left: -40px;
	margin-right: -40px;
    background: #f47920 -webkit-gradient(linear, left top, right top, from(#f47920), to(#f47920), color-stop(0.5, #ffd5b6)) 0 0 no-repeat;

    -webkit-background-size: 50px;
    
    color: rgba(255, 196, 153, 0.1);
    -webkit-background-clip: text;
    
    -webkit-animation-name: shine;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;

}


@-moz-document url-prefix() {
    .shine {
        color: #f47920;
    }
    
}

@-webkit-keyframes shine
{
    0%
    {
        background-position: top left;
    }
    100%
    {
        background-position: top right;
    }
}