@font-face{
  font-family: 'Actor';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Actor-regular/Actor-regular.eot');
  src: url('../fonts/Actor-regular/Actor-regular.eot?#iefix') format('embedded-opentype'),
       local('Actor Regular'),
       local('Actor-regular'),
       url('../fonts/Actor-regular/Actor-regular.woff2') format('woff2'),
       url('../fonts/Actor-regular/Actor-regular.woff') format('woff'),
       url('../fonts/Actor-regular/Actor-regular.ttf') format('truetype'),
       url('../fonts/Actor-regular/Actor-regular.svg#Actor') format('svg');
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Open-Sans-regular/Open-Sans-regular.eot');
  src: url('../fonts/Open-Sans-regular/Open-Sans-regular.eot?#iefix') format('embedded-opentype'),
       local('Open Sans'),
       local('Open-Sans-regular'),
       url('../fonts/Open-Sans-regular/Open-Sans-regular.woff2') format('woff2'),
       url('../fonts/Open-Sans-regular/Open-Sans-regular.woff') format('woff'),
       url('../fonts/Open-Sans-regular/Open-Sans-regular.ttf') format('truetype'),
       url('../fonts/Open-Sans-regular/Open-Sans-regular.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'Oswald';
  font-weight: 500;
  font-style: normal;
  src: url('../fonts/Oswald-500/Oswald-500.eot');
  src: url('../fonts/Oswald-500/Oswald-500.eot?#iefix') format('embedded-opentype'),
       local('Oswald Medium'),
       local('Oswald-500'),
       url('../fonts/Oswald-500/Oswald-500.woff2') format('woff2'),
       url('../fonts/Oswald-500/Oswald-500.woff') format('woff'),
       url('../fonts/Oswald-500/Oswald-500.ttf') format('truetype'),
       url('../fonts/Oswald-500/Oswald-500.svg#Oswald') format('svg');
}

@font-face {
  font-family: 'Basic';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Basic-regular/Basic-regular.eot');
  src: url('../fonts/Basic-regular/Basic-regular.eot?#iefix') format('embedded-opentype'),
       local('Basic Regular'),
       local('Basic-regular'),
       url('../fonts/Basic-regular/Basic-regular.woff2') format('woff2'),
       url('../fonts/Basic-regular/Basic-regular.woff') format('woff'),
       url('../fonts/Basic-regular/Basic-regular.ttf') format('truetype'),
       url('../fonts/Basic-regular/Basic-regular.svg#Basic') format('svg');
}

body {
	background-color: #ffffff;
	margin: 0px auto;
	padding: 0px;
	width: 100%;
	position: relative;
	font-size: 16px;
	color: #414141;
	font-family: 'Josefin Sans';
}

header {
	width: 977px;
	height: 534px;
	margin: 0px auto;
	background-color: #5b9dde;
	background-image: url('../images/2roofsheadimg.jpg');
	background-repeat: no-repeat;
	position: relative;
	display: block;
}

content {
	width: 977px;
	height: 100%;
	margin: 0px auto;
	text-align: center;
}

a.headmenu {
	color: #d8ecff;
	text-shadow: 0px 0px 6px #004d99;
	padding: 10px;
	position: relative;
	text-decoration: none;
	font-size: 18px;
}

a.headmenu:hover {
	color: #ffffff;
	padding: 10px;
	position: relative;
	text-decoration: none;
	font-size: 18px;
}

.responsive-image-slides {
	position: relative;
	padding-bottom: 50.00%;
	padding-top: 10px; 
	height: auto;
	overflow: hidden;
}

.responsive-image-slides img {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 977px;
	height: 100%;
}

#bar {
  	width: 977px;
  	height: 200px;
  	position: relative;
	margin: 0px auto;
  	text-align: left;
  	background-image:-webkit-gradient(linear,left top,left bottom,from(#484848),to(#171717));
  	background-image:-webkit-linear-gradient(top,#484848,#171717);
  	background-image:-moz-linear-gradient(top,#484848,#171717);
  	background-image:-ms-linear-gradient(top,#484848,#171717);
  	background-image:-o-linear-gradient(top,#484848,#171717);
  	background-image:linear-gradient(top,#484848,#171717);
}

#footer {
  	color: #cccccc;
	font-family: 'Josefin Sans';
  	font-size: 10px;
  	font-style: normal;
	font-weight: 200;
  	text-shadow: 0 -1px 1px #000;
	bottom: 0;
  	display: block;
  	position: relative;
  	padding: 5px;
  	padding-left: 10px;
  	min-height: 1.1em;
  	text-align: center;
  	overflow: hidden;
	margin: 0px auto;
}

.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}