/* CSS ERLONLINE MULAI 2021*/
.fs14{
	font-size: 14pt;
	font-family: Lato;
}
.fs16{
	font-size: 16pt;
	font-family: Lato;
}
.parallelogram {
	display: flex;
	justify-content: center;
	align-items: center;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	width: 285px;
	height: 50px;
	border: none;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	font: normal 100%/normal Arial, Helvetica, sans-serif;
	color: rgba(0,0,0,1);
	-o-text-overflow: clip;
	text-overflow: clip;
	/*-webkit-transform:    skewX(-20deg);
	transform:    skewX(-20deg);*/
}
.parallelogram > span {
	/*transform: skewX(20deg);*/
	align-items: center;
}
@media screen and (max-width: 768px) {
	#box_jenjang_sd{
		margin-left: 20px;
		margin-right: 20px;
	}
	#box_jenjang_smp{
		margin-left: 20px;
		margin-right: 20px;
	}
}

#box_jenjang, #box_jenjang_sd{
		background-color:#f0c778; 
		height:379px;
	}
#box_jenjang_smp{
	 background-color:#7fceef; 
	 margin-bottom:30px;
	 height:379px;
}
.jenjang2{
	/*background: #0c66ad;*/
	background: #1896d5ab;
	-webkit-box-shadow: 4px 5px 6px 0 #11516a ;
	box-shadow: 8px 10px 6px 0 #cbcaca ;
	text-align: center!important;
}
.teks_judul_jenjang{
	color:#fff;
	font-weight:bold;
	font-size:18px;
	font-family: Lato;
}
.ulbidstudi {
    display: block;
    list-style: none;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 20px;
	color:#000;
	text-align: left!important;
}
.libidstudi {
    display: list-item;
    text-align: -webkit-match-parent;
	margin-top:10px;
}
.libidstudi::before {
  content: "• ";
  color: #d2232a; /* or whatever color you prefer */
}

.bgsurvey{
	background: #df5816;
    position: absolute;
    top: -52px;
    left: -10px;
    padding: 5px 0px;
}

@media screen and (max-width: 768px) {
	
	.bgsurvey2 {
		background: #ff7a39;
		position: absolute;
		top: -58px;
		left: 10%;
		padding: 5px 0px;
	}
	.bgangket1 {
		background: #96cce4;
		position: absolute;
		top: -50px;
		left: 5%;
		padding: 5px 0px;
	}
	.logo_produk{
		 font-size:35px;
	}
	

}
@media (min-width: 992px) {

	.bgsurvey2{
		background: #ff7a39;
		position:absolute;
		top: -78px;
			left: 38%;
		 padding: 5px 0px;
	}
	.bgangket1{
		background: #96cce4;
		position:absolute;
		top: -51px;
			left: 5%;
		 padding: 5px 0px;
	}
	.logo_produk{
		 font-size:50px;
	}
}

#box_biru{
	background-color:#fdfdfc;

	border-radius: 10px 10px 10px 10px;
}
.setkotakangket{
	padding:35px 0px; 
	margin:20px 0px 30px 0px;
	
	
}
.box_angket {
	display: flex;
	justify-content: center;
	align-items: center;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	width: 100%;
	border: none;
	color:#fff;
	border-radius: 10px 10px 0px 0px;
	font: normal 100%/normal Arial, Helvetica, sans-serif;

	-o-text-overflow: clip;
	text-overflow: clip;
}
.posisisurvey{
	margin-top: 50px;
	    padding-bottom: 20px;
}
#imgicon{
	width:50px;
}
.teks_judul_app{
	font-weight:bold;
	font-size:30px;
	font-family: Lato;
}

@media (min-width: 992px) {

	#img_detail_elearn {
		height:330px;
		margin-top:30px;
		
		/*position: absolute;*/
		z-index: 1;
		/*margin-left: -60%;*/
	}
}
@media screen and (max-width: 768px) {

	#img_detail_elearn {
		width:300px;
		margin-bottom:10px;
	}
}

html {
  scroll-behavior: smooth;
}
	
