/*-----------------------------------------------------------------------------------

    Template Name: Buzzpro - Corporate HTML Template 
    Description: This is html5 template
    Author: HasTech
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    1. Theme Default CSS (body, link color, section etc)
	2. header
	3. main-menu-area
	4. slider-area
	5. features-area
	6. creative-area
	7. video-area
	8. service-area
	9. portfolio-area
	10. team-area
	11. testimonial-area
	12. counter-area
	13. pricing-area
	14. blog-area
	15. feed-area
	16. our-brand-area
	15. footer
	16. breadcrumb-banner-area
	17. contact-area
	18. skill	

-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  1.  Theme default CSS
/*----------------------------------------*/
/* google-font */
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700');
html, body {height: 100%;}
.floatleft {float:left}
.floatright {float:right}
.alignleft {float:left;margin-right:15px;margin-bottom: 15px}
.alignright {float:right;margin-left:15px;margin-bottom: 15px}
.aligncenter {display:block;margin:0 auto 15px}
a:focus {outline:0px solid}
img {max-width:100%;height:auto}
.fix {overflow:hidden}
p {margin:0 0 15px;}
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 10px;
  font-family: 'Titillium Web', sans-serif;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a { 
    color: inherit 
}
a {transition: all 0.3s ease 0s;text-decoration:none;}
a:hover {
  color: #ec4445;
  text-decoration: none;
}
a:active {
  outline: 0 none;
}
a:focus{text-decoration:none;}
ul{
list-style: outside none none;
margin: 0;
padding: 0
}
.clear{clear:both}
body {line-height:23px;color:#444;
font-family: 'Titillium Web', sans-serif;
}
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}
::selection {
    background: #b3d4fc;
    text-shadow: none;
}
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
.owl-carousel {
  touch-action: manipulation; 
}

