@charset "UTF-8";

.sticky-top {
	background-color:#1B208C;
	font-family: coolvetica,sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1.4em;
	padding: 5px 100px;
}

.nav-link {
	color:#F2F2F0;
	margin: 0 16px;
}

.nav-link:hover {
	color:#F2BC79;
}

.tombol svg {
	margin-left: 7px;
}

.navic .cls-1:hover {
	fill:#F2BC79;
}

.kontener {
	display: flex;
	flex-direction: row;
	overflow: auto;
	padding: 7.5% 100px;
	gap: 50px;
	background-color: #F2F2F0;
}

.crsl {
	position: relative;
}

.kiri {
	display: flex;
	flex-direction: column;
	width: 50%;
}

.carousel .carousel-control-prev-icon {
  background-image: url('data:image/svg+xml,<svg class="carobut" width="24px" height="24px" fill="%23fff" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M20 .755l-14.374 11.245 14.374 11.219-.619.781-15.381-12 15.391-12 .609.755z"/></svg>');
}

.carousel .carousel-control-next-icon {
  background-image: url('data:image/svg+xml,<svg class="carobut" width="24px" height="24px" fill="%23fff"  xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M4 .755l14.374 11.245-14.374 11.219.619.781 15.381-12-15.391-12-.609.755z"/></svg>'); 
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 2rem;
    height: 3rem;
}

.carousel-item img {
	width: 100%;
	height: 100%;
}

.carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

* {box-sizing: border-box;}

.img-magnifier-container {
  	position: relative;
}

.img-magnifier-glass {
  	position: absolute;
  	border: 1px solid;
  	border-radius: none;
  	cursor: none;
  	/*Set the size of the magnifier glass:*/
  	width: 150px;
  	height: 150px;
}

.buy-outside {
	position: -webkit-sticky;
  	position: sticky;
	right: 0;
  	align-self: flex-start;
	padding-top: 25px;
}

.buy-outside h4 {
	font-family: coolvetica,sans-serif;
	font-weight: 400;
	font-style: normal;
}

.fw-bolder {
	opacity: 70%;
}

.buy-outside h5 {
	font-family: coolvetica,sans-serif;
	font-weight: 300;
	font-style: normal;
}

.buy-inside {
	margin-top: 3em;
	display: none;
	margin-bottom: 20px;
}

.buy-inside h4 {
	font-family: coolvetica,sans-serif;
	font-weight: 400;
	font-style: normal;
}

.buy-inside h5 {
	font-family: coolvetica,sans-serif;
	font-weight: 300;
	font-style: normal;
}

h6 {
	font-family: coolvetica,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.1em;
}

.quantity {
  	position: relative;
	padding-top: 5px;
	padding-bottom: 10px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
  	-webkit-appearance: none;
  	margin: 0;
}

input[type=number]
{
  	-moz-appearance: textfield;
}

.quantity input {
 	width: 75px;
 	height: 42px;
  	line-height: 1.65;
	font-family: coolvetica,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.2em;
  	float: left;
  	display: block;
  	padding: 0;
  	margin: 0;
  	padding-left: 20px;
  	border: 1px solid #eee;
}

.quantity input:focus {
  	outline: 0;
}

.quantity-nav {
  	float: left;
  	position: relative;
  	height: 42px;
}

.quantity-button {
  	position: relative;
  	cursor: pointer;
  	border-left: 1px solid #eee;
  	width: 20px;
  	text-align: center;
  	color: #333;
  	font-size: 13px;
	font-family: coolvetica,sans-serif;
	font-weight: 500;
	font-style: normal;
  	line-height: 1.7;
  	-webkit-transform: translateX(-100%);
  	transform: translateX(-100%);
  	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	-o-user-select: none;
  	user-select: none;
}

.quantity-button.quantity-up {
  	position: absolute;
  	height: 50%;
  	top: 0;
  	border-bottom: 1px solid #eee;
}

.quantity-button.quantity-down {
  	position: absolute;
  	bottom: -1px;
  	height: 50%;
}

.sticky {
  	position: -webkit-sticky;
  	position: sticky;
	display: flex;
	flex-direction: column;
 	top: 0;
 	align-self: flex-start;
	width: 600px;
}

