/*keyframe animations for the photobanner*/
.start {
	-webkit-animation: bannermove 30s linear infinite;
    -moz-animation: bannermove 30s linear infinite;
    -ms-animation: bannermove 30s linear infinite;
    -o-animation: bannermove 30s linear infinite;
    animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
	0% {
		margin-left: 0px;
	}
	100%{
		margin-left: -2125px; /*This is to create a smooth looping animation when repeating images*/
	}
}
@-moz-keyframes bannermove {
	0% {
	margin-left: 0px;
	}
	100% {
		margin-left: -2125px; /*This is to create a smooth looping animation when repeating images*/
	} 
}
 
@-webkit-keyframes "bannermove" {
	0% {
	margin-left: 0px;
	}
	100% {
		margin-left: -2125px; /*This is to create a smooth looping animation when repeating images*/
	}
}
 
@-ms-keyframes "bannermove" {
	0% {
		margin-left: 0px;
	}
	100% {
		margin-left: -2125px; /*This is to create a smooth looping animation when repeating images*/
	} 
}
 
@-o-keyframes "bannermove" {
	0% {
		margin-left: 0px;
	}
	100% {
		margin-left: -2125px; /*This is to create a smooth looping animation when repeating images*/
	}
}
.banner img {
	height: 225px;
	width: 350px;
	-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;
}
 
.banner 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-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);
}

/*Sidebar animation*/
.open {
    -webkit-animation: open 1s linear;
    -moz-animation: open 1s linear;
    -ms-animation: open 1s linear;
    -o-animation: open 1s linear;
    animation: open 1s linear;
}

@keyframes "open" {
	0% {
		margin-left: -11em;
	}
	100%{
		margin-left: -0.3em; /*This is to create a smooth animation*/
	}
}
@-moz-keyframes open {
    0% {
		margin-left: -11em;
	}
	100%{
		margin-left: -0.3em; /*This is to create a smooth animation*/
	}
}
 
@-webkit-keyframes "open" {
    0% {
		margin-left: -11em;
	}
	100%{
		margin-left: -0.3em; /*This is to create a smooth animation*/
	}
}
 
@-ms-keyframes "open" {
    0% {
		margin-left: -11em;
	}
	100%{
		margin-left: -0.3em; /*This is to create a smooth animation*/
	}
}
 
@-o-keyframes "open" {
    0% {
		margin-left: -11em;
	}
	100%{
		margin-left: -0.3em; /*This is to create a smooth animation*/
	}
}

.hide {
    -webkit-animation: close 1s linear;
    -moz-animation: close 1s linear;
    -ms-animation: close 1s linear;
    -o-animation: close 1s linear;
    animation: close 1s linear;
}

@keyframes "close" {
	0% {
		margin-left: -0.3em;
		
	}
	100%{
		margin-left: -11em; /*This is to create a smooth animation*/
	}
}
@-moz-keyframes close {
    0% {
		margin-left: -0.3em;
	}
	100%{
		margin-left: -11em; /*This is to create a smooth animation*/
	}
}
 
@-webkit-keyframes "close" {
    0% {
		margin-left: -0.3em;
	}
	100%{
		margin-left: -11em; /*This is to create a smooth animation*/
	}
}
 
@-ms-keyframes "close" {
    0% {
		margin-left: -0.3em;
	}
	100%{
		margin-left: -11em; /*This is to create a smooth animation*/
	}
}
 
@-o-keyframes "close" {
    0% {
		margin-left: -0.3em;
	}
	100%{
		margin-left: -11em; /*This is to create a smooth animation*/
	}
}