:root{
	--mainbg-light: #f8f8f8; /* Paper - Light*/
	--mainbg-dark: #efefef;
	--title-light: #373737; /* Charcoal */
	--title-dark: #272727;
	--type1-light: #c0b283; /* Pale Gold */
	--type1-dark: #998a68;
	--type2-light: #dcd0c0; /* Silk */
	--type2-dark: #b0a599;
	--type3-light: #f7e7e4;
	--type3-dark: #c9bbb9;
	--type4-light: #a6cbf5;
	--type4-dark: #86a7c4;
}

html,body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	box-sizing:border-box;
	}

html,body {
	height: 100vh;
	margin: 0;
	padding: 0;
	font-size:Calc(9px + 0.3vw);
	font-weight: normal;
	line-height:1.2;
	text-align: center;
	background: var(--mainbg-light);
}

* {
    box-sizing: border-box;
}

@keyframes ImageSequenceFadeInOut {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}
/* Max Height Image = 800, Max Width 1200*/
/* Images Should Not Have Symmetric Borders Due To Clipping */
#ImageSequence {
  position:relative;
  top: 13vh; /* 20vh; */
  left: 20vw;
  height:80vh;
  width:60vw;
  overflow: hidden;
}

/* to centre an image within parent div, use margin: auto;
 margin: auto; only operates on an axis that is specified
 by left right and/or top bottom */
#ImageSequence img {
/*Width & Positioning Trial & Error*/
  width: 147vw; /* 98vw; */
  height: auto;
  position:absolute;
  top: calc(30vh - 74vw);
  /*bottom: calc(30vh - 49vw);*/
  left: calc(30vw - 74vw);
  /*right: calc(30vw - 49vw);*/
  padding: 10vh 0 0 0; /* Added*/
}

#ImageSequence img {
  animation-name: ImageSequenceFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 32s;
}
#ImageSequence img:nth-of-type(1) {
  animation-delay: 24s;
}
#ImageSequence img:nth-of-type(2) {
  animation-delay: 16s;
}
#ImageSequence img:nth-of-type(3) {
  animation-delay: 8s;
}
#ImageSequence img:nth-of-type(4) {
  animation-delay: 0;
}

#BWELink {
	opacity:1;
	bottom: 3vh;
	right: 0;
	position:absolute;
	width:auto;/*300px;*/
	max-width: 50vw;
	min-height:30px;
	max-height: 10vh;
	padding:1vw 2vw 0 0;
	text-align: right;
}

#BWELink1{	
	font-size: 2.0vh;
	font-style: italic;
	text-decoration: none;
	color: var(--type2-light);
}

#BWELink1:visited {color: var(--type2-light);}

#BWELink2 {	
	font-size: 2.25vh;
	font-style: normal;
	text-decoration: none;
	color: var(--type2-dark);
}

#BWELink2:visited {color: var(--type2-dark);}

#HomeText1 {
	top:1vh;
	left: 1vw;
	width: 35vw;
	position:absolute;
	padding: 0 0 0 0;
	font-family: 'Segoe Script';
	font-size: 5vh;
	font-weight: bold;
}
#HomeText1 a { text-decoration: none; color: var(--title-light);}
#HomeText1 a:visited { text-decoration: none; color: var(--title-light)}

#HomeText2 {
	opacity:1;
	top: 2vh;
	left: 40vw;
	width: 32vw;
	position:absolute;
	padding: 0 0 0 0;
	font-size: 3vh;
	font-style: italic;
	font-weight: normal;
}
#HomeText2 a { text-decoration: none; color: var(--type4-dark);}
#HomeText2 a:visited { text-decoration: none; color: var(--type4-dark);}

.aboutpage, .workspage {padding-top: calc(62px + 3vh);}

.pagefooter{
	position: fixed;
	bottom: 1vh;
	width: 97vw;
	height: 5vh;
	background-color: var(--type4-light);
	
	color: var(--type4-dark);
	
	margin: 0 1vw;
}

.spacerdiv{
	width: 100vw;
	height: 6.5vh;
	min-height: 10px;
}

.titleimg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(60px + 3vh);
  display: block;
  padding: 0;
  margin-bottom: 1vh;
  background-color: var(--mainbg-light);
  z-index: 10;
  }
  
.titleimg a img{
	width: 80vw;
	max-width: 900px;
	max-height: calc(60px + 3vh);
}

.row {
    display: flex;
    flex-wrap: wrap;
	padding-top: 0vh;
	padding-left: 1.5vw;
}

.artist {
	/*width:90vw;*/
	margin-top: 0.75vh;
	/*color: var(--type4-dark);*/
}

/* Formats the Copyright Notice & Email Link */

