/*!

 * IAD Territoire Digital v 1.0

 *

 * Copyright mars 2017

 * Dernière modification : 16/04/2019 

 *

 * Auteur : IAD Territoire Digital

 * Descriptif : Feuille de styles personnalisée pour le site IAD Territoire Digital

 * 

 * Couleurs : #f65e02 (orange), #38beea (bleu ciel), #f0f0f1 (gris fond), #424349 (gris font)

 */

/*Importation de police*/

@font-face {

    font-family: 'Source Sans Pro Regular';

    src: url('../fonts/sourcesanspro-regular-webfont.woff2') format('woff2'),

        url('../fonts/sourcesanspro-regular-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: 'Source Sans Pro Bold';

    src: url('../fonts/sourcesanspro-bold-webfont.woff2') format('woff2'),

        url('../fonts/sourcesanspro-bold-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: 'Source Sans Pro Italic';

    src: url('../fonts/sourcesanspro-it-webfont.woff2') format('woff2'),

        url('../fonts/sourcesanspro-it-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}



/* ===================================

0. General

==================================== */

body {

    font-family: 'Source Sans Pro Regular', Arial, sans-serif;

    font-size: 20px;

    line-height: 1.4em;

    color: #424349;

}



h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: 'Source Sans Pro Regular', Arial, sans-serif;

    line-height: 1.1em;

    color: #424349;

    margin-bottom: 20px;

}



h1.rubrique {

    color: #000;

    font-family: 'Source Sans Pro Bold', 'Arial Bold', sans-serif;

    font-size: 1.44em;

    line-height: 6em;

    text-indent: 1em;

}



a {

    color: #f65e02;

}



a:focus,
a:hover,
a:active {

    color: #f65e02;

    text-decoration: underline;

}



select,
textarea,

input[type="text"],
input[type="email"] {

    color: #424349;

}



input[type="text"],
input[type="email"] {

    height: 35px;

    line-height: 35px;

}



input[type="text"]:focus,
input[type="email"]:focus,

textarea:focus {

    border-color: #f65e02;

    box-shadow: none;

}



.no-margin {

    margin: 0 !important;

}



p + ul {

    margin-top: -1.5625em;
    /*annule le margin-bottom du <p> lorsqu'une liste suit*/

}



.btn-theme {

    background: #38beea;

    border: 0;

    border-radius: 0;

    box-shadow: none;

    color: #FFF;

    display: inherit;

    font-family: 'Source Sans Pro Bold', 'Arial Bold', sans-serif;

    font-size: 0.9em;

    padding: 0.85em;

    text-shadow: none;

    text-transform: uppercase;

}



.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active {

    background: #f65e02;

    color: #FFF;

}



/*Page rubrique*/

.page #content {

    padding: 0;

    width: 100%;

}



/*Bouton retour en haut de page*/

#lets-go-top {

    position: fixed;

    background: #424349;

    bottom: 50px;

    border-radius: 30px;

    color: #FFF;

    right: 50px;

    display: none;

    font-family: "Font Awesome 5 Free";

    font-size: 2.5rem;

    height: 50px;

    width: 50px;

    line-height: 1em;

    text-align: center;

    opacity: 0.8;

    z-index: 999;

}



#lets-go-top:hover,
#lets-go-top:focus {

    background: #f65e02;

    text-decoration: none;

    opacity: 1;

}



#lets-go-top:before {
    font-weight: 900;
    content: "\f077";
    /*Chevron haut de page*/

}



#lets-go-top.show {

    display: block;

}



/* ===================================

0. Entete / Menu

==================================== */

.header-wrap {

    padding: 10px 0;

}



.header-wrap .header .spip_logos {

    margin-bottom: 0;

    margin-left: 30px;

}



.navbar-static-top,
.navbar-static-top .navbar-inner {

    background: none;

    box-shadow: none;

    border: 0;

    right: 0;

    position: absolute;

}



.navbar-collapse {

    margin: 27px 0;

}





.navbar .nav {

    float: right;

}



/* Rubriques principales */

.navbar .nav > li > a {

    color: #424349;

    font-family: 'Source Sans Pro Bold', 'Arial Bold', sans-serif;

    text-transform: uppercase;

}



.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {

    color: #f65e02;

}



/* Sous-rubriques */

.navbar .nav > li > .dropdown-menu::after,
.navbar .nav > li > .dropdown-menu::before {

    border: 0;

}



.dropdown-menu {

    border: 0;

    border-radius: 0;

    padding: 0;

    margin: 0;

    min-width: 130px;

}



.dropdown-menu > li > a {

    color: #424349;

    font-size: 1.428em;

    padding: 10px 20px;

}



.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.open > .dropdown-toggle,

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {

    background: none;

    color: #f65e02;

}



.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus,

.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover,
.nav > li.dropdown.open.active > a:focus,

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {

    background: #f65e02;

    border: 0;

    box-shadow: none;

    color: #FFF;

    font-weight: normal;

    text-shadow: none;

}







/* ===================================

1. Sections / Aside

==================================== */



#featured {

    width: 100%;

    background: #fcfcfc;

    position: relative;

    margin: 0;

    padding: 0;

}



aside .encart {

    margin-bottom: 2em;

}



aside .encart-client {

    text-align: left;

}



aside .encart-client span {

    display: inline-block;

    width: 100%;

}

aside .encart-client span.label {

    background: #f65e02;

    font-size: 1em;

    margin-top: 1em;

    padding: 5px;

    text-shadow: initial;

    width: auto;

}



aside .encart-client .spip_logos {

    background: #FFF;

    padding: 0.5em;

}



aside .encart-client .value-outil {

    margin: 0.3em 0 0;

    text-align: center;

}





/* ===================================

2. Sliders

==================================== */

/* --- flexslider --- */



