body {
 font-family: UrbanistRegular;
 font-size: 100%;
 margin: 0;
}
.nwest1{
                  font-style: UrbanistBold;
              font-size: 3vw;
              left: 2%;
              top: 75%;
              color: #001a45;
              position: absolute;
            

}
.nwest2{
               font-style: UrbanistBold;
              font-size: 3vw;
              left: 2%;
              top: 80%;
              color: #001a45;
              position: absolute;
   
}

.nwestimg{
    width: 51%;
    height: 38%;
    position: absolute;
    bottom: 0%;
    left: 0;
}
.psouth1{
                  font-style: UrbanistBold;
              font-size: 3vw;
              left: 51%;
              top: 75%;
              color: #001a45;
              position: absolute;

}
.psouth2{
              font-style: UrbanistBold;
              font-size: 3vw;
              left: 51%;
              top: 80%;
              color: #001a45;
              position: absolute;
    
}
.psouthimg{
    width: 49.8%;
    height: 38%;
    position: absolute;
    bottom: 0%;
    right: 0;
}
.sululeft{
    left: 19.5%; width: 30%; bottom: 3%;
}
.suluright{
    left: 51%; width: 30%; bottom: 3%;
}
.cteamh1, .cteamtxt, .cteamtxtbold {
    text-align: center;
    width: 100%;
    color: #001a45;
}
.cteamh1 {
    font-family: UrbanistExtraBold;
    font-size: 3.5vw;
}
.cteamtxt {
    font-family: UrbanistRegular;
    font-size: 1.4vw;
}
.cteamtxt2 {
    font-family: UrbanistRegular;
    font-size: 1vw;
    text-align: center;
    width: 100%;
    color: white;
}
.cteamtxt3 {
    font-family: UrbanistRegular;
    font-size: 1vw;
    text-align: right;
    width: 100%;
    color: white;
}
.cteamtxtbold {
    font-family: UrbanistExtraBold;
    font-size: 1.6vw;
}
@font-face {
    font-family: 'ArchivoItalic';
    src: url('Archivo-Italic.ttf') format('truetype');
   }
@font-face {
    font-family: 'Lena';
    src: url('lena-400.ttf') format('truetype');
   }
@font-face {
    font-family: 'OutfitBold';
    src: url('Outfit-Bold.ttf') format('truetype');
   }
@font-face {
    font-family: 'OutfitLight';
    src: url('Outfit-Light.ttf') format('truetype');
   }
@font-face {
    font-family: 'OutfitMedium';
    src: url('Outfit-Medium.ttf') format('truetype');
   }
@font-face {
    font-family: 'OutfitSemiBold';
    src: url('Outfit-SemiBold.ttf') format('truetype');
   }
@font-face {
    font-family: 'UrbanistBold';
    src: url('Urbanist-Bold.ttf') format('truetype');
   }
@font-face {
    font-family: 'UrbanistBoldItalic';
    src: url('Urbanist-BoldItalic.ttf') format('truetype');
   }
@font-face {
    font-family: 'UrbanistExtraBold';
    src: url('Urbanist-ExtraBold.ttf') format('truetype');
   }
@font-face {
    font-family: 'UrbanistItalic';
    src: url('Urbanist-Italic.ttf') format('truetype');
   }
@font-face {
    font-family: 'UrbanistMedium';
    src: url('Urbanist-Medium.ttf') format('truetype');
   }
@font-face {
    font-family: 'UrbanistMediumItalic';
    src: url('Urbanist-MediumItalic.ttf') format('truetype');
   }
@font-face {
    font-family: 'UrbanistRegular';
    src: url('Urbanist-Regular.ttf') format('truetype');
   }
@font-face {
    font-family: 'UrbanistSemiBold';
    src: url('Urbanist-SemiBold.ttf') format('truetype');
   }
@font-face {
    font-family: 'PlayfairDisplayItalic';
    src: url('PlayfairDisplay-Italic.ttf') format('truetype');
   }
