#banner{
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  justify-content: center;
  width: auto;
}
 
.alizarin {
    background: #e74c3c;
}
.backblack {
    background: #222222;
}

.amethyst {
    background: #9b59b6;
}

.emerald {
    background: #2ecc71;
}
.alaranjado {
    background: #FF6600;
}
.marron {
    background: #BB5E00;
}
 
.midnight-blue {
    background: #2c3e50;
}

.peter-river {
    background: #428BCA;
}

.dl {
    background: #f0f0f0;
    border-radius: 30px;
    position: relative;
    height: 240px;
}

 
.dl:before {
    content: " ";
    height: 20px;
    width: 20px;
    background: #ddd;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 20px;
    bottom: 5px;
    margin-left: -10px;
}
    
.dl .brand {
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 30px 15px;
    margin-top: 10px;
    text-align: center;
    min-height: 25px; 
}

.dl .discount {
    min-height: 40px;
    position: relative;
    font-size: 25px;
    line-height: 60px;
    text-align: center;
    font-weight: bold;
    padding: 2px 2px 0;
    color: white;
}
.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.backblack:after {
    border-top: 20px solid #222222;
}
.dl .discount.peter-river:after {
    border-top: 20px solid #428BCA;
}

.dl .discount.emerald:after {
    border-top: 20px solid #2ecc71;
}

.dl .discount.amethyst:after {
    border-top: 20px solid #9b59b6;
}

.dl .discount.alaranjado:after {
    border-top: 20px solid #FF6600;
}
.dl .discount.marron:after {
    border-top: 20px solid #BB5E00;
}

.dl .discount .type {
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: -30px;
}
.dl .discount .type a:link {text-decoration: none;color: #FFFFFF}
.dl .discount .type a:active {text-decoration: none;}
.dl .discount .type a:visited {text-decoration: none;color: #FFFFFF}
.dl .discount .type a:hover {text-decoration: underline;color: #FFFFFF}


.dl .descr {
    color: #999;
    margin-top: 10px;
    padding: 20px 15px; 
    text-align: center;
}
 
.dl .ends {
    padding: 0 15px;
    color: #f1c40f;
    margin-bottom: 10px;
}

.dl .coupon {
    min-height: 50px;
    text-align: center;
    
    text-transform: uppercase;
    font-weight: bold;
    font-size: 18px;
    padding: 20px 15px;
}

.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;
}
/*      contraste  -----------------------------------------------------------------------*/
.contraste .dl {
    background: #333333;
    border-radius: 30px;
    position: relative;
    height: 240px;
}
.contraste .dl .discount {
    min-height: 40px;
    position: relative;
    font-size: 25px;
    line-height: 60px;
    text-align: center;
    font-weight: bold;
    padding: 2px 2px 0;
    color: black;
}


.contraste .alizarin {
    background: #F0F0F0;
}

.contraste .amethyst {
    background: #F0F0F0;
}

.contraste .emerald {
    background: #F0F0F0;
}
.contraste .alaranjado {
    background: #F0F0F0;
}
.contraste .marron {
    background: #F0F0F0;
}
 
.contraste .midnight-blue {
    background: #F0F0F0;
}

.contraste .peter-river {
    background: #F0F0F0;
}

.contraste .dl .discount.alizarin:after {
    border-top: 20px solid #F0F0F0;
}

.contraste .dl .discount.peter-river:after {
    border-top: 20px solid #F0F0F0;
}

.contraste .dl .discount.emerald:after {
    border-top: 20px solid #F0F0F0;
}

.contraste .dl .discount.amethyst:after {
    border-top: 20px solid #F0F0F0;
}

.contraste .dl .discount.alaranjado:after {
    border-top: 20px solid #F0F0F0;
}
.contraste .dl .discount.marron:after {
    border-top: 20px solid #F0F0F0;
}

.contraste .dl .discount .type a:link {text-decoration: none;color: black}
.contraste .dl .discount .type a:active {text-decoration: none;}
.contraste .dl .discount .type a:visited {text-decoration: none;color: black}
.contraste .dl .discount .type a:hover {text-decoration: underline;color: black}
.contraste .dl .descr {
    color: white;
    margin-top: 10px;
    padding: 20px 15px; 
    text-align: center;
}