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{
	margin-top:-15px;
}

.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;
	top: 85px;
}

.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{
	}
	
    .logo{
		width: 135px;
	}
}

/* map styles */

.map{
	position: relative;
	width: 1190px;
	height:458px;
	margin:0 auto;
	margin-top:50px;
}

.map-image{
	width: 1190px;
	height:458px;
}

.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 span{
	display:none;
	position: absolute;
	top: 38px;
	width: 125px;
	text-align: center;
	left: -54px;
	color:#fff;
	z-index: 1000;
}

.marker-Art-Plaza{
	top: 130px;
	left: 400px;
}

.marker-Bayside-Aquatics-Centre{
	left: 597px; 
	top: 14px;
}

.marker-Bayview-Campus{
	left: 939px; 
	top: 52px;
}
.marker-Creativity-Centre{
	left: 524px;
    top: 60px;
}
.marker-Eblana-Campus{
	left: 784px; 
	top: 79px;
}
.marker-Findlay-Anderson-Junior-Library{
	left: 854px;
    top: 55px;
}
.marker-Frogmore-Campus{
	left: 596px;
    top: 111px;
}
.marker-Greenways-Cafe{
	left: 811px; 
	top: 218px;
}
.marker-Greenways-Campus{
	    left: 876px;
    top: 254px;
}
.marker-Gregory-Fish-Senior-Library{
	left: 530px; 
	top: 131px;
}
.marker-Mary-Jones-Early-Learning-Centre{
	left: 979px; 
	top: 207px;
}
.marker-School-Oval{
	left: 464px; 
	top: 212px;
}
.marker-Science-Centre{
	left: 712px;
	top: 163px;
}
.marker-Sports-Centre{
	left: 272px;
    top: 118px;
}
.marker-Thorold-Theatre{
	left: 471px; 
	top: 45px
}

@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: 135px;
	}

	.map{
		width: 135px;
	}

}


/* 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){

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

	.marker-Art-Plaza{
		left: 251px; top: 73px
	}

	.marker-Bayside-Aquatics-Centre{
		left: 372px; top: 8px
	}

	.marker-Bayview-Campus{
		left: 592px; top: 35px
	}
	.marker-Creativity-Centre{
		left: 322px; top: 19px
	}
	.marker-Eblana-Campus{
		left: 494px; top: 47px
	}
	.marker-Findlay-Anderson-Junior-Library{
		left: 532px; top: 32px
	}
	.marker-Frogmore-Campus{
		left: 370px; top: 64px
	}
	.marker-Greenways-Cafe{
		left: 505px; top: 131px
	}
	.marker-Greenways-Campus{
		left: 542px; top: 150px
	}
	.marker-Gregory-Fish-Senior-Library{
		left: 316px; top: 69px
	}
	.marker-Mary-Jones-Early-Learning-Centre{
		left: 609px; top: 125px
	}
	.marker-School-Oval{
		left: 247px; top: 144px
	}
	.marker-Science-Centre{
		left: 418px; top: 94px
	}
	.marker-Sports-Centre{
		left: 172px; top: 64px
	}
	.marker-Thorold-Theatre{
		left: 277px; top: 34px
	}
}


.bg-yellow{
	background: #f7b700;
	height: 125px;
}

.yellow{
	color: #f7b700;
}