/* --- ROOT STYLES --- */
:root {
  --main-dark-color: #412618; /* var(--main-dark-color); */
  --main-light-color: #F5EDD2; /* var(--main-light-color); */

  --accent-dark-color: #241712; /* var(--accent-dark-color); */
  --accent-mid-color: #A9774A; /* var(--accent-mid-color); */
  --accent-light-color: #F5EDD2; /* var(--accent-light-color); */

  --title-font: "ojuju", sans-serif; /* var(--title-font); */
  --body-font: "Lato", "Open Sans", sans-serif; /* var(--body-font); */
}
/* example: background: var(--main-dark-color); */
/* use main for everything, haven't found out what to use accent with yet */



/* --- STANDARDS --- */
/*  %23412618 - Normal State: fill='#412618' (Hex code # is replaced with %23) */
/* @media (min-width: 800px) { */
/* @media (max-width: 799px) { */
.vertical-spacer {
    height: 60px;
}






/* --- SUBMISSION FORM --- */
/* input fields text boxes */
.block-collecting input[type=text],
.block-collecting input[type=url],
.block-collecting textarea {
    width: 100%; /* full width of its container */
    max-width: 100%; /* doesn't exceed the container */
}
/* input fields upload file */
input[type="file"] {
    line-height: 1;
    vertical-align: bottom;
    font-size: 1.125rem !important; /* Match body font-size */
}
/* safari webkit and chrome file-selector */
input[type="file"]::-webkit-file-selector-button,
input[type="file"]::file-selector-button {
-webkit-appearance: none;
appearance: none;
background-color: var(--main-light-color);
color: var(--main-dark-color);
height: 45px; /* Match other input fields */
border-style: dashed;
border-width: 2px;
border-color: var(--main-dark-color);
cursor: pointer;
margin-right: 1rem; /* space between button and filename */
padding: 0 .75rem;
font-size: 1.125rem; /* Match body font-size */
font-family: "Lato", "Open Sans", sans-serif; /* was "Open Sans" */
}
input[type="file"]::-webkit-file-selector-button:hover,
input[type="file"]::file-selector-button:hover {
    border: 2px solid;
}
/* mutli-line text box */
textarea {
    resize: vertical;
}






/* --- ITEMS --- */









/* --- ITEM SETS --- */
/* change widths to 100% */
/* remove grey lines */
@media screen and (min-width: 800px) {
    body.item-set .metadata {
        width: 100%;
        border-left: none;
        padding-left: 0px;
        padding-bottom: 120px;
        margin-right: 30px;
    }
    body.item-set #content .metadata ~ * {
        width: 100%;
        border-left: none;
        padding-left: 0px;
    }
}
/* changes the size of the image thumbnail on desktop */
@media screen and (min-width: 800px) {
    ul.resource-list .resource img {
        height: auto;
        width: 30%; /* adjusted */
        float: right;
        margin-left: 20px /* was 15px */
    }
    .description {
        width: 70%; /* adjusted */
    }
}
/* changes resources-name to bold */
.resource-name {
    font-weight: bold;
}
/* changes lines in between from grey to dark brown */
@media screen {
    ul.resource-list .resource {
        border-bottom: 1px solid var(--main-dark-color);
        padding-bottom: 29px;
        margin: 30px 0;
        overflow: hidden;
        position: relative
    }

    ul.resource-list .resource>*:last-child {
        margin-bottom: 0
    }

    ul.resource-list .resource:first-child {
        border-top: 1px solid var(--main-dark-color);
        padding-top: 29px
    }
}



/* --- HOMEPAGE DESIGN --- */
.home-landing-group {
  position: relative;
}
.home-landing-text-container {
  position: absolute !important;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 85vw;
  padding: 0 2rem;
}
.home-landing-pmci {
  font-size: clamp(2rem, 7.5vw, 8rem);
  line-height: 1.1;
  font-family: 'ojuju', sans-serif;
  text-transform: uppercase;
  font-weight: 800;
  width: 100%;
}
.home-landing-pmci-small-the {
  font-size: 0.7em;
  font-size: 0.7em;
  vertical-align: top;
  position: relative;
  top: .3em;
}
.home-landing-pmci-large-harlem {
  font-size: 1.8em;
  line-height: 1em;
}
.home-landing-body {
  font-size: 1.5rem; /* for subheading not title */
  font-family: sans-serif;
  width: 100%;
}
.home-landing-hero {
  position: relative;
  width: 99vw;
  left: 49.5%;
  right: 49.5%;
  margin-left: -49.5vw !important;
  margin-right: -49.5vw !important;
  text-align: center;
  display: block;
}
.home-landing-hero img {
  width: 100%;
  height: auto;
  display: block;
}



