@CHARSET "ISO-8859-1";

/* -------------------------------------- */
/* -------------------------------------- */
/* -------------------------------------- */
/* ----------- MOBILE STYLES ----------- */
/* -------------------------------------- */
/* -------------------------------------- */
/* -------------------------------------- */

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

body {
  margin: 0;
  background:#00405a;
  /*overflow: hidden;*/
  font-family: 'Raleway', helvetica, sans-serif;
  letter-spacing:2px;
  font-size:11pt;
	font-weight:300;
	left:0px;
  top:0px;
  height:100vh;
  width:100vw;
}





/*---------- BURGER ----------*/
/*---------- BURGER ----------*/
/*---------- BURGER ----------*/
/*---------- BURGER ----------*/
/*---------- BURGER ----------*/
/*---------- BURGER ----------*/
/*---------- BURGER ----------*/
#burger {
  width: 60px;
  height: 50px;
  position:fixed;
  top:2vh;
  margin-top:20px;
  right:100vw;
  cursor: pointer;
  z-index:5000;
}

#burger span {
  display: block;
  position: absolute;
  height: 7px;
  border-radius:3px;
  background: #FFF;
  opacity: 1;
  /*
  border:1px solid #00405a;
  */
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

#burger span:nth-child(1) {
  top: 0px;
  width:34px;
  right: 0px;
  -webkit-transform-origin:center;
  -moz-transform-origin:  center;
  -o-transform-origin:  center;
  transform-origin:  center;
}

#burger span:nth-child(2) {
  top: 19px;
  width:60px;
  right: 0px;
  -webkit-transform-origin: center;
  -moz-transform-origin:  center;
  -o-transform-origin:  center;
  transform-origin:  center;
}

#burger span:nth-child(3) {
  top: 38px;
  width:34px;
  right:26px;
  -webkit-transform-origin:  center;
  -moz-transform-origin: center;
  -o-transform-origin:  center;
  transform-origin: center;
}



#burger.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 20px;
  width:60px;
  right: 0px;
}

#burger.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#burger.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 20px;
  width:60px;
  right: 0px;
}
.menuopen
{opacity:0;}

#menu
{
	display:block;
	position:fixed;
	text-align:right;
	top:0vh;
	left:-100vw;
	width:100vw;
	height:100vh;
	background-color:#00405a;
	color:#FFF;
	opacity:0;
	z-index:4000;
}

.menuopen
{
	position:relative;
	float:right;
	width:52vw;
	left:-10vw;
	top:10vh;
	font-size:2vh;
	letter-spacing:10px;
	text-transform:uppercase;
	text-align:right;
	color:#FFF;
	opacity:1;
	margin:2vh 0vh 2vh 0vh;
}
.menuopen > #barre > div
{
	position:relative;
	float:right;
	width:2vw;
	height:3px;
	border-radius:1.5px;
	background-color:#FFF;
}

#barre
{
	position:relative;
	float:right;
	width:100%;
	height:3px;
	background-color:transparent;
	margin-top:1vh;
}

.menuopen
{
	left:-100vw;
	opacity:1;
	color:#FFF;
}
.menuopen:hover
{
	cursor:pointer;
	opacity:1;
	color:#009fe1;
}


/*---------- FIN BURGER ----------*/
/*---------- FIN BURGER ----------*/
/*---------- FIN BURGER ----------*/
/*---------- FIN BURGER ----------*/
/*---------- FIN BURGER ----------*/
/*---------- FIN BURGER ----------*/
/*---------- FIN BURGER ----------*/



#slogan
{
	position:fixed;
	top:15vh;
	left:0vw;
	width:100vw;
	height:auto;
	text-align:center;
	opacity:1;
	line-height:30pt;
	font-size:22pt;
	font-weight:400;
	z-index:1800;
}

#fond
{
	position:fixed;
	top:0vh;
	left:0vw;
	width:100vw;
	height:100vh;
	z-index:0;

	background-image:url(../img/cerebris-imgfond.jpg);
  	background-position:center bottom;
	background-repeat:no-repeat;
	background-size: auto 80%;
	-moz-background-size: auto 80%;
	-o-background-size: auto 80%;
	-webkit-background-size: auto 80%;
}

#nom
{
	position:fixed;
	top:2vh;
	left:3vw;
	width:230px;
	height:60px;
	z-index:5000;
	margin-top:14px;
	font-size:18pt;
	color:#FFF;
	letter-spacing:10px;
	font-weight:400;
	-webkit-transition: .5s ease-in-out;
  	-moz-transition: .5s ease-in-out;
  	-o-transition: .5s ease-in-out;
  	transition: .5s ease-in-out;
	cursor:pointer;
}
#nom:hover
{
	color:#009fe1;
	letter-spacing:15px;
}

#logo
{
	position:fixed;
	top:3vh;
	left:3vw;
	width:230px;
	height:60px;
	z-index:5000;

	background-image:url(../img/logo.png);
  	background-position:left;
	background-repeat:no-repeat;
	background-size:auto 100%;
	-moz-background-size:auto 100%;
	-o-background-size:auto 100%;
	-webkit-background-size:auto 100%;
}





#cervfull
{
	position:absolute;
	top:60vh;
	left:1vw;
	width:45vw;
	height:40vh;
	z-index:2000;

	background-image:url(../img/cerebris-cerveau.png);
  	background-position:left;
	background-repeat:no-repeat;
	background-size:100% auto;
	-moz-background-size:100% auto;
	-o-background-size:100% auto;
	-webkit-background-size:100% auto;
	
	-webkit-transition: .5s ease-in-out;
  	-moz-transition: .5s ease-in-out;
  	-o-transition: .5s ease-in-out;
  	transition: .5s ease-in-out;
}
#cervfull:hover
{
	top:50vh;
}
#cerveau1
{
	display:none;
}
#cerveau2
{
	display:none;
}



canvas {
  display: block;
  vertical-align: bottom;
}

/* ---- Beginning Animation ---- */

.error, .begin, .main {
  width: 100vw;
  height: 100vh;
}

.error {
  background-color:rgba(0,0,0, 0.7);
  position: fixed;
  left: -100vw;

}
.begin {
  background-color:rgba(255,255,255, 0);
  position: fixed;
  z-index: 3;
  opacity:1;
  /*disable animation
  display: none;*/
}

.main {
  background-color:transparent;
  position: absolute;
  top:100vh;
  left: 100vw;
  z-index:1900;
  /*disable animation*/
  height: auto;

}

.arrow {
  cursor: pointer;
  color: #fff;
  font-size: 2rem;
  position: absolute;
  
}

.arrow--right {
  right: 200px;
  left: auto;
}

.goesLeft {
  animation: goesLeft 2s forwards;
}

.goesRight {
  animation: goesRight 2s forwards;
}

.goesLeftMax {
  animation: goesLeftMax 2s forwards;
}

.goesRightMax {
  animation: goesRightMax 2s forwards;
}

/*Begin*/

@keyframes goesLeft {
	0% {
		left: 0
	}
	100% {
		left: -100vw;
	}
}
@keyframes goesRight {
	0% {
		left: 0
	}
	100% {
		left: 100vw;
	}
}

/* Main */

@keyframes goesLeftMax {
	0% {
		left: 100vw
	}
	100% {
		left: 0;
	}
}
@keyframes goesRightMax {
	0% {
		left: -100vw
	}
	100% {
		left: 0;
	}
}


#arrowDown
{
	position:absolute;
	width:24px;
	height:24px;
	left:50vw;
	margin-left:-12px;
	top:-8vh;
	background-color:transparent;
	display:block;
	-webkit-transform: rotate(0deg);
  	-moz-transform: rotate(0deg);
  	-o-transform: rotate(0deg);
  	transform: rotate(0deg);
  	-webkit-transition: .2s ease-in-out;
  	-moz-transition: .2s ease-in-out;
  	-o-transition: .2s ease-in-out;
  	transition: .2s ease-in-out;
  	cursor: pointer;
  	z-index:500;
}
#arrowDown span {
  display: block;
  position: absolute;
  height: 3px;
  border-radius:1.5px;
  background:#FFF;
  opacity: 1;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;

  width:15px;
  top:5px;
}

#arrowDown:hover span {
  background:#009fe1;
  top:10px;
}



#arrowDown span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 0px;
}

#arrowDown span:nth-child(2) {
   -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 9px;
}










/*
--------------------------- ERROR
*/

