/* Stylesheet für www.gsgundelach.com
* Copyright Felix Hohlwegler
* Datum 18.12.2016
* Datei: gundelach_style.css
*/


/*==================================================================
* Kapitel 1: Body Kalibrierung
  ==================================================================
*/
html, body {
	background-color: #efefef;
	color: #666666;
	line-height: 19px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 0px;
	margin: 0px;
	height: 100%;
	}
	
/*==================================================================
* Kapitel 2: Grundgerüst
  ==================================================================
*/
#wrapper{
	width: 100%;
	height: 100%;
}
#left{
	position: fixed;
	background-color: #ffffff;
	/*float: left;*/
	width: 265px;
	height: 100%;
	min-height: 100%;
}
#right{
	padding-left: 300px;
	float: left;
	width: 915px;
	height: 100%;
	min-height: 100%;
	background-color: #efefef;
}
#middle{	
	position: fixed;
	left: 265px;
	background-color: #ffffff;
	/*margin-left: 230px;*/
	/*float: left;*/
	width: 35px;
	height: 100%;
	min-height: 100%;
}
.clear{
	clear: both;
}
#content {
	padding-left: 15px;
	padding-bottom: 25px;
}
/*==================================================================
* Kapitel 3: Navi
  ==================================================================
*/
#navi{
	text-align: right;
	margin-right: 26px;
}
#navi li {
	list-style: none;
	padding-bottom: 5px;
}
#navi a {
	text-decoration: none;
	color: black;
}
#navi a:hover{
	color: #3e7cb4;
}
#navi a:hover:before{
	content: url("../images/pfeil.png");
	padding-right: 5px;
	border:0px;
}
#active{
	color: #3e7cb4;
}
#active a{
	color: #3e7cb4;
}

.buttonlogin:hover{
	color: #3e7cb4;
}
.buttonlogin:hover:before{
	content: url("../images/pfeil.png");
	padding-right: 5px;
	border:0px;
}


.dropdown{
}
.dropdown_head{
	
}
.dropdown_body{
	margin-top: 15px;
}
.dropdown_body ul{
}


#navicon{
	display: none;
}

#resnavi{
	display: none;
}

#closeicon{
	display: none;
}

/*==================================================================
* Kapitel 3: Seiten
  ==================================================================
*/

.mich{
	padding-top: 100px;
}

.kontakt{
	padding-top: 148px;
}

.impressum{
	padding-top: 184px;
}

.projekte1{
	padding-top: 157px;
}

.projekte2{
	padding-top: 180px;
}

.projekte3{
	padding-top: 206px;
}

.projekte4{
	padding-top: 229px;
}

.datenschutz{
	padding-top: 209px !important;
}

/*==================================================================
* Kapitel 4: Links
  ==================================================================
*/
a {
	text-decoration: none;
	color: black;
}
a:hover{
	color: #3e7cb4;
}
#link10{
	color: dimgrey;
}
/*==================================================================
* Kapitel 5: Layout
  ==================================================================
*/
.total{
	width: 100%;
}
.zweidrittel{
	float: left;
	width: 70%;
}
.drittel{
	float: left;
	width: 30%;
}
.half{
	float: left;
	width: 50%;
}
/*==================================================================
* Kapitel 6: Textstile
  ==================================================================
*/
h1{
	font-size: 13px;
	text-align: left;
	color: #3e7cb4; 
	font-weight: normal;
}

h2{
	font-size: 12px;
	text-align: left;
	color: #878787;
	font-weight: bold;

}
h4{
	font-size: 12px;
	text-align: left;
	color: #3e7cb4; 
	font-weight: normal;
	padding-top: 0px;
		padding-bottom: 0px;
		margin-bottom: 0px;
}
.project{
	font-size: 12px;
	text-align: left;
	color: #3e7cb4; 
	font-weight: normal;
}
.vita{
	font-size: 12px;
	text-align: left;
	color: #000;
}
.black{
	font-size: 11px;
	text-align: left;
	color: #878787;
	font-weight: bold;
}
.up{
	position: fixed;
	bottom: 5px;
	left: 196px;
	z-index: 1;
}

#logo img{
	margin-top: 30px;
	padding-left: 30px;
	padding-bottom: 49px;
	width: 263px;
}


.slider_around{
	width: 100%;
}
.item{
	width: 100%;
}

.item img{
	width: 100%;
}

@media (min-width: 250px) and (max-width: 940px) {
	#content{
		padding-left: 12px;
	}
	#content img{
		width: 100%;
	}
	#left{
		position: fixed;
		background-color: #ffffff;
		width: 100%;
		height: 83px;
		min-height: 0%;
		z-index: 5000000;
	}

	#middle{
		display: none;
	}

	#right{
		padding-left: 10px;
		display: block;
		width: 100%;
		height: 100%;
		min-height: 100%;
		background-color: #efefef;
	}

	#content {
		margin-right: 20px;
	}

	#logo img{
		margin-top: 21px;
		padding-bottom: 21px;
		padding-left: 21px;
	}

	#navi{
		display: none;
	}

	.mich{
		padding-top: 100px;
	}

	.kontakt{
		padding-top: 100px;
	}

	.impressum{
		padding-top: 100px;
	}

	.projekte1{
		padding-top: 100px;
	}

	.projekte2{
		padding-top: 100px;
	}

	.projekte3{
		padding-top: 100px;
	}

	.projekte4{
		padding-top: 100px;
	}


	#navicon{
		display: block;
		position: fixed;
		top: 30px;
		right: 21px;
	}

	#closeicon{
		display: none;
		position: fixed;
		top: 32px;
		right: 21px;
	}

	#naviresponsive{
		display: none;
		z-index: 600;
		position: fixed;
		right: 0;
		width: 200px;
		background-color: #fff;
		opacity: 0.9;
		height: 2000px;
		min-height: 100%;
	}
	#resnavi{
		display: block;
		text-align: right;
		margin-right: 21px;
		height: 100%;
		min-height: 100%;
		overflow-x: hidden;
	}
	#resnavi li {
		display: block;
		list-style: none;
		padding-bottom: 10px;
	}
	#resnavi a {
		word-break: keep-all;
		text-decoration: none;
		display: block;
		color: black;
	}
	#resnavi a:hover{
		color: #3e7cb4;
	}

	#closebutton{
		display: block;
		margin-top: 5px;
		width: 12px;
		height: 60px;
		background: url('../images/schliessen_norm.png') no-repeat;
	}

	#closebutton:hover{
		background: url('../images/schliessen_over.png') no-repeat;
	}


}