@charset "utf-8";
/* CSS Document */

header .content { position:absolute; width:100%; top:50%; margin-top:-160px; padding:7.5em 2em 0 2em; box-sizing:border-box; z-index:5; color:#FFF; color:rgba(255,255,255,0.9); text-align:center; }



header svg { width: 15em; height: 4em; position: absolute; left: 50%; margin:-8em -7.5em;}




header h1 { font-size:180%; margin:0 0 5px 0; color:#FFF; }

header h1:before { content:""; height:1px; width:60px; position:absolute; left:50%; margin:-30px; background:#FFF;}

header h2 { font-size:110%; margin:0; color:#FFF;}
body { margin:0; padding:0; font-family:"Roboto", Arial, Helvetica, sans-serif; font-size:16px; font-weight:400; color:#222; color:rgba(0,10,20,0.6);}
header { position:relative; z-index:0; height:100%; min-height:400px; height:100vh; padding-bottom:10em; background:#123 no-repeat center center; color:#FFF; overflow:hidden;}

header .bg { position:absolute; top:0; left:0; width:100%; height:100%; padding:5em 2em; margin:-5em -2em; background:#234 url(../images/header.jpg) no-repeat center center; background-size:cover; }

header .bg:before { position:absolute; content:""; width:100%; height:100%; background:rgba(0,10,20,0.6); top:0; left:0; 
background: -moz-linear-gradient(-45deg,  rgba(44,14,71,0.71) 0%, rgba(20,7,7,1) 100%);
background: -webkit-linear-gradient(-45deg,  rgba(44,14,71,0.71) 0%,rgba(20,7,7,1) 100%);
background: linear-gradient(135deg,  rgba(44,14,71,0.71) 0%,rgba(20,7,7,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b52c0e47', endColorstr='#140707',GradientType=1 );
opacity:0.5;
}

header .top { position:relative; margin:0 2em;  }
header p {  margin:2em 0 0 0; color:rgba(255,255,255,0.6); padding:0 0 2em 0; z-index:2; line-height:100%;  font-size:90%;}
header p strong { position:absolute; right:0; top:0; font-weight:500;}

h1,h2,h3,h4,h5 {  font-family:"Aleo", Arial, Helvetica, sans-serif; font-weight:400;  color:rgba(0,10,20,0.8);}


.mouse {
  position: absolute;
  width: 16px;
  height: 24px;
  left:50%; bottom:18em; margin:-8px;
  opacity:0.6;
  z-index:10;
  cursor:pointer;
  
}
.mouse:before { height:64px; top:0; border-radius:24px; left:0; margin:-1px -13px; width:36px; position:absolute;  content:""; z-index:10; border:3px solid #FFF;}
.chevron {
  position: absolute;
  width: 16px;
  height: 4px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
}

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}


section { padding:2em 0; position:relative;}
section.grey { background:#F2F5F8;}
section.skew { padding-top:1px;}

section.grey + section.grey { border-top:6px dotted rgba(0,10,20,0.08); }


section.skew:before { content:""; position:absolute; background:#FFF; width:100%; top:0; height:12em; margin:-6em 0; left:0; transform:skewY(-3deg);}
section.skew.invert:before { transform:skewY(3deg);}
section.grey.skew:before {  background:#F2F5F8; }

section#map:before { box-shadow: 0 6px 6px rgba(0,0,0,0.08);  z-index: 4;}

.center { margin:3em auto; max-width:1100px; padding:0 3em; position:relative;}
.center.large { max-width: 2300px;}
.clear { clear:both;}

h1 { font-size:240%;}
h2 { font-size:200%;}
h3 { font-size:180%;}
h4 { font-size:130%;}

.intro { margin:0 -1em; text-align:center;}
.intro .col { float:left; padding:0 1em; width:33.33%; box-sizing:border-box;}
.intro .col h3 { margin:0 auto; padding-top:2.1em; background:no-repeat center 0; background-size:auto 1.7em;  font-size:200%;}
.intro .col p { margin:1em auto 0 auto; max-width:320px;}

.intro .col.design h3 { background-image:url(../images/design.svg);}
.intro .col.integration h3 { background-image:url(../images/integration.svg);}
.intro .col.developpement h3 { background-image:url(../images/developpement.svg);}

.competences { margin:3em -2em 10em -2em;}
.competences h4:first-child { margin-top:0;}
.competences h4 { margin:0.8em 0 0em 0; margin-left:25px; position:relative;}
.competences h4:before { position:absolute; content:""; width:18px; height:18px; margin:-9px -25px; left:0; top:50%; background:url(../images/checking.svg) no-repeat center center; background-size:contain;}
.competences p { margin:0;}
.competences .col { width:50%; float:left; padding:0 2em; box-sizing:border-box;}


hr {  margin:5em auto; border:0px dotted rgba(0,10,20,0.12); border-width:6px 0 0 0;}

.competences ul { margin:0; padding:0; list-style:none;}
.competences ul li { margin:0 0 17px 0; background:#EAECEE; box-shadow:0 0 8px rgba(0,10,20,0.06) inset;  border-radius:5px;}
.competences ul li strong { display:block; line-height:12px; font-size:82%; font-weight:500;  border-radius:5px; background:#222; background:rgba(0,10,20,0.8); color:#FFF; padding:8px; width:50%; box-sizing:border-box;
background: -moz-linear-gradient(left,  rgba(0,10,20,0.9) 0%, rgba(0,10,20,0.7) 400px);
background: -webkit-linear-gradient(left,  rgba(0,10,20,0.9) 0%,rgba(0,10,20,0.7) 400px);
background: linear-gradient(to right,  rgba(0,10,20,0.9) 0%,rgba(0,10,20,0.7) 400px);



}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}



canvas{
  position: absolute;
  top:0;
  left:0;
  z-index:1;
  width:100%; height:100%;
}
.css-icon { position: absolute; width: 4em; height: 1px; z-index: 2;}
.css-icon span { width: 4em; position: absolute; height:4em; bottom: 0; z-index:2; background: url(../images/pin.svg) center center; position: absolute;  background-size: contain; bottom: 0; left: 0; animation: bounce 0.35s ease infinite alternate; }

.css-icon em {  position: absolute; filter:blur(0.5px); border-radius: 50%; top: 100%; width: 2em; height: 0.8em; left: 50%; margin:-0.4em -1em; background: rgba(0,0,0,0.5);  animation: bounceShadow 0.35s ease infinite alternate; }



.logos { margin: -0.25em;}
.logos .col { float: left; padding: 0.25em; box-sizing: border-box; width: 16.66%;}
.logos .col .logo { border: 1px solid #F2F2F2; box-shadow: 0 0 0.5em rgba(0,0,0,0.08); padding: 15%; background: no-repeat center center; background-size: contain; opacity: 0.8;}


#map { height: 600px;  height: 86vh; min-height: 75em; background: #F2F5F8;}



#contact { position: absolute; width: 90%; left: 5%; width: calc(100% - 6em); left: calc(3em); bottom: 0; z-index: 100; box-sizing: border-box; font-family:"Roboto", Arial, Helvetica, sans-serif; font-size:14px; font-weight:400;  }

#contact form { right: 45%; z-index: 3; max-width: 33em;  width: 50%; bottom:3em; background: #FFF; min-height: 20em; }
#contact .wrap { margin: 2.5em;}
#contact h3 { line-height: 120%;;}


#contact form  , #contact .physical { position: absolute; padding:1px; border-radius: 6px; box-shadow: 0 0 15px rgba(0,0,0,0.1); margin: 0; bottom:5em;  } 
#contact .physical { left: 55%; z-index: 2; max-width: 20em; font-weight: 300; width: 40%; color:#FFF; color: rgba(255,255,255,0.8); background: #234;  margin-bottom: 9em; border-radius:0 6px 6px 0;}
#contact .physical h4 { color: #FFF;}

#contact form .error_form { color: #E02; font-weight: 400; font-size: 90%; margin:0.5em 0 -0.5em 0;}

#contact form.loading:before { position: absolute;  content:"";  border-radius: 6px;  z-index:200; top: 0; left: 0; width: 100%; height: 100%; }
#contact form .submitter { position: relative;}
#contact form.loading .submitter:before { content:""; cursor: default; border-radius: 50px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #F4F6F8;}
#contact form.loading .submitter:after { content:"Chargement..."; cursor: default; text-align: center; opacity:0.3; position: absolute; z-index: 2; top:50%; left: 0; width: 100%; height: 20px; line-height: 20px; margin:-10px 0;}



.form-group.error .form-input , p.checkBox.error , .form-group.file.error , .champ.error , .champ.error:hover  , .champ.error:focus { border-color:#F83131; background-color:rgba(255,0,0,0.02); }
.champ.error , .champ.error:hover  , .champ.error:focus { color:#F83131;  }

.form-group.file {  border:1px solid #AAA; padding:0.8em; background:#FFF;}
.form-group.file p { margin:0;}
.form-group.file hr { margin:0.7em 0 0.8em 0;}
p.buttons { margin:1em -0.2em;}
p.buttons a { display: inline-block; padding:0.8em 1.2em; cursor: pointer; background: #ECEDEF; color:#234; font-weight: 500; border-radius: 40px;}

.form-group {
 position: relative;
 margin:0.75em 0;
}


form .columns .form-group {
	margin:0.75em 0 0 0;	
}

.form-label {
 position: absolute;
 left: .9em;
 top: 1.25em;
 line-height:90%;
 color: #999;
 z-index: 10;
 font-weight:400;
 transition:top 0.1s, font-size 0.1s, color 0.1s, left 0.1s; transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);
 cursor:text;
}

.form-label em {
    background:#FFF;font-style: normal; font-size: 70%; left:0; position: absolute; top: 100%; white-space: nowrap; padding: 0.3em 0.4em; margin:0.75em -0.4em; color:#C2C4C6; transition: all 0.2s;
}

.focused .form-label em {
    opacity:0; 
    font-size: 90%;
    top:200%;
}

.focused .form-label , .readonly .form-label {
 font-size: 66%;
 top:0.8em;
 left: 1.5em;
 font-weight:400;
 color: #AFACA8;
 
}

.form-input , .champ {
 position: relative;
 padding: 1.3em .9em 0.6em .9em;
 width: 100%;
 outline: 0;
 border: 0;
 border:1px solid #AFACA8;
 border-radius:2px;
 border-color:rgba(0,0,0,0.2);
 transition: border-color .2s ease-out; transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);
 font-size:100%; line-height:100%;
 box-sizing:border-box;
 font-family:'Exo', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

.champ {

 padding: 1em .9em 0.9em .9em;
}


textarea.form-input { height:8em; resize:none;}

.form-input:focus , .form-input:hover {
	border-color:#222; border-color:rgba(0,0,0,0.8);
}

.readonly .form-input:focus , .readonly .form-input:hover , .readonly .form-input {
	border-color:#AAA; border-color:rgba(0,0,0,0.1); background-color:rgba(255,255,255,0.3); cursor:default; font-weight:500; color:#888; color:rgba(0,0,0,0.5);
}

.form-input.filled {
	
}

input.invisible { position:absolute; font-size:0; padding:0; left:-1000px;}



@keyframes bounce{
  from {transform: translateY(0);}
  to   {transform: translateY(-12px);}
}
@keyframes bounceShadow{
  from {transform: scale(0.8);}
  to   {transform: scale(1.2,1.2);}
}

@media screen and (max-width:1600px) {

  .logos .col  { width:20%;}
	
}

@media screen and (max-width:1200px) {

  .logos .col  { width:25%;}
	
}



@media screen and (max-width:840px) {
  #map { min-height: 85em;}

  hr {  margin:3em auto 3.5em auto;  border-width:4px 0 0 0;}

  .logos .col  { width:33.33%;}

  .intro .col , .competences .col { width: 100%;}
  .intro { margin:0;}
  .intro .col + .col { margin-top: 2em; padding-top: 2em; border-top: 1px solid rgba(0,0,0,0.1);}
	.competences .col + .col { margin-top: 2em;}

  .center { padding: 0 2em;}



  #contact {  width: calc(100% - 4em); left: calc(2em);  }

#contact form { right: 0; z-index: 3; max-width:50em;  width: 440px; left: 50%; margin:0 -220px;  bottom:15em;  background: #FFF; min-height: 0; }
#contact .wrap { margin: 2.5em;}
#contact h3 { line-height: 120%;;}



#contact .physical { z-index: 2; max-width: 20em; font-weight: 300; width: 300px; left: 50%; text-align: center; max-width: 100em; bottom: 2em;  margin: 0 -150px !important; border-radius:0 0 6px 6px;}
#contact .physical h4 { color: #FFF;}

}

@media screen and (max-width:600px) {
  #contact form { right: 0; z-index: 3; max-width:50em;  width: 100%; left: 0; margin:0;  }
  .logos .col  { width:50%;}



	
}