.ketikan
    {
      width: 100%;
      white-space:nowrap;
      overflow:hidden;
      animation: ketik 3s steps(50, end);
    }

    @keyframes ketik{
      from { width: 0; }
    }

    @-webkit-keyframes ketik{
      from { width: 0; }
    }
 

    @media (min-width: 576px) {
      .intro{
        font-size: 100%;
      }

      .typewrite{
        font-size: 25px;
      }
      .quote{
        font-size: 12px;
      }
    }
    
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
    .float{
      position:fixed;
      width:60px;
      height:60px;
      bottom:60px;
      right:80px;
      background-color:#25d366;
      color:#FFF;
      border-radius:50px;
      text-align:center;
      font-size:30px;
      z-index:100;
    }
    .my-float{
      margin-top:16px;
    }
    .gambarsorot img{
      -webkit-transform:scale(0.9);
      -moz-transform:scale(0.9);
      -o-transform:scale(0.9);
      -webkit-transition-duration: 0.3s;
      -moz-transition-duration: 0.3;
      -o-transition-duration: 0.3s;
      margin: 0 0px 0px 0;
    }
    .gambarsorot img:hover{
      -webkit-transform:scale(1.0);
      -moz-transform:scale(1.0);
      -o-transform:scale(1.0);
      box-shadow:0px 0px 5px #3c8dbc;
      -webkit-box-shadow:0px 0px 0px #3c8dbc;
      -moz-box-shadow:0px 0px 0px #3c8dbc; 
    }