/* ADMIN ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.li-admin {
	border-radius: 50px;
	box-shadow: 0px 3px 6px #2929291A;
	opacity: 1;

	background-color: #F9E5BE;
	color: #292929;
	font-weight: bold;
	width: 90px;
	height: 40px;

	display: inline-block;
	float: left;
	position: relative;

	line-height: 40px;
	text-align: center;
}

.li-admin:hover {
	color: #292929;
	text-decoration: none;
}
/* ADMIN ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.catatan-eska { 
	display: block; 
	text-align: center; 
}

.judul-eska { 
	color: #9B4840; 
	font-weight: bold; 
}

.subjudul-eska { 
	color: #292929; 
	font-weight: bold; 
}

.link-eska {
	display: inline-block;
	max-height:25px;
	border-radius: 50px;
	background-color: #9B4840; 
	color: #F3EFE5;
	box-shadow: 0px 2px 6px #00000029;
	opacity: 1;
	min-width: 180px;
	text-align: center;
}

.link-eska:hover { 
	color: #F3EFE5; 
	font-weight: bold; 
	text-decoration: none; 
}

/* tag nav */
.eska-nav {
	width: 100%;
	padding-right: 10%;
	padding-left: 10%;
}

.eska-menu {
	line-height: 50px;
}

.eska-menu > a {
	color: #fffaee;
}
/*
.eska-menu > a:hover {
	font-weight: bold;
	font-size: 1.1em;
}*/

/*.eska-menu > a:active {
	font-weight: bold;
}*/

.eska-menu-usia {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100px;
	padding-top: 15px;
	z-index: 5;
	box-sizing: border-box;
}

.eska-menu-usia::before {
	border-radius: 100%;
	position: absolute;
	background-color: #9B4840;
	right: -200px;
	left: -200px;
	top: -350px;
	content: '';
	bottom: 0;
}

.eska-menu-usia ul {
	width: 100%;
	list-style: none;
	padding-left: 25%;
	padding-right: 25%;
}

.eska-usia {
	border-radius: 50px;
	box-shadow: 0px 3px 6px #2929291A;
	opacity: 1;

	background-color: #F9E5BE;
	color: #292929;
	font-weight: bold;
	width: 90px;
	height: 40px;

	display: inline-block;
	float: left;
	position: relative;

	line-height: 40px;
	text-align: center;
}

.eska-usia:hover {
	color: #292929;
	font-size: 30px;
	text-decoration: none;
}

.eska-usia-page {
	border-radius: 50px;
	box-shadow: 0px 3px 6px #2929291A;
	opacity: 1;

	background-color: #F9E5BE;
	color: #292929;
	font-weight: bold;
	width: 70px;
	height: 30px;
	font-size: 20px;
	line-height: 30px;

	display: inline-block;
	float: left;
	/*position: relative;*/

	text-align: center;

	margin-top: 3px;
	margin-bottom: 3px;
}

.eska-usia-page-active {
	border-radius: 50px;
	opacity: 1;

	background-color: #E0981F;
	color: #292929;
	font-weight: bold;
	width: 70px;
	height: 30px;
	font-size: 20px;
	line-height: 30px;

	display: inline-block;
	float: left;
	/*position: relative;*/

	text-align: center;

	margin-top: 3px;
	margin-bottom: 3px;
}

.eska-usia-page:hover, .eska-usia-page-active:hover {
	color: #292929;
	font-size: 25px;
	text-decoration: none;
}

.outline-button-active{
	color: black;
	border: 1.5px solid #E0981F;
	border-radius: 55px;
}
/* tag nav */

/* desktop searchbar */
.eska-desktop-searchbar {
	margin-top: 17.5px;
	padding-top: 3px;
	padding-right: 4px;
	padding-left: 3px;
	width: 250px;
	height: 30px;
	background-color: #fffaee;
	border-radius: 50px;
	z-index: 5;
}

/*.eska-desktop-searchbar::before {
	width: 250px;
	background-color: #fffaee;
	position: absolute;
}*/