.page_sommaire .hero-unit.home-slider::after {

    background: #f0f0f1 url("../img/bg_bureau-min.png") no-repeat center top;

}



.page_rubrique .hero-unit.rubrique-slider::after,

.page_article .hero-unit.rubrique-slider::after,

.page_404 .hero-unit.rubrique-slider::after,

.page_401 .hero-unit.rubrique-slider::after {

    background: #38beea url("../img/bg_bureau-min.png") no-repeat center 60px;

}



.page_sommaire .hero-unit.home-slider {

    background: none;

    height: 400px;

    padding: 0;

}



.page_rubrique .hero-unit.rubrique-slider,

.page_article .hero-unit.rubrique-slider,

.page_404 .hero-unit.rubrique-slider,

.page_401 .hero-unit.rubrique-slider {

    background: none;

    height: 175px;

    padding: 0;

}



article .flexslider {

    min-height: 370px;

    padding: 1em;

}



article .flexslider .slides > li {

    background: #FFF;

    text-align: center;

}



article .flexslider ul.slides {

    margin-bottom: 1em;

}



article .flexslider .slides img {

    margin: auto;

    width: auto;



}



article .flex-control-nav {

    position: inherit;

}



article .flex-caption {

    bottom: 10px;

    left: inherit;

    padding: 0.5em;

    width: auto;

}

article .flex-caption .descriptif-projet {

    font-size: 1em;

    margin: auto;

}



#featured .flexslider {

    padding: 0;

    margin: 50px 0 30px;

    background: #fff;

    position: relative;

    zoom: 1;

}



.flex-caption {

    background: none;

    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CF1F1F1, endColorstr=#4CF1F1F1);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CF1F1F1, endColorstr=#4CF1F1F1);

    zoom: 1;

    background-color: rgba(240, 240, 241, 0.8);

    bottom: 70px;

    right: initial;

    left: 45px;

    width: 430px;

}



.flex-caption h3 {

    color: #000;

    font-size: 1.12em;
    /*equiv. 28px*/

    font-weight: inherit;

    letter-spacing: initial;

    text-transform: none;

}



.flex-caption h3 span {

    color: #000;

    display: inherit;

    font-family: 'Source Sans Pro Bold', 'Arial Bold', sans-serif;

    font-size: 1.286em;
    /*equiv. 36px*/

    line-height: 1em;

    margin: 0 0 10px;

}



.flex-caption .type-projet {

    background: #38beea;

    color: #FFF;

    display: inline-block;

    font-size: 1.44em;
    /*equiv. 36px*/

    padding: 0.4em;

    text-transform: uppercase;

}



.flex-caption .descriptif-projet {

    color: #f65e02;

    display: block;

    font-family: 'Source Sans Pro Bold', 'Arial Bold', sans-serif;

    font-size: 1.12em;
    /*equiv. 28px*/

    line-height: 1em;

    margin-left: 70px;

}



/****** Adaptation pour le slider : Exemple de réalisations *************/

.hero-rubrique.ex-realisations {

    margin-bottom: 2em;

}



.ex-realisations .flex-caption {

    bottom: 150px;

}



.ex-realisations .flex-caption h3 {

    font-size: 1.4em;
    /*equiv. 28px*/

}



.ex-realisations .flex-caption .descriptif-projet {

    color: #424349;

    font-family: 'Source Sans Pro Regular', Arial, sans-serif;

    font-size: 1em;
    /*equiv. 20px*/

    line-height: 1.2em;
    /*equiv. 24px*/

    margin-left: 0;

    margin-top: 1em;

}



.img-slider {

    float: right;

    margin-right: 3em;

}



.img-slider:focus,
.img-slider:hover,
.img-slider:active {

    background: none;

}



/* ===================================

3. Encarts

==================================== */

.encart-accueil-margin {
    margin: 0 0 3em 0;
}

/*.encart-margin {margin: 0 0 2em 0;} A réactiver lorsque l'article Gestionnaire de contenus contiendra seulement 2 encarts au lieu de 4*/

.encart-margin > div {
    margin-bottom: 1em;
}

/*A désactiver lorsque l'article Gestionnaire de contenus contiendra seulement 2 encarts au lieu de 4*/

.encart-entete {
    margin: 1em 0;
}



.encart-margin > div:first-child {

    padding-left: 0;

}



.encart-margin > div:last-child {

    padding-right: 0;

}



.encart {

    background: #f0f0f1;

    min-height: 310px;

    padding: 1.5em 1em 0.5em;

}



.encart-transparent {

    background: none;

    padding: 0;

}



.encart h3 {

    font-size: 1.4em;
    /*equiv. 28px*/

    font-family: 'Source Sans Pro Bold', 'Arial Bold', sans-serif;

    font-weight: normal;

    text-transform: uppercase;

}



.encart h3 span {

    display: block;

    font-family: 'Source Sans Pro Regular', Arial, sans-serif;

    font-weight: normal;

    text-transform: none;

}



.encart .capsule-video {

    margin-bottom: 1em;

}



.text-encart {

    display: block;

    margin-top: 1em;

}



.encart .texte {

    font-size: 0.9em;

}



.encart-2 {

    display: inline-block;

    width: 100%;

}



.hero-accueil {

    font-size: inherit;

    line-height: inherit;

    padding-bottom: 0.5em;

    padding-top: 0.3em;

    padding-right: 15px;

    padding-left: 15px;

}



.hero-accueil h2,
.dernieres-rea h2 {

    font-size: 1.8em;
    /*equiv. 36px*/

    text-transform: uppercase;

    text-align: center;

}



.hero-accueil .introduction,

.rubrique .introduction {

    text-align: justify;

}



.dernieres-rea h2 {

    text-align: left;

}



.bloc-citation {

    color: #262428;

    padding-top: 2em;

}



