/* Media Based on bootstrap */

// Small devices (landscape phones, 576px and up)
@media (min-width: $media-sm) {
	.navbar-light {
		.navbar-toggler {
			right: 60px;
		}
	}

	.bricks {
		& > * {
			width: auto;
			padding: 10px 20px;
			margin: 12px 14px;
		}
	}

	.banner {
		&.fixed {
			img {
				width: auto;
				height: 650px;
				top: -30px;
			}
		}

		&.aboutus-banner {
			img {
				left: auto;
				right: -30%;
				transform: none;
				-webkit-transform: none;
			}
		}
		
		&.service-banner {
			img {
				left: 30%;
			}
		}

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

		&.contact-banner {
			height: 480px;
			min-height: 400px;
			img {
				left: -40%;
				top: -10px;
				height: 500px;
				min-height: 500px;
				transform: none;
				-webkit-transform: none;
			}
		}
	}

	.theme2 {
		
	}

	.text-sm-start {
		text-align-last: left !important;
	}
}

// Medium devices (tablets, 768px and up)
@media (min-width: $media-md) {
	.desktop-swap {
		display: flex;
		flex-direction: row-reverse;
	}
	.desktop-swap-row {
		display: flex;
		flex-direction: column-reverse;
	}

	.peerage-content-images {
		padding-left: 40px;
	}

	.wpcf7 form {
		.wpcf7-response-output {
			margin: 3px 0;
		}
	}

	.navbar-brand img {
		max-width: 300px;
	}

	.contact-form {
		.select-arrow {
			top: 40px;
		}
	}

	.full-image {
		display: block;

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

	.full-image2 {
		display: block;
		width: 100%;
		max-height: 400px;

		img {
			height: auto;
			width: 100%;
		}
	}

	.form-banner {
		margin-left: 0;
	}

	.banner {
		&.fixed {
			min-height: 500px;
			height: 50vh;
			overflow: hidden;

			img {
				width: auto;
				height: 750px;
				min-height: 750px;
				height: auto;
				max-height: 100vh;
				left: 0;
				top: -30px;
				transform: none;
			}
		}

		&.home-banner {
			min-height: 650px;

			.container {
				top: 0;
			}
			.caption {
				margin-left: 30px;
			}
		}

		&.page-banner {
			img {
				top: -30px;
				height: 600px;
				min-height: 600px;
			}

			.container {
				// padding: 0;
			}
			.caption {
				text-align: left;
				border: 0;
				margin: 60px 40px;
			}

			.subtitle {
				display: inline-block;
			}
		}

		&.aboutus-banner {
			img {
				left: auto;
				right: -10%;
				transform: none;
				-webkit-transform: none;
			}
		}

		&.service-banner {
			img {
				left: -40%;
			}
		}

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

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

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

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

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

	.news {
		flex-direction: row;
		text-align-last: left;
		align-items: center;

		img,
		.full-image {
			min-width: 120px;
			width: 120px;
			max-width: 120px;
		}

		.news-content {
			flex: 1;
			margin-bottom: 0;
		}
	}

	.cta {
		padding: 50px 0 60px;
	}

	.theme2 {
		&.home {
			padding-top: 0;
		}
		.card {
			.card-content {
				padding: 2.2rem;
			}
			.card-image {
				img {
				}
			}
		}
		.membership {
			.widget-title {
				border-radius: 20px;
			}
		}
		.contact-form {
			input[type="email"],
			input[type="number"],
			input[type="text"],
			select {
				margin-top: 12px;
				// margin-bottom: 20px;
			}
			.form-group {
				margin-top: 15px;
			}
		}
		&.footer {
			nav,
			.navbar-nav {
				top: -3px;

				.nav-item {
					padding-right: 10px;
				}
				.nav-link {
					width: calc(100% + 14px);
					left: -14px;
				}
			}
			.footer-address {
				a {
					position: relative;
					bottom: auto;
					right: auto;
				}
			}
		}
	}

	.text-md-start {
		text-align-last: left !important;
	}
}