:root {
    --color-black: #000000;
    --color-black-transparency: rgba(0, 0, 0, .8);
    --color-black-transparency-light: rgba(0, 0, 0, .4);
    --color-danger: #FF0000;
    --color-grey: #f1f1f1;
    --color-grey-dark: #6e777d;
    --color-grey-light: #999999;
    --color-primary: #f19007;
    --color-secondary: #333333;
    --color-secondary-light: #666666;
    --color-white: #FFFFFF;
    --color-white-transparency: rgba(255, 255, 255, .8);
}

@font-face {
    font-family: 'Microgramma';
    src: url("../fonts/microgramma-ckz1zBZ.woff") format('woff');
}

@font-face {
    font-family: 'Microgramma Bold';
    src: url("../fonts/microgramma-bold-0MlPBTI.woff") format('woff');
}

html {
    margin-top: 0 !important;
}

body {
    background: var(--color-white);
    color: var(--color-secondary);
    font-family: "Microgramma";
    font-size: 1.1rem;
}

body a {
    color: var(--color-secondary);
}

.alert.alert-info {
    background-color: var(--color-grey);
    color: var(--color-black);
    border-color: var(--color-grey-light);
}

.btn {
    border-radius: 0;
    display: block;
    margin-bottom: 1rem;
}

.btn.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    font-size: 1.1rem;
    padding: 1.1rem;
    font-family: "Microgramma Bold";
    white-space: nowrap;
}

.btn.btn-primary:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    transition: all .5s;
}

.btn.btn-primary em {
    margin-left: .5rem;
    position: relative;
    top: 3px;
}

.btn.btn-default {
    background: var(--color-white);
    border-color: var(--color-black);
    font-size: 1.1rem;
    padding: 1.1rem;
}

.btn.btn-default:hover {
    background: var(--color-grey);
    color: var(--color-black);
    transition: all .5s;
}

.btn.btn-default em {
    margin-left: .5rem;
    position: relative;
    top: 3px;
}

header {
    border-bottom: solid 1px var(--color-grey);
    color: white;
    width: 100%;
    z-index: 1000;
    height: 130px;
    padding-top: 1rem;
    box-shadow: 1px 2px 20px 0 #666666;
    position: relative;
}

.home header {
    box-shadow: none;
}

header li a {
    padding: 0 2rem !important;
}

header li.active a {
    color: var(--color-primary) !important;
}

header .navbar {
    padding: 0;
}

header .navbar-toggler {
    border-radius: 0;
    border-color: var(--color-grey-dark);
    position: relative;
    top: 16px;
    padding: 0.5rem 1rem;
}

header .navbar-toggler-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}


header .navbar-toggler em {
    font-size: 2rem;
    color: var(--color-black);
}

header .navbar-nav {
    position: relative;
    top: 7rem;
}

header .other-links {
    margin-left: auto;
    display: none;
}

header .other-links a {
    border-left: solid 1px var(--color-grey);
    display: block;
    float: left;
    padding: 60px 2rem;
    text-decoration: none;
}

.page-home header .other-links a {
    border-left-color: var(--color-white);
}

header .other-links a.contact {
    color: var(--color-primary) !important;
}

header .navbar-brand {
    text-indent: -1000px;
    background-image: url("../img/logos/logo-CAQRqCk.png");
    background-size: cover;
    width: 270px;
    height: 80px;
}

header .navbar-collapse {
    border-left: solid 1px var(--color-grey);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-white);
}

header .navbar-collapse a {
    color: var(--color-black) !important;
    font-size: 2rem;
    margin-bottom: 2rem;
}

body.home header {
    position: absolute;
    background: #FFFFFF;
}

body.home header li.active a {
    color: var(--color-primary) !important;
}

body.home header a:hover {
    color: var(--color-primary) !important;
    transition: all .5s;
}


footer {
    background: var(--color-black);
    color: var(--color-grey-dark);
    padding: 5rem 0 0 0;
}

footer .brand {
    background-image: url("../img/logos/logo-white-0bCX3xh.png");
    background-size: cover;
    width: 300px;
    height: 100px;
    text-indent: -1000px;
    display: block;
}

