:root{
	--black:#16171d;
	--grey:#8c95b2;
	--orange:#f87f22;
	--white:#fefefe;
	--easing:cubic-bezier(.55,0,.1,1);
}
::-webkit-scrollbar{
	width: 0 !important;
}
*{
	padding:0;
	margin:0;
	outline:none;
	box-sizing:border-box;
	font-family:'MyriadPro';
	user-select:none;
	-webkit-tap-highlight-color:transparent;
}
html,body{
	height:100%;
	font-size:20px;
}
body{
	background:#333;
	display:flex;
	flex-direction:column;
	justify-content:center;
	overflow:hidden;
	touch-action:none;
}
#main{
	width:1920px;
	height:1080px;
	background:#fff;
	position:relative;
	margin:0 auto;
}
.hide{
	opacity:0;
}
.disabled{
	filter:grayscale(100%);
	opacity:0.2;
}

ul{
	list-style:none;
}
/* ============================================================================= */

#opening{
	position:absolute;
	width:100%;
	height:100%;
	background:var(--black);
	z-index:100;
	transform:translateY(100vh);
	transition:all 0.5s ease-out;
}
#opening.show{
	transform:translateY(0);
}
#opening-1,#opening-2,#opening-3{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	color:var(--grey);
	display:none;
}
#opening-1.show,#opening-2.show,#opening-3.show{
	display:flex;
}
#opening-1 h1{
	background:url(../assets/opening_touch_start.png) no-repeat;
	height:66px;
	width:900px;
	line-height:66px;
	text-align:center;
	font-weight:400;
	opacity:0;
}
#opening-1.show video{
	animation:opening-page-1-video 1s ease-out;
	animation-fill-mode:forwards;
}
#opening-1.show h1{
	animation:opening-page-1-title 0.5s ease-out;
	animation-fill-mode:forwards;
	animation-delay:0.1s;
}
#opening-2,#opening-3{
	justify-content:flex-start;
}
#opening-2 h1,#opening-3 h1{
	font-size:3rem;
	margin:20px 0px 0px 0px;
	transform:translateY(1000px);
}
#opening-2 p,#opening-3 p{
	font-size:2rem;
	text-align:justify;
	padding:30px 500px 0px 500px;
	line-height:3rem;
	transform:translateY(1000px);
}
#opening-2 button,#opening-3 button{
	background:var(--orange);
	border:none;
	width:135px;
	height:135px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:100px;
	margin-top:50px;
	transform:translateY(1000px);
}
#opening-2 button img,#opening-3 button img{
	width:60px;
	margin-left:10px;
}
#opening-2.show video,#opening-3.show video{
	animation:opening-page-2-video 0.5s ease-out;
	animation-fill-mode:forwards;
}
#opening-2.show h1,#opening-3.show h1{
	animation:opening-page-2-text 0.5s ease-out;
	animation-delay:0.1s;
	animation-fill-mode:forwards;
}
#opening-2.show p,#opening-3.show p{
	animation:opening-page-2-text 0.5s ease-out;
	animation-delay:0.2s;
	animation-fill-mode:forwards;
}
#opening-2.show button,#opening-3.show button{
	animation:opening-page-2-text 0.5s ease-out;
	animation-delay:0.3s;
	animation-fill-mode:forwards;
}
@keyframes opening-page-1-video{ 
	from{
		transform:scale(0);
		opacity:0;
	}
	to{ 
		transform:scale(1);
		opacity:1;
	}  
}
@keyframes opening-page-1-title{ 
	from{
		transform:translateY(200px);
		opacity:0;
	}
	to{ 
		transform:translateY(0);
		opacity:1;
	}  
}
@keyframes opening-page-2-video{ 
	from{
		transform:translateY(-200px);
		opacity:0;
	}
	to{ 
		transform:translateY(0px);
		opacity:1;
	}  
}
@keyframes opening-page-2-text{ 
	from{
		transform:translateY(200px);
		opacity:0;
	}
	to{ 
		transform:translateY(0);
		opacity:1;
	}  
}

/* ============================================================================= */

#root{
	position:absolute;
	width:100%;
	height:100%;
	background:#fff;
	z-index:1;
	display:flex;
}

#sidebar{
	width:465px;
	background:var(--black);
	display:flex;
	flex-direction:column;
	align-items:center;
}
#sidebar #logo{
	
}
#sidebar #menu{
	flex:1;
	display:flex;
}
#sidebar #menu ul{
	display:flex;
	flex-direction:column;
	flex:1;
}
#sidebar #menu li{
	text-align:center;
}
#sidebar #menu a{
	display:block;
	color:var(--grey);
	text-decoration:none;
	font-size:1.2rem;
}

#sidebar #menu li.selected a{
	color:var(--orange);
}
#sidebar #menu li.selected ul li a{
	color:var(--grey);
}
#sidebar #menu li.selected ul li a.highlighted{
	color:var(--orange) !important;
}

