body {font-family: sans-serif; color: #232323; background-color:transparent; position:relative; overflow-X:hidden}
ul{padding:0; margin:0; list-style: none}
input:focus, textarea:focus, button:focus, select:focus{outline:none}
a, a:hover, a:focus{text-decoration:none; color:inherit}
.section {padding-top: 100px; padding-bottom: 100px}
.sectionSmall{padding-top: 30px; padding-bottom: 30px}
.noPadding {padding: 0}
.smallMarginTop{height:30px}
.bigMarginTop{height:60px}
.noMargin{margin:0}
.pushRight{float:right}
.pushLeft{float:left}
.fitLayout{width:100%;margin:auto}
.btnGen{background:#222333; border:none; margin:15px 0; font-size:1.3em; color:#FFF; padding:10px 30px; box-shadow:3px 3px 5px #666}
.btnGenSmall{padding:5px 18px 6px; background:#222333; border:none; margin:15px 0; font-size:1em; color:#FFF; box-shadow:3px 3px 5px #666}
.modernHR{border-top:2px solid #BBB; margin-top:0}
.absent{visibility:hidden}
.forSmall{display:none}
.ourTagSmall{background:#f0f0f0}
.hoverable:hover{color:#138df2}
.ourTagSmall li{width:100px; display:inline-block; padding:10px}
.box {width: 100%;height: 200px;position: relative; border:3px solid #BBB;cursor: pointer; transition-delay: 0.2s; color:#BBB; margin-bottom:8px}
.box p{font-size:2em; padding:75px 0}
.box span {position: absolute;display: block;background: #138df2;transition: all 0.2s linear}
.box .top,
.box .bottom {width: 100%;height: 4px;-webkit-transform: scaleX(0);transform: scaleX(0)}
.box .left,.box .right {width: 4px;height: 100%;-webkit-transform: scaleY(0);transform: scaleY(0)}
.box .top {top: 0;left: 0;transition-delay: 0.0;-webkit-transform-origin: top left;transform-origin: top left}
.box .right {top: 0;right: 0;transition-delay: 0.0;-webkit-transform-origin: top left;transform-origin: top left}
.box .bottom {bottom: 0;right: 0; transition-delay: 0.0;-webkit-transform-origin: top right;transform-origin: top right}
.box .left {top: 0;left: 0;-webkit-transform-origin: bottom left;transform-origin: bottom left;}
.box:hover{border:none; color:#138df2}
.box:hover .top {transition-delay: 0.2s}
.box:hover .right {transition-delay: 0.325s}
.box:hover .bottom {transition-delay: 0.45s}
.box:hover .left {transition-delay: 0.575s}
.box:hover .top,
.box:hover .bottom {-webkit-transform: scaleX(1);transform: scaleX(1)}
.box:hover .left,
.box:hover .right {-webkit-transform: scaleY(1);transform: scaleY(1)}
.identify{border-bottom:2px solid #a3ca41}
#inSmall{display:none; width:80%; margin:auto;bottom:20%; position:absolute; left:10%}
#menuPage{position:fixed; padding:20px;background:#222333; width:100%;z-index:10; right:-100%; overflow-y:auto;height:100%}
#newMenu li{display:inline-block; padding:35px 15px; font-size:1.1em}
#getInTouch{margin:50px auto; color:#BBB}
#getInTouch p{margin-bottom:0}
#getInTouch h3{margin-top:0}
#getInTouch a:hover{color:#138df2}
#navBar{background:rgba(255,255,255,0.7); padding:10px 0; z-index:9}
#menuWhite{width: 120px;float: right;padding-top:50px; cursor:pointer;font-size:1.2em;margin-top:-30px;}
/* #menuBlack{width: 150px; height:60px; border-radius:30px 0 0 30px;float: right;margin-right: -15px;padding: 20px; margin-top:20px; cursor:pointer;font-size:1.2em} */
#menuBlack{cursor:pointer}
#menuWhite{color:#BBB}
#menuWhite img, #menuBlack img{margin-left:15px}
#logoHolder{width:130px; height:100px; padding:5px 0px 8px; margin-top:5px}
#logoHolderIn{width:130px; height:100px; padding:5px 0px 8px}
#logoHolderIn img,#logoHolder img{height:100%; width:auto}
#homeLanding{position:relative}
#homeLanding .textPart{padding:40% 10% 0 0}
#homeLanding .textPart h1{font-size:3em; margin:0}
#menuBlack .ini{color:#fff}
#mainBanHolder{margin-top:80px}
#ourTag{background:rgba(212,212,212,0.9); height:400px; text-align:center; position:relative;width:100%;padding-top:5%; width:100%}
#ourTag h2{font-size:5em;margin-bottom:0}
#ourTag h1{font-size:4em;margin-top:50px}
#ourTag h1 span{font-size:1.4em}
#caseStudy .caseImgHolder{margin-top:-70px; text-align:center}
#caseStudy .caseImgHolder img{width:80%; margin:auto}
#clientDiv,#partnerDiv{height:400px; width:200px; position:absolute;top:0;background:rgba(212,212,212,0.9)}
#partnerDiv{left:0; border-right:3px solid #000}
#partnerDiv span{position: absolute;transform: rotate(270Deg);-webkit-transform: rotate(270Deg);-moz-transform: rotate(270Deg);-o-transform: rotate(270Deg);right: -40px;top: 180px;font-size: 2em;font-weight: bold}
#clientDiv{right:0;border-left:3px solid #000}
#clientDiv span{position: absolute;transform: rotate(90Deg);-webkit-transform: rotate(90Deg);-moz-transform: rotate(90Deg);-o-transform: rotate(90Deg);left: -30px;top: 180px;font-size: 2em;font-weight: bold}
#logoListC,#logoListP{height:400px; width:100%; top:0; z-index:3; padding-top:80px;}
#logoListC li,#logoListP li{display:inline-block; padding:20px}
#logoListP li img,#logoListC li img{width:0;}
#startProject{background:#f0f0f0}
#startProject .typeBox{padding:10px; background:#FFF}
#startProject .imageHolder{background:#CFCFCF}
#startProject .imageHolder img{width:50%}
#startProject .textHolder{text-align:justify}
#startProject .textHolder h4{color:#999; font-weight:bold}
#contact .typeHead{font-size:1.5em; color:#BBB}
#contact img{width:60px}
#contact .typeData{font-size:2em}
#contact .typeData:hover{color:#138df2; transition:0.5s}
#social{margin-top:60px}
#social hr{width:90%; border-top:2px solid #BBB; margin:-2px auto}
#social li{display:inline-block; width:65px; height:65px; border:2px solid #BBB; padding:20px; cursor:pointer; transition:0.5s}
#social li:hover{border-color:#138df2; transition:0.5s}
#social li:hover i{color:#138df2; transition:0.5s}
#copyRight{margin-top:20px; color:#BBB}
#social i{color:#BBB; transition:0.5s}
#logoLight{margin-top:100px;width:100px}


/* Border Animation */
#caseStudy .blockHead {width: 250px;position: relative; background:transparent;display: inline-block;z-index:1; font-size:0em; text-align:center; color:#138df2; transition:1s; margin-top:50px}
#caseStudy .blockHead p{bottom:0;position: absolute; font-size:0.8em}
#case1,#case2,#case3{margin-bottom:80px}
#case1:hover .blockHead,#case2:hover .blockHead,#case3:hover .blockHead {font-size:2em;transition: 1s}
#caseStudy .innerItemHolder{width:60%; margin:auto}
#caseStudy .carousel-control{background:transparent; top:45%}
#caseStudy .carousel-control .fa{font-size:1.5em; color:#ccc}

/* ------------Products Page------------ */
#restBodyOther{background:#FFF}
.grid h2{font-size:3em}




#introText{position:absolute; bottom:10%}
#introText h1,#introText h2{margin:0}
.textIntro2{width:100%; background:#777; position:relative; right:0; top:-100px; padding:50px; color:#fff}
.textIntro2 .overviewList li{padding:5px 10px; font-size:1em}
#dashHolder{position:relative; width:700px; height:450px; margin:auto}
#dashHolder img{position:absolute}
#dashHolder .laptop{width:100%;bottom:0}
#dashHolder .tablet{width:30%;right:0; bottom:0}



.contactHolder{width:40%; margin:auto; position:relative}
.contactHolder img{position:absolute; top:-100px; z-index:2}
#map,#address{color:#FFF; padding:10%; height:320px}
#address{background:#2d9f9f}
#map{background:#bbb; cursor:pointer}
#map img{width:100px}
#contactForm .formGroup{margin-bottom:20px;}
#contactForm .formGroup label{width:100%; margin-bottom:0; font-weight:500}
#contactForm .formGroup input,#contactForm .formGroup textarea{width:100%; border:2px solid #BBB; padding:10px}
#contactForm .formGroup textarea::placeholder,#contactForm .formGroup input::placeholder{color:#cdcdcd}
#contactForm .formGroup input:focus{border:2px solid #138df2; transition:0.5s}

#myModal{color:#CCC}
#myModal .formGroup{margin-bottom:20px;}
#myModal .formGroup label{width:100%; margin-bottom:0; font-weight:500}
#myModal .formGroup input,#myModal .formGroup textarea,#myModal .formGroup select{width:100%; border:2px solid #BBB; padding:10px}
#myModal .formGroup textarea::placeholder,#myModal .formGroup input::placeholder{color:#cdcdcd}
#myModal .formGroup input:focus{border:2px solid #138df2; transition:0.5s}
#myModal .forScroll{height:500px; overflow-Y:scroll; overflow-X:hidden}

.about{background:#138df2; color:#fff; padding:10%}
.about h4{margin-top:30px; line-height:1.3}
.jobDetails h1{margin-bottom:30px}
.jobItem{border:1px solid #BBB; padding:15px; box-shadow:0 0 10px #BBB; margin-bottom:15px}
.skillList{list-style:disc; padding-left:25px}
.skillList li{font-size:0.85em}
.jobItem p{color:#BBB}
.jobItem p span{color:#232323}
#whyUs h2{text-align:center; width:70%; margin:30px auto}
.typeBox{padding:10px; background:#FFF}


#gallery {text-align: center}
#gallery .innerItemHolder{width:80%; margin:auto}
#gallery .carousel-control{background:transparent; top:40%}
#gallery .carousel-control .fa{font-size:1.5em; color:#ccc}
#gallery img{margin-bottom:30px}
#galleryCarouselNarrow{display:none}

.ip_mob2{margin-top:70px}
.ip_mob3{margin-top:140px}
.ip_mob4{margin-top:210px}


#extra{padding:15px}
#extra .typeBox{background:#555}
#extra .imageHolder {background: #CFCFCF}
#extra .imageHolder img {width: 50%; margin:auto}
#extra .textHolder {padding: 0 10px;text-align: justify; color:#FFF}
#extra .textHolder p{font-size:0.9em}


ul.breadcrumb {padding: 10px 0px;list-style: none; background:transparent}
ul.breadcrumb li {display: inline;font-size: 18px}
ul.breadcrumb li+li:before {padding: 8px;color: black;content: "/\00a0"}
ul.breadcrumb li a {color: #0275d8;text-decoration: none}
ul.breadcrumb li a:hover {color: #01447e}


#scrollContainer{height: 220px;overflow: hidden;width: 700px;margin: auto;}
#scrollContainer .scrollView{position: relative;-webkit-animation: mymove 5s infinite;animation: mymove 10s infinite}
@-webkit-keyframes mymove {
    0%   {bottom: 0px;}
    50%  {bottom: 250px;}
    100% {bottom: 0px;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {bottom: 0px;}
    50%  {bottom: 250px;}
    100% {bottom: 0px;}
}
.smlmd{display:none; padding:30px 5%; position:absolute; bottom:0}
.smlmd h1{font-size:5em}
#homeLanding{background:url("../images/carousel/ban_0.jpg");min-height: 780px;position:fixed;width:100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
#prodBanner{background:url("../images/carousel/ban_1.jpg");min-height: 780px;position:fixed;width:100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
#serviceBanner{background:url("../images/carousel/ban_2.jpg");min-height: 780px;position:fixed;width:100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
#careerBanner{background:url("../images/carousel/ban_3.jpg");min-height: 780px;position:fixed;width:100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
#IPBanner{background:url("../images/banners/ban_iplan2.jpg");min-height: 780px;position:fixed;width:100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
#CVBanner{background:url("../images/banners/shopping-carts.jpg"); min-height: 780px;position:fixed;width:100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
#contactBanner{background:url("../images/carousel/ban_4.jpg"); min-height: 780px;position:fixed;width:100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
#partnerBanner{background:url("../images/banners/ban_partner.jpg"); min-height: 780px;position:fixed;width:100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
#clientBanner{background:url("../images/banners/ban_client.jpg"); min-height: 780px;position:fixed;width:100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
.landing-wrapper{min-height:780px;}
#restBody{position:relative;background:#FFF}

.pageText{position:absolute; width:28%}
#homeLanding .pageText h1{font-size:5em}
#homeLanding .pageText,#contactBanner .pageText,#CVBanner .pageText,#careerBanner .pageText,#IPBanner .pageText{ left:10%; top:350px}
#serviceBanner .pageText{ left:10%; top:550px}

#contactBanner .paperPlane{position:absolute; width:100%}



#pCarousels .carousel-inner,#pCarouselb .carousel-inner{width:80%; margin:auto}
#pCarousels .carousel-control,#pCarouselb .carousel-control{background:transparent; top:45%}
#pCarousels .carousel-control .fa,#pCarouselb .carousel-control .fa{font-size:1.5em; color:#ccc}
#cCarousels .carousel-inner,#cCarouselb .carousel-inner{width:80%; margin:auto}
#cCarousels .carousel-control,#cCarouselb .carousel-control{background:transparent; top:45%}
#cCarousels .carousel-control .fa,#cCarouselb .carousel-control .fa{font-size:1.5em; color:#ccc}
#sCarousel .carousel-inner{width:75%; margin:auto}
#sCarousel .carousel-control{background:transparent; top:45%}
#sCarousel .carousel-control .fa{font-size:1.5em; color:#ccc}

.hovcontainer {position: relative;width: 100%; margin-top:30px}
.hovimage {display: block;width: 100%;height: auto}
.hovoverlay {position: absolute;bottom: 0;left: 0;right: 0;background-color: rgba(255,255,255, 0.9);overflow: hidden;width: 100%;height: 100%;-webkit-transform:scale(0);transition: .3s ease}
.hovcontainer:hover .hovoverlay {transform: scale(1)}
.hovtext {color: #232323;position: absolute;top:60px;text-align: center}
.hovtext p{padding:10px}

#contBox{background:transparent; position:absolute;z-index:1; bottom:100px; left:100px;color:#72d7e3; font-size:2em; padding:10px; transition:0.3s}
#contBox:hover{box-shadow:5px 5px 10px #aaa; transition:0.3s}
#contBox img{width:50px}

@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

.hvr-buzz-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
  -webkit-animation-name: hvr-buzz-out;
  animation-name: hvr-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}