body {
	font-weight: 400;
	overflow-x: hidden!important
}

img {
	width: 100%;
	height: auto
}

span {
	display: inline-block
}

h1 {
	font-size: 60px
}

h2 {
	font-size: 50px
}

h3 {
	font-size: 35px
}

h4 {
	font-size: 30px
}

h5 {
	font-size: 25px
}

h6 {
	font-size: 18px
}

p {
	line-height: 1.8;
	font-size: 15px
}

.v-middle {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 0;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0, -50%)
}

.clear-fix {
	clear: both!important
}

.mt-0 {
	margin-top: 0!important
}

.mt-5 {
	margin-top: 5px!important
}

.mt-10 {
	margin-top: 10px!important
}

.mt-15 {
	margin-top: 15px!important
}

.mt-20 {
	margin-top: 20px!important
}

.mt-25 {
	margin-top: 25px!important
}

.mt-30 {
	margin-top: 30px!important
}

.mt-35 {
	margin-top: 35px!important
}

.mt-40 {
	margin-top: 40px!important
}

.mt-45 {
	margin-top: 45px!important
}

.mt-50 {
	margin-top: 50px!important
}

.mt-55 {
	margin-top: 55px!important
}

.mt-60 {
	margin-top: 60px!important
}

.mt-62 {
	margin-top: 62px!important
}

.mt-65 {
	margin-top: 65px!important
}

.mt-70 {
	margin-top: 70px!important
}

.mt-75 {
	margin-top: 75px!important
}

.mt-80 {
	margin-top: 80px!important
}

.mt-85 {
	margin-top: 85px!important
}

.mt-90 {
	margin-top: 90px!important
}

.mt-95 {
	margin-top: 95px!important
}

.mt-100 {
	margin-top: 100px!important
}

.mb-0 {
	margin-bottom: 0!important
}

.mb-5 {
	margin-bottom: 5px!important
}

.mb-10 {
	margin-bottom: 10px!important
}

.mb-15 {
	margin-bottom: 15px!important
}

.mb-20 {
	margin-bottom: 20px!important
}

.mb-25 {
	margin-bottom: 25px!important
}

.mb-30 {
	margin-bottom: 30px!important
}

.mb-35 {
	margin-bottom: 35px!important
}

.mb-40 {
	margin-bottom: 40px!important
}

.mb-45 {
	margin-bottom: 45px!important
}

.mb-50 {
	margin-bottom: 50px!important
}

.mb-55 {
	margin-bottom: 55px!important
}

.mb-60 {
	margin-bottom: 60px!important
}

.mb-62 {
	margin-bottom: 62px!important
}

.mb-65 {
	margin-bottom: 65px!important
}

.mb-70 {
	margin-bottom: 70px!important
}

.mb-75 {
	margin-bottom: 75px!important
}

.mb-80 {
	margin-bottom: 80px!important
}

.mb-85 {
	margin-bottom: 85px!important
}

.mb-90 {
	margin-bottom: 90px!important
}

.mb-95 {
	margin-bottom: 95px!important
}

.mb-100 {
	margin-bottom: 100px!important
}

.pt-0 {
	padding-top: 0!important
}

.pt-5 {
	padding-top: 5px!important
}

.pt-10 {
	padding-top: 10px!important
}

.pt-15 {
	padding-top: 15px!important
}

.pt-20 {
	padding-top: 20px!important
}

.pt-25 {
	padding-top: 25px!important
}

.pt-30 {
	padding-top: 30px!important
}

.pt-35 {
	padding-top: 35px!important
}

.pt-40 {
	padding-top: 40px!important
}

.pt-45 {
	padding-top: 45px!important
}

.pt-50 {
	padding-top: 50px!important
}

.pt-55 {
	padding-top: 55px!important
}

.pt-60 {
	padding-top: 60px!important
}

.pt-65 {
	padding-top: 65px!important
}

.pt-70 {
	padding-top: 70px!important
}

.pt-75 {
	padding-top: 75px!important
}

.pt-80 {
	padding-top: 80px!important
}

.pt-85 {
	padding-top: 85px!important
}

.pt-90 {
	padding-top: 90px!important
}

.pt-95 {
	padding-top: 95px!important
}

.pt-100 {
	padding-top: 100px!important
}

