body {
    font-family: 'Open Sans', sans-serif !important;
    line-height: 1.45;
    background-color: #F3F4F8 !important;
}

.square {
  position: relative;
  width: 100%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.xlogo {
/*	height: 160px;
    width: 160px;*/
    position: absolute;
  	width: 100%;
  	height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 10%;
/*    box-shadow: 0 0 16px #fff;*/
}

.act-name {
	font-weight: 500;
    font-size: 33.16px;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
}

.act-address {
	color: #cdcdcd;
    display: flex;
    align-items: center;
}

.act-address i{
	color: #fff;
	font-size: 20px;
	padding-right: 3px;
}

.overlay {
	position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
/*    z-index: 2;*/
}

.supertop {
	position: absolute;
    z-index: 2;
    margin-top: -20em;
    width: 100%;
}

ul.dxlist {
	list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0 1px;
    margin: 0;
}

ul.dxlist li {
    list-style: none;
    color: #cdcdcd;
    margin-right: 10px;
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.2);
    border-radius: 5px;
}

ul.dxlist li a {
    color: #cdcdcd;
}

ul.dxlist li a:hover {
    color: #fff;
}

ul.dxlist li i {
	font-size: 18px;
    padding-right: 5px;
    color: #fff;
}

ul.dxbtnlist {
	display: flex;
	padding: 20px 0;
	flex-wrap: wrap;
}

ul.dxbtnlist li {
	list-style: none;
}

ul.dxbtnlist li a {
    background: #6a6b91 /*d57274*/;
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    margin: 3px;
    box-shadow: 3px 3px 5px rgb(0, 0, 0, 0.4);
    opacity: .85;
    text-decoration: none;
    font-size: 14px;
}

ul.dxbtnlist li a:hover {
	text-decoration: none;
	background: #F97173;
	opacity: 1;
}

.supertop .modal-backdrop {
	z-index: 0;
}

.supertop .modal-footer {
	margin-top: 0;
}

.supertop .modal-body {
	padding: 0;
}

.round-white {
/*	background: #fff;*/
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
}

.no-pad {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.dx-text {
	padding: 15px 0;
	text-align: justify;
} 

.dx-text font, .dx-text p, .dx-text span {
	font-family: 'Open Sans', sans-serif;
}

.dxsearch {
	position: absolute;
    width: 100%;
    margin-top: -40px;
}

form.dx-form-search {
	display: flex;
    justify-content: center;
}

form.dx-form-search .ratatengah{
	display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 10px 20px 15px;
    border-radius: 3px;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.05);
    letter-spacing: 0.15px;
    color: #000;
}

form.dx-form-search .ratatengah span {
    font-size: 11px;
    color: #929ab9;
    text-transform: uppercase;
}

.dxhome {
	padding: 50px 0 0;
    min-height: 60vh;
}

a.dx-bookbtn {
	background: #F97173;
    color: #fff;
    text-decoration: none;
    padding: 7px 15px 8px;
    border-radius: 3px;
    font-weight: 500;
    font-size: 13px;
    box-shadow: 0 3px 5px rgb(249, 113, 115, 0.6);
    opacity: 0.75;
}

a.dx-bookbtn:hover {
	opacity: 1;
	text-decoration: none;
	color: #fff;
}

#carousel-example-generic .item {
	height: 460px;
	background-size: cover;
	background-color: rgba(0,0,0,0.5);
	background-blend-mode: multiply;
}

#carousel-example-generic .carousel-inner > .item > img { width: 100%; }

#carousel-example-generic .carousel-control {
    top: unset;
    bottom: 0;
    width: 100px;
    height: 100px;
    background: none;
}

.dxitem {
	background: #fff;
    border-radius: 5px;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.05);
    padding: 10px 0 12px;
}

.dxitem h4 {
    font-size: 18.66px;
    font-weight: 600;
    padding: 5px 10px;
    background: #f3f3fd;
    display: inline-flex;
    margin: 10px 0 20px;
    border-radius: 3px;
}

.dxitem img { border-radius: 5px; }

.dxitem font, .dxitem font span, .dxitem p, .dxitem .col-md-8 div { 
    font-family: 'Open Sans', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-bottom: 5px;
    text-align: justify;
}

.textboxx {
    height: 30px;
    border: none;
    color: #55556f;
    outline: 0;
    background: #F3F4F8;
    font-size: 14px;
    border-radius: 3px;
    margin-top: 2px;
    letter-spacing: .55px;
}

