/* --- General CSS Strats ---  */
*{
    margin: 0px;
    padding: 0px;
}

html, body
{
margin:0px;
    padding:0px;
    	width: 100%;
	height:100%;
	min-height:100%;
	   -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
 
 
  
 }

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }


.fade-in {
	opacity:0;  /* make things invisible upon start */
		
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1.0s;
	-moz-animation-duration:1.0s;
	animation-duration:1.0s;
}

.fade-in.one {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s;
}

.fade-in.two {
-webkit-animation-delay: 0.4s;
-moz-animation-delay:0.4s;
animation-delay: 0.4s;
}

.fade-in.three {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}

.fade-in.four {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
	}





body, p {
     font-size: 10pt;
    color:#85a3b1 !important;
    font-family: arial;
    border-top:4px white solid;
}
a {
    text-decoration:none;
    color:#2f2c7d;
}

/*.aktiv {color:#81a9bb !important}*/

a:focus{
    outline:0;
}
a:hover {
    color:#e1211e;
}
h1,h2,h3,h4,h5,h6 {
    font-size:14pt; 
    margin:0px;
    padding:0px;
    color:#333333;
}
a img {
    border:0px;
}
ul, li {
    list-style:none;
    margin:0px;
    padding:0px;
}
.wrapper {
    width:925px;
    margin:0 auto;
}
/* --- General CSS Ends ---  */

.header{
    width: 100%;
    display: inline-block;
}
.logo{
    width: 100%;
    display: inline-block;
    text-align: center;
}
.logo a{
    display: inline-block;
}
.logo img {
    margin-top: 20px;
    margin-bottom: 30px;
    max-height: 86px;
    max-width: 520px;
}
.toggleMenu {
    background: none repeat scroll 0 0 white;
    border: 1px solid #333333;
    color: black;
    display: none;
    font-size: 14px;
    padding: 10px 8px;
    width: 25px;
}
.toggleMenu span {
    color: black;
    float: left;
    font-size: 28px;
    height: 23px;
    margin: -6px 0 0;
    padding: 0;
}
a.toggleMenu:hover{
    color:#FFF;
}
.nav > li span.parent_span {
    display: block;
    position: absolute;
    top: 84px;
    right: 10px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
}
.content{
    width: 100%;
    display: inline-block;
}
.left_sec{
    width:755px;
    float:left;
}
.right_sec{
    width:165px;
    float:right;
}
.banner_image{
    width:765px;
    float:left;
    position: relative;
}

.banner_image > img {min-width:100% !important;max-width:100% !important;}

.menu{
    width:152px;
    float:right;
    position: relative;
	background:#4d555f none repeat scroll 0 0;
	text-align:center;
	height:226px;
}
.menu nav{
    background: #4d555f;
}
.menu .nav li{
    list-style: none;
    
}

#calldd {
    
	cursor:pointer;
}
.menu .nav li a,#calldd {
    color: white;
    display: block;
    font-size: 14px;
    padding-top: 30px;
    font-weight:normal;
    background: #4d555f;
    
}
.menu .nav li.menu_label .parent_span fa fa-chevron-down{
   
}
/*.caret-right{
    position: absolute;
    display: inline-block;
    top: 102px;
    right: 10px;
    cursor: pointer;
}*/
.menu .nav li a:hover,#calldd:hover{
    color:#81a9bb;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.menu .nav li li a{
    background: white;
    padding: 7px 15px;
}
.menu .nav li ul{
    display: none;
}
/*.menu .nav li:hover ul{
    display: block;
}*/
.middle_content{
    
    
    display: inline-block;
    
}
.middle_content h1{
    font-size: 20px;
    color: #333333;
    margin: 15px 0px;
}
.middle_content h2, .middle_content h3 {
    margin: 15px 0px;
}
.middle_content h4{
    font-size: 20px;
    color: #333333;
}
.middle_content ul li{
    margin-left:20px;
    margin-top:10px;
    list-style-type: disc;
}

