@import url('https://fonts.googleapis.com/css?family=Anton|Pangolin|Roboto|Playpen+Sans');

*{
	box-sizing:border-box;
	font-family: "Playpen Sans", cursive;

}

#menuprincipal{
	width:100%;
	z-index:100;

}

#menuprincipal #barLogo{
	height:100px;
	width:100%;
	background:#ededed;
}

#logoTops{
	padding-top:10px;
	position:absolute;
	left:10px;
}

#barLogo>div{
	position:relative;
}

#barLogo #osMenus{
	position:absolute;
	margin-top:20px;
	right:10px;
}


#topo{
	height:200px;
	position:relative;
}

#topo #logo{
	width:235px;
	height:auto;
	position:absolute;
}

#topo #lateralDireitaTop{
	width:100%;
	padding-left:235px;
	position:relative;
}

#topo #lateralDireitaTop #TopTel{
	overflow:hidden;
}

#topo #lateralDireitaTop #TopTel .celular{
	float:left;
	background:url(images/icon_whatsapp.png) no-repeat left;
	padding-left:40px;
	height:40px;
	line-height:40px;
}

#topo #lateralDireitaTop #TopTel .telefone{
	float:left;
	margin-left:20px;
}


#topo #lateralDireitaTop #menuTop{
	background:url(images/fdmenu.png) repeat-x;
	height:56px;
	border:solid 2px #d4d9bb;;
	border-radius:10px;
	overflow:hidden;
	line-height:56px;
	width:615px;
	position:absolute;
	right:10px;
}

#topo #lateralDireitaTop #menuTop .itemMenu{
	line-height:56px;
	float:left;
	width:25%;
	text-align:center;
}

#topo #lateralDireitaTop #menuTop .itemMenu:hover{
	background:rgba(0,0,0,0.2);
}

.itemMenus{
	float:left;

}
.itemMenus a{
	display:block;
	text-decoration:none;
	color:#000;
	background:rgba(0,0,0,0.0);
	padding:0 20px 0 20px;
	height:60px;
	line-height:60px;
	
}
.itemMenus a:hover{
	background:rgba(0,0,0,1.00);
	color:#ffffff;
	
	
}

/* Sub Menu 1º Categorias */
.itemMenus .subMenu{
	position:absolute;
	background:#f7cb16;
	width:300px;
	padding:10px;
	z-index:10000;
	display:none;
	border:rgba(9,9,9,1.00) solid 1px; margin-top:0px;

}

.itemMenus .subMenu a:hover{
	background:rgba(0,0,0,1.00);
	color:#000;
	

}



.itemMenus:hover > .subMenu{
	display:block;
	background:rgba(0, 0, 0, 0.9);
	border-radius:0 0 0 0;
	
}



.secundarias{
	display:none;
}

 .subMenu .titCat{
	padding:10px; margin:10px; background:#fff;
	font-family: "Playpen Sans", cursive;
	
	
}

 .subMenu  .titsubCat{
	font-family: "Playpen Sans", cursive;
	border-bottom:solid #ff0000 1px;
}

.subMenu .titsubCat a{
	line-height:46px;
	height:46px;
	border-bottom:dotted 1px rgba(0,0,0,1.00);
	color:rgba(255,255,255,1.00);
	font-size:12px;	
}

.subMenu .titsubCat a:hover{
	background:#ff0000;
	color:ffffff;
	
	}

/* Sub Menu 2º Categorias */
.subMenu .titsubCat[rel] .subMenudoMenu{
	position:absolute;
	margin-left:320px;
	margin-top:-50px;
	display:none;
	background:rgba(0,0,0,0.90);
	width:235px;
	border:solid #ff0000 1px;
	font-size:14px;
	
}

.subMenu .titsubCat[rel]:hover .subMenudoMenu{
	display:block;
}


.iformduo1{
	float:left;
	width:70%;
}
.iformduo2{
	float:left;
	width:30%;
}



.bloco4{
	width:25%;
	float:left;
	color: #000;
	
	


}

.images3{
	width:33.33%;
	float:left;
	height:auto;


}


.images4{
	width:25%;
	float:left;
	height:auto;


}



.bloco5{
	width:20%;
	float:left;


}


