@charset "utf-8";
/* Ferrysavers RWD Content - from Mar 2018 */
/* --------------------------------------------
   colors
-------------------------------------------- */
/*	blue 			#1f4d73
	red 			#9b1722
	medium blue		#5b96b7
	light grey		#dddddd
	off white		#f3f3f3
	text colour		#444444
	alt text colour	#575756
	
	pale blue 		#d4edfc (highlighted option in accomm only)
*/

/* --------------------------------------------
   web fonts - must be outside of any media query 
	-------------------------------------------- */
@font-face { 
    font-family: 'PT Sans Bold';
    src:	url('../fonts/ptsansbold-webfont.woff2') format('woff2'),
        	url('../fonts/ptsansbold-webfont.woff') format('woff'),
   			url('../fonts/ptsansbold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* --------------------------------------------
   key frames - must be outside of any media query 
	-------------------------------------------- */
/*	--------------------------
	Snow
	-------------------------- *
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
*/

/*	--------------------------------------------
	NOTE: need to add Media Query even for "mobile" size? 
	If overriding this file with Brand-specific file?
	-------------------------------------------- */	
@media screen and (min-width: 0em) {

html {
  font-size: 100%;
}
/* --------------------------------------------
   wrapper containers
-------------------------------------------- */

/* --------------------------------------------
   header & footer
-------------------------------------------- */
header, footer {
	background-color: #f3f3f3; 
	color: #1f4d73; 
}

/* --------------------------------------------
   hr tag
-------------------------------------------- */
hr {
	border-bottom: 5px solid #f3f3f3; 
}
/* --------------------------------------------
   other tags
-------------------------------------------- */
.af_pquote1 {
    color: #5b96b7; 
}
/* --------------------------------------------
   sprite
-------------------------------------------- */
.af_sprite {
 	background-image: url(../img/ferrysavers-sprite.svgz);
	/*background-image: url(../img/ferrysavers-sprite-ie.png)\9;*/
}
/* --------------------------------------------
   all specified unordered lists
-------------------------------------------- */
.af_listdef1 li:before,
.af_listset1 li:before,
.af_liststripe1 li:before,
.af_liststripe2b li:before,
.af_rvwtc li:before,
.af_listfootnav2 li:before {
	color: #1f4d73;
	content: "\25CF "; /*●, Dec 9679, Hex 25CF or \25CF, BLACK CIRCLE, https://www.w3schools.com/charsets/ref_utf_geometric.asp*/
}



/* --------------------------------------------
   unordered lists: set 1
-------------------------------------------- */
.af_liststripe1 li.af_listset1 {  
    border: 5px solid #f3f3f3;  
    border-radius: 0 0 1em 1em;
	margin-top: 1em;
}
li.af_listset1 h3 {
	color: #1f4d73; 
}
li.af_listset1 h3 a {
	color: #1f4d73; 
}
/* --------------------------------------------
   unordered lists: zebra stripe 1
-------------------------------------------- */
.af_liststripe1 li {
	border: 0 none;
	}

.af_liststripe1 li:nth-child(odd) {
	background-color: #f3f3f3; 
}
/* --------------------------------------------
   unordered lists: zebra stripe 2
-------------------------------------------- */
.af_liststripe2 li {
	border: 5px solid #f3f3f3; 
	border-radius: 0 0 1em 1em; 
}
.af_liststripe2 li:nth-child(odd) {
	background-color: #f3f3f3; 
}
ul.af_liststripe2 li ul.af_liststripe2b li {
	background: none;
}
.af_liststripe2 > li {
	margin-bottom: 1em;
}
ul.af_liststripe2 h3 a {
	color: #1f4d73; 
}
/* --------------------------------------------
   unordered lists: Reviews Top Level Page Panels and Ferry Company Reviews Inner Page Panels
-------------------------------------------- */
.af_rvwcomp1 > li { 
  border: 5px solid #f3f3f3; 
}
a.af_rvwheadctn2 h4 { 
	color: #1f4d73; 
}
/* --------------------------------------------
   unordered lists: footnav2
-------------------------------------------- */
.af_listfootnav2 li:before {
	color: #1f4d73; 
}
/* --------------------------------------------
   a link hover
-------------------------------------------- */
a {
	color: #1f4d73; 
}
a:hover {
	color: #5b96b7; 
}
/*	------------------------------
	back to top link 
	------------------------------ */
.top_site a {
	background-position: -205px -415px;
	}
/* --------------------------------------------
   headings h1 h2 h3 etc
-------------------------------------------- */
h1, h2, h3, h4 {
	font-weight: normal; 
	font-family: "PT Sans Bold", Arial, sans-serif; 
}
h1 {
	font-size: 1.438em;
	color: #9b1722;		
}
h2 {
	font-size: 1.250em;
	color: #1f4d73; 
	border: 0 none;
}
h3 {
	font-size: 1.125em;
	color: #5b96b7; 
}
h4 {
	font-size: 1em;
	color: #1f4d73; 
}
h3 a {
	color: #5b96b7; 
}
.af_pnl2 h3 {
	color: #1f4d73; 
}
/* --------------------------------------------
   input focus
-------------------------------------------- */
input:focus {
	background-color: #fee594;
}
/* --------------------------------------------
   input invalid
-------------------------------------------- */
input:not([type=email]):invalid { 
    border: 2px solid #b01f25;
}
/* --------------------------------------------
   button
-------------------------------------------- */
button {
	background-color: #9b1722;
}
button:hover,
button:active {  
	background-color: #66100f;  
}
.af_spchpctn1 button {
	height: auto;
	min-height: 2em;
}
/*	------------------------
	buttons copied from booking flow
	------------------------ */
.afrwd_btn1 span, .afrwd_btn4 span, .afrwd_btn5 span, .afrwd_btn6 span, .afrwd_btn7 span, .afrwd_btn8 span, .afrwd_btn9 span, .afrwd_btn10 span {
  background-image: url(../img/ferrysavers-sprite.svgz) repeat scroll 0 0 / 250px 590px rgba(0, 0, 0, 0);
}
.afrwd_btn4 span, .afrwd_btn6 span {
  background-position: -193px 0;
}
.afrwd_btn1 span, .afrwd_btn5 span, .afrwd_btn7 span, .afrwd_btn8 span, .afrwd_btn9 span {
  background-position: -142px -19px;
}
/* --------------------------------------------
   Ferrysavers panel styling
-------------------------------------------- */
.af_pnl1, .af_pnl2 {
	overflow: hidden;
	margin: 0 0 1.876em 0; 
	clear: both; /* eg when 1 x double panel follows 2 x single column panels */
	border: 0 none;
}
.af_pnl1 { /* default panel */
	padding: 0;
}
.af_pnl1 + .af_pnl1 {  
	border-top: 5px solid #f3f3f3;
	padding: 1.175em 0 0;
}
.af_pnl2 { /* dark blue prominent panel e.g. sign up and save */
	background-color: #f3f3f3;
	border-top: 5px solid #9b1722;
	border-radius: 0 0 1em 1em;
}
.af_pnl2, .af_pnl2 a, .af_pnl2 h2 {
	color: #1f4d73;
}
.af_pnl2 a {
	color: #1f4d73;
}
.af_pnl1 h2 {
	border: 0 none;
	}
/* --------------------------------------------
   social media
-------------------------------------------- */
.af_social1,
.af_social2,
.af_social3,
.af_social4,
.af_social5,
.af_social6 {
	border-radius: 5em; 
}
.af_social1 {
	background-position: 0 -315px;
}
.af_social2 {
	background-position: -50px -315px;
}
.af_social3 {
	background-position: -100px -315px;
}
.af_social4 {
	background-position: -150px -315px;
}
.af_social5 {
	background-position: -200px -315px;
	margin: 0 0 .938em 0;
}
.af_social6 {
	background-position: 0 -465px;
}
/* --------------------------------------------
   reviews/testimonials popup
-------------------------------------------- */
.ui-dialog {
	border-radius: 5px;
}
.afrwd_close1 {
	background-image: url(../img/ferrysavers-sprite.svgz);
	/*background-image: url(../img/ferrysavers-sprite-ie.png)\9;*/
	background-size: 250px 590px;
}
.afrwd_close1 { /* blue close icon */
	background-position: -125px -125px;
}
/* --------------------------------------------
   clock graphic
-------------------------------------------- */
.af_clock1 {
	background-position: -190px -245px;
}
/* --------------------------------------------
   flag
-------------------------------------------- */
.af_flagLG {
	border-radius: 5em; 
}
/* --------------------------------------------
   Slider
-------------------------------------------- */
.af_flexdesc1 h2 a {
	color: #1f4d73; 
}
.af_flexdesc1 {
	background: transparent;
}
.af_flexslider {
	background-color: #f3f3f3;
	border-top: 5px solid #9b1722;
	border-radius: 0 0 1em 1em;
}
.af_flextitle1 h2 {
	margin-bottom: 0;
}
.af_flexcontnav li a {
	background-color: #E0ECF7;
	border: 1px solid #1f4d73; 
}
.af_flexcontnav li a.active {
	background-color: #1f4d73; 
	border: 1px solid #E0ECF7;
}
/* --------------------------------------------
   footer
-------------------------------------------- */
.af_rwdfoot2col {
	color: #1f4d73; 
}
footer .af_col-1-3 h3 {
	color: #9b1722; 
}
/* --------------------------------------------
   WTA logo
-------------------------------------------- */
.af_WTAhold {
  margin: 0;
}
.af_WTAcontent {
  background-color: transparent;
  color: #1f4d73;
  font-family: Arial,sans-serif;
  height: 50px;
  line-height: 50px;
}
.af_WTAlogo {
  background-position: -150px -250px;
  height: 39px;
  margin: 6px;
  width: 27px;
}
.af_WTAcontent span.af_highlight {
	color: #1f4d73; 
}
.af_WTAbgLine {
  border-bottom: 0 none;
}
/* --------------------------------------------
   footer navigation 2
-------------------------------------------- */
ul.af_listfootnav2 li a {
	color: #1f4d73; 
}
ul.af_listfootnav2 li a:hover { 
	color: #5b96b7; 
}
/* --------------------------------------------
   payment types
-------------------------------------------- */
.af_visa {
	background-position: 0 -50px;
}
.af_vise {
	background-position: -52px -50px;
}
.af_mast {
	background-position: -104px -50px;
}
.af_maes {
	background-position: -156px -50px;
} 
.af_payp {
	background-position: -190px -210px;
} 
/* --------------------------------------------
   search site & breadcrumbs
-------------------------------------------- */
.af_sitesearbtn1 {
	width: 96%;
	margin: .5em 0 0 0;
	background-color: #1f4d73; 
	height: 2em;
}
header.af_header {
	background-color: #f3f3f3;
}
.af_logo {
  height: 34px;
  width: 100%;
  margin: 5px auto 0 auto;
}
.af_block {
  margin: 0 1em 0 0;
  width: auto;
}
.af_close-btn {
  background-position: -125px -125px;
  border: 0 none;
  display: none;
  height: 25px;
  opacity: 1;
  outline: medium none;
  padding: 0;
  text-indent: 100%;
  white-space: nowrap;
  width: 25px;
}
.af_icon-arrow-dark-R { background-position: -142px 0;  }
.af_icon-arrow-dark-D { background-position: -155px 0;  }
.af_icon-arrow-dark-U { background-position: -174px 0; }
.af_icon-arrow-dark-L { background-position: -193px 0;}
/* NAVIGATION */
nav {
	background-color: #fff;
	min-height: 43px;
}
nav ul {
	font-family: "PT Sans Bold", Arial, sans-serif; 
}
nav li {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
nav li:before {
	content: normal;
}
nav li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
nav li.is-active:after {
	border-top: 0.625em transparent solid;
	border-bottom: 0.625em transparent solid;
	border-right: 0.625em #fff solid;
}
nav li a {
	color: #444; 
	font-weight: normal; 
}
/*	------------------------
	nav links + hover
	------------------------ */
/* .pg- = page; .st- = site */
.pg_Home 				nav li.af_Home a, 
.pg_FerryCompanies 	    nav li.af_FerryCompanies a, 
.pg_FerryRoutes 		nav li.af_FerryRoutes a, 
.pg_FerryPorts 			nav li.af_FerryPorts a, 
.pg_MiniCruises 		nav li.af_MiniCruises a, 
.pg_SpecialOffers 		nav li.af_SpecialOffers a, 
.pg_DisneylandParis 	nav li.af_DisneylandParis a, 
.pg_Groups 				nav li.af_Groups a, 
.pg_Freight 			nav li.af_Freight a, 
.pg_Register 			nav li.af_Register a, 
.pg_FAQ 				nav li.af_FAQ a, 
.pg_MyAccount 	nav li.af_MyAccount a,
nav li a:focus, nav li a:hover {
	background-color: transparent; 
	color: #5b96b7; 
}
.js-ready nav .block {
	background: transparent;
}

a.af_basket {
	color: #9b1722;
}



/*	---------------------------------
	Schedules Panels (mob)
	--------------------------------- */
ul.af_schedules li ul li {
	background-color: #fff;
    padding: .5em 0 .5em 1.6em;
	border-top: 1px solid #f3f3f3;
	height: auto;
}
ul.af_schedules h3 {
    background-image: none repeat scroll 0 0 #f3f3f3;
	background-color: #f3f3f3;
    color: #444;
    padding: .75em 1.25em .75em .65em;
	margin-bottom: 2px;
}
/*	---------------------------------
	schedules board etc
	--------------------------------- */
.af_icon-cal {
	background-position: -190px -286px;
}
.af_icon-clock {
	background-position: -190px -245px;
}
.af_icon-ship {
	background-position: -190px -266px;
}
/*	---------------------------------
	AUTO special Offers (mob)
	--------------------------------- */
.af_pnl1.af_SO-auto {
	color: #444;
}
.af_pnl1.af_SO-auto h3 {
	color: #1f4d73; 
}
.af_SO-auto ul.af_specOffers {
	background-color: #f3f3f3; 
	color: #444; 
	border-radius: 0 0 1em 1em; 
}	
.af_SO-auto .af_oplogo1 { 
	border-radius: 0.35em;
	background-color: #fff;
}
.af_SO-auto ul.af_specOffers .af_SO-price {
    color: #9b1722; 
}
.af_SO-auto ul.af_specOffers .af_SO-detail-1 {
	color: #1f4d73; 
}
.af_SO-auto ul.af_specOffers .af_SO-detail-2 {
	color: #1f4d73; 
}
/*	---------------------------------
	MANUAL special Offers (mob)
	--------------------------------- */
.af_pnl1.af_SO-manual {
    background-color: #fff;
	color: #444;
}
.af_SO-manual button {
    background-color: #9b1722; 
}
.af_SO-manual ul.af_specOffers {
	background-color: #fff; 
	border-radius: 0 0 1em 1em; 
	border: 5px solid #f3f3f3; 
}	
.af_SO-manual ul.af_specOffers li ul li .af_oplogo1 { 
	padding: 0.2em 0.65em;
	border-radius: 0.35em;
	background-color: #fff;
}
.af_SO-manual ul.af_specOffers .af_SO-price {
    color: #fdcc1a;
}
.af_SO-manual ul.af_specOffers .af_SO-detail-1 {
	color: #1f4d73; 
	padding: 0.25em 0;
}
.af_SO-manual ul.af_specOffers .af_SO-detail-2 {
	color: #444;
	padding: 0.25em 0;
}
/*	---------------------------------
	special Offers DETAILS (mob)
	--------------------------------- */
/*.af_SO-detail-text + .af_SO-detail-text {
	border-top: 5px solid #f3f3f3; 
}*/
/* --------------------------------------------
   companies panels
-------------------------------------------- */
ul.af_opctn1 li, ul.af_opctn2 li, ul.af_opctn3 li, ul.af_opctn4 li { /* 1 in a row */
	background-color: #fff; 
	border-radius: 0 0 1em 1em; 
	border: 5px solid #f3f3f3; 
}
ul.af_opctn1 li:nth-child(2n+1), ul.af_opctn2 li:nth-child(2n+1), ul.af_opctn3 li:nth-child(2n+1), ul.af_opctn4 li:nth-child(2n+1) {  
	background-color: #f3f3f3;  
}
.af_optxt2 {
	margin: 1em 0 0 0; 
	color: #FFF; 
	background-color: #9b1722; 
	padding: 10px; 
	border-radius: .313em; 
}
a.af_optxt2 { 
	color: #FFF; 
}
.af_optxt2:hover,
.af_optxt2:active {  
	background-color: #66100f;  
}
/* --------------------------------------------
   destinations and news panels
-------------------------------------------- */
ul.af_dstnctn1 li,
ul.af_dstnctn2 li,
ul.af_dstnctn3 li,
ul.af_newsctn1 li { /* 1 in a row */
	background-color: #fff; 
	border-radius: 0 0 1em 1em; 
	border: 5px solid #f3f3f3; 
}
ul.af_dstnctn1 li:nth-child(2n+1), ul.af_dstnctn2 li:nth-child(2n+1), ul.af_dstnctn3 li:nth-child(2n+1), ul.af_newsctn1 li:nth-child(2n+1) {  
	background-color: #f3f3f3;  
}
ul.af_spchpctn1 li { /* 1 in a row */  
	background-color: #fff;  
    border: 5px solid #fff;  
    border-radius: 0 0 1em 1em;  
}
.af_dstntxt2 a,
.af_newstxt2 a {
	color: #9b1722; 
}
/* --------------------------------------------
   timetables panel
-------------------------------------------- */
.af_formctn {
	background-color: #eee;
    border: 1px solid #bbb;
    border-radius: .313em;
}
.af_tticoncal1 {
	background-position: -150px -290px;
}
h3.af_tthead1 {
    background-color: #ddd;
    color: #444;
}
.af_rvwhead1 {
	color: #1f4d73; 
}
/* --------------------------------------------
   minus and plus icons
   Why repeat this? it's in CORE.
-------------------------------------------- */
/*.af_icon-minus,
.af_icon-plus {
    background-position: -175px -85px;
}
.af_icon-plus {
    background-position: -150px -85px;
}
.af_icon-minus2 { 
    background-position: -228px -50px;
}
.af_icon-plus2 { 
    background-position: -208px -50px;
}*/
/* --------------------------------------------
   reviews forms
-------------------------------------------- */
.af_forms hr {
	border: 0;
	border-bottom: 2px solid #ddd; 
}
.af_rvwfrmrating:not(:checked) > label { /*default*/
    background-color: #fff;
    border-radius: 5px;
    color: #ccc;
}
.af_rvwfrmrating > input:checked ~ label, /* clicked on */
.af_rvwfrmrating:not(:checked) > label:hover, /*hovering*/
.af_rvwfrmrating:not(:checked) > label:hover ~ label {
    color: #fbb921;
}
.af_rvwfrmrating > input:checked + label:hover, /*hovering selected*/
.af_rvwfrmrating > input:checked + label:hover ~ label,
.af_rvwfrmrating > input:checked ~ label:hover,
.af_rvwfrmrating > input:checked ~ label:hover ~ label,
.af_rvwfrmrating > label:hover ~ input:checked ~ label {
    color: #fdcc1a;
}
.afrwd_subReview { 
	background-color: #ddd;
	color: #fff;
}
/* --------------------------------------------
   dirty bullet fix
-------------------------------------------- */
.squareBullet li:before {
    content: "\25CF "; /*●, Dec 9679, Hex 25CF or \25CF, BLACK CIRCLE, https://www.w3schools.com/charsets/ref_utf_geometric.asp*/
    margin-left: -1.5em;
	color: #1f4d73; 	
}
/* --------------------------------------------
   rosette in footer - FS added class
-------------------------------------------- */
.af_ros1 { 
	background-image: url(../img/rosette.png);
	width: 27px;
	height: 38px;
	padding: 5px 8px 27px 6px;
}
/* --------------------------------------------
   rosette in mpu - FS added class
-------------------------------------------- */
.rosette-mpu-1 { 
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1.2;
    width: 70%; 
	float: right;
	vertical-align: top;
	overflow: hidden;
}
.rosette-img { 
	width: 30%;
	float: left;
}
.rosette-mpu-2 { 
	color: #9b1722;
}
/* --------------------------------------------
   feature pic on special offers top level - FS added class
-------------------------------------------- */
.af_featurepic-1 { 
	margin-bottom: .938em;
}
.af_pnl1 h2, 
.af_pnl2 h2 {
	margin-bottom: 0;
	border-bottom: 0 none;
}
.fol_iframe_QQ {
  display: block;
  height: 432px;
  position: relative;
  width: 100%;
}
#afiframe {
  position: absolute;
  width: 100%;
  left: 0;
  height: 100%;
}
.af_nav-btn { /* fix for GEM 10179 */
background-image: url("../img/ferrysavers-sprite.svgz");
  background-size: 250px 590px;

  background-position: 0 0;
  border: 0 none;
  float: right;
  margin: .4em 0 0 0;
  outline: 0 none;
  padding: 0;
  text-indent: -999em;
}
.af_SO-detail-text.af_SO-pic {
	border-bottom: 5px solid #f3f3f3;
}
.af_SO-detail-text.af_SO-pic .af_SO-detail-1 {
	font-size: 1em;
	color: #1f4d73;
}
ul.af_ftnvltctn li a {
	color: #1f4d73;
}	
	
} /* END Media Query */
/*	--------------------------------------------
	END mobile
	----------------------------- */


	
@media screen and (max-width: 21.063em) { /* Reviews Top Level Page Panels and Ferry Company Reviews Inner Page Panels - 337px down */
} /* END Media Query 21.063em*/

@media screen and (min-width: 25.000em) {  
/* --------------------------------------------
   companies panels
-------------------------------------------- */	
ul.af_opctn1 li, ul.af_opctn2 li, ul.af_opctn3 li, ul.af_opctn4 li { /* 2 in a row */
	width: 47%;
	height: auto;
	display: inline-block;
	overflow: hidden;
	float: left;
	background-color: #fff;
	border-radius: 0 0 1em 1em;
	margin: 0 6% 6% 0;
	padding: 1em;
	text-align: center;
	list-style: none;
}
ul.af_opctn1 li:nth-child(2n+2),
ul.af_opctn2 li:nth-child(2n+2),
ul.af_opctn3 li:nth-child(2n+2),
ul.af_opctn4 li:nth-child(2n+2) {
	margin-right: 0;
}
ul.af_opctn1 li:nth-child(2n+1), ul.af_opctn2 li:nth-child(2n+1), ul.af_opctn3 li:nth-child(2n+1), ul.af_opctn4 li:nth-child(2n+1) {  
	background-color: #fff;  
}
ul.af_dstnctn1 li:nth-child(2n+1), ul.af_dstnctn2 li:nth-child(2n+1), ul.af_dstnctn3 li:nth-child(2n+1), ul.af_newsctn1 li:nth-child(2n+1) {  
	background-color: #fff;  
}
.af_liststripe1 li.af_listset1:nth-child(odd) {  
	background-color: #fff;  
}
.af_liststripe2 li:nth-child(2n+1) {  
	background-color: #fff;  
}
} /* END media query */



/* --------------------------------------------
   'TABLET' Media Queries - 500px 31.250em to 768px 48.000em up if 16px = 1em
-------------------------------------------- */
@media screen and (min-width: 31.250em) {
/* Companies and Timetables Panels - 500 up */
ul.af_opctn1 li, ul.af_opctn3 li, ul.af_opctn4 li {
	width: 31.33333333333333%; /* 3 in a row */
	margin: 0 3% 3% 0; /*FS*/
}
ul.af_opctn1 li:nth-child(3n+1),
ul.af_opctn1 li:nth-child(3n+2),
ul.af_opctn3 li:nth-child(3n+1),
ul.af_opctn3 li:nth-child(3n+2),
ul.af_opctn4 li:nth-child(3n+1),
ul.af_opctn4 li:nth-child(3n+2) {
	margin-right: 3%; /*FS*/
}
ul.af_opctn1 li:nth-child(3n+3),
ul.af_opctn3 li:nth-child(3n+3),
ul.af_opctn4 li:nth-child(3n+3) {
	margin-right: 0;
}

/*	------------------------------------------
	map tabs - based on console tabs from MMB
	------------------------------------------ */
.afrwd_tabs2 ul {
	background-color: #e5e5e5;
}
.afrwd_tabs2 a {
	color: #444;
}
.afrwd_tabs2 a.active {
	background-color: #fdcc1a;
}
.afrwd_tabs2 li .active {
	color: #444;
}
/*	----------------------
	END tabs
	---------------------- */

ul.af_spchpctn1 li {
	background-color: transparent; 
    border: 0 none;
    border-radius: 0;
    margin: 0 0 1.5em 0;
}
/* --------------------------------------------
   feature pic on special offers top level
-------------------------------------------- */
.af_featurepic-1 {
	margin-bottom: 1.5em;
}

/* --------------------------------------------
   TEST pic with text around - Timetable Test top level
-------------------------------------------- */
.af_col-2-3 .af_pnl1 figure {
    float: left;
    padding: 0 2em 0 0;
}
.af_col-2-3 .af_pnl1 p {
    margin: 0;
}
.af_col-2-3 .af_rwd2col figure,
.af_col-2-3 .af_rwd2col-rule figure,
.af_col-2-3 .af_rwd3col figure,
.af_col-2-3 .af_rwd3col-rule figure {
    float: none;
    padding: 0;
	margin: 0 0 1em 0;
	overflow: hidden; 
}
.af_col-1-2 .af_pnl1 figure {
    float: none;
    padding: 0;
}
.af_col-1-2 .af_pnl1 p {
    margin: 0.938em 0 0 0;
}
} /* END Media Query 31.250em */

@media screen and (min-width: 43.750em) { /* Companies and Timetables Panels - 700 up */
ul.af_opctn1 li,
ul.af_opctn3 li {
	width: 22.75%; /* 4 in a row */
	margin: 0 3% 3% 0;
}
ul.af_opctn1 li:nth-child(4n+1),
ul.af_opctn1 li:nth-child(4n+2),
ul.af_opctn1 li:nth-child(4n+3),
ul.af_opctn3 li:nth-child(4n+1),
ul.af_opctn3 li:nth-child(4n+2),
ul.af_opctn3 li:nth-child(4n+3) {
	margin-right: 3%;
}
ul.af_opctn1 li:nth-child(4n+4),
ul.af_opctn3 li:nth-child(4n+4) {
	margin-right: 0;
}
} /* END Media Query 43.750em */


/* --------------------------------------------
   'DESKTOP' Media Queries - 768.01px 48.001em up if 16px = 1em
-------------------------------------------- */
@media screen and (min-width: 48.001em) {
/* Destination/Countries Panels - 768px up */
ul.af_dstnctn1 li,
ul.af_dstnctn3 li { /* 2 in a row */
	width: 48.5%;
	display: inline-block;
	float: left;
	margin: 0 3% 3% 0;
}
ul.af_dstnctn1 li:nth-child(2n+2),
ul.af_dstnctn3 li:nth-child(2n+2) {
	margin-right: 0;
}
/* --------------------------------------------
   html and body
-------------------------------------------- */
body {
	background-color: #ddd;
}

/* --------------------------------------------
   wrapper containers
-------------------------------------------- */
#af_wrapper { 
	padding: 0;
	background-color: #fff;
}
/* --------------------------------------------
   header & footer
-------------------------------------------- */
footer {
    width: 97.8%; 
    margin: 0 1.1%;
    /*height: 350px;*/ /* REMEMBER height = padding-bottom on .af_sticky_wrap */
}
.af_sticky_wrap {
	/*padding-bottom: 350px;*/
	padding-left: .938em;
	padding-right: .938em;
}
	/*	------------- 
		IE8 -9: footer exceptions
		--------------------- */
	footer {
		/*height: 530px \ ;*//* IE8-9*/
	}
.af_sticky_wrap {
	/*padding-bottom: 530px \ ;*//* IE8-9*/
	}
.af_logo {
  width: 170px;
}
/* --------------------------------------------
   hr tag
-------------------------------------------- */
hr {
	border-bottom: 5px solid #f3f3f3; 
}
/* --------------------------------------------
   unordered lists: zebra stripe 3 - timetable panel - desktop version
-------------------------------------------- */
.af_timetables li {
	border: 2px solid #f3f3f3; 
}
.af_timetables li:nth-child(odd) {
	background-color: #f3f3f3; 
}
ul.af_timetables h4 {
    background-color: transparent;
    color: #1f4d73; 
}
ul.af_timetables > li > ul > li:nth-child(2n+1) {
	background-color: transparent;
}
ul.af_timetables li.af_ttsel1a {
	background-color: #1f4d73; 
	border: 2px solid #1f4d73; 
}
ul.af_timetables li.af_ttsel1a h4,
ul.af_timetables li.af_ttsel1a ul.af_ttsel1b li {
	color: #fff;
}
/* --------------------------------------------
   headings h1 h2 h3 etc
-------------------------------------------- */
h1 {
	font-size: 1.643em; 
}
h2 {
	font-size: 1.429em; 
}
h3 {
	font-size: 1.143em; 
}
h4 {
	font-size: 1em; 
}
/*	--------------------------------------------
	Responsive-Friendly CSS Columns
	-------------------------------------------- */
.af_rwd2col,
.af_rwd3col,
.af_rwd2col-rule,
.af_rwd3col-rule {
  -webkit-column-gap: 60px;
     -moz-column-gap: 60px;
          column-gap: 60px;
}
.af_rwd2col,
.af_rwd3col {
  -webkit-column-gap: 30px;
     -moz-column-gap: 30px;
          column-gap: 30px;
}
.af_rwd2col-rule,
.af_rwd3col-rule,
.af_rwd1to2col-rule {
  -webkit-column-rule: 5px solid #f3f3f3;
     -moz-column-rule: 5px solid #f3f3f3;
		  column-rule: 5px solid #f3f3f3;
}
.af_rwd1to2col, /* timetables panel */
.af_rwd1to2col-rule {
  -webkit-columns: 1 200px;
     -moz-columns: 1 200px;
          columns: 1 200px;
  -webkit-column-gap: 30px;
     -moz-column-gap: 30px;
          column-gap: 30px;
}
/* --------------------------------------------
   Slider
-------------------------------------------- */
.af_flexdirecnav li a { /* Direction Nav */
	width: 45px;
	height: 42px;
}
.af_flexdirecnav li a.next {
	background-position: -100px -415px;
}
.af_flexdirecnav li a.prev {
	background-position: 0 -415px;
}
.af_flexdirecnav li a.next:hover {
	background-position: -150px -415px;
}
.af_flexdirecnav li a.prev:hover {
	background-position: -50px -415px;
}
/*	---------------------------------
	Schedules Panels
	--------------------------------- */
ul.af_schedules li ul {
	border-bottom: 5px solid #f3f3f3; 
}
ul.af_schedules li ul li {
	background-color: #fff;
	border: 0 none;
}
ul.af_schedules h3 {
	background-color: #fff;
    color: #9b1722; 
}
/*	---------------------------------
	AUTO Special Offers (dsk)
	--------------------------------- */
.af_pnl1.af_SO-auto {
    background-color: #f3f3f3; 
	color: #fff;
	padding: 1em 1em 0 1em; 
	border-radius: 0 0 1em 1em; 
}
.af_pnl1.af_SO-auto h2,
.af_pnl1.af_SO-auto h3 {
    color: #1f4d73; 
}
.af_SO-auto ul.af_specOffers li ul {
	border-bottom: 5px solid #fff; 
	font-size: .75em;
}
/*	---------------------------------
	special Offers LIs
	--------------------------------- */
.af_SO-auto ul.af_specOffers li ul li:nth-child(1) { width: 29%; padding-right: 1%; float: none; margin: 0; }
.af_SO-auto ul.af_specOffers li ul li:nth-child(2) { width: 18%; float: none; text-align: center; margin: 0; }
.af_SO-auto ul.af_specOffers li ul li:nth-child(3) { width: 17%; float: none; margin: 0; }
.af_SO-auto ul.af_specOffers li ul li:nth-child(4) { width: 21%; float: none; text-align: center; clear: none; margin: 0; padding: 0 .75em; }
.af_SO-auto ul.af_specOffers li ul li:nth-child(5) { width: 14%; float: none; margin: 0; }
.af_SO-auto .af_SO-price {
	border: 0 none;
	padding: 0;
}
.af_SO-auto .af_SO-more {
	display: none;
}
.af_SO-auto .af_oplogo1 { 
	margin: 0 auto;
	float: none;
}
/*	---------------------------------
	MANUAL Special Offers (dsk)
	--------------------------------- */
.af_pnl1.af_SO-manual {
/*    border: 5px solid #f3f3f3; */
    border: 0 none; 
    padding: .938em .938em 0 .938em; 
	border-radius: 0 0 1em 1em; 
	background-color: #fff;
	color: #444;
}
.af_SO-manual ul.af_specOffers {
	background-color: #fff;
	padding: 0 0 1em 0;
	border: 0 none;
}	
.af_SO-manual ul.af_specOffers li ul {
	border-bottom: 5px solid #f3f3f3;
	margin: 0;
}
/* --------------------------------------------
   timetables panel
-------------------------------------------- */
h3.af_tthead1 {
    background-color: transparent;
    color: #5b96b7; 
}
/* --------------------------------------------
   reviews forms
-------------------------------------------- */
.af_forms hr {
	border-bottom: 1px solid #ddd; 
}
/*	---------------------------------
	console tabs -dsk
	--------------------------------- */
.afrwd_tabs2 li .active {
	color: #444;
	border-bottom-color: #fff;
}
.afrwd_tabs2 a {
	color: #444;
	background-color: #e5e5e5;
	border-radius: .313em .313em 0 0;
}
.afrwd_tabs2 a.active {
	border-bottom: 3px solid transparent; 
	bottom: -5px;
	background-color: #fdcc1a;
}
.afrwd_main2, .afrwd_main3 {
  background-color: #fff;
}
.afrwd_main3 {
  border: 3px solid #fdcc1a;
}
/*	----------------------
	END tabs
	---------------------- */
.mapInfo {
  background-color: #ffe55e;
  border-radius: 5px;
  color: #0a4e9b;
}
.mapInfo p {
  color: #0a4e9b;
}

/* --------------------------------------------
   rosette in mpu - FS added class
-------------------------------------------- */
.rosette-mpu-1 { 
    font-size: 1.6em;
    line-height: 1.3;
}
} /* END Media Query 48.001em*/



@media screen and (min-width: 53.125em) { /* Reviews Top Level Page Panels - 850px up */

} /* END Media Query 53.125em*/

/*	------------------------------------
	MQ: 57.875em
	------------------------------------ */
@media screen and (min-width: 57.875em) { 
/* Companies and Timetables Panels - 926 up */
		
h1 {
	margin: .5em 0;
	max-width: 71%;
}
.af_pnl1.af_SO-manual h1 {
	padding: 0;
}
/* --------------------------------------------
   search site & breadcrumbs
-------------------------------------------- */
/*.af_search {
	right: 1.876em; 
}*/
.af_search {
	right: 1.876em;
	top: 100px;
}
.af_sitesearbtn1 {
  margin: 0;
  width: auto;
}
.af_langPick {
	right: 2em; 
}
header.af_header {
	background-color: #f3f3f3;
}
/* ferrysavers LOGO etc */ 
.af_logo { /*tab/dsk*/
  float: left;
  margin: 13px 0 0;
}
nav li {
	border-radius: 5px 5px 0 0; 
	margin: 4px 2px 0 2px; 
	border-top: 1px solid #ddd; 
    border-left: 1px solid #ddd; 
    border-right: 1px solid #ddd; 
	background-color: #ddd; 
}

/*	------------------------
	nav links + hover - updated to match what's used/match updated AFerry
	------------------------ */
/* .pg- = page; .st- = site */
.pg_Home 				nav li.af_Home a, 
.pg_FerryCompanies 	    nav li.af_FerryCompanies a, 
.pg_FerryRoutes 		nav li.af_FerryRoutes a, 
.pg_FerryPorts 			nav li.af_FerryPorts a, 
.pg_MiniCruises 		nav li.af_MiniCruises a, 
.pg_SpecialOffers 		nav li.af_SpecialOffers a, 
.pg_DisneylandParis 	nav li.af_DisneylandParis a, 
.pg_Groups 				nav li.af_Groups a, 
.pg_Freight 			nav li.af_Freight a, 
.pg_Register 			nav li.af_Register a, 
.pg_FAQ 				nav li.af_FAQ a, 
.pg_MyAccount 	nav li.af_MyAccount a,
nav li a:focus, nav li a:hover {
	background-color: #fff; 
	border-radius: 5px 5px 0 0; 
    color: #9b1722;
}

.js-ready nav {
	background-color: #f3f3f3; 
}

.af_strapline {
	color: #1f4d73; 
	font-size: 1em; 
	margin: 1.4em 0 0 1em; 
}
.af_strapline span { 
	color: #9b1722;
}


.af_nav-btn { /* fix for GEM 10179 */
background-image: none;
  display: none;
}

} /* END Media Query 57.875em*/












@media screen and (min-width: 62.500em) { /* sign-up & save - 1000px up */ 
ul.af_dstnctn1 li { /* 3 in a row */
	width: 32%;
	margin: 0 2% 2% 0;
}
ul.af_dstnctn1 li:nth-child(2n+2) {
	margin-right: 2%;
}
ul.af_dstnctn1 li:nth-child(3n+3) {
	margin-right: 0;
}
.af_signup {
	width: 57%;
	display: inline-block;
	float: left;
}
.af_pnl2 button.af_signupbtn {
	display: inline-block;
	margin: 0 0 0 2%;
	height: 2.1em;
	white-space: nowrap;
}
ul.af_dstnctn3 li { /* 2 in a row */
	width: 48.5%; 
	margin: 0 3% 3% 0;
}
ul.af_dstnctn3 li:nth-child(2n+2) {
	margin-right: 0%;
}
} /* END Media Query 62.500em*/

@media screen and (min-width: 63.750em) {
h1 {
	max-width: 72.5%;
}
nav li {
	font-size: 0.95em;
}
nav li a {
	padding: 0.3em 0.45em; 
}
} /* END Media Query 63.750em*/

@media screen and (min-width: 75.063em) { /* Companies and Timetables Panels - 1201px up */
h1 {
	max-width: 77%;
}
ul.af_opctn1 li {
	width: 15%; /* 6 in a row */ 
	margin: 0 2% 2% 0; 
}
ul.af_opctn1 li:nth-child(6n+1),
ul.af_opctn1 li:nth-child(6n+2),
ul.af_opctn1 li:nth-child(6n+3),
ul.af_opctn1 li:nth-child(6n+4),
ul.af_opctn1 li:nth-child(6n+5) {
	margin-right: 2%; 
}
ul.af_opctn1 li:nth-child(6n+6) {
	margin-right: 0;
}
/* super-wide nav spacing */
/* from content rwd */
nav li {
	font-size: 1.03em;  
	letter-spacing: 0.01em;
	margin: 0 2px; 
}
nav li a {
	padding: 0.3em 0.6em; 
}
/* end content rwd */

.af_signup {
	width: 64%; 
}

/* --------------------------------------------
   Christmas background image and CSS animation - START
-------------------------------------------- 
/* SNOW ANIM source - https://codepen.io/NickyCDK/pen/AIonk *
body {
	background: #fff url(../img/ferrysavers-xmas-1.jpg) repeat-x fixed center top;
}

body::before {
	content: "";
	display: block;
	background: none;
	background-image: url('../img/snow1.png'), url('../img/snow2.png'), url('../img/snow3.png');
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
	-webkit-animation: snow 10s linear infinite;
	-moz-animation: snow 10s linear infinite;
	-ms-animation: snow 10s linear infinite;
	animation: snow 10s linear infinite;
	
	-webkit-backface-visibility: hidden; /* http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform *
	-webkit-transform: translate3d(0, 0, 0); /* http://stackoverflow.com/questions/30637358/css3-transform-causing-text-to-flicker-in-safari-and-firefox-mac-yosemite *
	transform: translate3d(0, 0, 0); /* http://stackoverflow.com/questions/30637358/css3-transform-causing-text-to-flicker-in-safari-and-firefox-mac-yosemite *
}

/* --------------------------------------------
   Christmas background image and CSS animation - END
-------------------------------------------- */

} /* END Media Query 75.063em*/

/*	---------------------------------------------
	END Screen MQs
	--------------------------------------------- */