/* bleu entreprise : #3e90ce */
/* bleu acheteur : #4f6b7f */
/* rose bouton : #d20073 */

/***************************************
    GENERAL
***************************************/
body {
    font-family: 'Roboto', sans-serif !important;
    overflow-x: hidden;
}

h6 {
    color: #3e90ce;
}

ol {
    list-style-type: none;
    display: inline-flex;
    padding-left: 0;
}

a:hover {
    cursor: pointer;
}

/******* COOKIE *******/
.cookie-box {
    z-index: 1;
    position: fixed;
    bottom: 0;
    width: 70%;
    background: #333;
    font-size: 13px;
    color: #fff;
    padding: 4px 10px;
    display: inline-block;
    border-top-right-radius: 3px;
    opacity: .9;
}

.cookie-box p {
    display: inline-block;
    margin: 0;
}

.cookie-txt {
    width: 85%;
}

.cookie-button {
    padding: 4px 0 4px 1rem;
    position: relative;
    top: .5rem;
    float: right;
}

.cookie-button a {
    background: #3e90ce;
    color: #fff;
    padding: .5rem 1rem;
    border-radius: 2px;
}

/******* ALERT *******/
.alert-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #3e3d3d;
    opacity: .5;
}

.flash-message {
    z-index: 1050;
    position: absolute;
    top: 9.5rem;
    left: 50%;
    transform: translateX(-50%);
}

.alert {
    min-width: 300px;
    text-align: left;
    border: none;
    border-radius: 3px;
    padding: 2rem 2rem;
    padding-right: 3rem;
}
.alert-success {
    color: #247336;
    background-color: #e5f5e9;
    border-left: 4px solid #45bf79 !important;
}
.alert-warning {
    color: #a5821c;
    background-color: #fff8e1;
    border-left: 4px solid #ffc05b !important
}
.alert-danger {
    color: #98242f;
    background-color: #f9e3e5;
    border-left: 4px solid #c53643 !important;
}
.alert-perso {
    color: #3e90cd;
    background-color: #f0f1f3;
    border-left: 4px solid #3e90cd !important;
    font-size: smaller;
    padding: 5px !important;
    padding-right: 10px !important;
    padding-left: 15px !important;
}
.alert .close {
    position: absolute;
    top: 7px;
    right: 13px;
    opacity: .3;
}

.form-error {
    font-size: smaller;
    padding: 5px;
    padding-right: 10px;
    position: relative;
    top: 4px;
}

.noselect {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.icon {
    font-size: 25px;
    color: #3e90ce;
    transition: 150ms;
}

/******* SPINNER *******/
.spinner-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(25, 25, 25, 0.34901960784313724);
    z-index: 2071;
}

.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #dedede;
    font-size: 5rem;
}

.spinner img {
    width: 60px;
}

.clear input.size-word {
    width: 64% !important;
}

.validate-box {
    background-color: #e5f5e9;
    border-left: 5px solid #45bf79;
    border-radius: 3px;
    box-shadow: 0px 6px 13px rgba(79, 107, 127, 0.2);
    margin-bottom: 40px;
    padding: 2rem !important;
}

.validate-title {
    text-align: center;
    color: #45bf79;
}

.validate-title i {
    position: relative;
    top: -2px;
    left: -.5rem;
}

.validate-box p {
    color: #333333 !important;
}

.validate-box p span {
    color: #1384da !important;
    text-decoration: underline;
}

.validate-box p i {
    font-size: 2rem;
    color: #45bf79;
}

/******* PAGINATE *******/
.paginate-footer {
    background: #fff;
    padding-bottom: 2rem;
}

.paginate-box {
    width: 75%;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}

/******* HOVER *******/
/* Icon Hang */
@-webkit-keyframes hvr-icon-hang {
    0% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
    50% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
}

@keyframes hvr-icon-hang {
    0% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
    50% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
}

@-webkit-keyframes hvr-icon-hang-sink {
    100% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
}

@keyframes hvr-icon-hang-sink {
    100% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
}

.hvr-icon-hang {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.hvr-icon-hang .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hvr-icon-hang:hover .hvr-icon, .hvr-icon-hang:focus .hvr-icon, .hvr-icon-hang:active .hvr-icon {
    -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang;
    animation-name: hvr-icon-hang-sink, hvr-icon-hang;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}

/******* ANIMATION *******/
.animated {
    -webkit-animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-duration: .5s;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 1;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}


/***************************************
    HEADER
***************************************/
/*** e e e e e e ***/
#picto_e-convocations {
    background: url(/img/picto_ecv.png) 0 0 no-repeat;
    width: 12px;
    height: 12px;
    text-indent: -9999em;
    border: none;
    cursor: pointer;
    float: right;
    margin-left: 5px;
    margin-top: 4px;
}
#picto_e-convocations:hover {
    background-position: 0 -12px;
}
#picto_e-legalite {
    background: url(/img/picto_elg.png) 0 0 no-repeat;
    width: 12px;
    height: 12px;
    text-indent: -9999em;
    border: none;
    cursor: pointer;
    float: right;
    margin-left: 5px;
    margin-top: 4px;
}
#picto_e-legalite:hover {
    background-position: 0 -12px;
}
#picto_e-archiveslegales {
    background: url(/img/picto_eal.png) 0 0 no-repeat;
    width: 12px;
    height: 12px;
    text-indent: -9999em;
    border: none;
    cursor: pointer;
    float: right;
    margin-left: 5px;
    margin-top: 4px;
}
#picto_e-archiveslegales:hover {
    background-position: 0 -12px;
}
#picto_e-parapheurs {
    background: url(/img/picto_eph.png) 0 0 no-repeat;
    width: 12px;
    height: 12px;
    text-indent: -9999em;
    border: none;
    cursor: pointer;
    float: right;
    margin-left: 5px;
    margin-top: 4px;
}
#picto_e-parapheurs:hover {
    background-position: 0 -12px;
}
#picto_e-marchespublics {
    background: url(/img/picto_emp.png) 0 0 no-repeat;
    width: 12px;
    height: 12px;
    text-indent: -9999em;
    border: none;
    cursor: pointer;
    float: right;
    margin-left: 5px;
    margin-top: 4px;
}
#picto_e-marchespublics:hover {
    background-position: 0 -12px;
}
#picto_e-signaturesecurisee {
    background: url(/img/picto_ess.png) 0 0 no-repeat;
    width: 12px;
    height: 12px;
    text-indent: -9999em;
    border: none;
    cursor: pointer;
    float: right;
    margin-left: 5px;
    margin-top: 4px;
}
#picto_e-signaturesecurisee:hover {
    background-position: 0 -12px;
}
#picto_certidemat {
    background: url(/img/picto_cdt.png) 0 0 no-repeat;
    width: 12px;
    height: 12px;
    text-indent: -9999em;
    border: none;
    cursor: pointer;
    float: right;
    margin-left: 5px;
    margin-top: 4px;
}
#picto_certidemat:hover {
    background-position: 0 -12px;
}
#picto_e-facteur {
    background: url(/img/picto_efc.png) 0 0 no-repeat;
    width: 12px;
    height: 12px;
    text-indent: -9999em;
    border: none;
    cursor: pointer;
    float: right;
    margin-left: 5px;
    margin-top: 4px;
}
#picto_e-facteur:hover {
    background-position: 0 -12px;
}
#picto_e-assemblees {
    background: url(/img/picto_eas.png) 0 0 no-repeat;
    width: 12px;
    height: 12px;
    text-indent: -9999em;
    border: none;
    cursor: pointer;
    float: right;
    margin-left: 5px;
    margin-top: 4px;
}
#picto_e-assemblees:hover {
    background-position: 0 -12px;
}
#detailPicto {
    background: white;
    color: #868688;
    margin-left: 5px;
    margin-top: 4px;
    border: none;
    border-radius: 2px;
    height: 12px;
    float: right;
    font-size: 9px !important;
}
#detailPicto > strong {
    font-size: 9px !important;
    position: relative;
    top: 0px;
}

