logo_img{
    width: 220pt;
    height: 50pt;
    padding: 0px 0px 10px 20px
}
#footer, #footer .footer-menu li a {
    color: #fbfbfb
}

#footer p, h1 {
    text-align: center
}

#footer .footer-menu li, blockquote ul {
    list-style: none
}

.btn, h4 {
    text-transform: uppercase
}

.anim {
    position: relative;
    overflow: hidden
}

.anim > .back, .front {
    width: 100%;
    display: block
}

.anim > .bus1 {
    width: 7%;
    top: 47%;
    animation: anim1 10s infinite;
    animation-timing-function: cubic-bezier(.4, 0, .8, .95)
}

.anim > .bus2 {
    width: 7%;
    right: -15%;
    top: 47%;
    animation: anim2 10s infinite;
    animation-timing-function: cubic-bezier(.4, 0, .8, .95);
    animation-delay: 7s
}

.anim > .bus3 {
    width: 15%;
    right: -15%;
    top: 45%;
    animation: anim2 10s infinite;
    animation-timing-function: cubic-bezier(.4, 0, .8, .95);
    animation-delay: 3s
}

.anim > .front, .bus1, .bus2, .bus3 {
    position: absolute
}

.anim > .front {
    bottom: 0
}

@keyframes anim1 {
    0% {
        left: -10%
    }
    45%, 55% {
        left: 48%
    }
    100% {
        left: 130%
    }
}

@keyframes anim2 {
    0% {
        right: -10%
    }
    45%, 55% {
        right: 42%
    }
    100% {
        right: 130%
    }
}

#footer {
    background-color: #38536a;
    font-size: .72em;
    line-height: 2.15em
}

#footer .split {
    align-items: flex-start;
    padding: 3.12em 11.25em
}

#footer .footer-menu {
    margin: 0;
    padding: 0
}

#footer .social-links a {
    padding: 0 .4em
}

#footer .btn {
    font-size: inherit;
    padding: .7em 1.6em
}

#footer .policy {
    padding: 0 9.5em
}

#footer .policy div {
    border-top: 1px solid #83929f;
    color: #83929f;
    font-weight: 300;
    padding: 2em 0
}

#footer p {
    margin: 0 0 .6em;
    padding: 0
}

@media (max-width: 768px) {
    #footer {
        font-size: 1em
    }

    #footer .split {
        padding: 3em 5em
    }

    #footer .policy {
        padding: 0 3em
    }
}

@media (max-width: 640px) {
    #footer .quarter {
        margin-bottom: 2em;
        width: 50%
    }
}

body {
    padding-top: 5em
}

#main-navigation.navbar {
    background-color: #fbfbfb;
    border-bottom-color: #e8e8e8
}

#main-navigation .navbar-toggle {
    border: 0;
    float: left;
    margin-left: 1em
}

#main-navigation .navbar-toggle:not(.collapsed) .icon-bar {
    transform: rotate(45deg) translate(4px, 5px)
}

#main-navigation .navbar-toggle:not(.collapsed) .icon-bar + .icon-bar {
    transform: none;
    opacity: 0
}

#main-navigation .navbar-toggle:not(.collapsed) .icon-bar + .icon-bar + .icon-bar {
    transform: rotate(-45deg) translate(3.5px, -4.5px);
    opacity: 1
}

#main-navigation .navbar-toggle:focus, #main-navigation .navbar-toggle:hover {
    background-color: #e8e8e8
}

#main-navigation .navbar-toggle .icon-bar {
    transition: transform .2s, opacity .2s;
    background-color: #05c0ef
}

#main-navigation .navbar-toggle .icon-close {
    color: #05c0ef;
    font-size: 2em
}

#main-navigation .navbar-brand {
    height: 5em;
    padding: 1em;
    font-size: inherit;
    line-height: inherit
}

body, h5 {
    line-height: 1.4em
}

#main-navigation .navbar-collapse {
    background-color: #fbfbfb;
    border-top: 0;
    display: block;
    height: calc(100vh - 5em) !important;
    left: -100%;
    max-height: none;
    position: absolute
}

#main-navigation .navbar-collapse.in {
    left: 15px
}

#main-navigation .collapsing {
    left: 15px;
    -webkit-transition-property: left, visibility;
    -o-transition-property: left, visibility;
    transition-property: left, visibility
}

