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

}

@font-face {
    font-family: 'Abeezee';
    src: url('ABeeZee-Italic-webfont.eot');
    src: url('ABeeZee-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('ABeeZee-Italic-webfont.woff2') format('woff2'),
         url('ABeeZee-Italic-webfont.woff') format('woff'),
         url('ABeeZee-Italic-webfont.ttf') format('truetype'),
         url('ABeeZee-Italic-webfont.svg#abeezeeitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

html, body {
	padding: 0;
	margin: 0;
	font-family: sans-serif;
	font-size: 13px;
	background: white;
	color: #333;
}


a {
	color: #008;
	text-decoration: none;
	border-bottom: 1px dotted #008
}

a:hover {
	border-bottom-style: solid;
}

ul li {
	list-style: none;
}

ul li:before {
	content: "\2299";
	float: left;
	margin-left: -1.5em;
}

.container {
	position: relative;
	margin: 0 auto;
	max-width: 1170px;
}

#title {
	margin-left: 10px;
}

#title a {
	border: none;
}

#menu {
	position: absolute;
	top: 40px;
	right: 10px;
	font-family: Abeezee;
	font-size: 12px;
}

#menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#menu ul li {
	display: inline-block;
	margin-right: 2em;
	font-size: 110%;
}

#menu ul li:before {
	content: none;
}

@media(min-width:1100px) { #menu ul li { font-size: 130%; } }

#menu ul li a {
	text-decoration: none;
	color: #33a;
	border: none;
}

#menu ul li a:hover {
	border-bottom: 1px dotted #ccf;
}

div.textcell.intro {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 500px;
	overflow: hidden;
	background: url(../img/tram.jpg) no-repeat 50% 60%;
	background-size: cover;
	border: none;
}

div.intro > div {
	width: 600px;
	padding: 20px;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 50px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 3px;
	font-size: 110%;
}

@media(max-width: 668px) { div.intro > div { width: 90%; } }

div.textcell ul li {
	margin-top: 1ex;
}

div#content {
	text-align: center;
}

div.textcell.module-citoyen,
div.textcell.module-metier,
div.textcell.module-parametrage {
	width: 280px; /* TODO: add @media queries */
	margin: 2em 1em;
	display: inline-block;
	text-align: center;
	border: none;
}

div.textcell.module-citoyen p,
div.textcell.module-metier p,
div.textcell.module-parametrage p {
	margin: 0;
}

div.textcell.module-citoyen a,
div.textcell.module-metier a,
div.textcell.module-parametrage a {
	display: block;
	position: relative;
	padding: 160px 20px 20px 20px;
	overflow: none;
	font-size: 130%;
	-moz-transition-property: background, padding, top, right;
	-moz-transition-duration: 0.7s;
	-moz-transition-timing-function: ease;
	-webkit-transition-property: background, padding, top, right;
	-webkit-transition-duration: 0.7s;
	-webkit-transition-timing-function: ease;
	text-decoration: none;
	color: #333;
	background: rgba(255, 255, 255, 0.5);
	top: 5px;
	border: none;
}

div.textcell.module-citoyen a:hover,
div.textcell.module-metier a:hover,
div.textcell.module-parametrage a:hover {
	background: rgba(255, 255, 255, 0.3);
	top: 20px;
	border: none;
}

div.textcell.module-citoyen {
	background: url(../img/citoyens.png) no-repeat 50% 50%;
}

div.textcell.module-metier {
	background: url(../img/metier.png) no-repeat 50% 50%;
}

div.textcell.module-parametrage {
	background: url(../img/parametrage.png) no-repeat 50% 50%;
}

@media(max-width: 968px) {
	div.textcell.module-citoyen, div.textcell.module-metier, div.textcell.module-parametrage {
		width: 90%;
		margin: 2em auto;
		display: block;
		background-position: 0% 50%;
		border: 1px solid #ccc;
	}
	div.textcell.module-citoyen a,
	div.textcell.module-metier a,
	div.textcell.module-parametrage a {
		padding: 20px 20px 20px 200px;
		text-align: left;
		top: 0;
		right: 0;
	}
	div.textcell.module-citoyen a:hover,
	div.textcell.module-metier a:hover,
	div.textcell.module-parametrage a:hover {
		top: 0;
		right: 10px;
	}
}


div.textcell img {
	max-width: 100%;
}

div.textcell.schema-general {
	border-top: 1px solid #ddd;
	padding: 2em 0;
}

