* { padding: 0; margin: 0; }


body {
  background-color: #fff;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
}


#header-gray {
background-color: #f6f6f6;
}

#header-blue {
background-color: #285B94;
margin-top: 25%;
opacity: 0.8;
}

#header-blue2 {
background-color: #285B94;
}



#bg {
background-image: url(../img/container-mieten.jpg);
background-repeat:no-repeat;
width:100%;
height:auto;
}


  img.phone {
 vertical-align: middle
 }



/* IMAGES */

img { max-width: 100%; height: auto; }
img { width: auto; /* IE8 */}

 img.logo { 
padding: 2% 0% 2% 0%;
 }
 

hr {
 border: none;
 border-top: 1px solid #3F8DAC;
 color: #285B94; 
 background-color: 
 #FFFFFF; height: 1px;  
 }



/* H1 */


h1 {
  font-size: 195%;
  font-weight: 400;
  color:  #fff;
  line-height: 35px;
  text-transform: uppercase;
  text-align: left;
  padding: 2% 0% 2% 3%; 
 }

h2 {
  font-size: 125%;
  font-weight: 400;
  color:  #285B94;
  line-height: 35px;
  text-transform: uppercase;
  text-align: left;
  padding: 2% 0% 2% 0%; 
 }
 
h3 {
  font-size: 125%;
  font-weight: 400;
  color:  #285B94;
  line-height: 30px;
  text-transform: uppercase;
  text-align: center;
  padding: 2% 0% 2% 0%; 
 }

/* FONT */


.box-logo{
  font-size: 135%;
  font-weight: 400;
  color:  #285B94;
  line-height: 35px;
  text-decoration:none;
  text-align: left;
}

.box-index{
  font-size: 105%;
  font-weight: 300;
  color:  #222;
  line-height: 25px;
  text-decoration:none;
  text-align: left;
  padding: 0% 5% 0% 0%;
}

.box-index2{
  font-size: 105%;
  font-weight: 300;
  color:  #222;
  line-height: 25px;
  text-decoration:none;
  text-align: center;
  padding: 0% 0% 0% 0%;
}

.box-content{
  font-size: 105%;
  font-weight: 300;
  color:  #222;
  line-height: 25px;
  text-decoration:none;
  text-align: left;
  padding: 0% 10% 0% 0%;
}

.box-message {
  font-size: 125%;
  font-weight: 300;
  color:  #fff;
  line-height: 25px;
  text-decoration:none;
  text-align: left;
  padding: 4%;
}

.box-white {
  font-size: 95%;
  font-weight: 300;
  color:  #fff;
  line-height: 25px;
  text-decoration:none;
  text-align: left;
  padding: 5% 0% 0% 0%;
}

.box-contact {
  font-size: 105%;
  padding-top: 20px;
  padding-right: 40px;
  color: #222;
    font-weight: 300;
  line-height: 25px;
  text-decoration:none;
  text-align: left;
}

/* LINKS */

a.readmore {
  font-size: 105%;
  font-weight: 400;
  color: #fff;
  background: #3AB101;
  line-height: 40px;
  text-decoration:none;
  text-transform: uppercase;
    text-align: center;
	padding: 12px;
}
 
a.readmore:hover {
  border: 1px solid #fff;
}

a.readmore2 {
  font-size: 105%;
  font-weight: 300;
  color: #222;
  line-height: 30px;
  text-decoration:none;
  text-align: left;
}
 
a.readmore2:hover {
color: #285B94;
}


a.readmore3 {
  font-size: 95%;
  font-weight: 300;
  color:  #fff;
  line-height: 25px;
  text-decoration:none;
  text-align: left;
}
 
a.readmore3:hover {
color: #4CAC17;
}

a.readmore4 {
  font-size: 95%;
  font-weight: 400;
  color: #fff;
  background: #3AB101;
  line-height: 30px;
  text-decoration:none;
  text-transform: uppercase;
    text-align: center;
	padding: 6px;
}
 
a.readmore4:hover {
  border: 1px solid #fff;
}




input.text{
background:#F4F4F4;
color:#444;
border:1px solid #ddd;
border-radius:0px ;
font-size:16px ;
height:35px ;
line-height:25px ;
display: table-cell;
 width: 90%;
 }
 
.textarea {
background:#F4F4F4;
color:#444;
border:1px solid #ddd;
border-radius:0px ;
font-size:16px ;
height: 140px ;
line-height:30px;
display: table-cell;
 width: 90%;
 }
 
input.button {

 height: 40px;
 width: 100px;
 font-family: Roboto;
 font-size: 16px;
 color: #fff;
 border: none;
 background: #285B94;
 cursor: pointer;
 margin-top: 3%;
 margin-bottom: 3%;
display: table-cell;
 width: 90%;
 }

.select {
background:#F4F4F4;
color:#444;
border:1px solid #ddd;
border-radius:0px ;
font-size:16px ;
height:35px ;
line-height:25px ;
display: table-cell;
 width: 90%;
 } 
 
 
 
 



/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}