/** For login page, have welcome text on left, video on right and below that the usual login form */
.welcome-content-div {
    display: flex;
    flex-wrap: wrap;
    width: 100%; /* or remove width entirely */
    box-sizing: border-box;
}

/** hamburger styling, only visible on mobile */
#welcome-content-hamburger {
    display: none;
}

/** used to show welcome content on mobile when hamburger clicked */ 
.menu.hidden {
    display: flex;
}

/** and this will hide the welcome content on mobile */
.menu.visible {
    display: none;
}

/** content on left, for our app its usually the welcome notification */
.align-left {
    flex: 1;
    margin: auto;
}

.align-left > p {
    font-size: 17px !important;
    padding: 1em;
}

/** align content to right, used for video */
.align-right {
    margin-top: 1em;
    flex: 1;
    max-width: 50%;
}

.align-left, .align-right {
    flex: 1 1 50%; /* allows each to take up half the container */
}

/** setting a default video size, attempt to make it consistent */
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/** arrow content is for the left and right arrow that allows users to switch videos, temporarily disabled in code today, but when reactivated, this creates the arrows */
.arrow_content {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.arrow-left {
    font-size: 30px;
    margin-right: 2em;
    cursor: pointer;
}

.arrow-right {
    font-size: 30px;
    margin-left: 2em;
    cursor: pointer;
}

/** When the video content is created, it fades into the screen */
.video-container {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/** loading page for video, loading text is aligned centrally */
.loading {
    text-align: center;
    align-content: center;
}

/** when the video container is to appear, set opacity to 1 */
.video-container.visible {
    opacity: 1;
}

/** set log in accordion to be colour of California site */
.accordion-title {
    background-color: #3c7cbe !important;
}
  
/** On mobile screens, have text, video and login on top of each other as column */
@media (max-width: 768px) {
    
    /** hide default welcome content on load, and make hamburder appear */
    .welcome-content-div {
        display: flex;
    }

    #welcome-content-hamburger {
        display: flex;
        align-content: right;
        width: 30px;
        height: 22px;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        margin-top: 1em;
    }

    #welcome-content-hamburger span {
        display: block;
        height: 4px;
        background-color: #333;
        border-radius: 2px;
    }

    /** move hamburger to right */
    .justify-right{
        justify-items: right;
    }
  
    /** menu is content within hamburger, when hidden, hide the content.  JS has code that when hamburger clicked, it sets menu to visible */
    .menu.hidden {
        display: none;
    }
    
    .menu.visible {
        display: flex;
        flex-direction: column;
    }

    .align-left, .align-right {
        max-width: 100%;
    }

}