div.textcell {
	clear: both;
	text-align: justify;
	width: 90%;
	max-width: 1070px;
	margin: 0 auto;
	line-height: 150%;
	border-bottom: 1px solid #ddd;
}

div.textcell h1,
div.textcell h2 {
	color: #333;
	font-weight: normal;
	font-family: Abeezee;
	text-align: left;
}

div.se-voir h2, div.se-parler h2,
div.textcell.dark-background h1,
div.textcell.chiffres-cles h1, div.textcell.chiffres-cles h2,
div.textcell.prix-vincennes h1, div.textcell.prix-vincennes h2,
div.textcell.prix-montpellier h1, div.textcell.prix-montpellier h2,
div.textcell.guichet-unique h1, div.textcell.guichet-unique h2,
div.textcell.fabrique-workflows h1, div.textcell.fabrique-workflows h2,
div.textcell.federation-identite h1, div.textcell.federation-identite h2,
div.textcell.cms h1, div.textcell.cms h2,
div.textcell.administration h1, div.textcell.administration h2,
div.textcell.compte-citoyen h1, div.textcell.compte-citoyen h2,
div.textcell.mobilite h1, div.textcell.mobilite h2,
div.textcell.opendata h1, div.textcell.opendata h2,
div.textcell.libre h1, div.textcell.libre h2 {
	color: #eee;
}

div.se-voir a, div.se-parler a,
div.textcell.prix-vincennes a,
div.textcell.prix-montpellier a,
div.textcell.guichet-unique a,
div.textcell.fabrique-workflows a,
div.textcell.federation-identite a,
div.textcell.cms a,
div.textcell.administration a,
div.textcell.compte-citoyen a,
div.textcell.mobilite a,
div.textcell.opendata a,
div.textcell.libre a {
	color: #fff;
	border-bottom-color: #fff;
}

div.textcell.dark-background,
div.textcell.chiffres-cles,
div.textcell.tablette,
div.textcell.prix-montpellier,
div.textcell.prix-vincennes,
div.textcell.guichet-unique,
div.textcell.fabrique-workflows,
div.textcell.federation-identite,
div.textcell.cms,
div.textcell.administration,
div.textcell.compte-citoyen,
div.textcell.mobilite,
div.textcell.opendata,
div.textcell.libre {
	width: 100%;
	max-width: 100%;
	background: #646871;
	color: #eee;
	padding: 100px 0;
	font-size: 110%;
}

div.textcell.dark-background > div,
div.textcell.chiffres-cles > div,
div.textcell.prix-montpellier > div,
div.textcell.prix-vincennes > div,
div.textcell.guichet-unique > div,
div.textcell.fabrique-workflows > div,
div.textcell.federation-identite > div,
div.textcell.cms > div,
div.textcell.administration > div,
div.textcell.compte-citoyen > div,
div.textcell.mobilite > div,
div.textcell.opendata > div,
div.textcell.libre > div {
	background: no-repeat top right;
	width: calc(90% - 240px);
	padding-right: 240px;
	max-width: calc(1070px - 240px);
	margin: 0 auto;
}

div.textcell.dark-background > div a {
        color: white;
        font-weight: bold;
	border-bottom-color: white;
}

div.textcell.libre > div {
	background: url(../img/libre.png) no-repeat top right;
}

div.textcell.opendata > div {
	background-image: url(../img/data.png);
}

div.textcell.libre > div,
div.textcell.opendata > div {
}

div.textcell.bistro {
	background: url(../img/gourou.png) no-repeat 0 10%;
}

div.textcell.bistro > div {
	background: url(../img/expert.png) no-repeat 0 90%;
}

div.textcell.bi > div,
div.textcell.webservices > div,
div.textcell.annonces > div,
div.textcell.fabrique-formulaires > div,
div.textcell.porte-document > div,
div.textcell.demarches > div,
div.textcell.bistro > div {
	padding-left: 240px;
}

div.textcell.applications table {
	width: 100%;
}

div.textcell.applications table tbody tr th {
}

div.textcell.applications table tbody tr td {
	padding: 0.5ex 1ex;
}
div.textcell.applications table tbody tr:nth-child(odd) td {
	background: #eee;
}

div#suite p,
div#footer {
	background: #333;
	color: #eee;
}

div#suite p a,
div#footer a {
	color: white;
	border-bottom-color: white;
}

