:root {
	--primary: #0e1630;
	--secondary: #eb4a4a;
	--tertiary: #171f38;
	--gray: #808dad;
	--white: #ffffff;
	--secondary-02: rgba(235, 74, 74, 0.1);
	--tertiary-02: rgba(23, 31, 56, 0.5)
}

.section {
	position: relative;
	padding: 5rem 0;
	border-top: 2px solid var(--tertiary-02)
}

@media (max-width: 767.98px) {
	.section {
		padding: 3rem 0
	}
}

.heading-title {
	margin-bottom: 2rem
}

@media (max-width: 767.98px) {
	.heading-title {
		margin-bottom: 1rem
	}
}

.heading-title h3 {
	position: relative;
	padding-left: 35px
}

.heading-title h3::before {
	position: absolute;
	content: "";
	background: var(--secondary);
	height: 2px;
	width: 30px;
	left: 0;
	top: 50%
}

.heading-title h2 {
	color: var(--white);
	margin-top: 10px
}

@-webkit-keyframes navbar-animation {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%)
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@keyframes navbar-animation {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%)
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@-webkit-keyframes dropdown-animation {
	0% {
		-webkit-transform: scaleY(0);
		transform: scaleY(0)
	}

	50% {
		-webkit-transform: scaleY(1.1);
		transform: scaleY(1.1)
	}

	100% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1)
	}
}

@keyframes dropdown-animation {
	0% {
		-webkit-transform: scaleY(0);
		transform: scaleY(0)
	}

	50% {
		-webkit-transform: scaleY(1.1);
		transform: scaleY(1.1)
	}

	100% {
		-webkit-transform: scaleY(1);
		transform: scaleY(1)
	}
}