.pb-0 {
	padding-bottom: 0!important
}

.pb-5 {
	padding-bottom: 5px!important
}

.pb-10 {
	padding-bottom: 10px!important
}

.pb-15 {
	padding-bottom: 15px!important
}

.pb-20 {
	padding-bottom: 20px!important
}

.pb-25 {
	padding-bottom: 25px!important
}

.pb-30 {
	padding-bottom: 30px!important
}

.pb-35 {
	padding-bottom: 35px!important
}

.pb-40 {
	padding-bottom: 40px!important
}

.pb-45 {
	padding-bottom: 45px!important
}

.pb-50 {
	padding-bottom: 50px!important
}

.pb-55 {
	padding-bottom: 55px!important
}

.pb-60 {
	padding-bottom: 60px!important
}

.pb-65 {
	padding-bottom: 65px!important
}

.pb-70 {
	padding-bottom: 70px!important
}

.pb-75 {
	padding-bottom: 75px!important
}

.pb-80 {
	padding-bottom: 80px!important
}

.pb-85 {
	padding-bottom: 85px!important
}

.pb-90 {
	padding-bottom: 90px!important
}

.pb-95 {
	padding-bottom: 95px!important
}

.pb-100 {
	padding-bottom: 100px!important
}

.no-padding {
	padding: 0!important
}

.font-wight-100 {
	font-weight: 100!important
}

.font-wight-300 {
	font-weight: 300!important
}

.font-wight-400 {
	font-weight: 400!important
}

.font-wight-500 {
	font-weight: 500!important
}

.font-wight-600 {
	font-weight: 600!important
}

.font-wight-700 {
	font-weight: 700!important
}

.font-wight-800 {
	font-weight: 800!important
}

.facebook {
	background-color: #3b5998
}

.twitter {
	background-color: #0084b4
}

.youtube {
	background-color: #b00
}

.linkedin {
	background-color: #007bb6
}

.google {
	background-color: #dd4b39
}

.instagram {
	background-color: #e95950
}

.whatsapp {
	background-color: #4dc247
}

.github {
	background-color: #000
}

.loading {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #000;
	z-index: 9999999999999
}

.spinner {
	margin: 50vh auto;
	width: 50px;
	height: 40px;
	text-align: center;
	font-size: 10px
}

.spinner>div {
	background-color: #fff;
	height: 100%;
	width: 4px;
	display: inline-block;
	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out
}

.spinner .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s
}

.spinner .rect3 {
	-webkit-animation-delay: -1s;
	animation-delay: -1s
}

.spinner .rect4 {
	-webkit-animation-delay: -.9s;
	animation-delay: -.9s
}

.spinner .rect5 {
	-webkit-animation-delay: -.8s;
	animation-delay: -.8s
}

@-webkit-keyframes sk-stretchdelay {
	0%,
	100%,
	40% {
		-webkit-transform: scaleY(.4)
	}
	20% {
		-webkit-transform: scaleY(1)
	}
}

@keyframes sk-stretchdelay {
	0%,
	100%,
	40% {
		transform: scaleY(.4);
		-webkit-transform: scaleY(.4)
	}
	20% {
		transform: scaleY(1);
		-webkit-transform: scaleY(1)
	}
}

body {
	font-family: Raleway, sans-serif;
	color: #111;
	font-weight: 400
}

.section-padding {
	padding: 100px 0
}

.tit {
	margin-bottom: 100px;
	display: inline-block;
	font-size: 38px;
	font-weight: 900;
	text-transform: capitalize
}

p {
	color: #888;
	font-family: 'Open Sans', sans-serif
}

main {
	position: relative;
	z-index: 2;
	background: #fff;
	margin-bottom: 247px
}

input:focus,
textarea:focus {
	border-color: #555!important
}

.navbar {
	background: #000;
	height: 60px;
	line-height: 60px;
	padding: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	border-radius: 0;
	text-transform: capitalize;
	z-index: 99999;
	display: none
}

.navbar .navbar-brand,
.navbar .navbar-brand:focus,
.navbar .navbar-brand:hover {
	font-size: 30px;
	color: #fff;
	padding-top: 20px;
	font-family: Norican, cursive
}

.navbar .navbar-nav>li>a {
	margin: 0!important;
	color: #eee!important;
	padding: 0!important
}

