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

}
#conteneur{
	margin:0 auto;
	padding:0;
	width :978px;
	min-height : 600px;
	overflow: hidden;
	    /*border-left: 1px solid #FF0000;
    border-right: 1px solid #FF0000;*/
}
h3{
	color:red;
	font-size: 28px;
	margin:0;
	padding:0;
	text-align:center;
	
}

h4 a{
    border-bottom: 1px solid #FF0000;
    border-top: 1px solid #FF0000;
    color: #FFFFFF;
    font-size: 40px;
    margin: -20px 420px;
    text-align: center;
	text-decoration: none;
	font-size: 16px;
	width: 100%
	
}
.tib{
  text-decoration: none;
  color: red;
}
.attent{

	color:black;
	font-size: 20px;
	margin:0;
	padding:0;
	text-align:center;
}
#boite1{
	margin:0;
	padding:0;
	margin-top:20px;
	width :100%;
	/*height : 400px;*/
	background-color:#efefef;
	overflow:hidden;

}
img.animation{
	display:block;
	margin-left:auto;
	margin-right:auto;
	/*margin-top : 150px;*/
	width :70%;

}
#articleindex{
	margin:0;
	padding:0;
	width :1000px;
	height : 300px;
	background: white;
}
hr{
	margin:0;
	padding:0;
	color:red;
	border-color: red;
	background-color: red;
}
.partieAdroite p{
	margin-left:40px;
	margin-right:40px;
	text-align: justify;

}
p{
	margin-left:40px;
	margin-right:40px;
	text-align: justify;
}

#articleindexA{
	min-height:620px;
	width:100%;
	overflow: hidden;
	/*background:blue;*/
	background: black;

}
.partieAgauche{

	width:405px;
	float: left;

	/*background-color: red;*/
	min-height: 820px;
	float: left;
	margin:20px 30px 0 0;

}
img.presentation{

	display: block;
	float: left;
	margin:20px 0 20px 20px;
	/*width:180px;*/
	height: 180px;
	/*background-color: yellow;*/
	/*opacity:0.4;*/
  opacity:1;
	 overflow: hidden;
}
img.presentation:hover{


	opacity:0.4;
}
.annee{
    color: /*#ffffff*/#00ff00;
    height: 140px;
    margin-left: 190px;
    margin-right: 0;
    text-align: center;
     font-size: 9.87px;
    margin-top: 45px;
    font-style: bold;
    opacity:1;


}
p.rotate {
    background-color: green;
    color: #ffffff;
    display: block;
    height: 100px;
    margin: 0 0 0 208px;
    overflow: hidden;
    padding: 0;
    transform: rotate(90deg);
    transform-origin: 0 0 0;
    width: 100px;
}
img.presentationb{

   display: block;
    float: left;
    height: 150px;
    margin: 40px 0 0 50px;
    
    opacity:1;
    overflow: hidden;
    width: 150px;
    border-radius: 15px;
}
img.presentationb:hover{


  opacity: 0.4;
}

img.presentation2{

	display: block;
	float: left;
	/*margin:40px 20px 40px 20px;*/
	width:440px;
	height: 300px;
	/*background-color: yellow;*/
	opacity:1;
}
img.presentation2:hover{


	opacity:0.4;
}
a.nimport{
display: block;
width:440px;
  height: 300px;
    /*margin:40px 20px 40px 20px;*/
    float:left;
    opacity:1;
}

a.nimport:hover{


  opacity:0.4;
}
.partieAdroite{

	width:510px;
	float: left;
	/*background-color: red;*/
	min-height: 800px;
	float:left;
	margin:20px 0 0 30px;
	color:white;
	padding-top: 20px;

}

.groupeligne1{

	width: 400px;
	height: 200px;
	overflow: hidden;
  margin-bottom: 20px;
  
}
.groupeligne3{

  width: 400px;
  height: 200px;
  overflow: hidden;
  margin-bottom: 50px;
}
.groupeligne2{

	width: 200px;
	height: 200px;
	overflow: hidden;
	float:left;
}

