/* Main CSS Document For V2.0 */

/* Reset */

* {margin:0; padding:0; }

/* Global  */

html		{	}

body		{
    background-color:#dadada;
    margin:0;
    padding:0;
    overflow-x: hidden;
    font-size:16px;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}

::selection {
    background:#458ccc;
    color:#fff;
}

::-moz-selection	{
    background:#458ccc;
    color:#fff;
}

/* REMOVE AFTER COVID STATEMENT */

#temp_banner p {
  text-align: center;
  margin: 0;
  line-height: 1.5em;
}
#temp_banner {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 3px solid #458ccc;
}

/* General */

p,	li {
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size:100%;
    margin:20px 0;
    color:#000;
    line-height:1.5em;
}

li {
    margin:2px 0;
}

p:last-of-type {
    margin-bottom:10px;
}

p.blockLink a {
    display:block;
    padding:5px 30px;
    border-radius:50px 0 50px 0;
    background-color:#458ccc;
    color:#fff;
    float:right;
    text-align:center;
    margin-bottom:20px;
}

blockquote {
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    display:block;
    position:relative;
    padding:0 30px 0 30px;
    font-style:italic;
    font-size:100%;
    margin-top:20px;
}

blockquote::before {
    position:relative;
    display:inline;
    content: url(../images/quote-open.png);
    padding:0;
    right:10px;
    top:-6px;
}

blockquote::after {
    content: url(../images/quote-close.png);
    position:relative;
    display:inline;
    bottom:-10px;
    left:10px;
}

h1, h2, h3, h4, h5, h6		{
  font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  color:#000;
  margin:10px 0;
  text-decoration: underline;
}

h1 { font-size:24px; font-weight:500; }
h2 { font-size:20px; font-weight:500;}
h3 { font-size:20px; }

a {
	color:#458ccc;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	font-size:100%;
	text-decoration:underline;
}

hr {
    clear:both;
    width:100%;
    display: block;
    margin:10px 0;
    border-style: solid;
    border-width: 1px;
    border-color:#000;
}

em {
    display: inline-block;
    background-color: rgba(209, 161, 66, 0.63);
    border-left: 6px solid #fff;
    padding: 10px;
    line-height:1.2em;
    margin-bottom:10px;
}

em a {
    color:#000;
    text-decoration: underline;
}

a.fancyLink {
    position: relative;
    display:inline-block;
    padding:5px 10px 5px 5px;
    background-color:#458ccc;
    color:#fff;
    border-left:3px solid #fff;
    transition-duration:1s;
    margin:5px 10px 5px 0px;
}

a.fancyLink div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 8px;
    width:16px;
    height:16px;
    padding-right:25px;
    padding-left:0;
    display:inline-block;
    content: url(../images/r-arrow.png);
    transition-duration:1s;
}

a.fancyLink:hover  div {
    padding-right:0;
    padding-left:25px;
    transition-duration:1s;
}

a.fancyLink p {
  color: #fff;
  margin: 0 0 0 55px;
  padding: 0;
  float: right;
}

ol.textual_list {
  margin-left: 50px;
}

ol.textual_list li {
  padding: 10px 0 10px 20px;
}

/* Containers */

header {
	width:100%;
	height:100px;
	position:fixed;
	margin:0;
	padding:0;
	border-bottom:3px #458ccc solid;
	background:#73a8d9;
	top:0px;
	z-index:10;
	-webkit-transition: all 0.2s cubic-bezier(0.67, 0.03, 0.26, 0.88);
	-moz-transition: all 0.2s cubic-bezier(0.67, 0.03, 0.26, 0.88);
}

#content {
	width:65%;
	min-width:891px;
	padding:15px 2%;
	margin:0 auto;
	background-color:#ebebeb;
	min-height: calc(100vh - 177px);
	position:relative;
	top:103px;
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
}

