/* Main CSS for www.jerryblank.com */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Merriweather+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500;1,600&family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}

*, *:before, *:after {
box-sizing: border-box;
}

body {
height: 100vh;
overflow-x: hidden;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #ffffff;
background-color: #2a2a2a;
text-rendering: optimizeLegibility;
}

/*   Text styles   */

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Merriweather Sans', sans-serif;
font-weight: 500;
font-size: 18px;
letter-spacing: 0.03em;
word-spacing: 0.15em;
text-align: left;
margin: 0;
padding-bottom: 10px;
color: #ffffff;
text-shadow: 1px 1px 5px #000000, 1px 1px 5px #000000;
}

h1 {
font-family: 'Cinzel', serif;
font-size: 26px;
font-weight: 600;
letter-spacing: 0.03em;
word-spacing: 0.15em;
color: #ffffff;
}

h2 {
font-size: 40px;
}

h3 {
font-family: 'Cinzel', serif;
font-size: 30px;
font-weight: 600;
letter-spacing: 0.04em;
word-spacing: 0.2em;
text-align: center;
color: #ffba5b;
}

#page-heading-gallery h3 {
font-size: 36px;
}

#page-heading p {
font-style: italic;
font-size: 115%;
}

h4 {
font-size: 24px;
}

h5 {
font-size: 22px;
}

h6 {
font-size: 16px;
font-weight: 400;
color: #d8d8d8;
text-align: center;
text-shadow: 1px 1px 2px #000000, 1px 1px 3px #000000;
}

h6 strong {
font-weight: 600;
}

.logo-hidden-mobile-left, .logo-hidden-768 {
display: block;
}

p {
font-size: 16px;
font-weight: 400;
color: #dddddd;
letter-spacing: 0.03em;
line-height: 1.4;
padding-bottom: 1.0em;
}

p strong {
font-weight: 600;
color: #ffffff;
}

p em {
font-style: italic;
color: #ffffff;
}

#page-heading p {
text-align: center;
color: #ffffff;
padding-bottom: 0.3em;
}

input:focus, select:focus, button:focus, textarea:focus {
outline: 1px solid #808080;
}

ul,
ol {
padding: 0;
margin: 0;
}

a, a:hover, a:focus {
text-decoration: none;
}

a, a strong, .text-yellow {
color: #fff888;
}

a:hover, a:hover strong, a:focus, a:focus strong {
color: #ffe14d;
}

.arrow-up {
font-weight: 500;
font-size: 1.4em;
}

.arrow-right {
font-weight: 700;
font-size: 1.4em;
}

.text-yellow-pale {
color: #fffbbd;
}

.BlogSubhead {
color: #ffc575;
font-size: 120%;
}

.GoToTop, .GoToTop strong, .GoToTop a, .GoToTop a strong {
text-align: center;
color: #ffba5b;
}

.GoToTop a:hover, .GoToTop a:hover strong {
color: #ff9e2e;
}

.text-right {
text-align: right;
}

.text-left {
text-align: left;
}

.text-center {
text-align: center;
}

.text-black {
color: #000000;
}

.text-white {
color: #ffffff;
}

.text-bolder {
font-weight: bolder;
}

.text-italic {
font-style: italic;
}

/*   Styles for embedded Google Maps   */

.GoogleMap {
padding-bottom: 1px;
position: relative;
min-height: 440px;
}

.GoogleMap iframe {
min-height: 440px;
width: 100%;
left: 0;
top: 0;
position: absolute;
}

.YouTubeContainer {
padding-bottom: 0;
position: relative;
min-height: 252px;   /*  Makes sure 1px border is properly aligned  */
}

.YouTubeContainer iframe {
width: 100%;
left: 0;
top: 0;
position: absolute;
}

/* ----   MOBILE DEVICE MENU header CSS is on THIS stylesheet    ---- */
/* ----   MOBILE DEVICE MENU page column CSS is in “menu.html”   ---- */

/*   Body and container styles   */

#page-wrapper-fullwidth {
display: block;
position: relative;
top: 120px;
margin: 0;
padding: 0 0 25px 0;
}

#page-wrapper-fixed-width {
display: flex;
position: relative;
top: 165px;
justify-content: center;
}

#page-content-fixed-width {
display: block;
width: center;
max-width: 1300px;
padding: 0;
}

.background-dark{
background-color: #1f1f1f;
}

/* --  Header and header-section styles  -- */

