/**
 ************************************************************************************************************************
 * White Spektrum - style.css
 ************************************************************************************************************************
 * Theme Name:      White Spektrum
 * Theme URI:       https://benjlu.com/portfolio/white-spektrum
 * Author:          Benjamin Lu
 * Author URI:      https://benjlu.com
 * Description:     White Spektrum has been converted into a responsive theme that looks great on smartphones and tablets. This theme offers several features such as custom header, left and right sidebars, featured images and more. The Mobile Menu is slightly different from other themes. The mobile menu has been created at the bottom left corner that helps users to navigation easier.
 * License:         GNU General Public License v2.0 or later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 * Tags:            grid-layout, left-sidebar, one-column, right-sidebar, two-columns, custom-background, custom-colors, custom-header, custom-logo, custom-menu, featured-images, footer-widgets, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, blog
 * Text Domain:     white-spektrum
 * Tested up to:    5.6
 * Requires PHP:    5.6
 * Version:         1.0.5
 ************************************************************************************************************************
 */

/**
 ************************************************************************************************************************
 * Danger Zone
 ************************************************************************************************************************
 * Please do not make any modifications directly to this file nor any files within the theme, you will lose all modifications
 * when the theme is next updated. Please consider using a child theme based on this theme so that all of your modifications
 * wil be saved when the theme is updated. This theme's styles will automatically loaded for you when you activate this theme.
 ************************************************************************************************************************
 */

/**
 ************************************************************************************************************************
 *  Table of Content
 ************************************************************************************************************************
 *  1.0 - Typography
 *  2.0 - Elements
 *  3.0 - Forms
 *  4.0 - Clearings
 *  5.0 - Navigation (Primary)
 *  6.0 - Navigation (Secondary)
 *  7.0 - Navigation (Pagination)
 *  8.0 - Navigation (Social)
 *  9.0 - Basic Strucutre (Header)
 * 10.0 - Basic Structure (Content)
 * 11.0 - Basic Structure (Aside)
 * 12.0 - Basic Structure (Footer)
 * 13.0 - Content (Posts and Pages)
 * 14.0 - Content (Comments)
 * 15.0 - Content (Archives)
 * 16.0 - Content (Search and 404)
 * 17.0 - Content (Post Formats)
 * 18.0 - Widgets
 * 19.0 - Media Queries (Mobile Small 30em (480px))
 * 20.0 - Media Queries (Mobile Small 37.5em (600px))
 * 21.0 - Media Queries (Mobile Medium 48.688em (667px))
 * 22.0 - Media Queries (Mobile Large 46em (736px))
 * 23.0 - Media Queries (Tablet Small 48em (768px))
 * 24.0 - Media Queries (Tablet Large 64em (1024px))
 * 25.0 - Media Queries (Desktop 73.125em 1170px))
 ************************************************************************************************************************
 */

 /**
 ************************************************************************************************************************
 *  1.0 - Typography
 ************************************************************************************************************************
 */

 /**
 ************************************************************************************************************************
 *  2.0 - Elements
 ************************************************************************************************************************
 */

 /**
 ************************************************************************************************************************
 *  3.0 - Forms
 ************************************************************************************************************************
 */

 /**
 ************************************************************************************************************************
 *  4.0 - Clearings
 ************************************************************************************************************************
 */

 /**
 ************************************************************************************************************************
 *  5.0 - Navigation (Primary)
 ************************************************************************************************************************
 */
 .primary-navigation {
    display: block;
    width: 100%;
}

.primary-navigation ul {
    display: block;
    list-style: none;
    margin: 0;
}

.primary-navigation li {
	border-top: 0.063em solid #eaeaea;
	border-top: 0.063em solid rgba(51, 51, 51, 0.1);
	position: relative;
}

.primary-navigation ul ul {
    display: none;
    margin-left: 0.5em;
}

.primary-navigation a {
    color: #ffffff;
    display: block;
    line-height: 1.5em;
    padding: 0.5em 1em;
    position: relative;
    text-decoration: none;
}

.primary-navigation a:hover,
.primary-navigation a:focus {
    background: #ffffff;
    color: #000000;
}

.primary navigation a,
.primary-navigation ul ul li:lastchild a {
    border-bottom: 0.063em solid #ffffff;
}

.primary-navigation ul li:last-child a {
    border-bottom: none;
}

.primary-navigation ul .toggled-on {
    display: block;
}