#launchButton
{
	position:absolute;
	float:left;
	left:50%;
	bottom:8vh;
	margin-left:-100px;
	background-color:#009fe1;
	border:0;
	text-transform:uppercase;
	color:#fff;
	font-family: 'Raleway', helvetica, sans-serif;
	font-size:13pt;
	font-weight:300;
	letter-spacing:3px;
	padding:15px 45px 15px 45px;
	border-radius:40px;
	transition: all 0.40s ease-in-out 0s;
}
#launchButton:hover
{
	color: #009fe1;
	background-color:#FFF;
	cursor:pointer;
}
#txterror
{
	position:relative;
	top:50%;
	margin-top:-250px;
	left:5%;
	width:90%;
	background-color:transparent;
	color:#fff;
	font-size:11pt;

	text-align:center;
}
#title
{
	font-size:20pt;
	line-height:26pt;
}
.text
{
	text-align:left;
}





/*
--------------------------- BEGIN
*/

#arrowLeft
{
	position:absolute;
	width:3vw;
	height:24px;
	background-color:transparent;
	left:50vw;
	margin-left:-60px;
	bottom:25vh;
	display:block;
	-webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  cursor: pointer;
  z-index:500;

}
#arrowLeft span {
  display: block;
  position: absolute;
  height: 3px;
  border-radius:1.5px;
  background:#FFF;
  opacity: 1;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;

  width:15px;
  left:7px;
}

#arrowLeft:hover span {
  background:#009fe1;
  left:0px;
}



#arrowLeft span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 14px;
}

#arrowLeft span:nth-child(2) {
   -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 5px;
}

#arrowRight
{
	position:absolute;
	width:3vw;
	height:24px;
	background-color:transparent;
	right:50vw;
	margin-right:-60px;
	bottom:25vh;
	display:block;
	-webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  cursor: pointer;
  z-index:500;

}
#arrowRight span {
  display: block;
  position: absolute;
  height: 3px;
  border-radius:1.5px;
  background:#FFF;
  opacity: 1;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;

  width:15px;
  right:7px;
}

#arrowRight:hover span {
  background:#009fe1;
  right:0px;
}



#arrowRight span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 4px;
}

#arrowRight span:nth-child(2) {
   -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 13px;
}

#gifcode
{
	position:absolute;
	left:5vw;
	bottom:40vh;
	margin-bottom:-20px;
	height:12vh;
	width:90vw;
	background-color:#FFF;
	border-radius: 4vh;


	background-image:url(../img/cerebris-gifcode.gif);
  	background-position:center;
	background-repeat:no-repeat;
	background-size:100% auto;
	-moz-background-size:100% auto;
	-o-background-size:100% auto;
	-webkit-background-size:100% auto;
}






/*
--------------------------- PROGRESS BAR
*/
.progress
{
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 1900;
 background-color:#004258;
 z-index:1900;
}
.bar
{
  background-color: #009fe1;
  left: 10%;
  width: 80%;
  height:3px;
  border-radius: 1.5px;
	bottom: 50vh;
	position: absolute;
	z-index:300;
}
.percent
{
  position:absolute;
  display:inline-block;
  top:3px;
  left:48%;
}
.fondbarre
{
	background-color:transparent;
  left: 10%;
  width: 80%;
  height:3px;
  border-radius: 1.5px;
	top: 50%;
	position: absolute;
	z-index:200;
	
}


/*
--------------------------- BLOCS COMMUNS
*/


.blochome
{
	position:relative;
	float:left;
	height:auto;
	width:100vw;
	left:0vw;
	margin:0;
	background-color:transparent;
	z-index:100;
}


#titre
{
	position:relative;
	float:left;
	font-size:20pt;
	letter-spacing:10px;
	text-transform:uppercase;
	top:0px;
	left:3vw;
	padding:25px 35px 25px 35px;
	z-index:200;
	font-weight: normal;
	margin: 0;
}
#bande
{
	position:absolute;
	left:0vw;
	top:0vh;
	width:100vw;
	height:50px;
	z-index:50;
}
#fondplein
{
	position:relative;
	float:left;
	left:0vw;
	top:0vh;
	margin-top:-40px;
	width:100vw;
	height:auto;
	padding-top:100px;
	z-index:100;
	padding-bottom:120px;
}


.bleu
{color:#009fe1;}
.blanc
{color:#FFF;}
.noir
{color:#848484;}
.bgbleu
{background-color:#009fe1;}
.bgblanc
{background-color:#FFF;}
.bggris
{background-color:#F1F1F1;}
.bgtransp
{background-color:transparent;}



/*
--------------------------- HISTOIRE
*/

#blochist
{
	position:relative;
	float:left;
	width:94vw;
	height:auto;
	left:3vw;
	background-color:#FFF;
	color:#0E0E0E;
}
.txthist
{
	position:relative;
	float:left;
	display:inline-block;
	margin:30px;
	text-align:justify;
}

.highlight
{
	font-size:17pt;
	font-weight:400;
}

#francktxtfond
{
	position:absolute;
	left:0px;
	top:0px;
	height:100%;
	background-color:#009fe1;
	overflow:auto;
	font-size:11pt;
	
	width:0%;
}
.francktxt
{
	position:relative;
	float:left;
	display:inline-block;
	margin:20px;
	text-align:justify;
	color:#FFF;
	display:none;
	opacity:0;
}
#laurenttxtfond
{
	position:absolute;
	left:0px;
	top:0px;
	height:100%;
	background-color:#009fe1;
	overflow:auto;
	font-size:11pt;	
	width:0%;
}
.laurenttxt
{
	position:relative;
	float:left;
	display:inline-block;
	margin:20px;
	text-align:justify;
	color:#FFF;
	display:none;
	opacity:0;
}

#imghist
{
	position:relative;
	float:left;
	left:20vw;
	width:60vw;
	height:45vh;
	background-color:#000;
	
	background-image:url(../img/cerebris-photo.jpg);
  	background-position:center top;
	background-repeat:repeat;
	background-size:auto 100%;
	-moz-background-size:auto 100%;
	-o-background-size:auto 100%;
	-webkit-background-size:auto 100%;
}

#imghist .rounded {
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 3px solid white;
	border-radius: 50%;
	position: absolute;
	bottom: 25px;
	left: calc(50% - 20px);
}

#overfranck
{
	position:relative;
	float:left;
	width:50%;
	height:100%;
	top:0px;
	left:0px;
	background:#009fe1;
	background-color:rgba(1, 139, 196, 0);
	transition: all 0.40s ease-in-out 0s;
}
#overfranck:hover
{
	background-color:rgba(0, 159, 225, 0.7);
	cursor:pointer;
}
#overfranck.open {
  background-color:rgba(0, 159, 225, 0.7);
}
#overfranck span {
  display: block;
  position: absolute;
  height: 3px;
  border-radius:1.5px;
  background:#FFF;
  opacity: 1;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  
  width:15px;
  bottom:14px;
}

#overfranck:hover span {
  bottom:32px;
}
#overfranck span:nth-child(1) {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  left:50%;
  margin-left: -8.5px;
    
}
#overfranck span:nth-child(2) {
   -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  left:50%;
  margin-left: -8.5px;
}

#overfranck.open span:nth-child(1) {
  opacity: 0;
  width:0%;
}

#overfranck.open span:nth-child(2) {
  
   -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}


#overlaurent
{
	position:relative;
	float:left;
	width:50%;
	height:100%;
	top:0px;
	left:0px;
	background-color:rgba(0, 159, 225, 0);
	transition: all 0.40s ease-in-out 0s;
}
#overlaurent:hover
{
	background-color:rgba(0, 159, 225, 0.7);
	cursor:pointer;
}
#overlaurent.open {
  background-color:rgba(0, 159, 225, 0.7);
}
#overlaurent span {
  display: block;
  position: absolute;
  height: 3px;
  border-radius:1.5px;
  background:#FFF;
  opacity: 1;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  
  width:15px;
  bottom:25px;
}

#overlaurent:hover span {
  bottom:32px;
}
#overlaurent span:nth-child(1) {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  left:50%;
  margin-left: -8.5px;
    
}
#overlaurent span:nth-child(2) {
   -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  left:50%;
  margin-left: -8.5px;
}
#overlaurent.open span:nth-child(1) {
  opacity: 0;
  width:0%;
}

#overlaurent.open span:nth-child(2) {
  
   -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}


#rsfranck,#rslaurent
{
	position:absolute;
	float:left;
	bottom:20px;
	left:20px;
	width:60px;
	height:45px;
	border-radius:25px;
	background-color:transparent;
	transition: all 0.40s ease-in-out 0s;
	border:3px #FFF solid;
	
	opacity:0;
	display:none;
	
	background-position:center;
	background-repeat:no-repeat;
	background-size:auto 50%;
	-moz-background-size:auto 50%;
	-o-background-size:auto 50%;
	-webkit-background-size:auto 50%;
}
#rsfranck
{background-image:url(../img/rs02.png);}
#rslaurent
{background-image:url(../img/rs02.png);}

#rsfranck:hover,#rslaurent:hover
{
	width:100px;
	cursor:pointer;
}


