@font-face {
    font-family: 'robotomedium';
    src: url('../fonts/roboto-medium-webfont.eot');
    src: url('../fonts/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-medium-webfont.woff2') format('woff2'),
         url('../fonts/roboto-medium-webfont.woff') format('woff'),
         url('../fonts/roboto-medium-webfont.ttf') format('truetype'),
         url('../fonts/roboto-medium-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    src: url('../fonts/CooperBlackStd.eot');
    src: url('../fonts/CooperBlackStd.eot') format('embedded-opentype'),
         url('../fonts/CooperBlackStd.woff2') format('woff2'),
         url('../fonts/CooperBlackStd.woff') format('woff'),
         url('../fonts/CooperBlackStd.ttf') format('truetype'),
         url('../fonts/CooperBlackStd.svg#CooperBlackStd') format('svg');
}

@font-face {
    font-family: 'robotolight';
    src: url('../fonts/roboto-light-webfont.eot');
    src: url('../fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-light-webfont.woff2') format('woff2'),
         url('../fonts/roboto-light-webfont.woff') format('woff'),
         url('../fonts/roboto-light-webfont.ttf') format('truetype'),
         url('../fonts/roboto-light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/roboto-regular-webfont.eot');
    src: url('../fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('../fonts/roboto-regular-webfont.woff') format('woff'),
         url('../fonts/roboto-regular-webfont.ttf') format('truetype'),
         url('../fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'selfielight';
    src: url('../fonts/selfie_light-webfont.eot');
    src: url('../fonts/selfie_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/selfie_light-webfont.woff2') format('woff2'),
         url('../fonts/selfie_light-webfont.woff') format('woff'),
         url('../fonts/selfie_light-webfont.ttf') format('truetype'),
         url('../fonts/selfie_light-webfont.svg#selfielight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotolight_italic';
    src: url('../fonts/roboto-lightitalic-webfont.eot');
    src: url('../fonts/roboto-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/roboto-lightitalic-webfont.woff') format('woff'),
         url('../fonts/roboto-lightitalic-webfont.ttf') format('truetype'),
         url('../fonts/roboto-lightitalic-webfont.svg#robotolight_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

*{
	outline: none !important;
	border: none;
}

html, body, #fullpage, #secao-home, #foto{
	display: table;
	width: 100%;
	height: 100%;
}

#fullpage{
	position: fixed !important;
	background: #fff;
}

@keyframes moverDireita{
  	100%{
    	background-position: 60px 0; 
	} 
}

@keyframes moverDireita2{
  	100%{
    	background-position: 60px bottom; 
	} 
}

@keyframes encher{
	30%{
		height: 20px;
		transform: rotate(10deg);
	}

	70%{
		height: 30px;
		transform: rotate(-10deg);
	}

  	100%{
    	height: 34px;
		transform: rotate(0deg); 
	} 
}

@keyframes esvaziar{
	0%{
		height: 34px;
	}

  	100%{
    	height: 0;
	} 
}

@keyframes blink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.4;
	}

	100% {
		opacity: 1;
	}
}

.nao-webkit{
	margin: auto;
}

#overlay{
	position: fixed;
	z-index: 9989;
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/bg-quadriculado-cinza.jpg) #fff;
	animation: moverDireita 1s linear infinite;
}

#qLoverlay{
	position: fixed;
	z-index: 9999999;
	width: 100%;
	height: 100%;
	background: url(../img/bg-quadriculado-cinza.jpg) #fff;

	&:before{
		content: "";
		position: absolute;
		z-index: 2;
		display: block;
		width: 52px;
		height: 6px;
		top: calc(50% - 3px);
		left: calc(50% - 52px);
		background: url(../img/sublinhado-magenta.png) repeat 0 0;
		animation: moverDireita 2s linear infinite;
	}

}

#qLpercentage{
	display: table;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 200px !important;
	line-height: 160px;
}

.warning-chrome{
	position: absolute;
	display: block;
	left: calc(50% - 62px);
	bottom: 40px;
	width: 135px;

	img{
		display: block;
		margin: 0 auto 14px;
	}

	span{
		display: block;
		text-align: center;

		&.linha1{
			height: 12px;
			color: #222;
			font-family: "CooperBlackStd";
			font-size: 12px;
		}

		&.linha2{
			height: 18px;
			color: #000000;
			font-family: "CooperBlackStd";
			font-size: 16px;
		}
	}
}

.mCS-portuga.mCSB_scrollTools .mCSB_dragger{
	width: 10px;

	.mCSB_dragger_bar{
		width: 100%;
		border-radius: 0;
		background-color: #000000; 
	}
}

.mCS-portuga.mCSB_scrollTools .mCSB_draggerRail{
	width: 10px;
    margin: 0;
	border-radius: 0;
	background-color: #444;
} 

.mCSB_inside > .mCSB_container{
	margin: 0 !important;
}

.mCSB_scrollTools_vertical{
	width: 10px;
}

.mCSB_scrollTools{
	&:hover{
		&.mCSB_scrollTools_vertical{
			width: 19px !important;
		}

		.mCSB_dragger, .mCSB_draggerRail{
			width: 19px !important;
		}
	}
}

.fancybox-lock {
	.fancybox-overlay{
		overflow-y: hidden;
	}
}

.section{
	position: relative;
	display: table;
	width: 100%;

	&.cinza{
		background: #222;

		.swiper-container{
			.swiper-pagination-bullet-active{
				font-weight: bold;
				background: #000000;
			}
		}
	}

	&.magenta{
		background: #000000;
		.swiper-container{
			.swiper-pagination-bullet-active{
				background: #222;
			}
		}
	}

	&:not(#secao-home){
		.conteudo{
			display: table-cell;
			vertical-align: middle;
			width: 100%;
			margin: auto;
		}

		h2, h3{
			display: block;
			color: #fff;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			text-align: center;
			margin: 0;
		}

		h2{
			color: #fff;
			background: url(../img/bg-quadriculado-cinza.jpg) repeat;
		   -webkit-background-clip: text;
		   -webkit-text-fill-color: transparent;
		}

		h4{
			display: block;
			font-family: 'selfielight';
			text-align: center;
		}

		.sorriso{
			position: relative;		
			display: block;
			margin-left: auto;
			margin-right: auto;
		}

		.assinatura{
			position: relative;	
			margin: 15px auto 0;
			display: block;
		}

		&.cinza{
			.sorriso{
				&.magenta{
					display: none;
				}
			}
			.assinatura{
				&.magenta{
					display: none;
				}
			}
		}

		&.magenta{
			.sorriso{
				&.cinza{
					display: none;
				}
			}
			.assinatura{
				&.cinza{
					display: none;
				}
			}
		}
	}
}

ul{
	padding: 0;
	list-style: none;
}

img{
	display: block;
}

.layer{
	width: 100%;
	height: 100%;
}

.fancybox-lock{
	width: 100%;
}

#fancybox-loading, .fancybox-prev span, .fancybox-next span {
	background-image: url(../img/fancybox_sprite.png);
}

.fancybox-close{

}

#fancybox-loading div{
	background: url(../img/fancybox_loading.gif) center center no-repeat;
}

.fancybox-overlay{
	background-image: none;
	background: rgba(0,0,0,.8);

	.fechar{
		position: absolute;
		z-index: 2;
		display: block;
		width: 25px;
		height: 25px;
		right: 60px;
		top: 20px;

		span{
			position: absolute;
			top: 10px;
			display: block;
		    width: 25px;
		    height: 5px;
		    border-radius: 5px;
			background-color: rgb(255, 4, 104);
		}

		span:nth-child(1){
			left: 0;
			transform: rotate(45deg);
		}

		span:nth-child(2){
			right: 0;
			transform: rotate(-45deg);
		}
	}
}

.video{
	&.aberto{
		position: absolute;
		z-index: 9999;
		width: 100%;
		height: 100%;
	}
}

body{
	overflow: hidden;
}

#foto-post{
	display: none;
}

#interruptor{
	position: fixed;
	right: 40px;
	bottom: 40px;
	z-index: 4;
	display: block;
	width: 20px;
	height: 40px;
	text-indent: -15000px;

	&.magenta{
		background: url(../img/interruptor.png) no-repeat left center;
	}

	&.cinza{
		background: url(../img/interruptor.png) no-repeat right center;
	}
}

#whatsapp{
	position: fixed;
	right: 80px;
	bottom: 40px;
	width: 41px;
	height: 42px;
	text-indent: -999em;
	transition: all .5s ease;
	z-index: 4;
	overflow: hidden;
	border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
	&:before, &:after{
		content: "";
		display: block;
		position: absolute;
	}
	&:before{
		width: 187px;
		height: 42px;
		z-index: 0;
		background: url(../img/say-hi-to-me.png) no-repeat left top;
		top: 0;
		left: 0;
		opacity: 0;
		transition: all .5s ease;
	}
	&:after{
		width: 41px;
		height: 42px;
		background: url(../img/whatsapp.png) no-repeat right top;
		top: 0;
		right: 0;
		z-index: 10;
	}
	&:hover{
		width: 187px;
		&:before{
			opacity: 1;
		}
	}
}

