/*
* 
* @author Cesar Developer
*/


/**
fonts
*/


@import url('font-awesome.css'); /* Full icons list: http://fontawesome.io/icons/ */

/* Material Design Iconic Font */
@import url('material-design-iconic-font.min.css'); /* Full icons list: http://zavoloklom.github.io/material-design-iconic-font/cheatsheet.htmls */

/* Google fonts */
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,700,700i|Montserrat:300,400,500,600,700");




/*LAYOUT

=======================================*/

/* 21º */
html, body, #home {
	height: 100%;
	/* 71º */
	overflow-x: hidden;
}


/* 11º */
#home {
	background: url(../img/imagem6.jpg);
	background-attachment: fixed;
	font-family: 'Roboto', Helvetica, sans-serif;
}

#produto {
	background: white;
	background-attachment: fixed;
	font-family: 'Roboto', Helvetica, sans-serif;

}

.inicio-produto {
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
	color: white;
}

.inicio-caixa {
	background-color:#e32107;
}

.cor-branco {
	color: black;
}

.fundo-branco {
	color: white;

}

#produto-afinador {
	background: rgb(255, 60, 0);
	font-family: 'Roboto', Helvetica, sans-serif;
	
}

#preco {
	background-color: rgb(255, 239, 224);
}


/*12º BARRA DE NAVEGAÇÃO */
nav.navbar-transparente{
	padding: 15px 0px;
	background: linear-gradient(50deg, red, orange);
	margin-right: 14px;

}


/*13º textos do nav */
.navbar-light .navbar-nav .nav-link {
	color:white;
	
}


/*14º textos do nav hover */
.navbar-light .navbar-nav .nav-link:hover {
	background: rgba(43,38,38, 0.3);
	color: white;

}

/*
.navbar-light .navbar-toggler-icon {
	color: rgba(255, 255, 255,.5);
	border-color: rgba(255, 255, 255,0.5);
}
*/

.divisor {
	width: 1px;
	background: white;
	margin: 12px 15px;
}

/*==================capa=================== */

/* capa */
.capa {
	text-align: center;
}

/* 28º classe botão */
.btn-custom{
	color:white;
	border-radius: 500px;
	text-transform: uppercase;
	transition: background 0.4s, color 0.4s;
	padding: 10px 20px;
}

/* 29º classe botao roxo */
.btn-roxo {
	background: #f86125;
}

/* 29º classe botao roxo */
.btn-roxo:hover {
	background: #e32107;
	color: white;
}



/* 29º classe botao roxo */
.btn-branco {
	border: 2px solid white;
}

/* 29º classe botao roxo */
.btn-branco:hover {
	background-color: white;
	color: black;
}

.photo {
	transition: all 0.3s ease-in-out;
}

.photo:hover {
	-webkit-transform: translateY(-9px);
	-ms-transform: translateY(-9px);
	-o-transform: translateY(-9px);
	transform: translateY(-9px);
	-webkit-box-shadow: 0 18px 24px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 18px 24px rgba(0, 0, 0, 0.15);
	-o-box-shadow: 0 18px 24px rgba(0, 0, 0, 0.15);
	box-shadow: 0 18px 24px rgba(0, 0, 0, 0.15);
  }





/* Estrutura de conteudos */
/* 40º aplicar na seção servicos e criar uma classe caixa */

.caixa {
	padding-top: 20px;
	padding-bottom: 20px;
	
}

#servicos {
	background: white;
	
}

.borda {
	border-bottom: 1px solid #e5e5e5;
}

/* 51º cor */
#servicos h2, h3 {
	color: #000;
}


#recursos h2 {
	color: white;
	
}

#recursos h3 {
	color: #9bf0e1;
	

}

/* 65º cor */
#recursos {
	color: white;
	font-family: 'Roboto', Helvetica, sans-serif;
}



/* 41º classe albuns */
.albuns {
	padding: 10px 0px;
}

/* 70º */
.rotacionar {
	transform: rotate(20deg);
	padding-right: 300px;
	
	
}

/* Rodapé */

/* 80º */
footer {
	background: #000;
	padding: 50px 0px 20px 0px;
	position: relative;
}

/* 84º h4 */
footer h4 {
	color: #919496;
	font-size: 0.8em;
	text-transform: uppercase;

}

