@charset "ISO-8859-1";

/* Media Query for Mobile Devices */
@media (max-width: 480px) {
	.matterPortItem {
		width: 300px;
		height: 300px;
	}
	.img-for-services {
		height: 10px;
	}
	.titleCard {
		font-size: 2em;
		font-family: "Oswald", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
	}
	.hidden-sm {
		display: none !important; // use important to override other styles
	}
	.show-sm {
		display: block !important; // use important to override other styles
	}
	.mobileTitle {
		font-size: 3em;
		font-family: "Mulish", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		color: white;
	}
	.mobileText {
		font-size: 1em;
		font-family: "Mulish", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		color: white;
	}
	.alurKerjaHD {
		display: none !important; // use important to override other styles
	}
	.alurKerjaFHD {
		display: none !important; // use important to override other styles
	}
}

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
	.matterPortItem {
		width: 300px;
		height: 300px;
	}
	.titleCard {
		font-size: 4em;
		font-family: "Oswald", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
	}
	.hidden-sm {
		display: none !important; // use important to override other styles
	}
	.show-sm {
		display: block !important; // use important to override other styles
	}
	.mobileTitle {
		font-size: 3em;
		font-family: "Mulish", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		color: white;
	}
	.mobileText {
		font-size: 1em;
		font-family: "Mulish", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		color: white;
	}
	.alurKerjaHD {
		display: none !important; // use important to override other styles
	}
	.alurKerjaFHD {
		display: none !important; // use important to override other styles
	}
}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 900px) {
	.matterPortItem {
		width: 700px;
		height: 400px;
	}
	.img-for-services {
		height: 160px;
	}
	.titleCard {
		font-size: 4em;
		font-family: "Oswald", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
	}
	.hidden-sm {
		display: none !important; // use important to override other styles
	}
	.show-sm {
		display: block !important; // use important to override other styles
	}
	.alurKerjaHD {
		display: none !important; // use important to override other styles
	}
	.alurKerjaFHD {
		display: none !important; // use important to override other styles
	}
}
/*150% 1920x1080*/
/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1440px) {
	.matterPortItem {
		width: 700px;
		height: 400px;
	}
	.img-for-services {
		height: 160px;
	}
	.arrow-for-services {
		height: 120px;
	}
	.arrow-for-services-up {
		height: 120px;
	}

	.show-sm {
		display: none !important; // use important to override other styles
	}
	.titleCard {
		font-size: 1em;
		font-family: "Oswald", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
	}
	.alurKerjaFHD {
		display: none !important; // use important to override other styles
	}
	.alurKerjaM {
		display: none !important; // use important to override other styles
	}
}

/*125% 1920x1080*/
/* Media Query for Large screens */
@media (min-width: 1441px) and (max-width: 1600px) {
	.matterPortItem {
		width: 900px;
		height: 600px;
	}

	.show-sm {
		display: none !important; // use important to override other styles
	}
	.hidden-sm {
		display: block !important; // use important to override other styles
	}
	.titleCard {
		font-size: 1em;
		font-family: "Oswald", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
	}
	.alurKerjaHD {
		display: none !important; // use important to override other styles
	}
	.alurKerjaM {
		display: none !important; // use important to override other styles
	}
}

/*100% 1920x1080*/
/* Media Query for Large screens */
@media (min-width: 1601px) and (max-width: 1920px) {
	.matterPortItem {
		width: 1200px;
		height: 720px;
	}
	.img-for-services {
		height: 150px;
		margin-top: 20px;
	}
	.arrow-for-services {
		height: 180px;
		margin-top: 80px;
	}
	.arrow-for-services-up {
		height: 180px;
	}
	.show-sm {
		display: none !important; // use important to override other styles
	}
	.alurKerjaHD {
		display: none !important; // use important to override other styles
	}
	.alurKerjaM {
		display: none !important; // use important to override other styles
	}
}

.bounce {
	animation: slide1 1s ease-in-out infinite;
}

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

	50% {
		transform: translate(10px, 0);
	}
}

