/*CSS by jblemonnier*/
/**/

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

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

}

@font-face {
    font-family: 'ITC Avant Garde Gothic Std';
    src: url('webfontkit_ITC/itcavantgardestd-bk-webfont.eot');
    src: url('webfontkit_ITC/itcavantgardestd-bk-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfontkit_ITC/itcavantgardestd-bk-webfont.woff') format('woff'),
         url('webfontkit_ITC/itcavantgardestd-bk-webfont.ttf') format('truetype'),
         url('webfontkit_ITC/itcavantgardestd-bk-webfont.svg#ITCAvantGardeStdBkRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ITCAvantGardeStdXLt';
    src: url('webfontkit_ITC/itcavantgardestd-xlt-webfont.eot');
    src: url('webfontkit_ITC/itcavantgardestd-xlt-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfontkit_ITC/itcavantgardestd-xlt-webfont.woff') format('woff'),
         url('webfontkit_ITC/itcavantgardestd-xlt-webfont.ttf') format('truetype'),
         url('webfontkit_ITC/itcavantgardestd-xlt-webfont.svg#ITCAvantGardeStdXLtRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*$$$$$$$$$$$$$               $$$$$$$$$$$*/
/*                 CSS Reset               */
/*$$$$$$$$$$$$$              $$$$$$$$$$$*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight: 400;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
section, header{
	display: block;
}
a:visited{color:#333}

.clr{
    clear: both;
}

/*$$$$$$$$$$$$$           $$$$$$$$$$$*/
/*                Style               */
/*$$$$$$$$$$$$$           $$$$$$$$$$$*/


*{
    margin:0;
    padding:0;
}
body{
    overflow-x:hidden;
    background: #FFF;
    font-family: Open sans, Fabrica, Helvetica;
    font-size: 18px;
    color:white;

}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}

/*$$$$$$$$$$$$$           $$$$$$$$$$$*/
/*                 TOP               */
/*$$$$$$$$$$$$$           $$$$$$$$$$$*/
.top a{
    position:fixed;
    bottom:0px;
    right:8%;
    /* width:40px; */
    /* height:40px; */
    padding: 20px;
    line-height: 23px;
    background: #fff;
    color:#333;
    font-size:13px;
    text-align: center;
    opacity:0.8;
    z-index:90;
    
        -webkit-transition: all 400ms ease-in-out;
		-moz-transition: all 400ms ease-in-out;
        -ms-transition: all 400ms ease-in-out;
        -o-transition: all 400ms ease-in-out;
		transition: all 400ms ease-in-out;
        
}
.top a:hover{
    background:#333;
    color:white;
    cursor:pointer;
}

/*$$$$$$$$$$$$$           $$$$$$$$$$$*/
/*              HEADER                */
/*$$$$$$$$$$$$$           $$$$$$$$$$$*/

.head{
    margin-top:50px;
    margin-bottom:65px;
}

h1{
    display:block;
    background: url(../images/logo_2.png) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    max-width: 450px;
    height: 50px;
    margin:0 auto;
    margin-top: 25px;
    text-indent:-5000px;
    margin-bottom: 10px;
}
.head > h2{
    width:362px;
    font-family: 'ITCAvantGardeStdXLt';
    font-size: 28px;
    margin:0 auto;
}
.head h2 .grey{
    color: #888;
}

/*$$$$$$$$$$$$$           $$$$$$$$$$$*/
/*              SECTIONS            */
/*$$$$$$$$$$$$$           $$$$$$$$$$$*/

.container{
    margin-right: auto;
    margin-left: auto;
    max-width:1200px;
    width: 100%;
}
.section_1,.section_2,.section_3,.section_4{
    margin:0px;
    height:auto;
    width:100%;
    float:left;
    overflow:hidden;
}
.section_2,.section_3,.section_4{
    padding:0px;
    padding-top: 100px;
    
}
.section_1{
    color:#333;
    background:#F7F7F7;
    /* border-top: 8px solid #666; */
    padding-bottom: 40px;
}
.section_2{
    color:#333;
    background: #EEE;
    padding-bottom: 80px;
    /* padding-top: 70px; */
}
.section_3{
    color:#333;
    background: #F7F7F7;
    padding-bottom: 80px;
   
    min-height: 1350px;
}
.section_4{
    color:#333;
    background:#EEEEEE  /*#FFEB00*/;
    height: 100%;
    padding-bottom: 100px;
}
.section_1 ul,.section_2 ul,.section_3 ul,.section_4 ul{
    list-style:none;
    margin: 13px 0px 0px 0px;
}
.giant{
    clear: both;
    display:block;
    height: 450px;
    background: #F7F7F7 url(../images/bkg/ble2.jpg) no-repeat center center; 
  
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
    vertical-align: middle;
}
.giant h2{
    position: relative;
    top: 185px;
    width: 300px;
    font-family: 'ITCAvantGardeStdXLt';
    font-size: 28px;
    color: #FFFFFF;
    /* text-shadow: 1px 1px 1px #C0C0C0; */
    vertical-align: middle;
    margin:0 auto;
    text-align: center;
    padding: 15px;
    border: 1px solid #FFFFFF;
}
/*Nav*/
.section_1 ul.nav,.section_2 ul.nav,.section_3 ul.nav,.section_4 ul.nav{
    list-style:none;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height:75px;
    /* overflow: hidden; */
}

/*Arrow*/
.arrow{
    clear: both;
    display:block;
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    opacity:0.2;
    background: url(../images/fleche_grey.png) no-repeat top left;
     
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out;
}
.arrow:hover{
    opacity:0.8;
}
/*********************************************************/
/*$$$$$$$$$$$$$ Menu de NAVigation $$$$$$$$$$$$$$$$$$$$$$*/
/*********************************************************/
.container_nav{
    display: block;
    position: relative;
    height: 75px;
    background-color: #F7F7F7;
    width: 100%;
    z-index: 50;
	
    font-family: 'ITC Avant Garde Gothic Std', Arial, sans-serif;
}
.nav {
    position:relative;
    padding: 0;
    margin: 20px auto;
    width: 500px;
    z-index: 50;
}
.nav li{
    float: left;
    width: 25%;
    height: 75px;
    overflow: visible;
    display: block;
    background: #fff;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 4px;
	-webkit-transition: background 400ms ease-in-out;
-moz-transition: background 400ms ease-in-out;
-ms-transition: background 400ms ease-in-out;
-o-transition: background 400ms ease-in-out;
transition: background 400ms ease-in-out;

}

.nav li:last-child{
    margin-bottom: 0px;
}

.nav li a{
    text-align: left;
    display: block;
    width: 100%;
    height: 100%;
    color: #777;
    position:relative;
}

.ca-icon{
    font-family: 'HeydingsIconsRegular', cursive;
    font-size: 20px;
    text-shadow: 0px 0px 1px #333;
    line-height: 105px;
    position: absolute;
    width: 90px;
    left: 50%;
    text-align: center;
    
       -webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
        
}
.ca-content{
    position: absolute;
    left: 10px;
    width: 130px;
    height: 60px;
    top: 15px;
}
.ca-main{
    font-size: 1.2em;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.ca-sub{
    font-size: 14px;
    color: #666;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.nav li:hover{
    background-color: #333;
}
.nav li:hover .ca-icon{
    color: #F36767;
    font-size: 150px;
    opacity: 0.7;
    left: 110px;
    width:180px;
    -moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.nav li:hover .ca-main{
    color: #FF5454;
    opacity: 0.9;
}
.nav li:hover .ca-sub{
    color: #fff;
    opacity: 0.8;
}
/*CHECKED*/
.nav li.checked{
    background-color: #585858 /*#727272; */;}
.nav li.checked .ca-icon{
    color: #4ED7FF;
    font-size: 150px;
    opacity: 0.2;
    left: 40%;
    width:180px;
        -moz-transform: rotate(20deg);
        -webkit-transform: rotate(20deg);
        -o-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
    transform: rotate(20deg);
}
.nav li.checked .ca-main{
    color: #4ED7FF; /*Couleur du point*/
    opacity: 0.8;
}
.nav li.checked .ca-sub{
    color: #fff;
    opacity: 0.8;
}
/*ACTIVE LOGO NAV*/
.nav li#logo {
    width:0%;
    opacity:0;
       
    /* -webkit-transition: all 400ms ease-in-out; */

    -moz-transition: all 100ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;

    /* transition: all 100ms ease-in-out; */
}
.nav li#logo.active{
    width:8%;
    opacity:1;
}
.nav li#logo h2{
    height: 75px;
    text-indent: -6000px;
    background: url(../images/logo_jb.png) no-repeat center center;
    background-size: 90%;
}

.nav li.norm.little{
    width: 23%;
}

#up{
    color:grey;  
}
#up:hover{
    color:black;
}

