@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
* {
	margin: 0;
	padding: 0;
}
html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input, hr {
	margin: 0;
	padding: 0;
}

section{overflow:hidden;}
/*h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-weight:normal; font-style:normal;}*/
ul, ol {
	list-style: none;
}
fieldset, img {
	border: none;
}
caption, th {
	text-align: left;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
td {
	vertical-align: top;
}
.space25, .space50, .space75, .space25 {
	display: block;
}
.space25 {
	height: 25px;
}
.space50 {
	height: 50px;
}
.space75 {
	height: 75px;
}
.space100 {
	height: 100px;
}
.p0 {
	padding: 0;
}
.p5 {
	padding: 5px;
}
.p10 {
	padding: 10px;
}
.p15 {
	padding: 15px;
}
.p20 {
	padding: 20px;
}
.p25 {
	padding: 25px;
}
.p30 {
	padding: 30px;
}
.pt0 {
	padding-top: 0;
}
.pt5 {
	padding-top: 5px;
}
.pt10 {
	padding-top: 10px;
}
.pt15 {
	padding-top: 15px;
}
.pt20 {
	padding-top: 20px;
}
.pt25 {
	padding-top: 25px;
}
.pt30 {
	padding-top: 30px;
}
.pr0 {
	padding-right: 0;
}
.pr5 {
	padding-right: 5px;
}
.pr10 {
	padding-right: 10px;
}
.pr15 {
	padding-right: 15px;
}
.pr20 {
	padding-right: 20px;
}
.pr25 {
	padding-right: 25px;
}
.pr30 {
	padding-right: 30px;
}
.pb0 {
	padding-bottom: 0;
}
.pb5 {
	padding-bottom: 5px;
}
.pb10 {
	padding-bottom: 10px;
}
.pb15 {
	padding-bottom: 15px;
}
.pb20 {
	padding-bottom: 20px;
}
.pb25 {
	padding-bottom: 25px;
}
.pb30 {
	padding-bottom: 30px;
}
.pl0 {
	padding-left: 0;
}
.pl5 {
	padding-left: 5px;
}
.pl10 {
	padding-left: 10px;
}
.pl15 {
	padding-left: 15px;
}
.pl20 {
	padding-left: 20px;
}
.pl25 {
	padding-left: 25px;
}
.pl30 {
	padding-left: 30px;
}
.m0 {
	margin: 0px !important;
}
.m5 {
	margin: 5px;
}
.m10 {
	margin: 10px;
}
.m15 {
	margin: 15px;
}
.m20 {
	margin: 20px;
}
.m25 {
	margin: 25px;
}
.m30 {
	margin: 30px;
}
.mt0 {
	margin-top: 0;
}
.mt5 {
	margin-top: 5px;
}
.mt10 {
	margin-top: 10px;
}
.mt15 {
	margin-top: 15px;
}
.mt20 {
	margin-top: 20px;
}
.mt25 {
	margin-top: 25px;
}
.mt30 {
	margin-top: 30px;
}
.mt70 {
	margin-top: 70px;
}
.mr0 {
	margin-right: 0;
}
.mr5 {
	margin-right: 5px;
}
.mr10 {
	margin-right: 10px;
}
.mr15 {
	margin-right: 15px;
}
.mr20 {
	margin-right: 20px;
}
.mr25 {
	margin-right: 25px;
}
.mr30 {
	margin-right: 30px;
}
.mb0 {
	margin-bottom: 0;
}
.mb5 {
	margin-bottom: 5px;
}
.mb10 {
	margin-bottom: 10px;
}
.mb15 {
	margin-bottom: 15px;
}
.mb20 {
	margin-bottom: 20px;
}
.mb25 {
	margin-bottom: 25px;
}
.mb30 {
	margin-bottom: 30px;
}
.mb70 {
	margin-bottom: 70px;
}
.ml0 {
	margin-left: 0;
}
.ml5 {
	margin-left: 5px;
}
.ml10 {
	margin-left: 10px;
}
.ml15 {
	margin-left: 15px;
}
.ml20 {
	margin-left: 20px;
}
.ml25 {
	margin-left: 25px;
}
.ml30 {
	margin-left: 30px;
}

/*
Loading
=========================== */
#preloader  {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #f3f3f3;
     z-index: 999999;
    height: 100%;
 }

