/*////////////////*/
/* responsive css */
/*////////////////*/

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

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

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

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

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

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

.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-icon {
	/*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;
}

.close-icon {
	line-height: 1;
	font-size: 25px;
	color: #9B4840;
}
/* mobile navbar */
/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/* END NAVBAR */


/* res 480px */
@media only screen and (max-width: 480px) {
	.sticky-kategori { top: 76px; }
	.container { padding-top: 50px; }
	.pdetail { padding-top: 40px; }
/*navbar*/
	.eska-navbar{
		position: fixed;
		top: 0px;
		width: 100%;
	}

	.home-intro{ padding-top: 30px; }
/*end navbar*/

/* CSS untuk hilangkan desktop mode */
	.eska-desktop-searchbar { display: none; }

	.desktop-icon {
		width: 30px;
		height: 30px;
		padding-top: 2px;
		/*line-height: 27.5px;*/
		text-align: center;
	}

/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/* ESKA (css yang dipakai dimana saja) */
	.eska-title { font-size: 24px; text-align: center; }
	.eska-subtitle { font-size: 20px; }
	.eska-title-left { font-size: 1.5rem;}
	.eska-content{ font-size: 15px; }
	.eska-logo { 
		width: 47px; 
		height: 44px; 
	}

	.eska-red-btn {
		display: flex;
		width: 210px;
		/*flex-flow:row wrap;*/
		/*font-size: 20px;*/
		/*min-width: 300px;*/
		/*float: none;*/
		margin-right: auto;
		margin-left: auto;
	}

	/* pilih umur */
	.eska-age {
		width: 80px;
		height: 30px;

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

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

	.eska-tentang {
		padding-left: 30px;
		padding-right: 30px;
		height: 30px;
		
		float: left;
		display: inline-block;
		position: relative;

		line-height: 30px;
		text-align: center;
		font-size: 12.5px;
	}

	/* card */
	.eska-card {
		border-radius: 15px;
		margin-left: 2px;
		margin-right: 2px;
	}

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

	.eska-card-note { opacity: 0.95; }
	.eska-card-note::after {
	  	/*background: url('../images/note.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 0 170px;*/

	  	content: "";
		opacity: 0.5;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		position: absolute;
		z-index: -1; 
	}
	.button-usia-top{
		margin-top: 35px;
	}
/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/* END ESKA */


/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/* NAVBAR + FOOTER */
	.nav { float: left; flex-wrap: nowrap; display: inline-flex; }
	.navbar-brand { margin-right: 0; }
	.nav-link { padding: 5px; }

	.eska-nav { padding: 0; }
	/*.eska-nav > .eksa-logo { width: 50px; height: 40px; }*/
	.eska-menu > a { font-size: 12.5px; }

	/* dropdown menu */
	.eska-ages, .eska-tentang-kami {
		height: 150px;
		padding-top: 80px;
		/*background-color: #F9E5BE;*/
	}

	.eska-ages::before, .eska-tentang-kami::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-about {
		background-color: #F9E5BE;
		top: 60px;
		z-index: 1;
	}

	.eska-about ul {
		padding-right: 10px;
		padding-left: 10px;
		font-size: 10px;
		line-height: 250%;
	}

	/* mobile searchbar */
	.mobile {
		visibility: visible;
	}

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

	/*.eska-mobile-search-bar > .desktop-icon .search-icon {
		padding-top: 10px;
	}*/

	.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: fadeOutOpacity;
		/*animation-iteration-count: 1;*/
		animation-timing-function: ease-in-out;
		animation-duration: 1s;
	}

	.search-icon {
		margin-top: 4px;
	    margin-left: -10px;
	    position: absolute;
	}

	/* footer */
	.footer { padding-top: 5.5%; }
	.eska-footer > .eska-logo { margin-bottom: 5px; }
	p.copyright { margin-top: 25px; }
/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/* END NAVBAR + FOOTER */

/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/* HOW TO USE ESKA */
	.how-to-use-eska .eska-age {
		width: 89px;
		height: 35px;
		line-height: 35px;
		font-size: 24px;
	}
/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/* END HOW TO USE ESKA */


/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/* HOME PAGE */
	.home-intro-pic {
		content: url("../images/mobile-intro.png");
		top: calc(100% / 2.2); 
		margin-top: 10%;
		right: calc(100% / 20);
		/*margin-right: 2%;*/
		opacity: 0.6;
		max-width: 80%;
	}

	.home-description {
		margin-top: 0;
	    margin-bottom: 0;
		padding: 20px 20px 0 20px;
	}

	.home-description > .eska-title {
		font-size: 1.5rem;
		font-weight: bold;
		text-align: left;
	}

	.home-content-pic {	
		width: 80%;
	    -ms-transform: rotate(-3deg); /* IE 9 */
	    -webkit-transform: rotate(-3deg); /* Safari */
	    transform: rotate(-3deg);
	    display: block;
	    /*padding: 0 0 10px 0;*/
	    margin-top: 20px;
	    margin-bottom: 20px;
	    /*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);
	}

	.home-content-pic-detail {	
		width: 80%;
	    -ms-transform: rotate(-3deg); /* IE 9 */
	    -webkit-transform: rotate(-3deg); /* Safari */
	    transform: rotate(-3deg);
	    display: block;
	    /*padding: 0 0 10px 0;*/
	    margin-top: 0px;
	    margin-bottom: 20px;
	    /*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);
	}

	.home-content-pic-detail-right {	
		width: 80%;
	    -ms-transform: rotate(3deg); /* IE 9 */
	    -webkit-transform: rotate(3deg); /* Safari */
	    transform: rotate(3deg);
	    display: block;
	    margin-top: 30px;
	    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);
	}

	.eska-card-note { opacity: 95%; }
	#eska-card-note-home::after {
	  	/*background: url('../images/note.png');*/
		background-size: 100% 75%;
		/*background-repeat: no-repeat;*/
		background-position: 0 200px;
		
	  	content: "";
		opacity: 0.5;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		position: absolute;
		z-index: -1; 
	}
