/*
Theme Name: WDI LandingPages
Author: Simon Schmidt, WOLFRAM Designer und Ingenieure
Author URI: http://wolframdesign.de
Version: 0.1
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* CSS reset end */

*, ::before, ::after { 
	box-sizing: border-box; 
	-webkit-transition: color .5s, background-color .2s, border .2s; 
	transition: color .5s, background-color .2s, border .2s;
  }

html{
	font-size:1em;
	line-height:1.5em;
	width:100%;
	height:100%;
	font-family: 'Open Sans', sans-serif;
}

body{
	min-height:100%;
	width:100%;
}

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

.listicon{
	width:150px;
	height:150px;
	background-position:left center;
}

.list.visible .listicon{
	animation:play 10s steps(60) infinite;
}

#second-list .listicon{
	animation-delay:2s;
}

#third-list .listicon{
	animation-delay:4s;
}

#fourth-list .listicon{
	animation-delay:6s;
}

.listicon:hover, #first-list .listicon:hover, #second-list .listicon:hover, #third-list .listicon:hover, #fourth-list .listicon:hover{
	animation:playhover 4s steps(60) infinite;
	animation-delay:0s !important;
}

@keyframes play {
  	0% { background-position: 9000px; }
	20% { background-position: 9000px; }
	40% { background-position: 0px; }
	100% { background-position: 0px; }
}

@keyframes playhover {
  	0% { background-position: 9000px; }
	50% { background-position: 0px; }
	100% { background-position: 0px; }
}

.contentframe, .card{
	width:1280px;
	margin:0 auto;
	height:100%;
}

h1{
	font-size:3em;
	font-weight:bold;
	text-transform:uppercase;
}

h2{
	font-size:2em;
	line-height:1.4em;
	margin-bottom:.5em;
}

h3{
	font-weight:bold;
	text-transform:uppercase;
	margin-bottom:1em;
	line-height:1.4em;
}

nav{
	margin-top:10vh;
	width:100%;
	z-index:99;
}

#logo{
	width:95px;
	margin-left:-100px;
	float:left;
}

#logo img{
	height:42px;
	margin-right:10px;
}

nav ul{
	height:42px;
}

nav li{
	display:inline;
	margin-right:1em;
	line-height:1em;
}

nav a svg{
	fill:white;
	transition:fill 0.5s;
}

nav a:hover svg{
	fill:rgb(55,55,55);
}

nav a:hover{
	color:rgb(55,55,55);
}

p{
	line-height:1.8em;
}

.pagetext p{
	margin-bottom:15px;
}

.pagetext ul li{
    list-style: disc;
    padding-left: 10px;
    margin-left: 20px;
    margin-bottom: 10px;
}

strong{
	font-weight: bold;
}

a:visited{
	color:white;
}

a{
	color:white;
	text-decoration:none;
	cursor:pointer;
}

.wpcf7-list-item-label a{
	color:black;
}

li{
	line-height:1.5em;
}

#abovethefold{
	height:90vh;
}

.topic{
	justify-content:flex-end;
}

#slideshow{
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	overflow:hidden;
	z-index:-1;
}

#slideshow img {
	object-fit:cover;
    position:absolute;
	height:100%;
	width:100%;
    opacity:0;
    -webkit-transition: opacity 3s, -webkit-transform 10s;
       -moz-transition: opacity 3s, -moz-transform 10s;
        -ms-transition: opacity 3s, -ms-transform 10s;
         -o-transition: opacity 3s, -o-transform 10s;
            transition: opacity 3s, transform 10s;
}

#slideshow img  {
	-webkit-transform-origin: bottom right;
	   -moz-transform-origin: bottom right;
		-ms-transform-origin: bottom right;
		 -o-transform-origin: bottom right;
			transform-origin: bottom right;
}

