@import 'menu.css';
@import 'dist/jquery.fancybox.css';


/* CORE STYLES */
:root {
    --text: #555;
	--green: #3b5732; 
  }



	* {
		padding:0;
		margin:0;
	}

	html, body {
		height:100%;

	}

	.skrollr-desktop body {
		height:100% !important;
	}

	body {
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
		background-color: #f0f0f0;
	}

	p {
		margin:1em 0;
	}
h1 {
	font-size: 24px;
	font-weight: 400;
}
h2 {
	font-size: 20px;
	font-weight: 400;
}
h1+h2:has(+p){
	margin-bottom: 1.5rem;
}
h3 {
	font-size: 18px;
	font-weight: 400;
}
img{
	max-width: 100%; 
}
.container{
	background-color: #fff; 
}
.newlogo{
	background-color: #fff;
	text-align: right;
	padding: 0 1vw;
	color: #3b5732; 
	text-align: center; 
	padding: 2rem; 
	display: grid;

}
.newlogo img{
	display: block;
	margin: -4px auto;
}
.newlogo img.fern{
	max-height: 100px; 
}	
.newlogo img.chrish{
	max-height: 90px; 
}	
.newlogo h1{
	letter-spacing: 6px;
	font-size: 2.5rem; 
	font-weight: 400;
}
.newlogo h2{
	letter-spacing: 3px;
	font-weight: 400;
}
.hero{
	padding-block: 2rem; 
	display: block;

}
#maintext .hero img{
	float: none; 
	margin: auto; 
}

#architect {
	background-color: #fff;
	color: #999;
	letter-spacing: 2.5px;
	font-size: 22px;
	padding: 36px 5vw;
	text-transform:lowercase;
	letter-spacing: 3px; 
}
.logo {
	margin: 0 2vw 0 0;
	float: left;
}
.rightwriting {
	margin: 0 2vw 0 0;
}
.contact {
	white-space: nowrap;
	display: inline-block;
	padding: 0 0 0 30px;
	font-size: 18px;
}
.contact a{
	text-decoration: none;
	color: #999;
}
 .contact a:hover{
	color: #333;
	text-decoration: underline;
} 
	
	
.ch{
	text-transform:lowercase;
	font-size: 32px;
	font-family: "Century Gothic", Open Sans, Arial, Helvetica, sans-serif;
	letter-spacing: 5px; 
}
/*
#country-house{
	background-image:url(images/country-house-1.jpg);
}
#play-area{
	background-image:url(images/play-area-1.jpg);
}
#dales{
	background-image:url(images/dales1.jpg);
}
#housing-estate{
	background-image:url(images/housing-estate-1.jpg);
}
#netherbeck{
	background-image:url(images/netherbeck-1.jpg);
}
#courtyard{
	background-image:url(images/courtyard-1.jpg);
}
#park{
	background-image:url(images/park-1.jpg);
}
#moderngarden{
	background-image:url(images/moderngarden-1.jpg);
}
#paving{
	background-image:url(images/paving-1.jpg);
}
#community-park{
	background-image:url(images/community-park-1.jpg);
}
#outside-dining{
	background-image:url(images/outside-dining-1.jpg);
}
*/
#footer {
	background-color: #f4fcf2;
	color: #333;

	font-size: 16px;
	padding: 60px 5vw;
	text-align:left;
	line-height: 180%; 
}
#footer a{
	text-decoration: none;
	color: #333;
}
#footer a:hover{
	color: #000;
	text-decoration: underline;
} 
.titletext{
	color: #fff;
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
	font-size: 30px;
	padding: 15px 30px 15px 30px;
/*	text-shadow: 2px 2px #000; */
	background-color: rgba(0,0,0,0.4); 
	margin-top: 2rem;
	
}
.pictures{
	flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items:  center;
	padding: 10px;
	overflow:hidden;
	max-width: 1400px;
	margin: auto;

}
.pictures img{
	border-radius: 5px;
	margin: 10px;
	/* box-shadow: 3px 3px 10px 2px rgba(0,0,0,0.75); */
	height: 300px;
}

	.parallax-image-wrapper {
		position:fixed;
		left:0;
		width:100%;
		overflow:hidden;
	}

	.parallax-image-wrapper-50 {
		height:50%;
		top:-50%;
	}

	.parallax-image-wrapper-100 {
		height:100%;
		top:-100%;
	}

	.parallax-image {
		display:none;
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
	}

	.parallax-image-50 {
		height:200%;
		top:-50%;
	}

	.parallax-image-100 {
		height:100%;
		top:0;
	}

	.parallax-image.skrollable-between {
		display:block;
	}

	.no-skrollr .parallax-image-wrapper {
		display:none !important;
	}

	#skrollr-body {
		height:100%;
		overflow:visible;
		position:relative;
	}

	.gap {
		background:transparent center no-repeat;
		background-size:cover;

	}

	.skrollr .gap {
		background:transparent !important;
	}

	.gap-50 {
		height:50%;
	}

	.gap-100 {
		height:100%;
	}

	.header, .content {
		background:#fff;
		padding:1em;

		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}

	.content-full {
		height:100%;
	}

	#done {
		height:100%;
	}


