@import url('https://fonts.googleapis.com/css?family=Montserrat:100');

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    font-weight: 500;
}

.theme-bg {
    background-color: #FF9900;
}

.lightGrey-bg {
    background-color: #f7f9fa;
}

.darkGrey-bg {
    background-color: #222222;
}

.theme-text {
    color: #ff9900;
}

.black-text {
    color: black;
}

.white-text {
    color: white;
}

.light {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 100 !important;
}

.bold {
    font-weight: 600 !important;
}

.mt {
    margin-top: 30px;
}

.h-xs{
    height: 100px;
}

.text-middle-xs{
    line-height: 100px;
}

h2.big{
    font-size: 2.5em;
}

.no-p-b{
    padding-bottom: 0 !important;
}

/*RESPONSIVE*/

@media (max-width: 767px) {
    img {
        max-width: 100%;
    }

    .section h3, .section h4 {
        font-size: 3rem !important;
    }
}

/*Menu*/
.navbar-fixed-top {
    background-color: transparent;
    color: white;
    border-bottom: none !important;
    height: 71px !important;
    width: 100vw;
}

.navbar-fixed-top .logo{
    position: relative;
}

.navbar-fixed-top .logo a {
    margin: 0;
    padding: 0 0 0 0;
}

.navbar-fixed-top .logo p{
    position: absolute;
    display: block;
    top: 25px;
    width: 150%;
    left: 0;
    font-style: italic;
    text-align: left;
}

.navbar-fixed-top img.logoBlanc {
    height: auto;
    width: 200px;
    display: block;
}

.navbar-fixed-top img.logoNoir {
    height: auto;
    width: 200px;
    display: none;
}

.navbar-header button, .open-nav-list .navbar-header button {
    display: none;
}

.top-nav-collapse{
    background-color: white;
    border-bottom: solid 1px #dddddd !important;
}

.top-nav-collapse.navbar-fixed-top img.logoBlanc {
    display: none;
}

.top-nav-collapse.navbar-fixed-top img.logoNoir {
    display: block;
}

.top-nav-collapse.navbar-fixed-top .navbar-header .logo p{
    display: none;
}

.navbar-fixed-top{
    height: 50px;
    padding: 20px 100px;
}

.nav-list ul{
    margin: 0;
    padding: 0;
    float: right;
}

.nav-list ul li{
    display: inline-block;
    list-style-type: none;
}

.nav-list ul li a{
    color: white;
    margin: 0 20px;
    padding: 5px;
    font-size: 1.6em;
    font-weight: 400;
    transition: all ease 200ms;
}

@media (min-width: 1362px){
    .header-session .nav-list ul li a {
        font-size: 1.3em;
    }
}

.nav-list ul li a:hover, .top-nav-collapse ul li a:hover {
    color: #ff9900 !important
}

.top-nav-collapse.navbar-fixed-top .nav-list ul li a{
    color: black;
}

.nav-list ul li a i{
    display: none;
}

@media (min-width: 1203px) {
    .connexion, .inscription {
        position: relative;
        font-size: 1.4em !important;
        margin-right: 0 !important;
        margin-left: 20px !important;
        padding: 5px 12px !important;
    }

    .nav-list ul li a.connexion:hover, .inscription:hover {
        color: white !important;
    }

    .top-nav-collapse #name{
        color: black !important;
    }


    .connexion:hover:before, .inscription:before {
        content: '';
        background-color: rgba(255, 255, 255, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 5px;
        opacity: 1;
        transition: all ease 250ms;
        transform: scale(1);
    }

    .connexion:before, .inscription:hover:before {
        opacity: 0;
        transform: scale(0.9);
    }

    .connexion:hover:after, .inscription:after {
        content: '';
        opacity: 0;
        transition: all ease 250ms;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border: white 1px solid;
        border-radius: 5px;
    }

    .connexion:after, .inscription:hover:after {
        opacity: 1;
    }

    .inscription:after {
        border: #ff9900 solid 1px;
    }

    .inscription:before {
        background-color: rgba(255, 153, 0, 0.8);
        z-index: -1;
    }

    .unlog-dropdown-container {
        position: relative;
    }

    .unlog-dropdown {
        position: absolute;
        opacity: 0;
        top: 20px;
        transition: all ease 450ms;
        width: 100%;
        z-index: -10000;
    }

    .unlog-dropdown.active {
        opacity: 1;
        top: 40px;
    }

    .unlog-dropdown li {
        position: absolute;
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 5px;
        left: 10px;
        transition: all ease 250ms
    }

    .unlog-dropdown li.unlog-dropdown-endsub {
        background-color: #36AD7B;
    }

    .unlog-dropdown li.unlog-dropdown-sub {
        top: 70px;
        background-color: white;
        color: black;
    }

    .unlog-dropdown li.unlog-dropdown-endsub:hover {
        background-color: #44D99A;
    }

    .unlog-dropdown li.unlog-dropdown-sub:hover {
        background-color: #eeeeee;
    }

    .unlog-dropdown li a {
        width: 100%;
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center;
    }

    .unlog-dropdown li a p {
        font-size: 0.6em;
        top: 0;
        margin: 0;
        padding: 0 5px 5px 5px;
        text-align: center;
        transition: all ease 150ms;
    }

    .unlog-dropdown li.unlog-dropdown-endsub a p {
        color: white
    }

    .unlog-dropdown li.unlog-dropdown-sub a p {
        color: black;
    }

    .unlog-dropdown li.unlog-dropdown-sub .unlog-white{
        display: none;
    }

    .unlog-dropdown li.unlog-dropdown-sub .unlog-black {
        display: block;
    }

    .unlog-dropdown li img{
        width: 30px;
        height: 30px;
        margin: 2px auto;
        padding: 2px;
        border-radius: 50%;
        text-align: center;
    }
}

.top-nav-collapse .unlog.connexion:hover{
    color: black !important;
}

.top-nav-collapse .connexion:before{
    background-color: rgba(0,0,0,0.1);
}

.top-nav-collapse .connexion:after{
    border: black 1px solid;
}
/*Menu responsive*/