#slideshow :nth-child(2n+1) {
    -webkit-transform-origin: top right;
       -moz-transform-origin: top right;
        -ms-transform-origin: top right;
         -o-transform-origin: top right;
            transform-origin: top right;
}

#slideshow :nth-child(3n+1) {
    -webkit-transform-origin: top left;
       -moz-transform-origin: top left;
        -ms-transform-origin: top left;
         -o-transform-origin: top left;
            transform-origin: top left;
}
#slideshow :nth-child(4n+1) {
    -webkit-transform-origin: bottom left;
       -moz-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
         -o-transform-origin: bottom left;
            transform-origin: bottom left;
}

#slideshow .fx:first-child + img ~ img  {
    z-index:-1;
}

#slideshow .fx {
    opacity:1;
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);
}

.headline{
	width:50%;
	color:white;
	line-height:4em;
	margin:auto 0;
}

.button{
	height:42px;
	padding:0 2em;
	background-color:rgb(55,55,55);
	color:white;
	text-transform:uppercase;
	display:inline-block;
	border:1px solid rgba(55,55,55);
	border-radius:5px;
	margin-top:2em;
	line-height:36px;
}

.button:hover{
	background-color:rgb(0,0,0)
}

.flex{
	display:flex;
	align-items:flex-start;
}

.clmn{
	flex-direction:column;
}

.vcenter{
	justify-content:center;
}

.vlcenter{
	align-items:center;
}

.end{
	align-items:flex-end;
}

.between{
	justify-content:space-between;
}

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-72 { font-size: 72px; }

#projects{
	height:calc(25vw * 2);
}

#mobileprojecttitle{
	display:none;
}

.grid{
	display:grid;
	grid-template-columns:25% 25% 25% 25%;
	grid-template-rows:1fr 1fr;
}

.wpcf7-form{
	display:grid;
	grid-template-columns:auto 42px max-content;
	/*grid-template-rows: 1fr 1fr 1fr 3fr;*/
	grid-template-areas:
	'grid-name grid-dsgvo grid-dsgvo'
	'grid-telefon grid-callback grid-callback'
	'grid-email grid-newsletter grid-newsletter'
	'grid-nachricht grid-nachricht .'
	'grid-response grid-response .'
	;
	/*min-height:430px;*/
	transition:all .5s;
}

.chatBox .wpcf7-form{
	display:grid;
	grid-template-columns:auto 42px max-content;
	/*grid-template-rows: max-content;*/
	grid-template-areas:
	'grid-nachricht grid-nachricht .'
	'grid-name grid-name .'
	'grid-telefon grid-callback grid-callback'
	'grid-email grid-dsgvo grid-dsgvo'
	'grid-sendButton grid-sendButton .'
	'grid-response grid-response .'
	;
	/*min-height:auto;*/
	transition:all .5s;
}

.chatBox input[name=your-name]{
	margin-right:0;
	width:100%;
	margin-top:0;
}

.chatBox input[type=submit]{
	margin-right:0;
	width:100%;
	background-color:rgb(50,50,50);
	color:white;
	cursor:pointer;
}

/*.chatBox input, .chatBox textarea, .chatBox input[type="checkbox"]:not(:checked) + .wpcf7-list-item-label::before, .chatBox input[type="checkbox"]:checked + .wpcf7-list-item-label::before{
	background-color:white;
}*/

.name{grid-area:grid-name;}
.dsgvo{grid-area:grid-dsgvo;}
.phone{grid-area:grid-telefon;}
.callback{grid-area:grid-callback;}
.mail{grid-area:grid-email;}
.newsletter{grid-area:grid-newsletter;}
.message{grid-area:grid-nachricht;}
.grid-sendButton{grid-area:grid-sendButton;}
.grid-response{grid-area:grid-response;}

span.wpcf7-list-item{
	margin-left:0 !important;
}

input.wpcf7-not-valid, textarea.wpcf7-not-valid, span.wpcf7-not-valid input[type="checkbox"] + .wpcf7-list-item-label::before {
	background-color:rgb(240, 220, 220);
}