#compartilhar{
	cursor: default;
	position: absolute;
	z-index: 5;
	display: none;
	width: 100%;
	height: 100%;
	border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
	background: #fff;
	transform: translateY(-100%);
	transform-origin: center bottom;
	background: #fff;

	.conteudo{
		position: relative;
		display: table;
		width: 100%;
		height: 100%;
		overflow: auto;
		background: none;
		opacity: 0;
	}

	.screenshot{
		display: none;
	}

	.nice{
		display: table;
    	position: relative;
    	margin: 0 auto 15px auto;

		&:hover{
			&:after{
				content: "";
				position: absolute;
				bottom: 0;
				display: block;
				width: 100%;
				height: 6px;
				background: url(../img/sublinhado-magenta.png) repeat;
				animation: moverDireita 1.5s linear infinite;
			}
		}

		&.active{
			&:after{
				content: "";
				position: absolute;
				bottom: 0;
				display: block;
				width: 100%;
				height: 6px;
				background: url(../img/sublinhado-magenta.png) repeat !important;
			}
		}
	}

	.bt-fechar{
		position: absolute;
		left: 40px;
		top: 40px;
	}

	.texto{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		img{
			display: block;
		}

		p{
			width: 770px;
			margin: auto;
			font-size: 30px;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			text-align: center;

			.magenta{
				position: relative;
				display: inline-block;
				color: #000000;
				text-decoration: none;

				&:hover{
					&:after{
						content: "";
						position: absolute;
						bottom: 0;
						display: block;
						width: 100%;
						height: 6px;
						background: url(../img/sublinhado-magenta.png) repeat;
						animation: moverDireita 1.5s linear infinite;
					}
				}

				&.active{
					&:after{
						content: "";
						position: absolute;
						bottom: 0;
						display: block;
						width: 100%;
						height: 6px;
						background: url(../img/sublinhado-magenta.png) repeat !important;
					}
				}
			}
		}
	}

	.redes-sociais{
		width: auto;
		display: inline-block;
		margin: 50px auto 0;
		ul{
			display: table;
			margin-bottom: 0;
			li{
				display: inline-block;
				margin-right: 50px;

				&:last-child{
					margin-right: 0;
				}

				a{
					background-image: url(../img/sprite-icones-sociais.png);
				    background-repeat: no-repeat;
				    display: block;
				}

				.email{
					width: 25px;
				    height: 19px;
				    margin: 1px 0 0 1px;
				    background-position: -85px -5px;

				    &:hover{
				    	background-position: -120px -5px;
				    }
				}

				.linkedin{
					width: 23px;
				    height: 22px;
				    background-position: -215px -5px;

				    &:hover{
					    background-position: -248px -5px;
				    }
				}

				.behance{
					width: 31px;
				    height: 19px;
				    background-position: -5px -5px;

				    &:hover{
					    background-position: -46px -5px;
				    }
				}

				.vimeo{
					width: 25px;
				    height: 22px;
				    background-position: -469px -5px;

				    &:hover{
					    background-position: -504px -5px;
				    }
				}

				.instagram{
					width: 22px;
				    height: 22px;
				    background-position: -153px -5px;

				    &:hover{
					    background-position: -185px -5px;
				    }
				}

				.twitter{
					width: 26px;
				    height: 22px;
				    background-position: -399px -5px;

				    &:hover{
					    background-position: -435px -5px;
				    }
				}

				.spotify{
					width: 22px;
				    height: 22px;
				    background-position: -279px -5px;

				    &:hover{
					    background-position: -311px -5px;
				    }
				}

				.trophy{
					width: 20px;
				    height: 22px;
				    background-position: -341px -5px;

				    &:hover{
					    background-position: -371px -5px;
				    }
				}
			}
		}

		
	}
	.bt-compartilhar{
		position: absolute;
		bottom: 40px;
		left: 50%;
		transform: translate(-50%,0);
		color: #000;
		font-family: 'robotomedium';
		font-size: 10px;
		text-align: center;
		text-decoration: none !important;
		padding-bottom: 16px;
		background: url(../img/sublinhado-magenta.png) repeat-x 0 24px !important;

		&:hover {
			text-decoration: none;
			animation: moverDireita2 2s linear infinite;
		}
	}

	.active {
		pointer-events: none;
        cursor: default;
		color: #000000;
		animation: moverDireita2 2s linear infinite, blink 1s ease-in-out infinite;
	}

	.sublinhado-magenta2{
		display: block;
		margin: 10px auto 0 auto;
	}
}

#menu{
	cursor: pointer;
	position: absolute;
	z-index: 6;
	left: 40px;
	top: 40px;

	a{
		display: block;
		transform-origin: center center;

		span{
			display: block;
			width: 25px;
			height: 5px;
			border-radius: 5px;
			background: #000;
			margin-bottom: 5px;
			transform-origin: center center;
		}

		.magenta{
			background: #ff0468 !important;
		}
	}
}

.placa{
	position: absolute;
	z-index: 4;

	a{
		text-decoration: none !important;
	}

	span{
		color: #333;
	}

	.onda{
		width: 52px;
	    height: 6px;
	    background: url(../img/sublinhado-magenta.png) repeat-x!important;
	    margin: 14px auto;
	}

	&:hover .onda{
		animation: moverDireita2 2s linear infinite;
	}
}

.link-secao{
	position: absolute;
	text-decoration: none;

	img{
		margin: auto;
	}

	span{
		display: block;
		color: #fff;
		font-family: 'robotomedium';
		text-align: center;
	}
}

.swiper-pagination{
	position: relative;
	bottom: initial;
}

.swiper-pagination-bullet{
	opacity: 1;
	margin: 0 !important;
	background: #fff;
}

#secao-home{
	overflow: hidden !important;
	position: relative;

	&.cinza{
		background-color: transparent;
		.portuga{
			&.magenta{
				display: none;
			}
		}
	}

	&.magenta{
		.portuga{
			&.cinza{
				display: none;
			}
		}
	}

	#foto{
		&.cinza{
			background: url(../img/bg-quadriculado-cinza.jpg) repeat;
		}

		&.magenta{
			background: url(../img/bg-quadriculado-magenta.jpg) repeat;
		}
	}

	.desenho{
		position: absolute;
		z-index: 2;
		left: calc(50% - 1280px) !important;
		top: calc(50% - 800px) !important;
		display: block;
		transition: transform .2s ease;

		cursor: url(../img/lapis.png) 99 99, auto;

		&.mouse-ativo{
			cursor: url(../img/lapis-clicked.png) 99 99, auto !important;
		}
	}

	.portuga{
		position: absolute;
		z-index: 1;
		transition: transform .2s ease;
	}

	.bracos{
		position: absolute;
		z-index: 3;
		transition: transform .2s ease;
	}

	.sorriso{
		opacity: 0;
	}

	.home-sorriso1, .home-sorriso2, .home-sorriso3, .home-sorriso4, .home-sorriso5, .placa{
		position: absolute;
		z-index: 4;
		transition: transform .2s ease;
	}

	.placa{
		.onda{
			margin: 10px auto;
		}
		.sublinhado-magenta1{
			display: block;
			margin: 10px auto 0 auto;
		}

		transition: transform .2s ease;
		width: 380px;
		left: calc(50% - 199px) !important;
    	top: calc(50% + 105px) !important;
		text-align: center;

		.titleSite{
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 50px;
			text-align: center;
			letter-spacing: -0.03em;
			line-height: 57px;
			margin: 0 auto;
			.pink{
				font-size: 88px;
			}
		}
		.subtitle{
			font-family: 'selfielight';
			font-size: 40px;
			text-align: center;
			color: #222222;
			margin: 0 auto;
			line-height: 35px;
		}
		p{
			display: block;
			font-family: 'robotomedium';
			font-size: 10px;
			text-align: center;
			text-transform: uppercase;
			margin: 0 auto;
			clear: both;
			&.black{
				position: relative;
				display: inline-block;
				span{
					font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
					font-size: 38.35px;
					color: #000000;
					position: absolute;
					top: -14px;
					right: -24px;
				}
			}
			&.pink{
				opacity: 0;
				transition: all 0.5s ease;
			}
		}
		.black{
			color: #222222;
		}
		.pink{
			color: #000000;
		}
		&:hover{
			p{
				&.pink{
					opacity: 1;
				}
			}
		}
	}
	
	.mouse{
		position: absolute;
		z-index: 2;

		.mouse-roda{
			opacity: 0;
		}
	}
	.share-button {
	    cursor: pointer;
	    position: absolute;
	    z-index: 999999;
	    right: 75px;
	    bottom: 40px;
	    width: 40px;
	    height: 40px;
	    -moz-border-radius: 20px;
	    -webkit-border-radius: 20px;
	    border-radius: 20px;
	    background: #fff;
	    padding: 10px 12px 0;
	    overflow: hidden;
	    transition: all .5s ease;
	    transform-origin: right center;

		.share-wrapper{
			width: 160px;
		}

		span{
		    width: 95px;
		    vertical-align: middle;
		    font-family: 'robotomedium';
		    text-transform: uppercase;
		    font-size: 10px;
		    margin-right: 11px;
		    margin-left: -96px;
		    transition: all .5s ease;
		    font-family: robotomedium;
		    text-align: right;
			&.normal{
				display: inline;
		    }
		    &.creating{
				display: none;
		    }
	    }

	    .share-icon {
		    background: url(../img/share-preto.png);
		    display: inline-block;
		    width: 17px;
		    height: 20px;
		    transition: all .5s ease;
		    vertical-align: middle;
		}

		&:hover {
			width: 155px;

			span{
			    margin: 0 15px;
			}

			.share-icon {
				background: url(../img/share-magenta.png);
			}
		}

		&.active {
			pointer-events: none;
	        cursor: default;
			width: 155px;

			span{
				&.normal{
					display: none;
				}
			    &.creating{
					display: inline;
					color: #000000;
					animation: blink 1s ease-in-out infinite;
				    margin: 0 12px;
		    	}
			}

			.share-icon {
				background: none;
			}
		}
	}
}

#secao-daniel-portuga{
	display: table;
	z-index: 3;

	.lapis-flecha{
		position: absolute;
		transform-origin: center center;
	}

	.conteudo{
		
		.sublinhado-branco1{
			margin: 15px auto;
		}

		.paises{
			display: block;
			color: #fff;
			font-family: 'robotomedium';
			text-align: center;
		}

		.swiper-container{
			p{
				color: #fff;
				font-family: 'robotolight';
				text-align: center;
			}
			b{
				font-family: 'robotomedium';
			}
		}
	}

	&.cinza{
		h3{
			color: #000000;
		}
		h4{
			color: #fff;
		}

		.link-the-beginning{
			&:after{
				background: url(../img/sublinhado-magenta.png) repeat-x 0 bottom !important;
			}
		}
	}

	&.magenta{
		h4{
			color: #222;
		}

		.link-the-beginning{
			&:after{
				background: url(../img/sublinhado-cinza.png) repeat-x 0 bottom !important;
			}
		}
	}
}

