@charset "utf-8";
/* CSS Document */


@media screen { /* RESET: Resets default browser CSS.
-------------------------------------------------------------- */

  html, body, div, span, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, code,
  del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    /* font-size: 100%; */
    font-family: inherit;
    vertical-align: baseline;
    /* padding-left: 500px; */
    padding: 0;
    box-sizing: border-box;
  }
}

body { 
  /* line-height: 3vw;
  font-size: 2vw; */
  line-height: 1.6; /* adding 1/21/26 */
  font-size: 16px; /* adding 1/21/26 */
  margin: 0 !important;
  padding: 0 !important;
  /* min-height: 100vh; */ /* Ensure the body takes up at least the full viewport height */
  /* display: flex; */ /* Enable Flexbox on the body */
  /* @media screen and (min-width: 800px) { 
  line-height: 1;
  font-size: 100%; 
  }
  */
}

@media screen and (min-width: 800px){
  body { 
  line-height: 1;
  font-size: 100%; 
  }
}


/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
 
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
 
/* Remove annoying border on linked images. */
a img { border: none; }

/* mozilla button reset - see:
* http://mxr.mozilla.org/mozilla-central/source/layout/style/forms.css#524
*/
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner
{
  padding:0;
  border:0 none;
}


/* Headings
-------------------------------------------------------------- */
 
h1,h2,h3,h4,h5,h6 { 
  font-weight: normal; 
  color: #000000; 
  margin: 0;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  }
 
h1 { 
  font-size: 3.75vw; line-height: 5vw; margin: 2.5vw 0;
  /* @media screen and (min-width: 800px) { font-size: 30px; line-height: 40px; margin: 20px 0; } */

}

@media screen and (min-width: 800px) { 
  h1 {
    font-size: 30px; line-height: 40px; margin: 20px 0;
  }
}

