/*************** Couleurs ****************/
/*
Bleu FACiLe : #49c4ed; - hover : #38b7e0;
Rouge FACiLe : #e22537; - hover : #dc1e30;
*/

/*************** Polices *****************/
@font-face {
  font-family: 'OpenSans';
  src:  url('../fonts/OpenSans.eot');
  src:	url('../fonts/OpenSans.eot?#iefix') format('embedded-opentype'),
		url('../fonts/OpenSans.woff2') format('woff2'), 
		url('../fonts/OpenSans.woff') format('woff'), 
		url('../fonts/OpenSans.ttf')  format('truetype'), 
		url('../fonts/OpenSans.svg#OpenSans') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family:'Purisa';
    src: url('../fonts/Purisa Bold Oblique.eot');
	src: url('../fonts/Purisa Bold Oblique.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Purisa Bold Oblique.woff2') format('woff2'),
		url('../fonts/Purisa Bold Oblique.woff') format('woff'),
		url('../fonts/Purisa-BoldOblique.ttf')  format('truetype'), 
		url('../fonts/Purisa Bold Oblique.svg#Purisa Bold Oblique') format('svg');
	font-weight: bold;
  font-style: oblique;
}

@font-face {
      font-family: 'faux';
      src: url('../fonts/facil.eot');
      src: url('../fonts/facil.eot?#iefix') format('embedded-opentype'),
           url('../fonts/facil.woff2') format('woff2'),
           url('../fonts/facil.woff') format('woff'),
           url('../fonts/facil.ttf') format('truetype'),
           url('../fonts/facil.svg#faux') format('svg');
      font-weight: normal;
      font-style: normal;
}
/**************** Sprite *****************/
/* Généré avec Stiches (https://github.com/draeton/stitches) */
/* Détail: il faut ajuster l'url après avoir regénéré le png */
.sprite {
    background-image: url(../img/spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}


.sprite-100x100 {
    width: 100px;
    height: 100px;
    background-position: -5px -5px;
}

.sprite-adlq {
    width: 100px;
    height: 100px;
    background-position: -115px -5px;
}

.sprite-diaspora {
    width: 100px;
    height: 100px;
    background-position: -225px -5px;
}

.sprite-el-globe {
    width: 100px;
    height: 100px;
    background-position: -335px -5px;
}

.sprite-el-phone {
    width: 100px;
    height: 100px;
    background-position: -445px -5px;
}

.sprite-et-attention {
    width: 100px;
    height: 100px;
    background-position: -555px -5px;
}

.sprite-et-book-open {
    width: 100px;
    height: 100px;
    background-position: -665px -5px;
}

.sprite-et-map {
    width: 100px;
    height: 100px;
    background-position: -775px -5px;
}

.sprite-et-phone {
    width: 100px;
    height: 100px;
    background-position: -5px -115px;
}

.sprite-et-vcard {
    width: 100px;
    height: 100px;
    background-position: -115px -115px;
}

.sprite-fa-at {
    width: 100px;
    height: 100px;
    background-position: -225px -115px;
}

.sprite-fa-bug {
    width: 100px;
    height: 100px;
    background-position: -335px -115px;
}

.sprite-fa-calendar {
    width: 100px;
    height: 100px;
    background-position: -445px -115px;
}

.sprite-fa-copyright {
    width: 100px;
    height: 100px;
    background-position: -555px -115px;
}

.sprite-fa-docs {
    width: 100px;
    height: 100px;
    background-position: -665px -115px;
}

.sprite-fa-file-code {
    width: 100px;
    height: 100px;
    background-position: -775px -115px;
}

.sprite-fa-files-o {
    width: 100px;
    height: 100px;
    background-position: -5px -225px;
}

.sprite-fa-food {
    width: 100px;
    height: 100px;
    background-position: -115px -225px;
}

.sprite-fa-fork {
    width: 100px;
    height: 100px;
    background-position: -225px -225px;
}

.sprite-fa-globe {
    width: 100px;
    height: 100px;
    background-position: -335px -225px;
}

.sprite-fa-graduation-cap {
    width: 100px;
    height: 100px;
    background-position: -445px -225px;
}

.sprite-fa-hammer {
    width: 100px;
    height: 100px;
    background-position: -555px -225px;
}

.sprite-fa-handshake-o {
    width: 100px;
    height: 100px;
    background-position: -665px -225px;
}

.sprite-fa-heartbeat {
    width: 100px;
    height: 100px;
    background-position: -775px -225px;
}

.sprite-fa-lifebuoy {
    width: 100px;
    height: 100px;
    background-position: -5px -335px;
}

.sprite-fa-list-numbered {
    width: 100px;
    height: 100px;
    background-position: -115px -335px;
}

.sprite-fa-newspaper {
    width: 100px;
    height: 100px;
    background-position: -225px -335px;
}

.sprite-fa-question-circle-o {
    width: 100px;
    height: 100px;
    background-position: -335px -335px;
}

.sprite-fa-recycle {
    width: 100px;
    height: 100px;
    background-position: -445px -335px;
}

.sprite-fa-server {
    width: 100px;
    height: 100px;
    background-position: -555px -335px;
}

.sprite-fa-shopping-bag {
    width: 100px;
    height: 100px;
    background-position: -665px -335px;
}

.sprite-fa-slideshare {
    width: 100px;
    height: 100px;
    background-position: -775px -335px;
}

.sprite-fa-usb {
    width: 100px;
    height: 100px;
    background-position: -5px -445px;
}

.sprite-fdldq {
    width: 100px;
    height: 100px;
    background-position: -115px -445px;
}

.sprite-fi-alert {
    width: 100px;
    height: 100px;
    background-position: -225px -445px;
}

.sprite-fi-clipboard {
    width: 100px;
    height: 100px;
    background-position: -335px -445px;
}

.sprite-fi-clipboard-notes {
    width: 100px;
    height: 100px;
    background-position: -445px -445px;
}

.sprite-gitlab {
    width: 100px;
    height: 100px;
    background-position: -555px -445px;
}

.sprite-icomoon-cloud {
    width: 100px;
    height: 100px;
    background-position: -665px -445px;
}

.sprite-icomoon-images {
    width: 100px;
    height: 100px;
    background-position: -775px -445px;
}

.sprite-icomoon-link {
    width: 100px;
    height: 100px;
    background-position: -5px -555px;
}

.sprite-icomoon-search {
    width: 100px;
    height: 100px;
    background-position: -115px -555px;
}

.sprite-icomoon-stats-dots {
    width: 100px;
    height: 100px;
    background-position: -225px -555px;
}

.sprite-ion-speedometer {
    width: 100px;
    height: 100px;
    background-position: -335px -555px;
}

.sprite-map-locksmith {
    width: 100px;
    height: 100px;
    background-position: -445px -555px;
}

.sprite-mastodon {
    width: 100px;
    height: 100px;
    background-position: -555px -555px;
}

.sprite-mediawiki {
    width: 100px;
    height: 100px;
    background-position: -665px -555px;
}

.sprite-mfg-chat {
    width: 100px;
    height: 100px;
    background-position: -775px -555px;
}

.sprite-mfg-lock {
    width: 100px;
    height: 100px;
    background-position: -5px -665px;
}

.sprite-mfizz-phone-alt {
    width: 100px;
    height: 100px;
    background-position: -115px -665px;
}

.sprite-mfizz-phone-retro {
    width: 100px;
    height: 100px;
    background-position: -225px -665px;
}

.sprite-mi-developer-board {
    width: 100px;
    height: 100px;
    background-position: -335px -665px;
}

.sprite-mi-ondemand-video {
    width: 100px;
    height: 100px;
    background-position: -445px -665px;
}

.sprite-mi-photo-camera {
    width: 100px;
    height: 100px;
    background-position: -555px -665px;
}

.sprite-octicon-calendar {
    width: 100px;
    height: 100px;
    background-position: -665px -665px;
}

.sprite-octicon-package {
    width: 100px;
    height: 100px;
    background-position: -775px -665px;
}

.sprite-octicon-radio-tower {
    width: 100px;
    height: 100px;
    background-position: -5px -775px;
}

.sprite-oi-transfer {
    width: 100px;
    height: 100px;
    background-position: -115px -775px;
}

.sprite-socialfacile {
    width: 100px;
    height: 100px;
    background-position: -225px -775px;
}

.sprite-team {
    width: 100px;
    height: 100px;
    background-position: -335px -775px;
}

.sprite-ti-calendar {
    width: 100px;
    height: 100px;
    background-position: -445px -775px;
}

.sprite-ws-search {
    width: 100px;
    height: 100px;
    background-position: -555px -775px;
}

.sprite-zocial-email {
    width: 100px;
    height: 100px;
    background-position: -665px -775px;
}

.sprite-zocial-pocket {
    width: 100px;
    height: 100px;
    background-position: -775px -775px;
}

.sprite-zs-email {
    width: 100px;
    height: 100px;
    background-position: -885px -5px;
}


/************* Social FACiLe **************/

#diaspora {
    background-image: url(../img/diaspora.png);
    background-repeat: no-repeat;
    width: 312px;
    height: 300px;
    display: block;
}

