/*
Template Name: Lank – Creative Agency & Portfolio HTML Template
Theme URL: 
Description: Premium Creative Agency & Portfolio Template
Author: Sego Themes
Author URL: 
Version: 1.0
Tags: Agency, Portfolio, HTML5, CSS3, Bootstrap, Jquery, Onepage
*/

/* -------------
  Fonts
---------------*/
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,700|Open+Sans:400');

/* -------------
  Plugins
-------------*/
@import url('../css/plugins/magnific-popup.css');
@import url('../css/plugins/owl.carousel.min.css');
@import url('../css/plugins/owl.theme.default.min.css');
@import url('../css/plugins/preloader.css');
@import url('../css/plugins/icon-moon.css');
/* ___________________________________________

       CSS Guide
   ___________________________________________ */

/* 01. General Styles                        
   02. Preloader                            
   03. Header Section                        
       03.01 Menu Bar
       03.02 Side Navbar
       03.03 Header Fixed    
   04. Home Section  
       04.01 Slider Area
       04.02 Scroll Down Animation   
   05. About Section 
       05.01 Team Area
       05.02 My Skills Area
       05.03 Work Experience Area
       05.04 Fun Facts Area  
   06. Services Section      
   07. Lets Work Section
   08. Portfolio Section 
   09. Testmonials Section 
   10. Pricing Section   
   11. Journals Section  
   12. Contact Us Section
   13. Footer Section   
   14. Responsive CSS
       14.01 Small Desktop
       14.02 Ipad & Tabs
       14.03 Mobile Landscape
       14.04 Large Mobile 
       14.05 Small Mobile     

/* _____________________________________

   01. General Styles
   _____________________________________ */

html, body {
  height: 100%;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

a:hover, a:focus {
  text-decoration: none;
}

.section {
  padding: 70px 0;
}

.head {
  margin-top: 0;
  font-size: 42px; 
  font-weight: 700;
  margin: 0;
}


.h4 {
  font-size: 30px;
  margin-bottom: 25px;
  font-family: 'Poppins', sans-serif;
}

p {
  line-height: 1.8;
  font-size: 14px;
  color: #666;
  font-weight: 400;
}

.sub-head {
  margin: 0 0 30px 0;
  font-weight: 300;
  font-size: 18px;
}

.padding-top {
  padding-top: 70px;
}

.margin-top {
  margin-top: 15px;
}

.parallax {
  background-size: cover;
}

.white {
  color: white;
}

.light-bg {
  background: #fff;
}

ul li {
  list-style: none;
}

.btn {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  border-radius: 25px;
}
 
/* _____________________________________

   02. Preloader
   _____________________________________ */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #333; /* change if the mask should have another color then white */
  z-index: 999999; /* makes sure it stays on top */
}

/* _____________________________________

   03. Header Section
   _____________________________________ */

   header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 10px 15px;
    z-index: 1040;
    border-bottom: 1px solid #717070;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
   }

   .logo {
    margin: 2px 0px;
    font-weight: 700;
    display: block;
    float: left;
    padding: 0 15px;
    font-size: 25px;
  
    color: #333;
    border-radius: 2px;
   }

   /*--- 03.01. Menu Bar ----*/

   .site-menu {
    float: right;
    display: block;
    margin: 0;
   }

   .site-menu li {
    display: inline-block;
   }

   .site-menu li a {
    display: block;
    padding: 12px 15px;
    font-size: 14px;
    color: #e6e6e6;
    font-family: 'Poppins', sans-serif;
   }

   .social-top {
    float: right;
    margin: 6px 0 0 40px;
   }

   .social-top a {
    display: inline-block;
    width: 30px;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    margin-right: 7px;
    border: 1px solid #f1efef;
    color: #f1efef;
    border-radius: 50%;
   }

   .social-top a:hover {
    background: #fff;
    color: #333;
   }

    .header.is-active {
    color: #fff;
    font-size: 13px;
   }

   .social-top a:last-child {
    margin-right: 0;
   }

   /*--- 03.03. Header Fixed ---*/
   
   header.is-active {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
   }

   header.is-active .logo {
   
    color: #fff;
   }

   header.is-active .site-menu li a {
    color: #929292;
   }

   header.is-active .site-menu li.active a, header.is-active .site-menu li a:hover {
    color: #333;
   }

   header.is-active .social-top a {
    color: #8c8b8b; 
   }

   header.is-active .social-top a:hover {
    background: #333;
    color: #fff;
    border-color: #333;
   }

