@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}



@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family:calibri,sans-serif;
}


a {
  color: var(--bs-link-color);
  text-decoration: none;
}
a:hover {
  color: var(--bs-link-hover-color);
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}


hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}



h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}


@media (min-width: 250px) {
.tripwide {
  display:none;
	}
}
@media (min-width: 250px) {
.tripbox {
  display:block;
  margin:auto;
  padding: 0px;
  max-width: 350px;
	}
}

@media (min-width: 800px) {
.tripwide {
display:block;
margin:auto;
padding: 0px;
width:100%;
position:relative;
	}
}

@media (min-width: 800px) {
.tripbox {
display:none;
	}
}



@media (min-width: 250px) {
.container {
  width: 95%;
  padding: 10px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10px;
  margin-bottom: 5px;
  background: #fff;
  text-align: justify;
  text-justify: auto;
  height:auto;
	}
}

@media (min-width: 800px) {
.container {
  width: 80%;
  padding: 10px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10px;
  margin-bottom: 5px;
  background: #fff;
  text-align: justify;
  text-justify: auto;
  height:auto;
	}
}

@media (min-width: 1000px) {
.container {
  width: 70%;
  padding: 10px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10px;
  margin-bottom: 5px;
  background: #fff;
  text-align: justify;
  text-justify: auto;
  height:auto;

	}
}

@media (min-width: 250px) {
.containertrip {
  width: 95%;
  padding: 0px;
  margin: auto;
  background: #fff;
  height:350px;
	}
}

@media (min-width: 800px) {
.containertrip {
  width: 80%;
  padding: 0px;
  margin: auto;
  background: #fff;
  height:177px;
	}
}

@media (min-width: 1000px) {
.containertrip {
  width: 70%;
  padding: 0px;
  margin: auto;
  background: #fff;
  height:177px;
	}
}

.container ul li{
padding-top:-10px;

}

.kontenIMG {
width:100%;
height:300px;
margin:auto;
background:#ccc;
}

.kotakkonten {
position: relative;
width: 80%;
max-width: 800px;
background: #ccc;
min-height: 300px;
float: center;
display: block;
}

@media (min-width: 250px) {
.konten {
  background: #fff;
	}
}

@media (min-width: 800px) {
.konten {
  background-image: url('../assets/labuanbajo.jpg');
  background-position: top left;
  animation: mymove 60s infinite;
	}
}

@keyframes mymove {
  50% {background-position: center;}
}

.header {
width: 100% + 10px;
padding: 5px;
margin:-10px;
background: #26109C;
color: #F09A3E;
}

.header a {
color: #fff;
}
.header a:hover {
  color: var(--bs-link-color);
}

.header li {
list-style-type: none;
display: block;
float: left;
padding-left: 10px;
background: #ccc;
}


@media (min-width: 250px) {
.header-title {
  display:block;
  float:left;
  margin:auto;
  position:relative;
	}
}

@media (min-width: 800px) {
.header-title {
display:block;
float:left;
margin:auto;
position:absolute;
	}
}

@media (min-width: 800px) {
.header-menu-float {
float:right;
margin: auto;
position:relative;
padding-right:20px;
	}
}
@media (min-width: 250px) {
.header-menu-float {
display:block;
float:right;
width: content-width;
position:relative;
clear: both;
	}
}

.header-menu-float img {
margin-left: 20px;
margin-right: 5px;
}


.footer {
width: 100% + 10px;
padding: 10px;
background: #2ADB5E;
font-size:14px;
color:#270D73;
margin:-10px;
}

.footer a {
color: #270D73;
font-weight: bold;
}
.footer a:hover {
  color: var(--bs-link-color);
font-weight: bold;
}

@media (min-width: 250px) {
.leftbar {
background-position: top left;
width: 350px;
color: #000;
font-size:18px;
color: #262B7A;
margin:auto;
position: relative;
	}
}

@media (min-width: 800px) {
.leftbar {
background-position: top left;
width: 350px;
float: left;
color: #000;
font-size:18px;
color: #262B7A;
position: relative;
	}
}

.leftbar ul li {
list-style-type: none;
margin-left: 0px;
}