.cta {
	display: flex;
	flex-direction: column;
	margin-bottom: 50px;
}

.btn-bn {
	font-size: 1.2em;
	font-family: coolvetica,sans-serif;
	font-weight: 300;
	font-style: normal;
	border:1px solid transparent;
	border-radius: 100px;
	padding: 5px 20px;
	background-color: #1B208C;
	color: #D1D2E8;
	margin-top: 10px;
	margin-bottom: 7px;
}

.btn-bn:visited {
	background-color: #464AA6;
}

.btn-bn:hover {
	background-color: #464AA6;
}

.btn-atc {
	font-size: 1.2em;
	font-family: coolvetica,sans-serif;
	font-weight: 300;
	font-style: normal;
	border:1px solid;
	border-color:  #1B208C;
	border-radius: 100px;
	padding: 5px 20px;
	background-color: transparent;
	color: #1B208C;
}

.btn-atc:visited {
	background-color: #464AA6;
}

.btn-atc:hover {
	background-color: #FFF;
	color: #1B208C;
}

.love {
	padding-top: 5px;
	padding-bottom: 10px;
}

.love:hover {
	color: #464AA6;
}

.details {
	padding-top: 50px;
	padding-bottom: 70px;
	padding-left: 5px;
}

.details h4 {
	font-family: coolvetica,sans-serif;
	font-weight: 500;
	font-style: normal;
}

.details ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-family: coolvetica,sans-serif;
	font-weight: 300;
	font-style: normal;
	padding-bottom: 15px;
}

.details li {
	list-style-type: none;
}

footer {
	color: #D1D2E8;
	background-color:#464AA6;
}

footer h2 {
	font-family: mighty-slab,serif;
	font-weight: 400;
	font-style: normal;
}

footer p {
	font-family: coolvetica,sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 1.1em;
}

footer h5 {
	font-family: coolvetica,sans-serif;
	font-weight: 500;
	font-style: normal;
	padding-bottom: 15px;
	font-size: 1.1em;
}

.navi {
	color: #D1D2E8;
	list-style: none;
	display: flex;
	justify-content:space-between;
	padding: 0;
	font-size: 1.2em;
}

.navi a {
	color: #D1D2E8;
}

.navi a:link {
	color: #D1D2E8 !important;
	text-decoration: none;
	font-family: coolvetica,sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1.1em;
}

.navi a:hover {
	color: #F2BC79;
}

.icons svg {
	margin-right: 10px;
}

.socmed .cls-1:hover {
	fill: #F2F2F0;
}

.fcontents {
	display: flex;
	flex-direction: column;
	text-align: left;
	padding: 30px 100px;
}


@media only screen and (max-width: 1024px) {
	.navbar {
		padding: 8px 25px;
	}
	
	.details {
		padding: 0;
	}

	.navi {
		flex-direction: column;
	}

	.tombol {
		margin-bottom: 0.5em;
	}

	.tombol svg {
		margin-left: 0;
		margin-right: 0.5em;
	}

	.nav-link {
		margin: 0;
	}
	
	.kontener {
		padding-top: 30px;
		padding-left: 25px;
		padding-right: 25px;
	}
	
	.carousel-btn {
	font-size: 0.9em;
	}

	.carousel-control-next-icon, .carousel-control-prev-icon {
		width: 1.5rem;
		height: 3rem;
	}
	
	.kontener {
		display: flex;
		flex-direction: column;
	}
	
	.crsl {
		width: 100%;
		height: 100%;
	}
	
	.kiri {
		width: 100%;
		height: 100%;
	}
	
	.buy-inside {
		display: flex;
		flex-direction: column;
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.details {
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.buy-outside.sticky {
		display: none;
	}
	
	.img-magnifier-container {
		display: none;
	}

	.img-magnifier-glass {
		display: none;
	}
	
	.fcontents {
		padding: 16px 25px;
	}

	.navi {
		font-size: 0.9em;
	}

	footer p {
		font-size: 0.9em;
	}
	
	footer h5 {
		font-size: 0.9em;
	}
}