@charset "UTF-8";
#newheader {z-index: 1000; font-family: 'maytronics', Helvetica, Arial, "sans-serif";}
#newheader strong {font-weight: bold !important;}
#newheader div, #newheader a, #newheader li, #newheader ul, #newheader img {box-sizing: border-box; text-decoration: none; color: #353e47;}
#newheader.overlayfixed {position: fixed; min-height: 100%; background-color: rgba(53,62,71,0.70); transition: all .2s ease;}
/* TOP MENU */
#newheader .topmenu {width: 100%; background-color: #f7f7f7; font-size: 12px; z-index: 5}
#newheader .topmenu .content {width: 100%; max-width: 1200px; margin: auto; display: flex; flex-direction: row; justify-content: space-between; padding: 8px;}
#newheader .topmenu .language {display: flex; flex-direction: row; align-items: center; position: relative; line-height: 25px;}
#newheader .topmenu .language:hover {color: #58c8df; cursor: pointer;}
#newheader .topmenu .language::before {width: 18px; height: 18px; content: url("../images/language.svg"); margin-right: 5px;}
#newheader .topmenu .language:hover::before {content: url("../images/languageb.svg")}
#newheader .topmenu .language div {flex-direction: column; position: absolute; background-color: #efefef; z-index: 2; display: none; top: 23px;}
#newheader .topmenu .language:hover div {display: flex;}
#newheader .topmenu .language div a {padding: 3px 15px; margin: 0;}
#newheader .topmenu .petitmenu {display: flex; flex-direction: row; justify-content: flex-end; list-style-type: none; margin: 0; padding: 0; align-items: center}
#newheader .topmenu a {margin-left: 10px;}
#newheader .topmenu a:hover {color: #58c8df;}