#secteurs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
}

.secteur {
	width: 75%;
	padding: 25px;
	margin: 20px auto;
	text-align: center;
	font-weight: bold;
	font-size: 1rem;
	border-radius: 15px;
}

.secteur-icon {
	width: 80px;
	height: auto;
	margin: 15px auto;
}


/*
--------------------------- PREUVES
*/
/* ---- particles.js container ---- */

#particles-js {
  display:none;
}


/*
SLIDER
*/

#slidemob
{
	position:relative;
	float:left;
	left:50%;
	margin-left:-250px;
}

#funfacts .bx-wrapper {
	box-shadow: none;
	border: 0 none;
}

.slider {
  height: 420px;
  width: 500px;
  /*width: calc(100% - 160px);*/
  /*heigh: calc(100% - 160px);*/
  margin: 20px auto;
  position: relative;
  float:left;
  background: transparent;
  color: #666;
  text-align: center;
  text-shadow: none;
  /*position: fixed;*/
}

.slider li {
  color: #0E0E0E;
}
.slider li img {
	width:100px;
	height:auto;
	margin: 0px 0px 50px 0px;
}
.slider h1 {
  text-transform: uppercase;
  font-size:15pt;
  letter-spacing:3px;
  font-weight:300;
}
.slider p {
  padding: 20px 80px;
  text-align: left;
  text-align-last: center;
  font-size:11pt;
}
.unslider {
  position: relative;
  text-align: center;
}
.unslider-arrow, .unslider-arrow {
	display: block;
	width: 14px;
	height: 26px;
	top: 50px;
	right: -50px;
	left: auto;
	overflow: hidden;
	background: rgba(0,0,0,0) no-repeat 50% 50%;
	background-image: url(../img/slidearrow2.png);
	background-size: 14px 26px;
	text-indent: -999em;
	transition: opacity .7s;
}

.unslider-arrow:hover, .unslider-arrow:hover {
	background-image: url(../img/slidearrow2.png);
}

.unslider-arrow.prev, .unslider-arrow.prev {
	left: -50px;
	right: auto;
	-ms-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

.unslider-arrow.next {
	right: 0;
}

.unslider-arrow.prev {
	left: 0;
}

.unslider-nav {
	bottom: 25px;
}


canvas {
  image-rendering: optimizeSpeed;             /* Older versions of FF          */
  image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
  image-rendering: -webkit-optimize-contrast; /* Safari                        */
  image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
  image-rendering: pixelated;                 /* Awesome future-browsers       */
  -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}


.unslider{overflow:auto;margin:0;padding:0;}
.unslider-wrap{position:absolute;}
.unslider-wrap.unslider-carousel>li{float:left;}
.unslider-vertical>ul{height:100%;}
.unslider-vertical li{float:none;width:100%;}
.unslider-fade{position:relative;}
.unslider-fade .unslider-wrap li{position:absolute;left:0;top:0;right:0;z-index:8;}
.unslider-fade .unslider-wrap li.unslider-active{z-index:10;}
.unslider li,.unslider ol,.unslider ul{list-style:none;margin:0;padding:0;border:none;}
.unslider-arrow{position:absolute;left:20px;z-index:2;cursor:pointer;}
.unslider-arrow.next{left:auto;right:20px;}

/**
 *   Here's where everything gets included. You don't need
 *   to change anything here, and doing so might break
 *   stuff. Here be dragons and all that.
 */
/**
 *   Default variables
 *
 *   While these can be set with JavaScript, it's probably
 *   better and faster to just set them here, compile to
 *   CSS and include that instead to use some of that
 *   hardware-accelerated goodness.
 */
.unslider-nav ol {
  list-style: none;
  text-align: center;
}

.unslider-nav ol li {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 8px;
  background:#F1F1F1;
  border-radius: 5px;
  overflow: hidden;
  text-indent: -999em;
  border: 2px solid #F1F1F1;
  cursor: pointer;
}

.unslider-nav ol li:hover {
 background: #009fe1;
  cursor: pointer;
  border: 2px solid #009fe1;
}

.unslider-nav ol li.unslider-active {
  background: #009fe1;
  cursor: pointer;
  border: 2px solid #009fe1;
}

/*
--------------------------- CLIENTS
*/

.text-intro {
	text-align:center;
	padding-bottom: 20px;
}

.container {
	position: relative;
	width: calc(100% - 40px);
	margin: 0 auto;
}

.container-slider {
	position: relative;
	width: calc(100% - 40px);
	margin: 0 auto;
}

.container-logos {
  height:195px; 
  position:relative; 
  overflow:hidden;
}

.container-locaux {
  height:240px; 
  position:relative; 
  overflow:hidden;
}

.container-locaux img {
	border-radius: 15px;
}

.video-link {
	padding: 10px 40px;
	border: 2px solid #009fe1;
	display: inline-block;
	border-radius: 30px;
	background: #fff;
	color: #009fe1;
	font-weight: 500;
	margin-top: 30px;
	text-transform: uppercase;
	transition: all 0.40s ease-in-out 0s;
	text-decoration: none;
	font-size: 16px;
	letter-spacing: 3px;
}

.video-link:hover {
	color: #fff;
	background: #009fe1;
}

.photobanner {
  position:absolute; 
  top:0px; 
  left:0px; 
  overflow:hidden; 
  white-space: nowrap;
  animation: bannermove 12s linear infinite;
}

.photobanner-inverse {
  position:absolute; 
  top:0px; 
  left:0px; 
  overflow:hidden; 
  white-space: nowrap;
  animation: bannermoveinverse 12s linear infinite;
}

.photobanner img {    
  margin: 0 0.5em 
}

.container-logos:hover .photobanner,
.container-logos:hover .photobanner-inverse {
   animation-play-state:paused;
}

@keyframes bannermove {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-50%);
  }
}

@keyframes bannermoveinverse {
  0% {
      transform: translateX(-50%);
  }
  100% {
      transform: translateX(0%);
  }
}

/*
--------------------------- ACTU
*/


#blocactu
{
	position:relative;
	float:left;
	width:94vw;
	height:auto;
	left:3vw;
	background-color:transparent;

	text-align:center;
	text-transform:uppercase;
}
.txtactu
{
	position:relative;
	float:left;
	width:100%;
	font-size:25pt;
	line-height:35pt;
	text-align:center;
	letter-spacing:6px;
}

#cta
{
	position:relative;
	float:left;
	left:50%;
	margin-left:-200px;
	margin-top:50px;
	margin-bottom:50px;
	background-color:#FFF;
	border:0;
	text-transform:uppercase;
	color:#0E0E0E;
	font-family: 'Raleway', helvetica, sans-serif;
	font-size:13pt;
	font-weight:300;
	letter-spacing:3px;
	padding:15px 45px 15px 45px;
	border-radius:40px;
	border:3px solid #009fe1;
	transition: all 0.40s ease-in-out 0s;
}
#cta:hover
{
	color:#FFF;
	background-color:#009fe1;
	border:3px solid #FFF;
	cursor:pointer;
}

/*Twitter*/

.twitter {
  position: relative;
  float:left;
  width: 94vw;
  height: 60vh;
  left:3vw;
  overflow: scroll;
  z-index:200;
}

#cuicui
{
	position:absolute;
	left:0vw;
	top:280px;
	width:11%;
	max-width:200px;
	height:100vh;
	background-image:url(../img/cuicui.png);
  	background-position:top left;
	background-repeat:no-repeat;
	background-size:100% auto;
	-moz-background-size:100% auto;
	-o-background-size:100% auto;
	-webkit-background-size:100% auto;
	z-index:100;
}


/*
--------------------------- CONTACT
*/
/*Map*/

#map {
	position:relative;
    width: 100vw;
	top:0px;
	margin-top:-100px;
    height: 45vh;
	background-color:#666;
	margin-bottom:60px;
}

#bloccontact
{
	position:relative;
	float:left;
	width:76vw;
	height:auto;
	left:12vw;
	background-color:transparent;
	color:#0E0E0E;
}
.decnone
{
	text-decoration:none;
	color:inherit;
}
.email
{
	color:inherit;
	letter-spacing:inherit;
	
	transition: all 0.40s ease-in-out 0s;
}
.email:hover
{
	color:#009fe1;
	letter-spacing:4px;
	cursor:pointer;
}

#ctars
{
	position:relative;
	float:left;
	margin-top:50px;
	background-color:#F1F1F1;
	border:0;
	text-transform:uppercase;
	color:#0E0E0E;
	font-family: 'Raleway', helvetica, sans-serif;
	font-size:13pt;
	font-weight:300;
	letter-spacing:3px;
	padding:15px 45px 15px 45px;
	border-radius:40px;
	transition: all 0.40s ease-in-out 0s;
	display: inline-block
}
#ctars:hover
{
	color:#FFF;
	background-color:#009fe1;
	cursor:pointer;
	cursor:pointer;
}