.citation {

    font-style: italic;

    display: block;

}



ul.document-encart {

    font-size: 0.9em;

    margin-left: 5px;

    margin-bottom: 2em;

}



li.type-pdf {

    list-style-type: none;

    margin-bottom: 0.5em;

}



li.type-pdf::before {

    background: #ff0000;

    border-radius: 40px;

    color: #FFF;

    content: "PDF";
    /* Document PDF */

    display: inline-block;

    font-family: 'Source Sans Pro Bold', 'Arial Bold', sans-serif;

    height: 40px;

    line-height: 40px;

    margin-right: 0.5em;

    text-align: center;

    width: 40px;

}



.encart .formulaire_newsletter,

.encart .formulaire_newsletter .editer-groupe {

    margin: 0;

    padding: 0;

}



.encart .formulaire_newsletter label {

    font-size: 1em;

}



.encart .formulaire_newsletter input[type="email"] {

    width: 100%;

}



.encart .formulaire_newsletter .boutons {

    padding: 0;

    border: 0;

    margin: 0;

}



.encart .formulaire_newsletter .boutons input {

    margin: auto;

}



/* ===============================

4. Portfolio

================================ */



.work-nav #filters {

    margin: 0;

    padding: 0;

    list-style: none;

}



.work-nav #filters li {

    margin: 0 10px 30px 0;

    padding: 0;

    float: left;

}



.work-nav #filters li a {

    color: #7F8289;

    font-size: 16px;

    display: block;

}



.work-nav #filters li a:hover {}



.work-nav #filters li a.selected {

    color: #DE5E60;

}



#thumbs {

    margin: 0;

    padding: 0;

}



#thumbs li {

    list-style-type: none;

}



#thumbs li:first-child {

    padding-left: 0;

}



#thumbs li:last-child {

    padding-right: 0;

}



.item-thumbs {

    background: #f0f0f1;

    position: relative;

    overflow: hidden;

    margin-bottom: 30px;

    padding: 5px;

    cursor: pointer;

    height: 185px;

}

.thumbs {

    display: flex;

    background: #fff;

    height: 100%;

}



.thumbs .spip_logos {

    margin: auto;

}



.item-thumbs a + img {

    width: 100%;

}



.item-thumbs .hover-wrap {

    position: absolute;

    display: block;

    width: 100%;

    height: 100%;

    z-index: 999;

    opacity: 0;

    filter: alpha(opacity=0);



    -webkit-transition: all 450ms ease-out 0s;

    -moz-transition: all 450ms ease-out 0s;

    -o-transition: all 450ms ease-out 0s;

    transition: all 450ms ease-out 0s;



    -webkit-transform: rotateY(180deg) scale(0.5, 0.5);

    -moz-transform: rotateY(180deg) scale(0.5, 0.5);

    -ms-transform: rotateY(180deg) scale(0.5, 0.5);

    -o-transform: rotateY(180deg) scale(0.5, 0.5);

    transform: rotateY(180deg) scale(0.5, 0.5);

}



.item-thumbs:hover .hover-wrap,

.item-thumbs.active .hover-wrap {

    background: none;

    opacity: 1;

    filter: alpha(opacity=100);



    -webkit-transform: rotateY(0deg) scale(1, 1);

    -moz-transform: rotateY(0deg) scale(1, 1);

    -ms-transform: rotateY(0deg) scale(1, 1);

    -o-transform: rotateY(0deg) scale(1, 1);

    transform: rotateY(0deg) scale(1, 1);

}



.item-thumbs .hover-wrap .overlay-img {

    position: absolute;

    width: 50%;

    height: 100%;

    opacity: 0.50;

    filter: alpha(opacity=50);

    background: #f65e02;

}



.item-thumbs .hover-wrap .overlay-img-thumb {

    background: #f65e02;

    position: absolute;

    border-radius: 60px;

    top: 50%;

    left: 50%;

    margin: -16px 0 0 -16px;

    color: #fff;

    font-size: 32px;

    line-height: 1em;

    opacity: 1;

    filter: alpha(opacity=100);

    text-align: center;

    width: 32px;

}





/* --- Portolio filter --- */



ul.portfolio-categ {

    margin: 10px 0 30px 0;

    padding: 0;

    float: left;

    list-style: none;

}



ul.portfolio-categ li {

    margin: 0;

    padding: 0 20px 0 0;

    float: left;

    list-style: none;

    font-size: 13px;

    font-weight: 600;

}



ul.portfolio-categ li a {

    display: block;

    padding: 35x 0 35x 0;

    color: #353535;

}



ul.portfolio-categ li.active a:hover,
ul.portfolio-categ li a:hover,
ul.portfolio-categ li a:focus,
ul.portfolio-categ li a:active {

    text-decoration: none;

    outline: 0;

}





/* --- portfolio detail --- */

.top-wrapper {

    margin-bottom: 20px;

}



/* ===============================

5. Listes d'article

================================ */



.liste-references .encart {

    max-height: 310px;

    margin-top: 2em;

    padding: 0.5em;

    text-align: left;

}



.liste-references > div:nth-child(3n+0) {

    padding-right: 0;

}



.liste-references > div:nth-child(3n+1) {

    padding-left: 0;

}



.liste-references .type-projet {

    background: #38beea;

    color: #FFF;

    display: inline-block;

    font-size: 1.4em;
    /*equiv. 28px*/

    line-height: 22px;

    padding: 0.4em;

    text-transform: uppercase;

}



.liste-references time {

    float: right;

    font-family: 'Source Sans Pro Bold', 'Arial Bold', sans-serif;

    font-size: 1.4em;
    /*equiv. 28px*/

    line-height: 1.5em;

}



.liste-references h2 {

    font-size: 0.9em;
    /*equiv. 18px*/

    min-height: 80px;

    margin: 1em 0;

}



