/* google fonts */

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,700,900");
@import "https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700";


/*----------------------------------------*/
/*  1.  Theme default CSS
/*----------------------------------------*/
html, body {height: 100%;}
.f-left {float:left}
.f-right {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 {width:100%;height:auto}
.fix {overflow:hidden}
p {margin:0 0 15px;}
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 10px;
  font-family: "Poppins", sans-serif;
  color: #000;
  font-weight: 500;
  letter-spacing: 0px;    
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a { 
    color: inherit 
}
a {
    transition: all 0.3s ease 0s;
    text-decoration:none;
    color: #09c4f2;
}
a:hover {
  color: #000;
  text-decoration: none;
  color: #aeaeae;    
}
a:active {
  outline: 0 none;
}
ul{
list-style: outside none none;
margin: 0;
padding: 0
}
.clear{clear:both}
body {
    font-family: "Source Sans Pro", sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.8;
    color: #666;
}
::-moz-selection {
    background-color: #191b1d;
    color: #fff;
    text-shadow: none;
}
::selection {
  background-color: #191b1d;
  color: #fff;
}
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
hr {
  margin-bottom: 0;
  margin-top: 0;
}
blockquote {
  font-family: "Merriweather",serif;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 0;    
}
.btn {
  border: 0 none;
  border-radius: 0;
  font-family: "Poppins",sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  overflow: hidden;
  padding: 6px 12px 4px;
  text-transform: uppercase;
}
.btn-xl {
  height: 50px;
  line-height: 50px;
  min-width: 200px;
  padding: 0 26px;
  text-align: center;
}
.btn-lg {
  padding: 10px 30px 8px;
}
.btn-skin {
  background-color: #09c4f2;
  color: #fff;
}
.btn-skin:hover, .btn-skin:focus {
  background-color: #666;
  color: #fff;
}
.btn-dark {
  background-color: #666;
  color: #fff;
}
.btn-dark:hover, .btn-dark:focus {
  background-color: #09c4f2;
  color: #fff;
}
.btn-border-white {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.btn-border-white:hover, .btn-border-white:focus {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.95);
  color: #333;
}
/*************************
   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*/
 .black-bg { background: #252525 !important; }
 .white-bg { background: #fff !important; }
 .gray-bg { background: #f6f6f6 !important; }
 .blue-bg { background: #4FC1F0 !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-25 { margin-top: 25px }
.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 !important }
.mb-10 { margin-bottom: 10px }
.mb-15 { margin-bottom: 15px }
.mb-20 { margin-bottom: 20px }
.mb-25 { margin-bottom: 25px }
.mb-30 { margin-bottom: 30px }
.mb-35 { margin-bottom: 35px }
.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 }
/*************************
        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-25 { padding-bottom: 25px }
.pb-30 { padding-bottom: 30px }
.pb-40 { padding-bottom: 40px }
.pb-45 { padding-bottom: 45px }
.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 }
/*************************
        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-35 { padding: 35px 0 }
.ptb-40 { padding: 40px 0 }
.ptb-45 { padding: 45px 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 }
/***************************
    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; }
/*Opacity background*/
 .bg-opacity-black-10:before, .bg-opacity-black-20:before, .bg-opacity-black-30:before, .bg-opacity-black-40:before, .bg-opacity-black-50:before, .bg-opacity-black-60:before, .bg-opacity-black-70:before, .bg-opacity-black-80:before, .bg-opacity-black-90:before,  .bg-opacity-white-10:before,  .bg-opacity-white-20:before,  .bg-opacity-white-30:before,  .bg-opacity-white-40:before,  .bg-opacity-white-50:before,  .bg-opacity-white-60:before,  .bg-opacity-white-70:before,  .bg-opacity-white-80:before,  .bg-opacity-white-90:before{
    content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; 
 }
 .bg-opacity-black-10:before {  background: rgba(0, 0, 0, 0.1);}
 .bg-opacity-black-20:before {  background: rgba(0, 0, 0, 0.2);}
 .bg-opacity-black-30:before {  background: rgba(0, 0, 0, 0.3);}
 .bg-opacity-black-40:before {  background: rgba(0, 0, 0, 0.4);}
 .bg-opacity-black-50:before {  background: rgba(0, 0, 0, 0.5);}
 .bg-opacity-black-60:before {  background: rgba(0, 0, 0, 0.6);}
 .bg-opacity-black-70:before {  background: rgba(0, 0, 0, 0.7);}
 .bg-opacity-black-80:before {  background: rgba(0, 0, 0, 0.8);}
 .bg-opacity-black-90:before {  background: rgba(0, 0, 0, 0.9);}

 .bg-opacity-white-10:before {  background: rgba(255, 255, 255, 0.1);}
 .bg-opacity-white-20:before {  background: rgba(255, 255, 255, 0.2);}
 .bg-opacity-white-30:before {  background: rgba(255, 255, 255, 0.3);}
 .bg-opacity-white-40:before {  background: rgba(255, 255, 255, 0.4);}
 .bg-opacity-white-50:before {  background: rgba(255, 255, 255, 0.5);}
 .bg-opacity-white-60:before {  background: rgba(255, 255, 255, 0.6);}
 .bg-opacity-white-70:before {  background: rgba(255, 255, 255, 0.7);}
 .bg-opacity-white-80:before {  background: rgba(255, 255, 255, 0.8);}
 .bg-opacity-white-90:before {  background: rgba(255, 255, 255, 0.9);}


/*image background*/
 .bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .bg-8, .bg-9, .bg-10{
    background-attachment: fixed; background-clip: initial; background-color: rgba(0, 0, 0, 0); background-origin: initial; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 0;
 }
 .bg-1 {
  background: url(../../images/bg/1.jpg);}
 .bg-2 { background: url(../../images/bg/2.jpg);}
 .bg-3 { background: url(../../images/bg/3.jpg);}
 .bg-4 { background: url(../../images/bg/4.jpg);}
 .bg-5 { background: url(../../images/bg/5.jpg);}
 .bg-6 { background: url(../../images/bg/6.jpg);}
 .bg-7 { background: url(../../images/bg/7.jpg);}
 .bg-8 { background: url(../../images/bg/8.jpg);}
 .bg-9 { background: url(../../images/bg/9.jpg);}
 .bg-10 { background: url(../../images/bg/10.jpg);}

 
 
/*------------------------------------------------------------------
[Table of contents]

1. Header Top Area
2. Header Area
3. Breadrumb Area
4. Slider Area
5. About Area
6. Why Choose Area
7. Portfolio Area
8. Testimonial Area
9. Quote Area
10. Team Area
11. Pricing Area
12. Blog Area
13. Contact Area
14. Footer Area
15. Back to Top Area
16. 404 Error Area
17. Pagination Area
-------------------------------------------------------------------*/

/* some Custom CSS-code */

/***************************
    Header Top Area
****************************/

.header-top-area {
  border-bottom: 1px solid #eee;
}

.header-contact ul, .header-login ul{
  margin: 0;
  padding: 0;
}

.header-contact ul li, .header-login ul li{
  display: inline-block;    
  border-left: 1px solid #eee;
  line-height: 40px;
  padding: 0 10px;
}

.header-contact ul li:first-child, .header-login ul li:first-child {
  border-left: 0 none;
}

.header-contact ul li a i, .header-login ul li a i{
  margin-right: 5px;
}

.header-contact ul li a, .header-login ul li a{
  color: #9a9a9a;
  font-family: "Source Sans Pro",sans-serif;
  font-size: 12px;
  transition: .3s;    
}
.header-contact ul li a:hover, .header-login ul li a:hover{
    color: #09c4f2;
}
/***************************
    Header Area
****************************/
.header-area.bs2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  transition: all 0.5s ease 0s;
}
.header-area .logo h2 {
  color: #505050;
  font-weight: 700;
  margin-top: 21px;
  text-transform: uppercase;
}
.header-area.bs2.scroll-header .logo h2 {
  color: #505050;
}
.header-area.bs2.scroll-header{
  transition: all 0.4s ease;
}
.header-area.bs2 .logo h2 {
  color: #fff;
}
.mainmenu ul{
    text-align: right;
}
.mainmenu ul li {
  display: inline-block;  
  position: relative;    
}
.mainmenu ul li a {
  color: #666;
  display: inline-block;
  font-family: "Poppins",sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 25px 15px;
  text-transform: uppercase;
  transition: .3s;    
}
.mainmenu ul li a i{
    margin-left: 3px;
}
.header-area.bs2 .mainmenu ul li a {
  color: #fff;  
}
.header-area.bs2.scroll-header .mainmenu ul li a {
  color: #666;  
}
.mainmenu ul li:hover > a {
  color: #09c4f2;
}
.header-area.bs2 .mainmenu ul li:hover > a {
  color: #09c4f2;
}
.header-area.bs2.scroll-header .mainmenu ul li:hover > a {
  color: #09c4f2;
}
.mainmenu ul li ul.dropdown {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15); 
  border: 0 none;    
  position: absolute;
  right: 0;
  top: 110%;
  width: 200px;
  background: #fff;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  z-index: 11;
}
.mainmenu ul li ul li{
    display: block;
}
.mainmenu ul li ul li a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  padding: 8px 15px;
  text-transform: capitalize;
  display: block; 
  color: #666;    
}
ul.dropdown > li > a:focus, ul.dropdown > li > a:hover {
  background-color: #f5f5f5;
  color: #262626;
  text-decoration: none;
}
.header-area.bs2 .mainmenu ul li ul li a {
  color: #666;    
}
.mainmenu ul li:hover ul.dropdown{
  opacity: 1;
  visibility: visible;
  top: 90%;    
}
.header-area.scroll-header {
  background: #fff none repeat scroll 0 0;
  border-bottom: 1px solid #e7e7e7;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99;
}
.scroll-header .mean-container a.meanmenu-reveal span {
	background: #505050 !important;
}
.scroll-header .mean-container a.meanmenu-reveal {
  color: #505050;
}
/***************************
    Breadrumb Area
****************************/
.breadrumb-area {
  background: url(img/others/b-crumb.jpg);
}
.breadrumb-area h3 {
  text-transform: uppercase;
  color: #fff;
}
/***************************
    Slider Area
****************************/
.single-slider{
    position: relative;
}
.slider-area.bs2 .slider-image img{
  height: 100vh;
  width: 100%;
}
.slider-area.por .slider-image img{
  height: 100vh;
  width: 100%;
}
.slider-content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}
.single-slider.b1 .slider-content.bs1, .single-slider.b1 .slider-btn.bs1{
    left: 110px;    
} 
.slider-content h3 {
  color: #666;
  font-family: "Source Sans Pro",sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}
