/*------------------- Stylesheet Architekturbuero Kolbe -------------------*/



/*
	* @author:			Nino Bach
	* @subpackage: 		kolbe-architektur
	* @link:			https://www.kolbe-architektur.de
	* @copyright:		Architekturbüro Kolbe
	* @date:			22.08.2014
	*
	* Kolbe Architektur Website
	* Copyright (C) Ernst Paul Kolbe
*/




* { padding:0; margin:0;
}
.clear {clear:both;}


body {
			font: 0.85em Arial, Verdana, Helvetica, sans-serif;
    		line-height: 17px;
			color: #454344;
			margin-bottom: 20px;	
}

#background {
			background-color: #fff;
			width: 50%;
			margin: 20px auto;
}

#main_wrapper{  /* NEU 2014 */
			background-color: #fff;
			width: 100%;
			height: auto;
			float: left;
			margin: 15px auto;
			-webkit-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.4); /* WebKit */
			-moz-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.4); /* Firefox */
			box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.4); /* Standard */ 
			padding-bottom: auto;
}

#inhalt {
         	width: 100%;
		 	height: auto;
		 	margin-top: 0px;
		 	margin-left: auto;
		 	margin-right: auto;
		 	margin-bottom: 0px;
		 	float: left;
}

#inhalt2 {
         	width: 100%;
		 	height: 100%;
		 	margin-top: 0px;
		 	margin-left: auto;
		 	margin-right: auto;
		 	margin-bottom: 0px;
		 	float: left;
}

h2 {
			font-size: 1.6em;
			text-align: left;
        	margin-top:15px;
        	padding-left:3.1%;
			margin-bottom: 10px;
			font-family: 'Jura', sans-serif;
}

h3 {
			color: #454344;
			font-size: 1em;
			font-style: normal;
			text-decoration: none;
}

a:link, a:visited {
			color: #fff;
			text-decoration: none;
}
a:hover {
			text-decoration: underline;
}

/*---------------------------- Navigation ------------------------------------*/

#naviwrap {
			width: 100%;
			text-align: right;
    		float: left;
			margin-bottom: 0px;
			margin-right: auto;
			margin-left: auto;
			margin-top: 40px;
			padding: 9px 0px 9px 0px;
			background-color: #454344;
}

#map {
			border:1px solid #cecbcb;
}






#naviwrap li {
    		display: inline;
			font-size: 1.2em;
			font-family: 'Jura', sans-serif;
            
}


#navi li {
    		 width: 10%;
            
}




#navi a span {
padding: 5px 22px 5px 22px;
           
}

#navi a:hover,
.item-active {
    color: #B9CB13;
}
#navi a:hover {
    text-decoration:none;
}

/*------------------- Sprache wird später ergänzt! -------------------*/

#lang {
			text-align: right;
			padding: 30px 35px 0px ;
			color: #FFF;
}

/*---------------------------- Homeseite -------------------------------------*/

#logo {
			width: 80%;
			height: auto;
			padding-top: 100px;
			padding-bottom: 102px;
   			margin: 0 auto;  
}

#logo2 {
			display: none;
}


#logo img {
			max-width: 100%;
			height: auto;
			margin-left: auto;
			margin-right: auto;
			display: block;
}

#footer {
			width: 100%;
			height: 20px;
			float: left;
}


/*---------------------- Aktuellseite -------------------------------*/

#aktuell1 {
			width: 45%; /* NEU */ 
         	height: auto;
         	padding-left:3.1%;
		 	padding-right: 2%;
		 	padding-bottom: 5px;
		 	padding-top: 5px;
      		float: left;
			text-align: justify;
}


#aktuell1 img{
			max-width: 100%; /* NEU */ 
         	height: auto;
         	
}




#aktuell1 h3 {
			
			text-align: left;
}

.aktuellbild1 {
			float: left;
         	margin: 10px 6px 10px 0px;
}

#aktuell2 {
			width: 44.7%; /* NEU */ 
        	height: 100%;
			padding-right: 3.2%;
			padding-left: 2%;
			padding-bottom: 5px;
			padding-top: 5px;
		   	text-align: justify;
      		float: left;
}

#aktuell2 h3 {
			
			text-align: left;
}

.aktuellbild2 {
	width: 100%;
	height: auto;
			margin-top: 5px;
   			margin-left: auto;
			margin-right: auto;
			padding-left: auto;
			padding-right: auto;
}