#rs
{
	position:relative;
	float:left;
	margin-top:10vh;
	width:100%;
}

#rs01,#rs02,#rs03
{
	position:relative;
	float:left;
	margin-top:20px;
	margin-right:20px;
	width:60px;
	height:45px;
	border-radius:25px;
	background-color:#F1F1F1;
	transition: all 0.40s ease-in-out 0s;
	
	background-position:center;
	background-repeat:no-repeat;
	background-size:auto 50%;
	-moz-background-size:auto 50%;
	-o-background-size:auto 50%;
	-webkit-background-size:auto 50%;
}
#rs01
{
	background-image:url(../img/rs01.png);
}
#rs02
{
	background-image:url(../img/rs02.png);
}
#rs03
{
	background-image:url(../img/rs03.png);
}
#rs01:hover,#rs02:hover,#rs03:hover
{
	background-color:#009fe1;
	cursor:pointer;
}

/*
--------------------------- FOOTER
*/

footer
{/*
	background-color:#F1F1F1;
	*/
	background:#00405a;
	
	poisition:relative;
	float:left;
	width:100vw;
	left:0vw;
	height:auto;
	padding:60px 0px 120px 0px;
}

#logofoot
{
	position:relative;
	top:0px;
	left:50%;
	margin-left:-70px;
	width:144px;
	height:50px;
	z-index:5000;

	background-image:url(../img/logo.png);
  	background-position:left;
	background-repeat:no-repeat;
	background-size:auto 100%;
	-moz-background-size:auto 100%;
	-o-background-size:auto 100%;
	-webkit-background-size:auto 100%;
	margin-bottom:50px;
}

#blocfooter
{
	position:relative;
	float:left;
	width:76vw;
	height:auto;
	left:12vw;
	background-color:transparent;
	color:#FFF;
	font-size:8pt;
	text-align:center;
}

.mentions
{
	display:none;
	opacity:0;
}

.menulinks
{
	position:relative;
	float:left;
	margin-top:50px;
	text-transform:uppercase;
	width:100%;
	text-align:center;
}



#arrowUp
{
	position:absolute;
	width:24px;
	height:24px;
	right:50vw;
	margin-right:-12px;
	bottom:30px;
	background-color:transparent;
	display:block;
	-webkit-transform: rotate(0deg);
  	-moz-transform: rotate(0deg);
  	-o-transform: rotate(0deg);
  	transform: rotate(0deg);
  	-webkit-transition: .2s ease-in-out;
  	-moz-transition: .2s ease-in-out;
  	-o-transition: .2s ease-in-out;
  	transition: .2s ease-in-out;
  	cursor: pointer;
  	z-index:500;
}
#arrowUp span {
  display: block;
  position: absolute;
  height: 3px;
  border-radius:1.5px;
  background:#FFF;
  opacity: 1;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  
  top:16px;
}

#arrowUp:hover span {
  background:#009fe1;
  top:14px;
}



#arrowUp span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 9px;
    width:15px;
}

#arrowUp span:nth-child(2) {
   -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 0px;
    width:15px;
}

#arrowUp span:nth-child(3) {
   -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  left: 1px;
   width:22px;
  top:0px;
}

.navfoot
{
	color:inherit;
	letter-spacing:inherit;
	transition: all 0.40s ease-in-out 0s;
}
.navfoot:hover
{
	color:#009fe1;
	letter-spacing:4px;
	cursor:pointer;
}






/*
--------------------------- REF
*/


#ref01,#ref02,#ref03,#ref04
{
	width:100%;
	height:auto;
	left:0px;
	position:relative;
	float:left;
	background-color:#FFF;
	padding:0px;
}
.mh{min-height:400px;}

#containrefl
{
	position:relative;
	float:left;
	left:25vw;
	width:50vw;
	margin-left:-4vw;
	height:auto;
	padding: 4vw 4vw 0px 4vw;
	background-color:#FFF;
}

#brainlmob
{
	position:absolute;
	float:left;
	width:19vw;
	margin-right:0px;
	left:30vw;
	height:400px;
	background:url(../img/cerveaul.png);
	background-position:top right;
	background-repeat:no-repeat;
	background-size:100% auto;
	-moz-background-size:100% auto;
	-o-background-size:100% auto;
	-webkit-background-size:100% auto;
	z-index:300;
	opacity:0.7;
	
	-webkit-transition: .25s ease-in-out;
  	-moz-transition: .25s ease-in-out;
  	-o-transition: .25s ease-in-out;
  	transition: .25s ease-in-out;
}
#brainrmob
{
	position:absolute;
	float:left;
	width:19vw;
	margin-right:0px;
	right:30vw;
	height:400px;
	background:url(../img/cerveaur.png);
	background-position:top left;
	background-repeat:no-repeat;
	background-size:100% auto;
	-moz-background-size:100% auto;
	-o-background-size:100% auto;
	-webkit-background-size:100% auto;
	z-index:300;
	opacity:0.7;
	
	-webkit-transition: .25s ease-in-out;
  	-moz-transition: .25s ease-in-out;
  	-o-transition: .25s ease-in-out;
  	transition: .25s ease-in-out;
}
#brainlmob:hover, #brainrmob:hover
{
	opacity:1;
	cursor:pointer;
}

#brainlmob:hover
{
	margin-left:-10px;
}
#brainrmob:hover
{
	margin-right:-10px;
}

#brainl{display:none;}
#brainr{display:none;}



#inside
{
	position:relative;
	float:left;
	padding:0px;
	width:100%;
}


.botline
{
	poisition:relative;
	float:left;
	width:100%;
	height:2px;
	border-radius:1px;
	margin: 20px 0px 40px 0px;
}

.plusmoins
{
	position: absolute;
	top:0px;
	right:0px;
	background:#FFF;
	height:30px;
	width:30px;
	z-index:300;
  	cursor:pointer;
	
}
.plusmoins span
{
  display: block;
  position: absolute;
  height: 3px;
  border-radius:1.5px;
  background:#009fe1;
  opacity: 1;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  
  width:15px;
  top:12px;
}

.plusmoins:hover span
{
 	
  	cursor:pointer;
	opacity:0.5;
}
.plusmoins span:nth-child(1)
{
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  left:15px;
    
}
.plusmoins span:nth-child(2)
{
   -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  left:15px;
}

.plusmoins.open span:nth-child(1)
{
  opacity: 0;
  width:0%;
}

.plusmoins.open span:nth-child(2)
{
  
   -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.title
{
	font-weight:600;
	position:relative;
	width:auto;
	float:left;
	font-size:15pt;
	padding:0px 40px 30px 0px;
}
.lang
{
	font-weight:600;
	color:#009fe1;
	position:relative;
	float:left;
	
	font-size:15pt;
	width:auto;
}

.reftxt
{
	position:relative;
	float:left;
	font-size:9pt;
	letter-spacing:1px;
	width:100%;
}

.ctaref
{
	position:relative;
	float:left;
	margin:20px 0px;
	
	background-color:#009fe1;
	text-transform:uppercase;
	color:#FFF;
	font-family:'Raleway', helvetica, sans-serif;
	font-size:13pt;
	font-weight:300;
	letter-spacing:3px;
	padding:15px 45px 15px 45px;
	border-radius:40px;
	border:3px solid #009fe1;
	transition: all 0.40s ease-in-out 0s;
}
.ctaref:hover
{
	color:#009fe1;
	background-color:#FFF;
	cursor:pointer;
}
.headred
{ cursor:pointer;}

.why
{
	position:relative;
	float:left;
	color:#009fe1;
	margin:20px 0px;
}

}


/* -------------------------------------- */
/* -------------------------------------- */
/* -------------------------------------- */
/* ----------- DESKTOP STYLES ----------- */
/* -------------------------------------- */
/* -------------------------------------- */
/* -------------------------------------- */

@media screen and (min-width: 950px)
{
	
body {
  margin: 0;
  background:#00405a;
  /*overflow: hidden;*/
  font-family: 'Raleway', helvetica, sans-serif;
  letter-spacing:2px;
  font-size:12pt;
	font-weight:300;
}





/*---------- BURGER ----------*/
/*---------- BURGER ----------*/
/*---------- BURGER ----------*/
/*---------- BURGER ----------*/
/*---------- BURGER ----------*/
/*---------- BURGER ----------*/
/*---------- BURGER ----------*/
#burger {
  width: 40px;
  height: 25px;
  position:fixed;
  top:3vh;
  margin-top:16.5px;
  right:100vw;
  background-color:transparent;
  cursor: pointer;
  z-index:5000;
}

