* {
  margin: 0;
  padding: 0;
}

:root {
	--font-body: "utopia-std", serif;
	--font-header:"effra", sans-serif;
	
	--body-light-bg: #f8f8ff;
	--content-light-bg: #fff;
	
	--nav-light-bg: #fff;
	--nav-light-font-color: #ababab;
	
	--body-light-font: #100c08;
	--nav-light-font: #707070;
	
	--body-dark-bg: #fff;
	--content-dark-bg: #fff;
	--nav-dark-bg: #efefef;
	
	--body-dark-font: #444;
	--nav-dark-font: #707070;
	--content-dark-font: #707070;
	
	--max-content-width: 60rem;
	--max-width:100rem;
	
	/* post Grid Variables */
	--pg-w: 20rem;
	--pg-h: 20rem;
	--pg-g: 2rem;

	--cut: 100px;
 
}
/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* -----------------------------------   Default Styles   -------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/
html {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--body-light-bg); 
  scroll-behavior: smooth;
}
img {
  width: 100%;
  height: auto;
}

body {
	font-family: var(--font-body);
	color: var(--body-light-font);
	background-color: var(--body-light-bg); 
	font-size: clamp(1rem, 1.25rem, 1.5rem);
	line-height: 1;
	
}
ul, li {
 list-style-type: none;
}
a {
  color: currentColor;
  text-decoration: none;
}
button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}
strong, b {
  font-weight: 700;
}
small {
  font-size: inherit;
  color: var(--color-text-grey);
}
blockquote{
	font-size: 1.5rem;
	font-weight: bold;
	padding: 2rem;
	margin: 2rem;
	border-left: 10px solid #efefef;
}

h1,h2,h3,h4,h5,h6{
	font-family: var(--font-header);
	font-weight: 400;
	text-transform: uppercase;
}
h1{
	font-size: clamp(2rem, 4vw, 3rem); // 32px, 4vw, 48px
}
h2{
	font-size: clamp(1.625rem, 3vw, 2rem); //24px, 3vw, 32px
}
h3{
	font-size: clamp(1.25rem, 2vw, 1.625rem); //28px, 1vw, 26px
}
p{
	line-height: 1.6;
	margin-bottom: 1.6rem;
}
iframe{
	width: 100%;
	max-width: var(--max-content-width);
	aspect-ratio: 16 / 9;
	height: auto;
}
.container {
	padding: 2rem;
	margin: 0 auto;
}

.grid{
	display: grid;
}
.flex{
	display: flex;
}

@media only screen and (min-width: 999px){
	.default{
		grid-template-columns: 1fr var(--content-grid) 1fr;
	}
	.home{
		grid-template-columns: 1fr var(--content-grid) 1fr;
	}
}

.maintentance-banner {
	background-color: #ff9800; /* Red */
	color: white;
	position: sticky;
	top:0;
	z-index: 101;
	align-items: center;
	justify-content: center;
	padding: var(--pg-g);
	text-transform: uppercase;
	font-weight: 700;
}
.maintentance-banner.local{
	background-color: #2196F3;
}
.maintentance-banner.staging{
	background-color: #ff9800; 
}

.line{
	padding: var(--pg-g);
	margin:  var(--pg-g) auto;
	position: relative;
	text-align:center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transition: width 275ms ease;
	transform-origin: center center;
	gap: 20px;	
}

.line:after{
	content: " ";
	height: 3px;
	width:100px;
	background-color: #707070;
	overflow: hidden;
}
.read-more{
	padding: calc(var(--pg-g) / 2 ) var(--pg-g);
	margin: auto;
	display:block;
	max-width: fit-content;
	transition: all 475ms ease;
	border: 3px solid var(--body-light-font);
	font-family: var(--font-header);
	text-transform: uppercase;
}

.read-more:hover{
	color:var(--nav-light-font-color);
	border: 3px solid var(--nav-light-font-color);
	transform: translateY(-2px);
}
/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* -----------------------------------   Header      -----------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/

header.main{
	background-color: var(--nav-light-bg);
	border-bottom: 1px solid #f5f5f5;
	position: relative;
}

/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* -----------------------------------   Logo        -----------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/