#secao-about-me{
	display: table;

	.blocos{
		display: table;
		margin: auto;
		
		.central{
			h2, h3{
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				text-align: center;
			}
		}
	}

	.item{
		float: left;
		cursor: pointer;
		.check{
			display: block;
			text-indent: -15000px;
			margin: auto;
		}

		.numero{
			display: block;
			color: #fff;
			font-family: 'robotoregular';
			text-align: center;
		}

		.cursivo{
			display: block;
			font-family: 'selfielight';
			text-align: center;
		}

		.linhas{
			width: 128px;
			height: 6px;
			display: block;
			position: absolute;
		}
		.linhatop{
			top: 0;
			left: 21px;
			background: url(../img/sublinhado-branco2.png) repeat-x left center;
		}
		.linhabot{
			bottom: 0;
			left: 20px;
			background: url(../img/sublinhado-cinza4.png) repeat-x left center;
		}

		p, a{
			color: #fff;
			font-family: 'robotolight';
			text-align: center;
			opacity: .2;
			line-height: 16px;
			font-size: 12px;
			&.menor{
				font-size: 10px;
				line-height: 13px;
			}
		}
		b{
			font-family: 'robotomedium';
			&.title{
				font-size: 12px;
				line-height: 16px;
			}
		}
		a.check{
			opacity: 1;
		}
		p{
			span{
				font-size: 10px;
				line-height: 13px;
				display: block;
			}
		}
		.linkawards{
			width: 100%;
			height: auto;
			position: relative;
			text-align: center;
			display: block;
			padding: 22px 0 21px 0;
			margin: 6px 0 15px 0;
			a{
				&:hover{
					text-decoration: none;
				}
			}
			span{
				color: #000000;
	  			font-weight: bold !important;
	  			font-family: 'robotomedium';
	  			text-decoration: none;
	  			font-size: 12px;
			}

		}
		.sublinhado-branco{
			margin: 6px auto 16px auto;
			&.menor{
				margin: 6px auto 15px auto;
			}
		}

		.sublinhado{
			margin: 15px auto;
			&.menor{
				margin: 19px auto 15px auto;
			}
		}

		&.ativo{
			cursor: initial;
		}
	}

	.link-reel{
		text-decoration: none;
	}

	&.cinza{
		h3{
			color: #000000;
		}

		h2{
			color: #fff;
		}
		
		.item{
			.cursivo{
				color: #fff;
			}

			&.ativo{
				.check{
					background: url(../img/check-cinza-ativo.png);
					background-size: cover;
				}
			}

			.check{
				background: url(../img/check-cinza-inativo.png);
				background-size: cover;

				&:hover{
					background: url(../img/check-cinza-ativo.png);
					background-size: cover;
				}
			}
		}

		.link-reel{
			&:after{
				background: url(../img/sublinhado-magenta.png) repeat-x 0 bottom !important;
			}
		}
	}

	&.magenta{
		h3{
			color: #222;
		}

		h2{
			color: #fff;
		}

		.item{
			&.ativo, &:hover{
				.cursivo{
					color: #222;
				}
				.linkawards{
					span{
						color: #222;
					}
					a{
						&:hover ~ .linhas{
							background: url(../img/sublinhado-branco2.png) repeat-x left center;
						}
					}

				}
			}

			&.ativo{
				.check{
					background: url(../img/check-branco-ativo.png);
					background-size: cover;
				}
			}

			.check{
				background: url(../img/check-branco-inativo.png);
				background-size: cover;

				&:hover{
					background: url(../img/check-branco-ativo.png);
					background-size: cover;
				}
			}
			
			.cursivo{
				color: #fff;
			}

			p{
				opacity: .5;
			}

			a{
				color: #fff;
			}

			.linkawards{
				a{
		  			&:hover + .linhatop, &:hover +.linhabot{
						animation: moverDireita2 2s linear infinite;
						
					}
				}
			}
		}

		.link-reel{
			&:after{
				background: url(../img/sublinhado-cinza.png) repeat-x 0 bottom !important;
			}
		}
	}
}

#secao-work-hard{
	display: table;
	position: relative;
	#swiper2{
		position: absolute;
		z-index: 1;
		width: 100%;
		transform: translateX(100%);

		.item{
			display: table;
			margin: auto;
		}
	}

	 @media all and (-ms-high-contrast:none)
     {
     #swiper2 {top: 330px !important;} /* IE10 */
     *::-ms-backdrop, #swiper2 {top: 330px !important;} /* IE11 */
     }

	.titulos{
		position: relative;
		z-index: 2;
		display: table;
		margin: -25px auto 0;
		pointer-events: none;

		.titulo1, .titulo2{
			float: left;
		}

		h4{
			clear: both;
			display: block;
			font-family: 'selfielight';
			line-height: 100%;
			text-align: center;
		}
	}
	
	.garrafa{
		position: relative;
		float: left;
		transform-origin: center bottom;

		&:nth-child(odd){
			transform: rotate(3deg);
		}

		&:nth-child(even){
			transform: rotate(-3deg);
		}

		&:last-child{
			margin-right: 0;
		}

		&:after{
			content: "";
			position: absolute;
			bottom: 0;
			display: block;
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-position: center bottom;
			transition: opacity .5s ease;
		}

		&:hover{
			&:after{
				opacity: 1 !important;
				transition: opacity .5s ease;
			}
		}

		.link-job{
			position: absolute;
			z-index: 2;
			display: block;
			width: 100%;
			// opacity: 0;
			transform: rotate(0deg);
			transform-origin: center center;
			
			.job{
				display: table;
				margin: auto;
				text-align: center;
				text-decoration: none;

				.descricao{
					display: table;
					margin: auto;

					span{
						display: table-cell;
						vertical-align: bottom;
						color: #fff;
						line-height: 17px;
						text-align: center;
					}
				}

				img{
					display: block;
				}

				.tipo{
					font-family: 'robotomedium';
				}
			}
		}
		&.locked{
			&:before{
				content: "";
				width: 12px;
				height: 16px;
				background-image: url(../img/lock_close.png);
				display: block;
				position: absolute;
				bottom: 10px;
				right: 10px;
			}
		}
	}

	.garrafa1{
		&:after{
			background-image: url(../img/garrafa1.png);
		}
	}

	.garrafa2{
		&:after{
			background-image: url(../img/garrafa2.png);
		}
	}

	.garrafa3{
		&:after{
			background-image: url(../img/garrafa3.png);
		}
		&.locked{
			&:before{
				right: 30px;
			}
		}
	}

	.garrafa4{
		&:after{
			background-image: url(../img/garrafa4.png);
		}
		&.locked{
			&:before{
				right: 20px;
			}
		}
	}

	.garrafa5{
		&:after{
			background-image: url(../img/garrafa5.png);
		}
	}

	#swiper2{
		position: absolute;
	}

	&.cinza{
		.titulos{
			h3{
				color: #000000;
			}

			h2{
				color: #fff;
			}

			h4{
				color: #fff;
			}
		}

		.garrafa{
			&:after{
				opacity: .3;
			}

			.link-job{
				.job{
					.tipo{
						opacity: .3;
						color: #fff;
						clear: both;
					}
				}
			}
		}
	}

	&.magenta{
		.titulos{
			h3{
				color: #222;
			}

			h2{
				color: #fff;
			}

			h4{
				color: #222;
			}
		}
		
		.garrafa{
			&:after{
				opacity: .5;
			}

			.link-job{
				.job{
					.tipo{
						opacity: 1;
						color: #fff;
					}
				}
			}
		}
	}
}

#map{
	position: absolute;

	.container{width: 1170px !important;}
}

.map img{
	vertical-align:top;
	position:relative;
	margin: auto;
}
.map .note{margin:-22px 76px 0;}
.map .map-holder{
	position:absolute;
	left:50%;
	top:0;
	width:894px;
	margin:3px 0 0 -467px;
}
.map{
	min-height:514px;
	padding:0 0 0 4px;
	position:relative;
}
.tanks-group{
	z-index:10;
	padding:0;
	margin:0;
	list-style:none;
	position:absolute;
	left:0;
	top:0;
	width:894px;
	height:446px;
}
.tanks-group li{
	position:absolute;
	width:34px;
	height:17px;
}
.tanks-group a{
	display:block;
	position:relative;
}
.tanks-group a.active .flag,
.tanks-group a:hover .flag{
	height:64px;
	background-position:0 2px;
}
.tanks-group .flag{
	background:url(../img/flag.png) no-repeat -60px 2px;
	width:62px;
	position:absolute;
	bottom:17px;
	left:10px;
	border-left:6px solid #fff;
	height:0;
	/* flag animation */
	transition:height 0.3s linear,background-position 0.3s linear 0.3s;
	-webkit-transition:height 0.3s linear,background-position 0.3s linear 0.3s;
	-o-transition:height 0.3s linear,background-position 0.3s linear 0.3s;
}
.tanks-group .short.tl{
	background-position:-28px -8px;
	height:11px;
}
.tanks-group .short.tr{
	background-position:0 -8px;
	height:11px;
	left:-10px;
}
.tanks-group .short.l{
	background-position:0 -22px;
	left:-11px;
}
.tanks-group .short.t{
	background-position:-22px 0;
	width:2px;
	height:17px;
	left:11px;
	margin:0 0 5px;
}
.tanks-group .bullet{
	background: url(../img/heart-bullet.png) no-repeat left top;
	width:15px;
	height:13px;
	position:absolute;
	left:10px;
	top:-3px;
}
.tanks-group .short{
	background:url(../img/bg-short.png) no-repeat 100% 50%;
	width:46px;
	height:46px;
	position:absolute;
	left:-13px;
	bottom:-9px;
	z-index:2;
}
.tanks-group li.tank-1{
	top:34.2%;
	left:30.9%;
}
.tanks-group li.tank-2{
	top:70.3%;
	left:31.1%;
}
.tanks-group li.tank-3{
	top:33.3%;
	left:45%;
}
.tanks-group li.tank-4{
	top:35.6%;
	left:50.4%;
}
.tanks-group li.tank-5{
	top:54.2%;
	left:68.3%;
}
.tanks-group li.tank-6{
	top:30.1%;
	left:71.3%;
}
.tanks-group li.tank-7{
	top:39%;
	left:74.8%;
}
.tanks-group li.tank-8{
	top:50.8%;
	left:79.2%;
}
.tanks-group li.tank-9{
	top:55.5%;
	left:75.6%;
}
.tanks-group li.tank-10{
	top:57.4%;
	left:85.4%;
}
.tanks-group li.tank-11{
	top:63.5%;
	left:77.1%;
}
.tanks-group li.tank-12{
	top:63.2%;
	left:83.4%;
}
.tanks-group li.tank-13{
	top:42%;
	left:80.3%;
}
.tanks-group li.tank-14{
	top:78.2%;
	left:84.5%;
}
.tanks-group li.tank-15{
	top:39.7%;
	left:85.3%;
}
.tanks-group li.tank-16{
	top:91.3%;
	left:94.8%;
}
.tanks-group li.tank-17{
	top:27.8%;
	left:23.99%;
}
.tanks-group li.tank-18{
	top:82.51%;
	left:29.58%;
}
.tanks-group li.tank-19{
	top: 40.2%;
    left: 45%;
}

