@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(../../assets/css/animate.css);
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css");

body { font-family: 'Poppins', sans-serif; color: #666666; -webkit-font-smoothing: antialiased; }
a { font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; }
div.content { overflow: hidden ; }
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 { color: #666666; }
header { background:#e5463e; height:auto; }

#header-mepandes { color: #fff; font-weight: 100; font-size: 15px; }
#header-mepandes .bg-header { background: rgb(85,156,224); background: linear-gradient(0deg, rgba(85,156,224,1) 0%, rgba(45,80,139,1) 100%); }
#header-mepandes .yellow { color: #ffcb4d; font-weight: 300;   }
#header-mepandes h2 { font-size: 30px;  font-weight: 300; margin: 50px 10px;  }
#header-mepandes #logo1 { background: #fff;  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); padding: 20px 30px; width: 200px; border-radius: 0px 0px 20px 20px; text-align: center; margin: 0px auto; }

#header-seserahan { background: #eae4da;   }



/*SLIDER*/
#main-slider { }
#main-slider { position: relative; }
.no-margin { margin: 0;  padding: 0; }
#main-slider .carousel .carousel-content { margin-top: 140px;}
#main-slider .carousel h2 { font-family: 'Montserrat', sans-serif; color: #fff; text-transform:uppercase; font-size:50px;  font-weight: 200;  letter-spacing:1.px; }
#main-slider .carousel h2 span { color: #ffda0c; }
#main-slider .carousel h2 .spani { color: #fff; }
#main-slider .carousel .btn-slide { padding: 8px 20px; background: #50cc89; color: #fff; border-radius: 4px; margin: 25px 0px;
 display: inline-block; -webkit-border-radius: 3em; -moz-border-radius: 3em; -ms-border-radius: 3em; -o-border-radius: 3em;
border-radius: 3em; }
#main-slider .carousel .btn-slide a { color:#C00; }
#main-slider .carousel .btn-slide a:hover { background: #000; }
#main-slider .carousel .slider-img { width:80%; margin-top:50px; }
#main-slider .carousel .item { left: 0 !important; opacity: 0; top: 0; position: absolute; width: 100%; display: block !important; -webkit-transition: opacity ease-in-out 500ms; -moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms; }

#main-slider .carousel .item:first-child { top: auto; position: relative; }
#main-slider .carousel .item.active { opacity: 1; -webkit-transition: opacity ease-in-out 500ms; -moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms; z-index: 1; }
#main-slider .active .animation.animated-item-1 { -webkit-animation: fadeInUp 300ms linear 300ms both; -moz-animation: fadeInUp 300ms linear 300ms both; -o-animation: fadeInUp 300ms linear 300ms both; -ms-animation: fadeInUp 300ms linear 300ms both; animation: fadeInUp 300ms linear 300ms both; }
#main-slider .active .animation.animated-item-2 { -webkit-animation: fadeInUp 300ms linear 600ms both; -moz-animation: fadeInUp 300ms linear 600ms both; -o-animation: fadeInUp 300ms linear 600ms both; -ms-animation: fadeInUp 300ms linear 600ms both; animation: fadeInUp 300ms linear 600ms both; }
#main-slider .active .animation.animated-item-3 { -webkit-animation: fadeInUp 300ms linear 900ms both; -moz-animation: fadeInUp 300ms linear 900ms both; -o-animation: fadeInUp 300ms linear 900ms both; -ms-animation: fadeInUp 300ms linear 900ms both; animation: fadeInUp 300ms linear 900ms both; }
#main-slider .active .animation.animated-item-4 { -webkit-animation: fadeInUp 300ms linear 1200ms both; -moz-animation: fadeInUp 300ms linear 1200ms both; -o-animation: fadeInUp 300ms linear 1200ms both; -ms-animation: fadeInUp 300ms linear 1200ms both; animation: fadeInUp 300ms linear 1200ms both; }

/*HEADER*/
header .navbar-default { background: none; border: none; padding-top: 40px; padding-bottom: 20px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
header .navbar-default ul.navbar-nav { padding-top: 15px; }
header .navbar-default ul.navbar-nav li a { text-transform: capitalize; font-weight: 400; font-size: 16px; padding: 7px 20px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
header .navbar-default ul.navbar-nav li a:after { content: '';  width: 32px; background: none; height: 4px;
  position: absolute; bottom: 2px; z-index: 99999; left: 20px; -webkit-border-radius: 5em; -moz-border-radius: 5em; -ms-border-radius: 5em; -o-border-radius: 5em; border-radius: 5em; color: #ffffff; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
header .navbar-default ul.navbar-nav li a:hover { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
header .navbar-default ul.navbar-nav li a:hover:after { background: #ffffff; }
header .navbar-default ul.navbar-nav li a.getApp { -webkit-border-radius: 5em; -moz-border-radius: 5em;
 -ms-border-radius: 5em; -o-border-radius: 5em; border-radius: 5em; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
header .navbar-default ul.navbar-nav li a.getApp:after { display: none; }
header .navbar-default ul.navbar-nav li a:focus { color: #ffffff; }
header .navbar-default .navbar-brand { height: auto; padding: 0; }
header .navbar-default.scrolled { background: rgba(255, 255, 433, 1); -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); padding: 0; -webkit-transition: all 0.25s ease-in-out;  -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
header .navbar-default.scrolled .navbar-brand { padding: 2px 20px; }
header .navbar-default.scrolled .navbar-brand img { width: auto; max-height: 63px; }
header .navbar-default.scrolled ul.navbar-nav { padding-top: 15px; }

.scrollpoint { opacity: 0; }
.scrollpoint.active { opacity: 1 \0; }
.hanging-phone { position: absolute; right: 0; z-index: 0; bottom: -70px; }
.section-heading { margin: 10px 0 ; text-align: center;  }
.section-heading2 { margin: 40px 0 ; }
.section-heading2 h1 { display: inline-block; font-size: 50px; font-weight: 300; margin-bottom: 0; }
.section-heading h1 { display: inline-block; font-size: 30px; font-weight: 300; margin-bottom: 0; -webkit-transition: opacity ease-in-out 500ms; -moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms; }
.section-heading h2 { display: inline-block; font-size: 55px; font-weight: 300; margin-bottom: 0; color:#FFF; }
.section-heading p { font-size: 17px; color: #000; font-weight: 300; -webkit-transition: opacity ease-in-out 500ms;-moz-transition: opacity ease-in-out 500ms; -o-transition: opacity ease-in-out 500ms; transition: opacity ease-in-out 500ms; font-weight: 400; }
.section-heading2 p { font-size: 25px; color: #999999; font-weight: 300; }
.section-heading span { font-size: 25px; color:#FFF; font-weight: 300; }
.section-heading h5 { font-size: 25px; color:#FFF; font-weight:400; text-align:center; }
.section-heading h6 { font-size: 25px; color:#FFF; font-weight: 300; text-align:center; }
.section-heading .divider:after { content: ""; position: relative; height: 4px; width: 60px; display: block; text-align: center;
 margin: 13px auto; -webkit-border-radius: 5em; -moz-border-radius: 5em; -ms-border-radius: 5em; -o-border-radius: 5em;  border-radius: 5em; }
.section-heading.inverse h1,
.section-heading.inverse p { color: #ffffff; }
.section-heading.inverse .divider:after { background: #ffffff; }
section#about { position: relative; }
section#about .about-item { text-align: center; font-size: 17px; line-height: 25px; color: #999999; }
section#about .about-item i.fa { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; padding: 35px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; width: 104px; }

/*LANGKAH DAFTAR */
section#features .media i.fa { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; padding: 20px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; width: 2.6em; text-align: center; }
section#features .media .media-heading { padding-top: 10px; font-weight: 300; }
section#features .media .media-body { padding-top: 15px;  }
section#features .media.feature { margin: 15px; }
section#features .media.feature:first-child { margin-top: 0; }
section#features img {  }
section#features .pull-left { margin: 20px 10px 0px 10px; }

/*THEME*/
section#theme { min-height: 450px; overflow: hidden; background:#e5463e; color:#FFF; }
section#theme h2 { font-size: 30px; }


/* UNDANGAN CETAK */
section#getApp {  }
section#getApp .bg { margin-top:50px; }

/* JOIN PARTNERS */
section#support { background: #e5463e; width:100%; }
section#support .center { text-align:center; margin:0px auto; }
section#support .yellow { color: #ffda0c; }
section#support h1 { font-size: 25px;  color: #fff; font-weight: normal;  }

/* FOOTER */
footer { text-align: center; padding:20px 0px; background:#1f1f1f; color: #d0d0d0; }
footer .footer1 { font-size:11px; line-height: 20px; color: #818181;  }

/* Common style for pseudo-elements */
section { position: relative; }
section::before,section::after { position: absolute; content: ''; pointer-events: none; overflow: hidden; }
.carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; }
.carousel-fade .carousel-inner .active { opacity: 1; }
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; }
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { opacity: 1; }
.carousel-fade .carousel-control { z-index: 2; }
.tp-caption { font-family: 'Montserrat', sans-serif; letter-spacing:2px; }
.tp-caption.large_white_bold { color: #ffffff; font-size: 50px; line-height:70px;  font-weight: 200; }
.tp-caption.large_white_orange { color: #ffda0c; font-weight: 50; }
.tp-caption.large_white_light { color: #ffffff; font-size: 65px; font-weight: 400; font-weight: 300; }
.btn { -webkit-border-radius: 3em; -moz-border-radius: 3em; -ms-border-radius: 3em; -o-border-radius: 3em; border-radius: 3em; padding: 5px 25px; }
.btn.btn-primary {  -webkit-border-radius: 3em; -moz-border-radius: 3em; -ms-border-radius: 3em; -o-border-radius: 3em; border-radius: 3em;  padding: 5px 25px; background: #000; color: #fff; }
.btn.btn-primary:hover { color: #fff; background:#FFF; }
.btn.btn-primary2 {  -webkit-border-radius: 3em; -moz-border-radius: 3em; -ms-border-radius: 3em; -o-border-radius: 3em; border-radius: 3em; padding: 5px 25px; background: #000; color: #fff; }
.btn.btn-primary2:hover { color: #000; background:#FFF; }
.btn.btn-default { border: none; background: #ffffff; }
.btn.btn-lg { padding: 10px 25px; }
.btn:hover { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
form .form-control { -webkit-box-shadow: none; -moz-box-shadow: none;  box-shadow: none; -webkit-border-radius: 5em; -moz-border-radius: 5em; -ms-border-radius: 5em; -o-border-radius: 5em; border-radius: 5em; height: 40px; line-height: 40px; padding: 10px 20px; color: #cfcfcf; border: 2px solid #cccccc; font-weight: 300; }
form textarea.form-control { -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; height: auto; line-height: normal; }

@media screen and (max-width: 640px) {
#main-slider .carousel .carousel-content { margin-top: 0px; margin-top:80px; text-align: center; }
#main-slider .carousel .slide-margin { margin-top: 0px; }
#main-slider .carousel h2 { font-size:43px; }
#main-slider .carousel .slider-img { width:70%; margin:0px auto; }	

.logo { width: 140px; height: auto; }
.slick-next { right: 0; }
.slick-prev { left: 0; }
.contact-details { margin-top: 20px; }

header .navbar-default { padding: 20px; }
header .navbar-default .navbar-toggle { margin-top: 0px; margin-right: 0px; background: none;  color: #ffffff; border:none; }
header .navbar-default .navbar-toggle:hover,
header .navbar-default .navbar-toggle:focus { background: none; }
header .navbar-default ul.navbar-nav { padding-top: 0; margin: 0; }
header .navbar-default ul.navbar-nav li a { padding: 10px; text-align: center; }
header .navbar-default ul.navbar-nav li a.getApp { background: none !important;  -webkit-border-radius: 0em; -moz-border-radius: 0em; -ms-border-radius: 0em; -o-border-radius: 0em; border-radius: 0em; }
header .navbar-default .navbar-collapse { border-color: transparent; }
header .navbar-default.scrolled .navbar-collapse { border-color: transparent; }
header .navbar-default.scrolled ul.navbar-nav { padding-top: 0; margin: 0; }
header .navbar-default.scrolled .navbar-toggle { margin-top: 11px; margin-right: 20px; background: none; border:none; color: #ffffff; }
.section-heading h1  { font-size: 30px; }
.section-heading p  { font-size: 14px; line-height: 23px;  }
.section-heading2 { margin: 0 ; padding:0; margin-bottom: 30px; }
.section-heading2 h1 { font-size: 40px; }
.section-heading h2 { font-size: 40px; }
.section-heading { margin: 15px 0; }

#main-slider .carousel h2 { font-size:35px;  font-weight: 500; }
#main-slider .carousel h2 span { }
#main-slider .carousel h2 .spani { }

}
.pre-loader { position: fixed; width: 100%; height: 100%; z-index: 9999999; display: none; }
.pre-loader .load-con { margin: 20% auto; position: relative; text-align: center; }
.spinner { margin: 50px auto 0; width: 70px; text-align: center; }
.spinner > div { width: 18px; height: 18px; background-color: #ffffff; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both;
 animation-fill-mode: both; }
.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }

header { clear:both; }
header .navbar-default ul.navbar-nav li a { color: #ffffff; background: none; }
header .navbar-default ul.navbar-nav li a.getApp { color: #444444; background: #ffffff; }
.navbar-collapseul.navbar-nav li a.getApp:hover { color: #000000; background: #ffffff; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
header .navbar-default ul.navbar-nav li a:hover { color: #ffffff; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
header .navbar-default.scrolled ul.navbar-nav li a { color: #666666; }
header .navbar-default.scrolled ul.navbar-nav li a:hover { color: #336799; }
header .navbar-default.scrolled ul.navbar-nav li a:hover:after { background: #336799; }
header .navbar-default.scrolled .navbar-brand img { -webkit-filter: invert(1); filter: invert(1); }
section .section-heading .divider:after { background: #50cb86; }

section#about .about-item i.fa { border: 2px solid #50cb86; color: #50cb86; }
section#about .about-item:hover i.fa { color: #ffffff; background: #50cb86; }
section#about .about-item:hover h3 { color: #50cb86; }

section#features { background: #f6f6f6; }
section#features header h1:after { background: #50cb86; }
section#features .media i.fa { border: 2px solid #50cb86; color: #50cb86; }
section#features .media:hover i.fa { color: #ffffff; background: #50cb86; }
section#features .media:hover h3 { color: #50cb86; }
section#features .media.active i.fa { color: #ffffff; background: #50cb86; }
section#features .media.active .media-heading { color: #50cb86; }

section#getApp { }
section#getApp header { color: #ffffff; }
section#getApp header h1:after { background: #ffffff; }
section#getApp .platforms .media { border: 2px solid #ffffff; color: #ffffff; }
section#getApp .platforms .media a i { color: #ffffff; }
section#getApp .platforms .media a div.media-body { color: #ffffff; }
section#getApp .platforms .media:hover { background: #ffffff; }
section#getApp .platforms .media:hover a i,
section#getApp .platforms .media:hover a div.media-body { color: #50cb86; }

.navbar-toggle { background-color: #CCC; border: 1px solid rgba(0, 0, 0, 0); }
.btn.btn-primary { color: #fff; background: #50cb86; }
.btn.btn-primary:hover { color: #ffffff; background: #000; }
.btn.btn-primary.inverse { color: #000; background:#FFF; }
.btn.btn-primary.inverse:hover { color: #ffffff; background: #50cb86;  }
.btn.btn-default { background: #ffffff; color: #444444; }
.btn.btn-default:hover { color: #000000; }

.btn-wa { position:fixed; bottom:15px; right:20px; z-index:99; border:none; outline:none; cursor:pointer; }
.btn-wa a:hover { opacity:0.7; }

@media screen and (max-width: 640px) { 
header .navbar-default .navbar-toggle:hover, header .navbar-default .navbar-toggle:focus { background: none; }
header .navbar-default ul.navbar-nav li a { color: #ffffff; border-bottom: 1px dotted #464646; }
header .navbar-default ul.navbar-nav li a.getApp { color: #ffffff; }
header .navbar-default ul.navbar-nav li a:after { display: none; }
header .navbar-default ul.navbar-nav li a:hover { color: #50cb86; }
header .navbar-default .navbar-collapse { background: #000; }
header .navbar-default.scrolled { padding-top:5px; background: #111111; }
header .navbar-default.scrolled ul.navbar-nav li a { color: #ffffff; }
header .navbar-default.scrolled ul.navbar-nav li a:hover { color: #50cb86; }
header .navbar-default.scrolled .navbar-brand img { -webkit-filter: invert(1); filter: invert(0); }
header .navbar-default.scrolled .navbar-brand img { width: auto; max-height: 60px; }
}
.pre-loader { background: #336799; }


.box-content { margin: 20px 0px; padding: 20px;  text-align: center; display: grid; background-color: #fafafa; border-radius: 20px; border: 2px solid #dedede;  }
.content1 {  }
.content1 h3 { color: #000;  }
.content2 { padding: 0px 20px; }
.content3 { padding: 10px 0px; border-radius: 0 0 20px 20px; position: relative; }
.content3 h3 { color: #e85046; }