@charset "UTF-8";
    * {box-sizing:border-box}
	
	.wrap{
		width: 100%;
		max-width: 1140px;
		position: relative;
		margin: auto;
	}
	.clearfix {
        content: "";
        clear: both;
        display: table;
	}
	
    /* Slideshow container */
    .topSlideshow{
    }
    .slideshow-container {
      max-width: 1000px;
      min-height: 200px;
      position: relative;
      margin: auto;
    }

    /* Hide the images by default */
    .mySlides {
      display: none;
    }

    /* Next & previous buttons */
	.prev, .next {
	  cursor: pointer;
	  position: absolute;
	  top: 50%;
	  width: auto;
	  margin-top: -22px;
	  padding: 16px;
	  color: white;
	  font-weight: bold;
	  font-size: 18px;
	  transition: 0.6s ease;
	  border-radius: 0 3px 3px 0;
	  user-select: none;
	}
	/* Position the "next button" to the right */
	.next {
	  right: 0;
	  border-radius: 3px 0 0 3px;
	}
	/* On hover, add a black background color with a little bit see-through */
	.prev:hover, .next:hover {
	  background-color: rgba(0,0,0,0.8);
	}
		
	/* Caption text */
    .CaptionText {
      color: #ffffff;
      background-color: rgba(20, 20, 20, 0.4);
      font-size: 12px;
      padding: 5px 3px;
      position: absolute;
      bottom: 3px;
      width: 100%;
      /*text-align: center;*/
    }
	
    /* The dots/bullets/indicators */
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .active, .dot:hover {
      background-color: #717171;
    }

    /* Fading animation */
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1.5s;
      animation-name: fade;
      animation-duration: 1.5s;
    }

    @-webkit-keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }

    @keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }
	
	
	.OceanIslandHeader {
		display: block;
	}
	.OceanIslandHeader ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		width: 100%
	}
	.OceanIslandHeader li {
		float: left;
		width: auto;
	}
	.OceanIslandHeader li a {
		display: block;
		color: #ff6d00;
		text-decoration: none;
		text-align: center;
		padding: 3px;
	}
	.OceanIslandHeader li a:hover {
		background-color: #ffb700;
	}

	.mainMenu {
		display: block;
	}
	.mainMenu ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		background-color: #ff6d00;
		overflow: hidden;
		width: 100%
	}
	.mainMenu li {
		float: none;
	}
	.mainMenu li a {
		display: block;
		color: white;
		text-decoration: none;
		text-align: center;
		padding: 8px 12px;
	}
	.mainMenu li a:hover {
		background-color: #ffb700;
		color: black;
	}
	.mainMenu li a:active {
		background-color: #ffb700;
	}
    .mainMenu .islandPackagesSubMenu,  .mainMenu .ourServicesSubMenu{
      display: none;
    }
    
	.column {
		float: left;
		padding: 16px;
		width: 100%;
	}
	.topleft {
		background-color: #9bdbfe;
	}
	.row:after {
		content: "";
		display: table;
		clear: both;
	}
	.columnHeader {
		background-color: #ff6d00;
		color: white;
		text-align: center;
		margin: 0;
	}
	.promoImg {
		text-align: center; 
		margin: auto;
		text-decoration: none;
		content: "";
		display: table;
		clear: both;
	}
	.bottomrightContent-container {
		width: 90%;
		margin: auto;
		padding: 8px;
	}
	.paragraphTitle {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		color: #ff6d00;
		font-weight: bold;
		margin: 0;
	}
	.paragraphTitle a {
        color: #ff6d00;
    }
	.paragraphContent {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		text-align: justify;
	}
	.paragraphContent strong, .paragraphContent a {
        color: #ff6d00;
    }
    .paragraphImage {
        float: left;
        padding: 8px;
        width: 30%;
        min-width: 150px;
        max-width: 200px;
    }
    .paragraphImage-container {
        overflow: auto;
        padding: 5px;
    }
    .paragraphImage-container::after {
        content: "";
        clear: both;
        display: table;
    }
    .largePosterImage {
        width: 100%;
        max-width: 100%;
        margin: auto;
    }
    .largeImage-container {
        width: 100%;
        margin: auto;
        padding: 5px;
    }
    .paragraphBorder-container {
        overflow: auto;
        padding: 3px;
        border: 2px solid #ff6d00;
    }
    .paragraphBorder-container::after {
        content: "";
        clear: both;
        display: table;
    }
    .paragraphAfterImage {
        padding: 0;
        margin: auto;
        width: 48.5%;
        min-width: 150px;
        max-width: 300px;
    }
    
    .enquiryform-container {
        width: 80%;
        max-width: 500px;
		margin: auto;
    }
    .enquiryprocessing-container {
        width: 70%;
        max-width: 70%;
		margin: auto;
    }
    .enqformerror {
        color: #FF0000;
        background-color: #ffbc89;
    }
    
	.bottomBar {
		display: block;
		background-color: #ff6d00;
	}
	.contactDetail {
		padding: 8px;
	}
    .contactDetail::after {
        content: "";
        clear: both;
        display: table;
    }
	.gMap {
		float: none;
	}
	.contactTitle {
		margin: 0;
		font-weight: bold;
	}
	.contactTitle a {
	    color: black;
	}
	.contactTitle a:visited {
	    color: white;
	}
	.contactInfo {
		margin: 0;
		margin-left: 8px;
	}
	.contactInfo a {
	    color: black;
	}
	.contactInfo a:visited {
	    color: white;
	}
	.MATTAno {
		text-align: center;
		padding: 8px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: small;
	}
	
@media screen and (min-width: 700px) {
	.mainMenu li {
		float: left;
	}
    .mainMenu .mainMenuPackages .islandPackagesSubMenu {
      display: none;
      position: absolute;
      background-color: #9bdbfe;
      width: 150px;
      z-index: 1;
    }
    .mainMenu .mainMenuPackages .islandPackagesSubMenu a {
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
      color: black;
    }
	.mainMenu .mainMenuPackages:hover .islandPackagesSubMenu {
	    display: flex;
	    flex-flow: column;
	}
    .mainMenu .mainMenuServices .ourServicesSubMenu {
      display: none;
      position: absolute;
      background-color: #9bdbfe;
      width: 150px;
      z-index: 1;
    }
    .mainMenu .mainMenuServices .ourServicesSubMenu a {
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
      color: black;
    }
	.mainMenu .mainMenuServices:hover .ourServicesSubMenu {
	    display: flex;
	    flex-flow: column;
	}

	.column.topleft {
		width: 35%;
	}
	.column.bottomright {
		width: 65%;
	}

	.gMap {
		float: right;
	}
}