/* --- styles.css --- */

@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');

body{
font-family:'Quicksand', sans-serif;
 margin:0;
 padding:40px 0 40px 0;
}


* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}


a{
 color:#F26522;
 text-decoration:none;
}

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

a:focus {
 outline:none;
 }
 
.actual{
 font-weight:bold;	
 color:#F26522;	
}

#wrapper{
margin:0 auto;
max-width:1080px;
}

.header {
border:1px solid;
border-color: rgb(5, 91, 144);
}

.col-3 img{
 border:1px;
 margin:0;
padding:0; 
}


.title{
 font-family: 'Quicksand'; 
 font-size:36px; 
 font-weight: 400; 
 margin:20px auto; 
 color: rgb(5, 91, 144);	
}


#banner {
 margin:20px 0px 0px 0px;
 padding:50px 0px 150px 0px;
  font-family: 'Reenie Beanie';
 font-size:48px; 
 font-weight: 400;
 color:#FFFFFF;
 text-align:center;
 background-image: url("../images/himmel.jpg");
  background-repeat: no-repeat;
/* background-size:1080px 456px; */
}

#content {
 font-size:1em;
 line-height:1.5em;
 margin:44px 70px 44px 40px;
 padding:0;
 color:rgb(5, 91, 144);
 }

#content h1{ 
 line-height:normal;
 margin:0 0 20px 0;
}

#content h2{ 
 font-weight:normal;
 padding-top:25px;
}

#content h3{ 
 font-weight:normal;
 padding-top:25px;
}

.menu ul {
 margin:0;
 padding:0 0 0 15px;
}

.menu li {
  list-style-type:square;
  color:rgb(5, 91, 144);
   padding:5px 0px;
}


.footer {
  background-color:#F1EDED;
  font-weight:semi-bold;
  font-size:.875em;
  color:rgb(5, 91, 144);
  padding: 15px 15px 15px 25px;
}

.footer ul {
  list-style-type: none;
  margin: 0;
  padding: 15px 15px 15px 0px;
}


/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}


/* -------------------- Media Queries -------------------- */

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

@media only screen and (max-width: 1100px) { 
body{
 padding:0px 0px;
}
}

@media only screen and (max-width: 768px) { 
body{
 padding:0px 0px;
}

  #banner {
  margin:20px 0px 0px 0px;
  padding:50px 0px 150px 0px;
  background-image: url("../images/himmel_810.jpg");
  background-repeat: no-repeat;
/* background-size:810px 342px; */
}

  .col-3 img{
   width:100px;
   border:1px;   
  }
  .col-3{
   padding:0px 0px 0px 20px; 
  }
  .col-6{
   padding:0px 0px 0px 20px; 
  }  
  .col-9 {
   padding:0px 0px 0px 20px;	  
  }
  .title{
	font-size:26px; 
    padding:0px 0px 0px 20px;
  }
  #banner {
	font-size:32px;  
  }
  #content h1{
	font-size:1.5em;  
  }
  #content h2{
	font-size:1.25em;  
  }  
  #content h3{
	font-size:1.125em;  
  } 
    #content{
	font-size:.85em;  
  } 
  .footer{
   font-size:.75em;
  }
  .footer li {
   padding:2px 0px;
}
}
@media only screen and (max-width: 690px) {
  .title{
	font-size:20px; 
    padding:0px 0px 0px 20px;
  }	  
}