/*------------------------------------------------------------------------------------------------------
Nome do projeto: Check Livros
Descrição: 

Autores:

Turma: 3TID
Matheus Felix Carlos                                                         Versão: 1.0                    
Hebert Victor Saravalle                                                      Data:20/06/21
Kaike Santos Coppola 

-----------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 992px) {
	/* --- Estilos para desktop --- */
	.col-1 {
		width: 8.33%;
	}
	.col-2 {
		width: 16.66%;
	}
	.col-3 {
		width: 25%;
	}
	.col-4 {
		width: 33.33%;
	}
	.col-5 {
		width: 41.66%;
	}
	.col-6 {
		width: 50%;
	}
	.col-7 {
		width: 58.33%;
	}
	.col-8 {
		width: 66.66%;
	}
	.col-9 {
		width: 75%;
	}
	.col-10 {
		width: 83.33%;
	}
	.col-11 {
		width: 91.66%;
	}
	.col-12 {
		width: 100%;
	}

	/* ---------- Estilo do menu ---------- */

	#nav-mobile-tablets {
		display: none;
	}
	#nav-desktop {
		display: block;
	}
	#desktopLinks {
		list-style: none;
		display: flex;
		background-color: whitesmoke;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 0.1em solid #edb91c;
		box-shadow: 0.2em 0.1em 2em black;
		width: 100%;
		position: fixed;
		z-index: 1;
	}
	.logo-menu {
		display: block;
		width: 3vw;
		padding: 0;
	}
	.img_titulo {
		width: 8em;
	}
	.li-titulo {
		width: 20%;
	}
	.a-desk {
		display: block;
		padding: 0.875em;
		color: black;
		letter-spacing: 0.1em;
	}
	.a-desk:hover {
		color: #edb91c;
	}
	.submenu {
		position: absolute;
		z-index: 1;
		background-color: whitesmoke;
		display: none;
		border-bottom: 0.1em solid #edb91c;
	}
	.submenu:hover {
		display: block;
	}
	#a-1-sub:hover + .submenu {
		display: block;
	}
	.a-sub {
		padding: 0.875em 3.3em;
	}
	.search-container {
		width: 38%;
	}
	.search-container form {
		display: flex;
		padding: 0 0 0 18%;
	}
	.search-container button {
		/* é aqui que eu mudo o btn para input */
		padding: 1% 3%;
		border-radius: 0.25em;
		background: #ddd;
		font-size: 0.9em;
		border: none;
		cursor: pointer;
	}

	/* ---------- Estilo do rodapé ---------- */

	.footer {
		background-color: #18546e;
		padding-top: 2em;
		padding-bottom: 2em;
		margin-top: auto;
	}
	.logo-container {
		text-align: center;
		color: white;
	}
	.img_logo_foot {
		width: 90%;
	}
	.footer-nav {
		display: flex;
		justify-content: space-around;
	}
	.a-footer {
		color: white;
		float: left;
		margin-bottom: 0.4em;
		font-size: 0.95em;
		letter-spacing: 0.1em;
	}
	.a-footer:hover {
		color: #edb91c;
	}
	.redes-container {
		padding-left: 10%;
	}
	.redes-container i {
		font-size: 1.6em;
		color: white;
	}


	/* ----------------- ⬇⬇ Estilos ⬇⬇ -------------------------*/

	.container {
		padding: 5% 15%;
	}

	/* ----------------- ⬇⬇ index - home ⬇⬇ -------------------------*/

	.slideshow-container {
		position: relative;
		margin: 0;
	}
	.mySlides {
		display: none;
		margin-top: 4%;
		position: relative;
	}
	.mySlides img {
		width: 100%;
		height: 90vh;
		margin: 0;
	}
	.prev, .next {
		cursor: pointer;
		position: absolute;
		top: 50%;
		width: auto;
		margin-top: -1.375em;
		padding: 1em;
		color: white;
		font-weight: bold;
		font-size: 1.2em;
		transition: 0.6 ease;
		border-radius: 0 0.2em 0.2em 0;
		user-select: none;
	}
	.next {
		right: 0;
		border-radius: 0.2em 0 0 0.2em;
	}
	.dots-container {
		position: absolute;
		bottom: 0;
		margin: 0.5em 1em;
	}
	.dot {
		cursor: pointer;
		height: 1em;
		width: 1em;
		margin: 0;
		background-color: whitesmoke;
		border-radius: 50%;
		display: inline-block;
		transition: background-color 0.6 ease;
	}
	.active1, .dot:hover {
		background-color: #f0cd65;
	}
	.prev:hover, .next:hover {
		background-color: rgba(0, 0, 0, 0.8);
		color: #edb91c;
	}
	.legenda-slide {
		width: 70%;
		height: 50%;
		text-align: center;
		background-color: #ffffff10;
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		position: absolute;
		top: 25%;
		left: 15%;
	}
	.icon-slide {
		font-size: 2.4em;
		color: #f0cd65;
		margin: 0.5em 0;
	}
	.legenda-slide h1 {
		color: white;
		margin-top: 12%;
	}
	
	/* -------------------------------- */

	.beneficios-section {
		padding: 6% 10% 7% 10%;
		background-color: white;
	}
	.beneficios-container {
		display: flex;
		background-color: white;
		border-radius: 0.9em;
		border: 0.1em solid #edb91c;
		box-shadow: 0.3125em 0.625em 1.125em #888888;
		color: black;
	}
	.beneficios-container p {
		text-align: justify;
		text-indent: 0.2em;
		line-height: 1.5em;
	}
	.beneficios-itens {
		width: 50%;
		padding: 2%;
	}
	.beneficios-section h1, .beneficios-section h2, .tutorial-section h1 {
		text-align: center;
	}
	.beneficios-section h1 {
		margin-bottom: 5%;
		font-style: italic;
	}
	.p-beneficios {
		text-align: center;
	}
	.a-beneficios {
		text-decoration: underline;
		color: skyblue;
	}
	
	/* -------------------------------- */

	.ranking-container {
		background-color: #247ba0;
		padding: 6% 10% 7% 10%;
	}
	.h1-ranking-container {
		color: white;
		text-align: center;
		margin-bottom: 2%;
	}
	.ranking-positions {
		background-color: white;
		border-radius: 0.9em;
		padding: 2.5% 5%;
		display: flex;
		justify-content: space-between;
	}
	.ranking-positions h2 {
		font-family: Verdana, sans-serif;;
		font-weight: bold;
	}
	.ranking-positions p {
		font-family: Georgia, serif;
		font-weight: 400;
		font-size: 1.2em;
	}
	
	/* -------------------------------- */

	.tutorial-section {
		background-color: white;
		padding: 6% 10% 7% 10%;
	}
	.tutorial-section h1 {
		text-align: center;
		margin-bottom: 2%;
	}
	.tutorial-container {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.tutorial-item {
		background-color: white;
		border: 0.1em solid #edb91c;
		border-radius: 0.9em;
		width: 30%;
		padding: 2%;
		text-align: justify;
		box-shadow: 0.3125em 0.625em 1.125em #888888;
	}
	.tutorial-section p, a {
		text-align: justify;
		text-indent: 0.3em;
		line-height: 1.5em;
	}

	/* ----------------- ⬇⬇ Gêneros de livros ⬇⬇ -------------------------*/

	.generos-container {
		padding: 9% 5%;
	}
	.generos-flex {
		display: flex;
		flex-wrap: wrap;
	}
	.generos-item {
		width: 33.33%;
		position: relative;
		margin-bottom: 2.5%;
	}
	.legenda-genero {
		color: white;
		background-color: black;
		padding: 0.5em 1em;
		position: absolute;
		top: 0;
		left: 0;
	}
	.generos-container img {
		width: 90%;
		height: auto;
		box-shadow: 0.3125em 0.625em 1.125em #888888;
	}

	/* ----------------- ⬇⬇ Fale conosco ⬇⬇ -------------------------*/

	.contato-container {
		padding: 9% 5%;
	}
	.form-container {
		padding: 9% 20% 5% 20%;
	}
	.sugerir-div {
		background-color: white;
		border: 0.1em solid #edb91c;
		box-shadow: 0.3125em 0.625em 1.125em #888888;
		padding: 2.5% 5%;
		display: flex;
		justify-content: space-between;
		cursor: pointer;
	}
	.sugerir-div:hover {
		background-color: whitesmoke;
	}
	.sugerir-text {
		margin-bottom: 0.625em;
	}
	.icon-contato {
		margin-top: 0.2em;
		font-size: 2.4em;
		color: #f0cd65;
	}
	#form-1, #form-2 {
		display: none;
	}
	input[type="text"], select, textarea, input[type="email"], input[type="password"] {
		width: 100%;
		padding: 0.75em;
		border: 0.1em solid #ccc;
		border-radius: 0.25em;
		margin-top: 0.9em;
		margin-bottom: 1.5em;
		resize: none;
	}
	input[type="submit"] {
		background-color: #ed734c;
		color: white;
		padding: 0.75em 1.25em;
		border: none;
		border-radius: 0.25em;
		cursor: pointer;
	}
	input[type="submit"]:hover {
		background-color: #d64a3a;
	}
	.voltar-btn {
		background-color: white;
		color: black;
		padding: 0 1.25em 1em 0;
		border: none;
		border-radius: 0.25em;
		cursor: pointer;
		font-size: 1.4em;
	}
	.voltar-btn:hover {
		color: #edb91c;
	}
	.search-container input {
		margin: 0;
		width: 100%;
	}

	/* ----------------- ⬇⬇ Quem somos ⬇⬇ -------------------------*/

	.sobre-section {
		padding: 9% 5%;
	}
	.sobre-container {
		display: grid;
		grid-template-columns: auto auto;
		grid-template-rows: auto auto;
		grid-gap: 5%;
	}
	.sobre-itens {
		padding: 5%;
		border: 0.1em solid #edb91c;
		border-radius: 0.9em;
		background-color: white;
		box-shadow: 0.3125em 0.625em 1.125em #888888;
	}
	.item-1 {
		grid-row-start: 1;
		grid-row-end: 2;
		grid-column-start: 1;
		grid-column-end: 3;
		margin-right: 55%;
		width: 100%;
	}
	.item-3 {
		width: 100%;
		padding: 0;
		overflow: hidden;
		border: 0;
		box-shadow: 0;
		display: contents;
	}
	.sobre-itens p {
		text-align: justify;
		text-indent: 0.3em;
		line-height: 1.5em;
	}
	.sobre-itens ul {
		list-style: disc;
		margin-left: 5%;
		margin-top: 2%;
	}
	.p-sobre {
		font-weight: bold;
	}
	.mySlides1 {
		display: none;
	}
	.mySlides1 img {
		border-radius: 0.9em;
		box-shadow: 0.3125em 0.625em 1.125em #888888;
		width: 100%;
		height: auto;
		margin: 0;
	}

	/* --------------- ⬇⬇ Estilos cadastro - login ⬇⬇ -----------------------*/

	.cad-section {
		padding: 2.5% 20%;
	}
	.cad-div {
		border: 0.1em solid #edb91c;
		padding: 5%;
		border-radius: 0.9em;
		box-shadow: 0.3125em 0.625em 1.125em #888888;
	}
	.checkbox-div {
		margin-bottom: 3%;
	}
	.checkbox-div p {
		display: inline;
	}
	.msg-geral {
		width: 50%;
		margin: 0.005% auto;
		padding: 0.625em;
		display: block;
		border-radius: 5em;
		text-align: center;
		margin-bottom: 2em;
	}
	.msg-sucesso {
		background-color: #6cc2e7b6;
		border: 0.1em solid #18546e;
		color: #006c9b;
	}
	.msg-erro {
		background-color: rgba(202, 63, 63, 0.287);
		color: rgb(255, 47, 47);
		border: 0.1em solid rgb(218, 3, 3);
	}
	.img-cad {
		width: 13%;
		margin: 0 43.5%;
	}

	/* ----------------- ⬇⬇ Resultados ⬇⬇ -------------------------*/

	.resultados-container {
		padding: 9% 5%;
	}
	.flex-livros {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.livro-resultado {
		display: contents;
		cursor: pointer;
	}
	.resultados-container img {
		width: 20%;
		height: auto;
		margin-bottom: 3%;
		box-shadow: 0.3125em 0.625em 1.125em #888888;
	}
	.resenhas-container {
		padding: 9% 5%;
		display: flex;
		justify-content: space-between;
	}
	.img-container {
		width: 35%;
	}
	.img-container img {
		width: 80%;
		height: auto;
	}
	.resenhas-div {
		width: 65%;
	}
	.resenha-user {
		background-color: white;
		padding: 2%;
		box-shadow: 0.3125em 0.625em 1.125em #888888;
		margin-bottom: 2%;
	}
	.resenha-user p {
		text-indent: 0.5em;
	}
	.dados-livro {
		background-color: #247BA0;
		width: 80%;
		padding: 2%;
		box-shadow: 0.3125em 0.625em 1.125em #888888;
		color: white;
	}
	.a-dell{
		color:black;
		float: right;
	}

	/* ----------------- ⬇⬇ adm - página ⬇⬇ -------------------------*/

	.adm-section {
		padding: 9% 20%;
	}
	input[type="file"], input[type="date"] {
		padding: 0.75em;
		border: 0.1em solid #ccc;
		border-radius: 0.25em;
		margin-top: 0.9em;
		margin-bottom: 1.5em;
	}

	/* ----------------- ⬇⬇ perfil - página ⬇⬇ -------------------------*/
	.perfil-section {
		background-image: url(../img/pexels-pixabay-271816.jpg);
		background-repeat: no-repeat;
		background-position: 0 35%;
		background-size: cover;
		width: 100%;
		padding: 15%;
		box-shadow: 0.2em 0.1em 2em black;
		border-bottom: 0.1em solid #EDB91C;
		position: relative;
	}
	.img-div {
		position: absolute;
		bottom: 0;
		left: 4.5%;
		color: white;
	}
	.img-div h1 {
	    
		margin-bottom: 5%;
	}
	.avatar-perfil {
		width: 18%;
		height: auto;
	}
	.resenhas-produzidas-container, .information-container {
		padding: 3.5% 5%;
	}

}