body 
{
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    padding: 0;$
    overflow-x: hidden;
    background-color: #b7d5d7;
    -webkit-font-smoothing: antialiased;
}

.rouge{fill:#DC6650;}
.blanc{fill:#FFFFFF;}

/* INTRO */
.loader
{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: #b7d5d7;
}
.loader-txt
{
    position: relative;
    font-size: 14px;
    font-family: "DIN-Regular";
    color: #fff;
    line-height: 1.136;
    letter-spacing: -0.01em;
    text-align: center;
    top: 50%;

}


/* BOUTONS */
.btns
    {
    opacity:0;
    enable-background:new;
    transition: opacity 0.5s ease;
}
.btns:hover
    {
    opacity: 0.2;
    }

.btns-about
{
    position: fixed;
    left: 310px;
    bottom: 50px;
    width: 290px;
    opacity: 1;
    z-index: 20;
}
.btns-about:hover
    {
    opacity: 0.2;
    }


/* BLOC NAV */
.blocnav
{
    animation: blocnav 0.5s ease-in forwards;
    position: fixed;
    left: 50px;
    bottom: -352px;
    width: 260px;
    z-index: 10;
    animation-delay: 2.5s;
}

.logo-anim {
    stroke-dasharray: 1950;
    stroke-dashoffset: 2000;
    animation: draw 6s linear alternate;
    animation-iteration-count:infinite;
    animation-delay: 2.4s;
}

.logo-anim-dots {
    stroke-dasharray: 500;
    stroke-dashoffset: 600;
    animation: draw 6s linear alternate;
    animation-iteration-count:infinite;
    animation-delay: 2.5s;
}

/* 
.logo-typo{
    animation-name: logo-typo;
    animation-duration: 2s;
    transform-origin: 5px 5px;
    animation-delay: 2.5s;
    }


/* BLOC ABOUT */
.about-bloc
{
    position: absolute;
    left: 50px;
    bottom: -352px;
    width: 260px;
    z-index: 4;
    opacity: 0;
    transition: all 0.9s;
    animation: blocabout-out 0.2s ease-out forwards;
}

.about-bloc-fond{
    fill:#FFFFFF;
    z-index: 6;
}

.about-bloc-logos{
    fill-rule:evenodd;
    clip-rule:evenodd;
    fill:#2E2E3F;
    opacity: 0.6;
    z-index: 6;
}

.about-bloc-text
{
    position: relative;
    left: 10px;
    bottom: -80px;
    width: 240px;
    z-index: 6;
    font-size: 11px;
    font-family: "DIN-Regular";
    color: rgb(46, 46, 63);
    line-height: 1.136;
    text-align: center;
    letter-spacing: -0.01em;
}

#about-link {
    position: fixed;
    left: 175px;
    bottom: 97px;
    width: 130px;
    height: 40px;
    z-index: 15;
    opacity: 0;
    background-color: #fff;
    transition: opacity 0.5s ease;
}
#about-link:hover
    {
    opacity: 0.2;
    }
#about-link:hover ~ .about-bloc
    {
    animation: blocabout-in 0.2s ease-out forwards;
    opacity: 1;
    }

p {
   display: block;
   margin: 3px 0;
}



/* ANIMATIONS */

@keyframes blocabout-in {
  0% {
    transform: translate(0px, -402px);
    opacity: 0;
  }
  100% {
    transform: translate(260px, -402px);
    opacity: 1;
  }
}

@keyframes blocabout-out {
  0% {
    transform: translate(260px, -402px);
    opacity: 0.5;
  }
  100% {
    transform: translate(0px, -402px);
    opacity: 0;
  }
}

@keyframes blocnav {
  0% {
    transform: translate(0px, -352px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, -402px);
    opacity: 1;
  }
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

/*
@keyframes logo-typo {
    0% {
        transform: rotate(0deg);
        opacity: 0.2;
    }
    100% {
        transform: rotate(720deg);
        opacity: 1; }
    }
}



/* FONTS */
@font-face {
    font-family: 'DIN-Regular';
    src: url("../fonts/DIN-Regular.otf") format("opentype"), url("../fonts/DIN-Regular.svg#DIN-Regular") format("svg"), url("../fonts/DIN-Regular.woff") format("woff"), url("../DIN-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'DIN-Bold';
    src: url("../fonts/DIN-Bold.otf") format("opentype"), url("../fonts/DIN-Bold.svg#DIN-Bold") format("svg"), url("../fonts/DIN-Bold.woff") format("woff"), url("../DIN-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}