@media (max-width: 1203px) {

    .navbar-fixed-top{
        height: 50px !important;
        padding: 0 10px;
    }

    .open-nav-list.navbar-wrapper .navbar-fixed-top.top-nav-collapse{
        background-color: #f17a00;
        border: none !important;
    }

    .open-nav-list.navbar-wrapper .navbar-fixed-top.top-nav-collapse .logoBlanc{
        display: block
    }

    .open-nav-list.navbar-wrapper .navbar-fixed-top.top-nav-collapse .logoNoir{
        display: none;
    }

    .navbar-header button, .open-nav-list .navbar-header button{
        background-color: rgba(255,255,255,0.5);
        border: none;
        width: 40px;
        height: 30px;
        border-radius: 5px;
        display: block;
    }

    .navbar-header button span, .open-nav-list .navbar-header button span {
        background-color: white;
        width: 100%;
        height: 3px;
        margin: 4px 0;
        display: block;
    }

    .top-nav-collapse .navbar-header button {
        background-color: transparent;
    }

    .top-nav-collapse .navbar-header span {
        background-color: black;
    }

    section{
        transition: all ease 500ms !important;
    }

    .open-nav{
        transform: translate(-60vw,20px) scale(0.9);
        z-index: 2000;
        position: relative;
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }

    #navbar{
        z-index: 0;
        right: 0;
        top: 0;
        width: 60vw;
        height: 90vh;
        padding: 0;
        margin: 10vh 0 0 0;
        transform: translate(100vw);
        transition: all ease 650ms;
        background-color: transparent;
        position: relative;
    }

    .open-nav-list #navbar{
        transform: translate(40vw);
        width: 60vw;
    }

    #navbar ul {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: all ease 500ms;
        padding: 0;
    }

    #navbar ul li{
        list-style-type: none;
    }

    #navbar ul li a{
        color: white;
        display: block;
        font-size: 1.3em;
        padding: 20px;
        font-weight: 500;
        margin: 0;
    }

    #navbar ul li a.unlog {
        font-size: 1.6em;
    }

    .open-nav-list #navbar ul li a i{
        display: inline;
        padding-right: 10px;
    }

    #navbar ul li.dropdown {
        display: none;
    }

    .navbar-header{
        width: 100%;
        z-index: 500;
    }

    .navbar-header button, .navbar-header .logo{
        display: inline-block;
        margin-top: 10px;

    }

    .navbar-header button{
        float: right;
    }

    .navbar-header .logo{
        margin-top: 15px;
    }

    .unlog-dropdown-container {
        position: relative;
        display: block;
        top: 0;
        transform: translateY(0) !important;
    }

    .unlog-dropdown {
        display: block;
        transform: translateY(0) !important;
    }

    .unlog-dropdown li {
        width: 150%;
        margin: 20px 20px !important;

    }

    .unlog-dropdown li a{
        width: 100%;
        padding: 0 !important;
        margin: 20px 0 !important;
    }

    .unlog-dropdown li a p{
        display: initial;
        width: 100%;
        padding: 0!important;
        font-size: 1.2em !important;
        margin-left: 10px !important;
    }

    .unlog-dropdown li a img{
        display: inline-block;
        width: 25px;
    }

    .unlog-dropdown-container > a {
        display: none !important;
    }

    .unlog-dropdown li.unlog-dropdown-sub .unlog-white{
        display: inline-block;
    }

    .unlog-dropdown li.unlog-dropdown-sub .unlog-black {
        display: none;
    }
}

@media (max-width : 400px){
    #navbar > ul a, #navbar > ul p{
        font-size: 15px !important;
    }

    .unlog-dropdown li a img{
        width: 15px;
    }
}

/*Section*/

.section.sectionEntete {
    padding: 170px 0;
    background: radial-gradient(circle farthest-side at center bottom, #333333, #111111 70%);
    background-size: cover;
    color: white;
    z-index: 10;
}

@media (max-width: 991px) {
    .section.sectionEntete{
        padding: 80px 0 230px 0;
    }
}

.section.sectionEntete.sectionAccueil {
    background: url("../img/img_vitrine/background2.jpg");
    background-size: cover;
    height: 100vh;
    padding: 30vh 0;
}

section.section#anchor{
    padding-top: 50px;
}

section.section#anchor > .container > p {
}

.section.sectionService {
    height: initial !important;
    position: relative;
    background: url('../img/img_vitrine/background2.jpg');
    background-size: cover;
}

.section.sectionSubtitle{
    padding: 50px;
    margin: 0;
}

.section.sectionSubtitle h3, .sectionGrey.section h1{
    font-weight: 300;
    color: black !important;
    margin-top: 20px;
}

.section.sectionParticulier {
    background: url("../img/img_vitrine/particulierBackground.jpg");
    background-size: cover;
    color: black;
    padding-bottom: 50px;
}

.section.sectionEntete.sectionEditeur {
    background: url("../img/img_vitrine/editeur.jpg");
    background-size: cover;
    padding-bottom: 50px;
}

section.sectionEntete.section.sectionParticulier h2, section.sectionEntete.section.sectionEditeur h2 {
    font-size: 2.5em;
    line-height: 1.2em;
}

@media (max-width: 500px){
    section.sectionEntete.section.sectionParticulier h2, section.sectionEntete.section.sectionEditeur h2{
        font-size: 2em;
        line-height: 35px;
        margin-top: 40px;
    }
}

.section.sectionEntete span {
    color: #FF9900;
}

.section {
    text-align: center;
    background-color: white;
    padding: 90px 0;
    position: relative;
}

.section.sectionGrey {
    background-color: #f2f3f4;
    z-index: 10;
}