/******* NAVBAR *******/
.navbar-expand {
    height: 80px;
    background: #ffffff;
    padding: 0 4rem;
}

.navbar-nav li.nav-item {
    display: flex;
    line-height: 1.45;
}

/******* MENU HAUT *******/
.logo {
    max-height: 117px;
    max-width: 300px;
    margin-right: 20px;
}

.onglet {
    color: #8f959b !important;
    text-decoration: none !important;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 500;
    border-top: #ffffff solid 3px;
    padding: 22px 2.5rem;
    transition: 150ms;
}

.onglet:after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 65%;
    padding-top: 2px;
    border-bottom: #ffffff solid 2px;
}

.onglet:hover {
    border-top: #d20073 solid 3px;
    color: #d20073 !important;
    background-color: #f5f5f5;
    transition: 150ms;
}

.onglet:hover:after {
    border-bottom: #d20073 solid 2px;
    transition: 100ms;
}

#entreprise.active {
    border-top: #3e90ce solid 3px;
    color: #3e90ce !important;
    background-color: #f5f5f5;
    padding-top: 20px;
}

#entreprise.active:after {
    border-bottom: #3e90ce solid 2px;
}

#acheteur.active {
    border-top: #4f6b7f solid 3px;
    color: #4f6b7f !important;
    background-color: #f5f5f5;
    padding-top: 20px;
}

#acheteur.active:after {
    border-bottom: #4f6b7f solid 2px;
}

.forgot {
    color: #8f959b !important;
    text-decoration: underline !important;
}

.connexion {
    font-size: .7em;
    margin-top: -21px;
    position: relative;
    right: -343px;
}

.connexion button {
    padding-top: initial;
    width: 140px;
    height: 36px;
    box-shadow: none;
    margin-top: 20px;
}

.connexion button::after {
    content: none;
}

/******* MENU BAS *******/
.navbar-bottom a,
.navbar-bottom a:focus,
.navbar-bottom a:visited,
.navbar-bottom a:hover,
.navbar-bottom a:active {
    text-decoration: none;
    color: white !important;
    max-height: 50px;
    padding: 17px 1rem 14px 1rem;
    text-align: center;
    flex-grow: 1;
    font-weight: 300;
}

.entreprise .navbar-bottom {
    background-color: #3e90ce;
    color: white;
    font-weight: 400;
    font-size: 14px;
    height: 49px;
    max-height: 50px;
    display: flex;
    padding: 0 7.9rem;
    transition: 100ms;
}

.acheteur .navbar-bottom {
    background-color: #4f6b7f;
    color: white;
    font-weight: 400;
    font-size: 14px;
    height: 49px;
    max-height: 50px;
    display: flex;
    padding: 0 7.9rem;
    transition: 100ms;
}

.navbar-bottom a:hover,
.navbar-bottom a.active {
    background: rgba(255, 255, 255, 0.13);
    border-bottom: 3px solid #ffffff;
}

.compte button {
    background-color: white;
    color: #d20073;
    font-weight: 500;
    border-radius: 3px;
    border: white solid 1px;
    height: 36px;
    font-size: 14px;
    transition: 150ms;
    cursor: pointer;
}

.compte button:hover {
    border-color: #d20073;
    transition: 150ms;
}

.navbar-bottom a.compte:hover {
    background: transparent;
    border-color: transparent;
}


/***************************************
    FOOTER
***************************************/
/******* RESUME *******/
.dark-grey {
    background-color: #96a6b1;
    color: white;
    text-align: center;
    padding: 10px 0;
    margin: 0px;
}

.dark-grey img {
    width: 20px;
}

.dark-grey i {
    font-size: 20px;
    position: relative;
    top: 1px;
}

.dark-grey .slideshow {
    margin: initial;
}

.slideshow.bottom {
    font-size: 16px;
    font-weight: 100;
    display: inline-block;
    margin: 0px;
}

.slideshow.bottom i.fa-angle-left,
.slideshow.bottom i.fa-angle-right {
    display: none;
}

.bottom .float-l {
    float: left;
}

.bottom .display-middle {
    display: inline-block;
}

.bottom .float-r {
    float: right;
}

.bottom .slide-element {
    background-color: transparent;
    box-shadow: none;
    width: auto;
    height: auto;
    padding: 0px;
    margin: 0px;
}

.bottom .slide-element a {
    position: relative;
    top: 2px;
}

.resume {
    text-transform: uppercase;
    padding: 0 15px;
    font-size: 0.7em;
}

/******* FOOTER *******/
footer {
    background-color: white;
    color: #8f959b;
    padding: 50px 0;
    font-size: 0.9em;
}

.footer-margin {
    max-width: 1565px;
    margin: 0 auto;
}

.footer-menu {
    display: flex;
    justify-content: space-evenly;
    padding: 0 7rem;
}

.footer-menu-col {
    display: flex;
    width: 50%;
}

.footer-menu-col:last-child {
    justify-content: flex-end;
}

