@charset "UTF-8";
/* CSS Document */
a { text-decoration: none; outline: 0; }
:link, :visited, :focus { text-decoration: none; outline: 0; } /* pas de souligne car degrade visibilite du texte */
ul, ol { list-style: none; } /* pas de style pour les listes car utilisation principale semantique */
h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em; } /* inconsistence de taille des navigateurs en titrage */
body, html, div, span, applet, object, iframe, form, fieldset, legend, label, input, textarea, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; } /* inconsistence de marge et padding */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { margin: 0; padding: 0; }
li, dd, blockquote { margin: 0; } /* marge gauche logique */
img, fieldset, a img, :link img, :visited img { border: 0; } /* supprime le tour bleu des images avec liens */
table { border-collapse: collapse; border-spacing: 0; } /* nettoie table, pensez aussi html cellspacing et cellpadding */


@font-face {
     font-family: 'polices/ralewaythin';
    src: url('polices/raleway_thin-webfont.eot');
    src: url('polices/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/raleway_thin-webfont.woff') format('woff'),
         url('polices/raleway_thin-webfont.ttf') format('truetype'),
         url('polices/raleway_thin-webfont.svg#ralewaythin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ralewaybold';
    src: url('polices/raleway-bold-webfont.eot');
    src: url('polices/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/raleway-bold-webfont.woff') format('woff'),
         url('polices/raleway-bold-webfont.ttf') format('truetype'),
         url('polices/raleway-bold-webfont.svg#ralewaybold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'ralewayregular';
    src: url('polices/raleway-regular-webfont.eot');
    src: url('polices/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/raleway-regular-webfont.woff') format('woff'),
         url('polices/raleway-regular-webfont.ttf') format('truetype'),
         url('polices/raleway-regular-webfont.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'polices/ralewaysemibold';
    src: url('polices/raleway-semibold-webfont.eot');
    src: url('polices/raleway-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('polices/raleway-semibold-webfont.woff') format('woff'),
         url('polices/raleway-semibold-webfont.ttf') format('truetype'),
         url('polices/raleway-semibold-webfont.svg#ralewaysemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

body { width:100%;


background: url(image/tram-gris.jpg) repeat scroll 0 0 transparent; 


/*background-color:rgba(241,239,240,1.0);*/
/*background-color:rgba(169,25,106,0.5);*/
/*background-image:url(image/fond-neige2.jpg);

		background-repeat:no-repeat;
		background-size:100%;
		background-position:top;
		z-index: -1;
		height:1200px;
		overflow:auto;
		background-size:cover;*/
/*background: url("image/amperagefond.jpg") center fixed;	*/	
}


.background {width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index:-1;
/*background: url("image/2014-neige.jpg") center fixed;*/
background: url("image/accueil-calli2.jpg") center fixed;
background-size: cover;
overflow:hidden;


}

.backgroundwebdoc {width: 100%;
height: 100%;
position:absolute;
top:0;
left: 0;
z-index: -1;
background: url("image/amperagefond.jpg") center fixed;
background-size: cover;

}

.backgroundwebdoc2 {width: 100%;
height: 100%;
position:fixed;
top:0;
left: 0;
z-index:-1;
background: url("image/amperagefond.jpg") center fixed;
background-size: cover;


}
	
/*	background-image:url(image/2014-voeux-neige.jpg);
		background-repeat:no-repeat;
		background-size:100%;
		background-position:top;
		z-index: -1;
		width:100%;
		height:100%;
		overflow:auto;
		background-size:cover;
		position:absolute;
		opacity:0.8;
}
*/
#presentbottom {background-image:url(image/2014-voeux-neige.jpg);
		background-repeat:no-repeat;
		background-size:100%;
		background-position:top;
		z-index: -1;
		width:100%;
		overflow:auto;
		background-size:cover;
		position:absolute;
		top:110%;
		opacity:0.8;
}

#contact {background-color:#906;
		background-repeat:no-repeat;
		background-size:100%;
		background-position:top;
		z-index: -1;
		width:100%;
		overflow:auto;
		background-size:cover;
		position:absolute;
		top:110%;
		opacity:0.8;
}


/*
.tram {background: url(image/tram2.png) repeat scroll 0 0 transparent;
height: 100%;
width: 100%;
position:absolute;
}
.tram {
background: url(images-interface/tram.png) repeat scroll 0 0 transparent;
height: 100%;
width: 100%;
z-index: 9999;
}
*/



#container {/*width:1000px; */
			
			
			width:1200px;
			
			height:100%;
			margin: 0 auto;
		padding-top:130px;
			}
			
.tram{ background: url(image/tram2.png) repeat scroll 0 0 transparent;
height: 100%;
width: 100%;
position:absolute;
opacity:0.3;
}
			
	h1 { font-family: 'ralewayregular'; sans serif;
	color:rgb(169,25,106);
		line-height:1.1em;
		font-size:1.0em;
		margin-left: 110px;
		margin-top:-10px;
		float:left;
	
		}
	
	h1 a { color:rgb(169,25,106);
	}
	h1 a:hover { color:rgba(169,25,106,0.6);
	}
		
.filetbas{
			width: 600px;
			margin-top:20px;
			border:dotted 1px rgba(169,25,106,1.0);
			
}	
		
.titre-presentation{ 
		font-family: 'ralewayregular'; sans serif;
		color:rgb(169,25,106);
		line-height:1.1em;
		font-size:2.0em;
		position:relative;
		margin-top:-150px;
		margin-left:10px;
		
	
}

.titre-presentation2{ 
		font-family: 'ralewayregular'; sans serif;
		color:rgb(169,25,106);
		line-height:1.1em;
		font-size:2.0em;
		position:relative;
		margin-top:150px;
		margin-left:10px;
		
	
}

.spacing { letter-spacing:0.08em;}
		
		
		
		
.soustitre { font-family:'polices/ralewaythin', sans serif;
	color:rgb(86,86,86);
		line-height:1.1em;
		font-size:1.0em;
		margin-left: 20px;
		margin-top:5px;
		letter-spacing:0.1em;
	
}

#logo { width:350px;
		height:100px;
		float:left;
		margin-left:80px;
		position:fixed;
}

#logo li { margin-left:60px;
}

.filet{
width: 120px;
border:dotted 1px rgba(169,25,106,1.0);
position:relative;
float:left;
}


#header { 
		width:100%;
		height: 100px;
	
		float:left;
		position:fixed;
		top:0px;
		right:0;
		z-index:9999999;
		/*background-color:rgba(250,250,250,0.7);background-color:rgba(241,239,240,1.0);*/
		background-color:#FFF;
						
}

