a#footer {
	transition: padding 0.25s ease-out 100ms;
}

a#footer:hover {
	padding: 7.5%;
}

h1.grostitre {
	transition: color 0.25s ease-out 100ms;
}

h1.grostitre:hover {
	color: #0099ff;
}

h1.grostitres {
	transition: color 0.25s ease-out 100ms;
}

h1.grostitres:hover {
	color: white;
}

h1.framboise {
	transition: 0.25s ease-out 100ms;
}

h1.framboise:hover {
	color: #0099ff;
}

/*h1#headt {
	animation-name: acceuilt;
	animation-duration: 1s;
}

@keyframes acceuilt {
	0% {
		font-size: 0px;
	}

	100% {
		font-size: 60px;
	}
}*/

img#logotitre {
	animation-name: acceuil;
	animation-duration: 1s;
}

@keyframes acceuil {
	0% {
		width: 1%;
	}

	50% {
		width: 50;
	}

	100% {
		width: 100%;
	}
}

/*div#header2 {
	animation-name: acceuilt;
	animation-duration: 1s;
}

@keyframes acceuilt {
	0% {
		padding-left: -1000px;
	}

	100% {
		padding-left: 7.5%;
	}
}*/


/* BOUTIQUE */
#bouton-pommee:hover {
	background-color: green;
	padding: 10%;
	text-decoration-line: underline;
	text-decoration-color: #0099ff;
	transform-origin: top left;
	transition: 0.25s ease-out 100ms;
}

#bouton-pomme:hover {
	background-color: green;
	padding: 10%;
	text-decoration-line: underline;
	text-decoration-color: #0099ff;
	transform-origin: top left;
	transition: 0.25s ease-out 100ms;
}

.nodeimg:hover {
	width: 35%;
	transition: width 0.5s ease-out 100ms;
}

div.node:hover {
	border-radius: 25px;
	vertical-align: top;
	width: 20%;
    margin: 5px;
	border: 4px solid green;
    margin-top: 2px;
	transition: 0.5s ease-out 100ms;
}


.flotte {
	animation: float 2.5s ease-in-out 0s infinite;
}

@keyframes float {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0px);
	}
}

li.connexion {
	transition: background-color 0.25s ease-out 100ms;
}

li.other {
	transition: background-color 0.25s ease-out 100ms;
}

li.connexion:hover {
	background-color: #175A04;
}

li.other:hover {
	background-color: rgba(21, 21, 21, 0.8);
}