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

html, body {
    width: 100% ;
    height: 100% ;
    min-height: 500px ;
    min-width: 900px ;
    margin: 0px ;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#pagina {
    height: 100% ; background-color:#FFF;
	
}


#todoconteudo {
	
	height:800px;
	width:1023px; /* largura fictícia */
	margin:0 auto;
	
	
}


#footertop {
    height: 34px; 
	background-color:#333;
}


/**************** Media social / Facebook / Google + *****************/


#mediasocial { margin: 0 auto; width:1020px; height:34px;}



.btnfacebook { float: right; padding-right:5px; width:40px; height:34px; background-image:url(../imagem/facebook01.jpg); background-repeat:no-repeat;}


.btnfacebook:hover { background-image:url(../imagem/facebook01hover.jpg); background-repeat:no-repeat; }


.btngooglemais { float: right; padding-right:5px; width:40px; height:34px; background-image:url(../imagem/googlemais01.jpg); background-repeat:no-repeat;}

.btngooglemais:hover { background-image:url(../imagem/googlemais01hover.jpg); background-repeat:no-repeat; }


.btncorreio { float: right; padding-right:5px; width:40px; height:34px; background-image:url(../imagem/correio01.jpg); background-repeat:no-repeat;}

.btncorreio:hover { background-image:url(../imagem/correio01hover.jpg); background-repeat:no-repeat; }


/**************** Fim de Media social / Facebook / Google + *****************/					


.logotipo { float:left;}


/**************** Inicio do Menu *****************/


#barramenu { margin-top:22px; 
			 height:110px;
			 }


.menu { float:right; 
		padding-top:60px;
	}


.menu ul { list-style:none;}


.menu ul li { display:inline;
			  padding:15px; 
			  
			 }


.menu ul li a { font-family:Arial, 
				Helvetica, sans-serif; 
				font-size:12px; 
				color:#000; 
				text-decoration:none; 
				padding:10px;
				
				}


/****** Rollover Menu *********/


.menu ul li a:hover { background-color:#00aeef; 
					  -moz-border-radius:7px;
					  -webkit-border-radius:7px; 
					  border-radius:7px; 
					  color:#FFF;
					  
					 }



.btnserviços { background-color:#00aeef; 
			  -moz-border-radius:7px;
			  -webkit-border-radius:7px; 
			  border-radius:7px;}
			  
			  

/**************** Fim do Menu *****************/


#conteudoempresa { height:600px; }


	
#servicosdesign { border:rgba(255,255,255,1.00) solid  thin; height:200px; }

#lista01{ float:left}

#lista02{ float:left}

#lista03{ float:left}

ul { list-style: inside;}
		 
	
	
			 
/**************** Inicio do Box effect / Hover Shadow *******************/




@keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@-webkit-keyframes hover-shadow {
  0% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .3;
  }

  50% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .3;
  }
}

@keyframes hover-shadow {
  0% {
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }

  50% {
    -webkit-transform: translateY(3px);
    -ms-transform: translateY(3px);
    transform: translateY(3px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .3;
  }
}

.hover-shadow {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hover-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
}

.hover-shadow:hover {
  -webkit-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
  -webkit-animation-name: hover;
  animation-name: hover;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  background-color:rgba(0,0,0,1.00);
}

.hover-shadow:hover:before {
  opacity: .4;
  -webkit-transform: translateY(6px);
  -ms-transform: translateY(6px);
  transform: translateY(6px);
  -webkit-animation-name: hover-shadow;
  animation-name: hover-shadow;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
		

.hover-shadow { background-color:#00aeef; padding:55px; text-decoration:none;}


/**************** Black Box *******************/


.hover-shadow01 { background-color:#00aeef; padding:55px; text-decoration:none; background-color:rgba(0,0,0,1.00);
display: inline-block; position: relative; top:-6px; }



/**************** Fim do Box effect / Hover Shadow *******************/



#serviços { padding-top:40px;}
		 

#footerinferior { height:35px; background-color:#333;  margin-top:150px; }



/************************Inicio do  Submenu ***********************/

#submenu { position:relative; top:-8px;}


#submenu ul { list-style:none;}


#submenu ul li { display:inline;
			  padding:5px;
			  
			 }


#submenu ul li a { font-family:Arial, 
				Helvetica, sans-serif; 
				font-size:12px; 
				color:#FFFFFF; 
				text-decoration:none; 
				padding:7px;
				position:relative; top:15px;
				
				}


/****** Rollover Menu *********/

#submenu ul li a:hover { background-color:#00aeef; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;color:#FFF; }
					 

/************************Fim do  Menu ***********************/


#footer02 { background-color:rgba(0,0,0,1.00); margin-top:-12px; height:10%;}