.progress-bar {
    width: 12px;
    height: 140px;
    padding: 4px;
    margin: 25px 0 0 0px;
    background-color: #191919;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
    -webkit-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
    -moz-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
    float: left;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
 
}
.progress-bar:before {
    content: '';
    display: block;
    position: absolute;
    width: 12px;
    height: 140px;
    background: #999;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000;
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000;
}

.progress-bar:after {
    content: '|||||||||||||';
    display: block;
    position: absolute;
    width: 12px;
    height: 140px;
    overflow: hidden;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    transform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
    -o-transform: skewX(-30deg);
    font: bold 120px/80px sans-serif;
    letter-spacing: -6px;
    color: #000;
    opacity: 0.06;
}
.blue:before { 
  background: #858585;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#858585), to(#0000ff));
  background: -moz-linear-gradient(top, #858585, #0000ff);
}
.green:before { 
  background: #858585;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#858585), to(#00ff00));
  background: -moz-linear-gradient(top, #858585, #00ff00);
}
.yellow:before { 
  background: #858585;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#858585), to(#ffff00));
  background: -moz-linear-gradient(top,#858585, #ffff00);
}
#progress{
    width: 75px;
    /*margin: auto;*/
    float: left;
}
#progress p{

 	color: white;
    font-size: 11px;
    font-style: italic;
    margin: 0 0 0 21px;
}
#progress progress{
    display: inline-block;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
         margin:0 0 0 20px;
    width: 80px;
    height: 20px;
    padding: 3px 3px 2px 3px;
    background: #333; 
    background: -webkit-linear-gradient(#2d2d2d,#444);
    background:    -moz-linear-gradient(#2d2d2d,#444);
    background:      -o-linear-gradient(#2d2d2d,#444);
    background:         linear-gradient(#2d2d2d,#444);
    border: 1px solid rgba(0,0,0,.5);
    /*border-radius: 15px;*/
    box-shadow: 0 1px 0 rgba(255,255,255,.2);   
}

/* Style de la barre pour Firefox*/
#progress progress::-moz-progress-bar{
    /*border-radius:10px;*/
    background: #ff0000;
    background: 
      -moz-repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      -moz-linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #ff0000;
    background: 
      repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #ff0000;
    background-size: 80px 20px, auto, auto;
    background-position: -80px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 
                0 -1px 0 rgba(0,0,0,.8) inset,
                0 0 2px black;
  
}
/* Style de la barre pour Chrome*/
#progress progress::-webkit-progress-value{
       /*border-radius:10px;*/
    background: #ff0000;
    background: 
      -webkit-repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      -webkit-linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #ff0000;
    background: 
      repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #ff0000;
    background-size: 80px 20px, auto, auto;
    background-position: -80px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 
                0 -1px 0 rgba(0,0,0,.8) inset,
                0 0 2px black;
    /* Code identique mais avec les bons préfixes! */

}

#progress2{
    width: 75px;
    /*margin: auto;*/
    float: left;
}
#progress2 p{

 	color: white;
    font-size: 11px;
    font-style: italic;
    margin: 0 0 0 21px;
}
#progress2 progress{
    display: inline-block;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
         margin:0 0 0 20px;
    width: 80px;
    height: 20px;
    padding: 3px 3px 2px 3px;
    background: #333; 
    background: -webkit-linear-gradient(#2d2d2d,#444);
    background:    -moz-linear-gradient(#2d2d2d,#444);
    background:      -o-linear-gradient(#2d2d2d,#444);
    background:         linear-gradient(#2d2d2d,#444);
    border: 1px solid rgba(0,0,0,.5);
   /* border-radius: 15px;*/
    box-shadow: 0 1px 0 rgba(255,255,255,.2);   
}

/* Style de la barre pour Firefox*/
#progress2 progress::-moz-progress-bar{
    /*border-radius:10px;*/
    background: #ffa500;
    background: 
      -moz-repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      -moz-linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #ffa500;
    background: 
      repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #ffa500;
    background-size: 80px 20px, auto, auto;
    background-position: -80px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 
                0 -1px 0 rgba(0,0,0,.8) inset,
                0 0 2px black;
  
}
/* Style de la barre pour Chrome*/
#progress2 progress::-webkit-progress-value{
      /* border-radius:10px;*/
    background: #ffa500;
    background: 
      -webkit-repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      -webkit-linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
     #ffa500;
    background: 
      repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
     #ffa500;
    background-size: 80px 20px, auto, auto;
    background-position: -80px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 
                0 -1px 0 rgba(0,0,0,.8) inset,
                0 0 2px black;
    /* Code identique mais avec les bons préfixes! */

}

#progress3{
    width: 75px;
    margin: auto;
    float: left;
}
#progress3 p{

 	color: white;
    font-size: 11px;
    font-style: italic;
    margin: 0 0 0 21px;
}
#progress3 progress{
    display: inline-block;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
         margin:0 0 0 20px;
    width: 80px;
    height: 20px;
    padding: 3px 3px 2px 3px;
    background: #333; 
    background: -webkit-linear-gradient(#2d2d2d,#444);
    background:    -moz-linear-gradient(#2d2d2d,#444);
    background:      -o-linear-gradient(#2d2d2d,#444);
    background:         linear-gradient(#2d2d2d,#444);
    border: 1px solid rgba(0,0,0,.5);
    /*border-radius: 15px;*/
    box-shadow: 0 1px 0 rgba(255,255,255,.2);   
}

/* Style de la barre pour Firefox*/
#progress3 progress::-moz-progress-bar{
    /*border-radius:10px;*/
    background: #ffff00;
    background: 
      -moz-repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      -moz-linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #ffff00;
    background: 
      repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
     #ffff00;
    background-size: 80px 20px, auto, auto;
    background-position: -80px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 
                0 -1px 0 rgba(0,0,0,.8) inset,
                0 0 2px black;
  
}
/* Style de la barre pour Chrome*/
#progress3 progress::-webkit-progress-value{
       /*border-radius:10px;*/
    background: #ffff00;
    background: 
      -webkit-repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      -webkit-linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #ffff00;
    background: 
      repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #ffff00;
    background-size: 80px 20px, auto, auto;
    background-position: -80px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 
                0 -1px 0 rgba(0,0,0,.8) inset,
                0 0 2px black;
    /* Code identique mais avec les bons préfixes! */

}

#progress4{
    width: 75px;
    margin: auto;
    float: left;
}
#progress4 p{

 	color: white;
    font-size: 11px;
    font-style: italic;
    margin: 0 0 0 21px;
}
#progress4 progress{
    display: inline-block;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
         margin:0 0 0 20px;
    width: 80px;
    height: 20px;
    padding: 3px 3px 2px 3px;
    background: #333; 
    background: -webkit-linear-gradient(#2d2d2d,#444);
    background:    -moz-linear-gradient(#2d2d2d,#444);
    background:      -o-linear-gradient(#2d2d2d,#444);
    background:         linear-gradient(#2d2d2d,#444);
    border: 1px solid rgba(0,0,0,.5);
    /*border-radius: 15px;*/
    box-shadow: 0 1px 0 rgba(255,255,255,.2);   
}

/* Style de la barre pour Firefox*/
#progress4 progress::-moz-progress-bar{
    /*border-radius:10px;*/
    background: #0000ff;
    background: 
      -moz-repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      -moz-linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #0000ff;
    background: 
      repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #0000ff;
    background-size: 80px 20px, auto, auto;
    background-position: -80px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 
                0 -1px 0 rgba(0,0,0,.8) inset,
                0 0 2px black;
  
}
/* Style de la barre pour Chrome*/
#progress4 progress::-webkit-progress-value{
       /*border-radius:10px;*/
    background: #0000ff;
    background: 
      -webkit-repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      -webkit-linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
     #0000ff;
    background: 
      repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #0000ff;
    background-size: 80px 20px, auto, auto;
    background-position: -80px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 
                0 -1px 0 rgba(0,0,0,.8) inset,
                0 0 2px black;
    /* Code identique mais avec les bons préfixes! */

}
#progress5{
    width: 75px;
    margin: auto;
    float: left;
}
#progress5 p{

 	color: white;
    font-size: 11px;
    font-style: italic;
    margin: 0 0 0 21px;
}
#progress5 progress{
    display: inline-block;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
         margin:0 0 0 20px;
    width: 80px;
    height: 20px;
    padding: 3px 3px 2px 3px;
    background: #333; 
    background: -webkit-linear-gradient(#2d2d2d,#444);
    background:    -moz-linear-gradient(#2d2d2d,#444);
    background:      -o-linear-gradient(#2d2d2d,#444);
    background:         linear-gradient(#2d2d2d,#444);
    border: 1px solid rgba(0,0,0,.5);
   /* border-radius: 15px;*/
    box-shadow: 0 1px 0 rgba(255,255,255,.2);   
}

/* Style de la barre pour Firefox*/
#progress5 progress::-moz-progress-bar{
    /*border-radius:10px;*/
    background: #00ff00;
    background: 
      -moz-repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      -moz-linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
     #00ff00;
    background: 
      repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
    #00ff00;
    background-size: 80px 20px, auto, auto;
    background-position: -80px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 
                0 -1px 0 rgba(0,0,0,.8) inset,
                0 0 2px black;
  
}
/* Style de la barre pour Chrome*/
#progress5 progress::-webkit-progress-value{
       /*border-radius:10px;*/
    background: #00ff00;
    background: 
      -webkit-repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      -webkit-linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #00ff00;
    background: 
      repeating-linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 0,
        rgba(255,255,255,.2) 10px, 
        rgba(255,255,255,0) 10px,
        rgba(255,255,255,0) 20px
      ),
      linear-gradient(
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,0) 60%
      ),
      #00ff00;
    background-size: 80px 20px, auto, auto;
    background-position: -80px 0, top, top;
    background-position: top right, top, top;
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 
                0 -1px 0 rgba(0,0,0,.8) inset,
                0 0 2px black;
    /* Code identique mais avec les bons préfixes! */

}
h2.titre{
    border-bottom: 1px solid #FF0000;
    border-top: 1px solid #FF0000;
    color: #FFFFFF;
    font-size: 40px;
    margin: 20px 0;
    text-align: left;


}
#articleindexB{
	min-height:620px;
	width:100%;
	overflow: hidden;
	/*background:green;*/

}
#articleindexC{
	min-height:620px;
	width:100%;
	overflow: hidden;
	/*background:yellow;*/

}
#articleindexD{
	min-height:620px;
	width:100%;