.tank-holder{
	display: block;
}

.map .content{
	display: none !important;
	overflow:visible;
	text-align:left;
	position:absolute;
	left:0;
	top:-10px;
	width:240px;
}
.map-list{
	overflow:hidden;
	padding:11px 0 0;
}
.map-list ul:first-child{margin:0;}
.map-list ul li:before{
	content:'-';
	margin:0 3px 0 2px;
}
.map-list ul li{margin:0 0 2px;}
.one-column .map-list ul{
	-moz-column-count:1;
	-webkit-column-count:1;
	column-count:1;
}
.map-list ul{
	padding:0;
	list-style:none;
	margin:0;
	-moz-column-count:2;
	-webkit-column-count:2;
	column-count:2;
}
.actions{
	width:140px;
	z-index:12;
	position:absolute;
	right: calc(50% - 70px);
	bottom: 95px;
	padding:0;
	margin:0;
	list-style:none;
	font-size:14px;
}
.actions li{
	width:100%;
	overflow:hidden;
	margin:0 auto 3px;
}
.actions .btn-left,
.actions .btn-right{
	width:60px;
	float:left;
	margin:0 0 21px;
}
.actions .btn-right{margin-left:20px;}
.actions span:hover{
	text-decoration:none;
	border-color:#fff;
}
.actions span{
	cursor:pointer;
	background:url(../img/none.png);
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	// border:1px solid #ff66a3;
	border-radius:4px;
	height:55px;
	position:relative;
}
.actions .btn-space span{
	font-family: 'robotomedium';
	text-indent:0;
	text-align:center;
	text-transform: uppercase;
	line-height:53px;
}

.actions .btn-left span, .actions .btn-right span{
	border: 1px solid rgba(255,255,255,.5);
	border-radius:4px;
	background: #222;
}

.actions .btn-left span:after,
.actions .btn-right span:after{
	content:'';
	position:absolute;
	left:5px;
	top:4px;
	width:100%;
	height:100%;
	margin:-4px 0 0 -6px;
}
.actions .btn-left span:after{
	background:url(../img/bt-esquerda.png) no-repeat center;
}
.actions .btn-right span:after{
	background:url(../img/bt-direita.png) no-repeat center;
}
.actions .btn-right span:after{
	margin:-3px 0 0 -4px;
}

.fire{display:none;}
.boom .fire{display:block;}
.audio-holder{
	position:absolute;
	top:-9999px;
	left:-9999px;
}
.tanks-group a.active{z-index:2;}
.map .fire{
	z-index:-1;
	position:absolute;
	bottom:0;
	left:0;
}

#secao-map{
	overflow: hidden;

	.conteudo{
		position: relative;
    	z-index: 2;
	}

	h4{
		display: block;
		color: #fff;
		font-family: 'selfielight';
		text-align: center;
	}

	&.cinza{
		h3{
			color: #000000;
		}

		.map-holder{
			&>img{
				opacity: .3;
			}
		}
		
		.actions{
			.btn-space{
				span{
					color: #fff;
					background: #000000;
				}
			}
		}

		.fire{
			&.magenta{
				display: none;
			}
		}
	}

	&.magenta{
		h3{
			color: #222;
		}

		.map-holder{
			&>img{
				opacity: .5;
			}
		}

		.actions{
			.btn-left, .btn-right{
				span{
					background: #000000;
				}
			}

			.btn-space{
				span{
					color: #fff;
					background: #222;
				}
			}
		}

		.fire{
			&.cinza{
				display: none;
			}
		}
	}
}

#secao-lessons{
	.conteudo{
		position: relative;
		z-index: 2;
	}

	#swiper3{
		.swiper-slide{
			h4{
				margin: 0;
				color: #fff;
				font-family: 'selfielight';
				text-align: center;
			}

			span{
				display: block;
				color: #fff;
				font-family: 'robotomedium';
				text-align: center;
			}
		}

		.swiper-pagination{
			bottom: 0;

			.swiper-pagination-bullet{
				color: #fff;
				font-family: 'robotolight';
				background: none;
			}

			.swiper-pagination-bullet-active{
				font-family: 'robotomedium';
			}
		}
	}

	#nuvens{
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		left: 0;

		.nuvem{
			position: absolute;
		}

		.nuvem1{
			top: calc(50% - 40px);
			right: -52px;
		}

		.nuvem2{
			bottom: calc(50% - 160px);
			right: -62px;
		}

		.nuvem3{
			bottom: calc(50% - 150px);
			right: -242px;
		}

		.nuvem4{
			bottom: calc(50% - 170px);
			right: -376px;
		}

		.nuvem5{
			bottom: calc(50% - 600px);
			right: -937px;
		}
	}

	&.cinza{
		h3{
			color: #000000;
		}

		#swiper3{
			.swiper-slide{
				span{
					opacity: .3;
				}
			}

			.swiper-pagination-bullet-active{
				color: #000000;
			}
		}

		.nuvem-magenta{
			display: none;
		}
	}

	&.magenta{
		h3{
			color: #222;
		}

		#swiper3{
			.swiper-slide{
				span{
					opacity: .5;
				}
			}

			.swiper-pagination-bullet-active{
				color: #222;
			}
		}

		.nuvem-cinza{
			display: none;
		}
	}
}

#secao-contact{
	.conteudo{
		position: relative;
		z-index: 2;
	}

	a{
		display: table;
		text-decoration: none !important;
		margin: auto;

		&:hover{
			text-decoration: none;
		}
	}

	.sublinhado{
		margin: auto;
	}

	h4{
		clear: both;
		margin-bottom: 0;
		display: block;
		color: #fff;
		font-family: 'selfielight';
		line-height: 100%;
		text-align: center;
	}

	span{
		display: block;
		color: #fff;
		font-family: 'robotolight';
		text-align: center;
	}

	#coracoes{
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		left: 0;

		.coracao{
			position: absolute;
		}

		.coracao1{
			right: calc(50% - 500px);
			bottom: -53px;
		}

		.coracao2{
			left: calc(50% - 400px);
			bottom: -160px;
		}

		.coracao3{
			right: calc(50% - 520px);
			bottom: -328px;
		}

		.coracao4{
			left: calc(50% - 930px);
			bottom: -691px;
		}
	}

	&.cinza{
		.email, .cv{
			h3{
				color: #000000;
			}
		}

		.coracao-magenta{
			display: none;
		}

	}

	&.magenta{
		.email, .cv{
			h3{
				color: #222;
			}
		}

		.coracao-cinza{
			display: none;
		}

	}

}

#responsive{
	position: fixed;
	display: none;
	z-index: 9999;
    left: 0;
    top: 0;
	width: 100%;
	height: 100%;
	padding: 15px;
	box-sizing: border-box;
    background: #fff;

	.conteudo{
		display: table-cell;
		vertical-align: middle;
	}

	h2, h3, h4{
		margin: 0;
		text-align: center;
	}

	h2{
		color: #000000;
		font-size: 88px;
		font-family: "selfielight";
		line-height: 90px;
		text-align: center;
	}

	h3, h4{
		color: #222;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	h3{
		font-size: 70px;
		line-height: 50px;
	}

	h4{
		font-size: 42px;
		line-height: 34px;
	}

	p, span{
		font-size: 14px;
	}

	p{
		max-width: 392px;
		margin: 26px auto 0;
		color: #222;
		font-family: 'robotolight';
		text-align: center;
	}

	span{
		display: block;
		max-width: 235px;
		margin: 30px auto 0;
		color: #818181;
		font-family: 'robotolight_italic';
		text-align: center;
	}

	.sugestao{
		display: table;
		margin: 50px auto 0;
		text-decoration: none;

		.magenta, .cinza{
			display: block;
			margin: 0 auto;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			letter-spacing: -1px;
			text-align: center;
		}

		.magenta{
			color: #000000;
			font-size: 35px;
			line-height: 25px;
		}

		.cinza{
			color: #222;
			font-size: 51px;
			line-height: 40px;
		}

		.sublinhado{
			display: block;
			margin: 0 auto;
		}
	}
}