@-webkit-keyframes img-up-down-animation {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	50% {
		-webkit-transform: translateY(25px);
		transform: translateY(25px)
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@keyframes img-up-down-animation {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	50% {
		-webkit-transform: translateY(25px);
		transform: translateY(25px)
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@-webkit-keyframes img-right-left-animation {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}

	50% {
		-webkit-transform: translateX(25px);
		transform: translateX(25px)
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@keyframes img-right-left-animation {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}

	50% {
		-webkit-transform: translateX(25px);
		transform: translateX(25px)
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

#preloader {
	background: var(--tertiary);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.scroll-up {
	position: fixed;
	right: 1rem;
	bottom: 3rem;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	-webkit-box-shadow: inset 0 0 0 2px var(--tertiary);
	box-shadow: inset 0 0 0 2px var(--tertiary);
	z-index: 500;
	opacity: 0;
	border-radius: 50%;
	visibility: hidden;
	-webkit-transform: translateY(35px);
	transform: translateY(35px);
	-webkit-transition: all .3s linear;
	transition: all .3s linear
}

.scroll-up.active-progress {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateY(0);
	transform: translateY(0)
}

.scroll-up::after {
	position: absolute;
	content: "\f134";
	font-family: "uicons-regular-rounded";
	text-align: center;
	line-height: 46px;
	font-size: 20px;
	color: var(--secondary);
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 1;
	-webkit-transition: all .3s linear;
	transition: all .3s linear
}

.scroll-up svg path {
	fill: var(--tertiary)
}

.scroll-up svg.progress-circle path {
	stroke: var(--secondary);
	stroke-width: 4;
	-webkit-transition: all .3s linear;
	transition: all .3s linear
}

.shape .shape-01,
.shape .shape-02,
.shape .shape-03,
.shape .shape-04,
.shape .shape-05,
.shape .shape-06,
.shape .shape-07,
.shape .shape-08,
.shape .shape-09,
.shape .shape-10 {
	position: absolute;
	z-index: -1
}

@media all and (max-width: 992px) {

	.shape .shape-01,
	.shape .shape-02,
	.shape .shape-03,
	.shape .shape-04,
	.shape .shape-05,
	.shape .shape-06,
	.shape .shape-07,
	.shape .shape-08,
	.shape .shape-09,
	.shape .shape-10 {
		display: none
	}
}

.breadcrumb h2 {
	color: var(--white);
	display: block;
	width: 100%;
	margin-bottom: 20px
}

.breadcrumb ul li {
	margin-right: 10px;
	color: var(--secondary)
}

.breadcrumb ul li a {
	color: var(--secondary);
	position: relative
}

.breadcrumb ul li a:hover {
	color: var(--white)
}

.breadcrumb ul li a:first-child {
	padding-left: 35px
}

.breadcrumb ul li a:first-child::before {
	position: absolute;
	content: "";
	background: var(--secondary);
	height: 2px;
	width: 30px;
	left: 0;
	top: 50%
}

hr.hr-01 {
	margin: 1.5rem 0;
	background: var(--gray);
	opacity: .1
}

@font-face {
	font-family: "Quicksand-Bold";
	src: url("../fonts/Quicksand-Bold.ttf") format("truetype")
}

@font-face {
	font-family: "Quicksand-Medium";
	src: url("../fonts/Quicksand-Medium.ttf") format("truetype")
}

@font-face {
	font-family: "Quicksand-Regular";
	src: url("../fonts/Quicksand-Regular.ttf") format("truetype")
}

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0
}

html {
	scroll-behavior: smooth
}

a {
	text-decoration: none;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

ul {
	list-style: none
}

img {
	max-width: 100%;
	height: auto
}

ul,
li,
p,
h1,
h2,
h3,
h4,
h5 {
	margin: 0;
	padding: 0
}

p,
h3,
h4 {
	font-weight: 500
}

h1,
h2 {
	font-weight: 700
}

h1 {
	font-size: 85px;
	line-height: 1em
}

h2 {
	font-size: 34px;
	line-height: 1.5em
}

h3 {
	color: var(--secondary);
	font-size: 24px;
	line-height: 1.5em
}

h4 {
	color: var(--white);
	font-size: 19px;
	line-height: 1.4em
}

p {
	font-size: 17px;
	line-height: 1.7em;
	font-family: "Quicksand-Medium", sans-serif
}

.notCursor {
	cursor: none
}

.notCursor * {
	cursor: none
}

#kursorWrapper {
	position: fixed;
	z-index: 99999;
	overflow: hidden;
	pointer-events: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden
}

div[class*='kursor'] {
	position: fixed;
	pointer-events: none;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 10000
}

div[class*='kursor'].kursor--hidden {
	opacity: 0;
	width: 0px;
	height: 0px
}

div[class*='kursor'].kursor--1 {
	left: 0px;
	top: 0px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 2px solid rgba(var(--k-color), 1);
	-webkit-transition: all 0.2s ease, top 0.18s ease-out, left 0.18s ease-out;
	transition: all 0.2s ease, top 0.18s ease-out, left 0.18s ease-out
}

div[class*='kursor'].kursor--1+.kursorChild {
	display: block;
	width: 4px;
	height: 4px;
	background: rgba(var(--k-color), 1);
	border-radius: 50%;
	-webkit-transition: all 0.2s ease, top 0s ease-out, left 0s ease-out;
	transition: all 0.2s ease, top 0s ease-out, left 0s ease-out
}

div[class*='kursor'].kursor--1.--hover {
	width: 40px;
	height: 40px;
	border: 2px solid rgba(var(--k-color), 0);
	background: rgba(var(--k-color), 0.1)
}

div[class*='kursor'].kursor--1.--hover+.kursorChild {
	background: rgba(var(--k-color), 0.3)
}

div[class*='kursor'].kursor--1.kursor--down {
	width: 20px;
	height: 20px
}

div[class*='kursor'].kursor--1.kursor--down+.kursorChild:after {
	width: 40px !important;
	height: 40px !important;
	opacity: 0;
	border: 1px solid;
	border-radius: 50%;
	border-color: rgba(var(--k-color), 1);
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease
}

div[class*='kursor'].kursor--2 {
	left: 0px;
	top: 0px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(var(--k-color), 1);
	-webkit-transition: all 0.2s ease, top 0.1s ease-out, left 0.1s ease-out;
	transition: all 0.2s ease, top 0.1s ease-out, left 0.1s ease-out
}

div[class*='kursor'].kursor--2+.kursorChild {
	display: block;
	width: 4px;
	height: 4px;
	background: rgba(var(--k-color), 1);
	border-radius: 50%;
	-webkit-transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out;
	transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out
}

div[class*='kursor'].kursor--2.--hover {
	width: 40px;
	height: 40px;
	background: rgba(var(--k-color), 0.1)
}

div[class*='kursor'].kursor--2.--hover+.kursorChild {
	background: rgba(var(--k-color), 0.3)
}

div[class*='kursor'].kursor--2.kursor--down {
	width: 10px;
	height: 10px
}

div[class*='kursor'].kursor--2.kursor--down+.kursorChild:after {
	width: 40px !important;
	height: 40px !important;
	opacity: 0;
	border: 1px solid;
	border-radius: 50%;
	border-color: rgba(var(--k-color), 1);
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease
}

div[class*='kursor'].kursor--3 {
	left: 0px;
	top: 0px;
	width: 20px;
	height: 20px;
	border: 1px solid rgba(var(--k-color), 1);
	-webkit-transition: all 0.2s ease, top 0.05s ease-out, left 0.05s ease-out;
	transition: all 0.2s ease, top 0.05s ease-out, left 0.05s ease-out
}

div[class*='kursor'].kursor--3+.kursorChild {
	display: block;
	width: 4px;
	height: 4px;
	background: rgba(var(--k-color), 1);
	-webkit-transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out;
	transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out
}

div[class*='kursor'].kursor--3.--hover {
	width: 40px;
	height: 40px;
	background: rgba(var(--k-color), 0.1);
	border: 1px solid rgba(var(--k-color), 0)
}

div[class*='kursor'].kursor--3.--hover+.kursorChild {
	background: rgba(var(--k-color), 0.3)
}

div[class*='kursor'].kursor--3.kursor--down {
	width: 5px;
	height: 5px;
	border: 1px solid rgba(var(--k-color), 0)
}

div[class*='kursor'].kursor--3.kursor--down+.kursorChild {
	width: 10px;
	height: 10px
}

div[class*='kursor'].kursor--3.kursor--down+.kursorChild:after {
	width: 40px !important;
	height: 40px !important;
	opacity: 0;
	border: 1px solid;
	border-color: rgba(var(--k-color), 1);
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease
}

div[class*='kursor'].kursor--4 {
	left: 0px;
	top: 0px;
	width: 50px;
	height: 50px;
	border: 1px solid rgba(var(--k-color), 0.3);
	border-radius: 50%;
	-webkit-transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out;
	transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out
}

div[class*='kursor'].kursor--4+.kursorChild {
	display: block;
	width: 6px;
	height: 6px;
	background: rgba(var(--k-color), 1);
	border-radius: 50%;
	-webkit-transition: all 0.2s ease, top 0.03s ease-out, left 0.03s ease-out;
	transition: all 0.2s ease, top 0.03s ease-out, left 0.03s ease-out
}

div[class*='kursor'].kursor--4.--hover {
	width: 30px;
	height: 30px;
	background: rgba(var(--k-color), 0.1);
	border: 3px solid rgba(var(--k-color), 0)
}

div[class*='kursor'].kursor--4.--hover+.kursorChild {
	width: 25px;
	height: 25px;
	background: rgba(var(--k-color), 0.1)
}

div[class*='kursor'].kursor--4.kursor--down {
	width: 5px;
	height: 5px
}

div[class*='kursor'].kursor--4.kursor--down+.kursorChild {
	width: 10px;
	height: 10px
}

div[class*='kursor'].kursor--4.kursor--down+.kursorChild:after {
	width: 40px !important;
	height: 40px !important;
	opacity: 0;
	border-radius: 50%;
	border: 1px solid;
	border-color: rgba(var(--k-color), 1);
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease
}

div[class*='kursor'].kursor--5 {
	left: 0px;
	top: 0px;
	width: 10px;
	height: 10px;
	border: 1px solid rgba(var(--k-color), 0.5);
	border-radius: 50%;
	-webkit-transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out;
	transition: all 0.2s ease, top 0.2s ease-out, left 0.2s ease-out
}

div[class*='kursor'].kursor--5.--hover {
	width: 26px;
	height: 26px;
	background: rgba(var(--k-color), 0.1);
	border: 3px solid rgba(var(--k-color), 0)
}

div[class*='kursor'].kursor--5.kursor--down {
	width: 15px;
	height: 15px
}

div[class*='kursorChild'] {
	position: fixed;
	pointer-events: none;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: none;
	overflow: hidden
}

div[class*='kursorChild'].kursorChild[class*='--hidden'] {
	opacity: 0;
	width: 0px;
	height: 0px
}

div[class*='kursorChild'].kursorChild:after {
	content: '';
	pointer-events: none;
	width: 0px;
	height: 0px;
	position: absolute;
	left: 50%;
	top: 50%;
	opacity: 1;
	border: 0px solid rgba(var(--k-color), 0.5);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

.kursor--absolute {
	position: absolute !important;
	z-index: 2000
}

@media screen and (max-width: 768px) {
	.notCursor * {
		cursor: auto
	}

	div[class*='kursor'] {
		display: none !important
	}

	div[class*='kursorChild'] {
		display: none !important
	}
}

@media screen and (max-width: 812px) and (max-height: 430px) and (orientation: landscape) {
	div[class*='kursor'] {
		display: none !important
	}

	div[class*='kursorChild'] {
		display: none !important
	}

	.notCursor * {
		cursor: auto
	}
}

.btn {
	color: var(--secondary);
	border: 2px solid transparent;
	padding: 15px 25px;
	text-decoration: none;
	border-radius: .5rem;
	min-width: 160px;
	font-size: 17px;
	font-weight: 500;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

@media (max-width: 767.98px) {
	.btn {
		padding: 10px 20px;
		min-width: auto
	}
}

.btn:hover {
	color: var(--quaternary);
	-webkit-transform: scale(1.03) translateY(-5px);
	transform: scale(1.03) translateY(-5px)
}

.btn-generic {
	color: var(--secondary);
	border: 1px solid var(--secondary);
	background: var(--tertiary)
}

.btn-generic:hover {
	color: var(--gray);
	border: 1px solid var(--gray)
}

.btn-link {
	text-decoration: underline;
	text-decoration-thickness: 2px
}

.btn-link:hover {
	color: var(--gray)
}

.pulse {
	width: 65px;
	height: 65px;
	background: rgba(235, 74, 74, 0.3);
	border-radius: 50%;
	position: relative;
	-webkit-animation: pulsar 1.5s infinite linear;
	animation: pulsar 1.5s infinite linear
}

@-webkit-keyframes pulsar {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(235, 74, 74, 0.1), 0 0 0 2px rgba(235, 74, 74, 0.1), 0 0 0 20px rgba(235, 74, 74, 0.1);
		box-shadow: 0 0 0 0 rgba(235, 74, 74, 0.1), 0 0 0 2px rgba(235, 74, 74, 0.1), 0 0 0 20px rgba(235, 74, 74, 0.1)
	}

	100% {
		-webkit-box-shadow: 0 0 0 2px rgba(235, 74, 74, 0.1), 0 0 0 20px rgba(235, 74, 74, 0.1), 0 0 0 40px rgba(255, 255, 255, 0);
		box-shadow: 0 0 0 2px rgba(235, 74, 74, 0.1), 0 0 0 20px rgba(235, 74, 74, 0.1), 0 0 0 40px rgba(255, 255, 255, 0)
	}
}

@keyframes pulsar {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(235, 74, 74, 0.1), 0 0 0 2px rgba(235, 74, 74, 0.1), 0 0 0 20px rgba(235, 74, 74, 0.1);
		box-shadow: 0 0 0 0 rgba(235, 74, 74, 0.1), 0 0 0 2px rgba(235, 74, 74, 0.1), 0 0 0 20px rgba(235, 74, 74, 0.1)
	}

	100% {
		-webkit-box-shadow: 0 0 0 2px rgba(235, 74, 74, 0.1), 0 0 0 20px rgba(235, 74, 74, 0.1), 0 0 0 40px rgba(255, 255, 255, 0);
		box-shadow: 0 0 0 2px rgba(235, 74, 74, 0.1), 0 0 0 20px rgba(235, 74, 74, 0.1), 0 0 0 40px rgba(255, 255, 255, 0)
	}
}

header.has-style-01 {
	padding: 10rem 0 5rem;
	position: relative;
	overflow: hidden
}

@media (max-width: 767.98px) {
	header.has-style-01 {
		text-align: left;
		padding: 8rem 0 3rem
	}
}

header.has-style-01 .shape-01 {
	left: 25%;
	top: 150px;
	width: auto
}

header.has-style-01 .shape-02 {
	left: 50%;
	top: 150px;
	width: auto;
	opacity: .5
}

header.has-style-01 .shape-10 {
	right: 8%;
	top: 150px;
	width: 100px;
	z-index: 50
}

header.has-style-01 .shape-07 {
	left: 10%;
	bottom: 50px;
	width: auto
}

header.has-style-01 .shape-03 {
	left: 55%;
	top: 400px;
	width: auto
}

header.has-style-01 .hero-content {
	position: relative;
	margin-bottom: 40px
}

header.has-style-01 .hero-content h3.title-welcome {
	color: var(--secondary);
	position: relative;
	padding-left: 45px
}

header.has-style-01 .hero-content h3.title-welcome::before {
	position: absolute;
	content: "";
	background: var(--secondary);
	height: 3px;
	width: 40px;
	left: 0;
	top: 50%
}

header.has-style-01 .hero-content h1 {
	color: var(--white);
	margin: 20px 0
}

header.has-style-01 .hero-content ul.link {
	margin: 40px 0
}

@media (max-width: 767.98px) {
	header.has-style-01 .hero-content h1 {
		font-size: 45px;
		margin: 1rem auto
	}

	header.has-style-01 .hero-content ul.link {
		margin: 1rem auto
	}
}

header.has-style-01 .hero-thumb {
	position: relative;
	text-align: center
}

header.has-style-01 .hero-thumb .skills,
header.has-style-01 .hero-thumb .experience,
header.has-style-01 .hero-thumb .play {
	position: absolute
}

@media (max-width: 767.98px) {

	header.has-style-01 .hero-thumb .skills,
	header.has-style-01 .hero-thumb .experience {
		display: none
	}
}

header.has-style-01 .hero-thumb .skills {
	top: 40%;
	left: -5.5rem;
	width: 150px;
	border-radius: 15px;
	-webkit-animation: img-up-down-animation 3s infinite;
	animation: img-up-down-animation 3s infinite;
	-webkit-box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1);
	box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1)
}

header.has-style-01 .hero-thumb .experience {
	bottom: -3rem;
	right: -1rem;
	width: 150px;
	border-radius: 15px;
	-webkit-animation: img-right-left-animation 3s infinite;
	animation: img-right-left-animation 3s infinite;
	-webkit-box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1);
	box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1)
}

header.has-style-01 .hero-thumb .play {
	color: var(--secondary);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 65px;
	width: 65px;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-radius: 50%;
	bottom: 0px;
	left: 1rem
}

@media (max-width: 767.98px) {
	header.has-style-01 .hero-thumb .play {
		bottom: 0%;
		left: 50%
	}
}

header.has-style-01 .hero-thumb .thumb {
	-webkit-box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1);
	box-shadow: -15px -15px 25px rgba(0, 0, 0, 0.1);
	border-radius: 5rem
}

