header:after,
nav:after,
footer:after,
.module-block:after,
.gallery:after,
.social:after {
  content: ".";
  display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#logo {
	color: var(--light-hex);
	margin: auto;
	width: calc(100dvh - 20rem) !important;
	max-width: 100%;
}

#logo p {
	color: var(--light-40-rgba);
	font-variant: small-caps;
	text-transform: uppercase;
	line-height: 0;
}

header, footer, article, section {
	/* Giving a display value to the HTML5 rendered elements: */
	display: block;
}

header { 
    margin: 3rem auto;
}

header:before {
    display: block !important;
    position: absolute;
    font-size: 300% !important;
    top: -0.5rem;
    float: right;
    right: 0;
    color: var(--primary-80-rgba);
}

article > header {
    border-left: 0.25rem dotted var(--primary-20-rgba);
    padding-left: 1dvw;
}

header .heading {
    font-size: 150%;
    display: inline;
    border: none !important;
    text-align: center;
}

header p { 
	color: var(--dark-hex); 
	margin: 0;
	font-family: var(--house-font);
}

h1 {
	font-size: 200%;
 	margin: 0;
	color: var(--dark-hex);
	font-weight: normal; 
	line-height: auto;
}

h2 {
	font-size: 24px;
	letter-spacing:2px;
	text-transform: uppercase;
	font-weight: normal; 
	margin: 0 0 24px; 
	line-height: auto;
}


h3 {
	font-size: 30px;
	font-weight: normal; 
	margin: 0 0 0.5rem; 
	line-height: auto;
}

p {
	font-family: var(--house-font);
	margin-bottom: 24px;
}

nav li {
	list-style-type: none;
}

nav ul li a {
	color: inherit;
	background: none;
	text-decoration: none;
	margin: auto;
	display: block;
	width: 100%;
	transition: all 0.25s ease-in-out;
}

nav ul li ul li a:hover {
	background: none;
	width: 100%;
}

nav ul ul {
	display: none;
}

nav li.active ul {
	display: block;
}

.accordian:before {
	width: 100%;
}

.accordian:after {
    font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: "\f067";
	display: block;
	float: right;
	height: revert;
}

ul.drop {
	margin: 1dvw 0 0 !important;
	background: transparent;
}

ul.drop li {
	padding: unset;
	background: var(--dark-20-rgba);
}

@media screen and (max-width: 1280px) {

	/* Main */

	.container {
		margin-top: -3rem !important;
	}

	/* Sidebar */

	#sidebar {
		font-size: initial !important;
	}

	#sidebar.inactive .toggle > span {
		display: none !important;
	}

	#sidebar.active .toggle {
		text-indent: 3rem !important;
	}

	#sidebar.active .toggle {
		left: 0.5rem;
		margin: 0.5rem auto !important;
		width: calc(100% - 1dvw) !important;
		background: var(--dark-80-rgba);
		text-align: left;
		-webkit-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out;
	}

	#sidebar.active .toggle:before {
		left: 1dvw !important;
		right: 1dvw !important;
		-webkit-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out;
	}

	#sidebar #menu > nav ul li {
		color: var(--light-80-rgba) !important;
	}

}

/* XSmall */

@media screen and (max-width: 736px) {

    /* Basic */

    html,
    body {
        min-width: 320px;
        font-size: smaller;
    }

    /* Image */

    /* Header */

    header > .txt {
        text-align: left;
    }

    header.icon.solid:before {
        padding-top: 0.5rem;
		font-size: calc(100% + 1dvw) !important;
    }

    header .avatar {
        margin: 0 auto 1.5rem auto;
    }

    header p {
        margin: 1dvw 0 0 0;
    }

    footer {
        padding: 1.5rem;
    }

    /* Main */

    #wrapper {
        margin-top: -2.5rem;
    }

    .container {
        width: calc(100% - 2rem) !important;
        margin: 0.5rem 1dvw !important;
	}

}