.nav>li>a:focus,
.nav>li>a:hover {
	background: 0 0
}

.navbar .navbar-nav>li {
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
	margin: 20px 15px 0;
	padding: 5 10px;
	background: 0 0;
	cursor: pointer;
	position: relative
}

.navbar .navbar-nav>li>a.active {
	color: #fff;
	background: 0 0
}

.header {
	height: 100vh;
	width: 100%;
	background: rgba(0, 0, 0, .2);
	background-image: url(/img/4a978f4093b0a3472d7053e26d0f64e23b443bb2/bg.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-blend-mode: overlay;
	position: relative;
	overflow: hidden
}

.caption {
	color: #fff
}

.caption h1 {
	margin: 20px auto;
	font-weight: 100;
	font-size: 100px;
	text-transform: uppercase
}

.caption h3 {
	font-weight: 100
}

.typed-cursor {
	opacity: 1;
	margin-left: 10px;
	-webkit-animation: blink .5s infinite alternate;
	-moz-animation: blink .5s infinite alternate;
	animation: blink .5s infinite alternate
}

@keyframes blink {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0
	}
}

@-webkit-keyframes blink {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0
	}
}

@-moz-keyframes blink {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0
	}
}

.button-scroll {
	position: absolute;
	bottom: 5vh;
	left: calc(50% - 13px);
	width: 26px;
	height: 50px;
	border-radius: 15px;
	border: 2px solid #fff;
	cursor: pointer;
	z-index: 9999
}

.button-scroll span {
	height: 10px;
	width: 2px;
	position: absolute;
	left: calc(50% - 1px);
	background: #fff;
	-webkit-animation: scroll .5s infinite alternate;
	-moz-animation: scroll .5s infinite alternate;
	animation: scroll .5s infinite alternate
}

@keyframes scroll {
	0% {
		top: 50%
	}
	50% {
		top: 55%
	}
	100% {
		top: 60%
	}
}

@-webkit-keyframes scroll {
	0% {
		top: 50%
	}
	50% {
		top: 55%
	}
	100% {
		top: 60%
	}
}

@-moz-keyframes scroll {
	0% {
		top: 50%
	}
	50% {
		top: 55%
	}
	100% {
		top: 60%
	}
}

.hero .hero-item h5 {
	font-weight: 600
}

.hero .hero-item p {
	line-height: 2
}

.hero .hero-img {
	position: relative
}

.hero button {
	padding: 8px 25px;
	border: none;
	background: #222;
	color: #eee;
	transition: all .5s
}

.hero button:hover {
	background: #eee;
	color: #222
}

.hero .services {
	background: #f4f4f4;
	margin: 100px auto
}

.services .serv-row .serv-item {
	padding: 20px 30px;
	background: #fff;
	box-shadow: 2px 5px 10px #eee
}

.services .serv-row .serv-item span {
	font-size: 40px;
	font-weight: 700
}

.services .serv-row .serv-item h6 {
	margin: 70px auto;
	font-weight: 600;
	letter-spacing: 2px
}

.hero .hero-progress {
	padding: 0 20px
}

.hero .hero-progress p {
	font-size: 12px;
	color: #555;
	margin-bottom: 5px
}

.hero .hero-progress .progress-main {
	background: #eee;
	width: 100%;
	height: 4px;
	margin: 0 auto 30px
}

.hero-progress .progress-main .progress-bar {
	background: #111;
	height: 100%;
	width: 0;
	transition: all 2s
}

.portfolio {
	overflow: hidden;
	background: #fafafa
}

.portfolio .filtering span {
	padding: 0 25px 5px 20px;
	text-transform: uppercase;
	position: relative;
	cursor: pointer
}

.portfolio .filtering .active:after {
	width: 60%
}

.portfolio .filtering span:after {
	content: "";
	background: #111;
	position: absolute;
	left: 18%;
	bottom: 0;
	height: 2px;
	width: 0;
	transition: all .5s
}

.item-img {
	padding: 15px;
	position: relative
}

.item-img-overlay {
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
	background: rgba(0, 0, 0, .6);
	opacity: 0;
	overflow: hidden;
	transition: all .5s
}

.item-img-overlay .v,
.item-img-overlay .x {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 0 0
}