.primary-navigation .current-menu-item > a,
.primary-navigation .current-menu-ancestor > a,
.primary-navigation .current_page_item > a,
.primary-navigation .current_page_ancestor > a {
	font-weight: 700;
}

.primary-navigation .nav-menu > ul > li:first-child,
.primary-navigation .nav-menu > li:first-child {
	border-top: 0;
}

.primary-navigation .menu-item-has-children > a,
.primary-navigation .page_item_has_children > a{
	padding-right: 3em;
}

.no-js .primary-navigation ul ul {
	display: block;
}

.dropdown-toggle {
    background: #000000;
    border: 0.063em solid #ffffff;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
    color: #ffffff;
    font-family: 'fontawesome';
    height: 2em;
    padding: 0;
    position: absolute;
    right: 0.250em;
    top: 0.188em;
    width: 2em;
}

.dropdown-toggle:after {
    font-size: 1.125em;
    content: "\f078";
    left: 0;
    line-height: 1.875em;
    position: relative;
    top: 0;
    width: 1.875em;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
	background: #ffffff;
	color: #000000;
}

.dropdown-toggle.toggle-on:after {
	content: "\f077";
}

.primary-navigation.toggled {
    bottom: 0;
    padding: 1em;
    position: fixed;
    z-index: 1;
}

.nav-menu {
    background: #000000;
	padding: 1em;
	margin-bottom: 3em;
}

.primary-navigation.toggled ul {
	max-height: calc(100vh - 8em);
	overflow-y: auto;
}

.primary-navigation.toggled ul ul {
	display: none;
}

.primary-navigation.toggled ul ul.toggled-on,
.primary-navigation.toggled ul ul.toggled-on > ul {
    display: block;
}

.menu-toggle {
	background-color: #000;
	border: solid 2px #fff;
	bottom: 1em;
	color: #fff;
    display: none;
	font-size: 1em;
	left: 1em;
    padding: 0.4em;
	position: fixed;
	transition: all ease-out 400ms;
	z-index: 100;
}

.menu-toggle.hide {
	bottom: -2.5em;
}

.toggled .menu-toggle.hide {
	bottom: 1em;
}

.menu-toggle:hover,
.menu-toggle:focus {
	text-decoration: underline;
}


 /**
 ************************************************************************************************************************
 *  6.0 - Navigation (Secondary)
 ************************************************************************************************************************
 */

 /**
 ************************************************************************************************************************
 *  7.0 - Navigation (Pagination)
 ************************************************************************************************************************
 */

 /**
 ************************************************************************************************************************
 *  8.0 - Navigation (Social)
 ************************************************************************************************************************
 */

 /**
 ************************************************************************************************************************
 *  9.0 - Basic Strucutre (Header)
 ************************************************************************************************************************
 */
 .site-container {
     margin: 0 auto;
     max-width: 73.125em;
 }

 .site-branding {
     padding: 1.125em;
     text-align: center;
 }

 .site-branding .site-title,
 .site-branding .site-description {
     margin: 0;
     padding: 0;
 }

 .site-branding .site-title a {
    font-size: 1.313em;
 }

 .wp-custom-header {
     margin-top: 1.125em;
 }

 .site-content {
     margin: 1.125em;
 }

 /**
 ************************************************************************************************************************
 * 10.0 - Basic Structure (Content)
 ************************************************************************************************************************
 */
 .left-sidebar .content-area {
    float: right;
    width: 71.604938272%;
}

.right-sidebar .content-area {
    float: left;
    width: 71.604938272%;
}

 /**
 ************************************************************************************************************************
 * 11.0 - Basic Structure (Aside)
 ************************************************************************************************************************
 */
 .left-sidebar .widget-area {
    float: left;
    width: 25.485008818%;
}

.right-sidebar .widget-area {
    float: right;
    width: 25.485008818%;
}

 /**
 ************************************************************************************************************************
 * 12.0 - Basic Structure (Footer)
 ************************************************************************************************************************
 */
 .site-footer {
    padding: 0.5em;
    text-align: center;
}

.site-info {
    font-size: 0.875em;
    line-height: 1.5em;
}

 /**
 ************************************************************************************************************************
 * 13.0 - Content (Posts and Pages)
 ************************************************************************************************************************
 */
 .content-area .post:after {
    border: 0.063em solid #eeeeee;
    content: "";
    display: block;
    margin: 2.250em  auto;
    width: 300px;
}

.content-area .post .entry-header,
.content-area .page .entry-header {
    text-align: center;
}