#page-header-container, #header-section-1, #header-section-2, #header-section-3, #header-section-3 {
display: block;
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 0;
}

#page-header-container {
position: absolute;
width: 100%;
background-color: transparent;
}

#header-section-1 {        /*  --------    1. Website logotype    ----------  */
top: 0;
left: 0;
width: 100vw;
z-index: 48;
}

#logotype {                /*  .... Desktop (non-mobile) ....................  */
display: block;
position: relative;
top: 18px;
left: 30px;
height: 110px;
width: calc(100vw - 290px);
}

#logotype h1 {
font-weight: 500;
font-size: 24px;
padding: 0 0 5px 0;
text-align: left;
}

#logotype-mobile-h {        /*  ... Mobile, horiz. (Viewport > 768px wide) ...................  */
display: none;
position: relative;
top: 10px;
left: 10px;
width: calc(100vw - 270px);
}

#logotype-mobile-h h1 {
padding: 0;
text-align: left;
font-size: 24px;
line-height: 1.5em;
}

#logotype-mobile-h-menu {   /*  ... Mobile, horizontal, for "menu.html" ONLY...................  */
display: block;
position: relative;
top: 7px;
left: 25px;
width: calc(100vw - 60px);
}

#logotype-mobile-h-menu h1 {
padding: 0;
text-align: left;
font-size: 24px;
line-height: 1.5em;
}

#logotype-mobile-h-index {  /*  ... Mobile, horizontal, for "index.html" SPLIT SCREEN ONLY.......  */
display: none;
position: relative;
top: 10px;
left: 10px;
width: 230px;
}

#logotype-mobile-h-index h1 {
padding: 0;
text-align: center;
font-size: 20px;
line-height: 1.5em;
}

#logotype-mobile-v {       /* .... Mobile, vertical (Viewport < 768px wide)........................  */
display: none;
position: relative;
top: 8px;
left: 5px;
width: calc(100vw - 260px);
height: 75px;
}

#logotype-mobile-v h1 {
padding: 0;
text-align: center;
font-size: 20px;
line-height: 1.3em;
}

#logotype-mobile-v-menu {   /*  ....Mobile, vertical, for "menu.html" ONLY (Viewport < 640px wide)...  */
display: none;
position: relative;
top: 8px;
left: 8px;
width: calc(100vw - 60px);
height: 95px;
}

#logotype-mobile-v-menu h1 {
padding: 0;
text-align: center;
font-size: 20px;
line-height: 1.3em;
}

/* BEGIN Firefox CSS adjustments  */

@-moz-document url-prefix() {

#logotype-mobile-h h1 {
font-size: 19.9px;
line-height: 1.5em;
}

#logotype-mobile-h-menu h1 {
font-size: 19.9px;
line-height: 1.5em;
}

#logotype-mobile-h-index h1 {
font-size: 16.6px;
line-height: 1.5em;
}

#logotype-mobile-v h1 {
font-size: 16.6px;
line-height: 1.3em;
}

#logotype-mobile-v-menu h1 {
font-size: 16.6px;
line-height: 1.3em;
}
}

/*  END Firefox CSS adjustments   */

                             /*  ....Logotype bold/yellow text CSS  .......  */

#logotype h1 .bold-yellow {
font-weight: 600;
color: #fffbbd;
font-size: 125%;
}

#logotype-mobile-h h1 .bold-yellow,
#logotype-mobile-h-index h1 .bold-yellow,
#logotype-mobile-h-menu h1 .bold-yellow,
#logotype-mobile-v h1 .bold-yellow,
#logotype-mobile-v-menu h1 .bold-yellow {
color: #fffbbd;
font-size: 115%;
}
                             /*  ....Logotype reduced-size text CSS  .......  */
							 
#logotype h1 .logo-reduced,
#logotype-mobile-h h1 .logo-reduced {
color: #bbbbbb;
font-size: 97%;
}

#logotype-mobile-h-menu h1 .logo-reduced {
color: #bbbbbb;
font-size: 99%;
}

#logotype-mobile-h-index h1 .logo-reduced,
#logotype-mobile-v h1 .logo-reduced,
#logotype-mobile-v-menu h1 .logo-reduced {
color: #bbbbbb;
font-size: 90%;
}

#header-section-2 {     /* -- 2. Contact Info <div> -- */
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
top: 10px;
right: 30px;
left: auto;
z-index: 49;
}

.contact-image {
display: block;
width: center;
}

