/*------------------------------------------*/
/*	       /*  01.Full wirth Video */
/*------------------------------------------*/


.typist-blink::after {
animation: 1s step-start 0s normal none infinite running blink;
 content: " ";
display: inline-block;
height: 62px;
margin-left: 3px;
margin-right: 7px;
position: relative;
top: 10px;
 color:#ffa211;
}
.typist-blink > .selectedText {
	display: none;
}
.typist-mark > .selectedText {
	background-color: #222;
	color: #f99800;
	font-style: normal;
}
.video-banner {
	overflow: hidden;
}
.video-banner .video-wrap {
	height: auto;
	left: 50%;
	min-height: 100%;
	min-width: 100%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	z-index: 1;
}
.video-banner .video-overlay {
	backface-visibility: hidden;
	background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 5;
}
@media (max-width: 480px) {
.video-banner h1
} {
}
.relative, .video-banner {
	position: relative;
}
.content-v {
	left: 0;
	margin: 0 auto;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width:100%;
	z-index: 2;
}
@media (max-width: 767px) {
.content-v
} {
}

/*------------------------------------------*/
/*	       /* 2.Demo Heading */
/*------------------------------------------*/

.main-area {
	background: rgba(0, 0, 0, 0) linear-gradient(to left, #ff4200, #ffa211) repeat scroll 0 0;
}
.main-area h1 {
	color: #ffffff;
	text-align: center;
	font-size: 25px;
	text-transform: uppercase;
	padding: 5px;
}
.main-area-div {
	margin-top: 40px;
	margin-bottom: 40px;
}
.main-para {
	text-align: center;
	font-size: 40px;
	color: #fff;
	font-weight: 300;
	font-family: 'Raleway', sans-serif;
	text-transform: uppercase;
	margin-top: 45px;
}
.para-tex {
	font-size: 20px;
	line-height: 30px;
	color: #c1c1c1;
}

.main-para-i {
	text-align: center;
	font-size: 50px;
	color: #fff;
	font-weight: 200;
	line-height: 60px;
	padding-top: 25px
}
.main-para-bold {
	text-align: center;
	font-size: 40px;
	color: #fff;
	font-weight: 200;
	line-height: 50px;
}
.clients-name {
	font-size: 23px;
	color: #c9c9c9;
}
.list-demos {
	font-size: 16px;
	color: #fefefe;
	padding: 10px;
	font-family: 'Raleway', sans-serif;
	text-transform: uppercase;
	margin-top: -10px;
	letter-spacing:2px;
}
.demo-head {
	padding: 0px;
	margin-top: 0px;
}
/*------------------------------------------*/
/*	       /*3.Banner text*/
/*------------------------------------------*/

.low-back-gradient-inner {
	position: relative;
}
.top-heading-inner {
	color: #fff;
	font-size: 40px;
	font-weight: 600;
	text-transform: uppercase;
}
.low-back-gradient-inner:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000 none repeat scroll 0 0;
	opacity: 0.75
}
.bg-footer {
	background: url(../img/footer-bg.jpg) no-repeat scroll center center / cover;
	background-size: cover;
}
.video {
	position: absolute;
	top: 0;
	left: 50%;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	-webkit-transform: translate(-50%, 0);
	-o-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	z-index: -999;
	padding: 0px;
	margin: 0px;
}
.text-con-video {
	color: #fff;
	padding: 100px 0 100px 0;
}
.mobile {
	padding: 35px 0 0 0;
}
.text-con-i {
	color: #fff;
	padding: 160px 0 0 0;
}
.text-con-rain {
	color: #000;
	padding: 190px 0 0 0;
}
.lead-rain h1 {
	color: #000;
	font-size: 30px;
	line-height: normal;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	line-height: normal;
	margin-top: 100px;
	text-transform: uppercase;
}
.lead-rain {
	font-size: inherit;
	font-size: 16px;
	font-weight: normal;
	line-height: normal;
	margin-bottom: 70px;
}
.top-heading-rain {
	color: #000;
	font-size: 70px;
	font-weight: 100;
	text-transform: uppercase;
}
.text-con-err {
	color: #fff;
	padding: 190px 0 250px 0;
}
.lead {
	font-size: inherit;
	font-size: 16px;
	font-weight: normal;
	line-height: normal;
	margin-bottom: 50px;
}
.lead h1 {
	color: #fff;
	font-size: 30px;
	line-height: normal;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	line-height: normal;
	margin-top: 100px;
	text-transform: uppercase;
}
.lead-fprm h1 {
	color: #fff;
	font-size: 30px;
	line-height: normal;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	line-height: normal;
	margin-top: 40px;
}
.top-heading {
	color: #fff;
	font-size: 35px;
	font-family: 'Abril Fatface', cursive;
	font-weight: 100;
	letter-spacing:10px;
	margin-bottom:10px;
}
.text-con-app {
	padding: 90px 0 90px;
}
.top-heading-i {
	color: #fff;
	font-size: 52px;
	font-weight: 100;
	text-transform: uppercase;
}
.top-heading-soon {
	color: #fff;
	font-size: 85px;
	font-weight: 100;
	text-transform: uppercase;
	padding: 40px 0 25px 0;
	font-family: 'Raleway', sans-serif;
}
.top-heading-creative {
	color: #fff;
	font-size: 45px;
	font-weight: 600;
}
.lead-text {
	color: #dfdfdf;
	line-height: 25px;
}
.lead-controls {
	margin-top: 0px;
}
.video-about {
	padding: 190px 0 0 0;
}
.video-top {
	padding: 20px 0 0 0;
}
.lead-controls-i {
	margin-top: 0px;
	display: table-cell;
	vertical-align: middle;
	margin: 0 auto;
	height: 600px;
}
.lead-laptop {
	margin-top: 20px;
	text-align: center;
}
.lead-controls a {
	margin-top: 20px;
	vertical-align: middle;
}
.play-home {
	font-size: 15px;
	display: inline-block;
}
.btn-lead {
	margin-right: 20px;
}
.play-home:hover {
	text-decoration: none;
}
.play-home .fa {
	padding: 1px;
	color: inherit;
	vertical-align: middle;
	margin-right: 10px;
	font-size: 10px;
}
.content {
	position: relative;
	background-color: #fff;
}
.low-back {
	position: relative;
}
.low-back:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
}
.low-blue {
	position: relative;
}
.low-blue:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(16, 150, 189, 0.6);
}
.low-back-i {
	position: relative;
}
.low-back-i:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}
/*..................*/

