#preferred_wrap {
	/*background: url(../images/headers/river_cruises/rch1.jpg) no-repeat 50% 0;*/
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 0;
	
	min-height: 325px;
}

#preferred {
	margin: 0 auto;
	max-width: 1200px;
	width: 92%;
	padding: 35px 0;
	overflow: hidden;
}

#preferred_inner {
	background-color: rgba(0, 22, 38, .84);
	border-radius: 4px;
	padding: 15px 20px 20px;
}

#preferred_inner h2 {
	font-size: 1.7em;
	color: #fff;
	padding-bottom: 20px;
	text-align: center;
}

#cruise_line_wrap {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.cruise_line {
	width: calc(33.3333% - 15px);
	padding: calc(6px + (13 - 6) * ((100vw - 768px) / (2556 - 768)));
	box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .3);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	margin-bottom: 22px;
	border-radius: 4px;
}

.cruise_line:has(> div:first-child a:focus-visible) {
	outline: 3px solid #ffcb11;
	outline-offset: 3px;
}

.cruise_line.victory-cruise-lines {
	background-color: #0090b9;
}

.cruise_line.avalon-waterways {
	background-color: #0a4167; /*#4595d2;*/
}

.cruise_line.viking-river-cruises {
	background-color: #d02045;
}

.cruise_line.tauck {
	background-color: #3f7a2d;
}

.cruise_line.amawaterways {
	background-color: #a6854e;
}

.cruise_line.uniworld-boutique-river-cruises {
	background-color: #093254;
}

.cruise_line.u-by-uniworld {
	background-color: #000;
}

.cruise_line.american-cruise-lines {
	background-color: #e9172b;
}

.cruise_line > div:first-child {
	background-color: #fff;
	box-shadow: 5px 5px 10px 0 rgba(0,0,0,.3) inset;
	text-align: center;
}

.cruise_line > div:first-child a {
	display: block;
	height: 0;
	padding-top: 39.7468%;
	position: relative;
	transition: background-color 150ms, color 150ms;
	transform: translateZ(0);
}

.cruise_line > div:first-child a svg {
	width: 85%;
	height: 85%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.cruise_line.victory-cruise-lines > div:first-child a:hover {
	background-color: #d3f5ff;
}

.cruise_line.avalon-waterways > div:first-child a:hover {
	background-color: #dbeefb;
}

.cruise_line.viking-river-cruises > div:first-child a:hover {
	background-color: #fadce2;
}

.cruise_line.tauck > div:first-child a:hover {
	background-color: #e8f5e4;
}

/*.cruise_line.cry > div:first-child a:hover {
	background-color: #dfffff;
}*/

.cruise_line.amawaterways > div:first-child a:hover {
	background-color: #ebe3d5;
}

.cruise_line.uniworld-boutique-river-cruises > div:first-child a:hover {
	background-color: #e0effc;
}

.cruise_line.u-by-uniworld > div:first-child a:hover {
	background-color: #e3e3e3;
}

.cruise_line.american-cruise-lines > div:first-child a:hover {
	background-color: #fbd1d5;
}

body.is_mobile .cruise_line > div:first-child a:hover {
	background-color: transparent;
}

.cruise_line > div:nth-of-type(2) {
/*	padding-top: 13px;*/
	color: #fff;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: auto;
}

/*.cruise_line > div:last-child {
	text-align: center;
	padding-top: 13px;
display: none;
}*/

#search_wrap {
	margin-bottom: 40px;
}

#search_selected > li[data-id="cruiseType"],
#search_selected > li[data-id="departurePorts"],
#search_selected > li[data-id="portsOfCall"] {
	display: none;
}

#search_selected > li[data-id="countries"],
#search_selected > li[data-id="cities"],
#search_selected > li[data-id="waterways"] {
	display: list-item;
}

.image_caption {
	display: table;
	table-layout: fixed;
	width: 100%;
	margin-bottom: 25px;
}

.image_caption > div {
	display: table-cell;
}

.image_caption > div.image {
	width: 29.3333%; /*36.666666%;*/
}

.image_caption > div.caption {
	vertical-align: middle;
	color: #494e54;
	font-size: .95em; /*.85em;*/
	line-height: 1.5em;
	padding: 0 40px;
}

.image_caption h3 {
	color: #26343c;
	font-size: 1.45em;
	padding-bottom: 20px;
}

/* ===== MAP ===== */

#map {
	/*margin: 20px 0;*/
	margin: 20px 0 40px;
	/*max-width: 960px;*/
	position: relative;
}

body.is_phone #map {
	margin-top: 0;
}

#base {
	position: relative;
	z-index: 1;
}

.river_hover,
#rivers,
#extras,
#image_map {
	position: absolute;
	left: 0;
	top: 0;
}

#rivers {
	z-index: 2;
}

#extras {
	z-index: 4;
}

#image_map {
	z-index: 5;
	width: 100%; /* Necessary, because we want the image to be full width, but because we aren't changing the image map coordinates, it must be done this way, so as to still use the "old 960 width" image map coordinates */
}

img[usemap], map area{
    outline: none;
}

