@charset "utf-8";
/* CSS Document */


/****************** GALLERY ******************/

#gallery1 li, #gallery2 li, #gallery3 li{
		float: left;
		list-style: outside none none;
		margin: 1px;
		transition: all 0.5s ease 0s;
}

#gallery1 li:before, #gallery2 li:before, #gallery3 li:before  {  
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6);
	opacity:0;
	transition: all 1s ease 2s;
}

#gallery1 a, #gallery2 a, #gallery3 a{
	background: none repeat scroll 0 0 rgba(50, 50, 50, 0.1);
	display:block;
	height:43px;
	overflow:hidden;
	transition: all 0.4s ease-out 0s;
	width:100%;
}

#gallery1 a img, #gallery2 a img, #gallery3 a img  {
	min-height:43px;
	transition:all0.3s ease-out 0s;
	z-index:2;
}

#gallery1 li:hover, #gallery2 li:hover, #gallery3 li:hover{
	transform:scale(1.5);
	z-index:2;
}

#gallery1 li a:hover, #gallery2 li a:hover, #gallery3 li a:hover{
	box-shadow:0 0 0 1px #fff, 0 0 10px 2px #CC005C;
	transition: all 0.1s ease 0s;
}


/* -------   Design  -------------------------> */

#col1, #col2, #col3{
	background-color: #fdeff3;
	box-sizing: border-box;
	display: table-cell;
	float:left;
	width: 95%;
	padding:1.3rem;
	margin:1.2rem 1rem;
	border-radius:0 1.3rem 0 1.3rem;
	box-shadow: 0px 1px 2px #d35d92;
}



#col1 article, #col2 article, #col3 article{
	float: left;
}
#gallery1, #gallery2, #gallery3{
	float:right;
	box-sizing:border-box;
	width:46%;
	margin-top:1rem;
	padding:10px;
}
[id^=col] h2{
	text-align: left;
}



/************ Smartphone- und Tablet-Ansicht  max-width:768px  ************************/
/*** Es wir nur eine column angezeigt mit der Breite 95% ***/

@media screen and (max-width:768px){
	
	#col1>article, #col2>article, #col3>article, #gallery1, #gallery2, #gallery3{	
		display:block;
		width:95%;	
	}
	
	
}