/*body and container - Adjustments made at: https://codepen.io/anon/pen/mPXgbW */

#container {
	width: 100%;
	overflow: hidden;
	margin: 1em auto;
	background: #DCDDDE;
}

/*header*/
.logo-header {
	width: 100%;
	margin: 0 auto 2em;
	text-align: center;
}

/*header h1 {
	text-align: center;
	font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}*/

/*header p {
	font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
	text-align: justify;
}*/

/*photobanner*/

.photobanner {
	height: 70px;
	width: 6082px;
	margin-bottom: 0;
	animation-play-state: running;
  animation: bannermove 30s linear infinite;
}

.photobanner img {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.photobanner img:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	cursor: pointer;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);

	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
	box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}

.photobanner-wrap:hover .photobanner {
  animation-play-state: paused;
}

/*keyframe animations - Adjustments made at: https://codepen.io/anon/pen/mPXgbW*/
/*.first {
	-webkit-animation: bannermove 30s linear infinite;
	-moz-animation: bannermove 30s linear infinite;
	-ms-animation: bannermove 30s linear infinite;
	animation: bannermove 30s linear infinite;
}*/
/* images are 242px wide each. need to add/remove that amount as needed per slide */

@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -3525px;
 }

}

@keyframes bannermove {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -3525px;
 }

}

@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -3525px;
 }

}

@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -3525px;
 }

}

@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -3525px;
 }

}

@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -3525px;
 }

}