@charset "utf-8"; 
.d-none{
    display: none;
  }
/* CSS Document */

/********************/
/*    hero banner   */
/********************/

video.loopVideo { /* max-width: 100%; */ max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#pathLine {position: absolute;left:0;bottom: 17%;z-index: 9;height: 268px;}
.pinPointSvgwrp {position: absolute;left:0;bottom: 17%;z-index: 99999;width: 100%;height: 350px;}
#line_svgPath { stroke: #ffffff !important; }

.heroBannerHeight { opacity: 0; width: 100%; height: 100vh; display: block; float: left;} 
.heroBanner{ width: 90%;height: 84vh;display: block;margin: 0px auto;overflow: hidden;position: fixed;left: 5%;top: 8vh; }

.bg{ opacity: 1; width: 100%; height: 100vh; display: block; float: left; background: url(../img/homeBG/hmbg-01.jpg) no-repeat center center; background-size: cover; overflow: hidden;}
.mask_banner { /*background: url(../img/hero_bannerBg_color.jpg) no-repeat center center; background-size: cover;*/	background-color: #393939; background-attachment: fixed; position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 10; }

/*
ul.slides{ margin:0px; padding: 0px; list-style-type: none; position: relative; }
ul li.layers{ width:45vh; height: 65vh;  background-size: cover; background: rgba(0,0,0,0.82);  }
.layer_01{ background:url(../img/banner-01.jpg) no-repeat center center;  }
*/

.slider_container {
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    perspective: 1200px;
    -webkit-perspective-origin: 0% 50%;
    -moz-perspective-origin: 0% 50%;
    perspective-origin: 0% 50%;
}
ul.slides li.layers {
    width: 45vh;
    height: 65vh;
    background-size: cover;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

ul.slides {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    position: relative;
    -webkit-transform: rotateY(50deg) rotateX(20deg) translateZ(-15px) translateZ(-224px);
    -moz-transform: rotateY(50deg) rotateX(20deg) translateZ(-15px) translateZ(-224px);
    transform: rotateY(50deg) rotateX(20deg) translateZ(-15px) translateZ(-224px);
}

ul.slides li{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0px auto; }

ul.slides li.layers.layer_01 {
    background: rgba(0,0,0,0.82);
    -webkit-transform: translateZ(155px);
    -moz-transform: translateZ(155px);
    transform: translateZ(155px);
}
ul.slides li.layers.layer_02 {
    background: rgba(0,0,0,0.82);
    -webkit-transform: translateZ(225px);
    -moz-transform: translateZ(225px);
    transform: translateZ(225px);
}
ul.slides li.layers.layer_03 {
    background: rgba(0,0,0,0.82);
    -webkit-transform: translateZ(295px);
    -moz-transform: translateZ(295px);
    transform: translateZ(295px);
}
ul.slides li.layers.layer_04 {
    background: rgba(0,0,0,0.82);
    -webkit-transform: translateZ(365px);
    -moz-transform: translateZ(365px);
    transform: translateZ(365px);
}

/*--copy_box--*/
.copy_box {/* width: 620px; */color: #333333;position: absolute;top: 10%;left: 0;/*bottom: 0;*/right: 0;margin: 0px auto;z-index: 90;transition: all 300ms ease-in-out;}
.BannerTxt { width: 100%; /*background: rgba(255, 255, 255, 0.9); padding: 40px 30px; */ color: #fff; float: left; }
.BannerTxt h1 {line-height: 1.2;font-size: 2.4vw;font-weight: bold;text-shadow: 2px 3px 1px rgba(0, 0, 0, 0.8);}
.BannerTxt h2 { font-size: 26px; color: #ffcd22; line-height: 1.4; }
.BannerTxt p {font-size: 1.3vw;text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.8);}
.copy_box.current { z-index: 1 !important; opacity: 0; filter: blur(3px);transition: all 300ms ease-in-out; }
/*--copy_box--*/


.overlay_hero{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #393939; z-index: 5; opacity: 1; transition: all 300ms ease-in-out; }
.overlay_hero.current{ opacity: .8!important; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(251,204,31,0.9) /*#393939*/; z-index: 9; tansition: all 300ms ease-in-out; }

.pinPoint-wrp { position: relative; background: rgba(57, 57, 57, 0); width: 100%; height: 100vh; }
.pinPoint{ position: absolute;  width: 30px; height: 30px; opacity: 0; transform: scale(.8); z-index: 20; cursor: pointer; border-radius: 100%; transition: all 300ms ease-in-out; }

.pinPoint:hover{  transform: scale(1); transition: all 500ms ease-in-out; }
a.pinPoint.pinP-1 { left: 23%; top: 34%; }
a.pinPoint.pinP-2 { left: 33.5%; top: 55%;}
a.pinPoint.pinP-3 {left: 65%;top: 31%;}
a.pinPoint.pinP-4 {left: 80%;top: 47.2%;}
a.pinPoint.pinP-5 { left: 86.8%; top: 52%; }

a.pinPoint.pinPs-1 { left: 23%; top: 34%; }
a.pinPoint.pinPs-2 { left: 33.5%; top: 55%;}
a.pinPoint.pinPs-3 {left: 65%;top: 31%;}
a.pinPoint.pinPs-4 {left: 80%;top: 47.2%;}
a.pinPoint.pinPs-5 {left: 65%;top: 31%;}

@media only screen and (max-height:1920px)
{
a.pinPoint.pinP-1 { left: 22%; top: 45%; }
a.pinPoint.pinP-2 { left: 33.5%; top: 92%;}
a.pinPoint.pinP-3 {left: 65%;top: 60%;}
a.pinPoint.pinP-4 {left: 80%;top: 54.2%;}
a.pinPoint.pinP-5 { left: 86.8%; top: 52%; }

a.pinPoint.pinPs-1 { left: 80%; top:20%; }
a.pinPoint.pinPs-2 { left: 80%; top:40%;}
a.pinPoint.pinPs-3 {left: 80%;top:60%;}
a.pinPoint.pinPs-4 {left: 30%;top: 0%;}
a.pinPoint.pinPs-5 { left: 50%;top:50%; }
}

@media only screen and (min-height:600px) and (max-height:900px)
{
	a.pinPoint.pinP-1 { left: 25%; top: 35%; }
	a.pinPoint.pinP-2 { left: 40%; top: 86%; }
	a.pinPoint.pinP-3 {left: 70%;top: 26%;}
	a.pinPoint.pinP-4 {left: 86%;top: 61%;}
	a.pinPoint.pinP-5 { left: 70%;top: 26%; }

    a.pinPoint.pinP-1 { left: 25%; top: 35%; }
    a.pinPoint.pinP-2 { left: 40%; top: 86%; }
    a.pinPoint.pinP-3 {left: 70%;top: 26%;}
    a.pinPoint.pinP-4 {left: 86%;top: 61%;}
    a.pinPoint.pinP-5 { left: 70%;top: 26%; }
}

.pinPoint:after{ content: ''; background: #fff00; width: 10px; height: 10px; position: absolute; left: 10px; top: 10px; border-radius: 100%; }
.pinPoint:before{content: '';border: .5px solid #fff00;width: 100%;height: 100%;position: absolute;left: 0;top: 0;border-radius: 100%;box-shadow: 1px 1px 0px rgba(0, 0, 0, 0);}
.pinPoint span {position: absolute; /*top: -40px;*/left: 55px;width:200px;height: auto;display: block;color: #fff;font-weight: 600;letter-spacing: 1px;text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.8);}

a.pinPoint.current span {/*color: #ffcf22;*/ color: #c5a47e;text-shadow: 1px 2px 1px rgba(0, 0, 0, 0);}
a.pinPoint.current:after{/*background: #ffcf22;*/ background: #00000; transition: all 500ms ease-in-out; }
a.pinPoint.current:before{/*border: 1.5px dashed #ffcf22;*/ border: 1.5px dashed #00000; animation: rotate_circle 2s linear infinite; box-shadow: 1px 1px 0px rgba(0, 0, 0, 0);transition: all 500ms ease-in-out; }

a.pinPointClose { position: fixed;right: 5%;top: 8vh;text-align: center;line-height: 6vh;font-size: 22px;height: 6vh;width: 6vh;/* border-radius: 100%; */background: url(../img/closeW.png) no-repeat rgba(0, 0, 0, 0.7) center center;background-size: 50%,50%;color: #fff;z-index: 99999999999 !important;box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.5);opacity: 0;display: none;cursor: pointer;transition: all 500ms ease-in-out; }

a.pinPointClose:hover { background: url(../img/closeW.png) no-repeat rgba(0, 0, 0, 0.9) center center; background-size: 70%,70%; transition: all 500ms ease-in-out;}

a.pinPointClose.current { opacity: 1; display: block; transition: all 500ms ease-in-out; }

/*
a.pinPoint.pinP-5 { left: 71%; top: 50.5%; animation: ripple 2s linear infinite; }
a.pinPoint.pinP-6 { left: 56%; top: 67%; animation: ripple 2s linear infinite; }
a.pinPoint.pinP-7 { left: 68%; top: 80%; animation: ripple 2s linear infinite; }

*/

.blur{ filter:blur(10px)} 



@keyframes rotate_circle {
 0% {
	 transform: rotate(0deg)
	}
 100% {
	 transform: rotate(360deg)
	}
}


span.ripple { display: block;position: absolute;left: 0;right: 0;top: 40%;width: 19vh;height: 19vh;margin: 0px auto;animation: ripple 5s linear infinite;border-radius: 100%;z-index: 999 !important; }
 	
@keyframes ripple {
 0% {
	 box-shadow: 0 0 0 5px rgba(255,255,255, 0.2), 0 0 0 10px rgba(255,255,255, 0.1);
	}
 100% {
	 box-shadow: 0 0 0 0 rgba(255,255,255, 0.1), 0 0 0 5px rgba(255,255,255, 0.1);
	}
}


 
.pp-content{ background: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0vh; height: 0vh; opacity: 0; z-index: 10; border-radius: 100%; /*border: 100vh solid rgba(255,255,255,0);*/ transition: all 500ms ease-in-out; }
.pp-content.current{ opacity: 1;  width: 65vh; height: 65vh; /*border: 0px solid rgba(255,255,255,.7);*/ transition: all 500ms ease-in-out; z-index: 99999; }

.pp-content .pp_imgwrp { overflow: hidden;padding:  10%;display: table-cell;vertical-align: middle;height: 65vh;text-align: center; }

.pp-content.current .pp_imgwrp{ }

.pp-content .pp_imgwrp p.supHead{text-transform: uppercase;letter-spacing: 6px;font-weight: 400;font-size: 15px;}
a.pinPoint.current { z-index: 11; transition: all 300ms ease-in-out; }
.pp-content p{ color: #000;font-size: 16px;line-height: 30px; letter-spacing: 1px;font-weight: 300; opacity: 0;}
.pp-content.current p { opacity: 1; transition: all 1s .5s ease-in-out; }
.pp-content h2 { color: #000; font-size: 4.5vh; margin-bottom: 20px; opacity: 0 }
.pp-content.current h2{ opacity: 1 ; transition: all 1s .2s ease-in-out; }
.pinP-1.current.ms3-hide { opacity: 0 !important; transition: all 1000ms ease-in-out; }
.pinP-1.current {  }

.pinP-1 .pp_imgwrp { /*background: url(../img/banner-01.jpg) no-repeat center center; background-attachment: fixed; background-size: cover;*/ }
.pinP-2 .pp_imgwrp { /*background: url(../img/banner-02.jpg) no-repeat center center; background-attachment: fixed; background-size: cover;*/ }
.pinP-3 .pp_imgwrp { /*background: url(../img/banner-03.jpg) no-repeat center center; background-attachment: fixed; background-size: cover;*/ }
.pinP-4 .pp_imgwrp { /*background: url(../img/banner-04.jpg) no-repeat center center; background-attachment: fixed; background-size: cover;*/ }

.pinP-1.current .pp_imgwrp ,
.pinP-2.current .pp_imgwrp ,
.pinP-3.current .pp_imgwrp ,
.pinP-4.current .pp_imgwrp { background-attachment: inherit; background-size: cover; }
  

/*//////////////////////*/
/*     StrengthSec      */
/*//////////////////////*/ 
.StrengthSec{ padding: 15vh 0 20vh 0; background: url(../img/about/StrengthBg.jpg) no-repeat center center; background-size: cover; clear: both; }
.StrengthSec h1{font-size: 5vh; font-weight: 700;}
.StrengthSec h3{font-size: 19px;letter-spacing: 1px;/* text-transform: uppercase; */font-weight: 700;background: #ecc837;margin: 0px;padding: 20px 0px;}
.StrengthImg {position: relative;width: 100%;height: 100%;border-top: 2px solid #fff00;margin-top: 10px;clear: both;background: #2b2b2b;}
.StrengthImg1 {position: relative;width: 100%;height: 100%;border-top: 2px solid #fff00;margin-top: 10px;clear: both;background: #272727;}
.StrengthImg img {margin: 0px auto;transform: scale(.85);}
.StrengthImg1 img {margin: 0px auto;transform: scale(.85);}
.StrengthImg:after {content: "";position: absolute;top: 0;left: 0;right: 0;margin: 0px auto;width: 2px;height: 15px;background: #fff00;}
.StrengthImg1:after {content: "";position: absolute;top: 0;left: 0;right: 0;margin: 0px auto;width: 2px;height: 15px;background: #fff00;}
.act-border{background-color: #ffd658cc;}




/********************/
/*    hero banner   */
/********************/

ul.CapabilitesList {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
ul.CapabilitesList li {
    display: inline-block;
    padding: 0px;
    background: #0b4180;
    border: 1px solid #0b4180;
    margin: 0px 7px 15px 7px;
    width: 16%;
    height: auto;
    float: left;
}
ul.CapabilitesList .iconImg {
    display: block;
    width: 100%;
    margin: 0px auto;
    background: #fff;
    padding: 5%  20%;
}
ul.CapabilitesList .iconImg img {
    margin: 0px auto;
}
ul.CapabilitesList span.iconTxt {
    text-align: center;
    display: table-cell;
    font-size: 1.5vh;
    background: rgb(11, 65, 128);
    color: #fff;
    height: 60px;
    width: 104vw;
    padding: 0px 8px;
    vertical-align: middle;
}
.Capabilites{ overflow-y: hidden; }



/*
inspired from http://codepen.io/Rowno/pen/Afykb
& https://jsfiddle.net/q0rgL8ws/

*/
div#carousel.HomeBannerSlider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
div#carousel.HomeBannerSlider .carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
    overflow:hidden;
	position: relative;
}

/*.carousel-fade .carousel-inner .item:after { content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);  }*/


div#carousel.HomeBannerSlider .carousel-inner:after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0);/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000000+50,000000+100&0.65+1,0+50,0.65+99 */background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 1%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 1%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, rgba(0,0,0,0.65) 1%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */}

div#carousel.HomeBannerSlider .item.active img {
    transition: transform 5000ms linear 0s;
    /* This should be based on your carousel setting. For bs, it should be 5second*/
    transform: scale(1.05, 1.05);
}
div#carousel.HomeBannerSlider .carousel-fade .carousel-inner .active {
  opacity: 1;
}

div#carousel.HomeBannerSlider .carousel-fade .carousel-inner .active.left,
div#carousel.HomeBannerSlider .carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}


div#carousel.HomeBannerSlider .carousel-fade .carousel-inner .next.left,
div#carousel.HomeBannerSlider .carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

div#carousel.HomeBannerSlider .carousel-fade .carousel-control {
  z-index: 2;

}





/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    div#carousel.HomeBannerSlider .carousel-fade .carousel-inner > .item.next,
   div#carousel.HomeBannerSlider  .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    div#carousel.HomeBannerSlider .carousel-fade .carousel-inner > .item.prev,
    div#carousel.HomeBannerSlider .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    div#carousel.HomeBannerSlider .carousel-fade .carousel-inner > .item.next.left,
    div#carousel.HomeBannerSlider .carousel-fade .carousel-inner > .item.prev.right,
    div#carousel.HomeBannerSlider .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}


.flip-container2 {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
}

.flip-container2:hover .back2,
.flip-container2.hover .back2 {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container2:hover .front2,
.flip-container2.hover .front2 {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-container2,
.front2,
.back2 {
    height: auto;
    margin-top: -3px;
    width: 30px;
    position: relative;
}

.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
    top: 0px;
}

.front2,
.back2 {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
    top: 0;
    right: 0;
}


.owl-dots {
    display: block;
    width: 100%;
    float: left;
    text-align: center;
    position: absolute;
    bottom: -80px;
}
.owl-dots .owl-dot {
    width: 5%;
    height: 3px;
    background: rgba(255,255,255,.5);
    display: inline-block;
    margin: 10px;
	transition:all 500ms ease-in-out;
}
.owl-dot.active {
    height: 4px;
    background: rgba(255,255,255,1);
	transition:all 500ms ease-in-out;
}
.navbar-toggle
{
    display: block;
}


.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}



.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

.bannerTxt {
    position: absolute;
    padding: 40px;
    float:left;
    min-height: 400px;
    background: #000000ab;
    color: #fff;
    opacity: 0;
    transition: all 200ms ease-in-out 1500ms;
}
.icon-pin
{
    position: absolute;
    z-index: 1;
    color: #fff;
    animation: beat .80s infinite alternate;
    border:1px solid #eee;
        border-radius: 50%;
    padding: 5px;
}
.icon-pin:hover
{
    animation: rotate_circle 2s 
    linear infinite; 
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0);
    transition: all 500ms ease-in-out;
}

/* Heart beat animation */
@keyframes beat{
    to { transform: scale(1.4); }
}

/*.recent-post-body
{
padding: 2px 10px 10px 38%;
}*/


.ba-hero-slider .slider-grid-content
{
    z-index: 3;
}
/* ----------------------------------------------------------------------
                           About Us
-------------------------------------------------------------------------*/
.about-blog { position: relative; }
.about-blog .img-1 { position: absolute; bottom: -100px; right: -100px; opacity: 0; transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; }
.about-box:hover .about-blog .img-1 { bottom: 0; right: 0; opacity: 1; }


.tab-pane
{
  position: absolute;  
}
.tab-pane img
{
  position: absolute;  
}
.tab-pane .tab-txt
{
  position: initial;
  letter-spacing: 00.1em;  
}

.tab-pane .SPtxtCont {
   opacity: 1;
    width: 30%;
    position: fixed;
    /* top: 0px; */
    left: 200px;
    min-height: 250px;
    bottom: 13px;
    z-index: 9999;
    /* background: rgba(255, 216, 61, 0.8); */
    padding: 30px;
    transition-delay: 1s;
    background: rgba(0, 0, 0, 0.77);
}
.h5-title
{
    font-family: 'montserratsemibold';
    font-size:13px;
    line-height: 1.35;
    font-weight: normal;
    color: #fff;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

  .intr{margin: 0 0 0 -42px;}
  .pln{margin: 0 0 0 -86px;}

  .project-details-info {
    background-color: #212121;
    padding: 1.8em 3.1em 4.8em;
    color: #fff;
}
.parallelogram {
    width: 150px;
    height: auto;
    margin-left: 7px;
    transform: skewx(10deg) translatex(2px);
    -webkit-transform: skewx(10deg) translatex(2px);
       -moz-transform: skewx(10deg) translatex(2px);
         -o-transform: skewx(10deg) translatex(2px);
   /* background: #000;*/
}