input.wpcf7-not-valid:focus, textarea.wpcf7-not-valid:focus, span.wpcf7-not-valid:focus input[type="checkbox"] + .wpcf7-list-item-label::before {
	background-color:rgb(240, 240, 240);
}

/*input.wpcf7-not-valid:placeholder, input.wpcf7-not-valid::placeholder, input.wpcf7-not-valid:-ms-input-placeholder, input.wpcf7-not-valid::-ms-input-placeholder{
	color:white;
}*/

.wpcf7-not-valid-tip, .wpcf7-validation-errors{
	display:none !important;
}

form.sent .wpcf7-form-control, form.sent .wpcf7-form-control-wrap{
	display:none;
}

form.sent{
	height:100px !important;
	min-height:100px;
}

.wpcf7-mail-sent-ok{
	border-style:none !important;
	min-height:42px;
	line-height:36px;
	background-color:rgb(220, 240, 220);
	border-radius:5px;
	padding:0 1em;
	font-family:"Open Sans", sans-serif;
	font-size:.8em;
	text-align:center;
	margin:2em auto;
	width:auto;
}


.wpcf7 .ajax-loader{
	display:none !important;
}

.project{
	position:relative;
	padding:2em;
	text-align:right;
}

.project h3{
	margin-top:2em;
	-webkit-transition: all .5s; 
	transition: all .5s;
	border-bottom:4px solid rgba(0,0,0,0);
	padding-bottom:4em;
	margin-bottom:2em;
	opacity:0;
}

.project p{
	opacity:0;	
	-webkit-transition: all .5s; 
	transition: all .5s;
}

.project img{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	opacity:1;
	-webkit-transition: all .5s; 
	transition: all .5s;
	object-fit:cover;
}

.project:hover p{
	opacity:1;
}

.project:hover h3{
	margin-top:0;
	border-bottom:4px solid rgba(0,0,0,1);
	padding-bottom:2em;
	opacity:1;
}

.project:hover img{
	opacity:.2;
}

#first-project{
	grid-column:1 / 2;
	grid-row:1 / 3;
}

#second-project{
	grid-column:2 / 3;
	grid-row:1 / 2;
}

#third-project{
	grid-column:3 / 5;
	grid-row:1 / 2;
}

#fourth-project{
	grid-column:2 / 4;
	grid-row:2 / 3;
}

#fifth-project{
	grid-column:4 / 5;
	grid-row:2 / 3;
}

.dark h3{
	color:white;
}

.dark:hover h3{
	color: black;
}

#description{
	grid-column:1 / 3;
	grid-row:1 / 3;
}

#first-counter{
	grid-column:4 / 5;
	grid-row:1 / 2;
	margin-bottom:2em;
}

#second-counter{
	grid-column:4 / 5;
	grid-row:2 / 3;
}

#first-counter .number, #second-counter .number{
	margin-bottom:0;
}

#hardfacts, #competence{
	padding:8em 0 10em;
}

#contact{
	position:relative;
	padding-top:2em;
}

.list{
	flex-grow:1;
	flex-basis:25%;
	margin-top: 6em;
	max-height:100vh !important;
}

#second-list, #second-counter{
	transition-delay:.25s;
}

#third-list{
	transition-delay:.5s;
}

#fourth-list{
	transition-delay:.75s;
}

.number{
	font-size:2em;
	font-weight:bold;
	margin-bottom:1em;
	margin-top:1em;
}

.scrolllistener{
	transition: opacity 1s ease-in-out;
	opacity:0;
}

.visible{
	opacity:1;
}

#customers{
	background-color:rgb(240,240,240);
	padding:4em 0;
	text-align:center;
}

#customers{
	background-color:rgb(240,240,240);
	padding:4em 0;
	text-align:center;
}

#customers img{
	height:80px;
	width:auto;

}

