body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	font-family: "Open Sans", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
  user-select: none;
}


h4,
.h4 {
  font-size: 1.125em;
 
}
p,
h1,
.h2 ,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-top: 5px;
  margin-bottom: 5px;
}
a,
p,
small,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: inherit;
  font-weight: normal;
  line-height: 1.1;
  color: white;
}

a{
    color: white ;
    text-decoration: none;
    font-size: 14px;
}
a:hover{
    color: #f7da2a;
}

/*  */
#rainy_day_canvas {
    bottom: 0;
    height: 100%;
    left: 0;
    min-height: 640px;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
  }
  
  #rainy_day_canvas img {
    width: 100%;
  }

  /*  */
  .stripes {
    /* (28 * 9) - (28 /2 ) = 238 */
    width: 238px;
    /* width: 85%; */
    background: repeating-linear-gradient(
      /* 45deg, */
      90deg,
      transparent ,
      transparent 10px,
      rgba(247, 218, 42, 1) 10px,
      rgba(247, 218, 42, 1) 24px
    );
    height: 20px;
    background-size: 28px 28px; 
    animation: progress-bar-stripes 2.5s linear infinite ;
    transform: skewX(45deg);
  }
  
  
  /* 
  sumber : https://codepen.io/uimax/pen/KgdgGa
  Progress bar Striped Animation
  */
  @keyframes progress-bar-stripes {
    from  { background-position: 28px 0; }
    to    { background-position: 0 0; }
  }
  /* iPad and mini pc 1200px+. */
  @media only screen and (max-width: 1200px) {
    canvas {
      height: 100%;
    }
  }