/* Webkit-Scrollbar
-------------------------------------------------------------*/

::-webkit-scrollbar {width: 10px; height: 10px; height:auto; background:#ebe6e0; }
::-webkit-scrollbar-thumb:vertical {background:#CCCCCC;}
::-webkit-scrollbar-thumb:horizontal {background:#CCCCCC;}
::-webkit-scrollbar-thumb {background:#CCCCCC;}


/* Isotope (DO NOT EDIT) ----------------------------- */

.isotope-item {
z-index: 2;
}

.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}

.isotope,
.isotope .isotope-item {
-webkit-hiatus-duration: 0.8s;
-moz-hiatus-duration: 0.8s;
hiatus-duration: 0.8s;
}

.isotope {
-webkit-hiatus-property: height, width;
-moz-hiatus-property: height, width;
hiatus-property: height, width;
}

.isotope .isotope-item {
-webkit-hiatus-property: -webkit-transform, opacity;
-moz-hiatus-property: -moz-transform, opacity;
hiatus-property: transform, opacity;
}

/* Spacing ----------------------------- */

#wrapper {
width: 470px;
position: center;
display: flex;
}

/* Media ----------------------------- */



.stylewrap {
width: 200px;
height: 300px;
margin: 5px;
text-align: center; 
text-transform: uppercase; 
}

.stylewrap img {
width: 200px;
height: 250px;
top: 40px;
left: 0;
z-index: 999;
}

/* Media Type Colours ----------------------------- */ 

.frei {
background: #f3694c;
}

.vergeben {
background: #f1749e;
}

.reserviert {
background: #f7a494;
}

.titlebox {
position: relative;
background: #f5f5f5;
padding: 15px;
font-family: 'Roboto Slab', Courier New, Arial, sans-serif;
text-align: left;
font-size: 10px; 
line-height: 200%;
text-transform: uppercase;
z-index: 9999;
}

.titlebox:after, .titlebox:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.titlebox:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #f5f5f5;
border-width: 10px;
margin-left: -10px;
left: 80%;
}

.name {
color: #000000;
padding-bottom: 2px; 
border-bottom: 2px solid #d8bb43;
}

.status {
float: right;
color: #A1A1A1;
}

.details {
opacity: 0;
top: 0;
left: 0;
width: 200px;
margin-top: -230px;
text-align: center;
z-index: 999;
}

.stylewrap:hover .details {
opacity: 1;
}

.stylewrap p {
font-size: 10px;
display: block;
background: #f5f5f5;
color: #2f3238;
margin: 3px 25px;
padding: 5px;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,-70px,0);
transform: translate3d(0,-70px,0);
}

.stylewrap:hover p {opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
.stylewrap p:first-child {-webkit-transition-delay: 0.15s; transition-delay: 0.15s;}
.stylewrap p:nth-of-type(2) {-webkit-transition-delay: 0.1s;transition-delay: 0.1s;}
.stylewrap p:nth-of-type(3) {-webkit-transition-delay: 0.05s;transition-delay: 0.05s;}
.stylewrap:hover p:first-child {-webkit-transition-delay: 0s;transition-delay: 0s;}
.stylewrap:hover p:nth-of-type(2) {-webkit-transition-delay: 0.05s;transition-delay: 0.05s;}
.stylewrap:hover p:nth-of-type(3) {-webkit-transition-delay: 0.1s;transition-delay: 0.1s;}

/* Image Greyscale on Hover ----------------------------- */

.stylewrap:hover .grey {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
-webkit-filter: grayscale(100%); 
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
}