* {margin:0; padding:0; border:0}

header, nav, section, article, aside, footer, hgroup {display:block}

@font-face {font-family:Kuehne; src:url(/fonts/Kuehne.ttf) format("truetype")}
/* @font-face {font-family:Kuehne; src:url(/fonts/KuehneBold.ttf) format("truetype"); font-weight:bold}
@font-face {font-family:KuehneBold; src:url(/fonts/KuehneBold.ttf) format("truetype")} */



#page {position:relative; width:1024px; margin:40px auto; min-height:600px}
h1 {margin:20px auto; text-align:center}
#startLeft {position: absolute; top:60px; left:0; width:499px}

#startRight {position: absolute; top:60px; right:0; width:499px}
#startLeft a, #startRight a {position:relative; display:table; width:499px; height:272px; margin:0; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; }
.card {width: 100%; height: 100%; -o-transition: all .5s; -ms-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden;  position: absolute; top: 0px; left: 0px; }
.front, .flat {z-index: 2 }
#startLeft .front {-webkit-transform: rotateY(120deg); -moz-transform: rotateY(120deg); -ms-transform: rotateY(120deg); -o-transform: rotateY(120deg); transform: rotateY(120deg) }
#startRight .front {-webkit-transform: rotateY(-120deg); -moz-transform: rotateY(-120deg); -ms-transform: rotateY(-120deg); -o-transform: rotateY(-120deg); transform: rotateY(-120deg) }
.flat {-webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }
.back { display:table-cell; vertical-align:middle;   color:#fff; font-size:24px; height:272px; font-weight:bold; text-align:center; line-height:60px; box-sizing: border-box; background: #3c3e3c; 	}
#startLeft .back {z-index: 1; -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg) }
#startRight .back {z-index: 1; -webkit-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); transform: rotateY(-180deg) }
#startLeft a:hover .flat {z-index: 1; -webkit-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); transform: rotateY(-180deg) }
#startRight a:hover .flat {z-index: 1; -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg) }
#startLeft a:hover .back, #startRight a:hover .back {z-index: 2; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg) }

.doris {background:rgb(236,0,140)}
.franz {background:rgb(80,80,80)}