/*
 *  Copyright (c)  1999-2022
 *  Cal Holman - All Rights Reserved
 *  calvin@holview.com
 */

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

body {
    font-family: "Open Sans", sans-serif;
    color: #444444;
}

a {
    color: #006fbe;
    text-decoration: none;
}

a:hover {
    color: #008df1;
    text-decoration: none;
}


.details {
    padding: 20px;
    background-color: #252525;
    font-size: 100%;
    line-height: 150%;
}

h2 {
    margin: 0;
    padding: 0;
    font-size: 120%;
}

h3 {
    font-size: 110%;
}

h4 {
    font-size: 90%;
    padding: 2px;
    border: medium;
}

.Welcome {
    font-family: "Comic Sans MS", sans-serif;
    font-size: 14px;
    color: Black;
    font-weight: bold;
                                        } /* For home page text */

.Heading {
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight : bold;
    color : #8B0000;
}


.HeadingSub {
    font-family : Helvetica, Arial, Verdana,  sans-serif;
    font-size: 20px;
    font-weight: normal;
    margin-bottom : 20px;
    text-transform: none;
}


.Content {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    font-weight: bold;
    font-style: normal;
    text-align: left;
} /* For all text */

.SmallText{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000000;
}  /* Used on the guest book page */


.FormErrorText{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: red;
}  /* Used on the guest book page */


.navbar-light .navbar-nav .nav-link.active {
    color: #444444;
    font-weight: bold;
}

.nav-link {
    color: #006fbe;
    width: 100%;
    height: 100%;
    text-transform: uppercase;
}

 /*Code to change color of active link
 .navbar-nav a.active {
                color: red;
                font-weight: bold
 }  */

.nav-brand {
    color: #006fbe;
}


.my-logo {
    font-size: 28px;
    margin: 0;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: #fff;
    transition: all 0.5s;
    z-index: 997;
    padding-top: 15px;
    padding-right: 0;
    padding-left: 15px;
    padding-bottom: 15px;
}

.my-logo a {
    color: #006fbe;
}


.copyright {
    margin-top:15px;
    text-align:center;
    font-size:13px;
    color:#aaa;
    margin-bottom:0;
}



/* Used on Adventures pages - Madagascar  */

.figurestyle {
    width: 167px;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 0;
    margin-right: 0;
    display: inline-block;
}
.figcaptionstyle {
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}


/* adventure image styles  */

figure.PortraitItem {
    width:65%;
    max-width: 1000px;
    margin: auto auto 10px;
    text-align: center;
    /*border: 1px solid red;*/
}

.PortraitCaption {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    font-weight: bold;
    font-style: normal;
    text-align: left;
    width: 86%;
    display: inline-block;
    margin-left: 6%;
    margin-bottom: 20px;
} /* For all text */

.NextPrev {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: red;
}

/* styles to modify next/prev text */
.lg-view{
    display:inline-block;
}

.md-view{
    display:none;
}

.sm-view{
    display:none;
}

@media screen and (min-width: 100px) {
    .lg-view{
        display:none;
    }
    .md-view{
        display:none;
    }

    .sm-view{
        display:inline-block;
    }
}

@media screen and (min-width: 300px) {
    .lg-view{
        display:none;
    }
    .md-view{
        display:inline-block;
        text-align:right;
    }

    .sm-view{
        display:none;
    }
}

@media screen and (min-width: 700px) {
    .lg-view{
        display:inline-block;
    }
    .md-view{
        display:none;
    }

    .sm-view{
        display:none;
    }
}
/* end adventure img styles */


/* For adventures formatting home page */
table.itinerary {
    border: 4px solid #000;
    margin-left:auto;
    margin-right:auto;
    width: auto;
    border-collapse: collapse;
}

table.itinerary th {
    text-align:center;
    border: 1px solid black ;
}

table.itinerary td {
    border: 1px solid black ;
}

table.itinerary tr td:first-child {
    width: 8%;
    text-align:center
}
table.itinerary tr td:nth-child(2) {
    width: 30%;
}
table.itinerary tr td:last-child {
    width: 62%;
}

.table-xs td,
.table-xs th {
    padding: 0.1rem !important; /* Even smaller padding than table-sm */
    line-height: 1 !important;
    font-size: 0.85rem !important; /* Smaller font */
}

