@font-face {
    font-family: 'milo';
    src: url('/imagens/fontes/milo/milo.eot');
     src: url('/imagens/fontes/milo/milo.eot?#iefix') format('embedded-opentype'),
		 url('/imagens/fontes/milo/milo.woff2') format('woff2'),
         url('/imagens/fontes/milo/milo.woff') format('woff'),
         url('/imagens/fontes/milo/milo.ttf') format('truetype'),
         url('/imagens/fontes/milo/milo.svg#milo') format('svg');
		 font-weight:normal;
		font-stretch:normal;
	
	
	
}

@font-face {
    font-family: 'milotext';
    src: url('/imagens/fontes/milotext/milotext.eot');
     src: url('/imagens/fontes/milotext/milotext.eot?#iefix') format('embedded-opentype'),
		 url('/imagens/fontes/milotext/milotext.woff2') format('woff2'),
         url('/imagens/fontes/milotext/milotext.woff') format('woff'),
         url('/imagens/fontes/milotext/milotext.ttf') format('truetype'),
         url('/imagens/fontes/milotext/milotext.svg#milotext') format('svg');
		 font-weight:normal;
		font-stretch:normal;
	
	
	
}

html,body{
	margin:0;
	overflow-x: hidden;
}

.fonte {
	font-family: milotext;
}

#linksuteis h1 {
	
	font-family: milotext;
	font-size:24px;
	color:#fff;
	text-align: right;
}


#linha_logo_rodape {
	
	position:absolute;
	float:left;
	margin:-15px auto 0 auto;
	width:100%;
	height:40px;

	background-color: #222;
	
	
	 -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
	
z-index: 99;
	
}

#fundo_linhas_rodape {
	
	position:absolute;
	margin:0;
	display:block;
	left:0;
	top:0;
	height: 330px;
	
	
	
	
}

#localizacao {
	position: relative;
	width:100%;
	display:block;
	margin:40px auto 20px auto;
	float:left;
	background:#00b4f0;
}

#logo_rodape {
	
	
	position:relative;
	width:100%;
	
	margin:10px auto 0 auto;
	float:left;
	text-align: center;
	
	z-index: 999;
	

	
	
}

#logo_rodape img {
	
	width:80%;
	

}


#item_lista {
	
	position:relative;
	width:100%;
	height: auto;
	margin:100px auto 100px auto;
	float:left;
	
}






@-webkit-keyframes moveDown {
  0% {
    -webkit-animation-timing-function: ease-in;
	-moz-animation-timing-function: ease-in;
	-ms-animation-timing-function: ease-in;
	-o-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
	  
	  
-webkit-transform: matrix(0.5,0,0,0.5,-160,20);
-moz-transform: matrix(0.5,0,0,0.5,-160,20);
-ms-transform: matrix(0.5,0,0,0.5,-160,20);
-o-transform: matrix(0.5,0,0,0.5,-160,20);
transform: matrix(0.5,0,0,0.5,-160,20);
	
	opacity:0;
	-moz-opacity: 0;
	filter: alpha(opacity=0);



  }

  100% {
    -webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
	
	
-webkit-transform: matrix(1,0,0,1,-80,65);
-moz-transform: matrix(1,0,0,1,-80px,65px);
-ms-transform: matrix(1,0,0,1,-80,65);
-o-transform: matrix(1,0,0,1,-80,65);
transform: matrix(1,0,0,1,-80,65);
	
	opacity:1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);

	
  }
  
  
  
  
}














#limite_horizontal {

	
	position:relative;
	
	width:100%;
	max-width:1440px;
	margin:0 auto 0 auto;
	
	height: auto;
	
	text-align: center;
	
	padding-top: 10px;
	padding-bottom: 10px;
	
	
}


#servicos {
	
	position:relative;
	float:left;
	width:100%;
	height: auto;
	margin:40px auto 0 auto;
	
	background-color: #f0f0f0;
	
	padding-top: 80px;
	padding-bottom: 80px;
	
}



#inicio {
	
	position:relative;
	float:left;
	width:100%;
	height: auto;
	margin:0 auto 0 auto;