.content-area .post .entry-header .entry-title,
.content-area .page .entry-header .entry-title {
    margin: 0;
    padding: 0;
}

.content-area .post .entry-content,
.content-area .post .entry-excerpt,
.content-area .page .entry-content,
.content-area .page .entry-excerpt {
    line-height: 1.7em;
}

.content-area .post .entry-metadata,
.content-area .attachment .entry-metadata {
    background: #eeeeee;
    border-left: 5px solid #21759b;
    margin: 1.250em 0;
    padding: 1em;
    text-align: center;
}

.content-area .post .entry-metadata .avatar,
.content-area .attachment .entry-metadata .avatar {
    border: 0.500em solid #cccccc;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
}

.content-area .post .entry-metadata .by-author,
.content-area .attachment .entry-metadata .by-author {
    display: block;
    font-size: 1.250em;
}

.content-area .post .entry-metadata .published,
.content-area .post .entry-metadata .entry-comments,
.content-area .attachment .entry-metadata .published,
.content-area .attachment .entry-metadata .entry-comments {
    display: block;
    padding: 0.063em 0;
    font-size: 12px;
}
.content-area .post .entry-taxonomies {
    margin: 1.125em 0;
}
.content-area .post .entry-taxonomies .cat-link,
.content-area .post .entry-taxonomies .tag-link {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}

.content-area .post .entry-taxonomies .tag-link .fa-tags {
    margin: 0;
}

.content-area .post .entry-taxonomies .tag-list,
.content-area .post .entry-taxonomies .cat-list {
    font-size: 12px;
}

.content-area .post .entry-timestamp .updated:not(.published) {
    display: none;
}

.content-area .sticky {
    
}

 /**
 ************************************************************************************************************************
 * 14.0 - Content (Comments)
 ************************************************************************************************************************
 */
 .comments-area {
    margin: 1.125em 0;    
}

.comments-title {
    padding: 1.125em;
    text-align: center;
}

.comment-list {
    margin: 0;
    padding: 0;
}

.comment-body {
    border: 1px solid #cccccc;
    margin-bottom: 1.125em;
    padding: 1.125em;
}

.comments-area > ol  {
    list-style-type: none;
}

.comment-author .avatar {
    border: 4px solid #cccccc;
    border-radius: 50%;
    float: left; 
    display: block;
    margin-right: 10px;
}

.comment-author .fn {
    font-size: 1.313em;
    margin: 0;
    font-weight: bold;
    font-style: normal;
    line-height: 1.6em;
    padding: 0;
}

.comment-meta {
    font-size: 12px;
}

.comment-content {
    display: block;
    line-height: 1.7em;
    margin: 2.625em 0.5em 0 0.5em;
}


.comments-area .says {
    display: none;
}

.reply {
	margin-bottom: 1.5em;
	text-align: right;
}

.reply a {
    background: #ffffff;
    border: 0.063em solid #cccccc;
    color: #373737;
	display: inline-block;
	padding: 0.5em 1.4em;
	text-decoration: none;
}

.reply a:hover,
.reply a:focus {
	color: #373737;
    text-decoration: underline;
}

.comment-list ol {
    margin-top: 20px;
    margin-left: 20px;
}

ol.children {
    list-style-type: none;
    margin-left: 0;
}

.content-meta {
    margin-left: 70px;
}

.comment-navigation {
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
}

.comment-navigation i {
    padding: 10px;
}

.comment-previous {
    float: left;
}
.comment-next {
    float: right;
}

.bypostauthor > .comment-body {
    background: #f0f0f0; 
    padding: 0.625em;
    position: relative;
}

.comment-reply-title {
    font-size: 1.250em;
    margin: 0;
    padding: 0;
}

.comment-form p {
    margin: 0 0 1.5em 0;
}

.required {
    color: #FF0000;
    font-size: 0.625em;
}

.comment-awaiting-moderation {
    background: #84BD68;
    color: #ffffff;
    font-size: 0.750em;
    padding: 0.188em 0.250em;
}

.form-allowed-tags {
    font-size: 0.813em;
    width: 37.5em;
}

.comment-form .comment-form-author {
    float: left;
    display: block;
}

.comment-form .comment-form-author:before {
    font-family: 'fontawesome';
    content: "\f007";
    float: left;
    margin-left: 0.063em;
    margin-right: 0.250em;
}

.comment-form .comment-form-email {
    float: right;
    display: block;
}