div#footer {
	border-bottom: 2px solid #aaa;
	width: 100%;
	position: relative;
	padding: 0;
	margin: 0;
}

div#suite {
	text-align: right;
	border-bottom: none;
	height: 0;
	padding: 0;
}

div#suite > div > p {
	margin: 0;
	display: inline-block;
	vertical-align: center;
	height: 30px;
	position: relative;
	top: -39px;
	padding: 10px 10px 10px 10px;
	height: 100%;
	border: 1px solid #ddd;
	border-bottom: none;
}

div#suite a {
}


#footer p {
	margin: 0;
}

a#goto-top {
	text-decoration: none;
	color: white;
	background: #666;
	font-size: 200%;
	font-weight: bold;
	padding: 0.5ex 1ex;
	position: absolute;
	bottom: 5px;
	right: 5px;
}

a#goto-top:hover {
	background: #444;
}

p#eo-link {
	padding-top: 2em;
	padding-bottom: 2em;
	font-size: 110%;
}

ul#footer-links {
	padding: 0 0 2ex 2px;
	margin: 0;
	list-style: none;
}

ul#footer-links li {
	margin: 0;
	padding: 2px 0;
}

a.legal {
	position: absolute;
	right: 5px;
}

.page-citoyens div.textcell.intro {
	background-image: url(../img/fontaine3.jpg);
}

.page-metier div.textcell.intro {
	background-image: url(../img/ouvrier.jpg);
}

.page-parametrage div.textcell.intro {
	background-image: url(../img/circuits.jpg);
}

.page-references div.textcell.intro {
	background-image: url(../img/references.jpg);
}

.page-contact div.textcell.intro {
	background-image: url(../img/contact.jpg);
}

.page-mentions-legales div.textcell.intro {
	background-image: url(../img/mentions-legales.jpg);
}

.page-dossier-presse div.textcell.intro {
	background-image: url(../img/dossier-de-presse.jpg);
}

.page-publik-2020 div.textcell.intro {
	background-image: url(../img/diodes.jpg);
}

div.intro img {
	display: none;
}

div.textcell.lien-administration,
div.textcell.lien-annonces,
div.textcell.lien-bi,
div.textcell.lien-cms,
div.textcell.lien-compte-citoyen,
div.textcell.lien-demarches,
div.textcell.lien-fabrique-formulaires,
div.textcell.lien-fabrique-workflows,
div.textcell.lien-federation-identite,
div.textcell.lien-guichet-unique,
div.textcell.lien-mobilite,
div.textcell.lien-porte-document,
div.textcell.lien-webservices {
	width: 180px; /* TODO: add @media queries */
	margin: 0em 1em 2em 1em;
	display: inline-block;
	text-align: center;
	border: none;
	background: url(../img/compte-citoyen.png) no-repeat 50% 50%;
	font-family: Abeezee;
}

div.textcell.lien-administration p,
div.textcell.lien-annonces p,
div.textcell.lien-bi p,
div.textcell.lien-cms p,
div.textcell.lien-compte-citoyen p,
div.textcell.lien-demarches p,
div.textcell.lien-fabrique-formulaires p,
div.textcell.lien-fabrique-workflows p,
div.textcell.lien-federation-identite p,
div.textcell.lien-guichet-unique p,
div.textcell.lien-mobilite p,
div.textcell.lien-porte-document p,
div.textcell.lien-webservices p {
	margin: 0;
}

div.textcell.lien-administration a,
div.textcell.lien-annonces a,
div.textcell.lien-bi a,
div.textcell.lien-cms a,
div.textcell.lien-compte-citoyen a,
div.textcell.lien-demarches a,
div.textcell.lien-fabrique-formulaires a,
div.textcell.lien-fabrique-workflows a,
div.textcell.lien-federation-identite a,
div.textcell.lien-guichet-unique a,
div.textcell.lien-mobilite a,
div.textcell.lien-porte-document a,
div.textcell.lien-webservices a {
	display: block;
	position: relative;
	padding: 110px 20px 20px 20px;
	overflow: none;
	font-size: 130%;
	-moz-transition-property: background, padding, top, right;
	-moz-transition-duration: 0.7s;
	-moz-transition-timing-function: ease;
	-webkit-transition-property: background, padding, top, right;
	-webkit-transition-duration: 0.7s;
	-webkit-transition-timing-function: ease;
	text-decoration: none;
	color: #333;
	background: rgba(255, 255, 255, 0.5);
	top: 5px;
	border-bottom: none;
}

