html, body 
{
height: 100%;
padding: 0;
margin: 0;
}

body 
{
min-height: 100%;
margin: 0 auto;
font-family: 'Roboto Slab', serif;
background-color: #ffc61e;
}


#titre
{
text-align: center;
font-size: 3em;
margin-top: 3%;
margin-left:200px;
}



#panneaucentral
{
margin-top:6%;
width: 100%;
height: 60%;
}

.minititre
{
font-size:1.2em;
color: black;
text-align: center;
}

.question
{
color: #633a11;
margin-top:25px;
text-align: justify;
}


.bloccentral
{
height: 85%;
}

.cachertexte
{
position: absolute;
padding: 5px;
height: 360px;
top: 50%;
margin-top: -190px;
}


a.infocontact div{
display: none
}
 
 
a.infocontact:hover div{
display: block;
position:absolute; 
background-color: #ff9600;
color: #633a11;
font-size: 1em;
border-radius: 10px;
text-align: center;
margin-top: -32%;
margin-left: -11%;
border: 2px solid white;
padding: 2px;
}


.infocontact
{
float: right;
}

.infocentre
{
float: right;
}

a.infocentre div{
display: none
}
 
 
a.infocentre:hover div{
display: block;
position:absolute; 
background-color: #ff9600;
color: #633a11;
font-size: 1em;
padding: 2px;
border-radius: 10px;
margin-left: -20%;
text-align: center;
margin-top: -32%;
border: 2px solid white;
}


.infoemballages
{
float: right;
}


a.infoemballages div{
display: none
}
 
 
a.infoemballages:hover div{
display: block;
position:absolute; 
background-color: #ff9600;
color: #633a11;
font-size: 1em;
padding: 2px;
border-radius: 10px;
margin-left: -20%;
text-align: center;
margin-top: -27%;
border: 2px solid white;
}


#cacherpanneaugauchetexte
{
text-align: center;
margin-top: 30%;
position: absolute;
width:100%;
height: 130px;
top: 50%;
margin-top: -65px;
}


#panneaucentralbas
{
margin-top: 4px;
width: 100%;
height: 59%;
}



#panneaugauche
{
display:inline-block;
position: relative;
width: 33%;
height: 100%;
background-image: url('Images/camion.png');
background-repeat: no-repeat;
}


#panneaucentre
{
position: relative;
display:inline-block;
width: 32%;
height: 100%;
background-image: url('Images/voiture.png');
background-repeat: no-repeat;
}



#panneaudroit
{
display:inline-block;
width: 33%;
height: 100%;
background-image: url('Images/emballages.png');
background-repeat: no-repeat;
float: right;
}

#cacherpanneaugauche
{
position: relative;
display: none;
background-color: #ff9600;
height: 100%;
padding: 2px;

}

.piedcarreau
{

margin-top:5px;
}

#panneaugauche:hover 
{ 
z-index: 0;
}

#panneaugauche:hover #cacherpanneaugauche 
{ 
display: block;
z-index: 2;
}



#cacherpanneaucentre
{
position: relative;
display: none;
background-color: #ff9600;
height: 100%;
}

#panneaucentre:hover 
{ 
z-index: 0;

}

#panneaucentre:hover #cacherpanneaucentre 
{ 
display: block;
z-index: 2;
}



#cacherpanneaudroit
{
position: relative;
display: none;
background-color: #ff9600;
height: 100%;
}

#panneaudroit:hover 
{ 
z-index: 0;

}


#panneaudroit:hover #cacherpanneaudroit 
{ 
display: block;
z-index: 2;
}





#panneaugauchebas
{
display: inline-block;
position: relative;
width: 33%;
height: 100%;
background-image: url('Images/technique.png');
background-repeat: no-repeat;
float: right;
}

#panneaucentrebas
{
position: relative;
width: 33%;
height: 100%;
display: inline-block;
background-image: url('Images/moyensimpression.png');
background-repeat: no-repeat;
}



#panneaudroitbas
{
position: relative;
display: inline-block;
width: 33%;
height: 100%;
background-image: url('Images/fraisgeneraux.png');
background-repeat: no-repeat;
}

#cacherpanneaugauchebas
{

position: relative;
display: none;
background-color: #ff9600;
height: 100%;
border: 1px solid #ff9600;
}

#panneaugauchebas:hover 
{ 
z-index: 0;
}

#panneaugauchebas:hover #cacherpanneaugauchebas
{ 
display: block;
z-index: 2;
}

#cacherpanneaucentrebas
{
position: relative;
display: none;
background-color: #ff9600;
height: 101%;
width: 101%;
}

#panneaucentrebas:hover #cacherpanneaucentrebas 
{ 
display: block;
z-index: 2;
}

#panneaucentrebas:hover 
{ 
z-index: 0;
}


#cacherpanneaudroitbas
{
position: relative;
display: none;
background-color: #ff9600;
height: 100%;
border: 1px solid #ff9600;
}

#panneaudroitbas:hover #cacherpanneaudroitbas
{ 
display: block;
z-index: 2;
}


#panneaudroitbas:hover 
{ 
z-index: 0;
}


	.content {
position: absolute;
        width: 330px;
		font-size: 1.1em;
        line-height: 25px;
		margin-left: 15%;
    }
	
	.contentemballages {
position: absolute;
        width: 415px;
		font-size: 0.9em;
        line-height: 25px;
		margin-left: 2%;
    }
	
		.contenttechnique {
position: absolute;
        width: 415px;
		font-size: 1.1em;
        line-height: 25px;
		margin-left: 5%;
    }
	
    .static {
        float: left;
        overflow: hidden;
        height: 35px;
    }
	
    .p {
        display: inline;
        float: left;
        margin: 0;
        color: #633a11;
		font-size: 1.3em;
		margin-left: 3%;
		margin-top: 1%;
    }
	
	#ptechnique {
        display: inline;
        float: left;
        margin: 0;
        color: #633a11;
		font-size: 0.9em;
    }
	
	
    ul {
        margin-top: 0;
        padding-left: 130px;
        text-align: left;
        list-style: none;
        animation: 7s linear 0s normal none infinite change;
    }
    ul li {
        color: #633a11;
        line-height: 3px;
        margin: 0;
    }
	
     @keyframes change {
        0% { margin-top: 0; }
        10% { margin-top: 0; }
		17% { margin-top: -34px; }
		27% { margin-top: -34px; }
        34% { margin-top: -68px; }
        44% { margin-top: -68px; }
		51% { margin-top: -102px; }
        61% { margin-top: -102px; }
		68% { margin-top: -68px; }
        75% { margin-top: -68px; }
		82% { margin-top: -34px; }
        89% { margin-top: -34px; }
		100% { margin-top: 0; }
    }