/* ====================================================   GLOBAL DEFINITION   ==================================================== */



@font-face {
  font-family:'Alto Con Nor';

  src: url('../AltoCon-Normal.eot');
  src: local('AltoCon-Normal'), local('Alto Con Nor'),
    url('../AltoCon-Normal.woff') format('woff'),
    url("../AltoCon-Normal.otf") format("opentype"),
    url('../AltoCon-Normal.svg#AltoCon-Normal') format('svg');
  font-weight: 300;
  font-style: normal;
}


html, html* {
    padding:0;
	margin:0;
	box-sizing:border-box;
}


body {
    width: 100%;
    margin: 0 auto; 
	font: normal 1.2em 'Alto Con Nor';
    color: #1a171b; 
	text-align: center;
}


a {
    color:#a0740b; 
    font-weight: bold;
}

a:hover, a:focus {
    color: #1a171b;
}


p {
    line-height: 1.3em;
    margin: 20px 0;
}


h1 {
	font: 1.875em "Alto Con Nor";
	font-weight:bold;
    color:#a0740b;
	padding: 0 0 3px 0;
}

h2 { 
    font: 1.475em "Alto Con Nor";
    font-weight: normal;
    color: #a0740b; 
    padding: 0px 0px 0px 5px; 
}

h3 {
    font: normal 1.20em "Alto Con Nor";
    color: #a0740b; 
    margin: 10px 0;
}

h4 {
    font-size: 1.05em;
    color: #a0740b; 
	margin: 0px 0;
}

h5 {
    font-size:0.85em; 
   	font-weight:200;
	margin: 0px 0;
}

h6 {

    font: normal 1.00em "Alto Con Nor";

    color: #F00;

    margin: 10px 0;
}


.picture img	{
	width: 100%;
	height: auto;
}

.picture1 img	{
	max-width: 100%;
	height: auto;
}

img, a img {
    border: 0 none;
}


.galerie {
	display: flex;
	background: rgba(160, 116, 11, 0.2);
	border: 1px solid #a0740b;
	border-radius: 0 .5em .5em;
}

.galerie figure {
	
	padding: .1em;
	margin: .1em;
	flex-direction: row;
}

.galerie figure img{
	float: left;
	margin: .0em;
}


ul.bullets  {
    color: #474747;
}

ul.bullets li {
    width: 100%; 
    font-family: "Alto Con Nor";
	font-size: 0.95em;  
    line-height: 1.5em;
    color: #474747;
}

ul.bullets li span {
    color: #a0740b;
	margin-left: 12px;
	margin-right: 8px;
}

ul.bullets li a	{
    color: #474747;
	font-weight: normal;
	text-decoration: none;
}

ul.bullets li a:hover	{
    color: #a0740b;
}


dl {
    margin: 5px 0 35px 0;
    clear: left;
}

dt {	
    float: left;
    font-family: "Alto Con Nor";
	font-weight: bold;
    margin-right: 12px;
    padding: 5px; 
    width: 110px;
}

dd {
	margin: 3px 0;
    padding: 5px 0;
}


video {
	display:block;
	margin:0 auto;
}

.responsive-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.responsive-video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
	width: 100%;
	height: auto;
}

.container-video iframe {
	position: relative;
	max-width: 80%;
	height: auto;
	float: right;
	margin-left: 0.4em;
}

.container-video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
	width: 100%;
	height: auto;
}


#toplink {
		position: fixed;
		bottom: 0;
		margin: 0;
		padding: 0.5em 1em;
		right: 0;
}

/* ====================================================  BILDWECHSLER   ==================================================== */

#gallery {
	position: relative;
	margin: 0;
	/*background: rgba(160, 116, 11, 0.2);
	border: 1px solid #a0740b;
	border-radius: 0 .5em .5em;*/
}

#gallery figure {
	position: absolute;
	display: inline-block;
	top: 0;
	left: 0;
	z-index: 1;
	animation: wechseln 65s infinite;
	-webkit-animation: wechseln 65s infinite;
	}
#gallery:hover figure {
	animation-play-state: paused;
}

#gallery figure:last-of-type {
	position: relative;
}

@keyframes wechseln {
	0% {opacity: 0;} 
	6% {opacity: 0;}
	8% {opacity: 1;}
	14% {opacity: 1;}
	16% {opacity: 0;}
	100% {opacity: 0;}
}

#gallery figure:nth-of-type(1){
	animation-delay: 0s;
	opacity: 0;
}

#gallery figure:nth-of-type(2){
	animation-delay: 5s;
	opacity: 0;
}

#gallery figure:nth-of-type(3) {
	animation-delay: 10s;
	opacity: 0;
}
	
#gallery figure:nth-of-type(4){
	animation-delay: 15s;
	opacity: 0;
}

#gallery figure:nth-of-type(5) {
	animation-delay: 20s;
	opacity: 0;
}

#gallery figure:nth-of-type(6){
	animation-delay: 25s;
	opacity: 0;
}

#gallery figure:nth-of-type(7) {
	animation-delay: 30s;
	opacity: 0;
}

#gallery figure:nth-of-type(8){
	animation-delay: 35s;
	opacity: 0;
}

#gallery figure:nth-of-type(9) {
	animation-delay: 40s;
	opacity: 0;
}

#gallery figure:nth-of-type(10){
	animation-delay: 45s;
	opacity: 0;
}

#gallery figure:nth-of-type(11) {
	animation-delay: 50s;
	opacity: 0;
}

#gallery figure:nth-of-type(12){
	animation-delay: 55s;
	opacity: 0;
}