.entreprise-col,
.acheteur-col,
.solutions-col:first-child {
    width: 50%;
}

.footer-menu img {
    max-width: 100px;
}

.solutions-col img {
    height: 28px;
    max-width: 100%;
}

footer h6 {
    font-size: 0.9em !important;
    font-weight: 500;
    color: #4f6b7f;
}

footer h6,
footer a,
footer a:hover,
footer a:link,
footer a:visited {
    text-decoration: none;
    font-size: 0.9em;
    color: #8f959b;
}

.social {
    display: flex;
    justify-content: space-between;
    margin-left: 90px;
    margin-right: 111px;
}

.social h6 {
    margin-left: 20px;
}

.social i {
    color: #3e90ce;
    margin: 0 10px;
}

.social img {
    max-width: 16px;
    max-height: 16px;
    margin-left: 15px;
}

.reforest,
.reforest a {
    font-size: 14px !important;
    color: #629E2D !important;
    font-weight: 400 !important;
    transition: 150ms;
}

.reforest a:hover {
    color: #40851A !important;
    text-decoration: underline;
    transition: 150ms;
}

.reforest .reforest-img {
    max-width: 125px;
    max-height: 44px;
    position: relative;
    top: -17px;
}

.copyrights {
    margin-top: 30px;
    padding-top: 15px;
    display: flex;
    justify-content: space-evenly;
    border-top: 1px solid #f1f2f3;
    color: #8f959b;
    font-size: 13px;
    padding-left: 7rem;
    padding-right: 7rem;
}

.copyrights div {
    flex-grow: 1;
}

.copyrights a {
    text-decoration: underline !important;
    font-size: .9em !important;
    transition: 150ms;
}

.copyrights a:hover {
    color: #d20073;
    transition: 150ms;
}


/***************************************
    CONTENT
***************************************/
/******* CONTAINER *******/
.white {
    background-color: white;
    padding: 50px 0;
}

.light-grey {
    background-color: #f5f5f5;
    padding: 50px 0;
}

.blue {
    background-color: #4f6b7f;
    justify-content: space-between;
    padding: 50px 0;
}

.blue-ent {
    background-color: #3E90CE;
    justify-content: space-between;
    padding: 50px 0;
}

.emp-content {
    font-family: 'Roboto', sans-serif !important;
    width: 75%;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}

.emp-content p {
    color: #979a9c;
    font-weight: 300;
    font-size: 16px;
}

.container-separate:before {
    content: "";
    position: absolute;
    width: 87%;
    height: 1px;
    background: #ECECEC;
    left: 50%;
    transform: translateX(-50%);
}

.container-separate-b:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #dcdcdc;
    left: 50%;
    transform: translateX(-50%);
}

/******* BUTTON *******/
.signup-button {
    background-color: #d20073;
    color: #ffffff !important;
    font-weight: 400;
    height: 45px;
    width: auto;
    font-size: 14px;
    line-height: 24px;
    border: 1px solid #d20073;
    border-radius: 3px;
    padding: 10px 40px;
    cursor: pointer;
    transition: 150ms;
}

.signup-button:hover {
    text-decoration: none;
    background-color: #e6248e;
    border: 1px solid #e6248e;
    transition: 150ms;
}

.signup-shadow {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.signup-search {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    bottom: -26px;
    line-height: 1;
    height: 46px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.submit-button {
    background-color: #d20073;
    color: white;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    height: 45px;
    width: 235px;
    border: none;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 10px;
    cursor: pointer;
}

.submit-button:after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 65%;
    padding-top: 50px;
    border-bottom: #3e90ce solid 4px;
}

.submit-button-negative {
    background-color: white;
    color: #d20073;
    height: 45px;
    border: 1px solid #d20073;
    border-radius: 3px;
    cursor: pointer;
    position: absolute;
    padding: 0 30px;
}

.extra-button {
    background-color: #ffffff;
    color: #3e90ce !important;
    font-weight: 400;
    border: 1px solid #3e90ce;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none !important;
    padding: 10px 20px;
    margin: 15px;
    transition: 200ms;
}

.extra-button:hover {
    color: #d20073 !important;
    border-color: #d20073;
    transition: 200ms;
}

/******* BOX *******/
.box {
    padding: 0 !important;
    border-radius: 3px;
    box-shadow: 0px 6px 13px rgba(79, 107, 127, 0.2);
    margin-bottom: 40px;
}

.box-header {
    max-height: 60px;
    background-color: #3e90ce;
    color: #ffffff;
    border-top-left-radius: 3px !important;
    border-top-right-radius: 3px !important;
    padding: 12px 20px;
    display: block;
    line-height: 0;
}

.box-header-title {
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    font-size: 15px;
    display: inline-block;
}

.box-header-title span.badge-notice {
    display: inline;
    position: relative;
    color: #d30072;
    font-size: 12px;
    font-weight: 400;
    background: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 15px;
    padding: 3px 10px;
    margin-left: 15px;
    top: -2px;
    transition: 200ms;
}

.box-header-title span.badge-notice:hover {
    border: 1px solid #d30072;
    transition: 200ms;
}

ul.header-action {
    display: inline-flex;
    list-style: none;
    margin-left: auto;
    margin-bottom: 0 !important;
}

ul.header-action li {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    font-size: 14px;
    margin: 0 10px;
}

ul.header-action li a {
    color: #ffffff;
    text-decoration: none;
    transition: 150ms;
}

ul.header-action li a:hover {
    color: #addcff;
    transition: 150ms;
}

ul.header-action li a i {
    margin-right: 6px;
}

.box-body {
    padding: 20px 30px;
    color: #787878;
    background: #ffffff;
}

.box-body-top {
    color: #4f6b7f;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    font-size: 15px;
    text-align: left;
    border-bottom: 1px solid #ECECEC;
    padding-bottom: 18px;
    margin-bottom: 27px;
}

.box-body .body-top-action {
    float: right;
}

.body-top-action a {
    color: #3e90ce !important;
    font-size: 15px;
    font-weight: 400;
    transition: 150ms;
}

.body-top-action a:hover {
    color: #d20073 !important;
    transition: 150ms;
}

.results a:first-child,
.result-number,
.pink {
    color: #d20073;
    font-weight: 500;
}

.box-body .body-middle {
    width: 100%;
    display: flex;
    -webkit-flex-flow: row wrap;
    font-size: 14px;
}

#list-result .col1,
#list-result .col2,
#list-result .col3 {
    flex-grow: 1;
    width: 50%;
    font-weight: 300;
}