#burger span {
  display: block;
  position: absolute;
  height: 3px;
  border-radius:3px;
  background: #FFF;
  opacity: 1;
  /*
  border:1px solid #00405a;
  */
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

#burger span:nth-child(1) {
  top: 0px;
  width:27px;
  right: 0px;
  -webkit-transform-origin:center;
  -moz-transform-origin:  center;
  -o-transform-origin:  center;
  transform-origin:  center;
}

#burger span:nth-child(2) {
  top: 12px;
  width:40px;
  right: 0px;
  -webkit-transform-origin: center;
  -moz-transform-origin:  center;
  -o-transform-origin:  center;
  transform-origin:  center;
}

#burger span:nth-child(3) {
  top: 24px;
  width:27px;
  right:13px;
  -webkit-transform-origin:  center;
  -moz-transform-origin: center;
  -o-transform-origin:  center;
  transform-origin: center;
}

#burger:hover span:nth-child(1) 
	{
		background: #009fe1;
		width:40px;
	}
#burger:hover span:nth-child(2)
	{
		background: #009fe1;
		width:40px;
	}
#burger:hover span:nth-child(3)
	{
		background: #009fe1;
		width:40px;
		right: 0px;
	}


#burger.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 12px;
  width:40px;
  right: 0px;
}

#burger.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#burger.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 12px;
  width:40px;
  right: 0px;
}
.menuopen
{opacity:0;}

#menu
{
	display:block;
	position:fixed;
	text-align:right;
	top:0vh;
	left:-100vw;
	width:100vw;
	height:100vh;
	background-color:#00405a;
	color:#FFF;
	opacity:0;
	z-index:4000;
}

.menuopen
{
	position:relative;
	float:right;
	width:52vw;
	left:-10vw;
	top:20vh;
	font-size:2vh;
	letter-spacing:10px;
	text-transform:uppercase;
	text-align:right;
	color:#FFF;
	opacity:1;
	margin:2vh 0vh 2vh 0vh;
}
.menuopen > #barre > div
{
	position:relative;
	float:right;
	width:2vw;
	height:3px;
	border-radius:1.5px;
	background-color:#FFF;
}

#barre
{
	position:relative;
	float:right;
	width:100%;
	height:3px;
	background-color:transparent;
	margin-top:1vh;
}

.menuopen
{
	left:-100vw;
	opacity:1;
	color:#FFF;
}
.menuopen:hover
{
	cursor:pointer;
	opacity:1;
	color:#009fe1;
}


/*---------- FIN BURGER ----------*/
/*---------- FIN BURGER ----------*/
/*---------- FIN BURGER ----------*/
/*---------- FIN BURGER ----------*/
/*---------- FIN BURGER ----------*/
/*---------- FIN BURGER ----------*/
/*---------- FIN BURGER ----------*/



#slogan
{
	position:fixed;
	top:15vh;
	left:20vw;
	width:60vw;
	height:auto;
	text-align:center;
	opacity:1;
	line-height:30pt;
	font-size:26pt;
	font-weight:400;
	z-index:1800;
}

#fond
{
	position:fixed;
	top:0vh;
	left:0vw;
	width:100vw;
	height:100vh;
	z-index:0;

	background-image:url(../img/cerebris-imgfond.jpg);
  	background-position:center;
	background-repeat:no-repeat;
	background-size:100% auto;
	-moz-background-size:100% auto;
	-o-background-size:100% auto;
	-webkit-background-size:100% auto;
}

#nom
{
	position:fixed;
	top:3vh;
	left:3vw;
	width:230px;
	height:60px;
	z-index:5000;
	margin-top:14px;
	font-size:18pt;
	color:#FFF;
	letter-spacing:10px;
	font-weight:400;
	-webkit-transition: .5s ease-in-out;
  	-moz-transition: .5s ease-in-out;
  	-o-transition: .5s ease-in-out;
  	transition: .5s ease-in-out;
	cursor:pointer;
}
#nom:hover
{
	color:#009fe1;
	letter-spacing:15px;
}

#logo
{
	position:fixed;
	top:3vh;
	left:3vw;
	width:230px;
	height:60px;
	z-index:5000;

	background-image:url(../img/logo.png);
  	background-position:left;
	background-repeat:no-repeat;
	background-size:auto 100%;
	-moz-background-size:auto 100%;
	-o-background-size:auto 100%;
	-webkit-background-size:auto 100%;
}





#cervfull
{
	position:absolute;
	top:60vh;
	left:1vw;
	width:45vw;
	height:40vh;
	z-index:2000;

	background-image:url(../img/cerebris-cerveau.png);
  	background-position:left;
	background-repeat:no-repeat;
	background-size:auto 100%;
	-moz-background-size:auto 100%;
	-o-background-size:auto 100%;
	-webkit-background-size:auto 100%;
	
	-webkit-transition: .5s ease-in-out;
  	-moz-transition: .5s ease-in-out;
  	-o-transition: .5s ease-in-out;
  	transition: .5s ease-in-out;
}
#cervfull:hover
{
	top:50vh;
}
#cerveau1
{
	position:fixed;
	top:80vh;
	left:1vw;
	width:13vw;
	height:20vh;
	z-index:2000;

	background-image:url(../img/cerebris-cervd.png);
  	background-position:left;
	background-repeat:no-repeat;
	background-size:auto 100%;
	-moz-background-size:auto 100%;
	-o-background-size:auto 100%;
	-webkit-background-size:auto 100%;
}
#cerveau2
{
	position:fixed;
	top:80vh;
	right:1vw;
	width:13vw;
	height:20vh;
	z-index:2000;

	background-image:url(../img/cerebris-cervg.png);
  	background-position:right;
	background-repeat:no-repeat;
	background-size:auto 100%;
	-moz-background-size:auto 100%;
	-o-background-size:auto 100%;
	-webkit-background-size:auto 100%;
}



canvas {
  display: block;
  vertical-align: bottom;
}

/* ---- Beginning Animation ---- */

.error, .begin, .main {
  width: 100vw;
  height: 100vh;
}

.error {
  background-color:rgba(0,0,0, 0.7);
  position: fixed;
  left: -100vw;

}
.begin {
  background-color:rgba(255,255,255, 0);
  position: fixed;
  z-index: 3;
  opacity:1;
  /*disable animation
  display: none;*/
}

.main {
  background-color:transparent;
  position: absolute;
  top:100vh;
  left: 100vw;
  z-index:1900;
  /*disable animation*/
  height: auto;

}

.arrow {
  cursor: pointer;
  color: #fff;
  font-size: 2rem;
  position: absolute;
  
}

.arrow--right {
  right: 200px;
  left: auto;
}

.goesLeft {
  animation: goesLeft 2s forwards;
}

.goesRight {
  animation: goesRight 2s forwards;
}

.goesLeftMax {
  animation: goesLeftMax 2s forwards;
}

.goesRightMax {
  animation: goesRightMax 2s forwards;
}

/*Begin*/

@keyframes goesLeft {
	0% {
		left: 0
	}
	100% {
		left: -100vw;
	}
}
@keyframes goesRight {
	0% {
		left: 0
	}
	100% {
		left: 100vw;
	}
}

/* Main */

@keyframes goesLeftMax {
	0% {
		left: 100vw
	}
	100% {
		left: 0;
	}
}
@keyframes goesRightMax {
	0% {
		left: -100vw
	}
	100% {
		left: 0;
	}
}


#arrowDown
{
	position:absolute;
	width:24px;
	height:24px;
	left:50vw;
	margin-left:-12px;
	top:-8vh;
	background-color:transparent;
	display:block;
	-webkit-transform: rotate(0deg);
  	-moz-transform: rotate(0deg);
  	-o-transform: rotate(0deg);
  	transform: rotate(0deg);
  	-webkit-transition: .2s ease-in-out;
  	-moz-transition: .2s ease-in-out;
  	-o-transition: .2s ease-in-out;
  	transition: .2s ease-in-out;
  	cursor: pointer;
  	z-index:500;
}
#arrowDown span {
  display: block;
  position: absolute;
  height: 3px;
  border-radius:1.5px;
  background:#FFF;
  opacity: 1;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;

  width:15px;
  top:5px;
}

#arrowDown:hover span {
  background:#009fe1;
  top:10px;
}



#arrowDown span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 0px;
}

#arrowDown span:nth-child(2) {
   -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 9px;
}










/*
--------------------------- ERROR
*/

