body {

	display: flex;

	justify-content: center;

	align-items: center;

	flex-direction: column;

	font-family: sans-serif;

}



p {

	margin: 0 10px;
}

br{
	margin:5px;
}



.h1left{

  color: #18434A;

  font-family: sans-serif; 

  margin-right: auto;

  border-left: 8px orange solid ;

  text-indent: 5px;



  

}
.h1left2{

  color: #18434A;

  font-family: sans-serif; 

  margin-right: auto;

  border-left: 8px orange solid ;

  text-indent: 5px;
  
  position: relative;
 
  top: 75px;
  
  z-index: -1;



  

}



.h1right{

  color: #18434A;

  font-family: sans-serif;

  margin-left: 50%;

  border-left: 8px orange solid ;

  text-indent: 5px;



}



.h1right3{

  color: #18434A;

  font-family: sans-serif;

  margin-left: 22%;

  border-left: 8px orange solid ;



  

}



.h1right4{

  color: #18434A;

  font-family: sans-serif;

  margin-left: 50%;

  border-left: 8px orange solid ;

  position: relative;

  bottom: 539px; right: 18px;



}




.h1right5{

  color: #18434A;

  font-family: sans-serif;

  border-left: 8px orange solid ;
  
  position: absolute;

  z-index: -1;
  margin-top: 3%;
  margin-left: 44%;

 



}





.lefth2{

  font-family: sans-serif;

  margin-right: auto;

  font-size: 23px;

  border: 2px #438B97 solid;

  color: black;

  

}



.lefth2-2 {

  font-family: sans-serif;

  margin-right: auto;

  font-size: 23px;

  border: 2px #438B97 solid;

  color: black;

  

  position: relative;

  bottom: 670px;

  z-index: -1;

  

}



.righth2{

  font-family: sans-serif;

  margin-left: 30%;

  font-size: 23px;

  border: 2px #438B97 solid;

  color: black;

}





@font-face {

  font-family: "Bitcoin";

  src: url("Bitcoin.otf") format("truetype");

  font-style: normal;

  font-weight: normal;

  

}



@font-face {

  font-family: blockch;

  src: url("BLOCKCHAIN.ttf");

}











:root{

  --hauteur-menu: 60px;

}

* {

  margin: 0px;

  padding: 0px;

  font-family: Montserrat, sans-serif;

}

nav {

  width: 100%;

  font-size: 18px;

  position: sticky;

  top: 0;

}



nav > ul {

  display: flex;

  text-align: center;

  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3);

  height: var(--hauteur-menu);

}

 

nav ul {

  list-style-type: none;

}



nav > ul > li {

  background-color: white;

  position: relative;

  height: 100%;

  flex: 1;

}





nav > ul > li > a {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}



li a {

  text-decoration: none;

  color: black;

}



.menu-deroulant > a:after{

  content: '❯';

  font-size: 15px;

  margin-left: 7px;

  display: inline-block;

}



.sous-menu {

  margin-top: var(--hauteur-menu);

  width: 100%;

  text-align: left;

  background-color: white;

  border-radius: 2px;

  overflow: hidden;

  max-height: 0;

}



.sous-menu > li > a {

  height: 50px;

  padding-left: 20px;

  width: 100%;

  align-items: center;

  display: flex;

}



nav > ul > li:hover > a{

  color: #F38B4A;

}



.sous-menu > li:hover {

  background-color: #F38B4A;

  

  

}



.sous-menu > li:hover > a {

  color: white;

}



@keyframes rotationFleche {

  0% {

    transform: rotate(0deg);

  }

  100%{

    transform: rotate(90deg);

  }



}



.menu-deroulant:hover > a:after{

  animation: rotationFleche 0.2s linear forwards;

}



@keyframes apparitionSousMenu {

  0% {

    box-shadow: 0px 3px 3px 1px black;

    border-top: 3px solid black;

  }

  30% {

    box-shadow: 0px 3px 3px 1px #438B97;

  }

  100% {

    max-height: 50em;

    border-top: 3px solid #438B97;

    box-shadow: 0px 3px 3px 1px #438B97;

  }

}



.menu-deroulant:hover > .sous-menu {

  animation: apparitionSousMenu 1s forwards;

}



.imgright {

  width: 50%;

  margin-left: auto;

  margin-top: -7%;



}



.imgright2 {

  width: 50%;

  margin-left: auto;

  margin-top: -31%;

}



.imgright3{

  width: 50%;

  margin-left: auto;





}
.imgright4{

  width: 50%;

  margin-left: auto;
  margin-top: -25%;







}



.imgleft {

  width: 50%;

  margin-right: auto;

  margin-top: ;

}



.imgleft2 {

  width: 50%;

  margin-right: auto;

  margin-top: -5%;



}



.imgleft3 {

  width: 50%;

  margin-right: auto;

  margin-top: -24%;

}



.imgleft4{

  width: 50%;

  margin-right: auto;

  margin-top: -12%;

}



