header.splash.home {
	height: 500px !important;
  background: #303e49 url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/gallery/splash-home.jpg) center no-repeat;
  background-size:cover;
  background-attachment:fixed;
  position: relative;
  overflow: hidden;
}

#tourPreview {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:-40px;
	z-index: 40;
	background-image: url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/bg/home-pano.jpg);
	background-position: 0px 0px;
	background-repeat: repeat-x;

	-webkit-animation: panoTour 53s linear infinite;
       -moz-animation: panoTour 53s linear infinite;
        -ms-animation: panoTour 53s linear infinite;
         -o-animation: panoTour 53s linear infinite;
            animation: panoTour 53s linear infinite;
	
}

@-webkit-keyframes panoTour {
	from { background-position: 0 0; }
	to { background-position: 133% 0; }
}

@-moz-keyframes panoTour {
	from { background-position: 0 0; }
	to { background-position: 133% 0; }
}

@-ms-keyframes panoTour {
	from { background-position: 0 0; }
	to { background-position: 133% 0; }
}

@-o-keyframes panoTour {
	from { background-position: 0 0; }
	to { background-position: 133% 0; }
}

@keyframes panoTour {
	from { background-position: 0 0; }
	to { background-position: 133% 0; }
}

#tourOverlay {
	display: block;
	background:url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/bg/transparent.png) repeat;
	position:absolute;
	width: 100%;
	height: 100%;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	z-index:50;
	text-indent:-9999px;
}


.home.visit {
	height: 280px !important;
	background: #303e49 url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/bg/home-visit-bg.jpg) center no-repeat;
	background-size:cover;
	display: table;
	width: 100%;
}

.home.visit .row {
	display: table-cell;
	vertical-align:middle;
}

.map {
	background-color:#efefef;
	padding: 0px !important;
	position: relative;
	overflow: hidden;
}

.mini-map {
	position: absolute;
	display: block;
	background: #AAA url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/cuhk-map.jpg) 30% center no-repeat;
	width: 60%;
	top: 0px;
	bottom: -30px;
}

#mapCanvas {
	width:100%;
	height:100%;
}

.map .info {
	display: table;
	height: 380px;
	width: 40%;
	float: right;
}

.map .info .content {
	display: table-cell;
	vertical-align:middle;
	text-align: left;
	padding:1em;
}

.home.map .content h2 {
	color: #760f6d;
}

.home.map .content h2::after {
	border: solid 2px #760f6d;
}

.home.visit .row h2 {
	color: #32A796;
}

.home.visit .row h2::after {
	border: solid 2px #32A796;
}

.map .info .content strong {
	margin-top: 1em;
	display: inline-block;
	color:#952e8c;
}

.map .info .content strong.first {
	margin-top: 0px;
}

.map .info .content p {
	margin: 0px;
	color:#9E4295;
}

.map .info .content p.red {
	/*color: #bb7e09;*/
}

.map .info .content p.emphasize {
	border:1px solid #b34caa;
	color:#952e8c;
	font-weight:bold;
	display: inline-block;
	padding: 4px 8px;
	margin-top: 8px;
}


.home.about {
	padding:0px;
}

.home.about .half {
	height: 400px;
	display: table;
	/*background:#DDA400;*/
	background:#FFFFFF;
}

.home.about .image {
	background:url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/bg/home-about-2018-bg.jpg) center top no-repeat;
	background-size:cover;
}


.home.about .content {
	display: table-cell;
	vertical-align: middle;
}

.home.about .content h2 {
	color: #9d6000;
}

.home.about .content h2::after {
	border: solid 2px #9d6000;
}

.home.about .content p {
	/*color:#FFF;*/
	color: #72777B;
	margin: 0px 2em;
}

.home.about .kao_content {
	display: table-cell;
	vertical-align: middle;
}

.home.about .kao_content h2 {
	color: #333;
}

.home.about .kao_content h2::after {
	border: solid 2px #333;
}

.home.about .kao_content p {
	color: #333;
	margin: 0px 2em;
}

.home.about .kao_content p {
	color: #333;
	margin: 0px 2em;
}

.home.about .charles_kao_image {
	background:url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/bg/home-charles-kao.jpg) center top no-repeat;
	background-size:cover;
    /*background-size: contain;*/
    background-position: center;
    background-color: black;
}

.home.about .content p {
	/*color:#FFF;*/
	color: #72777B;
	margin: 0px 2em;
}



@media only screen and (max-width: 560px) {
	.half.image {
		width: 100% !important;
		float: none;
	}
	.home.about .half {
		height: auto;
		padding: 4em;
	}
	.home.about .image {
		height: 300px;
	}
	
	
}




.home.about img {
	width:100%;
	display:block;
}

.home {
	padding: 4em 0px;
	text-align: center;
	color: #8c9398;
}

