/* CSS Document */

/* ################################################################## */
/* HTML Standard Tags */
/* ################################################################## */

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

h2 { text-transform:uppercase; text-align:center; margin:100px auto 0 auto; font-size:30px;text-shadow: 0 0 10px #ff9900;}
.ud_h2_balken { margin:0 auto 10px auto; height:5px; width:80px;}
.ud_h3_balken { margin:0 auto 20px auto; height:5px; width:80px;}

.ud_button { text-transform:uppercase; padding:10px 30px 10px 30px; display:inline-block; margin:10px 0 20px 0;}

a { text-decoration:none;}

/* ################################################################## */
/* Zusammengefasste Klassen */
/* ################################################################## */

footer, header, #Startseite .ud_h2_balken, #Kontakt .ud_h2_balken, #UberUns, #Leistungen, #Leistungen .ud_leistungen ul li .ud_tag_line .ud_h3_balken
{ background:#fff;}

.ud_page
{ background:#444444;}

#Kontakt h2, #Startseite h2, #Startseite p, #Startseite .ud_button, #Kontakt .ud_kontakt, #Kontakt .ud_kontakt a, #UberUns .ud_motto_bg article .ud_motto, #Leistungen .ud_leistungen ul li .ud_tag_line h3, #Leistungen .ud_leistungen ul li .ud_tag_line p
{ color:#fff;}

p, a, header nav ul li a, header nav ul li, header #ud_kontakt_icon .ud_kontakt_icon
{ color:#999;}

footer, footer a
{ color:#666;}

#UberUns h2, #Leistungen h2, header nav ul li a:hover, header #ud_kontakt_icon .ud_kontakt_icon:hover
{ color:#111;}

#UberUns .ud_h2_balken, #Leistungen .ud_h2_balken
{ background:#111;}

p, header nav ul li, .ud_button, footer , #Kontakt .ud_kontakt
{font-family:'Lato',sant-serif; font-weight:300; line-height:25px; word-spacing:3px;}

h2, #UberUns .ud_motto_bg article .ud_motto, #Leistungen .ud_leistungen ul li .ud_tag_line h3
{font-family:"alternate-gothic-no-1-d", Arial, sant-serif;}

header, header #ud_kontakt_icon, #ud_kontakt_icon .ud_kontakt_icon, header nav ul li a, header nav ul, header #ud_logo, header #ud_kontakt_icon .ud_kontakt_icon span
{ transition:all 300ms; -moz-transition:all 300ms; -ms-transition:all 300ms; -o-transition:all 300ms; -transition:all 300ms;}

/* ################################################################## */
/* Umfassende Objekte & Klassen */
/* ################################################################## */


.ud_page { width:100%; min-height:100%; overflow:hidden; float:left;}

/* ################################################################## */
/* Header */
/* ################################################################## */

header { position:fixed; z-index:99; top:0; left:0; right:0; width:100%; height:40px; border-bottom:1px solid #dfdfdf;}

header #ud_logo { float:left; width:200px; margin:9px 0 0 8px;}
header #ud_logo img { width:100%; height:auto;}

header #ud_kontakt_icon { float:right; width:72px; height:40px;}
header #ud_kontakt_icon .ud_kontakt_icon { font-size:12px; width:35px; height:40px; border-left:1px solid #dfdfdf; float:left; margin:0; padding:0;}

#Kontakt .ud_kontakt { width:100%; text-align:center;}
header #ud_kontakt_icon .ud_kontakt_icon span { display:block; margin:12px 0 0 8px; cursor:pointer;}

header nav { float:right; height:40px; margin:0; padding:0;}
header nav ul { margin:6px 8px 0 0; padding:0; }
header nav ul li { margin:0 10px 0 0; padding:0; list-style:none; float:left;}
header nav ul li a { text-transform:uppercase; font-size:11px;text-shadow: 0 0 10px #ff9900;font-weight:bold;}

/* ########Menue - Hover### */

		@media screen and (min-width : 800px)  {
			header:hover { height:70px; }
			header:hover > #ud_logo { width:300px; margin:15px 0 0 20px;}
			header:hover > #ud_kontakt_icon { width:142px; height:70px;}
			header:hover > #ud_kontakt_icon .ud_kontakt_icon {width:70px; height:70px;}
			header:hover > #ud_kontakt_icon .ud_kontakt_icon span { margin:26px 0 0 26px; font-size:15px;}
			header:hover > nav ul { margin:26px 20px 0 0;}
			header:hover > nav ul li a { font-size:15px;}
			}

/* ################################################################## */
/* Startseite */
/* ################################################################## */

#Startseite { background:url(../images/startseite_bg.jpg); background-position:center center; background-size:cover; background-attachment: fixed;}
#Startseite #ud_intro { position:absolute; bottom:50px; left:50px; top:100px;}
#Startseite #ud_intro h2 { text-align:left; margin:0; font-size:100px; line-height:110px;}
#Startseite #ud_intro .ud_h2_balken { margin:10px 0 20px 0;}
#Startseite #ud_intro p { margin:0 0 20px 0; max-width:300px;}
#Startseite #ud_intro .ud_button { border:2px solid #fff;}

	@media screen and (max-width: 600px) {
		#Startseite #ud_intro { left:10%; width:80%;}
		#Startseite #ud_intro h2 { text-align:left; margin:0; font-size:40px; line-height:35px;}
		#Startseite #ud_intro p { max-width:300px; width:100%; text-align:justify;}
		}
		
	@media screen and (min-device-width : 320px) and (max-device-width : 480px)  {
		#Startseite #ud_intro { left:10%; width:80%;}
		#Startseite #ud_intro h2 { text-align:left; margin:0; font-size:20px;}
		#Startseite #ud_intro p { max-width:300px; width:100%; text-align:justify;font-size:14px;line-height:15px;}
		}


/* ################################################################## */
/* Ãœber uns */
/* ################################################################## */

#UberUns .ud_UberUns { width:42.5%; float:left; margin:50px 2.5% 0 5%;}
#UberUns .ud_UberUns:last-child { width:42.5%; float:left; margin:50px 5% 0 2.5%;}
#UberUns .ud_UberUns article { width:100%; text-align:center; }

#UberUns .ud_motto_bg { background:url(../images/uber_uns.jpg); background-position:center center; background-size:cover; background-attachment: fixed;}
#UberUns .ud_motto_bg p {font-size: 30px;line-height:35px;color: white;margin-top: 30px;margin-right: 25px;margin-left: 25px;margin-bottom: 50px;}
#UberUns .ud_motto_bg article .ud_motto { display:inline-block;font-weight:bold; margin:50 auto 50 auto; width:40%; text-align:center; font-size:30px; line-height:45px; text-transform:uppercase;text-shadow: 0 0 10px #ff9900;}
#UberUns .ud_motto_Zitat{font-size: 15px;margin-top: 50px;}
#UberUns .ud_UberUns article h3 { text-align:center;font-size:30px; line-height:32px; margin:20 auto 35px auto;color: white}
		
	@media screen and (max-width: 1100px) {
		#UberUns .ud_UberUns article p { text-align:justify;}
		#UberUns .ud_UberUns { width:80%; float:left; margin:50px 10% 0 10%;}
		#UberUns .ud_UberUns:last-child { width:80%; float:left; margin:50px 10% 0 10%;}
		#UberUns .ud_UberUns article { margin:20px 0 0 0;}
		#UberUns .ud_motto_bg article .ud_motto { font-size:45px; line-height:50px; width:70%; margin:30px 0 30px 0;}
		/*#UberUns .ud_UberUns article { border: green 5px solid; }*/
		#UberUns .ud_UberUns article h3 { text-align:center;font-size:30px; line-height:32px;color: white;margin:30px 0 30px 0;}
	}

	@media screen and (min-width: 1600px) {
		#UberUns .ud_motto_bg p {font-size: 100px;line-height:35px;color: white;margin-top: 30px;margin-right: 25px;margin-left: 25px;margin-bottom: 50px}
		#UberUns .ud_motto_bg article .ud_motto { font-size:80 px; line-height:90px; width:70%;}
		#UberUns .ud_UberUns article p { width:70%; font-size:18px; line-height:22px; margin:0 auto 35px auto;}
		#UberUns .ud_UberUns article h3 { text-align:center;font-size:30px; line-height:32px; margin:20 auto 35px auto;color: white;margin:30px 0 30px 0;}
	}
	
	@media screen and (max-width: 480px) {
		#UberUns .ud_UberUns article h3 {text-align: center;font-size: 15px;line-height: 20px;margin: 20 auto 35px auto;color: white;
		margin-top: 30px;margin-right: 10px;margin-left: 10px;	margin-bottom:30px;10}
		#UberUns .ud_motto_bg article .ud_motto {text-align:center;font-size:15px; line-height:20px;}
	}


/* ################################################################## */
/* Leistungen */
/* ################################################################## */
#Leistungen {background-color: #fff;}
#Leistungen .ud_leistungen { width:90%; margin:50px auto 0 auto; }
#Leistungen .ud_leistungen ul { width:100%; height:100%; margin:0; padding:0;}
#Leistungen .ud_leistungen ul li {position: relative;list-style: none;width: 28%;margin: 2% 2% 0 0%;float: left;background-position: left bottom;background-size: cover;background-attachment: fixed;border: #ff9900 5px solid;}
.Tueren_Fenster { width:10%; margin:50px auto 0 auto; }
	
#Leistungen .ud_leistungen ul li .ud_tag_line { background-color: #2F2929;opacity: 0.9;padding: 10px} 									
#Leistungen .ud_leistungen ul li .ud_tag_line .ud_h3_balken { margin:0 0 10px 0;}
#Leistungen .ud_leistungen ul li .ud_tag_line p { margin:0; padding:0;text-shadow: 0 0 10px #ff9900;} 
#Leistungen .ud_leistungen ul li .ud_tag_line h3 { text-transform:uppercase; font-size:30px; margin:0 0 10px 0;text-shadow: 0 0 10px #ff9900;} 
					/* ############### 1.te reihe#################### */
#Leistungen .ud_leistungen ul li.Tueren_Fenster { background:url(../images/tuer_fenster.jpg);background-position: top;background-repeat:no-repeat;max-height: 470px;}
#Leistungen .ud_leistungen ul li.Nurglas_Gelaender { background:url(../images/Nurglas_Gelaender.jpg);background-position: top;background-repeat:no-repeat;max-height: 470px;}
#Leistungen .ud_leistungen ul li.ueberdachung_Wintergarten { background:url(../images/ueberdachung_Wintergarten.jpg);background-position: top;background-repeat:no-repeat;max-height: 470px;}
					/* ############### 2.te reihe#################### */
#Leistungen .ud_leistungen ul li.kreative_Ecke { background:url(../images/kreativ.jpg);background-position: top;background-repeat:no-repeat;max-height: 470px;}
#Leistungen .ud_leistungen ul li.Innenverglasung { background:url(../images/Innenverglasung.jpg);background-position: top;background-repeat:no-repeat;max-height: 470px;}
#Leistungen .ud_leistungen ul li.Faltsysteme {	background: url(../images/Faltsysteme.jpg);	background-position: top;background-repeat: no-repeat;	max-height: 470px;
}
	
	@media screen and (max-width: 1150px) {
		#Leistungen { width:100%;}
		#Leistungen .ud_leistungen ul li .ud_tag_line { position:relative; float:left; width:90%; margin:20% 10% 5% 0%;background-color: #2F2929;opacity: 0.7;padding-top: 5%;padding-right: 5%;padding-left: 5%;padding-bottom: 5%}
		#Leistungen .ud_leistungen ul li .ud_tag_line h3 { font-size:45px; line-height:45px;}
		#Leistungen .ud_leistungen ul li .ud_tag_line p { margin:0; padding:0; float:left; text-align:justify;}
		#Leistungen .ud_leistungen ul li {  width:80%; margin:0 10% 5% 10%; }
		#Leistungen .ud_leistungen ul li:last-child { margin:0 10% 5% 10%;}
	}
	
	@media screen and (max-width: 600px) {
		#Leistungen { width:100%;}
		#Leistungen .ud_leistungen ul li .ud_tag_line { position:relative; float:left; width:90%; margin:30% 10% 5% 0;background-color: #2F2929;opacity: 0.7;padding-top: 5%;padding-right: 5%;padding-left: 5%;padding-bottom: 5%}
		#Leistungen .ud_leistungen ul li .ud_tag_line h3 { font-size:25px; line-height:30px;}
		#Leistungen .ud_leistungen ul li .ud_tag_line p { margin:0; padding:0; float:left; text-align:justify;}
		#Leistungen .ud_leistungen ul li {  width:80%; margin:0 10% 5% 10%; }
		#Leistungen .ud_leistungen ul li:last-child { margin:0 10% 5% 10%;}
	}
	
		@media screen and (max-width: 480px) {
		#Leistungen .ud_leistungen ul li .ud_tag_line {position: absolute;top: -40px;width: 90%;left: 0px;right: 0px;background-color: #2F2929;opacity: 0.7;padding-top: 5%;padding-right: 5%;padding-left: 5%;padding-bottom: 5%}
		#Leistungen { width:100%;}
		#Leistungen .ud_leistungen ul li .ud_tag_line h3 { font-size:15px; line-height:20px;}
		#Leistungen .ud_leistungen ul li .ud_tag_line p { margin:0; padding:0; float:left; text-align:justify;}
		#Leistungen .ud_leistungen ul li:last-child { margin:0 10% 5% 10%;}
	}

/* ################################################################## */
/* Kontakt */
/* ################################################################## */

#Kontakt {position: relative;background:url(../images/kontakt_bg.jpg);background-position: center center;background-size: cover;background-attachment: fixed;top:50px;}

#Kontakt .ud_kontakt ul { margin:100px 0 0 0; padding:0;transform: perspective(600px) rotateX( 30deg );}
#Kontakt .ud_kontakt ul li { margin:0 0 15px 0; padding: 0px 0px 0px 100px; list-style:none; font-size:35px; font-weight: bold;text-shadow: 0 0 10px #ff9900;}
#Kontakt .ud_kontakt ul li a { text-decoration:underline;}

#Kontakt footer { position:absolute; bottom:0; left:0; width:100%; height:150px; text-align:center; padding:0px 0 0 0; font-size:10px;}
#Kontakt footer .ud_logo { width:100%;}
#Kontakt footer .ud_logo img { width:130px; height:auto;}
#Kontakt footer #ud_copyright { margin: -10px 0 0 0; padding:0;}
#Kontakt footer #ud_meta_nav { margin:20px 0 0 0;}
#Kontakt footer #ud_meta_nav ul { margin:0; padding:0;}
#Kontakt footer #ud_meta_nav ul li { margin:0; padding:0 2px 0 2px; list-style:none; display:inline; border-right:1px solid #666;}
#Kontakt footer #ud_meta_nav ul li:last-child { border:none;}

	@media screen and (max-width: 480px) {
		#Kontakt .ud_kontakt ul {transform: perspective(600px) rotateX( 30deg );height: 500px;}
		#Kontakt .ud_kontakt ul li {font-size: 20px;}
	/*	#Kontakt .ud_kontakt ul li {margin: 0 0 0 0;	max-width: 300px;width: 100%;text-align: center;font-size: 15px;}*/
		#Kontakt footer { height:110px; padding:20px 0 0 0;}
		#Kontakt footer #ud_meta_nav  { margin:0;}
	}