h2 { font-size: 24px; line-height: 30px; padding: 0 0; }
h3 { font-size: 24px; line-height: 40px; padding: 0 0; color: #000000;}
h4 { font-size: 20px; font-family: "Baskerville", Georgia, sans-serif; line-height: 20px; padding: 0 0; margin-bottom: 20px; color: #000000;}
h5 { font-size: 18px; margin-bottom: 20px; color: #000000; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: normal;}
h6 { font-size: 10px; font-family: "Helvetica Neue", Arial, sans-serif; color: #666; text-transform: uppercase; text-align: center; margin-bottom: 10px;}
h6 a { color: #fff; }

/* Text elements
-------------------------------------------------------------- */
 
p           { margin: 0 0 20px 0; }

a           { color: #888888; text-decoration: none; }
a:focus, 
a:hover     { color: #bbbbbb; }

body.light a           { color: #5eacc5; text-decoration: none; }
body.light a:focus, 
body.light a:hover     { color: #000000; }

body.white a           { color: #a3a4a9; text-decoration: none; }
body.white a:focus, 
body.white a:hover     { color: #000000; }
 
blockquote  { font-family: Georgia, serif; margin: 20px 0; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }
 
abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 20px 0; font-style: italic; }
del         { color: #999; }
 
pre,code    { margin: 20px 0; white-space: pre; }
pre,code,tt { font: 12px Consolas, 'Andale Mono', 'Lucida Console', Monospace; } 
 
/* Lists
-------------------------------------------------------------- */
 
li ul, 
li ol       { margin: 0 20px; }
ul, ol      { margin: 0 0 20px 0; }
 
ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }
 
dl          { margin: 0 0 20px 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 20px;}
 
 
/* Tables
-------------------------------------------------------------- */
 
table       { margin: 0 0 20px 0; width:100%; }
th          { font-weight: bold; }
th,td       { padding: 5px 5px 4px 5px; border-bottom: 1px solid #fff;}
tr.even td  { background: #f4f4f4; }
th.numeric,
td.numeric  { text-align: center; }
tfoot       { font-style: italic; }
caption     { }

/* Forms
-------------------------------------------------------------- */
/* 
form {
  float: left;
  background-color: #f0f1f6;
  width: 470px;
  padding: 15px;
  margin-left: -15px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  color: #a3a4a9;
}
*/
form div.field-wrapper {
  background-color: #fff;
  margin-bottom: 10px;
  min-height: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

form div.errors {
  background-color: #eb553b;
  color: #fff;
}
/*
form label {
  clear: left;
  font-size: 14px;
  float: left;
  width: 214px;
  line-height: 45px;
  height: 45px;
  padding: 0 10px;
}

*/
/*
form label[for=id_pictory-bio],
form label[for=id_profile-bio],
form label[for=id_pictory-story] {
  width: 450px;
}

form label.required {
  color: #5c5c61;
}

form label .required-marker {
  font-weight: bold;
  color: #5eacc5;
}

form label span.help { font-size: 11px; color: #a3a4a9 !important; }

form.sign-up-form label span.help {
  display: block;
  width: 205px;
  position: absolute;
  right: 260px;
  margin-top: -45px;
  color: #5b5c61;
  text-align: left;
  font-size: 12px;
  line-height: 16px;
  height: 32px;
  padding-top: 6px;
  padding-bottom: 7px;
  padding-left: 20px;
  background-image: url('images/button-arrow-grey-reverse.png');
  background-repeat: no-repeat;
  background-position: left 15px;
  display: none;
}

form.sign-up-form div.field-wrapper:hover span.help {
  display: block;
}
*/

/*
form input, textarea {
  font-size: 14px;
  font-weight: bold;
  color: #5c5c61;
  background-color: #fff;
  border: none;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
*/
/*
form input {
  float: left;
  border: 1px solid transparent;
  border-left: 1px solid #f4f4f4;
  width: 214px;
  height: 29px;
  line-height: 35px;
  padding: 14px 10px 0;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-bottomright: 0px;
  -webkit-border-bottom-right-radius: 0px;
}
*/
form select {
  line-height: 35px;
  margin-top: 13px;
  margin-left: 5px;
}

form div.errors input,
form div.errors textarea {
  border: 1px solid #eb553b;
}

form div.errors label,
form div.errors label span.help,
form div.errors label.required,
form div.errors label .required-marker {
  color: #fff !important;
}

/*
form input:focus,
form textarea:focus {
  outline: none;
  border: 1px solid #dfdfdf;
  background-color: #fff;
  background-image: url('images/form-field-background.png');
  background-repeat: repeat-x;
}

form input[type=file] {
  font-size: 11px;
  font-weight: normal;
  padding: 5px 10px;
  height: 33px;
}
*/

/* 
form div.pictory-image .field {
  background: url('http://static.mypictory.com/static/assets/img/button-upload-browse.png') 100% 50% no-repeat;
  display: block;
  overflow: hidden;
  cursor: pointer;
  height: 45px;
  width: 224px;
  border-left: 1px solid #f0f1f6;
}

form div.pictory-image .field input[type=file] {
  padding: 0;
  position: relative;
  height: 100%;
  width: auto;
  opacity: 0;
  -moz-opacity: 0;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

form div.pictory-image .field .filename {
  position: absolute;
  left: 260px;
  width: 120px;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 45px;
}
*/

/*
@media screen and (min-width: 800px) {
  form input[type=submit], button, .button {
    font-size: 16px;
    height: 42px;
    line-height: 41px;
    padding: 0 20px;
  }
}

body.light form input[type=submit], body.light button, body.light .button { color: #fff; text-shadow: 0px -1px 0px rgba(0,0,0,.2); }
form input[type=submit]:hover, button:hover, .button:hover { cursor: pointer; color: #fff !important; background-position: 0 -42px; }
form input[type=submit]:active, button:active, .button:active { background-position: 0 -84px; }
form input[type=submit].dark, button.dark, .button.dark { background-image: none; background-color: #1e1e23; color: #d2d2d8; text-shadow: 0 -1px 0 rgba(0,0,0,.5); }
form input[type=submit].dark:hover, button.dark:hover, .button.dark:hover, .button.dark.active { text-shadow: 0 1px 0 rgba(255,255,255,.2); background-image: none !important; background-color: #888888  !important; color: #1e1e23  !important; }
*/

/*
button span, .button span {
  display: block;
  padding-right: 20px;
  background-image: url('images/button-arrow.png');
  background-repeat: no-repeat;
  background-position: right 15px;
  white-space:nowrap;
}

body.light button span, body.light .button span { background-image: url('images/button-arrow-light.png'); }
form input[type=submit].dark span, button.dark span, .button.dark span { background-image: url('images/button-arrow-light.png'); }
.button.dark.active span { background-image: url('images/button-arrow.png'); }
*/

/*
middle-button span, .middle-button span {
  display: block;
  padding-right: 20px;
  background-image: url('images/button-arrow.png'); 
  background-repeat: no-repeat;
  background-position: right 15px; 
  white-space:nowrap;
}
*/
/*
body.light middle-button span, body.light .middle-button span { background-image: url('images/button-arrow-light.png'); }
form input[type=submit].dark span, middle-button.dark span, .middle-button.dark span { background-image: url('images/button-arrow-light.png'); }
.middle-button.dark.active span { background-image: url('images/button-arrow.png'); }
*/
/*
right-button span, .right-button span {
  display: block;
  padding-right: 20px;
  background-image: url('images/button-arrow.png'); 
  background-repeat: no-repeat;
  background-position: right 15px;
  white-space:nowrap;
}

body.light right-button span, body.light .right-button span { background-image: url('images/button-arrow-light.png'); }
form input[type=submit].dark span, right-button.dark span, .right-button.dark span { background-image: url('images/button-arrow-light.png'); }
.right-button.dark.active span { background-image: url('images/button-arrow.png'); }
*/

/*
@media screen and (min-width: 800px) {
  form input[type=submit], left-button, .left-button {
    font-size: 16px;
    line-height: 41px;
    padding: 0 20px 0 25px;
  }
}
*/

/*
body.light form input[type=submit], body.light button, body.light .left-button { color: #fff; text-shadow: 0px -1px 0px rgba(0,0,0,.2); }
form input[type=submit]:hover, left-button:hover, .left-button:hover { cursor: pointer; color: #fff !important; background-position: 0 -42px; }
form input[type=submit]:active, left-button:active, .left-button:active { background-position: 0 -84px; }
form input[type=submit].dark, left-button.dark, .left-button.dark { background-image: none; background-color: #1e1e23; color: #d2d2d8; text-shadow: 0 -1px 0 rgba(0,0,0,.5); }
form input[type=submit].dark:hover, left-button.dark:hover, .left-button.dark:hover, .left-button.dark.active { text-shadow: 0 1px 0 rgba(255,255,255,.2); background-image: none !important; background-color: #888888  !important; color: #1e1e23  !important; }
*/

/* 
left-button span, .left-button span {
  display: block;
  padding-right: 20px;
  background-image: url('images/button-arrow.png');
  background-repeat: no-repeat;
  background-position: right 15px; 
  white-space:nowrap;
}

body.light left-button span, body.light .left-button span { background-image: url('images/button-arrow-light.png'); }
form input[type=submit].dark span, left-button.dark span, .left-button.dark span { background-image: url('images/button-arrow-light.png'); }
.left-button.dark.active span { background-image: url('images/button-arrow.png'); }
*/
/*
form textarea {
  border: 1px solid transparent;
  border-top: 1px solid #f0f1f6;
  display: block;
  clear: both;
  width: 448px;
  height: 99px;
  font-size: 14px;
  line-height: 20px;
  padding: 10px;
  resize: none;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
}
*/

/*
form p {
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 10px 0;
}
*/

.errorlist {
  margin: 0;
  padding: 0 0 0 10px;
  font-size: 12px;
  font-weight: bold;
  color: #eb553b;
  list-style-type: none;
}

.errorlist li {
  margin: 0;
  padding: 0;
}

/* Misc classes
-------------------------------------------------------------- */

.hide       { display: none; }
.invisible  { visibility: hidden; }
 
.weak       { color: #666; }

.small {
  font-size: 0.8333em;
  line-height: 1.6;
}
.caps { 
/*  font-variant: small-caps; 
  text-transform: lowercase; 
  font-size:1.4em;
  line-height:1%;*/
}

.dquo { margin-left: -.5em; }

.promo {
  color: #f0f1f6;
  font-size: 84px;
  line-height: 78px;
}

.highlight {
  color: #888888;
}

.instructions { color: #000000; font-size: 12px; font-family: Baskerville, Georgia, serif; text-align: center;}

/* Core layout
-------------------------------------------------------------- */

body {
  /* background-color: #09080d;
  color: #5b5c61 */
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Helvetica Neue", Arial, sans-serif;
  /*
  line-height: 3vw;
  font-size: 2vw;
  Changing 1/21/26
  */
  line-height: 1.6;
  font-size: 16px;
  /*
  @media screen and (min-width: 800px) { 
    font-size: 100%;
    line-height: 1;
  }
  */
}

@media screen and (min-width: 800px) { 
  body {
    font-size: 100%;
    line-height: 1;
  }
}

body.light {
  background-color: #fff;
  background-image: url('images/body-background-light.png');
  background-repeat: repeat-x;
  color: #a3a4a9;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

body.white {
  background-color: #fff;
  background-image: none;
  background-repeat: repeat-x;
  color: #a3a4a9;
}

.container { position: relative; margin: 0 auto; padding: 0 2% } 
.container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
  padding-top: 0 !important;
  margin-top: 0 !important;
}


div#header {  
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5vw; 
  width: 100%;
  padding-top: 5.25vw; 
  margin: 1.25vw 0 6.25px 0;  /* first value (for top) was 40px */ 
  float: left; 
  margin-bottom: 1.5vw;
  margin-top: 0 !important;
  /*  background-image: url('images/logo2.png'); */
  background-size: contain;
  
  /*
  @media screen and (min-width: 800px) { / * 767x64 vs 110 * /
    height: 44px; / * was 70 px * / 
    width: 100%;
    padding-top: 47px;
    margin: 10px 0 50px 0;  / * was 10px 0 50x 0 * / 
  }
  */
} 

@media screen and (min-width: 800px) { /* 767x64 vs 110 */
  div#header {  
    height: 44px; /* was 70 px */ 
    width: 100%;
    padding-top: 47px;
    margin: 10px 0 50px 0;  /* was 10px 0 50x 0 */ 
  }
}

.image-container {
  /* This centers the inline content (the image) horizontally */
  text-align: center;
}

/* Optional: Sets the image to take up no more than 100% of its container */
img {
  max-width: 100%;
  height: auto;
}

body.light div#header { background-image: url('images/logo2.png'); }
body.white div#header { background-image: url('images/logo2.png'); }
/* adding media screen here broke everything */
div#header h1 .logo { 
  display: block; font-size: 0; margin-top: -8.75vw; height: 8vw; padding-top: 0vw; overflow: hidden; max-width: 100%; /* was height 6.25vw and padding-top: 7.5vw */

  /*
  @media screen and (min-width: 800px) { 
    margin-top: -70px; height: 70px; padding-top: 0px; / * height was  50 adding-top was 20px * / 
  }
  */
}

@media screen and (min-width: 800px) { 
  div#header h1 .logo { 
    margin-top: -70px; height: 70px; padding-top: 0px; /* height was  50 adding-top was 20px */ 
  }
}

div#header h2 { display: none;}
div#content { width: 100% } 
/*
div#header ul.utility-nav { 
  position: absolute; 
  top: 10px; 
  left: 0;
  list-style-type: none;
  font-size: 12px;
}
div#header ul.utility-nav li { display: inline; margin-left: 3px; color: #FFFFFF; }
div#header ul.utility-nav li a { display: inline-block; line-height: 1em; padding: 4px 6px; color: #d2d2d8; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
div#header ul.utility-nav li a:hover { color: #fff; background: #1e1e23; }
body.light div#header ul.utility-nav li { color: #afd5e4; text-shadow: 0 -1px 0 rgba(0,0,0,0.1); }
body.light div#header ul.utility-nav a { color: #dfeef4; }
body.light div#header ul.utility-nav a:hover { color: #fff; background-color: #579eb7; }
body.white div#header ul.utility-nav li { color: #c2c2c7;}
body.white div#header ul.utility-nav a { color: #a3a4a9; }
body.white div#header ul.utility-nav a:hover { color: #5c5c61; background-color: #f0f1f6; }

div#messages { float: left; }
div#content { float: left; } 
div#footer { margin-top: 80px; float: left; font-size: 14px; color: #4e4f54; position: relative; }
body.light div#footer,
body.white div#footer { color: #c2c2c7; }
div#footer ul { list-style-type: none; }
div#footer ul li { float: left; font-size: 22px; margin-right: 60px; }
div#footer ul li.last { margin-right: 0; }
div#footer ul li a { color: #d2d2d8; }
div#footer ul li a:hover { color: #fff; }
body.light div#footer ul li a { color: #c2c2c7; }
body.white div#footer ul li a { color: #a4a4a9; }
div#footer ul li.home a, 
div#footer ul li.view a { color: #888888 !important; }
div#footer ul li.submit a { color: #5eacc5 !important; }
div#footer ul li.home a:hover, 
div#footer ul li.view a:hover, 
div#footer ul li.submit a:hover { color: #fff !important; }
body.light div#footer ul li a:hover,
body.light div#footer ul li.home a:hover, 
body.light div#footer ul li.view a:hover, 
body.light div#footer ul li.submit a:hover { color: #5b5c61 !important; } 
body.white div#footer ul li a:hover,
body.white div#footer ul li.home a:hover, 
body.white div#footer ul li.view a:hover, 
body.white div#footer ul li.submit a:hover { color: #5b5c61 !important; }
div#footer .hosted { position: absolute; top: 120px; right: 0; text-transform: uppercase; font-size: 10px; line-height: 14px; text-align: right; }
div#footer .hosted a { display: block; text-indent: 9999px; overflow: hidden; width: 350px; height: 28px; background: url('http://static.mypictory.com/static/assets/img/mt-logo-dark.png') no-repeat; }
body.light div#footer .hosted a,
body.white div#footer .hosted a { background-image: url('http://static.mypictory.com/static/assets/img/mt-logo-light.png'); }
div#footer p.copyright { margin: 120px 0; width: 625px; }
div#footer p.copyright a { color: #d2d2d8 !important; }
div#footer p.copyright a:hover { color: #fff !important; }
body.light div#footer p.copyright a,
body.white div#footer p.copyright a { color: #a3a4a9 !important; }
body.light div#footer p.copyright a:hover,
body.white div#footer p.copyright a:hover { color: #5b5c61 !important; }
body.two-col div#content { width: 470px; float: left; padding: 0 15px; -webkit-border-radius: 8px; -moz-border-radius: 8px; }
body.two-col div#sidebar { width: 375px; float: left; padding-left: 125px; }
*/

#content-area {
  padding: 20px; /* Add some overall padding around the section */
}

/* Optional: Add some spacing below the heading 
#content-area h1 {
    margin-bottom: 20px; 
}
/*
* Optional: Clear the float after the section to prevent it from affecting elements below */
#about-section::after {
    content: "";
    display: table;
    clear: both;
}

#about-page .page-title {
  margin-top: 0;
  margin-bottom: clamp(20px, 2vw, 40px);
}

/* Positioning the image and text */
#image-wrapper {
  /* Float the image wrapper to the left */
  float: left;
  /* display: inline-block; just commented */
  /* width: fit-content; */
  /* Move the existing inline margin here */
  margin-right: 24px;
  margin-bottom: 16px; 
  /* Ensure no unwanted vertical spacing on the wrapper itself */
  padding-top: 0;
  margin-top: 0; 
}

#menu-container2 {
  display: flex; /* Arranges children in a row */
  align-items: center;
  position: relative;
  top: 0px; /* was 140  */
  overflow: hidden;
  
  /* Ensure it only takes up the space needed by the buttons */
  width: fit-content; /* Optional but good practice */
  justify-content: flex-end; /* Align items to the right */
  gap: 30px; /* Space between each menu item and the social icons */

  & #hamburger-icon {
    display: none;
  }
}

#menu-container2 a {
  /*
  width: 100px;
  text-align: center;
  margin: 0 0;
  */
  /* 1. Set font properties */
  font-family: Arial, Helvetica, sans-serif; /* Use a common sans-serif font */
  font-weight: 400; /* Bold font weight */
  text-transform: uppercase; /* All caps */
  letter-spacing: 0.1em; /* Increased spacing between letters */
  font-size: 14px; /* Adjust as needed */
  color: #000000; /* Assuming black text on white background */
  
  /* 2. Remove default link underline */
  text-decoration: none;
  
  /* 3. Set up positioning for the animated underline */
  display: inline-block;
  position: relative; 
  padding-bottom: 3px; /* Space between text and line */

  margin: 0 5px; /* Increase or decrease this value for spacing between links in header */
}

/* Define the pseudo-element that will be the underline */
#menu-container2 a::after {
  content: '';
  position: absolute;
  width: 0; /* Start with zero width (hidden) */
  height: 1px; /* The thickness of the line */
  bottom: 0; /* Position right below the text */
  left: 50%; /* Start the line from the center */
  transform: translateX(-50%); /* Center the line */
  background-color: currentColor; /* Matches the text color */
  
  /* The key to the 'slowly appears' effect */
  transition: width 0.3s ease-in-out; 
}

/* On hover, expand the line to full width */
#menu-container2 a:hover::after,
#menu-container2 a.active::after { /* Use .active for the current page */
  width: 100%;
}

#menu-container2 a img {
  /* Set the size */
  width: 18px;  
  height: 18px; 

  /* Adjust alignment to match the text links */
  vertical-align: middle; 
}

#text-wrapper p:first-child {
  /* Set top margin to 0 to make it flush with the top of the image */
  margin-top: 0;
}
/*
.homepage-menu {
  text-align: center;
  margin: auto;
  width: 58vw;
  max-width: 100%;
  
  @media screen and (min-width: 800px) {
    width: 460px;
    
  }
  
}
*/