/* Optional: reduce vertical height further */
.table-xs tr {
    height: auto !important;
    min-height: 0 !important;
}


/* Used on top of Adventures pages  */

.IndexTable {
    border-collapse: separate;
    border-spacing: 20px 0;
    margin-bottom: 20px;
    width: 100%;
}

.Index {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #000000;
    background : #DCDCDC;
}

.JournalContent {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #9400d3;
    font-weight: bold;
    font-style: italic;
    text-align: left;
    vertical-align: top;
} /* For all text */


table.adventure_index {

    border-width: 1px;
    border-spacing: 2px;
    border-style: solid;
    border-color: gray;
    background-color: #DCDCDC;
    margin-left:0;
    margin-right:auto;

}
table.adventure_index th {
    border-width: 1px;
    padding: 2px;
    border-style: solid;
    border-color: gray;
    text-align: left;
}
table.adventure_index td {
    border-width: 1px;
    padding: 2px;
    border-style: solid;
    border-color: gray;
}

.adventurebox {
    margin: 0 5px 5px 0;
}

/* for adventure box page */
/* Center the boxes within the row */
.adventure-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* Adds space between boxes */
}

.mybox {
    position: relative;
    display: inline-block; /* Make the width of box same as image */

}

.mybox .a .img {
    transition: all 0.2s ease;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
}

.mybox .text {
    position: absolute;
    z-index: 999;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 5%; /* Adjust this value to move the positioned div up and down */
    text-align: center;
    width: 80%; /* Set the width of the positioned div */
    transition: all 0.4s ease;
    color: yellow;
    opacity: .75;
}
.year {
    position: absolute;
    top: 2px; /* Adjust this value to control distance from bottom */
    right: 8px; /* Adjust this value to control distance from right */
    color: black; /* Optional: text color */
    font-size: 0.7rem; /* Optional: adjust font size */
    font-weight: bold;
    opacity: 1;
    background-color: rgba(255, 255, 255, 1); /* Black with 70% opacity */
}


/* end browse pictures classes */

/* adventure menu shorten/lengthen */

.adventure-menu
{
    max-width: 2000px;
}

@media (max-width: 480px) {
    .adventure-menu {
        max-width: 170px;
    }
}

/* adventure video css */

.video-responsive {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    text-align: left;
}

.video-responsive video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}


.video-play-button {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s;
    pointer-events: auto;
}

.video-play-button:hover {
    opacity: 0.8;
}

.video-responsive.playing .video-play-button {
    display: none;
}

/* Landscape videos (wider than tall) */
.video-responsive[data-orientation="landscape"] video {
    max-width: 100%;
    max-height: 80vh;
}
/* More specific positioning for different orientations */
.video-responsive[data-orientation="landscape"] .video-play-button {
    top: 35%; /* Slightly higher for landscape videos */
}


