@font-face {
    font-family: 'lintelbold';
    src: url('../font/lintel_bold-webfont.eot');
    src: url('../font/lintel_bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../font/lintel_bold-webfont.woff2') format('woff2'),
        url('../font/lintel_bold-webfont.woff') format('woff'),
        url('../font/lintel_bold-webfont.ttf') format('truetype'),
        url('../font/lintel_bold-webfont.svg#lintelbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'lintellight';
    src: url('../font/lintel_light-webfont.eot');
    src: url('../font/lintel_light-webfont.eot?#iefix') format('embedded-opentype'),
        url('../font/lintel_light-webfont.woff2') format('woff2'),
        url('../font/lintel_light-webfont.woff') format('woff'),
        url('../font/lintel_light-webfont.ttf') format('truetype'),
        url('../font/lintel_light-webfont.svg#lintellight') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'lintelheavy';
    src: url('../font/lintel_heavy-webfont.eot');
    src: url('../font/lintel_heavy-webfont.eot?#iefix') format('embedded-opentype'),
        url('../font/lintel_heavy-webfont.woff2') format('woff2'),
        url('../font/lintel_heavy-webfont.woff') format('woff'),
        url('../font/lintel_heavy-webfont.ttf') format('truetype'),
        url('../font/lintel_heavy-webfont.svg#lintelheavy') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'lintelregular';
    src: url('../font/lintel-webfont.eot');
    src: url('../font/lintel-webfont.eot?#iefix') format('embedded-opentype'),
        url('../font/lintel-webfont.woff2') format('woff2'),
        url('../font/lintel-webfont.woff') format('woff'),
        url('../font/lintel-webfont.ttf') format('truetype'),
        url('../font/lintel-webfont.svg#lintelregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html,body{height:100%;}
body{-webkit-tap-highlight-color: rgba(0,0,0,0);overflow-x: hidden;}
a{text-decoration: none;}
.lintelregularRouge{
    font-family: 'lintelregular';
    color:rgb(186,0,0);
}
.lintellightRouge{
    font-family: 'lintellight';
    color:rgb(186,0,0);
}
.lintelboldRouge{
    font-family: 'lintelbold';
    color:rgb(186,0,0);
}
/*======================styles AUDIO==================*/
#audio{
    position:absolute;
    left:10px;
    top:26px;
}
#picto-play{
    position:absolute;
    top:0;
    left:42px;
    width:15px;height:15px;
}
#picto-play,#picto-pause{
    display: inline-block;
    width:15px;
    height:15px;
    cursor:pointer;
}

#pause1,#pause2{
    display: inline-block;
    width:5px;height:15px;
    background-color: #CCC;
}
.petitGris,.titreAudio{
    font-family: 'lintelbold';
    color:#CCC;
    font-size:0.8em;
    vertical-align:2px;
}
/*===================================================*/

#navMain{position:relative;top:15px;width: 634px;margin:0 auto;z-index:20;}
#logo{
    position: absolute;
    z-index:1;
    top:196px;
    left:190px;
}
#navMain h1{
    position:absolute;
    font-family: 'lintelheavy';
    font-weight: 800;
    color:rgb(186,0,0);
    font-size:24px;
    top:395px;
    left:275px;
    z-index:10;
}
#navMain #email{
    position:absolute;
    top:420px;
    left:192px;
    z-index:10; 
}
#navMain #email{font-family: 'lintelbold';
    color:rgb(186,0,0);
    font-size:21px;
}
#email a:hover{text-decoration: underline;}
.circle {
    position: relative;
    border: 1px solid #B1B3B4;
    padding: 0;
    margin: 1em auto;
    width: 634px;
    height: 634px;
    border-radius: 50%;
    list-style: none;
    overflow: hidden;
    transform: rotate(60deg);
}
#navMain li {
    overflow: hidden;
    position: absolute;
    top: -20%;
    right: -20%;
    width: 70%;
    height: 70%;
    transform-origin: 0% 100%;
    border: 1px solid #B1B3B4;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.text {
    position: absolute;
    left: -100%;
    width: 200%;
    height: 200%;
    cursor:pointer;
    text-align: center;
    transform: skewY(-60deg) rotate(15deg);
    padding-top: 20px;
    transition:1s;
    background:white;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#navMain li:first-child {
    transform: rotate(0deg) skewY(30deg);
}
#navMain li:nth-child(2) {
    transform: rotate(120deg) skewY(30deg);
}
#navMain li:nth-child(3) {
    transform: rotate(240deg) skewY(30deg);
}