/*
@media screen and (min-width: 800px) {
  .homepage-menu {
    width: 460px; 
  }
}
*/
/*
#homepage-gallery-button {
  margin: auto 1.25vw auto auto;
  
  @media screen and (min-width: 800px) {
    margin: auto 10px auto auto;
  }
  
}
*/

/*
@media screen and (min-width: 800px) {
  #homepage-gallery-button {
    margin: auto 10px auto auto;
  }
}

#homepage-about-button {
  margin: auto 1.25vw;
  @media screen and (min-width: 800px) {
    margin: auto 10px;
  }
}

#homepage-contact-button {
  margin: auto auto auto 1.25vw ;
  @media screen and (min-width: 800px) {
    margin: auto auto auto 10px;
  }
}
*/

/*
#gallery-home-button {
  float: left;
  display: inline;
  /* margin: auto auto; 
  max-width: 12.5%; 
  text-align: center;
}

#gallery-gallery-button {
  float: left;
  display: inline;
  /* margin: auto auto; 
  max-width: 12.5%; 
  text-align: center;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 2vw;
  @media screen and (min-width: 800px) {
    font-size: 14px;
    line-height: 41px;
    padding: 0 15px;
    width: 90px;
    text-align: center;
  }
  background-image: none;
  background-color: #1e1e23;
  color: #d2d2d8;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}

#gallery-about-button {
  float: left;
  display: inline;
  /* margin: auto auto; 
  max-width: 12.5%;
  text-align: center;
  @media screen and (min-width: 800px) {
    font-size: 14px;
    line-height: 41px;
    padding: 0 15px;
    width: 90px;
    text-align: center
  }
}

#gallery-contact-button {
  float: left;
  display: inline;
  /* margin: auto auto; 
  max-width: 12.5%;
  text-align: center;
}
*/

