#block_land{
	margin-top: 75px;
	background-color: #b9de9f;
	z-index: 10;
	position:absolute;
	top:0;
	left:0;
	text-align:center;
	width:100%;
	height:100%;
	display:none;
}
html{
	font-family: 'Lato', serif;
	overflow: hidden;
}
body{
	text-align: center;
}
.wrapper{
	margin-top: 260px;
	width: 100%;
	text-align: center;
}
body .wrapper div{
	position: relative;
	display: inline-block;
	width: 250px;
	height: 24px;
	margin: 15px;
	padding-top: 113px;
	padding-bottom: 113px;
	cursor: pointer;
}
body .wrapper div a{
	color: #fff;
	font-size: 20px;
	text-decoration: none;
}
#presentation, #presentation_deploy{
	background-color: #ff6138;
}
#productions, #productions_deploy{
	background-color: #ffd34e;
}
#passions, #passions_deploy{
	background-color: /*#beeb9f*/#b9de9f;
}
#amis, #amis_deploy{
	background-color: #79bd8f;
}
#contact, #contact_deploy{
	background-color: #00a388;
}
#presentation_deploy, #productions_deploy, #passions_deploy, #amis_deploy, #contact_deploy{
	z-index: 10;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
}
span{
	position: absolute;
	left: 30px;
	top: 110px;
}
span img{
	width: 15px;
	height: 25px;
}
.close_pro, .close_pas, .close_ami, .close_con{
	margin-bottom: 50px;
	display: none;
	text-align: right;
}
.close_pre{
	margin-bottom: 25px;
	display: none;
	text-align: right;
}
.close_pre img, .close_pro img, .close_pas img, .close_ami img, .close_con img{
	z-index: 11;
	cursor: pointer;
	width: 25px;
	margin-top: 50px;
	margin-right: 50px;
}
.presentation_content {
	display: none;
}
.presIn {
	animation-name: presentationIn;
	animation-fill-mode: none;
	animation-duration: 1500ms;
}
.presOut {
	animation-name: presentationOut;
	animation-fill-mode: both;
	animation-duration: 1500ms;
}
@keyframes presentationIn {
	0%{
		transform: translateY(-2000px);
	}
	100%{
		transform: translateY(0);
	}
}
@keyframes presentationOut {
	0%{
		transform: translateY(0);
	}
	100%{
		transform: translateY(-2000px);
	}
}
.productions_content{
	display: none;
}
.passions_content{
	display: none;
}
.ami_content{
	display: none;
}