.river_hover {
	z-index: 3;
	opacity: 0;
	transition: opacity 150ms;
	transform: translateZ(0);
}

.river_hover.add_hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

#douro_hover {	
	left: 4.5%;
	top: 75.2287%;
	width: 10%; /* 96px */
}

#seine_hover {
	left: 29.1667%; /* 280px */
	top: 46.8954%; /* 287px */
	width: 10%; /* 96px */
}

#saone_rhone_hover {
	left: 35%; /* 336px */
	top: 58.3333%; /* 357px */
	width: 12.6042%; /* 121px */
}

#moselle_hover {
	left: 35.3125%; /* 339px */
	top: 46.0784%; /* 282px */
	width: 9.8958%; /* 95px */
}

#rhine_hover {
	left: 38.0208%; /* 365px */
	top: 36.9281%; /* 226px */
	width: 14.2708%; /* 137px */
}

#main_hover {
	left: 46.25%; /* 444px */
	top: 42.4837%; /* 260px */
	width: 7.8125%; /* 75px */
}

#danube_hover {
	left: 54.2708%; /* 521px */
	top: 50.1634%; /* 307px */
	width: 43.125% /* 414px */
}

#elbe_hover {
	left: 49.2708%; /* 473px */
	top: 26.4706%; /* 162px */
	width: 12.7083%; /* 122px*/
}

#waterways_of_the_tsars_hover {
	left: 80.5208%; /* 773px */
	top: 6.5359%; /* 40px */
	width: 11.0417%; /* 106px */
}

#waterways_of_holland_hover {
	left: 3.3333%; /* 32px */
	top: 5.0654%; /* 31px */
	width: 18.9583%; /* 182px */
}


/* ===== MATRIX ===== */

#matrix_wrap {
	overflow: hidden;
	margin: 13px 0 20px;
}

#matrix_wrap > div {
	float: left;
	width: 37.1667%;
	border-radius: 5px;
	overflow: hidden;
}

#matrix_wrap > div img {
	float: left;
	width: calc(50% - 3px);
}

#matrix_wrap > div img:nth-of-type(3) {
	clear: left;
}

#matrix_wrap > div img:nth-of-type(odd) {
	margin-right: 6px;
}

#matrix_wrap > div img:nth-of-type(1),
#matrix_wrap > div img:nth-of-type(2) {
	margin-bottom: 6px;
}

#matrix_wrap > div img:nth-of-type(1) {
	border-top-left-radius: 3px;
}

#matrix_wrap ul {
/*	list-style-type: disc;*/
	float: right;
	width: 60%; /*51%;*/
	margin-top: 0;
	margin-left: 0;
}

#matrix_wrap ul li {
	background-image: none;
	color: #3b434a;
	line-height: 1.3em;
	font-size: .9em;
	padding-bottom: 11px;
}

/* ===== ROTATING IMAGES ===== */

.image_main {
	background: #fff;
	position: relative;
	border-radius: 5px;
	overflow: hidden;
	max-width: 400px;
	margin: 0 auto;
}

.image_loading,
.image_showing,
.image_loading > div,
.image_showing > div {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.image_loading {
	z-index: 2;
}

.image_showing {
	position: relative;
	z-index: 3;
}

.image_showing.transition {
	transition: all 1000ms cubic-bezier(0.455, 0.030, 0.515, 0.955); /* easeInOutQuad */
	transform: translateZ(0);
}

.image_showing.transition.fast {
	transition-duration: 250ms;
}

.image_showing.transition > div {
	transition-property: left, right;
	transform: translateZ(0);
}

.image_showing.transition.out > div {
	transition: all 1000ms cubic-bezier(0.550, 0.085, 0.680, 0.530); /* easeInQuad */
}

.image_showing.transition.in > div {
	transition: all 1000ms cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */
}

.image_showing.transition.out.fast > div,
.image_showing.transition.in.fast > div {
	transition-duration: 250ms;
}

.image_nav {
	position: absolute;
	right: 15px;
	bottom: 12px;
	z-index: 4;
	display: flex;
	align-items: center;
}

.image_nav a {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 2px 2px 2px rgba(0,0,0,.75);
	margin: 3px;
	cursor: pointer;
}

.is_mobile .image_nav a {
	width: 20px;
	height: 20px;
	border-radius: 20px;
}

.image_nav a.selected {
	background-color: #c6ff00;
	cursor: auto;
	width: 16px;
	height: 16px;
	margin: 0;
	position: relative;
}

.is_mobile a.selected {
	width: 32px;
	height: 32px;
	border-radius: 32px;
}

#footnote {
	text-align: center;
	color: #494e54;
    font-family: Oswald;
    font-size: 1.125em;
    letter-spacing: 0.4px;
}

.circleG_outerwrap {
	display: table;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
}

.circleG_wrap {
	/*width: 56px;*/
	/*width: 100%;*/
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	/*position: absolute;
	z-index: 3;*/
}

