@charset "UTF-8";



#u { -webkit-text-stroke: 0.6px white;font-weight: lighter;}
.hamburger{ -webkit-text-stroke: 0.5px white;font-weight: lighter;}
h5{ -webkit-text-stroke: 0.5px white; font-weight: lighter;}
.nohover{ -webkit-text-stroke: 0.5px white; font-weight: lighter;}
body {
   -webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;;
}
#u{ margin-top: -10px;}
footer{
margin-top: 10%;}
.mainmarginauto {
    margin: auto;
    width: 85%;
}


.sebastienbaillou {
   opacity: 0.4;
}

.demo li a {
font-weight: bold !important;}
.aie {
font-weight: bold !important;}
.mainmarginauto {
font-weight: bold !important;}

#my-slider {
  
    margin-top: 2% !important;
    
}



html { overflow-x: hidden; } 



body{
	margin: 0;
}


.finblue{
    background-color: #0f4df9;
	padding-bottom: 3%;
	padding-top: 3%;
 }

.footer-copyright {
    text-align: right;
    margin-right: 6%;
    font-family: 'minerale_trialextralight';
    font-size: 10pt;
}
.mainmarginauto{
margin: auto;}

.nohover :hover{
color:white;
transition: 0,5s;}

.nohover :hover{
color:white;
}
.aie li:hover{
color:white;}
 
.main{
margin-top: 0%;
	margin-bottom: -39px;
}

.wrapproject{
display:flex;}

ol img {
margin-top: 0%;}

.texteprojeta{
	margin: auto;
}
.texteprojetb{
	margin: auto;
}

#toggle {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: block;
        width: 70px;
        height: 55px;
        float: right;
        margin: 0 -2em 1em 0;
        text-indent: -9999px;
        overflow: hidden;
        background: #444 url("hamburger.gif") no-repeat 50% 33%
    } 
.odd {
    margin: auto;}

.even{
    margin: auto;}

.redgreen ul {
 
	height: 100px;
	width: 100px;
	background: yellow;
}

header .wrap{
    margin-left: 4%;
}


.blacktoblue
{
    background-image: linear-gradient(black, #0f4df9, #0f4df9);

    /* Obligatoire si on veut "voir" le dégradé */
 z-index: -5;
    height: 200px;
	margin: -30px;
}
.flechede {
transform: rotate(3.15rad);

	position: absolute;
margin-left: 70%;
		margin-top: -80px;}

.flechede img{
width: 100px;}

.fleches {


	    width: 30%;
	padding-top: 300px;
}

.fleches img{
width: 100px;}

@-webkit-keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(18px);
    transform: translateY(28px);
  }
  50% {
    -webkit-transform: translateY(14px);
    transform: translateY(24px);
  }
  100% {
    -webkit-transform: translateY(18px);
    transform: translateY(28px);
  }
}
@keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(18px);
    transform: translateY(28px);
  }
  50% {
    -webkit-transform: translateY(0px);
    transform: translateY(4px);
  }
  100% {
    -webkit-transform: translateY(18px);
    transform: translateY(28px);
  }
}
@-webkit-keyframes hvr-hang-sink {
  100% {
    -webkit-transform: translateY(18px);
    transform: translateY(28px);
  }
}
@keyframes hvr-hang-sink {
  100% {
    -webkit-transform: translateY(18px);
    transform: translateY(28px);
  }
}
.hvr-hang {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(78px) translateZ(10);
  transform: perspective(78px) translateZ(10);
  box-shadow: 0 0 30px transparent;
}
.hvr-hang, .hvr-hang:focus, .hvr-hang:active {
  -webkit-animation-name: hvr-hang-sink, hvr-hang;
  animation-name: hvr-hang-sink, hvr-hang;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 7, infinite;
  animation-iteration-count: 7, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}





#circle > img { 
  /*position: fixed; */
	position: absolute;
width: 15%;
  height: auto; 
	z-index: -2;
}


.inrightg { 
transform: rotate(-3rad);
position:absolute;
	    margin-left: 60%;
    margin-top: 38%;
	z-index: -2;
 
}






.menu{
	position: absolute;
    top: 0;
    margin-left: 75%;
    margin-right: 20px;
    margin-top: 35px;
}

hr{
opacity: 0.5;
width: 90%;
font-size: 60px;
}

.firstgrid{
	 display: flex;
    justify-content: center;
	

 }
.textefeche{
	 display: flex;
	justify-content: center;
   
	

 }

.showcase-title{
margin-top: -10px;}