#menu { width:80%;
		
		height:8%;
		float:left;
		margin-left:20px;
		margin-top: 20px;
		position:relative;
	
}


h2 {  font-family: 'polices/ralewaythin';
		color:rgba(169,25,106,1.0);
		line-height:1.1em;
		font-size:1.4em;
		margin-left:-20px;
		margin-top:10px;
		
		
		}
h2 a {	
color:rgba(169,25,106,1.0);

}

h2 a:hover { 
color:rgba(169,25,106,1.0);
}

.titrefolio { 
margin-left:100px;
margin-top:10px;
}
			
.titrelogo { 
font-family: 'ralewayregular' sans serif; 

margin-left:30px;
padding-left:10px;
margin-bottom:10px;
text-align:left;
top:10px;

}

.contact { font-family: 'ralewayregular'; sans serif;
			font-size:1.2em;
			margin-left:30px;
			padding-left:10px;
			margin-bottom:10px;
			text-align:left;
			margin-top:50px;
			line-height:40px;
			color:rgba(169,25,106,1.0);
		
}
.contactmail { font-family: 'ralewayregular'; sans serif;
			font-size:1.0em;
			margin-left:0;
			margin-bottom:20px;
			text-align:left;
			margin-top:50px;
			line-height:50px;
			color:rgba(169,25,106,1.0);
			border-bottom:dotted 1px rgb(169,25,106);
			float:left;
}



#menutop{ 
	max-width:500px;
	position:relative;
	height: 5%;
	color:#666;
    font-size: 0.9em;
    margin-top: 5px;
	float:right;
	margin-right:10%; 
	
	
	}

	
#actif { 

color:rgba(169,25,106,1.0);
}
#menutop li{
	  float:left;
	  text-align:left;
	  /*clear:both;*/
	  display:block;
	  height:12px;
	  list-style: none outside none;
	  margin-left: 50px;
	  padding-left: 1px;
	  padding-top: 30px;
	  padding-bottom: 10px;
	  width: 100px;
	 
	  font-family: 'ralewayregular', sans serif;
	  font-size:1.1em;
	
	}

	
#menutop li a {
	
	color:rgba(140,140,140,1.0);
	
}
	
#menutop li a:hover { 
	color:rgba(169,25,106,1.0);
	font-family: 'ralewayregular';
	border-bottom:2px solid rgba(169,25,106,1.0) ;
	
}

#menutop li a.on {
	color:rgba(169,25,106,1.0);
	font-family: 'ralewayregular';
	border-bottom:2px solid rgba(169,25,106,1.0) ;
	
}


.filetleft{
width: 700px;
margin-top:-10px;
border:dotted 1px rgb(169,25,106);
margin-left:250px;
}

#grandbloc { 


position:relative;
overflow:hidden;
padding-bottom: 6.875em;
float:left;
margin-top:10px;

}

#bloc-contact { 
position:relative;
overflow:hidden;
padding-bottom: 6.875em;
float:left;
margin-top:10px;
margin-left: 60px;
background-color:(250,250,250,0.8);

}