#mastodon {
    background-image: url(../img/mastodon.png);
    background-repeat: no-repeat;
    width: 300px;
    height: 300px;
    display: block;
}

/**************** Global *****************/
body {
  margin: 0;
  padding: 0;
}
/*************** Entetes *****************/
.navbar-facil {
  background: #eeeeee;
  font-size: 14px;
  font-family: 'OpenSans', sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
  word-wrap: break-word !important;
}

.navbar-facil .container-navbar-facil {
  margin:0 auto;
  max-width:1170px;
}

.navbar-facil .right-nav {
  float:right;
}

.navbar-facil p { text-align: center; }
 .toggle, [id^=drop] {
 display: none;
}

nav.navbar-facil {
  margin: 0;
  padding: 0;
}

.navbar-facil #logo {
  display: block;
  padding: 10px 20px 5px 10px;
  float: left;
}
@media all and (min-width : 1195px) {
  .navbar-facil #logo {
    padding: 10px 20px 5px 0;
  }
}
.navbar-facil #logo a, .navbar-facil #logo a:hover {
  padding: 0;
  line-height: 0;
  background:none;
}

.navbar-facil #logo img {
  width:auto;
  height:33px;
}

nav.navbar-facil:after {
  content: "";
  display: table;
  clear: both;
}

