/* ===== Preload images ===== */
body:after {
  position: absolute;
  width:0;
  height:0;
  overflow:hidden;
  z-index:-1;
  content: url(../images/ocean-cruise-bg.jpg) url(../images/river-cruise-bg.jpg) url(../images/cruise-tour-bg.jpg) url(../images/logo-header.png) url(../images/ce-logo-white-ds.png) url(../images/icons/css_loader.png);
}

body.search #wrap,
body.search #footer,
body.search #schema_wrap,
body.search #overlay {
	display: none !important;
}

body.search.is_phone:after {
	content: '';
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.8;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: fixed;
	z-index: -1;

	/* Reset attributes from the preload */
	width: auto;
	height: auto;
	overflow: visible;
}

body.is_phone.ocean_cruise:after {
	background-image: url(../images/ocean-cruise-bg.jpg);
}

body.is_phone.river_cruise:after {
	background-image: url(../images/river-cruise-bg.jpg);
}

body.is_phone.cruise_tour:after {
	background-image: url(../images/cruise-tour-bg.jpg);
}

#video_bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -100;
	overflow: hidden;
	display: none;
}

body.search #video_bg {
	display: block;
}

#video_bg video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -100;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
}

.parent {
	display: flex;
}

.parent > div:first-child {
	order: 2;
	width: 65%;
	display: flex;
	align-items: center;
}

.parent > div:last-child {
	width: 35%;
	min-width: 400px;
	box-sizing: border-box;
	padding-right: 30px;
}

#wave_wrap {
	display: flex;
	flex-direction: column;
}

#wave_info_wrap {
	margin-bottom: 30px;
}

#wave_wrap.fb #wave_info_wrap {
	order: 2;
}

#wave_wrap.fb #wave_info_wrap h1 {
	padding-top: 40px;
}

#wave_info_wrap hr,
#wave_offers_wrap hr {
	width: 80%;
	margin: 20px auto 0;
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 93, 165, 0.75), rgba(0, 0, 0, 0));
}

#wave_info_wrap hr {
	display: none;
	margin-bottom: 40px;
}

#wave_wrap.fb #wave_info_wrap hr {
	display: block;
}

#wave_offers_wrap h2 {
	font-family: "TT Norms";
	font-weight: 700;
	color: #3a5c78;
	margin-bottom: 0;
	padding: 40px 0 12px;
	font-size: 2em;
	font-weight: normal;
	line-height: 1em;
}

#wave_wrap.fb #wave_offers_wrap hr {
	display: none;
}

#wave_wrap.fb #wave_offers_wrap h2 {
	padding-top: 12px;
}

#wave_offers {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-top: 10px;
}

#wave_offers > div {
	width: 21%;
	box-sizing: border-box;
	margin-bottom: 60px;
	/* flex-shrink: 0; */
}

#wave_offers > div > div {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid #6e96a4;
	padding: 16px;
	border-radius: 3px;
	background-color: #f1fbff;
	box-sizing: border-box;
	text-align: center;
	position: relative;
}

.pr_logo {
	margin-bottom: 16px;
}

.pr_logo > div {
	max-width: 210px;
	margin: 0 auto;
}

.pr_logo > div > div {
	width: 100%;
	height: 0;
	padding-top: 25.4237%;
	background: url(../images/header-ads-cruise-line-logos.png) no-repeat 0 0;
	background-size: 500%;
	cursor: pointer;
}

.pr_logo.viking > div > div {
	background-position: 25% 60%;
}

.pr_logo.uniworld > div > div {
	background-position: 25% 80%;
}

.pr_logo.royal_caribbean > div > div {
	background-position: 50% 0;
}

.pr_logo.oceania > div > div {
	background-position: 50% 20%;
}

.pr_logo.holland_america_line > div > div {
	background-position: 50% 40%;
}

.pr_logo.american_queen_steamboat_company > div > div {
	background-position: 0 60%;
}

.pr_logo.avalon > div > div {
	background-position: 0 80%;
}

.pr_logo.princess > div > div {
	background-position: 25% 0;
}

.pr_logo.norwegian > div > div {
	background-position: 25% 20%;
}

.pr_logo.cunard > div > div {
	background-position: 25% 40%;
}

.pr_logo.celebrity > div > div {
	background-position: 0 0;
}

.pr_logo.carnival > div > div {
	background-position: 0 20%;
}

.pr_logo.azamara > div > div {
	background-position:0 40%;
}

.pr_logo.disney > div > div {
	background-position: 75% 0;
}

.pr_logo.tauck > div > div {
	background-position: 100% 0;
}