.screen-logo{
	font-family: var(--font-header);
	font-weight: 700;
	color: var(--body-light-font);
	text-transform: uppercase; 
	grid-column: 1;
	text-align: center;
	
	font-size: clamp(1.5rem, 1.38rem + 0.6vw, 1.875rem);
}

.screen-logo a:hover{
	transform: rotate(10deg) scale(1.2);
}
.screen-logo span{
	letter-spacing: clamp(0.4rem, 0.472rem + 0.64vw, 0.6rem);
	display: block;
	font-weight: 400;
	font-size: clamp(0.75rem, 0.67rem + 0.4vw, 1rem);
	color: var(--nav-light-font);
}

/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* --------------------------------------   Intro  --------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/
.intro{
	font-weight: 400;
	text-align: center;
	font-family: var(--font-header);
	
	max-width: var(--max-content-width);
	margin: auto;
}
.intro h1{
	font-size: clamp(2rem, 6vw, 10rem);

}
.intro .description{
	font-weight: 400;
	max-width: var(--max-content-width);
	margin:auto;
	text-transform: none;	
	text-align: center;	
	padding: var(--pg-g);
}
.meta{
	justify-content: center;
}
/**/
/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* -----------------------------------   Main Navigation -------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/

nav.main{
		grid-template-columns: repeat(5, 1fr);
		max-width: var(--max-width);
		margin:auto;
		align-items: center;
		padding: var(--pg-g);
	}
.main-navigation{
		display: none;
		flex-direction: column;
		grid-column: 1 / 6;
		opacity: 0;
		align-items: center;
		justify-content: center;
		padding-block-start: var(--pg-g);
		height: 0;
		transition:height 450ms;
	}
@media only screen and (min-width: 999px){
	.main-navigation{
		display: flex;
		flex-direction: row;
		justify-content: end;
		opacity: 1;
		grid-column: 3 / 6;
		padding-block-start: 0;
		height: 100%;
	}
}

.main-navigation a{
	font-weight: 400;
	font-family: var(--font-header);
	text-transform: uppercase;
	text-align: center;
	color:var(--nav-light-font-color);
	transition: all 475ms ease;
	display: block;
	position: relative;
	opacity:1;
	
}
.main-navigation a:hover, .main-navigation a.active{
	color: var(--body-light-font);
}

.nav-toggle{
	display: none;
	align-items: end;
	
}
.menu-icon{
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--pg-g);
	grid-column: 5 / 6;
}
.nav-toggle:checked ~ .menu-icon{
	  display: flex;
}
@media only screen and (min-width: 999px){
	.nav-toggle, .menu-icon{
		display: none;
	}
}
.menu-icon svg{
	fill: var(--body-light-font);
	height:24px;
	width: 24px;
}
.menu-icon svg:hover{
	fill: var(--body-light-font);
}
.menu-icon .line{
	transform-origin: center center;
	transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
	width:20px;
	height: 2px;
	background=color:#fff;
}	

.nav-toggle:checked~.menu-icon .line-1{
	opacity:0;
}
.nav-toggle:checked~.menu-icon .line-2{
	transform: rotate(45deg);

}
.nav-toggle:checked~.menu-icon .line-3{
	transform: rotate(-45deg);
}
.nav-toggle:checked~.menu-icon .line-4{
	opacity:0;
}
.nav-toggle:checked ~ .main-navigation{
	display: flex;
	opacity: 1;
	height: 100%;
}

/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* -----------------------------------   Default page   ----------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/
.default{
	max-width: var(--max-content-width);
	margin: auto;
}

.default h1{
	padding: var(--pg-g);
	margin:  var(--pg-g) auto;
	position: relative;
	text-align:center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
}

