/*
COMANDOS DO CSS3:
1 - font-size = tamalho da fonte;
2 - margin = define a área de margem nos quatro lados do elemento; 
3 - padding =  Preenchimento - Espaçamento dentro dos limites do conteúdo;
4 - max-width = estabelece a largura máxima de um elemento;
5 - clear: especifica se um elemento pode ter elementos flutuantes ao seu lado ou se devem ser movidos para abaixo dele (clear).both = É uma palavra-chave que indica que o elemento será movido para baixo para limpar os elementos flutuantes do lado esquerdo e direito;
6 - divider (div) : é um divisor de espaços;
7 - background = fundo;
8 - width = determina a largura da área de conteúdo de um elemento;
9 - background-repeat = Repete a imagem vertical e horizontalmente, no-repeat = Não repete a imagem;
10 - margin:auto = indica o espaço acima do elemento. Valores negativos são aceitos;
11 - text-transform = defina os efeitos de capitalização (maiúsculas, minúsculas) do texto,
12 - capitalize = Causa o efeito de transformar as primeiras letras das palavras do texto em maiúscula,
13 - uppercase = Causa o efeito de transformar todas as letras das palavras do texto em maiúscula;
14 - font-weight = especifica o peso ou a intensidade da fonte (ex.: negrito = bold);
15 - color = cor;
16 - line-height = permite controlar o espaçamento entre as linhas de um texto;
background-attachment = determina se aquela posição da imagem é fixa com o viewport, ou se irá rolar juntamente com o seu bloco.(fixed = Essa chave significa que o background é fixo em relação ao viewport.);
17 - a:hover = define o estilo do link quando passa-se o mouse sobre ele;
18 - text-decoration = é usada para definir a formatação de  underline, overline, line-through ou blink. As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o. (none = Sem decoração);
19 - !important = efeito cascata;
20 - border-raidus = Essa propriedade permite definir como bordas arredondadas são;
21 - text-align = descreve como conteúdo inline, como texto, é alinhado no elemento pai em bloco. text-align não controla o alinhamento de elementos em bloco, apenas o seu conteúdo inline. (center = O conteúdo embutido é centralizado na caixa de linha).
22 - height = A propriedade height do CSS determina a altura da área do conteúdo de um elemento. A área de conteúdo consiste no padding, margin e border do elemento.
23 - min-height = é usado para definir a altura mínima de um determinado elemento. Ele impede que o valor usado da propriedade height se torne menor que o valor especificado para min-height.
24 - float: determina que um elemento deve ser retirado do seu fluxo normal e colocado ao longo do lado direito ou esquerdo do seu containêr, onde textos  e elementos em linha irão se posicionar ao seu redor. (left = É uma palavra-chave que indica que o elemento deve flutuar à esquerda do bloco.); 
25 - list-style = é uma propriedade para configurar o estilo da lista. 
26 - margin-top = indica o espaço acima do elemento. Valores negativos são aceitos.
27 - display = display é a propriedade mais importante do CSS para controlar o layout. (inline = Um elemento com valor inline é sempre chamado de elemento de linha.);
28 - position = define alternativas para posicionar elementos, projetados para serem úteis em efeitos de animações.(absolute = se utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais especificamente o pai.), (relative = Todos os positions precisam de um ponto para iniciar o cálculo da coordenada para assim posicionar o elemento na tela. Ao contrário do que muitos acham, esse ponto não é o ponto central do elemento, o ponto base é o canto superior esquerdo do elemento. A partir deste canto, o browser irá calcular a coordenada que você definiu e irá posicionar o elemento no viewport.)
29 - z-index = trabalha com um eixo que não é muito conhecido e tampouco usado pela maioria dos desenvolvedores, o eixo Z. O eixo Z é o eixo responsável pelo cálculo e posicionamento da profundidade de algum elemento, ou seja, é aquele que irá determinar se o elemento estará mais próximo ou mais afastado da tela.
30 - top = Topo;
31 - left = esquerda;
32 - opacity = especifica a transparência de um elemento, isto é, o grau no qual o background atrás do elemento é sobreposto;
33 - cursos = especifica o cursor do mouse mostrado quando o ponteiro do mouse está sobre um elemento. (pointer =  Usado quando pairando o cursor sobre links, tipicamente uma mão.)
*/

@font-face{ /*SELETOR PARA SELECIONAR AS FONTS */
	font-family: 'Roboto';
	src: url("lib/fonts/Roboto/Roboto-Regular.ttf");
	font-size: 1em; /* tamanho padrão pra font no ccs medida relativa medida adaptavel */
}

@font-face{
	font-family: 'PT_Sans';
	src: url("lib/fonts/PT_Sans/PTSans-Regular.ttf");
	font-size: 1em;
}

@font-face{
	font-family: 'Montserrat';
	src: url("lib/fonts/Montserrat/Montserrat-Regular.ttf");
	font-size: 1em;
}

@font-face{
	font-family: 'PT_Serif';
	src: url("lib/fonts/PT_Serif/PTSerif-Regular.ttf");
	font-size: 1em;
}

@font-face{
	font-family: 'Gentium_Basic';
	src: url("lib/fonts/Gentium_Basic/GentiumBasic-Regular.ttf");
	font-size: 1em;
}

/*HEADER*/
.oculta{
	font-size: 0px;
	margin: 0px;
	padding: 0px;
}

.logo img{
	width: 240px;
	height: 50px;
	float: left;
	margin-left: -10px; 
	margin-top: -25px;
	position: absolute;
	
}


@media (max-width: 768px) {
	.logo img {
		width: 150px;
	}
}


svg{
	margin: -2px 6px;
}