footer {
  top: 104px;
	padding: 10px 30px;
	border-top: 3px #458ccc solid;
	background: #2b2b2b;
	position: relative;
  display: block;
  overflow: auto;
	margin: 0;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
}

header.shrink {
	height: 75px;
}

#content.shrink {
	top: 78px;
}

footer.shrink {
	top: 78px;
}

/*------------------------------------*\
    Page Specific Styles
\*------------------------------------*/

/* Header - Navigation */

#navButton {
    display:none;
}

#headerLogo {
    height:calc(100% - 10px);
    margin:5px 0px 5px 10px;
    display:block;
    float:left;
}

#nav {
    display:block;
    width:auto;
    list-style-type:none;
    font-weight:bold;
    margin:0 20px;
    float:right;
    position:relative;
    z-index:100;
    top: calc(50% - 24px);
}

#nav li {
    float:left;
    margin:0 auto;
    position:relative;
}

#nav a {
    display:block;
    padding:8px 10px;
    color:#fff;
    text-decoration:none;
    font-size:18px;
    margin:0 5px;
    border:2px solid #458ccc;
    background:#73a8d9;
    cursor: default;
}

#nav li:first-child a {
    cursor: pointer;
}

#nav > li:first-child a {
    margin-left:0;
}

#nav > li:last-child a {
    margin-right:0;
}

#nav a:hover{
    background:#458ccc;
    border:2px solid #FFF;
}

.navDownArrow {
    margin-left:10px;
    position:relative;
    top:2px;
}

/* Header - Navigation Dropdown */

#nav ul {
    background:#565656; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgba(86,86,86,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li {
    float:none;
}
#nav ul li a {
    border-top:1px solid #FFF; /* Introducing a border between the li and the a give the illusion spaced items */
    border-left: 1px solid #FFF;
    border-right:1px solid #FFF;
    font-size:14px;
    cursor: pointer;
}

#nav ul a {
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}

#nav li:hover ul { /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
}

#nav li.dropdown ul { /* Display the dropdown on hover */
    left:0 !important; /* Bring back on-screen when needed */
}

#nav li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background:#458ccc;
    border: 2px solid #FFF !important;
}

#nav li.dropdown a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background:#458ccc !important;
    border: 2px solid #FFF !important;
}

#nav li:hover li a { /* Acts in the sub menu list items. */
    background:#458ccc;
    border-top:1px solid #FFF !important;
    border-left:1px solid #FFF !important;
    border-right:1px solid #FFF !important;
    border-bottom: none !important;
}

#nav li:hover li:last-child a { /* Acts in the sub menu list items. */
  border-bottom: 1px solid #FFF !important;
}

#nav li.dropdown ul li a { /* Acts in the sub menu list items. */
    background:#458ccc !important;
    border-top:1px solid #FFF !important;
    border-left:1px solid #FFF !important;
    border-right:1px solid #FFF !important;
    border-bottom: none !important;
}

#nav li.dropdown ul li:last-child a {
    border-bottom: 1px solid #FFF !important;
}

#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}

#nav li.dropdown a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}

#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background:#81b1dc;
    /*border:1px solid #FFF;*/
}

#nav li.dropdown ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background:#81b1dc !important;
}

#nav ul li ul li a { font-size:14px; }

#nav li img.navDownArrow {
  transform: rotate(0deg);
  transition-duration: 0.5s;
}

#nav li:hover img.navDownArrow {
  transform: rotate(180deg);
  transition-duration: 0.5s;
}

#nav li.dropdown img.navDownArrow {
  transform: rotate(180deg);
  transition-duration: 0.5s;
}

/* Footer */

footer p {
    color:#909090;
    margin: 0 !important;
    font-size:80%;
}

footer div {
    float:right;
    display: inline-block;
}

footer div a {
    text-decoration: none;
    color: inherit;
}

footer div a:hover {
    text-decoration: underline;
}

footer div p {
    display: inline-block;
    margin: 0;
}

#min_break {
  display: none;
}

/* Index */