@font-face {
    font-family: 'PlayfairDisplayMediumItalic';
    src: url('PlayfairDisplay-MediumItalic.ttf') format('truetype');
   }
.gallery-scroll {
 /* gallery right position */
 max-width: 35%;
 height: 82%;
 top: 5%;
 margin: 0 auto;
 padding: 1rem;
 font-family: Ubuntu, sans-serif;
 line-height: 1.4;
 right: 0px;
 display: flex;
 margin: 0;
 padding: 0;
 background-color: trnsparent;
 flex-wrap: wrap;
 align-items: start;
 scroll-behavior: smooth;
 scroll-snap-type: y mandatory;
 overflow-y: scroll;
}
.gallery-item {
 /* scroll event snaps to the center of the element */
 cursor: pointer;
 background-color: #333333;
 color: #d9d9d9;
}
.gallery-img {
 opacity: 0.95;
}
.gallery-img:hover {
 opacity: 1;
}
.mySlides {
 display: none;
}
.slideshow-container {
 /* Slideshow container */
 max-width: cover;
 position: relative;
 margin: auto;
}
.sidenav {
 height: 100%;
 width: 0;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 overflow-x: hidden;
 transition: 0.5s;
 padding-top: 60px;
}
.sidenav a {
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 /*font-size: 25px;*/
 color: #818181;
 display: block;
 transition: 0.3s;
}
.sidenav a:hover {
 color: #f1f1f1;
}
.sidenav .closebtn {
 top: 0;
 right: 15px;
 font-size: 36px;
 margin-left: 50px;
}
.sidenav,
.closebtn,
.cteamh1,
.cteamtxt,
.cteamtxt2,
.cteamtxt3,
.cteamtxtbold,
.gallery-scroll,
.navbtn,
.prologuefam,
.prologue2,
.prologuebgtxt,
.prologuetxt,
.pearlmap,
.pearlopacbox,
.pearlopacbox2,
.pearlopacbox3,
.pearlboat,
.pearlquote,
.pearlmd,
.racialmd,
.h1text,
.h2text,
.h5text,
.h6text,
.h7text,
.h8,
.h9,
.phototext,
.opacbox,
.opacbox2,
.text,
.numbertext,
.manilamaintxt,
.manilamenquote,
.manilamendivers,
.manilamenphotoa,
.manilamenphotoc,
.revomaintxt,
.revotxt1, .revoquote, .revotxtright, .revotxtleft, .revotxt2, .settlersquote, .liaquote, .liacaption, .liamd, .liacaption2, .liacaption3, .courtesycaption, .courtesycaption1, .courtesycaption2, .courtesycaption3, .certificate1, .certificate2, .certcaption1, .certcaption2, .courtesycaption4, .courtesycaption5, .courtesycaption6, .certquote, .racialmaintxt, .profiletxt, .nameholder, .pearldive1quote, .pearldive1md, .pearldive2quote, .pearldive2md, .nameholder2 {
 position: absolute;
}
.nameholder {
    cursor: pointer;
    font-family: UrbanistBold;
    font-size: 2vw;
    text-align: center;
    color: #001b48;
    max-width: 29%;
}
.nameholder2 {
    cursor: pointer;
    font-family: UrbanistBold;
    font-size: 1.8vw;
    text-align: center;
    color: #001b48;
    max-width: 29%;
}
.nameholder:hover {
    color: #018abe;
}
.nameholder2:hover {
    color: #018abe;
}