.navbar{
	background-color:  #010066 !important;
	height: auto;
}

.navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
	line-height: 1;
	color: #fff !important;
    background-color:  #fff !important;
    border: 1px solid rgb(42, 75, 152) !important;
	border-radius: .25rem;
}

.navbar-toggler:hover{
	background-color:rgb(218, 219, 221) !important;
	color: rgb(42, 75, 152) !important;
	transition: 300ms !important;
}

.fone{
	text-align: center;
	height: 50px;
	background-color: rgb(42, 75, 152) !important;
}

.fone p{
	font-family: Roboto, sans-serif;
	display: inline;
	font-size: 10px;
	color: rgb(255, 255, 255);
	font-weight: bold;
}

p .telefone{
	margin-top: 15px;
}

.fa-whatsapp{
	color: chartreuse !important;
	font-size: 15px !important;
}

.nav a{
	color: white !important;
	margin-top: 25px;
	margin-bottom: 5px;
	font-size: 18px;
	font-family: 'Montserrat';
}

.nav a:hover{
	color: rgb(168, 167, 167) !important;
	transition: 400ms;
}

/*BACKGROUNDS*/
.background-empresa{
	background-color: rgb(42, 75, 152) !important;
}

.background-contato{
	background-color: #010066 !important;
}

/*TITULOS E DESCRIÇÕES*/
.titulo{
	font-family: Roboto, sans-serif;
	color: #fff;
	border-bottom: 1px solid #fff;	
	font-size: 50px;
	margin-bottom: 30px; 
	text-align: center;
}


.descricao{
	text-align: left;
  	color: #fff;
	font-family: Roboto, sans-serif;
  	margin: 5px;
}

/*EMPRESA*/
.empresa{
	margin-top: -20px;
}

/*CESTAS*/
.cesta{
	margin-top: -20px;
}

/*IMG*/

.carousel-inner {
    position: relative;
	overflow: hidden;
    max-height: 600px;
    
}

.img_servicos{
	height: 280px;
	width: 280px;
	
}

.box-img img{
	width: 100%;
	border-radius: 5px;
    height: 200px;
    vertical-align: middle;
}

/*PADDINGS*/
.padding-10{padding: 10px 0px}
.padding-20{padding: 20px 0px}
.padding-30{padding: 30px 0px}
.padding-40{padding: 40px 0px}
.padding-50{padding: 50px 0px}
.padding-60{padding: 60px 0px}
.padding-70{padding: 70px 0px}
.padding-80{padding: 80px 0px}


/*CONTATO*/
.contato{
	margin-top: -20px;
}

footer .row{/*USA-SE  o .row para configurar a largura do rodapé*/
	width: 100%; /*serve para não criar uma rolagem na tela, um schroll horizontal.isso serve para o rodapé não ultrapassar os 100% de largura do monitor.*/
	margin-left: 0px; /*A margin left de 0px ajusta o rodapé no seu posicionamento.*/
}

footer iframe{
	height: 380px;
	width: 280px;
}

footer .logotipo{
	margin-bottom: 50px;
	width: 230px;
	height: 150px;
	
	margin-left: -80px;
	margin-right: -80px;
	
}

footer .col-telefone ul{
	text-align: center;
	margin-left: -3px;
}

footer .col-endereco,
footer .col-telefone,
footer .col-form{
	margin-top: 60px;/*A MARGIN-TOP é uma margin que fornece uma distância entre a margin de cima do rodapé e as palavras: POPULAR POST, LINKS e GET IN TOUCH*/
}

footer .row-cols h4 {
	color: rgb(221, 221, 221);
	font-size: 20px;
	font-weight: bold;
	font-family: Roboto, sans-serif;
	text-align: center;
	margin-top: -50px;
}

footer .col-telefone li{
	font-size: 17px;
	color: #fff;
	font-family: Roboto, sans-serif;
	
}

footer .col-telefone li .telefone_footer{
	margin-bottom: 10px;
}

footer .col-telefone li .whatsapp_footer{
	margin-bottom: 10px;
}

footer .col-telefone i{
	margin: 0 7px; /* 0(top e bottom) 6px(left e right)*/
}

#endereco_p{
	color: #fff;
	font-size: 16px;
}

footer .col-form p{
	color: #fff;
	text-align: center;
	font-size: 15px;
}

/*FORMS*/
form.sul-met-form{
	max-width: 300px;
	margin: 0px auto;
}

form.sul-met-form input{
	width: 100%;
	margin: 5px;
	height: 50px;
	padding: 5px;
	border: none;
	color: #333;
	font-weight: bold;
	text-align: center;
}

form.sul-met-form textarea{
	padding: 5px;
	border: none;
	color: #333;
	font-weight: bold;
	text-align: center;
	width: 100%;
	min-height: 120px;
	margin: 5px;
}

form.sul-met-form input[type="submit"]{
	background-color: #fff;
	color: rgb(42, 75, 152) !important;
	font-size: 18px;
	width: 110px;
	border:1px solid #fff;
}

form.sul-met-form input[type="submit"]:hover{
	background-color: rgb(42, 75, 152) !important;
	color: #FFF !important;
	transition: 400ms;
}

/*COPY*/
div.copyright{
	background-color: rgb(224, 223, 223);
	border-top: 1px solid #000;
	width: auto;
	padding: 20px;
	height: 80px;
}

p.copyright{
	color: #000;
	margin: 0px;
	font-size: 13px;
}

p.direitos{
	text-align: center;
}

p.bitcom{
	text-align: center;
}

.link{
	color: #000 !important;
}

.link:hover{
	color: rgba(50,103,153,1) !important;
}