#launchButton
{
	position:absolute;
	float:left;
	left:50%;
	bottom:8vh;
	margin-left:-100px;
	background-color:#009fe1;
	border:0;
	text-transform:uppercase;
	color:#fff;
	font-family: 'Raleway', helvetica, sans-serif;
	font-size:13pt;
	font-weight:300;
	letter-spacing:3px;
	padding:15px 45px 15px 45px;
	border-radius:40px;
	transition: all 0.40s ease-in-out 0s;
}
#launchButton:hover
{
	color: #009fe1;
	background-color:#FFF;
	cursor:pointer;
}
#txterror
{
	position:relative;
	top:50%;
	margin-top:-250px;
	left:30%;
	width:40%;
	background-color:transparent;
	color:#fff;
	font-size:11pt;

	text-align:center;
}
#title
{
	font-size:20pt;
	line-height:26pt;
}
.text
{
	text-align:left;
}





/*
--------------------------- BEGIN
*/

#arrowLeft
{
	position:absolute;
	width:3vw;
	height:24px;
	background-color:transparent;
	left:16vw;
	bottom:11vh;
	display:block;
	-webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  cursor: pointer;
  z-index:500;

}
#arrowLeft span {
  display: block;
  position: absolute;
  height: 3px;
  border-radius:1.5px;
  background:#FFF;
  opacity: 1;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;

  width:15px;
  left:7px;
}

#arrowLeft:hover span {
  background:#009fe1;
  left:0px;
}



#arrowLeft span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 14px;
}

#arrowLeft span:nth-child(2) {
   -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 5px;
}

#arrowRight
{
	position:absolute;
	width:3vw;
	height:24px;
	background-color:transparent;
	right:16vw;
	bottom:11vh;
	display:block;
	-webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  cursor: pointer;
  z-index:500;

}
#arrowRight span {
  display: block;
  position: absolute;
  height: 3px;
  border-radius:1.5px;
  background:#FFF;
  opacity: 1;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;

  width:15px;
  right:7px;
}

#arrowRight:hover span {
  background:#009fe1;
  right:0px;
}



#arrowRight span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 4px;
}

#arrowRight span:nth-child(2) {
   -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 13px;
}

#gifcode
{
	position:absolute;
	left:20vw;
	bottom:5vh;
	margin-bottom:12px;
	height:12vh;
	width:60vw;
	background-color:#FFF;
	border-radius: 4vh;


	background-image:url(../img/cerebris-gifcode.gif);
  	background-position:center;
	background-repeat:no-repeat;
	background-size:100% auto;
	-moz-background-size:100% auto;
	-o-background-size:100% auto;
	-webkit-background-size:100% auto;
}






/*
--------------------------- PROGRESS BAR
*/
.progress
{
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 1900;
 background-color:#004258;
 z-index:1900;
}
.bar
{
  background-color: #009fe1;
  left: 10%;
  width: 80%;
  height:3px;
  border-radius: 1.5px;
	bottom: 12vh;
	position: absolute;
	z-index:300;
}
.percent
{
  position:absolute;
  display:inline-block;
  top:3px;
  left:48%;
}
.fondbarre
{
	background-color:transparent;
  left: 10%;
  width: 80%;
  height:3px;
  border-radius: 1.5px;
	top: 50%;
	position: absolute;
	z-index:200;
	
}


/*
--------------------------- BLOCS COMMUNS
*/


.blochome
{
	position:relative;
	float:left;
	height:auto;
	width:100vw;
	left:0vw;
	margin:0;
	background-color:transparent;
	z-index:100;
}


#titre
{
	position:relative;
	float:left;
	font-size:20pt;
	letter-spacing:10px;
	text-transform:uppercase;
	top:0px;
	left:12vw;
	padding:25px 35px 25px 35px;
	z-index:200;
	font-weight:normal;
	margin:0;
}
#bande
{
	position:absolute;
	left:0vw;
	top:0vh;
	width:100vw;
	height:50px;
	z-index:50;
}
#fondplein
{
	position:relative;
	float:left;
	left:0vw;
	top:0vh;
	margin-top:-40px;
	width:100vw;
	height:auto;
	padding-top:100px;
	z-index:100;
	padding-bottom:120px;
}


.bleu
{color:#009fe1;}
.blanc
{color:#FFF;}
.noir
{color:#848484;}
.bgbleu
{background-color:#009fe1;}
.bgblanc
{background-color:#FFF;}
.bggris
{background-color:#F1F1F1;}
.bgtransp
{background-color:transparent;}



/*
--------------------------- HISTOIRE
*/

#blochist
{
	position:relative;
	float:left;
	width:48vw;
	height:auto;
	left:12vw;
	background-color:#FFF;
	color:#0E0E0E;
}
.txthist
{
	position:relative;
	float:left;
	display:inline-block;
	margin:30px;
	text-align:justify;
}

.highlight
{
	font-size:17pt;
	font-weight:400;
}

#francktxtfond
{
	position:absolute;
	left:0px;
	top:0px;
	height:100%;
	background-color:#009fe1;
	overflow:auto;
	font-size:12pt;
	
	width:0%;
}
.francktxt
{
	position:relative;
	float:left;
	display:inline-block;
	margin:20px;
	text-align:justify;
	color:#FFF;
	display:none;
	opacity:0;
}
#laurenttxtfond
{
	position:absolute;
	left:0px;
	top:0px;
	height:100%;
	background-color:#009fe1;
	font-size:12pt;
	
	
	width:0%;
}
.laurenttxt
{
	position:relative;
	float:left;
	display:inline-block;
	margin:20px;
	text-align:justify;
	color:#FFF;
	display:none;
	opacity:0;
}

#imghist
{
	position:relative;
	float:left;
	left:12vw;
	width:28vw;
	height:60vh;
	background-color:#000;
	
	background-image:url(../img/cerebris-photo.jpg);
  	background-position:center;
	background-repeat:repeat;
	background-size:auto 100%;
	-moz-background-size:auto 100%;
	-o-background-size:auto 100%;
	-webkit-background-size:auto 100%;
}

#imghist .rounded {
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 3px solid white;
	border-radius: 50%;
	position: absolute;
	bottom: 25px;
	left: calc(50% - 20px);
}


#overfranck
{
	position:relative;
	float:left;
	width:50%;
	height:100%;
	top:0px;
	left:0px;
	background:#009fe1;
	background-color:rgba(1, 139, 196, 0);
	transition: all 0.40s ease-in-out 0s;
}
#overfranck:hover
{
	background-color:rgba(0, 159, 225, 0.7);
	cursor:pointer;
}
#overfranck.open {
  background-color:rgba(0, 159, 225, 0.7);
}
#overfranck span {
  display: block;
  position: absolute;
  height: 3px;
  border-radius:1.5px;
  background:#FFF;
  opacity: 1;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  
  width:15px;
  bottom:19px;
}

#overfranck:hover .rounded {
  bottom:32px;
}
#overfranck span:nth-child(1) {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  left:50%;
  margin-left: -8.5px;
    
}
#overfranck span:nth-child(2) {
   -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  left:50%;
  margin-left: -8.5px;
}

#overfranck.open span:nth-child(1) {
  opacity: 0;
  width:0%;
}

#overfranck.open span:nth-child(2) {
  
   -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}


#overlaurent
{
	position:relative;
	float:left;
	width:50%;
	height:100%;
	top:0px;
	left:0px;
	background-color:rgba(0, 159, 225, 0);
	transition: all 0.40s ease-in-out 0s;
}
#overlaurent:hover
{
	background-color:rgba(0, 159, 225, 0.7);
	cursor:pointer;
}
#overlaurent.open {
  background-color:rgba(0, 159, 225, 0.7);
}
#overlaurent span {
  display: block;
  position: absolute;
  height: 3px;
  border-radius:1.5px;
  background:#FFF;
  opacity: 1;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  
  width:15px;
  bottom:19px;
}

#overlaurent:hover .rounded {
  bottom:32px;
}
#overlaurent span:nth-child(1) {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  left:50%;
  margin-left: -8.5px;
    
}
#overlaurent span:nth-child(2) {
   -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  left:50%;
  margin-left: -8.5px;
}
#overlaurent.open span:nth-child(1) {
  opacity: 0;
  width:0%;
}

#overlaurent.open span:nth-child(2) {
  
   -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}


#rsfranck,#rslaurent
{
	position:absolute;
	float:left;
	bottom:20px;
	left:20px;
	width:60px;
	height:45px;
	border-radius:25px;
	background-color:transparent;
	transition: all 0.40s ease-in-out 0s;
	border:3px #FFF solid;
	
	opacity:0;
	display:none;
	
	background-position:center;
	background-repeat:no-repeat;
	background-size:auto 50%;
	-moz-background-size:auto 50%;
	-o-background-size:auto 50%;
	-webkit-background-size:auto 50%;
}
#rsfranck
{background-image:url(../img/rs02.png);}
#rslaurent
{background-image:url(../img/rs02.png);}

#rsfranck:hover,#rslaurent:hover
{
	width:100px;
	cursor:pointer;
}


.container {
	position: relative;
	width: 76vw;
	left: 12vw;
}

