@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,600,700&display=swap');

/* pour IE */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
main {
    display: block;
}


/**/


/*GENERIQUE*/

body {
    color: #000;
    font-family: 'Barlow Condensed', sans-serif;
    margin: 0;
    text-align: justify;
    font-size: 18px;
    font-weight: 300;
    line-height: 26px;
}

a img {
    border: 0;
}

a {
    color: black;
}

a:hover {
    text-decoration: none;
    color: #8a1d4f;
}

.fancybox {}

.fancyboxAjax {}

#popup {
    padding: 0 10px;
}

.mce-content-body {
    background: #fff;
}

.hack {
    /height: 120px !important
    /*Hack IE7*/
}

#btn-h {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font: 400 17px 'Barlow Condensed';
    width: 150px;
    min-height: 35px;
    border: 1px solid #000;
    margin-top: 45px;
    border-radius: 5px;
    text-decoration: none;
}

#btn-h:hover {
    color: #ffffff;
    background: #2378b0;
    transition: all 2s ease;
}

.hidden {
    display: none !important;
}

.clear {
    clear: both
}

.error {
    border: 1px solid #DF7B7B;
    background-color: #FFE6E6;
}

.conf {
    border: 1px solid #72CB67;
    background-color: #DFFAD3;
}

.conf,
.error {
    color: #383838;
    font-weight: 700;
    margin: 0 0 2% 0;
    line-height: auto;
    padding: 2% 3%;
}

.noPadding {
    padding: 0 !important;
}

#incomm {
    /* position: relative; */
    /* float: none; */
    /* margin: 0 auto; */
    /* text-align: center; */
    /* margin-top: 0; */
    /* padding: 5px; */
    /* width: 100%; */
    /* color: #000; */
}

.cords-header {
    width: 100%;
    display: block;
}

.cords-left a {
    background: white;
    height: 36px !important;
    width: 36px !important;
    display: flex !important;
    text-align: center;
    color: #8a1d4f;
    justify-content: center;
    align-items: center;
    margin: 0 2px;
    font-size: 28px;
}

.cords-left a:hover {
    color: #029192;
}

#beandeau {
    float: left;
    width: 100%;
    clear: both;
    position: relative;
}

#cms2 #img-header-2 {
    display: block;
}

#cms8 #img-header-3 {
    display: block;
}

#cms9 #img-header-4 {
    display: block;
}

#cms10 #img-header-5 {
    display: block;
}

#cms11 #img-header-6 {
    display: block;
}

#cms12 #img-header-7 {
    display: block;
}

#cms13 #img-header-8 {
    display: block;
}

#cms14 #img-header-9 {
    display: block;
}

#cms3 #img-header-7,
#cms15 #img-header-7,
#cms5 #img-header-7 {
    display: block;
}

#img-header-2 {
    display: none;
}

#img-header-3 {
    display: none;
}

#img-header-4 {
    display: none;
}

#img-header-5 {
    display: none;
}

#img-header-6 {
    display: none;
}

#img-header-7 {
    display: none;
}

#img-header-8 {
    display: none;
}

#img-header-9 {
    display: none;
}

.bg-cords-footer {
    width: 100%;
    height: 350px;
    display: block;
    background: url(../img/footer.jpg)center no-repeat;
    background-size: cover;
}


/* fade in-up */

.module {
    position: relative;
}

.module:nth-child(even) {
    margin-right: 0;
}

.come-in {
    transform: translateY(150px);
    animation: come-in 1s ease forwards;
}

.come-in:nth-child(odd) {
    animation-duration: 1s;
}

.already-visible {
    transform: translateY(0);
    animation: none;
}

@keyframes come-in {
    to {
        transform: translateY(0);
    }
}

.animation-element {
    position: relative;
    width: auto;
    margin: 0% 1.33 2.66% 1.33%;
    float: left;
}


/*3 grid layout*/

.animation-element:nth-of-type(3n-2) {
    /* margin: 0% 1.375% 2.75% 0%; */
    clear: left;
}

.animation-element:nth-of-type(3n-1) {}

.animation-element:nth-of-type(3n-0) {
    margin: 0% 0% 2.75% 1.375%;
    clear: right;
}

