/* Hexagon */
.hexagon
{
	position: absolute;
	margin-top: 100px;
	margin-left: 80px;

	transform: translate(-50%,-50%) rotate(120deg);
	max-width: 300px;
	border-radius: 50%;
	overflow: hidden;
	
}

.hexagon-in
{
	
	border-radius: 50%;
	transform: rotate(-60deg);
	overflow: hidden;
	
}

.hexagon-in-in
{
	
	border-radius: 50%;
	transform: rotate(-60deg);
	overflow: hidden;

}

@media only screen and (max-width: 800px)
{
	
.hexagon
{
	
	position: relative;
	margin-left: 0px;
    left: 50%;
	right: 50%;
	top: 80px;
	transform: translate(-50%,-50%) rotate(120deg);
	max-width: 400px;
	
	border-radius: 50%;
	overflow: hidden;
	
}

.hexagon-in
{
	
	border-radius: 50%;
	transform: rotate(-60deg);
	overflow: hidden;

}

.hexagon-in-in
{
	
	border-radius: 50%;
	transform: rotate(-60deg);
	overflow: hidden;
	
}
}

/* Scroll */


.circle
{
	position: absolute;
	top: 90%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 4px solid #fff;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 110px;
	font-size: 80px;
	overflow: hidden;
}

.circle .fas
{
	color: #fff;
	margin: 0;
	padding: 0;
	-webkit-animation: animate 1s linear infinite; /* Safari 4+ */
    -moz-animation: animate 1s linear infinite; /* Fx 5+ */
    -o-animation: animate 1s linear infinite; /* Opera 12+ */
	-ms-animation: animate 1s linear infinite;
	animation: animate 1s linear infinite;
}

@keyframes animate
{
	0%
	{
		transform: translateY(-50px);
		text-shadow: 0 50px 0 #fff;
	}
	20%
	{
		transform: translateY(0px);
	}
	40%
	{
		transform: translateY(0px);
	}
	60%
	{
		transform: translateY(0px);
	}
	80%
	{
		transform: translateY(0px);
	}
	100%
	{
		transform: translateY(100px);
	}
}

@-webkit-keyframes animate 
{
    0%
	{
		transform: translateY(-50px);
		text-shadow: 0 50px 0 #fff;
	}
	20%
	{
		transform: translateY(0px);
	}
	40%
	{
		transform: translateY(0px);
	}
	60%
	{
		transform: translateY(0px);
	}
	80%
	{
		transform: translateY(0px);
	}
	100%
	{
		transform: translateY(100px);
	}
}

@-moz-keyframes animate 
{
    0%
	{
		transform: translateY(-50px);
		text-shadow: 0 50px 0 #fff;
	}
	20%
	{
		transform: translateY(0px);
	}
	40%
	{
		transform: translateY(0px);
	}
	60%
	{
		transform: translateY(0px);
	}
	80%
	{
		transform: translateY(0px);
	}
	100%
	{
		transform: translateY(100px);
	}
}

@-o-keyframes animate 
{
    0%
	{
		transform: translateY(-50px);
		text-shadow: 0 50px 0 #fff;
	}
	20%
	{
		transform: translateY(0px);
	}
	40%
	{
		transform: translateY(0px);
	}
	60%
	{
		transform: translateY(0px);
	}
	80%
	{
		transform: translateY(0px);
	}
	100%
	{
		transform: translateY(100px);
	}
}



/* Scrolltotop */

.scrolltotop
{
	font-size: 3em;
	background: #fff;
	color: #000;
	position: fixed;
	right: 2px;
	bottom: 2px;
	transition: all 0.5s ease;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	cursor: pointer;
	display: none;
	z-index: 2;
}


.scrolltotop:hover
{
	background: #fff;
	color: #d7d7d7;
	transition: all 0.5s ease;
	transform: scale(1.1,1.1);
}



/* Shape */

.shaped { 
	
    max-width: 100%;
    max-height: 100%;
	
    width: auto;
    height: auto;
	float: left;
	shape-outside: polygon(213px 13px, 39px 247px, 39px 325px, 83px 387px, 155px 421px, 295px 417px, 423px 447px, 491px 454px, 595px 429px, 703px 397px, 723px 354px, 671px 301px, 743px 277px, 790px 261px, 877px 263px, 921px 235px, 937px 203px, 914px 163px, 865px 127px, 889px 107px, 867px 76px, 797px 59px);
	
	-webkit-shape-outside: polygon(213px 13px, 39px 247px, 39px 325px, 83px 387px, 155px 421px, 295px 417px, 423px 447px, 491px 454px, 595px 429px, 703px 397px, 723px 354px, 671px 301px, 743px 277px, 790px 261px, 877px 263px, 921px 235px, 937px 203px, 914px 163px, 865px 127px, 889px 107px, 867px 76px, 797px 59px);
	
	
    shape-margin: 0.6em;
	
	}
	