.container-slider {
	position: relative;
	width: 56vw;
	left: 12vw;
	padding: 0 10vw;
}

.container-locaux {
	margin-top: 20px;
}

#secteurs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
}

.secteur {
	width: 25%;
	padding: 25px;
	margin: 20px 0;
	text-align: center;
	font-weight: bold;
	font-size: 1rem;
	border-radius: 15px;
}

.secteur-icon {
	width: 80px;
	height: auto;
	margin: 15px auto;
}

/*
--------------------------- PREUVES
*/
/* ---- particles.js container ---- */

#particles-js {
  position: relative;
  width: 76vw;
  left:12vw;
  height: 500px;
  background-color: #ffffff;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  cursor:pointer;
}


/*
SLIDER
*/
#slidemob
{
	display:none;
}
.slider {
	position:absolute;
  height: 550px;
  width: 900px;
  /*width: calc(100% - 160px);*/
  /*heigh: calc(100% - 160px);*/
  margin: 20px auto;
  position: relative;
  background: transparent;
  color: #666;
  text-align: center;
  text-shadow: none
  /*position: fixed;*/
}

.slider li {
  color: #fff;
}
#funfacts .bx-wrapper {
	box-shadow: none;
	border: 0 none;
}
#funfacts-slider {
	color: #000;
}
.slider li img {
	width:100px;
	height:auto;
	margin: 50px 0px 50px 0px;
}
.slider h3,
#funfacts-slider h3 {
  text-transform: uppercase;
  font-size:15pt;
  letter-spacing:3px;
  font-weight:500;
  color:#009fe1;
  text-align: center;
}
.slider p,
#funfacts-slider p {
  padding: 20px 200px;
  text-align: left;
  font-size:11pt;
}
#funfacts-slider p {
	padding: 5px;
	text-align:center;
}
.unslider {
  position: relative;
  text-align: center;
}
.unslider-arrow, .unslider-arrow {
	display: block;
	width: 14px;
	height: 26px;
	top: 50%;
	right: -50px;
	left: auto;
	margin-top: -13px;
	overflow: hidden;
	background: rgba(0,0,0,0) no-repeat 50% 50%;
	background-image: url(../img/slidearrow.png);
	/*background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAQAAABuQZ3IAAAAi0lEQVR4AU3OISBEQQBAwS0AACS9NxqQgCZpkiYBVddFvWhAAUABAPQCAGC4g/0vTnrBqCfDIZl70J+kMUBPpEwT4FNXxBxz4F1HxHyr4EVTxBLb4EFNxEon4CJSlVNw9AcV9sC16h8osgke1P1ArgXwouVvdQq86ww/GQefusNf7kBviBlxpT8k+gL/Wox4r1d4MwAAAABJRU5ErkJggg==');*/
	background-size: 14px 26px;
	text-indent: -999em;
	transition: opacity .7s;
}

.unslider-arrow:hover, .unslider-arrow:hover {
	background-image: url(../img/slidearrow2.png);
}

.unslider-arrow.prev, .unslider-arrow.prev {
	left: -50px;
	right: auto;
	-ms-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

.unslider-arrow.next {
	right: 0;
}

.unslider-arrow.prev {
	left: 0;
}

.unslider-nav {
	bottom: 25px;
}


canvas {
  image-rendering: optimizeSpeed;             /* Older versions of FF          */
  image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
  image-rendering: -webkit-optimize-contrast; /* Safari                        */
  image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
  image-rendering: pixelated;                 /* Awesome future-browsers       */
  -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}


.unslider{overflow:auto;margin:0;padding:0;}
.unslider-wrap{position:absolute;}
.unslider-wrap.unslider-carousel>li{float:left;}
.unslider-vertical>ul{height:100%;}
.unslider-vertical li{float:none;width:100%;}
.unslider-fade{position:relative;}
.unslider-fade .unslider-wrap li{position:absolute;left:0;top:0;right:0;z-index:8;}
.unslider-fade .unslider-wrap li.unslider-active{z-index:10;}
.unslider li,.unslider ol,.unslider ul{list-style:none;margin:0;padding:0;border:none;}
.unslider-arrow{position:absolute;left:20px;z-index:2;cursor:pointer;}
.unslider-arrow.next{left:auto;right:20px;}

/**
 *   Here's where everything gets included. You don't need
 *   to change anything here, and doing so might break
 *   stuff. Here be dragons and all that.
 */
/**
 *   Default variables
 *
 *   While these can be set with JavaScript, it's probably
 *   better and faster to just set them here, compile to
 *   CSS and include that instead to use some of that
 *   hardware-accelerated goodness.
 */
.unslider-nav ol {
  list-style: none;
  text-align: center;
}

.unslider-nav ol li {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 8px;
  background:#FFF;
  border-radius: 5px;
  overflow: hidden;
  text-indent: -999em;
  border: 2px solid #FFF;
  cursor: pointer;
}

#funfacts .bx-pager-item .bx-pager-link {
	background:#F1F1F1;
}

.unslider-nav ol li:hover {
 background: #009fe1;
  cursor: pointer;
  border: 2px solid #009fe1;
}

#funfacts .bx-pager-item .bx-pager-link:hover,
#funfacts .bx-pager-item .bx-pager-link.active {
	background: #009fe1;
}

.unslider-nav ol li.unslider-active,
#funfacts .unslider-nav ol li.unslider-active {
  background: #009fe1;
  cursor: pointer;
  border: 2px solid #009fe1;
}

/*
--------------------------- CLIENTS
*/

.container-logos {
  height:195px; 
  position:relative; 
  overflow:hidden;
}

.container-locaux {
  height:240px; 
  position:relative; 
  overflow:hidden;
}

.container-locaux img {
	border-radius: 15px;
}

.photobanner {
  position:absolute; 
  top:0px; 
  left:0px; 
  overflow:hidden; 
  white-space: nowrap;
  animation: bannermove 12s linear infinite;
}

.photobanner-inverse {
  position:absolute; 
  top:0px; 
  left:0px; 
  overflow:hidden; 
  white-space: nowrap;
  animation: bannermoveinverse 12s linear infinite;
}

.photobanner img {    
  margin: 0 0.5em 
}

.container-logos:hover .photobanner,
.container-logos:hover .photobanner-inverse {
   animation-play-state:paused;
}

@keyframes bannermove {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-50%);
  }
}

@keyframes bannermoveinverse {
  0% {
      transform: translateX(-50%);
  }
  100% {
      transform: translateX(0%);
  }
}

.video-link {
	padding: 15px 45px;
	border: 3px solid #009fe1;
	display: inline-block;
	border-radius: 40px;
	background: #fff;
	color: #009fe1;
	font-weight: 500;
	margin-top: 30px;
	text-transform: uppercase;
	transition: all 0.40s ease-in-out 0s;
	text-decoration: none;
	font-size: 18px;
	letter-spacing: 3px;
}

.video-link:hover {
	color: #fff;
	background: #009fe1;
}

/*
--------------------------- ACTU
*/


#blocactu
{
	position:relative;
	float:left;
	width:38vw;
	height:auto;
	left:12vw;
	background-color:transparent;
	color:#FFF;
	text-transform:uppercase;
}
.txtactu
{
	position:relative;
	float:left;
	font-size:25pt;
	line-height:35pt;
	letter-spacing:6px;
	color: black;
}

#cta:hover
{
	background-color:#FFF;
	border:0;
	color:#00405a;
	border:3px solid #00405a;
}
#cta
{
	color:#FFF;
	background-color:#00405a;
	border:3px solid #FFF;
	cursor:pointer;
	position:relative;
	float:left;
	margin-top:50px;
	text-transform:uppercase;
	font-family: 'Raleway', helvetica, sans-serif;
	font-size:13pt;
	font-weight:300;
	letter-spacing:3px;
	padding:15px 45px 15px 45px;
	border-radius:40px;
	transition: all 0.40s ease-in-out 0s;
}

/*Twitter*/


#linkedin
{
	position:absolute;
	right:18vw;
	width:275px;
	height:275px;
	background-image:url(../img/linkedin.png);
  	background-position:top left;
	background-repeat:no-repeat;
	background-size:100% auto;
	-moz-background-size:100% auto;
	-o-background-size:100% auto;
	-webkit-background-size:100% auto;
}


/*
--------------------------- CONTACT
*/
/*Map*/

#map {
	position:relative;
    width: 100vw;
	top:0px;
	margin-top:-100px;
    height: 45vh;
	background-color:#666;
	margin-bottom:60px;
}

#bloccontact
{
	position:relative;
	float:left;
	width:38vw;
	height:auto;
	left:12vw;
	background-color:transparent;
	color:#0E0E0E;
}
.decnone
{
	text-decoration:none;
	color:inherit;
}
.email
{
	color:inherit;
	letter-spacing:inherit;
	
	transition: all 0.40s ease-in-out 0s;
}
.email:hover
{
	color:#009fe1;
	letter-spacing:4px;
	cursor:pointer;
}