/* Theme detail
-------------------------------------------------------------- */
/*
div#theme-pagination {
  border-bottom: 1px solid #dfdfdf;
  height: 35px;
  margin-top: 15px;
  color: #c2c2c7;
}

div#theme-pagination.last-theme {
  padding-right: 100px;
}

div#theme-pagination.first-theme {
  padding-left: 100px;
}

div#theme-pagination a {
  font-size: 12px;
  font-weight: bold;
  color: #a3a4a9;
  text-transform: uppercase;
  display: block;
  width: 100px;
}

div#theme-pagination a:hover {
  color: #5eacc5;
}

div#theme-pagination a.previous { float: left; }
div#theme-pagination a.next { float: right; text-align: right; }
div#theme-pagination p { text-align: center; font-size: 14px; }

ul.upcoming-theme-deadlines { list-style-type: none; margin: 0 0 40px 0; }
ul.upcoming-theme-deadlines li { color: #9cadb3; }
ul.upcoming-theme-deadlines li a { color: #9cadb3; font-weight: bold; }
ul.upcoming-theme-deadlines li a:hover { color: #5eacc5; }
ul.upcoming-theme-deadlines li span { text-transform: uppercase; font-size: 14px; font-weight: normal; }
ul.upcoming-theme-deadlines li.active {
  color: #5eacc5;
  background-image: url('http://static.mypictory.com/static/assets/img/sidebar-li-bullet-blue.png');
  background-repeat: no-repeat;
  background-position: 0 3px;
  padding-left: 15px;
  margin-left: -15px;
}
ul.upcoming-theme-deadlines li.active a {
  color: #5eacc5;
}

.submission-thank-you #content,
.theme-detail #content {
  background-color: #fff;
  width: 470px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  -webkit-border-bottom-right-radius: 8px;
}

.theme-detail #sidebar h5 {
  font-size: 18px;
  color: #5b5c61;
  font-weight: normal;
}
*/