.comment-form .comment-form-email:before {
    font-family: 'fontawesome';
    content: "\f0e0";
    float: left;
    margin-left: 0.063em;
    margin-right: 0.250em;
}


.comment-form .comment-form-url {
    display: table;
    margin-bottom: 1.3em;
    width: 100%;
}

.comment-form .comment-form-url:before {
    font-family: 'fontawesome';
    content: "\f0ac";
    float: left;
    margin-left: 0.063em;
    margin-right: 0.250em;
}

.comment-form .comment-form-comment label,
.comment-form .comment-form-author label,
.comment-form .comment-form-email label,
.comment-form .comment-form-url label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.250em;
}

.comment-form .comment-form-comment:before {
    font-family: 'fontawesome';
    content: "\f075";
    float: left;
    margin-left: 0.063em;
    margin-right: 0.250em;
}

.comment-form .comment-form-comment textarea {
    border: 0.063em solid #cccccc;
    font-family: 'Merriewather', serif;
    font-size: 1em;
    min-height: 12.375em;
    width: 100%;
}

.comment-form .comment-form-author input[type="text"],
.comment-form .comment-form-email input[type="email"] {
    border: 0.063em solid #cccccc;
    font-family: 'Merriewather', serif;
    font-size: 1em;
    padding: 0.6em;
    width: 23em;
}

.comment-form .comment-form-url input[type="url"] {
    border: 0.063em solid #cccccc;
    font-family: 'Merriewather', serif;
    font-size: 1em;
    padding: 0.6em;
    width: 100%;
}

.comment-form .comment-notes {
    font-size: 12px;
}

p.comment-awaiting-moderation {
    margin: 0.125em 0 0 4.063em;
    padding: 0.188em 0.313em;
}

.comment-subscription-form .subscribe-label {
    display: inline !important;
    font-size: 0.875em;
}

.comment-form .comment-form-cookies-consent {
    font-size: 14px;
}

