:root {
	--blue: #007bff;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--orange: #fd7e14;
	--yellow: #ffc107;
	--green: #28a745;
	--teal: #20c997;
	--cyan: #17a2b8;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #343a40;
	--primary: #007bff;
	--secondary: #6c757d;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #343a40;
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*, ::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: #fff;}
html, body
{
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
body
{
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 1px;
	background-color: #fff;
	color: #fff;
	font-weight: 300;
	width: 100%;
	height: 100%; 
	transition: all 0.3s;
}
h1, h2, h3, h4, h5, h6, p {margin: 0;}
h1 { font-size: 60px; font-family: 'Montserrat', sans-serif;}
h2 { font-size: 40px; font-family: 'Montserrat', sans-serif;}
h3 { font-size: 32px; font-family: 'Montserrat', sans-serif;}
h4 { font-size: 22px; }
h5 { font-size: 16px; }
h6 { font-size: 12px; }
p { font-size: 18px; font-family: 'Roboto', sans-serif;}
p:last-child { margin-bottom: 0px; }
/* ul { padding: 0px; } */
a { /* display: block; */ width: 100%; height: 100%; 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: #fdcc39; text-decoration: none; }
img{width: 100%;height: 100%;object-fit: contain;}
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; }
.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; }
.btn-utama
{
	display: inline-block;
	overflow: hidden;
	width: auto;
	text-align: center;
	padding: 15px 30px;
	background-color: #284899;
	color: #fff;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	letter-spacing: 0px;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	text-decoration: none;
	box-shadow: none;
	border: 0;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	transition: all 500ms ease;
}
.btn-utama:hover
{
	color: #fff;
	box-shadow: 1px 1px 2px 2px hsla(0,0%,0%,0.1);
	transform: translateY(-2px);
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
}
.btn-utama.yellow-button
{
	background-color: #FFCD05;
	color: #284899;
	font-weight: 400;
}
.btn-utama.black-button
{
	background-color: #000000;
}
.btn-kedua
{
	cursor: pointer;
	background: transparent;
	color: #fff;
	position: relative;
	display: inline-block;
	width: auto;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 1.2px;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	padding: 15px;
	border: 1px solid #284899;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	transition: all 500ms ease;
}
.btn-kedua:hover
{
	color: #284899;
	transform: translateY(-2px);
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	box-shadow: 1px 1px 2px 2px hsla(0,0%,0%,0.1);
}
/*  ==========================  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]
{
	border: 0;
	background-color: #dedede;
}
.form-control[disabled]:hover
{
	border: 0;
}
.form-group
{
	position: relative;
	margin-bottom: 20px;
}
.has-error .form-control
{
	box-shadow: none;
}
input.form-control
{
	position: relative;
	height: 50px;
	padding: 0 15px;
	background-color: #e7f2f7;
	color: #000000;
	border: 0;
	border-radius: 20px;
	border: 2px solid rgba(0,0,0,0.1);
	box-shadow: rgba(0, 0, 0, 0) 0px 2px 4px;
	text-transform: none;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 1px;
	font-weight: 400;
	transition: all 0.3s;
}
input.form-control::placeholder,
textarea.form-control::placeholder
{
	color: rgba(0,0,0,0.20);
}
input.form-control:hover,
input.form-control:focus,
input.form-control:active
{
	border-color: #284899;
}
select.form-control
{ 
	color: #fff;
	height: 50px;
	padding: 0 15px;
	background-color: transparent;
	border: 2px solid rgba(0,0,0,0.1);
	border-radius: 20px;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-position: 95% 45%;
	background-repeat: no-repeat;
	background-image: url("../images/chevron-down.png");
	background-size: 20px;
	font-size: 16px;
	box-shadow: none;
	cursor: pointer;
	font-weight: 400;
}
select.form-control:hover,
select.form-control:focus,
select.form-control:active
{
	border: 2px solid #284899;
}
.select2-container--default .select2-selection--single
{
	height: 40px !important;
	border-bottom: 2px solid rgba(0,0,0,0.1) !important;
	border: 0 !important;
	border-radius: 0 !important;
	border-bottom: 2px solid rgba(0,0,0,0.1) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered
{
	color: #fdcc39 !important;
	font-size: 16px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered
{
	padding: 5px !important;
}
textarea.form-control
{
	background-color: #e7f2f7;
	min-height: 85px;
	position: relative;
	display: block;
	width: 100%;
	padding: 10px 15px;
	text-transform: none;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 2px;
	font-weight: 400;
	color: #000000;
	border: 0;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom: 2px solid rgba(0,0,0,0.1);
	box-shadow: none;
	/*resize: none;*/
}
textarea.form-control:hover,
textarea.form-control:focus,
textarea.form-control:active
{
	border-bottom: 2px solid #284899;
}
label.control-label
{
	position: relative;
	display: inline-block;
	font-size: 16px;
	color: #000000;
	letter-spacing: 1px;
	font-weight: 700;
	border-radius: 0;
	margin-left: 5px;
	margin-bottom: 5px;
}
.modal-content
{
	border-radius: 20px;
}
.modal-footer
{
	border: 0;
}
.modal-header .sensi-category
{
	display: inline-block;
	position: relative;
}
.modal-header .close
{
	position: absolute;
	top: 15px;
	right: 10px;
	border: 1px solid #000;
	border-radius: 50%;
	margin-top: -4px;
	margin-right: 10px;
	font-size: 30px;
	width: 35px;
	height: 35px;
	transition: all 0.3s;
}
.modal-header .close span
{
	position: relative;
	top: -3px;
}
#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;
}
#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 ======================================*/
.sensi-head
{
	line-height: 72px;
	letter-spacing: 0;
	font-weight: 400;
	color: #284899;
	text-transform: capitalize;
	transition: all 0.3s;
	font-family: 'Montserrat', sans-serif;
}
.sensi-category
{
	line-height: 48px;
	letter-spacing: 0;
	font-weight: 400;
	color: #000000;
	text-transform: capitalize;
	transition: all 0.3s;
	font-family: 'Montserrat', sans-serif;
}
.sensi-main
{
	font-weight: 400;
	line-height: 32px;
	letter-spacing: 0;
	color: #284899;
	transition: all 0.3s;
	font-family: 'Roboto', sans-serif;
}
.sensi-semi
{
	font-weight: 400;
	line-height: 32px;
	letter-spacing: 0.2px;
	color: #000000;
	transition: all 0.3s;
	font-family: 'Roboto', sans-serif;
}
.sensi-info
{
	line-height: 32px;
	letter-spacing: 1.2px;
	font-weight: 300;
	color: #000000;
	transition: all 0.3s;
	font-family: 'Roboto', sans-serif;
}
.sensi-break
{
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.sensi-small
{
	font-size: 12px;
	color: #000000;
	line-height: 24px;
	letter-spacing: 1.5px;
}
.main-color
{
	color: #284899 !important;
}
.yellow
{
	color: #FFCD05 !important;
}
.black{
	color: #000000 !important;
}
.red
{
	color: #A91916 !important;
}
.info
{
	color: rgba(0,0,0,0.50) !important;
}
.bold
{
	font-weight: 700 !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
{
	display: block;
	width: 100%;
}
.inline-block
{
	display: inline-block;
}
.regular
{
	font-weight: 400;
}
.normal
{
	font-weight: 300;
}
.uppercase
{
	text-transform: uppercase;
}
.capitalize
{
	text-transform: capitalize;
}
.no-transform
{
	text-transform: none;
}
.italic
{
	font-style: italic;
}
.justify
{
	text-align: justify;
}
.and-more button.btn-kedua
{
	margin: 20px 0;
	padding-left: 30px;
	padding-right: 30px;
}
.navbar-space
{
	margin-top: 100px;
}
.sticky-subhead
{
	position: -webkit-sticky; 
	position: sticky;
	top: 100px;	
}
.section-heading
{
	max-width: 720px;
	margin: 0 auto;
	margin-bottom: 20px;
}
.section-heading h1
{
	margin-bottom: 10px;
}
.relative
{
	position: relative;
}
.dash
{
	position: relative;
	display: inline-block;
	background-color: #284899;
	height: 1px;
	width: 75px;
	margin: 10px auto;
}
.overflow-hidden
{
	overflow: hidden
}
section
{
	margin-bottom: 50px;
}
.whatsapp-cs
{
	z-index: 999999;
	background-color: #25d366;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	text-align: center;
	position: fixed;
	bottom: 30px;
	right: 20px;
}
.whatsapp-cs .whatsapp-wrapper
{
	position: relative;
}
.whatsapp-cs .whatsapp-wrapper .need-help
{
	opacity: 1;
	background-color: #25d366;
	padding: 6px 12px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	position: absolute;
	top: -55px;
	left: -130px;
	transform: translatex(-30px);
	/*animation: fadeIn 5s infinite ease-in-out;*/
}
.need-help .sensi-semi
{
	font-size: 12px;
	color: #fff;
	font-weight: 700;
	line-height: 20px;
}
.whatsapp-cs .whatsapp-wrapper .need-help .close-help
{
	cursor: pointer;
	position: absolute;
	top: -10px;
	right: -5px;
	display: flex;
	align-items: center;
}
.whatsapp-cs .whatsapp-wrapper .need-help .close-help button
{
	border: 0;
	box-shadow: none;
	background-color: transparent;
	padding: 0;
	margin: 0;
}
.whatsapp-cs .whatsapp-wrapper .need-help .close-help span
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #284899;
	color: #fff;
	font-size: 14px;
}
.whatsapp-cs img
{
	border: 2px solid #fff;
	border-radius: 50%;
}
.whatsapp-cs a, .whatsapp-cs a:hover
{
	color: #222;
}
.whatsapp-cs img
{
	position: relative;
	top: 10px;
	width: 40px;
	height: 40px;
}
/*====================================== SECTION NAVBAR ======================================*/
header {
	/*background-color: #fff;*/
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	/*border-bottom: 2px solid #fff;*/
	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);
	transform: translateY(0);
	-webkit-transform: translateY(0);
}
header nav
{
	/*overflow: hidden;*/
	padding: 15px;
}
header nav ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}	
#navigation
{
	background-color: transparent;
}
header #navigation .logo
{
	display: block;
	float: left;
	margin-top: -13px;
	margin-right: 1rem;
	font-size: 1.25rem;
	line-height: inherit;
	font-weight: 500;
	color: #393e46;
}
header #navigation .logo.black
{
	display: block;
}
header #navigation.scrolled .logo.black
{
	display: none;
}
header #navigation .logo.white
{
	display: none;
}
.logo-wrapper
{
	float: left;
}
header #navigation.scrolled .logo.white
{
	display: block;
}
header #navigation .logo.black img.navbar-logo,
header #navigation .logo.white img.navbar-logo
{
	margin-top: 15px;
	width: 200px;
	object-fit: contain;
}
@media (min-width: 768px) {
	header nav ul li {
		float: left;
		margin-left: 2rem;
	}
}
@media (max-width: 768px) {
	.nav-toggle
	{
		display: block;
	}
}
header nav ul li a {
	display: block;
	font-size: 18px;
}
.hide-nav {
	transform: translateY(-120%) !important;
	-webkit-transform: translateY(-120%) !important;
}
ul.menu-right
{
	float: right;
}
ul.menu-right li 
{
	position: relative;
	margin-left: 15px;
}
header #navigation ul.menu-right li.active
{
	border-bottom: 2px solid #fff;
}
header #navigation ul.menu-right li.active a
{
	color: #fff;
	font-weight: 700;
}
header #navigation.scrolled ul.menu-right li.active
{
	border-bottom: 2px solid #fff;	
}
header #navigation.scrolled ul.menu-right li.active a
{
	color: #fff;
	font-weight: 700;
}
ul.menu-right li a
{
	position: relative;
	width: 100%;
	display: inline-block;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 1.2px;
	padding: 10px 15px;
	color: #fff;
	transition: color .3s ease;
}
.menu-right li a:before
{
	content: "";
	left: 0;
	position: absolute;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: #fff;
	transition: all 0.3s ease-in-out;
}
.menu-right > li:hover > a:before
{
	height: 2px;
	background-color: #fff;
	width: 100%;
}
ul.menu-right li.count a
{
	background-color: #284899;
	border-radius: 30px;
	color: #fff;
}
ul.menu-right li.li-sub i
{
	font-size: 16px;
	position: relative;
	right: -5px;
	top: -2px;
}
ul.menu-right li:hover ul.sub-menu
{
	display: block;
}
ul.sub-menu
{
	display: none;
	height: auto;
	position: absolute;
	top: 45px;
	left: 0;
	padding: 15px 10px;
	text-align: left;
	background-color: transparent;
}
ul.sub-menu .wrapper
{
	background-color: #fff;
	padding: 10px 5px;
	height: 100%;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 8px 18px 0 rgba(0, 0, 0, .18);
}
ul.sub-menu li
{
	position: relative;
	margin-left: 0;
	min-width: 225px;
	margin-bottom: 2px;
}
ul.sub-menu li a,
#navigation.scrolled ul.sub-menu li a
{
	position: relative;
	padding: 10px 15px;
	color: #000000 !important;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 1.2px;
}
ul.sub-menu li.active a
{
	color: #284899;
	font-weight: 700;
}
ul.sub-menu li a:after
{
	content: "";
	left: 0;
	position: absolute;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: #284899;
	transition: all 0.3s ease-in-out;
}
ul.sub-menu li:hover a:before
{
	height: 2px;
	background-color: #284899;
	width: 100%;
}
.nav-toggle {
	display: none;
	border-radius: 5px;
	background-color: transparent;
	float: right;
	height: 38px;
	width: 38px;
	cursor: pointer;
	padding: 5px;
	margin-top: 0;
	position: relative;
	top: 5px;
}
.nav-toggle span:nth-child(2)
{
	width: 65%;
	margin-left: auto;
}
.nav-toggle span:last-child 
{
	width: 90%;
	margin-left: auto;
}
.nav-toggle.open span:first-child {
	transform: rotate(45deg) translate(4.4px, 5.4px);
}
.nav-toggle.open span:nth-child(2) {
	width: 0;
	opacity: 0;
}
.nav-toggle.open span:last-child {
	width: 100%;
	transform: rotate(-45deg) translate(4.4px, -6.4px);
}
.nav-toggle span {
	position: relative;
	display: block;
	height: 2px;
	width: 100%;
	margin-top: 6px;
	background-color: #fff;
	transition: all 0.3s;
}
#navigation.scrolled .nav-toggle span
{
	background-color: #fff;
}
#navigation.scrolled
{
	background-color: #284899;
	transition: all 0.3s;
}
#navigation.scrolled ul.menu-right li a
{
	color: #fff;
}
#navigation.scrolled ul.menu-right li.count a
{
	background-color: #fff;
	color: #1a1a1a;
}
.swiper-container
{
	width: 100%;
	height: 100%;
}
.swiper-wrapper
{
	margin: 20px 0;
}
.swiper-slide
{
	font-size: 18px;
	background: transparent;
	width: 100%;
	margin-right: 20px;
	border-radius: 5px;
	margin-right: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.swiper-slide:nth-child(2n)
{
	width: 40%;
}
.swiper-slide:nth-child(3n)
{
	width: 40%;
}
.swiper-wrapper .swiper-slide > a
{
	width: 100%;
}
.swiper-button-wrapper
{
	position: absolute;
	top: 22px;
	text-align: center;
}
.swiper-button-next
{
	background-image: url("../images/chevron-right.png");
	opacity: 1;
	transition: all 0.3s;
	right: 20px;
}
.swiper-button-prev
{
	background-image: url("../images/chevron-left.png");
	opacity: 1;
	transition: all 0.3s;
	left: 20px;
}
.swiper-button-next, .swiper-button-prev
{
	top: 45%;
	width: 48px;
	height: 48px;
	background-size: contain;
	cursor: pointer;
}
/*====================================== SECTION LANDING PAGE ======================================*/
section.section-hero
{
	/*background-image: url("../images/hero-image.jpeg");*/
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	margin-bottom: 0;
}
section.section-home-about
{
	padding: 0 0 150px 0;
	background-image: url("../images/home-about.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	/*background-color: #123e5f;*/
	background: rgb(18,62,95);
	background: -moz-linear-gradient(180deg, rgba(18,62,95,1) 30%, rgba(40,72,153,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(18,62,95,1) 30%, rgba(40,72,153,1) 100%);
	background: linear-gradient(180deg, rgba(18,62,95,1) 30%, rgba(40,72,153,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#123e5f",endColorstr="#284899",GradientType=1);
}
.subject-heading
{
	max-width: 720px;
	margin: 0 auto;
}
.subject-heading .heading
{
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
}
.subject-heading .heading h2.sensi-category
{
	color: #284899;
}
.subject-heading .kerning
{
	position: absolute;
	top: -35px;
	right: -30px;
}
.subject-heading .kerning .image
{
	width: 100px;
}
section.section-home-service
{
	padding: 100px 0 50px 0;
	margin-top: -100px;
	background-color: #fff;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}
.service-card
{
	max-width: 265px;
	width: 100%;
	padding: 15px;
	border: 2px solid transparent;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	margin: 0 auto 30px auto;
	transition: all 0.3s;
}
.service-card:hover
{
	border-color: #284899;
}
.service-card .image
{
	max-width: 250px;
	height: 250px;
	margin: 0 auto 15px auto;
}
.service-card .title
{
	min-height: 64px;
}
.about-home-action
{
	max-width: 320px;
	margin: 0 auto;
}
section.section-home-whyus
{
	background-color: #284899;
	padding-bottom: 200px;
	background-image: url("../images/whyus-image.png");
	background-size: 700px;
	background-repeat: no-repeat;
	background-position: bottom 50px right;
}
section.section-home-whyus .container-fluid
{
	overflow: hidden;
	padding: 175px 0;
	background-image: url("../images/home-whyus.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom center;
}
section.section-home-whyus .container
{
	margin-top: -100px;
}
.whyus-card
{
	min-height: 330px;
	background-color: #162752;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	padding: 20px 30px;
	margin-bottom: 100px;
}
.whyus-card .icon
{
	margin-top: -75px;
	max-width: 100px;
	background-color: #fff;
	padding: 15px;
	border-radius: 20px;
	margin-bottom: 30px;
}
.news-newest
{
	position: relative;
	width: 100%;
	height: 400px;
	border-radius: 40px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1000px rgb(0 0 0 / 70%);
}
.news-newest .desc
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 30px 15px 10px 15px;
}
.news-newest .desc .title h3.sensi-category
{
	text-transform: uppercase;
	line-height: 40px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}
.news-newest .desc .body
{
	/*display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;*/
}
.news-newest .desc .body .word p.sensi-info
{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
	overflow: hidden;
	min-height: 64px;
	max-height: 64px;
}
.news-newest .desc .body .action
{
	margin-top: 10px;
	text-align: center;
}
section.section-banner
{
	overflow: hidden;
	padding: 100px 0 50px 0;
	margin-top: -150px;
	margin-bottom: 0;
	background-color: #f0f0f0;
	border-radius: 50px;
	border-bottom-left-radius: 100px;
	border-bottom-right-radius: 100px;
}
.row-consult
{
	margin: 100px 0 0 0;
}
.consult-wrapper .image
{
	max-width: 480px;
	margin: 0 auto 20px auto;
}
section.section-article
{
	overflow: hidden;
	padding-top: 100px;
	margin-bottom: 0;
}
.article-card
{
	width: 100%;
	margin-bottom: 30px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	transition: all 0.3s;
}
.article-card a
{
	display: block;
	width: 100%;
	height: 100%;
}
.article-card .image
{
	height: 300px;
	margin: 0 auto;
}
.article-card .image img
{
	width: 100%;
	height: 100%;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	object-fit: contain;
}
.article-card .desc
{
	margin: 10px 0;
}
.article-card .desc .category
{
	min-height: 64px;
}
.article-card .desc .category p.sensi-main
{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}
.article-card .title
{
	margin-bottom: 5px;
}
.article-card .title p.sensi-semi
{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
	overflow: hidden;
	max-height: 64px;
	min-height: 64px;
}
/*====================================== SECTION ABOUT ======================================*/
section.section-about-hero
{
	position: relative;
	height: 100vh;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	margin-bottom: 0;
}
section.section-about-intermezo
{
	background-color: #133f60;
	padding: 100px 0;
}
section.section-about-intermezo .subject-heading
{
	max-width: 500px;
}
.about-image
{
	margin-bottom: 60px;
}
section.section-about-milestone
{
	margin-top: -100px;
	background-color: #fff;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	padding: 100px 0 0 0;
	margin-bottom: 0;
}
.milestone-image
{
	max-width: 1024px;
	margin: 0 auto;
}
section.section-about-client
{
	padding: 100px 0;
}
.subject-heading.heading-client
{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding: 0 15px;
}
.subject-heading.heading-client .heading
{
	margin-right: 20px;
}
.subject-heading.heading-client .heading h1
{
	font-size: 72px;
	line-height: 50px;
}
.subject-heading.heading-client .heading span
{
	font-size: 40px;
}
.about-client .image
{
	margin: 50px auto 0 auto;
}
.client-list .image
{
	max-width: 200px;
	height: 150px;
	margin: 15px auto;
}
.client-more
{
	/*display: inline-block;*/
	padding: 15px 30px;
	border-top: 2px solid #284899;
	border-bottom: 2px solid #284899;
}
section.section-about-achievment
{
	background-color: #f0f0f0;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	padding: 100px 0;
}
.achiev-card .image
{
	max-width: 250px;
	margin: 0 auto;
}
.achiev-card .word
{
	padding: 15px 30px;
	/*border: 1px solid #284899;*/
	background: rgb(40,72,153);
	background: -moz-linear-gradient(180deg, rgba(40,72,153,1) 30%, rgba(19,61,94,1) 95%);
	background: -webkit-linear-gradient(180deg, rgba(40,72,153,1) 30%, rgba(19,61,94,1) 95%);
	background: linear-gradient(180deg, rgba(40,72,153,1) 30%, rgba(19,61,94,1) 95%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#284899",endColorstr="#133d5e",GradientType=1);
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	min-height: 225px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	box-shadow: -7px 20px 18px 0 rgb(0 0 0 / 5%);
}
.col-achiev:nth-child(1) .achiev-card,
.col-achiev:nth-child(3) .achiev-card,
.col-achiev:nth-child(4) .achiev-card,
.col-achiev:nth-child(6) .achiev-card
{
	margin-top: 40px;
}
/*.main-color
{
	color: #284899 !important;
}
.yellow
{
	color: #FFCD05 !important;
}
.black
{
	color: #000000 !important;
}
.red
{
color: #A91916 !important;
}
*/
/*====================================== SECTION SERVICE ======================================*/
section.section-service
{
	padding: 100px 0 0 0;
	margin-top: -100px;
	margin-bottom: 0;
	background-color: #fff;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}
.service-head .image
{
	max-width: 480px;
	margin: 0 auto 20px auto;
}
.row-service-head
{
	margin-bottom: 80px;
}
section.section-service .container-fluid
{
	padding: 75px 0;
	overflow: hidden;
}
section.section-service .container-fluid:nth-child(odd)
{
	background-color: #fff;
}
section.section-service .container-fluid:nth-child(even)
{
	background-color: #f3f6ff;
}
.row-service
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	max-width: 1248px;
	margin: 0 auto;
	padding: 0 15px;
}
.service-word .action
{
	display: none;
}
.service-image
{
	max-width: 480px;
	height: 350px;
	margin: 0 auto;
}
.service-contact
{
	max-width: 720px;
	margin: 100px auto 0 auto;
}
/*====================================== SECTION CLIENT ======================================*/
section.section-client
{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	height: 75vh;
	width: 100%;
	overflow: hidden;
	margin-bottom: 0;
}
.certif-number
{
	background-color: #133e60;
	padding: 50px;
	border-radius: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.certif-number .wrapper
{
	max-width: 480px;
	width: 100%;
}
.certif-number .wrapper .input input.form-control
{
	max-width: 720px;
	width: 100%;
	background-color: #fff;
	border-radius: 20px;
	color: #000000;
}
.certif-card
{
	position: relative;
	background-color: #fff;
	border: 2px solid #133e60;
	max-width: 720px;
	margin: 50px auto 15px auto;
	border-radius: 20px;
	padding: 15px;
}
.certif-card .certif-logo
{
	opacity: 0.1;
	position: absolute;
	top: 35%;
	left: 0;
	width: 100%;
	padding: 0 30px;
	text-align: center;
}
.certif-card .certif-logo .image
{
	max-width: 480px;
	margin: 0 auto;
}
.certif-card .wrapper-certif-code
{
	margin-top: -45px;
}
.certif-card .certif-code
{
	display: inline-block;
	background-color: #133e60;
	padding: 5px 50px;
	border-radius: 30px;
}
.certif-card .wrapper
{
	margin-bottom: 10px;
}
.certif-card .wrapper ul
{
	list-style: none;
}

.certif-qr .image
{
	max-width: 200px;
	margin: 0 auto;
}
/*====================================== SECTION CONTACT ======================================*/
section.section-contact
{
	padding: 100px 0 0 0;
	margin-top: -100px;
	margin-bottom: 0;
	background-color: #fff;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}
.contact-wrapper
{
	max-width: 720px;
	margin: 0 auto;
}
.contact-map
{
	margin: 75px 0;
}
.contact-map iframe
{
	width: 100%;
	height: 500px;
}
section.section-contact-form .container-fluid
{
	padding: 0;
}
.contact-socmed
{
	margin: 50px 0 0 0;
}
.contact-socmed .socmed
{
	display: inline-block;
	max-width: 72px;
	margin-right: 30px;
	margin-bottom: 15px;
	transition: all 0.3s;
}
.contact-socmed .socmed a
{
	display: block;
	width: 100%;
	height: 100%;
}
.contact-socmed .socmed:hover
{
	transform: translateY(-5px);
}
/*====================================== SECTION CALIBRATION ======================================*/
section.section-calibration-second
{
	padding: 100px 0 50px 0;
	margin-top: -150px;
	background-color: #fff;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}
.row-calibration
{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 100px;
}
section.section-calibration-second .heading-whyus
{
	margin-bottom: 150px;
}
.row-whyus
{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	flex-wrap: wrap;
}
.row-whyus .col-whyus .cal-card
{
	display: flex;
	flex-direction: column;
}
.cal-card
{
	box-shadow: 0 8px 18px 0 rgba(0,0,0,.18);
	padding: 30px;
	border-radius: 30px;
	margin-bottom: 175px;
}
.col-whyus:nth-child(3) .cal-card,
.col-whyus:nth-child(4) .cal-card,
.col-whyus:nth-child(5) .cal-card
{
	margin-bottom: 0;
}
.cal-card .image
{
	max-width: 200px;
	height: 200px;
	margin: -150px auto 15px auto;
}
section.section-calibration-scope
{
	background-color: #133e60;	
	padding-bottom: 50px;
}
.scope-hero
{
	display: flex;
	align-items: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom center;
	height: 50vh;
	width: 100%;
	margin-bottom: 0;
}
.row-scope
{
	margin-top: -50px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:         flex;
	flex-wrap: wrap;
}
.scope-card
{
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: #162752;
	width: 100%;
	padding: 15px;
	border-radius: 20px;
	margin-bottom: 100px;
	min-height: 240px;
}
.scope-card .image
{
	width: 100px;
	height: 100px;
	background-color: #fff;
	border-radius: 20px;
	padding: 15px;
	margin-top: -75px;
}
.scope-card .word
{
	margin-top: 15px;
}
.scope-card .word ul
{
	list-style: none;
}
.scope-card .word ul > li {
	text-indent: -5px;
	padding-left: 10px;
	font-size: 16px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: 0.2px;
	color: #fff;
	transition: all 0.3s;
	font-family: 'Roboto', sans-serif;
}
.scope-card .word ul > li:before {
	content: "-";
	position: relative;
	left: -5px;
	text-indent: -5px;
}
.scope-card .word ul li:last-child:before
{
	content: "";
}
.scope-card .word ul li:nth-last-child(2)
{
	margin-bottom: 50px;
}
.scope-card .word ul li:last-child
{
	margin-top: 20px;
	padding: 0;
	position: absolute;
	bottom: 15px;
	left: 0;
	width: 100%;
	padding: 0 15px;
}
.scope-card .word ul li a
{
	text-align: center;
	border: 1px solid rgba;
	background-color: #284899;
	color: #fff;
	padding: 5px;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
}
section.section-calibration-contact
{
	padding: 100px 0 0 0;
	margin-top: -100px;
	background-color: #fff;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}
/*====================================== SECTION NEWS, SECTION EVENT ======================================*/
section.section-news-hero
{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	height: 75vh;
	width: 100%;
	overflow: hidden;
	margin-bottom: 0;
}
section.section-news-highlight
{
	overflow: hidden;
	margin-top: -100px;
	background-color: #fff;
	border-radius: 100px;
	padding-top: 75px;
}

.highlight-card
{
	position: relative;
	height: 275px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.highlight-card .image
{
	z-index: -1;
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-filter: brightness(75%);
	filter: brightness(50%);
}
.highlight-card .image img
{
	object-fit: cover;
}
.highlight-card .desc
{
	position: absolute;
	top: 0;
	left: 0;
	padding: 15px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center; 
	justify-content: center; 
	align-content: center; 
	width: 100%;
	height: 100%; 
	text-align: center;
}
.highlight-card .desc .title
{
	min-height: 128px;
}
.highlight-card .desc p.sensi-semi
{
	overflow: hidden;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	display: -webkit-box;
}
.search-bar
{
	margin-bottom: 30px;
}
.search-bar input.form-control
{
	position: relative;
	width: 100%;
	padding-right: 35px;
}
.search-bar button.btn-pols
{
	box-shadow: none;
	background-color: transparent;
	border: 0;
	position: absolute;
	right: 10px;
	top: 10px;
	color: #284899;
}
.nav-event
{
	margin-bottom: 60px;
}
.nav-event li
{
	float: none;
	display: inline-block;
	margin-right: 10px;
}
.nav-event li a
{
	color: #000000;
	font-size: 22px;
}
.nav-event li.active a
{
	color: #284899 !important;
	font-weight: 700;
}
.row-event
{
	margin-bottom: 10px;
}
.row-event a
{
	display: block;
	width: 100%;
	height: 100%;
}
.event-list .image
{
	max-width: 100%;
	height: 250px;
	margin: 0 auto 0 auto;
}
.event-list .desc 
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.event-list .desc .title h3.sensi-category
{
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
}
.event-list .desc .title p.sensi-semi
{
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;  
}
.event-list .desc .date p.sensi-small
{
	font-size: 16px;
}
.news-category
{
	margin-bottom: 60px;
}
.subject-heading .heading h2.category-head
{
	cursor: pointer;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 2px solid #284899;	
}
.subject-heading .heading h2.category-head span
{
	float: right;
	font-size: 20px;
	position: relative;
	right: -10px;
}
.news-category .category-list .list
{
	padding: 5px 0;
	margin-bottom: 5px;
	border-bottom: 1px solid rgba(0,0,0,0.25);
}
.news-category .category-list .list a
{
	font-weight: 400;
	line-height: 32px;
	letter-spacing: 0.2px;
	color: #284899;
	transition: all 0.3s;
	font-family: 'Roboto', sans-serif;
}
.news-top .top-list .list
{
	margin-bottom: 20px;
}
.news-top .top-list .list a
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
}
.news-top .top-list .list .number
{
	float: left;
	text-align: center;
	background-color: #284899;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 700;
	width: 60px;
	height: 75px;
	min-width: 60px;
	max-width: 75px;
	padding: 15px;
	margin-right: 10px;
}
.news-top .top-list .list .title h4.sensi-semi
{
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
}
section.section-news-hero.article-detail
{
	height: 50vh;
}
section.section-news-detail
{
	margin-top: -100px;
	background-color: #fff;
	border-radius: 100px;
	padding-top: 75px;
}
.article-desc
{
	padding: 15px;
}
.detail-category .date,
.detail-category .category
{
	margin-right: 15px;
	margin-bottom: 5px;
}
.article-desc iframe
{
	width: 100%;
}
.article-desc iframe img
{
	width: 100% !important;
	height: 100% !important;
}
.load-more
{
	padding: 5px 15px;
}
.load-more .pagination > li
{
	display: inline-block;
	width: auto;
	height: 35px;
}
.load-more .pagination>li:first-child>span 
{
	width: 100%;
	height: 100%;
}
.load-more .sr-only
{
	position: static !important;
	width: auto !important;
	clip: auto !important;
}
.at-share-btn-elements
{
	text-align: center !important;
	margin-bottom: 10px !important;
}
.at-resp-share-element .at-share-btn
{
	width: 40px !important;
	border-radius: 20px !important;
}
.action.action-regis
{
	margin: 10px 0 10px auto;
}
.article-desc iframe.iframe-map
{
	width: 100%;
	height: 350px;
	border: 0;
	border-radius: 20px;
}
/*====================================== SECTION 404 PAGE ======================================*/
.notfound
{
	height: 85vh;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	background-image: url("../images/404-bg.png"), url("../images/404-bg-vector.png");
	background-size: contain, contain;
	background-repeat: no-repeat, no-repeat;
	background-position: center center, center bottom;
}
.notfound .image
{
	max-width: 720px;
	margin: 0 25px;
}
.notfound .backto .btn-utama
{
	padding: 10px 15px;
}
/*====================================== SECTION FOOTER ======================================*/
.footer-top .image
{
	width: 101%;
	height: 500px;
	background-image: url("../images/footer-image.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
footer.footer
{
	overflow: hidden;
	margin-top: -5px;
	position: relative;
	background-color: #1b459b;
	padding: 15px 0 30px 0;
}
footer.footer a
{
	color: #fff;
}
.footer-logo .image
{
	max-width: 320px;
	margin: 0 auto 20px auto;
}
.footer-wrapper .address ul
{
	list-style: none;
	text-align: left;
}
.footer-wrapper ul li,
footer.footer .menu ul li
{
	font-size: 20px;
	font-weight: 400;
	line-height: 32px;
	letter-spacing: 0.2px;
	color: #fff;
	transition: all 0.3s;
}
footer.footer .menu ul li
{
	border-bottom: 1px solid #fff;
}
.footer-wrapper .socmed
{
	margin: 10px 0;
}
.footer-wrapper .socmed .list 
{
	display: inline-block;
	margin: 10px 15px;
	text-align: center;
}
.footer-wrapper .socmed .list  i
{
	font-size: 30px;
	/*color: #FFCD05;
	font-weight: 700;*/
}
footer.footer .menu ul li
{
	display: inline-block;
	margin: 10px 15px;
	color: #FFCD05;
	font-weight: 700;
}
footer.footer .menu ul li:hover
{
	transform: translateY(-5px);
}
.footer-certif .certif
{
	display: inline-block;
	max-width: 125px;
	margin: 0 15px;
}
.footer-copyright
{
	margin-top: 30px;
}

@media only screen and (max-device-width: 1248px)
{
	ul.menu-right li
	{
		margin-left: 10px;
	}
	ul.menu-right li a
	{
		font-size: 20px;
		padding: 15px 10px;
	}
	section.section-hero
	{
		margin-top: -25px;
		height: 85vh;
		background-size: contain;
	}
	section.section-home-about
	{
		margin-top: -25px;
	}
	section.section-home-whyus .container-fluid
	{
		padding: 130px 0;
	}
	section.section-about-hero
	{
		margin-top: -5px;
		height: 85vh;
		background-size: cover;
	}
	section.section-calibration-second
	{
		padding-bottom: 0;
		margin-bottom: 0;
	}
}
@media only screen and (max-device-width: 1152px)
{
	ul.menu-right li
	{
		margin-left: 10px;
	}
	ul.menu-right li a
	{
		font-size: 16px;
		padding: 15px 10px;
	}
	section.section-hero
	{
		margin-top: -50px;
		height: 85vh;
	}
	section.section-home-about
	{
		margin-top: -50px;
	}
	section.section-home-whyus .container-fluid
	{
		padding: 115px 0;
	}
	section.section-about-hero
	{
		margin-top: -30px;
	}
	section.section-calibration-second
	{
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.scope-hero
	{
		height: 47vh;
	}
}
@media only screen and (max-device-width: 1056px)
{
	ul.menu-right li a
	{
		font-size: 16px;
		padding: 5px;
	}
	section.section-hero
	{
		margin-top: -55px;
		height: 85vh;
	}
	section.section-home-about
	{
		margin-top: -75px;
	}
	section.section-home-whyus .container-fluid
	{
		padding: 95px 0;
	}
	section.section-about-hero
	{
		margin-top: -55px;
		background-size: contain;
	}
	section.section-about-intermezo
	{
		margin-top: -30px;
	}
	section.section-calibration-second
	{
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.scope-hero
	{
		height: 42vh;
	}
}

/* BUTTON SOCIAL MEDIA */


.share-social {
	padding: 15px;
}

a.btn-social,
.btn-social {
	border-radius: 5px;
	color: #ffffff;
	display: inline-block;
	height: 54px;
	line-height: 54px;
	margin: 0px;
	text-align: center;
	text-decoration: none;
	transition: background-color .3s;
	webkit-transition: background-color .3s;
	/* width: 54px; */
	width: fit-content;
}

.btn-social .fa,
.btn-social i {
	backface-visibility: hidden;
	moz-backface-visibility: hidden;
	ms-transform: scale(1);
	o-transform: scale(1);
	transform: scale(1);
	transition: all .25s;
	webkit-backface-visibility: hidden;
	webkit-transform: scale(1);
	webkit-transition: all .25s;
}

.btn-social:hover,
.btn-social:focus {
	color: #fff;
	outline: none;
	text-decoration: none;
}

.btn-social:hover .fa,
.btn-social:focus .fa,
.btn-social:hover i,
.btn-social:focus i {
	ms-transform: scale(1.3);
	o-transform: scale(1.3);
	transform: scale(1.3);
	webkit-transform: scale(1.3);
}

.btn-social.btn-xs {
	font-size: 9px;
	height: 24px;
	line-height: 13px;
	margin:0px;
	/* width: 24px; */
	width: fit-content;
}

.btn-social.btn-sm {
	font-size: 12px;
	height: 30px;
	line-height: 22px;
	margin: 0px;
	/* width: 36px; */
	width: fit-content;
}

.btn-social.btn-lg {
	font-size: 22px;
	height: 72px;
	line-height: 40px;
	margin: 0px;
	/* width: 72px; */
	width: fit-content;
}

.btn-behance {
	background-color: #1769ff;
}
.btn-copy-link {
	background-color: #ffffff;
	color: #000 !important;
	border: 1px solid;
}

.btn-behance:hover {
	background-color: #4a8aff;
}

.btn-bitbucket {
	background-color: #205081;
}

.btn-bitbucket:hover {
	background-color: #2a69aa;
}

.btn-codepen {
	background-color: #76daff;
}

.btn-codepen:hover {
	background-color: #a9e8ff;
}

.btn-deviantart {
	background-color: #4e6252;
}

.btn-deviantart:hover {
	background-color: #657e6a;
}

.btn-digg {
	background-color: #000;
}

.btn-digg:hover {
	background-color: #1a1a1a;
}

.btn-dribbble {
	background-color: #ea4c89;
}

.btn-dribbble:hover {
	background-color: #ef7aa7;
}

.btn-dropbox {
	background-color: #007ee5;
}

.btn-dropbox:hover {
	background-color: #1998ff;
}

.btn-facebook {
	background-color: #3b5998;
}

.btn-facebook:hover {
	background-color: #4c70ba;
}

.btn-flickr {
	background-color: #0063dc;
}

.btn-flickr:hover {
	background-color: #107cff;
}

.btn-foursquare {
	background-color: #ef4b78;
}

.btn-foursquare:hover {
	background-color: #f37a9b;
}

.btn-github {
	background-color: #4183c4;
}

.btn-github:hover {
	background-color: #689cd0;
}

.btn-google-plus {
	background-color: #dd4b39;
}

.btn-google-plus:hover {
	background-color: #e47365;
}

.btn-instagram {
	background-color: #3f729b;
}

.btn-instagram:hover {
	background-color: #548cb9;
}

.btn-jsfiddle {
	background-color: #4679bd;
}

.btn-jsfiddle:hover {
	background-color: #6c94ca;
}

.btn-lastfm {
	background-color: #e31b23;
}

.btn-lastfm:hover {
	background-color: #e9484e;
}

.btn-linkedin {
	background-color: #0976b4;
}

.btn-linkedin:hover {
	background-color: #0b96e5;
}

.btn-paypal {
	background-color: #253b80;
}

.btn-paypal:hover {
	background-color: #304da8;
}

.btn-pinterest {
	background-color: #cc2127;
}

.btn-pinterest:hover {
	background-color: #e04046;
}

.btn-reddit {
	background-color: #ff4500;
}

.btn-reddit:hover {
	background-color: #ff6a33;
}

.btn-skype {
	background-color: #00aff0;
}

.btn-skype:hover {
	background-color: #24c4ff;
}

.btn-soundcloud {
	background-color: #f80;
}

.btn-soundcloud:hover {
	background-color: #ffa033;
}

.btn-stack-overflow {
	background-color: #fe7a15;
}

.btn-stack-overflow:hover {
	background-color: #fe9748;
}

.btn-steam {
	background-color: #7da10e;
}

.btn-steam:hover {
	background-color: #a1d012;
}

.btn-stumbleupon {
	background-color: #eb4924;
}

.btn-stumbleupon:hover {
	background-color: #ef7053;
}

.btn-trello {
	background-color: #256a92;
}

.btn-trello:hover {
	background-color: #2f88bb;
}

.btn-tumblr {
	background-color: #35465c;
}

.btn-tumblr:hover {
	background-color: #485f7c;
}

.btn-twitch {
	background-color: #6441a5;
}

.btn-twitch:hover {
	background-color: #7e5bbe;
}

.btn-twitter {
	background-color: #55acee;
}

.btn-twitter:hover {
	background-color: #83c3f3;
}

.btn-vimeo {
	background-color: #1ab7ea;
}

.btn-vimeo:hover {
	background-color: #49c6ee;
}

.btn-vine {
	background-color: #00b488;
}

.btn-vine:hover {
	background-color: #00e7af;
}

.btn-vk {
	background-color: #45668e;
}

.btn-vk:hover {
	background-color: #587fae;
}

.btn-wechat {
	background-color: #98d11c;
}

.btn-wechat:hover {
	background-color: #afe53b;
}

.btn-wordpress {
	background-color: #21759b;
}

.btn-wordpress:hover {
	background-color: #2a95c5;
}

.btn-xing {
	background-color: #026466;
}

.btn-xing:hover {
	background-color: #039598;
}

.btn-yahoo {
	background-color: #400191;
}

.btn-yahoo:hover {
	background-color: #5601c4;
}

.btn-yelp {
	background-color: #af0606;
}

.btn-yelp:hover {
	background-color: #e00808;
}

.btn-youtube {
	background-color: #e52d27;
}

.btn-youtube:hover {
	background-color: #ea5955;
}

.btn-whatsapp {
	background-color: #44c456;
}

.btn-whatsapp:hover {
	background-color: #6bd079;
}

/* LIKE & DISLIKE BUTITON */
/* From Uiverse.io by Li-Deheng */
.like-dislike-container {
	--dark-grey: #353535;
	--middle-grey: #767676;
	/* --lightest-grey: linear-gradient(#fafafa, #ebebeb); */
	/* --shadow: 0 5px 15px 0 #00000026; */
	/* --shadow-active: 0 5px 5px 0 #00000026; */
	--border-radius-main: 10px;
	--border-radius-icon: 20px;
	position: relative;
	display: flex;
	text-align: center;
	flex-direction: column;
	align-items: center;
	cursor: default;
	color: var(--dark-grey);
	opacity: .9;
	margin: auto;
	padding: 0rem;
	font-weight: 600;
	background: var(--lightest-grey);
	max-width: max-content;
	border-radius: var(--border-radius-main);
	box-shadow: var(--shadow);
	transition: .2s ease all;
}

.like-dislike-container:hover {
	box-shadow: var(--shadow-active);
}

.like-dislike-container .tool-box {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	top: 0;
	right: 0;
	border-radius: var(--border-radius-main);
}

.like-dislike-container .btn-close {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: .8rem;
	height: .8rem;
	color: transparent;
	font-size: 0;
	cursor: pointer;
	background-color: #ff000080;
	border: none;
	border-radius: var(--border-radius-main);
	transition: .2s ease all;
}

.like-dislike-container .btn-close:hover {
	width: 1rem;
	height: 1rem;
	font-size: 1rem;
	color: #ffffff;
	background-color: #ff0000cc;
	box-shadow: var(--shadow-active);
}

.like-dislike-container .btn-close:active {
	width: .9rem;
	height: .9rem;
	font-size: .9rem;
	color: #ffffffde;
	--shadow-btn-close: 0 3px 3px 0 #00000026;
	box-shadow: var(--shadow-btn-close);
}

.like-dislike-container .text-content {
	margin-bottom: 1rem;
	font-size: 18px;
	line-height: 1.6;
	cursor: default;
}

.like-dislike-container .icons-box {
	display: flex;
}

.like-dislike-container .icons {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: .6;
	margin: 0 0.5rem;
	cursor: pointer;
	user-select: none;
	border: 1px solid var(--middle-grey);
	border-radius: var(--border-radius-icon);
	transition: .2s ease all;
}

.like-dislike-container .icons:hover {
	opacity: .9;
	box-shadow: var(--shadow);
}

.like-dislike-container .icons:active {
	opacity: .9;
	box-shadow: var(--shadow-active);
}

.like-dislike-container .icons .btn-label {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 0.5rem;
	cursor: pointer;
	position: relative;
}

.like-dislike-container .like-text-content {
	border-right: 0.1rem solid var(--dark-grey);
	padding: 0 0.6rem 0 0.5rem;
	pointer-events: none;
}

.like-dislike-container .dislike-text-content {
	border-left: 0.1rem solid var(--dark-grey);
	padding: 0 0.5rem 0 0.6rem;
	pointer-events: none;
}

.like-dislike-container .icons .svgs {
	width: 1.5rem;
	fill: #000000;
	box-sizing: content-box;
	padding: 10px 10px;
	transition: .2s ease all;
}

/* Hide the default checkbox */
.like-dislike-container .icons .input-box {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.like-dislike-container .icons #icon-like-regular {
	display: block;
}

.like-dislike-container .icons #icon-like-solid {
	display: none;
}

.like-dislike-container .icons:hover :is(#icon-like-solid, #icon-like-regular) {
	animation: rotate-icon-like 0.7s ease-in-out both;
}

.like-dislike-container .icons #like-checkbox:checked~#icon-like-regular {
	display: none;
	animation: checked-icon-like 0.5s;
}

.like-dislike-container .icons #like-checkbox:checked~#icon-like-solid {
	display: block;
	animation: checked-icon-like 0.5s;
}

.like-dislike-container .icons #icon-dislike-regular {
	display: block;
	transform: rotate(180deg);
}

.like-dislike-container .icons #icon-dislike-solid {
	display: none;
	transform: rotate(180deg);
}

.like-dislike-container .icons:hover :is(#icon-dislike-solid, #icon-dislike-regular) {
	animation: rotate-icon-dislike 0.7s ease-in-out both;
}

.like-dislike-container .icons #dislike-checkbox:checked~#icon-dislike-regular {
	display: none;
	animation: checked-icon-dislike 0.5s;
}

.like-dislike-container .icons #dislike-checkbox:checked~#icon-dislike-solid {
	display: block;
	animation: checked-icon-dislike 0.5s;
}

.like-dislike-container .icons .fireworks {
	transform: scale(0.4);
}

.like-dislike-container .icons #like-checkbox:checked~.fireworks>.checked-like-fx {
	position: absolute;
	width: 10px;
	height: 10px;
	right: 40px;
	border-radius: 50%;
	box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
	animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;
	animation-duration: 1.25s, 1.25s, 6.25s;
}

.like-dislike-container .icons #dislike-checkbox:checked~.fireworks>.checked-dislike-fx {
	position: absolute;
	width: 10px;
	height: 10px;
	left: 40px;
	border-radius: 50%;
	box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
	animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;
	animation-duration: 1.25s, 1.25s, 6.25s;
}

/* Shake Animation */
@keyframes rotate-icon-like {
	0% {
		transform: rotate(0deg) translate3d(0, 0, 0);
	}

	25% {
		transform: rotate(3deg) translate3d(0, 0, 0);
	}

	50% {
		transform: rotate(-3deg) translate3d(0, 0, 0);
	}

	75% {
		transform: rotate(1deg) translate3d(0, 0, 0);
	}

	100% {
		transform: rotate(0deg) translate3d(0, 0, 0);
	}
}

@keyframes rotate-icon-dislike {
	0% {
		transform: rotate(180deg) translate3d(0, 0, 0);
	}

	25% {
		transform: rotate(183deg) translate3d(0, 0, 0);
	}

	50% {
		transform: rotate(177deg) translate3d(0, 0, 0);
	}

	75% {
		transform: rotate(181deg) translate3d(0, 0, 0);
	}

	100% {
		transform: rotate(180deg) translate3d(0, 0, 0);
	}
}

/* Checked Animation */
@keyframes checked-icon-like {
	0% {
		transform: scale(0);
		opacity: 0;
	}

	50% {
		transform: scale(1.2) rotate(-10deg);
	}
}

@keyframes checked-icon-dislike {
	0% {
		transform: scale(0) rotate(180deg);
		opacity: 0;
	}

	50% {
		transform: scale(1.2) rotate(170deg);
	}
}

/* Fireworks Animation */
@keyframes fireworks-position {

	0%,
	19.9% {
		margin-top: 10%;
		margin-left: 40%;
	}

	20%,
	39.9% {
		margin-top: 40%;
		margin-left: 30%;
	}

	40%,
	59.9% {
		margin-top: 20%;
		margin-left: 70%;
	}

	60%,
	79.9% {
		margin-top: 30%;
		margin-left: 20%;
	}

	80%,
	99.9% {
		margin-top: 30%;
		margin-left: 80%;
	}
}

@keyframes fireworks-gravity {
	to {
		transform: translateY(200px);
		opacity: 0;
	}
}

@keyframes fireworks-bang {
	to {
		box-shadow: 114px -107.3333333333px #8800ff, 212px -166.3333333333px #a600ff, 197px -6.3333333333px #ff006a, 179px -329.3333333333px #3300ff, -167px -262.3333333333px #ff0062, 233px 65.6666666667px #ff008c, 81px 42.6666666667px #0051ff, -13px 54.6666666667px #00ff2b, -60px -183.3333333333px #0900ff, 127px -259.3333333333px #ff00e6, 117px -122.3333333333px #00b7ff, 95px 20.6666666667px #ff8000, 115px 1.6666666667px #0004ff, -160px -328.3333333333px #00ff40, 69px -242.3333333333px #000dff, -208px -230.3333333333px #ff0400, 30px -15.3333333333px #e6ff00, 235px -15.3333333333px #fb00ff, 80px -232.3333333333px #d5ff00, 175px -173.3333333333px #00ff3c, -187px -176.3333333333px #aaff00, 4px 26.6666666667px #ff6f00, 227px -106.3333333333px #ff0099, 119px 17.6666666667px #00ffd5, -102px 4.6666666667px #ff0088, -16px -4.3333333333px #00fff7, -201px -310.3333333333px #00ffdd, 64px -181.3333333333px #f700ff, -234px -15.3333333333px #00fffb, -184px -263.3333333333px #aa00ff, 96px -303.3333333333px #0037ff, -139px 10.6666666667px #0026ff, 25px -205.3333333333px #00ff2b, -129px -322.3333333333px #40ff00, -235px -187.3333333333px #26ff00, -136px -237.3333333333px #0091ff, -82px -321.3333333333px #6a00ff, 7px -267.3333333333px #ff00c8, -155px 30.6666666667px #0059ff, -85px -73.3333333333px #6a00ff, 60px -199.3333333333px #55ff00, -9px -289.3333333333px #00ffaa, -208px -167.3333333333px #00ff80, -13px -299.3333333333px #ff0004, 179px -164.3333333333px #ff0044, -112px 12.6666666667px #0051ff, -209px -125.3333333333px #ff00bb, 14px -101.3333333333px #00ff95, -184px -292.3333333333px #ff0099, -26px -168.3333333333px #09ff00, 129px -67.3333333333px #0084ff, -17px -23.3333333333px #0059ff, 129px 34.6666666667px #7300ff, 35px -24.3333333333px #ffd900, -12px -297.3333333333px #ff8400, 129px -156.3333333333px #0dff00, 157px -29.3333333333px #1a00ff, -221px 6.6666666667px #ff0062, 0px -311.3333333333px #ff006a, 155px 50.6666666667px #00ffaa, -71px -318.3333333333px #0073ff;
	}
}


/* ALERT MESSAGE */

#alertMsg {
	position: fixed;
	top: 15%;
	left: 50%;
	transform: translateX(-50%);
	max-width: 320px;
	background-color: black;
	border-radius: 0.5rem;
	z-index: 999;
	padding: 10px;
	text-align: center;
	transition: all linear 0.5s;
	opacity: 0;
}