padding-top: 80px;
	padding-bottom: 80px;
	
	background-color: #011c40;
	
			-webkit-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.2);
			-moz-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.2);
			-ms-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.2);
			-o-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.2);
			box-shadow:-20px 0 20px 5px rgba(0,0,0,0.2);
	
}


#diferenciais {
	
	position:relative;
	display:flex;
	float:left;
	width:100%;
	height: auto;
	margin:0 auto 0 auto;
	padding-top: 80px;
	padding-bottom: 80px;
	
	background-color: #011c40;
	
			-webkit-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.2);
			-moz-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.2);
			-ms-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.2);
			-o-box-shadow:-20px 0 20px 5px rgba(0,0,0,0.2);
			box-shadow:-20px 0 20px 5px rgba(0,0,0,0.2);
	
	text-align: left;
	color:#fff;
	
}

#diferenciais_quadros {
	
	position:relative;
	float:left;
	width:26%;
	margin:0 2% 40px 2%;
	height: 250px;
	background-color: #010f23;

	
		
}

#diferenciais_icones {
	
}


#sobre {
	
	position:relative;
	float:left;
	width:100%;
	height: auto;
	margin:0 auto 0 auto;
	padding-top: 80px;
	padding-bottom: 80px;
	
	/* background-color: #fff; */

	
}


#Contato {
	
	position:relative;
	float:left;
	width:100%;
	height: auto;
	margin:0 auto 0 auto;
	padding-top: 40px;
	padding-bottom: 40px;
	
	
		background-image: url("https://www.dallarosajr.com.br/imagens/fundo_contato.jpg");
		background-color: rgba(0,0,0,0.6);
		background-position: 0px -600px;
		background-size: 140%;
		background-repeat: no-repeat;
		background-blend-mode: multiply;	
		
	
	/* background-color: #fff; */

	
}

#contato {
	
	position:relative;
	float:none;
	width:auto;
	height: auto;
	margin:0 auto 0 auto;

	
	/* background-color: #fff; */

	
}



#Contato h1 {
	
	font-family: milotext;
	font-size: 24px;
	color:#fff;
}


#Contato h3 {
	
	font-family: milotext;
	font-size: 18px;
	color:#fff;
}








#dados_logotopo {
	
	position: relative;
	
	display:block;
	margin: 10px auto 20px auto;
	float: right;
	width:70%;
	
	font-family:milo;
	text-align: right;
	font-size: 16px;
	
	
	
	
	vertical-align: middle;
	
	z-index: 999;
	
}

		#redes_sociais_rodape {
	
	position: relative;
	
	display:block;
	margin: 25px auto 0 auto;
	float: left;
	width:100%;
	
	font-family:milo;
	text-align: center;
	font-size: 36px;
	
	
	
	
	vertical-align: middle;
	

	
}

#redes_sociais_rodape a {
		
	color: #fff;
	
}

#redes_sociais {
	
	position: relative;
	
	display:inline-block;
	margin: 10px auto 0 20px;
	float: right;
	width:auto;
	
	font-family:milo;
	text-align: right;
	font-size: 20px;
	
	
	
	
	vertical-align: middle;
	
	z-index: 99;
	
}

#redes_sociais a {
		
	color: #fff;
	
}



.titulo_logotopo {
	
	font-size: 72px;
	line-height: 0px;
	
}


#slogan_logotopo {
	
	position:relative;
	float:left;
	margin:10px auto 0 auto;
	width:50%;
	
	font-size: 20px;
	line-height: 1em;
	font-family:milo;
	
	color: #fff;
	
	text-align: left;
	
}

.endereco_topo {
	font-size: 16px;
	text-decoration: none;
	color: #fff;
}



#telefone_topo a {
	
	font-family: milo;
	font-size: 22px;
	text-decoration: none;
	color: #fff;
	
}

.email_topo {
	font-size: 12px;
	text-decoration: none;
	color: #fff;
	
}





#idiomas {
	width:50%;
	display:inline;
	float: left;
	margin:5px auto 0 auto;
	vertical-align: middle;
}


#idiomas img {
	
	width:28px;
	padding: 5px;
	
	

}

