@font-face {
    font-family: 'strangenewesmedium';
    src: url('strangenewes-webfont.woff2') format('woff2'),
         url('strangenewes-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
      	scrollbar-color:#f1e1ba #0f2807;

}
html {
	font-size: 14px;
  width:100%;
  height: 100%;
}

body {
  width:100%;
  height:100%;
  font-size:100%;
  max-height: 100vh;
  max-width: 100vw;
  font-family: 'IM Fell DW Pica', serif;
	overflow-x:hidden;
	overflow-y:scroll;
	background-color: #0f2807;

}

a {
color:#f1e1ba;
}

a:hover {
	color:#b81e1e;
}

.rightsidemaster {

}

/*DESKTOP*/

/*---------------------------------------*/

/*Left Side*/

.leftsideslid {
width:30vw;
height:100vh;
max-width:30vw;
max-height:100vh;
float:left;
background-color:#0f2807;
position:relative;
z-index:1;
transition: margin-left .50s;
}

#headercontainer {
	background-color:#f1e1ba;
	width:100%;
	height:max-content;
}

#leftbackground {
-webkit-mask-image: url(img/paper.svg);
mask-image: url(img/paper.svg);
width: 100%;
height: 100%;
-webkit-mask-size: 100%;
mask-size: 100%;
position:relative;
-webkit-mask-image:url(img/paper.svg);
mask-image:url('img/paper.svg');
}

#leftbackgroundtop {
-webkit-mask-image: url(img/paper.svg);
mask-image: url(img/paper.svg);
width: 100%;
height: 100%;
-webkit-mask-size: 100%;
mask-size: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
-webkit-mask-image:url(img/paper.svg);
mask-image:url('img/paper.svg');
}

.leftcontainerslid {
position:absolute;
height: 90%;
width: 30vw;
max-height: 100%;
max-width: 30vw;
top: 0;
left: 0;
opacity:1;
transition: opacity .80s;
overflow:auto;
}


.leftcontainerslid::-webkit-scrollbar-track {}
.leftcontainerslid::-moz-scrollbar-track {}
.leftcontainerslid::scrollbar-track {}

.leftcontainerslid::-webkit-scrollbar {
	width:0%;
}

.leftcontainerslid::scrollbar {
	width:0%;
}

.leftcontainerslid::-moz-scrollbar {
	width:0%;
}

#projectkey {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #f1e1ba;
font-style: italic;
font-size: 1.3rem;
margin-bottom:1%;
}

#projcircle {
color: #b81e1e;
background-color: #b81e1e;
border-radius: 50%;
border: 3px solid #f1e1ba;
display: inline-block;
height: 2rem;
width: 2rem;
}


.leftcontainerslid::-webkit-scrollbar-thumb {	height: 10%;
	background-color: #f1e1ba;
	margin-right: 1%}
.leftcontainerslid::-moz-scrollbar-thumb {
	height: 10%;
	background-color: #f1e1ba;
	margin-right: 1%
}
.leftcontainerslid::scrollbar-thumb {
	height: 10%;
	background-color: #f1e1ba;
	margin-right: 1%
}

.leftcontainerslid::scrollbar-button {height:0%;}
.leftcontainerslid::-webkit-scrollbar-button {height:0%;}
.leftcontainerslid::-moz-scrollbar-button {height:0%;}

#mainlogo {
	width: 12vw;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5%;
	display:block;
	margin-bottom:6%;
}

red {
color:#b81e1e;
font-size:1.5rem;
}

.projectlist {
margin-bottom:2%;
padding:1%;
border-left:3px double #b81e1e;
}

.projectlist p {
font-style: italic;
font-size:1rem;
}

#leftpara {
	text-align: justify;
	width: 50%;
	height: max-content;
	max-height: max-content;
font-size: 1.6em;
color: black;
background-color: #f1e1ba;
padding: 4%;
border:5px double black;
font-style:italic;
}

#leftpara p {
	margin-bottom:4%;
}

#locations {
	text-align:center;
	width:100%;
	color:black;
	font-size:2rem;
	font-style:normal;
	margin-top:2%;
	margin-bottom:2%;
	font-family:'strangenewesmedium', serif;
}

#locations span {
	margin-left:2%;
	margin-right:2%;
}

ul {
	margin-top: 3%;
margin-bottom: 3%;
width: 92%;
margin-left: auto;
margin-right: auto;
}


