@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');

body{
	padding:0;
	background: #F1F1F1;
}
.lato{
	font-family: 'Lato', sans-serif;
}
.header{
	background: none;
	box-shadow: none;
	transition: .3s ease;
}
.header .navbar-brand img{
	display: none;
	transition: .3s ease;
}
.header .navbar-brand img.inverse{
	display: block;
}
.header .navbar-nav > li > a{
	color:#fff;
	background:none!important;
}
.header .navbar-nav > li.active > a, .header .navbar-nav > li.current-menu-item > a{
	background:none!important;
	border-bottom-color:#fff!important;
}
.header.float .navbar-nav > li.active > a, .header.float .navbar-nav > li.current-menu-item > a{
	color:#FF7275!important;
	border-bottom-color: #FF7275!important;
}
.header .navbar-nav > li > a:hover{
	color:#fff;
	border-bottom-color: #fff;
}
.header.float{
	background: #fff;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
}
.header.float .navbar-nav > li > a{
	color:#3C484D;
}
.header.float .navbar-nav > li > a:hover{
	color:#FF7275;
	border-bottom-color: #FF7275;
}
.header.float .navbar-brand img{
	display: block;
}
.header.float .navbar-brand img.inverse{
	display: none;
}
#alur-video{
	background: none;
}
div.wpcf7-response-output{
	display: none!important;
}
#slider .caption{
	position: absolute;
	top:0;
	left:0;
	right:0;
	padding-top: 150px;
	color:#fff;
	font-size: 12px;
}
#slider .caption .media{
	margin:0 0 15px;
}
#slider .caption .media-left{
	padding-right: 30px;
}
#slider .caption .media-body .user{
	text-align: right;
	margin:15px 0 0;
}
.heading-border{
	font-size: 30px;
	position: relative;
	margin:0 0 30px;
	padding-bottom: 30px;
	text-align: center;
}
.heading-border:before{
	content: "";
	width: 150px;
	height: 5px;
	border-radius: 50px;
	background: #A4DAF5;
	position: absolute;
	bottom:0px;
	left:50%;
	transform: translateX(-50%);
}
.heading-border:after{
	content: "";
	width: 80px;
	height: 7px;
	border-radius: 50px;
	background: #0991FA;
	position: absolute;
	bottom:-2px;
	left:50%;
	transform: translateX(-50%);
}
#alur-video .videobox{
	background: #fff;
	padding:15px;
	border-radius: 10px;
	box-shadow: 0px 10px 50px -20px rgba(0,0,0,0.5);
}
#alur-video .videobox iframe{
	border-radius: 10px;
	overflow:hidden;
}
.home-hero{
	background: #3FBFB7;
	padding: 160px 0 200px;
	font-size:12px;
	color:#fff;
	position: relative;
	overflow: hidden;
}
.home-hero .bg-2{
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	object-fit: cover;
	z-index: 11;
}
.home-hero .bg-1{
	position: absolute;
	bottom:-1px;
	left:0;
	width: 100%;
	object-fit: cover;
	z-index: 11;
}
.home-hero .caption{
	position: relative;
	z-index: 10;
}
.cloud{
	z-index: 0;
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	overflow: hidden;
}
.cloud-1{
	position: absolute;
	top:100px;
	left:0;	
	animation:cloudFirst 20s linear infinite;
}
.cloud-2{
	position: absolute;
	top:350px;
	left:0;	
	animation:cloudFirst 30s linear infinite;
}
@keyframes cloudFirst{
	0%{
		transform: translateX(110vw);
	}
	100%{
		transform: translateX(-10vw);	
	}
}
.section-gray{
	background: #F1F1F1;
	padding:50px 0;
	color:#414342;
	font-weight: 300;
}
.section-animasi-custom{
	position: relative;
	z-index: 10;
}
.section-animasi-custom h2{
	font-style: italic;
	font-weight: 800;
	font-size: 40px;
}
.section-animasi-custom .row-star{
	margin:0 0 30px;
}
.section-animasi-custom .row-star h5{
	font-weight: bold;
	margin:0 0 10px;
	font-style: italic;
	font-size: 18px;
}
.section-animasi-custom .row-star h3{
	margin:0;
	font-style: italic;
	font-size: 16px;
	font-weight: bold;
}
.section-benefit{
	padding:80px 0;
	position: relative;
	z-index:10;
}
.section-benefit .bg{
	position: absolute;
	top:-50%;
	left:0;
	width: 200px;
}
.section-benefit h2{
	font-style: italic;
	font-weight: 800;
	width: 450px;
	max-width: 100%;
	margin:0 auto;
	font-size: 40px;
}
.row-benefit .thumbnail{
	margin:0 0 30px;
}
.row-benefit h4{
	font-style: italic;
	font-weight: bold;
	font-size: 14px;
	margin:0 0 30px;
}
.row-benefit i.fa-check{
	color:#60B743;
	font-size:20px;
}
.section-prestasi{
	position: relative;
	margin-top:-50px;
	background: none;
}
.section-prestasi .bg{
	position: absolute;
	bottom:-150px;
	right:0;
	width: 300px;
}
.section-prestasi h2{
	font-style: italic;
	font-weight: 800;
	font-size: 40px;
	margin:150px 0 150px;
	text-align: center;
}
.section-prestasi .deo{
	position: absolute;
	top:0;
	right:0;
}
.section-prestasi .photo{
	border:10px solid #fff;
	margin-top: 250px;
	z-index: 10;
	position: relative;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
}
.section-prestasi .photo img{
	width: 100%;
}
.section-portfolio h2{
	font-style: italic;
	font-weight: 800;
	font-size: 40px;
	margin:0 0 50px;
}
.section-portfolio .thumbnail{
	margin:0 0 30px;
	height: 300px;
	position: relative;
	background: #fff;
	overflow:hidden;
}
.section-portfolio .thumbnail img{
	width: 100%!important;
	height: 100%!important;
	object-fit: cover!important;
	object-position: center!important;
}
.section-portfolio .thumbnail .fa-play{
	position: absolute;
	top:50%;
	left:50%;
	width:50px;
	height:50px;
	line-height: 50px;
	text-align:center;
	background:#fff;
	color:#333;
	border-radius:50%;
	transform: translate(-50%,-50%);
	box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
}
.section-portfolio .thumbnail .caption{
	position: absolute;
	top:0;bottom: 0;left:0;right:0;
	padding:15px;
	background: rgba(0,0,0,0.8);
	visibility: hidden;
	opacity: 0;
	transition: all 300ms ease-in;
	-webkit-transition: all 300ms ease-in;
	color:#fff;
	font-size:11px;
}
.section-portfolio .thumbnail:hover .caption{
	visibility: visible;
	opacity: 1;
}
.section-testimoni h2{
	font-style: italic;
	font-weight: 800;
	font-size: 40px;
	margin:0 0 50px;
}
.section-testimoni .slick-arrow{
	width: 30px;
	height: 30px;
	line-height: 30px;
	position: absolute;
	top:50%;
	left:-100px;
	background: #F26D6E;
	color:#fff;
	text-align: center;
	border-radius: 50%;
	border:none;
	outline: none;
	transform: translateY(-50%);
}
.section-testimoni .slick-arrow.slick-next{
	left: auto;
	right:-100px;
}
.section-testimoni .banner a{
	display: inline-block;
	margin:0 15px;
}
.section-cta{
	background: #3EBEB7;
	color:#fff;
	position: relative;
	margin-top:200px;
	padding:0px 0 200px;
	text-align: center;
	z-index: -1;
}
.section-cta .bg{
	position: absolute;
	top:-200px;
	left:0;
	width: 100%;
	object-fit: cover;
}
.section-cta h2{
	font-style: italic;
	font-weight: 800;
	font-size: 40px;
	margin:0 0 50px;
}
.section-lebaran{
	background: url("https://www.animasistudio.com/landingpage/assets/images/bg-lebaran.png") repeat center;
}
.promo-lebaran {
	padding: 60px 0;
}
.promo-lebaran h4 {
	line-height: 1.4em;
}
@media (max-width: 768px){
	body{
		padding-top: 50px
	}
	.promo-lebaran {
		padding: 20px 0 0;
		text-align: center !important;
	}
	.btn-lebaran h4{
		font-size: 16px !important;
	}
	.header{
		background: #fff!important;
		box-shadow: 0px 1px 3px rgba(0,0,0,0.1)!important;
	}
	.header .navbar-brand img{
		display: block!important;
	}
	.header .navbar-brand img.inverse{
		display: none!important;
	}
	.header .navbar-nav > li > a{
		color:#3C484D!important;
	}
	.header .navbar-nav > li > a:hover{
		color:#FF7275!important;
		border-bottom-color: #FF7275!important;
	}
	#slider .caption{
		position: relative;
		top:auto;
		left:auto;
		padding:30px;
		background: #3FBFB7;
	}
	#slider .caption .media .media-left img{
		width: 50px;
	}
	#slider .caption .media .media-body{
		font-size: 14px;
	}
	#slider .caption .btn{
		margin:0 0 10px;
	}
	#slider .thumbnail{
		position: relative;
		margin:-5px 0 0;
	}
	#alur-video .col-sm-6{
		margin:0 0 30px;
	}
	#pesan-produk{
		padding:30px 80px 0!important;
	}
	#pesan-produk .media,
	#pesan-produk .media-left,
	#pesan-produk .media-body{
		display: block;
		width: auto;
		text-align: center;
	}
	#pesan-produk .media{
		margin:0 0 30px;
	}
	#pesan-produk .bg{
		position: relative!important;
		width:50vw!important;
		bottom:-20%!important;
		right: -40%!important;
		float: right!important;

	}
	.row-portfolio{
		padding:30px;
	}
	.row-portfolio > div{
		margin:0 0 30px;
	}
	#kontak .thumbnail img{
		width: 100%!important;
	}
	#kontak .btn-premium{
		margin:0 0 10px;
	}
	#kontak .btn{
		display: block;
		margin:0 0 15px;
	}
	.cloud{
		display: none;
	}
	.home-hero{
		padding:30px 0;
	}
	.home-hero .deo{
		margin-top: 30px;
	}
	.row-star .col-sm-3{
		text-align: left;
		margin:0 0 15px;
	}
	.home-hero .caption{
		padding:30px;
	}
	.home-hero .caption .media,
	.home-hero .caption .media-left,
	.home-hero .caption .media-body,
	.home-hero .caption .text-right
	{
		display: block;
		text-align: center;
		width:auto;
	}
	.home-hero .caption .media-left{
		margin:0 0 15px;
	}
	.home-hero .deo{
		margin:30px 0 -60px
	}
	.section-animasi-custom h2{
		font-size:25px;
		text-align: center;
		margin:0 0 50px;
	}
	.section-animasi-custom{
		text-align: center
	}
	.row-star .col-sm-3{
		text-align: center
	}
	.row-star .col-sm-3 img{
		width:30px;
		height:auto;
	}
	.section-animasi-custom .row-star h5{
		font-size:25px;
	}
	.section-animasi-custom .row-star{
		margin:0 0 50px;
	}
	.section-animasi-custom .thumbnail-deo{
		margin:50px 0 0;
		position: relative;
		z-index: 10;
	}
	.section-animasi-custom .thumbnail-deo img{
		width:200px;
		height: auto;
	}
	.section-animasi-custom .text-right{
		text-align: center;
	}
	.section-benefit{
		padding:30px;
	}
	.section-benefit h2{
		font-size:25px;
		line-height: 150%;
	}
	.section-benefit .row-benefit > div{
		margin:0 0 30px;
	}
	.section-benefit .row-benefit > div:last-child{
		margin:0;
	}
	.section-prestasi{
		padding:30px;
		margin:0;
	}
	.section-prestasi h2{
		font-size:25px;
		margin:0 0 30px;
	}
	.section-prestasi .deo{
		display: none;
	}
	.section-prestasi .photo{
		margin:30px 0 0;
	}
	.section-portfolio{
		padding:30px;
	}
	.section-portfolio h2{
		font-size:25px;
		text-align: center;
		margin:0 0 30px;
	}
	.section-testimoni{
		padding:30px;
	}
	.section-testimoni h2{
		font-size:25px;
	}
	.testimoni-slider .media,
	.testimoni-slider .media-left,
	.testimoni-slider .media-body{
		display: block;
		text-align: center!important;
		width: auto;
	}
	.testimoni-slider .item .media-left img{
		width:100px;
		height:100px;
		margin:0 auto 15px;
		background:#fff;
	}
	.testimoni-slider .item .media-body .text-right{
		text-align: center
	}
	.section-testimoni .banner{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin:15px -30px 0;
	}
	.section-testimoni .banner a img{
		height:45px!important;
		width:auto!important;
		margin:0 0 15px;
	}
	.section-cta .bg{
		top:-100px;
	}
	.section-cta h2{
		font-size:20px;
		font-style:normal;
		font-weight:200;
		text-transform: uppercase;
	}
	.section-cta{
		padding:0px 0 100px;
	}
	.section-hero-testimonial .media,
	.section-hero-testimonial .media-left,
	.section-hero-testimonial .media-body{
		display:block;
		width:auto;
		text-align: center;
	}
	.section-hero-testimonial .media-left{
		margin:0 0 15px;
	}
	.section-home-animasi-custom .row-feature .item p{
		display: none;
	}
	.section-home-animasi-custom .row-feature .item{
		padding:30px!important;
	}
	.section-lg h2,
	.section-portfolio h2{
		font-size:24px!important;
		font-weight:bold!important;
	}
	.row-benefit .media,
	.row-benefit .media-left,
	.row-benefit .media-body{
		display:block;
		width:auto;
		text-align: center;
	}
	.row-benefit .media-left{
		margin:0 0 15px;
	}
	.row-benefit .media-body .media-left{
		margin:0;
	}
	.row-benefit h3{
		font-size:18px!important;
		margin:0 0 5px!important;
		height:auto!important;
	}
	.section-home-benefit,
	.section-home-animasi-custom,
	.section-home-prestasi,
	.section-portfolio{
		background:#fff!important;
	}
	.section-home-prestasi,
	.section-home-benefit{
		padding:0;
	}
	.section-home-prestasi .box{
		box-shadow:none!important;
		padding:30px!important;
	}

}