@charset "UTF-8";
/* Penha Longa - CSS Parts */

body{
	font-family: 'LAB-TEXT';
	font-weight:200;
	font-size:14px;
	color: rgb(27,27,27);
	margin:0;
	background-color: rgb(255,255,255);
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	overflow-x: hidden;
	overflow-y: scroll;
}

h1{padding: 0; margin: 0; font-family: 'LAB-HEADER'; font-weight: 200; font-size: 50px; text-transform: uppercase;}
h2{padding: 0; margin: 0; font-family: 'LAB-HEADER'; font-weight: 200; font-size: 35px; text-transform: uppercase;}
h3{padding: 0; margin: 0; font-family: 'LAB-HEADER'; font-weight: 200; font-size: 22px; text-transform: uppercase;}
h4{padding: 0; margin: 0; font-family: 'LAB-HEADER'; font-weight: 200; font-size: 18px; text-transform: uppercase;}
h5{padding: 0; margin: 0; font-family: 'LAB-HEADER'; font-weight: 200; font-size: 14px; text-transform: uppercase;}
h6{padding: 0; margin: 0; font-family: 'LAB-HEADER'; font-weight: 200; font-size: 12px; text-transform: uppercase;}
p{padding: 0; margin: 0;}

#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgb(8,16,16);
    background-image: url('../images/loader.gif');
    background-repeat: no-repeat;
    background-size:10%;
    background-position: center;
    z-index:999999;
}

#loading.hide{
    display: none;
}

@media only screen and (max-width : 767px) {
  .same-height {
    height: auto !important;
  } 
}

.header{
	position: fixed;
	display: block;
	width: 100vw;
	height: 100px;
	top: 60px;
	left: 0;
	z-index: 777;
	transition: all .4s ease;
}

.header.shrink{
	position: fixed;
	display: block;
	width: 100vw;
	height: 80px;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,1);
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,ffffff+25,ffffff+75,000000+100&0.5+0,0+25,0+75,0.5+100 */
	/*background: -moz-linear-gradient(left,  rgba(0,0,120,0.7) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(0,0,120,0.7) 100%); /* FF3.6-15 */
	/*background: -webkit-linear-gradient(left,  rgba(0,0,120,0.7) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 75%,rgba(0,0,120,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
	/*background: linear-gradient(to right,  rgba(0,0,120,0.7) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 75%,rgba(0,0,120,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#80000000',GradientType=1 ); /* IE6-9 */

	z-index: 777;
}
.header.shrinkac{
	position: fixed;
	display: block;
	width: 100vw;
	height: 80px;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,1);
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,ffffff+25,ffffff+75,000000+100&0.5+0,0+25,0+75,0.5+100 */
	/*background: -moz-linear-gradient(left,  rgba(0,0,120,0.7) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(0,0,120,0.7) 100%); /* FF3.6-15 */
	/*background: -webkit-linear-gradient(left,  rgba(0,0,120,0.7) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 75%,rgba(0,0,120,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
	/*background: linear-gradient(to right,  rgba(0,0,120,0.7) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 75%,rgba(0,0,120,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#80000000',GradientType=1 ); /* IE6-9 */

	z-index: 777;
}

.header .logo{
	position: absolute;
	display: block;
	width: auto;
	height: 100%;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
}

.header .logo img{
	position: relative;
	width: auto;
	height: 160%;
	top: 50%;
	transform: translate(0, -50%);
	transition: all .4s ease;
}

.header.shrink .logo img{
	position: relative;
	width: auto;
	height: 100%;
	top: 50%;
	transform: translate(0, -50%);
}
.header.shrinkac .logo img{
	position: relative;
	width: auto;
	height: 100%;
	top: 50%;
	transform: translate(0, -50%);
}

.menu-button{
	position: fixed;
	display: block;
	width: 37px;
	height: 24px;
	top: 98px;
	right: 80px;
	cursor: pointer;
	transition: all .4s ease;
	z-index: 888;
}

.menu-button.shrink{
	top: 28px;
}

.menu-button.shrinkac{
	top: 28px;
}

.menu-button.shrink.active{
	top: 98px;
	transform: none;
}
.menu-button.shrinkac.active{
	top: 98px;
	transform: none;
}

.menu-button .bar-top{
	position: absolute;
	display: block;
	width: 37px;
	height: 3px;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	background-color: rgb(255,255,255);
	transition: top .4s .4s, transform .4s, background .4s .4s;
}

.menu-button.shrink .bar-top{
	background-color: rgb(27,27,27);
}
.menu-button.shrinkac .bar-top{
	background-color: rgb(27,27,27);
}

