﻿/* ACCUEIL.CSS : styles propres à la page d'accueil */

/* slider entête */
.home-slider { position: relative; width: 100%; height: 0; overflow: hidden; background: #f3f3f3; }
.home-slider, .home-slider .img-wrapper.intrinsic { padding-bottom: 45%; /* 864:1920 */ }
.home-slider .flickity-viewport { position: absolute; width: 100%; }
.home-slider-item { width: 100%; height: auto; }
.home-slider .img-wrapper.intrinsic { z-index: 1; background: transparent; }
.home-slider .img-wrapper:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 45%,rgba(0,0,0,.3) 100%); }
.home-slider .flickity-button { position: absolute; z-index: 3; left: 0; top: 50%; font-size: 200%; width: 1em; /* 40px */ height: 1em; box-sizing: content-box; padding: 0.5em; /* 20px */ margin-top: -1em; /* -40px (40+20+20/2) */ fill: #fff; }
.home-slider .flickity-button.next { left: auto; right: 0; }
.home-slider .flickity-page-dots { position: absolute; left: 0; right: 0; bottom: 8%; font-size: 80%; text-align: center; line-height: 1; }
.home-slider .flickity-page-dots .dot { display: inline-block; position: relative; width: 2.375em; height: 2.375em; margin: 0 0.66em; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.home-slider .flickity-page-dots .dot:before { content: ""; position: absolute; left: 50%; top: 50%; width: 0.5em; /* 8px */ height: 0.5em; margin: -0.25em 0 0 -0.25em; background: #fff; border-radius: 50%; }
.home-slider .flickity-page-dots .dot.is-selected { border-color: #fff; }


/* carte des escales */
.home-map .img-wrapper { background: #0a65a5; }
.home-map .img-wrapper:after { display: none; }


/* media queries */
@media (min-width: 1px) and (max-width: 63.9375em) { /* 1023/16 */
	.home-slider .flickity-page-dots .dot { margin: 0 0.33em; }
}

@media (min-width: 1px) and (max-width: 60em) { /* 960/16 */
	.home-map .img { min-height: 85vw; }
}

@media (min-width: 1px) and (max-width: 37.5em) { /* 600/16 */
	.home-slider .flickity-page-dots { display: none; }
}

@media (min-width: 1px) and (max-width: 29.9375em) { /* 479/16 */
	.home-slider, .home-slider .img-wrapper.intrinsic { padding-bottom: 56.25%; }
}