/*************************
   Text color
*************************/
.text-blue { color: #4FC1F0; }
.text-white { color: #fff ;}
.text-black { color: #363636; }
.text-theme { color: #f10; }

.text-white h1, .text-white p, .text-white h2{ color: #fff; }
.text-white { color: #fff; }
.text-black { color: #363636 ;}
.text-theme { color: #f10; }

/*colored background*/
 .white-bg { background: #fff !important; }
 .gray-bg { background: #FAFAFA !important; }
 .gray-bg-1 { background: #F1F1F1 !important; }
 .blue-bg { background: #009EE2 !important; }
 .blue-bg-2{ background: #F6F6F6 !important; }
 .default-bg { background: #50C1F0 !important; }
 .transparent-bg { background: transparent !important; }

/*************************
  Basic margin padding
*************************/
.m-0 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}
.p-0 {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}
/*************************
         Margin top
*************************/
.mt-0 { margin-top: 0 }
.mt-10 { margin-top: 10px }
.mt-15 { margin-top: 15px }
.mt-20 { margin-top: 20px }
.mt-30 { margin-top: 30px }
.mt-40 { margin-top: 40px }
.mt-50 { margin-top: 50px }
.mt-60 { margin-top: 60px }
.mt-70 { margin-top: 70px }
.mt-80 { margin-top: 80px }
.mt-90 { margin-top: 90px }
.mt-100 { margin-top: 100px }
.mt-110 { margin-top: 110px }
.mt-120 { margin-top: 120px }
.mt-130 { margin-top: 130px }
.mt-140 { margin-top: 140px }
.mt-150 { margin-top: 150px }
/*************************
      Margin right
*************************/
.mr-0 { margin-right: 0px }
.mr-10 { margin-right: 10px }
.mr-15 { margin-right: 15px }
.mr-20 { margin-right: 20px }
.mr-30 { margin-right: 30px }
.mr-40 { margin-right: 40px }
.mr-50 { margin-right: 50px }
.mr-60 { margin-right: 60px }
.mr-70 { margin-right: 70px }
.mr-80 { margin-right: 80px }
.mr-90 { margin-right: 90px }
.mr-100 { margin-right: 100px }
.mr-110 { margin-right: 110px }
.mr-120 { margin-right: 120px }
.mr-130 { margin-right: 130px }
.mr-140 { margin-right: 140px }
.mr-150 { margin-right: 150px }
/*************************
      Margin bottom
*************************/
.mb-0 { margin-bottom: 0 }
.mb-10 { margin-bottom: 10px }
.mb-15 { margin-bottom: 15px }
.mb-20 { margin-bottom: 20px }
.mb-30 { margin-bottom: 30px }
.mb-40 { margin-bottom: 40px }
.mb-50 { margin-bottom: 50px }
.mb-60 { margin-bottom: 60px }
.mb-70 { margin-bottom: 70px }
.mb-80 { margin-bottom: 80px }
.mb-90 { margin-bottom: 90px }
.mb-100 { margin-bottom: 100px }
.mb-110 { margin-bottom: 110px }
.mb-120 { margin-bottom: 120px }
.mb-130 { margin-bottom: 130px }
.mb-140 { margin-bottom: 140px }
.mb-150 { margin-bottom: 150px }
/*************************
        Margin left
*************************/
.ml-0 { margin-left: 0 }
.ml-10 { margin-left: 10px }
.ml-15 { margin-left: 15px }
.ml-20 { margin-left: 20px }
.ml-30 { margin-left: 30px }
.ml-40 { margin-left: 40px }
.ml-50 { margin-left: 50px }
.ml-60 { margin-left: 60px }
.ml-70 { margin-left: 70px }
.ml-80 { margin-left: 80px }
.ml-90 { margin-left: 90px }
.ml-100 { margin-left: 100px }
.ml-110 { margin-left: 110px }
.ml-120 { margin-left: 120px }
.ml-130 { margin-left: 130px }
.ml-140 { margin-left: 140px }
.ml-150 { margin-left: 150px }
/*************************
        Padding top
*************************/
.pt-0 { padding-top: 0 }
.pt-10 { padding-top: 10px }
.pt-15 { padding-top: 15px }
.pt-20 { padding-top: 20px }
.pt-30 { padding-top: 30px }
.pt-40 { padding-top: 40px }
.pt-50 { padding-top: 50px }
.pt-60 { padding-top: 60px }
.pt-70 { padding-top: 70px }
.pt-80 { padding-top: 80px }
.pt-90 { padding-top: 90px }
.pt-100 { padding-top: 100px }
.pt-110 { padding-top: 110px }
.pt-120 { padding-top: 120px }
.pt-130 { padding-top: 130px }
.pt-140 { padding-top: 140px }
.pt-150 { padding-top: 150px }
.pt-170 { padding-top: 170px }
/*************************
        Padding right
*************************/
.pr-0 { padding-right: 0 }
.pr-10 { padding-right: 10px }
.pr-15 { padding-right: 15px }
.pr-20 { padding-right: 20px }
.pr-30 { padding-right: 30px }
.pr-40 { padding-right: 40px }
.pr-50 { padding-right: 50px }
.pr-60 { padding-right: 60px }
.pr-70 { padding-right: 70px }
.pr-80 { padding-right: 80px }
.pr-90 { padding-right: 90px }
.pr-100 { padding-right: 100px }
.pr-110 { padding-right: 110px }
.pr-120 { padding-right: 120px }
.pr-130 { padding-right: 130px }
.pr-140 { padding-right: 140px }
/*************************
        Padding bottom
*************************/
.pb-0 { padding-bottom: 0 }
.pb-10 { padding-bottom: 10px }
.pb-15 { padding-bottom: 15px }
.pb-20 { padding-bottom: 20px }
.pb-30 { padding-bottom: 30px }
.pb-40 { padding-bottom: 40px }
.pb-50 { padding-bottom: 50px }
.pb-60 { padding-bottom: 60px }
.pb-70 { padding-bottom: 70px }
.pb-80 { padding-bottom: 80px }
.pb-90 { padding-bottom: 90px }
.pb-100 { padding-bottom: 100px }
.pb-110 { padding-bottom: 110px }
.pb-120 { padding-bottom: 120px }
.pb-130 { padding-bottom: 130px }
.pb-140 { padding-bottom: 140px }
.pb-150 { padding-bottom: 150px }
.pb-170 { padding-bottom: 170px }
.pb-180 { padding-bottom: 180px }
/*************************
        Padding left
*************************/
.pl-0 { padding-left: 0 }
.pl-10 { padding-left: 10px }
.pl-15 { padding-left: 15px }
.pl-20 { padding-left: 20px }
.pl-30 { padding-left: 30px }
.pl-40 { padding-left: 40px }
.pl-50 { padding-left: 50px }
.pl-60 { padding-left: 60px }
.pl-70 { padding-left: 70px }
.pl-80 { padding-left: 80px }
.pl-90 { padding-left: 90px }
.pl-100 { padding-left: 100px }
.pl-110 { padding-left: 110px }
.pl-120 { padding-left: 120px }
.pl-130 { padding-left: 130px }
.pl-140 { padding-left: 140px }
.pl-150 { padding-left: 150px }


/***************************
    Page section padding 
****************************/
.ptb-0 { padding: 0 }
.ptb-10 { padding: 10px 0 }
.ptb-20 { padding: 20px 0 }
.ptb-30 { padding: 30px 0 }
.ptb-40 { padding: 40px 0 }
.ptb-50 { padding: 50px 0 }
.ptb-60 { padding: 60px 0 }
.ptb-70 { padding: 70px 0 }
.ptb-80 { padding: 80px 0 }
.ptb-90 { padding: 90px 0 }
.ptb-100 { padding: 100px 0 }
.ptb-110 { padding: 110px 0 }
.ptb-120 { padding: 120px 0 }
.ptb-130 { padding: 130px 0 }
.ptb-140 { padding: 140px 0 }
.ptb-150 { padding: 150px 0 }
.ptb-180 { padding: 180px 0 }
.ptb-15 { padding: 15px 0 }

/***************************
    Page section margin 
****************************/
.mtb-0 { margin: 0 }
.mtb-10 { margin: 10px 0 }
.mtb-15 { margin: 15px 0 }
.mtb-20 { margin: 20px 0 }
.mtb-30 { margin: 30px 0 }
.mtb-40 { margin: 40px 0 }
.mtb-50 { margin: 50px 0 }
.mtb-60 { margin: 60px 0 }
.mtb-70 { margin: 70px 0 }
.mtb-80 { margin: 80px 0 }
.mtb-90 { margin: 90px 0 }
.mtb-100 { margin: 100px 0 }
.mtb-110 { margin: 110px 0 }
.mtb-120 { margin: 120px 0 }
.mtb-130 { margin: 130px 0 }
.mtb-140 { margin: 140px 0 }
.mtb-150 { margin: 150px 0; }
.bg-opacity{position:relative;}
.bg-opacity::before {
  background: #23201d none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.6;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999;
}
.bg-opacity-1{position:relative;}
.bg-opacity-1::before {
  background: #010000 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.7;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 99;
}
.bg-opacity-2{position:relative;}
.bg-opacity-2::before {
  background: #23201d none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.6;
  position: absolute;
  top: 0;
  width: 100%;
}
.bg-opacity-3{position:relative;}
.bg-opacity-3::before {
  background: #1d92c4 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.8;
  position: absolute;
  top: 0;
  width: 100%;
}
.bg-img{
  background: rgba(0, 0, 0, 0) url("img/bg/1.jpg") repeat scroll 0 0;
  background-position: center center;
  background-size: cover;
}
.bg-img-1{
  background: rgba(0, 0, 0, 0) url("img/bg/2.jpg") repeat scroll 0 0;
  background-position: center center;
  background-size: cover;
}
.bg-img-2{
  background: rgba(0, 0, 0, 0) url("img2/20.png") repeat scroll 0 0;
  background-position: center center;
  background-size: cover;
}
/* 2. header */
.header-top-area{}
.header-left{}
.header-left span {
  color: #262626;
}
.header-left li {
  color: #666666;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 72px;
  margin-right: 25px;
}
.header-left li:last-child{margin-right:0;}
.top-icon{}
.top-icon a {
  color: #666666;
  font-size: 15px;
  line-height: 72px;
}
.top-icon a {
  color: #666666;
  font-size: 15px;
  line-height: 72px;
  margin: 0 15px;
  transition: 0.3s;
}
.top-icon a:hover{color:#009EE2;}
/* 3. main-menu-area */
.main-menu-area{}
.logo {
  margin-top: 23px;
}
.main-menu{}
.main-menu ul{}
.main-menu ul li {
  display: inline-block;
  position:relative;
}
.main-menu ul li a {
  color: #555555;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  padding: 40px 10px;
  transition: all 0.3s ease 0s;
}
.main-menu ul li:hover > a,.main-menu ul li.active > a{color:#009ee2;}
.main-menu ul li a i {
  margin-left: 3px;
}
/* sub-menu */
.main-menu ul li ul.submenu {
  background: #fff none repeat scroll 0 0;
  opacity: 0;
  position: absolute;
  text-align: left;
  top: 130%;
  transition: all 0.3s ease 0s;
  visibility: hidden;
  width: 180px;
  z-index: 9999;
}
.main-menu ul li:hover ul.submenu{opacity:1;visibility:visible;top:100%;}
.main-menu ul li ul.submenu li {
  display: block;
}
.main-menu ul li ul.submenu li a {
  font-size: 14px;
  font-weight: 400;
  padding: 8px 20px;
  text-transform: capitalize;
}
.main-menu ul li ul.submenu li a:hover{background:#009ee2;color:#fff}
/* 4. slider-area */
.slider-area{}
.single-slider {
  background-position: center center;
  background-size: cover;
}
.slider-text {
  position: relative;
  z-index: 999;
}
.slider-text span {
  font-weight: 700;
}
.slider-text h1 {
  color: #ffffff;
  font-size: 60px;
  font-weight: 300;
  line-height: 55px;
  margin-bottom: 34px;
  text-transform: uppercase;
  z-index: 99;
}
.slider-text p {
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  line-height: 30px;
  margin-bottom: 0;
}
.slider-text a {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#03f2e9+0,01abe3+100 */
background: #03f2e9; /* Old browsers */
background: -moz-linear-gradient(left,  #03f2e9 0%, #01abe3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #03f2e9 0%,#01abe3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #03f2e9 0%,#01abe3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03f2e9', endColorstr='#01abe3',GradientType=1 ); /* IE6-9 */
  border-radius: 50px;
  color: #ffffff;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  line-height: 40px;
  margin-top: 40px;
  padding: 0 20px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
}
.slider-text a:hover{background:#01ace3;}
.owl-dots {
  bottom: 70px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  z-index: 99;
}
.owl-dot {
  background: #fff;
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  margin: 0 5px;
  width: 10px;
}
.owl-dot.active {
  background: #ffffff none repeat scroll 0 0;
  height: 20px;
  position: relative;
  top: 5px;
  width: 20px;
}

/* 5. features-area */
.features-area{}
.single-features {
  border: 1px solid #f1f1f1;
  padding: 30px 20px;
  transition: all 0.3s ease 0s;
}
.single-features:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.icon-features{}
.icon-features i {
  background: #f6f6f6 none repeat scroll 0 0;
  border-radius: 50%;
  color: #009ee2;
  display: inline-block;
  font-size: 30px;
  height: 70px;
  line-height: 70px;
  transition: all 0.3s ease 0s;
  width: 70px;
  transition:.3s;
}
.single-features:hover .icon-features i {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#03f2e9+0,01abe3+100 */
background: #03f2e9; /* Old browsers */
background: -moz-linear-gradient(left,  #03f2e9 0%, #01abe3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #03f2e9 0%,#01abe3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #03f2e9 0%,#01abe3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03f2e9', endColorstr='#01abe3',GradientType=1 ); /* IE6-9 */
color:#fff;}
.icon-features {
  margin-bottom: 25px;
}
.features-text h4 {
  color: #666666;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
}
.features-text p {
  color: #555555;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0;
}
/* 6. creative-area */
.creative-area{}
.creative-text{}
.creative-text > h4 {
  color: #666666;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 40px;
  text-transform: uppercase;
}
.creative-text p {
  font-size: 18px;
  color: #555555;
  font-weight: 400;
}
.creative-text a {
  font-size: 20px;
  font-weight: 400;
  color: #009ee2;
}
.creative-text > img {
  margin-top: 50px;
}
/* 7. video-area */
.play-icon-md {
  background: rgba(0, 0, 0, 0) linear-gradient(to right, #03f2e9 0%, #01abe3 100%) repeat scroll 0 0;
  border-radius: 50%;
  color: #ffffff;
  display: inline-block;
  font-size: 39px;
  height: 70px;
  line-height: 67px;
  position: relative;
  width: 70px;
  z-index: 99;
  transition:.3s;
}
.play-icon-md:hover{background:#01ACE3;}
.video-text {
  position: relative;
  z-index: 99;
}

.video-text h6 {
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 0;
  margin-top: 50px;
  text-transform: uppercase;
  z-index: 99;
}
/* 8. service-area */
.service-area{}
.section-tittle {
  margin-bottom: 70px;
  padding-bottom: 30px;
  position: relative;
}
.section-tittle::before {
  background: #009ee2 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  transform: translateX(-50%);
  width: 80px;
}
.section-tittle::after {
  background: #dddddd none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  position: absolute;
  width: 80px;
}
.section-tittle h2 {
  color: #444444;
  font-size: 30px;
  font-weight: 700;
  line-height: 23px;
  text-transform: uppercase;
}
.single-service {
  border: 1px solid #f3f3f3;
  padding: 30px 20px;
  transition: all 0.3s ease 0s;
}
.single-service:hover{box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);}
.service-tittle{}
.service-tittle a {
  border: 1px solid #e2e2e2;
  border-radius: 50%;
  color: #333333;
  display: inline-block;
  height: 50px;
  line-height: 39px;
  position: relative;
  text-align: center;
  width: 50px;
}
.service-tittle h3 {
  color: #666666;
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 0;
  margin-left: 15px;
}
.section-tittle span {
  color: #009ee2;
}
.service-tittle p {
  font-size: 400;
  font-size: 14px;
  margin-top: 15px;
  color: #555555;
  margin-bottom: 0;
}
/* 9. portfolio-area */
.portfolio-area {
  overflow: hidden;
}
.portfolio-filter {
  margin-bottom: 70px;
}
.portfolio-filter li.filter.mixitup-control-active {
  background: #009EE2;
  color: #ffffff;
}
.portfolio-filter li {
  color: #555555;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  margin: 0 4px;
  padding: 8px 15px;
  text-transform: capitalize;
  transition: all 0.3s ease-in-out 0s;
}
.portfolio-item {
  float: left;
  width: 25%;
}
.single-portfolio{position:relative;}
.portfolio-img a {
  position: relative;
  display: block;
}
.portfolio-img a::before {
  background: #32b1e8 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.8;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 99;
  opacity:0;
  transition:.3s;
}
.single-portfolio:hover  .portfolio-img a::before{opacity:.8;}
.portfolio-title {
  bottom: 50px;
  left: 25px;
  position: absolute;
  z-index: 99;
  opacity:0;
  transition:.3s;
}
.single-portfolio:hover .portfolio-title{opacity:1;}
.portfolio-title h4 {
  color: #ffffff;
  font-size: 18px;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.portfolio-title p {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0;
}

/* 10. team-area */
.team-area{}
.single-team{position:relative;}
.team-img{}
.team-img a{position:relative;display:block}
.team-img a::before {
  background: #32b1e8 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.8;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 99;
  opacity:0;
  transition:.3s;
}
.single-team:hover .team-img a::before{opacity:.8;}
.team-content {
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 38%;
  transition: all 0.3s ease 0s;
  z-index: 99;
}
.single-team:hover .team-content{opacity:1;}
.team-content a {
  border: 1px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  display: inline-block;
  font-size: 15px;
  height: 30px;
  line-height: 29px;
  margin: 0 5px;
  text-align: center;
  width: 30px;
  transition:.3s;
}
.team-content a:hover{color:#009ee2;background:#fff;border-color:#fff;}
.team-title {
  background: #ffffff none repeat scroll 0 0;
  bottom: 0;
  left: 0;
  padding: 17px 0;
  position: absolute;
  right: 0;
  text-align: center;
  z-index: 999;
  opacity:0;
  transition:.3s;
}
.single-team:hover .team-title{
box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.12);
opacity:1;
}
.team-title h4 {
  color: #444444;
  font-size: 18px;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.team-title span {
  color: #333333;
  font-size: 14px;
  font-weight: 400;
}
/* 11. testimonial-area */
.testimonial-area{}
.test-img {
  border: 1px solid #ffffff;
  border-radius: 50%;
  height: 60px;
  line-height: 60px;
  margin: auto;
  position: relative;
  width: 60px;
  z-index: 99;
  margin-bottom: 40px;
}
.test-content {
  z-index: 999;
  position: relative;
}
.test-content p {
  font-size: 16px;
  color: #fff;
  margin-bottom: 0;
  font-weight: 400;
}

.test-writer {
  margin-top: 30px;
}
.test-writer h3 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 20px;
}
.test-writer span {
  font-size: 14px;
  color: #fff;
  font-weight: 400;
}
.testimonial-active.owl-carousel .owl-item img {
  display: inline-block;
  width: auto;
}
.testimonial-active .owl-dots {
  bottom: -50px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  z-index: 99;
}
.testimonial-active .owl-dot {
  background: #fff;
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  margin: 0 5px;
  width: 10px;
}
.testimonial-active .owl-dot.active {
  background:#fff;
  height:20px;
  width:20px;
  width:20px;
}
/* 12. counter-area */
.counter-area {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.single-counter {
  border-right: 1px solid #DDDDDD;
  padding: 50px 0;
  transition: .3s;
}
.counter-img {
  margin-bottom: 20px;
}
.counter-text{}
.counter-text h3 {
  color: #666666;
  font-size: 36px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 20px;
}
.counter-text span {
  color: #555555;
  font-size: 26px;
  font-weight: 400;
}
/* 13. pricing-area */
.pricing-area{}
.single-pricing {
  border: 1px solid #F6F6F6;
  transition: .3s;
}
.single-pricing:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.pricing-title {
  background: #f6f6f6 none repeat scroll 0 0;
  padding: 50px 0 100px;
  transition: all 0.3s ease 0s;
}
.single-pricing:hover .pricing-title{background:#009EE2;color:#fff;}
.pricing-title h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0;
  text-transform: uppercase;
}
.price-plan {
  background: #009ee2 none repeat scroll 0 0;
  border-radius: 50%;
  display: inline-block;
  height: 118px;
  margin-bottom: 50px;
  margin-top: -70px;
  padding: 30px;
  text-align: center;
  transition:.3s;
  width: 118px;
}
 .single-pricing:hover .price-plan{
  background: rgba(0, 0, 0, 0) linear-gradient(to right, #03f2e9 0%, #01abe3 100%) repeat scroll 0 0;
  box-shadow: 0 0 12px 0px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}
.price {
  color: #ffffff;
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
}
.period {
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}
.item-list {
  border-top: 1px solid #eeeeee;
}
.item-list li {
  border-bottom: 1px solid #eeeeee;
  color: #666666;
  font-size: 18px;
  font-weight: 400;
  padding: 20px;
}
.pricing-bottom {
  padding: 30px 0;
}
.pricing-bottom > a {
  background: #f6f6f6 none repeat scroll 0 0;
  border-radius: 50px;
  color: #555555;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  padding: 15px 30px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
}
.single-pricing:hover .pricing-bottom > a {
  background: rgba(0, 0, 0, 0) linear-gradient(to right, #03f2e9 0%, #01abe3 100%) repeat scroll 0 0;
  box-shadow: 0 0 12px 0px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}
/* 14. blog-area */
.our-blog-area{}
.our-single-blog{transition:.3s;}
.our-single-blog:hover{ box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.10);}
.our-blog-img{}
.our-blog-img a{position:relative;display:block}
.our-blog-img a::before {
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  background: #2FADE5;
  opacity: .7;
  z-index:99;
  transition:.3s;
  opacity:0;
}
.our-single-blog:hover .our-blog-img a::before{opacity:.7;}
.our-blog-img a::after {
  color: #ffffff;
  content: "";
  font-family: fontawesome;
  font-size: 40px;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 47%;
  transform: scale(0);
  transition: all 0.3s ease 0s;
  z-index: 99;
}
.our-single-blog:hover .our-blog-img a::after{opacity:1;transform: scale(1);}
.our-blog-title {
  border-bottom: 1px solid #f1f1f1;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #F1F1F1;
  padding: 30px 20px;
}
.our-blog-title h3 {
  border-bottom: 1px solid #dddddd;
  color: #444444;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 25px;
  padding-bottom: 25px;
}
.our-blog-title h3 a{transition:.3;}
.our-blog-title h3 a:hover{color:#009EE2;}

.our-blog-content{}
.our-blog-content i {
  color: #999999;
  font-size: 15px;
  font-weight: 400;
}
.plane {
  color: #666666;
  font-size: 12px;
  font-weight: 400;
  margin-left: 10px;
}
.our-icon{}
.our-icon i{}
.our-icon span {
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  margin-left: 5px;
}
/* 15. feed-area */
.feed-area {
  overflow: hidden;
}
.feed-item {
  float: left;
  width:100%;
}
.single-feed{}
.feed-img{}
.feed-img a{position:relative;display:block}
.feed-img a::before {
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background: #30AEE4;
  opacity: 0;
  z-index: 99;
  transition:.3s;
}
.single-feed:hover .feed-img a::before{opacity:.7;}
.feed-img a::after {
  bottom: 0;
  color: #ffffff;
  content: "";
  font-family: fontawesome;
  font-size: 40px;
  height: 22px;
  left: 0;
  margin: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  transform: scale(0);
  transition: all 0.3s ease 0s;
  z-index: 99;
}
.single-feed:hover .feed-img a::after{opacity:1;transform: scale(1);}
.feed-active .owl-nav div {
  background: #ffffff none repeat scroll 0 0;
  bottom: -15px;
  color: #bbbbbb;
  font-size: 25px;
  height: 40px;
  left: 50%;
  line-height: 40px;
  margin-left: -50px;
  opacity: 0;
  position: absolute;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 40px;
}
.feed-active:hover .owl-nav div{opacity:1;}
.feed-active .owl-nav div:hover{color:#26A5E4}
.feed-active .owl-nav div.owl-next {
  left: auto;
  margin-right: -50px;
  right: 50%;
}
/* 16. our-brand-area */
.our-brand-area{}
.single-brand{}
.brand-img {
  border: 1px solid #dddddd;
  display: inline-block;
  padding: 40px 20px;
}
.brand-active.owl-carousel .owl-item img {
  display: block;
  width: inherit;
}
.brand-active .owl-nav div {
  background: #f6f6f6 none repeat scroll 0 0;
  border-radius: 50%;
  color: #666666;
  font-size: 25px;
  height: 34px;
  left:0;
  line-height: 34px;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease 0s;
  width: 34px;
}
.brand-active .owl-nav div.owl-next {
  left: auto;
  right: 0;
}
.brand-active:hover .owl-nav div{opacity:1;color:#fff;background:#009EE2;}
.brand-active:hover .owl-nav div.owl-next{left:auto;}
/* 15. footer */
.footer-logo {
  margin-bottom: 37px;
}
.footer-address {
  margin-bottom: 45px;
}
.footer-address:last-child{margin-bottom:0;}
.footer-icon {
  border: 1px solid #dddddd;
  color: #666666;
  display: inline-block;
  float: left;
  font-size: 18px;
  font-weight: 400;
  height: 30px;
  line-height: 26px;
  margin-right: 15px;
  margin-top: 8px;
  text-align: center;
  width: 30px;
}
.footer-info {
  margin-left: 45px;
}
.footer-info > p {
  color: #555555;
  font-size: 14px;
  font-weight: 400;
}
.footer-info > p:last-child{margin-bottom:0;}
.footer-text h5 {
  color: #666666;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 50px;
  text-transform: uppercase;
}
.footer-menu > li {
  border-bottom: 1px solid #dddddd;
  margin-bottom: 18px;
  padding-bottom: 12px;
}
.footer-menu > li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.footer-menu a {
  font-size: 14px;
  color: #444444;
  font-weight: 400;
  transition:.3s;
}
.footer-menu a:hover{color:#009EE2;}
.footer-right {
  border-bottom: 1px solid #dddddd;
  margin-bottom: 28px;
  padding-bottom: 28px;
}
.footer-right:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.footer-right > span {
  color: #333333;
  font-size: 14px;
  font-weight: 400;
}
.footer-left {
  float: right;
}
.footer-left > span {
  color: #666666;
  font-size: 12px;
  font-weight: 400;
}
.footer-right > p {
  color: #555555;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0;
  margin-top: 20px;
}
.footer-right a {
  color: #009ee2;
}
.contact-form input {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #dddddd;
  color: #bbbbbb;
  font-size: 12px;
  height: 40px;
  margin-bottom: 28px;
  padding: 2px 15px;
  width: 100%;
}
.contact-form button {
  background: rgba(0, 0, 0, 0) linear-gradient(to right, #03f2e9 0%, #01abe3 100%) repeat scroll 0 0;
  border: medium none;
  border-radius: 50px;
  color: #ffffff;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  line-height: 15px;
  padding: 12px 22px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
}
.contact-form button:hover{background:#009EE2}
.footer-medium > p {
  color: #555555;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 35px;
}
.icon > a {
  border: 2px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  display: inline-block;
  font-size: 15px;
  font-weight: 400;
  height: 35px;
  line-height: 31px;
  margin: 5px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 35px;
}
.copyright {
  margin-top: 11px;
}
.copyright > p {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0;
}
.copyright a {
  color: #ffffff;
}
.copyright a:hover{
  text-decoration:underline
}

.icon > a:hover{background:#fff;color:#009EE2;}
/* 16. breadcrumb-banner-area */
.breadcrumb-banner-area{}
.breadcrumb-text {
  position: relative;
  z-index: 1;
}
.breadcrumb-text h1 {
  color: #fefefe;
  font-size: 36px;
  font-weight: 600;
  line-height: 36px;
  text-transform: uppercase;
}
.breadcrumb-menu{}
.breadcrumb-menu ul{}
.breadcrumb-menu ul li {
  display: inline-block;
  padding: 0 5px;
  text-transform: capitalize;
}
.breadcrumb-menu ul li::after {
  color: #fff;
  content: "/";
  display: inline-block;
  float: right;
  position: relative;
  right: -6px;
  top: 2px;
}
.breadcrumb-menu ul li:last-child:after{display:none}
.breadcrumb-menu span ,.breadcrumb-menu ul li a:hover{
  color: #03a9f4;
}
.breadcrumb-menu ul li a {
  color: #fff;
  font-weight: 300;
  font-size: 14px;
}
/* blog */
.our-blog-area{}
.single-blog {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}
.single-blog:hover{box-shadow:0 0 10px 0 rgba(0,0,0,0.15)}
.bolg-img{}
.bolg-img img {
  width: 100%;
}
.blog-img-2 > img {
  width: 100%;
}
.bolg-img a{position:relative;display:block;}
.bolg-img a::before {
  background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: all 0.3s ease 0s;
  width: 100%;
}
.single-blog:hover .bolg-img a::before{opacity:1;}
.blog-text {
  padding: 25px 15px;
}
.blog-text h4{}
.blog-text h4 a{
  color: #333333;
  font-size: 15px;
  transition:.3s;
}
.blog-text h4 a:hover{color:#03A9F7;}
.blog-date{}
.blog-date span {
  color: #666;
  font-size: 12px;
  margin-right: 10px;
}
.blog-date span i {
  font-size: 14px;
  margin-right: 8px;
}
.blog-text p {
  color: #555555;
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  margin-bottom: 12px;
  margin-top: 6px;
  word-spacing: 1px;
}
.blog-text a {
  color: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  transition: all 0.3s ease 0s;
}
.blog-text a:hover{color:#3399FF;}
/* blog-left-area */
.single-left-blog{}
.blog-search{}
.sidebar-widget {
  overflow: hidden;
  margin-bottom:50px
}

form#search {
  position: relative;
}
form#search  input {
  border: 2px solid #eee;
  float: left;
  height: 36px;
  padding-left: 20px;
  padding-right: 110px;
  width: 100%;
}
form#search button {
  background: #3399ff none repeat scroll 0 0;
  border: 2px solid #3399ff;
  font-weight: 700;
  height: 36px;
  padding: 0 20px;
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  transition:.3s;
}
.single-left-blog h5{}
.blog-search button:hover{background:#26CCFF;border-color:#26CCFF;color:#999;}
.blog-left-text{}
.sidebar-title {
  border-bottom: 1px solid #e5e5e5;
  color: #333;
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 17px;
  margin-bottom: 30px;
  padding-bottom: 13px;
  position: relative;
  text-transform: capitalize;
}
.sidebar-title::before {
  background: #03a9f4 none repeat scroll 0 0;
  bottom: -1px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  width: 50%;
}
.blog-left-text{}
ul.sidebar-link{}
ul.sidebar-link li {
  margin-bottom: 12px;
}
ul.sidebar-link li:last-child{margin-bottom:0}
ul.sidebar-link li a {
  color: #666;
  display: block;
  font-size: 14px;
  font-weight: 300;
  position: relative;
}
ul.sidebar-link li a:hover{color:#3399FF}
.blog-left-info{}
.Tags{
 border-bottom: 1px solid #e5e5e5;
  color: #333;
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 17px;
  padding-bottom: 13px;
  padding-top: 40px;
  text-transform: capitalize;
  position:relative;
}
.Tags::before {
   background: #03a9f4 none repeat scroll 0 0;
  bottom: -1px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  width: 50%;
}
.blog-left-info{}
ul.tag{}
ul.tag li {
  display: inline-block;
  margin-bottom: 8px;
  margin-right: 8px;
}
ul.tag li a {
  border: 1px solid #e8e8e8;
  color: #333333;
  display: inline-block;
  font-size: 13px;
  padding: 3px 17px;
  text-align: center;
  transition:.3s;
}
ul.tag li a:hover{background:#03A9F4;color:#fff;border-color:#03A9F4}

/* blog-story-area */
.blog-story-area{}
.blog-story {
  margin-bottom: 30px;
}
.blog-img-2 {
  margin-bottom: 30px;
}
.blog-header{}
.blog-header h1 {
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
}
.story-hbtitle p {
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  margin-bottom: 20px;
}
.story-hbtitle h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
}
.tab-info{}
.tab-info p {
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  margin-bottom: 20px;
}
.meta-info {
  margin-bottom: 50px;
}
.meta-info span {
  margin-right: 20px;
}
.meta-item {
  font-size: 1.2rem;
  font-weight: 300;
}
.meta-item i {
  margin-right: 5px;
}
.contact-form{}
.contact-form h3{
  font-size: 2.5rem;
}
.contact-form p {
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
}
.contact-form label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}
.contact-form textarea {
  border: 1px solid #e8e8e8;
  color: #afafaf;
  font-size: 12px;
  font-weight: 500;
  height: 168px;
  margin-bottom: 20px;
  padding: 6px 15px;
  width: 100%;
}
.btn{background: #03a9f4 none repeat scroll 0 0;}
.contact-form input {
  border: 1px solid #e8e8e8;
  color: #8f8f8f;
  font-size: 12px;
  font-weight: 500;
  height: 36px;
  margin-bottom: 15px;
  padding: 8px;
  width: 100%;
}
/* map */
.map-size{height:350px;width:100%}
/* 17. contact-area */
.contact-area{}
.single-address {
  margin-bottom: 45px;
}
.contact-icon {
  margin-bottom: 20px;
}
.contact-icon i {
  background: rgba(0, 0, 0, 0) linear-gradient(to right, #03f2e9 0%, #01abe3 100%) repeat scroll 0 0;
  border-radius: 50%;
  color: #ffffff;
  font-size: 24px;
  height: 50px;
  line-height: 48px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 50px;
}
.contact-icon i:hover{background:#009EE2}
.contact-info h4 {
  color: #282828;
  font-size: 14px;
  margin-bottom: 8px;
  text-transform: capitalize;
}
.contact-info span {
  display: block;
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
}
.contact-form {}
.contact-form h3 {
  font-size: 25px;
}
#contact-form {}
#contact-form input {
  border: 1px solid #dddddd;
  color: #565656;
  margin-bottom: 30px;
  padding: 7px 10px;
  width: 100%;
}
#contact-form textarea {
  border: 1px solid #dddddd;
  color: #666666;
  margin-bottom: 30px;
  padding: 10px;
  width: 100%;
}
#contact-form button {
  background: rgba(0, 0, 0, 0) linear-gradient(to right, #03f2e9 0%, #01abe3 100%) repeat scroll 0 0;
  border: medium none;
  border-radius: 50px;
  color: #ffffff;
  display: inline-block;
  float: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  margin-left: 16px;
  padding: 12px 35px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
}
#contact-form button:hover{background:#009EE2}
.counter-area .col-md-3:last-child .single-counter{border-right:0;}
/* 18. skill */
.progress-circular {
  text-align: center;
}
.progress-h4 {
  color: #fff;
}
.our-skill-area {
  background: rgba(0, 0, 0, 0) url("img/bg/bg-skill.jpg") no-repeat fixed center center / cover ;
  padding: 151px 0 160px;
}

#scrollUp {
  background: #000000 none repeat scroll 0 0;
  bottom: 85px;
  color: #ffffff;
  font-size: 20px;
  height: 40px;
  line-height: 36px;
  right: 30px;
  text-align: center;
  width: 40px;
  transition:.3s
}
#scrollUp:hover{background:#009EE2}

.mix{
  transition: all .3s;
}

/* css end */