﻿body {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(241,244,252,1) 55%, rgba(241,244,252,1) 100%);
}
main{
    background-color:#fff;
}
header{
    background-color:#fff;
    margin:0;
}
.cruise-gallery {
    padding:0 1rem;
    /*overflow-y: scroll;*/
    max-height: 375px;
}
#cruise-side-nav.sticky-top {
    top: 1rem !important;
}

.cruise-summary img {
    max-width: 100%;
    height:auto;
    margin: auto;
}

#cruise-gallery-carousel {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: rgb(238,231,211);
}

    #cruise-gallery-carousel .carousel-inner {
        background: radial-gradient(circle, rgba(238,231,211,1) 0%, rgba(223,207,169,1) 100%);
        aspect-ratio: 16 / 9;
    }

.carousel-item.active{
    display:block;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    height: 62px;
    width: 62px;
    outline: black;
    background-size: 100%, 100%;
    border-radius: 3%;
    border: 0px solid black;
    background-color: #333;
}

/*    .carousel-control-next-icon:after {
        content: '>';
        font-size: 36px;
        font-weight: bolder;
        color: white;
    }

.carousel-control-prev-icon:after {
    content: '<';
    font-size: 36px;
    font-weight: bolder;
    color: white;
}*/

#cruise-side-nav .list-group-item {
    background-color: var(--twine-300);
    color: #333;
    border: solid 1px var(--twine-200);
}

    .carousel-item img{
        width:auto;
        height:auto;
    }

#cruise-side-nav .list-group-item.active {
    background-color: var(--twine-200);
    color: #333;
    border: solid 1px var(--twine-200);
}
    
    #cruise-side-nav .list-group-item:hover {
        background-color: var(--twine-100);
        color: #333;
        border: solid 1px var(--twine-200);
    }

.mobile-cruise-card {
    max-width: 80vw;
    margin: auto;
    margin-top: -2rem;
}

    .mobile-cruise-card .card {
        border: none;
        /*box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;*/
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
        font-size: 120%;
    }

#cruise-ship .card-header {
    text-align: center;
    padding: 0.25rem;
}
#ship-tabs li:first-child {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--midnight-blue-800);
}

#ship-tabs .img-thumbnail {
    height: auto;
}

#cruise-itinerary nav {
    margin: 0 !important;
    padding: 0 !important;
}

#cruise-includes h2{
    padding-left: 0.5rem;
}

#ship-tabcontent img {
    height: auto;
}

@media (min-width: 768px) {
    #cruise-gallery-carousel {
        /*height:500px;*/
        aspect-ratio: 16 / 9;
    }
}