*{ -moz-box-sizing: border-box; box-sizing: border-box; }

html,body{
	padding:0; margin: 0; overflow-x: hidden;
}
site{
    display: flex; flex-direction: column;  align-items: center; width: 100vw; max-width: 100vw; min-height: 100vh; padding:0; margin: 0;
	background: #000; color: #fff; font-size: 1vw; font-family: 'Lato', sans-serif; font-weight: 300; --orientation: vertical;
}

pic,icon{ display: inline-block; background: center center no-repeat; background-size: 100% 100%; }

header{ 
    display: flex; flex: none; justify-content: space-between; align-items: center; /*border-bottom: 1px solid #000;*/ 
    position: fixed; top:0; left:0; width: 100vw; height: 6em; z-index: 20; color: #fff; background: rgba(0, 0, 0, 0.1);
    font-size: 1em; padding: 0 2em;
}
header .logo{ height: 2.5em; }
header a{ text-decoration: none; color: #fff; letter-spacing: 2px; font-weight: 500; padding: 0 1em; }

header.floated{ background: #000; border-bottom: 4px solid #00A299; font-size: 0.75em; }

menu.mobilep{ display: none; }

.social{ display: inline-flex; flex: 0;  align-items: center; }
.social in{ display: flex; flex:none; justify-content: space-between; }
.social a{ background: center center no-repeat; background-size: 100% 100%; font-size: 1.75em; padding: 0 0.5em; margin: 0 0.2em; }
.social .tel{ margin: 0 0.5em; text-align: center; white-space: nowrap; }

footer{ 
    display: flex; flex: none; justify-content: space-around; width:100%; padding: 2em;
    background: #000; border-top: 4px solid #00A299; font-size: 0.75em; 
}
footer .logo{ height: 2em; }

cell{ display: inline-block; }

.cta{ 
    display: inline-flex; flex: none; align-items: center; text-decoration: none; 
    color: #000; border: 1px solid #000; background: #fff; 
    padding: 0.5em 1em; border-radius: 0.25em;  
}
.cta.green{ border: 1px solid #00A299; background: #00A299; color: #fff; }
.cta.big{ font-size: 1.75em; }
ctazone{ display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; align-items: center; padding: 3em 0; }
ctazone.center{ justify-content: center; }
ctazone.center a{ margin: 0 0.25em; }
ctazone.around{ justify-content: space-around; }
ctazone.between{ justify-content: space-between; }

.sep{ height: 1px; border-top: 1px solid #fff; }



#splash{
    display: flex; flex: none; justify-content: center; align-items: center; width: 100vw; height: 100vh;font-size: 1.25em;
    background: url(images/splash_back.jpg) no-repeat center center; background-attachment: fixed; background-size: cover;
}
#splash span{ text-align: center;  color: #fff; }

#presentation{
    display: flex; flex: none; justify-content: center; align-items: center; padding: 2em 0;
}
#presentation span{ display: flex; flex: none; width: 100%; }
#presentation pic{ width: 17em; height: 15em; margin: 2em; }
#presentation txt{ display: block; }
#presentation txt h1{ margin: 0.5em 0; font-weight: 300; font-size: 2em; }
#presentation txt h1 small{ font-size: 0.6em; }
#presentation txt .sep{ width: 7em; }
#presentation txt gridzone{
    display: grid; grid-gap: 2em;
    grid-template-columns: 50% 50%;
    grid-auto-rows: 10em 10em;
    font-size: 0.8em; padding: 2em; line-height: 2em;
}
#presentation txt gridzone h2{ color: #00A299; font-size: 1em; }

#learnmore{
    display: flex; flex: none; align-items: stretch; width: 100%;
    background: #fff; color: #000;
}
#learnmore pic{ display: flex; flex: none; justify-content: center; align-items: center; width: 33em; height: 18em; }
#learnmore pic h1{ color: #fff; font-size: 0.75em; }
#learnmore txt{
    display: flex; flex: 1; flex-direction: column; justify-content: space-between; align-items: stretch;
}
#learnmore txt span{
    display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 4em; font-size: 0.88em;
}
#learnmore txt span h1{ margin: 0; }
#learnmore ctazone{ padding:0; }
#learnmore ctazone a{
    text-decoration: none; text-align: center; padding: 1.5em; width: 100%; background: #00A299; color: #fff;
}