.showcase-caption {
	margin: auto;
	/*order: 2;*/

	
	
	

}
.even .showcase-caption .texteprojet{
	margin: auto;
	width: 400px;
	padding-right: 40%;
	


}

.texteprojet{
	margin: auto;
	width: 300px;
	padding-left: 20%;
	


}

.imagefloat{ 
	margin: auto;


}
/*

		.imagefloat img{
width: 300px;
}
	

.firstgrid{
	 display: block;
	

 }


.showcase-caption {
 display: inline-block;
	float:left; 	float:right;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4em;
	
	

}
.texteprojet{
	margin-left: auto;
	margin-right: auto;
	width: 200px;
}

.imagefloat{ 
 display: inline-block;	
}
*/



.hide{
display:none;}
a 
{ 
text-decoration:none; 
	list-style-type: none;
	color: white;
} 

img{
    width: 800px;
    margin-top: 10%;

}


li{
	color:white;
	transition: 0.5s;
	transition-timing-function: ease-in;
}
li:hover{
	color:blue;
	transition: 0,5s;
}
  .cRetour {
    

    transition: all ease-in 2s;
   
    cursor: pointer;
   
}

@font-face {
    font-family: 'montserrathairline';
    src: url('../fonts/montserrat-hairline-webfont.woff2') format('woff2'),
         url('../fonts/montserrat-hairline-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}
@font-face {
    font-family: 'minerale_trialblack';
    src: url('../fonts/mineraletrial-black-webfont.woff2') format('woff2'),
         url('../fonts/mineraletrial-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




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

}




@font-face {
	
    font-family: 'minerale_trialextralight';
    src: url('../fonts/mineraletrial-extralight-webfont.otf') format('otf'),
         url('../fonts/mineraletrial-extralight-webfont.woff') format('woff');
	
   -webkit-text-stroke: 0.5px white;
    font-weight: 700 !important;
	
    font-style: bold !important;
	

}




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

}




@font-face {
    font-family: 'minerale_trialmedium';
    src: url('../fonts/mineraletrial-medium-webfont.woff2') format('woff2'),
         url('../fonts/mineraletrial-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.blueback{
	background-color: #0f4df9 ;
	color: white;
	/*margin-left:-10px;
	margin-right:-10px;*/
	
}


body{

	background-color: black;
	color: white;
	/*display:grid;*/
}

.fat{
	font-family: 'minerale_trialmedium';
	font-size: 55pt;
	
}

h1{
font-family: 'minerale_trialextralight';
font-size: 20pt;
padding-left: 3%;
	    margin-top: 40px;
}

h3{
font-family: 'minerale_trialmedium';
font-size: 26pt;
	font-weight:lighter;
	letter-spacing: 1px;
}
h4{
font-family: 'montserrathairline';
font-size: 14pt;
	font-weight:lighter;
}

h5 {
    font-family: 'minerale_trialextralight';
    font-size: 12pt;
}

ul{
list-style-type: none;	
	text-decoration: none;
font-family: 'minerale_trialextralight';
font-size: 16pt;
-webkit-padding-start: 0.5em;


	

}


li{
	list-style-type: none;
	text-decoration: none;
	list-style: none;
	display: inline;
font-family: 'minerale_trialextralight';
font-size: 16pt;
}





ul{
	margin: auto;

	

}
.even {

	order: 2;

}
.imagefloat img{
	opacity: 1;
	transition: 0.3s;
	transition-timing-function: ease-out;
	
}

.imagefloat img:hover{
	transition: 0,5s;
	opacity: 0;
	background:yellow;
	
}

.hoverr{
position: absolute;

}







@media screen and (min-width: 200px) and (max-width: 900px)
{

	
	
	

	.imagefloat{
	width:100%;}
	
		.bugavoir{
	position: absolute;}
	
	#intro{
	margin: auto;}
	
	.even .showcase-caption .texteprojet{
	
	padding-right: 0%;
	


}

.texteprojet{
	
	padding-left: 0%;
	


}
	
	.textefeche
	{
	display: flex;
	flex-direction: column;
	}
	
	.fleches{
	order: 2;
	width: 100%;
    padding-top: 0;
	display: flex;
    justify-content: center;}
	
	.fat {
    font-family: 'minerale_trialmedium';
    font-size: 28pt;
}

	
.firstgrid
	{
	display: flex;
	align-items: left;
	justify-content: none;
	flex-direction: column;
	}
	
	.even {

	order: 0;

}
	
.texteprojet {
 
    width: 400px;
}
	
	

	img{
width: 90%;
}
	
	
}


@media screen and (min-width: 1200px) and (max-width: 1400px)
{
	.even .showcase-caption .texteprojet {
    margin: auto;
    width: 300px;
    padding-right: 40%;
}
	.firstgrid img{
	width:600px; }
	.texteprojet {
    margin: auto;
    width: 100px;
   padding-left: 0%; 
}
	
	.bugavoir img{
	width:600px; }
}

@media screen and (min-width: 1020px) and (max-width: 1200px)
{
		.even .showcase-caption .texteprojet {
    margin: auto;
    width: 300px;
    padding-right: 40%;
}
	
	.firstgrid img{
	width:530px; }
	
	.texteprojet {
    margin: auto;
    width: 100px;
   padding-left: 0%; 
}
	
	.bugavoir img{
	width:530px; }
}

@media screen and (min-width: 900px) and (max-width: 1020px)
{
		.even .showcase-caption .texteprojet {
    margin: auto;
    width: 300px;
    padding-right: 40%;
			margin: 10%;
}
	.even {
    margin: auto;
    
}
	.firstgrid img{
	width:450px; }
	
	.texteprojet {
    margin: auto;
    width: 100px;
   padding-left: 0%; 
}
	
	.bugavoir img{
	width:450px; }
}

@media screen and (min-width: 650px) and (max-width: 900px)
{
	.odd {
    margin: auto;
    margin-left: 10%;
}

 
}


@media screen and (min-width: 500px) and (max-width: 900px)
{
	.texteprojet{
	  
	  
		margin-top:;}
	.texteprojeta {
    margin-left: 15%;
}
	

	h3 {
       font-size: 24pt;
}

	.ism-slides li{
 
}
	#my-slider .ism-button-next {
   
    right: -10px !important;
}

	.wrapproject {
    display: flex;
    flex-direction: column;
} 
	
	.texteprojetb {
    margin: auto;
    width: 85%;
}
	#my-slider .ism-button-prev {
    
  
    left: -10px!important;
}

	.fleches {
    margin-top: 12%;
}
	.wrap {
    margin-bottom: 8%; 
}
	ul{    webkit-padding-start: 0.5em;}
	
	
	

	
	.bugavoir {
    position: relative; 
 
    overflow: hidden;
}
.hoverr {
    position: absolute;
    /* position: relative; */
    
    overflow: hidden;
}
	}

