@charset "UTF-8";
/* CSS Document La Perla Ferry */

@media(prefers-reduced-motion: no-preference) {html {scroll-behavior: smooth;}}	
nav {text-align: center;width: 100%;position: sticky;top: 0px;z-index:1000;}	


.dropdown-t {width:200px; text-align:center;margin-top:5px}
.dropdown-t .dropbtn-t {font-size: 16px;border: none;outline: none;color: #fff;background-color:inherit;}
.dropdown-t-content {display: none;position: absolute;z-index: 1; }
.dropdown-t-content a {color: #002f3d;padding: 12px 28px;;text-decoration: none;display: inline-block;}
.dropdown-t-content a:hover {color:#fff; text-decoration:none;}
.dropdown-t:hover .dropdown-t-content  {display: block; background-color:rgb(203,250,237,.7);color:#002f3d;  border-radius:0 0 5px 5px;}
.dropdown-t:hover .dropbtn-t  {display: block; background-color:rgb(203,250,237,1);color:#002f3d;border-radius: 5px 5px 0 0;}


.dropdown-t .dropbtn-t-corners {font-size: 16px;border: none;outline: none;color: #fff;background-color:inherit; }


.tours-icon{width:30px;margin-right:5%}
.tours-nav {z-index:100;text-align:right;transition: 5s;background-color:rgb(0, 47, 61, 1);}
.tours-nav-items {background: #002f3d;color:#ffffff; width:150px; transition-duration: 0.4s;padding:1%;text-align: center;text-decoration: none;display: inline-block;border:none}
.tours-nav-items a {transition-duration: 0.3s;padding:1%;text-decoration: none;display: inline-block;border:none}
.tours-nav-items a:hover {background:#F4F6F6;line-height:1.25em; color:#002f3d; border:none; width:150px;}
.tours-dropdown-items {background: #002f3d;color:#ffffff;transition-duration: 0.4s;padding:1%;text-align: center;text-decoration: none;display: inline-block;border:none}




/* Add a black background color to the top navigation */
.mobiletnav-e { background-color:inherit; overflow: hidden;}

.active-e a:hover a:active {background-color: #F4F6F6;color:#002f3d;margin:auto; text-align:center;}
/* Style the links inside the navigation bar */
.mobiletnav-e a {float: left; display: block; text-align:center; padding: 12px 14px; font-size:1rem;text-decoration:none;color:#fff; width:100%}
.mobiletnav-e .dropbtn-e-light a {float: left; display: block; text-align:center; padding: 12px 14px; font-size:1rem;text-decoration:none;color:#002f3d; width:100%}

.mobiletnav-e .dropbtn-e-light {text-decoration:none;color:#002f3d; border-radius:5px 25px;background-color:#cbfaed;width:100%; text-align:center; border:none}

.mobiletnav-e .dropbtn-e a:hover {text-decoration:none;color:#fff; border-radius:5px 25px;background-color:#033544;width:100%; text-align:center}
.mobiletnav-e .dropbtn-e-light a:hover {text-decoration:none;border-radius:25px 5px;background-color:inherit;width:100%; text-align:center}

/* Hide the link that should open and close the mobiletnav-e on small screens */
.mobiletnav-e .icon-e {display: none;}

/* dropdown-e container - needed to position the dropdown-e content */
.dropdown-e {float: left;overflow: hidden;width:100%; text-align:center; padding-left:1em}

/* Style the dropdown-e button to fit inside the mobiletnav-e */
.dropdown-e .dropbtn-e {font-size:1 rem;border: none;outline: none;color:#002f3d;padding: 12px 14px;background-color:inherit; }

/* Style the dropdown-e content (hidden by default) */
.dropdown-e-content { display: none;position: absolute;background-color:#F4F6F6;z-index: 1;color: #002f3d; border-radius:15px; overflow:hidden; border:solid 1px #F4F6F6 }

/* Style the links inside the dropdown-e */
.dropdown-e-content a {float:left;color: #002f3d;padding: 12px 16px; text-decoration: none; display: block;text-align: left;}
	
/* Add a dark background on mobiletnav-e links and the dropdown-e button on hover */
.mobiletnav-e a:visited a:hover, .dropdown-e:hover {background-color: #F4F6F6;color:#002f3d;text-decoration:none; margin:0!important; }
.dropbtn-e a a:visited a:hover, .dropdown-e:hover {background-color:inherit;color:#fff;text-decoration:none; margin:0!important;}

/* Add a background to dropdown-e links on hover */
.dropdown-e-content a:hover a:active {background-color: #fff; color:#002f3d; text-decoration:none;}

/* Show the dropdown-e menu when the user moves the mouse over the dropdown-e button */
.dropdown-e:hover .dropdown-e-content {display: block;color:#002f3d;background-color:#fff }


/* When the screen is less than 990 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the mobiletnav-e (.icon-e) */
@media screen and (max-width: 991px) {
.nav-align-pg{margin:0 auto; text-align:center;}	
.mobiletnav-e a:not(:first-child), .dropdown-e .dropbtn-e { display: none;text-decoration:none;color:#002f3d}
.mobiletnav-e a.icon-e {float:none;display: block; margin:auto; text-align:center;font-weight:bold;font-size:22px; color:#ffffff;text-decoration:none}
.dropdown-e .dropbtn-e {font-size: 1rem; line-height:1.25em}
.mobiletnav-e a {font-size: 16px; text-decoration:none; line-height:1.25em; }

	
	@media screen and (max-width: 992px) {	
.dropdown-t .dropbtn-t {font-size: 16px; line-height:1.25em}
.dropdown-t .dropbtn-t-corners {font-size: 16px; line-height:1.25em}
}
	
	
/* The "responsive" class is added to the mobiletnav-e with JavaScript when the user clicks on the icon-e. This class makes the mobiletnav-e look good on small screens (display the links vertically instead of horizontally) */

  .mobiletnav-e.responsive {position: relative;}
  .mobiletnav-e.responsive a.icon-e {position: relative;center: 0;top: 0;text-decoration:none}
  .mobiletnav-e.responsive a {float: none;display: block;text-decoration:none}
  .mobiletnav-e.responsive .dropdown-e {float: none;}
  .mobiletnav-e.responsive .dropdown-e-content {position: relative;}
  .mobiletnav-e.responsive .dropdown-e .dropbtn-e { display: block;width: 100%;text-align: left;}
}

@media screen and (min-width: 992px) {
	.dropdown-e {width:200px}	
	.dropdown-e-content { width:200px}
	.dropbtn-e {width:200px}
}