.liste-references .logo-reference {

    background: #FFF;

    display: block;

    padding: 0.5em 4em;

}



.liste-references .logo-reference .img {

    height: 110px !important;

}



select.domaine {

    width: 180px;

}



select.annee {

    width: 100px;

}



.pagination-references {

    text-align: center;

    width: 100%;

}



.pagination-references .pagination-label {

    display: none;

    visibility: hidden;

}



.pagination-references ul {

    box-shadow: inherit;

}



.pagination-references ul > li {

    font-family: 'Source Sans Pro Bold', 'Arial Bold', sans-serif;

}



.pagination-references ul > li > a {

    border: 0;

    color: #424349;

    font-size: 1.4em;
    /*equiv. 28px*/

}



.pagination-references ul > li > a:hover,

.pagination-references ul > li > a:focus {

    background: none;

    color: #f65e02;

}



.pagination-references ul > .active > a,

.pagination-references ul > .active > span {

    background: #f65e02;

    border: 0;

    color: #FFF;

}



.pagination-references ul > .active > span {

    font-size: 1.4em;

}



.pagination ul > .disabled > span,

.pagination ul > .disabled > a,

.pagination ul > .disabled > a:hover,

.pagination ul > .disabled > a:focus {

    border: 0;

    opacity: 0.3;

}



.pagination-references .icon-backward,
.pagination-references .icon-forward {

    vertical-align: baseline;

}





/* ===============================

6. Article : Page Une Référence

================================ */




article h2 {

    background: #38beea;

    color: #FFF;

    font-size: 1.7em;

    padding: 0.2em;

    text-transform: uppercase;

}



article h2 small {

    color: #FFF;

}



article .container-article ul > li,
article .container-article ol > li {

    margin-bottom: 0.5em;

}



article .container-article ul > li > ul > li,
article .container-article ol > li > ol > li {

    margin: 0;

}



.container-article h3.spip {

    color: #000;

    font-family: 'Source Sans Pro Bold', 'Arial Bold', sans-serif;

}



.text-article {

    display: inline-block;

    text-align: justify;

}



/*Pour les vidéos incluses en Iframe dans les articles*/

.text-article iframe {

    min-height: 600px;

    width: 100%;

}



/*Légende marqué sur les images en diaporama*/

.page_article #cboxTitle {

    background: #FFF;

    color: #424349;

    display: inline-table;

    top: 0;

}



/* ===============================

7. Rubrique : Pages Présentation, Etude, Outils, Web

================================ */



.rubrique h2 {

    background: #38beea;

    color: #FFF;

    display: inline-block;

    font-size: 1.7em;

    padding: 0.2em;

    text-transform: uppercase;

}



.rubrique.articles h2 {

    margin-top: 1em;

}



.rubrique.outils h2 {

    display: block;

}



.encart-2 > div:nth-of-type(odd) {

    padding-left: 0;

}



.encart-2 > div:nth-of-type(even) {

    padding-right: 0;

}



.rubrique .encart {

    padding: 1em;

}



.rubrique .encart-transparent {

    background: none;

    padding: 0;

}



.encart.pictogramme {

    min-height: 380px;

    margin-bottom: 1.5em;

}



.pictogramme i {

    background: #f65e02;

    border-radius: 80px;

    color: #FFF;

    height: 80px;

    font-size: 1.8em;

    line-height: 80px;

    text-align: center;

    width: 80px;

}



.pictogramme i.fa-iad {

    font-size: 2.2em;

}



.pictogramme h3 {

    display: inline-block;

    margin-left: 0.5em;

    vertical-align: middle;

    width: 80%;

}



.fa-iad {

    font-family: 'Source Sans Pro Bold', 'Arial Bold', sans-serif;

}



.fa-one::before {

    content: "1";

}



.fa-two::before {

    content: "2";

}



.fa-three::before {

    content: "3";

}



.fa-four::before {

    content: "4";

}



.rubrique .text-encart {

    font-size: 0.9em;

    line-height: 1.2em;

}



.rubrique .text-encart ul {

    margin-left: 5px;

    margin-bottom: 0;

}



.rubrique .text-encart ul li {

    list-style-type: none;

    margin-bottom: 0.5em;

}



.rubrique .text-encart ul li:before {

    content: "\f054 ";
    /* Symbole > FontAwesome */

    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.1em;

}



.rubrique .text-encart .spip_doc_titre {

    display: none;

    visibility: hidden;

}



.rubrique .text-encart img + img {

    margin-left: 3em;

}



.equipe figure {

    display: inline-block;

    margin-bottom: 1em;

    text-align: center;

    vertical-align: top;

    min-width: 159px;

}



.equipe figure.odd {

    padding-top: 28px;

}



.equipe figcaption {

    color: #f65e02;

    font-family: 'Source Sans Pro Bold', 'Arial Bold', sans-serif;

    font-size: 0.8em;

    text-transform: uppercase;

}



.container-equipe {

    text-align: center;

    margin-bottom: 1em;

    padding: 0 2em;

}



.hero-rubrique {

    font-size: inherit;

    line-height: inherit;

    margin-bottom: 0em;

    padding-bottom: 2em;

    padding-top: 0em;

    padding-right: 0px;

    padding-left: 0px;

}



.hero-rubrique h2 {

    font-size: 1.7em;
    /*equiv. 34px*/

    text-transform: uppercase;

    text-align: center;

}



.hero-video {

    font-size: inherit;

    line-height: inherit;

    margin-bottom: 0em;

    padding-bottom: 2em;

    padding-top: 2em;

    padding-right: 0px;

    padding-left: 0px;

}



.txt-video-substitute {

    font-style: italic;

    font-size: 0.7em;

    line-height: 1.4em;

    display: inline-block;

    margin-top: 0.5em;

}



