html,body {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

a,p,h1,h2,h3,li,span {
	color:#fff;
	font-family: HelveticaNeue,helvetica-clone,sans-serif;
	text-decoration: none;
}

h2 {
	font-size: 32px;
}

h3 {
	font-size: 24px;
}

p,li {
	line-height: 24px;
	font-size: 18px;
}

p.quote {
	font-size: 20px;
	line-height:32px;
}

blockquote {
	margin-top:48px;
	text-align: center;
}

#impressum {
	display: none;
}

.decorated {
	text-decoration: underline;
}

.quote-source {
	color:#000;
	font-size: 12px;
	text-align: center;
}

ul.none {
	list-style-type: none;
	padding-left: 0;
	margin-bottom: 46px;
}

ul.none li {
	line-height:46px;
	border-bottom: 1px solid #e6e6e6;
}

ul.dash {
	list-style-type: bullet;
	padding-left: 16px;
	margin-bottom: 48px;
}

ul.dash li {
	line-height:32px;
}

.navbar {
	position:absolute;
	z-index:10;
	box-sizing: border-box;
	width:100%;

	top: 0px;
	left: 0px;

	padding-top:8px;
	padding-bottom:8px;
	padding-left:16px;
	padding-right:16px;
}

.section {
	box-sizing: border-box;
	width:100%;
	padding-top:32px;
	padding-bottom:32px;
}

.section-bullets {
	background-color:#00384c;
}

.section-services {
	background-color:#00384c;
}

.section-me {
	background-color:#fff;
	padding-top:0px;
	padding-bottom:0px;
}

.section-team {
	background-color:#00384c;
	padding-top:0px;
	padding-bottom:0px;
}

.section-contact {
	background-color:#fff;
	padding-top:64px;
	padding-bottom:64px;
}

.section-impressum {
	background-color:#fff;
}

.section-testemonial {
	/*background-color:#e6e6e6;*/
	margin-top: 100vh;
	background-color:#00384c;
}

.section-testemonial2 {
	/*background-color:#e6e6e6;*/
	margin-top: 0px;
	background-color:#00384c;
	height:50vh;
}

.section-offer {
	background-color:#00384c;
	padding-top:0px;
	padding-bottom:0px;

}

.application-text-container p {
	color: #000;
	font-size: 32px;
	line-height: 48px;
}

.application-text-container a {
	color: #000;
	font-size: 24px;
	line-height: 32px;
}

.application-text-highlighted {
	color: #873846;
}

.section-testemonial h1,
.section-testemonial h2,
.section-testemonial h3,
.section-testemonial p {
	/*color:#616A6B;*/
	color:#fff;
}

.section-testemonial h2 {
	font-size:32px;
	line-height: 48px;
}

.section-services {
	background-color:#fff;
	padding-top:0px;
	padding-bottom:0px;
}

.section-services h1,
.section-services h2,
.section-services h3,
.section-services p,
.section-services li{
	color:#000;
}

.section-me h1,
.section-me h2,
.section-me h3,
.section-me p,
.section-me li,
.section-contact h1,
.section-contact h2,
.section-contact h3,
.section-contact p,
.section-contact li,
.section-contact a,
.section-impressum h1,
.section-impressum h2,
.section-impressum h3,
.section-impressum p,
.section-impressum li,
.section-impressum a {
	color:#000000;
}

.section-offer h1,
.section-offer h2,
.section-offer h3,
.section-offer p,
.section-offer li {
	color:#fff;
}

.section-sample1 {
	background: #873846;
}

.section-sample2 {
	background: #00384c;
}


.header {
	height:60px;
}

.application-text-container {
	position:relative;
	left:165px;
}

.logo-overlay {
	box-sizing: border-box;
	position: absolute;
	bottom: 48px;
	right: 48px;

	border-radius: 10px;
}

.logo-overlay-white {
	background-color: rgba(255,255,255,0.7);
}

.logo-overlay-white-on-small-screen {
		background-color: none;
}

.logo {
	position:relative;
	z-index: 10;
	display:block;
	height: 180px;

	padding-top:16px;
	padding-bottom:16px;
	padding-left:32px;
	padding-right:32px;
}

.logo-small {
	position:relative;
	z-index: 10;
	display:block;
	height: 100px;
	/*padding-top:8px;
	padding-bottom:8px;
	padding-left:16px;
	padding-right:16px;*/
}

.btn {
	position: relative;
	display:block;

    width: 150px;
    padding: 15px 0 15px 0;

	background-color: #00384c;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: .2px;
    text-align: center;
	text-decoration: none;
    color: #fff;
    border-radius: 4px;
    transition: color,.3s;
}

@media (hover: hover) {
    .btn:hover {
		background-color:#873846;
	}

	.left:hover, .right:hover {
		/*background-color: rgba(115, 115, 115, 0.8);  */
		background-color:#00384c;
	}
}