footer .facebook em {
    color: var(--color-white);
    font-size: 2rem;
}

footer .title {
    color: var(--color-white);
    font-weight: bold;
    margin-bottom: 1rem;
}

footer a {
    color: var(--color-grey-dark);
    text-decoration: none;
    font-size: 1rem;
}

footer a:hover {
    color: var(--color-primary);
    transition: all .5s;
}

footer .footer-section {
    margin-bottom: 2rem;
}

footer ul,
footer li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

footer em {
    color: var(--color-primary);
    margin-right: .5rem;
}

footer .contact {
    color: var(--color-primary);
    margin-top: 2rem;
}

footer .copyright {
    border-top: solid 1px var(--color-white);
    margin-top: 4rem;
    padding: 1rem 0;
}


.jumbotron {
    background-color: var(--color-grey);
    padding: 4rem;
    text-align: center;
    margin-bottom: 2rem;
    background-position: center;
    background-size: cover;
    height: 170px;
    position: relative;
}

.jumbotron:before {
    position: absolute;
    background: var(--color-white-transparency);
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.jumbotron h1 {
    position: absolute;
    left: 0;
    width: 100%;
}

.page-template-page-contact .jumbotron {
    background-image: url("../img/contact/jumbotron-LsS-pP7.webp");
}

.tax-heading .jumbotron {
    background-image: url("../img/achievement/jumbotron-LsS-pP7.webp");
}

.post-type-archive .jumbotron {
    background-image: url("../img/achievement/jumbotron-LsS-pP7.webp");
}

.page-template-page-about .jumbotron {
    background-image: url("../img/achievement/jumbotron-LsS-pP7.webp");
}

section h1 {
    margin-bottom: 4rem;
}

section h2 {
    font-size: 1rem;
}

div.section-jumbotron {
    background: var(--color-black-transparency);
    color: var(--color-white);
    padding: calc(4rem + 90px) 0 2rem 0;
    position: relative;
    top: 0;
    font-size: 3rem;
}

div.section-jumbotron:before {
    background-image: url("../img/home/jumbotron-Ex2yBxA.webp");
    background-position: bottom right;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

div.section-jumbotron .title-1 {
    color: var(--color-primary);
    font-family: "Microgramma Bold";
    font-size: 4rem;
    height: 70px;
}

div.section-jumbotron .title-2 {
    font-family: "Microgramma Bold";
    font-size: 1.7rem;
}

div.section-jumbotron .subtitle {
    font-size: 1.1rem;
}


div.section-jumbotron .actions {
    margin-top: 5rem;
}

div.section-services {
    background: var(--color-white);
    padding: 2rem 0 0 0;
}

div.section-services h1 {
    margin-bottom: 5rem;
}

div.section-services h2 {
    font-size: 1.4rem;
    margin-bottom: 4rem;
}

div.section-services .icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1rem auto;
    background-size: cover;
}

div.section-services .icon.icon-chape {
    background-image: url("../img/home/icon-chape-PXCgAV7.png");
}

div.section-services .icon.icon-maconnerie {
    background-image: url("../img/home/icon-maconnerie-pqt7oPF.png");
}

div.section-services .icon.icon-pose {
    background-image: url("../img/home/icon-pose-6qlT7Kd.png");
}

div.section-services .icon.icon-terrassement {
    background-image: url("../img/home/icon-terrassement-aKFGNjr.png");
}

div.section-services-2 {
    background: var(--color-grey);
    padding: 2rem 0;
}

div.section-services-2 h1 {
    margin-bottom: 2rem;
}

div.section-services-2 h2 {
    font-size: 1.4rem !important;
    margin-bottom: 4rem;
    color: var(--color-black) !important;
    font-family: "Microgramma Bold";
}

div.section-services-2 .icon {
    width: 70px;
    height: 70px;
    margin: 0 0 2rem 0;
    background-size: cover;
}

div.section-services-2 .card {
    margin-bottom: 2rem;
}

div.section-services-2 .icon.icon-chape {
    background-image: url("../img/about/icon-chape-PXCgAV7.png");
}

div.section-services-2 .icon.icon-maconnerie {
    background-image: url("../img/about/icon-maconnerie-pqt7oPF.png");
}

div.section-services-2 .icon.icon-exterieur {
    background-image: url("../img/about/icon-exterieur-um9Km1p.png");
}

div.section-services-2 .icon.icon-terrassement {
    background-image: url("../img/about/icon-terrassement-aKFGNjr.png");
}

div.section-about {
    padding: 2rem 0;
    color: var(--color-grey-dark);
}

div.section-about p {
    margin-bottom: 1rem;
}

div.section-about h1 {
    margin-bottom: 2rem;
    color: var(--color-black);
}

div.section-about .picture {
    background-image: url("../img/home/about-PRkEket.webp");
    width: 100%;
    height: 390px;
    background-size: cover;
    margin-bottom: 4rem;
    background-position: center;
}

div.section-about .picture-1 {
    background-image: url("../img/about/about-1-750eo_v.webp");
    width: 250px;
    height: 250px;
    background-size: cover;
    position: absolute;
    right: 4rem;
    top: 2rem;
    z-index: 1;
    border: solid 10px var(--color-white);
    display: none;
}

div.section-about .picture-2 {
    background-image: url("../img/about/about-2-SaRAr43.webp");
    width: calc(100% - .2rem);
    height: 510px;
    background-size: cover;
    margin: 4rem auto;
}

div.section-about .avatar {
    background-image: url("../img/home/avatar-lqHRC5Y.webp");
    width: 63px;
    height: 63px;
    background-size: cover;
}

div.section-about .name {
    font-family: "Microgramma Bold";
    color: var(--color-black);
}

div.section-achievements {
    padding: 2rem 0;
    color: var(--color-grey-dark);
}

body.home div.section-achievements {
    background: var(--color-grey);
}

div.section-achievements h1 {
    color: var(--color-black);
    margin-bottom: 2rem;
}

div.section-achievements a {
    text-decoration: none;
}

div.section-achievements .menu a.active {
    color: var(--color-primary);
    font-family: "Microgramma Bold";
}

div.section-achievements .card {
    border-radius: 0;
    background: none;
    border-color: transparent;
}

div.section-achievements a:hover .card {
    border-color: var(--color-primary);
    transition: all .5s;
}

div.section-achievements img {
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
}

div.section-achievements .card-date {
    margin-bottom: 1rem;
    color: var(--color-grey-dark);
    font-size: 1.1rem;
}

div.section-achievements .card-title {
    color: var(--color-black) !important;
    font-size: 1.3rem;
}


div.section-achievements-2 {
    padding: 2rem 0;
    color: var(--color-grey-dark);
    position: relative;
}

div.section-achievements-2 h1 {
    color: var(--color-black);
    margin-bottom: 2rem;
}

div.section-achievements-2 .card {
    border: none;
}

div.section-achievements-2 .card .card-body {
    padding: 0;
}

div.section-achievements-2 .card .card-body img {
    width: 100%;
}

div.section-achievements-2 .card .card-body .infos-container {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-black-transparency-light);
    transition: opacity .5s;
}