#mobile{
	position: fixed;
	display: none;
	z-index: 9990;
    left: 0;
    top: 0;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	box-sizing: border-box;

	#hero{
		text-align: center;
		background: #fff;
		padding: 0 9%;
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		h2, h3, h4{
			margin: 0;
			text-align: center;
		}
	
		h3, h2{
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			letter-spacing: -3px;
		}
	
		h3{
			font-size: 3.7em;
			line-height: 50px;
		}
	
		h2{
			font-size: 6.6em;
			line-height: 65px;
		}
	
		h4{
			font-family: 'selfielight';
			font-size: 3.2em;
			line-height: 40px;
		}
		.onda{
			width: 52px;
			height: 6px;
			background: url(../img/sublinhado-magenta.png) repeat-x!important;
			margin: 5px auto 0;
		}
		p{
			display: block;
			font-family: 'robotoregular';
			font-size: 20px;
			text-align: center;
			text-transform: uppercase;
			margin: 0 auto;
			clear: both;
			font-weight: bold;
			span{
				font-weight: normal;
			}
		}
		.black{
			color: #222222;
		}
		.pink{
			color: #000000;
		}
		.aviso{
			position: absolute;
			left: 50%;
			bottom: 4%;
			transform: translateX(-50%);
			font-size: 14px;
		}
	}

	#contentSite{
		text-align: center;
		background: #222;
		padding: 20% 9%;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.sugestao{
			text-decoration: none !important;
			display: inline-block;
			margin: 0 auto 60px;
			font-size: 14px;
			.onda{
				width: 100%;
				height: 6px;
				background: url(../img/sublinhado-magenta.png) repeat-x!important;
				margin: 0 auto;
			}
			.magenta, .branco{
				display: block;
				margin: 0 auto;
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				letter-spacing: -1px;
				text-align: center;
			}
	
			.magenta{
				color: #000000;
				font-size: 4em;
				line-height: 45px;
			}
	
			.branco{
				color: #fff;
				font-size: 7.42em;
				line-height: 65px;
			}
	
			.sublinhado{
				display: block;
				margin: 0 auto;
			}
		}
		.whats{
			display: inline-flex;
			flex-direction: column;
			margin: 0 auto;
			justify-content: center;
			img{
				margin: 0 auto 20px;
				width: 44%;
			}
			span{
				font-family: 'robotomedium';
				font-size: 1.38em;
				line-height: 1.38em;
				letter-spacing: 0.0012em;
				margin: 0 auto;
				color: #fff;
				text-transform: uppercase;
				white-space: nowrap;
			}
		}
		#work-hard{
			.titulos{
				flex-direction: column;
				justify-content: center;
				text-align: center;
				display: flex;
				.sugestao{
					&:first-child{
						margin-bottom: 10px;
					}
				}
			}
			.garrafa{
				width: 72%;
				max-width: 230px;
				margin: 0 auto 50px;
				display: block;
				position: relative;
				span,
				.logo{
					display: inline-block;
				}
				.logo{
					width: 100%;
					margin: 0 auto;
					position: relative;
					img{
						height: auto;
						margin: 0 auto;
						position: relative;
					}
				}
				.descricao,
				.logo{
					margin-bottom: 5px;
				}
				span{
					color: #fff;
					text-align: center;
					font-size: 30px;
					line-height: 40px;
				}
				.tipo{
					font-size: 22.38px;
					font-family: 'robotomedium';
					opacity: 0.3;
				}
				&:hover{
					text-decoration: none;
				}
				&.locked{
					&:before{
						content: "";
						width: 12px;
						height: 16px;
						background: url('../img/lock_close_mobile.png') no-repeat left top;
						background-size: contain;
						display: block;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						right: -40px;
						opacity: 0.1;
					}
				}
			}
		}
		@media screen and (min-width: 768px){
			#work-hard{
				.garrafa{
					width: 40%;
					max-width: 560px;
					&.locked{
						&:before{
							right: -41%;
						}
					}
				}
			}
		}
		@media screen and (min-width: 900px){
			padding: 9% 9% 6%;
			#work-hard{
				.garrafa{
					width: 30.1%;
				}
			}
		}
	}
	#footerMobile{
		text-align: center;
		background: #000000;
		padding: 80px 9%;
		position: relative;
		.acesso{
			margin: 0 auto;
			color: #fff;
			font-style: italic;
		}
		.redes-sociais{
			position: relative;
			margin: auto;
	
			ul{
				display: table;
				margin: 0 auto 20px;
	
				li{
					display: inline-block;
					margin-right: 30px;
	
					&:last-child{
						margin-right: 0;
					}
	
					a{
						background-repeat: no-repeat;
						background-size: contain;
						display: block;
					}
	
					.linkedin{
						width: 39px;
						height: 36px;
						background-image: url('../img/icone-linkedin-branco.png');
					}
	
					.instagram{
						width: 36px;
						height: 36px;
						background-image: url('../img/icone-instagram-branco.png');
					}
				}
			}
	
			.bt-compartilhar{
				display: block;
				margin-top: 40px;
				color: #000;
				font-family: 'robotomedium';
				font-size: 10px;
				text-align: center;
	
				&:hover{
					text-decoration: none;
				}
			}
		}
		@media screen and (min-width: 900px){
			padding: 9%;
		}
	}
}

#aboutMobile{
	background: #fff;
	width: 100%;
	height: 100%;
	.table{
		display: table;
		padding: 9% 9% 6%;
	}
	.content{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}

	h2, h3, h4{
		margin: 0;
		text-align: center;
	}

	h3, h2{
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		letter-spacing: -3px;
	}

	h3{
		color: #222;
		font-size: 3.7em;
		line-height: 50px;
	}

	h2{
		color: #000000;
		font-size: 6.6em;
		line-height: 65px;
	}

	h4{
		color: #222;
		font-family: 'selfielight';
		font-size: 3.2em;
		line-height: 40px;
	}

	p{
		font-family: 'robotolight';
		text-align: center;
		margin: 30px auto 0;
	}
	b{
		font-family: 'robotomedium';
	}
	.local{
		display: block;
		color: #222;
		font-family: 'robotomedium';
		font-weight: bold;
		text-align: center;
		font-size: 13px;
	}
	.onda{
		width: 52px;
		height: 6px;
		background: url('../img/sublinhado-magenta.png') repeat-x!important;
		margin: 0 auto 25px;
	}
	.text{
		padding-top: 30px;
		p{
			text-align: left;
			max-width: 340px;
		}
		
	}
	.underline{
		text-decoration: underline;
		color: #222;
	}
}
#about{
	position: absolute;
	display: none;
	z-index: 9997;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
	background: #fff;
	transform: translateY(-100%);
	transform-origin: center bottom;
	.loading{
		position: absolute;
		z-index: 2;
		display: block;
		width: 52px;
		height: 6px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: url(../img/sublinhado-magenta.png) repeat 0 0;
		animation: moverDireita 2s linear infinite;
	}
	.conteudo{
		position: relative;
		width: 100%;
		height: 100%;
		overflow: auto;
		background: none;
		opacity: 0;
	}

	.limite{
		display: block;
		width: 100%;
		max-width: 1170px;
		margin: auto;
		padding-top: 159px;
	}

	.ilustra{
		display: table;
		width: 100px;
		margin: 53px auto 0;
	}

	.logo{
		display: table;
		margin: 13px auto 6px;
	}
	.fechar{
		position: absolute;
		z-index: 2;
		display: block;
		width: 25px;
		height: 25px;
		right: 60px;
		top: 40px;
		opacity: 0;

		span{
			position: absolute;
			top: 10px;
			display: block;
		    width: 25px;
		    height: 5px;
		    border-radius: 5px;
			background-color: rgb(255, 4, 104);
		}

		span:nth-child(1){
			left: 0;
			transform: rotate(45deg);
		}

		span:nth-child(2){
			right: 0;
			transform: rotate(-45deg);
		}
	}
	.subir{
		display: table;
		width: 100%;
		height: 200px;
		background: url(../img/bg-quadriculado-cinza.jpg);

		.link-topo{
			display: table-cell;
			vertical-align: middle;
			
			a{
				display: table;
				width: 80px;
				height: 80px;
				margin: auto;
				border-radius: 100%;
				background: #fff;

				&:hover{
					img{
						transform: translateY(-10px);
						transition: transform .5s ease;
					}
				}

				img{
					display: block;
					margin: 23px auto;
					transform: translateY(0);
					transition: transform .5s ease;
				}
			}
		}
	}
	@media screen and (max-width: 1024px){
		.fechar{
			right: 30px;
			top: 30px;
		}
	}
}
#projeto{
	position: absolute;
	display: none;
	z-index: 9997;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
	background: #fff;
	transform: translateY(-100%);
	transform-origin: center bottom;

	.loading{
		position: absolute;
		z-index: 2;
		display: block;
		width: 52px;
		height: 6px;
		top: calc(50% - 3px);
		left: calc(50% - 52px);
		background: url(../img/sublinhado-magenta.png) repeat 0 0;
		animation: moverDireita 2s linear infinite;
	}

	.conteudo{
		position: relative;
		width: 100%;
		height: 100%;
		overflow: auto;
		background: none;
		opacity: 0;
	}

	.limite{
		display: block;
		width: 100%;
		max-width: 1170px;
		margin: auto;
		padding-top: 159px;
	}

	.ilustra{
		display: table;
		width: 100px;
		margin: 53px auto 0;
	}

	.logo{
		display: table;
		margin: 13px auto 6px;
	}
	
	h2, h3{
		text-align: center;
	}

	h2{
		height: 43px;
		margin: 0;
		color: #000000;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 47px;
	}

	span{
		display: block;
	}
	
	.tipo, .role span{
		font-family: 'robotomedium';
		font-weight: bold;
		font-size: 10px;
		text-align: center;
		text-transform: uppercase;
	}

	.tipo{
		margin-top: 10px;
	}

	h3{
		display: table;
		height: 38px;
		margin: 0 auto 2px;
		color: #000;
		font-family: 'selfielight';
		font-size: 40px;
		line-height: 48px;

		&:after{
			content: "";
			display: block;
			width: 48px;
			height: 6px;
			margin: 0 auto 5px;
			background: url(../img/sublinhado-magenta.png) repeat-x 0 bottom !important;
		}

		&:hover{
			&:after{
				text-decoration: none;
				animation: moverDireita2 2s linear infinite;
			}
		}
	}

	.sublinhado{
		display: table;
		margin: 12px auto;
	}

	.role{
		display: table;
		margin: auto;
	}

	.descricao{
		display: block;
		max-width: 720px;
		margin: 30px auto 38px;

		p{
			text-align: center;
			font-size: 11.5px;
			letter-spacing: 0px;
			line-height: 16.5px;
		}
	}

	.video{
		display: block;
		width: 100%;
		height: 56%;
		margin: 0 auto;
		&.withImg{
			width: 100%;
			height: auto;
			img{
				width: 100%;
			}
			iframe{
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				margin: 0;
			}
		}
		.wImg{
			width: 100%;
			height: 0;
			padding-top: 56%;
			position: relative;
		}
		iframe{
			width: 100%;
			height: 658px;
			margin-bottom: 80px;
		}
	}

	.premios{
		display: table;
		margin: 0 auto 80px;

		.box{
			display: inline-block;
			margin-right: 77px;

			&:last-child{
				margin-right: 0;
			}
			
			.logo{
				.celula{
					display: table-cell;
					vertical-align: middle;
					height: 90px;

					img{
						max-height: 90px;
					}
				}
			}

			.titulo{
				margin-top: 20px;

				span{
					display: block;
					font-family: 'robotomedium';
					font-weight: bold;
					font-size: 10px; 
					text-align: center;
					text-transform: uppercase;
				}
			}
		}
	}

	.imagem{
		display: block;
		width: 100%;
		margin: auto;

		img{
			max-width: 100%;
			margin-bottom: 80px;
		}

		.nomargin{
		  	margin-bottom: 0;
		}
		&.center{
			img{
				margin: 0 auto 80px;
			}
		}
	}

	.smartphones{
		display: table;
		margin: 0 auto 80px;

		li{
			display: inline-block;
			width: 229px;
			height: 466px;
			margin-right: 110px;
			background: url(../img/celular.png) no-repeat;

			&:last-child{
				margin-right: 0;
			}

			img, video{
				width: 208px;
				height: 370px;
				display: block;
    			margin: 48px 0 0 10px;
			}
		}
	}

	.download{
		display: table;
		margin: 80px auto;
		
		a{
			display: inline-block;
			text-decoration: none !important;

			&:first-child{
				margin-right: 40px;
			}

			&:hover{
				span{
					&:after{
						text-decoration: none;
	    				animation: moverDireita2 1s linear infinite;
					}
				}
			}
		}

		.store{
			display: table;
			margin: auto;
		}

		span{
			margin-top: 14px;
			display: table;
			color: #000;
			font-family: 'robotomedium';
			font-weight: bold;
			font-size: 10px;
			text-align: center;
			text-transform: uppercase;
			text-decoration: none !important;
			
			&:after{
				content: "";
			    display: block;
			    width: 100%;
			    height: 6px;
			    margin: 5px auto 5px;
			    background: url(../img/sublinhado-magenta.png) repeat-x center bottom !important;
			}
		}

		.sublinhado{
			display: block;
			margin: 10px auto 0;
		}
	}

	.subir{
		display: table;
		width: 100%;
		height: 200px;
		background: url(../img/bg-quadriculado-cinza.jpg);

		.link-topo{
			display: table-cell;
			vertical-align: middle;
			
			a{
				display: table;
				width: 80px;
				height: 80px;
				margin: auto;
				border-radius: 100%;
				background: #fff;

				&:hover{
					img{
						transform: translateY(-10px);
						transition: transform .5s ease;
					}
				}

				img{
					display: block;
					margin: 23px auto;
					transform: translateY(0);
					transition: transform .5s ease;
				}
			}
		}
	}

	.fechar{
		position: absolute;
		z-index: 2;
		display: block;
		width: 25px;
		height: 25px;
		right: 60px;
		top: 40px;
		opacity: 0;

		span{
			position: absolute;
			top: 10px;
			display: block;
		    width: 25px;
		    height: 5px;
		    border-radius: 5px;
			background-color: rgb(255, 4, 104);
		}

		span:nth-child(1){
			left: 0;
			transform: rotate(45deg);
		}

		span:nth-child(2){
			right: 0;
			transform: rotate(-45deg);
		}
	}
	#swipergallery,
	#swipergallery2{
		margin-bottom: 80px;
		&.swiper-container{
			.swiper-pagination-bullet{
				width: 15px;
				height: 15px;
				margin: 36px 7px 0 7px !important;
				background: #000;
				opacity: 0.1;
				display: inline-block;
			}
			.swiper-pagination-bullet-active{
				font-weight: bold;
    			background: #000000;
    			opacity: 1;
    		}
		}
		.swiper-slide{
			img{
				max-width: 100%;
			}
		}
	}
	.mCSB_scrollTools_vertical{
		z-index: 50;
	}
	.m160{
		margin-bottom: 160px;
	}
	.m120{
		margin-bottom: 120px;
	}
	.m80{
		margin-bottom: 80px;
	}
	.m60{
		margin-bottom: 60px;
	}
	
	@media screen and (max-width: 1024px){
		.loading{
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.limite{
			padding-top: 90px;
		}
		h2{
			padding: 0 40px;
			font-size: 30px;
			height: 28px;
		}
		.descricao{
			padding: 0 40px;
		}
		.fechar{
			top: 30px;
			right: 30px;
		}
		.video{
			height: 0;
			padding-top: 56%;
			position: relative;
			margin-bottom: 60px;
			&.withImg{
				height: auto;
				padding-top: 0;
			}
			iframe{
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				margin: 0;
			}
		}
		.m160{
			margin-bottom: 80px;
		}
		.m120{
			margin-bottom: 60px;
		}
		.m80{
			margin-bottom: 40px;
		}
		.m60{
			margin-bottom: 30px;
		}
		
	}
}

