@media screen and (min-width: 800px) and (max-width: 1030px){


	img{
		transform: rotate(90deg);
		width: 3em;
		margin: 1em auto;
		float: center;
	}

	h2{
		font-size: 35px;
		transform: rotate(90deg);
		transform-origin: left;
		padding-bottom: 5%;
		margin-top: -1em;
		display: block;
		position: absolute;
	}

	p{
		font-size: 35px;
	}

	h1{
		font-size: 30px;
	}
	h3{
		font-size: 25px;
	}

	#info {
		position: fixed;
		padding: 0em 4em;
		margin-top: 1em;	
	}

	#presentation {
		min-width: 100%;
		min-height: 10%;
		max-height: 98%;
		position: absolute;
		bottom: calc( -2% + 1em );
		right: inherit;
		transition: bottom 0.5s;

		width:100%;
		height: 10%;
		background: #0000FF;
		
	}

	#presentation:hover{
		right: inherit;
		bottom: 0;
		height: 90%;
		transition: height 0.5s;
		background: linear-gradient(#0000FF,#2E3191, #8385BE);
	}


	.texts{
		width: 90%;
		margin: 3em auto auto auto;
		display: flex;
		flex-direction: column;
	}

	.texte_descriptif{

		margin-left: 2.5em;
		margin-top: 0em;
		height: 75%;
		width: 85%;
		display: block;
		position: relative;
	}

	.bottom{

		margin:auto;
		position: relative;

		height: 15%;
		width: 85%;

	}


	.link1, .link2, .link3, .link4, .link5, .link6{

		margin: auto;
		width: 140px;
		height: 140px;

	}

}