@charset "utf-8";
/*  **** Grundformatierungen  **** */


html { 
  height: 101%;
  }

* {
	margin: 0px;
	padding: 0px;
	}

input[type=checkbox] {
-webkit-appearance: checkbox;
}
	
div.custom i.ns-fa-pro	{font-size: 80px;
color: #8CB3DA;	opacity: 0.5;
margin: 60px;
}	

body {
height: 105%;	
font-family: 'Source Sans Pro', sans-serif;
background: url(../images/hro-sw-2.png) no-repeat;
background-size: 100% 100%;
 background-attachment: fixed;
line-height: 1.5em;
font-weight: normal;
padding: 0px;
margin: 0 auto;
color: #4a4a4c /*#f2f2f2*/;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
	
p	{
text-rendering: optimizelegibility;
font-size: 1.1em;
padding: 0em;
text-align: left;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;	
}

p.bold { 
text-align: center;
font-weight: 500;
font-size: 1.4em;
padding: 20px 0 0;
}
	
p.small	{
padding-top: 3px;
font-size: 0.9em;
}

a  {
color: #3D3D3F;
text-decoration: none;
}

a:active, a:focus{
outline: none;
}

img	{
max-width: 100%;
height: auto;
border: none;
outline: none;
}
	
h1	{
font-family: 'Arial', sans-serif;		
text-align: left;
color: #636366;
font-size: 1.8em;
font-weight: 400;
padding-bottom: 10px;
}


h1.heading{
white-space: nowrap;	
text-align: left;	
color: #09306E;	
padding: 15px 0 5px;
font-size: 2.0em;	
}

h1.blue	{
padding: 0.5em;
text-align: center;
color: #09306E;
font-size: 1.5em;
font-weight: 400;
}

h2	{
font-size: 1.3em;
font-weight: 300;
padding-right: 0.5em;
}

h2.blue	{
padding-left: 0.5em;
text-align: left;
color: #2e5a68;
font-size: 1.3em;
line-height: 1.3em;
}

h2.heading{
font-size: 1.5em;		
}

h3	{
font-family: 'Arial', sans-serif;		
text-transform: uppercase;	
text-align: left;
color: #3D3D3F;
font-size: 1.2em;
font-weight: 400;
padding-bottom: 10px;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}

h4	{
font-size: 1.3em;
font-weight: 400;
margin-top: 1em;
padding-bottom: 15px;
}

h5	{
font-size: 1.1em;	
font-weight: 300;
margin-top: 1em;
}

hr	{clear: both;
border: 0;
height: 1px;
background: #b0b2b3 /*#cc2119*/ ;
}


a:hover	{
text-decoration: none;
color: #708090;
outline: none; 
-o-transition:color 2.0s ease-out;
-ms-transition:color 2.0s ease-out;
-moz-transition:color 2.0s ease-out;
-webkit-transition:color 2.0s ease-out;
/* ...and now override with proper CSS property */
transition:background 2.0s ease-out;
}

ul{
padding-top: 20px;
margin-left: 20px;	
}

ul li{
text-transform: uppercase;
list-style-type: none;
line-height: 25px;
}

ul li p img	{
list-style-position: outside;
}

ul li p	{
text-align: left;
font-size: 20px;
}

ul li p img{
padding-right: 15px;	
}

#clear{
clear: both;
}
#phone	{
padding: 3px;
}

#mail	{
padding: 3px;
}

#phone a, #mail a{
padding: 3px;	
border: 1px solid transparent;
}

#phone a:hover, #mail a:hover{
padding: 3px;
border: 1px solid #8cb3da;	
}

#header{
background: #fff;
width: 100%;
position: fixed; top: 0px; z-index: 100000;
height: 80px;	
border-bottom: 3px solid #005cb9;
border-top: 1px solid #9d9d9c;
}

#header img{
background: #fff;
margin-top: 0px;
border-left: 10px solid #fff;
border-right: 10px solid #fff;
}

/*--Grue Menu--*/
#gruemenu.grue_89.menu	{
border-bottom: 0;
margin-top: 25px;


}

#navigation-toggle.navigation-toggle-89	{
background: #595959;
border-radius: 0px;
padding: 15px 15px;
}

#navigation-toggle.navigation-toggle-89:hover	{
background: #004f9f;
border-radius: 0px;
padding: 15px 15px;
}

div.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInRight;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideInUp {
  0% {opacity: 0;
  -webkit-transform: translateY(20%);
  transform: translateY(20%);
  visibility: visible;
  }
  100% {opacity: 1;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  }
  }
  @keyframes slideInUp {
  0% {opacity: 0;
  -webkit-transform: translateY(20%);
  transform: translateY(20%);
  visibility: visible;
  }
  100% {opacity: 1;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  }
  } 
  
div.slideInUp h1 { 
font-size: 1.8em;
text-align: center;
} 

div.slideInUp p	{
font-weight: 400;
font-size: 1.0em;
text-align: left;
}

#content	{
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-3%);
  transform: translateX(-3%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-3%);
  transform: translateX(-3%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }

#content	{
margin-top: 80px;
}

#content-wrap	{
padding: 7em 0 0em;	
}

#content-wrap-2	{
padding: -10em 0 0em;	
}



