html, body, div, span, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
        small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section, summary,
        time, mark, audio, video{margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}

        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}

        html{overflow-y:scroll;}
        body{-webkit-text-size-adjust:none;}

        sub, sup{font-size:75%; line-height:0; position:relative;}
        sup{top:-0.5em;}
        sub{bottom:-0.25em;}

        pre {white-space:pre; white-space:pre-wrap; word-wrap:break-word; padding:15px;}
        textarea {overflow:auto;}
        .ie6 legend, .ie7 legend {margin-left:-7px;}
        input[type="radio"], input.radio {vertical-align:text-bottom;}
        input[type="checkbox"], input.checkbox, .checkboxes input {vertical-align:bottom;}
        .ie7 input[type="checkbox"], .ie7 input.checkbox, .ie7 .checkboxes input {vertical-align:baseline;}
        .ie6 input {vertical-align: text-bottom;}
        label, input[type="button"], input[type="submit"], input[type="image"], button, .btn {cursor:pointer;}
        button, input, select, textarea {margin:0;}

        button {width:auto; overflow:visible;}
        .ie7 img {-ms-interpolation-mode: bicubic;}


      body {
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        height: 100vh;
        background: url('background.jpg') no-repeat center center fixed;
        background-size: cover;

         font-family: 'Inter', sans-serif;
            text-align: center;
            font-size: 12px;
            line-height: 1.4em;
            color: #FFFFFF;
            background-color: black;
      }
      

     img {
    max-width: 38%;
    height: auto;
  }

      .box {
        flex: 1 1 50%;
        height: 40%;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        align-content: center;
        font-size: 3em;
        flex-direction: column;
      }
      
      .box:nth-child(1) {
        align-items: flex-end;

      }
      
      .box:nth-child(2) {
        align-items: flex-end;

      }
      
      .box:nth-child(3) {
        align-items: stretch;
      }
      
      .box:nth-child(4) {
        align-items: stretch;
        flex-wrap: nowrap;
      }
      
  .logo {
            max-width: 50%;
      height: auto;
        }

h1 {
          
            color: #FFFFFF;
            font-family: 'Inter', sans-serif;
            font-size: 2.1vw;
            line-height: 1.2em;
            font-weight: 300;
            margin-bottom: 40px;
            margin-right: 100px;
            text-align: left;
            text-transform: uppercase;
           
        }

        h2 {

            color: #FFFFFF;
            font-family: 'Inter', sans-serif;
            font-size: 44px;
            line-height: 1.3em;
            font-weight: 300;
            margin-top: 18vh;
            margin-bottom: 50px;
            text-align: left;
        }

        h3 {

            color: #FFFFFF;
            font-family: 'Inter', sans-serif;
            font-size: 1.8vw;
            line-height: 1.2em;
            font-weight: 300;
            margin-top: 1vh;
            margin-bottom: 50px;
            text-align: left;
        }


        p {
            font-weight: 500;
            line-height: 2em;
        }


        a:hover,
        a:focus,
        a:visited,
        a {
            color: #FFFFFF;
            font-weight: 500;
            text-decoration: none;
            outline: none;
            text-transform: uppercase;
        }

        a#close {
            display: block;
            margin-bottom: 20px;
        }


        nav {
            font-size: 14px;
            margin-top: 1vh;
            text-align: left;

        }

        nav > a {
            display: inline-block;
            margin-right: 20px;
            position: relative;
                    }

        nav > a:after {
          content: '';
          position: absolute;
          width: 100%;
          transform: scaleX(0);
          height: 1px;
          bottom: 0;
          left: 0;
            background: linear-gradient(to right, #FFA500, #7F92C7);

          transform-origin: bottom right;
          transition: transform 0.25s ease-out;
        }

        nav > a:hover:after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }

        nav > a:last-child {
            margin: 0;
        }


.overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 90%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.75);
        display: none;
        justify-content: center;
        align-items: center;
        margin:  20px;
        padding: 20px;
      }
      
      .overlay-text {
       font-weight: 300;
        text-align: left;
        overflow-y: auto;
        max-height: 90%;

      }
      
      .close-button {
        position: absolute;
        top: 20px;
        right: 20px;
        color: white;
        font-size: 2em;
        cursor: pointer;
      }
      
      .open-button {
        color: #7F92C7;
        font-size: 2em;
        text-align: center;
        cursor: pointer;
      }


      @media screen and (max-width: 768px) {
        .box {
          flex: 1 1 100%;
          height: 50%;
          display: flex;
        }
        
        .box:nth-child(1),
        .box:nth-child(2) {
          display: none;
        }

             h1 {
                font-size: 6vw;
                text-align: center;
                margin: 4vh;
               
            }
            
            h3 {
            font-size: 4.2vw;
            line-height: 1.2em;
            text-align: center;
        
            }


                nav {
            font-size: 12px;
            margin-top: 1vh;
            text-align: center;
            }

            img{
            margin-top: 80px;
            width: 40%;
            }

            .overlay-text {
            font-weight: 300;
        text-align: center;
        overflow-y: auto;
        max-height: 90%;
        }

        .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 80%;
        height: 90%;
        background-color: rgba(0, 0, 0, 0.75);
        display: none;
        justify-content: center;
        align-items: center;
        margin:  20px;
        padding: 20px;
      }
          

      }