.menu-button.active .bar-top{
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	transition: top .4s, transform .4s .4s, background .4s .4s;
	background-color: rgb(27,27,27);
}

.menu-button .bar-middle{
	position: absolute;
	display: block;
	width: 37px;
	height: 3px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgb(255,255,255);
	opacity: 1;
	transition: opacity .4s .4s, background .4s .4s;
}

.menu-button.shrink .bar-middle{
	background-color: rgb(27,27,27);
}

.menu-button.shrinkac .bar-middle{
	background-color: rgb(27,27,27);
}

.menu-button.active .bar-middle{
	opacity: 0;
	transition: opacity .4s;
}

.menu-button .bar-bottom{
	position: absolute;
	display: block;
	width: 37px;
	height: 3px;
	top: calc(100% - 3px);
	right: 50%;
	transform: translate(50%, 0);
	background-color: rgb(255,255,255);
	transition: top .4s .4s, transform .4s, background .4s .4s;
}

.menu-button.shrink .bar-bottom{
	background-color: rgb(27,27,27);
}

.menu-button.shrinkac .bar-bottom{
	background-color: rgb(27,27,27);
}

.menu-button.active .bar-bottom{
	top: 50%;
	transform: translate(50%, -50%) rotate(45deg);
	transition: top .4s, transform .4s .4s, background .4s .4s;
	background-color: rgb(27,27,27);
}

.lang-button{
	position: fixed;
	display: block;
	width: auto;
	height: 24px;
	top: 98px;
	left: 80px;
	cursor: pointer;
	transition: all .4s ease;
	z-index: 888;
}

.lang-button.shrink{
	top: 28px;
}

.lang-button.shrinkac{
	top: 28px;
}

.lang-button.shrink.active{
	top: 98px;
}

.lang-button.shrinkac.active{
	top: 98px;
}

.lang-button svg{
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
	top: 0;
	left: 0;
}

.lang-button svg path{
	fill: rgb(255,255,255);
	transition: all .8s ease;
}

.lang-button.shrink svg path{
	fill: rgb(27,27,27);
}

.lang-button.shrinkac svg path{
	fill: rgb(27,27,27);
}

.lang-button.active svg path{
	fill: rgb(27,27,27);
}

.menu{
	position: fixed;
	display: block;
	overflow: hidden;
	width: 0;
	height: 100vh;
	top: 0;
	right: 0;
	background-color: rgb(255,255,255);
	opacity: 0;
	transition: all .8s ease;
	z-index: 888;
}

.menu.open{
	opacity: 1;
	width: calc(100vw / 3);
}

.menu .items{
	position: absolute;
	display: block;
	width: calc(100% - 240px);
	height: auto;
	/*top: 50%;*/
	top: 162px;
	left: 120px;
	/*transform: translate(0, -50%);*/
}

.menu .items ul{
	position: relative;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
}

.menu .items ul li{
	position: relative;
	display: block;
	width: auto;
	height: auto;
	margin: 30px 0;
	padding: 0;
}

.menu .items ul li a{
	position: relative;
	display: inline-block;
	width: auto;
	height: 60px;
	font-family: 'LAB-HEADER';
	font-weight: 200;
	font-size: 42px;
	color: rgb(27,27,27);
	text-decoration: none;
}

.menu .social{
	position: absolute;
	display: block;
	width: calc(100vw / 3 - 210px);
	height: 40px;
	bottom: 120px;
	left: 105px;
}

.menu .social ul{
	position: relative;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
}

.menu .social ul li{
	position: relative;
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 0 15px;
	padding: 0;
}