#data {
	position: relative;
	width:50%;
	display:inline-block;
	float: left;
	margin:10px auto 0 auto;
	
	text-align: left;
	
	vertical-align: middle;
	font-family: milo;
	font-size: 16px;
	color:#fff;
	
}

#telefone_topo {
	position: relative;
	width:50%;
	display:inline-block;
	float: right;
	margin:10px auto 0 auto;
	
	text-align: right;
	
	vertical-align: middle;
	
	
}

#topo_itens {
	
	position:relative;
	display: block;
	float: left;
	width:96%;
	margin:80px 2% 10px 2%;
	height: auto;
	
	background-color: #011c40;
	
	
	
	
	
	

}






#logo {
	
	display:block;
	position: relative;
	margin: 0 auto 0 auto;
	float: left;
	width:40%;
	height: auto;
	z-index: 9999;
	text-align: left;

	
		
	
}

#logo img {

	width:320px;	
	height:auto;	

}





#menu {
	
	position: relative;
	display: inline-block;
	width: 60%;
	height: auto;
	font-family:milo;
	float: right;
	margin:0 auto 0 auto;
	z-index: 9;
	text-align: right;
	



}


#linha_rodape {
	
	width:100%;
	margin:-10px auto 0 auto;
	display:block;
	float:left;
	
	
}

#linha_rodape img {
	width:100%;
}


section {
	
	position:relative;
	height: auto;
	display: block;
	float: left;
	width:96%;
	margin:0 2% 0 2%;
	padding-bottom: 30px;
	padding-top: 30px;
	
	text-align: center;
	
	
		
	


	
}












#linksuteis {
	
	position:relative;
	display:block;
	width:96%;
	margin:20px 2% 40px 2%;
	
	float: left;
	text-align: center;
	height: auto;
	
	

	
}


#linksuteis ul li {
	position: relative;
	display: block;
	width:auto;
	margin:0 auto 0 auto;
	text-align: right;
	
	padding: 5px;
	
	text-decoration:none;
	

	
	
	
	
}


#linksuteis a {
		font-family: milotext;
	font-size: 14px;
	color:#fff;
		text-decoration:none;
	
	
}

.navsite > li {
	
	left:-45px;
	list-style: none;
	
}

.navsite > li > a:link {
	
	font-family: milo;
	font-size: 24px;
	color: #fff;
	
	
	text-align: center;
	
	text-decoration:none;
	text-transform: uppercase;
	
		
	
}

.navsite > li > a:hover {
	
	font-family: milo;
	color: #fff;
	
}


.navsite > li > a:visited {
	
	font-family: milo;
	color: #fff;
	
}


#endereco_rodape, #telefone_rodape, #email_rodape {
		
	position:relative;
	display:block;
	width:96%;
	height: auto;
	margin:20px auto 0 auto;
	
	float: left;
	
	

}


#endereco_rodape a {
	
	font-family: milotext;
	font-size: 20px;
	color:#fff;
	text-decoration: none;
	
	}



	#telefone_rodape a {
		
		font-family: milotext;
		
		text-decoration: none;
		
		
		font-size: 22px;
			color: #fff;
		
	
	}


#telefone_rodape a:hover {
		
		text-decoration: none;
	color: #ccc;
		
		
		font-size: 26px;
		
	
		
	
	}



#atendimento_rodape {
		
	position:relative;
	display:inline-block;
	width:96%;
	margin:0 auto 0 auto;

	float: left;
	text-align: left;
	
	height: auto;
	

	


	
}


#centraliza {
		
		position:relative;
		margin:0 2% 0 2%;
		width:96%;
		height: auto;
		float:left;
		text-align: center;

		
		
	}
	



#email_rodape a {
	
	text-decoration: none;

	
	font-family: milotext;
	font-size:18px;
	color: #fff;
}


#email_rodape a:hover {
	
	text-decoration: none;
	font-size:20px;
	color: #fff;
	
}


			h1 {
				font-family: milotext;
		font-size: 32px;
	}
	


