/* Welcome to Compass.

 * In this file you should write your main styles. (or centralize your imports)

 * Import this file using the following HTML or equivalent:

 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

@import url(../font/century.css);

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

  margin: 0;

  padding: 0;

  border: 0;

  font: inherit;

  font-size: 100%;

  vertical-align: baseline;

}



html {

  line-height: 1;

}



ol, ul {

  list-style: none;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



caption, th, td {

  text-align: left;

  font-weight: normal;

  vertical-align: middle;

}



q, blockquote {

  quotes: none;

}

q:before, q:after, blockquote:before, blockquote:after {

  content: "";

  content: none;

}



a img {

  border: none;

}



article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {

  display: block;

}



/*==============MIXIN================*/

.cover-img, .backgroundImg img, .grid div img, .block-post .thumbnail img, .openVideo img, .single-piscine .after-top .col-lg-5 .equipmentSwiper img, .single-equipement .after-top .col-lg-5 .equipmentSwiper img, .single-pisciniste .after-top .col-lg-5 .equipmentSwiper img, .page-pisciniste #map .container-distributeur .photo-distributeur {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  -o-object-fit: cover;

  -o-object-position: center;

  vertical-align: middle;

}



/*==============MIXIN================*/

html {

  font-family: 'Century Gothic', sans-serif;

  font-weight: normal;

  font-size: 1em;

  color: #fff;

  line-height: 1.2;

  background-color: #fff;

}



p {

  line-height: 1.2;

}

p a {

  color: #fff;

  text-decoration: underline;

}



li {

  line-height: 1.2;

}



*, :before, :after {

  box-sizing: border-box;

}



a {

  text-decoration: none;

  color: #fff;

  -webkit-transition: color 0.3s ease, background-color 0.3s ease;

  -moz-transition: color 0.3s ease, background-color 0.3s ease;

  -o-transition: color 0.3s ease, background-color 0.3s ease;

  transition: color 0.3s ease, background-color 0.3s ease;

}



a:hover {

  color: #081f43;

}



strong {

  font-weight: bolder;

}



img {

  max-width: 100%;

}



sup {

  font-size: 70%;

  display: inline-block;

  -webkit-transform: translateY(-5px);

  -ms-transform: translateY(-5px);

  transform: translateY(-5px);

}



section {

  padding: 50px 10%;

}



.t-2 {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  font-size: 1.5em;

  text-transform: uppercase;

  letter-spacing: 4px;

}

.t-2 small {

  font-size: 0.75em;

  display: block;

  margin-top: 5px;

  letter-spacing: 0;

}

.t-2.center {

  align-items: center;

  text-align: center;

}



.t-3 {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  font-size: 1.1em;

  text-transform: uppercase;

  letter-spacing: 2px;

}

.t-3 small {

  font-size: 0.75em;

  display: block;

  margin-top: 5px;

  letter-spacing: 0;

}

.t-3.center {

  align-items: center;

  text-align: center;

}



.t-b {

  font-size: 1.1em;

  text-transform: uppercase;

  font-weight: bolder;

}



.block-text {

  margin: 15px 0;

}

.block-text p {

  max-width: 750px;

  margin: 5px 0;

}

.block-text.center {

  text-align: center;

}

.block-text.center p {

  margin: 5px auto;

  text-align: center;

}

.block-text.lite p {

  max-width: 450px;

}



.link {

  padding: 10px 20px;

  text-transform: uppercase;

  display: inline-block;

  background-color: transparent;

  border-radius: 20px;

  letter-spacing: 4px;

  font-size: 0.9em;

  border: 1px solid #fff;

  line-height: 1.3;

  text-align: center;

}

.link:hover {

  background-color: rgba(255, 255, 255, 0.6);

}

.link.opaq {

  background-color: rgba(255, 255, 255, 0.6);

  color: #102b55;

  border: none;

}

.link.opaq:hover {

  color: #fff;

  background-color: #102b55;

}

.link.blue {

  background-color: #102b55;

  border: none;

}

.link.blue:hover {

  color: #fff;

  background-color: #97b2c6;

}

.link.white {

  border-color: #102b55;

  color: #102b55;

}

.link.white:hover {

  color: #fff;

  background-color: #102b55;

}

.link.lite {

  letter-spacing: 2px;

  padding: 7.5px 15px;

}



.titleStyle {

  position: relative;

  font-size: 2.5em;

  text-transform: uppercase;

  letter-spacing: 0.3em;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: center;

  line-height: 1;

  margin-bottom: 40px;

  pointer-events: none;

  text-align: center;

}

.titleStyle span {

  font-size: 140px;

  font-weight: bold;

  letter-spacing: 0;

  opacity: 0.4;

  margin-bottom: -25px;

  color: #e6e5e4;

}

.titleStyle.lite {

  font-size: 2em;

}

.titleStyle.lite span {

  font-size: 80px;

  opacity: 1;

  color: #f5f3f2;

}

.titleStyle.opaq span {

  opacity: 0.3;

  color: #e6e5e4;

}



.points {

  position: relative;

}

.points img, .points picture {

  z-index: 1;

  position: relative;

}

.points:after {

  content: '';

  width: calc(100% + 10%);

  user-select: none;

  pointer-events: none;

  height: 100%;

  background: url("../img/dots.svg") center repeat;

  background-position: center;

  background-size: 1px;

  background-size: 6px;

  position: absolute;

  left: -10%;

  bottom: 0;

  z-index: 0;

  opacity: 0.3;

}



/*=========HEADER=========*/

header {

  padding: 15px 5%;

  height: 155px;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 1000;

  position: fixed;

  width: 100%;

}

header .logo {

  position: absolute;

  left: 10%;

  top: calc(50% - 45px);

}

header .logo svg {

  width: 110px;

}

header.fixed {

  padding: 0;

  position: fixed;

  height: 0;

}

header.fixed .logo {

  display: none;

}

header.fixed .logo svg {

  width: 80px;

}

header.fixed #burgerBtn {

  position: fixed;

  top: 25px;

}

header.fixed #quickBtn .link {

  box-shadow: 5px 5px 15px -10px #000;

}

header.fixed #quickBtn .link.blue, header.fixed #quickBtn .link.opaq {

  background-color: #97b2c6;

  color: #fff;

}

header.fixed #quickBtn .link.blue:hover, header.fixed #quickBtn .link.opaq:hover {

  color: #fff;

  background-color: #081f43;

}

header nav {

  text-transform: uppercase;

  font-size: 1.2em;

  letter-spacing: 4px;

}

header .menuLite {

  display: flex;

  flex-direction: column;

  justify-content: center;

}

header .menuLite ul {

  display: flex;

  align-items: center;

  justify-content: center;

}

header .menuLite ul li {

  display: flex;

  align-items: center;

}

header .menuLite ul li a {

  padding: 10px 20px;

  font-size: 0.8em;

  position: relative;

}

header .menuLite ul li a:before {

  content: '';

  width: 0;

  height: 1px;

  background-color: #fff;

  display: block;

  position: absolute;

  bottom: 5px;

  left: 18px;

  -webkit-transition: width 0.3s ease-in-out;

  -moz-transition: width 0.3s ease-in-out;

  -o-transition: width 0.3s ease-in-out;

  transition: width 0.3s ease-in-out;

}

header .menuLite ul li a:hover {

  color: #fff;

}

header .menuLite ul li a:hover:before {

  width: calc(100% - 40px);

}

header .menuLite ul li:not(:last-child):after {

  content: '';

  width: 2px;

  height: 0.8em;

  display: block;

  background-color: #fff;

}

header .menuLite #quickBtn {

  margin-top: 15px;

  display: flex;

  justify-content: center;

}

header .menuLite #quickBtn .link {

  padding: 5px 10px;

  font-size: 0.7em;

  letter-spacing: 2px;

  margin: 0 10px;

}

header .mainMenu {

  height: calc(var(--vh,1vh)*100);

  width: 550px;

  position: fixed;

  overflow-y: scroll;

  top: 0;

  right: 0;

  display: flex;

  flex-direction: column;

  background-color: #102b55;

  padding: 130px 30px 30px 30px;

  -webkit-transform: translateX(570px);

  -ms-transform: translateX(570px);

  transform: translateX(570px);

  -webkit-transition: transform 0.5s ease;

  -moz-transition: transform 0.5s ease;

  -o-transition: transform 0.5s ease;

  transition: transform 0.5s ease;

}

header .mainMenu ul li a {

  padding: 10px;

  display: block;

  letter-spacing: 4px;

  font-size: 1rem;

  font-weight: bold;

}

header .mainMenu ul li a:hover {

  color: rgba(255, 255, 255, 0.5);

}

header .mainMenu ul li:nth-child(7) {

  margin: 20px 0;

}



.socials {

  display: flex;

  padding: 10px;

}

.socials a {

  display: block;

  margin: 2.5px 5px;

}

.socials a svg {

  width: 30px;

  height: 30px;

}

.socials a svg path {

  fill: #fff;

}



#burgerBtn {

  position: absolute;

  min-width: 40px;

  height: 30px;

  right: 2.5%;

  top: calc(50% - 15px);

  cursor: pointer;

}

#burgerBtn span {

  display: block;

  width: 100%;

  height: 6px;

  background-color: #fff;

  position: absolute;

  border-radius: 6px 0 6px 0;

  box-shadow: 1px 1px 5px -1px #102b55;

}

#burgerBtn span:nth-child(1) {

  top: 0;

}

#burgerBtn span:nth-child(2) {

  top: calc(50% - 3px);

}

#burgerBtn span:nth-child(3) {

  top: calc(100% - 6px);

}

#burgerBtn.active span {

  background-color: #fff !important;

}

#burgerBtn.active span:nth-child(1) {

  top: calc(50% - 3px);

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

  -webkit-transition: top 0.5s ease, transform 0.5s 0.5s ease, background-color 0.3s ease;

  -moz-transition: top 0.5s ease, transform 0.5s 0.5s ease, background-color 0.3s ease;

  -o-transition: top 0.5s ease, transform 0.5s 0.5s ease, background-color 0.3s ease;

  transition: top 0.5s ease, transform 0.5s 0.5s ease, background-color 0.3s ease;

}

#burgerBtn.active span:nth-child(2) {

  opacity: 0;

  -webkit-transition: opacity 0.5s ease, background-color 0.3s ease;

  -moz-transition: opacity 0.5s ease, background-color 0.3s ease;

  -o-transition: opacity 0.5s ease, background-color 0.3s ease;

  transition: opacity 0.5s ease, background-color 0.3s ease;

}

#burgerBtn.active span:nth-child(3) {

  top: calc(50% - 3px);

  -webkit-transform: rotate(-45deg);

  -ms-transform: rotate(-45deg);

  transform: rotate(-45deg);

  -webkit-transition: top 0.5s ease, transform 0.5s 0.5s ease, background-color 0.3s ease;

  -moz-transition: top 0.5s ease, transform 0.5s 0.5s ease, background-color 0.3s ease;

  -o-transition: top 0.5s ease, transform 0.5s 0.5s ease, background-color 0.3s ease;

  transition: top 0.5s ease, transform 0.5s 0.5s ease, background-color 0.3s ease;

}

#burgerBtn.close span:nth-child(1) {

  top: 0;

  -webkit-transform: rotate(0);

  -ms-transform: rotate(0);

  transform: rotate(0);

  -webkit-transition: top 0.5s 0.5s ease, transform 0.5s ease, background-color 0.3s 0.5s ease;

  -moz-transition: top 0.5s 0.5s ease, transform 0.5s ease, background-color 0.3s 0.5s ease;

  -o-transition: top 0.5s 0.5s ease, transform 0.5s ease, background-color 0.3s 0.5s ease;

  transition: top 0.5s 0.5s ease, transform 0.5s ease, background-color 0.3s 0.5s ease;

}

#burgerBtn.close span:nth-child(2) {

  opacity: 1;

  -webkit-transition: opacity 0.5s 0.5s ease, background-color 0.3s 0.5s ease;

  -moz-transition: opacity 0.5s 0.5s ease, background-color 0.3s 0.5s ease;

  -o-transition: opacity 0.5s 0.5s ease, background-color 0.3s 0.5s ease;

  transition: opacity 0.5s 0.5s ease, background-color 0.3s 0.5s ease;

}

#burgerBtn.close span:nth-child(3) {

  top: calc(100% - 6px);

  -webkit-transform: rotate(0);

  -ms-transform: rotate(0);

  transform: rotate(0);

  -webkit-transition: top 0.5s 0.5s ease, transform 0.5s ease, background-color 0.3s 0.5s ease;

  -moz-transition: top 0.5s 0.5s ease, transform 0.5s ease, background-color 0.3s 0.5s ease;

  -o-transition: top 0.5s 0.5s ease, transform 0.5s ease, background-color 0.3s 0.5s ease;

  transition: top 0.5s 0.5s ease, transform 0.5s ease, background-color 0.3s 0.5s ease;

}

#burgerBtn.darkMode span {

  background-color: #102b55;

}



@keyframes burger {

  0% {

    top: 0;

    -webkit-transform: rotate(0);

    -ms-transform: rotate(0);

    transform: rotate(0);

  }

  50% {

    top: calc(50% - 3px);

    -webkit-transform: rotate(0);

    -ms-transform: rotate(0);

    transform: rotate(0);

  }

  100% {

    top: calc(50% - 3px);

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

  }

}

@keyframes burger2 {

  0% {

    top: calc(100% - 6px);

    -webkit-transform: rotate(0);

    -ms-transform: rotate(0);

    transform: rotate(0);

  }

  50% {

    top: calc(50% - 3px);

    -webkit-transform: rotate(0);

    -ms-transform: rotate(0);

    transform: rotate(0);

  }

  100% {

    top: calc(50% - 3px);

    -webkit-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    transform: rotate(-45deg);

  }

}

body.open {

  overflow: hidden;

}

body.open .mainMenu {

  -webkit-transform: translateX(0);

  -ms-transform: translateX(0);

  transform: translateX(0);

}



#fp-nav ul li a span, .fp-slidesNav ul li a span {

  background-color: #fff;

}



.darkMode header .logo svg path {

  fill: #102b55;

  -webkit-transition: fill 0.3s 0.5s ease;

  -moz-transition: fill 0.3s 0.5s ease;

  -o-transition: fill 0.3s 0.5s ease;

  transition: fill 0.3s 0.5s ease;

}

.darkMode header #burgerBtn span {

  background-color: #102b55;

}

.darkMode .menuLite ul li:not(:last-child):after {

  background-color: #102b55;

  -webkit-transition: background-color 0.3s 0.5s ease;

  -moz-transition: background-color 0.3s 0.5s ease;

  -o-transition: background-color 0.3s 0.5s ease;

  transition: background-color 0.3s 0.5s ease;

}

.darkMode .menuLite ul li a {

  color: #102b55;

  -webkit-transition: color 0.3s 0.5s ease;

  -moz-transition: color 0.3s 0.5s ease;

  -o-transition: color 0.3s 0.5s ease;

  transition: color 0.3s 0.5s ease;

}

.darkMode #fp-nav ul li a span,

.darkMode .fp-slidesNav ul li a span {

  background-color: rgba(16, 43, 85, 0.4);

  -webkit-transition: background-color 0.3s 0.5s ease;

  -moz-transition: background-color 0.3s 0.5s ease;

  -o-transition: background-color 0.3s 0.5s ease;

  transition: background-color 0.3s 0.5s ease;

}

.darkMode #fp-nav ul li a.active span, .darkMode #fp-nav ul li:hover a.active span, .darkMode .fp-slidesNav ul li a.active span, .darkMode .fp-slidesNav ul li:hover a.active span {

  background-color: #102b55;

  -webkit-transition: background-color 0.3s 0.5s ease;

  -moz-transition: background-color 0.3s 0.5s ease;

  -o-transition: background-color 0.3s 0.5s ease;

  transition: background-color 0.3s 0.5s ease;

}

.darkMode .navSection {

  border-color: #102b55;

  -webkit-transition: border-color 0.3s 0.5s ease;

  -moz-transition: border-color 0.3s 0.5s ease;

  -o-transition: border-color 0.3s 0.5s ease;

  transition: border-color 0.3s 0.5s ease;

}

.darkMode .navSection svg path {

  fill: #102b55;

  -webkit-transition: fill 0.3s 0.5s ease;

  -moz-transition: fill 0.3s 0.5s ease;

  -o-transition: fill 0.3s 0.5s ease;

  transition: fill 0.3s 0.5s ease;

}



.backgroundImg {

  position: absolute;

  left: 0;

  top: 0;

  z-index: -1;

  width: 100%;

  height: 100%;

}

.backgroundImg img {

  z-index: -1;

}



.top-page .backgroundImg {

  height: calc(var(--vh,1vh)*100);

}



.page-accueil section {

  padding: 0;

}

.page-accueil .fp-tableCell {

  padding: 50px 10% 50px 10%;

}

.page-accueil .menuLite #quickBtn {

  opacity: 0;

}

.page-accueil .menuLite #quickBtn a {

  pointer-events: none;

  cursor: default;

  text-decoration: none;

}

.page-accueil .menuLite #quickBtn a.link.blue, .page-accueil .menuLite #quickBtn a.link.opaq {

  background-color: #97b2c6;

  color: #fff;

}

.page-accueil .menuLite #quickBtn a.link.blue:hover, .page-accueil .menuLite #quickBtn a.link.opaq:hover {

  background-color: #081f43;

}

.page-accueil .menuLite #quickBtn.fixed {

  opacity: 1;

  -webkit-transition: opacity 0.3s 0.5s ease;

  -moz-transition: opacity 0.3s 0.5s ease;

  -o-transition: opacity 0.3s 0.5s ease;

  transition: opacity 0.3s 0.5s ease;

}

.page-accueil .menuLite #quickBtn.fixed a {

  pointer-events: initial;

  cursor: pointer;

  box-shadow: 5px 5px 15px -10px #000;

}

.page-accueil main {

  height: 100vh;

  background-color: #102b55;

}

.page-accueil section {

  height: 100vh;

  position: relative;

  display: flex;

  align-items: center;

}

.page-accueil .top-page .container-fluid {

  display: flex;

  align-items: center;

  justify-content: center;

}

