/*
Theme Name: Macera
Theme URI:
Description: Macera template
Version: 1.0
Author: LLOS&
Author URI: http://llos.co
Text Domain: llos
Domain Path: /lang
*/


/*	Typography
---------- */

@font-face {
	font-family: 'Franklin Gothic';
	src: url('fonts/FranklinGothic/FranklinGothic-DemiCond.eot'); /* IE9 Compat Modes */
	src: url('fonts/FranklinGothic/FranklinGothic-DemiCond.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('fonts/FranklinGothic/FranklinGothic-DemiCond.woff') format('woff'), /* Modern Browsers */
	url('fonts/FranklinGothic/FranklinGothic-DemiCond.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('fonts/FranklinGothic/FranklinGothic-DemiCond.svg') format('svg'); /* Legacy iOS */

	font-style:  normal;
	font-weight: normal;

	text-rendering: optimizeLegibility;
}

/*	Misc
---- */

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


body{ margin: 0; padding: 0; width: 100%; height: 100%; background: #fbfbfb; color: #ffff; font-family: "Franklin Gothic", Arial, sans-serif; overflow-y: hidden;}

a{ color: #000; transition: all .05s ease-in-out; -webkit-transition: all .05s ease-in-out; -moz-transition: all .05s ease-in-out; -o-transition: all .05s ease-in-out; text-decoration: none;}
a:hover, a:focus{ color: #000; text-decoration: underline; outline:none; }
input[type="text"], input[type="email"], input[type="number"], textarea { -webkit-appearance: none; border-radius: 0; }

input, textarea { border-radius: 0; -webkit-border-radius: 0; }
textarea { resize: none; }
input:focus{ outline: none}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

::-webkit-input-placeholder {color: #909;}
:-moz-placeholder { color: #909; opacity: 1;}
::-moz-placeholder { color: #909; opacity: 1;}
:-ms-input-placeholder { color: #909;}

::-moz-selection { color: black;   background: transparent;  }
::selection      { color: black;  background: transparent; }

:focus {outline:none;}
::-moz-focus-inner {border:0;}

h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; font-weight: normal;}

p{ margin-bottom: 0; margin-top: 0; }

ul{list-style-type: none; margin:0; padding:0; }
li{list-style-type: none; margin:0; padding:0; }

.img-responsive{ width: 100%;}

.cover{ background-position: center center; background-size: cover; background-repeat: no-repeat;}

.fluid-embed{ position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: 0; z-index: 2;}
.fluid-embed video, .fluid-embed iframe, .fluid-embed object, .fluid-embed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.transition{ transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; }
/* .v-middle{ position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%);} */


section{ height:100vh; scroll-snap-stop: always; -ms-scroll-snap-stop: always;  scroll-snap-align:center;}

.container {overflow: scroll; height:100vh; scroll-snap-type: y proximity; -ms-scroll-snap-type:y mandatory; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }



.child{ scroll-snap-align: start; position: relative; overflow:visible;}

/*	Header
------ */
header{display:flex; z-index: 99; position:fixed; top:0; width:100vw;  flex-wrap:wrap;margin-top:30px;}
.logo{ flex-grow: 1; margin-left:50px;}
#logo{width:200px; height:auto; margin-top:5px;}
.menu{ display:flex; margin-right:40px; font-size: 28px; letter-spacing: -0.02em;}
.menu ul{margin:0;}
.menu li{margin-left:15px;}
.menu li a{color:#ffff; }
.burger-mobile{display:none;}


.lang{ display:flex; margin-right:25px; font-size: 28px; letter-spacing: -0.02em;flex-basis: 100%;justify-content: flex-end;margin-right:40px; }
.lang li {text-align:right; display:inline-block; float:right; margin-left:5px;}
.lang li:first-child::after {content: " / ";  }
.lang li a{color:#ffff; }



/*	Homepage
-------- */
#home{z-index:4; display:flex; flex-direction: column;justify-content: space-between; overflow-x: hidden; position: sticky; bottom:0;}

.large-text{ padding-top:120px; padding-left:35px; padding-right:40px;text-transform: uppercase; font-size: 15vw;letter-spacing: 0.04em; line-height: 0.8em; color:#ffff; }
.large-text p {margin-bottom:0}

.marquee{opacity: 0;}
.marquee-text { font-size: 5vw;letter-spacing: -0.01em;  margin-bottom:6vh; }

/*	Aboutpage
-------- */
#manifesto{ z-index:3;  padding-left:50px; padding-right:40px; position: sticky; bottom:0;}
.about-text{padding-top:120px;text-transform: uppercase; font-size: 3.9vw; line-height: 1.1em; letter-spacing: -0.02em; }
/* .about-image{height:100vh;background-color: #0000; background-repeat: no-repeat;background-size: contain;} */



/*	Conceptpage
-------- */
#concept{z-index:2; position: sticky;bottom:0;  width:100vw; background-color:#faf9f7 !important; display:flex; align-items: center; overflow-y: hidden;}
.text{position:absolute;width:58vh; height:auto;left:10vw; margin-top:20vh;}
.botella{position:absolute;width:52vh; height:auto; right:12vw; margin-top:8vh; }
.flechas{position:absolute;width:52vh; height:auto; right:12vw; margin-top:0; }
/* .etiqueta{position: absolute;bottom:0; width:25vw; height:auto; left:9vw;} */

.parallax-slide{width:100vw; height:100%; display:block !important;}
.parallax-slide-mobile{display:none;}


/*	Gallerypage
-------- */
#gallery{z-index:1; position: sticky;bottom:0; width:100vw; background-color:#faf9f7 !important; display:flex; align-items: center;}


.swiper-container {width: 100%; height: 100%;-webkit-overflow-scrolling: touch;}
.swiper-slide {width:35vw !important;height:35vw !important;background-size: cover; background-repeat: no-repeat; margin:auto; background-position: center center; -webkit-overflow-scrolling: touch; margin-left:10vw; }

.swiper-button-next{background-image: url("img/arrow-right.svg") !important; }
.swiper-button-prev{background-image: url("img/arrow-left.svg") !important;}
.swiper-button-next , .swiper-button-prev  { z-index: 99;  margin:0; background-position: center; background-repeat: no-repeat; background-size: contain !important; width:40px !important; height:40px !important; margin-right:10px; margin-left:10px; }






/*	Contactpage
-------- */
#contact{z-index:0;padding-left:50px; padding-right:40px;  top:0; position: sticky; bottom:0;display:flex; flex-direction: column;justify-content: space-between;background-color:#faf9f7; }

.closed{padding-top:120px; line-height: 0.9em; font-size: 13vw; color:#999897;}
.open{padding-top:120px;line-height: 0.9em; font-size: 13vw; color:#999897;}
.open-flash{color:#0cff00;}
.contact-info{ display:flex; font-size: 1.8vw; line-height: 1.1em; letter-spacing: -0.02em;text-transform: uppercase;color:#000; }

.info-block{padding-right:3vw;}
.info-block p{margin-bottom:0;}

.social-media a:first-child::after {content: "\00a0 / "; display: inline-block;}
.social-media a:hover:first-child::after{text-decoration:none;}

.coming-soon-flash{color:#f60909;}
.greeting{font-size: 8vw; line-height: 0.9em;  margin-bottom:0; color:#000;}
.aviso-legal{color:#000; padding-bottom: 6vh;}


#aviso-legal{ top:0; padding-top:35px;padding-left:50px; padding-right:100px; overflow-y: scroll !important; -webkit-overflow-scrolling: touch; position:fixed; background-color:#faf9f7; font-family: "Helvetica", Arial, sans-serif;}
#aviso-legal p{margin-bottom:20px; font-size: 20px; }
.aviso-legal-text{margin-bottom:120px;}
#logo2{width:200px; height:auto; margin-bottom:50px;}




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

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

.container {height:calc(var(--vh, 1vh) * 100);scroll-snap-type: y mandatory; -ms-scroll-snap-type:y mandatory;-webkit-overflow-scrolling: touch;}

	/*	Header
	------ */
	header{ margin-top:20px; flex-direction: column; align-items: flex-start;}
	.logo{margin-left:10px;margin-top:5px; }
	#logo{width:130px; height:auto; margin-top:0;}
	.menu{ margin-right:0; font-size: 8vw; letter-spacing: -0.02em; }
	.menu li{margin-left:7px; margin-bottom: 9vh;}
	.menu li a{color:#ffff !important; }
	.menu{position:fixed; top:0; left:0; width: 100vw; height:calc(var(--vh, 1vh) * 78);  background-color:#000; flex-direction: column; justify-content: flex-start;align-items: center; padding-top:22vh; padding-bottom: 23vw;}

	.burger-mobile{display:block; position:fixed; top:23px; right:13px; z-index: 1;-webkit-user-select: none;user-select: none;}


.lang{margin-right:0; font-size: 19px;flex-basis: 100%; width:99%; }
.lang li { margin-left:0;}


	.burger-mobile input { display: block; width: 40px; height: 30px; position: absolute;  cursor: pointer; opacity: 0; z-index: 2;margin:0;}
	.burger-mobile input:focus{outline:0 !important; }

	.burger-mobile span{display: block; width: 30px; height: 2px; margin-bottom: 8px; position: relative; background: #fff;transform-origin: 2px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.55s ease;}
	/* .burger-mobile span:first-child{transform-origin: 0% 0%;}
	.burger-mobile span:nth-last-child(1){transform-origin: 0% 100%;} */
	.burger-mobile input[type=checkbox]:checked ~ span{opacity: 1; transform: rotate(23deg); background:#fff !important;}
	.burger-mobile input[type=checkbox]:checked ~ span:nth-last-child(1){transform: rotate(-23deg) ;}










	/*	Homepage
	-------- */
	#home{ position: relative; bottom: auto; }

	.large-text{padding-top:22vh; padding-left:10px; padding-right:10px;text-transform: uppercase; font-size: 23vw; line-height: 0.8em; color:#ffff; }
	.marquee-text {font-size: 13vw; margin-bottom:12vh;}


	/*	Aboutpage
	-------- */
	#manifesto{padding-left:10px; padding-right:10px; position: relative; bottom: auto;}
	.about-text{padding-top:14vh;text-transform: uppercase; font-size: 7vw; line-height: 1.1em; letter-spacing: -0.02em; }


	/*	ConceptPage
	-------- */
	#concept{position: relative; bottom: auto; overflow-y: visible;}
	.parallax-slide{display:none !important;}
	.parallax-slide-mobile{display:block; width:100vw; height:calc(var(--vh, 1vh) * 100); background-color:#faf9f7; background-size: contain; background-position: top; background-repeat: no-repeat;}



	/*	Gallerypage
	-------- */
	#gallery{position: relative; bottom: auto;}
	.swiper-button-next , .swiper-button-prev  { width:30px !important; height:30px !important; margin-right:0; margin-left:0; }
	.swiper-slide {width:100vw !important;height:100vw !important;background-size: cover !important;  -webkit-overflow-scrolling: touch; margin-left:0; }



	/*	Contactpage
	-------- */
	#contact{padding-left:10px; padding-right:10px;position: relative; bottom: auto; }

	.closed{padding-top:14vh;line-height: 0.9em; font-size: 17vw; }
	.open{padding-top:23vw;line-height: 0.9em; font-size: 17vw; }
	.contact-info{ display:flex; flex-direction: column;font-size: 4.5vw; line-height: 1.1em; letter-spacing: -0.02em;text-transform: uppercase; }

	.info-block{padding-right:3vw; margin-bottom: 3.8vw;}
	.info-block p{margin-bottom:0;}
	.emptyp{display:none;}

	.greeting{font-size: 11vw; line-height: 0.9em;  margin-bottom:0; }
	.aviso-legal{padding-bottom: 2vh; font-size: 3vw;}


	#aviso-legal{ top:0; padding-top:25px;padding-left:10px; padding-right:10px; overflow-y: scroll !important; -webkit-overflow-scrolling: touch; position:fixed;  }
	#aviso-legal p{margin-bottom:20px; font-size: 15px; }
	.aviso-legal-text{margin-bottom:100px;}
	#logo2{width:130px;height:auto; margin-top:0; margin-bottom:20px;}


}