#customers i{
	margin:0 1em;
	color:grey;
}

.card{
	border:1px solid white;
	box-shadow: 11px 11px 38px 11px rgba(0,0,0,0.11);
	background:white;
}

#contact .card{
	border-radius:10px 10px 0 0;
	padding-bottom:120px;
}

#footer .card{
	margin-bottom:4em;
	position:relative;
	z-index:99;
	box-shadow:none;
}

.form{
	padding:4em;
	position:relative;
}

.form h1{
	padding-bottom:2em;
}

.formline{
	position:relative;
}

input, textarea{
	border-style:none;
	height:42px;
	line-height:36px;
	background-color:rgb(240,240,240);
	border-radius:5px;
	margin-top:2em;
	margin-right:2em;
	padding:0 1em;
	font-family:"Open Sans", sans-serif;
	font-size:.8em;
}

textarea{
	min-height:42px;
	margin-right:0;
	height:168px;
	width:100%;
}

.chatBox textarea{
	margin-top:0;
	margin-bottom:2em;
	height:42px;
	transition:height 1s;
	transition-delay: 0ms;
}

.activeChatBox textarea{
	height:168px;
}

input{
	width:calc(100% - 2em);
}

input[type="checkbox"] {
	display:none;
}

.wpcf7-list-item-label{
	display:flex;
	align-items:center;
	cursor:pointer;
	font-size:.9em;
}

.wpcf7-response-output{
	border:none !important;
	line-height:1.6em;
	display:flex;
	margin: 15px 0 0 !important;
	padding: 0 !important;
}

.wpcf7-response-output::before{
	display:block;
	width:48px;
	content:'';
	background-image:url(img/invalid.svg);
	background-position: center;
	background-repeat:no-repeat;
	margin-right:12px;
}

.wpcf7-form.sent .wpcf7-response-output::before{
	background-image:url(img/valid.svg);
}

input[type="checkbox"]:not(:checked) + .wpcf7-list-item-label::before {
	height:42px;
	background-color:rgb(240,240,240);
	border-radius:5px;
	width:42px;
	content:'';
	margin-right:2em;
	cursor: pointer;
	text-align:center;
	padding-top:.5em;
	cursor:pointer;
	display:inline-block;
  }

  
input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
	height:42px;
	background-color:rgb(240,240,240);
	border-radius:5px;
	width:42px;
	content:url(img/baseline-done-24px.svg);
	margin-right:2em;
	cursor: pointer;
	text-align:center;
	padding-top:.5em;
	cursor:pointer;
	display:inline-block;
  }

.dsgvo, .callback, .newsletter{
	margin-top:calc(2em - 7px);
	white-space:nowrap;
}

.hidden{
	/*display:none;*/
	height:0;
	width:0;
	overflow:hidden;
}

textarea{
	min-height:42px;
	margin-right:0;
	height:168px;
	width:100%;
}

#sendbutton{
	cursor:pointer;
	height:90px;
	width:90px;
	border-radius:50px;
	background:url(img/baseline-send-24px.svg) 60% center / 60% no-repeat, url(img/baseline-send-24px.svg) -500% center / 60% no-repeat rgb(55,55,55) ;
	color:rgba(0,0,0,0);
	-webkit-transition: background-color .5s; 
	transition: background-color .5s;
	position:absolute;
	right:-45px;
	bottom:112px;
	margin:0;
}

#sendbutton:hover{
	background: url(img/baseline-send-24px.svg) 560% center / 60% no-repeat, url(img/baseline-send-24px.svg) 60% center / 60% no-repeat rgb(0,0,0);
	-webkit-transition: all .5s; 
	transition: all .5s;
}

/* #map{
	z-index:-2;
	height:calc(100vh - 500px);
}

#googlemap{
	width:100%;
	border:0;
	height:100vh;
	margin-top:-500px;
}*/

#map{
	width:100%;
	height:50vh;
	margin-top:-8em;
}