/* 85º links */
footer .navbar-nav a {
	color: white;
	font-size: 0.8em;

}

/* 86º underline */
footer .navbar-nav a:hover {
	background: rgba(43,38,38, 0.3);
	color: white;

	
}

/* 87º */
footer ul {
	list-style: none;

}

/* 88º */
footer ul li {
	float: right;
	margin: 0 5px;

}



/* tipografia*/

/* 23º */
h1 {
	font-weight: 900;
	letter-spacing: -0.05em;
	margin-bottom: 50px;
	color: white;
}

.preto {
	color: #4e4e4e;
	font-size: 20px;
}

.logo {
	color:#fff;
	font-size: 20px;

	
}

#imagem-principal {
	padding-top: 150px;
	padding-right: 100px;
	background-color: transparent;

}

/* 49º h2 */
h2 {
   font-size: 3em;
   font-weight: 700;
   letter-spacing: -0.04em;
}

/* 50º h3 */
h2 {
   font-size: 2em;
   font-weight: 700;
   letter-spacing: -0.04em;
}

#servicos h1 {
	color: black;
	border-bottom: 2px solid #333;
    margin-top: 30px;
    margin-left: 10px;
    padding: 10px;
	
}



.container {
	color: black;
	
}

.borda {
	border-bottom: 2px solid #333;
}



/*=============================== Adicionar Media Queries ============================================= */


/* 24º media query copiar do site colar e fazer alterações

site_link: https://getbootstrap.com/docs/4.0/layout/overview/;
 */



 @media (max-width: 575.98px){

	/* 29º */
	.btn-custom {
		margin: 10px 15px;
		font-size: 1em;
	}

	.media {
		padding-top: 11px;
		width: 190px;
		height: 220px;
	}

	#small-logo {
		width: 550px;
		height: 400px;
	}

	#espacamento-ingrid {
		padding-right: 260px;
	}

	#espacamento-cesar {
		padding-right: 280px;
	}

	.google-espacamento .photo img {
		padding-left: 14px;
	}

	.capa {
		text-align: center;

	}

	.capa img {
		width: 400px; height: 400px;
	}

	.tamanho-iframe iframe {
		width: 520px; height: 300px;
	}
	
	#rodape img {
		width: 40px;
		padding-bottom: 200px;
		
	}


}




/* Extra small devices (portrait phones, less than 576px) */

@media (max-width: 576px){

	/* 29º */
	.btn-custom {
		margin: 10px 15px;
		font-size: 1em;
	}
	


}



/* Medium devices (tablets, 768px and up) */
@media (max-width: 767.98px)  { 

		/* 29º */
		.btn-custom {
			margin: 10px 15px;
			font-size: 1em;
		}
	

	/* 26º */
	h1{
		font-size: 4em;
	}
	
	.media {
		padding-top: 11px;
		width: 190px;
		height: 220px;
	}

	#small-logo {
		width: 550px;
		height: 400px;
	}

	#espacamento-ingrid {
		padding-right: 320px;
	}

	#espacamento-cesar {
		padding-right: 320px;
	}


	.espacamento-imagem {
		width: 40px;
	}

	.imagem-esquerda {
		padding-top: 10px;
		padding-right: 240px;
		width: 10px;
		
	}
	
	.espacamento-imagem {
		padding-top: 10px;
		width: 10px;
	}

}


.btn-red {
	margin-right: 10px;
}

.btn-red:hover {
	background: #e32107;
	color: white;

}


/* Large devices (desktops, 992px and up) */
@media (max-width: 991.98px) {

		/* 29º */
		.btn-custom {
			margin: 10px 15px;
			font-size: 1em;
		}
	

	/* 27º */
	h1{
		font-size: 4em;
	}

	.media {
		padding-top: 11px;
		width: 190px;
		height: 220px;
	}

	#small-logo {
		width: 550px;
		height: 400px;
	}
	
	.espacamento-div {
		padding-left: 30px;
		
	}
		
	.espacamento-div ul {
		padding-right: 80px;
		
	}

	.espacamento-imagem {
		width: 40px;
	}

	

} 

/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) { 
/* 28º */

	h1{
		font-size: 5em;
	}


}