.imgleft5{

  width: 50%;

  margin-right: auto;

  margin-top: -31%;
  margin-bottom: 2%;

}



.leftext{

  display: block;

  margin-right: 50% ;

  font-size: 18px;

  text-indent: 20px;



}



.leftext2{

  display: block;

  margin-right: 50% ;

  font-size: 18px;

  text-indent: 20px;

  position: relative;

  bottom: 670px;

  z-index: -1;



}





.solotext{

  display: block;

  font-size: 18px;

  text-indent: 20px;

}



.solotext2{

  display: block;

  font-size: 18px;

  text-indent: 20px;

  margin-top: 5%;

}



.rightext{

  display: inline-block;

  padding-left: 50%;

  margin-top: -19%;

  font-size: 18px;

  text-indent: 20px;

}



.rightext2{

  display: inline-block;

  padding-left: 50%;

  font-size: 18px;

  text-indent: 20px;

}



.rightext3{

  display: inline-block;

  padding-left: 50%;

  font-size: 18px;

  text-indent: 20px;

  position: relative;

  top: 100px;

}



.rightext4{

  display: inline-block;

  padding-left: 50%;

  font-size: 18px;

  text-indent: 20px;

  margin-top: -22%;



  



}









.tec{

  

  font-size: 22px;

  border: 1px #F38B4A ridge;

  font-family: sans-serif;



}



.defblockchain {

  display: block;

  margin-right: 50% ;

  font-size: 18px;

  text-indent: 20px;
  margin-top: 10%;

}



.loader {

    position: absolute;

    width: 100%;

    height: 100%;

    background: white;

    display: flex; 

    justify-content: center;

    align-items: center;

}

.lettre {

    color: #438B97;

    font-size: 80px;

    letter-spacing: 15px;

    margin-bottom: 150px;

    animation: flash 1.2s linear infinite;



}

@keyframes flash {

    0% {

        color: #F38B4A;

        text-shadow: 0 0 7px #F38B4A;

    }

    90% {

        color: #438B97;

        text-shadow: none;

    }

    100% {

        color: #F38B4A;

        text-shadow: 0 0 7px #F38B4A;

    }

}



.lettre:nth-child(1){

    animation-delay: 0.1s;

}

.lettre:nth-child(2){

    animation-delay: 0.2s;

}

.lettre:nth-child(3){

    animation-delay: 0.3s;

}

.lettre:nth-child(4){

    animation-delay: 0.4s;

}

.lettre:nth-child(5){

    animation-delay: 0.5s;

}

.lettre:nth-child(6){

    animation-delay: 0.6s;

}

.lettre:nth-child(7){

    animation-delay: 0.7s;

}

.lettre:nth-child(8){

    animation-delay: 0.8s;

}

.lettre:nth-child(9){

    animation-delay: 0.9s;

}

.lettre:nth-child(10){

    animation-delay: 1s;

}



.fondu-out {

    opacity: 0;

    transition: opacity 0.4s ease-out;

}





.logo {

width: 600px;

margin-top: 17px;

margin-bottom: 17px;

}




.image1 img {

z-index: -1;

-webkit-transition: all 1s ease; 

-moz-transition: all 1s ease; 

-ms-transition: all 1s ease; 

-o-transition: all 1s ease;

transition: all 1s ease;

}

.image1:hover img {

z-index: -1;

-webkit-transform:scale(1.25); 

-moz-transform:scale(1.25); 

-ms-transform:scale(1.25); 

-o-transform:scale(1.25);

transform:scale(1.25);

}



*, ::before, ::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}





}

.container {

  max-width: 800px;

  margin: 0 auto;

  padding: 50px;

}



.slider .imgslid {

  max-width: 100%;

  display: none;

}

.imgslid.active {

  display: block;

  animation: fade 0.8s;

}

@keyframes fade {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



.cont-btn {

  width: 100%;

  height: auto;

  border: 1px solid #000;

  box-shadow: 0 10px 10px rgba(0,0,0,0.3);

  display: flex;

  justify-content: center;

}

.btn-nav {

  font-size: 50px;

  margin: 0 15px;

  cursor: pointer;

}



.imgslide{

  width: 600px;



}



.slid{

  width: 500px;

  overflow: hidden;

  margin: 150px auto;

  z-index: -1;

  border: 2px solid #F38B4A;
 

}



.slidz{

  width: calc(1000px*3);

  animation: glisse 5s infinite;

  z-index: -1;

}



.slide{

  float: left;

  z-index: -1;

}



@keyframes glisse{

  0% {

    transform: translateX(0);

  }

  33%{

    transform: translateX(-600px);

  }

  66%{

    transform: translateX(-1200px);

  }

  100%{

    transform: translateX(0);

  }



}

marquee{
  font-weight: bold;
  position: relative;
  bottom: 120px;
  z-index: -1;

}

.support{
  font-size: 40px;
}