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

html, body{
padding:0;
margin:0;
height:100%;
}

body {
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
color:rgb(20,20,93);
background:rgb(255,253,238);
font-family:'Source Sans Pro', Helvetica, Arial, sans-serif;
font-weight:400;
line-height:1.4;
font-size:16px;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-moz-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-webkit-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-ms-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-o-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

a, img{
color:rgb(20,20,93);
outline:none;
border:none;
}

img{
vertical-align: middle;
}

.dark a{
color:rgb(20,20,93);
}

h3 a{
text-decoration:underline;
}

::-moz-selection{
background:rgb(255,53,0);
color:rgb(255,255,255);
}

::selection{
background:rgb(255,53,0);
color:rgb(255,255,255);
}

h1, h2{
font-weight:400;
}

h1{
font-size:1.8em;
color:rgb(255,53,0);
}

h2{
font-size:1.5em;
}

.light, .footer{
background:rgb(255,253,238);
}

.section{
width:100%;
padding:7em 0;
}

#section0, #section2, #section4, #section6{
background:rgb(255,255,255);
}

#section0, #footer{
text-align:center;
}

.holder{
overflow:auto;
padding-bottom:0;
}

.width1{
width:44em;
margin:0 auto;
}

.header{
padding:0;
min-height:70%;
text-align:center;
background:url(images/hg-header-1300.jpg) center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}

.header h1{
padding-top:1em;
line-height:1.3;
max-width:70%;
margin:0 auto;
}

.header img{
max-width:35%;
margin:0 auto;
padding-top:1em;
padding-left:1em;
float:left;
}

.down{
display:inline-block;
font-size:2em;
font-weight:100;
text-decoration:none;
padding-bottom:2em;
}

.footer{
padding:1em 0 20em 0;
text-align:center;
}

.footer .impressum{
font-size:0.7em;
}

.footer strong{
display:block;
}

#impressum{
float:right;
text-decoration:none;
}

.no-js #overover{
display:none;
}

.js #overover{
position:fixed;
width:100%;
heighT:100%;
top:0;
left:0;
display:block;
background:rgba(255,253,238,0.95);
z-index:9999999;
}

.spinner {
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 2px 1px 0px white;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
-moz-animation: spin 0.7s linear infinite;
-webkit-animation: spin 0.7s linear infinite;
animation: spin 0.7s linear infinite;
}

@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

.claim{
text-transform:uppercase;
letter-spacing:0.1em;
font-weighT:500;
padding:0 0.5em;
}

h1 .claim{
padding:0;
letter-spacing:0;
}

.tuerkis, .tuerkis a{
color:rgb(0,160,163);
}

.blau{
color:rgb(0,51,112);
}

.orange{
color:rgb(255,53,0);
}

.bebilderung{
float:right;
width:20%;
height:auto;
}

.sonne{
position:relative;
float:none;
margin:5em 40% 0 40%;
vertical-align:center;
}


/* MENUE */

#up, #back{
display:none;
position:fixed;
background:rgb(0,160,163);
background:rgba(0,160,163,0.7);
color:#fff;
text-decoration:none;
right:1em;
bottom:1em;
width:2em;
heighT:2em;
box-sizing:border-box;
border-radius:0.2em;
text-align:center;
font-weight:500;
line-height:2;
}

#back{
top:1em;
display:block;
}

.social-menu, .menu{
width:100%;
overflow:auto;
z-index:1000;
padding:0;
position:absolute;
}

.menu{
background:rgb(0,160,163);
background:rgba(0,160,163,0.7);
}

.menu.fixed{
position:fixed;
}

.social-menu ul, .social-menu li, .menu ul, .menu li{
display:inline;
list-style-type:none;
margin:0;
padding:0;
}

.social-menu ul{
float:right;
text-align:right;
}

.social-menu a{
display:inline-block;
width:30px;
height:30px;
margin:1em 1em 0 0;
overflow:hidden;
text-align:right;
text-indent:999em;
background-image:url(images/hg-social.png);
      background-image: -webkit-image-set(
        url(images/hg-social.png) 1x,
        url(images/hg-socialx2.png) 2x
      );
      background-image: image-set(
        url(images/hg-social.png) 1x,
        url(images/hg-socialx2.png) 2x
      );
background-repeat:no-repeat;
}

#fb{
background-position:0 0;
}

.menu a{
display:inline-block;
width:20%;
padding:0.8em 0 1em 0;
margin:0;
float:left;
text-align:center;
text-decoration:none;
box-sizing:border-box;
color:#fff;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
border-top:5px solid rgba(0,160,163,0.001);
white-space: nowrap;
}