/* ===============================

8. Contact : Page Contact

================================ */



.formulaire_contact {

    background: none;

    padding: 0;

}



.formulaire_contact h2 {

    background: #38beea;

    color: #FFF;

    font-size: 1.7em;

    padding: 0.2em;

    text-transform: uppercase;

}



.formulaire_contact .editer {

    margin: 0;

    padding-left: 5.5625em;

}



.formulaire_contact .editer .erreur_message {

    font-size: 0.8em;

}



.formulaire_contact .reponse_formulaire {

    font-size: 0.9em;

}



.formulaire_contact .saisi legend {

    display: none;

    visibility: hidden;

}



.previsu-info {

    background-color: #f0f0f1;

    padding: 8px 35px 8px 14px;

}



.formulaire_contact .btn-envoyer {

    display: inline;

}



.formulaire_contact li.obligatoire label::after {

    content: "*";

    color: #f00;

}



.formulaire_contact .boutons {

    background: none;

    border: 0;

    margin: 0;

    padding: 0;

    text-align: center;

}



.plan-acces iframe {

    border: 0;

    height: 500px;

    width: 100%;

}



/* ===============================

X. Footer

================================ */



.footer-wrap {

    background: #38beea;

    color: #FFF;

    font-size: 0.7em;

    line-height: initial;

}



.coordonnees a {

    color: #FFF;

    text-decoration: underline;

}



.coordonnees a:hover,
.coordonnees a:focus,
.coordonnees a:active {

    background: #f65e02;

    color: #FFF;

    text-decoration: none;

}



.socialtags a {

    background: #FFF;

    border-radius: 50px;

    color: #38beea;

    display: inline-block;

    font-family: "Font Awesome 5 Brands";

    font-size: 2.5em;
    /*equiv 35px*/

    line-height: 50px;

    margin: 0 10px;

    height: 50px;

    text-decoration: none;

    text-align: center;

    width: 50px;

}



.socialtags a.lien-facebook:before {

    content: "\f39e";
    /*Icone Facebook*/

}



.socialtags a.lien-twitter:before {

    content: "\f099";
    /*Icone Twitter*/

}



.socialtags a:hover,
.socialtags a:focus,
.socialtags a:active {

    background: #f65e02;

    color: #FFF;

}



.fil-actualites {

    padding-bottom: 3.5em;

}



.fil-actualites .h4-footer {

    font-family: 'Source Sans Pro Bold', 'Arial Bold', sans-serif;

    font-size: 1.3em;
    /*equiv 18px*/

    text-transform: uppercase;

}



.fil-actualites .h4-footer i {

    background: #424349;

    border-radius: 50px;

    color: #FFF;

    font-size: 1.925em;
    /*equiv 35px*/

    height: 50px;

    line-height: 50px;

    margin-right: 0.3em;

    text-align: center;

    width: 50px;

}



.fil-actualites .container-actu {

    color: #424349;

    font-size: 1.1em;
    /*equiv 15px*/

    line-height: 1.2em;

    margin-bottom: 1em;

}



.fil-actualites .date-actu {

    display: block;

    font-family: 'Source Sans Pro Italic', 'Arial Italic', sans-serif;

}



.fil-actualites a.lien-actu {

    color: #424349;

}



.fil-actualites a.lien-actu:hover,
.fil-actualites a.lien-actu:focus,
.fil-actualites a.lien-actu:active {

    background: #f65e02;

    color: #FFF;

    display: inline-block;

}



.fil-actualites .titre-actu {

    display: inline-block;

    font-family: 'Source Sans Pro Bold', 'Arial Bold', sans-serif;

}



.fil-actualites a.btn-sabonner {

    background: #424349;

    color: #FFF;

    display: inline-block;

    font-size: 1.285em;
    /*equiv 18px*/

    padding: 0.5em 1.5em;

    position: absolute;

    right: 0;

    bottom: 0;

}



.fil-actualites a.btn-sabonner:hover,
.fil-actualites a.btn-sabonner:focus,
.fil-actualites a.btn-sabonner:active {

    background: #f65e02;

}



.copy {

    background: #f0f0f1;

    color: #424349;

    letter-spacing: 0.1em;

    line-height: 45px;

}



/* ===============================

Responsive : Media queries

================================ */

@media (max-width: 1200px) {

    .navbar-collapse {

        margin: 17px 0;

    }



    .encart {

        min-height: initial;

    }



    .pictogramme h3 {

        width: 70%;

    }



    .equipe figure {

        position: relative;

    }



    .equipe figcaption {

        position: absolute;

        bottom: 0;

        width: 100%;

    }



    .equipe figure.odd,
    .equipe figure.even {

        padding: 0 0 28px 0;

    }



    .liste-references .logo-reference {

        padding: 0.5em 3em;

    }

}



@media (min-width:768px) and (max-width: 991px) {
    /*La limite était de 978px sur responsiv-cssify.less, on l'étend à 991px*/

    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container {

        width: 724px;

    }

}



@media (max-width: 991px) {



    header.accueil {

        margin: 0;

    }



    .navbar-collapse {

        margin: 7px 0;

        font-size: 0.9em;

    }



    .flex-caption {

        bottom: 80px;

        font-size: 0.8em;

        width: 350px;

    }



    .flex-control-nav {

        bottom: -30px;

    }



    .header-wrap .header .spip_logos {

        margin-left: 0;

    }



    .header-wrap #nav {

        margin-left: 0;

    }



    .pictogramme h3 {

        width: 60%;

    }



    .rubrique .text-encart img + img {

        margin: 1em 0 0;

    }



    #thumbs li:nth-of-type(odd) {

        padding-left: 0;

    }



    #thumbs li:nth-of-type(even) {

        padding-right: 0;

    }



    .liste-references > div:nth-of-type(odd) {

        padding-left: 0;

        padding-right: 15px;

    }



    .liste-references > div:nth-of-type(even) {

        padding-left: 15px;

        padding-right: 0;

    }



    .socialtags.col-sm-8 {

        width: 80%;

    }



    .text-article iframe {

        min-height: 450px;

    }



}





