/* 
Bürogemeinschaft Tedesco & Bruns
 
mike lang
10.2023

*/


html { overflow-y: scroll; }

html,
body { margin: 0; padding: 0; width: 100%;  }

#page { margin: 0 auto 0 auto; }

#wrapper { margin: 0 auto 0 auto; min-height: 200px; }

#header_wrapper { position: fixed; top: 0; left: 0; right: 0; z-index: 10; width: 100%; }



/* header on scroll hide & show */
#header_wrapper.headroom {
-webkit-transition: -webkit-transform 0.2s ease-in-out;
   -moz-transition:    -moz-transform 0.2s ease-in-out;
     -o-transition:      -o-transform 0.2s ease-in-out;
        transition:         transform 0.2s ease-in-out;

       will-change: transform;/* https://developer.mozilla.org/de/docs/Web/CSS/will-change */
}

#header_wrapper.headroom--pinned { 
  -webkit-transform: translateY(0); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
      -ms-transform: translateY(0); /* IE 9 */
       -o-transform: translateY(0);
          transform: translateY(0); /* IE 10, Fx 16+, Op 12.1+ */
}

#header_wrapper.headroom--unpinned { 
  -webkit-transform: translateY(-100%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
      -ms-transform: translateY(-100%); /* IE 9 */
       -o-transform: translateY(-100%);
          transform: translateY(-100%); /* IE 10, Fx 16+, Op 12.1+ */
 }


#header { margin: 0 auto 0 auto; height: auto; position: relative; background-color: white; }


#header_bg {  /* background-color: fuchsia; */ }




#ie_warning { color: black; background-color: #f1f1f1; width: 100%; margin-top: 40px; padding: 10px; border: solid 1px #e64e28; }

noscript h3 { color: rgb(241,95,30); font-size: 17px; line-height: 1.5em; position: absolute; z-index: 200; margin-top: 150px; margin-left: 30px; padding: 5px; }

#logo {  display: inline-block; /*background-color: rgba(0,0,0,.05);*/  }

#logo a { display: inline-block; }

.logo_img 	{ display: inline-block; background-image: url(../images/logo_anwaltshaus_donzdorf.svg); background-size: contain; }




#meta { display: inline; float: right; text-align:right; }


#sprache { margin: 20px 0 0 0; display:block; line-height: 1.6em; }

#sprache a, 
#sprache span { font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; font-weight: 400; text-transform: uppercase; color: rgba(255,255,255,1); margin: 10px 10px 0 10px; padding-top:2px; }

#sprache span { color: rgba(255,255,255, .4); }
#sprache a:hover { color: rgb(95,154,255); }

#nav_meta { display: inline-block; font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; font-style: normal; font-weight: 300; }


#content { min-height: 400px; }

#center 	{ margin: 0 auto 0 auto; }




#footer { width: 100%; margin: 50px 0 0 0; line-height: 140%; }






#footer_icons #footer_color { padding: 10px; }
#footer_icons .col3 { margin: 0 0 10px 10px; width: calc(33% - 10px); font-size: 1.6em; vertical-align:bottom; }
#footer_icons .col3 span { margin: 0 0 0 15px; font-size: 16px; vertical-align:bottom;  }
#footer_icons .col3 span a { color: white; }

#footer_icons .container { display: table; }
.footer_icons_row { display: table-row; }
#footer_icons .container .col3 { display: table-cell; width: 33%;  font-size:1.6em; text-align: center; }
#footer_icons .container .col3 .fab span { margin: 0 0 0 15px; font-size:16px; font-weight: 400; vertical-align: middle; font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;}



#footer_end { padding: 40px 0 100px 0;}
#footer_content { font-size: .9em;  }
#footer_content::after { font-size: 8px; margin: 0 10px 0 0;  text-align: right; } /* die angaben zum device: desktop, ipad, iphone */



.footer_table { display: block; width: 100%; }
.footer_row { display: flex; width: 100%; }
.footer_row .col3 { display: inline-block; vertical-align: top; width: calc(33% - 10px); background-color: /*rgba(255,255,255, .2)*/ rgba(0,0,0,.2); padding: 20px 15px 25px 20px; margin: 0 5px 0px 5px; border-radius: 8px; }




#footer_copywrite { margin: 30px 10px 0 0; text-align: right; }
#footer a,
#footer_firma,
#footer_str,
#footer_ort,
#footer_copywrite { color: white; }
#footer .rex-navi1 ul { margin: 0 0 0 10px; }