.low-back-gradient-r {
	position: relative;
}
.low-back-gradient-r:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0) linear-gradient(to top, #ff4200, #f99800 ) repeat scroll 0 0;
	opacity: 0.93;
}
.low-back-gradient-i {
	position: relative;
}
.low-back-gradient-i:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000 none repeat scroll 0 0;
	opacity: 0.65
}
/*................*/
.low-back-footer-r {
	position: relative;
}
.low-back-footer-r:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0) linear-gradient(to top, #000, #000) repeat scroll 0 0;
	opacity: 0.6;
}
.low-back-dark {
	position: relative;
}
.low-back-dark:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
}
.low-back-up {
	position: relative;
	z-index: 1;
}
.mobile * {
	background-attachment: scroll!important;
}
.layout {
	overflow: hidden;
}
#features1 {
	padding: 70px 0 60px 0;
	background: #f1f1f1;
}
.column {
	margin-top: 10px;
}
.video-back {
	position: absolute;
	top: 50%;
	width: 100%;
	left: 0;
	text-align: center;
	z-index: 15;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}
.html-video {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.html-video:before {
	content: "";
	background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.video-back-i {
	position: absolute;
	top: 50%;
	width: 100%;
	left: 0;
	text-align: center;
	z-index: 15;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}
.html-video-i {
	top: 0%;
	left: 0%;
	max-height: 610px;
	width: 100%;
	overflow: hidden;
	position: relative;
}
.html-video-i:before {
	content: "";
	background: rgba(0, 0, 0, 0) linear-gradient(to left, #000, #000 ) repeat scroll 0 0;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.6;
}
.content-slide {
	position: absolute;
	top: 40%;
	width: 100%;
	left: 0;
	text-align: center;
	z-index: 15;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}
.content-slide h2 {
	padding-top: 100px;
}
.video-back {
	position: absolute;
	top: 50%;
	width: 100%;
	left: 0;
	text-align: center;
	z-index: 15;
	-webkit-transform: translate(0%, -50%);
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}
.video-back h2 {
	padding-top: 130px;
}
.video-text h2 {
	color: #ffffff;
	font-size: 25px;
	text-transform: uppercase;
	font-family: 'Raleway', sans-serif;
}
.video-text h1 {
	color: #ffffff;
	font-size: 55px;
	font-family: 'Open+Sans', sans-serif;
	text-transform: uppercase;
}
.video-text p {
	color: #ffffff;
	font-size: 14px;
}
video {
	min-width: 100%
}
#customizable {
	padding: 110px 0 110px 0;
	background: #f1f1f1;
}
#customizable-i {
	padding: 110px 0 110px 0;
	background: #f1f1f1;
}

/*------------------------------------------*/
/*	       /* 04.Image Slide OWl */
/*------------------------------------------*/

#owl-slider, #owl-slider .item {
	height: 100%;
	position: relative;
	width: 100%;
}
#owl-slider {
	max-height: none;
}
#owl-slider .item {
	overflow: hidden;
}
#owl-slider .item::before {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#owl-slider .item .item-img {
	background-color: transparent;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
}
#owl-slider .item .slider-info {
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
	top: 35%;
	width: 1140px;
	z-index: 100;
}
#owl-slider .item .slider-info .sub-title, #owl-slider .item .slider-info h1, #owl-slider .item .slider-info h5, #owl-slider .item .slider-info p {
	margin-top: 0;
}
#owl-slider .item .slider-info h1 {
	font-size:52px;
	line-height:normal;
}
 @media (max-width: 768px) {
#owl-slider .item .slider-info h1 {
 font-size: 30px;
}
}
#owl-slider .item .slider-info h5 {
	font-size: 13px;
	font-weight: 400;
	margin-bottom: 15px;
	letter-spacing:5px;
}
#owl-slider .item .slider-info p {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 30px;
	letter-spacing:5px;
}
@media (min-width: 768px) {
#owl-slider .item .slider-info {
 width: 750px;
}
}
@media (max-width: 768px) {
#owl-slider .item .slider-info {
 top: 30%;
 width: 100%;
}
}
 @media (min-width: 300px) {
#owl-slider .item .slider-info {
 width: 35%;
 border:15px solid #6091ba;
 padding:25px;
 background:rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
 padding:45px 0 35px 0;

}
}
#owl-slider .item .slider-btn .btn {
	padding: 16px 40px;
}
#owl-slider .item .slider-btn .btn:first-child {
	margin-right: 10px;
}
#owl-slider.owl-nav-dark .item::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
#owl-slider.owl-theme .owl-nav {
	bottom: 20px;
	margin-top: -60px;
	position: absolute;
	right: 20px;
	top: 50%;
}
 @media (max-width: 1080px) {
#owl-slider.owl-theme .owl-nav [class*="owl-"] {
display: none;
}
}
#owl-slider.owl-theme.owl-nav-dark .owl-nav [class*="owl-"] {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 1px solid #222;
border-radius: 0;
color: #222;
cursor: e-resize;
display: inline-block;
font-size: 14px;
margin: 0 2px;
padding: 5px 20px;
}
#owl-slider.owl-theme.owl-nav-dark .owl-nav [class*="owl-"]:hover {
background: #fc575e none repeat scroll 0 0;
border-color: #fc575e;
color: #fff;
}
#owl-slider.owl-theme .owl-nav .disabled {
	opacity: 0.6;
}
#owl-slider.owl-carousel .owl-nav .owl-next, #owl-slider.owl-carousel .owl-nav .owl-prev {
	position: relative;
}
#owl-slider.owl-theme .owl-dots {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
}
#owl-slider.owl-theme .owl-dots .owl-dot {
	margin: 15px 0;
}
#owl-slider.owl-theme .owl-dots .owl-dot span {
	border-radius: 0;
	height: 25px;
	width: 6px;
}
#owl-slider.owl-theme .owl-dots .owl-dot.active span, #owl-slider.owl-theme .owl-dots .owl-dot:hover span {
	background:#ffa211;
}
.light-txt h1, .light-txt h2, .light-txt h3, .light-txt h4, .light-txt h5, .light-txt p, .light-txt span {
	color: #fff
}