#main-navigation .nav {
    font-size: 1.5em
}

#main-navigation .nav li {
    border-left: 3px solid transparent;
    height: 100%
}

#main-navigation .nav li.active {
    border-color: #004ab8
}

#main-navigation .nav a {
    background: 0 0;
    color: #4f4f4f;
    font-weight: 300;
    height: 100%;
    padding: .5em 2em
}

#main-navigation .nav a span {
    margin: auto
}

#main-navigation .nav .active a, #main-navigation .nav a:active, #main-navigation .nav a:hover {
    color: #004ab8
}

#main-navigation .nav .menu-alt, #main-navigation .nav .menu-alt:active, #main-navigation .nav .menu-alt:hover {
    color: #004ab8;
    display: flex;
    font-size: .75em;
    font-weight: 400;
    text-transform: uppercase
}

#main-navigation .nav .btn {
    background-color: #05c0ef;
    color: #fbfbfb;
    font-size: .75em;
    font-weight: 400;
    height: auto;
    margin: 2em 2em .5em;
    padding: .5em 1.4em
}

#main-navigation .nav .btn:active, #main-navigation .nav .btn:hover {
    background-color: #06b8e4;
    color: #fbfbfb
}

@media (min-width: 768px) {
    #main-navigation .navbar-collapse {
        height: auto !important;
        position: static
    }

    #main-navigation .navbar-collapse .navbar-header {
        display: none
    }

    #main-navigation .nav {
        font-size: 1em;
        height: 5em
    }

    #main-navigation .nav li {
        border-bottom: 3px solid transparent;
        border-left: 0
    }

    #main-navigation .nav a {
        display: flex;
        padding: 0 2em
    }

    #main-navigation .nav .btn {
        margin: 1.5em 1.5em 0 0;
        padding: 1em 1.4em
    }
}

#page-loader {
    background-color: #4470bd;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99999
}

#page-loader .loader {
    animation: loader 2s infinite ease;
    -webkit-animation: loader 2s infinite ease;
    border: 4px solid #fff;
    display: inline-block;
    height: 30px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 30px
}

#page-loader .loader-inner {
    animation: loader-inner 2s infinite ease-in;
    -webkit-animation: loader-inner 2s infinite ease-in;
    background-color: #fff;
    display: inline-block;
    vertical-align: top;
    width: 100%
}

@keyframes loader {
    0% {
        transform: rotate(0);
        -webkit-transform: rotate(0)
    }
    25%, 50% {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg)
    }
    100%, 75% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg)
    }
}

@keyframes loader-inner {
    0%, 100%, 25% {
        height: 0%
    }
    50%, 75% {
        height: 100%
    }
}

@-webkit-keyframes loader {
    0% {
        transform: rotate(0);
        -webkit-transform: rotate(0)
    }
    25%, 50% {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg)
    }
    100%, 75% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg)
    }
}

@-webkit-keyframes loader-inner {
    0%, 100%, 25% {
        height: 0%
    }
    50%, 75% {
        height: 100%
    }
}

@-moz-keyframes loader {
    0% {
        transform: rotate(0);
        -webkit-transform: rotate(0)
    }
    25%, 50% {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg)
    }
    100%, 75% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes loader-inner {
    0%, 100%, 25% {
        height: 0%
    }
    50%, 75% {
        height: 100%
    }
}

body {
    background-color: #fbfbfb;
    color: #777;
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 400
}

h1 {
    color: #4f4f4f;
    font-size: 1.86em;
    font-weight: 500;
    margin-top: 3em;
    padding-bottom: 1.5em;
    padding-left: 1.5em;
    padding-right: 1.5em
}

.home h3, .legal h1, .team h1, h2 {
    font-size: 2.3em;
    font-weight: 600;
    margin: 0 .4em 1.4em;
    text-align: center
}

.cgv h1 span, .home h3 span, .legal h1 span, h2 span {
    border-bottom: 4px solid #004ab8;
    color: #38536a;
    display: inline-block;
    padding-bottom: .6em
}

.cgv h1, .team h1 {
    border-top: 0;
    margin: 0
}

.legal h1 {
    margin-top: 3em
}

h3, h6 {
    margin: 0 .6em 1em;
    text-align: center
}

.home .alt h3 span {
    border-bottom-color: #38536a;
    color: #fbfbfb
}

footer .policy p {
    color: #FBFBFB
}

