@charset "UTF-8";

/* BOY FEATURE */

.boy-feature{
margin:0 auto;
padding:0 0 20px 0;
font-family:"montserrat",sans-serif;
}

/* HEADER IMAGE */

.boy-header{
width:100%;
margin:0;
background:#000;
border:1px solid #333;
overflow:hidden;
    border-top-radius:10px;
   
}

.boy-header img{
display:block;
width:100%;
height:auto;
    
}
.boy-lead{
font-size:16px !important;
line-height:1.4 !important;
color:#AAA !important;
margin-bottom:10px !important;
}

.spacert {
height:25px;
border-top:1px solid #666;
}

.shout{
  font-weight:700;
  color:inherit;
}


/* -----------------------------
   MEMOIR SUB HEADINGS
----------------------------- */

.memoir-subhead{
  max-width:80%;
  margin:46px auto 18px;

  font-family:inherit;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.35;

  color:#CCC;
  text-align:left;
}
/* HEADER OVERLAY TEXT */

.boy-header{
position:relative;
}

.boy-header-caption{
position:absolute;
left:50%;
bottom:4.5%;
transform:translateX(-50%);
width:90%;

font-family:"montserrat",sans-serif;
font-size:clamp(24px,3vw,64px);
font-weight:700;
line-height:1.1;
text-align:center;

color:#fff;

text-shadow:
2px 2px 4px rgba(0,0,0,.75),
0 0 12px rgba(0,0,0,.55);

pointer-events:none;
}

.boy-header-caption span{
font-style:italic;
font-weight:700;
}

/* MOBILE */

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

.boy-header-caption{
width:92%;
bottom:5%;
font-size:clamp(18px,5vw,34px);
line-height:1.15;
}

}

/* STORY COLUMN - NO FRAME */

.boy-story{
width:80%;
margin:0 auto;
padding:18px 0 20px 0;
background:transparent;
border:0;
box-shadow:none;
overflow:hidden;
}

.boy-story p{
width:82%;
margin:0 auto 17px auto;
color:#bdbdbd;
font-family:"montserrat",sans-serif;
font-size:16px;
line-height:1.7;
font-weight:400;
text-shadow:2px 2px 3px #000;
}

.boy-story p strong{
color:#eee;
font-weight:700;
}

.boy-story em{
font-style:italic;
color:#ddd;
}

.boy-lead{
font-size:16px !important;
line-height:1.4 !important;
color:#BBB !important;
margin-bottom:10px !important;
}

.boy-intro{
font-size:16px !important;
line-height:1.6 !important;
color:#ddd !important;
margin-bottom:28px !important;
}

/* THUMBNAILS */

.story-thumb{
display:block;
width:250px;
max-width:34%;
margin-top:4px;
margin-bottom:20px;
background:#000;
border:1px solid #333;
box-shadow:5px 5px 5px rgba(0,0,0,.55);
overflow:hidden;
cursor:pointer;
transition:.2s ease;
text-decoration:none;
}

.story-thumb:hover{
filter:brightness(120%);
border-color:#777;
}

.story-thumb img{
display:block;
width:100%;
height:auto;
}

.story-thumb-left{
float:left;
margin-left:9%;
margin-right:26px;
}

.story-thumb-right{
float:right;
margin-right:9%;
margin-left:26px;
}

/* CAPTIONS */

.thumb-caption{
padding:8px 10px 9px 10px;
font-size:11px;
line-height:1.4;
font-family:"montserrat",sans-serif;
color:#aaa;
text-align:center;
background:#111;
border-top:1px solid #333;
text-shadow:1px 1px 2px #000;
}

/* QUOTE */

.boy-story blockquote{
clear:both;
width:72%;
margin:32px auto;
padding:18px 26px;
color:#e2e2e2;
font-size:21px;
line-height:1.45;
font-family:"montserrat",sans-serif;
font-style:italic;
text-align:center;
border-top:1px solid #555;
border-bottom:1px solid #555;
text-shadow:2px 2px 3px #000;
}

/* CLOSE */

.boy-close{
clear:both;
margin-top:14px !important;
color:#AAA !important;

}

/* MODAL */

.image-modal{
display:none;
position:fixed;
z-index:9999;
inset:0;
width:100%;
height:100%;
background:rgba(0,0,0,.92);
justify-content:center;
align-items:center;
padding:30px;
box-sizing:border-box;
}

.image-modal-content{
display:block;
max-width:92%;
max-height:88vh;
border:1px solid #555;
box-shadow:0 0 30px rgba(0,0,0,.8);
}

.image-modal-close{
position:fixed;
top:18px;
right:28px;
color:#ccc;
font-size:42px;
line-height:42px;
font-weight:300;
cursor:pointer;
text-shadow:2px 2px 4px #000;
z-index:10000;
}

.image-modal-close:hover{
color:#fff;
}

/* TABLET */

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

.boy-header{
width:100%;
}

.boy-story{
width:86%;
}

.story-thumb{
width:220px;
max-width:38%;
}

}

/* PHONE */

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

.boy-header{
width:100%;
}

.boy-story{
width:92%;
}

.boy-story p{
width:86%;
font-size:14px;
line-height:1.6;
}

.boy-lead{
font-size:18px !important;
}

.boy-intro{
font-size:16px !important;
}

.story-thumb,
.story-thumb-left,
.story-thumb-right{
float:none;
width:86%;
max-width:86%;
margin:22px auto;
}

.boy-story blockquote{
width:74%;
font-size:18px;
padding:15px 18px;
}

}