/*---------------Landing ---------------------*/

.LandingContainer{height: 100vh;}


.HomeLogo{
    position: relative;
    width: 80%;
    aspect-ratio: 1 / 1;
}

.LandingLogo{
    position: relative;
    top: 25%;
    text-align: center;
}

.WelcomeText{
    position: absolute;
    width: 100%;
    left: 0px;
    font-size: 2rem;
}

.OrderNow{
    top: 2.5rem;
    position: relative;
}

.landingBGImage{
    object-fit: contain;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-image: url("../images/Index/bg.jpg");
    background-repeat: repeat;
    height: 100%;
    width: 100vw;
    z-index: -100;
    opacity: 4%;
    overflow: hidden;
}

/*---------------- About Me ---------------------*/

.aboutMe{
    text-align: center;
    overflow: hidden;
}

.aboutMeHeader{
    font-size: 2rem;
    width: 100%
}

.aboutMeContainer{
    width: 100%;
    display: inline-block;
    position: relative;
}

.aboutMeImageContainer{width: 100%;}

.aboutMeImage{width: 90%;}

.aboutMePragraph{
    font-size: 1.25rem;
    position: relative;
    color: black !important;
}


.aboutMeBGImage{
    overflow: hidden;
    height: 100%;
    max-width: 105vw;
    aspect-ratio: 4480 / 6720;
    position: absolute;
    top: 0px;
    object-fit: cover;
    object-position: center;
    background-image: url("../images/Index/aboutMeBGP.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -100;
    margin: 0px;
    padding: 0px;
    left: 0px;
    filter: blur(5px);
}

/*------------------- Gallery ------------------------*/

a{color: black !important;}

.galleryContainer{
    position: relative;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.galleryHeader{
    text-align: center;
    font-size: 2rem;
    width: 100%
}

.carousel-list{
    background-color: #D3BBDD;
    width: 100%;
    font-size: 1.5rem;
}

.carousel-button.active{
    scale: 1.3;
    color: #ECE3F0 !important;
    cursor: pointer;
} 

.carouselSlide{
    height: 100%;
    position: relative;
    width: 100%;
}

.carousel-inner{
    height: 100%;
    position: relative;
}

.carousel-gallery{
    height: 100%;
    position: relative;  
    background-color: white;
    width: 100%;
}

.carouselGallery{
    object-fit: cover;
    min-width: 100%;
    width: 100%;
    height: 40vh;
    margin-bottom: 0px !important;
}

.Gallery{
    position: relative;
    /*height: 100%;*/
    /*min-width: 100%;*/
    display: inline-flex;
    flex-direction: row; 
    padding-right: 0px !important;
}

.rightPics{
    margin-right: 0px !important;
    padding-right: 0px !important;
}

.galleryDoubleInCol{
    width: 50%;
    display: inline-flex;
}

/*------- Kids Gallery ----------*/

.KidsCakesGallery4{object-position: 50% 100%;}

.KidsCakesGallery7{object-position: 50% 30%;}

.KidsCakesGallery9{object-position: 50% 100%;}

/*----------Cakes--------------*/
.CakesGallery1{object-position: 0% 50%;}

.CakesGallery2{
    object-position: 50% 60%;
    max-width: 100%;
}

.CakesGallery3{
    object-position: 50% 40%;
    padding-right: 0px !important;
    margin-right: 0px !important;
    /*width: 100%;*/
    /*right: 0px;*/
}

.CakesGallery5 {object-position: 50% 70%}

.CakesGallery6{
	height: 50%;
	object-position: 50% 50%;
}

.CakesGallery7{
    object-position: 100% 50%;
    height: 50%;
}
/*---------Cupcakes------------*/
.CupcakesGallery1{object-position: 50% 80%;}

.CupcakesGallery2{object-position: 50% 30%;}

.CupcakesGallery3{object-position: 50% 80%;}

.CupcakesGallery4{object-position: 50% 80%;}

.CupcakesGallery5{object-position: 50% 100%;}
/*--------Cakepops--------*/
.CakepopsGallery3{object-position: 0% 50%;}

.CakepopsGallery4{object-position: 50% 40%;}

.CakepopsGallery7{object-position: 50% 30%;}

/*-------------------Testimonials-----------------------*/

.testimonialContainer.carousel-item{
    transition: none;
    transform: none;
}

.Testimonials{
    position: relative;
    height: 95vh;
    /*width: 100vw;*/
    left: 0px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

.testimonialContainer{
    height: 75vh;
    display: inline-flex;
    position: relative; 
    /*opacity: 60%;*/
}

.testimonialContainer.active{
    height: 80vh;
    display: inline-flex;
    position: relative; 
    opacity: 100%;
}

.testimonialContainer.order-3{
    height: 80vh;
    display: inline-flex;
    position: relative; 
    opacity: 100%;
}

.testimonialContainer.order-1{
    height: 70vh;
    right: -3vw;
    z-index: -2;
    opacity: 50%;
}

.testimonialContainer.order-2{
    height: 75vh;
    right: -1.5vw;
    z-index: -1;
    opacity: 60%;
}

.testimonialContainer.order-4{
    height: 75vh;
    left: -1.5vw;
    z-index: -1;
    opacity: 60%;
}

.testimonialContainer.order-5{
    height: 70vh;
    left: -3vw;
    z-index: -2;
    opacity: 50%;
}

.card{width: 30rem;}

.card-img{max-height:30vh;}


.card-footer{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.card-text{
    font-size: 1.5rem;
    flex-basis: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.testimonialsPhotoContainer{
    text-align: center;
    position: relative;
}

.testimonialsParagraph{
    font-size: 2rem;
    text-align: center;
    position: relative;
}

.carousel-testimonial{
    height: 100vh;
    position: relative; 
    display: flex;
    align-items: center; 
    justify-content: center;
    /*background-color: black;*/
    width: 100%;
}

.testimonialsBG{
    /*aspect-ratio: 4480 / 6720;*/
    min-height: 100%;
    min-width: 100vw;
    position: absolute;
    object-fit: cover;
    object-position: center;
    background-size: 200vw 250vh;
    background-repeat: no-repeat;
    background-position: 50% 40%;
    margin: 0px;
    padding: 0px;
    left: 0px;
    filter: blur(10px);
    z-index: -10;
    /*opacity: 100%;*/
}

.testBGLoad{z-index: -11}

.testimonialsPhoto{
    object-fit: cover;
    height: 100%;
    width: 100%;
    /*z-index: 1;*/
}
/*
.rating{
    appearance: none;
    color: transparent;
    background: transparent;
    width: 100%;
    flex-basis: 15%;
    overflow: hidden;
}

.rating::before{
    display:block;
    --percent: calc(var(--UpdateRating)/5*100%);
    content:"\2605\2605\2605\2605\2605";
    background: linear-gradient(90deg, gold var(--percent), rgba(0,0,0,0.2) var(--percent));
    color: rgba(0,0,0,0.2);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2rem;
    align-items: center; 
    justify-content: center;
    top: 0px;
}*/

.rating{
    position: relative;
    flex-basis: 20%;
    height:100%;
    color: rgba(0, 0, 0, 0.2);
    font-size: 2rem;
}

.rating::before{
    content: "\2605\2605\2605\2605\2605";
    background: linear-gradient(90deg, gold var(--percent), rgba(0, 0, 0, 0.2) var(--percent));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    font-size: 2rem;
}


.testimonialUserImageContainer{
    height: 12vh;
    aspect-ratio: 1/1;
}

.testimonialUserImage{
    height: 100%;
    width: 100%;
}



@keyframes right{
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(92.5%);
    }
}

@keyframes left{
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-92.5%);
    }
}

@keyframes leftEdge{
    0%{
        transform: translateX(0%);
        opacity: 50%;
    }
    50%{
        transform: translateX(-60%);
        opacity: 0%;
    }
    50.01%{
        transform: translateX(450%);
        opacity: 0%;
    }
    100%{
        transform: translateX(378%);
        opacity: 50%;
    }
}

@keyframes rightEdge{
    0%{
        transform: translateX(0%);
        opacity: 50%;
    }
    50%{
        transform: translateX(60%);
        opacity: 0%;
    }
    50.01%{
        transform: translateX(-450%);
        opacity: 0%;
    }
    100%{
        transform: translateX(-378%);
        opacity: 50%;
    }
}

@keyframes grow1{
    0%{
        height: 75vh;
        opacity: 60%;
        z-index: -1;
    }
    100%{
        height: 80vh;
        opacity: 100%;
        z-index: 1;
    }
}

@keyframes grow2{
    0%{
        height: 70vh;
        opacity: 50%;
    }
    100%{
        height: 75vh;
        opacity: 60%;
    }
}

@keyframes shrink1{
    0%{
        height: 80vh;
        opacity: 100%;
    }
    100%{
        height: 75vh;
        opacity: 60%;
    } 
}

@keyframes shrink2{
    0%{
        height: 75vh;
        opacity: 60%;
    }
    100%{
        height: 70vh;
        opacity: 50%;
    } 
}

@keyframes fade-in{
    0%{
        z-index: -11;
        opacity: 0%;
    }
    100%{
        z-index: -10;
        opacity: 100%;
    }
}

@-webkit-keyframes right{
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(92.5%);
    }
}

@-webkit-keyframes left{
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-92.5%);
    }
}

