<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/Asap-Regular.eot');
    src: url('../font/Asap-Regular.eot?#iefix') format('embedded-opentype'),
         url('../font/Asap-Regular.woff') format('woff'),
         url('../font/Asap-Regular.ttf') format('truetype'),
         url('../font/Asap-Regular.svg#Roboto') format('svg');
}

@font-face {
    font-family: 'bold';
    src: url('../font/Asap-Bold.eot');
    src: url('../font/Asap-Bold.eot?#iefix') format('embedded-opentype'),
         url('../font/Asap-Bold.woff') format('woff'),
         url('../font/Asap-Bold.ttf') format('truetype'),
         url('../font/Asap-Bold.svg#Roboto') format('svg');
}

@font-face {
    font-family: 'light';
    src: url('../font/Asap-Italic.eot');
    src: url('../font/Asap-Italic.eot?#iefix') format('embedded-opentype'),
         url('../font/Asap-Italic.woff') format('woff'),
         url('../font/Asap-Italic.ttf') format('truetype'),
         url('../font/Asap-Italic.svg#Roboto') format('svg');
}



* {
   margin:0;
   padding:0;
   font-family:Verdana, Geneva, sans-serif;
   outline: 0;
   border: 0;
   font-family:'regular', Arial, sans-serif;
   font-size:14px;
   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;
z-index:9999999;
}

.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:#5483c1;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer2 {
background:#06326d;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer3 {
background:#e9e9e9;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer4 {
background:#ededed;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer5 {
background:#333;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer6 {
background:#edf3fc;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer7 {
background:#a5c5ef;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

li {
list-style-type: none;
}

p {
margin:0 0 10px 0;
line-height:20px;
}

/* ----------------- Contenu --------------*/
section {
max-width:1180px;
min-width:100px;
display:block;
margin:auto;
position:relative;
}

.no_site, .bt_fermer_mobile {
display:none;
}


.bloc {
padding:20px;
background:none;
display:flex;
float:left;
margin:0 0 30px 0;
min-height:50px;
width:100%;
flex-direction: column;
}

.bloc_image {
width:calc(100%);
background-position:center center;
background-repeat:no-repeat;
background-size:contain;
min-height:100px;
}

</style>