#ctars
{
	position:relative;
	float:left;
	margin-left:5vw;
	background-color:#F1F1F1;
	border:0;
	text-transform:uppercase;
	color:#0E0E0E;
	font-family: 'Raleway', helvetica, sans-serif;
	font-size:13pt;
	font-weight:300;
	letter-spacing:3px;
	padding:15px 45px 15px 45px;
	border-radius:40px;
	transition: all 0.40s ease-in-out 0s;
	display:inline-block;
}
#ctars:hover
{
	color:#FFF;
	background-color:#009fe1;
	cursor:pointer;
	cursor:pointer;
}



#rs
{
	position:relative;
	float:left;
	margin-top:10vh;
	margin-left:5vw;
	width:100%;
}

#rs01,#rs02,#rs03
{
	position:relative;
	float:left;
	margin-top:20px;
	margin-right:20px;
	width:60px;
	height:45px;
	border-radius:25px;
	background-color:#F1F1F1;
	transition: all 0.40s ease-in-out 0s;
	
	background-position:center;
	background-repeat:no-repeat;
	background-size:auto 50%;
	-moz-background-size:auto 50%;
	-o-background-size:auto 50%;
	-webkit-background-size:auto 50%;
}
#rs01
{
	background-image:url(../img/rs01.png);
}
#rs02
{
	background-image:url(../img/rs02.png);
}
#rs03
{
	background-image:url(../img/rs03.png);
}
#rs01:hover,#rs02:hover,#rs03:hover
{
	background-color:#009fe1;
	cursor:pointer;
}

/*
--------------------------- FOOTER
*/

footer
{/*
	background-color:#F1F1F1;
	*/
	background:#00405a;
	
	poisition:relative;
	float:left;
	width:100vw;
	left:0vw;
	height:auto;
	padding:60px 0px 120px 0px;
}

#logofoot
{
	position:relative;
	top:0px;
	left:0px;
	width:230px;
	height:50px;
	z-index:5000;

	background-image:url(../img/logo.png);
  	background-position:left;
	background-repeat:no-repeat;
	background-size:auto 100%;
	-moz-background-size:auto 100%;
	-o-background-size:auto 100%;
	-webkit-background-size:auto 100%;
	margin-bottom:15px;
}

#blocfooter
{
	position:relative;
	float:left;
	width:38vw;
	height:auto;
	left:12vw;
	background-color:transparent;
	color:#FFF;
	font-size:8pt;
}

.mentions
{
	display:none;
	opacity:0;
}

.menulinks
{
	position:relative;
	float:left;
	margin-left:5vw;
	text-transform:uppercase;
}



#arrowUp
{
	position:absolute;
	width:24px;
	height:24px;
	right:12vw;
	background-color:transparent;
	display:block;
	-webkit-transform: rotate(0deg);
  	-moz-transform: rotate(0deg);
  	-o-transform: rotate(0deg);
  	transform: rotate(0deg);
  	-webkit-transition: .2s ease-in-out;
  	-moz-transition: .2s ease-in-out;
  	-o-transition: .2s ease-in-out;
  	transition: .2s ease-in-out;
  	cursor: pointer;
  	z-index:500;
}
#arrowUp span {
  display: block;
  position: absolute;
  height: 3px;
  border-radius:1.5px;
  background:#FFF;
  opacity: 1;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  
  top:16px;
}

#arrowUp:hover span {
  background:#009fe1;
  top:14px;
}



#arrowUp span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 9px;
    width:15px;
}

#arrowUp span:nth-child(2) {
   -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 0px;
    width:15px;
}

#arrowUp span:nth-child(3) {
   -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  left: 1px;
   width:22px;
  top:0px;
}

.navfoot
{
	color:inherit;
	letter-spacing:inherit;
	transition: all 0.40s ease-in-out 0s;
}
.navfoot:hover
{
	color:#009fe1;
	letter-spacing:4px;
	cursor:pointer;
}






/*
--------------------------- REF
*/

.text-intro {
	text-align:center;
	padding-bottom: 20px;
}

#ref01,#ref02,#ref03,#ref04,#ref05,#ref06,#ref07,#ref08,#ref09,#ref10,#ref11
{
	width:100%;
	height:auto;
	left:0px;
	position:relative;
	float:left;
	background-color:#FFF;
	padding:0px;
}
.mh{min-height:400px;}

#containrefl
{
	position:relative;
	float:left;
	left:26vw;
	width:48vw;
	margin-left:-40px;
	height:auto;
	padding: 40px 40px 0px 40px;
	background-color:#FFF;
}
#brainlmob{display:none;}
#brainrmob{display:none;}

#brainl,
#brainlbleu
{
	position:absolute;
	float:left;
	width:21vw;
	margin-right:0px;
	left:28vw;
	height:400px;
	background:url(../img/cerveaul.png);
	background-position:top right;
	background-repeat:no-repeat;
	background-size:auto 100%;
	-moz-background-size:auto 100%;
	-o-background-size:auto 100%;
	-webkit-background-size:auto 100%;
	z-index:300;
	opacity:0.7;
	
	-webkit-transition: .25s ease-in-out;
  	-moz-transition: .25s ease-in-out;
  	-o-transition: .25s ease-in-out;
  	transition: .25s ease-in-out;
}

#brainlbleu {
	left: 0;
	width: 120px;
	height: 253px;
	background:url(../img/cerveaulbleu.png);
	background-size: contain;
	top: 70px;
}

#brainr,
#brainrbleu
{
	position:absolute;
	float:left;
	width:21vw;
	margin-right:0px;
	right:28vw;
	height:400px;
	background:url(../img/cerveaur.png);
	background-position:top left;
	background-repeat:no-repeat;
	background-size:auto 100%;
	-moz-background-size:auto 100%;
	-o-background-size:auto 100%;
	-webkit-background-size:auto 100%;
	z-index:300;
	opacity:0.7;
	
	-webkit-transition: .25s ease-in-out;
  	-moz-transition: .25s ease-in-out;
  	-o-transition: .25s ease-in-out;
  	transition: .25s ease-in-out;
}
#brainrbleu {
	right:0;
	width: 120px;
	height: 253px;
	background:url(../img/cerveaurbleu.png);
	background-size: contain;
	top: 70px;
}
#brainl:hover, #brainr:hover
{
	opacity:1;
	cursor:pointer;
}

#brainl:hover
{
	margin-left:-15px;
}
#brainr:hover
{
	margin-right:-15px;
}



#inside
{
	position:relative;
	float:left;
	padding:0px;
	width:100%;
}


.botline
{
	poisition:relative;
	float:left;
	width:100%;
	height:2px;
	border-radius:1px;
	margin: 20px 0px 40px 0px;
}

.plusmoins
{
	position: absolute;
	top:0px;
	right:0px;
	background:#FFF;
	height:30px;
	width:30px;
	z-index:300;
  	cursor:pointer;
	
}
.plusmoins span
{
  display: block;
  position: absolute;
  height: 3px;
  border-radius:1.5px;
  background:#009fe1;
  opacity: 1;

  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  
  width:15px;
  top:12px;
}

.plusmoins:hover span
{
 	
  	cursor:pointer;
	opacity:0.5;
}
.plusmoins span:nth-child(1)
{
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  left:15px;
    
}
.plusmoins span:nth-child(2)
{
   -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  left:15px;
}

.plusmoins.open span:nth-child(1)
{
  opacity: 0;
  width:0%;
}

.plusmoins.open span:nth-child(2)
{
  
   -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.title
{
	font-weight:600;
	position:relative;
	width:auto;
	float:left;
	font-size:15pt;
	padding:0px 40px 30px 0px;
}
.lang
{
	font-weight:600;
	color:#009fe1;
	position:relative;
	float:left;
	
	font-size:15pt;
	width:auto;
}

.reftxt
{
	position:relative;
	float:left;
	font-size:9pt;
	letter-spacing:1px;
	width:100%;
}

.ctaref
{
	position:relative;
	float:left;
	margin:20px 0px;
	
	background-color:#009fe1;
	text-transform:uppercase;
	color:#FFF;
	font-family:'Raleway', helvetica, sans-serif;
	font-size:13pt;
	font-weight:300;
	letter-spacing:3px;
	padding:15px 45px 15px 45px;
	border-radius:40px;
	border:3px solid #009fe1;
	transition: all 0.40s ease-in-out 0s;
}
.ctaref:hover
{
	color:#009fe1;
	background-color:#FFF;
	cursor:pointer;
}
.headref
{ cursor:pointer;}

.why
{
	position:relative;
	float:left;
	color:#009fe1;
	margin:20px 0px;
}

}