header.has-style-01 ul.social {
	position: absolute;
	right: -8rem;
	top: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg)
}

header.has-style-01 ul.social li {
	display: inline-block;
	padding: 0 .5rem
}

@media (max-width: 767.98px) {
	header.has-style-01 ul.social li {
		padding: 0 .1rem
	}
}

header.has-style-01 ul.social li a {
	color: var(--gray);
	position: relative;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

header.has-style-01 ul.social li a:hover {
	color: var(--secondary)
}

@media (max-width: 767.98px) {
	header.has-style-01 ul.social {
		position: static;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		margin-top: 2rem;
		text-align: center
	}
}

header.has-style-02 {
	padding: 10rem 0 4rem;
	position: relative;
	overflow: hidden
}

header.has-style-02 .shape-10 {
	right: 0;
	bottom: 0;
	width: 300px
}

header.has-style-02 .shape-03 {
	left: 5rem;
	top: 40%;
	width: 80px
}

@media (max-width: 767.98px) {
	header.has-style-02 {
		text-align: left;
		padding: 8rem 0 3rem
	}
}

.navbar {
	background: var(--primary) !important;
	border-bottom: 2px solid var(--tertiary);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 9999;
	height: 90px;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

.navbar.fixed-top {
	position: fixed;
	-webkit-animation: navbar-animation 0.6s;
	animation: navbar-animation 0.6s
}

.navbar .navbar-nav li a {
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

.navbar .navbar-nav li a.active,
.navbar .navbar-nav li a:hover {
	color: var(--secondary) !important
}

@media all and (min-width: 992px) {
	.navbar {
		padding-top: 0 !important;
		padding-bottom: 0 !important
	}

	.navbar .navbar-nav .nav-link {
		padding: 2rem 1rem !important;
		position: relative
	}

	.navbar .navbar-nav .nav-link::before {
		position: absolute;
		content: "";
		bottom: 1.5rem;
		left: 1rem;
		right: 1rem;
		height: 2px;
		width: 0;
		background: var(--secondary);
		-webkit-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out
	}

	.navbar .navbar-nav .nav-link.active::before {
		width: 25%
	}

	.navbar .navbar-nav .nav-link:hover::before {
		width: 35%
	}

	.navbar .navbar-nav .nav-link.active:hover::before {
		width: 25%
	}

	.navbar .nav-item .dropdown-menu {
		background: var(--tertiary-02);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border: 1px solid var(--tertiary);
		-webkit-box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
		box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
		display: block;
		visibility: hidden;
		opacity: 0;
		margin: 0;
		min-width: 200px;
		padding: 0;
		border: 2px solid var(--tertiary);
		border-radius: 0 0 15px 15px
	}

	.navbar .nav-item:hover .dropdown-menu {
		opacity: 1;
		visibility: visible;
		overflow: hidden;
		-webkit-animation: dropdown-animation 0.5s;
		animation: dropdown-animation 0.5s;
		-webkit-transform-origin: top;
		transform-origin: top
	}

	.navbar .nav-item:hover .dropdown-menu .dropdown-item {
		color: var(--gray);
		padding: .8rem 1rem;
		-webkit-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out
	}

	.navbar .nav-item:hover .dropdown-menu .dropdown-item:hover {
		color: var(--gray);
		padding-left: 1.5rem;
		background: var(--tertiary)
	}

	.navbar .nav-item:hover .dropdown-menu .dropdown-item:focus {
		background: var(--tertiary);
		color: var(--secondary)
	}

	.navbar .dropdown-toggle::after {
		-webkit-transform: translateY(5px);
		transform: translateY(5px)
	}
}

@media all and (max-width: 992px) {
	.navbar {
		padding-top: 1rem !important;
		padding-bottom: 1rem !important
	}

	.navbar .navbar-toggler {
		-webkit-box-shadow: none;
		box-shadow: none;
		border: none;
		width: 35px;
		height: 35px;
		z-index: 30;
		overflow: hidden;
		display: block;
		border-radius: .3rem;
		background-color: var(--tertiary);
		cursor: pointer;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out
	}

	.navbar .navbar-toggler span,
	.navbar .navbar-toggler::before,
	.navbar .navbar-toggler::after {
		content: "";
		position: absolute;
		left: 10px;
		width: 15px;
		height: 2px;
		display: block;
		background-color: var(--white);
		opacity: 1;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)
	}

	.navbar .navbar-toggler::before {
		top: 10px
	}

	.navbar .navbar-toggler span {
		top: 17px
	}

	.navbar .navbar-toggler::after {
		top: 24px
	}

	.navbar .navbar-toggler.is-active::before {
		top: 18px;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg)
	}

	.navbar .navbar-toggler.is-active span {
		opacity: 0;
		left: -30px
	}

	.navbar .navbar-toggler.is-active::after {
		top: 18px;
		-webkit-transform: rotate(-135deg);
		transform: rotate(-135deg)
	}

	.navbar .navbar-collapse {
		background: var(--tertiary-02);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border: 1px solid var(--tertiary);
		-webkit-box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
		box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
		background: var(--primary);
		border-right: 2px solid var(--tertiary);
		position: absolute;
		visibility: hidden;
		display: block;
		top: 0;
		bottom: 0;
		left: 0;
		opacity: 0;
		min-width: 300px;
		height: 100vh !important;
		z-index: 9999;
		padding: 3rem 2rem 1rem;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		-webkit-transition: .2s ease-in-out;
		transition: .2s ease-in-out
	}

	.navbar .navbar-collapse.show {
		visibility: visible;
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}

	.navbar .nav-item .dropdown-menu {
		background: transparent;
		border: none
	}

	.navbar .nav-item .dropdown-menu .dropdown-item {
		padding: 0.25rem 0;
		color: var(--gray)
	}

	.navbar .nav-item .dropdown-menu .dropdown-item:hover {
		background: transparent;
		color: var(--secondary)
	}

	.navbar .dropdown-toggle::after {
		position: absolute;
		right: 0;
		-webkit-transform: translateY(5px);
		transform: translateY(5px)
	}
}

.what-do.has-style-01 .shape-03 {
	left: 38%;
	top: -50px;
	width: 100px
}

.what-do.has-style-01 .shape-04 {
	left: 33%;
	top: 80px;
	width: 50px
}

.what-do.has-style-01 .shape-05 {
	right: 0;
	top: 0px;
	width: auto
}

.what-do.has-style-01 .shape-06 {
	right: 0;
	top: 100px;
	width: auto
}

.what-do.has-style-01 .box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	background: var(--tertiary);
	border: 1px solid transparent;
	border-radius: 15px;
	padding: 1.5rem;
	margin: 1rem 0;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

.what-do.has-style-01 .box:hover {
	cursor: pointer;
	border: 1px solid var(--primary);
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
	-webkit-box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
	box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1)
}