/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/* END HOME PAGE */


/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/* ABOUT PAGE */
	.intro-about .h6 {
		font-size: 1.1rem;
	}

	.about-intro-pic {
		right: 20px;
		top: calc(100% - 60px);
		opacity: 0.3;
		width: 100%;
	}

	.about-description {
		margin-left: 0;
		margin-right: 0;
	}

	.about-description .eska-title {
		text-align: left;
	}
/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/* END ABOUT PAGE */


/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/* FAQ PAGE */
	.faq-intro-pic {
		right: 20px;
		top: calc(100% - 60px);
		opacity: 0.3;
		width: 100%;
	}

	.intro-about .eska-title {
		padding-top: 30px;
	}

	.faq-topic { display: inline-block; width: 100%; }

	.faq-topic p { 
		width: 88.5%; 
		font-size: 20px;
		/*padding-right: 30px; */
	}

	.faq-topic > .faq-icon { width: 11.5%; }
	.chevron-icon { 
		width: 25px; 
		height: 25px; 
		margin-top: 20px; 
	}
/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/* END FAQ PAGE */


/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/* USIA PAGE */
	.card-content{
		border-radius: 15px;
		border-color: white;
	}

	.card-head {
		/*background-color: #F8C4AE;*/
		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 70px;
		opacity: 0.5;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		position: absolute;
		z-index: -1;
		border-radius: 15px;
	}

	.card-note-detail > .eska-subtitle {
		font-size: 22px; 
		color: black; 
		line-height: 20px;
		font-weight: bold;
		margin-top: 35px;
	}

	.card-photo {
		width: 100%;
		max-height: 200px;
	}

	.card-home-content-pic{
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}

	.usia-photo-content{
		content: '';
	}

	.card-content-detail{
		width: 100%;
		margin-top: 0px;
	}

	.underline {
		text-decoration: none;
	    position: relative;
	    margin-right: auto;
		margin-left: auto;

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

	.underline::after {
		content: '';
		width: 17px;
	    position: absolute;
	    left: 10.5px;
	    bottom: 16px;
	    border: 1px solid #FFFFFF;
	    border-radius: 10px;
	}
/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/* END USIA PAGE */	
}

/* res 360px */
@media only screen and (min-width: 360px) and (max-width: 445px) {
    .card {
        border-radius: 15px;
    }
    
    .home-intro-pic {
		top: calc(100% / 1.55);
		max-width: 95%;
	}

	.eska-tentang {
		padding-left: 15px;
		padding-right: 15px;
	}
}