.contact-image img {
width: 250px;
height: auto;
image-rendering: high-quality;
margin: 0 auto 0 auto;
}

.contact-URI {
display: block;
position: relative;
top: -4px;
text-align: center;
font-size: 17.0px;
}

#mobile-instructions,  #mobile-instructions-index-left, .contact-URI a, .contact-URI a:hover {
font-family: 'Merriweather Sans', sans-serif;
text-align: center;
letter-spacing: 0.04em;
font-weight: 300;
color: #fffbbd;
text-shadow: 1px 1px 5px #000000;
}

#mobile-instructions, #mobile-instructions-index-left {  /* -- 5. Mobile instructions <div> -- */
display: none;
position: absolute;
left: 0;
font-style: italic;
letter-spacing: 0.04em;
word-spacing: 0.15em;
border-top: 1px solid #555555;
border-bottom: 1px solid #555555;
color: #ffffff;
}

#mobile-instructions {
top: 85px;
width: 100vw;
line-height: 20px;
font-size: 14px;
}

#header-section-3 {     /* --  3. Desktop (non-mobile) browser navigation menu #div  -- */
display: block;         /* --     Horizontal gray bar position and styling           -- */
position: absolute;
top: 120px;
width: 100vw;
text-align: right;
font-weight: 600;
height: 25px;
background: #555555;
padding: 0px 25px 0 25px;
z-index: 150;
}

#header-section-3 nav.primary-navigation {
margin: 0 auto;
display: block;
position: absolute;
right: 25px;
padding-top: 1px;
text-align: center;
font-size: 15px;
text-shadow: 1px 1px 3px #000000;
}

#header-section-3 nav.primary-navigation ul li {
list-style: none;
margin: 0 auto;
border-left: 3px solid #d74c00;
display: inline-block;
padding: 0 25px 0 25px;
position: relative;
text-decoration: none;
text-align: center;
font-family: 'Merriweather Sans', sans-serif;
}

#header-section-3 nav.primary-navigation li a {
color: #ffaa00;
text-shadow: 1px 1px 3px #000000;
}

#header-section-3 nav.primary-navigation li a .menu-pointer-down {
font-size: 85%;
}

#header-section-3 nav.primary-navigation li a:hover {
color: #ffea00;
text-shadow: 1px 1px 3px #000000;
}

#header-section-3 nav.primary-navigation li:hover {
cursor: pointer;
}
 
#header-section-3 nav.primary-navigation ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
padding-left: 0;
left: -3px;
top: 23px;
display: none;
background: rgba(0,0,0,0.8);   /* --  Menu dropdown background opacity  -- */
}

#header-section-3 nav.primary-navigation ul li:hover > ul, #header-section-3 nav.primary-navigation ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
min-width: 110px;
max-width: 193px;
text-align: left;
padding-top: 5px;
}

#header-section-3 nav.primary-navigation ul li ul li {
clear: both;
width: 100%;
text-align: left;
font-size: 90%;
margin-bottom: 5px;
border-style: none;
text-shadow: 1px 1px 3px #000000;
}

#header-section-3 nav.primary-navigation ul li ul li a {
margin-left: -7px;
line-height: 25px;
padding: 0 0 0 7px;
border-left: 3px solid transparent;
text-shadow: 1px 1px 3px #000000;
}

#header-section-3 nav.primary-navigation ul li ul li a:hover {
border-left: 3px solid #d74c00;
}

#header-section-3 nav.primary-navigation a {
text-decoration: none;
text-shadow: 1px 1px 3px #000000;
}

#header-section-3 nav.primary-navigation a:hover {
color: #ffea00;
text-shadow: 1px 1px 3px #000000;
}

/* --  End navigation menu CSS  -- */

#desktop-screen-instructions {
display: block;
position: relative;
background: none;
top: 2px;
left: 5px;
width: 500px;
font-family: 'Merriweather Sans', sans-serif;
font-size: 15.0px;
font-style: italic;
letter-spacing: normal;
word-spacing: 0.1em;
text-align: left;
font-weight: 300;
color: #eeeeee;
text-shadow: 1px 1px 3px #000000;
}

/* --  End #header-section-3  -- */

#header-section-4 {                           /* -- 4. Open menu / close mobile menu icon -- */
display: none;
}