//DESKTOP EXTRA-PEQUENO
@media screen and (min-width: 992px) and (max-height: 660px){
	#secao-home{
		.portuga{
			width: 1000px;
			left: calc(50% - 519px) !important;
			top: calc(50% - 350px) !important;
		}

		.bracos{
			width: 405px;
			left: calc(50% - 217px) !important;
    		top: calc(50% + 10px) !important;
		}

		.home-sorriso1, .home-sorriso2, .home-sorriso5{
			width: 170px;
			left: calc(50% - 179px) !important;
			top: calc(50% + 85px) !important;
		}

		.home-sorriso3, .home-sorriso4{
			width: 130px;
			left: calc(50% - 164px) !important;
			top: calc(50% + 85px) !important;
		}

		.placa{
			top: calc(50% + 59px) !important;
			left: calc(50% - 206px) !important;
			.titleSite{
				font-size: 30px;
				line-height: 34px;
				.pink{
					font-size: 53px;
				}
			}
			.subtitle{
				font-size: 24px;
				line-height: 21px;
			}
			
		}

		.mouse{
			left: calc(50% - 109px);
			top: calc(50% + 260px);

			.mouse-roda{
				position: absolute;
	            left: calc(50% - 1px);
	            top: 8px;
	            transform: translateY(0) scale(1,.5);
	            transform-origin: center bottom;
			}

			.mouse-caixa{
				width: 30px;
				height: 50px;
			}
		}
	}
}

@media screen and (max-height: 730px){
	#secao-daniel-portuga{
		.conteudo{
			transform: translateY(-50px);
		}
	}
}
@media screen and (max-height: 700px){
	#secao-home{
		.portuga{
			width: 1000px;
			left: calc(50% - 427px) !important;
			top: calc(50% - 350px) !important;
		}

		.bracos{
			width: 405px;
			left: calc(50% - 217px) !important;
    		top: calc(50% + 10px) !important;
		}

		.home-sorriso1, .home-sorriso2, .home-sorriso5{
			width: 170px;
			left: calc(50% - 94px) !important;
			top: calc(50% + 85px) !important;
		}

		.home-sorriso3, .home-sorriso4{
			width: 130px;
			left: calc(50% - 76px) !important;
			top: calc(50% + 85px) !important;
		}

		.mouse{
			left: calc(50% - 16.5px);
			top: calc(50% + 260px);

			.mouse-roda{
				position: absolute;
	            left: calc(50% - 1px);
	            top: 8px;
	            transform: translateY(0) scale(1,.5);
	            transform-origin: center bottom;
			}

			.mouse-caixa{
				width: 30px;
				height: 50px;
			}
		}

		.placa{
			top: calc(50% + 59px) !important;
			left: calc(50% - 206px) !important;
			.titleSite{
				font-size: 30px;
				line-height: 34px;
				.pink{
					font-size: 53px;
				}
			}
			.subtitle{
				font-size: 24px;
				line-height: 21px;
			}
			
		}
	}
}

// DESKTOP PEQUENO
@media screen and (min-width: 992px) and (min-height:700px) and (max-height: 899px){

	#secao-home{
		.portuga{
			width: 1200px;
			left: calc(50% - 506px) !important;
			top: calc(50% - 405px) !important;
		}

		.bracos{
			width: 488px;
			left: calc(50% - 252px) !important;
    		top: calc(50% + 21px) !important;
		}

		.home-sorriso1, .home-sorriso2, .home-sorriso5{
			width: 200px;
			left: calc(50% - 95px) !important;
			top: calc(50% + 110px) !important;
		}

		.home-sorriso3, .home-sorriso4{
			width: 160px;
			left: calc(50% - 79px) !important;
			top: calc(50% + 110px) !important;
		}

		.placa{
			top: calc(50% + 80px) !important;
    		left: calc(50% - 199px) !important;
			.titleSite{
				font-size: 40px;
				line-height: 45px;
				.pink{
					font-size: 70px;
				}
			}
			.subtitle{
				font-size: 32px;
				line-height: 28px;
			}
			.onda{
				margin: 10px auto;
			}
			
		}

		.mouse{
			left: calc(50% - 15px);
			top: calc(50% + 315px);

			.mouse-roda{
				position: absolute;
	            left: calc(50% - 1px);
	            top: 8px;
	            transform: translateY(0) scale(1,.5);
	            transform-origin: center bottom;
			}

			.mouse-caixa{
				width: 30px;
				height: 50px;
			}
		}
	}

}

