/* CSS Document */
.cont-ram {
    background-color: #9B090C;
}
.cont-sur {
    background-color: #5095EC;
    padding-top: 100px;
    padding-bottom: 100px;
}
.carousel .item {
    width: 100%; /*slider width*/
    height: 400px; /*slider height*/
}
.carousel .item img {
    width: 100%; /*img width*/
	height: 400px; /*slider height*/
}
.navbar-custom {
    background-color: #fff1e5;
}

.mysecondcolor {
	color: firebrick;
	
}

.myvertical-center {
	top: 50%;
	transform: translateY(-50%);
	  position: absolute;
}

ul {
display: block;
list-style-type: disc;
margin-before: 0;
margin-after: 0;
margin-start: 0;
margin-end: 0;
padding-start: 0px; }

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
  object-fit: cover; //this will avoid the skewing the image
  overflow: hidden; // overflow image is hidden
}