body{
	font-family: 'Nunito Sans', sans-serif;
	color:#444;
	font-size:16px;
}

strong{
	color:inherit;
}

section.section{
	padding:80px 1.5rem;
}

h1,h2,h3,h4,h5,h6{
	font-family: 'Roboto Mono', monospace;
	line-height:100%;
	margin:0;
	padding:0;
	color:#222;
}

h1{
	text-align:center;
	font-weight:500;
	font-size:350%;
	line-height:140%;
}
h1 span{
	display:block;
	font-size:40%;
	font-weight:700;
	line-height:100%;
	margin-bottom:20px;
	color:#aaa;
	text-transform:uppercase;
}

h2{
	text-align:center;
	font-weight:700;
	font-size:250%;
	margin-bottom:30px;
}

h3{
	text-align:left;
	font-weight:700;
	font-size:120%;
	margin-bottom:20px;
}

p + h3,
ul + h3{
	margin-top:30px;
}

ul{
	margin:0;
	padding:0;
}

ul ul{
	padding:10px;
}

p{
	margin-bottom:10px;
}

a,
a:link,
a:visited{
	color:#32dada;
	text-decoration:underline;
	font-weight:bolder;
}

a:hover,
a:active{
	text-decoration:none;
}

body .cta{
	display:inline-block;
	padding:10px 20px;
	background:#32dada;
	color:#fff;
	font-weight:700;
	border-radius:2px;
	margin:10px 0 0;
	text-decoration:none;
	-webkit-transition:all 150ms ease;
	transition:all 150ms ease;
}


.cta.alt{
	display:inline-block;
	padding:10px 20px;
	background:#222;
	color:#fff;
	font-weight:700;
	border-radius:2px;
	margin:30px 0 0;
}

.cta:hover{
	background:#222;
	color:#fff;
}

.cta.alt:hover{
	background:#fff;
	color:#222;
}

.alt-color,
h2 b{
	color:#32dada;
}

h2 + p{
	max-width:800px;
	margin:0px auto 30px;
	text-align:center;
}

nav{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:999;
}

nav.scrolled{
	background:#fcfcfc;
	box-shadow:0 0 8px rgba(0,0,0,.2);
}

nav #logo{
	text-align:center;
	padding:20px 30px;
	display:inline-block;
	text-align:left;
}

nav #logo > a{
	font-family: 'Roboto Mono', monospace;
	font-size:350%;
	line-height:100%;
	color:#222;
	display:block;
	font-weight:700;
	margin-bottom:10px;
	text-decoration:none;
	-webkit-transition:all 250ms ease;
	transition:all 250ms ease;
}

nav.scrolled #logo > a{
	line-height:0;
	margin:0;
	opacity:0;
}

nav #logo > span{
	font-family: 'Roboto Mono', monospace;
	font-size:120%;
	color:#222;
}

nav #menu{
	list-style-type:none;
	margin:0 30px 0 0;
	padding:0;
}

nav #menu li{
	display:inline-block;
}

nav #menu li a{
	position:relative;
	display:block;
	padding:10px 20px;
	margin:0px;
	color:#333;
	font-weight:700;
	text-decoration:none;
}

nav #menu li a:after{
	position:absolute;
	content:'';
	bottom:5px;
	left:20px;
	width:0;
	height:3px;
	background:#32dada;
	-webkit-transition:all 0ms ease;
	transition:all 0ms ease;
}

nav #menu li a:before{
	position:absolute;
	content:'';
	bottom:5px;
	right:20px;
	width:0;
	height:3px;
	background:#32dada;
	-webkit-transition:all 250ms ease;
	transition:all 250ms ease;
}

nav #menu li a:hover:after{
	width:calc(100% - 40px);
	-webkit-transition:all 250ms ease;
	transition:all 250ms ease;
}

nav #menu li a:hover:before{
	width:calc(100% - 40px);
	-webkit-transition:all 0ms ease 250ms;
	transition:all 0ms ease 250ms;
}

nav #menu a.cta{
	color:#fff;
	margin:0 0 0 20px;
}

nav #menu li a.cta:before,
nav #menu li a.cta:after{
	display:none;
}

#hero{
	padding:220px 0 90px;
	background:#eee;
}

#hero h1 b{
	color:#32dada;
}

