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

@media (max-width: 767px){
	
	.header{
		position: fixed;
		display: block;
		width: 100vw;
		height: 100px;
		top: 30px;
		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 .logo img{
		position: relative;
		width: auto;
		height: 100%;
		top: 50%;
		transform: translate(0, -50%);
		transition: all .4s ease;
	}
	
	.header.shrink .logo img{
		position: relative;
		width: auto;
		height: calc(100% - 20px);
		top: 50%;
		transform: translate(0, -50%);
	}
	
	.menu-button{
		position: fixed;
		display: block;
		width: 35px;
		height: 20px;
		top: 68px;
		right: 40px;
		cursor: pointer;
		transition: all .4s ease;
		z-index: 888;
	}

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

	.menu-button.shrink.active{
		top: 68px;
		transform: none;
		z-index: 999;
	}
	
	.menu-button.active{
		z-index: 999;
	}

	.menu-button .bar-top{
		position: absolute;
		display: block;
		width: 35px;
		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.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: 35px;
		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.active .bar-middle{
		opacity: 0;
		transition: opacity .4s;
	}

	.menu-button .bar-bottom{
		position: absolute;
		display: block;
		width: 35px;
		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.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: 20px;
		top: 68px;
		left: 40px;
		cursor: pointer;
		transition: all .4s ease;
		z-index: 888;
	}

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

	.lang-button.shrink.active{
		top: 68px;
		z-index: 999;
	}

	.lang-button.active{
		z-index: 999;
	}

	.lang-button svg{
		position: relative;
		display: block;
		width: auto;
		height: 26px;
		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.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: 100vw;
		z-index: 999;
	}

	.menu .items{
		position: absolute;
		display: block;
		width: calc(100% - 80px);
		height: auto;
		/*top: 50%;*/
		top: 100px;
		left: 40px;
		/*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: 40px;
		font-family: 'LAB-HEADER';
		font-weight: 200;
		font-size: 32px;
		color: rgb(27,27,27);
		text-decoration: none;
	}
	
	.menu .social{
		position: absolute;
		display: block;
		width: calc(100vw - 80px);
		height: 30px;
		bottom: 40px;
		left: 40px;
	}

	.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: 30px;
		height: 30px;
		margin: 0 15px 0 0;
		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: 100vw;
		z-index: 999;
	}

	.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: 32px;
		text-align: center;
		color: rgb(27,27,27);
		text-decoration: none;
	}
	
	#careers-modal{
		position: fixed;
		display: block;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.7);
		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: 90vw;
		height: auto;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgb(255,255,255);
		padding: 30px;
		text-align: center;
		z-index: 999999;
	}

	#careers-modal .careers-box p{
		text-align: left;
		margin-bottom: 15px;
	}

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

	#cookie-law .cookie-info-box{
		width: 90vw;
	}

	#cookie-law .cookie-info-box a.cookie-info-button{
		font-size: 13px;
	}
}