footer .policy a {
    color: #00b834
    /*bas de page */
}

h3, h4 {
    color: #4f4f4f;
    font-weight: 600
}

h3 {
    font-size: 1.4em
}

h4 {
    font-size: 1.1em;
    margin: 1em .2em
}

h6, p.alt {
    color: #0053b8
    /*color: #004ab8*/
    /*titre page index 4 titre */
}

h5 {
    font-size: 1.2em;
    font-weight: 700;
    margin: 0 0 1em
}

blockquote b, h6 {
    font-weight: 600
}

h6 {
    font-size: 1.5em
}

img {
    max-width: 100%;
    max-height: 100%
}

section {
    border-top: 1px solid #e8e8e8;
    padding: 4em 3.2em 2.7em
}

section.alt {
    background-color: #004ab8;
    background: -moz-linear-gradient(left, #004ab8 0, #00894e 100%);
    background: -webkit-linear-gradient(left, #004ab8 0, #00894e 100%);
    background: linear-gradient(to right, #004ab8, #00894e);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004ab8', endColorstr='#00894e', GradientType=1)
}

section.more p {
    text-align: center
}

p {
    margin: 1.6em 0;
    text-align: justify
}

p.alt {
    font-size: .9em
}

blockquote {
    border: none;
    font-size: 1.55em;
    line-height: 1.35em;
    margin: 1.2em auto;
    max-width: 30em;
    position: relative
}

blockquote::after, blockquote::before {
    content: "";
    display: block;
    font-size: 5em;
    font-style: normal;
    height: 1em;
    position: absolute;
    opacity: .2;
    width: 1.3em
}

#home-news .author, blockquote footer {
    font-style: italic
}

.bullet, .illustration {
    position: relative
}

blockquote::before {
    background: url(../images/guillemets_gauche.png) no-repeat;
    background-size: contain;
    left: -50px;
    top: 5px
}

blockquote::after {
    bottom: 20px;
    background: url(../images/guillemet_droit.png) no-repeat;
    background-size: contain;
    right: -20px
}

blockquote div {
    color: #fbfbfb;
    margin: .6em
}

blockquote ul {
    padding: .3em 1.8em
}

blockquote footer {
    color: #38536a;
    text-align: right
}

.card, .center, .cgv .subtitle, .video-thumbnail {
    text-align: center
}

blockquote footer::before {
    display: none
}

.split {
    padding: 0 3em;
    width: 100%;
    display: flex;
    align-items: left;
    flex-wrap: wrap
}

.half {
    padding: 0 1.3em;
    flex: 1
}

.quarter {
    box-sizing: border-box;
    width: 25%
}

.bullet {
    padding-left: .9em
}

.bullet::before {
    color: #0059b8;
    content: '+';
    display: inline-block;
    font-size: .73em;
    font-weight: 500;
    left: 0;
    padding: .1em;
    position: absolute
}

.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 10px 0 #cfcfcf;
    margin: .9em .9em 1.8em;
    position: relative
}

.btn {
    background-color: #05c0ef;
    border-radius: 4px;
    color: #fbfbfb;
    font-size: 1.36em;
    font-weight: 400;
    margin: .33em 0 1.33em;
    padding: .73em 1.83em
}

.btn:active, .btn:hover {
    background-color: #06b8e4;
    color: #fbfbfb
}

.btn.alt, .video-link {
    color: #004ab8
}

.btn.alt {
    background-color: #fbfbfb
}

.btn.alt:active, .btn.alt:hover {
    background-color: #e8e8e8;
    color: #004ab8
}

.video-link i {
    font-size: 1.4em;
    vertical-align: middle;
    margin-right: .3em
}

.video-container {
    color: #4f4f4f
}

.video-thumbnail {
    margin-top: 10px
}

.video-thumbnail img {
    max-width: 50%
}

.popup-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
    display: none;
    z-index: 1050
}

.popup {
    height: 100%;
    display: flex
}

.popup iframe {
    margin: auto
}

.cgv .subtitle {
    color: #cecece;
    font-size: 1.5em;
    display: block
}

.cgv h2, .cgv h3 {
    text-align: left;
    margin-left: 0;
    margin-bottom: 1em
}

.cgv h2 {
    color: #38536a;
    font-size: 1.8em;
    margin-top: 2em
}