.section.sectionColor, .sectionColor {
    background: radial-gradient(circle farthest-side at center bottom, #FF9900, #f17a00 70%);
    color: white;
    font-weight: 700;
}

.sectionColor h3, .sectionColor h4{
    visibility: visible !important;
}

.section:last-of-type {
    padding-bottom: 150px;
}

.section.serviceClient {
    background: url('../img/img_vitrine/callcenter.jpg');
    background-size: cover;
    color: white;
}

.bandeau {
    position: absolute;
    z-index: 20;
    width: 100vw;
    color: white;
    background-color: rgba(0,0,0,0.7);
    left: 0;
    height: 200px;
    padding-top: 20px;
    bottom: 0;
}

.bandeau-container{
    max-width: 1170px;
    width: 100%;
    height: 100%;
    margin: auto
}

.bandeau .bloc-bandeau{
    font-size: 1.4em;
    display: table-cell;
    width: 25%;
    text-align: center;
}

.bandeau p{
    font-weight: 500;
}

.bandeau a{
    display: inline-block;
    padding: 20px 40px;
    margin: 10px 10px;
    height: 100% !important;
    line-height: 1 !important;
}

.bandeau a.login-btn-validate.login-btn-submit:hover:after{
    display: none;
}

.bandeau a.login-btn-validate.login-btn-submit:before {
    background: #36AD7B !important;
}

.bandeau a.login-btn-validate.login-btn-submit:hover:before {
    background: #44D99A !important;
    opacity: 1;
    transform: scale(1);
}

.bandeau a p{
    display: inline-block;
    color: white !important;
    font-weight: 500 !important;
    padding: 10px;
    vertical-align: middle;
}

.bandeau a img{
    display: inline-block;
    z-index: 100;
    width: 75px;
    height: auto;
    position: inherit;
    border-right: 2px white solid;
    padding: 0 10px 0 0;
}

.bandeau a:hover p{
    color: white !important;
}

.bandeau a.login-btn-submit.login-btn-home{
}

.bandeau a.login-btn-submit.login-btn-home:after {
    display: none;
}

.bandeau a.login-btn-submit.login-btn-home:hover:before{
    background-color: rgba(255,153,0,1) !important;
    opacity: 1;
    transform: scale(1);
}

.bandeau a.login-btn-submit.login-btn-home:hover p {
    color: white !important;
}

.bandeau .arrow-bandeau{
    text-align: center;
    border-left: outset white 2px;
    width: 18%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

.bandeau .arrow-bandeau:hover{
    cursor: pointer;
}

.bandeau .arrow-bandeau p{
    font-weight: 500;
}

.bandeau .arrow-bandeau a{
    color: white;
    display: block;
}

.bandeau .arrow-bandeau img{
    width: 20%;
    animation: arrowMove ease-out infinite 2s;
}


@keyframes arrowMove{
    0%{
        transform: translateY(-5px);
    }
    50%{
        transform: translateY(-10px);
    }
    100%{
        transform: translateY(-5px);
    }
}

@media (max-width: 1102px){
    .bandeau{
        display: none;
    }
}

.textuel .section {
    padding: 20px 0;
}

.textuel .sectionEntete {
    padding: 70px 0;
}

.textuel .section:last-of-type {
    padding-bottom: 150px;
}

/*Formulaire*/

@media (min-width: 991px) {
    .section form .formFront {
        display: flex;
        position: relative;
        color: black;
        width: 50%;
        margin: auto;
        justify-content: center !important;
    }

    .section form .input-group.formFront span {
        position: absolute;
        z-index: 10;
        height: 100%;
        width: auto;
        border: 1px solid #e5e6e7;
        font-size: 17px;
        padding-top: 10px;
        border-top-left-radius: 5px !important;
        border-bottom-left-radius: 5px !important;
    }

    .section form .input-group.formFront span.date {
        border-radius: 0 !important;
        border-left: none;
    }

    .section form .input-group.formFront input#phone {
        color: black;
        font-size: 1.5em;
        padding: 20px 0 20px 45px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .section form .input-group.formFront input#date {
        color: black;
        font-size: 1.5em;
        padding: 20px 0 20px 45px;
    }

    .section form .formFront button {
        padding: 21px;
        line-height: 0;
        position: relative;
        width: 50px;
        background: #ff9900;
        border: none;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        color: white;
        transition: all ease 250ms;
    }

    .section form .formFront button:hover {
        background: #de8600;
    }


    .section form .formFront button p{
        font-size: 1.7em;
        position: absolute;
        left: 25%;
        top: 20%
    }
}

@media (max-width: 991px) {
    .section #data_1{
        position: relative;
    }

    .section form .formFront {
        display: flex;
        position: relative;
        color: black;
        width: 90%;
        margin: auto;
        flex-direction: column;
        justify-content: center !important;

    }

    .section form .input-group.formFront span {
        position: absolute;
        z-index: 10;
        height: 100%;
        width: 42px;
        border: 1px solid #e5e6e7;
        font-size: 17px;
        padding-top: 10px;
        border-top-left-radius: 5px !important;
    }

    .section form .input-group.formFront span.date {
        border-radius: 0 !important;
        border-left: none;
        left: 0;
        height: 100%;
        padding-bottom: 13px;
    }

    .section form .input-group.formFront input#phone {
        color: black;
        font-size: 1.5em;
        padding: 20px 0 20px 45px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .section form .input-group.formFront input#date {
        color: black;
        font-size: 1.5em;
        padding: 20px 0 20px 45px;
    }

    .section form .formFront button {
        padding: 10px;
        line-height: 0;
        position: relative;
        width: 100%;
        background: #ff9900;
        border: none;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        color: white;
        transition: all ease 250ms;
        text-align: center;
    }

    .section form .formFront button:hover {
        background: #de8600;
    }


    .section form .formFront button p{
        font-size: 1.7em;

        text-align: center;
    }

    .section .relative{
        position: relative
    }
}

.sectionService .relative{
    position: relative !important;
}

.cache {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    z-index: -1;
}

/*Footer*/

footer {
    background-color: #333333;
    margin: auto;
}

footer div.container.row {
    margin: auto;
}

footer div.container.row p {
    margin: 10px 0 10px 0;
}

footer ul {
    margin: 5px 0;
    padding: 0;
}

footer ul li {
    display: inline-block;
    margin: 5px 0;
}

footer ul li a {
    color: #FF9900;
    margin: 10px 5px;
    font-size: 0.9em;
}

footer ul li a:hover {
    color: #ffbf00;
}

footer p {
    text-align: right;
}

footer .categorieAnnuaire {
    background-color: #444444;
    padding: 40px 0 40px 0;
}

footer .categorieAnnuaire h3 {
    color: #dddddd;
}

footer .categorieAnnuaire img {
    width: 200px;
    height: auto;
    vertical-align: middle;
}

footer .categorieAnnuaire ul {

}

footer .categorieAnnuaire ul li {
    display: block;

}

footer .categorieAnnuaire ul li a {
    color: white;
    padding: 0;
    margin: 0;

}

footer .categorieAnnuaire ul li a:hover {
    color: #ff9900;
}

@media (max-width: 767px) {
    footer p, footer ul, footer h3, footer img{
        text-align: center !important;
    }

    footer h3{
        margin: 25px 0 0 0;
    }

}


/* Titre */

.color {
    color: #FF9900;
}

.section h1, .section h2, .section h3 {
    padding: 0 0 20px 0;
    margin: 0;
    font-size: 2.5em;
    font-weight: 300;
    line-height: 50px;
    font-family: 'Open Sans', sans-serif;
    z-index: 100;
}

.section h4, .section h5 {
    padding: 0;
    margin: 0;
    font-size: 2.5em;
    font-weight: 300;
    visibility: inherit !important;
}

