* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
}

.cont {
  width: 85%;
  height: 85%;
  position: relative;
 /* background: #355C7D;
  !* fallback for old browsers *!
  background: -webkit-linear-gradient(to right, #C06C84, #6C5B7B, #355C7D);
  !* Chrome 10-25, Safari 5.1-6 *!
  background: linear-gradient(to right, #C06C84, #6C5B7B, #355C7D);
  !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!
  overflow: hidden;*/
}
.cont img {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  animation: fade 1s;
}
.cont .arrow {
  z-index: 10;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: auto;
  right: auto;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem;
  color: cornsilk;
  opacity: 0.5;
  transition: opacity 1s;
}
.cont .arrow:hover {
  cursor: pointer;
  opacity: 1;
}
.cont .arrow-left {
  left: 2%;
}
.cont .arrow-right {
  right: 2%;
}
.cont .dots {
  position: absolute;
  margin: auto;
  top: auto;
  bottom: 2%;
  left: 0;
  right: 0;
  width: 7rem;
  height: auto;
  z-index: 5;
}
.cont .dots .dot {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-content: center;
  justify-content: center;
  color: cornsilk;
}

@keyframes fade {
  from {
    opacity: 0.1;
  }
  to {
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .cont {
    background-color: white !important;
  }
}