/* Type */
  @font-face {
    font-family: Magistral;
    src: url(Fonts/Magistral/Magistral-Book.ttf);
    font-weight: normal;	}
  @font-face {
    font-family: Univers;
    src: url(Fonts/Univers/UniversLTW01-59UltCondensed.ttf);
    font-weight: lighter !important;	}
  @font-face {
    font-family: Clint;
    src: url(Fonts/Clint/Clint_Marker.ttf);}
  @font-face {
    font-family: Roboto Mono;
    src: url(Fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf);}
  
  h1{
    font-family: 'Univers';
    font-size: 240px;

    text-transform: uppercase;
    margin: 0;}

  h2{
    font-family: 'Univers';
    font-size: 52px;
    font-weight: bold;


    text-transform: uppercase;

    letter-spacing: 2.5px;
  
    
    margin: 0;}
  
  h3{
    font-family: 'Clint';
    font-size: 30px;
    color: auto;
    margin: 0;}
  
  h4{
    font-family: 'Univers';
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: white;
    margin: 0;}
  
  h5{
    font-family: 'magistral';
    font-size: 32px;
    font-weight: light;
    letter-spacing: 25px;
    text-transform: uppercase;
    
    text-align: center;

    color: rgb(243, 243, 243);
  
  margin: 0;}
  
  p{
  font-family: 'Roboto', 'helvetica';
  font-size: 18px;
  margin: 0;}

  a{
    color: #919191;
    text-decoration: none;
    font-family: roboto, helvetica;
  }

  a:hover{
    color: #121212;
  }

  a.btn_blue:hover{
    color: #fff;
  }
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 800,
  'GRAD' 200,
  'opsz' 48
}

.material-symbols-outlined{
  color: rgb(231, 231, 231);
  font-size: 32px !important;
}

.material-symbols-outlined.arrow:hover{
color: #fff;
}

.black{
  color: #121212
}

a.btn_blue{
  text-decoration: none;
}
.btn_blue{
  background-color: #0069B4;
  padding: 8px 16px;

  color:white;

  font-size: 18px;

  width: fit-content;

}

.btn_blue p{
  margin: 0;
  width: unset !important;
  text-decoration: none;
}