.shaped img
{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
	float: left;
}	

/* Skewed */

.skewed
{
	position: relative;
	width: 100%;
	height: 18vh;
	background: #34383d;
	
}
@media only screen and (max-width:600px)
{
	
.skewed
{
	display: none;
}


.skewed:before
{
	content:'';
	position: absolute;
	
	width: 50%;
	height: 100px;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: inherit;
	transform: skewY(10deg);
	-ms-transform: skewY(10deg);
	-webkit-transform: skewY(10deg);
}

.skewed:after
{
	content:'';
	position: absolute;
	
	width: 50%;
	height: 100px;
	bottom: 0;
	right: 0;
	z-index: -1;
	background: inherit;
	transform: skewY(-10deg);
	-ms-transform: skewY(-10deg);
	-webkit-transform: skewY(-10deg);
}


.skewed h1
{
	margin:0;
	padding:0;
	color:#fff;
	text-align: center;
	line-height: 18vh;
	font-size: 50px;
}



.skewed2
{
	position: relative;
	width: 100%;
	height: auto;
	background: #FFF;
	
}

.skewed2:before
{
	content:'';
	position: absolute;
	width: 50%;
	height: 80px;
	top: 0;
	right: 0;
	background: inherit;
	transform: skewY(-6deg);
	-ms-transform: skewY(-6deg);
	-webkit-transform: skewY(-6deg);
	
}

.skewed2:after
{
	content:'';
	position: absolute;
	width: 50%;
	height: 80px;
	top: 0;
	left: 0;
	background: inherit;
	transform: skewY(6deg);
	-ms-transform: skewY(6deg);
	-webkit-transform: skewY(6deg);
	
}
}

@media only screen and (min-width:860px)
{
	
.skewed
{
	position: relative;
	width: 100%;
	height: 18vh;
	background: #34383d;
	
}



.skewed:before
{
	content:'';
	position: absolute;
	width: 50%;
	height: 100px;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: #34383d;
	transform: skewY(8deg);
	-ms-transform: skewY(8deg);
	-webkit-transform: skewY(8deg);
}

.skewed:after
{
	content:'';
	position: absolute;
	width: 50%;
	height: 100px;
	bottom: 0;
	right: 0;
	z-index: -1;
	background: #34383d;
	transform: skewY(-8deg);
	-ms-transform: skewY(-8deg);
	-webkit-transform: skewY(-8deg);
}

.skewed h1
{
	margin:0;
	padding:0;
	color:#fff;
	text-align: center;
	line-height: 18vh;
	font-size: 50px;
}

.skewed2
{
	position: relative;
	width: 100%;
	height: auto;
	background: #FFF;
	
}

.skewed2:before
{
	content:'';
	position: absolute;
	width: 50%;
	height: 80px;
	top: 0;
	right: 0;
	background: inherit;
	transform: skewY(-7deg);
	-ms-transform: skewY(-7deg);
	-webkit-transform: skewY(-7deg);
	
}

.skewed2:after
{
	content:'';
	position: absolute;
	width: 50%;
	height: 80px;
	top: 0;
	left: 0;
	background: inherit;
	transform: skewY(7deg);
	-ms-transform: skewY(7deg);
	-webkit-transform: skewY(7deg);
	
}
}

@media only screen and (min-width:1024px)
{
	
.skewed
{
	position: relative;
	width: 100%;
	height: 18vh;
	background: #34383d;

}



.skewed:before
{
	content:'';
	position: absolute;
	width: 50%;
	height: 100px;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: #34383d;
	margin: 0;
	transform: skewY(8deg);
	-ms-transform: skewY(8deg);
	-webkit-transform: skewY(8deg);
}

.skewed:after
{
	content:'';
	position: absolute;
	width: 50%;
	height: 100px;
	bottom: 0;
	right: 0;
	z-index: -1;
	background: #34383d;
	margin: 0;
	transform: skewY(-8deg);
	-ms-transform: skewY(-8deg);
	-webkit-transform: skewY(-8deg);
}

.skewed h1
{
	margin:0;
	padding:0;
	color:#fff;
	text-align: center;
	line-height: 18vh;
	font-size: 50px;
	
}

.skewed2
{
	position: relative;
	width: 100%;
	height: auto;
	background: #FFF;
	
}

.skewed2:before
{
	content:'';
	position: absolute;
	width: 50%;
	height: 98px;
	top: -2vh;
	right: 0;
	background: inherit;
	transform: skewY(-6deg);
	-ms-transform: skewY(-6deg);
	-webkit-transform: skewY(-6deg);
	
}

.skewed2:after
{
	content:'';
	position: absolute;
	width: 50%;
	height: 98px;
	top: -2vh;
	left: 0;
	background: inherit;
	transform: skewY(6deg);
	-ms-transform: skewY(6deg);
	-webkit-transform: skewY(6deg);
	
}
}