#footer{
	background:rgb(50,50,50);
	color:white;
	padding-top:0;
	padding-bottom:8em;
}

#company, #paragraph{
	flex-grow:1;
}

#paragraph{
	text-align:right;
}

#footerlogo{
	width:250px;
	margin-bottom:4em;
}

#footer a{
	min-height:48px;
	display:inline-block;
}

.icon-scroll{
  position:relative;
  width: 32px;
  height: 55px;
  border:2px solid white;
  border-radius: 25px;
  margin-bottom:10vh;
}

.icon-scroll:before{
  position:absolute;
  content: '';
  width: 8px;
  height: 8px;
  background: #fff;
  margin-left: 10px;
  top: 8px;
  border-radius: 4px;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: scroll;
}

.icon-cardslider{
	margin: -12px auto 0;
	display:block !important;
	width:32px;
	text-align:center;
	background-color:rgb(240,240,240);
}

.icon-scroll-horizontal{
  position:relative;
  width: 55px;
  height: 8px;/*32px*/
  margin: -4px auto; /*-16px*/
  background-color:rgb(240,240,240);
  /*border:2px solid black;
  border-radius: 25px;*/
}

.icon-scroll-horizontal:before{
  position:absolute;
  content: '';
  width: 8px;
  height: 8px;
  background: #000;
  left: 38px;
  /*margin-top:10px;*/
  border-radius: 4px;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: scroll-horizontal;
}

.projectdetails{
	width:100%;
}

.flexframe{
	display:flex;
	width:100%;
	height:100%;
}

.pagetext{
	color:black;
}

.pagetext a{
	color:grey;
}

.pageheaderheadline h1{
	margin:2em 0;
	color:black;
}

#paragraph #cookie-law-info-again {
    font-size: inherit !important;
    margin-bottom: 2em !important;
    padding: 0 !important;
    text-align:right !important;
	display:block !important;
	position:static !important;
	color:white !important;
	background-color:transparent !important;
	right:auto !important;
	box-shadow:none !important;
}

/*#scrolltopbutton{
	bottom:60px;
	transform:rotate(-90deg);
}*/

#chatbutton{
	bottom:60px;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 20s infinite;
	display:none;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#floatingButtons div{
	opacity:0;
	right:60px;
	width:50px;
	height:50px;
	border-radius:25px;
	background-color:rgb(50,50,50);
	text-align:center;
	padding-top:7px;
	position:fixed;
	transition:all .5s;
	cursor:pointer;
	z-index:500;
}

.anchors .circle{
	margin: 40px auto;
	float:none;
	transform:rotate(90deg);
	display:inline-block;
}

.chatBox{
	/*display:none;*/
	position:fixed;
	right:30px;
	bottom:75px;
	max-width:500px;
	border-radius:24px;
	padding: 40px;
	z-index:750;
	box-shadow:5px 5px 25px rgb(0 0 0 / 25%);
	transition:all 1s;
	transition-delay: 0ms;
	/*overflow:hidden;*/
	/*max-height:170px;*/
	opacity:0;
}

.chatBox:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    background: rgba(255,255,255);
    z-index: -1;
    border-radius: 8px;
    box-shadow: 1px 1px 10px rgb(0 0 0 / 50%);
}

.chatBoxArrow{
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 24px;
    background:linear-gradient(-45deg, #23a6d5 10%, transparent 75%), linear-gradient( -45deg, #23a6d5, #23d5ab, #23a6d5, #23d5ab 90%);
    background-size: 100% 100%, 400% 400%;
    animation: gradient 20s infinite;
}

.chatBoxArrow:after{
	content: "";
    position: absolute;
    right: 0;
    bottom: -40px;
    width: 0;
    height: 0;
    border-top: 40px solid #23a6d5;
    border-right: 40px solid #23a6d5;
    border-bottom: 40px solid transparent;
    border-left: 40px solid transparent
}

.chatBoxContentFrame{
	overflow: hidden;
    max-height: 120px;
    transition: max-height 1s;
	position:relative;
}

.activeChatBox .chatBoxContentFrame {
    max-height: 700px;
}

#chatBoxContactLinks{
	margin-bottom:12px; 
	display:flex;
}