/* Archive items
-------------------------------------------------------------- */
/*
.archive .intro-wrapper {
  padding: 30px 0;
}

.archive .intro {
  padding-top: 0;
}

.archive .intro h2 {
  font-size: 72px;
  line-height: 72px;
  margin-bottom: 0;
  margin-top: 30px;
}

.archive-item {
  margin-bottom: 70px;
  clear: left;
}

.archive-item h3 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #fff;
  margin: 0;
  padding: 0;
}

.archive-item h3 a {
  margin-left: 5px;
  color: #febf4b;
}

.archive-item h3 a:hover {
  color: #fff;
}

.note-tease h3 span {
  margin-left: 5px;
}

.showcase-tease {
  width: 998px;
  height: 498px;
  border: 1px solid #1d1d22;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}

.showcase-tease:hover {
  cursor: pointer;
  border-color: #febf4b;
}

.showcase-tease .showcase-details {
  margin-top: 32px;
  background-color: rgba(29,29,34,.75);
  background-image: url('/images//showcase-details-background.png');
}

.showcase-tease .showcase-details:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.showcase-description {
  width: 584px;
  padding: 10px 20px;
  float: left;
  font-size: 13px;
  line-height: 17px;
  color: #a3a4a9;
}

.showcase-contributors {
  width: 334px;
  padding: 22px 20px 10px 20px;
  float: right;
  font-size: 11px;
  line-height: 14px;
  color: #a3a4a9;
}

.showcase-contributors strong.title-photographer {
  color: #fff;
  font-weight: normal;
}

.featured-contributor-tease {
  background-color: #1d1d22;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  padding: 0 15px 15px;
  float: left;
}

.featured-contributor-tease h3 {
  border-bottom: 1px solid #36363b;
  position: relative;
  margin-left: -15px;
  margin-right: -15px;
  padding: 15px;
  line-height: 18px;
}

.featured-contributor-tease .button {
  background-color: transparent;
  padding-left: 0;
  margin-left: 0;
}

.featured-contributor-content {
  padding-top: 15px;
  padding-left: 250px;
  padding-right: 110px;
}

.featured-contributor-content img {
  float: left;
  margin-left: -250px;
  margin-right: 30px;
  border: 1px solid #a3a4a9;
}

.featured-contributor-tease blockquote {
  font-family: Baskerville, Georgia, serif;
  font-style: italic;
  font-size: 36px;
  line-height: 40px;
  color: #a3a4a9;
}

.featured-contributor-tease .button {
  display: block;
  float: left;
  background-image: none;
  background-color: transparent;
  color: #febf4b; 
}

.featured-contributor-tease .button span {  
  background-image: url('http://static.mypictory.com/static/assets/img/sidebar-li-bullet-yellow.png');
}

.featured-contributor-tease:hover {
  background: #febf4b;
}

.featured-contributor-tease:hover h3,
.featured-contributor-tease:hover blockquote,
.featured-contributor-tease:hover h3 a,
.featured-contributor-tease:hover .button {
  color: #1d1d22 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
}
.featured-contributor-tease:hover .button {
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
}

.featured-contributor-tease:hover .button span {
  background-image: url('images/button-arrow.png');
}

.featured-contributor-tease:hover h3 {
  border-color: #8e6f37;
}

.note-tease {
  padding: 0 15px;
}

.note-tease h3 span {
  color: #4e4f54;
}

.note-tease h3 a.button {
  background-color: transparent;
  margin-left: 10px;
  color: #febf4b;
  float: none;
  display: inline-block;
}

.note-tease h3 a.button span {
  background-image: url('http://static.mypictory.com/static/assets/img/sidebar-li-bullet-yellow.png');
  color: #febf4b;
}

.note-tease h3 a.button:hover span {
  background-image: url('images/button-arrow.png');
  color: rgb(29, 29, 34);
}
*/

/* Pictory list and Showcase intro
-------------------------------------------------------------- */
/*
.intro-wrapper {
  border-bottom: 1px solid #1d1d22;
  margin-bottom: 79px;
  padding: 80px 0;
}

.intro-wrapper h6, .showcase-footer h6 {
  margin: 0;
  line-height: 10px;
}

.intro h2 {
  font-family: Baskerville, Georgia, serif;
  font-size: 130px;
  text-align: center;
  color: #26262a;
  margin-top: 50px;
  margin-bottom: 20px;
  letter-spacing: -3px;
  line-height: 120px;
}

div.intro {
  padding-top: 20px;
  border-top: 1px solid #1d1d22;
  text-align: center;
  font-family: Baskerville, Georgia, serif;
  font-size: 30px;
  line-height: 40px;
  color: #5b5c61;
  letter-spacing: -1px;
}

div.intro-content {
  margin: 0 200px;
}

.showcase-pagination {
  text-align: center;
  line-height: 62px;
  height: 62px;
  background-color: #16161b;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
}

.showcase-pagination.first-showcase {
  padding-left: 142px;
}

.showcase-pagination.last-showcase {
  padding-right: 142px;
}

.showcase-pagination .button.previous {
  float: left;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -moz-border-radius-topright: 0;
  -webkit-border-top-right-radius: 0;
  -moz-border-radius-bottomright: 0;
  -webkit-border-bottom-right-radius: 0;
  margin: 0;
  width: 102px;
  line-height: 62px;
  height: 62px;
}

.showcase-pagination .button.previous span {
  padding-right: 0;
  padding-left: 20px;
  background-image: url('images/button-arrow-light-reverse.png');
  background-repeat: no-repeat;
  background-position: left 25px;
}

.showcase-pagination .button.next {
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  float: right;
  -moz-border-radius-topleft: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  -webkit-border-bottom-left-radius: 0;
  margin: 0;
  width: 102px;
  line-height: 62px;
  height: 62px;
}

.showcase-pagination .button.next span {
  background-position: right 25px;
}

.showcase-promo-wrapper {
  padding: 80px 220px;
  text-align: center;
}

.showcase-promo h2 {
  font-size: 42px;
  color: #fff;
  margin: 15px 0;
}

.showcase-promo-content {
  font-size: 16px;
  color: #c2c2c7;
}

.showcase-promo-content a {
  font-weight: bold;
  color: #5eacc5;
}

.showcase-promo-content a:hover {
  color: #fff;
}

.showcase-promo-content p {
  margin: 15px 0;
}

.showcase-promo-content .button {
  color: #1d1d22 !important;
  margin-top: 10px;
  float: none;
  display: inline-block;
}
*/

/* Gallery - Photo Links to Galleries
-------------------------------------------------------------- */
/*
.gallery-link {
  float: left; */
  /* width: 220px; */
  /* This ensures 2 columns + the 40px gap always equal exactly 100% */
  /* width: calc(50% - 20px) !important;
  padding-top: 147px;
  border: 1px solid #09080d;
  margin-right: 28px; */
  /* margin-top: 20px; /* added */
  /* background-repeat: no-repeat;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}
*/