div.section-achievements-2 .card .card-body .infos-container .infos {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 1rem;
}

div.section-achievements-2 .card .card-body .infos-container .card-date {
    color: var(--color-white);
}

div.section-achievements-2 .card .card-body .infos-container .card-title {
    color: var(--color-white);
}

div.section-achievements-2 .card .card-body:hover .infos-container {
    opacity: 1;
}

div.section-questions {
    background-image: url("../img/footer/footer-H6s7GmF.webp");
    color: var(--color-white);
    font-size: 2rem;
    padding: 5rem 0;
    position: relative;
}

div.section-questions .btn {
    margin-top: 2rem;
}

div.section-questions:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-black-transparency);
}

div.section-questions .container {
    position: relative;
}

div.section-achievements .menu {
    text-align: center;
}

div.section-achievements .menu a {
    color: var(--color-secondary-light);
    margin-right: 1rem;
    text-decoration: none;
}

div.section-achievements .menu a:hover {
    color: var(--color-primary);
}

div.section-achievements .card-achievement .card-title {
    color: var(--color-secondary-light);
}

div.section-achievements .card-achievement .card-date {
    color: var(--color-secondary-light);
}

div.section-content h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

div.section-content ul {
    padding: 2rem;
    border: solid 1px var(--color-grey);
}