#chatBoxContactLinks span{
	display:flex;
	align-items:center;
}

#chatBoxContactLinks svg{
	margin-right:6px;
}

#chatBoxContactLinks span:not(:last-child){
	margin-right:16px;
}

.activeChatBox{
	display:block;
	/*max-height:700px;*/
	opacity:1 !important;
}

.closeChatBox{
	position:absolute;
	right:0;
	top:0;
	width:35px;
	height:35px;
	padding:5px;
	border-radius:25px;
	background:#f0f0f0;
	cursor:pointer;
	display:flex;
	align-items: center;
	justify-content: center;
	z-index:999;
	opacity:0;
	transition:opacity 1s;
}

.activeChatBox .closeChatBox{
	opacity:1;
}

@keyframes scroll {
  0% {
    opacity: 1;}
  100% {
    opacity: 0;
	transform: translateY(30px);}
}

@keyframes scroll-horizontal {
  0% {
    opacity: 1;}
  100% {
    opacity: 0;
	transform: translateX(-30px);}
}


@media (max-width:1500px){
	#logo{
		margin-left:0;
	}
}

@media (max-width:1390px){
	.contentframe, .card{
		width:calc(100% - 100px);
		margin:0 50px;
	}

	#sendbutton{
		right:45px;
	}

	.circle{
		width:42px;
		height:42px;
		border-radius:21px;
		padding-top:3px;
	}
}

@media (max-width:1080px){
	h1{
		font-size:2.5em;
		line-height:1.2em;
	}

	.listicon{
		margin:0 auto;
	}

	.grid{
		display:grid;
		grid-template-columns:33.3% 33.3% 33.3%;
		grid-template-rows:33.3% 33.3% 33.3%;
	}

	#first-project{
		grid-column:1 / 2;
		grid-row:1 / 3;
	}


	#second-project{
		grid-column:3 / 4;
		grid-row:3 / 4;
	}

	#third-project{
		grid-column:2 / 4;
		grid-row:2 / 3;
	}

	#fourth-project{
		grid-column:1 / 3;
		grid-row:3 / 4;
	}

	#fifth-project{
		grid-column:2 / 4;
		grid-row:1 / 2;
	}

	#projects{
		height:100vw;
	}

	#description{
		grid-column:1 / 3;
		grid-row:1 / 4;
	}
	
	#first-counter{
		grid-column:3 / 4;
		grid-row:1 / 2;
		margin-bottom:2em;
		text-align:center;
	}
	
	#second-counter{
		grid-column:3 / 4;
		grid-row:2 / 3;
		text-align:center;
	}

	.list{
		text-align:center;
	}

	#customers img{
		height:60px;
	}

	#chatbutton{
		display:block;
	}

	.activeChatButton{
		display:none !important;
	}

	.chatBox{
		display:none;
	}

	.activeChatBox{
		display:block;
	}

}

@media (max-width:880px){

	#map{
		height:100vh;
	}

	#hardfacts, #competence, #contact{
		padding-bottom: 8em;
	}

	#footer{
		padding-bottom:4em;
	}

	#contact{
		background: none;
	}

	.grid{
		display:grid;
		grid-template-columns:50% 50%;
		grid-template-rows:25% 25% 25% 25%;
	}

	#first-project{
		grid-column:1 / 2;
		grid-row:2 / 4;
	}

	.form{
		position:relative;
		padding:2em;
	}

	#sendbutton{
		float:none;
	}

	#second-project{
		grid-column:2 / 3;
		grid-row:2 / 3;
	}

	#third-project{
		grid-column:1 / 3;
		grid-row:1 / 2;
	}

	#fourth-project{
		grid-column:1 / 3;
		grid-row:4 / 5;
	}

	#fifth-project{
		grid-column:2 / 3;
		grid-row:3 / 4;
	}

	#projects{
		height:200vw;
	}

	#description{
		grid-column:1 / 3;
		grid-row:1 / 4;
	}
	
	#first-counter{
		grid-column:1 / 2;
		grid-row:4 / 5;
	}
	
	#second-counter{
		grid-column:2 / 3;
		grid-row:4 / 5;
	}

	#customers img{
		height:45px;
	}

}

