/*---------------------------------------------------------------
# Package - Joomla Template based on Sboost Framework
# ---------------------------------------------------------------
# Author - mixwebtemplates http://www.mixwebtemplates.com
# Copyright (C) 2008 - 2015 mixwebtemplates.com. All Rights Reserved.
# Websites: http://www.mixwebtemplates.com
-----------------------------------------------------------------*/

#hormenu ul.mx-menu { padding: 0;margin:0}
#sublevel ul.mx-menu { padding: 5px 0}
#hormenu .megacol,#sublevel .megacol {float:left}
#sublevel ul.empty,#sublevel li.empty {height:0px!important;display:none}
#hormenu ul li,#sublevel ul li{background:none;padding:0;margin:0}

/*Top Level*/
#sublevel {background:#333; color: #ccc;}

#hormenu ul.level-0,
#sublevel ul.level-1{float:none;display:inline-block;margin:0px;padding:0}

/*Parent list item*/
#hormenu ul.level-0 > li.menu-item,
#sublevel ul.level-1 > li.menu-item{background:none;display:inline-block;margin:0 1px 0 0;padding:0}

/*Parent anchor text*/

#hormenu ul.level-0 > li.menu-item > a.menu-item{ color: #192a4a; text-transform:uppercase;
  display:block;font-size:14px;line-height:normal;text-decoration:none;margin:0;padding:8px 15px;
  background-position:  0px 0px; background-repeat: no-repeat;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
  word-spacing: 5px;
  letter-spacing: 2px;
  font: normal 14px/1 "ff-tisa-sans-web-pro",sans-serif;
font-weight: bold}

#sublevel ul.level-1 > li.menu-item > a.menu-item{color:#ccc; display:block;font-size:12px;line-height:normal;text-decoration:none;margin:0;padding: 12px; }
/*Parent list item hover and active*/
#hormenu ul.level-0 > li.menu-item:hover > a.menu-item,
#hormenu ul.level-0 > li.menu-item.active> a.menu-item{  margin: 0px;padding-top:10px;padding-bottom:10px; }

#sublevel ul.level-1 > li.menu-item:hover > a.menu-item,
#sublevel ul.level-1 > li.menu-item.active> a.menu-item {padding:11px 12px; margin:4px 0px;padding-top:4px;padding-bottom:4px; }

#hormenu ul.level-0 > li.menu-item span.has-image,
#sublevel ul.level-1 > li.menu-item span.has-image{padding-left:22px;display:block;background-repeat:no-repeat;background-position:0px 0px}
#hormenu ul.level-0 > li.menu-item span.menu-title,
#sublevel ul.level-1 > li.menu-item span.menu-title{display:block}

#hormenu ul.level-0 > li.menu-item span.menu-desc,
#sublevel ul.level-1 > li.menu-item span.menu-desc{display:block;font-size:11px; text-shadow: none; text-transform:lowercase;}


#hormenu ul.level-0 > li.parent > a.menu-item span.menu,
#sublevel ul.level-1 > li.parent > a.menu-item span.menu {display:block;background: none}

#hormenu ul li.parent > a.menu-item span.menu,
#sublevel ul li.parent > a.menu-item span.menu {display:block;background:url(../images/daddy.png) no-repeat 100% 50%}

/*Submenu*/
#hormenu li .submenu,#sublevel li .submenu {position: absolute;display:none;z-index:9999}
#hormenu ul li .submenu-inner,#sublevel ul li .submenu-inner {background:#fff;color:#222}

/*Styling subnav*/
#hormenu ul ul,
#sublevel ul ul {float: none;}

#hormenu li.menu-item li.menu-item,
#sublevel li.menu-item li.menu-item {background:none;display:block;margin:0;padding:0;float:none;border-top:1px solid #fff;border-bottom:1px solid #ddd}

#hormenu li.menu-item li.menu-item:first-child,
#sublevel li.menu-item li.menu-item:first-child{border-top:0}
#hormenu li.menu-item li.menu-item:last-child,
#sublevel li.menu-item li.menu-item:last-child{border-bottom:0}