#gallery figure:nth-of-type(13) {
	animation-delay: 60s;
	opacity: 0;
}	



/*====================================================  HEADER   ==================================================== */

header	{
	width: 100%;
	height:auto;
	margin: 0px auto;
	background: #a0740b;
}

/* ====================================================   CONTENT   ==================================================== */



main	{
    position: relative;
	margin: 0 auto;
	width: 80%;
	text-align: left;  
	display: inline-block;
}


article {
    float: left;
	width: 100%;
    background: #FFFFFF; 
    padding: 0px;
	font-family: "Alto Con Nor";
}


.flex-container {
	display: flex;
}

.row {
	flex-direction: row;
}

.column {
	flex-direction: column;
	position: fixed;
	bottom: 2.2em;
}

.flex-item {
	border: 1px solid #a0740b;
	border-radius: 0 .5em .5em;
	margin: .3em;
	padding: .3em;
	background: rgba(160, 116, 11, 0.2);
	flex: auto;
}

.flex-item1 {
	border: 1px solid #a0740b;
	border-radius: 0 .5em .5em;
	margin: .3em;
	padding: .3em;
	background: #EEEEEE;
	flex: auto;
}

.flex-item2 {
	border: 1px solid #a0740b;
	border-radius: 0 .5em .5em;
	margin: .3em;
	padding: .3em;
	background: rgba(160, 116, 11, 0.2);
	flex: auto;
	width: 30%;
	font-size: 0.95em;
}

.flex-item3 {
	margin: .3em;
	padding: .3em;
	background: #FFF;
	flex: auto;
}

.flex-item4 {
	margin: .3em 0;
	flex: auto;
}

.flex-item4 iframe {
	float: right;
	margin-left: 0.4em;
	max-width: 60%;
	height: auto;
}

p.flex-item {
	text-align: left;
	
}

p.flex-item1 {
	text-align: center;
}


section {
    float: left;
    width: 70%;
	text-align: left;
}


aside {
    float: right;
	width: 30%;
}

aside ul {
    list-style-type: none;
	font: 100 0.95em "Alto Con Nor";
}

aside li img {
	float: left; 
	margin: .3em; 
}

aside li p {
	margin: .2em;
	font: 100 0.95em "Alto Con Nor";
}

aside li {
	margin: .3em;
	padding: .3em; 
	overflow: auto;
	border: solid 1px #a0740b;
	border-radius: 0 .5em .5em;
}

aside li h3 {
	font: bold 1.35em;
	margin: 0px 0;
}

aside li h3 a {
	color: #a0740b;
}

aside li p a {
	text-decoration: none;
	color: #1a171b;
	font: 100 0.95em "Alto Con Nor";	
}

aside li:hover {
	background: rgba(160, 116, 11, 0.2);
}

aside p:last child {
	margin-bottom: 100px;
}

/* ====================================================  NAV   ==================================================== */


nav	{
	float: left;
	width: 100%;
	font:1.10em "Alto Con Nor";
	list-style-type: none;
	position: relative;
	background: #a0740b;
	text-align: center;
	text-transform: uppercase;
}

nav ul { 
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	width: 80%;
}

nav ul li a 	{
    float: left;
	width: auto;
	display:inline-block;
    padding: 5px 35px 5px 0px;
	color: #FFFFFF;
	text-decoration:none;
}

nav li a:hover, nav li a:focus {
    background: #FFFFFF;
	color: #1a171b;
	padding: 5px 25px 10px 10px;
}


/* ====================================================   FOOTER   ==================================================== */


footer {
	float: left;
	width: 100%;
	background: #a0740b;
	font: 1.05em "Alto Con Nor";
	position: relative;
	text-transform: uppercase;
	text-align: left;
}

footer ul {
	margin: 0 auto;
	padding: 0;
	width: 80%;
	list-style-type: none;
}

footer ul li a	 {
    float: left;
	padding: 15px 35px 5px 0px;
	color: #FFFFFF;
	text-decoration:none;
	list-style-type: none;
}

footer li a:hover, footer li a:focus {
    background: #FFFFFF;
	color: #1a171b;
	padding: 15px 25px 5px 10px;

}


adress {
	float: left;
	width: 100%;
	font: 0.75em "Alto Con Nor";
	background: #EEEEEE;
	color: #666;
	margin-top: 0px;
	padding: 10px 0 10px 0;
	text-transform: none;
}

/* 2-Spaltenlayout mit breiterem aside */

@media screen and (max-width: 950px) {
	
	nav ul { 
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	width: 92%;
	}
	
	.column {
		flex-direction: row;
		position: fixed;
		bottom: 0;
		padding: 0.2em 0.2em;
		margin: 0;
		left: 0;
	}
	
	section {width:62%;}
	
	main {width: 92%;}
	
	aside {width:38%;}
	

}



/* 1-Spaltenlayout mit Navigation unten*/

@media only screen and (max-width: 620px) {

	nav ul { 
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	width: 96%;
	}

 	main {width: 96%;}
	
	section, aside {
        float: none;
        width: 100%;
	}
	
	.flex-container {
		display: flex;
		width: 92%;
	}
	
	.row {
		flex-direction: column;
	}
	
	.column {
		flex-direction: row;
		position: fixed;
		bottom: 0;
		padding: 0.2em 0.2em;
		margin: 0;
		left: 0;
	}
	
	.flex-item2 {
		width: 100%;
	}
	
	.galerie {
		width: 100%;
		margin: 0.2em auto;
	}

	#toplink {
		position: fixed;
		bottom: 0;
		margin: 0;
		padding: 0.2em 0.2em;
		right: 0;
	}	

}