#down{
    color:#49A4AA;  
}
#down:hover{
    color:black;
}

/************************************************/
/*$$$$$$$$$$$$$ Paragraphe $$$$$$$$$$$$$$$$$$$$$$*/
/*************************************************/

.presentation{
    clear:both;
    padding-left: 15px;
    border-left: #F36C6C solid 6px;
    margin: 0 10%;
    margin-bottom: 80px;
}
.presentation h2{
    font-size:50px;
    margin-bottom: 20px;
    font-family: 'ITC Avant Garde Gothic Std'; 
    color: #666;
}
.presentation p{
    line-height:25px;
    color: #6B6B6B;
}
#bio p {
    color: #6B6B6B;
    margin-bottom:20px;
}

/* Compétences Graphiques*/
.grey{
    color:#333;
    opacity:0.3;
}
.outils{
    display: block;
    /* width: 100%; */
    margin: 0 10%;
    margin-bottom: 40px;
    margin-top: 20px;
    height: 100%;
}
.colonne_1{
    clear: both;
    display:block;
    width: 30%;
    /* margin-left:9%; */
    float:left;
    /* clear: both; */
}
.a-btn{
    width: 70%;
    height: 60px;
    line-height: 52px;
    text-align: center;
    min-width: 220px;
    display:block;
    position:relative;
    margin:10px 0px;
    background: #66CDE4;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
#open2{
    background: #57DBA7;
}
#open3{
    background: #37CEA3;
}
#open4{
    background: #FA8467;
}
.a-btn-text{
    width: 100%;
    padding-top:5px;
    display:block;
    font-size:21px;
    white-space:nowrap;
    text-shadow:0px 1px 1px rgba(00,00,00,0.3);
    color:white;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
    cursor: crosshair;
}
.a-btn-slide-text{
    position:absolute;
    height:100%;
    top:0px;
    right:52px;
    width:0px;
    background:#63707e;
    text-shadow:0px -1px 1px #363f49;
    color:#fff;
    font-size:32px;
    font-weight: bold;
    white-space:nowrap;
    text-transform:uppercase;
    text-align:left;
    text-indent:10px;
    overflow:hidden;
    line-height: 79px;
    -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    -webkit-transition:width 0.3s linear;
    -moz-transition:width 0.3s linear;
    -o-transition:width 0.3s linear;
    transition:width 0.3s linear;
}
.a-btn-icon-right{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:52px;
    border-left:1px solid #fff;
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width:38px;
    height:38px;
    opacity:0.7;
    position:absolute;
    left:50%;
    top:50%;
    margin:-20px 0px 0px -20px;
    background:transparent url(../images/arrow_right.png) no-repeat 50% 55%;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn:hover{
    /* padding-right:220px; */
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
}
.a-btn:hover .a-btn-text{
    font-weight:normal;
    text-shadow:0px 1px 1px rgba(00,00,00,0.3);
    color: #464646;
}
.a-btn:hover .a-btn-slide-text{
    width:140px;
}
.a-btn:hover .a-btn-icon-right span{
    opacity:1;
    top:60%;
        
        -moz-transform: scale(1) rotate(180deg) translate(0px, 0px) skew(0deg, 0deg);
		-webkit-transform: scale(1) rotate(180deg) translate(0px, 0px) skew(0deg, 0deg);
        -o-transform: scale(1) rotate(180deg) translate(0px, 0px) skew(0deg, 0deg);
        -ms-transform: scale(1) rotate(180deg) translate(0px, 0px) skew(0deg, 0deg);
        transform: scale(1) rotate(180deg) translate(0px, 0px) skew(0deg, 0deg);       
}

.volet{
    padding-top:10px;
    display:block;
    width: 70%;
    min-width: 470px;
    float:left;
    height: 100%;
    min-height: 290px;
    font-weight:400;
    margin-bottom: 50px;
    /* clear: both; */
}
.hide{
    display: block;
    z-index:800;
    font-weight:400;
    font-size: 21px;
    color: #777;
    height: 100%;
    min-height: 270px;
    padding: 20px;
	box-sizing: border-box;
    background-color: #fff;
    border-left:#F36C6C solid 6px;
    line-height:20px;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
    
}

.hide p{
    margin:10px 5px 5px 15px;
    line-height:30px;
	font-size:17px;
    
}
#hide1{
	border-left: #66CDE4solid 6px;
}
#hide2{
	border-left: #57DBA7 solid 6px;
}
#hide3{
	border-left: #37CEA3 solid 6px;
}
#hide4{
	border-left: #FF804F solid 6px;
}
.hide h3,.open h3 {
    color:#F36C6C;
    margin-bottom: 15px;
}


