/*=======================================================================
* Template Name: Kinger |  One Page Template for Portfolio & Business & landing page
* Template URI: 
* Author: ThemeHolder
* Author URI: 
* Description: Kinger |  One Page Template for Portfolio & Business & landing page
* Version: 2.0
* License: GPL v2 or later
* License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
* Tags: html, template, portfolio landing, business portfolio,  marketing, Kinger, Landing page 
======================================================================= */
/*======================
  Index CSS

  * Base CSS
  * Slicknav CSS
  * Sticky Header CSS
  * Section Title CSS
  * Header CSS
  * Hero area CSS
  * Slider area CSS
  * About Area CSS
  * Feature Area CSS
  * Services Area CSS
  * Call To Action Area CSS
  * Portfolio Area CSS
  * Product Adds Area CSS
  * CounterUp Area CSS
  * Team Area CSS
  * Pricing Table Area CSS
  * Testimonial Area CSS
  * Blog Area CSS
  * Single Blog CSS
  * Breadcumb Area CSS
  * Company Logo Area CSS
  * Contact Area CSS
  * Social Area CSS
  * Footer Area CSS
=======================*/
/**************************************************
    START BASE CSS
************************************************* */
 @import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,300i,400,400i,600,600i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800');
 html, body{
     height: 100%;
}
 body {
     font-size: 14px;
     color: #34495E;
     line-height: 24px;
     font-family: 'Open Sans', sans-serif;
}
 .alignleft {
     float: left;
     margin-right: 15px;
}
 .alignright {
     float: right;
     margin-left: 15px;
}
 .aligncenter {
     display: block;
     margin: 0 auto 15px;
}
 a, a:hover, a:focus {
     outline: none;
     text-decoration: none;
     transition: all 0.5s ease 0s;
     -webkit-transition: 0.5s;
     -ms-transition: 0.5s;
}
 img {
     max-width: 100%;
     height: auto;
}
 ul,ol{
     margin: 0;
     padding: 0;
     list-style: none;
}
 h1, h2, h3, h4, h5, h6 {
     margin: 0 0 15px;
     font-weight: 700;
     font-family: Verdana, sans-serif;
}
 .pt-110{
     padding-top: 110px 
}
 .pt-100{
     padding-top: 100px;
}
 .pt-90{
     padding-top: 90px;
}
 .pt-80{
     padding-top: 80px;
}
 .pt-70{
     padding-top: 70px;
}
 .pt-60{
     padding-top: 60px;
}
 .pt-50{
     padding-top: 50px;
}
 .pt-40{
     padding-top: 40px;
}
 .pt-30{
     padding-top: 30px;
}
 .pb-70{
     padding-bottom: 70px;
}
.mt {
    margin-top: 150px;
}
/*====================== common CSS =======================*/
 .section-title {
     margin-bottom: 30px;
     padding-bottom: 30px;
     position: relative;
}
 .section-title::before {
     position: absolute;
     content: "";
     width: 50%;
     height: 2px;
     background: #2ea68e;
     bottom: 0;
     left: 0;
     right: 0;
     margin: 0 auto;
}
 .section-title::after {
     position: absolute;
     background: #FFF;
     content: "";
     width: 15px;
     height: 15px;
     left: 0;
     right: 0;
     margin: 0 auto;
     bottom: -6px;
     border-radius: 50%;
     border: 5px solid #2ea68e;
}
 .section-title > h2 {
     text-transform: uppercase;
     font-size: 24px;
     color: #2ea68e;
     margin-bottom: 20px;
}
 .section-padding{
     padding: 90px 0;
}
 .section-padding_pt-0{
     padding-top: 0;
}
 .section-padding_pb-0{
     padding-bottom: 0;
}
 .feature-area, .service-area, .contact-area, .social-arae, .pricing-area, .team-area{
     background: #f7f7f7;
}
 #mobile-menu .slicknav_btn span, .slicknav_nav a, .single-feature:hover .feature-content h3, .item-overlay > a, .item-overlay > span, .service-faq .panel-title > a .service-faq .panel-title > a::after, .single-addreass:hover .addreass-icon, .addreass-info-mail a:hover, .team-social ul li a, .widget-title > h4, .Switcher button, .hero-content a.hero-btn {
     color: #2ea68e;
}
 .company-logo-area, .slicknav_nav a:hover, .social-arae .nav a, .pricing-btn, .feature-title-box, .about-content > h2::after, .team-social ul li a:hover, header.sticky, .addreass-icon, a.cta-btn, input[type="submit"], .portfolio-menu ul li:hover, .portfolio-menu ul li.active{
     background: #2ea68e;
}
 .single-feature:hover, .single-addreass:hover .addreass-icon{
     border-color: #2ea68e;
}
 body.preloader-active {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     overflow: hidden;
}
 .preloader-bg {
     position: fixed;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     background: #2ea68e;
     z-index: 999;
}
 .preloader-spinner {
     background: url(../img/ajax-loader.gif);
     background-position: center center;
     background-repeat: no-repeat;
     width: 100px;
     height: 100px;
     left: 50%;
     top: 50%;
     margin-top: -50px;
     margin-left: -50px;
     position: absolute;
}
 .preloader {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     transition: 1s;
     -webkit-transition: 1s;
     z-index: 9;
     overflow: hidden;
}
 .complete {
     z-index: 0;
}
 .preloader:before {
     position: absolute;
     content: '';
     left: 0;
     width: 50%;
     height: 100%;
     background: #2ea68e;
     transition: 1s;
     -webkit-transition: 1s;
     top: 0;
     z-index: 9;
}
 .preloader.complete:before {
     left: -50%;
}
 .preloader:after {
     position: absolute;
     content: '';
     right: 0;
     top: 0;
     width: 50%;
     height: 100%;
     background: #2ea68e;
     transition: 1s;
     -webkit-transition: 1s;
     z-index: 9;
}
 .preloader.complete:after {
     right: -50%;
}
/*====================== Browser Scroll Control CSS =======================*/
 ::-webkit-scrollbar {
     width: 10px;
}
 ::-webkit-scrollbar-track {
     box-shadow: inset 0 0 5px grey;
     border-radius: 10px;
}
 ::-webkit-scrollbar-thumb {
     background: #34495E;
     border-radius: 10px;
}
/*====================== slick nav CSS =======================*/
 .slicknav_menu {
     display: none;
     background: transparent;
}
 #mobile-menu .slicknav_btn {
     background: #ffffff none repeat scroll 0 0;
     border-radius: 2px;
     display: block;
     padding: 10px 20px;
     top: -70px;
}
#mobile-menu .slicknav_btn span {
     text-shadow: none;
}
 .slicknav_nav {
     background: #ffffff;
     text-align: left;
     position: absolute;
     width: 94%;
     top: 73px;
     left: 0;
     right: 0;
     margin: 0 auto;
}
 .slicknav_nav a, a.slicknav_row:hover {
     font-family: Verdana;
     font-size: 14px;
     font-weight: 400;
     margin: 0;
     text-transform: capitalize;
}
 .slicknav_nav a:hover, a.slicknav_row:hover {
     color: #fff;
}
 .slicknav_nav > ul {
     margin: 0;
     padding: 0;
}
 .slicknav_nav li {
     border-bottom: 1px solid #f7f7f7;
}
 .slicknav_nav li:last-child {
     border: none;
}
.slicknav_nav .slicknav_row, .slicknav_nav a {
    padding: 5px 20px;
    margin: 2px 5px;
}
.slicknav_nav .slicknav_row:hover {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 0;
    background: #34495E;
    color: #fff;
}
.slicknav_item.slicknav_row:hover a {
    color: #fff;
}
/*====================== Sticky Header CSS =======================*/
 header.sticky {
     left: 0;
     opacity: 0.95;
     position: fixed;
     top: 0;
     transition: all 0.9s ease 0s;
     width: 100%;
     height: 75px;
}
 header.sticky .logo {
     padding: 15px 0;
     transition: all 0.5s ease 0s;
}
 header.sticky .main-menu {
     margin: 25px 0;
     transition: all 0.5s ease 0s;
}
/*====================== Header CSS =======================*/
 header {
     position: absolute;
     width: 100%;
     z-index: 2;
     left: 0;
}
 .logo {
     padding: 25px 0;
     transition: all 0.5s ease 0s;
}
 .main-menu ul {
     list-style: outside none none;
     margin: 0;
     padding: 0;
}
 .main-menu ul li {
     display: inline-block;
}
 .main-menu {
     margin: 35px 0;
     transition: all 0.5s ease 0s;
}
 .main-menu ul li a {
     color: #ffffff;
     display: block;
     font-size: 14px;
     font-weight: 400;
     padding: 5px 15px;
     text-transform: uppercase;
     font-family: Verdana;
}
 .main-menu ul li a.active {
     box-shadow: 0px 0px 3px;
}
 .main-menu ul li.sub-menu {
     position: relative;
}
 .main-menu ul li.sub-menu ul {
     width: 230px;
     background: #34495E;
     position: absolute;
     top: 180%;
     opacity: 0;
     transition: 0.5s;
     visibility: hidden;
     box-shadow: 0px 8px 30px rgba(52, 73, 94, 0.3);
}
 .main-menu ul li.sub-menu ul li {
     display: block;
     padding: 10px 15px;
     transition: 0.5s;
}
 .main-menu ul li.sub-menu:hover ul {
     top: 120%;
     visibility: visible;
     opacity: 1;
}
 .main-menu ul li.sub-menu ul li:hover {
     background: #fff;
}
 .main-menu ul li.sub-menu ul li:hover a {
     color: #34495E;
}
/*====================== Hero Area CSS =======================*/
 .hero-area {
     height: 100%;
     background:url("../img/hero-bg1.jpg");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
}
 .single-hero {
     display: table;
     height: 100%;
     position: relative;
     width: 100%;
     z-index: 0;
}
 .single-hero:after {
     background: rgba(52, 73, 94, 0.95);
     content: "";
     height: 100%;
     left: 0;
     opacity: 0.3;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: -1;
}
 .hero-wrapper {
     display: table-cell;
     height: 100%;
     vertical-align: middle;
     width: 100%;
}
 .hero-content {
     color: #ffffff;
     text-align: center;
     margin-top: 80px;
}
 .hero-content h1 {
     font-size: 110px;
     font-weight: 700;
     font-style: italic;
     text-transform: uppercase;
}
 .hero-content h2 {
     font-size: 40px;
     font-weight: 700;
     font-style: italic;
     text-transform: uppercase;
}
 .hero-content p {
     margin: 40px 0;
     font-size: 30px;
   line-height: 40px;
}
.hero-content h1 span.cd-words-wrapper {
    margin: 0;
    padding: 0;/*
    font-size: 55px;
*/
font-weight: 600;}
 .video-play-button {
     display: inline-block;
     width: 70px;
     height: 70px;
     border-radius: 50%;
     position: relative;
     margin: 30px 0;
     text-align: center;
     background: #2ea68e;
}
 .video-play-button i {
     color: #fff;
     position: absolute;
     font-size: 28px;
     left: 5px;
     top: 25px;
     line-height: 20px;
     right: 0;
     margin: 0 auto;
     z-index: 9;
}
 .video-play-button::after {
     content: "";
     position: absolute;
     z-index: 1;
     left: 50%;
     top: 50%;
     -webkit-transform: translateX(-50%) translateY(-50%);
     -ms-transform: translateX(-50%) translateY(-50%);
     transform: translateX(-50%) translateY(-50%);
     display: block;
     width: 80px;
     height: 80px;
     border-radius: 50%;
     transition: all 200ms;
     background: #354A5F;
}
 .video-play-button::before {
     content: "";
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
     -webkit-transform: translateX(-50%) translateY(-50%);
     -ms-transform: translateX(-50%) translateY(-50%);
     display: block;
     width: 90px;
     height: 90px;
     border-radius: 50%;
     -webkit-animation: pulse-border 1500ms ease-out infinite;
     animation: pulse-border 1500ms ease-out infinite;
     background: #f7f7f7;
}
 @keyframes pulse-border {
     0% {
         -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
         -ms-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
         transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
         opacity: 1;
    }
     100% {
         transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
         -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
         -ms-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
         opacity: 0;
    }
}
 @-webkit-keyframes pulse-border {
     0% {
         -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
         -ms-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
         transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
         opacity: 1;
    }
     100% {
         transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
         -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
         -ms-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
         opacity: 0;
    }
}
/*====================== Slider Area Css =======================*/
.hero-slider-main {
    background: #596A7B;
}
.single-slide-item::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(52, 73, 94, 0.8);
    left: 0;
    top: 0;
}
.slide-bg-1 {
    background-image: url("../img/slide-bg-1.jpg");
}