.default h1:after{
	content: " ";
	height: 3px;
	width:100px;
	background-color: #707070;
	transition: width 275ms ease;
	transform-origin: center center;
	overflow: hidden;
}
.default-content{
	
}
@media only screen and (min-width: 999px){
	.default-content{
		grid-auto-rows: 1fr;
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.default-content h2{
	position: relative;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}
.default-content h2:before{
	content: " ";
	height: 3px;
	width:100%;
	background-color:  #c9c9c9;
	position: absolute;
	bottom:0;
	transition: width 275ms ease;
	transform-origin: center center;
	overflow: hidden;
}
.default-content .block{
	padding: 0 2.5rem;
}
.default-content p{
	padding: 1rem 2.5rem;
}

.default-info{
	
}
@media only screen and (min-width: 999px){
	.default-info{
		
	}
}
.default-info h3{
	padding: var(--pg-g);
	margin:  var(--pg-g) auto;
	position: relative;
	text-align:center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
}
.default-info h3:first-of-type{
	position: relative;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	margin-top: 0.54rem;
}
.default-info h3:after{
	content: " ";
	height: 3px;
	width:100px;
	background-color: #707070;
	transition: width 275ms ease;
	transform-origin: center center;
	overflow: hidden;
}

/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* -----------------------------------   Home page   -----------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/
.homepage-about{
	padding: var(--pg-g);
	margin: auto;
}
.homepage-about-content{
	max-width: var(--max-content-width);
	margin: auto;
}

.homepage-about-content h2{
	padding: calc( var(--pg-g) * 2);
	font-size: clamp(2rem, 4vw, 6rem);
	text-align: center;
}

.photography-pages{
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: var(--pg-g)  0;
	border-top: 1px solid #f5f5f5;
	border-bottom: 1px solid #f5f5f5;	
	text-align: center;
}

.homepage-blog{
	padding: var(--pg-g);
	background-color: var(--body-light-bg);
	border-bottom: 1px solid #f5f5f5;
	position: relative;
}

.homepage-blog-grid{
	margin: auto;
	max-width: var(--max-width);
	gap: var(--pg-g);
	text-align: center;
}

@media only screen and (min-width: 999px){
	.homepage-blog-grid{
		grid-template-columns: repeat(3, 1fr);
	}
}
.homepage-blog-grid h3{
	text-align: center;
	padding: var(--pg-g);
	
}
.homepage-blog-grid article{
	
}
.homepage-blog-grid figure{
	
}


@media only screen and (min-width: 999px){
	
	.homepage-blog-grid figure{
		
	}
	.homepage-blog-grid div{
	}
}
.homepage-blog-grid h2, .homepage-blog-grid p, .homepage-blog-grid a{
	display: block;
}
.homepage-blog-grid a{
	font-weight: 700;
	text-transform: uppercase;
	font-family: var(--font-header);
	display: inline-block;
	transition: all 475ms ease;
}

.homepage-blog-grid a:hover{
	color:var(--nav-light-font-color);
}

.homepage-blog-grid a.read-more{
	padding: calc(var(--pg-g) / 2 ) var(--pg-g);
	margin-top: var(--pg-g);
	display: inline-block;
	transition: all 475ms ease;
	border: 3px solid var(--body-light-font);
}

.homepage-blog-grid a.read-more:hover{
	color:var(--nav-light-font-color);
	border: 3px solid var(--nav-light-font-color);
}
/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* -----------------------------------   Blog page   -----------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/

.latest-post{
	gap: 2rem;
	padding: var(--pg-g);
	max-width: var(--max-width);
	margin: auto;
	flex-flow: column wrap;
}
@media only screen and (min-width: 999px){
	.latest-post{
		flex-direction: row;
	}
}
.latest-post-intro{
	padding: var(--pg-g);
	background-color: var(--nav-light-bg);
	border-bottom: 1px solid #f5f5f5;	
	flex: 0 1 25%;
}

.latest-post-content{
	flex: 1 1 0;
}
.latest-post article{
	background-color: #fff;
	position: relative;
	border-bottom: 1px solid #f5f5f5;	
}
.latest-post .content{
	transition: all 0.25s ease;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: column;
	opacity: 1;
	font-family: var(--font-header);
	text-align: center;
}
.latest-post .post-title{
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1));
}
.latest-post .post-title span, .latest-post .post-title time{
	font-family: var(--font-header);
	font-weight:700;	
	display: block;
}
.latest-post .post-body{
	padding: var(--pg-g);
}
.latest-post .post-link{
	display: block;
	padding-top: var(--pg-g);
	font-weight: 700;
	text-decoration: underline;
	text-align: center;
	font-weight: 700;
}
.location-guides{
	text-align: center;
	grid-template-columns: minmax(50%, 1fr) 1fr;
	padding: var(--pg-g);	
	background-color: var(--nav-light-bg);
	justify-items: center;
	align-items: center;
}
.location-guides-grid{
	padding: var(--pg-g);	
	max-width: var(--max-content-width);
	flex-flow:  column wrap;
	
}
@media only screen and (min-width: 999px){
	.location-guides-grid{
		padding: var(--pg-g);	
		max-width: var(--max-content-width);
		flex-flow:  row wrap;
		
	}
}
.location-guides-grid .section-title{
	flex: 1 1 100%;
}
.location-guides-grid .section-description{
	flex: 1 1 100%;
	padding-bottom: calc( var(--pg-g) * 4);
}
.location-guides-grid figure{
	flex: 1;
	text-align: center;
	transform: rotate(8deg);
	
}
.location-guides-grid figure img{
	padding: var(--pg-g);
	background-color: #fff;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	max-width: 400px;

}
.location-guides-grid .post-title{
	flex: 0 1 60%;
	padding: var(--pg-g);
	text-align: left;
}
.location-guides-grid h3{
	padding-bottom: var(--pg-g);
	
}
.location-guides-grid a.post-link{
	background-color: var(--purple-bg);
	transition: all 275ms ease;
	transform-origin: center center;
	overflow: hidden;	
	padding: calc(var(--pg-g) / 2) var(--pg-g);
	color: #fff;
	font-family: var(--font-header);
	font-weight: 700;
	display: inline-block;
	margin-top: var(--pg-g);
}
.location-guides-grid a.post-link:hover{
	opacity: 0.8;
	border-bottom: 10px solid var(--purple-bg-alt);
	transform: translateY(-10px);
}