.bleu{background:#054B6C;}
.orange{background:#379225;}
.vert{background:#E87B00;}
.bleuResponsive{background:#054B6C!important;}
.orangeResponsive{background:#E87B00!important;}
.vertResponsive{background:#379225!important;}

#centreMenu{
    position: absolute;
    background-color: white;
    width:422px;
    height:422px;
    border-radius: 50%;
    top:108px;
    left:50%;
    margin-left:-211px;
    border: 1px solid #B1B3B4;
    -webkit-box-shadow: inset 10px 10px 13px 5px rgba(204,204,204,0.9);
    -moz-box-shadow: inset 10px 10px 13px 5px rgba(204,204,204,0.9);
    box-shadow: inset 10px 10px 13px 5px rgba(204,204,204,0.9);
}
#fondMenu{
    position: absolute;
    background-color: #FFF;
    width:634px;
    height:634px;
    border-radius: 50%;
    top:0;
    left:0;
    z-index:-1;
}
.itemMenu{
    position: absolute; 
}
.whiteText{color:#FFF!important;}
#graphisme{
    top: 35px;left:172px;
    font-size: 50px;
    letter-spacing: 12px;
    pointer-events: none;
}
#illustration{
    top: 300px;left:45px;
    letter-spacing: 8px;
    font-size: 50px;
    pointer-events: none;
}
#multimedia{
    top: 310px;right:36px;
    font-size: 50px;
    letter-spacing: 8px;
    pointer-events: none;
}
/*ASIDE================================================*/
aside{
    position:absolute;
    top:0;
    right:-480px;
    display: none;
    width:480px;
    background-color: #FFF;
    height:100%;
    z-index:100;
    border-left: solid 2px #87888A;

}
.close{
    outline-style: none;
    background: none;
    cursor:pointer;
    color:#87888A;
    font-family: 'lintelbold';
    opacity:.4;
    margin:10px;
    width:15px;
}
.close:hover{opacity:1;}
#navLegale{
    position: absolute;
    top:28px;
    right:0;

}
#navLegale li{display: inline-block;margin-right: 20px;}
#navLegale li a{
    text-decoration: none;
    font-family: 'lintellight';
    color:#87888A;
    transition:0.5s;
}
#navLegale li a:hover{
    text-decoration: none;
    font-family: 'lintellight';
    color:#000;
}
#textPropos,#textReferences,#textContact{
    font-family: 'lintelbold';
    padding:20px;
}
aside h2{
    font-size:2em;
    color:#828282;
    padding:20px;
}
aside p{
    font-family: 'lintellight';
    font-weight: 600;
    font-size:1.2em;
    color:#999;
    line-height: 25px;
}
#textReferences p{text-transform: uppercase;}
#textPropos>figure{width:100px;float:left;margin-right: 14px;margin-top: -3px}
#textPropos>figure>img{max-width:100%;}
#textContact a{color:#999;}
#textContact a:hover{text-decoration: underline;}
/*=====================================================*/
/*MAIN=================================================*/
main{

}
/*slideshow animé======================================*/
#slideshow{
    position:absolute;
    width:100%;height:550px;
    top:70px;
    background:url(../images/bandeau-graphique.jpg)repeat-x;
}
/*REFERENCE============================================*/
#reference{
    font-family: 'lintelbold';
    color:#666;
    margin-top:-30px;
    cursor: pointer;
    text-transform: uppercase;
}
.marquee{
    overflow: hidden;
}
#referenceResponsive{display:none;}
/*=====================================================*/
/*=============GESTION DES BLOCS EDITORIAUX============*/
#contentGraphisme{
    color:#054B6C;
}
#contentIllustration{
    color:#379225;
    display:none;
}
#contentMultimedia{
    color:#E87B00;
    display:none;
}
.content{
    font-family: lintelbold;
    margin:30px;
    border-left:solid 5px #EFEFEF;
    padding-left:2.8vw;/*35px;*/
}
.content p{
    position:relative;
    font-size:2.8vw;/*1.8em;*/
    margin-bottom:5px;
}
.content p:before{
    content:'"';
    font-size: 6.5vw;
    position: absolute;
    top:-25px;
    left:-3.5vw;
    color:#EFEFEF;
    font-style: italic;
}
.thinFont{
    font-family:  "lintellight";
}
.right,.left,.rightBis{

    display: inline-block;
    list-style:disc;
    font-family:  "lintellight";
    font-weight: 600;
    font-size:2.3vw;/*1.5em; */
    vertical-align: top;
}
.left{margin-right:50px;}
.rightBis{
    margin-left:50px; 
}
.puce{font-size:1.5vw;margin-right:7px;}
/*.content .right li{
display: inline-block;}
.content .right li:after{
content: '|';
margin-left: 10px;
}
.content .right li:last-child:after{
content:'';
}*/
/*=====================================================*/
/*DESIGN NAVRESPONSIVE=================================*/
#navResponsive{
    display:none;
    margin:0;
}
#navResponsive ul{


}
#navResponsive ul li{
    flex-grow: 1;
    background-color: #FFF;
    border-bottom: solid 1px #666;
    cursor:pointer;
    transition:0.5s;
    display: flex;
    line-height: 35px;
}
#navResponsive ul li a{
    font-family: 'lintelbold';
    text-decoration: none;
    font-size:1.2em;
    display: block;
    color:#87888A;
    margin:auto;
    text-align: center;
    width:100%;
    height:100%;
}
#responsiveGraphisme,#responsiveMultimedia,#responsiveIllustration{background: #FFF;}
#responsiveGraphisme:hover{
    background:#054B6C;
    color:white;
}