/* Navigation button */
.navbtn {
 cursor: pointer;
 bottom: 3%;
 padding: 1%;
 width: 30%;
 color: #018abe;
 background-color: white;
 /*
 color: #335f78;
 opacity: 0.6;*/
 text-align: center;
 font-family: UrbanistExtraBold;
 font-size: 1.4vw;
 border-radius: 12px;
}
.navbtn:hover {
 color: #018abe;
 /*opacity: 0.9;*/
}
.prologue2 {
 font-family: UrbanistBold;
 font-size: 1.4vw;
 text-align: center;
 left: 3.8%;
 top: 65%;
 max-width: 15%;
 padding: .5%;
 color: #145587;
 background-color: white;
 opacity: 0.8;
 border-radius: 12px;
}
.prologuebgtxt {
 height: 100%;
 background-color: #bde7f4;
 opacity: 0.9;
}
.prologuefam {
 top: 7%;
 left: 2%;
 max-width: 45%;
}
.prologuetxt {
 top: 15%;
 color: black;
 text-align: center;
 font-size: 1.3vw;
}
.prologuebgtxt, .prologuetxt {
 right: 0;
 width: 48%;
}
.pearlingtxt {
 width: 38%;
 height: 7%;
 position: absolute;
 top: 40%;
 left: 4%;
 text-align: left;
 color: black;
 font-size: 1.3vw;
 font-family: UrbanistMedium;
}
.pearlmap {
 top: 7%;
 left: 4%;
 max-width: 45%;
}
.pearlopacbox {
 background-color: #bde7f4;
 opacity: 0.7;
 border-radius: 12px;
 transition: opacity 0.6s ease;
 color: black;
 top: 36%;
 right: 4%;
 height: 45%;
 max-width: 41%;
 padding: 1%;
 font-size: 1.1vw;
 font-family: UrbanistMedium;
}
.pearlopacbox2 {
 background-color: #bde7f4;
 opacity: 0.7;
 border-radius: 12px;
 transition: opacity 0.6s ease;
 color: black;
 top: 25%;
 right: 4%;
 height: 25%;
 max-width: 41%;
 padding: 1%;
 font-size: 1vw;
 font-family: UrbanistMedium;
}
.pearlopacbox3 {
 background-color: #bde7f4;
 opacity: 0.7;
 border-radius: 12px;
 transition: opacity 0.6s ease;
 color: black;
 top: 53%;
 right: 4%;
 height: 25%;
 max-width: 41%;
 padding: 1%;
 font-size: 0.875em;
 font-family: UrbanistMedium;
}
.pearlboat {
 top: 34%;
 left: 52%;
 max-width: 4%;
}
.pearlquote {
 left: 5%;
 bottom: 16%;
}
.pearlmd, .liamd, .racialmd {
 font-size: 1vw;
 color: black;
 margin: auto;
 padding: auto;
 width: auto;
}
.pearlmd {
 left: 5%;
 bottom: 14%;
}
.liamd {
 left: 64%;
 bottom: 33%;
}
.racialmd {
 right: 25%;
 top: 30%;
}
.pearldive1quote {
 bottom: 10%;
 font-family: PlayfairDisplayMediumItalic;
 font-size: 1.1vw;
 text-align:center;
 color: white;
 width: 70%;
 left: 15%;
}
.pearldive2quote {
 bottom: 9%;
 font-family: PlayfairDisplayMediumItalic;
 font-size: 1.1vw;
 text-align:right;
 color: white;
 width: 70%;
 right: 8%;
}
 .pearldive2md {
   right: 8%;
   bottom: 9.1%;
   font-size: 1vw;
 color: white;
 margin: auto;
 padding: auto;
 width: auto;
 }
 .pearldive1md {
   left: 45%;
   bottom: 10.5%;
   font-size: 1vw;
 color: white;
 margin: auto;
 padding: auto;
 width: auto;
 }

