body, figure, form {
	margin: 0
}
legend, menu, ol, ul {
	padding: 0
}
blockquote p, dfn {
	font-style: italic
}
.btn, .btn-lg, .overlay ul li a, .read-more-btn, footer li {
	text-transform: uppercase
}
.overlay ul, .screenshots ul li, .showcase-slider ul, .social-icons ul, footer li, nav ol, nav ul, ul li {
	list-style: none
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
	display: block
}
audio, canvas, video {
	display: inline-block
}
audio:not([controls]) {
	display: none;
	height: 0
}
[hidden] {
	display: none
}
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%
}
button, html, input, select, textarea {
	font-family: sans-serif;
	font-family: Roboto, sans-serif
}
body, html {
	overflow-x: hidden;
	width: 100%
}
body {
	font-family: Roboto, sans-serif
}
html, html a {
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .004);
	-webkit-font-smoothing: antialiased
}
a:active, a:hover {
	outline: 0;
	text-decoration: none
}
h1 {
	margin: .67em 0
}
h2 {
	margin: .83em 0
}
dl, h3, menu, ol, p, pre, ul {
	margin: 1em 0
}
h4 {
	margin: 1.33em 0
}
h5 {
	margin: 1.67em 0
}
h6 {
	margin: 2.33em 0;
	font-size: .75em
}
abbr[title] {
	border-bottom: 1px dotted
}
b, strong {
	font-weight: 700
}
mark {
	background: #ff0;
	color: #000
}
code, kbd, pre, samp {
	font-size: 1em;
	font-family: monospace, serif
}
small, sub, sup {
	font-size: 75%
}
#subscribe .sub_btn, .btn, .form-control, h1, h2, h3, h4, h5 {
	font-family: Roboto, sans-serif
}
pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word
}
q {
	quotes: none
}
q:after, q:before {
	content: '';
	content: none
}
sub, sup {
	position: relative;
	vertical-align: baseline;
	line-height: 0
}
sup {
	top: -.5em
}
sub {
	bottom: -.25em
}
dd {
	margin: 0 0 0 40px
}
img {
	border: 0;
	-ms-interpolation-mode: bicubic
}
svg:not(:root) {
	overflow: hidden
}
fieldset {
	margin: 0 2px;
	padding: .35em .625em .75em;
	border: 1px solid silver
}
legend {
	border: 0;
	white-space: normal
}
button, input, select, textarea {
	margin: 0;
	vertical-align: baseline;
	font-size: 100%
}
button, input {
	line-height: normal
}
button, html input[type=button], input[type=reset], input[type=submit] {
	cursor: pointer;
	-webkit-appearance: button
}
button[disabled], input[disabled] {
	cursor: default
}
input[type=checkbox], input[type=radio] {
	box-sizing: border-box;
	padding: 0
}
input[type=search] {
	box-sizing: content-box;
	-webkit-appearance: textfield;
	nowhitespace: afterproperty
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}
button::-moz-focus-inner, input::-moz-focus-inner {
	padding: 0;
	border: 0
}
textarea {
	overflow: auto;
	vertical-align: top
}
table {
	border-spacing: 0;
	border-collapse: collapse
}
.group:after {
	content: "";
	display: table;
	clear: both
}
.nopadding {
	margin: 0!important;
	padding: 0!important
}
a {
	color: #00a4da
}
.texture-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/.png)
}
.use-btn {
	display: inline-block;
	margin: 0 10px 10px 0;
	padding: 20px 50px;
	border-radius: 3px;
	background-color: #fff;
	color: #4b98a9;
	font-size: 16px
}
.use-btn:focus, .use-btn:hover {
	background-color: #73d0da;
	color: #fff;
	text-decoration: none
}
.download-btn, .learn-btn {
	display: inline-block;
	padding: 18px 46px;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #fff;
	font-size: 18px;
	font-weight: 100
}
.download-btn:focus, .download-btn:hover, .learn-btn:focus, .learn-btn:hover {
	border-color: #73d0da;
	color: #73d0da;
	text-decoration: none
}
.read-more-btn {
	display: inline-block;
	color: #323a45;
	font-weight: 400
}
.download-btn i, .read-more-btn i {
	margin-left: 5px
}
.showcase .download-btn {
	margin-top: 50px
}
.download .download-btn {
	margin-top: 25px
}
.nav-toggle {
	position: absolute;
	top: 0;
	right: 40px;
	z-index: 999999;
	padding: 40px 35px 16px 0;
	cursor: pointer
}
.nav-toggle:focus {
	outline: 0
}
.nav-toggle span, .nav-toggle span:after, .nav-toggle span:before {
	content: '';
	position: absolute;
	display: block;
	width: 35px;
	height: 5px;
	border-radius: 1px;
	background: #fff;
	cursor: pointer;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}