.body-middle .col1,
.body-middle .col2,
.body-middle .col3 {
    flex-grow: 1;
    font-weight: 300;
}

.body-middle p {
    font-size: 14px;
}

.col3 img {
    max-height: 110px;
}

.body-middle .coll-ico {
    color: #63afe8;
    font-size: 19px;
    margin-right: 10px;
}

.box-body .box-footer {
    display: flex;
    font-size: 14px;
    border-top: 1px solid #ECECEC;
    padding-top: 20px;
    margin-top: 25px;
}

.box-footer-col {
    flex-grow: 1;
}

.box-footer form a {
    width: 20%;
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    color: #398fd0;
    background: #ffffff;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid #398fd0;
    border-radius: 5px;
    padding: 5px 10px;
    margin: 2px 7px;
    transition: 150ms;
}

.box-footer form a:hover {
    color: #d20073;
    border-color: #d20073;
    transition: 150ms;
}

.box-footer a.footer-form-a {
    width: 18%;
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    color: #398fd0;
    background: #ffffff;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid #398fd0;
    border-radius: 5px;
    padding: 5px 10px;
    margin: 2px 7px;
    transition: 150ms;
}

.box-footer a.footer-form-a-attrib {
    width: 100%;
}

.box-footer .d-flex .footer-rectif,
.box-footer .d-flex .footer-annul {
    width: 18.35%;
}

.box-footer a.footer-form-a:hover {
    color: #d20073;
    border-color: #d20073;
    transition: 150ms;
}

.box-footer form a.a-muted,
.box-footer .d-flex a.a-muted {
    color: #c1c6cc !important;
    border-color: #c1c6cc !important;
    cursor: default !important;
}

.box-footer form a.a-muted:hover {
    color: #c1c6cc !important;
    border-color: #c1c6cc !important;
}

.img-graph {
    opacity: .9;
    width: 59%;
    max-height: 258px;
    max-width: 418px;
    padding: 1rem;
    margin-top: 2rem;
}

/******* ARIANE *******/
.ariane {
    margin: 5px 0;
}

.ariane a {
    font-size: 12px;
    font-weight: 300;
    margin-top: 15px;
    color: #96a6b1 !important;
    transition: 150ms;
}

.ariane a:hover {
    color: #d20073 !important;
    transition: 150ms;
}

.ariane strong {
    font-size: 12px;
    font-weight: 400;
    color: #787878;
}

/******* SEARCH *******/
.emp-content-before:before {
    content: "";
    display: block;
    margin: 0 auto;
    width: 12%;
    margin-bottom: 50px;
    border-bottom: #3e90ce solid 4px;
}

.emp-content h6 {
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
}

.fond {
    width: 100%;
    position: absolute;
    z-index: -1;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.fond-normal {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    width: 100%;
    height: 420px;
    position: absolute;
}

.search {
    position: relative;
    text-align: center;
}

.search-margin {
    margin: 5rem 0;
}

.search h1 {
    color: white;
    font-weight: bold;
    line-height: 1;
    font-size: 40px;
    padding-top: 50px;
    margin-top: 2rem;
}

.search h2 {
    color: #ffffff;
    font-weight: 400;
}

.search p {
    color: #ffffff;
    font-size: 20px;
    font-weight: 300;
}

.circle {
    background-color: #d20073;
    color: white;
    font-weight: 300;
    font-size: 20px;
    border-radius: 50%;
    height: 182px;
    width: 182px;
    position: absolute;
    padding-top: 35px;
    text-align: center;
    cursor: pointer;
    float: right;
    top: 280px;
    left: 50%;
    transform: translateX(380px);
    box-shadow: 0px 9px 10px rgba(0, 0, 0, 0.25);
}

.circle:hover {
    text-decoration: none !important;
    color: #ffffff !important;
}

.circle i {
    font-size: 25px;
}

#tabs {
    left: 50%;
    transform: translateX(-50%);
    min-height: 300px;
    max-width: 699px;
    box-shadow: 5px 10px 15px rgba(79, 107, 127, 0.2);
    padding: 0;
    margin-bottom: 50px;
}

.box-tabs-search:after {
    content: "";
    position: relative;
    display: block;
    margin: 0 auto;
    top: 3.5rem;
    width: 22%;
    border-bottom: #398fd0 solid 3px;
}

#tabs > ul > li {
    opacity: .9;
    min-width: 33.33%;
    font-size: 14px;
    display: flex;
    justify-content: center;
    height: 48px;
    border: 1px solid #2979b5;
    border-bottom-color: transparent;
    margin-left: 0px;
    margin-right: 0px;
    transition: 150ms;
}

#tabs > ul > li:hover {
    background: #52a4e2;
    transition: 150ms;
}

#tabs > ul > li a {
    font-size: 15px;
    font-weight: 400;
    width: 100%;
    text-align: center;
}

#tabs > ul > li.ui-tabs-active {
    z-index: 0;
    opacity: 1 !important;
}

#tabs > ul > li.ui-tabs-active:hover {
    background: #ffffff;
}

.ui-widget-header, .ui-widget-content, .ui-widget.ui-widget-content {
    background-color: transparent;
    border: none;
}

.ui-tabs-panel {
    background-color: white !important;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.ui-tabs .ui-tabs-nav {
    padding: 0px;
    margin: -1px 0px;
}

.ui-tabs .ui-tabs-nav li {
    margin: initial;
    margin-top: 7px;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    background-color: #73acda;
    border: 1px solid #73acda;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
    color: white;
    font-weight: bold;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    background-color: white;
    border: none;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #3e90ce;
    font-weight: bold;
}

.ui-widget .ui-menu-item {
    font-size: 14px;
}

li.ui-state-disabled {
    background-color: #cad4dc !important;
    color: white !important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    padding-top: 8px;
    margin-top: -1px;
    box-shadow: 5px 0 rgba(0, 0, 0, 0.1);
    z-index: 999;
    height: 56px !important;
    border: none !important;
}

.ui-button .ui-icon,
.ui-button .ui-icon:hover {
    background-image: url('../img/ui-icons_777777_256x240.png');
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: 1em;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
    cursor: pointer;
}

/******* FORM *******/
th {
    color: #737373;
}

.table-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: .5rem 0;
}

.table-flex > div > input {
    margin-bottom: 10px;
}

.radio {
    margin: 20px 0;
    display: inline-block;
    padding: 10px;
    border: 1px solid;
    border-radius: 5px;
    width: 23%;
    cursor: pointer;
}