#sidebar #menu li{
	border-bottom:2px solid var(--grey);
	padding:8px 0px 9px 0px;
	position:relative;
}
#sidebar #menu li:last-child{
	border:none;
}
#sidebar #menu li ul{
	height:0;
	overflow:scroll;
	transition:height 0.5s var(--easing);
}
#sidebar #menu li ul:before{
	content:'';
	position:absolute;
	bottom:0;
	left:0;
	height:80px;
	background:linear-gradient(to bottom, rgba(22,23,27,0) 0%,rgba(22,23,27,0.8) 60%);
	width:100%;
	z-index:2;
	opacity:0;
	transition:all 0.2s linear;
	transition-delay:0.2s;
	pointer-events:none;
}
#sidebar #menu li.selected ul:before{
	opacity:1;
}
#sidebar #menu li.selected ul{
	height:460px;
}
#sidebar #menu li ul li:first-child{
	margin-top:30px;
}
#sidebar #menu li.selected{
	max-height:580px;
	padding:15px 0px 0px 0px;
}

#sidebar #menu li ul li{
	border-bottom:none;
	padding:10px 0px;
}

#sidebar #menu li>a{
	font-size:1.3rem;
}
#sidebar #menu li ul li a{
	font-size:1.1rem;
}




#sidebar #navigation{
	height:160px;
	overflow:hidden;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}
#sidebar #navigation ul{
	display:flex;
}
#sidebar #navigation ul li{
	width:64px;
	height:64px;
	border-radius:40px;
	background:var(--orange);
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0px 7px;
}
#sidebar #navigation ul li a{
	
}
#sidebar #navigation ul li a img{
	width:25px;
}
#sidebar #navigation ul li:nth-child(1) a img{
	width:24px;
	margin-left:0px;
	margin-top:0px;
}
#sidebar #navigation ul li:nth-child(2) a img{
	width:30px;
	margin-left:0px;
	margin-top:0px;
}
#sidebar #navigation ul li:nth-child(3) a img{
	width:22px;
	margin-left:0px;
	margin-top:3px;
	transform:rotate(270deg);
}
#sidebar #navigation ul li:nth-child(4) a img{
	width:22px;
	margin-left:-7px;
	margin-top:7px;
	transform:rotate(180deg);
}
#sidebar #navigation ul li:nth-child(5) a img{
	width:22px;
	margin-left:5px;
	margin-top:7px;
	transform:rotate(0deg);
}
#sidebar #navigation span#copyright{
	position:absolute;
	top:1045px;
	left:115px;
	display:flex;
	justify-content:center;
	display: flex;
	text-align: center;
	color:var(--grey);
	font-size:0.8rem;
}

#container{
	flex:1;
	position:relative;
	overflow-y:scroll;
	overflow-x:hidden;
	scroll-behavior:smooth;
}
#content-root{
	background-image:url(../assets/orange-lines-2.png), url(../assets/orange-lines.png);
	background-position:right top, right top;
	background-repeat:no-repeat,repeat-y;
	border-top:10px solid #fdaf17;
	padding-right:200px;
	min-height:100%;
	transition:all 0.3s cubic-bezier(.55,0,.1,1);
}
#content-root.hide{
	opacity:0;
	transform:scale(0.98);
}


/* ============================================================================= */

#overlay{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	backdrop-filter:blur(20px);
	z-index:100;
	will-change:transform;
	transform:translateX(-100vw);
	transition:opacity 0.2s linear;
	opacity:0;
}
#overlay.show{
	transform:translateX(0vw);
	opacity:1;
}



/* ============================================================================= */

.click,.close-btn{
	position:absolute;
	top:-30px;
	right:-30px;
	border:none;
	background:none;
	touch-actions:none;
}
.close-btn{
	position:fixed;
}
.click img,.close-btn img{
	width:60px;
}
.close-btn{
	top:20px;
	right:20px;
}

/* ============================================================================= */

