/*************
   GENERAL
*************/

/* Taille du Hero */
#hero-homepage {
	height:100vh;
}

@media (min-width: 600px) {	
	#hero-homepage {
		min-height:600px;
	}
}
@media (max-height: 500px) {	
	#hero-homepage .ancre{
		display:none;
	}
}
@media (max-height: 500px) {	
	#hero-page-interne {
		min-height:450px;
	}
}

/* Probleme de background */
.m-hero::before,
.m-hero__image::after {
	background: none !important;
	display:none;
}

/* barre sous la nav + replacement des textes devant l'etudiant */
#hero-homepage .header-bottom-bar,
#hero-page-interne .header-bottom-bar{
	width:calc(100% - 60px);
	background-color:#ccc;
	position:absolute;
	top:120px;
  height:1px;
}
#hero-homepage  .m-hero-message__text div,
#hero-homepage  .m-hero-message__text .a-heading,
#hero-homepage .m-hero-message__button{
	position:relative;
	z-index:2;
}

/* Titre & texte */
#hero-homepage .a-heading--0{
	font-weight: 900;
	font-size: 65px;
	line-height: 45px;
}
#hero-page-interne .a-heading--0{
	font-weight: 900;
}
#hero-homepage .a-heading--0 span{
	font-size: 36px;
	line-height: 50px;
}

#hero-homepage .m-hero-wrapper .m-hero__sub-heading {
	margin-top: 0px;
}

#hero-homepage .m-hero-message__button{
	margin-top: 0px;
}
#hero-homepage .m-button-group{
	margin-top: 0px;
}




/* ancre */
#hero-homepage .ancre,
#hero-page-interne .ancre{
	position:absolute;
	bottom: 60px;
	left: calc(50% - 20px);
	width:40px;
	height:40px;
	z-index:2;
	border-bottom: none;
}


/*  Images Homepage  */
#hero-hp-etudiant img {
	object-fit: contain;
	object-position: bottom;
	position:relative;
	z-index: 1;
}
#hero-hp-elements img {
	object-fit: cover;
	object-position: bottom;
	animation:relative;
}
#hero-homepage .nuage-1 img {
	object-fit: contain;
	animation: wavering 10s linear infinite;
	width:20vw;
	position: absolute;
	top: -18vh;
	left: 75vw;
}
#hero-homepage .nuage-2 img {
	object-fit: contain;
	animation: wavering2 20s linear infinite;
	width:15vw;
	position: absolute;
	top: 4vh;
	left: 50vw;
}
#hero-homepage .nuage-big img {
	object-fit: contain;
	animation: wavering4 12s linear infinite;
	position: absolute;
	width:50vw;
	top: -55vh;
	left: 55vw;
}

/*  Images Page-interne  */
#etudiant{
	height:50vh;
	width:initial; 
	bottom:0;
	position: absolute; 
	top: initial; 
	left: 55vw; 
	z-index: 1;
}
#hero-page-interne .m-hero-message__text {
	padding-left: 0;
	text-align: left;
}
#hero-page-interne .m-hero-message img {
	position:absolute;
}

	#hero-page-interne .nuage-1 img  {
		transform: rotate(180deg);
		transform: translate(0px, 0px);
		animation: wavering 10s linear infinite;
		position: absolute;
		object-fit: contain;
	}
	#hero-page-interne .nuage-2 img {
		transform: translate(0px, 0px);
		animation: wavering2 20s linear infinite;
		position: absolute;
		object-fit: contain;
	}
	#hero-page-interne .nuage-big img {
		animation: wavering4 12s linear infinite;
		position: absolute;
		object-fit: contain;
	}

	#hero-page-interne .nuage-1-nc img  {	
	width: 12vw;
	top: 12vh;
	left: 48vw;
	}
	#hero-page-interne .nuage-2-nc img {
	width: 15vw;
	top: -12vh;
	left: 65vw;
	}
	#hero-page-interne .nuage-big-nc img {
		width:45vw;
		top: 35vh;
		left: -10vw;
	}

	#hero-page-interne .nuage-1-na img  {	
	width: 15vw;
	top: 5vh;
	left: 50vw;
	}
	#hero-page-interne .nuage-2-na img {
		width: 20vw;
	top: -10vh;
	left: 65vw;
	}
	#hero-page-interne .nuage-big-na img {
		width:45vw;
		top: -30vh;
		left: 0vw;
	}

	#hero-page-interne .nuage-1-nv img  {	
		width: 20vw;
		top: -10vh;
		left: 65vw;
	}
	#hero-page-interne .nuage-2-nv img {
		width: 25vw;
		top: 15vh;
		left: 40vw;
	}
	#hero-page-interne .nuage-big-nv img {
		width:45vw;
		top: -40vh;
		left: 75vw;
	}

/*************
   TABLETTE
*************/
@media (min-height: 1400px), screen and (orientation: portrait) {
	#hero-hp-etudiant img {
	object-fit: cover;
	object-position: 60%;
}
}

@media(max-width:1400px) {
	#hero-page-interne #etudiant img{
		object-fit: contain;
		object-position: 100% 100%;
	}
}
@media(max-width:1000px) {
	#hero-hp-etudiant img {
		object-fit: cover;
		object-position: 60%;
	}
}