.section h1, .section h2 {
    font-size: 2.5em;
    font-weight: 300;
}

.section h5 {
    font-size: 1.5em;
    font-weight: 800;
}

.section p {
    margin: 0;
    padding: 15px 0 15px 0;
    font-size: 1.2em;
}

.section button {
    margin-top: 40px;
}

.section .formFront button {
    margin-top: 20px;
    width: 100%;
}

.section img {
    width: auto;
    max-height: 300px;
}

.section .cadenas {
    position: absolute;
    top: 80px;
}

@media (max-width: 767px) {
    .section .cadenas {
        top: 320px;
        width: 50%;
        margin: auto;
        text-align: center;
    }
}

.textuel .section h3 {
    padding: 20px 0 40px 0;
}

.textuel .section button {
    margin: 0;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.cercle {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    border: solid 1px white;
    vertical-align: middle;
    margin: 0 auto 20px auto;
    background-color: transparent;
    color: white;
}

.cercle p {
    text-align: center;
    margin: 20px 0 0 0;
    padding: 3px 3px !important;
    display: block;
    vertical-align: middle;
    font-size: 2em;
}

.cercle-reseau{
    display: inline-block;
    border-radius: 50%;
    border: solid white 1px;
    width: 50px;
    height: 50px;
    text-align: center;
    padding: 13px 0 0 0;
    transition: all ease 450ms;
    font-size: 1.4em;
}

.cercle-reseau:hover{
    border-color: #ff9900
}

.faq-item {
    padding: 10px 0;
}

.faq-item a {
    font-weight: 300;
}

.resultSearch {
    background-color: white;
    color: black;
    border-radius: 3px;
    padding: 0;
}

.resultSearch div:first-of-type {
    margin-bottom: 10px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.resultSearch h3 {
    color: white;
    padding-left: 5px;
}

.resultSearch img {
    width: 60%;
    margin: 20px;
    text-align: center;
}

.resultSearch p, p.info {
    position: relative;
    color: #555555;
    padding-top: 25px;
    padding-left: 10px;
    padding-bottom: 5px;
    margin: 0;
}

.resultSearch span, p.info span {
    position: absolute;
    font-size: 0.8em;
    left: 0;
    top: 5px;
}

hr {
    margin: 0;
    padding: 5px;
}

.popover.fade.bottom.in {
    width: 276px;
}

.capsuleNumero {
    width: 20%;
    color: black;
}

/*CARD*/

.card {
    position: relative;
    padding: 0 20px 25px 20px;
    margin-top: 30px;
    visibility: visible !important;
}

.card div {
    height: 250px;
    box-shadow: 1px 1px 5px 0 #aaaaaa;
    border-radius: 2px
}

.card span {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    color: white;
    display: block;
    font-size: 2.5em;
    padding: 14px 0 0 0;
    margin: -35px auto 20px auto;
}

@media (max-width: 991px) {
    .card {
        width: 100%;
    }

    .card div {
        padding-top: 1px;
    }
}

/*NUMCARD*/

.service-container{
    color: white;
    position: relative;
    margin: 30px 30px 100px 30px;
}

.service-cache{
    background: rgba(0,0,0,0.5);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 20px;
}

.service-container .service-card{
    position: relative;
    background: white;
    background-size: cover;
    color: white;
    min-height: 500px;
    width: 35vw;
    border-radius: 20px;
    margin: auto;
    box-shadow: 6px 10px 20px rgba(0,0,0,0.19), 4px 6px 6px rgba(0,0,0,0.23);
    z-index: 300;
}

.service-container button{
    background: transparent;
    border: none
}

.service-container .service-card .service-card-title {
    position: relative;
    background-color: #ff9900;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 10px 15px;
}

.service-container .service-card .service-card-title h5{
    font-weight: 700;
    color: rgba(255,255,255,0.5);
}

.service-container .service-card .service-note{
    position: relative;
    display: flex;
    padding: 5px 10px;
    background-color: #de8500;
}

.service-container .service-card .service-note > div{
    height: 37px;
}

.service-container .service-card .service-note p.open-modal {
    color: white;
    line-height: 37px;
    margin-left: 10px;
    font-weight: 500;
    padding: 0
}

.service-container .service-card .service-note .rating .full{
    color: rgba(255,255,255,0.5) !important;
}

.service-container .service-card .service-note .rating .yellow{
    color: rgba(255,255,255,1) !important;
}

.service-container p.open-modal:hover{
    text-decoration: underline;
    cursor: pointer;
}

.service-container .service-card .service-description {
    background: white;
    padding: 5px 10px;
    color: black;
    border-bottom: #bbbbbb solid 1px;
}

.service-container .service-card .service-avis {
    position: relative;
    padding: 10px 10px 20px 10px;
    background: transparent;
    color: black;
}

.service-container .service-card .service-avis h5{
    font-weight: 700;
    color: #ff9900;
}

.service-container .service-card .service-abus{
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%;
    left: 0
}

.service-avis .service-btn-avis{
    background: rgba(0,0,0,0.3);
    color: white;
    margin: 0 5px;
    padding: 5px 10px;
    border-radius: 5px;
    position: absolute;
    top: 5px;
    right: 0;
    font-weight: 700;
    transition: all ease 250ms;
}

.service-avis .service-btn-avis:hover {
    background: rgba(0,0,0,0.7);
}

.service-container .service-card .service-abus a {
    color: #ff9900;
    font-weight: 700;
    transition: all ease 250ms;
}

.service-container .service-card .service-abus a:hover {
    color: #ffb800;
}

.service-container .service-info{
    background-color: white;
    color: black;
    padding: 10px 15px;
    border-bottom: solid 1px #bbbbbb;
}

.service-container .service-info h5 {
    margin-bottom: 10px;
    color: #ff9900;
}

.service-container .service-info p {
    margin: 0;
    padding: 3px;
    font-size: 1em;
}

.service-container .service-info .col {
    display: inline-block;
    vertical-align: top;
}

.service-container .service-info .col1{
    width: 30%;
    top: 0
}

.service-container .service-info .col2{
    width: 69%;
}

.service-container .service-info .col i{
    color: #ff9900;
}

.service-container .service-annexe.service-prix{
    display: block;
    position: absolute;
    top: 45px;
    right: 5px;
    color: white;
}

.service-container .service-annexe.service-prix h5 {
    color: white;
    font-weight: 500;
    font-size: 1.2em;
}

.service-container .service-annexe.service-prix p {
    display: inline-block;
    color: black;
    margin: 0;
    color: rgba(255,255,255,0.5);
    padding: 0;
}
/*service Modal*/

.service-modal-content{
    background: white;
    border-radius: 20px;
}

.service-modal-header{
    background: #ff9900;
    color: white;
    font-size: 1.4em !important;
    padding: 20px;
    border-radius: 20px 20px 0 0;
}

.service-modal-header h3{
    font-size: 1.8em;
}

.service-modal-header h5{
    font-size: 1.2em;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
}

.service-modal-note{
    display: flex;
    height: 35px;
    line-height: 35px;
    position: relative;
    margin: 20px;
}

.service-modal-note > p:first-of-type,
.service-modal-note > p:last-of-type{
    line-height: 45px;
}

.service-modal-note .note{
    color: #ff9900;
    font-size: 1.7em;
    line-height: 38px !important;
    margin-right: 10px;
}

.service-modal-note .nb-avis {
    color: #aaaaaa;
    font-weight: 700;
    margin-left: 10px
}

.service-validate{
    display: flex;
    justify-content: flex-end;
}

.service-modal-btn-orange{
    background: rgba(255,153,0,1);
    border: none;
    border-radius: 5px;
    position: absolute;
    right: 20px;
    color: white;
    transition: all ease 250ms;
    font-weight: 500;
}

.service-modal-body{
    margin: 20px;
}

.service-modal-btn-validate{
    background:rgba(255,153,0,1);
    border: none;
    border-radius: 5px;
    text-align: center;
    color: white;
    display: block;
    padding: 5px;
    margin: 5px 0 20px 0;
    font-size: 1.2em;
    font-weight: 700;
    transition: all ease 250ms;
}

.service-modal-btn-close{
    background: rgba(0,0,0,0.3);
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 1.2em;
    font-weight: 700;
    transition: all ease 250ms;
    margin: 5px 5px 20px 5px;
    padding: 5px;
}

textarea{
    resize: vertical;
}

.service-modal-btn-orange:hover, .service-modal-btn-validate:hover {
    background: rgba(255,153,0,0.5);
}

.service-modal-btn-close:hover {
    background: rgba(0,0,0,0.2);
}

.service-modal-comment{
    padding: 20px;
}

.service-modal-comment .mess.no-avis{
    text-align: center;
}

.service-captcha #captcha_avis{
    width: 100%;
    height: 100%;
    margin: 10px 0;
}

#formCommentAdd{
    margin: 20px;
}