.content-header {
	max-width:100%;
	height:60px;
}

.content {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	margin-left:auto;
	margin-right:auto;

	/*border: 1px solid #000000;*/
}

.content-default {
	max-width:80%;
}

.content-testemonial {
	max-width:80%;
	height:300px;
}

.content-impressum {
	box-sizing: border-box;
	max-width: 80%;
	padding-left: 32px;
	padding-right: 32px;
}

.content-bullets {
	display:flex;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
	max-width:80%;
	margin-left:auto;
	margin-right:auto;

	/*border: 1px solid #000000;*/
}

.content-bullets > div {
	padding:32px;
}

.content-services {
	display:flex;
	flex-wrap: nowrap;
	justify-content:space-evenly;
	align-items:center;
	width:100%;
	margin-left:auto;
	margin-right:auto;

	/*border: 1px solid #000000;*/
}

.content-team {
	flex-wrap: wrap;
}

/*.content-services-text {
	box-sizing: border-box;
	padding:32px;
}*/

.content-services-img {
	box-sizing: border-box;
	height:100vh;
	width:50%;
}

.content-me-img-container  {
	box-sizing: border-box;

	width:50%;
	height:100vh;

	/*
	if img as separate element:
	*/
	display: flex;
	justify-content: center;
	align-items: center;

}

.content-me-img  {
	box-sizing: border-box;
	height:100vh;
	width:50%;

	/*
	if img as separate element:

	display: flex;
	justify-content: center;
	align-items: center;
	*/
}


.content-team-container  {
	box-sizing: border-box;
	height:50vh;
	width:50%;

	display: flex;
	flex-wrap: wrap;
	flex-direction:row;
	justify-content: flex-end;
	align-items: flex-start;
	align-self: flex-start;

}

.content-team-text {
	height:50vh;
	min-height:350px;
}


.content-contact-img-container  {
	box-sizing: border-box;

	width:50%;

	/*
	if img as separate element:
	*/
	display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;

}