.cgv h3 {
    color: #4f4f4f;
    font-size: 1.5em;
    margin-top: 1.8em
}

.cgv li {
    margin-bottom: 10px
}

.circle-list-item {
    padding-left: 20px
}

.circle-list-item:before {
    content: "\2022";
    color: #004ab8;
    font-weight: 900;
    padding-right: 10px
}

.dash-list-item {
    padding-left: 40px
}

.dash-list-item:before {
    content: "- ";
    padding-right: 10px
}

#main-navigation .navbar-collapse {
    top: inherit
}

#main-navigation .head-navbar {
    background-color: #38536a;
    text-align: right;
    padding: .5em 0
}

#main-navigation .head-navbar a {
    color: #FBFBFB;
    margin-right: 2em;
    text-decoration: none;
    font-size: 15px
}

#main-navigation .head-navbar a:hover {
    color: #05C0EF
}

#main-navigation .head-navbar .fa-lock {
    margin-left: .6em
}

#main-navigation .head-navbar .btn-contact:hover {
    color: #fbfbfb;
    background: #06b8e4
}

#main-navigation .nav .btn-contact {
    border-radius: .2em;
    margin-top: 2.1em;
    padding: .4em 1.83em .3em
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top
}

.navbar .navbar-collapse {
    text-align: right
}

#home-news, #home-news .read-all, #home-reviews {
    text-align: center
}

.navbar-brand {
    position: absolute
}

.home {
    padding-top: 4.5em
}

#home-quality h5 {
    margin-bottom: 0
}

#home-quality p {
    margin-top: .4em
}

#home-news .content-col, #home-quality .content-col {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
}

#home-quality .content-img {
    height: 5em;
    text-align: center;
    margin-bottom: 1.3em;
    margin-top: .8em
}

#home-news .col, #home-quality .col {
    box-shadow: 3px 1px 5px #e6e6e6, -1px 0 5px #e6e6e6;
    border: 1px solid #e6e6e6;
    margin-bottom: 2.5em;
    width: 47%;
    min-width: 30em;
    padding: 1em
}

#home-quality .content-details-col {
    display: flex;
    justify-content: space-between
}

#home-quality .details-col {
    width: 48%
}

#home-quality p {
    text-align: left
}

#home-news .col {
    padding: 0
}

#home-news .new-img {
    height: 15em;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top
}

#home-news .author, #home-news .text, #home-news .title {
    padding: 0 1.5em;
    margin-bottom: 1em
}

#home-news .read-all a {
    color: #05c0ef;
    font-size: 1.3em
}

#home-news h5 {
    text-align: left
}

#home-main-cover {
    padding-left: 0;
    padding-right: 0;
    padding-top: 3em;
    position: relative
}

#home-main-cover .relative {
    overflow: hidden;
    padding-bottom: 30px;
    position: relative
}

#home-main-cover .cover {
    height: auto;
    left: 50%;
    max-height: none;
    max-width: none;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 100%;
    transform: translate(-50%, -100%);
    width: auto;
    z-index: -1
}

#home-main-cover .half {
    display: block;
    flex: none;
    width: 50%
}

#home-main-cover .half ~ .half {
    padding: 1em 0 0
}

#home-main-cover h1, #home-main-cover h2 {
    border: none;
    color: #fbfbfb;
    margin: 0 0 1.2em;
    padding: 0;
    text-align: left
}

#home-main-cover h1 {
    font-weight: 700;
    font-size: 2.8em;
    line-height: 1.1em;
    margin: 1.8em 0
}

#home-main-cover h2 {
    font-size: 1.8em;
    font-weight: 400;
    line-height: 1.1em
}

#home-main-cover .btn {
    margin-bottom: 3em
}

#home-reviews .content-review {
    z-index: 1000;
    position: relative;
    color: #fbfbfb;
    margin: 2em auto;
    background-color: #38536a;
    font-style: italic;
    height: 12em;
    width: 80%
}

#home-reviews .item {
    height: 25em
}

#home-reviews .author {
    position: absolute;
    display: flex;
    bottom: -9em;
    left: 3.5em
}

#home-reviews .photo {
    background-repeat: no-repeat;
    background-size: cover;
    height: 6em;
    width: 6em;
    border-radius: 5em
}

#home-reviews .text {
    font-style: normal;
    text-align: left;
    padding-top: .8em;
    margin-left: 1.2em;
    color: #38536a
}