.page-accueil .top-page .row {

  justify-content: center;

}

.page-accueil .top-page .backgroundImg div {

  width: 100%;

  height: 100%;

  position: absolute;

  display: block;

  background-size: 100% 100%;

  background-position: center;

  mask: url("../img/circle.svg") center;

  mask-size: 90%;

  mask-repeat: no-repeat;

  -webkit-mask: url("../img/circle.svg") center;

  -webkit-mask-size: 90%;

  -webkit-mask-repeat: no-repeat;

  z-index: 1;

}

.page-accueil .top-page .backgroundImg:after {

  content: '';

  width: 100%;

  height: 100%;

  display: block;

  background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 46%, #000000 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 70%, #000000 70%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);

  position: absolute;

  top: 0;

  z-index: 0;

  mask: url("../img/circleBiger.svg") center;

  mask-size: 100%;

  mask-repeat: no-repeat;

  -webkit-mask: url("../img/circleBiger.svg") center;

  -webkit-mask-size: 100%;

  -webkit-mask-repeat: no-repeat;

  opacity: 0.3;

}

.page-accueil .top-page h1 {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-transform: uppercase;

}

.page-accueil .top-page h1 span {

  font-size: 2.5em;

  font-weight: bold;

}

.page-accueil .top-page h1 strong {

  font-size: 4em;

  letter-spacing: 0.3em;

  margin: 10px 0;

  position: relative;

  font-weight: 400;

}

.page-accueil .top-page h1 strong:before {

  left: 0;

  top: 0;

  position: absolute;

  content: attr(data-colored);

  width: 0;

  overflow: hidden;

  white-space: nowrap;

  animation: dataColored 3s forwards cubic-bezier(0, 0, 0.38, 1);

  color: #102b55;

  z-index: 1;

}

.page-accueil .top-page h1 small {

  font-size: 1.3em;

  letter-spacing: 0.3em;

}

.page-accueil .top-page #quickBtn {

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 15px;

}

.page-accueil .top-page #quickBtn .link {

  margin: 0 15px;

}

.page-accueil .top-page .scrollLink {

  display: none;

}

.page-accueil .after-top .titleStyleFront {

  position: relative;

  font-size: 4em;

  text-transform: uppercase;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: flex-start;

}

.page-accueil .after-top .titleStyleFront span {

  margin-left: -40px;

  margin-bottom: -95px;

  font-size: 140px;

  font-weight: bold;

  letter-spacing: 0;

  opacity: 0.45;

}

.page-accueil .after-top .t-2, .page-accueil .after-top .block-text p {

  text-shadow: 1px 1px 20px #102b55;

}

.page-accueil .after-top .block-text {

  margin-top: 30px;

}

.page-accueil .after-top .link {

  margin-top: 30px;

}

.page-accueil .after-top .backgroundImg:before {

  content: '';

  width: 100%;

  height: 100%;

  display: block;

  position: absolute;

  z-index: 0;

  background: linear-gradient(90deg, rgba(16, 43, 85, 0.7) 0%, rgba(16, 43, 85, 0) 80%, rgba(16, 43, 85, 0) 100%);

}

.page-accueil .after-top .backgroundImg img {

  -o-object-position: top;

  object-position: top;

}

.page-accueil footer {

  background-color: #081f43;

  width: 100%;

  position: fixed;

  bottom: 0;

  -webkit-transform: translateY(100%);

  -ms-transform: translateY(100%);

  transform: translateY(100%);

  -webkit-transition: transform 0.5s ease;

  -moz-transition: transform 0.5s ease;

  -o-transition: transform 0.5s ease;

  transition: transform 0.5s ease;

}

.page-accueil footer .footerOpener {

  position: absolute;

  cursor: pointer;

  top: -39px;

  left: calc(50% - 110px);

  background-color: #081f43;

  padding: 5px;

  height: 40px;

  width: 220px;

  border-radius: 15px 15px 0 0;

  display: flex;

  align-items: center;

  justify-content: center;

  -webkit-transition: background-color 0.5s ease, opacity 0.3s 0.6s ease;

  -moz-transition: background-color 0.5s ease, opacity 0.3s 0.6s ease;

  -o-transition: background-color 0.5s ease, opacity 0.3s 0.6s ease;

  transition: background-color 0.5s ease, opacity 0.3s 0.6s ease;

  visibility: hidden;

  user-select: none;

  pointer-events: none;

  opacity: 0;

}

.page-accueil footer .footerOpener span {

  font-weight: bolder;

  text-transform: uppercase;

}

.page-accueil footer.open {

  -webkit-transform: translateY(0);

  -ms-transform: translateY(0);

  transform: translateY(0);

}



body.footerMode footer .footerOpener {

  visibility: visible;

  user-select: initial;

  pointer-events: initial;

  opacity: 1;

}



.navSection {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 60px;

  height: 60px;

  position: absolute;

  bottom: 4vh;

  left: calc(50% - 30px);

  border: 2px solid #fff;

  border-radius: 50%;

  padding: 15px;

}

.navSection svg {

  display: block;

  width: 100%;

}



@keyframes dataColored {

  0% {

    width: 0;

  }

  100% {

    width: 4.5em;

  }

}

.third-section .fp-tableCell {

  padding: 0 !important;

}

.third-section .row, .third-section .container-fluid {

  height: 100%;

}

.third-section .col-lg-6 {

  background-color: #102b55;

  margin-left: 50%;

  padding: 50px;

}

.third-section .col-12 {

  display: flex;

  align-items: center;

  justify-content: center;

}

.third-section .col-12:first-child {

  margin-bottom: 30px;

}

.third-section .col-12:last-child {

  margin-top: 30px;

}

.third-section .col-12 .titleStyle {

  text-align: center;

}

.third-section .col-12 .titleStyle span {

  font-size: 180px;

  margin-bottom: -45px;

}

.third-section .col-xl-6 {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  margin: 15px 0;

}

.third-section .col-xl-6 > div {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

.third-section .col-xl-6 > div img {

  height: 80px;

  max-width: 80px;

}

.third-section .col-xl-6 > div strong {

  margin: 15px 0;

  text-transform: uppercase;

  font-size: 1.2rem;

  letter-spacing: 4px;

}

.third-section .col-xl-6 > div p {

  text-transform: uppercase;

}

.third-section .link:hover {

  background-color: #fff;

  color: #102b55;

}

.third-section .backgroundImg {

  width: 50%;

}



.fourth-section {

  background-color: #102b55;

  /*a[data-fancybox]{

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    max-width: 500px;

    picture{

      @extend %coverPicture;

      img{

        @extend %coverPicture;

      }

    }

    svg{

      position: absolute;

      left: calc(50% - 70px);

      top: calc(50% - 70px);

      width: 140px;

      height: 140px;

      z-index: 1;

      path{

        fill:#fff;

      }

    }

  }

  .points{

    max-width: 500px;

    picture{

      @extend %coverPicture;

      img{

        @extend %coverPicture;

      }

    }

    &:after{

      width: 100%;

      left: 10%;

      bottom: -10%;

    }

  }*/

}

.fourth-section .col-12 {

  display: flex;

  justify-content: center;

  align-items: center;

}

.fourth-section .col-12 > div {

  margin: 0 30px;

}

.fourth-section .col-12 > div:not(.combinaisons) {

  text-align: center;

}

.fourth-section .col-12 .titleStyle {

  margin-bottom: 65px;

}

.fourth-section .col-12 .combinaisons {

  margin: 0;

  position: relative;

  width: 300px;

  text-align: center;

}

.fourth-section .col-12 .combinaisons .coqueSwiper .swiper-wrapper .swiper-slide {

  opacity: 0 !important;

}

.fourth-section .col-12 .combinaisons .coqueSwiper .swiper-wrapper .swiper-slide.swiper-slide-active {

  opacity: 1 !important;

}



.fifth-section .fp-tableCell {

  padding: 0 !important;

}

.fifth-section .row, .fifth-section .container-fluid {

  height: 100%;

}

.fifth-section .col-lg-6 {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  background-color: #102b55;

  padding: 100px 50px 50px 50px;

}

.fifth-section .col-lg-6 > div {

  max-width: 100%;

  width: 500px;

}

.fifth-section .col-lg-6 > div .link {

  margin-top: 30px;

}

.fifth-section .col-lg-6 .t-2 {

  margin-bottom: 10px;

}

.fifth-section .col-lg-6 .swiper {

  padding: 30px 0;

}

.fifth-section .col-lg-6 .swiper-slide p {

  margin: 10px 0;

}

.fifth-section .col-lg-6 .swiper-pagination {

  text-align: left;

}

.fifth-section blockquote p {

  padding: 40px 0;

  display: table;

  position: relative;

  line-height: 1.3;

}

.fifth-section blockquote p:before, .fifth-section blockquote p:after {

  content: '"';

  font-size: 4rem;

  letter-spacing: 0;

  color: #97b2c6;

  position: absolute;

  height: 40px;

}

.fifth-section blockquote p:before {

  top: 0;

  left: 0;

}

.fifth-section blockquote p:after {

  font-size: 3rem;

  height: 30px;

  bottom: 35px;

  margin-left: 5px;

}

.fifth-section .backgroundImg {

  width: 50%;

  left: auto;

  right: 0;

}



.swiper-pagination {

  bottom: 5px;

}

.swiper-pagination .swiper-pagination-bullet {

  width: 10px;

  height: 10px;

  background-color: #fff;

  opacity: 1;

  border-radius: 10px;

  -webkit-transition: width 0.3s ease;

  -moz-transition: width 0.3s ease;

  -o-transition: width 0.3s ease;

  transition: width 0.3s ease;

}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {

  width: 25px;

}



.sixth-section {

  background-color: #fff;

}

.sixth-section .grid div {

  color: #102b55;

}

.sixth-section .grid div p {

  margin: 5px 0;

  font-size: 0.9rem;

}

.sixth-section .grid div .link {

  margin-top: 10px;

}

.sixth-section .grid div:last-child {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

}

.sixth-section .swiper {

  padding: 10px 0 40px 0;

  width: 100%;

}

.sixth-section .swiper-pagination {

  bottom: 5px;

}

.sixth-section .swiper-pagination .swiper-pagination-bullet {

  background-color: #102b55;

}



.grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: repeat(2, 1fr);

  grid-column-gap: 15px;

  grid-row-gap: 15px;

}

.grid div:nth-child(1) {

  grid-area: 1 / 1 / 3 / 3;

}

.grid div:nth-child(2) {

  grid-area: 1 / 3 / 2 / 4;

}

.grid div:nth-child(3) {

  grid-area: 1 / 4 / 2 / 5;

}

.grid div:nth-child(4) {

  grid-area: 2 / 3 / 3 / 4;

}

.grid div:nth-child(5) {

  grid-area: 2 / 4 / 3 / 5;

}



.seventh-section {

  background-color: #102b55;

}

.seventh-section .col-xl-5 {

  position: relative;

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

}

.seventh-section .col-xl-7 {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

}

.seventh-section .col-xl-7 > div {

  margin: 15px 0;

}

.seventh-section .col-12 {

  display: flex;

  justify-content: center;

  margin-top: 50px;

}



.block-post {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.block-post .thumbnail {

  width: 200px;

  height: 100%;

}

.block-post .content {

  width: calc(100% - 220px);

}

.block-post .content > div {

  display: flex;

  flex-direction: column;

}

.block-post .content > div span {

  letter-spacing: 4px;

  text-transform: uppercase;

}

.block-post .content > div span:first-child {

  font-size: 2em;

}

.block-post .content a {

  padding: 5px 10px;

  position: relative;

  font-weight: bold;

  margin-top: 10px;

  display: flex;

  align-items: center;

}

.block-post .content a:before {

  content: '+';

  margin-left: -10px;

  margin-right: 5px;

}

.block-post .content a:hover {

  color: rgba(255, 255, 255, 0.75);

}

.block-post h3 {

  margin: 15px 0;

}



.top-page {

  height: calc(var(--vh,1vh)*100);

  display: flex;

  align-items: flex-end;

}



.page-piscines .top-page {

  padding-bottom: 100px;

}

.page-piscines .top-page .col-12 {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

.page-piscines .top-page .col-12 .link {

  margin-top: 15px;

}

.page-piscines .top-page .row {

  justify-content: center;

}

.page-piscines .navSection {

  position: initial;

  margin-top: 15px;

}



.filterOpen {

  width: 60px;

  height: 60px;

  padding: 10px;

  position: absolute;

  left: 0;

  bottom: calc(50% - 30px);

  background-color: #081f43;

  border-radius: 15px 0 0 15px;

  z-index: 1;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  justify-content: space-around;

  align-items: center;

  visibility: hidden;

  max-height: 0;

  overflow: hidden;

  pointer-events: none;

  -webkit-transform: translateX(60px);

  -ms-transform: translateX(60px);

  transform: translateX(60px);

  -webkit-transition: transform 0.3s ease;

  -moz-transition: transform 0.3s ease;

  -o-transition: transform 0.3s ease;

  transition: transform 0.3s ease;

}

.filterOpen span {

  display: block;

  position: relative;

  width: 100%;

  height: 4px;

  background-color: #fff;

  border-radius: 2px;

}

.filterOpen span:before {

  content: '';

  width: 10px;

  height: 10px;

  display: block;

  background-color: #081f43;

  border: 2px solid #fff;

  border-radius: 50%;

  position: absolute;

  top: calc(50% - 5px);

  left: 20%;

  -webkit-transition: left 0.3s ease;

  -moz-transition: left 0.3s ease;

  -o-transition: left 0.3s ease;

  transition: left 0.3s ease;

}

.filterOpen span:nth-child(2):before {

  left: 60%;

}

.filterOpen span:nth-child(3):before {

  left: 40%;

}

.filterOpen:hover span:first-child:before {

  left: 50%;

}

.filterOpen:hover span:nth-child(2):before {

  left: 40%;

}

.filterOpen:hover span:last-child:before {

  left: 10%;

}



#filterBox {

  width: 1200px;

  max-width: calc(100% - 30px);

  position: absolute;

  left: calc(50% - 600px);

  bottom: -60px;

  background-color: #081f43;

  padding: 30px;

  border-radius: 50px;

  display: flex;

  z-index: 2;

}

#filterBox .closeFilter {

  display: none;

}

#filterBox .dimChoice {

  width: 60%;

  display: flex;

  align-items: center;

}

#filterBox .dimChoice > div {

  width: 50%;

  display: flex;

  align-items: center;

  justify-content: flex-start;

}

#filterBox .dimChoice > div span {

  text-transform: uppercase;

  letter-spacing: 2px;

  font-size: 0.9rem;

}

#filterBox .dimChoice > div > div {

  width: 100%;

  margin: 0 25px;

  height: 2px;

}

#filterBox .dimChoice > div > div .noUi-connect {

  background: #fff;

}

#filterBox .dimChoice > div > div .noUi-handle {

  height: 18px;

  width: 18px;

  top: -9px;

  right: -9px;

  border-radius: 9px;

  border: 2px solid #081f43;

  box-shadow: none;

  cursor: pointer;

}

#filterBox .dimChoice > div > div .noUi-handle:after, #filterBox .dimChoice > div > div .noUi-handle:before {

  content: none;

}

#filterBox .dimChoice > div > div .noUi-tooltip {

  background-color: transparent;

  border: none;

  color: #fff;

  font-size: 0.8em;

  padding: 2.5px;

}

#filterBox .accessChoice {

  width: 40%;

  display: flex;

  justify-content: flex-end;

}

#filterBox .accessChoice > div {

  display: flex;

  flex-direction: column;

  margin: 10px 15px;

}

#filterBox .resetAll {

  position: absolute;

  padding: 5px 10px;

  text-transform: uppercase;

  font-weight: bolder;

  background-color: #97b2c6;

  text-align: center;

  border-radius: 15px;

  width: 210px;

  left: calc(50% - 105px);

  bottom: -13px;

  cursor: pointer;

  -webkit-transition: background-color 0.3s ease;

  -moz-transition: background-color 0.3s ease;

  -o-transition: background-color 0.3s ease;

  transition: background-color 0.3s ease;

}

#filterBox .resetAll:hover {

  background-color: #081f43;

}

#filterBox.fixed {

  padding: 70px 30px 30px 30px;

  position: fixed;

  right: 0;

  left: auto;

  bottom: 0;

  width: 500px;

  height: 100%;

  z-index: 1001;

  border-radius: 0;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  transform-origin: 100% 100%;

  -webkit-transform: translateX(500px);

  -ms-transform: translateX(500px);

  transform: translateX(500px);

}

#filterBox.fixed .closeFilter {

  display: block;

  position: absolute;

  right: 10px;

  top: 10px;

  color: #fff;

  cursor: pointer;

  font-size: 1.2em;

  font-weight: bold;

}

#filterBox.fixed .dimChoice {

  width: 100%;

  flex-direction: column;

}

#filterBox.fixed .dimChoice > div {

  width: 100%;

  flex-direction: column;

  margin-bottom: 10px;

}

#filterBox.fixed .dimChoice > div:first-child {

  margin-bottom: 25px;

}

#filterBox.fixed .dimChoice > div span {

  width: 100%;

  margin-bottom: 35px;

}

#filterBox.fixed .dimChoice > div > div {

  width: calc(100% - 30px);

}

#filterBox.fixed .accessChoice {

  width: 100%;

  justify-content: space-between;

  margin-top: 15px;

}

#filterBox.fixed .filterOpen {

  visibility: visible;

  max-height: 60px;

  pointer-events: initial;

  left: -60px;

  -webkit-transform: translateX(0);

  -ms-transform: translateX(0);

  transform: translateX(0);

}

#filterBox.fixed .resetAll {

  bottom: 15px;

}

#filterBox.open {

  -webkit-transform: translateX(0);

  -ms-transform: translateX(0);

  transform: translateX(0);

  -webkit-transition: transform 0.3s ease;

  -moz-transition: transform 0.3s ease;

  -o-transition: transform 0.3s ease;

  transition: transform 0.3s ease;

}



.gammes {

  color: #102b55;

  padding-top: 20px;

  padding-bottom: 20px;

}