#heading-section-6 {            /*  6. Black divider bar for “menu.html” only, mobile devices only     */
display: block;
position: absolute;
width: 100%;
background: #000000;
border-top: 1px solid #555555;
border-bottom: 1px solid #555555;
top: 85px;
height: 32px;
}

#heading-text-6 {    /*  Header text styling on divider bar for “menu.html” only, mobile devices only   */
font-family: 'Cinzel', serif;
font-weight: 600;
letter-spacing: 0.04em;
word-spacing: 0.2em;
text-align: center;
color: #ffba5b;
font-size: 23px;
line-height: 1.4em;
}

/* BEGIN Firefox CSS adjustments */

@-moz-document url-prefix() {

#heading-text-6 {
font-size: 19.1px;
}
}

/*  END Firefox CSS adjustments  */

/* -----------------------------  Page footer  ------------------------------ */

#footer-info p {
text-align: center;
color: #aaaaaa;
padding-top: 10px;
font-size: 0.75em;
}

/* ---------------  Main div styles, displayed beneath header ---------------  */

#content-container, #content-container-masonry {
display: block;
width: 100%;
margin: 50px 0 0 0;
padding: 0 15px 0 15px;
}

#content-container-masonry {
padding: 0;
}

sub,
sup {
line-height: 0;
position: relative;
vertical-align: baseline;
}

sup {
top: -.5em;
}

sub {
bottom: -.25em;
}

img {
border: 0;
}

input, select, textarea {
background: #1f1f1f;
width: 200px;
border: 2px solid #000000;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
color: #ffffff;
}

input {
line-height: normal;
overflow: visible;
}

textarea {
overflow: auto;
vertical-align: top;
}

.blog-date {
font-family: 'Merriweather Sans', sans-serif;
font-weight: 500;
letter-spacing: 0.04em;
word-spacing: 0.15em;
font-style: italic;
color: #bbbbbb;text-shadow: 1px 1px 5px #000000, 1px 1px 5px #000000;
text-align: left;
padding: 15px 0 5px 0;
font-size: 18px;
}

.blog-title {
font-family: 'Merriweather Sans', sans-serif;
font-weight: 400;
letter-spacing: 0.04em;
word-spacing: 0.1em;
color: #fffbbd;
text-shadow: 1px 1px 5px #000000, 1px 1px 5px #000000;
text-align: left;
padding: 0;
margin-bottom: 5px;
font-size: 24px;
}

.GalleryText {
text-align: center;
padding: 10px 15px 10px 15px;
}

.ImageGalleryText {
text-align: center;
padding: 6px 10px 0 10px;
}

.NoBkgrdOrBorder {
background: none;
border: none;
}

.ImageFrameV, .ImageFrameH {
display: block;
margin: 5px auto 20px auto;
border: 3px solid #000000;
height: 100%;
width: auto;
}

.ImageFrameH {
width: 100%;
height: auto;
}

.PhotoFrame100, .PhotoFrameL50, .PhotoFrameR50, .PhotoFrameL33, .PhotoFrameR33, .PhotoFrameL25, .PhotoFrameR25, .PhotoFrameL15, .PhotoFrameR15 {
display: block;
background: #000000;
border: 2px solid #000000 ;
height: auto;
width: auto;
padding: 0;
box-shadow: 0 0 15px rgba(0,0,0,0.6);
}

.PhotoFrame100 {
width: 100%;
margin: 7px 0 11px 0;
}

.PhotoFrameL50, .PhotoFrameL33, .PhotoFrameL25, .PhotoFrameL15 {
float: left;
margin: 7px 23px 11px 0;
}

.PhotoFrameR50, .PhotoFrameR33, .PhotoFrameR25, .PhotoFrameR15 {
float: right;
margin: 7px 0 11px 25px;
}

.PhotoFrameL50, .PhotoFrameR50 {
width: calc(50% - 25px);
}

.PhotoFrameL33, .PhotoFrameR33 {
width: 33%;
}

.PhotoFrameL25, .PhotoFrameR25 {
width: 25%;
}

.PhotoFrameL15, .PhotoFrameR15 {
width: 15%;
}

.PhotoFrame100 img, .PhotoFrameL50 img, .PhotoFrameR50 img, .PhotoFrameL33 img, .PhotoFrameR33 img, .PhotoFrameL25 img, .PhotoFrameR25 img, .PhotoFrameL15 img, .PhotoFrameR15 img, .BoxedPhoto {
border: none;
width: 100%;
height: auto;
}

