@charset "utf-8";
/* CSS Document */

body {  margin: 0px; padding: 0px; background: url(images/arpl.jpg) no-repeat center fixed; background-size: cover;  font-family:"Century Gothic"; font-size:14px; height:100%; }

a:link {
	color: #b21e22;
	text-decoration: none;
}
a:visited {
	color: #b21e22;
	text-decoration: none;
}
a:hover {
	color: #523053;
	text-decoration: none;
}
a:active {
	color: #b21e22;
	text-decoration: none;
}
a {
	font-weight: bold;
}
h2 { color:white; display: inline; }
h1 { color:#523055; display: inline; }
h2.rouge { color:#b21e22; }

h1.rouge {
	color:#b21e22;
	display:inline;
	font-family: "Trebuchet MS", Helvetica,  Arial, sans-serif;
	font-weight:lighter;
	font-size:34px;
	text-shadow: 2px 2px 1px #CCC;
}

#conteneur { width: 1200px; margin-top:0px; margin-left: auto; margin-right:auto; height:auto; background-color:white; border-left: solid 1px #CCC; border-right: solid 1px #CCC;  }

#colonnegauche { width: 299px; height:100%; float:left; background-color:#FFF; }
#colonnedroite { width: 901px; height: auto; float:left; background-color:#FFF; }
.hautcolgauche { width: 299px; height: 41px; float:left; background-color:#513055; }
.hautcoldroite { width: 881px; height:31px; float:left; padding-top:10px; padding-left:20px; }
.logo { width: 299px; height:250px; float:left; background-image:url(images/For-Ymage_05.jpg); }

#banniere { width: 901px; height: 250px; float:left; overflow:hidden; position:relative;  }
@keyframes defilement {	  
from {  left: 0px; }
    15% { left: 0px; }
    35% { left: -901px; }
    50% { left: -901px; }
    70% { left: -1802px; }
    85% {left: -1802px;  }
    to {left: 0px;  }}
@-webkit-keyframes defilement {	 
from {  left: 0px; }
    15% { left: 0px; }
    35% { left: -901px; }
    50% { left: -901px; }
    70% { left: -1802px; }
    85% {left: -1802px;  }
    to {left: 0px;  }}
@-moz-keyframes defilement {	 
from {  left: 0px; }
    15% { left: 0px; }
    35% { left: -901px; }
    50% { left: -901px; }
    70% { left: -1802px; }
    85% {left: -1802px;  }
    to {left: 0px;  }}
	
#bandef li {
    display: inline;
}
#bandef { 
position:absolute;
width:2703px;
animation-name: defilement;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-duration: 15s;
	top: 0;
    left: 0;
    margin: 0;            
    padding: 0;
 }

#navigation { width: 299px; height:169px; float:left; }
.accueil { width:299px; height:31px; float:left; background-image:url(images/accueuil.jpg); margin-top:5px; }
.accueil:hover { width:299px; height:31px; float:left; background-image:url(images/For-Ymage_15.jpg); margin-top:5px; }
.bureau { width:299px; height:32px; float:left; background-image:url(images/For-Ymage_17.jpg); }
.bureau:hover { width:299px; height:32px; float:left; background-image:url(images/buretuhover.jpg); }
.solutions { width:299px; height:35px; float:left; background-image:url(images/For-Ymage_21.jpg); }
.solutions:hover { width:299px; height:35px; float:left; background-image:url(images/nosolhover.jpg); }
.realisations {width: 299px; height:35px; float:left; background-image:url(images/For-Ymage_25.jpg); }
.realisations:hover {width: 299px; height:35px; float:left; background-image:url(images/nosreahover.jpg); }
.contact { width: 299px; height:33px; float:left; background-image:url(images/For-Ymage_26.jpg);}
.contact:hover { width: 299px; height:33px; float:left; background-image:url(images/contacthover.jpg);}
#hautcontenug { width:808px; height:37px; float:left; background-color:#513055; padding-left: 20px; }
.picto { width:36px; height:37px;float:left; }
.separation { width:58px; height:37px; float:left; }
.txthautg { width:auto; height:37px; float:left; font-size:17px; padding-top:6px; padding-left:15px; font-family:"Century Gothic"; font-weight:bold; font-style:italic; color:white; } 
#hautcontenud {width:73px; height:37px; float:left; background-image:url(images/For-Ymage_14.jpg); }
#contenu {width: 902px; height:auto; float:left;  background-image:url(images/For-Ymage_32.jpg); background-repeat:repeat-y; padding-top:0px; }
#contenufin { width: 902px; height:168px; float:left; }
#noussituer { width:299px; height:auto; float:left; margin-top:20px; }
.noussituertitre { width:299px; height:36px; margin-bottom:5px; background-image:url(images/For-Ymage_28.jpg); }
.noussituerimg { width:299px; height:335px; float:left; background-image:url(images/For-Ymage_30.jpg); }
.noussituertxt { width:299px; height:10px; float:left; }
#zoneinter { width:299px; height:auto; float:left; margin-top:20px; }
.zoneintertitre { width:299px; height:36px; margin-bottom:5px; background-image:url(images/zoneintervention.jpg); }
.zoneinterimg { width:299px; height:313px; float:left; background-image:url(images/intervention.jpg); }
#nospartenaires { width:299px; height:auto; float:left; margin-top:20px;  }
.nospartenairestitre { width:299px; height:36px; float:left; background-image:url(images/nospartenaires.jpg); }
.nospartenairesimg { width:299px; height:auto; float:left;}
.titrecontenu { width:262px; height:32px; float:left;  }
#contenucontenu { width: 874px; height:auto; float:left; padding-left:60px; margin-top: 25px ; margin-bottom: 25px; }
#contenucontenu1 { width: 874px; height:auto; float:left; padding-left:60px; margin-top: 5px ; margin-bottom: 25px; }
#contenupres { width: 778px; height:440px; float:left;  }
#contenu1 { width: 778px; height:220px; float:left; }
#contenu2 {
	width: 778px;
	height:auto;
	float:left;
	margin-top: 10px;
	font-family: "Century Gothic";
}