/* --- MAP STYLE --- */
/*leaflet top half popup background*/
.group-type {
  padding: 8px 21px;
  background: var(--main-dark-color);
  display: block;
  margin: -14px -25px 14px -21px;
  font-weight: bold;
}
/*leaflet dashed border around box*/
.leaflet-popup-content-wrapper {
  overflow: hidden;
  border-radius: 0;
  border: var(--main-dark-color);
  border-style: solid;
  border-width: 2px;
  font-family: "Lato", "Open Sans", sans-serif; /* match the site */;
}
/*leaflet remove pointy thing*/
.leaflet-popup-tip {
  display: none;
}
/*leaflet close out X */
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #fff;
	text-decoration: none;
	background: transparent;
}
/*leaflet bottom half popup background*/
/*leaflet top half popup text*/
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: #fff;
	color: #fff;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}




/* --- CONTRIBUTE --- */
.field.required .field-meta:after {
    content: "";
    font-family: "Font Awesome 5 Free";
    font-size: 10px;
    font-weight: 700;
    vertical-align: top;
}
.field .inputs input[type=checkbox] {
    vertical-align: bottom;
    width: 20px;
    height: 20px;
}













/* --- ABOUT --- */
/* Base styling for the container */
.about-archive {
}
.about-archive h3 {
    font-size: 1.125rem; /* Match body font-size */
    font-weight: bold;
    margin-bottom: 0;
    margin-top: 30px;
}
.about-archive p {
    margin-top: 0;
}
/* Styling for the three-column section container */
.pmci-roles {
    display: flex;
    flex-wrap: wrap; /* Allows columns to wrap to the next row on small screens */
    gap: 48px; /* Space between the columns/cards */
    margin-top: 20px;
}
/* Styling for each column/role card */
.pmci-role-card {
    /* Flex-grow allows it to fill space, flex-shrink allows it to shrink */
    flex: 1 1 calc(33.33% - 32px); /* Space between the columns/cards times 2 divide 3*/
    min-width: 250px; /* Minimum width before forcing a wrap */
    padding: none;
    border: none;
    border-radius: none;
}
.pmci-role-card h4 {
    margin-top: 0;
    font-size: 1.125rem; /* Match body font-size */
    font-weight: bold;
    border-bottom: none; /* ie. line between h4 and text */
    padding-bottom: none;
    margin-bottom: 0;
}
.pmci-role-card p {
    margin-top: 0;
}
/* Media Query for Responsiveness: Stacks columns on smaller screens */
@media (max-width: 768px) {
    .pmci-roles {
        /* When the screen is 768px or smaller, 
           the items will naturally stack because their 
           min-width (250px) is too large for three-in-a-row. 
           If you want to explicitly ensure stacking, you can change the flex property: */
        flex-direction: column; 
        gap: 15px; /* Less space when stacked */
    }
    
    .pmci-role-card {
        flex-basis: 100%; /* Each card takes up the full width */
        min-width: initial; /* Remove the min-width restriction */
    }
}



/* --- RESOURCES --- */
/* 1. Main Parent Container (Default for Large Screens / Desktops) */
.partner-logo-cards-group {
    /* GRID Container Setup: 4 columns by default */
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
}
/* 2. Individual Partner Card Styling */
.partner-logo-cards-group .partner-logo-cards {
    /* Background and Border Styles */
    background-color: white;
    border: solid 1px var(--accent-mid-color);
    border-radius: 8px;
    padding: 30px 15px;
    /* Flex for Centering Content inside the Card */
    display: flex; 
    flex-direction: column;
    justify-content: center; /* Vertically centers the content */
    /* Original Sizing and Text Alignment */
    min-width: 150px; 
    box-sizing: border-box;
    text-align: center; 
}
/* 3. Image Styling */
.partner-logo-cards-group .partner-logo-cards img {
    max-width: 100%;
    max-height: 150px;
    height: auto; 
    display: block;
    margin: 0 auto; 
}
/* 4. Caption Styling */
.partner-logo-cards-group .caption {
    font-size: 0.8em;
    margin-top: 12px; 
}