div.textcell.lien-administration a:hover,
div.textcell.lien-annonces a:hover,
div.textcell.lien-bi a:hover,
div.textcell.lien-cms a:hover,
div.textcell.lien-compte-citoyen a:hover,
div.textcell.lien-demarches a:hover,
div.textcell.lien-fabrique-formulaires a:hover,
div.textcell.lien-fabrique-workflows a:hover,
div.textcell.lien-federation-identite a:hover,
div.textcell.lien-guichet-unique a:hover,
div.textcell.lien-mobilite a:hover,
div.textcell.lien-porte-document a:hover,
div.textcell.lien-webservices a:hover {
	background: rgba(255, 255, 255, 0.3);
	top: 10px;
}

div.textcell.lien-administration { background-image: url(../img/administration.png); }
div.textcell.lien-annonces { background-image: url(../img/annonces.png); }
div.textcell.lien-bi { background-image: url(../img/bi.png); }
div.textcell.lien-cms { background-image: url(../img/cms.png); }
div.textcell.lien-compte-citoyen { background-image: url(../img/compte-citoyen.png); }
div.textcell.lien-demarches { background-image: url(../img/demarches.png); }
div.textcell.lien-fabrique-formulaires { background-image: url(../img/fabrique-formulaires.png); }
div.textcell.lien-fabrique-workflows { background-image: url(../img/fabrique-workflows.png); }
div.textcell.lien-federation-identite { background-image: url(../img/federation-identite.png); }
div.textcell.lien-guichet-unique { background-image: url(../img/guichet-unique.png); }
div.textcell.lien-mobilite { background-image: url(../img/mobilite.png); }
div.textcell.lien-porte-document { background-image: url(../img/porte-document.png); }
div.textcell.lien-webservices { background-image: url(../img/webservices.png); }

div.textcell.compte-citoyen {
	padding-top: 10px;
}

div.textcell.compte-citoyen > div {
	background-image: url(../img/compte-citoyen-bg.png);
}

div.textcell.mobilite {
	background-image: url(../img/capture-smartphone.png);
	background-repeat: no-repeat;
	background-position: 95% 90%;

}

div.textcell.mobilite > div {
	background-image: url(../img/mobilite-bg.png);
}

div.textcell.fabrique-workflows > div {
	background-image: url(../img/fabrique-workflows-bg.png);
}

div.textcell.guichet-unique > div {
	background-image: url(../img/guichet-unique-bg.png);
}

div.textcell.cms > div {
	background-image: url(../img/cms-bg.png);
}

div.textcell.federation-identite > div {
	background-image: url(../img/federation-identite-bg.png);
}

div.textcell.administration > div {
	background-image: url(../img/administration-bg.png);
}

div.textcell.tablette {
	padding: 1em 0;
	border: none;
}

div.textcell.demarches {
	background: url(../img/demarches-bg.png) no-repeat 0 10%;
}

div.textcell.porte-document {
	background: url(../img/porte-document-bg.png) no-repeat 0 10%;
}

div.textcell.fabrique-formulaires {
	background: url(../img/fabrique-formulaires-bg.png) no-repeat 0 10%;
}

div.textcell.annonces {
	background: url(../img/annonces-bg.png) no-repeat 0 10%;
}

div.textcell.webservices {
	background: url(../img/webservices-bg.png) no-repeat 0 10%;
}

div.textcell.bi {
	background: url(../img/bi-bg.png) no-repeat 0 10%;
}

div.textcell.ecrans {
	height: 172px;
	background: url(../img/screens.png) repeat-x;
	position: relative;
	margin-top: 30px;
	top: 3px;
	width: 100%;
	max-width: 100%;
	-moz-transition: background-position linear 0.3s;
	-webkit-transition: background-position linear 0.3s;
	transition: background-position linear 0.3s;
}

div.textcell.prix-montpellier {
	border: none;
	background-repeat: no-repeat;
	background-position: 80% 80%;
}

div.textcell.prix-montpellier > div {
	background-image: url(../img/SMCL2015_FINALISTE.png);
	background-image: url(../img/label-montpellier.png),
		url(../img/SMCL2015_FINALISTE.png);
	background-position: right top, 85% 100%;
}

div.textcell.prix-montpellier {
	padding-bottom: 40px;
}

div.textcell.prix-vincennes {
	padding-top: 10px;
}