.open{
    font-size: 21px;
    display: block;
    color: #777;
    line-height:20px;
    height: 100%;
    min-height: 270px;
    padding: 20px;
    box-sizing: border-box;
    border-left: #F36C6C  solid 6px;
    
        -webkit-transition: all 500ms ease-in-out;
		-moz-transition: all 500ms ease-in-out;
        -ms-transition: all 500ms ease-in-out;
        -o-transition: all 500ms ease-in-out;
		transition: all 500ms ease-in-out;
        
 
    background: #fff;
}

.open p{
    margin:10px 5px 5px 15px;
    line-height:30px;
    font-size: 17px;
}


.graphique{
    height: 60px;
    margin: 0 10%;
    margin-top: 100px;
    clear:both;  
    margin-bottom: 30px;
}

.graphique h2{
    font-family: ITC Avant Garde Gothic Std, Helvetica, Arial, sans-serif;
    font-size: larger;
    color: #555;
    display: block;
    background-color: #fff;
    padding: 9px;
    margin-bottom: 120px;
    text-indent: 10px;
}

.outils h2{
    font-family: ITC Avant Garde Gothic Std, Helvetica, Arial, sans-serif; font-size: larger; 
    color: #555; display: block; background-color: #FFF; 
    padding: 9px; 
    /* margin-bottom: 120px; */
    /* font-family: ITCAvantGardeStdXlt; */
    margin-bottom:45px;
    text-indent: 10px;
}