.single-slider.b1 .slider-content h3{
    color: #fff;
}
.slider-content h2 {
  color: #000;
  font-size: 60px;
  font-weight: 600;
  line-height: 70px;
  text-transform: uppercase;
}
.single-slider.b1 .slider-content h2{
    color: #fff;
}
.single-slider.por .slider-content h2 {
  color: #fff;
  font-size: 60px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 36px;
  max-height: none;
  max-width: none;
  padding: 6px 0 15px;
  text-transform: capitalize;
}
.single-slider.pho .slider-content h2 {
  color: #fff;
  font-size: 25px;
  margin-bottom: 0;
  padding: 0;
  line-height: 1;
}
.slider-content p {
  color: #666;
  font-family: "Source Sans Pro",sans-serif;
  font-size: 16px;
  text-transform: uppercase;
}
.single-slider.por .slider-content p {
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 12px;
  margin: 0;
}
.single-slider.pho .slider-content p {
  font-size: 16px;
  color: #fff;    
}
.single-slider.b1 .slider-content p{
    color: #fff;
}
.slider-btn {
  margin-top: 35px;
}
.h-s-btn1 {
  background-color: #09c4f2;
  border-radius: 100px;
  color: #fff;
  cursor: pointer;
  font-family: "Poppins",sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 12px 25px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  margin-right: 10px;    
}
.h-s-btn1:hover{
    background: #fff;
    color: #000;
}
.h-s-btn2 {
  background-color: #555;
  border-radius: 100px;
  color: #fff;
  cursor: pointer;
  font-family: "Poppins",sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 12px 25px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  margin-left: 10px;     
}
.single-slider.por .h-s-btn2 {
  border: 1px solid #fff;
  color: #fff;
  background: inherit;    
}
.h-s-btn2:hover{
    background: #555555;
}
.single-slider .h-s-btn2:hover{
    background: #fff;
    color: #555;
}
.owl-prev{
  font-size: 50px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.owl-prev i {
  color: #fff;
}
.slider-area:hover .owl-prev {
  opacity: 1;
  visibility: visible;
  left: 40px;
}
.owl-next {
  font-size: 50px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.owl-next i {
  color: #fff;
}
.slider-area:hover .owl-next {
  opacity: 1;
  visibility: visible;
  right: 40px;
}
/***************************
    Services Area
****************************/
.services-area.abt{
    background: #F7F9FA;    
}
.section-title p {
  font-family: "Merriweather",serif;
  font-size: 1.6rem;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 0;
  text-transform: capitalize;
}
.section-title h2 {
  color: #000;
  font-size: 3.5rem;
  font-weight: 600;
  letter-spacing: -1px;
  text-transform: capitalize;
}
.section-title.bs1 h2 {
  color: #fff;
}
.services-pra {
  line-height: 3.5rem;
  margin: 0 auto;
  width: 65%;
  margin: auto;
}
.single-service .icon-box{
    margin-right: 20px;
}
.single-service .icon-box i {
  border-radius: 50%;
  color: #09c4f2;
  font-size: 30px;
  line-height: 60px;
  text-align: center;
  width: 60px;
  transition: .3s;
}
.single-service.s2 .icon-box i {
  color: #191b1d;
}
.service-content {
  overflow: hidden;
}
.service-content h3 {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.service-content p {
  margin-bottom: 0;
}
.single-service:hover .icon-box i{
    background: #09c4f2;
    color: #fff;
}
.single-service.s2:hover .icon-box i{
    background: inherit;
    color: inherit;
}
/***************************
    About Area
****************************/
.about-content h2 {
  margin-bottom: 20px;
  text-transform: uppercase;
}
.skill-progress h4 {
  color: #666666;
  font-family: "Raleway",sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 12px;
  text-transform: uppercase;
  font-weight: 500;
}
.skill-progress span{
    float: right;
    font-weight: bold;
}
.progress {
  height: 2px;
}
.progress-bar{
    background: #09c4f2;
}
/***************************
    Why Choose Area
****************************/
.why-choose-area {
  background: rgba(0, 0, 0, 0) url("img/others/why-choose.jpg") repeat scroll center center;
}
.why-choose-area h2 {
  color: #fff;    
  font-size: 28px;
  font-weight: 500;
  text-transform: uppercase;
}
.why-choose-area p {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  width: 68%;
}
.why-choose-area a {
  background-color: #03a9f4;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  padding: 10px 20px;
  transition: all 0.3s ease 0s;
  text-transform: capitalize;
  border: 0 none;    
}
.why-choose-area a:hover{
    background: #09c4f2;
}
/*How We Work Area*/
.how-we-work-area{
    background: #09c4f2;
}
.single-how-work h2 {
  font-size: 90px;
}
.single-how-work h4{
    color: #fff;
    text-transform: uppercase;
}
.single-how-work p{
    margin-bottom: 0;
}
/***************************
    Portfolio Area
****************************/
.portfolio-menu button {
  background: #eeeeee none repeat scroll 0 0;
  border: medium none;
  border-radius: 2px;
  color: #333333;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  line-height: 13px;
  margin: 0 5px 10px;
  padding: 12px 15px;
  position: relative;
  text-transform: capitalize;
  transition: all 0.3s ease 0s;
}
.portfolio-menu button:hover {
  background: #09c4f2 none repeat scroll 0 0;
  color: #fff;
}

.portfolio-menu .active {
  background: #09c4f2 none repeat scroll 0 0;
  color: #fff;  
}
.single-portfolio{
    position: relative;
}
.single-portfolio::before {
  background: #000 none repeat scroll 0 0;
  content: "";
  height: 100%;
  opacity: 0;
  position: absolute;
  transition: all 0.3s ease 0s;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
}
.single-portfolio:hover.single-portfolio::before{
  opacity: 0.7;        
}
.portfolio-btn {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  text-align: center;
  transform: translateY(-80%);
  opacity: 0;
  visibility: hidden;
  transition: .3s;    
}
.portfolio-btn a {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin: 1px;
  text-align: center;
  width: 40px;
  transition: .3s;    
}
.portfolio-btn a:hover{
    background: #09c4f2; 
}
.single-portfolio:hover .portfolio-btn{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);    
}
/***************************
    Testimonial Area
****************************/
.single-testimonial {
  background-color: #f6f8fa;
  border-radius: 3px;
  margin: 0 15px;
  padding: 15px;
}
.single-testimonial p{
    color: #191b1d;
}
.single-testimonial h4 {
  color: #f56363;
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
}
.testimonial-content i {
  color: #666666;
}
.testimonial-img {
  margin-right: 20px;
  width: 90px;
}
.testimonial-img img{
    border-radius: 50%;
}
.client-area.bs1 {
  background: rgba(0, 0, 0, 0) url("img/others/quotes.jpg") no-repeat fixed 0 0 / cover ;
  padding: 70px 0;
  color: #fff;    
}
.client-area.bs1 h2{
  color: #fff;    
}
/***************************
    Quote Area
****************************/
.quote-area {
  background: rgba(0, 0, 0, 0) url("img/others/quotes.jpg") no-repeat fixed 0 0 / cover ;
  padding: 100px 0;
}
.quote-area p {
  color: #fff;
  font-family: "Merriweather",serif;
  font-size: 30px;
  font-style: italic;
  font-weight: 400;
  line-height: 40px;
}
/***************************
    Team Area
****************************/
.single-team{
    position: relative;
}
.single-team::before{
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: #666;
    opacity: 0;
    transition: .3s;
}
.single-team:hover.single-team::before{
    opacity: .8;
}
.team-content {
  bottom: -56px;
  left: 0;
  position: absolute;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: .3s;    
}
.single-team:hover .team-content{
    opacity: 1;
    visibility: visible;
    bottom: 25px;
}
.team-content h2 {
  color: #fff;
  font-family: "Poppins",sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0;
}
.team-content p {
  color: #fff;
  display: block;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;    
}
.team-social a {
  font-size: 18px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
  border-radius: 3px;
  display: block;
  float: left;
  margin: 5px 2px;
  transition: all 0.3s ease 0s;
  background: #f3f3f3;    
}
/***************************
    Pricing Area
****************************/
.pricing-box {
  margin-bottom: 30px;
  padding: 30px 20px;
}
.pricing-box h3 {
  font-size: 16px;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.pricing-box h1 {
  font-size: 80px;
  line-height: 80px;
  margin-bottom: 20px;
}
.pricing-box span {
  display: block;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.pricing-box ul {
  padding-bottom: 25px;
}
.pricing-box ul li {
  text-transform: capitalize;
}
.pricing-box.theme-bg {
  background-color: #09c4f2;
}
/***************************
    Blog Area
****************************/
.single-blog-grid {
  border: 1px solid #eee;
}
.single-blog-grid.single-blog {
  border: 0 none;
}
.blog-grid-content {
  padding: 15px;
}
.blog-grid-content h3 a{
  color: #000;
  font-family: "Merriweather",serif;
  font-style: italic;
  font-weight: 400;
  transition: .3s;    
}
.blog-grid-content h3 a:hover{
  color: #09c4f2;    
}
.blog-grid-content ul li::after {
  color: #ddd;
  content: "/";
  display: inline-block;
  margin: 0 5px;
}
.blog-grid-content ul li:last-child::after {
  content: "";
}
.blog-grid-content ul li {
  color: #999;
  font-size: 12px;
  padding: 0;
  text-transform: uppercase;
  display: inline-block;    
}
.blog-grid-content ul li a:first-child {
  margin-left: 5px;
}
.blog-grid-content > p {
  margin-bottom: 0;
}
.single-post-btn{
    margin-top: 15px;
}
.single-widget h3 {
  color: #333;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 15px;
  text-transform: uppercase;
}
.single-widget input{
    height: 50px;
}
.single-widget .form-control {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #ddd;
  border-radius: 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  font-size: 13px;
  font-weight: 500;
  padding-left: 20px;
  width: 100%;
}
.single-widget ul li a {
  display: block;
  padding: 4px 0;
  text-transform: uppercase;
  transition: .3s;    
}
.single-widget .cat-list li a:hover {
  margin-left: 5px;
}
.single-widget .cat-list li a::after {
  content: "ï„…";
  font-family: fontawesome;
  margin-left: 8px;
  position: absolute;
}
.single-widget .tag-list li{
  display: inline-block;
}
.single-widget .tag-list li a {
  background-color: #333;
  color: #fff;
  display: block;
  font-size: 11px;
  font-weight: 400;
  margin: 2px;
  padding: 3px 8px;
  text-transform: uppercase;
}
.single-widget .tag-list li a:hover {
  background-color: #09c4f2;
  color: #fff;   
}
.single-comment {
  margin-bottom: 20px;
  overflow: hidden;
}
.middhe-comment {
  margin-left: 8%;
}
.comment-img {
  display: block;
  float: left;
  width: 10%;
}
.comment-img img {
  border-radius: 50%;
}
.single-comment span{
    display: block;
}
.comment-con {
  float: left;
  padding-left: 10px;
  width: 90%;
}
.comment-con p {
  font-size: 13px;
  margin-bottom: 2px;
}
.comment-con a{
    color: #09c4f2;
    transition: .3s;
    font-weight: 500;
}
.comment-con a:hover {
  color: inherit;
}
/***************************
    Contact Area
****************************/
.section-title-three{
  font-size: 20px;
  text-transform: uppercase;
}
.single-contact span{
    color: #666666;
    font-size: 14px;
    margin: 0;
    display: block;
}
.single-contact i{
    color: #09c4f2;
    display: block;
    font-size: 26px;
    margin-bottom: 15px;
    margin-top: 0;
}
.single-contact span a{
    color: #09c4f2;
    transition: .3s;
}
.single-contact span a:hover{
    color: inherit;
}
#map{
    height: 385px;
}
#map3{
    height: 400px;
    display: block;
}
.contact-form input,.contact-form textarea {
  background: #f8f8f8 none repeat scroll 0 0;
  font-size: 12px;
  text-transform: uppercase;
  -moz-appearance: none;
  border: 1px solid #ebebeb;
  border-radius: 0;
  color: #666666;
  letter-spacing: 0.05em;
  box-shadow: none;
  margin-bottom: 30px;
  min-height: 50px;
  padding: 10px 20px;
}
.contact-form  .form-group{
    margin-bottom: 0;
}
.contact-form textarea {
    margin-bottom: 30px;
    max-height: 211px;
    max-width: 100%;
    min-height: 130px;
    padding: 20px;
}
.form-control:focus {
  border-color: #09c4f2;
  box-shadow: none;
}
.contact-form button{
    border-radius: 0;
    letter-spacing: 0.1em;
    margin: 0;
    padding: 14px 24px;
    width: 100%;
    background: #09c4f2;
    transition: .3s;
    text-transform: uppercase;
}
.contact-form button:hover{
    background: #666;
    color: #fff;
}
/***************************
    Footer Area
****************************/
footer{
    background: #212121;
}
.footer-logo a {
  color: #fff;
  text-transform: uppercase;
}
.footer-top {
  overflow: hidden;
}
footer h3{
    color: #fff;
    font-size: 16px;
    margin-bottom: 20px;
    text-transform: uppercase;
}
footer p{
    color: #999;
    margin: 0 0 10px;
}
.company-menu ul li a {
  transition: all 0.3s ease 0s;
  text-transform: capitalize;
}
.company-menu ul li a:hover {
  margin-left: 5px;
}
.leatest-post ul li a{
    color: #aeaeae;
    transition: .3s;
}
.leatest-post ul li a:hover {
  margin-left: 5px;
  color: #09c4f2;    
}
.footer-bottom{
    padding-top: 25px;
}
.footer-social ul{
    text-align: right;
}
.footer-social ul li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}
.footer-social ul li a {
  color: #aeaeae;
  text-transform: capitalize;
  transition: .3s;    
}
.footer-social ul li a:hover {
  color: #09c4f2;
}
.footer-logo > h2 {
  margin-bottom: 0;
}
/***************************
    Back to Top Area
****************************/
.top-btn {
	position: fixed;
	right: 1%;
	bottom: -7.5%;
	height: 15px;
	width: 40px;
	padding: 3px 5px;
	font-size: 10px;
	font-weight: bold;
	color: transparent;
	opacity: 0.5;
	z-index: 3;
	visibility: hidden;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.25s ease-in-out;
	background-color: #858585;
}
.top-btn:hover,.top-btn:focus {
    opacity: 1;
    text-decoration: none;
}
.top-btn::before,
.top-btn::after {
	content: '';
	position: absolute;
	left: 0;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top: 0;
}

.top-btn::before {
	top: -20px;
	z-index: 4;
	border-bottom: 20px solid #858585;
}

.top-btn::after {
	bottom: 0;
	z-index: 5;
	border-bottom: 20px solid #505050;
}
.top-btn:hover,
.top-btn:focus {
	height: 40px;
	color: #212223;
}
.top-btn {
	display: block;
	bottom: 1.25%;
	visibility: visible;
}
/***************************
    404 Error Area
****************************/
.not-found-area img {
  display: block;
  margin: 0 auto;
  width: 200px;
}
/***************************
    Pagination Area
****************************/
.pagination{
    display: block;
}
.pagination ul{
    text-align: center;
}
.pagination ul li {
  display: inline-block;
}
.pagination ul li.active a{
  background-color: #09c4f2;
  border-color: #337ab7;
  color: #fff;
  font-weight: bold;    
}
.pagination ul li a {
  border: 0 none;
  color: #09c4f2;
  padding: 5px 10px;
  transition: .3s;    
}
.pagination ul li a:hover{
  background-color: #eee;
  border-color: #ddd;
  color: #23527c;
}


/*div#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #fff url("img/others/loader.gif") no-repeat center center;
}*/

/*Css End Here*/




table {
  width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-collapse: collapse;
  margin-bottom: 1em;
}
table th, table td {
  padding: 0.5em 1em;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  white-space: pre;
}
table thead th,
table tbody td {
  text-align: center;
}
table thead {
  color: white;
  background: #0cf;
}
table thead th {
  padding: 1em;
}
table[data-comparing="active"] tbody th {
  border-bottom: none;
  font-size: 0.75em;
  color: #767676;
  padding-bottom: 0;
}