html, body{
    height: 100%;
    margin: 0;
    font-family: "Open Sans", sans-serif;
}

h1, h2{
    margin: 0;
}
h1 span,h2 span{
    font-weight: 100;
}
h1.slogan{
    font-size: 60px;
    text-align: center;
}

h2.slogan{
    font-size: 60px;
    text-align: center;
}

h3{
    font-size: 23px;
    font-weight: 700;
    text-align: center;
}
h4.slogan{
    font-size: 15px;
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}

a {
    color:#000;
}

.bold{
    font-weight: 700;
}

.clear{
    clear:both;
}

p{
    font-size: 20px;
}

header{
    width:100%;
    text-align: center;
    height:888px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url("../img/header.webp");
}

header span {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}

header h1 {
  font-size: 100px;
  font-weight: 700;
  color: #fff;
  max-width: 991px;
  text-align: center;
  margin: 0;
  text-shadow: 2px 5px 5px rgba(0, 0, 0, 0.67);
  vertical-align: middle;
  display: inline-block;
  text-transform: uppercase;
}
.sticky {
    position: fixed;
    width: 75%;
    left: 0;
    top: 0;
    z-index: 1001;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    padding-left: 15%;
    padding-right: 15%;
    background-color: #fff;
    box-shadow: 0px 3px 5px #888888;
    opacity: 0.9;
}

.sticky a {
    color:#000;
    text-decoration: none;
}

.nav h1 {
    color:#fff;
}
.nav{
    position:absolute;
    padding-left: 15%;
    padding-right: 10%;

    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    margin-top:0px;
    width:75%;
}

.nav ul,.sticky ul{
    width:auto;
    padding-left:0px;
	margin: 14px 0 13px auto;
}

.nav ul li,.sticky ul li{
    float:left;
    margin: 0px 10px;
    list-style-type: none;
}

.nav a{
    color:#fff;

    text-decoration: none;
}

.content{
    margin-left: 5%;
    margin-right: 5%;
}

.kompetenzen{
/*
    margin-top:100px;
    margin-bottom:100px;
*/
}

.kompetenzen .border{
        height:87px;
        width:auto;
    }

.kompetenzen .row, .team .row{
    margin-top:75px;
}

.kompetenzen , h1 h2 .p{
    text-align: center;

}
.kompetenzen h2
{
    font-size: 12px;
    font-weight: 400;
}
.kompetenzen p{
    margin-top:20px;
    font-weight: 100;
}
.kompetenzen img{
    display:block;
    margin:auto;
}
.entwicklung {
    min-height:685px;
    padding-left: 5%;
    padding-right: 5%;
    padding-top:35px;
    background-color: #e33115;
    color:#fff;
}
.entwicklung a{
    color: #fff;
    text-decoration: none;
}
.entwicklung p
{
    max-width:660px;
}
.entwicklung b{
    font-weight: 700;

}


.linearis a{
    color:#fff;
    text-decoration: none;
}
.linearis h2{
    padding-top:50px;
}

.carusel{
    margin-top:40px;
    margin-bottom:80px;
    width:90%;
    overflow:hidden;
    height:120px;

}
.carusel ul{

    margin-top:0px;
}
.carusel ul li{
    float:left;
    margin: 0px 0px 0px 0px;
    list-style-type: none;
    height: auto;
    line-height: 60px;

}
.carusel ul li img{
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    vertical-align: middle;
}
.carusel ul li img:hover{
    -webkit-filter: grayscale(0%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    vertical-align: middle;
}

@media only screen and (min-width: 1100px) {

    .linearis
    {
        background-image: url("../img/referenzen-linearis.webp");
        background-size: 80% auto;
        background-repeat: no-repeat;
        background-position: center top;
        background-color: #000;
        height:720px;
        text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.67);
        color:#fff;

    }
    .linearis-small{
        display:none;
    }
    .linearis p{
        max-width:350px;
    }

    .gradiant{
        width:75%;
        height:100%;
        padding-left: 5%;
        background: -moz-linear-gradient(left, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.95)), color-stop(52%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, rgba(0,0,0,0.100) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, rgba(0,0,0,0.95) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left, rgba(0,0,0,0.95) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%); /* IE10+ */
        background: linear-gradient(to right, rgba(0,0,0,0.99) 0%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
    }

}
@media only screen and (min-width: 1300px) {
    .content{
        margin-left: 15%;
        margin-right: 15%;
    }
    .entwicklung {
        padding-left: 15%;
        padding-right: 15%;
    }
    .gradiant{
         padding-left: 15%;
    }
    .carusel{
        width:70%;
    }
    .footer{
        width:70%;
    }


}
@media only screen and (max-width: 1100px) {

    .linearis
    {
        background-color: #000;
        padding-right: 5%;
        padding-left: 5%;
        padding-bottom: 50px;
        margin-top: 0px;
        text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.67);
        color:#fff;
    }
    .linearis p,.linearis b, .linearis a, .linearis h2{

        max-width:930px;
    }
    .linearis-small{
        width:100%;
        display:inherit;
    }

    .carusel{
        display: none;
    }

}