.bw{
	height: 500px;
	max-height: 80vh;
	margin: auto;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;


}
.bw a{
	display: block;
	height: 100%;
	width: 100%; 
}
.bigheader{
	font-size: 60px;
	color: #fff;
	line-height: 60px;
	margin: auto !important;

	transition: 1s;
	text-shadow: 3px 3px rgba(0,0,0,0.8);
	max-width: 950px;

}
.bigheader a{
	color: #fff;
	text-decoration: none;
}
.bigheader div {
	padding: 50px 10px 10px 10px;
}
.bullettext {
	max-width: 700px;
	color: #fff; 
	font-size: 15px; 
	margin: 50px auto 0 auto;
	line-height: 170%; 
	position: absolute;
	bottom: 0; 
	left	: 0;
	width: 100%; 
	background-color: rgba(0,0,0,0.6);

}
.bullettext div{

	padding: 20px;
	text-align: right;
}
.bullettext a {
	color: #fff;
	text-decoration: none;
}
.bullettext a:hover {
	color: #ccc;
	text-decoration: underline;
}

#maintext{
	padding: 20px 7vw;
	font-size: 16px;
	color: #333;
	line-height: 180%; 
	margin:auto;
	background-color: #fff;
	max-width: 1200px;
}
#maintext a{
	color: #333;
	text-decoration: none; 
}
#maintext a:hover{
	color: #000;
	text-decoration: underline; 
}
#maintext ul, #maintext ol{
	margin: 20px 5vw;
} 
#maintext img {
	float: right;
	margin: 0 0 10px 30px;
	border-radius: 5px;
}

.iw {
	font-size: 10px;
	padding: 4px 100px;
	text-align: right;
} 
.iw a{
	color: #999;
	text-decoration: none;
}
.page{
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment:fixed;
	height: 100vh
}
.chris{
	background-repeat: no-repeat;
	background-size: 500px;
	background-image: url('/images/chris.jpg');
	background-position: right bottom; 
	padding-right: 350px !important; 
	min-height: 500px; 
}
/* .threecols{
	column-count: 2;
}
.threecols li{
	white-space: nowrap;
} */

/* Back to top button */