.gallery-link-spacer-3 { /* Spacer needed for rows of 3 gallery link images */
  float: left;
  /* width: 220px; */
  /* This ensures 2 columns + the 40px gap always equal exactly 100%  - go back to 220px if this doesn't work */
  width: calc(50% - 20px) !important;
  padding-top: 147px;
  padding-bottom: 40px;
  border: 1px solid #09080d;
  margin-right: 28px;
  margin-top: 20px; /* added */
  background-repeat: no-repeat;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  /* background-color: #FFFFFF; */ /* Make background white for testing */
}

.gallery-link-spacer-3b { /* Spacer needed for rows of 3 gallery link images with more height */
  float: left;
  /* width: 220px; /*
  /* This ensures 2 columns + the 40px gap always equal exactly 100%  - go back to 220px if this doesn't work*/
  width: calc(50% - 20px) !important;
  padding-top: 147px;
  padding-bottom: 60px;
  border: 1px solid #09080d;
  margin-right: 28px;
  margin-top: 20px; /* added */
  background-repeat: no-repeat;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  /* background-color: #FFFFFF; */ /* Make background white for testing */
}

#recent-features .last-gallery-link {
  margin-right: 0;
}

.gallery-link.alt .info {
  background-color: #09080d;
}

.gallery-link-featured-contributor {
  float: left;
  background-color: transparent !important;
  border: none !important;
  position: relative;
  margin-top: -154px;
  width: 247px;
  padding-top: 400px;
  background-repeat: no-repeat;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}

.gallery-link .info {
  padding: 10px 15px; 
  background-color: #16151a;
  text-align:center;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
}

.gallery-link-featured-contributor .info {
  background-color: #16151a !important;
}

.gallery-link h3 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #d2d2d8;
  margin: 0;
  padding: 0;
  line-height: 20px;
}

.gallery-link h3 span.highlight {
  color: #888888;
}

.gallery-link h3 a {
  color: #888888;
}

.gallery-link:hover {
  border-color: #888888;
}

.gallery-link:hover .info,
.gallery-link-featured-contributor:hover .info {
  background-color: #888888 !important;
}

.gallery-link:hover h3,
.gallery-link:hover span.highlight {
	color: #1e1e23 !important;
}

/* Gallery - Invisible Spacer for Photo Links to Galleries
-------------------------------------------------------------- */

.invisible-gallery-link {
  float: left;
  width: 220px;
  padding-top: 147px;
  border: 1px solid #09080d;
  margin-right: 28px;
  margin-top: 20px; /* added */
  background-repeat: no-repeat;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}

/* Gallery Page */

/* main.css - Override PhotoSwipe Background */
.pswp__bg {
  /* Set the background color to white */
  background: #ffffff !important; 
  /* The !important ensures this overrides the default translucent style */
  opacity: 1 !important;
}

/* main.css - Override PhotoSwipe Control Colors */

/* Target the close button and navigation arrows */
.pswp__button {
  /* Reduce the size of the button container (default is usually 44px) */
  width: 15px;
  height: 15px;
  
  /* Ensure the padding or margin around the icon is consistent */
  padding: 0;
  margin: 0;
}
.pswp__button--close,
.pswp__button--arrow--left,
.pswp__button--arrow--right {
    /* Set the background color of the button circle to white (optional, but helps hide the default icon background) */
    background: #ffffff; 
    /* Set the opacity back to 1 if it was previously lowered */
    opacity: 1;
}

.pswp__button .pswp__icn {
  /* Set the color as requested previously */
  fill: #999999;
  
  /* Reduce the stroke thickness (default is usually around 2.5-3.0) */
  stroke-width: 0px; 
  
  /* Ensure the stroke is visible, though 'fill' is dominant for these icons */
  stroke: #252525; 
}

/* Optional: Keep the buttons visible when hovering/active */
.pswp__button:hover {
    /* Keep the button background white on hover */
    background: #ffffff; 
    /* Optionally darken the icon slightly on hover for feedback */
    opacity: 1; 
}

/* Hide the image counter (e.g., 2/20) */
.pswp__counter {
  display: none !important;
}

.pswp-gallery {
  /* Use CSS Grid for a clean, responsive layout */
  display: grid;
  /* Create columns that are at least 250px wide and fit as many as possible */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px; /* Spacing between images */
  padding: 20px; /* Padding around the grid */
  max-width: 1200px; /* Optional: limit width of the gallery */
  margin: 0 auto; /* Optional: center the gallery container */
}

.pswp-gallery a {
  display: block;
  overflow: hidden;
  /* Optional: Aspect ratio to make grid cells uniform */
  aspect-ratio: 4/3; 
}

.pswp-gallery img {
  /* Ensures image fills its container */
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crops the image nicely to fill the container */
  transition: transform 0.3s ease;
}

.pswp-gallery img:hover {
  transform: scale(1.05); /* Slight zoom effect on hover */
}

.gallery {
	color: #666;
}

/* Featured contributor
-------------------------------------------------------------- */
/*
body.featured-contributor div#content {
  padding: 0;
  width: 500px;
  font-size: 16px;
  font-family: "Baskerville", Georgia, sans-serif;
  color: #74757a;
}

.featured-contributor h3 {
  font-size: 22px;
  color: #fff;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
}

.featured-contributor h3 .share-button {
  margin-left: 10px;
}

.featured-contributor h2 {
  font-size: 60px;
  font-style: italic;
  line-height: 60px;
  font-family: "Baskerville", Georgia, sans-serif;
  color: #febf4b;
}

.featured-contributor #sidebar h5 {
  color: #fff;
  font-size: 18px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
  font-weight: normal;
}

.interview-wrapper img {
  width: 498px;
  border: 1px solid #16151a;
}

.featured-contributor #sidebar ul.featured-contributors {
  font-size: 16px;
  line-height: 21px;
  color: #74757a;
  list-style-type: none;
  margin-bottom: 40px;
}

.featured-contributor #sidebar ul.featured-contributors a {
  color: #74757a;
  font-weight: bold;
}

.featured-contributor #sidebar ul.featured-contributors a:hover {
  color: #febf4b;
}

.featured-contributor #sidebar ul.featured-contributors li.active a {
  color: #febf4b;
  background-image: url('http://static.mypictory.com/static/assets/img/sidebar-li-bullet-yellow.png');
  background-repeat: no-repeat;
  background-position: 0 3px;
  padding-left: 15px;
  margin-left: -15px;
}

.featured-contributor #sidebar ul.all-contributors {
  font-size: 12px;
  line-height: 16px;
  color: #74757a;
  list-style-type: none;
}

.featured-contributor #sidebar ul.all-contributors a {
  color: #74757a;
  font-weight: bold;
}

.featured-contributor #sidebar ul.all-contributors a:hover {
  color: #febf4b;
}
*/
/* Featured contributor - classes
-------------------------------------------------------------- */
/*
.featured-contributor .deck {
  font-size: 18px;
  line-height: 27px;
  color: #febf4b;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.featured-contributor p img {
  display: block;
}

.featured-contributor h4 {
  font-size: 16px;
  font-family: "Baskerville", Georgia, sans-serif;
  color: #ffffff;
  margin-bottom: 5px;
}

.featured-contributor .caption {
  font-size: 12px;
  line-height: 14px;
  font-family: "Baskerville", Georgia, sans-serif;
  color: #74757a;
  background: #16151a;
  position: relative;
  margin-top: -20px;
  padding: 10px 15px;
  -moz-border-radius-bottomleft: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  -webkit-border-bottom-right-radius: 8px;
}
*/