.HorzDivider, .HorzDividerSmallMargin, .HorzDividerTopMargin {
width: auto;
border-top: 2px solid #c53e02;
margin: 5px 25px 15px 25px;
}

#page-content-fixed-width .HorzDivider {
margin: 10px 0 15px 0;
}

.HorzDividerSmallMargin {
margin: 8px 0 8px 0;
}

.HorzDividerTopMargin {
margin: 20px 0 15px 0;
}

p.boxcaption {
padding: 0px 7px 4px 7px;
font-size: 90%;
font-weight: 600;
font-style: italic;
color: #fffaab;
text-align: center;
}

.LargeCentered, .LargeLeft {
font-size: 1.7em;
}

.LargeCentered, .centered {
text-align: center;
}

.LargeLeft {
text-align: left;
}

/*  Mobile menu (menu.html)  */

#menu-items-2-col, #menu-items-3-col {
display: none;
}

/* BEGIN Main CSS breakpoints for www.jerryblank.com */
/* NOTE! Styling on index-m.html can override these  */

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

h3 {
font-size: 29px;
}

#page-heading-gallery h3 {
font-size: 34px;
}

#header-section-3 {
height: 23px;
}

#header-section-3 nav.primary-navigation {
right: 25px;
font-size: 13.5px;
}

#header-section-3 nav.primary-navigation ul li ul {
top: 20px;
}

#header-section-3 nav.primary-navigation ul li:hover > ul, #header-section-3 nav.primary-navigation ul li ul:hover {
min-width: 105px;
max-width: 175px;
}

#header-section-3 nav.primary-navigation ul li ul li {
font-size: 95%;
}

#header-section-3 nav.primary-navigation ul li ul li a {
line-height: 20px;
}

#desktop-screen-instructions {
top: 2px;
left: 3px;
font-size: 13.5px;
}

#page-wrapper-fullwidth {
top: 115px;
}

#page-wrapper-fixed-width {
top: 160px;
}

#page-content-fixed-width {
padding: 0 25px 0 25px;
}
}

/* BEGIN 1200px breakpoint */

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

h3 {
font-size: 28px;
}

#page-heading-gallery h3 {
font-size: 33px;
}

#logotype {   /*  1. Logo  */
top: 6px;
left: 25px;
height: 80px;
}

#logotype h1 {
font-size: 22px;
}

#header-section-2 {   /*  2. Contact Info  */
top: 12px;
right: 25px;
}

.contact-image img {
width: 210px;
}

.contact-URI{
top: -8px;
}

.contact-URI a, .contact-URI a:hover {
font-size: 14.3px;
}

#header-section-3 {
top: 95px;
}

#header-section-3 nav.primary-navigation {
right: 21px;
font-size: 13.0px;
}

#header-section-3 nav.primary-navigation ul li {
padding: 1px 18px 0 18px;
}

#header-section-3 nav.primary-navigation ul li ul {
top: 21px;
}

#header-section-3 nav.primary-navigation ul li:hover > ul, #header-section-3 nav.primary-navigation ul li ul:hover {
min-width: 90px;
max-width: 158px;
}

#desktop-screen-instructions {
top: 2px;
left: 1px;
font-size: 13.0px;
}

.blog-date {
font-size: 16px;
}

.blog-title {
font-size: 22px;
}

/*  Body styles  */

#page-wrapper-fullwidth {
top: 90px;
}

#page-wrapper-fixed-width {
top: 135px;
}
}

/* END 1200px breakpoint */


/*  *************************   MOBILE  DEVICE  BREAKPOINTS   *************************    */

 
/* BEGIN 1080 px breakpoint (NOTE! Styling on index.html and menu.html can override these)  */

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

p {
color: #eeeeee;
}

h3 {
font-size: 27px;
}

#page-heading-gallery h3 {
font-size: 31px;
}

#page-header-container{   /*  Page header background  */
background-color: #1f1f1f;
height: 85px;
}

#logotype {          /*  1. Logo  */
display: none;
}

#logotype-mobile-h,
#logotype-mobile-h-menu {
display: block;
}

#logotype-mobile-h h1 {
font-size: 21px;
}

#header-section-2 {   /*  2. Contact Info  */
top: 11px;
right: 85px;
}

.contact-image img {
width: 180px;
}

.contact-URI{
top: -10px;
}

#header-section-3 {   /*  3. Non-mobile navigation menu  */
display: none;
}