.gammes#gammePisicne {

  padding-top: 110px;

}

.gammes .row {

  justify-content: center;

}

.gammes#gammePisicne {

  background-color: #102b55;

}
.gammes#gammePisicne.hide + .gammes, .gammes#gammePisicne.hide + .gammes.hide + .gammes{
  padding-top: 110px;
}

.gammes#gammePisicne .titleStyle small {

  color: #fff;

}
.gammes#gammePisicne .titleStyle.lite span{
  opacity: 0.4;
}

.gammes#gammePisicne .poolBox > div:not(.openList) span {

  color: #fff;

}

.gammes#gammePisicne .poolBox .openList span, .gammes#gammePisicne .poolBox .openList > .filter {

  background-color: #102b55;

  border-color: #fff;

  color: #fff;

}

.gammes#gammePisicne .poolBox .openList span:hover, .gammes#gammePisicne .poolBox .openList > .filter:hover {

  background-color: #fff;

  color: #102b55;

}

.gammes#gammePisicne .poolBox .openList ul {

  background-color: #fff;

}

.gammes#gammePisicne .poolBox .openList ul li a {

  color: #102b55;

}

.gammes:last-child {

  padding-bottom: 50px;

}

.gammes .titleStyle small {

  color: #102b55;

}



.poolBox {

  margin: 15px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  width: calc(20% - 30px);

}

.poolBox.partition-carree > div:not(.openList) img {

  max-height: 180px;

}

.poolBox.concerto-mini > div:not(.openList) img , .poolBox.yuka > div:not(.openList) img{

  max-height: 200px;

}

.poolBox > div:not(.openList) {

  padding: 15px;

  display: flex;

  flex-direction: column;

  align-items: center;

}

.poolBox > div:not(.openList) img {

  max-height: 250px;

}

.poolBox > div:not(.openList) span {

  text-transform: uppercase;

  color: #102b55;

  display: block;

  margin-top: 20px;

  font-weight: bold;

  letter-spacing: 4px;

  text-align: center;

}

.poolBox .openList {

  position: relative;

}

.poolBox .openList span, .poolBox .openList > .filter {

  color: #102b55;

  padding: 10px 20px;

  text-transform: uppercase;

  display: inline-block;

  background-color: #fff;

  border-radius: 20px;

  letter-spacing: 1px;

  font-size: 0.8em;

  border: 1px solid #102b55;

  line-height: 1.3;

  text-align: center;

  cursor: pointer;

  position: relative;

  z-index: 1;

  user-select: none;

  -webkit-transition: background-color 0.3s ease, color 0.3s ease;

  -moz-transition: background-color 0.3s ease, color 0.3s ease;

  -o-transition: background-color 0.3s ease, color 0.3s ease;

  transition: background-color 0.3s ease, color 0.3s ease;

}

.poolBox .openList:hover span, .poolBox .openList:hover > .filter {

  background-color: #081f43;

  color: #fff;

}

.poolBox .openList ul {

  position: absolute;

  left: 0;

  bottom: calc(100% - 20px);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  background-color: #102b55;

  border-radius: 30px 30px 0 0;

  padding: 15px 10px 30px 15px;

  width: 100%;

  z-index: 0;

  transform-origin: 100% 100%;

  -webkit-transform: scaleY(0);

  -ms-transform: scaleY(0);

  transform: scaleY(0);

  -webkit-transition: transform 0.3s 0.2s ease;

  -moz-transition: transform 0.3s 0.2s ease;

  -o-transition: transform 0.3s 0.2s ease;

  transition: transform 0.3s 0.2s ease;

}

.poolBox .openList ul li {

  opacity: 0;

  text-align: center;

  -webkit-transition: opacity 0.3s ease;

  -moz-transition: opacity 0.3s ease;

  -o-transition: opacity 0.3s ease;

  transition: opacity 0.3s ease;

}

.poolBox .openList ul li a {

  color: #fff;

  padding: 5px 10px;

  text-transform: uppercase;

  display: block;

}

.poolBox .openList.open span {

  background-color: #081f43;

  color: #fff;

}

.poolBox .openList.open ul {

  -webkit-transform: scaleY(1);

  -ms-transform: scaleY(1);

  transform: scaleY(1);

  -webkit-transition: transform 0.3s ease;

  -moz-transition: transform 0.3s ease;

  -o-transition: transform 0.3s ease;

  transition: transform 0.3s ease;

}

.poolBox .openList.open ul li {

  opacity: 1;

  -webkit-transition: opacity 0.3s 0.2s ease;

  -moz-transition: opacity 0.3s 0.2s ease;

  -o-transition: opacity 0.3s 0.2s ease;

  transition: opacity 0.3s 0.2s ease;

}



.page-equipements .titleStyle {

  display: none;

}

.page-equipements .top-page {

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  padding-bottom: 20px;

}

.page-equipements .top-page .navSection {

  position: initial;

}

.page-equipements .boxEquipement {

  position: absolute;

  width: 500px;

  height: 500px;

  top: calc(50% - 250px);

  right: 5%;

  background-color: #102b55;

  z-index: 10;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 30px;

  opacity: 0;

  pointer-events: none;

  visibility: hidden;

  text-align: center;

  -webkit-transition: opacity 0.3s ease-in-out;

  -moz-transition: opacity 0.3s ease-in-out;

  -o-transition: opacity 0.3s ease-in-out;

  transition: opacity 0.3s ease-in-out;

}

.page-equipements .boxEquipement .closeEquipement {

  position: absolute;

  right: 5px;

  top: 5px;

  font-weight: bolder;

  cursor: pointer;

}

.page-equipements .boxEquipement .closeEquipement {

  display: none;

}

.page-equipements .boxEquipement * {

  opacity: 0;

  -webkit-transition: opacity 0.3s 0.2s ease-in-out;

  -moz-transition: opacity 0.3s 0.2s ease-in-out;

  -o-transition: opacity 0.3s 0.2s ease-in-out;

  transition: opacity 0.3s 0.2s ease-in-out;

}

.page-equipements .boxEquipement .poolBox {

  width: 100%;

}

.page-equipements .boxEquipement p {

  margin: 20px auto 10px auto;

  text-align: center;

}

.page-equipements .boxEquipement.is-visible {

  opacity: 1;

  pointer-events: initial;

  visibility: visible;

}

.page-equipements .boxEquipement.is-visible .closeEquipement {

  display: block;

}

.page-equipements .boxEquipement.is-visible * {

  opacity: 1;

}

.page-equipements .boxEquipement .openList ul {

  background-color: #fff;

}

.page-equipements .boxEquipement .openList ul li a {

  color: #102b55;

}

.page-equipements .equipementShow {

  width: 40px;

  height: 40px;

  background-color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  margin: 0 5px;

  color: #102b55;

  font-size: 1.5rem;

  font-weight: bolder;

  cursor: pointer;

  position: absolute;

}

.page-equipements .equipementShow[data-cible="volet-hors-sol"] {

  left: calc(20% - 20px);

  bottom: calc(40% - 20px);

}

.page-equipements .equipementShow[data-cible="pompe-a-chaleur"] {

  left: calc(55% - 20px);

  top: calc(30% - 20px);

}

.page-equipements .equipementShow[data-cible="petit-bassin"] {

  left: calc(42.5% - 20px);

  top: calc(42.5% - 20px);

}

.page-equipements .equipementShow[data-cible="margelle"] {

  left: calc(45% - 20px);

  bottom: calc(20% - 50px);

}

.page-equipements .equipementShow[data-cible="local-technique"] {

  left: calc(35% - 20px);

  top: calc(40% - 50px);

}

.page-equipements .equipementShow.is-visible {

  background-color: #102b55;

  color: #fff;

}

.page-equipements .poolBox {

  width: calc(33.33% - 30px);

}

.page-equipements .gammes#gammePisicne {

  padding-top: 50px;

}



.openVideo {

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  max-height: 400px;

}

.openVideo svg {

  position: absolute;

  left: calc(50% - 70px);

  top: calc(50% - 70px);

  width: 140px;

  height: 140px;

  z-index: 1;

}

.openVideo svg path {

  fill: #fff;

}



.paralax {

  height: 400px;

  background-size: cover;

  background-attachment: fixed;

  background-position: center;

}



.single-piscine .backgroundImg:before, .page-equipements .backgroundImg:before, .single-equipement .backgroundImg:before, .single-pisciniste .backgroundImg:before {

  content: '';

  width: 100%;

  height: 100%;

  display: block;

  position: absolute;

  z-index: 0;

  background-color: rgba(0, 0, 0, 0.5);

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%);

}



.page-piscines .backgroundImg:before, .page-excel-piscine .backgroundImg:before {

  content: '';

  width: 100%;

  height: 100%;

  display: block;

  position: absolute;

  z-index: 0;

  background-color: rgba(0, 0, 0, 0.5);

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.6) 100%);

}



.single-pisciniste .fancybox__content#devisForm {

  background-color: #102b55;

  width: 800px;

  max-width: 100%;

}