.what-do.has-style-01 .box .icon {
	margin-right: 15px;
	position: relative;
	padding: 1rem 1rem 1rem 0
}

.what-do.has-style-01 .box .icon i {
	color: var(--secondary);
	font-size: 45px;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

.what-do.has-style-01 .box .icon::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	background: var(--secondary);
	opacity: .1;
	height: 45px;
	width: 45px;
	border-radius: 50%;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

.what-do.has-style-01 .box:hover i {
	-webkit-transform: translateY(-15px);
	transform: translateY(-15px)
}

.what-do.has-style-01 .box:hover .icon::before {
	-webkit-transform: translateY(15px);
	transform: translateY(15px);
	background: var(--gray)
}

.about-me.has-style-01 .shape-04 {
	left: 30%;
	top: 100px;
	width: auto
}

.about-me.has-style-01 .shape-07 {
	left: 30%;
	bottom: 50px;
	width: 100px
}

.about-me.has-style-01 ul.info {
	margin-bottom: 20px
}

.about-me.has-style-01 ul.info li {
	color: var(--white);
	margin-bottom: 20px
}

.about-me.has-style-01 ul.info li i {
	color: var(--secondary);
	position: relative;
	top: 5px;
	margin-right: .5rem
}

.portfolio.has-style-01 .shape-03 {
	left: 50%;
	top: -50px;
	width: 100px
}

.portfolio.has-style-01 .shape-07 {
	left: 25%;
	bottom: 50px;
	width: 100px
}

.portfolio.has-style-01 .controls {
	margin-bottom: 1rem;
	text-align: right
}

@media (max-width: 767.98px) {
	.portfolio.has-style-01 .controls {
		margin-bottom: 2rem;
		text-align: center
	}
}

.portfolio.has-style-01 .controls button {
	background: transparent;
	border: none;
	color: var(--gray);
	margin-right: 1.5rem;
	position: relative;
	text-transform: capitalize;
	font-weight: 500;
	font-size: 17px;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

@media (max-width: 767.98px) {
	.portfolio.has-style-01 .controls button {
		display: block;
		margin-bottom: 20px
	}

	.portfolio.has-style-01 .controls button:last-child {
		margin: 0
	}
}

.portfolio.has-style-01 .controls button:last-child {
	margin-right: 0
}

.portfolio.has-style-01 .controls button:hover {
	color: var(--secondary)
}

.portfolio.has-style-01 .controls button.mixitup-control-active {
	color: var(--secondary)
}

.portfolio.has-style-01 .controls button.mixitup-control-active::before {
	position: absolute;
	content: "";
	bottom: -.5rem;
	left: 0;
	height: 2px;
	width: 15px;
	background: var(--secondary)
}

.portfolio.has-style-01 .item-card {
	background: var(--tertiary);
	border-radius: 15px;
	padding: 1.5rem;
	margin-bottom: 2rem;
	border: 2px solid transparent;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

.portfolio.has-style-01 .item-card:hover {
	border: 2px solid var(--gray);
	-webkit-box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
	box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3)
}

.portfolio.has-style-01 .item-card:hover .title-link {
	color: var(--white)
}

.portfolio.has-style-01 .item-card .title-link {
	color: var(--secondary);
	margin-bottom: 10px;
	display: block;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

.portfolio.has-style-01 .item-card .tag-link {
	margin: 20px 0;
	display: block
}

.portfolio.has-style-01 .item-card .tag-link li {
	display: inline-block;
	margin: 5px
}

.portfolio.has-style-01 .item-card .tag-link li a {
	background: var(--primary);
	color: var(--gray);
	padding: .5rem 1rem;
	display: inline-block;
	border-radius: .5rem;
	font-size: 16px
}

.portfolio.has-style-01 .item-card .tag-link li a:hover {
	color: var(--white)
}

.portfolio.has-style-01 .item-card .item-image {
	border-radius: 1rem;
	overflow: hidden;
	position: relative
}

.portfolio.has-style-01 .item-card .item-image .link-image {
	position: absolute;
	bottom: -50px;
	right: -50px;
	background: var(--secondary);
	color: var(--white);
	border-radius: .3rem 0 0 0;
	font-size: 18px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 45px;
	width: 45px;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

.portfolio.has-style-01 .item-card .item-image img {
	width: 100%;
	height: 100%
}

.portfolio.has-style-01 .item-card:hover .link-image {
	bottom: 0;
	right: 0
}

.portfolio.has-style-01 .item-card:hover .link-image:hover {
	background: var(--tertiary)
}

@media (max-width: 767.98px) {
	.testimonials.has-style-01 {
		text-align: center
	}

	.testimonials.has-style-01 .heading-title {
		text-align: left
	}
}

.testimonials.has-style-01 .shape-03 {
	left: 38%;
	top: -50px;
	width: 100px
}

.testimonials.has-style-01 .shape-04 {
	right: 20%;
	top: 50px;
	width: auto
}

.testimonials.has-style-01 .shape-08 {
	right: 20%;
	top: 50px;
	width: auto
}

@media (max-width: 767.98px) {
	.testimonials.has-style-01 .testimonials-img {
		margin-bottom: 2rem
	}
}

.testimonials.has-style-01 .swiper .swiper-slide {
	cursor: pointer;
	margin-bottom: 40px;
	text-align: left
}

.testimonials.has-style-01 .swiper .swiper-slide .heading {
	width: 100%;
	margin-bottom: 20px;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: end
}

@media (min-width: 767.98px) {
	.testimonials.has-style-01 .swiper .swiper-slide .heading {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex
	}
}

.testimonials.has-style-01 .swiper .swiper-slide .heading .information img {
	width: 80px;
	height: 80px
}

.testimonials.has-style-01 .swiper .swiper-slide .heading .information .info {
	margin-left: 1rem
}

.testimonials.has-style-01 .swiper .swiper-slide .heading .information .info h3 {
	color: var(--gray)
}

.testimonials.has-style-01 .swiper .swiper-slide .heading .information .info h4 {
	color: var(--secondary)
}

.testimonials.has-style-01 .swiper .swiper-slide .heading ul.stars {
	margin-top: 20px
}

.testimonials.has-style-01 .swiper .swiper-slide .heading ul.stars li {
	color: var(--gray);
	margin-right: 5px;
	font-size: 15px;
	opacity: .3
}

.testimonials.has-style-01 .swiper .swiper-slide .heading ul.stars li.perfect {
	opacity: 1;
	color: var(--secondary)
}

.testimonials.has-style-01 .arrow {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 66;
	height: 15px
}

.testimonials.has-style-01 .arrow i {
	margin-left: 10px;
	font-size: 18px;
	color: var(--white);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

.testimonials.has-style-01 .arrow i:hover {
	color: var(--secondary)
}

.testimonials.has-style-01 .swiper-horizontal>.swiper-scrollbar {
	position: absolute;
	left: 0;
	bottom: 3px;
	width: 80%
}

.testimonials.has-style-01 .swiper-scrollbar {
	background: var(--tertiary);
	cursor: pointer
}

.testimonials.has-style-01 .swiper-scrollbar-drag {
	background: var(--secondary)
}

.skils.has-style-01 .shape-03 {
	right: 10%;
	top: -40px;
	width: 80px
}

.skils.has-style-01 .shape-06 {
	right: 0;
	bottom: 50px;
	width: auto
}

.skils.has-style-01 .shape-08 {
	left: 0;
	top: 50px;
	width: auto
}

.skils.has-style-01 .progress {
	width: 180px;
	height: 180px;
	text-align: center;
	background: var(--tertiary);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	border-radius: 50%;
	position: relative;
	margin: 30px auto;
	overflow: visible
}

.skils.has-style-01 .progress::before {
	position: absolute;
	content: "";
	top: -10px;
	left: -10px;
	border: 2px dashed var(--secondary);
	height: 200px;
	width: 200px;
	border-radius: 50%;
	opacity: .4
}

.skils.has-style-01 .progress>span {
	width: 50%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	z-index: 1
}

.skils.has-style-01 .progress .progress-left {
	left: 0
}

.skils.has-style-01 .progress .progress-bar {
	width: 100%;
	height: 100%;
	background: none;
	position: absolute;
	top: 0;
	border: 5px solid var(--secondary)
}

.skils.has-style-01 .progress .progress-left .progress-bar {
	left: 100%;
	border-top-right-radius: 90px;
	border-bottom-right-radius: 90px;
	border-left: 0;
	-webkit-transform-origin: center left;
	transform-origin: center left
}

.skils.has-style-01 .progress .progress-right {
	right: 0
}

.skils.has-style-01 .progress .progress-right .progress-bar {
	left: -100%;
	border-top-left-radius: 90px;
	border-bottom-left-radius: 90px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right
}

.skils.has-style-01 .progress .progress-value {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}

.skils.has-style-01 .progress .progress-value h2 {
	color: var(--secondary)
}

.skils.has-style-01 .progress .progress-value h3 {
	color: var(--white)
}

.skils.has-style-01 .progress[data-percentage="1.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-1 1s linear forwards;
	animation: loading-1 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="1.66667"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="3.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-2 1s linear forwards;
	animation: loading-2 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="3.33333"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="5"] .progress-right .progress-bar {
	-webkit-animation: loading-3 1s linear forwards;
	animation: loading-3 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="5"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="6.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-4 1s linear forwards;
	animation: loading-4 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="6.66667"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="8.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-5 1s linear forwards;
	animation: loading-5 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="8.33333"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="10"] .progress-right .progress-bar {
	-webkit-animation: loading-6 1s linear forwards;
	animation: loading-6 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="10"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="11.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-7 1s linear forwards;
	animation: loading-7 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="11.66667"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="13.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-8 1s linear forwards;
	animation: loading-8 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="13.33333"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="15"] .progress-right .progress-bar {
	-webkit-animation: loading-9 1s linear forwards;
	animation: loading-9 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="15"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="16.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-10 1s linear forwards;
	animation: loading-10 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="16.66667"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="18.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-11 1s linear forwards;
	animation: loading-11 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="18.33333"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="20"] .progress-right .progress-bar {
	-webkit-animation: loading-12 1s linear forwards;
	animation: loading-12 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="20"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="21.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-13 1s linear forwards;
	animation: loading-13 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="21.66667"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="23.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-14 1s linear forwards;
	animation: loading-14 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="23.33333"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="25"] .progress-right .progress-bar {
	-webkit-animation: loading-15 1s linear forwards;
	animation: loading-15 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="25"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="26.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-16 1s linear forwards;
	animation: loading-16 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="26.66667"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="28.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-17 1s linear forwards;
	animation: loading-17 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="28.33333"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="30"] .progress-right .progress-bar {
	-webkit-animation: loading-18 1s linear forwards;
	animation: loading-18 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="30"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="31.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-19 1s linear forwards;
	animation: loading-19 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="31.66667"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="33.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-20 1s linear forwards;
	animation: loading-20 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="33.33333"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="35"] .progress-right .progress-bar {
	-webkit-animation: loading-21 1s linear forwards;
	animation: loading-21 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="35"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="36.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-22 1s linear forwards;
	animation: loading-22 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="36.66667"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="38.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-23 1s linear forwards;
	animation: loading-23 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="38.33333"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="40"] .progress-right .progress-bar {
	-webkit-animation: loading-24 1s linear forwards;
	animation: loading-24 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="40"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="41.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-25 1s linear forwards;
	animation: loading-25 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="41.66667"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="43.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-26 1s linear forwards;
	animation: loading-26 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="43.33333"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="45"] .progress-right .progress-bar {
	-webkit-animation: loading-27 1s linear forwards;
	animation: loading-27 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="45"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="46.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-28 1s linear forwards;
	animation: loading-28 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="46.66667"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="48.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-29 1s linear forwards;
	animation: loading-29 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="48.33333"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="50"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="50"] .progress-left .progress-bar {
	-webkit-animation: 0;
	animation: 0
}

.skils.has-style-01 .progress[data-percentage="51.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="51.66667"] .progress-left .progress-bar {
	-webkit-animation: loading-1 1s linear forwards 1s;
	animation: loading-1 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="53.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="53.33333"] .progress-left .progress-bar {
	-webkit-animation: loading-2 1s linear forwards 1s;
	animation: loading-2 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="55"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="55"] .progress-left .progress-bar {
	-webkit-animation: loading-3 1s linear forwards 1s;
	animation: loading-3 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="56.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="56.66667"] .progress-left .progress-bar {
	-webkit-animation: loading-4 1s linear forwards 1s;
	animation: loading-4 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="58.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="58.33333"] .progress-left .progress-bar {
	-webkit-animation: loading-5 1s linear forwards 1s;
	animation: loading-5 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="60"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="60"] .progress-left .progress-bar {
	-webkit-animation: loading-6 1s linear forwards 1s;
	animation: loading-6 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="61.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="61.66667"] .progress-left .progress-bar {
	-webkit-animation: loading-7 1s linear forwards 1s;
	animation: loading-7 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="63.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="63.33333"] .progress-left .progress-bar {
	-webkit-animation: loading-8 1s linear forwards 1s;
	animation: loading-8 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="65"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="65"] .progress-left .progress-bar {
	-webkit-animation: loading-9 1s linear forwards 1s;
	animation: loading-9 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="66.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="66.66667"] .progress-left .progress-bar {
	-webkit-animation: loading-10 1s linear forwards 1s;
	animation: loading-10 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="68.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="68.33333"] .progress-left .progress-bar {
	-webkit-animation: loading-11 1s linear forwards 1s;
	animation: loading-11 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="70"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="70"] .progress-left .progress-bar {
	-webkit-animation: loading-12 1s linear forwards 1s;
	animation: loading-12 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="71.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="71.66667"] .progress-left .progress-bar {
	-webkit-animation: loading-13 1s linear forwards 1s;
	animation: loading-13 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="73.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="73.33333"] .progress-left .progress-bar {
	-webkit-animation: loading-14 1s linear forwards 1s;
	animation: loading-14 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="75"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="75"] .progress-left .progress-bar {
	-webkit-animation: loading-15 1s linear forwards 1s;
	animation: loading-15 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="76.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="76.66667"] .progress-left .progress-bar {
	-webkit-animation: loading-16 1s linear forwards 1s;
	animation: loading-16 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="78.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="78.33333"] .progress-left .progress-bar {
	-webkit-animation: loading-17 1s linear forwards 1s;
	animation: loading-17 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="80"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="80"] .progress-left .progress-bar {
	-webkit-animation: loading-18 1s linear forwards 1s;
	animation: loading-18 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="81.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="81.66667"] .progress-left .progress-bar {
	-webkit-animation: loading-19 1s linear forwards 1s;
	animation: loading-19 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="83.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="83.33333"] .progress-left .progress-bar {
	-webkit-animation: loading-20 1s linear forwards 1s;
	animation: loading-20 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="85"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="85"] .progress-left .progress-bar {
	-webkit-animation: loading-21 1s linear forwards 1s;
	animation: loading-21 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="86.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="86.66667"] .progress-left .progress-bar {
	-webkit-animation: loading-22 1s linear forwards 1s;
	animation: loading-22 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="88.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="88.33333"] .progress-left .progress-bar {
	-webkit-animation: loading-23 1s linear forwards 1s;
	animation: loading-23 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="90"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="90"] .progress-left .progress-bar {
	-webkit-animation: loading-24 1s linear forwards 1s;
	animation: loading-24 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="91.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="91.66667"] .progress-left .progress-bar {
	-webkit-animation: loading-25 1s linear forwards 1s;
	animation: loading-25 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="93.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="93.33333"] .progress-left .progress-bar {
	-webkit-animation: loading-26 1s linear forwards 1s;
	animation: loading-26 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="95"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="95"] .progress-left .progress-bar {
	-webkit-animation: loading-27 1s linear forwards 1s;
	animation: loading-27 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="96.66667"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="96.66667"] .progress-left .progress-bar {
	-webkit-animation: loading-28 1s linear forwards 1s;
	animation: loading-28 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="98.33333"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="98.33333"] .progress-left .progress-bar {
	-webkit-animation: loading-29 1s linear forwards 1s;
	animation: loading-29 1s linear forwards 1s
}

.skils.has-style-01 .progress[data-percentage="100"] .progress-right .progress-bar {
	-webkit-animation: loading-30 1s linear forwards;
	animation: loading-30 1s linear forwards
}

.skils.has-style-01 .progress[data-percentage="100"] .progress-left .progress-bar {
	-webkit-animation: loading-30 1s linear forwards 1s;
	animation: loading-30 1s linear forwards 1s
}

@-webkit-keyframes loading-1 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(6);
		transform: rotate(6deg)
	}
}

@keyframes loading-1 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(6);
		transform: rotate(6deg)
	}
}

@-webkit-keyframes loading-2 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(12);
		transform: rotate(12deg)
	}
}