#header-section-4 {
display: block;
position: absolute;
top: 0;
right: 0;
width: 70px;
z-index: 100;
}

#corner-button-menu, #corner-button-close {
display: block;
position: absolute;
}

#corner-button-menu img, #corner-button-close img {
height: auto;
image-rendering: high-quality;
}

#corner-button-menu {
top: 24px;
right: 20px;
}

#corner-button-menu img {
width: 35px;
}

#corner-button-close {
top: 26px;
right: 25px;
}

#corner-button-close img {
width: 35px;
}

#desktop-screen-instructions {
display: none;
}

#mobile-instructions {     /* -- 5. Mobile instructions <div> -- */
display: block;
}

#heading-section-6 {  /*  6. Black divider bar for “menu.html” only, mobile devices only     */
top: 85px;
height: 32px;
}

#logotype-mobile-h h1 {
font-size: 21px;
}

.contact-URI a, .contact-URI a:hover {
font-size: 11.7px;
}

#heading-text-6 {
line-height: 1.4em;
font-size: 23px;
}

.blog-date {
font-size: 16px;
}

.blog-title {
font-size: 21px;
}

/* BEGIN Firefox CSS adjustments */

@-moz-document url-prefix() {

h6 {
letter-spacing: normal;
}

#logotype-mobile-h h1 {
font-size: 17.4px;
}

#header-section-2 {   /*  2. Contact Info  */
top: 12px;
}

.contact-URI{
top: -12px;
}

.contact-URI a, .contact-URI a:hover {
font-size: 10px;
}

#mobile-instructions {
font-size: 11.6px;
}

#heading-text-6 {
font-size: 19.1px;
}
}

/*  END Firefox CSS adjustments  */


/*  Body styles             */

#page-wrapper-fullwidth, #page-wrapper-fixed-width {
top: 100px;
}

#page-content-fixed-width {
padding: 5px 20px 0 20px;
}

#content-container, #content-container-masonry {
margin-top: 2px;
}
}

/* END 1080px breakpoint    */

/* BEGIN 900 px breakpoint (NOTE! Styling on index.html and menu.html can override these)  */

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

#page-header-container{   /*  Page header background  */
height: 75px;
}

#header-section-2 {
top: 8px;
right: 80px;
}

.contact-image img {
width: 160px;
}

.contact-URI{
top: -11px;
}

#corner-button-menu {
top: 20px;
right: 20px;
}

#logotype-mobile-h {
top: 9px;
}

#logotype-mobile-h h1 {
font-size: 19px;
}

h3 {
font-size: 26px;
}

#page-heading-gallery h3 {
font-size: 30px;
}


h6 {
font-size: 14px;
padding-bottom: 7px;
}

.contact-URI a, .contact-URI a:hover {
font-size: 11.0px;
}

#mobile-instructions {
top: 75px;
}

#page-wrapper-fullwidth, #page-wrapper-fixed-width {
top: 90px;
}

.blog-date {
font-size: 15px;
}

.blog-title {
font-size: 19px;
}

/* BEGIN Firefox CSS adjustments */

@-moz-document url-prefix() {

#logotype-mobile-h h1 {
font-size: 15.8px;
}

h6 {
font-size: 11.6px;
}

#header-section-2 {
top: 9px;
}

.contact-URI{
top: -15px;
}

.contact-URI a, .contact-URI a:hover {
font-size: 9.5px;
}
}

/*  END Firefox CSS adjustments  */

/*  Body styles  */

#content-container, #content-container-masonry {
margin-top: 2px;
}
}

/* END 900px breakpoint     */

/* BEGIN 768 px breakpoint (NOTE! Styling on index.html and menu.html can override these)  */
@media screen and (max-width: 768px) {

h3 {
font-size: 25px;
}

#page-heading-gallery h3 {
font-size: 27px;
}

#page-heading p {
font-size: 100%;
}

#page-header-container{   /*  Page header background  */
height: 77px;
}

#logotype-mobile-h,
.logo-hidden-768{
display: none;
}

#logotype-mobile-v {
display: block;
top: 6px;
left: 0;
width: 350px;
}

#logotype-mobile-h-menu {
top: 12px;
left: 25px;
}

#corner-button-menu {
top: 20px;
right: 20px;
}

#corner-button-close {
top: 23px;
right: 20px;
}

#corner-button-close img {
width: 35px;
}

#heading-section-6 {
top: 80px;
height: 32px;
}

h6 {
font-size: 14px;
padding-bottom: 7px;
}

