@font-face {
      font-family: 'Copperplate Gothic';
      src: url('CopperplateGothicStd-29BC.woff2') format('woff2');
    }

a:link { color: #1c421d; text-decoration: none; }
a:active { color: #1c421d; text-decoration: none; }
a:visited { color:#1c421d; text-decoration: none; }
a:hover {color: #ffffff ; text-decoration: none; }

.ds5 /*agl rulekind: base;*/ {
	font-size: 1.2em;
	font-family: Copperplate Gothic;
}

.ds5verdana /*agl rulekind: base;*/ {
	font-size: +3;
	font-family: verdana;
}
.ds5b /*agl rulekind: base;*/ {
	font-size: +10;
	font-family: verdana;

}



.Counter  {
	font-size: 1.2em;
	font-family: verdana;
	color: white;
}

.tools22 td {
	color: black;
	font-size: 1.2em;
    box-shadow: 0.6em 0.6em 0.6em 0 hsl(0, 0%, 50%);
	padding: 0.5em 0.0em 0.5em 0.0em;

	width: 15em;
	margin-left: -2em;
	position: relative;
    border-radius: 10px; 
    border: 0px solid #1c421d; 
    border-collapse: collapse; 	

}

.tools2 td {
	font-family: Copperplate Gothic;
	color: black;
	background: #1c421d;
	font-size: 2.0em;
    box-shadow: 0.2em 0.2em 0.6em 0 hsl(0, 0%, 50%);
	padding: 0.2em 0.0em 0.2em 0.0em;

	width: 15em;
	margin-left: -2em;
	position: relative;
    border-radius: 10px; 
    border: 0px solid #1c421d; 
    border-collapse: collapse; 	
text-shadow:  1px  1px 10px white,
                  1px -1px 10px white,
                 -1px  1px 10px white,
                 -1px -1px 10px white;
}

.tools5 td {
	color: white;
	background: #1c421d;
	font-size: 1em;
    box-shadow: 0.3em 0.3em 0.3em 0 hsl(0, 0%, 50%);
	padding: 0.5em 0.0em 0.5em 0.0em;

	width: 15em;
	margin-left: -2em;
	position: relative;
    border-radius: 10px; 
    border: 0px solid #1c421d; 
    border-collapse: collapse; 	

}

.tools5blue td {
	color: white;
	background: #000080;
	font-size: 1em;
    box-shadow: 0.3em 0.3em 0.3em 0 hsl(0, 0%, 50%);
	padding: 0.5em 0.0em 0.5em 0.0em;

	width: 15em;
	margin-left: -2em;
	position: relative;
    border-radius: 10px; 
    border: 0px solid #1c421d; 
    border-collapse: collapse; 	

}

.tools55 td {
	color: white;
	background: #1c421d;
	font-size: 1em;
    box-shadow: 0.3em 0.3em 0.3em 0 hsl(0, 0%, 50%);
	padding: 0.5em 0.0em 0.5em 0.0em;

	width: 20em;
	margin-left: -2em;
	position: relative;
    border-radius: 10px; 
    border: 0px solid #1c421d; 
    border-collapse: collapse; 	

}

.tools6 td {
	color: white;
	background: #1c421d;
	font-size: 1em;
    box-shadow: 0.3em 0.3em 0.3em 0 hsl(0, 0%, 50%);
	padding: 0.5em 0.0em 0.5em 0.0em;

	width: 10em;
	margin-left: -2em;
	position: relative;
    border-radius: 10px; 
    border: 0px solid #1c421d; 
    border-collapse: collapse; 	

}

.tools3 td {
	background-image: linear-gradient(#000000, #e3e3e3);
	border-left: 2px solid #1c421d;
	border-right: 2px solid #1c421d;
	border-collapse: collapse;
	border: 1px solid #1c421d;
	padding: 0.3em 0.3em;
}

table.tools3 tr:last-child td:first-child {
    border-bottom-left-radius:10px;
}

table.tools3 tr:last-child td:last-child {
    border-bottom-right-radius:10px;
}

table.tools3 tr th:first-child,
table.tools3 tr td:first-child {
   border-left: 2px solid #1c421d;
}

table.tools3 tr:first-child th,
table.tools3 tr:first-child td {
   border-top: 2px solid #1c421d;
}

table.tools3 tr:first-child th:first-child,
table.tools3 tr:first-child td:first-child {
    border-top-left-radius:10px;
}

table.tools3 tr:first-child th:last-child,
table.tools3 tr:first-child td:last-child {
    border-top-right-radius:10px;
}




.tools td {
	background-image: linear-gradient(#f9f9f9, #e3e3e3);
	border-left: 2px solid #1c421d;
	border-right: 2px solid #1c421d;
	border-collapse: collapse;
	border: 1px solid #1c421d;
	padding: 0.3em 0.3em;
}

.tools caption {
	color: white;
	background: #1c421d;
	font-size: 1.2em;
    box-shadow: 0.4em 0.4em 0.4em 0 hsl(0, 0%, 50%);
	padding: 0.2em 0.2em 0.2em 2em;
	width: 28em;
	margin-left: 0em;
	position: center;
	border-radius: 10px; 
    border: 0px solid #1c421d; 
    border-collapse: collapse; 
}

table.tools tr:last-child td:first-child {
    border-bottom-left-radius:10px;
}

table.tools tr:last-child td:last-child {
    border-bottom-right-radius:10px;
}

table.tools tr th:first-child,
table.tools tr td:first-child {
   border-left: 2px solid #1c421d;
}

table.tools tr:first-child th,
table.tools tr:first-child td {
   border-top: 2px solid #1c421d;
}

table.tools tr:first-child th:first-child,
table.tools tr:first-child td:first-child {
    border-top-left-radius:10px;
}

table.tools tr:first-child th:last-child,
table.tools tr:first-child td:last-child {
    border-top-right-radius:10px;
}




.grau td {
	background-image: linear-gradient(#f9f9f9, #e3e3e3);
	border-left: 1px solid #1c421d;
	border-right: 1px solid #1c421d;
	border-collapse: collapse;
	border: 1px solid #1c421d;
	padding: 0.3em 0.3em;
}

table.grau tr:last-child td:first-child {
    border-bottom-left-radius:10px;
}

table.grau tr:last-child td:last-child {
    border-bottom-right-radius:10px;
}

table.grau tr th:first-child,
table.grau tr td:first-child {
   border-left: 1px solid #1c421d;
}

table.grau tr:first-child th,
table.grau tr:first-child td {
   border-top: 1px solid #1c421d;
}

table.grau tr:first-child th:first-child,
table.grau tr:first-child td:first-child {
    border-top-left-radius:10px;
}

table.grau tr:first-child th:last-child,
table.grau tr:first-child td:last-child {
    border-top-right-radius:10px;
}



.grau caption {
	color: white;
	background: #1c421d;
	font-size: 1.2em;
    box-shadow: 0.4em 0.4em 0.4em 0 hsl(0, 0%, 50%);
	padding: 0.2em 0.2em 0.2em 2em;
	width: 28em;
	margin-left: -2em;
	position: relative;
	border-radius: 10px; 
    border: 0px solid #1c421d; 
    border-collapse: collapse; 	
}

.grau2 {
	color: white;
	background: #1c421d;
	font-size: 1.2em;
    box-shadow: 0.4em 0.4em 0.4em 0 hsl(0, 0%, 50%);
	padding: 0.2em 0.2em 0.2em 2em;
	width: 35em;
	margin-left: -2em;
	position: relative;
    border-radius: 10px; 
  /*  border-radius: 100px 20px; */

    border: 0px solid #1c421d; 
    border-collapse: collapse; 	
}



.graustartseite td {
	background-image: linear-gradient(#f9f9f9, #e3e3e3);
	border-left: 1px solid #1c421d;
	border-right: 1px solid #1c421d;
	border-collapse: collapse;
	border: 1px solid #1c421d;
	padding: 0.3em 0.3em;
}

table.graustartseite tr:last-child td:first-child {
    border-bottom-left-radius:10px;
}

table.graustartseite tr:last-child td:last-child {
    border-bottom-right-radius:10px;
}

table.graustartseite tr th:first-child,
table.graustartseite tr td:first-child {
   border-left: 1px solid #1c421d;
}

table.graustartseite tr:first-child th,
table.graustartseite tr:first-child td {
   border-top: 1px solid #1c421d;
}

table.graustartseite tr:first-child th:first-child,
table.graustartseite tr:first-child td:first-child {
    border-top-left-radius:10px;
}

table.graustartseite tr:first-child th:last-child,
table.graustartseite tr:first-child td:last-child {
    border-top-right-radius:10px;
}


.graustartseite caption {
	color: white;
	background: #1c421d;
	font-size: 1.2em;
    box-shadow: 0.4em 0.4em 0.4em 0 hsl(0, 0%, 50%);
	padding: 0.2em 0.2em 0.2em 2em;
	width: 28em;
	margin-left: 0em;
	position: relative;
	border-radius: 10px; 
    border: 0px solid #1c421d; 
    border-collapse: collapse; 	
}



.menu td {
	border-left: 0px solid #1c421d;
	border-right: 0px solid #1c421d;
	border-collapse: collapse;
	border: 0px solid #1c421d;

}

table.menu tr:last-child td:first-child {
    border-bottom-left-radius:5px;
}

table.menu tr:last-child td:last-child {
    border-bottom-right-radius:5px;
}

table.menu tr th:first-child,
table.menu tr td:first-child {
   border-left: 2px solid #1c421d;
}

table.menu tr:first-child th,
table.menu tr:first-child td {
   border-top: 2px solid #1c421d;
}

table.menu tr:first-child th:first-child,
table.menu tr:first-child td:first-child {
    border-top-left-radius:5px;
}

table.menu tr:first-child th:last-child,
table.menu tr:first-child td:last-child {
    border-top-right-radius:5px;
}


.toolszuffi td {
	background-image: linear-gradient(#f9f9f9, #e3e3e3);
	border-left: 2px solid #1c421d;
	border-right: 2px solid #1c421d;
	border-collapse: collapse;
	border: 1px solid #1c421d;
	padding: 0.3em 0.3em;
	width: 5em;
	

}

.toolszuffi caption {
	color: white;
	background: #1c421d;
	font-size: 1.2em;
    box-shadow: 0.4em 0.4em 0.4em 0 hsl(0, 0%, 50%);
	padding: 0.2em 0.2em 0.2em 2em;
	width: 28em;
	margin-left: 0em;
	position: center;
	border-radius: 10px; 
    border: 0px solid #1c421d; 
    border-collapse: collapse; 
}

table.toolszuffi tr:last-child td:first-child {
    border-bottom-left-radius:10px;
		box-shadow: 0.4em 0.4em 0.4em 0 hsl(0, 0%, 50%);
}

table.toolszuffi tr:last-child td:last-child {
    border-bottom-right-radius:10px;
		box-shadow: 0.4em 0.4em 0.4em 0 hsl(0, 0%, 50%);
}

table.toolszuffi tr th:first-child,
table.toolszuffi tr td:first-child {
   border-left: 2px solid #1c421d;
   	box-shadow: 0.4em 0.4em 0.4em 0 hsl(0, 0%, 50%);
}

table.toolszuffi tr:first-child th,
table.toolszuffi tr:first-child td {
   border-top: 2px solid #1c421d;
   	box-shadow: 0.4em 0.4em 0.4em 0 hsl(0, 0%, 50%);
}

table.toolszuffi tr:first-child th:first-child,
table.toolszuffi tr:first-child td:first-child {
    border-top-left-radius:10px;
		box-shadow: 0.4em 0.4em 0.4em 0 hsl(0, 0%, 50%);
}

table.toolszuffi tr:first-child th:last-child,
table.toolszuffi tr:first-child td:last-child {
    border-top-right-radius:10px;
		box-shadow: 0.4em 0.4em 0.4em 0 hsl(0, 0%, 50%);
}


#stapel {
	    position: relative;
 width: 271px;
   height: 336px;
	overflow: hidden;
/*    margin: 2em auto 0; 
    border: 0px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;*/
}

#stapel img {
    position: absolute;
   width: 271px;
   height: 336px;
   
    opacity: 0;
	    border-top-left-radius:10px;
		    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
	    border-top-right-radius:10px;


}

#stapel img:nth-of-type(1) {
    -webkit-animation: fade 90s ease-in-out infinite;
    animation: fade 90s ease-in-out infinite;
	animation-delay: -2s;
}

#stapel img:nth-of-type(2) {
    -webkit-animation: fade 90s 3s ease-in-out infinite;
    animation: fade 90s 3s ease-in-out infinite;
}

#stapel img:nth-of-type(3) {
    -webkit-animation: fade 90s 6s ease-in-out infinite;
    animation: fade 90s 6s ease-in-out infinite;
}

#stapel img:nth-of-type(4) {
    -webkit-animation: fade 90s 9s ease-in-out infinite;
    animation: fade 90s 9s ease-in-out infinite;
}

#stapel img:nth-of-type(5) {
    -webkit-animation: fade 90s 12s ease-in-out infinite;
    animation: fade 90s 12s ease-in-out infinite;
}

#stapel img:nth-of-type(6) {
    -webkit-animation: fade 90s 16s ease-in-out infinite;
    animation: fade 90s 16s ease-in-out infinite;
}

#stapel img:nth-of-type(7) {
    -webkit-animation: fade 90s 20s ease-in-out infinite;
    animation: fade 90s 20s ease-in-out infinite;
}

