@charset "utf-8";

/*
	99Lime.com HTML KickStart by Joshua Gatcke
	kickstart-grids.css
	
	DO NOT EDIT THIS FILE unless you know what you are doing. 
*/
/*---------------------------------
	GRID/COLUMNS
-----------------------------------
	tinyfluidgrid.com
	& girlfriendnyc.com
	with changes by 99Lime
-----------------------------------*/
/*
& Columns : 12 
& Gutter %: 20% 
*/

.grid{
margin: 0 -0.833333%;
/*margin: 0 -5px;*/
padding: 0;
/*overflow: hidden;	==> ACHTUNG: Das könnte das Grid eventuell zerstören sorgt aber für die Sichtbarkeit von Schatten*/
}

/*.grid.extended{
margin-left: calc(-120px - 0.833333%);
margin-right: calc(-120px - 0.833333%);
width: calc(240px + 101.666666%);
max-width: calc(240px + 101.666666%);
}*/

.row{
display: block;
overflow: hidden;
clear: both;
}

*[class*="col_"].alpha{margin-left:0;}
*[class*="col_"].omega{margin-right:0;}
 
.col_1  { width: 6.6666666666667%; }
.col_2  { width: 15%; }
.col_3  { width: 23.333333333333%; }
.col_4  { width: 31.666666666667%; }
.col_5  { width: 40%; }
.col_6  { width: 48.333333333333%; }
.col_7  { width: 56.666666666667%; }
.col_8  { width: 65%; }
.col_9  { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

*[class*="col_"]{
margin: 0 0.833333%;
/*margin: 0 5px;*/
float: left;
display: block;
}

.grid img{
max-width: 100%;
height: auto !important;
}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix, *:first-child+html .clearfix{zoom:1}

/* Viewable Grids 
	To view your grids, add the class .visible to any grid container.
	This will add a background color so you can see the layout of your grids. 
*/
*[class*="col_"].visible{
background:#eee;
border:1px dotted #ccc;
}


/*---------------------------------
	Responsive Grid Media Queries
	> 960 		- Desktop & Tablet Landscape (default grid)
	600-960 	- Tablet (Portrait) & Phone (Portrait)
	599-less 	- Smartphone
	359-less 	- kleine Smartphone
-----------------------------------*/

/* Smartphones ----------- */
@media only screen 
	and (max-width : 599px) {
	.grid.extended{
		margin-left: calc(-15px - 0.833333%);
		margin-right: calc(-15px - 0.833333%);
		width: calc(30px + 101.666666%);
		max-width: calc(30px + 101.666666%);
	}
}
/* Ganz Kleine Smartphones ----------- */
@media only screen 
	and (max-width : 359px) {
}
/* Tablets (Hochformat) sowie kleinere Displays und Größere Smartphones ----------- */
@media only screen 
	and (min-width : 600px) 
	and (max-width : 979px) {
	.grid.extended{
		margin-left: calc(-30px - 0.833333%);
		margin-right: calc(-30px - 0.833333%);
		width: calc(60px + 101.666666%);
		max-width: calc(60px + 101.666666%);
	}
}
/* Breite Desktops und Laptops ----------- */
@media only screen 
	and (min-width : 1240px) {
}






@media all and (min-width: 980px) {
	.grid *[class*="col_"]{}
	.grid{}
	.show-desktop	{display: block !important;}
	.hide-desktop	{display: none !important;}
	.show-tablet	{display: none !important;}
	.hide-tablet	{display: block !important;}
	.show-phone		{display: none !important;}
	.hide-phone		{display: block !important;}
}

@media all and (min-width: 600px) and (max-width: 979px) {
	.grid:not(.keep) *[class*="col_"]{
		float: none;
		width: auto;
		clear: both;
		display: block;
	}
		.grid:not(.keep) *[class*="col_"].switch_margin {
			margin-top: 60px;
			margin-bottom: 0;
		}
	
	/* columns inside of columns */
	.grid:not(.keep) *[class*="col_"] [class*="col_"]{
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
	
	/*.grid:not(.keep){max-width: 100%;}*/
	.show-desktop	{display: none !important;}
	.hide-desktop	{display: block !important;}
	.show-tablet	{display: block !important;}
	.hide-tablet	{display: none !important;}
	.show-phone		{display: none !important;}
	.hide-phone		{display: block !important;}
}

@media all and (max-width: 599px) {
	.grid *[class*="col_"]{
		float: none;
		width: auto;
		clear: both;
		display: block;
	}
		.grid *[class*="col_"].switch_margin {
			margin-top: 20px;
			margin-bottom: 0;
		}
	
	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"]{
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
	
	/*.grid{ max-width: 100%; }*/
	.show-desktop	{display: none !important;}
	.hide-desktop	{display: block !important;}
	.show-tablet	{display: none !important;}
	.hide-tablet	{display: block !important;}
	.show-phone		{display: block !important;}
	.hide-phone		{display: none !important;}
}
