@keyframes enterRealMobile {
	from {left: -105%;}
	to {left: 0;}
}

@media (max-width: 1439px) {
	#visu {height: 65vh;}
}

@media (max-width: 991px) {
	html, body {height: auto;}
	h1 {font-size: 4rem;}
	
	header {position: fixed; top: 0; left: 0; width: 100%; background-color: white;}
	header nav {display: block;}
	#main {padding: 7rem 4rem 0 4rem; height: auto;}
	#visu {padding: 0;}
	#real {padding: 0 3rem;}
	#index-real {display: none;}
	#visu {height: auto; display: flex; flex-direction: column; box-shadow: 0 !important; animation-name: unset;}
	#visu:after {display: none;}
	#projets {animation-name: none; height: auto;}
	#projets:after {display: none;}
	.container-real {height: auto; margin-bottom: 12rem; position: relative;}
	.infos-real {top: 87%;}
	.img-real,
	.img-real.first-show {display: block; position: relative; top: unset; left: unset; width: auto; padding: 3rem 15%; animation-name: shadowAppear; animation-fill-mode: forwards; animation-duration: 1s; animation-delay: 2.25s; animation-timing-function: cubic-bezier(.62,0,.06,1); overflow: hidden;}
	.img-real:after {content: ''; position: absolute; left: 0; width: 100%; background-color: #E6E6E6; z-index: -1; animation-name: enterReal; animation-fill-mode: forwards; animation-duration: 2s; animation-delay: 0.5s; animation-timing-function: cubic-bezier(.62,0,.06,1);}
	.img-real a {height: 100%;}
	.img-real img {position: initial; transform: translate(0,0); width: 100%;}
	.desc-real {font-size: 1rem; margin-top: 0;}
}

@media (max-width: 767px) {
	html, body {font-size: 14px;}
	h1 {font-size: 2.5rem;}

	#louisg {padding: 1.5rem;}
	header nav {display: none;}
	#main {padding: 4rem 0 0 0;}
	.container-real {padding-right: 4.5rem; margin-top: 3rem; margin-bottom: 15rem;}
	.container-real .img-real {animation-name: none;}
	.container-real .img-real:after {animation-name: enterRealMobile; animation-fill-mode: forwards; animation-duration: 2s; animation-delay: 0.25s; animation-timing-function: cubic-bezier(.62,0,.06,1); height: 100%; top: 0; left: -100%;}
	.img-real {padding: 0; overflow: visible;}
	.img-real a {top: -2.5rem; right: -2.5rem; overflow: hidden;}
	.img-real a img {animation-name: enterRealMobile; animation-fill-mode: forwards; animation-duration: 3s; animation-delay: 0.75s; animation-timing-function: cubic-bezier(.62,0,.06,1); position: relative; top: 0; left: -105%;}
	.infos-real {padding: 0 2rem 0 1rem; top: 83%;}
	.titre-real {margin-bottom: 0.5rem;}
}