/************************************************************/
/*$$$$$$$$$$$$$ Graphique Compétences $$$$$$$$$$$$$$$$$$$$$$*/
/************************************************************/
.stat {
	position:absolute;
float: left;
z-index:30;
	/* display: none; */
}
.stat li{
margin-bottom:170px;
color: #E2E2E2;
}

.content_graph{
    position: relative;
    margin:0 auto;
    max-width:1400px;
    height:550px;
}
section.graph{
    
    position:relative;
    display: block;
    width:80%;
    max-width:1200px;
    margin: 0 auto;
    height:420px;
    border-left: 6px solid #FFFFFF;
    border-bottom: 6px solid #FFFFFF;
    
}
.container_barre{
    float:left;
    display:block;
    height:420px;
    width:12%;
    overflow:hidden;
    margin-right:0.5%;
    -webkit-transition: all 1s ease-in-out;
		-moz-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
		transition: all 1s ease-in-out;
}

.container_barre span.slide{
    height: 100% !important;
}

.container_barre span{
    display:block;
    -webkit-transition: all 1s ease-in-out;
		-moz-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
		transition: all 1s ease-in-out;
    
}
.barre{
    position:relative;
    display:block;
    float: left;
    width:100%;
    height:100%;
    z-index:20;
    -webkit-transition: all 1s ease-in-out;
		-moz-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
		transition: all 1s ease-in-out;
    color:#ffffff;
    
    cursor: crosshair;
}


.barre h3{
    font-family: 'Quattrocento Sans', sans-serif;
    position: relative;
    z-index: 10;
    text-align:center;
    font-weight: 400;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.41);
    top:20px;
}

.graph img{
    position: absolute;
width: 100%;
height: 100%;
z-index: 2;
left: 0;
top: 0;
}

#barre-1{
 background-color: #33ABE1;
}
#barre-2{
   background-color: #62DCE8; 

}
#barre-3{
background-color: #4AF0D4;
}
#barre-4{
background-color:#47DE95;
}