.blog-categories{
	padding: 2rem;
	max-width: var(--max-width);
	margin: var(--pg-g) auto;
	text-align: center;
	
}
.blog-categories ul{ 
	align-items: center;
	justify-content: center;
	gap: var(--pg-g);
	flex-wrap: wrap;
}
.blog{
	position: relative;
}
.blog-posts{
	text-align: center;
	padding: var(--pg-g) 0;
}
.post-grid {
	grid-template-columns: repeat(1, 1fr);
	gap: 2rem;
	padding: var(--pg-g);
	max-width: var(--max-width);
	margin: auto;
}
@media only screen and (min-width: 999px){
	.post-grid{
		grid-template-columns: repeat(2, 1fr);
	}
}
@media only screen and (min-width: 1280px){
	.post-grid{
		grid-template-columns: repeat(3, 1fr);
	}
}
.post-grid > div, .post-grid > article{
	background-color: #fff;
	
}
.post-grid time{
	display: block;
	font-family: var(--font-header);
	text-align: center;
}

.post-grid .post-link a{
	display: block;
	padding-top: var(--pg-g);
	font-weight: 700;
	text-decoration: underline;
	text-align: center;
	color: var(--purple-bg);
}
.post-grid .post-body{
	background-color: var(--content-light-bg);
	border-radius: 20px;
	padding: var(--pg-g);
}
/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* -----------------------------------   Single Post page   ----------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/

.article{
	max-width: var(--max-content-width);
	margin:auto;
	background-color: #fff;
	margin: var(--pg-g) auto;
}

.article header h1{
	padding: var(--pg-g);
	margin:  var(--pg-g) auto;
	position: relative;
	text-align:center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
}

.article header h1:after{
	content: " ";
	height: 3px;
	width:100px;
	background-color: #707070;
	transition: width 275ms ease;
	transform-origin: center center;
	overflow: hidden;
}
.article-content{
	max-width: var(--max-content-width);
	margin: auto;
	gap:var(--pg-g);
}
.article .post-meta{
	padding-top: 2rem;
	padding-bottom: 2rem;	
	
}
.article .post-body{
	padding: var(--pg-g);	
	
}
.article .post-body img{
	border-radius: 20px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}
.article .post-body h1, .article .post-body h3{ 
	padding-top: 2rem;
	padding-bottom: 2rem;	
}
	
.article .meta-section{
	padding-bottom: 2rem;
}
.article .meta-section h3 {
	padding: var(--pg-g);
	text-align:center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
}
.article .meta-section h3:after{
	content: " ";
	height: 3px;
	width:100px;
	background-color: #707070;
	transition: width 275ms ease;
	transform-origin: center center;
	overflow: hidden;
}

