/*
 HaberPortal News Badge Sprite
 Source artwork: supplied 45-badge image
 Sprite: 5 columns × 9 rows
 Cell: 320 × 180 px
*/

.haber-badge {
    display: inline-block;
    background-image: url('https://cdn.habersitem.com.tr/statics/images/habersitem-badges.webp');
    background-repeat: no-repeat;
    /* 5 columns = 500%, 9 rows = 900% */
    background-size: 500% 900%;
    background-color: transparent;
    vertical-align: middle;
}

/* SIZES */
/* Original Size */
.haber-badge-base { width: 320px; height: 180px; flex: 0 0 320px; }
/* Large - for big sliders */
.haber-badge-lg { width: 176px; height: 99px; flex: 0 0 176px; }
/* Medium - for previews and standard sliders */
.haber-badge-md { width: 120px; height: 67.5px; flex: 0 0 120px; }
/* Small (xs) - for grid, boxed, etc */
.haber-badge-xs { width: 96px; height: 54px; flex: 0 0 96px; }
/* Nano - for admin picker grids */
.haber-badge-nano { width: 72px; height: 40.5px; flex: 0 0 72px; }

/* 
 * POSITIONS 
 * Columns (0-4): 0%, 25%, 50%, 75%, 100%
 * Rows (0-8): 0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%
 */

/* ROW 1 */
.badge-son-dakika { background-position: 0% 0%; }
.badge-flas-haber { background-position: 25% 0%; }
.badge-ozel-haber { background-position: 50% 0%; }
.badge-editorun-sectikleri { background-position: 75% 0%; }
.badge-son-dakika-saatli { background-position: 100% 0%; }

/* ROW 2 */
.badge-en-cok-okunan { background-position: 0% 12.5%; }
.badge-gundem { background-position: 25% 12.5%; }
.badge-sicak-gelisme { background-position: 50% 12.5%; }
.badge-ozel-dosya { background-position: 75% 12.5%; }
.badge-video-haber { background-position: 100% 12.5%; }

/* ROW 3 */
.badge-foto-galeri { background-position: 0% 25%; }
.badge-yorum { background-position: 25% 25%; }
.badge-ekonomi { background-position: 50% 25%; }
.badge-spor { background-position: 75% 25%; }
.badge-dunya { background-position: 100% 25%; }

/* ROW 4 */
.badge-politika { background-position: 0% 37.5%; }
.badge-saglik { background-position: 25% 37.5%; }
.badge-egitim { background-position: 50% 37.5%; }
.badge-hava-durumu { background-position: 75% 37.5%; }
.badge-teknoloji { background-position: 100% 37.5%; }

/* ROW 5 */
.badge-otomobil { background-position: 0% 50%; }
.badge-seyahat { background-position: 25% 50%; }
.badge-cevre { background-position: 50% 50%; }
.badge-yasam { background-position: 75% 50%; }
.badge-magazin { background-position: 100% 50%; }

/* ROW 6 */
.badge-kultur-sanat { background-position: 0% 62.5%; }
.badge-siyaset { background-position: 25% 62.5%; }
.badge-asayis { background-position: 50% 62.5%; }
.badge-hukuk { background-position: 75% 62.5%; }
.badge-bilim { background-position: 100% 62.5%; }

/* ROW 7 */
.badge-canli-yayin { background-position: 0% 75%; }
.badge-ozel-roportaj { background-position: 25% 75%; }
.badge-yeni-haber { background-position: 50% 75%; }
.badge-bilgilendirme { background-position: 75% 75%; }
.badge-reklam { background-position: 100% 75%; }

/* ROW 8 */
.badge-analiz { background-position: 0% 87.5%; }
.badge-populer { background-position: 25% 87.5%; }
.badge-trend { background-position: 50% 87.5%; }
.badge-manset { background-position: 75% 87.5%; }
.badge-duyuru { background-position: 100% 87.5%; }

/* ROW 9 */
.badge-toplanti { background-position: 0% 100%; }
.badge-surdurulebilirlik { background-position: 25% 100%; }
.badge-etkinlik { background-position: 50% 100%; }
.badge-is-dunyasi { background-position: 75% 100%; }
.badge-yasam-2 { background-position: 100% 100%; }