#leftcontactsmob {
	display:none;
}

#contact {
	height: max-content;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
	    justify-content: space-evenly;
	    align-items: flex-start;
	    margin-top: 3%;
	    width: 100%;
	    margin-left: auto;
	    margin-right: auto;
}

#contactleft {
    position: fixed;
    top: 25%;
    left: 2%;
    width: 10vw;
  text-align:center;
}

#assoc {
width: 100%;
margin-top:5%;
}

#assocgrid {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
flex-flow: row;
flex-wrap: wrap;
}

#leftpara a {
	color:#b81e1e;
}

.associtem {
width:28%;
margin-left:2.5%;
margin-right:2.5%;
color: #f1e1ba;
margin-bottom:3.5%;
}

.associtem a {
text-decoration:none;
}

.associtem a:hover {
text-decoration:none;
color: #b81e1e;
}

.ai_main {
display:block;
width:100%;
text-align:center;
font-size:1.6rem;
}

.ai_second {
display:block;
width:100%;
text-align:center;
font-size:1.3rem;
}

.contactitemleft {
width: 75%;
margin-left: auto;
margin-right: auto;
font-size: 1.4rem;
font-style: italic;
color: black;
background-color: #f1e1ba;
padding: 3%;
margin-bottom: 8%;
margin-top: 10%;
border: 3px double black;
cursor: pointer;
}

.contacttextleft {
color:black;
}

.contacttextleft:hover {
color:black;
text-decoration:none;
}

.contactitemleft a{
width: 100%;
height: 100%;
display: block;
}

.contactitemleft a:hover {
color:black;
text-decoration:none;
}

.rslleft {
	width: 10vw;
	position: fixed;
	left: 2%;
	top: 1%;
	margin-top: 1%;
}

.contacttop a {
	color:#f1e1ba;
	text-decoration:none;
}


.contacttop a:visited {
	color:#f1e1ba;
	text-decoration:none;
}


.contacttop a:hover {
		color:#b81e1e;
		text-decoration:none;
	}




.contactitem {
	align-self: center;
	    width: 11%;
	    margin-bottom: 4%;
			position:relative;
}

.contactitem:hover {
		color:#b81e1e;
}


.contactitem img {
	width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.contacttext:hover {
	color:#b81e1e;
}

.contacttext {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
font-style: italic;
position: absolute;
text-align: center;
bottom: 5%;
font-size: 1.4rem;
pointer-events: none;
height: 100%;
}

#lineleft {
	margin-left: auto;
	margin-right: auto;
	width: 86%;
	display: block;
	margin-top: 5%;
	height: 7px;
	margin-bottom: 4%;
}

.pushfingerslid {
position: absolute;
right: 2%;
top: 2%;
opacity: 0.9;
width: 7%;
transform: scaleX(-1) rotate(8deg);
-webkit-transform: scaleX(-1) rotate(8deg);
-moz-transform: scaleX(-1) rotate(8deg);
z-index: 9999;
transition: transform .90s;
cursor:pointer;
}

.pushfingermob {
	display:none;
}

#leftbottom {
	width: 100%;
height: max-content;
margin-top:6%;
}

.tagbox {
margin-bottom: 1%;
background-color:#f1e1ba;
border:double 3px black;
font-size: 1.4rem;
  color: black;
margin-left: auto;
margin-right: auto;
width: 90%;
text-align: center;
padding:1.5%;
}

.tags {
  white-space:nowrap;
}

.tagbox span {
font-size:1.3vw;
}

#filternotification {
color:
#f1e1ba;
font-size: 3rem;
width: 100%;
margin-bottom: 4%;
opacity: 0;
transition: opacity 0.3s;
cursor: pointer;
text-align: center;
position:relative;
}

#filternotification2 {
color:
#f1e1ba;
padding:0.3%;
border:3px double #f1e1ba;
font-size:1.5rem;
margin-bottom: 2%;
opacity: 0;
transition: opacity 0.3s;
cursor: pointer;
text-align: center;
width:max-content;
display:block;
margin-right:2%;
margin-left:auto;
margin-right:auto;
text-decoration:none !important;
width:5%;
height:6%;
}

#filternotification2:hover {
  color:#b81e1e;
  border:3px double #b81e1e;
}

