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

/*CORES DA MARCA
#581248 ROXO LETRA D
#9d074f ROXO LETRA K
#80134a ROXO GRAFISMO
#555 CINZA
#DDD CINZA CLARO
*/

/*GERAL*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
    list-style-type: none;
}

/*barra de rolagem*/
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background-color: #ddd;
}

::-webkit-scrollbar-thumb {
	background-color: #80134a;
	border-radius: 10px;
}

@font-face {
	font-family: Flode;
	src: url("../fonts/flodeneue-regular.otf")
}

@font-face {
	font-family: FlodeB;
	src: url("../fonts/flodeneue-bold.otf")
}

html {/*Barra rolagem Firefox*/
  scrollbar-color: #80134a #ddd; /* [cor do thumb] [cor do track] */
  scrollbar-width: thin;
}

body {
	font-family: "Century Gothic";
	font-size: 16px;
	color: #555;
}

header {
	display: flex;
	flex-direction: column;
	width: 100%;
}

header span {
	display: flex;
	flex-direction: column;
	height: 140px;
	z-index: 0;
	background-image: url("../img/grafismo-cima.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top right;
}

header div {
	width: 16%;
    display: flex;
    z-index: 1;
    margin: 0 auto;
    margin-top: -100px;
	align-items: center;
    justify-content: center;
}

header div img {
	width: 100%;
    max-width: 120px;
	min-width: 75px;
}

/*RODAPE*/
footer {
	display: flex;
    flex-direction: column;
    width: 100%;
	margin-top: 30px;
}

footer span {
	display: flex;
    flex-direction: column;
    height: 140px;
    z-index: 0;
	background-image: url("../img/grafismo-baixo.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
}

footer nav {
	display: inline-flex;
    flex-direction: row;
	margin: 0 auto;
    width: 200px;
    margin-top: -140px;
	gap: 12px;
}

footer img {
	display:flex;
	margin: 0 auto;
	width: 10%;
	max-width: 60px;
	min-width: 40px;
	margin-top: 10px;
	margin-bottom: 10px;
}

footer p {
	text-align: center;
    color: #9d074f;
    font-size: 11px;
    width: 50%;
    margin: 0 auto;
}

/*REDES SOCIAIS RODAPE*/
.menu-rodape a {
	display: block;
	width: 30px;
	height: 30px;
	overflow-x: hidden;
	text-indent: -1000px;
	filter: grayscale(100%);
  	transition: filter 0.3s ease;
}

.menu-rodape a:hover {
	filter: grayscale(0%);
}

.facebook {
	background: url("../img/spriterede.svg") no-repeat 0px 0px;
	background-size: cover;
}

.instagram {
	background: url("../img/spriterede.svg") no-repeat -30px 0px;
	background-size: cover;
}

.youtube {
	background: url("../img/spriterede.svg") no-repeat -60px 0px;
	background-size: cover;
}

.whatsapp {
	background: url("../img/spriterede.svg") no-repeat -90px 0px;
	background-size: cover;
}

.artistas {
	background: url("../img/spriterede.svg") no-repeat -120px 0px;
	background-size: cover;
}

/*TELA -*768PX*/
@media (min-width:421px) and (max-width:768px) {
	header span {
		height: 200px;
	}
	
	header div{
		margin-top: -140px;
	}
	
	footer p {
		font-size: 14px;
    	width: 100%;
	}
	
	footer span {
		height: 200px;
	}
	
	footer img {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	footer nav {
		margin-top: -160px;
	}
}

/*TELA + 768*/
@media (min-width:769px) {
	header span {
		height: 285px;
	}
	
	header div {
		margin-top: -220px;
	}
	
	footer p {
		font-size: 14px;
    	width: 100%;
	}
	
	footer span {
		height:  285px;
	}
	
	footer img {
		margin-top: 30px;
		margin-bottom: 30px;
	}
	
	footer nav {
		margin-top: -200px;
	}
}