html{
	height: 100%;
	box-sizing: border-box;
}

body {
	padding-bottom: 120px;
	position: relative;
	margin: 0;
	min-height: 100%;
	color: #343434;
	font-family: 'Open Sans', sans-serif;
}

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.logo{
	width: 300px
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

h1{
	font-family: 'Nunito Sans', sans-serif;
}



.footer{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
  margin-top: 25px;
}


.text-align-center{
	text-align: center;
}

.bg-dark-pinstripe{
	background: url('../images/bg-pinstripe.png') repeat;
}

.bg-gray{
	background: #9d9d9d;
}

.white{
	color:#fff;
}

.padding-t-5{
	padding-top:5px;
}
.padding-t-10{
	padding-top:10px;
}
.padding-t-15{
	padding-top:15px;
}
.padding-t-20{
	padding-top:20px;
}
.padding-t-25{
	padding-top:25px;
}
.padding-b-5{
	padding-bottom:5px;
}
.padding-b-10{
	padding-bottom:10px;
}
.padding-b-15{
	padding-bottom:15px;
}
.padding-b-20{
	padding-bottom:20px;
}
.padding-b-25{
	padding-bottom:25px;
}

.margin-t-50{
	margin-top:50px;
}

.return-link{
	position: absolute;
	right:0px;
	bottom:10px;
}

.position-relative{
	position: relative;
}

.gray{
	color:#939393;
}
.gray-hover:active,
.gray-hover:hover{
	color:#939393;
}

.dark-blue{
	color: #194e9a;
}
.dark-blue-hover:hover{
	color: #194e9a;
}

.font-18{
	font-size: 18px;
}
.margin-t-5{
	margin-top: 5px;
}
.margin-t-10{
	margin-top: 10px;
}
.margin-t-25{
	margin-top: 25px;
}
.margin-b-15{
	margin-bottom: 15px;
}
.margin-b-20{
	margin-bottom: 20px;
}
.margin-b-25{
	margin-bottom: 25px;
}
.margin-b-50{
	margin-bottom: 50px;
}
.margin-b-75{
	margin-bottom: 75px;
}
.margin-b-100{
	margin-bottom: 100px;
}
.font-36{
    font-size: 36px;
}

.bold{
	font-weight: bold;
}

.image-container {
	margin:0 1%;
	margin-bottom: 30px;
	float: left;
	position: relative;
}

.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: rgba(47, 57, 108, 0.75);
}

.image-container:hover .overlay {
  opacity: 1;
}

.bottom-shadow{
	box-shadow: 1px 1px 48px 5px #e1e1e1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  line-height: 20px;
}

.display-block{
	display:block;
}

.hover-cursor{
	cursor: pointer;
	text-decoration: none;
}
.hover-cursor:hover{
	text-decoration: none;
}

@media(max-width : 768px) {
	.image-container{
		width: 100%;
	}
	body {
    	padding-bottom: 0;
	}
	.footer{
		position: relative;
	}
	.overlay{
		opacity: 1;
	}
	.text {
	    color: white;
	    font-size: 20px;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	    line-height: 20px;
	}
	.glyphicon-play-circle{
		font-size: 50px;
	}
	.return-link{
	    display: block;
	    position: relative;
	    margin-top: 10px;
	}
	
    .logo{
		width: 50%;
	}
}

/* map styles */

.map{
	position: relative;
	width: 100%;
	max-width: 1900px;
	margin:0 auto;
	margin-top:35px;
}

.map-image{
	width: 100%;
}

.marker {
    position: absolute;
    width: 60px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 5px #2e3871;
}

.marker-img{
	width: 25px;
	position: absolute;
	top:0px;
	bottom:0px;
}

.marker-thumbnail {
	width: 200px;
	bottom: -60px;
	position: absolute;
	left: 67%;
	border: 2px solid #444;
	display: none;
}

.marker-thumbnail-bottom-left {
	left: -215px !important;
    bottom: -167px !important;
}

.marker span{
	display:none;
	position: absolute;
	top: 38px;
	width: 125px;
	text-align: center;
	left: -54px;
	color:#fff;
	z-index: 1000;
}

.marker-1{top:29.37%; left:67.68%;}
.marker-2{top:32.84%; left:71.47%;}
.marker-3{top:36.63%; left:58.00%;}
.marker-4{top:62.11%; left:44.15%;}
.marker-5{top:46.00%; left:44.00%;}
.marker-6{top:41.16%; left:49.73%;}
.marker-7{top:39.47%; left:45.26%;}
.marker-8{top:42.73%; left:73.89%;}
.marker-9{top:44.63%; left:71.31%;}
.marker-10{top:47.37%; left:68.57%;}
.marker-11{top:48.42%; left:72.52%;}
.marker-12{top:46.53%; left:75.10%;}
.marker-13{top:51.05%; left:70.31%;}
.marker-14{top:42.00%; left:79.36%;}
.marker-15{top:22.21%; left:30.37%;}
.marker-16{top:26.74%; left:25.89%;}
.marker-17{top:24.63%; left:17.95%;}
.marker-18{top:23.79%; left:20.21%;}
.marker-19{top:25.68%; left:15.16%;}
.marker-20{top:28.74%; left:21.89%;}
.marker-21{top:38.00%; left:7.58%;}
.marker-22{top:35.16%; left:10.74%;}
.marker-23{top:17.68%; left:28.00%;}

@media only screen and (max-width: 500px) {
	.text {
	    color: white;
	    font-size: 30px;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	    line-height: 30px;
	}
	.logo{
		width: 90%;
	}

	.map{
		width: 100%;
	}

}


/* mobile map styles */
@media only screen and (max-width: 764px) {
	.map{
		margin-top:0;
		width: 100%;
	}

	.marker span{
		position: inherit;
		display: block;
		color:#02133d;;
		width: 100%;
		top:auto;
	}
	a.marker {
	    position: initial;
	    top: auto;
	    left: auto;
	    display: block;
	    width: 100%;
	    border-top: 1px solid #14163d;
	    color: #252952;
	    text-shadow: none;
	    padding:10px;
	    font-size: 16px;
	}

	a.marker:hover{
		background: #efefef;
	}

	a.marker img{
		display: none;
	}

	.map img{
		display: none;
	}
}

@media only screen and (max-width: 1120px) and (min-width: 765px){

	.marker-thumbnail {
		width: 150px;
		bottom: -60px;
		position: absolute;
		left: 67%;
		border: 2px solid #444;
		display: none;
	}

	.marker-thumbnail-bottom-left {
		left: -163px !important;
    	bottom: -121px !important;
	}

	/*

	.map-image{
		width: 750px;
		height: 290px;
	}

	.marker-sports-centre{
		top: 36px;
    	left: 124px;
	}

	.marker-vce-study-centre {
	    right: 547px;
    	top: 68px;
	}

	.marker-middle-school{
		left: 498px;
    	top: 109px;
	}

	.marker-the-pavillion{
		left: 312px;
    	top: 111px;
	}

	.marker-science-labs{
		left: 379px;
    	top: 135px;
	}

	.marker-patsy-venn{
		left: 540px;
    	top: -8px;
	}
	*/

}