div.section-contact {
    margin-bottom: 4rem;
}

div.section-contact .avatar {
    background-image: url("../img/contact/avatar-v7rQWbc.webp");
    width: 63px;
    height: 63px;
    background-size: cover;
}

div.section-contact .infos-element {
    margin-bottom: 2rem;
}

div.section-contact h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

div.section-contact hr {
    margin: 2rem 0;
}

div.section-contact .infos-element-email {
    margin-bottom: 0;
}

div.section-contact .infos-element-address {
    margin-bottom: 0;
}

div.section-contact .infos-element-address .address-2 {
    margin-left: 1rem;
}

div.section-contact input[type=text],
div.section-contact textarea {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--color-grey);
    border: var(--bs-border-width) solid var(--bs-border-color);
    margin-bottom: 1rem;
}

div.section-contact span {
    display: block;
}

div.section-contact br {
    display: none;
}

div.section-contact input[type=submit] {
    background-color: var(--color-primary);
    border: solid 1px var(--color-primary);
    color: var(--color-white);
    float: right;
    padding: .5rem 1rem;
}

div.section-contact input[type=submit]:hover {
    background-color: var(--color-secondary);
    border: solid 1px var(--color-secondary);
    transition: all .5s;
}

div.section-contact .screen-reader-response {
    display: none;
}

div.section-contact .wpcf7-not-valid-tip {
    color: var(--color-danger);
    position: relative;
    top: -15px;
    font-size: .8rem;
}

div.section-contact .wpcf7-response-output {
    color: var(--color-primary);
    width: 60%;
    font-size: .8rem;
}

div.section-contact .card.card-contact {
    border: none;
}

div.section-contact .card.card-contact .card-body {
    padding-left: 0;
    padding-right: 0;
}

div.section-contact .card.card-contact .card-body a {
    color: var(--color-grey-dark);
    text-decoration: none;
    font-size: 1rem;
}

div.section-contact .card.card-contact .card-body .address {
    color: var(--color-grey-dark);
    font-size: 1rem;
}

div.section-contact .card.card-contact .social em {
    font-size: 2rem;
    position: relative;
    top: -5px;
}

div.section-contact .card.card-contact .social i:hover {
    color: var(--color-secondary);
    transition: all .5s;
}

div.section-contact .card.card-contact-form {
    border: none;
}

div.section-contact .card.card-contact-form .card-body {
    padding: 0;
}

.card .card-title {
    color: var(--color-primary);
    font-size: 1rem;
}

.card .card-subtitle {
    font-size: 1.4rem;
    margin-bottom: 2rem;
}

.modal.modal-achievement .preview {
    height: 541px;
    background-color: var(--color-grey);
    background-size: cover;
    margin-bottom: 2rem;
    display: none;
}

.modal.modal-achievement .thumbnail {
    cursor: pointer;
    border: solid 5px transparent;
    width: 100%;
    height: auto;
}

.modal.modal-achievement .thumbnail:hover {
    opacity: 1;
    transition: opacity .5s;
}

.modal.modal-achievement .card {
    box-shadow: 1px 5px 10px 0 var(--color-grey-light);
    margin-bottom: 2rem;
}

.modal.modal-achievement .card .card-body {
    min-height: 400px;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}

.modal.modal-achievement .informations .title {
    color: var(--color-grey-dark);
    font-size: 1rem;
}

.modal.modal-achievement .informations .value {
    color: var(--color-black);
    font-size: 1.2rem;
    font-family: "Microgramma Bold";
}

.modal.modal-achievement .informations .value span:after {
    content: '-';
    margin: 0 .5rem;
}

.modal.modal-achievement .informations .value span:last-child:after {
    content: '';
    margin: 0;
}

.modal.modal-achievement .informations .element {
    border-bottom: solid 1Px var(--color-grey);
    padding: 1rem 0;
}

.modal.modal-achievement .informations .element:last-child {
    border-bottom: none;
}

.modal.modal-achievement .action {
    background-color: var(--color-primary);
    box-shadow: 1px 5px 10px 0 var(--color-grey-light);
}