.slide-bg-2 {
    background-image: url("../img/slide-bg-2.jpg");
}

.slide-bg-3 {
    background-image: url("../img/slide-bg-3.jpg");
}
.single-slide-item {
    height: 700px;
    display: table;
    width: 100%;
    position: relative;
    text-align: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}
.slide-content-wrapper {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    color: #fff;
}
.slider-wrapper .owl-nav div {
    position: absolute;
    height: 50px;
    width: 50px;
    color: #fff;
    top: 50%;
    margin-top: -25px;
    line-height: 47px;
    font-size: 35px;
    text-align: center;
    -webkit-transition: .5s;
    transition: .5s;
    opacity: 0;
    visibility: hidden;
}
.slider-wrapper .owl-nav div:after {
    position: absolute;
    content: '';
    background: #000000;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    opacity: .3;
}
.slider-wrapper .owl-nav div i {
    position: relative;
    z-index: 1;
}
.slider-wrapper .owl-nav div.owl-prev {
    left: 0px;
}
.slider-wrapper .owl-nav div.owl-next {
    left: auto;
    right: 0px;
}
.hero-slider-main:hover div.owl-next {
    right: 30px;
}
.hero-slider-main:hover div.owl-prev {
    left: 30px;
}
.hero-slider-main:hover .owl-nav div {
    opacity: 1;
    visibility: visible;
}
.slide-content-wrapper h3 {
    font-size: 25px;
    font-weight: 400;
    margin-bottom: 15px;
    color: #ffffff;
    text-transform: uppercase;
}
.slide-content-wrapper h2 {
    font-size: 45px;
    margin-bottom: 15px;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
}
.slide-content-wrapper p {
    font-size: 20px;
    font-weight: 300;
    margin: 20px 0;
}
.owl-item.active .slide-content-wrapper h3 {

    animation: 1s .2s fadeInUp both;
}
.owl-item.active .slide-content-wrapper h2 {

    animation: 1s .4s fadeInUp both;
}
.owl-item.active .slide-content-wrapper p {

    animation: 1s .6s fadeInUp both;
}
.owl-item.active .video-play-button {
  animation: 1s .9s fadeInUp both;
} 
/*====================== About Area CSS =======================*/
 .about-area {
    background: #ffffff;
}
 .about-content {
     font-family: Verdana;
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 35px;
     opacity: 0.7;
}
 .about-content > h2 {
     margin-bottom: 40px;
     text-transform: uppercase;
     position: relative;
}
 .about-content > h2::after {
     bottom: -18px;
     content: "";
     height: 5px;
     left: 0;
     position: absolute;
     width: 100px;
}
 a.cta-btn, input[type="submit"] {
     border-radius: 3px;
     color: #ffffff;
     display: inline-block;
     font-size: 18px;
     font-weight: 600;
     padding: 15px 15px;
     text-transform: uppercase;
     font-family: Verdana;
     border: none;
}
 .cta-btn:hover, input[type="submit"]:hover {
     transform: scale(1.05);
}
 .about-content > p {
     font-style: italic;
}
/*====================== Feature Area CSS =======================*/
 .single-feature {
     box-shadow: 0 0px 10px rgba(0,0,0,0.1);
     position: relative;
     transition: all 0.5s ease 0s;
     border: 1px solid transparent;
     margin-top: 30px;
}
 .feature-icon {
     padding-bottom: 25px;
     font-size: 30px;
     color: #34495E;
}
 .feature-content h3 {
     font-size: 16px;
     text-transform: uppercase;
     transition: all 0.5s ease 0s;
     margin: 0;
}
.feature-content h3 a { color: inherit; transition: all 0s; }
 .feature-content > p {
     font-size: 16px;
     font-style: italic;
     font-weight: 300;
     padding: 25px 0;
}
 .single-feature:hover .feature-title-box {
     top: 0;
}
 .feature-title-box {
     color: #ffffff;
     font-size: 16px;
     font-family: Verdana;
     font-weight: 600;
     height: 60px;
     left: 0;
     letter-spacing: 0.2em;
     margin: 0 auto;
     padding-top: 15px;
     position: relative;
     right: 0;
     text-align: center;
     text-transform: uppercase;
     top: -25px;
     transition: all 0.5s ease 0s;
     width: 140px;
}
 .feature-title-box::after {
     border-bottom: 18px solid #f7f7f7;
     border-left: 70px solid transparent;
     border-right: 70px solid transparent;
     bottom: 0;
     content: "";
     height: 0;
     left: 0;
     position: absolute;
     width: 0;
}
/*====================== Call To Action Area CSS =======================*/
 .col-to-action-area {
     background: url("../img/cta-bg.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     padding: 60px;
     position: relative;
}
 .col-to-action-area::before {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     background: rgba(0,0,0,0.9);
}
 .col-to-action-area h2 {
     font-size: 40px;
     font-weight: 400;
     margin: 0;
     padding-top: 5px;
     text-transform: uppercase;
     color: #ffffff;
}
 .col-to-action-area h2 span {
     font-weight: 600;
}
/*====================== Service Area =======================*/
 .service-box {
     padding: 20px;
     box-shadow: 0px 0px 10px #d7d7d7;
     margin: 15px 0;
     text-align: center;
     transition: 0.5s;
     -webkit-transition: 0.5s;
}
 .service-box:hover {
     box-shadow: 0px 0px 50px #d7d7d7;
     transform: scale(1.1);
}
 .service-area {
     padding: 110px 0;
}
 .service-box h2 {
     font-size: 18px;
     margin: 15px 0;
}
 .service-icon {
     font-size: 30px;
}
/*====================== Portfolio Area CSS =======================*/
.portfolio-area {
    background: #ffffff;
}
 .portfolio-menu {
     margin-top: 30px;
}
 .portfolio-menu ul li {
     border: 1px solid #d7d7d7;
     cursor: pointer;
     display: inline-block;
     font-family: Verdana;
     font-weight: 600;
     padding: 10px 25px;
     text-transform: uppercase;
     transition: all 0.3s ease 0s;
}
 .portfolio-menu ul li:hover, .portfolio-menu ul li.active {
     color: #ffffff;
}
 .single-item {
     display: table;
     height: 100%;
     position: relative;
     text-align: center;
     width: 100%;
     z-index: 1;
     margin-top: 30px;
}
 .item-wrapper {
     display: table-cell;
     height: 100%;
     vertical-align: middle;
     width: 100%;
}
 .item-overlay {
     display: inline-block;
     left: 0;
     margin: 0 auto;
     opacity: 0;
     position: absolute;
     right: 0;
     top: 90%;
     transform: translateY(-50%);
     transition: all 0.7s ease 0s;
     z-index: 1;
}
 .item-overlay > a, .item-overlay > span {
     background: #000000;
     border-radius: 100%;
     display: inline-block;
     font-size: 18px;
     height: 50px;
     line-height: 50px;
     opacity: 0.7;
     transition: all 0.5s ease 0s;
     width: 50px;
}
 .item-img a img {
     width: 100%;
     height: 270px;
}
 .single-item::after {
     background: rgba(52, 73, 94, 0.95);
     content: "";
     height: 100%;
     left: 0;
     opacity: 0;
     position: absolute;
     top: 0;
     transform: scale(-1);
     transition: all 0.9s ease 0s;
     width: 100%;
     z-index: 0;
}
 .single-item:hover .item-overlay {
     opacity: 1;
     top: 55%;
}
 .single-item:hover::after {
     opacity: 0.85;
     transform: scale(1);
}
 .item-overlay > a:hover, .item-overlay > span:hover {
     color: #ffffff;
}
/*====================== Product Adds Area CSS =======================*/
 .product-add-area {
     background: #34495E;
     color: #fff;
     position: relative;
}
 .product-add-area::before {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
}
 .product-add-area h1 {
     text-transform: uppercase;
}
 .product-add-area p {
     margin: 20px 0;
}
/*====================== Count Area CSS =======================*/
 .single-counter {
     text-align: center;
     color: #ffffff;
     padding: 40px 0;
}
 .single-counter i {
     display: block;
     padding-bottom: 15px;
     font-size: 35px;
}
 .single-counter span {
     font-size: 20px;
     font-weight: 900;
}
 .single-counter h2 {
     font-family: Verdana;
     font-size: 18px;
     font-weight: 600;
     margin: 0;
     padding: 10px;
     text-transform: uppercase;
}
 .countup-area {
     background: url("../img/cta-bg.jpg");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
}
 .countup-area::before {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     background: rgba(52, 73, 94, 0.95);
}
/*====================== Team Area CSS =======================*/
 .single-team {
     color: #ffffff;
     overflow: hidden;
     position: relative;
     text-align: center;
     box-shadow: 0px 8px 30px rgba(52, 73, 94, 0.1);
     border-radius: 10px;
}
 .team-content {
     background: rgba(52, 73, 94, 0.9);
     bottom: -90px;
     padding: 30px 0;
     position: absolute;
     transition: all 0.5s ease 0s;
     width: 100%;
     border-radius: 31%;
}
 .team-social ul li {
     display: inline-block;
}
 .team-social ul {
     margin: 0;
     padding: 0;
}
 .team-content h3 {
     font-size: 18px;
     margin: 0;
     text-transform: uppercase;
}
 .team-content span {
     font-size: 14px;
     text-transform: uppercase;
}
 .team-social ul li a {
     background: #ffffff;
     border-radius: 100%;
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
     display: inline-block;
     font-size: 16px;
     height: 40px;
     line-height: 40px;
     width: 40px;
}
 .team-social {
     margin-top: 10px;
     padding-bottom: 20px;
}
 .team-social ul li a:hover {
     color: #ffffff;
     z-index: 9;
}
 .single-team:hover .team-content {
     bottom: -40px;
}
/*====================== Service Faq Area CSS =======================*/
 .service-faq-area {
     background: #f7f7f7 none repeat scroll 0 0;
}
 .panel-heading {
     margin: 0;
     padding: 0;
}
 .service-faq .panel-title > a {
     display: block;
     font-size: 20px;
     font-weight: 800;
     padding: 15px 20px;
     position: relative;
}
 .service-faq .panel.panel-default {
     border-radius: 2px;
     margin-bottom: -5px;
}
 .service-faq .panel-body {
     background: #f7f7f7 none repeat scroll 0 0;
}
 .service-faq .panel-title > a[aria-expanded="true"]::after {
     content: "-";
}
 .service-faq .panel-title > a::after {
     content: "+";
     font-size: 25px;
     position: absolute;
     right: 15px;
     top: 8px;
}
 .service-faq .panel.panel-default:first-child {
     border-bottom: 0 none;
}
 .service-faq .panel.panel-default:last-child {
     border-top: 0 none;
}
 .service-faq .panel-body {
     border-top: 0 none;
     padding: 30px 20px;
     font-size: 14px;
}
/*====================== Company Logo Area CSS =======================*/
 .company-logo {
     text-align: center;
}
 .company-logo li {
     display: inline-block;
     list-style: outside none none;
     margin: 10px;
     transition: all 0.5s ease 0s;
}
 .company-logo-area {
     padding: 35px 0;
}
/*====================== Testimonial Area CSS =======================*/
 .testimonial-area {
     background-size: cover;
     position: relative;
     z-index: 1;
}
 .testimonial-area::after {
     background: #34495E;
     content: "";
     height: 100%;
     left: 0;
     opacity: 0.9;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: -1;
}
 .single-testimonial {
     color: #34495E;
     overflow: hidden;
     background: #ffffff;
     padding: 10px 20px;
     border: 10px solid #ffffff;
     border-radius: 10%;
}
 .client-feedback i {
     font-size: 36px;
}
 .client-feedback p {
     margin: 40px 0;
}
 .client-text {
     margin-right: 20px;
     text-transform: capitalize;
}
 .client-img {
     display: inline-block;
     width: 80px;
}
 .client-img img {
     border-radius: 10%;
}
 .client-text > h3 {
     font-size: 18px;
     margin-bottom: 5px;
     text-transform: capitalize;
}
 .testimonial-menu {
     margin-top: 60px;
}
 .testimonial-menu a img {
     border-radius: 2px;
     box-shadow: 0 0 10px hsl(0, 0%, 40%);
     transition: all 0.5s ease 0s;
     width: 40px;
     border-radius: 50%;
}
 .testimonial-menu a img:hover {
     transform: scale(1.3);
}
 .testimonial-menu a {
     margin: 0 4px;
}
/*====================== Pricing Table Area CSS =======================*/
 .single-pricing-table {
     background: #fff;
     transition: 0.5s;
     -webkit-transition: 0.5s;
     box-shadow: 0px 0px 50px #f7f7f7;
     border-radius: 5%;
}
 .single-pricing-table:hover {
     box-shadow: 0px 0px 50px #d7d7d7;
}
 .single-pricing-table.price-tag{
     position: relative;
}
 .single-pricing-table.price-tag::before {
     position: absolute;
     content: "\f064 ";
     font-family: fontawesome;
     font-size: 80px;
     top: -10px;
     left: 0;
     transform: rotate(20deg);
     font-weight: bolder;
     color: #34495E;
}
 .pricing-table-head h3 {
     margin: 0;
     padding: 15px;
     text-transform: uppercase;
}
 .pricing-table-price {
     background: #34495E;
     text-align: right;
     font-size: 18px;
     position: relative;
     color: #fff;
     padding: 4px 20px;
}
 .pricing-table-price::before {
     border-left: 360px solid #fff;
     border-top: 100px solid #34495E;
     bottom: -95px;
     content: "";
     height: 0;
     position: absolute;
     right: 0;
     width: 0;
}
 .pricing-table-price h1 {
     font-size: 120px;
     line-height: 120px;
     margin: 0;
     padding-top: 10px;
}
 .table-list li {
     padding: 10px 0;
     font-family: Verdana;
     border-bottom: 1px solid #f7f7f7;
     text-transform: capitalize;
}
 .pricing-btn {
     border-radius: 2px;
     color: #ffffff;
     display: inline-block;
     margin: 40px 0;
     padding: 10px 20px;
     text-transform: uppercase;
     border: 1px solid transparent;
}
 .pricing-btn:hover {
     background: transparent;
     color: #34495E;
     border-color: #34495E;
}
/*====================== Social Area CSS =======================*/
 .social-arae {
     padding: 40px 0;
}
 .social-arae .nav li {
     display: inline-block;
}
 .social-arae .nav a {
     font-size: 16px;
     color: #fff;
     display: block;
     height: 55px;
     line-height: 55px;
     margin: 0 10px;
     transform: scale(1) rotate(45deg);
     width: 55px;
     box-shadow: 2px 2px 20px #cccccc;
     border-radius: 4px;
}
 .social-arae .nav a i {
     transform: rotate(-45deg);
     transition: all 0.5s ease 0s;
}
 .social-arae .nav a:hover i {
     transform: rotate(0deg);
}
 .social-arae .nav a:hover {
     transform: scale(1.5) rotate(0deg);
     z-index: 1;
}
 .social-arae h4 {
     margin: 0;
     padding-bottom: 40px;
     text-transform: uppercase;
}
/*====================== Blog Area CSS =======================*/
 .blog-bg0{
     background-image: url(../img/blog.jpg);
}
 .blog-bg1{
     background-image: url(../img/blog1.jpg);
}
 .blog-bg2{
     background-image: url(../img/blog2.jpg);
}
 .blog-bg3{
     background-image: url(../img/blog3.jpg);
}
 .blog-bg4{
     background-image: url(../img/blog4.jpg);
}
 .blog-bg5{
     background-image: url(../img/blog5.jpg);
}
 .blog-bg6{
     background-image: url(../img/blog6.jpg);
}
 .single-blog-box {
     border: 1px solid #f7f7f7;
     padding: 30px;
     font-size: 14px;
     font-weight: 300;
     line-height: 24px;
     transition: .2s;
     min-height: 270px;
     display: block;
     color: #34495E;
     margin-bottom: 30px;
}
 .single-blog-box:hover {
     box-shadow: 0px 0px 20px #d9d9d9;
     color: #34495E;
}
 .blog-thumb-wrapper {
     height: 250px;
     background-size: cover;
     background-position: center;
     background-color: #ddd;
     margin-bottom: 30px;
     margin-left: -30px;
     margin-top: -30px;
     margin-right: -30px;
}
 .blog-read-more {
     display: inline-block;
     font-size: 16px;
     margin:15 0px;
     position: relative;
     line-height: 1;
     color: #34495E;
}
 .blog-read-more::before {
     position: absolute;
     content: '\f178';
     font-family: fontawesome;
     right: -15px;
     top: 3px;
     opacity: 0;
     visibility: visible;
     transition: 0.5s;
     color: #34495E;
}
 .single-blog-box:hover .blog-read-more::before{
     right: -25px;
     opacity: 1;
     visibility: visible;
}
 .social-sharing {
     border-top: 1px solid #f0f0f0;
     border-bottom: 1px solid #f0f0f0;
     text-align: center;
     padding: 20px 0;
     margin-bottom: 30px;
     margin-top: 30px;
}
 .social-sharing a {
     display: inline-block;
     background-color: #2a5da7;
     color: #fff;
     padding: 10px 20px 8px;
     border-radius: 40px;
     margin: 5px 5px;
}
 .social-sharing a.twitter {
     background-color: #36c8ee;
}
 .social-sharing a.pinterest {
     background-color: #d30f27;
}
 .social-sharing a.google {
     background-color: #D44439;
}
 .entry-content p, .author-box p {
     margin-bottom: 20px;
     opacity: ;
}
 .author-box {
     border-bottom: 1px solid #f0f0f0;
     margin-bottom: 30px;
}
 .author-box img {
     border-radius: 50%;
     border: 1px solid #d7d7d7;
     max-width: 80px;
     margin: 15px 0;
}
 .comment-form textarea {
     margin-bottom: 0;
     height: 120px;
}
 .comment-form input, .comment-form textarea {
     width: 100%;
     margin-bottom: 20px;
}
 input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], textarea {
     border: 1px solid #d7d7d7;
     padding: 10px;
}
 .comment-form input[type="submit"] {
     width: 150px;
}
 .pagination a {
     color: #34495E;
     float: left;
     padding: 8px 16px;
     text-decoration: none;
     transition: background-color .3s;
}
 .pagination a.active, .pagination a:hover {
     background-color: #34495E;
     color: #fff;
}
 .pagination a:first-child, .pagination a:last-child {
     font-size: 25px;
     line-height: 18px;
}
/*====================== Breadcumb Area CSS =======================*/
 ul.breadcrumb {
     background: transparent;
}
 ul.breadcrumb li {
     display: inline;
     font-size: 18px;
     text-transform: capitalize;
}
 ul.breadcrumb li a {
     color: #fff;
     font-size: 12px;
     font-family: Verdana;
}
 ul.breadcrumb li a:hover {
     color: #fff;
}
 .breadcrumb-area {
     position: relative;
     background-image: url(../img/breadcrumb-bg.jpg);
     text-align: center;
     z-index: 1;
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
}
 .breadcrumb-area::after {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background: #354A5F;
     opacity: 0.9;
     z-index: -1;
}
 .breadcrumb-content {
     margin-top: 150px;
     padding: 80px;
     margin-bottom: 50px;
}
 .breadcrumb-area h2 {
     color: #fff;
     text-transform: uppercase;
}