@media (max-width:680px){
	#logo{
		width:65px;
	}

	#logo img{
		height:24px;
	}

	nav ul{
		height:36px;
	}

	.grid{
		display:block;
	}

	#projects{
		height:auto;
		overflow-y:hidden;
		overflow-x:scroll;
		white-space:nowrap;
		-webkit-overflow-scrolling: touch;
		background-color:rgb(240,240,240);
		padding-bottom:1em;
	}

	#projects::-webkit-scrollbar {
		display: none;
	  }

	  #mobileprojecttitle{
		  display:block;
		  background-color:rgb(240,240,240);
		  padding-bottom:1em;
	  }

	  #mobileprojecttitle h2{
		margin:0 auto;
		width:75%;
		border-bottom:1px solid black;
		text-align:center;
		padding:2em 0;
	  }

	.project{	
		display:inline-block;
		height:75vh;
		width:auto;
		min-width:75%;
		margin:30px 3%;
		padding:0;
		overflow:hidden;
		box-shadow: 2px 2px 25px rgba(0,0,0,0.2);
		border-radius:5px;
		background-color:white;
	}

	.project:first-child{	
		margin-left:12.5%;
	}

	.project:last-child{	
		margin-right:12.5%;
	}

	.project img, .project:hover img{
		width:auto;
		height:calc(75vh - 95px);
		position:relative;
		opacity:1;
		border-radius:5px 5px 0 0;
		z-index:45;

	}

	.project p, .project:hover p{
		opacity:1;
		padding:0 1em 1em;
		text-align:left;
	}
	
	.project h3, .project:hover h3, .dark h3, .dark:hover h3{
		margin-bottom:0;
		padding:1em 1em .5em;
		color:black;
		opacity:1;
		margin:0;
		border:0;
		text-align:left;
	}

	#description{
		grid-column:1 / 3;
		grid-row:1 / 4;
	}
	
	#first-counter{
		grid-column:1 / 2;
		grid-row:4 / 5;
	}
	
	#second-counter{
		grid-column:2 / 3;
		grid-row:4 / 5;
	}

	#customers .flex{
		display:block;
	}

	#customers img{
		display:inline-block;
		margin: 1em 5%;
	}

	#hardfacts .flex{
		display:block;
	}

	.list:not(:first-child):before{
		display:block;
		content:"";
		width:150px;
		height:1px;
		border-top:1px solid black;
		margin: 0 auto 2em;
	}

.listicon, #first-list .listicon, #second-list .listicon, #third-list .listicon{
	animation-delay:0s !important;
}

	.list{
		margin-top:3em;
	}

	.number{
		margin-top:0;
		margin-bottom:0;
	}

	#first-counter{
		float:left;
	}

	#second-counter{
		margin-left:50%;
	}

	#first-counter, #second-counter{
		width:50%;
		padding-top:2em;
	}

	#footer .flex{
		display:block;
	}

	#company, #paragraph{
		text-align:center;
		margin-bottom:1em;
	}

#paragraph{
	margin-top:6em;
}

	.scrolllistener{
		opacity:1;
	}

	.formline{
		display:block;
	}

	#sendbutton{
		right:2em;
	}

	#contact .card{
		padding-bottom:1em;
	}

	.icon-scroll{
		display:none;
	}

}