.menu .social ul li a{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.menu .social ul li a svg{
	position: relative;
	display: block;
	width: auto;
	height: 100%;
}

.menu .social ul li a svg path{
	fill: rgb(27,27,27);
}

.lang-menu{
	position: fixed;
	display: block;
	overflow: hidden;
	width: 0;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: rgb(255,255,255);
	opacity: 0;
	transition: all .8s ease;
	z-index: 888;
}

.lang-menu.open{
	opacity: 1;
	width: calc(100vw / 3);
}

.lang-menu .items{
	position: absolute;
	display: block;
	width: calc(100% - 240px);
	height: auto;
	top: 50%;
	left: 120px;
	transform: translate(0, -50%);
}

.lang-menu .items ul{
	position: relative;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	text-align: center;
}

.lang-menu .items ul li{
	position: relative;
	display: block;
	width: auto;
	height: auto;
	margin: 30px 0;
	padding: 0;
	text-align: center;
}

.lang-menu .items ul li a{
	position: relative;
	display: inline-block;
	width: auto;
	height: 60px;
	font-family: 'LAB-HEADER';
	font-weight: 200;
	font-size: 42px;
	text-align: center;
	color: rgb(27,27,27);
	text-decoration: none;
}

.selo-digital-penha-longa{
	position: fixed;
	display: block;
	width: auto;
	max-width: 40px;
	height: 40px;
	bottom: 80px;
	right: 0;
	z-index: 777;
	transition: max-width .8s ease-in-out;
}

.selo-digital-penha-longa:hover{
	max-width: 100vw;
	transition: max-width .8s ease-in-out;
}

.selo-digital-penha-longa .contain{
	position: relative;
	display: block;
	width: auto;
	height: 40px;
	top: 0;
	right: 0;
	border-top-left-radius: 200px;
	border-bottom-left-radius: 200px;
	background-color: rgb(0,0,0);
	z-index: 888;
	transition: all .8s .4s;
}

.selo-digital-penha-longa:hover .contain{
	background-color: rgb(255,255,255);
	box-shadow: 0 0 6px rgba(0,0,0,0.2);
}

.selo-digital-penha-longa .contain .symbol{
	position: relative;
	display: block;
	width: auto;
	height: 40px;
	float: left;
}

.selo-digital-penha-longa .symbol svg{
	position: relative;
	display: block;
	width: auto;
	height: 40px;
	top: 0;
	left: 0;
}

.selo-digital-penha-longa .contain .symbol svg path{
	fill: rgb(255,255,255);
	transition: all .8s .4s;
}

.selo-digital-penha-longa:hover .contain .symbol svg path{
	fill: rgb(0,0,0);
}


#careers-link{
	cursor: pointer;
}

#careers-modal{
	position: fixed;
	display: block;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	color: rgb(0,0,0);
	z-index: -1;
	opacity: 0;
	transition: all 0.4s ease;
}

#careers-modal.open{
	z-index: 999999;
	opacity: 1;
}

#careers-modal .careers-box{
	position: absolute;
	display: block;
	width: 30vw;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgb(255,255,255);
	padding: 30px 30px 0 30px;
	text-align: center;
	z-index: 999999;
}

#careers-modal .careers-box p{
	text-align: left;
	color: rgb(0,0,0);
}

#careers-modal .careers-box a.careers-button{
	position: relative;
	display: inline-block;
	width: auto;
	height: auto;
	font-size: 16px;
	text-transform: uppercase;
	text-decoration: none;
	background-color: rgb(0,0,0);
	color: rgb(255,255,255);
	padding: 10px 30px;
	cursor: pointer;
	margin: 30px 15px;
}

#adtrick{
	position: fixed;
	display: block;
	width: auto;
	height: 15px;
	bottom: 0;
	right:0;
	z-index: 888;
}

#adtrick .square{
	position: absolute;
	display: block;
	width: 15px;
	height: 15px;
	bottom: 0;
	right:0;
	background-color: rgb(231,68,25);
}

#adtrick .label{
	position: absolute;
	display: block;
	overflow: hidden;
	max-width: 0;
	height: 15px;
	line-height: 10px;
	bottom: 0;
	right: 0;
	font-family: 'ADTRICK';
	font-size: 10px;
	color: rgb(231,68,25);
	transition: all 0.2s ease;
}

#adtrick:hover .label{
	cursor: pointer;
	max-width: 100vw;
	right: 15px;
}

#cookie-law{
	position: fixed;
	display: block;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 999999;
	opacity: 1;
	transition: all 0.4s ease;
}

#cookie-law .cookie-info-box{
	position: absolute;
	display: block;
	width: 20vw;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgb(255,255,255);
	padding: 30px 30px 0 30px;
	text-align: center;
	z-index: 999999;
}

#cookie-law .cookie-info-box p{
	text-align: center;
	color: rgb(0,0,0);
}

#cookie-law .cookie-info-box a.cookie-info-button{
	position: relative;
	display: inline-block;
	width: auto;
	height: auto;
	font-size: 16px;
	text-transform: uppercase;
	text-decoration: none;
	background-color: rgb(0,0,0);
	color: rgb(255,255,255);
	padding: 10px 30px;
	cursor: pointer;
	margin: 30px 15px;
}



.livro-de-reclamacoes {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 40px;
	margin: 0 0 30px 30px;
}

.livro-de-reclamacoes a {
	display: inline-block;
}

.livro-de-reclamacoes svg{
	position: relative;
	display: block;
	width: 100px;
	height: 40px;
}

.livro-de-reclamacoes svg path{
	fill: rgb(0,0,0);
}