.pr_logo.msc > div > div {
	background-position: 75% 20%;
}

.pr_logo.american_cruise_lines > div > div {
	background-position: 100% 20%;
}

.pr_logo.regent > div > div {
	background-position: 75% 40%;
}

.pr_logo.costa > div > div {
	background-position: 50% 60%;
}

.pr_logo.seabourn > div > div {
	background-position: 75% 60%;
}

.pr_logo.paul_gauguin_cruises > div > div {
	background-position: 100% 60%;
}

.pr_logo.crystal > div > div {
	background-position: 50% 80%;
}

.pr_logo.silversea > div > div {
	background-position: 75% 80%;
}

.pr_logo.windstar > div > div {
	background-position: 0 100%;
}

.pr_logo.ama_waterways > div > div {
	background-position: 25% 100%;
}

.pr_logo.seadream > div > div {
	background-position: 50% 100%;
}

.pr_logo.star_clippers > div > div {
	background-position: 75% 100%;
}

.pr_logo.hurtigruten > div > div {
	background-position: 100% 40%;
}

.pr_logo.viking_ocean_cruises > div > div {
	background-position: 100% 80%;
}

.pr_logo img {
	max-height: 33px;
}

.pr_content {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: auto;
	line-height: 1.35em;
	margin-bottom: 7px;
	border: 1px solid #b8cad1;
	border-radius: 3px;
	background-color: #fff;
	padding: 5px 10px;
}

.pr_content > div {
	display: flex;
	height: 100%;
	align-items: center;
}

.pr_content > div > div {
	width: 100%;
}

.pr_button {
	position: relative;
	z-index: 2;
	text-align: right;
}

.pr_button a:first-child {
	font-size: 1em;
	margin-bottom: 2px;
}

.wave_banner {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	/* background: yellow; */
	width: 100px;
	height: 100px;
	overflow: hidden;
	z-index: 1;
}

.wave_banner span {
	display: block;
	width: 120px;
	background: linear-gradient(#2989d8 0%, #005da5 100%);
	color: #fff;
	font-size: 1em;
	line-height: 1;
	padding: 4px 0 5px;
	text-align: center;
	transform: rotate(45deg);
	bottom: 19px;
	left: -29px;
	position: absolute;
	font-family: "TT Norms";
	font-weight: 700;
	box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgb(0, 0, 0, .3);
}

#view_offers {
	text-align: center;
}

#wave_wrap.fb #view_offers {
	display: none;
}

#search_popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 201;
	box-sizing: border-box;
	min-width: 1000px;
}

#search_popup > img {
	margin-bottom: 15px;
}

#search_popup > div {
	padding: 30px;
	box-shadow: 0px 19px 22px -8px rgba(0, 0, 0, .75);
	border-radius: 10px;
	background-color: #fff;
	font-size: 1.2em;
}

#search_popup > div h2 {
	padding-bottom: 10px;
}

#search_popup > div > div {
	margin-top: 25px;
	border-top: 1px solid #cdcdcd;
	padding-top: 16px;
	text-align: left;
}

#search_popup > div > div {
	margin-top: 18px;
	border: 1px solid #e0e0e0;
	text-align: left;
	background-color: #f5f5f5;
	padding: 20px 20px 10px;
	border-radius: 6px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

body.is_phone #search_popup > div > div {
	display: none;
}

#search_popup > div > div > div {
	margin-bottom: 21px;
	width: 47%;
	box-sizing: border-box;
}

#search_popup > div > div > div:last-child {
	margin-bottom: 0;
}

#search_popup > div > div > div h3 {
	line-height: 1;
	border-bottom: 1px solid #cdcdcd;
	padding-bottom: 3px;
	margin-bottom: 4px;
}

#search_popup > div > div > div span {
	font-size: 1.5em;
}

/* ===== MEDIA QUERIES ===== */

@media only screen and (max-width: 1318px) {
	#search_popup {
		min-width: auto;
		left: calc(2vw + 10%);
		right: calc(2vw + 10%);
		transform: translateY(-50%);
	}
}

@media only screen and (max-width: 1070px) {
	.parent {
		display: block;
	}
	
	.parent > div:first-child {
		width: auto;
		margin-bottom: 30px;
	}
	
	.parent > div:last-child {
		width: auto;
		min-width: 0;
		padding-right: 0;
	}

	#wave_offers > div {
		width: 29%;
	}
}

@media only screen and (max-width: 790px) {
	#wave_offers > div {
		width: 46%;
	}
}

@media only screen and (max-width: 520px) {
	#wave_offers > div {
		width: 100%;
	}
}