.aktuell2 img {
			max-width: 100%;
			height: auto;
			margin-right: auto;
			margin-left: auto;
}

.aktuellfakten {
			color:#4F4F4F;
			font-size: 1em;
			line-height:16px;
}

/*---------------------- Bueroseite -------------------------------*/

#buero1 {
		 	width: 44.5%;
         	height: auto;
         	padding-left:3.1%;
		 	padding-top: 10px;
      	 	float: left;
		 	text-align: justify;
		 	padding-right: 2.5%;
}

#bueroliste  ul {
         	list-style-image: url(../images/bulletlist.png);
         	margin: 36px 10px auto 15px;
}

#bueroliste li {
         	padding-bottom: 10px;
}

#buero2 {
			width: 44.7%;
        	height: auto;
			padding-right: 3.2%;
			padding-left: 2%;
			padding-top: 10px;
       		float: left;
			text-align: justify;
}

.buerobild {
			width: 100%;
			height: auto;
			margin-top: 14px;
}

.buerobildtitle {
			font-size:0.85em;
         	color:#7F7F7F;
         	float:right;
}

/*-------------------------------- Projektseite ----------------------------------*/


#projektspalte{
			width: 100%;
        	height: 100%;
}

#pfeile {
			width: 100%;
			height: 30px;
			float: left;
			text-align: center;
			padding-left: auto;
			padding-right: auto;
}

#projektpfeil1 {
			text-align: center;
         	margin-top:3px;
         	margin-left: auto;
		 	margin-right: auto;
		 	padding-left: 44.5%;
         	border:0px;
}

#projektpfeil2 {		
         	margin-top:3px;
		 	margin-left: auto;
		 	margin-right: auto;
         	text-align: center;
		 	padding-right: 44.5%;
		 	border:0px;	
}

/*---------------------------- Kontaktseite ---------------------------------*/

#anschriftrahmen /*linke Kontaktspalte*/ {
			width: 45%; /* NEU */ 
        	height: 100%;
       		padding-left:3.1%;
		 	padding-right: 3.1%;
		 	padding-bottom: 10px;
		 	padding-top: 10px;
      		float: right;
         	text-align: right;
}

#anschriftrahmen a:link, #anschriftrahmen a:visited {
         	color: #B9CB13;
}

#anfahrt {
			width: 100%;
			margin-bottom: 15px;
}

#anfahrt iframe{
			padding-left: auto;
			padding-right: auto;
}

#impressuml {
			text-align: right;
        	margin-top: 25px;
			font-size: 0.9em;
}


/*----------------------------PHP Kontaktformular--------------------------*/

#phpformular /*rechte Kontaktspalte*/ {
		 	width: 45%; /* NEU */ 
         	height: auto;
         	margin-left:3.1%;
      		float: left;
			margin-top: 10px;
		    font: 1em Arial, Verdana, Helvetica, sans-serif;
}

label {
			width: 33%;
			height: auto;
			float: left;
			padding-top: -10px;
			padding-bottom: 15px;
}

.eingabefeld {
	 		width: 55%;	
			float: right;
			margin-right: 0;
       		margin-bottom: 10px;
        	padding: 2px;
			border:1px solid #cecbcb;
       	    color:#4F4F4F;
            font: 0.9em Arial, Verdana, Helvetica, sans-serif;
}

.eingabefeld2 {
	 		width: 55%;	
			height: 100px;
			float: right;
			margin-right: 0;
       		margin-bottom: 5px;
        	padding: 2px;
			border:1px solid #cecbcb;
       	    color:#4F4F4F;
            font: 0.9em Arial, Verdana, Helvetica, sans-serif;
}

.button {
			width: 57%;
			border: 0px;
			float: right;
			color:#fff;
			background-color:#454444;
			padding: 3px;
			margin-top: 10px;
   			margin-right: 0;
            cursor:pointer;
}


    .akzeptieren{
        
        color: #4f4f4f;
        width: 100%;
        margin-left: 0px;
        margin-right: 0%;
        margin-top: 5px;
        margin-bottom: 15px;            
        background-color: #fff; /* Hintergrund transparent */ 
        text-align: justify;    
        font-size: 0.875em; /* 13.5px */
        float: left;
        padding-top: 5px;
        padding-right: 20px;
        padding-bottom: 5px;
        padding-left: 0px;
        
    }