.iconVirtualign {
	position: absolute;
	bottom: 100px;
	right: 500px;
	width: 100px;
	z-index: 9999;
}

/* Reset CSS
 * --------------------------------------- */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
	padding: 0;
	margin: 0;
}
a {
	text-decoration: none;
}
table {
	border-spacing: 0;
}
fieldset,
img {
	border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-weight: normal;
	font-style: normal;
}
strong {
	font-weight: bold;
}
ol,
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
caption,
th {
	text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	font-size: 100%;
	margin: 0;
	padding: 0;
	color: #444;
}
q:before,
q:after {
	content: "";
}
abbr,
acronym {
	border: 0;
}

/* Custom CSS
 * --------------------------------------- */
body {
	font-family: arial, helvetica;
	color: #333;
	color: rgba(0, 0, 0, 0.5);
}
.wrap {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	position: relative;
}
h1 {
	font-size: 4em;
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

p {
	font-size: 2em;
}
.intro p {
	width: 50%;
	margin: 0 auto;
	font-size: 1.5em;
}
.section {
	text-align: center;
	overflow: hidden;
	background-size: cover;
	background-attachment: fixed;
}

#myVideo {
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
	background-image: /* our video */ ;
	background-position: center center;
	background-size: contain;
	object-fit: cover; /*cover video background */
	z-index: 3;
}

#menu li {
	display: inline-block;
	margin: 10px;
	color: #000;
	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#menu li.active {
	background: #666;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
}
#menu li a {
	text-decoration: none;
	color: #000;
}
#menu li.active a:hover {
	color: #000;
}
#menu li:hover {
	background: rgba(255, 255, 255, 0.8);
}
#menu li a,
#menu li.active a {
	padding: 9px 18px;
	display: block;
}
#menu li.active a {
	color: #fff;
}
#menu {
	position: fixed;
	top: 0;
	left: 0;
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin: 0;
}
.twitter-share-button {
	position: fixed !important;
	z-index: 99;
	right: 149px;
	top: 9px;
}
#infoMenu {
	height: 20px;
	color: #f2f2f2;
	position: fixed;
	z-index: 70;
	bottom: 0;
	width: 100%;
	text-align: right;
	font-size: 0.9em;
	padding: 8px 0 8px 0;
}
#infoMenu ul {
	padding: 0 40px;
}
#infoMenu li a {
	display: block;
	margin: 0 22px 0 0;
	color: #333;
}
#infoMenu li a:hover {
	text-decoration: underline;
}
#infoMenu li {
	display: inline-block;
	position: relative;
}
#examplesList {
	display: none;
	background: #282828;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	padding: 20px;
	float: left;
	position: absolute;
	bottom: 29px;
	right: 0;
	width: 822px;
	text-align: left;
}
#examplesList ul {
	padding: 0;
}
#examplesList ul li {
	display: block;
	margin: 5px 0;
}
#examplesList ul li a {
	color: #bdbdbd;
	margin: 0;
}
#examplesList ul li a:hover {
	color: #f2f2f2;
}
#examplesList .column {
	float: left;
	margin: 0 20px 0 0;
}
#examplesList h3 {
	color: #f2f2f2;
	font-size: 1.2em;
	margin: 0 0 15px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	padding: 0 0 5px 0;
}

/* Icon 
 * --------------------------------------- */
#iconVirtualign {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 999;
	padding: 5px 10px;
}

/* Buttons
 * --------------------------------------- */
#download a {
	text-decoration: none;
}
#download,
#download:hover {
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.button {
	margin: 20px 0 0 0;
	vertical-align: middle;
	display: inline-block;
}

.button a {
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	padding: 15px 30px;
	border-radius: 5px;
	display: inline-block;
}

.button a:hover {
	color: #316f68;
	background-color: #fff;
}

/* Extensions preview menu
 * --------------------------------------- */