.nav-toggle span:before {
	top: -10px
}
.nav-toggle span:after {
	bottom: -10px
}
.nav-toggle.active span {
	background-color: transparent
}
.nav-toggle.active span:after, .nav-toggle.active span:before {
	top: 0
}
.nav-toggle.active span:before {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg)
}
.nav-toggle.active span:after {
	top: 10px;
	-webkit-transform: translateY(-10px) rotate(-45deg);
	-ms-transform: translateY(-10px) rotate(-45deg);
	transform: translateY(-10px) rotate(-45deg)
}
.navicon {
	position: relative;
	height: 26px
}
.navicon p {
	margin: 1px 50px 0 0
}
.navicon-fixed {
	position: fixed;
	top: 59px;
	right: 143px
}
.features-bg, .features-intro-img, .features-slider, .hero {
	position: relative
}
.hero {
	padding: 60px 0;
	min-height: 800px;
	background: url(../img/hero-01.jpg) center center no-repeat fixed #284666;
	background-size: cover;
	color: #fff
}
.hero h1 {
	margin: 300px 0 45px;
	font-weight: 100;
	font-size: 45px
}
section.portfolia i, section.video i {
	margin-right: 10px;
	vertical-align: middle
}
.hero h1 span {
	display: inline-block;
	color: #a1a9b0
}
#home, .hero {
	width: 100%;
	height: 100%
}
header i {
	margin-left: 5px
}
section.video i {
	color: #323a45;
	font-size: 50px;
	-webkit-transition: color .3s ease-in-out;
	transition: color .3s ease-in-out
}
section.video h1 {
	font-weight: 300;
	font-size: 20px
}
section.video {
	padding: 60px 0;
	background-color: #f6f7f9
}
section.video a {
	color: #323a45
}
section.video a:focus, section.video a:hover {
	color: #73d0da;
	text-decoration: none
}
section.video a:focus i, section.video a:hover i {
	color: #73d0da
}
section.portfolia i {
	color: #323a45;
	font-size: 50px;
	-webkit-transition: color .3s ease-in-out;
	transition: color .3s ease-in-out
}
.feature-icon, blockquote p {
	vertical-align: top;
	display: inline-block
}
section.portfolia h1 {
	font-weight: 300;
	font-size: 20px
}
section.portfolia {
	padding: 115px 0;
	background-color: #f6f7f9
}
section.portfolia a {
	color: #323a45
}
section.portfolia a:focus, section.portfolia a:hover {
	color: #73d0da;
	text-decoration: none
}
section.portfolia a:focus i, section.portfolia a:hover i {
	color: #73d0da
}
.flickity-page-dots .dot {
	width: 13px;
	height: 13px;
	opacity: 1;
	background: 0 0;
	border: 2px solid #fff;
	-webkit-transition: background .3s;
	transition: background .3s
}
.flickity-page-dots .dot.is-selected {
	background: #fff
}
.features-bg {
	min-height: 500px;
	background: url(../img/features-intro-01.jpg) center center no-repeat;
	background-size: cover
}
.features-img {
	width: 100%;
	height: 400px;
	text-align: center;
	line-height: 400px
}
.features-slider {
	padding: 11% 100px 10%;
	height: 500px;
	background-color: rgba(0, 0, 24, 1)
}
.features-slider ul {
	margin: 0;
	padding: 0;
	list-style: none
}
.features-slider ul li {
	width: 100%
}
.features-slider li h1 {
	margin-bottom: 15px;
	color: #fff;
	font-weight: 100;
	font-size: 30px
}
.custom-headings, .custom-headings2, .custom-headings3, .custom-headings4, .custom-headings5, .features-slider li p {
	font-weight: 100!important
}
.features-slider li p {
	color: #fff;
	font-size: 16px!important
}
.slides li h1 {
	margin: 0;
	padding: 0
}
.features-slider .flickity-page-dots {
	text-align: center;
	margin-top: 0;
	position: static
}
.features-slider .flickity-page-dots .dot {
	margin: 10px 42px 0 0
}
.features-list {
	padding: 130px 0;
	background-color: #f6f7f9
}
.features-list h1 {
	margin: 0 0 10px;
	padding: 0;
	color: #24374b;
	font-size: 22px;
	font-weight: 300
}
.features-list p {
	margin-bottom: 20px;
	color: #789
}
.feature-content {
	display: inline-block;
	margin-left: 0;
	width: 65%
}
.feature-icon {
	margin-right: 25px;
	width: 50px;
	height: 50px;
	border: 1px solid #00a4da;
	border-radius: 50%;
	text-align: center;
	font-size: 15px;
	line-height: 3.3
}
.feature-icon i {
	color: #00a4da
}
blockquote {
	margin: 40px 0 0;
	padding: 0;
	border: none
}
blockquote p {
	margin: 0;
	padding: 0;
	width: 70%
}
blockquote .avatar {
	display: inline-block;
	margin-right: 20px;
	width: 64px;
	height: 64px;
	vertical-align: middle
}
blockquote .logo-quote {
	display: inline-block;
	margin: 0 0 0 90px
}
.showcase {
	background: url(../img/showcase-bg-fixed-01.jpg) center center no-repeat fixed;
	background-size: cover
}
.showcase h1 {
	margin: 0 0 10px;
	color: #fff;
	font-weight: 300;
	font-size: 16px!important;
	line-height: 1.4em;
	z-index: 999;
	position: absolute
}
.showcase p {
	margin-bottom: 25px;
	color: #fff
}
.device {
	position: absolute;
	top: -60px;
	left: 20%;
	min-height: 676px;
	width: 359px
}
.device-content {
	position: absolute;
	top: 115px;
	left: 56px;
	width: 247px;
	height: 445px
}
.device-content img {
	margin-top: 100px;
	margin-left: -139px;
	z-index: -999;
	position: relative
}
.showcase-wrap {
	position: relative;
	padding: 100px 0;
	min-height: 600px
}
.showcase-slider ul {
	margin: 0;
	padding: 0
}
.showcase-slider .flickity-page-dots {
	bottom: 20px
}
.screenshots-intro {
	padding: 170px 0 100px;
	background-color: #f6f7f9
}
.screenshots-intro h1 {
	margin-bottom: 20px;
	color: #24374b;
	font-weight: 400;
	font-size: 22px
}
.screenshots-intro p {
	margin-bottom: 25px;
	color: #789
}
.screenshots ul {
	margin: 0;
	padding: 0;
	width: 100%
}
.screenshots ul li {
	float: left;
	min-height: 100%;
	width: 25%;
	background-color: #000
}
.screenshots figure {
	position: relative;
	overflow: hidden
}
.screenshots figure img {
	width: 100%;
	height: 100%;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}