d#filternotification span {
  color:#b81e1e;
  cursor:pointer;
  margin-right:1%;
}

.tagbox span:hover {
  color:#b81e1e;
  text-decoration:underline;
  cursor:pointer;
}

#leftbottomleft {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	height: 100%;
	padding-left: 14%;
	padding-right: 14%;
	padding-top:4%;
	position: relative;
}

#lbltitle {
text-align: center;
font-size: 3rem;
text-decoration: underline;
color: #f1e1ba;
width: 100%;
margin-bottom: 4%;
font-style: italic;
font-family:'strangenewesmedium', serif;
display:block;
}

.hidden {
	opacity:0;
	display:none;
}

#partnerstext {
	margin-bottom: 3%;
	    font-style: italic;
	    color: #b81e1e;
	    font-size: 1.2em;
	    text-align: center;
	    width: 100%;
}

#partnerlinks {
	width: 100%;
		display:flex;
	flex-direction: row;
	flex-wrap: wrap;
justify-content: center;
}

#leftbottomleft a {
	width: 10%;
	    align-self: flex-start;
	    opacity: 1;
	    margin-right: 4%;
	    display: block;
			margin-bottom:4%;
}

#leftbottomleft a img {
	width:100%;
	    display: block;
}

#leftbottomright {
	float: right;
	text-align: right;
	width: 50%;
	padding-right: 7%;
	font-size:1vw;
	font-style:italic;
	color:#b81e1e;
	display:none;
}

#leftbottomright a {
	color:#b81e1e;
}


#leftbottomright a:visited {
	color:#b81e1e;
}

#leftbottomright a:hover {
	color:#b81e1e;
}

#downarrow {
	width: 100%;
	    height: 7%;
	    position: absolute;
	    left: 0;
	    bottom: 0%;
		}

#downarrowcontainer {
	margin-left: auto;
	margin-right: auto;
	width: 10%;
	padding-top: 3%;
	border-top: 3px double #b81e1e;
}

#downarrowimg {
	transform: rotate(100deg);
	width: 64%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.visible {
	animation-name: fadein;
	animation-duration: 0.3s;
	opacity: 1;
}
.invisible {
	animation-name: fadeout;
	animation-duration: 0.3s;
	opacity: 0;
	pointer-events: none;
}
@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* ------------------------------------ */

/*Right Side*/

#rightsidecontainer {
	width: 100%;
	height: max-content;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.rightsidetop {
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	color: #f1e1ba;
  text-align:center;
	font-style:italic;
	height:max-content;
	margin-top:4%;
	margin-bottom:4%;
}

#line1 {
	display:block;
	font-size:5.5rem;
	font-family:'strangenewesmedium', 'Georgia', serif;
}

#line2 {
	display:block;
	font-size:2.5rem;
}

.sectionlink {
	color:#f1e1ba;
}

.contactitem {
color:#f1e1ba;
}

.contactitem:hover {
	color:#b81e1e;
}

.sectionlink:hover {
	color:#b81e1e;
	cursor:pointer;
}

.lineright {
width: 92%;
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: 3%;
margin-top:0%;
height: 6px;
}

#rightsideprojects {
width: 100%;
max-width: 100%;
height: max-content;
display:flex;
flex-direction:row;
flex-wrap: wrap;
justify-content:center;
align-items:center;
align-content:center;

box-sizing: border-box;
margin: 0;
padding: 0;
}

.project {
	height: max-content;
	    width: 26%;
	    margin-left: auto;
	    margin-right: auto;
	    padding-bottom: 1em;
	    margin-bottom: 3%;
      position:relative;
      transition:opacity 0.3s;
}

.pointingtrue {
pointer-events: all;
}

.pointingfalse {
  pointer-events: none;
}

.tagselected {
  color:#b81e1e;
  text-decoration:underline;
}

.filteredin {
  opacity:1
}

.filteredout {
  opacity:0;
}

.projback {
display: block;
margin-left: auto;
margin-right: auto;
background-color: #f1e1ba;
transition:opacity 0.8s;
-webkit-transition:opacity 0.8s;
padding-bottom:3%;
}



.unclicked {
position: fixed;
top: 10%;
left: 5%;
width:90%;
height:80vh;
opacity: 0;
border: 7px double black;
z-index:5;
pointer-events: none;
}

