body {font-family: Arial, Helvetica, sans-serif;}

.judul17 {
  color: fff;
  border-radius: 5px 5px 0px 0px;
  font-size: 10px;
  text-align: left;
  margin-right: 5%;
  user-select: none;
  font-weight: bold;
}


.callout {
  position: fixed;
  bottom: 30%;
  margin-right: 12%;
  margin-left: 12%;
  width: 75%;
  opacity: 0.99;
  border-radius: 15%;
  z-index: 100;
  animation: fadeIn 3s; 
  animation-fill-mode: backwards;
 animation-delay: 1s;
  }

.callout-header {
  padding: 25px 15px;
  background: #555a000;
  font-size: 30px;
  color: white;
 
 
}

.callout-container {
  padding: 15px;
  background-color: #e03346;
  color: black
 border-radius:15px;padding: 5px;
border:5.5px solid #ccc;
  transition: box-shadow 100ms;
    z-index:100;

}

.closebtn {
  position: absolute;
  top: -2%;
  right: 10px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

.closebtn:hover {
  color: lightgrey;
  z-index:100;
}


.fade-in-image { 
 animation: fadeIn 1s;
  }

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 0.99; }
 
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 0.99; }

}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 0.99; }

}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 0.99; }

}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }

}