/*CSS for global elements (header, footer, etc)*/
:root {
    --gray-light:#CCC;
    --gray-med:#707070;
    --primary:#ffce05;
    --secondary:#222;
    --primary-link:#3E63DD;
}


html{
margin:0;
padding:0;
}

body{
display:flex;
flex-direction:column;
margin:0;
padding:0;
font-family:'garamond-premier-pro', serif;
font-size:1.3em;
}


h1{
font-family: 'garamond-premier-pro-display', serif;
font-weight:normal;
font-size: 3em;
line-height:1.2em;
margin-bottom:0em;
}

h2{
font-family: 'garamond-premier-pro-display', serif;
font-weight:normal;
font-size: 2em;
line-height:1.2em;
margin-bottom:0em;
}

h3{
font-family: 'garamond-premier-pro-display', serif;
font-weight:normal;
font-size: 1.6em;
line-height:1.2em;
margin: 0em 0em;
}

a{
color: var(--primary-link);
}

a:hover{
text-decoration:none;
}

#subscribe{
background:#ffce05; 
display:flex; 
flex-basis:100%;
justify-content:center;
gap:1.5em; 
border-radius:8px; 
align-items:center; 
padding:1.2em;
box-sizing:border-box;
}

#subscribe img{
width:80%;
align-content:flex-end;
}

figure{
margin:0;
width:100%;
}

figcaption{
font-family:'Courier', serif;
font-size:0.75em;
color: var(--gray-med);
}


.primary{
background: var(--primary);
}

.primary-button{
display:inline-block;
background: var(--primary);
font-variant: small-caps;
text-decoration:none;
padding: 8px 18px;
color: var(--secondary);
letter-spacing:0.1em;
border-radius:4px;
}

.primary-button:hover{
box-shadow: 0px 2px;
transition: transform .3s cubic-bezier(.5,2.5,.7,.7), box-shadow .3s cubic-bezier(.5,2.5,.7,.7), -webkit-transform .3s cubic-bezier(.5,2.5,.7,.7), -webkit-box-shadow .3s cubic-bezier(.5,2.5,.7,.7);
transform: translateY(-5px);
}

.secondary-button{
display:inline-block;
background: #FFF;
text-decoration:none;
padding: 8px 18px;
color: var(--secondary);
border-radius:4px;
border: 2px solid var(--primary);
color: var(--primary-link);
}

.secondary-button:hover{
border: 2px solid var(--primary-link);
}

.w25{
width:25%;
}

.w33{
width:33%;
}

.w50{
width:50%;
}

.w66{
width:66%;
}

.w100{
width:100%;
}

.col{
display:flex;
flex-direction:column;
}

.row{
display:flex;
flex-direction:row;
}

.px1{
padding-left: 1rem;
padding-right: 1rem;
}

.px2{
padding-left: 2rem;
padding-right: 2rem;
}

.px3{
padding-left: 2rem;
padding-right: 2rem;
}

.py1{
padding-top: 1rem;
padding-bottom: 1rem;
}

.py2{
padding-top: 2rem;
padding-bottom: 2rem;
}

.py3{
padding-top: 3rem;
padding-bottom: 3rem;
}

.mt0{
margin-top:0;
}
.gap1{
gap:1rem;
}
.gap1{
gap:2rem;
}

.gap3{
gap:3rem;
}

.border{
border-top:1px solid #CCC; 
border-bottom:1px solid #CCC; 
padding:2em 0em;
}


.quote{
font-size:1.2em;
text-align:center;
padding: 1.2rem 1rem 1.2rem 1rem;
font-style:italic;
border-top:1px solid #CCC; 
border-bottom:1px solid #CCC; 
display:flex;
flex-direction:column;
flex-basis: 100%;
font-weight:400;
letter-spacing:0.05em;
}

.quote .attribution{
font-style:normal;
font-size:0.8em;
}

.award{
display:flex; 
gap:1em;
}

input[type=text], input[type=email]{
width: 100%;
padding: 12px 8px;
box-sizing: border-box;
border-radius:4px;
border: 1px solid var(--secondary);
font-family:'garamond-premier-pro', serif;
font-size:0.8em;
}

