﻿
#carousel {
    overflow: hidden;
    position:relative;
}

    #carousel figure {
        position: relative;
        width: 500%;
        margin: 0;
        left: 0;
        animation: slider 40s ease-in-out infinite;
    }

    #carousel .carousel-welcome {
        background-color: rgba(64,64,64,.596);
        color: white;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

        #carousel figure img {
            width: 20%;
            float: left;
            height:600px;
            object-fit: cover;
            vertical-align:bottom;
        }

@keyframes slider {
    0% {
        left:0%;
    }

    19% {
        left: 0%;
    }

    20% {
        left: -100%;
    }

    39% {
        left: -100%;
    }

    40% {
        left: -200%;
    }

    59% {
        left: -200%;
    }

    60% {
        left: -300%;
    }

    79% {
        left: -300%;
    }

    80% {
        left: -400%;
    }

    100% {
        left: -400%;
    }
}

.multiple-card{
    display:flex;
    justify-content:space-evenly;
}

.single-card {
    text-align: justify;
    border-radius: 10px;
    background-color: rgba(251, 251, 251, 0.94);
    margin: 25px;
}

    .single-card h3 {
        display:inline-block;
        white-space: nowrap;
    }

.btn-primary {
    border-color: #002856 !important;
    background-color: #002856 !important;
    color:white!important;
}

    .btn-primary:hover {
        color: #002856 !important;
        background-color: inherit !important;
    }

.single-card-submit{
    width:175px;
    left:50%;
    margin-left: 75px;
}

#welcome-section {
    width: 100%;
    background-color: rgba(251, 251, 251, 0.94);
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
    transition: clip-path 1s;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}

.welcome-image {
    background-image: url(../../images/TMP_Logo_Grey_Background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(251, 251, 251, 0.94);
    background-blend-mode: darken;
}

/* Desktop Styles */
@media (min-width: 767.98px) {

    .multiple-card {
        padding: 5px 25px;
        flex-flow: row wrap;
    }

    .single-card {
        position:relative;
        width: 300px;
        height:620px;
        padding: 25px;
    }

    .single-card-submit {
        position: absolute;
        bottom:25px;
        left:50%;
        margin-left: -90px;
    }

    #welcome-section {
        padding: 50px 4%;
        height:500px;
    }

    .welcome-content {
        width: 650px;
        padding: 25px;
        margin:auto 0;
    }

    .welcome-image {
        padding: 25px;
        margin: auto 25px;
        width: 500px;
        height: 155px;
    }

    #qr-code{
        width: 130px;
        height: 130px;
        margin: auto;
        display: block;
    }
}

/* Mobile Styles */
@media (max-width: 768px){
    .multiple-card {
        flex-direction: column;
        margin:25px;
    }

    .single-card {
        padding:25px;
    }

    #welcome-section {
        padding: 25px;
    }

    .welcome-content {
        width: 100%;
        padding: 25px 0px;
    }

    .welcome-image {
        margin: 5px auto;
        width: 300px;
        height: 93px;
    }

    #qr-code{
        display: none;
    }

    .single-card-submit {
        position: relative;
        display: block;
        margin-top: 15px;
        left:50%;
        margin-left: -90px;
    }
}