/* _____________________________________

    End Header Section
   _____________________________________ */


/* _____________________________________

    04. Home Section Start
   _____________________________________ */

   /*--- 04.01. Slider Area ---*/
  
.hero {
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 320px;
    position: relative;
    color: #fff;
}

.owl-carousel.owl-full-width {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.owl-carousel.owl-full-width .slide {
  position: relative;
}

.hero .content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: table;
  z-index: 999;
  color: #fff;
}

.hero .content::after {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: rgba(51, 51, 51, 0.58);
  content: '';
  z-index: -1;
}

.hero .dta {
  display: table-cell;
  vertical-align: middle;
}

.hero h2 
{
  font-size: 75px;
  font-weight: 700;
  margin: 0;
  line-height: 1;
}

.hero h3 {
  color: #fff;
  font-size: 27px;
  margin-top: 5px;
}

.owl-carousel.owl-full-width .slide img {
    display: none;
}

.owl-carousel.owl-full-width .owl-item, .owl-carousel.owl-full-width .owl-stage, .owl-carousel.owl-full-width .owl-stage-outer, .owl-carousel.owl-full-width .slide {
  width: 100%;
  height: 100%;
}

.hero .owl-theme .owl-nav .owl-prev, .hero .owl-theme .owl-nav .owl-next {
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 30px;
  height: 30px; 
  border: 1px solid #fff;
  background: none;
  border-radius: 50%;
}

.hero .owl-theme .owl-nav .owl-prev:hover, .hero .owl-theme .owl-nav .owl-next:hover {
  background: #fff; 
  color: #666;
}

.hero .owl-theme .owl-nav .owl-next {
  left: initial;
  right: 30px;
}

.hero .owl-theme .owl-dots {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
}

.owl-theme .owl-dots .owl-dot span {
  width: 15px;
  height: 5px;
  background: rgba(255, 255, 255, 0.56);
  border-radius: 15px; 
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
  background: #fff;
}

/*--- 04.02. Scroll Down Animation ---*/

 .doWn {
    position: absolute;
    bottom: 120px;
    left: 50%;
    z-index: 2;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: #fff;
    transition: opacity .3s;
    z-index: 999;
 }

 .doWn span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 17px;
    height: 17px;
    margin-left: -12px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb05 1.5s infinite;
    animation: sdb05 1.5s infinite;
    box-sizing: border-box;
 }

 @-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}


/* _____________________________________

    End Home Section
   _____________________________________ */

/* _____________________________________

    05. Start About Section
   _____________________________________ */ 

   .about-left {
    padding-right: 20px;
   }

  /*--- 05.01. Team Area ---*/

  .team .col-sm-3 {
    padding-bottom: 10px;
  }

  .single-team {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
  }

  .single-team img {
    width: 100%;
  }

   .single-team:hover {
    -webkit-box-shadow: 0 4px 20px 0 rgba(168,182,191,.6);
    box-shadow: 0 4px 20px 0 rgba(168,182,191,.6);
   }

   .single-team:hover figure .overlay  {
    opacity: 1;
    visibility: visible;
  }

  .single-team figure {
    position: relative;
  }

  .single-team figure .overlay {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(255, 255, 255, 0.67);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }

  .single-team .table {
    display: table;
    height: 100%;
  }

  .single-team .content {
    display: table-cell;
    vertical-align: middle;
    color: #666;
    text-align: center;
  }

  .single-team .content span {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 17px;
  }

  .single-team .content a {
    display: inline-block;
    width: 27px;
    height: 27px;
    line-height: 27px;
    border: 1px solid #666;
    color: #666;
    margin-right: 5px;
  }

  .single-team .content a:hover {
    background: #666;
    color: #fff;
  }

  .single-team .content i {
    font-size: 14px;
  }

  .single-team .content a:last-child {
    margin-right: 0;
  }

  .single-team .figcaption {
    padding: 10px 15px;
  }

  .single-team .figcaption h5 {
    font-size: 15px;
    font-weight: 400;
    margin: 0;
  }

/*--- 05.02. My Skill Area ---*/

.skillbar {
  position: relative;
  display: block;
  margin-bottom: 30px;
  width: 100%;
  background: #fff;
  height: 25px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -ms-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
}

