@font-face {
	font-family: 'Linotte';
	src: url('../fonts/Linotte.otf');
}
  
*{
	font-family: "Linotte" ;
}
.margem{
	padding-top: 10px!important;
	margin-top: 20px!important;
}
.carousel-caption {
	color: black!important;
	position: absolute;
}

.carousel-indicators li {
	background-color: black!important;
}


.carousel-control-prev, .carousel-control-next {
    filter: invert(100%)!important;
}
.nav-tabs .nav-link{
	width: 33%;	
	border-bottom: 1px solid #12524B;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
	width: 33%;
	border-color: #12524B #12524B #fff
}


.espacocima{
	padding-top: 15px;
}

.js .anime {
	opacity: 0;
	transform: translate3D(-50px, 0px, 0px);
}

.js .anime-init {
	opacity: 1;
	transform: translate3D(0px, 0px, 0px);
	transition: .3s all ease;
}


.espaco{
	padding: 35px;
}
.personalizado{
	color: red;
}

.personalizado a{
	color: red;
}

/*NAVBAR*/
nav{
	color: white !important;
	padding: 20px 35px !important;
}

nav a{
	color: white !important;
	font-size: 120%;
}

nav a:hover{
	color: #ffd700!important;
}


nav.small{
	background-color: #12524b !important;
	padding-right: .5rem;
	padding-left: .5rem;
	font-size: 80%;
	box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
}
nav.small img{
	height: 40px;
}
.custom-toggler.navbar-toggler {
    border-color: rgb(255,255,255);
}
.custom-toggler .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-brand img{
	height: 45px;
}
nav.small.navbar-brand img{
	height: 30px;
}


/*banner principal*/
.fundo {
    width: 100%;
    min-height: 100vh;
    position: relative;
}

.fundo > .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; 
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.fundo > .bg-video > video {
	min-width: 100%;
	min-height: 100%;
}

.banner{
	background-image: linear-gradient(to right,rgba(18,82,75,0.6) , rgba(41,181,115,0.6) );
	padding: 0px;
   	width: 100%;
    min-height: 100vh;

}

.texto{
	padding-top: 25%;
	color: white;
	text-align: right;
}

.texto span{
	font-size: 55px;
}

/*QUEM SOMOS*/

.quemsomos{
	background-color: #39B16FFF;
	height: auto;
	width: 100%;
	padding-top: 15px;	
	color: #fff
}

/*CLIENTES*/

.clientes{
	padding: 5px;	
	text-align: center;
	line-height:9.5;
}

.clientes img{
	width: 200px;
}

.imgColorida{
	-webkit-filter: grayscale(100%);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
    position: relative;
    top: 50%;
    cursor: default;
    transform: translateY(-50%);
}
 