@media (max-width: 767px) {



    .navbar-static-top,
    .navbar-static-top .navbar-inner {

        position: relative;

    }



    /*Menu bouton par défaut*/

    .navbar-toggle,
    .navbar-toggle.collapsed,

    .navbar-default .navbar-toggle.collapsed:hover,
    .navbar-default .navbar-toggle.collapsed:focus {

        background: #38beea;

        border: 0;

        border-radius: 0;

        margin-top: -5em;

        padding: 20px 15px;

        width: 60px;

        height: 60px;

        -webkit-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

        -webkit-transition: all .5s ease-in-out;

        -moz-transition: all .5s ease-in-out;

        -o-transition: all .5s ease-in-out;

        transition: all .5s ease-in-out;

    }



    /*Menu bouton ouvert*/

    .navbar-default .navbar-toggle.open {

        background: #f65e02;

    }



    /*Menu barres <span> boutons*/

    .navbar-default .navbar-toggle .icon-bar {

        position: absolute;

        background: #fff;

        width: 50%;

        height: 3px;

        -webkit-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

        -webkit-transition: all .25s ease-in-out;

        -moz-transition: all .25s ease-in-out;

        -o-transition: all .25s ease-in-out;

        transition: all .25s ease-in-out;

    }



    .navbar-default .navbar-toggle .icon-bar:nth-child(1) {

        top: 15px;

        width: 50%;

        left: initial;

    }



    .navbar-default .navbar-toggle .icon-bar:nth-child(2),

    .navbar-default .navbar-toggle .icon-bar:nth-child(3) {

        top: 25px;

        -webkit-transform: initial;

        -moz-transform: initial;

        -o-transform: initial;

        transform: initial;

    }



    .navbar-default .navbar-toggle .icon-bar:nth-child(4) {

        top: 38px;

        width: 50%;

        left: initial;

    }



    .navbar-default .navbar-toggle.open .icon-bar:nth-child(1),

    .navbar-default .navbar-toggle.open .icon-bar:nth-child(4) {

        top: 18px;

        width: 0%;

        left: 50%;

    }



    .navbar-default .navbar-toggle.open .icon-bar:nth-child(2) {

        -webkit-transform: rotate(45deg);

        -moz-transform: rotate(45deg);

        -o-transform: rotate(45deg);

        transform: rotate(45deg);

    }



    .navbar-default .navbar-toggle.open .icon-bar:nth-child(3) {

        -webkit-transform: rotate(-45deg);

        -moz-transform: rotate(-45deg);

        -o-transform: rotate(-45deg);

        transform: rotate(-45deg);

    }



    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {

        border: 0;

        background: #f0f0f1;

        margin-right: 15px;

    }



    .navbar .nav {

        float: none;

    }



    .navbar .nav > li {

        float: none;

        width: 100%;

    }



    .navbar-default .navbar-nav .open .dropdown-menu > li > a {

        color: #424349;

    }



    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:active {

        color: #f65e02;

    }



    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {

        background: #f65e02;

        color: #FFF;

    }



    .page_sommaire .hero-unit.home-slider {

        height: auto;

    }



    .flex-caption {

        width: 300px;

    }



    .flex-caption .descriptif-projet {

        display: none;

    }



    .img-slider {

        margin-right: 0;

    }



    h1.rubrique {

        line-height: 1em;

        padding: 2.5em 0 0 1em;

        text-indent: 0;

    }



    .rubrique .text-encart img + img {

        margin: 0 0 0 3em;

    }



    .text-article iframe {

        min-height: 350px;

    }



    .encart-2 > div {

        padding: 0;

    }



    .encart-margin,

    .encart.pictogramme {

        margin: 0;

    }



    .encart-accueil-margin > div.col-xs-12,

    .encart-margin > div.col-xs-12 {

        padding: 0;

        margin-bottom: 2em;

    }



    .savoir-faire .encart {

        min-height: inherit;

    }



    /*Bouton retour en haut de page*/

    #lets-go-top {

        bottom: 10px;

        right: 10px;

    }



}



/*Uniquement pour repositionner les encarts de références : Liste des références*/

@media (max-width: 650px) {



    select.ajax_references {

        display: inline-block;

    }



    .liste-references .encart {

        max-height: 360px;

    }



    .liste-references .logo-reference {

        padding: 0.5em 1em;

    }



}



@media (max-width: 550px) {

    .iad-xss-12 {

        width: 100%;

    }



    .liste-references .encart {

        max-height: 310px;

    }



    .liste-references > div:nth-of-type(odd),

    .liste-references > div:nth-of-type(even) {

        padding: 0;

    }



    .liste-references .logo-reference {

        padding: 0.5em 30%;

    }



}



