@import url("font.css");

:root {
	/**
	 * Generic
	 */
	/*background da pagina*/
	--color-background: rgb(240, 240, 240);
	/*cor padrão para background claro*/
	--color-txt-to-back-light: #3f3f3f;
	/*cor padrão para background escuro*/
	--color-txt-to-back-dark: #fff;
	/*background de botão*/
	--color-back-btn: #ed3237;

	/**
	 * Header
	 */
	/*background do cabeçalho*/
	--color-back-header: #2e2e2e;
	/*tamanho da fonte*/
	--size-lbl-header: 1rem;

	/**
	 * Description
	 */
	/*tamanho da fonte do título. Adicionar negrito*/
	--size-title-descr: 2.333333rem;
	/*tamanho da fonte do subtítulo*/
	--size-subtitle-descr: 1.333333rem;

	/**
	 * Form
	 */
	/*background do formulário*/
	--color-back-form: rgba(255, 255, 255, 0.07);
	/*borda*/
	--border-form: 1px solid white;
	/*tamanho da fonte. Adicionar negrito no botão*/
	--size-lbl-input-form: 1rem;

	/**
	 * Title depoiments (dep)
	 */
	/*cor do titulo dos depoimentos*/
	--color-title-dep: #333333;
	/*tamanho da fonte*/
	--size-title-dep: 1.666667rem;

	/**
	 * Depoiments (dep)
	 */
	/*background dos depoimentos*/
	--color-back-dep: #fff;
	/*cor da sombra*/
	--color-shadow-dep: rgba(51, 51, 51, 0.20);
	/*tamanho da fonte dos nomes. Adicionar negrito*/
	--size-name-peple-dep: 1rem;
	/*tamanho da fonte das datas*/
	--size-date-dep: 0.916666rem;
	/*tamanho da fonte dos textos*/
	--size-txt-dep: 1rem;
	/*tamanho da fonte das curtidas*/
	--size-likes-dep: 0.916666rem;
	/*lagura da imagem da pessoa*/
	--width-img-peple-dep: 65px;
	/*altura da imagem da pessoa*/
	--height-img-peple-dep: 65px;
	/*lagura do bloco dos depoimentos*/
	--width-content-dep: 300px;
	/*altura do bloco dos depoimentos*/
	--height-content-dep: 350px;
	/*a sombra do bloco de cada depoimento tem:
	 angulo de 145°
	 tamanho de 20px
	 distancia de 5px
	 só precia ajudar para ficar igual
	 */
	/*1pt = 1.333333333333*/
	font-size: 12pt;
}

* {
	font-family: 'Quicksand', sans-serif;
	text-decoration: none;
	box-sizing: border-box;
	outline: none;
}

ul { list-style: none; }

/*
 * Geral
 */
body {
	margin: 0;
	background: var(--color-background);
}

#container {  }

	#top-bar {
		position: fixed;
		display: flex;
		top: 0;
		width: 100%;
		padding: 15px 100px;
		z-index: 1;
		background: var(--color-back-header);
	}

