/* 6. Components: Designed pieces of UI. Still only using classes. More explicitly named (e.g. .products-list { }).  */

.frm-page {

}

.frm-nav {
	background-color: var(--layout-nav-background-color);
}

.frm-nav-inner {
	max-width: var(--layout-max-width);
  margin: auto;
}

.frm-nav-block {
	//display: flex;
	//flex-wrap: wrap;
	//align-items: flex-end;
	padding: var(--layout-nav-padding);
}

.frm-nav-block, .frm-nav-block a {
	color: var(--layout-nav-color);
}

.frm-nav-block a:hover {
	color: var(--layout-nav-color-hover);
}

.frm-nav-block .current-menu-item > a,
.frm-nav-block .current_page_item > a,
.frm-nav-block .current-menu-ancestor > a,
.frm-nav-block .current_page_ancestor > a {
	color: var(--layout-nav-color-current);
}

.frm-logo {

}

.frm-logo img {
	width: var(--layout-header-logo-width);
	height: var(--layout-header-logo-height);
}

.frm-menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.frm-menu ul > li:before {
	content: "";
}
.frm-menu li {
	//white-space: nowrap;
}

.frm-header {

}

.frm-main {
	word-wrap: break-word;
}

.frm-main-inner {
	max-width: var(--layout-max-width);
  margin: auto;
}

.frm-loop {
	max-width: 100%; /* preserves responsiveness when content is too wide (e.g. embedded video) */
	padding: var(--layout-main-padding);
}

.loop-pagination {
	overflow: hidden;
	clear: both;
}

.frm-article {
	padding: var(--layout-article-padding);
}

.frm-article-aside {

}

.frm-content {

}

.frm-aside {
	padding: var(--layout-main-padding);
}

.frm-footer {
	background-color: var(--layout-footer-background-color);
}

.frm-footer-inner {
	max-width: var(--layout-max-width);
	margin: auto;
}

.frm-footer-block {
	padding: var(--layout-footer-padding);
}

.frm-footer-block, .frm-footer-block a {
	color: var(--layout-footer-color);
}

.frm-footer-block a:hover {
	color: var(--layout-footer-color-hover);
}