/**
 * @license
 * MyFonts Webfont Build ID 3249208, 2016-07-12T15:52:44-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: MistralD by URW++
 * URL: http://www.myfonts.com/fonts/urw/mistral/d/
 * Copyright: Copyright 2010 URW++ Design & Development Hamburg
 * Licensed pageviews: 10,000
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3249208
 * 
 * © 2016 MyFonts Inc
*/
@import url("//hello.myfonts.net/count/319438");

@font-face {
    font-family: 'MistralD';
    src: url('../fonts/webfonts/319438_0_0.eot');
    src: url('../fonts/webfonts/319438_0_0.eot?#iefix') format('embedded-opentype'),
         url('../fonts/webfonts/319438_0_0.woff2') format('woff2'),
         url('../fonts/webfonts/319438_0_0.woff') format('woff'),
         url('../fonts/webfonts/319438_0_0.ttf') format('truetype');
}
/*couleurs
affiches: #368da6
animations: #176294
editions: #008472
logos: #993315
apropos: #FFD34F
web: #267C8C
illustrations: #648187
*/
/*------------------------------------------------- Preload ------------------*/

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(../img/Preloader_1.gif) center no-repeat #fff;
}

/*-------------------------------------------------  General  ----------------*/
body {
  font-size: 26px;
}
section {
    padding: 50px 0;
}
.carousel-control.right, .carousel-control.left {
  background-image:none;
}
.glyphicon.glyphicon-chevron-right, .glyphicon.glyphicon-chevron-left{
   color:black;
}
.barre {
  border-bottom:1px solid #eee;
}
/* back to top */
.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(232, 98, 86, 0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}
/*-------------------------------------------------  nav  --------------------*/
.navbar-brand {
  padding-top: 0;
}
.navbar-brand img {
  width: 80px; 
}
.nav {
  font-family: "MistralD";
  font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  font-size:30px;
}
.nav > li > a {
  padding: 20px;
}

li.affiches.active > a, li.affiches.active > a:hover, li.affiches.active > a:focus{
  background-color: #368da6;
}
li.logos.active > a, li.logos.active > a:hover, li.logos.active > a:focus{
  background-color: #993315;
}
li.animations.active > a, li.animations.active > a:hover, li.animations.active > a:focus{
 background-color: #176294;  
}
li.web.active > a, li.web.active > a:hover, li.web.active > a:focus{
  background-color: #267C8C;
}
li.editions.active > a, li.editions.active > a:hover, li.editions.active > a:focus{
  background-color: #008472;
}
li.illustrations.active > a, li.illustrations.active > a:hover, li.illustrations.active > a:focus{
  background-color: #648187;
}
li.apropos.active > a, li.apropos.active > a:hover, li.apropos.active > a:focus{
  background-color: #FFD34F;
}

/* ----------------------------------------------------  accueil--------------*/
.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    height:auto;
    padding-bottom: 100%;
    vertical-align: middle;
    overflow: hidden;
    margin-top: 50%;

}
.svg-content {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

#path5793 {
    fill:#368da6;  
}
#path5791 {
    fill:#176294;
}
#path5789 {
    fill:#993315;
}
#path5787 {
    fill:#ffd34f;
}
#path5785 {
    fill:#008472;
}
#path5783 {
    fill:#267c8c;
}
#path5781 {
    fill:#648187;
}
.accueil a {
    font-family: 'MistralD';
    fill: black;
    font-size: 30px;
    cursor:pointer;
    cursor: hand;
    font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a:hover {
    fill:white;
    text-decoration: none;    
}
@media only screen and (min-width : 992px) {
        .svg-container{
           margin-top: 0px; 
        }
    }

/*----------------------------------------------  affiches  ------------------*/
.illust a:hover,.illust a:focus {
  text-decoration:none;
}
img {
  margin-bottom:9px;
}

/*------------------------------------------- logos id visuelles -------------*/
/* effet shadow sur carte de visite */
.effect6
{
    position:relative;       
        box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
  content:"";
    position:absolute; 
    z-index:-1;
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    border-radius:100px / 10px;
}
/*----------------------------------------------  editions  ------------------*/
.portfolio-item {
  margin-bottom: 25px;
}
.portfolio-raw {
  margin-top: 25px;
}
/*----------------------------------------------  a propos  ------------------*/
#apropos .cv{
  max-width: 900px;
}
#apropos .cv img{
  width:100%;
}
/*------------------------------------------  footer  ------------------------*/
footer {
  color: white;
  font-size: 12px;
}
.footer-above {
  background-color: #205463;
}
.footer-below {
  background-color: #153842;
  }  
  
.carousel-inner > .item > img {
    margin: 0 auto;
}