@charset "utf-8";
/* CSS Document */


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











*{
margin:0;
padding:0
}

.clear{
clear:both
}

a,a:link,a:active,a:hover,a:visited{
color:#113e8a;
text-decoration:none
}

body,html{
height:100% !important;
font-family:"Ubuntu",Arial, Helvetica, sans-serif
}

div#header{
width:100%;
background-color:#04368b;

}

.inner{
margin:auto;
width:980px;
position:relative
}


ul.arbeiten{
margin-top:30px;
width:40%
}

.inner p{
margin-bottom:15px;
font-weight:300
}

.image-big{
float:right;
width:500px
}

.image-quer{
width:100%
}

.image-small{
width:229px;
margin-top:20px;
margin-right:20px
}


	


#logo{
width:260px;
padding:15px 0 15px 0;
}

#logo img{
width:100% !important;
height:auto
}

#phoneNumber{
font-family: 'Ubuntu', sans-serif;
font-weight:600;
line-height:50px;
font-size:16px;
position:absolute;
text-indent:10px;
top:0;
right:0;
background-image:url(../images/arrow-white.gif);
background-repeat:no-repeat;
color:#fff
}
#phoneNumber a,#phoneNumber a:link,#phoneNumber a:active,#phoneNumber a:hover,#phoneNumber a:visited{
color:#fff;
text-decoration:none
}

#navigationMain {
font-family: 'Ubuntu', sans-serif;
font-weight:500;
font-size:16px;
text-transform:uppercase;
padding-bottom:8px;
}

#navigationMain ul{
text-align:center;
list-style:none;
}

#navigationMain ul li{
display:inline-block;
padding-top:12px;
margin:0px 8px 0 8px;
}

#navigationMain ul li a,#navigationMain ul li a:link,#navigationMain ul li a:active,#navigationMain ul li a:hover,#navigationMain ul li a:visited{
color:#000;
text-decoration:none
}


#navigationMain ul li.active{
background-image:url(../images/arrow-blue.gif);
background-repeat:no-repeat;
background-position:center top;
}


#navigationSub{
font-family: 'Ubuntu', sans-serif;
font-weight:500;
font-size:14px;
background-color:#d5d7d8
}

#navigationSub ul{
text-align:center;
list-style:none;
}

#navigationSub ul li{
display:inline-block;
padding:8px 0 8px 0;
margin:0px 8px 0 8px;
}



#navigationSub ul li a,#navigationSub ul li a:link,#navigationSub ul li a:active,#navigationSub ul li a:hover,#navigationSub ul li a:visited{
color:#000;
text-decoration:none
}


#navigationSub ul li.active a{
font-weight:600;
color:#113e8a
}


h1{
color:#113e8a;
margin-top:20px;
margin-bottom:20px
}
h2{
color:#113e8a;
font-weight:400;
font-size:22px;
margin-top:20px;
margin-bottom:10px;
}

.referenzen h2{
color:#113e8a;
font-weight:400;
font-size:22px;
margin-top:50px;
margin-bottom:0px;
}

h3{
color:#113e8a;
font-weight:400;
margin-bottom:10px;
}



#mehrButtons{
width:800px;
margin:auto;
position:absolute;
left: 0; bottom: 100px; right: 0;

}

a.mehrButton,a.mehrButton:link,a.mehrButton:visited{
width:250px;
height:160px;
background-image:url(../images/button-mehr-passiv.png);
background-size:95%;
background-position:center top;
background-repeat:no-repeat;
display:table-cell;
vertical-align:middle;
text-align:center;
font-weight:600;
font-size:18px;
}

a.mehrButton:hover,a.mehrButton:active{
background-image:url(../images/button-mehr-aktiv.png);
color:#fff
}

a.mehrButton p{
text-align:left;
margin:auto;
width:65%;
margin-top:15px
}


p.slogan{
font-family: 'IM Fell Great Primer SC', serif;
color:#fff;
text-transform:uppercase;
font-size:36px;
letter-spacing:1px;
padding:20px
}