.comment-form .comment-form-cookies-consent input[type="checkbox"] {
    margin-right: 0.250em;
}

 /**
 ************************************************************************************************************************
 * 15.0 - Content (Archives)
 ************************************************************************************************************************
 */
 .archive-header {
    text-align: center;
 }

 .archive-header:after {
    border: 0.063em solid #eeeeee;
    content: "";
    display: block;
    margin: 2em auto 2.250em  auto;
    width: 300px;
 }

 .archive-header .archive-title {
    margin : 0;
    padding: 0;
}

 /**
 ************************************************************************************************************************
 * 16.0 - Content (Search and 404)
 ************************************************************************************************************************
 */

 /**
 ************************************************************************************************************************
 * 17.0 - Content (Post Formats)
 ************************************************************************************************************************
 */

 /**
 ************************************************************************************************************************
 * 18.0 - Widgets
 ************************************************************************************************************************
 */
 .widget-area .search-form:before,
 .widget-area .search-form:after {
     clear: both;
     content: "";
     display: table;
 }
 
 .widget-area .search-form {
     padding: 0.938em;
     background: #555;
     max-width: 100%;
 }
 
 .widget-area .search-field {
     border: none;
     float: left;
     font-family: 'Merriweather', serif;
     font-size: 1em;
     padding: 0.563em;
     width: 100%;
 }
 
 .widget-area .search-submit {
     border: none;
     background: #d88f3c;
     color: #ffffff;
     float: right;
     font-family: 'Merriweather', serif;
     font-size: 1em;
     display: none;
     padding: 0.5em;
     position: relative;
     width: 30%;
 }
 
 .widget-area .widget {
     margin-bottom: 2.250em;
     font-size: 0.875em;
 }
 
 .widget ul,
 .widget ol {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
 
 .widget li {
     margin: 0.4em 0 0 0;
 }
 
 .widget li li {
     margin-left: 1.125em;
 }
 
 .widget select {
     font-family: 'Merriweather', serif;
     margin: 0.625em 0;
     padding: 0.5em;
     width: 100%;
 }
 
 .widget.widget_post_thumbnail {
     padding-bottom: 0;
 }
 
 .widget-title {
     margin: 0 0 0.5em 0;
 }
 
 .rss-widget-icon {
     display: none;
 }
 
 .rsswidget {
     display: block;
 }
 
 .widget_rss cite {
     display: block;
     font-size: 0.875em;
     font-weight: 700;
     margin-bottom: 1.125em;
 }
 
 .widget-area table {
     border-collapse: collapse;
     width: 100%;
 }
 
 .widget-area tr:nth-of-type(odd) {
     background: #eeeeee;
 }
 
 .widget-area th {
     background: #333333;
     color: #ffffff;
     font-weight: 700;
 }
 
 .widget-area th, td {
     border: 0.063em solid #cccccc;
     text-align: left;
     padding: 0.438em;
 }
 
 .rss-date {
     font-size: 0.875em;
 }
 
 .rssSummary {
     margin-top: 10px;
 }
 
 #wp-calendar table {
     border-collapse: collapse;
     width: 100%;
 }
 
 #wp-calendar tr:nth-of-type(odd) {
     background: #eeeeee;
 }
 
 #wp-calendar th {
     background: #999999;
     color: #ffffff;
     font-weight: 700;
     text-align: center;
 }
 
 #wp-calendar th,
 #wp-calendar td {
     border: 0.063em solid #cccccc;
     padding: 0.438em;
     text-align: center;
 }
 
 #wp-calendar {
     border: 0.063em solid #cccccc;
     margin-bottom: 0;
     text-align: center;
     width: 100%;
 }
 
 #wp-calendar a {
     color: #1d1d1d;
     font-weight: 700;
 }
 
 #wp-calendar caption {
     font-weight: 700;
     margin: 5px 0;
     text-align: center;
 }
 
 #wp-calendar #today {
     background: #cccccc;
     font-weight: 700;
 }
 
 .textwidget {
     line-height: 1.6em;
 }

 /**
 ************************************************************************************************************************
 * 19.0 - Media Queries (Mobile Small 30em (480px))
 ************************************************************************************************************************
 */

 /**
 ************************************************************************************************************************
 * 20.0 - Media Queries (Mobile Small 37.5em (600px))
 ************************************************************************************************************************
 */
 @media screen and (min-height: 30.063em) and (max-width: 37.50em) {
    .menu-toggle,
    .primary-navigation.toggled ul {
        display: block;
    }
    
	.primary-navigation ul {
		display: none;
	}
    
    .primary-navigation.toggled {
        padding: 0.1em;
    }
    
    .nav-menu {
        margin-bottom: 3.6em;
    }
    
    .primary-navigation .nav-menu {
        display: none;
    }
    
    .primary-navigation.toggled .nav-menu {
        display: block;
        margin: 1em 1em 3.6em 1em;
    }
    
    .left-sidebar .content-area,
    .right-sidebar .content-area {
        float: none;
        width: 100%;
    }

    .left-sidebar .widget-area,
    .right-sidebar .widget-area {
        float: none;
        width: 100%;
    }
}

 /**
 ************************************************************************************************************************
 * 21.0 - Media Queries (Mobile Medium 48.688em (667px))
 ************************************************************************************************************************
 */

 /**
 ************************************************************************************************************************
 * 22.0 - Media Queries (Mobile Large 46em (736px))
 ************************************************************************************************************************
 */

 /**
 ************************************************************************************************************************
 * 23.0 - Media Queries (Tablet Small 48em (768px))
 ************************************************************************************************************************
 */
 @media screen and (min-width: 601px) and (max-width: 48em) {
    .menu-toggle,
    .primary-navigation.toggled ul {
        display: block;
    }
    
	.primary-navigation ul {
		display: none;
	}
    
    .primary-navigation.toggled {
        padding: 0.1em;
    }
    
    .nav-menu {
        margin-bottom: 3.6em;
    }
    
    .primary-navigation .nav-menu {
        display: none;
    }
    
    .primary-navigation.toggled .nav-menu {
        display: block;
        margin: 1em 1em 3.6em 1em;
    }
    
    .left-sidebar .content-area,
    .right-sidebar .content-area {
        float: none;
        width: 100%;
    }
    
    .left-sidebar .widget-area,
    .right-sidebar .widget-area {
        float: none;
        width: 100%;
    }

    .widget-area {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1.125em;
        margin: 2.250em 0;
    }
}

 /**
 ************************************************************************************************************************
 * 24.0 - Media Queries (Tablet Large 64em (1024px))
 ************************************************************************************************************************
 */
 @media screen and (min-width: 769px) and (max-width: 64em) {
    .primary-navigation {
        clear: none;
        float: left;
        width: 100%;
    }
    
	/* Position the menu in the header */
	.primary-navigation,
	.primary-navigation.toggled {
		position: relative;
		max-width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	
	.primary-navigation ul,
	.primary-navigation.toggled ul {
		max-height: none;
		padding-left: 0;
		text-align: center;
        
	}
	
	.primary-navigation.toggled ul {
		overflow-y: visible;
	}
	
	/* Display the menu items in a horizontal order */
	.primary-navigation li {
		display: inline-block;
		border: none;
	}
	
	/* Add an outline to the drop-down menus */
	.primary-navigation ul ul {
		outline: 1px solid #333;
	}
	
	/* Left-align drop-down menu items */
	.primary-navigation li li {
		display: block;
		text-align: left;
	}
    
    .primary-navigation a {
        padding: 0.5em 1em;
    }
	
	.primary-navigation a,
	.primary-navigation ul ul li:last-child a {
		border-bottom: none;
	}
    
    .primary-navigation ul ul li a {
        color: #ffffff;
    }
	
	/* Add an outline on hovered and focused menu items */
	.primary-navigation a:hover,
	.primary-navigation a:focus {
		background: transparent;
		color: #ffffff;
		text-decoration: underline;
		outline: solid 1px #b3b3b3;
	}
	
	/* Create hover and focus contrast on drop-down items */
	.primary-navigation li li a:hover,
	.primary-navigation li li a:focus {
		background: #eee;
		color: #000;
		text-decoration: none;
	}
	
	/* Position drop-down menus absolutely */
	.primary-navigation ul ul.toggled-on {
        background: #000000;
		display: block;
		margin-left: 0;
		position: absolute;
        right: 0;
		width: 17em;
		z-index: 10;
	}
	
	.primary-navigation ul ul ul.toggled-on {
		right: 0;
        padding-left: 1em;
        position: relative;
	}
	
	/* Indent 3rd level drop-down menus */
	.primary-navigation ul ul ul a {
		padding-left: 2em;
	}
    
    .nav-menu {
        padding: 0.4em;
    }
}

 /**
 ************************************************************************************************************************
 * 25.0 - Media Queries (Desktop 73.125em 1170px))
 ************************************************************************************************************************
 */
 @media screen and (min-width: 73.125em) {
    .primary-navigation {
        clear: none;
        float: left;
        width: 100%;
    }
    
	/* Position the menu in the header */
	.primary-navigation,
	.primary-navigation.toggled {
		position: relative;
		max-width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	
	.primary-navigation ul,
	.primary-navigation.toggled ul {
		max-height: none;
		padding-left: 0;
		text-align: center;
        
	}
	
	.primary-navigation.toggled ul {
		overflow-y: visible;
	}
	
	/* Display the menu items in a horizontal order */
	.primary-navigation li {
		display: inline-block;
		border: none;
	}
	
	/* Add an outline to the drop-down menus */
	.primary-navigation ul ul {
		outline: 1px solid #333;
	}
	
	/* Left-align drop-down menu items */
	.primary-navigation li li {
		display: block;
		text-align: left;
	}
    
    .primary-navigation a {
        color: #111111;
        padding: 0.5em 1em;
    }
	
	.primary-navigation a,
	.primary-navigation ul ul li:last-child a {
		border-bottom: none;
	}
    
    .primary-navigation ul ul li a {
        color: #ffffff;
    }
	
	/* Add an outline on hovered and focused menu items */
	.primary-navigation a:hover,
	.primary-navigation a:focus {
		background: transparent;
		color: #111111;
		text-decoration: underline;
		outline: solid 1px #b3b3b3;
	}
	
	/* Create hover and focus contrast on drop-down items */
	.primary-navigation li li a:hover,
	.primary-navigation li li a:focus {
		background: #eee;
		color: #000;
		text-decoration: none;
	}
	
	/* Position drop-down menus absolutely */
	.primary-navigation ul ul.toggled-on {
        background: #000000;
		display: block;
		margin-left: 0;
		position: absolute;
        right: 0;
		width: 17em;
		z-index: 10;
	}
	
	.primary-navigation ul ul ul.toggled-on {
		right: 0;
        padding-left: 1em;
        position: relative;
	}
	
	/* Indent 3rd level drop-down menus */
	.primary-navigation ul ul ul a {
		padding-left: 2em;
	}
    
    .nav-menu {
        background: #ffffff;
        padding: 0.250em;
    }

    .dropdown-toggle:hover,
    .dropdown-toggle:focus {
        background: #ffffff;
        border: 0.06em solid #111111;
        color: #000000;
    }

    .no-sidebar .widget-area {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        margin-top: 2.250em;
        grid-gap: 1.125em;
    }
}