.eska-cari {
	display: none;
	top: 40px;
	padding-top: 20px;
	width: 250px;
	background-color: #fffaee;
	position: absolute;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

.eska-cari > ul {
	padding-left: 0;
	list-style: none;
}

.eska-cari > ul > li {
	font-size: 12.5px;
	line-height: 30px;
	padding-left: 15px;
	color: #9B4840;
}

.eska-cari > ul > li:hover {
	background-color: #F3EFE5;
}

.eska-cari > ul > li > a {
	text-decoration: none;
	color: #9B4840;
}

.eska-cari > ul > li:last-child {
	padding-bottom: 10px;
}

.desktop-lingkaran-ikon-cari {
	background-color: #9B4840;
	color: #fffaee;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	line-height: 55px;
}

.desktop-input-cari {
	padding-left: 10px;
	width: 90%;
	height: 25px;
	border: 0;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
    background-color: #fffaee;
    outline: none;
}
/* desktop searchbar */

.ikon-cari {
	margin-top: 4px;
	margin-left: 4px;
	position: absolute;
}

/* mobile searchbar */
.eska-mobile-searchbar {
	visibility: hidden;
}

.mobile-suggestion {
	/*display: none;*/
	/*top: 40px;*/
	/*padding-top: 20px;*/
	background-color: #fffaee;
	width: 100%;
	position: relative;
}

.mobile-suggestion > ul {
	padding-left: 0;
	list-style: none;
}

.mobile-suggestion > ul > li {
	font-size: 12.5px;
	line-height: 30px;
	padding-left: 15px;
	color: #9B4840;
}

.mobile-suggestion > ul > li:hover {
	background-color: #F3EFE5;
}

.mobile-suggestion > ul > li > a {
	text-decoration: none;
	color: #9B4840;
}

/*.mobile-suggestion > ul > li:last-child {
	padding-bottom: 10px;
}*/

.mobile-input-cari {
	width: 80%;
	border: 0;
    outline: 0;
    background-color: #FFFFFF;
    border-bottom: 1px solid #9B4840;
}

.mobile-lingkaran-ikon-cari {
	/*visibility: visible;*/
	margin-top: 15px;
	padding-top: 3px;
	padding-left: 3px;
	width: 30px;
	height: 30px;
	border-radius: 50px;
	background-color: #F9E5BE;
	color: #9B4840;
	text-align: center;
}

.mobile-ikon-tutup {
	line-height: 1;
	font-size: 25px;
	color: #9B4840;
}
/* mobile searchbar */

/* ABOUT */
.intro-about-pic {
	position: absolute;
	z-index: -1;
	left: 5px;
	top: -5px;
	opacity: 0.3;
	width: 100%;
}

.eska-yellow-border {
	width: 141px; 
	height: 156px; 
	padding-bottom: 70px;
	transform: matrix(1, -0.03, 0.03, 1, 0, 0);
	background: #E0981F 0% 0% no-repeat padding-box;
	/*background: transparent url('img/stella-sriwulandari.png') 0% 0% no-repeat padding-box;*/
}

.eska-green-border {
	width: 141px; 
	height: 156px; 
	padding-bottom: 70px;
	transform: matrix(0.99, 0.1, -0.1, 0.99, 0, 0);
	background: #98AA58 0% 0% no-repeat padding-box;
	/*background: transparent url('img/stella-sriwulandari.png') 0% 0% no-repeat padding-box;*/
}

.eska-about-pic {
	padding: 7px 7px;
	width: 100%;
}

.eska-steps {
	background-color: #FFFFFF;
}
/* ABOUT */

.eska-categories {
	list-style: none;
	overflow-y: hidden;
	overflow-x: scroll;
	white-space: nowrap;
	margin-bottom: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	scroll-behavior: smooth;
	padding-left: 5px;
}

.eska-categories::-webkit-scrollbar {
	display: none;
}

.eska-categories > li {
	display: inline;
	padding-right: 10px;
	width: 100%;
}

.eska-categories > li:last-child {
	margin-right: 30px;
}

.eska-category {
	border-radius: 50px;
	border: 1px solid #292929;
    color: #292929;
    background-color: #F3EFE5;
    box-shadow: 0px 2px 6px #00000029;
    opacity: 1;
    height: 40px;
    padding: 5px 25px;
}

.eska-category:hover, .eska-category:active {
	background-color: #9B4840;
    color: #F3EFE5;
    border: 2px solid #9B4840;
    text-decoration: none;
}
/* CSS ESKA ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* custom card */
/* pojokan card eska ada border radiusnya */
.eska-card {
	border-radius: 15px;
}

.eska-card > .card-header:first-child {
	border-radius: 15px 15px 0 0;
	border: 2px solid rgba(0,0,0, 0.025);
}
/* custom card*/

/*.underline{
	text-decoration: none;
    position: relative;
    text-align: center;

	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: white;
	text-decoration-position: 10px;
}

.underline::after{
	content: '';
	width: 20px;
    position: absolute;
    text-align: center;
    left: 10px;
    bottom: 15px;
    border: 1.5px solid #FFFFFF;
    border-radius: 10px;
}*/
/*sakit kepala kenak underline wkwk*/

/* NAV ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.logo-eska { 
	width: 50px; 
	height: 40px; 
}

.aset-beranda-eska { 
	width: 70px; 
	height: 50px; 
	padding-bottom: 70px; 
}

.nav { 
	float: right; 
}
.form-inline { 
	width: 100%; 
	flex-flow: nowrap; 
}

.mobile {
	visibility: hidden;
}
/* NAV ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* FOOTER ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*.footer {
	padding-top: 2.5%;
	width: 100%;
	background-color: #9B4840;
	color: #F3EFE5;
}*/

/*.eska-footer > .logo-eska {
	margin: 0 auto;
}*/

p.instagram {
	font-size: 11px;
	text-align: center;
}

p.copyright {
	font-size: 11px;
	text-align: center;
	padding-top: 5px;
}
.navbar-fixed{
	overflow: hidden;
	background-color: #333;
	position: fixed;
	top: 0;
	width: 100%;
}
/* FOOTER ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*////////////////*/
/* responsive css */
/*////////////////*/
@media screen and (max-width: 480px) {
	.eska-nav {
		padding: 0;
	}

	.dot{
	  height: 25px;
	  width: 25px;
	  background-color: #bbb;
	  border-radius: 50%;
	  display: inline-block;
	}

	.navbar-brand {
		margin-right: 0;
	}

	/*.logo-eksa {
		width: 50px;
		height: 30px;
	}*/

	.ikon-cari {
		margin-top: 4px;
	    margin-left: -10px;
	    position: absolute;
	}

	.eska-desktop-searchbar {
		display: none;
	}

	.nav {
		float: left;
		flex-wrap: nowrap;
		display: inline-flex;
	}

	.nav-link {
		padding: 5px;
	}

	/*.nav {
		flex-wrap: nowrap;
		margin: 0 auto;
	    display: table;
	    table-layout: fixed;
	    float: left;
	}

	.nav > li {
		display: table-cell;
	}

	.nav-link {
		padding: 1px 2px;
	}*/

	/*.eska-menu {
		line-height: 40px;
		vertical-align: middle;
		text-align: center;
	}*/

	.eska-menu > a {
		font-size: 12.5px;
	}

	/*.mobile-lingkaran-ikon-cari {
		background-color: #F9E5BE;
		color: #9B4840;
	}
*/
	.eska-menu-usia {
		height: 90px;
		padding-top: 25px;
	}

	.eska-menu-usia::before {
		top: -200px;
		/*-webkit-box-shadow: 10px 9px 15px -3px #d7d3ca;
	       -moz-box-shadow: 10px 9px 15px -3px #d7d3ca;
	    		box-shadow: 10px 9px 15px -3px #d7d3ca;*/
	}

	.eska-usia {
		border-radius: 50px;
		background-color: #F9E5BE;
		color: #292929;
		font-weight: bold;
		width: 80px;
		height: 30px;

		display: inline-block;
		float: left;
		position: relative;

		line-height: 30px;
		text-align: center;
	}

	.mobile {
		visibility: visible;
	}

	.eska-mobile-searchbar {
		visibility: hidden;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 5;
		background-color: #FFFFFF;
	}

	.eska-mobile-searchbar.active {
		visibility: visible;
		animation-name: fadeInOpacity;
		animation-iteration-count: 1;
		animation-timing-function: ease-in;
		animation-duration: 0.2s;
	}

	.eska-mobile-searchbar.deactive {
		animation-name: fadeInOpacity;
		animation-iteration-count: 1;
		animation-timing-function: ease-in-out;
		animation-duration: 0.2s;
	}

	.desktop-lingkaran-ikon-cari {
		width: 30px;
		height: 30px;

		line-height: 27.5px;
		text-align: center;
	}

	.judul-eska {
		font-size: 1.5rem;
	}

	.teks-eska {
		font-size: 12.5px;
	}

	.card-content{
		border-radius: 15px;
		border-color: white;
	}

	.card-head{
		background-color: #F8C4AE;
		z-index: 1;
	}

	.card-note{
		opacity: 95%;
	}
	.card-note::after{
	  	content: "";
		background: url('../images/note.png');
		background-size: 100% 65%;
		background-repeat: no-repeat;
		background-position: 0 170px;
		opacity: 0.5;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		position: absolute;
		z-index: -1; 
	}
	.card-note-detail{
		opacity: 95%;
	}
	.card-note-detail::after{
	  	content: "";
		background: url('../images/note.png');
		background-size: 100%;
		background-repeat: repeat-y;
		background-position: 0 76px;
		opacity: 0.5;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		position: absolute;
		z-index: -1; 
	}
	.photo-content{	
		width: 80%;
	    -ms-transform: rotate(-3deg); /* IE 9 */
	    -webkit-transform: rotate(-3deg); /* Safari */
	    transform: rotate(-3deg);
	    display: block;
	    /*padding-top: 10px;*/
	    padding-bottom: 10px;
		margin-left: auto;
		margin-right: auto;
		box-shadow: 0.2rem 0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
	}
	.photo-content-right{	
		width: 80%;
	    -ms-transform: rotate(3deg); /* IE 9 */
	    -webkit-transform: rotate(3deg); /* Safari */
	    transform: rotate(3deg);
	    display: block;
	    /*padding-top: 10px;*/
	    padding-bottom: 10px;
		margin-left: auto;
		margin-right: auto;
		box-shadow: 0.2rem 0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
	}
	.homepage-photo{
		/*background-image: url('../images/homepage.png');*/
		position: absolute;
		z-index: -1;
		left: 5px;
		top: 100px;
		opacity: 0.6;
		width: 100%;
	}
	.photo-card{
		width: 100%;
		max-height: 200px;
	}
	.card-photo-content{
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}
	.sub-judul-content{
		font-size: 22px; 
		color: black; 
		line-height: 20px;
		font-weight: bold;
		margin-top: 35px;
	}
}
/* end of responsive css */

/* animation */
@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeOutOpacity {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* end of animation */

/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
/*END NAVBAR

========
/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
/*LOGIN*/

:root {
  --input-padding-x: 1.5rem;
  --input-padding-y: .75rem;
}

.card-signin {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.card-signin .card-title {
  margin-bottom: 2rem;
  font-weight: 300;
  font-size: 1.5rem;
}

.card-signin .card-body {
  padding: 2rem;
}

.form-signin {
  width: 100%;
}

.form-signin .btn {
  font-size: 80%;
  border-radius: 5rem;
  letter-spacing: .1rem;
  font-weight: bold;
  padding: 1rem;
  transition: all 0.2s;
}

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-label-group input {
  height: auto;
  border-radius: 2rem;
}

.form-label-group>input,
.form-label-group>label {
  padding: var(--input-padding-y) var(--input-padding-x);
}

.form-label-group>label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0;
  /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input:-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-moz-placeholder {
  color: transparent;
}

.form-label-group input::placeholder {
  color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
  padding-bottom: calc(var(--input-padding-y) / 3);
}

.form-label-group input:not(:placeholder-shown)~label {
  padding-top: calc(var(--input-padding-y) / 3);
  padding-bottom: calc(var(--input-padding-y) / 3);
  font-size: 12px;
  color: #777;
}

.btn-google {
  color: white;
  background-color: #ea4335;
}

.btn-facebook {
  color: white;
  background-color: #3b5998;
}

/* Fallback for Edge
-------------------------------------------------- */

@supports (-ms-ime-align: auto) {
  .form-label-group>label {
    display: none;
  }
  .form-label-group input::-ms-input-placeholder {
    color: #777;
  }
}

/* Fallback for IE
-------------------------------------------------- */

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .form-label-group>label {
    display: none;
  }
  .form-label-group input:-ms-input-placeholder {
    color: #777;
  }
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
/* END LOGIN