.pembungkus-konten .konten .pem-mod {
	display: none;
	position: fixed;
	top: 0px;
	background: #34343469;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	z-index: 1;
	animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.pembungkus-konten .konten .pem-mod.tampil-gal{
	display: block;
}
.pembungkus-konten .konten .pem-mod .pem-mod-detail{
	background: #f1f1f1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.pembungkus-konten .konten .pem-mod .pem-mod-detail .pem-mod-konten{
	background: whitesmoke;
	padding: 10px;
	border-radius: 2px;
}
.pembungkus-konten .konten .pem-mod .pem-mod-detail .pem-mod-konten p{
	font-size: 12px;
}
.tutupmod ion-icon{
	color: white;
	position: absolute;
	top: 40px;
	left: 40px;
	font-size: 40px;
	text-shadow: 0 4px 5px rgba(0,0,0,0.15);
	transition: 0.5s;
}
.tutupmod ion-icon:hover{
	color: red;
	transform: translateY(-5px);
	text-shadow: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 7px 8px -4px rgba(0, 0, 0, 0.2);
}

@keyframes unfoldIn {
	0% {
		transform: scaleY(0.005) scaleX(0);
	}
	50% {
		transform: scaleY(0.005) scaleX(1);
	}
	100% {
		transform: scaleY(1) scaleX(1);
	}
}

.toggle{
      cursor: pointer;
    }
    .pem-mod{
      display: none;
      position: fixed;
      top: 0px;
      background: #34343469;
      width: 100%;
      height: 100%;
      top: 0%;
      left: 0%;
      z-index: 10;
      animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    .pem-mod.tampil-gal{
      display: block !important;
    }
    .pem-mod .pem-mod-detail{
      background: #f1f1f1;
      display: flex;
      justify-content: center;
      width: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      align-items: flex-start;
    }
    .pem-mod .pem-mod-detail .pem-mod-konten{
      background: whitesmoke;
/*      padding: 10px;*/
      border-radius: 2px;
      width: 50%;
    }

    .pem-mod .pem-mod-detail .pem-mod-konten h2{
      background: #3F51B5;
      padding: 3px 10px;
      font-size: 20px;
      letter-spacing: 2px;
      width: 100%;
      color: white;
    }

    .pem-mod .pem-mod-detail .pem-mod-konten p{
      font-size: 14px;
      padding: 10px;
    }
    .pem-mod .pem-mod-detail .pem-mod-konten span{
      font-size: 12px;
      padding: 10px;
      color: #505050e6;
      float: right;
    }
    .tutupmod ion-icon{
      color: white;
      position: absolute;
      top: 40px;
      left: 40px;
      font-size: 40px;
      text-shadow: 0 4px 5px rgba(0,0,0,0.15);
      transition: 0.5s;
    }
    .tutupmod ion-icon:hover{
      color: red;
      transform: translateY(-5px);
      text-shadow: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 7px 8px -4px rgba(0, 0, 0, 0.2);
    }

    @keyframes unfoldIn {
      0% {
        transform: scaleY(0.005) scaleX(0);
      }
      50% {
        transform: scaleY(0.005) scaleX(1);
      }
      100% {
        transform: scaleY(1) scaleX(1);
      }
    }