.akzeptieren p, .textrightrab ul{
        color: #4f4f4f;
        }
.akzeptieren ul {
        list-style: inside none disc;
        margin: 10px 20px;
        }
        
.akzeptieren a{
        color: #B9CB13;
        }
        
        

.button:hover {
        	
			background-color:#b7cb12;
			/*background-color:#bdf400;*/
			color: #454444;
			opacity:1.0;
			filter:alpha(opacity=100);/*position where      
			enlarged image should offset horizontally */
			-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all 0.5s ease-in-out;
			-o-transition: all 0.5s ease-in-out;
			transition: all 0.5s ease-in-out;
		
}




/*-------------------------------- Impressum ----------------------------------*/

#impressum {
    		width: 100%;
			height: auto;
    		overflow: auto;
}

#impressum a:link, #impressum a:visited {
         	color: #454344;
}

#copyrights1{
			width: 94%; /* NEU */ 
         	height: auto;
         	padding-left: 3%;
		 	padding-right: 3%;
		 	padding-bottom: 10px;
		 	padding-top: 10px;
      		float: left;
			text-align: justify;
}




/*---------------------------------------------------------------------------------*/

.filme{
			width: 100%;
			float: left;
}
		
.videothumb{
			width: 28.33%;
			float: left;
			padding-left: 2.5%;
			padding-right: 2.5%;
			padding-top: 1%;
			padding-bottom: 2%;
}
			
.videothumb img{
			width: 100%;
			float: left;
			-webkit-transition: opacity 0.2s ease-in-out;
			-moz-transition: opacity 0.2s ease-in-out;
			-o-transition: opacity 0.2s ease-in-out;
			-ms-transition: opacity 0.2s ease-in-out;
			transition: opacity 0.2s ease-in-out;
			display: block;
    		margin-left: auto;
    		margin-right: auto;
			border: 3px solid #FFF;
			-webkit-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2); /* WebKit */
			-moz-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2); /* Firefox */
			box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2); /* Standard */ 
}

.videothumb img:hover{
		
			border: 3px solid #bdf400;
			
}


.videothumb p{
			width: 100%;
			height: 20px;
			padding-top: 7px;
			padding-bottom: 4px;
			float: left;
			text-align: center;
    		padding-left: auto;
    		padding-right: auto;
			font: 0.95em Arial, Verdana, Helvetica, sans-serif;
			
			
}


/*---------------------------- 14. MEDIA QUERIES ------------------------------------*/

@media only screen and (max-width : 1500px),
only screen and (max-device-width : 1500px){
	
	#background {
			width: 65%;
	}
}

@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
	
	#background {
			width: 85%;
	}
}

@media only screen and (max-width : 768px),
only screen and (max-device-width : 768px){
	
	#aktuell1 {
			width: 90%;
			padding-left: 5%;
			padding-right: 5%; 
	}

	#aktuell2 {
			width: 90%;
			padding-left: 5%;
			padding-right: 5%;
	}
 
	#buero1 {
		 	width: 90%;
         	height: 100%;
         	padding-left: 5%;
		 	padding-right: 5%;
		  	padding-top: 10px;
      	 	float: left;
		 	text-align: justify;
	}
	
	#bueroliste  ul {
         	list-style-image: url(../images/bulletlist.png);
         	margin: 36px 10px auto 15px;
	}
	
	#bueroliste li {
         	padding-bottom: 10px;
	}

	#buero2 {
			width: 90%;
        	height: 100%;
			padding-right: 5%;
			padding-left: 5%;
			padding-top: 10px;
       		float: left;
			text-align: justify;
	}

	h2 {
			padding-left:5%;
	}

	#anschriftrahmen {
			width: 88%; /* NEU */ 
         	height: auto;
       		padding-left: 6%;
		 	padding-right: 6%;
		 	padding-bottom: 0px;
		 	padding-top: 0px;
      		float: left;
         	text-align: center;
	}

	#anschriftrahmen2 {
			width: 99%;
			margin-left: auto;
			margin-right: auto;
			padding-top: 8px;
			padding-bottom: 8px;
		 	border:1px solid #cecbcb;
	}

	#phpformular {
		 	width: 93.5%; /* NEU */ 
         	height: 100%;
         	margin-left:4%;
		 	margin-right: 4%;
      		float: left;
			padding-top: 50px;
        	font: 1em Arial, Verdana, Helvetica, sans-serif;
	}

	label {
			padding-left: 2.5%;
			padding-bottom: 5px;
			padding-top: 0px;
			padding-bottom: 15px;
	}

	.eingabefeld {
	 		width: 92%;	
			margin-left: 4%;
			margin-right: 4%;
	}

	.eingabefeld2 {
	 		width: 92%;	
			margin-left: 4%;
			margin-right: 4%;
	}

	.button {
			width: 93.5%;
			margin-left: 4%;
			margin-right: 4%;
	}
    
	#anfahrt {
			margin-top: 0px;
	
	}

	#impressuml {
			text-align: center;
    }
	
}