.bounce-up {
    opacity: 0;
    -moz-transition: all 700ms ease-out;
    -webkit-transition: all 700ms ease-out;
    -o-transition: all 700ms ease-out;
    transition: all 700ms ease-out;
    -moz-transform: translate3d(0px, 200px, 0px);
    -webkit-transform: translate3d(0px, 200px, 0px);
    -o-transform: translate(0px, 200px);
    -ms-transform: translate(0px, 200px);
    transform: translate3d(0px, 200, 0px);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bounce-up.in-view {
    opacity: 1;
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}

[class^="hvr-"] {
    margin: 20px;
    padding: 8px 15px;
    cursor: pointer;
    background: #ffcf00;
    text-decoration: none;
    color: #666;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
}

@keyframes animate {
    0% {
        background-position: -500%;
    }
    100% {
        background-position: 500%;
    }
}


/*Text */

@keyframes an {
    from {
        opacity: 0;
        transform: perspective(500px) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
    }
    to {
        opacity: 1;
        transform: perspective(500px) translate3d(0, 0, 0);
    }
}

.char {
    animation: an 1s ease-out 1 both;
    display: inline-block;
}

div#slide {
    float: left;
}

.footer-container-bottom {
    float: left;
    margin: 0 auto;
    display: contents;
    width: 300px;
    text-align: center;
}

.fas,
.fab {
    text-align: center;
    margin: 0 auto;
    width: auto;
    color: #fff;
    padding-right: 2px;
    font-size: 21px;
}

.fas:hover,
.fab:hover {
    color: #029192;
}

.cords-header a:hover {
    color: #000 !important;
}

.row {
    margin: 0 !important;
}


/* SMARTPHONES */

@media only screen and (min-width: 320px) {
    div#slide {
        float: left;
        margin-top: 110px;
    }
    .slogan-h {
        position: absolute;
        top: 112px;
        display: block;
        color: #000;
        z-index:10;
        margin: 0 auto;
        left: 0;
        right: 0;
        text-align: center;
        float: right;
    }
    .logo_footer {
        position: relative;
        display: block;
        padding: 25px 0;
        float: none;
        width: 260px;
        margin: 0 auto;
        text-align: center;
    }
    .container-header {
        width: 100%;
        float: left;
        margin: 0 auto;
        display: block;
        position: relative;
    }
    .tel-header {
        background: transparent;
        float: none;
        display: block;
        width: 100%;
    }
    .container-cords-footer {
        display: block;
        margin: 0 auto;
        width: 300px;
        position: relative;
    }
    body {
        background: #fff;
    }
    #page {
        margin: auto;
        width: 100%;
        text-align: justify;
        float: left;
        background: white;
    }
    .cords-header {
        width: 100%;
        position: relative;
        margin: 0px 0;
        float: none;
        padding: 10px;
        text-align: center;
        background-color: #8a1d4f;
        z-index: 9999999;
    }
    #header {
        position: relative;
        background: #fff;
    }
    a#home {
        display: block;
        text-align: center;
        position: relative;
        width: 220px;
        left: 0;
        right: 0;
        top: 0;
        margin: 5px auto;
        float: none;
        /* background-color: #ffffffba; */
        /* border-radius: 23px; */
    }
    #header p#slogan {
        display: none;
    }
    #cms1 #columns {
        padding: 0px;
    }
    #columns {
        clear: both;
        background: #ffffff;
        text-align: justify;
        padding: 0 15px;
    }
    #center_column {
        width: 100%;
        padding: 0;
    }
    #breadcrumb {
        margin: 5px 0;
        color: #666666;
        font-size: 0.8em;
    }
    #breadcrumb a {
        color: #666666;
    }
    #center_column,
    #left_column,
    #right_column {
        float: none
    }
    #left_column {
        width: 90%;
        padding: 5%;
    }
    #right_column {
        width: 200px;
        padding-right: 40px;
    }
    #footer {
        height: auto;
        float: left;
        width: 100%;
        margin-top: 20px;
    }
    #footer p.address {
        margin: 5px 0;
    }
    #footer p.address a {
        color: #333333;
    }
    #footer #incomm,
    #footer #seone {
        width: 100%;
        text-align: center;
        margin: 10px 0 5px 0;
        float: left;
        font-size: 0.7em;
    }
    #footer #incomm a,
    #footer #seone a {
        color: #333333;
        text-decoration: none;
    }
    .column .block {
        margin-bottom: 1em;
        border: 1px solid #cccccc;
    }
    .column .block p {
        margin: 0 0 1% 0;
    }
    .column .block header,
    article header,
    aside header {
        text-align: center;
        border-bottom: 0;
        padding: 3px 0;
    }
    .column .block .block_content {
        padding: 2%;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    iframe {
        max-width: 100%;
    }
    .no_image {
        display: none;
    }
    .headerTop {
        width: 100%;
        display: block;
        margin: 0 auto;
        position: relative;
        float: left;
        text-align: center;
        height: auto;
        height: auto;
        background-color: #ffffff;
    }
    .headerBottom {
        float: none;
        position: absolute;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        display: block;
        top: -100px;
    }
    #tel-header {
        text-align: center;
        text-decoration: none;
        font-size: 15px;
        /* width: auto; */
        display: inline-block;
        margin: 0 auto;
        line-height: inherit;
        font-weight: 300;
        color: #fff;
        padding-left: 10px;
    }
    #adresse-header {
        text-align: center;
        text-decoration: none;
        font-size: 15px;
        margin: 0 auto;
        line-height: 20px;
        font-weight: 300;
        color: #fff;
        height: auto;
        padding-left: 15px;
    }
    #mail-header {
        text-align: center;
        text-decoration: none;
        font-size: 15px;
        width: auto;
        float: none;
        display: inline-block;
        margin: 0 auto;
        line-height: 20px;
        font-weight: 300;
        color: #fff;
        height: auto;
        padding-left: 15px;
    }
    .container-header {
        width: 100%;
        float: left;
        margin: 0 auto;
        display: block;
        position: relative;
        background-color: rgba(255, 255, 255, 0.92);
        z-index: 9999999999999999999999999999999999;
    }
}


