body,
html {
  height: 100%;
}

body.slider__body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.slider__container {
  position: fixed;
  display: block;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 500ms ease-in-out;
  transition: -webkit-transform 500ms ease-in-out;
  -o-transition: transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out;
}

.slider__page {
  position: relative;
  width: 100%;
  height: 100%;
}

.slider__indicators {
  position: fixed;
  left: 18px;
  top: 50%;
  z-index: 2;
  margin: 0;
  padding: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.slider__indicator {
  display: block;
  width: 10px;
  height: 10px;
  margin: 10px 0;
  border-radius: 100px;
  background-color: #fff;
  cursor: default;
}
.slider__indicator--active {
  opacity: 0.3;
}


#norwegian {
  background: linear-gradient(225deg, #ffc27d, #ff8e93);
}
#french {
  background: linear-gradient(#f3defc, #63a3e6);
}
#spanish {
  background: linear-gradient(#d2fcad, #22eaeb);
}
#hindi{
  background: linear-gradient(#f0bed4, #a163f5);
}
#mandarin {
  background: linear-gradient(#65cce1, #6365ec);
}

section > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 7vw;
  font-family: sans-serif;
  text-transform: uppercase;
  color: #fff;
}




html, body{
  width:100%;
  height:100%;
  background-color:#fff;
}
.carousel-inner,.carousel,.item,.container,.fill {
  height:100%;
  width:100%;
  background-position:center center;
  background-size:cover;
}
.slide-wrapper{display:inline;}
.slide-wrapper .container{padding:0px;}

/*------------------------------ vertical bootstrap slider----------------------------*/

.carousel-inner> .item.next ,  .carousel-inner > .item.active.right{ transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0);  top: 0;}
.carousel-inner > .item.prev ,.carousel-inner > .item.active.left{ transform: translate3d(0,-100%, 0); -webkit-transform: translate3d(0,-100%, 0);  -moz-transform: translate3d(0,-100%, 0);-ms-transform: translate3d(0,-100%, 0); -o-transform: translate3d(0,-100%, 0); top: 0;}
.carousel-inner > .item.next.left , .carousel-inner > .item.prev.right , .carousel-inner > .item.active{transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);; -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); top:0;}

/*------------------------------- vertical carousel indicators ------------------------------*/
.carousel-indicators{
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
  height:20px;
  right:10px; left:auto;
  width:auto;
}
.carousel-indicators li{display:block; margin-bottom:5px; border:1px solid #00a199; }
.carousel-indicators li.active{margin-bottom:5px; background:#00a199;}