@-webkit-keyframes leftEdge{
    0%{
        transform: translateX(0%);
        opacity: 50%;
    }
    50%{
        transform: translateX(-60%);
        opacity: 0%;
    }
    50.01%{
        transform: translateX(450%);
        opacity: 0%;
    }
    100%{
        transform: translateX(378%);
        opacity: 50%;
    }
}

@-webkit-keyframes rightEdge{
    0%{
        transform: translateX(0%);
        opacity: 50%;
    }
    50%{
        transform: translateX(60%);
        opacity: 0%;
    }
    50.01%{
        transform: translateX(-450%);
        opacity: 0%;
    }
    100%{
        transform: translateX(-378%);
        opacity: 50%;
    }
}

@-webkit-keyframes grow1{
    0%{
        height: 75vh;
        opacity: 60%;
        z-index: -1;
    }
    100%{
        height: 80vh;
        opacity: 100%;
        z-index: 1;
    }
}

@-webkit-keyframes grow2{
    0%{
        height: 70vh;
        opacity: 50%;
    }
    100%{
        height: 75vh;
        opacity: 60%;
    }
}

@-webkit-keyframes shrink1{
    0%{
        height: 80vh;
        opacity: 100%;
    }
    100%{
        height: 75vh;
        opacity: 60%;
    } 
}