/* Tablet Breakpoint */
/* Applies when the screen width is 768px or less */
@media (max-width: 768px) {
    .partner-logo-cards-group {
        /* Change to 2 equal columns for tablets */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile Breakpoint */
/* Applies when the screen width is 480px or less */
@media (max-width: 480px) {
    .partner-logo-cards-group {
        /* Change to 1 full-width column for phones */
        grid-template-columns: 1fr;
    }
}











/* --- BUTTONS & ICONS --- */
/* --- SEARCH BAR --- */
/* Search Mobile */
#search {
    border-top: 2px solid var(--main-dark-color);
    border-bottom: 2px solid var(--main-dark-color);
}
/* Search Desktop */
@media (min-width: 800px) {
    #search {
        border: 2px solid var(--main-dark-color);
        right: 1vw;
    }
}
button,a.button,.resource-list.preview+a,[type=submit] {
    background-color: #fff;
    color: var(--main-dark-color);
}
input[type=text],input[type=password],input[type=email],input[type=url],textarea {
    /* keep to maintain spacing; border: 1px solid #fff; */
    border: 1px solid #fff;
}

button,a.button,.resource-list.preview+a,[type=submit] {
    background-color: #fff;
    color: var(--main-dark-color);
}
input[type=submit]{
    background-color: var(--main-light-color);
    color: var(--main-dark-color);
    border: 2px dashed var(--main-dark-color);
    padding: .5em .75em .4em .75em;
}
input[type=submit]:hover{
    border: 2px solid;
    opacity: 1;
}
/* mobile fixes */
@media screen and (max-width: 799px) {
    input[type=submit]{
        border: 2px solid var(--main-dark-color);
    }
}




/* --- CUSTOM BUTTONS --- */
.language-btn {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}
/* Custom Buttons like Languages */
.btn-primary {
    background: none;
    border: 2px dashed var(--main-dark-color);
    color: var(--main-dark-color);
    padding: .5em .75em .4em .75em;
}
.btn-primary:hover {
    border: 2px solid;
    opacity: 1;
}
.btn-primary {
    font-size: 1.125rem; /* Match body font-size */
    font-family: "Lato", "Open Sans", sans-serif; /* was "Open Sans" */
    line-height: 1.5rem; /* Match body line-height */
}
.btn-primary-focus {
    background: var(--main-light-color);
    color: var(--main-dark-color);
    border: 2px solid var(--main-dark-color);
    padding: .5em .75em .4em .75em;
}
.btn-primary-focus:hover {
    opacity: 1;
}










/* --- HEADER CHANGES --- */
/* mobile fixes */
@media screen and (max-width: 799px) {
    h1.site-title {
        margin: 7.5px auto;
        padding: 0 32px !important;
    }
    header nav:before {
    border: none;
    }
}
/* pc fixes */
/* background color changes (header) */
header {
    margin: 0 0 75px;
    background-color: var(--main-light-color); /* was #fff; */
    border-bottom: 2px solid var(--main-dark-color);
    position: relative
}
header nav ul.navigation {
        flex-wrap: wrap; /* navigation bar wraps instead of off-screen */
    }