.article-stats{
	align-items: center;
	justify-content: center;
	grid-gap: 0.2rem;
	font-family: var(--font-header);
	font-weight: 400;
}
.article .tags{
	display: flex; 
	flex-wrap: wrap;
	align-items: center;
	justify-items: center;
	justify-content: center;
}
.article .tags li{
	padding-right: 7px;
}
.article .tags li a {
	font-family: var(--font-header);
	font-weight: 700;
	opacity: 0.6;	
	text-decoration: underline;
}
.article .tags li a:hover{
	opacity: 1;
}
.article .post-body h1, main.post .post-body h2, main.post .post-body h3{
	padding-top: 2rem;
	padding-bottom: 2rem;
}
.article .post-body figure{
	margin-bottom: var(--pg-g);
}
.article .post-body figcaption{
	text-align: center;
	font-weight: 700;	
}
.article .post-body a{
	font-weight: 700;	
	text-decoration: underline;
}
.article .post-body  a:hover{
	opacity: 1;
}

.post-navigation{
	padding: var(--pg-g);	
	margin: var(--pg-g) auto;	
	text-align: center;
	border-top: 1px solid #efefef;
	border-bottom: 1px solid #efefef;
	
	grid-auto-rows: 1fr;
	grid-template-columns: repeat(4, 1fr);
	
	max-width: var(--max-content-width);
}

 .post-navigation a{
	transition: transform 1s ease-in-out;
}
.post-navigation h4{
	opacity: .6;
}

.previous-post, .previous-page {
	grid-column: 1 / span 4;
	text-align: left;
	flex: 1 1 0;
	align-items: center;
	justify-content: flex-start;
	
}
.next-post, .next-page{
	grid-column: 1 / span 4;
	text-align: right;
	flex: 1 1 0;
	align-items: center;
	justify-content: flex-end;
}


@media only screen and (min-width: 999px){
	.previous-post, .previous-page {
		grid-column: 1 / span 2;
		flex: 1 1 0;
		align-items: center;
		justify-content: flex-start;
		
	}
	.next-post, .next-page{
		grid-column: 3 / span 2;
		text-align: right;
		flex: 1 1 0;
		align-items: center;
		justify-content: flex-end;
	}
}
.previous{
	align-items: center;
	justify-content: flex-start;
	gap: var(--pg-g);
}
.next{
	align-items: center;
	justify-content: flex-end;
	gap: var(--pg-g);
}

.previous-post a svg, .previous-page a svg, .next-post a svg, .next-page a svg{ 
	transition: transform 375ms ease-in-out;
	transform: translateX(0px);
	
}

.previous-post a:hover svg, .previous-page a:hover svg{ 
	transform: translateX(20px);
}
.next-post a:hover svg, .next-page a:hover svg{ 
	transform: translateX(-20px);

}

.related-posts{	
	padding: var(--pg-g);
	background-color: #fff;
	max-width: var(--max-content-width);
	margin: var(--pg-g) auto;
}

.related-posts h2{
	margin-bottom: var(--pg-g);
	text-align:center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
}

.related-posts h2:after{
	content: " ";
	height: 3px;
	width:100px;
	background-color: #707070;
	transition: width 275ms ease;
	transform-origin: center center;
	overflow: hidden;
}

.related-posts-grid {
	
	padding-top: 2rem;
	grid-gap: 1rem;

}
@media only screen and (min-width: 999px){
	.related-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
  }
}
.related-posts-grid li{
	border: 1px solid #efefef;
	background-color: #fff;
	text-align: center;
	border-radius: 20px;
}
.related-posts-grid .post-title{
	padding: var(--pg-g);
}

.related-posts-grid img{
	object-fit: cover;
	display: block; 
	max-width: 100%;
	border-radius: 20px 20px 0px 0px;
}
.related-posts-grid a{
	break-inside: avoid;
}

.related-posts-grid a:hover{
	transform: translate(0, -2px) scale(1.2);
}
.related-posts time{
	opacity: 0.7;
}
/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* -----------------------------------   Photography Page   ----------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/

