@font-face {	
font-family: Hiragino Kaku Gothic Pro;
src:url("fonts/hiragino-w3.otf");
}

@font-face {	
font-family: Hiragino Kaku Gothic Std;
src:url("fonts/hiragino-w8.otf");
}

*{
box-sizing:border-box;
margin:0;
padding: 0;
text-decoration:none; 
}


body{
margin:0;
}

header {
font-family:Hiragino Kaku Gothic Std;
display: flex; 
height: 10vh;
width: 100%;
justify-content:space-between;
align-items: start  center; 

padding: 15px 50px;
margin-top: 1vh;
text-decoration:none; 
}

a{
color: black;  
}

.logo{
font-family: Alkalami;
letter-spacing:-2px;
text-decoration:none;


}

#DD {
height:60%;
}


.onglets {
list-style: none;
padding-top:2vh;
text-decoration:none;
}

.liste1 {
display: inline-block;
padding: 0px 15px;
color:black;
}

.liste1 a:hover{
color: orange;
}

.barmasqué {
background-color:none;
position:relative;
text-align:center;
}

.bars1{
text-align:center;
position:absolute;
z-index:1;
background-color:white;
overflow:hidden;
width:100vw;

  -moz-animation: cssAnimation 0s ease-in 7s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 7s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 7s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 7s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
    0%   {pointer-events: auto;}
    90%  {pointer-events: auto;}
    100% {pointer-events: none;}
}
@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
    0%   {pointer-events: auto;}
    90%  {pointer-events: auto;}
    100% {pointer-events: none;}
}

.bars1 active{
visibility:hidden;
}

.bars{
text-align:center;
//background-color:yellow;
}

.rectry{
height:15vh;
margin-left:2vw;
margin-right:2vw;
background-color:black;
margin-left:2vw;
margin-right:2vw;
margin-bottom:3vh;
}

.rectry img{
height:100%;

}

.me {
height:15vh;
margin-left:25%;

margin-bottom:3vh;
background-color:black;
overflow:hidden;
display:flex;
}
.me img{
height:100%;
}

.rectry1{
height:15vh;
margin-left:2vw;
margin-right:2vw;
margin-bottom:3vh;
background-color:black;
overflow:hidden;
color:white;
transition-duration:1s;
display:flex;
cursor:pointer;
}

#rectangle1{
	height:15vh;
}

#rectangle2{
	height:15vh;
}

#rectangle3{
	height:15vh;
}

#rectangle4{
	height:15vh;
}

#rectangle5{
	height:15vh;
}

#rectangle6{
	height:15vh;
}

#rectangle7{
	height:15vh;
}

#rectangle8{
	height:15vh;
}
	
#rectangle9{
	height:15vh;
}
	
	


//.rectry1:active{
//height:100%;
//transition-duration:0.2s;
//transition-delay:9s;
//filter:none;
//}

.text{
font-family:Hiragino Maru Gothic Pro ;
text-align:right;
}

.preview1{
padding:6vh;
padding-bottom:10vh;
height:100vh;
overflow:hidden;
text-align: left;
font-family: Hiragino Kaku Gothic Std;
}


.title{
text-align:right;
white-space: nowrap;
text-overflow: clip;
}


.title :hover{
color:orange;
}

.text{
white-space: nowrap;
text-overflow: clip;
}	

#recto {
height:40vh;
margin-bottom:5vh;

}

#verso {
height:40vh;


}




.rectry2{
	height:15vh;
	margin-left:2vw;
	margin-right:2vw;
	margin-bottom:3vh;
	background-color:black;
	overflow:hidden;
	color:white;
	transition-duration:1s;
	transition-delay:7s;
	display:flex;
}
.rectry2:active{
height:115vh;
transition-duration:0s;
transition-delay:0s;
filter:none;
}

.textop{
flex:1 1 30%;
padding:6vh;
padding-bottom:10vh;
overflow:hidden;
text-align:left;
font-family: Hiragino Kaku Gothic Std;

min-height: 100vh;
display: flex;
flex-direction: column;
}

.textop2{
flex:1 1 20%;
padding:6vh;
padding-bottom:10vh;
overflow:hidden;
text-align:left;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: Hiragino Kaku Gothic Std;

}




.textop-mob{
display:none;
}
	
.textp{
text-align:right;
font-family:Hiragino Kaku Gothic Pro;
margin-top: 9vh;
}

.textpbis{
text-align:right;
font-family:Hiragino Kaku Gothic Pro;
margin-top: 90vh;

}

.textp2{
text-align:right;
font-family:Hiragino Kaku Gothic Pro;
margin-top: auto;
}

.imagein{
	flex:1 1 60%;
	align-items: start center;
	padding-left:3.5vw;
	padding-top:8vh;
	text-align:left;
	overflow:hidden;
	padding-bottom:5vh;
}