/* Flat pages and notes
-------------------------------------------------------------- */
/*
.flat-page h3 {
  color: #5eacc5;
  margin-bottom: 20px;
}

.flat-page #content p,
.flat-page #content ul,
.flat-page #content ol {
  line-height: 1.4em;
}

.flat-page #content ul,
.flat-page #content ol {
  margin-left: 20px;
}

.flat-page #content em {
  font-style: italic;
}

.flat-page #content strong {
  font-weight: bold;
  color: #5c5c61;
}

.flat-page #content a {
  color: #5eacc5;
}

.flat-page #content a:hover {
  color: #5c5c61;
}

.flat-page h4 {
  color: #a3a4a9;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
  font-size: 36px;
  line-height: 40px;
  margin-bottom: 10px;
}

.flat-page h5 {
  color: #5eacc5;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: bold;
  font-size: 22px;
  line-height: 24px;
}

.flat-page #content {
  width: 469px !important;
  border-left: 1px solid #5eacc5;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  font-size: 14px;
}

.flat-page #content :last-child {
  margin-bottom: 0 !important;
}

.flat-page h4.subhead {
  padding-top: 0;
  margin-top: -0.1em;
}

.flat-page .secondary-content {
  margin-top: 40px;
  color: #a3a4a9;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
  font-size: 36px;
  line-height: 40px;
  background-color: #f0f1f6;
  margin-left: -15px;
  padding: 12px 15px 15px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  -webkit-border-bottom-right-radius: 8px;
}

.flat-page .secondary-content p,
.flat-page .secondary-content ul,
.flat-page .secondary-content ol {
  line-height: 1.2em !important;
}

.flat-page #sidebar ul {
  list-style-type: none;
}

.flat-page #sidebar ul li a {
  font-weight: bold;
}

.flat-page #sidebar ul li.active a {
  color: #5b5c61;
  background-image: url('images/button-arrow.png');
  background-repeat: no-repeat;
  background-position: 0 3px;
  padding-left: 15px;
  margin-left: -15px;
}

.note {
  margin-bottom: 40px;
  font-size: 14px;
}

.note .date {
  color: #5b5c61;
  font-weight: bold;
  margin-bottom: 0;
}

.note.alt {
  background-color: #f6f6f8;
  margin-left: -15px;
  padding: 15px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  -webkit-border-bottom-right-radius: 8px;
}
*/
/* Contact Page
-------------------------------------------------------------- */
.page-title {
  text-align: center;
  margin-top: 0em;
  margin-bottom: 0em;
  /* You may need to adjust font size based on your main.css */
  font-size: 2em; 
  text-transform: uppercase;
}

#page-wrap {
	/* width: 525px; */
	/* background: white; */
  width: 100%;
  max-width: 525px;
  padding: 20px;
	/* padding: 20px 50px 20px 50px; */
	margin: 0 auto;
	/* min-height: 500px; */
	height: auto !important;
	/* height: 500px; */
  box-sizing: border-box;
}

#contact-area {
  /* Center the form area */
  max-width: 600px;
  margin: 0 auto 50px auto;
  padding: 20px;
  /*
	width: 600px;
	margin-top: 25px;
  */
	/*
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	*/
}

#contact-area label {
  float: none; /* Remove float from old layout */
  display: block;
  text-align: left;
  margin-right: 0;
  margin-bottom: 5px; /* Space between label and input */
  width: auto; /* Remove fixed width */
  font-weight: bold;
  font-size: 1em; /* Inherit or use a smaller, relative size */
  padding: 0;
}

#contact-area input[type="text"], 
#contact-area input[type="email"],
#contact-area textarea {
    /* Use 100% width for modern full-width fields */
    width: 100%; 
    box-sizing: border-box; /* Include padding/border in the width */
    padding: 12px 15px; /* Generous padding */
    border: 1px solid #ccc;
    border-radius: 4px; /* Slightly rounded corners */
    font-size: 1.1em;
    transition: border-color 0.3s; /* Smooth transition for focus */
    /* Overwrite old hardcoded width */
    max-width: none; 
}

/* Textarea Specific Styles */
#contact-area textarea {
    height: 150px; /* Taller message box */
    resize: vertical; /* Allow vertical resizing only */
}

/* Focus State - Modern Blue/Gray Highlight */
#contact-area textarea:focus, 
#contact-area input[type="text"]:focus, 
#contact-area input[type="email"]:focus {
    border-color: #555; /* Darker border on focus */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    outline: none; /* Remove default browser outline */
}

/* Ensure the button is properly sized without inline styles */
.submit-button {
  background-color: #000; /* Solid Black */
  color: #fff !important; /* White text */
  border: 2px solid #000; /* Matching border */
  border-radius: 4px; /* Rounded corners */
  padding: 8px 20px;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;

  /* NEW FIX: Push the button to the right */
  display: block; /* Make it a block element to use margins */
  margin-left: auto; /* Pushes the button as far right as possible */
  margin-top: 20px; /* Add some space above it */
  
  /* Ensure no weird floating is interfering */
  clear: both !important; 

  /* Overrides */
  width: auto !important; 
  float: none !important; 
}

/* Hover Effect: Subtle color reversal for interaction */
.submit-button:hover {
  background-color: #cccccc; /* Light Gray background */
  color: #000 !important; /* Black text */
  border: 2px solid #000; 
}

#contact-area .form-group {
  margin-bottom: 20px;
  overflow: hidden; /* Clearfix for content */
}

