body,h1,h2,h3,p {
color:#6D6E71;
line-height:1;
font-weight:400;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin:0
}

h1 {
font-size:6vw
}

h2 {
color:#474747;
font-size:5vw;
padding:3vw;
text-align:center
}

h3,p {
font-size:4.5vw;
padding:0 3vw
}

a {
color:#000
}

body {
background-image: linear-gradient(to top, #e7e7e7 0%, #fff 70%);
}

#header,#footer {
background:#f1d68b;
padding:3vw 0;
text-align:center
}

#footer {
display:inline-block;
margin-top:2vw;
width:100vw
}

#main {
margin:2vw auto auto;
width:85vw
}

#content,#gallery {
width:85vw
}

.tile {
float:left;
-webkit-perspective:1000px;
-moz-perspective:1000px;
-ms-perspective:1000px;
-o-perspective:1000px;
perspective:1000px
}

.tile:hover .back,.tile.hover .back {
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg)
}

.tile:hover .front,.tile.hover .front {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg)
}

.flipper {
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative
}

.front,.back {
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transition:2s;
-moz-transition:2s;
-ms-transition:2s;
-o-transition:2s;
transition:2s;
position:absolute;
box-shadow: 0.5vw 0.5vw 0 #a7a9ac
}

.front,.back,.tile {
width:80vw;
height:80vw;
max-width:320px;
max-height:320px
}

.front {
z-index:2;
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg)
}

.logo {
width:60%;
margin:auto;
padding:0;
display:block
}

.back {
background:#fff;
z-index:1;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
-ms-transform:rotateY(-180deg);
-o-transform:rotateY(-180deg);
transform:rotateY(-180deg);
background-position:right bottom;
background-repeat:no-repeat;
background-size:60%
}

.back h2 {
color:#DEC25D
}

.back h3 {
font-size:14px
}

.first .front {
background:#bcbec0
}

.first .back {
border:#bcbec0 solid 2px
}

.second .front {
background:#e6e7e8
}

.second .back {
border:#e6e7e8 solid 2px
}

.third .front {
background:#faf0d8
}

.third .back {
border:#faf0d8 solid 2px
}

.fourth .front {
background:#f3e1aa
}

.fourth .back {
border:#f3e1aa solid 2px
}

.fifth .front {
background:#ecd071
}

.fifth .back {
border:#ecd071 solid 2px
}

.sixth .front {
background:#ccae4a
}

.sixth .back {
border:#ccae4a solid 2px
}

img {
width:79vw
}

img,.tile,p,#imprint-content h3 {
padding:2.5vw
}

p a {
text-decoration:none;
color:blue;
}

#imprint {
width:100vw;
height:100vh;
position:fixed;
top:0;
left:0;
background-color:rgba(0, 0, 0, 0.5);
display:none
}

#imprint-head {
width: 90vw;
max-width: 1240px;
height: 30px;
background-color: #cfcccc;
border-radius: 15px 15px 0px 0px;
border-right: solid 2px #727272;
border-top: solid 2px #727272;
border-left: solid 2px #727272;
margin: auto;
margin-top: 3vh
}

#imprint-body {
width: 90vw;
max-width: 1240px;
height: 90vh;
background-color: #fff;
border-radius: 0px 0px 15px 15px;
border-right: solid 2px #727272;
border-bottom: solid 2px #727272;
border-left: solid 2px #727272;
margin: auto
}

#imprint-content {
height:85vh;
overflow:auto;
padding:10px
}

#close {
float:right;
margin-right:1%;
font-size:1.4rem;
color:white;
}

#close, #footer span {
cursor:pointer
}

.row {
display:inline-block;
width:100%
}

@media only screen and (min-width: 400px) {
h1 {
font-size:20px
}

h2,h3,p {
font-size:16px
}
}

@media only screen and (min-width: 500px) {
h1 {
font-size:24px
}

.front,.back,.tile {
width:40vw;
height:40vw;
float:left
}

.tile,img,p,#imprint-content h3 {
padding:1vw
}

img {
width:82vw
}
}

@media only screen and (min-width: 750px) {
#content {
width:32vw
}

#gallery {
width:52vw
}

#content {
float:right
}

img {
width:30vw
}

.front,.back,.tile {
width:24vw;
height:24vw;
max-width:25vh;
max-height:25vh
}

h2 {
padding:1.5vw
}

h3 {
padding:0 1.5vw
}

#header,#footer {
padding:16px 0
}

#footer p {
padding:0
}

#footer {
bottom:0;
position:absolute;
left:0
}

html {
height:100%
}

.col {
float:left;
width:48%
}
}

@media only screen and (min-width: 1124px) {
#content {
width:26vw
}

#gallery {
width:58vw
}

.front,.back,.tile {
width:18vw;
height:18vw;
max-width:35vh;
max-height:35vh
}

img {
width:100%
}

.tile, img, p, #imprint-content h3 {
padding:0.5vw
}
}

@media only screen and (min-width: 1280px) {
#gallery {
width:750px;
}
.front,.back,.tile {
width:223px;
height:223px;
max-width:223px;
max-height:223px
}
#content{
width:333px
}
#main {
margin:auto;
width:1090px;
display:block
}
.logo{
width:140px
}
.tile, img, p, #imprint-content h3 {
padding:12px
}
h2{
padding:16px
}
}