/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
  }
  
  /*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Vendor-prefixed and regular ::selection selectors cannot be combined:
   * https://stackoverflow.com/a/16982510/7133471
   *
   * Customize the background color to match your design.
   */
  
  ::-moz-selection {
    text-shadow: none;
  }
  
  ::selection {
    text-shadow: none;
  }
  
  /*
   * A better looking default horizontal rule
   */
  
  hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
  }
  
  /*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */
  
  audio,
  canvas,
  iframe,
  img,
  svg,
  video {
    vertical-align: middle;
  }
  
  /*
   * Remove default fieldset styles.
   */
  
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }
  
  /*
   * Allow only vertical resizing of textareas.
   */
  
  textarea {
    resize: vertical;
  }
  
  /* ==========================================================================
     Browser Upgrade Prompt
     ========================================================================== */
  
  .browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
  }
  
  /* ==========================================================================
     Author's custom styles
     ========================================================================== */
  
  /* ==========================================================================
     Helper classes
     ========================================================================== */
  
  /*
   * Hide visually and from screen readers
   */
  
  .hidden {
    display: none !important;
  }
  
  /*
  * Hide only visually, but have it available for screen readers:
  * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
  *
  * 1. For long content, line feeds are not interpreted as spaces and small width
  *    causes content to wrap 1 word per line:
  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  */
  
  .sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
  }
  
  /*
  * Extends the .sr-only class to allow the element
  * to be focusable when navigated to via the keyboard:
  * https://www.drupal.org/node/897638
  */
  
  .sr-only.focusable:active,
  .sr-only.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
  }
  
  /*
  * Hide visually and from screen readers, but maintain layout
  */
  
  .invisible {
    visibility: hidden;
  }
  
  /*
  * Clearfix: contain floats
  *
  * For modern browsers
  * 1. The space content is one way to avoid an Opera bug when the
  *    `contenteditable` attribute is included anywhere else in the document.
  *    Otherwise it causes space to appear at the top and bottom of elements
  *    that receive the `clearfix` class.
  * 2. The use of `table` rather than `block` is only necessary if using
  *    `:before` to contain the top-margins of child elements.
  */
  
  .clearfix:before,
  .clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
  }
  
  .clearfix:after {
    clear: both;
  }
  
  /* ==========================================================================
     EXAMPLE Media Queries for Responsive Design.
     These examples override the primary ('mobile first') styles.
     Modify as content requires.
     ========================================================================== */
  
  @media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
  }
  
  @media print,
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 1.25dppx),
    (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
  }
  
  /* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     https://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */
  
  @media print {
    *,
    *:before,
    *:after {
      background: transparent !important;
      color: #000 !important;
      /* Black prints faster */
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      text-shadow: none !important;
    }
    a,
    a:visited {
      text-decoration: underline;
    }
    a[href]:after {
      content: " (" attr(href) ")";
    }
    abbr[title]:after {
      content: " (" attr(title) ")";
    }
    /*
       * Don't show links that are fragment identifiers,
       * or use the `javascript:` pseudo protocol
       */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
      content: "";
    }
    pre {
      white-space: pre-wrap !important;
    }
    pre,
    blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
    }
    /*
       * Printing Tables:
       * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
       */
    thead {
      display: table-header-group;
    }
    tr,
    img {
      page-break-inside: avoid;
    }
    p,
    h2,
    h3 {
      orphans: 3;
      widows: 3;
    }
    h2,
    h3 {
      page-break-after: avoid;
    }
  }
  
  
  body {
      margin: 0;
      font-family: 'Lato', sans-serif;
      line-height: 25px;
      color: #171719;
      -webkit-font-smoothing: antialiased;
      font-weight: normal;
      background-color: #fff;
      overflow-x: hidden;
  }
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
    pointer-events: none
  }
  header.inverse.show-tabs .inner-wrapper .logo a img.light-logo, header.show-tabs .inner-wrapper .logo a img.light-logo {
    display: none
  }
  header.inverse.show-tabs .inner-wrapper .logo a img.dark-logo, header.show-tabs .inner-wrapper .logo a img.dark-logo {
    display: block
  }
  header.inverse.show-tabs .inner-wrapper .hamburger button span, header.show-tabs .inner-wrapper .hamburger button span {
    background-color: #000
  }
  header.inverse.show-tabs .inner-wrapper .tabs, header.show-tabs .inner-wrapper .tabs {
    opacity: 1;
    visibility: visible
  }
  header.inverse.show-tabs .inner-wrapper .tabs a, header.show-tabs .inner-wrapper .tabs a {
    border: none;
    color: #171719;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in
  }
  header.inverse.show-tabs .inner-wrapper .tabs a.active, header.show-tabs .inner-wrapper .tabs a.active {
    border-bottom: 1px solid #171719
  }
  header.inverse.show-tabs .inner-wrapper .tabs a:hover, header.show-tabs .inner-wrapper .tabs a:hover {
    opacity: 1 !important
  }
  header.inverse.show-tabs .inner-wrapper .tabs a.change-color, header.show-tabs .inner-wrapper .tabs a.change-color {
    color: #e2e2e2;
    border-color: #e2e2e2
  }
  header.inverse.show-tabs .inner-wrapper .tabs a.change-color:hover, header.show-tabs .inner-wrapper .tabs a.change-color:hover {
    color: #fff
  }
  header.inverse.show-tabs.sticky .inner-wrapper .tabs, header.show-tabs.sticky .inner-wrapper .tabs {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
  }
  header.inverse.show-tabs.sticky--no-bg .inner-wrapper .tabs, header.show-tabs.sticky--no-bg .inner-wrapper .tabs {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
  }
  header .inner-wrapper {
    z-index: 2;
    padding: 30px 40px 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -ms-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    transition: all .5s ease-in; box-sizing:border-box;
  }
  header .inner-wrapper:before {
    content: "";
    width: 100%;
    height: 70px;
    background-color: #fff;
    top: 0;
    left: 0;
    z-index: -1;
    position: absolute;
    -webkit-transform: translateY(-70px);
    -moz-transform: translateY(-70px);
    -ms-transform: translateY(-70px);
    -o-transform: translateY(-70px);
    transform: translateY(-70px);
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out
  }
  header .inner-wrapper .tabs {
    position: absolute;
    left: 0;
    top: 15px;
    width: 100%;
    padding: 0;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    -o-transform: translateY(-100px);
    transform: translateY(-100px)
  }
  header .inner-wrapper .tabs a {
    pointer-events: all;
    font-size: 18px
  }
  header .inner-wrapper .logo {
    float: left;
    display: block;
    width: 150px;
    z-index: 3
  }
  header .inner-wrapper .logo a {
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
    display: block;
    width: 100%;
    pointer-events: all
  }
  header .inner-wrapper .logo a img {
    width: 100%;
    height: auto
  }
  header .inner-wrapper .logo a img.dark-logo {
    display: block
  }
  header .inner-wrapper .logo a img.light-logo {
    display: none
  }
  header .inner-wrapper .logo.change-color a img.dark-logo {
    display: none
  }
  header .inner-wrapper .logo.change-color a img.light-logo {
    display: block
  }
  header .inner-wrapper .hamburger {
    display: block;
    float: right;
    pointer-events: all;
    position: relative;
    top: -5px;
    z-index: 3
  }
  header .inner-wrapper .hamburger button {
    display: block;
    background-color: transparent;
    border: none;
    width: 100px;
    height: 80px;
    font-size: 0;
    outline: none;
    padding: 24px 20px 24px 40px;
    margin-right: -40px;
    margin-top: -20px
  }
  header .inner-wrapper .hamburger button span {
    width: 30px;
    height: 2px;
    background-color: #000;
    display: block;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    position: relative;
    top: -5px;
    left: -5px
  }
  header .inner-wrapper .hamburger button span ~ span {
    margin-top: 10px
  }
  header .inner-wrapper .hamburger button span:nth-child(2) {
    width: 25px
  }
  header .inner-wrapper .hamburger button:hover span:nth-child(2) {
    width: 0;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    -o-transform: translateX(30px);
    transform: translateX(30px)
  }
  header .inner-wrapper .hamburger button:hover span:nth-child(1) {
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
    transform: translateY(6px)
  }
  header .inner-wrapper .hamburger button:hover span:nth-child(3) {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px)
  }
  header .inner-wrapper .hamburger button.change-color span {
    background-color: #fff
  }
  header .inner-wrapper .hamburger button.active span {
    margin-top: 0
  }
  header .inner-wrapper .hamburger button.active span:nth-child(2) {
    width: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%)
  }
  header .inner-wrapper .hamburger button.active span:nth-child(1) {
    -webkit-transform: rotate(50deg);
    -moz-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    -o-transform: rotate(50deg);
    transform: rotate(50deg)
  }
  header .inner-wrapper .hamburger button.active span:nth-child(3) {
    -webkit-transform: rotate(-50deg) translate(3px, -2px);
    -moz-transform: rotate(-50deg) translate(3px, -2px);
    -ms-transform: rotate(-50deg) translate(3px, -2px);
    -o-transform: rotate(-50deg) translate(3px, -2px);
    transform: rotate(-50deg) translate(3px, -2px)
  }
  header .inner-wrapper .hamburger button.active:hover span {
    width: 30px
  }
  header.inverse .inner-wrapper .logo a img.light-logo {
    display: block
  }
  header.inverse .inner-wrapper .logo a img.dark-logo {
    display: none
  }
  header.inverse .inner-wrapper .hamburger button span {
    background-color: #fff
  }
  header.sticky .inner-wrapper:before {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
  }
  header.sticky .inner-wrapper .logo a img.light-logo {
    display: none
  }
  header.sticky .inner-wrapper .logo a img.dark-logo {
    display: block
  }
  header.sticky .inner-wrapper .hamburger button span {
    background-color: #000
  }
  header .menu-items {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .5s cubic-bezier(0.17, 0.67, 0.21, 1);
    -moz-transition: all .5s cubic-bezier(0.17, 0.67, 0.21, 1);
    -ms-transition: all .5s cubic-bezier(0.17, 0.67, 0.21, 1);
    -o-transition: all .5s cubic-bezier(0.17, 0.67, 0.21, 1);
    transition: all .5s cubic-bezier(0.17, 0.67, 0.21, 1)
  }
  header .menu-items.no-animation {
    -webkit-transition-duration: 0;
    transition-duration: 0;
    clip: initial
  }
  header.active .menu-items {
    opacity: 1;
    visibility: visible
  }
  header.active .logo {
    position: relative
  }
  header.active .logo:before {
    content: "";
    display: block;
    position: absolute;
    background-color: #fff;
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    animation: logoAnimation .7s cubic-bezier(0.17, 0.67, 0.21, 1) .5s;
    overflow: hidden
  }
  header.active .logo a {
    animation: hideLogos 1s
  }
  .menu-items {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    pointer-events: all;
    z-index: 3
  }
  .menu-items #menuAnimation {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
  }
  .menu-items .links-container {
    display: table;
    height: 100%;
    width: 100%
  }
  .menu-items .links-container .vertical-center {
    display: table-cell;
    vertical-align: middle;
    width: 1%;
    text-align: center
  }
  .menu-items .links-container ul {
    list-style: none;
    display: inline
  }
  .menu-items .links-container ul li {
    margin: 25px auto
  }
  @media screen and (max-width: 1366px) {
  .menu-items .links-container ul li {
    margin: 18px auto
  }
  }
  @media screen and (max-width: 992px) {
  .menu-items .links-container ul li {
    margin: 5px auto
  }
  }
  .menu-items:hover a, .menu-items:hover a.active {
    opacity: .5
  }
  .menu-items a {
    text-decoration: none;
    display: inline-block;
    padding: 18px 0;
    position: relative;
    min-width: 200px;
    -webkit-transition: all 1s cubic-bezier(0.17, 0.67, 0.21, 1);
    -moz-transition: all 1s cubic-bezier(0.17, 0.67, 0.21, 1);
    -ms-transition: all 1s cubic-bezier(0.17, 0.67, 0.21, 1);
    -o-transition: all 1s cubic-bezier(0.17, 0.67, 0.21, 1);
    transition: all 1s cubic-bezier(0.17, 0.67, 0.21, 1);
    opacity: .5
  }
  @media screen and (max-width: 1280px) {
  .menu-items a {
    padding: 10px 0
  }
  }
  .menu-items a.active {
    opacity: 1
  }
  .menu-items a span {
    color: #fff;
    -webkit-transition: all .3s cubic-bezier(0.17, 0.67, 0.21, 1);
    -moz-transition: all .3s cubic-bezier(0.17, 0.67, 0.21, 1);
    -ms-transition: all .3s cubic-bezier(0.17, 0.67, 0.21, 1);
    -o-transition: all .3s cubic-bezier(0.17, 0.67, 0.21, 1);
    transition: all .3s cubic-bezier(0.17, 0.67, 0.21, 1)
  }
  .menu-items a span.big-text {
    display: block;
    font-size: 44px;
    line-height: 56px;
    position: relative;
    z-index: 2;
    font-weight: 500
  }
  @media screen and (max-width: 1366px) {
  .menu-items a span.big-text {
    font-size: 35px;
    line-height: 48px
  }
  }
  .menu-items a span.under-text {
    font-size: 14px;
    line-height: 24px;
    opacity: 0;
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 0;
    top: 50%;
    text-transform: uppercase;
    top: calc(50% - 12px)
  }
  .menu-items a span.under-text span {
    font-size: 20px;
    vertical-align: middle;
    margin-left: 10px
  }
  .menu-items a:hover {
    opacity: 1
  }
  .menu-items a:hover.active {
    opacity: 1
  }
  .menu-items a:hover span.big-text {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px)
  }
  .menu-items a:hover span.under-text {
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
    opacity: .5
  }
  
  /*Home page css start*/
  .because-home{height:100vh;}
  .because-home .item{height:100vh; border-left: solid 1px #e2e2e2; float:left;  
      -webkit-transition: all .3s ease-in;
      -moz-transition: all .3s ease-in;
      -ms-transition: all .3s ease-in;
      -o-transition: all .3s ease-in;
      transition: all .3s ease-in; width:100%; 
  }
  .team-bottom-contain a{color:#fff;}
  .because-home .item:hover{background:#FDD916;}

  .vertical-center {
      position: relative;
      display: table;
      width: 100%;
      height: 100%;
      z-index: 3;
  }
  .vertical-top--wrapper {
      display: table-cell;
      vertical-align: middle;
      text-align: left;
      padding: 0 50px;}
  
  .home-contain-number{font-size: 36px; 
      margin-bottom: 50px;
      display: block; 
      -webkit-transition: all .3s ease-in;
      -moz-transition: all .3s ease-in;
      -ms-transition: all .3s ease-in;
      -o-transition: all .3s ease-in;
      transition: all .3s ease-in;}
  .because-home-contain{font-size: 40px;
      line-height: 55px;
      display: block;
      font-weight: 500;
      margin-bottom: 0;     color: #000; 
      -webkit-transition: all .3s ease-in;
      -moz-transition: all .3s ease-in;
      -ms-transition: all .3s ease-in;
      -o-transition: all .3s ease-in;
      transition: all .3s ease-in;
  
  }
  .because-home-page--title {
      position: absolute;
      bottom: 30px;
      left: 40px;
      font-size: 14px;
      text-transform: uppercase;
      font-weight: 500;
      z-index: 2;
      letter-spacing: 1.75px;
      opacity: 0; color: #fff;
      -webkit-transition: all .3s ease-in;
      -moz-transition: all .3s ease-in;
      -ms-transition: all .3s ease-in;
      -o-transition: all .3s ease-in;
      transition: all .3s ease-in;
  }
  .because-home .owl-item{background:rgba(255,255,255,0.5); z-index:2; overflow:hidden}
  .because-home .owl-item:hover{z-index:1; overflow:visible}
  .because-home .item:hover .because-home-page--title{opacity:1}
  .because-home .item:hover .home-contain-number{    visibility: inherit;
      opacity: 1;
      transform: matrix(1, 0, 0, 1, 0, -100); color:#fff}
  .because-home .item:hover .because-home-contain{    visibility: inherit;
      opacity: 1;
      transform: matrix(1, 0, 0, 1, 0, -100); color:#fff;}
    
  .because-home-page-image {
      height: 100%;
      width: auto;
      margin: 0 auto;
      display: block;
      z-index: 2;
      position:absolute;
    bottom:0;
      -webkit-transition: all .5s cubic-bezier(0.52, 0.19, 0.14, 0.96);
      -moz-transition: all .5s cubic-bezier(0.52, 0.19, 0.14, 0.96);
      -ms-transition: all .5s cubic-bezier(0.52, 0.19, 0.14, 0.96);
      -o-transition: all .5s cubic-bezier(0.52, 0.19, 0.14, 0.96);
      transition: all .5s cubic-bezier(0.52, 0.19, 0.14, 0.96);
      -webkit-transform: translate(-50%, 10%) scale(0.8);
      -moz-transform: translate(-50%, 10%) scale(0.8);
      -ms-transform: translate(-50%, 10%) scale(0.8);
      -o-transform: translate(-50%, 10%) scale(0.8);
      transform: translate(-50%, 10%) scale(0.8);   width:100%
  }
  .because-home-page-image img{position: absolute; bottom:0 ; left: 0 }
  .because-home .item:hover .because-home-page-image{opacity: 1;
      -webkit-transform: translate(-25%, 0) scale(1);
      -moz-transform: translate(-25%, 0) scale(1);
      -ms-transform: translate(-25%, 0) scale(1);
      -o-transform: translate(-25%, 0) scale(1);
      transform: translate(-25%, 0) scale(1);
  }
  .owl-nav {
      bottom: 50px;
      left: 0;
      position: absolute;
      width: 100%;
      height: 0;
      padding: 0 20px; box-sizing:border-box;
  }
  .owl-next{float: right;}
  .owl-nav button{
      font-size: 30px; color: #c5c5c5;
  }
  .owl-nav button.disabled{opacity:0;}
  .project-page-link{
      font-size: 0;
      text-decoration: none;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
  }
  /*Home page css end*/
  
  /*case-studies page css start*/
  .viewport {
    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .scroll-container {  
    position: absolute;  
    overflow: hidden;
    z-index: 10;
    justify-content: center;  
    backface-visibility: hidden;
    transform-style: preserve-3d;
  }
  .over-flow-hidden{overflow:hidden;}
  .case-banner{max-height:100vh; display:block; width:100%; position:relative; overflow:hidden}
  .project-overview .project-overview-inner .pannel--description {
      width: 60%;     background-color: rgb(37, 86, 167);
  }
  project-overview .project-overview-inner {
      display: table;
      width: 100%;
  }
  .project-overview-inner .pannel--description, .project-overview-inner .pannel--overview {
        display: table-cell;
      /* float: left; */
      height: 100%;
      height: 100%;
  }
  .project-overview-inner .pannel--description .vertical-center, .project-overview-inner .pannel--overview .vertical-center {
      display: table-cell;
      width: 1%;
  }
  .project-overview-inner .pannel--description .vertical-center .inner-wrapper p {
      font-family: 'Lato', sans-serif;
      font-size: 2em;
      line-height: 1.6em;
      color: #fff;
      text-align: left;
      margin-bottom: 0;
  }
  .project-overview-inner .pannel--description .vertical-center .inner-wrapper{max-width: 800px;
      padding: 0 100px;}
  
  .project-overview-inner .pannel--overview .vertical-center .inner-wrapper p {
      font-size: 1.2em;
      line-height: 1.8666666667em;
      margin-bottom: 30px;
      color: #171719;
  }
  .project-overview .project-overview-inner  .pannel--overview {
      width: 40%;
  }
  .project-overview-inner  .pannel--description .vertical-center .inner-wrapper, .project-overview-inner  .pannel--overview .vertical-center .inner-wrapper {
      padding: 100px 80px;
  }
  .project-overview-inner .pannel--overview .vertical-center .inner-wrapper h2.title-label {
      text-transform: uppercase;
      font-size: 14px;
      line-height: 24px;
      color: #807f7f;
      font-weight: 500;
      text-align: left;
      display: block;
      letter-spacing: 2px;
      margin-bottom: 5px;
      margin-top: 0;
  }
  .project-overview-inner .pannel--overview .vertical-center .inner-wrapper p {
      font-size: 1.2em;
      line-height: 1.8666666667em;
    margin:0; padding:0;
      margin-bottom: 30px;
      color: #171719;
  }
  .case-section{padding:80px 0; float:left; width:100vw}
  .because-black{background:#232425;}
  .because-black p{color:#000;}
  .case-section p {
      font-size: 18px;
      line-height: 30px;
  }
  .case-section .block-label {
      display: inline-block;
      font-size: 14px;
      line-height: 24px;
      text-transform: uppercase;
      color: #807f7f;
      padding-bottom: 15px;
      letter-spacing: 1.5px;
      position: relative;
  }
  .case-section .block-label:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 80%;
      border-bottom: solid 2px #807f7f;
  }
  .because-gry{background:#f1f1f1;}
  .mask-image{padding:80px}
  .mask-image .mask-wrape{position:relative;}
  .mask-image .mask-image-overlay {
      background-color: rgb(32, 73, 225);
      position: absolute;
      display: block;
      bottom: 0;
      left: 0;
      height: 100%;
      width: 100%;
      -webkit-transition: height .6s cubic-bezier(0.06, 0.58, 0.21, 1);
      -moz-transition: height .6s cubic-bezier(0.06, 0.58, 0.21, 1);
      -ms-transition: height .6s cubic-bezier(0.06, 0.58, 0.21, 1);
      -o-transition: height .6s cubic-bezier(0.06, 0.58, 0.21, 1);
      transition: height .6s cubic-bezier(0.06, 0.58, 0.21, 1);
      z-index: 2;
  
  }
  .mask-image img{max-width:100%;}
  .mask-image.loaded .mask-image-overlay {
      height: 0;
      top: 0;
      bottom: auto;	/*animation-delay: 1s;*/
  }
  .padding-none{padding:0;}
  
  .work-with-us {
    padding: 100px 0;
    background-color: #fdd816;
    position: relative; float:left; width:100%; text-align:center}
  .work-with-us .whole-link {
    text-decoration: none;
    position: absolute;
    display: block;
    font-size: 0;
    font-size: 0;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0
  }
  .social-link a{display: inline-block; margin-right: 7px;}
  .work-with-us .inner-wrapper h2, .work-with-us .inner-wrapper a {
    color: #000;
    -webkit-transition: all .6s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: all .6s cubic-bezier(0.075, 0.82, 0.165, 1);
    -ms-transition: all .6s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: all .6s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: all .6s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px)
  }
  .work-with-us .inner-wrapper h2 {
    margin-bottom: 50px;
    font-weight: 600;
    font-size: 40px;
    line-height: 44px
  }
  .work-with-us .inner-wrapper a {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.2em;
    line-height: 1.8666666667em;
    font-weight: 500;
    display: block;
    transition-duration: .7s;
    opacity: 0
  }
  .work-with-us .inner-wrapper a span {
    vertical-align: middle;
    font-size: 1.3333333333em;
    margin-left: 30px
  }
  .work-with-us:hover .inner-wrapper a, .work-with-us:hover .inner-wrapper h2 {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
  }
  .work-with-us:hover .inner-wrapper a {
    opacity: 1;
    transition-delay: .1s
  }
  .animate-children {
    opacity: 0
  }
  .animate-children.initialized {
    opacity: 1
  }
  .animate-children .animate-ready {
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0
  }
  .animate-children .animate-ready.animate {
    -webkit-transition: transform 2s cubic-bezier(0.075, 0.82, 0.165, 1) .2s, opacity 3s cubic-bezier(0.075, 0.82, 0.165, 1) .2s;
    -moz-transition: transform 2s cubic-bezier(0.075, 0.82, 0.165, 1) .2s, opacity 3s cubic-bezier(0.075, 0.82, 0.165, 1) .2s;
    -ms-transition: transform 2s cubic-bezier(0.075, 0.82, 0.165, 1) .2s, opacity 3s cubic-bezier(0.075, 0.82, 0.165, 1) .2s;
    -o-transition: transform 2s cubic-bezier(0.075, 0.82, 0.165, 1) .2s, opacity 3s cubic-bezier(0.075, 0.82, 0.165, 1) .2s;
    transition: transform 2s cubic-bezier(0.075, 0.82, 0.165, 1) .2s, opacity 3s cubic-bezier(0.075, 0.82, 0.165, 1) .2s;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
  }
  .next-project {
    padding: 60px 0 200px; text-align:center; float:left; width:100%; background: #2657a7;
  }
  .next-project .next-project__scroll-more {
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1.5px;
    text-transform: uppercase
  }
   a .next-project {
    text-transform: uppercase;
    font-size: 0.9333333333em;
    line-height: 1.6em;
    letter-spacing: 1.5px;
    text-decoration: none;
    display: block;
    color: #fff
  }
  .next-project a {
    text-transform: uppercase;
    font-size: 0.9333333333em;
    line-height: 1.6em;
    letter-spacing: 1.5px;
    text-decoration: none;
    display: block;
    color: #fff
  }
  .next-project .page-slogan {
    margin-top: 60px
  }
  @media screen and (max-width: 1366px) {
  .project-detail-page .next-project .page-slogan {
    margin-top: 35px
  }
  }
   .next-project .page-slogan p {
    display: inline-block;
    font-size: 2.6666666667em;
    line-height: 3.3333333333em;
    font-weight: 600;
    color: #fff; text-transform: uppercase
  }
  .next-project.dark-text a, .next-project.dark-text .page-slogan p {
    color: #171719
  }
  .video-box{padding:56.25% 0 0 0;position:relative;}
  .video-box iframe{position:absolute; width:100%; height:100%; top:0; left:0}
  .mask-image {
      padding: 80px;
      overflow: hidden;
      /* display: contents; */
      flex-wrap: nowrap;
      float: left;
      width: 100%;
      text-align: center;
  }
  /*case-studies page css end*/
  
  
  /*About us page css start*/
  
  .because-about{height:100vh;}
  .because-about .item{height:100vh; border-left: solid 1px #e2e2e2; float:left;  
      -webkit-transition: all .3s ease-in;
      -moz-transition: all .3s ease-in;
      -ms-transition: all .3s ease-in;
      -o-transition: all .3s ease-in;
      transition: all .3s ease-in; width:100vw
  }
  
  .about-text-head{
      font-size: 90px;
      line-height: 90px;
      font-weight: 500;
      text-transform: normal;
      margin-bottom: 30px;
  }
  @media screen and (max-width: 1280px){
    .about-text-head {
        font-size: 60px;
        line-height: 64px;
    }
    }
  @media screen and (max-height: 840px){
    .about-text-head {
        font-size: 50px;
        line-height: 50px;
    }
    }
    @media screen and (max-height: 768px){
    .about-text-head{
        font-size: 40px;
        line-height: 40px;
    }
    }
    @media screen and (max-height: 600px){
      .about-text-head{
          font-size: 40px;
          line-height: 40px;
      }
      }
   
 
  .about-title{width:100vw; max-width:1000px;}
  .about-contain{background:#FDD916; max-width:1000px; padding:90px;}
  .about-contain p {
      font-size: 18px;
      line-height: 30px; color:#000;
  }
  .about-contain .block-label {
      display: inline-block;
      font-size: 14px;
      line-height: 24px;
      text-transform: uppercase;
      color: #000;
      padding-bottom: 15px;
      letter-spacing: 1.5px;
      position: relative;
  }
  .about-contain .block-label:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 80%;
      border-bottom: solid 2px #807f7f;
  }
  .about-img{width:100%; position:relative; max-width:515px;}
  .about-img .mask-image-overlay {
      background-color: rgb(32, 73, 225);
      position: absolute;
      display: block;
      bottom: 0;
      left: 0;
      height: 100%;
      width: 100%;
      -webkit-transition: height .6s cubic-bezier(0.06, 0.58, 0.21, 1);
      -moz-transition: height .6s cubic-bezier(0.06, 0.58, 0.21, 1);
      -ms-transition: height .6s cubic-bezier(0.06, 0.58, 0.21, 1);
      -o-transition: height .6s cubic-bezier(0.06, 0.58, 0.21, 1);
      transition: height .6s cubic-bezier(0.06, 0.58, 0.21, 1);
      z-index: 2; -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -ms-animation-delay: 15s;
    -o-animation-delay: 15s;
  
  }
  .about-img img{max-width:100%;}
  .active .about-img .mask-image-overlay {
      height: 0;
      top: 0;
      bottom: auto;	 -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -ms-animation-delay: 15s;
    -o-animation-delay: 15s;
  }
  .why-because{width:100vw; max-width:1000px; padding:80px;}
  .why-because{}
  .why-because p{
      font-size: 24px;
      line-height: 36px;
  }
  .meet-the-team{width:100vw; max-width:500px; background: #FDD916}
  .meet-the-team a.vacancy__link {
      display: block;
      position: relative;
      font-size: 14px;
      line-height: 24px;
      text-transform: uppercase;
      margin: 20px auto;
      font-weight: 500;
      letter-spacing: 2px; color:#171719
  }
  .meet-the-team a.vacancy__link span {
      font-size: 20px;
      vertical-align: middle;
      margin-left: 5px;
  }
  .team-section{position:relative; width:100vw; max-width:500px;}
  .team-img{
      height: 100%;
      background-color: #fff;
      z-index: 1;
      -webkit-transition: opacity .3s ease-in;
      -moz-transition: opacity .3s ease-in;
      -ms-transition: opacity .3s ease-in;
      -o-transition: opacity .3s ease-in;
      transition: opacity .3s ease-in;}
  .team-contain{text-align: left;
      height: 100%; color:#fff; position:absolute; width:100%; top:0; left:0;}
  .team-contain .vertical-center {
      position: relative;
      display: table;
      width: 100%;
      height: 100%;
      z-index: 3;vertical-align: bottom;
  }
  
  .team-contain .vertical-center .vertical-top--wrapper {display: table-cell;
      width: 1%;
      vertical-align: bottom;
      text-align: left;
      padding: 0 50px 60px 50px; background: rgba(0,0,0,0);
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 71%, rgba(0,0,0,0.84) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(71%, rgba(0,0,0,0.6)), color-stop(100%, rgba(0,0,0,0.84)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 71%, rgba(0,0,0,0.84) 100%);
  background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 71%, rgba(0,0,0,0.84) 100%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 71%, rgba(0,0,0,0.84) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 71%, rgba(0,0,0,0.84) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
  }
  .team-bottom-contain{min-height:160px;}
  .team-bottom-contain h2 {
      font-size: 32px;
      line-height: 34px;
      margin: 38px 0;
  }
  .team-bottom-contain p {
      font-size: 16px;
      line-height: 28px; margin:0; font-weight:300
  }
  .owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item{
      -ms-touch-action: auto;
          touch-action: auto;
  }
  .team-img img{height:100%; width:auto !important;}
  
  .video-responsive{padding:56.25% 0 0 0;position:relative; background: #000}
  .video-responsive video{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
  .video-responsive iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
  .video-responsive img{position: absolute; top: 0; left: 0; width: 100%; }
  .because-yellow{background: #FDD916; color: #000;}
  .because-yellow.case-section .block-label{color: #000;}
  .button-main{text-align: center; padding: 10px 0;}
  .button-main a{display: inline-block; padding: 10px 20px; font-size: 15px; color: #1f49e1; border:2px solid #1f49e1; text-transform: uppercase; text-decoration: none;  border-radius: 5px;   -webkit-transition: all .3s ease-in;
      -moz-transition: all .3s ease-in;
      -ms-transition: all .3s ease-in;
      -o-transition: all .3s ease-in;
      transition: all .3s ease-in;}
  .button-main a:hover{background:  #1f49e1; color: #fff; }
  .video-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: table}
  .video-overlay h1{display: table-cell; vertical-align: middle; text-align: center; padding: 0 50px; font-size: 85px; font-weight: 600;    white-space: pre-line;
      word-break: break-word; box-sizing:border-box}
  .banner-white{color: #fff;}
  /*About us page css end*/
  /* contact us page css start */
.contact-left{float: left; width:33.33%; height: 100vh}
.contact-left-inner{float: left; box-sizing: border-box; padding: 0; height: 100%; display: table; padding-bottom: 75px; position: relative; width: 100%;} 
.contact-left-inner .btn-main{position: absolute; bottom: 0; left: 0; width: 100%;}
.enquiry{ background: #171719; font-weight: 500; color: #fff; float:left; width:50%; height:75px; letter-spacing: 2.33px; line-height: 50px; text-transform: uppercase; text-align: center; padding: 15px; box-sizing: border-box; text-decoration: none;}
.enquiry:hover{background: #e2e2e2; color: #000;}
.careers{ background: #e2e2e2; font-weight: 500; color: #000; float:left; width:50%; height:75px; letter-spacing: 2.33px; line-height: 55px;text-transform: uppercase; text-align: center; padding: 15px; box-sizing: border-box; text-decoration: none;}
.careers:hover{background: #171719; color: #fff;}
.contact-contain{display: table-cell;
vertical-align: middle; padding: 30px;}
.contact-right{float: left; width: 66.66%; height: 100vh;}
.contact-contain h1{font-weight: 600;
  font-size: 4.3333333333em;
  line-height: 1em;
  color: #1C1F2A;
  letter-spacing: 0;}
.contact-contain h3{opacity: 0.5;
  font-weight: 500;
  font-size: 1.0666666667em;
  color: #171719;
  letter-spacing: 2.33px;
  margin: 10px 0;
  text-transform: uppercase;}
.contact-contain a.line-link{    
  text-decoration: none;
  border-bottom: solid 1px #171719;
  padding-bottom: 2px;
  display: inline-block;}
  .contact-contain a{   
    text-decoration: none;
    padding-bottom: 2px;
    display: inline-block;}
.contact-contain p{    font-size: 1.2em;
  color: #171719;
  letter-spacing: 0;
  line-height: 1.8666666667em;
  margin-bottom: 40px;}

  .services-title{max-width: 700px;}
  .services-box{max-width: 500px;     font-size: 15px;
    line-height: 30px;}

  .services-box h5{display: inline-block;
    font-size: 18px;
    line-height: 24px;
    text-transform: uppercase;
    color: rgb(37, 86, 167);
    padding-bottom: 15px;
    letter-spacing: 1.5px;
    position: relative;
}
.services-box h5:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: solid 2px #807f7f;
}
.service-dark-box{background: #FDD916; color: #000;}
.services-box .vertical-top--wrapper{ padding-top: 70px;}
  .scroll-down {
    opacity: 1;
    -webkit-transition: all .5s ease-in 3s;
    transition: all .5s ease-in 3s;
  }
  .scroll-down-text{position:absolute; bottom:70px; text-align:center; color:#fff; display:block; width:100%}
  .scroll-down {
    position: absolute;
    bottom: 35px;
    left: 50%;
    margin-left: -16px;
    display: block;
    width: 32px;
    height: 32px;
    border: 2px solid #FFF;
    background-size: 14px auto;
    border-radius: 50%;
    z-index: 2;
    -webkit-animation: bounce 2s infinite 2s;
    animation: bounce 2s infinite 2s;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    transform: scale(1)
  }
  
  .scroll-down:before {
      position: absolute;
      top: calc(50% - 8px);
      left: calc(50% - 6px);
      transform: rotate(-45deg);
      display: block;
      width: 12px;
      height: 12px;
      content: "";
      border: 2px solid white;
      border-width: 0px 0 2px 2px;
  }
  
  @keyframes bounce {
    0%,
    100%,
    20%,
    50%,
    80% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
    40% {
      -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
      transform: translateY(-10px);
    }
    60% {
      -webkit-transform: translateY(-5px);
      -ms-transform: translateY(-5px);
      transform: translateY(-5px);
    }
  }
  
  .team-img img{width: 100% !important; height: auto;}
  .enquiry-left{width: 50%; float: left; padding: 70px 0 0 ;}
  .enquiry-right{    width: 50%;
    float: left;
    min-height: 100vh;
    background: url(../img/contact.jpg) right top;
    position: fixed;
    right: 0;
    background-size: cover; }
  .input-group input {
    background: none;
    border: 1px solid #000;
    color: #000;
    padding: 2px 10px;
    font-size: 18px;
  }
  .enquiry-btn{ background: #171719; font-weight: 500; color: #fff; float:right; border: 0; height:75px; letter-spacing: 2.33px; text-transform: uppercase; text-align: center; padding: 10px 50px; box-sizing: border-box; text-decoration: none; }
  .input-group textarea {
    background: none;
    border: none;
    border-bottom: 1px solid #000;
    color: #000;
    padding: 2px 10px;
    font-size: 18px;
  }
  .input-group input[type=text], .input-group input[type=email] {
    border: none;
    border-bottom: 1px solid #000;
  }
  input:focus, input:active {
    outline: none;
  }
  .input-group input[type=submit] {
    color: white;
    background-color: #000;
  }
  
  .input-group {
    position: relative;
    display: inline-block;
    width: 100%;margin-bottom: 20px;
  }
  .input-group label {
    position: absolute;
    color: #999; font-weight: 300;
    text-transform: uppercase;
    pointer-events: none;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scale(0.9) translateY(100%);
            transform: scale(0.9) translateY(100%);
    transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
    transition: transform 0.2s linear, -webkit-transform 0.2s linear; bottom: 25px;
  }
  .input-group label.animate-label {
    -webkit-transform: scale(0.6) translateY(0%);
            transform: scale(0.6) translateY(0%);
    transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
    transition: transform 0.2s linear, -webkit-transform 0.2s linear; bottom: inherit;
  }
  .input-group input, .input-group textarea {
    padding-top: 20px;
    width: 100%;
    box-sizing: border-box; outline: none; 
  }
  .custom-select select {
    display: none; /*hide original SELECT element:*/
  }
  
  .select-selected {
    background-color:transparent; border-bottom: 1px solid #000 !important; padding-left: 0 !important;  
  }
  
  /*style the arrow inside the select element:*/
  .select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #000 transparent transparent transparent;
  }
  
  /*point the arrow upwards when the select box is open (active):*/
  .select-selected.select-arrow-active:after {
    border-color: transparent transparent #000 transparent;
    top: 7px;
  }
  
  /*style the items (options), including the selected item:*/
  .select-items div,.select-selected {
    color: #999; font-weight: 300;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    user-select: none;
  }
  
  /*style items (options):*/
  .select-items {
    position: absolute;
    background-color: #000; color: #fff;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
  }
  
  /*hide the items when the select box is closed:*/
  .select-hide {
    display: none;
  }
  
  .select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
  }
  .because-home .owl-nav,   .because-about .owl-nav{top: 50%; margin-top: -5px; bottom: inherit;}
  .download-bro.owl-carousel button.owl-dot{width: 10px; height: 10px; border-radius: 100%; margin: 0 3px; background: rgba(0,0,0,.5);}
  .download-bro .owl-dots{float: left; width: 100%; margin: 0 0 20px 0; text-align: center;}
  .download-bro.owl-carousel button.owl-dot.active{background: #1f49e1;}
  .services-icon{width: 100px !important; margin-bottom: 15px;}
  @media screen and (max-width: 1368px){
  }
  @media screen and (max-width: 1000px){
    .contact-left{width: 100%;}
    .contact-right{width: 100%;}
    .enquiry-right{position: relative; float: left; width: 100%; height: 500px; background-size: contain; max-height: 100vh;}
    .enquiry-left{width: 100%; padding: 0;}
  }
  @media screen and (max-width: 900px){
    .team-img img {
      height: 1auto;
      width: 100% !important;
  }
  .case-banner{max-height: auto; width: 100vw;}
  .video-responsive{padding: 0;}
  .video-responsive video{position: relative; width: 100%; height: auto;}
  .video-responsive img{position: relative; width: 100%; height: auto;}
  .video-responsive iframe{position: relative; width: 100%; height: auto;}
  .project-overview-inner .pannel--description .vertical-center .inner-wrapper, .project-overview-inner .pannel--overview .vertical-center .inner-wrapper{padding:20px}
  .project-overview .project-overview-inner .pannel--description{width: 100%; display: block;}
  .project-overview .project-overview-inner .pannel--overview{width: 100%; display: block;}
  .mask-image{padding: 20px;}
  .work-with-us .inner-wrapper h2{font-size: 30px; line-height: normal;}
  .work-with-us{padding: 30px ;}
  .work-with-us .inner-wrapper h2{margin: 0; padding: 0;}
  .work-with-us .inner-wrapper h2, .work-with-us .inner-wrapper a{    -webkit-transform: translateY(0); 
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
     transform: translateY(0); }
     .next-project .page-slogan p{line-height: normal; font-size: 25px;}
     .next-project{padding: 30px;;}
     .video-overlay{position: relative; float: left; width: 100%;     background: #FDD916 !important;
      color: #000;}
      .video-overlay h1{font-size: 24px; font-weight: 500; padding: 20px;}
      .scroll-down-text{display: none; }
      .scroll-down{display: none;}
  }
  
  @media screen and (max-width: 768px){
    .about-contain .vertical-top--wrapper , .why-because .vertical-top--wrapper{padding: 0;}
    .about-contain{padding: 15px;}
    .why-because{padding: 15px;}
    .because-home .item .because-home-page-image {
      opacity: 1;
      -webkit-transform: translate(-25%, 0) scale(1);
      -moz-transform: translate(-25%, 0) scale(1);
      -ms-transform: translate(-25%, 0) scale(1);
      -o-transform: translate(-25%, 0) scale(1);
      transform: translate(-25%, 0) scale(1);
  }
  .because-home .item {
    background: #FDD916; 
	border-left:1px solid #FDD916;
}
.because-home .item .home-contain-number {
  visibility: inherit;
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, -100);
  color: #fff;
}
.because-home .item .because-home-contain {
  visibility: inherit;
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, -100);
  color: #fff; font-size:38px; line-height:normal;
}
.because-home .item .because-home-page--title {
  opacity: 1;
}
  }
  @media screen and (max-width: 767px){
    .because-about{display: block; width: 100%; height: auto;}
    .because-about.owl-carousel .owl-stage-outer{overflow-y: scroll;}
    .because-about  .owl-stage{    transform: translate3d(0px, 0px, 0px) !important; 
      -webkit-transform: translate3d(0, 0, 0)  !important;
      -moz-transform: translate3d(0, 0, 0)  !important;
      -ms-transform: translate3d(0, 0, 0)  !important; width: 100vw !important;}  
      .because-about .item{height: auto; width: 100vw;}
      .about-title, .services-title{padding-top: 100px;}
      .meet-the-team, .team-section{max-width: 100%;}
      .about-img{display: none;}
      .because-about .owl-nav{display: none;}
      .services-box{max-width: 100%;}
      .services-box .vertical-top--wrapper{padding: 30px;}
      .enquiry-right{height: 300px; min-height: inherit;}
      .m-header{background: #fff;}
      header.m-header .inner-wrapper{position: relative; padding: 15px;}
      header .inner-wrapper{padding: 15px;}
      .because-home .vertical-top--wrapper{display: block; margin-top: 200px;}
      .team-contain .vertical-center .vertical-top--wrapper{background: none;}
      .team-contain{position: relative; background: #2a58a7;}
      .team-img{    height: 1100px;
        background-position: top !important;}
  }
  @media screen and (max-width: 500px){
    .team-img{    height: 650px;
      background-position: top !important;}
  }
  
.because-home .vertical-top--wrapper{display:block; margin-top:30vh;}