margin-top: 50px;

}
.Portofoliomarque{


  
    min-height: 450px;
    width: 100%;
    /*overflow: hidden;*/

}
#tabs{

/*overflow: hidden;;*/

}
.vigneturlweb{

	margin-top: 60px;
	background-color: white;
	width: 100%
}
/*********************/

<style type="text/css" media="screen"><!--
INPUT { color: #000; font-size: 11px; font-family: verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #EEEEEE }
SELECT { color: #000; font-size: 11px; font-family: verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #EEEEEE }
TEXTAREA { color: #000; font-size: 11px; font-family: verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #EEEEEE }
.txterror { color:#FFFFFF; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
.txtform { color: #FFFFFF; font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
--></style>


h1.web{

	    border-bottom: 1px solid #FF0000;
    border-top: 1px solid #FF0000;
    color: #FFFFFF;
    font-size: 20px;
    margin: 20px 0;
    text-align: left;
}
#tabs_container{
  /*padding: 40px;*/
   margin-left: auto;
    margin-right: auto;
    min-height: 350px;
    overflow: hidden;
    position: relative;
    width: 960px;

}
#tabs-portofolioweb{
  color: grey;
  font-size: 20px;
  font font-style: bold;
   overflow: hidden;
}
#tabs-portofolioarchi{
  color: red;
  font-size: 20px;
  font font-style: bold;
}

#tabs-portofolioprint{
  color: green;
  font-size: 20px;
  font font-style: bold;
}

#tabs-portofoliovideo{
  color: blue;
  font-size: 20px;
  font font-style: bold;
}