/*	Navigation Bar */
  .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: black;
    height: 90px;	}
    .logo {
      height: 35px;
      width: auto;
      margin-right: 15px;}

    .container {
      position: relative;
      margin: 0 auto;
      width: calc(100vw);
      padding: 0 50px;
      height: 100%;	}
      .container h3 {
        font-size: 26px;
        font-family: Univers;
        letter-spacing: 0.15em;
        margin: 0;
        margin-bottom: 5px !important;
        color: black;
      text-align: left;	}
      .container a {
        color: white;
        outline: none;
        text-decoration: none;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 100%;	
        width: fit-content;}

    .menu-trigger {
      position: absolute;
      top: 18.5px;
      right: 100px;
      width: 60px;
      height: 60px;
      cursor: pointer;
      transition: opacity 130ms ease-out;    }
      .menu-trigger:hover {
        opacity: 1;	}
        .menu-trigger h5 {
          position: absolute;
          right: 10px;
          top: 9px;
          text-transform: uppercase;
          color: white;
          user-select: none;
          transition: color 300ms ease-out;	}
          .menu-trigger .bar {
            position: absolute;
            left: 10px;
            width: 35px;
            height: 3px;
            background: white;
            transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;	}
            .bar--1 {
              top: 17.5px;	}
            .bar--2 {
              top: 25px;	}
            .bar--3 {
            top: 32.5px;	}

    .open, .open:hover {
      opacity: 1 !important;}
      .open h5 {
        color: white;	}
        .open .bar {
          background: white;
          width: 30px;	}
          .open .bar--1 {
            top: 21px;
            transform: rotate(135deg);	}
          .open .bar--2 {
            opacity: 0;
            width: 0;	}
          .open .bar--3 {
            top: 21px;
            transform: rotate(-135deg);	}

    .navigation {
      visibility: hidden;
      position: fixed;
      z-index: 99;
      top: 20px;
      left: 0;
      width: 100%;
      max-width: 100%;
      background: #fff;
      box-shadow: 0 6px 8px #656565;
      padding: 100px 0 20px;
      opacity: 0;
      transform-origin: center top;
      transform: scale(0.9);
      backface-visibility: hidden;
      transition: opacity 190ms ease-out, transform 40ms ease-out;	}
      .navigation .container {
        padding: 0 18px;	}
        nav {
          position: relative;
          width: 100%;
          max-width: 100%;
          margin: 0 auto;
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          flex-flow: row wrap;}
          nav h3 {
            font-family: Univers;
            position: relative;
            display: block;
            margin: 0 0 15px 0;
            color: black;
            font-size: 1.2em !important;
            font-weight: 600;
            text-transform: uppercase;
            text-align: left;	}
          nav ul {
            position: relative;
            padding: 0;
            margin: 0;
            width: 100%;
            max-width: 100%;
            list-style-type: none;	}
            nav li {
              display: block;
              color: #919191;
              font-size: 0.88em;
              font-family: Magistral;
              margin: 6px 0;
              font-weight: 400;
              letter-spacing: 0.025em;	}
              nav li >a {
                color: #121212 !important;
                font-size: 1em;
                margin-right: 8px;
                display: inline-block;
                transform: translateY(1px);
                opacity: 0.6;	}
                nav li >a >i {
                  color: #121212;
                  font-size: 1.4em;
                  margin-right: 8px;
                  display: inline-block;
                  transform: translateY(1px);
                  opacity: 0.6;	}
                nav .social-link {
                  float: left;
                  width: 44px;
                  height: 44px;
                  line-height: 48px;
                  border-radius: 44px;
                  text-align: center;
                  margin: 5px;
                  cursor: pointer;
                  transition: all 0.25s ease-in-out;	}
                  nav .social-link >i:hover {
                    color: black;	}
                    nav .social-link:last-child {
                      margin-right: 0;	}
                      nav .social-link >i {
                        color: #b5b5b5;
                        font-size: 1.57em;
                        margin: 0 auto;	}

      .nav-open {
        visibility: visible;
        opacity: 1;
        transform: scale(1);}
        
      nav .col {
        min-height: auto;
        width: auto;
        flex-direction: row;
        margin: 0 auto;
        margin-bottom: 25px;
        text-align: left;
        transform: translateY(25px);
        opacity: 0;
        backface-visibility: hidden;
        will-change: transform, opacity;	}
        .col:first-child {
          animation-delay: 50ms;	}
          .col:nth-child(2) {
            animation-delay: 130ms;	}
          .col:nth-child(3) {
            animation-delay: 210ms;	}
          .col:nth-child(4) {
            animation-delay: 290ms;	}

        .col.socials {
          flex-direction: row;	}
          .col.socials a {
            display: inline;	}
            .c-in {
            animation-name: fadeInUp;
            animation-duration: 860ms;
            animation-fill-mode: forwards;
            animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);	}
        
    main {
      position: relative;
      width: 100%;
      max-width: 100%;
      margin: 0 auto;	}
      main .container {
        padding: 82px 18px 0;	}

    @media screen and (min-width: 680px) {
      nav .col {
        width: 50%;}			}
    @media screen and (min-width: 992px) {
      nav .col {
        width: auto;}

      .search {
        max-width: 235px;}			}
    @media screen and (max-width: 1024px) {
      nav {
        justify-content: flex-start !important;
        align-items: flex-start !important;
      }

      nav .social-link {
        margin: 10px;
      }

      nav .col {
        min-height: auto !important;
        text-align: center;
      }

      .col:nth-child(5) {
        display: flex;
        justify-content: flex-start !important;
        flex-direction: row;
      }

      .search {
        max-width: 235px;
      }	
      .logo {
        height: 30px;
        width: auto;
        margin-right: 15px;
      }
    
      .container {
        position: relative;
        margin: 0 auto;
        width: calc(100vw - 40px);
        padding: 0 20px;
        height: 100%;
    }
  
    .menu-trigger {
      position: absolute;
      top: 18.5px;
      right: 50px;
      height: 55px;
      width: 60px;
      cursor: pointer;
      transition: opacity 130ms ease-out;
  }}
    @media screen and (max-width: 480px) {
      .logo {
        height: 20px;
        width: auto;
        margin-right: 15px;  }
    
      .container {
        position: relative;
        margin: 0 auto;
        width: calc(100vw - 20px);
        padding: 0 10px;
        height: 100%;  }

    .menu-trigger {
      position: absolute;
      top: 18.5px;
      right: 50px;
      height: 55px;
      width: 60px;
      cursor: pointer;
      transition: opacity 130ms ease-out;  }
      .menu-trigger {
        right: 20px;  }
        .trigger-logo{
          height: 30px;
        }

      nav .col {
        width: 100% !important;
        min-height: 136px;  }
        nav .social-link {
          margin: 1px;  }	}


    @keyframes fadeInUp {
      0% {
        transform: translateY(25px);
        opacity: 0;
      }

      100% {
        transform: translateY(0px);
        opacity: 1;
      }	}
    @-webkit-keyframes fadeInUp {
      0% {
        transform: translateY(25px);
        opacity: 0;
      }

      100% {
        transform: translateY(0px);
        opacity: 1;
      }	}
    @-moz-keyframes fadeInUp {
      0% {
        transform: translateY(25px);
        opacity: 0;
      }

      100% {
        transform: translateY(0px);
        opacity: 1;
      }	}




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

  h1{
    font-family: 'Univers';
    font-size: 150px;

    text-transform: uppercase;
    margin: 0;}
  h2{
    font-family: 'Univers';
    font-size: 36px;
    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 2.5px;
  
    
    margin: 0;}
  h3{
    font-family: 'Clint';
    font-size: 30px;
    color: auto;
    margin: 0;}
  h4{
    font-family: 'Univers';
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: white;
    margin: 0;}
  h5{
    font-family: 'magistral';
    font-size: 28px;
    font-weight: light;
    letter-spacing: 25px;
    text-transform: uppercase;
    
    text-align: center;

    color: rgb(243, 243, 243);
  
  margin: 0;}
  

}