/* Media Based on bootstrap */

// Large devices (desktops, 992px and up)
@media (min-width: $media-lg) {
	.full-image {
		img {
			position: absolute;
		}
	}

	.full-image2 {
		max-height: 600px;

		img {
			width: auto;
			max-height: 600px;
			left: 50%;
			position: relative;
			transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
		}
	}

	.banner {
		.caption {
			max-width: 450px;
			width: 50%;
			margin: 80px 60px;
		}

		h1, h2, h3, h4, h5, h6 {
			margin-bottom: 30px;
		}

		&.fixed {
			min-height: 700px;
			height: 50vh;

			img {
				min-height: 900px;
				top: -100px;
			}
		}

		&.home-banner {
			h1 {
				position: absolute;
				bottom: 0;
				left: 365px;
				background-color: rgba(255,255,255,.2);
				padding: 5px 80px 5px 30px;
				border-radius: 0 80px 80px 0;
				text-shadow: none;
				margin: 0;
				font-size: 35px;
				font-weight: $font-bold;
				line-height: 1.3;
				letter-spacing: .5px;
			}
		}

		&.page-banner {
			min-height: 550px;
			height: 35vh;

			img {
				min-height: 600px;
				top: 0;
			}
			.caption {
				width: auto;
			}
		}

		&.service-banner {
			img {
				left: auto;
				right: -10%;
			}
		}

		&.howwework-banner {
			img {
				left: auto;
				right: -10%;
				top: 68px;
				height: 500px;
				min-height: 500px;
			}
		}

		&.contact-banner {
			img {
				left: auto;
				right: -10%;
				top: 60px;
				height: 520px;
				min-height: 520px;
			}
		}

		&.reviews-banner {
			img {
				left: auto;
				right: -10%;
			}
		}

		&.location-banner {
			img {
				left: auto;
				right: -10%;
			}
		}
	}

	.news {
		.full-image {
			img {
				position: relative;
			}
		}
	}

	.theme2 {
		.btn {
			margin-left: 0;
		}
		.card {
			flex: 0;

			.full-image2 {
				max-height: 300px;

				img {
					width: 100%;
					min-height: auto;
					height: auto;
					max-height: auto;
				}
			}
		}
		.bg-gold2-right {
			position: relative;

			&:after {
				content: '';
				display: block;
				position: absolute;
				left: 99%;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: $theme-color-gold2;
			}
		}
		.services {
			p {
				font-size: 18px;
			}
			.col-lg-2 {
				width: 20%;
			}
		}
		.membership {
			p {
				font-size: 18px;
			}
			.left {
				border-radius: 20px 0 0 20px;
				margin-bottom: 0;
			}
			.right {
				border-radius: 0 20px 20px 0;
			}
		}
		&.footer {
			.newsletter {
				margin-top: 30px;
				max-width: 280px;
			}
			.footer-address {
				position: absolute;
				left: 0;
				bottom: 3rem;
			}
		}
	}

	#success-stories,
	#reviews {
		.news {
			width: 50%;
		}
	}

	/* Importants */
	.text-justify-center {
		text-align-last: left;
	}
	.text-lg-center {
		text-align-last: center !important;
	}
	.text-lg-left {
		text-align-last: left !important;
	}
}

// X-Large devices (large desktops, 1200px and up)
@media (min-width: $media-xl) {
	p, li {
		font-size: 16px;
	}

	.banner {
		&.fixed {
			img {
				height: auto;
				max-height: initial;
				width: 120%;
				top: -25%;
			}
		}

		&.home-banner {
			img {
				top: -150px;
			}
		}

		&.page-banner {
			img {
				top: 0;
			}
		}

		&.howwework-banner {
			img {
				top: 68px;
			}
		}

		&.news-banner {
			img {
				left: auto;
				right: -10%;
			}
		}

		&.contact-banner {
			img {
				left: auto;
				right: auto;
				width: 105%;
			}
		}
	}

	.peerage-title .widget-title {
		font-size: 1.65em;
	}

	.theme2 {
		font-size: 18px;
		font-weight: $font-regular;

		p, li {
			font-size: 18px;
			font-weight: $font-regular;
		}
		&.footer {
			.menu-title {
				font-size: 24px;
			}
		}
	}
}

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: $media-xxl) {
	// .full-image2 {
	// 	img {
	// 		left: 0;
	// 		transform: none;
	// 		-webkit-transform: none;
	// 	}
	// }
	.banner {
		.caption {
			max-width: 550px;
		}

		h1, h2, h3, h4, h5, h6 {
			font-size: 3em;
		}
	}

	p, li {
		font-size: 18px;
	}

	.peerage-title .widget-title {
		font-size: 1.95em;
	}

	.logos {
		img {
			max-width: 107px;
			max-height: 70px;
		}
	}

	#why-peerage {
		.full-image2 {
			img {
				left: 0;
			}
		}
	}
}

// XX-Large devices (larger desktops, 1800px and up)
@media (min-width: $media-xxxl) {
	.banner {
		&.fixed {
			img {
				top: -45%;
			}
		}

		&.home-banner {
			img {
				top: -30%;
			}
		}

		&.page-banner {
			height: 700px;

			img {
				top: -10%;
			}
		}

		&.howwework-banner {
			img {
				top: 68px;
			}
		}
	}
}

// XX-Large devices (larger desktops, 2400px and up)
@media (min-width: $media-xxxxl) {
	.banner {
		&.home-banner {
			img {
				top: -40%;
			}
		}
	}
}