/*
Plugin: jQuery Parallax
Version 1.1.3
Author: Ian Lunn
Twitter: @IanLunn
Author URL: https://www.ianlunn.co.uk/
Plugin URL: https://www.ianlunn.co.uk/plugins/jquery-parallax/

License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to https://www.ianlunn.co.uk/.
*/

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

body{
	margin: 0;
	padding: 0;
	font-family:'Source Code Pro', Arial, Helvetica, sans-serif;
}
a {color:#ab380c;text-decoration:underline;}
p{
	margin: 0 0 40px 0;	
}

p, ul{
	font-family:'Source Code Pro', Arial, Helvetica, sans-serif;
	font-size-adjust:0.488;
	font-weight:500;
	font-style:normal;
}

.button {font-family:'Source Code Pro', Arial, Helvetica, sans-serif;}
img{
	border: 0;
}

h1, #pixels{
	font-family:'Source Code Pro', Arial, Helvetica, sans-serif;
	font-size-adjust:0.40;
	font-weight: 900;
	font-style: normal;
}

h2 {
	font-family:'Source Code Pro', Arial, Helvetica, sans-serif;
	font-size-adjust:0.531;
	font-weight:900;
	font-style:normal;
}
h3 {
	font-weight: 500;
	margin-bottom: 0.3em;
	letter-spacing: -2px;
}
ul {
	padding-left:20px;
}
ul li {
	margin-bottom:10px;
}
small {
	font-weight: 500;
	padding: 0.1em 0 0;
	display: inline-block;
	font-size: 0.6em;
	margin-bottom: -1.1em;
	transition:margin 0.3s ease;
}
#header h1, #pixels{
	color: #48941A;
}

.float-left {
	float: left;	
	margin: 0 0 0 20px;
}

.float-right{
	float: right;
	margin: 0 20px 0 0;
}

.wide{
	margin: 0;
}

.center{
	font-size: 2.5em;
	padding: 80px 0 0 0;
	text-align: center;
}

#nav{
	list-style: none;
	position: fixed;
	right: 20px;
	    z-index: 9999;
}

#nav li{
	margin: 0 0 15px 0;	
}

#header, #intro, #second{
	width: 100%;
}

body #intro {
	background:url(images/firstbg-v3.webp) 50% 0 no-repeat fixed;
	color: white;
	/*height: 600px;*/
	/*height:calc(calc(100vh - calc(100vh - 100%)) - 150px);*/
	height:calc(100vh - 150px);
	margin: 0;
	padding: 0;
	background-position: center;
	background-size: cover;
	position:relative;
}
body:not(.photos) #intro .story::after {
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width:100%;
	background-color:purple;
	content:" ";
	mix-blend-mode: color;
	opacity: 0.32;
}
body:not(.photos) #intro .story.one::after {background-color:purple;}
body:not(.photos) #intro .story.two::after {background-color:yellow;}
body:not(.photos) #intro .story.three::after {background-color:blue;}
body:not(.photos) #intro .story.four::after {background-color:green;}
body:not(.photos) #intro .story.five::after {background-color:red;}
body:not(.photos) #intro .story.six::after {background-color:transparent;}

#intro .intro-text-wrap {
	text-align: left;
	/*padding: 2.1em 5em;*/
	padding: 2.1em 0;
	margin-top:0;
	font-size: 1.3em;
	/*position: absolute;*/
	position:relative;
	width: 100%;
	bottom: 0;
	mix-blend-mode: hard-light;
	box-sizing:border-box;
	color: #fff;
	/*background-color: #710000e6;*/
	background-color:transparent;
}
#intro .intro-text {
	display: block;
	max-width: 100vw;
	margin: 0 auto;
	/*column-count: 2;*/
	text-align: center;
}
#intro .intro-text p {
	margin-bottom:0.4em;
	font-weight:900;
	letter-spacing: 0.5px;
	    text-shadow: 0px 3px 30px #0e0e0e;
}
#intro .intro-text p span {
	margin-left:-1.2em;
}
#second{
	/*background: url(images/secondBG.jpg) 50% 0 no-repeat fixed;*/
	background-color:#fff;
	color: black;
	height: 130px;
	margin: 0;
	overflow: hidden;
	padding: 0;
}
/*
#second .bg{
	background: url(images/trainers.png) 50% 0 no-repeat fixed;
	height: 1300px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 900px;
	z-index: 200;
	pointer-events: none;
}

#third{
	background: url(images/thirdBG.png) 50% 0 no-repeat fixed;
	color: black;
	height: auto;
	padding: 100px 0 0 0;	
	background-size:cover;
	background-position:center left;
	background-color: #d0d0d0;
	overflow: hidden;
}

#fifth{
	background: #ccc;
	height: 500px;
	margin: 0 auto;
	padding: 40px 0 0 0;
}
*/
.story {
	margin: 0 auto;
	overflow: hidden;
	max-width: 1100px;
}
body.photos .story {max-width: unset;overflow: unset;margin:0;}
body.photos #intro {background:none;}
body.photos .bgrid {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
#second .story {
	margin: 0 auto;
	overflow: hidden;
	max-width: unset;
}

.story .float-left, .story .float-right{
	padding: 100px 0 0 0;
	
	position: relative;
	width: 350px;	
}

.story .wide {
	padding: 100px 0 0 0;
	
	position: relative;
	width: 100%;	
}
#third .story {
	margin: 0 auto;
    margin: 0 20px 0 36vw;
    min-width: unset;
	width:unset;

    max-width: 960px;
}
.story .margin-left {
	padding: 100px 0;
	position: relative;
	width:auto;
	font-size: 1.6em;
	line-height: 1.3;
}
.story .margin-left strong {
	display:block;
}
.story .logo {
	padding:calc(40vh - 150px) 0 0 0;
	position: relative;
	max-width:100vw;
	width:40vw;
	margin: 0 auto;
	z-index: 999;
}

