/* ---------------------*/
/*Polices personnalisées*/
/* -------------------- */
@font-face
{
    font-family: 'BallparkWeiner';
    src: url('../fonts/ballpark.eot');
    src: url('../fonts/ballpark.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ballpark.woff') format('woff'),
         url('../fonts/ballpark.ttf') format('truetype'),
         url('../fonts/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face
{
    font-family: 'Dayrom';
    src: url('../fonts/dayrom.eot');
    src: url('../fonts/dayrom.eot?#iefix') format('embedded-opentype'),
         url('../fonts/dayrom.woff') format('woff'),
         url('../fonts/dayrom.ttf') format('truetype'),
         url('../fonts/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face
{
    font-family: "brad";
    src: url("../fonts/brad.ttf");
}
@font-face
{
    font-family: "veteran";
    src: url("../fonts/veteran.ttf");
}
@font-face{
  font-family:'FontAwesome';
  src:url('../fonts/fontawesome-webfont.eot?v=3.0.1');
  src:url('../fonts/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
  url('../fonts/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  url('../fonts/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal }

/* ------------------ */
/* CORPS DU SITE      */
/* ------------------ */
html {
	font-size:100%;
	margin:0;
	padding:0;
	}

body {
    background-color: #ffffff; /*#222222;*/ 
    color:#3c3c3c;
    font-size: small;
    font-family: verdana, "times new roman", 'Trebuchet MS', Arial, sans-serif;
    line-height: 25px;
    text-align: justify;
    background-attachment:fixed;
    font-size: 14px;
}

a {
    color: #028;
}


.panel {
    background-color: #fff;
    border-radius: 8px;
    padding-bottom: 5px;
}
.container{
    background-color: #fff;
    margin-top: 0px;
    padding-top: 0px;
    vertical-align: top;
  /*  width: 90%;*/
}
.container-fluid{
  padding: 0px;
}

h1 {
    text-shadow: 4px 4px 5px #777;
    color: #449;
}

/* ----------------------------------------- */
/* -- MENU HORIZONTAL DEROULANT       ------ */
/* ----------------------------------------- */
 .navbar {
      margin-bottom: 0;
      background-color: #0190CF;
      z-index: 10;
      border: 0;
      font-size: 12px !important;
      line-height: 1.42857143 !important;
      letter-spacing: 1px;
      border-radius: 0;
      font-family: verdana, sans-serif;
  }
  .navbar li a, .navbar .navbar-brand {
      color: #fff !important;
  }
  .navbar-nav li a:hover, .navbar-nav li.active a {
      color: #255FE5 !important;
      background-color: #ccc !important;
  }
  .navbar-default .navbar-toggle {
      border-color: transparent;
      color: #fff !important;
  }

.glyphicon-chevron-up{
  background-color: #222;
}


.navbar-default {
    text-align:right; 
    border:0px; 
    background-color: #0190CF;
    margin-right: 0px;
    padding-right: 10px;
}

.nav > li > a:hover, .nav > li > a:focus {
    background-color: #615A32;
}

.panel-default > .panel-heading, .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    color: #048;
    background-color: #abc;
    border-radius: 8px;
}
/* gestion de dropdown */
.dropbtn {
    color: white;
    padding: 14px;
    font-size: 14px;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown:hover .dropdown-menu {
    display: block;
    background-color: #999;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* ----------------------------------------- */
/* --                HEADER           ------ */
/* ----------------------------------------- */
.header{
  background-color: #0190CF;
  height: 90px;
  line-height: 70px;
  color: #7D0231;
}
.header2{
  background-color: #7D0231;
  height: 40px;
  line-height: 20px;
  color: #ffffff;
}
.logo{
  color: #ffffff;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  float: left;
  
}
.logo img{
  margin: 10px;
  float: left;
  max-height: 100%;
  position: absolute;
  z-index: 20;
}

/* ----------------------------------------- */
/* --                BANNIERE         ------ */
/* ----------------------------------------- */
.banner{
  width: 100%;
  max-width: 100%;
}
.ban{
  width: 100%;
  max-width: 100%;
  position: relative;
}
.ban img{
  width: 100%;
  max-width: 100%;
}
.inner-banner{
  position: absolute;
  top:40%;
  width: 100%;
  text-align: center;
}
.inner-banner h1 {
  color: #7D0231;
  font-family: veteran;
  font-weight: bold;
  font-size: 60px;
  text-shadow:1px 1px 2px #000000;
}
.inner-banner .btn-custom{
  background-color: #4A86CE;
  color: #ffffff;
}
.inner-banner .btn-custom:hover{
  background-color: #2C3E50;
}

/* ----------------------------------- */
/* ---------- RESEAUX SOCIAUX--------- */
/* ----------------------------------- */

@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}

.icon-bar {
  position: fixed;
  top: 50%;
  z-index: 1;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bar a:hover {
    background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

/* ----------------------------------------- */
/* -----    SECTIONS PRINCIPALES      ------ */
/* ----------------------------------------- */

/* Separateur  */
.separator {
  height: 5px;
  width: 10%;
  border: none;
  box-shadow: none;
  background-color: #91CEE1;
  margin: auto;
}
/*article */
article h2{
  background-color:#94d0e3;
  text-shadow: 10px 4px 4px #94d0e3; 
  line-height:40px;
}
/*about */
#about{
  text-align: center;
  padding-top: 5%;
}
.about article{
  margin-top: 5%;
}
.about article h2 {
  text-align: center;
  margin-top: 5%;
  margin-bottom: 5%;
}
.about .btn-custom{
  background-color: #4A86CE;
  color: #ffffff;
}
.about .btn-custom:hover{
  background-color: #2C3E50;
}

 /* Zone clients */
 .clients {
  background-color: #eeeeee;
  margin-top: 5%;
 }
 #clients {
  text-align: center;
 }

 .clients article h2 {
  text-align: center;
}
 .clients .item-folio{
  padding-top: 2%;
  margin-top: 5%;
  margin-bottom: 5%;
  height: 200px;
  background-color: #222222;
 }
 .leitmotiv .valeur{
  margin-top: 10px;
  
 }
 .leitmotiv h2{
    background-color:#94d0e3;
    line-height:40px;
    margin-top:0px;
    text-align:center;
 }

  .valeur h2{
    background-color:#94d0e3;
    line-height:40px;
    margin-top:0px;
    text-align:center;
 }
 .valeur img{
  float: right;
 }

 /* ----------------------------------------------------- */
/* ----------------- TEXTE DEFILANT---------------------- */
/* ----------------------------------------------------- */
/* Texte défilant */

.defileParent {
  display: block;
  margin: 3em auto;
  overflow: hidden;
  position: relative;
  table-layout: fixed;
  width: 500px;
}
.defile {
  display:block;
  -webkit-animation:linear marqueelike 20s infinite ;
  -moz-animation:linear marqueelike 20s infinite ;
  -o-animation:linear marqueelike 20s infinite ;
  -ms-animation:linear marqueelike 20s infinite ;
  animation:linear marqueelike 20s infinite ;
  margin-left:-100%;
  padding:0 5px;
  text-align:left;
  height:25px;
  font-size: 18px;
  font-style: italic;
  color: #4A86CE;
}


.defile:after {
  content:attr(data-text);
  position:absolute;
  white-space:nowrap;
  padding-left:10px;
}

@-webkit-keyframes marqueelike {
  0%, 100% {margin-left:0;}
  99.99% {margin-left:-100%;}
 }
@-moz-keyframes marqueelike {
  0%, 100% {margin-left:0;}
  99.99% {margin-left:-100%;}
 }
@-o-keyframes marqueelike {
  0%, 100% {margin-left:0;}
  99.99% {margin-left:-100%;}
 }
@-ms-keyframes marqueelike {
  0%, 100% {margin-left:0;}
  99.99% {margin-left:-100%;}
 }
@keyframes marqueelike {
  0%, 100% {margin-left:0;}
  99.99% {margin-left:-100%;}
 }

@media only screen and (max-width: 860px) {
.defileParent {
  display: block;
  margin: 3em auto;
  overflow: hidden;
  position: relative;
  table-layout: fixed;
  width: 100%;
}

.defile {
  display:block;
  -webkit-animation:linear marqueelike 15s infinite ;
  -moz-animation:linear marqueelike 15s infinite ;
  -o-animation:linear marqueelike 15s infinite ;
  -ms-animation:linear marqueelike 15s infinite ;
  animation:linear marqueelike 15s infinite ;
  margin-left:-100%;
  padding:0 5px;
  text-align:left;
  height:25px;
}
}

/* The grid: Four equal columns that floats next to each other */
.column {
    float: left;
    width: 25%;
    padding: 10px;
}

/* Style the images inside the grid */
.column img {
    opacity: 0.8; 
    cursor: pointer; 
}

.column img:hover {
    opacity: 1;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* The expanding image container */
.container-img {
    position: relative;
    display: none;
}

/* Expanding image text */
#imgtext {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 35px;
    cursor: pointer;
}

/* ----------------------------------------------------- */
/* ----------------- PIED DE PAGE ---------------------- */
/* ----------------------------------------------------- */

.footer a{
    color: #9acedd;
    text-decoration: none;
}

.footer {
   left: 0;
   bottom: 0;
   width: 100%;
   color: white;
   text-align: center;
}

@media screen and (max-width:725px){
    nav ul li{
        width: 100%;
        box-sizing: border-box ;
        text-align: left;
        border-bottom: 1px solid #d5d5d5;
        padding: 10px;
    }
}