.clicked {
position: fixed;
top: 10%;
left: 5%;
width: 90%;
height: 80vh;
max-height:670px;
opacity: 1;
border: 7px double black;
z-index:5;
pointer-events: all;
}

.detailswrapper {
  position: absolute;
left: 0%;
bottom: 0%;
width: 100%;
  overflow: hidden;
    white-space: nowrap;
    text-align:center;
}

.roundprojpic {
width: 15rem;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
border: 6px solid #f1e1ba;
height: 15rem;
cursor:pointer;
transition: border 0.5s, width 0.5s, height 0.5s;
-webkit-transition: border 0.5s,  width 0.5s, height 0.5s;
transition-timing-function: ease-in-out;
}

.detailshover {
  position: absolute;
width: 100%;
height: 6rem;
background-color: #f1e1ba;
border: 4px double black;
left: 0%;
box-shadow: 2px 2px black;
transition:top 0.4s, opacity 0.4s;
-webkit-transition:top 0.4s, opacity 0.4s;
transition-timing-function: ease-in-out;
pointer-events:none;
}

.dhshow {
  top:5.5rem;
  opacity:1;
}

.dhhidden {
top:8.5rem;
opacity:0;
}

.roundprojpic:hover {
border: 14px solid #f1e1ba;
width:17rem;
height:17rem;
}

.projecttitle {
font-size: 1.8rem;
font-style: italic;
color: black;
width: 100%;
text-align:center;
font-family:'strangenewesmedium', 'Georgia',serif;
}

.projectdesc a {
	color:#b81e1e;
	text-decoration:underline;
}

.projectdesc a:visited {
	color:#b81e1e;
	text-decoration:underline;
}

.projectdesc a:hover {
	color:#b81e1e;
	text-decoration:underline;
}

.projectdesc p {
	margin-bottom:3%;
}

.projectdesc p:last-child {
	margin-bottom:0%;
}

ul a {
	text-decoration:underline;
	color:#f1e1ba;
}

ul a:visited {
	text-decoration:underline;
	color:#f1e1ba;
}

ul a:hover {
	text-decoration:underline;
	color:#b81e1e;
}

.projecttitle a {
	text-decoration:underline;
	color: black;
}

.projectyear {
font-style: italic;
font-size: 0.8rem;
color: black;
width: 100%;
clear: left;
font-family: 'Radley', serif;
text-align: center;
}

.projectleadpicture {
	width: 100%;
	display: block;
	clear: both;
	margin-top: 2%;
	margin-bottom: 1%;
    position: relative;
}

.projecttags {
font-style: italic;
padding-bottom: 1%;
color: black;
}


.imgcap {
	writing-mode: tb-rl;
	position: absolute;
	bottom: 0;
	right: -2.2%;
	font-size: 0.7vw;
	color: #f1e1ba;
	width:max-content;
}

.many {
	display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
align-items: center;
text-align: center;
}

.single img {
width:100%;
}

.many img {
	width: 33%;
	height: 100%;
	align-self: center;
	margin-left: auto;
	margin-right: auto;
}

.infoplace {
color: black;
display: block;
text-align: center;
font-style: italic;
height: max-content;
width: 100%;
position: relative;
font-family: 'Radley', serif;
font-size: 0.8rem;
}

.infoplace a {
		color: black;
}

.infoplace a:hover {
	color:#b81e1e;
}

.infoplace a:visited {
		text-decoration:none;
}

.infoplace .hidden {
	opacity:0;
}

