.canvas {
	display: none;
}

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

.canvas-default > header {
  align-items: center;
  background-color: rgba(255,255,255,0.97);
	box-shadow: 0 5px 5px rgba(0,0,0,0.05);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 10px 20px;
  position: fixed;
  transition: all ease 0.2s;
	top: 0;
  width: 100%;
  z-index: 30;

  .logo {

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

  nav.main {
	  align-items: center;
	  display: none;
	  flex-grow: 1;
	  gap: 40px;

	  a {
		  color: var(--color-brand-purple);
		  font-size: 1.1rem;
		  font-weight: 800;
		  text-decoration: none;
			text-transform: uppercase;

		  &:hover {
		  	color: var(--color-brand-blue);
	 		}

			&.active {
				border-bottom: 0.05rem solid var(--color-brand-purple);
			}
	  }
 	}

  nav.right {
	  align-items: center;
	  display: none;
	  flex-grow: 1;
	  gap: 30px;
	  justify-content: flex-end;
 	}

  nav.mobile {
	  align-items: center;
	  display: flex;
	  flex-grow: 1;
	  gap: 20px;
 	}

  .menu-mobile {
	  display: inline-flex;
	  justify-content: flex-end;
 	}

  &.shrink {
	  box-shadow: 0 5px 5px rgba(0,0,0,0.05);
 		padding: 20px;
  }
}

@media (min-width: 1000px) {

	.canvas-default > header {
		gap: 20px;
	  padding: 15px 20px;

		.logo {

			img {
				height: 45px;
			}
		}

		nav.main {
			display: flex;
		}

		nav.right {
			display: flex;
		}

		nav.mobile {
			display: none;
		}

		.menu-mobile {
			display: none;
		}

		&.shrink {
			padding: 20px 40px;

			.logo {

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

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

.canvas-default > main {
  background-color: #f6f6f6;
	position: relative;
}

@media (min-width: 1000px) {

	.canvas-default > main {
	}
}

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

.canvas-default > footer {
	background-color: #000;
	color: #fff;
	overflow: hidden;
	position: relative;
  z-index: 30;

	.bg {

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

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

		.left {

			.logo {

				img {
					margin-bottom: 20px;
					max-width: 300px;
				}
			}

			.flag {
				height: 14px;
				margin: 0 0 0 2px;
				position: relative;
				top: -2px;
				width: auto;
			}
		}

		.middle {

			.news {
				border-bottom: 1px dashed rgba(255,255,255,0.5);
				border-top: 1px dashed rgba(255,255,255,0.5);
				padding: 40px 0;

				h3 {

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

		.right {
			align-items: center;
			display: flex;
		
			.sitemap {
				width: 50%;

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

					a, .btn-link {
						color: #fff;
					}
				}
			}

			.social {
				text-align: center;
				width: 50%;

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

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

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

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

	.bottom {
		background-color: #eee;
		color: #444;
		padding: 40px 10px;
		position: relative;
		text-align: center;
		z-index: 32;

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

		.legal {
			margin: 20px 0;

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

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

@media (min-width: 1000px) {

	.canvas-default > footer {

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

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

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

				.news {
					border: 0;
					padding: 0;
				}
			}

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

				.sitemap {
					margin-bottom: 30px;
					width: 100%;

					.links {
						gap: 40px;
					}
				}

				.social {
					border: 0;
					padding: 0;
					text-align: left;
					width: 100%;

					.message {
						display: block;
						margin-bottom: 10px;
					}

					.channels {
						justify-content: flex-start;

						img {
							height: 40px;
						}
					}
				}
			}
		}
	}
}

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

.canvas-default > footer.inverted {
	background-color: #fff;
	color: #222;

	.top {

		.middle {

			.news {
				border-bottom: 1px dashed rgba(0,0,0,0.5);
				border-top: 1px dashed rgba(0,0,0,0.5);
				padding: 40px 0;
			}
		}

		.right {

			.sitemap {

				.links {

					a, .btn-link {
						color: var(--color-link);
					}
				}
			}

			.social {
				text-align: center;
				width: 50%;

				.channels {

					img {
						opacity: 1;
					}
				}
			}
		}
	}

	.bottom {
		background-color: #000;
		color: rgba(255,255,255,0.5);

		.legal {

			.btn-link {
				color: rgba(255,255,255,0.5);
			}
		}
	}
}

@media (min-width: 1000px) {

	.canvas-default > footer.inverted {

		.top {

			.middle {

				.news {
					border: 0;
					padding: 0;
				}
			}

			.right {

				.social {
					border: 0;
					padding: 0;
					text-align: left;
					width: 100%;
				}
			}
		}
	}
}