#events_menu {
position: absolute;
top: 550px;
margin: 0 auto 0 auto;
line-height: 1.42857143;

}

.events_menu-container {
width: 1170px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}

.events_menu-row {
margin-left: -15px;
margin-right: -15px;
}

.events_menu-container::before, .events_menu-container::after, .events_menu-row::before, .events_menu-row::after {
clear: both;
content: " ";
display: table;
}

.col1, .col2, .col3 {
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}

.col1 {
width: 66.66666667%;
}

.col2 {
width: 50%;
}

.col3 {
width: 33.33333333%;
}

.col-md-offset-2 {
margin-left:16.66666667%;
}

.wp1, .wp2, .wp3, .wp4, .wp5, .wp6, .wp7 {
visibility: hidden;
}

.section-padding {
padding: 90px 0px 100px 0px;
}

.text-center {
text-align:center;
}

.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
-ms-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
ms-animation-fill-mode: both;
animation-fill-mode: both;
}


.fondu {
-webkit-animation-name: fondu;
-moz-animation-name: fondu;
-o-animation-name: fondu;
-ms-animation-name: fondu;
animation-name: fondu;
visibility: visible;
}
@-webkit-keyframes fondu {
  0% {
  opacity: 0;
  }

  1% {
  opacity: 1;
  }

  100% {
  opacity: 1;
  }
}

@-moz-keyframes fondu {
  0% {
  opacity: 0;
  }

  1% {
  opacity: 1;
  }

  100% {
  opacity: 1;
  }
}

@keyframes fondu {
  0% {
  opacity: 0;
  }

  1% {
  opacity: 1;
  }

  100% {
  opacity: 1;
  }
}

.delay-01s {
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
-ms-animation-delay: 0.1s;
}

.delay-02s {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
}

.delay-03s {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
-ms-animation-delay: 0.3s;
}

.delay-04s {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
}

.delay-05s {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
}

.delay-06s {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
-ms-animation-delay: 0.6s;
}

.delay-07s {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-o-animation-delay: 0.7s;
-ms-animation-delay: 0.7s;
}

.delay-08s {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-o-animation-delay: 0.8s;
-ms-animation-delay: 0.8s;
}

.delay-09s {
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
-o-animation-delay: 0.9s;
-ms-animation-delay: 0.9s;
}

.delay-1s {
animation-delay: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
}

.delay-11s {
animation-delay: 1.1s;
-webkit-animation-delay: 1.1s;
-moz-animation-delay: 1.1s;
-o-animation-delay: 1.1s;
-ms-animation-delay: 1.1s;
}

.delay-12s {
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-o-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
}

.delay-13s {
animation-delay: 1.3s;
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
-o-animation-delay: 1.3s;
-ms-animation-delay: 1.3s;
}

/* ==========================================================================
SECTION 4
========================================================================== */

.mots {
z-index: 1;
position: relative;
padding-top: 140px!important;
}

#mots-cles {
padding-top: 220px;
height: 300px;
}

.rect {
border: 2px solid #ffffff;
background: #000000;
text-transform: uppercase;
padding: 15px 0 15px 0;
font-size: 15px;
letter-spacing: 1px;
}

.rect:hover {
background: #000000;
color: black;
}

/* les mots */

#one {
position: absolute;
z-index: 1;
width: 160px;
margin-top: -100px;
margin-left: -30px;
}

#two {
position: absolute;
z-index: 1;
width: 150px;
margin-top: -165px;
margin-left: 80px;
}

#three {
position: absolute;
z-index: 0;
width: 120px;
margin-top: -110px;
margin-left: 290px;
}

#four {
position: absolute;
z-index: 1;
width: 200px;
margin-top: 0px;
margin-left: 220px;
}

#five {
position: absolute;
z-index: 1;
width: 170px;
margin-top: -65px;
margin-left: 450px;
}

#six {
position: absolute;
z-index: 1;
width: 200px;
margin-left: 580px;
margin-top: -110px;
}

#seven {
position: absolute;
z-index: 1;
width: 200px;
margin-left: 0px;
margin-top: -30px;
}

#eight {
position: absolute;
z-index: 0;
width: 260px;
right: -50px;
margin-top: 0;
}

#nine {
position: absolute;
z-index: 1;
width: 260px;
right: 0;
margin-top: 90px;
margin-right: 50px;
}

#ten {
position: absolute;
z-index: 1;
width: 140px;
margin-top: 40px;
margin-left: -20px;
}

#eleven {
position: absolute;
z-index: 1;
width: 140px;
margin-top: 95px;
margin-left: 160px;
}

#thirteen {
position: absolute;
z-index: 0;
width: 160px;
margin-top: 120px;
right: -120px;
padding-left: 15px;
padding-right: 15px;
}

#twelve {
position: absolute;
z-index: 1;
width: 160px;
margin-top: -150px;
margin-left: 420px;
}

#fourteen {
position: absolute;
z-index: 0;
width: 140px;
margin-top: 150px;
margin-left: 310px;
}

#one span, #two span, #three span,
#four span, #five span, #six span,
#seven span, #eight span, #nine span,
#ten span, #eleven span, #thirteen span, #twelve span,
#fourteen span {
cursor: pointer;
}
.rect.border {
border-top: 0px; border-left: 0px; border-right: 0px;
border-bottom: 2px solid #ffffff;
width: 100%;
padding: 0px;
opacity: .3;
}

.rect.border:hover {
background: black!important;
}

/* ==========================================================================
RESPONSIVE TABLETTE
========================================================================== */

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {

.events_menu-container {
width: 90%;
}

.col1 {
width: 100%;
}

.col-md-offset-2 {
margin-left: 0;
}

#one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten, #eleven, #twelve, #thirteen, #fourteen {
position: relative;
margin: 0px auto 30px auto;
right: 0;
width: 100%;
}

}


/* ==========================================================================
RESPONSIVE SMARTPHONE
========================================================================== */

@media only screen
and (min-device-width : 100px)
and (max-device-width : 767px) {
.events_menu-container {
width: 90%;
}

#mots-cles {
padding-top: 60px;
height: auto;
}

.col1 {
width: 100%;
}

.col-md-offset-2 {
margin-left: 0;
}

#one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten, #eleven, #twelve, #thirteen, #fourteen {
position: relative;
margin: 0px auto 30px auto;
right: 0;
width: 100%;
}

}