* {
                margin: 0;
                padding: 0;
                border: none;
                font-family: Arial, sans-serif;
            }
            
            @font-face {
                font-family: "andale mono";
                src: url();
            }
            
            body {
                font-size: 1em;
                overflow-x: hidden;
                background-color: #000;
            }
            
            .container {
                width: 100%;
                height: auto;
                background-color: #000;
                position: absolute;
            }
            
            .container-info {
                width: 100%;
                height: auto;
                background-color: #000;
            }
            
            .menu {
                width: 100%;
                height: 80px;
                align-items: center;
                position: fixed;
                display: inline-flex;
                background-color: none;
                z-index: 4;
            }

            .row {
                display: flex;
                flex-wrap: wrap;
                padding: 0 4px;
                padding-top: 80px;
              }
              
              /* Create four equal columns that sits next to each other */
              .column {
                flex: 32%;
                max-width: 33%;
                padding: 0 4px;
              }
              
              .column img {
                margin-top: 8px;
                vertical-align: middle;
                width: 100%;
              }
              
              /* Responsive layout - makes a two column-layout instead of four columns */
              @media screen and (max-width: 800px) {
                .column {
                  flex: 45%;
                  max-width: 45%;
                  margin-left: 2%;
                }
              }
              
              /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
              @media screen and (max-width: 600px) {
                .column {
                  flex: 100%;
                  max-width: 100%;
                }
              }
            /* Dropdown Button */
            
            .dropbtn {
                
                    width: fit-content;
                    background-color: #ffffff00;
                    color: white;
                    padding: 16px;
                    margin: auto;
                    font-size: 1em;
                    border: none;
                
            }
            
            .dropbtn a {
                text-decoration: none;
                color: #ffffff;
            }
            /* The container <div> - needed to position the dropdown content */
            
            .dropdown {
                margin: 30px;
                position: relative;
                display: inline-block;
                opacity: 0;
            }
            /* Dropdown Content (Hidden by Default) */
            
            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #000000;
                min-width: 160px;
                padding: 16px 2px;
                z-index: 4;
            }
            
            #dropdown-loghi {
                margin-left: auto;
            }
            /* Links inside the dropdown */
            
            .dropdown-content a {
                color: #ffffff;
                padding: 2px 16px;
                text-decoration: none;
                display: block;
            }
            /* Change color of dropdown links on hover */
            
            .dropdown-content a:hover {
                background-color: none;
                color: #474747;
                transition: 100ms;
            }
            /* Show the dropdown menu on hover */
            
            .dropdown:hover .dropdown-content {
                display: block;
                transition: 100ms;
            }
            /* Change the background color of the dropdown button when the dropdown content is shown */
            
            .menu ul a {
                color: #fff;
                text-decoration: none;
                letter-spacing: 3px;
            }
            
            .slide1 {
                width: 100%;
                height: 100vh;
                z-index: 1;
                position: absolute;
            }
            
            .slide1 h1 {
                opacity: 0;
                font-size: 60px;
                text-align: center;
                position: relative;
                display: block;
                left: 50%;
                transform: translateY(-50%);
                transform: translateX(-50%);
            }
            
            .slide2 {
                opacity: 1;
                width: 100%;
                height: 0px;
                background-color: #ffffff;
                z-index: 1;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
            
            .slide2 h1 {
                opacity: 0;
                font-size: 60px;
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateY(-50%);
                transform: translateX(-50%);
            }
            
            .big-title {
                opacity: 0;
                width: 100%;
                height: 100vh;
                z-index: 1;
                position: absolute;
            }
            
            .big-title h1 {
                opacity: 0;
                font-size: 100%;
                text-align: center;
                position: absolute;
                left: 50%;
                top: 80%;
                color: #ffffff;
                transform: translateY(-50%);
                transform: translateX(-50%);
            }
            
            .background-video {
                width: 100%;
                height: 100%;
                margin: 0 auto;
                position: absolute;
                top: 0;
                z-index: 1;
            }
            
            .background-video video {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            
            .background-video-projects {
                width: calc(70vw + 24px);
                height: 55vh;
                margin-top: 15vh;
                margin-bottom: 25vh;
                position: absolute;
                top: 0;
                z-index: 1;
                margin-left: 15%;
                margin-right: 15%;
            }
            
            .background-video-projects video {
                width: 100%;
                height: 100%;
            }
            
            .video-js {
                width: 100% !important;
                height: 100% !important;
            }
            
            .video-info {
                opacity: 0;
                width: 50%;
                height: auto;
                position: absolute;
                margin-top: 75vh;
                margin-left: 15%;
                padding: 10px;
            }
            
            .title-info h1 {
                opacity: 0;
                letter-spacing: 2px;
                color: #ffffff;
                font-size: 24px;
                text-transform: uppercase;
                text-align: left;
            }
            
            .title-info p {
                opacity: 0;
                color: #e6e6e6;
                font-size: 14px;
                text-transform: capitalize;
                text-align: left;
            }
            
            .title-info a {
                color: #e6e6e6;
                text-decoration: none;
            }
            
            .credits {
                z-index: -1;
                opacity: 0;
                width: 100%;
                height: 100vh;
                position: absolute;
                background-color: #000000;
            }
            
            .credits-info {
                width: 70%;
                height: auto;
                position: absolute;
                margin-top: 10vh;
                margin-left: 15%;
                padding: 10px;
            }
            
            .credits-title h1 {
                color: #474747;
                font-size: 2em;
                text-transform: capitalize;
                text-align: left;
                opacity: 0;
            }
            
            .credits-title p {
                color: #d9d9d9;
                font-size: 1.2em;
                opacity: 0;
                text-transform: capitalize;
                text-align: left;
            }
            
            .credits-title a {
                color: #474747;
                text-decoration: none;
                font-size: 1.2em;
            }
            
            .menu-mobile {
                opacity: 0;
                display: none;
                background-color: #000 !important;
            }
            
            .menu-mobile-container {
                opacity: 0;
                display: none;
            }
            
            .credits-text {
                opacity: 0;
                width: 50%;
                height: auto;
                position: absolute;
                margin-top: 90vh;
                margin-left: 15%;
                padding: 10px;
            }
            
            .credits-text p {
                color: #fff;
            }
            
            .credits-text a {
                color: #fff;
                text-decoration: none;
                font-size: 1em;
            }
            
            .credits-close {
                width: 50%;
                height: auto;
                position: absolute;
                margin-top: 90vh;
                margin-left: 15%;
                padding: 10px;
            }
            
            .credits-close p {
                color: #fff;
            }
            
            .credits-close a {
                color: #fff;
                text-decoration: none;
                font-size: 1em;
            }
            
            .next-prev-sel {
                opacity: 0;
                width: 50%;
                margin-left: 33%;
                height: auto;
                position: absolute;
                margin-top: 90vh;
                padding: 10px;
                display: inline-flex;
            }
            
            .next-prev-sel p {
                color: #fff;
                margin-left: auto;
            }
            
            .next-prev-sel a {
                color: #fff;
                text-decoration: none;
                font-size: 1em;
            }
            
            .video-js .vjs-control-bar {
                background-color: rgb(0 0 0 / 0%)!important;
            }
            
            .video-js .vjs-slider {
                background-color: rgb(255 255 255 / 17%)!important;
            }
            
            .vjs-poster {
                width: 100% !important;
                height: 100% !important;
                background-size: cover !important;
            }
            
            .image-info {
                opacity: 0;
                width: 50%;
                height: 0vh;
                margin-left: 50%;
                margin-right: auto;
                margin-top: 0px;
                position: fixed;
                mix-blend-mode: luminosity;
            }
            
            .image-info img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            
            .info-text {
                opacity: 0;
                position: absolute;
                width: 100%;
                height: auto;
                margin-top: 10vh;
                margin-bottom: 10vh;
            }
            
            .info-text h1 {
                font-size: 1.2em;
                color: #fff;
                text-align: center;
                margin-top: 100px;
            }
            
            .info-text a {
                font-size: 16px;
                color: #dbdbdb;
                text-align: center;
                text-decoration: none;
                margin-top: 20px;
            }
            
            .info-text p {
                font-size: 14px;
                color: #ffffff;
                text-align: center;
                text-decoration: none;
                margin-top: 0px;
            }

            .vjs-error .vjs-error-display .vjs-modal-dialog-content {
                text-align: center;
                display: none;
            }

            @media only screen and (min-width:0px) and (max-width: 600px) {

                .menu {
                    opacity: 0;
                    display: none;
                }
                .menu-mobile {
                    opacity: 1;
                    width: 100%;
                    height: 80px;
                    align-items: center;
                    position: fixed;
                    display: inline-flex;
                    background-color: #000;
                    z-index: 10;
                }
                .menu-mobile-container {
                    width: 100%;
                    height: 0%;
                    display: none;
                    opacity: 0;
                    position: absolute;
                    background-color: #000;
                    z-index: 100;
                }
                .dropbtn {
                    width: fit-content;
                                background-color: #ffffff00;
                                color: white;
                                padding: 16px;
                                margin: auto;
                                font-size: 1.3em;
                                border: none;
                }
            
                .dropbtnclose {
                    background-color: #ffffff00;
                    color: white;
                    padding: 16px;
                    font-size: 1.2em;
                    margin: auto;
                    border: none;
                }
            
                
            
            
                .dropdown-mobile {
                    width: fit-content;
                    margin: auto;
                }
                .dropdown-mobile-2 {
                    width: fit-content;
                    margin-top: 5px;
                    margin-left: 20px;
                    position: relative;
                    display: grid;
                    text-align: center;
                    width: 90%;
                    opacity: 0;
                }
            
                .dropdown-mobile-2 h1 {
                    opacity: 1;
                    color: #fff;
                    margin-top: 2px;
                    text-decoration: none;
                    font-size: 1.2em;
                }
                .dropdown-mobile-2 a {
                    opacity: 1;
                    color: #fff;
                    margin-top: 2px;
                    text-decoration: none;
                    font-size: 1.2em;
                }
                .dropdown-mobile-2 p {
                    opacity: 1;
                    color: #fff;
                    margin-top: 2px;
                    text-decoration: none;
                    font-size: 1.2em;
                }
                .dropdown-mobile-2 a:hover {
                    color: #858585;
                    margin-top: 2px;
                    text-decoration: none;
                    font-size: 1.2em;
                    transition-duration: 200ms;
                }
            
                .big-title h1{
                    top: 75vh;
                    font-size: 0.7em;
                }

                .background-video-projects {
                    width: calc(73vw + 24px);
                    height: 55vh;
                    margin-top: 5vh;
                    margin-bottom: 25vh;
                    position: absolute;
                    top: 0;
                    z-index: 1;
                    margin-left: 10%;
                    margin-right: 10%;
                }

                .video-info {
                    width: 80%;
                    height: auto;
                    position: absolute;
                    margin-top: 60vh;
                    margin-left: 10%;
                    margin-right: 10%;
                    padding: 10px;
                    background-color: #0000;
                    z-index: 1;
                }

                .title-info h1{
                    font-size: 1.5em;
                }

                .credits-text{
                    margin-top: 80vh;
                    z-index:2;
                    margin-left: 10%;
                }

                .credits-text a{
                    font-size: 1em;
                }

                .next-prev-sel{
                    margin-top: 80vh;
                    z-index:2;
                    margin-left: 35%;
                }

                .next-prev-sel a{
                    font-size: 1em;
                }

                .credits-close{
                    margin-top: 80vh;
                }

                .credits-title h1 {
                    color: #474747;
                    font-size: 2em;
                    text-transform: capitalize;
                    text-align: left;
                    opacity: 0;
                }
                
                .credits-title p {
                    color: #d9d9d9;
                    font-size: 0.9em;
                    opacity: 0;
                    text-transform: capitalize;
                    text-align: left;
                }
                
                .credits-title a {
                    color: #474747;
                    text-decoration: none;
                    font-size: 0.7em;
                }

                

                .info-text {
                    opacity: 0;
                    position: absolute;
                    width: 90%;
                    margin-left: 5%;
                    margin-right: auto;
                    height: auto;
                    margin-top: 100px;
                }

                .info-text h1{
                    font-size: 1em;
                    color: #fff;
                    text-align: center;
                    margin-top: 10%;
                }

                .video-js .vjs-big-play-button{
                    font-size: 1.3em;
                }
            
            }
            
            @media only screen and (min-width:600px) and (max-width: 1000px) {
                .menu {
                    opacity: 0;
                    display: none;
                }
                .menu-mobile {
                    opacity: 1;
                    width: 100%;
                    height: 80px;
                    background-color: #000 !important;
                    align-items: center;
                    position: fixed;
                    display: inline-flex;
                    background-color: none;
                    z-index: 4;
                }
                .menu-mobile-container {
                    width: 100%;
                    height: 0%;
                    display: none;
                    opacity: 0;
                    position: absolute;
                    background-color: #000;
                    z-index: 100;
                }
                .dropbtn {
                    width: fit-content;
                    background-color: #ffffff00;
                    color: white;
                    padding: 16px;
                    margin: auto;
                    font-size: 1.4em;
                    border: none;
                }
                .dropdown-mobile {
                    width: fit-content;
                    margin: auto;
                }
                .dropdown-mobile-2 {
                    width: fit-content;
                    margin-top: 20px;
                    margin-left: 20px;
                    position: relative;
                    display: grid;
                    text-align: center;
                    width: 90%;
                    opacity: 0;
                }
            
                .dropdown-mobile-2 h1 {
                    opacity: 1;
                    color: #fff;
                    margin-top: 10px;
                    text-decoration: none;
                    font-size: 1.1em;
                }
                .dropdown-mobile-2 a {
                    opacity: 1;
                    color: #fff;
                    margin-top: 10px;
                    text-decoration: none;
                    font-size: 1.5em;
                }
                .dropdown-mobile-2 p {
                    opacity: 1;
                    color: #fff;
                    margin-top: 10px;
                    text-decoration: none;
                    font-size: 1.5em;
                }
                .dropdown-mobile-2 a:hover {
                    color: #696969;
                    margin-top: 10px;
                    text-decoration: none;
                    font-size: 1.5em;
                    transition-duration: 200ms;
                }
                .menu-dropdown-mobile {
                    display: block;
                    position: absolute;
                    background-color: #f1f1f100;
                    min-width: 160px;
                    z-index: 4;
                }
                .dropbtnclose {
                    
                    background-color: #ffffff00;
                    color: white;
                    padding: 16px;
                    font-size: 1.5em;
                    margin: auto;
                    border: none;
                }
                .title-info h1 {
                    font-size: 18px;
                }
                .title-info p {
                    font-size: 14px;
                }
                .info-text {
                    opacity: 0;
                    position: absolute;
                    width: 90%;
                    margin-left: 5%;
                    margin-right: auto;
                    height: auto;
                    margin-top: 100px;
                }

                .info-text h1{
                    font-size: 1.5em;
                    color: #fff;
                    text-align: center;
                    margin-top: 100px;
                }

                .video-info {
                    width: 90%;
                    height: 44vh;
                    position: absolute;
                    margin-top: 70vh;
                    margin-left: 0%;
                    margin-right: 0;
                    padding: 10px;
                    border-radius: 20px;
                    background-color: #0000;
                    z-index: 1;
                }
                .title-info{
                    margin-left: 15%;
                }
                .title-info h1 {
                    opacity: 0;
                    letter-spacing: 2px;
                    color: #ffffff;
                    font-size: 2em;
                    text-transform: uppercase;
                    text-align: left;
                }
                
                .title-info p {
                    opacity: 0;
                    color: #d9d9d9;
                    font-size: 1.2em;
                    text-transform: capitalize;
                    text-align: left;
                }
                
                .title-info a {
                    color: #d9d9d9;
                    text-decoration: none;
                    font-size:1.2em;
                }

                .credits-text{
                    margin-top: 85vh;
                    z-index:2;
                    margin-left:13%;
                }

                .credits-text a {
                    
                    font-size: 1.2em;
                    color: #ffffff;
                }

                .next-prev-sel{
                    margin-top: 85vh;
                    z-index:2;
                }

                .next-prev-sel a {
                    color: #ffffff;
                    text-decoration: none;
                    font-size: 1.2em;
                }

                .credits-title h1 {
                    color: #474747;
                    font-size: 3em;
                    text-transform: capitalize;
                    text-align: left;
                    opacity: 0;
                }
                
                .credits-title p {
                    color: #d9d9d9;
                    font-size: 1.2em;
                    opacity: 0;
                    text-transform: capitalize;
                    text-align: left;
                }
                
                .credits-title a {
                    color: #474747;
                    text-decoration: none;
                    font-size: 2em;
                }

                .credits-close{
                    margin-top: 85vh;
                    margin-left:13%;
                }

                .credits-close a {
                    color: #fff;
                    text-decoration: none;
                    font-size: 1.2em;
                }


                .background-video-projects {
                    width: calc(70vw + 24px);
                    height: 55vh;
                    margin-top: 10vh;
                    position: absolute;
                    top: 0;
                    z-index: 1;
                    margin-left: 13%;
                    margin-right: 15%;
                }

                .video-js .vjs-big-play-button{
                    font-size: 1.5em;
                }
                
            }