/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

	#banner-wrapper > a .logo {
		width: 6rem !important;
		height: 6rem !important;
	}
	#banner-wrapper .option .title { display: none !important }
	#banner-wrapper .slogan { font-size: 3rem !important }

	.sustainability .background {
		height: 12rem;
		background-size: auto 100% !important;
	}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

	#banner-wrapper > a .logo {
		width: 8rem;
		height: 8rem;
	}

	#banner-wrapper .slogan {
		top: 15%;
		font-size: 3.5rem;
		min-height: 2rem;
	}

	.company-highlights img { margin: 0 auto 1rem auto }

	.highlight {
		padding: 1rem;
		line-height: 1.6rem;
		font-size: 1rem;
	}

	.popular-tour,
	.popular-tour:hover  {
		height: 20rem !important;
		background-size: cover !important;
	}

	.popular-tour .title { margin-top: 6rem }
	.regions-bg { min-height: 15rem }

	body > footer {	height: 45rem }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

	#banner-wrapper .menu .option .title {
		font-size: 0.6rem;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

	.experience-type {
		background-size: auto 130% !important;
		background-position: left top !important;
	}

	.experience-type:hover {
		background-position: right top !important;
	}
}