/* roboto */
/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/Roboto-Thin.woff');
  src: local('Roboto Thin'), local('Roboto-Thin'),
       url('fonts/Roboto-Thin.woff') format('woff'), 
       url('fonts/Roboto-Thin.ttf') format('truetype'), 
}


@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/roboto-v18-latin-100.eot');
  src: local('Roboto Light'), local('Roboto-Light'),
       url('fonts/roboto-v18-latin-100.eot?#iefix') format('embedded-opentype'), 
       url('fonts/roboto-v18-latin-100.woff2') format('woff2'), 
       url('fonts/roboto-v18-latin-100.woff') format('woff'), 
       url('fonts/roboto-v18-latin-100.ttf') format('truetype'), 
       url('fonts/roboto-v18-latin-100.svg#Roboto') format('svg'); 
}


/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/roboto-v18-latin-300italic.eot');
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
       url('fonts/roboto-v18-latin-300italic.eot?#iefix') format('embedded-opentype'), 
       url('fonts/roboto-v18-latin-300italic.woff2') format('woff2'), 
       url('fonts/roboto-v18-latin-300italic.woff') format('woff'), 
       url('fonts/roboto-v18-latin-300italic.ttf') format('truetype'), 
       url('fonts/roboto-v18-latin-300italic.svg#Roboto') format('svg'); 
}

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-v18-latin-300.eot');
  src: local('Roboto Light'), local('Roboto-Light'),
       url('fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), 
       url('fonts/roboto-v18-latin-300.woff2') format('woff2'), 
       url('fonts/roboto-v18-latin-300.woff') format('woff'), 
       url('fonts/roboto-v18-latin-300.ttf') format('truetype'), 
       url('fonts/roboto-v18-latin-300.svg#Roboto') format('svg'); 
}

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

/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/roboto-v18-latin-italic.eot');
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url('fonts/roboto-v18-latin-italic.eot?#iefix') format('embedded-opentype'), 
       url('fonts/roboto-v18-latin-italic.woff2') format('woff2'), 
       url('fonts/roboto-v18-latin-italic.woff') format('woff'), 
       url('fonts/roboto-v18-latin-italic.ttf') format('truetype'), 
       url('fonts/roboto-v18-latin-italic.svg#Roboto') format('svg'); 
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v18-latin-700.eot');
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'), 
       url('fonts/roboto-v18-latin-700.woff2') format('woff2'), 
       url('fonts/roboto-v18-latin-700.woff') format('woff'), 
       url('fonts/roboto-v18-latin-700.ttf') format('truetype'), 
       url('fonts/roboto-v18-latin-700.svg#Roboto') format('svg'); 
}



html{margin: 0px; padding: 0px; }
body{margin: 0px; padding: 0px; 
font-family: 'Roboto', Segoe, Helvetica, Arial, Verdana, Sans, Lucida;
font-weight: 100;
font-size: 1.1vw;
line-height: 1.5em; 
background-color: #9A000E; 
}

#loggo h3{
font-size: 3.5vw;
font-weight: 100; 
margin: 0px; 
padding: 0px 0px 20px 0px; 
}
.logotext{
padding: 0px 0px 100px 0px; 
margin: 0px 0px 100px 0px; 
}

.small{
font-size: 0.8em; 
}
.smallkursiv{
font-size: 1.0em; 
font-style: italic; 
color: #9A000E; 

}

a.popup img{
max-width: 250px; 
height: auto; 
border-radius: 500px; 
float: right; 
margin: 0px 0px 0px 30px; 
border: 1px solid #999999; 
}
#nachoben{
position: fixed; 
bottom: 80px; 
right: 10%; 
background-color: #FFFFFF; 
border: 5px solid #9A000E; 
padding: 25px 20px 25px 20px; 
border-radius: 80px; 
z-index: 30; 
}
#nachoben a{
text-decoration: none; 
color: #9A000E; 
font-weight: 500; 
}

#ganzeseite{
margin: 50px 15% 30px 15%;
padding: 20px; 
border: 1px solid #CCCCCC;
width: 70%; 
background-color: #FFFFFF; 
position: relative;
transition: all 1.0s ease-in-out;
z-index: 10; 
}