#home-reviews .review-text {
    padding: 2em 7em;
    height: 100%
}

#home-reviews .review-text-title {
    color: #004ab8
}

#home-reviews .review-text-author {
    text-align: right
}

#contact p, .home-product .quarter p {
    text-align: center
}

#home-reviews .bubble {
    position: absolute;
    height: 3em;
    width: 3em;
    background: #38536a;
    bottom: -1.3em;
    left: 5em;
    transform: rotate(45deg);
    z-index: -1
}

#home-reviews .quote-left, #home-reviews .quote-right {
    height: 10em;
    width: 10em;
    background-size: contain;
    z-index: -1;
    position: absolute;
    background-repeat: no-repeat
}

#home-reviews .quote-left {
    background-image: url(../images/reviews_guillemets_gauche.svg);
    top: 3em;
    left: 3em
}

#home-reviews .quote-right {
    background-image: url(../images/reviews_guillemets_droite.svg);
    bottom: 2em;
    right: 3em
}

#home-reviews .carousel {
    width: 100%;
    margin: 0 auto
}

.home-product .split {
    align-items: flex-start
}

#home-shema {
    border: none
}

.home-product .quarter {
    color: #fbfbfb;
    padding: 1.1em;
    text-align: center
}

.home-product .quarter img {
    max-width: 7.8em
}

.home-product .quarter a {
    color: #38536a
}

.references div {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-right: 8em
}

.references .right {
    padding-left: 8em;
    padding-right: 0
}

.references img {
    margin: 1.5em 0;
    max-height: 3.2em
}

#contact {
    color: #4f4f4f
}

.product-link, .product-link:hover {
    color: #05c0ef
}

#contact p {
    font-size: 1.4em;
    margin: 3em 0 1.6em
}

#animation {
    border-top: 1px solid #e8e8e8;
    margin-bottom: 20px;
    padding: 2em 0
}

#animation .center {
    margin: auto;
    max-width: 77em;
    padding: 0 5em
}

#animation span {
    display: inline-block;
    font-size: .8em;
    margin-top: 2em
}

section.more {
    border: 1px solid #e8e8e8;
    width: 80%;
    background-color: #F6F6F6;
    margin: 2em auto
}

section.more h3 {
    font-weight: 400;
    margin: 0 6.5em 1.6em
}

.product-gif-left {
    max-height: 100%;
    position: absolute;
    top: 5%;
    left: 10%;
    width: 80%;
    max-width: 600px
}

.product-link {
    margin-left: 1em
}

.faq {
    margin-bottom: 6em
}

.faq h2 {
    margin-top: 1.8em
}

.price-card {
    border-top: 10px solid #004ab8;
    margin: auto
}

.price-card .price {
    padding-top: 3em;
    padding-bottom: 1em;
    position: relative
}

.price-ammount {
    color: #4f4f4f;
    font-size: 3.2em;
    font-weight: 700
}

.price-ammount sup {
    font-size: .6em;
    font-weight: 400;
    padding-left: .3em
}

.price .price-by {
    top: 3.5em;
    font-size: .9em;
    padding-left: .5em;
    position: absolute
}

.price-card > span {
    color: #4f4f4f;
    display: inline-block;
    margin-bottom: 1em
}

.price-card .btn {
    padding: .6em .73em;
    margin-left: 2em;
    margin-right: 2em
}

.faq, .legal {
    padding: 0 7em
}

.faq .question {
    color: #777;
    font-weight: 600
}

.faq p {
    margin-top: 0
}

.faq a {
    color: #004ab8;
    display: block
}

#client-article .article {
    background: #fbfbfb;
    position: relative;
    border: 1px solid #e6e6e6;
    box-shadow: 3px 1px 5px #e6e6e6, -1px 0 5px #e6e6e6;
    width: 45%;
    height: 22em
}

#client-article .article-link {
    font-weight: 700;
    color: #06b8e4;
    text-align: right;
    text-decoration: underline
}

#client-article .article-logo {
    background: center no-repeat #FBFBFB;
    background-size: 4em;
    margin: -2.5em auto;
    height: 5em;
    width: 5em;
    border-radius: 5em;
    border: 1px solid #e6e6e6
}

#client-article .article-text {
    text-align: justify;
    margin: 0;
    padding: 3em 1em 1em
}

