/* Move down content because we have a fixed navbar that is 50px tall */

/*------------------- CSS RESET ---------------------
---------------------------------------------------*/

* {
padding: 0;
margin: 0;
}

html{
height: 101%;
}

b,
strong {
font-weight: bold;
}

section {
font-family: 'Shadows Into Light', cursive;
font-size: 3em;
}

/*------------------SCHRIFT / GRÖSSE / FARBE----------------
---------------------------------------------------*/

body{
font-family: Trebuchet,Verdana,Helvetica,Arial,sans-serif;
color: #303030;
line-height: 1.4em;
text-align: left;   
background-color: #1A457F;
} 

#mainContainer{
background: #f8f8f8;
margin: 0px auto;
} 

#header{  
height: 150px;
padding-top: 30px;
background-position: center;
max-width: 100%;
font-size: 1.8em;
line-height: 1.8em;
}

@media (max-width: 500px) {
  #headerMobile{
font-size: 1.2em;
padding-top: 10px;
  }
}

@media (max-width: 500px) {
  #navigation-toggle{
margin-top: 30px;
  }
}

#logo{
margin-top: -20px;
}                                 

h1 {
font-size: 1.5em;
margin-bottom: 20px;
margin-top: 40px;
font-weight: normal;
color: #686867;
text-transform: uppercase;
line-height: 1.5em;
}

@media (max-width: 768px) {
    h1{
    margin-top: 10px;
    }
}

h2 {
font-size: 1.2em;
margin-top: 0px;
margin-bottom: 10px;
font-weight: normal;
color: #686867;
}

h3 {
font-size: 1.5em;
margin-top: 60px;
margin-bottom: 20px;
}


p{
margin-bottom: 10px;
}

.bold {
font-weight: bold;
}

.container{
padding-bottom: 0px;
}

img{
max-width : 100%;
max-height: 100%;
} 


/*------------------- BEITRÄGE ---------------------
---------------------------------------------------*/   

#mainComponent{
margin: auto;
font-size: 1.2em;
background-image: url(../images/bg2.jpg) ;
background-size: cover;
min-height: 800px;
}

.content{
padding: 300px 200px 0px 0px;
}

#mainContent{
min-height: 800px;
background-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 500px) {
  .content{
padding: 300px 0px 0px 0px; 
  }
}


.info{
padding: 300px 0px 0px 50px;
}

@media (max-width: 800px) {
  .info{
display: none;
  }
}



#mainComponent ul {
padding: 0px 0px 0px 12px;
list-style-position:  outside;
list-style-type: disc;
}

.item-page{
margin: auto;
padding: 0px 0px 30px 0px;
}

.page-header {
border-bottom: none;
margin: 0px;
}

#mainComponent a:link,
#mainComponent a:visited,
#mainComponent a:focus{
color: #686867;
text-decoration: none;
}

#mainComponent a:hover{
text-decoration: underline;
}

@media screen and (max-width: 640px) {
 table {
  overflow-x: auto;
  display: block;
 }
}

/*-------------------   NAVIGATION MAINMENU   ---------------------
---------------------------------------------------*/      

#menu{
background-color: #1A457F;
border-top: solid 1px  #1A457F;
border-bottom: solid 1px  #1A457F;
margin-top: 0px;
}

#mainMenu ul li{
margin: auto;  
list-style: none;
text-transform: uppercase;
} 


#gruemenu > ul {
    box-shadow: none;
    margin: 0;
    padding: 0;
}

#gruemenu > ul > li > a {
    border-right: none;
    letter-spacing: 1px;
}

/*------------------- FOOTER ---------------------
---------------------------------------------------*/

.footer {
height: 160px;
padding-top: 10px;
color: #fff; 
font-size: 1.1em;
}

.footer a{
color: #fff;
padding: 0px 0px 0px 0px;
}

.footer ul.nav.menu li a:hover{
text-decoration: none;
background: transparent;
text-decoration: underline;
}    

/*------------------- MODULE ---------------------
---------------------------------------------------*/

img.flexheader{
max-width : 100%;
padding-top: 60px;
padding-bottom: 20px;
}

#phocamaps-box{
    margin-top: 60px;
}

@media (max-width: 768px) {
    img.flexheader{
    margin: -30px auto 0px;
    max-width : 100%;
    }
}

/*-------------------   KONTAKTFORMULAR ---------------------
---------------------------------------------------*/   

@media (min-width: 768px) {
  .form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: left;  
  }
}