@charset "utf-8";

@media all  {
	
	#teaserboxes  {
		clear: left;
		border-top: solid 1px #FFFFFF;		/*Trennlinie vor Teaserbox*/
		padding: 30px 0 0 0;				/*Abstand der Teaserbox zum vorlaufenden Beitrag*/
		/*border: 2px solid #00dd00;*/
	}
	
	.teaserbox_left  {
		float: left;
		width: 272px;
		text-align: center;
		padding: 0 0 20px 0;
		margin: 0 0 50px 0;                
		border: solid 2px #ADB8D2;
		box-shadow: 8px 8px 16px 0;
		-webkit-box-shadow: 8px 8px 16px 0;	
	}
	
	.teaserbox_center_screen  {
		width: 272px;
		text-align: center;
		padding: 0 0 20px 0;
		margin: 0 auto;                
		border: solid 2px #ADB8D2;
		box-shadow: 8px 8px 16px 0;
		-webkit-box-shadow: 8px 8px 16px 0;
	}
	
	.teaserbox_center_mobile  {
		display: none;
		text-align: center;
		padding: 0;
		border: solid 2px #ADB8D2;
		box-shadow: 8px 8px 16px 0;
		-webkit-box-shadow: 8px 8px 16px 0;
	}
	
	.teaserbox_right  {
		float: right;
		width: 272px;
		text-align: center;
		padding: 0 0 20px 0;
		margin: 0 0 50px 0;                
		border: solid 2px #ADB8D2;
		box-shadow: 8px 8px 16px 0;
		-webkit-box-shadow: 8px 8px 16px 0;
	}
	
	#teaserboxes h2  {
		color: #2B3752;
		font-size: 1.25em;
		margin: 15px 0;
    }
	
	#teaserboxes p  {
		padding: 0 10px;
    }
	
	
}


@media screen and (max-width: 1050px)  {
/*Teaserboxes werden schmaler als Navigation*/
	
	#teaserboxes  {
		margin: 0 3%;
	}

}


@media screen and (max-width: 950px)  {
/*Teaserboxes werden kleiner*/
	
	
	.teaserbox_left  {
		width: 240px;
	}
	
	.teaserbox_center_screen  {
		width: 240px;
	}
	
	.teaserbox_right  {
		width: 240px;
	}
	
}


@media screen and (max-width: 850px)  {
/*Teaserboxes gehen untereinaner*/
    
	
	#teaserboxes  {
		/*display: none;*/
		}
	
	.teaserbox_left  {
		display: block;
		float: none;
		width: 50%;
		margin: 0 auto 30px auto;
	}
	
	.teaserbox_center_screen  {
		display: none;
	}
	
	.teaserbox_center_mobile  {
		display: block;
		width: 50%;
		margin: 0 auto 30px auto;
	}

	.teaserbox_right  {
		display: block;
		float: none;
		width: 50%;
		margin: 0 auto 30px auto;
	}
	
	
}


@media screen and (max-width: 575px)  {
/*Teaserboxes verändern Breite*/
	
	.teaserbox_left  {
		width: 90%;
	}
	
	.teaserbox_center_mobile  {
		width: 90%;
	}

	.teaserbox_right  {
		width: 90%;
	}
	
}