@font-face {
    font-family: 'basisgrotesquereg';
    src: local('basis-grotesque-off-white-pro.woff2'),
    url('basis-grotesque-off-white-pro.woff2') ;
   /* format('opentype');*/
    font-weight: normal;
    font-style: normal; }

    @font-face {
      font-family: 'basispro';
      src: local('basis-grotesque-regular-pro.woff2'),
      url('basis-grotesque-regular-pro.woff2') ;
      font-weight: normal;
      font-style: normal;
      
      }

  body {
    font-family: 'basisgrotesquereg', sans-serif;
    color: white;
    background: black;
    padding-top: 5%;
    width: 100vw; }
  
  header {
    margin-left: 7%;
    font-family: 'basisgrotesquereg', sans-serif;
    margin-right: 7%;
    height: 100%; }
    header nav.menu {
      display: flex; }
      header nav.menu ul {
        margin: 0;
        padding: 0; }
        header nav.menu ul li {
          list-style-type: none;
          font-size: 20px;
          float: left;
          margin-right: 30px;
          line-height: 30px; }
          header nav.menu ul li a {
            color: white;
            text-decoration: none; }

/* Style the footer */
.footer {
    background-color:black;
    margin-left: 7%;
    margin-right: 7%;
    height: 100%; }
    footer nav.menu {
      display: flex; }
      footer nav.menu ul {
        margin: 0;
        padding: 0; }
        footer nav.menu ul li {
          list-style-type: none;
          font-size: 20px;
          float: left;
          margin-right: 30px;
          margin-top: 100px;
          line-height: 30px; }
          footer nav.menu ul li a {
            color: white;
            text-decoration: none; }
  
  
            .main-container {
                margin-left: 7%;
                font-family: 'basisgrotesquereg', sans-serif;
                margin-right: 7%;
                margin-top: 80px; }
                .main-container h1 {
                  font-family: 'basisgrotesquereg', sans-serif;
                  font-size: 85px;
                  margin-left: -0.5%;
                   }
                  @media only screen and (max-width: 600px) {
                    .main-container h1 {
                      font-size: 50px; } }
            
                    .main-container h2 {
                        font-size: 18px;
                    line-height: 25px; } 
            
                .main-container p {
                  margin-top: 30px;
                  font-size: 22px;
                  line-height: 30px; }
                .main-container .container-inside {
                  margin-top: 50px; }
                  .main-container .container-inside h2 {
                    font-family: 'basisgrotesquereg', sans-serif;
                    font-size: 18px;
                    display: block;
                    border-bottom: 1px solid white;
                    height: 30px; }
            
                    .main-container h3 {
                        font-family: 'basisgrotesquereg', sans-serif;
                        margin-top: 30px;
                        font-size: 22px;
                        font-weight: normal;
                       }
                  .main-container .container-inside .letterset {
                    margin-left: 100px;
                    margin-right: 100px;
                    word-break: break-all;
                    padding-top: 40px;
                    padding-bottom: 40px;
                    font-size: 70px;
                    text-align: center;
                    line-height: 85px; }
                    @media only screen and (max-width: 600px) {
                      .main-container .container-inside .letterset {
                        margin-left: 0px;
                        margin-right: 0px;
                        font-size: 55px;
                        line-height: 70px; } }

                        div.gallery {
                            margin: 5px;
                            border: 1px solid #ccc;
                            float: left;
                            width: 180px;
                          }
                          
                          div.gallery:hover {
                            border: 1px solid #777;
                          }
                          
                          div.gallery img {
                            width: 100%;
                            height: auto;
                          }
                          
                          div.desc {
                            padding: 15px;
                            text-align: center;
                          }