.appli-contact, .appli-contact p {
    text-align: center
}

#client-article .article-text > p {
    margin: 0
}

#client-article .article-title {
    color: #38536a;
    margin-bottom: 1em !important
}

#client-article .article-sub {
    font-weight: 700;
    color: #004ab8;
    margin-bottom: .5em !important
}

#client-article .bubble {
    position: absolute;
    background: #fbfbfb;
    height: 3em;
    width: 3em;
    border-right: solid 1px #e6e6e6;
    border-bottom: solid 1px #e6e6e6;
    box-shadow: 3px 2px 2px #e6e6e6;
    transform: rotate(45deg);
    bottom: -1.5em;
    left: 5em
}

#client-article .carousel-article-small {
    display: none
}

#client-article .carousel-inner {
    height: 100%
}

#client-article .content-articles {
    height: 20em;
    width: 85%;
    margin: 3em auto;
    display: flex;
    justify-content: space-around
}

#client-article .photo-author {
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: -.5em;
    height: 5em;
    width: 5em;
    border-radius: 5em;
    bottom: -8em;
    left: 3.9em
}

#about .statistical .picto, .client-logo-item {
    background-repeat: no-repeat;
    background-position: center
}

.client-logo {
    background-color: #f7f7f7;
    margin-bottom: 0;
    padding-top: 1em
}

.client-logo-content {
    display: flex;
    flex-direction: column;
    height: 150px;
    padding-left: 1em;
    padding-right: 1em;
    margin-bottom: 3em
}

.client-logo-end {
    justify-content: flex-end;
    margin-top: 1.2em
}

.client-logo-item {
    height: 100%;
    width: 23%;
    background-size: 60%
}

.client-logo-soretras {
    background-image: url(../images/Logos_couleur/soretras.png.png);
    width: 18%
}

.client-logo-carpostal {
    background-image: url(../images/Logos_couleur/Bizerte.png);
    width: 28%
}

.client-logo-groussin {
    background-image: url(../images/Logos_couleur/Bizerte.png)
}

.client-logo-srtm {
    width: 32%;
    background-image: url(../images/Logos_couleur/srtm.png)
}

.client-logo-srtb {
    background-image: url(../images/Logos_couleur/Bizerte.png)
}

.client-logo-philibert {
    background-image: url(../images/Logos_couleur/Bizerte.png)
}

.client-logo-ratpdev {
    background-image: url(../images/Logos_couleur/Bizerte.png)
}

.client-logo-SRTK {
    background-image: url(../images/Logos_couleur/Bizerte.png)
}

.client-logo-position {
    display: flex;
    height: 50%;
    width: 100%
}

.carousel {
    height: 31em;
    margin-top: 20px;
    margin-bottom: 20px
}

.carousel-control.left, .carousel-control.right {
    background-image: none;
    width: 50px
}

.carousel-control-icon {
    font-size: 4em;
    text-shadow: none;
    color: #cacaca;
    position: absolute;
    top: 40%;
    transform: translateY(-50%)
}

.appli-contact p, .appli-info .split {
    color: #4f4f4f;
    font-size: 1.4em;
    font-weight: 500;
    line-height: 1.3em
}

.carousel-icon-left {
    left: 0
}

.appli-info p {
    margin-bottom: .7em
}

.appli-info .links a {
    margin: 0 .3em
}

.appli-info img {
    max-height: 31em
}

.appli-contact p {
    margin: .2em
}

.appli-contact .alt {
    color: #004ab8;
    004ab8
    font-size: 1.2em;
    margin-top: 2em
}

#about .statistical {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 4em 0 2em
}

#about .border-left {
    border-left: 1px solid #d8d8d8
}

#about .statistical .col {
    display: flex;
    width: 50%;
    min-width: 20em;
    justify-content: center;
    padding-top: 1em
}

#about .statistical .details {
    margin: 0 2em;
    color: #2f4759
}

#about .statistical .number {
    font-weight: 700;
    font-size: 3em
}

#about .statistical .text-secondary {
    font-weight: lighter
}

#about .statistical .picto {
    height: 5em;
    min-width: 5em
}

#about .statistical .vehicle-picto {
    background-image: url(../images/bus.svg)
}

#about .statistical .loyalty-picto {
    background-image: url(../images/loyalty.svg)
}

#about .undertaking .content-col {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
}

