@charset "UTF-8";
/* CSS Document */

body {
	background-color: #4a4a4a;
}
@font-face {
  font-family: Georgiaitalic;
  src: url("Georgia Italic.ttf");
}

@font-face {
  font-family: Sofia;
  src: url("sofiapro-light.otf");
}
body {
	font-family: Sofia;
}
.topnavlogo {
	position: absolute;
	border: 0px pink solid;
	left: 0px;
top: 0px;
	width: 35%;

	height: 11%;
	padding: 0%;
	margin-left: 2%;
}
.topnavlogoplaces {
	position: fixed;
	border: 0px pink solid;
	left: 0px;
top: 0px;
	width: 35%;

	height: 11%;
	padding: 0%;
	margin-left: 2%;
}
.topnav {
  overflow: hidden;
  background-color: none;
	margin:0px;
	position: absolute;
	right: 0%;
	top: 0px;
}
.topnavplaces {
  overflow: hidden;
  background-color: none;
	margin:0px;
	position: fixed;
	right: 0%;
	top: 0px;
	border: 2px red solid;
}

.topnav a {
  float: left;
  display: block;
  color:  #575756;
  text-align: center;
  padding: 2.4vw;
	padding-right: 6vw;
  text-decoration: none;
  font-size: 3vw;
}
@media screen and (max-width: 800px) {
	.topnav  {
		margin-top: 15vw;
		left: 0px;
background-color: #f6d341;
	}
	.topnav a {
		position: relative;
		left: 0px;
		z-index: 100;
	font-size: 6vw;
margin-left: 1%;
		padding-right: 0px;
	
		border-left: 0px #f6d341 solid;
	padding-top: 0vw;
	width: 29%;
	text-align: left;}
	.topnavplaces  {
		margin-top: 15vw;
	}

}

.topnav a:hover {
  background-color: none;
  color: black;
}

.topnav a.active {
  background-color: none;
  color: white;
}

.topnav .icon {
  display: none;

}
.topnavplaces a {
  float: left;
  display: block;
  color:  #575756;
  text-align: center;
  padding: 2.4vw;
	padding-right: 6vw;
  text-decoration: none;
  font-size: 3vw;

}

.topnavplaces a:hover {

  color: black;
}

.topnavplaces a.active {
  background-color: none;
  color: white;
}

.topnavplaces .icon {
  display: none;
border: red 2px solid;
}







.header{ 
width: 100%;
height: 5.5vw;
	padding: 1%;
position: absolute;
background-color: #f6d341;
margin: 0px;
left: 0%;
top: 0;
	z-index: -1;

}


.headerplaces{ 
width: 100%;
height: 5.5vw;
	padding: 1%;
position: fixed;
background-color: #f6d341;
margin: 0px;
left: 0%;
top: 0;
z-index: 100;

}
.mobileyellowstripe {
	display: none;
}

	@media screen and (max-width: 800px) {
		.header{ 
		height: 15vw;
}
		.topnavlogo {
			width:80%; 
		}
		.headerplaces{height: 15vw;} 
	.mobileyellowstripe {
	display: block;
background-color: #f6d341;
		z-index: -1;
		position: absolute;
		width: 170%;
	height: 24vw;
		margin:0px;
		padding: 0px;
		top: 0px;
		left: 0px;
}
		
}
.logo {
	position: absolute;
top:0px;
	left: 0%;
width: 20%;
	padding-left: 0%;
	float: left;
	height: 100%;
	margin: 0%;
	border: 2px solid red;
	
}

.coralitext {
	font-family: Sofia;
	color: #575756;
	font-size: 2.2vw;
	text-align: center;
	border: 0px green solid;
	position: relative;
	top: 25%;
	position: absolute;
	width:75%;
	left: 5%;
}
.coralitext1 {
	font-family: Sofia;
	color: #575756;
	font-size: 3.9vw;
	text-align: center;
	border: 0px green solid;
	position: relative;
	top:28%;
	width:75%;
	left: 16%;
}
.coralitext2 {
	font-family: Sofia;
	color: #575756;
	font-size: 3vw;
	text-align: center;
	border: 2px green solid;
	position: relative;
	top:28%;
	width:75%;
	left: 16%;
	padding: 2%;
}
.coralitext3 {
	font-family: Sofia;
	color: #575756;
	font-size: 3vw;
	text-align: center;
	border: 1px green solid;
	position: relative;
	top:28%;
	width:75%;
	left: 16%;
	padding: 2%;
}
.coralitext4 {
	font-family: Sofia;
	color: #575756;
	font-size: 3vw;
	text-align: center;
	border: 2px green solid;
	position: relative;
	top:28%;
	padding: 2%;
	width:75%;
	left: 16%;
}

