.example1 {
    border: 1px solid gray;
    padding: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #272a30;
    border-bottom-color: transparent;
    color: #f0d013;
    font-size: .800rem;
    
  }
  
  .example2 {
    border: 1px transparent;
    border-top-color: transparent;
  
    
  }
  .example3 {
    border: 1px solid gray;
    border-top-color: transparent;
     border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    
  }
  
  
  .marquee {
   height: 30px;	
   overflow: hidden;
   position: relative;
   background: #b31013;
   color: #fff;
   font-weight:bold;
   font-size:14px;
   border: 1px #b31013;
  }

  .value-btn{
      border-color:#24d9af !important;
      color: #24d9af;
  }

  .value-btn:hover{
      background: #24d9af !important;
      color: #fff;
  }

  .btn-success{
      background: #009900;
  }

  .marquee p {
   position: absolute;
   width: 100%;
   height: 100%;
   margin: 0;
   line-height: 30px;
   text-align: center;
   /* Starting position */
   -moz-transform:translateX(100%);
   -webkit-transform:translateX(100%);	
   transform:translateX(100%);
   /* Apply animation to this element */	
   -moz-animation: scroll-left 5s linear infinite;
   -webkit-animation: scroll-left 5s linear infinite;
   animation: scroll-left 5s linear infinite;
  }
  /* Move it (define the animation) */
  @-moz-keyframes scroll-left {
   0%   { -moz-transform: translateX(100%); }
   100% { -moz-transform: translateX(-100%); }
  }
  @-webkit-keyframes scroll-left {
   0%   { -webkit-transform: translateX(100%); }
   100% { -webkit-transform: translateX(-100%); }
  }
  @keyframes scroll-left {
   0%   { 
   -moz-transform: translateX(100%); /* Browser bug fix */
   -webkit-transform: translateX(100%); /* Browser bug fix */
   transform: translateX(100%); 		
   }
   100% { 
   -moz-transform: translateX(-100%); /* Browser bug fix */
   -webkit-transform: translateX(-100%); /* Browser bug fix */
   transform: translateX(-100%); 
   }
  }