/* TABLETTES */

@media only screen and (min-width: 768px) {
    div#slide {
        float: left;
        margin-top: 0px;
    }
    .cords-left {
        /* text-align: center; */
        display: inline-block;
        width: auto;
        line-height: 30px;
        float: left;
    }
    .slogan-h {
        top: 130px;
        float: left;
        right: 0;
        left: 0;
        display: block;
    }
    .logo_footer {
        position: relative;
        display: block;
        margin: 80px auto;
        float: left;
        width: 240px;
        text-align: center;
    }
    .container-cords-footer {
        display: flex;
        width: 98%;
        position: relative;
        z-index: 0;
        margin: 0 auto;
        float: none;
    }
    .bg-cords-footer {
        width: 100%;
        height: auto;
        display: block;
        position: relative;
        float: left;
        padding: 0;
    }
    .container-header {
        width: 100%;
        float: left;
        margin: 0 auto;
        display: block;
        position: absolute;
        height: auto;
        padding: 0 0%;
    }
    #liensfooter_map {
        display: block;
        width: 100%;
        height: 310px;
        background: url(../img/map.png)center right 0px no-repeat;
        float: left;
        position: relative;
        background-size: contain;
    }
    #liensfooter_map a {
        display: block;
        float: left;
        width: 100%;
        height: 100%;
    }
    .cords-header {
        float: none;
        margin: 0 auto;
        position: relative;
        width: 100%;
        margin: 0 auto;
        display: flow-root;
        padding: 8px 70px;
        justify-content: space-between;
    }
    body {}
    #tel-header {
        font-size: 15px;
        text-align: center;
        /* display: inline-flex; */
        /* width: auto; */
        line-height: 30px;
        float: none;
    }
    #adresse-header {
        float: right;
        font-size: 15px;
        line-height: 30px;
        text-align: left;
        padding-right: 0;
    }
    #mail-header {
        float: none;
        width: auto;
        font-size: 15px;
        line-height: 30px;
        text-align: left;
        padding-left: 0;
    }
    .column .block {
        float: left;
        width: 47%;
        margin: 1%;
    }
    .column .block p {
        margin: 0 0 2% 0;
    }
    #center_column,
    #left_column,
    #right_column {
        float: left;
    }
    .no_image {
        display: block;
    }
    .headerTop {
        width: 100%;
        float: left;
        position: relative;
        max-width: 100%;
        height: auto;
    }
    .headerBottom {
        float: none;
        height: auto;
        top: -47px;
    }
    a#home {
        float: left;
        position: relative;
        width: 258px;
        left: 0;
        right: 0;
        top: 0;
        left: 11%;
        margin: 0px auto;
        background-color: transparent;
    }
    .table-home td {
        display: table-row;
        width: 100%;
    }
}


/* ORDINATEURS */