a.coralitext:link {
	color: #3B3A3A;text-decoration: none;
}
a.coralitext:active {
	color: #3B3A3A;text-decoration: none;
}
a.coralitext:visited {
	color: #3B3A3A;text-decoration: none;
}
a.coralitext:hover {
	color: black;
}

.maincontent {
	width: 100%;
	min-height: 100%;
	background-color: none;
	position: absolute;
	top: 13%;
	left: 0px;
	z-index: 14;
}
.peoplecontent {
	width: 100%;
	min-height: 100%;
	background-color: #4a4a4a;
	position: absolute;
	top: 13%;
	left: 0px;
	z-index: 14;
}
.mapposition {
	border: 0px solid red;
	width: 3000px;
	height: 3000px;
	position: absolute;
	margin: 0px;
	left: 0%;
	top:0%;
	border: 0px solid green;
	
}
.map { 
width: 100%;
position: absolute;
 top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#mapcentre {
	background-color: none;
	width: 100px;
	height: 100px;
	position: absolute;
	
	left: 2000px;
	top: 1000px;
	
}
.dots {
	width: 3000px;
	height: 3000px;
position: relative;
 top: 0%;
  left: 0%;
  
	background-color: rgba(1,355,0,0);
}
.doticon {
	width: 25px;
	position: absolute;
	z-index: 1;
	  animation: 1s ease-out 0s 1 slideInFromLeft;
		animation-fill-mode: both;
		animation-delay: 0.5s;
}


.arrowicon {
	width: 120px;
	position: absolute;
}

#royalfestivalhall {
		left: 1430px;
	top: 1372px;
	z-index: 5;

		
}
#theplace {
	left: 1372px;
	top: 1253px;
	z-index: 1;
		
}

#tatebritain {
	left: 1370px;
	top: 1449px;
	z-index: 5;
	
}
#tatemodern {
	left: 1490px;
	top: 1370px;
	z-index: 5;
			
}
#lilianb {
	left: 1458px;
	top: 1252px;
	z-index: 1;
}
#britishmuseum {
	left: 1386px;
	top: 1297px;
	z-index: 1;
}
#cafegallery {
	left: 1629px;
	top: 1422px;
	z-index: 4;
}
#dilstongrove {
	left: 1620px;
	top: 1439px;
	z-index: 4;
}
#trinitylaban {
	left: 1746px;
	top: 1497px;
	z-index: 5;
}
#bethlemgallery {
	left: 1707px;
	top: 1946px;
	z-index: 5;
}
#greatormondst {
	left: 1409px;
	top: 1290px;
	z-index: 1;
}
#ovalhouse {
	left: 1453px;
	top: 1590px;
	z-index: 5;
}
#stmarys {
	left: 1566px;
	top: 1230px;
	z-index: 1;
}
#whitechapel {
	left: 1570px;
	top: 1310px;
	z-index: 1;
}
#ovalhouse {
	left: 1455px;
	top: 1590px;
	z-index: 5;
}
#croydonclocktower {
	left: 1487px;
	top: 2042px;
	z-index: 5;
}
#bermondsey {
	left: 1604px;
	top: 1408px;
	z-index: 1;
}
#tomblau {
	left: 1547px;
	top: 1390px;
	z-index: 1;
}
#warehouse {
	left: 1584px;
	top: 1403px;
	z-index: 1;
}
#oxotower {
	left: 1454px;
	top: 1364px;
	z-index: 5;
}
#designmuseum {
	left: 1157px;
	top: 1413px;
	z-index: 5;
}
#lewisham {
	left: 1781px;
	top: 1672px;
	z-index: 5;
}
#turtlekey {
	left: 1072px;
	top: 1449px;
	z-index: 5;
}
#charlescryer {
	left: 1316px;
	top: 2083px;
	z-index: 5;
}
#silwood {
	left: 1646px;
	top: 1454px;
	z-index: 5;
}
#rosetheatre {
	left: 797px;
	top: 1907px;
	z-index: 5;
}
#calder {
left: 1468px;
	top: 1397px;
	z-index: 5;
}
#barbican {
	left: 1498px;
	top: 1301px;
	z-index: 1;
}