.vote.rating{
    float: left !important;
}


/*Rating card*/

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

label {
    margin: 0;
    padding: 0;
    text-align: center;
}

/* Responsive search */

@media (max-width: 991px) {
    .section.sectionService .service-card{
        background: white;
        border-radius: 20px
    }

    .fix-form{
        display: block;
        position: inherit;
    }

    .section.sectionService h2{
        font-size: 2.5em;
    }

    .section.sectionService .input-group.formFront{
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        width: 100vw;
        margin: 0 !important;
    }

    .section.sectionService .input-group.formFront span.input-group-addon {
        color: #ff9900;
    }

    .service-container{
        margin: 10px 0;
    }

    .service-container .service-card{
        width: 100vw;
        margin: 0;
        background: white none;
        color: black;
        border-radius: 0;
        padding: 0
    }

    .service-container .service-card .service-cache{
        display: none;
    }

    .service-container .service-card-title{
        background-color: #ff9900;
        color: white;
        padding: 10px
    }

    .service-container .service-note{
        background-color: #d87b00;
        color: white;
        padding-top: 10px
    }

    .service-container .service-note .rating, .service-container .service-note p{
        color: rgba(255,255,255,0.5);
    }

    .service-container .service-note .rating .yellow{
        color: rgba(255,255,255,1);
    }


    .service-container .service-card-title h5{
        color: rgba(255,255,255,0.7);
        font-weight: 700 !important;
        margin-top: 0;
    }

    .service-container .service-annexe{

    }

    .service-container .service-annexe.service-info p{
    }

    .service-container .service-annexe.service-prix{
        right: 5px;
        font-size: 1em;
    }
    .service-container .service-annexe.service-prix p{
        font-size: 1em;
        width: auto;
    }

    .service-description, .service-avis, .service-annexe{
        padding: 10px !important;
    }

    .service-avis h5, .service-annexe h5, .service-annexe i{
        color: #ff9900
    }

    .service-avis{
        margin-top: 0 !important;
    }

    .service-container .service-info .col {
        display: inline-block;
        width: 100%;
    }
}

/****** Style Star Rating Widget *****/

.rating {
    border: none;
}

.rating > input {
    display: none;
}

.rating > label:before, .rating p:before {
    margin: 5px;
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
}

.rating > label, .rating p {
    color: #ddd;
    float: right;
}

.rating .yellow{
    color: #ff9900;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label {
    color: #FF9900;
}

/* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label {
    color: #ffbe00;
}

/*Guide carroussel*/

.guide {
    text-align: center;
    margin: 0;
    padding: 0;
}

.guide li {
    list-style-type: none;
    text-align: center;
    cursor: pointer;
    padding: 10px;
    color: #dddddd;
}

.guide .active {
    border-bottom: 1px white solid;
    color: white;
}

.guideContent p {
    font-weight: 600;
}

.guideContent a {
    font-weight: 900;
    color: white;
    transition: all ease 450ms;
}

.guideContent a:hover {
    color: #eeeeee;
}