#responsiveMultimedia:hover{background:#E87B00;color:white;}
#responsiveIllustration:hover{background:#379225;color:white;}
#logoRespo{
    display:none;
}
/*MEDIA QUERIES============================================*/
@media handheld { 
   /* #audio{display: none;}*/
}
@media screen and (max-width:768px){
    /*body{-webkit-tap-highlight-color: rgba(0,0,0,0);overflow-y:auto;}*/
    #audio{
        top:12px;
    }
    .titreAudio{
        font-size:0.6em;
    }
    #logoRespo{
        display:block;
        text-align: center;
        margin-top:90px;/*INIT60px;*/
    }
    #logoRespo img{ max-width: 100%;padding-left:20px;}
    #navMain{display:none;}
    #reference{opacity:0;}
    #navResponsive{
        display: flex;
        flex-flow: column wrap;
        justify-content: flex-start;
        align-items: stretch;
        margin-bottom: 25px;
    }
    #navLegale{top:50px;/*INIT10px;*/}
    #slideshow{
        position: inherit;
        height:225px;
        background-size: auto 225px;
        top:200px;
    }
    #reference{
        font-family: 'lintelbold';
        color:#666;
        /*margin-top:-30px;*/
        cursor: pointer;
    }
    .content{border-left:none;}
    .content p{
        font-size:1.3em;/*1.8em;*/
    }
    .right,.left,.rightBis{
        /* display: block;*/
        font-size:1.2em;/*1.8em;*/
    }

    .puce{font-size:0.8em;}
    .content p:before{
        content:none;
    }
    aside{
        width:100%;
        height:1000px;
    }
    aside h2{
        font-size:1.5em;
        text-align: right;
    }
    aside p{
        text-align: right;
        font-size:1em;
    }
    #textPropos>figure{width:100px;float:left;margin-right: 14px;margin-top: -14px}
}
@media screen and (max-width:600px){
    .right,.left,.rightBis{
        display: block;
    }
    .rightBis{margin-left:0;}
}
@media screen and (max-width:480px){
    /*body{-webkit-tap-highlight-color: rgba(0,0,0,0);overflow-y:auto;}*/
    #audio{
      /*  display:none;*/
        margin-bottom:50px;
    }
}