.screenshots figure:focus img, .screenshots figure:hover img {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1)
}
.screenshots figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 25% 0;
	width: 100%;
	height: 100%;
	background-color: rgba(63, 97, 132, .85);
	text-align: center;
	font-size: 15px;
	opacity: 0;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}
.screenshots figcaption a {
	color: #fff
}
.screenshots figcaption a:focus, .screenshots figcaption a:hover {
	color: #73d0da
}
.screenshots figure.cs-hover figcaption, .screenshots figure:focus figcaption, .screenshots figure:hover figcaption, .visible {
	opacity: 1
}
.screenshots figcaption i {
	font-size: 35px
}
.screenshots figcaption p {
	margin-bottom: 0;
	text-transform: uppercase;
	font-weight: 400
}
.screenshots figcaption .caption-content {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -40px;
	margin-left: -100px;
	width: 200px;
	-webkit-transform: translate(0, 15px);
	-ms-transform: translate(0, 15px);
	transform: translate(0, 15px);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}
.screenshots figure:focus figcaption .caption-content, .screenshots figure:hover figcaption .caption-content {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0)
}
.download {
	padding: 120px 0;
	background-color: #00a4da
}
.download h1 {
	margin: 0 0 15px;
	color: #fff;
	font-weight: 400;
	font-size: 40px
}
footer {
	background-color: #f6f7f9
}
footer p {
	color: #c7cacc;
	font-size: 12px
}
footer ul {
	margin-top: 30px
}
footer li {
	float: left;
	margin-right: 5%;
	font-weight: 400
}
footer li a {
	color: #00a4da margin-top:200px
}
footer li:last-child {
	margin-right: 0
}
.navbar {
	overflow: visible;
	background-color: rgba(0, 0, 0, .6);
	position: fixed;
	width: 100%;
	height: 100px;
	z-index: 9999999999999;
	top: 0;
	left: 0;
	right: 0
}
.overlay nav {
	position: relative;
	top: 50%;
	height: 60%;
	text-align: center;
	font-size: 54px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%)
}
.overlay ul {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 0
}
.overlay ul li {
	display: block;
	float: left;
	margin-right: 20px
}
.overlay ul li:last-child {
	margin-right: 0
}
.overlay ul li i {
	display: block;
	margin-bottom: 10px;
	font-size: 40px
}
.overlay ul li a {
	display: block;
	padding: 50px 0;
	min-width: 190px;
	border: 2px solid #fff;
	border-radius: 3px;
	background-color: #345271;
	color: #fff;
	font-weight: 100;
	font-size: 20px;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}