.bloco6{
	width:16.66%;
	float:left;
	min-height:130px;


}

.bloco6IMG{
	width:16.66%;
	float:left;
	min-height:30px;


}

.ladoAlado{
	float:left;
}
.textosDescri{
	width:33.33%;
	float:left;
}

.imgsGaleria{
	width:33.33%;
	float:left;
	min-height:0px;
}


.imgsGaleria div{
	padding:7px 10px 15px 10px;
}


.imgsGaleria img{
	width:100%;
	height:auto;
}


.imgServ{
	width:33.33%;
	float:left;
}


.imgServ div{
	padding:7px 10px 15px 7px;
}


.imgServ img{
	width:100%;
	height:auto;
}

.colunaRodape{
	width:33.33%;
	float:left;
	overflow:hidden;
	
}

.colunaRodape div{
	padding:5px 7px 5px 7px;
}

.colunaRodape div ul{
	margin: 0;
	padding: ul0;
	list-style: none;
}

.colunaRodape div ul.doContato li{
	padding-left: 20px;
	background-size: 16px;
	background-position: 0 5px;
	background-repeat: no-repeat;
	margin-bottom: 10px;
	
}

.centro div .doContatoMeio {
	padding-left: 20px;
	background-size: 16px;
	background-position: 0 5px;
	background-repeat: no-repeat;
	margin-bottom: 40px;
	
}

.colunaRodape img{
	width:100%;
	height:auto;
}


.imgstri{
	width:33.33%;
	float:left;
}

.formtri{
	width:33.33%;
	float:left;
	
}

.imgsduo{
	width:50%;
	float:left;
}

.imgsduo{
	width:50%;
	float:left;
}


.bloco2{
	width:50%;
	float:left;
}

.bloco2{
	width:50%;
	float:left;
}



.bloco2left{
	width:30%;
	float:left;
}

.bloco2right{
	width:70%;
	float:left;
}

@media (max-width: 960px){
	.bloco2left{
		width:50%;
	}

	.bloco2right{
		width:50%;
	}
}

@media (max-width: 680px){
	.bloco2left{
		width:100%;
	}
	
	.bloco2left img{
		max-width: 100% !important;
		width: 100% !important;
	}

	.bloco2right{
		width:100%;
	}
}

/*
.bloco4 img{
	animation-name: engine;
	animation-duration: 30s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;	
}

@keyframes engine{
	0%{
		transform: rotate(360deg)
	}
	50%{
		transform: rotate(0deg)
	}
	100%{
		transform: rotate(360deg)
	}	
}

*/

#mobile, #menuMobile-x{
	display:none;

}




.telsorc{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.telsorc > div{
	margin: 0 10px;
	background-size: auto 32px;
	background-repeat: no-repeat;
	padding-left: 32px;
	animation-name: animaicon;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@keyframes animaicon{
0%{
	background-size: auto 32px;
}
50%{
	background-size: auto 28px;
}
100%{
	background-size: auto 32px;
}	

}


.images5{
	width:20%;
	float:left;
	min-height: 480px;


}

.images5TextTitulo{
	padding: 20px;
	margin-left: 38px;
	margin-right: 38px;
	align-content: center;
	background:#fff; 
	color: #000; 
	font-family: Oswald; 
	text-transform: uppercase;


}


.images5Text{
	font-family: Oswald; 
	color:#000;
	height: 20px;
	line-height: 20px;
	padding: 20px;
	


}





/* Links */
a.LinkVoltar {
	color:#fff;
	font-size: 12px;
	text-decoration: none;
	
}

a.LinkVoltar:hover {
  color:#fff;
  font-size: 12px;
	
}


.menuescondido{
	display:none;
}

.some{
	display:none;
}

.aparece{
	display:none;

}

#bemVindo{
	position:absolute; left:320px; top:5px;
}


#bgServBr{
	background:url(../images/data-center.png) no-repeat top left;
}
#bgEqp{
	background:url(../images/equimaentos-server.png) no-repeat top left;
}
#bgSeg{
	background:url(../images/seguranca-web.png) no-repeat top left;
}



.blocoHost{
	padding:70px 15px 15px 250px;
	min-height:250px;
}