.single-piscine .top-page .col-12, .single-equipement .top-page .col-12, .single-pisciniste .top-page .col-12 {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.single-piscine .top-page .col-12 .link, .single-equipement .top-page .col-12 .link, .single-pisciniste .top-page .col-12 .link {

  margin-top: 15px;

}

.single-piscine .after-top, .single-equipement .after-top, .single-pisciniste .after-top {

  color: #102b55;

}
.single-piscine .after-top p a, .single-equipement .after-top p a, .single-pisciniste .after-top p a{
  color: #102b55;
}

.single-piscine .after-top .col-12, .single-equipement .after-top .col-12, .single-pisciniste .after-top .col-12 {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-bottom: 50px;

}

.single-piscine .after-top .col-12 .t-2, .single-equipement .after-top .col-12 .t-2, .single-pisciniste .after-top .col-12 .t-2 {

  margin-bottom: 50px;

  color: #102b55;

}

.single-piscine .after-top .col-12 .link, .single-equipement .after-top .col-12 .link, .single-pisciniste .after-top .col-12 .link {

  letter-spacing: 0;

}

.single-piscine .after-top .col-12 .link.active, .single-equipement .after-top .col-12 .link.active, .single-pisciniste .after-top .col-12 .link.active {

  background-color: #102b55;

  color: #fff;

}

.single-piscine .after-top .col-lg-5, .single-equipement .after-top .col-lg-5, .single-pisciniste .after-top .col-lg-5 {

  display: flex;

  justify-content: center;

  align-items: center;

}

.single-piscine .after-top .col-lg-5 .equipmentSwiper, .single-equipement .after-top .col-lg-5 .equipmentSwiper, .single-pisciniste .after-top .col-lg-5 .equipmentSwiper {

  padding: 30px 0;

  height: 400px;

}

.single-piscine .after-top .col-lg-5 .equipmentSwiper .swiper-pagination .swiper-pagination-bullet, .single-equipement .after-top .col-lg-5 .equipmentSwiper .swiper-pagination .swiper-pagination-bullet, .single-pisciniste .after-top .col-lg-5 .equipmentSwiper .swiper-pagination .swiper-pagination-bullet {

  background-color: #102b55;

}

.single-piscine .after-top .col-lg-5 img, .single-equipement .after-top .col-lg-5 img, .single-pisciniste .after-top .col-lg-5 img {

  max-height: 450px;

}

.single-piscine .after-top .col-lg-7, .single-equipement .after-top .col-lg-7, .single-pisciniste .after-top .col-lg-7 {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

}

.single-piscine .after-top .block-text, .single-equipement .after-top .block-text, .single-pisciniste .after-top .block-text {

  padding-left: 0;

}

.single-piscine .after-top .block-text h2, .single-equipement .after-top .block-text h2, .single-pisciniste .after-top .block-text h2 {

  text-transform: uppercase;

  font-weight: bolder;

  margin-bottom: 10px;

}

.single-piscine .after-top .block-text ul, .single-equipement .after-top .block-text ul, .single-pisciniste .after-top .block-text ul {

  margin: 10px 0;

  padding-left: 20px;

}

.single-piscine .after-top .block-text ul li, .single-equipement .after-top .block-text ul li, .single-pisciniste .after-top .block-text ul li {

  color: #102b55;

  list-style: disc;

  margin: 5px 0;

}

.single-piscine .after-top .block-text p a, .single-equipement .after-top .block-text p a, .single-pisciniste .after-top .block-text p a {

  color: #102b55;

}

.single-piscine .caracteristiques, .single-piscine .avantages, .single-equipement .caracteristiques, .single-equipement .avantages, .single-pisciniste .caracteristiques, .single-pisciniste .avantages {

  background-color: #102b55;

}

.single-piscine .caracteristiques .points, .single-piscine .avantages .points, .single-equipement .caracteristiques .points, .single-equipement .avantages .points, .single-pisciniste .caracteristiques .points, .single-pisciniste .avantages .points {

  display: flex;

  align-items: center;

  justify-content: center;

}

.single-piscine .caracteristiques .points > div, .single-piscine .avantages .points > div, .single-equipement .caracteristiques .points > div, .single-equipement .avantages .points > div, .single-pisciniste .caracteristiques .points > div, .single-pisciniste .avantages .points > div {

  position: relative;

  padding: 30px;

}

.single-piscine .caracteristiques .points > div span, .single-piscine .avantages .points > div span, .single-equipement .caracteristiques .points > div span, .single-equipement .avantages .points > div span, .single-pisciniste .caracteristiques .points > div span, .single-pisciniste .avantages .points > div span {

  position: absolute;

  display: block;

}

.single-piscine .caracteristiques .points > div span.longeurBar, .single-piscine .avantages .points > div span.longeurBar, .single-equipement .caracteristiques .points > div span.longeurBar, .single-equipement .avantages .points > div span.longeurBar, .single-pisciniste .caracteristiques .points > div span.longeurBar, .single-pisciniste .avantages .points > div span.longeurBar {

  width: calc(100% - 60px);

  border-bottom: 2px solid #fff;

  top: -5px;

  left: 30px;

  padding-bottom: 5px;

  text-align: right;

}

.single-piscine .caracteristiques .points > div span.largeurBar, .single-piscine .avantages .points > div span.largeurBar, .single-equipement .caracteristiques .points > div span.largeurBar, .single-equipement .avantages .points > div span.largeurBar, .single-pisciniste .caracteristiques .points > div span.largeurBar, .single-pisciniste .avantages .points > div span.largeurBar {

  height: calc(100% - 60px);

  border-right: 2px solid #fff;

  top: 30px;

  left: -5px;

  padding-right: 5px;

  writing-mode: vertical-rl;

}

.single-piscine .caracteristiques .col-lg-7, .single-piscine .avantages .col-lg-7, .single-equipement .caracteristiques .col-lg-7, .single-equipement .avantages .col-lg-7, .single-pisciniste .caracteristiques .col-lg-7, .single-pisciniste .avantages .col-lg-7 {

  padding-left: 50px;

}

.single-piscine .caracteristiques .colors, .single-piscine .avantages .colors, .single-equipement .caracteristiques .colors, .single-equipement .avantages .colors, .single-pisciniste .caracteristiques .colors, .single-pisciniste .avantages .colors {

  display: flex;

  flex-wrap: wrap;

  margin-bottom: 30px;

}

.single-piscine .caracteristiques .colors h3, .single-piscine .avantages .colors h3, .single-equipement .caracteristiques .colors h3, .single-equipement .avantages .colors h3, .single-pisciniste .caracteristiques .colors h3, .single-pisciniste .avantages .colors h3 {

  width: 100%;

  margin-bottom: 20px;

  text-transform: uppercase;

  letter-spacing: 4px;

}

.single-piscine .caracteristiques .colors > div, .single-piscine .avantages .colors > div, .single-equipement .caracteristiques .colors > div, .single-equipement .avantages .colors > div, .single-pisciniste .caracteristiques .colors > div, .single-pisciniste .avantages .colors > div {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-right: 30px;

}

.single-piscine .caracteristiques .colors > div > div, .single-piscine .avantages .colors > div > div, .single-equipement .caracteristiques .colors > div > div, .single-equipement .avantages .colors > div > div, .single-pisciniste .caracteristiques .colors > div > div, .single-pisciniste .avantages .colors > div > div {

  width: 60px;

  height: 60px;

  display: block;

  border-radius: 50%;

}

.single-piscine .caracteristiques .colors > div span, .single-piscine .avantages .colors > div span, .single-equipement .caracteristiques .colors > div span, .single-equipement .avantages .colors > div span, .single-pisciniste .caracteristiques .colors > div span, .single-pisciniste .avantages .colors > div span {

  display: block;

  margin-top: 10px;

  text-transform: uppercase;

}

.single-piscine .caracteristiques .colors > div.blanc > div, .single-piscine .avantages .colors > div.blanc > div, .single-equipement .caracteristiques .colors > div.blanc > div, .single-equipement .avantages .colors > div.blanc > div, .single-pisciniste .caracteristiques .colors > div.blanc > div, .single-pisciniste .avantages .colors > div.blanc > div {

  background-color: #fff;

}

.single-piscine .caracteristiques .colors > div.vert > div, .single-piscine .avantages .colors > div.vert > div, .single-equipement .caracteristiques .colors > div.vert > div, .single-equipement .avantages .colors > div.vert > div, .single-pisciniste .caracteristiques .colors > div.vert > div, .single-pisciniste .avantages .colors > div.vert > div {

  background-color: #b3dabf;

}

.single-piscine .caracteristiques .colors > div.sable > div, .single-piscine .avantages .colors > div.sable > div, .single-equipement .caracteristiques .colors > div.sable > div, .single-equipement .avantages .colors > div.sable > div, .single-pisciniste .caracteristiques .colors > div.sable > div, .single-pisciniste .avantages .colors > div.sable > div {

  background-color: #e4e0c6;

}

.single-piscine .caracteristiques .colors > div.bleu > div, .single-piscine .avantages .colors > div.bleu > div, .single-equipement .caracteristiques .colors > div.bleu > div, .single-equipement .avantages .colors > div.bleu > div, .single-pisciniste .caracteristiques .colors > div.bleu > div, .single-pisciniste .avantages .colors > div.bleu > div {

  background-color: #b0d4e4;

}

.single-piscine .caracteristiques .colors > div.gris > div, .single-piscine .avantages .colors > div.gris > div, .single-equipement .caracteristiques .colors > div.gris > div, .single-equipement .avantages .colors > div.gris > div, .single-pisciniste .caracteristiques .colors > div.gris > div, .single-pisciniste .avantages .colors > div.gris > div {

  background-color: #e6e6e6;

}

.single-piscine .caracteristiques .mesures ul, .single-piscine .avantages .mesures ul, .single-equipement .caracteristiques .mesures ul, .single-equipement .avantages .mesures ul, .single-pisciniste .caracteristiques .mesures ul, .single-pisciniste .avantages .mesures ul {

  display: flex;

  flex-direction: column;

  width: 400px;

  max-width: 100%;

}

.single-piscine .caracteristiques .mesures ul li, .single-piscine .avantages .mesures ul li, .single-equipement .caracteristiques .mesures ul li, .single-equipement .avantages .mesures ul li, .single-pisciniste .caracteristiques .mesures ul li, .single-pisciniste .avantages .mesures ul li {

  margin: 15px 0;

  display: flex;

  align-items: center;

  position: relative;

}

.single-piscine .caracteristiques .mesures ul li p:first-child, .single-piscine .avantages .mesures ul li p:first-child, .single-equipement .caracteristiques .mesures ul li p:first-child, .single-equipement .avantages .mesures ul li p:first-child, .single-pisciniste .caracteristiques .mesures ul li p:first-child, .single-pisciniste .avantages .mesures ul li p:first-child {

  width: calc(100% - 100px);

  text-transform: uppercase;

  letter-spacing: 4px;

}

.single-piscine .caracteristiques .mesures ul li p:nth-child(2), .single-piscine .avantages .mesures ul li p:nth-child(2), .single-equipement .caracteristiques .mesures ul li p:nth-child(2), .single-equipement .avantages .mesures ul li p:nth-child(2), .single-pisciniste .caracteristiques .mesures ul li p:nth-child(2), .single-pisciniste .avantages .mesures ul li p:nth-child(2) {

  width: 100px;

}

.single-piscine .caracteristiques .msgAlerte, .single-piscine .avantages .msgAlerte, .single-equipement .caracteristiques .msgAlerte, .single-equipement .avantages .msgAlerte, .single-pisciniste .caracteristiques .msgAlerte, .single-pisciniste .avantages .msgAlerte {

  position: absolute;

  width: 20px;

  height: 20px;

  top: calc(50% - 10px);

  left: -25px;

  cursor: pointer;

  z-index: 2;

  display: block;

}

.single-piscine .caracteristiques .msgAlerte:before, .single-piscine .avantages .msgAlerte:before, .single-equipement .caracteristiques .msgAlerte:before, .single-equipement .avantages .msgAlerte:before, .single-pisciniste .caracteristiques .msgAlerte:before, .single-pisciniste .avantages .msgAlerte:before {

  content: attr(data-text);

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  left: 100%;

  width: 300px;

  padding: 10px;

  border-radius: 10px;

  background: #102b55;

  color: #fff;

  display: none;

  font-size: .8em;

}

.single-piscine .caracteristiques .msgAlerte:hover:before, .single-piscine .avantages .msgAlerte:hover:before, .single-equipement .caracteristiques .msgAlerte:hover:before, .single-equipement .avantages .msgAlerte:hover:before, .single-pisciniste .caracteristiques .msgAlerte:hover:before, .single-pisciniste .avantages .msgAlerte:hover:before {

  display: block;

}

.single-piscine .caracteristiques .col-12, .single-piscine .avantages .col-12, .single-equipement .caracteristiques .col-12, .single-equipement .avantages .col-12, .single-pisciniste .caracteristiques .col-12, .single-pisciniste .avantages .col-12 {

  display: flex;

  justify-content: center;

  margin: 60px 0 30px 0;

}

.single-piscine .avantages .points:after, .single-equipement .avantages .points:after, .single-pisciniste .avantages .points:after {

  content: none;

}

.single-piscine .materiel, .single-equipement .materiel, .single-pisciniste .materiel {

  color: #102b55;

}

.single-piscine .materiel .col-12, .single-equipement .materiel .col-12, .single-pisciniste .materiel .col-12 {

  margin-bottom: 50px;

}

.single-piscine .materiel .col-lg-4, .single-equipement .materiel .col-lg-4, .single-pisciniste .materiel .col-lg-4 {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

}

.single-piscine .materiel .col-lg-4 h3, .single-equipement .materiel .col-lg-4 h3, .single-pisciniste .materiel .col-lg-4 h3 {

  margin-bottom: 10px;

  font-weight: bold;

  text-transform: uppercase;

  letter-spacing: 4px;

}

.single-piscine .materiel.linked h3.t-2, .single-equipement .materiel.linked h3.t-2, .single-pisciniste .materiel.linked h3.t-2 {

  letter-spacing: 2px;

  font-weight: normal;

  min-height: 47px;

}

.single-piscine .materiel.linked ul li, .single-equipement .materiel.linked ul li, .single-pisciniste .materiel.linked ul li {

  margin: 7.5px;

  padding: 0;

}

.single-piscine .materiel.linked ul li a, .single-equipement .materiel.linked ul li a, .single-pisciniste .materiel.linked ul li a {

  color: #102b55;

  padding: 10px;

  display: block;

}



.gallery .titleStyle small {

  color: #102b55;

}

.gallery .socials {

  justify-content: center;

  margin-top: -20px;

  margin-bottom: 10px;

}

.gallery .socials a svg path {

  fill: #102b55;

}



.single-piscine .top-page, .single-equipement .top-page {

  padding-bottom: 20px;

}

.single-piscine .top-page .titleStyle small, .single-equipement .top-page .titleStyle small {

  text-shadow: 0px 0px 15px #000;

}

.single-piscine .top-page .titleStyle span, .single-equipement .top-page .titleStyle span {

  opacity: 0.5;

}

.single-piscine .top-page .row, .single-equipement .top-page .row {

  justify-content: center;

}

.single-piscine .top-page .navSection, .single-equipement .top-page .navSection {

  position: initial;

  margin-top: 15px;

}

.single-piscine .top-page .navSection svg, .single-equipement .top-page .navSection svg {

  display: block;

}



.gridContainer {

  width: 100%;

}



.grid {

  height: 100%;

}

.grid div {

  min-height: 100%;

  max-height: 400px;

  cursor: pointer;

}

.grid.grid-24 {

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: repeat(12, 1fr);

}

.grid.grid-24 div {

  max-height: 300px;

}

.grid.grid-24 div:nth-child(1) {

  grid-area: 1 / 1 / 3 / 3;

}

.grid.grid-24 div:nth-child(2) {

  grid-area: 1 / 3 / 2 / 5;

}

.grid.grid-24 div:nth-child(3) {

  grid-area: 2 / 3 / 3 / 4;

}

.grid.grid-24 div:nth-child(4) {

  grid-area: 2 / 4 / 3 / 5;

}

.grid.grid-24 div:nth-child(5) {

  grid-area: 3 / 3 / 5 / 5;

}

.grid.grid-24 div:nth-child(6) {

  grid-area: 3 / 1 / 4 / 3;

}

.grid.grid-24 div:nth-child(7) {

  grid-area: 4 / 2 / 5 / 3;

}

.grid.grid-24 div:nth-child(8) {

  grid-area: 4 / 1 / 5 / 2;

}

.grid.grid-24 div:nth-child(9) {

  grid-area: 5 / 1 / 7 / 3;

}

.grid.grid-24 div:nth-child(10) {

  grid-area: 5 / 3 / 6 / 5;

}

.grid.grid-24 div:nth-child(11) {

  grid-area: 6 / 3 / 7 / 4;

}

.grid.grid-24 div:nth-child(12) {

  grid-area: 6 / 4 / 7 / 5;

}

.grid.grid-24 div:nth-child(13) {

  grid-area: 7 / 3 / 9 / 5;

}

.grid.grid-24 div:nth-child(14) {

  grid-area: 7 / 1 / 8 / 3;

}

.grid.grid-24 div:nth-child(15) {

  grid-area: 8 / 2 / 9 / 3;

}

.grid.grid-24 div:nth-child(16) {

  grid-area: 8 / 1 / 9 / 2;

}

.grid.grid-24 div:nth-child(17) {

  grid-area: 9 / 1 / 11 / 3;

}

.grid.grid-24 div:nth-child(18) {

  grid-area: 9 / 3 / 10 / 5;

}

.grid.grid-24 div:nth-child(19) {

  grid-area: 10 / 3 / 11 / 4;

}

.grid.grid-24 div:nth-child(20) {

  grid-area: 10 / 4 / 11 / 5;

}

.grid.grid-24 div:nth-child(20) {

  grid-area: 10 / 4 / 11 / 5;

}

.grid.grid-24 div:nth-child(21) {

  grid-area: 11 / 3 / 13 / 5;

}

.grid.grid-24 div:nth-child(22) {

  grid-area: 11 / 1 / 12 / 3;

}

.grid.grid-24 div:nth-child(23) {

  grid-area: 12 / 1 / 13 / 2;

}

.grid.grid-24 div:nth-child(24) {

  grid-area: 12 / 2 / 13 / 3;

}

.grid.grid-20 {

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: repeat(10, 1fr);

}

.grid.grid-20 div {

  max-height: 300px;

}

.grid.grid-20 div:nth-child(1) {

  grid-area: 1 / 1 / 3 / 3;

}

.grid.grid-20 div:nth-child(2) {

  grid-area: 1 / 3 / 2 / 5;

}

.grid.grid-20 div:nth-child(3) {

  grid-area: 2 / 3 / 3 / 4;

}

.grid.grid-20 div:nth-child(4) {

  grid-area: 2 / 4 / 3 / 5;

}

.grid.grid-20 div:nth-child(5) {

  grid-area: 3 / 3 / 5 / 5;

}

.grid.grid-20 div:nth-child(6) {

  grid-area: 3 / 1 / 4 / 3;

}

.grid.grid-20 div:nth-child(7) {

  grid-area: 4 / 2 / 5 / 3;

}

.grid.grid-20 div:nth-child(8) {

  grid-area: 4 / 1 / 5 / 2;

}

.grid.grid-20 div:nth-child(9) {

  grid-area: 5 / 1 / 7 / 3;

}

.grid.grid-20 div:nth-child(10) {

  grid-area: 5 / 3 / 6 / 5;

}

.grid.grid-20 div:nth-child(11) {

  grid-area: 6 / 3 / 7 / 4;

}

.grid.grid-20 div:nth-child(12) {

  grid-area: 6 / 4 / 7 / 5;

}

.grid.grid-20 div:nth-child(13) {

  grid-area: 7 / 3 / 9 / 5;

}

.grid.grid-20 div:nth-child(14) {

  grid-area: 7 / 1 / 8 / 3;

}

.grid.grid-20 div:nth-child(15) {

  grid-area: 8 / 2 / 9 / 3;

}

.grid.grid-20 div:nth-child(16) {

  grid-area: 8 / 1 / 9 / 2;

}

.grid.grid-20 div:nth-child(17) {

  grid-area: 9 / 1 / 11 / 3;

}

.grid.grid-20 div:nth-child(18) {

  grid-area: 9 / 3 / 10 / 5;

}

.grid.grid-20 div:nth-child(19) {

  grid-area: 10 / 3 / 11 / 4;

}

.grid.grid-20 div:nth-child(20) {

  grid-area: 10 / 4 / 11 / 5;

}

.grid.grid-16 {

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: repeat(8, 1fr);

}

.grid.grid-16 div {

  max-height: 300px;

}

.grid.grid-16 div:nth-child(1) {

  grid-area: 1 / 1 / 3 / 3;

}

.grid.grid-16 div:nth-child(2) {

  grid-area: 1 / 3 / 2 / 5;

}

.grid.grid-16 div:nth-child(3) {

  grid-area: 2 / 3 / 3 / 4;

}

.grid.grid-16 div:nth-child(4) {

  grid-area: 2 / 4 / 3 / 5;

}

.grid.grid-16 div:nth-child(5) {

  grid-area: 3 / 3 / 5 / 5;

}

.grid.grid-16 div:nth-child(6) {

  grid-area: 3 / 1 / 4 / 3;

}

.grid.grid-16 div:nth-child(7) {

  grid-area: 4 / 2 / 5 / 3;

}

.grid.grid-16 div:nth-child(8) {

  grid-area: 4 / 1 / 5 / 2;

}

.grid.grid-16 div:nth-child(9) {

  grid-area: 5 / 1 / 7 / 3;

}

.grid.grid-16 div:nth-child(10) {

  grid-area: 5 / 3 / 6 / 5;

}

.grid.grid-16 div:nth-child(11) {

  grid-area: 6 / 3 / 7 / 4;

}

.grid.grid-16 div:nth-child(12) {

  grid-area: 6 / 4 / 7 / 5;

}

.grid.grid-16 div:nth-child(13) {

  grid-area: 7 / 3 / 9 / 5;

}

.grid.grid-16 div:nth-child(14) {

  grid-area: 7 / 1 / 8 / 3;

}

.grid.grid-16 div:nth-child(15) {

  grid-area: 8 / 2 / 9 / 3;

}

.grid.grid-16 div:nth-child(16) {

  grid-area: 8 / 1 / 9 / 2;

}

.grid.grid-12 {

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: repeat(6, 1fr);

}

.grid.grid-12 div {

  max-height: 300px;

}

.grid.grid-12 div:nth-child(1) {

  grid-area: 1 / 1 / 3 / 3;

}

.grid.grid-12 div:nth-child(2) {

  grid-area: 1 / 3 / 2 / 4;

}

.grid.grid-12 div:nth-child(3) {

  grid-area: 1 / 4 / 2 / 5;

}

.grid.grid-12 div:nth-child(4) {

  grid-area: 2 / 3 / 3 / 5;

}

.grid.grid-12 div:nth-child(5) {

  grid-area: 3 / 3 / 5 / 5;

}

.grid.grid-12 div:nth-child(6) {

  grid-area: 3 / 2 / 4 / 3;

}

.grid.grid-12 div:nth-child(7) {

  grid-area: 3 / 1 / 4 / 2;

}

.grid.grid-12 div:nth-child(8) {

  grid-area: 4 / 1 / 5 / 3;

}

.grid.grid-12 div:nth-child(9) {

  grid-area: 5 / 1 / 7 / 3;

}

.grid.grid-12 div:nth-child(10) {

  grid-area: 5 / 3 / 6 / 4;

}

.grid.grid-12 div:nth-child(11) {

  grid-area: 5 / 4 / 6 / 5;

}

.grid.grid-12 div:nth-child(12) {

  grid-area: 6 / 3 / 7 / 5;

}

.grid.grid-10 {

  grid-template-columns: repeat(7, 1fr);

  grid-template-rows: repeat(12, 1fr);

}

.grid.grid-10 div:nth-child(1) {

  grid-area: 1 / 1 / 4 / 3;

}

.grid.grid-10 div:nth-child(2) {

  grid-area: 1 / 3 / 4 / 6;

}

.grid.grid-10 div:nth-child(3) {

  grid-area: 1 / 6 / 4 / 8;

}

.grid.grid-10 div:nth-child(4) {

  grid-area: 4 / 1 / 7 / 4;

}

.grid.grid-10 div:nth-child(5) {

  grid-area: 4 / 4 / 7 / 6;

}

.grid.grid-10 div:nth-child(6) {

  grid-area: 4 / 6 / 7 / 8;

}

.grid.grid-10 div:nth-child(7) {

  grid-area: 7 / 1 / 10 / 5;

}

.grid.grid-10 div:nth-child(8) {

  grid-area: 7 / 5 / 10 / 8;

}

.grid.grid-10 div:nth-child(9) {

  grid-area: 10 / 4 / 13 / 8;

}

.grid.grid-10 div:nth-child(10) {

  grid-area: 10 / 1 / 13 / 4;

}

.grid.grid-8 {

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: repeat(4, 1fr);

}

.grid.grid-8 div {

  max-height: 300px;

}

.grid.grid-8 div:nth-child(1) {

  grid-area: 1 / 1 / 3 / 3;

}

.grid.grid-8 div:nth-child(2) {

  grid-area: 1 / 3 / 2 / 5;

}

.grid.grid-8 div:nth-child(3) {

  grid-area: 2 / 3 / 3 / 4;

}

.grid.grid-8 div:nth-child(4) {

  grid-area: 2 / 4 / 3 / 5;

}

.grid.grid-8 div:nth-child(5) {

  grid-area: 3 / 1 / 4 / 3;

}

.grid.grid-8 div:nth-child(6) {

  grid-area: 4 / 1 / 5 / 2;

}

.grid.grid-8 div:nth-child(7) {

  grid-area: 4 / 2 / 5 / 3;

}

.grid.grid-8 div:nth-child(8) {

  grid-area: 3 / 3 / 5 / 5;

}

.grid.grid-6 {

  grid-template-columns: repeat(7, 1fr);

  grid-template-rows: repeat(4, 1fr);

}

.grid.grid-6 div:nth-child(1) {

  grid-area: 1 / 1 / 3 / 4;

}

.grid.grid-6 div:nth-child(2) {

  grid-area: 1 / 4 / 3 / 6;

}

.grid.grid-6 div:nth-child(3) {

  grid-area: 1 / 6 / 3 / 8;

}

.grid.grid-6 div:nth-child(4) {

  grid-area: 3 / 5 / 5 / 8;

}

.grid.grid-6 div:nth-child(5) {

  grid-area: 3 / 3 / 5 / 5;

}

.grid.grid-6 div:nth-child(6) {

  grid-area: 3 / 1 / 5 / 3;

}

.grid.grid-5 {

  grid-template-columns: repeat(6, 1fr);

  grid-template-rows: repeat(4, 1fr);

}

.grid.grid-5 div:nth-child(1) {

  grid-area: 1 / 1 / 3 / 3;

}

.grid.grid-5 div:nth-child(2) {

  grid-area: 1 / 3 / 3 / 5;

}

.grid.grid-5 div:nth-child(3) {

  grid-area: 1 / 5 / 3 / 7;

}

.grid.grid-5 div:nth-child(4) {

  grid-area: 3 / 1 / 5 / 4;

}

.grid.grid-5 div:nth-child(5) {

  grid-area: 3 / 4 / 5 / 7;

}

.grid.grid-4 {

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: repeat(2, 1fr);

}

.grid.grid-4 div {

  max-height: 300px;

}

.grid.grid-4 div:first-child {

  grid-area: 1 / 1 / 3 / 3;

}

.grid.grid-4 div:nth-child(2) {

  grid-area: 1 / 3 / 2 / 5;

}

.grid.grid-4 div:nth-child(3) {

  grid-area: 2 / 3 / 3 / 4;

}

.grid.grid-4 div:last-child {

  grid-area: 2 / 4 / 3 / 5;

}

.grid.grid-3 {

  grid-template-columns: repeat(7, 1fr);

  grid-template-rows: 1fr;

}

.grid.grid-3 div:first-child {

  grid-area: 1 / 1 / 2 / 4;

}

.grid.grid-3 div:nth-child(2) {

  grid-area: 1 / 4 / 2 / 6;

}

.grid.grid-3 div:nth-child(3) {

  grid-area: 1 / 6 / 2 / 8;

}

.grid.grid-2 {

  grid-template-columns: repeat(2, 1fr);

  grid-template-rows: 1fr;

}

.grid.grid-2 div:nth-child(1) {

  grid-area: 1 / 1 / 2 / 2;

}

.grid.grid-2 div:nth-child(2) {

  grid-area: 1 / 2 / 2 / 3;

}

.grid.grid-1 {

  grid-template-columns: 1fr;

  grid-template-rows: 1fr;

  width: 700px;

  max-width: 100%;

  margin: auto;

}

.grid.grid-1 div {

  grid-area: 1 / 1 / 2 / 2;

}



.formuleKit .titleStyle small {

  color: #102b55;

}

.formuleKit .kitBox * {

  color: #102b55;

}

.formuleKit .kitBox > div {

  background-color: #f6f7f8;

  padding: 30px;

  text-align: center;

}

.formuleKit .kitBox > div h3 {

  font-weight: bold;

  text-transform: uppercase;

}

.formuleKit .kitBox > div .block-text p {

  margin: 20px 0;

}



.tableUl {

  width: 100%;

}

.tableUl li {

  padding: 10px;

  position: relative;

  width: 100%;

  letter-spacing: 4px;

  text-transform: uppercase;

}

.tableUl li p {

  max-height: 0;

  overflow: hidden;

  visibility: hidden;

  -webkit-transition: max-height 0.3s ease;

  -moz-transition: max-height 0.3s ease;

  -o-transition: max-height 0.3s ease;

  transition: max-height 0.3s ease;

}

.tableUl li:not(:last-child) {

  border-bottom: 2px solid #102b55;

}



.avantages {

  background-color: #102b55;

}

.avantages .col-12 {

  margin-bottom: 50px;

}

.avantages .col-lg-5 {

  display: flex;

  align-items: center;

  justify-content: center;

}

.avantages .col-lg-7 {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

}

.avantages .col-lg-7 ul {

  width: 100%;

}

.avantages .col-lg-7 ul li {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin: 15px 0;

}

.avantages .col-lg-7 ul li > div {

  width: 60px;

  height: 60px;

  display: block;

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

}

.avantages .col-lg-7 ul li p {

  width: calc(100% - 70px);

}



.localisationInfos {

  background-color: #102b55;

  padding: 0;

}

.localisationInfos .col-md-6 {

  display: flex;

  align-items: center;

}

.localisationInfos .col-md-6:first-child {

  padding: 50px 15px 50px 10%;

}

.localisationInfos .col-md-6 > div {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

}

.localisationInfos .col-md-6 ul {

  margin: 30px 0;

  padding-left: 100px;

}

.localisationInfos .col-md-6 ul li {

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-height: 40px;

  margin: 10px 0;

  position: relative;

}

.localisationInfos .col-md-6 ul li a {

  display: block;

  margin: 5px 0;

}

.localisationInfos .col-md-6 ul li a:hover {

  color: #97b2c6;

}

.localisationInfos .col-md-6 ul li:before {

  content: '';

  width: 40px;

  height: 40px;

  display: block;

  position: absolute;

  left: -60px;

  top: calc(50% - 20px);

  background-size: contain;

  background-position: center;

  background-repeat: no-repeat;

}

.localisationInfos .col-md-6 ul li:nth-child(1):before {

  background-image: url("../img/adresse-picto.svg");

}

.localisationInfos .col-md-6 ul li:nth-child(2):before {

  background-image: url("../img/contact-picto.svg");

}

.localisationInfos .col-md-6 ul li:nth-child(3):before {

  background-image: url("../img/horaire-picto.svg");

}

.localisationInfos #singleMap {

  height: 500px;

}