/* --- HEADER NAV CHANGES --- */
@media screen and (min-width: 800px) {
    header nav.closed ul {
        height: auto !important; /* fix clipped background */
        overflow: visible !important; /* fix clipped background */
    }
    /* 1. Positioning Context Fixes (MANDATORY) */
    /* Force the outer <li> to be relative to contain the dropdown */
    header nav ul.navigation > li {
        position: relative !important; 
        /* Remove any static position that might be inherited elsewhere */
    }
    /* Force the inner .parent-link div to be the final reference point for alignment */
    header nav ul.navigation li .parent-link {
        position: relative !important;
        width: auto; 
    }
    /* 2. DROPDOWN INITIAL (HIDDEN) STATE */
    header nav ul.navigation > li > ul {
        position: absolute !important;
        /* Alignment: Left edge aligned with the parent link's start */
        left: 0 !important;    
        top: 100% !important; 
        /* Hiding the menu instantly (no transition) */
        opacity: 0 !important; 
        visibility: hidden !important;
        /* WIDTH FIXES: Ensures the dropdown is not narrow */
        min-width: 250px !important;
        width: max-content !important; 
        /* General cleanup and styling overrides */
        right: auto !important; /* Disable centering component */
        padding: 15px !important; /* Consistent padding */
        list-style: none !important;
        z-index: 10 !important; 
    }
    /* 3. DROPDOWN OPEN (HOVER) STATE */
    header nav ul.navigation > li:hover > ul {
        /* Show the menu instantly */
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important; 
        /* ALIGNMENT OVERRIDES: Aggressively remove centering */
        margin-left: 0 !important;
        margin-right: 0 !important;
        right: auto !important; 
        left: 0 !important;     
        /* WIDTH OVERRIDES: Work with the min-width fix */
        max-width: none !important; 
        width: max-content !important;
    }
    /* 4. INNER LIST ITEM WIDTH FIX (Fixes Super Narrow Sub-Links) */
    /* This forces the individual sub-menu <li> items to take the full width of the dropdown */
    header nav ul.navigation > li > ul > li {
        width: 100% !important; 
        display: block !important; 
        /* Clear out conflicting padding/margin from other rules */
        padding-bottom: .75rem !important;
        margin-right: 0 !important;
    }
}
header nav>ul>li>ul>li.active>a:before {
    content: "";
    display: inline-block;
    width: 1.5em
}
header nav ul.navigation>li:hover>ul:after {
    content: "";
    left: -9999px;
    right: -9999px;
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    border-bottom: 2px solid var(--main-dark-color);
    border-top: 2px solid var(--main-dark-color);
    z-index: -1
}



/* --- FONT CHANGES --- */
/* key font size conversions from px to rem (assuming 16px base) */
/* body - background color, font-size, line height */
/* h1 updated to Ojuju font */
/* h1.site-title updated font size */
nav a {
  font-family: var(--body-font); /* was "Open Sans" */
  font-size: 1.25rem;
  font-weight: 800;
}
body {
    background-color: #F5EDD2; /* was #f8f8f8; */
    color: var(--main-dark-color);
    font-family: "Lato", "Open Sans", sans-serif; /* was "Open Sans" */
    font-size: 1.125rem; /* was 20px, 1.25rem */
    line-height: 1.875rem; /* was 30px */
    font-weight: 500;
    margin: 0;
    word-wrap: break-word;
    overflow-x: none
}
h1 {
    font-size: 2.5rem; /* was 40px */
    line-height: 3.75rem; /* was 60px */
    font-family: "Lato", "Open Sans", sans-serif; /* was "Open Sans" */
    text-transform: uppercase;
    font-weight: 800;
}
h1.site-title {
    font-family: 'Ojuju', sans-serif;
    text-transform: uppercase;
    font-weight: 800;
}
h2 {
    font-family: "Lato", "Open Sans", sans-serif; /* was "Open Sans" */
    font-size: 1.875rem; /* was 30px */
    line-height: 2.8125rem; /* was 45px */
    font-weight: 800;
}
h3 {
    font-size: 1.5625rem; /* was 25px */
    line-height: 2.8125rem; /* was 45px */
}
h4 {
    font-size: 1.40625rem; /* was 22.5px */
}
input, textarea, button, .button, .resource-list.preview+a, select {
    font-family: "Lato", "Open Sans", sans-serif; /* was "Open Sans" */
    font-size: 1.125rem; /* was 20px, 1.25rem*/
    line-height: 1.875rem; /* was 30px */
    margin: 0;
    vertical-align: top
}
input[type=file] {
    line-height: 1;
    vertical-align: bottom;
    font-size: 1rem; /* was 15px, 0.9375rem*/
}
.field-description {
    font-size: 1rem; /* was 15px, 0.9375rem*/
}
.sub-menu li {
    font-size: 1rem; /* was 15px, 0.9375rem*/
    padding: 0.46875rem 0 0.40625rem; /* was 7.5px 0 6.5px */
}
nav.pagination {
    margin-bottom: 1.875rem; /* was 30px */
    font-size: 1.25rem; /* was 20px */
    line-height: 2.8125rem; /* was 45px */
}
.breadcrumbs {
    font-size: 1rem; /* was 15px, 0.9375rem */
    margin: 1rem 0; /* was 15px 0, , 0.9375rem 0 */
    display: none; /* hide breadcrumbs */;
}
h1.site-title {
    font-size: 2.5rem; /* was 25px (1.5625rem) */
    line-height: 3.75rem; /* was 30px (1.875rem) */
    padding-right: 3.75rem; /* was 45px */
    padding-left: 3.75rem; /* was 30px */
}
.property .value .language {
    padding: 0 0.46875rem; /* was 0 7.5px */
    font-size: 1rem; /* was 15px, 0.9375rem */
    margin-right: 0.46875rem; /* was 7.5px */
}
a.metadata-browse-link {
    font-size: 1rem; /* was 15px, 0.9375rem */
}
body.resource #content > h2:first-of-type + h3 {
    font-size: 1rem; /* was 15px, 0.9375rem */
    font-style: italic;
    margin: -1.875rem 0 1.875rem; /* was -30px 0 30px */
}
.property dt {
    margin-bottom: 0;
    font-size: 1.125rem; /* was 15px, 0.9375rem */
    font-weight: bold
}
@media screen and (min-width: 800px) {
    /* px to rem */
    header nav ul.navigation > li > ul > li {
        font-size: 1rem; /* was 15px, 0.9375rem */
        padding-bottom: 1.875rem; /* was 30px */
    }
    #search form input[type=text], 
    #search form button[type=submit] {
        height: 1.875rem; /* was 30px */
        font-size: 1rem; /* was 15px, 0.9375rem */
        line-height: 1.875rem; /* was 30px */
    }
}