@media (max-width:880px) and (orientation: landscape){
	h1{
		font-size:1.4em;
	}
	.project img, .project:hover img{
		width:auto;
		height:100%;
		border-radius:5px 0 0 5px;
	}
	.projectdetails{
		min-width:200px;
		white-space:normal;
		height:100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.project p, .project:hover p, .project h3, .project:hover h3{
		text-align:center;
	}

	.list{
		max-height:none !important;
	}
	

}

@media (max-width:680px) and (orientation: portrait){
	
	/*#slideshow img{
		transform:scale(1.2) !important;
	transform-origin:bottom right !important;
	}*/
	
	h1{
		font-size:1.2em;
		line-height:1.4em;
		margin-top:0.2em;
	}
	nav{
		position:static;
		margin-top:25px;
	}

	nav a, nav a:visited, nav a svg, nav a:visited svg{
		color:black;
		fill:black;
	}

	#abovethefold{
		height:auto;
		padding-bottom:2em;
	} 
	
	#abovethefold .contentframe{
		height:auto;
	}	
	
	.headline{
		width:100%;
		color:black;
		margin-top:2em;
		margin-bottom:2em;
	}

	.headline .button{
		display:none;
	}

	.contentframe, .card, #slideshow{
		width:88%;
		margin:0 6%;
	}

	#slideshow{
		position:relative;
		height:88vw;
		width:88vw;
		margin:0 auto;
		border-radius:10px;
	}

	.flexframe{
		flex-direction:column;
	}

	.wpcf7-form{
		grid-template-columns:auto;
		grid-template-areas:
		'grid-name'
		'grid-telefon'
		'grid-email'
		'grid-nachricht'
		'grid-dsgvo'
		'grid-callback'
		'grid-newsletter'
		'grid-response'
		;
	}

	textarea{
		margin-bottom:2em;
	}

	#sendbutton{
		bottom:80px;
	}
}

@media (max-width:680px), (max-height:880px){


	/*#scrolltopbutton{
		right:6% !important;
		bottom:4% !important;
	}*/

	#chatbutton{
		right:6% !important;
		bottom:4%;
		display:block;
	}

/*	.closeChatBox{
		right:calc(6% - 2px);
		top:15px;
		height:25px;
		width:25px;
		border:2px solid rgb(50,50,50);
		display:flex;
	}*/

	.chatBox{
		width:100%;
		height:100%;
		right:0;
		bottom:0;
		max-width:none;
		max-height:none;
		overflow:auto;
		border-radius:0;
		box-shadow:none;
		display:none;
		background:white;
	}

	.chatBox:after{
		display:none;
	}

	.chatBoxArrow{
		display:none;
	}

	.activeChatBox{
		display:block;
	}

	#chatBoxContactLinks{
		flex-direction:column;
	}

	.chatBox .wpcf7-form{
		display:grid;
		grid-template-columns:auto;
		grid-template-areas:
		'grid-nachricht'
		'grid-name'
		'grid-email'
		'grid-telefon'
		'grid-callback'
		'grid-dsgvo'
		'grid-sendButton'
		'grid-response'
		;
	}

	input{
		margin-right:0;
		width:100%;
	}
}


/* Google Analytics Germanized Redesign */

.cc-window{
	height: 100% !important;
	width: 100vw !important;
	display:block;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    max-width: unset !important;
    background: rgba(0,0,0,.5) !important;
}

.cc-message{
	background: white !important;
    max-width: 24em !important;
    margin: 2em auto 0 !important;
	padding: 2em !important;
	width:24em !important;
}

.cc-compliance{
	background: white !important;
    max-width: 24em !important;
    margin: auto !important;
	padding: 2em !important;
	top:0 !important;
	margin: 0 auto !important;
	width:24em !important;
	max-height:40px !important;
}

.cc-revoke{
	color:black !important;
	text-decoration:none !important;
}