#barre-5{
background-color:#82EBA6;
}
#barre-6{
background-color:#FFFB9C;
}
#barre-7{
background-color:#FFC78B;
}

#barre-8{
background-color:#FF876E;
}

.barre:hover{
    background-color: #AFAFAF !important;
    color:#F2F2F2;
}
.barre:active{
    background-color:rgba(0, 0, 0, 0.2);
    color:#F2F2F2;
}

.text span{
    font-weight: 400;
    color:#F36C6C;
}
.text{
    position: relative;
    top:15px;
    height:10px;
    z-index:30;
    font-weight: 100;
    color:#2E2E2E;
}
/************************************************/
/*$$$$$$$$$$$$$ Camembert $$$$$$$$$$$$$$$$$$$$$$*/
/************************************************/
#chart {
    
}
.none{
    display:none;
}
#chart {
    position:relative;
    top:-100px;
    left:17%;
    display: block;
    cursor: pointer;
}

#chartData {
    float:left;
  width: 262px;
  margin: 60px -130px 0 105px;
  border-collapse: collapse;
  /*box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);*/
  background:#333;
}

#chartData th, #chartData td {
  padding: 0.6em;
  border: 6px solid #fff;
  text-align: left;
}

#chartData th {
  border-bottom: 6px solid #468996;
  text-transform: uppercase;
}

#chartData td {
  cursor: pointer;
}

#chartData td.highlight {
  background: #222;
}

#chartData tr:hover td {
  background: #1AC;
  color:white;
}


/************************************************/
/*$$$$$$$$$$$$$ Formulaire de Contact $$$$$$$$$$*/
/************************************************/

#contact{
	/* width: 100%; */
	display: block;
	max-width: 1200px;
	margin: 0 10%;
	/* margin:0 auto; */
	box-sizing: border-box;
	color: #444;
}
#contact h2{
	display:block;
	font-size:50px;
	font-weight: 200;
	margin-bottom:15px;
}
#contact label{
	display: block;
	width: 22%;
	min-width: 170px;
	height:50px;
	font-size: 35px;
	line-height: 52px;
	float:left;
	
	color: #444;
}
#contact input{
	display: block;
	width: 78%;
	text-indent: 15px;
	height: 50px;
	line-height:58px;
	font-size: 25px;
	color:#666;
	font-family: ITC Avant Garde Gothic Std;
	border:none;
}
#contact textarea{
	display: block;
	width: 78%;
	height: 150px;
	font-size: 25px;
	/* line-height: 55px; */
	box-sizing: border-box;
	color:#666;
	font-family: ITC Avant Garde Gothic Std;
	padding: 2%;
	border:none;
	/* text-indent: 15px; */
}

#contact input[type="submit"]{
	display: block;
	width: 22%;
	text-align: center;
	height:50px;
	line-height: 52px;
	background:white;
	text-indent: initial;
	font-family: ITC Avant Garde Gothic Std;
	border:none;
	cursor:pointer;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
#contact input[type="submit"]:hover{
	
	background:#333;
	font-family: ITC Avant Garde Gothic Std;
	color:white;
	
}
#contact span{
	display: inline-block;
	margin-top: 15px;
	font-weight: 100;
}

/************************************************/
/*$$$$$$$$$$$$$ Footer $$$$$$$$$$$$$$$$$$$$$$$$$*/
/************************************************/


footer{
    clear:both;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* min-height: 430px; */
    height:100%;
    color:#fff;
    /* padding-left: 0%; */
    overflow: visible;
    /* background-image:url(../images/bkg/outlets.png); */
    /* background-color: #FFF; */
}
.container_footer{
	width:100%;
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 90px;
	padding-bottom: 80px;
	box-sizing: border-box;
}

.colonne{
    display: block;
    float: left;
    width: 48%;
    min-width: 445px;
    padding: 2%;
    /* box-sizing: border-box; */
    /* border: 1px dashed #FFEB00; */
    /* margin-left: 6%; */
    min-height: 230px;
    margin-right: 2%;
    color: #FFF;


    background-color: #C0C0C0;
    /* background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); */
background: -moz-linear-gradient(left,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 100%);

    /* background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.2))); */

    /* background: -webkit-linear-gradient(left,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%); */
background: -o-linear-gradient(left,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%);
background: -ms-linear-gradient(left,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(left,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#33000000',GradientType=1 );
}

#social{
    /* margin-left: 2%; */
    margin-right: 2%;
    width: 24%;
    min-width: 215px;
}

.postal{
    width: 50%;
    float:left;
}
.phone{
    width: 48%;
    float: left;
    margin-left: 2%;
    
}
#autres{
	width: 12%;
	min-width: 140px;
	margin-right: 0%;
}