#card {
		
				
		position: relative;
		float:left;
		margin:10px;
		display: inline-block;
		width:420px;
		height: 240px;
		padding: 0;
		
		border-radius: 10px;
		
	}
	
	.flip-card {

		
 width: 420px;
  height: 240px;

  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;

	
			backface-visibility: hidden;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;


transform:rotateX(0deg);
	
	
	
	
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #00275a;
  	background-position: top center;
	background-repeat: no-repeat;
		font-family: milotext;
		font-size: 28px;
		color: #fff;
		z-index: 1;
	text-align: center;
	
	  display: flex; /* Magic starts here, turning your container into a flex container */
  justify-content: center; /* This centers the child horizontally */
  align-items: center; /* And this centers it vertically */
/*  height: 100vh;  This will make sure your container is as tall as the entire viewport */
	}
	
		
	.flip-card-front img {
		
		position: relative;
		display:inline;
		width:70px;
		height:60px;
		margin:0 10px 0 auto;
		float: none;
		
	
		
		
	}

.flip-card-front h3 {
	position: relative;
	display: block;
	width:96%;
	margin:0 2% 0 2%;
	float:left;
	
	
}

/* Style the back side */
.flip-card-back {
  background-color: #fff;
  color: #00275a;
  transform: rotateY(180deg);
	
	background-position: top center;
	background-repeat: no-repeat;


	
	
	  display: flex; /* Magic starts here, turning your container into a flex container */
  justify-content: center; /* This centers the child horizontally */
  align-items: center; /* And this centers it vertically */
   	
}
	/*
	.flip-card-back img {
		
		position: absolute;
		display:block;
		width:280px;
		height:200px;
		margin:0 auto 0 auto;
		float:left;
		z-index: -1;
		
		
	}
	*/

.flip-card-front span {
	width:96%;
	margin:0 2% 0 2%;
	float:left;
	display:block;
	position:relative;
	text-align: center;
	
				
	
	
	
	
}


.flip-card-back span {
	width:90%;
	margin:0 auto 0 auto;
	float:left;
	display:block;
	position:relative;
	text-align: center;
	
		font-family: milotext;
		font-size: 24px;
	
}


#area_atuacao {
	position:relative;
	float:left;
	
	text-align: center;
	margin:0 auto 0 auto;
	width:100%;
	height: auto;
			display: flex;
	
	background-color: #ddd;
}	

#icones {
	
	width:100%;
	height: auto;
	margin:0 auto 0 auto;
	text-align: center;
	display: block;
	position: relative;
	float: left;
	
}

#bloco_rodape_left {
	position:relative;
	display:inline-block;
	margin:0 auto 0 auto;
	width:30%;
	height: auto;
	float:left;
	text-align: left;
	
}




#bloco_rodape_center {
	position:relative;
	display:inline-block;
	margin:0 auto 0 auto;
	width:40%;
	height: auto;
	float:left;
	text-align: center;
}




#bloco_rodape_right {
	position:relative;
	display:inline-block;
	margin:0 auto 0 auto;
	width:30%;
	height: auto;
	float:right;
	text-align: right;
	
}



@media (max-width: 1640px) {



}

@media (max-width: 1440px) {
	
	


	
	
	.titulo_logotopo {
	
	font-size: 60px;
	line-height: 0px;
	
}


#slogan_logotopo {
	
	font-size: 14px;
	line-height: 1em;

	
}
	
	

}



	
@media(max-width:1140px) {
	

#topo_itens {
	
	
		display: block;
	margin:20px 2% 0 2%;
	width:96%;
	
	float:left;
	
	
	
	

}

	




}
































	
	


		@media(max-width:768px) {
			
			
			#diferenciais_quadros {
	
	position:relative;
	float:left;
	width:96%;
	margin:0 2% 20px 2%;
	height: 250px;
	background-color: #010f23;

	
		
}
			
			
			
				#linksuteis h1 {
	
	font-family: milotext;
	font-size:24px;
	color:#fff;
	text-align: center;
}
		
		
		#telefone_topo a {
	
	font-family: milo;
	font-size: 14px;
	text-decoration: none;
	color: #fff;
	
}

		#data {
			font-size:10px;
		}