.photography-grid{
	gap: var(--pg-g);
	margin: auto;
	
	max-width: var(--max-width);
}
@media only screen and (min-width: 840px){
	.photography-grid{
		grid-auto-rows: 1fr;
		grid-template-columns: repeat(2, 1fr);
	}
}
@media only screen and (min-width: 1280px){
	.photography-grid{
		grid-auto-rows: 1fr;
		grid-template-columns: repeat(3, 1fr);
	}
}
/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* -----------------------------------   Gallery page   ----------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/
.gallery-content{
	position: relative;
	padding: var(--pg-g);
}

.gallery-navigation{
	display: flex;	
	flex-wrap: wrap;
	
	padding: var(--pg-g);
	
	justify-content: center;
	text-align: center;
	margin:auto;
	max-width: var(--max-content-width);
}

.gallery-navigation li{
	flex: 1 1 0;
}
.gallery-navigation a{
	font-family: var(--font-header);
	font-size: 1.25rem;
	font-weight: 700;
	opacity: 0.6;
	text-transform: uppercase;	
}
.gallery-navigation a.active{
	opacity: 1;
}
.gallery-navigation a:hover{
	opacity: 1;
}

.gallery-grid{
	gap: var(--pg-g);
	margin:auto;
	padding: var(--pg-g);
	max-width: var(--max-width);
}
@media only screen and (min-width: 840px){
	.gallery-grid{
		grid-template-columns: repeat(2, 1fr);
	}
}
@media only screen and (min-width: 1280px){
	.gallery-grid{
		grid-template-columns: repeat(4, 1fr);
	}
}

.gallery-grid figure{
	height: 100%;
	overflow: hidden;
	position: relative;
	background-color: #fff;
}
.gallery-grid figcaption{
		transition: all 0.25s ease;
		position: absolute;
		top:0;
		color: #fff;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
		opacity: 0;
		font-family: var(--font-header);
		
}
.gallery-grid a:hover figcaption{
		height: 100%;
		width: 100%;
		
		flex-wrap: wrap;
		flex-direction: column;
		opacity: 1;
}
.gallery-grid  figcaption span {
	color:#fff;
	text-transform: uppercase;
	display: inline-block;
	text-align: center;
}
.gallery-grid  figcaption .name {
	font-weight: 700;
}
.gallery-grid  figcaption .caption {
	font-size: clamp(1rem, 1.25rem, 1.5rem);
	
}
@media only screen and (min-width: 1280px){
	.gallery-grid figure:nth-child(3n), .gallery-grid figure:nth-child(9n){
		grid-row: span 2;
		grid-column: span 2
	}

}
.gallery-grid  img{
	transition: all 600ms ease-in;
	object-fit: cover;
	grid-column: 1 / span 4;
	grid-row: 1 / span 4;
	transform: scale(1.1);

}
.gallery-grid  a:hover img, .photography-grid a:focus img{
	transform: scale(1);	
}
/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* -----------------------------------   Maintenance Page     ------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/
.maintenance{
	background-color: var(--body-light-bg);
	text-align: center;
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-self: center;
	justify-items: center;
	align-items: center;
}
	
.maintenance > div{
	text-align: center;
	max-width: var(--max-content-width);
	margin: auto;
}
.maintenance div.logo{
	max-width: var(--max-content-width)
}
.maintenance div.logo img{
	max-width: 400px;
	max-height: 400px;
	margin: auto;
}	
/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* -----------------------------------   Search page   ---------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/
.search{
	max-width: var(--max-content-width);
	margin: auto;
}


.search-content{
	max-width: var(--max-content-width);
	margin: auto;
	padding: calc( var(--pg-g) / 2 ) var(--pg-g) ;
	
}
@media only screen and (min-width: 999px){
	.search-content{

	}
}

.search-content h2, .search-content h3{
	position: relative;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}
.search-content h2:before, .search-content h3:before{
	content: " ";
	height: 3px;
	width:100%;
	background-color:  #c9c9c9;
	position: absolute;
	bottom:0;
	transition: width 275ms ease;
	transform-origin: center center;
	overflow: hidden;
}
.search-form{
	margin: var(--pg-g) auto;  
	justify-content: space-between;
	gap: var(--pg-g);
}