#bigImage{
background-image:url(../images/motiv-home.jpg);
background-position:center center;
background-size:cover;
width:100%;
height:calc(100% - 140px);
border-bottom:5px solid #04368b
}

#bigImage.asphaltbau{
background-image:url(../images/motiv-asphaltbau.jpg);
background-size:cover;
width:100%;
height:400px;
border-bottom:5px solid #04368b
}




#bigImage.pflasterbau{
background-image:url(../images/motiv-pflasterbau.jpg);;
background-size:cover;
width:100%;
height:400px;
border-bottom:5px solid #04368b
}

#bigImage.kanalbau{
background-image:url(../images/motiv-kanalbau.jpg);
background-size:cover;
width:100%;
height:400px;
border-bottom:5px solid #04368b
}

#bigImage.versitzgrubenbau{
background-image:url(../images/motiv-versitzgrubenbau.jpg);
background-size:cover;
width:100%;
height:400px;
border-bottom:5px solid #04368b
}

#bigImage.erdbewegung{
background-image:url(../images/motiv-erdbewegungen.jpg);
background-size:cover;
width:100%;
height:400px;
border-bottom:5px solid #04368b
}

#bigImage.fahrsilo{
background-image:url(../images/motiv-fahrsilo.jpg);
background-size:cover;
width:100%;
height:400px;
border-bottom:5px solid #04368b
}


#bigImage.referenzen{
background-image:url();
background-size:cover;
width:100%;
height:400px;
border-bottom:5px solid #04368b
}

#bigImage.fuhrpark{
background-image:url(../images/motiv-fuhrpark-2.jpg);
background-size:cover;
width:100%;
height:400px;
border-bottom:5px solid #04368b
}

#bigImage.kontakt{
background-image:url(../images/motiv-kontakt-3.jpg);
background-size:cover;
width:100%;
height:400px;
border-bottom:5px solid #04368b
}

#bigImage.impressum{
background-image:url(../images/motiv-impressum.jpg);
background-size:cover;
width:100%;
height:400px;
border-bottom:5px solid #04368b
}

#bigImage.datenschutz{
background-image:url(../images/motiv-datenschutz.jpg);
background-size:cover;
width:100%;
height:400px;
border-bottom:5px solid #04368b
}

#arrowThin{
width:150px;
position:absolute;
bottom:20px;
left:50%;
margin-left:-75px;
}

#arrowThin img{
width:100%;
heigh:auto;
}


.contentArrow{
margin:0;
padding:0;
background-image:url(../images/arrow-blue.gif);
background-repeat:no-repeat;
height:14px;
}


.dreiSpalten{
margin-top:30px;
margin-bottom:20px;

}


.column {
    float: left;
    width: 308px;
	margin-right:25px;
}



.column h4:before{
    content: "";
    display: block;
    background: url(../images/arrow-blue-list.png) no-repeat;
    width: 20px;
    height: 20px;
    float: left;
margin-top:5px;
}

.column h4.noArrow:before{
    content: "";
    display: block;
    background: none;
    width: 1px;
    height: 1px;
    float: left;
margin-top:5px;
}



.column h4{
color:#113e8a;
padding:3px 5px 0 5px;
}

.columnGrey{
	background-color:#f2f2f2;
	height:500px;
}

.column p{
clear:both;
margin-bottom:0;
padding:0 10px 3px 10px;
}

.column p img{
width:100%;
height:auto
}

.noMarginRight{
margin-right:0;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.blue{
color:#04368b;
clear:both
}

#projektGallerie{
margin-top:40px;
margin-bottom:40px
}


.projekt{
width:22%;
height:160px;
float:left;
margin-right:20px;
background-position:center center;
background-size:cover;
}

a.projektBild{
border:1px solid #113e8a;
display:block;
width:100%;
height:160px;
position:relative;
background-position:center center;
background-size:cover;
}

