/**
 * =============================================================
 * @package		RAXO List Module Layout
 * -------------------------------------------------------------
 * @copyright	Copyright (C) 2009-2021 RAXO Group
 * @link		https://www.raxo.org
 * @license		RAXO Commercial License
 * 				This file is forbidden for redistribution
 * =============================================================
 */


/* ----- RESET & DEFAULT Styles ----- */
.raxo-list {
	box-sizing: border-box;
}
	.raxo-list *,
	.raxo-list ::before, .raxo-list ::after {
		box-sizing: inherit;
	}
.raxo-list article,
.raxo-list h3, .raxo-list h4,
.raxo-list img,
.raxo-list a {
	margin: 0; padding: 0;
	background: transparent none;
	border: 0 none;
}
.raxo-list a {
	text-decoration: none;
	outline: 0;
	transition: all .2s ease-out;
}
	.raxo-list .raxo-container a:hover {
		color: #333333 !important;
		background-color: transparent;
		border-bottom: 1px solid #333333;
	}



/* ----- Module BLOCK ----- */
.raxo-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 24px; padding: 12px 6px 8px;
	background-color: #e7e7e7;
	border-radius: 4px;
}

/* --- Block NAME --- */
.raxo-list .raxo-block-name {
	flex: 1 1 120px;
	margin: 8px 0; padding: 0 4px 0 16px;
	font-size: 18px; font-weight: bold;
	line-height: 20px;
	color: #565656;
}
	.raxo-list .raxo-block-name a {
		color: #565656;
	}

/* --- Block BUTTON --- */
.raxo-list .raxo-block-button {
	flex: 0 1 auto;
	margin: 8px 0; margin-left: auto;
	padding: 0 8px;
	font-size: 11px; font-weight: bold;
	line-height: 20px;
	color: #fcfcfc; text-transform: uppercase;
	border-radius: 3px;
}
	.raxo-list .raxo-block-button a {
		margin-left: -8px; padding: 0 4px 0 8px;
		font-weight: bold;
		color: #fcfcfc;
	}
	.raxo-list .raxo-block-button a:hover {
		color: #e7e7e7;
	}
	.raxo-list .raxo-block-button a::after {
		content: "";
		display: block;
		float: right;
		margin-right: -8px;
		width: 32px; height: 19px;
	}



/* ----- Module ITEMS ----- */
.raxo-list .raxo-container {
	flex: 1 100%;
	background-color: #fcfcfc;
	border-radius: 3px;
	overflow: hidden;
}
.raxo-list article {
	position: relative;
	padding: 8px 36px 8px 16px;
	overflow: hidden;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #eeeeee;
	transition: background 0.5s ease;
}
	.raxo-list article:first-child {
		border-top: none;
	}
	.raxo-list article:last-child {
		border-bottom: none;
	}
	.raxo-list article:hover {
		background-color: #f6f6f6;
	}
.raxo-list .raxo-wrap {
	display: flex;
	flex-wrap: wrap-reverse;
	margin: -6px;
}
	.raxo-list .raxo-wrap > div {
		margin: 6px;
	}



/* ----- Item IMAGE ----- */
.raxo-list .raxo-image {
	flex: 0 1 auto;
}
	.raxo-list .raxo-image img {
		max-width: 100%;
		height: auto;
		border-radius: 3px;
	}



/* ----- CONTENT Styles ----- */
.raxo-list .raxo-content {
	flex: 1 1 160px;
}
.raxo-list .raxo-item-nor .raxo-content {
	display: flex;
	flex-wrap: wrap;
}
	.raxo-list .raxo-item-nor .raxo-date {
		flex: 1 1 56px;
	}
	.raxo-list .raxo-item-nor .raxo-right {
		flex: 4 1 160px;
	}


/* ----- Item DATE ----- */
.raxo-list .raxo-date {
	font-weight: bold;
	color: #4c4c4c;
}
	.raxo-list .raxo-item-nor .raxo-date {
		margin-right: 12px;
		font-size: 12px; line-height: 18px;
	}


