@charset "utf-8";
/* CSS Document */
html {margin:0 !important; background: #202020 !important;}
body {font-family: Arial, Helvetica, sans-serif;  color: #627682;}
table, tr, td {font-family: Arial, Helvetica, sans-serif;  color: #627682;}
h1, h2, h3, h4 {font-family: 'Kaisei Opti', serif; color:#798994;}
h1 {margin: 0; font-size:2em; letter-spacing:normal; font-weight:normal;}
h2 {margin: 0; font-size:1.875em; letter-spacing:normal; font-weight:normal;}
h3 {margin: 0; font-size:1.375em; letter-spacing:normal; font-weight:normal;}
h4 {margin: 0; font-size:.875em; letter-spacing:normal; font-weight:normal;}
#body {font-size:1.1875em; background: #FFFFFF !important;}

#thingstodoblock h2, #roominfoblock h2, #thingstodoblock h3, #roominfoblock h3, #thingstodoblock h4, #roominfoblock h4 {margin-bottom:.5em;}

section {margin:3em auto !important;}
@media (max-width: 1198px) {
section .container-xl {padding:0 2em !important;}
}
@media (max-width: 768px) {
section .container-xl {padding:0 1em !important;}
}

/*
a, a:visited {text-decoration:none; color:#4c6271;}
*/
a, a:visited {text-decoration:none; color:#007074;}
a:hover, a:active {text-decoration:none; color:#35978f !important;}
* {box-sizing: border-box;}
header {max-width:none !important;}

@media (max-width: 768px) {
  .w-md-100 { width: 100% !important; }
}

.descripttxt {font-size:1.375em;}
.smtxt {font-size:.75em;}

.startplanningheader { font-size: 1.25em; line-height: 1.5em; letter-spacing: normal; }
.startplanningheader, .startplanningheader a, .startplanningheader svg { color: rgba(90,90,90,.5); }
.startplanningheader, .startplanningheader a, .startplanningheader svg { color: #4c6271 !important; }

.startplanningheadphone {display:block !important; }
.headercalladvisor {display:block; font-size:0.688em; line-height:1.25em; color:#FFF !important}
@media (max-width: 992px) {
.headercalladvisor {display:inline !important; font-size:1em;}
}

img {width: 100%; height: auto; padding:0; border:0; margin:0; outline:none;}
img:active, img:hover, img:visited {border:0; outline:none;}
#swainlogo1 img {max-width:125px; height:auto!important; transition:width ease-in-out .3s;}

/* header */
header i {font-size:0.75em; margin-right:.25em;}
/* The navbar */
.topnav { width:100%; }

.topnavigation {background-color:#FFF;-webkit-backface-visibility:hidden;}
.shrink-nav {padding:0}
/*
.shrink-logo img {transition:width ease-in-out .3s; width:100px !important;	padding-top:.5em !important;}
.shrink-lwh img {transition:width ease-in-out .3s; width:auto !important; height:75px !important;}
.shrink-header {padding:0 !important; font-size:90% !important;}
.shrink-navigationitems {font-size:95% !important;}
*/
#headerplaceholder {height:50px; width:100%; display:none; }
/*
@media screen and (min-width : 1024px) {
.topnavigation {position: fixed !important; z-index: 100000 !important; height: 200px !important;}
#pagewrapper {position: relative !important; padding-top:200px !important}
}
@media screen and (max-width : 767px ) {
.topnavigation {position: relative !important; height: auto !important}
#pagewrapper {position: relative !important; padding-top:0 !important}
}
*/
/* Navbar links */
.topnav a { color: #333333 !important; padding:.5em 1em; text-decoration: none; font-size:1.125em; }
.topnav a:hover { background-color: #ddd !important; color: black; }
.nav-item {padding-right:2em;}
.safetravelsnav {border:1px solid #333 !important; padding-right:0 !important; }

@media (max-width: 1200px) {   
.nav-item {padding-right:1.5em;}
}
@media (max-width: 1100px) {   
.nav-item {padding-right:1em;}
}
#main_header_link {display:block !important;}
@media (max-width: 998px) {   
#main_header_link {display:none !important;}
}

/* Footer */
.footerlogo {width:130px !important;} 
footer {background:#202020 !important; color:#FFF !important; font-size:.875em;width:100% !important; padding:0 !important; margin:0 !important}
#footertop {background:#354f5f !important; height:7px !important; }
.footerrow1 {background:#3E3E3F !important;}
.footerrow2 {background:#202020 !important;}
footer a, footer a:visited, footer a:hover, footer a:active {color:#FFF !important}
footer a:hover {font-weight:bold !important}
footer h5 a:hover {font-weight:normal !important}
footer li {list-style:none !important; padding:0 !important;}
footer ul {list-style:none !important; padding:0 !important;}
footer h1, footer h2, footer h3, footer h4, footer h5 {color:#fff;}
footer .footericons i {font-size:1.5em;}

/*Luxury with Heart */
/*
.luxurywithheart {font-family: 'Allura', cursive; font-size:3.25em; color:#35978f !important; }
.luxurywithheart a { color:#35978f !important; }
.luxurywithheart a:hover { color:#00509a !important; }

@media (max-width: 500px) {
.luxurywithheart { line-height:1em !important; margin:0.5em auto;}
}
*/
.luxurywithheartheaderimage {font-family: 'Allura', cursive; color:#FFF;text-shadow: 2px 2px #333 !important;} 
.luxurywithheartheaderimagearea { position: absolute; right:10%; top:35%; text-align:center !important;}
.luxurywithheartheaderimagearea, .luxurywithheartheaderimagearea div {margin:0; line-height:.875;}
.lwhdestination {font-size:4em;}
.lwhheadertitle {font-size:4em;}
.lwhwith {font-size:75%}
@media screen and (max-width : 767px ) {
.luxurywithheart { margin:1em auto !important;}
}

.ghostbuttong { display: block; width: 200px; padding: .5em; text-align: center; outline: none; text-decoration: none; transition: background-color 0.2s ease-out, color 0.2s ease-out; background:none; color: #FFFFFF !important; border: 1px solid #02ac68 !important; background-color:#02ac68 !important; cursor:pointer; margin:2em 0;}
.ghostbuttong:hover, .ghostbuttong:active { transition: background-color 0.3s ease-in, color 0.3s ease-in; background:#FFFFFF !important; color:#02ac68 !important; border: 1px solid #02ac68 !important;}
.ghostbuttong { border: 1px solid #00707f !important; background-color:#00707f !important; }
.ghostbuttong:hover, .ghostbuttong:active { color:#00707f !important; border: 1px solid #00707f !important;}

@media (max-width: 992px) {
	.ghostbuttong { margin:2em auto !important;}
}
.ghostbuttong0 { margin:0 auto !important;background-color:#00707f !important; border: 1px solid #00707f !important;}
.ghostbuttong0:hover, .ghostbuttong0:active { color:#00707f !important; border: 1px solid #00707f !important;}

.stpln {padding:1em; font-size:1.25em; width:auto !important;}

.contactbuttondest {background:#e9ebed !important;margin:2em auto;}
.contactbuttondest:hover {background:#627682 !important; color:#FFF}

.tablecollabel {width:30% !important;}
@media screen and (max-width: 998px) {
	.tablecollabel {width:50% !important}
}

.headerimage {display:block !important}
@media screen and (max-width: 767px) {
	.headerimage {display:none !important}
}
.headerimagemobile {display:none !important}
@media screen and (max-width: 767px) {
	.headerimagemobile {display:block !important}
}

@media only screen 
  and (max-width: 767px) 
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {

  .headerimagemobile {
    display:none;
  }
}
@media screen and (max-width: 991px) {
	.navcontainer {background-color: rgba(255,255,255,1) !important}
	.safetravelsnav {border:0 !important;}
}
/* Start Zoom Chat Formatting */
.zva-widget .article {
  text-align: left;
  margin: 0;
  padding: 0;
}
/* End Zoom Chat Formatting */

/* Carousel */
.jcarousel-wrapper {margin: 0; position: relative; border: 0; }
.carousellist { display: flex !important; flex-wrap: wrap; align-items: stretch; list-style: none; padding: 0; margin: 0; }
.carousellist .card {margin-right: calc(var(--bs-gutter-x) * .5); margin-left: calc(var(--bs-gutter-x) * .5); }

.jcarousel-control-prev, .jcarousel-control-next {background:rgba(62, 62, 62, 1) !important;}
/* End Carousel */

/* Special Effects */
.zoom-img { width: 100%; height:auto; overflow: hidden; position: relative; }
.zoom-img img { width: 100%; transition: all .3s ease-in-out; }
.zoom-img img:hover { transform: scale(1.2); }
.text-top-right { position: absolute; top: 8px; right: 16px; color:#FFF; z-index: 10000; background:rgba(62, 62, 62, .75) !important; padding:.5em; }

.carousellist .card:hover { background-color: rgba(0, 0, 0, .03); }

/*
.card:hover { background-color: rgba(0, 0, 0, .03);}
*/
/* End Special Effects */

@media screen and (max-width: 767px) {
	.sticky-top  {position: relative !important;}
#swainlogo1 img {width:auto; height:auto!important; }
#swainlogo1 img {width:100% !important }
}

	.startplanningheader1 {display:block; }
	.mobilestartplanningheader {display:none}
@media screen and (max-width: 767px) {
	.startplanningheader1 {display:none;}
	.mobilestartplanningheader {display:block;background-color: #627682; color: #FFF !important; text-align: center; padding:.5em; margin:0;margin-bottom:.5em;font-size:95% !important;}
	.mobilestartplanningheader a {color: #FFF !important;}
	.headerlogoarea {padding:0; padding-left: .5em;}
	.lwhheader {width:75% !important;}
	.luxurywithheart {margin:.5em auto 0 auto !important;}
}

@media screen and (max-width: 767px) {
.navbarcollapse { /* Or the specific class for your dropdown menu */
        position: absolute;
        top: 100%; /* Positions it directly below the toggler */
        right: 0;
        width: 100%; /* Or a specific width */
		min-width:400px !important;
        z-index: 1000; /* Ensures it appears above other content */
        background-color: #fff; /* Or your desired background color */
		text-align:right !important;
		padding-right:.5em;
    }
	.navbarcollapse ul li .dropdown-menu {text-align: right !important; border:0 !important;}
}

.homeheaderarea {display:block !important}
.homeheaderareamobile {display:none !important}
@media screen and (max-width: 999px) {
	.homeheaderarea {display:none !important}
	.homeheaderareamobile {display:block !important}
	.carousel-caption {
		position: absolute;
		right: 15%;
		bottom: 1.25rem;
		left: 15%;
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
		color: #fff;
		text-align: center;
	}
}
.homeheadermobiletext { font-family: 'Allura', cursive; color: #FFF; text-shadow: 2px 2px #333 !important;font-size:2em; }
@media screen and (max-width: 767px) {
.homeheadermobiletext { font-size:1.5em !important; }
}
@media screen and (max-width: 450px) {
.mobilestartplanningheader { font-size:85% !important; }
}
@media screen and (max-width: 400px) {
.mobilestartplanningheader { font-size:78% !important; }
}

.carousel-caption { right:0 !important; left:0 !important; bottom:.5rem; padding-bottom:.5em !important }