// DESKTOP GRANDE
@media screen and (min-width: 992px) and (min-height: 900px){
	#secao-home{
		.portuga{
			width: 1532px;
			left: calc(50% - 641px) !important;
			top: calc(50% - 528px) !important;
		}

		.bracos{
			width: 600px;
			width: 623px;
			left: calc(50% - 320px) !important;
    		top: calc(50% + 20px) !important;
		}

		.home-sorriso1, .home-sorriso2{
			left: calc(50% - 134px) !important;
			top: calc(50% + 125px) !important;
		}

		.home-sorriso3{
			left: calc(50% - 85px) !important;
			top: calc(50% + 125px) !important;
		}

		.home-sorriso4{
			left: calc(50% - 108px) !important;
			top: calc(50% + 125px) !important;
		}

		.home-sorriso5{
			left: calc(50% - 119px) !important;
			top: calc(50% + 125px) !important;
		}

		.home-sorriso1, .home-sorriso2, .home-sorriso3, .home-sorriso4, .home-sorriso5{
			opacity: 0;
		}

		.mouse{
			left: calc(50% - 15px);
			top: calc(50% + 400px);

			.mouse-roda{
				position: absolute;
	            left: calc(50% - 1px);
	            top: 8px;
	            transform: translateY(0) scale(1,.5);
	            transform-origin: center bottom;
			}

			.mouse-caixa{
				width: 30px;
				height: 50px;
			}
		}
	}
}

// DESKTOP GERAL

	.link-secao{
		bottom: 22px;

		span{
			font-size: 10px;
		}

		.sublinhado{
			margin-top: 8px;
		}
	}

	.section{
		.swiper-pagination{
			.swiper-pagination-bullet{
				width: 15px;
				height: 15px;
			}
		}

		&:not(#secao-home){
			h3{
				font-size: 50px;
			}

			h2{
				font-size: 100px;
			}

			h4{
				font-size: 40px;
			}
		}
	}

	#secao-daniel-portuga{
		.lapis-flecha{
			top: calc(50% - 125px);

			&.esquerda{
				left: -810px;
			}

			&.direita{
				right: 100%;
			}
		}

		.conteudo{
			.sorriso{
				margin-bottom: 20px;
			}

			h2{
				height: 86px;
			}

			h3{
				height: 38px;
			}

			h4{
				height: 33px;
				margin: 0;
			}

			.sublinhado-branco1{
				margin-top: 15px;
			}

			.paises{
				margin-top: 5px;
				margin-bottom: 20px;
				font-size: 10px;
			}

			.swiper-container{
				width: 487px;

				p{
					font-size: 12px;
				}

				.swiper-pagination-bullet{
					width: 15px;
					height: 15px;
					margin: 36px 7px 0 7px !important;
				}
			}
		}
		
		.link-the-beginning{
			left: calc(50% - 40px);
			text-decoration: none;

			&:after{
				content: "";
				display: block;
				height: 6px;
				margin: 8px auto;
			}

			&:hover{
				&:after{
					text-decoration: none;
					animation: moverDireita2 2s linear infinite;
				}

				.mamadeira{
					&:after{
						animation: encher 1s linear forwards;
					}
				}
			}

			.mamadeira{
				overflow: hidden;
				width: 22px;
				position: relative;
				margin: 0 auto 8px;

				&:after{
					content: "";
					position: absolute;
					bottom: 0;
					z-index: -1;
					display: block;
					width: 30px;
					height: 0;
					background: #fff;
					animation: esvaziar 1s ease forwards;
				}
			}
		}
	}

	#secao-about-me{
		.sorriso{
			margin-bottom: 0;
		}

		.esquerda, .central, .direita{
			float: left;
		}

		.central{
			margin: 0 50px;

			h3{
				height: 38px;
			}

			h2,.titulo-me{
				margin-top: 10px;
				height: 53px;
    			line-height: 63px;
			}
		}

		.item{
			margin-right: 50px;

			&:last-child{
				margin-right: 0;
			}

			&.ativo, &:hover{
				.cursivo{
					color: #000000;
				}

				p, a{
					opacity: 1;
				}

				.sublinhado-cinza4{
					display: none;
				}

				.sublinhado-branco3{
					display: block;
				}
				.linhabot{
					background: url(../img/sublinhado-branco3.png) repeat-x left center;
				}
				.linkawards{
					a{
						text-decoration: none;
			  			&:hover ~ .linhas{
							animation: moverDireita2 2s linear infinite;
							
						}
					}

				}
				.check{
					background: url(../img/check-cinza-ativo.png);
					background-size: cover;
				}
						
			}

			.check{
				width: 130px;
				height: 130px;
			}

			.numero{
				margin: 20px 0 4px 0;
				font-size: 50px;
				line-height: 38px;
			}

			.cursivo{
				font-size: 40px;
				line-height: 40px;
			}

			p, a{
				font-size: 12px;
				margin-bottom: 0;
				color: #fff;
				display: block;	
			}		

			.sublinhado-branco3{
				display: none;
			}
		}

		.sorrisos{
			height: 167px;
		}

		.link-reel{
			left: calc(50% - 85px);

			&.link-sexy{
				left: calc(50% + 25px);
			}
			
			.play{
				position: relative;
				margin-bottom: 8px;
			}

			.icone-play{
				position: absolute;
				left: calc(50% - 7px);
				top: calc(50% - 11px);
				width: 17px;
				height: 22px;
				transform-origin: center center;
			}

			.icone-lock{
				position: absolute;
				left: calc(50% - 8px);
				top: calc(50% - 12.5px);
				width: 16px;
				height: 21px;
				transform-origin: center center;
			}

			&:after{
				content: "";
				display: block;
				height: 6px;
				margin: 8px auto;
			}

			&:hover{
				&:after{
					text-decoration: none;
					animation: moverDireita2 2s linear infinite;
				}

				.mamadeira{
					&:after{
						animation: encher 1s linear forwards;
					}
				}
			}
		}
	}

	#secao-work-hard{
		overflow: hidden;

		.conteudo{
			transform: translateY(-155px);
		}

		.titulos{
			.titulo1{
				margin-right: 40px;
			}

			h2{
				height: 72px;
    			line-height: 100px;
			}

			h3{
				height: 38px;
			}

			h4{
				margin-top: 8px;
				margin-bottom: 0;
				font-size: 40px;
			}
		}

		#swiper2{
			top: calc(50% - 160px);

			.swiper-pagination{
				bottom: 78px;

				.swiper-pagination-bullet{
					margin: 0 7px !important
				}
			}

			.swiper-pagination-bullets{
				width: auto;
				display: table;
				margin: auto;
			}
		}

		.garrafa{
			margin-right: 30px;

			.link-job{
				bottom: 122px;
				
				.job{
					.descricao{
						height: 40px;

						span{
							font-size: 13px;
						}
					}
					
					.logo{
						display: table;
						height: 59px;
						margin: 0 auto;
						padding: 5px 0;
						.content{
							display: table-cell;
  							vertical-align: middle;
  							text-align: center;
						}
					}

					.tipo{
						font-size: 10px;
					}
				}
			}
		}

		.garrafa1{
			width: 202px;
			height: 496px;
			margin-top: 114px;
		}

		.garrafa2{
			width: 189px;
			height: 492px;
			margin-top: 118px;
		}

		.garrafa3{
			width: 177px;
			height: 406px;
			margin-top: 204px;
		}

		.garrafa4{
			width: 211px;
			height: 610px;
		}

		.garrafa5{
			width: 177px;
			height: 556px;
			margin-top: 54px;
		}
	}

	#secao-map{
		.conteudo{
			transform: translateY(-205px);

			h2{
				font-size: 70px !important;
				height: 66px;
			}

			h3{
				margin: -3px 0 7px;
				font-size: 46px !important;
				height: 32px;
				letter-spacing: -0.03em;
			}

			h4{
				margin: 0;
				font-size: 40px;
			}
		}

		#map{
		    left: calc(50% - 585px);
		    top: calc(50% - 170px);
		}

		.actions{
			.btn-space{
				span{
					font-size: 10px;
				}
			}
		}
	}

	#secao-lessons{
		h2{
			&:nth-of-type(1){
				margin-top: 20px !important;
				height: 70px;
    				line-height: 65px;
			}

			&:nth-of-type(2){
				height: 63px;
    			line-height: 82px;
			}
		}

		.titulo-my{
			margin-top: 20px !important;
		}

		h3{
			margin-top: 5px !important;
			line-height: 50px;
    		height: 36px;
		}

		#swiper3{
			width: 600px;
			margin-top: 35px;
			
			.swiper-slide{
				h4{
					font-size: 40px;
				}

				span{
					font-size: 10px;
				}
			}

			.swiper-pagination{
				margin-top: 40px;

				.swiper-pagination-bullet{
					width: 40px;
					height: 25px;
					font-size: 12px;
					line-height: 25px;
					border-radius: 0;
				}

				.swiper-pagination-bullet-active{
					background: url(../img/nuvem-paginacao.png) no-repeat;
				}
			}
		}
	}

	#secao-contact{
		h4{
			font-size: 46px;
		}

		span{
			font-size: 12px;
		}

		.email{
			h3{
				margin-top: 20px;
				font-size: 56px;
				line-height: 57px;
    			height: 40px;
			}

			h2,.titulo-me{
				margin: 10px auto 20px;
				font-size: 100px;
				height: 53px;
    			line-height: 63px;
			}
		}

		.cv{
			h2,.titulo-cv{
				margin-top: 20px;
				font-size: 128px;
				height: 70px;
    			line-height: 80px;
			}

			h3{
				margin-top: 5px;
				font-size: 30px;
				height: 23px;
			}
		}

		h4{
			margin-top: 18px;
		}

	}