.bgrid {
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
	margin:25px auto 25px auto;
	justify-items: center;
	width: 100%;
	max-width: 770px;
}

a:focus,
button:focus {
	/* Provide a fallback style for browsers
	 that don't support :focus-visible */
	outline: none;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	/* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
}

a:focus-visible,
button:focus-visible {
	/* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
	outline: 2px solid #443ffc;
	outline-offset: 3px;
}

a:focus-visible {
	background: none;
}


.button {
	pointer-events: auto;
	cursor: pointer;
	background: #fff;
	border: none;
	padding: 1.5rem 3rem;
	margin: 0;
	font-size: 1em;
	position: relative;
	display: inline-block;
}

.button::before,
.button::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.buttonskoll {
	overflow: hidden;
	border-radius: 50%;
	color: #000;
	width: 80px;
	height: 80px;
	padding: 0;
	font-weight: 900;
}

.buttonskoll span {
	display: block;
	position: relative;
	width: 100%;
}

.buttonskoll > span {
	overflow: hidden;
	/*mix-blend-mode: difference;*/
	background-color: white;
	opacity:0;
	transition:opacity 0.5s ease;
	height:100%;
	
	align-items: center;
	display: flex;
	height: 100%;
}
/*
.buttonskoll:hover > span > span {
	animation: MoveUpInitial 0.2s forwards, MoveUpEnd 0.2s forwards 0.2s;
}

.buttonskoll::before {
	content: '';
	background: #000;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	border-radius: 50%;
	transform: translate3d(0,0,0);
	transition: transform 0.3s;
	transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}

.buttonskoll:hover > span {opacity:1;}
.buttonskoll:hover small {
	margin-bottom: 0;
}

.buttonskoll:hover::before {
	transform: translate3d(0,100%,0);
}

@keyframes MoveUpInitial {
	to {
		transform: translate3d(0,-105%,0);
	}
}

@keyframes MoveUpEnd {
	from {
		transform: translate3d(0,100%,0);
	}
	to {
		transform: translate3d(0,0,0);
	}
}
*/
.buttonskoll {
	background-repeat:no-repeat;
	background-position:center;
	background-size: 100% 100%;
	transition:filter 1s ease;
}
.bgrid a:hover > .buttonskoll, .bgrid a:focus > .buttonskoll, .bgrid a:active > .buttonskoll, 
.bgrid a.active > .buttonskoll, .bgrid a.active > .buttonskoll, .bgrid a.active > .buttonskoll {filter: invert(100%);transition:filter 0.25s ease;}

.apin .button {background-image:url(images/icon-pin.svg);}
.apin.home .button {background-image:url(images/icon-home.svg);}
.atel .button {background-image:url(images/icon-tel.svg);}
.aemail .button {background-image:url(images/icon-mail.svg);}
.acam .button {background-image:url(images/icon-cam.svg);}
.ainsta .button {background-image:url(images/icon-insta.svg);}
.afb .button {background-image:url(images/icon-fb.svg);}


@media screen and (max-width: 900px) {
	body #intro {height: calc(calc(100vh - calc(100vh - 100%)) - 80px);}
	#second {height:75px;}
	#third .story {margin: 0 20px;}
	#third {background-image: unset;}
	.story .margin-left {padding-top:0;}
	.story .logo { 
		top: calc(50% - 50px);
		top: calc(50% - 152px);
		position: absolute;
		width: 100%;
		padding: 0 1em;
		box-sizing: border-box;
	}
	.story .logo img { 
		padding:0 1em;
		margin:0 auto;
		display:block;
		max-width: 80%; 
	}
	.story .wide {padding: 10px 0 0 0;}
	.button {/*font-size: 0.45em;*/}
	.buttonskoll {
		width: 55px;
		height: 55px;
	}
	.buttonskoll span > small {display:none;}
	.bgrid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-gap: 0;
		padding: 0;
		box-sizing: border-box;
		margin: 10px auto;
		    max-width: 430px;
	}
	h2 {
		line-height: 1;
		font-size: 0.9em;
		letter-spacing: -1px;
	}
	h3 {
		font-weight: 500;
		margin-bottom: 0.3em;
		letter-spacing: -2px;
		font-size: 0.6em;
	}
	#intro {/*background-size: unset;*/}
	small {margin-bottom: 0;}
	.story .margin-left {font-size: 1.1em;}
	.story .margin-left h2 {
		font-size:1.5em;
		    margin: 1.3em 0;
	}
	#third {padding: 20px 0 0 0;}
	
	#intro .intro-text-wrap {
		padding: 1.5em 0;
		font-size: 0.9em;
	}
	#intro .intro-text {
		max-width:80%;
	}
	#intro .intro-text {
		column-count: 1;
	}
}


@media screen and (max-width: 500px) {
	body #intro {
		background:url(images/firstbg-v3-mob.webp) 50% 0 no-repeat fixed;
		background-position: center;
		background-size: cover;
		position:relative;
	}
	#intro .intro-text {
		max-width:100%;
	}
	.story .logo img {
		max-width:100%;
	}
}

@media screen and (max-height: 800px) {
	#intro .intro-text-wrap {
		font-size: 0.9em;
		padding: 1.5em 0;
		max-width:calc(100% - 2em);
		    margin: 0 auto;
	}
	.story .logo img {
		border: 0;
		width: 100%;
		margin: 0 auto;
		position: relative;
		display: block;
		max-width:80%;
		box-sizing: border-box;
	}

}

@media screen and (max-height: 400px) {
	.story .logo {top:2em!important;}
	body:not(.photos) #intro {height: 100vh!important;}
}