.artist #mycopy {
	display: inline-block;
	position: absolute;
	left: 1vw;
	max-width: 20vw;
	width: 100%;
	font-size: calc(8px + 0.5vw);
	color: var(--type4-dark);
	text-align: left;
	overflow: visible;
}

.artist #mymail {
	display: inline-block;
	position: absolute;
	left: 30vw;
	max-width: 50vw;
	width: 100%;
	font-size: calc(12px + 0.5vw);
	color: var(--type4-dark);
	text-decoration: none;
	text-align: left;
}

.artist #mymail:hover {
	text-decoration: none;
	color: var(--mainbg-dark);
}

.homepage #mycopy{
	left: 1vw;
	bottom: 8vh
}

.homepage #mymail{
	left: 1vw;
	bottom: 3vh
}

.homepage #mymail:hover {
	text-decoration: none;
	color: var(--title-dark);
}

/*Back-To-Top Button*/
.artist #myBtn {
	display: inline-block;
	position: absolute;
	left: 85vw;
	max-width: 7vw;
	width: 100%;
	border-color: var(--type4-dark);
	background-color: var(--type4-light);
	margin-top: .25vh;
	padding: .25vh 0vw;
}

/* Format the Button*/
.artist #myBtn a{
	text-decoration: none;
	color: var(--type4-dark);
    font-size: calc(12px + 0.5vw);
	padding: 1vh 1vw;
}

/*On Hover Color Change*/
.artist #myBtn a:hover {
	color: var(--mainbg-dark);
}

/* Create four equal columns that sit next to each other */
.column {
    flex: 25%;
    max-width: 25%;
	padding-top: 1.5vw;
	padding-right: 1.5vw;
}

.column img {
    margin-top: 15px;
    vertical-align: middle;
}

/* Experimental 2020/02/13 */
.NewRow {
	flex-basis: 100%;
	height: 0;
}
/* Experimental 2020/02/13 */
.videostrip {
    flex: 100%;
    max-width: 100%;
    margin-top: 15px;
    vertical-align: middle;
	align-items: center;
	justify-content: center;
}

.videostrip video {
	max-width: 100%;
	height: auto;
}
/* Experimental 20200223 */
@keyframes animimagesFadeInOut {
 0% {
   opacity:1;
 }
 22% {
   opacity:1;
 }
 33% {
   opacity:0;
 }
 89% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}
/* Original */
.column a {display: inline; color: #99d; text-decoration: none; padding: 6px 0 0 0;}
.column a .mytitle1 { font-weight: bold;}
.column a .mytitle2 { font-size: 12px;}
.column a .mytitle3 { font-size: 12px;}
.column a:visited { text-decoration: none;color: #9999dd;}

/*Use Browser Intersection*/
.lazyload {
  opacity: 0;
  width: 100%;
/*height: 360px;*//*NOT NEEDED*/
  transition: opacity 0.5s ease;
/*vertical-align: middle;*//*NOT NEEDED*/
}
.lazyload.loaded {
  opacity: 1;
/*height: auto;*//*NOT NEEDED?*/
}

@media only screen and (min-width:1281px) and (max-height:1200px) {
	
#ImageSequence img {
/*Width & Positioning Trial & Error*/
  width: 98vw;
  height: auto;
  position:absolute;
  top: calc(30vh - 49vw);
  left: calc(30vw - 49vw);
  padding: 10vh 0 0 0; /* Added*/
}


.row
	{
		margin-left: calc((70vw - 100vh)/2);
		margin-right: calc((70vw - 100vh)/2);
	}
}


/* Responsive layout - two columns instead of four columns */
@media screen and (max-width: 860px) {
.aboutpage, .workspage {padding-top: calc(40px + 2vh);}

.titleimg { height: calc(40px + 2vh); text-align: left;/* max-width: 80vw;*/}

.titleimg a img{ width: 80vw; height: auto; max-height: calc(40px + 2vh);}

/*.row { padding: 0vw 0 0vw 3vw; }*/
.row {
	padding-left: 3vw;
}

.column { 
	flex: 50%;
	max-width: 50%;
	padding-right: 3vw;
}

}


/* Responsive layout - the two columns stack on top of each */
@media screen and (max-width: 600px) {
	
.titleimg { height: 40px; /*max-width: 250px;*/}

.titleimg a img{ height: 40px; max-width: 250px; }

/* padding both sides */
.row { padding: 0 3vw; }

.column {
	flex: 100%;
	max-width: 100%;
    }

.column {padding: 0;}
.column:first-child { padding-left: 0;}

/* Following could be used to stop Chocolat Lightbox operating but
	images highlight when clicked modification to jquery.chocolat.js is cleaner */
/*.column img { pointer-events: none;}*/

.artist #myBtn {max-width: 10vw;}

}