.pearlquote,
.manilamenquote,
.revoquote,
.settlersquote, 
.liaquote, .certquote {
 font-family: PlayfairDisplayMediumItalic;
 font-size: 1vw;
 color: black;
 margin: auto;
 padding: auto;
 width: auto;
}
.revotxtright, .revotxtleft {
 font-family: ArchivoItalic;
 font-size: 1vw;
 color: black;
 margin: auto;
 padding: auto;
 width: auto;
 text-align: left;
}
.settlersquote {
 left: 30%;
 bottom: 12%;
 text-align: center;
}
.certquote {
 left: 28%;
 bottom: 12%;
 text-align: center;
}
.liaquote {
 right: 10%;
 bottom: 35%;
 text-align: center;
}
.liacaption, .liacaption2, .liacaption3{
 text-align: left;
 color: black;
 font-family: OutfitSemiBold;
 font-size: 1.1vw
}
.liacaption {
 left: 10%;
 bottom: 35%;
 max-width: 34%;
}
.liacaption2 {
 left: 10%;
 bottom: 11%;
 max-width: 20%;
}
.liacaption3 {
 right: 10%;
 bottom: 14%;
 max-width: 20%;
}
.courtesycaption, .courtesycaption1, .courtesycaption2, .courtesycaption3, .courtesycaption4, .courtesycaption5, .courtesycaption6, .courtesycaption7{
 text-align: left;
 color: black;
 font-family: ArchivoItalic;
 font-size: 1vw
}
.courtesycaption1 {
 left: 10%;
 bottom: 33%;
 max-width: 20%;
}
.courtesycaption2 {
 left: 10%;
 bottom: 7%;
 max-width: 20%;
}
.courtesycaption3 {
 right: 14.8%;
 bottom: 10%;
 max-width: 20%;
}
.revoquote {
 left: 10%;
 bottom: 40%;
}
.revotxtleft {
 max-width: 35%;
 left: 10%;
 bottom: 10%;
}
.revotxtright {
 right: 8%;
 bottom: 10%;
}
.manilamenquote {
 left: 12%;
 bottom: 23%;
 text-align: center;
}
.certificate1 {
width: 25%; 
top: 20%;
left: 15%;
}
.certificate2 {
width: 25%;
top: 20%;
right: 15%;
}
.certcaption1, .certcaption2 {
 text-align: left;
 color: black;
 font-family: OutfitSemiBold;
 font-size: 1.2vw
}
.certcaption1 {
 left: 41%;
 bottom: 27%;
 max-width: 11%;
}
.certcaption2 {
 right: 41%;
 top: 26%;
 max-width: 11%;
}
.courtesycaption4 {
 left: 41%;
 bottom: 21.5%;
 max-width: 11%;
}
.courtesycaption5 {
 right: 41%;
 top: 37.5%;
 max-width: 11%;
}
.courtesycaption6 {
 left: 3%;
 bottom: 5%;
 max-width: 17%;
}
.courtesycaption7 {
 left: 3%;
 bottom: 5%;
 max-width: 22%;
}
.racialmaintxt {
    top: 23%; right: 22%; max-width: 40%; font-size: 1.1vw;
 color: black;
 height: 65%;
 font-family: UrbanistMedium;
}

