html{
	overflow:hidden;	
}
body{
	font-family: 'jura';
	font-weight: 400;
	font-style: normal;
	font-size: 25px;
	background-color: #272727;
	padding:25px;
	overflow:hidden;
}

#arbeitshow{
    position:absolute;
    width:960px;
    height: 800px;
    display:none;
    z-index:50000000;
    background-color:#474747;
    left:50%;
    margin-left:-480px;
    top:50%;
    margin-top:-400px;
    overflow:auto;
}

#arbeitclose{
    position:absolute;
    right:10px;
    top:5px;
    cursor:pointer;
    color:#FFFFFF;
    font-family:sans-serif;
    font-size:40px;
}
#arbeittitel{
    margin-top:10px;
    margin-left:10px;
    color:#FFFFFF;
    font-size:21px;
    width:calc(100% - 40px);
}
#arbeitbild{
    margin-left:10px;
    margin-top:10px;
    max-width: calc(100% - 10px);
}
#arbeittext{
    margin-left:10px;
    margin-top:10px;
    color:#FFFFFF;
    font-size:21px;
   width: calc(100% - 30px);
}

.blur{
    filter: blur(14px);
}


.aoheader{
	position:fixed;
	top:0px;
	left:0px;
	z-index:900001;
	height:75px;
	width:100%;
	background-color:#272727;
}

.aofooter{
	position:fixed;
	bottom:0px;
	left:0px;
	z-index:900001;
	height:60px;
	width:100%;
	background-color:#3a3a3a;
}

.toplogowrapper{
	position:absolute;
	left:20px;
	top:8px;
	height:56px;
}
.toplogo{
	height:56px;
}
.topnavwrapper{
	position:absolute;
	left:50%;
	top:18px;
	height:56px;
    width:960px;
    margin-left:-480px;
    display:block;
}
.bottomnavwrapper{
	position:absolute;
	right:20px;
	top:18px;
	height:56px;
	text-align:right;
	font-size:16px;
    display:block;
}
a.metanavpoint:link, a.metanavpoint:visited, a.metanavpoint:active, a.metanavpoint:hover{
	display:inline-block;
    color:#FFFFFF;
    text-decoration:none;
}

a.metanavpoint::before{
    content:" | ";
    color:#FFFFFF;
}

.socmed{
    width:150px;
    text-align:center;
    position:absolute;
    left:50%;
    margin-left:-75px;
    top:18px;
}

.bottomnavwrapper a:nth-child(1)::before{ content:""; }

.metanavpoint:hover{ text-decoration:underline; }

.navpoint{
	display:inline-block;
	height:25px;
	padding:6px;
	padding-left:14px;
	padding-right:14px;
	margin-left:10px;
	cursor:pointer;
	font-weight:300;
	font-size: 20px;
    color:#FFFFFF;
}
a.navpoint:link, a.navpoint:visited, a.navpoint:active, a.navpoint:hover{
    color:#FFFFFF; 
    text-decoration:none;    
}

a.is-active:link, a.is-active:visited, a.is-active:active, a.is-active:hover{
    text-decoration:underline;
    font-weight:600;
}

.navpoint:hover{ text-decoration:underline; }

.copyright,.copyright_small{
	position:absolute;
	left:20px;
	top:20px;
	font-size:16px;
    color:#FFFFFF;
}
.copyright_small{
	top:20px;
	font-size:14px;	
}

#burgermenu{
	position:absolute;
	right:0px;
	top:76px;
	height:0px;
	overflow:hidden;
	display:none;
	z-index:9000000001;
    background-color:#272727;
}


.divider{
	display:inline-block;
	margin-left:10px;
	margin-right:10px;
}

#contentholder{
	position:absolute;
	left:50%;
	top:77px;
	width:960px;
    margin-left:-480px;
	z-index:900000;
	overflow:auto;
    height:calc(100% - 200px);
    /*background-color:red;*/
	/*transition: all 0.5s ease-out;*/
}
#content{
	position:absolute;
	left:0px;
	width:calc(100% - 15px);
	top:10px;
	
	font-size:16px;
    line-height:26px;
    letter-spacing:1px;
    padding-left:0px;
    color:#FFFFFF;
	/*transition: all 0.5s ease-out;*/
}

.navline {
	width: 50px;
	height: 3px;
	margin: 0 0 5px 0;
	background-color:#FFFFFF;
	transition: all 0.5s ease-out;
}

#burgernav{
	position:absolute;
	right:20px;
	top:26px;
	cursor:pointer;
	transition: all 0.5s ease-out;
	display:none;
}

#burgernav.close {
	transform: rotate(180deg);
}

/* Styling the three lines to make it an X */
#burgernav.close .navline:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
	width: 25px;
}

#burgernav.close .navline:nth-child(2) {
	opacity: 0;
}

#burgernav.close .navline:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
	width: 25px;
	margin-top:-0.5px;
}

/* Kontaktformular */
.text_input{
	width:580px;
	height:30px;
	border:2px solid #FFFFFF;
	margin-bottom:20px;
	font-size:16px;
    background-color:#373737;
	transition: all 0.2s ease-out;
    color:#FFFFFF;
}

.kontakt_container{
	position:relative;
    width:580px;
}
.label{ margin-bottom:5px; }

.text_area{
	width:580px;
	height:160px; 
	border:2px solid #FFFFFF;
	margin-bottom:8px;
	font-size:16px;
	resize: none;
    background-color:#373737;
	transition: all 0.2s ease-out;
    color:#FFFFFF; 
}