@media only screen and (max-width: 800px) {
	#bgServBr{
		background:url(images/data-center.png) no-repeat top center;
	}
	#bgEqp{
		background:url(images/equimaentos-server.png) no-repeat top center;
	}
	#bgSeg{
		background:url(images/seguranca-web.png) no-repeat top center;
	}		

	.blocoHost{
		padding-left:10px; padding-right:15px; padding-bottom:15px; padding-top:250px;
		text-align:center;	
	}
}


@media only screen and (min-width: 750px) and (max-width: 1180px) {
.bloco2{
	width:50%;
	float:left;

}
}

@media only screen and (min-width: 0px) and (max-width: 750px) {
.bloco2{
	width:100%;
	float:left;

}
}


@media only screen and (min-width: 750px) and (max-width: 1180px) {
.bloco2text{
	width:50%;
	float:left;

}
}

@media only screen and (min-width: 0px) and (max-width: 750px) {
.bloco2text{
	width:100%;
	float:left;

}
}



#logotopprincipal{
	width:300px;
	height:auto;
}


@media only screen and (min-width: 970px) and (max-width: 1080px) {

#bemVindo{
	left:220px;
}
}
@media only screen and (min-width: 0px) and (max-width: 970px) {
.itemMenus a{
	margin-top:20px;		
	padding:0 15px 0 15px;
	height:40px;
	line-height:40px;
}
#bemVindo{
	left:150px;
	font-size:16px;
}





@media only screen and (min-width: 740px) and (max-width: 960px) {
.bloco4{
	width:33.33%;
	float:left;
	min-height: 400px;

}
}

@media only screen and (min-width: 550px) and (max-width: 740px) {
.bloco4{
	width:50%;
	float:left;
	min-height: 450px;

}
}

@media only screen and (min-width: 0px) and (max-width: 550px) {
.bloco4{
	width:100%;
	float:left;
	min-height: 550px;
	

}
}

@media only screen and (min-width: 980px) and (max-width: 1080px) {
.images3{
	width:33.33%;
	float:left;
	height:auto;

}
}

@media only screen and (min-width: 570px) and (max-width: 980px) {
.images3{
	width:50%;
	float:left;
	height:auto;

}
}

@media only screen and (min-width: 0px) and (max-width: 570px) {
.images3{
	width:100%;
	float:left;
	height:auto;

}
	}


@media only screen and (min-width: 880px) and (max-width: 1080px) {
.imgServ{
	width:33.33%;
	float:left;
	height:auto;

}
}

@media only screen and (min-width: 630px) and (max-width: 880px) {
.imgServ{
	width:50%;
	float:left;
	height:auto;

}
}

@media only screen and (min-width: 0px) and (max-width: 630px) {
.imgServ{
	width:100%;
	float:left;
	height:auto;

}
}


@media only screen and (min-width: 740px) and (max-width: 960px) {
.images4{
	width:33.33%;
	float:left;
	height:auto;
	

}
}

@media only screen and (min-width: 550px) and (max-width: 740px) {
.images4{
	width:50%;
	float:left;
	height:auto;

}
}

@media only screen and (min-width: 0px) and (max-width: 550px) {
.images4{
	width:100%;
	float:left;
	height:auto;

}
}

@media only screen and (min-width: 940px) and (max-width: 1180px) {
.bloco5{
	width:20%;
	float:left;
	height:50px;

}
}



@media only screen and (min-width: 740px) and (max-width: 940px) {
.bloco5{
	width:25%;
	float:left;

}
}

@media only screen and (min-width: 570px) and (max-width: 740px) {
.bloco5{
	width:33.33%;
	float:left;

}
}

@media only screen and (min-width: 520px) and (max-width: 570px) {
.bloco5{
	width:50%;
	float:left;
}
}


@media only screen and (min-width: 0px) and (max-width: 520px) {
.bloco5{
	width:100%;
	float:left;
}
}




@media only screen and (min-width: 940px) and (max-width: 1180px) {
.bloco6{
	width:20%;
	float:left;
	height:50px;

}
}



@media only screen and (min-width: 740px) and (max-width: 940px) {
.bloco6{
	width:25%;
	float:left;

}
}