.home h2 {
	display: block;
	/*color: #3dc9b3;*/
	color: #268174;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1.5em;
	margin: 0px 2em 1.6em;
	text-align: center;
}

.home h2::after {
	content: " ";
	/*border: solid 2px #3dc9b3;*/
	border: solid 2px #268174;
	display: block;
	width: 75px;
	margin: 15px auto;
}

.home p {


	word-spacing: 1px;
	line-height: 25px;
	font-size: 1.2em;
	margin: 0px 2em;
}

.home.visit p a{
	/*color: #8c9398;*/
	color: #A5A6A5;
}

.home.visit p a:hover{
	color: #ff9800;
	transition: all 0.5s ease;
}

.nowrap {
	word-break:keep-all ;
}

@media only screen and (max-width: 768px) {
	header.splash.home {
		height: 300px !important;
		background-attachment:scroll;
	}
}

@media only screen and (min-width: 769px) {
	.home p {
	
	}
}

@media only screen and (max-width: 560px) {
	.mini-map {
		display:none;
	}

	.map .info {
		width: 100%;
	}
	
	.map .info .content {
		text-align:center;
	}

}

@media only screen and (min-width:561px) and (max-width:639px) {
	.mini-map {
		width: 40%;
	}
	.map .info {
		width: 60%;
	}
}

@media only screen and (min-width: 640px) and (max-width: 920px) {
	.mini-map {
		width: 56%;
	}

	.map .info {
		width: 44%;
	}
}

@media only screen and (min-width: 1024px) {
	.home p {
		margin: 0px 6em;
	}
}


@media only screen and (min-width: 1200px) {
	.map .info .content {
		padding:2em;
	}
}

@media only screen and (min-width: 1280px) {
	.map .info .content {
		padding:2em;
	}
}

.grid {
	width:100%;
	padding: 3em;
	background: white;
}

.grid-item {
	width: 100% !important;
	display: block;
	float: left;
}

.grid-bg {
	background:url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/bg/ie8/home-milestones.jpg) center no-repeat;
	background-size: cover;
	/*display:table;*/
	width: 100%;
	height: 200px;
}

.grid-bg.modest {
	background-image:url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/bg/ie8/home-modest.jpg);
}
.grid-bg.whole-edu {
  background-image: url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/bg/ie8/home-whole-edu.jpg);
}

.grid-bg.scholars {
  background-image: url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/bg/ie8/home-scholars.jpg);
}

.grid-bg.chi-study {
  background-image: url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/bg/ie8/home-chi-study.jpg);
}

.grid-bg.exchange {
  background-image: url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/bg/ie8/home-exchange.jpg);
}

.grid-bg.cu50 {
  background-image: url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/bg/ie8/home-cu50.jpg);
  background-position: center top;
}

.grid-bg.tour {
  background-image: url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/bg/ie8/home-tour.jpg);
}

.grid-item:hover .grid-desc, .grid-item.visible .grid-bg .grid-desc {
	visibility:visible;
	opacity:1;
}
.grid-desc {
	visibility:hidden;
	opacity:0;

	background:url(/20210330180347oe_/https://www.cuhk.edu.hk/ugallery/images/bg/grid-overlay.png) repeat;
	
	padding: 3em 1em;
	height: 100%;

}

.grid-desc span {
	text-transform:uppercase;
	border:1px solid #FFF;
	color:#FFF;
	padding: 3px 6px;
}

.grid-desc h3 {
	font-size: 1.2em;
	margin-top: 18px;
	color:#DDA400;
}

.grid-desc h4 {
	font-size: 1em;
	border-top: 1px solid #5A6A77;
	margin-top: 4px;
	padding-top: 4px;
	color: #FFF;
	display: inline-block;
}

@media only screen and (min-width: 460px) {
	.grid-item {
		width: 50% !important;
	}
	.grid-desc {
		padding: 4em 1em;
	}
	
}

@media only screen and (min-width: 600px) {
	
	.grid-desc {
		padding: 4em 3em;
	}
	
}

@media only screen and (min-width: 640px) {
	
	.mini-map {
		background-position: 24% center;
	}
	
}

@media only screen and (min-width: 768px) {
	.grid-desc {
		padding: 3em 2em;
	}
}

@media only screen and (min-width: 800px) {
	.grid-desc {
		padding: 3em 2em;
	}
}


@media only screen and (min-width: 960px) {
	.grid-item {
		width: 25% !important;
	}
	.grid-desc {
		padding: 2em .6em;
	}
	.mini-map {
		background-position: 22% center;
	}
}

@media only screen and (min-width: 1024px) {
	.grid-desc {
		padding: 2.8em .6em;
	}
	.mini-map {
		background-position: 15% center;
	}

	
}

@media only screen and (min-width: 1366px) {
	.grid-desc {
		padding: 3em 2em;
	}
	.mini-map {
		background-position: 10% center;
	}
}