.infoplace a img {
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

.infoplace a .text {
	width: 100%;
	text-align: left;
	font-size: 1.2em;
}

.text {
	width: 100%;
	text-align: left;
	font-size: 1.2em;
}

.infotags {    font-style: italic;
    color: #f1e1ba;
    text-align: left;
    display: block;
    border-bottom: 1px solid #f1e1ba;
    padding-bottom: 2%;
    padding-top: 1%;
}

.projectdesc {
    width: 65%;
    clear: both;
    padding-top: 1%;
    padding-right: 0%;
    color: black;
    font-size: 1.1vw;
    font-family: 'Radley', serif;
    padding-left: 6%;
    height: 100%;
overflow-y: scroll;
overflow-x:hidden;
padding-right:3%;
padding-bottom:3%;
}

.closeproject {
  width: 3%;
position: absolute;
left: 1%;
top: 2%;
-webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  cursor:pointer;
}

.closeproject:hover {
  animation-name:cphover;
  animation-duration:0.6s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

.innerline {
  margin-top: 1%;
margin-bottom: 2%;
width: 50%;
height: 7px;
}

.projecttags {
  font-style: italic;
padding-bottom: 3%;
color: #b81e1e;
position: relative;
padding-left: 8%;
word-break: keep-all;
pointer-events: none;
}

.projectlink {
  position: relative;
padding-left: 8%;
padding-bottom:3%;
}

.projectlocation {
  position: relative;
padding-left: 8%;
padding-bottom:3%;
}

.projstopper {
  width: 5%;
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
position:absolute;
top:9%;
left:2%;
}

.projectinnertitle {

    font-style:italic;
}

.projbigpic {
  background-image: url('img/miab_proj.png');
width: 32%;
height: 78.3vh;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
right: 0%;
top: 0%;
border-left: 4px double black;
max-height:656px;
}

.projectinnertitle h1 {
    font-family:'strangenewesmedium', serif;
}

.projectinnertitle h2 {
  font-size:1.5rem;
font-family: 'IM Fell DW Pica', serif;
}

.projectinnertitle h3 {
  font-size:1.5rem;
font-family: 'IM Fell DW Pica', serif;
}

@keyframes cphover {

0% {
left:1%;
}

50% {
left:0.5%;
}

100% {
left:1%;
}

}

.closeproject img {
  width:100%;
}

#projectsendspacer {
	width: 100%;
height: 71px;
}

#copyright {
border-top: 4px double #f1e1ba;
text-align: center;
width: 24%;
padding-top: 1%;
color: #f1e1ba;
margin-top: 6%;
margin-left: auto;
margin-right: auto;
}

#copyright #fire {
  font-size:3rem;
  display:block;
}


.rightside {
background-color: #0f2807;
width: 68vw;
margin-left: auto;
margin-right: auto;
display: block;
}

#projectselectbackg {
position: fixed;
left: 0;
top: 0;
background-color: black;
width: 100%;
height: 100%;
z-index: 3;
opacity: 0;
transition:opacity 0.7s;
pointer-events: none;
}


.rightside::-webkit-scrollbar-track {}
.rightside::-moz-scrollbar-track {}
.rightside::scrollbar-track {}

.rightside::-webkit-scrollbar {
	width:0.5%;
}

.rightside::scrollbar {
	width:0.5%;
}

.rightside::-moz-scrollbar {
	width:0.5%;
}

.visible {
opacity:1;
transition:opacity 0.3s;
}

.invisible {
opacity:0;
transition:opacity 0.3s;
}

.rightside::-webkit-scrollbar-thumb {	height: 10%;
	background-color: #f1e1ba;
	margin-right: 1%}
.rightside::-moz-scrollbar-thumb {
	height: 10%;
	background-color: #f1e1ba;
	margin-right: 1%
}
.rightside::scrollbar-thumb {
	height: 10%;
	background-color: #f1e1ba;
	margin-right: 1%
}

.rightside::scrollbar-button {height:0%;}
.rightside::-webkit-scrollbar-button {height:0%;}
.rightside::-moz-scrollbar-button {height:0%;}

.pushfinger {
	position: absolute;
	right: 2%;
	top: 2%;
	opacity: 0.9;
	width: 7%;
	transform: scaleX(1) rotate(8deg);
	-moz-transform: scaleX(1) rotate(8deg);
	-webkit-transform: scaleX(1) rotate(8deg);
	z-index:9999;
	transition: transform .90s;
	cursor:pointer;
}

.rsl {
width: 11vw;
margin-top: 4%;
margin-left: auto;
margin-right: auto;
display: block;
}


.projectdesc::-webkit-scrollbar-track {}
.projectdesc::-moz-scrollbar-track {}
.projectdesc::scrollbar-track {}

.projectdesc::-webkit-scrollbar {
	width:0.5%;
}

.projectdesc::scrollbar {
	width:0.5%;
}

.projectdesc::-moz-scrollbar {
	width:0.5%;
}


.projectdesc::-webkit-scrollbar-thumb {	height: 10%;
	background-color: #b81e1e;
	margin-right: 1%}
