.cont_header_slider { position: relative; height:89vh;  }
.slider { position: relative; height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
 will-change: transform; cursor: all-scroll;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none }
.slider.animation {
-webkit-transition: -webkit-transform 750ms ease-in-out; transition: -webkit-transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out; transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out}
.slider.animation .slide__darkbg {
-webkit-transition: -webkit-transform 750ms ease-in-out; transition: -webkit-transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out;transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out}
.slider.animation .slide__text {
-webkit-transition: -webkit-transform 750ms ease-in-out; transition: -webkit-transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out; transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out}
.slider.animation .slide__letter {
-webkit-transition: -webkit-transform 750ms ease-in-out; transition: -webkit-transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out; transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out}
.slide { position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden}
.slide--1 { left: 0%   }
.slide--2 { left: 100% }
.slide--3 { left: 200% }
.slide--4 { left: 300% }
.slide--5 { left: 400% }
.slide--6 { left: 500% }
.slide--7 { left: 600% }
.slide--8 { left: 700% }
.slide--9 { left: 800% }
.slide--10 { left: 900% }
.slide__darkbg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0); will-change: transform;  z-index: 10 }
.slide__text-wrapper { 
 position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center;
 justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; z-index: 15}
.slide__letter {
 position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center;
 align-items: center;  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 0; left: 0; width: 100%;
 height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-text-fill-color: transparent !important; filter: alpha(opacity=0);
  -webkit-background-clip: text !important; font-size: 20vw; font-weight: 600; color: #000; z-index: 2; will-change: transform; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none}
.slide__text {
 font-size: 7vw; font-weight: 600; text-transform: uppercase; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
 letter-spacing: 12px; color: #fff; will-change: transform; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none}
.slide__text:nth-child(odd) { z-index: 2  }
.slide__text:nth-child(even) { z-index: 1 }

.slide--1__darkbg { left: 0%; background: url('../images/Law-firm-in-ghana-lawyer.jpg') center center no-repeat;
  background-size: cover; background-position: 0px center, 0px center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform }
.slide--1__darkbg:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(21, 21, 21, 0.66) }
.slide--1__letter {background: url('../images/Law-firm-in-ghana-lawyer.jpg') center center no-repeat; background-position: 0px center, 0px center; background-size: cover }

.slide--2__darkbg { left: -50%; background: url("../images/top-law-firm-in-ghana.jpg") center center no-repeat;
  background-size: cover; background-position: 0px center, 0px center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform}
.slide--2__darkbg:after {  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(237, 237, 237, 0.65) }
.slide--2__letter { background: url("../images/top-law-firm-in-ghana.jpg") center center no-repeat; background-position: 0px center, 0px center; background-size: cover}

.slide--3__darkbg {
  left: -100%; background: url("../images/accra-kumasi-ghana-law-office.jpg") center center no-repeat; background-size: cover; background-position: 0px center, 0px center;
  -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform }
.slide--3__darkbg:after {  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11, 15, 39, 0.83) }
.slide--3__letter { background: url("../images/accra-kumasi-ghana-law-office.jpg") center center no-repeat; background-position: 0px center, 0px center; background-size: cover}


.slide--4__darkbg { left: -150%; background: url("../images/Atlanta-city-legal-office.jpg") center center no-repeat;
  background-size: cover; background-position: 0px center, 0px center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform}
.slide--4__darkbg:after {  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(237, 237, 237, 0.65) }
.slide--4__letter { background: url("../images/Atlanta-city-legal-office.jpg") center center no-repeat; background-position: 0px center, 0px center; background-size: cover}

.slide--5__darkbg {
 left: -200%; background: url("../images/India-continent-People-Taj-Mahal.jpg") center center no-repeat; background-size: cover; background-position: 0px center, 0px center;
 -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform;}
.slide--5__darkbg:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(40, 41, 48, 0.8);}
.slide--5__letter { background: url("../images/India-continent-People-Taj-Mahal.jpg") center center no-repeat; background-position: 0px center, 0px center; background-size: cover}

.slide--6__darkbg {
 left: -250%; background: url("../images/law-firm-international-clients.jpg") center center no-repeat; background-size: cover; background-position: 0px center, 0px center;
 -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform }
.slide--6__darkbg:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11, 15, 39, 0.83)}
.slide--6__letter { background: url("../images/law-firm-international-clients.jpg") center center no-repeat; background-position: 0px center, 0px center; background-size: cover}

.slide--7__darkbg {
  left: -300%; background: url("../images/law-firm-london-south-africa-clients.jpg") center center no-repeat; background-size: cover; background-position: 0px center, 0px center;
  -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform }
.slide--7__darkbg:after {  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11, 15, 39, 0.83) }
.slide--7__letter { background: url("../images/law-firm-london-south-africa-clients.jpg") center center no-repeat; background-position: 0px center, 0px center; background-size: cover}

.slide--8__darkbg {
  left: -350%; background: url("../images/law-firm-south-africa-clients.jpg") center center no-repeat; background-size: cover; background-position: 0px center, 0px center;
  -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform }
.slide--8__darkbg:after {  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11, 15, 39, 0.83) }
.slide--8__letter { background: url("../images/law-firm-south-africa-clients.jpg") center center no-repeat; background-position: 0px center, 0px center; background-size: cover}

.slide--9__darkbg {
  left: -400%; background: url("../images/international-law-firm.jpg") center center no-repeat; background-size: cover; background-position: 0px center, 0px center;
  -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform }
.slide--9__darkbg:after {  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11, 15, 39, 0.83) }
.slide--9__letter { background: url("../images/international-law-firm.jpg") center center no-repeat; background-position: 0px center, 0px center; background-size: cover}


ul.nav { position: absolute; bottom: 25px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); list-style-type: none; z-index: 10}
ul.nav li { display: inline-block}
.nav__slide {  position: relative; display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #fff; margin-left: 10px; cursor: pointer }
@media screen and (max-width: 400px) {
  .nav__slide { width: 22px; height: 22px; }
}
.nav__slide:hover:after { -webkit-transform: translate(-50%, -50%) scale(1, 1); transform: translate(-50%, -50%) scale(1, 1); opacity: 1}
.nav__slide:after {
 content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0, 0);
 transform: translate(-50%, -50%) scale(0, 0); width: 50%; height: 50%; border-radius: 50%; background-color: #fff; opacity: 0;
 -webkit-transition: 300ms; transition: 300ms }
.nav__slide--1 { margin-left: 0 }
.nav-active:after { -webkit-transform: translate(-50%, -50%) scale(1, 1); transform: translate(-50%, -50%) scale(1, 1); opacity: 1}
.side-nav { position: absolute; width: 10%; height: 100%; top: 0; z-index: 20; cursor: pointer; opacity: 0; -webkit-transition: 300ms; transition: 300ms }
.side-nav:hover { opacity: .1;}
.side-nav--right { right: 0; background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%) }
.side-nav--left {
  left: 0;
  background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
}