#hormenu li.menu-item li.menu-item a.menu-item,
#sublevel li.menu-item li.menu-item a.menu-item
{display:block;font-weight:200;line-height:normal;text-decoration:none;margin:0;padding:10px;color:#222;}

#hormenu li.menu-item li:hover,#hormenu li.menu-item li.active,
#sublevel li.menu-item li:hover,#sublevel li.menu-item li.active{background:#fafafa}

#hormenu li.menu-item li.menu-item span.menu-desc,
#sublevel li.menu-item li.menu-item span.menu-desc{color:#666}





.select-menu option {
    color: #333;
}

*{-webkit-touch-callout:none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;list-style:none;margin:0;padding:0;box-sizing:border-box}
img{object-fit:cover;pointer-events:none;max-width:100%}


input /* ou input{position:absolute;left:-9999px} */,.precedent,.suivant{display:none}

label{cursor:pointer} /*on rend cliquable tous les labels*/

/************************debut sildeshow****************************/
.slideshow > ul,.cache{max-height:80vh}


.slideshow {
  position:relative;
  max-width:100%;
  box-shadow:0 2px 6px hsla(0,0%,0%,.4)}

img {
  width: 100%; /* need to overwrite inline dimensions */
  height: auto;
}
h2 {
  margin-bottom: .5em;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1em;
}


/* hover styles */
.location-listing {
  position: relative;
}

.location-image {
  line-height: 0;
  overflow: hidden;
}

.location-image img {
  filter: blur(0px);
  transition: filter 0.3s ease-in;
  transform: scale(1.1);
}

.location-title {
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: none;
  z-index: 1;

  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s;
  color: white;

  /* position the text in t’ middle*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-listing:hover .location-title {
  opacity: 1;
}

.location-listing:hover .location-image img {
  filter: blur(2px);
}

/* for touch screen devices */
@media (hover: none) {
  .location-title {
    opacity: 1;
  }

  .location-image img{
    filter: blur(0px);
  }
}




.slideshow > #slide_img1:checked ~ ul > li,
.slideshow > #pause_img1:checked ~ ul > li{transform:translatex(0%)}
.slideshow > #slide_img2:checked ~ ul > li,
.slideshow > #pause_img2:checked ~ ul > li {transform: translatex(-100%)}
.slideshow > #slide_img3:checked ~ ul > li,
.slideshow > #pause_img3:checked ~ ul > li {transform: translatex(-200%)}


.slideshow > #slide_img4:checked ~ ul > li,
.slideshow > #pause_img4:checked ~ ul > li {transform: translatex(-300%)}

/*******************animation slide********************/
@keyframes slide {
  0%, 13%{transform:translatex(0)}
  25%, 38%{transform:translatex(-100%)}
  50%, 63%{transform:translatex(-200%)}
  75%, 88%{transform:translatex(-300%)}
}

/******************fleches**************************/

.slideshow > .precedent,
.slideshow > .suivant{position:absolute;top:50%;z-index:1}
.slideshow > .precedent{left:2rem}
.slideshow > .suivant{right:2rem}

.slideshow > .precedent > label,
.slideshow > .suivant > label{
  position:absolute;
  opacity:0;
  z-index:-1;
  margin-top:-22px;
  margin-left:-22px;
  width:45px;
  height:45px;
  border-radius:50%;
  background-color:#192a4a;
  transition:transform .3s ease}

.slideshow > .precedent > label:after{content:'←'}
.slideshow > .suivant > label:after{content:'→'}

.slideshow > .precedent > label:after,
.slideshow > .suivant > label:after {
  display:block;
  text-align:center;
  line-height:42px;
  font-size:2rem;
  color:hsl(0,0%,100%);
  transition:.3s ease}


.slideshow > .slide:checked ~ .precedent > label,
.slideshow > .slide:checked ~ .suivant > label{opacity:0;z-index:-1}

.slideshow > #slide_img1:checked ~ .precedent > label.img4,
.slideshow > #pause_img1:checked ~ .precedent > label.img4,
.slideshow > #slide_img1:checked ~ .suivant > label.img2,
.slideshow > #pause_img1:checked ~ .suivant > label.img2,
.slideshow > #slide_img2:checked ~ .precedent > label.img1,
.slideshow > #pause_img2:checked ~ .precedent > label.img1,
.slideshow > #slide_img2:checked ~ .suivant > label.img3,
.slideshow > #pause_img2:checked ~ .suivant > label.img3,
.slideshow > #slide_img3:checked ~ .precedent > label.img2,
.slideshow > #pause_img3:checked ~ .precedent > label.img2,
.slideshow > #slide_img3:checked ~ .suivant > label.img4,
.slideshow > #pause_img3:checked ~ .suivant > label.img4,
.slideshow > #slide_img4:checked ~ .precedent > label.img3,
.slideshow > #pause_img4:checked ~ .precedent > label.img3,
.slideshow > #slide_img4:checked ~ .suivant > label.img1,
.slideshow > #pause_img4:checked ~ .suivant > label.img1{opacity:1;z-index:1}



.slideshow > #play_img1:checked ~ .precedent > label.img4,
.slideshow > #play_img1:checked ~ .suivant > label.img2 {animation:anim_fleches 17.2s infinite -2s}


.slideshow > #play_img1:checked ~ .precedent > label.img1,
.slideshow > #play_img1:checked ~ .suivant > label.img3 {animation:anim_fleches 17.2s infinite 2.3s}


.slideshow > #play_img1:checked ~ .precedent > label.img2,
.slideshow > #play_img1:checked ~ .suivant > label.img4 {animation:anim_fleches 17.2s infinite 6.6s}


.slideshow > #play_img1:checked ~ .precedent > label.img3,
.slideshow > #play_img1:checked ~ .suivant > label.img1 {animation:anim_fleches 17.2s infinite 10.9s}


/* stop */
.slideshow > .slide:checked ~ .precedent > label,
.slideshow > .slide:checked ~ .suivant > label,
.slideshow > .pause:checked ~ .precedent > label,
.slideshow > .pause:checked ~ .suivant > label{animation-play-state:paused}

/*********************************animation fleches*************************************************/
@keyframes anim_fleches {0%,24.99%{opacity:1;z-index:1}25%,100%{ opacity:0;z-index:-1}}


.slideshow:hover{animation-play-state:paused    }

/********************bouton play/pause*************************/
.slideshow > .play_pause,.slideshow > .play_pause > label{position:absolute}

.slideshow > .play_pause {top:50%;left:50%;z-index:1}


.slideshow > #play_img1:checked ~ .play_pause > .pause,
.slideshow > .slide:checked ~ .play_pause > .play,
.slideshow > .pause:checked ~ .play_pause > .play{display:block;
  z-index:1}


.slideshow > #play_img1:checked ~ .play_pause > .play,
.slideshow > .slide:checked ~ .play_pause > .pause,
.slideshow > .pause:checked ~ .play_pause > .pause{display:none;
  z-index:-1}

.slideshow > #play_img1:checked ~ .play_pause > .pause.img1,
.slideshow > #play_img1:checked ~ .play_pause > .pause.img2,
.slideshow > #play_img1:checked ~ .play_pause > .pause.img3,
.slideshow > #play_img1:checked ~ .play_pause > .pause.img4{
  opacity:0;
  z-index:-1}



.slideshow > #play_img1:checked ~ .play_pause > .pause.img1 {animation:anim_fleches 17.2s infinite -2s}
.slideshow > #play_img1:checked ~ .play_pause > .pause.img2{animation:anim_fleches 17.2s infinite 2.3s}
.slideshow > #play_img1:checked ~ .play_pause > .pause.img3{animation:anim_fleches 17.2s infinite 6.6s}
.slideshow > #play_img1:checked ~ .play_pause > .pause.img4 {animation:anim_fleches 17.2s infinite 10.9s}



/* stop */
.slideshow > .slide:checked ~ .play_pause > .pause,
.slideshow > .pause:checked ~ .play_pause > .pause{animation-play-state:paused}


.slideshow  > #play_img1:checked ~ ul > li {animation:slide 17.2s infinite}


.slideshow > #play_img1:checked ~ ul > li,
.slideshow > .pause:checked ~ ul > li{transition:none}

.slideshow > .play_pause {transition: .4s 0s ease}
.slideshow > .precedent {transition: .4s .15s ease}
.slideshow > .suivant {transition: .4s .3s ease}


/*apparition/disparition des fleches + bouton play/pause*/
.slideshow > .precedent,
.slideshow > .suivant,
.slideshow > .play_pause{opacity:0}


.slideshow:hover > .precedent,
.slideshow:hover > .suivant,
.slideshow:hover > .play_pause{opacity:1}


.slideshow > .play_pause > label {
  margin-left:-22px;
  margin-top:-22px;
  width:45px;
  height:45px;
  border-radius:50%;

  transition:.3s ease}


.slideshow > .play_pause > .play:after{content:'▶'}
.slideshow > .play_pause > .pause:after{content:'∥'}

.slideshow > .play_pause > label:after{
  display:block;
  text-align:center;
  font-size:2rem;
  color:hsl(0,0%,100%)}


/***************************navigation puces bas********************************/
.slideshow > .puces {
  position:absolute;
  left:0;
  width:100%;
  z-index:1;
  font-size: 0;
  text-align:center;
  bottom:.3125rem;
  margin-bottom:.3125rem}

.slideshow > .puces > label{
  position:relative;
  display:inline-flex;
  margin:0 .625rem;
  padding:.5rem;
  border-radius:50%;
  background-color:hsla(0,0%,0%,.6)}

/********************simulation lien actif sur les puces******************************/
.slideshow > .puces > label > .actif_puces {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:50%;
  z-index:1;
  background-color:hsl(0,0%,100%);
  transition:.3s ease;
  transform:scale(0)}


.slideshow > #slide_img1:checked ~ .puces > label.img1 > .actif_puces,
.slideshow > #pause_img1:checked ~ .puces > label.img1 > .actif_puces,
.slideshow > #slide_img2:checked ~ .puces > label.img2 > .actif_puces,
.slideshow > #pause_img2:checked ~ .puces > label.img2 > .actif_puces,
.slideshow > #slide_img3:checked ~ .puces > label.img3 > .actif_puces,
.slideshow > #pause_img3:checked ~ .puces > label.img3 > .actif_puces,
.slideshow > #slide_img4:checked ~ .puces > label.img4 > .actif_puces,
.slideshow > #pause_img4:checked ~ .puces > label.img4 > .actif_puces{transform:scale(1)}



/* bouton play -  puces */

.slideshow > #play_img1:checked ~ .puces > label.img1 > .actif_puces{animation:anim_puces 17.2s infinite -2s}

.slideshow > #play_img1:checked ~ .puces > label.img2 > .actif_puces{animation:anim_puces 17.2s infinite 2.3s}

.slideshow > #play_img1:checked ~ .puces > label.img3 > .actif_puces{animation:anim_puces 17.2s infinite 6.6s}

.slideshow > #play_img1:checked ~ .puces > label.img4 > .actif_puces{animation:anim_puces 17.2s infinite 10.9s}


@keyframes anim_puces{0%,24.99%{transform:scale(1);background-color:hsl(0,0%,100%)}25%,100%{transform:scale(0);background:transparent}}

.slideshow > #play_img1:checked ~ .puces > label > .actif_puces,
.slideshow > .pause:checked ~ .puces > label > .actif_puces{transition:none}

/* stop */

.slideshow > .slide:checked ~ .puces > label > .actif_puces,
.slideshow > .pause:checked ~ .puces > label > .actif_puces{animation-play-state:paused}
/********************************navigation puces bas****************************/

@media screen and (min-width:41.5rem){
  .slideshow{max-width:92.5rem}
  .precedent,.suivant{display:block}
}