.imgColorida:hover{
    filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

/*SISTEMAS*/
.sistemas{
	background-image: url("./../../../img/fundo.png");
	/*background-color: rgba(18,82,75, 1.0);*/
	
	background-color: rgb(167, 167, 167);
	background-size: cover; /* background-size: cover para que a imagem de fundo cubra toda a área do banner proporcionalmente */
	background-position: center; /*definimos uma cor para o fundo e utilizamos a
									propriedade background-blend-mode com o valor multiply para misturar a cor com a imagem de fundo*/
	background-attachment: fixed; /*Fundo ficar FIXO */
	background-blend-mode: multiply;
    display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 60vh; /*  min-height: 100vh é a altura mínima do banner  (view height), assim o banner terá 100% da altura da tela */
	box-sizing: border-box;
	color: rgb(0, 0, 0);

}

.sistemas div{
	margin-top: 15px;
}

/* CONTATO*/
.contato{
	background-color: #239E90;
	color: white;	
}

.pessoa{
	height: 690px;
	float: right;
}
.pessoa1{
	display: none;
}

.linkcontato{
	text-decoration: none!important;
	color: white!important;
	font-size: 24px;
	text-align: center;
	padding: 10px;
}

.linkcontato a:link{
	color: white;
	text-decoration: none!important;
}

.linkcontato a:hover{
	color: rgb(25, 78, 41);
	text-decoration: none!important;
}
/*MAPA*/
.mapa{
	width: 90%;
	background-color: #067226;
}

/*SUPORTE*/
.suporte{
	width: 100%;
	background-color: #067226;
	color: white;	
}

.suporte h2{
	margin-top: 20px;
}

.botao{
	padding: 20px 0;
}

.botao a{
	text-decoration: none!important;
	color: white!important;
}



/* PAGINAS AUXILIARES */
.imagens{
	padding-top: 10px;
	margin-top: 0px;
}

.imagens img{
	border: 2px solid rgba(18, 82, 75, 0.6)!important;
}

.tituloIndustria{
	width: 100%;
	height: 15em;
   	position: relative;
	color: white;	
	background-image: url("./../../../img/MegaIndustria/fundo.png");
	/*background-color: rgba(18,82,75, 1.0);*/
	
	background-color: rgb(167, 167, 167);
	background-size: cover; /* background-size: cover para que a imagem de fundo cubra toda a área do banner proporcionalmente */
	background-position: center; /*definimos uma cor para o fundo e utilizamos a
									propriedade background-blend-mode com o valor multiply para misturar a cor com a imagem de fundo*/
	/*background-attachment: fixed; Fundo ficar FIXO */
	background-blend-mode: multiply;
	
}

.tituloIndustria p{
	align-self: auto;
	margin-top: 3em;
	width: 90%;
   	position: absolute;                        
	text-align: center;  
	font-size: 40px;
}

.tituloComercio{
	width: 100%;
	height: 15em;
   	position: relative;
	color: white;	
	background-image: url("../img/Comercio/fundo.jpg");
	/*background-color: rgba(18,82,75, 1.0);*/
	
	background-color: rgb(167, 167, 167);
	background-size: cover; /* background-size: cover para que a imagem de fundo cubra toda a área do banner proporcionalmente */
	background-position: center; /*definimos uma cor para o fundo e utilizamos a
									propriedade background-blend-mode com o valor multiply para misturar a cor com a imagem de fundo*/
	/*background-attachment: fixed; Fundo ficar FIXO */
	background-blend-mode: multiply;
	
}

.tituloComercio p{
	align-self: auto;
	margin-top: 3em;
	width: 90%;
   	position: absolute;                        
	text-align: center;  
	font-size: 40px;
}

.tituloUnivendas{
	width: 100%;
	height: 15em;
   	position: relative;
	color: white;	
	background-image: url("../img/Univendas/Fundo.jpg");
	/*background-color: rgba(18,82,75, 1.0);*/
	
	background-color: rgb(167, 167, 167);
	background-size: cover; /* background-size: cover para que a imagem de fundo cubra toda a área do banner proporcionalmente */
	background-position: center; /*definimos uma cor para o fundo e utilizamos a
									propriedade background-blend-mode com o valor multiply para misturar a cor com a imagem de fundo*/
	/*background-attachment: fixed; Fundo ficar FIXO */
	background-blend-mode: multiply;
	
}

.tituloUnivendas p{
	align-self: auto;
	margin-top: 3em;
	width: 90%;
   	position: absolute;                        
	text-align: center;  
	font-size: 40px;
}

.tituloRH{
	width: 100%;
	height: 15em;
   	position: relative;
	color: white;	
	background-image: url("../img/rh/fundo.jpg");
	/*background-color: rgba(18,82,75, 1.0);*/
	
	background-color: rgb(167, 167, 167);
	background-size: cover; /* background-size: cover para que a imagem de fundo cubra toda a área do banner proporcionalmente */
	background-position: center; /*definimos uma cor para o fundo e utilizamos a
									propriedade background-blend-mode com o valor multiply para misturar a cor com a imagem de fundo*/
	/*background-attachment: fixed; Fundo ficar FIXO */
	background-blend-mode: multiply;
	
}

.tituloRH p{
	align-self: auto;
	margin-top: 3em;
	width: 90%;
   	position: absolute;                        
	text-align: center;  
	font-size: 40px;
}

.tituloPedreira{
	width: 100%;
	height: 15em;
   	position: relative;
	color: white;	
	background-image: url("../img/MegaIndustria/fundo2.jpg");
	/*background-color: rgba(18,82,75, 1.0);*/
	
	background-color: rgb(167, 167, 167);
	background-size: cover; /* background-size: cover para que a imagem de fundo cubra toda a área do banner proporcionalmente */
	background-position: center; /*definimos uma cor para o fundo e utilizamos a
									propriedade background-blend-mode com o valor multiply para misturar a cor com a imagem de fundo*/
	/*background-attachment: fixed; Fundo ficar FIXO */
	background-blend-mode: multiply;
	
}

.tituloPedreira p{
	align-self: auto;
	margin-top: 3em;
	width: 90%;
   	position: absolute;                        
	text-align: center;  
	font-size: 40px;
}


.tituloCouro{
	width: 100%;
	height: 15em;
   	position: relative;
	color: white;	
	background-image: url("../img/MegaIndustria/fundoCouro.jpg");
	/*background-color: rgba(18,82,75, 1.0);*/
	
	background-color: rgb(167, 167, 167);
	background-size: cover; /* background-size: cover para que a imagem de fundo cubra toda a área do banner proporcionalmente */
	background-position: center; /*definimos uma cor para o fundo e utilizamos a
									propriedade background-blend-mode com o valor multiply para misturar a cor com a imagem de fundo*/
	/*background-attachment: fixed; Fundo ficar FIXO */
	background-blend-mode: multiply;
	
}

.tituloCouro p{
	align-self: auto;
	margin-top: 3em;
	width: 90%;
   	position: absolute;                        
	text-align: center;  
	font-size: 40px;
}

.tituloRevenda{
	width: 100%;
	height: 15em;
   	position: relative;
	color: white;	
	background-image: url("../img/MegaIndustria/fundoRevendas.jpg");
	/*background-color: rgba(18,82,75, 1.0);*/
	
	background-color: rgb(167, 167, 167);
	background-size: cover; /* background-size: cover para que a imagem de fundo cubra toda a área do banner proporcionalmente */
	background-position: center; /*definimos uma cor para o fundo e utilizamos a
									propriedade background-blend-mode com o valor multiply para misturar a cor com a imagem de fundo*/
	/*background-attachment: fixed; Fundo ficar FIXO */
	background-blend-mode: multiply;
	
}

.tituloRevenda p{
	align-self: auto;
	margin-top: 3em;
	width: 90%;
   	position: absolute;                        
	text-align: center;  
	font-size: 40px;
}


.univendas{
	width: 100%;
	background-color: #126D4B;
	color: #fff;
	
}

.texto2{
	padding-top: 45px;
}

footer{
	background:linear-gradient(to left,#126D4B,#12524B);
	color:white;
	padding: 30px;
}
@media screen and (max-width: 492px){
	
	/*NAVBAR*/
	
	.navbar-brand img{
		height: 30px;
	}
	nav.small img{
		height: 20px;
	}
	/*banner principal*/
	.fundo {
		width: 100%;
		position: relative;
	}

	.fundo > .bg-video {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1; 
		width: 100%;
		overflow: hidden;
	}
	.fundo > .bg-video > video {
		width: 100%;
	}

	.banner{
		background-image: linear-gradient(to right,rgba(18, 82, 75, 0.6) , rgba(41,181,115,0.6) );
		padding: 0px;
		width: 100%;

	}

	.texto{
		padding-top: 25%;
		color: white;
		text-align: right;
	}

	.texto span{
		font-size: 18px;
	}

	/*SISTEMAS*/
	.sistemas{
		background-image: url("./../../../img/fundo.png");
		/*background-color: rgba(18,82,75, 1.0);*/
		
		background-color: rgb(167, 167, 167);
		background-size: auto auto; /* background-size: cover para que a imagem de fundo cubra toda a área do banner proporcionalmente */
		background-position: center; /*definimos uma cor para o fundo e utilizamos a
										propriedade background-blend-mode com o valor multiply para misturar a cor com a imagem de fundo*/
		background-attachment: fixed; /*Fundo ficar FIXO */
		background-blend-mode: multiply;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: auto; /*  min-height: 100vh é a altura mínima do banner  (view height), assim o banner terá 100% da altura da tela */
		box-sizing: border-box;
		color: rgb(0, 0, 0);
	
	}

	/*CONTATO*/
	.pessoa{
		display: none
	}
	.pessoa1{
		display: flex;
		width: 100%;
		margin-bottom: 0px;
		text-align: center;
	}
	.contato2{
		background-color: white;
		color: #239E90;	
	}
	.linkcontato{
		text-decoration: none!important;
		color:  rgb(25, 78, 41)!important;
		font-size: 24px;
		text-align: center;
		padding: 10px;
	}
	
	.linkcontato a:link{
		color:rgb(25, 78, 41);
		text-decoration: none!important;
	}
	
	.linkcontato a:hover{
		color: rgb(13, 51, 24);
		text-decoration: none!important;
	}

}