.circleG {
	background-color: #FFFFFF;
	/*float:left;*/
	display: inline-block;
	height: 12px;
	margin: 0 3px;
	width: 12px;
	-moz-animation-name:bounce_circleG;
	-moz-animation-duration:1.9500000000000002s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:normal;
	-moz-border-radius:8px;
	-webkit-animation-name:bounce_circleG;
	-webkit-animation-duration:1.9500000000000002s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:normal;
	-webkit-border-radius:8px;
	-ms-animation-name:bounce_circleG;
	-ms-animation-duration:1.9500000000000002s;
	-ms-animation-iteration-count:infinite;
	-ms-animation-direction:normal;
	-ms-border-radius:8px;
	-o-animation-name:bounce_circleG;
	-o-animation-duration:1.9500000000000002s;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:normal;
	-o-border-radius:8px;
	animation-name:bounce_circleG;
	animation-duration:1.9500000000000002s;
	animation-iteration-count:infinite;
	animation-direction:normal;
	border-radius:8px;
}

.circleG_1 {
	-moz-animation-delay:0.39s;
	-webkit-animation-delay:0.39s;
	-ms-animation-delay:0.39s;
	-o-animation-delay:0.39s;
	animation-delay:0.39s;
}

.circleG_2 {
	-moz-animation-delay:0.9099999999999999s;
	-webkit-animation-delay:0.9099999999999999s;
	-ms-animation-delay:0.9099999999999999s;
	-o-animation-delay:0.9099999999999999s;
	animation-delay:0.9099999999999999s;
}

.circleG_3 {
	-moz-animation-delay:1.1700000000000002s;
	-webkit-animation-delay:1.1700000000000002s;
	-ms-animation-delay:1.1700000000000002s;
	-o-animation-delay:1.1700000000000002s;
	animation-delay:1.1700000000000002s;
}

@-moz-keyframes bounce_circleG {
	0% {
	}

	50% {
		background-color:#245E85
	}

	100% {
	}
}

@-webkit-keyframes bounce_circleG {
	0% {
	}

	50% {
		background-color:#245E85
	}

	100% {
	}
}

@-ms-keyframes bounce_circleG {
	0% {
	}

	50% {
		background-color:#245E85
	}

	100% {
	}
}

@-o-keyframes bounce_circleG {
	0% {
	}

	50% {
		background-color:#245E85
	}

	100% {
	}
}

@keyframes bounce_circleG {
	0% {
	}

	50% {
		background-color:#245E85
	}

	100% {
	}
}

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


@media only screen and (max-width: 950px) {
	#matrix_wrap > div {
		width: 27%;
	}
	
	#matrix_wrap > div img {
		width: auto; /*92%;*/
	}
	
	#matrix_wrap > div img:nth-of-type(even) {
		display: none;
	}
	
	#matrix_wrap ul {
		width: 69%;
	}
}

@media only screen and (max-width: 860px) {
	.cruise_line > div:nth-of-type(2) {
		display: none;
	}
}

@media only screen and (max-width: 675px) {	
	#matrix_wrap > div img:nth-of-type(even) {
		display: block;
	}
	
	#matrix_wrap > div img:nth-of-type(2n+1) {
		margin-right: 0;
		margin-bottom: 6px;
	}
}

@media screen and (max-width: 767px) {
	#matrix_wrap {
		margin-top: 0;
	}
	
	#matrix_wrap > div {
		width: auto;
		display: flex;
		float: none;
		gap: 6px;
		margin-bottom: 20px;
	}
	
	#matrix_wrap > div img:nth-of-type(1n) {
		width: 25%;
		margin: 0;
		display: block;
	}
	
	#matrix_wrap ul {
		width: auto;
	}
	
	#matrix_wrap ul li {
		font-size: inherit;
		line-height: inherit;
		color: inherit;
	}
}

@media only screen and (max-width: 650px) {
	.image_caption {
		display: flex;
		flex-direction: column;
		position: relative;
	}
	
	.image_caption > div.image {
		padding-top: 2em;
		order: 1;
		width: 100%;
	}
	
	.image_caption > div.caption {
		padding: 10px 0 0;
		order: 2;
	}
	
	.image_caption h3 {
		position: absolute;
		top: 0;
		left: 0;
	}
}

@media only screen and (max-width: 600px) {
	#matrix_wrap > div img:first-child {
		display: none;
	}
	
	#matrix_wrap > div img:nth-of-type(1n) {
		width: 33.3333%;
	}
}

@media only screen and (max-width: 500px) {
	/*#matrix_wrap > div {
		display: none;
	}
	
	#matrix_wrap ul {
		width: auto;
	}*/
}

@media only screen and (max-width: 500px) {
	#cruise_line_wrap {
		display: block;
	}
	
	.cruise_line {
		width: auto;
		padding: calc(8px + (13 - 8) * ((100vw - 768px) / (2556 - 768)));
	}
	
	#cruise_line_wrap > div:first-child {
		margin-bottom: 25px;
	}
}

@media only screen and (max-width: 450px) {
	#matrix_wrap > div img:nth-of-type(2),
	#matrix_wrap > div img:nth-of-type(3) {
		display: none;
	}
	
	#matrix_wrap > div img:nth-of-type(1n) {
		width: auto;
	}
}