.referencement {

  text-align: center;

  color: #102b55;

}
.referencement p a{color:#102b55;}

.referencement .t-3 {

  align-items: center;

}



.page-excel-piscine header, .page-contact header, .page-pisciniste header, .page-actualites header, .page-configurateur header, .single header, .page-avis header, .single-realisation header, .page-realisations header, .page-mentions header {

  position: relative;

  background-color: #102b55;

}

.page-excel-piscine header .menuLite #quickBtn .link.blue, .page-excel-piscine header .menuLite #quickBtn .link.opaq, .page-contact header .menuLite #quickBtn .link.blue, .page-contact header .menuLite #quickBtn .link.opaq, .page-pisciniste header .menuLite #quickBtn .link.blue, .page-pisciniste header .menuLite #quickBtn .link.opaq, .page-actualites header .menuLite #quickBtn .link.blue, .page-actualites header .menuLite #quickBtn .link.opaq, .page-configurateur header .menuLite #quickBtn .link.blue, .page-configurateur header .menuLite #quickBtn .link.opaq, .single header .menuLite #quickBtn .link.blue, .single header .menuLite #quickBtn .link.opaq, .page-avis header .menuLite #quickBtn .link.blue, .page-avis header .menuLite #quickBtn .link.opaq, .single-realisation header .menuLite #quickBtn .link.blue, .single-realisation header .menuLite #quickBtn .link.opaq, .page-realisations header .menuLite #quickBtn .link.blue, .page-realisations header .menuLite #quickBtn .link.opaq, .page-mentions header .menuLite #quickBtn .link.blue, .page-mentions header .menuLite #quickBtn .link.opaq {

  background-color: #97b2c6;

  color: #fff;

}

.page-excel-piscine header .menuLite #quickBtn .link.blue:hover, .page-excel-piscine header .menuLite #quickBtn .link.opaq:hover, .page-contact header .menuLite #quickBtn .link.blue:hover, .page-contact header .menuLite #quickBtn .link.opaq:hover, .page-pisciniste header .menuLite #quickBtn .link.blue:hover, .page-pisciniste header .menuLite #quickBtn .link.opaq:hover, .page-actualites header .menuLite #quickBtn .link.blue:hover, .page-actualites header .menuLite #quickBtn .link.opaq:hover, .page-configurateur header .menuLite #quickBtn .link.blue:hover, .page-configurateur header .menuLite #quickBtn .link.opaq:hover, .single header .menuLite #quickBtn .link.blue:hover, .single header .menuLite #quickBtn .link.opaq:hover, .page-avis header .menuLite #quickBtn .link.blue:hover, .page-avis header .menuLite #quickBtn .link.opaq:hover, .single-realisation header .menuLite #quickBtn .link.blue:hover, .single-realisation header .menuLite #quickBtn .link.opaq:hover, .page-realisations header .menuLite #quickBtn .link.blue:hover, .page-realisations header .menuLite #quickBtn .link.opaq:hover, .page-mentions header .menuLite #quickBtn .link.blue:hover, .page-mentions header .menuLite #quickBtn .link.opaq:hover {

  background-color: #081f43;

  color: #fff;

}

.page-excel-piscine header.fixed, .page-contact header.fixed, .page-pisciniste header.fixed, .page-actualites header.fixed, .page-configurateur header.fixed, .single header.fixed, .page-avis header.fixed, .single-realisation header.fixed, .page-realisations header.fixed, .page-mentions header.fixed {

  position: fixed;

  background-color: transparent;

}



.single-realisation .top-page {

  height: auto;

  background-color: #102b55;

}

.single-realisation .top-page ul {

  display: flex;

  align-items: center;

  justify-content: center;
  flex-wrap: wrap;

}

.single-realisation .top-page ul li {

  margin: 5px;

}

.single-realisation .top-page ul + p {

  margin: 10px auto;

}

.single-realisation .top-page .link {

  margin: 5px 0 15px 0;

}

.single-realisation .after-top {

  color: #102b55;

}



.page-excel-piscine .top-page {

  padding: 0;

  height: auto;

}

.page-excel-piscine .top-page .openVideo {

  max-height: 600px;

  min-height: 400px;

}

.page-excel-piscine .top-page .openVideo img {

  object-position: bottom;

  -o-object-position: bottom;

}

.page-excel-piscine .after-top {

  background-color: #102b55;

}

.page-excel-piscine .after-top .col-12 .block-text p {


  line-height: 1.4;

  margin: 15px auto;

}

.page-excel-piscine .excellence {

  background-color: #102b55;

}

.page-excel-piscine .excellence .col-12 {

  margin-bottom: 50px;

}

.page-excel-piscine .engagements {

  color: #102b55;

}

.page-excel-piscine .engagements .blockPicto .openText {

  background-color: #102b55;

  color: #fff;

}

.page-excel-piscine .blockPicto, .page-excel-piscine .fancyText {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  text-align: center;

  padding-bottom: 20px;

  margin: 15px 0;

}

.page-excel-piscine .blockPicto > div:first-child, .page-excel-piscine .fancyText > div:first-child {

  width: 100px;

  height: 100px;

  background-position: center;

  background-repeat: no-repeat;

  background-size: contain;

}

.page-excel-piscine .blockPicto > div:nth-child(2) p, .page-excel-piscine .fancyText > div:nth-child(2) p {

  text-transform: uppercase;

}

.page-excel-piscine .blockPicto > div:last-child, .page-excel-piscine .fancyText > div:last-child {

  margin-top: 15px;

}

.page-excel-piscine .blockPicto > div strong, .page-excel-piscine .fancyText > div strong {

  display: block;

  margin-bottom: 5px;

}

.page-excel-piscine .blockPicto .openText, .page-excel-piscine .fancyText .openText {

  font-weight: bolder;

  width: 20px;

  height: 20px;

  background-color: #fff;

  border-radius: 50%;

  color: #102b55;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  position: absolute;

  left: calc(50% - 10px);

  bottom: 0;

}

.page-excel-piscine .fancyText {

  background-color: #102b55;

  color: #fff;

}

.page-excel-piscine .fancyText .block-text p {

  margin: 10px 0;

}



.page-avis .top-page {

  height: auto;

  background-color: #102b55;

}

.page-avis .top-page .block-text {

  margin-top: 20px;

}

.page-avis .top-page a:hover {

  color: #97b2c6;

}

.page-avis .after-top {

  color: #102b55;

}

.page-avis .after-top .avisContain {

  width: 50%;

  padding: 15px;

}

.page-avis .after-top .avisContain h3 {

  font-weight: bolder;

  font-size: 1.2rem;

}

.page-avis .after-top .avisContain ul {

  margin: 15px 0;

  display: flex;

  flex-direction: column;

}

.page-avis .after-top .avisContain ul li {

  display: flex;

  margin: 5px 0;

}

.page-avis .after-top .avisContain ul li span:first-child {

  width: 300px;

}

.page-avis .after-top .avisContain ul li span:last-child {

  font-weight: bolder;

}



.page-realisations .top-page {

  height: auto;

  background-color: #102b55;

}

.page-realisations .top-page .block-text {

  margin-top: 20px;

}

.page-realisations .top-page a:hover {

  color: #97b2c6;

}

.page-realisations .projetContainer {

  display: flex;

  width: 50%;

  padding: 15px;

}

.page-realisations .projetContainer > div:first-child {

  width: 200px;

}

.page-realisations .projetContainer > div:first-child img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  -o-object-fit: cover;

  -o-object-position: center;

  vertical-align: middle;

}

.page-realisations .projetContainer > div:last-child {

  width: calc(100% - 220px);

  margin-left: 20px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

}

.page-realisations .projetContainer > div p {

  font-size: 0.9rem;

}

.page-realisations .projetContainer .t-2 {

  margin-bottom: 15px;

}

.page-realisations .projetContainer .link {

  margin-top: 15px;

}



.page-pisciniste header {

  position: relative;

  background-color: #102b55;

}

.page-pisciniste #map {

  height: 700px;

  width: 100%;

}

.page-pisciniste #map .container-distributeur {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  color: #102b55;

}

.page-pisciniste #map .container-distributeur .photo-distributeur {

  width: 150px;

  height: 150px;

  object-fit: contain;

  -o-object-fit: contain;

}

.page-pisciniste #map .container-distributeur > div {

  width: calc(100% - 150px);

  padding: 10px;

}

.page-pisciniste #map .container-distributeur > div h2 {

  text-transform: uppercase;

  font-weight: bolder;

  margin-bottom: 10px;

  font-size: 1.2em;

}

.page-pisciniste #map .container-distributeur > div p {

  margin: 5px 0;

}

.page-pisciniste #map .container-distributeur > div a:not(.link) {

  color: #102b55;

  font-weight: bolder;

}

.page-pisciniste #map .container-distributeur > div .link {

  padding: 5px 10px;

  letter-spacing: 1px;

  margin-top: 10px;

}

.page-pisciniste .top-page {

  padding: 0;

  height: auto;

  background-color: #102b55;

}

.page-pisciniste .after-top {

  padding: 0;

  position: relative;

}

.page-pisciniste .after-top .findIt {

  width: 500px;

  height: calc(100% - 200px);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  position: absolute;

  left: 5%;

  top: 100px;

  background-color: rgba(8, 31, 67,0.5);

  border-radius: 15px;

  padding: 30px;

}

.page-pisciniste .after-top .findIt .t-3 {

  align-items: center;

}

.page-pisciniste .after-top .findIt #liste_adresses {

  border-radius: 30px;

  background-color: #102b55;

  width: 100%;

  cursor: pointer;

  text-transform: uppercase;

  line-height: 2;

  appearance: none;

  -webkit-appearance: none;

  color: #fff;

  padding: 10px 20px;

  text-align: center;

  max-width: 400px;

  flex: 1 0 100%;

  margin: 20px auto;

}

.page-pisciniste .after-top .findIt #liste_adresses option {

  border-radius: 30px;

  background-color: #102b55;

  width: 100%;

  text-transform: uppercase;

  line-height: 2;

  appearance: none;

  -webkit-appearance: none;

  color: #fff;

  padding: 10px 20px;

  text-align: center;

}

.page-pisciniste .after-top .findIt .wpcf7-form label {

  margin: 0;

  width: 100%;

}

.page-pisciniste .after-top .findIt #adresse + i {

  width: 135px;

  text-align: center;

  left: calc(50% - 67.5px);

}

.page-pisciniste .after-top .findIt #btn_chercher_adresse {

  cursor: pointer;

  width: 100%;

  border: 2px solid #fff;

  background: transparent;

  padding: 15px 10px;

  height: auto;

  border-radius: 30px;

  color: #fff;

}



.formulairePisciniste {

  color: #102b55;

}

.formulairePisciniste .col-12 {

  margin-bottom: 50px;

}

.formulairePisciniste .col-12 .t-2 {

  align-items: center;

  text-align: center;

}

.formulairePisciniste .secteurs {

  display: flex;

  justify-content: center;

  align-items: center;

}

.formulairePisciniste .secteurs > div {

  max-width: 100%;

  color: #fff;

  background-color: #102b55;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 30px 50px;

  min-height: 90%;

}

.formulairePisciniste .secteurs > div h3 {

  margin-bottom: 15px;

  text-align: center;

  margin-bottom: 30px;

  font-weight: bolder;

}

.formulairePisciniste .secteurs > div .tableUl li:not(:last-child) {

  border-color: #fff;

}



.newPisciniste {

  color: #102b55;

}

.newPisciniste .col-12 {

  margin-bottom: 50px;

}

.newPisciniste .col-12 .t-2 {

  align-items: center;

  text-align: center;

}

.newPisciniste .col-md-4 {

  display: flex;

  align-items: center;

}

.newPisciniste .col-md-4 > div {

  background-color: #f6f6f6;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

  padding: 30px;

}

.newPisciniste .col-md-4 h3 {

  margin-bottom: 20px;

  text-align: center;

}

.newPisciniste .col-md-4 p {

  margin-bottom: 10px;

  text-align: center;

}

.newPisciniste .col-md-4 a:not(.link) {

  color: #102b55;

  display: block;

  margin-bottom: 10px;

}

.newPisciniste .col-md-4 .link {

  margin-top: 20px;

}



.page-contact header {

  position: relative;

  background-color: #102b55;

}

.page-contact .top-page {

  height: auto;

  align-items: center;

  background-color: #102b55;

}

.page-contact .top-page .col-12 {

  margin: 0 auto;


  margin-top: 30px;

}
.page-contact .top-page .col-12 .wpcf7{

  width: 800px;
  margin: 0 auto;
  max-width: 100%;

}

.page-contact .top-page .col-12 ul li {

  margin: 7.5px 0;

}

.page-contact .top-page .col-12 ul li a:hover {

  color: #fff;

}

.page-contact .top-page #contactMap {

  width: 100%;

  height: 100%;

}



.page-actualites .top-page {

  height: auto;

  align-items: center;

  background-color: #102b55;

}

.page-actualites .postList {

  color: #102b55;

}

.page-actualites .postList .row {

  justify-content: center;

}

.page-actualites .postList .block-post {

  width: 1000px;

  max-width: 100%;

  margin: 15px 0;

}

.page-actualites .postList .block-post a {

  color: #102b55;

}



.single .top-page {

  height: auto;

  color: #102b55;

}

.single .top-page h2 {

  font-weight: bold;

  margin: 10px 0;

}

.single .top-page p a {

  color: #102b55;

}