@-webkit-keyframes shrink2{
    0%{
        height: 75vh;
        opacity: 60%;
    }
    100%{
        height: 70vh;
        opacity: 50%;
    } 
}

@-webkit-keyframes fade-in{
    0%{
        z-index: -11;
        opacity: 0%;
    }
    100%{
        z-index: -10;
        opacity: 100%;
    }
}

/*----------------------------------------------------------*/
/*--------------------Mobile Landscape----------------------*/
/*----------------------------------------------------------*/
@media screen and (orientation:landscape)
and (max-width: 935px){
    .LandingLogo{text-align: unset;}

    .HomeLogo{
        max-width: 25%;
        left: 10%;
    }

    .WelcomeText{font-size: 2rem !important;}

    /*.Gallery{max-width: 100%;}*/

    .carouselGallery{height: 90vh !important;}

    .galleryDoubleInCol{width: 100%;}

    .Testimonials{
        position: relative;
        height: 95vh;
        width: 100%;
        left: 0px;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    
    .testimonialContainer{height: 85vh;}
    
    .testimonialContainer.active{height: 90vh;}
    
    .testimonialContainer.order-3{height: 90vh;}
    
    .testimonialContainer.order-1{height: 80vh;}
    
    .testimonialContainer.order-2{height: 85vh;}
    
    .testimonialContainer.order-4{height: 85vh;}
    
    .testimonialContainer.order-5{height: 80vh;}

    .card-text{font-size: 1rem;}

    @keyframes grow1{
        0%{
            height: 85vh;
            opacity: 60%;
            z-index: -1;
        }
        100%{
            height: 90vh;
            opacity: 100%;
            z-index: 1;
        }
    }
    
    @keyframes grow2{
        0%{
            height: 80vh;
            opacity: 50%;
        }
        100%{
            height: 85vh;
            opacity: 60%;
        }
    }
    
    @keyframes shrink1{
        0%{
            height: 90vh;
            opacity: 100%;
        }
        100%{
            height: 85vh;
            opacity: 60%;
        } 
    }
    
    @keyframes shrink2{
        0%{
            height: 85vh;
            opacity: 60%;
        }
        100%{
            height: 80vh;
            opacity: 50%;
        } 
    }

    @-webkit-keyframes grow1{
        0%{
            height: 85vh;
            opacity: 60%;
            z-index: -1;
        }
        100%{
            height: 90vh;
            opacity: 100%;
            z-index: 1;
        }
    }

    @-webkit-keyframes grow2{
        0%{
            height: 80vh;
            opacity: 50%;
        }
        100%{
            height: 85vh;
            opacity: 60%;
        }
    }

    @-webkit-keyframes shrink1{
        0%{
            height: 90vh;
            opacity: 100%;
        }
        100%{
            height: 85vh;
            opacity: 60%;
        } 
    }

    @-webkit-keyframes shrink2{
        0%{
            height: 85vh;
            opacity: 60%;
        }
        100%{
            height: 80vh;
            opacity: 50%;
        } 
    }

}

/*----------------------------------------------------------*/
/*--------------------Ipads/Tablets-------------------------*/
/*----------------------------------------------------------*/
@media screen and (min-width: 545px) and (max-width: 991px){

/*    .Gallery{

    }*/

    .KidsCakesGallery8{max-width: 49%;}

    .CakesGallery2{max-width: 49%;}

    .CakesGallery3{min-width: 100%;}

    .CakesGallery8{max-width: 50%;}

    .CakepopsGallery6{max-width: 50%;}

    .card-text{font-size: 1.5rem;}

    .testimonialsBG{
        min-height: 100%;
        min-width: 100vw;
        background-position: 0% 40%;
        background-size: 200% 250vh;
    }
}

/*----------------------------------------------------------*/
/*--------------------DESKTOP-------------------------------*/
/*----------------------------------------------------------*/
/*@media only screen and (min-width: 576px){*/
/*992*/
@media only screen and (min-width: 992px){
    .carousel-button:hover{
        scale: 1.3;
        color: #ECE3F0 !important;
        cursor: pointer;
    }  

  /* desktop height % */
  .d-h10{height: 10% !important;}

  .d-h20{height: 20% !important;}
  
  .d-h30{height: 30% !important;}
  
  .d-h40{height: 40% !important;}
  
  .d-h50{height: 50% !important;}
  
  .d-h60{height: 60% !important;}
  
  .d-h70{height: 70% !important;}
  
  .d-h80{height: 80% !important;}
  
  .d-h90{height: 90% !important;}
  
  .d-h100{height: 100% !important;}


    /*-------------Gallery------------------*/

    .galleryHeader{font-size: 4rem;}
    

    .Gallery{
        position: relative;
        height: 100%;
        min-width: unset;
        display: block;
        overflow: hidden;
    }

    .galleryContainer{
        height: 100vh;
        overflow: hidden;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .carousel-gallery{
        display: inline-flex;
        height: 90vh;
    }

    .galleryDoubleInCol{
        max-width: 50%;
        height: 100%;
    }

    .CakesGallery2{
        position: relative;
        display: inline;
        max-width: 120%;
        /*padding-right: 8px !important;*/
    }
    .CakesGallery3{
        position: relative;
        display: inline;
        /*min-width: 101%;*/
        /*padding-left: 8px !important;*/
    }

    .CakesGallery6{
        height: 40%;
        max-width: 100%;
    }

    .KidsCakesGallery2{object-position: 50% 0%; object-fit: cover;}

    .KidsCakesGallery4{object-position: 50% 0%; /*object-fit: contain;*/}

    .KidsCakesGallery5{height: 100% !important;}

    .KidsCakesGallery9{object-position: 50% 0%; /*object-fit: contain;*/}

    .CakesGallery7{height: 60%;}

    .KidsCakesGallery8{max-width: unset;}

    .CakesGallery8{max-width: unset;}

    .card-text{font-size: 1.5rem;}

    .testimonialsBG{background-size: 100vw 250vh;}

}

@media only screen and (min-width: 768px){

    /*---------------Landing ---------------------*/

    .LandingLogo{
        text-align: unset;
        left: 5%;
    }

    .HomeLogo{
        max-width: 25%;
        left: 10%;
    }

    .OrderNow{
        position: relative;
        font-size: 1.5rem;
        left: 15%;
        width: 15%;
        top: unset;
    }

    .WelcomeText{
        position: relative;
        width:  50vw;
        text-align: center;
        left: 0px;
        font-size: 4.75rem;
    }

/*---------------- About Me ---------------------*/

    .aboutMeBGImage{
        min-height: 100%;
        background-image: url("../images/Index/aboutMeBG.jpg");
        aspect-ratio: 6780 / 4480;
        width: 105%
    }

    .aboutMeHeader{
        font-size: 5rem;
    }

    .aboutMeContainer{
        width: 100%;
        display: inline-flex;
    }

    .aboutMePragraph{
        position: relative;
        font-size: 2rem;
        justify-content: center;
        align-items: center;
        margin: auto 50px auto 50px;
        padding: auto 50px auto 50px;
        left: 0px;
        display: flex;
    }

    .aboutMeImage{width: 30vw;}

    .card-text{font-size: 1.5rem;}

    .testimonialsBG{background-size: 100vw 250vh;}
}

@media only screen and (max-height: 690px) {
	.card-text{
		font-size: 1.2rem;
	}
}