/*                                                                       
@@@@@@@@   @@@@@@    @@@@@@   @@@  @@@  @@@@@@@@  @@@@@@@@  @@@@@@@   
@@@@@@@@  @@@@@@@@  @@@@@@@@  @@@  @@@  @@@@@@@@  @@@@@@@@  @@@@@@@@  
     @@!  @@!  @@@  @@!  @@@  @@!  !@@  @@!       @@!       @@!  @@@  
    !@!   !@!  @!@  !@!  @!@  !@!  @!!  !@!       !@!       !@!  @!@  
   @!!    @!@  !@!  @!@  !@!  @!@@!@!   @!!!:!    @!!!:!    @!@@!@!   
  !!!     !@!  !!!  !@!  !!!  !!@!!!    !!!!!:    !!!!!:    !!@!!!    
 !!:      !!:  !!!  !!:  !!!  !!: :!!   !!:       !!:       !!:       
:!:       :!:  !:!  :!:  !:!  :!:  !:!  :!:       :!:       :!:       
 :: ::::  ::::: ::  ::::: ::   ::  :::   :: ::::   :: ::::   ::       
: :: : :   : :  :    : :  :    :   :::  : :: ::   : :: ::    :        

 */
/* CSS de base */
@font-face {
    font-family: 'suisse_intlbook';
    src: url('fonts/suisseintl-book-webfont.woff2') format('woff2'),
         url('fonts/suisseintl-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body {
	font-family: 'suisse_intlbook' ;
	font-size: 18px;
	color: #000; /* couleur du texte */
	background-color: #FFF;
	margin: 0;
	padding:0;
	text-align: center;
	min-height: 100vh;
}
h1, h2, h3, h4, h5, h6, p { /* pour utiliser les H1, H2, etc sur les éléments importants,
	mais pas focément affichés en très gros */
	font-size: 12px;
	font-weight: normal; /* pas gras */
	margin:0;
	padding:0;
}

h1{
	font-size: 5.42vw;
	 line-height: 156px;

}
h4{
	font-size: 2.8vw;
	line-height: 76px;

}
h5{
	font-size: 1.4vw;
	 line-height: 36px;

}
a { text-decoration:none; color:#000; }
a:hover { text-decoration:underline; } /* liens au survol */

ul { list-style-type: none; padding:0; } /* pas de puces dans mes listes */
 
 .conteuner{
	width:100%;
 }
 header{
 	display: inline-flex;
	width:100%;
	height: 160px;
	/* background-color: purple; */
	box-sizing: ;
 }
 .ctr1{
 	display: inline-flex;
 	width: 100%;
 	height: 80px;
 }
 .langue{
 	width:10%;
 	height: 80px;
 }
 .langue div{
	height: 50%;
 }
 .titre{ 
	/* background-color: blue; */
	width: 30%;
	height: 100%;
 }
 .info{
 	width: 70%;
 	height: 100%;
 	/* background-color: grey; */
 }
 .insta{
 	/* background-color: yellow; */
 	width: 30%;
 	height: 80px;
 }
 .email{
 	width: 60%;
 }
 .tel{
 	/* background-color: red; */
 	width: 40%;
 	height: 80px;
 }
 .about{
 	/* background-color: white; */
 	width: 30%;
 	height: 80px;
 }
 .facebook{
 	width: 30%;
 	height: 80px;
 }
 .projet{
    flex: auto;
    display: flex;

 }
 .border{
 	border: solid black 4px;
    border-bottom: none;
    border-left: none;
    box-sizing: border-box;
 }
.txt{
    display: inline-flex;
    flex-direction: column;
    width: 30%;
    text-align: left;
}
.img{
    width: 70%;
    flex: auto;
    filter: grayscale(0.9);
    transition-duration: 150ms
}
.img:hover{
    filter: none;
    transition-duration: 150ms
}
.conteneur{
	    flex: auto;
}
.name h4{
	margin-left: 30px;
	margin-right: 10px;
}
.cartel{
	margin-top: 22px;
	margin-left: 30px;
	margin-right: 10px;
	font-size: 1.8vw;
}
.description{
	margin-top: 40px;
	margin-left: 30px;
	font-size: 1.4vw;
	margin-right: 10px;
}
.abouttxt{
	margin-top: 40px;
	margin-left: 30px;
	font-size: 1.4vw;
	margin-right: 30px;
	text-align: left;
}
.exp{
	font-size: 1.4vw;
	margin-top: 30px;
	margin-left: 30px;
	margin-right: 10px;
	text-decoration: underline;
}
.expdesc{
	margin-right: 10px;
	font-size: 1.2vw;
	margin-top: 5px;
	margin-left: 30px;
}
/* scroll bar */

	

body::-webkit-scrollbar {
	width: 80px;
}
body::-webkit-scrollbar-thumb {
	border-radius: 40px;
	background-color: white;
	border: 4px solid #000;
	height: 10px;
}

body::-webkit-scrollbar-track {
  border: 1px solid #fff;
}
 .lightSlider img{
 	width: 100%;
 }