@font-face{
	font-family:"Gotham";
	src:url("/new/fonts/gothamlight.woff2") format("woff2"),
		url("/new/fonts/gothamlight.woff") format("woff");
	font-weight:300;
	font-style:normal
}
@font-face{
	font-family:"Gotham";
	src:url("/new/fonts/gothammedium.woff2") format("woff2"),
		url("/new/fonts/gothammedium.woff") format("woff");
	font-weight:500;
	font-style:normal
}
:root{
	--josefin:"Josefin Sans",sans-serif;
	--gotham:"Gotham",sans-serif;
}
body{
	font-family:var(--gotham);
	color:var(--darkgrey);
	margin:0;
	color: #fff;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	height:100%;
}
img{max-width:100%;}

.main{display:flex;height: 100%; min-height:100vh;width:100%;background: url('/new/images/city-background.jpg') no-repeat 0 0; background-size:cover;position:relative;flex-wrap:wrap;justify-content:center; align-items:center;flex-wrap:wrap;position:relative;}

.logo{    
	position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
	z-index:2;
}
.glasgow,.nottingham{
	width:50%;
	height:100%;
	padding:0;
	z-index:0;
	max-width:620px;
	margin:0 auto;
}


.glasgow:before,.nottingham:before{
	content: " ";
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:-1;
	transition: background ease-in 0.4s;
	min-height:100vh;
}
.glasgow:before{
	right:50%;
}
.nottingham:before{
	left:50%;
}
.glasgow:hover:before,.nottingham:hover:before{
	transition: background ease-in 0.4s;
	background: rgba(0,0,0,0.4);
}
.glasgow img,
.nottingham img {
	max-width:620px;
	width:100%;
}
	.glasgow > div,
.nottingham > div {
	margin:0 auto;
}
.subTitle,.btn-yellow  {
	font-family: "Gotham";
	font-size: 20px;
    font-weight:500;
}
.subTitle{
	margin: -64px 20px 0 20px;
}
.heading {
	font-family: "Josefin Sans";
	font-size: 64px;
	margin: 20px 20px 0 20px;
}
.btn-yellow {
	padding: 12px 24px;
	margin:20px;
	background: #D4AF37;
	color: #fff;
    text-decoration: none;
	display: inline-block;
}

@media (max-width: 1399px) {
	.glasgow, .nottingham {
		width: 42%;
		padding: 0 4%;
		min-height:initial;
		position:initial;
	}
}
@media (max-width: 1199px) {

	.subTitle{
		margin: 24px 20px 0 20px;
		font-size:16px;
	}
	.heading {
		font-size: 40px;
	}
}
@media (max-width: 767px) {
	.logo{ max-width: 150px;}
	.main{text-align:center; margin: 0 auto}
	.glasgow, .nottingham {
		width: 100%;
		padding:0;
		min-height:initial;
		position:initial;
		text-align: left;
		margin: 0 auto 60px
	}
	.glasgow > div, .nottingham > div {
		margin: 0 30px;
	}
	.logo {
		position: relative;
		margin-bottom: 30px;
		left: 0;
		transform: none;
	}
	.heading {
		font-size: 24px;
	}
	.glasgow:before,.nottingham:before{
		content: none;
	}
	.btn-yellow{
		font-size:16px;
		font-weight:400;
	}
	.heading,.btn-yellow,.subTitle{
		margin:20px 0 0
	}
}