@font-face {font-family: 'Diodrum'; src: url('Diodrum-Regular.woff2') format('woff2'), url('Diodrum-Regular.woff') format('woff'); font-weight: 400; font-style: normal;}
@font-face {font-family: 'Diodrum'; src: url('Diodrum-Bold.woff2') format('woff2'), url('Diodrum-Bold.woff') format('woff'); font-weight: 700; font-style: normal;}

/*.area-4 {display: none;}
*/

.area-4 .tit {font:700 1.375em/1 'Pluto', Arial;}

.banner-slots {width: 1280px; margin:60px auto; font-family: 'Diodrum'; font-weight: 400;}
.banner-slots a {color: #000;}
.banner-slots a:hover {color: #000;}
.banner-slots li {position: relative; text-align: center; margin: 0 4px; display: inline-block; width: 200px;}
.banner-slots .thumb {width: 200px; overflow: hidden;}
.banner-slots .benefit {position: absolute; width: 170px; height: 170px; left: 16px; top: 16px; border-radius: 100%; overflow: hidden;}
.banner-slots .benefit:hover .animation {bottom: 20px}
.banner-slots .benefit > div {background: #c11a26; width: 130px; height: 130px; display: block; color: #fff; border-radius: 100%; text-align: center; position: absolute; left: 20px; bottom: -130px; transition: all 0.45s;}
.banner-slots .animation {position: relative; width: 100%; height: 100%;}
.banner-slots .animation.slot-economito {background: #ffffff; color:#c11a26;}
.banner-slots .animation.slot-retira {background: #ffffff; color:#5428a1;}
.banner-slots .animation .from {font-size: 12px; position: absolute; top: 25px; left: 0; width: 100%;}
.banner-slots .animation .amount {font-size: 58px; font-weight: bold; position: absolute; left: 15px; bottom: 15px;}
.banner-slots .animation .percent {font-weight: bold; font-size: 40px; position: absolute; right: 12px; bottom: 30px;}
.banner-slots .animation .discount {position: absolute; right: 0; bottom: 20px; font-size: 14px; width: 100%;}

.banner-slots .slot-mercado .text1 {font-size: 16px; position: absolute; top: 44px; left: 0; width: 100%; line-height: 20px;}
.banner-slots .slot-mercado .text2 {font-size: 26px; font-weight: bold; position: absolute; left: 0; bottom: 42px; line-height: 25px; width: 100%;}

.banner-slots .slot-economito .text1 {font-size: 16px; position: absolute; top: 32px; left: 0; width: 100%; line-height: 20px;}
.banner-slots .slot-economito .text2 {font-size: 24px; font-weight: bold; position: absolute; left: 0; bottom: 30px; line-height: 24px; width: 100%;}

.banner-slots .slot-retira .text1 {font-size: 16px; position: absolute; top: 34px; left: 0; width: 100%; line-height: 18px;}
.banner-slots .slot-retira .text2 {font-size: 26px; font-weight: bold; position: absolute; left: 0; bottom: 32px; line-height: 25px; width: 100%;}

.banner-slots .slot-price .from {top: 35px;}
.banner-slots .slot-price .sign {font-size: 16px; font-weight: bold; position: absolute; left: 10px; bottom: 45px;}
.banner-slots .slot-price .discount {font-size: 28px; font-weight: bold; position: absolute; bottom: 38px;}
.banner-slots .slot-price .decimals {font-size: 16px; font-weight: bold; right: 7px; bottom: 45px; position: absolute;}

.banner-slots h3 {color: #000}
.banner-slots.marcas .tit {margin-bottom: 25px;}
.banner-slots.marcas .thumb {width: 180px; overflow: hidden; border-radius: 100%; margin: 0 auto; border: 1px solid #999999}
.banner-slots.marcas .benefit {width: 180px; height: 180px; left: 10px; top: 0px;}
.banner-slots.marcas .benefit > div {left: 25px;}
.banner-slots.marcas .benefit:hover .animation {bottom:24px}