.guideContent img {
    width: 250px;
    height: auto;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.guideContent a button {
    color: black;
}

.guideContent a button:hover {
    color: black;
}

.guideContent .cercle {
    width: 45px;
    height: 45px;
    margin: 30px auto 0 auto;
}

.guideContent .cercle p {
    margin: 0;
    padding: 0;
}

.mobile {
    display: none;
}

@media (max-width: 980px) {
    .guide li {
        width: 49%;
        display: inline-block;
    }

    .mobile {
        display: block;
        margin: auto;
    }

    .desktop {
        display: none;
    }
}

.half1 {
    position: absolute;
    width: 50%;
    height: 100%;
    background-image: url('../img/img_vitrine/particulier.jpg');
    background-size: cover;
    top: 0;
    z-index: -1;
}

.half2 {
    position: absolute;
    width: 50%;
    height: 100%;
    background-image: url('../img/img_vitrine/editeur.jpg');
    background-size: cover;
    top: 0;
    right: 0;
    z-index: -1;
}

@media (max-width: 980px) {
    .half1 {
        width: 100%;
        height: 100%;
        top: 0;
    }

    .half2 {
        display: none
    }
}

/*SIGNALETIQUE*/

.signaletique img {
    width: 100%;
    margin-top: -67px;
    padding: 0;
}

/*CARTOUCHE*/
.cartouche {
    font-family: 'Helvetica Neue', 'arial', sans-serif;
    height: 100%;
    width: 500px;
    margin: 100px auto;
    position: relative;
}

.cartouche p {
    margin: 0;
    padding: 0;
}

.cartouche .logo {
    display: inline-block;
    position: relative;
    color: white;
    background-color: #ff9900;
    height: 70px;
    width: 70px;
    padding: 0;
    margin: 0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border: 2px solid #ff9900;
    vertical-align: top;
    text-align: center;
}

.cartouche .logo .img {
    line-height: 78px;

}

.cartouche .logo img {
    width: 70%;
    height: auto;
    line-height: 70px;
    margin: auto;
    vertical-align: middle
}

.cartouche .logo span {
    font-weight: 800;
}

.cartouche .logo .savoir {
    position: absolute;
    color: white;
    top: 79%;
    text-align: center;
    font-size: 10px;
    width: 100%;
    font-weight: 700;
}

.cartouche .logo a {
    text-decoration: none;
    color: white;
}

.cartouche .numero {
    display: inline-block;
    position: relative;
    width: 330px;
    height: 70px;
    border: #ff9900 2px solid;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    vertical-align: top;
    background-color: white;
}

.cartouche .numero p {
    font-size: 45px;
    font-weight: 800;
    font-stretch: condensed;
    vertical-align: middle;
    line-height: 70px;
    text-align: center;
    color: #ff9900;
}

.cartouche .numero .prix {
    position: absolute;
    font-weight: 500;
    color: white;
    background-color: #ff9900;
    height: 20px;
    top: -10px;
    right: -2px;
    font-size: 10px;
    line-height: 20px;
    padding: 0 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
}

.cartouche .numero .mention-majeur {
    position: absolute;
    font-weight: 500;
    background-color: white;
    border: red solid 1px;
    height: 20px;
    bottom: -12px;
    right: -2px;
    font-size: 10px;
    line-height: 16px;
    color: red;
    padding: 0 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.cartoucheHauteur {
    display: block;
    width: 250px;
}

.cartoucheHauteur .logo {
    display: inline-block;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: left;
    background-color: #ff9900;
    color: white;
}

.cartoucheHauteur .logo > div{
    display: inline-block;
    height: 100%;
}

.cartoucheHauteur .numero {
    display: block;
    color: #ff9900;
    font-weight: 800;
    font-stretch: condensed;
    font-size: 2em;
    font-family: 'Helvetica Neue', 'arial', sans-serif;
    border: 2px solid #ff9900;
    box-shadow: inset -1px 2px 5px 2px rgba(0, 0, 0, 0.3);
    padding: 5px 10px 0 10px;
}

.cartoucheHauteur .numero p{
    margin: 0;
    padding: 0;
    font-stretch: condensed;
    font-weight: 800;
}

.cartoucheHauteur img{
    width: 40px;
    display: block;
    margin: 5px 5px -15px 5px;
}

.cartoucheHauteur .savoir{
    position: initial;
    display: block;
    color: white;
    float: right;
    line-height: 35px;
    padding-right: 5px;
}

.cartoucheHauteur .savoir a{
    color: white;
    font-weight: 500;
}

.cartoucheHauteur .prix{
    font-weight: 500;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: #ff9900;
    color: white;
    padding: 0 0 3px 0;
}

.cartouche-legende{
    position: absolute;
}

.cartouche-legende h5{
    color: #ff9900;
}

.cartouche-legende p{
    font-size: 1.2em;
    padding: 5px 0 0 0;
    color: #aaaaaa;
}

.cartouche-legende.numero-legende{
    bottom: -120px;
    right: -350px;
    width: 330px;
    text-align: left;
}

.cartouche-legende.numero-legende:before {
    content: '';
    background: url('../img/img_vitrine/arrow/arrow1.png');
    background-size: 100%;
    width: 80px;
    height: 80px;
    display: block;
    position: absolute;
    transform: rotate(-110deg);
    top: -35px;
    left: -100px;
}

.cartouche-legende.logo-legende{
    left: -400px;
    top: -10px;
    text-align: right;
    width: 350px;
}

.cartouche-legende.logo-legende:before {
    content: '';
    background: url('../img/img_vitrine/arrow/arrow1.png');
    background-size: 100%;
    width: 80px;
    height: 80px;
    display: block;
    position: absolute;
    transform: rotate(60deg);
    top: -20px;
    right: -95px;
}

.cartouche-legende.prix-legende{
    text-align: left;
    top: -90px;
    right: -320px;
    width: 350px;
}

.cartouche-legende.prix-legende:before {
    content: '';
    background: url('../img/img_vitrine/arrow/arrow3.png');
    background-size: 100%;
    width: 40px;
    height: 100px;
    display: block;
    position: absolute;
    transform: rotate(-130deg);
    top: -10px;
    left: -80px;
}

.cartouche-legende.en-savoir-plus-legende{
    text-align: center;
    bottom: -140px;
    left: -200px;
    width: 350px;
}

.cartouche-legende.en-savoir-plus-legende:before {
    content: '';
    background: url('../img/img_vitrine/arrow/arrow2.png');
    background-size: 100%;
    width: 30px;
    height: 65px;
    display: block;
    position: absolute;
    transform: rotate(20deg);
    top: -67px;
    left: 250px;
}

@media(max-width: 991px){
    .cartouche{
        margin-top: 10px;
    }

    .cartouche-legende{
        display: none !important;
    }

    .cartouche-legende:before{
        display: none !important;
    }
}


@media (max-width: 980px) {
    .cartouche {
        width: 300px;
    }

    .cartouche .numero {
        height: 50px;
        width: 220px;
    }

    .cartouche .numero p {
        font-size: 30px;
        line-height: 55px;
    }

    .cartouche .logo {
        height: 50px;
    }

    .cartouche .logo .img {
        line-height: 50px
    }

    .cartouche .logo .img img {
        width: 50%;
    }

    .cartouche .logo .savoir {
        top: 75%;
    }
}

#navbar > ul > li.dropdown.open > ul > li {
    display: block;
}

#navbar > ul > li.dropdown.open > ul > li a {
    color: #444444;
    font-size: 1em;
}