@keyframes loading-2 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(12);
		transform: rotate(12deg)
	}
}

@-webkit-keyframes loading-3 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(18);
		transform: rotate(18deg)
	}
}

@keyframes loading-3 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(18);
		transform: rotate(18deg)
	}
}

@-webkit-keyframes loading-4 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(24);
		transform: rotate(24deg)
	}
}

@keyframes loading-4 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(24);
		transform: rotate(24deg)
	}
}

@-webkit-keyframes loading-5 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(30);
		transform: rotate(30deg)
	}
}

@keyframes loading-5 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(30);
		transform: rotate(30deg)
	}
}

@-webkit-keyframes loading-6 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(36);
		transform: rotate(36deg)
	}
}

@keyframes loading-6 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(36);
		transform: rotate(36deg)
	}
}

@-webkit-keyframes loading-7 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(42);
		transform: rotate(42deg)
	}
}

@keyframes loading-7 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(42);
		transform: rotate(42deg)
	}
}

@-webkit-keyframes loading-8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(48);
		transform: rotate(48deg)
	}
}

@keyframes loading-8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(48);
		transform: rotate(48deg)
	}
}

@-webkit-keyframes loading-9 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(54);
		transform: rotate(54deg)
	}
}

@keyframes loading-9 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(54);
		transform: rotate(54deg)
	}
}