/* --- CONTENT & LAYOUT CHANGES --- */
/* items displayed in two columns on desktop */
@media screen and (min-width: 800px) {
    #content dl .property,
    #content .item-sets .property,
    #content .site-pages .property,
    #content .media-list .property {
        display: grid;
        grid-template-columns: 200px 1fr;
        column-gap: 1rem;
        margin-bottom: 1rem;
        align-items: start;
    }
    #content dl .property dt,
    #content .item-sets .property dt,
    #content .site-pages .property dt,
    #content .media-list .property dt {
        grid-column: 1;
        font-weight: bold;
        margin-bottom: 0.25rem;
    }
    #content dl .property dd.value,
    #content .item-sets .property dd.value,
    #content .site-pages .property dd.value,
    #content .media-list .property dd.value {
        grid-column: 2;
        margin-bottom: 0.25rem;
        width: 100%;
    }
}
/* Default width of site */
#content {
    width: 100%;
    max-width: 60rem; /* change if needed */
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem; /* less padding for mobile */
    box-sizing: border-box;
}
/* used this to adjust the margin for the h2 & h3 for the item page */
@media screen {
    body.resource #content>h2:first-of-type+h3 {
        text-transform: none;
        margin: 2rem 0 0;
    }
}
/* used this to adjust the spacing between single column metadata */
@media screen {
    .property {
        margin-bottom: 2rem
    }
}
@media screen {
    .value:not(:last-child) {
        margin-bottom: 0
    }
}



/* --- FOOTER --- */
footer {
    width: 100%;
    max-width: 60rem; /* same as #content */
    margin-left: auto;
    margin-right: auto;
    padding: 3rem 2rem; /* less padding for mobile */
    box-sizing: border-box;
}
/* Flexbox container for the four columns */
.footer-line-break {
    border-top: solid 2px var(--main-dark-color);
    padding-bottom: 48px;
}
.footer-content-wrapper {
    display: flex;
    justify-content: space-between; 
    margin: 0 auto; 
    gap: 30px; 
}
.footer-column {
    /* Set column width */
    flex-basis: 25%;
    min-width: 200px;
}

/* --- FOOTER COL 1 --- */
/* Harlem PMCA Text Logo (h1) */
.footer-site-title {
    margin: 0;
    font-family: var(--title-font);
    font-size: 1.8em; 
    font-weight: 800;
    text-transform: uppercase; 
}
.footer-site-title a {
    color: var(--main-light-color);
    text-decoration: none;
    transition: color 0.3s;
}
.footer-col-info {
    min-width: default; /*change if needed */
}

/* Used for "Coming Early 2026" or "beta" */
.footer-heading {
    font-size: 1.25em;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 800;
    text-transform: none;
}

