body {
    margin:0;
    padding:0;
    height:100vh;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s;
  }
  
  /* Canvas */
  
  #particles-js {
    height:100%;
    background:#042531;
    background-position:50% 50%;
   display: block;
  }
  
  .particles-js{
      position: relative;
      padding-top: 100px;
      z-index: 100;
  }
  
  /* Canvas */
  
  /* Logo */
  
  .logo-site{
      margin-bottom: -60px;
      /* padding-top: 60px; */
  }
  
  .logo {
    margin:0 auto;
    width:50%;
  }
  
  /* Logo */
  
  /* Title */
  
  .title{
      margin-top: 65px;
      padding-left: 40px;
      margin-bottom: 40px;
  }
  
  .title h3{
      color: #f7d34d;
      letter-spacing: 2px;
      font-size: 38px;
      font-style: normal;
     text-transform: uppercase;
  }
  
  /* Title */
  
  /* Subscriber-button */
  
  .subscribe-button {
    margin:0 auto;
    width:239px;
    display:inline-block;
    background:#042531 ;
    color:#fff;
    border:1px solid #fff;
    border-radius:30px;
    padding:8px 43px;
    text-transform:uppercase;
    transition:all 0.3s;
    text-shadow:none;
      letter-spacing: 3px;
      font-size: 17px;
      
  }
  
  /* Subscriber-button */
  
  /* Horizantal */
  
  .left-div{
      margin-right: -80px;
      margin-left: 80px;
  }
  .left-div hr{
      background-color: #2e2e39;
      color: #000;
  }
  .right-div{
      margin-left: -80px;
  }
  
  /* Horizontal */
  
  /* CopyRight */
  
  .copyRight{
      color: #dedede;
      font-size: 15px;
      margin-top: 10px;
      font-weight: normal;
      letter-spacing: 1px;
  }
  
  /* CopyRight */
  
  /* Canvas */
  
  .particles-js-canvas-el{
     /*  margin-top: -1323px; */
     position: absolute;
     top: 0;
  }
  
  /* Canvas */
  
  /* Social media */
  
  .social-icons{
      margin-top: 30px;
      margin-left: -30px;
      
  }
  
  .social-icons li{
      display: inline-block;
      margin-right: 7px;
  }
  
  
  .social-icons li a img{
      width: 25px;
      opacity: 0.7;
      transition: 0.5s ease-in-out;
  }
  
  .social-icons li a img:hover{
      opacity: 0.9;
  }
  
  /* Social media */
  
  /* Sub */
  
  .sub{
      display: none;
  }
  
  /* Subscribe */
  .subscriber{
      background-color: #fff;
      margin-left: 50px;
      padding: 20px 20px 40px 20px;
      margin-top: -420px;
  }
  /* Close */
  
  .subscriber .close{
      margin-bottom: 20px;
  }
  
  .subscriber .close img{
      width: 30px;
      height: 30px;
      float: right;
  }
  
  /* Close */
  
  .subscriber .subscribe-img{
      text-align: center;
      
  }
  .subscriber .subscribe-img img{
      width: 100px;
  }
  
  .subscriber .infos{
      
  }
  
  .subscriber .infos h2{
      font-size: 40px;
  }
  
  .subscriber .infos p{
      margin-bottom: 40px;
      font-size: 16px;
      color: #9e9e9e;
      padding: 0 70px;
      margin-top: 20px;
  }
  
  .subscriber .infos input{
      width: 400px;
      padding: 10px;
      border-radius: 2px;
      border: 1px solid #e8e8e8;
      border-bottom: 1px solid #d6d6d6;
      color: #949494;
  }
  
  .subscriber .infos button{
      display: block;
      width: 400px;
      margin: 0 auto;
      background-color: #1f2227;
      color: #fff;
      margin-top: 10px;
      padding: 10px 20px;
      border: none;
      border-radius: 2px;
      transition: all 0.3s;
      
  }
  .subscriber .infos button:hover{
      background-color: #f7d34d;
      color: #1f2227;
  }
  
  .container{
      display: table;
  }
  
  .container > div{
      display: table-cell;
      vertical-align: middle;
  }
  
  #particles-js{
      display: table;
      
  }
  .container{
      display: table-cell;
      vertical-align: middle;
      width: 100%;
      
  }
  hr{
      border:1px solid #264752;
  }
  /* Sub */
  
  /* Media */
  
  @media (max-width: 991px) {
  
       .title h3{
          font-size: 30px;
          
      }
      
      .logo-site{
          margin-bottom: -60px;
      }
      
      .subscriber{
          background-color: #fff;
          margin-left: 10px;
          padding: 20px 20px 40px 20px;
          margin-top: -320px;
      }
    /*   .right-div{
          margin-left: 10px;
      } */
  }
  
  
  @media (max-width: 767px) {
  
     
      .title h3{
          font-size: 25px;
          /* margin-top: 100px; */
      }
      
      .logo-site{
          margin-bottom: -40px;
      }
      
      .logo {
          margin:0 auto;
          width:100%;
      }   
      
      .subscriber{
          background-color: #fff;
          margin-left: 10px;
          padding: 20px 20px 40px 20px;
          margin-top: -289px;
      }
      .subscriber .infos input{
          width: 100%;
      }
      .subscriber .infos button{
          width: 100%;
      }
      .row.sub{
          /*margin-left: -4px;*/
          margin-right: -4px;
      }
      .subscriber .infos p{
          padding: 0 20px;
      }
      /* .particles-js{
          padding-top: calc(100% - 230px);
      } */
      .particles-js{
          padding-top:0;
          display: table-cell;
          vertical-align: middle;
      }
      .particles-js-canvas-el{
          display: none;
      }
      .subscribe-button{
          width: 100%;
          padding: 8px 15px;
      }
      .left-div{
          margin: 0;
      }
      .right-div{
          margin: 0;
      }
  }
  
  /* Media */