@media screen and (min-width: 200px) and (max-width: 500px)
{
	.texteprojeta {
    margin-left: 15%;
}
	h3 {
       font-size: 24pt;
}

	.ism-slides li{
 
}
	#my-slider .ism-button-next {
   
    right: -10px !important;
}
	#my-slider {
    width: 100% !important;
    margin: auto;
    height: auto;
    max-height: 500px;
} 
	.wrapproject {
    display: flex;
    flex-direction: column;
} 
	
	.texteprojetb {
    margin: auto;
    width: 85%;
}
	#my-slider .ism-button-prev {
    
  
    left: -10px!important;
}
.fat {
    font-family: 'minerale_trialmedium';
    font-size: 26pt;
}
	.fleches {
    margin-top: 12%;
}
	.wrap {
    margin-bottom: 8%; 
}
	ul{    webkit-padding-start: 0.5em;}
	
	
	
	.firstgrid img {
    width: 120%;
    position: absolute;
    top: -9999px;
    left: -9999px;
    right: -9999px;
    bottom: -9999px;
    margin: auto;
}
	
	.bugavoir {
    position: absolute;
    /* position: relative; */
    width: 360px;
    height: 200px;
    overflow: hidden;
}
.hoverr {
    position: absolute;
    /* position: relative; */
    width: 360px;
    height: 200px;
    overflow: hidden;
}
	hr{ display: none;}}

	@media screen and (min-width: 700px) and (max-width: 1200px)
{
.fat {
    font-family: 'minerale_trialmedium';
    font-size: 40pt !important;
}
}

	@media screen and (min-width: 500px) and (max-width: 700px)
{
.fat {
    font-family: 'minerale_trialmedium';
    font-size: 35pt !important;
}
}

	@media screen and (min-width: 200px) and (max-width: 500px)
{
	.fleches {
   margin-top: 0%; 
}

 
	#ronblu1{ display: none;}
	#ronblu2{ margin-top: 0% !important;margin-left: 3%;}
	#ronblu3{ display: none;}
	#ronblu4{ display: none;}
.fat {
    font-family: 'minerale_trialmedium';
    font-size: 26pt;
}