.search-form input{
	font-weight: 700;
	font-size: 1.25rem;
	font-family: var(--font-header);
	color:#707070;
	border: 1px solid #efefef;
	padding: calc( var(--pg-g) / 2 ) var(--pg-g) ;
	background-color: var(--content-light-bg);
	transition: all 275ms ease;
}
.search-form input[type="search"]{
	flex: 1 1 0;
}
.search-form input[type="submit"]:hover{
	color:#fff;
	border: 1px solid var(--content-light-bg);
	background-color:#707070;
}
.search-results{
	
}
.search-results li{ 
	margin-top: var(--pg-g);
	gap: var(--pg-g);
	grid-template-columns: 1fr 1fr 1fr;
	
	color:#707070;
	border: 1px solid #efefef;
	background-color: var(--content-light-bg);
}
.search-results div {
	
}
.search-results div.img{
	grid-column: 1;
	
}
.search-results  div.content{
	grid-column: 2 / span 2;
	padding: var(--pg-g);
	
}
.search-link{
	display: block;
	padding-top: var(--pg-g);
	font-weight: 700;
	text-decoration: underline;
	text-align: center;
}
/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* -----------------------------------   About page   ----------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/
.about{
	max-width: var(--max-width);
	padding: var(--pg-g);
	padding-bottom: calc(var(--pg-g) * 4);
	margin: auto; 
	grid-template-columns: repeat(12, 1fr); 
	position: relative;
	
}

.about-intro img{
	border: 1px solid #efefef;
	box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
	border-radius: 20px;
	background-color: #fff;
}
.about-content{
	grid-column: 2 / span 10;
}
@media only screen and (min-width: 999px){
	.about-content{
		grid-column: 2 / span 5;
	}
}
.about-content h2{
	position: relative;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}
.about-content h2:before{
	content: " ";
	height: 3px;
	width:100%;
	background-color:  #c9c9c9;
	position: absolute;
	bottom:0;
	transition: width 275ms ease;
	transform-origin: center center;
	overflow: hidden;
}

.about-image{
	
	grid-column: 2 / span 10;
	grid-template-columns: repeat(4, 1fr);
}
@media only screen and (min-width: 999px){
	.about-image{
		grid-column: 8 / span 4;
	}
}
.about-image ul{ 
	grid-gap: 20px;
}
.about-image li {
	grid-column: span 2;
} 

.about-image li:nth-child(3n) {
	grid-column: span 4;
} 
/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* -----------------------------------   Archive page   --------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/
.year{
	grid-template-columns: 1fr;
	padding: var(--pg-g);
	border-top: 1px solid #efefef;
}
@media only screen and (min-width: 999px){
	.year{
		grid-template-columns: 1fr 2fr;
	}
}
.year a{
	font-family: var(--font-header);
	font-weight: 700;
}
.year a:hover{
	color: #707070;
	text-decoration: underline;
}
.year li{
	grid-template-columns: 1fr 2fr;
}
/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* ----------------------------------- Mailing List ------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/


.article-mailing-list{
	flex-basis: 100%;
	padding:  calc(var(--pg-g) * 4) var(--pg-g) ;
	background-color: var(--nav-light-bg);
	background-size: cover;
	background-position: center center;
	position: relative;
}

.article-mailing-list .success{
	text-align: center;
	border: 1px solid var(--nav-light-font-color);
	padding: var(--pg-g);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	color: green;
}
.article-mailing-list .success:before{
	content: '';
	background-image: url('/assets/icons/site/success-icon.svg');
	background-repeat: no-repeat;	
	height: 64px;
	width: 64px;
	padding-right: var(--pg-g);

}
.article-mailing-list .error {
	text-align: center;
	border: 1px solid var(--nav-light-font-color);
	padding: var(--pg-g);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	color:red;
	
}
.article-mailing-list .error:before {
	content: '';
	background-image: url('/assets/icons/site/error-icon.svg');
	background-repeat: no-repeat;	
	height: 64px;
	width: 64px;
	padding-right: var(--pg-g);
	
}
.article-mailing-list .subscribe{

	max-width: 200px;
	
}

.article-mailing-list .asterisk, .article-mailing-list .indicates-required{
	
	color: #fff;
}

.mailing-list-form{
	max-width: var(--max-content-width);
	margin: auto;
	
}
.mailing-list-form label{
	font-family: var(--font-header);
	font-weight: 700;
	display: block;
	padding-bottom: var(--pg-g);
}

