/* Override css (override anything including bootstrap as this file is last in  */
/* . the css chain.   It's also a good place to test as sometimes tests are     */
/* . masked by bootstrap itself.  Be very careful with this file.               */


/*
This is here only to stop "Contact Us" from wrapping on screen collapse.
*/
.nav-link {
    text-wrap: nowrap;
}

/* Experimentation */
#test-cardx {
    background-image: linear-gradient(to right, red, lightgrey);
}

/* Activating height causes the image to overflow the card */
/* So need to hide overflow */
.card-xx {
    height: 25rem;
    /* width: 65%; */
    overflow: hidden;
 }

.cream-bg {
    background-color: #f3eae3;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (max-width: 767px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
    
    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(10%);
        /* transform: translateY(10%); */
    }
    
    .carousel-inner .carousel-item-start.active, 
    .carousel-inner .carousel-item-prev {
        transform: translateX(-10%);
        /* transform: translateY(-10%); */
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
  transform: translateX(30svw);
}


/* div.card {
    padding: 0 5px;
    border: unset;
} */

#recipeCarousel {
    border: solid;
}


.carousel-item {
    height: 32rem;
    width: 72%;
}


.carousel-item.active > div:nth-child(2) > div.card {
    transform: scale(1.1);
    z-index: 1;
}

.carousel-inner {
    overflow: visible !important;
    padding-top: 4rem;
}

.carousel-item.active {
    transform: scale(1.0);
    transform: translateX(19%);
    transition-duration: 0ms;
    /* overflow: visible !important; */
    z-index: 1;

}

#carousel-container-xx {
    position: relative;
    top: 0;
    left: 0;
}

#carousel-xx {
    position: relative;
    top: 0;
    left: 0;
}

#fake-carousel-item-xx,
#fake-text-xx {
    visibility: hidden;
}

#carousel-title-xx {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

#carousel-yy {
    overflow: hidden;
}

/* .carousel-control-prev.bg-transparent.w-aut,
.carousel-control-next.bg-transparent.w-aut {
    background: white!important;
    opacity: 1;
} */

.card-text-xx {
    /* visibility: visible; */
    overflow: auto;
    overflow-x: hidden;
    height: 16rem;
    /* height: 25rem; */
}

/* Had to pull this class into this css file because it's the last css file in
the list.  Without it (e.g., in svg.css, had to include '!important' */
.card-img {
    width: 100%;
    /* If height 100%, times when gaps appear below image (and inside card) */
    height: 110%;
    object-fit: cover;
    /* inherit here worked better than 'rounded-start' bs5 class */
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

/* The use of rgba allows specification of the alpha channel.  Without */
/* . the alpha channel, cannot change opacity of the background without */
/* . affecting the foreground.  Weird, I know.  */
/* Experimentation */
#card-div-xx {
    background-image: linear-gradient(to right,rgba(255,238,0,.9) 50%,rgba(0,0, 0, .6) 51% 70%, rgba(0,0, 0, 1) 90% 100%);
}

/* Experimentation */
.card-body-yy {
    background-image: linear-gradient(45deg, var(--bs-xigxog-yellow) 25%,purple 65%, aqua);
    opacity: 1;
}