/* Diagonal stacked paper effect */
.paper {
background: whitesmoke;
width: 80%;
margin: auto;
position: relative;
top: 15px;
height: auto;
padding: 0 0 2.5em 0;
margin-bottom: 3.5em;
padding: 23px;

border-radius: 5px;
}

.paper,
.paper::before,
.paper::after {
box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
border-radius: 5px;

}

.paper::before,
.paper::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #eee;
}

.paper::before {
left: 7px;
top: 5px;
z-index: -1;
}

.paper::after {
left: 12px;
top: 10px;
z-index: -2;
}

/* .box-kata{
  background: #fff;
  width: 90%;
  margin: auto;
  position: relative;
  top: 25px;
  height: auto;
  padding: 0 0 2.5em 0;
  margin-bottom: 3.5em;

  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
} */

.box-kata {
  width:90%;
  padding:1em 1.5em;
  margin:2em auto;

  /* background:red; */
  background:linear-gradient(whitesmoke, whitesmoke 10%, whitesmoke, whitesmoke, whitesmoke 80%);
  background:-webkit-linear-gradient(whitesmoke, whitesmoke 10%, whitesmoke, whitesmoke, whitesmoke 80%);
  background:-moz-linear-gradient(whitesmoke, whitesmoke 10%, whitesmoke, whitesmoke, whitesmoke 80%);
  background:-o-linear-gradient(whitesmoke, whitesmoke 10%, whitesmoke, whitesmoke, whitesmoke 80%);
  background:-ms-linear-gradient(whitesmoke, whitesmoke 10%, whitesmoke, whitesmoke, whitesmoke 80%);
  box-shadow: 0 1.2px #ccc, -2.5px 1.5px #ccc;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.box-kata:before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  border-width:0 45px 45px 0;
  border-radius: 0 0 0 4px;
  border-style:solid;
  border-color: #fff #fff #ccc #ccc;
  background-color:whitesmoke;
  box-shadow:0 1px 2px #aaa,-1px 1px 2px #aaa;
  -webkit-box-shadow:0 1px 2px #aaa,-1px 1px 2px #aaa;
  -moz-box-shadow:0 1px 2px #aaa,-1px 1px 2px #aaa;
  display:block;
  width:0; /* Firefox 3.0 damage limitation */
}
.box-kata {
  position:relative;
  color:#333;
  overflow:hidden;
  padding: 20px;
  border-radius: 5px;
}

.box-kata .rounded {
  font-weight: bold;
  font-size:7px;
  position:absolute;
  top:21px;
  right:20px;
  transform: rotate(42deg);
}
.box-kata .rounded::before {
  content: "AOM";
  color:#824710;
  font-style: oblique;
}

.box-kata img{
  width: 100%;
  height: 290px;
  border-radius: 7px;
  /* opacity: 0.7!important; */
  /* filter: blur(0px) grayscale(0); */
}

@media (max-width: 500px) {
  .box-kata img{
    max-width: 100%;
    height: 180px;
  }
}


:root {
  --loading-grey: #ededed;
}

.card_text {

  width:90%;
  /* padding:1em 1.5em; */
  padding: 1.5em 0 1.5em 0;
  margin:2em auto;

  /* width: 320px; */
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, .12);
}

.image_card {
  height: 290px;
}

.image_card img {
  display: block;
  width: 100%;
  height: inherit;
  object-fit: cover;
  border-radius: 6px;
  margin: 10px 0 0 0;
  filter: brightness(0.9);
}

@media (max-width: 500px) {
  .card_text {
    padding: 1.8em 0 0 0;
  }

  .image_card {
    height: 180px;
  }

  .image_card img {
    margin: 0;
    filter: brightness(0.8);
  }
}

.content_card {
  padding: 2rem 1.8rem;
}

.content_card h4 {
  margin: 0 0 1rem;
  font-size: 2rem;
  line-height: 1.5rem;
  padding: 10px;
  font-weight: bold;
}

.description_card {
  font-size: 1.2rem;
  line-height: 1.5rem;
  margin: 10px 0 0 0;
  padding: 10px;
  /* font-weight:bold; */
  letter-spacing:1px;
}

.loading_card .image_card,
.loading_card h4,
.loading_card .description_card {
  background-color: var(--loading-grey);
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, .5) 50%,
    rgba(255, 255, 255, 0) 60%
  ) var(--loading-grey);
  background-size: 200% 100%;
  background-position-x: 180%;
  animation: 1s loading ease-in-out infinite;
}

@keyframes loading {
  to {
    background-position-x: -20%;
  }
}

.loading_card h4 {
  min-height: 1.6rem;
  border-radius: 4px;
  animation-delay: .05s;
}

.loading_card .description_card {
  min-height: 4rem;
  border-radius: 4px;
  animation-delay: .06s;
}

.mempelai-fotobox{
  padding: 0 30px 0 30px;
  margin: 20px;
}

.mempelai-fotobox img{
  border-radius: 15px;
  filter: drop-shadow(2px 4px 6px #333);
  opacity: 0.9;
}

.box-mempelai{
  background: rgba(254, 246, 237, 0.25);
  width: 85%;
  margin: auto;
  position: relative;
  top: 15px;
  /* bottom: -30px; */
  height: auto;
  padding: 9px 0 0.1em 0;
  margin-bottom: 3.5em;

  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.fz-fbx-1{
  font-size: 13px;
}
.fz-fbx-2{
  font-size: 13px;
}

/* responsive hp */
@media (max-width: 400px) {
  .fz-fbx-1{
    font-size: 11px;
  }
  .fz-fbx-2{
    font-size: 11px;
  }
}

@media(min-width:401px) and (max-width:465px){
  .fz-fbx-1{
    font-size: 13px;
  }
  .fz-fbx-2{
    font-size: 13px;
  }
}