.colonne h3{
    font-family: 'HeydingsIconsRegular';
    float:left;
    font-size: 45px;
    line-height: 38px;
    color:#FFEB00;
    opacity:1;
    /* text-shadow: 1px 1px 0px #A8A8A8; */
     -webkit-transition: all 250ms ease-in-out;
		-moz-transition: all 250ms ease-in-out;
        -ms-transition: all 250ms ease-in-out;
        -o-transition: all 250ms ease-in-out;
		transition: all 250ms ease-in-out;

}
.colonne h3:hover{
    font-size: 110px;
    color:white;
    -moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
opacity:0.9;
    
}
.colonne h2{
    margin-top: 55px;
    margin-bottom: 5px;
    font-family: 'ITCAvantGardeStdXLt';
    color: #FFF;
}
.colonne p{
      font-size: 18px;
      color: #777;
      line-height: 24px;
}
.colonne a{
      font-size: 45px;
      color: #FFEB00;
      font-family: ITCAvantGardeStdXLt;
      display: block;
      margin-top: 0px;
}
.postal a {
    margin-top: 30px;
}
.colonne a:hover{
	color:#FFF;
}
.logo{
    position: relative;
top: -40px;
left: 330px;
clear: both;
}




#social a{
    font-family: 'ITCAvantGardeStdXLt';
    font-size: 45px;  
}
#social a:hover{
    color:#fff;
}

#autres a{
    font-family: 'ITCAvantGardeStdXLt';
    font-size: 45px;
    clear: both;
}
#autres a:hover{
    color:#fff;
}

.design{
    position:relative;
    display: block;
    clear:both;
    color:#666;
    font-size: 16px;
    font-weight: 100;
    top: 42px;
}


​
/***************                ************************/
/*$$$$$$$$$$$$$ Responsive Style $$$$$$$$$$$$$$$$$$$$$$*/
/***************        *       ************************/

@media (min-width: 1200px) {
.container{max-width:1200px}
}
@media (max-width: 1200px){
}
@media (max-width: 1165px) {
body { font-size: 0.9em!important;}
#autres{margin-top:20px}
}

@media (max-width: 928px) {
.volet{width:100%;}
}
@media (max-width: 768px) {
    .nav li .ca-icon{left:100px;}
    #chart{left:0%}
    .ff-container {width:none}
    section.graph{
    left:0;
    width:100%;
    /* height:360px; */}
    .ca-main{
    font-size: 1em;}
    .nav li:first-child {margin-left:0px;}
    .nav li .ca-icon {left: 80px;}
	.colonne{width: 100% !important;margin-bottom: 20px !important;min-width: initial;}
	#autres{margin-top:0px}
    
}
@media (max-width: 480px) {
body { font-size: 0.8em!important; }
.section_2, .section_3, .section_4{padding-top:135px;}
.nav li#logo{display:none}
.nav li.norm{width:50%!important}
.nav li{height:65px;margin-left:0%;}
.ff-container {width:14%;}
section.graph{
    left:0;
    width:100%;
    height:260px;
}
.colonne{width:90%; }
.colonne_1{width: 100%;}
.outils{margin-top:190px}
.volet{width:100%;min-width: initial;}
.presentation{
    /* width:100%; */
    margin: 0;
}
div[class^=disc]{
    display:none;
}
.content_graph{height: 400px;}
#chart{clear:both;width:40%; left:0%; top:0%}
ul.ff-items{margin-left:0px!important}
.ff-items{width:480px!important;}
.ca-main{
    font-size: 1.4em;}
      .nav li .ca-icon {
left: 100px;
}
#contact input{width:100%}
#contact textarea{width:100%}
.a-btn{width: 50%;min-width: initial;float: left;margin: initial;}
.a-btn-text{font-size:16px}
}