.spoty{

  background: linear-gradient(45deg, #232323, #1DB954);

}
.youtb{
  background: linear-gradient(45deg, #232323, #FF0000);

}
.mini{
  background: linear-gradient(45deg, #232323, #000000);

}
html,
body {
  position: relative;
  height: 100%;
  overflow-x: none;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;

}
  .cont2 {
    width: 80%;
    height:400px;
    margin-left: auto;
    margin-right: auto;
  }
  .slid2 {

    cursor:pointer;
    background-size: cover;
      background-position: center;}
  .cont {
   width: 100%;
   height: 500px;
   margin-left: auto;
   margin-right: auto;
 }

 .slid {
   cursor:pointer;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-position: center;

   text-align: center;
   font-size: 18px;
   background: #fff;
   width:50%;
   height: calc((100% - 30px) / 2);

   /* Center slide text vertically */
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
 }
 #socialmedia{
    padding-inline-start: 0px;
}
 .modal-title{
     color: #fff;}  
     .close {
      float: right;
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1;
      color: red;
      text-shadow: 0 1px 0 #fff;
      opacity: .5;
    } 
    .modal-content{
      height:100%; width:100%; background-color: transparent;border: 1px solid rgba(0,0,0,0);
    }