/* ------------------------------------------------------------------------------  
  1.  Global

      1.1 General
      1.2 Typography
      1.3 Fields
      1.4 Buttons
      1.5 Icons
      1.6 Loader
      1.7 Content styles

  2.  Header 

      2.1 Brand
      2.2 Vertical Panel
      2.3 Navbar Desctop
      2.4 Navbar Desctop Affix
      2.5 Navbar Mobile
      2.6 Navbar Mobile Affix
      

  3.  Main

      3.1 Slider

  4.  About
  5.  Projects

      5.1 Project Carousel
      5.2 Magnific popup

  6.  Services
  7.  Experience
  8.  Clients
  9.  Objects
  10.  Contacts  
  11. Footer
  12. Responsive styles

      12.1 Min width: 768px
      12.2 Min width 992px
      12.3 Min width 1200px 
      12.4 Max height 480px

    
    
/*-------------------------------------------------------------------------------
  1. Global
-------------------------------------------------------------------------------*/
    /* 1.1 General */
    
    @import url('bootstrap.min.css');
    @import url('font-awesome.min.css');
    @import url('animate.css');
    @import url('hover.css');
    @import url('magnific-popup.css');
    /* @import url('owl.carousel.css'); */
    
    @import url('owl.transitions.css');
    @import url('settings.css');
    @import url('layers.css');
    @import url('navigation.css');
    html {
        font-size: 75%;
        -webkit-font-smoothing: antialiased;
    }
    
    body {
        font-family: 'montserratlight', sans-serif;
        font-size: 1em;
        line-height: 1.65;
        color: #747474;
    }
    
     ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
     ::-webkit-scrollbar-thumb {
        cursor: pointer;
        background: #ec2328;
    }
    
     ::selection {
        background-color: #ec2328;
        color: #fff;
    }
    
    -webkit-::selection {
        background-color: #ec2328;
        color: #fff;
    }
    
     ::-moz-selection {
        background-color: #ec2328;
        color: #fff;
    }
    /* 1.2 Typography */
    
    @font-face {
        font-family: 'montserratlight';
        src: url('../fonts/montserrat/Montserrat-Light.ttf');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'montserratsemibold';
        src: url('../fonts/montserrat/Montserrat-SemiBold.ttf');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'mlb-bb';
        src: url('../fonts/mlb-bb.otf');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'mlb-rb';
        src: url('../fonts/mlb-rb.otf');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'mlb-lb';
        src: url('../fonts/mlb-lb.otf');
        font-weight: normal;
        font-style: normal;
    }
    
    h1,
    .h1 {
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        font-size: 8vmin;
        line-height: 1.2;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: #3d3d3d;
    }
    
    h2,
    .h2 {
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        font-size: 2.1875em;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: #3d3d3d;
    }
    
    h3,
    .h3 {
        font-family: 'montserratsemibold';
        font-size: 1.875em;
        line-height: 1.1;
        font-weight: normal;
        color: #3d3d3d;
    }
    
    h4,
    .h4 {
        font-family: 'montserratsemibold';
        font-size: 1.125em;
        line-height: 1.35;
        font-weight: normal;
        color: #3d3d3d;
        letter-spacing: 0.2em;
        text-transform: uppercase;
    }
    
    h1 a,
    .h1 a,
    h2 a,
    .h2 a,
    h3 a,
    .h3 a,
    h4 a,
    .h4 a {
        color: inherit;
    }
    
    h1 a:hover,
    .h1 a:hover,
    h2 a:hover,
    .h2 a:hover,
    h3 a:hover,
    .h3 a:hover,
    h4 a:hover,
    .h4 a:hover {
        text-decoration: none;
    }
    
    p {
        margin-bottom: 1.6em;
    }
    
    b,
    strong {
        font-family: 'Montserrat', sans-serif;
    }
    
    ul {
        list-style: none;
        padding-left: 0;
    }
    
    a {
        color: #ec2328;
        -webkit-transition: color .3s ease-out;
        -o-transition: color .3s ease-out;
        transition: color .3s ease-out;
    }
    
    a:hover,
    a:focus {
        color: #ec2328;
        outline: none;
    }
    
    a:focus {
        text-decoration: none;
    }
    /* 1.3 Fields */
    
    .form-control,
    textarea.form-control {
        font-size: 1em;
        height: 3.625em;
        border-radius: 0.75em;
        padding-left: 22px;
        color: #666666;
        background-color: #f3f3f3;
        border: 1px solid #f3f3f3;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-appearance: none;
        -webkit-transition: all .15s;
        -o-transition: all .15s;
        transition: all .15s;
    }
    
    textarea.form-control {
        height: 7.9em;
        padding-top: 1.1em;
        resize: none;
    }
    
    .form-control:focus {
        border-color: #ec2328;
        background-color: #fff;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    
    .form-control::-moz-placeholder {
        color: #666666;
        opacity: 1;
    }
    
    .form-control:-ms-input-placeholder {
        color: #666666;
    }
    
    .form-control::-webkit-input-placeholder {
        color: #666666;
    }
    
    .form-control.error {
        border-color: #ec2328;
    }
    
    .form-group {
        margin-bottom: 10px;
    }
    
    .wobble-error {
        -webkit-animation: hvr-wobble-horizontal 1s ease-in-out 0s 1 normal;
        animation: hvr-wobble-horizontal 1s ease-in-out 0s 1 normal;
    }
    
    label.error {
        display: none !important;
    }
    /* 1.4 Buttons */
    
    .btn {
        font-family: 'montserratsemibold';
        position: relative;
        display: inline-block;
        border: 0.2em solid #ec2328;
        border-radius: 30px;
        padding: 1.1em 2.2em 1.05em;
        font-size: 0.875em;
        color: #fff;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        text-decoration: none;
        background-color: #ec2328;
        border: 0;
        -webkit-transition: all .3s ease-out !important;
        transition: all .3s ease-out !important;
    }
    
    .btn:hover,
    .btn:focus {
        color: #fff;
        background-color: #ec2328;
        -webkit-box-shadow: none;
        box-shadow: none;
        outline: none !important;
    }
    
    .btn .icon-next {
        position: relative;
        top: -0.1em;
        margin-left: 0.6em;
        vertical-align: middle;
    }
    
    .btn-gray {
        background-color: #323232;
        border-color: #323232;
    }
    
    .btn-gray:hover {
        background-color: #ec2328;
    }
    
    .btn-shadow-1 {
        box-shadow: 0 15px 34px rgba(0, 0, 0, 0.18);
    }
    
    .btn-shadow-2 {
        box-shadow: 0 15px 34px rgba(236, 35, 40, 0.5);
    }
    /* 1.5 Icons */
    
    .icon-next {
        display: inline-block;
        width: 0.94em;
        height: 0.75em;
        background: url(../img/img-icon/next.png) 0 0 no-repeat;
        background-size: 0.94em 0.75em;
    }
    /* 1.6 Loader */
    
    .loader {
        position: fixed;
        overflow: hidden;
        z-index: 100;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        color: #fff;
        text-align: center;
    }
    
    .loader-brand {
        position: absolute;
        left: 0;
        width: 100%;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
    
    .sk-folding-cube {
        margin: 20px auto;
        width: 40px;
        height: 40px;
        position: relative;
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
    }
    
    .sk-folding-cube .sk-cube {
        float: left;
        width: 50%;
        height: 50%;
        position: relative;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    
    .sk-folding-cube .sk-cube:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ec2328;
        -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
        animation: sk-foldCubeAngle 2.4s infinite linear both;
        -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }
    
    .sk-folding-cube .sk-cube2 {
        -webkit-transform: scale(1.1) rotateZ(90deg);
        transform: scale(1.1) rotateZ(90deg);
    }
    
    .sk-folding-cube .sk-cube3 {
        -webkit-transform: scale(1.1) rotateZ(180deg);
        transform: scale(1.1) rotateZ(180deg);
    }
    
    .sk-folding-cube .sk-cube4 {
        -webkit-transform: scale(1.1) rotateZ(270deg);
        transform: scale(1.1) rotateZ(270deg);
    }
    
    .sk-folding-cube .sk-cube2:before {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }
    
    .sk-folding-cube .sk-cube3:before {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }
    
    .sk-folding-cube .sk-cube4:before {
        -webkit-animation-delay: 0.9s;
        animation-delay: 0.9s;
    }
    
    @-webkit-keyframes sk-foldCubeAngle {
        0%,
        10% {
            -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
            opacity: 0;
        }
        25%,
        75% {
            -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
            opacity: 1;
        }
        90%,
        100% {
            -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
            opacity: 0;
        }
    }
    
    @keyframes sk-foldCubeAngle {
        0%,
        10% {
            -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
            opacity: 0;
        }
        25%,
        75% {
            -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
            opacity: 1;
        }
        90%,
        100% {
            -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
            opacity: 0;
        }
    }
    /* 1.7 Content styles */
    
    .layout {
        position: relative;
        overflow: hidden;
    }
    
    .text-primary {
        color: #ec2328;
    }
    
    .page-lines {
        position: absolute;
        z-index: -1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    
    .page-lines .col-line {
        padding: 0;
    }
    
    .page-lines .line {
        position: absolute;
        left: 0;
        width: 1px;
        height: 50000px;
        background-color: #f4f4f4;
    }
    
    .page-lines .col-line:last-child .line:last-child {
        left: auto;
        right: 0;
    }
    
    .row-base {
        margin-top: -3em;
    }
    
    .col-base {
        margin-top: 3em;
    }
    
    .section {
        position: relative;
        padding-top: 7.1em;
    }
    
    .section-header {
        position: relative;
    }
    
    .section-title {
        text-align: center;
        margin: 0;
        margin-left: 0.32em;
    }
    
    .fade-title-left,
    .fade-title-right {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 10.8em;
        line-height: 1;
        color: #000;
        position: absolute;
        left: 0;
        top: 0.03em;
        opacity: 0.035;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    
    .fade-title-right {
        left: 100%;
    }
    
    .section-content {
        margin-top: 7.1em;
    }
    /*-------------------------------------------------------------------------------
  2. Header
-------------------------------------------------------------------------------*/
    
    .header-inner .vertical-panel-content {
        bottom: auto;
        top: 12.2vmin;
    }
    /* 2.1 Brand */
    
    .brand-panel {
        position: absolute;
        z-index: 4;
        left: 0;
        top: 0;
        width: 39.47vmin;
        height: 40.7vmin;
        padding: 4.8vmin 2em 4.8vmin;
        background-color: #f6f5f3;
        text-align: center;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }
    
    .brand {
        display: inline-block;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 4vmin;
        line-height: 1;
        color: #3d3d3d;
    }
    
    .brand:hover,
    .brand:focus {
        color: #3d3d3d;
        text-decoration: none;
    }
    
    .brand-name {
        position: absolute;
        z-index: -1;
        bottom: -0.4em;
        right: -0.38em;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 8.75em;
        line-height: 1;
        opacity: 0.05;
    }
    
    .slide-number {
        font-family: 'Oswald', sans-serif;
        margin-top: 8vmin;
    }
    
    .slide-number .current-number {
        font-size: 8vmin;
        letter-spacing: 0.1em;
        line-height: 1;
    }
    
    .slide-number sup {
        display: inline-block;
        position: relative;
        top: -3px;
        font-size: 2vmin;
        letter-spacing: 0.1em;
        color: #3d3d3d;
        vertical-align: top;
        margin-left: 0.46em;
    }
    
    .slide-number sup .delimiter {
        display: inline-block;
        margin-right: 0.4em;
    }
    
    .header-phone {
        font-family: 'Oswald', sans-serif;
        font-weight: 300;
        font-size: 0.81em;
        letter-spacing: 0.32em;
        position: absolute;
        z-index: 3;
        color: #fff;
        left: 45vmin;
        top: 5.9vmin;
    }
    
    @media (max-width: 480px) {
        .header-phone {
            display: none;
        }
    }
    
    @media (min-width: 992px) and (max-width: 1200px) {
        .header-phone {
            display: none;
        }
    }
    /* 2.2 Vertical Panel */
    
    .vertical-panel,
    .vertical-panel-content {
        position: absolute;
        width: 19.735vmin;
        left: 0;
        bottom: 0;
        text-align: center;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }
    
    .vertical-panel {
        z-index: 3;
        height: 10000px;
        background-color: #f6f5f3;
    }
    
    .vertical-panel-content {
        z-index: 4;
    }
    
    .vertical-panel-info {
        margin-bottom: 3.5vmin;
    }
    
    .vertical-panel-info .line {
        height: 5vmin;
        width: 1px;
        margin: 15px auto 0;
        background-color: #646464;
    }
    
    .vertical-panel-title {
        font-family: 'montserratsemibold';
        font-size: 10px;
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: 0.45em;
        color: #3d3d3d;
        position: relative;
        left: -6px;
        margin: 0 auto;
        width: 1px;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    
    @media (min-width: 992px) {
        .vertical-panel-title {
            display: none;
        }
    }
    
    .social-list {
        margin-bottom: 3.5vmin;
    }
    
    .social-list li {
        margin-top: 3.8vmin;
    }
    
    .social-list .fa {
        font-size: 2.4vmin;
        /* color: rgba(236, 35, 40, 0.35); */
        color: rgba(0, 0, 0, 0.6);
    }
    
    .social-list .fa:hover {
        color: #ec2328;
        text-decoration: none;
    }
    /* 2.3 Navbar Desctop */
    
    .nav>li>a {
        padding: 0;
    }
    
    .nav>li>a:hover,
    .nav>li>a:focus {
        background-color: transparent;
    }
    
    .navbar-desctop {
        display: none;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        padding: 5.9vmin 0 0;
    }
    
    .navbar-desctop .brand {
        display: none;
        position: relative;
        top: -0.22em;
        font-size: 1.6em;
    }
    
    .navbar-desctop-menu {
        float: right;
        font-family: 'mlb-rb', sans-serif;
        /* 'Oswald', sans-serif; */
        font-weight: 300;
        font-size: 0.81em;
        letter-spacing: 0.1em;
        /* 0.32em; */
        text-transform: uppercase;
        margin-bottom: 0;
    }
    
    .navbar-desctop-menu li {
        position: relative;
        -webkit-perspective: 2000px;
        perspective: 2000px;
    }
    
    .navbar-desctop-menu li a {
        display: block;
        text-decoration: none;
        color: #fff;
    }
    
    .navbar-desctop-menu li a:hover,
    .navbar-desctop-menu .active>a {
        color: #ec2328;
        font-weight: 900;
    }
    
    .navbar-desctop-menu>li {
        float: left;
        margin-left: 4.1em;
    }
    
    .navbar-desctop-menu>li>a {
        color: #fff;
        background-color: transparent;
        margin-bottom: 1.5em;
    }
    
    .navbar-desctop-menu li ul {
        position: absolute;
        z-index: 10;
        left: 100%;
        top: 60%;
        visibility: hidden;
        min-width: 200px;
        opacity: 0;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        background: rgba(50, 50, 50, 0.95);
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        transition: all .3s ease-out;
    }
    
    .navbar-desctop-menu>li>ul {
        left: -20px;
        margin-top: 0;
    }
    
    .navbar-desctop-menu li:hover>ul {
        top: 0;
        visibility: visible;
        opacity: 1;
    }
    
    .navbar-desctop-menu>li:hover>ul {
        top: 100%;
    }
    
    .navbar-desctop-menu li li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .navbar-desctop-menu li li:last-child {
        border-bottom: 0;
    }
    
    .navbar-desctop-menu li li a {
        color: #fff;
        padding: 12px 20px 10px;
    }
    /* 2.4 Navbar Desctop Affix */
    
    .navbar-desctop.affix {
        position: fixed;
        z-index: 5;
        top: 0;
        background-color: rgba(255, 255, 255, 0.95);
        padding: 1.3em 0 0;
        box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
    }
    
    .navbar-desctop.affix.affix-top {
        padding-top: 2.2em;
    }
    
    .navbar-desctop.affix .brand {
        display: inline-block;
    }
    
    .navbar-desctop.affix .navbar-desctop-menu li a {
        color: #000;
    }
    
    .navbar-desctop.affix .navbar-desctop-menu li>a:hover,
    .navbar-desctop.affix .navbar-desctop-menu .active>a {
        color: #ec2328;
    }
    /* 2.5 Navbar Mobile */
    
    .navbar-mobile {
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        width: 100%;
        padding: 6vmin 0;
    }
    
    .navbar-mobile .brand {
        display: none;
        margin-left: 15px;
        font-size: 1.6em;
    }
    
    .navbar-collapse {
        border: 0;
        background-color: #fff;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    
    @media (max-height: 320px) {
        .navbar-collapse {
            max-height: 240px;
        }
    }
    
    .navbar-toggle {
        padding: 0;
        margin-top: 0;
        margin-bottom: 0;
        border-radius: 0;
        border: 0;
    }
    
    .navbar-toggle .icon-bar {
        background-color: #fff;
        height: 2px;
        width: 30px;
    }
    
    .navbar-toggle .icon-bar+.icon-bar {
        margin-top: 5px;
    }
    
    .navbar-toggle.collapsed .icon-bar {
        background-color: #fff;
    }
    
    .navbar-nav-mobile {
        font-family: 'Oswald', sans-serif;
        font-weight: 300;
        font-size: 0.9em;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        padding-top: 1.2em;
        margin-bottom: 0;
    }
    
    .navbar-nav-mobile li {
        position: relative;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .navbar-nav-mobile li a {
        display: block;
        padding: 1em 1em;
        color: #000;
        text-decoration: none;
    }
    
    .navbar-nav-mobile>.current>a {
        color: #ec2328;
    }
    
    .navbar-nav-mobile li a .fa-angle-down {
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }
    
    .navbar-nav-mobile>.current>a .fa-angle-down {
        top: -0.2em;
        left: -0.3em;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    
    .navbar-nav-mobile>.active>a,
    .navbar-nav-mobile>.active>a:hover {
        background-color: #ec2328;
        color: #fff;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }
    
    .navbar-nav-mobile ul {
        display: none;
    }
    
    .navbar-nav-mobile li a:hover,
    .navbar-nav-mobile li .active>a {
        color: #ec2328;
    }
    /* 2.6 Navbar Mobile Affix */
    
    .navbar-mobile.affix {
        position: fixed;
        z-index: 5;
        background-color: #fff;
        box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
        padding: 1.2em 0;
    }
    
    .navbar-mobile.affix .brand {
        display: inline-block;
    }
    
    .navbar-mobile.affix .navbar-toggle .icon-bar {
        background-color: #ec2328;
    }
    /*-------------------------------------------------------------------------------
  3. Main
-------------------------------------------------------------------------------*/
    
    .main {
        position: relative;
        overflow: hidden;
        min-height: 420px;
    }
    /* 3.1 Slider */
    
    .rev_slider {
        color: #fff;
        min-height: 420px;
    }
    
    .rev_slider .btn {
        -webkit-transition: background-color .3s ease-out !important;
        transition: background-color .3s ease-out !important;
    }
    
    .tp-caption {
        padding: 0 20px;
        text-align: right;
    }
    
    .arrow-left,
    .arrow-right {
        position: absolute;
        z-index: 4;
        bottom: 4vh;
        cursor: pointer;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }
    
    .arrow-left {
        left: 22vmin;
    }
    
    .arrow-right {
        right: 15px;
    }
    
    .arrow-left:after,
    .arrow-right:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        background-color: transparent;
        font-family: 'Oswald', sans-serif;
        font-size: 1em;
        line-height: 1;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: #fff;
    }
    
    .arrow-left:after {
        content: 'Prev';
    }
    
    .arrow-right:before {
        content: 'Next';
    }
    
    .arrow-left:before,
    .arrow-right:after {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 1.3em;
        height: 1em;
        opacity: 0.25;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }
    
    .arrow-left:hover:before,
    .arrow-right:hover:after {
        opacity: 1;
    }
    
    .arrow-left:before {
        background: url(../img/img-icon/prev.png) 0 0 no-repeat;
        background-size: 1.3em 1em;
        margin-right: 0.82em;
    }
    
    .arrow-right:after {
        background: url(../img/img-icon/next.png) 0 0 no-repeat;
        background-size: 1.3em 1em;
        margin-left: 0.72em;
    }
    
    .slide-title {
        font-family: 'Oswald', sans-serif;
        font-size: 50px;
        letter-spacing: 0.32em;
        text-transform: uppercase;
    }
    
    .slide-subtitle {
        font-size: 18px;
        line-height: 1.7;
    }
    /* ------------------------------------------------------------------------------- */
    /*  4. About
/* ------------------------------------------------------------------------------- */
    
    .about .fade-title-left {
        top: 1em;
    }
    
    .col-about-title {
        margin-top: 0;
        margin-bottom: 1.1em;
    }
    
    .col-about-info p:last-child {
        margin-bottom: 0;
    }
    
    .col-about-img {
        position: relative;
    }
    
    .col-about-img img {
        display: block;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }
    /* ------------------------------------------------------------------------------- */
    /*  5. Projects
/* ------------------------------------------------------------------------------- */
    
    .project {
        padding: 0;
        overflow: hidden;
    }
    
    .project figure {
        position: relative;
    }
    
    .project figure img {
        display: block;
        width: 100%;
        -webkit-transition: all 8s linear;
        -o-transition: all 8s linear;
        transition: all 8s linear;
    }
    
    .project figure:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #111;
        opacity: 0.7;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }
    
    .project.project-light figure:after {
        opacity: 0.4;
    }
    
    .project figcaption {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 3.2em 3.6em;
    }
    
    .project-title {
        position: relative;
        top: 0;
        left: 0;
        margin: 0;
        font-family: 'Oswald', sans-serif;
        font-weight: normal;
        font-size: 1.56em;
        line-height: 1.45;
        /* letter-spacing: 0.07em; */
        letter-spacing: 0.15em;
        color: #fff;
        text-transform: uppercase;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
        text-align: right;
    }
    
    .project-title>strong {
        color: rgb(236, 35, 40);
        font-size: 1.78rem;
    }
    
    .project-category {
        position: absolute;
        left: 0;
        bottom: 0;
        margin: 0 0 -0.8em;
        font-family: 'Oswald', sans-serif;
        font-weight: normal;
        font-size: 14px;
        color: #fff;
        letter-spacing: 0.8em;
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }
    
    .project-zoom {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 9em;
        height: 9em;
        margin: -4.5em;
        border-radius: 50%;
        background-color: rgba(236, 35, 40, 0.84);
        overflow: hidden;
        opacity: 0;
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transition: all 0.7s;
        -o-transition: all 0.7s;
        transition: all 0.7s;
    }
    
    .project-zoom:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 2.625em;
        height: 2.625em;
        background: url(../img/img-icon/zoom.png) 0 0 no-repeat;
        background-size: cover;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    
    .project figure:hover:after {
        opacity: 0;
    }
    
    .project figure:hover img {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
    }
    
    .project figure:hover .project-title {
        top: 30px;
        opacity: 0;
    }
    
    .project figure:hover .project-category {
        opacity: 0;
        letter-spacing: 2em;
    }
    
    .project figure:hover .project-zoom {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    /* 5.1 Project Carousel */
    
    .owl-prev,
    .owl-next {
        position: absolute;
        top: 50%;
        font-family: 'Oswald', sans-serif;
        font-size: 1em;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: #fff;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        opacity: 0.7;
    }
    
    .owl-prev:hover,
    .owl-next:hover {
        opacity: 1;
    }
    
    .owl-prev {
        left: 0.8em;
        padding-left: 35px;
        background: url(../img/img-icon/prev.png) left 50% no-repeat;
        background-size: 1.3em 1em;
    }
    
    .owl-next {
        left: auto;
        right: 0.8em;
        padding-right: 35px;
        background: url(../img/img-icon/next.png) right 50% no-repeat;
        background-size: 1.3em 1em;
    }
    /* 5.2 Magnific popup */
    
    .mfp-figure {
        box-shadow: none;
    }
    
    .mfp-iframe-scaler {
        overflow: visible;
    }
    
    .mfp-image-holder .mfp-close,
    .mfp-iframe-holder .mfp-close {
        padding: 0;
        margin-top: -10px;
        font-family: inherit;
        font-size: 40px;
        font-weight: 300;
        line-height: 0;
    }
    
    img.mfp-img {
        min-height: 460px;
    }
    
    .mfp-title {
        padding-right: 40px;
        font-size: 1.2em;
        line-height: 1.2;
        margin-top: 3px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        padding-bottom: 10px;
    }
    
    .mfp-counter {
        top: 5px;
    }
    
    .mfp-bg {
        background-color: #141414;
    }
    
    .mfp-arrow-left:before,
    .mfp-arrow-left .mfp-b {
        display: none;
    }
    
    .mfp-arrow-right:before,
    .mfp-arrow-right .mfp-b {
        display: none;
    }
    
    .mfp-wrap .mfp-content {
        -webkit-perspective: 1300px;
        perspective: 1300px
    }
    
    .mfp-wrap .mfp-figure,
    .mfp-wrap .mfp-iframe-scaler {
        opacity: 0;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: scale(0) rotateY(60deg);
        -o-transform: scale(0) rotateY(60deg);
        transform: scale(0) rotateY(60deg);
    }
    
    .mfp-bg {
        opacity: 0;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
    }
    
    .mfp-wrap .mfp-figure,
    .mfp-wrap .mfp-iframe-scaler {
        opacity: 0;
        -webkit-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        -webkit-transform: rotateY(-60deg);
        -ms-transform: rotateY(-60deg);
        -o-transform: rotateY(-60deg);
        transform: rotateY(-60deg);
    }
    
    .mfp-bg {
        opacity: 0;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
    }
    
    .mfp-wrap.mfp-ready .mfp-figure,
    .mfp-wrap.mfp-ready .mfp-iframe-scaler {
        opacity: 1;
        -webkit-transform: rotateX(0);
        -ms-transform: rotateX(0);
        -o-transform: rotateX(0);
        transform: rotateX(0);
    }
    
    .mfp-ready.mfp-bg {
        opacity: 0.8;
    }
    
    .mfp-wrap.mfp-removing .mfp-figure,
    .mfp-wrap.mfp-removing .mfp-iframe-scaler {
        opacity: 0;
        -webkit-transform: rotateX(-60deg);
        -ms-transform: rotateX(-60deg);
        -o-transform: rotateX(-60deg);
        transform: rotateX(-60deg);
    }
    
    .mfp-zoom-out-cur,
    .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
        cursor: url(../img/zoom-out.cur), zoom-out;
    }
    
    .mfp-removing.mfp-bg {
        opacity: 0;
    }
    
    .project-info-left {
        position: absolute;
        top: 5%;
        left: -85%;
        height: 100%;
        width: 88%;
        padding: 16px;
        font-family: 'mlb-rb';
        font-size: 1.9em;
        color: rgb(235, 235, 235);
    }
    /* ------------------------------------------------------------------------------- */
    /*  6. Services
/* ------------------------------------------------------------------------------- */
    
    .row-services {
        margin-left: -4.1em;
        margin-right: -4.1em;
    }
    
    .col-service {
        padding: 0 4.1em;
    }
    
    .service-item h4 {
        margin-top: 1.25em;
        margin-bottom: 1.1em;
    }
    
    .service-item p:last-child {
        margin-bottom: 0;
    }
    /* ------------------------------------------------------------------------------- */
    /*  7. Experience
/* ------------------------------------------------------------------------------- */
    
    .experience {
        text-align: center;
    }
    
    .text-parallax {
        background: no-repeat 0 0;
        display: inline-block;
    }
    
    .text-parallax-content {
        font-family: 'Oswald', sans-serif;
        font-weight: 700;
        font-size: 21.8em;
        line-height: 1;
        overflow: hidden;
        margin-bottom: 0;
        background: #fff;
        color: #363636;
        mix-blend-mode: lighten;
        -ms-mix-blend-mode: lighten;
        z-index: 20000;
    }
    
    .experience-info {
        position: relative;
        top: -0.75em;
        font-family: 'Oswald', sans-serif;
        font-size: 1.5625em;
        line-height: 1.45;
        letter-spacing: 0.06em;
        display: inline-block;
        text-align: left;
        margin: 0 0 0 0.5em;
    }
    
    .piaWinner {
        opacity: 0.125;
        position: absolute;
        top: 10%;
        z-index: 1000
    }
    
    @media (max-width: 480px) {
        .piaWinner {
            opacity: 0.125;
            position: absolute;
            top: 0vh;
            left: -76vw;
        }
        .piaWinner .pia-img img {
            max-width: 7.25em;
            position: relative;
            left: 0%;
        }
        .pia-text {
            position: relative;
            left: 30%;
            top: -6vh;
            padding: 0 20%;
            white-space: pre-wrap;
            line-height: 0.75em;
            margin-right: 5%;
        }
    }
    /* ------------------------------------------------------------------------------- */
    /*  8. Clients
/* ------------------------------------------------------------------------------- */
    
    .clients {
        text-align: center;
    }
    
    .clients-list {
        margin: -3.8em 0 0;
        width: 100%;
        overflow-x: hidden;
    }
    
    .clients-list .client {
        display: inline-block;
        vertical-align: middle;
        padding: 3.8em 1.258em 0;
        /* 3.8em 1.95em 0; */
        margin: 0;
        filter: grayscale(1);
        transition: filter 0.75s;
    }
    
    .clients-list .owl-stage {
        display: flex;
    }
    
    .clients-list .client img {
        opacity: 0.3;
        display: block;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }
    
    .clients-list .client:hover img {
        opacity: 1;
    }
    
    .clients-list .client:hover,
    .clients-list .client:focus,
    .clients-list .client:active {
        filter: grayscale(0);
    }
    /* ------------------------------------------------------------------------------- */
    /*  9. Objects
/* ------------------------------------------------------------------------------- */
    
    .objects {
        position: relative;
    }
    
    .object-label {
        position: absolute;
        width: 0.7em;
        height: 0.7em;
        background-color: #ec2328;
        border-radius: 50%;
        cursor: pointer;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }
    
    .object-label:hover {
        box-shadow: none;
    }
    
    .popover.top {
        margin-top: -20px;
    }
    
    .object-info-1,
    .object-info-2 {
        position: absolute;
        display: none;
        z-index: 1;
        width: 12.4em;
        margin-left: -6.2em;
        padding: 1.1em 1.3em 3em;
        border: 0;
        background-color: rgba(0, 0, 0, 0.725);
        border-radius: 4px;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    
    .object-info-1 {
        left: 50%;
        bottom: 30px;
    }
    
    .object-info-2 {
        right: -13.5rem;
        bottom: -5.892rem;
    }
    
    .object-info-1.in,
    .object-info-2.in {
        display: block;
    }
    
    .object-info-1:before {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -16px;
        width: 0;
        height: 0;
        border: 16px solid transparent;
        border-top: 14px solid rgba(0, 0, 0, 0.725);
    }
    
    .object-info-2:before {
        content: '';
        position: absolute;
        top: 45%;
        right: 100%;
        margin-left: -16px;
        width: 0;
        height: 0;
        border: 16px solid transparent;
        border-right: 14px solid rgba(0, 0, 0, 0.725);
    }
    /* .object-info {
    position: absolute;
    display: none;
    z-index: 1;
    left: 50%;
    bottom: 40px;
    width: 12.4em;
    margin-left: -6.2em;
    padding: 1.1em 1.3em 3em;
    border: 0;
    background-color: rgba(0, 0, 0, 0.725);
    border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.object-info.in {
    display: block;
}

.object-info:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -16px;
    width: 0;
    height: 0;
    border: 16px solid transparent;
    border-top: 14px solid rgba(0, 0, 0, 0.6);
} */
    
    .object-title {
        font-size: 1em;
        font-family: 'montserratsemibold';
        font-weight: normal;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #ec2328;
        padding: 0 0 1em;
        border-bottom: 1px solid rgba(249, 249, 249, 0.2);
        margin: 0 0 .5em;
    }
    
    .object-content {
        font-family: 'montserratlight', sans-serif;
        font-size: 0.75em;
        line-height: 2.6;
        color: #fff;
        padding: 0;
    }
    
    .popover.top>.arrow {
        border-top-color: transparent;
    }
    
    .popover.top>.arrow:after {
        border-top-color: rgba(0, 0, 0, 0.6);
    }
    /* ------------------------------------------------------------------------------- */
    /*  10. Contacts
/* ------------------------------------------------------------------------------- */
    
    .contacts .fade-title-right {
        left: 90%;
    }
    
    .row-field {
        margin-left: -5px;
        margin-right: -5px;
    }
    
    .col-field {
        padding: 0 5px;
    }
    
    .col-message {
        display: none;
        margin-top: 20px;
    }
    
    .col-address {
        font-size: 1.125em;
        line-height: 2.1;
        margin-top: 2em;
    }
    
    .form-submit {
        margin-top: 1.2em;
    }
    
    .success-message {
        display: none;
    }
    
    .error-message {
        display: none;
    }
    
    .success-message .fa {
        margin-right: 7px;
        font-size: 1.5em;
    }
    /* ------------------------------------------------------------------------------- */
    /*  11. Footer
/* ------------------------------------------------------------------------------- */
    
    .footer {
        text-align: center;
        padding: 9.6em 0 5.5em;
        font-size: 12px;
        color: #aaa;
    }
    
    .footer .brand {
        margin-top: -0.45em;
        font-size: 3.4em;
    }
    
    .author-link {
        font-family: 'Montserrat', sans-serif;
        color: #d0d0d0;
    }
    
    .author-link:hover {
        text-decoration: none;
    }
    /* ------------------------------------------------------------------------------- */
    /*  12. Responsive styles
/* ------------------------------------------------------------------------------- */
    /* 12.1 Min width 768px */
    
    @media (min-width: 768px) {
        html {
            font-size: 85%;
        }
        /* Slider */
        /* .arrow-left {
        top: 51.75vmin;
        bottom: auto;
        left: auto;
        right: 55vmin;
    } */
        .arrow-left {
            top: 51.75vmin;
            bottom: auto;
            left: auto;
            right: 20rem;
        }
        /* .arrow-right {
        left: auto;
        right: 21vmin;
        margin-left: 5em;
        top: 51.75vmin;
        bottom: auto;
    } */
        .arrow-right {
            left: auto;
            right: 10rem;
            margin-left: 5em;
            top: 51.75vmin;
            bottom: auto;
        }
        /* About */
        .col-about-spec {
            padding: 0 4.4em;
        }
        /* Project Carousel */
        .owl-prev {
            left: 3.6em
        }
        .owl-next {
            right: 3.6em;
        }
    }
    /* 12.2 Min width 992px */
    
    @media (min-width: 992px) {
        html {
            font-size: 92%;
        }
        /* Content styles */
        .text-center-md {
            text-align: center;
        }
        .text-right-md {
            text-align: right;
        }
        .text-left-md {
            text-align: left;
        }
        /* Navbar Mobile */
        .navbar-mobile {
            position: absolute;
            left: -50000px;
            top: -50000px;
        }
        /* About */
        .col-about-img {
            padding-left: 0;
            left: -5px;
        }
        .col-about-img img {
            max-width: calc(100% + 5px);
        }
        /* Contacts */
        .row-field {
            margin-left: -15px;
        }
        .col-base .col-about-info.cai-first {
            margin-right: calc(-1rem + -4px);
        }
        .col-base .col-about-info.cai-last {
            margin-left: calc(-1rem + -4px);
        }
    }
    /* 12.3 Min width 1200px */
    
    @media (min-width: 1200px) {
        html {
            font-size: 100%;
        }
    }
    
    @media (max-width: 480px) {
        .col-about-info {
            line-height: 1.9;
            text-align: center;
            padding-left: 1em;
            padding-right: 1em;
        }
        .text-center-sm {
            text-align: center;
        }
    }
    /* 12.4 Max height 480px  */
    
    @media (max-width: 480px) {
        /* Slider */
        .arrow-left {
            top: 43.5vmin;
            bottom: auto;
        }
        .arrow-right {
            left: 28vmin;
            right: auto;
            margin-left: 5em;
            top: 43.5vmin;
            bottom: auto;
        }
    }
    /* ****
    * Extras

*/
    
    #ol-ct {
        left: 36.9%;
        top: 90.5%;
    }
    
    #ol-jb {
        left: 54.9%;
        top: 33%;
    }
    
    #ol-pt {
        left: 56%;
        top: 26.5%;
    }
    
    div#ol-springb {
        left: 35.8%;
        top: 56.5%;
    }
    
    div#ol-saldan {
        left: 35.8%;
        top: 80.5%;
    }
    
    div#ol-herman {
        left: 39.4%;
        top: 97.1%;
    }
    
    div#ol-knysna {
        left: 44.1%;
        top: 87.1%;
    }
    
    div#ol-george {
        left: 45.3%;
        top: 90.5%;
    }
    
    div#ol-uping {
        left: 41.7%;
        top: 49.9%;
    }
    
    div#ol-kimberly {
        left: 46.5%;
        top: 53.5%;
    }
    
    div#ol-bloem {
        left: 48.85%;
        top: 56.8%;
    }
    
    div#ol-middle {
        left: 47.7%;
        top: 70.2%;
    }
    
    div#ol-porte {
        left: 51.2%;
        top: 90.2%;
    }
    
    div#ol-eastl {
        left: 56.2%;
        top: 83.6%;
    }
    
    div#ol-umtata {
        left: 50.2%;
        top: 40%;
    }
    
    div#ol-durban {
        left: 63.2%;
        top: 57%;
    }
    
    div#ol-richard {
        left: 65.6%;
        top: 42.95%;
    }
    
    div#ol-harris {
        left: 59.65%;
        top: 42.95%;
    }
    
    div#ol-nelspr {
        left: 63.2%;
        top: 22.95%;
    }
    
    div#ol-polok {
        left: 59.65%;
        top: 6.4%;
    }
    
    div#ol-mahik {
        left: 52.55%;
        top: 30.1%;
    }
    
    div#ol-welkom {
        left: 54.9%;
        top: 46.85%;
    }
    
    @media (max-width: 1800px) and (min-width: 1400px) {
        /* Slider */
        .arrow-left {
            top: 51.75vmin;
            right: 27vw;
        }
        .arrow-right {
            right: 15vw;
            top: 51.75vmin;
        }
    }
    
    @media (max-width: 992px) {
        /* Slider */
        .arrow-left {
            top: 43.5vmin;
            bottom: auto;
        }
        .arrow-right {
            left: 28vmin;
            right: auto;
            margin-left: 5em;
            top: 43.5vmin;
            bottom: auto;
        }
        #ol-ct {
            left: 25.8vw;
            top: 28.5vh;
        }
        #ol-jb {
            left: 63.7%;
            top: 26.9%;
        }
        #ol-pt {
            left: 65.6%;
            top: 20.2%;
        }
        div#ol-springb {
            left: 24.2vw;
            top: 17.3vh;
        }
        div#ol-saldan {
            left: 27.8%;
            top: 80.5%;
        }
        div#ol-herman {
            left: 33.4%;
            top: 97.6%;
        }
        div#ol-knysna {
            left: 40.8%;
            top: 87.5%;
        }
        div#ol-george {
            left: 42.7%;
            top: 90.8%;
        }
        div#ol-uping {
            left: 38.85%;
            top: 47.2%;
        }
        div#ol-kimberly {
            left: 48.5%;
            top: 53.5%;
        }
        div#ol-bloem {
            left: 52.2%;
            top: 56.9%;
        }
        div#ol-middle {
            left: 46.5%;
            top: 70.7%;
        }
        div#ol-porte {
            left: 52.2%;
            top: 90.9%;
        }
        div#ol-eastl {
            left: 59.8%;
            top: 83.8%;
        }
        div#ol-umtata {
            left: 54.2%;
            top: 40%;
        }
        div#ol-durban {
            left: 69.2%;
            top: 57%;
        }
        div#ol-richard {
            left: 74.85%;
            top: 43.5%;
        }
        div#ol-harris {
            left: 65.5%;
            top: 43.7%;
        }
        div#ol-nelspr {
            left: 71.1%;
            top: 23.5%;
        }
        div#ol-polok {
            left: 59.65%;
            top: 6.4%;
        }
        div#ol-mahik {
            left: 57.75%;
            top: 23.7%;
        }
        div#ol-welkom {
            left: 57.9%;
            top: 46.85%;
        }
    }
    
    @media (max-width: 480px) {
        /* Slider */
        .arrow-left {
            bottom: 5vh;
            top: auto;
        }
        .arrow-right {
            left: 62.5vmin;
            right: auto;
            margin-left: 5em;
            top: auto;
            bottom: 5vh;
        }
        #ol-ct {
            left: 13.3%;
            top: 90.655%;
        }
        #ol-jb {
            left: 67.6%;
            top: 26.9%;
        }
        #ol-pt {
            left: 70.6%;
            top: 19.8%;
        }
        div#ol-springb {
            left: 18.7vw;
            top: 17.65vh;
        }
        div#ol-saldan {
            left: 9.99%;
            top: 80.5%;
        }
        div#ol-herman {
            left: 20.15%;
            top: 97.5%;
        }
        div#ol-knysna {
            left: 33.8%;
            top: 87.5%;
        }
        div#ol-george {
            left: 36.85%;
            top: 90.8%;
        }
        div#ol-uping {
            left: 33.85%;
            top: 50.2%;
        }
        div#ol-kimberly {
            left: 47.5%;
            top: 53.7%;
        }
        div#ol-bloem {
            left: 43.7%;
            top: 56.9%;
        }
        div#ol-middle {
            left: 33.5%;
            top: 70.7%;
        }
        div#ol-porte {
            left: 54.0%;
            top: 90.9%;
        }
        div#ol-eastl {
            left: 67.5%;
            top: 83.8%;
        }
        div#ol-umtata {
            left: 64.2%;
            top: 40%;
        }
        div#ol-durban {
            left: 87.6%;
            top: 57%;
        }
        div#ol-richard {
            left: 94.85%;
            top: 43.5%;
        }
        div#ol-harris {
            left: 77.5%;
            top: 43.7%;
        }
        div#ol-nelspr {
            left: 91.1%;
            top: 23.5%;
        }
        div#ol-polok {
            left: 84.4%;
            top: 6.5%;
        }
        div#ol-mahik {
            left: 60.75%;
            top: 23.5%;
        }
        div#ol-welkom {
            left: 67.5%;
            top: 46.85%;
        }
    }
    
    div[class*="object-label"] div[class*="in"] {
        display: none;
    }
    
    .grecaptcha-badge {
        opacity: 0;
        z-index: -1;
    }
    
    .colored-toast.swal2-icon-success {
        background-color: #a5dc86 !important;
    }
    
    .colored-toast.swal2-icon-error {
        background-color: #f27474 !important;
    }
    
    .colored-toast.swal2-icon-warning {
        background-color: #f8bb86 !important;
    }
    
    .colored-toast.swal2-icon-info {
        background-color: #3fc3ee !important;
    }
    
    .colored-toast.swal2-icon-question {
        background-color: #87adbd !important;
    }
    
    .colored-toast .swal2-title {
        color: white;
    }
    
    .colored-toast .swal2-close {
        color: white;
    }
    
    .colored-toast .swal2-html-container {
        color: white;
    }
    
    .project-info-left {
        position: absolute;
        top: 5%;
        left: -88%;
        height: 100%;
        width: 88%;
        padding: 16px;
        /* font-family: 'mlb-rb'; */
        font-size: 1.9em;
        color: rgb(235, 235, 235);
        text-align: left;
        display: none;
    }
    
    .project-info-right {
        position: absolute;
        top: 5%;
        right: -92% !important;
        height: 100%;
        width: 88%;
        padding: 16px;
        /* font-family: 'mlb-rb'; */
        font-size: 1.9em;
        color: rgb(235, 235, 235);
        text-align: right;
        display: none;
    }
    
    .project-info-right-img {
        position: absolute;
        bottom: 10%;
        display: none;
    }
    
    .col-about-img {
        padding-left: inherit;
        left: 0;
    }
    
    h2.swal2-title {
        font-family: 'Montserrat', sans-serif !important;
        letter-spacing: inherit !important;
    }
    
    .col-about-info {
        line-height: 1.9;
        text-align: center;
    }
    
    .col-xs-6 {
        margin: auto !important;
    }
    
    .x-project {
        margin: 0 auto;
        opacity: 1;
        display: none;
        z-index: 8999;
        position: relative;
    }
    
    .x-projects-carousel,
    div.x-projects-carousel.owl-carousel {
        width: 100%;
        height: 100%;
        position: absolute;
        display: block;
        margin: 0 auto;
        padding: 0;
        z-index: 9000!important;
    }
    
    .x-projects-carousel .item {
        background-color: #cccccc;
        height: 100vh;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }
    
    .x-project-description {
        position: absolute;
        z-index: 9001;
        top: 5vh;
        left: 5vw;
        color: white;
        background-color: rgba(0, 0, 0, 0.6725);
        padding: 0.55em 1.725em;
    }
    
    .x-project-title,
    .x-project-category {
        color: white;
    }
    
    .x-project-logo {
        background-color: rgba(0, 0, 0, 0.6725);
        padding: 0.55em 1.725em;
    }
    
    .x-project-logo img {
        width: 100rem;
        height: 100rem;
        max-width: 180px;
        max-height: 150px;
        position: relative;
        top: 68vh;
        left: 80vw;
        z-index: 9001;
    }
    
    .x-project div.arrow-left,
    .x-project div.arrow-right,
    .x-close {
        display: inline-block;
        position: absolute;
        z-index: 9005;
        /* background-color: rgba(0, 0, 0, 0.6725); */
        padding: 0.225em 0.375em;
        border-radius: 0.875em;
    }
    
    .x-project div.arrow-left {
        top: 90.5vh;
        right: auto;
        left: 40vw;
    }
    
    .x-project div.arrow-right {
        top: 90.5vh;
        right: 40vw;
        left: auto;
    }
    
    .x-close {
        background: transparent;
        top: 5vh;
        right: 3.75vw;
        font-size: 1.5em;
        padding: 0.3738em;
        color: white;
    }
    
    .x-close:hover {
        animation: spin 0.5s ease-in 0s 1;
    }
    
    @keyframes spin {
        0% {
            transform: rotate(-180deg);
        }
    }
    
    .x-project div.arrow-left:after,
    .x-project div.arrow-right:before {
        color: #ec2328;
        font-weight: bold;
    }
    
    .arrow-left:before {
        background: url(../img/img-icon/x-prev.png) 0 0 no-repeat;
        background-size: 1.3em 1em;
        margin-right: 0.82em;
    }
    
    .arrow-right:after {
        background: url(../img/img-icon/x-next.png) 0 0 no-repeat;
        background-size: 1.3em 1em;
        margin-left: 0.72em;
    }
    
    @media (max-width: 448px) {
        .x-project-logo img {
            top: 68vh;
            left: 45vw;
        }
        .x-project div.arrow-right {
            top: 93.5vh;
            right: 5vw;
            left: auto;
        }
        .x-project div.arrow-left {
            top: 93.5vh;
            left: 5vw;
            right: auto;
        }
        .x-project-description {
            top: 10vh;
            left: 0vw;
        }
        .x-close {
            background: transparent;
            top: 13vh;
            right: 5vw;
            font-size: 1.5em;
            padding: 0.3738em;
            color: white;
        }
    }