/* ==========================================================================
	Footer
   ========================================================================== */

#global-footer {
	position: relative;
	background: $navy;
	color: white;
	overflow: hidden;
	width: 100%;

	.content {
		padding: 60px 0 30px;

		@include media-breakpoint-down(sm) {
			padding: 20px 0;
		}

	}

	.banner {
		display: flex;
		flex-direction: column;
		background-image: url("../../dist/images/barlings-beach-play-kids.jpg");
		background-repeat: no-repeat;
		background-position:55% 50%;
		background-size: cover;
		width: 100%;
		height: 60vh;

		@media (max-height: $screen-height-md) {
			height: 70vh;
		}

		@media (max-height: $screen-height-sm) {
			height: 80vh;
		}

		@media (max-height: $screen-height-xs) {
			height: 100vh;
		}
		@include media-breakpoint-down(sm) {
			height: 50vh;
		}

		article {
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			width: 100%;
			height: 100%;
			padding: 0 30px;

			h2 {
				@include font-mixin(600, 63, 1.272, $font-heading);
				text-shadow: 0 0 20px rgba(0,0,0,.2);
				color: white;
				margin: 0;

				@include media-breakpoint-down(md) {
					@include font-mixin(600, 48, 1.272, $font-heading);
				}

				@include media-breakpoint-down(sm) {
					@include font-mixin(600, 42, 1.272, $font-heading);
				}

				@include media-breakpoint-down(xs) {
					@include font-mixin(600, 36, 1.272, $font-heading);
				}

			}

		}

	}

	.footer-menu {

		h3 {
			@include font-mixin(600, 21, 1.272, $font-heading);
			color: $light-blue;
			text-transform: uppercase;

			@include media-breakpoint-down(sm) {
				@include font-mixin(600, 18, 1.272, $font-heading);
				margin-bottom: 10px;
			}

		}

		ul {
			list-style: none;
			margin: 0 0 30px;
			padding: 0;

			@include media-breakpoint-down(sm) {
				margin-bottom: 20px;
			}

			li {
				@include font-mixin(400, 18, 1.272, $font-body);
				letter-spacing: 0.01em;
				margin: 0 0 2px;

				@include media-breakpoint-down(sm) {
					@include font-mixin(400, 16, 1.272, $font-body);
				}

			}

			&.social {
				display: flex;

				li {
					//float: left;
					@include font-mixin(400, 32, 1.272, $fontawesome);
					margin-left: 10px;

					@include media-breakpoint-down(md) {
						@include font-mixin(400, 28, 1.272, $fontawesome);
					}

					@include media-breakpoint-down(sm) {
						@include font-mixin(400, 24, 1.272, $fontawesome);
						margin-left: 5px;
					}

					&:first-child {
						margin-left: 0;
					}

					span {
						display: none;
					}

				}
				@include media-breakpoint-down(sm) {
					margin-bottom: 0;
				}

			}

		}

		a {
			color: white;

			&:hover {
				color: $light-blue;
			}

		}

	}

	.copyright{
		p{
            color: white;
            font-size: 1.4rem;
			opacity: 0.4;
			@include media-breakpoint-down(xs) {
				font-size: 1.2rem;
			}
		}
	}

}