.container {
    position: relative;
    width: 100%;
}





#element {
    -webkit-animation: smooth 1s ease-in;
    -moz-animation: smooth 1s ease-in;
    -o-animation: smooth 1s ease-in;
    -ms-animation: smooth 1s ease-in;
    animation: smooth 1s ease-in;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-delay: 0s;
}

#element1 {
    -webkit-animation: smooth 1s ease-in;
    -moz-animation: smooth 1s ease-in;
    -o-animation: smooth 1s ease-in;
    -ms-animation: smooth 1s ease-in;
    opacity: 0;
    animation: smooth 1s ease-in;
    animation-fill-mode: forwards;
    animation-delay: 0.2s;
}

#element2 {
    -webkit-animation: smooth 1s ease-in;
    -moz-animation: smooth 1s ease-in;
    -o-animation: smooth 1s ease-in;
    -ms-animation: smooth 1s ease-in;
    animation: smooth 1s ease-in;
    opacity: 0;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
}

@keyframes smooth {
    0% {
        opacity: 0.0;
    }



    100% {
        opacity: 0.9;
    }
}

@-webkit-keyframes smooth {
    0% {
        opacity: 0.0;
    }



    100% {
        opacity: 0.9;
    }
}


#blur {
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -moz-backdrop-filter: blur(8px);
}


.left {
    transform: translateX(-200px);
    opacity: 0;
}


.google-maps {
    position: relative;
    padding-bottom: 75%;
    // This is the aspect ratio height: 0;
    overflow: hidden;
}

    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }




#footerChat {
    position: fixed;
    right: 18px;
    bottom: 75px;
    justify-self: center;
}

#footerChatMsg {
    position: fixed;
    right: 18px;
    bottom: 75px;
    justify-self: center;
}

#footerChatMsgRoom {
    position: fixed;
    right: 18px;
    bottom: 75px;
    justify-self: center;
}

#footerChatNotify {
    position: fixed;
    right: 60px;
    bottom: 110px;
    justify-self: center;
}

#footerChatBadge {
    position: fixed;
    right: 44px;
    bottom: 112px;
    justify-self: center;
}

.gradient {
    background: linear-gradient(82deg,#594ae2 0%,#f69 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#appbar {
    background-color: rgb(255, 255, 255); /* Fallback color */
    background-color: rgba(255,255,255, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -moz-backdrop-filter: blur(8px);
}


#footer {
    position: fixed;
    left: 20px;
    bottom: 20px;
    justify-self: center;
}

.slideRight {
    position: relative;
    right: 0px;
    -webkit-animation: slideR 2s forwards;
    -moz-animation: slideR 2s forwards;
    animation: slideR 2s forwards;
}

@-webkit-keyframes slideR {
    0% {
        opacity: 0;
        transform: translateX(300px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@-moz-keyframes slideR {
    0% {
        opacity: 0;
        transform: translateX(300px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideR {
    0% {
        opacity: 0;
        transform: translateX(300px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.slideDown {
    position: relative;
    top: 0px;
    -webkit-animation: slideOn 2s forwards;
    -moz-animation: slideOn 2s forwards;
    animation: slideOn 2s forwards;
}

@-webkit-keyframes slideOn {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-moz-keyframes slideOn {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOn {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


.slideUp {
    position: relative;
    bottom: 0px;
    -webkit-animation: slideTo 2s forwards;
    -moz-animation: slideTo 2s forwards;
    animation: slideTo 2s forwards;
}

@-webkit-keyframes slideTo {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-moz-keyframes slideTo {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideTo {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



.slideLeft {
    position: relative;
    left: 0px;
    -webkit-animation: slideIn 2s forwards;
    -moz-animation: slideIn 2s forwards;
    animation: slideIn 2s forwards;
}

@-webkit-keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-300px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@-moz-keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-300px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-300px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}





.card {
    transition: 0.5s all ease 0s;
    -webkit-transition: 0.5s all ease 0s;
    -moz-transition: 0.5s all ease 0s;
    -ms-transition: 0.5s all ease 0s;
    -webkit-animation: moveAnimation 2s;
    animation: moveAnimation 5s;
}

    .card:hover {
        -webkit-transform: scale(1.04);
        -moz-transform: scale(1.04);
        -ms-transform: scale(1.04);
        -o-transform: scale(1.04);
        transform: scale(1.04);
        transition: 0.5s all ease 0s;
        -webkit-transition: 0.5s all ease 0s;
        -moz-transition: 0.5s all ease 0s;
        -ms-transition: 0.5s all ease 0s;
    }




.fade {
 
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera  12.1 */
    -moz-animation: fadein 2s; /* Firefox  16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera  12.1 */
    animation: fadein 2s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Firefox  16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera  12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Opera  12.1 */
@-o-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.ql-toolbar .ql-stroke {
    fill: none;
    stroke: #A1A1A1;
}

.ql-toolbar .ql-fill {
    fill: #A1A1A1;
    stroke: none;
}

.ql-toolbar .ql-picker {
    color: #A1A1A1;
}


.container {
    display: flex;
    flex-wrap: wrap;
}

    .container .image {
        width: 50%;
    }

    .container img {
        width: calc(100% - (5px * 2));
        margin: 5px;
    }

 

.card {
    transition: 0.5s all ease 0s;
    -webkit-transition: 0.5s all ease 0s;
    -moz-transition: 0.5s all ease 0s;
    -ms-transition: 0.5s all ease 0s;
    -webkit-animation: moveAnimation 2s;
    animation: moveAnimation 5s;
}

    .card:hover {
        -webkit-transform: scale(1.02);
        -moz-transform: scale(1.02);
        -ms-transform: scale(1.02);
        -o-transform: scale(1.02);
        transform: scale(1.02);
        transition: 0.5s all ease 0s;
        -webkit-transition: 0.5s all ease 0s;
        -moz-transition: 0.5s all ease 0s;
        -ms-transition: 0.5s all ease 0s;
    }


.cta {
    border: none;
    background: none;
}

    .cta span {
        padding-bottom: 3px;
        letter-spacing: 5px;
        font-size: 16px;
        padding-right: 15px;
        text-transform: uppercase;
        font: medium;
    }



.hover-underline-animation {
    position: relative;
    color: black;
    padding-bottom: 20px;
}

    .hover-underline-animation:after {
        content: "";
        position: absolute;
        width: 95%;
        transform: scaleX(0);
        height: 4px;
        bottom: 0;
        left: -5px;
        background: linear-gradient(-90deg, #ff9100 0%, #f10366 50%, #6173ff 100%);
        transform-origin: bottom center;
        transition: transform 0.25s ease-out;
    }

.cta:hover .hover-underline-animation:after {
    transform: scaleX(1);
    transform-origin: bottom center;
}


#bckdiv {
    background-image: url(/resources/bcksvg.svg);
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
    padding: 15%;
}