
.vk_fenster{
	margin-bottom: 40px;
}

.vk_fenster .vk_inhalt, .vk_fenster .vk_highlights {
    background-color: white;
    box-shadow: 5px 5px 15px #cccccc;
    width: 100%;
}

.vk_fenster header {
    background-color: #823f7f;
    color: white;
    padding-left: 15px;
    width: 100%;
}

.vk_fenster header h3 {
    color: white;
    font-family: "metabold_roman";
    padding-bottom: 7px;
    padding-top: 7px;
}

.vk_fenster .vk_body, .vk_fenster .vk_body_r {
    padding-left: 15px;
    padding-right: 15px;
}

.chip {
    background-color: #e4e4e4;
    border-radius: 16px;
    color: rgba(0, 0, 0, 0.6);
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    height: 32px;
    line-height: 32px;
    margin-bottom: 10px;
    margin-right: 5px;
    padding: 0 12px;
	cursor: pointer;
}

.chip:hover {
	background-color: #d1a9cf;
}

.chip.cat_aktiv{
	background-color: #d1a9cf;
}

.chip > img {
    border-radius: 50%;
    float: left;
    height: 32px;
    margin: 0 8px 0 -12px;
    width: 32px;
}

/*********MEINE GRIDLIST************/
.mdc-grid-tile
{
	width: 180px;
}

.mdc-grid-tile__secondary
{
	background-color: rgba(0, 0, 0, 0.6);
	left: 0 ! important;
    width: calc(100% - 0px) ! important;
}

.mdc-grid-tile__secondary span
{
	font-size: 1.2em;
}

.mdc-grid-tile__title
{
	padding-top: 5px;
	height: 20px;
}

.wrapper_back
{
	padding: 16px;
}

.wrapper_back h3{
	margin:0; 
	padding:0;
	font-family: "metabold_roman";
	border-bottom: 1px solid #803f7f;
}

.wrapper_back p{
	margin:0 ! important; 
	padding:0 ! important;
	position: relative ! important;
	word-wrap: break-word;
	
	-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;
	}
.back .mdc-grid-tile__secondary{
	background-color: rgba(128, 63, 127, 1.0);
}

.back .mdc-grid-tile__secondary a{
	color: white;
	text-decoration: none;
}

.mdc-grid-list .kategorien
{
	display: none;
}


/*****GRID-LIST DEFAULT********/

/* Ken Burns Effect */
.fling-kb {overflow:hidden;margin-bottom: 5px;}
.fling-kb img {width: 100%;margin-left: 0px;position: relative;transition-property: all;transition-duration: 0.8s; transition-timing-function: ease-in-out;transition-delay: 0s;}
.fling-kb:hover img {transform: scale(1.2) rotate(2deg);}


/* Mini Slideshow Effect */
.fling-minislide {width:350px; height:300px; overflow:hidden; position:relative; }
.fling-minislide img{ position:absolute; animation:fling-minislide 20s infinite; opacity:0;}
@keyframes fling-minislide {25%{opacity:1;} 40%{opacity:0;}}
.fling-minislide img:nth-child(4){animation-delay:0s;}
.fling-minislide img:nth-child(3){animation-delay:5s;}
.fling-minislide img:nth-child(2){animation-delay:10s;}
.fling-minislide img:nth-child(1){animation-delay:15s;}


/* Bounce Effect */
a.fling-bounce {padding-top: 5px; padding-bottom: 0px; transition:padding-top 0.25s,padding-bottom 0.25s; -moz-transition:padding-top 0.25s,padding-bottom 0.25s; -webkit-transition:padding-top 0.25s,padding-bottom 0.25s; -o-transition:padding-top 0.25s,padding-bottom 0.25s; text-decoration: none; display:block; float:left; width: auto; height: auto;}
a:hover.fling-bounce {padding-top: 0px; padding-bottom: 5px; }
 