.skillbar-title {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 13px;
  background: #555;
  color: #ffffff;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.skillbar-title span {
  display: block;
  background: rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  height: 25px;
  line-height: 25px;
  font-size: 13px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.skillbar-bar {
  height: 25px;
  width: 0px;
  background: #777;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.skill-bar-percent {
  position: absolute;
  right: 10px;
  top: 0;
  font-weight: 600;
  font-size: 14px; 
  height: 25px;
  line-height: 25px;
  color: #ffffff;
  color: #333;
}

/*--- 05.03. Work Experience Area ---*/
  
  .work-ex .item {
    background: #fff;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
  }

  .work-ex .item h4 {
    font-size: 18px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 2px;
  }

  .work-ex .item span {
    display: inline-block;
    margin-right: 18px;
    font-size: 14px;
    color: #656565;
  }
/* Work Experience End */

/*--- 05.04. Fun Facts Area ---*/
   
   .status {
    background: #333;
    color: #fff;
    text-align: center;
   }

   .status h3 {
    font-size: 65px;
    font-weight: 700;
    margin: 0;
    line-height: 1;
   }

   .status span {
    display: block;
    font-size: 17px;
   }

/* Fun Facts End */

/* _____________________________________

    End About Section
   _____________________________________ */ 

/* _____________________________________

    06. Start Services Section
   _____________________________________ */

   .service-left {
    padding-right: 20px;
   }    

   .service-left i {
    font-size: 35px;
    float: left;
    margin-right: 15px;
   }

   .service-left h4 {
    font-weight: 500;
    font-size: 15px;
   }

   .services .item {
    background: #fff;
    padding: 20px;
    min-height: 150px;
    margin-bottom: 15px;
    box-shadow: 0 3px 16px rgba(0,0,0,.1);
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
   }

   .services .item:hover {
    -webkit-box-shadow: 0 4px 20px 0 rgba(168,182,191,.6);
    box-shadow: 0 4px 20px 0 rgba(168,182,191,.6);
   }

   .services .item i {
    font-size: 35px;
   }

   .services .item h3 { 
    margin: 5px 0 10px 0;
    font-weight: 400;
    font-size: 18px;
   }

   .services .item p {
    font-size: 13px;
    color: #888;
   }

/* _____________________________________

    End Services Section
   _____________________________________ */ 

/* _____________________________________

    07. Lets Work Section
   _____________________________________ */ 
    
   .promo {
    position: relative;
    z-index: 9;
   }

   .promo::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    content: '';
    z-index: -1;
   }

   .promo h4 {
    margin-top: 0;
   }

   .promo h2 {
    font-size: 45px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 26px;
   }

   .promo .btn {
    background: #fff;
    padding: 6px 30px;
    font-size: 17px;
    font-weight: 600;
    color: #666;
   }

   .promo .btn:hover {
    background: #333;
    color: #fff;
   }

/* _____________________________________

    Lets Work Section
   _____________________________________ */ 



/* _____________________________________

    08. Start Portfolio Section
   _____________________________________ */ 

   .work-item {
    position: relative;
   }

   .filtr-item .project-detail {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    top: 0;
    left: 0; 
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    text-align: center;
   }
   .filtr-item .dta {
    position: absolute;
    width: 100%;
    height: 100px;
    text-align: center;
    color: #fff;
    top: 0;
    bottom: 0;
    margin: auto;

   }

   .filtr-item .dta h3 {
    font-weight: 600;
   }


   .filtr-item:hover .project-detail{
    opacity: 1;
    visibility: visible;
   }

   ul.work-nav {
    padding: 0;
    margin: 0 0 30px 0;
   }

   ul.work-nav li  {
    display: inline-block;
    margin-right: 40px;
   }

   ul.work-nav li:last-child {
    margin-right: 0;
   }

   ul.work-nav li button {
    display: block;
    text-transform: uppercase;
    color: #999;
    font-size: 14px;
    background: none;
    border: none;
    box-shadow: none;
   }

   ul.work-nav li button:focus {
    outline: none;
   }

   ul.work-nav li button.is-checked {
      color: #333;
      border-bottom: 2px solid #333;
   } 

   .work-masonry .filtr-item img {
     margin-bottom: 15px;
     width: 100%;
   }

/* _____________________________________

    End Portfolio Section
   _____________________________________ */ 

