html, body{padding:0; margin:0; border:0; outline:0; background-color:#FAFAFA; font-size:1em; font-family:Montserrat, Roboto, Arial;}
body{font-size:100%; vertical-align:baseline; color:#414e5a; max-width:100%; overflow-x:hidden; font-family:'Roboto', sans-serif;}
div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {font-size:100%; vertical-align:baseline; border:0; outline:0; background:transparent; margin:0; padding:0}
ol,ul {list-style:none}
blockquote,q {quotes:none}
a {color:#2872b1; text-decoration:none}
a:hover {color:#0b4f8a; text-decoration:none; text-shadow:1px 1px 1px #DDD;}
quote{color:#777;}
u{text-decoration:none; border-bottom:1px dotted #E5E5E5;}
hr{height:0; border:0 none; border-top:1px solid #E5E5E5;}
p{font-size:1em; line-height:1.4em; margin-bottom:20px;}
img{max-width:100%;}

.cf{clear:both}
.cf:after {clear:both; content:" "; display:block; font-size:0; height:0; visibility:hidden}

.fl{float:left;}
.fr{float:right;}
.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}

.bold{font-weight:bold;}

h1, h2, h3, h4, h5{font-weight:normal; margin:0; padding:0;}
h1{font-size:2em; line-height:1.5em;}
h2{font-size:1.5em; line-height:1.6em;}
h3{font-size:1.3em; line-height:1.6em;}

.fs19{font-size:19px;}
.fs21{font-size:21px;}

.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mr20{margin-right:20px;}
.mtb20{margin:20px 0;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt50{margin-top:50px;}
.mt70{margin-top:70px;}
.ptb30{padding:30px 0;}
.pl100{padding-left:100px;}
.m0auto{margin:0 auto;}

.w30{width:30%;}
.w40{width:40%;}
.w50{width:50%;}
.w60{width:60%;}
.w70{width:70%;}
.w80{width:80%;}

.dib{display:inline-block;}
.vat{vertical-align:top;}

.wrapper{max-width:1000px; width:100%; margin:0 auto; overflow-x:hidden;}
.wrapperin{padding:20px;}
@media only screen and (max-width:600px){
	.w80{max-width:95%; width:95%;}
}
@media only screen and (max-width:999px){
    .wrapper{max-width:100%;}
}

/* ------------------------------------------------------------------------------------------------------------------- */
/* General */
/* ------------------------------------------------------------------------------------------------------------------- */
.header_topbar{background: #f6f6f8; padding: 15px 0px;}
.top-bar .header_top_left{padding: 0 0;}
.header_socil{margin: 0 0 0 10px; float: right;}
.header_socil li{padding-left: 1px; padding-right: 1px;}
.header_socil li{font-size: 12px; margin: 0; position: relative; display: inline-block; text-align: center;}
.header_socil li .fa{color: #333333; font-size: 14px; margin-left: 8px;}
.header_socil li .fa:hover{color: #f6941a;}
.header_top_left{padding-left: 2px; float: left;}
.header_top_right{float: left; width: 86%; display: block; overflow: hidden;}
.header_topbar ul{margin-bottom: 0; margin-top: 0px; text-align: left; margin-left: 40px;}
.header_top_right ul{margin-left: 17px;}
.header_top_right li{display: inline; padding-right: 20px; color: #333; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 13px;}
.header_top_right li i{margin-right: 10px; color: #f6941a; font-size: 15px; position: relative; top: 1px;}
 /*----- End : Top bar -----*/ 
 .header_btn a{margin-left: -5px; margin-top: 25px; color: #fff;}
.header_btn .more-link::before{background: #333;}
.navigation .logo{margin:0 auto 20px auto; position: relative; height: 73px;}
.navigation .logo img{max-width: 100%; width:100%; height:auto;}
.logo img{max-width: inherit;}
.navigation .logo::before{background: transparent !important;}
.navigation .logo::before{position: absolute; top: 0px; width: 243%; content: ""; height: 100%; left: -240%;}
.navigation .logo::after{background: transparent !important;}
.navigation .logo::after{width: 121px; height: 73px; position: absolute; right: -121px; top: 0px; content: "";}
.logo{background: transparent !important; width: 189px;}
/*-----Navigationn-----*/ 
.navigation{background-color: #fff; z-index: 9999; position: relative; border-top: 1px solid #fbf3f3; }
#navigation{float: left; margin-left: -18px !important;}
#navigation, #navigation ul, #navigation ul li, #navigation ul li a, #navigation #menu-button{margin: 0; padding: 0; border: 0; list-style: none; line-height: 14px; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#navigation:after, #navigation > ul:after{content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
#navigation #menu-button{display: none;}
#navigation > ul > li{float: left; margin-right: 5px;}
#navigation li:hover > ul{padding-top: 20px; padding-bottom: 20px; background: #fff;}
#navigation.align-center > ul{font-size: 0; text-align: center;}
#navigation.align-center > ul > li{display: inline-block; float: none;}
#navigation.align-center ul ul{text-align: left;}
#navigation.align-right > ul > li{float: right;}
#navigation > ul > li > a{padding: 42px 0px 42px 32px; font-size: 15px; letter-spacing:.3px; text-decoration: none; color: #222; margin-right: -1px; font-weight:bold;}
#navigation > ul > li.has-sub > a{padding: 42px 0px 42px 32px;}
#navigation > ul > li.has-sub > a::before{position: absolute; right: 18px; font-family: FontAwesome; content: "\f107"; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease;}
#navigation > ul > li.has-sub > a::before{position: absolute; right: 14px; font-family: FontAwesome; content: "\f107"; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; display: none;}
#navigation ul ul li.has-sub > a::before{position: absolute; top: 20px; right: 14px; display: block; width: 2px; height: 8px; background: #f6941a; content: ''; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease;}
#navigation ul ul li.has-sub > a::after{position: absolute; top: 23px; right: 11px; width: 8px; height: 2px; display: block; background: #f6941a; content: '';}
#navigation ul ul > li.has-sub:hover > a::before{top: 17px; height: 0;}
#navigation > ul > li > .active{color: #f6941a;}
#navigation > ul > li:hover > a{color: #f6941a !important;}
#navigation ul ul{position: absolute; left: -9999px;}
#navigation.align-right ul ul{text-align: right;}
#navigation ul ul li{height: 0; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease;}
#navigation li:hover > ul{left: auto;}
#navigation.align-right li:hover > ul{left: auto; right: 0;}
#navigation li:hover > ul > li{height: 40px;}
#navigation ul ul ul{margin-left: 100%; top: 0;}
#navigation.align-right ul ul ul{margin-left: 0; margin-right: 100%;}
#navigation ul ul li a{border-bottom: 1px solid #f6941a; padding: 14px 10px 14px 20px; width: 220px; font-size: 15px; text-decoration: none; color: #333; font-weight: 500; background: #fff; text-transform: uppercase; margin-left: 20px; border-left: 1px solid #f1f1f1; line-height: 13px;}
#navigation ul ul li:last-child > a, #navigation ul ul li.last-item > a{border-bottom: 0;}
#navigation ul ul li:hover > a, #navigation ul ul li a:hover{color: #f6941a; border-left: 1px solid #f6941a;}
#navigation.small-screen{width: 100%;}
#navigation.small-screen ul{width: 100%; display: none;}
#navigation.small-screen.align-center > ul{text-align: left;}
#navigation.small-screen ul > li{width: 100%; border-top: 1px solid rgba(120, 120, 120, 0.2);}
#navigation.small-screen ul ul li, #navigation.small-screen li:hover > ul > li{height: auto;}
#navigation.small-screen ul li a, #navigation.small-screen ul ul li a{width: 100%; border-bottom: 0;}
#navigation.small-screen > ul > li{float: none;}
#navigation.small-screen ul ul li a{padding-left: 15px;}
#navigation.small-screen ul ul ul li a{padding-left: 35px;}
#navigation.small-screen ul ul li a{color: #333; background: none;}
#navigation.small-screen ul ul li:hover > a, #navigation.small-screen ul ul li.active > a{color: #f6941a;}
#navigation.small-screen ul ul, #navigation.small-screen ul ul ul, #navigation.small-screen.align-right ul ul{position: relative; left: 0; width: 100%; margin: 0; text-align: left;}
#navigation.small-screen > ul > li.has-sub > a:after, #navigation.small-screen > ul > li.has-sub > a:before, #navigation.small-screen ul ul > li.has-sub > a:after, #navigation.small-screen ul ul > li.has-sub > a:before{display: none;}
#navigation.small-screen #menu-button{display: block; padding: 17px; color: #171818; cursor: pointer; font-size: 12px; text-transform: uppercase; font-weight: 700;}
#navigation.small-screen #menu-button:after{position: absolute; top: 22px; right: 2px; display: block; height: 8px; width: 20px; border-top: 2px solid #333; border-bottom: 2px solid #333; content: '';}
#navigation.small-screen #menu-button:before{position: absolute; top: 16px; right: 2px; display: block; height: 2px; width: 20px; background: #333; content: '';}
#navigation.small-screen #menu-button.menu-opened:after{top: 23px; border: 0; height: 2px; width: 15px; background: #333; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
#navigation.small-screen #menu-button.menu-opened:before{top: 23px; background: #333; width: 15px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
#navigation.small-screen .submenu-button{position: absolute; z-index: 99; right: 0; top: 0; display: block; border-left: 1px solid rgba(120, 120, 120, 0.2); height: 48px; width: 46px; cursor: pointer;}
#navigation.small-screen .submenu-button.submenu-opened{background: #fff;}
#navigation.small-screen ul ul .submenu-button{height: 35px; width: 35px; top: 8px;}
#navigation.small-screen .submenu-button:after{position: absolute; top: 22px; right: 19px; width: 8px; height: 2px; display: block; background: #333; content: '';}
#navigation.small-screen ul ul .submenu-button:after{top: 15px; right: 13px;}
#navigation.small-screen .submenu-button.submenu-opened:after{background: #333;}
#navigation.small-screen .submenu-button:before{position: absolute; top: 19px; right: 22px; display: block; width: 2px; height: 8px; background: #333; content: '';}
#navigation.small-screen ul ul .submenu-button:before{top: 12px; right: 16px;}
#navigation.small-screen .submenu-button.submenu-opened:before{display: none;}
#navigation.small-screen.select-list{padding: 5px;}

@media only screen and (max-width:600px){
	#navigation > ul {margin-top:40px;}
	#navigation > ul > li > a {padding: 12px 0px 12px 12px;}
}

/* ------------------------------------------------------------------------------------------------------------------- */
/* General */
/* ------------------------------------------------------------------------------------------------------------------- */
.highlight{padding-bottom:10px; margin-bottom:20px;}
.highlight:after{
	content: '';
	display: block;
	margin: 16px auto 0 auto;
	width: 80px;
	height: 4px;
	background: #FF4A25;
	border-radius: 2px;
}
section{min-height:200px;}

@media only screen and (max-width:600px){
	.fl, .fr{margin-top:30px; float:none; width:90%; max-width:95%; margin-right:auto;  margin-left:auto;}
}

/* ------------------------------------------------------------------------------------------------------------------- */
/* Hero */
/* ------------------------------------------------------------------------------------------------------------------- */
#hero{
	background-image:url("img/Mix_Bokeh_Purple_Orange.png");
	/* background-image:url("img/hero-bg-1.png"); */
	background-size: 100% auto;
	background-repeat:no-repeat;
	padding:100px 0 50px 0;
	max-width:1234px;
}
#hero_cta_emoji{text-shadow:0 1px 1px #FFF; margin-left:10px;}
#hero_cta{
	font-size:1.2em;
	background-color: orange; 
	color: white; 
	border: none;
	border-radius: 10px;
	padding: 12px 24px;
	cursor: pointer;
}

#hero_left{width:50%; float:left; margin-top:70px;}
#hero_right{width:50%; float:right;}

@media only screen and (max-width:600px){
	.wrapper{padding:10px;}
    #hero_left, #hero_right{width:95%; max-width:95%; display:block; margin-top:30px; float:none;}
	
	#hero, #subhero, #tarif_vo_talent, #tarif_vo_project, #post_production, #sewa_studio, #sound_design, #music_production, {padding:30px 0;}
}

/* ------------------------------------------------------------------------------------------------------------------- */
/* Subhero */
/* ------------------------------------------------------------------------------------------------------------------- */
#subhero{
	background-image:url("img/subhero-bg-2.png");
	background-size: 100% auto;
	background-repeat:no-repeat;
	padding:50px 0;
	max-width: 1234px;
}
.container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 16px;
}
.card {
	background: #fff;
	border: 2px solid #fbddb5;
	border-radius: 14px;
	box-shadow: 0 4px 12px rgba(255, 213, 158, 0.13);
	padding: 32px 14px 24px 14px;
	width: 320px;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: box-shadow 0.2s;
	background: rgba(255, 255, 255, 0.65);
}
.card:hover {
	border: 2px solid #ffd59e;
	box-shadow: 0 4px 22px rgba(255, 213, 158, 0.85);
}
.card img{
	max-width:70px;
}

@media only screen and (max-width:600px){
	.container{display:block; width:90%; padding:20px; max-width:99%; text-align:center;}
	.card{display:block; width:93%;}
}

.icon {
	font-size: 40px;
	margin-bottom: 18px;
}
.card-title {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 10px;
  color: #222;
}
.card-desc {
  color: #111;
  font-size: 16px;
  line-height: 1.3;
  text-align:center;
}
.description {
  margin: 40px auto 0 auto;
  width: 90%;
  font-size: 18px;
  color: #533106;
}

/* ------------------------------------------------------------------------------------------------------------------- */
/* Tarif VO Project */
/* ------------------------------------------------------------------------------------------------------------------- */
#tarif_vo_project{
	background-image:url("img/tarif-project-vo-bg-1.png");
	background-size: 100% auto;
	background-repeat:no-repeat;
	padding:100px 0 50px 0;
}

/* ------------------------------------------------------------------------------------------------------------------- */
/* Post Pro */
/* ------------------------------------------------------------------------------------------------------------------- */
#post_production{
	
}

/* ------------------------------------------------------------------------------------------------------------------- */
/* Sewa Studio */
/* ------------------------------------------------------------------------------------------------------------------- */
#sewa_studio{
	padding:0 0 50px 0;
}

/* ------------------------------------------------------------------------------------------------------------------- */
/* Sewa Studio */
/* ------------------------------------------------------------------------------------------------------------------- */
#sound_design{
	padding:0 0 50px 0;
}

/* ------------------------------------------------------------------------------------------------------------------- */
/* Music Production */
/* ------------------------------------------------------------------------------------------------------------------- */
#music_production{
	
}

/* ------------------------------------------------------------------------------------------------------------------- */
/* Conclusion */
/* ------------------------------------------------------------------------------------------------------------------- */
#conclusion_top{
	padding:30px 0 10px 0;
}

#conclusion_bottom{
	background-image:url("img/kenapa-memilih-inavoice.png");
	background-size: 100% auto;
	background-repeat:no-repeat;
	padding:20px 0 50px 0;
}

.subtitle {
  font-size: 18px;
  color: #333;
  text-align: center;
  margin-bottom: 30px;
  margin-top: 0;
  font-weight: 400;
}
.content-main {
  font-size: 16px;
  color: #222;
  line-height: 1.6;
  margin-bottom: 16px;
}

.content-main p{margin:0; padding:0;}


.content-main strong {
  font-weight: 700;
}

.content-section{padding-left:360px;}
.content-section ul {
  margin-top: 12px;
  padding-left: 20px;
  font-size: 16px;
  color: #333;
  margin-bottom: 32px;
}
.content-section ul li {
  margin-bottom: 5px;
  list-style: disc;
}

/* ------------------------------------------------------------------------------------------------------------------- */
/* Client */
/* ------------------------------------------------------------------------------------------------------------------- */
#client{
	padding:20px 0;
}

/* ------------------------------------------------------------------------------------------------------------------- */
/* Conclusion Bottom */
/* ------------------------------------------------------------------------------------------------------------------- */
#conclusion_bottom{max-width: 1234px;}
@media only screen and (max-width:600px){

	.content-section{padding:0;}
	.content-section ul, .content-section li{text-align:left;}
}

@media only screen and (max-width:600px){
	#summ_bottom{padding-top:100px;}
}

/* ------------------------------------------------------------------------------------------------------------------- */
/* CTA */
/* ------------------------------------------------------------------------------------------------------------------- */
#cta{
	background-image:url("img/cta-bg.png");
	background-size: 100% auto;
	background-repeat:no-repeat;
	padding:100px 0 50px 0;
}

#bottom_cta_emoji{text-shadow:0 1px 1px #FFF; margin-left:10px;}
#bottom_cta, #bottom_cta a{
	font-size:1.2em;
	background-color: orange; 
	color: white; 
	border: none;
	border-radius: 10px;
	padding: 12px 24px;
	cursor: pointer;
}

.cta-btn a{color:#FFF;}
.cta-btn{text-align:center;}

 /* ----------------------- */ 
/* Footer Section */ 
/* -------------------------*/ 
.footer-section{float: left; width: 100%; padding: 78px 0 0 0; color: #fff; background: #1f2022;}
.footer-section .container{position: relative;}
.footer-section .widget{padding-bottom: 0px; margin-bottom: 17px;}
.footer-section .widget h5{color: #fffcf4; text-transform: capitalize; letter-spacing: 0px; font-size: 22px; margin-bottom: 32px;}
.footer-section .widget h3{color: #fff; font-weight: 900; letter-spacing: 3px; margin-bottom: 25px;}
.footer-section .widget p{color: #acaba9; margin-top: 15px; float: left; margin-bottom: 16px;}
.footer-section .widget img{margin-top: 3px;}
.footer_soc{/*! margin-top: -2px; */ 
margin-bottom: 15px;}
.footer_socil{overflow: hidden; width: 100%;}
.footer_socil .list-icons{padding-left: 0; list-style: none;}
.footer_socil .list-icons li{float: left; margin-bottom: 30px; margin-right: 6px;}
.footer_socil .list-icons li a{color: #acaba9; font-size: 18px; padding-right: 7px;}
.footer_socil .list-icons li a:hover{color: #f6941a; text-decoration: underline;}
.quick_lnk ul li{list-style: none; padding-bottom: 12px; padding-left: 20px;}
.quick_lnk ul li::after{position: absolute; content: ">"; left: 0; margin-left: 16px; width: 12px; height: 1px; margin-top: -1px;}
.quick_lnk ul li a{color: #acaba9;}
footer .quick_lnk li a:hover{color: #f6941a; text-decoration: underline;}
.recent-gallery{width: 100%;}
.recent-gallery li{width: 27.6%; float: left; margin-right: 10px; margin-bottom: 7px;}
.footer-section .recent-gallery img{width: 100%;}
.footer-section  #email_field{background: #32373e; box-shadow: none; border: none; color: #ddd; line-height: 40px; padding-left: 30px; width: 100%; margin-top: 5px;}
.news_letter_wrp p{margin-top: -2px !important;}
.footer-social-links ul{margin-left: -39px;}
.footer-social-links ul li{display: inline-block; position: relative; margin: 10px 5px 0; line-height: 1em; vertical-align: top;}
.footer-social-links ul li a{display: inline-block; text-align: center; width: 46px; height: 46px; line-height: 46px; font-size: 21px; border: 1px solid #bababa; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; color: #bababa; position: relative; overflow: hidden; z-index: 1;}
.subfooter{width: 100%; text-align: center; padding: 35px 0px; color: #bababa; margin-top: 25px; background: #1b1c1d; position: relative;}
.subfooter p{color: #acaba9; /*! float: left; */ 
font-size: 14px; margin: 0px;}
.subfooter p a{color: #acaba9;}
.scrollup{color: #f6941a; position: absolute; right: 0px; bottom: 0px; margin-right: 15px; margin-bottom: -43px; z-index: 99;}
.scrollup span{font-size: 15px; background: transparent; padding: 9px 10px; border: 2px solid #f6941a; border-radius: 50%; color: #f6941a;}
.scrollup span:hover{background: #f6941a; color: #f6941a;}
.scrollup:hover, .scrollup:active, .scrollup:focus{color: rgba(255, 255, 255, 0.90);}

.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;min-height:1px;padding-right:15px;padding-left:15px}
.col{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}
.col-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}