@media only screen and (min-width: 992px) {
    .table-home td {
        display: table-cell;
        width: 65%;
        padding-right: 5%;
    }
    .slogan-h {
        top: 42%;
    }
    #liensfooter_map {
        height: 340px;
        background-size: 239px;
    }
    .tel-header {}
    #tel-header {
        font-size: 16px;
    }
    #adresse-header {
        font-size: 16px;
    }
    #mail-header {
        font-size: 16px;
        float: inherit;
    }
    .bg-cords-footer {}
    .logo_footer {
        position: relative;
        display: block;
        float: none;
        width: 320px;
        text-align: center;
        margin: 90px auto;
    }
    .container-cords-footer {}
    .container-header {
        padding: 0 60px;
        width: 100%;
        float: none;
        height: auto;
    }
    #liensfooter_map a {
        display: none;
        float: left;
        width: 100%;
        height: 100%;
    }
    body {}
    .cords-header {
        padding: 10px 150px;
        z-index: 9999999;
    }
    #page {
        width: 100%;
        max-width: 1920px;
    }
    .headerTop {
        position: relative;
        height: 30px;
    }
    .headerBottom {
        width: 71%;
        float: right;
        position: relative;
        max-width: 100%;
        padding-bottom: 0;
        margin: 0 auto;
        padding: 0;
        top: 5px;
    }
    #header {
        width: 100%;
        position: relative;
        height: 100%;
        background: #ffffff;
        float: left;
    }
    a#home {
        width: 320px;
        left: 12%;
        top: 0;
    }
    #header p#slogan {
        margin: 10px 0 0 10px;
        float: left;
        display: block;
    }
    #cms1 #columns {
        clear: both;
        background: #ffffff;
        width: 100%;
        float: left;
        margin: 0 auto;
        position: relative;
    }
    #columns {
        clear: both;
        background: #ffffff;
        width: 90%;
        margin: 0 auto;
    }
    #center_column {
        width: 100%;
        padding: 0;
    }
    #breadcrumb {
        margin: 5px 0;
        color: #666666;
        font-size: 0.8em;
    }
    #breadcrumb a {
        color: #666666;
    }
    #center_column,
    #left_column,
    #right_column {
        float: left;
        clear: both;
    }
    #left_column {
        width: 200px;
        padding-left: 40px;
    }
    #right_column {
        width: 200px;
        padding-right: 40px;
    }
    #footer {
        height: auto;
    }
    #footer p.address {
        float: left;
        margin: 5px 0;
    }
    #footer p.address a {
        color: #333333;
    }
    #footer #incomm,
    #footer #seone {
        float: left;
        width: 980px;
        text-align: center;
        margin: 10px 0 0 0;
        font-size: 0.8em;
    }
    #footer #incomm a,
    #footer #seone a {
        color: #333333;
        text-decoration: none;
    }
    .column .block {
        width: 198px;
        margin-bottom: 1em;
        border: 1px solid #cccccc;
    }
    .column .block p {
        margin: 0 0 10px 0;
    }
    .column .block header,
    article header,
    aside header {
        text-align: center;
        border-bottom: 0;
        padding: 3px 0;
    }
    .column .block .block_content {
        padding: 5px;
    }
}

@media only screen and (min-width: 1200px) {
    .slogan-h {
        top: 41%;
    }
    .container-header {
        width: 100%;
        float: none;
        padding: 0 80px;
    }
    #tel-header {
        font-size: 18px;
    }
    #adresse-header {
        font-size: 18px;
    }
    #mail-header {
        font-size: 18px;
    }
    #liensfooter_map {}
    .cords-header {
        padding: 10px 250px;
    }
    .bg-cords-footer {}
    .logo_footer {}
    .container-cords-footer {
        width: 1170px;
    }
    #cms1 #columns {
        width: 100%;
        margin: 0 auto;
        float: left;
    }
    #columns {
        width: 1170px;
        margin: 0 auto;
    }
    a#home {
        left: 12%;
        width: 370px;
    }
    .headerBottom {
        width: 66%;
        top: 15px;
    }
}

@media only screen and (min-width: 1400px) {
    .slogan-h {}
    .container-cords-footer {}
    #tel-header {}
    .cords-header {
        padding: 10px 350px;
    }
    .bg-cords-footer {}
    a#home {
        width: 450px;
    }
    .headerBottom {}
    .container-header {
        padding: 0 100px;
    }
    .logo_footer {}
}

@media only screen and (min-width: 1700px) {
    .slogan-h {
        top: 43%;
    }
    .headerBottom {
        top: 23px;
    }
    .imgs-header {}
    a#home {
        left: 14%;
        width: 479px;
    }
    .cords-header {}
    .container-cords-footer {
        width: 1370px;
    }
    .logo_footer {}
}