/*code for the webpage itself*/
body, html {
    height: 100%;
    margin: 0;
	background-color: white;
}

.header {
    /*the image used*/
    background-image: url("home/header.jpg");/*the home in the url is part of the pathway to the image*/
	height: 15vmax;
	
    /*centre and scale the image*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#navbar  {	
	list-style-type: none;/*removes bullet points*/
	text-align: center;
	padding-top: 1%;
	margin-top: 2%;
	overflow: hidden;
	background-color: white;
	z-index:9;
}

/*If the screen size is 601px or more, set the font-size to 5vmax. Same applies to the other media screens*/
@media screen and (min-width: 600px) {
 #navbar{
    height: 5vmax;
	}
}

/*If the screen size is 600px or less, set the font-size to 6.5vmax so that you can still read the text when page is small. Same applies to the other media screens*/
@media screen and (max-width: 600px) {
#navbar{
    height: 6.5vmax;
	}
}

/*code that deals with each individual link*/
#navbar ul li {
	display: inline-block;
	margin: 0%/*top*/ 5%/*right*/;
}

#navbar a {
	color: #fdc563;/*yellow*/
	text-align: center;
	position: relative;
	text-decoration: none;/*removes link underline*/
	font-family: 'Montserrat', sans-serif;/*font for the links that is made availabe in the html*/
}

@media screen and (min-width: 600px) {
 #navbar a{
    font-size: 2vmax;
	}
}

@media screen and (max-width: 600px) {
#navbar a{
    font-size: 2.5vmax;
	}
}

#navbar a:before, #navbar a:after {
	content: '';
	position: absolute;
	bottom: 2px;
	left: 0;
	right: 0;
	height: 2px;
	background-color: #2b2b2b;/*black line*/
}

/*This part if the code deals with how when a user hovers over the navbar a line appears underneath the words and disappears again when you don't hover*/
#navbar a:before {
	opacity: 0;
	-webkit-transform: translateY(-8px);
	transform: translateY(-8px);
	transition: opacity 0s, -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
	transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s, -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#navbar a:after {
	opacity: 0;
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	transition: opacity 0.2s, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#navbar a:hover:before, #navbar a:hover:after, #navbar a:focus:before, #navbar a:focus:after {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
#navbar a:hover:before, #navbar a:focus:before {
	transition: opacity 0.2s, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#navbar a:hover:after, #navbar a:focus:after {
	transition: opacity 0s 0.2s, -webkit-transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s;
	transition: transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s, -webkit-transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/*sticky class is added to the navbar with javascript when it reaches its scroll position*/
.sticky {
	position: fixed;
	top: 0;
	width: 100%;
}

/*add some top padding to the sections to prevent sudden quick movement when scrolling*/ 
.sticky + .section1 + .section2 + .section3 {
	padding-top: 1%;
}

.top1{
	margin-top: -1%;
	width:100%;
	height:100%;
	background-color: transparent; /*the background colour is transparent so that you cannot see it even if the div is too big for the image*/
	position: absolute;
	float:left;
}

.left1{
	margin-top: 51.9%;
	width: 49.7%;
	height:20%;
	float:left;
	background-color: transparent;
	position: absolute;
}


.right1{
	text-align: center;
	margin-top:51.9%;
	margin-left: 50.3%;
	width: 49.7%;
	height: 20%;
	background-color: transparent;
    position: absolute;
	float:right;
}
	
.section2{
	text-align: center;
	width: 100%;
	height: 31vmax;
	margin-top: 107%;
	background-color: #8983f2;/*purple*/
	color: #2b2b2b;/*black*/
	position: absolute;
	font-size: 3vmax;
	font-family: 'Montserrat', sans-serif;
}

.left2{
	width: 25%;
	height:10%;
	margin-top: -3%;
	margin-left: 5%;
	float:left;
	background-color: transparent;
	position: absolute;
}

/*this code deals with adding captions to the play images*/
.left2 a  {
	position: relative;
	overflow: hidden;
}

.left2 span {
	position: absolute;
	text-align: center;
	bottom: -1%;/*where the caption is when the user is not hovering over the image*/
	left: 0;
	width: 90%;
	color: transparent;
	background: transparent;/*i made the text and background colours transparent so that you can't see the caption when not hovering over image*/
	font-size: 1.3vmax;
	padding: 0.3vmax/*top*/ 0/*right*/  0.3vmax/*bottom*/ 0/*left*/;
	transition: 0.2s;/*the amount of time it takes for the caption to fully display*/
}

.left2 a:hover span {
	bottom: 13%;
	color: #2b2b2b;/*black*/
	background: rgba(250, 250, 250, 0.8);/*code that makes the caption background slightly tranparent and white*/
}

.left2 a,
.left2 img {
	display: block;
}

.centre2{
	width: 25%;
	height:10%;
	margin-top: -3%;
	margin-left: 38%;
	background-color: transparent;
	position: absolute;
}

/*this code deals with adding captions to the play images*/
.centre2 a  {
	position: relative;
	overflow: hidden;
}

.centre2 span {
	position: absolute;
	text-align: center;
	left: 0;
	bottom: -1%;
	width: 90%;
	color: transparent;
	background: transparent;
	font-size: 1.3vmax;
	padding: 0.3vmax/*top*/ 0/*right*/  0.3vmax/*bottom*/ 0/*left*/;
	transition: 0.2s;
}

.centre2 a:hover span {
	bottom: 13%;
	color: #2b2b2b;/*black*/
	background: rgba(250, 250, 250, 0.8);
}

.centre2 a,
.centre2 img {
	display: block;
}

.right2{
	width: 25%;
	height:10%;
	margin-top: -3%;
	margin-left: 70%;
	background-color: transparent;
	position: absolute;
}

/*this code deals with adding captions to the play images*/
.right2 a  {
	position: relative;
	overflow: hidden;
}

.right2 span {
	position: absolute;
	text-align: center;
	left: 0;
	bottom: 0%;
	width: 90%;
	color: transparent;
	background: transparent;
	font-size: 1.3vmax;
	padding: 0.3vmax/*top*/ 0/*right*/  0.3vmax/*bottom*/ 0/*left*/;
	transition: 0.4s;
}

.right2 a:hover span {
	bottom: 13%;
	color: #2b2b2b;/*black*/
	background: rgba(250, 250, 250, 0.8);
}

.right2 a,
.right2 img {
	display: block;
}

.section3{
	text-align: center;
	width: 100%;
	height: 59vmax;
	margin-top: 156%;
	background-color: #8983f2;/*purple*/
	color: #2b2b2b;/*black*/
	position: absolute;
	font-size: 3vmax;
	font-family: 'Montserrat', sans-serif;
}

/*code that makes the google maps responsive*/
.responsive_map{
    overflow:hidden;
    padding-bottom:56.25%;
	margin-left: 20%;
    position:relative;
    height:0;
}
.responsive_map iframe{
    left:0;
    top:0;
    height:80%;
    width:80%;
    position:absolute;
}