.icone {
float:left;
margin-top:15px;
margin-left:3px;
border-top:dotted 1px rgb(169,25,106);
border-bottom:dotted 1px rgb(169,25,106);
}

.sideleft{	
width:200px;
float:left;
position:relative;
}
/*#slider{	width:980px;
			float:left;
			position:relative;
			
			
		
}
*/
#slider {
	float:left;
	min-height:300px;
}
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
  
.webdesigner { width:400px;
				height:400px;
				background-color:#FFF;
				
				font-family: 'ralewayregular';
}

.webdesigner2 { width:400px;
				height:400px;
				background-color:#FFF;
				
				font-family: 'ralewayregular';
				color:rgba(169,25,106,1.0);
}

.adress { margin-left:60px;
		font-size:1.8em;
		font-family: 'polices/ralewaysemibold', sans serif;
}
.accroche {
	margin-right:60px;
	font-family: 'polices/ralewaysemibold', sans serif;
 	font-size:1.8em;
 	text-align:center;
 	width:700px;
 	height:300px;
}

#blocimage{
		
	  float:left;
	  margin-top:0px;
	  margin-left:100px;
	
}

.introtxt{ 
 width:200px;
 height:auto;
 float:left; 
 font-family: 'ralewayregular';
 font-size:0.8em;
 line-height:20px;
 text-align:left;
 margin-left:30px;
 color:rgba(86,86,86,1.0);
			
}

.introtxt1{ 
 width:600px;
 float:left; 
font-family: 'ralewayregular', sans serif;
 font-size:1.0em;
 line-height:20px;
 text-align:left;
 margin-left:5px;
 margin-top:15px;
 
 color:rgba(86,86,86,1.0);
 overflow:hidden;
 
			
}

.introimg{ float:right; margin-right:-10px;
}

#blocimage ul {
	  border-bottom:dotted 1px rgba(169,25,106,1.0);
	  width:350px;
	  float:left;
	  margin:0 10px 10px 0 ;
	  
}
.thb {
    display:block; 
    position:relative; 
    width:350px; 
    height:230px; 
    color:#FFF;
    font-size:3.0em; 
    text-align:center; 
	
}

.overlay {
    display:none; 
    position:absolute;
    bottom:0px; 
    left:0px; 
    width:100%; 
    height:230px; 
    line-height:230px; 
    background-color:rgba(86,86,86,0.8); 
	  font-family: 'polices/ralewaysemibold',sans serif;
	  letter-spacing:0.05em;
	  font-size: 1.1em;
	  text-transform:uppercase;
}

.thb:hover .overlay {
    display:block; 
}


.imageicone{ border:1px thin color:rgba(169,25,106,1.0);
background-color:#CCC;
opacity:0.8;
}
	
/*page logo trame css: background: url(image/tram2.png); */

#projetimage { width:700px;
				min-height:650px;
				float:left;
				position:relative;
				margin-right:10px;
				margin-top:5px;
				border-radius:5px;
				/*background-color:rgba(240,240,240,1.0);*/
		
}

#projetimage li { text-decoration:none;
					list-style:none;
					list-style-image:none;
					margin-left:50px;
					margin-bottom:5px;
					float:left;
					
					
					
}

.img70 { width:70%;
			height:auto;
			border-radius:5px;
}
.img80 { width:85%;
			height:auto;
			border-radius:5px;
}
.img90 { width:92%;
			height:auto;
			border-radius:5px;
}

.overlay2 {
    display:none; 
    position:absolute;
    bottom:0px; 
    left:0px; 
    width:100%; 
    height:230px; 
    line-height:230px; 
    background-color:rgba(86,86,86,0.8); 
	  font-family: 'polices/ralewaysemibold',sans serif;
	  letter-spacing:0.05em;
	  font-size: 1.1em;
	  text-transform:uppercase;
}

.thb:hover .overlay2 {
    display:block; 
}
.projetpresentation { 
margin-top:-50px;
margin-left:80px;
width:710px;
height:700px;
/*background-color:rgba(240,240,240,1.0);*/
float:left;
z-index:10;



}
.navprojet {
	float:left;
	
}

h3 { font-family: 'polices/ralewaysemibold',sans serif;
			font-size:0.8em;
			width:250px;
		
}


h3 a {	
color:rgba(86,86,86,1.0);

}

h3 a:hover {
color:rgba(169,25,106,1.0);
}

.liensite {  
font-family: 'polices/ralewaysemibold',sans serif;
font-size:0.9em;
width:200px;
margin-top:15px;

			
}

.liensite-1 {  
float:right;
margin-top:10px;
margin-right:30px;
}

.over-lien{ 


}
.over-lien a:hover { color:#FFF;
}