.radio:hover,
.radio:hover label {
    color: #3e90ce !important;
    border-color: #3e90ce !important;
}

label {
    margin-bottom: initial;
    font-size: 0.9em;
}

[type="radio"]:not(:checked) {
    border-color: rgb(204, 204, 204);
}

[type="radio"]:checked {
    border-color: rgb(62, 144, 206);
}

[type="radio"]:not(:checked) + label {
    color: #8f959b;
}

[type="radio"]:checked + label {
    color: #3e90ce;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    line-height: 15px;
}

/* radio button border */
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}

/* radio button fill */
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 7px;
    height: 7px;
    background: #3e90ce;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.custom-control-label::before {
    left: -1.2rem;
    top: 0rem;
}

.custom-control-label::after {
    left: -1.2rem;
    top: 0rem;
}

.table-flex > div {
    width: 49%;
}

.table-header {
    color: #737373;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 5px;
}

div > input[type="text"] {
    background-color: #ecf4fa;
    border: none;
    height: 41px;
    padding-left: 10px;
    width: 100%;
}

div > input[type="password"] {
    background-color: #ecf4fa;
    border: none;
    height: 41px;
    padding-left: 10px;
    width: 100%;
}

::placeholder {
    color: #9ea4a7;
    font-size: 15px;
}

div > textarea {
    background-color: #ecf4fa;
    border: none;
}

input#what {
    padding-right: 3rem;
}

.input-search {
    width: 98% !important;
}

input[type=text] + i {
    color: #8f959b;
    background-color: #ecf4fa;
    padding-right: 12px;
    margin-left: -40px;
}

select {
    color: #8f959b;
    background-color: #ecf4fa;
    height: 41px;
    border: none;
    border-radius: 0;
    width: 100%;
}

#where-button,
#where2-button,
#country-button,
#posttype1-button,
#posttype2-button,
#posttype3-button,
#categorie-button,
#subcategorie-button,
#domain-button,
#alertes-button,
#where-fournisseur-button,
#where-dce-button {
    color: #1f1f1f;
    background-color: #ecf4fa;
    height: 41px;
    border: none;
    border-radius: 0;
    width: 98%;
}

.ui-selectmenu-text {
    font-weight: normal;
    margin-top: 8px;
}

.ui-selectmenu-icon {
    margin-top: 8px !important;
}

#where-menu,
#where2-menu,
#country-menu,
#posttype1-menu,
#posttype2-menu,
#posttype3-menu,
#categorie-menu,
#subcategorie-menu,
#domain-menu,
#alertes-menu,
#where-fournisseur-menu,
#where-dce-menu {
    background-color: #ecf4fa;
    color: #1f1f1f;
    height: auto;
    max-height: 200px;
    border: 1px solid #a7bed0;
    border-top-color: transparent;
}

#posttype1-button,
#posttype2-button,
#posttype3-button {
    width: 30% !important;
    margin-left: 1rem;
}

[role="option"]:hover,
.ui-menu-item-wrapper.ui-state-active {
    background-color: #3e90ce !important;
}

.essentielles {
    border-collapse: separate;
    margin-top: -23px;
}

.essentielles td {
    padding: initial;
    padding-right: 30px;
}

.essentielles input {
    width: 280px !important;
}

/******* BROCHURE *******/
.brochure {
    margin-top: 30px;
    margin-left: 30px;
    box-shadow: 0px 6px 13px rgba(79, 107, 127, 0.2);
    display: flex;
    overflow: hidden;
    background-color: white;
    border-radius: 3px;
}

.brochure h5 {
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    font-size: 21px;
    color: #4F6B7F;
    margin-bottom: 25px;
}

.brochure ul {
    width: 50%;
    padding: 1.5rem;
    margin: 0;
}

.brochure ul li {
    list-style: none;
    margin-bottom: 22px;
}

.brochure .ico-clock::before {
    content: "\f017";
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 500;
    font-size: 22px;
    color: #63afe8;
    width: 30px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    left: 3rem;
    margin-top: -2px;
}

.brochure .ico-envelope::before {
    content: "\f0e0";
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 500;
    font-size: 22px;
    color: #63afe8;
    width: 30px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    left: 3rem;
    margin-top: -2px;
}

.brochure .ico-map::before {
    content: "\f3c5";
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: #63afe8;
    width: 30px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    left: 3rem;
    margin-top: -2px;
}

.brochure .ico-download::before {
    content: "\f019";
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: #63afe8;
    width: 30px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    left: 3rem;
    margin-top: -2px;
}

.brochure .ico-file::before {
    content: "\f15c";
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 500;
    font-size: 22px;
    color: #63afe8;
    width: 30px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    left: 3rem;
    margin-top: -2px;
}

.brochure .ico-shield:before {
    content: "\f3ed";
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: #63afe8;
    width: 30px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    left: 3rem;
    margin-top: -2px;
}

.brochure .ico-bullseye:before {
    content: "\f140";
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: #63afe8;
    width: 30px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    left: 3rem;
    margin-top: -2px;
}

.brochure .ico-newspaper:before {
    content: "\f1ea";
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: #63afe8;
    width: 30px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    left: 3rem;
    margin-top: -2px;
}

.brochure .ico-cloud:before {
    content: "\f381";
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: #63afe8;
    width: 30px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    left: 3rem;
    margin-top: -2px;
}

.brochure .ico-file-download:before {
    content: "\f56d";
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: #63afe8;
    width: 30px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    left: 3rem;
    margin-top: -2px;
}

.brochure .ico-user:before {
    content: "\f007";
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: #63afe8;
    width: 30px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    left: 3rem;
    margin-top: -2px;
}

.brochure .ico-rss:before {
    content: "\f09e";
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 22px;
    color: #63afe8;
    width: 30px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    left: 3rem;
    margin-top: -2px;
}

.img-back {
    width: 50%;
}

.img-back img {
    width: 100%;
    height: 100%;
}

.img-back-2 {
    width: 50%;
}

.img-back-2 img {
    width: 100%;
    height: 100%;
}


.brochure p {
    color: #787878;
    font-weight: 400;
    font-size: 15px;
    padding-left: 2rem;
    margin-bottom: 0;
}

.brochure .submit-button:after {
    content: none;
}

.awesome {
    text-align: center;
    font-size: 20px;
    color: #63afe8;
}

/******* SOURCING *******/
.thumbnail-container {
    display: flex;
    justify-content: center;
}