@-webkit-keyframes loading-10 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(60);
		transform: rotate(60deg)
	}
}

@keyframes loading-10 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(60);
		transform: rotate(60deg)
	}
}

@-webkit-keyframes loading-11 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(66);
		transform: rotate(66deg)
	}
}

@keyframes loading-11 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(66);
		transform: rotate(66deg)
	}
}

@-webkit-keyframes loading-12 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(72);
		transform: rotate(72deg)
	}
}

@keyframes loading-12 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(72);
		transform: rotate(72deg)
	}
}

@-webkit-keyframes loading-13 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(78);
		transform: rotate(78deg)
	}
}

@keyframes loading-13 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(78);
		transform: rotate(78deg)
	}
}

@-webkit-keyframes loading-14 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(84);
		transform: rotate(84deg)
	}
}

@keyframes loading-14 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(84);
		transform: rotate(84deg)
	}
}

@-webkit-keyframes loading-15 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(90);
		transform: rotate(90deg)
	}
}

@keyframes loading-15 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(90);
		transform: rotate(90deg)
	}
}

@-webkit-keyframes loading-16 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(96);
		transform: rotate(96deg)
	}
}

@keyframes loading-16 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(96);
		transform: rotate(96deg)
	}
}

@-webkit-keyframes loading-17 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(102);
		transform: rotate(102deg)
	}
}

