@import url('/css/normalize.css');


body, html {
    background: #FFF;
    width:100%;
    height:100%;
    color:#333;
    font-family:'Roboto', sans-serif
}

i{font-style:italic}
a {text-decoration: none;color:#571179;}

.layout {
}

.layout .hero{
    background:url(/images/fond-accueil.jpg) right center no-repeat;
    background-size:cover;
    background-color:#339669;
    height:380px;
    color:#fff;
    display:table;
    width:100%;
}
.layout .hero.propos{
    background-image:url(/images/fond-propos.jpg);
    background-color:#571179;
}
.layout .hero-boite{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

.video{
    position:relative;
    overflow:hidden;
    height:100%;
    width:100%;
}

.contenu p.note{
    color:#777;
    font-size:14px;
    line-height:18px;
    max-width:480px;
    margin:20px auto 0px;
}
.contenu p.note i{
    font-style: italic;
}
.layout .hero-boite .video h1{
    text-indent:-1000px;
    overflow:hidden;
    position:absolute;
    top:50%;
    left:50%;
    background: url(/images/logo-komurobo-mauve.svg) no-repeat;
    width:300px;
    height:100px;
    max-width:none;
    margin:-50px 0 0 -150px;
}
@media screen and (min-width: 1200px) {
    .layout .hero-boite .video h1{
        width:450px;
        height:150px;
        margin:-75px 0 0 -225px;
    }    
}
@media screen and (min-width: 1440px) {
    .layout .hero-boite .video h1{
        width:800px;
        height:300px;
        margin:-250px 0 0 -400px;
    }    
}

.video video{
    height:100%;
    width:100%;
    object-fit: cover;
}

.layout .hero-boite{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.layout .hero-boite h1{
    font-size:14px;
    line-height:18px;
    max-width:260px;
    margin:0 auto;
    font-weight:800;
    text-transform:uppercase;
}
.layout .hero img,
.layout .hero svg{
    width:200px;
    height:200px;
}

.contenu {
    padding:0 40px 140px;
}

.contenu .navigation {
    border-bottom:1px solid #DDD;
    overflow:hidden;
    padding:20px 0;

}
.contenu .navigation-interieur {

}
.contenu .navigation ul{
    float:right;
    overflow:hidden;
}

.contenu .navigation li.icon{
    width:30px;
    height:30px;
    text-indent:-1000px;
    overflow:hidden;
    background:url(/images/fb.svg) no-repeat;
}

.contenu .navigation li{
    float:left;
    margin-left:30px;
}

.contenu .navigation li a{
    display:block;
    font-weight:800;
    font-size:12px;
    line-height:30px;
    position:relative;
    text-transform:uppercase;
}
.contenu .navigation li.selected a:before{
    content:"";
    display:block;
    bottom:0;
    left:0;
    width:100%;
    position:absolute;
    height:4px;
    background:#571179;
}


    .contenu .projets {
        max-width:480px;
        margin:0 auto;
    }

.projets .item {
    padding:35px 0;
    border-top:1px solid #ddd;
}

.projets .item:first-child {
    border-top:0;
}

.contenu .item h2{
    font-size:24px;
    line-height:30px;
}

.contenu .item h3{
    font-size:19px;
    line-height:24px;
}

.contenu .item strong{
    font-weight:700;
}


.contenu .item ul{
    margin:10px 0 20px;
}
.contenu .item li{
    padding:8px 0;
    border-top:1px solid #EEE;
    font-size:13px;
    line-height:22px;
}


.contenu .item small{
    font-size:12px;
    line-height:16px;
    color:#999;
    text-transform:uppercase;
}
.contenu .item p{
    font-size:13px;
    line-height:22px;
    color:#333;
    margin:20px 0;
    font-weight:400;
}
.contenu .item a.btn{
    background:#571179;
    color:#fff;
    text-transform:uppercase;
    height:40px;
    border-radius:3px;
    padding:0 20px;
    font-size:12px;
    font-weight:700;
    line-height:40px;
    height:40px;
    box-sizing:content-box;
    display:inline-block;
    border-bottom:3px solid #240235;
}
.contenu .item.fll h2 a{
    color:#339669;
}
.contenu .item.fll a.btn{
    background:#339669;
    border-bottom:3px solid #217951;
}
@media screen and (min-width: 768px) {
    .layout .hero{
        height:100%;
        width:50%;
        position:fixed;
    }
    .layout .hero-boite h1{
        font-size:21px;
        line-height:30px;
        max-width:300px;
        margin-bottom:50px
    }
    .layout .hero svg,
    .layout .hero img{
        width:300px;
        height:300px;
    }
    .contenu {
        width:50%;
        margin-left:50%;
        padding-top:140px;
    }
    .contenu .navigation-boite {
        position:fixed;
        width:100%;
        padding-left:50%;
        top:0;
        left:0;
    }
    .contenu .navigation {
        margin:0 40px;
        max-width:480px;
        padding:40px 0;
        background:#fff;
    }
    .contenu .navigation-interieur {
        margin:0 auto;
        max-width:480px;
    }
    .contenu .navigation {
        margin:0 auto;
        max-width:480px;
    }

}
@media screen and (min-width: 1440px) {
    .layout .hero{
        width:60%;
    }

    .layout .hero svg,
    .layout .hero img{
        width:450px;
        height:450px;
    }
    .contenu {
        width:40%;
        margin-left:60%;
    }
    .contenu .navigation-boite {
        padding-left:60%;
    }
}

.temp {
    display:table;
    width:100%;
    height:100%;
}
.temp .logo {
    display:table-cell;
    width:100%;
    height:100%;
    vertical-align:middle;
    text-align:center;
}
.temp .logo img{
    width:350px;
    height:350px;
}

.temp h1{
    font-weight:bold;
    margin:0;
    padding:0;
    font-size:24px;
    line-height:27px;
    color:#4A3E6D;
    font-family: 'Encode Sans Condensed', sans-serif;
}
.temp h2{
    font-size:21px;
    line-height:24px;
    color:#666;
    font-weight:400;
    font-family: 'Encode Sans Condensed', sans-serif;
    padding:10px 0 60px;
}
    .temp ul li a {
        font-size:18px;
        display:block;
        font-weight:bold;
        line-height:21px;
        padding:8px 0;
        font-family: 'Encode Sans Condensed', sans-serif;
        color:#339669;
        text-decoration:none;

    }



svg .stroke{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
svg .lettre{fill:#FFFFFF;}

.smil .dash-500 {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: dash-500 1.5s ease-in-out forwards;
}

.smil .dash-400 {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: dash-400 1.5s ease-in-out forwards;
}

.smil .dash-150 {
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: dash-150 1.5s ease-in-out forwards;
}

.smil .dash-100 {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: dash-100 1.5s ease-in-out forwards;
}


@keyframes dash-500 {
  from {stroke-dashoffset: 500;}
  to {stroke-dashoffset: 0;}
}
@keyframes dash-400 {
  from {stroke-dashoffset: 400;}
  to {stroke-dashoffset: 0;}
}
@keyframes dash-150 {
  from {stroke-dashoffset: 150;}
  to {stroke-dashoffset: 0;}
}
@keyframes dash-100 {
  from {stroke-dashoffset: 100;}
  to {stroke-dashoffset: 0;}
}

.smil .dash-delay-2{-webkit-animation-delay:0.2s;animation-delay: 0.2s;}
.smil .dash-delay-4{-webkit-animation-delay:0.4s;animation-delay: 0.4s;}
.smil .dash-delay-6{-webkit-animation-delay:0.6s;animation-delay: 0.6s;}
.smil .dash-delay-8{-webkit-animation-delay:0.8s;animation-delay: 0.8s;}
.smil .dash-delay-10{-webkit-animation-delay:1.0s;animation-delay: 1s;}