/*====================== Contact Area CSS =======================*/
 .contact-area {
     background: #f7f7f7;
     padding: 110px 0;
}
 .contact-area-form input[type="text"] {
     border: 1px solid #ffffff;
     color: #4b4b4b;
     font-weight: 300;
     height: 55px;
     margin-top: 25px;
     padding: 0 20px;
     width: 100%;
}
 input[type="submit"] {
     transition: 0.5s;
     -webkit-transition: 0.5s;
     margin-top: 15px;
}
 .contact-area-form textarea {
     color: #4b4b4b;
     font-weight: 300;
     height: 180px;
     margin-top: 20px;
     width: 100%;
     border: 1px solid #ffffff;
     padding: 10px 15px;
}
.addreass-icon {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
.addreass-icon i {
     border: 1px solid #fff;
     border-radius: 100%;
     color: #fefefe;
     display: block;
     height: 50px;
     line-height: 50px;
     margin: 0 25px;
     text-align: center;
     width: 50px;
     font-size: 16px;
     float: left;
}
 .addreass-info, .addreass-info a {
     color: #fff;
}
 .single-addreass {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
     -webkit-align-items: center;
     align-items: center;
     padding: 20px 0;
}
 .adtress-info {
     padding: 50px 0;
     background: #2ea68e;
     text-align: left;
     margin: 50px 0;
     box-shadow: 0 0 25px #d7d7d7;
     border-radius: 3em;
}
/*====================== Footer Area CSS =======================*/
 .footer-copyright-arae {
     background: #34495E;
     color: #ffffff;
     padding: 20px 0;
     text-align: center;
}
 .footer-copyright-arae p {
     margin: 0;
}

.hero-area { position: relative; }
.hero-area__langs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    z-index: 100;
    top: 0;
    right: 0;
    margin: 20px;
}
.hero-area__langs-link {
    display: block;
    margin-left: 15px;
    text-decoration: none;
}
.hero-area__langs-link img {
    display: block;
    width: 48px;
}

.company-logo-area__txt {
    display: none;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    font-size: 1.75em;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .company-logo-area__txt { font-size: 1.5em; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {}
@media only screen and (max-width: 767px) {}
@media only screen and (min-width: 411px) and (max-width: 767px) {}
@media only screen and (max-width: 390px) {}
.company-logo-area_txt .company-logo-area__img { opacity: 0; }
.company-logo-area_txt .company-logo-area__txt {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.grid-item-video { position: relative; }
.grid-item-video img { display: block; width: 100%; }
.grid-video-button { position: absolute; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); }

.video-box {
  position: relative;
  margin: 0 auto;
  max-width: 1140px;
}

.video-box::before {
  display: block;
  padding-bottom: 56.25%;
  content: '';
}

.video-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.portfolio-area__video {
  margin-top:40px;
}