﻿/* Configurações Iniciais */

@font-face {
     font-family: quentin;
     src: url('fonts/quentin.otf');
}

* {
	padding:0;
	margin:0;
	vertical-align:baseline;
	list-style:none;
	border:0
}

body
{
	display: flex;
	justify-content: center;
	flex-direction: column;
}

section
{
	background-color: #FBFEF9;
	box-sizing: border-box;
	display: flex;
	font-family: 'Montserrat', sans-serif;
	justify-content: center;
	text-align: center;
	padding: 70px 20px 70px 20px;
	width: 100%;
}

h1
{
	font-weight: normal;
}

h2
{
	font-size: 30px;
	margin-bottom: 30px;
}

.inner-section
{
	max-width: 1000px;
	width: 100%;
}

/* Fim das Configurações Iniciais */

/* Fontes */

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

/* Fim das fontes */

/* Seção Apresentação */
#apresentacao
{
	background-image: url("img/bg-header.jpg");
	background-size: cover;
	min-height: 100vh;
	padding: 0;
}

#apresentacao .inner-section
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap-reverse;
}

#apresentacao .coluna
{
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 30px;
	margin-top: 30px;
	min-width: 300px;
	max-width: 50%;
	width: 100%;
}

#apresentacao h1
{
	font-size: 20px;
	font-weight: normal;
}

#apresentacao h2.titulo-album
{
	font-family: 'quentin', sans-serif;
	font-size: 50px;
	font-weight: normal;
	margin-top: 20px;
	margin-bottom: 20px;
}

#apresentacao p {
	margin-bottom: 50px;
}

#apresentacao .capa-album img
{
	box-shadow: 5px 5px 10px #666;
	width: 100%;
	max-width: 400px;
}

@media screen and (max-width: 500px)
{
	#apresentacao .capa-album img
	{
		max-width: 250px;
		width: 250px;
	}
}

/* Fim da Seção Apresentação */

/* Seção Teaser */
#teaser .texto-teaser
{
	margin-top: 50px;
	margin-bottom: 80px;
}

#teaser .linha
{
	display: flex;
	justify-content: center;
	margin-bottom: 50px;
	flex-wrap: wrap-reverse;
}

#teaser .linha .coluna
{
	align-items: center;
	display: flex;
	justify-content: center;
	flex-direction: column;
	max-width: 50%;
	min-width: 350px;
	width: 100%;
}

#teaser .linha.invertida
{
	flex-direction: row-reverse;
}

#teaser .linha .coluna h3
{
	margin-bottom: 10px;
}

#teaser .linha .coluna p
{
	margin: 20px 0 20px 0;
}
@media screen and (max-width: 500px)
{
	#teaser .linha .coluna p
	{
		width: 300px;
	}
}

#teaser .linha .coluna audio
{
	margin-top: 10px;
}

#teaser .linha .coluna img 
{
	margin-bottom: 30px;
	width: 300px;
}
/* Fim da Seção Teaser */

/* Seção Formulário */
#formulario
{
	background-color: #0E0F19;
	color: #FFF;
}

#mc_embed_signup
{
	margin-top: 50px;
}
#mc_embed_signup input
{
	border-radius: 5px;
	font-size: 18px;
	text-align: center;
	padding: 20px;
	margin-bottom: 30px;
}
#mc_embed_signup input[type=email]
{
	width: 400px;
}
@media screen and (max-width: 500px)
{
	#mc_embed_signup input[type=email]
	{
		width: 250px;
	}
}
.button
{
	background-color: #0C6291;
	border-radius: 5px;
	font-size: 18px;
	text-align: center;
	padding: 20px;
	margin-bottom: 30px;
	text-decoration: none;
	color: #FFF;
	cursor: pointer;
	transition: 500ms;
}
.button:hover
{
	background-color: #0e72a9;
	transition: 500ms;
}
/* Fim da seção formulário */