.projectdesc::-moz-scrollbar-thumb {
	height: 10%;
	background-color: #b81e1e;
	margin-right: 1%
}
.projectdesc::scrollbar-thumb {
	height: 10%;
	background-color: #b81e1e;
	margin-right: 1%
}

.projectdesc::scrollbar-button {height:0%;}
.projectdesc::-webkit-scrollbar-button {height:0%;}
.projectdesc::-moz-scrollbar-button {height:0%;}

.projectdesc {
	scrollbar-color:#b81e1e #f1e1ba;
  scrollbar-width:thin;
}

.projecthints {
height:max-content;
width:26%;
height:max-content;
cursor:pointer;
margin-left:auto;
margin-right:auto;
padding-bottom:1em;
margin-bottom:3%;
position:relative;
transition: opacity 0.3s;
display:flex;
justify-content: center;
align-items: center;
padding-left:1em;
padding-right:1em;
}

.projecthints span {
  background-color: #b81e1e;
border-radius: 50%;
display:block;
color:#f1e1ba;
text-align: center;
font-size: 1.3rem;
width:15rem;
height:15rem;
display:flex;
justify-content:center;
align-items:center;
padding:3%;
transition: width 0.8s, height 0.8s;
border: 6px solid #f1e1ba;
cursor:default;
}

.projecthints:hover {
animation-name: shake;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

.projecthints:active {
animation-name: shake;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-iteration-count: 4;
}


@keyframes shake {
0% {
  padding-left:1em;
  padding-right:1em;
}

50% {
  padding-left:0.2em;
  padding-right:1em;
}

100% {
  padding-left:1em;
  padding-right:1em;
}
}

#locations {
  position:relative;
  width:50%;
}

#locationsmap {

  margin-left:auto;
  margin-right:auto;
  width:50%;
}

.pinpoint {
  color: #b81e1e;
  position:absolute;
}

#london {
  left:67%;
  bottom:29%;
}

#exeter {
    left:50%;
  bottom:22%;
}

#shipmap {
  position:absolute;
  bottom:44%;
  left:28%;
  width:14%;
}

#locationcaption {
  color:#f1e1ba;
  font-size:2rem;
  border: double 3px #f1e1ba;
  margin-left:auto;
  margin-right:auto;
  width:max-content;
  text-align:center;
  padding:1%;
  margin-top:4%;
  margin-bottom:4%;
  padding-left:3%;
  padding-right:3%;
}

#aboutstuff {
  display:flex;
  flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.nodisplay {
  display:none;
}

#testimonials {
	width: 100%;
margin-top: 5%;
}