#product{ padding: 4em 0; }
#product h1{ display: flex; flex: none; align-items: center; font-weight: 300; }
#product h1 .sep{ margin-left: 0.5em; flex: 1; }
#product in{ display: flex; flex: none; flex-wrap: wrap; align-items: stretch; }
#product article{  display: flex; flex: none; flex-direction: column; align-items: center; font-size: 1.2em; }
#product article .piczone{ display: flex; flex: none; justify-content: space-between; align-items: stretch; }
#product article .piczone img{ height: 12em; }
#product article txt{ font-size: 0.75em; text-align: center; }
#product article h2{ color: #00A299; font-weight: 300; margin: 0;  }
#product article ctazone{ padding: 1em 0; }

#photos{ width: 100%; }
#photos h1{ background: #00A299; color: #fff; font-weight: 300; text-align: center; margin: 0; font-size: 1.1em; padding: 1em; width: 100%; }
#photos in{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-auto-rows: 20em 20em 20em 20em;
}
#photos in a{ background: no-repeat center center; background-size: cover; }
#photos in a:first-child{ grid-column: 1 / span 2; }
#photos in a:last-child{ grid-column: 3 / span 2; }



#techspecs{ display: flex; flex: none; flex-wrap: wrap; justify-content: space-between; padding: 3em 0; font-size: 0.82em; font-family: Tahoma, Geneva, sans-serif; }
#techspecs article{ width: 33%; margin: 1em 0.1em; }
#techspecs article h2{ color: #00A299; font-size: 1.2em; }
#techspecs article li{ margin-bottom: 0.5em; }


#showPic{ display: none; position: fixed; top:0; left: 0; z-index: 80; }
#showPic in{ display: flex; flex: none; flex-direction: column; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: rgba(0,0,0,0.66); }
#showPic close{ display: block; text-align: right; margin-top: -2em; }
#showPic close a{ 
    display: inline-flex; flex: none; justify-content: center; align-items: center; width: 1.5em; height: 1.5em; 
    text-decoration: none; color: #fff;
}
#showPic span { max-width: 96vw; max-height: 85vh;  }
#showPic img { max-width: 100%; max-height: 100%;  }
#showPic iframe{ width: 75vw; height: 42.18vw; max-height: 85vh;  }
#showPic cont{ display: block; text-align: center; }

#regPop{ display: none; position: fixed; top:0; left: 0; z-index: 200; }
#regPop close{ display: block; text-align: right; height: 1px; }
#regPop close a{ 
    display: inline-flex; flex: none; justify-content: center; align-items: center; width: 2em; height: 2em;
    text-decoration: none; color: #c33; background: #fff; border-radius: 100%; transform: translate( 3em, -1em);
}
#regPop close a i{ font-size: 2.5em; } 
#regPop in{ display: flex; flex: none; justify-content: center; align-items: center; width: 100vw; height: 100vh; }
#regPop in cell{ display: block; background:#000; border: 4px solid #00A299;  padding: 0 2vw 2vh; text-align: center; }
#regPop in iframe{ width: 28vw; height: 48vh; border: none;  }


pic.casque{ background-image: url(images/presentation_casque.png); }
pic.bestchoice{ background-image: url(images/splash_back.jpg); }

/*------------ ICONS ----------- */
header .social a.facebook{ background-image: url('../loadsvg.php?elem=change&fill=00A299&path=templates/images/social/facebook.svg'); }
header .social a.twitter{ background-image: url('../loadsvg.php?elem=change&fill=00A299&path=templates/images/social/twitter.svg'); }
header .social a.instagram{ background-image: url('../loadsvg.php?elem=change&fill=00A299&path=templates/images/social/instagram.svg'); }
header .social a.linkedin{ background-image: url('../loadsvg.php?elem=change&fill=00A299&path=templates/images/social/linkedin.svg'); }
header .social a.youtube{ background-image: url('../loadsvg.php?elem=change&fill=00A299&path=templates/images/social/youtube.svg'); }

footer .social a.facebook{ background-image: url('../loadsvg.php?elem=change&fill=FFFFFF&path=templates/images/social/facebook.svg'); }
footer .social a.twitter{ background-image: url('../loadsvg.php?elem=change&fill=FFFFFF&path=templates/images/social/twitter.svg'); }
footer .social a.instagram{ background-image: url('../loadsvg.php?elem=change&fill=FFFFFF&path=templates/images/social/instagram.svg'); }
footer .social a.linkedin{ background-image: url('../loadsvg.php?elem=change&fill=FFFFFF&path=templates/images/social/linkedin.svg'); }
footer .social a.youtube{ background-image: url('../loadsvg.php?elem=change&fill=FFFFFF&path=templates/images/social/youtube.svg'); }