/* CSS Document */

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

body, php, html{margin:0; padding:0; height:100%; width:100%; font-family: 'Roboto', sans-serif;}
 
 h2{text-align:center; margin: 100px auto 20px auto; font-size:50px}
 
.ud_h2_balken{margin: -10px auto 10px auto; height: 8px; width: 80px}

.ud_button{ padding: 10px 30px 10px 30px; display:inline-block; letter-spacing:3px;}

a{text-decoration:none}

.ud_active{font-weight:bold}
/* ############################################################## */
/* Zusammengefasste Klassen */
/* ############################################################## */


/**############*/
/** Fraben*/
/**############*/

/*
{ background:#141414;}
/* dunklegrauer Hintergrund */

/*
{ background:#ffffff;}
/* weißer Hintergrund */


/*
{ background:#0097a1;}
/* türkiser Hintergrund */

/*
{ background:#191e22;}
/* graublauer Hintergrund */


#ud_dayNav nav ul li a
{ color:#ffffff;}
/* weiße Schrift */

header, header nav ul li a, footer nav ul li a, h2,header #ud_kontakt_icon .ud_kontakt_icon span
{ color:#989898;}
/* mausgraue Schrift */

/*
{ color:#005a5f;}
/* türkise Schrift */

/*
{color:#000000;}
/* schwarze Schrift */

footer #design,.ud_content_text, section .ud_content li .text p
{ color:#676767;}
/* mittelgraue Schrift */

/*
{ color:#313131;}
/* dunkelgraue Schrift */

 header nav ul li a:hover, .ud_active,header #ud_kontakt_icon .ud_kontakt_icon span:hover
{ color:#5b979b;}
/* helltürkis Schrift */



header, header #ud_kontakt_icon, header #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 800ms;-moz-transition: all 800ms; -mo-transition: all 800ms; -o-transition: all 800ms; -transition: all 800ms;}


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

header{position:fixed; z-index:1000; top:0; left:0; width:100%; height: 40px; border-bottom:none}

header #ud_logo {float:left;width: 200px; margin: 4px 0px 0px 20px}
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:  none;float:left;margin:0; padding:0; cursor: pointer}
header #ud_kontakt_icon .ud_kontakt_icon span{display:block; text-align:center; margin: 16px 0px 0px 0px}

header nav{float: right; height: 40px; margin:0; padding:0}
header nav ul{margin: 12px 8px 0px 0px ; padding: 0; height: 27px}
header nav ul li { margin: 0 20px 0 0; padding:0; list-style:none; float:left; height: 100%}
header nav ul li a{ text-transform:uppercase; font-size:12px}

header #ud_responsive_icon{position: absolute; right:0; height:100%; width:42px; overflow:hidden}
header #ud_responsive_icon span{ font-size: 36px;position: absolute; right:0; padding:2px 6px 2px 4px }
header #ud_responsive_icon .fa-bars{ top: 0}
header #ud_responsive_icon .fa-times{ top: -40px}

/* ############################################################## */
/* Tage-Navigation */
/* ############################################################## */

#ud_dayNav{z-index: 100;position: fixed; background: rgba(103,103,103,0.80); left: 0; top: 50%; transform: translateY(-50%); width: 50px;}
#ud_dayNav nav{ height: 100% ; width: 100%; margin: 0; padding: 0}
#ud_dayNav nav ul{ height: 100%; width: 100%; padding: 0; margin: 0}
#ud_dayNav nav ul li{height: 50px; width: 50px; list-style: none; margin: 0; padding: 0;transtion: all 800ms }
#ud_dayNav nav ul li:last-child{height: 50px; border: none}
#ud_dayNav nav ul li a{left: 25px; top: 25px; display: inline-block; transform:translate(-50%,-50%);font-size: 20px; position: relative; font-weight:600}
#ud_dayNav nav ul .ud_activeDay{color: #00EFFF}
#ud_dayNav nav ul .ud_activeDayLI{ background: rgba(103,103,103,1)}
#ud_dayNav nav ul li:hover>a{color:#00EFFF}
/* ############################################################## */
/* Tage */
/* ############################################################## */

.day{display: inline-block; height:auto; width: 100%}
section .ud_h2_balken{background:#989898}
section .ud_content{width:95%; height:auto; margin: 0 2.5%; padding: 0}
section .ud_content li{list-style: none;width: 50%;  float : left;margin: 20px 0;}
section .ud_content li img{max-width: 100%; max-height: 100%; position: relative; left: 50%;  transform:translate(-50%,0); }
section .ud_content li video{max-width: 100%; max-height: 100%; position: relative; left: 50%;  transform:translate(-50%,0); }
section .ud_content li .text{width: 650px; position: relative}
section .ud_content li .text p{ margin: 0; padding: 0; font-size: 22px; text-align:center;}
section .ud_content li .text p span{ font-size: 40px}
@media only screen and (min-width: 1500px){
	section .ud_content li{ height: 500px; }
	section .ud_content li img{top:50%; transform:translate(-50%,-50%);}
	section .ud_content li video{top:50%; transform:translate(-50%,-50%);}
	section .ud_content li .text{height: 480px; position: relative; left: 50%; top:50%; transform:translate(-50%,-50%);}
	section .ud_content li .text p{ position:relative; left: 50%; top: 50%; transform:translate(-50%,-50%)}
}

@media only screen and (max-width: 1500px) and (min-width: 700px){
	section .ud_content li{width:100%;	}	
	section .ud_content li img{max-height: 700px; max-width: 700px}
	section .ud_content li video{max-height: 700px; max-width: 700px}
	section .ud_content li .text{width: 90%; margin: 20px 5%}
	section .ud_content li .text p{ width: 80%; margin: 0 10%; }
}

@media only screen and (max-width: 700px){
	section .ud_content li{width:100%;	}	
	section .ud_content li .text{width: 90%; margin: 20px 5%}
	section .ud_content li .text p{ font-size: 16px; text-align:justify;}
}

/* ############################################################## */
/* beforeZela */
/* ############################################################## */
#beforeZela h2{font-size: 40px; text-align:left; margin: 150px 0 0 100px}
#beforeZela h3{font-size: 25px; margin: 50px 0 0 100px}
#beforeZela p{font-size: 18px; margin: 30px 0 30px 100px}
#beforeZela p a{text-decoration:underline; font-weight:600}
	
@media only screen and (max-width: 500px){
	#beforeZela h2{margin: 100px 0 0 50px}
	#beforeZela h3{font-size: 25px; margin: 50px 0 0 50px}
	#beforeZela p{font-size: 18px; margin: 30px 0 30px 50px}
}

/* ############################################################## */
/* Footer */
/* ############################################################## */
footer{height: 150px;width: 100%;float: left; overflow: hidden; padding: 20px 0 20px 0; text-align: center;font-size: 10px}
footer #ud_logo { width: 500px; margin: 10px auto 0px auto}
footer #ud_logo img{width:100%; height: auto}

footer #ud_meta_nav{margin: 20px 0 0 0}
footer nav ul{margin: 0; padding:0 }
footer nav ul li{margin: 0;padding: 0 10px 0 10px ;list-style: none; display: inline; border-right: 1px solid #989898}
footer nav ul li:last-child{border: none}

footer #design{font-size:12px; margin: 20px 0 0 0 }

	@media only screen and (max-width: 700px){
		footer #ud_logo { width: 300px; margin: 10px auto 0px auto}
		footer nav ul li{margin: 0;border-right:none; padding: 0; display: block}
	}