a.projektBild:hover:before{
content:"" !important;
position:absolute;
width:100%;
height:160px;
background-image:url(../images/bild-mouseover.png);
background-position:center center;
background-size:cover;
}


#content ul{
list-style:square;
margin-left:20px;
font-weight:300
}

h3.fuhrpark:before{
    content: "";
    display: block;
    background: url(../images/arrow-blue-list.png) no-repeat;
    width: 20px;
    height: 20px;
    float: left;
margin-top:5px;
}


.blueLine{
height:5px;
background-color: #04368b;
}



.kontakt-bild{
width:226px;
margin-right:20px;
margin-bottom:30px;
float:left
}

.kontakt-bild img{
width:100%;
height:auto
}


.fuhrpark-bild{
width:226px;
margin:30px 20px 30px 0;
float:left
}

.fuhrpark-bild img{
width:100%;
height:auto
}


#footer{
width:100%;
background-color:#04368b;
margin-top:50px;
height:200px
}

.footerLogo{
width:200px;
padding-top:30px;
padding-bottom:30px;
float:left
}
.footerLogo img{
width:100%;
height:auto
}

#footer p{
width:200px;
color:#fff;
font-size:14px;
float:left;
margin-top:28px;
margin-left:50px;
}

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


#navigationMobile {
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
	display:none
}
#navigationMobile a, #navigationMobile a:link,#navigationMobile a:active, #navigationMobile a:hover, #navigationMobile a:visited{
color:#000;
text-decoration:none
}




@media screen and (max-width: 1024px) { 
.inner{
width:100%
}


h1,h2,h3,h4{
margin-left:20px;
margin-right:20px;
}


.kontakt-bild {

    margin: 30px 0px 0px 20px;

}



.kontakt-bild h3,.projekt h3{
margin-left:0
}

.inner p {
margin-left:20px;
margin-right:20px;
}


.column{
	width:42%;
	margin-left:20px;
	
}

.columnGrey{
height:auto
}


#footer{
height:auto;
padding-bottom:40px;
}
#footer p{
float:inherit;
margin-left:20px;
}
.footerLogo{
float:inherit;
margin-left:20px
}


#logo{
margin-left:20px;

}

#phoneNumber{
right:20px;
}


#content ul {
 margin-left: 40px;
}


.image-small{
margin-left:20px;
margin-right:0;
width:22%;
}


.projekt{
margin-left:20px
}



.contentArrow {
    background-position: 18px;
}


}

@media screen and (max-width: 960px ) { 
.image-big{
float:inherit;
width:100%;
margin-bottom:20px;
margin-top:40px;
}


.fuhrpark-bild {
    width: 42%;
    margin: 30px 20px 0px 20px;
    float: left;
}

.kontakt-bild {
    width: 42%;
    margin: 30px 20px 0px 20px;
    float: left;
}


ul.arbeiten {
    margin-top: 30px;
    width: 80%;
}


#bigImage.asphaltbau,#bigImage.pflasterbau,#bigImage.kanalbau,#bigImage.versitzgrubenbau,#bigImage.erdbewegung,#bigImage.fahrsilo,#bigImage.referenzen,
#bigImage.fuhrpark,#bigImage.kontakt,#bigImage.impressum,#bigImage.datenschutz
{
height:300px !important
}


}



@media screen and (max-width: 850px) { 
#navigationMain{
display:none;
}


#navigationMain ul li {
    display: block;
    padding-top: 12px;
    margin: 0px 8px 0 8px;
}
#navigationMain ul li.active {
    background-image:none;

}


#navigationMain ul li.active a {
    font-weight: 600;
    color: #113e8a;
}


#navigationSub{
display:none;
}

#navigationSub ul {

    padding:20px 0px 20px 0px;

}

#navigationSub ul li {
    display: block;
	padding: 0;
    margin: 8px 8px 0 8px;

}


#navigationMobile{
display:block
}



