/* Style Global */
            
body {
 background: #ffffff;
 margin: 0;
 height: 100%;
 color: #384452;
 font-family: sans-serif;
 font-weight: 400;
}

h1 {
 font-family: 'Roboto slab', sans-serif;
 font-weight: 400;
 font-size: 20px;
 text-align: left;
 color: #000000;
 letter-spacing: 2px;
 line-height: 20px;

}

h2, h3, H5, H6 {
 font-family: 'Roboto slab', sans-serif;
 font-weight: 700;
 text-align: center;
}

h4 {
 font-family: 'Roboto slab', sans-serif;
 font-weight: light;
 font-weight: 15px;
}

em {
 font-weight: 700;
 font-style: normal;
}
    
p {
 padding: 0;
 margin-bottom: 12px;
 font-family: 'Roboto slab', sans-serif;
 font-weight: 100;
 font-size: 14px;
 line-height: 24px;
 color: #384452;
 margin-top: 10px;
}
            
img {
 height: auto;
 max-width: 100%;
}

/*img {
 max-height : 400px ;
 max-width : 100% ;
}*/
    
a {
 padding: 0;
 margin: 0;
 text-decoration: none;
 -webkit-transition: background-color .4s linear, color .4s linear;
 -moz-transition: background-color .4s linear, color .4s linear;
 -o-transition: background-color .4s linear, color .4s linear;
 -ms-transition: background-color .4s linear, color .4s linear;
 transition: background-color .4s linear, color .4s linear;
}

a:hover,
a:focus {
 text-decoration: none;
 color: rgba(252, 197, 198, 0.87);
}
            
/*::moz-selection {
 color: #fff;
 text-shadow: none;
 background: #2B2E31;
}
            
::selection {
 color: #fff;
 text-shadow: none;
 background: #2B2E31;
}*/
            
.centered {
 text-align: center;
}


/* Style Navigation */

#logo {
 background-color: transparent;
 border-color: transparent;
 padding-bottom: 0px;
 padding: 0px;
}

.navbar-text {
 padding: 0px;
 font-family: 'Roboto slab', sans-serif;
 font-weight: 200;
 font-size: 14px;
 letter-spacing: 2px;
 line-height: 20px;
 color: #000000;
}
.navbar-text2 {
 padding: 0px;
 font-family: 'Roboto slab', sans-serif;
 font-weight: 200;
 font-size: 11px;
 letter-spacing: 1px;
 line-height: 20px;
 color: #000000;
 line-height: 15px;
 color: #000000;
}


.navbar {
 min-height: 90px;
 padding-top: 10px;
 margin-bottom: 0px;
 margin-left: -5px;
}
            
.navbar-brand {
 font-family: 'Roboto slab', sans-serif;
 font-weight: regular;
 font-size: 100;
 letter-spacing: 0.1em;
}


.navbar-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: 0px;
  margin-left: 0px;
}

        
.navbar-header .navbar-brand {
 color: #000000;
}
            
.navbar-default .navbar-nav > li > a:hover {
 color: rgba(172, 186, 191, 0.82);
}
            
/*.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
 color: rgba(172, 186, 191, 0.82);
 background: transparent;
}*/
            
.navbar-default {
 background-image: linear-gradient(to right, #ffffff, #f0f0f0f0);
 border-color: transparent;
 padding-left: 0px;
}

.inline-form input {
  display: inline-block;
  width: 100px;
}



/* Style Mapping */

.adress {
 font-family: 'Roboto slab', sans-serif;
 font-weight: 200;
 font-size: 14px;
 letter-spacing: 2px;
 line-height: 20px;
 color: #000000;
 margin-top: 10px;
 padding-bottom: 0px;
}


.map {
 max-height : 400px ;
 max-width : 100% ;
}

#mapping {
 padding-top: 0px;
 background: #F2F2F2;
}


/* ------------------------------------Attention à verifier*/
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}

.svg-content {
display: inline-block;
width: 100%;
max-height: 400px;
top: 0;
left: 0;
}

path {
	transition: .6s fill;
	fill: #CCCCCC;
}

path:hover {
	fill: #DC5C5D;
}

/*------------------------------------Attention à verifier https://la-cascade.io/rendre-svg-responsif/ */ 




/* Style Battle Tweet */

#battletweet {
 background: #ffffff;
 padding: 0px 0px 0px 0px;
 text-align: left;
}


/* Style essai1 */

#essai1 {
 background: #ffffff;
 padding: 0px 0 30px 0;
 /*padding: 40px 80px 60px 80px;*/
 text-align: left;
}


.containerimage {
}

.vignette {
  display: block;
  width: 100%;
  height: auto;
}
.mouseoverimage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #ffffff;
}

.container:hover .mouseoverimage {
  opacity: 0.7;
}