.diagonal_right,.diabottomtoleft{
		position: relative;
		width: 100%;
		overflow: hidden;
		height:100%;
		background: url(../images/bgTop.jpg) center center no-repeat;
		/*background:url(../images/line2.png) center center no-repeat;*/
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
}
.diabottomtoleft:after{
	content: "";
	position: absolute;
	z-index: 1;
	pointer-events: none;
	bottom: 0;
	left: 0;
	width: 100%;
	/*height: 240px;*/
	/*background: url(../images/sliderL.png) center center no-repeat;*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	border-bottom: 150px solid white;
	border-left: 3000px solid transparent;
}


a {
  text-decoration: none;
  color: inherit;
}

.teks_judul_icon{
	font-weight:bold;
	font-size:18px;
	font-family: Lato;
}
.normal_box_voucher {
	display: flex;
	justify-content: center;
	align-items: center;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	width: 245px;
	border: none;
	color:#fff;
	border-radius: 10px 10px 0px 0px;
	font: normal 100%/normal Arial, Helvetica, sans-serif;

	-o-text-overflow: clip;
	text-overflow: clip;
}
.btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}
.ff{
	font-family: quicksand,sans-serif;
}
.kotak_data_katalog {
    padding: 0px 70px;
}
.card {
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px 0 rgb(43 43 43 / 10%), 0 11px 6px -7px rgb(43 43 43 / 10%);
    box-shadow: 0 0 5px 0 rgb(43 43 43 / 10%), 0 11px 6px -7px rgb(43 43 43 / 10%);
    border: none;
    margin-bottom: 30px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.card-list-perpus, .card-block {
    height: 100%;
}
.img_buku{
	max-height: 160px; 
	max-width: 100%;
}
.input-search {
    font-size: 16px;
    padding: 8px 20px ;
}
.kd_buku{
	font-size: 18px;
}
.jd_buku{
	font-size: 14px;
}

.plr5{
	 padding: 0px 5px ;
}
.plr10{
	 padding: 0px 10px ;
}
.plr20{
	 padding: 0px 20px ;
}
.p-t-b-20{
	padding:20px 0px;
}
.p20{
	padding:20px;
}
.m-10{
	margin:10px;
}

.m-t-b-20{
	margin:20px 0px;
}
.m-t-b-30{
	margin:30px 0px;
}
.m-t-5{
	margin-top: 5px;
}
.m-t-10{
	margin-top: 10px;
}
.m-t-20{
	margin-top: 20px;
}
.m-t-30{
	margin-top: 30px;
}
.m-b-10{
	margin-bottom: 10px;
}
.m-b-20{
	margin-bottom: 20px;
}
.m-b-30{
	margin-bottom: 30px;
}
.m-b-40{
	margin-bottom: 40px;
}
.m-b-50{
	margin-bottom: 20px;
}
.m-l-10{
	margin-left: 10px;
}
.m-r-10{
	margin-right: 10px;
}
#pagination-list {
    margin: auto;
}
#img_app{
		width: 80%;
		z-index: 1;
		margin-top:0px;
	}
.area-btn-back {
max-width: 50px;
}
.area-btn-back:hover {
    color: #3090f7;
}{
	
}	
/*css tombol interaktif katalog*/

.btkatalog {
  --y: -25;
  --x: 0;
  --rotation: 0;
  --speed: 2;
  --txt: "Lihat Katalog Di Sini";
  --padding: 1rem 1.25rem;
  cursor: pointer;
  padding: var(--padding);
  color: transparent;
  font-weight: bold;
  font-size: 1.25rem;
  transition: background 0.1s ease;
  background: #344da1;
  border-radius:30px;
  outline-color: hsl(var(--hue), 100%, 80%);
  -webkit-animation-name: flow-and-shake;
          animation-name: flow-and-shake;
  -webkit-animation-duration: calc(var(--speed) * 1s);
          animation-duration: calc(var(--speed) * 1s);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.btkatalog:after {
  content: var(--txt);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--padding);
  color: #fff;
}
.btkatalog:hover {
  background: hsl(var(--hue), 100%, 40%);
  --speed: 0.1;
  --rotation: -1;
  --y: -1;
  --x: 1;
  --txt: "Klik sekarang!";
}
.btkatalog:active {
  --speed: 4;
  --x: 0;
  --y: 5;
  --rotation: 0;
  --txt: "Katalog eBook";
  background: hsl(var(--hue), 100%, 30%);
}
.button__wrap {
  position: relative;
}
.button__shadow {
  position: absolute;
  border-radius: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #f29b5d;
  -webkit-animation: shadow 2s infinite ease-in-out;
          animation: shadow 2s infinite ease-in-out;
  z-index: -1;
}
@-webkit-keyframes shadow {
  0%, 100% {
    transform: scaleX(1);
    opacity: 1;
  }
  50% {
    opacity: 0.2;
    transform: scaleX(0.25);
  }
}
@keyframes shadow {
  0%, 100% {
    transform: scaleX(1);
    opacity: 1;
  }
  50% {
    opacity: 0.2;
    transform: scaleX(0.25);
  }
}
@-webkit-keyframes flow-and-shake {
  0%, 100% {
    transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
  }
  50% {
    transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
  }
}
@keyframes flow-and-shake {
  0%, 100% {
    transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
  }
  50% {
    transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
  }
}

/*css tombol interaktif katalog*/
.detail_pr {
    font-size: 18px;
    font-family: Lato;
}
.mb-3 {
    margin-bottom: 1rem!important;
}
.form-control {
    border-radius: 25px;
}