@media screen and (max-width: 767px){
	#qLtempOverlay{
		display: none;
	}

	#mobile{
		display: block;
		#hero{
			h2{
				font-size: 4.6em;
				line-height: 40px;
			}
	
			h3{
				font-size: 3em;
			}
	
			h4{
				font-size: 2.18em;
				line-height: 50px;
			}
	
			p, span{
				max-width: 420px;
				font-size: 1.1em;
			}
	
			p{
				margin: 0 auto;
				&.black{
					margin-top: 20px;
				}
			}
			.aviso{
				font-size: 0.77em;
			}
	
		}
		
		// #contentSite{
		// 	.sugestao{
		// 		.magenta, .cinza{
		// 			display: block;
		// 			margin: 0 auto;
		// 			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		// 			letter-spacing: -1px;
		// 			text-align: center;
		// 		}
	
		// 		.magenta{
		// 			color: #000000;
		// 			font-size: 4.42em;
		// 			line-height: 45px;
		// 		}
	
		// 		.cinza{
		// 			height: 51px;
		// 			color: #222;
		// 			font-size: 7.42em;
		// 			line-height: 65px;
		// 		}
	
		// 		.sublinhado{
		// 			display: block;
		// 			margin: 0 auto;
		// 		}
		// 		.onda{
		// 			margin-top: 10px;
		// 		}
		// 	}
		// }

		// #footerMobile{
		// 	.acesso{
		// 		margin-bottom: 51px;
		// 	}
	
		// 	.redes-sociais{
		// 		position: fixed;
		// 		left: 0;
		// 		bottom: 0;
		// 		width: 100%;
		// 		background: #fff;
	
		// 		ul{
		// 			display: table;
		// 			margin: 10px auto 0;
	
		// 			li{
		// 				display: inline-block;
		// 				margin-right: 1em;
	
		// 				&:last-child{
		// 					margin-right: 0;
		// 				}
	
		// 				a{
		// 					transform: scale(.8);
		// 					background-repeat: no-repeat;
		// 					display: block;
		// 				}
	
		// 				.email{
		// 					width: 42px;
		// 					height: 30px;
		// 					margin: 1px 0 0 1px;
		// 					background-image: url(../img/icone-email.png);
		// 				}
	
		// 				.linkedin{
		// 					width: 39px;
		// 					height: 36px;
		// 					background-image: url(../img/icone-linkedin.png);
		// 				}
	
		// 				.behance{
		// 					width: 52px;
		// 					height: 32px;
		// 					background-image: url(../img/icone-behance.png);
		// 				}
	
		// 				.instagram{
		// 					width: 36px;
		// 					height: 36px;
		// 					background-image: url(../img/icone-instagram.png);
		// 				}
	
		// 				.twitter{
		// 					width: 43px;
		// 					height: 36px;
		// 					background-image: url(../img/icone-twitter.png);
		// 				}
		// 			}
		// 		}
	
		// 		.bt-compartilhar{
		// 			display: block;
		// 			margin-top: 40px;
		// 			color: #000;
		// 			font-family: 'robotomedium';
		// 			font-size: 10px;
		// 			text-align: center;
	
		// 			&:hover{
		// 				text-decoration: none;
		// 			}
		// 		}
		// 	}
		// }
	}
	#aboutMobile{
		.content{
			padding: 70px 0 0;
		}
		h2{
			font-size: 4.6em;
			line-height: 40px;
		}

		h3{
			font-size: 3em;
		}

		h4{
			font-size: 2.18em;
			line-height: 50px;
		}

		p{
			font-size: 1.1em;
			&.small{
				font-size: 1em;
				color: #7f7f7f;
				font-family: 'robotoregular';
				line-height: 1.5em;
			}
		}

		p{
			max-width: 420px;
			margin: 30px auto 0;
			color: #222;
			
		}
	}
}

@media screen and (min-width: 768px) and (max-width: 991px){
	#qLtempOverlay{
		display: none;
	}

	#mobile{
		#hero{
			p, span{
				max-width: 420px;
				font-size: 1.1em;
			}
	
			p{
				margin: 23px auto 0;
			}
			.aviso{
				font-size: 0.77em;
			}
	
			span{
				margin: 25px auto 0;
			}
		}
		#aboutMobile{
			.content{
				padding: 70px 0 0;
			}
			p, span{
				max-width: 420px;
				font-size: 1.1em;
			}
	
			p{
				margin: 23px auto 0;
				color: #222;
			}
	
			span{
				margin: 25px auto 0;
			}
			
		}

		// #footerMobile{
		// 	.redes-sociais{
		// 		position: relative;
		// 		margin: auto;
	
		// 		ul{
		// 			display: table;
		// 			margin: 65px auto 0;
	
		// 			li{
		// 				display: inline-block;
		// 				margin-right: 50px;
	
		// 				&:last-child{
		// 					margin-right: 0;
		// 				}
	
		// 				a{
		// 					background-repeat: no-repeat;
		// 					display: block;
		// 				}
	
		// 				.email{
		// 					width: 42px;
		// 					height: 30px;
		// 					margin: 1px 0 0 1px;
		// 					background-image: url(../img/icone-email.png);
		// 				}
	
		// 				.linkedin{
		// 					width: 39px;
		// 					height: 36px;
		// 					background-image: url(../img/icone-linkedin.png);
		// 				}
	
		// 				.behance{
		// 					width: 52px;
		// 					height: 32px;
		// 					background-image: url(../img/icone-behance.png);
		// 				}
	
		// 				.instagram{
		// 					width: 36px;
		// 					height: 36px;
		// 					background-image: url(../img/icone-instagram.png);
		// 				}
	
		// 				.twitter{
		// 					width: 43px;
		// 					height: 36px;
		// 					background-image: url(../img/icone-twitter.png);
		// 				}
		// 			}
		// 		}
	
		// 		.bt-compartilhar{
		// 			display: block;
		// 			margin-top: 40px;
		// 			color: #000;
		// 			font-family: 'robotomedium';
		// 			font-size: 10px;
		// 			text-align: center;
	
		// 			&:hover{
		// 				text-decoration: none;
		// 			}
		// 		}
		// 	}
		// }
	}
}

@media screen and (max-width: 1075px){
	#secao-work-hard {
		.garrafa{
			margin-right: 10px;
		}
	}
}


/* Extra styles for the cancel button */
.loginbtn{
  	width: 75px;
  	height: 98px;
  	padding: 0;
  	border: none;
  	background: url(../img/bt-login.png) no-repeat left top;
  	margin: 20px auto 0;
  	text-indent: -999em;
	@media (min-width: 1024px){
		margin: 0 auto 20px;
	}
}

span.psw {
  	float: right;
  	padding-top: 16px;
}

/* The Modal (background) */
#id01{
  	display: none; /* Hidden by default */
  	position: fixed; /* Stay in place */
  	z-index: 9997; /* Sit on top */
  	left: 0;
  	top: 0;
  	width: 100%;
  	height: 100%;
	bottom: auto;
	background-color: rgba(34,34,34,0.8);
}

/* Modal Content/Box */
.modal-content {
  	background-color: #000000;
	width: 80%;
	// min-height: 80%;
  	max-width: 500px; /* Full width */
  	max-height: 550px; /* Full height */
  	position: absolute;
  	left: 50%;
  	top: 50%;
  	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
  	box-shadow: none;
  	text-align: center;
  	padding: 20px;
	display: flex;
	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
  	h3{
  		font-size: 30px !important;
  		line-height: 30px;
  		display: block;
	    color: #fff;
	    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	    text-align: center;
	    margin: 0;
  	}
  	p, a{
  		color: #fff;
  		font-size: 12px;
  		font-family: 'robotoregular';
  		line-height: 16px;
  	}
  	a{
  		font-weight: bold;
  	}
  	p{
  		margin-bottom: 10px;
		br{
			display: none;
		}
  	}

  	/* Full-width input fields */
	input[type=password] {
	  	width: 253px;
		padding: 0 0 20px;
		margin: 0 auto 10px;
	  	display: inline-block;
	  	border: none;
	  	background: transparent url(../img/bg-waves.png) no-repeat bottom left;
	  	text-align: center;
	  	font-size: 30px;
	  	font-family: 'robotomedium';
	  	color: #fff;
	}
	::-webkit-input-placeholder {
	  	color: #fff;
	  	font-weight: 900;
	}
	::-moz-placeholder {
	  	color: #fff;
	  	font-weight: 900;
	}
	:-ms-input-placeholder {
	  	color: #fff;
	  	font-weight: 900;
	}
	:-moz-placeholder {
	  	color: #fff;
	  	font-weight: 900;
	}
	#errolog{
		font-family: 'robotolight_italic';
		font-size: 12px;
		line-height: 16px;
		margin-bottom: 20px;
	}
	&.mover{
	  	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
	  	transform: translate3d(-50%, -50%, 0);
	  	backface-visibility: hidden;
	  	perspective: 1000px;
	}
	.content-form{
		width: 100%;
	}
	@media screen and (min-width: 768px){
		display: block;
		h3{
			font-size: 40px !important;
			line-height: 40px;
		}
		p{
			margin-bottom: 30px;
			br{
				display: block;
			}
		}
		input[type=password] {
			padding: 20px 0;
	  		margin: 0 auto 30px;
		}
	}
}

/* The Close Button (x) */
.bt-close{
  	position: absolute;
  	right: 20px;
  	top: 20px;
  	width: 25px;
  	height: 25px;
  	text-indent: -999em;
	z-index: 2;
	display: block;
	span{
		position: absolute;
		top: 10px;
		display: block;
	    width: 25px;
	    height: 5px;
	    border-radius: 5px;
		background-color: rgb(255, 255, 255);
	}
	span:nth-child(1){
		left: 0;
		transform: rotate(45deg);
	}

	span:nth-child(2){
		right: 0;
		transform: rotate(-45deg);
	}
}

.bt-close:hover,
.bt-close:focus {
  	cursor: pointer;
}

/* Add Zoom Animation */
.animate {
	-webkit-animation: animatezoom 0.6s;
  	animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
 	from {-webkit-transform: translate(-50%, -50%) scale(0)} 
  	to {-webkit-transform: translate(-50%, -50%) scale(1)}
}
  
@keyframes animatezoom {
  	from {transform: translate(-50%, -50%) scale(0)} 
  	to {transform: translate(-50%, -50%) scale(1)}
}

.animate2 {
  	animation: animatebg 0.6s
}

@keyframes animatebg {
  	from {background-color: rgba(0,0,0,0)} 
  	to {background-color: rgba(34,34,34,0.8)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}


@keyframes shake {
  10%, 90% {
    transform: translate3d(calc(-50% - 1px), -50%, 0);
  }
  
  20%, 80% {
    transform: translate3d(calc(-50% + 2px), -50%, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(calc(-50% - 4px), -50%, 0);
  }

  40%, 60% {
    transform: translate3d(calc(-50% + 4px), -50%, 0);
  }
}
@media only screen and (orientation: landscape) {
	#aboutMobile{
		.content{
			padding: 0;
		}
	}
}