.modal.modal-achievement .action:hover {
    background-color: var(--color-secondary);
    transition: .5s all;
}


.modal.modal-achievement .action a {
    display: block;
    color: var(--color-white);
    padding: 1rem;
}

.modal.modal-achievement .action a .title {
    font-family: "Microgramma Bold";
}

.card hr {
    margin: 1rem 0;
}

.card em {
    color: var(--color-primary);
}

.wp-block-columns {
    display: flex;
    margin-bottom: 5rem;
}

.wp-block-column {
    flex: 1;
}

@media screen and (min-width: 992px) {

    .btn {
        display: inline-block;
        margin-bottom: 0;
    }

    header {
        height: auto;
        padding-top: 0;
    }

    header .nav-item {
        padding: 30px 0;
    }

    header .nav-item .nav-link {
        padding: 30px 15px !important;
    }

    header .navbar-nav {
        position: static;
    }

    header .navbar-collapse {
        position: static;
        background: transparent;
    }

    header .navbar-collapse a {
        font-size: 1.1rem;
        margin-bottom: 0;
    }

    header .other-links {
        display: block;
    }

    footer a {
        font-size: 1.1rem;
    }

    body.home header {
        background: transparent;
    }

    body.home header a {
        color: var(--color-white) !important;
    }

    body.home header .navbar-brand {
        background-image: url("../img/logos/logo-white-0bCX3xh.png");
    }

    div.section-jumbotron {
        padding: calc(10rem + 90px) 0 10rem 0;
    }

    div.section-jumbotron .title-1 {
        font-size: 4rem;
        height: auto;
    }

    div.section-jumbotron .title-2 {
        font-size: 5rem;
    }

    div.section-jumbotron .subtitle {
        font-size: 3rem;
    }

    div.section-jumbotron .actions .btn {
        display: inline-block;
        margin-bottom: 0;
    }

    div.section-services {
        background: var(--color-grey);
        padding: 2rem 0 10rem 0;
    }

    div.section-services-2 h1 {
        margin-bottom: 5rem;
    }

    div.section-services-2 .card {
        height: 100%;
        margin-bottom: 0;
    }

    div.section-services h2 {
        margin-bottom: 0;
    }

    div.section-services .icon {
        margin: 0 auto 2rem auto;
    }

    div.section-about .picture {
        width: 90%;
        height: 508px;
        position: relative;
        top: -6rem;
        margin-bottom: 0;
    }

    div.section-about .picture-1 {
        display: block;
    }

    div.section-about .picture-2 {
        width: 440px;
        height: 510px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        margin: 0;
    }

    div.section-about .picture-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    div.section-contact .card.card-contact-form {
        margin: 0 0 0 1rem;
    }

    div.section-contact .wpcf7-not-valid-tip {
        font-size: 1.1rem;
    }

    div.section-contact .wpcf7-response-output {
        font-size: 1.1rem;
    }

    div.section-contact .card.card-contact-form {
        box-shadow: 0 -1px 20px 0 #CCCCCC;
        padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);

    }

    div.section-contact [data-name=firstname],
    div.section-contact [data-name=lastname],
    div.section-contact [data-name=email],
    div.section-contact [data-name=phone] {
        width: calc(50% - .5rem);
        float: left;
    }

    div.section-contact [data-name=firstname],
    div.section-contact [data-name=phone] {
        margin-right: 1rem;
    }

    div.section-contact .card.card-contact .card-body a {
        font-size: 1.1rem;
    }

    div.section-questions {
        font-size: 2.5rem;
    }

    div.section-questions .btn {
        margin-top: 0;
    }

    .jumbotron {
        margin-bottom: 4rem;
    }

    .modal.modal-achievement .preview {
        display: block;
    }

    .modal.modal-achievement .btn.btn-close {
        position: absolute;
        top: 2rem;
        right: 2rem;
        z-index: 1;
    }

    .modal.modal-achievement .btn.btn-close:hover {
        color: var(--color-primary);
    }

    .modal.modal-achievement .thumbnail.active {
        border-color: var(--color-primary);
    }

    .modal.modal-achievement .thumbnail {
        opacity: .8;
    }

}