.projekt {
    width: 42%;
	height:300px;
}

a.projektBild {
    height: 250px;
}


a.projektBild:hover:before{
height:250px;
}



}




@media screen and (max-width: 750px) { 

a.mehrButton, a.mehrButton:link, a.mehrButton:visited {
background-size: 100%;
display: block;
text-align: center;
margin:auto
}

.tableRow{
padding-top:30px;
width:45%;
float:left
}

a.mehrButton p {
    text-align: center;
    margin: auto;
    width: 65%;
    margin-top: 15px;
	padding-top:70px
}


#mehrButtons {
    width: 100%;
    margin: auto;
    position: relative;
    left: 0;
    bottom: 0;
    right: 0;
}

p.slogan {

    text-align: center;
}

.image-small{
margin-left:20px;
margin-right:0;
width:44%;
}

}


@media screen and (max-width: 700px) { 
#bigImage.asphaltbau,#bigImage.pflasterbau,#bigImage.kanalbau,#bigImage.versitzgrubenbau,#bigImage.erdbewegung,#bigImage.fahrsilo,#bigImage.referenzen,
#bigImage.fuhrpark,#bigImage.kontakt,#bigImage.impressum,#bigImage.datenschutz
{
height:250px !important
}
}




@media screen and (max-width: 600px) { 

#bigImage {
    background-image: url(../images/motiv-home.jpg);
    background-position: center top;
    background-size: 100%;
	background-repeat:no-repeat;
    width: 100%;
    height:auto;
    border-bottom: 5px solid #04368b;
}

.tableRow{
padding-top:30px;
width:100%;
float:inherit
}

#mehrButtons{
	padding-top:290px

}


a.mehrButton,a.mehrButton:link,a.mehrButton:visited{
background-image:url(../images/button-mehr-passiv-mobil.png);
}
a.mehrButton:hover,a.mehrButton:active{
background-image:url(../images/button-mehr-aktiv.png);
color:#fff
}


#arrowThin{
display:none
}

.slogan{
position:absolute;
top:90px
}


.column{
	width:90%;
	margin-left:20px;
	float:inherit;
	margin:auto;
	margin-top:30px;
	
}

.columnGrey{
height:auto;
	margin-left:20px;
	float:inherit;
	margin:auto;
	margin-top:30px
}

.projekt {
    width: 90%;
	height:350px;
}

a.projektBild {
    height: 300px;
}

a.projektBild:hover:before{
height:300px;
}




}



@media screen and (max-width:530px) { 
.image-small{
margin-left:20px;
width:85%;
}

.image-quer {
    margin-bottom: 40px;
	margin-top:40px;
}


}




@media screen and (max-width:500px) { 


#bigImage.asphaltbau,#bigImage.pflasterbau,#bigImage.kanalbau,#bigImage.versitzgrubenbau,#bigImage.erdbewegung,#bigImage.fahrsilo,#bigImage.referenzen,
#bigImage.fuhrpark,#bigImage.kontakt,#bigImage.impressum,#bigImage.datenschutz
{
height:180px !important
}


.slogan{
top:50px;
}

p.slogan{
font-size:25px
}


#logo{
margin-left:0;
margin:auto;
padding-top:80px;
padding-bottom:40px;
}

#phoneNumber{
right:inherit;
left:20px;
}


.fuhrpark-bild {
    width: 92%;

}

.kontakt-bild {
    width: 92%;

}




}

@media screen and (max-width:400px) { 

#bigImage.asphaltbau,#bigImage.pflasterbau,#bigImage.kanalbau,#bigImage.versitzgrubenbau,#bigImage.erdbewegung,#bigImage.fahrsilo,#bigImage.referenzen,
#bigImage.fuhrpark,#bigImage.kontakt,#bigImage.impressum,#bigImage.datenschutz
{
height:130px !important
}



.slogan{
top:50px;
}

p.slogan{
font-size:20px
}

#mehrButtons{
	padding-top:200px

}

}