.thumbnail {
    background-color: white;
    color: #8f959b;
    padding: 25px;
    margin: 50px 25px;
    box-shadow: 0px 6px 13px rgba(79, 107, 127, 0.2);
    width: 450px;
    height: 280px;
    border-radius: 3px;
}

.thumbnail h3 {
    font-weight: 500;
    line-height: 31px;
    font-size: 24px;
    text-align: center;
    color: #3E90CE;
    margin-bottom: 15px;
}

.thumbnail-subtitle {
    font-weight: 400;
    line-height: 25px;
    font-size: 17px;
    color: #5a5a5a;
}

.thumbnail-content {
    font-weight: 300;
    line-height: 25px;
    font-size: 17px;
    color: #787878;
    text-align: justify;
}

.thumbnail a:hover {
    text-decoration: none;
}

.thumbnail.sourcing h3 {
    text-align: left;
    color: #4f6b7f;
    font-weight: 500;
}

.thumbnail .submit-button {
    position: relative;
    padding-top: initial;
}

.thumbnail.sourcing .submit-button {
    left: initial;
    transform: initial;
    position: fixed;
    margin-left: 8%;
}

.thumbnail .submit-button:after {
    display: none;
}

.sourcing .table-flex {
    flex-direction: column;
}

.sourcing .table-flex > div {
    width: 100%;
}

.sourcing .table-flex > .order-3 {
    order: 2;
}

.sourcing .table-flex > .order-2 {
    order: 3;
}

/******* Slide-notice *******/
.slideshow a.div-link {
    text-decoration: none;
}

.slideshow a.extra-button,
.slideshow a.extra-button:focus,
.slideshow a.extra-button:visited,
.slideshow a.extra-button:hover,
.slideshow a.extra-button:active {
    text-decoration: none;
    color: white;
    max-height: 50px;
    padding: 17px 2rem 14px 2rem;
    text-align: center;
    flex-grow: 1;
    font-weight: 300;
}

.slideshow i.fa-angle-left {
    position: absolute;
    font-size: 35px;
    top: 50%;
    left: -20px;
    cursor: pointer;
    transition: 200ms;
}

.slideshow i.fa-angle-right {
    position: absolute;
    font-size: 35px;
    top: 50%;
    right: -20px;
    cursor: pointer;
    transition: 200ms;
}

.slide-element h6 {
    height: 24px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 500 !important;
    color: #4f6b7f;
    letter-spacing: 0.4px;
}

.slide-element .coll-separate {
    height: 2px;
    width: 45px;
    background: #4f6b7f;
    margin-top: 8px;
    margin-bottom: 20px;
}

.slide-element .element-content {
    height: 102px;
    overflow: hidden;
}

.slide-element .element-content p {
    font-size: 14px;
    font-weight: 300;
}

.slide-element p.element-date {
    height: 45px;
    font-weight: 400;
    font-size: 14px;
}

.slide-element a.element-link-a,
.slide-element a.element-link-a:hover {
    color: #ffffff;
    text-decoration: none;
}

.slide-element form {
    text-align: center;
}

.slide-element .extra-button {
    padding: 10px !important;
    margin: 0;
    transition: 200ms;
    width: 100%;
    display: block;
}

.slide-element .extra-button:hover {
    color: #d20073;
    border: 1px solid #d20073;
    padding: 10px !important;
    transition: 200ms;
}

.slide-element h6 .slide-element .extra-button:hover {
    color: red;
}

/******* SLIDESHOW *******/
.slideshow {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.slideshow i {
    color: #4f6b7f;
}

.slide-element {
    background-color: #f6f6f6;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    margin: 0 10px;
    width: 23%;
    height: 245px;
    padding: 15px;
}

.articles {
    width: 30%;
    padding: 0;
    height: auto;
    margin: 0 15px;
    box-shadow: 0px 6px 13px rgba(79, 107, 127, 0.2);
    border-radius: 3px;
    transition: 150ms;
}

.slide-element.articles:hover {
    box-shadow: 0px 6px 13px rgba(16, 145, 236, 0.25);
    transition: 150ms;
}

.slide-element div h5,
.brochure th h5 {
    font-weight: 500;
    color: #4f6b7f;
    letter-spacing: .5px;
    margin-bottom: 20px;
}

.slide-element div h6:after {
    content: "";
    display: block;
    width: 25%;
    padding-top: 10px;
    border-bottom: #4f6b7f solid 2px;
}

.articles div p.articles-title:after {
    display: none;
}

.red-underlined:after {
    border-color: #d20073 !important;
}

.submit-negative-list {
    top: -13px;
    right: 0;
    position: absolute;
}

.submit-negative-article {
    bottom: 10px;
    box-shadow: 0 -25px 25px rgba(255, 255, 255, 0.9);
}

.button {
    background-color: #d20073;
    color: white;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    height: 45px;
    width: 235px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.articles img {
    width: 100%;
    height: 190px;
    min-height: 190px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

figure {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin-bottom: 10px;
}

figcaption {
    font-size: 14px;
    color: #c7c9cc;
    margin-top: 40px;
    padding: 0 20px;
}

.articles p.articles-title {
    line-height: 18px;
    min-height: 36px;
    max-height: 36px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 500 !important;
    color: #4f6b7f;
    letter-spacing: 0.4px;
    padding: 0 20px;
    margin-bottom: 17px;
}

.articles p.articles-body {
    height: 110px;
    overflow: hidden;
    line-height: 18px;
    font-size: 15px;
    font-weight: 300;
    color: #787878;
    text-align: justify;
    padding: 0 20px;
}

.articles .submit-button-negative {
    position: initial;
    margin: 15px;
}

.construction {
    position: relative;
}

.img-presence {
    background: url(/img/bgpresence.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 400px;
}

.opacity {
    background-color: rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    color: white;
}

.opacity h6 {
    color: white;
    font-size: 2rem;
    font-weight: 500;
    padding-top: 60px;
    margin-bottom: 1.5rem;
}

.opacity p {
    font-weight: 300;
}

.opacity p b {
    font-weight: 500;
}

.opacity button {
    position: initial;
    margin: 50px 10px;
}

.opacity .submit-button {
    padding: 0;
    left: initial;
    transform: none;
}

.opacity .submit-button-negative {
    height: 45px;
    width: 235px;
}

.opacity .submit-button:after {
    content: none;
}

.user,
.burger,
.burger-disable {
    display: none;
}


.ellipse-darkblue-on-white,
.ellipse-blue-on-white,
.ellipse-blue-on-grey,
.ellipse-white-on-blue,
.ellipse-darkgrey-on-grey,
.ellipse-grey-on-white {
    overflow: hidden;
    position: relative;
    text-align: justify;
}

.ellipse-darkblue-on-white:after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    color: #4f6b7f;
    background-color: white;
    padding-left: 1px;
}

.ellipse-blue-on-white:after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    color: #3e90ce;
    background-color: white;
    padding-left: 1px;
}

.ellipse-blue-on-grey:after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    color: #3e90ce;
    background-color: #f6f6f6;
    padding-left: 1px;
}

.ellipse-white-on-blue:after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    color: white;
    background-color: #3e90ce;
    padding-left: 1px;
}