div.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideInRight {
  0% {opacity: 0;
  -webkit-transform: translateX(20%);
  transform: translateX(20%);
  visibility: visible;
  }
  100% {opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInRight {
  0% {opacity: 0;
  -webkit-transform: translateX(20%);
  transform: translateX(20%);
  visibility: visible;
  }
  100% {opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 
  
div.slideInRight 	{
color:#192F4D;
padding: 50px 50px 0 0;
}

div.slideInRight img{
width: 100%;
}

div.slideInRight p	{font-weight: 400;
font-size: 1.0em;
text-align: center;
}


div.footer2{
display: none;	
}

::selection {
    background: #004f9f;
    color: #fff;
}
/* und hiermit der Firefox >=1 */
::-moz-selection {
    background: #004f9f;
    color: #fff;
}

#footer	{
            -moz-animation-duration: 2s;
            -webkit-animation-duration: 2s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {opacity: 1;
               margin-top: 13em;

            }
            to {opacity:1;
               margin-top:10em ;

            }
         }
         @-webkit-keyframes slidein {
            from {opacity: 1;
               margin-top: 13em;

            }
            to {opacity:1;
               margin-top:10em;

            }
         }

#footer	{
border-top: 3px solid #005cb9;	
margin: 10px auto 0;	
background:#3D3D3F; 	
padding: 2em 0 6em;
}

#footer p, #footer p a{
font-size: 1.1em;	
}

#footer h3, #footer p, #footer p a{
color: #edf2f9;
}

#footer h3	{
font-size: 19px;
padding: 0 0 20px 0;
}

#footer h3::after {
    content: "";
    display: block;
    width: 80%;
    height: 0;
    margin: 12px 0 0px;
    border-top: 1px solid #fff /*#cb1e18*/;
}

#footer .fa, #footer fa.fa	{float: left;
color: #fff;
font-size: 2.0em;
}

#footer p a, #footer ul li a  {
padding-right: 15px;
-webkit-transition: padding-left 0.5s; /* Safari */
transition: padding-left 0.5s;
}

div.customcontact p a   {
-webkit-transition: padding-left 0.5s; /* Safari */
transition: padding-left 0.5s;
}

div.customcontact p img	{
	width: 80%;
}

#footer p a:hover, #footer ul li a:hover, div.customcontact p a:hover  {
padding-left: 10px;
}

#content a   {
padding-left: 5px;
font-size: 1.1em;
-webkit-transition: padding-left 0.5s; /* Safari */
transition: padding-left 0.5s;
}

#content a:hover  {
padding-left: 10px;
color: #004f9f;
}

#map{
margin-top: 4em;	
}

div.footer1		{
font-size: 13px;
padding-top: 10px;
color: #edf2f9;
}

div.page-header	{
display: none;	
}

div.customimp h2{
font-weight: 400;
padding-bottom: 5px;	
}

a.accordion-toggle	{
display: none;	
}

/*Menü Impressum,Datenschutz*/
div.moduletable ul.nav	{
margin-left: 0;
padding: 0;
}

div.moduletable ul.nav li	{
padding-top: 0px;
margin-left: 0px;	
list-style-type: none;
}

div.moduletable ul.nav li a	{	
font-size: 15px;
color: #edf2f9;	
}

/* Kontaktseite */
.accordion-heading	{
font-size: 2em;
font-weight: normal;
}

a.accordion-toggle	{
font-weight: normal;
}
fieldset	{
border: none;
}

textarea, input, select	{
margin-bottom: 0.5em;
padding: 1em;
width: 90%;
border: 1px solid #192F4D;
}

button{
-webkit-appearance: none;
margin-top: 10px;
background: #004f9f;
color: #fff;
padding: 0.5em;
border: none;
border-radius: 0;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
transition: all 1.5s ease; 
}

button:hover	{
text-decoration: none;
background: #2c5287;
}

legend, label	{
font-size: 0.8em;	
}


/* -- Media Queries --*/
@media only screen and (max-width: 1600px)	{
#footer	{
margin: 5em auto 0;	
background:#3c3c3c; 	
padding: 2em 0 6em;
}#content-wrap	{
padding: 5em 0 0em;	
}
div.slideInRight 	{
color:#192F4D;
padding: 80px 50px 0 0;
}
#content-wrap	{
padding: 7em 0 0em;	
}
}


@media only screen and (max-width: 1280px)	{
#footer	{
margin: 1.5em auto 0;	
padding: 2em 0 6em;
}
#content-wrap	{
padding: 7em 0 0em;	
}
}


/* -- Media Queries --*/
@media only screen and (max-width: 1024px)	{
#footer	{
margin: 2em auto 0;	
}
#map	{
padding-top: 1em;
margin-bottom: -2em;	
}
}

@media only screen and (max-width: 768px)	{
#content-wrap	{
padding: 1em 0;
}
#content	{
margin-top: 10px;
padding-right: 0%;
}
#footer h3::after {
width: 100%;
}
#footer p, #footer p a{
font-size: 1em;
line-height: 2.0em;	
}
#box2	{
margin-top: 1em;
}
#footer .fa, #footer h3	{
margin-top: 20px;
}
h1	{
padding: 0.7em 0 0.1em;	
}
div.slideInRight 	{
color:#192F4D;
padding: 100px 0px 0 0;
}
#header{
position: fixed; top: 0px; z-index: 10;
height: 120px;	
}
#header img	{
margin-top: 0px;
border-left: 0px solid #fff;
border-right: 0px solid #fff;
border-bottom: 3px solid #1860a8;
}
}


@media only screen and (max-width: 480px)	{
h1.heading{
font-size: 1.6em;	
}
h2.heading{
font-size: 1.4em;
}
div.customcontact p img	{
	width: 100%;
}
}


@media only screen and (max-width: 366px)	{
h1	{
padding: 0.7em 0 0.1em;	
font-size: 1.5em;	
}
h1.heading{
font-size: 1.5em;	
}
}