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

body {
	padding-bottom: 120px;
	position: relative;
	margin: 0;
	min-height: 100%;
}

.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('../index_files/bg-pinstripe.png') repeat;
}

.bg-gray{
	background: #a8a8a8;
}

.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:#fff;
}

.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;
}

.font-36{
    font-size: 36px;
}

.bold{
	font-weight: bold;
}

.image-container {
	width: 18%;
	margin:0 1%;
	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(168, 168, 168, 0.75);
}

.image-container:hover .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;
}

.display-block{
	display:block;
}

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