/* Portrait videos - FIX THE CENTERING */
.video-responsive[data-orientation="portrait"] {
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.video-responsive[data-orientation="portrait"] video {
    max-height: 70vh;
    width: 100%;
}

/* Portrait video play button positioning fix */
.video-responsive[data-orientation="portrait"] .video-play-button {
    /* Position relative to the video element, not the container */
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Caption alignment for portrait videos */
.video-responsive[data-orientation="portrait"] .video-caption {
    width: 100%; /* Match the video width */
    margin: 10px auto;
    text-align: left; /* Match your image caption alignment */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    font-weight: bold;
}

/* Square videos */
.video-responsive[data-orientation="square"] {
    max-width: 500px;
    margin: 0 auto;
}

.video-responsive[data-orientation="square"] video {
    max-height: 500px;
}

/* General caption styling */
.video-caption {
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Mobile-specific fixes for play button positioning */
@media (max-width: 768px) {
    .video-responsive[data-orientation="portrait"] .video-play-button {
        top: 40%; /* Adjust for portrait on mobile */
    }

    .video-responsive[data-orientation="landscape"] video {
        max-height: 60vh;
    }

    .video-responsive[data-orientation="portrait"] {
        max-width: 300px;
    }

    .video-responsive[data-orientation="portrait"] video {
        max-height: 50vh;
    }

    .video-responsive[data-orientation="square"] {
        max-width: 350px;
    }

    .video-responsive[data-orientation="square"] video {
        max-height: 350px;
    }

    /* Ensure play button is properly centered on mobile */
    .video-play-button {
        width: 50px;
        height: 50px;
        top: 42%; /* Move even higher on mobile */
    }

    .video-play-button svg {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .video-responsive[data-orientation="portrait"] {
        max-width: 250px;
    }

    .video-responsive[data-orientation="portrait"] video {
        max-height: 40vh;
    }

    .video-responsive[data-orientation="square"] {
        max-width: 280px;
    }

    .video-responsive[data-orientation="square"] video {
        max-height: 280px;
    }

    /* Smaller play button for very small screens */
    .video-play-button {
        width: 40px;
        height: 40px;
        top: 35%; /* Move higher on very small screens */
    }
    .video-responsive[data-orientation="portrait"] .video-play-button {
        top: 40%; /* Adjust for portrait on very small screens */
    }

    .video-play-button svg {
        width: 40px;
        height: 40px;
    }
}



/* end - Used on top of Adventures pages  */

/* used on gallery pages */


.mytable {
    display: table;
    width: 100%; /* or any desired width */
    border-collapse: collapse; /* Optional: removes extra space between cells */
}

.myrow {
    display: table-row;
}

.mycell {
    display: table-cell;
    padding: 0;
    border: 1px solid #ddd;
}

/* end used on gallery pages */







/**
 * Image Orientation Styles
 * CSS styles for different image orientations
 */

/* Base styles for all images */
.item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}

/* Portrait Images */
.portrait-image {
    max-width: 100%;
    margin: 0 auto 2rem auto;

    display: block;
    text-align: left;
}

.portrait-image img {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;

}

.portrait-image .caption {
    display: block;
    margin: 0.75rem auto 0 auto;
    padding: 0.5rem 0;
    text-align: left;
    line-height: 1.5;
}

/* Landscape Images */
.landscape-image {
    max-width: 100%;
    margin: 0 0 2rem 0;

    display: block;
    text-align: left;
}

.landscape-image img {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}

.landscape-image .caption {
    display: block;
    margin: 0.75rem auto 0 auto;
    padding: 0.5rem 0;
    text-align: left;
    line-height: 1.5;

}

/* Square Images */
.square-image {
    max-width: 500px;
    margin: 0 auto 2rem auto;
}

.square-image img {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
}

.square-image .caption {
    text-align: left;
    margin-top: 1rem;
    padding: 0 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .portrait-image,
    .square-image {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .portrait-image .caption,
    .square-image .caption {
        text-align: left;
        padding: 0;
    }

    .landscape-image .caption {
        padding: 0;
    }
}

@media (max-width: 480px) {
    .portrait-image img,
    .landscape-image img,
    .square-image img {
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
}

/* Special styling based on data attributes */
[data-orientation="portrait"] {
    /* Additional portrait-specific styles */
}

[data-orientation="landscape"] {
    /* Additional landscape-specific styles */
}

[data-orientation="square"] {
    /* Additional square-specific styles */
}

/* Aspect ratio specific styles */
[data-aspect-ratio^="0."] {
    /* Very tall portrait images */
}

[data-aspect-ratio^="1."] {
    /* Nearly square or slightly wide images */
}

[data-aspect-ratio^="2."],
[data-aspect-ratio^="3."] {
    /* Very wide landscape images */
}

/* Grid layout for mixed orientations */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.image-grid .portrait-image {
    grid-row: span 2; /* Portrait images take more vertical space */
}

.image-grid .landscape-image {
    grid-column: span 2; /* Landscape images take more horizontal space */
}

@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: 1fr;
    }

    .image-grid .portrait-image,
    .image-grid .landscape-image {
        grid-row: span 1;
        grid-column: span 1;
    }
}

/* Loading state */
.item.loading img {
    opacity: 0.5;
    filter: blur(2px);
}

.item.loaded img {
    opacity: 1;
    filter: none;
}

/* Error state */
.item.error img {
    opacity: 0.3;
    filter: grayscale(100%);
}

/* Utility classes */
.center-image {
    display: flex;
    justify-content: center;
    align-items: center;
}