/*.menu ul li:first-of-type a{
text-indent:-999px;
background-image:url(images/logo-vidana-small.png);
      background-image: -webkit-image-set(
        url(images/logo-vidana-small.png) 1x,
        url(images/logo-vidana-smallx2.png) 2x
      );
      background-image: image-set(
        url(images/logo-vidana-small.png) 1x,
        url(images/logo-vidana-smallx2.png) 2x
      );
background-repeat:no-repeat;
background-position:center center;
}*/

.menu.fixed a{
padding:0.5em 0 0,6em 0;
}

.menu a:hover{
background-color:rgb(0,160,163);
}


.menu li:last-of-type a{
border-right: none;
}

.menu #active{
background-color:rgb(0,160,163);
border-top:5px solid rgb(255,53,0);
}


/* GALLERY */

.imageholder {
overflow:auto;
margin:1em 0;
}

.gallery{
float:left;
display:inline-block;
width:33.333%;
padding:0;
margin:0;
background:#eee;
position:relative;
text-decoration:none;
border:0.2em solid rgb(255,253,238);
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.gallery:hover::after{
content:'';
background:rgba(120,120,120,0.1);
position:absolute;
display:inline-block;
width:100%;
height:100%;
text-align:center;
top:0;
left:0;
}

.gallery img{
width:100%;
height:auto;
float:left;
}

img.width3{
width:33.333%;
height:auto;
float:left;
border:0.2em solid rgb(255,253,238);
-moz-box-sizing:border-box;
box-sizing:border-box;
}

/* MAPS */

#map-canvas{
width:100%;
height:50em;
position:relative;
margin-top:5em;
}

#mapcontent{
font-family:'Source Sans Pro', Helvetica, Arial, sans-serif;
font-weight:300;
text-align:left;
padding-left:1.2em;
max-width:16em;
color:#000;
}

#map-canvas img {
max-width: none;
}

#map-canvas label { 
width: auto;
display:inline; 
} 


/* PREISLISTE */

.preisliste{
width:100%;
border:0;
padding:0;
text-align:left;
margin-top:5%;
border-collapse:collapse; 
}

.preisliste td {
padding: 8px 0;
margin:0;
height:8px;
vertical-align:bottom;
line-heighT:100%;
}

.preisliste tr {
padding:0;
margin:0;
border:0;
border-top:1px solid rgba(20,20,93,0.2);
}

.preis{
text-align:right;
width:5em;
}

.preisliste strong{
font-weight:600;
}

.small{
font-size:0.6em;
}



/* FORMULAR */

.ok, .not_ok, textarea, .submit{
-webkit-appearance:none;
}

.ok, .not_ok, textarea{
font-size:0.8em;
color:rgb(0,0,90);
font-family:'Source Sans Pro', Helvetica, Arial, sans-serif;
font-size:1em;
border:0.1em solid rgb(255,253,238);
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.ok, .not_ok{ 
height:3em;
margin-bottom:1em;
width:100%;
padding:0 2%;
background:rgb(255,253,238);
}

.links, .rechts{ 
padding-bottom:0.5em;
width:49%;
display:inline-block;
float:left;
text-align:left;
}

.links{ 
margin-right:1%;
}

.rechts{ 
margin-left:1%;
}

.not_ok{
border:none;
border:0.1em solid rgb(255,53,0);
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.warning{
color:rgb(255,53,0);
}

textarea{
width:100%;
padding:2%;
background:rgb(255,253,238);
}

.submit{
display:inline-block;
padding:0.8em 1.5em;
margin:1em auto 0 auto;
border:0.1em solid rgb(255,53,0);
text-decoration:none;
color:rgb(255,53,0);
background:none;
font-weight:300;
font-size:1em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

.submit:hover, .submit:focus{
color:rgb(255,255,255);
background:rgb(255,53,0);
border:0.1em solid rgb(255,53,0);
}

@media screen and (max-width: 54em) {
.width1{
width:80%;
}
}

@media screen and (max-width: 38em) {

body{
font-size:0.9em;
}

.bebilderung{
width:30%;
}

.bebilderung.sonne{
width:30%;
margin:1em 20% 0 20%;
}

.header h1{
padding:1em 10% 0 10%;
font-size:1.5em;
}

.gallery, img.width3{
width:50%;
}

.links, .rechts{ 
padding-bottom:0.5em;
width:100%;
display:inline-block;
float:left;
text-align:left;
margin:0;
}

.subMenu a{
padding:1.5em 0;
}
}


@media screen and (max-width: 28em) {

.menu a{
width:33.3%;
padding:0.5em 0;
}

body{
line-height:1.3;
}

.gallery, img.width3{
width:100%;
}

.bebilderung{
float:none;
width:80%;
padding:0 10%;
height:auto;
}

h1{
font-size:1.4em;
}

h2{
font-size:1.2em;
}

}