#about .undertaking .col {
    box-shadow: 3px 1px 5px #e6e6e6, -1px 0 5px #e6e6e6;
    border: 1px solid #e6e6e6;
    margin-bottom: 3em;
    width: 47%;
    padding: 1em;
    min-width: 30em
}

#about .undertaking .col-green {
    margin-bottom: 3em;
    width: 47%;
    padding: 2em 1em 1em;
    min-width: 30em;
    color: #004ab8;
    font-style: italic
}

#about .undertaking .col-green .author {
    text-align: right;
    color: #777
}

#about .undertaking .col-green .title {
    color: #777;
    font-weight: 700;
    font-style: normal
}

#about .undertaking hr {
    margin: 0;
    width: 10%;
    height: .2em;
    background-color: #004ab8
}

#about .undertaking .width__responsive p {
    margin-bottom: 3em
}

#about .team {
    text-align: center
}

#about .team .card {
    padding-bottom: 2.7em;
    width: 10%;
    min-width: 18em
}

#about .team .card img {
    border-radius: 4em;
    margin: .7em;
    width: 8em
}

#about .team .card p {
    margin: 0 1.3em
}

#about .card .name {
    color: #003db8;
    font-weight: 600;
    text-align: center
}

#about .card .role {
    color: #4f4f4f;
    font-weight: 600;
    text-align: center
}

#about .card .desc {
    color: #4f4f4f;
    font-size: .7em;
    line-height: 1.5em;
    padding-top: 1.3em
}

#about .card .link {
    bottom: 0;
    font-size: .9em;
    margin: .5em;
    position: absolute;
    right: 0;
    text-align: right
}

#about .card .link a {
    background-color: #e8e8e8;
    border-radius: 3px;
    color: #fff;
    padding: 0 .3em
}

#about .card .link a:active, #about .card .link a:hover {
    background-color: #777
}

.legal p {
    margin: .4em
}

.legal b {
    color: #4f4f4f
}

.width__responsive {
    width: 60%;
    margin: 0 auto
}

.contact-form-section {
    background-color: #004ab8;
    text-align: center
}

@media (max-width: 1440px) {
    body {
        font-size: 14px
    }

    #main-navigation .head-navbar a {
        font-size: 12px
    }
}

@media (max-width: 1097px) {
    body {
        font-size: 12px
    }

    #main-navigation .head-navbar a {
        font-size: 10px
    }

    @media (max-width: 943px) {
        body {
            font-size: 10px
        }

        .video-thumbnail img {
            max-width: 80%
        }
    }@media (max-width: 768px) {
    #home-reviews .review-text {
        padding: 1em 2em
    }

    #about .undertaking .col, #about .undertaking .col-green, #home-news .col, #home-quality .col {
        width: inherit;
        min-width: inherit
    }

    #main-navigation .navbar-collapse {
        text-align: left
    }

    .width__responsive {
        width: 100%
    }

    .client-logo-item {
        background-size: 100%
    }

    #client-article .carousel-article-large {
        display: none
    }

    #client-article .carousel-article-small {
        display: inherit
    }

    #client-article .article-small {
        box-shadow: none;
        width: 90%;
        border: 1px solid #e6e6e6
    }
}@media (max-width: 640px) {
    .split {
        padding: 0
    }

    .half {
        flex: none;
        order: 2;
        width: 100%
    }

    .half.illustration {
        margin: 1em auto;
        order: 1;
        width: 60%
    }

    #home-main-cover .split {
        align-items: flex-start
    }

    .home-product .quarter {
        align-items: center;
        display: flex;
        width: 100%
    }

    .home-product .home-product-info {
        flex: 1;
        text-align: left
    }

    .home-product .home-product-info p {
        text-align: left
    }

    .home-product img {
        margin-right: 25px
    }

    .references div {
        padding-right: 2em
    }

    .references .right {
        padding-left: 2em;
        padding-right: 0
    }

    section.more h3 {
        margin: 0 2em 1.6em
    }

    section.more {
        width: 100%
    }

    .faq, .legal {
        padding: 0 3em
    }

    .appli-info .links img {
        margin-bottom: .5em
    }

    .team .card {
        width: 40%
    }
}@media (max-width: 610px) {
    #home-main-cover .half {
        width: 100%
    }

    #home-main-cover .half ~ .half {
        margin: auto;
        width: 80%
    }
}
}