h2.soustitre{

  color: #ff0000;
  font-size: 17px;
  font-style: bold;
}

p.soustitre{

  color: #ffffff;
  font-size: 12px;
  font-style: italic;
}

/********************





html{
  background: rgb(101, 92, 137);
    font-family: "Lato", sans-serif;
}
a:active,a:focus {
  outline: expression(hideFocus='true');
}

p {
  margin-bottom: 20px;
}

#wrapper {
  width: 980px;
  margin: 0 auto;
  background-color: yellow;
  /*margin-top: 100px;*/
}
#tabs,#tabs2,#tabs3,#tabs4,#tabs5 {
  width: 100%;
  margin: 0 auto;
  /*margin-bottom: 40px;*/
}

/*#tabs li,#tabs2 li,#tabs3 li,#tabs4 li,#tabs5 li {
  float: left;
  margin-right: 2px;*/
}

/*#tabs li a,#tabs2 li a,#tabs3 li a,#tabs4 li a,#tabs5 li a {
  display: block;
  padding: 17px 30px;
  background: #544f6b;
  text-decoration: none;
  color: #8478B3;
}*/

/*#tabs li a:hover,#tabs2 li a:hover,#tabs3 li a:hover,#tabs4 li a:hover,#tabs5 li a:hover {
  background: rgb(78, 74, 99);
}*/

