body{background-color: #000; margin: 0; padding: 0; color: #fff;font-family: 'helvetica', sans-serif;}
#logo{background-image: url(img/logoh.svg); width: 28%; height: 36%;position: absolute;background-repeat: no-repeat;background-position: center;left: 52%;transform: translateX(-50%) translateY(-42%);top: 50%;z-index: 3}
#produit{background-color: #fff;color: #000;;}
.content{min-height: 100vh; width: 100%; position: relative; overflow-y: hidden;}
#textePres{ width: 50vw; padding: 5vw; text-align: justify; z-index: 2; position: relative; }
.imgBack{ background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; height: 100%; width: 100%; position: absolute; top: 0; z-index: 1; opacity: 0.7; }
#introLogo{background-color: #000}
#backLogo,#backLogo2{background-image: url(img/strass.svg); background-size: 25%; opacity: 0.8; background-position: 55% 35%}
#backLogo2{background-image: url(img/map.svg); background-size: 25%; opacity: 0.8; background-position: 55% 35%;z-index: 1}
#backLogo2{background-position: center !important;background-attachment: scroll;;}
#backProduit{background-image: url();opacity: 0.3;;}
#backbulles{background-image: url(img/bulles.svg); background-attachment: scroll;background-size: 60%;background-position: top;background-repeat: repeat-x;opacity: 0.5;font-weight: lighter;}
#contact a,#contact div{color: #fff; text-decoration: none; display: block;position: absolute; left: 50%; top: 50%; font-size: 2em; transform: translateX(-50%) translateY(-50%); transition: all 0.3s;z-index: 12;}
#contact{overflow: hidden;height: 100vh}
#contact a{position: fixed; z-index: 2; top: 75%}
#produit,#introLogo{z-index:3 }
#contact a i,#contact div i{margin-right: 10px}
footer{text-align: center; padding: 1em; font-size: 0.7em; color: #969696; position: fixed; bottom: 0px; width: 100vw}
#contact div.revendeur{transform: translateY(100%) translateX(-50%); font-size: 1.3em; cursor: pointer;z-index: 12;}
#contact a:hover,#contact div:hover{color: #555;}
iframe{height: 100%; width: 100%;}
#carteRevendeurs{height: 80%; width: 98%; position: absolute;margin-top: 100%; left: 50%; transform: translateX(-50%);z-index: 9;}
#carteRevendeurs.open{margin-top: 0;}
#closeCarte{ color: #888; cursor: pointer;transition: all 0.3s; float: right; padding: 0.3em 0; }
#closeCarte:hover{ color: #fff;}
#backContact{background-image: url();z-index: 1;display: block;position: absolute; background-color: #555;}
#visuelBouteuille{background-image: url(img/soFraiseMontageSite.jpg);position: absolute;height: 100%;top: 0vh;z-index: 10;background-repeat: no-repeat;background-position: center right;right: 0px; width: 50vw; background-size: auto 110%; background-attachment: fixed;}
.baseLine{position: absolute;bottom: 11px;width: 100%;text-align: center;font-size: 1.5em;font-family: 'GFS Didot', serif;}
#fraises{position: fixed; background-image: url(img/fraises.png); height: 20vh;width: 20vw; background-size: 100%; background-repeat: no-repeat; background-position: bottom; bottom: -10px; left: -50px; z-index:3;}
#backbulles{background-size: 81%; background-position: left top}
#textePres{font-size: 1vw}
nav{position: absolute; top: 85%; z-index: 4; width: 100%;text-align: center;}
#introLogo{z-index: 1;}

#social{position: fixed; bottom: 20px; right: 20px; display: block; z-index: 2;display: flex; transition: all 0.3s;}
.scroll #social{ transition: all 0.3s;right: 50%; transform: translateX(50%); bottom: 50px;}
#social li {padding: 0 5px;}
#social li a{color: #fff; text-decoration: none; font-size: 0.7em; text-align: center; }
#social li a span{display: block;line-height: 1em;}
#social li a img{width: 40px; fill: #000; opacity: 0.7; transition: all 0.3s; display: block;}
#social li a:hover img{width: 40px; fill: #000; opacity: 1;transition: all 0.3s; transform: scale(1.05);}

nav li{display: inline-block; padding: 5px; text-align: center; cursor: pointer; font-weight: lighter;}
ul,li{margin: 0; padding: 0; list-style: none;}
#select-lang{position: fixed; top: 20px; right:20px; display: block; height: 50px;z-index: 5; font-size: 1vw; width: 20px;}
#select-lang li{display: block; width: 100%; text-align: center;cursor: pointer;opacity: 0.5; transition: all 0.3s;}
#fr.fr{float: left; opacity: 1;}
#en.en{float: left; opacity: 1;}
#fr.en{float: right; display: none;}
#en.fr{float: right; display: none;}
#select-lang:hover li{display: block !important;}
#select-lang li:hover{opacity: 1; transition: all 0.3s;}


body.fr .en{display: none!important;}
body.en .fr{display: none!important;}


@media (max-width:1199px){
}
@media (max-width:991px){
	#visuelBouteuille{background-size: cover; background-attachment: initial;}
}
@media (max-width:790px){
	#social{ transition: all 0.3s;right: 50%; transform: translateX(50%); bottom: 10px;}
}
@media (max-width:575px){
	body{font-size: 5vw;}
	#logo{width: 70%; top: 50%; transform: translateY(-60%) translateX(-50%);}
	#textePres{font-size: 3vw}
	#fraises{display: none;}
	#backLogo, #backLogo2{background-size: 70%;z-index: 1;background-attachment: scroll; background-position: 75% 20%}
	.baseLine{display: none;}
	#textePres{width: 85vw;}
	#visuelBouteuille{ background-size: 82%; width: 100%; position: relative;height: 650px; background-position: center top; }
	#contact #carteRevendeurs{top: 100%; transform: none; left: 0;}
	#contact #carteRevendeurs.open{top: 70px; }
	#contact a, #contact div{width: 99%; left:0%; transform:translateX(0); text-align: center; font-size: inherit;}
	#contact #ouvrirCarte{width: 100%; left:0%; transform:translateX(0) translateY(180%);text-align: center;}
	#select-lang{font-size: 3vw; line-height: 2em}
	footer{font-size: 0.5em; padding: 10px; width: auto}
}