/* _____________________________________

   09. Start Testmonials Section
   _____________________________________ */ 

   .testmonials {
    position: relative;
    z-index: 55;
   }

   .testmonials::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.61);
    content: '';
    z-index: -1;
   }

   .owl-theme .owl-dots {
    padding-top: 40px;
   }

   .testmonials .item {
    background: white;
    padding: 20px;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
   }

    .testmonials .item::after {
    display: block;
    clear: both;
    content: '';
   }

   .testmonials .figure {
    display: block;
    float: left;
    margin-right: 16px;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    overflow: hidden;
   }

   .testmonials .figure img {
    display: block;
    width: 100%;
   }

   .testmonials p {
    display: block;
    padding-top: 7px;
    color: #656565;
    font-style: italic;
   }

   .testmonials .item h3 {
    font-size: 20px;
    font-weight: 400;
    margin: 30px 0 0;
   }

   .testmonials h5 {
    margin-top: 0;
    font-size: 13px;
    font-weight: 400;
    color: #666;
   }

/* _____________________________________

    End Testmonials Section
   _____________________________________ */ 


/* _____________________________________

   10. Start Pricing Section
   _____________________________________ */ 

   .pricing .col-sm-4 {
    padding-bottom: 10px;
   }

   .pricing .item {
    background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.1);
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
   }

   .pricing .item:hover {
    -webkit-box-shadow: 0 4px 20px 0 rgba(168,182,191,.6);
    box-shadow: 0 4px 20px 0 rgba(168,182,191,.6);
   }

   .pricing .item-top {
    background: #333;
    padding: 20px;
    color: #fff;
    color: #fff;
    text-align: center;
   }

   .pricing .item-top h2 
   {
    font-size: 65px;
    font-weight: 700;
    margin: 0;
   }

   .pricing .item-top h4 {
    padding-bottom: 10px;
    border-bottom: 1px solid #484747;
    font-weight: 300;
   }

   .pricing .item-bottom {
    background: #fff;
    padding: 40px;
    text-align: center;
   }

   .pricing ul {
    padding: 0;
   }

   .pricing ul li {
     list-style: none;
     text-align: center;
     display: block;
     margin-bottom: 20px;
   }

   .pricing .choose {
    background: #333;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-size: 16px;
    padding: 9px 45px;
    margin-top: 30px;
   }

   .pricing .choose:hover {
    background: #666;
   }

/* _____________________________________

    End Pricing Section
   _____________________________________ */ 