.nav>li>a:focus{
    background-color: transparent !important;
}

@media (max-width: 991px) {

    .date {
        display: inline-table;
        color: black;
        width: 100%;
    }
}

.margin-auto{
    display: block;
    margin: auto;
}

/*IMAGE ZOOM EFFET*/

.sectionImage{
    background: radial-gradient(circle farthest-side at center bottom, #FF9900, #f17a00 70%);
    color: white;
}

.sectionImage h2{
    margin: 0;
    padding: 50px 0
}

.sectionImage .image-container{
    height: 100%;
    position: relative;
}

.sectionImage h3{
    position: absolute;
    z-index: 10;
    margin: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all ease 400ms;
    font-weight: 700;
    font-size: 1.7em;
    top: 30%;
}

.sectionImage .img-effect h3:after{
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    left: 0;
    bottom: 0;
    margin-bottom: -5px;
    transition: all ease 400ms;
}

.sectionImage .img-effect:hover h3:after{
    left: 0;
    bottom: 0;
    background: white;
    width: 100%;
    height: 3px;

}

.sectionImage p{
    position: absolute;
    margin: auto;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 1;
    transition: all ease 400ms;
    width: 90%;
    text-align: center;
    padding: 10px;
}

.sectionImage .img-effect{
    position: relative;
    z-index: 10;
    overflow: hidden;
    height: 200px;
}

.sectionImage .img-effect img{
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 0;
    transition: all ease-out 200ms;
}


.sectionImage .img-effect:hover img{
    transform: scale(1.1);
}

.sectionImage .cacheImage{
    position: absolute;
    z-index: 1;
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
    transition: all ease 200ms
}

.sectionImage .img-effect:hover .cacheImage{
    opacity: 1;
}

/*BTN Fin de page*/

.login-btn-submit:hover p{
    color: #555 !important;
}

.sectionEntete .login-btn-submit {
    height: 34px;
}

.sectionEntete .login-btn-submit {
    line-height: 0;
}

.sectionEntete .login-btn-submit:hover p{
    color: white !important;
}

/*CARROUSSEL*/

.carrousselSection.section{
    margin: 0;
    padding: 0;
    background: #444;
    z-index: -2;
}

.carroussel{
    position: relative;
    display: block;
    width: 300.3vw;
    overflow: hidden;
}

.slide-carroussel{
    width: 100vw;
    display: inline-table;
    transition: all ease 450ms;
}

.carrousselSection .carroussel-title{
    width: 100vw;
    z-index: 111111;
}

.carrousselSection .carroussel-title h3{
    background-color: #ff9900;
    color: white;
    width: 200px;
    margin: auto;
    text-align: center;
    left: 50%;
    top: 20px;
    transform: translate(-50%);
    position: absolute;
    border-radius: 10px;
    padding: 5px;
    transition: all ease 200ms;
}

.carrousselSection .content-carroussel img{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    z-index: -1;
    max-height: initial;
}

.point-carroussel{
    width: 49vw;
    display: inline-table;
    color: white;
    top: 50%;
    margin-top: 10%;
}

.point-carroussel .content-point{
    padding: 40px 100px;
}

.carroussel-slider{
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1111111111;
    display: inline-flex;
}

.carroussel-slider button{
    width: 100%;

    border: none;
    font-size: 2em;
    height: 100%;
    margin: 0 35px;
    background-color: white;
    color: black;
}

.carroussel-slider button.activation {
    color: white;
    background-color: #ff9900;
}

.content-carroussel{
    height: 500px;
    background-color: rgba(0,0,0,0.4);
    margin-top: 100px;
}

ul>li>a{
    color: #ff9900;
}

@media (max-width: 992px) {
    .carrousselSection{
        overflow-x: hidden;
    }
    .point-carroussel .content-point{
        padding: 10px 0;
    }
    .slide-carroussel{
        width: 99.5vw;
        display: inline-table;
        transition: all ease 450ms;
    }

    .point-carroussel{
        display: block;
        width: 100%;
        padding-top: 10%;
        margin: 0;
    }
    .sectionImage{
        overflow-x: hidden;
    }
}

/*bulletPoint Editeur*/

.sectionPoint .point-menu{
    background-color: white;
    color: black;
    margin: 0;
    padding: 20px;
    box-shadow: 20px 0px 20px rgba(0,0,0,0.19), 0 0px 6px rgba(0,0,0,0.23);
    z-index: 100;
}

.sectionPoint .point-menu ul{
    margin: 0;
    padding: 0;
}

.sectionPoint .point-menu ul li{
    list-style-type: none;
    font-size: 1.2em;
    padding: 20px 5px 20px 30px;
    position: relative;
    border: 1px solid white;
    color: black;
    font-weight: 700;
}

.sectionPoint .point-menu ul li:before{
    content: '';
    position: absolute;
    width: 1%;
    left: 0;
    top: 0;
    height: 100%;
    background: #ff9900;
    transition: all ease-out 250ms;
    z-index: 0
}

.sectionPoint .point-menu ul li:hover {
    color: white;
    z-index: 10;
    font-weight: 700;
}

.sectionPoint .point-menu ul li.activate {
    color: white;
    z-index: 10;
    font-weight: 700;
}

.sectionPoint .point-menu ul li:hover:before{
    content: '';
    position: absolute;
    width: 110%;
    left: 0;
    top: 0;
    height: 100%;
    background: #ff9900;
    z-index: -1
}

.sectionPoint .point-menu ul li.activate:before{
    content: '';
    position: absolute;
    width: 110%;
    left: 0;
    top: 0;
    height: 100%;
    background: #ff9900;
    z-index: -1
}

.sectionPoint .point-content{
    z-index: 0;
    position: relative;
    height: 552px;
    text-align: center;
    background: url('../img/img_vitrine/economy.jpg') no-repeat;
    background-size: cover;
}

.sectionPoint .point-content.particulier-content{
    background: url('../img/img_vitrine/particulier-content.jpg') no-repeat;
    background-size: cover;
    height: 488px;
}


.sectionPoint .point-content .block-point{
    position: absolute;
    background-color: white;
    padding: 50px;
    font-size: 1.4em;
    z-index: 500;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    opacity: 0;
    transition: all ease 200ms;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 50%;
    margin: auto;
}

.sectionPoint .point-content .block-point:after {
    content: '';
    position: absolute;
    transition: all ease 600ms;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
}

.sectionPoint .point-content .block-point.activate:after {
    content: '';
    line-height: 100px;
    color: white;
    font-size: 2em;
    font-weight: 700;
    position: absolute;
    background-color: #ff9900;
    min-width: 100px;
    min-height: 100px;
    left: -50px;
    top: -50px;
    z-index: -1;
}

.sectionPoint .point-content .block-point.activate{
    opacity: 1;
    z-index: 1111111;
}

.sectionPoint .point-content .block-point.block-1.activate:after {
    content: '1';
}
.sectionPoint .point-content .block-point.block-2.activate:after {
    content: '2';
}
.sectionPoint .point-content .block-point.block-3.activate:after {
    content: '3';
}
.sectionPoint .point-content .block-point.block-4.activate:after {
    content: '4';
}
.sectionPoint .point-content .block-point.block-5.activate:after {
    content: '5';
}
.sectionPoint .point-content .block-point.block-6.activate:after {
    content: '6';
}
.sectionPoint .point-content .block-point.block-7.activate:after {
    content: '7';
}
.sectionPoint .point-content .block-point.block-8.activate:after {
    content: '8';
}

.sectionPoint a{
    color: white;
}

@media (max-width: 991px){
    .sectionPoint{
        overflow-x: hidden;
    }
}

@media (max-width: 580px) {

    .sectionPoint .point-content .block-point {
        width: 100%;
        height: 100%;
        padding-top: 60px;
    }

    .sectionPoint .point-content .block-point.activate:after {
        left: 50%;
        transform: translate(-50%);
        top: 20px;
        min-height: 30px;
        min-width: 30px;
        font-size: 1em;
        line-height: 30px;
    }
}

/* pres-bloc */

.pres-bloc-container{
    display: inline-block;
    width: 49%;
    padding: 10px;
}

.pres-bloc{
    border: #ff9900 solid 1px;
    background-color: white;
    height: 500px;
    overflow: hidden;
    width: 100%;
    float: left;
    transition: all ease 250ms;
}

.pres-bloc:hover{
    background-color: #f1f1f1;
}

@media (max-width: 991px){
    .pres-bloc-container {
        width: 100%;
    }

    .pres-bloc{
        width: 100%;
        margin: 10px 0;
        height: 550px;
    }
    .pres-bloc>img{
        height: auto;
        width: 100%;
        margin-top: 0 !important;
    }
}

.pres-bloc>img{
    height: auto;
    width: 100%;
    margin-top: -90px;
}

.pres-bloc .icone{
    position: absolute;
    width: 100px;
    height: 100px;
    background: white;
    border-radius: 50%;
    padding: 20px;
    top: 160px;
    left: 20px;
    text-align: center;
}

.pres-bloc .icone img{
    width: 50px;
    height: 50px;
}

.pres-bloc h4{
    margin-top: 50px;
    font-size: 1.8em;
}

.pres-bloc h4, .pres-bloc p{
    padding: 0 20px 20px 20px;
}

.pres-bloc .pres-btn{
    padding: 5px;
    margin: 0 0 0 20px;
    color: #ff9900;
    border: none;
    background: transparent;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}

.pres-bloc .pres-btn:before{
    content: '';
    position: absolute;
    background-color: #bbbbbb;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    opacity: 0.5;
    border-radius: 10px;

}

.pres-bloc .pres-btn:hover:before {
    animation: pres-btn ease 1.5s;
}

@keyframes pres-btn{
    0%{
        left: 50%;
        top: 50%;
        width: 0;
        height: 0;
        opacity: 0.5;
        border-radius: 50%;
    }
    1%{
        height: 110%;
        left: 0;
        top: 0
    }
    20%{
        width: 110%;
        height: 110%;
        top: 0;
        left: 0;
        border-radius: 0;
    }
    100%{
        width: 110%;
        height: 110%;
        top: 0;
        left: 0;
        border-radius: 0;
        opacity: 0;
    }
}

/* TUTO LIST*/

.tuto-list h3{
    margin-bottom: 20px;
}

.tuto-list .point-list{
    margin-top: 20px;
}

@media (max-width: 991px){
    .tuto-list .point-list{
        margin-bottom: 30px;
    }
    .tuto-list a button{
        text-align: center;
        display: block;
        float: none;
        margin: 30px auto 0 auto;
    }

}

.tuto-list span.point{
    display: inline-block;
    background-color: white;
    border-radius: 50%;
    width: 5px;
    padding: 2px;
}

.tuto-list .cercle{
    font-size: 2em;
    height: 75px;
    width: 75px;
    margin: 0 auto;
    display: flex;
}

.tuto-list .cercle i{
    margin: auto;
    display: block;
}

.tuto-list .cercle img {
    margin: auto;
    width: 50%
}

/* Cookie Banniere */

.cc-window{
    font-size: 14px !important;
}

.cc-window a {
    color: #ff9900;
}

.information{
    margin-top: 20px;
}

/*verbatim*/

.section.section-verbatim{
    margin: 0;
    padding: 50px;
    background: #dddddd;
}

.section-verbatim h5{
    padding-bottom: 20px;
}

.section-verbatim .verbatim-container .citation{
    font-size: 1em;
    background-color: white;
    padding: 10px;
    position: relative;
}

.section-verbatim .verbatim-container .citation:after {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    left: 10px;
    bottom: -10px;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: white transparent transparent transparent;
}

.section-verbatim .verbatim-container .personna{
    padding: 0;
    font-size: 1em;
}

.section.section-bullet{
    padding: 0 0 50px 0;
    margin: 0;
}

.section-bullet .container .box-bullet{
    padding-left: 75px !important;
}

.section-bullet .container .box-bullet p{
    font-size: 1em;
}

.section-bullet .container .box-bullet h5 {
    color: #444444;
}

.icon{
    background: #eeeeee;
    text-align: center;
    height: 50px;
    width: 50px;
    display: block;
    line-height: 50px;
    border-radius: 50%;
    position: absolute;
    left: 15px;
    font-size: 1.6em;
}

.sectionSubcribe{
    background: url('../img/img_vitrine/background3.jpg');
    background-size: cover;
    color: black;
}

.sectionSubcribe button p{
    color: white
}

.img-first-section{
    width: 500px !important;
    height: auto;
    padding: 10px
}

.normal-font{
    font-size: 1.2em !important;
    font-weight: 500;
}

.error-block{
    background: rgba(255,0,0,0.4);
    border-radius: 5px;
    margin-top: 20px;
    padding: 10px;
}

.error-view{
    color: white !important;
    margin-top: 10px !important;
}