div.textcell.prix-vincennes > div {
	padding: 0 0 0 240px;
	background: url(../img/label-vincennes.png) no-repeat 0 10%;
}

div.textcell.liste-references ul {
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}

div.textcell.liste-references ul li {
	list-style: none;
	display: inline-block;
	margin: 1em 2em;
}

div.textcell.liste-references ul li:before {
	content: none;
}

div.contactez-nous,
div.se-voir {
	margin-top: 2em;
}

div.contactez-nous,
div.se-parler {
	position: relative;
	right: -2px;
}

div.se-voir,
div.ecrire {
	position: relative;
	left: -2px;
}

div.se-parler,
div.ecrire {
	margin-bottom: 2em;
}

div.contactez-nous,
div.se-voir,
div.se-parler,
div.ecrire {
	width: 35%;
	display: inline-block;
	vertical-align: top;
	padding: 2em;
	border: 0;
	height: 200px;
	font-size: 130%;
}

div.textcell.se-voir, div.textcell.se-parler {
	background: #646871;
	color: #eee;
}

div.carte {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 450px;
	overflow: hidden;
	background: url(../img/eomap.jpg) no-repeat 50% 60%;
	background-size: cover;
	border: none;
}

div.textcell.fabrique-formulaires img,
div.textcell.fabrique-workflows img,
div.textcell.cms img,
div.textcell.administration img,
div.textcell.guichet-unique img {
	float: right;
	width: 50%;
	border: 1px solid #aaa;
	padding: 1px;
	margin-left: 1em;
	margin-bottom: 1em;
}

div.textcell.transition {
	width: 100%;
	max-width: 100%;
	height: 50px;
	background: #646871;
	border: none;
}

@media(max-width: 800px) {
	div.textcell.fabrique-formulaires img,
	div.textcell.fabrique-workflows img,
	div.textcell.cms img,
	div.textcell.administration img,
	div.textcell.guichet-unique img {
		display: none;
	}
}

@media(max-width: 500px) {
	div.textcell.chiffres-cles > div,
	div.textcell.bi > div,
	div.textcell.webservices > div,
	div.textcell.annonces > div,
	div.textcell.fabrique-formulaires > div,
	div.textcell.porte-document > div,
	div.textcell.demarches > div,
	div.textcell.bistro > div,
	div.textcell.prix-montpellier > div,
	div.textcell.prix-vincennes > div,
	div.textcell.guichet-unique > div,
	div.textcell.fabrique-workflows > div,
	div.textcell.federation-identite > div,
	div.textcell.cms > div,
	div.textcell.administration > div,
	div.textcell.compte-citoyen > div,
	div.textcell.mobilite > div,
	div.textcell.opendata > div,
	div.textcell.libre > div {
		background: none;
		padding-right: 0;
		padding-left: 0;
		width: 90%;
		max-width: 90%;
	}

	div.textcell.bi,
	div.textcell.webservices,
	div.textcell.annonces,
	div.textcell.fabrique-formulaires,
	div.textcell.porte-document,
	div.textcell.demarches,
	div.textcell.bistro {
		background: none;
	}

	div.textcell.prix-montpellier {
		background-image: none;
	}
}

@media(max-width: 900px) {
	#menu .menu-citoyens,
	#menu .menu-metier,
	#menu .menu-parametrage {
		display: none;
	}
}

@media(max-width: 500px) {
	div#title {
	}
	#menu {
		position: relative;
		top: 0;
		right: 0;
		text-align: right;
		padding: 10px 0;
	}

	div.contactez-nous,
	div.se-voir,
	div.se-parler,
	div.ecrire {
		width: 90%;
		position: relative;
		right: 0;
		left: 0;
		height: auto;
		padding: 2em 5%;
	}

	div.textcell.se-parler h2,
	div.textcell.se-parler {
		background: white;
		color: #333;
	}
	div.textcell.ecrire h2,
	div.textcell.ecrire {
		background: #646871;
		color: #eee;
	}
}

div.chiffres-cles > div {
  position: relative;
}

div.chiffres-cles > div span#counter {
  color: #eee;
}

span#counter {
  position: absolute;
  bottom: 1em;
  right: 0px;
  font-size: 60px;
  max-width: 6em;
  line-height: 100%;
  text-align: right;
  font-family: Abeezee;
  color: #444;
}

@media(max-width: 900px) {
  div.textcell.chiffres-cles > div {
	padding-right: 0;
  }
  span#counter {
    display: none;
  }
}