*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
  
  background-color: #0F4C75;
   
  justify-content: center;
   
  align-items: center;
  background:  url(../img/4.jpg);
  z-index: 9999;
     
     
  width: 100%;
 
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed ;
  background-size: cover;
     cursor: pointer;
} 
a:hover{
  text-decoration:none;
}


.article-card{
  border-radius: .25rem;
  -webkit-box-shadow: 0 0 0.25rem 0 rgba(35,55,75,.4);
    box-shadow: 0 0 0.25rem 0 rgba(35,55,75,.4);
    margin-bottom: 1rem;
    transition: all 0.2s;
  -webkit-transition: all 0.2s; 
  box-shadow:1px 1px 1000px 1000px rgba(0,0,0,0.25), 1px 16px 25px -2px rgba(0,0,0,0.5);
  background: #8e719b; /* Old browsers */
background: -moz-linear-gradient(135deg, rgba(206,151,255,0.8) 0%,rgba(187,155,255,0.8) 51%,rgba(14,144,255,0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(135deg, rgba(206,151,255,0.8) 0%,rgba(187,155,255,0.8) 51%,rgba(14,144,255,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(206,151,255,0.8) 0%,rgba(187,155,255,0.8) 51%,rgba(14,144,255,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e719b', endColorstr='#247592',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 position:relative;opacity: 1; cursor: pointer;margin-top: 50px;
}

.article-card-bar
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 1rem;
    border-bottom: 1px solid #e5e5e5;opacity: 1; 
}
 

.article-card-body {
    padding: .5rem 1rem;opacity: 1;
}

.article-card-title {
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
}

.article-project-time {
    -ms-flex-item-align: stretch;
    align-self: stretch;
    padding: .25rem 0 0;
    font-weight: 400;
    font-size: .875rem;
    color: #848484;
}

 .article-info-reward-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 12px;
    margin-bottom: .25rem;
}

.article-info-reward[rel=public] {
    color: #00b482;
}

.article-card-desciption {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #848484;
    font-size: .875rem;
}

.article-card-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-left: .5rem;
    font-size: 1rem;
    color: #ff6666;
    padding: 0 0 .5rem .5rem;
}




.timer h3 {
    font-weight: 700;
    font-size: 22px;
  }
  
  
   

.content {
  text-align: left;
    }
  .content ul {
    padding: 0;
    margin: 0;
    font: 16px Arial; }
    .content ul li {
      list-style: none; }
      .content ul li a {
        color: #12C; }
      .content ul li span {
        display: block;
        width: 100%;
        margin-bottom: 2px; }
        .content ul li span:nth-child(2) {
          margin-bottom: 10px; }
          .content ul li span:nth-child(2) a {
            color: #093;
            text-decoration: none; }
        .content ul li span:nth-child(3), .content ul li span:nth-child(4) {
          font-size: 14px; }
  .content .text {
    border: 1px solid #7ec6fd;
    float: left;
    width: 100%;
    margin-bottom: 10px; }
    .content .text h2 {
      position: relative;
      float: left;
      font-size: 100%;
      font-weight: normal;
      padding: 0;
      margin: 5px 10px; }
      .content .text h2 span {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        background: transparent;
        /* same as background */
        border-left: 0.1em solid black;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-animation: typing 1s steps(20, end), blink-caret 1s step-end infinite;
        -moz-animation: typing 1s steps(20, end), blink-caret 1s step-end infinite; }

 
 
/* Telegram Sticky Chat Button Widget */

:root {

  --warna-background: #4dc247;

  --warna-bg-chat: #f0f5fb;

  --warna-icon: #fff;

  --warna-text: #505050;

  --warna-text-alt: #989b9f;

  --lebar-chatbox: 330px;

  }

  .sticky-button{

  display: flex;

  align-items: center;

  justify-content: center;

  position: absolute;

  right: 44px;

  bottom: 24px;

  width: 41px;

  height: 44px;
  z-index: 9999;
    

  
  background-color: #fefefe;

  border-radius: 14%;
  
 
  

  }

  .sticky-button a, .sticky-button label{display:flex;align-items:center; cursor: pointer; width:85px;height:65px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}

  .sticky-button a svg, .sticky-button label svg{margin:auto; margin-top: 21px; fill:#0091EA}

  .sticky-button label svg.svg-2{display:none}

  .sticky-chat{position:fixed;bottom:170px;right:20px;width:35%;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;

  z-index:21;opacity:0;visibility:hidden;line-height:normal}

  .sticky-chat .chat-content{border-radius:10px; background-color:#fff;   box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden}

  .sticky-chat .chat-header{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:#0091EA;overflow:hidden}

  .sticky-chat .chat-header:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,4,.000);border-radius:70px 0 5px 0;}

  .sticky-chat .chat-header svg{width:35px;height:35px;flex:0 0 auto;fill:var(--warna-icon)}

  .sticky-chat .chat-header .title{padding-left:15px;font-size:14px;font-weight:600;font-family:'Roboto', sans-serif;color:var(--warna-icon)}

  .sticky-chat .chat-header .title span{font-size:11px;font-weight:400;display:block;line-height:1.58em;margin:0;}

  .sticky-chat .chat-text{display:flex;flex-wrap:wrap;margin:5px 20px;font-size:16px;color:var(--warna-text)}

  .sticky-chat .chat-text span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:var(--warna-bg-chat);border-radius:3px 15px 15px}

  .sticky-chat .chat-text span:after{content:'Just now';display:inline-block;position:relative; bottom:-5px; left:-4px;margin-left:2px;font-size:9px;color:var(--warna-text-alt)}

  .sticky-chat .chat-text span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}

  .sticky-chat .chat-text span.typing:after, .chat-menu{display:none}

  .sticky-chat .chat-text span.typing svg{height:14px;fill:var(--warna-text-alt)}

  .sticky-chat .chat-button{display:flex;align-items:center;margin-top:5px;padding:12px 20px;border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden;font-size:12px;color:var(--warna-text)}

  .sticky-chat .chat-button svg{width:20px;height:28px;fill:var(--warna-text-alt);margin-left:auto;transform:rotate(40deg);-webkit-transform:rotate(40deg)}

  .chat-menu:checked + .sticky-button label{-webkit-transform: rotate(360deg);transform: rotate(360deg);}

  .chat-menu:checked + .sticky-button label svg.svg-1{display:none}

  .chat-menu:checked + .sticky-button label svg.svg-2{display:table-cell}

  .chat-menu:checked + .sticky-button + .sticky-chat{

  bottom: 24px;

  right: 101px;

  opacity: 1;

  visibility: visible;

  } 

  .schat { outline: none ;width: 71%; font-size: 15px; margin-left: 21px; bottom: 7px;   margin-right:auto; padding:10px 10px 10px 15px; background-color:var(--warna-bg-chat);border-radius:15px 5px 1px;  position:absolute;    border:none;color:#383737;font-weight:bold;} 

  .blink_me {

  animation: blinker 1.3s linear infinite;

  }

  @keyframes blinker {

  50% {

  opacity: 0;

  }
}


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

  .sticky-button a, .sticky-button label{display:flex;align-items:center;width:85px;height:55px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}

  .sticky-button a svg, .sticky-button label svg{margin:auto; margin-top: 17px; fill:#0091EA}

  .sticky-button label svg.svg-2{display:none}

  .sticky-chat{position:fixed;bottom:170px;right:20px; width:77%;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;

  z-index:21;opacity:0;visibility:hidden;line-height:normal}

  .sticky-chat .chat-content{border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden}

  .sticky-chat .chat-header{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:#0091EA;overflow:hidden}

  .sticky-chat .chat-header:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,4,.000);border-radius:70px 0 5px 0;}

  .sticky-chat .chat-header svg{width:35px;height:35px;flex:0 0 auto;fill:var(--warna-icon)}

  .chat-menu:checked + .sticky-button + .sticky-chat{

    bottom: 14px;
  
    right: 64px;
  
    opacity: 1;
  
    visibility: visible;
  }  


  .sticky-button{

    display: flex;
  
    align-items: center;
  
    justify-content: center;
  
    position: absolute;
  
    right: 14px;
  
    bottom: 14px;
  
    width: 41px;
  
    height: 44px;
      
  
    
    background-color: #fefefe;
  
    border-radius: 14%;
    z-index: 9999;
  
  }
        }
  @media only screen and (max-width: 692px) {
	 
    .counter {
        display: flex;
        max-width: fit-content;
        gap: 0.75em;
        justify-content: center;
        align-items: center;
        color: white;
        font-family: "Roboto", sans-serif;
        font-weight: 700;
      }
      .counter__box {
        text-align: center;
        background: blue;
        width: 69px;
        height: 83px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0.25rem;
      }
      
      .counter__time {
        font-size: 28px;
        margin: 0;
        margin-top: -10px;
        padding: 0;
        font-weight: bold;
      }
  /* HELPERS */
  
  .dots {
    font-size: 42px;
    color: #002e46;
    margin: -0.75rem;
    padding: 0;
  }
  .counter__duration {
    font-size: 14px;
    text-transform: capitalize;
    margin: 0;
    padding: 0;
    color: #eee;
  }
  
  .exp {
    font-size: 52px;
    font-family: "Roboto", sans-serif;
  }
  
  .black-white {
    background: linear-gradient(
      to top,
      #002e46 0%,
      #002e46 50%,
      #4d707f 50%,
      #4d707f 100%
    );
  }
  
  .sky-blue {
    background: linear-gradient(
      to top,
      #002e46 0%,
      #002e46 50%,
      #4d707f 50%,
      #4d707f 100%
    );
  }
  


 

   }

   @media only screen and (min-width: 1191px) and (max-width: 2192px) {
	 
    .counter {
        display: flex;
        max-width: fit-content;
        gap: 0.75em;
        justify-content: center;
        align-items: center;
        color: white;
        font-family: "Roboto", sans-serif;
        font-weight: 700;
      }
      .counter__box {
        text-align: center;
        background: blue;
        width: 119px;
        height: 123px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0.25rem;
      }
      
      .counter__time {
        font-size: 48px;
        margin: 0;
        margin-top: -11px;
        padding: 0;
        font-weight: bold;
      }
  /* HELPERS */
  
  .dots {
    font-size: 52px;
    color: #002e46;
    margin: -0.75rem;
    padding: 0;
  }
  .counter__duration {
    font-size: 24px;
    text-transform: capitalize;
    margin: 0;
    padding: 0;
    color: #eee;
  }
  
  .exp {
    font-size: 52px;
    font-family: "Roboto", sans-serif;
  }
  
  .black-white {
    background: linear-gradient(
      to top,
      #002e46 0%,
      #002e46 50%,
      #4d707f 50%,
      #4d707f 100%
    );
  }
  
  .sky-blue {
    background: linear-gradient(
      to top,
      #002e46 0%,
      #002e46 50%,
      #4d707f 50%,
      #4d707f 100%
    );
  }
  


 

   }