/* _____________________________________

   11. Start Journals Section
   _____________________________________ */ 

  .journals figure {
    position: relative;
    overflow: hidden;
  }

  .journals figure img {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }

  .journals figure:hover img {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
  }

  .journals .posted {
   position: absolute;
   height: 60px;
   top: 0;
   left: 0;
   color: #fff;
   padding: 16px;
   background: rgba(46,46,46,1);
    background: -moz-linear-gradient(top, rgba(46,46,46,1) 10%, rgba(46,46,46,0.98) 12%, rgba(46,46,46,0.87) 26%, rgba(46,46,46,0.85) 28%, rgba(248,80,50,0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(10%, rgba(46,46,46,1)), color-stop(12%, rgba(46,46,46,0.98)), color-stop(26%, rgba(46,46,46,0.87)), color-stop(28%, rgba(46,46,46,0.85)), color-stop(100%, rgba(248,80,50,0)));
    background: -webkit-linear-gradient(top, rgba(46,46,46,1) 10%, rgba(46,46,46,0.98) 12%, rgba(46,46,46,0.87) 26%, rgba(46,46,46,0.85) 28%, rgba(248,80,50,0) 100%);
    background: -o-linear-gradient(top, rgba(46,46,46,1) 10%, rgba(46,46,46,0.98) 12%, rgba(46,46,46,0.87) 26%, rgba(46,46,46,0.85) 28%, rgba(248,80,50,0) 100%);
    background: -ms-linear-gradient(top, rgba(46,46,46,1) 10%, rgba(46,46,46,0.98) 12%, rgba(46,46,46,0.87) 26%, rgba(46,46,46,0.85) 28%, rgba(248,80,50,0) 100%);
    background: linear-gradient(to bottom, rgba(46,46,46,1) 10%, rgba(46,46,46,0.98) 12%, rgba(46,46,46,0.87) 26%, rgba(46,46,46,0.85) 28%, rgba(248,80,50,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e2e2e', endColorstr='#f85032', GradientType=0 );
    width: 100%;
  }

  .journals .posted ul {
    padding: 0;
  }

  .journals .posted li {
    display: inline-block;
    margin-right: 10px;
    font-size: 13px;
  }

  .journals .posted li span {
    margin-right: 10px;
  }

  .journals .figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    padding: 16px; 
    background: rgba(248,80,50,0);
    background: -moz-linear-gradient(top, rgba(248,80,50,0) 0%, rgba(46,46,46,0.87) 68%, rgba(46,46,46,0.94) 80%, rgba(46,46,46,1) 90%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(248,80,50,0)), color-stop(68%, rgba(46,46,46,0.87)), color-stop(80%, rgba(46,46,46,0.94)), color-stop(90%, rgba(46,46,46,1)));
    background: -webkit-linear-gradient(top, rgba(248,80,50,0) 0%, rgba(46,46,46,0.87) 68%, rgba(46,46,46,0.94) 80%, rgba(46,46,46,1) 90%);
    background: -o-linear-gradient(top, rgba(248,80,50,0) 0%, rgba(46,46,46,0.87) 68%, rgba(46,46,46,0.94) 80%, rgba(46,46,46,1) 90%);
    background: -ms-linear-gradient(top, rgba(248,80,50,0) 0%, rgba(46,46,46,0.87) 68%, rgba(46,46,46,0.94) 80%, rgba(46,46,46,1) 90%);
    background: linear-gradient(to bottom, rgba(248,80,50,0) 0%, rgba(46,46,46,0.87) 68%, rgba(46,46,46,0.94) 80%, rgba(46,46,46,1) 90%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#2e2e2e', GradientType=0 );
  }

  .journals .figcaption h3 {
    font-weight: 300;
    margin: 0;
    font-size: 18px;
  }

  .journals .owl-theme .owl-dots .owl-dot span {
    background: #b9b8b8; 
  }

  .journals .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #333;
  }

/* _____________________________________

    End Journals Section
   _____________________________________ */ 

/* _____________________________________

  12.  Start Contact Us Section
   _____________________________________ */ 

   .text-danger {
    color: #f2332f;
   }

  .contact-us {
    background: #333;
    color: #fff;
  }

  .contact-us ul {
    padding: 0;
  } 

  .contact-us li {
    color: #c5c3c3;
    margin-bottom: 25px;
  }

  .contact-us .ico {
   display: inline-block;
   font-size: 20px;
   float: left;
   margin: 0 10px 15px 0;
  }

  .contact-us input, .contact-us textarea {
    background: none;
    border: 1px solid #666;
    height: 40px;
    color: #fff;
  }

  .contact-us textarea {
    height: 150px;
  }

  .contact-us .btn-submit {
    padding: 10px 20px;
    font-weight: 600;
    margin-top: 10px;
  }

  .contact-us .btn-submit:hover {
    background: #333;
    color: #fff;
  }

  #map {
    width: 100%;
    height: 400px;
  }


/* _____________________________________

    End Contact Us Section
   _____________________________________ */ 

/* _____________________________________

  13. Start Footer Section
   _____________________________________ */ 

   .footer {
    background: #333;
    padding: 40px 0 30px 0;
    text-align: center;
    position: relative;
   }

   .footer p {
    margin: 0;
    color: #999;
   }
    
   .footer .back-top {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 0;
    right: 0;
    margin: auto;
    top: -15px;
    background: #fff;
    color: #333;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    cursor: pointer;
   }

   .footer .back-top:hover {
    background: #c5c5c5;
   }

   .footer .back-top::after {
    position: absolute;
    left: 7px;
    top: 7px;
    font-size: 14px;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e903";
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
   }


