:root{
    --blue-gradient: linear-gradient(135deg,#08308B,#005C97);
    --img-gradient: linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0));
    --blue-form: #E5F3FD;
    --main-blue: #025094;
    --placeholder-blue: #578EB2;
    --main-orange: #FF935A;
    --main-text-color: #707070;
    --grey-f7: #F7F7F7;
    --grey-4d: #4D4D4D;
}

body{
    font-family: 'Lato', sans-serif;
    color: var(--main-text-color);
}
.skewed{
    -webkit-transform: skewY(-4deg);
    -moz-transform: skewY(-4deg);
    -ms-transform: skewY(-4deg);
    -o-transform: skewY(-4deg);
    transform: skewY(-4deg);
}
.backskewed{
    -webkit-transform: skewY(4deg);
    -moz-transform: skewY(4deg);
    -ms-transform: skewY(4deg);
    -o-transform: skewY(4deg);
    transform: skewY(4deg);
}
.bg-bluegradient{
    background: var(--blue-gradient);
}

.welcome.skewed{
    padding-top: 100px;
    margin-top: -100px;
}

.welcome ::placeholder {
    color: var(--placeholder-blue);
}

.welcome .form-control{
    background: var(--blue-form);
}

.radius5{
    border-radius: 5px;
}

h2{
    font-size: 25px;
}

.font-40{
    font-size: 40px;
}

.font-20{
    font-size: 20px;
}

.font-26{
    font-size: 26px;
}

.font-14{
    font-size: 14px;
}

.text-mblue{
    color: var(--main-blue);
}

.bg-f7{
    background: var(--grey-f7);
}

.py-empty{
    padding-top: 100px;
    padding-bottom: 100px ;
}

h3{
    font-size: 20px;
    color: var(--grey-4d);
}

.text-morange{
    color: var(--main-orange);
}

.align-last-center{
    text-align-last: center;
}

.btn-orange{
    background: var(--main-orange);
    border-color: var(--main-orange);
}

.hard-rounded{
    border-radius: 20px;
}

.big-rounded{
    border-radius: 10px;
}

.logo{
    height: 80px;
}

.icon-holder{
    background: var(--blue-form);
    width: 80px;
    height: 80px;
    border-radius: 100%;
    color: var(--main-blue);
}

.mb-30{
    margin-bottom: 30px;
}

.certification{
    max-width: 150px;
    max-height: 40px;
}

.bg-cover{
    background-size: cover;
    background-position: center;
}

.empty{
    background-attachment: fixed;
}

.empty.paris{    background-image: url(../assets/img/bg-paris.jpg);
}
.empty.rennes{    background-image: url(../assets/img/bg-rennes.jpg);
}

.bordered{
    border: 1px solid var(--main-blue);
}

.bordered .icon-holder{
    margin-top: -40px;
}

.bordered .lead{
    font-size: 22px;
}

.lh-1{
    line-height: 1;
}

.lh-13{
    line-height: 1.3;
}

.tool-card{
    height: 100%;
}

.tool-card img{
    height: 20px;
}

a:hover{
    text-decoration: none;
}

.products a{
    color: var(--main-text-color);
}

.txt-holder{
    background: var(--img-gradient);
}

.expertise{
    height: 190px;
}

.expertise.search{
    background-image: url(../assets/img/Search-Shopping-square.jpg);
}

.expertise.display{
    background-image: url(../assets/img/Display-RTB-square.jpg);
}

.expertise.social{
    background-image: url(../assets/img/Social-Ads-square.jpg);
}

.expertise.lead{
    background-image: url(../assets/img/Leads-square.jpg);
}

.expertise.seo{
    background-image: url(../assets/img/Seo-square.jpg);
}

.reference{
    height: 160px;
}

.reference img{
    max-height: 100%;
    max-width: 80%;
}

.step{
    flex: 1 1 0;
    border-left: 20px solid var(--main-blue);
}

.step:before, .step:after{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    position: absolute;
    left: -20px;
}

.step:before{
    border-color:  #ffffff transparent transparent transparent;
}

.step:after{
    border-color: var(--main-blue) transparent transparent transparent;
    bottom: -10px;
}

q{
    quotes: "«" "»";
}

.font-12{
    font-size: 12px;
}

@media screen and (min-width: 768px ){
    .tool-card, .expertise{
        width: 196px;
    }
    .expertise{
        height: 240px;
    }
    .tool-card{
        height: 150px;
    }
    .step{
        border-left: 0;
        border-top: 20px solid var(--main-blue);
    }
    .step:before, .step:after{
        border-width: 10px 0 10px 10px;
        top: -20px;
    }
    .step:before{
        border-color: transparent transparent transparent #ffffff;
        left: 0;
    }
    .step:after{
        border-color: transparent transparent transparent var(--main-blue);
        left: initial;
        bottom: initial;
        right: -10px;
    }
}