.textboxx2 {
    height: 30px;
    border: none;
    color: #9292c6;
    outline: 0;
    font-size: 14px;
    border-radius: 3px;
    background: #fff;
    padding: 5px;
    letter-spacing: 0px;
    box-shadow: 3px 3px 5px rgb(0,0,0, 0.05);
}

.main-progress {
	background: #8b8cb6;
    color: #fff;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 14px;
}

.active-progress {
	background: #363755;
    color: #fff;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.inactive-progress {
    background: #dcdcea;
    color: #9898b8;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.inactive-progress i {
	font-size: 20px;
    margin-right: 3px;
    color: #9898b8;
}

.angka-item {
	border: 1px solid;
    height: 18px;
    width: 18px;
    font-size: 12px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
}

.angka-item-active {
    height: 18px;
    width: 18px;
    font-size: 12px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    background: #fff;
    color: #363755;
    font-weight: 700;
}

.dxitem h4 {
	font-family: 'Montserrat', sans-serif;
}

.dxitem h5 {
	text-transform: uppercase;
    font-weight: 600;
    color: #8b8cb6;
}

ul.benefit-list {
    list-style:none;
	padding: 5px 20px;
    color: #636363;
    font-size: 13px;
}

.dxitem .item-date {
	font-size: 14px;
    font-weight: 600;
    color: #363755;
}

.dxitem .item-date span {
    color: #7a7a9e;
    font-weight: 500;
    letter-spacing: 0.25px;
}

.dxitem .item-title {
    font-size: 14px;
    font-weight: 500;
    color: #363755;
}

.dxitem .min-title {
    font-size: 14px;
    font-weight: 500;
    color: #363755;
    text-align: right;
    padding: 0 40px;
}

.dxitem span.big-num {
	font-size: 33.16px;
    color: #97cdf6;
    font-family: 'Montserrat', sans-serif;
}

.cart-card {
	background: #fff;
    border: 3px;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
    overflow: hidden;
}


@media (max-width: 1366px) {
	#carousel-example-generic .item {
		height: 380px;
	}

	.supertop {
	    margin-top: -18em;
	}
}


@media (max-width: 991px) {
	#carousel-example-generic .item {
		height: 280px;
	}

	.supertop {
	    margin-top: -14em;
	}

	.dxsearch {
		position: relative;
		margin-top: 20px;
	}

	.dxhome {
		padding: 20px 0 0;
	}

	.act-name { font-size: 24.88px; }

	ul.dxlist li, .act-address {
		font-size: 13px;
    	font-weight: 500;
	}

	#carousel-example-generic .carousel-control {
		width: 30px;
		height: 30px;
		top: 5px;
		bottom: unset;
		background: none;
	}

	#carousel-example-generic .carousel-control span { font-size: 20px; }

	ul.dxbtnlist li a {
		font-size: 12px;
		padding: 2px 7px;
	}

	ul.dxbtnlist {
		padding: 10px 0 0;
	}


}

@media (max-width: 767px) {
	#carousel-example-generic .carousel-control {
	    top: -5px;
	}

	.supertop {
	    margin-top: unset;
	    top: 10px;
	}

	.dxitem { margin: 0 15px; }

	.mobile-mb { margin-bottom: 15px; }
	.mobile-center { text-align: center }
	.dxitem .min-title { text-align: unset; }
	.b-button2 { margin-bottom: 15px; }

	.cart-card { margin: 5px 15px; }
}

@media (min-width: 550px) and (max-width: 767px) {
	.normalize1 {
		width: 16.66666667%;
		margin-left: 0;
	}

	.normalize2 {
		width: 83.33333333%;
	}

	#carousel-example-generic .item {
	    height: 250px;
	}

	.supertop {
	    margin-top: unset;
	    top: 4em;
	}
}

@media (max-width: 500px) {
	#carousel-example-generic .item {
	    height: 330px;
	}

	.supertop {
	    margin-top: unset;
	    top: 10px;
	}

	.normalize1 {
		width: 33.33333333%;
		margin-left: 33.33333333%;
	}

	.normalize2 {
		width: 100%;
	}

	#carousel-example-generic .carousel-control {
	    top: unset;
	    bottom: 1em;
	}

}

@media (max-width: 414px) {
	.act-name { text-align: center }

	form.dx-form-search .ratatengah {
		flex-direction: column;
		padding: 5px 15px 20px;
	}

	form.dx-form-search .ratatengah .form-group {
		width: 100%;
	}
}