.angebot{

    min-height: 450px;
    margin-left:0;
    margin-right:0;
    margin-top:50px;
    padding-bottom:50px;
}
.angebot p,.angebot h3{

    text-align: center;
    color:#fff;
}
.angebot .columns{
    margin-top:25px;
    height:350px;
    background-color: #393939;
}
.angebot .col-6:first-of-type{

    background-color: #aeaeae;
}
#programmierung, #service{
    position: relative;

}

#backgroundwhite {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: 1;
   overflow: hidden;
   font-size: 400px;
   line-height: 400px;
   font-weight: 700;
   color:#fff;
}
#backgroundblack {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: 2;
   overflow: hidden;
   line-height: 400px;
   font-size: 400px;
   font-weight: 700;
   color:#000;
}

.content.blog{
    margin-bottom: 50px;
    margin-top: 50px;
}
.content.blogpost, .content.bloglist{
    margin-top:80px;
}

.blog .slogan{
    margin-bottom: 50px;
}

.blog h1{
    text-align: center;
    font-weight: bolder;
}

.blog .post a{
    text-decoration: none;
}
.blog  p{
    font-size: 22px;
    line-height: 32px;
}
.blog .post a:hover{
    text-decoration: underline;
}

.blog .post{
    min-height:250px;

}
.blog .author{
    text-align: center;
    display: block;
    font-size: 18px;
}

.bloglist .post {
    margin-right: 0%;
    margin-left: 0%;
}

.blog img {
    width: 100%;
    height: auto;
}


.member{
    width: 140px;
    height: 140px;
    background-position: center center;
    background-repeat: no-repeat;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: gray;

    border-radius: 77px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.desc{
    text-align: center;
    font-weight: 100;
}

p.name{
    font-size: 16px;
    text-align: center;
    margin-bottom: 35px;
    margin-top:30px;

}

#andreas{

    background-image: url("../img/team-andreas.webp");
    background-position: -20px 0px;

}
#elisabeth{
    background-image: url("../img/team-elisabeth.webp");
    background-size: 140px auto;
    background-position: 0px 0px;
}
#bernhard{
    background-image: url("../img/team-bernhard.webp");
}
#david{
    background-image: url("../img/team-david.webp");
    background-position: -5px -36px;
}

.contact {
    font-weight: 100;
    padding-top: 30px;
}
.contact.footer{
/*     height: 200px; */
}
.contact h2{
/*     margin-top:35px; */
    margin-bottom:30px;
}
.contact p{
    margin-top:0px;
    margin-bottom: 5px;
}
#map { height: 500px; }

.footer{
    border-top: 1px solid #ccc;

    width:90%;
    height:60px;
}

.footer ul{
    width: auto;
    height:60px;
    margin-left: auto;
    margin-right: 0px;
    padding-left: 0px;
    font-size: 11px;
}

.footer ul li{
    float:left;
    margin: 0px 10px 0px 0px;
    list-style-type: none;

}

.footer a{
    text-decoration: none;

}
.footer a:hover{
    text-decoration: underline;
}

