header.headerWhite{display:block; }
@media all and (max-width:799px){
    header.headerWhite{ display: none;}
}

.grid-container {  width: 100vw; height:calc(40vw + 150px);   position: relative;  z-index: 1;}
.grid { top:120px; left: 0; z-index: 1; width: 70vw; height: 60vw; margin: 0 15vw; position: absolute; transform: scale(2.7);}

.gridBlock,  .sideBlock { background-size:cover !important; background-color: darkgray !important; position: absolute; z-index:1;}

.grid .gridBlock.centerBlock { top: 15vw; left: 15vw; width: 40vw; height: 25vw;  background-color: #FFF !important;}
.grid .gridBlock .mainImage{position: relative; width: 100%; height:100%; background-size:cover !important; z-index: 2;}
.grid .gridBlock .blackPatch{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.5);  z-index: 3;}


.grid .gridBlock .sideBlock.la{top:0; right:42vw; width:13vw; height:17vw;}
.grid .gridBlock .sideBlock.lb{bottom:0; right:42vw; width:6vw; height:6vw;}

.grid .gridBlock .sideBlock.ta{bottom:27vw; right:0; width:12vw; height:12vw;}
.grid .gridBlock .sideBlock.tb{bottom:27vw; right:14vw; width:10vw; height:7vw;}
/*   .grid .gridBlock .sideBlock.tc{bottom:27vw; right:-7vw; width:5vw; height:5vw;} */
.grid .gridBlock .sideBlock.td{bottom:27vw; left:-30vw; width:35vw; height:12vh; background-size: contain !important; background-color:transparent !important; background-repeat: no-repeat;}

.grid .gridBlock .sideBlock.ra{bottom:0; left:42vw; width:12vw; height:17vw;}
.grid .gridBlock .sideBlock.rb{top:27vw; left:42vw; width:8vw; height:8vw;}