p {
font-size: 14px;
}

#logotype-mobile-v h1 {
font-size: 17px;
}

#logotype-mobile-h-menu h1 {
font-size: 19px;
line-height: 1.5em;
}

#heading-text-6 {
font-size: 23px;
line-height: 1.3em;
}

#mobile-instructions {
top: 77px;
}

.blog-date {
font-size: 14px;
}

.blog-title {
font-size: 18px;
}

/* BEGIN Firefox CSS adjustments */

@-moz-document url-prefix() {

#page-heading-gallery h3 {
font-size: 22.4px;
}

h6 {
font-size: 11.6px;
}

#logotype-mobile-v h1 {
font-size: 14.1px;
}

#logotype-mobile-h-menu h1 {
font-size: 15.8px;
}

#heading-text-6 {
font-size: 19.1px;
}
}

/*  END Firefox CSS adjustments  */

/*  Body styles  */

#page-wrapper-fullwidth {
top: 95px;
}

#page-wrapper-fixed-width {
top: 90px;
}

#page-content-fixed-width {
padding: 5px 15px 0 15px;
}

#page-heading-gallery {
margin-top: -9px;
margin-bottom: 6px;
}

#content-container, #content-container-masonry {
margin-top: 0;
}

.PhotoFrameL33, .PhotoFrameR33 {
width: 49%;
}

.PhotoFrameL25, .PhotoFrameR25 {
width: 40%;
}

.PhotoFrameL15, .PhotoFrameR15 {
width: 30%;
}
}

/* END 768px breakpoint */

/* BEGIN 640 px breakpoint (NOTE! Styling on index.html and menu.html can override these)  */

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

h3 {
font-size: 23px;
}

#page-heading-gallery h3 {
font-size: 26px;
}

#page-heading p {
text-align: left;
padding-bottom: 0.4em;
}

#logotype-mobile-h-index,
#logotype-mobile-h-menu,
#header-section-3 {
display: none;
}

#logotype-mobile-v {
top: 10px;
left: 0;
width: 300px;
}

#logotype-mobile-v-menu {
display: block;
top: 7px;
left: 0;
}

#header-section-2 {
top: 15px;
right: 60px;
}

.contact-image img {
width: 130px;
}

.contact-URI {
top: -15px;
}

#heading-section-6 {  /*  6. Black divider bar for “menu.html”  */
top: 88px;
height: 27px;
}

#heading-text-6 {
font-size: 20px;
line-height: 1.3em;
}

#mobile-instructions {
top: 75px;
font-size: 12px;
}

#logotype-mobile-v h1 {
font-size: 15px;
line-height: 1.3em;
}

#logotype-mobile-v-menu {
font-size: 14px;
line-height: 1.3em;
}

.contact-URI a, .contact-URI a:hover {
font-size: 8.6px;
}

#corner-button-menu {
top: 20px;
right: 10px;
}

#page-heading-gallery h6 .h-6-hidden{
display: none;
}

.blog-date {
font-size: 14px;
}

.blog-title {
font-size: 16px;
}

p.boxcaption {
font-size: 85%;
}

/* BEGIN Firefox CSS adjustments */

@-moz-document url-prefix() {

#heading-text-6 {
font-size: 16.6px;
}

#logotype-mobile-v h1 {
font-size: 12.5px;
}

#logotype-mobile-v-menu {
font-size: 11.2px;
}

#mobile-instructions {
font-size: 10px;
}

.contact-URI a, .contact-URI a:hover {
font-size: 7.1px;
}

h6 {
font-size: 12px;
}
}

/*  END Firefox CSS adjustments  */

/*  Body styles           */

#page-content-fixed-width {
padding: 5px 10px 0 10px;
}

#content-container, #content-container-masonry {
margin-top: 0;
padding: 0 5px 0 5px;
}
}

/* END 640px breakpoint   */

/* BEGIN 480 px breakpoint (NOTE! Styling on index.html and menu.html can override these)  */
@media screen and (max-width: 480px) {

#page-header-container{   /*  Page header background  */
height: 87px;
}

#logotype-mobile-h,
#header-section-2 {
display: none;
}

h3 {
font-size: 18px;
}

#page-heading-gallery h3 {
font-size: 20px;
}

h6 {
font-size: 11px;
padding-bottom: 7px;
}

#logotype-mobile-v {
display: block;
top: 11px;
left: 0;
width: 320px;
}

