@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Hammersmith+One&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap'); /*************************************************************************** **************************************************************************** ******************************** GLOBAL CSS ******************************** **************************************************************************** ****************************************************************************/ html { scroll-behavior: smooth; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 400; color: black; } @media screen and (min-width: 960px) { html { scroll-behavior: smooth; font-family: 'Open Sans', sans-serif; font-size: 16px; /* line-height: 1.6rem; */ line-height: 1.5rem; font-weight: 400; color: black; } } /** Makes all

inside . Otherwise color becomes blue as per defautl browser text link color. Will not use color black rule. **/ a p { color: black; } p.body-copy-gray { /* color: #727272; */ color: #000000; } p { margin-top: 0rem; } /** CSS won't target Contact Form or Photography Buttons for FONT-FAMILY under . Need their own selector. **/ .tabs-photography button, .contact-form-name-field, .contact-form-email-field, .contact-form-message-field, .contact-form-submit-button { font-family: 'Open Sans', sans-serif; font-size: 1rem; font-weight: 400; } @media screen and (min-width: 960px) { .tabs-photography button, .contact-form-name-field, .contact-form-email-field, .contact-form-message-field, .contact-form-submit-button { font-family: 'Open Sans', sans-serif; font-size: 1rem; font-weight: 400; } } body { margin: 0px; } .grid-container { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 0px; border: 0px solid black; } /** Offets global nav links to h2 headers are not behind sticky header DIV **/ a.anchor { position: relative; display: block; top: -6rem; /** When margin-top for section is 200px, this is 100px **/ margin-right: auto; margin-left: auto; width: 50%; text-align: center; border: 0px solid black; visibility: hidden; } /** Offets global nav links to h2 headers are not behind sticky header DIV **/ @media screen and (min-width: 960px){ a.anchor { position: relative; display: block; top: -6rem; /** When margin-top for section is 200px, this is 100px **/ margin-right: auto; margin-left: auto; width: 50%; text-align: center; border: 0px solid black; visibility: hidden; } } /** NEED TO FIND OUT WHY A SEPARATE THING IS NEEDED **/ a.anchor-logo { position: relative; display: block; top: -6rem; margin-right: auto; margin-left: auto; width: 50%; text-align: center; border: 0px solid black; visibility: hidden; } /* a.logo { border: 1px solid black; } */ img.logo { height: 1.5rem; display: block; border: 0px solid black; } /** Container for left, middle, and right header grid items **/ /* header.home { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 0; position: sticky; top: 0; margin-bottom: 1rem; z-index: 999; border-bottom: 1px solid black; } */ /** Container for left, middle, and right header grid items **/ header { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 0; position: sticky; top: 0; margin-bottom: 1.0rem; z-index: 999; border-bottom: 1px solid black; } /** Container for left, middle, and right header grid items **/ @media screen and (min-width: 960px) { header { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, 1fr); /* grid-gap: 0; */ grid-column-gap: 0rem; position: sticky; top: 0; margin-bottom: 2rem; z-index: 999; border-bottom: 1px solid black; } } .header-left, .header-middle, .header-right { height: 4rem; /* height: 55px; */ background-color: rgba(255, 255, 255, .90); /* position: sticky; */ top: 0; border-bottom: 0px solid black; z-index: 999; } .header-left { grid-column: 1 / 1; /* grid-row: 1 / 2; */ } /** Container for logo and global