/* CSS Document */

	.linklayer{
		
		margin: 0px;
		padding: 0px;
		/*float: left;*/
		z-index: 100;
		position:absolute;
		top: 0px; /*runterschieben, 97-2px wegen abdecker 4px*/
		left: 0px;
		
		
			
	}
	.caption-style-2{
		list-style-type: none;
		margin: 0px;
		padding: 0px;
		position: relative;	
		bottom: 0px; /*Bild hochschieben wegen abdecker 2px*/
		
			
	}

	.caption-style-2 .thumb{
		float: left;
		margin: 0px;
		position: relative;		
		overflow: hidden;
		
		
	}
	.caption-style-2 .thumb:hover .caption{
		opacity: 1;
		transform: translateY(-40px);
		-webkit-transform:translateY(-40px);
		-moz-transform:translateY(-40px);
		-ms-transform:translateY(-40px);
		-o-transform:translateY(-40px);
		
		/*72px Opera*/
		
	}
	.caption-style-2 img{
		padding-top: 0px;
		  padding-bottom: 0px;
		   padding-left: 0px;
		    padding-right: 0px;
		margin-top: 0px;
		  margin-bottom: 0px;
		   margin-left: 0px;
		    margin-right: 0px;
		/*float: left;*/
		z-index: 4;
		border-radius: 0px;
		
				
		opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
	
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
		
	}
	.caption-style-2 .caption{
		cursor: pointer;
		position: relative;
		opacity: 0.9;		
		bottom:25px; /*hoehe des sliders in das image hinein, negativ: Ragt in das Bild hinein*/
		-webkit-transition:all 0.50s ease-in-out;
		-moz-transition:all 0.50s ease-in-out;
		-o-transition:all 0.50s ease-in-out;
		-ms-transition:all 0.50s ease-in-out;
		transition:all 0.50s ease-in-out;

	}
	.caption-style-2 .blur{
		background-color: rgba(56,126,153,0.9);
		height: 97px;
		width: 97px;
		z-index: 5;
		padding-top: 0px;
		  padding-bottom: 0px;
		   padding-left: 0px;
		    padding-right: 0px;
		margin-top: 0px;
		  margin-bottom: 0px;
		   margin-left: 0px;
		    margin-right: 0px;
		position: absolute;
		
		
	}

	
	.caption-style-2 .caption-text{
		/*font-family: "Source Sans Pro",sans-serif;*/
		font-family: "Lato";
		font-size: 14px;
		z-index: 10;
		color: #fff;
		position: absolute;
		width: 97px;
		height: 97px;
		text-align: center;
		top:5px;/*Abstand message*/
		background-image: url(../images/_platzhalter/97x97px_lupe.png);
	}
	
	
/* thumb loaded */

.caption-style-3{
		list-style-type: none;
		margin: 0px;
		padding: 0px;
		position: relative;	
		bottom: 0px; /*Bild hochschieben wegen abdecker 2px*/
		
			
	}

	.caption-style-3 .thumb{
		float: left;
		margin: 0px;
		position: relative;		
		overflow: hidden;
		
		
	}
	.caption-style-3 .thumb:hover .caption{
		opacity: 1;
		transform: translateY(0px);
		-webkit-transform:translateY(0px);
		-moz-transform:translateY(0px);
		-ms-transform:translateY(0px);
		-o-transform:translateY(0px);
		
		/*72px Opera*/
		
	}
	.caption-style-3 img{
		padding-top: 0px;
		  padding-bottom: 0px;
		   padding-left: 0px;
		    padding-right: 0px;
		margin-top: 0px;
		  margin-bottom: 0px;
		   margin-left: 0px;
		    margin-right: 0px;
		/*float: left;*/
		z-index: 4;
		border-radius: 0px;
		
				
		opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:0s;
	-moz-animation-duration:0s;
	animation-duration:0s;
	
-webkit-animation-delay: 0.0s;
-moz-animation-delay: 0.0s;
animation-delay: 0.0s;
		
	}
	.caption-style-3 .caption{
		cursor: pointer;
		position: relative;
		opacity: 0.9;		
		bottom:65px; /*hoehe des sliders in das image hinein, negativ: Ragt in das Bild hinein*/
		-webkit-transition:all 0.50s ease-in-out;
		-moz-transition:all 0.50s ease-in-out;
		-o-transition:all 0.50s ease-in-out;
		-ms-transition:all 0.50s ease-in-out;
		transition:all 0.50s ease-in-out;

	}
	.caption-style-3 .blur{
		background-color: rgba(56,126,153,0.9);
		height: 97px;
		width: 97px;
		z-index: 5;
		padding-top: 0px;
		  padding-bottom: 0px;
		   padding-left: 0px;
		    padding-right: 0px;
		margin-top: 0px;
		  margin-bottom: 0px;
		   margin-left: 0px;
		    margin-right: 0px;
		position: absolute;
		
		
	}

	
	.caption-style-3 .caption-text{
		/*font-family: "Source Sans Pro",sans-serif;*/
		font-family: "Lato";
		font-size: 14px;
		z-index: 10;
		color: #fff;
		position: absolute;
		width: 97px;
		height: 97px;
		text-align: center;
		top:5px;/*Abstand message*/
		background-image: url(../images/_platzhalter/97x97px_lupe.png);

	}
	
	
/* make keyframes that tell the start state and the end state of our object */

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in.one {
	
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}

.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

/*---make a basic box ---*/
.box{


background: #fff;
}

.einblenden {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
	
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}