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


/* ----- RESET & DEFAULT Styles ----- */
.raxo-grid {
	box-sizing: border-box;
	overflow: hidden;
}
	.raxo-grid *,
	.raxo-grid ::before, .raxo-grid ::after {
		box-sizing: inherit;
	}
.raxo-grid article,
.raxo-grid h3, .raxo-grid h4,
.raxo-grid img,
.raxo-grid a {
	margin: 0; padding: 0;
	background: transparent none;
	border: 0 none;
}
.raxo-grid a {
	outline: 0;
	text-decoration: none;
	transition: all .25s;
}
	.raxo-grid a:hover {
		text-decoration: underline;
	}



/* ----- Module BLOCK ----- */
.raxo-grid {
	margin: 20px 0 24px;
	border: solid var(--grid-color-900);
	border-width: 2px 0 1px;
}
.raxo-grid .raxo-header {
	display: flex;
	flex-wrap: wrap;
	padding: 8px 8px 12px 16px;
	background-color: var(--grid-color-100);
	border-bottom: 1px solid var(--grid-color-300);
}

/* ----- Block NAME ----- */
.raxo-grid .raxo-block-name {
	flex: 1 192px;
	font-size: 20px; font-weight: bold;
	line-height: 24px;
	color: var(--grid-color-600);
}
	.raxo-grid .raxo-block-name a {
		color: var(--grid-color-600);
	}

/* --- Block INTRO --- */
.raxo-grid .raxo-block-intro {
	flex: 1 192px;
	font-size: 16px;
	line-height: 20px;
	color: var(--grid-color-400);
}
	.raxo-grid .raxo-block-name + .raxo-block-intro {
		flex-basis: 100%;
		margin-top: 8px;
		order: 1;
	}

/* ----- Block BUTTON ----- */
.raxo-grid .raxo-block-button {
	padding: 5px 8px 6px 16px;
	font-size: 14px; line-height: 20px;
	color: var(--grid-color-400);
	background-color: var(--grid-color-100);
	border-top: 1px solid var(--grid-color-300);
}
	.raxo-grid .raxo-block-button a {
		color: var(--grid-color-400);
	}



/* ----- MODULE Items ----- */
.raxo-grid .raxo-normal {
	display: flex;
	flex-wrap: wrap;
	margin: 20px -12px 0;
}
	@media (max-width: 479.98px) {
		.raxo-grid .raxo-normal {
			flex-flow: column nowrap;
		}
	}
.raxo-grid article {
	flex: 1 1 25%;
	min-width: 200px;
	padding: 0 12px 24px;
}
	.raxo-grid article:empty {
		padding: 0 !important;
		height: 0 !important;
	}
.raxo-grid .raxo-wrap {
	display: flex;
	flex-wrap: wrap;
	height: 100%;
	/*overflow: hidden;*/
	transition: all .25s;
}
	.raxo-grid .raxo-wrap .raxo-media {
		flex: 0 1 auto;
	}
	.raxo-grid .raxo-wrap .raxo-content {
		flex: 1;
		min-width: 144px;
	}


/* ----- Item IMAGE ----- */
.raxo-grid .raxo-image {
	position: relative;
	display: inline-block;
	padding: 7px;
	background-color: var(--grid-color-100);
	border: 1px solid var(--grid-color-300);
	transition: all .25s;
}
	.raxo-grid .raxo-wrap:hover .raxo-image {
		background-color: var(--grid-color-primary);
		border-color: var(--grid-color-primary);
	}
	.raxo-grid .raxo-image img {
		display: block;
		max-width: 100%; height: auto;
	}

.raxo-grid .raxo-category {
	position: absolute;
	left: -1px; bottom: -1px;
	padding: 1px 4px 1px 8px;
	font-size: 11px; line-height: 14px;
	text-transform: uppercase;
	color: var(--grid-color-100);
	background-color: var(--grid-color-600);
}
	.raxo-grid .raxo-category:before {
		content: '';
		position: absolute;
		top: 0; right: -5px;
		border: 8px solid transparent;
		border-left: 5px solid var(--grid-color-600); border-right: none;
	}
	.raxo-grid .raxo-category a {
		text-decoration: none;
		color: var(--grid-color-100);
	}


/* ----- Item CONTENT ----- */
.raxo-grid .raxo-title {
	margin: 4px 0;
	font: normal 20px/22px "Times New Roman", "Times", serif;
	text-transform: none;
}
	.raxo-grid .raxo-title a {
		color: var(--grid-color-900);
	}
.raxo-grid .raxo-text {
	margin-top: 8px;
	font-size: 14px; line-height: 18px;
	color: var(--grid-color-600);
}
	.raxo-grid .raxo-text a {
		color: var(--grid-color-600);
	}
.raxo-grid .raxo-readmore {
	font-size: .86em; font-weight: bold;
}


/* ----- Item FIELDS ----- */
.raxo-grid .raxo-meta {
	display: flex;
	flex-wrap: wrap;
	font-size: 13px; line-height: 16px;
	color: var(--grid-color-400);
}
	.raxo-grid .raxo-meta:before {
		content: '';
		flex-grow: 1;
		order: 1;
	}
	.raxo-grid .raxo-meta span {
		display: inline-block;
	}
	.raxo-grid .raxo-meta > span:not(:last-of-type) {
		margin-right: 10px;
	}

.raxo-grid .raxo-rating {
	margin: 0 -2px;
	align-self: center;
}
	.raxo-grid .raxo-rating span {
		position: relative;
		width: 11px; height: 9px;
		margin: 0 2px;
		background-color: var(--grid-color-100);
		border: 1px solid rgba(var(--grid-color-rgba-lg));
		border-radius: 2px;
	}
	.raxo-grid .raxo-star span {
		position: absolute;
		margin: -1px;
		background-color: var(--grid-color-primary);
		border-color: rgba(var(--grid-color-rgba-dk));
	}

.raxo-grid .raxo-comments {
	position: relative;
	display: inline-block;
	vertical-align: text-top;
	margin-left: 4px; padding: 0 3px;
	min-width: 24px;
	font-size: 13px; line-height: 18px;
	text-align: center;
	color: var(--grid-color-100);
}
	.raxo-grid .raxo-comments::before,
	.raxo-grid .raxo-comments::after {
		content: '';
		position: absolute; z-index: -1;
	}
	.raxo-grid .raxo-comments::before {
		top: 0; left: 0; right: 0;
		height: 18px;
		background-color: var(--grid-color-600);
		border-radius: 3px;
	}
	.raxo-grid .raxo-comments::after {
		bottom: -4px; left: 4px;
		height: 0;
		border-color: var(--grid-color-600) transparent transparent;
		border-style: solid; border-width: 4px 4px 0 0;
	}



/* ----- VIEW Switch ----- */
.raxo-grid .raxo-switch {
	margin-left: auto;
	display: flex;
	align-items: flex-start;
}
.raxo-grid .raxo-switch div {
	margin: 0 8px;
	width: 32px; height: 24px;
	opacity: .45;
	transition: all .25s;
	border: 1px solid var(--grid-color-300);
}
	.raxo-grid .raxo-switch-grid {
		background: url(ico-grid.svg) no-repeat 50% 50%;
	}
	.raxo-grid .raxo-switch-list {
		background: url(ico-list.svg) no-repeat 50% 50%;
	}
.raxo-grid .raxo-switch .active {
	cursor: pointer;
	opacity: 1;
}
	.raxo-grid .raxo-switch .active:hover {
		opacity: .8;
	}


/* ----- GRID View Styles ----- */
.raxo-grid .raxo-items-grid .raxo-wrap {
	flex-direction: column;
	border-bottom: 2px solid transparent;
}
.raxo-grid .raxo-items-grid .raxo-media {
	flex-basis: auto !important;
}
.raxo-grid .raxo-items-grid .raxo-content {
	padding-bottom: 4px;
}
.raxo-grid .raxo-items-grid .raxo-media + .raxo-content {
	margin-top: 16px;
}
.raxo-grid .raxo-items-grid .raxo-title {
	font-size: 17px; line-height: 20px;
}
/*.raxo-grid .raxo-items-grid .raxo-comments,*/
/*.raxo-grid .raxo-items-grid .raxo-author,*/
/*.raxo-grid .raxo-items-grid .raxo-rating,*/
.raxo-grid .raxo-items-grid .raxo-hits,
.raxo-grid .raxo-items-grid .raxo-text {
	display: none;
}
.raxo-grid .raxo-items-grid .raxo-rating {
	order: 1;
}


/* ----- LIST View Styles ----- */
.raxo-grid .raxo-items-list {
	flex-direction: column;
}
.raxo-grid .raxo-items-list .raxo-wrap {
	border-right: 2px solid transparent;
}
.raxo-grid .raxo-items-list .raxo-content {
	padding-right: 4px;
}
.raxo-grid .raxo-items-list .raxo-media + .raxo-content {
	margin-left: 24px;
}
.raxo-grid .raxo-items-list .raxo-comments {
	margin-top: 1px;
}
.raxo-grid .raxo-items-list .raxo-meta {
	margin-bottom: 4px;
}



/* ----- COLOR Schemes ----- */
.raxo-grid .raxo-wrap:hover {
	border-color: var(--grid-color-primary);
}
.raxo-grid .raxo-wrap:hover .raxo-title a,
.raxo-grid .raxo-block-intro a,
.raxo-grid .raxo-text a,
.raxo-grid a:hover {
	color: var(--grid-color-primary) !important;
}


/* ----- LIGHT Theme ----- */
.raxo-grid {
	--grid-color-900: #0f0f0f;
	--grid-color-600: #373737;
	--grid-color-400: #727272;
	--grid-color-300: #b0b0b0;
	--grid-color-100: #fbfbfb;
	--grid-color-rgba-lg: 60,60,60,0.4;
	--grid-color-rgba-dk: 180,180,180,0.4;
	--grid-color-primary: #cc1f1f;
}
.raxo-grid.grid-red {
	--grid-color-primary: #cc1f1f;
}
.raxo-grid.grid-pink {
	--grid-color-primary: #d24087;
}
.raxo-grid.grid-orange {
	--grid-color-primary: #d94d16;
}
.raxo-grid.grid-yellow {
	--grid-color-primary: #ebc300;
}
.raxo-grid.grid-green {
	--grid-color-primary: #4d9926;
}
.raxo-grid.grid-turquoise {
	--grid-color-primary: #288699;
}
.raxo-grid.grid-blue {
	--grid-color-primary: #0a55bf;
}
.raxo-grid.grid-lightblue {
	--grid-color-primary: #3598dc;
}
.raxo-grid.grid-violet {
	--grid-color-primary: #6c3aad;
}
.raxo-grid.grid-gray {
	--grid-color-primary: #5d5d5d;
}


/* ----- DARK Theme ----- */
.raxo-grid.grid-dark {
	--grid-color-900: #dddddd;
	--grid-color-600: #b8b8b8;
	--grid-color-400: #828282;
	--grid-color-300: #494949;
	--grid-color-100: #0c0c0c;
	--grid-color-rgba-lg: 180,180,180,0.4;
	--grid-color-rgba-dk: 60,60,60,0.4;
	--grid-color-primary: #a93030;
}
.grid-dark.grid-red {
	--grid-color-primary: #a93030;
}
.grid-dark.grid-pink {
	--grid-color-primary: #b24b7c;
}
.grid-dark.grid-orange {
	--grid-color-primary: #b25029;
}
.grid-dark.grid-yellow {
	--grid-color-primary: #bfa31a;
}
.grid-dark.grid-green {
	--grid-color-primary: #4b802f;
}
.grid-dark.grid-turquoise {
	--grid-color-primary: #317280;
}
.grid-dark.grid-blue {
	--grid-color-primary: #1d519c;
}
.grid-dark.grid-lightblue {
	--grid-color-primary: #4388b8;
}
.grid-dark.grid-violet {
	--grid-color-primary: #654192;
}
.grid-dark.grid-gray {
	--grid-color-primary: #828282;
}



/* ----- Predefined Number of Columns ----- */

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

	.raxo-grid.grid-sm-col1 article {
		flex-basis: 100%;
	}
	.raxo-grid.grid-sm-col2 article {
		flex-basis: 50%;
	}
	.raxo-grid.grid-sm-col3 article {
		flex-basis: calc(100% * 1 / 3.001);
	}
	.raxo-grid.grid-sm-col4 article {
		flex-basis: 25%;
	}
	.raxo-grid.grid-sm-col5 article {
		flex-basis: 20%;
	}
	.raxo-grid.grid-sm-col6 article {
		flex-basis: calc(100% * 1 / 6.001);
	}

}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	.raxo-grid.grid-md-col1 article {
		flex-basis: 100%;
	}
	.raxo-grid.grid-md-col2 article {
		flex-basis: 50%;
	}
	.raxo-grid.grid-md-col3 article {
		flex-basis: calc(100% * 1 / 3.001);
	}
	.raxo-grid.grid-md-col4 article {
		flex-basis: 25%;
	}
	.raxo-grid.grid-md-col5 article {
		flex-basis: 20%;
	}
	.raxo-grid.grid-md-col6 article {
		flex-basis: calc(100% * 1 / 6.001);
	}
}


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

	.raxo-grid.grid-lg-col1 article {
		flex-basis: 100%;
	}
	.raxo-grid.grid-lg-col2 article {
		flex-basis: 50%;
	}
	.raxo-grid.grid-lg-col3 article {
		flex-basis: calc(100% * 1 / 3.001);
	}
	.raxo-grid.grid-lg-col4 article {
		flex-basis: 25%;
	}
	.raxo-grid.grid-lg-col5 article {
		flex-basis: 20%;
	}
	.raxo-grid.grid-lg-col6 article {
		flex-basis: calc(100% * 1 / 6.001);
	}
}


/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

	.raxo-grid.grid-xl-col1 article {
		flex-basis: 100%;
	}
	.raxo-grid.grid-xl-col2 article {
		flex-basis: 50%;
	}
	.raxo-grid.grid-xl-col3 article {
		flex-basis: calc(100% * 1 / 3.001);
	}
	.raxo-grid.grid-xl-col4 article {
		flex-basis: 25%;
	}
	.raxo-grid.grid-xl-col5 article {
		flex-basis: 20%;
	}
	.raxo-grid.grid-xl-col6 article {
		flex-basis: calc(100% * 1 / 6.001);
	}
}


/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

	.raxo-grid.grid-xxl-col1 article {
		flex-basis: 100%;
	}
	.raxo-grid.grid-xxl-col2 article {
		flex-basis: 50%;
	}
	.raxo-grid.grid-xxl-col3 article {
		flex-basis: calc(100% * 1 / 3.001);
	}
	.raxo-grid.grid-xxl-col4 article {
		flex-basis: 25%;
	}
	.raxo-grid.grid-xxl-col5 article {
		flex-basis: 20%;
	}
	.raxo-grid.grid-xxl-col6 article {
		flex-basis: calc(100% * 1 / 6.001);
	}
}