.ellipse-darkgrey-on-grey:after {
    content: '...';
    position: absolute;
    right: 1px;
    bottom: 0;
    color: #b4b6b7;
    background-color: #f6f6f6;
    padding-left: 1px;
}

.ellipse-grey-on-white:after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    color: #979a9c;
    background-color: white;
    padding-left: 1px;
}

.pad-top {
    padding-top: 18rem !important;
}

.lastnotices h6 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/******* CONTACT *******/
.contact-box {
    width: 70%;
}

.contact-box h1 {
    color: #368cd1;
    font-size: 1.75rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    border-bottom: 1px solid #ececec;
    padding-bottom: .5rem;
    margin-bottom: 2rem;
}

.contact-box h1 i {
    color: #d30072;
    margin-right: 15px;
}

/******* ERROR PAGE *******/
.error-box {
    background: #f0f1f3;
    border-radius: 9px;
    box-shadow: 0px 6px 13px rgba(79, 107, 127, 0.2);
}

.error-header {
    height: 2rem;
    background: #94b3d4;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}
.error-header i {
    color: #ff6a6a;
    float: right;
    position: relative;
    top: 8px;
    right: 11px;
}

.error-body {
    padding-top: 2.5rem;
}

.error-img {
    margin: auto;
    width: 100%;
}

.error-h {
    font-size: 2.5rem;
    color: #638ac7;
}

.error-p {
    font-size: 1.5rem;
}
.error-p span {
    font-size: 1.2rem;
    color: #9a9a9a;
}
.error-body .signup-button {
    position: relative;
    top: 1.5rem;
}


/***************************************
    WIDESCREEN
***************************************/
@media screen and (min-width: 1850px) {
    .emp-content {
        max-width: 1375px;
    }

    .emp-content.contact,
    .emp-content.content-login {
        max-width: 1075px;
    }

    footer {
        max-width: 1565px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1370px) {
    .clear input.size-word {
        width: 59% !important;
    }
}


/***************************************
    TABLET
***************************************/
@media screen and (max-width: 1199px) {
    .cookie-txt {
        width: 70%;
    }

    #linkSolutions {
        display: none;
    }

    .spinner {
        top: 40% !important;
        left: 40% !important;
    }

    .top-up {
        padding: 1rem 10px;
    }

    .compte button {
        background-color: #d20073 !important;
        color: #ffffff !important;
        line-height: 1;
    }

    .navbar-expand {
        display: block;
        height: 65px;
        padding: 0;
    }

    .navbar-expand div.d-flex {
        padding: 0 2em;
    }

    #loginurl,
    .navbar-bottom,
    .circle {
        display: none !important;
    }

    .navbar-brand {
        height: 65px;
        max-height: none;
        justify-content: initial;
        padding: 0;
        margin: auto;
        text-align: center;
    }

    .burger {
        flex-grow: 1;
        display: block;
        margin: auto;
        text-align: left;
        cursor: pointer;
        color: #3e90ce;
        font-size: 25px;
        transition: 150ms;
    }

    .burger-disable {
        flex-grow: 1;
        display: block;
        margin: auto;
        text-align: left;
        color: #cccccc;
        font-size: 25px;
    }

    .menu-burger {
        position: fixed;
        bottom: 0px;
        z-index: 0;
        width: 100%;
        height: 100%;
    }

    .menu-burger-black {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.48);
        width: 100%;
        height: 100%;
    }

    .menu-burger .navbar {
        position: fixed;
        background: rgb(245, 245, 245);
        text-align: left;
        width: 50%;
        height: 100%;
        z-index: 999999;
        display: flex;
        align-items: baseline;
        align-content: baseline;
    }

    .user {
        flex-grow: 1;
        display: block;
        margin: auto;
        text-align: right;
        cursor: pointer;
    }

    .nav-onglet {
        display: flex;
        background: #fff;
        width: 100%;
    }

    .onglet-ico {
        margin: auto;
        margin-right: 12px;
        font-size: 1.8rem;
        color: #525252;
        cursor: pointer;
    }

    .logo {
        margin: 10px auto;
    }

    .navbar-nav li.nav-item {
        width: 100%;
    }

    .onglet {
        margin-top: initial !important;
        padding-top: 8px !important;
        height: 50px;
        width: 100%;
        text-align: center;
        background: #ffffff;
        border-top: #f5f5f5 solid 3px;
    }

    .onglet:after {
        width: 18%;
    }

    .nav-onglet .onglet {
        width: 55% !important;
        border: none;
        color: #525252 !important;
        text-align: left;
    }

    .entreprise {
        padding-top: 50px;
    }

    .acheteur {
        padding-top: 50px;
    }

    .search h1 {
        font-size: 34px;
        padding-top: 47px;
    }

    .search-home-emp h1 {
        color: #dc4799 !important;
    }

    #tabs {
        left: 0;
        transform: none;
        max-width: none;
        max-height: none;
        margin: 0;
        margin-bottom: 3rem;
    }

    .ui-tabs .ui-tabs-nav li.ui-tabs-active {
        box-shadow: none;
    }

    #tabs > ul > li {
        opacity: 1;
        width: 33.3%;
        min-width: initial;
        white-space: normal;
        text-align: center;
    }

    #tabs > ul > li > a {
        align-self: center;
    }

    .radio {
        margin: 5px;
        width: 45% !important;
    }

    #tabs-2 .radio {
        width: 96% !important;
    }

    .table-flex {
        flex-direction: column;
    }

    .table-flex > div {
        width: 100%;
    }

    .order-2 {
        order: 3;
    }

    .order-3 {
        order: 2;
    }

    .order-7 {
        order: 6;
        margin-bottom: 1rem;
    }

    .emp-content {
        width: 100%;
    }

    .emp-content > h6,
    .emp-content > p {
        padding: 0 20px;
    }

    .emp-content > h6 {
        font-size: 21px;
    }

    .emp-content > p {
        font-size: 14px;
    }

    .slideshow-list-button {
        margin: 0 2.3rem;
    }

    .slideshow-list-button .submit-negative-list {
        display: flex;
        margin: auto;
        position: relative;
        bottom: -20rem;
        top: auto;
        right: auto;
    }

    .slideshow {
        margin-top: 0;
    }

    .slideshow i.fa-angle-left {
        left: 10px !important;
    }

    .slideshow i.fa-angle-right {
        right: 10px !important;
    }

    .slideshow-articles {
        margin-top: 30px;
    }

    .slide-element {
        width: 43%;
    }

    .slide-element.articles {
        padding: initial;
    }

    .articles {
        height: 450px;
    }

    .articles img {
        height: 150px;
    }

    .articles > p {
        padding: 0 15px;
        line-height: 16px;
        height: 98px;
        overflow: hidden;
    }

    .articles .submit-button-negative {
        margin: 0 15px;
    }

    .slideshow.bottom {
        text-align: center;
        width: 80%;
        display: inline-flex;
    }

    .slideshow.bottom i {
        display: block !important;
        color: #fff;
        position: absolute !important;
        top: -5px !important;
    }

    .slideshow.bottom .slide-element i {
        top: 3px !important;
        left: 30%;
    }

    .slideshow.bottom .slide-element a {
        padding: 0;
    }

    figcaption {
        margin-top: 20px;
    }

    .construction {
        top: 50px;
        margin-bottom: 2rem;
    }

    .img-presence {
        height: 325px;
    }

    .opacity > h6 {
        font-size: 24px;
        padding-top: 2.9rem;
    }

    .opacity > p {
        width: 90%;
        margin: 0 auto;
        margin-bottom: 2rem;
        line-height: 20px;
    }

    .opacity button {
        margin: 0 0 10px;
    }

    .news-button .submit-negative-list {
        display: flex;
        margin: auto;
        position: relative;
        bottom: -34.5rem;
        top: auto;
        right: auto;
    }

    .fond-acheteur {
        height: 870px;
        z-index: -1;
    }

    .thumbnail-container {
        flex-direction: unset;
    }

    .thumbnail {
        width: 44%;
        height: auto;
    }

    .thumbnail > h3 {
        font-size: 18px;
    }

    .thumbnail > p {
        margin-bottom: 1rem;
    }

    .thumbnail > button {
        margin-top: 15px;
    }

    .acheteur .brochure > img {
        margin-top: 15px;
    }

    .sourcing .submit-button {
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: initial !important;
    }

    .entreprise-col,
    .acheteur-col,
    .solutions-col,
    .social,
    .copyrights {
        display: none;
    }

    .dematis-col {
        line-height: 0.75em;
    }

    footer {
        padding: 20px 0;
    }

    .footer-menu {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .copyrights-mobile {
        display: flex !important;
        flex-direction: column;
        text-align: center;
        margin-top: 15px;
    }

    .copyrights-mobile > div {
        margin-top: 15px;
    }

    .device-mobile {
        display: block !important;
    }

    .contact {
        width: 97%;
    }

    .contact-box {
        width: 85%;
    }

    .img-faq {
        background-size: contain !important;
    }

    .pad-top {
        padding-top: 9rem !important;
    }

    .navigate-faq {
        top: 15% !important;
    }

    .brochure {
        margin-left: 0;
    }

    .brochure .ico-clock::before,
    .brochure .ico-envelope::before,
    .brochure .ico-map::before,
    .brochure .ico-download::before,
    .brochure .ico-file::before,
    .brochure .ico-shield::before,
    .brochure .ico-bullseye::before,
    .brochure .ico-newspaper::before,
    .brochure .ico-cloud::before,
    .brochure .ico-file-download::before,
    .brochure .ico-user::before,
    .brochure .ico-rss::before {
        left: .7rem;
    }

    .content-sup {
        margin-top: 7rem;
    }

    .content-sup .d-flex {
        display: block !important;
        padding-top: 1rem !important;
        margin-bottom: 0 !important;
    }

    .content-sup form {
        display: flex;
        margin: 0;
    }

    .content-sup .extra-button {
        display: block;
        width: 45%;
        margin: 10px auto;
        text-align: center;
    }
}

