/* tangerine-regular - latin */
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/tangerine-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Tangerine Regular'), local('Tangerine-Regular'),
       url('../fonts/tangerine-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/tangerine-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/tangerine-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/tangerine-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/tangerine-v9-latin-regular.svg#Tangerine') format('svg'); /* Legacy iOS */
}

/* tangerine-700 - latin */
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/tangerine-v9-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Tangerine Bold'), local('Tangerine-Bold'),
       url('../fonts/tangerine-v9-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/tangerine-v9-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/tangerine-v9-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/tangerine-v9-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/tangerine-v9-latin-700.svg#Tangerine') format('svg'); /* Legacy iOS */
}


/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v18-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v18-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('../fonts/roboto-v18-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('../fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

* { margin:0; padding:0; box-sizing: border-box;}
html, body {width: 100%;}
body { font:12px Lucida Grande, Arial, Helvetica, sans-serif; background:url(../images/bg.jpg) repeat-x fixed}
img { border:0;}
h1 { color:#c30; margin-bottom:20px; font:33px 'Tangerine', Lucida Grande, Arial, Helvetica, sans-serif; font-weight:700}
h2 { margin-bottom:20px; font:28px 'Tangerine', Lucida Grande, Arial, Helvetica, sans-serif; font-weight:700}
hr {margin:30px 0 30px 0;color:#999;}
.clear { clear:both}
.wrapper { width:830px; margin:58px auto 0; background:url(../images/shadow.png) repeat-y}
.page { position:relative; background:#fff; width:800px; margin:auto}
.header { height:167px; padding-top:25px}
.header .eyecatcher { width:800px; height:154px; border:solid #ebad99; border-width:1px 0; padding:6px 0; background:url(../images/eyecatcher.jpg) 0 3px no-repeat}
.header .flower { width:87px; height:403px; background:url(../images/flower.png); position:absolute; left:175px; top:-58px}
.header a.logo { position:absolute; left:238px; top:-40px}
.main { padding:130px 0 140px; font-size:15px; line-height:20px; min-height:330px; background:url(../images/bgmain.jpg) left bottom no-repeat}
.main p , .main ul { margin-bottom:20px}
.main ul { margin-left:10px;}
.navigation , .content { float:left}
.navigation { width:285px; padding-top:7px}
.navigation ul { list-style:none; font-size:14px; text-align:center; width:240px;}
.navigation ul li { margin-bottom:30px}
.navigation ul li ul {height: auto; margin: 0; padding: 0;}
.navigation ul li ul li {height: 0; overflow: hidden; margin: 1px 0 0 0; padding: 0; transition: height .5s ease 1s, line-height.5s ease 1s; background: #ddd; border-radius: 20px;}
.navigation ul li:hover ul li {height: 30px; line-height: 30px; overflow: visible; transition: height .2s ease, line-height .2s ease }
.navigation ul a { color:#000; text-decoration:none; text-transform:uppercase; letter-spacing:1px;}
.navigation ul a:hover , .navigation ul a.current { color:#c30}
.content { width:450px}
.content a , .footer a { color:#c30}
.footer { width:830px; margin:auto auto 30px; text-align:center; height:15px; padding-top:10px; background:url(../images/footer.jpg)}
.footer span { padding:0 8px}
.galerie img{border:1px solid #c30;}
.abstand { display:block; width:100px; font-size:14px;margin-left:15px;}
fieldset { border:0}
label { display:block; float:left; width:140px; padding:4px 0 0 0}
input , textarea { color:#799fe2; float:left; padding:3px; font:12px Arial, Helvetica, sans-serif; display:block; width:200px; margin:0 0 5px 0; border:1px solid #ccc}
textarea { height:100px; width:200px; resize:none}
input.senden { width:85px; background:#c30; color:#fff; padding:3px 0 2px 0; border:none}

#mobil, img.res {display: none}

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

.wrapper, .footer, .page, .header, .eyecatcher {width: 100% !important}
    .navigation {width: 33%;}
    .navigation ul {text-align: left; padding-left: 15px;}
    
    .header a.logo {left: 50%; margin-left: -162px}
    .flower {display: none}
}

@media screen and (max-width: 600px) {
#mobil, .wrapper, .page, .eyecatcher, .main, .navigation, .content, .footer, .textarea {width: 100%; height: auto; float: none; display: block;}
    .header { display: none;}
    .content {width: 100%; padding: 2rem 15px; min-height: auto !important; margin-bottom: 20px;}
    img.res {display: block; width: 100%; height: auto;}
    .main {padding: 0;}
    .navigation ul {width: 100%;height: auto; padding: 0; margin: auto; margin-bottom: 20px;}
    .navigation ul li {background: #fff;  height: auto; line-height: 38px; font-size: 18px; padding: 0 0 0 20px; border-top: 1px solid #ddd; margin: 10px 0;}
    .navigation ul li ul li {border: 0}
    .navigation ul li:first-child {border: none}
    .navigation ul li:hover {background: #eee; border-top: 1px solid #aaa;border-bottom: 1px solid #aaa;}
    div.galerie {width: 100%;}
    .footer {background-repeat: repeat-x; font-size: 1rem;}
    .footer span {display: block; width: 100%; text-align: center; color: #fff; font-size: 0.3em;}
   
.btn {
    background: #efa289;
    border: 0px solid #18ab29;
    border-radius: 28px;
    color:#000;
    cursor: pointer;
    display: inline-block;
    font-size: 17px;
    padding: 16px 0%;
    padding-left: 5%;
    text-align: center;
    text-decoration: none;
    width: 80%;
    margin: 20px 0 .8em 5%;
}
    .btn:hover {background-color: #ccc;}
}