body {font-family:"Open Sans", sans-serif;font-weight: 300;color:black;}
section:not(.banniere,#banniere-formation,#contact){padding: 5vh; margin: 0 auto;}
.row {margin-left: 1px;margin-right: 1px;}

/**
* TITRE SECTIONS
*/

h2 {padding-bottom: 20px;font-weight: bold;color: #046197;font-size: 38px !important;letter-spacing: -2px;text-align: center;}
h2::after {content: '';position: absolute;bottom: 0px;width: 6%;right: 47%;border-bottom: 3px solid #046197;}
.titre-section {padding-bottom: 50px; }

/**
 * NAVBAR
 */

.navbar {
    min-height: 60px;
    box-shadow: 0 10px 25px rgbA(0, 0, 0, 0.4);
    background-color: #046197;
    border-bottom: none;
    padding: 0 20px;
}

@media(max-width:820px) {
    .nav-item a {padding: 10px 2vh;}
}

@media (max-width: 768px) {
    .nav-item a {padding: 5px !important;}
}

.navbar-brand {height: 60px;padding-top: 12px;margin-right: 10px;}
.navbar-brand img {cursor: pointer;max-height: 35px;max-width: 250px;}
.navbar-brand img:hover {opacity: 0.8;}
.nav-item {margin: 13px 0 0 0;}
.nav-item a {color: white !important;font-size: 16px;padding: 6px 20px !important;font-weight: 300 !important;}
.nav-item a:hover {opacity:0.7;text-decoration: none;}
.navbar-default .navbar-toggle {border-color: white;}
.navbar-default .navbar-toggle .icon-bar {background-color: white;}
.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus {background-color: white;}
.navbar-default .navbar-toggle:hover .icon-bar,.navbar-default .navbar-toggle:focus .icon-bar {background-color: #046197;}
.navbar form div {display: inline-block;height: 20px;}
.navbar form a {color: white;cursor: pointer;padding-left: 5px;}
.navbar form .btn {color: #046197;margin: 0;padding: 9px 12px;outline: none;}
.nav-item .form-inline{margin:0;}

/**
* BANNIERE
*/

.banniere:not(#banniere-formation,#banniere-mentions) {padding-top: 60px;}

#banniere-formation {
    background-image: url(../images_formation/fond-formation.jpg);
    background-size: cover;
}

#banniere-formation .transform-formation {padding: 2% !important;margin: 0 !important;}
#banniere-formation .top-formation {padding-top: 8% !important;}
#banniere-formation .logo_formation {width: 25%;}
#banniere-formation h1.slogan-formation {font-size: 7vh;font-weight: bold;color: white;}
#banniere-formation h3.slogan-formation {font-size: 3.5vh;color: white;}

.banniere .lang {position: absolute;right: 20px;top: 70px;z-index: 1;}
.banniere .lang .bold {font-weight: bold;text-decoration: none;cursor: default;}
.banniere .lang .bold:hover {font-weight: bold;text-decoration: none;}
.banniere .lang a {cursor: pointer;font-size: 14px;color: white;text-decoration: none;padding: 0 5px;}
.banniere .lang a:hover {text-decoration: underline;}
.banniere .filtre {color: #fff;background: rgba(0, 61, 96, 0.75);background-size: cover;}
.banniere #texte_intro h1 {line-height: 1.5;margin: 5vh 0;font-weight: bold;letter-spacing: -2px;}
.banniere #texte_intro h3 {line-height: 1.5;margin: 4vh 0;letter-spacing: -2px;}

@media only screen and (max-width:460px) {
    .banniere #texte_intro img {width: 100%;}
    .banniere #texte_intro h1 {font-size: 25px;}
    .banniere #texte_intro h3 {font-size: 15px;}
    #down-arrow a {font-size: 15px;}
}

@media only screen and (min-width:460px) {
    .banniere #texte_intro img {width: 90%;}
    .banniere #texte_intro h1 {font-size: 30px;}
    .banniere #texte_intro h3 {font-size: 20px;}
    #down-arrow a {font-size: 20px;}
}

@media only screen and (min-width:576px) {
    .banniere #texte_intro img {width: 80%;}
    .banniere #texte_intro h1 {font-size: 40px;}
    .banniere #texte_intro h3 {font-size: 30px;}
    #down-arrow a {font-size: 25px;}
}

@media only screen and (min-width:768px) {
    .banniere #texte_intro img {width: 60%;}
    .banniere #texte_intro h1 {font-size: 40px;}
    .banniere #texte_intro h3 {font-size: 30px;}
    #down-arrow a {font-size: 25px;}
}

@media only screen and (min-width:992px) {
    .banniere #texte_intro img {width: 60%;}
    .banniere #texte_intro h1 {font-size: 45px;}
    .banniere #texte_intro h3 {font-size: 35px;}
    #down-arrow a {font-size: 30px;}
}

/**
 * FLECHE
 */

#down-arrow {position: relative;margin-top: 8vh;margin-bottom: 20px;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
#down-arrow a {color: #FFFFFF;}
#down-arrow a:hover,#down-arrow a:focus {cursor: pointer;text-decoration: none;color: rgb(150, 190, 223);}

.go_top {
    background: url('../images_sifoee/top.png') no-repeat;
    background-color: rgba(0, 0, 0, 0.3);
    background-position: 50% 50%;
    display: none;
    position: fixed;
    width: 70px;
    height: 60px;
    bottom: 0;
    right: 1.5%;
    text-indent: -9999px;
    z-index: 200;
}

#floating-arrow {
    -webkit-animation-name: floating-arrow;
    animation-name: floating-arrow;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes floating-arrow {
    from {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    } 65% {
        -webkit-transform: translate(0, 15px);
        transform: translate(0, 15px);
    } to {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes floating-arrow {
    from {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    } 65% {
        -webkit-transform: translate(0, 15px);
        transform: translate(0, 15px);
    } to {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

/**
* CATALOGUE FORMATION
*/

.production-formation,.transport-formation,.distribution-formation {padding: 0;}

.production-formation:hover,
.transport-formation:hover,
.distribution-formation:hover {
    background: linear-gradient(rgb(255, 255, 255), rgb(238, 238, 238), rgb(238, 238, 238), rgb(255, 255, 255));
}

.electricite-formation,.certification {margin: 0;padding: 0 10%;}
.img-top-container-formation {position: relative;text-align: center;color: #046197;}
.img-top-container-formation img {width: 50%;}
a#titre-lien-formation:hover {text-decoration: none;}
.titre-lien-formation {font-size: 6vh;font-variant: petite-caps;font-weight: bold;}
.lieu-formation{color: #046197;font-weight: 600;letter-spacing: -1.5px;}
.h3-formation {
    color: black;
    padding: 20px 0 !important;
    font-weight: 300 !important;
    line-height: 1.65;
    font-size: 30px !important;
}
.certification img {max-width: 100%;max-height: 100px;}

/**
 * FORMATIONS PHARES ET SIMULATEURS
 */

#formations-phares,#logiciels-formation {background-color: #F0F0F0;}
#formations-phares{padding-bottom: 0 !important;}
#logiciels-formation {padding-top: 0 !important;}
.img-demande-formation {height: 50%;padding: 10px;}
.demande-formation {height: 80%;background-color: #fff;border-radius: 10px;box-shadow: 0 0 10px rgbA(0, 0, 0, 0.20);}
#demande-formation {color: black;text-decoration: none;}
#demande-formation:hover {color: white;}
.border-demande {height: 300px;display: flex;flex-direction: column;align-items: center;}
.demande-formation:hover {background-color: #046197;}
.sous-titre-demande {font-size: 2.5vh;font-weight: 600;text-align: center;letter-spacing: -1.5px;}
.description-demande {font-size: 2.5vh;font-weight: 300;text-align: center;padding: 0 10px;}
.img-demande-formation img {max-width: 100%;height: 90px;}

#all-div-ht {background-image: url(../images_formation/formation-pass-htb.jpg);}
#all-div-linky {background-image: url(../images_formation/formation-linky.jpg);}
#all-div-habilitations {background-image: url(../images_formation/formation-habilitations.jpg);}
#all-div-affaire {background-image: url(../images_formation/formation-charge-affaires.jpg);}
#all-div-hydraulique {background-image: url(../images_formation/formation-hydraulique.jpg);}
#all-div-enr {background-image: url(../images_formation/formation-raccordement-enr.jpg);}
#all-div-adnt {background-image: url(../images_formation/formation-adnt-3001.jpg);}
#all-div-habilitation {background-image: url(../images_formation/logiciel-monhabilitation.jpg);}
#all-div-centrale {background-image: url(../images_formation/logiciel-macentralediesel.jpg);}
#all-div-score {background-image: url(../images_formation/logiciel-score.jpg);}
#all-div-kpfi {background-image: url(../images_formation/logiciel-kpfi.jpg);}
#all-div-msg {background-image: url(../images_formation/logiciel-msg.jpg);}
#all-div-alternateur {background-image: url(../images_formation/logiciel-monalternateur.jpg);}

.all-div
{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 50%;
    border-radius: 10px 10px 0 0;
    width: 100%;
}

/**
 * SUITE LEANEO
 */

#leaneo {background-color: #046197;}
#leaneo .decouverte,#leaneo .modules .row {display: flex;align-items: center;}
#leaneo .decouverte {padding-bottom: 30px;}
#leaneo h3 {font-size: 40px;color: white;letter-spacing: -1px;}
#leaneo img:hover {opacity: 0.7;cursor: pointer;}
#leaneo .modules a {color: white;}
#leaneo h4 {color: white;font-weight: bold;letter-spacing: -1px;}

@media only screen and (max-width:750px) {
    #leaneo .row {display: block;padding: 30px 0;}
    #leaneo img {width: 100%;}
}

/**
 * SATISFACTION CLIENT
 */

#satisfaction-client{background-color: #fff;padding: 5vh 0;margin: 0 auto;}
.statistiques{font-size:20px;}
.chiffre-cle{font-size: 50px;color: #046197; font-weight:bold; letter-spacing:-1.5px;}

/**
 * TEMOIGNAGE SLIDE
 */

#temoignage {background-color: #f0f0f0;margin: 0 5vh !important;}
.slideshow-container {position: relative;padding:0 50px;}
.text-temoignage {font-size: 25px;text-align: justify;}
.client-temoignage {text-align: end;font-size: 20px;letter-spacing: -1.5px;}

.img-temoignage1 {
    background: url('../images_sifoee/temoignages/temoignage-dwe.jpg') center no-repeat;
    width: 150px;
    height: 150px;
    margin: auto auto auto 40px;
    border-radius: 50%;
}

.img-temoignage2,
.img-temoignage3 {
    background: url('../images_sifoee/temoignages/temoignage-sifoee.jpg') center no-repeat;
    width: 150px;
    height: 150px;
    margin: auto auto auto 40px;
    border-radius: 50%;
}

/**
* CLIENTS SLIDE
*/

#clients-formation {background-color: #ffffff;padding: 5vh 0;}
#clients-formation img {max-width: 300px;max-height: 90px;}
.confiance-formation {text-align: center;padding: 15px;}

/**
*  SLIDE
*/

.prev,.next{
    border-radius: 50%;
    color: #046197;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    height: 50px;
    padding: 10px 20px;
    position: absolute;
    transform: translate(0, -50%);
    transition: 0.6s ease;
    top: 50%;
    width: 50px;
}

.prev{left: 10px;}
.next{right: 10px;}
.prev:hover, .next:hover {background-color: #CCCCCC;text-decoration: none;}

.ease {
    -webkit-animation-name: ease;
    -webkit-animation-duration: 1s;
    animation-name: ease;
    animation-duration: 1s;
}

@-webkit-keyframes ease {
    from {left: -300px;opacity: 0} 
    to {left: 0;opacity: 1}
}

@keyframes ease {
    from {left: -300px;opacity: 0} 
    to {left: 0;opacity: 1}
}

/**
 * PDF
 */

a.pdf {
    color: white;
    font-size: 20px;
    display: inline-block;
    height: 48px;
    background: url('../../webroot/images_sifoee/pdf-icon.png') no-repeat 0 50% #b43337;
    line-height: 48px;
    padding: 0 20px 0 60px;
    font-variant: small-caps;
    border-radius: 24px;
}

a.pdf:hover {color: white;opacity: 1;background-color: #E14045;text-decoration: none;}
a.pdf:visited,a.pdf:link,a.pdf:active,a.pdf:focus {text-decoration: none;outline: none;}

/**
 * CONTACT
 */

#contact {
    background: url('../images_sifoee/contact.png');
    background-size: cover;
    background-attachment: fixed;
    min-height: 265px;
}

#contact .filtre {color: white;height: 300px;background: rgba(0, 61, 96, 0.75);background-size: cover;}
#contact .coordonnees {font-size: 20px;}
#contact .coordonnees h3 {color: white;padding: 40px 0 20px 0;margin-top: 0;font-size: 28px;line-height: 1.6;letter-spacing: -1px;font-weight: bold;}
.dummymail, .dummytel {unicode-bidi: bidi-override;direction: rtl;}
.dummymail:hover, .dummytel:hover {cursor: pointer;text-decoration: underline;}
#contact .adresse {padding-top: 40px;padding-bottom:40px;font-size:20px;}
#contact .adresse a {color: white;}
#contact .adresse img {margin: 15px 0;}
#contact .adresse img:hover {cursor: pointer;opacity: 0.7;}

@media only screen and (max-width:1000px) {
    #contact, #contact .filtre {height: auto;}
}

@media only screen and (max-width:450px) {
    #contact {height: auto;}
}

.contact-vspace {
    margin-bottom: 25px;
}

h2.simple-blue {
    color: #046197;
}

h2.simple-blue::after {
    content: none;
}

/* Liens non visités */
a.retour-accueil:link {
    color: #046197;
}

/* Liens visités */
a.retour-accueil:visited {
    color: #046197;
}

/* Liens survolés (hover) */
a.retour-accueil:hover {
    color: #046197;
}

/* Liens actifs (en cours de clic) */
a.retour-accueil:active {
    color: #046197;
}

.phoneNumber {
    display: flex;

    #countryCode {
        width: 8ch;
        margin-right: 5px;
    }
}