/*

*/

/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/

	body
	{
		background: #141414;
	}

	body,input,textarea,select
	{
		font-family: 'Arimo', sans-serif;
		font-size: 11pt;
		line-height: 1.75em;
		color: #4c4c4c;
	}

	h1,h2,h3,h4,h5,h6
	{
		text-transform: uppercase;
		font-weight: bold;
	}
	
		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
		{
			color: inherit;
			text-decoration: none;
		}
		
	/* Change this to whatever font weight/color pairing is most suitable */
	strong, b
	{
		font-weight: bold;
		color: #000000;
	}
	
	em, i
	{
		font-style: italic;
	}

	/* Don't forget to set this to something that matches the design */
	
   
    p:link
	{
		text-decoration: underline;
		color: #272727;
	}

	p:hover
	{
		text-decoration: none;
	}
	
	sub
	{
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}
	
	sup
	{
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}
	
	hr
	{
		border: 0;
		border-top: solid 1px #ddd;
	}
	
	blockquote
	{
		border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}
	
	p, ul, ol, dl, table
	{
		margin-bottom: 1em;
	}

	header
	{
		margin-bottom: 1em;
	}
	
		header h2
		{
		}
	
		header .byline
		{
			display: block;
			margin: 0.5em 0 0 0;
			padding: 0 0 0.5em 0;
		}
		
	footer
	{
		margin-top: 1em;
	}

	br.clear
	{
		clear: both;
	}

	/* Sections/Articles */
	
		section,
		article
		{
			margin-bottom: 3em;
		}
		
		section > :last-child,
		article > :last-child
		{
			margin-bottom: 0;
		}

		section:last-child,
		article:last-child
		{
			margin-bottom: 0;
		}

		.row > section,
		.row > article
		{
			margin-bottom: 0;
		}

	/* Images */

		.image
		{
			display: inline-block;
		}
		
			.image img
			{
				display: block;
				width: 100%;
			}

			.image.featured
			{
				display: block;
				width: 100%;
				margin: 0 0 2em 0;
			}
			
			.image.full
			{
				display: block;
				width: 100%;
				margin: 0 0 2em 0;
			}
			
			.image.left
			{
				float: left;
				margin: 0 2em 2em 0;
			}
			
			.image.centered
			{
				display: block;
				margin: 0 0 2em 0;
			}

				.image.centered img
				{
					margin: 0 auto;
					width: auto;
				}

	/* Lists */
    /* style */
		ul.default
		{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
			ul.default li
			{
				padding: 0.60em 0em;
				border-top: 1px solid;
				border-color: rgba(255,255,255,.1);
			}
			
			ul.default li:first-child
			{
				padding-top: 0;
				border-top: none;
			}
			
			ul.default a
			{
				text-decoration: none;
				color: rgba(255,255,255,.5);
			}
			
			ul.default a:hover
			{
				text-decoration: underline;
			}
			
		ul.style {
		}
		
		ul.style li {
			margin: 0;
			padding: 0em 0em 0em 0em;
			border-top: 1px solid #ECECEC;
		}
		
		ul.style li:first-child
		{
	padding-top: 0px;
	border-top-style: none;
	padding-bottom: 0px;
		}
		
		ul.style img {
			float: left;
			margin-right: 20px;
		}
		
		ul.style p {
		}
		
		ul.style .posted {
			padding: 0em 0em 1em 0em;
			letter-spacing: 1px;
			text-transform: uppercase;
			font-size: 8pt;
			color: #A2A2A2;
		}
		
		ul.style .first {
			padding-top: 0px;
			border-top: none;
		}
        .events > section > ul > li > h9 > a
        {
			color: rgba(0,0,0,1.00);
}

          /* research */
         
     .research > ul > li > h8 > a
	 {
		text-decoration: underline;
		color: #272727;
	 }

	 .research > ul > li > h8 > a:hover
	{
	text-decoration: none;
	color: #030DBD;
	}		

        ul.research{
	    width: 100%;
        }
        ul.research li {
	margin-top: 5px;
	margin-right: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
	padding-top: 0em;
	padding-right: 5px;
	padding-left: 15px;
	padding-bottom: 10px;
	border: 2px solid #ECECEC;
	border-radius: 40px;
	background: #ECECEC;
			}
		
		
		ul.research img {
			float: left;
			margin-right: 20px;
		}
		
		ul.research .posted {
			padding: 0em 0em 1em 0em;
			letter-spacing: 1px;
			text-transform: uppercase;
			font-size: 8pt;
			color: #A2A2A2;
		}
		
		ul.research .first {
			padding-top: 0px;
			border-top: none;
		}
 
       
       /* news */
       
        .news > section > ul > li > h6
	    {
	text-decoration: underline;
	color: #FF0004;
	    }

	   .news > section> ul > li > h6:hover
	   {
	text-decoration: none;
	color: #FF0004;
	   }

        ul.news {
		width: 100%
        }
		
		ul.news li {
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: -10px;
	padding-top: 0em;
	padding-right: 0em;
	padding-left: 0em;
	padding-bottom: 0px;
	border-top: 1px solid #ECECEC;
		}
		
		ul.news li:first-child
		{
	padding-top: 0px;
	border-top-style: none;
	padding-bottom: 10px;
		}
		
		ul.news img {
			float: left;
			margin-right: 20px;
		}
		
		ul.news .posted {
			padding: 0em 0em 0em 0em;
			letter-spacing: 1px;
			text-transform: uppercase;
			font-size: 8pt;
			color: #A2A2A2;
		}
        ul.news p
        {
	font-size: 15px;
        }
		
		ul.news .first {
			padding-top: 0px;
			border-top: none;
		}
							

	/* Buttons */
		
		.button
		{
	position: relative;
	display: inline-block;
	margin-top: 2em;
	padding: 0.90em 1.5em;
	background: #e95d3c;
	border-radius: 40px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1.1em;
	color: #FFFFFF;
	-moz-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
	-webkit-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
	-o-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
	-ms-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
	transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
	cursor: pointer;
		}

			.button:hover
			{
	background: #de3d27;
	color: #FFFFFF !important;
			}
			
/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

	#header
	{
		position: relative;
		background: #2a2f27 url(/20211130162852oe_/https://www.ee.cuhk.edu.hk/~ctshu/images/cover/cover2.jpg) no-repeat;
		background-size: cover;
	}

	#logo
	{
	}
	
	#nav


		#nav ul
		{
	margin-left: 0px;
	margin-bottom: 0px;
		}
	
/*********************************************************************************/
/* Banner                                                                        */
/*********************************************************************************/

	#banner
	{
		position: relative;
		background: #333;
		color: #fff;
	}

/*********************************************************************************/
/* Main                                                                          */
/*********************************************************************************/

	#main
	{
		position: relative;
		background: #fff;
	}

/*********************************************************************************/
/* Featured                                                                      */
/*********************************************************************************/
	
	#featured
	{
		position: relative;
		background: #f2f2f2;
	}
	
	#featured h2
	{
		display: block;
		margin-bottom: 2em;
		font-size: 1.4em;
	}
	
/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
	
	#footer
	{
		position: relative;
		background: #1d1d1d;
	}
	
	#footer h2
	{
		display: block;
		color: #FFF;
	}
	
/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/
	
	#copyright
	{
		position: relative;
		padding: 3em 0em;
		letter-spacing: 1px;
		text-align: center;
		color: rgba(255,255,255,.2);
	}
	
	#copyright .container
	
	
	#copyright a
	{
		text-decoration: none;
		color: rgba(255,255,255,.3);
	}	
/*swiper style*/
    .swiper-container {
      width: 700px;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background-image: -webkit-linear-gradient(0deg,rgba(0,0,0,0.50) 0%,rgba(0,0,0,0.50) 100%);
	background-image: -moz-linear-gradient(0deg,rgba(0,0,0,0.50) 0%,rgba(0,0,0,0.50) 100%);
	background-image: -o-linear-gradient(0deg,rgba(0,0,0,0.50) 0%,rgba(0,0,0,0.50) 100%);
	background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.5) 100%);
	height: 43px;
	line-height: 43px;
	text-align: center;
	color: #fff;
	margin: 0;
	font-size: 20px;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
}