#moteurs h2{
	text-align:center;
	margin-bottom:100px;
	padding-bottom:20px;
}

#moteurs .moteurs-container{
	max-width:1700px;
	margin:0 auto;
}

#moteurs .column{
	background:#32dada;
	padding:40px;
	color:#fff;
	margin:0 10px;
	border-radius:3px;
	-webkit-transition:all 250ms ease;
	transition:all 250ms ease;
}

#moteurs .column:hover{
	background:#222;
	-webkit-transform:translateY(-10px);
	transform:translateY(-10px);
}

#moteurs .column:hover .cta{
	background:#32dada;
}

#moteurs .column:hover .cta:hover{
	background:#fff;
}

#moteurs .column h3{
	color:#fff;
	text-align:left;
	margin-bottom:30px;
}

#puzzle .column h3{
	color:#222;
	text-align:left;
	margin-bottom:30px;
}

#puzzle .column + .column h3{
	text-align:right;
}

#puzzle .puzzle-container{
	max-width:1100px;
	margin:50px auto 0;
}

#puzzle ul li{
	display:block;
}
#puzzle ul li span{
	display:inline-block;
	padding:12px 20px;
	background:#222;
	margin:0 0 24px;
	color:#fff;
	text-transform:uppercase;
	color:#fff;
	font-weight:700;
	border-radius:3px;
	cursor:default;
	-webkit-transition:all 150ms ease;
	transition:all 150ms ease;
}

#puzzle ul li span:hover{
	background:#32dada;
}

#puzzle .column + .column ul li{
	text-align:right;
}

#puzzle .column + .column ul li span{
	background:#32dada;
}

#comm .comm-container{
	max-width:1700px;
	margin:0px auto 0;
}

#comm .column{
	padding:40px;
	background:#222;
	color:#fff;
	margin:30px;
	border-radius:3px;
	/border:1px dashed #32dada;
	position:relative;
}

#comm .column:after{
	position:absolute;
	top:calc(50% - 15px);
	right:10px;
	height:30px;
	width:30px;
	content:'';
	background:#32dada;
	z-index:-1;
	border-radius:1px;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	animation: arrowAnim 7s linear infinite 1s;
}

#comm .column + .column:after{
	animation: arrowAnim 7s linear infinite 1.2s;
}

#comm .column + .column + .column:after{
	animation: arrowAnim 7s linear infinite 1.4s;
}

@keyframes arrowAnim {
  0% {
    right:10px;
    opacity:1;
  }
  3% {
    right:-10px;
  }
  95%{
    right:-10px;
    opacity:1;
  }
  96%{
    right:-10px;
    opacity:0;
  }
  100%{
	right:10px;
    opacity:0;
  }
}

#comm .column + .column:last-child{
	border:0;
	background:#32dada;
	text-align:center;
	padding:0;
	animation: glow 1.5s linear infinite;
}

#comm .column:last-child{
	background:none;
	border:0;
}

@keyframes glow {
  0% {
    box-shadow:0 0 0 rgba(0,0,0,.15);
  }
  70% {
    box-shadow:0 0 50px 30px rgba(255,255,255,0);
  }
}

#comm .column:last-child .columns{
	height:100%;
	color:#fff;
	text-transform:uppercase;
	font-size:120%;
	font-weight:700;
}

#comm .column:last-child:after{
	display:none;
}

#comm .column h3{
	text-align:left;
	color:#32dada;
	margin-bottom:20px;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}


path.active,
circle{
	stroke-dashoffset: 12;
	stroke-dasharray: 6;
	stroke-linecap: butt;
	stroke-linejoin: round;
	animation: dash 1s linear infinite;
}

svg{
	overflow:visible;
}
svg path{

	-webkit-transition:all 250ms ease;
	transition:all 250ms ease;
}
svg path.puzzle.active{
	stroke:#32dada;
	stroke-width:3px;
}

#techno .column{
	padding:30px 50px;
	margin:40px 20px 0;
}

#techno .column + .column{
	background:#eee;
	padding:50px;
}

#techno #techno-circle{
	margin:50px 0 0;
	text-align:center;
	position:relative;
	min-height:250px;
}

#techno .column svg{
	position:absolute;
	/z-index:3;
	top:12.5px;
	left:50%;
	margin-left:-112.5px;
}

