/* Raiden Portfolio: site fixes and the breadcrumb banner, after the scoped template CSS. */

/* Breadcrumb banner: the Insights banner (same look and height, raiden-insight
   ri-insight-site.css): 310px, the title and path centred in the green. */
.rp-portfolio .rp-banner-wrap {
	background: url("img/rp-banner.jpg") no-repeat center, linear-gradient(45deg, #3a8800, #60ec1b);
	background-size: cover;
}
.rp-portfolio .rp-banner {
	box-sizing: border-box;
	max-width: 1170px;
	width: 95%;
	min-height: 310px;
	margin: 0 auto;
	padding: 127px 0 115px;
}
.rp-portfolio .rp-banner .rp-banner-title {
	display: block;
	margin: 0;
	color: #fff;
	font-family: "Exo", sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: normal;
	text-align: center;
	text-transform: uppercase;
}
.rp-portfolio .rp-banner .rp-banner-sections {
	margin: 16px 0 0;
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 12px;
	letter-spacing: normal;
	text-align: center;
}
.rp-portfolio .rp-banner .rp-banner-section { color: #fff; }
.rp-portfolio .rp-banner a.rp-banner-section:hover { color: #fff; text-decoration: underline; }
.rp-portfolio .rp-banner .rp-banner-arrow {
	position: relative;
	top: -1px;
	width: 3px;
	height: 5px;
	margin: 0 6px;
	fill: #fff;
}
/* From 768px the Kaju header (absolute) lies over the banner's top, as on Insights. */
@media screen and (min-width: 768px) {
	.rp-portfolio .rp-banner { padding-top: 182px; padding-bottom: 60px; }
}

/* The template's skin colours on its wrapper div (data-site-skin is set there, not on <html>). */
.rp-portfolio .stocked-fn-wrapper { background-color: var(--bbc); color: var(--bc); }

/* Search popup and notices above the Kaju header. */
.rp-portfolio .stocked_fn_searchbox { z-index: 100000; }
.rp-portfolio .fn__notice_message { z-index: 100001; }

/* Current category in the navigation (template hover colour). */
.rp-portfolio .stocked_fn_nav li.current-menu-item > a,
.rp-portfolio .stocked_fn_mobnav li.current-menu-item > a { color: var(--mc1); }

/* With 6 entries or fewer the template hides the whole bar; show it without "More...". */
.rp-portfolio .stocked_fn_nav[data-count="1"],
.rp-portfolio .stocked_fn_nav[data-count="2"],
.rp-portfolio .stocked_fn_nav[data-count="3"],
.rp-portfolio .stocked_fn_nav[data-count="4"],
.rp-portfolio .stocked_fn_nav[data-count="5"],
.rp-portfolio .stocked_fn_nav[data-count="6"] { display: flex; }
.rp-portfolio .stocked_fn_nav[data-count="1"] .more,
.rp-portfolio .stocked_fn_nav[data-count="2"] .more,
.rp-portfolio .stocked_fn_nav[data-count="3"] .more,
.rp-portfolio .stocked_fn_nav[data-count="4"] .more,
.rp-portfolio .stocked_fn_nav[data-count="5"] .more,
.rp-portfolio .stocked_fn_nav[data-count="6"] .more { display: none; }


/* Kaju's button line-height reaches the template's subscribe button. */
.rp-portfolio .fn__subscribe .fn__submit { line-height: normal; }

/* Project lists: a lot loading (end of the page / Load More); "Load More" goes when every project is shown. */
.rp-portfolio ul.blog_list.rp-loading { opacity: .6; transition: opacity .3s; }
.rp-portfolio .fn__blog_pagination.rp-all-loaded { display: none; }
.rp-portfolio .rp-no-items { width: 100%; padding: 60px 20px; text-align: center; }

/* Project lists open with 6 rows: 24 cards are sent (4 columns); 2 columns from 1040px
   down show 12 of them, 1 column from 768px shows 6. The script adds .rp-shown to show more. */
@media (max-width: 1040px) {
	.rp-portfolio ul.blog_list > li.rp-first:nth-child(n+13) { display: none; }
}
@media (max-width: 768px) {
	.rp-portfolio ul.blog_list > li.rp-first:nth-child(n+7) { display: none; }
}
.rp-portfolio ul.blog_list > li.rp-first.rp-shown { display: list-item; }

/* Featured slider without any featured item (Featured Slider box in the admin). */
.rp-portfolio .fn__featured_projects.rp-empty { display: none; }

/* Single item: the author's initials in place of the template's photos (50px circle). */
.rp-portfolio .fn__single_top .author_holder .imgs .rp-avatar {
	display: flex; align-items: center; justify-content: center;
	width: 50px; height: 50px; border: 2px solid var(--bbc); border-radius: 50%;
	background-color: var(--mc1); color: #111;
	font-family: var(--hff); font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0;
}
/* Newer/older project: a side without one keeps its place, empty. */
.rp-portfolio .fn__pnb .pnb_item.rp-none { visibility: hidden; }
.rp-portfolio ul.blog_list.rp-empty { display: none; }
/* Videos of the portfolio media. */
.rp-portfolio .fn__single_content .rp-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; }
.rp-portfolio .stocked_fn_footer_tags.rp-empty { display: none; }
.rp-portfolio .header_ad.rp-hidden { display: none; }

/* The Kaju header (absolute, z-index 3) and its mega menus must stay above the template:
   its header (#stocked_fn_header, z-index 20), carousel and badges would otherwise cover
   the drop-downs. The wrapper is its own stacking context, under the header (as .rhp-page). */
.rp-portfolio { position: relative; z-index: 0; }
/* While the template's search popup is open it covers the whole page, Kaju header included. */
.rp-portfolio.rp-search-open { z-index: 100000; }