@media(max-width:810px) {
	.m-hero--text-align-left .m-hero-message,
	.m-hero--text-align-left .m-hero-message{
		justify-content:center;
		text-align:center !important;
	}
	.m-hero-wrapper .m-button-group__item:first-child{
		margin-bottom: 20px;
	}
	#scroll-down-btn{
		padding: 0;
	  top: 80%;
		margin-left: -20px;
	}
	#hero-homepage .a-heading--0{
		font-size: 32px;
		line-height: 28px;
	}
	#hero-homepage .a-heading--0 span{
		font-size: 22px;
		line-height: 32px;
	}
	#nav-bottom-bar{
		display:none;
	}
	#hero-page-interne #etudiant img{
		object-fit: contain;
		object-position: 100% 100%;
		width: 85%;
	}
	
	#hero-hp-nuage-big img {
		top:-50vh;
		left:50vw;
		transform: scale(2, 2);
		object-fit: contain;
	}
}



/*************
  MOBILE
*************/
@media(max-width:600px) {
	
		#hero-homepage .header-bottom-bar,
		#hero-page-interne .header-bottom-bar{
			display:none;
		}
	
		#hero-homepage .ancre{
			margin-bottom:50px;
		}
		#hero-hp-etudiant img {
		display:none;
		}
		#hero-homepage .nuage-1 img {
		width:35vw;
		top: 30vh;
		left: -10vw;
		}
		#hero-homepage .nuage-2 img {
			width:65vw;
			top: 20vh;
			left: 70vw;
		}
		#hero-homepage .nuage-big img {
			width:80vw;
			top: -52vh;
		}
	

	#hero-page-interne{
		min-height:400px;
	}
	#hero-page-interne #etudiant{
		text-align: center;
   		left: 0; 
		width: 100%;
	}
	#hero-page-interne #etudiant img{
		object-fit: contain;
		object-position: 100% 100%;
		width: 65%;
	}
	#hero-page-interne .a-heading--0{
		color:#fff;
		font-weight:700;
	}
	#hero-page-interne .m-hero-message{
		background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 50%);
		color:#ffffff;
		z-index:5;
	}
	#hero-page-interne .ancre{
		display:none;
	}	
	#hero-page-interne #hero-elements{
		display:none;
	}
	#hero-page-interne .nuage-1-nc img,
	#hero-page-interne .nuage-2-nc img{
		display:none;
	}
	#hero-page-interne .nuage-big-nc img {
		width:100vw;
		top: -20vh;
		left: 15vw;
	}
  #hero-page-interne .nuage-1-na img{
		width:75vw;
		top: 18vh;
		left: -35vw;
	}
	#hero-page-interne .nuage-2-na img{
		width:50vw;
		top: 5vh;
		left: 40vw;
	}
	#hero-page-interne .nuage-big-na img {
		width:60vw;
		top: -16vh;
		left: 23vw;
	}
	#hero-page-interne .nuage-1-nv img{
		display:none;
	}
	#hero-page-interne .nuage-2-nv img {
		width:50vw;
		top: 10vh;
		left: 45vw;
	}
	#hero-page-interne .nuage-big-nv img {
		width:80vw;
		top: -20vh;
		left: 5vw;
	}
	
	#hero-page-interne .m-hero-message .m-hero__sub-heading {
		color:#ffffff;
	}
}
@media (max-height: 600px) {
	#hero-homepage .ancre {
    margin-bottom: 25px;
  }
	#hero-homepage .a-heading--3 {
    margin: 0px;
  }
	.m-hero-wrapper .m-button-group__item:first-child {
		margin-bottom: 10px;
		margin-top: 10px;
	}
	.m-hero-wrapper .m-button-group__item:last-child{
		margin-top: 10px;
	}
}
@media (max-height: 500px) and (orientation: landscape) {
		#hero-hp-etudiant img {
		display:none;
	}
}
@media (max-height: 500px) and (max-width: 1000px) {
		#hero-homepage .a-heading--0{
		font-size: 32px;
		line-height: 28px;
	}
	#hero-homepage .a-heading--0 span{
		font-size: 22px;
		line-height: 32px;
	}
	#hero-homepage{
		min-height:auto;
	}
	#hero-homepage .m-hero-message{
		padding-top:150px;
	}
	#hero-homepage .m-hero-message__text,
	#hero-homepage .m-hero-message__button{
		padding-right:0%;
		/*! padding-top: 120px; */
	}
}

/*************
  ANIMATIONS
*************/
@keyframes wavering {
	0% {
		transform: translate(0px, 0px);
	}
	25% {
		transform: translate(10px, 10px);
	}
	50% {
		transform: translate(20px, 0px);
	}
	75% {
		transform: translate(10px, -10px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}
@keyframes wavering2 {
	0% {
		transform: rotate(0) translate(0px, 0px);
	}
	15% {
		transform: rotate(1deg) translate(5px, -10px);
	}
	30% {
		transform: rotate(0) translate(0px, -20px);
	}
	45% {
		transform: rotate(-1deg) translate(-10px, -10px);
	}
	70% {
		transform: rotate(1deg) translate(5px, 3px);
	}
	85% {
		transform: rotate(0) translate(10px, -5px);
	}
	100% {
		transform: rotate(0) translate(0px, 0px);
	}
}

@keyframes wavering3 {
	0% {
		transform: translate(0px, 0px);
	}
	50% {
		transform: translate(-15px, -25px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}
@keyframes wavering4 {
	0% {
		transform: translate(0px, 0px);
	}
		25% {
		transform: translate(-15px, 5px);
	}
		50% {
		transform: translate(-30px, 10px);
	}
		75% {
		transform: translate(-15px, 5px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}

.cloudy {
	animation: gogo 1s ease-in;
  }
  
  @-webkit-keyframes gogo {
		from {
			transform: translate(0px 0px);
		}
		to {
			transform: translate(-1000px 0px);
		}
  }