/* 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);
}
/* Next & previous buttons */
.prev,
.next {
 cursor: pointer;
 position: absolute;
 top: 80%;
 width: auto;
 padding: 16px;
 margin-top: -22px;
 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 */
.prev {
 left: 0;
 border-radius: 3px 0 0 3px;
}
/* Position the "next button" to the right */
.next {
 right: 0;
 border-radius: 3px 0 0 3px;
}

.h1text, .h2text, .h3text
 {
 color: white;
 margin: auto;
 padding: auto;
 width: auto;
}
.h1text {
 font-family: OutfitBold;
 font-size: 9vw;
}
.h2text {
 font-size: 1.8vw;
}


/* Home title text */
.h4text,
.phototext,
.h1textzoom {
 color: white;
 position: absolute;
 margin: auto;
 padding: auto;
 width: auto;
 border-radius: 3px 0 0 3px;
}
.h1textzoom {
 font-family: OutfitBold;
 font-size: 6.5em;
 position: absolute;
 right: 48%;
}
/*.h1text {
 top: 25%;
 right: 48%;
}
.h2text {
 top: 35.5%;
 right: 47%;
}
.h3text,
.h4text {
 font-size: 1.8vw;
}
.h3text {
 top: 52%;
 right: 51%;
}
.h4text {
 top: 56%;
 right: 57%;
} */
/*.h5text {
 color: #001b48;
 margin: auto;
 padding: auto;
 width: auto;
 border-radius: 3px 0 0 3px;
 font-size: 5vw;
 font-family: UrbanistBold;
}
.h6text {
 color: #145587;
 margin: auto;
 padding: auto;
 width: auto;
 border-radius: 3px 0 0 3px;
 font-size: 2vw;
} */
.h5text, .h6text {
 margin: auto;
 padding: auto;
 width: auto;
 border-radius: 3px 0 0 3px;
}
.h5text {
 color: #001b48;
 font-family: Lena;
}
.h5text {
 font-size: 5vw;
}
.h6text {
 color: #145587;
 font-size: 2vw;
 font-family: UrbanistSemiBold;
}
.h7text, .manilamendivers, .manilamenphotoc, .manilamenquote, .pearlquote, .revoquote, .settlersquote, .liaquote, .certquote {
 color: black;
 font-size: 1vw;
}
.h8, .h9 {
 color: #001b48;
 margin: auto;
 padding: auto;
 width: auto;
 border-radius: 3px 0 0 3px;
 font-family: Lena;
}
.h8 {
 font-size: 3.7vw;
}
.h9 {
 font-size: 4.5vw;
}
/* Opacity textbox */
.opacbox {
 background-color: #bde7f4;
 opacity: 0.7;
 border-radius: 12px;
 transition: opacity 0.6s ease;
}
.opacbox,
.pearlopacbox:hover {
 opacity: 1;
}

.profiletxt {
font-family:UrbanistMedium;
font-family: 1.2vw;
color: #001b48;
left:35%;
height:30%;
max-width:58%;
top:22%
}

.opacbox2 {
 background-color: white;
 opacity: 0.7;
 border-radius: 12px;
}
/* Photo Caption text */
.phototext {
 font-size: 1vw;
 font-style: italic;
 bottom: 5%;
 left: 2%;
}
/* Caption text */
.text {
 color: #f2f2f2;
 font-size: 15px;
 padding: 8px 12px;
 bottom: 8px;
 width: 100%;
 text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
 color: #f2f2f2;
 font-size: 12px;
 padding: 8px 12px;
 top: 0;
}
.manilamaintxt {
 color: black;
 top: 21%;
 left: 5%;
 height: 65%;
 max-width: 45%;
 font-size: 1.2vw;
 font-family: UrbanistMedium;
}

.manilamendivers {
    text-align: right;
    bottom: 2%;
    right: 1%;
}
.manilamenphotoa {
 color: #001b48;
 font-style: italic;
 top: 9%;
 right: 2%;
 font-size: 1.2vw;
 text-align: right;
}
.manilamenphotoc {
    text-align: right; font-style: italic; bottom: 0; right: 1%;
}

.revomaintxt {
    top: 23%; right: 9%; max-width: 40%; font-size: 1.1vw;
    
 color: black;
 height: 65%;
 font-family: UrbanistMedium;
}
.revotxt1, .revotxt2 {
 top: 1%;
 max-width: 15%;
 padding: .5%;
 color: #145587;
 background-color: white;
 opacity: 0.8;
 text-align: center;
 font-weight: bold;
 font-size: 1.4vw;
 border-radius: 18px;
 font-family: UrbanistSemiBold;
}
.revotxt1 {
 right: 36%;
}
.revotxt2 {
 left: 15%;
}
/* 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 {
 animation-name: fade;
 animation-duration: 1.5s;
}
@keyframes fade {
 from {
   opacity: 0.4;
 }
 to {
   opacity: 1;
 }
}
@media screen and (max-width: 700px) {
    .nwest1{
                  font-style: UrbanistBold;
              font-size: 3vw;
              left: 2%;
              top: 55%;
              color: #001a45;
              position: absolute;
            

}
.nwest2{
               font-style: UrbanistBold;
              font-size: 3vw;
              left: 2%;
              top: 58%;
              color: #001a45;
              position: absolute;
   
}

.sululeft{
    left: 19.5%; width: 30%; bottom: 34%;
}
.suluright{
    left: 51%; width: 30%; bottom: 34%;
}
.nwestimg{
    width: 51%;
    height: 36%;
    position: absolute;
    bottom: 15%;
    left: 0;
}
.psouthimg{
    width: 49.8%;
    height: 46%;
    position: absolute;
    bottom: 5%;
    right: 0;
}
.psouth1{
                  font-style: UrbanistBold;
              font-size: 3vw;
              left: 51%;
              top: 55%;
              color: #001a45;
              position: absolute;

}
.psouth2{
              font-style: UrbanistBold;
              font-size: 3vw;
              left: 51%;
              top: 58%;
              color: #001a45;
              position: absolute;
    
}

 .sidenav {
   padding-top: 3%;
   max-width: 35%;
   right: 5%;
   height: 100%;
 }
 .sidenav a {
   font-size: 1.2vw;
 }
 .sidenav .closebtn {
   top: 0;
   right: 15px;
   font-size: 20px;
   margin-left: 50px;
 }
 .gallery-scroll {
   max-width: 35%;
   height: 82%;
   top: 5%;
   margin: 0 auto;
   padding: 1rem;
   line-height: 1.4;
   right: 0px;
   display: flex;
   margin: 0;
   padding: 0;
   flex-wrap: wrap;
   align-items: start;
   scroll-snap-type: y mandatory;
   overflow-y: scroll;
 }
 .gallery-item {
   scroll-snap-align: start;
 }
 .gallery-img {
   max-width: 100%;
 }
 .navbtn {
   width: 30%;
 }
 .phototext {
   bottom: 5%;
   left: 2%;
 }
 .prologuefam {
   width: 47%;
 }
 .prologue2 {
   max-width: 15%;
 }
 .pearlmap {
   max-width: 45%;
 }
 .pearlopacbox {
   height: 45%;
   max-width: 41%;
 }
 .pearlboat {
   max-width: 4%;
   left: 52%;
 }
 .pearlquote {
   left: 5%;
   bottom: 15%;
 }
 .revoquote {
   left: 5%;
   bottom: 15%;
 }
 .pearlmd {
   left: 5%;
   bottom: 13%;
 }
 .liamd {
   left: 70%;
   bottom: 30%;
 }
 .manilamaintxt {
   height: 65%;
   max-width: 45%;
 }
 .manilamenquote {
   left: 12%;
   bottom: 22%;
 }
 .manilamendivers {
    bottom: 5%;
    right: 1%;
}
.manilamenphotoc {
    bottom: 4%;
    right: 1%;
}
 .revotxt1 {
      margin: auto;
 padding: auto;
 max-width: 25%;
 }
 .revotxt2 {
      margin: auto;
 padding: auto;
 max-width: 25%;
 left: 15%;
 }
 .revoquote {
      left: 10%;
 bottom: 40%;
 }
 .revotxtright {
      right:8%;
 bottom: 10%;
 max-width: 35%;
 }
.revotxtleft {
 max-width: 35%;
 left: 10%;
 bottom: 9%;
}
.liaquote {
 right: 10%;
 bottom: 31%;
}
.liamd {
 left: 64%;
 bottom: 29%;
}
.liacaption {
 left: 10%;
 bottom: 35%;
 max-width: 34%;
}
.liacaption2 {
 left: 10%;
 bottom: 11%;
 max-width: 20%;
}
.liacaption3 {
 right: 10%;
 bottom: 14%;
 max-width: 20%;
}
.certificate1 {
width: 25%; 
top: 20%;
left: 15%;
}
.certificate2 {
width: 25%;
top: 20%;
right: 15%;
}
.certcaption1 {
 left: 41%;
 bottom: 27%;
 max-width: 11%;
}
.certcaption2 {
 right: 41%;
 top: 26%;
 max-width: 11%;
}
.courtesycaption4 {
 left: 41%;
 bottom: 21%;
 max-width: 11%;
}
.courtesycaption5 {
 right: 41%;
 top: 35%;
 max-width: 11%;
}
}