.single .top-page ul {

  margin: 10px 0;

  padding-left: 20px;

}

.single .top-page ul li {

  list-style: disc;

}

.single .top-page .col-xl-6:last-child {

  display: flex;

  align-items: center;

}



.page-mentions .mentions {

  padding-top: 150px;

  color: #102b55;

}

.page-mentions .mentions .row {

  justify-content: center;

}

.page-mentions .mentions .col-12 {

  width: 800px;

  max-width: 100%;

  flex: 0 0 auto;

}



.page-mentions.cmplz-eu .mentions .row #cmplz-document {

  max-width: 100%;

}



.page-mentions.cmplz-eu #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div {

  background-color: #a7bfb2;

}



.page-mentions .t-1 {

  font-size: 2rem;

  text-transform: uppercase;

}

.page-mentions .mentions h3, .page-mentions .mentions h2 {

  text-transform: uppercase;

  margin: 15px 0;

  font-weight: 600;

}

.page-mentions .mentions p {

  margin: 10px 0;

}

.page-mentions .mentions ul a, .page-mentions .mentions ol a, .page-mentions .mentions p a  {

  text-decoration: underline;

  margin: 5px 0;


  color: #102b55;

}



.page-mentions .mentions ul, .page-mentions .mentions ol {

  padding-left: 20px;

}



.page-mentions .mentions ul li, .page-mentions .mentions ol li {

  list-style: disc;

  margin: 10px 0;

}



/*=========FORM=========*/

.nice-select {

  -webkit-tap-highlight-color: transparent;

  background-color: transparent;

  border-radius: 30px;

  border: solid 2px #fff;

  box-sizing: border-box;

  clear: both;

  cursor: pointer;

  display: block;

  float: left;

  font-family: inherit;

  font-size: 14px;

  font-weight: normal;

  height: 42px;

  line-height: 40px;

  outline: none;

  padding-left: 18px;

  padding-right: 30px;

  position: relative;

  text-align: center;

  -webkit-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  white-space: nowrap;

  width: 100%;

}

.nice-select:hover {

  border-color: #97b2c6;

}

.nice-select:active {

  border-color: #97b2c6;

}

.nice-select:focus {

  border-color: #97b2c6;

}

.nice-select:after {

  border-bottom: 2px solid #fff;

  border-right: 2px solid #fff;

  content: '';

  display: block;

  height: 5px;

  margin-top: -4px;

  pointer-events: none;

  position: absolute;

  right: 12px;

  top: 50%;

  -webkit-transform-origin: 66% 66%;

  -ms-transform-origin: 66% 66%;

  transform-origin: 66% 66%;

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

  -webkit-transition: all 0.15s ease-in-out;

  transition: all 0.15s ease-in-out;

  width: 5px;

}

.nice-select .list {

  background-color: #102b55;

  width: 100%;

  border-radius: 5px;

  border: 2px solid #97b2c6;

  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);

  box-sizing: border-box;

  margin-top: 4px;

  opacity: 0;

  overflow: hidden;

  padding: 0;

  pointer-events: none;

  position: absolute;

  top: 100%;

  left: 0;

  -webkit-transform-origin: 50% 0;

  -ms-transform-origin: 50% 0;

  transform-origin: 50% 0;

  -webkit-transform: scale(0.75) translateY(-21px);

  -ms-transform: scale(0.75) translateY(-21px);

  transform: scale(0.75) translateY(-21px);

  -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;

  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;

  z-index: 9;

}

.nice-select .list:hover .option:not(:hover) {

  background-color: transparent !important;

}

.nice-select .option {

  cursor: pointer;

  font-weight: 400;

  line-height: 40px;

  list-style: none;

  min-height: 40px;

  outline: none;

  padding-left: 18px;

  padding-right: 29px;

  text-align: center;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;

}

.nice-select .option:hover {

  background-color: #97b2c6;

}

.nice-select .option.focus {

  background-color: #97b2c6;

}

.nice-select .option.selected.focus {

  background-color: #97b2c6;

}

.nice-select .option.selected {

  font-weight: bold;

}

.nice-select .option.disabled {

  background-color: transparent;

  color: #999;

  cursor: default;

}



.nice-select.open {

  border-color: #97b2c6;

}

.nice-select.open:after {

  -webkit-transform: rotate(-135deg);

  -ms-transform: rotate(-135deg);

  transform: rotate(-135deg);

}

.nice-select.open .list {

  opacity: 1;

  pointer-events: auto;

  -webkit-transform: scale(1) translateY(0);

  -ms-transform: scale(1) translateY(0);

  transform: scale(1) translateY(0);

}



.nice-select.disabled {

  border-color: #ededed;

  color: #999;

  pointer-events: none;

}

.nice-select.disabled:after {

  border-color: #cccccc;

}



.nice-select.wide {

  width: 100%;

}

.nice-select.wide .list {

  left: 0 !important;

  right: 0 !important;

}



.nice-select.right {

  float: right;

}

.nice-select.right .list {

  left: auto;

  right: 0;

}



.nice-select.small {

  font-size: 12px;

  height: 36px;

  line-height: 34px;

}

.nice-select.small:after {

  height: 4px;

  width: 4px;

}

.nice-select.small .option {

  line-height: 34px;

  min-height: 34px;

}



.no-csspointerevents .nice-select .list {

  display: none;

}

.no-csspointerevents .nice-select.open .list {

  display: block;

}



.labelControl {

  display: grid;

  grid-template-columns: 1em auto;

  gap: 0.5em;

  text-transform: uppercase;

  letter-spacing: 2px;

  cursor: pointer;

  font-size: 0.9rem;

}



.labelControl + .labelControl {

  margin-top: 1em;

}



.labelControl:focus-within {

  color: #fff;

}



input[type="radio"] {

  -webkit-appearance: none;

  appearance: none;

  background-color: #081f43;

  margin: 0;

  font: inherit;

  color: currentColor;

  width: 1.15em;

  height: 1.15em;

  border: 0.15em solid currentColor;

  border-radius: 50%;

  transform: translateY(-0.075em);

  display: grid;

  place-content: center;

}



input[type="radio"]::before {

  content: "";

  width: 0.65em;

  height: 0.65em;

  border-radius: 50%;

  transform: scale(0);

  transition: 120ms transform ease-in-out;

  box-shadow: inset 1em 1em #fff;

  /* Windows High Contrast Mode */

  background-color: CanvasText;

}



input[type="radio"]:checked::before {

  transform: scale(1);

}



.whiteForm .wpcf7-form label i {

  color: #fff;

}

.whiteForm .wpcf7-form label input, .whiteForm .wpcf7-form label textarea {

  border-color: #fff;

}

.whiteForm .wpcf7-form label input:focus, .whiteForm .wpcf7-form label textarea:focus {

  border-color: #fff;

  color: #fff;

}

.whiteForm .wpcf7-form label input:focus ~ i, .whiteForm .wpcf7-form label textarea:focus ~ i {

  background: #fff;

  color: #102b55;

}

.whiteForm .wpcf7-form label input:not(:placeholder-shown), .whiteForm .wpcf7-form label textarea:not(:placeholder-shown) {

  border-color: #2da77a;

  outline: #2da77a;

  outline-style: none;

  color: #2da77a;

}

.whiteForm .wpcf7-form label input:not(:placeholder-shown) ~ i, .whiteForm .wpcf7-form label textarea:not(:placeholder-shown) ~ i {

  top: -10px;

  background: #2da77a;

  color: #fff;

  font-size: 0.8em;

}

.whiteForm .wpcf7-form label input:not(:placeholder-shown):focus, .whiteForm .wpcf7-form label textarea:not(:placeholder-shown):focus {

  border-color: #2da77a;

  outline: #2da77a;

  outline-style: none;

  color: #2da77a;

}

.whiteForm .wpcf7-form input[type="checkbox"] + span:before {

  border-color: #fff;

}

.whiteForm .wpcf7-form [data-name="rgpd-consent"] .wpcf7-list-item-label {

  color: #fff;

}

.whiteForm .wpcf7-form [data-name="rgpd-consent"] .wpcf7-list-item-label a {

  color: #fff;

}

.whiteForm .wpcf7-form input[type="submit"] {

  background-color: #97b2c6;

  color: #102b55;

}

.whiteForm .wpcf7-form input.wpcf7-not-valid, .whiteForm .wpcf7-form textarea.wpcf7-not-valid {

  border-color: #fd4735;

}

.whiteForm .wpcf7-form input.wpcf7-not-valid + i, .whiteForm .wpcf7-form textarea.wpcf7-not-valid + i {

  color: #fd4735 !important;

}

.whiteForm .wpcf7-form input.wpcf7-not-valid:focus, .whiteForm .wpcf7-form textarea.wpcf7-not-valid:focus {

  border-color: #fd4735;

}

.whiteForm .wpcf7-form input.wpcf7-not-valid:focus ~ i, .whiteForm .wpcf7-form textarea.wpcf7-not-valid:focus ~ i {

  background-color: #fd4735;

  color: #fff !important;

}

.whiteForm .wpcf7-form input.wpcf7-not-valid:not(:placeholder-shown) + i, .whiteForm .wpcf7-form textarea.wpcf7-not-valid:not(:placeholder-shown) + i {

  color: #fff !important;

  background: #2da77a !important;

}

.whiteForm .wpcf7-form input.wpcf7-not-valid:not(:placeholder-shown) ~ i, .whiteForm .wpcf7-form textarea.wpcf7-not-valid:not(:placeholder-shown) ~ i {

  top: -10px;

  background: #2da77a !important;

  color: #fff !important;

  font-size: 0.8em;

}

.whiteForm .wpcf7-form div.wpcf7-validation-errors, .whiteForm .wpcf7-form div.wpcf7-acceptance-missing, .whiteForm .wpcf7-form div.wpcf7-response-output {

  border: none !important;

  margin: 10px 0 !important;

  width: 100%;

  text-align: center;

}

.whiteForm .wpcf7-form.invalid .wpcf7-response-output, .whiteForm .wpcf7-form.failed .wpcf7-response-output, .whiteForm .wpcf7-form.aborted .wpcf7-response-output {

  color: #fd4735;

  text-align: center;

  text-align: center;

}

.whiteForm .wpcf7-form.sent .wpcf7-response-output {

  color: #2da77a !important;

  text-align: center;

}



.wpcf7-form {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  margin-top: 30px;

  /*ERRORS*/

}

.wpcf7-form > [data-name="objet"] {

  width: 100%;

  margin: 10px 0;

}

.wpcf7-form > [data-name="objet"] .nice-select .current {

  font-weight: bolder;

  font-size: 0.8rem;

}

.wpcf7-form > [data-name="objet"] .nice-select .list li:first-child {

  display: none;

}

.wpcf7-form label {

  width: calc(50% - 10px);

  position: relative;

  margin: 10px 0;

}

.wpcf7-form label .wpcf7-form-control-wrap {

  position: initial;

}

.wpcf7-form label input, .wpcf7-form label textarea {

  width: 100%;

  border: 2px solid #102b55;

  background: transparent;

  padding: 15px 10px 7.5px 10px;

  height: auto;

  border-radius: 30px;

  color: #102b55;

  -webkit-transition: all 0.2s ease-in-out;

  -moz-transition: all 0.2s ease-in-out;

  -o-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

}

.wpcf7-form label input:focus, .wpcf7-form label textarea:focus {

  outline-style: none;

  border-color: #081f43;

  color: #081f43;

}

.wpcf7-form label input:focus ~ i, .wpcf7-form label textarea:focus ~ i {

  top: -10px;

  background: #102b55;

  color: #fff;

}

.wpcf7-form label input:not(:placeholder-shown), .wpcf7-form label textarea:not(:placeholder-shown) {

  border-color: #2da77a;

  outline: #2da77a;

  outline-style: none;

  color: #2da77a;

}

.wpcf7-form label input:not(:placeholder-shown) ~ i, .wpcf7-form label textarea:not(:placeholder-shown) ~ i {

  top: -10px;

  background: #2da77a;

  color: #fff;

  font-size: 0.8em;

}

.wpcf7-form label input:not(:placeholder-shown):focus, .wpcf7-form label textarea:not(:placeholder-shown):focus {

  border-color: #2da77a;

  outline: #2da77a;

  outline-style: none;

  color: #2da77a;

}

.wpcf7-form label input::placeholder, .wpcf7-form label textarea::placeholder {

  color: transparent;

}

.wpcf7-form label textarea {

  max-height: 200px;

}

.wpcf7-form label i {

  position: absolute;

  font-style: normal;

  top: 12.5px;

  left: 5px;

  padding: 2.5px 10px;

  color: #102b55;

  font-weight: bolder;

  border-radius: 30px;

  font-size: 0.8em;

  -webkit-transition: all 0.2s ease-in-out;

  -moz-transition: all 0.2s ease-in-out;

  -o-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

  display: flex;

}

.wpcf7-form label.message, .wpcf7-form label.big {

  width: 100%;

}

.wpcf7-form .wpcf7-spinner {

  display: none !important;

}

.wpcf7-form input[type="submit"] {

  margin: 0 auto;

  padding: 7.5px 10px;

  background: #102b55;

  border: 1px solid #102b55;

  border-radius: 30px;

  color: #fff;

  min-width: 100px;

  text-align: center;

  cursor: pointer;

  -webkit-transition: all 0.2s ease-in-out;

  -moz-transition: all 0.2s ease-in-out;

  -o-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

}

.wpcf7-form input[type="submit"]:disabled {

  opacity: 0.5;

  cursor: not-allowed;

}

.wpcf7-form input[type="checkbox"] {

  position: absolute;

  left: -9999px;

}

.wpcf7-form input[type="checkbox"] + span {

  display: flex;

  align-items: center;

  justify-content: flex-start;

  flex-wrap: wrap;

  position: relative;

  text-align: center;

  padding: 10px;

  user-select: none;

  cursor: pointer;

  padding-left: 25px;

}

.wpcf7-form input[type="checkbox"] + span:before {

  content: '';

  display: block;

  width: 20px;

  height: 20px;

  border: 2px solid #102b55;

  border-radius: 50%;

  background-color: transparent;

  margin-right: 5px;

  margin-left: -25px;

}

.wpcf7-form input[type="checkbox"]:checked + span:before {

  background-color: #2da77a;

}

.wpcf7-form [data-name="rgpd-consent"] {

  width: 100%;

  text-align: center;

}

.wpcf7-form [data-name="rgpd-consent"] .wpcf7-list-item {

  margin: 0;

}

.wpcf7-form [data-name="rgpd-consent"] .wpcf7-list-item-label {

  color: #102b55;

}

.wpcf7-form [data-name="rgpd-consent"] .wpcf7-list-item-label a {

  color: #102b55;

  text-decoration: underline;

}

.wpcf7-form input.wpcf7-not-valid, .wpcf7-form textarea.wpcf7-not-valid {

  border-color: #fd4735;

}

.wpcf7-form input.wpcf7-not-valid + i, .wpcf7-form textarea.wpcf7-not-valid + i {

  color: #fd4735 !important;

}

.wpcf7-form input.wpcf7-not-valid:focus, .wpcf7-form textarea.wpcf7-not-valid:focus {

  border-color: #fd4735;

}

.wpcf7-form input.wpcf7-not-valid:focus ~ i, .wpcf7-form textarea.wpcf7-not-valid:focus ~ i {

  background-color: #fd4735;

  color: #fff !important;

}

.wpcf7-form input.wpcf7-not-valid:not(:placeholder-shown) + i, .wpcf7-form textarea.wpcf7-not-valid:not(:placeholder-shown) + i {

  color: #fff !important;

  background: #2da77a !important;

}

.wpcf7-form input.wpcf7-not-valid:not(:placeholder-shown) ~ i, .wpcf7-form textarea.wpcf7-not-valid:not(:placeholder-shown) ~ i {

  top: -10px;

  background: #2da77a !important;

  color: #fff !important;

  font-size: 0.8em;

}

.wpcf7-form [data-name="objet"] .wpcf7-not-valid + .nice-select {

  border-color: #fd4735;

}

.wpcf7-form [data-name="objet"] .wpcf7-not-valid + .nice-select .current {

  color: #fd4735;

}

.wpcf7-form [data-name="objet"] .wpcf7-not-valid + .nice-select:after {

  border-color: #fd4735;

}

.wpcf7-form [data-name="objet"].valide .wpcf7-select + .nice-select {

  border-color: #2da77a;

}

.wpcf7-form [data-name="objet"].valide .wpcf7-select + .nice-select .current {

  color: #2da77a;

}

.wpcf7-form [data-name="objet"].valide .wpcf7-select + .nice-select:after {

  border-color: #2da77a;

}

.wpcf7-form div.wpcf7-validation-errors, .wpcf7-form div.wpcf7-acceptance-missing, .wpcf7-form div.wpcf7-response-output {

  border: none !important;

  margin: 10px 0 !important;

  width: 100%;

}

.wpcf7-form.invalid .wpcf7-response-output, .wpcf7-form.failed .wpcf7-response-output, .wpcf7-form.aborted .wpcf7-response-output {

  color: #fd4735;

  text-align: center;

}

.wpcf7-form.sent .wpcf7-response-output {

  color: #2da77a !important;

}



/*=========FOOTER=========*/

footer {

  padding: 50px 10%;

  background-color: #102b55;

}

footer .footerOpener {

  display: none;

}

footer .logo {

  width: 100px;

  display: block;

  margin-bottom: 30px;

}

footer .logo img {

  width: 100%;

}

footer .points {

  display: flex;

  flex-direction: column;

  justify-content: center;

}

footer .points > div {

  padding: 30px 15px;

}

footer .points > div > div:nth-child(2) {

  margin: 20px 0;

}

footer .points .t-3 {

  margin-bottom: 15px;

  font-weight: bolder;

  letter-spacing: 4px;

}

footer .points .t-3 a:hover {

  color: #97b2c6;

}

footer .points .socials {

  padding: 0;

}

footer .points ul {

  display: flex;

  flex-wrap: wrap;

}

footer .points ul li {

  width: 240px;

  margin: 10px 0;

}

footer .points ul li a:hover {

  color: #97b2c6;

}