.loader {
  position: absolute;
  left:50%;
  top:50%;
  margin-left:-25px;
  margin-top:-25px;
  width: 50px;
}
.loader:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.circular {
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124px;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124px;
  }
}
@-webkit-keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%, 90% {
    stroke: #ffa700;
  }
}
@keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%, 90% {
    stroke: #ffa700;
  }
}


.reading-progress {
	position: fixed;
	background: #02cee0;
	display: block;
	height: 3px;
	transition-property: width;
	transition-duration: 0.1s;
	z-index: 9999;
}
/***** Theme  *****/
body {
	color: #333;
	font-family: 'Open Sans', sans-serif;
}
a {
	color: #333;
	text-decoration: none;
}
a:hover {
	color: #02cee0;
	text-decoration: none;
}
a:focus, a:active {
	outline: none;
}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus {
	outline: none;
	color: #fff;
}
.btn {
	transition: all 300ms ease-in-out 0s;
	-webkit-transition: all 300ms ease-in-out 0s;
	-moz-transition: all 300ms ease-in-out 0s;
	-ms-transition: all 300ms ease-in-out 0s;
	-o-transition: all 300ms ease-in-out 0s;
}
.btn-hero {
	background: linear-gradient(left, #02cee0 50%, #03c6d7 50%) repeat scroll right bottom/200% 100% transparent;
	background: linear-gradient(to right, #03c6d7 50%, #02cee0 50%) repeat scroll right bottom/200% 100% transparent;
	-webkit-transition: background 350ms ease-in-out;
	-moz-transition: background 350ms ease-in-out;
	-o-webkit-transition: background 350ms ease-in-out;
	-ms-webkit-transition: background 350ms ease-in-out;
	transition: background 350ms ease-in-out;
	border-color: #02cee0;
	color: #fff;
	text-transform: uppercase;
	font-size: 15px;
	padding: 10px 25px;
	line-height: 18px;
	text-shadow: none;
	border-radius: 0px;
	-moz-transition: ease 0.35s all;
	-o-transition: ease 0.35s all;
	-webkit-transition: ease 0.35s all;
	transition: ease 0.35s all;
}
.btn-hero:hover, .btn-hero:focus {
	color: #fff;
	background-position: left bottom;
}
/* ----- Nav -----*/
.navbar-default {
	background-color: #000;
	border-color: transparent;
}
.navbar-default .navbar-nav>li>a {
	color: #fff;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
	color: #02cee0;
}
.navbar-brand {
	padding: 6px;
}
/* ----- Section -----*/
.main-section {
	width: 100%;
	float: left;
	position: relative;
	margin: 0;
}
.white-section {
	width: 100%;
	float: left;
	
	background: #fff;
}
.grey-section {
	width: 100%;
	float: left;
    padding: 120px 0;
	position: relative;
	background: #fbfbfb;
}
.banner-section {
    background-image: url(../img/evening_lowres.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	float: left;
	position: relative;
	min-height:640px;
}
.test-section {
	background-image: url(../img/client-say.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	float: left;
	position: relative;
	padding: 120px 0;
}
/* ----- Banner text -----*/
.banner-text-animate {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 40%;
}
.banner-text-animate h2 {
	color: #fff;
	font-size: 55px;
}
.banner-text-animate h2 > span {
	color: #02cee0;
}
.banner-text-animate p {
	letter-spacing: 4px;
	font-size: 14px;
	color: #fff;
}
/* ----- Mouse Scroll -----*/
.mouse {
	position: absolute;
	width: 22px;
	height: 42px;
	bottom: 40px;
	left: 50%;
	margin-left: -12px;
	border-radius: 15px;
	border: 2px solid #888;
	-webkit-animation: intro 1s;
	animation: intro 1s;
}
.scroll {
	display: block;
	width: 3px;
	height: 3px;
	margin: 6px auto;
	border-radius: 4px;
	background: #888;
	-webkit-animation: finger 1s infinite;
	animation: finger 1s infinite;
}
@-webkit-keyframes intro {
 0% {
 opacity: 0;
 -webkit-transform: translateY(40px);
 transform: translateY(40px);
}
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
}
@keyframes intro {
 0% {
 opacity: 0;
 -webkit-transform: translateY(40px);
 transform: translateY(40px);
}
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
}
@-webkit-keyframes finger {
 0% {
 opacity: 1;
}
 100% {
 opacity: 0;
 -webkit-transform: translateY(20px);
 transform: translateY(20px);
}
}
@keyframes finger {
 0% {
 opacity: 1;
}
 100% {
 opacity: 0;
 -webkit-transform: translateY(20px);
 transform: translateY(20px);
}
}
/* ----- Section Header -----*/
.section-header {
	margin: 0 auto;
	display: table;
	margin-bottom: 75px;
    padding: 120px 0;
}
.section-header h3 {
	font-size: 40px;
	margin-bottom: 10px;
	text-align: center;
	font-weight: 300;
	position: relative;
}
.section-header h3:before {
	background: url(../img/header.png);
	height: 50px;
	width: 23px;
	position: absolute;
	content: "";
	top: 13px;
	left: -60px;
}
.section-header h3:after {
	background: url(../img/header.png);
	height: 50px;
	width: 23px;
	position: absolute;
	content: "";
	top: 13px;
	right: -60px;
	transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
-webkit-
}
.section-header h3 strong {
	font-weight: 600;
}
.section-header p {
	letter-spacing: 10px;
	text-align: center;
	font-size: 14px;
}
/* ----- About -----*/
.about-content p {
	margin-bottom: 20px;
	font-size: 14px;
	text-align: justify;
}
.about-content p:first-of-type:first-letter {
	height: 0.7em;
	margin: 0.09em 0 -0.05em 0;
	padding: 0 0.1em 0 0;
	font-size: 45px;
	font-weight: 600;
	line-height: 0.85em;
	float: left;
}
/* ----- About Skill -----*/
.skillset {
	margin-top: 100px;
}
.skill-lockup {
	max-width: 450px;
	width: 100%;
	float: left;
	margin-right: 40px;
}
.mr {
	margin-right: 0;
}
.mb {
	margin-bottom: 5px;
}
.skill-info {
	display: block;
	margin-bottom: 20px;
}
.skill-name {
	float: left;
	color: #666;
}
.skill-status {
	float: right;
	color: #c4c4c4;
	font-size: .8em;
}
.skill-bar {
	display: block;
	max-width: 450px;
	width: 100%;
	height: 5px;
	background: #c4c4c4;
	clear: both;
	margin: 20px 0;
}
.skill-level {
	display: table;
	height: 5px;
}
.branding, .graphic, .web, .photography {
	background: #02cee0;
}
.branding {
	width: 54%;
	-webkit-animation: branding 3s linear;
	animation: branding 3s linear;
}
.graphic {
	width: 78%;
	-webkit-animation: graphic 3s linear;
	animation: graphic 3s linear;
}
.web {
	width: 92%;
	-webkit-animation: web 3s linear;
	animation: web 3s linear;
}
.photography {
	width: 60%;
	-webkit-animation: photography 3s linear;
	animation: photography 3s linear;
}


/*-----------------------
	  	branding 
-------------------------*/ 
@-webkit-keyframes branding {
 from {
width: 0%;
}
 to {
width: 54%;
}
}
 @keyframes branding {
 from {
width: 0%;
}
 to {
width: 54%;
}
}

/*-----------------------
	graphic Animation 
-------------------------*/
@-webkit-keyframes graphic {
 from {
width: 0%;
}
 to {
width: 78%;
}
}
 @keyframes graphic {
 from {
width: 0%;
}
 to {
width: 78%;
}
}

/*-----------------------
	web Animation 
-------------------------*/ 
@-webkit-keyframes web {
 from {
width: 0%;
}
 to {
width: 92%;
}
}
 @keyframes web {
 from {
width: 0%;
}
 to {
width: 92%;
}
}

/*-----------------------
  photography Animation 
-------------------------*/ 
@-webkit-keyframes photography {
 from {
width: 0%;
}
 to {
width: 60%;
}
}
 @keyframes photography {
 from {
width: 0%;
}
 to {
width: 60%;
}
}
/* -------------- about item -----------*/
.aboutItem {
	width: 50%;
	position: relative;
	float: left;
	margin-top: 45px;
	height: 100px;
	cursor: pointer;
}
.about-item, .about-item-hover{width:100%; float:left;}

.about-item img {
	margin: 0 auto;
	margin-bottom: 25px;
	display: table;
}
.about-item h3 {
	color: #333;
	font-weight: 300;
	font-size: 16px;
	text-align: center;
}
.about-item-section {
	width: 100%;
	float: left;
	margin-top: 30px;
}
.about-item-hover {
	display: none;
	position: absolute;
	top: 17px;
	padding: 0 5px;
}
.about-item-hover > h3 {
	color: #02cee0;
	font-weight: 600;
	text-align: center;
	margin-bottom: 10px;
	font-size: 16px;
}
.about-item-hover p {
	font-size: 13px;
	text-align: center;
}
.about-item-section .aboutItem:first-of-type {
	border-right: 1px solid #ddd;
}
.about-item-section .aboutItem:last-of-type {
	border-left: 1px solid #ddd;
}
.aboutItem:hover > .about-item {
	display: none;
}
.aboutItem:hover > .about-item-hover {
	display: block;
}
/*------------Service -------------------*/
.service-item {
	width: 100%;
	float: left;
	position: relative;
	padding: 0 20px;
}
.service-item h3 {
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 25px;
}
.service-item .icons {
	text-align: center;
	font-size: 55px;
	color: #02cee0;
	display: table;
	margin: 0 auto;
}
.service-item p {
	font-size: 14px;
	text-align: center;
}
.section-item:hover {
	cursor: crosshair;
}
.service-item * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
}
.service-item:before, .service-item:after {
	height: 60px;
	width: 14px;
	position: absolute;
	content: '';
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
	opacity: 0;
}
.service-item:before {
	right: 0;
	top: 0;
	border-right: 1px solid transparent;
	border-top: 1px solid transparent;
	-webkit-transform: translate(-100%, 50%);
	transform: translate(-100%, 50%);
}
.service-item:hover:before {
	border-right: 1px solid #02cee0;
	border-top: 1px solid #02cee0;
}
.service-item:after {
	left: 0;
	bottom: 0;
	border-left: 1px solid transparent;
	border-bottom: 1px solid transparent;
	-webkit-transform: translate(100%, -50%);
	transform: translate(100%, -50%);
}
.service-item:hover:after {
	border-left: 1px solid #02cee0;
	border-bottom: 1px solid #02cee0;
}
.service-item:hover:before, .service-item:before, .service-item:hover:after, .service-item:after {
	-webkit-transform: translate(0%, 0%);
	transform: translate(0%, 0%);
	opacity: 1;
}
/* Effect 5: same word slide in */
nav a {
	position: relative;
	display: inline-block;
	outline: none;
	text-decoration: none;
	text-transform: uppercase;
}
.navbar-nav>li>a {
	padding: 0px 20px;
	margin: 18px 0;
	line-height: 16px;
}
.cl-effect-5 a {
	overflow: hidden;
	height: 1em;
}
.cl-effect-5 a span {
	position: relative;
	display: inline-block;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}
.cl-effect-5 a span::before {
	position: absolute;
	top: 100%;
	content: attr(data-hover);
	font-weight: 700;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.cl-effect-5 a:hover span, .cl-effect-5 a:focus span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}
/* Effect 5: same word slide in and border bottom */
/*-------------Portfolio ---------------- */
.port-image {
	width: 100%;
}
.each-item {
	position: relative;
	overflow: hidden;
}
.each-item:hover .cap2, .each-item:hover .cap2 {
	left: 0px;
}
.cap1 {
	position: absolute;
	width: 100%;
	height: 60%;
	background: rgba(2, 206, 224, 0.8);
	top: 0px;
	left: -100%;
	padding: 10px;
	transition: all .5s;
	padding-top: 45px;
	text-align: center;
}
.cap1 h3 {
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 10px;
}
.cap1 p {
	color: #fff;
	font-weight: 300;
	font-size: 12px;
	padding: 0 20px;
}
.cap2 {
	position: absolute;
	width: 100%;
	height: 40%;
	background: rgba(2, 206, 224, 0.8);
	bottom: 0px;
	left: 100%;
	padding: 10px;
	transition: all .5s;
	text-align: center;
}
.cap2 a {
	color: #fff;
	font-size: 25px;
	text-align: center;
	margin: 0 auto;
}
.portfolio-button {
	margin: 0 auto;
	display: table;
	margin-bottom: 70px;
}
.portfolio-button .filter-button {
	background: none;
	color: #8d8d8d;
	margin: 0 20px;
	border: none;
	font-weight: 300;
	outline: none;
}
.portfolio-button .filter-button.active {
	color: #02cee0;
}
.filter {
	margin-bottom: 30px;
}
/*----------- Team --------------- */
.team-item {
	width: 100%;
	float: left;
	position: relative;
}
.team-item img {
	margin: 0 auto;
	display: table;
	width:100%;
}
.team-item .team-name {
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	color: #333;
	margin-top: 20px;
}
.team-item .position {
	font-size: 22px;
	text-align: center;
	color: #02cee0;
}
.team-item .hobby {
	visibility: hidden;
	text-align: center;
	margin-top: 5px;
	font-size: 14px;
}
.team-item:hover .hobby {
	visibility: visible;
	width: 100%;
	float: left;
}
 @-webkit-keyframes fadeInRight {
 0% {
 opacity: 0;
 -webkit-transform: translateX(1.334em) translateZ(0);
}
 100% {
 opacity: 1;
}
}
@-moz-keyframes fadeInRight {
 0% {
 opacity: 0;
 -moz-transform: translateX(1.334em) translateZ(0);
}
 100% {
 opacity: 1;
}
}
@keyframes fadeInRight {
 0% {
 opacity: 0;
 -webkit-transform: translateX(1.334em) translateZ(0);
 -moz-transform: translateX(1.334em) translateZ(0);
 -ms-transform: translateX(1.334em) translateZ(0);
 -o-transform: translateX(1.334em) translateZ(0);
 transform: translateX(1.334em) translateZ(0);
}
 100% {
 opacity: 1;
}
}
.social {
	margin: 0 auto;
	display: table;
	margin-top: 20px;
	margin-bottom: 14px;
}
/* ============================ */
/* SOCIAL ICONS                 */
/* ============================ */
.social-icon {
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition-property: background-color;
	-moz-transition-property: background-color;
	transition-property: background-color;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	transition-timing-function: ease;
	background-color: #c4c4c4;
	text-align: center;
	display: inline-block;
	width: 40px;
	height: 38px;
	padding: 9px 0px;
	color: white;
	margin: 2px;/* Color each button differently */
}
.social-icon:nth-child(1) {
	/* Animation */
	-webkit-animation: fadeInRight 0.6s 0.25s forwards;
	animation: fadeInRight 0.6s 0.25s forwards;
	opacity: 0;/* Color */
}
.social-icon:nth-child(1):hover, .social-icon:nth-child(1):active, .social-icon:nth-child(1):focus {
	opacity: 1;
	background-color: #00b29a;
}
.social-icon:nth-child(2) {
	/* Animation */
	-webkit-animation: fadeInRight 0.6s 0.5s forwards;
	animation: fadeInRight 0.6s 0.5s forwards;
	opacity: 0;/* Color */
}
.social-icon:nth-child(2):hover, .social-icon:nth-child(2):active, .social-icon:nth-child(2):focus {
	opacity: 1;
	background-color: #00b2af;
}
.social-icon:nth-child(3) {
	/* Animation */
	-webkit-animation: fadeInRight 0.6s 0.75s forwards;
	animation: fadeInRight 0.6s 0.75s forwards;
	opacity: 0;/* Color */
}
.social-icon:nth-child(3):hover, .social-icon:nth-child(3):active, .social-icon:nth-child(3):focus {
	opacity: 1;
	background-color: #00a1b2;
}
.social-icon:nth-child(4) {
	/* Animation */
	-webkit-animation: fadeInRight 0.6s 1s forwards;
	animation: fadeInRight 0.6s 1s forwards;
	opacity: 0;/* Color */
}
.social-icon:nth-child(4):hover, .social-icon:nth-child(4):active, .social-icon:nth-child(4):focus {
	opacity: 1;
	background-color: #008cb2;
}
.social-icon:nth-child(5) {
	/* Animation */
	-webkit-animation: fadeInRight 0.6s 1.25s forwards;
	animation: fadeInRight 0.6s 1.25s forwards;
	opacity: 0;/* Color */
}
.social-icon:nth-child(5):hover, .social-icon:nth-child(5):active, .social-icon:nth-child(5):focus {
	opacity: 1;
	background-color: #0077b2;
}
.social-icon img {
	width: 20px;
}
/* ============================ */
/* TOOLTIP                      */
/* ============================ */
[data-tooltip] {
	position: relative;/* tooltip arrow */
  /* tooltip box */
}
[data-tooltip]:before, [data-tooltip]:after {
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	position: absolute;
	top: 100%;
	left: 50%;
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	transition-property: opacity;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	transition-timing-function: linear;
	position: absolute;
	left: 50%;
	top: 100%;
	bottom: 100%;
	visibility: hidden;
	opacity: 0;
	z-index: 9999;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
[data-tooltip]:before {
	content: "";
	border-color: #323232;
	border-style: none;
	border: 5px solid transparent;
	border-bottom: 6px solid #323232;
	margin-top: -4px;
}
[data-tooltip]:after {
	content: attr(data-tooltip);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	width: auto;
	height: 22px;
	padding: 11px 11px 0 11px;
	font-size: 13px;
	line-height: 11px;
	white-space: nowrap;
	background-color: #323232;
	color: #ecf0f1;
	margin-top: 7px;
}
[data-tooltip]:hover, [data-tooltip]:focus {
	background-color: transparent;
}
[data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after {
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	-o-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	opacity: 1;
	visibility: visible;
}
/* ---------------- Process -------------------- */

.panel.with-nav-tabs .panel-heading {
	padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs {
	border-bottom: none;
}
.panel.with-nav-tabs .nav-justified {
	margin-bottom: -1px;
}
/********************************************************************/
/*** PANEL DEFAULT ***/
.with-nav-tabs.panel-default .nav-tabs > li > a > span {
	width: 100%;
	float: left;
	text-align: center;
	font-size: 14px;
	color: #333;
	margin-bottom: 10px;
}
.with-nav-tabs.panel-default .nav-tabs > li > a > i {
	font-size: 28px;
	margin-bottom: 12px;
}
.with-nav-tabs.panel-default .nav-tabs > li > a, .with-nav-tabs.panel-default .nav-tabs > li > a > span, .with-nav-tabs.panel-default .nav-tabs > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li > a:focus {
	color: #333;
	text-align: center;
}
.with-nav-tabs.panel-default .nav-tabs > .open > a, .with-nav-tabs.panel-default .nav-tabs > .open > a:hover, .with-nav-tabs.panel-default .nav-tabs > .open > a:focus, .with-nav-tabs.panel-default .nav-tabs > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li > a:focus {
	color: #777;
	background-color: transparent;
	border-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.active > a, .with-nav-tabs.panel-default .nav-tabs > li.active > a:hover, .with-nav-tabs.panel-default .nav-tabs > li.active > a:focus, .with-nav-tabs.panel-default .nav-tabs > li.active > a > span, .with-nav-tabs.panel-default .nav-tabs > li.active > a > span:hover, .with-nav-tabs.panel-default .nav-tabs > li.active > a > span:focus {
	color: #02cee0;
	background-color: transparent;
	border-color: transparent;
	border-bottom-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
	background-color: transparent;
	border-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
	color: #777;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover, .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
	background-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a, .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover, .with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
	color: #fff;
	background-color: transparent;
}
.panel-default > .panel-heading {
	background-color: transparent;
}
.panel-default {
	border-color: transparent;
}
.panel {
	box-shadow: none;
}
.panel-default > .panel-heading {
	border-color: #02cee0;
}
.with-nav-tabs .nav-tabs li {
	width: 20%;
}
.process-content p {
	font-size: 14px;
	margin-bottom: 20px;
	color: #333;
	font-weight: 300;
}
.client-section {
	width: 100%;
	float: left;
	position: relative;
	margin-top: 40px;
}
.client-section .section-header {
	margin: 0 0 0 25px;
	float: left;
}
.client-section .owl-carousel {
	float: right;
	width: 50%;
}
/* ------ Pricing ------- */

.price_card {
	width: 100%;
	background: rgb(255, 255, 255);
	display: inline-table;
	top: 0;
	border: 1px solid transparent;
}
.price_card:hover {
	border: 1px solid #02cee0;
}
.price_card:not(:last-child) {
	margin-right: 40px;
}
.alpha .header {
	background: rgb(245, 166, 35);
}
.bravo .header {
	background: rgb(246, 77, 77);
}
.charlie .header {
	background: rgb(48, 219, 181);
}
.price {
	width: 100%;
	font-size: 60px;
	font-weight: 300;
	display: block;
	text-align: center;
	padding: 30px 0 10px;
}
.name {
	width: 100%;
	font-size: 15px;
	font-weight: 700;
	display: block;
	text-align: center;
	padding: 0 0 30px;
}
.features {
	list-style: none;
	text-align: center;
	color: rgb(138, 138, 138);
	margin: 0;
	padding: 0;
}
.features li {
	margin: 0 35px;
	padding: 5px 15px;
}
.price_card button {
	color: rgb(255, 255, 255);
	border: 0;
	border-radius: 0px;
	width: 96%;
	display: block;
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	margin: 2%;
}
.price_card .icons {
	text-align: center;
	font-size: 30px;
	margin: 0 auto;
	display: table;
	margin-top: 16px;
	position: relative;
	width: 100%;
}
.test-section .item {
	padding: 0 10%;
}
.test-section .item > p {
	margin-bottom: 30px;
}
.test-section .item > h3 {
	font-size: 18px;
}
/*------------ blog -----------------*/
.blog-item {
	width: 100%;
	float: left;
}
.blog-item img {
	width: 100%;
}
.blog-item h3 {
	font-size: 25px;
	font-weight: 300;
	margin-top: 25px;
}
.blog-item p {
	font-size: 14px;
	font-weight: 300;
	margin-top: 30px;
}
/*------------ contact -----------------*/
textarea {
	resize: none;
}
.form-label {
	font-size: 12px;
	color: #02cee0;
	margin: 0;
	display: block;
	opacity: 1;
	-webkit-transition: .333s ease top, .333s ease opacity;
	transition: .333s ease top, .333s ease opacity;
}
.form-control {
	border-radius: 0;
	border-color: #ccc;
	border-width: 0 0 2px 0;
	border-style: none none solid none;
	box-shadow: none;
	background-color:transparent;
}
.form-control:focus {
	box-shadow: none;
	border-color: #02cee0;
}
.js-hide-label {
	opacity: 0;
}
.js-unhighlight-label {
	color: #999
}
.btn-start-order {
	background: 0 0 #ffffff;
	border: 1px solid #2f323a;
	border-radius: 3px;
	color: #2f323a;
	font-family: "Raleway", sans-serif;
	font-size: 16px;
	line-height: inherit;
	margin: 30px 0;
	padding: 10px 50px;
	text-transform: uppercase;
	transition: all 0.25s ease 0s;
}
.btn-start-order:hover, .btn-start-order:active, .btn-start-order:focus {
	border-color: #5e9bfc;
	color: #5e9bfc;
}
.contact-detail {
	width: 100%;
	float: left;
}
.cnt-item {
	width: 100%;
	float: left;
	margin-bottom: 40px;
}
.cnt-item img {
	text-align: center;
	display: table;
	margin: 0 auto;
	font-size: 30px;
	color: #02cee0;
	margin-bottom: 20px;
}
.cnt-item p {
	text-align: center;
	font-size: 14px;
	font-weight: 300;
}
/*-------------- Footer ---------------- */
.footer-section {
	width: 100%;
	position: relative;
	float: left;
}
.google-map {
	width: 100%;
	float: left;
	height: 100px;
	overflow: hidden;
	position: relative;
}
.locate-map {
	background: rgba(255,255,255,0.8);
	height: 100px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	cursor: pointer;
}
.locate-map p {
	widows: 100%;
	text-align: center;
	line-height: 100px;
}
#map-canvas {
	width: 100%;
	height: 400px;
}
.footer-main {
	padding: 20px 0;
	width: 100%;
	float: left;
	background: #333;
}
.footer-logo {
	text-align: center;
    text-decoration-color: red;
    font-size: 30px;
    color: white;
}
.footer-social {
	margin: 0 auto;
	display: table;
	padding: 0;
}
.footer-social li {
	margin: 0 25px;
	float: left;
	list-style: none;
	margin-top: 60px;
}
.footer-social li a {
	color: #757575;
	font-size: 18px;
	outline: none;
}
.footer-social li a:hover {
	color: #02cee0;
}
.footer {
	background: #212121;
	width: 100%;
	float: left;
	padding: 20px 0;
	position: relative;
}
.footer > p {
	color: #757575;
}
#toTop {
	position: absolute;
	bottom: 20px;
	right: 10px;
	cursor: pointer;
	z-index: 9999;
}
.btn-top {
	padding: 0;
	background: #02cee0;
	width: 35px;
	height: 35px;
	text-align: center;
	line-height: 35px;
	color: #fff;
	border-radius: 0;
	z-index: 9999;
}
.btn-top a {
	color: #fff;
}
/*--------------- Blog Start --------------------------*/
.blog-header {
	float:left;
	margin-right:45px;
}
.blog-header h3 {
	font-size: 40px;
	margin-bottom: 10px;
	text-align: center;
	font-weight: 300;
	position: relative;
}

.blog-header h3 strong {
	font-weight: 600;
}
.blog-header p {
	letter-spacing: 10px;
	font-size: 14px;
}
.blog-banner-section {
	background-image: url(../img/banner.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	display:table;
	height: 550px;
	position: relative;
}
.blog-banner-section .section-header{
	display:table-cell;
	vertical-align:middle;
}
.blog-banner-section .section-header h3, .blog-banner-section .section-header p{
	color:#fff;	
}
.post-item{
	width:100%;
	float:left;
	position:relative;
	margin-bottom:120px;	
}
.post-img, .post-img img{
	width:100%;	
	display:block;
}
.post-caption{
	background:#f8f8f8;
	padding:10px;
	width:100%;
	float:left;
	margin-top:20px;	
}
.post-caption ul{
	float:left;
	margin:0;
	padding:0;	
}
.post-caption ul li{
	float:left;
	font-size:14px;
	margin-right:30px;	
}
.post-caption .view-post{
	float:right;	
}
.post-caption .view-post a{
	color:#333;	
}
.post-caption .view-post a:hover{
	color:#02cee0;	
}
.post-content{
	margin-top:40px;
	width:100%;
	float:left;	
}
.page-nav{
	float:left;	
}
.page-nav ul{margin:0; padding:0; float:left;}
.page-nav ul li{float:left;margin-right:20px;}
.page-nav ul li a{background:#e3e3e3; height:40px; width:40px; text-align:center; line-height:40px; color:#fff; display:block;}
.page-nav ul li.active a, .page-nav ul li a:hover{ background:#02cee0; } 
.page-nav ul li.next a{ border:1px solid #02cee0; color:#02cee0; background:none; padding:0 10px; width:auto; }

/*----------- Sidebar ---------------*/
.sidebar{width:100%; float:left;}
.side-item{margin-bottom:40px; width:100%; float:left;}
.side-header{width:100%; float:left; padding-bottom:20px; border-bottom:1px solid #02cee0; }
.cat-list{width:100%; float:left; margin-top:30px;}
.cat-list ul li a{float:left;}
.cat-list ul li{width:100%; float:left; line-height:30px;}
.cat-list ul li span{float:right;}

.tag-list{width:100%; float:left; margin-top:30px;}
.tag-list ul li a{float:left; border:1px solid #02cee0; padding:2px 10px; font-size:13px; color:#02cee0;}
.tag-list ul li{float:left; line-height:30px; margin-right:10px; margin-bottom:15px;}


.postd-para{width:100%; float:left;}
.postd-para p{font-size:14px;  margin-top:40px;}
.blockquote{border-left:4px solid #02cee0; padding:20px 0 20px 20px; width:100%; float:left; margin-top:40px; margin-bottom:40px; }
.blockquote > p{margin:0; font-size:15px; color:#02cee0;}
.check{margin: 20px 0; padding:0; float:left; width:100%;}
.check li{padding-left:20px; position:relative;}
.check li:before{content:"\f05d"; position:absolute; left:0; color:#02cee0; font-family:FontAwesome;}

.blog-next-prev{ border-top:1px solid #02cee0; border-bottom:1px solid #02cee0; width:100%; float:left; padding:20px 0; margin-top:40px; }
.blog-prev{float:left;}
.blog-next{float:right; text-align:right;}
.blog-next-prev h3{font-size:16px;}
.blog-next-prev p{font-size:13px; letter-spacing:5px;}

.comment{width:100%; float:left; margin-top:40px;}
.comment-header{width:100%; float:left; margin-bottom:40px;}
.comment-header h3{font-size:14px; font-weight:600;}
.comment-item{width:100%; float:left; margin-bottom:30px;}
.comment-item.in{width:95%; float:right; margin-bottom:30px; }
.comment-img{float:left; margin-right:25px; padding-bottom:30px;}
.comment-caption h3{font-size:15px; margin-bottom:10px;}
.comment-caption p{font-size:14px;}
.comment-caption a{font-size:13px;}
.komm
{
    text-align: center;
    background-color: azure;
}