/* Center and style the submission error message */
.error-message {
  text-align: center; /* This centers the text horizontally */
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Optional: Make the text red for visibility */
.error-message .highlight {
  color: #cc0000; /* A visible red color */
  font-size: 1.2em; /* Slightly larger text */
  display: block; /* Ensure the span acts like a block element for text-align to work on it */
}

.success-message {
  text-align: center; /* Centers the text horizontally */
  margin-top: 20px;
  margin-bottom: 20px;
}

/*
#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 400px;
	/ * font-family: Helvetica, sans-serif; 
	font-size: 1.4em; * /
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
	-webkit-border-radius: 5px;
  	-moz-border-radius: 5px;
}
*/

/*
#contact-area textarea {
	height: 90px;
	/ * 
	margin: 0;
	padding: 0;
	
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	* /
}
*/

/*
#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #888888;
}

#contact-area input.submit-button {
	width: 100px;
	float: right;
}
*/

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	/*
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	*/
	width: 100px;
	padding-top: 5px;
	/*
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	*/
	/* font-size: 1.4em; */
}

/* Misc. classes
-------------------------------------------------------------- */

.share-button { 
  display: inline-block;
  font-family: "Helvetica Neue", Arial, sans-serif; 
  font-size: 12px; 
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  height: 25px;
  line-height: 25px;
  padding: 0 15px;
  background-color: #1d1d22;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
}

.share-button:hover {
  background-color: #888888;
  color: #1e1e23 !important;
}

.clickable:hover {
  cursor: pointer;
}

.clear {
  clear: both;
}

@media screen and (max-width: 800px) {
	.header a{
		display:block;
		text-align:center;
		font-size:10px;
		text-shadow:none;
	}
	.header span.right_ab{
		float:none;
	}
}

/* Deleting 1/21/26 to allow hamburger menu to work on mobile 
@media screen and (max-width: 800px) { 


  #menu-container2 {
      height: 5.25vw !important; 
  }
  
  #menu-container2 a, 
  #menu-container2 span {
      font-size: 2vw !important; 
      line-height: 5.25vw !important; 
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      float: none !important;
  }
}
*/

/* -------------------------------------------------------------- 
NEW GALLERY LIST STYLES 
-------------------------------------------------------------- 
*/

.gallery-masonry {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 40px;
    padding: 0;
    /* Exposes container width for gap calculation in children */
    --col-width: calc((min(100vw, 1200px) - 40px) / 2);
  }

  .gallery-masonry .gallery-link {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  /* Portrait: left column, spans both rows */
  .gallery-masonry .gallery-link[data-orientation="portrait"] {
    grid-column: 1;
    grid-row: 1 / 3;
    aspect-ratio: 2 / 3;
  }
  
  /* Landscape 1: top of right column */
  .gallery-masonry .gallery-link[data-orientation="landscape"]:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: 3 / 2;
  }
  
  /* Landscape 2: bottom of right column, gap = 1/6 of column width */
.gallery-masonry .gallery-link[data-orientation="landscape"]:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
  aspect-ratio: 3 / 2;
  margin-top: calc(var(--col-width) / 6);
}

/* Image fills and crops to its card shape */
.gallery-masonry .gallery-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

/* Hover zoom — retained from original */
.gallery-masonry .gallery-link:hover img {
  transform: scale(1.05);
}

/* Title overlay — retained from original */
.gallery-masonry .gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-masonry .gallery-overlay h2 {
  color: white;
  text-align: center;
  padding: 20px;
  margin: 0;
}

/* Show overlay on hover (desktop) */
.gallery-masonry .gallery-link:hover .gallery-overlay {
  opacity: 1;
}

/* ---- Mobile — single column ---- */
@media screen and (max-width: 1100px) {
    .gallery-masonry {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      column-gap: 0;
      padding: 0 10px;
    }
  
    .gallery-masonry .gallery-link[data-orientation="portrait"] {
      grid-column: 1;
      grid-row: auto;
    }
  
    .gallery-masonry .gallery-link[data-orientation="landscape"]:nth-child(2),
    .gallery-masonry .gallery-link[data-orientation="landscape"]:nth-child(3) {
      grid-column: 1;
      grid-row: auto;
      margin-top: 12px;
    }
  }

@media screen and (max-width: 1100px) {
  /* HIDE the old menu */
  #menu-container2 {
    display: none !important;
  }

  /* SHOW the Hamburger Icon */
  #hamburger-icon {
    display: block !important;
    cursor: pointer;
    padding: 15px;
    position: absolute;
    right: 20px;
    top: 23px; /* Adjust alignment with logo */
    z-index: 1000;
  }

  /* Style the 3 bars of the hamburger */
  #hamburger-icon .bar {
    width: 25px;
    height: 3px;
    background-color: #000;
    margin: 5px 0; /* was 5px 0; */
    display: block;
    transition: 0.4s;
  }

  /* 3. The Fullscreen Overlay */
  #mobile-menu-overlay {
    /* Hidden by default, toggled by JS */
    display: none; 
    
    /* Full screen takeover */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* White background */
    
    /* Center the content vertically and horizontally */
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* 4. The Links inside the overlay */
  .mobile-menu-content a {
    text-decoration: none;
    font-size: 24px; /* Large readable text */
    color: #000000;
    display: block; /* Forces each link to its own line */
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
    font-family: "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 2px;
    transition: 0.3s;
  }

  .mobile-menu-content a:hover {
    color: #888888;
  }

  .mobile-menu-content a img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }

  /* 5. The "X" Close Button */
  .closebtn {
    position: absolute;
    top: 8px;
    right: 32px;
    font-size: 50px !important; /* Make the X large */
    text-decoration: none;
    color: #000;
  }

  div#header {
    height: 80px !important; /* Forces a clear height on mobile */
    padding-top: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
}

/* For the Newsletter page */
div.sender-form-field {
  display: flex;
  justify-content: center;
}
/* end section */

#footer {
  /* The magic line: pushes the footer to the bottom */
  margin-top: auto; 
  
  /* Add desired styling for your footer */
  text-align: left;
  width: 100%; /* Ensure it spans the full width */
}

/* -------------------------------------------------------------- 
   HAMBURGER MENU STYLES 
   Add this to the very bottom of main.css
-------------------------------------------------------------- */

/* Default: Hide hamburger and overlay on desktop */
#hamburger-icon {
  display: none;
}
#mobile-menu-overlay {
  display: none;
}

/* To hide caption / title of photos on gallery pages. They should remain visible in lightbox swipe pages */

.pswp-caption-content {
  display: none;
}

.pswp__dynamic-caption {
  display: block !important;
  opacity: 1 !important;
  color: #000 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  padding: 15px 15px !important;
  border-radius: 4px;
}

.pswp__dynamic-caption a {
  color: #000 !important;
}

.pswp__dynamic-caption--faded {
  opacity: 1 !important;
}