/*!
 * Responsive CSS Grid by MOORS GROTHUS
 * URI: http://www.moorsgrothus.de/
 * Copyright 2015 MOORS GROTHUS GbR
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Coded by MOORS GROTHUS Agency for Design in Münster, Germany.
 * Code is poetry!
 */
 
 
 /* --------- General settings ---------- */
body {
	padding: 0px;
	margin: 0px;
	background-color: #ffffff;
}

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #666666;
    background-repeat: no-repeat;
}

*:before, *:after {
    box-sizing: border-box;
}

.clearfix {
    clear: both;
}



/* ------------ Section, container and row ------------ */
.section {
	width: 100%;
	height: auto;
	clear: both;
	padding: 0px;
	float: left;      
}	

.container {
	max-width: 1140px;
	width: 100%;
	height: auto;
	margin: auto;
	padding: 25px;     
}


.row {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-grow: 4;
	
	display: -webkit-flex;
	-webkit-flex-direction: row;
	-webkit-flex-wrap: wrap;
	-webkit-flex-grow: 4;
	
	display: -moz-flex;
	-moz-direction: row;
	-moz-wrap: wrap;
	-moz-grow: 4;
	
	display: -ms-flex;
	-ms-direction: row;
	-ms-wrap: wrap;
	-ms-grow: 4;
}


.no-flexbox .row {
	width: 100%;
	height: auto;	
    display: inline-block;

}
.no-flexbox .col-1-1, .no-flexbox .col-1-2, .no-flexbox .col-1-4 {
    float: left;
}

.no-flexbox .ref-item, .no-flexbox .ref-item2{
    float: left;  
    margin: 25px 0px;
}
/* ------------ 12 Column Grid ------------ */
.col-1-12 {
	width: 8.33333333%;
	height: auto;	
	padding: 25px;
}

.col-2-12 {
	width: 16.66666667%;
	height: auto;	
	padding: 10px;
}

.col-1-4 {
	width: 25%;
	height: auto;	    
	padding: 25px 0px;
}

.col-1-3 {
	width: 33.33333333%;
	height: auto;
	padding: 25px 0px;
}

.col-5-12 {
	width: 41.66666667%;
	height: auto;	
	padding: 25px;
}

.col-1-2 {
	width: 50%;
	height: auto;	   
	padding: 25px 0px;
}

.col-7-12 {
	width: 58.33333333%;
	height: auto;
	padding: 25px;
}

.col-2-3 {
	width: 66.66666667%;
	height: auto;
	padding: 25px;
}

.col-3-4 {
	width: 75%;
	height: auto;
	padding: 25px;
}

.col-10-12 {
	width: 83.33333333%;
	height: auto;
	padding: 25px;
}

.col-11-12 {
	width: 91.66666667%;
	height: auto;	
	padding: 25px;
}

.col-1-1 {
	width: 100%;
	height: auto;	     
	padding: 25px 0px;
}

/* ------------ 12 Column Grid full width ------------ */
@media only screen and (max-width: 480px) {
	.col-1-12, .col-2-12, .col-3-12, .col-4-12, 
	.col-5-12, .col-6-12, .col-7-12, .col-8-12, 
	.col-9-12, .col-10-12, .col-11-12, .col-12-12 {
		width: 100%;
	}
}





@media only screen and (min-width: 769px) and (max-width:930px) {
    #head .col-1-2{
        width: 100%;
    }
    .col-1-4{
        display: none !important;
    }
}


@media only screen and (min-width: 569px) and (max-width:768px) {
    .col-1-2{
        width: 100%;    
    }
    .col-1-4{
        display: none !important;
    }
    footer kontakt .col-1-2{
        width: 100%;
    }
    .ref-item{
        width: 48%; 
    }
    .ref-item-2, .ref-item-4, .ref-item-6 {
        margin: 25px 0 25px 4%;
    } 
    .ref-item-5 {
    margin: 25px 0;
    }
}
 
  
@media only screen and (min-width: 421px) and (max-width:568px) {
    .ref-item{
        width: 100%; 
        height: 500px;        
    }
    .ref-item-2, .ref-item-4, .ref-item-5, .ref-item-6 {
        margin: 25px 0;
        background-size: cover;
    }     

}
 

@media only screen and (min-width: 100px) and (max-width:420px) {
    #navigation{
        display: none;
    }
    #start .col-1-2{
        padding: 0;    
    }
    .col-1-4{
        display: none !important;
    }
    .leistungen-img-c {
	    display: none;
    }
    .col-1-2{
        width: 100%;
    }
    #map{
        display: none !important;
    }
    .logo {
        background-image: url("images/logo.png");
        background-size: contain;
        display: block;
        width: 100%;
        height: 100px;
    }
    #nav{
        display: none;
    }
    .ref-item {
	    width: 100%;
	    height: 350px;
	    margin: 25px 0;
    }
    .ref-item-2 {
	    margin: 25px 0px;
    }
    .submit {
	    width: 50%;
    }
    .copyright col-1-2 {
	    text-align: center;
    }
    #copyright .container .row p {
	text-align: center;
    }
    #copyright .container .row .rightfloat p {
	text-align: center;
}
}