@media (max-width: 480px) {



    .iad-xss-12 {

        width: 100%;

    }



    .flexslider .flex-caption {

        display: none;

    }



    .bloc-citation {

        padding-top: 0;

    }



    .rubrique .encart {

        padding: 1em 0;

    }



    .pictogramme i {

        display: block;

        margin: auto;

    }



    .pictogramme h3 {

        margin-left: 0;

        margin-top: 0.5em;

        text-align: center;

        width: 100%;

    }



    #thumbs .col-xs-6 {

        width: 100%;

    }



    #thumbs li {

        padding: 0;

    }



    .hero-accueil .introduction,

    .rubrique .introduction {

        text-align: left;

    }



    h1.rubrique {

        padding-top: 1.8em;

        padding-left: 0;

    }



    .text-article {

        text-align: left;

    }



    .text-article iframe {

        min-height: 300px;

    }



    .rubrique .text-encart img + img {

        margin: 1em 0 0;

    }



    .liste-references .encart {

        max-height: 360px;

    }



    .liste-references .logo-reference {

        padding: 0.5em 25%;

    }



    /*Masquer la légende sur l'agrandissement*/

    #cboxTitle {

        display: none !important;



    }



    .formulaire_contact .editer {

        padding-left: 0;

        padding-right: 0;

    }



    .socialtags.col-sm-8 {

        margin: 0 0 2em;

        padding: 0;

        text-align: center;

        width: 100%;

    }



    .socialtags a {

        font-size: 2em;

        line-height: 40px;

        height: 40px;

        width: 40px;

    }



    .logo-footer {

        display: none;

        visibility: hidden;

    }



    .coordonnees-footer {

        padding: 0;

        text-align: center;

        width: 100%;

    }



}

/* ===============================

Carte : markers

================================ */
a.marker-map {

    font-size: 1.4em;

    color: white;

    background-color: #1F2423;

    border-radius: 50%;

    width: 45px;

    height: 45px;

    display: inline-block;

    text-align: center;

    line-height: 1.7;


}

a.marker-liste {
    font-size: 1.4em;

    color: white;

    background-color: #1F2423;

    border-radius: 50%;

    width: 45px;

    height: 45px;

    display: inline-block;

    line-height: 1.7;

    text-align: center;
    margin-right: 15px;
    margin-left: 500px;
}


.lab-etude i {
    color: #ff9933;

    padding-left: 15px;

    padding-right: 6px;

}

.lab-outil i {
    color: #ff33cc;

    padding-left: 15px;

    padding-right: 6px;

}

.lab-web i {
    color: #0082FF;

    padding-left: 15px;

    padding-right: 6px;
}

.lab-list i {
    color: black;

}

a.felche-plus {
    margin: 279px;

    font-size: 20px;

    color: #38beea;
}

.marker-liste.active {
    background-color: #f65e02;
}

.marker-map.active {
    background-color: #f65e02;
}

/* ===============================

équipe: Slide

================================ */
.portrait-equipe {
    width: 65% !important;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1rem;
}

.container-equipe,
.hero-unit {
    padding: 0px;
}

.boucle_1 {
    width: 10rem;
    height: 12rem;
    font-size: 0.8em;
    line-height: 1.5rem;
    margin: 2rem;
    border-top: solid #FF6A00 6px;
    background-color: #E7E7E7;
    position: relative;
}
.container-rectangle{
    opacity: 1;
    display: block;
    transition: .5s ease;
    backface-visibility: hidden;
}
.middle-equipe{
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    height: 100%;
    width: 10rem;
}
.descriptif-equipe,
.type-equipe {
  color: black;
  font-weight: bold;
}




.li-equipe {
    display: flex !important;
    flex-wrap: wrap !important;
}

.container-slider1 .triangle-equipe{
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #ff6a00;
    transform: rotate(225deg);
    position: relative;
    right: 13px;
    top: 0.2rem;
}
.boucle_1:hover .container-rectangle {
   opacity: 0.1;
}
.boucle_1:hover .middle-equipe {
   opacity: 1;
}
.container-equipe .hero-unit.home-slider{
    position: unset !important;
}
/*Elèment au hover*/
.type-equipe{
    color: #FF6A00;
}

.container-type{
    position: relative;
    top: 1rem;
}
.name-equipe{
    display: flex;
    justify-content: center;
    width: 10rem;
        
}


.container-desc{
    padding-top: 2rem;
    height: 9rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    line-height: 20px;
}

@media screen and (max-width: 1200px) {
    
    .boucle_1:active .container-rectangle {
        opacity: 0.2;
    }
    .boucle_1:active .middle-equipe {
        opacity: 1; 
    }
    .li-equipe{
        justify-content: center;
    }
  
    a.marker-map {

        font-size: 1.4em;

        margin-left: 1px;

        margin-top: 15px;

        color: white;

        margin-right: 15px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;
    }
    .boucle_1:active .container-rectangle {
        opacity: 0.3;
    }
    .boucle_1:active .middle-equipe {
        opacity: 1;
    }
}
    @media screen and (max-width: 730px) {
        a.marker-map {

            font-size: 1.4em;

            position: absolute;

            top: 545px;


            color: white;

            margin-right: 15px;

            background-color: #1F2423;

            border-radius: 50%;

            width: 45px;

            height: 45px;

            display: inline-block;

            text-align: center;

            line-height: 1.7;
        }

        a.marker-liste {
            font-size: 1.4em;

            color: white;
            position: absolute;

            top: 0px;
            left: 55px;
            margin-right: 80px;

            background-color: #1F2423;

            border-radius: 50%;

            width: 45px;

            height: 45px;

            display: inline-block;

            line-height: 1.7;

            text-align: center;

        }
    }
}

@media screen and (max-width: 720px) {

    a.marker-liste {
        font-size: 1.4em;

        color: white;

        margin-right: 10px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        line-height: 1.7;

        text-align: center;

    }

}

@media screen and (max-width: 731px) {
    a.marker-liste {
        font-size: 1.4em;

        color: white;
        position: absolute;

        top: 525px;
        left: 610px;
        margin-right: 80px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        line-height: 1.7;

        text-align: center;

    }

    a.marker-map {

        font-size: 1.4em;

        position: absolute;

        top: 510px;


        color: white;

        margin-right: 15px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;
    }

}

@media screen and (max-width: 702px) {
    a.marker-liste {
        font-size: 1.4em;

        color: white;

        position: relative;

        top: 0px;

        left: 50px;

        margin-right: 10px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        line-height: 1.7;

        text-align: center;

    }

    a.marker-map {

        font-size: 1.4em;

        position: absolute;

        top: 545px;

        left: 560px;

        color: white;

        margin-right: 15px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;
    }
}