.description p {
	color: #2A2A2A;
	font-size: 20px;
	font-weight: normal;
	line-height: 30px;
	margin-top: 0;
	margin-right: 20px;
	margin-left: 0px;
	margin-bottom: 0;
	padding-top: 20px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 20px;
	text-align: justify;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

div.postgraduate {
	width: 625px;
	height: 400px;
	float:left;
}


div.postgraduate p {
	font-family: inherit;
	text-align: justify;
	margin-left: 200px;
	padding-left: 10px;
	padding-right: 10px;
	
}



.research h8 {
	font-size: 15px;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
	font-style: normal;
	font-weight: bold;
	line-height: 30px; 
}
.style h9 {
	font-size: 20px;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
	font-style: normal;
	font-weight: bold;
	line-height: 80px;
	
}


.highlight {
	width: 25%;
}



.container h4 {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 30px;
	padding-bottom: 50px;
	font-weight: bold;
}

.research h2 {
	font-size: 35px;
}
.events h2 {
	font-size: 35px;
}

.container h5 {
	font-size: 30px;
	color: rgba(255,255,255,1.00);
	padding-bottom: 40px;
}

.people h2 {
	font-size: 25px;
	line-height: 30px;
}

.publication section {
	width: 70%;
	text-align: justify;
}

div.panel1 {
	width: 95%;
	float: right;
	display: none;
}
div.panel2 {
	width: 95%;
	float: right;
	display: none;
	}

div.panel3 {
	width: 95%;
	float: right;
	display: none;
}
div.panel4 {
	width: 95%;
	float: right;
	display: none;
}
div.panel5 {
	width: 95%;
	float: right;
	display: none;
}
div.panel6 {
	width: 95%;
	float: right;
	display: none;
}
div.panel7 {
	width: 95%;
	float: right;
	display: none;
}
div.panel8 {
	width: 95%;
	float: right;
	display: none;
}
div.panel9 {
	width: 100%;
	float: right;
	display: none;
}
div.panel10 {
	width: 100%;
	float: right;
	display: none;
}


.peoplemore p {
	font-size: 22px;
}

.panel1 p {
	font-size: 15px;
}

.panel2 p {
	font-size: 15px;
	color: rgba(62,3,170,1.00);
	font-weight: bold;
}

.panel2 h10 {
	font-size: 20px;
	font-weight: bold;
	color: rgba(62,3,170,1.00);
}

.panel2 h12 {
	font-size: 20px;
	font-weight: bold;
}

.panel2>ul>li>a
{color:rgba(62,3,170,1.00);}

.panel3 p {
	font-size: 15px;
}
.panel4 p {
	font-size: 15px;
}
.panel5 p {
	font-size: 15px;
}
.panel6 p {
	font-size: 15px;
}
.panel7 p {
	font-size: 15px;
}
.panel8 p {
	font-size: 15px;
}
.panel9 p {
	font-size: 15px;
}

.alumni {
	width: 50%;
}

.groupphotos {
	width: 33.33333333%;
}

.researchdescription {
	width: 85%;
	margin-left: 50px;
}

.researchdescription h2 {
	font-size: 25px;
	line-height: 40px;
}
.news h2 {
	font-size: 25px;
	line-height: 40px;
}


.research {
	width: 33.333%;
	position: relative;
	margin-top: 0px;
}

.news {
	width: 33.333%;
	position: relative;
	margin-top: 0px;
}

/*GO TO TOP*/
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 40px; /* Place the button at the bottom of the page */
    right: 60px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}


#content h6 {
	font-size: 20px;
	margin-bottom: 10px;
}
#content h7 {
	font-size: 19px;
	line-height: 30px;
	text-align: justify;
}

h11 {
	font-size: 25px;
	font-weight: bold;
}

.publication > section> header > h13 {
	font-size: 25px;
	font-weight: bold;
}

.row > .column {
  padding: 0 8px;
	margin-left: 50px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  height: 600px;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}