/* _____________________________________

    End Footer Section
   _____________________________________ */ 



   /* _____________________________________

  14. Responsive CSS
   _____________________________________ */ 

  /*--- 14.01. Small Desktop ----*/

  @media screen and (max-width: 1024px) { 
    .site-menu li a{
      padding: 13px 14px;
      padding-left: 0;
      font-size: 13px;
    }

    .services .item h3 {
      font-size: 17px;
    }
   }
 
   /*--- 14.02. Ipad & Tabs ----*/

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

     body.overflow {
      overflow: hidden !important;
     }

    .site-menu {
      opacity: 0;
      visibility: hidden;
      position: fixed;
      top: 126px;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 100%;
      height: 100%;
      background: #333;
      padding-top: 20px;
      -webkit-transform: translateX(-100%);
      -moz-transform: translateX(-100%);
      transform: translateX(-100%);
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      transition: all 0.5s;
      padding-left: 25px; 
    }

    .site-menu li {
      display: block;
    }

    .site-menu li a {
      color: #cccbcb !important;
    }

    header.is-active .site-menu li.active a {
      color: #fff !important;
    }

    .site-menu.is-active {
      opacity: 1;
      visibility: visible;
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      transform: translateX(0);
    }

    #nav-icon {
    width: 30px;
    height: 20px;
    margin-left: 15px;
    margin-top: 12px;
    float: right;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
   }
    #nav-icon span {
      display: block;
      position: absolute;
      height: 1px;
      width: 100%;
      background: #fff;
      border-radius: 9px;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out;
    }
    #nav-icon span:nth-child(1) {
      top: 0px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }
    #nav-icon span:nth-child(2) {
      top: 9px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }
    #nav-icon span:nth-child(3) {
      top: 18px;
      -webkit-transform-origin: left center;
      -moz-transform-origin: left center;
      -o-transform-origin: left center;
      transform-origin: left center;
    }
    #nav-icon.open span:nth-child(1) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      top: -3px;
      left: 8px;
    }
    #nav-icon.open span:nth-child(2) {
      width: 0%;
      opacity: 0;
    }
    #nav-icon.open span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: 19px;
      left: 8px;
    }
 
    header.is-active #nav-icon span {
      background: #cac4c4;
    }

    .section {
      padding: 45px 0;
    }

    .padding-top {
      padding-top: 45px;
    }

    .sm-padding {
      padding: 0;
      margin-top: 30px;
    }

    .head {
      font-size: 33px;
    }

    .sub-head {
      font-size: 16px;
      margin: 0 0 20px 0;
    }

    .hero h2 {
      font-size: 70px;
    }

    .about-left {
      padding-right: 0;
      margin-bottom: 30px;
    }

    .single-team .figcaption h5 {
      font-size: 13px;
    }

    .status h3{
      font-size: 50px;
    }

    .promo h2 {
      font-size: 35px;
    }

    .work-ex .padding-top {
      padding-top: 0
    }

    ul.work-nav li {
      margin-right: 25px;
    }

    ul.work-nav li button {
      font-size: 13px;
    }

    .filtr-item .dta h3 {
      font-size: 18px;
      margin-bottom: 0;
    }

    .filtr-item .dta span {
      font-size: 14px;
    }

    .pricing .item-top h2 {
      font-size: 52px;
    }

    .pricing .item-bottom {
      padding: 20px;
    }

    .pricing .choose {
      padding: 10px 35px;
      font-size: 14px;
    }

    .journals .figcaption h3 {
      font-size: 18px;
    }

   }

  /*--- 14.03. Ipad & Tabs ----*/

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

    .container {
      padding: 0 15px;
    }

    header {
      padding: 10px 0;
    } 

    .contact-us .form-group  {
      padding-left: 0;
    }

    .site-menu {
      padding-left: 10px;
      padding-top: 0;
    }
  }

  @media screen and (max-width: 767px) { 
    
    .hero h2 {
      font-size: 52px;
    }
  }

  /*--- 14.04. Large Mobiles ----*/

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

    .section {
      padding: 35px 0;
    }

    .col-mob {
      width: 100%;
    }

    .head {
      font-size: 30px;
    }

    .hero h2 {
      font-size: 35px;
    }

    .hero h3 {
      font-size: 20px;
    }

    .status h3 {
      font-size: 40px;
    }

    .hero .owl-theme .owl-nav .owl-prev, .hero .owl-theme .owl-nav .owl-next {
      display: none !important;
    }
 
   .status .col-xs-6 {
    margin-bottom: 15px;
   }

   .promo h2 {
    font-size: 30px;
   }

   ul.work-nav {
    padding-top: 0;
    margin-bottom: 20px;
   }

   ul.work-nav li {
    margin-bottom: 10px;
   }
  }

  /*--- 14.05. Small Mobiles ----*/

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

   .section {
    padding: 25px 0;
   }

   .head {
    font-size: 25px;
   }

   .sub-head {
    font-size: 14px;
   }

   .service-left .col-xs-6 {
    width: 100%;
   }

   .promo h2 {
    font-size: 25px;
   }

   .logo {
    font-size: 20px;
   }

   .hero h2 {
    font-size: 32px;
   }

   .status h3 {
    font-size: 45px;
   }

   .work-gallery .col-xs-6 {
    width: 100%;
   }

  }