.deals {
    padding:5% 0
}
#heading {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 60px;
    color: #2980b9;
    text-shadow: 2px 2px 5px #2980b9;
}
.alizarin {
    background:#e74c3c
}
.amethyst {
    background:#9b59b6
}
.emerald {
    background:#2ecc71
}
.midnight-blue {
    background:#2c3e50
}
.peter-river {
    background:#3498db
}
.dl {
    background:#f0f0f0;
    padding:30px 0;
    border-radius:20px;
    position:relative
}
.dl:before {
    content:" ";
    height:20px;
    width:20px;
    background:#ddd;
    border-radius:20px;
    position:absolute;
    left:50%;
    top:20px;
    margin-left:-10px
}
.dl{
    height:600px;
}

.dl .discount {
   display: table-cell;
   width: 100vw;
   margin-block-end: 0;
    vertical-align: middle;
    height: 220px;
}

.dl .brand {
    text-transform:uppercase;
    letter-spacing:3px;
    margin-top:10px;
    min-height:100px;
    text-align: center;
}
.dl .discount {
    position:relative;
    font-size:80px;
    line-height:80px;
    text-align:center;
    font-weight:700;
    padding:20px 15px 0;
    color:#f1c40f
}
.dl .discount:after {
    content:" ";
    border-right:20px solid transparent;
    border-left:20px solid transparent;
    position:absolute;
    bottom:-20px;
    left:20%
}
.dl .discount.alizarin:after {
    border-top:20px solid #e74c3c
}
.dl .discount.peter-river:after {
    border-top:20px solid #3498db
}
.dl .discount.emerald:after {
    border-top:20px solid #2ecc71
}
.dl .discount.amethyst:after {
    border-top:20px solid #9b59b6
}
.dl .discount .type {
    font-size:20px;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-top:-30px
}
.dl .descr {
    color:#999;
    margin-top:10px;
    padding:20px 15px
}
.dl .ends {
    padding:0 15px;
    color:#f1c40f;
    margin-bottom:30px
}
.dl .coupon {
    height:50%;

    text-align:center;
    text-transform:uppercase;
    font-weight:700;
    font-size:18px;
    padding:20px 15px
}

.open-code {
    margin-top: 50px;
    margin-left: 33%;
}
.dl .coupon a.open-code {
    color:#16a085
}
.dl .coupon .code {
    letter-spacing:1px;
    border-radius:4px;
    margin-top:10px;
    padding:10px 15px;
    color:#f1c40f;
    background:#f0f0f0
}
.col-lg-4 {
    margin-bottom: 3%;
}

.disc-img {
    display: block;
    width: 50vw;
    margin-left: 25vw;
  }

@media screen and (max-width: 569px) {
    .open-code {
        margin-left: 36%;
    }
    .disc-img {
        width: 90vw;
        margin-left: 5vw;
      }
}

@media screen and (max-width: 850px) {
    .disc-img {
        width: 70vw;
        margin-left: 15vw;
      }
}