#stapel img:nth-of-type(8) {
    -webkit-animation: fade 90s 24s ease-in-out infinite;
    animation: fade 90s 24s ease-in-out infinite;
}

#stapel img:nth-of-type(9) {
    -webkit-animation: fade 90s 28s ease-in-out infinite;
    animation: fade 90s 28s ease-in-out infinite;
}

#stapel img:nth-of-type(10) {
    -webkit-animation: fade 90s 32s ease-in-out infinite;
    animation: fade 90s 32s ease-in-out infinite;
}


#stapel img:nth-of-type(11) {
    -webkit-animation: fade 90s 36s ease-in-out infinite;
    animation: fade 90s 36s ease-in-out infinite;
}

#stapel img:nth-of-type(12) {
    -webkit-animation: fade 90s 40s ease-in-out infinite;
    animation: fade 90s 40s ease-in-out infinite;
}

#stapel img:nth-of-type(13) {
    -webkit-animation: fade 90s 44s ease-in-out infinite;
    animation: fade 90s 44s ease-in-out infinite;
}

#stapel img:nth-of-type(14) {
    -webkit-animation: fade 90s 48s ease-in-out infinite;
    animation: fade 90s 48s ease-in-out infinite;
}

#stapel img:nth-of-type(15) {
    -webkit-animation: fade 90s 52s ease-in-out infinite;
    animation: fade 90s 52s ease-in-out infinite;
}