@keyframes tonext {
	75% {
	  left: 0;
	}
	95% {
	  left: 100%;
	}
	98% {
	  left: 100%;
	}
	99% {
	  left: 0;
	}
  }
  
  @keyframes tostart {
	75% {
	  left: 0;
	}
	95% {
	  left: -300%;
	}
	98% {
	  left: -300%;
	}
	99% {
	  left: 0;
	}
  }
  
  @keyframes snap {
	96% {
	  scroll-snap-align: center;
	}
	97% {
	  scroll-snap-align: none;
	}
	99% {
	  scroll-snap-align: none;
	}
	100% {
	  scroll-snap-align: center;
	}
  }
  
  #testimonials {
	  scrollbar-color:rgba(1,1,1,0) rgba(1,1,1,0);
  }
  
  .carousel {
	box-sizing: border-box;
	scrollbar-color: transparent transparent; /* thumb and track color */
	scrollbar-width: 0px;
  }
  
  .carousel::-webkit-scrollbar {
	width: 0;
	display:none;
  }
  
  .carousel::-webkit-scrollbar-track {
	background: transparent;
  }
  
  .carousel::-webkit-scrollbar-thumb {
	background: transparent;
	border: none;
  }

  .carousel {
	position: relative;
	padding-top: 50%;
	filter: drop-shadow(0 0 10px #0003);
	perspective: 100px;
  }
  
  .carousel__viewport {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	overflow-x: hidden;
	counter-reset: item;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-color: rgba(1,1,1,0) rgba(1,1,1,0);
	list-style-type:none;

  }
  
  .carousel__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	counter-increment: item;
  }

  
  .carousel__slide:before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-40%,70px);
	color: #fff;
	font-size: 2em;
  }
  
  .carousel__snapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	scroll-snap-align: center;
  }
  
  @media (hover: hover) {
	.carousel__snapper {
		animation-name: none;
	}
  
	.carousel__slide:last-child .carousel__snapper {
		animation-name: none;
	}
  }

	.carousel__snapper {
	  animation-name: none;
	}
  
  
  .carousel:hover .carousel__snapper,
  .carousel:focus-within .carousel__snapper {
	animation-name: none;
  }
  
  .carousel__navigation {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
  }
  
  .carousel__navigation-list,
  .carousel__navigation-item {
	display: inline-block;
  }
  
  .carousel__navigation-button {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	background-color: #333;
	background-clip: content-box;
	border: 0.25rem solid transparent;
	border-radius: 50%;
	font-size: 0;
	transition: transform 0.1s;
  }
  
  .carousel::before,
  .carousel::after,
  .carousel__prev,
  .carousel__next {
	position: absolute;
	top: 0;
	margin-top: 25%;
	width: 4rem;
	height: 4rem;
	transform: translateY(-50%);
	outline: 0;
  }

  .carousel::before {
	background-image: url("img/witchhandpale_reverse.png");
  }

  .carousel::after {
	background-image: url("img/witchhandpale.png");
  }
  
  .carousel::before,
  .carousel__prev {
	left: -1rem;
  }
  
  .carousel::after,
  .carousel__next {
	right: -1rem;
  }
  
  .carousel::before,
  .carousel::after {
	content: '';
	z-index: 1;
	background-size: 4rem;
	background-repeat: no-repeat;
	background-position: center center;
	font-size: 5rem;
	line-height: 10rem;
	text-align: center;
	pointer-events: none;
  }
  
  .carousel::before {
	  margin-left:4%;
  }

  .carousel::after {
	  margin-right:4%;
  }

  .carousel__prev {
	  margin-left:4%;
  }

  .carousel__next {
	  margin-right:4%;
  }
  
  
  .carousel__snapper {
	  color:#f1e1ba;
	  font-size : 2.5vw;
	  text-align:center;
	  display:flex;
	  align-items:center;
	  justify-content:center;
	  align-content:center;
	  flex-direction:column;
	  flex-wrap:wrap;
  }

  .quote {
	  font-style:italic;
	  width:70%;
	  text-align:left;
line-height: 118%;
  }

  .quote::before {
	  content:"\201C  ";
	  color:#b81e1e;
	  font-size:3vw;
  }

  .quote::after {
	content:"  \201D";
	color:#b81e1e;
	font-size:3vw;
  }

.attributor {
	font-size:2.2vw;
	margin-top:2%;
	width:70%;
	text-align:right;
}

html{scroll-behavior:smooth;}


.quote {
	font-size:1.5vw;
}

.attributor {
	font-size:1.3vw;
}

.quote::before {
	font-size:1.8vw;
}

.quote::after {
	font-size:1.8vw;
}



/* ------------------------------------------------ */
/*RESPONSIVE */

@media only screen and (min-width:1600px) {
  .clicked {
    width:80%;
    height:64vh;
    top:18%;
    left:10%;
  }

  .unclicked {
top: 18%;
left: 10%;
width:80%;
height:64vh;
}

  .projectdesc {
    font-size:1vw;
  }

.projbigpic {
height:62.7vh;
}

}

@media only screen and (max-width:1600px) {
  #leftpara {
  font-size:1.4rem;
}
}

@media only screen and (max-width:1500px) {
  #leftpara {
  font-size:1.4rem;
}
}


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

	.quote {
		font-size:1.8vw;
	}
	
	.attributor {
		font-size:1.5vw;
	}
	
	.quote::before {
		font-size:2vw;
	}
	
	.quote::after {
		font-size:2vw;
	}
	}
	
	
	@media only screen and (max-width:1350px) {
	.quote {
		font-size:2.1vw;
	}
	
	.attributor {
		font-size:1.8vw;
	}
	
	.quote::before {
		font-size:2.4vw;
	}
	
	.quote::after {
		font-size:2.4vw;
	}
	
	}
	
	@media only screen and (max-width:1000px) {
	.quote {
		font-size:2.6vw;
	}
	
	.attributor {
		font-size:2.2vw;
	}
	
	.quote::before {
		font-size:3vw;
	}
	
	.quote::after {
		font-size:3vw;
	}
	
	}
	
	
	@media only screen and (max-width:750px) {
	.quote {
		font-size:3vw;
	}
	
	.attributor {
		font-size:2.8vw;
	}
	
	.quote::before {
		font-size:3.4vw;
	}
	
	.quote::after {
		font-size:3.4vw;
	}
	
	}

