@charset "utf-8";
/* CSS Document */

@font-face {
	/*font-family: WT Gothic;
	src: url(../fonts/WTGothicGX.ttf);*/
	font-family: Montserrat;
	src: url(../fonts/Montserrat-VariableFont_wght.ttf);
}
@font-face {
	/*font-family: WT Gothic Light;
	src: url(../fonts/WTGothic-Light.ttf);*/
}


body{
	margin:0;
	font-family: Montserrat;	
	overflow-x:hidden;
	font-size: 1.4vw;
}
a{
	text-decoration:none;
	color: inherit;	
}
.linha{
	position:relative;
	float:left;
	width:100%;	
}
.div33{
	position:relative;
	float:left;
	width:33.33%;	
}
.div46{
	position:relative;
	float:left;
	width:46%;
	margin: 0 2%;
}
.stuartdir{
	position:relative;
	float:left;
	width:30%;
	margin-right: 10%;
}
.stuartesq{
	position: relative;
    float: left;
    width: 40%;
    padding: 0px 4% 0 14%;
}
.div60{
	position:relative;
	float:left;
	width:60%;
	margin: auto 20%;
}
.div50{
	position:relative;
	float:left;
	width:50%;
}
.centro{
	text-align:center;	
}
.div90{
	position:relative;
	float:left;
	width:90%;	
}
.div80{
	position:relative;
	float:left;
	width:80%;	
}
.div70{
	position:relative;
	float:left;
	width:70%;	
}
.div36{
	position:relative;
	float:left;
	width:36%;
	margin: auto 1%;	
}
.div25{
	position:relative;
	float:left;
	width:25%;	
}
.div20{
	position:relative;
	float:left;
	width:20%;
	margin: auto 2.5%;	
}
.div18{
	position:relative;
	float:left;
	width:16%;
	margin: auto 1%;	
}
.div46{
	position:relative;
	float:left;
	width:30%;
	margin-left:12%;
	margin-right: 4%;	
}
.top10{
	margin-top:10px;	
}
.top20{
	margin-top:20px;	
}
.top50{
	margin-top:50px;	
}
.margem5{
	margin:5%;	
}

.logo{
	position:absolute;
	left: 20px;
	top:20px;
	width: 120px;	
}
.logo img{
	width:100%;	
}


.mkgrid{
	position: relative;
	float:left;
	width: 56%;
	height: 43vw;
	margin:130px 2%;
	box-shadow: 0px 0px 10px #CCC;	
}



.gditem{
	cursor:pointer;	
	background-color:#F8F8F8;
	/*margin: 2.5px;*/
}

.container {
  height: 150.53vw;
  margin: 0;
}
.containerteam .gditem {
	background-color:#000;	
}
.containerteam {
	/*height: 47vw;*/	
}
.qgridteam{
	position:relative;
	float:left;
	width: 30%;
	margin: 2vw 35% auto 35%;	
	
}

/* For presentation only, no need to copy the code below */

.container *, .containerteam * {
  position: relative;
}
.container{
	 margin-top: -3px;	
}

