/*
	Theme Name:Bières Favela
	Description:Bières Favela - Avril 2018
	Version:1.0 | CORE:2.00
	Design:SBHOMESTUDIO — Sébastien BOUVIER
	Author:BIENVENUE SUR MARS — Pascal DUBOIN

*/



	/* ###	FONTES	*/


	@font-face {font-family:'Black';src:url('./fontes/Black');
	src:url('./fontes/Black?#iefix')format('embedded-opentype'),
	url('./fontes/Black.woff2')format('woff2'),url('./fontes/Black.ttf')format('truetype');
	font-style:normal;font-weight:normal;text-rendering:optimizeLegibility}

	@font-face {font-family:'Bold';src:url('./fontes/Bold.eot');
	src:url('./fontes/Bold.eot?#iefix')format('embedded-opentype'),
	url('./fontes/Bold.woff2')format('woff2'),url('./fontes/Bold.ttf')format('truetype');
	font-style:normal;font-weight:bold;text-rendering:optimizeLegibility}

	@font-face {font-family:'Light';src:url('./fontes/Light.eot');
	src:url('./fontes/Light.eot?#iefix')format('embedded-opentype'),
	url('./fontes/Light.woff2')format('woff2'),url('./fontes/Light.ttf')format('truetype');
	font-style:normal;font-weight:normal;text-rendering:optimizeLegibility}

	@font-face {font-family:'Thin';src:url('./fontes/Thin.eot');
	src:url('./fontes/Thin.eot?#iefix')format('embedded-opentype'),
	url('./fontes/Thin.woff2')format('woff2'),url('./fontes/Thin.ttf')format('truetype');
	font-style:normal;font-weight:normal;text-rendering:optimizeLegibility}

	.bold {font-family:'Bold'}
	.light {font-family:'Light'}
	.thin {font-family:'Thin'}


	/* ###	GÉNÉRAL	*/

	html{margin:0;padding:0;background:#fff !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}
	body{font:21px/30px Light,Helvetica,Arial,sans-serif;color:#000;width:100%;height:100%;margin:0;word-wrap:break-word;background:#fff}
	*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}


	/* ###	Theme	*/

	ul{list-style:none;padding:0;margin:0;float:left;font-size:17px;line-height:19px}
	li{margin-bottom:7px;margin-left:5px;padding-left:10px}
	li:before{content:"•";text-align:left;display:inline-block;margin-left:-15px;width:15px}
	p{line-height:25px}

	.fd-gris{background-color:#1c1815 !important}
	a{text-decoration:none;transition:all ease 0.5s;color:#000}
	a:hover{text-decoration:underline;color:#000}
	.underline:hover{text-decoration:underline}


	/* Couleurs fontes et fonds */

	.description{padding-top:40px;padding-bottom:40px}
	.titre{display:block;font-family:'Thin';font-size:96px;line-height:96px;margin-bottom:30px;text-transform:uppercase}
	.intro{display:block;font-family:'Light';font-size:46px;line-height:48px;padding-top:25px;padding-bottom:25px}
	.chapitre{display:block;font-family:'Thin';font-size:40px;line-height:40px;text-transform:uppercase}
	.menus{display:block;font-family:'Bold';font-size:30px;line-height:30px;letter-spacing:-1px}
	.texte{display:block;font-family:'Light';font-size:28px;line-height:30px}
	.abus{font-family:'Bold';font-size:16px;line-height:16px !important}
	.adresse{font-family:'Light';font-size:26px;line-height:30px}
	.fermer{font-family:'Light';font-size:36px;line-height:36px;margin-top:30px}


	@media only screen and(max-width:60.063em){
	.description{padding-top:20px;padding-bottom:40px}
	.titre{font-size:72px;line-height:60px;text-align:left}
	.intro{font-size:40px;line-height:41px;padding-top:20px;padding-bottom:20px}
	.chapitre{font-size:36px;line-height:34px}
	.texte{font-size:23px;line-height:25px}
	.abus{font-size:14px;line-height:14px}
	.adresse{font-size:24px;line-height:21px}}
	.fermer{font-family:'veneer';font-size:30px;line-height:30px}

	@media only screen and(max-width:39.9375em){
	.description{padding-top:20px;padding-bottom:40px}
	.titre{font-size:50px;line-height:60px;margin-bottom:20px}
	.intro{font-size:40px;line-height:41px}
	.chapitre{font-size:30px;line-height:32px}
	.texte{font-size:23px;line-height:25px}
	.adresse{font-size:24px;line-height:21px}}
	.fermer{font-family:'veneer';font-size:24px;line-height:21px;margin-top:20px}


	/* Menus et formulaire */

	.logo{display:inline-block;-webkit-mask:url('https://www.bieres-favela.com/img/logo-bieres-favela.svg')
	no-repeat 50% 50%;mask:url('https://www.bieres-favela.com/img/logo-bieres-favela.svg')no-repeat 50% 50%;-webkit-mask-size:contain;mask-size:contain}
	.logo-menu{height:65px;width:185px;background-color:#000}
	.logo-form{height:48px;width:138px;background-color:#000}

	.menu-bar{z-index:99;background-color:#fff;padding:1rem;
	display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;
	-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;
	-ms-flex-align:center;align-items:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
	.menu-bar-left,.menu-bar-right{-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;max-width:100%}

	.formulaire{max-width:700px;background-color:#fff;padding:40px;margin-top:40px}
	.formulaire input{background-color:Transparent;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:none;color:#000}
	.formulaire input:hover{text-decoration:underline}
	
	.formulaire .chapitre{padding:30px 0}

	@media screen and(max-width:60.063em){
	.logo-menu{height:57px;width:126px}
	.logo-form{height:48px;width:138px}
	.menu-bar{padding-top:1.0rem;padding-bottom:1.0rem}
	.formulaire{max-width:500px}
	.formulaire{padding:30px;margin-top:30px}
	.abus{font-size:18px;line-height:18px;padding-top:40px}}

	@media screen and(max-width:39.9375em){
	.logo-menu{height:48px;width:138px}
	.logo-form{height:38px;width:110px}
	.menu-bar{padding-top:0.5rem;padding-bottom:0.5rem}
	.formulaire{padding:20px;margin-top:60px}
	.formulaire .chapitre{padding:15px 0;color:#000}
	.abus{font-size:18px;line-height:18px;padding-top:30px}}



	/* ###	Contenu	*/

	.loading{background:url('./img/ico_loading.gif')no-repeat center center}
	.loaded section,{opacity:1;-webkit-transition:opacity 300ms ease-out;-moz-transition:opacity 300ms ease-out;transition:opacity 300ms ease-out}
	#preload{width:1px;height:1px;overflow:hidden;position:absolute;top:0;left:0}

	main{overflow-x:hidden}
	section .large{height:101vh !important;background-position:50% 50%}

	.bcg{background-position:center center;background-repeat:no-repeat;background-size:cover;height:101vh;width:101vw}
	.hsContainer{width:100%;height:100vh;overflow:hidden}
	.hsContent{position:relative;left:5%;top:10%;right:5%;padding:30px}
	.hs{left:5%;top:10%;right:5%;padding:60px}
	.infoplus{display:none}
	.absolue{position:absolue;top:0;left:0}

	@media screen and(max-width:39.9375em){.hs{padding:30px}}


	video{max-width:100%;}
	.videoWrapper{position:relative;padding-bottom:56.25%;height:0;width:100%;margin:0;overflow:hidden}
	.videoWrapper video {position:absolute;top:0;left:0;width:100%;height:auto}


	#video-fond{overflow:hidden;position:fixed;top:0;right:0;bottom:0;left:0}
	#video-fond>video{width:100%;height:100%;position:absolute;top:0;left:0}
	@media(min-aspect-ratio:16/9){#video-fond>video{height:300%;top:-100%}}
	@media(max-aspect-ratio:16/9){#video-fond>video{width:300%;left:-100%}}
	@supports(object-fit:cover){#video-fond>video{width:100%;height:100%;top:0;left:0;object-fit:cover}}

	.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
	.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
	@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
	@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
	.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}



	/* Déguster Bieres Favela */

	.deguster{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;
	-ms-flex-direction:column;flex-direction:column;margin-bottom:1rem;border-radius:0;box-shadow:none;overflow:hidden;color:#000}

	.ou-deguster-hover-title{display:block;font-size:1.8rem;line-height:1.8rem;margin-top:10px;margin-bottom:10px}
	.ou-deguster-hover-adresse{display:block;font-size:1.4rem;;line-height:1.6rem;margin-bottom:5px}
	.ou-deguster-hover-tel{display:block;font-size:1.2rem;line-height:1.4rem;margin-bottom:5px}

	.ou-deguster-hover{position:relative;line-height:1.2rem;transition:all 0.35s ease}
	.ou-deguster-hover-details{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;padding:0.5rem}
	.ou-deguster-hover-details>:last-child{margin-bottom:0}
	.ou-deguster-hover-icons{position:absolute;top:0;bottom:0;left:0;right:0;padding:0.5rem;
	display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;
	flex-direction:column;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}
	.ou-deguster-hover-icons a i{display:block;font-size:1.5rem;line-height:2.5rem;width:2.5rem;background-color:#fff;text-align:center;color:#000}
	.ou-deguster-hover-icons a i:hover{background-color:#8a8a8a;color:#fefefe;cursor:pointer}
	.ou-deguster-hover-icons a{margin:2px;opacity:0;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);transition:all 0.35s ease}
	.ou-deguster-hover:hover a,.ou-deguster-hover.hover a{transition:all 0.35s ease;opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
	.ou-deguster-hover:hover a:nth-child(2),.ou-deguster-hover.hover a:nth-child(2){transition-delay:0.1s}
	.ou-deguster-hover:hover a:nth-child(3),.ou-deguster-hover.hover a:nth-child(3){transition-delay:0.2s}
	.ou-deguster-hover:hover a:nth-child(4),.ou-deguster-hover.hover a:nth-child(4){transition-delay:0.3s}

	@media only screen and(max-width:40.063em){
	.ou-deguster-hover-title{font-size:1.8rem}
	.ou-deguster-hover-adresse{font-size:1.4rem}
	.ou-deguster-hover-tel{font-size:1.2rem}}


	/* Contact et Crédit */

	.screen-reader-response{display:none !important}
	.wpcf7-not-valid-tip{display:none !important}
	.wpcf7 {font-size:16px}
	input[aria-invalid="true"],select[aria-invalid="true"]{border-color:red;background-color:rgba(153,0,0,0.3)}

	.credit .chapitre{display:block;font-family:'Light';font-size:40px;line-height:40px}
	.credit .texte{display:block;font-family:'Thin';font-size:28px;line-height:30px}
	.credit{display:block;margin-bottom:20px}
	.credit em{font-style:normal;font-size:20px;line-height:20px}
	.prevention{display:block;font-family:'Light';font-size:10px;line-height:10px;padding:30px 0}


	@media only screen and(max-width:60.063em){
	.credit .chapitre{font-size:36px;line-height:34px}
	.credit texte{font-size:23px;line-height:25px}}

	@media only screen and(max-width:39.9375em){
	.credit .chapitre{font-size:30px;line-height:32px}
	.credit .texte{font-size:23px;line-height:25px}}



	/* ###	Menu	*/

	.overlay{z-index:100;height:101vh;width:0;position:fixed;display:-webkit-flex;display:-ms-flexbox;display:flex;
 	-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;
 	-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;
 	background-size:cover;background-color:#fff);background-color:#fff;overflow-x:hidden;transition:0.5s}

	.overlay-content{position:relative;top:15%;width:80%;max-width:1250px;margin-top:30px;margin-left:35px}
	.titreMenu{display:block;font-family:'Thin';font-size:72px;line-height:72px;margin-bottom:60px}

	.closebtn{position:absolute;top:25px;right:45px;font-size:48px;margin-bottom:30px}

	.overlay a{font-family:'Bold';font-size:32px!important;line-height:32px;
	display:block;white-space:nowrap;font-weight:300;margin:0 0 30px 0;color:#000;-webkit-transition:color 0.3s;transition:color 0.3s;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}

	.animate .overlay-content{-webkit-transform:translateZ(-1500px)translateX(100%)rotateY(-45deg);transform:translateZ(-1500px)translateX(100%)rotateY(-45deg)}
	.animate .overlay-content::after{opacity:1;height:101%;-webkit-transition:opacity 0.3s;transition:opacity 0.3s}


	@media only screen and(max-width:60.063em){
	.overlay a{font-size:36px!important;line-height:36px;margin-bottom:25px}
	.titreMenu{font-size:52px;line-height:52px;margin-bottom:50px}}

	@media only screen and(max-width:39.9375em){
	.overlay-content{top:28 px}
	.overlay a{font-size:24px!important;line-height:22px;margin-bottom:12px}
	.titreMenu{font-size:36px;line-height:36px;margin-bottom:20px}}