/*
 *
 * City University of Hong Kong
 * ----------------------------
 * Site Specific CSS
 *
 */

/* ============================ Place your custom CSS here */
<style>

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
}

.alert.success {background-color: #04AA6D;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

.enlargeimg {
    transition:transform 0.25s ease;
	}

.enlargeimg:hover {
    -webkit-transform:scale(2); /* or some other value */
    transform:scale(2);
	}
	
html {
			box-sizing: border-box;
		}

		.mos_sportlight{
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: 1fr;
			grid-column-gap: 0px;
			grid-row-gap: 0px;
		}

		.mos_sportlight img{
			height: 260px;
			width: 360px;
		}

		.mos_on_going {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-template-rows: 1fr;
			grid-column-gap: 10px;
			grid-row-gap: 10px;
		}

		.cityu-submenu-list a[target="_blank"]::after {
			display: none;
			position: static;
			margin-left: 5px;
			top: 1rem;
			right: 1rem;
			font-family: "Font Awesome 5 Free";
			content: "\f360";
			font-weight: 700;
			font-size: 0.75rem;
			opacity: 0.6;
		}

		*, *:before, *:after {
			box-sizing: inherit;
		}

		.column {
			float: left;
			width: 33.3%;
			height: 650px;
			margin-bottom: 16px;
			padding: 0 8px;
		}

		@media screen and (max-width: 650px) {
			.column {
				width: 100%;
				height: 700px;
				display: block;
			}
		}
		
		.Events-column {
			float: left;
			width: 33.3%;
			height: 450px;
			margin-bottom: 16px;
			padding: 0 8px;
		}

		@media screen and (max-width: 650px) {
			.Events-column {
				width: 100%;
				height: 500px;
				display: block;
			}
		}

		.card {
			box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
		}
		
		/* .container {
			padding: 0 16px;
		}
                                       */

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

		.title {
			color: grey;
		}

		.button {
			border: none;
			outline: 0;
			display: inline-block;
			padding: 8px;
			color: white;
			background-color: #000;
			text-align: center;
			cursor: pointer;
			width: 100%;
}

		.button:hover {
			background-color: #555;
		}

.column4 {
	float: left;
	width: 25%;
	height: 300px;
	margin-bottom: 16px;
	padding: 0 8px;
}

@media screen and (max-width: 650px) {
	.column4 {
		width: 100%;
		height: 400px;
		display: block;
	}
}

.column3 {
	float: left;
	width: 33%;
	
	margin-bottom: 16px;
	padding: 0 8px;
}

@media screen and (max-width: 650px) {
	.column3 {
		width: 100%;
		
		display: block;
	}
}

.column2 {
	float: left;
	width: 50%;
	margin-bottom: 10px;
	padding: 0 8px;
}

.column2-1 {
		float: left;
		width: 40%;
}

	.column2-2 {
		float: right;
		width: 60%;
	}

@media screen and (max-width: 1200px) {
	.column2 {
		width: 50%;
		height: 200px;
		display: block;
	}
	
	.column2-1 {
		float: left;
		width: 50%;
		height: 200px;
}

	.column2-2 {
		float: right;
		width: 50%;
		height: 200px;
	}
}

@media screen and (max-width: 650px) {
	.column2 {
		width: 100%;
		height: 200px;
		display: block;
	}
	
	.column2-1 {
		float: left;
		width: 50%;
		height: 200px;
}

	.column2-2 {
		float: right;
		width: 50%;
		height: 200px;
	}
}



</style>