#dorsetcornwall {
	left: 826px;
	top: 1967px;
	z-index: 5;
	transform: rotate(330deg);
}
#cornwall {
	left: 866px;
	top: 1907px;
	z-index: 5;
	transform: rotate(320deg);
	border: red 0px solid;
}
#bournemouth {
	left: 826px;
	top: 2067px;
	z-index: 5;
	transform: rotate(340deg);
	border: red 0px solid;
}
#trowbridge{
	left: 222px;
	top: 1449px;
	z-index: 5;
}
#wardrobetheatre{
	left: 222px;
	top: 1579px;
	z-index: 5;
	transform: rotate(350deg);
}
#ikongallery {
	left: 872px;
	top: 763px;
	z-index: 5;
	transform: rotate(40deg);
}
#sylvesterhouse {
	left: 602px;
	top: 858px;
	z-index: 5;
	transform: rotate(40deg);
}
#finland {
	left: 2366px;
	top: 800px;
	z-index: 5;
	transform: rotate(305deg);
}
#denmark {
	left: 2466px;
	top: 800px;
	z-index: 5;
	transform: rotate(319deg);
		border: red 0px solid;
}
#worcester {
	left: 250px;
	top: 1059px;
	z-index: 5;
	border: red 0px solid;
		transform: rotate(20deg);
}
#oxford {
	left: 250px;
	top: 1109px;
	z-index: 5;
	border: red 0px solid;
		transform: rotate(30deg);
}
#jakarta {
	left: 2200px;
	top: 1900px;
	z-index: 5;
	transform: rotate(35deg);
	border: red 0px solid;
}
#kingsweston {
	left: 200px;
	top: 1559px;
	z-index: 5;
	border: red 0px solid;
		transform: rotate(350deg);
}
#bath {
	left: 270px;
	top: 1609px;
	z-index: 5;
	border: red 0px solid;
		transform: rotate(360deg);
}





.doticon .tooltiptext {
  visibility: hidden;
  width: 100px;
  background-color: rgba(255,211,0,1);
  color: #575756;
	font-family: Sofia;
  text-align: center;
  border-radius: 35px;
  padding: 10px 5px;
  position: absolute;
  z-index: 25;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
	z-index: 10;
	font-size: 1.2vw;
}
@media screen and (max-width: 800px) {
	.doticon .tooltiptext {font-size: 2.4vw;}
}


.doticon .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #ffd300 transparent transparent transparent;
		z-index: 25;
	
}

.doticon:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
	z-index: 25;
	
}

.arrowicon .tooltiptext {
  visibility: hidden;
		font-size: 1.2vw;
  width: 100px;
  background-color: #ffd300;
  color: #575756;
font-family: Sofia;
  text-align: center;
  border-radius: 35px;
  padding: 5px 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
	z-index: 20;
	

}
#myBtn11 {
		font-size: 1.2vw;
}

.arrowicon .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #ffd300 transparent transparent transparent;
		z-index: 20;
	
		
}