#banner {
    width: 100%;
    display: grid;
}

.bannerSlides {
    width: 100%;
    height: auto;
    z-index: 0;
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.bannerSlides.activefade {
    opacity: 1;
    z-index: 1;
}

h1.bannerText {
    display:block;
    padding:20px 30px 20px 0px;
    border-radius:0 0 50px 0;
    border-right:3px solid #458ccc;
    border-bottom:3px solid #458ccc;
    background-color:#ebebeb;
    position:absolute;
    top:0;
    z-index:1;
    margin:0;
    font-size:160%;
    font-weight:900;
}

#frontPageImages {
  list-style-type: none;
  text-align: center;
}

#frontPageImages li {
  display: inline-block;
  position: relative;
  width: 27%;
  margin:10px 2%;
}

#frontPageImages img {
  width: 100%;
}

/* Table */

.fancyTable {
    border-collapse: collapse;
    border: 1px solid black;
    margin:0 auto;
}

.fancyTable th {
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size:16px;
    border: 1px solid black;
    padding:10px;
    font-weight:bold;
    text-align:right;
}

.fancyTable td {
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size:16px;
    border: 1px solid black;
    padding:10px;
}

.fancyTable tr:first-child {
    background-color:#c5c5c5;
    font-weight:bold;
}

.fancyTable tr {
    background-color:#dedede;
}

/* Table */

table.fancyTable {
    border-collapse: collapse;
    border: 1px solid black;
    margin:0 auto;
}

table.fancyTable th {
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size:16px;
    border: 1px solid black;
    padding:10px;
    font-weight:bold;
    text-align:right;
}

table.fancyTable td {
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size:16px;
    border: 1px solid black;
    padding:10px;
}

table.fancyTable tr:first-child th {
    text-align:center;
}

table.fancyTable tr {
    background-color:#dedede;
}c5

table.fancyTable tr:first-child {
    background-color:#c5c5c5;
}

/* Contact */

#contactBox {
    width:100%;
    max-width:320px;
    display:block;
    margin:0 auto;
}

label	{
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size:16px;
}

input	{
    width: calc(100% - 14px);
    height:1.5em;
    border:2px solid #458ccc;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size:16px;
    padding:5px;
    color:#000;
    margin-bottom:10px;
}

select, option {
    width: calc(100% - 14px);
    height:1.5em;
    border:2px solid #458ccc;
    border-radius:0;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size:16px;
    padding:5px;
    color:#000;
    margin-bottom:10px;
}


textarea	{
    width: calc(100% - 14px);
    height:10em;
    border:2px solid #458ccc;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size:16px;
    padding:5px;
    color:#000;
    margin-bottom:10px;
    resize:none;
}