.item-img:hover .v:after,
.item-img:hover .v:before {
	left: 10%;
	right: 10%
}

.item-img:hover .x:after,
.item-img:hover .x:before {
	top: 10%;
	bottom: 10%
}

.item-img-overlay .v:after,
.item-img-overlay .v:before {
	content: '';
	height: 1px;
	position: absolute;
	left: 50%;
	right: 50%;
	background: #eee;
	transition: all .5s
}

.item-img-overlay .v:after {
	top: 10%
}

.item-img-overlay .v:before {
	bottom: 10%
}

.item-img-overlay .x:after,
.item-img-overlay .x:before {
	content: '';
	width: 1px;
	position: absolute;
	top: 50%;
	bottom: 50%;
	background: #eee;
	transition: all .5s
}

.item-img-overlay .x:after {
	right: 10%
}

.item-img-overlay .x:before {
	left: 10%
}

.item-img-overlay .overlay-info {
	position: absolute;
	bottom: -80px;
	left: 0;
	width: 100%;
	text-align: center;
	color: #aaa;
	transition: all .5s
}

.item-img-overlay .v-middle a {
	color: #eee;
	font-size: 25px;
	cursor: pointer;
	width: 50px;
	height: 50px;
	margin: auto
}

.item-img-overlay .v-middle h5 {
	color: #eee;
	font-weight: 600
}

.item-img:hover .item-img-overlay {
	opacity: 1
}

.numbers .numb-item span {
	font-size: 40px
}

.numbers .numb-item h3 {
	font-weight: 900;
	margin: 20px auto
}

.numbers .numb-item p {
	color: #111
}

.clients {
	background: #f4f4f4
}

.clients .client-say {
	padding: 50px;
	background: #fff;
	box-shadow: 2px 5px 10px #eee
}

.client-say .client-item p {
	font-size: 16px;
	color: #444;
	margin-bottom: 30px
}

.client-say .client-item h6 {
	font-size: 14px;
	color: #555;
	margin-bottom: 30px
}

.owl-theme .owl-dots .owl-dot span {
	width: 7px;
	height: 7px;
	border: 1px solid #000;
	border-radius: 50%;
	background: #000
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
	background: 0 0;
	transform: scale(1.2, 1.2)
}

.contact .form {
	overflow: hidden
}

.contact .form input,
.contact .form textarea {
	width: 100%;
	padding: 10px;
	border: none;
	background: #f7f7f7;
	margin-bottom: 30px
}

.contact .form textarea {
	max-width: 100%;
	max-height: 140px;
	height: 140px
}

.contact .form input.button {
	background: #eee;
	color: #111;
	transition: all .5s
}

.contact .form input.button:hover {
	background: #222;
	color: #eee
}

footer {
	position: relative;
	left: 0;
	right: 0;
	bottom: 0;
	background: #111;
	padding: 80px 0;
	text-align: center;
	z-index: 1
}

footer .social-icon span {
	color: #eee;
	margin: 10px 2px 0;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	cursor: pointer;
	transition: all .5s
}

footer .social-icon span:hover {
	color: #111;
	background: #eee
}

footer p {
	color: #aaa
}

#particles-js {
	width: 100%;
	height: 100%
}

.demo-3 {
	position: relative;
	height: 100vh;
	background-size: cover;
	z-index: 1;
	background-position: center center
}

.demo-3-overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, .5)
}

.skills-2 {
    width: 100%;
    text-align: left;
}


#skills-2 {
    padding: 15px 15px;
	text-align: center;
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed !important;
    width: 60px !important;
    height: 60px !important;
    bottom: 20px !important;
    right: 20px !important;
    background-color: #25d366 !important;
    color: #FFF !important;
    border-radius: 50px !important;
    text-align: center !important;
    font-size: 30px !important;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3) !important;
    z-index: 9999 !important;
    transition: all 0.3s ease !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.whatsapp-float:hover {
    background-color: #128c7e !important;
    transform: scale(1.1) !important;
    box-shadow: 2px 2px 12px rgba(0,0,0,0.4) !important;
}

.whatsapp-float a {
    color: #FFF !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
    border-radius: 50px !important;
}

.whatsapp-float svg {
    width: 30px !important;
    height: 30px !important;
    fill: currentColor !important;
    display: block !important;
}