.blue,.red{ color:#0099ff; }
.red{ color:red; }
.pink{ color:pink; }
.lightgreen{ color:#90EE90; }
.sb{
    font-size:28px;
}

.input_button{
	width:200px;
	text-align:center;
	border:2px solid #FFFFFF;
    background-color:#373737;
	cursor:pointer; 
}
.kontakt_senden{
    position:absolute;
	right:0px;
	top:5px;
}

.kontakt_bottom_wrapper{
	margin-top:8px;
	position:relative;
	width:586px;
}

a#contactmailto:link,a#contactmailto:visited,a#contactmailto:active,a#contactmailto:hover{ 
    color: #FFFFFF;
    text-decoration: underline;
}

.arbeitouter{
    display:inline-block;
    width:300px;
    height:300px;
    position:relative;
    background-repat:no-repeat;
    background-size:cover;
    cursor:pointer;
    transition: all 0.2s ease-out;
}

.arbeitwrapper{
    width:100%;
    height:100%;
    /*
    display:inline-flex;
    align-items: center;
    justify-content: center;
    */
    display:table;
}

.arbeittr{
    width:100%;
    height:100%;
    display:table-row;    
}

.arbeittd{
    width:100%;
    height:100%;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

.arbeitinner{
    display:inline-block;
    color:#FFFFFF;
    font-weight:bold;
    width:calc(100% - 50px);
    font-size:14px;
    background-color: rgba(0, 0, 0, 0.7);
    padding:10px;
    text-align:center;
}

.mm_hidden{
    display:none;
}

.intensify{
  filter:saturate(3);
  /* filter:contrast(1.5);*/
}


/* Accordeon */
.accordeon_arrow_down,.accordeon_arrow_left{
	display:inline-block;
	width: 0;
	height: 0;
	margin-top:10px;
	margin-left:5px;
	cursor:pointer;
	transition: all 0.2s ease-out;
}
.accordeon_arrow_down {
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 10px solid #666666;
}

.accordeon_arrow_left {
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent; 
  	margin-left:5px;
	margin-top:7px;
	border-left:10px solid #666666;
}

.accordeon{
	width:99%;
	height:30px;
	border:2px solid #CCCCCC;
	background-color:#F3F3F3;
	font-size:16px;
	margin-bottom:15px;
	cursor:pointer;
	transition: all 0.5s ease-out;
	position:relative;
}
.accordeon_header{
	position:absolute;
	left:25px;
	top:3px;
	font-size:16px;
}

/* Animation für den rotierenden Kreis */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Content allgemein */

#ititle{
	position:absolute;
	top:10px;
	left:54px;
}

#close{
	position:absolute;
	right:20px;
	top:0px;
	cursor:pointer;
	font-size:40px;
	z-index:200;
	color: #000000;
}
#close:hover{
	color: #0099ff;
}

#preloader_wrapper,#mailoader_wrapper{
	/* background-color:#f9ed37; */
	background-color:#ffff00;
	z-index:2000000000000000001;
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-position:center;
	background-size: cover;
	background-repeat:no-repeat;
}
#mailoader_wrapper{
    position:absolute;
    background-color: rgba(255,255,255,0.9);
    display:none;
}

/* Container für den Preloader */
.preloader-container {
	display: flex;
    justify-content: center;
	align-items: center;
    height:100%;
	/*height: 100vh;*/
	background-color: transparent; /* Hintergrund ist transparent */
}
/* Der kreisförmige Preloader */
.preloader {
	width: 150px;
	height: 150px;
	/*border: 10px solid #ccc; */
	
	
	border: 10px solid #f9ed37;
	border-top-color: #3498db;
	border-radius: 50%;
	animation: spin 2s linear infinite;
}

/* Desktop Navigation */
.klapp-navi ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    background-color: #272727;
    text-align:left;
}

.klapp-navi a {
  display: block;
  color: white;
  text-decoration: none;
  padding-bottom:15px;
  padding-top:15px;
  padding-right:20px;
  padding-left:0px;
  
  /*padding: 15px 0px;*/
}

.klapp-navi a:hover {
  background-color: #272727;
}

/* Dropdown-Menü verstecken */
.klapp-navi .dropdown-menu {
  display: none;
  position: absolute;
  background-color: #272727;
  z-index: 1;
  text-align:left;
}

/* Dropdown beim Hovern einblenden */
.klapp-navi .dropdown:hover .dropdown-menu {
  display: block;
  /*text-align:left;*/
  padding-bottom:20px;
}

/* Untermenü-Links untereinander anordnen */
.klapp-navi .dropdown-menu li {
  width: 400px; 
  text-align:left;
  display:block;
  height:45px;
}


@media only screen and (max-width: 600px) {

	body{
		font-family: 'jura';
		font-weight: 400;
		font-style: normal;
		font-size: 20px;
		background-color: #272727;
		padding:25px;
	}
    
    #contentholder{
        left:0px;
        top:77px;
        width:100%;
        margin-left:0px;
        z-index:900000;
        height:calc(100% - 200px);
	/*transition: all 0.5s ease-out;*/
    }
    
    #content{
        left:15px;
        width:calc(100% - 30px);
        top:77px;
	
        font-size:16px;
        line-height:26px;
        letter-spacing:1px;
        padding-left:0px;
        color:#FFFFFF;
    }
   
    .topnavwrapper{
        display:none;
    }
    #burgernav{
        display:block;
    }
   .bottomnavwrapper{
        display:none;
   }
 
    .socmed{
        width:150px;
        text-align:center;
        position:absolute;
        left:unset;
        right:0px;
        margin-left:0px;
        top:18px;
    }
    .kontakt_container{
        width:100%;
    }
}