.startimage{
width: 30%; 
height: auto; 
padding: 3px; 
margin: 0px; 
float: right; 
border: 1px solid #CCCCCC; 
}

#logo a{
text-decoration: none; 
color: #000000; 
}

#logo {
border: 0px solid #FF0000;
width: calc(30% - 100px);
height: 150px;
padding: 0px;
margin: 50px 3% 50px 3%;
float: left;
}

.imageright{
float: right; 
padding: 3px; 
margin: 0px 0px 0px 30px; 
border: 1px solid #CCCCCC; 
}
#texte a{
padding: 0px; 
margin: 0px; 
text-decoration: none; 
color: #000000; 
font-weight: 300; 
}
hr{
padding: 0px; 
margin: 0px; 
border-top: 1px solid #CCCCCC; 
border-left: 0px solid #CCCCCC; 
border-right: 0px solid #CCCCCC; 
border-bottom: 0px solid #CCCCCC; 
}

h2{
font-weight: 300;
font-size: 1.5vw;
}

#texte{
padding: 0px 0px 50px 0px;
margin: 0px 3% 50px 3%;
display: inline-block; 
border: 0px solid #FF0000;
width: 94%; 
}



/*HIER kommen die BILDER*/
img{}
img.bildimtext{
width: 30%; 
float: right; 
padding: 10px; 
margin: 10px 0px 0px 10px; 
border: 1px solid #999999;
transition: all 1s ease-out;
opacity: 1.0; 
}
img.bildimtext:hover{
opacity: 0.5; 
margin: 0px 0px 0px 0px;
}
/*HIER SIND die BILDER VORBEI*/




#nav{
border-top: 0px solid #999999; 
border-right: 0px solid #999999; 
border-bottom: 0px solid #999999; 
border-left: 0px solid #999999; 
 background: rgb(218,218,218);
background: linear-gradient(180deg, rgba(218,218,218,1) 35%, rgba(255,255,255,1) 100%); 
transition: all 1.0s ease-in-out;
width: 100%; 
padding: 50px 0px 50px 0px; 
margin: 0px 0px 50px 0px; 
text-align: center; 
/*background-color: #F1F1F1; */
}

#nav a{
text-decoration: none; 
font-weight: 300; 
color: #000000; 
padding: 10px 20px 10px 20px; 
margin: 0px 10px 0px 10px; 
border: 1px solid #999999; 
border-radius: 30px; 
background-color: #FFFFFF; 

}

#footer {
padding: 10px 10px 10px 77px;
margin: 50px 0px 0px 0px;
background: #D8D8D8; 
position: absolute; 
left: 0px; 
bottom: 0px;
width: calc(100% - 87px);
height: 50px;
line-height: 50px;
color: #999999; 
}

a.footerlink{
margin: 0px; 
padding: 0px 20px 0px 20px; 
text-decoration: none; 
color: #999999; 
transition: all 1.0s ease-in-out;
}
a.footerlink:hover, a.footerlink:focus{
color: #000000; 
}

ul{}
ul.pfeil{
list-style-image: url('images/pfeil.jpg');
}

#nav ul {
list-style-type: none;
}



@media screen and (min-width: 300px) and (max-width: 768px) {
body{font-size: 1.0em; }
#nav{padding: 30px 0px 80px 0px; }
h2{font-size: 1.0em; }
#nav a{
padding: 10px 20px 10px 20px; 
margin: 0px 24% 5px 15%; 
width: 60%; 
display: block; 
float: left; 
}
a.popup img{
margin-left: 20%; 
margin-top: 30px; 
margin-bottom: 30px; 
padding: 0px; 
clear: both; 
float: none; 
border: 1px solid #FF0000 
display: inline-block;
}
a.popup{display: inline-block; width: 100%; }

}


@media screen and (min-width: 769px) and (max-width: 1200px) {

body{font-size: 1.0em; }
h2{font-size: 1.0em; }
#nav{font-size: 0.8em; }
#nav a{width: 60%; display: block; 
float: left; padding: 10px 20px 10px 20px; 
margin: 0px 24% 10px 15%; }
}


@media screen and (min-width: 1201px) {
}