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

html, body {
background-repeat: no-repeat;
background-position: center 0px;
background-image: none;
background-size: auto auto;
overflow-x:hidden;
margin: auto; 
padding: 0;
}

* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
h1 {
font-size: 1.4em;
padding: 10px 10px 0;
}
p {
padding: 0 10px 1em;
}
#container {
overflow:hidden;
min-height: 100%;
background-color: #fff;
width: 100%;
margin: 0 auto;
position:relative;
}
* html #container {
height: 100%;
}

.logomenubox {
	text-align:center;
	max-width:100%;
	margin:150px 20px 20px 20px;
	padding:20px;
	position:inherit;
	display:block;
	z-index:999;
	box-sizing:border-box;
}
.description {
	width:520px;
	max-width:100%;
	margin:auto;
	padding:0px 20px;
	box-sizing:border-box;
	font-weight:100 !important;
}
.descriptionimg {
	max-width:100%;
	margin:auto;
	padding:0px 20px;
	box-sizing:border-box;
	display:block;
}
.menu {
	margin:auto;
	padding:25px !important;
	color:#FFF;
	box-sizing:border-box;
}
.gallery {
	width:800px;
	max-width:100%;
	margin:auto;
	display:block;
	padding:0px 20px 60px 20px;
	box-sizing:border-box;
	font-size:20px;
	font-weight:100 !important;
}
.gallery-image {
	padding:0.5%;
	width:24%;
	box-sizing:border-box;
	margin:auto;
}
 

#slideshow {
position:absolute;
width: 100%;
top: 0;
left: 0;
}

#slideshow IMG {
width: 100%;
position: absolute;
z-index:8;
opacity:0.0;
top: 0;
left: 0;

}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
width: 100%;
position: absolute;
top: 0;
left: 0;
}

#slideshow IMG.last-active {
z-index:9;
width: 100%;
position: absolute;
top: 0;
left: 0;
}

.menua {
	padding:6px;
	border-radius:10px;
	color:#fff !important;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:color .2s ease-out, background 0.7s ease-in;
  -ms-transition:color .2s ease-out, background 0.7s ease-in;
  -moz-transition:color .2s ease-out, background 0.7s ease-in;
  -webkit-transition:color .2s ease-out, background 0.7s ease-in;
  /* ...and now for the proper property */
  transition:color .2s ease-out, background 0.7s ease-in;
}
.menua:hover { color:#fff; background:rgba(255,0,0,0.5); }


.anim3 {
    animation: fadein 3s ;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */
}
.anim5 {
    animation: fadein 5s;
    -moz-animation: fadein 5s; /* Firefox */
    -webkit-animation: fadein 5s; /* Safari and Chrome */
    -o-animation: fadein 5s; /* Opera */
}
.anim7 {
    animation: fadein 7s;
    -moz-animation: fadein 7s; /* Firefox */
    -webkit-animation: fadein 7s; /* Safari and Chrome */
    -o-animation: fadein 7s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}


#element5 {
    animation: name 3s ;
    -moz-animation: name 3s; /* Firefox */
    -webkit-animation: name 3s; /* Safari and Chrome */
    -o-animation: name 3s; /* Opera */
}
#element2 {
    animation: name 2s ;
    -moz-animation: name 2s; /* Firefox */
    -webkit-animation: name 2s; /* Safari and Chrome */
    -o-animation: name 2s; /* Opera */
}
@keyframes name {
    0% { opacity:0; }
    33% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes name {
    0% { opacity:0; }
    33% { opacity:0; }
    100% { opacity:1; }
}