nav.navbar-facil ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav.navbar-facil ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #eeeeee;
}

nav.navbar-facil ul li.don {
  background-color: #49c4ed;
}
nav.navbar-facil ul li.mon-compte {
  background-color: #666;
}

nav.navbar-facil ul li.don a { color:#fff;font-weight:bold; }
nav.navbar-facil ul li.mon-compte a { color:#fff;font-weight:bold; }
nav.navbar-facil ul li.don a:hover { background-color: #38b7e0; }
nav.navbar-facil ul li.mon-compte a:hover { background-color: #555; }

nav.navbar-facil a {
  display: block;
  padding: 0 20px;
  color: #333;
  line-height: 48px;
  text-decoration: none;
}

nav.navbar-facil ul li ul li:hover { background: #f9f9f9; }

nav.navbar-facil a:hover { background-color: #f9f9f9; }

nav.navbar-facil ul li ul li a { background-color: #f9f9f9; }

nav.navbar-facil ul li ul li a:hover { background-color: #e22537;color:#fff; }

nav.navbar-facil ul ul {
  display: none;
  position: absolute;
  top: 48px;
}

nav.navbar-facil ul li:hover > ul { display: inherit; }

nav.navbar-facil ul ul li {
  width: 220px;
  float: none;
  display: list-item;
  position: relative;
}

nav.navbar-facil ul ul ul li {
  position: relative;
  top: -48px;
  left: 220px;
}

@media all and (min-width : 769px) and (max-width : 992px) {

  .navbar-facil {
    font-size: 12px;
  }
  nav.navbar-facil a {
    padding: 0 10px;
  }

}

@media all and (max-width : 768px) {

nav.navbar-facil a {
    padding-left: 10px;
  }
  


nav.navbar-facil li > a:after { content: ' +'; }

nav.navbar-facil li > a:only-child:after { content: ''; }

.navbar-facil #logo {
  display: block;
  padding: 10px 20px 5px 10px;
  float: left;
}

.navbar-facil .right-nav {
  float:none;
}

nav.navbar-facil { margin: 0; }

.navbar-facil .toggle + a,
 .navbar-facil .menu { display: none; }

.navbar-facil .toggle {
  display:inline;
  background-color: #eeeeee;
  padding: 10px 20px 5px 10px;
  color: #333;
  line-height: 48px;
  text-decoration: none;
  border: none;
}

.navbar-facil label.burger-menu {
  display:inline;
  float:right;
  font-weight: bold;
  height:30px;
}

.navbar-facil label.burger-menu div {
    width: 35px;
    height: 3px;
    background-color: #333;
    margin: 4px auto;
}

.navbar-facil .toggle:hover { background-color: none; }

.navbar-facil [id^=drop]:checked + ul { display: block; }

nav.navbar-facil ul li {
  display: block;
  width: 100%;
}

nav.navbar-facil ul ul .toggle,
 nav.navbar-facil ul ul a { padding: 0 40px; }

nav.navbar-facil ul ul ul a { padding: 0 80px; }

nav.navbar-facil a:hover,
 nav.navbar-facil ul ul ul a { background-color: none; }

nav.navbar-facil ul li ul li .toggle,
 nav.navbar-facil ul ul a { background-color: none; }

nav.navbar-facil a:hover {
  background-color:#eee;
}

nav.navbar-facil ul li.don a:hover {
  background-color: #49c4ed;
}
nav.navbar-facil ul li.mon-compte a:hover {
  background-color:#666;
}


nav.navbar-facil ul ul {
  float: none;
  position: static;
  color: #ffffff;
}

nav.navbar-facil ul ul li:hover > ul,
nav.navbar-facil ul li:hover > ul { display: none; }

nav.navbar-facil ul ul li {
  display: block;
  width: 100%;
}

nav.navbar-facil ul ul ul li { position: static;

}

}

@media all and (max-width : 330px) {

nav.navbar-facil ul li {
  display: block;
  width: 94%;
}

}

/****************** Service *******************/
.bouton {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;

display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
}

.bleu {
color: #fff;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
background-color: #11809E;
border-color: #11809E;
}

.faux-icon {
      font-family: "faux";
      font-style: normal;
      font-weight: normal;
      font-size: 1em;
}

.manuscrit {
	font-family: 'Purisa';
}

.service h1 {
	font-size: 48px;
	white-space: nowrap;
	margin:0;
}

@media all and (max-width : 500px) {
.service h1 {
	font-size: 36px;
}
}

.service p {
 padding-left:30px;
}

.service a {
 color: #e22537;
 font-weight:bold;
 text-decoration:none;
}

.service a:hover {
 color: #dc1e30;
  text-decoration:underline;
}

/* Grille des services */
@media all and (max-width : 500px) {
.service .grille {
display: grid;
  grid-template-columns: 1fr; /* fraction*/
    padding-left:2%;
  padding-right:2%;
}
}

@media all and (min-width : 768px) {
.service .grille {
display: grid;
  grid-template-columns: 1fr 1fr; /* fraction*/
    padding-left:2%;
  padding-right:2%;
}
}

@media all and (min-width : 1195px) {
.service .grille {
 display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* fraction*/
    padding-left:2%;
  padding-right:2%;
}
}

.un-service {
  margin-bottom:4em;
  margin-right:4em;
}

.un-service:hover {
  background-color:#bee2ed;
  border-radius: 8px;
  padding-left:0.5em;
}

/* landing page d'un service */
.service {
  font-size: 14px;
  font-family: 'OpenSans', sans-serif;
  color: #333;
  padding-top:20px;
  padding-bottom:20px;
  word-wrap: break-word !important;
  margin:0 auto;
  max-width:1170px;
}

.service .col {
  width:95%;
  padding-left:2%;
  padding-right:2%;
  margin-bottom:20px;
  float:none;
  text-align: left;
  max-width:600px;
}

@media all and (min-width : 768px) {
.service .col {
  width:45%;
  padding-left:2%;
  padding-right:2%;
  margin-bottom:20px;
  float:left;
  text-align: left;
  max-width:1195px;
}
}

@media all and (min-width : 1195px) {
.service .col {
  width:45%;
  padding-left:2%;
  padding-right:2%;
  margin-bottom:20px;
  float:left;
  text-align: left;
  max-width:1195px;
}
}

.service .clear {
  float:none;
  clear:both;
}

/************* Tableau ****************/
/* A Pen By Andr Jaenisch  https://codepen.io/Ryuno-Ki/pen/xGEPjo?page=6 */

.tableau { 
	 margin:0 auto;
	 max-width:1170px;
	 width:95%;
	 padding-bottom:30px;
	 font-size:12px;
	 font-family: 'OpenSans', sans-serif;
}

.tableau a {
 color: #e22537;
 font-weight:bold;
 text-decoration:none;
}

.tableau a:hover {
 color: #dc1e30;
  text-decoration:underline;
}

table { 
  width: 100%; 
  border-collapse: collapse; 
  min-width:310px;
  font-size:12px;
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #38b7e0;
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table.responsive, .responsive thead, .responsive tbody, .responsive th, .responsive td, .responsive tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.responsive thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.responsive tr { border: 1px solid #ccc; }
	
	.responsive td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.responsive td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	.responsive td:before { content: attr(data-table-header); }
}

/*************** Pied *****************/
.footer-facil {
  background: #eeeeee;
}
.footer-facil .footer-content {
  font-size: 14px;
  font-family: 'OpenSans', sans-serif;
  color: #333;
  padding-top:20px;
  margin: 0;
  padding-bottom:20px;
  word-wrap: break-word !important;
  margin:0 auto;
  max-width:1170px;
}
.footer-facil .footer-content .col {
  width:95%;
  padding-left:2%;
  padding-right:2%;
  margin-bottom:20px;
  float:none;
  text-align: center;
}
@media all and (min-width : 768px) {
  .footer-facil .footer-content .col {
    width:22%;
    padding-left:0;
    padding-right:2%;
    float:left;
    text-align: left;
  }
  .footer-facil .footer-content .col-1 {
    padding-left:10px;
  }
}
@media all and (min-width : 1195px) {
  .footer-facil .footer-content .col {
    width:23%;
    padding-left:0;
    padding-right:2%;
    float:left;
  }
  .footer-facil .footer-content .col-1 {
    padding-left:0;
  }
}
.footer-facil .footer-content .clear {
  float:none;
  clear:both;
}
.footer-facil .footer-content h3 {
  color:#49c5ed;
}
.footer-facil .footer-content ul {
  list-style-type: none;
  padding-left:0;
}
.footer-facil .footer-content ul li a {
  text-decoration: none;
  color:inherit;
}
.footer-facil .footer-content ul li a:hover {
  text-decoration: underline;
}
.footer-facil .footer-content input[type="text"] {
  border:none;
  width:8em;
  padding:8px;
}
.footer-facil .footer-content input[type="submit"] {
  color:#fff;
  font-weight: bold;
  background:#e32538;
  border:#e32538;
  height: 33px;
}
.footer-facil .footer-content input[type="submit"]:hover {
  cursor:pointer;
  background: #dc1e30;
}
.footer-facil .footer-content button {
  color:#fff;
  font-weight: bold;
  background:#e32538;
  border:#e32538;
  height: 33px;
}
.footer-facil .footer-content button:hover {
  cursor:pointer;
  background: #dc1e30;
}
.footer-facil .copyright {
  background: #dddddd;
  word-wrap: break-word !important;
  font-family: 'OpenSans', sans-serif;
  font-size: 12px;
  color: #333;
  text-align: center;
  padding-top:20px;
  margin: 0;
  padding-bottom:20px;
}
.footer-facil .copyright a {
  color: #666;
}