@font-face {
    font-family: 'Ubuntu';
    src: url('../datas/v2r-ubuntu-r-webfont.woff2') format('woff2'),
         url('../datas/v2r-ubuntu-r-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	-moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'open_sanslight';
    src: url('../datas/opensans-light-webfont.woff2') format('woff2'),
         url('../datas/opensans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansregular';
    src: url('../datas/opensans-regular-webfont.woff2') format('woff2'),
         url('../datas/opensans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansbold';
    src: url('../datas/opensans-bold-webfont.woff2') format('woff2'),
         url('../datas/opensans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html {
	width:100%;
	height:100%;
}
body {
	background: #ffffff; /* Old browsers */
	margin:0px;
	padding:0px;
	font-family: 'Ubuntu', sans-serif;
	height:100%;
	#overflow:hidden;
}

div {
	box-sizing: border-box;
	#border:1px solid #ff0000;
}

.mainConteneur {
	display:inline-block;
	position:relative;
	margin:0px;
	padding:0px;
	width:100%;
	#height:100%;
	top:0px;
	left:0px;
}

.myAnchor
{
	position:relative;
	width:1px;
	height:1px;
}

.animation-element {
  opacity: 0;
}

.wTransition {
  -moz-transition: all 200ms ease-out;
  -webkit-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.wTransitionSlow {
  -moz-transition: all 1000ms ease-out;
  -webkit-transition: all 1000ms ease-out;
  -o-transition: all 1000ms ease-out;
  transition: all 1000ms ease-out;
 }

.animation-element.fading {
  opacity: 0;
  -moz-transition: all 2000ms ease-out;
  -webkit-transition: all 2000ms ease-out;
  -o-transition: all 2000ms ease-out;
  transition: all 2000ms ease-out;
}

.animation-element.fading.in-view {
  opacity: 1;
}

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 3000ms ease-out;
  -webkit-transition: all 3000ms ease-out;
  -o-transition: all 3000ms ease-out;
  transition: all 3000ms ease-out;
  
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.animation-element.slide-right {
  opacity: 0;
  -moz-transition: all 3000ms ease-out;
  -webkit-transition: all 3000ms ease-out;
  -o-transition: all 3000ms ease-out;
  transition: all 3000ms ease-out;
  -moz-transform: translate3d(100px, 0px, 0px);
  -webkit-transform: translate3d(100px, 0px, 0px);
  -o-transform: translate(100px, 0px);
  -ms-transform: translate(100px, 0px);
  transform: translate3d(100px, 0px, 0px);
}

.animation-element.slide-right.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.mycanvas {
	position:absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	padding:0px;
	margin:0px;
}

.cloud1 {
	position:absolute;
	width:calc(100% + 256px);
	top:0px;
	left:0px;
	-webkit-transform-origin: 0px 128px;
	transform-origin: 0px 128px;
	-webkit-animation: gaucheDroite 10s linear forwards infinite;
	animation: gaucheDroite 10s linear forwards infinite;	
}

.cloud2 {
	position:absolute;
	width:calc(100% + 512px);
	top:0px;
	left:0px;
	-webkit-transform-origin: 0px 256px;
	transform-origin: 0px 256px;
	-webkit-animation: gaucheDroite 10s linear forwards infinite;
	animation: gaucheDroite 10s linear forwards infinite;	
	
}

@-webkit-keyframes gaucheDroite{
    0%{-webkit-transform: scale(1.0) translateX(0%);}
    100%{-webkit-transform: scale(1.0) translateX(100%);}
}
 
@keyframes gaucheDroite{
    0%{transform: scale(1.0) translateX(0%);}
    100%{transform: scale(1.0) translateX(100%);}
}

.circle {
	width:64px;
	height:64px;
}

.animation-element.slide-up {
  opacity: 0;
  -moz-transition: all 2000ms ease-out;
  -webkit-transition: all 2000ms ease-out;
  -o-transition: all 2000ms ease-out;
  transition: all 2000ms ease-out;
  -moz-transform: translate3d(0px, 200px, 0px);
  -webkit-transform: translate3d(0px, 200px, 0px);
  -o-transform: translate(0px, 200px);
  -ms-transform: translate(0px, 200px);
  transform: translate3d(0px, 200px, 0px);
}

.animation-element.slide-up.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.pulse {
	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation: pulseanim 4s linear forwards infinite;
	animation: pulseanim 4s linear forwards infinite;
	-moz-transition: all 1000ms ease-out;
	-webkit-transition: all 1000ms ease-out;
	-o-transition: all 1000ms ease-out;
	transition: all 1000ms ease-out;
}

@-webkit-keyframes pulseanim {
  0% {
    -webkit-transform: translateX(0px);
  }
  5% {
    -webkit-transform: translateX(2px);
  }
  10% {
    -webkit-transform: translateX(0px);
  }
  15% {
    -webkit-transform: translateX(2px);
  }  
  20% {
    -webkit-transform: translateX(0px);
  } 
}

@keyframes pulseanim {
  0% {
    transform: translateX(0px);
  }
  5% {
    transform: translateX(2px);
  }
  10% {
    transform: translateX(0px);
  }
  15% {
    transform: translateX(2px);
  }  
  20% {
    transform: translateX(0px);
  } 

}

.anim-refs {
	opacity:1.0;
  -moz-transition: all 1000ms ease-out;
  -webkit-transition: all 1000ms ease-out;
  -o-transition: all 1000ms ease-out;
  transition: all 1000ms ease-out;
}
		
.loader{
 # margin: 0 0 2em;
  height: 100px;
  width: 100px;
  text-align: center;
  #padding: 1em;
  #margin: 0 auto 1em;
  display: inline-block;
  position:absolute;
  top:25%;
  left:50%;
  margin-left:-75px;
  opacity:0.25;
  z-index:200;
}

svg path,
svg rect{
  fill: #000000;
}

.zoomIn {
	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation: zoomInanim 3s ease-in-out forwards infinite;
	animation: zoomInanim 3s ease-in-out forwards infinite;
	-moz-transition: all 3000ms ease-in-out;
	-webkit-transition: all 3000ms ease-in-out;
	-o-transition: all 3000ms ease-in-out;
	transition: all 3000ms ease-in-out;
}

@-webkit-keyframes zoomInanim {
  0% {
    -webkit-transform: scale(1.0);
  }
  50% {
    -webkit-transform: scale(1.0);
  }
  60% {
    -webkit-transform: scale(1.0);
  }
  70% {
    -webkit-transform: scale(1.0) ;
  } 
  80% {
    -webkit-transform: scale(1.1);
  }   
  100% {
    -webkit-transform: scale(1.0);
  }
}

@keyframes zoomInanim {
  0% {
    transform: scale(1.0);
  }
  50% {
    transform: scale(1.0);
  }
  60% {
    transform: scale(1.0);
  }
  70% {
    transform: scale(1.0);
  } 
  80% {
    transform: scale(1.1);
  }   
  100% {
    transform: scale(1.0);
  }
}