.row{
    width: 100%;
    position: relative;

}
.row:before, .row:after {
    content: " ";
    display: table;
}
.row:after{
    clear: both;
}
.columns{
    float: left;
    width: 100%;

}
@media only screen and (min-width: 1300px) {

    .footer{
        width:70%;
    }


}
@media only screen and (min-width: 768px) {

    .col-6{
        width:50%;
    }
    .col-3{
        width:25%;
    }
    .col
    {
        width: 50%;
        float:left;
    }

    .entwicklung .col:nth-child(3){
        text-align: center;
        margin-top:55px;
    }

}


@media only screen and (max-width: 767px) {
/*
    .nav ul li,.sticky ul li{
	font-size:11px;
    }
*/


/*
    .nav h1 {
        display:none;
    }
*/
/*
    .nav ul,.sticky ul{
        margin-left: auto;
        margin-right: auto;
    }
*/
/*
    .nav{

        width: 90%;
        font-size: 12px;
        font-weight: 700;
    }
*/
    .content{
        margin-left: 5%;
        margin-right: 5%;
    }
    .nav, .entwicklung, .linearis{
        padding-left: 5%;
        padding-right: 5%;
    }

     .sticky{
        padding-left: 5%;
        padding-right: 5%;
        width: 90%;
    }
    .kompetenzen{
        margin-top:25px;
        margin-bottom:25px;
    }


    .kompetenzen .row, .team .row {
        margin-top: 15px;
    }
    h1.slogan{
        font-size: 30px;
        text-align: center;
    }

    h2.slogan{
        font-size: 30px;
        text-align: center;
        padding-top:25px;
    }
    header{
        height:444px;
    }
    header h1{
        font-size: 30px;
    }
    .col-6{
        width:100%;
    }
    .col-3{
        width:100%;
    }
    div.beschreibung{
        height: auto;
    }

    .col img.referenzen{
        width:50%;
        height:auto;
        display: inherit;
        margin-left: auto;
        margin-right: auto;
    }
    .linearis {
        padding-bottom:25px;
    }
    .linearis h2{
        padding-top:25px;
    }

    .contact {
        font-size: 12px;
/*         margin-bottom: 50px; */
    }
    .contact h2, .contact h1{
/*         margin-top:25px; */
        margin-bottom:20px;
    }

    div.content.contact .col-3,div.content.contact h2, div.content.contact h1{

    }
    .und{
        display:none;
    }
    #service{
        margin-top:0px;

    }

    .carusel{
        overflow: visible;
        height:100%;
        width:100%;
    }
    .carusel ul{
        margin-left: auto;
        margin-right: auto;
    }

    .desc, .kompetenzen p{
        margin-right:5%;
        margin-left:5%;
    }

    .angebot{
        margin-top:0px;
    }

    .contact.footer{
/*         height: 337px; */
    }

}


/* David Changes */
.contact.footer {
	height: auto;
	border-top: none;
}

.contact.footer:after {
	content: ' ';
	display: block;
	clear: both;
}

.contact.footer .col-3.columns {
	padding-bottom: 30px;
	width: 29%;
}

.contact.footer > .col-3.columns:last-of-type {
	text-align: right;
	width: 13%;
}

@media only screen and (max-width: 1065px) {
	.contact.footer .col-3.columns, .contact.footer > .col-3.columns:last-of-type {
		width: 50%;
		text-align: left;
	}
}

@media only screen and (max-width: 670px) {
	.contact.footer .col-3.columns, .contact.footer > .col-3.columns:last-of-type {
		width: 100%;
		text-align: left;
	}
}

.content {
	position: relative;
}

@media only screen and (max-width: 860px) {
	.nav, .sticky {
		width: 90%;
		padding: 0 5%;

	}
}

@media only screen and (max-width: 690px) {
	header {
		min-height: 350px;
		background-size: cover;
	}

	.nav {
		padding-top: 35px;
	}
	
	.nav h1 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		text-align: center;
	}
	
	.sticky h1 {
		display: none;
	}
	
	.nav ul, .sticky ul {
		text-align: center;
		margin-right: auto;
	}
	
	.nav li, .sticky li {
		float: none !important;
		display: inline-block;
	}
}

.content, .entwicklung {
	position: relative;
}

.anchor {
	position: absolute;
	top: 0;
	left: 0;
}

.kompetenzen, .team, .contact, .entwicklung {
	padding-top: 70px;
	padding-bottom: 70px;
}