body {
	font-family: Tahoma, sans-serif;
	font-size: 15px;
    height: 100%;
	margin: 0;
    background: #97a9db;
    bottom: 0;
    overflow-x: hidden;
/* 
background: rgb(2,0,36);
background: linear-gradient(0deg, rgba(2,0,36,1) 70%, rgba(151,169,219,1) 100%);
 */
}

.bonheur-royale-regular {
  font-family: "Bonheur Royale", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
  text-shadow: 2px 2px #666;
}
@media (min-width: 768px) {
    .bonheur-royale-regular {
        font-size: 80px;
    }    
}
@media (max-width: 767px) {
    .bonheur-royale-regular {
        font-size: 70px;
    }    
}
@media (max-width: 576px) {
    .bonheur-royale-regular {
        font-size: 60px;
    }    
}
@media (max-width: 300px) {
    .bonheur-royale-regular {
        font-size: 50px;
    }    
}

section.content section.content-section textarea {
    color: #523b01;
}
input#first_name,
input#lname,
input#email,
textarea#message {
    color: black !important;
}

header.top-nav {
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
    font-weight: 500;
    font-size: 20px;
}

.contact-link:link
{
    text-decoration: none;
}

a.link-box {
    border: 1px solid #aec3b0;
    font-size: medium;
    padding: 0.5em;
    text-decoration: none;
    color: #523b01;
}
a.link-box:hover {
    background: #aec3b0;
}

header div.wolfsong {
    text-align: right;
    letter-spacing: 0.5em;
}
header div.contact, header div.contact a {
    text-align: left;
    letter-spacing: 0.5em;
}
.wolfsong, .contact {
/*	padding: 0 0 13px 30px; */
	text-transform: uppercase;
    font-family: Helvetica;
    flex: 1;
/*    position: absolute; */
}




@media (min-width: 768px) {
    .wolfsong {
		font-size: 24px;
/*        border-bottom: 2px solid #999; */
        width: 100%;    
    }   
}
@media (max-width: 767px) {
    .wolfsong {
		font-size: 18px;
/*        border-bottom: 2px solid #999; */
        width: 100%;    
    }    
}
@media (max-width: 576px) {
    .wolfsong {
		font-size: 14px;
/*        border-bottom: 2px solid #999; */
        width: 100%;    
    }    
}



main, header, section, aside, footer {
    margin: 0;
    padding: 10px 0;
    color: #ffffff;
}
header, section.hero, footer {
	display: flex;
    flex-direction: column;
    align-items: center;
}
main {
}
header {
}

header img {
	width: 60px;
	height: 60px;
}
@media (min-width: 768px) {
	header img {
		width: 80px;
		height: 80px;
	}
}
@media (max-width: 767px) {
	header img {
		width: 70px;
		height: 70px;
	}
}
@media (max-width: 576px) {
	header img {
		width: 60px;
		height: 60px;
	}
}

.svg, svg {
}
.filter-logo {
	filter: brightness(0) saturate(100%) invert(24%) sepia(8%) saturate(3290%) hue-rotate(359deg) brightness(86%) contrast(101%);
/* 	filter: invert(12%) sepia(20%) saturate(1054%) hue-rotate(11deg) brightness(95%) contrast(83%); */
}

.item-wrapper {
	display: flex;
    flex-direction: row;
    flex-flow: wrap;
    gap: 15px;
}

.content {
	flex: 1;
	margin: 0;
	padding: 0;
	width: 100vw;
}
.content .category {
    font-size: 12px;
    color: #000;
    margin: 0;
    padding: 40px 60px;
    height: 500px;
    align-content: end;
    background: #aec3b0;
    border-top: 2px solid #2f4f4f
}
.category-title {
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 20px 0 6px 0;
}
.category-text {
	padding: 10px 0 30px 0;
    font-size: 1rem;
    font-style: italic;
}
@media (min-width: 768px) {
    .content .category {
    }   
	.category-title {
    	font-size: 2rem;
	}
	.category-text {
    	font-size: 1rem;
	}
}
@media (max-width: 767px) {
    .content .category {
    }   
	.category-title {
    	font-size: 1.8rem;
	}
	.category-text {
    	font-size: 1rem;
	}
}
@media (max-width: 576px) {
    .content .category {
    }   
	.category-title {
    	font-size: 1.25rem;
	}
	.category-text {
    	font-size: 1rem;
	}
}

.book-image img,
.illustration-image img,
.woodworking-image img,
.photography-image img {
	max-width: 90vw;
}


.content #Woodworking.category {
    /* background: #FFB000; */
    height: auto;
}
.woodworking-image {
/*     box-shadow: 12px 12px 2px 1px #7f7f7f33; */
}
.woodworking-image img {
    height: 200px;
    width: auto;
}


.content #BookDesign.category {
    /* background: #FE6100; */
    height: auto;
}
.book-image {
/*     box-shadow: 12px 12px 2px 1px #7f7f7f33; */
}
.book-image img {
    height: 200px;
    width: auto;
}


.content #Illustration.category {
    /* background: #DC267F; */
    height: auto;
}
.illustration-image {
/*     box-shadow: 12px 12px 2px 1px #7f7f7f33; */
}
.illustration-image img {
    height: 300px;
    width: auto;
}

.content #Photography.category {
    /* background: #785EF0; */
    height: auto;
}
.photography-image {
/*     box-shadow: 12px 12px 2px 1px #7f7f7f33; */
}
.photography-image img {
    height: 300px;
    width: auto;
}


.sidebar {
	display: none;
	flex: 0 1 300px;
}
footer {
}
.wrapper {
	display: flex;
    margin: 0;
    padding: 0;
/*     max-width: 75rem; */
}

.hero .title {
	display: flex;
    align-items: center;
}


.navigation-row {
	margin: 0;
	padding: 6px 0 12px 0;
	display: flex;
    flex-direction: row;
    align-items: center;
}
.navigation-row .category {
    padding: 0 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: Tahoma, sans-serif;
    color: #000;
}
.navigation-row .category a:link,
.navigation-row .category a:visited:active,
.navigation-row .category a:visited,
.navigation-row .category a:link:active {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.navigation-row .category a:hover {
	color: #555;
}
@media (min-width: 768px) {
	.navigation-row .category {
	    font-size: 12px;
	}
}
@media (max-width: 767px) {
	.navigation-row .category {
	    font-size: 11px;
	}
}
@media (max-width: 576px) {
	.navigation-row .category {
	    font-size: 10px;
	}
}
@media (max-width: 500px) {
	.navigation-row .category {
	    flex-direction: column;
	}
}





/*
  X-Small devices (portrait phones, less than 576px)
  No media query for `xs` since this is the default in Bootstrap
*/
/*
  Small devices (landscape phones, 576px and up)
*/
@media (min-width: 576px) {
    .flex-container {
        display: flex;
    }   
}

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

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

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

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