@charset "UTF-8";
/* CSS Document */



 @media(orientation : portrait) {
	 
.click{

	display:flex;


	}
	
	 
	 ::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
	 
	 .button-container{
		top:0px;
		height:auto;
		width:10%;
		bottom:20px;
		left:0%;
		flex-direction:column;
		font-size:0.8em;
		
 
		 }
	 .button{
		 width:100%;
		 height:auto;
		 flex-wrap:no-wrap;
		 flex-grow:2;
		 border-top-left-radius:8px;
		 border-bottom-left-radius:8px;
	     border-top-right-radius:0px;
}
	
	 .button p{
-webkit-writing-mode : vertical-rl;
transform:rotate(180deg);
		 }
		 
	.contenu{
		top:0%;
		left:10%;
		right:0%;
		width:auto;}
		
	.projet-video{
		width:100%;
		max-width:100%;}
	

@-moz-document url-prefix() {
  .button p {
    transform: rotate(-90deg);
  }
}

.elastique-gauche{
	left:auto;
	right:-23.3%;
	bottom:7%;
	top:auto;
	transform: rotate(-45deg);
  	transform-origin: 100% 100%;
}
	
.elastique-gauche .rond1, .elastique-gauche .rond2{
	width:1vw;
	height:1vw;
	border-radius:100px;
	border: 4px solid black;
	position:absolute;
	top:1vw;
	bottom:auto;
	}
	
.elastique-gauche .trait1, .elastique-gauche .trait2, .elastique-gauche .trait-milieu{
	
	position:absolute;
	top:1.5vw;
	bottom:auto;
	}
	
header{
	margin-left:1.5vw;
	transform: rotate(90deg);
  	transform-origin: 0% 100%;
	width:100%;
	}
	
.devant{
align-items:flex-start;
justify-content:flex-start;

	}
	
h1{
  font-size:1em;
  letter-spacing:1px;
  font-family:"Helvetica Regular Extended";
  
 
}

h2{
	text-align:center;
	font-family: "Helvetica Regular";
	  font-size:1em;
	}
	
.texte-container2, .titre, .contenu-onglet, .note{
	font-size:3vw;
	letter-spacing:0.7px;
	}
	
input[type=submit], input[type=file] {
	font-size:3vw;}
	
.contenu-onglet, .titre{
	line-height:4vw;

	}
	
.button-container{
	font-size:3vw;}
	
	
.section{
	display:flex;
	flex-direction:column;
	margin-bottom:6%;
	}
	
.titre{
	padding:0% 1%;
	width:100%;
	margin-bottom:2vh;
	
	}
	
.contenu-partie{
	margin:0%;
	width:100%;
	text-align:left;
	height:auto;
	

	}
	
.image-loader{
	display:none;
	}
#cercle{
	width:20vw;
	height:20vw;	

 }
 }
 
@media screen 
and (max-width: 640px)
and (orientation : landscape){
.general-container{
	display:none;}
#alerte{
	display:flex;}
}
	

/* IPHONE 4 et 4S*/

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation : landscape)
  
   {
	.general-container{
	display:none;}
	#alerte{
	display:flex;}
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation : landscape)
  
   {
	.general-container{
	display:none;}
	#alerte{
	display:flex;}

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation : landscape)
  
   {
	.general-container{
	display:none;}
	#alerte{
	display:flex;}
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation : landscape)
  
   {
	
.general-container{
	display:none;}
	#alerte{
	display:flex;}
}

/* ----------- iPhone X ----------- */

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation : landscape)  
   {
	.general-container{
	display:none;}
	#alerte{
	display:flex;}
}