#tabs_container {
  /*padding: 40px;*/
  overflow: hidden;
  position: relative;
  background: white;
}

#tabs_container div {
  /*margin-right: 40px;*/
}
#groupe3{
  width:490px;
  float:left;
}
.transition {
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;

  -webkit-transition-delay: .3s;
  -moz-transition-delay: .3s;
  -o-transition-delay: .3s;
  -ms-transition-delay: .3s;
  transition-delay: .3s;
}

.make_transist {
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.hidescale {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -o-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  filter: alpha(opacity=0);
  opacity: 0;
}

.showscale {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;

  -webkit-transition-delay: .3s;
  -moz-transition-delay: .3s;
  -o-transition-delay: .3s;
  -ms-transition-delay: .3s;
  transition-delay: .3s;
}

.hideleft {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}

.showleft {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -o-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;

  -webkit-transition-delay: .3s;
  -moz-transition-delay: .3s;
  -o-transition-delay: .3s;
  -ms-transition-delay: .3s;
  transition-delay: .3s;
}

.hidescaleup {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}

.showscaleup {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;

  -webkit-transition-delay: .3s;
  -moz-transition-delay: .3s;
  -o-transition-delay: .3s;
  -ms-transition-delay: .3s;
  transition-delay: .3s;
}

.hideflip {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;

  -webkit-transform: rotatey(-90deg) scale(1.1);
  -moz-transform: rotatey(-90deg) scale(1.1);
  -o-transform: rotatey(-90deg) scale(1.1);
  -ms-transform: rotatey(-90deg) scale(1.1);
  transform: rotatey(-90deg) scale(1.1);

  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.showflip {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;

  -webkit-transition-delay: .3s;
  -moz-transition-delay: .3s;
  -o-transition-delay: .3s;
  -ms-transition-delay: .3s;
  transition-delay: .3s;

  -webkit-transform: rotatey(0deg) scale(1);
  -moz-transform: rotatey(0deg) scale(1);
  -o-transform: rotatey(0deg) scale(1);
  -ms-transform: rotatey(0deg) scale(1);
  transform: rotatey(0deg) scale(1);

  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.tabulous_active {
  background: white !important;
  color: #655c89 !important;
}

.tabulousclear {
  display: block;
  clear: both;
}