@keyframes loading-17 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(102);
		transform: rotate(102deg)
	}
}

@-webkit-keyframes loading-18 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(108);
		transform: rotate(108deg)
	}
}

@keyframes loading-18 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(108);
		transform: rotate(108deg)
	}
}

@-webkit-keyframes loading-19 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(114);
		transform: rotate(114deg)
	}
}

@keyframes loading-19 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(114);
		transform: rotate(114deg)
	}
}

@-webkit-keyframes loading-20 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(120);
		transform: rotate(120deg)
	}
}

@keyframes loading-20 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(120);
		transform: rotate(120deg)
	}
}

@-webkit-keyframes loading-21 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(126);
		transform: rotate(126deg)
	}
}

@keyframes loading-21 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(126);
		transform: rotate(126deg)
	}
}

@-webkit-keyframes loading-22 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(132);
		transform: rotate(132deg)
	}
}

@keyframes loading-22 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(132);
		transform: rotate(132deg)
	}
}

@-webkit-keyframes loading-23 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(138);
		transform: rotate(138deg)
	}
}

@keyframes loading-23 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(138);
		transform: rotate(138deg)
	}
}

@-webkit-keyframes loading-24 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(144);
		transform: rotate(144deg)
	}
}

@keyframes loading-24 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(144);
		transform: rotate(144deg)
	}
}

@-webkit-keyframes loading-25 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(150);
		transform: rotate(150deg)
	}
}

@keyframes loading-25 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(150);
		transform: rotate(150deg)
	}
}

@-webkit-keyframes loading-26 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(156);
		transform: rotate(156deg)
	}
}

@keyframes loading-26 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(156);
		transform: rotate(156deg)
	}
}

@-webkit-keyframes loading-27 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(162);
		transform: rotate(162deg)
	}
}

@keyframes loading-27 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(162);
		transform: rotate(162deg)
	}
}

@-webkit-keyframes loading-28 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(168);
		transform: rotate(168deg)
	}
}

@keyframes loading-28 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(168);
		transform: rotate(168deg)
	}
}