.warning{
	width:100%;
	height:1070px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.warning h1{
	color:var(--orange);
}
.solo-title{
	color:var(--orange);
	padding:100px 0px 0px 100px;
	font-size:2.8rem;
}
.solo-title-2{
	color:var(--grey);
	padding:20px 0px 100px 100px;
	font-size:2.2rem;
	font-weight:normal;
	text-align:center;
}
.spacer{
	width:100%;
	height:80px;
	background:#f0f;
}

.text-block{
	padding:0px 50px;
	display:flex;
}
.text-block h1{
	color:var(--orange);
	font-size:2.4rem;
	margin-top:64px;
	margin-bottom:35px;
	margin-left:23px;
}
.text-block h2{
	color:var(--grey);
	font-size:1.7rem;
	margin-top:30px;
	margin-bottom:5px;
	margin-left:23px;
}
.text-block p{
	text-align:justify;
	font-size:1.37rem;
	color:#8c95b2;
	padding-left:27px;
	padding-right:0px;
	letter-spacing:-1px;
	line-height:54px;
}
.text-block .size-2 p{
	line-height:48px;
}
.text-left p{
	padding-right:27px;
}
.text-block span{
	display:block;
	color:#8c95b2;
	padding-left:27px;
	padding-right:24px;
	font-size:0.8rem;
}
hr{
	padding:40px;
	border:none;
}
hr.small{
	padding:2px;
}
.content-photo{
	width:auto;
	height:auto;
	z-index:1;
	position:relative;
}
.content-photo img{
	display:block;
}
.content-photo.left{
	margin-right:50px;
}
.content-photo.right{
	margin-left:50px;
}
.content-photo:before{
	position:absolute;
	display:block;
	content:'';
	background:#f87f22;
	width:83.2%;
	height:89%;
	bottom:-21px;
	left:7px;
	z-index:-1;
}
.content-photo:after{
	position:absolute;
	display:block;
	content:'';
	background:#fdaf17;
	width:83%;
	height:89%;
	bottom:-11px;
	left:-11px;
	z-index:-1;
}
.no-border:before{
	display:none;
}
.no-border:after{
	display:none;
}
.full-frame:after{
	width:83%;
	height:105%;
	bottom:-11px;
	left:-11px;
	z-index:-1;
}

/* ============================================================================= */

.solo-image{
	width:auto;
	height:auto;
	z-index:1;
	position:relative;
	margin-top:70px;
}
.solo-image img{
	display:block;
	width:100%;
}
.solo-image:before{
	position:absolute;
	display:block;
	content:'';
	background:#f87f22;
	width:83.2%;
	height:89%;
	top:-9px;
	right:-7px;
	z-index:-1;
}
.solo-image:after{
	position:absolute;
	display:block;
	content:'';
	background:#fdaf17;
	width:83%;
	height:89%;
	bottom:-11px;
	left:-11px;
	z-index:-1;
}

/* ============================================================================= */

.solo-image-produto{
	width:auto;
	height:auto;
	z-index:2;
	position:relative;
	margin-top:70px;
}
.solo-image-produto img{
	display:block;
	width:100%;
}

/* ============================================================================= */

#box-container{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:10;
}
#box{
	background-image:linear-gradient(45deg, #16171b 25%, #1f2024 25%, #1f2024 50%, #16171b 50%, #16171b 75%, #1f2024 75%, #1f2024 100%);
	background-size:10px 10px;
	z-index:10;
	color:#fff;
	padding:30px 40px;
	transform:scale(0);
}
#box .close-btn{
	top:-20px;
	right:-20px;
}
#box .close-btn img{
	width:40px;
}
#box .embalagem-container:before {
	margin-left: 500px;
}
#box .embalagem-container{
	top:-120px;
	right:890px;
	position: absolute;
}
#box .embalagem-container img{
	width:490px;
}
#box.show{
	animation:box-in 0.4s cubic-bezier(.55,0,.1,1);
	animation-fill-mode:forwards;
}
#box.hide{
	animation:box-out 0.4s cubic-bezier(.55,0,.1,1);
	animation-fill-mode:forwards;
}

.box-pictures-side{
	width:50%;
}
.box-pictures.two{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:30px 40px;
}




.box-picture{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
}
.picture-container{
	position:relative;
	width:auto;
}
.box-picture .click{
	z-index:20;
	top:auto;
	right:-20px;
	bottom:-20px;
}
.box-picture .click img{
	width:40px;
}
.picture-container img{
	display:block;
	object-fit:contain;
	width:auto;	
	/* retirar */
	max-width:100%;
	max-height:400px;
}
.picture-container a{
	display:none;
}


.picture-container .cover{
	object-fit:contain;
}
.box-title{
	padding:20px 0;
	width:100%;
}
.box-title h1{
	color:var(--orange);
	font-size:2.4rem;
}
.box-title p{
	color:var(--grey);
	font-size:1.2rem;
	line-height:1.8rem;
}
.box-picture .box-title h1{
	line-height:2.2rem;
	padding-bottom:1rem;
}
.box-title-center{
	padding:0px 0px 10px 0px;
	width:100%;
	text-align:center;
}
.box-title-center h1{
	color:var(--orange);
	font-size:2.4rem;
}
.box-text{
	display:flex;
	flex-direction:column;
}
.box-text p{
	color:var(--grey);
	font-size:1.2rem;
	line-height:1.8rem;
	word-wrap:break-word;
}