.raxo-list .raxo-title {
	font-size: 14px; line-height: 18px;
	font-weight: bold;
}
.raxo-list .raxo-text {
	font-size: 13px; line-height: 1.44;
	color: #4d4d4d;
}
	.raxo-list .raxo-info + .raxo-text {
		margin-top: 8px;
}


.raxo-list .raxo-readmore {
	display: block;
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 32px;
	border: none !important;
	transition: background-color 0.5s ease;
}
	.raxo-list .raxo-block-button a::after,
	.raxo-list .raxo-readmore {
		background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAALCAQAAABl/0P6AAAAhklEQVR4AaXSsQ2EMBBE0ZWpgOi4tnBRFOAL6WFacgUcEnLg6FMBEvJMA/9ptfE0JVWtMTwSlTWcqahbhB/dImhRcwh8aS5hExZhA4ugWX+HwMzpEnYhdGkaJOwAXEyjFziEuvLwBQ6gk70fyMYPWPmPmpVfaEY+QsXJR1C8fFK18on6Jn8DiGp9eY482VAAAAAASUVORK5CYII=") no-repeat 0 50%;
		/*background: transparent url("arrow.png") no-repeat 0 50%;*/
		background-size: 64px 11px;
	}
	.raxo-list .raxo-block-button a::after,
	.raxo-list article:hover .raxo-readmore {
		background-position: -32px 50%;
	}



/* ----- INFO Fields ----- */
.raxo-list .raxo-info {
	font-size: 12px;
	color: #737373;
}
	.raxo-list .raxo-info + h3 {
		margin-top: 4px !important;
	}
	.raxo-list .raxo-info span {
		margin-right: 7px; padding-right: 10px;
		border-right: 1px solid #dedede;
	}
	.raxo-list .raxo-info span:last-child {
		margin-right: 0; padding-right: 0;
		border-right: none;
	}

.raxo-list .raxo-comments,												/* Content ELEMENTS */
.raxo-list .raxo-hits,
.raxo-list .raxo-rating {
	padding-left: 18px !important;
	background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAA2CAQAAABdaGCaAAABpUlEQVR4Ae3UMWiTQRjG8StVKYJKB7XR4iC66JChaMHJIi5FwaGbVexvUdSltA6OFgfTQRMR0dVNd3Uo4qYohaqgTgUHiyk1AWm76BBfwgceJWhx1ffhOJ7nz3dw4cmlvx+b1DS0coWvRR6w6omSJFcpshsBNXKU4UZALamjWn+EnY/tax+r6rG+NWh3ZBXFVZpavtsl2e6hlmZxlXyMWFDRU3yfI3u8Npgf/3/WOUqmzPkWmjOllP18xiypOawndEgt3FgBXTHvoDA22iz2cPPGBRryWb+ky00rVlV1S/ojHUo+GJZCo17ZZqsXzrX9CW+Tj062zW0T7X3cHamtcnJM3b4OX4ZiTPqkrMsty1bVdGcw8Kiv7hq0xQ4DrrmcwcA7XffGimXvTDvwD3do7f80R5f8iNUJ6rXoVKzeTrDinhSrkkFXzXhuVlOpeH9mw89EHnDRtKMG7JeEYh8IPx15wCPqRqRc4euRpxhlC85m6Ez48q8mTLovTFGQBy7kNXnktA0u+mKvZEI1h3Xnvfe0qMdxz3L4UrQ3e/eWftMhw+so2E8Y1gmBpoGRlAAAAABJRU5ErkJggg==") no-repeat 0 0;
	/*background: transparent url("icons.png") no-repeat 0 0;*/
	background-size: 14px 54px;
}
	.raxo-list .raxo-comments {											/* Item COMMENTS */
		background-position: 0 0;
	}
	.raxo-list .raxo-hits {												/* Item HITS */
		background-position: 0 -20px;
	}
	.raxo-list .raxo-rating {											/* Item RATING */
		background-position: 0 -40px;
	}


/* ----- ITEMS Styles ----- */
.raxo-list .raxo-item-nor .raxo-info span {
	padding-top: 1px;
	font-size: 11px;
}



