html {
  scroll-padding-top: 110px;
}
body{
  background: #101010;
  margin: 0;

	/*position: relative; */
	overflow-x: hidden;}
  

/* 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: roboto;
  src: url(Fonts/Roboto/Roboto-Regular.ttf);
  font-weight: lighter !important;	}
@font-face {
  font-family: Sofia;
  src: url(Fonts/Sofia_Sans/SofiaSans-VariableFont_wght.ttf);}

  h1{
    font-family: 'Univers';
    font-size: 110pt;
    font-weight: bold;

    color: white;

    text-transform: uppercase;
    letter-spacing: 5px;

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

    color: white;

    text-transform: uppercase;

    letter-spacing: 2.5px;

    margin: 0;}
  h3{
    font-family: 'Magistral';
    font-size: 29px;
    font-weight: bold;
    
    text-align: center;

    color: white;}
  h4{
    font-family: 'Univers';
    font-size: 32px;
    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);}
  p{
    font-family: "titillium-web", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #fff}

    a{
      text-decoration: none;
    }
  .splash{
    height: calc(100vh - 100px);
    width: 100vw;

    background-image: url('Images/Home/splash-bg.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

    margin-top: 90px; 

    position: relative;}

    #particles-js {
      height: 100%;
      width: 100vw;;

      position: absolute;
      top:0;
      left: 0;
    }

    .splash-image{
    height: 110vh;
      position: absolute;
      right: 100px;
      top: -50px;}
    .splash-content{
      width: 80%;
        max-width: 1440px;

      height: 100%;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;

      margin: auto;
    
      position: relative;
      z-index: 99;}
      .splash-content img{
        width:350px;
        height:auto;
      margin-left: -15px;}
        .splash-content  h3{
          color: #7E7E7E;
          margin: 0; 
        margin-bottom: 45px; }

  .wrapper{
    width: 80%;
      max-width: 1440px;

    margin: auto;  }
    .wrapper.intro{
      text-align:left;
    position: relative;
  z-index: 99;  }
    .wrapper.intro p{
      width: 50%;
      color: #fff;  }

    .home-banner{
      width: 100%;
      margin: 100px 0;  }

    .grid-container{
      display: flex;
      flex-direction: row;

      gap: 15px;

      flex-wrap: wrap;

      margin: 50px 0;  }
      .grid-container div{
        flex: 1 0 22%;

        min-height: 200px;
        min-width: 200px;  }

    .swiper {
      width: 100%;
      height: 650px;

      margin-bottom: 100px;  }
      .swiper-slide{
        background: #000;

        display: flex !important;
        flex-direction: row;
        gap: 0;

        border-radius: 10px;  }
        .swiper-slide-left{
          width: calc(100% / 3 * 2);
          height: 100%;

          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;  }
        .swiper-slide-right{
          width: calc(100% / 3 * 1);
          height: 100%;

          text-align: center;  }
          .swiper-slide-right img{
            height: 100%;
            margin: auto;  }

          .swiper-content{
            width: 80%;
            margin: auto;  }
            .swiper-content h2{
              position: relative;

              font-size: 64px;  }
              h2 span{
                background: #0069B4;
                padding: 4px 12px;
        
                font-size: 32px;
        
                position: relative;
        
                top: -10px;
        
                border-radius: 5px;  }        
            .swiper-content h3{
              text-align: left;
              font-size: 22px;

              margin: 0;
              margin-bottom: 10px;  }
            .swiper-content img{
              width: 200px;}
            .row{
              display: flex;
              flex-direction: row;
              align-items: center;
              gap: 50px;

              flex-wrap: wrap;  }
              .uses{
                width: auto !important;
                height: 35px;    }
                .icon-row{
                  display: flex;
                  flex-direction: row;
                  justify-content: flex-start;
                  align-items: center;

                  gap: 25px;

                  width: 100%;

                  margin-top: 50px;  }
                  .icon{
                    height: auto;
                    width: auto;
                    text-align: center;  }
                    .icon img{
                      height: 50px;
                      width: auto;
                      margin: auto;  }
                    .icon p {
                      margin: 0;  }
                    span img{
                    width: 40px !important;
                    color: #fff;
                    position: relative;
                    top: 7.5px;    }

      :root {
        --swiper-navigation-size: 34px !important;
        color: #fff;  }
      .swiper-button-next, .swiper-button-prev{
        color: #fff !important;  }
      .swiper-pagination-bullet{
        background: #7E7E7E !important;  }
      .swiper-pagination-bullet-active{
          background: #0069B4 !important;  }


    .table-wrap{
      display: block;

      overflow: scroll;

      width: 100%;

      margin-bottom: 100px;    }
      table { 
        table-layout:fixed;
        border-spacing: 0; 

        font-family: "titillium-web", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: #fff;
        overflow-x:scroll;

        width: 100%;  }
        .header-row{
          background: #0069B4;
          font-family: univers;
          font-size: 32px;
          letter-spacing: 2.5px;  }
          .header-row th:first-of-type{
            text-align: left;  }
          tr td:first-of-type{
            text-align: left;  }
          th,td{
            border: 0.1px solid rgba(126, 126, 126, 0.25);
            padding: 5px;

            vertical-align: top;
            text-align: center;  }
          tr.split{
            box-shadow: 0 -1px 0 #fff;  }
          td h3{
            font-family: 'Univers' !important;
            font-size: 22px;
            font-weight: bold;
            letter-spacing: 1px;
            text-transform: uppercase;

            color: white;
            margin: 0;

      text-align: left;    }
 
  @media screen and (max-width: 999px){
    h1{
      font-family: 'Univers';
      font-size: 62px;
      font-weight: bold;
    
      color: white;
    
      text-transform: uppercase;
      letter-spacing: 5px;
    
      margin: 0;}
    p{
      font-size: 12px;  }

      
    .splash{
      height: calc(100vh - 150px);
      width: 100vw;
    
      background-image: url('Images/Home/splash-bg.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    
      margin-top: 90px; 
    
      position: relative;
      padding-bottom: 50px;}
      .splash-image{
        height: 90vh;
        position: absolute;
        right: 0px;
        top: 0px;  }
      .splash-content{
        width: 80%;
          max-width: 1440px;
    
        height: 100%;
    
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
    
        margin: auto;
      
        position: relative;
        z-index: 99;

        margin-bottom: 50px;  }
    
        .splash-content img{
          width:250px;
          height:auto;
          margin-left: -15px;}
          .splash-content  h3{
            color: #7E7E7E;
            margin: 0;
            font-size: 16px;
            text-align: left;  }

          .wrapper{
            width: 90%;
            margin: auto;  }     
            .wrapper.intro{
              text-align:left;
              margin-top: 50px;  }
              .wrapper.intro p{ 
                width: 100%;  }

    .grid-container div {
            flex: 1 0 22%;
            min-height: unset;
            min-width: 200px;    }

    .home-banner {
      width: 100%;
      margin: 50px 0;  }

    .swiper {
      width: 100%;
      height: 100%;
      margin-bottom: 100px;  }

      .swiper-slide{
        background: #000;

        display: flex !important;
        flex-direction: column-reverse;
        gap: 0;

        border-radius: 10px;  }
        .swiper-slide-left{
          width: calc(100%);
          height: 100%;
  
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;  }
        .swiper-slide-right{
          width: calc(100%);
          height: 100%;
  
          text-align: center;  }  
          .swiper-slide-right img{
            width: 30%;
            margin: auto;  }  
          .swiper-content{
            width: 70%;
            margin: auto;

            padding-bottom:  50px;  }      
            .swiper-content h2{
              position: relative;
      
              font-size: 38px;  }
            .swiper-content h3{
              text-align: left;
              font-size: 12px;
      
              margin: 0;
              margin-bottom: 10px;  }
        
      h2 span{
        background: #0069B4;
        padding: 4px 12px;

        font-size: 24px;

        position: relative;

        top: -5px;

        border-radius: 5px;  } 
      .swiper-content img{
        width: 200px;}
        .icon-row{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;

          gap: 10px;

          width: 100%;

          margin-top: 25px;  }
          .icon{
            height: auto;
            width: auto;

            text-align: center;  }
            .icon img{
              height: 30px;
              width: auto;
              margin: auto;  }       
            .icon p {
                margin: 0;
                font-size: 10px;  }
              span img{
                width: 30px !important;
                color: #fff;
                position: relative;
                top: 5px;  }
      

    .table-wrap{
      display: block;

      overflow: scroll;

      width: 100%;
    }
    table { 
      table-layout:fixed;
      border-spacing: 0; 
    
      font-family: "titillium-web", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16px;
      color: #fff;
      overflow-x:scroll;
    
      width: auto;
    }
    .header-row{
      background: #0069B4;
      font-family: univers;
      font-size: 24px;


      letter-spacing: 2.5px;
    }

    .header-row th:first-of-type{
      text-align: left;
    }

    tr td:first-of-type{
      text-align: left;
    }

    th,td{
      border: 0.1px solid rgba(126, 126, 126, 0.25);
      padding: 5px;

      vertical-align: top;
      text-align: center;
    }

    tr.split{
      box-shadow: 0 -1px 0 #fff;
    }

    td h3{
      font-family: 'Univers' !important;
      font-size: 18px;
      font-weight: bold;
      letter-spacing: 1px;
      text-transform: uppercase;
  
      color: white;
      margin: 0;

      text-align: left;}
  }
  @media screen and (max-width: 499px){  
    .swiper {
      width: 100%;
      height: 100%;
      max-height: 90vh;
      margin-bottom: 100px;  }
  }
  @media screen and (max-width: 399px){
  
    .swiper {
      width: 100%;
      height: 100%;
      max-height: 90vh;
      margin-bottom: 100px;  }
      .swiper-content h2{
        position: relative;

        font-size: 32px; }         
        h2 span{
          background: #0069B4;
          padding: 4px 12px;
  
          font-size: 18px;
  
          position: relative;
  
          top: -5px;
  
          border-radius: 5px;}
      .swiper-content h3{
        text-align: left;
        font-size: 10px;

        margin: 0;
        margin-bottom: 10px;  }               
        span img{
          width: 30px !important;
          color: #fff;
          position: relative;
          top: 7.5px;  }
        
        .row {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;
      }

      .swiper-slide-right img {
        width: 20%;
        margin: auto;
    }

    h4 {
      font-size: 18px;
    }
  }