/* LOGO LOC ET RECHERCHE */
#newheader .logolocsearch {width: 100%; background-color: #ffffff;}
#newheader .logolocsearch .content {width: 100%; max-width: 1200px; margin: auto; display: flex; flex-direction: row; justify-content: space-between}
#newheader .logolocsearch .logo {text-align: center;}
#newheader .logolocsearch .logo img {height: auto; width: 350px; margin: 10px}
#newheader .logolocsearch .locsearch {display: flex; flex-direction: row;}
#newheader .logolocsearch .locsearch .loc {background-color: #ff9547; color: #ffffff; display: flex; flex-direction: row; height: 100%; justify-content: center; align-items: center; padding: 15px; font-size: 13px;}
#newheader .logolocsearch .locsearch .loc span {color: #ffffff;}
#newheader .logolocsearch .locsearch .loc .pictoloc {width: 18px; height: 25px; margin-right: 10px;}
#newheader .logolocsearch .locsearch .loc .pictoloc::after {content: url("../images/loc.svg")}
#newheader .logolocsearch .locsearch .loc:hover {background-color: #353e47;}
#newheader .logolocsearch .locsearch .search {cursor:pointer;background-color: #efefef; display: flex; flex-direction: row; height: 100%; justify-content: center; align-items: center; padding: 15px 40px;}
#newheader .logolocsearch .locsearch .search .pictosearch {width: 22px; height: 22px;}
#newheader .logolocsearch .locsearch .search .pictosearch::after  {content: url("../images/search.svg")}
#newheader .logolocsearch .locsearch .search:hover {background-color: #353e47;}
#newheader .logolocsearch .locsearch .search:hover .pictosearch::after  {content: url("../images/searchb.svg")}
#newheader .logolocsearch .menumobile {display: none;}
.searchbloc {position: absolute; width: 100%; background-color: #58c8df; box-sizing: border-box; margin-top:-200px; transition: all 0.5s ease;}
.searchbloc.preloadmouv {position:relative;}
.searchbloc.actif {margin-top:0 !important;}
.searchbloc form {width: 100%; max-width: 1200px; margin: auto; display: flex; flex-direction: row; justify-content: space-between; padding: 10px;box-sizing: border-box;}
.searchbloc form button {width: 22px; height: 22px; background-color: transparent; border: none; padding: 0; cursor: pointer; margin-right: 10px}
.searchbloc form button::after {content: url("../images/searchb.svg")}
.searchbloc form input {width: 100%; background-color: transparent; border: none; color: #ffffff; font-size: 14px; font-style: italic;}
.searchbloc form input::placeholder {color: #ffffff;}
.searchbloc form .close {width: 22px; height: 22px; margin-left: 10px;;}
.searchbloc form .close::after {content: url("../images/close.svg")}

/* NAVIGATION */
#newheader {width: 100%; height: auto; position: relative; z-index: 1000; color: #353e47;}
#newheader .menu {width: 100%; background-color: #58c8df; position:relative;}
#newheader nav {width: 100%; max-width: 1200px; margin: auto; display: flex; flex-direction: row; justify-content: space-between;}
#newheader nav .logo {display: none}
#newheader nav ul {width: 100%; display: flex; flex-direction: row; flex-basis:fit-content; margin: 0; padding: 0; }
#newheader nav ul li {list-style-type: none; padding: 0; margin: 0; }
#newheader nav ul li>a, #newheader nav span>a, #newheader nav .piscines-residentielles, #newheader nav .piscines-collectives, #newheader nav .taille-piscine {color:#ffffff; padding: 14px 12px; font-size: 14px; font-weight: 600; line-height: 17px; display: block; height: 100%;}
#newheader nav ul li>a:hover, #newheader nav ul li:hover>a, #newheader nav .piscines-residentielles:hover, #newheader nav .piscines-collectives:hover, #newheader nav .taille-piscine:hover {color:#353e47; background-color: #f7f7f7; cursor: pointer;}
#newheader nav .choisirrobot {margin-left: auto;}
#newheader nav .choisirrobot a {background-color: #48a3b5; white-space: nowrap; padding-left: 50px;}
#newheader nav .choisirrobot a::before {content: url(../images/pconfig.svg); width: 30px; height: 30px; position:absolute; margin:-5px 0 0 -40px;}
#newheader nav .choisirrobot a:hover {background-color: #353e47; color:#FFF}
#newheader nav ul .titremobilechoisir, #newheader nav ul .titremobilegamme, #newheader nav ul .menutaillepiscine, #newheader nav .lienmobile {display: none;}
#newheader nav .liendesktop {display: block;}
#newheader nav ul li .piscineresid, #newheader nav ul li .piscinecollec, #newheader nav ul li .taillepiscine {width: 100%; position: absolute; background-color: #f7f7f7; left: 0; top:-200vh; z-index: -1; opacity: 0; transition: all .5s ease}
#newheader nav ul li .piscineresid .content {width: 100%; max-width: 1200px; margin: auto; padding: 15px 8px 0;}
#newheader nav ul li .piscinecollec .content, #newheader nav ul li .piscineresid .taillesresid .content, #newheader nav ul li .taillepiscine .content {width: 100%; max-width: 1200px; margin: auto; padding: 15px 8px;}

/*#newheader nav ul li:hover .piscineresid, #newheader nav ul li:hover .piscinecollec {top:45px; opacity: 1;}*/
#newheader nav ul li .ouverture {top:45px; opacity: 1;}

#newheader nav ul li .piscineresid p, #newheader nav ul li .piscinecollec .content p {font-size: 16px; line-height: 18px; font-weight: 100; margin: 0 0 10px 0;}
#newheader nav ul li .piscineresid .gammesresid {background-color: #f7f7f7; z-index: 5;}
#newheader nav ul li .piscineresid .gammesresid p, #newheader nav ul li .piscinecollec .gammescollec p, #newheader nav ul li .piscineresid .taillesresid p {font-size: 16px; line-height: 18px; font-weight: 300; margin: 0 0 5px 0;}
#newheader .titremobile, #newheader .mobile .close, #newheader .mobile .retour {display: none;}

#newheader nav ul li .gammes, #newheader nav ul li .tailles, #newheader nav ul li .piscineresid .detailgamme .fleche {width: 100%; display: flex; flex-direction: row; justify-content: space-between;}
#newheader nav ul li .gammes div {width: 15%; background-color: #eeeeee; cursor: pointer; transition: all .5s ease;}
#newheader nav ul li .gammes>div:hover {background-color: #d2d2d2;}
#newheader nav ul li .gammes>div::after {content: ""; position: absolute; top: 50%; left: 50%; margin: -30px; background-color: rgba(53,62,71,0); background-repeat: no-repeat; background-size: 30px; background-position: center center; transition: all .2s ease;}
#newheader nav ul li .gammes>div:hover::after {content: ""; width: 60px; height: 60px; position: absolute; top: 50%; left: 50%; margin: -30px; background-image: url("../images/searchb.svg"); background-color: rgba(53,62,71,0.80); background-repeat: no-repeat; background-size: 30px; background-position: center center; border-radius: 200px;}
#newheader nav img {width:80%; height: auto; margin: auto; display: block}
#newheader nav ul li .gammes div p, #newheader nav ul li .tailles div a p {font-size: 18px; font-weight: 600 !important; margin: 0 !important; color: #58c8df; line-height: 20px; padding: 0 10px; }
#newheader nav ul li .gammes div span, #newheader nav ul li .tailles div a span {font-size: 12px; font-weight: 100; line-height: 14px; padding: 0 10px 10px; display: block;}
#newheader nav ul li .piscineresid .taillesresid {background-color: #efefef; margin-top: 15px; z-index: -1; transition: all .5s ease}
#newheader nav ul li .tailles div {width: 32%; background-color: #cccccc; background-size: cover; background-position: center;}
#newheader nav ul li .gammes div, #newheader nav ul li .tailles div a {display: block; height: 100%; position: relative;}
#newheader nav ul li .tailles div a p, #newheader nav ul li .tailles div a span {color: #ffffff;}
#newheader nav ul li .tailles div a {background-color: rgba(53,62,71,0.60); padding: 50px 10px 10px;}
#newheader nav ul li .tailles div a:hover {background-color: rgba(53,62,71,0.30);}

#newheader nav ul li .piscineresid .detailgamme {background-color: #e2e2e2; margin:auto; width: 100%; position: relative; overflow: hidden;}
#newheader nav ul li .piscineresid .detailgamme>div {width: 100%; background-color: #e2e2e2; position: absolute; z-index: 1; top:0; transition: top .5s ease}
#newheader nav ul li .piscineresid .detailgamme>div .content {width: 100%; max-width: 1200px; margin: auto; padding: 0 8px 15px;  position: relative;}
#newheader nav ul li .piscineresid .detailgamme .fleche div {width: 15%; text-align: center;}
.arrow-down {width: 0; height: 0; border-right: 15px solid transparent; border-left: 15px solid transparent; border-top: 15px solid #eeeeee; display: inline-block;}
#newheader nav ul li .intro a {font-size: 14px; background-color: #58c8df; padding: 8px; color: #FFFFFF; display: inline-block;}
#newheader nav ul li .intro a:hover {background-color: #353e47;}

#newheader nav ul li .piscineresid .detailgamme .robots {width: 100%; display: flex; flex-direction: row; justify-content: space-between;}
#newheader nav ul li .piscineresid .detailgamme .robots div {width: 10%; align-self: flex-end; text-align: center; position: relative;}
#newheader nav ul li .piscineresid .detailgamme .robots .intro {width: 25%; border-right: 1px solid #eeeeee; text-align: left; height: 100%; padding-right: 10px;}
#newheader nav ul li .piscineresid .detailgamme .robots .intro p {font-size: 16px; font-weight: 600; color: #58c8df;}
#newheader nav ul li .piscineresid .detailgamme .robots .produit a, #newheader nav ul li .piscineresid .robots .produit a span {font-size: 15px; font-weight: 600; color: #58c8df; width: 100%; display: block;}

#newheader nav ul li .piscinecollec .content {width: 100%; display: flex; flex-direction: row; justify-content: space-between; flex-basis: fit-content; align-items: flex-end;}
#newheader nav ul li .piscinecollec .content .intro {width: 40%; border-right: 1px solid #eeeeee; text-align: left; padding-right: 3%; height: 100%;}
#newheader nav ul li .piscinecollec .content .intro p {font-size: 20px; line-height: 22px; font-weight: 600; color: #58c8df;}
#newheader nav ul li .piscinecollec .content .intro p+p {font-size: 15px; font-weight: 300; color: #353e47;}
#newheader nav ul li .piscinecollec .content .robots {display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; width: 100%}
#newheader nav ul li .piscinecollec .content .robots div {width: 12%; align-self: flex-end; text-align: center; margin-left: 5%}
#newheader nav ul li .piscinecollec .content .produit a, #newheader nav ul li .piscinecollec .content .produit a span {font-size: 15px; font-weight: 600; color: #58c8df; width: 100%; display: block;}

/* MOUVEMENTS MENU NIVEAU 2 */
#newheader nav ul li .piscineresid .taillesresid.actif {margin-top: -180px !important; opacity: 0 !important; z-index: -1}
#newheader nav ul li .piscineresid div.actif {position:relative; top: 0 !important; z-index: 3; opacity: 1 !important;}

/* OPACITE IMAGES ET HOVER */
#newheader .opacite {opacity: 0.3}
#newheader .erasehover {background-color: #eeeeee !important;}
#newheader .erasehover::after {display:none !important;}

/* STICKY */
.sticky {position: fixed !important; top: 0; width: 100%; box-shadow: 0 0 10px #CCC}
.sticky .logolocsearch .logo img {width: 200px !important;}
.sticky .logolocsearch .locsearch .loc span {display:none;}
.sticky .logolocsearch .locsearch .loc .pictoloc {margin-right: 0 !important;}
.sticky .logolocsearch .locsearch .search, .sticky .logolocsearch .locsearch .loc {padding: 15px 25px !important;}

@media (max-width:1200px) {
    #newheader {width: 100%; box-shadow: 0 0 10px #CCC}
    #newheader .topmenu {display: none;}
    #newheader nav {display:none;}
    #newheader nav .logo {display: block; text-align: center; padding: 15px;}
    #newheader nav .logo img {width: 200px; height: auto;}
    #newheader nav.mobile {display:flex; justify-content: flex-start; height: 100%; max-height: 100%; position: fixed; background-color: #58c8df; overflow: hidden; top:0; bottom: 0;}
    #newheader nav ul {flex-basis: auto; width: 100%; overflow-x: hidden !important;}
    
    #newheader nav ul .titremobilechoisir, #newheader nav ul .titremobilegamme, #newheader nav ul .menutaillepiscine, #newheader nav .lienmobile {display: block;}
    #newheader nav .liendesktop {display: none;}
    #newheader nav ul .titremobilechoisir, #newheader nav ul .titremobilegamme {width:100%; text-align: center; font-size: 20px; color:#fff; margin: 30px auto 10px;}
    #newheader nav ul .titremobilechoisir {order:1}
    #newheader nav .choisirrobot {order:2; margin-left: 0; width: 50%;}
    #newheader nav .choisirrobot a {width: 100%; background-color: transparent; padding: 0;}
    #newheader nav .choisirrobot a::before {width: 100px;height: 100px;position: relative;margin: auto;display: block;}
    #newheader nav ul .menutaillepiscine {order:3}
    #newheader nav ul .titremobilegamme {order:4}
    #newheader nav ul .menumobileresid, #newheader nav ul .menumobilecollec {order:5; margin-bottom: 20px;}
    #newheader nav>ul>li {transition: all 0.5s ease; order:6; padding: 20px !important; position: relative;}
    #newheader nav .menutaillepiscine>span::before {content: url(../images/ptaille.svg); width: 100px;height: 100px;position: relative;margin: auto;display: block;}
    #newheader nav .menumobileresid>span::before {content: url(../images/presid.svg); width: 100px;height: 100px;position: relative;margin: auto;display: block;}
    #newheader nav .menumobilecollec>span::before {content: url(../images/pcollec.svg); width: 100px;height: 100px;position: relative;margin: auto;display: block;}
    #newheader nav .menupourquoi>a::before {content: url(../images/pdolp.svg); width: 100px;height: 100px;position: relative;margin: auto;display: block;}
    #newheader nav .menuassistance>a::before {content: url(../images/psav.svg); width: 100px;height: 100px;position: relative;margin: auto;display: block;}
    #newheader nav .menufaq>a::before {content: url(../images/pfaq.svg); width: 100px;height: 100px;position: relative;margin: auto;display: block;}
    #newheader nav .menumag>a::before {content: url(../images/pmag.svg); width: 100px;height: 100px;position: relative;margin: auto;display: block;}
    #newheader nav .menuqui>a::before {content: url(../images/pqui.svg); width: 100px;height: 100px;position: relative;margin: auto;display: block;}
    #newheader nav .menucontact>a::before {content: url(../images/pcon.svg); width: 100px;height: 100px;position: relative;margin: auto;display: block;}
    #newheader nav .menumobileresid, #newheader nav .menumobilecollec {background-color: rgba(255,255,255,0.15) !important}
    #newheader nav .choisirrobot::after, #newheader nav .menumobileresid::after {content: ''; position:absolute; top:10%; right: 0; display: block; width: 1px; height: 80%; background-color: #fff; }
    #newheader nav .menutaillepiscine::after, #newheader nav .menumobilecollec::after {content: ''; position:absolute; top:10%; left: 0; display: block; width: 1px; height: 80%; background-color: #fff; }
    #newheader nav li:nth-of-type(1n+4) {border: 1px solid #fff}
    #newheader nav li:last-of-type {border: none}
    #newheader nav li:nth-of-type(2n+2) {border-left: none}
    #newheader nav li:nth-of-type(2n+1) {border-right: none}
    #newheader nav li:nth-of-type(4), #newheader nav li:nth-of-type(5) {border-top: none}
    #newheader nav li:nth-of-type(8), #newheader nav li:nth-of-type(9) {border-bottom: none}
    
    #newheader nav>ul>li:hover, #newheader nav>ul>li:hover>span, #newheader nav>ul>li:hover>a {color:#fff !important; background-color: transparent !important; cursor: pointer;}
    #newheader nav>ul>li>a, #newheader nav>ul>li>span {padding: 0 !important;}
    #newheader nav ul li>a:hover, #newheader nav ul li:hover>a {background-color: transparent;}
    #newheader nav ul li>a, #newheader nav span>a {display: inline-block;}
    #newheader .logolocsearch .locsearch .search, #newheader .sticky .logolocsearch .locsearch .search, #newheader .sticky .logolocsearch .locsearch .loc, #newheader .logolocsearch .locsearch .loc {background-color: #ffffff; padding: 15px 10px !important;}
    #newheader .logolocsearch .locsearch {width: 120px; justify-content: center;}
    #newheader .logolocsearch .locsearch .loc:hover, #newheader .logolocsearch .locsearch .search:hover {background-color: #ffffff;}
    #newheader .logolocsearch .locsearch .loc span {display: none;}
    #newheader .logolocsearch .locsearch .loc .pictoloc {margin: 0;}
    #newheader .logolocsearch .locsearch .loc .pictoloc::after {content: url("../images/loco.svg")}
    #newheader .logolocsearch .locsearch .search .pictosearch {margin: 0;}
    #newheader .logolocsearch .locsearch .search:hover .pictosearch::after  {content: url("../images/search.svg")}
    #newheader .logolocsearch .menumobile {display: flex; width: 120px; flex-direction: row; justify-content: center; align-items: center; padding: 10px;}
    #newheader .logolocsearch .menumobile span {display: block !important;  width: 22px; height: 22px;}
    #newheader .logolocsearch .menumobile span::after {content: url("../images/burger.svg")}
    #newheader .logolocsearch .menumobile span:hover::after {content: url("../images/burgerb.svg")}
    #newheader .logolocsearch .logo img, #newheader .sticky .logolocsearch .logo img {height: auto; width: 100%; margin: 0; padding: 10px; min-width: 200px;}
    #newheader nav {flex-direction: column; flex-basis: auto;}
    #newheader nav ul {flex-direction: row; flex-wrap: wrap;}
    #newheader nav ul li, #newheader nav span a {text-align: center; width: 50%;}
    #newheader nav ul li .piscineresid, #newheader nav ul li .piscinecollec, #newheader nav ul li .taillepiscine {z-index: 1; top:0; left:0; overflow-y: auto; min-height: 100%; height: 100%; position: fixed; opacity: 1 !important; display: block;}
    #newheader nav ul li:hover .piscineresid, #newheader nav ul li:hover .piscinecollec, #newheader nav ul li:hover .taillepiscine {top:0;}
    #newheader nav ul li .piscineresid.desactive, #newheader nav ul li .piscinecollec.desactive, #newheader nav ul li .taillepiscine.desactive {left:100vw; opacity: 1 !important;}
    .sticky {position: fixed !important;  width: 100%;}
    .noscroll {overflow: hidden}
    #newheader nav ul li .piscineresid .gammesresid .titremobile, #newheader nav ul li .piscinecollec .titremobile, #newheader nav ul li .taillepiscine .titremobile  {display: block !important; font-size: 22px !important; width: 100%; text-align: center;}
    #newheader nav ul li .piscineresid .gammesresid .gammes, #newheader nav ul li .piscineresid .detailgamme .fleche {display: none;}
    #newheader nav ul li .piscineresid .gammesresid p:nth-of-type(2) {margin-bottom: 20px;}
    #newheader nav ul li .piscineresid .detailgamme {background-color: transparent;}
    #newheader nav ul li .piscineresid .detailgamme>div {opacity: 1 !important; background-color: #f7f7f7; padding: 20px; position: relative;}
    #newheader nav ul li .piscineresid .detailgamme>div:nth-of-type(2n+1) {background-color: #efefef;}
    #newheader nav ul li .piscineresid .detailgamme .robots, #newheader nav ul li .piscinecollec .content, #newheader nav ul li .piscinecollec .content .robots {flex-wrap: wrap;}
    #newheader nav ul li .piscineresid .detailgamme .robots .intro, #newheader nav ul li .piscinecollec .content .intro {width: 100%; border-right: none; text-align: center; padding-right: 0;}
    #newheader nav ul li .intro a {margin-bottom: 20px;}
    #newheader nav ul li .piscineresid .detailgamme .robots div, #newheader nav ul li .piscinecollec .content .robots div {width: 30%; margin: 0;}
    #newheader nav ul li .piscineresid .detailgamme .robots img, #newheader nav ul li .piscinecollec .produit img {width: 70%; clear: both;}
    #newheader nav ul li .piscineresid .detailgamme>div .content, #newheader nav ul li .piscinecollec .content .intro {padding: 0;}
    #newheader nav ul li .piscineresid .gammesresid .detailgamme .close {display: none !important;}
    #newheader nav ul li.menumobileresid, #newheader nav ul li.menumobilecollec {position: relative;}
    #newheader nav ul li .taillepiscine a {display: block;font-size: 17px;margin-top: 20px;}
    #newheader nav ul li .taillepiscine a:first-of-type {margin-top:50px;}
    #newheader .mobile .close {display: block !important;  width: 22px; height: 22px; margin-left: 10px; position: fixed; top:15px; right:15px; cursor: pointer; z-index: 1000000; padding: 0 !important;}
    #newheader .mobile .close::after {content: url("../images/closeb.svg")}
    #newheader .mobile .retour {display: none; width: 22px; height: 22px; margin-left: 10px; position: fixed; top:22px; left:15px; cursor: pointer; z-index: 1000000; padding: 0 !important;}
    #newheader .mobile .retour::after {content: url("../images/retour.svg")}
    .selectlangue {position: relative;display: inline-block;margin: 50px 15px;width: calc(100% - 30px); order:7;}
    .selectlangue select {
        display: inline-block;
        width: 100%;
        cursor: pointer;
        padding: 10px 15px 10px 50px;
        outline: 0;
        border: 0px hidden #000000;
        border-radius: 0px;
        background: #5fd6ee;
        color: #ffffff;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
        .selectlangue select::-ms-expand {
            display: none;
        }
        .selectlangue select:hover,
        .selectlangue select:focus {
            color: #ffffff;
            background: #4fb7cc;
        }
        .selectlangue select:disabled {
            opacity: 0.5;
            pointer-events: none;
        }
.selectlangue_arrow {
    position: absolute;
    top: 16px;
    right: 15px;
    pointer-events: none;
    border-style: solid;
    border-width: 8px 5px 0px 5px;
    border-color: #ffffff transparent transparent transparent;
}
.selectlangue select:hover ~ .selectlangue_arrow,
.selectlangue select:focus ~ .selectlangue_arrow {
    border-top-color: #ffffff;
}
.selectlangue select:disabled ~ .selectlangue_arrow {
    border-top-color: #ffffff;
}
.selectlangue::before {width: 18px; height: 18px; content: url("../images/language.svg"); display: block; position: absolute; top: 12px; left: 20px;}
}