/* Generated by less 1.7.0 */
/*
	Theme Name: 	Bernard Mabille
	Theme URI: 	http://bernard-mabille.com
	Description: 	Site officiel de Bernard Mabille
	Version: 	2.0
	Author: 	William Abisror
	Author URI: 	
	Tags: HTML5, CSS3
*/
/*------------------------------------*\
    VARIABLES & MIXINS
\*------------------------------------*/
/*------------------------------------*\
    PRINCIPAL
\*------------------------------------*/
/* Global box-sizing */
*,
*:after,
*:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html {
  font-size: 62.5%;
}
body {
  font: 400 11px/1.4 'Source Sans Pro', Helvetica, Arial, sans-serif;
  color: #444;
}
/* Clear */
.clear {
  *zoom: 1;
}
.clear:after {
  clear: both;
}
.clear:after,
.clear:before {
  content: ' ';
  display: table;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
a {
  color: #444;
  text-decoration: none;
}
a:hover {
  color: #444;
}
a:focus {
  outline: 0;
}
a:hover,
a:active {
  outline: 0;
}
input:focus {
  outline: 0;
  border: 1px solid #04A4CC;
}
p {
  font-size: 1.5em;
}
h3 {
  font-size: 2em;
}
a.bouton {
  color: #FFF !important;
  background-color: #8D8D8D;
  padding: 2px 7px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.3em;
  border-radius: 2px;
  -webkit-transition: background 0.2s ease-in-out;
  -moz-transition: background 0.2s ease-in-out;
  -o-transition: background 0.2s ease-in-out;
  -ms-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}
a.bouton:hover {
  background-color: #d10100;
}
/* Responsive iframe */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* #Forms
================================================== */
form {
  margin-bottom: 20px;
}
form span {
  color: #d10100;
}
form p {
  margin: 0;
}
form .notice {
  font-size: 1.3em;
  margin-bottom: 10px;
}
fieldset {
  margin-bottom: 20px;
}
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  border: 1px solid #ccc;
  padding: 6px 4px;
  outline: none;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #777;
  margin: 0;
  width: 370px;
  max-width: 100%;
  margin-bottom: 20px;
  margin-top: 5px;
  background: #fff;
}
input[type="password"] {
  font-size: 1.3em;
  letter-spacing: 2px;
  padding-left: 10px;
}
select {
  padding: 0;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
  border: 1px solid #aaa;
  color: #444;
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
textarea {
  min-height: 60px;
  width: 500px;
  max-width: 100%;
}
label,
legend {
  display: block;
  font-weight: bold;
  font-size: 13px;
}
select {
  width: 250px;
}
input[type="checkbox"] {
  display: inline;
}
label span,
legend span {
  font-weight: normal;
  font-size: 13px;
  color: #444;
}
/* #Buttons
================================================== */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  background: #eee;
  /* Old browsers */
  background: #eeeeee -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  /* FF3.6+ */
  background: #eeeeee -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.2)));
  /* Chrome,Safari4+ */
  background: #eeeeee -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  /* Chrome10+,Safari5.1+ */
  background: #eeeeee -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  /* Opera11.10+ */
  background: #eeeeee -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  /* IE10+ */
  background: #eeeeee linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  /* W3C */
  border: 1px solid #aaa;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  color: #444;
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 1px rgba(255, 255, 255, 0.75);
  cursor: pointer;
  margin-bottom: 20px;
  line-height: normal;
  padding: 5px 10px;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  color: #222;
  background: #ddd;
  /* Old browsers */
  background: #dddddd -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
  /* FF3.6+ */
  background: #dddddd -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.3)));
  /* Chrome,Safari4+ */
  background: #dddddd -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
  /* Chrome10+,Safari5.1+ */
  background: #dddddd -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
  /* Opera11.10+ */
  background: #dddddd -ms-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
  /* IE10+ */
  background: #dddddd linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
  /* W3C */
  border: 1px solid #888;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
}
.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
  border: 1px solid #666;
  background: #ccc;
  /* Old browsers */
  background: #cccccc -moz-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
  /* FF3.6+ */
  background: #cccccc -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.35)), color-stop(100%, rgba(10, 10, 10, 0.4)));
  /* Chrome,Safari4+ */
  background: #cccccc -webkit-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
  /* Chrome10+,Safari5.1+ */
  background: #cccccc -o-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
  /* Opera11.10+ */
  background: #cccccc -ms-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
  /* IE10+ */
  background: #cccccc linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%);
  /* W3C */
}
.button.full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center;
}
/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/*------------------------------------*\
    SKELETON
\*------------------------------------*/
/* #Base 960 Grid  */
.container {
  position: relative;
  width: 960px;
  margin: 0 auto;
  padding: 0;
}
.container .column,
.container .columns {
  float: left;
  display: inline;
  margin-left: 10px;
  margin-right: 10px;
}
.row {
  margin-bottom: 20px;
}
/* Nested Column Classes */
.column.alpha,
.columns.alpha {
  margin-left: 0;
}
.column.omega,
.columns.omega {
  margin-right: 0;
}
/* Base Grid */
.container .one.column,
.container .one.columns {
  width: 40px;
}
.container .two.columns {
  width: 100px;
}
.container .three.columns {
  width: 160px;
}
.container .four.columns {
  width: 220px;
}
.container .five.columns {
  width: 280px;
}
.container .six.columns {
  width: 340px;
}
.container .seven.columns {
  width: 400px;
}
.container .eight.columns {
  width: 460px;
}
.container .nine.columns {
  width: 520px;
}
.container .ten.columns {
  width: 580px;
}
.container .eleven.columns {
  width: 640px;
}
.container .twelve.columns {
  width: 700px;
}
.container .thirteen.columns {
  width: 760px;
}
.container .fourteen.columns {
  width: 820px;
}
.container .fifteen.columns {
  width: 880px;
}
.container .sixteen.columns {
  width: 940px;
}
.container .one-third.column {
  width: 300px;
}
.container .two-thirds.column {
  width: 620px;
}
/* Offsets */
.container .offset-by-one {
  padding-left: 60px;
}
.container .offset-by-two {
  padding-left: 120px;
}
.container .offset-by-three {
  padding-left: 180px;
}
.container .offset-by-four {
  padding-left: 240px;
}
.container .offset-by-five {
  padding-left: 300px;
}
.container .offset-by-six {
  padding-left: 360px;
}
.container .offset-by-seven {
  padding-left: 420px;
}
.container .offset-by-eight {
  padding-left: 480px;
}
.container .offset-by-nine {
  padding-left: 540px;
}
.container .offset-by-ten {
  padding-left: 600px;
}
.container .offset-by-eleven {
  padding-left: 660px;
}
.container .offset-by-twelve {
  padding-left: 720px;
}
.container .offset-by-thirteen {
  padding-left: 780px;
}
.container .offset-by-fourteen {
  padding-left: 840px;
}
.container .offset-by-fifteen {
  padding-left: 900px;
}
/* #Tablet (Portrait) */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .container {
    width: 768px;
  }
  .container .column,
  .container .columns {
    margin-left: 10px;
    margin-right: 10px;
  }
  .column.alpha,
  .columns.alpha {
    margin-left: 0;
    margin-right: 10px;
  }
  .column.omega,
  .columns.omega {
    margin-right: 0;
    margin-left: 10px;
  }
  .alpha.omega {
    margin-left: 0;
    margin-right: 0;
  }
  .container .one.column,
  .container .one.columns {
    width: 28px;
  }
  .container .two.columns {
    width: 76px;
  }
  .container .three.columns {
    width: 124px;
  }
  .container .four.columns {
    width: 172px;
  }
  .container .five.columns {
    width: 220px;
  }
  .container .six.columns {
    width: 268px;
  }
  .container .seven.columns {
    width: 316px;
  }
  .container .eight.columns {
    width: 364px;
  }
  .container .nine.columns {
    width: 412px;
  }
  .container .ten.columns {
    width: 460px;
  }
  .container .eleven.columns {
    width: 508px;
  }
  .container .twelve.columns {
    width: 556px;
  }
  .container .thirteen.columns {
    width: 604px;
  }
  .container .fourteen.columns {
    width: 652px;
  }
  .container .fifteen.columns {
    width: 700px;
  }
  .container .sixteen.columns {
    width: 748px;
  }
  .container .one-third.column {
    width: 236px;
  }
  .container .two-thirds.column {
    width: 492px;
  }
  /* Offsets */
  .container .offset-by-one {
    padding-left: 48px;
  }
  .container .offset-by-two {
    padding-left: 96px;
  }
  .container .offset-by-three {
    padding-left: 144px;
  }
  .container .offset-by-four {
    padding-left: 192px;
  }
  .container .offset-by-five {
    padding-left: 240px;
  }
  .container .offset-by-six {
    padding-left: 288px;
  }
  .container .offset-by-seven {
    padding-left: 336px;
  }
  .container .offset-by-eight {
    padding-left: 384px;
  }
  .container .offset-by-nine {
    padding-left: 432px;
  }
  .container .offset-by-ten {
    padding-left: 480px;
  }
  .container .offset-by-eleven {
    padding-left: 528px;
  }
  .container .offset-by-twelve {
    padding-left: 576px;
  }
  .container .offset-by-thirteen {
    padding-left: 624px;
  }
  .container .offset-by-fourteen {
    padding-left: 672px;
  }
  .container .offset-by-fifteen {
    padding-left: 720px;
  }
}
/*  #Mobile (Portrait) */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
  .container {
    width: 300px;
  }
  .container .columns,
  .container .column {
    margin: 0;
  }
  .container .one.column,
  .container .one.columns,
  .container .two.columns,
  .container .three.columns,
  .container .four.columns,
  .container .five.columns,
  .container .six.columns,
  .container .seven.columns,
  .container .eight.columns,
  .container .nine.columns,
  .container .ten.columns,
  .container .eleven.columns,
  .container .twelve.columns,
  .container .thirteen.columns,
  .container .fourteen.columns,
  .container .fifteen.columns,
  .container .sixteen.columns,
  .container .one-third.column,
  .container .two-thirds.column {
    width: 300px;
  }
  /* Offsets */
  .container .offset-by-one,
  .container .offset-by-two,
  .container .offset-by-three,
  .container .offset-by-four,
  .container .offset-by-five,
  .container .offset-by-six,
  .container .offset-by-seven,
  .container .offset-by-eight,
  .container .offset-by-nine,
  .container .offset-by-ten,
  .container .offset-by-eleven,
  .container .offset-by-twelve,
  .container .offset-by-thirteen,
  .container .offset-by-fourteen,
  .container .offset-by-fifteen {
    padding-left: 0;
  }
}
/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/
@font-face {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: entypo;
  font-style: normal;
  font-weight: 400;
  src: url(fonts/entypo.eot);
  src: url(fonts/entypoie.eot) format('eot'), url(fonts/entypo.woff) format('woff'), url(fonts/entypo.ttf) format('truetype'), url(fonts/entypo.svg) format('svg');
}
.entypo {
  font-family: 'Entypo';
}
/*------------------------------------*\
    ANIMATIONS
\*------------------------------------*/
@-moz-keyframes bounceOut {
  0% {
    top: -100px;
    -moz-transform: rotate(0deg);
  }
  25% {
    top: -95px;
    -moz-transform: rotate(2deg);
  }
  50% {
    top: -105px;
    -moz-transform: rotate(0deg);
  }
  75% {
    top: -95px;
    -moz-transform: rotate(-2deg);
  }
  100% {
    top: -100px;
    -moz-transform: rotate(0deg);
  }
}
@-webkit-keyframes bounceOut {
  0% {
    top: -100px;
    -webkit-transform: rotate(0deg);
  }
  25% {
    top: -95px;
    -webkit-transform: rotate(2deg);
  }
  50% {
    top: -105px;
    -webkit-transform: rotate(0deg);
  }
  75% {
    top: -95px;
    -webkit-transform: rotate(-2deg);
  }
  100% {
    top: -100px;
    -webkit-transform: rotate(0deg);
  }
}
@keyframes bounceOut {
  0% {
    top: -100px;
    transform: rotate(0deg);
  }
  25% {
    top: -95px;
    transform: rotate(2deg);
  }
  50% {
    top: -105px;
    transform: rotate(0deg);
  }
  75% {
    top: -95px;
    transform: rotate(-2deg);
  }
  100% {
    top: -100px;
    transform: rotate(0deg);
  }
}
@-moz-keyframes logoanim {
  0% {
    -moz-transform: translate(0, 0);
  }
  50% {
    -moz-transform: translate(0, -5px);
  }
  100% {
    -moz-transform: translate(0, 0);
  }
}
@-webkit-keyframes logoanim {
  0% {
    -webkit-transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -5px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@keyframes logoanim {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-moz-keyframes sclbtns {
  0% {
    margin-left: -44px;
  }
  100% {
    margin-left: 15px;
  }
}
@-webkit-keyframes sclbtns {
  0% {
    margin-left: -44px;
  }
  100% {
    margin-left: 15px;
  }
}
@keyframes sclbtns {
  0% {
    margin-left: -44px;
  }
  100% {
    margin-left: 15px;
  }
}
@-moz-keyframes sclbtns1 {
  0% {
    margin-left: 15px;
  }
  100% {
    margin-left: -44px;
  }
}
@-webkit-keyframes sclbtns1 {
  0% {
    margin-left: 15px;
  }
  100% {
    margin-left: -44px;
  }
}
@keyframes sclbtns1 {
  0% {
    margin-left: 15px;
  }
  100% {
    margin-left: -44px;
  }
}
/*------------------------------------*\
    TIMELINE CSS
\*------------------------------------*/
.timeline,
.timeline.v1 {
  margin: 0px auto;
  max-width: 800px;
  overflow: hidden;
  height: auto;
  position: relative;
  padding: 0px 0px 60px 0px;
  list-style-type: none;
  background: url(img/line.png) 50% 0 repeat-y;
}
.timeline:before {
  content: '';
  height: 19px;
  width: 19px;
  position: absolute;
  background: #d10100;
  top: 0;
  left: 49%;
  border-radius: 10px;
}
.timeline:after {
  content: '';
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
}
.timeline *,
.timeline *:after,
.timeline:after,
.timeline *:before,
.timeline:before,
.timeline.v1 *,
.timeline.v1 *:after,
.timeline.v1:after,
.timeline.v1 *:before,
.timeline.v1:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.timeline .year,
.timeline.v1 .year {
  background: #505050;
  font-size: 3em;
  max-width: 4em;
  clear: both;
  margin: 1em auto;
  color: white;
  border-radius: 0.3%;
  text-align: center;
  margin-top: 50px;
}
.timeline .year:first-of-type,
.timeline.v1 .year:first-of-type {
  margin-top: 0 !important;
}
.timeline .year + .event,
.timeline.v1 .year + .event {
  margin-top: -1.5em;
}
.timeline .event,
.timeline.v1 .event {
  position: relative;
  float: left;
  clear: left;
  width: 47%;
  margin: 50px 0 10px;
  border-radius: 5px;
  list-style-type: none;
  display: block;
  background: #F6F6F6;
  z-index: 15;
  color: #4d4d4d;
  border: 1px solid #e8e9e8;
  text-decoration: none;
  -webkit-transition: background .15s linear;
  -moz-transition: background .15s linear;
  -ms-transition: background .15s linear;
  -o-transition: background .15s linear;
  transition: background .15s linear;
}
.timeline .event.featured,
.timeline.v1 .event.featured {
  width: 95% !important;
}
.timeline .event.featured:after,
.timeline .event.featured:before,
.timeline.v1 .event.featured:after,
.timeline.v1 .event.featured:before {
  display: none;
}
@media all and (max-width: 767px) {
  .timeline .event,
  .timeline.v1 .event {
    width: 100%;
  }
}
@media all and (min-width: 650px) {
  /* line 124, ../scss/timeline.scss */
  .timeline .event:after,
  .timeline.v1 .event:after {
    display: block;
    content: ' ';
    height: 1px;
    width: 24px;
    position: absolute;
    right: -6.5%;
    top: 1.5em;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #e8e9e8;
  }
  .timeline .event:nth-of-type(2n):after,
  .timeline.v1 .event:nth-of-type(2n):after {
    left: -6.5%;
    top: 35px;
    right: auto;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #e8e9e8;
    border-left: none;
  }
}
.timeline .event.offset-first,
.timeline.v1 .event.offset-first {
  margin-top: -1.5em;
}
.timeline .event img,
.timeline.v1 .event img {
  margin-top: 10px;
  max-width: 100%;
}
.timeline .event:hover,
.timeline.v1 .event:hover {
  background: #f6f6f6;
}
.timeline .event:nth-of-type(2n),
.timeline.v1 .event:nth-of-type(2n) {
  float: right;
  clear: right;
}
.timeline time,
.timeline.v1 time {
  display: block;
  font-weight: bold;
}
.timeline.v2 .year,
.timeline.v1.v2 .year {
  background: white;
  color: #505050;
  border: 2px solid #505050;
}
.timeline.v2 .event,
.timeline.v1.v2 .event {
  border: none;
  background: #FAFAFA;
  border-bottom: 1px solid #cac4c4;
}
.eventdate {
  background-color: #d10100;
  display: block;
  position: absolute;
  padding: 0px 7px;
  color: #FFF;
  font-weight: 700;
  font-size: 1.8em;
  top: -28px;
  letter-spacing: -1px;
  right: 0;
}
.eventimg {
  height: 130px;
  width: 100%;
  background-color: #000;
  border-radius: 4px 0 0 0;
  background-size: cover;
  background-position: center center;
}
.timeline .event p,
.timeline.v1 .event p {
  padding: 0 15px;
  font-size: 1.5em;
  letter-spacing: -1px;
}
.eventbm {
  color: #d10100;
  padding: 3px 10px 6px;
  background-color: #FFF;
  margin-left: 15px;
  margin-right: 50px;
  margin-bottom: 10px;
  -moz-box-shadow: 2px 2px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 2px 2px rgba(0, 0, 0, 0.05);
  font-size: 1.45em;
  position: relative;
  letter-spacing: -1px;
  line-height: 1.2em;
  font-weight: 600;
  display: inline-block;
  text-align: right;
}
.eventbm:after {
  content: "";
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #FFF;
  position: absolute;
  right: -8px;
  top: 6px;
}
.eventbmwrap {
  background: url(img/perso_gris.png) right top no-repeat;
  position: relative;
  padding-top: 15px;
  margin-top: -10px;
  text-align: right;
}
.timeline .event:nth-of-type(2n) .eventbm,
.timeline.v1 .event:nth-of-type(2n) .eventbm {
  margin-left: 50px;
  margin-right: 15px;
  text-align: left;
}
.timeline .event:nth-of-type(2n) .eventbm:after,
.timeline.v1 .event:nth-of-type(2n) .eventbm:after {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #FFF;
  border-left: none;
  left: -8px;
}
.timeline .event:nth-of-type(2n) .eventbmwrap,
.timeline.v1 .event:nth-of-type(2n) .eventbmwrap {
  text-align: left;
  background: url(img/perso_gris.png) left -210px no-repeat;
}
.timeline .event:nth-of-type(2n) .eventimg,
.timeline.v1 .event:nth-of-type(2n) .eventimg {
  border-radius: 0 4px 0 0;
}
.timeline .event:nth-of-type(2n) .eventdate,
.timeline.v1 .event:nth-of-type(2n) .eventdate {
  left: 0;
  right: auto;
}
/* #Clearing */
/* Self Clearing Goodness */
.container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.row:after,
.clearfix:after {
  clear: both;
}
.row,
.clearfix {
  zoom: 1;
}
/* You can also use a <br class="clear" /> to clear columns */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/
.post-edit-link {
  color: #FFF !important;
  background-color: #000;
  font-weight: 700;
  padding: 2px 7px;
  position: fixed;
  top: 70px;
  right: 0;
  z-index: 100;
  display: none;
}
.post-edit-link:hover {
  background-color: #d10100;
}
/* #WRAPPER */
.maincontent {
  background-color: #FFF;
  margin-top: 70px;
}
/* #HEADER */
.header {
  background-image: -webkit-linear-gradient(top, #d10100 0%, #b80100 100%);
  background-image: -moz-linear-gradient(top, #d10100 0%, #b80100 100%);
  background-image: -ms-linear-gradient(top, #d10100 0%, #b80100 100%);
  background-image: linear-gradient(top, #d10100 0%, #b80100 100%);
  height: 70px;
  border-bottom: 1px solid #d10100;
  z-index: 1000;
  position: fixed;
  top: 0;
  overflow: hidden;
  width: 100%;
  -moz-box-shadow: 0 4px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.6s cubic-bezier(0.75, 0, 0.25, 1);
  box-shadow: 0 3px rgba(0, 0, 0, 0.1);
}
body.notop .header {
  top: -10px;
  padding-top: 5px;
}
body.notop .subheader {
  top: 60px;
}
/* #LOGO */
.logo {
  display: inline-block;
}
.logo svg {
  width: 273px;
}
.logo a {
  padding: 12px 0;
  display: block;
  height: 70px;
  background: -webkit-radial-gradient(ellipse farthest-corner, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0) 77.2%) 0 80px no-repeat;
  background: -moz-radial-gradient(ellipse farthest-corner, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0) 77.2%) 0 80px no-repeat;
  background: -ms-radial-gradient(ellipse farthest-corner, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0) 77.2%) 0 80px no-repeat;
  background: radial-gradient(ellipse farthest-corner, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0) 77.2%) 0 80px no-repeat;
  -webkit-transition: background 0.2s ease-in-out;
  -moz-transition: background 0.2s ease-in-out;
  -o-transition: background 0.2s ease-in-out;
  -ms-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}
.logo a:hover {
  background: -webkit-radial-gradient(ellipse farthest-corner, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0) 77.2%) 0 50px no-repeat;
  background: -moz-radial-gradient(ellipse farthest-corner, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0) 77.2%) 0 50px no-repeat;
  background: -ms-radial-gradient(ellipse farthest-corner, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0) 77.2%) 0 50px no-repeat;
  background: radial-gradient(ellipse farthest-corner, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0) 77.2%) 0 50px no-repeat;
}
path.b,
path.e,
path.r,
path.n,
path.a,
path.r2,
path.d,
path.m,
path.a2,
path.b2,
path.i,
path.l,
path.l2,
path.e2 {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
}
.logo:hover path.b {
  -moz-animation: logoanim 200ms ease-in-out;
  -webkit-animation: logoanim 200ms ease-in-out;
  animation: logoanim 200ms ease-in-out;
}
.logo:hover path.e {
  -moz-animation: logoanim 200ms 50ms ease-in-out;
  -webkit-animation: logoanim 200ms 50ms ease-in-out;
  animation: logoanim 200ms 50ms ease-in-out;
}
.logo:hover path.r {
  -moz-animation: logoanim 200ms 100ms ease-in-out;
  -webkit-animation: logoanim 200ms 100ms ease-in-out;
  animation: logoanim 200ms 100ms ease-in-out;
}
.logo:hover path.n {
  -moz-animation: logoanim 200ms 150ms ease-in-out;
  -webkit-animation: logoanim 200ms 150ms ease-in-out;
  animation: logoanim 200ms 150ms ease-in-out;
}
.logo:hover path.a {
  -moz-animation: logoanim 200ms 200ms ease-in-out;
  -webkit-animation: logoanim 200ms 200ms ease-in-out;
  animation: logoanim 200ms 200ms ease-in-out;
}
.logo:hover path.r2 {
  -moz-animation: logoanim 200ms 250ms ease-in-out;
  -webkit-animation: logoanim 200ms 250ms ease-in-out;
  animation: logoanim 200ms 250ms ease-in-out;
}
.logo:hover path.d {
  -moz-animation: logoanim 200ms 300ms ease-in-out;
  -webkit-animation: logoanim 200ms 300ms ease-in-out;
  animation: logoanim 200ms 300ms ease-in-out;
}
.logo:hover path.m {
  -moz-animation: logoanim 200ms 350ms ease-in-out;
  -webkit-animation: logoanim 200ms 350ms ease-in-out;
  animation: logoanim 200ms 350ms ease-in-out;
}
.logo:hover path.a2 {
  -moz-animation: logoanim 200ms 400ms ease-in-out;
  -webkit-animation: logoanim 200ms 400ms ease-in-out;
  animation: logoanim 200ms 400ms ease-in-out;
}
.logo:hover path.b2 {
  -moz-animation: logoanim 200ms 450ms ease-in-out;
  -webkit-animation: logoanim 200ms 450ms ease-in-out;
  animation: logoanim 200ms 450ms ease-in-out;
}
.logo:hover path.i {
  -moz-animation: logoanim 200ms 500ms ease-in-out;
  -webkit-animation: logoanim 200ms 500ms ease-in-out;
  animation: logoanim 200ms 500ms ease-in-out;
}
.logo:hover path.l {
  -moz-animation: logoanim 200ms 550ms ease-in-out;
  -webkit-animation: logoanim 200ms 550ms ease-in-out;
  animation: logoanim 200ms 550ms ease-in-out;
}
.logo:hover path.l2 {
  -moz-animation: logoanim 200ms 600ms ease-in-out;
  -webkit-animation: logoanim 200ms 600ms ease-in-out;
  animation: logoanim 200ms 600ms ease-in-out;
}
.logo:hover path.e2 {
  -moz-animation: logoanim 200ms 650ms ease-in-out;
  -webkit-animation: logoanim 200ms 650ms ease-in-out;
  animation: logoanim 200ms 650ms ease-in-out;
}
/* #NAVIGATION HEADER */
.mainnav {
  float: right;
}
.mainnav ul {
  height: 70px;
  display: table-cell;
  vertical-align: middle;
  padding-left: 0;
}
.mainnav ul li {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin: 0;
}
.mainnav ul li a {
  color: #FFF;
  font-size: 1.7em;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -1px;
  padding: 0px 10px;
  text-align: center;
  transition: all 0.1s ease-in-out;
  border-left: 1px solid rgba(0, 0, 0, 0);
  border-right: 1px solid rgba(0, 0, 0, 0);
  display: block;
}
.mainnav ul li a:hover {
  background-color: #ffffff;
  color: #d10100;
}
.mainnav ul li a:active {
  background-color: rgba(0, 0, 0, 0.35);
}
.mainnav .cadre a {
  border: 2px solid #FFF;
  background: transparent;
  color: #FFF;
  margin-right: 10px;
}
.mainnav .cadre a:hover {
  background-color: #FFF;
  color: #d10100;
}
/* RÉSEAUX #SOCIAUX */
.sclheader ul {
  float: right;
  padding: 7px 0;
}
.sclheader ul li {
  display: inline-block;
  margin-left: 10px;
}
.sclheader a {
  color: #FFF;
  font-size: 1.6em;
  width: 34px;
  height: 34px;
  display: table-cell;
  border: 2px solid #fff;
  border-radius: 17px;
  text-align: center;
  vertical-align: middle;
  line-height: 1em;
  padding-top: 1px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.sclheader a:hover {
  background-color: #FFF;
  color: #d10100;
}
/* MENU #PLUS */
.navmorewrapper {
  float: right;
  margin-left: 15px;
  overflow: hidden;
}
.navmore {
  padding: 0 15px;
  height: 70px;
  background-color: rgba(0, 0, 0, 0.35);
  font-size: 1.7em;
  color: #FFF;
  cursor: pointer;
  text-align: center;
  font-weight: 800;
  letter-spacing: -1px;
  display: block;
  -webkit-transition: all 300ms cubic-bezier(0.75, 0, 0.25, 1);
  -moz-transition: all 300ms cubic-bezier(0.75, 0, 0.25, 1);
  -o-transition: all 300ms cubic-bezier(0.75, 0, 0.25, 1);
  -ms-transition: all 300ms cubic-bezier(0.75, 0, 0.25, 1);
  transition: all 300ms cubic-bezier(0.75, 0, 0.25, 1);
  overflow: hidden;
}
.navmore:hover {
  background-color: #FFF;
  padding-bottom: 4px;
}
.navmore:hover .navmorein1 {
  margin-top: -30px;
}
.navmorein1,
.navmorein2 {
  margin-top: 21px;
  height: 30px;
  display: block;
  -webkit-transition: margin 300ms cubic-bezier(0.75, 0, 0.25, 1);
  -moz-transition: margin 300ms cubic-bezier(0.75, 0, 0.25, 1);
  -o-transition: margin 300ms cubic-bezier(0.75, 0, 0.25, 1);
  -ms-transition: margin 300ms cubic-bezier(0.75, 0, 0.25, 1);
  transition: margin 300ms cubic-bezier(0.75, 0, 0.25, 1);
  padding-right: 16px;
  overflow: hidden;
  position: relative;
}
.navmorein1:after,
.navmorein2:after {
  font-family: 'Entypo';
  font-size: 1.2em;
  position: absolute;
  content: '\E760';
  padding: 0 0 0 4px;
  line-height: 1.3em;
}
.navmorein2 {
  color: #d10100;
}
.subheader {
  background-color: #141414;
  height: 0;
  -webkit-transition: all 600ms cubic-bezier(0.75, 0, 0.25, 1);
  -moz-transition: all 600ms cubic-bezier(0.75, 0, 0.25, 1);
  -o-transition: all 600ms cubic-bezier(0.75, 0, 0.25, 1);
  -ms-transition: all 600ms cubic-bezier(0.75, 0, 0.25, 1);
  transition: all 600ms cubic-bezier(0.75, 0, 0.25, 1);
  overflow: hidden;
  width: 100%;
  position: fixed;
  top: 70px;
  z-index: 999;
  -moz-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.49);
  -webkit-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.49);
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.49);
}
.subheader.expand {
  height: 145px;
}
.subheader .columns {
  margin: 0;
}
.subheader .fst {
  border-left: 1px solid #202020;
}
.subheader .four.columns {
  border-right: 1px solid #202020;
  width: 238px;
}
.subheader h2 {
  text-align: center;
  color: #FFF;
  text-transform: uppercase;
  font-size: 1.7em;
  letter-spacing: -1px;
  font-weight: 900;
  margin: 0;
  padding: 7px 0;
  background-image: -webkit-linear-gradient(top, #2e2e2e 0%, #1e1e1e 100%);
  background-image: -moz-linear-gradient(top, #2e2e2e 0%, #1e1e1e 100%);
  background-image: -ms-linear-gradient(top, #2e2e2e 0%, #1e1e1e 100%);
  background-image: linear-gradient(to bottom, #2e2e2e 0%, #1e1e1e 100%);
  overflow: hidden;
  position: relative;
}
.subheader h2.radio:before,
.subheader h2.theatre:before,
.subheader h2.internet:before,
.subheader h2.contact:before {
  font-family: 'Entypo';
  font-size: 5em;
  position: absolute;
  left: 0;
  overflow: hidden;
  opacity: 0.05;
}
.subheader h2.radio:before {
  content: '\E73A';
  margin: -50px 0px 0px -10px;
}
.subheader h2.theatre:before {
  content: '\1F3AB';
  margin: -50px 0px 0px -20px;
}
.subheader h2.internet:before {
  content: '\E776';
  margin: -40px 0px 0px -20px;
}
.subheader h2.contact:before {
  content: '\2709';
  margin: -50px 0px 0px -30px;
}
.subheader ul {
  padding-left: 0;
  margin: 5px 0;
}
.subheader li {
  list-style: none;
  font-size: 1.6em;
  font-weight: 600;
  line-height: 1.6em;
  text-align: center;
  letter-spacing: -1px;
}
.subheader li a {
  color: #c4c4c4;
  padding: 2px 0 0 12px;
  -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, padding 0.2s ease-in-out;
  -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, padding 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, padding 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, padding 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, padding 0.2s ease-in-out;
  display: block;
}
.subheader li a:hover {
  background-color: #FFF;
  color: #d10100;
  padding: 2px 0 0 20px;
}
.subheader li a:before {
  font-family: 'Entypo';
  content: '\E762';
  margin: 0px 5px 0px -15px;
  font-size: 1.3em;
  position: absolute;
  -webkit-transition: color 0.2s ease-in-out -0.2s;
  -moz-transition: color 0.2s ease-in-out -0.2s;
  -o-transition: color 0.2s ease-in-out -0.2s;
  -ms-transition: color 0.2s ease-in-out -0.2s;
  transition: color 0.2s ease-in-out -0.2s;
}
.subheader li.externe a:after {
  font-family: 'Entypo';
  content: '\E715';
  margin: 0px 0px 0px 8px;
  font-size: 0.9em;
  position: absolute;
  font-weight: 200;
  color: #5e5e5e;
}
/* #FOOTER */
.footer {
  background-color: #F7F7F7;
  padding: 40px 0 20px;
  font-size: 0.9em;
  color: #787878;
  z-index: 2;
  position: relative;
  font-weight: 300;
}
.footer .logo2part path {
  fill: #d10100;
}
.footer .copyright {
  font-weight: 600;
}
.footer .omeg {
  padding-top: 10px;
  padding-right: 120px;
}
.footer .omeg:after {
  content: url('http://www.bernard-mabille.com/wp-content/themes/mabillev2/img/perso.svg');
  position: absolute;
  right: 10px;
  top: -100px;
  z-index: 2;
}
.footer .omeg:hover:after {
  -moz-animation: bounceOut .4s linear;
  -webkit-animation: bounceOut .4s linear;
  animation: bounceOut .4s linear;
}
.footer ul.menu {
  float: right;
  padding: 0 ;
}
.footer .menu li {
  display: inline-block;
  text-transform: uppercase;
  font-weight: 700;
  margin-left: 5px;
  font-size: 1.9em;
  letter-spacing: -1px;
}
.footer .menu a {
  color: #a3a3a3;
  padding: 0 5px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.footer .menu a:hover {
  background-color: #a2a3a2;
  color: #FFF;
}
.footer .sclbtns {
  float: right;
  text-align: right;
  width: 184px;
}
.footer .sclbtns iframe {
  margin-bottom: 5px;
}
/*------------------------------------*\
    PROCHAINES #DATES BANDEAU
\*------------------------------------*/
.topfooter {
  background: -webkit-linear-gradient(left, #b80100 49.9%, #d10100 50%) #d10100;
  background: -moz-linear-gradient(left, #b80100 49.9%, #d10100 50%) #d10100;
  background: -ms-linear-gradient(left, #b80100 49.9%, #d10100 50%) #d10100;
  background: linear-gradient(to right, #b80100 49.9%, #d10100 50%) #d10100;
  height: 80px;
  color: #FFF;
  position: relative;
  z-index: 2;
}
.topfooter a {
  color: #FFF;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.topfooter a:hover {
  background-color: #FFF;
  color: #d10100;
}
.topfooter .container {
  overflow: hidden;
}
.topfooter h1 {
  color: #FFF;
  font-weight: 300;
  font-size: 3.3em;
  letter-spacing: -2px;
  text-transform: uppercase;
  margin: 15px 0 0 0;
}
.topfooter h1 span {
  font-weight: 700;
}
.topfooter h4 {
  font-size: 2.1em;
  letter-spacing: -1px;
  font-weight: 300;
  margin: 0;
  position: relative;
}
.topfooter h4:before {
  font-family: 'Entypo';
  font-size: 1.1em;
  position: absolute;
  content: '\E724';
  left: -17px;
  top: -1px;
}
.topfooter h4 a {
  color: #FFF;
}
.topfooter .alph {
  background-color: #b80100;
  height: 80px;
}
.topfooter .omeg {
  background-color: #d10100;
  position: relative;
}
.topfooter .tribe-events-adv-list-widget {
  height: 80px;
}
.topfooter .duration {
  font-weight: 800;
  font-size: 1.6em;
  letter-spacing: -1px;
  line-height: 0.9em;
}
.topfooter .grad {
  display: block;
  position: absolute;
  width: 80px;
  height: 80px;
  right: 0;
  z-index: 2;
  background-image: -webkit-linear-gradient(left, rgba(208, 1, 0, 0) 10.4%, #d10100 57.4%);
  background-image: -moz-linear-gradient(left, rgba(208, 1, 0, 0) 10.4%, #d10100 57.4%);
  background-image: -ms-linear-gradient(left, rgba(208, 1, 0, 0) 10.4%, #d10100 57.4%);
  background-image: linear-gradient(to right, rgba(208, 1, 0, 0) 10.4%, #d10100 57.4%);
}
.topfooter .tickercontainer {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.topfooter .tickercontainer .mask {
  position: relative;
  overflow: hidden;
}
.topfooter ol.newsticker {
  position: relative;
  height: 80px;
  padding: 0;
  margin: 12px 0;
}
.topfooter ol.newsticker li {
  float: left;
  padding-left: 18px;
  margin: 0 20px;
}
.topfooter .mask {
  height: 65px;
}
/*------------------------------------*\
   #ACCUEIL
\*------------------------------------*/
.slidercontainer {
  background-color: #000000;
}
.descaccueil {
  padding: 70px 0 80px 7px;
}
.descaccueil:before {
  content: '';
  background-image: url(img/bernard_photo.jpg);
  width: 510px;
  height: 378px;
  position: absolute;
  left: -70px;
  top: 15px;
  z-index: -1;
}
.descaccueil h1 {
  font-size: 4em;
  letter-spacing: -2px;
  font-weight: 400;
  margin: 0;
}
.descaccueil h4 {
  text-align: right;
  margin: 0 114px 0 0;
  float: right;
  font-style: italic;
  color: #8d8d8d;
  font-size: 1.5em;
  letter-spacing: -1px;
  line-height: 0.7em;
}
.descaccueil p {
  position: relative;
  font-size: 2em;
  font-weight: 300;
  letter-spacing: -1px;
  line-height: 1.3em;
  margin-top: 10px;
  border-bottom: 1px solid #ececec;
  padding-bottom: 20px;
  margin-bottom: 12px;
  z-index: 1;
  text-shadow: 0px 0px 3px #FFF;
}
.descaccueil p strong {
  font-weight: 600;
}
.descaccueil p:after {
  content: '';
  width: 110px;
  height: 110px;
  position: absolute;
  right: 0;
  bottom: -65px;
  border-radius: 55px;
  background-image: url(img/bouvard.jpg);
  border: 5px solid #FFF;
  z-index: -1;
}
.container.accueil {
  background: url(img/bulle.png) right top no-repeat;
}
/* #BOITES */
.box {
  width: 300px;
  height: 160px;
  display: inline-block;
  margin-right: 17px;
  border-radius: 5px;
  -moz-box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.31);
  -webkit-box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.31);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.31);
  position: relative;
  overflow: hidden;
  -webkit-transition: box-shadow 300ms ease-in-out;
  -moz-transition: box-shadow 300ms ease-in-out;
  -o-transition: box-shadow 300ms ease-in-out;
  -ms-transition: box-shadow 300ms ease-in-out;
  transition: box-shadow 300ms ease-in-out;
  background-repeat: no-repeat;
  background-size: cover;
}
.box.un {
  margin-left: 1px;
}
.box.trois {
  margin-right: 0;
}
.box .boxtitle {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  height: 160px;
  position: absolute;
  bottom: -100px;
  padding: 10px;
  -webkit-transition: all 300ms cubic-bezier(0.75, 0, 0.25, 1);
  -moz-transition: all 300ms cubic-bezier(0.75, 0, 0.25, 1);
  -o-transition: all 300ms cubic-bezier(0.75, 0, 0.25, 1);
  -ms-transition: all 300ms cubic-bezier(0.75, 0, 0.25, 1);
  transition: all 300ms cubic-bezier(0.75, 0, 0.25, 1);
}
.box .boxtitle h3 {
  color: #FFF;
  font-size: 1.7em;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -1px;
  margin: 0 0 0 30px;
  line-height: 1.1em;
}
.box .boxtitle:before {
  font-family: 'entypo';
  width: 30px;
  height: 30px;
  position: absolute;
  left: 15px;
  top: 7px;
  color: #FFF;
  font-size: 1.8em;
}
.box .boxtitle .clicktosee {
  background-color: #d10100;
  color: #FFF;
  font-size: 1.3em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 7px;
  position: absolute;
  left: 40px;
  margin-top: 10px;
}
.box:hover {
  -moz-box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.31), 0 3px #d10100;
  -webkit-box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.31), 0 3px #d10100;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.31), 0 3px #d10100;
}
.box:hover .boxtitle {
  bottom: -65px;
}
.fondsep.boxes {
  background-color: #f6f7f6;
}
/* BOÎTES LARGES */
.largebox .box {
  width: 459px;
}
.largebox .box.deux {
  margin-right: 0;
}
.largebox .box:hover .boxtitle {
  bottom: -85px;
}
.largebox .boxtitle {
  bottom: -120px;
}
/*------------------------------------*\
    PAGE #PRO
\*------------------------------------*/
.propass {
  text-align: center;
  background-color: #F8F8F8;
  border: 1px solid #e8e8e8;
  padding: 30px 30px;
}
.propass h3 {
  line-height: 1em;
}
/*------------------------------------*\
    #PAGES
\*------------------------------------*/
/* BOUTONS SOCIAUX GAUCHE */
.sclsidebtns {
  position: fixed;
  top: 75px;
  margin-left: 0;
  z-index: 10;
}
.sclsidebtns .sidetwit,
.sclsidebtns .sidefb {
  margin-left: -44px;
  color: rgba(0, 0, 0, 0.35);
  background-color: #FFF;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #FFF;
}
.sclsidebtns .sidetwit:hover,
.sclsidebtns .sidefb:hover {
  background-color: #d10100;
  color: #FFF;
}
.sclsidebtns .sidetwit .visible,
.sclsidebtns .sidefb .visible {
  margin-left: -44px;
  -moz-animation: sclbtns 600ms cubic-bezier(0.75, 0, 0.25, 1) forwards;
  -webkit-animation: sclbtns 600ms cubic-bezier(0.75, 0, 0.25, 1) forwards;
  animation: sclbtns 600ms cubic-bezier(0.75, 0, 0.25, 1) forwards;
}
.sclsidebtns .sidetwit .invisible,
.sclsidebtns .sidefb .invisible {
  margin-left: 15px;
  -moz-animation: sclbtns1 600ms cubic-bezier(0.75, 0, 0.25, 1) forwards;
  -webkit-animation: sclbtns1 600ms cubic-bezier(0.75, 0, 0.25, 1) forwards;
  animation: sclbtns1 600ms cubic-bezier(0.75, 0, 0.25, 1) forwards;
}
.sclsidebtns .entypo {
  font-size: 2.1em;
  line-height: 1.8em;
  text-align: center;
  margin-top: 10px;
  background-color: rgba(0, 0, 0, 0.35);
  color: #FFF;
}
/* FEATURED IMAGE */
/* Calque sombre */
#featimagewrap {
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 60px;
  width: 100%;
  z-index: 1;
  opacity: 0;
}
/* Image */
#featimage {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-box-shadow: inset 0 -60px 60px -60px rgba(0, 0, 0, 0.43);
  -moz-box-shadow: inset 0 -60px 60px -60px rgba(0, 0, 0, 0.43);
  box-shadow: inset 0 -60px 60px -60px rgba(0, 0, 0, 0.43);
  position: fixed;
  top: 60px;
  width: 100%;
  background-color: #191919;
}
#featimage.big,
#featimagewrap.big {
  height: 460px;
}
#featimage.med,
#featimagewrap.med {
  height: 260px;
}
.contentwrap {
  position: relative;
  background-color: #ffffff;
  z-index: 2;
  -moz-box-shadow: 0 0px 40px rgba(0, 0, 0, 0.72);
  -webkit-box-shadow: 0 0px 40px rgba(0, 0, 0, 0.72);
  box-shadow: 0 0px 40px rgba(0, 0, 0, 0.72);
}
.contentwrap a {
  color: #d10100;
}
.contentwrap h2 {
  font-size: 2.6em;
  letter-spacing: -1px;
  text-align: center;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ECECEC;
  padding: 8px 0;
  color: #d10100;
}
.contentwrap.big {
  margin-top: 520px;
}
.contentwrap.med {
  margin-top: 320px;
}
.fondsep {
  background-color: #0f0f0f;
  padding: 30px 0;
  color: #FFF;
}
.round {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  border: 10px solid #FFF;
  background: url(http://www.bernard-mabille.com/wp-content/themes/mabillev2/img/perso.svg) center top no-repeat #2e2e2e;
  top: -75px;
  display: inline-block !important;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  -moz-box-shadow: inset 0 0 15px black;
  -webkit-box-shadow: inset 0 0 15px black;
  box-shadow: inset 0 0 15px black;
  text-indent: -9999px;
}
.completetitle {
  border-bottom: 1px solid #ededed;
  margin-bottom: 30px;
}
.maintitle {
  text-align: center;
  padding-top: 70px;
  text-transform: uppercase;
  font-size: 3.5em;
  margin: 0;
  letter-spacing: -1px;
  color: #d10100;
}
.subtitle {
  font-size: 1.9em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  margin-top: -10px;
  z-index: 1;
  position: relative;
  letter-spacing: -1px;
  padding-bottom: 10px;
}
.colonne1,
.colonne2 {
  width: 47%;
  float: left;
  position: relative;
  display: inline;
  overflow: hidden;
}
.colonne2 {
  margin-left: 3%;
  padding-left: 3%;
  border-left: 1px solid #222;
}
/* PAGE NOIRE */
.contentwrap.noir {
  background-color: #000000;
  /* Citation noire */
  /* Boîtes noires*/
  /* Masonry noir */
}
.contentwrap.noir .round {
  border: 10px solid #000100;
  background-color: #FFF;
  box-shadow: none;
}
.contentwrap.noir .completetitle {
  border-bottom: 1px solid #121212;
}
.contentwrap.noir p,
.contentwrap.noir ul,
.contentwrap.noir li,
.contentwrap.noir h2,
.contentwrap.noir h3,
.contentwrap.noir h4,
.contentwrap.noir .subtitle {
  color: #FFF;
}
.contentwrap.noir a {
  color: #d10100;
  font-weight: 400;
}
.contentwrap.noir h2 {
  border-top: 1px solid #2b2b2b;
  border-bottom: 1px solid #2B2B2B;
}
.contentwrap.noir .citation {
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-top: 1px solid #000000;
  border-bottom: 4px solid #000000;
  background: -webkit-linear-gradient(top, #1d1d1d 0%, #0d0d0d 100%) -2px no-repeat;
  background: -moz-linear-gradient(top, #1d1d1d 0%, #0d0d0d 100%) -2px no-repeat;
  background: -ms-linear-gradient(top, #1d1d1d 0%, #0d0d0d 100%) -2px no-repeat;
  background: linear-gradient(to bottom, #1d1d1d 0%, #0d0d0d 100%) -2px no-repeat;
}
.contentwrap.noir .leftcit {
  background: url(http://www.bernard-mabille.com/wp-content/themes/mabillev2/img/perso.svg) -5px top no-repeat #0a0a0a;
}
.contentwrap.noir .leftcit h1 {
  color: #FFF;
}
.contentwrap.noir .rightcit {
  background: url(img/flechesep.png) left bottom no-repeat;
}
.contentwrap.noir .rightcit:before,
.contentwrap.noir .rightcit:after {
  color: #4b4b4b;
}
.contentwrap.noir .box {
  border: 1px solid #272727;
}
.contentwrap.noir .fondsep.boxes {
  background-color: #0f0f0f;
}
.contentwrap.noir .journal {
  background-color: #0e0f0e;
  -moz-box-shadow: 1px 2px #000000;
  -webkit-box-shadow: 1px 2px #000000;
  box-shadow: 1px 2px #000000;
}
.contentwrap.noir .journal h3 {
  border-bottom: 1px solid #383838;
}
.contentwrap.noir .journal p,
.contentwrap.noir .journal li {
  color: #bfbfbf;
}
.contentwrap.noir .wp-caption {
  background-color: #000;
  border: 1px solid #242424;
}
.contentwrap.noir .wp-caption-text {
  padding: 10px 0 0 0 ;
  font-size: 1.2em ;
  margin: 0;
  color: #b8b8b8 !important;
}
.contentwrap.noir .attachment-thumbnail {
  border: 2px solid #2c2c2c !important;
}
/* FIN PAGE NOIRE */
/*------------------------------------*\
    MASONRY
\*------------------------------------*/
.journal {
  padding: 5px 25px;
  width: 48%;
  background-color: #F8F8F8;
  -moz-box-shadow: 1px 2px #efefef;
  -webkit-box-shadow: 1px 2px #efefef;
  box-shadow: 1px 2px #efefef;
  border-radius: 5px;
  margin: 7px;
}
.journal h3 {
  margin: 15px 0 15px 0;
  padding: 0 0 8px 0;
  border-bottom: 1px solid #cecece;
  line-height: 1em;
  font-size: 2.1em;
  letter-spacing: -1px;
}
.journal p {
  margin: 0 0 15px 0;
  font-size: 1.4em;
  text-align: justify;
}
.journal img {
  border-radius: 40px;
  width: 80px;
  height: 80px;
}
.journal ul {
  font-size: 1.4em;
  padding-left: 0;
}
.journal ul li {
  margin-bottom: 15px;
  list-style: inside;
}
/*------------------------------------*\
    CITATIONS
\*------------------------------------*/
.citation {
  display: block;
  position: relative;
  border-left: 1px solid #E7E7E7;
  border-right: 1px solid #E7E7E7;
  border-top: 1px solid #E7E7E7;
  border-bottom: 4px solid #E7E7E7;
  border-radius: 20px;
  background: -webkit-linear-gradient(top, #ffffff 0%, #fcfdfc 100%) -2px no-repeat;
  background: -moz-linear-gradient(top, #ffffff 0%, #fcfdfc 100%) -2px no-repeat;
  background: -ms-linear-gradient(top, #ffffff 0%, #fcfdfc 100%) -2px no-repeat;
  background: linear-gradient(to bottom, #ffffff 0%, #fcfdfc 100%) -2px no-repeat;
  margin: 30px 0;
  height: 70px;
  overflow: hidden;
}
.leftcit {
  background: url(http://www.bernard-mabille.com/wp-content/themes/mabillev2/img/perso.svg) -5px 1px no-repeat #f7f8f7;
  height: 70px;
}
.leftcit h1 {
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-left: 90px;
  font-size: 2.3em;
  margin: 2px 0 0 0;
}
.leftcit h1 span {
  font-weight: 300;
}
.leftcit .twitter-share-button {
  margin-left: 120px;
}
.rightcit {
  height: 70px;
  background: url(img/flechesep.png) left top no-repeat;
  color: #d10100;
  font-size: 1.15em;
  position: relative;
  font-weight: 400;
  letter-spacing: -1px;
}
.rightcit p {
  margin: 0;
  height: 66px;
  display: table-cell;
  vertical-align: middle;
  padding-left: 60px;
  text-align: center;
  width: 620px;
  line-height: 1.1em;
}
.rightcit:before,
.rightcit:after {
  font-family: 'Entypo';
  content: "\275E";
  font-size: 2.2em;
  position: absolute;
  color: #e6e6e6;
}
.rightcit:before {
  left: 25px;
  top: -4px;
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}
.rightcit:after {
  right: -10px;
  bottom: 0px;
}
/*------------------------------------*\
    IMAGES
\*------------------------------------*/
/*------------------------------------*\
    MISC
\*------------------------------------*/
::selection {
  background: #d10100;
  color: #FFF;
  text-shadow: none;
}
::-webkit-selection {
  background: #d10100;
  color: #FFF;
  text-shadow: none;
}
::-moz-selection {
  background: #d10100;
  color: #FFF;
  text-shadow: none;
}
/* TO TOP */
#toTop {
  padding: 5px 3px;
  background: #ededed;
  color: #7a7a7a;
  position: fixed;
  bottom: 15px;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 5px  0 0 5px;
  display: none;
  cursor: pointer;
  -webkit-transition: background 0.2s ease-in-out;
  -moz-transition: background 0.2s ease-in-out;
  -o-transition: background 0.2s ease-in-out;
  -ms-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
  z-index: 10;
}
#toTop:hover {
  background-color: #d10100;
}
#toTop:hover:before {
  color: #FFF;
}
#toTop:before {
  font-family: 'Entypo';
  font-size: 2em;
  position: absolute;
  left: 0;
  overflow: hidden;
  content: '\E75F';
  margin-left: 14px;
  -webkit-transition: color 0.2s ease-in-out;
  -moz-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
}
/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/
.alignnone {
  margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}
.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}
.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}
a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}
a img.alignnone {
  margin: 5px 20px 20px 0;
}
a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}
a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption {
  background: #FFF;
  border: 1px solid #F0F0F0;
  max-width: 96%;
  padding: 5px 5px 10px;
  text-align: center;
}
.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}
.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  padding: 0;
  width: auto;
}
/****************         RESPONSIVE TABLETTE         ****************/
@media only screen and (min-width: 768px) and (max-width: 959px) {
  /* HEADER */
  .logo svg {
    width: 240px;
  }
  .logo a {
    padding: 11px 0;
  }
  .mainnav {
    font-size: 0.9em;
  }
  .mainnav ul li a {
    padding: 0 5px;
  }
  .sclheader ul li {
    margin-left: 3px;
    -webkit-transform: scale(0.9);
  }
  /* Menu plus */
  .navmore {
    font-size: 1.5em;
  }
  .navmorein1 {
    margin-top: 23px;
  }
  .navmore:hover .navmorein1 {
    margin-top: -28px;
  }
  /* Subheader */
  .subheader .four.columns {
    width: 190px;
  }
  .subheader h2 {
    font-size: 1.6em;
  }
  .subheader li {
    font-size: 1.5em;
  }
  .subheader.expand {
    height: 140px;
  }
  /* PAGE */
  p {
    font-size: 1.4em;
  }
  /* Featured image */
  #featimage.big,
  #featimagewrap.big {
    height: 410px;
  }
  #featimage.med,
  #featimagewrap.med {
    height: 210px;
  }
  .contentwrap.big {
    margin-top: 470px;
  }
  .contentwrap.med {
    margin-top: 270px;
  }
  /* Boîtes */
  .box {
    width: 240px;
    margin-right: 10px;
    height: 128px;
    background-size: cover;
  }
  .boxtitle {
    font-size: 0.9em;
    bottom: -105px;
  }
  .largebox .box {
    width: 367px;
    height: 160px;
  }
  .largebox .boxtitle {
    bottom: -110px;
  }
  .largebox .box:hover .boxtitle {
    bottom: -70px;
  }
  /* Masonry */
  .journal {
    width: 47.5%;
  }
  .journal p {
    margin: 0 0 15px 0;
    font-size: 1.3em;
    text-align: justify;
  }
  /* Citation */
  .leftcit h1 {
    padding-left: 80px;
    font-size: 1.9em;
  }
  .rightcit p {
    font-size: 1.3em;
    width: 490px;
  }
  /* ACCUEIL */
  .descaccueil h1 {
    font-size: 3.5em;
  }
  .descaccueil p {
    font-size: 1.7em;
  }
  .descaccueil:before {
    left: -120px;
  }
  /* FOOTER */
  .footer .omeg:after {
    content: url('http://www.bernard-mabille.com/wp-content/themes/mabillev2/img/perso.svg');
    position: absolute;
    right: 0;
    top: -70px;
  }
  .footer .menu li {
    font-size: 1.2em;
  }
  .footer ul.menu {
    margin-top: 50px;
  }
  .topfooter h1 {
    margin-top: 17px;
    font-size: 2.7em;
  }
}
/****************         RESPONSIVE MOBILE         ****************/
@media only screen and (max-width: 767px) {
  .maincontent {
    margin-top: 60px;
  }
  a.bouton {
    display: block;
    text-align: center;
    font-size: 1.5em;
    margin-top: 20px;
  }
  /* HEADER */
  .header {
    height: 60px;
  }
  /* Logo */
  .logo svg {
    width: 220px;
  }
  .logo a {
    padding: 7px 0 0;
    height: 60px;
    float: left;
  }
  /* Navigation */
  .mainnav {
    float: right;
    display: none;
  }
  .sclheader {
    display: none;
  }
  .navmorewrapper {
    display: none;
  }
  .navmoreresp {
    height: 60px;
    width: 60px;
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    cursor: pointer;
    border-left: 1px solid rgba(0, 0, 0, 0.07);
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-transition: top 600ms cubic-bezier(0.75, 0, 0.25, 1);
    -moz-transition: top 600ms cubic-bezier(0.75, 0, 0.25, 1);
    -o-transition: top 600ms cubic-bezier(0.75, 0, 0.25, 1);
    -ms-transition: top 600ms cubic-bezier(0.75, 0, 0.25, 1);
    transition: top 600ms cubic-bezier(0.75, 0, 0.25, 1);
  }
  .navmoreresp:before {
    font-family: 'Entypo';
    content: '\2630';
    color: #FFF;
    font-size: 3.2em;
    text-align: center;
    width: 60px;
    height: 60px;
    position: absolute;
    padding-top: 6px;
  }
  .navmoreresp:active {
    background-color: #FFF;
  }
  .navmoreresp:active:before {
    color: #d10100;
  }
  .subheader {
    top: 60px;
  }
  .subheader.expand {
    height: inherit;
  }
  .subheader .container {
    width: 100%;
  }
  .subheader .four.columns {
    width: 100%;
    border: 1px solid #333;
    height: 42px;
    overflow: hidden;
    position: relative;
  }
  .subheader .four.columns.open {
    height: inherit;
  }
  .subheader h2:active {
    background: #d10100;
  }
  .subheader li a:active {
    background-color: #FFF;
    color: #d10100;
  }
  body.notop .subheader {
    top: 50px;
  }
  body.notop .navmoreresp {
    top: 4px;
  }
  /* ACCUEIL */
  .slidercontainer {
    display: none;
  }
  .descaccueil {
    padding: 320px 0 20px;
  }
  .descaccueil:before {
    display: none;
  }
  .descaccueil h1 {
    font-size: 3em;
    letter-spacing: -2px;
  }
  .descaccueil h4 {
    margin: -13px 80px 0 0;
    padding: 10px;
    float: none;
    line-height: none;
  }
  .descaccueil p {
    font-size: 1.7em;
  }
  .descaccueil p:after {
    width: 80px;
    height: 80px;
    right: 0;
    bottom: -45px;
    border-radius: 40px;
    background-size: 80px 80px;
  }
  .container.accueil {
    background: none;
  }
  .contentwrap.accueil {
    background: url(img/bernard_photo.jpg) center top no-repeat;
    background-size: 440px;
  }
  /* FOOTER */
  .topfooter {
    height: 160px;
  }
  .topfooter .container {
    width: 100%;
  }
  .topfooter h1 {
    text-align: center;
  }
  .topfooter .columns {
    width: 100% !important;
  }
  .topfooter .grad {
    display: none;
  }
  .footer .columns.omeg {
    display: none;
  }
  .footer .columns.logo {
    margin-top: 250px;
    text-align: center;
  }
  .footer .columns.logo:before {
    content: url('http://www.bernard-mabille.com/wp-content/themes/mabillev2/img/perso.svg');
    position: absolute;
    top: -25px;
    z-index: 2;
    left: 95px;
  }
  /* PAGES */
  .round {
    height: 140px;
    width: 140px;
    border: 7px solid #FFF;
    top: -70px;
  }
  .maintitle {
    line-height: 0.9em;
    font-size: 3em;
    padding-bottom: 12px;
  }
  .subtitle {
    font-size: 1.6em;
  }
  .alignright,
  .alignleft {
    width: 100%;
  }
  p {
    font-size: 1.4em;
  }
  .one.column {
    height: 0;
  }
  .fondsep {
    padding: 20px 0;
  }
  /* DATES */
  .tribe-events-list h2.tribe-events-list-event-title {
    line-height: 1.2em;
  }
  .tribe-events-list .tribe-events-event-meta {
    margin: 5px 0 0 0;
  }
  .tribe-events-list .tribe-events-event-image img {
    width: 100%;
  }
  .tribe-events-list .tribe-events-event-image {
    width: 100%;
  }
  .tribe-bar-collapse #tribe-bar-collapse-toggle {
    line-height: 1.1em;
    width: 100%;
  }
  #tribe-bar-views {
    display: none;
  }
  /* Featured image */
  #featimage.big,
  #featimagewrap.big {
    height: 360px;
    margin-top: -10px;
  }
  #featimage.med,
  #featimagewrap.med {
    height: 160px;
    margin-top: -10px;
  }
  .contentwrap.big {
    margin-top: 420px;
  }
  .contentwrap.med {
    margin-top: 210px;
  }
  .contentwrap.big {
    margin-top: 360px;
  }
  .colonne1,
  .colonne2 {
    width: 100%;
    float: none;
    margin-left: 0;
  }
  /* MASONRY */
  .brick {
    width: 100%;
    margin-left: 0;
  }
  .brick p,
  .brick ul {
    font-size: 1.3em;
  }
  /* BOITES */
  .box.deux,
  .box.trois {
    margin-top: 20px;
  }
  .box.un,
  .box.deux {
    margin-right: 0;
  }
  .largebox .box {
    width: 300px;
    height: 160px;
  }
  .largebox .boxtitle {
    bottom: -100px;
  }
  .largebox .box:hover .boxtitle {
    bottom: -65px;
  }
  /* CITATION */
  .container .citation {
    height: inherit;
    margin: 30px 0;
  }
  .rightcit,
  .contentwrap.noir .rightcit {
    background: none;
    height: inherit;
  }
  .rightcit p {
    padding: 10px 30px;
    font-size: 1.4em;
  }
  .rightcit:before {
    left: 5px;
    top: -4px;
  }
  .rightcit:after {
    right: 8px;
    bottom: -4px;
  }
  
  
  @-moz-keyframes bounceOut {
    0% {
      top: -70px;
      -moz-transform: rotate(0deg);
    }
    25% {
      top: -65px;
      -moz-transform: rotate(2deg);
    }
    50% {
      top: -75px;
      -moz-transform: rotate(0deg);
    }
    75% {
      top: -65px;
      -moz-transform: rotate(-2deg);
    }
    100% {
      top: -70px;
      -moz-transform: rotate(0deg);
    }
  }
  @-webkit-keyframes bounceOut {
    0% {
      top: -70px;
      -webkit-transform: rotate(0deg);
    }
    25% {
      top: -65px;
      -webkit-transform: rotate(2deg);
    }
    50% {
      top: -75px;
      -webkit-transform: rotate(0deg);
    }
    75% {
      top: -65px;
      -webkit-transform: rotate(-2deg);
    }
    100% {
      top: -70px;
      -webkit-transform: rotate(0deg);
    }
  }
  @keyframes bounceOut {
    0% {
      top: -70px;
      transform: rotate(0deg);
    }
    25% {
      top: -65px;
      transform: rotate(2deg);
    }
    50% {
      top: -75px;
      transform: rotate(0deg);
    }
    75% {
      top: -65px;
      transform: rotate(-2deg);
    }
    100% {
      top: -70px;
      transform: rotate(0deg);
    }
  }
}