@media only screen and (min-width:2000px)
{
	
.skewed
{
	position: relative;
	width: 100%;
	height: 20vh;
	background: #34383d;
	
}



.skewed:before
{
	content:'';
	position: absolute;
	width: 50%;
	height: 100px;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: #34383d;
	transform: skewY(8deg);
	-ms-transform: skewY(8deg);
	-webkit-transform: skewY(8deg);
}

.skewed:after
{
	content:'';
	position: absolute;
	width: 50%;
	height: 100px;
	bottom: 0;
	right: 0;
	z-index: -1;
	background: #34383d;
	transform: skewY(-8deg);
	-ms-transform: skewY(-8deg);
	-webkit-transform: skewY(-8deg);
}

.skewed h1
{
	margin:0;
	padding:0;
	color:#fff;
	text-align: center;
	line-height: 50vh;
	font-size: 50px;
}


.skewed2
{
	position: relative;
	width: 100%;
	height: auto;
	background: #FFF;
	
}

.skewed2:before
{
	content:'';
	position: absolute;
	width: 50%;
	height: 110px;
	top: 0;
	right: 0;
	background: inherit;
	transform: skewY(-3deg);
	-ms-transform: skewY(-3deg);
	-webkit-transform: skewY(-3deg);
}

.skewed2:after
{
	content:'';
	position: absolute;
	width: 50%;
	height: 110px;
	top: 0;
	left: 0;
	background: inherit;
	transform: skewY(3deg);
	-ms-transform: skewY(3deg);
	-webkit-transform: skewY(3deg);
}

}
    
.skewed3
{
	width: 100%;
	background: #fff;
	position: relative;
	z-index: 0;
	
}

.skewed3:before
{
	content:'';
	width: 50%;
	height: 20vh;
	position: absolute;
	top:-10vh;
	left: 0;
	background: #fff;
	transform: skewY(10deg);
}

.skewed3:after
{
	content:'';
	width: 50%;
	height: 20vh;
	position: absolute;
	top:-10vh;
	right: 0;
	background: #fff;
	transform: skewY(-10deg);
}

/* Slidedown */

.toggle 
{
  display: none;
}

.line
{
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.toggle + label 
{
  display: block;
  margin:30px;
  font-weight: bold;   
}

.toggle + label + div
{
  display: none;
}

.toggle:checked + label + div
{
  display: block;
  position:relative;
  margin:25px 15px;
}

.toggle + label:before 
{
  content: "+";
  padding: 8px 14px;
  margin:30px;
  
  border-radius: 3px;
  line-height:50px;
  background: black;
  color: #FFF;
  font-size:24px;
  text-align:center;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  transition:all 500ms ease;
}

.toggle:checked + label:before 
{
  content: "\2212";
}

/* Testimoniale */

.testimonial
{
	overflow: hidden;

}

.testimonial figure div
{
	width: 20%;
	float: left;

}


.testimonial figure
{
	position: relative;
	width: 800%;
	margin: 0;
	-webkit-animation: testimonials 100s linear -2s infinite;
	-moz-animation: testimonials 100s linear -2s infinite;
	-o-animation: testimonials 100s linear -2s infinite;
	-ms-transition: testimonials 100s linear -2s infinite;
	animation: testimonials 100s linear -2s infinite;

}



@-webkit-keyframes testimonials 
{
	0%
	{
		left: 100%;
	}
	
	100%
	{
		left: -700%;
	}
}

@-moz-keyframes testimonials 
{
	0%
	{
		left: 100%;
	}
	
	100%
	{
		left: -700%;
	}
}

@-o-keyframes testimonials 
{
	0%
	{
		left: 100%;
	}
	
	100%
	{
		left: -700%;
	}
}


@keyframes testimonials 
{
	0%
	{
		left: 100%;
	}
	
	100%
	{
		left: -700%;
	}
}