<style type="text/css">

/*-------------------------------------------------------------------------- Defaut ---------------------------------------------------------------------------*/
.reset {
	
}
@font-face {
      font-family: 'icone';
      src: url('../font/fontello.eot?81772622');
      src: url('../font/fontello.eot?81772622#iefix') format('embedded-opentype'),
           url('../font/fontello.woff?81772622') format('woff'),
           url('../font/fontello.ttf?81772622') format('truetype'),
           url('../font/fontello.svg?81772622#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }
	

@font-face {
    font-family: 'regular';
    src: url('../font/roboto.eot');
    src: url('../font/roboto.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto.woff') format('woff'),
         url('../font/roboto.ttf') format('truetype'),
         url('../font/roboto.svg#Roboto') format('svg');
}

@font-face {
    font-family: 'bold';
    src: url('../font/roboto_b.eot');
    src: url('../font/roboto_b.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto_b.woff') format('woff'),
         url('../font/roboto_b.ttf') format('truetype'),
         url('../font/roboto_b.svg#Roboto') format('svg');
}

@font-face {
    font-family: 'light';
    src: url('../font/roboto_l.eot');
    src: url('../font/roboto_l.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto_l.woff') format('woff'),
         url('../font/roboto_l.ttf') format('truetype'),
         url('../font/roboto_l.svg#Roboto') format('svg');
}



* {
   margin:0;
   padding:0;
   font-family:Verdana, Geneva, sans-serif;
   outline: 0;
   border: 0;
   font-family:'light', Arial, sans-serif;
   font-size:16px;
   box-sizing: border-box;	
}
.menu_couleur {
position:fixed;
height:70px;
width:70px;
background:#FFF;
overflow:hidden;
opacity:0;
right:0;
top:0;
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
padding:10px;
}

.effet_menu_couleur {
height:250px;
width:200px;
opacity:1;
}
.typo1 {
  font-family: 'regular', arial;
  font-size: 2rem;
  color: #000;
  position: absolute;
  right: 10px;
  top: 10px;
}

.typo2 {
  font-family: 'bold', arial;
  font-size: 2rem;
  color: #000;
  position: absolute;
  right: 10px;
  top: 70px;
}

.typo3 {
  font-family: 'light', arial;
  font-size: 2rem;
  color: #000;
  position: absolute;
  right: 10px;
  top: 130px;
}

.clearer {
	clear:both;
	height:0px;
}

h1 {
	font-size:0px;
	text-indent:-9999px;
	position:absolute;
}

.carrer_couleur {
width:30px;
height:25px;
border:#ccc 1px solid;
position:relative;
z-index:100;
}

#carrer0 {
background:#FFFFFF;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer1 {
background:#00a193;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer2 {
background:#e83f2f;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer3 {
background:#f2ecb9;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer4 {
background:#333333;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer5 {
background:;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer6 {
background:;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer7 {
background:;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

li {
list-style-type: none;
}



/* ----------------- Contenu --------------*/
section {
max-width:1180px;
min-width:100px;
display:block;
margin:auto;
position:relative;
}

.contenu section {
min-height:100px;
}

.colonne1, .colonne2, .colonne3, .colonne4, .colonne5, .colonne6 {
overflow: hidden;
padding:0 20px;
}

.colonne1 .bloc, .colonne2 .bloc, .colonne3 .bloc, .colonne4 .bloc, .colonne5 .bloc, .colonne6 .bloc {
margin-bottom:30px;
overflow: hidden;
}


.colonne1 .bloc {
width:calc(100% - 30px);
}

.colonne2 .bloc {
width:calc(50% - 30px);
}

.colonne3 .bloc {
width:calc(33.333333% - 30px);
}

.colonne4 .bloc {
width:calc(25% - 30px);
}

.colonne5 .bloc {
width:calc(20% - 30px);
}

.colonne6 .bloc {
width:calc(17% - 30px);
}

.colonne6 .bloc:last-child {
width:calc(15% - 30px);
}

.bloc {
padding:20px;
margin:0 0 30px 0;
background:none;
float:left;
display:block;
margin:0 15px;
min-height:50px;
}

.bloc_transparent {
  display: block;
}

.bloc_image {
width:calc(100% - 30px);
background-position:center center;
background-repeat:no-repeat;
background-size:contain;
}


.bg_select {

}


select {	
color:#FFFFFF;
background-color:#00a193;
width: auto;
padding: 10px 50px 10px 10px;
border: none;
border: none;
border-radius: 0px;
text-transform:uppercase;
font-size:1.3rem;
}


h2, h2 span {
font-size:1.5rem;
font-family:'regular', arial;
text-transform:uppercase;
color:#e83f2f;
font-weight:inherit;
text-align:center;
}

h3, h3 span  {
font-size:1.2rem;
color:#e83f2f;
font-weight:inherit;
text-align:center;
}

h3 span  {
font-family:'bold', arial;
}


h4, h4 span  { 
 font-size:1.2rem;
}
 
 
p {
margin:0 0 10px 0;
line-height:22px;
color:#333333;
}

p span {
font-family:'bold', arial;
}


</style>