input[type=submit]{
border:0;
padding:8px 12px;
display:inline-block;
background: var(--secondary);
font-variant: small-caps;
text-decoration:none;
padding: 8px 8px;
color: #FFF;
letter-spacing:0.1em;
border-radius:4px;
font-family:'garamond-premier-pro', serif;
font-size:0.8em;
}

input[type=submit]:hover{
box-shadow: 0px 2px #8C7100;
transition: transform .3s cubic-bezier(.5,2.5,.7,.7), box-shadow .3s cubic-bezier(.5,2.5,.7,.7), -webkit-transform .3s cubic-bezier(.5,2.5,.7,.7), -webkit-box-shadow .3s cubic-bezier(.5,2.5,.7,.7);
transform: translateY(-5px);
}

label{
font-variant:small-caps;
font-size:0.8em;
}


#header{
display:flex;
justify-content:space-between;
align-items:center;
background:#FEFEFE;
text-align:center;
padding: 1.2em;
padding-bottom:0;
font-variant: small-caps;
font-size: 18px;
flex-direction:column;
gap:1em;
}


#main-menu{
display:flex;
gap:1.2em;
padding: 1.2rem;
letter-spacing: 0.1em;
border-bottom: 1px solid var(--gray-light);
font-variant: small-caps;
text-align:center;
flex-basis:100%;
justify-content: center;
}

#main-menu a{
    color: black;
    border-radius: 4px;
    padding: 5px 10px;
    border: 1px solid white;
    text-decoration:none;
    align-self:auto;
    }

#main-menu a.selected{
color: #707070;
    border: 1px dashed var(--gray-light);
}

#main-menu a:hover{
border:1px solid #999;
}

.container{
display:flex;
gap:3em;
justify-content:space-between;
margin:1em auto;
max-width:1600px;
width:100%;
box-sizing: border-box;
padding:1.2rem;
}

.page{
display:flex;
flex-direction:row;
justify-content:space-between;
max-width:1280px;
margin:0 auto;
padding-bottom:3em;
gap:3em;
}

.container img{
border-radius:8px;
}

#footer{
padding: 0.8em;
background:var(--secondary);
color:#FFF;
margin-top:8em;
}

.hide{
display:none;
}

/* masonry */
.grid {width:100%}
/* fluid 5 columns */
.grid-sizer,
.grid-item, .grid-item-expandable { width: 18%; margin-bottom:2%;  }
.grid-item--width2, .grid-item-expandable--width2 { width: 100%; margin-bottom:2%; }

.gutter-sizer { width: 2%; }

.grid-item img.expando{
border:4px double white;
cursor:zoom-in;
}

.grid-item img.expando:hover{
border:4px double var(--primary-link);
}



@media screen and (min-width: 768px){
#viewmenu{
display:none;
}

}


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


.grid-sizer,
.grid-item { width: 100%; margin-bottom:1%; }
.grid-item img.expando{
border:0px double white;
cursor:default;
}
.grid-item img:hover{
border:0px double var(--primary-link);
}

#viewmenu{
    font-size: 1em;
    padding: 8px 18px;
    cursor:pointer;
    border-radius: 4px;
    border:1px solid var(--gray-light);
    letter-spacing:0.1em;
}

#viewmenu:hover{
color:white;
background:black;
}

#header{
flex-direction:row;
align-items: center;
border-bottom: 1px solid var(--gray-light);
padding-bottom:1.2em;
}

#header a, #header a img {
    margin-top: 0px;
    width: 250px;
	display:flex;
	
}

#main-menu{
	margin: 0px;
	flex-direction: column;
	gap: 1em;
	padding-top: 1em;
}

#main-menu a{

}
    
#main-menu a.selected{
color: #707070;
border:0;
border: 1px dashed var(--gray-light);
}

.page, .container, #subscribe, .container div{
flex-direction:column;
}

#subscribe img{
width:50%;
}

.w25, .w33, .w50, .w66{
width:100%;
}

.gap3{
gap:0rem;
}


.quote{
font-size:1em;
}

.award{
display:flex; 
gap:0em;
margin-bottom:2rem;
}

.order-2{
order:2;
margin-top:2rem;
}

.px1, .px2, .px3, .py1, .py2, .py3{
padding:0;
}


    
}