/* Social Icons */
.social-icons-wrapper {
    display: flex;
    gap: 15px; 
    margin-top: 20px; /* Space below the logo/heading area */
}
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--main-dark-color);
}
.social-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor; 
    transition: fill 0.3s;
}

/* --- FOOTER COL 2 --- */
/* contact info column- */
.footer-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-nav-menu li {
    /* Targets li (Home, Archive, Map, Contribute, About, Resources) */
    margin: 0;
}
.footer-nav-menu a {
    color: var(--main-dark-color);
    text-decoration: none;
    transition: color 0.3s;
    display: inline-block;
}
.footer-nav-menu a:hover {
    color: var(--accent-dark-color);
}
/* Styling for the nested Archive links (ul inside li.parent) */
.footer-nav-menu .parent > ul {
    /* Targets the nested ul (Exhibits, Collections, Items) */
    list-style: none;
    padding: 0 0 0 15px; /* Indent the nested list */
    margin: 0; /* was 5px 0 10px 0 */
}
.footer-nav-menu .parent > ul li {
    margin-bottom: 5px;
}

/* --- FOOTER COL 3 --- */
/* contact info column- */
.contact-info p,
.copyright-info p {
    margin: 0 0 5px 0;
    line-height: 1.5;
    font-size: 0.95em;
}
.contact-info a {
    color: var(--main-dark-color);
    text-decoration: none;
}
.copyright-info {
    margin-top: 20px;
}
.footer-col-contact {
    min-width: 300px;
}

/* --- FOOTER RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
    .footer-content-wrapper {
        /* Stack columns vertically on mobile */
        flex-direction: column; 
        align-items: flex-start;
        gap: 40px; 
    }
    .footer-column {
        flex-basis: auto; 
        width: 100%;
        min-width: auto;
    }
}

/* --- FOOTER SOCIAL ICONS STYLING --- */
.social-icons-wrapper {
    display: flex;
    gap: 15px; 
    margin-top: 20px;
}
.social-icon {
    /* Required base properties */
    display: block; 
    width: 30px; 
    height: 30px;
    text-indent: -9999px; /* Hides text, only shows background icon */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}
/* Facebook Icon */
.social-icon.facebook {
    /* Normal State: fill='#412618' */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='%23412618' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/></svg>");
}
/* Instagram Icon */
.social-icon.instagram {
    /* Normal State: fill='#412618' */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 26'><path fill='%23412618' d='M26.9922,13.12c0-1.952.0071-3.904-.0054-5.856a7.4912,7.4912,0,0,0-.12-1.3338,6.9762,6.9762,0,0,0-2.4989-4.1911,7.3149,7.3149,0,0,0-4.73-1.7279c-4.031-.02-8.0623-.0061-12.0935-.0071a7.347,7.347,0,0,0-3.6653.907,6.9367,6.9367,0,0,0-3.85,6.2265C-.025,11.0332.0121,14.93.0169,18.8272a6.5069,6.5069,0,0,0,.8908,3.3475A7.2785,7.2785,0,0,0,7.419,25.9708c4.0565.0558,8.1145.0148,12.1719.0131a7.6378,7.6378,0,0,0,4.9015-1.8408,6.9218,6.9218,0,0,0,2.4928-5.276C27.0143,16.9517,26.9915,15.0354,26.9922,13.12ZM13.4174,20.21a7.3625,7.3625,0,0,1-7.4061-7.2182,7.3505,7.3505,0,0,1,7.4992-7.2115,7.3516,7.3516,0,0,1,7.4852,7.2146A7.37,7.37,0,0,1,13.4174,20.21ZM22.4962,5.7791a1.48,1.48,0,0,1-1.5005-1.4476,1.5014,1.5014,0,0,1,3-.0009A1.481,1.481,0,0,1,22.4962,5.7791ZM13.4969,8.3571a4.7331,4.7331,0,0,0-4.8183,4.6445,4.74,4.74,0,0,0,4.8241,4.6413,4.74,4.74,0,0,0,4.8187-4.6466A4.7342,4.7342,0,0,0,13.4969,8.3571Z'/></svg>");
}
/* Twitter Icon */
.social-icon.twitter {
    /* Normal State: fill='#412618' (Hex code # is replaced with %23) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23412618' d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/></svg>");
}