.canvas {
	display: none;
}

/* .canvas-default > header *******************************/

.canvas-default > header {
  align-items: center;
  background-color: rgba(255,255,255,1);
	box-shadow: 0 5px 5px rgba(0,0,0,0.05);
  display: flex;
	flex-direction: column;
  position: fixed;
	top: 0;
  transition: all ease 0.2s;
  width: 100%;
  z-index: 30;

  section {
		align-items: center;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		max-width: 1430px;
		padding: 10px;
		width: 100%;

		.left {
			display: none;
		}

		.middle {
			order: 1;

			.logo {
				font-family: var(--font-brand);
				font-size: 2.5rem;
				line-height: 2.5rem;

				a {
					color: #000;
					text-decoration: none;
				}
			}
		}

		.right {
			display: none;
		}

		.menu-mobile {
			order: 2;
		}
	}

	nav {
		display: none;
	}
}

@media (min-width: 1000px) {

	.canvas-default > header {

	  section {
			padding: 20px;

			.left {
				order: 1;
				display: block;
				width: calc(100% / 3);
			}

			.middle {
				order: 2;
				text-align: center;
				width: calc(100% / 3);

				.logo {
					font-size: 3rem;
					line-height: 3rem;
				}
			}

			.right {
				order: 3;
		  	align-items: center;
				display: flex;
			  gap: 30px;
			  justify-content: flex-end;
				width: calc(100% / 3);
			}

			.menu-mobile {
				order: 4;
				display: none;
			}
		}

		nav {
			align-items: center;
			border-top: 1px solid #ccc;
			display: flex;
			justify-content: center;
			padding: 15px;
			width: 100%;

			span {
				background-color: #df1c22;
				height: 12px;
				margin: 0 20px;
				width: 1px;
			}
		}

		&.shrink {
			padding: 20px 40px;

			.logo {

				img {
					height: 30px;
				}
			}
		}
	}
}

/* .canvas-default > main *******************************/

.canvas-default > main {
	padding-top: 20px;
	position: relative;
}

@media (min-width: 1000px) {

	.canvas-default > main {
		padding-top: 130px;
	}
}

/* .canvas-default > footer *******************************/

.canvas-default > footer {
	background-color: var(--color-brand-dark);
	color: #ddd;
	overflow: hidden;
	position: relative;
  z-index: 30;

	.bg {
		display: none;
	}

	.top {
		display: flex;
		flex-direction: column;
		gap: 40px;
		margin: 0 auto;
		max-width: 1430px;
		padding: 40px 20px;
		position: relative;
		z-index: 32;
		.left {

			.logo {
				font-family: var(--font-brand);
				font-size: 2.5rem;
				line-height: 2.5rem;
				margin-bottom: 10px;

				a {
					color: #ddd;
					text-decoration: none;
				}
			}

			p {
				color: #ccc;

				a {
					color: #ddd;
					font-size: 0.9rem;
					font-weight: 600;
					text-decoration: underline;
					text-transform: uppercase;

					&:hover {
						color: #fff;
						text-decoration: none;
					}
				}
			}

			.associations {
				align-items: center;
				display: flex;
				gap: 30px;
				justify-content: center;

				img {
					height: 50px;
					opacity: 0.9;
					transition: all ease 0.2s;
					width: auto;

					&:hover {
						opacity: 1;
					}
				}
			}
		}

		.middle {

			.news {
				background-color: rgba(255,255,255,0.1);
				padding: 20px;

				h3 {

					span {
						color: var(--color-brand-primary);
						text-transform: uppercase;
					}
				}
			}
		}

		.right {

			.sitemap {
				margin-bottom: 40px;

				.links {
					align-items: top;
					display: flex;
					gap: 80px;

					a, button {
						border: 0;
						color: #ddd;
						font-size: 0.9rem;
						font-weight: 600;
						outline: 0;
						padding: 0;
						text-align: left;
						text-decoration: none;
						text-transform: uppercase;

						&:hover {
							color: #fff;
							text-decoration: underline;
						}
					}
				}
			}

			.social {
				text-align: center;

				.message {
					font-weight: 800;
					margin-bottom: 20px;
				}

				.channels {
					align-items: center;
					display: flex;
					gap: 20px;
					justify-content: center;

					img {
						height: 40px;
						opacity: 0.7;
						transition: all ease 0.2s;
						width: auto;

						&:hover {
							opacity: 1;
						}
					}
				}
			}
		}
	}

	.bottom {
		background-color: #000;
		color: #999;
		padding: 20px 10px;
		position: relative;
		text-align: center;
		z-index: 32;

		img {
			height: 70px;
			width: auto;
		}

		.legal {
			margin-bottom: 20px;

			.btn-link {
				color: #ccc;
				margin: 0 5px;
			}
		}

		.copyright {
			font-size: 0.8rem;
		}
	}
}

@media (min-width: 1000px) {

	.canvas-default > footer {

		.bg {
			display: block;

			img {
				left: 100px;
				height: 400px;
				opacity: 0.05;
				position: absolute;
				rotate: -20deg;
				top: 100px;
				width: auto;
				z-index: 31;
			}
		}

		.top {
			flex-direction: row;
			gap: 100px;
			padding: 140px 20px;

			.left {
				width: calc((100% - 200px) / 3);

				.associations {
					justify-content: flex-start;
				}
			}

			.middle {
				width: calc((100% - 200px) / 3);
			}

			.right {
				width: calc((100% - 200px) / 3);

				.sitemap {
					margin-bottom: 30px;

					.links {
						gap: 0;

						> div {
							width: 50%;
						}
					}
				}

				.social {
					text-align: left;

					.message {
						margin-bottom: 10px;
					}

					.channels {
						justify-content: flex-start;
					}
				}
			}
		}
	}
}