.btn, body, p {
	font-size: 14px
}
.overlay ul li a:focus, .overlay ul li a:hover {
	border-color: #73d0da;
	color: #73d0da
}
.overlay-boxify {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .5s, visibility 0s .5s;
	transition: opacity .5s, visibility 0s .5s
}
.overlay-boxify.open {
	visibility: visible;
	opacity: 1;
	-webkit-transition: opacity .5s;
	transition: opacity .5s
}
.overlay-boxify nav ul li {
	opacity: 0;
	-webkit-transform: translate3d(0, -80px, 0);
	transform: translate3d(0, -80px, 0);
	-webkit-transition: -webkit-transform .5s, opacity .5s;
	transition: transform .5s, opacity .5s
}
.overlay-boxify.open nav ul:first-child li:first-child {
	-webkit-transition-delay: 50ms;
	transition-delay: 50ms
}
.overlay-boxify.open nav ul:first-child li:nth-child(2) {
	-webkit-transition-delay: .1s;
	transition-delay: .1s
}
.overlay-boxify.open nav ul:nth-child(2) li:first-child {
	-webkit-transition-delay: .15s;
	transition-delay: .15s
}
.overlay-boxify.open nav ul:nth-child(2) li:nth-child(2) {
	-webkit-transition-delay: .2s;
	transition-delay: .2s
}
.overlay-boxify.open nav ul li {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}
.wp1, .wp2, .wp3, .wp4, .wp5, .wp6 {
	visibility: hidden
}
.bounceInDown, .bounceInLeft, .bounceInRight, .fadeInDown, .fadeInLeft, .fadeInRight, .fadeInUp, .fadeInUpD, .fadeInUpDelay {
	visibility: visible
}
.delay-05s {
	-webkit-animation-delay: .5s;
	animation-delay: .5s
}
.delay-1s {
	-webkit-animation-delay: 1s;
	animation-delay: 1s
}
body {
	color: #333;
	font-weight: 300;
	background: #fff;
	overflow-x: hidden
}
p {
	line-height: 26px
}
a:focus, a:hover {
	color: #4676fa;
	text-decoration: none;
	outline: 0
}
a {
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear
}
#hero-area .banner_bottom_btn i, .btn {
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear
}
.btn {
	padding: 10px 30px;
	border-radius: 0;
	font-weight: 400;
	color: #fff;
	transition: all .2s linear;
	display: inline-block
}
.btn:focus {
	box-shadow: none;
	outline: 0
}
.btn-common {
	border: 2px solid #00a4da;
	background-color: #00a4da;
	position: relative;
	z-index: 1;
	border-radius: 4px
}
.btn-common:hover {
	color: #00a4da;
	background-color: transparent;
	border: 2px solid #00a4da;
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out
}
.btn-border {
	color: #fff;
	background-color: transparent;
	border: 2px solid #fff;
	border-radius: 4px
}
.btn-border:hover {
	border: 2px solid #fff;
	color: #fff;
	background-color: #00a4da
}
.btn-lg {
	padding: 14px 33px;
	font-size: 16px
}
.btn-rm {
	padding: 7px 10px;
	text-transform: capitalize
}
.clear {
	clear: both
}
h1, h2, h3, h4, h5 {
	font-size: 40px;
	font-weight: 100;
	letter-spacing: 1px
}
ul {
	margin: 0;
	padding: 0
}
a:not([href]):not([tabindex]) {
	color: #fff
}
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
	color: #4676fa
}
.section {
	padding: 80px 0
}
.section-header {
	color: #fff;
	margin-bottom: 40px;
	text-align: center
}
.section-header .section-title {
	font-size: 42px;
	margin-top: 0;
	text-transform: uppercase;
	font-weight: 100;
	color: #0d3559;
	position: relative
}
.section-header .section-title span {
	color: #00a4da;
	font-weight: 500
}
.section-header .section-subtitle {
	margin-top: 15px;
	color: #333;
	font-size: 14px;
	font-weight: 300
}
.section-header .lines {
	margin: 15px auto auto;
	width: 70px;
	position: relative;
	border-top: 2px solid #346afe
}
.section-header .lines:before {
	position: absolute;
	content: "";
	display: inline-block;
	height: 10px;
	width: 10px;
	top: -10px;
	border: 4px solid #fff;
	border-radius: 50%;
	background: #4676fa;
	left: 27px
}
.bg-faded {
	background-color: #fff
}
.logo-menu a {
	font-size: 20px;
	color: #fff
}
.menu-bg {
	background-color: #fff!important;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .16), 0 1px 3px 0 rgba(0, 0, 0, .12);
	z-index: 999;
	padding: 3px
}
.menu-bg .menu-button {
	top: 0
}
.menu-bg .menu-button:hover {
	cursor: pointer;
	color: #4676fa
}
.menu-bg .logo-menu a {
	color: #4676fa
}
.menu-button:hover {
	cursor: pointer;
	opacity: #eee
}
.close-button {
	cursor: pointer
}
.navbar-light .navbar-nav .nav-item {
	margin-left: 15px
}
.navbar-light .navbar-nav .nav-link {
	color: #0d3559;
	padding: 7px 0;
	margin-left: 5px;
	position: relative;
	font-size: 15px;
	letter-spacing: .3px
}
#hero-area .contents, #video-area .contents {
	padding: 160px 0 80px
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.active:before, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:hover:before, .navbar-light .navbar-nav .open>.nav-link {
	color: #4676fa;
	-webkit-transform: scale(1);
	transform: scale(1)
}
.navbar-light .navbar-toggler {
	border-color: #333;
	border-radius: 0;
	float: right;
	margin: 10px
}
.navbar-light .navbar-toggler i {
	color: #333!important
}
#hero-area {
	background: url(../img/hero-area.jpg) no-repeat fixed;
	background-size: cover;
	color: #fff;
	overflow: hidden;
	position: relative
}
#hero-area .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #4676fa;
	opacity: .7;
	filter: alpha(opacity=70)
}
#features .icon, .item-boxes .icon {
	display: inline-block;
	width: 60px;
	height: 60px
}
#features .content-left, #features .content-right {
	top: 60px;
	position: relative
}
#hero-area .contents h1 {
	color: #fff;
	font-size: 50px;
	font-weight: 100;
	margin-bottom: 25px
}
#hero-area .contents p {
	font-size: 14px;
	color: #fff;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: .5px
}
#hero-area .contents .btn {
	margin: 20px 10px;
	text-transform: uppercase
}
#hero-area .banner_bottom_btn {
	margin-top: 40px
}
#hero-area .banner_bottom_btn i {
	color: #fff;
	font-size: 48px;
	transition: all .2s linear
}
#features .box-item .icon, #video-area .banner_bottom_btn i {
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear
}
#hero-area .banner_bottom_btn i:hover {
	color: #4676fa
}
#slider-area {
	margin-top: -1px
}
#slider-area h1 {
	font-weight: 100;
	font-size: 30px;
	line-height: 36px;
	text-transform: uppercase
}
#slider-area p {
	color: #fff;
	font-size: 14px;
	font-weight: 400
}
#slider-area .sticky-navigation {
	background: 0 0
}
#slider-area .btn {
	margin-right: 15px
}
#slider-area .large_white {
	color: #fff
}
#video-area {
	overflow: hidden;
	position: relative
}
#video-area .contents h1 {
	color: #fff;
	font-size: 50px;
	font-weight: 600;
	margin-bottom: 25px;
	line-height: 70px
}
#video-area .contents p {
	font-size: 14px;
	color: #fff;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: .5px
}
#video-area .contents .btn {
	margin: 20px 10px;
	text-transform: uppercase
}
.item-boxes, .item-boxes .icon {
	margin-bottom: 15px;
	text-align: center
}
#video-area .banner_bottom_btn {
	margin-top: 40px
}
#video-area .banner_bottom_btn i {
	color: #fff;
	font-size: 48px;
	transition: all .2s linear
}
#video-area .banner_bottom_btn i:hover {
	color: #4676fa
}
.overlay-2 {
	background: rgba(0, 0, 0, .7)!important
}
#about {
	position: relative;
	background: #f2f2f2
}
.item-boxes {
	padding: 15px;
	border-radius: 4px;
	webkit-transition: all .3s ease 0s;
	-moz-transition: all .3s ease 0s;
	transition: all .3s ease 0s
}
.item-boxes .icon {
	border: 1px solid #4676fa;
	border-radius: 5px;
	margin-top: 10px;
	webkit-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}