/* PRESENTATION TAB */
.pre_encart_gauche, .pre_encart_droit{
	color: white;
	margin: 25px;
	vertical-align: top;
	display: inline-block;
}
.presentation_content{
	text-align: left;
}
.pre_encart_gauche{
	position: relative;
	z-index: 2;
	background-color: #ff6138;
	margin-left: 100px;
	padding: 10px;
	line-height: 30px;
	word-spacing: 4px;
	font-weight: bold;
	font-size: 20px;
	max-width: 30%;
	border : 3px solid white;
}
.curriculum {
	width: 100%;
	text-align: right;
}
.curriculum a {
	transition: background 0.2s ease-in-out;
	border: 3px dashed white;
	text-decoration: none;
	color: white;
	background-color: #ff6138;
	padding: 10px;
	margin-right: 10px;
}
.curriculum a:hover {
	transition: background 1s ease-in-out;
	background-color: #f48669;
}
.dev, .graph, .com{
	cursor: pointer;
	display: inline-block;
	margin: 25px;
	margin-top: 0px;
	padding: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
	border : 3px solid white;
}
.skill_hover{
	z-index: -1;
	width: 200px;
	height: 56.800px;
	position: absolute;
	background-color: #f48669;
	opacity: 1;
	top: -250px;
	left: 0;
}
#dev_btn, #graph_btn, #com_btn{
	position: relative;
	z-index: -1;
		width: 180px;
		text-align: center;
		line-height: 9px;
		word-spacing: 4px;
		font-weight: bold;
		font-size: 20px;
}
#graph, #com {
	display: none;
}
#dev, #graph, #com {
	/* display: none; */
	margin-left: 25px;
}
.binLeft {
	animation-name: bounceInFromLeft;
  animation-fill-mode: both;
  animation-duration: 250ms;
}
.boutLeft {
	animation-name: bounceOutFromLeft;
  animation-fill-mode: both;
  animation-duration: 250ms;
}
@keyframes bounceInFromLeft {
	0% {
		display: none;
		transform: translateX(-500px);
	}
	1% {
		display: block;
	}
	60% {
		transform: translateX(30px);
	}
	80% {
		transform: translateX(-10px);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes bounceOutFromLeft {
	0% {
		transform: translateX(0);
	}
	60% {
		transform: translateX(-10px);
	}
	80% {
		transform: translateX(30px);
	}
	100% {
		transform: translateX(-500px);
		display: none;
	}
}
.html5, .css3, .javascript, .php, .photoshop, .illustrator, .indesign, .blender, .storyboarding, .francais, .anglais, .redaction, .ciblage{
	margin-top: 20px;
	margin-bottom: 20px;
}
.rank_rect, p{
	display: inline-block;
}
.rank_rect{
	margin: 5px;
	margin-left: 2px;
	margin-right: 2px;
	display: inline-block;
	width: 20px;
	height: 50px;
	border: 2px solid white;
}
.pres_filled {
	background-color: #f48669;
}
#dev p, #graph p, #com p {
	vertical-align: top;
	line-height: 50px;
	margin: 5px;
	height: 50px;
}

/* PRODUCTIONS CONTENT*/
.productions_content{
	margin-top: 50px;
	text-align: left;
	margin-left: 50px;
	margin-right: 50px;
}
.prod_item{
	text-align: center;
	position: relative;
	overflow: hidden;
	vertical-align: top;
	width: 300px;
	height: 200px;
	margin: 20px;
	display: inline-block;
	background-color: #fedb72;
}
.opacity_description{
	color: white;
	position: absolute;
	width: 300px;
	height: 200px;
	top: -200px;
	left: 0;
	background-color: black;
	opacity: 0.8;
}
.opacity_description p {
	padding-left: 20px;
	padding-right: 20px;
}
.opacity_description a{
	color: white;
	font-weight: bold;
	text-decoration: none;
}
.prod_item:hover .opacity_description{
	display: block;
}
.sin {
	animation-duration: 1s;
  animation-name: slidein;
	animation-fill-mode: forwards;
}
.sout {
	animation-duration: 1s;
  animation-name: slideout;
	animation-fill-mode: forwards;
}
@keyframes slidein {
  0% {
    top: -200px;
  }
	50% {
		top: -105px;
	}
	85% {
		top: -125px;
	}
  100% {
    top: 0;
  }
}
@keyframes slideout {
  0% {
    top: 0;
  }
	50% {
		top: -125px;
	}
	85% {
		top: -105px;
	}
  100% {
    top: -200px;
  }
}
.prod_item img {
	width: 280px;
	height: 160px;
	margin-top: 20px;
}

/* AMI CONTENT*/

.ami_content {
	margin-left: 20px;
	margin-right: 20px;
	text-align: left;
}
.ami_item:first-child{
	margin-bottom: 100px;
}
.ami_item {
	background-color:#83cb9b;
	position: relative;
	cursor: default;
	text-align: left;
	margin: 20px;
	margin-left: 25px;
	margin-bottom: 50px;
	display: block;
	height: 50px;
	padding-left: 10px;
}
.ami_item:not(:first-child){
	animation-name: bounceInFromBottom;
  animation-fill-mode: both;
  animation-duration: 1000ms;
}
.ami_item:not(:first-child):hover{
	transition: 1s ease;
	background-color: #9BDEB1;
}
@keyframes bounceInFromBottom {
	0% {
		opacity: 0;
		transform: translateY(2000px);
	}
	60% {
		opacity: 1;
		transform: translateY(-30px);
	}
	80% {
		transform: translateY(10px);
	}
	100% {
		transform: translateY(0);
	}
}
.greyish{
	cursor: not-allowed;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
}
/*							RETIRÉ CAR REALISÉ EN JS
 .ami_item:hover{
	transition: background-color 0.5s ease;
	background-color:#83cb9b;
} */
.ami_item img, .ami_item p {
	display: inline-block;
}
.ami_item img {
	margin-top: -15px;
	margin-left: -20px;
	line-height: 50px;
	width: 75px;
	height: 75px;
	border-radius: 50%;
}
.ami_item .friend_example {
	text-align: center;
	display: inline-block;
	background-color:#83cb9b;
	border: 1px dashed white;
	margin-top: -15px;
	margin-left: -20px;
	line-height: 50px;
	width: 75px;
	height: 75px;
	border-radius: 50%;
}
.friend_example p {
	margin: 0 !important;
	line-height: 72px !important;
}
.ami_item p {
	line-height: 35px;
	margin-left: 40px;
	margin-top: 7px;
	margin-bottom: 7px;
	margin-right: 15px;
	vertical-align: top;
	font-weight: bold;
	color: white;
}
.ami_item:hover p, .ami_item:hover .develop_ami{
	display: inline-block;
}
.develop_ami{
	width: 200px;
	height: 50px;
	float: right;
	cursor: pointer;
	display: inline-block;
	text-align: center;
}
.ami_item:not(:first-child):hover .develop_ami .networks_dropdown {
	transition: 1s ease;
	background-color: #9BDEB1;
}
.develop_ami .networks_dropdown {
	z-index: 2;
	background-color: #83cb9b;
	height: 100%;
	float: right;
	padding-right: 10px;
}
.develop_ami .networks_dropdown p, .develop_ami .networks_dropdown .cursor {
	vertical-align: top;
	display: inline-block;
}
.develop_ami .networks_dropdown p {
	margin: 0;
	height: 100%;
	line-height: 45px;
}
.develop_ami .networks_dropdown .cursor {
	margin: 0;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 10px;
	border-radius: 0;
	width: 25px;
	height: 20px;
}
.develop_ami_dot{
	margin-bottom: 3px;
	background-color:#79bd8f;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	border: 1px solid white;
}
.social_networks {
	z-index: -1;
	text-align: right;
	top: 6px;
	/* top: 50px; */
	right: 0;
	background-color: rgb(255, 255, 255, 0.7);
	padding: 5px;
	position: absolute;
}
.rotateIt {
  transition: all .5s;
  transform: rotate(180deg);
}
.rotateBack {
  transition: all .5s;
  transform: rotate(0deg);
}
.social_networks a {

}
.social_networks a img {
	width: 30px;
	height: 30px;
	margin: 0;
}
.networks_displayed{
	animation-name: displayNetworks;
	animation-fill-mode: both;
	animation-duration: 500ms;
}
.networks_hidden{
	animation-name: hideNetworks;
	animation-fill-mode: both;
	animation-duration: 500ms;
}
@keyframes displayNetworks {
  0% {
		z-index: -1;
		top: 6px;
  }
	70% {
		z-index: -1;
		top: 60px;
	}
	90% {
		z-index: -1;
		top: 45px;
	}
	99% {
		z-index: -1;
	}
  100% {
		z-index: 1;
		top: 50px;
  }
}
@keyframes hideNetworks {
  0% {
		z-index: 1;
		top: 50px;
  }
	1% {
		z-index: -1;
	}
	30% {
		z-index: -1;
		top: 60px;
	}
  100% {
		z-index: -1;
		top: 6px;
  }
}

/* PASSIONS */

.map{
	position: absolute;
	top: 0;
}
.close_pas img{
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 2;
}
.pin {
	cursor: pointer;
	z-index: 2;
	width: 15px;
  height: 15px;
  border-radius: 50% 50% 50% 0;
  background-color: #f48669;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -10px;
  animation-name: bounce;
  animation-fill-mode: both;
  animation-duration: 1000ms;
}
.pin::after {
	content: '';
	z-index: 3;
  width: 7px;
  height: 7px;
  margin: 4px 0 0 -3px;
  background-color: #2F2F2F;
  position: absolute;
  border-radius: 50%;
}
.pin:hover {
	width: 30px;
  height: 30px;
  margin: -20px 0 0 -20px;
}
.pin:hover::after {
  width: 14px;
  height: 14px;
  margin: 7px 0 0 -6px;
}
.pin_content {
	z-index: 9;
	min-width: 200px;
	max-width: 500px;
	text-align: left;
	display: none;
	top: 10px;
	left: 10px;
	background:rgba(255,255,255, 0.8);
	position: absolute;
	padding: 15px;
	margin: 15px;
}
.pin_content div {
	text-align: center;
}
.pin_content div img {
	width:360px;
	height:180px;
}
.pin_content p {
	margin: 0;
	/* background:rgba(255,255,255, 0.5); */
}
@keyframes bounce {
	0% {
		opacity: 0;
		transform: translateY(-2000px) rotate(-45deg);
	}
	60% {
		opacity: 1;
		transform: translateY(30px) rotate(-45deg);
	}
	80% {
		transform: translateY(-10px) rotate(-45deg);
	}
	100% {
		transform: translateY(0) rotate(-45deg);
	}
}
/* CONTACT FORM */
.contact_content{
	display: none;
}
div.wrap {
	width: 500px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	vertical-align: middle;
}

div.wrap div {
 	position: relative;
 	margin: 50px 0;
}

label {
	color: white;
 	position: absolute;
	top: 0;
	font-size: 30px;
  	margin: 10px;
  	padding: 0 10px;
  	background-color: #00a388;
    -webkit-transition: top .2s ease-in-out,
                      font-size .2s ease-in-out;
  	transition: top .2s ease-in-out,
              font-size .2s ease-in-out;
}

.active {
  	top: -25px;
  	font-size: 20px;
}

input[type=text], input[type=submit], textarea {
  	width: 100%;
  	padding: 20px;
  	border: 1px solid white;
  	font-size: 20px;
  	background-color: #00a388;
  	color: white;
}

.send {
	margin-left: 50px !important;
}
.send input{
	cursor: pointer;
}

.send input:hover{
	transition: background 1s;
	background-color: #00b698;
}

input[type=text]:focus, textarea:focus {
  	outline: none;
}

textarea{
	resize:none;
}
.invalid {
	position: absolute;
    top: 50px;
    left: 0px;
    color: darkred;
}
.mail_box {
	opacity: 0;
	display: none;
	border-radius: 50px;
	line-height: 15px;
	color: white;
	width: 400px;
	text-align: center;
	height: 50px;
	position: absolute;
}
.mail_success {
	background-color: #4BB543;
	bottom: -50px;
	right: 10px;
}
.mail_failure {
	background-color: #F23D4D;
	bottom: -50px;
	right: 10px;
}
.img_deployed {
	opacity: 0;
	z-index: 8;
	position: absolute;
}
::-webkit-scrollbar {
    width: 12px;
}
@media screen and (max-width: 991px) {
/* start of large tablet styles */


}
@media screen and (max-width: 480px) {
/* start of phone styles */
	#block_land{
		margin-top: 75px;
		background-color: #b9de9f;
		z-index: 10;
		position:absolute;
		top:0;
		left:0;
		text-align:center;
		width:100%;
		height:100%;
		display:none;
	}
	html{
		overflow: auto;
		overflow-x: hidden !important;
	}
	body{
		margin: 0;
		text-align: center;
	}
	.wrapper{
		margin-top: 0;
		width: 100%;
		text-align: center;
	}
	body .wrapper div{
		position: relative;
		display: block;
		width: 100%;
		height: 24px;
		margin: 0;
		padding-top: 0;
		padding-bottom: 0;
		cursor: pointer;
	}
	body .wrapper div a{
		color: #fff;
		font-size: 20px;
		text-decoration: none;
	}
	#presentation, #presentation_deploy{
		background-color: #ff6138;
	}
	#productions, #productions_deploy{
		background-color: #ffd34e;
	}
	#passions, #passions_deploy{
		background-color: /*#beeb9f*/#b9de9f;
	}
	#amis, #amis_deploy{
		background-color: #79bd8f;
	}
	#contact, #contact_deploy{
		background-color: #00a388;
	}
	.close_pre, .close_pro, .close_pas, .close_ami, .close_con {
		margin-bottom: 75px;
	}
	.close_pre img, .close_pro img, .close_pas img, .close_ami img, .close_con img{
		position: absolute;
		right: 0;
		width: 25px;
		margin-top: 25px;
		margin-right: 25px;
	}
	.pre_encart_gauche{
		display: block;
		position: relative;
		z-index: 2;
		background-color: #ff6138;
		margin-left: 10px;
		margin-right: 10px;
		padding: 10px;
		line-height: 30px;
		word-spacing: 4px;
		font-weight: bold;
		font-size: 20px;
		max-width: none;
		border : 3px solid white;
	}
	.pre_encart_droit{
		display: block;
		margin-left: 10px;
		margin-right: 10px;
	}
	.dev, .graph, .com{
		cursor: pointer;
		display: inline-block;
		margin: 5px;
		margin-top: 0px;
		padding: 5px;
		padding-top: 2px;
		padding-bottom: 2px;
		border : 1px solid white;
	}
	#dev_btn, #graph_btn, #com_btn{
		max-width: 85px;
		position: relative;
		z-index: -1;
		text-align: center;
		line-height: 9px;
		word-spacing: 4px;
		font-weight: bold;
		font-size: 10px;
	}
	#dev, #graph, #com{
		margin-left: 5px;
		margin-right: 5px;
	}
	#dev p, #graph p, #com p{
		height: 15px;
		line-height: 5px;
		display: block;
	}
	#dev div, #graph div, #com div{
		margin-bottom: 0px;
		margin-top: 0px;
	}
	#dev div:first-child, #graph div:first-child, #com div:first-child{
		margin-top: 15px;
	}
	.rank_rect{
		width: 20px;
	}
	.productions_content {
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 10px;
	}
	.prod_item{
		width: 150px;
    height: 100px;
    margin: 5px;
	}
	.opacity_description{
		width: 150px;
    height: 100px;
		top: -100px;
	}
	.opacity_description p, .opacity_description a{
		padding-left: 5px;
		padding-right: 5px;
		font-size: 8px;
	}
	.prod_item img {
		width: 140px;
		height: 80px;
		margin-top: 10px;
	}
	.sin {
		animation-duration: 1s;
	  animation-name: slidein;
		animation-fill-mode: forwards;
	}
	.sout {
		animation-duration: 1s;
	  animation-name: slideout;
		animation-fill-mode: forwards;
	}
	@keyframes slidein {
	  0% {
	    top: -100px;
	  }
		50% {
			top: -55px;
		}
		85% {
			top: -75px;
		}
	  100% {
	    top: 0;
	  }
	}
	@keyframes slideout {
	  0% {
	    top: 0;
	  }
		50% {
			top: -75px;
		}
		85% {
			top: -55px;
		}
	  100% {
	    top: -100px;
	  }
	}
	/* AMIS */
	.ami_content {
		margin-left: 10px;
		margin-right: 10px;
		text-align: left;
	}
	.ami_item:first-child{
		margin-bottom: 50px;
	}
	.ami_item {
		background-color:#83cb9b;
		height: auto;
		position: relative;
		cursor: default;
		text-align: left;
		margin: 10px;
		margin-left: 5px;
		margin-bottom: 30px;
		display: block;
		padding-bottom: 15px;
		padding-left: 5px;
	}
	.ami_item img, .ami_item p {
		display: inline-block;
	}
	.ami_item img {
		margin-top: -15px;
		margin-left: -20px;
		line-height: 50px;
		width: 75px;
		height: 75px;
		border-radius: 50%;
	}
	.ami_item .friend_example {
		text-align: center;
		display: inline-block;
		background-color:#83cb9b;
		border: 1px dashed white;
		margin-top: -15px;
		margin-left: -20px;
		line-height: 50px;
		width: 75px;
		height: 75px;
		border-radius: 50%;
	}
	.friend_example p {
		margin: 0 !important;
		line-height: 72px !important;
	}
	.ami_item p {
		line-height: 35px;
		margin-left: 40px;
		margin-top: 7px;
		margin-bottom: 7px;
		margin-right: 15px;
		vertical-align: top;
		font-weight: bold;
		color: white;
	}
	#friend_name, #friend_post, #friend_company{
		margin: 0;
		margin-left: auto;
		margin-right: auto;
	}
	#friend_name {
		width: 100%;
	}
	#friend_post, #friend_company{
		display: block;
		line-height: 20px;
	}
	.ami_item:hover p, .ami_item:hover .develop_ami{
		display: inline-block;
	}
	.develop_ami{
		position: absolute;
		bottom: 0;
		right: 0;
		width: auto;
		height: 50px;
		float: right;
		cursor: pointer;
		display: inline-block;
		text-align: center;
	}
	.ami_item:not(:first-child) {
		margin-bottom: 50px;
	}
	div.wrap {
    width: 300px;
    top: 80%;
    left: 44%;
	}
	.mail_box {
		opacity: 0;
		display: none;
		border-radius: 50px;
		line-height: 15px;
		color: white;
		width: 350px;
		text-align: center;
		height: 50px;
		position: absolute;
	}
	.mail_success {
		background-color: #4BB543;
		bottom: -100px;
		right: 5px;
	}
	.mail_failure {
		background-color: #F23D4D;
		bottom: -100px;
		right: 5px;
	}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
	/* start of medium tablet styles */
	#block_land{
		margin-top: 75px;
		background-color: #b9de9f;
		z-index: 10;
		position:absolute;
		top:0;
		left:0;
		text-align:center;
		width:100%;
		height:100%;
		display:none;
	}
	html{
		overflow: auto;
		overflow-x: hidden !important;
	}
	body{
		margin: 0;
		text-align: center;
	}
	.wrapper{
		margin-top: 0;
		width: 100%;
		transform: translateY(140%);
	}
	body .wrapper div{
		width: 100px;
		height: 24px;
		padding-top: 38px;
		padding-bottom: 38px;
	}
	body .wrapper div a{
		font-size: 14px;
	}
	.close_pre, .close_pro, .close_pas, .close_ami, .close_con {
		margin-bottom: 75px;
	}
	.close_pre img, .close_pro img, .close_pas img, .close_ami img, .close_con img{
		position: absolute;
		right: 0;
		width: 25px;
		margin-top: 25px;
		margin-right: 25px;
	}
	.pre_encart_gauche, .pre_encart_droit{
		margin-left: 10px;
		margin-right: 10px;
	}
	.pre_encart_gauche{
		position: relative;
		z-index: 2;
		background-color: #ff6138;
		margin-left: 10px;
		padding: 5px;
		line-height: 18px;
		word-spacing: 2px;
		font-weight: bold;
		font-size: 16px;
		max-width: 39%;
		border : 2px solid white;
	}
	.curriculum a {
		transition: background 0.2s ease-in-out;
		border: 1px dashed white;
		margin-right: 5px;
	}
	.pre_encart_droit{
		width: 50%;
	}
	.dev, .graph, .com{
		cursor: pointer;
		display: inline-block;
		margin: 5px;
		margin-top: 0px;
		padding: 10px;
		padding-top: 4px;
		padding-bottom: 4px;
		border : 2px solid white;
	}
	#dev_btn, #graph_btn, #com_btn{
		width: 30%;
		font-size: 14px;
	}
	#dev, #graph, #com {
		/* display: none; */
		margin-left: 5px;
	}
	.rank_rect{
		border: 1px solid white;
		width: 10px;
		height: 25px;
	}
	#dev p, #graph p, #com p{
		height: 15px;
		line-height: 40px;
	}
	#dev div, #graph div, #com div{
		margin-bottom: 0px;
		margin-top: 0px;
	}
	#dev div:first-child, #graph div:first-child, #com div:first-child{
		margin-top: 15px;
	}
	.productions_content{
		margin-left: 10px;
		margin-right: 10px;
	}
}
@media screen and (min-width: 769px) and (max-width: 992px) {
	#block_land{
		margin-top: 75px;
		background-color: #b9de9f;
		z-index: 10;
		position:absolute;
		top:0;
		left:0;
		text-align:center;
		width:100%;
		height:100%;
		display:none;
	}
	html{
		overflow: auto;
		overflow-x: hidden !important;
	}
	body{
		margin: 0;
		text-align: center;
	}
	.wrapper{
		margin-top: 0;
		width: 100%;
		transform: translateY(115%);
	}
	body .wrapper div{
		width: 150px;
		height: 24px;
		padding-top: 63px;
		padding-bottom: 63px;
	}
	body .wrapper div a{
		font-size: 18px;
	}
	.close_pre, .close_pro, .close_pas, .close_ami, .close_con {
		margin-bottom: 75px;
	}
	.close_pre img, .close_pro img, .close_pas img, .close_ami img, .close_con img{
		position: absolute;
		right: 0;
		width: 25px;
		margin-top: 25px;
		margin-right: 25px;
	}
	.pre_encart_gauche, .pre_encart_droit{
		margin-left: 10px;
		margin-right: 10px;
	}
	.pre_encart_gauche{
		position: relative;
		z-index: 2;
		background-color: #ff6138;
		margin-left: 10px;
		padding: 5px;
		line-height: 18px;
		word-spacing: 2px;
		font-weight: bold;
		font-size: 16px;
		max-width: 39%;
		border : 2px solid white;
	}
	.curriculum a {
		transition: background 0.2s ease-in-out;
		border: 1px dashed white;
		margin-right: 5px;
	}
	.pre_encart_droit{
		width: 50%;
	}
	.binLeft {
		animation-name: bounceInFromLeft;
	  animation-fill-mode: both;
	  animation-duration: 250ms;
	}
	.boutLeft {
		animation-name: bounceOutFromLeft;
	  animation-fill-mode: both;
	  animation-duration: 250ms;
	}
	@keyframes bounceInFromLeft {
		0% {
			display: none;
			transform: translateX(-300px);
		}
		1% {
			display: block;
		}
		60% {
			transform: translateX(30px);
		}
		80% {
			transform: translateX(-10px);
		}
		100% {
			transform: translateX(0);
		}
	}
	@keyframes bounceOutFromLeft {
		0% {
			transform: translateX(0);
		}
		60% {
			transform: translateX(-10px);
		}
		80% {
			transform: translateX(30px);
		}
		100% {
			transform: translateX(-300px);
			display: none;
		}
	}
	.dev, .graph, .com{
		cursor: pointer;
		display: inline-block;
		margin: 5px;
		margin-top: 0px;
		padding: 10px;
		padding-top: 4px;
		padding-bottom: 4px;
		border : 2px solid white;
	}
	#dev_btn, #graph_btn, #com_btn{
		width: 30%;
		font-size: 14px;
	}
	#dev, #graph, #com {
		/* display: none; */
		margin-left: 5px;
	}
	.rank_rect{
		border: 1px solid white;
		width: 10px;
		height: 25px;
	}
	#dev p, #graph p, #com p{
		height: 15px;
		line-height: 40px;
	}
	#dev div, #graph div, #com div{
		margin-bottom: 0px;
		margin-top: 0px;
	}
	#dev div:first-child, #graph div:first-child, #com div:first-child{
		margin-top: 15px;
	}
	.productions_content{
		margin-left: 10px;
		margin-right: 10px;
	}
	.prod_item {
		margin: 5px;
	}
}
.productions_content {
	overflow-y:scroll;
}