.content-contact-buero-img  {
	box-sizing: border-box;

	width:60%;
	height:180px;

	/*
	if img as separate element:

	display: flex;
	justify-content: center;
	align-items: center;
	*/

	background: rgba(255,255,255,0);
    background-image: url(../img/ingenieurbuero.jpg);
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

.content-contact-buero-claim-img  {
	box-sizing: border-box;

	width:60%;
	height:180px;

	/*
	if img as separate element:

	display: flex;
	justify-content: center;
	align-items: center;
	*/

	background: rgba(255,255,255,0);
    background-image: url(../img/ingenieurbuero-claim.jpg);
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

.img-me {

	background: rgba(255,255,255,0);
    background-image: url(../img/manuel_1800.jpg);
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.img-member {

	width:100%;
	height:50vh;
	min-height:350px;

	background: rgba(255,255,255,0);

	display: flex;
	flex-wrap: nowrap;
	flex-direction:column;
	justify-content: flex-end;
	align-items: flex-start;
}

.img-member1 {
	background-color:#F3F3FA;
	background-image: url(../img/valentin_1600.jpg);
    background-repeat: no-repeat;
    background-position: 15% 50%;
    background-size: contain;
}

.img-member2 {
	background-color:#F3F3FA;
	background-image: url(../img/robin.jpg);
    background-repeat: no-repeat;
    background-position: 15% 50%;
    background-size: contain;
}

.img-member3 {
	background-color:#F3F3FA;
	background-image: url(../img/damian_1600.jpg);
    background-repeat: no-repeat;
    background-position: 15% 50%;
    background-size: contain;
}

.img-member4 {
	background-color:#F3F3FA;
	background-image: url(../img/robin-mueller.png);
    background-repeat: no-repeat;
    background-position: 15% 50%;
    background-size: contain;
}

.img-member5 {
	background-color:#F3F3FA;
	background-image: url(../img/karin.png);
    background-repeat: no-repeat;
    background-position: 15% 50%;
    background-size: contain;
}

.img-member-logo {
	background-color:#F3F3FA;
	background-image: url(../img/qpunkt.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 25%;
}

.img-member-qpunkt {


	width:100%;
	height:100%;

	display: flex;
	flex-wrap: nowrap;
	flex-direction:column;
	justify-content: flex-end;
	align-items: flex-start;

	background-image: url(../img/team_background.png);
    background-repeat: no-repeat;
    /*background-position: 50% 50%;
    background-size: auto 70%;*/
	background-position: 85% 40%;
	background-size: 40%;
}

.img-member-desc{
	padding:15px;
}

.member-title {
	line-height:18px;
}

.member-position {
	font-size:14px;
	line-height:20px;
}

.member-desc {

	box-sizing: border-box;

	width:100%;
	height:130px;
	background-color: rgba(0,56,76,0.7);

    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
}

.member-desc-logo {
	background-color: transparent;
	justify-content: center;
	align-items: start;

	line-height: 18px;
	font-size: 18px;
}

.member-desc-logo a {
	margin: 18px;
	color: #000;
}

.member-desc-content {
    box-sizing: border-box;
    width: 30vw;
    padding-left: 32px;
}

.img-services {

	background: rgba(255,255,255,0);
    background-image: url(../img/services_800.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.img-offers {

	order: 2;

	background: rgba(255,255,255,0);
    background-image: url(../img/offer_3800.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.text-offers {
	order: 1;
}

.content-services-text {
	width:50%;

	display:flex;
	flex-wrap:nowrap;
	justify-content:space-evenly;
	align-items:center;

	/*border: 1px solid #ff0000;*/
}

.content-services-text-team {
	width:100%;
}

.content-text-content {
	box-sizing: border-box;
	width:30vw;
	padding-left:32px;

	/*border: 1px solid #0000ff;*/
}

.content-text-centered {
	box-sizing: border-box;
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
	max-width:80%;
	text-align:center;
}


.content-text-content-me {
	width:90%;

	/*border: 1px solid #0000ff;*/
}

.testemonial {
	text-align: center;
}

.grid {
	display: grid;
	grid-template-columns: 33% 33% 33%;
	grid-template-rows: auto auto;
	align-items: start; /* top of cell */
	justify-items: start; /* left of cell */
}

.showSlide {
	display: none
}
/*.showSlide img {
	width: 100%;
}*/
.slidercontainer {
	/*height: calc(100vh - 60px);*/
	/*max-height: calc(100vh - 60px);*/

	/* old
	max-width: 100%;
	position: relative;
	margin: auto;  */

	position:fixed;
	z-index: -10;

	display: block;

	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;

    border-style: none;
    /*margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    border-radius: 0px;
    width: 100%;
	max-height: 100vh;*/
}

.slide0 {

	width:100%;
	height:100%;

	background: rgba(255,255,255,0);
    background-image: url(../img/banner3800.jpg);
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}

.slide1 {

	width:100%;
	height:100%;

	background: rgba(255,255,255,0);
    background-image: url(../img/stage1_plan_2800.jpg);
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}

.slide2 {

	width:100%;
	height:100%;

	background: rgba(255,255,255,0);
    background-image: url(../img/stage2_notebook_2800.jpg);
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}

.slide3 {

	width:100%;
	height:100%;

	background: rgba(255,255,255,0);
    background-image: url(../img/stage3_screens_2800.jpg);
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}

.slide4 {

	width:100%;
	height:100%;

	background: rgba(255,255,255,0);
    background-image: url(../img/stage4_whiteboard_2800.jpg);
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}

.left, .right {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;

	width:50px;
	height:50px;
	background-image: url(../img/keyboard_arrow_left-white-48dp.svg);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}
.right {
	right: 0;
	border-radius: 3px 0 0 3px;

	background-image: url(../img/keyboard_arrow_right-white-48dp.svg);
}

.slide-overlay {
	box-sizing: border-box;
	position: absolute;
	bottom:10%;
	right: 10%;
}

.slide-content {
	box-sizing: border-box;
	position: relative;
	bottom:10%;
	left:10%;

	/*padding-top:8px;
	padding-bottom:8px;
	padding-left:16px;
	padding-right:16px;*/

	font-size: 30px;
}

.slide-content-background {
	position: absolute;
	width:568px;
	height:180px; /* adjust depending on logo */
	background-color: rgba(255,255,255,0.7);

	/*background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.700717787114846) 35%, rgba(255,255,255,0) 100%);*/

	z-index: 5;
}

.slide-content-background-transparent {
	background-color: rgba(255,255,255,0);
}

.active {
	background-color: #717171;
}

/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}
@-webkit-keyframes fade {
	from {
		opacity: .4
	}
	to {
		opacity: 1
	}
}

@keyframes fade {
	from {
		opacity: .4
	}
	to {
		opacity: 1
	}
}

.footer-item {
	line-height:32px;
	padding-left: 32px;
}

@media only screen and (max-width: 2600px) {
	.img-services {
		background-image: url(../img/services_2600.jpg);
	}
	.img-offers {
		background-image: url(../img/offer_2600.jpg);
	}
	.content-me-img  {
		background-image: url(../img/manuel_1800.jpg);
	}
}

@media only screen and (max-width: 2000px) {
	.slide0 {
		background-image: url(../img/banner2800.jpg);
	}
	.slide1 {
		background-image: url(../img/stage1_plan_2000.jpg);
	}
	.img-services {
		background-image: url(../img/services_2000.jpg);
	}
	.img-offers {
		background-image: url(../img/offer_2000.jpg);
	}
	.content-me-img  {
		background-image: url(../img/manuel_1800.jpg);
	}
}

@media only screen and (max-width: 1800px) {
	.img-services {
		background-image: url(../img/services_1800.jpg);
	}
	.content-me-img  {
		background-image: url(../img/manuel_1800.jpg);
	}
}

@media only screen and (max-width: 1200px) {
	.img-services {
		background-image: url(../img/services_1800.jpg);
	}
	.img-offers {
		background-image: url(../img/offer_1800.jpg);
	}
	.content-me-img  {
		background-image: url(../img/manuel_1600.jpg);
	}
}

@media only screen and (max-width: 1024px) {
	.img-services {
		background-attachment: scroll;
	}
	.img-offers {
		background-attachment: scroll;
	}
}

@media only screen and (max-width: 1024px) {
	.logo-overlay {
		right:50%;
		-webkit-transform: translateX(50%);
		transform: translateX(50%)
	}
	.logo-overlay-white-on-small-screen {
			background-color: rgba(255,255,255,0.7);
	}
	.application-text-container p {
		font-size: 24px;
		line-height: 32px;
	}

	.application-text-container a {
		font-size: 16px;
		line-height: 24px;
	}
	.slide0 {
		background-image: url(../img/banner2000.jpg);
	}
	.slide1 {
		background-image: url(../img/stage1_plan_1000.jpg);
	}
	.slide2 {
		background-image: url(../img/stage2_notebook_1000.jpg);
	}
	.slide3 {
		background-image: url(../img/stage3_screens_1000.jpg);
	}
	.slide4 {
		background-image: url(../img/stage4_whiteboard_1000.jpg);
	}
	.img-services {
		background-image: url(../img/services_1000.jpg);
	}

	.img-offers {
		background-image: url(../img/offer_1000.jpg);
		order: 1;
	}
	.text-offers {
		order: 2;
	}

	.content-me-img  {
		background-image: url(../img/manuel_1200.jpg);
		width:100%;
		height:620px;
	}


	.content-services {
		flex-wrap: wrap;
	}

	.content-services-text {
		width: 100%;
		padding-top:48px;
		padding-bottom:48px;
	}

	.content-text-content {
		width: 100%;
		padding-right:32px;
	}

	.content-me-img-container  {
		width:100%;
		height: auto;
	}

	.content-services-img {
		width:100%;
		height: 100vw;
	}

	.content-contact-buero-img  {
		width:80%;
		height:240px;
	}

	.content-contact-img-container  {
		width:100%;
	}
	.content-contact-buero-claim-img  {
		width:80%;
		height:180px;
	}
	.content-impressum {
		max-width: 100%;
	}

	.content-team-container  {
		width:100%;
		height:auto;
	}

    .member-desc-content {
        box-sizing: border-box;
        width: 100%;
        padding-left: 32px;
    }
}

@media only screen and (max-width: 600px) {
	.logo {
		height: 110px;
	}
	.application-text-container {
		left:34px;
	}
	.application-text-container p {
		font-size: 24px;
		line-height: 32px;
	}

	.application-text-container a {
		font-size: 16px;
		line-height: 24px;
	}
	.slide0 {
		background-image: url(../img/banner800.jpg);
	}
	.slide1 {
		background-image: url(../img/stage1_plan_800.jpg);
	}
	.content-services-img {
		width:100%;
		height:100vw;
	}
	.img-services {
		background-image: url(../img/services_800.jpg);
		background-position: 0% 0%;
		background-size: 100vw 100vw;
	}
	.img-offers {
		background-image: url(../img/offer_800.jpg);
		background-position: 0% 0%;
		background-size: 100vw 100vw;
	}
	.content-me-img  {
		background-image: url(../img/manuel_800.jpg);
		height:380px;
	}
	.img-member {
		width:100%;
	}

	.img-member-qpunkt {
		background-image:none;
	}

	.img-member1 {
		background-position: 50% 50%;
	}

	.img-member2 {
		background-position: 50% 50%;
	}

    .img-member3 {
		background-position: 50% 50%;
	}
    
    .img-member-logo {
        background-size: 40%;
    }

	.content-contact-buero-img  {
		width:80%;
		height:180px;
	}

	.section-testemonial h2 {
		font-size:24px;
		line-height: 32px;
	}

	.footer-item {
		width:100%;
	}
}

@media only screen and (max-width: 400px) {
	.logo {
		height: 110px;
	}
	.img-services {
		background-image: url(../img/services_800.jpg);
	}
	.img-offers {
		background-image: url(../img/offer_800.jpg);
	}
	.content-me-img  {
		background-image: url(../img/manuel_800.jpg);
	}
}