#footer
{margin-bottom:40px;margin-top:20px; font-size:9pt;}

#footer a:link, #footer a:active, #footer a:visited
{color:#434343; text-decoration:none;}

#footer a:hover
{color:#aeaeae; text-decoration:underline;}


.middle_content a:link, .middle_content a:active, .middle_content a:visited
{color:#434343; text-decoration:none;}

.middle_content a:hover
{color:#aeaeae; text-decoration:underline;}


.responsive_menu{
    text-align: right;
    position:relative;
    display: none;
    
}
.responsive_menu span i{
    vertical-align: top;
    
}

.responsive_menu ul {
	border:black 1px solid;
}
.responsive_menu .nav > li {
    border-bottom: 1px solid #333333;
    float: none;
    width: 100%;
    position: relative;
    
}
.responsive_menu .nav li a {
    display: block;
    padding: 10px;
    text-align: center !important;
}
.responsive_menu .nav li{
    background: white;
    
}
.responsive_menu .nav li a{
    text-align: center;
}
.responsive_menu .nav > li > a {
    padding: 10px;
    text-align: center;
    color:black;
   
}
.responsive_menu .nav > li li a {
    background: none repeat scroll 0 0 white;
    color: black;
    padding: 10px 10px 10px 15px;
}
.responsive_menu .nav {
    position: absolute;
    right: 0;
    top: 37px;
    z-index: 9999;
    width:200px;
}
.responsive_menu .nav > li span.parent_span {
    display: block;
}
.responsive_menu .nav > li span.parent_span {
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    margin: 0;
    padding: 10px;
    position: absolute;
    right: 4px;
    text-align: center;
    top: 2px;
}
.responsive_menu .nav li ul {
    display: none;
    left: 0;
    position: static;
}
.responsive_menu .nav li ul {
    padding:0px;
    background: white;
}
.responsive_menu ul ul li {
    border-top: 1px solid #333333;
}
.active {
    display: block;
}
.responsive_menu .nav > li > a{
    background:none;
    text-align:left;
    padding:10px;
}
.responsive_menu .nav > li span.parent_span {
    display:block;
}
.responsive_menu .nav li ul {
    left: 0px;
    display:none;
}
#linkskontakt
{float:left !important; width: 275px}

#rechtskontakt
{float:left !important; width:480px; }

#einruecken
{width:96%; margin-left:4%;}


@media only screen and (max-width: 960px) {
    .wrapper{
        width:750px;
    }
    
    .banner_image{width:584px; }

    .logo img {
        width:100%;
    }
    .left_sec {
        width: 73%;
    }
    .right_sec {
        width: 27%;
    }


    
    .menu {
        float: right;
        width: 160px;
		height:172px;
	
    }
    
    .menu .nav li a,#calldd {
		padding-top: 27px;
	}
    
    #linkskontakt
{float:left !important; width: 270px}

#rechtskontakt
{float:left !important; width:295px; margin-top:30px; }
    
}
@media only screen and (max-width: 787px) {
    .responsive_menu{
        display: block;
    }
    .right_sec .menu{
        display: none;
    }
    .wrapper{
        width:620px;
       
    }
    
 .banner_image{width:100%; }
    
    .left_sec {
        width: 100%;
    }
    
    #linkskontakt
{float:none !important; width: 100%; padding-bottom:5px;}

#rechtskontakt
{float:none !important; width:100%; }
    
#einruecken
{width:93%; margin-left:7%;}        
    
}
@media only screen and (max-width:629px) {
    .wrapper{
        width:470px;
    }
   
.logo img {
margin-bottom: 20px;}

body, p {
     font-size: 10pt;
}    

.middle_content h1{
  font-size: 18px;}

#footer
{font-size:9pt;}    
    
}
@media only screen and (max-width: 479px) {
    .wrapper{
        width:300px;
    }
    
    .logo img {
margin-bottom: 15px;}

#einruecken
{width:90%; margin-left:10%;}    
    
}