.wtitle {
width: 100%;
display:block;
text-align: center;
font-weight: 400;
font-size: 22px;
float:left;
margin-bottom: 20px;
}

.waktu {
font-size: 18px;
font-weight: 400;
}


@media (min-width: 250px) {
.rightbar {
width: 100%;
float: left;
min-height:100px;
font-size:14px;
position: relative;
	}
}

@media (min-width: 800px) {
.rightbar {
width:calc(var(--width, 100%) - 360px);
float: right;
min-height:100px;
font-size:13px;
position: relative;
	}
}

.widekonten {
width: 100% + 10px;
padding: 10px;
margin:-10px;
}

.row1 {
width:100%;
clear:both;
}

.head1, .head2, .head3, .head4, .head5, .head6 {
 display: block;
 width: max-content;
}
.head1:hover, .head2:hover, .head3:hover, .head4:hover, .head5:hover, .head6:hover {
background: #FAEAF2;
}

.kon1, .kon2, .kon3, .kon4, .kon5, .kon6 {
  padding-left:20px;
  padding-right:20px;
  display:block;
  text-align: justify;
  text-justify: auto;
  margin-top:-10px;
  border-style: solid;
  border-color: #fff;
  border-width: 2px;
}

.kon1:hover, .kon2:hover, .kon3:hover, .kon4:hover, .kon5:hover, .kon6:hover {
  border-style: solid;
  border-color: #F28CFA;
  border-width: 2px;
}

.kon1 img, .kon2 img, .kon3 img, .kon4 img, .kon5 img, .kon6 img {
padding-right: 10px;
padding-top: 10px;
float: left;
}

.subtitle {
  margin-top: 5px;
  margin-bottom: 0.5rem;
  padding: 5px;
  font-weight: 500;
  line-height: 1.2;
  display: block;
 width: max-content;
}

.head1:hover + .kon1 {
  border-style: solid;
  border-color: #F28CFA;
  border-width: 2px;
}
.head2:hover + .kon2 {
  border-style: solid;
  border-color: #F28CFA;
  border-width: 2px;
}
.head3:hover + .kon3 {
  border-style: solid;
  border-color: #F28CFA;
  border-width: 2px;
}
.head4:hover + .kon4 {
  border-style: solid;
  border-color: #F28CFA;
  border-width: 2px;
}
.head5:hover + .kon5 {
  border-style: solid;
  border-color: #F28CFA;
  border-width: 2px;
}
.head6:hover + .kon6 {
  border-style: solid;
  border-color: #F28CFA;
  border-width: 2px;
}

.kon1:hover + .head1 {
background: #FAEAF2;
}
.kon2:hover + .head2 {
background: #FAEAF2;
}
.kon3:hover + .head3 {
background: #FAEAF2;
}
.kon4:hover + .head4 {
background: #FAEAF2;
}
.kon5:hover + .head5 {
background: #FAEAF2;
}
.kon6:hover + .head6 {
background: #FAEAF2;
}


.kontri {
font-size: 8px;
}

.gambar {
width:20px;
padding-top:5px;
}

.weather-head {
bottom:auto;
display: block;
width: 100%;
background: #fff;
opacity: 0.7;
padding: 0;
margin:auto;
font-size: 15px;
font-color:#000;
font-weight: 500;
}

.weather-head img {
margin-top:5px;
}
.weather {
display: block;
width: 33%;
float:left;
margin:auto;
}
.weather2 {
display: block;
width: 100%;
float:center;
clear:both;
margin:auto;
}

* {
  box-sizing: border-box;
}

.container-slideshow {
  position: relative;
}

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

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-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);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

.mySlides {
display:none;
}


@media (min-width: 250px) {
.tomleft {
font-size:20px;
position:absolute;
left:10%;
bottom:25%;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%)
}
.tomright {
font-size:20px;
position:absolute;
right:10%;
bottom:25%;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%)
}
}

@media (min-width: 900px) {
.tomleft {
font-size:25px;
position:absolute;
left:20%;
bottom:20%;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%)
}
.tomright {
font-size:25px;
position:absolute;
right:20%;
bottom:20%;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%)
}
}

.tomleft:hover {
color:#0000ff;
cursor:pointer;
}
.tomright:hover {
color:#0000ff;
cursor:pointer;
}