.container *:after, .containerteam *:after {
  /*content:attr(class);*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;

}
.gditem{
	overflow:hidden;	
}
.gditem img, .gditem video{
	width: 140%;
    margin-top: -0.7vw;
    margin-left: -18%;
    object-fit: cover;	
}

.topo{
	position:fixed;
	width:100%;
	top:0;
	left:0;
	height: 60px;
	z-index: 50;
}
.icomenu{
	position:absolute;
	margin-left: 2%;
	margin-top: 20px;
	cursor:pointer;	
}

.fechamenu{
	position: absolute;
    left: 20px;
    top: 15px;
    font-size: 1.5em;
    color: #777;
	cursor: pointer;
}

.menu{
	position:fixed;
	width: 40%;
	left: -40%;
	background-color: #dfdfdf;
	top: 0px;
	padding-top: 40px;
	height: 100%;
	z-index: 100;
}
.menup2{
	position:fixed;
	width: 60%;
	right: -60%;
	top: 0px;
	padding-top: 40px;
	height: 100%;
	z-index: 100;
}
.itemmenu{
	position:relative;
	float:left;
	width: 80%;
	margin: 15px 0 15px 20%;
	font-size: 2em;
	cursor: pointer;	
}
.itemmenu:hover{
	color: #555;	
}
.loader{
	position:fixed;
	width:100%;
	height: 100%;
	background-color: #fbfbfb;	
	z-index: 500;
}
.imgloader{
	position:fixed;
	height:5vw;
	left: 50%; 	
	margin-left: -50px;
	top: 50vh;
	margin-top: -2.5vw;
}


.mascara{
	position:fixed;
	width:100%;
	height: 100%;
	top:0;
	left:0;
	background-color: #ffffffd1;
	z-index: 40;	
	display: none;
}
.logo{
	position: absolute;
	left: 50%;
	margin-left: -60px;	
}
.fullbanner, .fullbannermobile, .dtqproj{
	overflow:hidden;
	height: 100vh;
	width: 100vw;
	z-index: 10;	
	background-color: #000;
}
.fullbannermobile{
	display:none;	
}
.dtqproj img{
	min-width: 100%;
	min-height: 100%;	
}
.fullbanner img{
	display:none;
	position: absolute;
	object-fit: cover;
}

.redes{
	position:relative;
	float:right;
	margin-right: 2%;
    margin-top: 20px;	
}
.redes img{
	height: 20px;	
}
.textofull{
	font-family: Montserrat;
	position: absolute;
	width:100%;
	text-align: center;
	z-index: 10;
	color:#FFF;
	font-size: 7em;
	z-index:50;
	opacity:0;	
}
.ptsfull{
	position:absolute;
	right: 3%;
	top: 45vh;
	width: 1px;	
	z-index:50;
}
.ptfull{
	position:absolute;
	width: 2px;
	height: 2px;
	background-color: #FFF;	
}
.imgfull{
	min-width: 100vw;
    min-height: 100vh;
    position: absolute;	
}
.gdnomeproj{
    position: absolute;
    width: 100%;
    z-index: 10;
    top: 0;
    text-align: center;
    color: #FFF;	
}
.mascaraproj{
	position:absolute;
	width:100%;
	height: 100%;
	left:0;
	top:0;
	background-color: #00000061;
	display:none;	
}
.bgcinza{
	background-color:#d7d7d7;	
}
.logoabv{
	text-align:center;	
}
.logoabv img{
	height: 3vw;
    margin-top: 4.5vw;	
}
.circulo{
	text-align: center;
    position: relative;
    float: left;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    /* width: 23vw; */
    margin-left: 2.5vw;
}
.circulo img, .circulo video{
	height: 23vw;	
}
.stuart{
	position: relative;
    width: 60%;
    /* margin: 15px 23%; */
    font-size: 0.8em;
    line-height: 1.4em;
    margin-top: 5vw;
}
.titstuart{
	font-size: 3em;
    line-height: 1em;
    margin-top: -0.5vw;
}
.qstuart{
	padding: 10vh 0;
	margin-top: -3px;
	z-index: 10;	
}
.mascarafull{
	position: absolute;
	width:100%;
	height: 100vh;
	background: radial-gradient(#00000020, #00000050);
	z-index:30;
}
.titulosecao{
	font-size: 2.5em;
	/*margin-top: 7vw;*/
	line-height: 0.66em;
    margin-bottom: 2vw;	
}
.qservices{
	/*padding-bottom: 70px;*/
	padding: 10vh 0;
	background-color:#fbfbfb;
	z-index: 30;
}
.qservico{
	position:relative;
	float: left;
	width: 33%;
	font-size:0.8em;
	/*height: 13vw;*/
}
.qservico img{
	height: 5vw;
	margin: 20px 0;	
}
.qteam{
	padding: 10vh 0;
	background-color:#000;
	z-index: 40;	
}
.titteam{
	text-align:center;
	color:#FFF;	
}
.mascarap{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height: 100%;
	z-index:10;
}
.openteam{
	position: fixed;
    left: -30%;
    top: 0;
    width: 30%;
    height: 100%;
    opacity: 0.9;
	overflow: hidden;	
}
.openteam img{
	height:100%;
	filter: grayscale(100%);	
}
.opennameteam{
	position: fixed;
	width: 20%;
    right: -20%;
    top: 48vh;
    color: #FFF;
		
}
.rodape{
	background-color: #cfcfcf;
    padding: 10vh 0;
    font-size: 0.8em;	
}
.logordp{
	margin-left: 20%;
	padding: 5px 0;
}
.logordp img{
	width: 40%;
}
.rdpcontact, .rdpadress{
	font-size:0.8em;	
}
.rdpadress{
	margin-top: 13vw;	
}
.itemrdpmenu{
	color:#FFF;
	position:relative;
	float:left;
	width:100%;
	margin-bottom: 1vw;
	font-size: 2em;
	cursor:pointer;
}
.menurdp{
	margin-top: -6px;	
}
.redesrdp{
	position: relative;
    float: right;
    margin-right: 20%;	
}
.copyright{
	position: absolute;
    bottom: 11.4vw;
    right: 5%;
    color: #FFF;
    font-size: 0.8em;
}
.qrdp{
	height: 100%;	
}
.descproj{
	font-size: 0.7em;
	line-height:2em;	
}
.nomeproj{
	    position: absolute;
    width: 100%;
    text-align: center;
    color: #FFF;
    font-size: 2.5em;
    top: 48vh;
	opacity:0;
	z-index: 35;	
}
.qproxproj{
	    position: relative;
    width: 26vw;
    height: 12vw;
    background-color: #ff0303;
    z-index: 100;
    float: right;
    margin-top: -14vw;
	margin-right: 2vw;
	box-shadow: 0px 0px 20px #8d8d8d;
}
.qdirect{
	position:absolute;
	right: 0px;
	width: 30%;
	height: 100%;
	background-color: #CCC;
	text-align:center;
}
.qsetasdirect{
	margin-top: 2.8vw;	
}
.qdirect img{
	width: 35%;
}
.linhaprox, .linhaant{
	margin: 1vw 0;
	cursor: pointer;	
}
.txtnext{
	text-align: center;
		font-size: 1.2em;
		    padding: 5vh 0 2vh;	
}
.nomenext{
	position:absolute;
	width: 100%;
	text-align:center;
	margin-top: 31vh;	
	color:#FFF;
	text-transform: uppercase;
	font-size: 1.4em;
	z-index: 40;
}
.imgproxproj{
	    height: 70vh;
    width: 100%;
    overflow: hidden;	
}

.fechateam{
	position:fixed;
	right: 40px;
	top:40px;
	font-weight: 600;
	font-size: 5em;
	color:#FFF;
	display:none;
	z-index: 100;	
}
.fullbanner{
		display:block;   
   }
   .fullbannermobile{
		display:none;   
   }
   .contact{
		position: fixed;
		width:100%;
		height: 100%;
		background-color: #000;
		color: #FFF; 
		z-index: 300;
		display:none;  
   }
   .qcontact1{
		position:absolute;
		left: 0;
		width: 40%;   
   }
   .qcontact2{
		position:absolute;
		right:0;
		width: 60%;  
		outline: 1px solid #FFF; 
		height: 101vh;
		margin-top: -1px;
		margin-left:1px;
   }
   .ctt1{
		position:relative;
		float:left;
		width: 100%;
		height: 60vh;
		outline: 1px solid #FFF;   
   }
   .ctt2{
		position:relative;
		float:left;
		width: 100%;
		height: 40vh;   
		outline: 1px solid #FFF;
		margin-top:1px; 
   }
   .sayhi{
	 font-size: 4.8em;
	 font-weight:600;
	 position:absolute;
	 left: 9.2%; 
	 top: 4vh;  
	 line-height:1em;
   }
   .cttmailfone{
		position:absolute;
		bottom: 7vh;
		left: 10%; 
		font-size: 0.6em; 
		line-height: 1.4vw;
   }
   .cttadress{
	   position:absolute;
	   left:10%;
	   top: 7vh;
	  font-size: 0.6em; 
		line-height: 1.4vw; 
		
   }
   textarea{
		color:#FFF;
		height: 15vh;
		font-size:14px;   
   }
   input[type=text]{
	   color:#FFF;
   }
   .inputcontact{
		width:100%;
		background-color: #000;
		border:none;
		padding-bottom: 10px;
		font-size: 13px;
		font-family: inherit;  
   }
   textarea:focus, input:focus {
    box-shadow: 0 0 0 0;
    outline: 0;
	}
	.brdforainput{
		position:relative;
		float:left;
		height: 2px;
		background-color:#FFF;	
	}
	.preenchinput{
		position:relative;
		float:left;
		height: 2px;
		width:0;
		background-color:#50CB8D;	
	}
   .formcontact{
		position:relative;
		float:left;
		width: 60%;
		margin-left:20%;
		margin-top: 15vh;
		   
   }
   .linhainput{
	       width: 76%;
    margin: 0 12%;
    margin-top: 14vh;   
   }
   .btnenvia{
	 padding: 10px 50px;
	 background-color:#FFF;
	 color:#000;
	 border-radius: 30px;
	 border:none; 
	 font-size: 13px;
	 font-weight:600;
	 font-family:inherit;
	 cursor:pointer; 
   }
   .closecontact{
	position:absolute;
	right: 30px;
	top:20px;
	padding: 10px;
	color:#999;
	font-size: 15px; 
	cursor:pointer;
	z-index:20;  
   }
   .linkredes, .redes{
		font-size: 0;  
		margin-left: 15px; 
   }
   .imgredes, .imgredesrdp{
		position: relative;
		float: right;
		/* width: 20px; */
		height: 25px;
		margin-left: 15px;   
   }
   .qredesrdp{
		top: 0.2vw; 
		margin-right: 5%;  
   }
   .qredesrdp svg{
		fill: #FFF;   
   }
   .mascarafull2{
	   position: absolute;
	width:100%;
	background: radial-gradient(#00000020, #00000050);
	z-index:30;
		height: 70vh;	
	}
	
	.imgredes{
		fill:#FFFFFF;	
	}
	.mascaraflex{
	  cursor: pointer;
	  font-size: 0.8em;
	  position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  right: 0;
	  background: rgba(0,0,0,0.8);
	  display: -webkit-flex;
	  display: flex;
	  -webkit-justify-content: center;
	  justify-content: center;
	  -webkit-align-items: center;
	  align-items: center;
	  color: #fff;
	  opacity: 0;
	  transition: all 300ms ease-in;
	  text-align:center;	
}
.homegrid{
	background-color: #d7d7d7;
	margin-top: -3px;
	margin-left: -3px;	
}
.imageLegend{
	position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #000;
    color: #FFF;
    text-align: center;
    padding: 15px 0;	
}
.nomeprojeto, .clienteproj{
	flex-wrap: wrap;
    flex-direction: row;
}
.fullImage2{
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.9);
		cursor: -webkit-zoom-out;
		display: none;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
}
.linha2servicos{
	margin-top:50px;
}
.clienteproj{
	font-size: 0.8em;
	line-height: 2em;
}

@media (max-width: 680px){
	.mascaraflex, .imageLegend{
		font-size:1.8em;	
	}
	.linha2servicos{
		margin-top:0px;
	}
	.qredesrdp{
		top: 0.2vw;
		left: 50%;
		position: relative;
		float: left;
	}
}
	
@media only screen and (max-width: 1200px) {
	.qcontact1, .qcontact2, .ctt1, .ctt2{
		position: relative;
		float:left;
		width:100%;
		margin: 0;
		outline: none;	
		font-size: 0.7em;
	}
	.ctt1, .ctt2{
		height: auto;	
	}
	.cttmailfone {
		position: absolute;
		top: 4.3vh;
		left: 35%;
		font-size: 2.6em;
		line-height: 1.4em;
	}
	.cttadress {
		position: absolute;
		top: 10vh;
		left: 35%;
		font-size: 2.6em;
		line-height: 1.4em;
	}
	.linhainput {
		margin-top: 6vh;
	}
	.formcontact{
		margin-top: 20vh;	
	}
	.sayhi {
    	font-size: 7em;
	}
	.closecontact{
		font-size: 4em;
	}
	.linhafone{
		margin: 0 10%;
   		margin-top: 4vh;
    	width: 80%;	
	}
	.div60{
		width: 90%;
    	margin: auto 5%;
	}
	.qgridteam{
		width: 50%;
    	margin: 2vw 25% auto 25%;
	}
}

@media only screen and (max-width: 1000px) {
	body{
		font-size: 2.4vw;
	}
	.stuartdir{
		width:100%;
	}
	.stuartesq{
		position: relative;
		float: left;
		width: 80%;
		padding: 0px 10%;
	}
	.titstuart{
		font-size: 2em;
	}
	.stuart{
		width: 100%;
	}
	.circulo, .logoabv{
		margin-top: 6vw;
   }
   .logoabv img {
    height: 4vw;
    margin-top: 0;
	}
	.circulo{
		width: 100%;
    margin-left: 0;
    border-radius: unset;
	}
}
@media only screen and (min-width: 1000px) {
	.copyright{
    	bottom: 6.5vw;
	}
}
@media only screen and (min-width: 1200px) {
	.copyright{
    	bottom: 7vw;
	}
}
@media only screen and (min-width: 1360px) {
	.copyright{
    	bottom: 7.4vw;
	}
}
@media only screen and (min-width: 1900px) {
	.copyright{
    	bottom: 5.7vw;
	}
}

@media only screen and (max-width: 600px) {
    .stuartdir{
		width:100%;
	}
	.stuartesq{
		position: relative;
		float: left;
		width: 80%;
		padding: 0px 10%;
	}
	.titstuart{
		font-size: 3em;
	}
	
	.serv1{
		margin-top: 40px;
	}
	.fechamenu{
		display: none;
	}
	.fullbanner{
		display:none;   
   }
   .fullbannermobile{
		display:block;   
   }
   .imgfull{
	height: 100vh;
   }
   
   .icomenu img{
		width: 40px;
		margin-left:10px;   
   }
   .redes{
		margin-right: 20px;   
   }
   .logo img{
		text-align:center;
		width: 80%;   
   }
   .textofull{
		font-size: 6em;   
   }
   .mascaraproj{
		display: block;   
   }
   .gdnomeproj{
		font-size: 3.6em;   
   }
   .div33,.div25{
		width: 100%;
		margin-top: 40px;   
   }
   .contactadress{
	margin-top:20px;
   }
   .qstuart {
    padding: 10vh 0;
	z-index: 20;
   }
   .stuart{ 
		font-size: 16px;
		width: 70%;
    	margin: 9vw 15% 0 15%; 
		text-align: left;
		
   }
   .circulo, .logoabv{
		margin-top: 9vw;
   }
   .qservico{
		width: 100%;
		font-size: 16px;
		height: 40vw;
		   
   }
   .qservico img {
    	height: 15vw;
   }
   .titulosecao {
		font-size: 5em;
	}
	.qgridteam{
		width: 90%;
    	margin: 40px 5% auto 5%;	
	}
	.containerteam {
   		 /*height: 150vw;*/
	}
	.div25{
		text-align:center;	
		font-size: 2em;
	}
	.logordp{
		margin-left: 0;	
	}
	.logordp img{
		width: 32%;
	}
	.rdpcontact, .rdpadress{
		font-size: 16px;	
	}
	.openteam{
		width: 100%;
		z-index: 80;
		left: -100%;
	}
	.opennameteam{
		font-size: 3em;	
		right: -100%;
	}
	.menu{
		width: 70%;
		left: -70%;	
	}
	.menup2{
		width: 30%;
		right: -30%;	
	}
	.itemmenu, .itemrdpmenu{
		font-size: 2.2em;	
	}
	.fechamenu{
		font-size: 3em;	
	}
	.nomeproj{
		font-size: 5em;	
	}
	.div46,.div18{
		width: 80%;
		margin: 5vw 10%;	
	}
	.descproj{
		font-size: 3em;
		line-height:normal;	
	}
	.logoabv img{
		height: 7vw;
		margin-top: 0;	
	}
	.circulo img, .circulo video {
		height: 35vw;
    	margin-top: 2vw;
	}
	.copyright{
		position: absolute;
		width: 100%;
		left: 0px;
		text-align: center;
		bottom: 20px;
		right: auto;
		color: #FFF;
		font-size: 1.5em;	
	}
	.imgloader {
		position: fixed;
		height: 16vw;
		left: 50%;
		margin-left: -8vw;
		top: 50vh;
		margin-top: -8vw;
	}
	.qredesrdp svg {
		top: 11px;
	}
	.imgredes, .imgredesrdp {
		height: 20px;
		margin-left: 10px;	
	}
	.menurdp{
		margin: 45px 0;	
	}
	.txtnext{
	    font-size: 4em;	
	}
	.imgproxproj, .imgproxproj .mascarafull2{
		height: 50vw;	
	}
	.nomenext{
		margin-top: 22vw;
    	font-size: 3.2em;	
	}
	
	
   
}