@media only screen and (max-width : 640px),
only screen and (max-device-width : 640px){

	.videothumb{
			width: 36%;
			float: left;
			padding-left: 6%;
			padding-right: 8%;
			padding-top: 1%;
			padding-bottom: 2%;
	}
			
		.videothumb img{
			width: 100%;
			float: left;
			opacity: 1;
			-webkit-transition: opacity 0.2s ease-in-out;
			-moz-transition: opacity 0.2s ease-in-out;
			-o-transition: opacity 0.2s ease-in-out;
			-ms-transition: opacity 0.2s ease-in-out;
			transition: opacity 0.2s ease-in-out;
			display: block;
    		margin-left: auto;
    		margin-right: auto;
			border: 3px solid #FFF;
			-webkit-box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.4); /* WebKit */
			-moz-box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.4); /* Firefox */
			box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.4); /* Standard */ 
	}

		#projektpfeil1 {/* eins rechts*/
			 padding-left: 39%;
    }

		#projektpfeil2 {/* zwei links*/
			padding-right: 39%;
	}

}

@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){


		#background {
			margin: 20px auto;
	}

		#main_wrapper{  /* NEU 2014 */
			margin-top: 20px;
			margin-bottom: 50px;
			margin-left: auto;
			margin-right: auto;
	}

		#naviwrap {
			width: 78%;
			text-align: center;
    		float: left;	
			margin-right: 11%;
			margin-left: 11%;
			padding: 0px 0px 0px 0px;
			margin-top: 30px;
		
	}

		#naviwrap li {
			width: 100%;
    		display: block;
			text-align: center;
			padding-top: 10px;
			padding-bottom: 10px;
			border-bottom: 2px solid #fff;
			
	}

		#naviwrap li:last-child  {
			border-bottom: none;
	}

		#navi a {
      		width: 100%;
			
	}

		#navi li a {
			width: 100%;
			
				
	}
	
		#navi a span {
			margin-left: auto;
			margin-right: auto;
	}

		#logo {
			display: none;
	}

		#logo2 {
			display: block;
			width: 95%;
			height: auto;
			padding-top: 25px;
			margin: 0 auto;  
	}

		#logo2 img {
			max-width: 100%;
			height: auto;
			margin-left: auto;
			margin-right: auto;
			display: block;
	 }

		h2 {	
			background-color: #454344;
		    color:#fff;
         	margin-top:20px;
		 	padding-top: 8px;
		 	padding-bottom: 8px;
	}
	
}

@media only screen and (max-width : 400px),
only screen and (max-device-width : 400px){

		.videothumb{
			width: 88.5%;
			float: left;
			padding-left: 5%;
			padding-right: 6.5%;
			padding-top: 1%;
			padding-bottom: 4%;
	}
			
		.videothumb img{
			width: 100%;
			float: left;
			opacity: 1;
			-webkit-transition: opacity 0.2s ease-in-out;
			-moz-transition: opacity 0.2s ease-in-out;
			-o-transition: opacity 0.2s ease-in-out;
			-ms-transition: opacity 0.2s ease-in-out;
			transition: opacity 0.2s ease-in-out;
			display: block;
    		margin-left: auto;
    		margin-right: auto;
			border: 3px solid #FFF;
			-webkit-box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.4); /* WebKit */
			-moz-box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.4); /* Firefox */
			box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.4); /* Standard */ 
	}

		#projektpfeil1 {/* eins rechts*/
			padding-left: 37%;
	}

		#projektpfeil2 {/* zwei links*/
			padding-right: 37%;
	}

}