.mailing-list-text{
	
	font: var(--font-header);
}
.mailing-list-text a{
	font-family: var(--font-header);
	font-weight: 700;
	opacity: 0.6;	
	text-decoration: underline;
}
.mailing-list-text a:hover{
	opacity: 1;
}
.mailing-list-form-layout{
	grid-template-columns: repeat(6, 1fr);
	gap: var(--pg-g);
}
.mailing-list-form-layout .full{
	grid-column: 1 / span 6; 
}

.mailing-list-form-layout .left{
	grid-column: 1 / span 3; 
}
.mailing-list-form-layout .right{
	grid-column: 4 / span 3; 
}
.mailing-list-form-layout input{
	padding: calc(var(--pg-g) / 2);
	width: 100%;
	background-color: #fff;
	border: 1px solid var(--body-light-font);
}



/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* ----------------------------------- Social Links ------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/
 
.social-links{
	display: flex;
	justify-content: center;
	
}
.social-links a{
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.5rem;
	padding: 1rem;
	color: #707070;
}
.social-links a:focus, .socialinks a:hover, .socialinks a:focus svg, .socialinks a:hover svg{
	font-weight: 700;
	fill:#000;
	padding-bottom: 0.2vh;
	height: 1.8rem;
}
.social-links svg{
	font-size:0.3rem;
	height: 1.5rem;
	width: 1.5rem;
	fill: #444;
}


/* ------------------------------------------------------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------*/
/* -----------------------------------   Footer ----------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/  
/*--------------------------------------------------------------------------------------------------*/

.main-footer{
	background-color: var(--nav-light-bg);
	background-image: linear-gradient(rgba(70, 130, 180, .4), rgba(147, 43, 179, 0.4)), var(--footerimg);
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;

}
.backtotop{
	font-size: 1.4rem;
	font-family: var(--font-header);
	text-align: center;
	transform: translateY(-62px);
	
}
.backtotop a{
	margin: auto;
	border-radius: 50% ; 
	padding: 20px;
	height:30px;
	width: 30px;
	display: block;
	transition: transform 375ms ease-in-out;
	transform: translateY(20px);
	border: 1px solid #efefef;
	box-shadow: rgba(0, 0, 0, 0.06) 2px 2px 2px 2px outset;
	border-bottom: 0;
	background-color: var(--content-light-bg);
}
.backtotop a:hover{
	transition: transform 375ms ease-in-out;
	transform: translateY(0px);
}
.strapline{
	padding: calc(var(--pg-g) * 2) 0;
	background-image: linear-gradient(rgba(70, 130, 180, .4), rgba(147, 43, 179, 0.4)), var(--footerimg);
	position: relative;
}
.footerstrapline{
	text-align: center;
	padding-top: var(--pg-g ) ;
	
}
.footerstrapline svg{
	height:16px;
	color: var(--purple-bg);
	fill: var(--purple-bg);
}
.copyright{
	text-align: center;
}
.copyright svg{
	height:16px;
}

.footer-social{
	display: flex;
	flex-flow: row;
	grid-gap: 40px;
	justify-content: center;
	margin-bottom: var(--pg-g);
}

.footer-social svg{
	height: 36px;
	width: 36px;
}
.footer-social a svg{
	transition: all 300ms ease-in-out;
	color: var(--purple-bg);
	fill: var(--purple-bg);
}
.footer-social a:hover svg{
	transform: scale(1.1) translate(0, -10px) rotate(5deg);
}
.footer-contact{
	transition: all 0.2s ease-in-out;
	opacity: 1;
	font-size: 1rem; /* 24px */
	display: flex;
	flex-wrap: nowrap;
	flex-direction:row;	
	justify-content: center;
	padding: var(--pg-g ) 0 ;
}

.footer-navigation{

	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	
}
.footer-navigation ul{
	justify-content: center;
	padding: var(--pg-g) 0;
	font-family: var(--font-header);
	font-weight: 400;
	text-transform: uppercase;
	flex-wrap: wrap;
}

.footer-navigation li a{
	color:var(--nav-light-font-color);
	font-family: var(--font-header);
	font-weight: 400;
	text-transform: uppercase;
	padding: 10px;
	flex-grow: 1;
	
}
.footer-navigation li a:hover{;
}