@media screen and (max-width: 880px) {
    .brochure {
        flex-direction: column-reverse;
    }

    .brochure ul {
        width: 100%;
        padding: 1.5rem 1rem;
    }

    .img-back {
        width: 100%;
    }

    .img-back-2 {
        width: 100%;
    }

    .body-middle .col1,
    .body-middle .col2,
    .body-middle .col3 {
        text-align: left !important;
    }

    .paginate-box {
        width: 100%;
    }

    .paginate-box .navigate-link-l,
    .paginate-box .navigate-link-r {
        width: 21%;
    }

    .paginate-box .extra-button {
        width: 33%;
    }
}


/***************************************
    PHONE
***************************************/
@media screen and (max-width: 659px) {
    .cookie-txt {
        width: 60%;
    }

    .box-footer .d-flex .footer-rectif,
    .box-footer .d-flex .footer-annul {
        width: 43%;
    }

    h1 {
        padding: 0 5px;
    }

    .flash-message {
        width: 90%;
    }

    .logo {
        margin-top: 20px;
    }

    .device-mobile {
        display: none !important;
    }

    .copyrights-mobile {
        display: flex !important;
    }

    .menu-burger .navbar {
        width: 83%;
    }

    .navbar-expand div.d-flex {
        padding: 0 1rem;
    }

    .search h6 {
        font-size: 22px;
        padding-top: 8px;
    }

    .emp-content > h6 {
        font-size: 21px;
    }

    .emp-content > p {
        font-size: 13px;
    }

    .slide-element {
        width: 80%;
    }

    .slideshow.bottom .slide-element i {
        top: 3px !important;
        left: 17%;
    }

    .thumbnail-container {
        flex-direction: column;
    }

    .thumbnail {
        width: 90%;
        height: auto;
        margin-left: 5%;
    }

    .img-presence {
        height: 405px;
    }

    .content-sup .extra-button {
        width: 90%;
        margin: 10px auto;
    }
}

@media screen and (max-width: 569px) {
    .resume {
        font-size: 0.6em;
    }

    .nav-onglet .onglet {
        padding: 10px;
    }

    .logo {
        max-height: 31px;
        max-width: 231px;
    }
}

@media screen and (max-width: 450px) {
    .cookie-box {
        width: 75%;
    }

    .cookie-txt {
        width: 53%;
    }
}