.txtbonjour {
	width : 778px;
	height:auto;
	float:left;
	font-size:14px
}
#contenusolutions { width: 778px; height:301px; float:left; }
#contenusol1 { width:175px; height:281px; float:left; background-image:url(images/solution1hover.jpg); overflow:hidden; }
#contenusol2 { width:175px; height:281px; float:left; background-image:url(images/solution2hover.jpg); 
 overflow:hidden ;  }

.solutionimg {transition-property: padding-top;
    transition-duration: 1.8s;
	transition-timing-function: ease-out; 
	overflow: hidden; } 
.solutionimg:hover { padding-top:281px; overflow: hidden;}
.contenusol3 { width:175px; height:281px; float:left; background-image:url(images/solution3hover.jpg);  overflow:hidden ; }
.contenusol4 { width:175px; height:281px; float:left; background-image:url(images/solution4hover.jpg);  overflow:hidden ; }
.transsol { width:16px; height:181px; float:left; background-image:url(images/transsolutions.jpg); margin-left:5px; margin-right:5px; margin-top:50px; }
.voir { width: 778px; height:10px; text-align:right; }
#pied {width: 1200px; height:200px; background-color:#333; float:none; clear:both;  margin-left:auto; margin-right:auto;}

#contenuactu { width: 778px; height:auto; float:left; }
.dateactu { width:81px; height:58px; margin-top:18px; margin-left:15px; padding-top:25px;  background-image:url(images/dateactu.jpg); color:#FFF; font-weight:bold; font-size:18px; text-align:center; line-height:83%; float:left; }
.titreactu { margin-left: 35px; margin-top:15px; height:15px; width:auto; color:#b21e22; font-weight:bold; float:left; font-size:18px }
.texteactu { margin-left:35px; margin-top:15px; height:auto; width:632px; float:left; }
.separationactu { width:778px; height:15px; margin-top:15px; background-image:url(images/separationactu.jpg); float:left; }
#archives { margin-top:20px; width:778px; height:15px; float: left; text-align:right; }

.logopied { width:180px; height:56px; margin-top:30px; margin-left:40px; }
.mentionspied { width:350px; height:80px;  margin-top:10px; margin-left:40px; color:white; font-size:12px }

#entete1 { width:901px; height:311px; float:left; background-image:url(images/entetes/bureauetude.jpg) }
#entete2 { width:901px; height:311px; float:left; background-image:url(images/entetes/nossolutions.jpg) }
#entete3 { width:901px; height:311px; float:left; background-image:url(images/entetes/nosrealisations.jpg) }
.titre{width:300px; height:25px; margin-left:15px; margin-top:136px; float:left;  }
#nossolutions {width:382px; height:auto; float:left; }
#nossolutions1 {width:382px; height:auto; float:left; margin-left:10px; }
.nossolutions {width:362px; height:auto; float:left;  background-color:#363; text-align:center; padding-top:20px; color:white; padding-left:10px; padding-right:10px; padding-bottom:20px; margin-bottom:8px  }



.nossolutions1 {width:362px; height:auto; float:left;  background-color:#69C; text-align:center; padding-top:20px; color:white;   padding-left:10px; padding-right:10px; padding-bottom:20px; margin-bottom:20px;}

.nossolutions1a {width:362px; height:auto; float:left;    background-color:#F93; text-align:center; padding-top:20px; color:white;  paddng-left:10px; padding-right:10px; margin-bottom:8px ;padding-bottom:20px; }

.nossolutionsb {width:362px; height:auto; float:left;  background-color:#9C6; text-align:center; padding-top:20px; color:white;  padding-left:10px; padding-right:10px; padding-bottom:20px; }

#bloccontact { width: 778px; height:auto; float:left; }
#coordonnees { width:250px; height:auto; float:left; }
#form {width:518px; height:auto; float:left; margin-left:10px; }
.txtbureau { width:748px; height:auto; float:left; background-color:#D3E1E4; padding: 15px 15px 15px 15px;}

#soluc { width:778px; height:auto; float:left; }
.soluc1 { width: 342px; height:auto; float:left; text-align:center; padding: 10px 20px 20px 20px; }

.soluc2 { width: 342px; height:auto; float:left; text-align:center; margin-left:14px; padding: 10px 20px 20px 20px; }

#realisation { width:186px; height:230px; float:left; margin-bottom:11px; }
#realisation1 { width:186px; height:230px; float:left; margin-left:11px; margin-bottom:11px; }
.imgrealisation { width:186px; height:230px; float:left;  }

.sstitre { width:auto; height:auto; float:left; background-color:#513055; padding-left:5px; padding-right:5px;}
.sstexte{ width:auto; height:auto; float:left; margin-top:11px; margin-bottom:11px; }

.class_test {
    text-align: center;
    display: inline-block;
    position: relative;
	float:left;
}

    .class_test:hover p.text {
	opacity: 1;
    }

.class_test p.text {
	color: #FFF;
	padding-top:7px;
	width: 186px;
	height: 223px;
	background: rgba(0, 0, 0, 0.5);
	margin: 0 0;
	top: -1px;
	opacity: 0;
	display: block;
	position: absolute;



    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
	left: 0px;
}

#listerea {width:778px; height:auto; float:left; margin-bottom:20px; }
#chiffrescles {width:175px; height:auto;float:left; margin-top:15px; }
#chiffrescles1 {width:175px; height:auto;float:left; margin-top:15px; margin-left:26px; }
.imgcle1 {width:132px; height:80px; float:left; background-image:url(images/cle.jpg); padding-top:20px; padding-left:43px; font-size:34px; font-weight:bold; color:white; font-family: "Century Gothic"; text-shadow: 2px 2px 1px #666;}
.imgcle2 {width:160px; height:70px; float:left; background-image:url(images/cle1.jpg); padding-top:30px; padding-left:15px; font-size:24px; font-weight:bold; color:white; font-family: "Century Gothic"; text-shadow: 2px 2px 1px #666; }
.imgcle3 {width:161px; height:70px; float:left; background-image:url(images/cle2.jpg); padding-top:30px; padding-left:14px; font-size:22px; font-weight:bold; color:white; font-family: "Century Gothic";text-shadow: 2px 2px 1px #666; }
.imgcle4 {width:135px; height:80px; float:left; background-image:url(images/cle3.jpg); padding-top:20px; padding-left:40px; font-size:34px; font-weight:bold; color:white; font-family: "Century Gothic";text-shadow: 2px 2px 1px #666; }
.txtcle {width:175px; height:auto; float:left; padding-top: 10px; text-align:justify; }