/* Shadow Below */
.fling-shadowbelow {box-shadow: 0 8px 6px -6px #000;-moz-box-shadow: 0 8px 6px -6px #000;-webkit-box-shadow: 0 8px 6px -6px #000;-o-box-shadow: 0 8px 6px -6px #000;}
 

/* 3D Effect */
.fling-3d {color: #fff; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);}
 

/* Neon Effect */
.fling-neon {color:#fff; text-shadow:0 0 10px #fff, 0 0 20px #00d2ff, 0 0 30px #00d2ff, 0 0 40px #00d2ff, 0 0 50px #00d2ff, 0 0 60px #00d2ff, 0 0 70px #00d2ff;}
 

/* Letterpress Effect */
.fling-letterpress { color: #fff; text-shadow: 0px 2px 1px #555;}
 

/* Patch Effect */
.fling-patch {color: #fff; display:inline-block; outline: 1px dashed #98abb9; outline-offset: -7px; background-color: #556068; height: auto; width: auto; padding: 15px; text-align: center;}
 

/* Polaroid Effect */
.fling-polaroid {color: #fff; display:block; border: 1px solid #98abb9; background-color: #fff; height: auto; width: auto; padding: 10px; text-align: center; box-shadow: 0 8px 6px -6px #000;-moz-box-shadow: 0 8px 6px -6px #000;-webkit-box-shadow: 0 8px 6px -6px #000;-o-box-shadow: 0 8px 6px -6px #000;float: left;}
img.fling-polaroid {border: solid 1px #98abb9;}


/* Flip Card Effect */

.fling-flip{-webkit-perspective: 1000;-moz-perspective: 1000;-ms-perspective: 1000;perspective: 1000;-ms-transform: perspective(1000px);-moz-transform: perspective(1000px);-moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; border: 1px solid #ccc;}
.fling-flip:hover .back, .fling-flip.hover .back {-webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg);}
.fling-flip:hover .front, .fling-flip.hover .front {-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg);}
/*.fling-flip, .front, .back {width: 200px;height: 300px;} */
.flipper {-webkit-transition: 0.6s;-webkit-transform-style: preserve-3d;-ms-transition: 0.6s;
-moz-transition: 0.6s;-moz-transform: perspective(1000px);-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;
transition: 0.6s;transform-style: preserve-3d;position: relative;}
.front, .back {-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;
-webkit-transition: 0.6s;-webkit-transform-style: preserve-3d;-webkit-transform: rotateY(0deg);
-moz-transition: 0.6s;-moz-transform-style: preserve-3d;-moz-transform: rotateY(0deg);
-o-transition: 0.6s;-o-transform-style: preserve-3d;-o-transform: rotateY(0deg);
-ms-transition: 0.6s;-ms-transform-style: preserve-3d;-ms-transform: rotateY(0deg);
transition: 0.6s;transform-style: preserve-3d;transform: rotateY(0deg);/*position: absolute*/;top: 0;left: 0;}
.front {-webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);transform: rotateY(0deg);background: lightgreen;z-index: 2;}
.back {background: lightblue;-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);-ms-transform: rotateY(-180deg);transform: rotateY(-180deg);}
/*.back p {position: absolute;bottom: 40px;left: 0;right: 0;text-align: center;	padding: 0 20px;font-size: 18px;} */






/* Submerge Effect */
@-webkit-keyframes fling-submerge { 0% { opacity: 0; top: 25px;} 75% { opacity: 1; } 85% { top: 0px;} ;}
@-moz-keyframes fling-submerge { 0% { opacity: 0; top: 25px;} 75% { opacity: 1; } 85% { top: 0px;} ;}
@-ms-keyframes fling-submerge { 0% { opacity: 0; top: 25px;} 75% { opacity: 1; } 85% { top: 0px;} ;}
@-o-keyframes fling-submerge { 0% { opacity: 0; top: 25px;} 75% { opacity: 1; } 85% { top: 0px;} ;}
@keyframes fling-submerge { 0% { opacity: 0; top: 25px;} 75% { opacity: 1; } 85% { top: 0px;} ;}
@-webkit-keyframes fling-psubmerge { 0% { opacity: 0;} 25% { opacity: 0; } 100% { opacity: 1;} ;}
@-moz-keyframes fling-psubmerge { 0% { opacity: 0;} 25% { opacity: 0; } 100% { opacity: 1;} ;}
@-ms-keyframes fling-psubmerge { 0% { opacity: 0;} 25% { opacity: 0; } 100% { opacity: 1;} ;}
@-o-keyframes fling-psubmerge { 0% { opacity: 0;} 25% { opacity: 0; } 100% { opacity: 1;} ;}
@keyframes fling-psubmerge { 0% { opacity: 0;} 25% { opacity: 0; } 100% { opacity: 1;} ;}
.fling-submerge {display:block;}
.fling-submerge h1 {font-size: 40px; line-height: 50px;position: relative; opacity: 1; top:0;
	-webkit-animation: fling-submerge 2s ease-out; -moz-animation: fling-submerge 2s ease-out; -ms-animation: fling-submerge 2s ease-out; -o-animation: fling-submerge 2s ease-out; animation: fling-submerge 2s ease-out;}
.fling-submerge p {font-size: 18px; line-height: 22px;opacity: 1;
	-webkit-animation: fling-psubmerge 3s; -moz-animation: fling-psubmerge 3s; -ms-animation: fling-psubmerge 3s; -o-animation: fling-psubmerge 3s; animation: fling-psubmerge 3s;}
	

.back
{
	margin-top:-174px;
}
	


@media only screen and (max-width: 1199px) and (min-width: 991px) {
	.wrapper_back p {
		font-size: 0.7em ! important;
	}
	
	.mdc-grid-tile__secondary {
		font-size: 0.8em ! important;
		height: 34px ! important;
		padding: 7px 16px ! important;
	}
	
	.mdc-grid-tile {
		width: 146px ! important;
		height: 146px ! important;
	}
	
	.back
	{
		margin-top:-140px ! important;
	}
}

@media only screen and (max-width: 990px) and (min-width: 767px) {
	.wrapper_back p {
		font-size: 0.9em ! important;
	}
	
	.mdc-grid-tile__secondary {
		font-size: 0.8em ! important;
		height: 34px ! important;
		padding: 7px 16px ! important;
	}
	
	.mdc-grid-tile {
		width: 165px ! important;
		height: 165px ! important;
	}
	
	.back
	{
		margin-top:-159px ! important;
	}
}



@media only screen and (max-width: 767px) {
	.wrapper_back p {
		font-size: 1.0em ! important;
	}
	
	.mdc-grid-tile__secondary {
			font-size: 1.0em ! important;
		height: 48px;
    padding: 16px;
	}
	
	.mdc-grid-tile {
		width: 33% ! important;
		height: 33% ! important;
	}
	
	.back
	{
		margin-top:-100% ! important;
	}
}


@media only screen and (max-width: 592px) {
	.wrapper_back p {
		font-size: 0.8em ! important;
	}
	
	.mdc-grid-tile__secondary {
		font-size: 0.9em ! important;
		height: 40px ! important;
		padding: 10px 16px ! important;
	}
	
}

@media only screen and (max-width: 508px) {
	.wrapper_back p {
		font-size: 0.7em ! important;
	}
	
	.mdc-grid-tile__secondary {
		font-size: 0.9em ! important;
		height: 40px ! important;
		padding: 10px 16px ! important;
	}
	
}



@media only screen and (max-width: 476px) {
	.wrapper_back p {
		font-size: 1.0em ! important;
	}
	
	.mdc-grid-tile__secondary {
		font-size: 1.0em ! important;
		height: 48px ! important;
		padding: 16px 16px ! important;
	}
	
	.mdc-grid-tile {
		width: 50% ! important;
		height: 50% ! important;
	}
	
	.back
	{
		margin-top:-100% ! important;
	}
}


@media only screen and (max-width: 406px) {
	.wrapper_back p {
		font-size: 0.9em ! important;
	}
	
	.mdc-grid-tile__secondary {
		font-size: 0.9em ! important;
		height: 40px ! important;
		padding: 10px 16px ! important;
	}
	
	.mdc-grid-tile {
		width: 50% ! important;
		height: 50% ! important;
	}
	
	.back
	{
		margin-top:-100% ! important;
	}
	
	.chip {
		background-color: #e4e4e4;
		border-radius: 16px;
		color: rgba(0, 0, 0, 0.6);
		display: inline-block;
		font-size: 12px;
		font-weight: 500;
		height: 32px;
		line-height: 32px;
		margin-bottom: 10px;
		margin-right: 3px;
		padding: 0 12px;
		cursor: pointer;
	}

	.chip > img {
		border-radius: 50%;
		float: left;
		height: 32px;
		margin: 0 4px 0 -12px;
		width: 32px;
	}
}

@media only screen and (max-width: 384px) {
	.wrapper_back p {
		font-size: 0.7em ! important;
	}
	
	.mdc-grid-tile__secondary {
		font-size: 0.8em ! important;
		height: 30px ! important;
		padding: 5px 16px ! important;
	}
	
	.mdc-grid-tile {
		width: 50% ! important;
		height: 50% ! important;
	}
	
	.back
	{
		margin-top:-100% ! important;
	}
}