/*		
#fundo_banner {
	position:absolute;
	width:100%;
	height: auto;
	text-align: center;
	margin:-50px auto 0 auto;
	float:left;
	top:0;
	
}
*/		
		
		#logo img {
	
	width:50%;
	

}
			
	#fotos {
		position: relative;
		display: block;
		
		width:96%;
		height: auto;
		
		float: left;
		
		margin:10px 2% 10px 2%;
		border: 5px solid #ffffff;
	}
		#fotos img {
			height: 320px;
		}
		
		
		
		
		


	
	
	#menu {
	
	position: relative;
	width: 94%;
		height: auto;
		display: block;
	font-family:milo;
	float: left;
		
		text-align: center;
	margin:0 auto 20px 0%;
	z-index: 9;
	font-size: 28px;




}
	
	

	#redes_sociais {
	
	position: relative;
	
	display:inline-block;
	margin: 5px auto 0 auto;
	float: right;
	width:auto;
	
	font-family:milo;
	text-align: right;
	font-size: 28px;
	
	
	
	
	vertical-align: middle;

	
}

	
	
	
	

	
	#linksuteis {
	
	position:relative;
	display:block;
	width:100%;
	margin:10px auto 10px auto;
	
	float: left;
	text-align: center;
	height: auto;

	padding-bottom: 30px;

	
}


#linksuteis ul li {
	position: relative;
	display: block;
	width:100%;
	height: auto;
	margin:0 auto 0 auto;
	text-align: center;
	
		left:-25px;
	text-decoration:none;

	
	
}


.navsite > li {
	
	
	list-style: none;
	
}

.navsite > li > a:link {
	
	font-family: milo;
	font-size: 20px;

	color: #fff;
	
	text-align: center;
	
	text-decoration:none;
	text-transform: uppercase;
	
		
	
}

.navsite > li > a:hover {
	
	font-family: milo;
	color: #fff;
	
}


.navsite > li > a:visited {
	
	font-family: milo;
	color: #999;
	
}


#endereco_rodape, #telefone_rodape, #email_rodape {
		
	
	text-align: center;

	
}
#endereco_rodape a {
	
		font-family: milotext;
	font-size: 14px;
	color:#fff;
	text-decoration: none;
	
	}

	#telefone_rodape a {
		
		font-family: milo;
		
		text-decoration: none;
	
		text-align: left;
		
		font-size: 24px;
		
		color:#fff;
		
		
	
	}


#telefone_rodape a:hover {
		
		text-decoration: none;
		color: #fff;
		
		
		font-size: 24px;
		
		
	
	}



#atendimento_rodape {
		
	position:relative;
	display:block;
	width:100%;
	margin:0 auto 0 auto;
	
	float: left;
	text-align: center;
	
	height: auto;
	

	padding-bottom: 80px;


	
}


a.email_rodape:link {
	
	text-decoration: none;

	
	font-family: milo;
	font-size:20px;
	color: #fff;
	
}


a.email_rodape:hover {
	
	text-decoration: none;
	color: #fff;
	font-size:22px;
	
}

	
	
	
	

	
	
	#logo {
	
	display:block;
	margin: 10px auto 10px auto;
	float: left;
	width:100%;
		
		text-align: center;
		
	
}
	
	#logo img{
		width:380px;
	}
	
	#dados_logotopo {
	position: relative;
	display:block;
	margin: 20px auto 20px auto;
	
	width:100%;
	height: auto;
	font-family:milo;
	text-align: center;
	
	
	vertical-align: middle;
		
	
}
			
			
				#card {
		
				
		position: relative;
		float:left;
		margin:10px;
		display: block;
		width:90%;
		height: 180px;
					margin-left: 5%;
		
		
		border-radius: 10px;
		
	}
	
	.flip-card {

		
 width: 96%;
  height: 200px;

  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
			
			
			#bloco_rodape_left {

	display:block;
	margin:0 2% 0 2%;
	width:96%;
	height: auto;
	float:left;
	
}

#bloco_rodape_center {
	display:block;
	margin:0 2% 0 2%;
	width:96%;
	height: auto;
	float:left;
	text-align: center;
	
}

#bloco_rodape_right {
	display:block;
	margin:0 2% 0 2%;
	width:96%;
	height: auto;
	float:left;
	
}
			
			

			
			
	}