.preview-extensions-menu {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99;
	border-top: 0;
	box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.8);
}
.preview-extensions-menu li {
	display: inline-block;
	margin: 0;
}
.preview-extensions-menu li a {
	padding: 15px 25px;
	display: block;
}
.preview-buy-extension {
	background: #3cc63c;
}
.preview-more-extensions {
	background: #fff;
}
.preview-buy-extension a {
	color: #fff;
}
.preview-buy-extension:hover {
	background-color: #1a961a;
}
.preview-more-extensions a {
	color: #333;
}

.code {
	background: rgba(255, 255, 255, 0.7);
	padding: 0px 5px;
	line-height: 25px;
}

/* Style for our header texts
* --------------------------------------- */
h1 {
	font-size: 5em;
	font-family: "Mulish", sans-serif;
	color: #000000;
	margin: 0;
}
.section p,
.intro p {
	color: #000000;
}

/* Centered texts in each section
* --------------------------------------- */
.section {
	text-align: center;
}

/* Bottom menu
* --------------------------------------- */
#infoMenu li a {
	color: #fff;
}

/* Backgrounds will cover all the section
	* --------------------------------------- */
.section,
.slide {
	background-size: cover;
	background-attachment: fixed;
}

/* Fixed header and footer.
	* --------------------------------------- */
#header,
#footer {
	position: fixed;
	height: 80px;
	display: block;
	width: 100%;
	background-image: linear-gradient(
		to bottom,
		rgba(235, 227, 227, 0),
		rgb(0, 0, 0)
	);
	z-index: 9;
	text-align: center;
	color: #f2f2f2;
	padding: 30px 0 0 0;
}

#header {
	top: 0px;
}
#footer {
	bottom: 0px;
}

/* Sections backgrounds
* --------------------------------------- */
#section0 .layer {
	position: absolute;
	z-index: 4;
	width: 100%;
	left: 0;
	top: 43%;

	/*
	* Preventing flicker on some browsers
	* See http://stackoverflow.com/a/36671466/1081396  or issue #183
	*/
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/*solves problem with overflowing video in Mac with Chrome */
#section0 {
	overflow: hidden;
}

#section1 {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	/*  this is where the magic happens:  */
	background-attachment: fixed;
}

#section2 {
}

#section3 {
	background: linear-gradient(
		85deg,
		rgba(37, 64, 143, 0.6) 30%,
		rgba(210, 35, 42, 0.6) 100%
	) !important;

	text-align: left;
}

#section4 {
	text-align: left;
	background: linear-gradient(
		85deg,
		rgba(37, 64, 143, 0.6) 30%,
		rgba(210, 35, 42, 0.6) 100%
	) !important;
}

#section5 {
	text-align: left;
	background: linear-gradient(
		85deg,
		rgba(37, 64, 143, 0.6) 30%,
		rgba(210, 35, 42, 0.6) 100%
	) !important;
	background-image: url(../img/bg.jpg);
}

.svg-container {
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	vertical-align: middle;
	overflow: hidden;
}

.svg-content {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}
.wrapper {
	padding: 50px 100px;
}

.fp-controlArrow.fp-prev {
	left: 50px;
	border-color: transparent #666 transparent transparent;
	cursor: pointer;
}
.fp-controlArrow.fp-next {
	right: 50px;
	border-color: transparent transparent transparent #666;
	cursor: pointer;
}

.fade-in-image {
	animation: fadeIn 3s;
}

.fade-in-image2 {
	animation: cssAnimation 0s 3s forwards;
	opacity: 0;
}

.fade-in-image3 {
	animation: cssAnimation 0s 6s forwards;
	opacity: 0;
}

.fade-in-image4 {
	animation: cssAnimation 0s 9s forwards;
	opacity: 0;
}
.fade-in-image5 {
	animation: cssAnimation 0s 12s forwards;
	opacity: 0;
}
.fade-in-image6 {
	animation: cssAnimation 0s 13s forwards;
	opacity: 0;
}
.fade-in-image7 {
	animation: cssAnimation 0s 14s forwards;
	opacity: 0;
}
.fade-in-image8 {
	animation: cssAnimation 0s 1s forwards;
	opacity: 0;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes cssAnimation {
	to {
		opacity: 1;
	}
}