#book-container{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:30;
	display:flex;
	align-items:center;
	justify-content:center;
}
#flipbook{
	z-index:31;
	transition:margin-left 0.2s ease-in-out;
}
#flipbook.in{
	animation:book-in 0.4s cubic-bezier(.55,0,.1,1);
	animation-fill-mode:forwards;
}
#flipbook.out{
	animation:book-out 0.4s cubic-bezier(.55,0,.1,1);
	animation-fill-mode:forwards;
}
#flipbook div img{
	width:100%;
	height:100%;
}
#flipbook .p1{
	z-index:100;
}


/* ============================================================================= */

#boxprod{
	background-image:linear-gradient(45deg, #16171b 25%, #1f2024 25%, #1f2024 50%, #16171b 50%, #16171b 75%, #1f2024 75%, #1f2024 100%);
	background-size:10px 10px;
	z-index:10;
	color:#fff;
	padding:30px 40px;
	transform:scale(0);
	margin-left: 500px;
}
#boxprod .close-btn{
	top:-20px;
	right:-20px;
}
#boxprod .close-btn img{
	width:40px;
}

#boxprod .embalagem-container{
	top:-110px;
	right:890px;
	position: absolute;
}
#boxprod .embalagem-container img{
	width:490px;
}
#boxprod.show{
	animation:box-in 0.4s cubic-bezier(.55,0,.1,1);
	animation-fill-mode:forwards;
}
#boxprod.hide{
	animation:box-out 0.4s cubic-bezier(.55,0,.1,1);
	animation-fill-mode:forwards;
}


/* ============================================================================= */

#one-text{
	padding:50px 0px 0px 50px;
}
#one-text h1{
	color:var(--orange);
	font-size:2.4rem;
	margin:0px 0px 20px 0px;
}
#one-text h2{
	color:var(--grey);
	font-weight:400;
	margin:0px 0px 20px 0px;
}
#one-text p{
	
}

/* ============================================================================= */

.text-content{
	
}
.text-content h1{
	color:var(--orange);
	font-size:1.9rem;
	line-height:1.9rem;
	margin:0px 0px 20px 0px;
}
.text-content p{
	color:var(--grey);
	font-weight:400;
	margin:0px 0px 20px 0px;
	font-size:1rem;
	line-height:1.7rem;
	text-align:justify;
}
.text-content span{
	color:var(--grey);
	font-size:0.8rem;
	margin:0px 0px 20px 0px;
}


/* ============================================================================= */

#genealogic{
	position:relative;
}
#genealogic-tree{
	margin-left:-32px;
}
#genealogic .gen-click{
	position:absolute;
	width:80px;
	height:80px;
}
#genealogic .gen-click img{
	position:absolute;
	top:-5px;
	right:-5px;
	width:30px;
}

/* ============================================================================= */

.album{
	padding:50px 50px 0px 100px;
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	grid-gap:80px 40px;
}
.album-item{
	position:relative;
}
.album-item img{
	display:block;
}
.prod{
	background:#fff;
}
.prod img{
	background:#fff;
}
.photo{
	background:#000;
}
.photo img{
	background:#000;
}
.photo:before{
	position:absolute;
	display:block;
	content:'';
	background:#f87f22;
	width:83.2%;
	height:89%;
	bottom:-11px;
	left:9px;
	z-index:-1;
}
.photo:after{
	position:absolute;
	display:block;
	content:'';
	background:#fdaf17;
	width:86%;
	height:99%;
	bottom:-6px;
	left:-6px;
	z-index:-1;
}
.album-item .album-item-click{
	position:absolute;
	width:40px;
	top:-20px;
	right:-20px;
}
.album-item .prod-item-click{
	position:absolute;
	width:40px;
	top:-5px;
	right:40px;
}
.album-item .mprima-item-click{
	position:absolute;
	width:40px;
	top:0px;
	right:15px;
}

/* ================================================================================== */

#coverflow{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:100;
	will-change:transform;
	transform:translateY(-100vh);
	transition:transform 0.4s ease-in-out, opacity 0.2s linear;
	opacity:0;
}
#coverflow.show{
	transform:translateY(0);
	opacity:1;
}

.swiper-container{
	width:100%;
	height:100%;
}
.swiper-slide{
	height:500px !important;
	margin-top:300px;
	text-align:center;
	border-radius:30px;
	overflow:hidden;
	background:rgba(0,0,0,0.3);
}
.swiper-slide a{
	text-decoration:none;
}
.swiper-slide img{
	width:100%;
}
.swiper-slide h1{
	padding-top:10px;
	color:var(--orange);
}
.swiper-slide p{
	padding-top:10px;
	color:var(--white);
	padding:10px 20px 0px 20px;
}

/* ========================================================================================== */

.monitor-selector{
	position:absolute;
	top:10px;
	left:10px;
	width:50px;
	height:50px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:100px;
	border:none;
	background:var(--orange);
	font-weight:700;
	font-size:1rem;
}
#fam{
	
}
#rev{
	top:70px;
}

#pro{
	top:130px;
}