@font-face {
    font-family: 'Geomanist';
    src: url('../fonts/Geomanist-Bold.woff2') format('woff2'),
        url('../fonts/Geomanist-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geomanist';
    src: url('../fonts/Geomanist.woff2') format('woff2'),
        url('../fonts/Geomanist.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geomanist';
    src: url('../fonts/Geomanist-Black.woff2') format('woff2'),
        url('../fonts/Geomanist-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geomanist';
    src: url('../fonts/Geomanist-Medium.woff2') format('woff2'),
        url('../fonts/Geomanist-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Geomanist';
    src: url('../fonts/Geomanist-Light.woff2') format('woff2'),
        url('../fonts/Geomanist-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geomanist Book';
    src: url('../fonts/Geomanist-Book.woff2') format('woff2'),
        url('../fonts/Geomanist-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Eras Bold ITC';
    src: url('../fonts/ErasITC-Bold.woff2') format('woff2'),
        url('../fonts/ErasITC-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* RESET */
body, ul, li, ol, form, h1, h2, h3, h4, h5, h6, div, span, p { padding:0; margin:0; border:0; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; text-size-adjust:none;}
article, aside, dialog ,figcaption, figure, footer, header, hgroup, main, nav, section { display:block;}  
input, textarea,select                                              { -webkit-appearance:none; -ms-appearance:none; appearance:none; -moz-appearance:none; -o-appearance:none; border-radius:0;}
*                                                           { outline:none !important;}
strong, b                                                   { font-weight:bold }
ul                                                          { list-style-type:none;}
body                                                        { font:normal 18px/24px Geomanist, Arial; color:#313131;background: url(../img/bg-coming-soon.jpg);height: 100vh;display: flex;align-items: center;justify-content: center;background-size: cover;padding: 40px;box-sizing: border-box;}
body *                                                      { box-sizing:border-box; outline:0 }
a                                                           { text-decoration:none; color:#c3312d; outline:none;}
a:hover{
    color:#169541;
    transition:all ease-in-out 0.5s;
}
img                                                         { border:none;}
p{ margin-bottom: 20px;margin-top:20px }

.content{ width: auto;background: rgba(255, 255, 255, 0.85);text-align: center;padding:40px 40px 10px; }
.logo{ display: block;width: 150px;margin: auto;transition: all .5s ease-in-out; }
.logo img{ display: block; }
.logo:hover{ opacity: 0.7;transition: all .5s ease-in-out; }
.titre{  font:bold 36px/36px Geomanist, Arial; color:#286783;margin: 60px 0 30px;}
.rs{ display: block;width: 50px;height: 50px; margin: 0 5px;background-color: #286783;background-position: center;background-repeat: no-repeat;}
.rs:hover{ background-color: #ffffff; transition: all .5s ease-in-out;}
.fb{ background-image: url(../img/facebook.png) }
.ln{ background-image: url(../img/linkedin.png) }
.insta { background-image: url(../img/instagram.png) }
.youtube { background-image: url(../img/youtube.png) }

.fb:hover{ background-image: url(../img/facebook-h.png) }
.ln:hover{ background-image: url(../img/linkedin-h.png) }
.insta:hover{ background-image: url(../img/instagram-h.png) }
.youtube:hover{ background-image: url(../img/youtube-h.png) }

.blcRs{ display: flex;justify-content: center;margin:30px 0; }
.contact a{ position: relative;display: inline-block; }
.contact a:after{ content: '';width: 100%;height: 1px;background:#4a9877;bottom: 1px;left: 0;position: absolute; }
.contact a:hover:after{ width: 0;transition: all .5s ease-in-out;  }
.contact a:hover{ color: #286783; }


@media (max-width:767px) {
    body{ padding: 20px; }
    .content{max-width:400px;width:100%;padding:40px 20px 10px }
    .titre{ font-size: 25px;line-height: 30px; }

}