*,
::before,
::after,
hr,
hr::before,
hr::after,
input[type="search"],
input[type="search"]::before,
input[type="search"]::after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

::selection {
	background: #CEEBF8;
}

html,
body {
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	/*scroll-behavior: smooth;*/
}

body {
	-webkit-font-smoothing: subpixel-antialiased;
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	line-height: 24px;
	background-color: #ffffff;
	color: #4a4a4a;
	font-weight: 300;
	width: 100%;
	height: 100%;
	transition: all 0.3s;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat/chevron-down.png');
	/* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
	url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
	url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
	url('webfont.svg#svgFontName') format('svg');
	/* Legacy iOS */
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

h1 {
	font-size: 30px;
}

h2 {
	font-size: 22px;
}

h3 {
	font-size: 18px;
}

h4 {
	font-size: 16px;
}

h5 {
	font-size: 12px;
}

h6 {
	font-size: 10px;
}

p {
	margin-bottom: 0;
}

p:last-child {
	margin-bottom: 0px;
}

ul {
	padding: 0px;
}

a {
	color: #75bdea;
	text-decoration: none;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-font-smoothing: antialiased;
	*/
}

a:focus,
a:hover {
	color: #75bdea;
	text-decoration: none;
}

img {
	width: 100%;
	height: 100%
}

hr {
	margin-top: 20px;
	margin-bottom: 20px;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.mb0 {
	margin-bottom: 0px !important;
}

.mb5 {
	margin-bottom: 5px !important;
}

.mb10 {
	margin-bottom: 10px !important;
}

.mb15 {
	margin-bottom: 15px !important;
}

.mb20 {
	margin-bottom: 20px !important;
}

.mb30 {
	margin-bottom: 30px !important;
}

.mb40 {
	margin-bottom: 40px !important;
}

.mb60 {
	margin-bottom: 60px !important;
}

.mb80 {
	margin-bottom: 80px !important;
}

.mb100 {
	margin-bottom: 100px !important;
}

.mt0 {
	margin-top: 0px !important;
}

.mt5 {
	margin-top: 5px;
}

.mt10 {
	margin-top: 10px;
}

.mt20 {
	margin-top: 20px;
}

.mt30 {
	margin-top: 30px;
}

.mt40 {
	margin-top: 40px;
}

.mt60 {
	margin-top: 60px;
}

.mt80 {
	margin-top: 80px;
}

.mt100 {
	margin-top: 100px;
}

.mt120 {
	margin-top: 120px;
}

.mt140 {
	margin-top: 140px;
}

button {
	border: 0;
	box-shadow: none;
	outline: 0;
}

.btn-utama {
	cursor: pointer;
	background: transparent;
	color: #393e46;
	position: relative;
	display: inline-block;
	width: auto;
	text-decoration: none;
	font-size: 18px;
	font-weight: 300;
	line-height: 18px;
	letter-spacing: 0.2px;
	padding: 12px 16px;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
	outline: none;
}

.btn-utama:before {
	content: '';
	width: 25%;
	height: 100%;
	background-image: -webkit-linear-gradient(left, #ceebf84f, #8bd1d26b);
	background-image: -o-linear-gradient(left, #ceebf84f, #8bd1d26b);
	background-image: linear-gradient(to right, #ceebf84f, #8bd1d26b);
	position: absolute;
	left: 0;
	top: 0;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 20px;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.btn-utama:hover::before {
	width: 100%;
	background-image: -webkit-linear-gradient(left, #ceebf84f, #8bd1d26b);
	background-image: -o-linear-gradient(left, #ceebf84f, #8bd1d26b);
	background-image: linear-gradient(to right, #ceebf84f, #8bd1d26b);
}

.btn-utama:hover {
	color: inherit;
}

.btn-kedua {
	cursor: pointer;
	background: transparent;
	color: #393e46;
	position: relative;
	display: inline-block;
	width: auto;
	text-decoration: none;
	font-size: 18px;
	line-height: 18px;
	letter-spacing: 0.2px;
	padding: 12px 16px;
	font-weight: normal;
	border-radius: 10px;
	-webkit-transition: all 0.55;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.btn-kedua:before {
	content: '';
	width: 25%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid #8BD1D2;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 20px;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.btn-kedua:hover::before {
	width: 100%;
}

.btn-kedua:hover {
	color: inherit;
}

.btn-pols {
	position: relative;
	cursor: pointer;
	background: #ecf7f7;
	color: #393e46;
	display: inline-block;
	width: 100%;
	text-decoration: none;
	font-size: 20px;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: 0.2px;
	padding: 15px 20px;
	border-radius: 20px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	outline: none;
	overflow: hidden;
}

.btn-pols:hover {
	width: 50%;
	background-color: red;
	color: #fff;
}

.btn-remove {
	cursor: pointer;
	background: transparent;
	color: red;
	border: 1px solid red;
	position: relative;
	display: inline-block;
	width: auto;
	text-decoration: none;
	font-size: 18px;
	line-height: 18px;
	letter-spacing: 0.2px;
	padding: 12px 16px;
	font-weight: normal;
	border-radius: 20px;
	-webkit-transition: all 0.55;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.btn-show {
	width: auto;
	height: auto;
	position: relative;
	box-shadow: -5px -5px 20px #ffffff, 5px 5px 20px #babecc;
	border: none;
	outline: none;
	padding: 12px 16px;
	border-radius: 20px;
	/*background: linear-gradient(120deg, #8BD1D2, #CEEBF8);*/
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	overflow: hidden;
	transition: all 1.1s ease-in-out;
}

.btn-show::before {
	z-index: -1;
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	background: linear-gradient(120deg, #8BD1D2, #CEEBF8);
	transition: all 1s;
}

.btn-show:hover {
	color: #393e46;
	box-shadow: -2px -2px 5px #fff, 2px 2px 5px #babecc;
}

.btn-show:hover::before {
	-webkit-transform: rotate(180deg) scale(-1);
	transform: rotate(180deg) scale(-1);
}

.btn-show:active {
	box-shadow: inset -1px -1px 2px #babecc, inset -1px -1px 2px #fff;
}

.btn-show-second {
	position: relative;
	width: auto;
	height: auto;
	background-color: #ffffff;
	box-shadow: -5px -5px 20px #ffffff, 5px 5px 20px #babecc;
	outline: none;
	padding: 12px 16px;
	border: 2px solid transparent;
	border-radius: 20px;
	background-clip: padding-box;
	background-color: #fff;
	color: #8BD1D2;
	cursor: pointer;
	font-weight: 700;
	font-size: 18px;
	overflow: hidden;
	transition: all 0.3s linear;
}

.btn-show-second::before {
	content: '';
	z-index: -1;
	position: absolute;
	top: -2px;
	bottom: -2px;
	left: -2px;
	right: -2px;
	background: linear-gradient(-90deg, #CEEBF8, #8BD1D2);
	border-radius: 20px;
	overflow: hidden;
	transition: all 1s linear;
}

.btn-show-second:hover {
	color: #393e46;
	box-shadow: -2px -2px 5px #fff, 2px 2px 5px #babecc;
	border: 2px solid #8BD1D2;
}

.btn-show-second:hover::before {
	opacity: 0;
}

.btn-show-third {
	position: relative;
	width: auto;
	height: auto;
	/*background-color: #ffffff;*/
	box-shadow: -5px -5px 20px #ffffff, 5px 5px 20px #babecc;
	border: none;
	outline: none;
	padding: 12px 16px;
	border-radius: 20px;
	color: #8BD1D2;
	background: -webkit-linear-gradient(top, #8BD1D2 0%, #8BD1D2 15%, #8BD1D2 27%, #CEEBF8 37%, #393e46 46%, #393e46 58%, #393e46 69%, #393e46 79%, #393e46 89%, #393e46 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 100% 300%;
	cursor: pointer;
	font-weight: 700;
	font-size: 18px;
	overflow: hidden;
	transition: all 0.6s linear;
}

.btn-show-third:hover {
	box-shadow: -2px -2px 5px #fff, 2px 2px 5px #babecc;
	background-position: center right, top right;
}

.swiper-button-prev,
.swiper-button-next {
	top: 45%;
	width: 50px;
	height: 50px;
	background-size: contain;
}

.swiper-button-prev {
	background-image: url("../images/chevron-left.png");
	border-radius: 50%;
	transition: all 0.3s;
}

.swiper-button-next {
	background-image: url("../images/chevron-right.png");
	border-radius: 50%;
	transition: all 0.3s;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
	box-shadow: 0 8px 18px 0 #35353533;
}


/*  ==========================  FORM FIELD  ==========================*/

.form-control:focus,
.has-warning .form-control:focus,
.has-error .form-control:focus,
.has-success .form-control:focus {
	outline: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.form-control[disabled] {
	background-color: grey;
}

.form-group {
	position: relative;
	margin-bottom: 20px;
}

.has-error .form-control {
	box-shadow: none;
}

input.form-control {
	position: relative;
	height: 40px;
	background-color: transparent;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	border: 0;
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
	box-shadow: rgba(0, 0, 0, 0) 0px 2px 4px;
	text-transform: none;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 2px;
	font-weight: 700;
	transition: all 0.3s;
}

input.form-control::-webkit-input-placeholder {
	opacity: 0.3;
	/*Change the opacity between 0 and 1*/
}

.input-transition {
	/*z-index: -1;*/
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	/*background-color: #8BD1D2;*/
	background-image: linear-gradient(120deg, #8BD1D2, #CEEBF8);
	border-radius: 20px;
	transition: all 1s;
}

.form-group:hover .input-transition {
	width: 100%;
}

.form-control:focus {
	border-color: #8BD1D2 !important;
}

input.form-control:focus,
input.form-control:active {
	border-bottom: 2px solid #8BD1D2;
}

select.form-control {
	height: 40px;
	font-size: 16px;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	-webkit-appearance: none;
	-moz-appearance: none;
	background-position: 98% 55%;
	background-repeat: no-repeat;
	background-image: url("../images/chevron-down.png");
	background-size: 13px;
	padding: 5px;
	box-shadow: none;
	cursor: pointer;
	color: #393e46;
	font-weight: 700;
}

textarea.form-control {
	background-color: transparent;
	min-height: 200px;
	position: relative;
	display: block;
	width: 100%;
	padding: 5px 15px;
	text-transform: none;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 2px;
	font-weight: 700;
	border: 0;
	border-radius: 0;
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
	box-shadow: none;
	/*resize: none;*/
}

textarea.form-control:focus,
textarea.form-control:active {
	border-bottom: 2px solid #8BD1D2;
}

textarea.form-control::-webkit-input-placeholder {
	opacity: 0.5;
}

label.control-label {
	position: relative;
	padding-left: 10px;
	display: inline-block;
	font-size: 14px;
	color: #393e46;
	letter-spacing: 1px;
	font-weight: 300;
}

label.control-label:before {
	z-index: -1;
	content: "";
	position: absolute;
	left: 4px;
	bottom: 3px;
	width: 100%;
	height: 8px;
	background-color: #ceebf873;
	border-radius: 20px;
}

.modal-footer {
	border: 0;
}

.modal-header .close {
	border: 1px solid #000;
	border-radius: 50%;
	margin-top: -4px;
	font-size: 25px;
	width: 27px;
	height: 27px;
	transition: all 0.3s;
}

#select-dropdown {
	margin-top: 5px;
	background: transparent;
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	outline: 0;
	display: block;
	text-align: left;
	font-size: 16px;
	width: 100%;
	cursor: pointer;
	color: #5A5957;
	text-decoration: none;
	transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
	opacity: 1;
	-webkit-transform-origin: right top;
	transform-origin: right top;
}

#select-dropdown.open {
	opacity: 0;
}

.button-group {
	position: relative;
	width: 215px;
}

.button-group .marka {
	position: absolute;
	right: 8px;
	top: 10px;
	z-index: 9999;
	cursor: pointer;
}

.button-group .marka i {
	background: grey!important;
}

.marka-icon-times {
	border: 1px solid grey;
	border-radius: 50%;
	top: 5px !important;
	right: 5px !important;
}

#dropdown-menu {
	position: absolute;
	top: -1em;
	right: 0;
	left: 0;
	margin: 1em auto;
	padding: 15px 20px;
	width: 100%;
	list-style: none;
	text-align: left;
	border-radius: 5px;
	background: #fff;
	transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-transform-origin: right top;
	transform-origin: right top;
	-webkit-transition: box-shadow .5s ease-out;
	box-shadow: 0 8px 18px 0 rgba(0, 0, 0, .18);
}

#dropdown-menu li {
	position: relative;
	line-height: 24px;
	margin-bottom: 15px;
	-webkit-transform: translate3d(0, -10px, 0);
	transform: translate3d(0, -10px, 0);
	opacity: 0;
}

#dropdown-menu li:nth-last-child(1) {
	margin-bottom: 0;
}

#dropdown-menu li:hover {
	background-color: #33b8c41a;
}

#dropdown-menu li a {
	color: #5A5957;
	text-decoration: none;
	font-size: 1em;
}

#dropdown-menu.open {
	-webkit-transform: scale(1);
	transform: scale(1);
}

#dropdown-menu.open li {
	transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

.open li:nth-child(1) {
	transition-delay: 0.07s !important;
}

.open li:nth-child(2) {
	transition-delay: 0.14s !important;
}

.open li:nth-child(3) {
	transition-delay: 0.21s !important;
}

.open li:nth-child(4) {
	transition-delay: 0.28s !important;
}

.open li:nth-child(5) {
	transition-delay: 0.35s !important;
}


/*====================================== SECTION WORD ======================================*/

.maka-head {
	word-wrap: break-word;
	font-size: 36px;
	line-height: 60px;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: #393e46;
	text-transform: capitalize;
	transition: all 0.6s;
}

.maka-category {
	word-wrap: break-word;
	font-size: 22px;
	line-height: 34px;
	letter-spacing: 0.2px;
	font-weight: 700;
	color: #393e46;
	text-transform: capitalize;
	transition: all 0.6s;
}

.maka-main {
	word-wrap: break-word;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0.2px;
	font-weight: 400;
	color: #33b8c4;
	transition: all 0.6s;
}

.maka-semi {
	word-wrap: break-word;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0.2px;
	font-weight: 300;
	color: #393e46;
	transition: all 0.6s;
}

.maka-info {
	word-wrap: break-word;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.2px;
	font-weight: 300;
	color: rgba(0, 0, 0, 0.50);
	transition: all 0.6s;
}

.maka-break {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.maka-small {
	font-size: 80%;
	color: rgba(0, 0, 0, 0.50);
	line-height: 24px;
	letter-spacing: 1px;
}

.nunito {
	font-family: 'Nunito', sans-serif;
}

.roboto {
	font-family: 'Roboto', sans-serif;
}

.dancing {
	font-family: 'Dancing Script', cursive;
}

.maka-blue {
	color: #CEEBF8 !important;
}

.maka-green {
	color: #8BD1D2 !important;
}

.black {
	color: #393e46 !important;
}

.info {
	color: rgba(0, 0, 0, 0.50) !important;
}

.bold {
	font-weight: 700 !important;
}
.x-bold
{
	font-weight: 800 !important;
}
.white {
	color: #fff !important;
}

.box-shadow {
	-webkit-transition: box-shadow .5s ease-out;
	box-shadow: 0 8px 18px 0 rgba(0, 0, 0, .18);
	transition: box-shadow .5s ease-out;
}

.no-pad {
	padding: 0;
}

.block {
	display: block;
}

.full {
	width: 100% !important;
}

.inline-block {
	display: inline-block;
}

.normal {
	font-weight: 300;
}

.no-transform {
	text-transform: none;
}

.load-more button.btn-kedua {
	margin: 20px 0;
	padding-left: 30px;
	padding-right: 30px;
}

.load-more button.btn-utama:before {
	width: 100%;
}

.navbar-space {
	margin-top: 100px;
}

.sticky-subhead {
	position: -webkit-sticky;
	position: sticky;
	top: 150px;
}

.section-shadow {
	z-index: -1;
	position: absolute;
	left: 0;
	top: 25px;
}

.section-head {
	padding: 50px 0;
}

.section-head .maka-head {
	letter-spacing: 2px;
	margin-bottom: 10px;
}

.relative {
	position: relative;
}


/*====================================== SECTION NAVBAR ======================================*/

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 80px;
	padding: .5rem 0;
	background: rgba(255, 255, 255, 0.92);
	z-index: 99;
	will-change: transform;
	transition: background 0.3s, -webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1);
	transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1), background 0.3s;
	transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1), background 0.3s, -webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1);
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

header nav .logo {
	float: left;
	padding-bottom: .25rem;
	margin-top: -13px;
	margin-right: 1rem;
	font-size: 1.25rem;
	line-height: inherit;
	font-weight: 500;
	color: #393e46;
}

img.navbar-logo {
	width: 150px;
	height: 100px;
	object-fit: contain;
}

header nav .logo:after {
	content: '';
	display: table;
	clear: both;
}

header nav ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

@media (min-width: 1023px) {
	header nav ul li {
		float: left;
		margin-left: 2rem;
	}
}

header nav ul li a {
	display: block;
	font-size: 18px;
}

.hide-nav {
	-webkit-transform: translateY(-120%) !important;
	transform: translateY(-120%) !important;
}

.menu-left>li>a,
.menu-right>li>a {
	position: relative;
	display: inline-block;
	line-height: 24px;
	letter-spacing: 1.2px;
	font-weight: 300;
	color: #393e46;
	font-weight: 300;
	transition: color .3s ease;
}

.menu-left>li>a:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	transition: width 0s ease, background .35s ease;
}

.menu-left>li>a:after {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	background-image: -webkit-linear-gradient(left, #8BD1D2, #CEEBF8);
	background-image: -o-linear-gradient(left, #8BD1D2, #CEEBF8);
	background-image: linear-gradient(to right, #8BD1D2, #CEEBF8);
	transition: width .35s ease;
}

.menu-left>li>a:hover:before {
	width: 100%;
	background-image: linear-gradient(to right, #8BD1D2, #CEEBF8);
	transition: width .35s ease;
}

.menu-left>li>a:hover:after {
	width: 100%;
	background: transparent;
	transition: all 0s ease;
}

.menu-left>li>a>img.ruang-reka-logo {
	width: 15px;
	height: 15px;
}

ul.menu-left {
	float: left;
	display: block;
	max-height: 0;
	overflow: hidden;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	z-index: 10;
	margin: 0 -15px 0 -15px;
	padding-top: 20px;
	padding-left: 15px;
}

ul.menu-left:before {
	content: '';
	display: table;
	clear: both;
}

ul.menu-left.collapse {
	max-height: 25em !important;
}

ul.menu-right {
	float: right;
}

ul.menu-right li {
	/*background-image: url(../images/bg-navbar.png);*/
	background-position: left top;
	background-size: cover;
	background-repeat: no-repeat;
	/*background-color: #CEEBF8;*/
	margin-top: -5px;
	padding: 6px 15px;
	border-radius: 20px;
	transition: all 0.3s;
}

ul.menu-right a {
	border: 1px solid transparent;
	padding: 5px 10px;
	border-radius: 20px;
	transition: all 0.3s;
}

ul.menu-right li:hover a {
	/*border-color: #8BD1D2;*/
	color: #8BD1D2;
}

ul.menu-right li a.btn-show-third {
	box-shadow: -2px -2px 5px #fff, 2px 2px 5px #babecc;
}

.nav-toggle {
	display: none;
	border-radius: 5px;
	background-color: transparent;
	float: right;
	height: 38px;
	width: 38px;
	cursor: pointer;
	padding: 8px 8px;
	margin-top: 10px;
}

.nav-toggle span:nth-child(2) {
	width: 60%;
}

.nav-toggle.open span:first-child {
	transform: rotate(45deg) translate(4.4px, 4.4px);
}

.nav-toggle.open span:nth-child(2) {
	width: 0%;
	opacity: 0;
}

.nav-toggle.open span:last-child {
	transform: rotate(-45deg) translate(4.4px, -4.4px);
}

.nav-toggle span {
	position: relative;
	display: block;
	height: 2px;
	width: 100%;
	margin-top: 4px;
	background-color: #393e46;
	transition: all .3s;
}

.maka-contact {
	z-index: 999;
	position: fixed;
	bottom: 2%;
	right: 5px;
	transition: all 0.3s;
}

.maka-contact:hover {
	transform: translateY(-10px);
	/*box-shadow: 0 8px 18px 0 rgba(0,0,0,.18);*/
}

.maka-contact a {
	display: block;
	width: 100%;
	height: 100%;
}

.maka-contact .image {
	max-width: 75px;
}


/*====================================== SECTION HOMEPAGE ======================================*/

.home-sequence {
	position: relative;
	height: 350vh;
	width: 100%;
}

.sticky-home {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	height: 100vh;
	overflow: hidden;
}

.home-element {
	position: relative;
	/*max-width: 1024px;*/
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.home-element canvas#home_canvas {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	max-height: 100vh;
	max-width: 100vw;
	transform: translate(-50%, -50%);
}

.subject-heading {
	max-width: 720px;
	margin: 0 auto 20px auto;
}

.subject-heading .content-word {
	max-width: 1056px;
	margin: 10px auto;
}

.home-hero-image .image {
	/*max-width: 1024px;*/
	margin: 0 -15px;
}
.home-sequence .home-scrolldown
{
	position: absolute;
	bottom: 30px;
	left: 0;
	width: 100%;
	text-align: center;
}
.arrow-hero
{
	margin: 0 auto;
	width: 100%;
	height: 40px;
	color: #5fb7c3;
	font-size: 30px;
/*  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojMjIyMjIyO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==);
background-size: contain;*/
}
.arrow-hero span
{
	display: block;
	font-size: 16px;
}

.bounce_hero {
	animation: bounce_hero 2s infinite;
}

@keyframes bounce_hero {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-30px);
	}
	60% {
		transform: translateY(-15px);
	}
}

section.section-home-about .subject-heading h1,
section.section-home-intermezo .subject-heading h1,
section.section-home-wwd .subject-heading h1,
section.section-home-work .subject-heading h1,
section.section-karya-kami .subject-heading h1,
section.section-pahlawan .subject-heading h1
{
	position: relative;
	font-size: 64px;
	overflow: hidden;
	padding: 5px;
}

section.section-text-head .subject-heading h1::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
	height: 100%;
	background-image: linear-gradient(120deg, #8BD1D2, #CEEBF8);
	transform: translateX(-100px);
	filter: blur(4px);
	transition: all 1.2s;
	animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
	opacity: 0;
}

section.section-text-head:hover .subject-heading h1::before {
	transform: translateX(300%);
	opacity: 1;
}

section.section-text-head .subject-heading h1::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	white-space: pre;
	background-image: linear-gradient(120deg, #8BD1D2, #CEEBF8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-background-clip: text;
	-moz-text-fill-color: transparent;
	overflow: hidden;
	padding: 5px;
	opacity: 0;
	transition: all 0.7s;
}

section.section-text-head:hover .subject-heading h1::after {
	opacity: 1;
	width: 100%;
	height: 100%;
}

section.section-text-head:hover .subject-heading h1 {
	color: #fff;
}

section.section-home-intermezo {
	padding: 100px 0;
	overflow: hidden;
}

section.section-home-intermezo .subject-heading {
	max-width: 480px;
}

.intermezo-left .image,
.intermezo-right .image
{
	max-width: 200px;
}
.intermezo-left {
	position: absolute;
	left: -175px;
	top: -15px;
}

.intermezo-right {
	position: absolute;
	right: -175px;
	top: -15px;
}
.karyahome-left .image,
.karyahome-right .image {
	max-width: 325px;
}

.section-home-intermezo .content-word
{
	max-width: 720px;
	margin: 30px auto;
}

section.section-home-intermezo .subject-heading .word-wrapper {
	padding-top: 75px;
	padding-bottom: 75px;
}

section.section-home-wwd {
	margin-top: 0;
	margin-bottom: 0;
	overflow: hidden;
}

section.section-home-wwd .under-text {
	z-index: -1;
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 100%;
	text-align: center;
}

section.section-home-wwd .under-text .image {
	width: 75%;
	margin: 0 auto;
}

.wwd-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wwd-card .image {
	min-width: 400px;
	max-width: 400px;
	margin: 0 30px 0 0;
	flex-grow: 2;
}

.wwd-card .wwd-desc .bg-wwd {
	z-index: 1;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	opacity: 0.5;
	padding: 30px;
}

.wwd-card .wwd-desc {
	flex-grow: 1;
	height: auto;
	text-align: left;
	display: flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
	padding: 30px;
	border-radius: 30px;
	background-color: #4b4d56;
	border: 6px solid #3e4047;
	box-shadow: 0 8px 18px 0 #ceebf8a1;
}

.wwd-card .wwd-desc .desc {
	min-width: 500px;
	z-index: 2;
}

.wwd-card .wwd-desc .desc h2,
.wwd-card .wwd-desc .desc p {
	color: #fff;
}

.horizontal-scroll-section {
	position: relative;
	min-height: 100vh;
	opacity: 0;
	transition: 0.2s opacity;
}

.wwd-flight {
	z-index: 2;
	width: 100%;
	position: absolute;
	top: -50px;
	left: 0%;
}

.scene {
	position: absolute;
	height: 100vh;
	top: 0;
	left: 0;
	right: 0;
}

.scene--active {
	position: fixed;
}

.scene--ended {
	position: absolute;
	bottom: 0;
	top: auto;
}

.horizontal-scroll-section__content {
	display: flex;
	align-items: center;
}

.horizontal-scroll-section__content-wrapper {
	display: flex;
	height: 100%;
	align-items: center;
	position: relative;
}

.horizontal-scroll-section__content-section {
	position: relative;
	background-color: #f2f2f2;
	background-position: left 25px bottom 15px, right;
	background-size: 100px, contain;
	background-repeat: no-repeat;
	position: relative;
	min-width: auto;
	text-align: center;
	padding: 0 100px 0 40px;
	height: 60vh;
	display: flex;
	align-items: center;
}

.horizontal-scroll-section__content-section.wwd-1 {
	background-image: url("../images/home/wwd-web-icon.png"), url("../images/home/wwd-bg-web.jpg");
}

.horizontal-scroll-section__content-section.wwd-2 {
	background-image: url("../images/home/wwd-uiux-icon.png"), url("../images/home/wwd-bg-uiux.jpg");
}

.horizontal-scroll-section__content-section.wwd-3 {
	background-image: url("../images/home/wwd-3d-icon.png"), url("../images/home/wwd-bg-3d.jpg");
}

.horizontal-scroll-section__content-section.wwd-4 {
	background-image: url("../images/home/wwd-branding-icon.png"), url("../images/home/wwd-bg-branding.jpg");
}

.horizontal-scroll-section__content-section.wwd-5 {
	background-image: url("../images/home/wwd-bd-icon.png"), url("../images/home/wwd-bg-bd.jpg");
}

.wwd-image-bottom {
	position: absolute;
	bottom: -125px;
	right: 20%;
}

.wwd-image-bottom .image {
	max-width: 200px;
}

.horizontal-scroll-section--init {
	opacity: 1;
}

.collaborate-wrapper .video {
	max-width: 720px;
	margin: 0 auto;
}

.collaborate-wrapper .video video {
	width: 100%;
	height: 100%;
}

.home-work {
	position: relative;
	height: 200vh;
}

.sticky-homework {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	height: 100vh;
	display: flex;
	align-items: center;
}

.home-work .image {
	max-width: 1056px;
	margin: 0 auto;
}

.karyahome-left {
	z-index: 2;
	position: absolute;
	left: -175px;
	top: 0;
}

.karyahome-right {
	z-index: 2;
	position: absolute;
	right: -175px;
	top: 0;
}

section.section-home-karya {
	position: relative;
	padding: 50px 0 50px 0;
	overflow: hidden;
}

section.section-home-karya .flight .image {
	top: -50px;
	z-index: -1;
}

section.section-home-karya .subject-heading .word-wrapper {
	padding-top: 100px;
}

section.section-home-karya .subject-heading .word-wrapper .under-text {
	z-index: -1;
	position: absolute;
	bottom: 40px;
	left: 0;
	width: 100%;
	text-align: center;
}

section.section-home-karya .subject-heading .word-wrapper .under-text .image {
	width: 60%;
	margin: 0 auto;
}


/*====================================== SECTION TEMPLATE ======================================*/

section.section-template {
	margin-bottom: 100px;
}

section.section-template.section-template-hero,
section.section-template.section-template-intermezo,
section.section-template.section-template-why {
	margin-bottom: 0;
}

.subject-head {
	max-width: 480px;
	margin: 0 auto 40px auto;
}

.template-hero .word,
.course-hero .word {
	max-width: 720px;
	margin: 0 auto;
}

.template-hero .word h1.maka-head,
.course-hero .word h1.maka-head {
	font-size: 60px;
	line-height: 65px;
}

.template-hero .word .wrapper {
	max-width: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
}

.rotate-wrapper {
	position: relative;
	display: inline-block;
	max-width: 300px;
	width: 100%;
	margin-left: 10px;
}

.text-rotate {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
}

.text-letter {
	display: inline-block;
	position: relative;
	float: left;
	transform: translateZ(25px);
	transform-origin: 50% 50% 25px;
}

.text-letter.out {
	transform: rotateX(90deg);
	transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.text-letter.behind {
	transform: rotateX(-90deg);
}

.text-letter.in {
	transform: rotateX(0deg);
	transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.row-intermezo {
	display: flex;
	align-items: center;
	margin-bottom: 50px;
}

section.section-template-package,
section.section-template.section-template-why {
	overflow-x: hidden;
}

.why-left {
	position: absolute;
	top: 15%;
	left: -125px;
}

.why-right {
	position: absolute;
	bottom: 15%;
	right: -125px;
}

.why-left .image,
.why-right .image {
	max-width: 480px;
}

.template-circle .image {
	max-width: 1024px;
	margin: -50px auto 0 auto;
}

.template-package .card {
	background-color: #fff;
	max-width: 480px;
	margin: 0 auto 20px auto;
	position: relative;
	z-index: 2;
	padding: 0 20px 15px 20px;
	border-radius: 20px;
	box-shadow: 0 8px 18px 0 #ceebf8a1;
}

.template-package .image-left {
	z-index: -1;
	position: absolute;
	top: 0;
	left: -265px;
	max-width: 300px;
}

.template-package .image-right {
	z-index: -1;
	position: absolute;
	top: 0;
	right: -250px;
	max-width: 300px;
}

.template-package .subject-head {
	margin-bottom: 150px;
}

.template-package .card .image {
	-webkit-transform: translateY(-100px);
	transform: translateY(-100px);
	max-width: 720px;
	height: 300px;
	margin: 0 auto 0 auto;
}

.template-package .card .image img {
	object-fit: contain;
}
.template-package .card .list .cta .btn-show-second
{
	display: block;
}

.success-checkmark {
	width: 80px;
	height: 115px;
	margin: 0 auto;
}

.success-checkmark .check-icon {
	width: 80px;
	height: 80px;
	position: relative;
	border-radius: 50%;
	box-sizing: content-box;
	border: 4px solid #4CAF50;
}

.success-checkmark .check-icon::before {
	top: 3px;
	left: -2px;
	width: 30px;
	transform-origin: 100% 50%;
	border-radius: 100px 0 0 100px;
}

.success-checkmark .check-icon::after {
	top: 0;
	left: 30px;
	width: 60px;
	transform-origin: 0 50%;
	border-radius: 0 100px 100px 0;
	animation: rotate-circle 4.25s ease-in;
}

.success-checkmark .check-icon::before,
.success-checkmark .check-icon::after {
	content: "";
	height: 100px;
	position: absolute;
	background: #FFFFFF;
	transform: rotate(-45deg);
}

.success-checkmark .check-icon .icon-line {
	height: 5px;
	background-color: #4CAF50;
	display: block;
	border-radius: 2px;
	position: absolute;
	z-index: 10;
}

.success-checkmark .check-icon .icon-line.line-tip {
	top: 46px;
	left: 14px;
	width: 25px;
	transform: rotate(45deg);
	animation: icon-line-tip 0.75s;
}

.success-checkmark .check-icon .icon-line.line-long {
	top: 38px;
	right: 8px;
	width: 47px;
	transform: rotate(-45deg);
	animation: icon-line-long 0.75s;
}

.success-checkmark .check-icon .icon-circle {
	top: -4px;
	left: -4px;
	z-index: 10;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	position: absolute;
	box-sizing: content-box;
	border: 4px solid rgba(76, 175, 80, 0.5);
}

.success-checkmark .check-icon .icon-fix {
	top: 8px;
	width: 5px;
	left: 26px;
	z-index: 1;
	height: 85px;
	position: absolute;
	transform: rotate(-45deg);
	background-color: #FFFFFF;
}

@keyframes rotate-circle {
	0% {
		transform: rotate(-45deg);
	}
	5% {
		transform: rotate(-45deg);
	}
	12% {
		transform: rotate(-405deg);
	}
	100% {
		transform: rotate(-405deg);
	}
}

@keyframes icon-line-tip {
	0% {
		width: 0;
		left: 1px;
		top: 19px;
	}
	54% {
		width: 0;
		left: 1px;
		top: 19px;
	}
	70% {
		width: 50px;
		left: -8px;
		top: 37px;
	}
	84% {
		width: 17px;
		left: 21px;
		top: 48px;
	}
	100% {
		width: 25px;
		left: 14px;
		top: 45px;
	}
}

@keyframes icon-line-long {
	0% {
		width: 0;
		right: 46px;
		top: 54px;
	}
	65% {
		width: 0;
		right: 46px;
		top: 54px;
	}
	84% {
		width: 55px;
		right: 0px;
		top: 35px;
	}
	100% {
		width: 47px;
		right: 8px;
		top: 38px;
	}
}

.template-package .card .name {
	margin-top: -150px;
	margin-bottom: 15px;
}

.template-package .card .list ul {
	list-style: none;
	margin-bottom: 20px;
}

.template-package .card .list ul li {
	margin-bottom: 10px;
}

.template-package .card .list ul li .check {
	float: left;
	width: 40px;
	margin-right: 10px;
}

.template-package .card .list ul li span {
	margin-top: 12px;
	display: inline-block;
	max-width: 75%;
}

.template-package .card .list .cta a:before {
	width: 100%;
}

#completion {
	width: 100%;
	height: 100%;
	margin: auto;
	display: block;
}

@keyframes hideshow {
	0% {
		opacity: 0.2;
	}
	10% {
		opacity: 0.2;
	}
	15% {
		opacity: 0.2;
	}
	100% {
		opacity: 1;
	}
}

#cirkel {
	animation: hideshow 0.4s ease;
}

#check {
	animation: hideshow 0.4s ease;
}

#stars {
	animation: hideshow 1.0s ease;
	opacity: 0.9;
}

@keyframes hideshow {
	0% {
		transform: scale(0.2);
		transform-origin: initial;
	}
	100% {
		transform: scale(1.0);
		transform-origin: initial;
	}
}

@keyframes draaien {
	0% {
		transform: rotate(40deg);
		transform-origin: initial;
	}
	100% {
		transform: scale(0deg);
		transform-origin: initial;
	}
}

#check {
	animation: draaien 0.8s ease;
}

@keyframes transparant {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#check {
	animation: transparant 2s;
}

.row-how {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
}

.how-container {
	position: relative;
	width: 100%;
	height: 100%;
}

.how-container .swiper-pagination {
	position: static;
}

.how-step {
	background-color: #fff;
	position: relative;
	margin-bottom: 5px;
}

.how-step:before {
	z-index: ;
	content: "";
	position: absolute;
	top: -15px;
	left: 12px;
	background-color: transparent;
	border: 1px dashed #8BD1D2;
	border-radius: 20px;
	width: 1px;
	height: 15px;
	transition: all 0.3s;
}

.swiper-pagination-bullet:first-child .how-step:before {
	opacity: 0;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active .how-step:before {
	background-color: #8BD1D2;
	border: 1px solid transparent;
}

.how-step .number {
	float: left;
	display: inline-block;
	width: 25px;
	height: 25px;
	margin-right: 10px;
	border-radius: 50%;
	text-align: center;
	border: 1px solid #8BD1D2;
	background-color: #fff;
	transition: all 0.3s;
}

.how-step .number span {
	color: #8BD1D2;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	transition: all 0.3s;
}

.how-step .word {
	max-width: 100%;
	word-wrap: break-word;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.2px;
	font-weight: 300;
	color: #393e46;
	display: inline-block;
	margin-bottom: 10px;
	transition: all 0.3s;
}

.how-step .swiper-pagination {
	position: static;
}

.swiper-pagination-bullet {
	display: block;
	opacity: 1;
	border-radius: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	text-align: left;
	background-color: transparent;
}

.swiper-pagination-bullet-active .how-step .number {
	border: 1px solid transparent;
	background-color: #8BD1D2;
}

.swiper-pagination-bullet-active .how-step .number span {
	color: #fff;
}

.swiper-pagination-bullet-active .how-step .word {
	color: #8BD1D2;
	font-weight: 700;
	background: transparent;
}

.template-how .image {
	background-image: url("../images/template/how-bg.png");
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

section.section-template-action {
	/*overflow-x: hidden;*/
	position: relative;
	padding: 100px 0;
	perspective: 800;
}

.template-action {
	position: relative;
	background-color: #8bd1d230;
	border-radius: 75px;
	max-width: 1024px;
	width: 100%;
	height: 600px;
	margin: 0 auto;
	padding: 0 15px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	flex-direction: column;
	box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
	transition-property: transform;
	transition-timing-function: cubic-bezier(.550, .055, .675, .19);
}

.template-action:hover {
	transform-style: preserve-3d;
}

.template-action .subject-head {
	max-width: 450px;
	text-align: center;
}

.template-action .image-1 {
	max-width: 125px;
	position: absolute;
	top: -75px;
	left: 100px;
}

.template-action .image-2 {
	max-width: 50px;
	position: absolute;
	top: 25px;
	left: 300px;
}

.template-action .image-3 {
	max-width: 200px;
	position: absolute;
	top: -75px;
	right: 300px;
}

.template-action .image-4 {
	max-width: 250px;
	position: absolute;
	top: -50px;
	right: -100px;
}

.template-action .image-5 {
	max-width: 50px;
	position: absolute;
	top: 200px;
	right: 50px;
}

.template-action .image-6 {
	max-width: 50px;
	position: absolute;
	bottom: 250px;
	right: -75px;
}

.template-action .image-7 {
	max-width: 250px;
	position: absolute;
	bottom: 50px;
	right: -75px;
}

.template-action .image-8 {
	max-width: 100px;
	position: absolute;
	bottom: -50px;
	right: 250px;
}

.template-action .image-9 {
	max-width: 50px;
	position: absolute;
	bottom: 50px;
	right: 500px;
}

.template-action .image-10 {
	max-width: 50px;
	position: absolute;
	bottom: 10px;
	left: 400px;
}

.template-action .image-11 {
	max-width: 300px;
	position: absolute;
	bottom: -50px;
	left: -50px;
}

.template-action .image-12 {
	max-width: 100px;
	position: absolute;
	bottom: 200px;
	left: -25px;
}

.template-action .image-13 {
	max-width: 300px;
	position: absolute;
	top: 75px;
	left: -100px;
}


/*====================================== SECTION TEMPLATE CHOOSE ======================================*/
.row-choose-hero {
	display: flex;
	align-items: center;
}

.choose-hero .image {
	max-width: 720px;
	margin: 0 auto;
}

section.section-template.section-choose-package {
	overflow-x: hidden;
}
.row-choose-package
{
	margin-bottom: 100px;
}

section.section-template.section-choose-package .template-package .card .name {
	margin-top: -115px;
}

section.section-template.section-choose-addon,
section.section-template.section-choose-question,
section.section-template.section-choose-server {
	margin-bottom: 0;
}

.choose-addon .swiper-container {
	padding: 50px 0;
}

.choose-addon .swiper-slide {
	-webkit-filter: blur(2px);
	filter: blur(2px);
}

.choose-addon .swiper-slide.swiper-slide-active {
	-webkit-filter: blur(0);
	filter: blur(0);
}

.choose-addon {
	position: relative;
	background-image: url("../images/template/how-bg.png");
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

.choose-addon .swiper-container.swiper-addon {
	position: relative;
}

.choose-addon .swiper-container.swiper-addon:before {
	content: "";
	z-index: 2;
	background-image: linear-gradient(to right, white, rgb(255 255 255 / 0));
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 100%;
}

.choose-addon .swiper-container.swiper-addon:after {
	content: "";
	z-index: 1;
	background-image: linear-gradient(to left, white, rgb(255 255 255 / 0));
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 100%;
}

.choose-addon .card {
	background-image: url("../images/template/bg-addon.png");
	background-position: bottom right;
	background-size: contain;
	background-repeat: no-repeat;
	margin-bottom: 100px;
	position: relative;
	background-color: #f4fafd;
	height: 300px;
	width: 100%;
	padding: 30px;
	border-radius: 30px;
	box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
    /*-webkit-filter: blur(4px);
    filter: blur(4px);*/
 }

 .choose-addon .card .package {
 	position: absolute;
 	bottom: 0;
 	left: 30px;
 	bottom: 30px;
 }

 section.section-template.section-choose-question .choose-hero .cta a {
 	color: #4ccb5c;
 	font-weight: 700;
 }

 .question-wrapper .image {
 	max-width: 1024px;
 	margin: 0 auto 20px auto;
 }

 .server-wrapper .cta {
 	display: inline-block;
 	margin: 0 30px;
 	margin-bottom: 10px;
 }

 .server-wrapper .cta .btn-kedua:before {
 	width: 100%;
 }

 .server-wrapper .cta .btn-kedua {
 	font-size: 18px;
 }

 .server-wrapper .cta .btn-kedua.active {
 	color: #fff;
 }

 .server-wrapper .cta .btn-kedua.active:before {
 	z-index: -1;
 	background-color: #8BD1D2;
 }

 .section-template.section-choose-template {
 	margin-bottom: 50px;
 }

 .template-bg-left {
 	position: absolute;
 	top: -100px;
 	left: 0;
 }

 .template-bg-right {
 	position: absolute;
 	top: -100px;
 	right: 0;
 }

 .template-bg-left .image,
 .template-bg-right .image {
 	max-width: 480px;
 }

 section.section-template.section-choose-server {
 	padding: 100px 0;
 	background-image: url("../images/template/server-left.png"), url("../images/template/server-right.png");
 	background-position: center left, center right;
 	background-size: contain, contain;
 	background-repeat: no-repeat;
 }

 .server-wrapper .server-name {
 	/*background-color: #fff;*/
 	max-width: 480px;
 	padding: 10px 20px 15px 20px;
 	margin: 30px auto;
 	border: 1px solid rgba(0, 0, 0, 0.1);
 	border-top-left-radius: 20px;
 	border-bottom-left-radius: 10px;
 	border-top-right-radius: 10px;
 	border-bottom-right-radius: 20px;
 	/*box-shadow: 0px 7px 8px 0 rgb(0 0 0 / 6%);*/
 	transition: all 0.3s;
 }

 .server-wrapper .server-name:hover {
 	border-color: transparent;
 	box-shadow: 0px 7px 8px 0 #ceebf8a1;
 }

 .server-wrapper .server-name select.form-control {
 	max-width: 150px;
 	margin: 0 auto 10px auto;
 	text-align: center;
 	background-image: none;
 }

 .server-wrapper .server-name select.form-control:disabled {
 	color: #393e46;
 	background-color: transparent;
 }

 .nav-choose li {
 	float: none;
 	display: inline-block;
 	margin-right: 10px;
 	margin-bottom: 10px;
 }

 .nav-choose li a {
 	border-radius: 20px;
 }

 .nav-choose li.active a {
 	background-color: #8BD1D2 !important;
 	border-radius: 20px;
 	padding: 10px 20px;
 }

 .choose-card .image {
 	max-width: 480px;
 	height: 325px;
 	margin: 0 auto 10px auto;
 }
 .choose-card .image img
 {
 	object-fit: cover;
 }

 .choose-card .splash {
 	max-width: 150px;
 	position: absolute;
 	right: 0;
 	bottom: 75px;
 }

 .choose-card .action .cta {
 	display: inline-block;
 	margin: 0 15px;
 }

 .choose-card .action .cta .btn-utama:before,
 .choose-card .action .cta .btn-kedua:before {
 	width: 100%;
 }

 .choose-custom .image {
 	max-width: 1024px;
 	margin: 30px auto;
 }

 .row-floating {
 	display: flex;
 	align-items: center;
 }

 .choose-floating {
 	z-index: 2;
 	padding: 15px 0;
 	display: flex;
 	align-items: center;
 	background-color: #f4fafd;
 	position: fixed;
 	bottom: 0;
 	left: 0;
 	width: 100%;
 	min-height: 100px;
 }

 .btn-cta {
 	position: relative;
 	cursor: pointer;
 	background: #8BD1D2;
 	background: linear-gradient(120deg, #8BD1D2, #CEEBF8);
 	color: #fff;
 	display: inline-block;
 	width: auto;
 	text-decoration: none;
 	font-size: 18px;
 	font-weight: 400;
 	line-height: 18px;
 	letter-spacing: 0.2px;
 	padding: 15px 20px;
 	border-radius: 20px;
 	-webkit-transition: linear 0.3s, color 1s;
 	-moz-transition: linear 0.3s, color 1s;
 	transition: linear 0.3s, color 1s;
 	outline: none;
 	overflow: hidden;
 }

 .choose-floating .btn-cta {
 	width: 190px;
 }

 .btn-cta span.iconcart {
 	display: inline-block;
 	transition: all 0.6s;
 }

 .btn-cta span.iconword {
 	display: inline-block;
 	transition-delay: 0.3s;
 	transition: all 0.6s;
 }

 .btn-cta:hover,
 .btn-cta:active {
 	color: #393e46;
 	box-shadow: -2px -2px 5px #fff, 2px 2px 5px #babecc;
 }

 .btn-cta:hover span.iconcart {
 	-webkit-transform:  scaleX(-1) translateX(-15px) translateY(5px) rotate(-10deg);
 	transform: scaleX(-1) translateX(-15px) translateY(5px) rotate(-10deg);
 }

 .btn-cta:hover span.iconword {
 	font-size: 12px;
 	opacity: 0;
 }

 .btn-cta span.iconbasket {
 	position: absolute;
 	right: 50px;
 	top: 15px;
 	display: inline-block;
 	opacity: 0;
 	transition: ease-out 0.5s;
 	transition-delay: 0.1s;
 }

 .btn-cta:hover span.iconbasket {
 	opacity: 1;
 	-webkit-transform: translateY(-5px) translateX(-25px) rotate(-30deg);;
 	transform: translateY(-5px) translateX(-25px) rotate(-30deg);
 }

 .modal-backdrop {
 	z-index: 77;
 }

 .modal-addon,
 .modal-animation {
 	z-index: 99;
 	padding: 40px 15px;
 	backdrop-filter: blur(4px);
 }

 .modal-dialog .modal-content {
 	z-index: 50;
 	padding: 15px;
 	border: 1px solid transparent;
 	-webkit-transform: rotate(-3deg);
 	transform: rotate(-3deg);
 	border-radius: 20px;
 	padding: 5px;
 	background-color: #8BD1D2;
 	/*box-shadow: none;*/
 }

 .modal-dialog .modal-content .modal-card {
 	-webkit-transform: rotate(3deg);
 	transform: rotate(3deg);
 	background-color: #fff;
 	border-radius: 20px;
 	-webkit-box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
 	box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
 }

 .modal-dialog .modal-content .modal-body .modal-wrapper:after {
 	opacity: 0;
 	content: "";
 	z-index: -2;
 	background: rgb(255, 255, 255);
 	background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.7455575980392157) 10%, rgba(255, 255, 255, 0.4990589985994398) 30%, rgba(255, 255, 255, 1) 50%);
 	background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.7455575980392157) 10%, rgba(255, 255, 255, 0.4990589985994398) 30%, rgba(255, 255, 255, 1) 50%);
 	background: linear-gradient(180deg, rgba(255, 255, 255, 0.7455575980392157) 10%, rgba(255, 255, 255, 0.4990589985994398) 30%, rgba(255, 255, 255, 1) 50%);
 	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1);
 	position: absolute;
 	left: 0;
 	bottom: 10px;
 	height: 40px;
 	width: 100%;
 	backdrop-filter: blur(1px);
 }

 .modal-dialog .modal-content .modal-body .modal-wrapper #addons {
 	position: relative;
 	padding-right: 5px;
 	padding-bottom: 10px;
 	min-height: 200px;
 	max-height: 400px;
 	overflow-x: hidden;
 	overflow-y: scroll;
 }

 .modal-dialog .modal-content .modal-body .modal-wrapper:after~.collapse.in {
 	opacity: 1;
 	z-index: 2;
 }


 /* Styling Checkbox Starts */

 .checkbox-label {
 	display: block;
 	position: relative;
 	margin: auto;
 	cursor: pointer;
 	line-height: 24px;
 }

 .checkbox-label input[type='checkbox'] {
 	z-index: -1;
 	opacity: 0;
 	cursor: pointer;
 	position: absolute;
 	left: 0;
 	top: 0;
 	width: 100%;
 	height: 100%;
 	margin: 0;
 }

 .checkbox-label .checkbox-custom {
 	position: absolute;
 	top: 0px;
 	left: 0px;
 	height: 24px;
 	width: 24px;
 	background-color: transparent;
 	border-radius: 5px;
 	transition: all 0.3s ease-out;
 	-webkit-transition: all 0.3s ease-out;
 	-moz-transition: all 0.3s ease-out;
 	-ms-transition: all 0.3s ease-out;
 	-o-transition: all 0.3s ease-out;
 	border: 2px solid #8BD1D2;
 }

 .checkbox-label input[type='checkbox']:checked~.checkbox-custom {
 	background-color: #CEEBF8;
 	border-radius: 5px;
 	-webkit-transform: rotate(0deg) scale(1);
 	-ms-transform: rotate(0deg) scale(1);
 	transform: rotate(0deg) scale(1);
 	opacity: 1;
 	border: 2px solid #CEEBF8;
 }

 .checkbox-label .checkbox-custom::after {
 	position: absolute;
 	content: "";
 	left: 12px;
 	top: 12px;
 	height: 0px;
 	width: 0px;
 	border-radius: 5px;
 	border: solid #009BFF;
 	border-width: 0 3px 3px 0;
 	-webkit-transform: rotate(0deg) scale(0);
 	-ms-transform: rotate(0deg) scale(0);
 	transform: rotate(0deg) scale(0);
 	opacity: 1;
 	transition: all 0.3s ease-out;
 	-webkit-transition: all 0.3s ease-out;
 	-moz-transition: all 0.3s ease-out;
 	-ms-transition: all 0.3s ease-out;
 	-o-transition: all 0.3s ease-out;
 }

 .checkbox-label input[type='checkbox']:checked~.checkbox-custom::after {
 	-webkit-transform: rotate(45deg) scale(1);
 	-ms-transform: rotate(45deg) scale(1);
 	transform: rotate(45deg) scale(1);
 	opacity: 1;
 	left: 8px;
 	top: 3px;
 	width: 6px;
 	height: 12px;
 	border: solid #393e46;
 	border-width: 0 2px 2px 0;
 	background-color: transparent;
 	border-radius: 0;
 }


 /* For Ripple Effect */

 .checkbox-label .checkbox-custom::before {
 	position: absolute;
 	content: "";
 	left: 10px;
 	top: 10px;
 	width: 0px;
 	height: 0px;
 	border-radius: 5px;
 	border: 2px solid #8BD1D2;
 	-webkit-transform: scale(0);
 	-ms-transform: scale(0);
 	transform: scale(0);
 }

 .checkbox-label input[type='checkbox']:checked~.checkbox-custom::before {
 	left: -3px;
 	top: -3px;
 	width: 24px;
 	height: 24px;
 	border-radius: 5px;
 	-webkit-transform: scale(3);
 	-ms-transform: scale(3);
 	transform: scale(3);
 	opacity: 0;
 	z-index: 999;
 	transition: all 0.3s ease-out;
 	-webkit-transition: all 0.3s ease-out;
 	-moz-transition: all 0.3s ease-out;
 	-ms-transition: all 0.3s ease-out;
 	-o-transition: all 0.3s ease-out;
 }

 .addon-check label.checkbox-label .name {
 	margin-left: 30px;
 }

 .addon-check label.checkbox-label .name span.tooltip-toggle {
 	display: inline-block;
 	background-color: transparent;
 	padding: 2px 5px;
 	border-radius: 50%;
 	transition: all 0.3s;
 }

 .addon-check label.checkbox-label .name span.tooltip-toggle:hover {
 	background-color: #fef9ea;
 }

 .tooltip-toggle {
 	display: inline;
 }

 .tooltip-container {
 	opacity: 0;
 	-webkit-transform: translateX(-400px);
 	transform: translateX(-400px);
 	height: 0;
 	max-height: 0;
 	max-width: 100%;
 	background-color: #CEEBF8;
 	padding: 0;
 	border-radius: 20px;
 	box-shadow: 0 8px 18px 0 #ceebf8a1;
 	-webkit-transition: all 0.3s;
 	-moz-transition: all 0.3s;
 	-o-transition: all 0.3s;
 	transition: all 0.3s;
 }

 .tooltip-container .tooltip-wrapper {
 	opacity: 0;
 	padding: 10px 15px;
 	-webkit-transition: opacity 0.3s ease 0.3s;
 	-moz-transition: opacity 0.3s ease 0.3s;
 	-o-transition: opacity 0.3s ease 0.3s;
 	transition: opacity 0.3s ease 0.3s;
 }

 .tooltip-container .tooltip-wrapper:after {
 	content: " ";
 	position: absolute;
 	left: 15px;
 	top: -20px;
 	margin-left: 0px;
 	border-top: none;
 	border-right: 15px solid transparent;
 	border-left: 15px solid transparent;
 	border-bottom: 15px solid #CEEBF8;
 }

 .tooltip-toggle:hover+.tooltip-container {
 	margin: 15px 0;
 	padding: 10px;
 	height: 100%;
 	max-height: 300px;
 	opacity: 1;
 	z-index: 1;
 	-webkit-transform: translateX(0);
 	transform: translateX(0);
 }

 .tooltip-toggle:hover+.tooltip-container .tooltip-wrapper {
 	opacity: 1;
 }

 .design-list {
 	margin-bottom: 5px;
 }

 .design-list .product .radio {
 	position: relative;
 	max-width: 120px;
 	width: 100%;
 	display: inline-block;
 	margin: 0 2px 5px 2px;
 }

 .design-list .product .radio label span {
 	position: absolute;
 	right: -2px;
 	top: 0;
 }

 .design-list .product .radio label span a {
 	opacity: 0;
 	display: inline-block;
 	padding: 0 5px;
 	border-radius: 20px;
 }

 .design-list .product .radio:hover label span a {
 	opacity: 1;
 	background-color: #CEEBF8;
 }

 .design-list .product .radio input[type=radio] {
 	position: absolute;
 	opacity: 0;
 }

 .design-list .product .radio input[type=radio]+.radio-label {
 	padding-left: 0;
 }

 .design-list .product .radio input[type=radio]+.radio-label:before {
 	content: "";
 	background: #fff;
 	border-radius: 100%;
 	border: 1px solid #CEEBF8;
 	display: inline-block;
 	width: 20px;
 	height: 20px;
 	position: relative;
 	top: 2px;
 	margin-right: 2px;
 	vertical-align: top;
 	cursor: pointer;
 	text-align: center;
 	transition: all 250ms ease;
 }

 .design-list .product .radio input[type=radio]:checked+.radio-label:before {
 	background-color: #3197ee;
 	box-shadow: inset 0 0 0 4px #f4f4f4;
 }

 .design-list .product .radio input[type=radio]:focus+.radio-label:before {
 	outline: none;
 	border-color: #3197ee;
 }

 .design-list .product .radio input[type=radio]:disabled+.radio-label:before {
 	box-shadow: inset 0 0 0 4px #f4f4f4;
 	border-color: #b4b4b4;
 	background: #b4b4b4;
 }

 .design-list .product .radio input[type=radio]+.radio-label:empty:before {
 	margin-right: 0;
 }

 .modal-wrapper .title {
 	cursor: pointer;
 	padding-bottom: 10px;
 	border-bottom: 1px solid #8BD1D2;
 	background-position: center right 15px;
 	background-repeat: no-repeat;
 	background-image: url("../images/chevron-down.png");
 	background-size: 13px;
 }

 .modal-wrapper .title .wrapper {
 	max-width: 80%;
 }

 .modal-wrapper .title:hover {
 	background-color: #ceebf86e;
 }

 .noselection {
 	-webkit-touch-callout: none;
 	/* iOS Safari */
 	-webkit-user-select: none;
 	/* Safari */
 	-khtml-user-select: none;
 	/* Konqueror HTML */
 	-moz-user-select: none;
 	/* Old versions of Firefox */
 	-ms-user-select: none;
 	/* Internet Explorer/Edge */
 	user-select: none;
 }

 .addon-wrapper {
 	padding: 10px 0;
 }

 .addon-check {
 	position: relative;
 	/*overflow: hidden;*/
 	padding: 10px 0;
 	border-radius: 10px;
 	transition: all 0.3s;
 }

 .addon-check:hover {
 	background-color: #ceebf86e;
 	padding: 10px
 }

 .addon-check .wrapper {
 	position: relative;
 	float: left;
 	max-width: 75%;
 	width: 100%;
 }

 .addon-check .price {
 	float: right;
 }

 .addon-check label.checkbox-label {
 	overflow: hidden;
 }

 .addon-check label.checkbox-label .input-textarea {
 	margin-left: 30px;
 	width: 100%;
 	transition: all 0.3s;
 }

 .addon-check label.checkbox-label .input-textarea textarea.form-control {
 	width: 100%;
 	min-height: 40px;
 }

 .addon-check label.checkbox-label .quantity {
 	margin-left: 30px;
 	width: 125px;
 }

 .addon-check label.checkbox-label .quantity select.form-control {
 	width: 100%;
 }

 .modal-animation .modal-header .header-animation {
 	display: flex;
 	align-items: center;
 }

 .modal-animation .modal-header .header-animation .image {
 	max-width: 75px;
 	margin-left: 15px;
 	margin-right: 30px;
 }

 .modal.modal-addon .modal-footer,
 .modal-animation .modal-footer {
 	padding-top: 0;
 	padding-bottom: 30px;
 }

 .modal.modal-addon .modal-footer textarea.form-control {
 	min-height: 60px;
 }

 .modal.modal-addon .modal-footer .feature p.maka-small {
 	text-transform: capitalize;
 }

 .modal.modal-addon .modal-footer .action {
 	display: flex;
 }

 .modal.modal-addon .modal-footer .action button {
 	margin: 0 15px;
 	min-width: 150px;
 }

 .modal.modal-addon .modal-footer .action .btn-kedua:before {
 	width: 100%;
 }

 .modal.modal-addon .modal-footer .delete {
 	margin: 20px 15px 0 15px;
 }


 /*====================================== SECTION GEROBAK ======================================*/

 section.section-template.section-gerobak-hero {
 	margin-bottom: 50px;
 }

 .gerobak-hero .image {
 	max-width: 100%;
 	margin: -100px auto 20px auto;
 }

 section.section-template.section-edit-template {
 	/*margin-bottom: 200px;*/
 }

 .cart-wrapper .cart-list {
 	overflow: hidden;
 	padding: 10px;
 	display: flex;
 	align-items: center;
 	width: 100%;
 	justify-content: space-between;
 	border-radius: 20px;
 	transition: all 0.3s;
 }

 .cart-wrapper .cart-list:hover {
 	background-color: #ceebf86e;
 }

 .cart-wrapper .cart-list .cart-left {
 	float: left;
 	display: flex;
 	align-items: center;
 }

 .cart-wrapper .cart-list .cart-right {
 	float: right;
 }

 .cart-wrapper .cart-list .cart-left .image {
 	float: left;
 	max-width: 200px;
 	width: 100%;
 	margin-right: 20px;
 }

 .cart-wrapper .cart-list .cart-left .wrapper {
 	display: inline-block;
 }

 .choose-floating.gerobak-checkout .btn-cta {
 	width: auto;
 }

 .choose-floating.gerobak-checkout .backto {
 	position: absolute;
 	left: 0;
 }

 .choose-floating.gerobak-checkout .backto a {
 	font-weight: 700;
 	border: 1px solid #8BD1D2;
 	border-left: 0;
 	border-top-right-radius: 20px;
 	border-bottom-right-radius: 20px;
 	padding: 15px 10px 15px 5px;
 }

 .choose-floating.gerobak-checkout .backto a i {
 	margin-left: -20px;
 	transition: all 0.3s;
 }

 .choose-floating.gerobak-checkout:hover .backto a i {
 	margin-left: 0
 }


 /*====================================== SECTION ANIMATION ======================================*/

 section.section-animation .subject-head {
 	max-width: 720px;
 }

 section.section-animation.section-animation-hero {
 	padding-top: 120px;
 	background-image: url("../images/animation/hero-bg.jpeg");
 	background-position: center;
 	background-size: cover;
 	background-repeat: no-repeat;
 	margin-bottom: 0;
 	overflow: hidden;
 }

 section.section-animation.section-animation-hero .container-fluid {
 	padding: 0;
 }

 section.section-animation.section-animation-hero .image {
 	margin-top: 100px;
 }

 .animation-hero .word {
 	max-width: 720px;
 	margin: 0 auto;
 }

 .animation-hero .word h1.maka-head {
 	font-size: 60px;
 	line-height: 65px;
 }

 .herointermezo {
 	position: absolute;
 	top: -200px;
 	left: -75px;
 }

 .herointermezo .image {
 	max-width: 300px;
 }

 section.section-animation.section-animation-intermezo {
 	padding: 125px 0;
 	background: rgb(0, 72, 126);
 	background: -moz-linear-gradient(180deg, rgba(0, 72, 126, 1) 10%, rgba(111, 177, 228, 1) 65%, rgba(255, 255, 255, 1) 90%);
 	background: -webkit-linear-gradient(180deg, rgba(0, 72, 126, 1) 10%, rgba(111, 177, 228, 1) 65%, rgba(255, 255, 255, 1) 90%);
 	background: linear-gradient(180deg, rgba(0, 72, 126, 1) 10%, rgba(111, 177, 228, 1) 65%, rgba(255, 255, 255, 1) 90%);
 	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#00487e", endColorstr="#ffffff", GradientType=1);
 }

 section.section-animation.section-animation-work {
 	margin-top: 50px;
 	background-image: url("../images/animation/work-bg.png");
 	background-position: center center;
 	background-size: contain;
 	background-repeat: no-repeat;
 }

 .row-work {
 	display: flex;
 	align-items: center;
 	margin-bottom: 50px;
 }

 .work-word {
 	max-width: 480px;
 	margin-left: auto;
 }

 .work-word.medialuar {
 	margin-left: 0;
 	margin-right: auto;
 }

 .work-image .video {
 	max-width: 600px;
 	height: 600px;
 	margin: 0 auto;
 }

 .work-image .video video {
 	width: 100%;
 	height: 100%;
 }

 section.section-animation.section-animation-style {
 	margin-top: 50px;
 	background-image: url("../images/animation/style-bg.png");
 	background-position: center center;
 	background-size: contain;
 	background-repeat: no-repeat;
 }

 .style-card {
 	position: relative;
 	background-color: #CEEBF8;
 	max-width: 300px;
 	margin: 150px auto 0 auto;
 	padding: 100px 15px 15px 15px;
 	border-radius: 20px;
 }

 .style-card .image {
 	width: 300px;
 	position: absolute;
 	top: -125px;
 }

 .style-card .duration {
 	margin-top: 10px;
 }

 .style-card .duration p.maka-semi {
 	font-size: 18px;
 }

 section.section-animation.section-animation-karya {
 	margin-top: 100px;
 }
 .section-animation.section-animation-karya .swiper-karya
 {
 	background-color: transparent;
 }

 .karya-swiper .swiper-container {
 	padding: 50px 0;
 }

 .karya-swiper .swiper-slide {
 	-webkit-filter: blur(3px);
 	filter: blur(3px);
 }

 .karya-swiper .swiper-slide.swiper-slide-active {
 	-webkit-filter: blur(0);
 	filter: blur(0);
 }

 .karya-swiper .swiper-container.swiper-karya {
 	position: relative;
 	margin: 0 75px;
 }

 .karya-swiper .swiper-container.swiper-karya:before {
 	content: "";
 	z-index: 2;
 	background-image: linear-gradient(to right, white, rgb(255 255 255 / 0));
 	position: absolute;
 	left: 0;
 	top: 0;
 	width: 40px;
 	height: 100%;
 }

 .karya-swiper .swiper-container.swiper-karya:after {
 	content: "";
 	z-index: 1;
 	background-image: linear-gradient(to left, white, rgb(255 255 255 / 0));
 	position: absolute;
 	right: 0;
 	top: 0;
 	width: 40px;
 	height: 100%;
 }

 .karya-swiper .card {
 	background-image: url("../images/template/bg-addon.png");
 	background-position: bottom right;
 	background-size: 200px;
 	background-repeat: no-repeat;
 	margin-bottom: 100px;
 	position: relative;
 	background-color: #f4fafd;
 	height: 100%;
 	width: 100%;
 	padding: 0 0 30px 0;
 	border-radius: 20px;
 	border-top-left-radius: 30px;
 	border-top-right-radius: 30px;
 	box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
 	margin-bottom: 0;
    /*-webkit-filter: blur(4px);
    filter: blur(4px);*/
 }

 .karya-swiper .swiper-karya .swiper-button-prev,
 .karya-swiper .swiper-karya .swiper-button-next {
 	background-color: #fff;
 }
 .karya-swiper .card .iframe-karya
 {
 	width: 100%;
 	height: 400px;
 	border-radius: 20px;
 }
 .karya-swiper .card .iframe-karya iframe {

 	width: 100%;
 	height: 100%;
 	border-radius: 20px;
 }
 .iframe-wrapper
 {
 	opacity: 0;
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	transition: linear 0.3s;
 }
 .iframe-wrapper .iframe-play
 {
 	width: 100%;
 	height: 100%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	align-content: center;
 }
 .karya-swiper .swiper-slide .card .iframe-karya .iframe-layer
 {
 	display: block;
 	z-index: 3;
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background-color: transparent;
 }
 .karya-swiper .swiper-slide.swiper-slide-active .card .iframe-karya .iframe-layer
 {
 	display: none;
 }
 .card.card-karya-iframe:hover .iframe-karya .iframe-wrapper
 {
 	opacity: 1;
 }
 .card.card-karya-iframe .brand
 {
 	padding-bottom: 5px;
 }

 .section-animation.section-animation-karya .karya-swiper>.image {
 	max-width: 1024px;
 	margin: 0 auto 0 auto;
 }

 section.section-animation.section-animation-custom {
 	margin-top: 100px;
 }

 .custom-card {
 	margin-top: 150px;
 	background-color: #8bd1d238;
 	border-radius: 75px;
 	padding-bottom: 30px;
 }

 .custom-image {
 	max-width: 1024px;
 	margin: 0 auto 30px auto;
 }

 .custom-image img {
 	margin-top: -150px;
 }

 section.section-animation.section-animation-ngajarin {
 	margin-top: 100px;
 }

 .ngajarin-video .video {
 	z-index: 1;
 	position: relative;
 	max-width: 1024px;
 	width: 100%;
 	margin: 0 auto;
 }

 .ngajarin-video .video video#videoNgajarin {
 	width: 100%;
 	height: 100%;
 }

 .ngajarin-video .video .play {
 	position: absolute;
 	top: 35%;
 	left: 0;
 	width: 100%;
 	text-align: center;
 }

 .ngajarin-video .video .play .image {
 	cursor: pointer;
 	max-width: 150px;
 	margin: 0 auto;
 	border-radius: 50%;
 	transition: all 0.3s;
 }

 .ngajarin-video .video .play .image:hover {
 	-webkit-transform: translateY(-5px);
 	transform: translateY(-5px);
 	box-shadow: 0 8px 18px 20px #ceebf8a1
 }

 .ngajarin-video .cloud-left {
 	z-index: 3;
 	position: absolute;
 	top: 100px;
 	left: 0;
 	max-width: 250px;
 }

 .ngajarin-video .cloud-right {
 	z-index: 3;
 	position: absolute;
 	top: 0;
 	right: 0;
 	max-width: 250px;
 }

 .modal-ngajarin {
 	margin-top: 60px;
 }

 .modal-ngajarin .modal-dialog .modal-content {
 	background-color: transparent;
 	box-shadow: none;
 }

 .modal-ngajarin .modal-dialog .modal-header {
 	padding: 0;
 	overflow: hidden;
 }

 .modal-ngajarin .modal-dialog .modal-header .close {
 	opacity: 1;
 	background-color: #fff;
 	color: #393e46;
 	width: auto;
 	height: auto;
 	border-radius: 20px;
 	font-size: 20px;
 	padding: 10px;
 	margin-top: 0;
 	margin-right: 20px;
 }

 .ngajarin-iframe {
 	border-radius: 20px;
 }

 .ngajarin-iframe iframe {
 	border: 0;
 	width: 100%;
 	height: 550px;
 	border-radius: 20px;
 }

 section.section-animation.section-animation-course {
 	background-image: url("../images/animation/level-bg.png");
 	background-position: bottom center;
 	background-size: cover;
 	background-repeat: no-repeat;
 }

 .row-level {
 	margin-top: 125px;
 }

 .card-level {
 	max-width: 360px;
 	background-color: #fff;
 	padding: 0 10px 15px 10px;
 	border: 2px solid rgba(0, 0, 0, 0.1);
 	border-radius: 20px;
 	margin: 0 auto 120px auto;
 }

 .card-level .image {
 	max-width: 200px;
 	width: 100%;
 	height: 200px;
 	margin: -100px auto 15px auto;
 }

 .card-level .image img {
 	object-fit: contain;
 }

 .card-level .difficult span {
 	font-size: 30px;
 }

 .contact-animation {
 	position: relative;
 	max-width: 720px;
 	margin: 100px auto;
 	box-shadow: 0 8px 18px 0 #ceebf8a1;
 	margin-bottom: 20px;
 	border-top-left-radius: 70px;
 	border-top-right-radius: 70px;
 	border-bottom-left-radius: 30px;
 	border-bottom-right-radius: 30px;
 }

 .contact-animation .wrapper {
 	max-width: 720px;
 	margin: 0 auto;
 	padding: 50px;
 	background-color: #fff;
 	box-shadow: inset 0 0 0 10px #f4f4f4;
 	border-top-left-radius: 70px;
 	border-top-right-radius: 70px;
 	border-bottom-left-radius: 30px;
 	border-bottom-right-radius: 30px;
 }

 .contact-animation-left {
 	position: absolute;
 	top: -125px;
 	left: -125px;
 }

 .contact-animation-right {
 	position: absolute;
 	bottom: -200px;
 	right: -200px;
 }

 .contact-animation-bottom {
 	position: absolute;
 	bottom: -225px;
 	right: 200px;
 }

 .contact-animation-left .image {
 	max-width: 200px;
 }

 .contact-animation-right .image,
 .contact-animation-bottom .image {
 	max-width: 300px;
 }

 section.section-animation.section-animation-footer {
 	padding-top: 100px;
 }

 .animation-footer {
 	position: relative;
 	width: 100%;
 	height: 100vh;
 	background-image: url("../images/animation/footer.png");
 	background-position: center center;
 	background-size: cover;
 	background-repeat: no-repeat;
 }

 .animation-footer .airplane {
 	position: absolute;
 	top: -100px;
 	left: 200px;
 }

 .animation-footer .airplane .image {
 	max-width: 200px;
 }

 .animation-footer .word {
 	position: absolute;
 	bottom: 20px;
 	left: 0;
 	width: 100%;
 	text-align: center;
 }

 .animation-footer .word p.maka-semi {
 	margin-top: 10px;
 }

 .modal-animation .modal-body {
 	background-image: url("../images/animation/bg-modal-animation.jpg");
 	background-position: bottom right;
 	background-size: 100px;
 	background-repeat: no-repeat;
 }

 .modal-animation-wrapper .animation-section {
 	background-position: center left;
 	background-size: 100px;
 	background-repeat: no-repeat;
 }

 .modal-animation-wrapper .animation-section:nth-child(3n+1) {
 	background-image: url("../images/animation/list-1.jpg");
 }

 .modal-animation-wrapper .animation-section:nth-child(3n+2) {
 	background-image: url("../images/animation/list-2.jpg");
 }

 .modal-animation-wrapper .animation-section:nth-child(3n+3) {
 	background-image: url("../images/animation/list-3.jpg");
 	padding-bottom: 10px;
 }

 .modal-animation-wrapper ul {
 	padding-left: 75px;
 	margin-top: 10px;
 }

 .modal-animation-wrapper ul li {
 	margin-bottom: 5px;
 }


 /*====================================== SECTION COURSE ======================================*/

 section.section-animation.section-course-hero {
 	/*position: relative;*/
 	background-color: #CEEBF8;
 	padding-top: 100px;
 	padding-bottom: 350px;
 }

 .course-left .image,
 .course-right .image {
 	max-width: 350px;
 }

 .course-left {
 	z-index: 1;
 	position: absolute;
 	left: 0;
 	top: 12vh;
 }

 .course-right {
 	z-index: 1;
 	position: absolute;
 	right: 0;
 	top: 12vh;
 }

 @media only screen and (min-device-width: 1056px) and (max-device-width: 1248px) {
 	.course-left .image,
 	.course-right .image {
 		max-width: 250px;
 	}
 	.course-left,
 	.course-right {
 		top: 30vh;
 	}
 }

 .zindex {
 	z-index: 3;
 }

 .course-hero .word span.underline {
 	position: absolute;
 	left: 0;
 	bottom: -20px;
 	background-image: url("../images/hero-underline.svg");
 	background-position: center;
 	background-size: contain;
 	background-repeat: no-repeat;
 	width: 100%;
 	height: 20px;
 }

 .youtube-color {
 	color: #FF0000;
 }

 .btn-youtube {
 	background-color: #FF0000;
 }

 .btn-youtube:active,
 .btn-youtube:focus {
 	color: #fff;
 }

 .course-hero-trailer {
 	margin-top: -350px;
 }

 .course-hero-trailer .iframe-trailer {
 	max-width: 720px;
 	margin: 15px auto 50px auto;
 	border: 2px solid #8BD1D2;
 	border-radius: 30px;
 	padding: 10px;
 	box-shadow: 0 8px 18px 0 #ceebf8a1;
 }

 .course-hero-trailer .iframe-trailer iframe {
 	width: 100%;
 	height: 500px;
 	border-radius: 20px;
 	box-shadow: none;
 	border: 0;
 }

 section.section-animation.section-course-list {
 	margin-bottom: 0;
 }

 .row-course .image .trailer {
 	opacity: 0;
 	position: absolute;
 	top: 30%;
 	left: 0;
 	width: 100%;
 	text-align: center;
 	transition: all 0.3s;
 }

 .row-course .cart-wrapper .cart-list {
 	position: relative;
 	flex-wrap: wrap;
 }

 .row-course .cart-wrapper .cart-list:hover .image .trailer {
 	opacity: 1;
 }

 .row-course .cart-wrapper .cart-list .desc-cta {
 	margin-bottom: 10px;
 }

 .row-course .cart-wrapper .cart-list .desc-cta span.underline {
 	position: absolute;
 	left: 30%;
 	bottom: -15px;
 	background-image: url("../images/hero-underline.svg");
 	background-position: center;
 	background-size: contain;
 	background-repeat: no-repeat;
 	width: 100px;
 	height: 20px;
 	transition: all 0.3s;
 }

 .row-course .cart-wrapper .cart-list .desc-cta[aria-expanded="true"] span.underline {
 	left: 0;
 	width: 100%;
 }

 .pointer {
 	cursor: pointer;
 }

 .row-course .cart-wrapper .cart-list .desc-cta:hover span.underline {
 	left: 0;
 	width: 100%;
 }

 .course-desc {
 	margin-top: 20px;
 	margin-left: 220px;
 }

 .row-course .cart-wrapper .cart-list {
 	min-height: 100px;
 }

 .row-course .cart-wrapper .cart-list .cart-left {
 	max-width: 75%;
 }

 .row-course .cart-wrapper .cart-list .cart-right {
 	position: absolute;
 	top: 30px;
 	right: 15px;
 }

 .row-course .cart-wrapper .cart-list .cart-right .price span.price-discount {
 	font-size: 15px;
 }

 .row-course .cart-wrapper .cart-list.coming-soon {
 	flex-wrap: none;
 	opacity: 0.5;
 }

 .row-course .cart-wrapper .cart-list.coming-soon .cart-right {
 	position: static;
 	top: 0;
 	right: 0;
 }

 .row-course .cart-wrapper .cart-list.coming-soon:hover {
 	background-color: #F5F5F5;
 }

 @keyframes floating {
 	0% {
 		transform: translate3d(0, 0, 0);
 	}
 	45% {
 		transform: translate3d(0, -10%, 0);
 	}
 	55% {
 		transform: translate3d(0, -10%, 0);
 	}
 	100% {
 		transform: translate3d(0, 0, 0);
 	}
 }

 @keyframes floatingShadow {
 	0% {
 		transform: scale(1);
 	}
 	45% {
 		transform: scale(0.7);
 	}
 	55% {
 		transform: scale(0.7);
 	}
 	100% {
 		transform: scale(1);
 	}
 }

 .course-discount {
 	margin-bottom: 40px;
 }

 .course-discount .wrapper {
 	margin: 15px 0;
 	display: inline-block;
 	background-color: #CEEBF8;
 	padding: 15px 30px;
 	border-radius: 30px;
 	animation: floating 3s ease-in-out infinite;
 }

 .shadow {
 	margin-top: 0;
 	width: 128px;
 	height: 16px;
 	background-color: rgba(234, 234, 234, 0.5);
 	margin-right: auto;
 	margin-left: auto;
 	border-radius: 50%;
 	animation: floatingShadow 3s ease-in-out infinite;
 }

 span.price-discount {
 	display: inline-block;
 	margin-right: 5px;
 	text-decoration: line-through;
 	opacity: 0.3;
 }

 section.section-animation.section-private {
 	padding: 25px 0;
 	position: relative;
 	overflow: hidden;
 	margin-bottom: 150px;
 }

 .private-left {
 	position: absolute;
 	max-width: 275px;
 	left: 20px;
 	bottom: 100px;
 }

 .private-right {
 	position: absolute;
 	max-width: 275px;
 	right: 20px;
 	bottom: 100px;
 }

 .row-private .course-private {
 	max-width: 480px;
 	margin: 0 auto;
 	text-align: center;
 }

 .row-private .course-private .wrapper {
 	max-width: 480px;
 	background-color: #ceebf866;
 	border-radius: 100%;
 	padding: 75px;
 }

 .private-toa {
 	position: absolute;
 	bottom: -75px;
 	left: -225px;
 	max-width: 250px;
 }

 .course-private .image {
 	max-width: 480px;
 	margin: 0 auto 15px auto;
 }

 .pulse {
 	animation: pulse 3s infinite ease-in-out alternate;
 }

 @keyframes pulse {
 	from {
 		transform: scale(0.8);
 	}
 	to {
 		transform: scale(1.2);
 	}
 }

 .course-private span.underline {
 	position: absolute;
 	left: 30%;
 	bottom: -20px;
 	background-image: url("../images/hero-underline.svg");
 	background-position: center;
 	background-size: contain;
 	background-repeat: no-repeat;
 	width: 40%;
 	height: 20px;
 }


 /*====================================== SECTION CHECKOUT ======================================*/

 .checkout-hero .image {
 	max-width: 250px;
 	margin: -30px auto 0 auto;
 }

 .checkout-hero .subject-head {
 	margin-top: -50px;
 }

 .checkout-summary .checkout-ref {
 	display: flex;
 	flex-wrap: nowrap;
 	align-items: center;
 	margin-bottom: 15px;
 }

 .checkout-summary .checkout-ref .wrapper {
 	padding-right: 10px;
 }

 .checkout-summary .checkout-ref button.btn-utama:before {
 	width: 100%;
 }

 .checkout-summary .cart-wrapper .cart-list .cart-left .image {
 	max-width: 100px;
 }

 .checkout-summary .checkout-total {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 }

 .checkout-summary .checkout-total .left {
 	margin-left: 15px;
 }

 .checkout-summary .checkout-total .right span.underline {
 	position: absolute;
 	right: -10px;
 	bottom: -15px;
 	background-image: url("../images/hero-underline.svg");
 	background-position: center;
 	background-size: contain;
 	background-repeat: no-repeat;
 	width: 175px;
 	height: 20px;
 }
 /*====================================== SECTION FAQ ======================================*/
 section.section-faq-cta
 {
 	margin-top: 100px;
 }
 .faq-cta
 {
 	max-width: 720px;
 	margin: 0 auto;
 	display: flex;
 	align-items: center;
 	border: 2px solid #33b8c4;
 	padding: 15px;
 	border-radius: 30px;
 	background-image: linear-gradient(120deg, #CEEBF8, #fff);
 	box-shadow: 0 8px 18px 0 rgb(0 0 0 / 18%);
 }
 .faq-cta .image
 {
 	flex-basis: 250px;
 	flex-grow: 0;
 	flex-shrink: 0;
 }
 .faq-cta .cta
 {
 	margin-top: 30px;
 	margin-bottom: 20px;
 }
 #faq-sticky {
 	position: -webkit-sticky;
 	position: sticky;
 	top: 50px;
 }

 .faq-sticky .image {
 	max-width: 720px;
 	margin: 0 auto;
 }

 .faq {
 	max-width: 720px;
 	background: #FFFFFF;
 	box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
 	border-radius: 4px;
 }

 .faq .card {
 	border: none;
 	background: none;
 	border-bottom: 1px dashed #CEE1F8;
 }

 .faq .card .card-header {
 	position: relative;
 	padding: 0px;
 	border: none;
 	background: none;
 	-webkit-transition: all 0.3s ease 0s;
 	-moz-transition: all 0.3s ease 0s;
 	-o-transition: all 0.3s ease 0s;
 	transition: all 0.3s ease 0s;
 }

 .faq .card .card-header:hover {
 	background: #ceebf8bf;
 	padding-left: 10px;
 }

 .faq .card .card-header .faq-title {
 	width: 100%;
 	text-align: left;
 	padding: 15px 30px 15px 50px;
 	text-decoration: none !important;
 	-webkit-transition: all 0.3s ease 0s;
 	-moz-transition: all 0.3s ease 0s;
 	-o-transition: all 0.3s ease 0s;
 	transition: all 0.3s ease 0s;
 	cursor: pointer;
 }

 .faq .card .card-header .faq-title .badge {
 	position: absolute;
 	top: 17px;
 	left: 10px;
 	display: inline-block;
 	width: 30px;
 	height: 20px;
 	line-height: 14px;
 	float: left;
 	-webkit-border-radius: 100px;
 	-moz-border-radius: 100px;
 	border-radius: 100px;
 	text-align: center;
 	background: #8BD1D2;
 	color: #fff;
 	font-size: 12px;
 	/*margin-right: 10px;*/
 }

 .faq .card .card-body {
 	padding: 15px 35px 15px 55px;
 	letter-spacing: 1px;
 	border-top: 1px solid #F3F8FF;
 }

 @media (max-width: 991px) {
 	.faq-sticky
 	{
 		position: static;
 		position: static;
 		margin-bottom: 20px;
 	}
 	.faq {
 		margin-bottom: 30px;
 	}
 	.faq .card .card-header .faq-title {
 		margin-top: 0;
 	}
 	.faq .card .card-header .faq-title .badge
 	{
 		top: 19px;
 	}
 	.faq .card .card-body
 	{
 		padding: 15px 15px 15px 55px;
 	}
 }


 /*====================================== SECTION PAYMENT ======================================*/

 .payment-left {
 	position: absolute;
 	top: 10%;
 	left: 0;
 }

 .payment-right {
 	position: absolute;
 	bottom: 0;
 	right: 0;
 }

 .payment-left .image,
 .payment-right .image {
 	max-width: 150px;
 }

 .payment-container {
 	max-width: 480px;
 	margin: 150px auto 0 auto;
 	border: 1px solid #CEEBF8;
 	border-radius: 20px;
 	padding: 15px;
 	transition: all 0.3s;
 }

 .payment-container .image {
 	background-color: #fff;
 	max-width: 480px;
 	margin: -200px auto 0 auto;
 }

 .payment-container:hover {
 	border-color: transparent;
 	box-shadow: 0 8px 18px 0 #ceebf8a1;
 }

 .payment-form .norek-form {
 	box-sizing: border-box;
 	display: flex;
 	text-align: center;
 	flex-direction: row;
 	background-color: #fff;
 	border: 1px solid #ccc;
 	padding: 15px 10px;
 	margin-bottom: 20px;
 	border-radius: 20px;
 	justify-content: space-between;
 	width: 100%;
 	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.07);
 }

 .payment-form .norek-form #link {
 	align-self: center;
 	text-align: center;
 	font-size: 18px;
 	letter-spacing: 1.2px;
 	color: #333;
 	font-weight: bold;
 	flex-grow: 2;
 	background-color: #fff;
 	border: none;
 }

 .payment-form .norek-form #copy {
 	position: absolute;
 	top: 10px;
 	right: 10px;
 	width: 30px;
 	height: 30px;
 	margin-left: 20px;
 	border: 1px solid #CEEBF8;
 	border-radius: 5px;
 	background-color: #CEEBF8;
 	transition: all 0.3s;
 }

 .payment-form .norek-form #copy:hover {
 	background-color: #8BD1D2;
 	border-color: transparent;
 }

 .payment-form .norek-form #copy span {
 	display: block;
 	line-height: 30px;
 	position: relative;
 }

 .payment-form .norek-form #copy span::before {
 	display: block;
 	width: 15px;
 	margin: 0 auto;
 }

 .payment-form .norek-form #copy span.copied::after {
 	position: absolute;
 	top: -2px;
 	right: 35px;
 	height: 30px;
 	display: block;
 	content: "Copied";
 	font-size: 16px;
 	color: rgba(0, 0, 0, 0.50);
 	line-height: 24px;
 	letter-spacing: 1px;
 	padding: 2px 10px;
 	color: #fff;
 	background-color: #8BD1D2;
 	border-radius: 5px;
 	opacity: 1;
 	will-change: opacity, transform;
 	-webkit-animation: showcopied 1.5s ease;
 	animation: showcopied 1.5s ease;
 }

 .norek-form input {
 	outline: 0;
 }

 .norek-form #copy:hover {
 	cursor: pointer;
 	background-color: #dfdfdf;
 	transition: background-color 0.3s ease-in;
 }

 @-webkit-keyframes showcopied {
 	0% {
 		opacity: 0;
 		transform: translateX(100%);
 	}
 	70% {
 		opacity: 1;
 		transform: translateX(0);
 	}
 	100% {
 		opacity: 0;
 	}
 }

 @keyframes showcopied {
 	0% {
 		opacity: 0;
 		transform: translateX(100%);
 	}
 	70% {
 		opacity: 1;
 		transform: translateX(0);
 	}
 	100% {
 		opacity: 0;
 	}
 }

 .btn-bca {
 	background-color: #1473e6;
 	color: #fff;
 	position: relative;
 	display: inline-block;
 	width: auto;
 	text-decoration: none;
 	font-size: 12px;
 	font-weight: 700;
 	line-height: 18px;
 	letter-spacing: 0.2px;
 	padding: 5px 12px;
 	border-radius: 20px;
 	-webkit-transition: all 0.5s;
 	-moz-transition: all 0.5
 }

 .payment-norek .rek-image {
 	display: none;
 	max-width: 200px;
 	margin: 0 auto 0px auto;
 }

 .norek-form .rek-norek {
 	position: absolute;
 	top: -15px;
 	left: 0;
 	width: 100%;
 	text-align: center;
 }

 .norek-form .rek-name {
 	position: absolute;
 	bottom: -18px;
 	left: 0;
 	width: 100%;
 	text-align: center;
 }

 .norek-form .rek-name .wrapper {
 	display: inline-block;
 	background-color: #fff;
 	padding: 5px 12px;
 	border-radius: 20px;
 }

 .thankyou-left {
 	position: absolute;
 	top: 0;
 	left: -100px;
 }

 .thankyou-right {
 	position: absolute;
 	bottom: 0;
 	right: -100px;
 }

 .thankyou-left .image,
 .thankyou-right .image {
 	max-width: 150px;
 }

 .thankyou-card .image {
 	max-width: 480px;
 	margin: 0 auto 15px auto;
 }

 #modalThankyou .modal-header {
 	border: 0;
 	padding-bottom: 0;
 }

 #modalThankyou .modal-body {
 	padding-top: 0;
 }


 /*====================================== SECTION REFERRAL ======================================*/

 .ref-left {
 	max-width: 200px;
 	position: absolute;
 	left: 0;
 	top: 0;
 }

 .ref-right {
 	max-width: 200px;
 	position: absolute;
 	right: 0;
 	bottom: 0;
 }

 .ref-container .ref-wrapper {
 	display: flex;
 	align-items: center;
 	margin-bottom: 20px;
 }

 .ref-container .ref-wrapper .ref-apply {
 	margin-left: 10px;
 }

 .ref-container .ref-wrapper .ref-apply button:before {
 	width: 100%;
 }

 .ref-container table thead td {
 	font-weight: 700;
 	color: #8BD1D2;
 	vertical-align: middle;
 }

 .ref-container table td {
 	text-align: center;
 }

 .ref-container table tbody td {
 	font-weight: 400;
 }


 /*====================================== SECTION KARYA KAMI ======================================*/

 section#portfolio {
 	position: relative;
 	min-height: 100vh;
 	background-image: url("../images/karya-bg.svg");
 	background-position: center center;
 	background-size: 1000px;
 	margin-bottom: 100px;
 	background-repeat: no-repeat;
 }

 section#portfolio-kami .subject-heading .maka-head span.underline {
 	width: 75%;
 }

 .arrow {
 	position: absolute;
 	top: 25%;
 	right: 5%;
 }

 @media (max-width: 1056px) {
 	.arrow {
 		right: 0;
 	}
 }

 .arrow .word {
 	text-align: center;
 }

 .arrow .word .maka-info {
 	color: rgba(203, 232, 244, 1);
 }

 .bounce {
 	-webkit-animation: bounce 2s infinite;
 	animation: bounce 2s infinite;
 }

 @-webkit-keyframes bounce {
 	0%,
 	20%,
 	50%,
 	80%,
 	100% {
 		-webkit-transform: translateY(0);
 		transform: translateY(0);
 	}
 	40% {
 		-webkit-transform: translateY(-30px);
 		transform: translateY(-30px);
 	}
 	60% {
 		-webkit-transform: translateY(-15px);
 		transform: translateY(-15px);
 	}
 }

 @keyframes bounce {
 	0%,
 	20%,
 	50%,
 	80%,
 	100% {
 		-webkit-transform: translateY(0);
 		transform: translateY(0);
 	}
 	40% {
 		-webkit-transform: translateY(-30px);
 		transform: translateY(-30px);
 	}
 	60% {
 		-webkit-transform: translateY(-15px);
 		transform: translateY(-15px);
 	}
 }

 .karya-wrapper {
 	position: relative;
 }

 .karya-puzzle {
 	display: inline-block;
 	max-width: 300px;
 	width: 100%;
 	margin: 0 30px;
 	transition: all 0.6s;
 }

 .karya-puzzle.top-left {
 	transform: rotate(-5deg);
 }

 .karya-puzzle.top-center {
 	transform: rotate(3deg);
 }

 .karya-puzzle.top-right {
 	max-width: 235px;
 	transform: rotate(-10deg);
 }

 .karya-puzzle.bottom-left {
 	max-width: 235px;
 	transform: rotate(10deg);
 }

 .karya-puzzle.bottom-center {
 	transform: rotate(-8deg);
 }

 .karya-puzzle.bottom-right {
 	transform: rotate(8deg);
 }

 section#portfolio:hover .karya-puzzle.top-left {
 	transform: translate(130px, 40px);
 	transition-delay: 0.2s;
 }

 section#portfolio:hover .karya-puzzle.top-center {
 	transform: translate(0, 40px);
 	transition-delay: 0.4s;
 }

 section#portfolio:hover .karya-puzzle.bottom-center {
 	transform: translate(0px, -58px);
 	transition-delay: 0.6s;
 }

 section#portfolio:hover .karya-puzzle.bottom-right {
 	transform: translate(-130px, -25px);
 	transition-delay: 0.8s;
 }

 section#portfolio:hover .karya-puzzle.top-right {
 	transform: translate(-130px, 73px);
 	transition-delay: 1s;
 }

 section#portfolio:hover .karya-puzzle.bottom-left {
 	transform: translate(130px, -60px);
 	transition-delay: 1.2s;
 }

 .karya-wrapper.desktop {
 	display: block;
 }

 .karya-wrapper.mobile {
 	display: none;
 }

 .karya-more {
 	margin-top: 100px;
 }

 .karya-vector {
 	margin-top: 50px;
 }


 /*====================================== SECTION KARYA STUDY ======================================*/

 section.section-study-hero {
 	position: relative;
 	padding-bottom: 50px;
 }

 .flight .image {
 	z-index: 99;
 	position: absolute;
 	top: 0%;
 	left: 0;
 }

 .hero-sequence {
 	position: relative;
 	height: 200vh;
 	width: 100%;
 }

 .hero-sequence .hero-word {
 	z-index: 2;
 	width: 100%;
 	max-width: 100%;
 	position: absolute;
 	top: 20px;
 	left: 0;
 	text-align: center;
 }

 .sticky-element {
 	position: -webkit-sticky;
 	position: sticky;
 	top: 0;
 	left: 0;
 	height: 110vh;
 	overflow: hidden;
 }

 .sequence-element {
 	overflow: hidden;
 	position: relative;
 	max-width: 100%;
 	width: 100%;
 	height: 100%;
 	margin: 0 auto;
 }

 .sequence-element canvas#hero_canvas {
 	display: block;
 	position: absolute;
 	left: 50%;
 	top: 50%;
 	max-height: 100vh;
 	max-width: 100vw;
 	transform: translate(-50%, -50%);
 	-webkit-transform: translate(-50%, -50%);
 }

 section.section-study-detail {
 	padding: 50px 0;
 	/*background-color: #a1d4e9;*/
 	transition: all 1s;
 	background-image: linear-gradient(#a1d4e9, #fff, #a1d4e9);
 }

 section.section-study-detail:hover {
 	padding: 75px 30px 50px 30px;
 	border-top-left-radius: 35%;
 	border-top-right-radius: 35%;
 }

 section.section-study-intermezo {
 	padding: 50px 0 100px 0;
 	/*background-color: #a1d4e9;*/
 	background: rgb(161, 212, 233);
 	background: -moz-linear-gradient(180deg, rgba(161, 212, 233, 1) 95%, rgba(255, 255, 255, 1) 100%);
 	background: -webkit-linear-gradient(180deg, rgba(161, 212, 233, 1) 95%, rgba(255, 255, 255, 1) 100%);
 	background: linear-gradient(180deg, rgba(161, 212, 233, 1) 95%, rgba(255, 255, 255, 1) 100%);
 	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#a1d4e9", endColorstr="#ffffff", GradientType=1);
 }

 section.section-study-intermezo .hero-word .maka-head {
 	margin-bottom: 40px;
 }

 .sticky-col-intermezo {
 	position: -webkit-sticky;
 	position: sticky;
 	top: 0;
 	left: 0;
 	height: 100vh;
 	display: flex;
 	align-items: center;
 	overflow: hidden;
 }

 .sticky-intermezo {
 	position: -webkit-sticky;
 	position: sticky;
 	top: 0;
 	left: 0;
 	height: 100vh;
 	overflow: hidden;
 }

 .section-study-intermezo .hero-word span {
 	display: inline-block;
 }

 .study-wrapper {
 	text-align: center;
 }

 .intermezo-sequence {
 	height: 300vh;
 	margin-right: -15px;
 }

 .intermezo-element {
 	overflow: hidden;
 	position: relative;
 	max-width: 1440px;
 	width: 100%;
 	height: 100vh;
 	margin: 0 auto;
 }

 .intermezo-element canvas#intermezo_canvas {
 	display: block;
 	width: 100%;
 	height: 100%;
 }

 section.section-study-challenge {
 	margin-bottom: 50px;
 }

 .study-challenge {
 	max-width: 720px;
 	margin: 0 auto;
 }

 .challenge-video {
 	max-width: 1024px;
 	width: 100%;
 	height: 300px;
 	margin: -25px auto 0 auto;
 }

 .challenge-video #videoChallenge {
 	width: 100%;
 }

 section.section-study-gallery {
 	position: relative;
 	height: 100%;
 	/*width: 100vw;*/
 }

 .gallery-container {
 	position: relative;
 	height: 105vh;
 	/*overflow: hidden;*/
 }

 .galleries {
 	position: absolute;
 	transition: all 0.3s;
 	width: 300px;
 	object-fit: contain;
 }

 .gallery-1 {
 	left: 10%;
 	top: 45%;
 }

 .gallery-2 {
 	width: 500px;
 	left: 32%;
 	top: 55%;
 }

 .gallery-3 {
 	left: 35%;
 	top: 50%;
 }

 .gallery-4 {
 	top: 90%;
 	left: 5%;
 }

 .gallery-5 {
 	top: 75%;
 	left: 60%;
 }

 .gallery-6 {
 	top: 45%;
 	left: 75%;
 }

 .gallery-7 {
 	top: 85%;
 	left: 65%;
 }

 .gallery-8 {
 	top: 100%;
 	left: 25%;
 }

 section.section-study-challenge {
 	padding: 50px 0;
 }

 section.section-study-design {
 	padding: 50px 0;
 	background-color: #f7f7f7;
 	background-image: linear-gradient(#fff, #f7f7f7, #f7f7f7);
 }

 .study-mockup {
 	margin-left: -15px;
 	margin-bottom: 30px;
 }

 .study-container {
 	max-width: 720px;
 	margin: 0 auto;
 }

 .sticky-study {
 	position: -webkit-sticky;
 	position: sticky;
 	top: 50px;
 }

 .study-detail,
 .study-faces,
 .study-font {
 	margin: 15px 0;
 }

 .study-faces .image {
 	max-width: 300px;
 }

 .study-font .wrapper .image {
 	max-width: 400px;
 }

 .study-color {
 	margin-top: -15px;
 }

 .study-color .wrapper {
 	display: inline-block;
 	margin-right: 10px;
 }

 .study-color .wrapper .image {
 	max-width: 50px;
 }

 .study-divider {
 	padding: 30px 0 0 0;
 	background-image: linear-gradient(#f7f7f7, #fff);
 }

 .study-divider .image {
 	/*height: 200px;*/
 }

 section.section-study-karya {
 	background-color: #fff;
 }

 section.section-study-karya .hero-word {
 	margin-top: 0;
 }


 /*====================================== SECTION PRICING ======================================*/

 section#pricing {
 	overflow: hidden;
 	position: relative;
 	background-image: url(../images/karya/bg-karya.gif);
 	background-size: contain;
 	background-position: top 300px center;
 	background-repeat: no-repeat;
 }

 .pricing-card {
 	position: relative;
 	background-color: #fff;
 	padding: 15px 0;
 	max-width: 400px;
 	border-radius: 20px;
 	border: 1px solid rgba(0, 0, 0, 0.1);
 	margin: 0 auto;
 	margin-bottom: 30px;
 }

 .pricing-card.template {
 	/*border: 2px solid #CEEBF8;*/
 	box-shadow: 0 8px 18px 0 #ceebf8a1;
 }

 .pricing-card.custom {
 	/*border: 2px solid #8BD1D2;*/
 	box-shadow: 0 8px 18px 0 #8bd1d29c;
 }

 .pricing-card.template .vector {
 	position: absolute;
 	left: -150px;
 	top: 40%;
 }

 .pricing-card .vector .image {
 	width: 150px;
 }

 .pricing-card.custom .vector {
 	position: absolute;
 	right: -150px;
 	top: 40%;
 }

 .pricing-card .wrapper {
 	padding: 0 15px;
 	margin: 10px 0;
 }

 .pricing-card .top {
 	position: relative;
 	padding: 0 15px;
 	margin-bottom: 10px;
 }

 .pricing-card .top>.image {
 	margin-left: 20px;
 	max-width: 100px;
 }

 .pricing-card.template .top .tag {
 	position: absolute;
 	top: -10px;
 	left: -75px;
 }

 .pricing-card.template .top .tag>.image {
 	max-width: 125px;
 }

 .pricing-card.custom .top .tag {
 	position: absolute;
 	top: -15px;
 	right: -100px;
 }

 .pricing-card.custom .top .tag>.image {
 	max-width: 150px;
 }

 .pricing-card .wrapper .mid .word {
 	margin-top: 10px;
 }

 .pricing-card .wrapper .mid .feature {
 	margin: 10px 0;
 	padding: 10px 0;
 	border-top: 1px solid rgba(0, 0, 0, 0.1);
 	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }

 .pricing-card .wrapper .mid .feature ul {
 	list-style: none;
 	margin-bottom: 0;
 }

 .pricing-card .wrapper .mid .feature ul li {
 	margin-bottom: 10px;
 	word-wrap: break-word;
 	font-size: 16px;
 	line-height: 24px;
 	letter-spacing: 0.2px;
 	font-weight: 300;
 	color: #393e46;
 	transition: all 0.6s;
 }

 .pricing-card .wrapper .bot .word {
 	text-align: center;
 }

 .pricing-card .wrapper .bot .action {
 	margin-top: 10px;
 }

 .pricing-card .wrapper .bot .action a.btn-utama::before {
 	width: 100%;
 }

 .pricing-character {
 	position: relative;
 	top: -50px;
 }

 .pricing-character .image {
 	max-width: 200px;
 	margin: 0 auto;
 }

 .row-aftersales {
 	margin-bottom: 50px;
 }

 @-webkit-keyframes sales_pop {
 	0% {
 		box-shadow: 0 8px 18px 0 rgb(0 0 0 / 0%);
 	}
 	100% {
 		box-shadow: 0 8px 18px 0 rgb(0 0 0 / 15%);
 	}
 }

 .row-sales {
 	background-image: url("../images/aftersales-bg.svg");
 	background-size: contain;
 	background-position: center;
 	background-repeat: no-repeat;
 }

 .sales-card {
 	background-color: #fff;
 	max-width: 400px;
 	padding: 30px 15px;
 	border-radius: 20px;
 	border: 1px solid rgba(0, 0, 0, 0.1);
 	box-shadow: 0 8px 18px 0 rgb(0 0 0 / 0%);
 	transition: all 0.3s;
 }

 .sales-card.one {
 	transition-delay: 0.3s;
 }

 .sales-card.two {
 	transition-delay: 0.6s;
 }

 .sales-card.three {
 	transition-delay: 0.9s;
 }

 .sales-card.four {
 	transition-delay: 1.3s;
 }

 .row-sales:hover .sales-card {
 	box-shadow: 0 8px 18px 0 rgb(0 0 0 / 18%);
 	border-color: transparent;
 }

 .sales-card .image {
 	max-width: 150px;
 	height: 100px;
 	margin: 0 auto 20px auto;
 }

 .sales-card.left {
 	margin: 0 0 30px auto;
 }

 .sales-card.right {
 	margin: 0 auto 30px 0;
 }


 /*====================================== SECTION DIGITAL ADS ======================================*/

 section#hero-ads {
 	height: 100vh;
 	padding-bottom: 50px;
 	background-image: url("../images/ads/hero-ads.svg");
 	background-size: contain;
 	background-position: center;
 	background-size: 1000px;
 	background-repeat: no-repeat;
 }

 @media (max-width: 1248px) {
 	section#hero-ads {
 		background-size: contain;
 	}
 }

 section#hero-ads .hero-word .maka-head span.underline {
 	position: absolute;
 	left: 50px;
 	bottom: -30px;
 	background-image: url("../images/hero-underline.svg");
 	background-position: center;
 	background-size: contain;
 	background-repeat: no-repeat;
 	width: 75%;
 	height: 20px;
 }

 section#ads-product .subject-heading .maka-head span.underline {
 	position: absolute;
 	left: 0px;
 	bottom: -30px;
 	background-image: url("../images/hero-underline.svg");
 	background-position: center;
 	background-size: contain;
 	background-repeat: no-repeat;
 	width: 100%;
 	height: 20px;
 }

 .row-ads {
 	margin-bottom: 100px;
 }

 .ads-picture {
 	max-width: 500px;
 	width: 100%;
 	margin: 0 auto;
 	margin-bottom: 30px;
 }

 .ads-picture .content {
 	max-width: 400px;
 	width: 100%;
 	position: absolute;
 	top: 135px;
 	left: 50px;
 }

 .ads-card {
 	position: relative;
 	background-color: #f9f3f3;
 	padding: 15px;
 	border-radius: 20px;
 	margin-bottom: 40px;
 }

 .ads-package {
 	margin-top: 40px;
 }

 .ads-card.favourite {
 	padding-top: 30px;
 	background-color: #CEEBF8;
 }

 .ads-card .fav {
 	position: absolute;
 	top: -10px;
 	left: 0;
 	width: 100%;
 	text-align: center;
 }

 .ads-card .fav span {
 	padding: 5px 15px;
 	border-radius: 20px;
 	background-color: #393e46;
 	color: #fff;
 }

 .ads-card .underline-block {
 	width: 30%;
 	height: 2px;
 	background-color: #393e46;
 	margin: 10px auto;
 }

 ul.list-package {
 	margin: 0;
 	list-style-type: none;
 }

 ul.list-package>li {
 	text-indent: -5px;
 	word-wrap: break-word;
 	font-size: 16px;
 	line-height: 24px;
 	letter-spacing: 0.2px;
 	font-weight: 300;
 	color: #393e46;
 	transition: all 0.6s;
 }

 .ads-card .price {
 	text-align: center;
 	margin-top: 20px;
 }

 .ads-ig .ads-picture .content {
 	top: 100px;
 }

 .ads-ig .ads-picture .notif {
 	position: absolute;
 	bottom: 60px;
 	right: 0;
 }

 .ads-linkedin .ads-picture .content {
 	top: 255px;
 }

 .ads-custom-image {
 	max-width: 850px;
 	margin: 0 auto;
 	margin-bottom: 20px;
 }

 .ads-custom .subject-heading h1 {
 	font-size: 40px;
 }


 /*====================================== SECTION CONTACT ======================================*/

 section#contact {
 	margin-top: 50px;
 	position: relative;
 	background-image: url(../images/contact-plane.jpg);
 	background-size: 400px 400px;
 	background-position: bottom left -75px;
 	background-repeat: no-repeat;
 	/*min-height: 200vh;*/
 }

 .sticky-contact {
 	/*z-index: -1;*/
 	position: -webkit-sticky;
 	position: sticky;
 	top: 100px;
 }

 .overflow {
 	overflow: hidden;
 }
 .contact-left
 {
 	z-index: -1;
 	margin-left: -70px;
 }
 .contact-left .image {
 	max-width: 320px;
 	margin: 15px auto;
 }

 .contact-wrapper {
 	background-color: #fff;
 	border-radius: 20px;
 	padding: 30px 15px;
 	box-shadow: 0 8px 18px 0 rgba(0, 0, 0, .18);
 	transition: box-shadow .5s ease-out;
 	-webkit-transition: box-shadow .5s ease-out;
 }

 .arrow_right {
 	margin-left: 12px;
 	-webkit-animation: arrow_right 2s infinite;
 	animation: arrow_right 2s infinite;
 }

 @-webkit-keyframes arrow_right {
 	0%,
 	20%,
 	50%,
 	80%,
 	100% {
 		-webkit-transform: translateY(0);
 		transform: translateY(0);
 	}
 	40% {
 		-webkit-transform: translateX(-10px);
 		transform: translateX(-10px);
 	}
 	60% {
 		-webkit-transform: translateX(-5px);
 		transform: translateX(-5px);
 	}
 }

 .contact-send .cta {
 	margin-right: 15px;
 }

 footer.footer span {
 	display: inline-block;
 	margin-right: 1px;
 }

 footer.footer:hover span:nth-child(1) {
 	animation: maka 0.5s ease-in-out;
 }

 footer.footer:hover span:nth-child(2) {
 	animation: maka 0.7s ease-in-out;
 }

 footer.footer:hover span:nth-child(3) {
 	animation: maka 0.9s ease-in-out;
 }

 footer.footer:hover span:nth-child(4) {
 	animation: maka 1.1s ease-in-out;
 }

 @keyframes maka {
 	0% {
 		transform: translateY(0px);
 	}
 	50% {
 		transform: translateY(-10px);
 	}
 	100% {
 		transform: translateY(0px);
 	}
 }

 .footer-wrapper h3.maka-category {
 	padding: 5px;
 	transition: 0.6s ease-in-out;
 }

 .footer-wrapper::before {
 	content: "";
 	position: absolute;
 	left: 0;
 	top: 0;
 	width: 200px;
 	height: 100%;
 	background-image: linear-gradient(120deg, #8BD1D2, #CEEBF8);
 	-webkit-transform: translateX(-100px);
 	transform: translateX(-100px);
 	filter: blur(4px);
 	transition: 2s ease;
 	opacity: 0;
 }

 .footer-wrapper:hover::before {
 	-webkit-transform: translateX(300%);
 	transform: translateX(300%);
 	opacity: 1;
 }

 .footer-wrapper::after {
 	content: attr(data-text);
 	position: absolute;
 	top: 0;
 	left: 0;
 	font-size: 20px;
 	width: 100%;
 	height: 100%;
 	white-space: pre;
 	color: #8BD1D2;
 	font-weight: 700;
 	/*background-image: linear-gradient(120deg, #8BD1D2, #CEEBF8);*/
 	overflow: hidden;
 	padding: 5px;
 	opacity: 0;
 	-webkit-transform: translateY(50px);
 	transform: translateY(50px);
 	transition: 0.6s ease-in-out;
 }

 .footer-wrapper:hover::after {
 	opacity: 1;
 	-webkit-transform: translateY(0);
 	transform: translateY(0px);
 }

 .footer-wrapper:hover h3.maka-category {
 	opacity: 0;
 	-webkit-transform: translateY(-50px);
 	transform: translateY(-50px);
 }


 /*====================================== SECTION KARYA PAGE ======================================*/

 section.section-karya-kami {
 	min-height: 155vh;
 	margin-top: 30px;
 	background-image: url(../images/bg-porto-one.svg), url(../images/bg-porto-two.svg), url(../images/bg-porto-left.svg), url(../images/bg-porto-three.svg), url(../images/bg-porto-four.svg), url(../images/bg-porto-right.svg), url(../images/bg-porto-five.svg);
 	background-position: center top 0, center top 900px, bottom 1250px left -250px, center center, center bottom 1000px, bottom 500px right -225px, center bottom 100px;
 	background-size: contain, contain, 600px 600px, contain, contain, 600px 600px, contain;
 	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
 }

 #karya-sticky {
 	position: -webkit-sticky;
 	position: sticky;
 	top: 300px;
 	margin-bottom: 30px;
 }

 .karya-sticky .image {
 	max-width: 500px;
 	margin: 0 auto;
 }

 .col-karya {
 	margin-top: 150px;
 }

 section.section-karya-gallery {
 	background-image: linear-gradient(180deg, #CEEBF8, #fff);
 	padding: 125px 0 100px 0;
 	overflow: hidden;
 }

 section#karya-intermezo {
 	overflow: hidden;
 }

 .client-row {
 	-webkit-transform: rotate(-8deg);
 	transform: rotate(-8deg);
 	white-space: nowrap;
 	overflow: hidden;
 	box-sizing: border-box;
 	margin: 0 -20px;
 	margin-bottom: 30px;
 }

 .client-wrapper {
 	animation: move 15s linear infinite alternate;
 	margin-bottom: 40px;
 }

 .client-wrapper.right {
 	animation: move_toright 15s linear infinite alternate;
 }

 @keyframes move {
 	0% {
 		transform: translate(0, 0);
 	}
 	100% {
 		transform: translate(-100%, 0);
 	}
 }

 @keyframes move_toright {
 	0% {
 		transform: translate(-100%, 0);
 	}
 	100% {
 		transform: translate(0, 0);
 	}
 }

 .client-card {
 	display: inline-block;
 	max-width: 480px;
 	/*background-color: #CEEBF8;*/
 	background-image: linear-gradient(120deg, #CEEBF8, #FFFFFF);
 	padding: 15px;
 	margin: 0 10px;
 	border-radius: 20px;
 	box-shadow: -2px -2px 5px #fff, 2px 2px 5px #babecc;
 }

 .client-card .wrapper {
 	display: flex;
 	align-items: center;
 	flex-direction: row;
 }

 .client-card .image {
 	border-radius: 50%;
 	max-width: 90px;
 	width: 90px;
 	height: 90px;
 }

 .client-card .image img {
 	object-fit: contain;
 }

 ul.nav.nav-pills.nav-karya {
 	width: 250px;
 	margin: 30px auto 60px auto;
 	text-align: center
 }

 ul.nav.nav-pills.nav-karya li {
 	float: none;
 	display: inline-block;
 	margin-right: 10px;
 	margin-bottom: 10px;
 }

 ul.nav.nav-pills.nav-karya li a {
 	color: #8BD1D2;
 	border-radius: 20px;
 	font-size: 18px;
 	font-weight: 700;
 }

 ul.nav.nav-pills.nav-karya li.active a {
 	/*background-color: #8BD1D2 !important;*/
 	color: #fff;
 	background: linear-gradient(120deg, #8BD1D2,#CEEBF8 ) !important;
 	border-radius: 20px;
 	padding: 10px 20px;
 }
 ul.nav.nav-pills.nav-karya li a:hover
 {
 	background: #ceebf863;
 }
 .karya-container {
 	/*opacity: 0;*/
 	position: relative;
 	width: 100%;
 	max-width: 350px;
 	width: 100%;
 	height: 100%;
 	min-height: 500px;
 	border-radius: 30px;
 	margin: 0 auto 50px auto;
 	/*-webkit-transform: translateY(100px);*/
 	/*transform: translateY(100px);*/
 	transition: all 0.3s;
 	transition-duration: 0.6s;
 }
 .karya-container.active {
 	opacity: 1;
 	-webkit-transform: translateY(0px);
 	transform: translateY(0px);
 }
 .karya-container .karya-float
 {
 	transform: scale(0);
 	opacity: 0;
 	transition: ease-in 0.3s;
 }
 .karya-container .karya-float .image
 {
 	max-width: 75px;
 }
 .karya-container .karya-float.one
 {
 	z-index: 3;
 	position: absolute;
 	top: 15px;
 	left: -30px;
 }
 .karya-container .karya-float.two
 {
 	z-index: 3;
 	position: absolute;
 	top: 75px;
 	right: -30px;
 }
 .floating-left
 {
 	animation: floating_button_left 3s ease-in-out infinite;
 }
 .floating-right
 {
 	animation: floating_button_right 3s ease-in-out infinite;
 }
 .karya-container .card-front .karya-image {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 }

 .karya-container .card-front .karya-image img {
 	/*-webkit-filter: blur(2px);*/
 	-webkit-filter: blur(1px);
 	backdrop-filter: blur(1px);
 	opacity: 1;
 	object-fit: cover;
 	border-radius: 20px;
 }

 .karya-container .card-front .karya-word {
 	width: 100%;
 	z-index: 1;
 	padding: 0 0 0 0;
 	transition: all 0.3s;
 }

 .karya-container .card-front,
 .karya-container .card-back {
 	display: block;
 	width: 100%;
 	height: 100%;
 	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 	transition-duration: 0.6s;
 	transition-property: transform, opacity;
 	box-shadow: -5px -5px 20px #ffffff, 5px 5px 20px #babecc;
 	border-radius: 20px;
 }

 .karya-container .card-front {
 	z-index: 2;
 	display: flex;
 	align-items: flex-end;
 	position: relative;
 	width: 100%;
 	min-height: 500px;
 	height: 100%;
 	padding: 20px 15px;
 	border-radius: 30px;
 	-webkit-transform: rotate(0deg);
 	transform: rotateY(0deg);
 }

 .karya-container .card-back {
 	overflow: hidden;
 	position: absolute;
 	opacity: 0;
 	top: 0px;
 	left: 0px;
 	width: 100%;
 	height: 100%;
 	padding: 10px;
 	-webkit-transform: rotateY(-180deg);
 	transform: rotateY(-180deg);
 	background: linear-gradient(120deg, #CEEBF8, #8BD1D2);
 }

 .karya-container .card-back .karya-flip {
 	position: relative;
 	width: 100%;
 	height: 100%;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
 	border: 2px solid #fff;
 	border-radius: 20px;
 	padding: 20px 10px;
 }
 .karya-container .card-back .karya-flip .flip-flight
 {
 	position: absolute;
 	bottom: -25px;
 	left: 0;
 }
 .karya-container .card-back .karya-flip .client,
 .karya-container .card-back .karya-flip .maka {
 	max-width: 125px;
 	height: 75px;
 	margin: 0 auto;
 }
 .karya-container .card-back .karya-flip .client img,
 .karya-container .card-back .karya-flip .maka img
 {
 	object-fit: contain;
 }
 .karya-container:hover .karya-float
 {
 	opacity: 1;
 	transform: scale(1);
 }
 .karya-container:hover .karya-float.two
 {
 	transition-delay: 0.3s;
 }
 .karya-container:hover .card-front {
 	z-index: 1;
 	-webkit-transform: rotateY(180deg);
 	transform: rotateY(180deg);
 	opacity: 0;
 }

 .karya-container:hover .card-back {
 	z-index: 2;
 	opacity: 1;
 	-webkit-transform: rotateY(0deg);
 	transform: rotateY(0deg);
 }

 .karya-container:hover {
 	-webkit-transform: translateY(-10px);
 	transform: translateY(-10px);
 }

 .karya-container .karya-word p.maka-small {
 	margin-bottom: 0;
 }

 .karya-container .karya-word p.maka-semi,
 .karya-gallery .word p.maka-semi {
 	font-size: 14px;
 	line-height: 20px;
 }
 .swiper-karya {
 	background-color: #f6f6f6;
 	padding: 75px 0;
 }


 .swiper-karya .swiper-slide.swiper-slide-active {
 	-webkit-transform: scale(1.1) !important;
 	transform: scale(1.1) !important;
 }

 .karya-gallery {
 	position: relative;
 	background-color: #ededed;
 	width: 100%;
 	max-width: 350px;
 	width: 100%;
 	height: 100%;
 	min-height: 500px;
 	border: 5px solid #5b5b5c;
 	margin: 0 auto 50px auto;
 	transition: all 0.3s;
 }

 .karya-gallery .image {
 	overflow: hidden;
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	padding: 5px;
 }

 .karya-gallery .image img {
 	-webkit-filter: blur(1px);
 	backdrop-filter: blur(1px);
 	object-fit: cover;
 }

 .karya-gallery .word {
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-end;
 	align-items: flex-start;
 	position: relative;
 	width: 100%;
 	min-height: 500px;
 	height: 100%;
 	padding: 20px 15px;
 	opacity: 1;
 	transition: opacity 1s;
 }

 .karya-gallery .gallery_transform {
 	position: absolute;
 	width: 0;
 	height: 0;
 	border-radius: 0;
 	/*background-color: #fdcc3938;*/
 	background: linear-gradient(120deg, #8BD1D2, #CEEBF8);
 	-webkit-transition: width 0.6s linear, height 0.6s linear;
 	transition: width 0.6s linear, height 0.6s linear;
 	-webkit-transform: translate(-50%, -50%);
 	transform: translate(-50%, -50%);
 	/*z-index: -1;*/
 	opacity: 1;
 }

 .karya-gallery:hover .gallery_transform {
 	border-radius: 50%;
 	width: 300%;
 	height: 500%;
 }

 .karya-gallery .gallery-cta {
 	position: absolute;
 	width: 94%;
 	height: 96%;
 	margin: 10px;
 	top: 0;
 	left: 0;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
 	border: 2px solid #fff;
 	padding: 20px 10px;
 	border-radius: 20px;
 	opacity: 0;
 	visibility: hidden;
 	transition: opacity 1s;
 }

 .karya-gallery .gallery-cta .client,
 .karya-gallery .gallery-cta .maka {
 	visibility: hidden opacity: 0;
 	max-width: 100px;
 	margin: 0 auto;
 	transition: opacity 1s, 0.5s ease-out;
 }

 .karya-gallery:hover .word {
 	opacity: 0;
 }

 .karya-gallery:hover .gallery-cta,
 .karya-gallery:hover .gallery-cta .client .karya-gallery:hover .gallery-cta .maka {
 	visibility: visible;
 	opacity: 1;
 }

 .gallery-intermezo {
 	z-index: 2;
 	position: relative;
 	background-color: #f6f6f6;
    /*background: rgb(246,246,246);
	background: -moz-linear-gradient(180deg, rgba(246,246,246,1) 70%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(246,246,246,1) 70%, rgba(255,255,255,1) 100%);
	background: linear-gradient(180deg, rgba(246,246,246,1) 70%, rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f6f6f6",endColorstr="#ffffff",GradientType=1);*/
	width: 100%;
	height: 250px;
	/*margin-bottom: 200px;*/
}

.gallery-intermezo .object-left {
	position: absolute;
	left: 5%;
	top: -50px;
}

.gallery-intermezo .object-right {
	position: absolute;
	right: 5%;
	top: -50px;
}

.gallery-intermezo .object-left .image,
.gallery-intermezo .object-right .image {
	max-width: 300px;
}

.gallery-intermezo .object-center {
	position: relative;
	width: 350px;
	margin: -50px auto 0 auto;
}

.gallery-intermezo .object-center .gallery-button {
	position: absolute;
	left: 0;
	top: -25px;
	width: 100%;
	height: 50px;
}

.gallery-intermezo .object-center .gallery-button .button-wrapper {
	Width: 150px;
	margin: 0 auto;
	height: 100%;
	position: relative;
}

.gallery-intermezo .object-center .gallery-button .button-wrapper .swiper-button-prev {
	animation: floating_button_left 3s ease-in-out infinite;
}

.gallery-intermezo .object-center .gallery-button .button-wrapper .swiper-button-next {
	animation: floating_button_right 3s ease-in-out infinite;
}

@keyframes floating_button_left {
	0% {
		transform: translate3d(0, 0, 0);
	}
	45% {
		transform: translate3d(0, -10%, 0);
	}
	55% {
		transform: translate3d(0, -10%, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes floating_button_right {
	0% {
		transform: translate3d(0, 0, 0);
	}
	45% {
		transform: translate3d(0, 10%, 0);
	}
	55% {
		transform: translate3d(0, 10%, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

.object-center:hover .gallery-button .button-wrapper .swiper-button-prev,
.object-center:hover .gallery-button .button-wrapper .swiper-button-next {
	animation: step-end;
}

section.section-portrait {
    /*background: rgb(246,246,246);
	background: -moz-linear-gradient(180deg, rgba(246,246,246,1) 25%, rgba(255,255,255,1) 50%);
	background: -webkit-linear-gradient(180deg, rgba(246,246,246,1) 25%, rgba(255,255,255,1) 50%);
	background: linear-gradient(180deg, rgba(246,246,246,1) 25%, rgba(255,255,255,1) 50%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f6f6f6",endColorstr="#ffffff",GradientType=1);*/
}
.portrait-container
{
	position: relative;
	height: 100vh;
}
.portraits
{
	position: absolute;
	transition: all 0.3s;
}

.portraits .image {
	display: inline-block;
	background-color: #fff;
	padding: 10px;
	width: 300px;
	height: 200px;
	box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);
	filter: grayscale(100%);
	transition: 0.3s linear, transform 0.6s ease;
}

.portraits .image img {
	object-fit: cover;
}

.portrait
{
	left: 45%;
	bottom: 25%;
}
.portrait .image
{
	width: 325px;
	height: 250px;
}
.portrait-1 {
	transform: rotate(6deg);
	left: 10%;
	bottom: 50%;
}

.portrait-2 {
	transform: rotate(-5deg);
	left: 40%;
	bottom: 50%;
}
.portrait-3 {
	transform: rotate(-6deg);
	right: 15%;
	bottom: 50%;
}

.portrait-4 {
	transform: rotate(4deg);
	right: 20%;
	bottom: 0%;
}

.portrait-5 {
	transform: rotate(-3deg);
	right: 15%;
	bottom: 5%;
}

.portrait-6 {
	transform: rotate(-4deg);
	left: 40%;
	bottom: 0%;
}

.portrait-7 {
	left: 15%;
	bottom: 0%;
}

.portrait-8 {
	transform: rotate(4deg);
	left: 25%;
	bottom: 5%;
}

.portraits:hover
{
	z-index: 10;
}
.portraits .image:hover {
	filter: grayscale(0);
	transform: scale(1.3) rotate(2deg);
	z-index: 2;
}

.section-pahlawan {
	background-image: url(../images/bg-pahlawan-1.svg), url(../images/bg-pahlawan-2.svg), url(../images/bg-pahlawan-3.svg);
	background-position: top right, bottom center, top left;
	background-size: contain, contain, contain;
	background-repeat: no-repeat, no-repeat, no-repeat;
}
.pahlawan-intermezo {
	max-width: 1024px;
	width: 100%;
	margin: 50px auto 75px auto;
}
.pahlawan-container
{
	margin-bottom: 60px;
}
.pahlawan-container > .image {
	z-index: 2;
	-webkit-transform: translateY(150px);
	transform: translateY(150px);
	width: 300px;
	height: 100%;
	margin: 0 auto;
	transition: ease 0.5s;
	box-shadow: 0 8px 18px 0 rgb(0 0 0 / 50%);
	border-radius: 20px;
}
.pahlawan-container .image img
{
	border-radius: 20px;
	object-fit: cover;
}
.pahlawan-container .word
{
	z-index: -1;
	position: relative;
	overflow: hidden;
	opacity: 0;
	text-align: center;
	margin-top: 25px;
	-webkit-transform: scale(0.1);
	transform: scale(0.1);
	transition: linear 0.6s, transform 0.3s;
}
.pahlawan-container .word h1.maka-head
{
}
.pahlawan-container .pahlawan-emoji 
{
	opacity: 1;
	position: absolute;
	top: -25px;
	left: 0;
	width: 100%;
	transition: ease-out 0.3s;
}
.pahlawan-container .pahlawan-emoji .image
{
	width: 225px;
	margin: 0 auto;
}
.pahlawan-container:hover > .image
{
	-webkit-transform: none;
	transform: none;
	box-shadow: 0 8px 18px 0 rgb(0 0 0 / 50%);
	border-radius: 20px;
}
.pahlawan-container:hover .pahlawan-emoji
{
	opacity: 0;
}
.pahlawan-container:hover .word
{
	-webkit-transform: none;
	transform: none;
	z-index: 1;
	opacity: 1;
}
/*====================================== SECTION MOVE PAGE ======================================*/

section.maka-move {
	background-image: url(../images/karya/bg-karya.gif);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

.move-container .move-logo {
	max-width: 300px;
	margin: -30px auto 0 auto;
}

.move-container .image {
	max-width: 768px;
	margin: -30px auto 15px auto;
}

.move-container .action {
	max-width: 200px;
	width: 100%;
	margin: 0 auto;
}

.move-container .action .btn-utama:before {
	/*width: 100%;*/
}
/*==================================== SECTION 404 NOT FOUND ==================================*/
.notfound-wrapper .video
{
	max-width: 1024px;
	margin: 0 auto;
}
.notfound-wrapper .video video
{
	width: 100%;
	height: 100%;
}
.notfound-wrapper .word
{
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 200px;
	left: 0;
}
/*====================================== SECTION CARD LINK ======================================*/
section.section-card-link
{
	position: relative;
	padding-bottom: 100px;
}
.button-link
{
	position: relative;
	transition: all .3s ease-in-out;
	-webkit-appearance: none;
	padding: 12px 16px;
	border-radius: 20px;
	font-size: 20px;
	color: #fff;
	font-weight: 700;
	border: 1px solid #fff;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	outline: none;
	border: none;
}
.button-link:hover
{
	color: #8BD1D2;
}
.cardlink-container .body .linkto.youmustknow:hover
{
	transform: translateY(-2px);
}
.button-link:active
{
	transform: translateY(0);
}
.button-link:before
{
	animation: pulse_link 3s ease infinite;
	border-radius: 20px;
	position: absolute;
	background: #fff;
	content: "";
	z-index: 1;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
}
@keyframes pulse_link
{
	0% { transform: scale(1); }
	50% { opacity: 0.2; }
	100% { transform: scale(1.2, 1.4); opacity: 0; }
}
.cardlink-container
{
	position: relative;
	background-color: #000000;
	background-image: url(../images/link/star.png);
	background-position: top center;
	background-size: contain;
	background-repeat: no-repeat;
	overflow: hidden;
	max-width: 480px;
	margin: 0 auto 50px auto;
	border: 2px solid #fff;
	box-shadow: 0 0 18px 0 #fff;
	border-radius: 20px;
	padding: 30px 30px 0 30px;
}
.cardlink-container .moon-one
{
	max-width: 150px;
	position: absolute;
	top: -50px;
	left: 10px;
}
.cardlink-container .moon-two
{
	max-width: 150px;
	position: absolute;
	top: 40%;
	right: -30px;
}
.cardlink-container .moon-three
{
	max-width: 150px;
	position: absolute;
	top: 52%;
	left: -50px;
}
.cardlink-container .link-share
{
	position: absolute;
	top: 5px;
	right: 5px;
	text-align: center;
}
.cardlink-container .link-share button.clipboard
{
	color: #393e46;
	position: relative;
	display: inline-block;
	width: auto;
	text-decoration: none;
	font-size: 14px;
	font-weight: 300;
	line-height: 18px;
	letter-spacing: 0.2px;
	padding: 10px 10px;
	border-radius: 20px;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
	outline: none;
}
.cardlink-container .flight .image
{
	z-index: 0;
	top: 50px;
}
.cardlink-container .star-left
{
	position: absolute;
	max-width: 50px;
	top: 35%;
	left: 0;
	transform: rotate(-10deg);
}
.cardlink-container .star-right
{
	position: absolute;
	max-width: 50px;
	top: 60%;
	right: 0;
		transform: rotate(15deg);
}
.cardlink-container .head 
{
	position: relative;
	margin-top: 20px;
	margin-bottom: 50px;
}
.cardlink-container .head .logo
{
	background-color: #fff;
	width: 150px;
	height: 150px;
	border: 2px solid #8bd1d2; 
	margin: 0 auto 15px auto;
	padding: 15px;
	border-radius: 50%;
	transition: ease 0.5s;
}
.cardlink-container .head .logo img
{
	object-fit: contain;
}
.cardlink-container:hover .logo
{
	box-shadow: 0 0 18px 0 #fff;
}
.cardlink-container .body .linkto
{
	text-align: center;
	margin: 30px 0px;
}
.cardlink-container .body .linkto.youmustknow
{
	border: 1px solid #fff;
	border-radius: 20px;
	margin-bottom: 45px;
	transition: all .3s ease-in-out;
}
.cardlink-container .body .linkto .btn-show
{
	background: rgb(206,235,248);
	background: -moz-linear-gradient(150deg, rgba(206,235,248,1) 45%, rgba(139,209,210,1) 90%);
	background: -webkit-linear-gradient(150deg, rgba(206,235,248,1) 45%, rgba(139,209,210,1) 90%);
	background: linear-gradient(150deg, rgba(206,235,248,1) 45%, rgba(139,209,210,1) 90%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ceebf8",endColorstr="#8bd1d2",GradientType=1);
	color: #393e46;
	transition: ease 0.6s;
	box-shadow: 0px 0 8px #ffffffc9;
}
.cardlink-container .body .linkto .btn-show:hover
{
	color: #8bd1d2;
	box-shadow: -1px 4px 20px #ffffffb3;
}
.cardlink-container .body .socmed-list
{
	margin-top: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cardlink-container .body .socmed-list .wrapper
{
	max-width: 36px;
	margin: 0 10px;
}
.cardlink-container .body .socmed-list .wrapper a
{
	display: block;
	width: 100%;
	height: 100%;
}
.cardlink-container .body .socmed-list .wrapper:hover a
{
	transform: translateY(-3px);
}
.cardlink-container .body
{
	max-width: 80%;
	margin: 0 auto;
}
.cardlink-container .body .linkto span
{
	margin-right: 5px;
}
.cardlink-container .footer
{
	margin-top: 50px;
}
.cardlink-container .footer .cta .btn-pols:hover
{
	background-color: #8bd1d2;
}
.cardlink-container .footer .bottom-vid
{
	width: 100%;
	height: 200px;
}
.cardlink-container .footer .bottom-vid video
{
	width: 100%;
	height: 100%;
}
.link-made
{
	text-align: center;
	/*position: absolute;*/
}
/*====================================== SECTION RESPONSIVE ======================================*/

@media (min-width: 576px) {
	header nav ul li a {
		display: block;
		padding: .425rem 0rem;
	}
}

@media (min-width: 1023px) {
	ul.menu-left {
		width: 85%;
		display: block !important;
		max-height: none;
	}
}