footer .col-lg-6:not(.points) {

  padding-left: 50px;

  display: flex;

  align-items: center;

}

footer .col-12:last-child {

  margin-top: 30px;

  display: flex;

  justify-content: center;

}

footer .menu-menu-container {

  width: calc(100% - 150px);

}

footer .menu-menu-container ul {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

}

footer .menu-menu-container ul li {

  padding: 10px 0;

}

footer .menu-menu-container ul li a {

  padding: 5px 0;

  letter-spacing: 4px;

}

footer .menu-menu-container ul li a:hover {

  color: rgba(255, 255, 255, 0.5);

}

footer .menu-menu-container ul li:not(:last-child) {

  border-bottom-color: #fff;

}

footer .mentions-container p {

  display: flex;

  flex-wrap: wrap;

  color: #fff;

}

footer .mentions-container a {

  text-decoration: none;

}

footer .mentions-container a:hover {

  color: #97b2c6;

}

footer .mentions-container span {

  display: flex;

}

footer .mentions-container span img {

  height: 0.9em;

  display: block;

}



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

@media screen and (max-width: 1600px) {

  .poolBox .openList span, .poolBox .openList > .filter {

    padding: 10px;

  }



  footer .points > div {

    padding: 30px 0;

  }

  footer .menu-menu-container {

    width: 100%;

  }

}

@media screen and (max-width: 1400px) {

  section {

    padding: 50px 5%;

  }



  .poolBox .openList {

    width: 100%;

  }

  .poolBox .openList span {

    width: 100%;

  }

  .poolBox .openList > .filter {

    width: 100%;

  }



  .page-accueil .fp-tableCell {

    padding: 50px 5% 50px 5%;

  }

  .page-accueil .top-page .backgroundImg:after {

    background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, #000000 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 70%, #000000 70%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);

  }

  .page-accueil .after-top .titleStyleFront {

    font-size: 2.5rem;

  }

  .page-accueil .after-top .titleStyleFront span {

    font-size: 100px;

    margin-bottom: -60px;

  }

  .page-accueil .after-top .block-text p {

    font-size: 1rem;

  }

  .page-accueil .after-top .link {

    margin-top: 15px;

  }

  .page-accueil .after-top .backgroundImg:before {

    background: linear-gradient(90deg, rgba(16, 43, 85, 0.7) 0%, rgba(16, 43, 85, 0.1) 100%);

  }

  .page-accueil .fourth-section .points {

    max-width: 530px;

    max-height: 280px;

  }

  .page-accueil .sixth-section .gridContainer {

    height: 500px;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 div:nth-child(1) {

    grid-area: 1 / 1 / 5 / 3;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 div:nth-child(2) {

    grid-area: 1 / 3 / 3 / 4;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 div:nth-child(3) {

    grid-area: 1 / 4 / 3 / 5;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 div:nth-child(4) {

    grid-area: 3 / 3 / 5 / 5;

  }



  #filterBox {

    width: 100%;

    left: 15px;

  }



  .page-equipements .boxEquipement {

    width: 400px;

    height: 400px;

    top: auto;

    bottom: 5%;

  }

  .page-equipements .equipementShow[data-cible="pompe-a-chaleur"] {

    left: calc(50% - 20px);

  }



  .localisationInfos .col-md-6:first-child {

    padding: 30px 15px 30px 5%;

  }

  .localisationInfos .col-md-6:first-child ul {

    padding-left: 60px;

  }

}

@media screen and (max-width: 1300px) {

  .poolBox .openList span, .poolBox .openList > .filter {

    letter-spacing: 0;

  }



  footer {

    padding: 50px 5%;

  }

  footer .points ul li {

    width: 210px;

    font-size: 0.9rem;

  }

}

@media screen and (max-width: 1200px) {

  header .logo {

    left: 5%;

  }



  .page-accueil .top-page .backgroundImg:after {

    background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);

  }



  .third-section .col-lg-6 {

    padding: 50px 20px 50px 15px;

  }



  .fourth-section .col-lg-6:first-child > div {

    padding: 15px 0;

  }



  .poolBox {

    width: 180px;

  }



  .openVideo svg {

    left: calc(50% - 30px);

    top: calc(50% - 30px);

    width: 60px;

    height: 60px;

  }



  .page-pisciniste .after-top .findIt {

    position: initial;

    width: 400px;

    height: 700px;

    order: 1;
    background-color: rgba(8, 31, 67,1);
    border-radius: 0;
  }

  .page-pisciniste .after-top #map {

    order: 2;

    width: calc(100% - 400px);

  }



  .formuleKit .kitBox {

    margin: 15px 0;

  }

  .formuleKit .kitBox > div {

    padding: 15px;

  }



  .page-realisations .projetContainer {

    width: 100%;

  }



  .page-mentions .mentions {

    padding-top: 75px;

  }

}

@media screen and (max-width: 1100px) {

  header .logo svg {

    width: 90px;

  }



  #filterBox {

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    bottom: -80px;

  }

  #filterBox .dimChoice {

    flex-direction: column;

    width: 320px;

  }

  #filterBox .dimChoice > div {

    width: 100%;

    padding: 15px 0;

  }

  #filterBox .dimChoice > div span {

    min-width: 100px;

  }

  #filterBox .accessChoice {

    width: 380px;

  }



  .single-piscine .caracteristiques .colors > div, .single-equipement .caracteristiques .colors > div, .single-pisciniste .caracteristiques .colors > div {

    margin-right: 15px;

  }

}

@media screen and (max-width: 1023px) {

  header .mainMenu {

    width: 420px;

    -webkit-transform: translateX(420px);

    -ms-transform: translateX(420px);

    transform: translateX(420px);

  }

  header.fixed .menuLite {

    display: flex;

  }

  header.fixed .menuLite #quickBtn {

    opacity: 1;

  }

  header.fixed .menuLite #quickBtn a {

    pointer-events: initial;

    cursor: pointer;

    box-shadow: 5px 5px 15px -10px #000;

  }



  .navSection {

    width: 40px;

    height: 40px;

    left: calc(50% - 20px);

    bottom: 2vh;

    padding: 7.5px;

  }



  .page-accueil main {

    height: auto;

  }

  .page-accueil section {

    padding: 50px 5%;

    height: auto;

    min-height: 100vh;

  }

  .page-accueil section.top-page {

    min-height: 1px;

    height: calc(var(--vh,1vh)*100);

  }

  .page-accueil section:not(.top-page) .navSection {

    display: none;

  }

  .page-accueil .top-page {

    padding-top: 150px;

  }

  .page-accueil .top-page .navSection.scrollLink {

    display: flex;

  }

  .page-accueil .top-page .navSection:not(.scrollLink) {

    display: none;

  }

  .page-accueil .top-page #quickBtn {

    flex-direction: column;

  }

  .page-accueil .top-page #quickBtn .link.blue {

    margin-bottom: 15px;

  }

  .page-accueil .top-page h1 {

    text-align: center;

  }

  .page-accueil .top-page h1 strong {

    font-size: 2.5rem;

  }

  .page-accueil .top-page h1 small {

    font-size: 1.2rem;

  }

  .page-accueil .top-page .backgroundImg div {

    display: none;

  }

  .page-accueil .top-page .backgroundImg:after {

    content: none;

  }

  .page-accueil .after-top .col-12 {

    text-align: center;

  }

  .page-accueil .after-top .t-2 {

    align-items: center;

  }

  .page-accueil .after-top .titleStyleFront {

    align-items: center;

  }

  .page-accueil .after-top .titleStyleFront span {

    margin-left: 0;

  }

  .page-accueil .after-top .titleStyleFront small {

    text-align: center;

  }

  .page-accueil .third-section, .page-accueil .fifth-section {

    padding: 0;

  }

  .page-accueil .third-section .container-fluid, .page-accueil .third-section .row, .page-accueil .fifth-section .container-fluid, .page-accueil .fifth-section .row {

    min-height: 100vh;

  }

  .page-accueil .third-section .col-lg-6 {

    margin-left: 0;

    background-color: rgba(16, 43, 85, 0.8);

    padding: 100px 15px 130px 15px;

    flex: 0 0 100%;

    max-width: 100%;

  }

  .page-accueil .third-section .backgroundImg {

    width: 100%;

  }

  .page-accueil .fourth-section .col-12 {

    flex-direction: column;

    align-items: center;

  }

  .page-accueil .fourth-section .col-12 .titleStyle {

    font-size: 2rem;

  }

  .page-accueil .fourth-section .col-12 .titleStyle span {

    font-size: 80px;

  }

  .page-accueil .fourth-section .col-12 .combinaisons {

    margin-top: 30px;

    width: 120px;

  }

  .page-accueil .fifth-section .col-lg-6 {

    background-color: rgba(16, 43, 85, 0.9);

    flex: 0 0 100%;

    max-width: 100%;

  }

  .page-accueil .fifth-section .col-lg-6 > div {

    text-align: center;

  }

  .page-accueil .fifth-section .col-lg-6 > div .t-2 {

    align-items: center;

  }

  .page-accueil .fifth-section .col-lg-6 .swiper-pagination {

    text-align: center;

  }

  .page-accueil .fifth-section .backgroundImg {

    width: 100%;

  }

  .page-accueil .sixth-section {

    min-height: auto;

  }

  .page-accueil .sixth-section .gridContainer {

    height: auto;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 div {

    max-height: 100% !important;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 div:first-child {

    height: 250px !important;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 div:first-child a {

    width: 100%;

  }

  .page-accueil .seventh-section .col-xl-5 {

    display: none;

  }

  .page-accueil footer {

    position: initial;

    -webkit-transform: none;

    -ms-transform: none;

    transform: none;

  }

  .page-accueil footer .footerOpener {

    display: none;

  }



  .page-piscines .top-page {

    padding-bottom: 20px;

  }

  .page-piscines .top-page .titleStyle {

    font-size: 2em;

    margin-bottom: 20px;

  }

  .page-piscines .top-page .titleStyle span {

    font-size: 80px;

  }

  .page-piscines .top-page .navSection {

    bottom: 15px;

  }

  .page-piscines .gammes#gammePisicne {

    padding-top: 50px;

  }



  #filterBox {

    position: relative;

    width: 100%;

    max-width: 100%;

    left: 0;

    bottom: auto;

    border-radius: 0;

  }

  #filterBox.fixed {

    width: 100%;

    -webkit-transform: translateX(100%);

    -ms-transform: translateX(100%);

    transform: translateX(100%);

  }

  #filterBox.fixed .closeFilter {

    font-size: 2rem;

  }

  #filterBox.fixed.open {

    -webkit-transform: translateX(0);

    -ms-transform: translateX(0);

    transform: translateX(0);

  }



  .single-piscine .top-page, .single-equipement .top-page {

    padding-bottom: 20px;

  }

}

@media screen and (max-width: 991px) {

  header {

    height: auto;

    justify-content: space-between;

  }

  header .logo {

    position: relative;

    left: 0;

  }

  header #burgerBtn {

    position: relative;

    right: 0;

  }

  header .menuLite ul {

    display: none;

  }

  header .menuLite #quickBtn {

    margin-top: 0;

    flex-wrap: wrap;

  }

  header .menuLite #quickBtn .link {

    margin: 5px 10px;

  }

  header.fixed {

    height: auto;

    padding: 5px 2.5%;

    justify-content: center;

  }

  header.fixed #burgerBtn {

    right: 2.5%;

    top: auto;

  }



  .paralax {

    height: 300px;

  }



  .page-accueil .top-page .backgroundImg div {

    display: none;

  }

  .page-accueil .top-page .backgroundImg:after {

    content: none;

  }



  .formulairePisciniste .col-12 {

    order: 1;

  }

  .formulairePisciniste .col-lg-6 {

    text-align: center;

  }

  .formulairePisciniste .col-lg-6:nth-child(2) {

    order: 3;

  }

  .formulairePisciniste .col-lg-6:nth-child(3) {

    order: 2;

    margin-bottom: 30px;

  }



  .newPisciniste .col-12 {

    margin-bottom: 30px;

  }

  .newPisciniste .col-md-4 {

    margin: 15px 0;

  }



  .page-equipements .titleStyle {

    display: flex;

  }

  .page-equipements .boxEquipement, .page-equipements .equipementShow {

    display: none;

  }

  .page-equipements .poolBox {

    width: 180px;

  }



  .avantages .col-lg-5 {

    margin-bottom: 30px;

  }

  .avantages .col-lg-7 ul li {

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    margin: 20px 0;

  }

  .avantages .col-lg-7 ul li p {

    width: 500px;

    max-width: 100%;

  }



  .single-piscine .after-top .col-12 div, .single-equipement .after-top .col-12 div, .single-pisciniste .after-top .col-12 div {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

  }

  .single-piscine .after-top .col-12 .link, .single-equipement .after-top .col-12 .link, .single-pisciniste .after-top .col-12 .link {

    margin: 5px;

  }

  .single-piscine .after-top .col-lg-5 img, .single-piscine .after-top .col-lg-5 .openVideo, .single-equipement .after-top .col-lg-5 img, .single-equipement .after-top .col-lg-5 .openVideo, .single-pisciniste .after-top .col-lg-5 img, .single-pisciniste .after-top .col-lg-5 .openVideo {

    max-height: 100%;

    max-width: 100%;

    width: 500px;

  }

  .single-piscine .after-top .col-lg-7, .single-equipement .after-top .col-lg-7, .single-pisciniste .after-top .col-lg-7 {

    margin-top: 30px;

    text-align: center;

    align-items: center;

  }

  .single-piscine .after-top .col-lg-7 .block-text ul, .single-equipement .after-top .col-lg-7 .block-text ul, .single-pisciniste .after-top .col-lg-7 .block-text ul {

    padding-left: 0;

  }

  .single-piscine .after-top .col-lg-7 .block-text ul li, .single-equipement .after-top .col-lg-7 .block-text ul li, .single-pisciniste .after-top .col-lg-7 .block-text ul li {

    list-style: inside;

  }

  .single-piscine .caracteristiques .col-12, .single-equipement .caracteristiques .col-12, .single-pisciniste .caracteristiques .col-12 {

    margin: 30px 0;

  }

  .single-piscine .caracteristiques .points, .single-equipement .caracteristiques .points, .single-pisciniste .caracteristiques .points {

    padding-top: 30px;

    margin-bottom: 30px;

  }

  .single-piscine .caracteristiques .points:after, .single-equipement .caracteristiques .points:after, .single-pisciniste .caracteristiques .points:after {

    width: 100%;

    left: 0;

  }

  .single-piscine .caracteristiques .col-lg-7, .single-equipement .caracteristiques .col-lg-7, .single-pisciniste .caracteristiques .col-lg-7 {

    padding-left: 15px;

    display: flex;

  }

  .single-piscine .caracteristiques .col-lg-7 > div, .single-equipement .caracteristiques .col-lg-7 > div, .single-pisciniste .caracteristiques .col-lg-7 > div {

    width: 50%;

    padding: 0 10px;

  }

  .single-piscine .caracteristiques .colors > div, .single-equipement .caracteristiques .colors > div, .single-pisciniste .caracteristiques .colors > div {

    margin-right: 15px;

  }

  .single-piscine .materiel, .single-equipement .materiel, .single-pisciniste .materiel {

    padding-bottom: 0;

  }

  .single-piscine .materiel .col-lg-4, .single-piscine .materiel .col-lg-6, .single-equipement .materiel .col-lg-4, .single-equipement .materiel .col-lg-6, .single-pisciniste .materiel .col-lg-4, .single-pisciniste .materiel .col-lg-6 {

    text-align: center;

    align-items: center;

    margin-bottom: 30px;

  }

  .single-piscine .materiel .col-lg-4 .t-2, .single-piscine .materiel .col-lg-6 .t-2, .single-equipement .materiel .col-lg-4 .t-2, .single-equipement .materiel .col-lg-6 .t-2, .single-pisciniste .materiel .col-lg-4 .t-2, .single-pisciniste .materiel .col-lg-6 .t-2 {

    align-items: center;

    text-align: center;

  }

  .single-piscine .materiel .col-lg-4:last-child, .single-piscine .materiel .col-lg-6:last-child, .single-equipement .materiel .col-lg-4:last-child, .single-equipement .materiel .col-lg-6:last-child, .single-pisciniste .materiel .col-lg-4:last-child, .single-pisciniste .materiel .col-lg-6:last-child {

    margin-bottom: 0;

  }

  .single-piscine .materiel.linked .col-lg-6:first-child, .single-equipement .materiel.linked .col-lg-6:first-child, .single-pisciniste .materiel.linked .col-lg-6:first-child {

    margin-bottom: 30px;

  }

  .single-piscine .materiel.linked ul li, .single-equipement .materiel.linked ul li, .single-pisciniste .materiel.linked ul li {

    margin: 7.5px 0;

  }

  .single-piscine .formuleKit, .single-equipement .formuleKit, .single-pisciniste .formuleKit {

    padding-bottom: 0;

  }

  .single-piscine .formuleKit .kitBox > div .block-text p, .single-equipement .formuleKit .kitBox > div .block-text p, .single-pisciniste .formuleKit .kitBox > div .block-text p {

    margin: 15px auto;

  }



  .grid {

    height: 100%;

  }

  .grid div {

    min-height: 100%;

    max-height: 250px;

    cursor: pointer;

  }

  .grid.grid-24 div {

    max-height: 200px;

  }

  .grid.grid-20 div {

    max-height: 200px;

  }

  .grid.grid-16 div {

    max-height: 200px;

  }

  .grid.grid-12 div {

    max-height: 200px;

  }

  .grid.grid-10 div {

    max-height: 250px;

  }

  .grid.grid-8 div {

    max-height: 200px;

  }

  .grid.grid-4 div {

    max-height: 200px;

  }



  .page-pisciniste .after-top .findIt {

    width: 100%;
    height: auto;

  }

  .page-pisciniste .after-top #map {

    width: 100%;

    height: 500px;

  }



  .single-pisciniste .after-top .col-lg-5 img {

    width: auto;

  }

  .single-pisciniste .localisationInfos #singleMap {

    height: 400px;

  }



  footer {

    padding-top: 5px;

  }

  footer .col-lg-6:not(.points) {

    padding-left: 15px;

  }

  footer .points:after {

    width: calc(100% + 10%);

    left: -5%;

  }

}

