@font-face {
   font-family: icomoon;
   src: url("../fonts/icomoon/icomoon.eot?srf3rx");
   src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
   font-weight: 400;
   font-style: normal
 }

 body {
   font-family: 'Montserrat', sans-serif;
   font-size: 14px;
   line-height: 1.7;
   color: #333;
   background-color: #000;
   font-weight: 400
 }
.fs-1 {font-size: 2.5rem !important; }
.fs-2 {font-size: 2rem !important; }
.fs-3 {font-size: 1.75rem !important; }
.fs-4 {font-size: 1.5rem !important; }
.fs-5 {font-size: 1.25rem !important; }
.fs-6 {font-size: 1rem !important; }

 #page {
   position: relative;
   overflow-x: hidden;
   width: 100%;
   height: 100%;
   -webkit-transition: .5s;
   -o-transition: .5s;
   transition: .5s
 }

 .offcanvas #page {
   overflow: hidden;
   position: absolute
 }

 .offcanvas #page:after {
   -webkit-transition: 2s;
   -o-transition: 2s;
   transition: 2s;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 101;
   background: #fff;
   content: ""
 }

 a {
   color: #333;
   -webkit-transition: .5s;
   -o-transition: .5s;
   transition: .5s
 }

 a:active,
 a:focus,
 a:hover {
   color: #000000;
   outline: 0;
   text-decoration: none;
   font-weight: 500;
 }

 p {
   margin-bottom: 20px;
   font-weight: 500
 }

 figure,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   color: #000;
   font-family: 'Montserrat', sans-serif;
   font-weight: 400;
   margin: 0 0 20px 0
 }

 ::-webkit-selection {
   color: #fff;
   background: #000000
 }

 ::-moz-selection {
   color: #fff;
   background: #000000
 }

 ::selection {
   color: #fff;
   background: #000000
 }

 .fh5co-nav {
   position: fixed;
   top: 0;
   margin: 0;
   padding: 0;
   width: 100%;
   padding: 0;
   z-index: 1001;
   height: 70px;
   background: #000;
 }

 .navs {
   -webkit-box-shadow: 0 14px 13px -9px rgba(0, 0, 0, .09);
   -moz-box-shadow: 0 14px 13px -9px rgba(0, 0, 0, .09);
   box-shadow: 0 14px 13px -9px rgba(0, 0, 0, .09);
   background-color: #000;
 }

 .fh5co-nav .top-menu {
   padding: 20px 0
 }

 .fh5co-nav .top {
   padding: 7px 0;
   margin-bottom: 0
 }

 .fh5co-nav .top .fh5co-social,
 .fh5co-nav .top .num {
   display: inline-block;
   margin: 0
 }

 .fh5co-nav .top .num {
   color: rgba(255, 255, 255, .9);
   font-size: 13px;
   padding-right: 10px;
   margin-right: 5px;
   border-right: 1px solid rgba(255, 255, 255, .2);
   letter-spacing: 0
 }

 .fh5co-nav .top .fh5co-social li {
   font-size: 14px
 }

 .fh5co-nav .top .fh5co-social li a {
   padding: 0 7px
 }

 .fh5co-nav .top .fh5co-social li a i {
   font-size: 14px
 }

 .fh5co-nav #fh5co-logo img {
   margin-top: 0;
   height: 69px;
   width: 250px;
 }

 .fh5co-nav a {
   padding: 5px 10px;
   color: #fff
 }

 @media screen and (max-width:768px) {
   .fh5co-nav .menu-1 {
     display: none
   }
 }

 .fh5co-nav ul {
   padding: 0;
   margin: 0px 0 0 20px
 }

 .fh5co-nav ul li {
   padding: 0;
   margin: 0;
   list-style: none;
   display: inline
 }

 .fh5co-nav ul li a {
   font-size: 17px;
   padding: 10px 10px;
   color: #fff;
   -webkit-transition: .5s;
   -o-transition: .5s;
   transition: .5s;
   text-transform: none;
   font-weight: 600;
   font-family: 'Montserrat', sans-serif;
 }

 .fh5co-nav ul li a.active {
   border-bottom: 1px solid #ccc
 }

 .fh5co-nav ul li a:active,
 .fh5co-nav ul li a:focus,
 .fh5co-nav ul li a:hover {
   color: #ffcc00
 }

 .fh5co-nav ul li.has-dropdown {
   position: relative
 }

 .fh5co-nav ul li.has-dropdown .dropdown {
   width: 220px;
   z-index: 1002;
   visibility: hidden;
   opacity: 0;
   position: absolute;
   top: 30px;
   left: 0;
   text-align: left;
   background-color: #fff;
   padding: 20px;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0;
   -ms-border-radius: 0px;
   border-radius: 0;
   -webkit-transition: 0s;
   -o-transition: 0s;
   transition: 0s
 }

 .fh5co-nav ul li.has-dropdown .dropdown li {
   display: block;
   margin-bottom: 17px
 }

 .fh5co-nav ul li.has-dropdown .dropdown li:last-child {
   margin-bottom: 0
 }

 .fh5co-nav ul li.has-dropdown .dropdown li a {
   padding: 2px 0;
   display: block;
   color: #000;
   line-height: 1.6;
   text-transform: none;
   font-size: 14px;
   letter-spacing: 0;
   text-transform: none
 }

 .fh5co-nav ul li.has-dropdown .dropdown li a:hover {
   color: #000
 }

 .fh5co-nav ul li.has-dropdown:focus a,
 .fh5co-nav ul li.has-dropdown:hover a {
   color: #000
 }

 .fh5co-nav ul li.btn-cta a {
   padding: 5px 0 !important;
   color: #000;
   font-size: 13px;
   font-weight: 700
 }

 .fh5co-nav ul li.btn-cta a span {
   background: #fff;
   padding: 5px 10px;
   display: -moz-inline-stack;
   display: inline-block;
   zoom: 1;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   border-radius: 5px
 }

 .fh5co-nav ul li.btn-cta a:hover span {
   background: #ffcc00
 }

 @media screen and (max-width:768px) {
   .fh5co-nav ul li.btn-cta a span {
     background: #fff;
     padding: 5px 5px;
     display: -moz-inline-stack;
     display: inline-block;
     zoom: 1;
     -webkit-transition: .3s;
     -o-transition: .3s;
     transition: .3s;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     border-radius: 5px
   }
 }

 .fh5co-nav ul li.btn-cta-s a {
   padding: 10px 0 !important;
   color: #fff;
   font-size: 13px
 }

 .fh5co-nav ul li.btn-cta-s a span {
   background: #fc0;
   padding: 4px 10px;
   display: -moz-inline-stack;
   display: inline-block;
   zoom: 1;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   border-radius: 5px
 }

 .fh5co-nav ul li.btn-cta-s a:hover span {
   background: rgba(255, 255, 255, .2)
 }

 .fh5co-nav ul li.btn-cta-rfq a {
   padding: 5px 0 !important;
   color: #fff;
   font-size: 13px;
   font-weight: 700
 }

 .fh5co-nav ul li.btn-cta-rfq a span {
   background: #084ca5;
   padding: 5px 10px;
   display: -moz-inline-stack;
   display: inline-block;
   zoom: 1;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   border-radius: 5px
 }

 .fh5co-nav ul li.btn-cta-rfq a:hover span {
   background: #474066
 }

 .fh5co-nav ul li.btn-cta-rfq-s a {
   padding: 10px 0 !important;
   color: #fff;
   font-size: 13px
 }

 .fh5co-nav ul li.btn-cta-rfq-s a span {
   background: #fc0;
   padding: 4px 10px;
   display: -moz-inline-stack;
   display: inline-block;
   zoom: 1;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   border-radius: 5px
 }

 .fh5co-nav ul li.btn-cta-rfq-s a:hover span {
   background: rgba(255, 255, 255, .2)
 }

 .fh5co-nav ul li.active>a {
   color: #ffcc00 !important;
   border-bottom: 0px solid #390
 }

 .little-down:hover {
   margin-left: 10px
 }

 #fh5co-counter,
 #fh5co-header,
 .fh5co-bg {
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
   position: relative
 }

 .fh5co-bg {
   background-size: cover;
   background-position: center center;
   position: relative;
   width: 100%;
   float: left
 }

 .fh5co-video {
   overflow: hidden
 }

 @media screen and (max-width:992px) {
   .fh5co-video {
     height: 450px
   }
 }

 .fh5co-video a {
   z-index: 1001;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -45px;
   margin-left: -45px;
   width: 90px;
   height: 90px;
   display: table;
   text-align: center;
   background: #fff;
   -webkit-box-shadow: 0 14px 30px -15px rgba(0, 0, 0, .75);
   -moz-box-shadow: 0 14px 30px -15px rgba(0, 0, 0, .75);
   box-shadow: 0 14px 30px -15px rgba(0, 0, 0, .75);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   border-radius: 50%
 }

 .fh5co-video a i {
   text-align: center;
   display: table-cell;
   vertical-align: middle;
   font-size: 40px
 }

 .fh5co-video .overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, .5);
   -webkit-transition: .5s;
   -o-transition: .5s;
   transition: .5s
 }

 .fh5co-video:hover .overlay {
   background: rgba(0, 0, 0, .7)
 }

 .fh5co-video:hover a {
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2)
 }

 .fh5co-cover {
   height: 700px;
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
   position: relative;
   float: left;
   width: 100%
 }

 .fh5co-cover:after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   overflow: visible;
   width: 100%;
   height: 850px;
   background: url(../images/bg.jpg) fixed;
   z-index: -1
 }

 .fh5co-cover .overlay {
   z-index: 0;
   position: absolute;
   bottom: 0;
   top: 0;
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, .4)
 }

 .fh5co-cover>.fh5co-container {
   position: relative;
   z-index: 10
 }

 @media screen and (max-width:768px) {
   .fh5co-cover {
     height: 600px
   }
 }

 .fh5co-cover .display-t,
 .fh5co-cover .display-tc {
   z-index: 9;
   width: 100%;
   margin-top: 210px
 }

 @media screen and (max-width:768px) {

   .fh5co-cover .display-t,
   .fh5co-cover .display-tc {
     z-index: 9;
     width: 100%;
     margin-top: 140px
   }
 }

 .fh5co-cover .display-t2,
 .fh5co-cover .display-tc2 {
   z-index: 9;
   height: 50px;
   display: table;
   width: 100%;
   margin-top: 30px
 }

 .fh5co-cover .display-t2,
 .fh5co-cover .display-tc2 img {
   padding-left: 10px
 }

 @media screen and (max-width:768px) {

   .fh5co-cover .display-t,
   .fh5co-cover .display-tc {
     height: 400px
   }

   .fh5co-cover .display-t2,
   .fh5co-cover .display-tc2 {
     display: none
   }
 }

 .fh5co-cover.fh5co-cover-sm {
   height: 600px
 }

 @media screen and (max-width:768px) {
   .fh5co-cover.fh5co-cover-sm {
     height: 400px
   }
 }

 .fh5co-cover.fh5co-cover-sm .display-t,
 .fh5co-cover.fh5co-cover-sm .display-tc {
   height: 600px;
   display: table;
   width: 100%
 }

 @media screen and (max-width:768px) {

   .fh5co-cover.fh5co-cover-sm .display-t,
   .fh5co-cover.fh5co-cover-sm .display-tc {
     height: 400px
   }
 }

 #fh5co-counter .display-tc,
 #fh5co-header .display-tc,
 .fh5co-cover .display-tc {
   display: table-cell !important;
   vertical-align: middle
 }

 #fh5co-counter .display-tc h1,
 #fh5co-counter .display-tc h2,
 #fh5co-header .display-tc h1,
 #fh5co-header .display-tc h2,
 .fh5co-cover .display-tc h1,
 .fh5co-cover .display-tc h2 {
   margin: 0;
   padding: 0;
   color: #fff
 }

 #fh5co-counter .display-tc h1,
 #fh5co-header .display-tc h1,
 .fh5co-cover .display-tc h1 {
   margin-bottom: 20px;
   font-size: 44px;
   line-height: 1.4;
   font-weight: 100
 }

 @media screen and (max-width:768px) {

   #fh5co-counter .display-tc h1,
   #fh5co-header .display-tc h1,
   .fh5co-cover .display-tc h1 {
     font-size: 30px
   }
 }

 #fh5co-counter .display-tc h2,
 #fh5co-header .display-tc h2,
 .fh5co-cover .display-tc h2 {
   font-size: 16px;
   line-height: 1.5;
   margin-bottom: 30px
 }

 #fh5co-counter .display-tc .btn,
 #fh5co-header .display-tc .btn,
 .fh5co-cover .display-tc .btn {
   padding: 5px 10px;
   color: #fff;
   font-size: 12px;
   border: 1px solid #ccc
 }

 #fh5co-counter .display-tc .btn.btn-video,
 #fh5co-header .display-tc .btn.btn-video,
 .fh5co-cover .display-tc .btn.btn-video {
   background: rgba(9, 198, 171, .8);
   border: none
 }

 #fh5co-counter .display-tc .btn.btn-video:focus,
 #fh5co-counter .display-tc .btn.btn-video:hover,
 #fh5co-header .display-tc .btn.btn-video:focus,
 #fh5co-header .display-tc .btn.btn-video:hover,
 .fh5co-cover .display-tc .btn.btn-video:focus,
 .fh5co-cover .display-tc .btn.btn-video:hover {
   background: rgba(9, 198, 171, .9) !important;
   color: #fff !important
 }

 #fh5co-counter .display-tc .btn:focus,
 #fh5co-counter .display-tc .btn:hover,
 #fh5co-header .display-tc .btn:focus,
 #fh5co-header .display-tc .btn:hover,
 .fh5co-cover .display-tc .btn:focus,
 .fh5co-cover .display-tc .btn:hover {
   color: #fff !important
 }

 #fh5co-counter .display-tc .btn.btn-learn,
 #fh5co-header .display-tc .btn.btn-learn,
 .fh5co-cover .display-tc .btn.btn-learn {
   background: rgba(234, 146, 21, .8);
   border: none
 }

 #fh5co-counter .display-tc .btn.btn-learn:focus,
 #fh5co-counter .display-tc .btn.btn-learn:hover,
 #fh5co-header .display-tc .btn.btn-learn:focus,
 #fh5co-header .display-tc .btn.btn-learn:hover,
 .fh5co-cover .display-tc .btn.btn-learn:focus,
 .fh5co-cover .display-tc .btn.btn-learn:hover {
   background: rgba(234, 146, 21, .9) !important;
   color: #fff !important
 }

 #fh5co-counter .display-tc .btn:hover,
 #fh5co-header .display-tc .btn:hover,
 .fh5co-cover .display-tc .btn:hover {
   background: #000 !important;
   -webkit-box-shadow: 0 14px 30px -15px rgba(0, 0, 0, .75) !important;
   -moz-box-shadow: 0 14px 30px -15px rgba(0, 0, 0, .75) !important;
   box-shadow: 0 14px 30px -15px rgba(0, 0, 0, .75) !important
 }

 #fh5co-counter .display-tc .form-inline .form-group,
 #fh5co-header .display-tc .form-inline .form-group,
 .fh5co-cover .display-tc .form-inline .form-group {
   width: 100% !important;
   margin-bottom: 10px
 }

 #fh5co-counter .display-tc .form-inline .form-group .form-control,
 #fh5co-header .display-tc .form-inline .form-group .form-control,
 .fh5co-cover .display-tc .form-inline .form-group .form-control {
   width: 100%;
   background: #fff;
   border: none
 }

 img.vert-move {
   -webkit-animation: mover 1s infinite alternate;
   animation: mover 1s infinite alternate
 }

 img.vert-move {
   -webkit-animation: mover 1s infinite alternate;
   animation: mover 1s infinite alternate
 }

 @-webkit-keyframes mover {
   0% {
     transform: translateY(0)
   }

   100% {
     transform: translateY(-10px)
   }
 }

 @keyframes mover {
   0% {
     transform: translateY(0)
   }

   100% {
     transform: translateY(-10px)
   }
 }

 #fh5co-wireframe {
   border: none !important
 }

 #fh5co-wireframe blockquote {
   border: none;
   padding: 0;
   font-weight: 700
 }

 #inner-content {
   padding: 2em 0;
   clear: both;
   margin-top: 70px;
   background-color: #fff;
 }

 @media screen and (max-width:768px) {
   #inner-content {
     padding: 2em 0;
     clear: both;
     margin: 100px 0px 0px 0px
   }
 }

 .heading-home {
   margin-top: 2em;
   margin-bottom: 0
 }

 @media screen and (max-width:768px) {
   .heading-home {
     margin-top: 0;
     margin-bottom: 2em
   }
 }

 .heading-home h2 {
   font-size: 14px;
   margin-bottom: 10px;
   line-height: 1;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #91c01c
 }

 .heading-home h3 {
   font-size: 40px;
   margin-bottom: 20px;
   line-height: 1;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0;
   color: #000;
   font-family: Roboto, sans-serif
 }

 @media screen and (max-width:768px) {
   .heading-home h3 {
     font-size: 36px;
     margin-bottom: 20px;
     line-height: 1;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0;
     color: #333;
     font-family: Roboto, sans-serif
   }
 }

 .heading-home h4 {
   font-size: 30px;
   margin-bottom: 20px;
   line-height: 1.5;
   font-weight: 700;
   text-transform: none;
   letter-spacing: 0;
   color: #333;
   font-family: Roboto, sans-serif
 }

 .heading-home p {
   font-size: 13px;
   line-height: 1.5;
   color: #828282;
   font-family: Roboto, sans-serif
 }

 .login {
   padding: 2em;
   -webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   -moz-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   border-radius: 15px
 }

 @media screen and (max-width:768px) {
   .login {
     margin-bottom: 3em
   }
 }

 .user-frame-b {
   width: 100%;
   padding: 2em;
   border: 0 solid #f0f0f0;
   border-radius: 15px;
   margin-bottom: 15px;
   -webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   -moz-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13)
 }

 .user-frame-b:hover {
   width: 100%;
   padding: 2em;
   border: 0 solid #f0f0f0;
   border-radius: 15px;
   margin-bottom: 15px;
   -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
   -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1)
 }

 .user-frame {
   width: 100%;
   padding: 1.3em;
   border-radius: 20px;
   overflow: auto;
   margin-bottom: 20px;
   background-color: #fff;
   border: 0px solid #ccc
 }

 .user-frame p {
   font-size: 13px;
   color: #000
 }

 .user-frame-why {
   width: 100%;
   padding: 1em;
   border-radius: 15px;
   height: 240px
 }

 .rowbm {
   margin-bottom: 15px
 }

 .user-frame-services {
   width: 100%;
   padding: 1em;
   -webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   -moz-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   border-radius: 15px;
   height: auto
 }

 .journey {
   right: -10px;
   top: 120px;
   position: absolute;
   z-index: 999;
   font-size: 36px;
   color: #ccc
 }

 .journey1 {
   right: -5px;
   top: 80px;
   position: absolute;
   z-index: 999;
   font-size: 23px;
   color: #ccc
 }

 @media screen and (max-width:768px) {
   .user-frame {
     width: 100%;
     margin-bottom: 3em;
     overflow: auto;
   }

   .rowbm {
     margin-bottom: 0
   }

   .user-frame-why {
     width: 100%;
     padding: 2em;
     -webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
     -moz-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
     box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
     border-radius: 15px;
     margin-bottom: 30px;
     height: auto
   }

   .journey {
     display: none;
     visibility: hidden
   }

   .journey1 {
     display: none;
     visibility: hidden
   }
 }

 .user-frame h3 {
   line-height: 34px
 }

 .user-frame p {
   color: rgba(0, 0, 0, .6)
 }

 .user-frame small {
   color: #2a528a
 }

 .blog-frame {
   width: 100%;
   padding: 0;
   -webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   -moz-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   border-radius: 15px
 }

 @media screen and (max-width:768px) {
   .blog-frame {
     width: 100%;
     margin-bottom: 3em
   }
 }

 .blog-frame h3 {
   line-height: 32px;
   font-weight: 600;
   font-size: 12px
 }

 .blog-frame p {
   color: rgba(0, 0, 0, .6);
   font-size: 12px
 }

 .blog-frame span {
   font-weight: 700
 }

 .blog-frame small {
   color: #2a528a
 }

 .portfolio-grid {
   width: 100%;
   float: left;
   overflow: hidden;
   position: relative;
   z-index: 1;
   margin-bottom: 20px
 }

 .portfolio-grid:after {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   content: '';
   opacity: 0;
   background: rgba(0, 0, 0, .2);
   z-index: 0;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s
 }

 .portfolio-grid img {
   position: relative;
   max-width: 100%;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s;
   border-radius: 10px
 }

 .portfolio-grid .desc {
   z-index: 9;
   position: absolute;
   bottom: 5px;
   left: 0;
   right: 0;
   padding: 15px;
   opacity: 1;
   -webkit-transition: -webkit-transform .3s, opacity .3s;
   transition: transform .3s, opacity .3s;
   -webkit-transform: translate3d(0, 20px, 0);
   transform: translate3d(0, 20px, 0)
 }

 @media screen and (max-width:768px) {
   .portfolio-grid .desc {
     opacity: 1
   }
 }

 .portfolio-grid .desc h3 {
   color: #fff;
   margin-bottom: 0;
   font-weight: 400
 }

 .portfolio-grid .desc span {
   color: #fff
 }

 .portfolio-grid:hover:after {
   opacity: 1
 }

 .portfolio-grid:hover .desc {
   opacity: 1;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0)
 }

 .portfolio-grid:hover img {
   -webkit-transform: scale(1.05);
   -moz-transform: scale(1.05);
   -ms-transform: scale(1.05);
   -o-transform: scale(1.05);
   transform: scale(1.05);
   border-radius: 10px
 }

 .fh5co-cover-inner {
   height: 650px;
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
   position: relative;
   float: left;
   width: 100%
 }

 .fh5co-cover-inner:after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   overflow: visible;
   width: 100%;
   height: 650px;
   z-index: -1
 }

 .fh5co-cover-inner .overlay {
   z-index: 0;
   position: absolute;
   bottom: 0;
   top: 0;
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, .4)
 }

 .fh5co-cover-inner>.fh5co-container {
   position: relative;
   z-index: 10
 }

 @media screen and (max-width:768px) {
   .fh5co-cover-inner {
     height: 600px
   }
 }

 .fh5co-cover-inner .display-t,
 .fh5co-cover-inner .display-tc {
   z-index: 9;
   width: 100%;
   margin-top: 270px
 }

 @media screen and (max-width:768px) {

   .fh5co-cover-inner .display-t,
   .fh5co-cover-inner .display-tc {
     z-index: 9;
     width: 100%;
     margin-top: 240px
   }
 }

 .fh5co-cover-inner .display-t2,
 .fh5co-cover-inner .display-tc2 {
   z-index: 9;
   height: 50px;
   width: 100%;
   margin-top: 30px
 }

 .fh5co-cover-inner .display-t2,
 .fh5co-cover-inner .display-tc2 img {
   padding-left: 10px
 }

 @media screen and (max-width:768px) {

   .fh5co-cover-inner .display-t,
   .fh5co-cover-inner .display-tc {
     height: 400px
   }

   .fh5co-cover-inner .display-t2,
   .fh5co-cover-inner .display-tc2 {
     display: none
   }
 }

 .fh5co-cover-inner.fh5co-cover-inner-sm {
   height: 600px
 }

 @media screen and (max-width:768px) {
   .fh5co-cover-inner.fh5co-cover-inner-sm {
     height: 400px
   }
 }

 .fh5co-cover-inner.fh5co-cover-inner-sm .display-t,
 .fh5co-cover-inner.fh5co-cover-inner-sm .display-tc {
   height: 600px;
   width: 100%
 }

 @media screen and (max-width:768px) {

   .fh5co-cover-inner.fh5co-cover-inner-sm .display-t,
   .fh5co-cover-inner.fh5co-cover-inner-sm .display-tc {
     height: 400px
   }
 }

 #fh5co-counter .display-tc h1,
 #fh5co-counter .display-tc h2,
 #fh5co-header-inner .display-tc h1,
 #fh5co-header-inner .display-tc h2,
 .fh5co-cover-inner .display-tc h1,
 .fh5co-cover-inner .display-tc h2 {
   margin: 0;
   padding: 0;
   color: #fff
 }

 #fh5co-counter .display-tc h1,
 #fh5co-header-inner .display-tc h1,
 .fh5co-cover-inner .display-tc h1 {
   margin-bottom: 10px;
   font-size: 44px;
   line-height: 1.4;
   font-weight: 800
 }

 @media screen and (max-width:768px) {

   #fh5co-counter .display-tc h1,
   #fh5co-header-inner .display-tc h1,
   .fh5co-cover-inner .display-tc h1 {
     font-size: 30px
   }
 }

 #fh5co-counter .display-tc h2,
 #fh5co-header-inner .display-tc h2,
 .fh5co-cover-inner .display-tc h2 {
   font-size: 13px;
   line-height: 1.9;
   margin-bottom: 30px;
   margin-left: 30px;
   background: rgba(255, 255, 255, .1);
   padding: 10px;
   border-left: 1px #fff solid;
   -webkit-box-shadow: 0 34px 30px -15px rgba(0, 0, 0, .75) !important;
   -moz-box-shadow: 0 34px 30px -15px rgba(0, 0, 0, .75) !important;
   box-shadow: 0 34px 30px -15px rgba(0, 0, 0, .75) !important
 }

 #fh5co-counter .display-tc .btn,
 #fh5co-header-inner .display-tc .btn,
 .fh5co-cover-inner .display-tc .btn {
   padding: 5px 10px;
   color: #fff;
   font-size: 12px;
   border: 1px solid #ccc
 }

 #fh5co-counter .display-tc .btn.btn-video,
 #fh5co-header-inner .display-tc .btn.btn-video,
 .fh5co-cover-inner .display-tc .btn.btn-video {
   background: rgba(9, 198, 171, .8);
   border: none
 }

 #fh5co-counter .display-tc .btn.btn-video:focus,
 #fh5co-counter .display-tc .btn.btn-video:hover,
 #fh5co-header-inner .display-tc .btn.btn-video:focus,
 #fh5co-header-inner .display-tc .btn.btn-video:hover,
 .fh5co-cover-inner .display-tc .btn.btn-video:focus,
 .fh5co-cover-inner .display-tc .btn.btn-video:hover {
   background: rgba(9, 198, 171, .9) !important;
   color: #fff !important
 }

 #fh5co-counter .display-tc .btn:focus,
 #fh5co-counter .display-tc .btn:hover,
 #fh5co-header-inner .display-tc .btn:focus,
 #fh5co-header-inner .display-tc .btn:hover,
 .fh5co-cover-inner .display-tc .btn:focus,
 .fh5co-cover-inner .display-tc .btn:hover {
   color: #fff !important
 }

 #fh5co-counter .display-tc .btn.btn-learn,
 #fh5co-header-inner .display-tc .btn.btn-learn,
 .fh5co-cover-inner .display-tc .btn.btn-learn {
   background: rgba(234, 146, 21, .8);
   border: none
 }

 #fh5co-counter .display-tc .btn.btn-learn:focus,
 #fh5co-counter .display-tc .btn.btn-learn:hover,
 #fh5co-header-inner .display-tc .btn.btn-learn:focus,
 #fh5co-header-inner .display-tc .btn.btn-learn:hover,
 .fh5co-cover-inner .display-tc .btn.btn-learn:focus,
 .fh5co-cover-inner .display-tc .btn.btn-learn:hover {
   background: rgba(234, 146, 21, .9) !important;
   color: #fff !important
 }

 #fh5co-counter .display-tc .btn:hover,
 #fh5co-header-inner .display-tc .btn:hover,
 .fh5co-cover-inner .display-tc .btn:hover {
   background: #000000 !important;
   -webkit-box-shadow: 0 14px 30px -15px rgba(0, 0, 0, .75) !important;
   -moz-box-shadow: 0 14px 30px -15px rgba(0, 0, 0, .75) !important;
   box-shadow: 0 14px 30px -15px rgba(0, 0, 0, .75) !important
 }

 #fh5co-counter .display-tc .form-inline .form-group,
 #fh5co-header-inner .display-tc .form-inline .form-group,
 .fh5co-cover-inner .display-tc .form-inline .form-group {
   width: 100% !important;
   margin-bottom: 10px
 }

 #fh5co-counter .display-tc .form-inline .form-group .form-control,
 #fh5co-header-inner .display-tc .form-inline .form-group .form-control,
 .fh5co-cover-inner .display-tc .form-inline .form-group .form-control {
   width: 100%;
   background: #fff;
   border: none
 }

 #hero {
   min-height: 500px;
   height: 500px;
   margin-top: 80px
 }

 #hero .btn {
   font-size: 24px
 }

 #hero .btn.btn-primary {
   padding: 14px 30px !important
 }

 #hero .flexslider {
   border: none;
   z-index: 1;
   margin-bottom: 0
 }

 #hero .flexslider .slides {
   position: relative;
   overflow: hidden
 }

 #hero .flexslider .slides li {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: bottom center;
   min-height: 500px;
   height: 500px;
   position: relative
 }

 #hero .flexslider .flex-control-nav {
   bottom: 40px;
   z-index: 1000
 }

 #hero .flexslider .flex-control-nav li a {
   background: rgba(255, 255, 255, .2);
   box-shadow: none;
   width: 12px;
   height: 12px;
   cursor: pointer
 }

 #hero .flexslider .flex-control-nav li a.flex-active {
   cursor: pointer;
   background: rgba(255, 255, 255, .7)
 }

 #hero .flexslider .flex-direction-nav {
   display: none
 }

 #hero .flexslider .slider-text {
   display: table;
   opacity: 0;
   min-height: 500px;
   height: 500px;
   z-index: 9
 }

 #hero .flexslider .slider-text>.slider-text-inner {
   margin-top: 60px;
   padding: 20px;
   min-height: 300px
 }

 #hero .flexslider .slider-text>.slider-text-inner h1,
 #hero .flexslider .slider-text>.slider-text-inner h2 {
   margin: 0;
   padding: 0;
   color: #fff
 }

 #hero .flexslider .slider-text>.slider-text-inner h1 {
   margin: 0 0 15px 0;
   padding: 0;
   font-weight: 600;
   font-size: 50px;
   color: #fff;
   font-family: Roboto, sans-serif
 }

 #hero .flexslider .slider-text>.slider-text-inner h2 {
   margin: 0 0 10px 0;
   padding: 0;
   font-weight: 500;
   font-size: 26px;
   color: #fff;
   line-height: 36px;
   font-family: Roboto, sans-serif
 }

 #hero .flexslider .slider-text>.slider-text-inner h3 {
   margin: 0 0 20px 0;
   padding: 0;
   font-weight: 500;
   font-size: 18px;
   color: #fff;
   line-height: 22px;
   font-family: Roboto, sans-serif
 }

 @media screen and (max-width:768px) {
   #hero .flexslider .slider-text>.slider-text-inner {
     margin-top: 30px;
     padding: 20px;
     min-height: 300px
   }

   #hero .flexslider .slider-text>.slider-text-inner h1 {
     font-size: 30px;
     line-height: 40px
   }

   #hero .flexslider .slider-text>.slider-text-inner h2 {
     margin: 0 0 20px 0;
     padding: 0;
     font-weight: 600;
     font-size: 20px;
     color: #fff;
     line-height: 25px;
     font-family: Roboto, sans-serif
   }
 }

 #hero .flexslider .slider-text>.slider-text-inner .btn {
   padding: 10px 20px !important;
   color: #fff;
   border: none !important;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 2px
 }

 #hero .flexslider .slider-text>.slider-text-inner .btn:hover {
   background: #333 !important;
   -webkit-box-shadow: 0 14px 30px -15px rgba(0, 0, 0, .75) !important;
   -moz-box-shadow: 0 14px 30px -15px rgba(0, 0, 0, .75) !important;
   box-shadow: 0 14px 30px -15px rgba(0, 0, 0, .75) !important
 }

 .testi {
   border-left: 5px solid #004890;
   padding: 10px 0 10px 15px;
   font-size: 20px;
   margin-bottom: 20px;
   width: 90%
 }

 .bg-section {
   background: rgba(0, 0, 0, .05)
 }

 #fh5co-explore {
   padding: 4em 0;
   clear: both
 }

 #fh5co-blog,
 #fh5co-contact,
 #fh5co-footer,
 #fh5co-pricing,
 #fh5co-project,
 #fh5co-started,
 #media-project {
   padding: 7em 0;
   clear: both
 }

 @media screen and (max-width:768px) {

   #fh5co-blog,
   #fh5co-contact,
   #fh5co-explore,
   #fh5co-footer,
   #fh5co-pricing,
   #fh5co-project,
   #fh5co-started,
   #fh5co-testimonial,
   #media-project {
     padding: 3em 0
   }
 }

 #fh5co-counter {
   padding: 0 0;
   clear: both
 }

 #fh5co-steps {
   clear: both;
   padding-bottom: 7em
 }

 .fh5co-counters {
   padding: 3em 0;
   background-size: cover;
   background-attachment: fixed;
   background-position: center center;
   margin-top: 100px
 }

 .fh5co-counters .counter-wrap {
   border: 1px solid red !important
 }

 .fh5co-counters .fh5co-counter {
   font-size: 44px;
   display: block;
   color: #fff;
   font-family: 'Montserrat', sans-serif;
   width: 100%;
   font-weight: 400;
   margin-bottom: .3em
 }

 .fh5co-counters .fh5co-counter-label {
   color: #fff;
   text-transform: uppercase;
   font-size: 14px;
   letter-spacing: 5px;
   margin-bottom: 2em;
   display: block
 }

 #fh5co-explore .fh5co-explore1 {
   margin-bottom: 6em;
   margin-top: 6em
 }

 .mt {
   margin-top: 40px
 }

 .mt h4 {
   position: relative;
   padding-left: 40px;
   font-size: 20px
 }

 .mt h4 i {
   position: absolute;
   left: 0;
   top: 0;
   color: #fc0
 }

 .mt>div {
   margin-bottom: 40px
 }

 .mt .list-nav {
   margin: 50px 0 30px 0;
   padding: 0
 }

 .mt .list-nav li {
   list-style: none;
   margin: 0;
   padding: 0;
   font-size: 16px;
   padding-left: 30px;
   margin-bottom: 10px;
   position: relative
 }

 .mt .list-nav li i {
   position: absolute;
   left: 0;
   top: 0;
   font-size: 18px;
   color: #fc0
 }

 .fh5co-social-icons {
   margin: 0;
   padding: 0
 }

 .fh5co-social-icons li {
   margin: 0;
   padding: 0;
   list-style: none;
   display: -moz-inline-stack;
   display: inline-block;
   zoom: 1
 }

 .fh5co-social-icons li a {
   display: -moz-inline-stack;
   display: inline-block;
   zoom: 1;
   color: #fff;
   padding-left: 10px;
   padding-right: 10px
 }

 .fh5co-social-icons li a i {
   font-size: 30px;
   color: #fff
 }

 .fh5co-contact-info ul {
   padding: 0;
   margin: 0
 }

 .fh5co-contact-info ul li {
   padding: 0 0 0 40px;
   margin: 0 0 30px 0;
   list-style: none;
   position: relative
 }

 .fh5co-contact-info ul li:before {
   color: #000000;
   position: absolute;
   left: 0;
   top: .05em;
   font-family: icomoon;
   speak: none;
   font-style: normal;
   font-weight: 400;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
 }

 .fh5co-contact-info ul li.address:before {
   font-size: 30px;
   content: "\e9d1"
 }

 .fh5co-contact-info ul li.phone:before {
   font-size: 23px;
   content: "\e9f4"
 }

 .fh5co-contact-info ul li.email:before {
   font-size: 23px;
   content: "\e9da"
 }

 .fh5co-contact-info ul li.url:before {
   font-size: 23px;
   content: "\e9af"
 }

 .proj-bottom {
   padding-bottom: 4em
 }

 .features {
   margin-bottom: 3em;
   width: 100%;
   float: left
 }

 .fh5co-heading {
   margin-bottom: 3em
 }

 .fh5co-heading.fh5co-heading-sm {
   margin-bottom: 2em
 }

 .fh5co-heading h1 {
   font-size: 36px;
   margin-bottom: 5px;
   line-height: 1;
   color: #1a1c1f;
   font-weight: 600
 }

 .fh5co-heading h1:after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: 100%;
   margin: 0 auto;
   width: 25%;
   height: 5px;
   background: #f33
 }

 .fh5co-heading h2 {
   font-size: 38px;
   margin-bottom: 20px;
   line-height: 1.5;
   color: #666;
   font-weight: 400
 }

 .fh5co-heading p {
   font-size: 14px;
   line-height: 1.5;
   color: #828282
 }

 .fh5co-heading ul li a {
   font-size: 13px;
   line-height: 1;
   color: #00c
 }

 .fh5co-heading ul li a:hover {
   font-size: 13px;
   line-height: 1;
   color: #000
 }

 .fh5co-heading span {
   display: block;
   margin-bottom: 10px;
   text-transform: uppercase;
   font-size: 12px;
   letter-spacing: 2px
 }

 #account-content {
   padding: 3em 0;
   clear: both
 }

 #account {
   padding: 0 0;
   clear: both;
   background-color: #004890;
   margin-top: 90px
 }

 .agent-nav ul {
   padding: 16px;
   margin: 0
 }

 .agent-nav ul li {
   padding: 0;
   margin: 0;
   list-style: none;
   display: inline-block
 }

 .agent-nav ul li a {
   font-size: 14px;
   padding: 30px 10px;
   text-transform: none;
   color: #fff;
   -webkit-transition: .5s;
   -o-transition: .5s;
   transition: .5s;
   font-weight: 500;
   text-transform: uppercase
 }

 .agent-nav ul li a:active,
 .agent-nav ul li a:focus,
 .agent-nav ul li a:hover {
   color: #fc0
 }

 #fh5co-testimonial {
   padding: 6em 0;
   clear: both;
   margin-top: 50px
 }

 #fh5co-testimonial:after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   overflow: visible;
   width: 100%;
   height: 810px;
   z-index: -1;
   -webkit-transform: skewY(-3deg);
   -moz-transform: skewY(-3deg);
   -ms-transform: skewY(-3deg);
   -o-transform: skewY(-3deg);
   transform: skewY(-3deg)
 }

 #fh5co-testimonial {
   background: url(../images/customers.jpg) fixed;
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
   position: relative
 }

 #fh5co-testimonial .testimony-slide {
   text-align: center
 }

 #fh5co-testimonial h2 {
   font-size: 44px;
   margin-bottom: 20px;
   line-height: 1.5;
   color: #fff;
   font-weight: 600
 }

 #fh5co-testimonial .testimony-slide span {
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-weight: 500;
   display: block;
   color: #fff
 }

 #fh5co-testimonial .testimony-slide figure {
   margin-bottom: 10px;
   display: -moz-inline-stack;
   display: inline-block;
   zoom: 1
 }

 #fh5co-testimonial .testimony-slide figure img {
   width: 100px;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   border-radius: 50%
 }

 #fh5co-testimonial .testimony-slide blockquote {
   border: none;
   margin: 5px auto;
   width: 70%;
   position: relative;
   padding: 0;
   padding: 30px;
   color: #fff
 }

 @media screen and (max-width:992px) {
   #fh5co-testimonial .testimony-slide blockquote {
     width: 100%
   }
 }

 #fh5co-testimonial .arrow-thumb {
   position: absolute;
   top: 40%;
   display: block;
   width: 100%
 }

 #fh5co-testimonial .arrow-thumb a {
   font-size: 32px;
   color: #dadada
 }

 #fh5co-testimonial .arrow-thumb a:active,
 #fh5co-testimonial .arrow-thumb a:focus,
 #fh5co-testimonial .arrow-thumb a:hover {
   text-decoration: none
 }

 .bs-wizard {
   margin-top: 40px
 }

 .bs-wizard {
   border-bottom: solid 1px #e0e0e0;
   padding: 0 0 10px 0
 }

 .bs-wizard>.bs-wizard-step {
   padding: 0;
   position: relative
 }

 .bs-wizard>.bs-wizard-step .bs-wizard-stepnum {
   font-size: 16px;
   margin-bottom: 10px
 }

 .bs-wizard>.bs-wizard-step .bs-wizard-info {
   color: #999;
   font-size: 14px;
   padding: 20px
 }

 .bs-wizard>.bs-wizard-step>.bs-wizard-dot {
   position: absolute;
   width: 30px;
   height: 30px;
   display: block;
   background: #fbe8aa;
   top: 45px;
   left: 50%;
   margin-top: -15px;
   margin-left: -15px;
   border-radius: 50%
 }

 .bs-wizard>.bs-wizard-step>.bs-wizard-dot:after {
   content: ' ';
   width: 14px;
   height: 14px;
   background: #fbbd19;
   border-radius: 50px;
   position: absolute;
   top: 8px;
   left: 8px
 }

 .bs-wizard>.bs-wizard-step>.progress {
   position: relative;
   border-radius: 0;
   height: 8px;
   box-shadow: none;
   margin: 22px 0
 }

 .bs-wizard>.bs-wizard-step>.progress>.progress-bar {
   width: 0;
   box-shadow: none;
   background: #fbe8aa
 }

 .bs-wizard>.bs-wizard-step.complete>.progress>.progress-bar {
   width: 100%
 }

 .bs-wizard>.bs-wizard-step.active>.progress>.progress-bar {
   width: 50%
 }

 .bs-wizard>.bs-wizard-step:first-child.active>.progress>.progress-bar {
   width: 0%
 }

 .bs-wizard>.bs-wizard-step:last-child.active>.progress>.progress-bar {
   width: 100%
 }

 .bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot {
   background-color: #f5f5f5
 }

 .bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot:after {
   opacity: 0
 }

 .bs-wizard>.bs-wizard-step:first-child>.progress {
   left: 50%;
   width: 50%
 }

 .bs-wizard>.bs-wizard-step:last-child>.progress {
   width: 50%
 }

 .bs-wizard>.bs-wizard-step.disabled a.bs-wizard-dot {
   pointer-events: none
 }

 #fh5co-started {
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
   position: relative;
   float: left;
   width: 100%
 }

 #fh5co-started .overlay {
   z-index: 0;
   position: absolute;
   bottom: 0;
   top: 0;
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, .7)
 }

 #fh5co-started .fh5co-heading h2 {
   color: #fff;
   margin-bottom: 20px !important
 }

 #fh5co-started .fh5co-heading p {
   color: rgba(255, 255, 255, .5)
 }

 #fh5co-started .form-control {
   background: rgba(255, 255, 255, .2);
   border: none !important;
   color: #fff;
   font-size: 16px !important;
   width: 100%;
   -webkit-transition: .5s;
   -o-transition: .5s;
   transition: .5s
 }

 #fh5co-started .form-control::-webkit-input-placeholder {
   color: #fff
 }

 #fh5co-started .form-control:-moz-placeholder {
   color: #fff
 }

 #fh5co-started .form-control::-moz-placeholder {
   color: #fff
 }

 #fh5co-started .form-control:-ms-input-placeholder {
   color: #fff
 }

 #fh5co-started .form-control:focus {
   background: rgba(255, 255, 255, .3)
 }

 #fh5co-started .btn {
   height: 54px;
   border: none !important;
   background: #000000;
   color: #fff;
   font-size: 16px;
   text-transform: uppercase;
   font-weight: 400;
   padding-left: 50px;
   padding-right: 50px
 }

 #fh5co-started .form-inline .form-group {
   width: 100% !important;
   margin-bottom: 10px
 }

 #fh5co-started .form-inline .form-group .form-control {
   width: 100%
 }

 .fh5co-blog {
   margin-bottom: 60px
 }

 .fh5co-blog>a {
   display: block;
   position: relative;
   -webkit-transition: .5s;
   -o-transition: .5s;
   transition: .5s
 }

 .fh5co-blog>a img {
   width: 100%
 }

 @media screen and (max-width:768px) {
   .fh5co-blog {
     width: 100%
   }
 }

 .fh5co-blog .blog-text {
   margin-bottom: 30px;
   position: relative;
   background: #fff;
   width: 100%;
   padding: 30px;
   float: left;
   -webkit-box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .18);
   -moz-box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .18);
   box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .18)
 }

 .fh5co-blog .blog-text span {
   display: inline-block;
   margin-bottom: 20px
 }

 .fh5co-blog .blog-text span.comment {
   float: right
 }

 .fh5co-blog .blog-text span.comment a {
   color: rgba(0, 0, 0, .3)
 }

 .fh5co-blog .blog-text span.comment a i {
   color: #000000;
   padding-left: 7px
 }

 .fh5co-blog .blog-text h3 {
   font-size: 20px;
   margin-bottom: 20px;
   line-height: 1.5
 }

 .fh5co-blog .blog-text h3 a {
   color: #000
 }

 #map {
   width: 100%;
   height: 500px;
   position: relative
 }

 @media screen and (max-width:768px) {
   #map {
     height: 200px
   }
 }

 #fh5co-offcanvas {
   position: fixed;
   z-index: 1901;
   width: 350px;
   background: #000;
   top: 0;
   right: 0;
   top: 0;
   bottom: 0;
   padding: 75px 40px 40px 40px;
   overflow-y: auto;
   display: none;
   -moz-transform: translateX(350px);
   -webkit-transform: translateX(350px);
   -ms-transform: translateX(350px);
   -o-transform: translateX(350px);
   transform: translateX(350px);
   -webkit-transition: .5s;
   -o-transition: .5s;
   transition: .5s
 }

 @media screen and (max-width:768px) {
   #fh5co-offcanvas {
     display: block
   }
 }

 .offcanvas #fh5co-offcanvas {
   -moz-transform: translateX(0);
   -webkit-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
   transform: translateX(0)
 }

 #fh5co-offcanvas a {
   color: rgba(255, 255, 255, .5)
 }

 #fh5co-offcanvas a:hover {
   color: rgba(255, 255, 255, .8)
 }

 #fh5co-offcanvas ul {
   padding: 0;
   margin: 0
 }

 #fh5co-offcanvas ul li a {
   padding: 0;
   margin: 0;
   list-style: none;
   margin-bottom: 20px;
   color: #fff;
   font-weight: 500
 }

 #fh5co-offcanvas ul li>ul {
   padding-left: 20px;
   display: none
 }

 #fh5co-offcanvas ul li.offcanvas-has-dropdown>a {
   display: block;
   position: relative;
   color: #000
 }

 #fh5co-offcanvas ul li.offcanvas-has-dropdown>a:after {
   position: absolute;
   right: 0;
   font-family: icomoon;
   speak: none;
   font-style: normal;
   font-weight: 400;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e921";
   font-size: 20px;
   color: rgba(255, 255, 255, .2);
   -webkit-transition: .5s;
   -o-transition: .5s;
   transition: .5s
 }

 #fh5co-offcanvas ul li.offcanvas-has-dropdown.active a:after {
   -webkit-transform: rotate(-180deg);
   -moz-transform: rotate(-180deg);
   -ms-transform: rotate(-180deg);
   -o-transform: rotate(-180deg);
   transform: rotate(-180deg)
 }

 .uppercase {
   font-size: 14px;
   color: #000;
   margin-bottom: 10px;
   font-weight: 700;
   text-transform: uppercase
 }

 .gototop {
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 999;
   opacity: 0;
   visibility: hidden;
   -webkit-transition: .5s;
   -o-transition: .5s;
   transition: .5s
 }

 .gototop.active {
   opacity: 1;
   visibility: visible
 }

 .gototop a {
   width: 20px;
   height: 20px;
   display: table;
   background: rgba(0, 0, 0, .5);
   color: #fff;
   text-align: center;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   border-radius: 4px
 }

 .gototop a i {
   height: 10px;
   display: table-cell;
   vertical-align: middle;
   font-size: 12px
 }

 .gototop a:active,
 .gototop a:focus,
 .gototop a:hover {
   text-decoration: none;
   outline: 0
 }

 .fh5co-nav-toggle {
   width: 25px;
   height: 25px;
   cursor: pointer;
   text-decoration: none
 }

 .fh5co-nav-toggle.active i::after,
 .fh5co-nav-toggle.active i::before {
   background: #fff
 }

 .fh5co-nav-toggle:active,
 .fh5co-nav-toggle:focus,
 .fh5co-nav-toggle:hover {
   outline: 0;
   border-bottom: none !important
 }

 .fh5co-nav-toggle i {
   position: relative;
   display: inline-block;
   width: 25px;
   height: 2px;
   color: #fff;
   font: bold 14px/.4 Helvetica;
   text-transform: uppercase;
   text-indent: -55px;
   background: #252525;
   transition: all .2s ease-out
 }

 .fh5co-nav-toggle i::after,
 .fh5co-nav-toggle i::before {
   content: '';
   width: 25px;
   height: 2px;
   background: #252525;
   position: absolute;
   left: 0;
   transition: all .2s ease-out
 }

 .fh5co-nav-toggle.fh5co-nav-white>i {
   color: #fff;
   background: #fff
 }

 .fh5co-nav-toggle.fh5co-nav-white>i::after,
 .fh5co-nav-toggle.fh5co-nav-white>i::before {
   background: #fff
 }

 .fh5co-nav-toggle i::before {
   top: -7px
 }

 .fh5co-nav-toggle i::after {
   bottom: -7px
 }

 .fh5co-nav-toggle:hover i::before {
   top: -10px
 }

 .fh5co-nav-toggle:hover i::after {
   bottom: -10px
 }

 .fh5co-nav-toggle.active i {
   background: 0 0
 }

 .fh5co-nav-toggle.active i::before {
   top: 0;
   -webkit-transform: rotateZ(45deg);
   -moz-transform: rotateZ(45deg);
   -ms-transform: rotateZ(45deg);
   -o-transform: rotateZ(45deg);
   transform: rotateZ(45deg)
 }

 .fh5co-nav-toggle.active i::after {
   bottom: 0;
   -webkit-transform: rotateZ(-45deg);
   -moz-transform: rotateZ(-45deg);
   -ms-transform: rotateZ(-45deg);
   -o-transform: rotateZ(-45deg);
   transform: rotateZ(-45deg)
 }

 .fh5co-nav-toggle {
   position: fixed;
   right: 0;
   top: 15px;
   z-index: 21;
   padding: 6px 0 0 0;
   display: block;
   margin: 0 auto;
   display: none;
   height: 44px;
   width: 44px;
   z-index: 2001;
   border-bottom: none !important
 }

 @media screen and (max-width:768px) {
   .fh5co-nav-toggle {
     display: block
   }
 }

 .icon-sidebar-desk {
   position: fixed;
   bottom: 10%;
   right: 0;
   background-color: none;
   z-index: 99999;
   padding: 5px
 }

 .icon-sidebar-desk a {
   display: block;
   text-align: center;
   padding: 3px;
   transition: all .3s ease;
   color: #333;
   font-size: 25px;
   margin-bottom: 7px
 }

 .icon-sidebar-deskl {
   position: fixed;
   bottom: 10%;
   left: 0;
   background-color: none;
   z-index: 99999;
   padding: 5px
 }

 .box_top {
   padding: 10px;
   text-align: center;
   border-radius: 10px;
   background-color: #f0f0f0
 }

 .box_top .title {
   color: #000;
   font-size: 13px;
   font-weight: 500
 }

 .btn {
   border-bottom: none !important;
   text-transform: none;
   letter-spacing: 0;
   margin-bottom: 10px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
 }

 .btn:active,
 .btn:focus,
 .btn:hover {
   box-shadow: none;
   outline: 0 !important;
   border-color: transparent
 }

 .btn.fh5co-btn-icon {
   text-transform: none !important;
   letter-spacing: normal !important;
   padding-left: 15px;
   padding-right: 15px
 }

 .btn-outline {
   border: 2px solid #fff !important;
   background: 0 0;
   color: #fff
 }

 .btn-outline:active,
 .btn-outline:focus,
 .btn-outline:hover {
   border: 1px solid #f86942 !important;
   background: #f86942 !important;
   color: #fff
 }

 .btn.btn-md {
   padding: 8px 40px !important
 }

 .btn.btn-lg {
   padding: 18px 36px !important
 }

 .btn:active,
 .btn:focus,
 .btn:hover {
   box-shadow: none !important;
   outline: 0 !important
 }

 .btn-primary {
   background: #000;
   color: #fff;
   border: 2px solid #000
 }

 .btn-primary:active,
 .btn-primary:focus,
 .btn-primary:hover {
   background: #545455 !important;
   border-color: #545455 !important
 }

 .btn-primary.btn-outline {
   background: 0 0;
   color: #000;
   border: 2px solid #000000
 }

 .btn-primary.btn-outline:active,
 .btn-primary.btn-outline:focus,
 .btn-primary.btn-outline:hover {
   background: #000000;
   color: #fff
 }

 .btn-success {
   background: #ffcc00;
   color: #000;
   border: 2px solid #ffcc00;
   font-weight: 500
 }

 .btn-success:active,
 .btn-success:focus,
 .btn-success:hover {
   background: #4cae4c !important;
   border-color: #4cae4c !important
 }

 .btn-success.btn-outline {
   background: 0 0;
   color: #5cb85c;
   border: 2px solid #5cb85c
 }

 .btn-success.btn-outline:active,
 .btn-success.btn-outline:focus,
 .btn-success.btn-outline:hover {
   background: #5cb85c;
   color: #fff
 }

 .btn-info {
   background: #5bc0de;
   color: #fff;
   border: 2px solid #5bc0de
 }

 .btn-info:active,
 .btn-info:focus,
 .btn-info:hover {
   background: #46b8da !important;
   border-color: #46b8da !important
 }

 .btn-info.btn-outline {
   background: 0 0;
   color: #5bc0de;
   border: 2px solid #5bc0de
 }

 .btn-info.btn-outline:active,
 .btn-info.btn-outline:focus,
 .btn-info.btn-outline:hover {
   background: #5bc0de;
   color: #fff
 }

 .btn-warning {
   background: #f0ad4e;
   color: #fff;
   border: 2px solid #f0ad4e
 }

 .btn-warning:active,
 .btn-warning:focus,
 .btn-warning:hover {
   background: #eea236 !important;
   border-color: #eea236 !important
 }

 .btn-warning.btn-outline {
   background: 0 0;
   color: #f0ad4e;
   border: 2px solid #f0ad4e
 }

 .btn-warning.btn-outline:active,
 .btn-warning.btn-outline:focus,
 .btn-warning.btn-outline:hover {
   background: #f0ad4e;
   color: #fff
 }

 .btn-danger {
   background: #d43f3a;
   color: #fff;
   border: 2px solid #d43f3a
 }

 .btn-danger:active,
 .btn-danger:focus,
 .btn-danger:hover {
   background: #d43f3a !important;
   border-color: #d43f3a !important
 }

 .btn-danger.btn-outline {
   background: 0 0;
   color: #d9534f;
   border: 2px solid #d9534f
 }

 .btn-danger.btn-outline:active,
 .btn-danger.btn-outline:focus,
 .btn-danger.btn-outline:hover {
   background: #d9534f;
   color: #fff
 }

 .img {
   -webkit-box-shadow: 0 14px 30px -15px rgba(0, 0, 0, .75);
   -moz-box-shadow: 0 14px 30px -15px rgba(0, 0, 0, .75);
   box-shadow: 0 14px 30px -15px rgba(0, 0, 0, .75)
 }

 .btn-outline {
   background: 0 0;
   border: 1px solid gray;
   font-size: 12px;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s
 }

 .btn-outline:active,
 .btn-outline:focus,
 .btn-outline:hover {
   box-shadow: none
 }

 .btn.with-arrow {
   position: relative;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s
 }

 .btn.with-arrow i {
   visibility: hidden;
   opacity: 0;
   position: absolute;
   right: 0;
   top: 50%;
   margin-top: -8px;
   -webkit-transition: .2s;
   -o-transition: .2s;
   transition: .2s
 }

 .btn.with-arrow:hover {
   padding-right: 50px
 }

 .btn.with-arrow:hover i {
   color: #fff;
   right: 18px;
   visibility: visible;
   opacity: 1
 }

 .form-control {
   box-shadow: none;
   background: 0 0;
   border: 0px solid #999;
   font-size: 14px;
   font-weight: 500;
   margin-bottom: 10px;
   background-color: #fff;
   color: #000;
 }

 .form-control:active,
 .form-control:focus {
   outline: 0;
   box-shadow: none;
   border-color: #000000
 }

 .row-pb-md {
   padding-bottom: 4em !important
 }

 .row-pb-sm {
   padding-bottom: 2em !important
 }

 .row-pb-vs {
   padding-bottom: 1em !important
 }

 .fh5co-loader {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 9999
 }

 .js .animate-box {
   opacity: 0
 }

 #fh5co-footer {
   clear: both;
   position: relative;
   padding: 4em 0 3em 0;
   background: #000;
   font-size: 13px;
   line-height: 20px;
   color: #fff;
   font-weight: 400;
   margin-top: 0;
 }

 #fh5co-footer h3 a {
   color: #ffcc00;
   font-weight: 700
 }

 #fh5co-footer p a {
   color: #ffcc00;
   font-weight: 400
 }

 #fh5co-footer h4 {
   color: #fff;
   font-weight: 700
 }

 #fh5co-footer .fh5co-arrow {
   position: absolute;
   top: -84px;
   left: 50%;
   margin-left: -30px;
   display: table;
   color: #fff !important;
   font-size: 24px;
   z-index: 99;
   text-decoration: none;
   width: 60px;
   height: 60px;
   background: #f86942;
   border-bottom: none !important;
   text-align: center;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   border-radius: 50%;
   -webkit-box-shadow: 0 .125em .125em 0 rgba(0, 0, 0, .125);
   -moz-box-shadow: 0 .125em .125em 0 rgba(0, 0, 0, .125);
   -ms-box-shadow: 0 .125em .125em 0 rgba(0, 0, 0, .125);
   -o-box-shadow: 0 .125em .125em 0 rgba(0, 0, 0, .125);
   box-shadow: 0 .125em .125em 0 rgba(0, 0, 0, .125)
 }

 #fh5co-footer .fh5co-arrow i {
   display: table-cell;
   vertical-align: middle
 }

 #fh5co-footer .fh5co-arrow:active,
 #fh5co-footer .fh5co-arrow:focus,
 #fh5co-footer .fh5co-arrow:hover {
   outline: 0;
   color: #fff !important
 }

 #fh5co-footer .fh5co-copyright {
   margin-top: 1em;
   font-size: 10px
 }

 #fh5co-footer .fh5co-footer-heading {
   font-size: 16px;
   text-transform: none;
   letter-spacing: 0;
   color: #fff;
   margin-bottom: 25px;
   font-weight: 600
 }

 #fh5co-footer .fh5co-footer-links {
   padding: 0;
   margin: 0 0 30px 0
 }

 #fh5co-footer .fh5co-footer-links li {
   padding: 0;
   margin: 0;
   list-style: none
 }

 #fh5co-footer .fh5co-footer-links li a {
   color: #fff;
   font-size: 13px;
   line-height: 32px;
   text-transform: none;
   font-weight: 400
 }

 #fh5co-footer .fh5co-footer-links li a:hover {
   color: #fc0;
   text-transform: none;
   margin-left: 3px
 }

 #fh5co-footer a {
   color: #6f7881
 }

 #fh5co-footer a:hover {
   color: #fc0
 }

 [data-sidebar] {
   display: none;
   position: fixed;
   height: 100%;
   z-index: 100;
   width: 25%;
   right: 0;
   top: 0;
   border-left: 0 solid #e8e8e8;
   color: #fff;
   z-index: 99999
 }

 @media screen and (max-width:768px) {
   [data-sidebar] {
     display: none;
     position: fixed;
     height: 100%;
     z-index: 100;
     width: 100%;
     overflow: scroll
   }
 }

 [data-sidebar-overlay] {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   opacity: 0;
   width: 100%;
   min-height: inherit
 }

 aside {
   background-color: #75cd75;
   color: #fff
 }

 aside a {
   color: #fff;
   text-decoration: none
 }

 aside h3 {
   color: #fff;
   text-decoration: none
 }

 .padding {
   padding: 2em
 }

 .fh5co-heading .pbox {
   color: #fff;
   padding: 5px;
   width: 300px;
   text-align: center;
   border: 0 solid #ccc;
   background-color: #c3242a
 }

 .bg-section {
   background-image: url(../images/bg1.jpg);
   background-attachment: fixed;
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
 }

 .bg-section1 {
   background-image: url(../images/bg2.jpg);
   background-attachment: fixed;
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
 }

 .bg-section2 {
   background-image: url(../images/bg1.jpg);
   background-attachment: fixed;
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
 }

 .bg-section3 {
   background-image: url(../images/bg3.jpg);
   background-attachment: fixed;
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
 }

 #media-project .media-project {
   margin-bottom: 30px
 }

 #media-project .media-project>a {
   display: block;
   color: #000;
   position: relative;
   bottom: 0;
   overflow: hidden;
   -webkit-transition: .5s;
   -o-transition: .5s;
   transition: .5s
 }

 #media-project .media-project>a img {
   position: relative;
   -webkit-transition: .5s;
   -o-transition: .5s;
   transition: .5s
 }

 #media-project .media-project>a:after {
   opacity: 0;
   visibility: hidden;
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   top: 0;
   -webkit-box-shadow: inset 0 -34px 98px 8px rgba(0, 0, 0, .75);
   -moz-box-shadow: inset 0 -34px 98px 8px rgba(0, 0, 0, .75);
   -ms-box-shadow: inset 0 -34px 98px 8px rgba(0, 0, 0, .75);
   -o-box-shadow: inset 0 -34px 98px 8px rgba(0, 0, 0, .75);
   box-shadow: inset 0 -34px 98px 8px rgba(0, 0, 0, .75);
   z-index: 8;
   -webkit-transition: .5s;
   -o-transition: .5s;
   transition: .5s
 }

 #media-project .media-project>a h3,
 #media-project .media-project>a span {
   z-index: 12;
   position: absolute;
   right: 20px;
   left: 20px;
   bottom: 50px;
   color: #fff;
   margin: 0;
   padding: 0;
   opacity: 1;
   font-size: 22px;
   font-weight: 300;
   visibility: visible;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s
 }

 #media-project .media-project>a span {
   font-size: 14px;
   bottom: 20px
 }

 #media-project .media-project>a:hover {
   -webkit-box-shadow: 0 18px 71px -10px rgba(0, 0, 0, .75);
   -moz-box-shadow: 0 18px 71px -10px rgba(0, 0, 0, .75);
   box-shadow: 0 18px 71px -10px rgba(0, 0, 0, .75)
 }

 #media-project .media-project>a:hover:after {
   opacity: 1;
   visibility: visible
 }

 @media screen and (max-width:768px) {
   #media-project .media-project>a:hover:after {
     opacity: 0;
     visibility: hidden
   }
 }

 #media-project .media-project>a:hover h3,
 #media-project .media-project>a:hover span {
   opacity: 1;
   bottom: 55px
 }

 #media-project .media-project>a:hover span {
   bottom: 15px
 }

 #media-project .media-project>a:hover img {
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -o-transform: scale(1.1);
   transform: scale(1.1)
 }

 @media screen and (max-width:768px) {
   #media-project .media-project>a:hover img {
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -o-transform: scale(1);
     transform: scale(1)
   }
 }

 .desk {
   display: block;
   visibility: visible
 }

 .mobile {
   display: none;
   visibility: hidden
 }

 @media screen and (max-width:768px) {
   .desk {
     display: none;
     visibility: hidden
   }

   .mobile {
     display: block;
     visibility: visible;
     margin-bottom: 20px;
     margin-left: -20px
   }
 }

 #fh5co-product {
   padding: 4em 0;
   clear: both
 }

 @media screen and (max-width:768px) {
   #fh5co-product {
     padding: 3em 0
   }
 }

 .product {
   margin-bottom: 40px
 }

 .product .product-grid {
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
   position: relative;
   height: 550px;
   margin-bottom: 20px;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s
 }

 .product .product-grid .sale {
   position: absolute;
   top: 10px;
   left: 10px;
   padding: 10px;
   z-index: 100;
   background: #d1c286;
   color: #fff;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   border-radius: 50%
 }

 .product .product-grid .inner {
   display: table;
   height: 550px;
   width: 100%;
   opacity: 0;
   border: 40px #fff solid;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s
 }

 @media screen and (max-width:768px) {
   .product .product-grid .inner {
     opacity: 1;
     background: 0 0
   }
 }

 .product .product-grid .inner p {
   display: table-cell;
   vertical-align: middle
 }

 .product .product-grid .inner p .icon {
   padding: 7px 10px;
   color: #fff;
   background: #d1c286
 }

 .product .product-grid .inner p .icon:focus,
 .product .product-grid .inner p .icon:hover {
   color: #d1c286;
   background: #fff
 }

 .product .desc h3 {
   font-size: 14px;
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: 5px;
   font-weight: 700;
   line-height: 24px
 }

 .product .desc h3 a {
   color: #000
 }

 .product .desc .price {
   letter-spacing: 2px;
   text-transform: uppercase
 }

 .product:focus .product-grid,
 .product:hover .product-grid {
   -webkit-box-shadow: 0 10px 24px -7px rgba(0, 0, 0, .35);
   -moz-box-shadow: 0 10px 24px -7px rgba(0, 0, 0, .35);
   -ms-box-shadow: 0 10px 24px -7px rgba(0, 0, 0, .35);
   -o-box-shadow: 0 10px 24px -7px rgba(0, 0, 0, .35);
   box-shadow: 0 10px 24px -7px rgba(0, 0, 0, .35)
 }

 .product:focus .inner,
 .product:hover .inner {
   opacity: 1
 }

 .product:focus .desc h3 a,
 .product:hover .desc h3 a {
   color: #d1c286
 }

 .product-carousel {
   margin-bottom: 7em
 }

 .fh5co-section-heading {
   margin: 0;
   font-size: 18px;
   position: relative;
   font-weight: 400;
   padding-bottom: 10px;
   margin-bottom: 1.5em;
   text-transform: uppercase;
   color: #000
 }

 .fh5co-section-heading .fh5co-border {
   display: block;
   width: 100%;
   bottom: 0;
   height: 3px;
   position: absolute;
   background: #44da82
 }

 @media screen and (max-width:992px) {
   .fh5co-section-heading .fh5co-border {
     background: 0 0 !important
   }
 }

 .fh5co-project {
   margin-bottom: 1.5em;
   display: block;
   position: relative
 }

 .fh5co-project .fh5co-overlay {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   background: rgba(68, 218, 130, .9);
   z-index: 8;
   opacity: 0
 }

 .fh5co-project .fh5co-overlay-text {
   position: absolute;
   top: 50%;
   text-align: center;
   width: 100%;
   margin-top: -15px;
   z-index: 9;
   color: #fff;
   font-size: 20px;
   font-family: Sanchez, times, serif;
   opacity: 0
 }

 .blog-inner {
   background: #fff;
   -webkit-box-shadow: 0 9px 29px -9px rgba(0, 0, 0, .13);
   -moz-box-shadow: 0 9px 29px -9px rgba(0, 0, 0, .13);
   -ms-box-shadow: 0 9px 29px -9px rgba(0, 0, 0, .13);
   -o-box-shadow: 0 9px 29px -9px rgba(0, 0, 0, .13);
   box-shadow: 0 9px 29px -9px rgba(0, 0, 0, .13);
   overflow: hidden;
   margin-bottom: 0;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0;
   -ms-border-radius: 0px;
   border-radius: 0;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s;
   border-bottom: 2px solid #ccc;
   max-height: 330px;
   height: 330px
 }

 .blog-inner img {
   -webkit-border-radius: 0px;
   -moz-border-radius: 0;
   -ms-border-radius: 0px;
   border-radius: 0;
   max-height: 200px;
   height: 200px;
   width: 300px;
   max-width: 300px
 }

 .blog-inner .desc {
   padding: 20px
 }

 .blog-inner .desc h3 {
   line-height: 28px;
   font-size: 18px
 }

 .blog-inner .desc h3 a {
   color: rgba(0, 0, 0, .8)
 }

 .blog-inner .desc h3 a:focus,
 .blog-inner .desc h3 a:hover {
   text-decoration: none
 }

 .blog-inner:hover {
   -webkit-box-shadow: 0 9px 43px -10px rgba(0, 0, 0, .17);
   -moz-box-shadow: 0 9px 43px -10px rgba(0, 0, 0, .17);
   -ms-box-shadow: 0 9px 43px -10px rgba(0, 0, 0, .17);
   -o-box-shadow: 0 9px 43px -10px rgba(0, 0, 0, .17);
   box-shadow: 0 9px 43px -10px rgba(0, 0, 0, .17)
 }

 ol,
 ul {
   list-style: none
 }

 :root {
   --space-unit: 1em;
   --space-xxxxs: calc(0.125*var(--space-unit));
   --space-xxxs: calc(0.25*var(--space-unit));
   --space-xxs: calc(0.375*var(--space-unit));
   --space-xs: calc(0.5*var(--space-unit));
   --space-sm: calc(0.75*var(--space-unit));
   --space-md: calc(1.25*var(--space-unit));
   --space-lg: calc(2*var(--space-unit));
   --space-xl: calc(3.25*var(--space-unit));
   --space-xxl: calc(5.25*var(--space-unit));
   --space-xxxl: calc(8.5*var(--space-unit));
   --space-xxxxl: calc(13.75*var(--space-unit));
   --component-padding: var(--space-md)
 }

 @supports (--css:variables) {
   @media (min-width:64rem) {
     :root {
       --space-unit: 1.25em
     }
   }
 }

 @media (min-width:90rem) {
   .hide--xl {
     display: none !important
   }
 }

 :root {
   --display: block
 }

 .is-visible {
   display: block !important;
   display: var(--display) !important
 }

 .is-hidden {
   display: none !important
 }

 .sr-only {
   position: absolute;
   clip: rect(1px, 1px, 1px, 1px);
   -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
   width: 1px;
   height: 1px;
   overflow: hidden;
   padding: 0;
   border: 0;
   white-space: nowrap
 }

 :root {
   --cd-color-1: hsl(32, 7%, 32%);
   --cd-color-1-h: 180;
   --cd-color-1-s: 7%;
   --cd-color-1-l: 32%;
   --cd-color-2: hsl(180, 83%, 80%);
   --cd-color-2-h: 127;
   --cd-color-2-s: 83%;
   --cd-color-2-l: 80%
 }

 .cd-accordion {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   box-shadow: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1);
   box-shadow: var(--shadow-lg)
 }

 .cd-accordion--animated .cd-accordion__label::before {
   transition: -webkit-transform .3s;
   transition: transform .3s;
   transition: transform .3s, -webkit-transform .3s
 }

 .cd-accordion__sub {
   display: none;
   overflow: hidden
 }

 .cd-accordion__sub--is-visible {
   display: block
 }

 .cd-accordion__item {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   margin-bottom: 5px
 }

 .cd-accordion__input {
   position: absolute;
   opacity: 0
 }

 .cd-accordion__label {
   position: relative;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
   align-items: center;
   padding: .75em 1.25em;
   padding: var(--space-sm) var(--space-md);
   background: #4b5057;
   background: var(--cd-color-1);
   --color-shadow: lightness(hsl(218, 7%, 32%), 1.2);
   --color-shadow: lightness(var(--cd-color-1), 1.2);
   box-shadow: inset 0 -1px lightness(#4b5057, 1.2);
   box-shadow: inset 0 -1px var(--color-shadow);
   color: #fff;
   color: var(--color-white);
   background: 0 0;
   color: #333;
   padding: 60px;
   border: 1px solid #e2e2e2;
   border-radius: 12px
 }

 .cd-accordion__label1 {
   position: relative;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
   align-items: center;
   padding: .75em 1.25em;
   padding: var(--space-sm) var(--space-md);
   background: #4b5057;
   background: var(--cd-color-1);
   --color-shadow: lightness(hsl(218, 7%, 32%), 1.2);
   --color-shadow: lightness(var(--cd-color-1), 1.2);
   box-shadow: inset 0 -1px lightness(#4b5057, 1.2);
   box-shadow: inset 0 -1px var(--color-shadow);
   color: #fff;
   color: var(--color-white);
   background-color: #fff;
   color: #333;
   color: #333;
   padding: 15px
 }

 .cd-accordion__label span {
   -ms-flex-order: 3;
   order: 3
 }

 .cd-accordion__label:hover {
   background: hsl(218, 7%, 35.2%);
   background: hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*1.1));
   background-color: #fff;
   border: 1px solid #999
 }

 .cd-accordion__label--icon-folder::before,
 .cd-accordion__label::after {
   content: '';
   display: block;
   width: 16px;
   height: 16px;
   background-image: url("../images/cd-icons.svg");
   background-repeat: no-repeat;
   margin-right: .25em;
   margin-right: var(--space-xxxs);
   margin-left: -30px;
   display: none
 }

 .cd-accordion__label--icon-folder::before {
   -ms-flex-order: 1;
   order: 1
 }

 .cd-accordion__label::after {
   -ms-flex-order: 2;
   order: 2
 }

 .cd-accordion__label--icon-folder::before {
   background-position: 0 0;
   -webkit-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   transform: rotate(-90deg)
 }

 .cd-accordion__label--icon-folder::after {
   background-position: -16px 0
 }

 .cd-accordion__label--icon-img::after {
   display: none
 }

 .cd-accordion__input:checked+.cd-accordion__label::before {
   -webkit-transform: rotate(0);
   -ms-transform: rotate(0);
   transform: rotate(0)
 }

 .cd-accordion__input:checked+.cd-accordion__label::after {
   background-position: -32px 0
 }

 .cd-accordion__input:checked~.cd-accordion__sub {
   display: block
 }

 #fh5co-team-section {
   padding: 4em 0;
   clear: both
 }

 .team-section-grid {
   position: relative;
   background-size: cover;
   height: 450px;
   margin-bottom: 30px;
   border: 1px solid #f0f0f0
 }

 .team-section-grid .overlay-section {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, .2);
   opacity: 1;
   -webkit-transition: .6s;
   -o-transition: .6s;
   transition: .6s;
   border: 30px solid #fff
 }

 .team-section-grid .overlay-section:hover {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, 0);
   opacity: 0;
   -webkit-transition: .6s;
   -o-transition: .6s;
   transition: .6s;
   border: 0 solid #fff
 }

 .team-section-grid .overlay-section h3 {
   color: #fff;
   margin-bottom: 10px;
   font-size: 20px;
   text-transform: uppercase;
   letter-spacing: 0
 }

 .team-section-grid .overlay-section p {
   color: rgba(255, 255, 255, .8)
 }

 .team-section-grid .overlay-section p.fh5co-social-icons a:focus,
 .team-section-grid .overlay-section p.fh5co-social-icons a:hover {
   text-decoration: none !important
 }

 .team-section-grid .overlay-section p.fh5co-social-icons i {
   font-size: 32px
 }

 .team-section-grid .overlay-section span {
   color: #fff;
   display: block;
   margin-bottom: 50px
 }

 .team-section-grid .overlay-section .desc {
   position: absolute;
   bottom: 0;
   left: 30px;
   right: 30px
 }

 .team-section-grid:hover .overlay-section {
   opacity: 1
 }

 .author {
   width: 100%;
   float: left
 }

 .author .about-inner {
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
   position: relative;
   width: 40%;
   height: 450px;
   float: left
 }

 @media screen and (max-width:480px) {
   .author .about-inner {
     width: 100%;
     margin-bottom: 40px
   }
 }

 .desc {
   width: 100%;
   float: left;
   padding-left: 50px;
   margin-top: 0
 }

 @media screen and (max-width:480px) {
   .desc {
     width: 100%;
     padding-left: 0;
     margin-top: 0
   }
 }

 .desc span {
   font-size: 13px;
   text-transform: uppercase;
   display: block;
   margin-bottom: 20px;
   letter-spacing: 1px
 }

 .desc h3 {
   font-weight: 700;
   line-height: 40px;
   font-size: 30px
 }

 #fh5co-portfolio-section {
   padding: 4em 0;
   clear: both
 }

 #fh5co-portfolio-section-h {
   padding: 0 0;
   clear: both;
   margin-top: -100px
 }

 #filters {
   padding: 0;
   list-style: none
 }

 #filters li {
   display: inline-block;
   margin-right: 20px
 }

 #filters li span {
   display: block;
   text-decoration: none;
   cursor: pointer;
   color: rgba(0, 0, 0, .3)
 }

 #filters li span.active,
 #filters li span:focus,
 #filters li span:hover {
   color: #000 !important
 }

 #portfoliolist .portfolio {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   width: 50%;
   display: none;
   float: left;
   overflow: hidden
 }

 @media screen and (max-width:992px) {
   #portfoliolist .portfolio {
     width: 50% !important
   }
 }

 @media screen and (max-width:768px) {
   #portfoliolist .portfolio {
     width: 100% !important
   }
 }

 @media screen and (max-width:480px) {
   #portfoliolist .portfolio {
     width: 100% !important
   }
 }

 #portfoliolisth .portfolioh {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   width: 33.3%;
   display: none;
   float: left;
   overflow: hidden
 }

 @media screen and (max-width:992px) {
   #portfoliolisth .portfolioh {
     width: 50% !important
   }
 }

 @media screen and (max-width:768px) {
   #portfoliolisth .portfolioh {
     width: 100% !important
   }
 }

 @media screen and (max-width:480px) {
   #portfoliolisth .portfolioh {
     width: 100% !important
   }
 }

 .portfolioh-wrapperh {
   overflow: hidden;
   position: relative !important;
   cursor: pointer
 }

 .portfolioh {
   overflow: hidden;
   position: relative;
   z-index: 1;
   float: left
 }

 .portfolioh img {
   max-width: 100%;
   z-index: -1;
   height: 700px;
   position: relative;
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -ms-transform: scale(1.1);
   -o-transform: scale(1.1);
   transform: scale(1.1);
   -webkit-transition: all .6s cubic-bezier(.645, .045, .355, 1);
   transition: all .6s cubic-bezier(.645, .045, .355, 1)
 }

 .portfolioh .label {
   position: absolute;
   width: 100%;
   height: 85px;
   bottom: 420px;
   -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
   transition: all .3s cubic-bezier(.645, .045, .355, 1)
 }

 .portfolioh .label-bg {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0
 }

 .portfolioh .label-text {
   color: #fff;
   position: relative;
   z-index: 500;
   padding: 5px 8px;
   font-size: 36px
 }

 .portfolioh .text-category {
   display: block;
   color: #fff;
   font-size: 14px;
   text-transform: normal
 }

 .portfolioh:hover .label {
   bottom: 440px
 }

 .portfolioh .label1 {
   position: absolute;
   width: 100%;
   height: 465px;
   bottom: -15px;
   -webkit-transition: all .8s cubic-bezier(.645, .045, .355, 1);
   transition: all .8s cubic-bezier(.645, .045, .355, 1)
 }

 .portfolioh .label-bg {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0
 }

 .portfolioh .label-text1 {
   color: #fff;
   position: relative;
   z-index: 500;
   padding: 5px 8px;
   font-size: 26px;
   text-align: center
 }

 .portfolioh .text-category1 {
   display: block;
   color: #fff;
   font-size: 14px;
   text-transform: normal
 }

 .portfolioh:hover .label1 {
   bottom: 10px
 }

 .portfolioh:hover img {
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2)
 }

 @media screen and (max-width:768px) {
   .portfolioh img {
     max-width: 100%;
     z-index: -1;
     height: 450px;
     position: relative;
     -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
     -ms-transform: scale(1.1);
     -o-transform: scale(1.1);
     transform: scale(1.1);
     -webkit-transition: all .6s cubic-bezier(.645, .045, .355, 1);
     transition: all .6s cubic-bezier(.645, .045, .355, 1)
   }

   .portfolioh .label {
     position: absolute;
     width: 100%;
     height: 85px;
     bottom: 140px;
     -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
     transition: all .3s cubic-bezier(.645, .045, .355, 1)
   }

   .portfolioh .label-bg {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0
   }

   .portfolioh .label-text {
     color: #fff;
     position: relative;
     z-index: 500;
     padding: 5px 8px;
     font-size: 36px
   }

   .portfolioh .text-category {
     display: block;
     color: #fff;
     font-size: 14px;
     text-transform: normal
   }

   .portfolioh:hover .label {
     bottom: 150px
   }

   .portfolioh .label1 {
     position: absolute;
     width: 100%;
     height: 145px;
     bottom: 45px;
     -webkit-transition: all .8s cubic-bezier(.645, .045, .355, 1);
     transition: all .8s cubic-bezier(.645, .045, .355, 1)
   }

   .portfolioh .label-bg {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0
   }

   .portfolioh .label-text1 {
     color: #fff;
     position: relative;
     z-index: 500;
     padding: 5px 8px;
     font-size: 26px;
     text-align: center
   }

   .portfolioh .text-category1 {
     display: block;
     color: #fff;
     font-size: 14px;
     text-transform: normal
   }

   .portfolioh:hover .label1 {
     bottom: 10px
   }

   .portfolioh .label-text {
     color: #fff;
     position: relative;
     z-index: 500;
     padding: 5px 8px;
     font-size: 26px
   }
 }

 .portfolio-wrapper {
   overflow: hidden;
   position: relative !important;
   cursor: pointer
 }

 .portfolio {
   overflow: hidden;
   position: relative;
   z-index: 1;
   float: left
 }

 .portfolio img {
   max-width: 100%;
   z-index: -1;
   height: 350px;
   position: relative;
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -ms-transform: scale(1.1);
   -o-transform: scale(1.1);
   transform: scale(1.1);
   -webkit-transition: all .6s cubic-bezier(.645, .045, .355, 1);
   transition: all .6s cubic-bezier(.645, .045, .355, 1)
 }

 .portfolio .label {
   position: absolute;
   width: 100%;
   height: 85px;
   bottom: 120px;
   -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
   transition: all .3s cubic-bezier(.645, .045, .355, 1)
 }

 .portfolio .label-bg {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0
 }

 .portfolio .label-text {
   color: #fff;
   position: relative;
   z-index: 500;
   padding: 5px 8px;
   font-size: 36px
 }

 @media screen and (max-width:768px) {
   .portfolio .label-text {
     color: #fff;
     position: relative;
     z-index: 500;
     padding: 5px 8px;
     font-size: 26px
   }
 }

 .portfolio .text-category {
   display: block;
   color: #fff;
   font-size: 14px;
   text-transform: normal
 }

 .portfolio:hover .label {
   bottom: 140px
 }

 .portfolio .label1 {
   position: absolute;
   width: 100%;
   height: 135px;
   bottom: 95px;
   -webkit-transition: all .8s cubic-bezier(.645, .045, .355, 1);
   transition: all .8s cubic-bezier(.645, .045, .355, 1)
 }

 .portfolio .label-bg {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0
 }

 .portfolio .label-text1 {
   color: #fff;
   position: relative;
   z-index: 500;
   padding: 5px 8px;
   font-size: 26px;
   text-align: center
 }

 .portfolio .text-category1 {
   display: block;
   color: #fff;
   font-size: 14px;
   text-transform: normal
 }

 .portfolio:hover .label1 {
   bottom: 120px
 }

 .portfolio:hover img {
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2)
 }

 .bg-cover {
   height: 840px;
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
   position: relative
 }

 .bg-text {
   padding: 80px;
   height: 840px;
   overflow: auto
 }

 .bg-cover1 {
   height: 450px;
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
   position: relative
 }

 .bg-text1 {
   padding: 20px;
   height: 450px;
   overflow: auto
 }

 @media screen and (max-width:768px) {
   .bg-cover {
     height: 700px;
     background-size: cover;
     background-position: top center;
     background-repeat: no-repeat;
     position: relative;
     margin-top: 130px
   }

   .bg-text {
     padding: 30px;
     height: 700px;
     overflow: auto
   }
 }

 .feature-box {
   position: relative;
   margin-top: 20px;
   padding: 0 0 0 80px
 }

 .feature-box:first-child {
   margin-top: 0
 }

 .feature-box .fbox-icon {
   display: block;
   position: absolute;
   width: 64px;
   height: 64px;
   top: 0;
   left: 0
 }

 .feature-box .fbox-icon a,
 .feature-box .fbox-icon i,
 .feature-box .fbox-icon img {
   display: block;
   position: relative;
   width: 100%;
   height: 100%;
   color: #fff
 }

 .feature-box .fbox-icon i,
 .feature-box .fbox-icon img {
   border-radius: 50%;
   background-color: #1abc9c
 }

 .feature-box .fbox-icon i {
   font-style: normal;
   font-size: 28px;
   text-align: center;
   line-height: 64px
 }

 .feature-box h3 {
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 1px;
   margin-bottom: 0
 }

 .feature-box p {
   margin: 8px 0 0;
   font-size: 13px
 }

 .feature-box .before-heading {
   font-size: 14px
 }

 .feature-box.fbox-large {
   padding: 0 0 0 115px
 }

 .feature-box.fbox-large .fbox-icon {
   width: 96px;
   height: 96px
 }

 .feature-box.fbox-large .fbox-icon i {
   font-size: 42px;
   line-height: 96px
 }

 .feature-box.fbox-outline .fbox-icon {
   border: 1px solid #1abc9c;
   border-radius: 50%;
   padding: 3px
 }

 .feature-box.fbox-outline .fbox-icon i {
   line-height: 56px
 }

 .feature-box.fbox-outline.fbox-large .fbox-icon {
   padding: 4px
 }

 .feature-box.fbox-outline.fbox-large .fbox-icon i {
   line-height: 86px
 }

 .feature-box.fbox-rounded .fbox-icon,
 .feature-box.fbox-rounded .fbox-icon i,
 .feature-box.fbox-rounded .fbox-icon img {
   border-radius: 3px !important
 }

 .feature-box.fbox-rounded.fbox-large .fbox-icon,
 .feature-box.fbox-rounded.fbox-large .fbox-icon i,
 .feature-box.fbox-rounded.fbox-large .fbox-icon img {
   border-radius: 4px !important
 }

 .feature-box.fbox-light.fbox-outline .fbox-icon {
   border-color: #e5e5e5
 }

 .feature-box.fbox-light .fbox-icon i,
 .feature-box.fbox-light .fbox-icon img {
   border: 1px solid #e5e5e5;
   background-color: #f5f5f5;
   color: #444
 }

 .feature-box.fbox-light .fbox-icon i {
   line-height: 62px
 }

 .feature-box.fbox-light.fbox-outline .fbox-icon i {
   line-height: 54px
 }

 .feature-box.fbox-light.fbox-large .fbox-icon i {
   line-height: 96px
 }

 .feature-box.fbox-light.fbox-outline.fbox-large .fbox-icon i {
   line-height: 84px
 }

 .feature-box.fbox-dark.fbox-outline .fbox-icon {
   border-color: #444
 }

 .feature-box.fbox-dark .fbox-icon i,
 .feature-box.fbox-dark .fbox-icon img {
   background-color: #333
 }

 .feature-box.fbox-border .fbox-icon {
   border: 1px solid #1abc9c;
   border-radius: 50%;
   padding: 0
 }

 .feature-box.fbox-border .fbox-icon i,
 .feature-box.fbox-border .fbox-icon img {
   border: none;
   background-color: transparent !important;
   color: #1abc9c
 }

 .feature-box.fbox-border .fbox-icon i {
   line-height: 62px !important
 }

 .feature-box.fbox-border.fbox-large .fbox-icon i {
   line-height: 94px !important
 }

 .feature-box.fbox-border.fbox-light .fbox-icon {
   border-color: #e5e5e5
 }

 .feature-box.fbox-border.fbox-light .fbox-icon i,
 .feature-box.fbox-border.fbox-light .fbox-icon img {
   color: #888
 }

 .feature-box.fbox-border.fbox-dark .fbox-icon {
   border-color: #333
 }

 .feature-box.fbox-border.fbox-dark .fbox-icon i,
 .feature-box.fbox-border.fbox-dark .fbox-icon img {
   color: #444
 }

 .feature-box.fbox-plain .fbox-icon {
   border: none !important;
   height: auto !important
 }

 .feature-box.fbox-plain .fbox-icon i,
 .feature-box.fbox-plain .fbox-icon img {
   border: none !important;
   background-color: transparent !important;
   color: #1abc9c;
   border-radius: 0
 }

 .feature-box.fbox-plain .fbox-icon i {
   font-size: 48px;
   line-height: 1 !important
 }

 .feature-box.fbox-plain .fbox-icon img {
   height: 64px
 }

 .feature-box.fbox-plain.fbox-image .fbox-icon {
   width: auto
 }

 .feature-box.fbox-plain.fbox-image .fbox-icon img {
   width: auto;
   display: inline-block
 }

 .feature-box.fbox-plain.fbox-small {
   padding-left: 42px
 }

 .feature-box.fbox-plain.fbox-small .fbox-icon {
   width: 28px
 }

 .feature-box.fbox-plain.fbox-small h3 {
   font-size: 15px;
   line-height: 26px;
   margin-bottom: 10px
 }

 .feature-box.fbox-plain.fbox-small p {
   margin-left: -42px
 }

 .feature-box.fbox-plain.fbox-small .fbox-icon i {
   font-size: 28px
 }

 .feature-box.fbox-plain.fbox-small .fbox-icon img {
   height: 28px
 }

 .feature-box.fbox-plain.fbox-large .fbox-icon i {
   font-size: 72px
 }

 .feature-box.fbox-plain.fbox-large .fbox-icon img {
   height: 96px
 }

 .feature-box.fbox-plain.fbox-light .fbox-icon i,
 .feature-box.fbox-plain.fbox-light .fbox-icon img {
   color: #888
 }

 .feature-box.fbox-plain.fbox-dark .fbox-icon i,
 .feature-box.fbox-plain.fbox-dark .fbox-icon img {
   color: #444
 }

 .feature-box.fbox-center {
   padding: 0;
   text-align: center
 }

 .feature-box.fbox-center.fbox-small {
   padding-left: 0 !important
 }

 .feature-box.fbox-center .fbox-icon {
   position: relative;
   width: 96px;
   height: 96px;
   margin: 0 auto 30px
 }

 .feature-box.fbox-center .fbox-icon i {
   font-size: 42px;
   line-height: 96px
 }

 .feature-box.fbox-center.fbox-outline .fbox-icon i {
   line-height: 88px
 }

 .feature-box.fbox-center p {
   font-size: 14px;
   margin-top: 15px
 }

 .feature-box.fbox-center.fbox-large .fbox-icon {
   width: 128px;
   height: 128px
 }

 .feature-box.fbox-center.fbox-large .fbox-icon i {
   font-size: 70px;
   line-height: 128px
 }

 .feature-box.fbox-center.fbox-large.fbox-outline .fbox-icon i {
   line-height: 118px
 }

 .feature-box.fbox-center.fbox-light .fbox-icon i {
   line-height: 94px
 }

 .feature-box.fbox-center.fbox-light.fbox-outline .fbox-icon i {
   line-height: 86px
 }

 .feature-box.fbox-center.fbox-light.fbox-outline.fbox-large .fbox-icon i {
   line-height: 114px
 }

 .feature-box.fbox-center.fbox-border .fbox-icon i {
   line-height: 94px !important
 }

 .feature-box.fbox-center.fbox-large.fbox-border .fbox-icon i {
   line-height: 126px !important
 }

 .feature-box.fbox-center.fbox-plain .fbox-icon i {
   font-size: 84px
 }

 .feature-box.fbox-center.fbox-plain .fbox-icon img {
   height: 96px
 }

 .feature-box.fbox-center.fbox-large.fbox-plain .fbox-icon i {
   font-size: 112px
 }

 .feature-box.fbox-center.fbox-large.fbox-plain .fbox-icon img {
   height: 128px
 }

 .feature-box.fbox-center.fbox-small .fbox-icon {
   width: 64px;
   height: 64px
 }

 .feature-box.fbox-center.fbox-small .fbox-icon i {
   font-size: 28px;
   line-height: 64px
 }

 .feature-box.fbox-center.fbox-small.fbox-outline .fbox-icon i {
   line-height: 58px
 }

 .feature-box.fbox-center.fbox-light.fbox-outline.fbox-small .fbox-icon i {
   line-height: 54px
 }

 .feature-box.fbox-center.fbox-small.fbox-border .fbox-icon i {
   line-height: 62px !important
 }

 .feature-box.fbox-center.fbox-small.fbox-plain .fbox-icon i {
   font-size: 56px
 }

 .feature-box.fbox-center.fbox-small.fbox-plain .fbox-icon img {
   height: 64px
 }

 .feature-box.fbox-center.fbox-small p {
   font-size: 14px;
   margin-top: 10px
 }

 .feature-box.fbox-center.fbox-plain.fbox-small p {
   margin-left: 0
 }

 .feature-box.fbox-right {
   padding: 0 80px 0 0;
   text-align: right
 }

 .feature-box.fbox-right.fbox-large {
   padding-right: 115px
 }

 .feature-box.fbox-right .fbox-icon {
   left: auto;
   right: 0
 }

 .feature-box.fbox-right.fbox-plain.fbox-small {
   padding: 0 42px 0 0
 }

 .feature-box.fbox-right.fbox-plain.fbox-small p {
   margin: 0 -42px 0 0
 }

 .feature-box h3+.fbox-icon {
   margin-top: 20px !important
 }

 .feature-box h3 span.subtitle {
   display: block;
   margin-top: 5px;
   color: #444;
   font-weight: 300;
   text-transform: none
 }

 .feature-box.fbox-center:not(.fbox-bg) h3:after {
   content: '';
   display: block;
   margin: 20px auto;
   width: 30px;
   border-top: 2px solid #555;
   -webkit-transition: width .3s ease;
   -o-transition: width .3s ease;
   transition: width .3s ease
 }

 .feature-box.fbox-center:not(.fbox-bg):hover h3:after {
   width: 50px
 }

 .feature-box.fbox-center.noborder:not(.fbox-bg) h3:after,
 .feature-box.fbox-center.nobottomborder:not(.fbox-bg) h3:after {
   display: none
 }

 .feature-box.fbox-center.fbox-italic p {
   font-style: italic;
   font-family: Lato, sans-serif
 }

 .feature-box.fbox-bg.fbox-center {
   margin-top: 68px;
   padding: 68px 30px 30px;
   background-color: #fff;
   border: 1px solid #e5e5e5;
   border-radius: 5px
 }

 .feature-box.fbox-bg.fbox-center:first-child {
   margin-top: 48px
 }

 .feature-box.fbox-bg.fbox-center.fbox-large {
   margin-top: 84px;
   padding-top: 84px
 }

 .feature-box.fbox-bg.fbox-center.fbox-large:first-child {
   margin-top: 64px
 }

 .feature-box.fbox-bg.fbox-center .fbox-icon {
   position: absolute;
   top: -48px;
   left: 50%;
   margin: 0 0 0 -48px
 }

 .feature-box.fbox-bg.fbox-center.fbox-large .fbox-icon {
   top: -64px;
   left: 50%;
   margin-left: -64px
 }

 .feature-box.fbox-bg.fbox-center.fbox-border .fbox-icon,
 .feature-box.fbox-bg.fbox-center.fbox-outline .fbox-icon,
 .feature-box.fbox-bg.fbox-center.fbox-plain .fbox-icon {
   background-color: #fff
 }

 .fbox-effect .fbox-icon i {
   z-index: 1;
   -webkit-transition: background-color .3s, color .3s;
   -o-transition: background-color .3s, color .3s;
   transition: background-color .3s, color .3s
 }

 .fbox-effect .fbox-icon i:after {
   pointer-events: none;
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   content: '';
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   top: -3px;
   left: -3px;
   padding: 3px;
   box-shadow: 0 0 0 2px #333;
   -webkit-transition: -webkit-transform .3s, opacity .3s;
   -webkit-transform: scale(.8);
   -moz-transition: -moz-transform .3s, opacity .3s;
   -moz-transform: scale(.8);
   -ms-transform: scale(.8);
   transition: transform .3s, opacity .3s;
   transform: scale(.8);
   opacity: 0
 }

 .fbox-border.fbox-rounded.fbox-effect .fbox-icon i:after,
 .fbox-rounded.fbox-effect .fbox-icon i:after {
   border-radius: 3px
 }

 .fbox-effect .fbox-icon i:hover,
 .fbox-effect:hover .fbox-icon i {
   background-color: #333;
   color: #fff
 }

 .fbox-effect.fbox-dark .fbox-icon i:after {
   box-shadow: 0 0 0 2px #1abc9c
 }

 .fbox-effect.fbox-dark .fbox-icon i:hover,
 .fbox-effect.fbox-dark:hover .fbox-icon i {
   background-color: #1abc9c
 }

 .fbox-effect .fbox-icon i:hover:after,
 .fbox-effect:hover .fbox-icon i:after {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   opacity: 1
 }

 .fbox-border.fbox-effect .fbox-icon i {
   -webkit-transition: color .5s, box-shadow .5s, background-color .5s;
   -o-transition: color .5s, box-shadow .5s, background-color .5s;
   transition: color .5s, box-shadow .5s, background-color .5s
 }

 .fbox-border.fbox-effect .fbox-icon i:after {
   top: -2px;
   left: -2px;
   padding: 2px;
   z-index: -1;
   box-shadow: none;
   background-image: url(images/icons/iconalt.svg);
   background-position: center center;
   background-size: 100% 100%;
   -webkit-transition: -webkit-transform .5s, opacity .5s, background-color .5s;
   -o-transition: -moz-transform .5s, opacity .5s, background-color .5s;
   transition: transform .5s, opacity .5s, background-color .5s;
   -webkit-transform: scale(1.3);
   -moz-transform: scale(1.3);
   -ms-transform: scale(1.3);
   transform: scale(1.3);
   opacity: 0;
   background-color: #333
 }

 .fbox-border.fbox-effect .fbox-icon i:hover,
 .fbox-border.fbox-effect:hover .fbox-icon i {
   color: #fff;
   box-shadow: 0 0 0 1px #333
 }

 .fbox-border.fbox-effect.fbox-dark .fbox-icon i:hover,
 .fbox-border.fbox-effect.fbox-dark:hover .fbox-icon i {
   box-shadow: 0 0 0 1px #1abc9c
 }

 .fbox-border.fbox-effect.fbox-dark .fbox-icon i:after {
   background-color: #1abc9c
 }

 .fbox-border.fbox-effect .fbox-icon i:hover:after,
 .fbox-border.fbox-effect:hover .fbox-icon i:after {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   opacity: 1
 }

 .feature-box.media-box {
   padding: 0
 }

 .feature-box.media-box .fbox-media {
   margin: 0 0 25px
 }

 .feature-box.media-box .fbox-media,
 .feature-box.media-box .fbox-media a,
 .feature-box.media-box .fbox-media img {
   position: relative;
   display: block;
   width: 100%;
   height: auto
 }

 .feature-box.media-box .fbox-media iframe {
   display: block
 }

 .feature-box.media-box p {
   margin-top: 17px
 }

 .feature-box.media-box.fbox-bg .fbox-media {
   margin: 0
 }

 .feature-box.media-box.fbox-bg .fbox-desc {
   padding: 25px;
   background-color: #fff;
   border: 1px solid #e5e5e5;
   border-top: 0;
   border-radius: 0 0 5px 5px
 }

 .feature-box.media-box.fbox-bg .fbox-media img {
   border-radius: 5px 5px 0 0
 }

 #about-section {
   padding: 6em 0;
   clear: both
 }

 @media screen and (max-width:768px) {
   #about-section {
     padding: 3em 0;
     margin-top: -20px
   }
 }

 #about-section h3 {
   margin: 0 0 20px 0;
   padding: 0;
   font-weight: 600;
   font-size: 75px;
   color: #004890;
   line-height: 80px;
   font-family: Roboto, sans-serif
 }

 #about-section span {
   margin: 0 0 20px 0;
   padding: 0;
   font-weight: 400;
   font-size: 25px;
   color: #fff;
   line-height: 35px;
   font-family: Roboto, sans-serif
 }

 @media screen and (max-width:768px) {
   #about-section h3 {
     margin: 0 0 20px 0;
     padding: 0;
     font-weight: 700;
     font-size: 30px;
     color: #3b3663;
     line-height: 40px;
     font-family: Roboto, sans-serif
   }

   #about-section span {
     margin: 0 0 20px 0;
     padding: 0;
     font-weight: 600;
     font-size: 30px;
     color: #6c6;
     line-height: 40px;
     font-family: Roboto, sans-serif
   }
 }

 #about-section h4 {
   margin: 0 0 20px 0;
   padding: 0;
   font-weight: 600;
   font-size: 28px;
   color: #413f3f;
   line-height: 35px
 }

 #about-section h5 {
   margin: 0;
   padding: 0;
   font-weight: 600;
   font-size: 16px;
   color: #1a1c1f;
   line-height: 25px
 }

 #about-inner {
   padding: 5em 0;
   clear: both;
   margin-top: 90px;
   padding: 60px;
   background-image: url(../images/dots2.png)
 }

 @media screen and (max-width:768px) {
   #about-inner {
     padding: 5em 0;
     margin-top: 100px;
     padding: 0;
     background-image: url(../images/dots2.png)
   }
 }

 #about-inner h3 {
   margin: 0 0 20px 0;
   padding: 0;
   font-weight: 600;
   font-size: 55px;
   color: #004890;
   line-height: 65px;
   font-family: Roboto, sans-serif
 }

 #about-inner span {
   margin: 0;
   padding: 0;
   font-weight: 700;
   font-size: 20px;
   color: #545455;
   line-height: 30px;
   font-family: Roboto, sans-serif
 }

 @media screen and (max-width:768px) {
   #about-inner h3 {
     margin: 30px 0 20px 0;
     padding: 0;
     font-weight: 700;
     font-size: 30px;
     color: #3b3663;
     line-height: 40px;
     font-family: Roboto, sans-serif
   }

   #about-inner span {
     margin: 0 0 20px 0;
     padding: 0;
     font-weight: 500;
     font-size: 20px;
     color: #6c6;
     line-height: 30px;
     font-family: Roboto, sans-serif
   }
 }

 #about-inner h4 {
   margin: 0 0 20px 0;
   padding: 0;
   font-weight: 600;
   font-size: 28px;
   color: #413f3f;
   line-height: 35px
 }

 #about-inner h5 {
   margin: 0;
   padding: 0;
   font-weight: 600;
   font-size: 16px;
   color: #1a1c1f;
   line-height: 25px
 }

 #about-section .about-text {
   margin-top: 15px;
   z-index: 9
 }

 #about-section .about-text>.about-text-inner {
   margin-top: 20px;
   background: rgba(0, 0, 0, 0);
   padding: 10px;
   border-radius: 10px;
 }

 #about-section .about-text>.about-text-inner h1,
 #about-section .about-text>.about-text-inner h2 {
   margin: 0;
   padding: 0;
   color: #fff
 }

 #about-section .about-text>.about-text-inner h1 {
   margin: 0px 0 15px 0;
   padding: 0;
   font-weight: 700;
   font-size: 50px;
   color: #000;
   line-height: 70px
 }

 #about-section .about-text>.about-text-inner h2 {
   margin: 0 0 10px 0;
   padding: 0;
   font-weight: 500;
   font-size: 16px;
   color: #272d4e;
   line-height: 22px
 }

 #about-section .about-text>.about-text-inner h3 {
   margin: 0 0 20px 0;
   padding: 0;
   font-weight: 500;
   font-size: 18px;
   color: #000;
   line-height: 22px;
   font-family: Roboto, sans-serif
 }

 @media screen and (max-width:768px) {
   #about-section .about-text>.about-text-inner {
     margin-top: 60px;
     background: rgba(0, 0, 0, 0);
     padding: 10px;
     border-radius: 10px;
   }

   #about-section .about-text>.about-text-inner h1 {
     font-size: 35px;
     line-height: 50px;
     color: #000
   }

   #about-section .about-text>.about-text-inner h2 {
     margin: 0 0 10px 0;
     padding: 0;
     font-weight: 500;
     font-size: 16px;
     color: #000;
     line-height: 25px;
   }
 }

 .author {
   width: 100%;
   float: left
 }

 .author .about-inner {
   background-size: cover;
   background-position: top center;
   background-repeat: no-repeat;
   position: relative;
   width: 40%;
   height: 450px;
   float: left
 }

 @media screen and (max-width:480px) {
   .author .about-inner {
     width: 100%;
     margin-bottom: 40px
   }
 }

 .desc1 {
   width: 100%;
   float: left;
   padding-left: 50px;
   margin-top: 0
 }

 @media screen and (max-width:480px) {
   .desc1 {
     width: 100%;
     padding-left: 0;
     margin-top: 0
   }
 }

 .desc1 span {
   font-size: 13px;
   text-transform: uppercase;
   display: block;
   margin-bottom: 20px;
   letter-spacing: 1px
 }

 .desc1 h3 {
   font-weight: 700;
   line-height: 40px;
   font-size: 30px
 }

 #services {
   padding: 2em 0
 }

 .pbox {
   border: 0 solid #e2e2e2;
   border-radius: 12px;
   height: 355px;
   padding: 0;
   -webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   -moz-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   border-radius: 15px
 }

 .pboxp {
   border: 1px solid #e2e2e2;
   border-radius: 12px;
   height: 280px;
   padding: 30px
 }

 .pboxa {
   border: 1px solid #e2e2e2;
   border-radius: 12px;
   height: 230px;
   padding: 30px
 }

 @media screen and (max-width:480px) {
   #services {
     padding: 5em 0
   }

   .pbox {
     border: 1px solid #e2e2e2;
     border-radius: 12px;
     height: 420px;
     padding: 30px;
     max-height: 420px;
     margin-bottom: 20px
   }

   .pboxp {
     border: 1px solid #e2e2e2;
     border-radius: 12px;
     height: 480px;
     padding: 30px
   }

   .pboxa {
     border: 1px solid #e2e2e2;
     border-radius: 12px;
     height: 500px;
     padding: 30px
   }
 }

 #products {
   padding: 2em 0;
   margin-bottom: 20px
 }

 #services .box {
   padding: 35px;
   background: rgba(0, 0, 0, .2);
   text-align: left;
   color: #fff;
   margin-top: 70px;
   margin-bottom: 50px;
   position: relative;
   border-radius: 0;
   -webkit-box-shadow: 10px 10px 5px 1px rgba(0, 0, 0, .5);
   -moz-box-shadow: 10px 10px 5px 1px rgba(0, 0, 0, .5);
   box-shadow: 10px 10px 5px 1px rgba(0, 0, 0, .5)
 }

 #products .box1 {
   padding: 35px;
   background: #fff;
   -webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   -moz-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   box-shadow: 0 0 24px 0 rgba(0, 0, 0, .13);
   color: #333;
   margin-top: 0;
   margin-bottom: 0;
   position: relative;
   border-radius: 15px
 }

 #about-section .box1 {
   padding: 35px;
   background: #f3f4f5;
   text-align: left;
   color: #fff;
   margin-top: 0;
   margin-bottom: 50px;
   position: relative;
   border-radius: 12px
 }

 @media screen and (max-width:992px) {
   #services .box {
     min-height: inherit;
     margin-bottom: 60px
   }
 }

 #services .box .icon {
   width: 85px;
   height: 85px;
   margin: 0 auto;
   top: 0;
   margin-top: -70px;
   margin-bottom: 30px;
   position: relative;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   border-radius: 50%;
   display: table;
   text-align: center
 }

 #services .box .icon>span {
   display: table-cell;
   vertical-align: middle
 }

 #services .box .icon>span i {
   font-size: 40px;
   color: #fff !important;
   margin: 0;
   padding: 0
 }

 #services .box .icon.colored-1 {
   background: #2aaf67
 }

 #services .box .icon.colored-2 {
   background: #00bff3
 }

 #services .box .icon.colored-3 {
   background: #f26522
 }

 #services .box .icon.colored-4 {
   background: #e52b50
 }

 #services .box .icon.colored-5 {
   background: #2fc5cc
 }

 #services .box .icon.colored-6 {
   background: #6173f4
 }

 #services .box .step-number {
   font-size: 16px;
   display: block;
   color: #d1d1d1;
   letter-spacing: 2px;
   text-transform: uppercase;
   font-weight: 700;
   margin-bottom: 10px
 }

 #services h2 {
   margin: 0;
   padding: 0;
   font-weight: 700;
   font-size: 40px;
   color: #1a1c1f;
   line-height: 30px
 }

 #products h2 {
   margin: 0 0 20px 0;
   padding: 0;
   font-weight: 700;
   font-size: 40px;
   color: #1a1c1f;
   line-height: 56px
 }

 #products h3 {
   margin: 30px 0 30px 0;
   padding: 0;
   font-weight: 500;
   font-size: 30px;
   color: #1a1c1f;
   line-height: 50px
 }

 #products h3.bname {
   margin: 10px 0 10px 0;
   padding: 0;
   font-weight: 600;
   font-size: 17px;
   color: #1a1c1f;
   line-height: 30px
 }

 #products h4 {
   margin: 0 0 10px 0;
   padding: 0;
   font-weight: 600;
   font-size: 18px;
   color: #1a1c1f;
   line-height: 30px
 }

 #products h4.bname {
   margin: 0 0 10px 0;
   padding: 0;
   font-weight: 600;
   font-size: 17px;
   color: #1a1c1f;
   line-height: 30px
 }

 #account-content h3.bname {
   margin: 10px 0 10px 0;
   padding: 0;
   font-weight: 600;
   font-size: 20px;
   color: #1a1c1f;
   line-height: 30px
 }

 #inner-content h3.bname {
   margin: 10px 0 10px 0;
   padding: 0;
   font-weight: 600;
   font-size: 17px;
   color: #1a1c1f;
   line-height: 30px
 }

 @media screen and (max-width:480px) {
   #products h2 {
     margin: 10px 0 10px 0;
     padding: 0;
     font-weight: 600;
     font-size: 35px;
     color: #1a1c1f;
     line-height: 50px;
     width: 100%
   }

   #products h3 {
     margin: 10px 0 10px 0;
     padding: 0;
     font-weight: 500;
     font-size: 15px;
     color: #1a1c1f;
     line-height: 20px
   }
 }

 #inner-content h2 {
   margin: 0 0 20px 0;
   padding: 0;
   font-weight: 700;
   font-size: 40px;
   color: #1a1c1f;
   line-height: 56px
 }

 #inner-content h4 {
   margin: 0 0 10px 0;
   padding: 0;
   font-weight: 600;
   font-size: 18px;
   color: #1a1c1f;
   line-height: 30px
 }

 @media screen and (max-width:480px) {
   #inner-content h2 {
     margin: 10px 0 10px 0;
     padding: 0;
     font-weight: 600;
     font-size: 35px;
     color: #1a1c1f;
     line-height: 50px;
     width: 100%
   }
 }

 #services h3 {
   margin: 20px 0 20px 0;
   padding: 0;
   font-weight: 400;
   font-size: 20px;
   color: #1a1c1f;
   line-height: 35px
 }

 #services h4 {
   margin: -20px 0 10px 0;
   padding: 0;
   font-weight: 600;
   font-size: 16px;
   color: #413f3f;
   line-height: 20px
 }

 #services h5 {
   margin: 0;
   padding: 0;
   font-weight: 600;
   font-size: 16px;
   color: #1a1c1f;
   line-height: 25px
 }

 @media screen and (max-width:480px) {
   #services h2 {
     margin: 0 0 20px 0;
     padding: 0;
     font-weight: 500;
     font-size: 30px;
     color: #1a1c1f;
     line-height: 30px
   }
 }

 .flip-container {
   perspective: 1000px;
   transform-style: preserve-3d
 }

 .flip-container:hover .back {
   transform: rotateY(0)
 }

 .flip-container:hover .front {
   transform: rotateY(180deg)
 }

 .back,
 .flip-container,
 .front {
   width: 100%;
   height: 220px;
   margin: 0 10px 10px 0;
   float: left
 }

 .flipper {
   transition: .6s;
   transform-style: preserve-3d;
   position: relative
 }

 .back,
 .front {
   backface-visibility: hidden;
   transition: .6s;
   transform-style: preserve-3d;
   position: absolute;
   top: 0;
   left: 0
 }

 .front {
   z-index: 2;
   transform: rotateY(0)
 }

 .back {
   transform: rotateY(-180deg);
   background: #fff;
   color: #000;
   text-align: center;
   line-height: 1.2em
 }

 .vertical.flip-container {
   position: relative
 }

 .vertical .back {
   transform: rotateX(180deg)
 }

 .vertical.flip-container:hover .back {
   transform: rotateX(0)
 }

 .vertical.flip-container:hover .front {
   transform: rotateX(180deg)
 }

 .front {
   background: #fff;
   color: #333;
   text-align: center
 }

 .tour-packages {
   margin-bottom: 30px;
 }

 .tour-packages>a {
   display: block;
   color: #000;
   position: relative;
   bottom: 0;
   overflow: hidden;
   -webkit-transition: 0.5s;
   -o-transition: 0.5s;
   transition: 0.5s;
 }

 .tour-packages>a img {
   position: relative;
   -webkit-transition: 0.5s;
   -o-transition: 0.5s;
   transition: 0.5s;
   border-radius: 10px;

 }

 .tour-packages>a:after {
   opacity: 0;
   visibility: hidden;
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   top: 0;
   -webkit-box-shadow: inset 0px -34px 98px 8px rgba(0, 0, 0, 0.75);
   -moz-box-shadow: inset 0px -34px 98px 8px rgba(0, 0, 0, 0.75);
   -ms-box-shadow: inset 0px -34px 98px 8px rgba(0, 0, 0, 0.75);
   -o-box-shadow: inset 0px -34px 98px 8px rgba(0, 0, 0, 0.75);
   box-shadow: inset 0px -34px 98px 8px rgba(0, 0, 0, 0.75);
   z-index: 8;
   -webkit-transition: 0.5s;
   -o-transition: 0.5s;
   transition: 0.5s;
 }

 .tour-packages>a h3,
 .tour-packages>a span {
   z-index: 12;
   position: absolute;
   right: 20px;
   left: 20px;
   bottom: 50px;
   color: #fff;
   margin: 0;
   padding: 0;
   opacity: 1;
   font-size: 18px;
   font-weight: 600;
   visibility: visible;
   -webkit-transition: 0.3s;
   -o-transition: 0.3s;
   transition: 0.3s;
 }

 .tour-packages>a span {
   font-size: 11px;
   bottom: 20px;
 }

 .tour-packages>a:hover {
   -webkit-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75);
   -moz-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75);
   box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75);
 }

 .tour-packages>a:hover:after {
   opacity: 1;
   visibility: visible;
 }

 @media screen and (max-width: 768px) {
   .tour-packages>a:hover:after {
     opacity: 0;
     visibility: hidden;
   }
 }

 .tour-packages>a:hover h3,
 .tour-packages>a:hover span {
   opacity: 1;
   bottom: 55px;
 }

 .tour-packages>a:hover span {
   bottom: 15px;
 }

 .tour-packages>a:hover img {
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -o-transform: scale(1.1);
   transform: scale(1.1);
 }

 .vert-move1 {
   -webkit-animation: mover 2s infinite alternate;
   animation: mover 2s infinite alternate;
 }

 .vert-move1 {
   -webkit-animation: mover 2s infinite alternate;
   animation: mover 2s infinite alternate;
 }

 img.vert-move {
   -webkit-animation: mover 1s infinite alternate;
   animation: mover 1s infinite alternate;
 }

 img.vert-move {
   -webkit-animation: mover 1s infinite alternate;
   animation: mover 1s infinite alternate;
 }

 @-webkit-keyframes mover {
   0% {
     transform: translateY(0);
   }

   100% {
     transform: translateY(-10px);
   }
 }

 @keyframes mover {
   0% {
     transform: translateY(0);
   }

   100% {
     transform: translateY(-10px);
   }
 }

 #explore {
   padding: 10em 0;
   clear: both;
 }

 .main-head {
   margin-top: 50px;
 }

 @media screen and (max-width: 768px) {
   #explore {
     padding: 10em 0;
   }

   .main-head {
     margin-top: 10px;
   }
 }

 #fh5co-featured-section {
   padding-bottom: 0em;
   margin-top: 80px;
 }

 @media screen and (max-width: 768px) {
   #fh5co-featured-section {
     padding: 0em 0;
   }
 }

 .featured-grid,
 .featured-grid.featured-grid-2 {
   width: 100%;
   height: 510px;
   float: left;
   background-size: cover;
   background-position: center center;
   position: relative;
   overflow: hidden;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   border-radius: 4px;
 }

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

   .featured-grid,
   .featured-grid.featured-grid-2 {
     margin-bottom: 30px;
     height: 400px;
   }
 }

 .featured-grid:after,
 .featured-grid.featured-grid-2:after {
   position: absolute;
   content: '';
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 1;
   -webkit-transition: 0.3s;
   -o-transition: 0.3s;
   transition: 0.3s;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   border-radius: 4px;
 }

 .featured-grid.featured-grid-2 {
   height: 240px;
   margin-bottom: 30px;
 }

 @media screen and (max-width: 992px) {
   .featured-grid.featured-grid-2 {
     height: 400px;
   }
 }

 .featured-grid .desc {
   position: absolute;
   bottom: -5px;
   left: 0;
   right: 0;
   padding: 30px;
   z-index: 9;
   -webkit-transition: 0.3s;
   -o-transition: 0.3s;
   transition: 0.3s;
 }

 .featured-grid .desc h3 {
   color: rgba(255, 255, 255, 1);
   margin-bottom: 10px;
   font-size: 35px;
   line-height: 50px;
   font-weight: 600;
 }

 .featured-grid .desc span {
   color: rgba(255, 255, 255, 0.9);
   text-transform: none;
 }

 .featured-grid:hover,
 .featured-grid:focus {
   -webkit-box-shadow: 0px 18px 43px -7px rgba(0, 0, 0, 0.32);
   -moz-box-shadow: 0px 18px 43px -7px rgba(0, 0, 0, 0.32);
   -ms-box-shadow: 0px 18px 43px -7px rgba(0, 0, 0, 0.32);
   -o-box-shadow: 0px 18px 43px -7px rgba(0, 0, 0, 0.32);
   box-shadow: 0px 18px 43px -7px rgba(0, 0, 0, 0.32);
 }

 .featured-grid:hover:after,
 .featured-grid:focus:after {
   background: rgba(0, 0, 0, 0.3);
 }

 .featured-grid:hover .desc,
 .featured-grid:focus .desc {
   bottom: 0px;
 }




 .card {
   border: none;
   background: transparent;
 }

 .call-banner {
   margin-top: -50px !important;
   margin-left: 45px !important;
 }

 #products .testimonial-text {
   font-family: 'Montserrat', sans-serif;
   font-size: 24px;
   color: #000000;
   font-weight: 700;
 }

 @media screen and (max-width: 768px) {
   .call-banner {
     margin-top: 30px !important;
     margin-left: 0px !important;
   }
 }

 .gtco-banner-area {
   margin-top: 80px;
   background-color: #fecc18;
   background-image: url(../images/road-icon.jpg);
   background-repeat: repeat-x;
   background-position: bottom;
   border-radius: 10px;
 }

 .gtco-banner-area h1 {
   font-family: 'Montserrat', sans-serif;
   font-size: 48px;
   color: #000000;
   max-width: 500px;
   margin-top: 70px;

 }

 .gtco-banner-area h1 span {
   font-family: 'Montserrat', sans-serif;
   font-weight: 800;
 }

 @media (max-width: 1199px) {
   .gtco-banner-area h1 {
     margin-top: 30px;
   }
 }

 .gtco-banner-area p {
   max-width: 450px;
   margin: 20px 0;
   margin-bottom: 40px;
 }

 .gtco-banner-area a {
   display: inline;
   padding: 10px 30px;
   padding-right: 5px;
 }

 .card-img-top {
   margin: 0 auto;
   margin-top: 150px !important;
   margin-right: 0;
   margin-right: -75px;
 }

 @media (max-width: 1400px) {
   .card-img-top {
     margin: 0 auto;
     margin-top: 0px;
     margin-right: 0;
     margin-right: 0px;
   }
 }

 @media (max-width: 1199px) {
   .gtco-banner-area .col-md-6 .card .card-img-top {
     max-width: 350px;
   }
 }

 @media (max-width: 767px) {
   .gtco-banner-area .col-md-6 .card .card-img-top {
     margin-top: 30px;
   }

   #fh5co-footer h3 a {
     color: #ffcc00;
     font-weight: 700;
     font-size: 16px
   }
 }