@media screen and (max-width: 667px) {
    a.marker-map {

        font-size: 1.4em;

        position: absolute;

        top: 590px;

        left: 450px;

        color: white;

        margin-right: 15px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;
    }

    a.marker-liste {
        font-size: 1.4em;

        color: white;

        position: relative;

        top: 0px;

        left: 470px;

        margin-right: 10px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        line-height: 1.7;

        text-align: center;

    }

    @media screen and (max-width: 609px) {
        a.marker-liste {
            font-size: 1.4em;

            color: white;

            position: relative;

            top: 0px;

            left: 50px;

            margin-right: 10px;

            background-color: #1F2423;

            border-radius: 50%;

            width: 45px;

            height: 45px;

            display: inline-block;

            line-height: 1.7;

            text-align: center;

        }
    }
}

@media screen and (max-width: 609px) {
    a.marker-map {

        font-size: 1.4em;

        position: absolute;

        top: 590px;

        left: 270px;

        color: white;

        margin-right: 15px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;
    }
}

@media screen and (max-width: 592px) {
    a.marker-map {

        font-size: 1.4em;

        position: absolute;

        top: 620px;

        left: 270px;

        color: white;

        margin-right: 15px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;
    }
}

@media screen and (max-width: 590px) {
    a.marker-map {

        font-size: 1.4em;

        position: absolute;

        top: 595px;

        left: 270px;

        color: white;

        margin-right: 15px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;
    }
}

@media screen and (max-width: 587px) {
    a.marker-map {

        font-size: 1.4em;

        position: absolute;

        top: 620px;

        left: 300px;

        color: white;

        margin-right: 15px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;
    }

    a.marker-liste {
        font-size: 1.4em;

        color: white;

        position: relative;

        top: 0px;

        left: 100px;

        margin-right: 10px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        line-height: 1.7;

        text-align: center;

    }
}

@media screen and (max-width: 526px) {
    a.marker-map {

        font-size: 1.4em;

        position: absolute;

        top: 648px;

        left: 290px;

        color: white;

        margin-right: 15px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;
    }
}

@media screen and (max-width: 458px) {
    a.marker-map {

        font-size: 1.4em;

        position: absolute;

        top: 675px;

        left: 285px;



        color: white;

        margin-right: 15px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;
    }

    a.marker-liste {
        font-size: 1.4em;

        color: white;

        position: relative;

        top: 0px;

        left: 75px;

        margin-right: 10px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        line-height: 1.7;

        text-align: center;

    }
}

@media screen and (max-width: 418px) {
    a.marker-map {

        font-size: 1.4em;

        position: absolute;

        top: 705px;

        left: 285px;

        color: white;

        margin-right: 15px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;
    }
}

@media screen and (max-width: 386px) {
    a.marker-map {

        font-size: 1.4em;

        position: absolute;

        top: 750px;

        left: 270px;

        color: white;

        margin-right: 15px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;
    }
}

@media screen and (max-width: 386px) {
    a.marker-map {

        font-size: 1.4em;

        position: relative;

        top: 0px;

        left: 7px;

        color: white;

        margin-right: 15px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;
    }

    a.marker-liste {
        font-size: 1.4em;

        color: white;

        position: relative;

        top: 0px;

        left: 7px;

        margin-right: 10px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        line-height: 1.7;

        text-align: center;

    }
}

@media screen and (max-width: 385px) {
    a.marker-map {

        font-size: 1.4em;

        position: relative;

        top: -10px;

        left: 170px;

        color: white;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;

    }

    a.marker-liste {
        font-size: 1.4em;

        color: white;

        position: relative;

        top: -10px;

        left: 180px;

        margin-right: 10px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        line-height: 1.7;

        text-align: center;

        padding-bottom: 10px;

    }
}

@media screen and (max-width: 365px) {
    a.marker-map {

        font-size: 1.4em;

        position: relative;

        top: -10px;

        left: 150px;

        color: white;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;

    }

    a.marker-liste {
        font-size: 1.4em;

        color: white;

        position: relative;

        top: -10px;

        left: 160px;

        margin-right: 10px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        line-height: 1.7;

        text-align: center;

        padding-bottom: 10px;

    }
}

@media screen and (max-width: 330px) {
    a.marker-map {

        font-size: 1.4em;

        position: relative;

        top: -10px;

        left: 120px;

        color: white;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;

    }

    a.marker-liste {
        font-size: 1.4em;

        color: white;

        position: relative;

        top: -10px;

        left: 130px;

        margin-right: 10px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        line-height: 1.7;

        text-align: center;

        padding-bottom: 10px;

    }
}

@media screen and (max-width: 305px) {
    a.marker-map {

        font-size: 1.4em;

        position: relative;

        top: -10px;

        left: 100px;

        color: white;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        text-align: center;

        line-height: 1.7;

    }

    a.marker-liste {
        font-size: 1.4em;

        color: white;

        position: relative;

        top: -10px;

        left: 110px;

        margin-right: 10px;

        background-color: #1F2423;

        border-radius: 50%;

        width: 45px;

        height: 45px;

        display: inline-block;

        line-height: 1.7;

        text-align: center;

        padding-bottom: 10px;

    }
}

@media screen and (max-width: 310px) {

    .lab-web i {
        color: #0082FF;

        position: absolute top: 30px;

        left: -5px;
    }


    .lab-etude i {
        color: #ff9933;

        padding-left: 0px;

        padding-right: 0px;

    }

    .lab-outil i {
        color: #ff33cc;

        padding-left: 5px;

        padding-right: 2px;

    }

    .lab-web i {
        color: #0082FF;

        padding-left: 0px;

        padding-right: 0px;
    }
}