.legend {
 font-family: 'Roboto slab', sans-serif;
 font-weight: 200;
 font-size: 14px;
 letter-spacing: 2px;
 line-height: 20px;
 color: #000000;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}



/* galeries */


.grid {
  max-width: 69em;
  list-style: none;
  margin: 30px auto;
  padding: 0;
}

.grid li {
  display: block;
  float: left;
  padding: 10px;
  width: 33%;
  opacity: 0;
}
/* galeries

  padding-bottom: 10px;
  padding-right: 10px;
galeries */

.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
  opacity: 1;
}

.grid li a,
.grid li img {
  outline: none;
  border: none;
  display: block;
  max-width: 100%;
}

/* Effect 1: opacity */
.grid.effect-1 li.animate {
  -webkit-animation: fadeIn 0.65s ease forwards;
  animation: fadeIn 0.65s ease forwards;
}

@-webkit-keyframes fadeIn {
  0% { }
  100% { opacity: 1; }
}

@keyframes fadeIn {
  0% { }
  100% { opacity: 1; }
}

/* Effect 2: Move Up */
.grid.effect-2 li.animate {
  -webkit-transform: translateY(200px);
  transform: translateY(200px);
  -webkit-animation: moveUp 0.65s ease forwards;
  animation: moveUp 0.65s ease forwards;
}

@-webkit-keyframes moveUp {
  0% { }
  100% { -webkit-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
  0% { }
  100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

/* Effect 3: Scale up */
.grid.effect-3 li.animate {
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
  -webkit-animation: scaleUp 0.65s ease-in-out forwards;
  animation: scaleUp 0.65s ease-in-out forwards;
}

@-webkit-keyframes scaleUp {
  0% { }
  100% { -webkit-transform: scale(1); opacity: 1; }
}

@keyframes scaleUp {
  0% { }
  100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

/* Effect 4: fall perspective */
.grid.effect-4 {
  -webkit-perspective: 1300px;
  perspective: 1300px;
}

.grid.effect-4 li.animate {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
  transform: translateZ(400px) translateY(300px) rotateX(-90deg);
  -webkit-animation: fallPerspective .8s ease-in-out forwards;
  animation: fallPerspective .8s ease-in-out forwards;
}

@-webkit-keyframes fallPerspective {
  0% { }
  100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

@keyframes fallPerspective {
  0% { }
  100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

/* Effect 5: fly (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-5 {
  -webkit-perspective: 1300px;
  perspective: 1300px;
}

.grid.effect-5 li.animate {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50% -300px;
  transform-origin: 50% 50% -300px;
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
  -webkit-animation: fly .8s ease-in-out forwards;
  animation: fly .8s ease-in-out forwards;
}

@-webkit-keyframes fly {
  0% { }
  100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@keyframes fly {
  0% { }
  100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
}

/* Effect 6: flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-6 {
  -webkit-perspective: 1300px;
  perspective: 1300px;
}

.grid.effect-6 li.animate {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-transform: rotateX(-80deg);
  transform: rotateX(-80deg);
  -webkit-animation: flip .8s ease-in-out forwards;
  animation: flip .8s ease-in-out forwards;
}

@-webkit-keyframes flip {
  0% { }
  100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@keyframes flip {
  0% { }
  100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
}

/* Effect 7: helix (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-7 {
  -webkit-perspective: 1300px;
  perspective: 1300px;
}

.grid.effect-7 li.animate {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-animation: helix .8s ease-in-out forwards;
  animation: helix .8s ease-in-out forwards;
}

@-webkit-keyframes helix {
  0% { }
  100% { -webkit-transform: rotateY(0deg); opacity: 1; }
}

@keyframes helix {
  0% { }
  100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }
}

/* Effect 8:  */
.grid.effect-8 {
  -webkit-perspective: 1300px;
  perspective: 1300px;
}

.grid.effect-8 li.animate {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: scale(0.4);
  transform: scale(0.4);
  -webkit-animation: popUp .8s ease-in forwards;
  animation: popUp .8s ease-in forwards;
}

@-webkit-keyframes popUp {
  0% { }
  70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }
  100% { -webkit-transform: scale(1); opacity: 1; }
}

@keyframes popUp {
  0% { }
  70% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

@media screen and (max-width: 900px) {
  .grid li {
    width: 50%;
  }
}

@media screen and (max-width: 400px) {
  .grid li {
    width: 100%;
  }
}







/* Style Statistics */

#statistics {
 background: #333333;
 padding: 40px 0 60px 0;
 text-align: center;
 color: #ffffff;
}

.pwhite {
 color: #ffffff;
}



/* Footer */

.footer {
 background-image: linear-gradient(to right, #f0f0f0f0, #f0f0f0f0);
 border-color: transparent; 
}

.alignright {
 text-align: right;
}


/* Style bouton */
.btn-theme {
 color: #fff;
 background-color: #384452;
 border-color: #384452;
 margin: 4px;
}
.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-theme.active,
.open .dropdown-toggle.btn-theme {
 color: #fff;
 background-color: #FCAC45;
 border-color: #ffffff;
}