.item-boxes .icon i {
	font-size: 30px;
	line-height: 60px;
	color: #4676fa
}
.item-boxes h4 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px
}
.item-boxes:hover {
	background: #fff;
	box-shadow: 0 8px 48px 0 rgba(0, 0, 0, .15)
}
#services {
	position: relative;
	background: #f2f2f2
}
#features {
	background: #fff
}
#features .icon {
	border-radius: 4px;
	text-align: center;
	position: relative;
	z-index: 1
}
#features .show-box img, .shot-item img {
	width: 100%
}
#features .content-left span {
	float: right;
	margin-left: 25px
}
#features .content-right span {
	float: left;
	margin-right: 25px
}
#features .box-item {
	padding-bottom: 30px
}
#features .box-item .icon {
	border: 1px solid #4676fa;
	text-align: center;
	margin: 12px;
	transition: all .2s linear
}
#features .box-item .icon i {
	color: #4676fa;
	font-size: 24px;
	line-height: 60px;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear
}
#features .box-item .text h4 {
	font-weight: 600;
	font-size: 18px;
	line-height: 22px
}
#features .box-item .text p {
	font-size: 14px;
	line-height: 26px
}
#features .box-item:hover .icon {
	background: #4676fa
}
#portfolios, #screenshots {
	background: #f2f2f2
}
#features .box-item:hover .icon i {
	color: #fff
}
#features .show-box {
	padding: 80px 0 0
}
.shot-item {
	margin-right: 15px;
	padding: 8px;
	border-radius: 4px;
	background: #eaeaea
}
.shot-item .overlay {
	display: block;
	position: relative
}
.shot-item .overlay:after, .shot-item .overlay:before {
	position: absolute;
	content: "";
	height: 30%;
	width: 30%;
	background: #346afe;
	opacity: 0;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out
}
.shot-item .overlay:before {
	top: 0;
	left: 0;
	z-index: 1
}
.shot-item .overlay:after {
	bottom: 0;
	right: 0;
	z-index: 1
}
.shot-item:hover .overlay:after, .shot-item:hover .overlay:before {
	height: 50%;
	width: 100%;
	opacity: .8
}
.overlay .item-icon {
	height: 48px;
	width: 48px;
	line-height: 48px;
	color: #fff;
	left: 50%;
	margin-left: -24px;
	margin-top: -24px;
	top: 50%;
	position: absolute;
	z-index: 2;
	visibility: hidden;
	opacity: 0;
	cursor: pointer;
	text-align: center;
	font-size: 24px;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	border: 1px solid #ddd;
	border-radius: 4px
}
.overlay, .portfoli-content, .sup-desc-wrap {
	height: 100%;
	width: 100%
}
.shot-item:hover .item-icon {
	visibility: visible;
	opacity: 1
}
#portfolios .mix {
	padding: 10px
}
#portfolios .portfolio-item .shot-item {
	margin: 0
}
#portfolio-list .mix {
	display: none
}
.controls {
	text-align: center;
	padding: 0 0 20px
}
.controls .mixitup-control-active {
	color: #00a4da!important;
	border-color: #00a4da;
	background: 0 0
}
.controls .btn {
	text-transform: uppercase;
	margin: 2px
}
.controls:hover {
	cursor: pointer
}
.portfolio-img {
	overflow: hidden;
	display: block;
	position: relative
}
.portfolio-img img {
	width: 100%
}
.portfoli-content {
	position: absolute;
	opacity: 0;
	top: 0;
	-webkit-transition: opacity .8s cubic-bezier(.19, 1, .22, 1);
	transition: opacity .8s cubic-bezier(.19, 1, .22, 1)
}
.portfoli-content:before {
	background-color: rgba(1, 3, 7, .8);
	top: 0;
	left: 0;
	bottom: 15px;
	right: 30px;
	content: '';
	position: absolute;
	-webkit-transform: scale(.9);
	-moz-transform: scale(.9);
	-ms-transform: scale(.9);
	-o-transform: scale(.9);
	transform: scale(.9);
	-webkit-transition: all .4s ease;
	transition: all .4s ease
}
.sup-desc-wrap {
	display: table
}
.sup-desc-wrap .sup-desc-inner {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding: 0 35px
}
.sup-desc-wrap .sup-meta-wrap .sup-title {
	display: block;
	outline: 0;
	margin-bottom: 10px;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	opacity: 0;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease
}
.sup-desc-wrap .sup-meta-wrap .sup-title h4 {
	font-size: 22px;
	color: #fff;
	margin: 0 0 5px;
	line-height: 26px;
	text-transform: uppercase;
	font-weight: 100
}
.sup-desc-wrap .sup-meta-wrap .sup-description {
	font-size: 14px;
	line-height: 22px;
	color: #fff;
	text-align: center;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
	opacity: 0;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease
}
.portfolio-item:hover .portfoli-content, .portfolio-item:hover .portfoli-content:before {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1)
}
.portfolio-item:hover .sup-title {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	opacity: 1
}
.portfolio-item:hover .sup-description {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0)
}
.video-promo {
	background: url(../img/bg_2.jpg) cover fixed;
	position: relative
}
.video-promo .video-promo-content {
	color: #fff
}
.video-promo .video-promo-content h2 {
	color: #fff;
	font-size: 30px;
	text-transform: uppercase
}
.video-promo .video-promo-content p {
	margin-bottom: 30px
}
.video-promo .video-promo-content .video-popup {
	min-width: 120px;
	border: 2px solid #fff;
	border-radius: 10px;
	padding: 20px;
	color: #fff;
	display: inline-block;
	font-size: 38px;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out
}
.video-promo .video-promo-content .video-popup:hover {
	background: #4676fa;
	border-color: #4676fa;
	color: #fff
}
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, .6);
	opacity: 1;
	filter: alpha(opacity=10);
	z-index:9!important;
}
#blog .blog-item-img, .counters {
	position: relative
}
.pricing-table {
	padding: 20px 20px 40px;
	margin: 0 auto 30px;
	border: transparent;
	background-color: #FFF;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	transition: all .3s;
	text-align: center
}
.pricing-table:hover {
	box-shadow: 0 0 60px 0 rgba(0, 0, 0, .1)
}
.pricing-table .icon {
	font-size: 26px;
	color: #4676fa;
	border: 1px solid #4676fa;
	border-radius: 4px;
	width: 64px;
	height: 64px;
	text-align: center;
	line-height: 64px;
	margin: 30px auto
}
.pricing-table .pricing-details h2 {
	font-size: 22px;
	font-weight: 600;
	color: #333;
	margin-bottom: 10px
}
.pricing-table .pricing-details span {
	display: inline-block;
	font-size: 28px;
	font-weight: 400;
	color: #4676fa;
	margin-bottom: 20px
}
.pricing-table .pricing-details ul {
	margin-bottom: 35px
}
.pricing-table .pricing-details ul li {
	padding: 10px;
	font-size: 15px;
	border-bottom: 1px solid #eee
}
.table-left {
	margin-top: 20px
}
.counters {
	background: url(../img/bg1.jpg) fixed
}
.counters .facts-item {
	text-align: center;
	color: #fff
}
.counters .facts-item .icon {
	margin-bottom: 20px
}
.counters .facts-item .icon i {
	font-size: 50px;
	color: #fff
}
.counters .facts-item .fact-count h3 {
	font-size: 35px;
	color: #fff;
	margin-bottom: 15px
}
.counters .facts-item .fact-count h4 {
	font-size: 20px;
	color: #fff
}
#testimonial {
	background: #f2f2f2
}
.testimonial-item {
	text-align: center
}
.testimonial-item img {
	width: 80px;
	height: 80px;
	border-radius: 50%
}
#blog .blog-item-img img, #download {
	width: 100%
}
.testimonial-item .testimonial-text h3 {
	font-size: 16px;
	font-weight: 100;
	text-transform: uppercase
}
.testimonial-item .testimonial-text span {
	font-size: 15px;
	color: #999
}
.testimonial-item .testimonial-text p {
	font-size: 14px;
	font-weight: 400;
	padding: 20px 10px;
	letter-spacing: 1px;
	margin: 0;
	line-height: 1.5;
	color: #999
}
.owl-theme .owl-controls .owl-page span {
	background: #4676fa
}
.owl-theme .owl-controls {
	margin-top: 20px
}
#download {
	background-image: linear-gradient(120deg, #89f7fe 0, #4676fa 100%)
}
#download .section-title {
	color: #fff
}
.btn {
	margin: 10px
}
.btn i {
	margin-right: 5px
}
#blog .blog-item-wrapper {
	background: #fff;
	border-radius: 0;
	margin-bottom: 30px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
	-webkit-transition: transform .2s linear, -webkit-box-shadow .2s linear;
	-moz-transition: transform .2s linear, -moz-box-shadow .2s linear;
	transition: transform .2s linear, box-shadow .2s linear
}
#blog .blog-item-img:before, .form-control {
	-webkit-transition: all .3s;
	-moz-transition: all .3s
}
#blog .blog-item-wrapper:hover {
	box-shadow: 0 0 40px 0 rgba(0, 0, 0, .1)
}
#blog .blog-item-wrapper:hover .blog-item-img:before {
	opacity: 1;
	height: 100%;
	width: 100%
}
#blog .blog-item-img:before {
	width: 50%;
	height: 50%;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(70, 118, 250, .7);
	opacity: 0;
	transition: all .3s
}
#blog .blog-item-text {
	border: 1px solid #f1f1f1;
	padding: 20px
}
#blog .blog-item-text .meta-tags {
	margin-bottom: 10px
}
#blog .blog-item-text .meta-tags span {
	color: #999;
	margin-right: 10px
}
#blog .blog-item-text .meta-tags span i {
	margin-right: 5px
}
#blog .blog-item-text .meta-tags span a {
	color: #999
}
#blog .blog-item-text .meta-tags span a:hover {
	color: #4676fa
}
#blog .blog-item-text h3 {
	line-height: 26px;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 10px
}
#blog .blog-item-text h3 a {
	color: #333
}
#blog .blog-item-text h3 a:hover {
	color: #4676fa
}
#blog .blog-item-text p {
	line-height: 25px;
	margin-bottom: 20px
}
.form-control {
	width: 100%;
	margin-bottom: 20px;
	padding: 18px;
	color: #fff;
	font-size: 14px;
	border-radius: 4px;
	transition: all .3s
}
.form-control:focus {
	box-shadow: none;
	outline: 0
}
.btn.disabled, .btn:disabled {
	opacity: 1
}
#contact {
	background: #f2f2f2
}
#contact .contact-block {
	background: #fff;
	padding: 30px;
	overflow: hidden
}
#contact #contactForm {
	margin-top: 30px
}
.text-danger {
	font-size: 14px;
	margin-top: 10px
}
.list-unstyled li {
	color: #d9534f
}
#subscribe form input {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: none;
	color: #999;
	height: 50px;
	padding: 0 20px;
	width: 100%
}
#subscribe form input:focus {
	border: 1px solid #4676fa
}
#subscribe .sub_btn {
	border: none;
	line-height: 44px;
	margin: 0;
	font-size: 15px;
	text-transform: uppercase;
	position: absolute;
	right: 0;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	min-width: 150px;
	color: #fff;
	top: 0;
	height: 50px;
	background: #4676fa;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	transition: all .3s;
	cursor: pointer
}
footer {
	background: #333;
	padding: 60px 0 30px;
	text-align: center
}
.site-info p {
	line-height: 34px;
	color: #fff
}
.site-info p a {
	color: #fff
}
.site-info p a:hover {
	color: #4676fa
}
.social-icons {
	margin-bottom: 20px
}
.social-icons ul {
	margin: 0;
	padding: 0
}
.social-icons ul li {
	display: inline
}
.social-icons ul li a {
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 15px;
	border-radius: 4px;
	border: 1px solid rgba(255, 254, 254, .07);
	line-height: 40px;
	width: 40px;
	height: 40px;
	text-align: center;
	font-size: 16px
}
#googlemaps, #loader {
	height: 100%;
	width: 100%
}
.social-icons ul li a:hover {
	color: #fff
}
.facebook a {
	color: #4867aa
}
.facebook a:hover {
	background: #4867aa
}
.twitter a {
	color: #1da1f2
}
.twitter a:hover {
	background: #1da1f2
}
.google-plus a {
	color: #dd4d42
}
.google-plus a:hover {
	background: #dd4d42
}
.youtube a {
	color: #df2926
}
.youtube a:hover {
	background: #df2926
}
.linkedin a {
	color: #007bb6
}
.linkedin a:hover {
	background: #007bb6
}
.pinterest a {
	color: #bd081c
}
.pinterest a:hover {
	background: #bd081c
}
.dribbble a {
	color: #ea4c89
}
.dribbble a:hover {
	background: #ea4c89
}
.behance a {
	color: #0b7cff
}
.behance a:hover {
	background: #0b7cff
}
.subscribe-box {
	margin-top: 18px
}
.subscribe-box input[type=text] {
	color: #444;
	font-size: 12px;
	padding: 6px 12px;
	border: none;
	background: #fff;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
	outline: 0
}
.subscribe-box input[type=submit] {
	display: inline-block;
	text-decoration: none;
	color: #fff;
	font-size: 12px;
	background: #4676fa;
	text-transform: uppercase;
	border: none;
	padding: 7px 16px;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	font-family: Roboto, sans-serif;
	cursor: pointer
}
.back-to-top {
	display: none;
	position: fixed;
	bottom: 18px;
	right: 15px
}
#loader {
	position: fixed;
	top: 0;
	left: 0;
	background: #333;
	z-index: 9999999999
}
.logoimg {
	margin-top: 15px;
	position: fixed;
	left: 25px
}
#contactform, #googlemaps, .spinner {
	position: relative
}
.logo-bottom {
	margin-top: -11px
}
.predstavqne {
	color: #789!important
}
.features-text {
	font-size: 12px!important
}
.custom-headings {
	color: #00a4da!important
}
.custom-headings2 {
	color: #ea3230!important
}
.custom-headings3 {
	color: #075988!important
}
.custom-headings4 {
	color: #570033!important;
	text-align: justify!important
}
.custom-headings5 {
	color: #00a4da!important;
	text-align: justify!important
}
#googlemaps {
	left: 0;
	z-index: 0
}
#contactform {
	z-index: 1;
	width: 100%;
	margin: auto 0;
	padding: 0;
	background: #000;
	height: 400px;
	opacity: .45;
	color: #fff
}
.contact-map {
	background-color: #f2f2f2!important
}
.back-to-top i {
	display: block;
	width: 36px;
	height: 36px;
	line-height: 36px;
	color: #fff;
	font-size: 14px;
	text-align: center;
	border-radius: 4px;
	background-color: #4676fa;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear
}
.spinner {
	width: 40px;
	height: 40px;
	top: 45%;
	margin: 0 auto
}
.double-bounce1, .double-bounce2 {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #4676fa;
	opacity: .6;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-animation: sk-bounce 2s infinite ease-in-out;
	animation: sk-bounce 2s infinite ease-in-out
}
.double-bounce2 {
	-webkit-animation-delay: -1s;
	animation-delay: -1s
}
@-webkit-keyframes sk-bounce {
	0%, 100% {
		-webkit-transform: scale(0)
	}
	50% {
		-webkit-transform: scale(1)
	}
}
@keyframes sk-bounce {
	0%, 100% {
		transform: scale(0);
		-webkit-transform: scale(0)
	}
	50% {
		transform: scale(1);
		-webkit-transform: scale(1)
	}
}
#pf {
	padding-top: 80px
}
h1.za_nas {
	margin-top: -50px!important;
	color: #00a4da!important;
	font-size: 22px!important
}
@media (min-width:900px) {
	.koi-sme {
		display: none
	}
}
@media (max-width:900px) {
	.koi-sme {
		height: 130px
	}
}
@media (max-width:800px) {
	.koi-sme {
		height: 140px
	}
}
@media (max-width:700px) {
	.koi-sme {
		height: 150px
	}
}
@media (max-width:600px) {
	.koi-sme {
		height: 170px
	}
}
@media (max-width:500px) {
	.koi-sme {
		height: 210px
	}
}
@media (max-width:400px) {
	.koi-sme {
		height: 260px
	}
}
@media (max-width:400px) {
	.logoimg {
		width: 200px;
		height:auto;
		margin-top:25;
	}
}



@media (max-width:300px) {
	.koi-sme {
		height: 300px
	}
}
.flag {
	margin-bottom: 10px;
}