.imagein2{
flex:1 1 60%;
justify-content:space-between;
align-items: start  center;
padding-bottom:5vh;
margin-top:7vh;
}

.imagein2 img{
width:90%;
}


.imagein3{
flex:1 1 60%;
align-items: start  center;
display:inline-block;
padding-top:8vh;
padding-left:3.5vw;
text-align:left;
padding-bottom:5vh;
background-color:red;

}

.imagein3 img{
height:65vh;
vertical-align:top;
}


.imagein4{
flex:1 1 60%;
justify-content:space-between;
align-items: start  center;
padding-bottom:2vh;
display:inline-block;
padding-top:8vh;
padding-left:3.5vw;
text-align:left;
padding-bottom:5vh;
}

.imagein4 img{
height:65vh;
}

.ctncm {
display:flex;
}
 .ctncm2 {
display:inline-block;

width:65vh;
height:100vh;
}

 .ctncm3 {
display:inline-block;
}


#cmtk {
height:75vh;
margin-bottom:5vh;
}

#cmtk2 {
height:85vh;
margin-right:3vw;
}

#flag2{
height:65vh;
margin-right:3vw;
}

#flag{
height:85vh;
margin-left:3vh;

}

#covertk{
height:35vh;
margin-bottom:3vh;
}

#covertk2{
height:35vh;

}


.bwd {
flex:1 1 60%;
justify-content:space-between;
align-items: start  center;
display:block;
text-align:left;
padding-left:3.5vw;
padding-top:8vh;
}
	
#bw { 
height:10vh;
margin-bottom:4vh;
}

#bw2 { 
height:60vh;

}



#typef {
height:13vh;
margin-right:3vw;
text-align:left;
margin-top:6.5vh;
}

.containerinfo {
//background-color:orange;
margin: 0 0vh 0 5vh;
display:flex;
text-overflow: clip;
font-family:Hiragino Kaku Gothic pro;
font-size:20px;
justify-content: left;
width: 100vw;
}

.mee {
//background-color:pink;
display:flex;
float:bottom;
padding-right:5vw;

margin-top:5vh;
}
.mee img {
height:19vh;

padding-right:5vw;
}

. container2{


}

.midtext {

//background-color:red;
width:23vw;	
display:block;
margin:5vh 35vw 0 3vw;

}

.contact {
margin-top:1vh;
//background-color:blue;
width:18vw;
display:block;
float:top;
height:10vh;
}
.contact2 {
margin-top:1vh;
//background-color:blue;
width:100vw;
display:none;
float:top;
height:10vh;

}

.inf{
margin-left:1vh;
width:80vw;
text-overflow: clip;
}

#contact {
height:4vh;


}

.lienig text{
text-decoration:none;
}

.lienig :hover{
color:orange;	
}

	#typeb {
		height:14vh;
	margin-left:0vw;
	margin-right:8vw;
text-align:center;
margin-bottom: 8vh;
	}
	
#topboy2 {
margin-bottom: 3vh;	
	}
	
	#mesh1 {
	height:30%
	}

footer {
position:fixed;
text-align:center;
width:100%;
height:3.5vh;
left: 0;
bottom: 0;
z-index:2;
font-family:Hiragino Kaku Gothic Pro;
font-size:12px;
background-color:white;
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
.me {
height:15vh;
margin-left:25vh;
margin-bottom:3vh;
background-color:black;
overflow:hidden;
display:flex;
}
	.mee {
margin-top:9vh;
	}
	
.container2 {
height:60vh;
}

#covertk{
height:33vh;
padding-bottom:3vh;
}

#covertk2{
height:33vh;
z-index:2;

}
.textop{
flex:1 1 51%;

}
.textop2{
flex:1 1 30%;

}
.imagein4{
flex:1 1 0%;
}

#cmtk {
height:65vh;
margin-bottom:5vh;
}

#cmtk2 {
height:75vh;
margin-right:3vw;
}

.bwd {
flex:1 1 40%;
justify-content:space-between;
align-items: start  center;
display:block;
text-align:left;
padding-left:3.5vw;
padding-top:8vh;
}

#bw { 
height:8vh;
margin-bottom:4vh;
}

#bw2 { 
height:50vh;

}

	#flag{
	display:none;
	}
} 