#techno .column svg + svg{
	position:absolute;
	z-index:0;
	top:25px;
	left:50%;
	margin-left:-100px;
}

#techno .column svg + svg + svg{
	position:absolute;
	z-index:0;
	top:0;
	left:50%;
	margin-left:-125px;
}
#techno .column svg circle{
	stroke-dashoffset: 6;
	stroke-dasharray: 3;
	stroke-width:1px;
	animation: dash 1s linear infinite;
}

#techno .column svg + svg circle{
	stroke-dashoffset: 6;
	stroke-dasharray: 3;
	stroke-width:1px;
	animation: dash .5s linear infinite;
}

#techno .column svg + svg + svg circle{
	stroke-dashoffset: 6;
	stroke-dasharray: 3;
	stroke-width:1px;
	animation: dash 2s linear infinite;
}

#techno #techno-circle .techno-label{
	position:absolute;
	background:#222;
	color:#fff;
	height:40px;
	line-height:40px;
	width:130px;
	text-align:center;
	text-transform: uppercase;
	border-radius:2px;
	font-weight:700;
	font-size:80%;
}

#techno #techno-circle .techno-label:nth-child(4){
	top:-20px;
	left:50%;
	margin-left:-65px;
}

#techno #techno-circle .techno-label:nth-child(6){
	bottom:-20px;
	left:50%;
	margin-left:-65px;
}

#techno #techno-circle .techno-label:nth-child(5){
	top:50%;
	left:calc(50% + 65px);
	margin-top:-20px;
}

#techno #techno-circle .techno-label:nth-child(7){
	top:50%;
	left:calc(50% - 195px);
	margin-top:-20px;
}

#footer{
	padding:80px 0;
	background:#eee;
	color:#777;
	border-bottom:20px solid #32dada;
}

#footer h2{
	font-size: 200%;
	color: #222;
	margin-bottom: 0;
}

#footer h2 span{
	font-size:60%;
	color:#32dada;
	display:block;
}

#footer h2 + p{
	margin-bottom:0;
}

#footer .column+.column{
	text-align:right;
}

#services{
	background:#fbfbfb;
}

#services .column{
	padding:40px;
	background:#fff;
	margin:30px 20px;
	border-radius:3px;
	box-shadow:inset 0 0 0 0px #32dada,0 0 5px rgba(0,0,0,.2);
	-webkit-transition:all 250ms ease;
	transition:all 250ms ease;
}

#services .column:hover{
	box-shadow:inset 0 0 0 4px #32dada,0 0 10px rgba(0,0,0,.3);
	-webkit-transform:translateY(-5px);
	transform:translateY(-5px);
}
#services .column h3,
#services .column h4{
	color:#222;
}
#services .column h4{
	color:#32dada;
}
#services .column h4{
	margin:30px 0 20px;
	font-weight:700;
	font-size:100%;
}

#services .column ul ul{
	padding-left:30px;
}

#services .column ul li{
	padding:10px 5px;
	margin:0px 0;
	/border-radius:3px;
	/background:#32dada;
	/color:#fff;
	font-weight:700;
	border-top:1px dashed #32dada;
}

#services .column ul ul li{
	padding:0px;
	border:0;
	margin:0;
	border-radius:0px;
	font-weight:400;
	position:relative;
}

#services .column ul ul li:before{
	content:url(../img/check.svg);
	position:absolute;
	left:-35px;
	top:0;
}

#services-techno .services-tech-container{
	max-width:1100px;
	margin:60px auto;
}

#services-techno .column{
	padding:0 40px;
	border-right:1px dashed #ccc;
}

#services-techno .column:last-child{
	border:0;
}

#contact label{
	width:98%;
	margin:0 .7% 20px;
	font-weight:bolder;
	font-size:80%;
	display:inline-block;
}

#contact label.half{
	width:48%;
	margin:0 .7% 20px;
}

#contact input:not([type="submit"]),
#contact textarea{
	width:100%;
	padding:10px;
	border:1px solid #ddd;
	border-radius:2px;
	font-weight:normal;
	font-size:120%;
}

#contact input.cta{
	border:0;
	cursor:pointer;
	padding:12px 40px 14px;
	font-size:100%;
	margin-left:.7%;
}