/*------------------------------------------*/
/*	        /*  5.Particles */
/*------------------------------------------*/


html, body {
	width: 100%;
	height: 100%;
}
canvas {
	display: block;
	vertical-align: bottom;
}
#particles-js {
	width: 100%;
	height: 100%;
	background-color: #333;
	background-image: url(../images/banner4.jpg);
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.welcome-area {
	height: 100%;
}
#particles-js {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}
.welcome-image-area {
	position: relative;
	height: 100%;
	background-size: cover;
	z-index: 1;
}
.welcome-image-area:after {
	position: absolute;
	background: rgba(0, 0, 0, .8);
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: "";
	z-index: -1;
}
.particle-bg {
	position: relative;
	height: 100%;
	background-size: cover;
	z-index: 1;
}
.particle-bg:after {
	position: absolute;
	background: rgba(0, 0, 0, .8);
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: "";
	z-index: -1;
}
.display-table {
	display: table;
	width: 100%;
	height: 100%;
}
.display-table-cell {
	display: table-cell;
	vertical-align: middle;
}
.header-text hr {
	width: 16%;
	color: #333;
	border-width: 2px;
}
.header-text {
	background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
	border: 15px solid #ffa211;
	color: #fafafa;
	font-size: 75px;
	font-weight: 100;
	margin: 0 auto;
	padding: 50px 0 50px 0;
	text-align: center;
	text-transform: uppercase;
	width: 70%;
	border-color: #6091ba #6091ba #f1f1f1 #f1f1f1;

}
.header-text p {
	font-size: 14px;
	line-height: 35px;
	letter-spacing: 3px;
	color:#fff;
}
.header-text h1 {
	color: #f1f1f1;
	font-size: 45px;
	font-weight: 100;
	margin: 0 auto;
}
.header-text .home-arrow-down {
	text-align: center;
	position: absolute;
	bottom: -210px;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.header-text .home-arrow-down .btn {
	font-size: 30px;
}
.header-text .home-arrow-down .fa {
	color: #fafafa;
	display: inline-block;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-animation-name: home-arrow-down;
	animation-name: home-arrow-down;
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}
/*------------------------------------------*/
/*	        /* 6.Demos Intro */
/*------------------------------------------*/
.logo-t{ font-size:35px; color:#fff;}
.buy-theme {
	background: #ffa211;
	border-radius: 0px;
	position: fixed;
	right: -161px;
	top: 295px;
	z-index: 1000;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}
.buy-theme i {
	font-size: 20px;
	color: #fff;
	padding: 5px;
}
.buy-theme:hover, .quick-question:hover {
	right: -20px;
}
.buy-theme span, .quick-question span {
	opacity: 0;
	padding: 8px;
	position: relative;
	top: 0px;
	font-size: 14px;
	margin-right: 8px;
	font-weight: bold;
}
.buy-theme:hover span, .quick-question:hover span {
	opacity: 1;
}
.buy-theme a, .quick-question a {
	color: #fff;
	display: block;
	font-size: 10px;
	letter-spacing: 1px;
	padding: 8px 15px;
	text-transform: uppercase;
}
#more-demos {
	padding: 80px 0 80px 0;
}
.demos-one-row {
	margin: 0 auto;
	text-align: center;
	height: auto;
	overflow: hidden;
}
.img-res {
	margin: 0 auto;
	max-width: 100%;
}
.img-res-demo {
	margin: 0 auto;
	max-width: 100%;
	margin-bottom: 65px;
}
.demos {
	margin-top: 35px;
	margin-bottom: 65px;
}
#more-demos {
	padding: 80px 0 80px 0;
}
.demos-one-row {
	margin: 0 auto;
	text-align: center;
	height: auto;
	overflow: hidden;
}
.img-res {
	margin: 0 auto;
	max-width: 100%;
}
.img-res-demo {
	margin: 0 auto;
	max-width: 100%;
	margin-bottom: 65px;
}
.demos {
	margin-top: 35px;
	margin-bottom: 65px;
}
#intro-bg-app {
	top: 0px;
	left: 0px;
	width: 100%;
	text-align: center;
	margin: 0px;
	padding: 0px;
	background-color: #C0DEED;
	background: url(../img/intro-bg.jpg) no-repeat;
	padding-top: 140px;
	padding-bottom: 0px;
	width: 100%;
	animation: awan-animasi 50s linear infinite;
	-ms-animation: awan-animasi 50s linear infinite;
	-moz-animation: awan-animasi 50s linear infinite;
	-webkit-animation: awan-animasi 50s linear infinite;
}
#intro-bg {
	top: 0px;
	left: 0px;
	width: 100%;
	text-align: center;
	margin: 0px;
	padding: 0px;
	background-color: #C0DEED;
	background: rgba(0, 0, 0, 0) url("../images/banner4.jpg") no-repeat fixed center bottom / cover;
	padding-top: 190px;
	padding-bottom: 130px;
	width: 100%;
}
.intro-text .intro-lead-in {
	font-size: 23px;
	line-height: 31px;
	color: #ffffff;
	margin-bottom: 25px;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 1px;
	margin-top:25px;
}
.container-intro {
	width: 1600px;
	margin:0 auto
}
.intro-logo {
	padding: 0 0 20px 0;
}
.intro-text .intro-heading {
	font-size: 55px;
	padding: 15px 0 15px 0;
	color: #ffffff;
	font-family: 'Raleway', sans-serif;
	font-weight: 200;
	text-transform: uppercase;
	line-height: normal;
}
.low-back-gradient-intro:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0) linear-gradient(to left, #ff6000, #ffa211) repeat scroll 0 0;
	opacity: 0.85;
}
.intro-heading {
	font-size: 50px;
	padding: 48px 0 60px 0;
	color: #2f506c;
	font-weight: 100;
	text-transform: uppercase;
	line-height: normal;

}
.intro-heading-i {
	font-size: 50px;
	padding: 110px 0 60px 0;
	color: #333;
	font-weight: 100;
	text-transform: uppercase;
	line-height: normal;
	font-family: 'Raleway', sans-serif;
}
.intro-heading hr {
	background: #ffffff none repeat scroll 0 0;
	border: 0 none;
	height: 2px;
	margin: 0 auto 30px;
	position: relative;
	text-align: center;
	width: 90px;
}
.intro-heading-s {
	font-size: 30px;
	color: #fff;
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	padding: 15px 0 15px 0;
	text-transform: uppercase;
	line-height: normal;
}
.o-demos {
	font-weight: 700;
	font-size: 50px;
	color: #ffffff;
}
.bg-soon {
	background: url(../img/hero/soon.jpg) no-repeat scroll center center / cover;
	background-size: cover;
}

.blue{ color:#2f506c;}
.callouts-wrapperr{padding:55px 0 55px 0;
width: 100%;
float: left;
}
.deo-t{ text-align: center; padding:20px 0 45px 0; font-size:35px; color:#333;}
.deo-sh{ box-shadow:5px 0 20px 0 #666;margin:5px 0 50px 0; }