#logotype-mobile-v h1 {
line-height: 1.3em;
font-size: 18px;
}

#logotype-mobile-v h1 .logo-reduced {
font-size: 80%;
}

#mobile-instructions {
top: 92px;
}

#page-heading-gallery {
margin-top: -7px;
margin-bottom: 4px;
}

p.boxcaption {
font-size: 80%;
}

/* BEGIN Firefox CSS adjustments */

@-moz-document url-prefix() {

h6 {
font-size: 9.1px;
}

#logotype-mobile-v h1 {
font-size: 15px;
}
}

/*  END Firefox CSS adjustments  */

#corner-button-menu {
top: 25px;
right: 10px;
}

#corner-button-close {
top: 30px;
right: 7px;
}

#corner-button-close img {
width: 35px;
}

/*  Body styles  */

.PhotoFrameL50, .PhotoFrameR50 {
width: 100%;
}

.PhotoFrameL33, .PhotoFrameR33, .PhotoFrameL25, .PhotoFrameR25 {
width: 47.7%;
}

.PhotoFrameL15, .PhotoFrameR15 {
width: 33%;
}

} /* END 480px breakpoint */

/* BEGIN 400 px breakpoint (NOTE! Styling on index.html and menu.html can override these)  */
@media screen and (max-width: 400px) {

#page-header-container{   /*  Page header background  */
height: 77px;
}

#logotype-mobile-h,
#header-section-2 {
display: none;
}

#corner-button-menu {
top: 20px;
}

h3 {
font-size: 16px;
}

#page-heading-gallery h3 {
font-size: 18px;
}

h6 {
font-size: 12px;
padding-bottom: 7px;
}

#logotype-mobile-v {
display: block;
top: 11px;
left: 0;
width: 280px;
}

#logotype-mobile-v h1 {
line-height: 1.3em;
font-size: 15px;
}

#logotype-mobile-v h1 .logo-reduced {
font-size: 80%;
}

#mobile-instructions {
top: 82px;
}

p.boxcaption {
font-size: 80%;
}

/* BEGIN Firefox CSS adjustments */

@-moz-document url-prefix() {

h6 {
font-size: 10px;
}

#logotype-mobile-v h1 {
font-size: 12.5px;
}
}

/*  END Firefox CSS adjustments  */

#corner-button-menu {
top: 21px;
right: 10px;
}

#corner-button-close {
top: 30px;
right: 7px;
}

#corner-button-close img {
width: 35px;
}

/*  Body styles  */

} /* END 400px breakpoint */

/* BEGIN 320 px breakpoint (NOTE! Styling on index.html and menu.html can override these)  */
@media screen and (max-width: 320px) {

h6 {
font-size: 12px;
padding-bottom: 7px;
}

#logotype-mobile-v {
top: 15px;
width: 240px;
}

#logotype-mobile-v h1 {
font-size: 13px;
line-height: 1.3em;
}

#logotype-mobile-v-menu {
top: 6px;
left: 0;
width: 270px;
}

#logotype-mobile-v-menu h1 {
font-size: 13px;
line-height: 1.3em;
}

#corner-button-menu {
top: 21px;
right: 10px;
}

#mobile-instructions {
font-size: 11px;
}

#page-heading-gallery h6 {
font-size: 11px;
}

p.boxcaption {
font-size: 80%;
}

/* BEGIN Firefox CSS adjustments */

@-moz-document url-prefix() {

h6 {
font-size: 10px;
}

#logotype-mobile-v h1 {
font-size: 10.8px;
}

#logotype-mobile-v-menu h1 {
font-size: 10.8px;
}

#mobile-instructions {
font-size: 9.1px;
}
}

/*  END Firefox CSS adjustments  */

#header-section-2 {   /*  2. Contact Info  */
display: none;
}

#header-section-3 {   /*  3. Non-mobile navigation menu  */
display: none;
}

#header-section-4 {   /*  4. Mobile menu corner icon  */
}

#corner-button-close {
top: 20px;
right: 15px;
}

#corner-button-close img {
width: 25px;
}

/*  Body styles  */

} /* END 320px breakpoint */

/* END main CSS breakpoints for www.jerryblank.com */

/* END main stylesheet for www.jerryblank.com */


/* USE THE FOLLOWING CSS FOR TESTING RESPONSIVE LAYOUT ISSUES ONLY */
/* 
* {
  outline: 1px solid #f00 !important;
}     */