[data-tooltip] {
            position: relative;
        }
        [data-tooltip]::after {
            content: attr(data-tooltip);
            display: block;
            position: absolute;
            z-index: 2;
            background-color: #444;
            color: white;
            padding: 1em 2em;
            border-radius: 5px;
            font-size: .75em;
            bottom: 0;
            left:0;
            white-space: nowrap;
            transform: scale(0);
            transition: transform ease-out 150ms,
                        bottom ease-out 150ms
        }        
        [data-tooltip]:hover::after {
            bottom: 100%;
            transform: scale(1);
        }            
        .container {
            padding: 1em 1em;
            margin-top: 30px;
        }
        #workarea {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .video-sections {
            padding: 1.5em 2em;
            margin: 1.5em 0;
            background-color: rgb(226,226,226);
            border-radius: 20px;
        }
        
        .video-sections h3{
            font-family: "Lato", sans-serif;
            font-size: 1.4em;
            font-weight: 400;
            margin-bottom: 15px;
        }
        .video-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .video {
            width:48%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .video .video-name {
            text-align: center;
            margin-top: 1em;
            margin-bottom: 20px;
            background-color: #333;
            color: white;
            padding: 10px 10px;
            border-radius: 8px;
        }

/*MODAL STYLE*/
        .modal {
            display: none;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left:0;
            overflow: auto;
            animation: modal-slide-in 1s ease-in alternate;
        }
        .modal-content {
            width: 80%;
            margin: auto;
            margin-top: 75px;
            margin-bottom: 75px;
            border: 1px solid #DDD;
            /*padding-bottom: 2em;*/
            background-color: #FFF;
            box-shadow: 5px 5px 5px #888;
            border: 1px solid #AAA;
        }
        .modal-header {
            background-color: #021130;
            padding: .5em 1em;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 3px 3px 2px rgb(0,51,51);
            font-family: "Oswald", sans-serif;
        }
        .modal-header .modal-title {
            text-transform: uppercase;
        }
        .modal-body {
            padding: 1em 2em;
            font-family: "Poppins", sans-serif;
        }
        .modal.active {
            display: block;
        }        
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 40px;
            font-weight: bold;
        }        
        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }        
        .info-modal h6 {
            font-size: 1em;
        }

        .modal p {
            margin-top: .5em;
            margin-bottom: .5em;
            padding-left: 1em;
        }
        .modal-footer {
            display: flex;
            justify-content: flex-end;
        }
        .modal-footer button {
            padding: .6em .6em;
            margin-bottom: 1.5em;
            margin-right: 1.5em;
            background-color: #111;
            color: white;
            cursor: pointer;
        }
        .modal-footer button:hover {
            background-color: white;
            color: black;
        }

/*END MODAL STYLE*/
        .container.inactive {
            background-color: #999;
            opacity: .5;
            pointer-events: none;
        }         
        form label {
            text-transform: uppercase;
        }
        form .help-block {
            font-size: .9em;
            font-style: italic;
            color: #555;
        }
        form .control-group {
            margin-bottom: 20px;
        }
        form input, form select {
            padding: 5px 15px;
            width: 80%;
        }      
        form button {
            padding: 5px 20px;
            color: #0b67c2;
        }

        form button:hover {
            background-color: #0b67c2;
            border-color: #0b67c2;
            color: white;
            cursor: pointer;
        }
        #actions {
            margin-bottom: 50px;
        }
        .call-for-action {
            width: 100%;
            margin: auto;
            padding: 5px 10px;
            cursor: pointer;
        }
        .call-for-action:hover {
            background-color: #0b67c2;
            color: white;
        }   

        .options {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        #quick-nav {
            width: 70%;
            display: inline-block;
            justify-content: space-around;
            flex-direction: row;
        }
        #quick-nav > * {
            margin-right: 20px;
        }
        #quick-nav .form-select {
            display: inline-block;

        }
        #quick-nav label {
            font-weight: bold;
        }
        a.help {
            font-size: 1em;
            text-decoration: none;
            color:  #555;
        }
        #speechtotext-menu {
            position: relative;
        }
        #speechtotext-menu .icon-bars{
            font-size: 32px;
            color: #021130;
            opacity: .9;
            cursor: pointer;
        }
        #speechtotext-menu. .icon-bars.active{
            opacity: 1;
        }

        #speechtotext-nav {
            display: none;
            position: absolute;
            z-index: 10;
            background-color: #021130;
            color: white;
            width: 150px;
            padding: 10px 10px;
            border: 1px solid #777;
            border-radius: 20px;
            top: 40px;
        }
        #speechtotext-nav ul {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            list-style: none;
            line-height: 1.6;
            text-transform: uppercase;
            letter-spacing: 2px;
            justify-content: center;
            align-items: center;
        }
        #speechtotext-nav li a{
            text-decoration: none;
            color: white;
        }
        #speechtotext-nav.active {
            display: block;
        }
        @media screen and (max-width: 800px) {
            .modal-content {
                width: 80%;
            }
            .video {
                width: 80%;
            }

        }

        @keyframes modal-slide-in {
            0% {
                transform: translateX(-200%);
            }
            100% {
                transform: translateX(0%);
            }
        }