body {
  height:100%;
  width:100%;
  font-family: 'Roboto Condensed', sans-serif;
}


.sites {
  width: 100vw;
  min-height: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  z-index: 2;
  overflow:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sites .skewed {
    position: relative;
    min-height: 100vh;
    background: #f2f2f2;
    overflow: hidden;
    transition: all 0.5s ease-in;
    z-index: 2;
    box-sizing: border-box;
    box-shadow: -10px 25px 50px rgba(0, 0, 0, 0.3);
	flex-grow: 1;
    display: flex;
	transform: skew(-11deg, 0deg);
	padding:50px 20px;
	text-align:center;
	width:33.3%;

}



.skewed.b1 {
	padding-left:100px;
	margin-left:-125px;
}
.skewed.b3 {
	padding-right:100px;
	margin-right:-125px;
}
.sites .box {
  position: relative;
  width:80%;

  
  margin:0 auto;
  margin-top:10vh;
  background: transparent;
  overflow: hidden;
  transition: all 0.5s ease-in;
  z-index: 2;
  box-sizing: border-box;
  padding: 25px;
  /*box-shadow: -10px 25px 50px rgba(0, 0, 0, 0.3);*/
  transform: skew(11deg, 0deg);
}

.sites .box p {
  
}

.sites .box h2 {
	font-size:3vw;
	margin-bottom:20px;
	margin-top:0px;
	color:white;
}
.sites .box h2.focus {
	font-size:4vw;
}

/*.sites .box:hover {
  color: #f2f2f2;
  box-shadow: 20px 50px 100px rgba(0, 0, 0, 0.5);
  
}*/

.sites .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  transition: all 0.5s ease-in;
  pointer-events: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  
}
.sites .skewed.b1 {
	background:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.49763655462184875) 100%), rgb(78, 73, 93);
}
.sites .skewed.b2 {
	background:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.49763655462184875) 100%), rgb(89,194,251);
}
.sites .skewed.b3 {
	background:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.49763655462184875) 100%), #495057;
}


.sites .box.box2:hover span.accent {
    color: white;
    font-size: 10em;
    text-transform: uppercase;
    font-weight: 700;
    font-style: normal;
    transform: skew(11deg, 0deg);
    letter-spacing: -10px;
    position: absolute;
    top: -20px;
}



.sites .box.box1:hover~.bg {
  opacity: 1;
  background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%),
  url('../img/bg_default.jpg');
  background-position: top; 
  background-repeat: no-repeat; 
  background-size: cover;
  

}
.sites .box.box2:hover~.bg {
  opacity: 1;
  background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%),
  url('../img/truppe_von_oben.jpg');
  background-position: top; 
  background-repeat: no-repeat; 
  background-size: cover;

}
.sites .box.box3:hover~.bg {
  opacity: 1;
  background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%),
  url('../img/folie_abreissen_hoch.jpg');
  background-position: top; 
  background-repeat: no-repeat; 
  background-size: cover;
}

/*.sites .box.box1:hover,
.sites .box.box1:hover~.bg {
  opacity: 1;
  background: #e2a9e5;
background: -moz-linear-gradient(-45deg, #e2a9e5 15%, #2b94e5 100%);
background: -webkit-linear-gradient(-45deg, #e2a9e5 15%,#2b94e5 100%);
background: linear-gradient(135deg, #e2a9e5 15%,#2b94e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2a9e5', endColorstr='#2b94e5',GradientType=1 );
}
.sites .box.box2:hover{
    background: #4b384c;
  background: -moz-linear-gradient(-45deg, #4b384c 15%, #da5de2 100%);
  background: -webkit-linear-gradient(-45deg, #4b384c 15%,#da5de2 100%);
  background: linear-gradient(135deg, #4b384c 15%,#da5de2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b384c', endColorstr='#da5de2',GradientType=1 );
}
.sites .box.box3:hover,
.sites .box.box3:hover~.bg {
  opacity: 1;
  background: #4b384c;
background: -moz-linear-gradient(-45deg, #4b384c 15%, #da5de2 100%);
background: -webkit-linear-gradient(-45deg, #4b384c 15%,#da5de2 100%);
background: linear-gradient(135deg, #4b384c 15%,#da5de2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b384c', endColorstr='#da5de2',GradientType=1 );
}
*/

.gradient-grey {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.mt10 {margin-top:10px;}
.mr10 {margin-right:10px;}
.mb10 {margin-bottom:10px;}
.ml10 {margin-left:10px;}
.mt20 {margin-top:20px;}
.mr20 {margin-right:20px;}
.mb20 {margin-bottom:20px;}
.ml20 {margin-left:20px;}
.mt30 {margin-top:30px;}
.mr30 {margin-right:30px;}
.mb30 {margin-bottom:30px;}
.ml30 {margin-left:30px;}
.mt40 {margin-top:40px;}
.mr40 {margin-right:40px;}
.mb40 {margin-bottom:40px;}
.ml40 {margin-left:40px;}
.mt50 {margin-top:50px;}
.mr50 {margin-right:50px;}
.mb50 {margin-bottom:50px;}
.ml50 {margin-left:50px;}
.mt60 {margin-top:60px;}
.mr60 {margin-right:60px;}
.mb60 {margin-bottom:60px;}
.ml60 {margin-left:60px;}
.mt70 {margin-top:70px;}
.mr70 {margin-right:70px;}
.mb70 {margin-bottom:70px;}
.ml70 {margin-left:70px;}
.mt80 {margin-top:80px;}
.mr80 {margin-right:80px;}
.mb80 {margin-bottom:80px;}
.ml80 {margin-left:80px;}
.mt90 {margin-top:90px;}
.mr90 {margin-right:90px;}
.mb90 {margin-bottom:90px;}
.ml90 {margin-left:90px;}
.mt100 {margin-top:100px;}
.mr100 {margin-right:100px;}
.mb100 {margin-bottom:100px;}
.ml100 {margin-left:100px;}

.footer {overflow: hidden; clear: both; background: #f7f7f7; border-top: 1px solid #e5e5e5; padding: 20px 0 40px 0;position:bottom:0;}
.footer a {font-size:14px; display:block}
.footer a:hover {text-decoration: none;}

@media only screen and (max-width: 1200px) {
	.skewed.b1 {
		width:33%;
	}
	.skewed.b2 {
		width:33%;
	}
	.skewed.b3 {
		width:33%;
	}
}

@media only screen and (max-width: 1024px) {
  .sites .skewed {
    width:100%;
	min-height:50vh;
	transform: unset;
	align-items:center;
  }
  .sites .box {
    transform: unset;
	margin-top:0px;
	
  }
  .skewed.b1 {
  	order:3;
	margin-left:0px;
	padding-left:20px;
  }
  .skewed.b2 {
  	order:1;
  }
  .skewed.b3 {
  	order:2;
	margin-right:0px;
	padding-right:20px;
  }
  .sites .box h2,
  .sites .box h2.focus {
  	font-size:10vw;
  }
  .sites .box {
  	padding:0px;
  }
  .sites .box.box1:hover~.bg {
	  background-image: linear-gradient(0deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0.5) 100%),
	  url('../img/bg_default.jpg');
   background-size: cover;
  }
  .sites .box.box2:hover~.bg {
    background-image: linear-gradient(0deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0.5) 100%),
    url('../img/truppe_von_oben_m.jpg');
	background-size: cover;
  }
  .sites .box.box3:hover~.bg {
    background-image: linear-gradient(0deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0.5) 100%),
    url('../img/folie_abreissen_m.jpg');
	background-size: cover;
  }
}