@media screen and (max-width: 768px) {

  header.fixed #burgerBtn {

    top: 20px;

  }

  header.fixed .menuLite {

    display: none;

  }



  .third-section .col-12 .titleStyle span {

    font-size: 100px;

  }



  .page-accueil .fourth-section .col-12 .titleStyle {

    font-size: 1.5rem;

  }

  .page-accueil .sixth-section .grid div p {

    display: none;

  }



  .titleStyle.lite {

    font-size: 1.5rem;

  }

  .titleStyle.lite span {

    font-size: 55px;

  }



  .single-piscine .caracteristiques .col-lg-7, .single-equipement .caracteristiques .col-lg-7, .single-pisciniste .caracteristiques .col-lg-7 {

    flex-wrap: wrap;

  }

  .single-piscine .caracteristiques .col-lg-7 > div, .single-equipement .caracteristiques .col-lg-7 > div, .single-pisciniste .caracteristiques .col-lg-7 > div {

    width: 100%;

    padding: 10px;

  }

  .single-piscine .caracteristiques .col-lg-7 > div.colors, .single-equipement .caracteristiques .col-lg-7 > div.colors, .single-pisciniste .caracteristiques .col-lg-7 > div.colors {

    text-align: center;

    justify-content: center;

  }

  .single-piscine .caracteristiques .col-lg-7 > div.colors h3, .single-equipement .caracteristiques .col-lg-7 > div.colors h3, .single-pisciniste .caracteristiques .col-lg-7 > div.colors h3 {

    letter-spacing: 2px;

  }

  .single-piscine .caracteristiques .col-lg-7 > div.colors > div, .single-equipement .caracteristiques .col-lg-7 > div.colors > div, .single-pisciniste .caracteristiques .col-lg-7 > div.colors > div {

    margin: 10px 5px;

    width: 90px;

  }

  .single-piscine .caracteristiques .col-lg-7 > div.colors > div span, .single-equipement .caracteristiques .col-lg-7 > div.colors > div span, .single-pisciniste .caracteristiques .col-lg-7 > div.colors > div span {

    font-size: 0.9rem;

    text-transform: initial;

  }

  .single-piscine .caracteristiques .col-lg-7 > div.mesures ul, .single-equipement .caracteristiques .col-lg-7 > div.mesures ul, .single-pisciniste .caracteristiques .col-lg-7 > div.mesures ul {

    margin: 15px auto;

    text-align: center;

  }

  .single-piscine .caracteristiques .col-lg-7 > div.mesures ul li, .single-equipement .caracteristiques .col-lg-7 > div.mesures ul li, .single-pisciniste .caracteristiques .col-lg-7 > div.mesures ul li {

    justify-content: center;

  }

  .single-piscine .caracteristiques .col-lg-7 > div.mesures ul li p, .single-equipement .caracteristiques .col-lg-7 > div.mesures ul li p, .single-pisciniste .caracteristiques .col-lg-7 > div.mesures ul li p {

    display: flex;

    align-items: center;

  }

  .single-piscine .caracteristiques .col-lg-7 > div.mesures ul li p:first-child, .single-equipement .caracteristiques .col-lg-7 > div.mesures ul li p:first-child, .single-pisciniste .caracteristiques .col-lg-7 > div.mesures ul li p:first-child {

    width: auto;

  }

  .single-piscine .caracteristiques .col-lg-7 > div.mesures ul li p:first-child:after, .single-equipement .caracteristiques .col-lg-7 > div.mesures ul li p:first-child:after, .single-pisciniste .caracteristiques .col-lg-7 > div.mesures ul li p:first-child:after {

    content: ':';

    display: block;

    margin: 0 5px;

  }

  .single-piscine .caracteristiques .col-lg-7 > div.mesures ul li p:nth-child(2), .single-equipement .caracteristiques .col-lg-7 > div.mesures ul li p:nth-child(2), .single-pisciniste .caracteristiques .col-lg-7 > div.mesures ul li p:nth-child(2) {

    width: auto;

  }

  .single-piscine .caracteristiques .col-lg-7 > div.mesures ul li .msgAlerte, .single-equipement .caracteristiques .col-lg-7 > div.mesures ul li .msgAlerte, .single-pisciniste .caracteristiques .col-lg-7 > div.mesures ul li .msgAlerte {

    position: relative;

    margin-left: 10px;

    left: auto;

    top: auto;

  }

  .single-piscine .caracteristiques .col-lg-7 > div.mesures ul li .msgAlerte:before, .single-equipement .caracteristiques .col-lg-7 > div.mesures ul li .msgAlerte:before, .single-pisciniste .caracteristiques .col-lg-7 > div.mesures ul li .msgAlerte:before {

    left: auto;

    right: 100%;

    text-align: right;

    width: 250px;

  }

  .single-piscine .caracteristiques .colors > div, .single-equipement .caracteristiques .colors > div, .single-pisciniste .caracteristiques .colors > div {

    margin-right: 15px;

  }



  .localisationInfos .col-md-6 > div {

    align-items: center;

  }

  .localisationInfos .col-md-6:first-child {

    text-align: center;

    padding: 30px 15px;

    justify-content: center;

  }

  .localisationInfos .col-md-6:first-child ul {

    padding-left: 0;

  }

  .localisationInfos .col-md-6:first-child ul li {

    align-items: center;

  }

  .localisationInfos .col-md-6:first-child ul li:before {

    position: initial;

    margin-bottom: 10px;

  }

  .wpcf7-form [data-name="rgpd-consent"] .wpcf7-list-item-label {

    text-align: center;

    flex-direction: column;

    justify-content: center;

    padding-left: 10px;

  }

  .wpcf7-form [data-name="rgpd-consent"] input[type="checkbox"] + span:before {

    margin-right: 0;

    margin-left: 0;

    margin-top: -7.5px;

  }

}

@media screen and (max-width: 560px) {

  .top-page {

    height: calc(var(--vh,1vh)*100);

  }



  .page-excel-piscine .top-page, .page-contact .top-page, .page-pisciniste .top-page, .page-actualites .top-page, .page-configurateur .top-page, .single .top-page, .page-avis .top-page, .single-realisation .top-page, .page-realisations .top-page, .page-mentions .top-page {

    min-height: 1px;

  }



  .page-pisciniste #map .container-distributeur > div {

    width: 100%;

  }



  .page-accueil .after-top .titleStyleFront {

    font-size: 1.5rem;

  }

  .page-accueil .after-top .titleStyleFront span {

    margin-bottom: -45px;

    font-size: 80px;

  }

  .page-accueil .third-section .col-lg-6 {

    padding: 30px 15px;

  }

  .page-accueil .third-section .col-xl-6 > div img {

    height: 60px;

    max-width: 60px;

  }

  .page-accueil .third-section .col-xl-6 > div strong {

    font-size: 1rem;

  }

  .page-accueil .fifth-section .col-lg-6 {

    padding: 30px 15px;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 {

    grid-template-columns: repeat(2, 1fr);

    grid-template-rows: 1fr;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 > div {

    display: none;

    height: 100%;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 > div:first-child {

    grid-area: 1 / 1 / 2 / 2;

    display: block;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 > div:last-child {

    grid-area: 1 / 2 / 2 / 3;

    display: block;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 > div:last-child p {

    display: block;

  }



  .block-post {

    flex-direction: column;

  }

  .block-post .content {

    width: 100%;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

  }

  .block-post .content > div {

    align-items: center;

    justify-content: center;

  }

  .block-post .content .t-2 {

    align-items: center;

  }



  .page-realisations .projetContainer {

    flex-direction: column;

  }

  .page-realisations .projetContainer > div .t-2 {

    align-items: center;

  }

  .page-realisations .projetContainer > div:first-child {

    width: 100%;

    max-height: 250px;

    margin-bottom: 30px;

  }

  .page-realisations .projetContainer > div:last-child {

    width: 100%;

    margin-left: 0;

    align-items: center;

    text-align: center;

  }



  footer .points {

    text-align: center;

  }

  footer .points .t-3 {

    align-items: center;

  }

  footer .points ul li {

    width: 100%;

  }

  footer .tableUl li {

    text-align: center;

    letter-spacing: 2px;

  }

  footer .socials {

    justify-content: center;

    flex-wrap: wrap;

  }

  footer .mentions-container p {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

  }

  footer .mentions-container p a, footer .mentions-container p span {

    margin: 5px 0;

  }

}

@media screen and (max-width: 480px) {

  .t-2 {

    letter-spacing: 2px;

    text-align: center;

  }



  .link {

    letter-spacing: 2px;

  }



  .titleStyle {

    letter-spacing: 2px;

  }

  .titleStyle.lite span {

    font-size: 45px;

    text-align: center;

  }



  .top-page .titleStyle.lite span {

    text-align: center;

    font-size: 55px;

  }



  header .mainMenu {

    width: 100%;

    padding: 80px 15px 30px 15px;

    -webkit-transform: translateX(100%);

    -ms-transform: translateX(100%);

    transform: translateX(100%);

  }

  header .mainMenu ul li a {

    font-size: 1.3rem;

    letter-spacing: 2px;

  }

  header .menuLite {

    display: none;

  }



  .page-accueil .top-page .container-fluid {

    display: block;

  }

  .page-accueil .top-page h1 strong {

    font-size: 2rem;

    letter-spacing: 2px;

  }

  .page-accueil .top-page h1 strong:before {

    content: none;

  }

  .page-accueil .top-page h1 small {

    letter-spacing: 2px;

  }

  .page-accueil .sixth-section .gridContainer {

    max-height: 100%;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 {

    display: flex;

    flex-direction: column;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 > div:first-child {

    max-height: 250px;

    display: flex;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 > div:first-child a {

    max-height: 100%;

    display: block;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 > div:last-child {

    text-align: center;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 > div:last-child .t-2 {

    align-items: center;

  }

  .page-accueil .sixth-section .gridContainer .grid.grid-4 > div:last-child p {

    text-align: center;

  }



  #filterBox {

    padding: 30px 15px;

  }

  #filterBox .dimChoice {

    width: 230px;

  }

  #filterBox .dimChoice > div {

    flex-direction: column;

  }

  #filterBox .dimChoice > div span {

    margin-bottom: 25px;

    text-align: center;

  }

  #filterBox .accessChoice {

    width: 320px;

    flex-direction: column;

    align-items: center;

    justify-content: center;

  }

  #filterBox .accessChoice > div {

    margin: 10px 0;

    width: 100%;

    align-items: center;

  }

  #filterBox .accessChoice > div .labelControl {

    margin: 5px 0;

  }

  #filterBox .accessChoice > div .labelControl + .labelControl {

    margin-top: 5px;

  }



  .grid {

    height: 100%;

    grid-template-columns: repeat(2, 1fr) !important;

    grid-template-rows: 1fr !important;

  }

  .grid > div {

    grid-area: auto !important;

    max-height: 200px !important;

    height: 200px;

  }

  .grid.grid-5 > div:last-child, .grid.grid-3 > div:last-child {

    display: none;

  }



  .single-equipement .after-top .col-lg-5 .equipmentSwiper {

    height: 300px;

  }



  .single-piscine .caracteristiques .col-lg-7 > div.mesures ul li p:first-child, .single-equipement .caracteristiques .col-lg-7 > div.mesures ul li p:first-child, .single-pisciniste .caracteristiques .col-lg-7 > div.mesures ul li p:first-child {

    letter-spacing: 2px;

  }



  .page-pisciniste header {

    position: relative;

    background-color: #102b55;

  }

  .page-pisciniste #map .container-distributeur .photo-distributeur {

    width: 100px;

    height: 100px;

  }



  .wpcf7-form label {

    width: 100%;

  }



  .single .top-page .col-xl-6 .t-2 {

    text-align: left;

  }



  .page-mentions .mentions .t-2 {

    align-items: flex-start;

    text-align: left;

  }

}

@media screen and (max-width: 360px) {

  section {

    padding: 30px 0;

  }

  .top-page .titleStyle.lite span{
    font-size: 45px;
  }



  .page-mentions .mentions {

    padding: 30px 2.5%;

  }



  .gridContainer {

    padding: 0 5px;

  }

  .gridContainer .grid {

    grid-column-gap: 5px;

    grid-row-gap: 5px;

  }

}

@media screen and (max-height: 830px) and (min-width: 1023px) {

  .navSection {

    width: 40px;

    height: 40px;

    left: calc(50% - 20px);

    bottom: 2vh;

    padding: 7.5px;

  }



  .single-piscine .top-page, .single-equipement .top-page {

    padding-bottom: 20px;

  }



  .third-section .col-12 .titleStyle {

    font-size: 1.8rem;

    margin-bottom: 0;

  }

  .third-section .col-12 .titleStyle span {

    font-size: 100px;

  }

  .third-section .col-xl-6 > div.block-text {

    margin: 5px 0;

  }

  .third-section .col-xl-6 > div img {

    max-width: 55px;

    height: 55px;

  }

  .third-section .col-xl-6 > div strong {

    font-size: 1rem;

  }



  .fourth-section .titleStyle {

    font-size: 2rem;

  }

  .fourth-section .titleStyle span {

    font-size: 100px;

  }



  .seventh-section .col-xl-5 img {

    max-height: 450px;

  }



  .block-post h3 {

    margin: 5px 0;

    letter-spacing: 2px;

    font-size: 1.2rem;

  }

  .block-post .content > div {

    flex-direction: row;

    align-items: flex-end;

  }

  .block-post .content > div span:first-child {

    font-size: 1em;

  }

}

@media screen and (max-height: 780px) and (min-width: 1023px) {

  .sixth-section .gridContainer .grid {

    max-height: calc(100vh - 190px);

  }

}

@media screen and (max-height: 720px) and (min-width: 1023px) {

  .sixth-section .grid div p {

    display: none;

  }

}

/****IPAD 12.9 PORTRAIT*/

@media screen and (max-height: 1400px) and (max-width: 1024px) and (orientation: portrait) {

  .page-accueil .top-page #quickBtn {

    flex-direction: column;

  }

  .page-accueil .top-page #quickBtn .link.blue {

    margin-bottom: 15px;

  }

  .page-accueil .top-page .backgroundImg div {

    display: none;

  }

  .page-accueil .top-page .backgroundImg:after {

    content: none;

  }

  .page-accueil .after-top .col-12 {

    text-align: center;

  }

  .page-accueil .after-top .t-2 {

    align-items: center;

  }

  .page-accueil .after-top .titleStyleFront {

    align-items: center;

  }

  .page-accueil .after-top .titleStyleFront span {

    margin-left: 0;

  }

  .page-accueil .after-top .titleStyleFront small {

    text-align: center;

  }



  .third-section .col-lg-6 {

    margin-left: 0;

    background-color: rgba(16, 43, 85, 0.8);

    padding: 100px 15px 130px 15px;

    flex: 0 0 100%;

    max-width: 100%;

  }

  .third-section .backgroundImg {

    width: 100%;

  }



  .fourth-section .points {

    display: none;

  }

  .fourth-section .col-lg-6:first-child {

    margin-bottom: 20px;

  }

  .fourth-section .col-lg-6:first-child > div {

    text-align: center;

  }

  .fourth-section .col-lg-6:first-child > div .t-2 {

    align-items: center;

  }

  .fourth-section .col-lg-6:last-child img {

    margin: 30px 0;

  }



  .fifth-section .col-lg-6 {

    background-color: rgba(16, 43, 85, 0.9);

    flex: 0 0 100%;

    max-width: 100%;

  }

  .fifth-section .backgroundImg {

    width: 100%;

  }



  .seventh-section .col-xl-5 {

    display: none;

  }

}

/****IPAD 11 PAYSAGE*/

@media screen and (max-height: 750px) and (max-width: 1200px) {

  .page-accueil .top-page .backgroundImg:after {

    background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, #000000 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);

  }

}

.top-page.not-found {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}



.top-page.not-found svg {

  width: 250px;

  max-width: 100%;

}



.top-page.not-found .top-title {

  text-align: center;

}



.top-page.not-found .top-title h1 {

  margin: 15px 0;

}



body.can-touch * {

  cursor: default !important;

  -webkit-tap-highlight-color: transparent;

  -moz-tap-highlight-color: transparent;

}



body.ios .paralax {

  background-attachment: scroll;

}



video {

  max-width: 100%;

  aspect-ratio: 1920/1080;

}



.page-excel-piscine header {

  position: fixed;

  background: none;

}



.page-excel-piscine .top-page {

  padding-bottom: 100px;

  height: calc(var(--vh,1vh)*100);

}



.page-excel-piscine .top-page .backgroundImg {

  z-index: 0;

}



.page-excel-piscine .top-page .row {

  justify-content: center;

}



.page-excel-piscine .top-page .container-fluid {

  z-index: 1;

}



.top-page video {

  z-index: -1;

  aspect-ratio: auto;

  width: 100%;

  height: 100%;

  object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;

}

.cmplz-cookiebanner{padding-top: 35px;}
.cmplz-cookiebanner .cmplz-title{font-weight: bold;}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {position:absolute;top:-5px;right:0;font-size:0.9em;text-align:right;text-decoration:underline;margin-right:20px;background-color:initial!important;border:0!important;color:#000!important;padding:0!important;font-weight:normal;font-family:Helvetica,Calibri,Arial,sans-serif!important;}
.cmplz-cookiebanner .cc-btn.cc-show-settings {width:100%!important;}
.page-mentions #cmplz-document{max-width: 100%;}


.grecaptcha-badge { visibility: hidden; }
.recaptchaCredit{font-size: 0.8rem;margin: 7.5px 0 15px 0;width: 100%;text-align: center;}
.whiteForm .recaptchaCredit a:hover, .whiteForm .recaptchaCredit a {color: #fff;}
.configSlide .recaptchaCredit{color: #102b55;}
.recaptchaCredit a:hover, .recaptchaCredit a, .configSlide .recaptchaCredit a:hover, .configSlide .recaptchaCredit a {color: #102b55;}
.whiteForm.fancybox__content {color: #fff;}