html, body {
        background-color: #59718b;
        font-size: auto;
        line-height: 1.6em;
        color: #59718b;
    }   

    .cabin {
        position: relative;
        z-index: 102;
    }

    #rosalie {
        background-color: rgba(255, 255, 255, 1);
        background-image: url('../bg.jpg');
        background-attachment: fixed;
        background-size: contain;
        background-repeat: no-repeat;
        transition: .5s ease-in-out;
    }
    
    .container, .container-fuild {
        position: relative;
        z-index: 103;
    }

    #navbar{
        position: fixed;
        z-index: 108;
    }

    #menu {
        cursor: pointer;
        transition: all .15s ease-in-out;
    }
    #menu:hover{
        transform: scale(1.15);
    }

    .menu-active #rosalie {
        filter: blur(2px);
        opacity: .8;
    }

    #intro {
        height: 100vh
    }

    a,a:hover,a:focus{
        color : #1d3f65;
    }

    .wrapper {
        background-color: #59718b;
        margin: 6.5em 0;
        position: relative;
        color: #ffffff;
    }

    h2{
        text-transform: uppercase;
        padding-bottom: 1em;
        border-bottom: solid 2px rgba(255, 255, 255, 0.125);
    }
    h3 {
        text-transform: uppercase;
        padding:1em 0; 
        border-bottom: solid 2px rgba(0, 0, 0, 0.125);
    }

    .inner {
        padding: 3em 0;
        font-size: 1.1em;
    }


    #links {
        list-style: none;
    }

    #links a{
        position: relative;
        display: block;
        padding: .75rem 1.25rem;
        margin-bottom: -1px;
        background-color: rgba(255,255,255,1);
        border: 1px solid rgba(0,0,0,.125);
        transition: all .1s ease-out;
        color: #1d3f65;
    }
    #links a.menu-intro{
        background-color: initial;
        padding: 0;
        margin: 0;
        border:none;
    }
    #links a.menu-intro:hover{
        background-color: initial;
    }

    #links a:hover{
        background-color: #a7bad0;
        color: #fff;
    }
    
    #links a.menu-cadre:hover {
        background-color: #59718b;
    }

    #links a.menu-ville:hover {
        background-color: #6fbc9f;
    }

    #links a.menu-residence:hover {        
        background-color: #cedaf0;
        color: #59718b;
    }
    #links a.menu-histoire:hover {        
        background-color: #b2865a;
        color: #ffffff;
    }
    #links a.menu-pinel:hover {
        background-color: #ebdcc5;
        color: #59718b;
    }

    #links a.menu-contact:hover {
        background-color: #94b486;
    }

    nav ul {
        position: relative;
        width: 100%;
        max-width: 300px;
        top:1em;
    }
    .wrapper:before, .wrapper:after {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:#59718b' /%3E%3C/svg%3E");
    }

    .wrapperGreen {
        background-color:#6fbc9f;
    }

    .wrapperGreen:before, .wrapperGreen:after {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:#6fbc9f' /%3E%3C/svg%3E");
    }

    .wrapperSand {
        background-color:#ebdcc5;
        color: #1d3f65;
    }

    .wrapperSand:before, .wrapperSand:after {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:#ebdcc5' /%3E%3C/svg%3E");
    }

    .wrapperBlack {
        background-color:#b2865a;
    }

    .wrapperBlack:before, .wrapperBlack:after {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:#b2865a' /%3E%3C/svg%3E");
    }
    

    .wrapper:before,.wrapper:after {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        content: '';
        display: block;
        height: 6.5em;
        position: absolute;
        width: 100%;
    }

    .wrapper:before {
        left: 0;
        top: -6.5em;
    }

    .wrapper:after {
        -moz-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
        transform: scaleY(-1);
        bottom: -6.5em;
        left: 0;
    }

    .wrapper.alt:before {
        -moz-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
        transform: scaleX(-1);
    }

    .wrapper.alt:after {
        -moz-transform: scaleY(-1) scaleX(-1);
        -webkit-transform: scaleY(-1) scaleX(-1);
        -ms-transform: scaleY(-1) scaleX(-1);
        transform: scaleY(-1) scaleX(-1);
    }

    summary::-webkit-details-marker {
        display: none
     }

    .special:not(.button) {
        text-decoration: none;
        border-bottom: 0;
        display: block;
        font-family: Raleway, Helvetica, sans-serif;
        font-size: 0.8em;
        font-weight: 700;
        letter-spacing: 0.1em;
        margin: 0 0 2em 0;
        text-transform: uppercase;
    }

    .special:not(.button):before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-transform: none !important;
    }

    .special:not(.button):before {
        -moz-transition: background-color 0.2s ease-in-out;
        -webkit-transition: background-color 0.2s ease-in-out;
        -ms-transition: background-color 0.2s ease-in-out;
        transition: background-color 0.2s ease-in-out;
        border-radius: 100%;
        border: solid 2px rgba(255, 255, 255, 0.5);
        content: '+';
        display: inline-block;
        font-size: 1.25em;
        height: 2em;
        line-height: 1.65em;
        margin-right: 0.85em;
        text-align: center;
        text-indent: 0.15em;
        vertical-align: middle;
        width: 2em;
    }

    .special:not(.button):hover:before {
        background-color: rgba(255, 255, 255, 0.5);
    }

    .special:not(.button):active:before {
        background-color: rgba(255, 255, 255, 0.5);
    }

    .card a img{
        width: 100%;
    }

    .card figure {
        max-height: 525px;
        overflow: hidden;
        margin: 0;
    }

    .card figure img {
        position: relative;
        top: -100px;
    }
    
    .card a{
        overflow: hidden;
    }
    
    details[open] .special:before {
        content: '-';
    }

    details[open] summary ~ * {
    animation: woosh .5s ease-in-out;
    }
    
    @keyframes woosh {
    0%    {opacity: 0; transform: translateY(-10%)}
    100%  {opacity: 1; transform: translateY(0%)}
    }


    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="submit"],
    select,form button,
    textarea {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
        background:rgba(89, 113, 139,.2);
        border-radius: 5px;
        border: none;
        border: solid 2px rgba(89, 113, 139,.125);
        color: inherit;
        display: block;
        outline: 0;
        padding: .4em 1em;
        text-decoration: none;
        width: 100%;
    }
    #PlaquetteForm input {
        width: auto;
        margin: auto;
    }

    #residence article {
        margin-bottom: 4em;
    }

    #residence article .card h3 {
        padding:1em;
        font-size: 1.2em;
    }

    #residence article .card p {
        padding:1.75em;
    }

    #residence article .card {
        cursor: pointer;
        position: relative;
        -webkit-transition: -webkit-transform .2s ease,-webkit-box-shadow .2s ease;
        transition: -webkit-transform .2s ease,-webkit-box-shadow .2s ease;
        transition: transform .2s ease,box-shadow .2s ease;
        transition: transform .2s ease,box-shadow .2s ease,-webkit-transform .2s ease,-webkit-box-shadow .2s ease;
        will-change: transform,box-shadow;
      }

    #residence article .card:hover {
        -webkit-box-shadow: 0 16px 32px 0 rgba(10,16,34,.2), 0 0 0 transparent;
        box-shadow: 0 16px 32px 0 rgba(10,16,34,.2), 0 0 0 transparent;
        -webkit-transform: translateY(-5px) translateZ(0);
        transform: translateY(-5px) translateZ(0);
    }

    .g-recaptcha{
        width: 304px;
        height: 78px;
        margin:auto;
    }

    .owl-carousel{
        margin: 3em 0 5em 0;
    }

    .owl-carousel h4 {
        margin: 2em 0;
        text-transform: uppercase;
    }

    .owl-prev,.owl-next  {
        width: 50px;
        height: 60px;
        position: absolute;
        top: 30%;
    }
    .owl-prev {
        left: -60px;
    }
    .owl-next {
        right:-60px;
    }

    form button {
        width: auto;
        margin: auto;
    }

    .footer-contact-infos,.footer-social,.footer-copyright{
        list-style: none;
    }
    .footer-contact-infos li img{
        margin-right: 1em;
    }
    .footer-social li{
        display: inline-block;
        margin: 0 .4em;
    }
    .footer-social img{
        height: 1em;
        transition: all .15s ease-in-out;
    }
    .footer-social a:hover img {
        transform: scale(1.2);
    }

    .footer-copyright img{
        width: 100%;
        max-width: 150px;
    }

    .legals{
        background: #ffffff;
        overflow: hidden;
    }

    .btn-outline-primary {
        color: #6fbc9f;
        border-color: #6fbc9f;
    }
    .btn-outline-primary:hover,.btn-outline-primary:focus{
        background-color: #6fbc9f;
        border-color: #6fbc9f;
        color: #ffffff;
    }

    /* Utilites Class */
    .shadow {
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    }    
    .shadow-lg {
        box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
    }

      
    .fadeInLeft {
        animation: fadeInLeft .5s 1 cubic-bezier(0,.3,.3,1.7);
    }
    
    @keyframes fadeInLeft {
        from {
            opacity: 0;
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
        }    
        to {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    /* IE10+ specific styles go here
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
        .lgRosalieCab {
            stroke-dasharray: 0;
            stroke-dashoffset: 0;
        }
    }
    */    

    @keyframes offset{
        0%,100%{
            stroke-dashoffset: 160;
        }
        25%,50%,75% {
            stroke-dashoffset: 0;
        }
    }

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .wrapper {
            margin: 0;
        }
    }


    @media (max-width: 768px) {
        .card figure img {
            position: relative;
            top: 0px;
        }
        h2 {
            text-align: center;
        }
        #intro {
            height: 500px;
        }

        .cab{
            max-width: 150px;
        }
    }

    

    @media (min-width: 767px) {
        .inner {
            padding: 5em 0;
        }
    }
    
    @media (min-width: 989px) {
        .inner {
            padding: 8em 0;
        }
        .wrapper img{
            transform: scale(1.2);
        }
        .card figure {
            max-height : 650px; 
        }
        .card figure img {
            position: relative;
            top: -150px;
        }
        .owl-carousel h4 {
            margin: 4em 0;
        }
    }

    @media (min-width: 1200px) {
        .card figure img {
            top: -250px;
        }
    }


    @media (min-width: 1500px){
        .wrapper .container,#residence {
            max-width: 1440px;
        }
        .card figure img {
            top: -470px;
        }
    }