@media only screen and (min-width: 570px) and (max-width: 740px) {
.bloco6{
	width:33.33%;
	float:left;

}
}

@media only screen and (min-width: 410px) and (max-width: 570px) {
.bloco6{
	width:50%;
	float:left;
}
}


@media only screen and (min-width: 0px) and (max-width: 410px) {
.bloco6{
	width:100%;
	float:left;
}
}


@media only screen and (min-width: 940px) and (max-width: 1180px) {
.bloco6IMG{
	width:20%;
	float:left;
	height:50px;

}
}



@media only screen and (min-width: 740px) and (max-width: 940px) {
.bloco6IMG{
	width:25%;
	float:left;

}
}

@media only screen and (min-width: 570px) and (max-width: 740px) {
.bloco6IMG{
	width:33.33%;
	float:left;

}
}

@media only screen and (min-width: 410px) and (max-width: 570px) {
.bloco6IMG{
	width:50%;
	float:left;
}
}


@media only screen and (min-width: 0px) and (max-width: 410px) {
.bloco6IMG{
	width:100%;
	float:left;
}
}




@media only screen and (min-width: 0px) and (max-width: 860px) {
	
	#menuprincipal{
		display:none;
	}
	
	.formtri{
	width:100%;
	float:none;
	
}
	
	.ladoAlado{
		
		float:none}

	
	.some{
		display:none;
	}
	
	.aparece{
		display:block;
	}
		
	.mob{ width:100%;	}
	#mobile, #menuMobile-x{
		display:block;
	
	}
	#desktop{display:none;
	}
	
	.imgduo{
		width:100%;
	}
	
	
	.iformduo1{
		width:100%;
	}
	
	
	.iformduo2{
		width:100%;
	}	
	
		.bloco2{
		width:100%;
	}
	
	.bloco2{
		width:100%;
	}

	
		
		.bloco2text{
		width:100%;
	}
	
	.bloco2text{
		width:100%;
	}

	
	
	.imgsGaleria{
		width:100%;
		float:left;
	}
}
}


@media only screen and (min-width: 960px) {
.colunaRodape{
	width:25%;
	float:left;
	height:auto;
	
}
}

@media only screen and (min-width: 600px) and (max-width: 960px) {
.colunaRodape{
	width:50%;
	float:left;
	height:auto;

}
}

@media only screen and (min-width: 0px) and (max-width: 600px) {
.colunaRodape{
	width:100%;
	float:left;
	height:auto;

}
}

.colunaRodape div{
	padding:5px 7px 5px 7px;
}

.imgstri{
	width:33.33%;
	float:left;
}

.formtri{
	width:33.33%;
	float:left;
	
}


@media only screen and (min-width: 0px) and (max-width: 970px) {
.colunaRodape{
	width:100%;
	float:none;

}
}


@media only screen and (min-width: 990px)  {
.images3border{
	width:33.33%;
	float:left;
	height:auto;
	

}
}

@media only screen and (min-width: 570px) and (max-width: 990px) {
.images3border{
	width:50%;
	float:left;
	height:auto;

}
}

@media only screen and (max-width: 570px) {
.images3border{
	width:100%;
	float:left;
	height:auto;

}
}
	
.images3border{
	padding:5px;
	
}

.images3border img{
	width:100%; height:auto; opacity:0.7;
	transition:0.3s;
}

.images3border img:hover{
	opacity:1;
}

.images3border > div{
	padding:15px;
}

.images3border{	
    border-radius:10px;
	border:solid 2px rgba(237,237,237,1);
}

.images3border:hover{
	border-radius:10px;
	border:solid 2px rgba(242,185,101.1);
	
}