#stapel img:nth-of-type(16) {
    -webkit-animation: fade 90s 56s ease-in-out infinite;
    animation: fade 90s 56s ease-in-out infinite;
}

#stapel img:nth-of-type(17) {
    -webkit-animation: fade 90s 60s ease-in-out infinite;
    animation: fade 90s 60s ease-in-out infinite;
}

#stapel img:nth-of-type(18) {
    -webkit-animation: fade 90s 64s ease-in-out infinite;
    animation: fade 90s 64s ease-in-out infinite;
}

#stapel img:nth-of-type(19) {
    -webkit-animation: fade 90s 68s ease-in-out infinite;
    animation: fade 90s 68s ease-in-out infinite;
}

#stapel img:nth-of-type(20) {
    -webkit-animation: fade 90s 72s ease-in-out infinite;
    animation: fade 90s 72s ease-in-out infinite;
}

#stapel img:nth-of-type(21) {
    -webkit-animation: fade 90s 76s ease-in-out infinite;
    animation: fade 90s 76s ease-in-out infinite;
}

#stapel img:nth-of-type(22) {
    -webkit-animation: fade 90s 80s ease-in-out infinite;
    animation: fade 90s 80s ease-in-out infinite;
}

#stapel img:nth-of-type(23) {
    -webkit-animation: fade 90s 84s ease-in-out infinite;
    animation: fade 90s 84s ease-in-out infinite;
}