@-webkit-keyframes loading-29 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(174);
		transform: rotate(174deg)
	}
}

@keyframes loading-29 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(174);
		transform: rotate(174deg)
	}
}

@-webkit-keyframes loading-30 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(180);
		transform: rotate(180deg)
	}
}

@keyframes loading-30 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(180);
		transform: rotate(180deg)
	}
}

.contact-me.has-style-01 .shape-03 {
	left: 38%;
	top: -50px;
	width: 100px
}

.contact-me.has-style-01 .shape-07 {
	left: 30%;
	bottom: 50px;
	width: auto
}

.contact-me.has-style-01 .shape-09 {
	right: 5%;
	bottom: 15%;
	width: auto
}

.contact-me.has-style-01 ul.info {
	margin-top: 40px
}

.contact-me.has-style-01 ul.info li {
	margin-top: 20px
}

.contact-me.has-style-01 ul.info li a {
	color: var(--gray);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	text-transform: none
}

.contact-me.has-style-01 ul.info li a:hover {
	color: var(--secondary)
}

.contact-me.has-style-01 ul.info li i {
	margin-right: 15px;
	background: var(--secondary-02);
	color: var(--secondary);
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 35px;
	width: 35px;
	border-radius: .3rem
}

.contact-me.has-style-01 ul.social {
	margin-top: 40px
}

@media (max-width: 768px) {
	.contact-me.has-style-01 ul.social {
		margin: 40px auto
	}
}

.contact-me.has-style-01 ul.social li a {
	color: var(--gray);
	margin-right: 1rem;
	font-size: 18px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 35px;
	width: 35px;
	border-radius: .3rem;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

.contact-me.has-style-01 ul.social li a:hover {
	color: var(--secondary);
	background: var(--secondary-02)
}

.contact-me.has-style-01 .contact_form .form-group {
	margin-bottom: 20px;
	position: relative
}

.contact-me.has-style-01 .contact_form .form-group i {
	position: absolute;
	top: 1.7rem;
	right: 1.5rem;
	opacity: .5
}

.contact-me.has-style-01 .contact_form .form-group input,
.contact-me.has-style-01 .contact_form .form-group textarea {
	border: none;
	background: var(--tertiary-02);
	color: var(--white);
	border: 1px solid transparent;
	padding: 1.5rem 1rem;
	border-radius: .3rem;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

.contact-me.has-style-01 .contact_form .form-group input:focus,
.contact-me.has-style-01 .contact_form .form-group textarea:focus {
	background: var(--tertiary);
	border: 1px solid var(--tertiary);
	-webkit-box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
	box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1)
}

.details.has-style-01 .hero-details {
	margin-bottom: 20px
}

.details.has-style-01 .hero-details h2 {
	color: var(--white);
	margin-bottom: 20px
}

.details.has-style-01 .hero-details ul li {
	display: block;
	margin-bottom: 20px
}

.details.has-style-01 .hero-details ul li h4 {
	display: inline-block
}

.details.has-style-01 .hero-details div {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: end
}

.details.has-style-01 .hero-thumb {
	border-radius: 1rem;
	border: 0.5rem solid var(--tertiary-02)
}

.comment.has-style-01 .icon-top {
	margin-bottom: 20px
}

.comment.has-style-01 .icon-top img {
	width: 120px
}

.comment.has-style-01 .comment-form .rate {
	height: 46px;
	padding: 0 10px;
	direction: rtl;
	margin-bottom: 20px
}

.comment.has-style-01 .comment-form .rate:not(:checked)>input {
	position: absolute;
	top: -9999px
}

.comment.has-style-01 .comment-form .rate:not(:checked)>label {
	width: 1em;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
	font-size: 48px;
	color: var(--tertiary);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

.comment.has-style-01 .comment-form .rate:not(:checked)>label:before {
	content: '★ '
}

.comment.has-style-01 .comment-form .rate>input:checked~label {
	color: var(--secondary)
}

.comment.has-style-01 .comment-form .rate:not(:checked)>label:hover,
.comment.has-style-01 .comment-form .rate:not(:checked)>label:hover~label {
	color: var(--secondary)
}

.comment.has-style-01 .comment-form .rate>input:checked+label:hover,
.comment.has-style-01 .comment-form .rate>input:checked+label:hover~label,
.comment.has-style-01 .comment-form .rate>input:checked~label:hover,
.comment.has-style-01 .comment-form .rate>input:checked~label:hover~label,
.comment.has-style-01 .comment-form .rate>label:hover~input:checked~label {
	color: var(--secondary)
}

.comment.has-style-01 .comment-form .form-group {
	margin-bottom: 20px;
	position: relative
}

.comment.has-style-01 .comment-form .form-group i {
	position: absolute;
	top: 1.7rem;
	right: 1.5rem;
	opacity: .5
}

.comment.has-style-01 .comment-form .form-group input,
.comment.has-style-01 .comment-form .form-group textarea {
	border: none;
	background: var(--tertiary-02);
	color: var(--white);
	border: 1px solid transparent;
	padding: 1.5rem 1rem;
	border-radius: .3rem;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

.comment.has-style-01 .comment-form .form-group input:focus,
.comment.has-style-01 .comment-form .form-group textarea:focus {
	background: var(--tertiary);
	border: 1px solid var(--tertiary);
	-webkit-box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
	box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1)
}

footer.has-style-01 {
	position: relative;
	border-top: 2px solid var(--tertiary);
	padding: 4rem 0 1.5rem;
	background: var(--primary)
}

@media (max-width: 767.98px) {
	footer.has-style-01 {
		padding: 3rem 0 1.5rem
	}
}

footer.has-style-01 .shape-03 {
	left: 10%;
	top: -25px;
	width: 50px
}

@media (max-width: 767.98px) {
	footer.has-style-01 .link-footer {
		margin: 0 auto;
		text-align: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center
	}
}

footer.has-style-01 .link-footer li {
	display: inline-block
}

@media (max-width: 767.98px) {
	footer.has-style-01 .link-footer li {
		margin-bottom: 1rem
	}
}

footer.has-style-01 .link-footer li a {
	margin-right: 1rem;
	color: var(--gray)
}

footer.has-style-01 .link-footer li a:hover {
	color: var(--secondary)
}

footer.has-style-01 .link-footer li:last-child a {
	margin-right: 0
}

footer.has-style-01 .designby {
	text-align: right
}

@media (max-width: 767.98px) {
	footer.has-style-01 .designby {
		text-align: center
	}
}

footer.has-style-01 .designby a {
	color: var(--secondary);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out
}

footer.has-style-01 .designby a:hover {
	color: var(--gray)
}

body {
	background: var(--primary) url(../img/border.png) fixed center;
	background-size: 17%;
	color: var(--gray);
	font-family: "Quicksand-Bold", sans-serif;
	font-size: 17px;
	position: relative;
	text-transform: capitalize
}