h4 {  font-family: 'polices/ralewaysemibold',sans serif;

			font-size:0.7em;
			float:left;
			width:550px;
			height:25px;
			margin-top:-38px;
			margin-bottom:10px;
			margin-left:50px;
			text-align:left;
			
			background-color:rgba(142,141,142,0.2);
}
.chapo {  
font-family: 'polices/ralewaysemibold',sans serif;
font-size:1.1em;
width:200px;
color:rgba(169,25,106,1.0);
margin-left:50px;
		
			
}
.vignettes-intro{ width:600px;
					margin-top:-50px;

						margin-left:100px;
				
				
				position:relative;
}
.vignettes  { 	
margin-left:40px;
				min-height:150px;
				float:left;
				position:relative;
				/*position:fixed;
		top:200px;
		left:50px;
		z-index:9999999;*/
		
}
		

.vignettes ul {
				min-height:100px;
			display:block;
				
				
}
.vignettes ul li { padding:5px;
}

.textedroite { margin-right:20px;
				width:200px;
}

.textecontact { margin-right:20px;
				width:200px;
				margin-top:40px;
				color:rgba(169,25,106,1.0);
}

.legende {  font-family: 'polices/ralewaysemibold',sans serif;
			font-size:0.8em;
			width:200px;
			color:rgba(86,86,86,1.0);
}
	
.titrelegende{ 
			font-family: 'polices/ralewaysemibold',sans serif;
			font-size:0.9em;
			width:80px; 
			margin-top:10px;
			text-transform:uppercase;
			color:rgba(86,86,86,0.9);
}

.legende2 {  font-family: 'polices/ralewaysemibold',sans serif;
			font-size:0.8em;
			float:left;
			width:600px;
			margin-top:3px;
			margin-bottom:10px;
			text-align:left;
			padding-left:20px;
}
.centre { margin-left:185px;
			margin-bottom:50px;

}
.centre1 { margin-right:50px;
			margin-bottom:20px;
			float:right;

}

.centre3 {	margin-top:10px;
			margin-bottom:10px;
			float:right;
			margin-right:30px;
}

.souris { margin-right:50px;
			margin-top:-50px;
			float:right;

}

#gototop { 
			/*font-family: 'polices/ralewaysemibold',sans serif;
			font-size:0.8em;
			width:200px;
			color:rgba(169,25,106,1.0);
			padding-bottom:30px;
			margin-left:50px;
			position:absolute;
			bottom:0;
			top:20;*/
			-webkit-transition: top 50ms linear;
-moz-transition: top 50ms linear;
-o-transition: top 50ms linear;
transition: top 50ms linear;
position: fixed;
bottom: 35px;
left: 20px;
height: 96px;

opacity: 1;
z-index: 25;
			
}


#piedpage{ 
	background: url(image/tram-grisrose.jpg) repeat scroll 0 0 transparent;
height:100%;
width: 100%;
position:absolute;
left:10;
	float: left;
    font-size: 1.0em;
    
	position:fixed;
	bottom:0;
	right:0;
	opacity:0.8;
	z-index:999999;
	height: 30px; line-height: 20px; padding: 10px;
	}
	
#piedpage li {
	float:left;
	font-size:12px;
	line-height:14px;
	padding:4px;
	
	}
	
#piedgauche{
	float:left;
	
    list-style: none outside none;
   margin-left:10px;
	border-left:1px; 
	border-color-left:rgba(138,139,141,1.0);
	font-size:12px;
	font-family: 'polices/ralewaysemibold',sans serif;
	color:#999;
	padding-left:10px;
	
	}	
	
#pieddroit{
	float:right;
	
    list-style: none outside none;
   margin-left:10px;
	border-left:1px; 
	border-color-left:rgba(138,139,141,1.0);
	font-size:12px;
	font-family: 'polices/ralewaysemibold',sans serif;
	color:#999;
	
	}
	
	
#piedpage li a { 
	color:rgba(86,86,86,1.0); font-family: 'polices/ralewaysemibold',sans serif;
	}
	
#piedpage li a:hover {
	color:rgba(169,25,106,1.0);
	}







/* 
	
	.textgauche{ width:200px;
				min-height:500px;
				position:relative;
				float:left;
				margin:0 10px 20px 10px;
				background-color:#09C;
	
}
	
	
	
	#menutop{ 
	float: right;
	color:#666;
    font-size: 1.0em;
    margin-top: 30px;
	margin-right: -60px;
	}
	
#menutop li{
	float:left;
    height:12px;
    list-style: none outside none;
	
    padding-left: 1px;
    width: 200px;
	border-left:1px; 
	border-color-left:#666;
	font-family:'polices/ralewaythin', sans serif;
	font-size:1.3em;
	
	}
	
	
	#menutop li a { color:#666;
	
	}
	
	#menutop li a:hover { color: rgba(177,18,75,1.0);
	
	}
	
	
	
	*/