html,
body {
	height: 100%;
    width: 100%;
}

body {
	background: #000;
	color: #fff;
	font-family: Arial, sans-serif;
    font-size: 18px;
}

a img {
    border : 0;
}

h1 {
    font-size: 2em;
    color: #ececec;
    padding: 1em 0.5em 0.2em 0.5em;
}

h2 {
    font-size: 1.5em;
    padding: 0.8em 0.6em 0.2em 0.6em;
}

#container{
    position: relative;
    top: 8.5em/*150px*/;
    text-align: center;
    width: 100%;
    overflow: hidden;
}

#waypoint{
    position: absolute;
    display: none;
}

section {
    background: #ececec;
	width: 100%;
	text-align: justify;
	color: #020202;
	line-height: 1.3;
    overflow: hidden;
    padding: 1em 0;
    /*border: 2px solid green;*/
}
section h1 {
    color: darkred;
}

section p {
	opacity: 0.8;
    padding: 0 1em 0.2em 1em;
}



.arbre{
    display: block;
    width: 300px;/* Largeur de votre animation */
    height: 600px;/* Hauteur de votre animation */
    background-color: #fff;
    background-image: url("../images/arbre-sprite.png");/* Notre sprite */
    animation: ArbrePlay 3.56s steps(90) infinite alternate;
}

.arbre:hover {
    animation: ArbrePlay  3.56s steps(90) infinite alternate;
    animation-play-state: paused;
}


@keyframes ArbrePlay {
   from { background-position:    0px; }
     to { background-position: -27000px; }
}

.containergrid{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.containergrid::after{
    clear: both;
}
.containergrid .grid01,
.containergrid .grid02,
.containergrid .grid03,
.containergrid .grid04 {
    float: left;
}
.containergrid .grid01 {
    width: 100%;    
}
.containergrid .grid02 {
    width: 50%;    
}
.containergrid .grid03 {
    width: calc(100% / 3);    
}
.containergrid .grid04 {
    width: 25%;    
}

.containergrid img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Style de formulaire*/
form{
    padding: 1em 2.5em;
    text-align: left;
}
form label{
    display: block;
    font-size: 0.8em;
    color: darkgray;
    padding: 1em 0 0 0.5em;
}
#confirm{
    display: none;
    text-align: center;
    padding: 2em;
}
.inputerreur{
    background-color: red;
}
.erreur{
    color: red;
}
.erreurmessage{
    background-color: palevioletred;
    color: darkred;
}
.confirmmessage{
    color: green;
    background-color: palegreen;
}
/* Fin style de formulaire*/

@media screen and (max-width: 50em) {
    body {
        font-size: 16px;
	}
    #containergrid .grid02 {
        width: 100%;    
    }
    
    #containergrid .grid03 {
        width: 50%;    
    }
    #containergrid .grid03last  {
        width: 100%;    
    }
}


@media screen and (max-width: 40em) {
    body {
        font-size: 14px;
	}   
    #containergrid .grid03 {
        display: none;
        width: 100%;    
    }
}