/* ----- RESPONSIVE Breakpoints ----- */
@media (max-width: 480px) {
	.raxo-list .raxo-block-button {
		order: 4;
	}
	.raxo-list article {
		padding-right: 28px;
	}
	.raxo-list .raxo-readmore {
		width: 24px;
		background-position: -4px 50%;
	}
	.raxo-list article:hover .raxo-readmore {
		background-position: -36px 50%;
	}
}



/* ----- HIGH RESOLUTION Media Queries ----- */
@media
	only screen and (-webkit-min-device-pixel-ratio: 1.3),
	only screen and (min-device-pixel-ratio: 1.3),
	only screen and (min-resolution: 120dpi)
{
	.raxo-list .raxo-comments,
	.raxo-list .raxo-hits,
	.raxo-list .raxo-rating {
		background-image: url(icons@3x.png);
	}
	.raxo-list .raxo-block-button a::after,
	.raxo-list .raxo-readmore {
		background-image: url(arrow@3x.png);
	}
}



/* ----- COLOR Schemes ----- */

/* --- Red Color (default) --- */
.raxo-list .raxo-block-name a:hover,
.raxo-list .raxo-container a {color: #cc1f1f !important;}
.raxo-list article:hover .raxo-readmore {background-color: #efc4c2;}
.raxo-list .raxo-block-button {background-color: #cc1f1f;}

/* --- Pink Color --- */
.list-pink .raxo-block-name a:hover,
.list-pink .raxo-container a {color: #d24087 !important;}
.list-pink article:hover .raxo-readmore {background-color: #f1ccdc;}
.list-pink .raxo-block-button {background-color: #d24087;}

/* --- Orange Color --- */
.list-orange .raxo-block-name a:hover,
.list-orange .raxo-container a {color: #d94d16 !important;}
.list-orange article:hover .raxo-readmore {background-color: #f2cfc0;}
.list-orange .raxo-block-button {background-color: #d94d16;}

/* --- Yellow Color --- */
.list-yellow .raxo-block-name a:hover,
.list-yellow .raxo-container a {color: #ebc300 !important;}
.list-yellow article:hover .raxo-readmore {background-color: #f7edbb;}
.list-yellow .raxo-block-button {background-color: #ebc300;}

/* --- Green Color --- */
.list-green .raxo-block-name a:hover,
.list-green .raxo-container a {color: #4d9926 !important;}
.list-green article:hover .raxo-readmore {background-color: #cfe2c4;}
.list-green .raxo-block-button {background-color: #4d9926;}

/* --- Blue Color --- */
.list-blue .raxo-block-name a:hover,
.list-blue .raxo-container a {color: #0a55bf !important;}
.list-blue article:hover .raxo-readmore {background-color: #bfd1ea;}
.list-blue .raxo-block-button {background-color: #0a55bf;}

/* --- Light Blue Color --- */
.list-lightblue .raxo-block-name a:hover,
.list-lightblue .raxo-container a {color: #3598dc !important;}
.list-lightblue article:hover .raxo-readmore {background-color: #c9e2f2;}
.list-lightblue .raxo-block-button {background-color: #3598dc;}

/* --- Violet Color --- */
.list-violet .raxo-block-name a:hover,
.list-violet .raxo-container a {color: #6c3aad !important;}
.list-violet article:hover .raxo-readmore {background-color: #d7cbe6;}
.list-violet .raxo-block-button {background-color: #6c3aad;}

/* --- Turquoise Color --- */
.list-turquoise .raxo-block-name a:hover,
.list-turquoise .raxo-container a {color: #1bb39e !important;}
.list-turquoise article:hover .raxo-readmore {background-color: #c3e9e2;}
.list-turquoise .raxo-block-button {background-color: #1bb39e;}

/* --- Gray Color --- */
.list-gray .raxo-block-name a:hover,
.list-gray .raxo-container a {color: #1a1a1a !important;}
.list-gray article:hover .raxo-readmore {background-color: #c3c3c1;}
.list-gray .raxo-block-button {background-color: #1a1a1a;}