/*
	kasten.css IS A unversal small smart 1/2/4col GRID CSS by Maximilian Weber
	Version 0.3
*/

.content{
	max-width: 1560px;
}
.lefthalfcontent,.righthalfcontent{
	max-width: 780px;
}

.full{
	width:100%;
	padding:50px 0 80px;
	position: relative;
}
.full.nospace{
	padding:0;
}
.fullheight.enabled{
	height:100vh;
	overflow:hidden;
}
.halfcontentbox{	
	-webkit-display:flex;
	display:flex;
	position: relative;
}
.halfcontent{
	float:left;
	width:49.99%;
}

.content{
	width:95%; /*fallback*/
	width:calc(90% + 40px);
	margin:auto;
	position: relative;
}
.lefthalfcontent,.righthalfcontent{
	width:95%; /*fallback*/
	width:calc(90% + 20px);
	float:right;
}
.righthalfcontent{
	float:left;
}
.col-4-4{
	width:100%;
	float:left;
	height:100%;
}
.col-2-4{
	width:49.99%;
	float:left;
	height:100%;
}
.col-1-4{
	width:24.99%;
	float:left;
	height:100%;
}
.col-2-4 .col-2-4.padding:nth-of-type(odd),.halfcontent .col-2-4.padding:nth-of-type(odd){padding-left:0;padding-right:20px;}
.col-2-4 .col-2-4.padding:nth-of-type(even),.halfcontent .col-2-4.padding:nth-of-type(even){padding-left:20px;padding-right:0px;}

.padding{
	padding:25px 40px 35px;
	box-sizing:border-box;
}
.leftpadding{
	padding-right: 20px;
	box-sizing:border-box;
}
.rightpadding{
	padding-left: 20px;
	box-sizing:border-box;
}
.boxpadding{
	padding:20px 40px 40px;
	box-sizing:border-box;
}	
.margb{
	margin-bottom: 5vw;
}
.center{
	margin:auto;
	text-align: center;
}
.left,.left *{
	text-align: left !important;
}
.content img{
	max-width: 100%;
}

@media(max-width: 1200px){	
	.col-2-4{
		width:100%;
		float:left;
	}	
	.col-2-4.smallcol{
		width:49.99%;
	}	
	.col-2-4.leftpadding{
		padding-right: 0px;
	}
	.col-2-4.rightpadding{
		padding-left: 0px;
	}
	.halfcontent .col-2-4.smallcol{
		width:100%;
	}
	.col-2-4 .col-2-4, .col-1-4{
		width:24.99%;
		float:left;
	}
	.col-2-4.smallcol .col-2-4{
		width:49.99%;
	}
	.col-2-4 .col-2-4.padding:nth-of-type(even){
		padding-left:0;
	}
	.padding {
	    padding: 15px 20px 25px !important;
	}
}

@media(max-width: 720px){
	.halfcontentbox{
		display:block;
		position: relative;
	}
	.halfcontentbox:after{		
		content: ".";
	    clear: both;
	    display: block;
	    visibility: hidden;
	    height: 0px;
	}
	.halfcontent{
		width:100%;
	}
	.content,.lefthalfcontent,.righthalfcontent{
		width:95%;
		float:none;
		margin: auto;
	}
	.col-2-4 .col-2-4, .col-1-4{
		width:49.99%;
	}
	.col-2-4.smallcol{
		width:100%;
	}
	.halfcontent .col-2-4.smallcol{
		width:49.99%;
	}
	.col-1-4{
		width:100%;
		float:left;
	}
	.col-1-4.leftpadding{
		padding-right: 0px;
	}
	.col-1-4.rightpadding{
		padding-left: 0px;
	}
	.boxpadding{
		padding:20px 0px 0px 0px;
	}	
}
@media(max-width: 500px){	
	.padding {padding: 5px 5px 20px !important;}
	.halfcontent .col-2-4.smallcol{width:100%;}	
}


/*

	Beispiele:
<section id="eindeutigerName">
	<div class="full nospace fullheight enabled">
		<div class="content">
			<div class="col-1-4 leftpadding relative">			
			<div class="col-2-4 smallcol padding margb center">
				<div class="col-2-4">
			<div class="col-4-4">			
				<div class="boxpadding bg_gr op color_wh left">
		<div class="halfcontentbox">
			<div class="halfcontent">
				<div class="col-2-4">
				<div class="lefthalfcontent clearfix">
				<div class="righthalfcontent clearfix">


	Beschreibung:
section eröffnen und id vergeben
full setzen, um Polster zu setzen
	bei Bedarf Polster entfernen								(.nospace) 
	bei Bedarf Bereichshöhe an Fensterhöhe ausrichten lassen 	(.fullheight .enabled)
Content setzen, damit Raster mittig ausgerichtet werden kann	(weite manuell festlegen)
col-X-4 mehrfach setzen, um Rasterstückelung nach wunsch zu definieren 
	bspw füllen col-1-4 col-1-4 col-2-4 eine Bildschirmbreite
	bei Bedarf Polster hinzufügen 								(.padding)(.leftpadding)(.rightpadding)
	bei Bedarf relative setzen, damit absolut bei Kind effektiv gesetzt werden kann (.relative)
	bei Bedarf Text ausrichten 									(.left)(.center)
boxpadding setzen
	bei bedarf Farben setzen über setting.css
	background-color, font-color, opacity						(.bg_re color_wh op)
in der setting.css Farben festlegen
*/