@keyframes textHighlight {
    0% {color: #ff0000;}
    40% {color: #ff0000;}
    100% {color: none;}
}

@-webkit-keyframes textHighlight {
    0% {color: #ff0000;}
    40% {color: #ff0000;}
    100% {color: none;}
}

textarea.tempFlash {
    animation-name: textHighlight;
    animation-duration: 4s;
    -webkit-animation-name: textHighlight;
    -webkit-animation-duration: 4s;
}

.asterisk {
    font-size:14px;
    color: #ff0000;
    margin-right:3px;
}

@keyframes fadeInText {
    0% {color: #ebebeb;}
    100% {color: #ff0000;}
}

@-webkit-keyframes fadeInText {
    0% {color: #ebebeb;}
    100% {color: #ff0000;}
}

.error {
    font-size:14px;
    color: #ff0000;
    float:right;
    margin:0;
    animation-name:fadeInText;
    animation-duration: 2s;
    -webkit-animation-name:fadeInText;
    -webkit-animation-duration: 2s;
}

@keyframes fadeInInput {
    0% {background-color: #fff;}
    100% {background-color: #ffb9b9;}
}

@-webkit-keyframes fadeInInput {
    0% {background-color: #fff;}
    100% {background-color: #ffb9b9;}
}

.activeError {
    background-color: #ffb9b9;
    animation-name:fadeInInput;
    animation-duration: 2s;
    -webkit-animation-name:fadeInInput;
    -webkit-animation-duration: 2s;

}

#submitBox	{
    width:60%;
    margin-top: 10px;
    float:right;
    height:40px;
    border:2px solid #458ccc;
    border-radius:10px;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size:16px;
    padding:5px;
    color:#000;
    display:block;
    background-color:#c4c4c4;
}

/* Miscellaneous */

.flashBanner {
    position:fixed;
	bottom:10%;
	right:0;
    z-index:101;
}

.flashBannerHide {
    display:none;
}

.enquiryLink p {
	margin:0;
	padding:0;
	text-align:right;
}

.enquiryLink {
	padding:5px 5px 5px 40px;
	background-color: #73a8d9;
	background-image: url("../booking/images/step-2-about-your-booking.png");
	background-repeat:no-repeat;
	background-size: 40px 40px;
	background-position:8px 8px;
	width:150px;
	display:block;
	border-right: none;
	border-left: 3px solid #458ccc;
	border-top: 3px solid #458ccc;
	border-bottom: 3px solid #458ccc;
	border-radius:10px 0 0 10px;
	-webkit-animation-name: bounce;
	animation-name: bounce;
	-webkit-animation-duration: 7.5s;
	animation-duration: 7.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

.flashBannerCross {
    float:right;
    top:5px;
    right:5px;
    clear:both;
    position: relative;
}

.flashBanner button {
    background: none;
    border:none;
    cursor: pointer;
}

@-webkit-keyframes bounce {
	0%, 5%, 10%, 16%, 20%, 100% {-webkit-transform: translateY(0);}
	8% {-webkit-transform: translateY(-30px);}
	12% {-webkit-transform: translateY(-15px);}
}

@keyframes bounce {
	0%, 5%, 10%, 16%, 20%, 100% {transform: translateY(0);}
	8% {transform: translateY(-30px);}
	12% {transform: translateY(-15px);}
}

#feedbackFullScreen.hidden {
    display:none;
    z-index:-20;
}

#feedbackFullScreen.show {
    display:block;
    position: fixed;
    z-index:10000;
    top:0;
    bottom:0;
    right:0;
    left:0;
    background-color: rgba(0,0,0,0.7);
}

#feedbackFullScreenMask {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

#feedbackFullScreen form {
    position:relative;
    display:block;
    margin:0 auto;
    width:40%;
    min-width:650px;
    top: calc(50% - 239px);
    background-color: #cacaca;
    padding:15px;
    z-index: 10002;
}

#feedbackFullScreen p {
    margin:0;
}

#feedbackFullScreen table {
    width:100%;
    border-collapse: collapse;
    margin:5px 0;
}

#feedbackFullScreen tr {
    width:100%;
}

#feedbackFullScreen td {
    width:10%;
    text-align: center;
    border:1px solid #4b4b4b;
    background-color: #eaeaea;
}

#feedbackFullScreen td.top {
    width:30%;
    text-align: center;
}

#feedbackFullScreen textarea {
    margin:5px 0;
    width:calc(100% - 12px);
    height:auto;
    border:1px solid #4b4b4b;
    padding:5px;
    background-color: #eaeaea;
}

#feedbackFullScreen input.feedbackRadio {
    display:block;
    margin:0 auto;
    width:15px;
}

#feedbackFullScreen input.feedbackSubmit {
    width:auto;
    height:auto;
    padding:4px 10px;
    background-color: #4b4b4b;
    border-radius:2px;
    color: #fff;
    margin:15px auto 0;
    display:block;
    border:0;
    cursor: pointer;
}

.blockquoteContain {
    width:75%;
    margin:0 auto;
    text-align: center;
}

.floatingImage {
  float: right;
  margin: 0px 0px 20px 30px;
  width: 40%;
  height: auto;
}