@media screen and (max-width: 1000px) {
	header {
	font-family: Hiragino Kaku Gothic Std;
	display:flex;
	height: auto;
	width: 100%;
	justify-content:space-between;
	align-items: start  center; 
	vertical-align: top;
	padding: 2vw;
	margin-top: 1vh; 
	}
		

	
	.logo{
	font-family: Alkalami;
	letter-spacing:-2px;
	margin-left:2vw;
	height:40%;
	}
	
	.onglets {
	list-style: none;

	display:flex; 
	}
	
	.liste1 {
	display: inline-block;
	padding: 0 10px 0 0px;
	color:black;
	}

	
	.containerinfo {
	display:block;
	margin-top: 0vw;
	//background-color:yellow;
	width:80vw;
	margin-top:6vh;
	font-size:30px;
	height:90vh;
	padding-bottom:5vh;
	}
	
	.mee {
	margin-left: 20vw;

	}
	.mee img {
height:25vh;

}
	
	.midtext {
	//background-color:red;
	margin:0vh 0vw 0 vh 0vw;
	width:80vw;
	}
	
	
	.contact {
	margin-top: 35vw;
	background-color:blue;
	width:0vw;
	float:none;
	display:none;
	}
	
#contact {
	height: 9vh;
	
	}
		.contact2{
	margin-top: 0vw;
	margin-bottom:20vh;
	margin-left:1vh;
	//background-color:blue;
	width:50vw;
	float:none;
	display:block;
	text-overflow: clip;
	
	}
	
	 .me {
height:15vh;
margin-left:0vw;
margin-bottom:3vh;
background-color:black;
overflow:hidden;
display:flex;

}

	.rectry:active{
	height:100%;
	transition-duration:0s;
	transition-delay:0s;
	filter:none;
	}
	//.rectry1:active{
	//height:100%;
	//transition-duration:0s;
	//transition-delay:0s;
	//filter:none;
	}
	.rectry2:active{
	height:100%;
	transition-duration:0s;
	transition-delay:0s;
	filter:none;
	}
	.rectry2{
		display:inline-block;
		width:calc(100% - 5vw);
		overflow:hidden;
	}
	.rectry1{
		display:inline-block;
		width:calc(100% - 5vw);
		overflow:hidden;
	}
	.rectry{
		display:inline-block;
		width:calc(100% - 5vw);
		overflow:hidden;
	}
	.imagein{
		width:100%;
		text-align:center;
	}
	
	
	.imagein2{
		text-align:center;
	}
	.imagein3{
		text-align:center;
		flex:none;
		justify-content:unset;
		align-items: none;
		display:block;
		padding-top:8vh;
		padding-left:0vw;
	
	}
	
	.imagein4{
		text-align:center;
		flex:none;
		justify-content:unset;
		align-items: center;
		padding-bottom:2vh;
		display:block;
		padding-top:8vh;
		padding-left:0vw  !important;
		
	}

.inf {
	text-overflow: clip;
	}
		
	.textop{
		padding:0vh 4vw 6vh 4vw;
		min-height: 0vh;
		margin-top:3vh;
	}
	
	.textop2{
		padding:0vh 4vw 6vh 4vw;
		min-height: 0vh;
	}

	.textp2{
		text-align:right;
		font-family:Hiragino Kaku Gothic Pro;
		margin-top: 3vh;
	}

	.textp{
		margin-top: 3vh;
	}
	
	.textpbis{
text-align:right;
font-family:Hiragino Kaku Gothic Pro;
margin-top: 3vh;
}

	#covertk{
		height:25vh;
		margin-bottom:5vh;
		text-align:left;
	}

	#covertk2{
		height:25vh;
		text-align:left;
	}

	#recto {
		height:20vh;
		margin-bottom:5vh;
	}
	
	#typef {
		height:14vh;
	margin-top:1vh;	
	margin-left:0vw;
	margin-right:8vw;
text-align:center;
margin-bottom: 10vh;
	}

	#flag2{
	height:35vh;
	margin-left:0vw;
	margin-right:8vw;		
	text-align:center;
	}
	
	#flag{
    transform:rotate(90deg);
	height:45vh;
	margin-left:0vw;
	margin-right:0vw;	
	display:none;
	}
	
	#bw { 
		height:5vh;
	}

	#bw2 { 
		height:30vh;
		margin-top:0vh;
	}
	
	#verso {
		height:20vh;
		margin-bottom:5vh;
	}
	
	#topboy {
		height:40%;
	}
	
		#topboy2 {
		height:70%;
	}
	
	#cmtk {
		height: 50vh;
	}
	#cmtk2{
		height: 45vh;
	}
	
.container2 {
height:25vh;

margin-bottom:9vh;
}
	

	
	.ctncm {
margin-left:5vw;
	
	}
	
	.ctncm2 {
display:block;
	width:65vh;
height:50vh;
margin-bottom: 5vh;
margin-left:0vw;
margin-right:20vw;	
}

	
	.liste1 {
	margin-top:2vh;
	}
	
		#typeb {
		height:14vh;
	margin-left:0vw;

	margin-right:0vw;
text-align:center;
margin-bottom: 5vh;
	}
	
#topboy2 {
height:120%;
margin-bottom:0vh;	
}
	
	#mesh1 {
display:none;
	}
	
	footer {
		position:fixed;
		text-align:center;
		width:100%;
		height:3.5vh;
		left: 0;
		bottom: 0;
		z-index:2;
		font-family:Hiragino Kaku Gothic Pro;
		font-size:15px;
		background-color:white;
	}
	
	#DD {
	width:70%;
	}
}