* { margin: 0; padding: 0; }

#garagedoor {
	list-style: none;
	background: url(door/door24.png) no-repeat;
	width: 88px;
	overflow: auto;	
}
#garagedoor li {
	width: 88px;
	height: 134px;
	display: block;
	float: left;
}

/* Modernizer Enabled */
.csstransitions #garagedoor li {
	-webkit-transition: background-position 1.6s ease;
	-moz-transition: background-position 1.6s ease;
	-o-transition-property: background-position 1.6s ease;
}
.csstransitions #garagedoor li:hover {
	background-position: 0 -134px !important;
}

#garagedoor li#shutter1 {
	background: url(bilder/Door24.png) 0 0 no-repeat; 
}
#garagedoor a {
   width: 88px;
   height: 134px;
   display: block;
   background: url(../images/window.png) no-repeat bottom center;
   text-indent: -9999px;
}




#specialSnowflakes {z-index: 11111;
 user-select: none; }

 
 body {
    background-image: url("bilder/background.png");
    background-repeat: repeat;
}
 
 table.framed {
	border: 15px solid #ccb089;
	border-image-source: url('bilder/frame.png');
	border-image-slice: 90 95;
}
 table.framed2 {
	border: 45px solid #ccb089;
	border-image-source: url('bilder/frame.png');
	border-image-slice: 90 95;
}

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
	width: 100%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 100%;
    
}


.item {
    width: 88px;
    height: 134px;
    margin: 0 auto;
    border-radius: 0%;
    position: relative;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
    cursor: default;
}
.info-wrap {
    width: 88px;
    height: 134px;
    border-radius: 0%;
    perspective: 800px;
    top: 0px;
    left: 0px;
}

.info {
    position: absolute;
    width: 88px;
    height: 134px;
    border-radius: 0%;
    transform-origin: 100% 40%;
    transition: all 1s ease-in-out;
    transform-style: preserve-3d;
}
.info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0%;
    background-position: center center;
    backface-visibility: hidden;
}
.info .info-back {
    transform: rotate3d(0, 1, 0, 180deg);
    background-image: url("Bilder/backdoor.png");
	z-index: 9999;
}

.info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin: 0 15px;
    padding: 40px 0 0 0;
    height: 90px;
    font-family:'Open Sans', Arial, sans-serif;
    text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.item:hover .info-wrap {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 3px rgba(115, 114, 23, 0.8);
}
.item:hover .info {
     transform: rotate3d(0, 1, 0, 150deg);
}

//_____________________________________

.info2-wrap {
    width: 78px;
    height: 128px;
    border-radius: 0%;
    perspective: 800px;
    transition: all 0.4s ease-in-out;
    top: 0px;
    left: 0px;
    background: #f9f9f9;
}

.info2 {
    position: absolute;
    width: 78px;
    height: 128px;
    border-radius: 0%;
    transform-origin: left;
    transition: all 1s ease-in-out;
    transform-style: preserve-3d;
}
.info2 > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0%;
    background-position: center center;
    backface-visibility: hidden;
}
.info2 .info2-back {
    transform: rotate3d(0, 1, 0, 180deg);
    background-image: url("Bilder/backdoor.png");
	z-index: 9999;
}

.info2 h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin: 0 15px;
    padding: 40px 0 0 0;
    height: 90px;
    font-family:'Open Sans', Arial, sans-serif;
    text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.item2:hover .info2-wrap {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 3px rgba(115, 114, 23, 0.8);
}
.item2:hover .info2 {
    -webkit-transform: rotate3d(0, 1, 0, 150deg);
    -moz-transform: rotate3d(0, 1, 0, 150deg);
    -o-transform: rotate3d(0, 1, 0, 150deg);
    -ms-transform: rotate3d(0, 1, 0, 150deg);
    transform: rotate3d(0, 1, 0, -160deg);
}

.item2 {
    width: 78px;
    height: 128px;
    margin: 0 auto;
    border-radius: 0%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: default;
}

img {
   border:0;
   padding:0;
   margin:0;
   display:block; /* This often removes extra spacing around images in IE */
}