/* Smartphones */
@media only screen and (min-width: 320px) { 
	
	#logo 	{ width: auto; }
	.logo_img { width: 230px; height: 35px; margin: 25px 0 10px 20px; }

	#header #logo a { padding: 0; }

	#wrapper, #header, #footer_content { width: 100%; }

	#wrapper {/* header_wrapper height */padding: 78px 0 0 0; }
	
	#content { padding: 0 10px 0 10px;}
	
	#content,
	.container { width: 100%; }
	
	#footer_content 				{ width: 100%; margin-top:0; padding: 0 10px 30px 10px; }
	#footer_content .txt-img 	{ margin-left:0; display: inline; }
	
	/* nur hier, denn: slideshow safari läuft stockend wenn blur u unblur nicht zurückgesetzt, bzw: verwendet werden */
	.unblur { 
		-webkit-filter: blur(0); 
		filter: blur(0); 
		transition: 0.1s filter linear;
		-webkit-transition: 0.1s -webkit-filter linear;
	}

	.blur { 
		-webkit-filter: blur(5px); 
		filter: blur(5px); 
		transition: 0.1s filter linear;
		-webkit-transition: 0.1s -webkit-filter linear;
	}
	.cc-revoke, .cc-window {min-height: 124px;}
	.footer_row { display: block; }
	.footer_row .col3 { display: block; width: 100%; margin: 0 0 10px 0; }


	#footer_content:after	{ content: 'Smartphone small > 320px'; }
	
	#footer_icons .col3 { margin: 0 0 10px 10px; width: calc(33% - 10px); font-size: 1.2em;  }
	#footer_icons .col3 span { display: none; }
	

}



/* Smartphones (large z.B iphone 6 quer od ipad portrait) */
@media only screen and (min-width:667px) {

	
	#logo 	{ /*width: auto; display: block; float:left;*/  }
	.logo_img 	{ width: 350px; height: 50px; margin: 25px 0 10px 20px; }
	#header #logo a { padding: 0; }

	#wrapper { width: 100%; /* header_wrapper height */padding: 88px 0 0 0; }
	
	#content { padding: 0 20px 0 20px;}
	#content,
	.container { width: 100%; }
	
	#footer_content				{ width: 100%; padding: 0 20px 0 20px;}
	
	#footer_content .txt-img 	{ margin-right: 10px; margin-top:0; display: inline-block;  vertical-align: middle; }
	#karte 							{ width: 200px; height: 200px; margin-left:0; margin-top:0; display: inline-block; vertical-align: middle; }
	.cc-revoke, .cc-window {min-height: 125px;}

	.footer_row { display: flex; }
	.footer_row .col3 { display: inline-block; /*width: calc(33% - 10px);*/ width: 33%; margin: 0 5px 0px 5px; }


	#footer_icons .container .col3 { display: inline-block; width: 30%; text-align: center; }
	#footer_icons .col3 span { display: none; }
	#footer_content:after { content: 'Smartphones large > 667px & ipad portrait'; }
}
	
	
/*styles for 1024px and up, u.A. ipad landscape */
@media only screen and (min-width: 1024px){


	#logo 	{ /*width: auto; float: none; */}
	.logo_img 	{ width: 370px; height: 40px; margin: 25px 0 10px 0; }
	#header #logo a { padding: 5px 0 10px 20px; }

	#wrapper, #header, #header_logo_meta { width: 100%; }
	#wrapper { /* header_wrapper height */ padding: 160px 0 0 0; }
	
	#content { padding: 0 20px 0 20px;}
	#content,
	.container { width: 100%; }
	#footer_content 	 { width: 100%; margin: 0 auto 0 auto;  }
	
	
	#footer_content { width: 100%; margin-top:0; padding: 0 20px 0 20px; }
	.cc-revoke, .cc-window {min-height: 123px;}
	#footer_icons .container .col3 { display: table-cell; width: 33%;  }
	
	#footer_icons .col3 { margin: 0 0 10px 10px; width: calc(33% - 10px); font-size: 1.6em; }
	#footer_icons .col3 span { /*display:inherit;*/ margin: 0 0 0 15px; font-size: 16px;  }
	
	#footer_content:after { content: 'desktop > 1024px oder ipad landscape'; }
}
	
	
/*styles for 1200px and up */
@media only screen and (min-width: 1200px){


	#header_logo_meta 	{ width: 70%; margin: 0 auto 0 auto; display: block; }	
	.logo_img 	{ width: 550px; height: 70px; margin: 25px 0 10px -5px; }
	#header #logo a { padding: 0; }

	#header { display: block; }
		
	#wrapper, #header { width: 100%; }	
	#wrapper { padding: 158px 0 0 0;} /* header_wrapper height */

	#content { width: 100%; padding: 0; }
	.txt-img,
	#footer_content,
	.container 	 { width: 70%; margin: 0 auto 0 auto;  }
	
	#footer_content { padding: 0 0 0 0;}

	.cc-revoke, .cc-window {min-height: 133px;}
	
	#footer_content:after	{ content: 'desktop > 1280px'; }
	

}

@media only screen and (min-width: 1600px){
	#header_logo_meta 	{ width: 60%; margin: 0 auto 0 auto;  }
	
	#header #logo a { padding: 0; }
	#wrapper { padding: 158px 0 0 0;  }

	.txt-img,
	#footer_content,
	.container { width: 60%; margin: 0 auto 0 auto;  }

	#footer_content { padding: 0 0 0 0;}
	.cc-revoke, .cc-window {min-height: 148px; }
	
	#footer_content:after	{ content: 'desktop > 1600px'; }	
}


@media only screen and (min-width: 2000px){
	#header_logo_meta 	{ width: 50%; margin: 0 auto 0 auto;  }

	.txt-img,
	#footer_content,
	.container { width: 50%; margin: 0 auto 0 auto;  }

	#footer_content:after	{ content: 'desktop > 2000px'; }	
}