#stapel img:nth-of-type(24) {
    -webkit-animation: fade 90s 88s ease-in-out infinite;
    animation: fade 90s 88s ease-in-out infinite;
}



@-webkit-keyframes fade {
    6.66%, 20%          {opacity:1;}
       0%, 26.66%, 100% {opacity:0;}
}

@keyframes fade {
    6.66%, 20%          {opacity:1;}
       0%, 26.66%, 100% {opacity:0;}
}

@keyframes fade1 {
     6.66%,  20% {opacity:1; z-index:1;}
    26.66%       {transform: scale(1) translate3d(10px,10px,0);
                  opacity:0; z-index:0;}
        0%, 100% {transform: scale(.8) translate3d(0px,0px,0);
                  opacity:0; z-index:0;}
}

@keyframes fade2 {
     6.66%,  20% {opacity:1; z-index:1;}
    26.66%       {transform: scale(.8) translate3d(10px,10px,0);
                  opacity:0; z-index:0;}
        0%, 100% {transform: scale(1) translate3d(0px,0px,0);
                  opacity:0; z-index:0;}
}

@keyframes fade3 {
     6.66%,  20% {opacity:1; z-index:1;}
    26.66%       {transform: scale(1) translate3d(10px,10px,0);
                  opacity:0; z-index:0;}
        0%, 100% {transform: scale(.8) translate3d(0px,0px,0);
                  opacity:0; z-index:0;}
}

@keyframes fade4 {
     6.66%,  20% {opacity:1; z-index:1;}
    26.66%       {transform: scale(.8) translate3d(10px,10px,0);
                  opacity:0; z-index:0;}
        0%, 100% {transform: scale(1) translate3d(0px,0px,0);
                  opacity:0; z-index:0;}
}

@keyframes fade5 {
     6.66%,  20% {opacity:1; z-index:1;}
    26.66%       {transform: scale(1) translate3d(10px,10px,0);
                  opacity:0; z-index:0;}
        0%, 100% {transform: scale(.8) translate3d(0px,0px,0);
                  opacity:0; z-index:0;}
}

@keyframes fade6 {
     6.66%,  20% {opacity:1; z-index:1;}
    26.66%       {transform: scale(1) translate3d(10px,10px,0);
                  opacity:0; z-index:0;}
        0%, 100% {transform: scale(.8) translate3d(0px,0px,0);
                  opacity:0; z-index:0;}
}


.date {
    background: url(/Layout/kalender.gif) no-repeat;
    text-align: center;
    font: .9em/.9 Verdana;
    color: #1c421d;
        display: block;
    height: 4.5em;
    width: 3.5em;
    padding: 0;
}

.date em {
    font-size: 1.3em;
    padding: 5px 0;
    position: relative;
	    display: block;
    color: #1c421d;
    letter-spacing: 1.5px;
}

.date span {
    font-size: 1.2em;
    margin: .1em 0 0;
	    display: block;
    color: #1c421d;
    text-shadow: -.5px -.5px 0 #101010,.5px .5px 0 #505050;
}

div.modern1 { display:inline; font-weight: bold; }
div.modern1aktiv { display:inline; font-weight: bold; }

div.modern2 { display:inline;}


.modern1 span
{
font-size: 2.2em;
	font-family: Copperplate Gothic;
		
}

.tabellemenu span {
	
	 
margin: 0;
padding: 0;
	
}

.modern1 span {
    position: relative;
    margin: 0 auto;
    color: black;
    top: -4px;
    left: 0;
    padding: 0.7em;
    text-shadow:  1px  1px 1px white,
                  1px -1px 1px white,
                 -1px  1px 1px white,
                 -1px -1px 1px white;
   
   
    transition: .5s linear;
}

.modern1 span:hover,
.modern1 span:focus{
    color: #1c421d;
 
text-shadow:  1px  1px 1px white,
                  1px -1px 1px white,
                 -1px  1px 1px white,
                 -1px -1px 1px white;
				 
				 }
.menuoben span {
    position: relative;
    margin: 0 auto;
    color: white;
    top: -4px;
    left: 0;
    padding: 0.7em;
    text-shadow:  1px  1px 5px white,
                  1px -1px 5px white,
                 -1px  1px 5px white,
                 -1px -1px 5px white;
   
   
    transition: .5s linear;
}

.menuoben span:hover,
.menuoben span:focus{
    color: #000000;
 
text-shadow:  1px  1px 10px #44c646,
                  1px -1px 10px #44c646,
                 -1px  1px 10px #44c646,
                 -1px -1px 10px #44c646;
				 
				 }
.menuoben a:link { text-decoration: none; color: black; font-family: Copperplate Gothic;}
.menuoben a:active { text-decoration: none;  color: black; font-family: Copperplate Gothic;}
.menuoben a:visited { text-decoration: none;  color: black;font-family: Copperplate Gothic;}
.menuoben a:hover 

{ text-decoration: none; font-family: Copperplate Gothic;
transition: .5s linear; 
color: #000000;
 
text-shadow:  1px  1px 10px #44c646,
                  1px -1px 10px #44c646,
                 -1px  1px 10px #44c646,
                 -1px -1px 10px #44c646;



}



.modern1aktiv span
{
font-size: 2.2em;
	font-family: Copperplate Gothic;
}

.modern1aktiv span {
    position: relative;
    margin: 0 auto;
    color: black;
    top: -4px;
    left: 0;
    padding: 0.7em;
    text-shadow:  1px  1px 1px white,
                  1px -1px 1px white,
                 -1px  1px 1px white,
                 -1px -1px 1px white;
   
   
    transition: .5s linear;
}

.modern1aktiv span:hover,
.modern1aktiv span:focus{
    color: #1c421d;
 
text-shadow:  1px  1px 1px white,
                  1px -1px 1px white,
                 -1px  1px 1px white,
                 -1px -1px 1px white;
				 
				 }
.modern1headline span
{
font-size: 2.8em;
	font-family: Copperplate Gothic;
}

.modern1headline span {
    position: relative;
    margin: 0 auto;
    color: #1c421d;
    left: 0;
    padding: 0.7em;
    text-shadow:  1px  1px 5px white,
                  1px -1px 5px white,
                 -1px  1px 5px white,
                 -1px -1px 5px white;
   
}







.modern2 span
{
font-size: +3;
	font-family: verdana;
}

.modern2 span {
    position: static;
    color: #1c421d;
  
   
   
    transition: .9s linear;
}

.modern2 span:hover,
.modern2 span:focus
 {
    color: #696969;

				 }
				 
		
.modernred span
{
font-size: +3;
	font-family: verdana;
}

.modernred span {
    position: static;
    color: #1c421d;
  
   
   
    transition: .9s linear;
}

.modernred span:hover,
.modernred span:focus
 {
	 
    color: #696969;

				 }
				 
		
				 
.modern1 a:link { text-decoration: none; color: black;}
.modern1 a:active { text-decoration: none;  color: black; }
.modern1 a:visited { text-decoration: none;  color: black;}
.modern1 a:hover 

{ text-decoration: none; 
transition: .5s linear; 
color: #1c421d;
 
text-shadow:  1px  1px 1px white,
                  1px -1px 1px white,
                 -1px  1px 1px white,
                 -1px -1px 1px white;



}

.modern1aktiv a:link { text-decoration: none; color: #1c421d;}
.modern1aktiv a:active { text-decoration: none;  color: #1c421d; }
.modern1aktiv a:visited { text-decoration: none;  color: #1c421d;}
.modern1aktiv a:hover 

{ text-decoration: none; 
transition: .5s linear; 
color: #1c421d;
 
text-shadow:  1px  1px 1px white,
                  1px -1px 1px white,
                 -1px  1px 1px white,
                 -1px -1px 1px white;



}

.modern2 a:link { text-decoration: none; color: #1c421d;}
.modern2 a:active { text-decoration: none;  color: #1c421d; }
.modern2 a:visited { text-decoration: none;  color: #1c421d;}
.modern2 a:hover 

{ text-decoration: none; 
transition: .9s linear; 
color: #696969;
 


}

.modernred a:link { text-decoration: none; color: #1c421d;}
.modernred a:active { text-decoration: none;  color: #1c421d; }
.modernred a:visited { text-decoration: none;  color: #1c421d;}
.modernred a:hover 

{ text-decoration: none; 
transition: .9s linear; 
color: #000000;


 


}

.dsR1000 /*agl rulekind: base;*/ { background-image: url(Layout/bg.jpg); text-align: center;}



.werben {
    display: block;
    width: 30.5em;
    height: 5em;
    margin: 2em auto;
    cursor: pointer;
    perspective: 4000px;
    transform-style: preserve-3d;
}

figure {
    height: 2em;
}

figure img {
    transform: rotateX(0deg) translateZ(30px);
    z-index: 4;
}

figcaption {
    height: 2em;
    width: 3em;
    text-align: center;
    padding: 10px;
    color: #eee;
    font-size: .8em;
    background: linear-gradient(#666, #111);
    transform: rotateX(-90deg) translateZ(30px);
    z-index: 2;
}

figure img,
figcaption {
    display: block;
    position: absolute;
    border-radius: 2px;
    border: 2px solid #eee;
    transition: 1s;
}

figcaption a:link {
    font: italic bold 1.5em serif;
    display: block;
    margin-bottom: .3em;
}

figure img,
figcaption,
figure:hover img,
figure:hover figcaption {
    box-shadow: 0 0 5px 1px #111;
}

figure:hover img {
    transform: rotateX(90deg) translateZ(30px);
    z-index: 2;
}

figure:hover figcaption {
    transform: rotateX(0deg) translateZ(30px);
    z-index: 4;
}