@charset "utf-8";
/* CSS Document */

html{ 
}
body { 
 font-family: 'IM Fell French Canon SC', serif;
 background: #FFF url('images/vrblue.png') no-repeat top;
 height: 100vh;
 background-size: contain;

}

body .logo{
/*	display:flex; */
/*	justify-content:flex-end; */
/*	width: 30%; */
	float: left;
	height: 20vh;
	margin-top:1em;
	margin-left: 9em;
        margin-down:4em;
/*	text-align: right; */
}
body .logo img{
/*    max-width: 150%; */
     height: 4em;
/*    background-color: #000; */
}
body nav a{
	color: blue;
	margin: 0em 2em 0em 0em;
	font-size: 2em;	
	text-decoration: none;
}
body nav a:hover{
	color:red;
}
body .menu{
	display:flex;
/*	justify-content:flex-end; */
/*	width: 30%;   */
	float: right;
	text-align: right;
	margin-top: 1em;
        margin-right: 8em;
}

body main h1{
    padding-top: 2em;
    color: #00BECA;
    font-size: 3em;
    margin-left: 2em;
    text-shadow: 1px 1px #ffffff;
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
} 
@keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
body main #intro img{
  position: absolute;
  left: 0px;
  top: 0px;
  animation: slidein 2s ease-in-out;
  z-index: 1;
}

@keyframes slidein {
  0% {
    top: 500px;
  }
  100% {
    top: 0px;
  }
}
li {

  margin-left: 10em;
  display: flex;

  align-items: left;
  justify-content: left;
  width: 100%;
/*  padding: 20px; */
  height: 80px;
  font-size: 1.8em;
  position: relative;
}
footer {
	margin: 140px auto;
	border-top: 1px solid gray;
	padding-top:20px;
	text-align: center;	
	text-height: 140%;
}
















@media (max-width:540px){
	.container{
		width: 100%;
	}

	header{
		text-align: center;
	}

	header .container{
		flex-wrap: wrap;
	}
	header #icons img{
	height: 20px;
	}		
	header nav{
		width: 100%;
		padding-top: 16px;
		display: none;  
	}
	header nav a{
		display: block;
		font-size: 1em;
		padding: 3px 0;
		border-top:solid 1px #FFF;
		margin: 0;
	}
	header .icon{
		display: block;
	}
	header .icon img{
		width: 32px;
		height: 32px;
	}
	header .icon .close{
		display:none;
	}
	#banner{
		height: 550px;
	}
	#banner h1{
		font-size:1.5em;
	}
	main h1{
	text-align: center;
	font-size: 2em;
	}
	main .items p{
	font-size: 1.2em;
	}
	main #mfservices .self iframe{
	max-width: 100%;
	display: block;
	margin: 20px auto;
	}

 .slick-dots li button:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "•";
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        text-align: center;
        color: black;
        opacity: 0.25;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }