/**
 * =============================================================
 * @package		RAXO Portal 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-portal {
	box-sizing: border-box;
	overflow: hidden;
}
	.raxo-portal *,
	.raxo-portal ::before, .raxo-portal ::after {
		box-sizing: inherit;
	}
.raxo-portal article,
.raxo-portal h3, .raxo-portal h4,
.raxo-portal img,
.raxo-portal a {
	margin: 0; padding: 0;
	background: transparent none;
	border: 0 none;
}
.raxo-portal a {
	outline: 0;
	text-decoration: none;
	transition: all .2s ease-out;
}
	.raxo-portal a:hover {
		color: #565656;
		text-decoration: underline;
	}



/* ----- Module BLOCK ----- */
.raxo-portal {
	margin: 20px 0 24px;
	padding-top: 8px;
	border-top: 3px solid transparent;
}

.raxo-portal .raxo-container {
	display: flex;
	flex-wrap: wrap;
	margin: -8px -14px;			/* Columns Gap */
}
	.raxo-portal .raxo-container > * {
		flex: 1 1 220px;
		margin: 8px 14px;		/* Columns Gap */
	}
	.raxo-portal .raxo-container::before,
	.raxo-portal .raxo-container::after {
		content: '';
		flex: 100%;
		order: 2;
		border-top: 2px solid #ddd;
		margin: 0 14px;
	}

@media (max-width: 767.98px) {
	.raxo-portal .raxo-container > * {
		flex: 100%;
	}
	.raxo-portal .raxo-block-nav {
		order: 3;
	}
}

.raxo-portal .raxo-top,
.raxo-portal .raxo-normal {
	min-width: 192px;
	order: 2;
	overflow: hidden;
}

.raxo-portal .raxo-block-name,
.raxo-portal .raxo-block-nav {
	padding: 0 4px;
}

/* --- Block NAME --- */
.raxo-portal .raxo-block-name {
	font-size: 18px; font-weight: bold;
	line-height: 22px;
}
.raxo-portal .raxo-block-nav {
	align-self: flex-start;
}

/* --- Block INTRO --- */
.raxo-portal .raxo-block-intro {
	flex: 1 100%;
	order: 1;
	padding: 0 4px 8px;
	font-size: 16px;
	line-height: 20px;
	color: #484848;
}


/* ----- Module ITEMS ----- */
.raxo-portal article {
	padding: 12px 0;
	overflow: hidden;
}
	.raxo-portal .raxo-normal article {
		border-top: 1px solid #ddd;
	}
	.raxo-portal article.raxo-item-upper {
		border: none;
	}
	.raxo-portal article.raxo-item-hide {
		display: none;
	}
.raxo-portal .raxo-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0px;
}
	.raxo-portal .raxo-wrap > div {
		margin: 5px;
	}
	.raxo-portal .raxo-wrap .raxo-image {
		flex: 0 1 auto;
	}
	.raxo-portal .raxo-wrap .raxo-content {
		flex: 1 1 144px;
	}
	.raxo-portal .raxo-top .raxo-content {
		flex: 1 1 208px;
	}


/* ----- Item IMAGE ----- */
.raxo-portal .raxo-image {
	align-self: flex-start;
	padding: 0px;
	border: 0px solid #666666;
	border-radius: 2px;
	transition: border .2s;
}
	.raxo-portal .raxo-image img[src] {
		max-width: 100%;
		height: auto !important;
	}



/* ----- Item CONTENT ----- */
.raxo-portal .raxo-title {
	margin: 0 0 4px;
	font-size: 20px; font-weight: bold;
	line-height: 26px;
}
	.raxo-portal .raxo-top .raxo-title {
		font-size: 28px;
		line-height: 34px;
	}
	.raxo-portal .raxo-title a {
		color: #222222 !important;
		text-decoration: none;
		text-decoration-color: #cccccc;
	}
.raxo-portal .raxo-top .raxo-text {
	margin-top: 6px;
	font-size: 16px; line-height: 20px;
	color: #484848;
}
.raxo-portal .raxo-readmore {
	font-size: 14px; font-weight: normal;
	line-height: 20px;
}
	.raxo-portal .raxo-normal .raxo-readmore {
		margin-top: 4px;
		font-size: 13px;
		line-height: 18px;
	}



/* ----- Content ELEMENTS ----- */
.raxo-portal .raxo-meta {
	font: normal 11px/18px Verdana, Geneva, sans-serif;
	color: #7d7d7d;
}
	.raxo-portal .raxo-meta span {
		display: inline-block;
		padding-right: 7px;
	}
	.raxo-portal .raxo-meta span:last-child {
		padding-right: 0;
	}
	.raxo-portal .raxo-meta a {
		color: #484848 !important;
		text-decoration: underline;
	}



/* ----- Page NAVIGATION ----- */
.raxo-portal .raxo-block-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
	.raxo-portal .raxo-block-nav > div {
		padding-top: 2px;
	}
.raxo-portal .raxo-pagenav {
	margin-left: -4px;
	font: 12px/20px Verdana, Geneva, sans-serif;
}
.raxo-portal .raxo-pagenav a {
	display: inline-block;
	margin: 0 2px; padding: 0 5px;
	height: 20px; line-height: 20px;
	border-radius: 2px;
}
	.raxo-portal .raxo-pagenav span {
		display: inline-block;
		padding: 0 2px;
		color: #777777
	}
	.raxo-portal .raxo-pagenav a:focus {
		outline: none;
	}
	.raxo-portal .raxo-pagenav a:hover {
		text-decoration: none;
		background-color: #f5f5f5;
	}
	.raxo-portal .raxo-pagenav a.raxo-nav-active {
		color: #333333 !important;
		background-color: #d1d1d1;
	}
.raxo-portal .raxo-pagenav .raxo-nav-prev,
.raxo-portal .raxo-pagenav .raxo-nav-next {
	color: #7d7d7d !important;
	text-transform: uppercase;
}
.raxo-portal .raxo-pagenav .raxo-nav-first,
.raxo-portal .raxo-pagenav .raxo-nav-last {
	display: none;
	font-size: 14px;
}

/* --- Block BUTTON --- */
.raxo-portal .raxo-block-button {
	margin-left: auto;
	font-size: 14px;
	line-height: 20px;
	color: #7d7d7d;
}




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

/* --- Light Blue Color (default) --- */
.raxo-portal,
.raxo-portal a,
.raxo-portal .raxo-block-name,
.raxo-portal article:hover .raxo-image {
	color: #3598dc;
	border-color: #3598dc;
}
.raxo-portal article:hover .raxo-title a,
.raxo-portal .raxo-meta a:hover {
	color: #3598dc !important;
}
.raxo-portal .raxo-title a:hover {
	text-decoration-color: #3598dc;
}

/* --- Red Color --- */
.raxo-portal.portal-red,
.raxo-portal.portal-red a,
.portal-red .raxo-block-name,
.portal-red article:hover .raxo-image {
	color: #cc1f1f;
	border-color: #cc1f1f;
}
.portal-red article:hover .raxo-title a,
.portal-red .raxo-meta a:hover {
	color: #cc1f1f !important;
}
.portal-red .raxo-title a:hover {
	text-decoration-color: #cc1f1f;
}

/* --- Pink Color --- */
.raxo-portal.portal-pink,
.raxo-portal.portal-pink a,
.portal-pink .raxo-block-name,
.portal-pink article:hover .raxo-image {
	color: #d24087;
	border-color: #d24087;
}
.portal-pink article:hover .raxo-title a,
.portal-pink .raxo-meta a:hover {
	color: #d24087 !important;
}
.portal-pink .raxo-title a:hover {
	text-decoration-color: #d24087;
}

/* --- Orange Color --- */
.raxo-portal.portal-orange,
.raxo-portal.portal-orange a,
.portal-orange .raxo-block-name,
.portal-orange article:hover .raxo-image {
	color: #d94d16;
	border-color: #d94d16;
}
.portal-orange article:hover .raxo-title a,
.portal-orange .raxo-meta a:hover {
	color: #d94d16 !important;
}
.portal-orange .raxo-title a:hover {
	text-decoration-color: #d94d16;
}

/* --- Yellow Color --- */
.raxo-portal.portal-yellow,
.raxo-portal.portal-yellow a,
.portal-yellow .raxo-block-name,
.portal-yellow article:hover .raxo-image {
	color: #ebc300;
	border-color: #ebc300;
}
.portal-yellow article:hover .raxo-title a,
.portal-yellow .raxo-meta a:hover {
	color: #ebc300 !important;
}
.portal-yellow .raxo-title a:hover {
	text-decoration-color: #ebc300;
}

/* --- Green Color --- */
.raxo-portal.portal-green,
.raxo-portal.portal-green a,
.portal-green .raxo-block-name,
.portal-green article:hover .raxo-image {
	color: #4d9926;
	border-color: #4d9926;
}
.portal-green article:hover .raxo-title a,
.portal-green .raxo-meta a:hover {
	color: #4d9926 !important;
}
.portal-green .raxo-title a:hover {
	text-decoration-color: #4d9926;
}

/* --- Blue Color --- */
.raxo-portal.portal-blue,
.raxo-portal.portal-blue a,
.portal-blue .raxo-block-name,
.portal-blue article:hover .raxo-image {
	color: #0a55bf;
	border-color: #0a55bf;
}
.portal-blue article:hover .raxo-title a,
.portal-blue .raxo-meta a:hover {
	color: #0a55bf !important;
}
.portal-blue .raxo-title a:hover {
	text-decoration-color: #0a55bf;
}

/* --- Violet Color --- */
.raxo-portal.portal-violet,
.raxo-portal.portal-violet a,
.portal-violet .raxo-block-name,
.portal-violet article:hover .raxo-image {
	color: #6c3aad;
	border-color: #6c3aad;
}
.portal-violet article:hover .raxo-title a,
.portal-violet .raxo-meta a:hover {
	color: #6c3aad !important;
}
.portal-violet .raxo-title a:hover {
	text-decoration-color: #6c3aad;
}

/* --- Turquoise Color --- */
.raxo-portal.portal-turquoise,
.raxo-portal.portal-turquoise a,
.portal-turquoise .raxo-block-name,
.portal-turquoise article:hover .raxo-image {
	color: #288699;
	border-color: #288699;
}
.portal-turquoise article:hover .raxo-title a,
.portal-turquoise .raxo-meta a:hover {
	color: #288699 !important;
}
.portal-turquoise .raxo-title a:hover {
	text-decoration-color: #288699;
}

/* --- Gray Color --- */
.raxo-portal.portal-gray,
.raxo-portal.portal-gray a,
.portal-gray .raxo-block-name,
.portal-gray article:hover .raxo-image {
	color: #636363;
	border-color: #636363;
}
.portal-gray article:hover .raxo-title a,
.portal-gray .raxo-meta a:hover {
	color: #636363 !important;
}
.portal-gray .raxo-title a:hover {
	text-decoration-color: #636363;
}




/* ----- Predefined PROPORTIONS ----- */

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

	.raxo-portal[class*="portal-md"] .raxo-block-nav {order: 0;}

	.raxo-portal.portal-md-1-1 .raxo-block-name,
	.raxo-portal.portal-md-1-1 .raxo-top {flex-basis: 100%;}
	.raxo-portal.portal-md-1-1 .raxo-block-nav {order: 3;}
	.raxo-portal.portal-md-1-2 .raxo-container > * {
		flex-basis: 320px;
	}

	.raxo-portal.portal-md-1-3 .raxo-block-name,
	.raxo-portal.portal-md-1-3 .raxo-top,
	.raxo-portal.portal-md-2-3 .raxo-normal,
	.raxo-portal.portal-md-2-3 .raxo-block-nav {
		flex-basis: calc(34% - 28px);
	}

	.raxo-portal.portal-md-2-3 .raxo-block-name,
	.raxo-portal.portal-md-2-3 .raxo-top,
	.raxo-portal.portal-md-1-3 .raxo-normal,
	.raxo-portal.portal-md-1-3 .raxo-block-nav {
		flex-basis: calc(66% - 28px);
	}
}

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

	.raxo-portal[class*="portal-lg"] .raxo-block-nav {order: 0;}

	.raxo-portal.portal-lg-1-1 .raxo-block-name,
	.raxo-portal.portal-lg-1-1 .raxo-top {flex-basis: 100%;}
	.raxo-portal.portal-lg-1-1 .raxo-block-nav {order: 3;}
	.raxo-portal.portal-lg-1-2 .raxo-container > * {
		flex-basis: 440px;
	}

	.raxo-portal.portal-lg-1-3 .raxo-block-name,
	.raxo-portal.portal-lg-1-3 .raxo-top,
	.raxo-portal.portal-lg-2-3 .raxo-normal,
	.raxo-portal.portal-lg-2-3 .raxo-block-nav {
		flex-basis: calc(34% - 28px);
	}

	.raxo-portal.portal-lg-2-3 .raxo-block-name,
	.raxo-portal.portal-lg-2-3 .raxo-top,
	.raxo-portal.portal-lg-1-3 .raxo-normal,
	.raxo-portal.portal-lg-1-3 .raxo-block-nav {
		flex-basis: calc(66% - 28px);
	}
}

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

	.raxo-portal[class*="portal-xl"] .raxo-block-nav {order: 0;}

	.raxo-portal.portal-xl-1-1 .raxo-block-name,
	.raxo-portal.portal-xl-1-1 .raxo-top {flex-basis: 100%;}
	.raxo-portal.portal-xl-1-1 .raxo-block-nav {order: 3;}
	.raxo-portal.portal-xl-1-2 .raxo-container > * {
		flex-basis: 560px;
	}

	.raxo-portal.portal-xl-1-3 .raxo-block-name,
	.raxo-portal.portal-xl-1-3 .raxo-top,
	.raxo-portal.portal-xl-2-3 .raxo-normal,
	.raxo-portal.portal-xl-2-3 .raxo-block-nav {
		flex-basis: calc(34% - 28px);
	}

	.raxo-portal.portal-xl-2-3 .raxo-block-name,
	.raxo-portal.portal-xl-2-3 .raxo-top,
	.raxo-portal.portal-xl-1-3 .raxo-normal,
	.raxo-portal.portal-xl-1-3 .raxo-block-nav {
		flex-basis: calc(66% - 28px);
	}
}

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

	.raxo-portal[class*="portal-xxl"] .raxo-block-nav {order: 0;}

	.raxo-portal.portal-xxl-1-1 .raxo-block-name,
	.raxo-portal.portal-xxl-1-1 .raxo-top {flex-basis: 100%;}
	.raxo-portal.portal-xxl-1-1 .raxo-block-nav {order: 3;}
	.raxo-portal.portal-xxl-1-2 .raxo-container > * {
		flex-basis: 640px;
	}

	.raxo-portal.portal-xxl-1-3 .raxo-block-name,
	.raxo-portal.portal-xxl-1-3 .raxo-top,
	.raxo-portal.portal-xxl-2-3 .raxo-normal,
	.raxo-portal.portal-xxl-2-3 .raxo-block-nav {
		flex-basis: calc(34% - 28px);
	}

	.raxo-portal.portal-xxl-2-3 .raxo-block-name,
	.raxo-portal.portal-xxl-2-3 .raxo-top,
	.raxo-portal.portal-xxl-1-3 .raxo-normal,
	.raxo-portal.portal-xxl-1-3 .raxo-block-nav {
		flex-basis: calc(66% - 28px);
	}
}