.bannerText{ position:fixed; display: flex; justify-content: center; align-items: center; left:0; top:0; right: 0; width:100vw; height:100vh; background:rgba(0,0,0,0.0); z-index: 99; }
.bannerText em{ vertical-align: top; color: #FFF; text-transform: uppercase; font-size: 28px; letter-spacing:7px; font-weight:600; padding-left: 35px; margin:25px 0 0 25px; position: relative; display: inline-block; }
.bannerText em:before{content:''; height:22px; width: 2px; background-color: #f16421; position: absolute; left:5px; top: 0px; transform: rotate(25deg);}

.fulstop{font-family: none !important;}

/* .bannerText strong{ position:fixed; left:0; top:42vh; right: 0;  white-space: nowrap;  width:710px; margin: auto; display: block; z-index: 102; font-size:50px; letter-spacing:7px; text-transform: uppercase; color: #FFF;}
.bannerText strong:after{content:''; width: 10px; height: 10px; border-radius: 50%; display: inline-block; background:#f16421;}
.textBg{ position:fixed; left: 49vw; top: 41vh; bottom: 0; width:180px; height:30px; background:#f16421; z-index: 101;} */

/* .sec1Height{height:calc(40vw + 135px);} */

.meet_the_specialist{width:39.5vw; margin:0 auto 75px; position: relative; z-index: 2; }
.meet_the_specialist strong{font-size:65px; font-weight: 900; line-height:75px; letter-spacing:7px; text-transform: uppercase;}
.meet_the_specialist strong:after{content:''; width: 10px; height: 10px; border-radius: 50%; display: inline-block; background:#f16421;}
.meet_the_specialist strong span{ position: relative; display: inline-block;}
.meet_the_specialist strong span em{position: absolute ; left: 0; top: 0; width:180px; height:30px; background:#f16421; z-index: -1;}
.meet_the_specialist>span{display: block; padding-top: 20px; font-size: 20px; line-height: 25px; margin-bottom:60px;}



@media screen  and (max-device-width:1030px) and (orientation:  portrait){
  .bannerText{  background:rgba(0,0,0,1); flex-wrap: wrap;  }
  .bannerText em{  display: block; text-align: center; margin:20px 0 0; padding-left: 0;}
  .bannerText em:before{ display: none;}
  .bannerText article{ text-align: center;}
  bannerText img{ display: inline-block;}
}

@media all and (max-width:1150px){  
  .meet_the_specialist strong {font-size: 40px; line-height: 48px;}
  .meet_the_specialist strong span em {height: 23px;}
  .meet_the_specialist>span { display: block; padding-top: 10px; font-size: 16px; line-height: 20px; margin-bottom: 35px;}
  }


  @media all and (max-width:1100px){
    /* .sec1Height{height:calc(53vw + 125px);} */
    .grid-container { height:calc(50vw + 150px);  }
    .grid {top:120px;  width:100vw;  height:75vw;  margin: 0; }
    .grid .gridBlock.centerBlock { left:20vw; width: 60vw; height: 37.5vw;}

    .grid .gridBlock .sideBlock.la{top:0; right:62vw; width:16vw; height:25vw;}
    .grid .gridBlock .sideBlock.lb{bottom:0; right:62vw; width:11vw; height:11vw;}
    
    .grid .gridBlock .sideBlock.ta{bottom:39vw; right:0; width:14vw; height:14vw;}
    .grid .gridBlock .sideBlock.tb{bottom:39vw; right:16vw; width:12vw; height:8.4vw;}
    /*   .grid .gridBlock .sideBlock.tc{bottom:27vw; right:-7vw; width:5vw; height:5vw;} */
    .grid .gridBlock .sideBlock.td{bottom:36vw; left:-20vw; width:35vw; height:10vw; background-size: contain !important; background-position: 0 0; background-color:transparent !important; background-repeat: no-repeat;}
    
    .grid .gridBlock .sideBlock.ra{bottom:0; left:62vw; width:16vw; height:20vw;}
    .grid .gridBlock .sideBlock.rb{top:40vw; left:62vw; width:8vw; height:8vw;}

    .meet_the_specialist { width: 56.5vw }
    .meet_the_specialist>span br{ display: none;}

    }
	
	

    @media all and (max-width:799px){
  
      .grid { top:120px; left: 0; z-index: 1; width: 100vw; height: 60vw; margin: 0 ; position: absolute; transform: scale(1);}
      .grid .gridBlock .blackPatch{display: none;}
      .bannerText{ position: relative; z-index: 95; background: url(../images/main-image.jpg) no-repeat 77% 50%; background-size: cover; }
      .bannerText:before{content:''; width: 100%; height: 100%;; position: absolute; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 1;}
      .bannerText article{ position: relative; z-index: 2;}
    }

    @media all and (max-width:600px){
      .meet_the_specialist strong {font-size:23px; line-height:30px; letter-spacing: 5px;}
      .meet_the_specialist strong span em {height:15px;}
 
    }

    
/* ----------------Section 2 start -------------------- */

.sec2Holder{ position:relative; margin-bottom:130px;}
.ropeSelector{ position: absolute; right:100px; top:55px;}
.sec2{background: rgb(255,255,255);  background: linear-gradient(128deg, rgba(255,255,255,1) 0%, rgba(225,225,225,1) 35%, rgba(214,214,214,1) 100%); width: 40vw; height: 80vh; margin: 0 auto 100px; position: relative;}
.sec2>em{ width:10vw; height:8vw; background: url(../images/icon.png) no-repeat 0 0; background-size:auto 100%; position: absolute; bottom:-4vw; left: 100px;}

.findYourRope{ position: absolute; left:-275px; top:0; bottom: 0; margin: auto; display: block; height: 225px; text-align: center;}

.findYourRope strong{font-size:55px; line-height:65px; letter-spacing:7px; text-transform: uppercase; margin-bottom: 15px;}
.findYourRope strong em{color:#f16421; font-style: normal;}
.findYourRope strong span{display:inline-block; position: relative; padding-bottom: 18px;}
.findYourRope strong span:nth-child(1):after{content:''; width:45px; height:4px; display: inline-block; background:#000; position: absolute; left:5px; bottom: 0;}
.findYourRope strong span:nth-child(2):before{content:''; width:8px; height:4px; display: inline-block; background:#000; position: absolute; left:5px; bottom: 0;}
.findYourRope strong span{ position: relative;}
.findYourRope>span{display: block; padding-top: 25px; font-size: 20px; line-height: 30px; margin-bottom:60px; font-weight:400; }
.findYourRope>span span{ text-align: right; display: inline-block;}
.sec2Img{ position: absolute; right:0; bottom:0; width: 50%;}

@media all and (max-width:1150px){
  .findYourRope strong {font-size:35px; line-height:40px; letter-spacing: 7px; margin-bottom: 15px;}
  .findYourRope>span { display: block; padding-top: 25px; font-size: 17px; line-height: 24px; margin-bottom: 30px; font-weight: 400;}
  .findYourRope {left: -200px;}
  }

  @media all and (max-width:1100px){
    .sec2{ width:60vw; height: 60vh; margin: 0 0 100px 30vw;}
    .ropeSelector{ display: none;}
    .findYourRope {left: -25vw;}
  }
  @media all and (max-width:600px){
    .findYourRope strong{font-size:23px;     letter-spacing: 5px;}
    .findYourRope {top:100px; bottom: auto;}

    .sec2>em {
      width: 20vw;
      height: 16vw;
      bottom: -8vw;
  }


  }


/* ----------------Section 2 end -------------------- */

.ourClientsHolder{}
.clientHead{ margin-bottom:30px; margin-right: 50vw; text-align: right;}
.clientHead strong{font-size:36px; line-height:40px; letter-spacing:4px; text-transform: uppercase; margin-bottom: 15px;}
.clientHead strong em{color:#f16421; font-style: normal;}
.clientHead span{display: block; padding:15px 25px 0 0; font-size: 20px; line-height: 30px;  font-weight:400;}

.clientSlider{  border-left: 1px solid #eeeeee; margin-bottom: -1px; display: flex; height: 120px;}
.clientSlider aside{ border-bottom: 1px solid #eeeeee; border-top: 1px solid #eeeeee; border-right: 1px solid #eeeeee; width: 20%; display: flex; justify-content: center; align-items: center;}
.clientSlider aside img{ display: inline-block; }

.cs_dex{}
.cs_mob{ display: none;}

@media all and (max-width:1100px){
  .clientHead strong{font-size:30px; line-height:35px; letter-spacing:4px;}
}

@media all and (max-width:800px){
  .cs_dex{ display: none;}
.cs_mob{ display: block;  display: flex; flex-wrap: wrap;}
.cs_mob aside{margin-bottom: -1px; height: 120px; border-bottom: 1px solid #eeeeee; border-top: 1px solid #eeeeee; border-right: 1px solid #eeeeee; width:33.3333333333%; display: flex; justify-content: center; align-items: center;}
.cs_mob aside a{display: block; text-align: center;}
.cs_mob aside img{ display: inline-block; max-width: 80%; }
}

@media all and (max-width:600px){
  .clientHead { margin-right: 25vw;}
  .clientHead strong{font-size:22px; line-height:25px; letter-spacing:4px;}
  .clientHead span{font-size:17px; line-height:25px;}
 .clientSlider aside img{ display: inline-block; width: 15vw; }

 .cs_mob aside{ width:50%;}

}



/* ----------------Section 3 end -------------------- */


.solutionProvider{ height: 100vh; position: relative; text-align: center; /* background:url(../images/spBg2.jpg) no-repeat 50% 50%; */ background-size: 100vw ;}
.solutionProvider:after{content:''; height: 100%; width: 1px; display: inline-block; vertical-align: middle;}
.solutionProvider article{ display: inline-block; vertical-align: middle; width: 90%; max-width:750px; z-index:2; position: relative; color: #FFF; }
.solutionProvider article h2{font-size:36px; line-height:40px; letter-spacing:3px; text-transform: uppercase; margin-bottom:25px;}
.solutionProvider article p{display: block; font-size:18px;  font-weight:300; padding: 0 10%; margin-bottom:30px;}
.solutionProvider article ul{ margin-bottom:50px;}
.solutionProvider article ul li{ display: inline-block; text-align:left; padding-left:66px; position:relative;font-size:18px; line-height: 30px; margin: 0 20px 20px;}
.solutionProvider article ul li strong{ display:block; font-size: 36px;}
.solutionProvider article ul li:before{content:''; width: 61px; height: 60px; position: absolute; left: 0; top:3px;}
.solutionProvider article ul li.sp-icon1:before{ background: url(../images/icon-set1.png) no-repeat 0 0; }
.solutionProvider article ul li.sp-icon2:before{background: url(../images/icon-set1.png) no-repeat -60px 0; left: -5px;}
.solutionProvider .spBg{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; width:50vw; height:50vh; background:url(../images/spBg.jpg) no-repeat 50% 50%; background-size: 100vw ; z-index: 1;}


@media all and (max-width:600px){
  .solutionProvider article h2{font-size:26px;}
  .solutionProvider .spBg {background-size:cover;}
  
}


/* ----------------Section 4 end -------------------- */


.watchVideo{height: 100vh; position: relative; text-align: center; }
.watchVideo:after{content:''; height: 100%; width: 1px; display: inline-block; vertical-align: middle;}
.watchVideo article{ display: inline-block; vertical-align: middle; width: 90%; max-width:42vw; z-index:2; position: relative; text-align: left;  }
.watchVideo article div{ font-size: 26px; font-weight: 300; line-height:28px; text-transform: uppercase; margin-bottom:0px;  letter-spacing:3px; display: inline-block; position: relative; }

.watchVideo article a{ position: absolute; left:0; bottom: -90px;}
.watchVideo .wvBg{position: absolute; right:25vw; bottom: 0; top: 0; margin: auto; width:50vh; height:50vh; background:url(../images/wvBg.png) no-repeat 50% 50%; background-size:cover; z-index: 1;}
.watchVideo .wvBg .wvicon{position: absolute; right:0px; top:35px; width:104px;  z-index: 3;}

@media all and (max-width:1370px){
.watchVideo .wvBg .wvicon{right:-36px;}
.watchVideo .wvBg{right:20vw;}
.watchVideo article{ max-width:52vw;}
}

@media all and (max-width:799px){
  .watchVideo{height:auto; }
  .watchVideo article {max-width:100vw; text-align: center;}
  .watchVideo article div{ margin-bottom:5vh; display: block;}
  .watchVideo .wvBg{position: relative; right:auto; bottom: 0; top: 0; margin:10vh auto 5vh; width:50vw; height:50vw; }
  .watchVideo .wvBg .wvicon{right:0; top: 2vh; width: 12vw;}
  .watchVideo article a{ position: relative; left:auto; bottom:auto;}
}
@media all and (max-width:600px){
  .watchVideo article div{ font-size:18px; line-height:24px; }
}
/* ----------------Section 5 end -------------------- */


.mdSpeech_holder{height: 100vh; position: relative; padding-top:10vh}
.mdSpeech_bg{height: 80vh; position: relative; background: #dcdcdc url(../images/md-bg.jpg) no-repeat 50% 50%; background-size: cover; margin: 0 auto;}
.mdSpeech{ text-align: right; width:425px; position: absolute; top:17vh; right:-130px; font-size: 18px; font-weight: 300; padding-left: 30px;}
.mdSpeech>strong{ color: #000; font-weight:400;}
.mdSpeech:before{content:'\201C'; position: absolute; left: -5px; top:4px; color: #f16421; font-size:70px; }
.mdSpeech:after{content:'\201D'; color: #f16421;  font-size: 25px; line-height: 8px; position: relative; margin-right: -19px; top: 5px;}
.mdName{ position: absolute; top:0px; right:100%; width: 205px; padding-top:48vh; font-size: 11px; }
.mdName:after{content:''; position: absolute; top:20px; right: 0; bottom:50px; width: 1px; background: #c2c2c2;}
.mdName strong{ font-size: 16px; font-weight: 500; display: block;}
.md{position: absolute; bottom: 0; right: -70px; height: 45vh;}

@media all and (max-width:799px){

  .mdSpeech_holder{height:auto; position: relative; padding-top:10vh; }
  .mdSpeech_bg{height:auto; width: 90vw; position: relative; background: #dcdcdc url(../images/md-bg.jpg) no-repeat 50% 50%; background-size: cover; margin: 0 auto 50px; padding-top: 50px; text-align: center;}

  .mdSpeech{ text-align: center; max-width:425px; width:70%; margin: 0 auto; position: relative; top:auto; right:auto; font-size: 18px; font-weight: 300; padding-left: 0px;}
 /*  .mdSpeech>strong{ color: #000; font-weight:400;}*/
  .mdSpeech:before{ left: -26px; top:11px;}
  .mdSpeech>strong:after{content:'\201D'; color: #f16421;  font-size: 25px; line-height: 8px; position: relative; margin-right: -19px; top: 5px;} 
  .mdName{ position: relative; top:0px; right:auto; width:auto; padding:50px 0; font-size: 11px; }
  .mdName:after, .mdSpeech:after{ display: none;}

  .md{position: relative; bottom: 0; right:auto; height: 45vh; display: inline-block;}

}

/* ----------------Section 5 end -------------------- */


.services{ display: flex;padding-left: 5vw; margin-top:15vh;}
.services>aside:first-of-type{ width: 300px; flex: 0 0 360px; height:60vh; position: relative;}
.services>aside:last-of-type{flex:1; overflow: hidden;}
.serviceSlide {display: flex;}
.serviceSlide li{ position:relative; padding:0 7px; }
.serviceSlide li img{ height:60vh; display: block; position:relative; z-index:1;}
.serviceSlide li div{ position: absolute; left:10%; top:0; bottom:0; margin: auto; z-index: 2; width:400px; height: 100px;}
.serviceSlide li div h3{color: #FFF; font-size:25px; line-height: 30px; letter-spacing:3px; text-transform: uppercase; margin-bottom: 10px; overflow-wrap: break-word; width: 75%;}
.serviceItem div span{color: #e2e2e2; display: block; margin-bottom: 3px; font-size: 14px; padding-left: 15px; position: relative; margin-bottom: 2px; transition: all .2s ease-in-out;}
.serviceItem div span:hover{color: #fff; text-decoration: underline; transition: all .2s ease-in-out;}
.serviceSlide li div span:after{ content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: #fff; border-radius: 50%;}
.serviceSlide li:after{
	position: absolute;
	content: "";
	background: rgba(0,0,0,0.4);
	left: 8px;
	top: 0;
	height: 100%;
	width: 97%;
	z-index: 1;
}


.services_info{ padding-top: 30px;}
.services_info h2{color: #000; font-size:36px; line-height: 35px;letter-spacing:4px; text-transform: uppercase; margin-bottom:30px; padding-bottom:30px; position: relative;}
.services_info h2::before{content:''; width: 50px; height: 3px; background: #000; position: absolute; left: 0; bottom: 0;}
.services_info h2::after{content:''; width:10px; height: 3px; background: #000; position: absolute; right: 15px; bottom: 0;}
.services_info h2 em {color: #f16421; font-style: normal;}
.services_info span{color: #525252; font-size:16px; line-height:22px; display: block; margin-bottom:35px;}
.services_link{ position: absolute; left: 0; bottom: 0;}

@media all and (max-width:799px){
  .services{ margin-top:10vh;}
  .services_info h2{font-size:25px; line-height:30px;letter-spacing:4px; }
  .services{ display: block; padding-left:0vw; margin-top:15vh;}
  .services>aside:first-of-type{ width:100vw; flex:0; height:auto; position: relative; margin-bottom:50px;}
  .services>aside:last-of-type{ width:100vw; flex:0; overflow: hidden;}
  .services_link{ position: relative; left: 0; bottom: 0;}
  .serviceSlide li img{ height:40vh;}
  
  .services>aside:first-of-type {text-align: center;}
  .services>aside:last-of-type {width:95vw; margin-left: 5vw;}
  .services_info h2::before{ right: 0; margin: auto;}
  .services_info h2::after{ display: none;}
  .serviceSlide li div h3{width: 65%}
  .serviceSlide li:after{ height: 100%; width: 95%;}
  .serviceSlide li:last-child img{
    width: 298px
  }
}
@media all and (max-width:500px){
  .serviceSlide li:after{ height: 100%; width: 96%;}
}