@media only screen and (max-width:1300px) {
#filternotification2 {
display: block;
position: unset;
margin-left: auto;
margin-right: auto;
margin-bottom: 2%;
text-decoration:none !important;
}

.tagbox span {
  font-size:1.35rem;
}
}

@media only screen and (max-width:1350px) {
.projectdesc {
  font-size:1.2rem;
}
.project {
    width:33%;
  }

  .projecthints {
    width:33%;
  }

}

@media only screen and (max-width:1350px) {
#aboutstuff {
  flex-direction: column;
}

#leftpara {
  width:100%;
}

#locations {
  padding-top:4%;
  width:60%;
}

}

@media only screen and (max-width:1100px) {
  .roundprojpic {
    width:13rem;
    height:13rem;
  }

  .roundprojpic:hover {
      width:15rem;
      height:15rem;
  }

  .projecthints span {
    width:13rem;
    height:13rem;
  }

  .projecthints span:hover {
      width:12.5rem;
height:12.5rem;
  }



}

@media only screen and (max-width:1150px) {
	#rightsidelogomasterleft {
		display:none;
	}

	#contactleft {
		display:none;
	}
}

@media only screen and (max-width:1135px) {
#rightsidecontainer {
  width:100%;
}

  #line1 {
    font-size:3.3rem;
  }
}

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

  #rightsidemaster {
    width:90vw;
  }

.rsl {
  width:26vw;
}

}

@media only screen and (max-width:950px) {
.projecthints {
width:33%;
}
}

@media only screen and (max-width:950px) {
  .projectdesc {
    font-size:1.1rem;
  }




}


@media only screen and (max-width:880px) {
  #leftbottomleft {
    padding-left:8%;
    padding-right:8%;
  }
}

@media only screen and (max-width:820px) {
.project {
  width:40%;
}

.projecthints {
  width:40%;
}
}

/*MOBILE SPECIFICALLY */
@media only screen and (max-width:760px) {

.rsl {
  width:50vw;
}


.tagbox span {
  font-size:1.2rem;
}

#filternotification2 {
  font-size:1.6rem;
}

#line1 {
  font-size:3.6rem;
}

.rightsidetop {
  width:100%;
}

.contactitem {
  width:25%;
  margin-left: 2%;
}

.project {
  width:80%;
}

.projecthints {
  width:80%;
}

  .roundprojpic {
    width:18rem;
    height:18rem;
  }

  .projecthints span {
    width:18rem;
    height:18rem;
  }

    .projecthints span:hover {
    width:17.5rem;
    height:17.5rem;
  }

  .roundprojpic:hover {
      width:20rem;
      height:20rem;
  }

  .dhshow {
  top:8rem;
  opacity:1;
}

.dhhidden {
top:15rem;
opacity:0;
}

#leftpara {
  width:95%;
}

#locations {
  font-size:1.5rem;
}

#locations {
  width:80%;
}


#copyright {
  width:50%;
}

#leftbottomleft {
    padding-left: 4%;
    padding-right: 4%;
}

.projbigpic {
  background-image: url('img/miab_proj.png');
width: 100%;
height: 40%;
background-repeat: no-repeat;
background-size: cover;
border-bottom: 4px double black;
position:relative;
right: none;
top: none;
border-left: none;
}

.projectdesc {
width: 100%;
clear: both;
padding-top: 1%;
padding-right: 0%;
color: black;
font-family: 'Radley', serif;
padding-left: 6%;
height: 60%;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 3%;
padding-bottom: 3%;
}

.projectinnertitle h2 {
  font-size:1.2rem;
}

.projectinnertitle h3 {
  font-size:1.2rem;
}

.closeproject {
  width: 9%;
position: absolute;
left: 1%;
top: 2%;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
cursor: pointer;
z-index: 5;
background-color: #f1e1ba;
padding: 1% 1% 1%;
border: 2px double black;
}

.tagbox {
    padding:3%;
}

.lineright {
  width:64%;
}

#leftbottomleft a {
  width:20% !important;
}
}

@media only screen and (max-width:630px) {
  .tagbox span {
    display:block;
  }

}