/* @font-face {
    font-family: 'roboto';
    src: url('../fonts/brandon_light-webfont.eot');
    src: url('../fonts/brandon_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/brandon_light-webfont.woff2') format('woff2'),
         url('../fonts/brandon_light-webfont.woff') format('woff'),
         url('../fonts/brandon_light-webfont.ttf') format('truetype'),
         url('../fonts/brandon_light-webfont.svg#brandon_grotesquelight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'brandon_grotesque_regular';
    src: url('../fonts/brandon_reg-webfont.eot');
    src: url('../fonts/brandon_reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/brandon_reg-webfont.woff2') format('woff2'),
         url('../fonts/brandon_reg-webfont.woff') format('woff'),
         url('../fonts/brandon_reg-webfont.ttf') format('truetype'),
         url('../fonts/brandon_reg-webfont.svg#brandon_grotesquemedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'brandon_grotesque_medium';
    src: url('../fonts/brandon_med-webfont.eot');
    src: url('../fonts/brandon_med-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/brandon_med-webfont.woff2') format('woff2'),
         url('../fonts/brandon_med-webfont.woff') format('woff'),
         url('../fonts/brandon_med-webfont.ttf') format('truetype'),
         url('../fonts/brandon_med-webfont.svg#brandon_grotesquemedium') format('svg');
    font-weight: normal;
    font-style: normal;

} */


