/* Margins ========================================================================== */
/* Paddings ========================================================================== */
/* Directions ========================================================================== */
/* Floats ========================================================================== */
/* Text Alignment ========================================================================== */
/* Transforms ========================================================================== */
/* ========================================================================== Icon Library Mixin ========================================================================== */
/* ========================================================================== Shadows ========================================================================== */
/* ========================================================================== Media List ========================================================================== */
.t-MediaList { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; flex-direction: row; }

.t-MediaList-item { width: 100%; display: flex; border-bottom: 1px solid; }

.t-MediaList-item:last-child { border-bottom-width: 0; }

.t-MediaList-iconWrap, .t-MediaList-body, .t-MediaList-badgeWrap { padding: 16px; }

@media (max-width: 640px) { .t-MediaList-iconWrap, .t-MediaList-body, .t-MediaList-badgeWrap { padding: 8px; } }

.t-MediaList-body { flex-grow: 1; }

.t-MediaList-iconWrap, .t-MediaList-badgeWrap { flex-shrink: 0; align-items: start; justify-content: center; }

/* ========================================================================== Icon ========================================================================== */
.t-MediaList-iconWrap { display: none; }

.t-MediaList-icon { color: inherit; display: flex; align-items: center; justify-content: center; border-radius: 100%; }

/* Icon Shapes ========================================================================== */
.t-MediaList--iconsSquare .t-MediaList-icon { border-radius: 0; }

.t-MediaList--iconsRounded .t-MediaList-icon { border-radius: 12.5%; }

/* ========================================================================== Text ========================================================================== */
.t-MediaList-title, .t-MediaList-desc { margin: 0; }

.t-MediaList-title { font-size: 1.4rem; line-height: 2.0rem; font-weight: 500; }

.t-MediaList--large .t-MediaList-title { font-size: 1.6rem; line-height: 2.4rem; }

.t-MediaList-desc { display: none; font-size: 1.2rem; line-height: 1.6rem; }

.t-MediaList--large .t-MediaList-desc { font-size: 1.4rem; line-height: 2.0rem; }

/* ========================================================================== Badge ========================================================================== */
.t-MediaList-badgeWrap { display: none; }

.t-MediaList-badge { display: inline-block; font-size: 1.2rem; line-height: 2.0rem; background-color: rgba(0, 0, 0, 0.05); padding: 0 8px; border-radius: 2px; min-width: 32px; text-align: center; }

.t-MediaList-badge:empty { display: none; }

/* ========================================================================== Link ========================================================================== */
.t-MediaList-itemWrap { display: flex; transition: background-color .1s; width: 100%; }

.t-MediaList-itemWrap:hover { text-decoration: none; }

.t-MediaList-itemWrap:focus { outline: none; }

/* ========================================================================== Modifier: Show Icons --- Shows Icons ========================================================================== */
.t-MediaList--showIcons .t-MediaList-icon { width: 32px; height: 32px; }

.t-MediaList--showIcons .t-MediaList-iconWrap { display: flex; padding-right: 0; }

.u-RTL .t-MediaList--showIcons .t-MediaList-iconWrap { padding-right: 1.6rem; padding-left: 0; }

.t-MediaList--showIcons .t-MediaList-iconWrap .fa:after { background-color: inherit; color: inherit; }

.t-MediaList--showIcons.t-MediaList--large .t-MediaList-icon { width: 64px; height: 64px; line-height: 64px; }

.t-MediaList--showIcons.u-colors .t-MediaList-icon { color: #FFF !important; }

/* ========================================================================== Modifier: Show Badge --- Show Badge ========================================================================== */
.t-MediaList--showBadges .t-MediaList-badgeWrap { display: flex; }

/* When showing badges, but not showing description, center align the badges */
.t-MediaList--showBadges:not(.t-MediaList--showDesc) .t-MediaList-badgeWrap { align-items: center; }

/* ========================================================================== Modifier: Horizontal (Table Based) --- Arrange list items horizontally using table layout ========================================================================== */
.t-MediaList--horizontal .t-MediaList-item { display: flex; border-bottom-width: 0; border-right: 1px solid #F0F0F0; }

@media (max-width: 768px) { .t-MediaList--horizontal .t-MediaList-item { display: block; width: 50%; float: left; border-bottom-width: 1px; } }

@media (max-width: 480px) { .t-MediaList--horizontal .t-MediaList-item { display: block; width: 100%; float: none; border-bottom-width: 1px; border-right-width: 0; } }

.t-MediaList--horizontal .t-MediaList-item:last-child { border-right: none; }

/* ========================================================================== Modifier: Blocks --- Blocks ========================================================================== */
.t-MediaList--cols { overflow: hidden; border-style: solid; border-width: 1px 0 0 1px; }

.t-MediaList--cols .t-MediaList-item { border-color: inherit; border-bottom-width: 0; position: relative; border-style: solid; border-width: 0 1px 1px 0; }

.t-MediaList--cols .t-MediaList-item .t-MediaList-desc { overflow: hidden; text-overflow: ellipsis; }

.t-MediaList--cols.t-MediaList--2cols .t-MediaList-item { width: 50%; }

.t-MediaList--cols.t-MediaList--2cols .t-MediaList-item:nth-child(2n+1) { clear: both; }

.t-MediaList--cols.t-MediaList--3cols .t-MediaList-item { width: 33.333%; }

.t-MediaList--cols.t-MediaList--3cols .t-MediaList-item:nth-child(3n+1) { clear: both; }

.t-MediaList--cols.t-MediaList--4cols .t-MediaList-item { width: 25%; }

.t-MediaList--cols.t-MediaList--4cols .t-MediaList-item:nth-child(4n+1) { clear: both; }

.t-MediaList--cols.t-MediaList--5cols .t-MediaList-item { width: 20%; }

.t-MediaList--cols.t-MediaList--5cols .t-MediaList-item:nth-child(5n+1) { clear: both; }

@media (max-width: 768px) { .t-MediaList--cols .t-MediaList-item { width: 50% !important; } }

@media (max-width: 480px) { .t-MediaList--cols .t-MediaList-item { width: 100% !important; } }

/* ========================================================================== Modifier: Show Description --- Show Description ========================================================================== */
.t-MediaList--showDesc .t-MediaList-desc { display: block; }

/* When hiding description, make sure to vertically align everything to middle ========================================================================== */
.t-MediaList:not(.t-MediaList--showDesc) .t-MediaList-body { display: flex; align-items: center; }