#bgimg
{
    opacity: 10%;
}

#pic
{
    background: none;
    height: 500px;
    border: none;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
    position: relative;
    margin: 0.5rem;
}

#pic img
{
    position: absolute;
    backface-visibility: hidden;
    transition: 1s;
    height: 500px;
    width: 300px ;
    object-fit: cover;
}

#pic img:nth-child(2)
{
    transform: rotateY(180deg);
}

#pic:hover img:nth-child(2)
{
    transform: rotateY(0deg);
}
#pic:hover img:nth-child(1)
{
    transform:rotateY(-180deg);
}

.carousel-item img
{
    height: 700px;
    width: 1300px;
    object-fit: scale-down;
}

gmp-map {
    height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#footer{
    transition: 0.5s;
}

#footer:hover {
    color:white;
}

@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}