/* Aviso Cookies */

.container--cookies {
	position: fixed;
	bottom: 0%;
	left: 50%;
	transform: translate(-50%, 0%);
	width: 90%;
	padding: 4em 1em 0;
	text-align: center;
	background-color: var(--bg-dark);
	box-shadow: 0 0 0.5rem hsl(0, 0%, 50%);
	border-radius: 1rem 1rem 0 0;
	border: var(--ls-1px) solid var(--popup-border);
	animation: popup 0.7s linear;
	z-index: 10;
}

body.light .container--cookies {
	background-color: var(--white);
	box-shadow: 0 0 0.5rem hsl(0, 0%, 80%);
}

@keyframes popup {
	0% {
		bottom: -50%;
	}
	100% {
		bottom: 0%;
	}
}

.cookie__img {
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 35%;
}

.cookies__btns {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 100%;
	padding: 1.3em 0;
}

/* Medium Views (>600px) */

@media screen and (orientation: portrait) and (min-width: 600px) {
	.container--cookies {
		bottom: 2%;
		left: calc(100% - 40%);
		transform: translate(0%, 0%);
		width: 37%;
		padding: 3.5em 1em 0;
		border-radius: 1rem;
	}

	.cookie__img {
		width: 30%;
	}

	.title.cookies__title {
		font-size: var(--fsl-h4);
	}

	.cookies__text {
		font-size: var(--fs-small);
	}

	.cookie__btn {
		font-size: var(--fs-small);
	}

	.cookies__btns {
		padding: 1em 0 1.2em;
	}
}

@media screen and (orientation: landscape) and (min-width: 600px) {
	.container--cookies {
		bottom: 2.5%;
		left: calc(100% - 32%);
		transform: translate(0%, 0%);
		width: 30%;
		padding: 3.5em 1em 0;
		border-radius: 1rem;
	}

	.cookie__img {
		width: 30%;
	}

	.title.cookies__title {
		font-size: var(--fsl-h4);
	}

	.cookies__text {
		font-size: var(--fs-small);
	}

	.cookie__btn {
		font-size: var(--fs-small);
	}

	.cookies__btns {
		padding: 1em 0 1.2em;
	}

	.btn__effect {
		padding: 0.5em 1em;
	}
}

/* Medium Views (>1200px) */

@media screen and (orientation: landscape) and (min-width: 1200px) {
	.container--cookies {
		bottom: 3.5%;
		left: calc(100% - 28%);
		width: 25%;
		padding: 3.2em 1em 0;
	}
}

/* Large Views (>1500px) */

@media screen and (orientation: landscape) and (min-width: 1500px) {
	.container--cookies {
		bottom: 3.5%;
		left: calc(100% - 20%);
		width: 17%;
		padding: 3em 1em 0;
	}

	.title.cookies__title {
		font-size: var(--fsl-btn);
	}
}