.arrowicon:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
		z-index: 20;
	

}
.bethancontainer {
  position: absolute;
	width: 23%;
	top: 5%;
	left: 2%;
	transform: rotate(-10deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.2s;
}
.DJcontainer {
  position: absolute;
	width: 36%;
	top: 10%;
	left: 25%;
	transform: rotate(10deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.1s;
}
.Jackiecontainer {
  position: absolute;
	width: 22%;
	top: 5%;
	left: 75%;
	transform: rotate(-3deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.3s;
}
.Paulcontainer {
  position: absolute;
	width: 30%;
	top: 365%;
	left: 5%;
	transform: rotate(3deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.4s;
	z-index: 1;
}
.Grahamcontainer {
  position: absolute;
	width: 33%;
	top: 48%;
	left: 10%;
	transform: rotate(-3deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.5s;
}

.Shericontainer {
  position: absolute;
	width: 29%;
	top: 90%;
	left: 1%;
	transform: rotate(5deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.4s;
}
.Aaroncontainer {
  position: absolute;
	width: 32%;
	top: 97%;
	left: 64%;
	transform: rotate(-2deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		
	  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.5s;
}
.Danielcontainer {
  position: absolute;
	width: 25%;
	top: 100%;
	left: 30%;
	transform: rotate(-2deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.4s;
}
.Jacobuscontainer {
  position: absolute;
	width: 25%;
	top: 140%;
	left: 4%;
	transform: rotate(2deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		
	  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.5s;
}

.Bridgetcontainer {
  position: absolute;
	width: 23%;
	top: 185%;
	left: 70%;
	transform: rotate(3deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.4s;
}
.Sarahcontainer {
  position: absolute;
	width: 23%;
	top: 267%;
	left: 65%;
	transform: rotate(2deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.4s;
}
.Margaretcontainer {
  position: absolute;
	width: 33%;
	top: 140%;
	left: 58%;
	transform: rotate(2deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		
	  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.5s;
}
.Johncontainer {
  position: absolute;
	width: 25%;
	top: 260%;
	left:2%;
	transform: rotate(5deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.4s;
}
.Nataliecontainer {
  position: absolute;
	width: 20%;
	top: 205%;
	left: 6%;
	transform: rotate(-1deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		
	  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.5s;
}

.Aishacontainer {
  position: absolute;
	width: 30%;
	top: 325%;
	left: 18%;
	transform: rotate(-3deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.4s;
}
.Janecontainer {
  position: absolute;
	width: 22%;
	top: 263%;
	left: 37%;
	transform: rotate(-2deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		
	  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.5s;
}
.Jocontainer {
  position: absolute;
	width: 30%;
	top: 415%;
	left: 67%;
	transform: rotate(3deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.4s;
}
.Lauracontainer {
  position: absolute;
	width: 28%;
	top: 455%;
	left: 44%;
	transform: rotate(-3deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		
	  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.5s;
}

.Veneshiacontainer {
  position: absolute;
	width: 33%;
	top: 398%;
	left: 33%;
	transform: rotate(-5deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.4s;
}
.Vickycontainer {
  position: absolute;
	width: 35%;
	top: 470%;
	left: 7%;
	z-index: -1;
	transform: rotate(3deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		
	  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.5s;
}
.Nicolecontainer {
  position: absolute;
	width: 35%;
	top: 348%;
	left: 50%;
	z-index: -1;
	transform: rotate(-3deg);
border: 10px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		
	  animation: 1s ease-out 0s 1 slideInFromLeft;
	animation-fill-mode: both;
		animation-delay: 0.5s;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #ffd300;
	border: 10px solid #ffd300;
	margin: -10px;
}

.sarahcontainer:hover .overlay {
  opacity: 1;
}
.bethancontainer:hover .overlay {
  opacity: 1;
}
.DJcontainer:hover .overlay {
  opacity: 1;
}
.Jackiecontainer:hover .overlay {
  opacity: 1;
}
.Paulcontainer:hover .overlay {
  opacity: 1;
}
.Grahamcontainer:hover .overlay {
  opacity: 1;
}
.Aaroncontainer:hover .overlay {
  opacity: 1;
}
.Shericontainer:hover .overlay {
  opacity: 1;
}
.Danielcontainer:hover .overlay {
  opacity: 1;
}
.Jacobuscontainer:hover .overlay {
  opacity: 1;
}
.Bridgetcontainer:hover .overlay {
  opacity: 1;
}
.Margaretcontainer:hover .overlay {
  opacity: 1;
}
.Johncontainer:hover .overlay {
  opacity: 1;
}
.Nataliecontainer:hover .overlay {
  opacity: 1;
}
.Aishacontainer:hover .overlay {
  opacity: 1;
}
.Janecontainer:hover .overlay {
  opacity: 1;
}
.Jocontainer:hover .overlay {
  opacity: 1;
}
.Lauracontainer:hover .overlay {
  opacity: 1;
}
.Veneshiacontainer:hover .overlay {
  opacity: 1;
}
.Vickycontainer:hover .overlay {
  opacity: 1;
}
.Nicolecontainer:hover .overlay {
  opacity: 1;
}

.text {
  color: #575756;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
	font-family: Sofia;
	font-size: 1.5vw;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.note {
	position: fixed;
	right: 10px;
	color: white;
	bottom: 20px;
	width: 100px;
	border: 2px yellow solid;
	padding: 5px;
}
@media screen and (max-width: 800px) {
	.overlay {
 height: 130%;
  width: 130%;
		left: -12%;
		top: -12%;
		font-size: 10vw;
		
}
	.text {
		font-size: 8vw;
	}
}

.noteprocess
{
	position: fixed;
	left: 1%;
	color: white;
	bottom: 50%;
	width: 500px;
	border: 2px yellow solid;
	padding: 5px;
}


@keyframes slideInFromLeft {
  0% {
    opacity: 0;
  }
  100% {
   opacity: 1;
  }
}