/*
@media only screen and (min-width: 0px) and (max-width: 360px) {
	
	
.some{
	display:none;
}

.aparece{
	display:block;
}
	
.mob{ width:100%;	}
#mobile{
	display:block;

}
#desktop{display:none;
}	
	
.imgduo{
	width:100%;
	float:none;
}	

.imgsduo{
	width:100%;
	float:none;
}	

.textosDescri{
	width:33.33%;
	float:left;
}

.imgsGaleria{
	width:100%;
	float:left;
}
}
*/


		/*Redes Sociais*/
		.redeSocial{
			margin-top: 20px;
			display: flex;
			flex-direction: row;
		}
		.redeSocial a{
			overflow: hidden;
			text-indent: -200px;
			width: 64px;
			height: 64px;
			display: block;
			background-size: 64px 64px;
			opacity: 0.9;
			transition: 0.8s;
		}

		.facebook a{background-image: url("../images/icon-facebook.png");}
		.instagram a{background-image: url("../images/icon-instagram.png");}

		.redeSocial a:hover{
			background-position: 0 128px;
			opacity: 1;
		}
    /*Fim --> Redes Sociais*/


.titsubCat span{
	position:absolute;
	right:30px;
}


#barServicos{
	min-height: 400px; background-image: url(../images/background-colors.png); background-position: 0 100px; background-repeat: no-repeat; 
	background-size: 1920px 100%;
}

#barServicos{
	margin-top: 50PX;
	font-size: 24PX;
	font-family: Arial, Helvetica, sans-serif;
	
}

#barServicos > div.central{
	overflow: hidden;
	position: relative;
}

#barServicos > div.central > div{
	margin-top: 100px;
	float: left;
	width: 15%;
	text-align: center;
	padding: 20px;
	
}

#barServicos > div.central > div#entregador{
	margin-top: 200px;
	float: left;
	width: 40%;
	height: 300px;
	text-align: center;
	
}

#barServicos > div.central > div > img{
	width: 80%;
	height: auto;
}


#barServicos > div.central > div#entregador > img{
	width: 500px;
	height: auto;
	position: absolute;
	right: 10px;
	margin-top: -220px;
	
}


#barServicos > div.central > div > figcaption{
	font-size: 14px;
	color: #FFF;
	
	
}

@media only screen and (max-width:1184px){
	#barServicos > div.central > div#entregador{
		display: none;
	}
	#barServicos > div.central > div{
		width: 33.33%;
	}	
}

@media only screen and (max-width:660px){
	#barServicos > div.central > div{
		width: 100%;
	}	
}


.btnWhats{
	width:180px; height:54; position:fixed; z-index:1; bottom:20px; left:20px;
	animation-name: btnWhats;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@keyframes btnWhats{
	0%{
		transform: scale(1)
	}
	50%{
		transform: scale(1.2)
	}
	100%{
		transform: scale(1)
	}	
}



section.listWhats{
	position: fixed;
	bottom: 20px;
	left: -300px;
	z-index: 999;
	width: 260px;
	height: 200px;
	background-image: linear-gradient(to bottom, #3fbe2b, #0e8c06, #3fbe2b);
	box-shadow: 0px 0px 5px 2px #00000099;
	border-radius: 10px;
	border: solid 5px #FFF;
	padding: 0 10px;
	transition: 0.6s;
}

section.listWhats.active{
	left: 20px;
}

section.listWhats .btnFechaWhats{
	position: absolute;
	top: 10px;
	right: 10px;
	width: 24px;
	height: 24px;
	cursor: pointer;
}
section.listWhats .btnFechaWhats::before{
	content: 'X';
	color: #000;
	background-color: #000;
	clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

section.listWhats h2{
	text-align: center;
	width: calc(100% - 34px);
	margin: 5px 0 0 0;
}

section.listWhats ul{
	margin: 30px 0 0 0 ;
	padding: 0;
	width: 100%;
	list-style: none;
}

section.listWhats ul a{
	display:block;
	list-style:none;
	height: 60px;
	text-decoration: none;
	color: #FFF;
	font-size: 20px;
	padding: 5px 0 0 60px;
	background-image: url(../images/icon-whatsapp.png);
	background-repeat: no-repeat;
	background-size: 36px auto ;
	background-position: 5px 10px;
}

section.listWhats ul a:hover{
	background-color: #FFFFFF33;
}



	.btnEnvie button{
	font-family:Roboto;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	color:#fff;  
	border:solid 2px #016cb2; 
	background:#016cb2;
	height:80px;
	transition: 0.3s;


	
}

.btnEnvie button:hover{
	background:#ee3350;
	color:#fff;
	border:solid 3px #ee3350; 
	transition: 0.3s;
}