/* Conteúdo da página */
#content {  }

	.video-background {
		position: fixed;
		width: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
		overflow: hidden;
	}

	/* Banner */
	#main-section {
		height: 100vh;
		padding: 100px 80px 0px 80px;
		font-size: var(--size-lbl-header);
		line-height: 2;
	}

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#text-info {
		display: flex;
		color: white;
		margin: auto;
	}
		#text-info > div {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.title-info { font-size: var(--size-title-descr); }
		.desc-info {
			font-size: var(--size-subtitle-descr);
			text-align: justify;
		}

		/* Formulário */
		#form {
			margin: auto 30px;
			width: 350px;
			font-size: var(--size-lbl-input-form);
			padding: 45px 30px;
			border: var(--border-form);
			background: var(--color-back-form);
		}
			#form .msg-form {
				display: none;
				color: white;
				font-size: 0.85rem;
				font-weight: bold;
				text-align: center;
				padding: 5px;
				border: 1px solid green;
				background: rgba(0,150,0,0.3);
			}

		#form input, #form select {
			width: 100%;
			margin-bottom: 25px;
			padding: 10px;
			border: 5px solid white;
		}

		#form input::placeholder {
			color: var(--color-txt-to-back-light);
		}

		#form button {
			cursor: pointer;
			height: 47px;
			width: 100%;
			background-color: var(--color-back-btn);
			border-color: var(--color-back-btn);
			border: 0;
			border-radius: 5px;
			color: white;
			font-weight: bold;
		}


	/* Cards (depoimentos) */
	.card-section {
		padding: 0 25px 25px 25px;
		background-color: var(--color-background);
	}

	/*popup*/
	#container-show-dep {
		position: fixed;
		display: flex;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 10;
		opacity: 0;
		visibility: hidden;
		background: rgba(0,0,0,0.5);
		transition: all 0.28s;
	}
		#container-show-dep .close {
			cursor: pointer;
			position: absolute;
			top: 20px;
			right: 20px;
			color: white;
			font-size: 1.1rem;
			font-weight: bold;
			border: none;
			border-radius: 50px;
			padding: 10px 15px;
			background: var(--color-back-btn);
		}
		.content-show-dep {
			margin: auto;
			width: 45%;
			height: 500px;
			padding: 20px;
			background: white;
		}
			.content-show-dep .figure-img {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
				.content-show-dep .figure-img img {
					width: 100%;
					height: 100%;
					object-fit: scale-down;
				}

	.title-dp {
		color: var(--color-title-dep);
		font-size: var(--size-title-dep);
		font-weight: bold;
	}

	.card-content {  }

	.flex-container {
		display: flex;
		flex-wrap: wrap;
	}

	.flex-container > div {
		width: var(--width-content-dep);
		height: var(--height-content-dep);
		margin: 15px 10px;
		padding: 15px;
		background: var(--color-back-dep);
		box-shadow: 2px 5px 20px -2px var(--color-shadow-dep);
	}

	.card-profile { display: flex; }
		.card-profile > div { margin: auto; }

		.card-author-photo {
			width: var(--width-img-peple-dep);
			height: var(--height-img-peple-dep);
			border-radius: 50%;
			overflow: hidden;
		}
			.card-author-photo img {
				width: 100%;
				height: auto;
			}

		.card-author {  }

			.card-author-name {
				font-size: var(--size-name-peple-dep);
				font-weight: bold;
				text-transform: uppercase;
			}

			#card-date {
				margin-top: 5px;
				font-size: var(--size-date-dep);
			}	

	.card-depoiment {
		display: flex;
		width: 100%;
		height: 205px;
		padding-top: 15px;
		overflow: hidden;
		background: white;
	}
		.card-depoiment > p {
			margin: auto;
			text-align: center;
		}
		.card-depoiment > img {
			width: 100%;
			height: 100%;
			object-fit: scale-down;
		}
		.card-depoiment .video { background: rgb(240,240,240); width: 100%; margin-top: 30px; }

	.card-bottom { margin-top: 10px; }

		.card-more { display: flex; }

			.card-more button {
				cursor: pointer;
				color: white;;
				font-size: var(--size-likes-dep);
				margin: auto;
				padding: 10px 20px;
				border: none;
				background: var(--color-back-btn);
			}

#footer {
	display: block;
	color: white;
	text-align: center;
	padding: 20px;
	line-height: 1.5;
	background-color: var(--color-back-header);
}
	#footer a {
		color: white;
		text-decoration: underline;
	}

/**
 * Responsive to mobile
 */
@media screen and (max-width: 1000px)
{
	.video-background { height: 100%; width: auto; }
	#main-section {
		height: 100%;
		padding: 100px 60px 0px 50px;
	}
	#text-info { flex-direction: column; }
	.title-info { font-size: 2rem; }
	.title-info .add-loc:before { content: "ABAIXO"; }
	.desc-info { font-size: 1.1rem; }
	#form { margin: 30px auto; }
	.content-show-dep { width: 95%; height: 600px; }
	.flex-container > div { margin: 15px auto; }
}