#back-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 30;
    opacity: 0.7;
    filter: alpha(opacity=70);
}
#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
    opacity: 1;
    filter: alpha(opacity=100);
}
/* arrow icon (span tag) */
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(images/up-arrow.png) no-repeat center center;
	border-radius: 15px;
	transition: 1s;
    opacity: 1;
    filter: alpha(opacity=100);
}
#back-top a:hover span {
	background-color: #777;
    opacity: 1;
    filter: alpha(opacity=100);
}
.titles{
	padding: 0 3rem; 
}
.titles p{
	line-height: 1.6;
	color: var(--text); 
	font-size: 0.9rem;
	max-width: 800px;
	text-align: center;
	margin-inline: auto ;
}
.titles h2{
	font-weight: 400;
	text-transform: uppercase; 
	color: var(--green); 
	letter-spacing: 0.25rem;
	font-size: 1.5rem;
	line-height: 1;
	max-width: 800px;
	text-align: center;
	margin-inline: auto ;
}
.projects{
	padding: 3rem; 
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem; 
}
.projects h3{
	text-transform: uppercase; 
	color: var(--green); 
	letter-spacing: 0.25rem;
	font-size: 1rem;
}
.projects > div{
	display: grid;
	gap: 1rem; 
	justify-content: center;
	text-align: center;
}
.projects > div > div:has(img) {
	aspect-ratio: 1.58;
}
.projects img{
	object-fit: cover;
	height: 100%;
	width: 100%;
	display: block;

}
.profilepic{
	display: block;
	margin: auto;
}
.back{
	text-align: right;
}



@media only screen and ( max-height: 800px ) 
		
{
.pictures img{
	max-height: 40vh; 
}

}
@media only screen and ( max-width: 800px ) 
		
{
.chris{
	background-repeat: no-repeat;
	background-size: 300px;
	background-image: url('/images/chris.jpg');
	background-position: right bottom; 
	padding-right: 7vw !important; 
	min-height: 300px; 
	padding-bottom: 300px !important;
}



}
/*
@media only screen and ( max-width: 1280px ) 
		
{
.pictures img{
	max-height: 27vh; 
}

}
*/


@media only screen and (min-width: 800px) {
	.wrapper{
		max-width: 1200px;
		margin: auto;
	}
	
	.container{
		display: grid;
		grid-template-columns: 1fr 1fr;
		position: relative;
		width: revert;
		margin: auto;
	}

	.left:has(.newlogo){
		/* position: sticky;
		top: 0; 
		height: min-content;  */
		display: grid;
		align-items: center;
	}
	.left.long{
		 position: sticky;
		top: 0; 
		height: min-content; 
	} 
	.left > div{
		padding: 3rem;
	}
	/* .right{
		padding: 3rem;
	} */
	#maintext{
		padding: 2rem;
	}
	.pictures{
		display: grid;
		padding: 0; 
		gap: 1rem; 
	}
	.pictures img{
		/* width: 100%;  */
		height: auto;
		display: block;
		border-radius: 0;
		margin: 0 auto;
	}
	.left.long .newlogo{
		margin-top: 9rem; 
	}
	.wrapper{
		padding-block: 2rem; 
	}
	.fws2{
		width: 600px;
		max-width: 45vw;
	}
}

@media only screen and ( min-width: 1200px ) and ( min-height: 600px ) {
	body{
		display: grid;
		justify-content: center;
	}

}

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

{
.parallax-image-50, .gap-100, .gap-50, 	.parallax-image-100{
	height:auto;

	}
.gap gap-100, #country-house, #play-area, #dales, #courtyard, #netherbeck, #park, #moderngarden, #paving, #community-park, #outside-dining 
{
	background-image: none !important;
} 


.pictures{
	max-height: none;
	text-align: center;
	}

.pictures img{
	height: auto;
	max-width: 80vw;
	max-height: 80vh;

}
.parallax-image-wrapper {
	display: none;
}

.page {
	background-attachment: scroll;
}
.threecols{
	column-count: 1;
}
.threecols li{
	white-space: wrap;
}
	


#back-top span {
	width: 60px;
	height: 60px;
	background-size: cover;
}

#back-top a {
	width: 60px;
}
.projects{
	padding: 1rem 0; 
	grid-template-columns: 1fr;
}
.titles{
	padding: 0 1rem
}
	}



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


.logo {
	float: none;

}
.rightwriting {
	float: none;

}
}

@media only screen and ( max-width: 500px ) 
{
.pictures{
	display: block !important;	

}
.pictures img{
	height: auto;
	width: 80vw;	
}
a[href^="mailto:"],
h1,
h2,
h3
{
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.newlogo h1{
	font-size: 2.5rem;
	letter-spacing: normal;
}
.newlogo h2{
	font-size: 1.5rem;
	letter-spacing: normal;
}
}