@charset "utf-8";

/* ==========================================================================
   Banner "Ταμπελα Τιτλου" (homepage_banner kind = 31)
   Μονο η βασικη μορφη ειναι εδω - τα χρωματα και το border-radius ερχονται
   inline απο τη βαση (πεδια label_color / label_background /
   label_border_color / label_border_radius).
   ========================================================================== */

.titleLabelBanner {
    width: 100%;
}

/* Στοιχηση απο το πεδιο label_align: 1=αριστερα, 2=κεντρο, 3=δεξια.
   Το κενο πανω/κατω μπαινει στο wrapper (και οχι σαν margin στο ιδιο το pill)
   ωστε να μη "μαζευεται" με margin collapsing απο διπλανα banner. */
.titleLabelWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 15px 0;
}

.titleLabelWrap.alignLeft {
    justify-content: flex-start;
}

.titleLabelWrap.alignCenter {
    justify-content: center;
}

.titleLabelWrap.alignRight {
    justify-content: flex-end;
}

.titleLabel {
    display: inline-block;
    padding: 8px 22px;
    /* προεπιλογες - τις αντικαθιστα το inline style οταν συμπληρωθουν τα πεδια */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-family: 'Syne-SemiBold', sans-serif;
    font-size: 12px;
    letter-spacing: 1.4px;
    line-height: 1.3;
    text-transform: uppercase;
    text-align: center;
}

@media (max-width: 767px) {
    .titleLabel {
        padding: 7px 18px;
        font-size: 11px;
        letter-spacing: 1.2px;
    }
}