body { font: 14px/24px roboto; color: #7e7e7e; overflow-x: hidden; }
a { text-decoration: none;}
a:hover { color: #e74643;}
.title-01 { color: #e74643; font-size: 18px; font-family: roboto; text-transform: uppercase; margin-bottom: 20px;}
.title-02, .title-03 { color: #333; font-size: 30px; font-family: roboto; margin-bottom: 20px; }
.title-03 { font-size: 24px; }



.primary-btn {
    display: inline-block;
    font-size: 18px;
    font-family: roboto;
    padding: 5px 25px 5px;
    color: #e74643;
    position: relative;
    z-index: 1;
}

.primary-btn:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 24px;
    width: 24px;
    border-left: 2px solid #e74643;
    border-top: 2px solid #e74643;
    content: "";
    z-index: -1;
    -webkit-transition: all, 0.7s;
    -o-transition: all, 0.7s;
    transition: all, 0.7s;
}

.primary-btn:after {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 24px;
    width: 24px;
    border-right: 2px solid #e74643;
    border-bottom: 2px solid #e74643;
    content: "";
    z-index: -1;
    -webkit-transition: all, 0.7s;
    -o-transition: all, 0.7s;
    transition: all, 0.7s;
}

.primary-btn:hover:before {
    height: 100%;
    width: 100%;
}

.primary-btn:hover:after {
    height: 100%;
    width: 100%;
}

.btn-white .primary-btn { color: #fff; }
.btn-white .primary-btn:before { border-color: #fff; }
.btn-white .primary-btn:after { border-color: #fff; }

.btn-secondary { background: #e74643; border: none; padding: 8px 25px; color: #fff !important; text-transform: uppercase; font: 13px roboto; }

header { z-index: 999; position: relative;}
.navbar-default{ transition:500ms ease; background:transparent; }
.navbar-default.scrolled { background:#fff; position: fixed; width: 100%; top: 0; box-shadow: 0 0 5px #ccc;
 }
.main-menu li { font: 13px roboto; font-weight: bold; letter-spacing:1px; margin: 0 20px; text-transform: uppercase;}
.main-menu li a:hover { color: #e74643;}
.main-menu li a.active { color: #e74643 !important;}

.banner { margin-top: -70px; max-height: 600px; z-index: 1;
    background : url(../img/banner-bottom-bg.png) no-repeat bottom;
    background-size: 100% 100%; }

.banner img { max-height: 620px;
    -webkit-mask-image: url(../img/banner-bottom-bg.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: right bottom;
    mask-image: url(../img/banner-bottom-bg.png);
    mask-repeat: no-repeat;
    mask-position: right bottom;
}


.banner-tag { margin-top: 130px !important; text-transform: uppercase; font-size: 11px; font-weight: bold;}
.banner-tag a { font: 11px roboto; text-transform: uppercase; color: #555454; }
.banner-tag a:hover { color: #e74643;}
.banner-text { font: 36px roboto; color: #5e5d5d; }
.banner-text span { color: #e74643;}

.img-border { border-radius: 10px; border: 3px solid #e74643; padding: 10px 0 10px 10px; transform: rotate(-2deg);}


  .left-half,
  .right-half {
    left: 50%;
    margin-left: -50vw;
    max-width: 100vw;
    position: relative;
    right: 50%;
    width: 100vw;
  }
  .image {
    background-image: url("../img/staff-meeting.jpg");
    background-size: cover;
    background-position: center;
    min-height: 400px;
    height: 100%;
    
  }

  .img-border .image { transform: rotate(2deg);}
  .abt-img { background-image: none; min-height: auto;}

  .form-control { border-radius: 0; height: 50px;}
  textarea.form-control { height: 300px;}



/* ================= Services Section - Parallax ================== */
.service-prl { overflow: hidden; position: relative; width: 100%; background-image: url(../img/service-bg.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;}
.text-white { color: #fff;}
.services { color: #fff;}
.ser-box { background: rgba(255, 255, 255, 1); height: 100%; border-radius: 10px;}

.industry-section { font-family: roboto;}
.indus-icon { width: 20%; margin: 20px 0; }
.schd-call { padding: 70px 0;}
.bg-red { background: #e74643; }
.call-text { font-family: roboto; color: #fff; font-size: 60px;}
.bg-red .primary-btn { color: #fff; }
.bg-red .primary-btn:before { border-color: #fff; }
.bg-red .primary-btn:after { border-color: #fff; }

footer { background: url(../img/footer-bg.jpg); color: #fff; font-size: 14px;}
.footer-menu { padding-left: 0;}
.footer-menu li { list-style: none; margin: 15px; display: inline-block;}
.footer-menu li a { color: #fff; }
.footer-menu li a:hover { color: #e74643; }
.footer-menu li span { width: 5px; height: 5px; display: inline-block; background: #e74643;}
.goTop { width: 50px; height: 50px; background: #e74643; font-size: 18px; color: #fff; text-align: center; line-height: 18px; position: fixed; right: 30px; bottom: 30px; border-radius: 5px; box-shadow: 0 0 8px #4d4c4c; display: none;}
.goTop:hover { background: #c23633; color: #fff;}
.goTop-block { display: block;}

.ic_wa { width: 50px; position: fixed; bottom: 100px; right:30px; z-index: 999; background: #28a619; border-radius: 5px;}





/* ========================== About Page =============================== */
.about-prl { overflow: hidden; position: relative; width: 100%; background-image: url(../img/about-bg.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;}

.mask-img { height: 100%; background-size: 100% 100%;
    background : url(../img/mask-bg.png) no-repeat bottom;
    -webkit-mask-image: url(../img/mask-bg.png);
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-image: url(../img/mask-bg.png);
    mask-repeat: no-repeat;
    mask-position: left top;
    -webkit-mask-size: 100% 100%; }

.mask-img img { width: 100%; height: 100%; }
.cont-info { box-shadow: 0 0 5px #ccc; height: 100%; padding: 30px;}
.cont-info i { color: #e74643; font-size: 36px; margin-bottom: 30px;}
.cont-info a { color: #7e7e7e;}
.cont-info a:hover { color: #e74643;}

.ser-cont { background: #fff; box-shadow: 0 0 5px #e7e6e6; height: 100%; border-radius: 10px;}
.ser-icon { background: #f5f5f5; border-radius: 100%; display: inline-block; padding: 20px; margin-bottom: 20px;}


.ser-banner {
    width: 100vw;
    background: #f8d9d9;
    background-image: 
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent 5px,
        white 5px,
        white 20px /* determines size */
      ),
      repeating-linear-gradient(
        rgba(0,0,0,0.1),
        rgba(0,0,0,0.1) 5px,
        white 5px,
        white 20px /* determines size */
      );
  }




  /* ========================== Portfolio Page ============================= */
.work-gal { border-radius: 10px; overflow: hidden; position: relative; transition: all 0.5s; }
.gal-overlay { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); top: 0; left: 0; visibility: hidden; opacity: 0; transition: all 0.5s; }
.work-gal img { transform: scale(1.1); transition: all 0.5s; }
.work-gal:hover img { transform: rotate(5deg) scale(1.1); }

.work-gal:hover .gal-overlay { visibility: visible; opacity: 1; }
.gal-overlay:before { border: 1px solid #e74643; content: ''; position: absolute; transition: all, 0.5s; top: 0px; bottom: 0px; left: 0px; right: 0px; }
.work-gal:hover .gal-overlay:before { top:20px; bottom: 20px; left: 20px; right: 20px;  }


.gal-overlay div { opacity: 0; visibility: hidden; transition: all 0.5s; margin-top: 30px;}
.work-gal:hover .gal-overlay div { opacity: 1; visibility: visible; margin-top: 0px;}
.prod-banner { background: linear-gradient( #e74643 50%, #ffFFFF 50%);}
.prod-banner-img { border-radius: 10px; overflow: hidden;}
.badge.bg-secondary { background: #dddcdc !important; color: #646464; font-weight: normal; }





.screenshot_frame {
    width: 100%;
    height: 450px;
    overflow: hidden;
    cursor: pointer;
        border-radius: 10px;
    box-shadow: 0 0 10px #ccc;
  }
  
  .screenshot_frame img {
    object-fit: cover;
    width: 100%;
    transform: translateY(0);
    transition: 5s ease-out;
  }
  
  .screenshot_frame:hover img {
    object-fit: cover;
    transform: translateY(calc(-100% + 450px));
    transition: 5s ease-out;
  }