html h1 {
   text-align: center;
   letter-spacing: 2px;
   font-weight: bold;
}

html h2 {
   text-align: center;
   color: #193244;
}



#exampleSlider {
   position: relative;


}

#exampleSlider img {
   height: 100px;
   width: 100px;
}

@media (max-width: 767px) {
   #exampleSlider {}
}

#exampleSlider .MS-content {
   margin: 15px 5%;
   overflow: hidden;
   white-space: nowrap;


}

@media (max-width: 767px) {
   #exampleSlider .MS-content {
      margin: 0;
   }
}

#exampleSlider .MS-content .item {
   display: inline-block;
   height: 100%;
   overflow: hidden;
   position: relative;
   vertical-align: top;


   border-right: none;
   width: 20%;
}

@media (max-width: 1200px) {
   #exampleSlider .MS-content .item {
      width: 25%;
   }
}

@media (max-width: 992px) {
   #exampleSlider .MS-content .item {
      width: 33.3333%;
   }
}

@media (max-width: 767px) {
   #exampleSlider .MS-content .item {
      width: 50%;
   }
}

#exampleSlider .MS-content .item p {
   font-size: 30px;
   text-align: center;
   line-height: 1;
   vertical-align: middle;
   margin: 0;
   padding: 10px 0;
}

#exampleSlider .MS-controls button {
   position: absolute;
   border: none;
   background: transparent;
   font-size: 30px;
   outline: 0;
   top: 35px;
}

@media (max-width: 767px) {
   #exampleSlider .MS-controls button {
      display: none;
   }
}

#exampleSlider .MS-controls button:hover {
   cursor: pointer;
}

#exampleSlider .MS-controls .MS-left {
   left: 10px;
}

@media (max-width: 992px) {
   #exampleSlider .MS-controls .MS-left {
      left: -2px;
   }
}

#exampleSlider .MS-controls .MS-right {
   right: 10px;
}

@media (max-width: 992px) {
   #exampleSlider .MS-controls .MS-right {
      right: -2px;
   }
}