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

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&family=Diplomata+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&family=Courgette&family=Courier+Prime&family=Diplomata+SC&family=Eagle+Lake&display=swap');

@font-face {
	font-family: 'destroy';
	src: url(fonts/Destroy-gxa4.ttf) format('truetype');
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins',sans-serif;
}

body{
	/* background-color: #709FE6 */
	min-height: 1000px;
	overflow-x: hidden;
	background-color: #d0d0d0;

}

.toggle{
	position: fixed;
	z-index: 100000000;
	display: block;
}

h1{
	color: whitesmoke;
}

.indent{
	padding-left: 20px;
}

header{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	/* padding: 5vh 0 5vh 10vw; */
	z-index: 1000;
	transition: 0.6s;
	background: url(images/stone.jpg);
}
header::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.65);
}

.top{
	width: 100%;
	display: flex;
	flex-direction: row;
	padding: 0 2vw;
	justify-content: space-between;
}
.logo{
	display: flex;
}
.logo h1{
	font-size: 2.8vw;
	font-family: 'Courgette', cursive;
	color: black;
	font-weight: 400;
	/* letter-spacing: 1px; */
	position: relative;
	/* top:-3vh; */
	color: #fff;
	font-size: 5em;
	text-decoration: none;
	margin: 0;
	/* line-height: 5rem; */
	/* background-color: #3C80FF; */
}
.author{
	font-size: 1.25vw;
	font-family: 'Cormorant Garamond';
	/* line-height: 0; */
	position: relative;
	color: #fff;
	margin: 1vh 0 0 2vw;
	/* top:3vh; */
	/* background-color: #ff3c3c; */

}
.autnot{
	text-decoration: none;

}

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

.socialBlock{
	position: relative;
	pointer-events: all;
	opacity: 1;
	height: auto;
	width: 300px;
    /* top: 1vh; */
    /* right: 5vw; */
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* background-color: blueviolet; */
}
 .topsoc{
	right: 5vw;
}


.cobble{
	font-family: 'destroy', serif;
	/* font-weight: 600; */
	/* color: #ffffff; */
	font-size: 2rem;
}
#navText{
	position: relative;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
#navText ul{
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	list-style: none;
}
header ul li{
	position: relative;
	list-style: none;
	padding: 0 2%  10px 0;
	
}
header ul li a{
	/* font-style: timesnewroman; */
	font-family: 'Cormorant Garamond', serif;
	position: relative;
	margin: 0 15px;
	text-decoration: none;
	color: #fff;
	letter-spacing: 1px;
	font-weight: 300;
	font-size: 3.5vh;
	transition: 0.6s;
}

.map{	background: #d0d0d0;
	position: relative;
	background-image: url(images/Road.jpg);
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: right;
	align-items: center;
}

.Arch{
	position: relative;
	width: 100vw;
	height: 100%;
	top: 0;
	background: #d0d0d0;
	display: flex;
	justify-content: center;
	align-items: center;
	/* margin: 2em 5em; */
	padding: 2em 5em;
}
.Arch h1{
	font-family: 'Diplomata SC', cursive;
	font-size: 5vw;
	color: rgb(26, 26, 26);
}


.imgBx{
	position: relative;
	background-position: center;
	right: 0;
	transform: translateY(-30%);
	display: flex;
	flex-direction: column;
	/* background-color: rebeccapurple; */
}
.imgBx img{
	width: 10vw;
	transition: .5s;	
}
.imgBx img:hover{

	transform: scale(1.1);
	filter: grayscale(100%);
}

/* ....................... Forward ie Book  ................... */

.forward{
	position: relative;
	display: flex;
	flex-direction: row;
	/* align-items: center;
	justify-content: center; */
	height: 111vh;
	width: 100vw;
	/* background-image: url(images/Prophet-bg.png); */
		/* background-size:contain;
	background-repeat: no-repeat;
	background-position: center; */
}


.reader{

	width: 40%;
	height: auto;
}
.readerInset{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	width: 40%;
	height: auto;
	/* background-color: rgba(240, 248, 255, 0.39); */
}
.review{
	padding: 15% 15%;
	text-align: center;
	font-family: 'Cormorant Garamond';
	font-size: 2.5vh;
	  font-weight: bold;
}
 .talign{
	text-align: left
}

.project{
	width: 60%;
	height: auto;
	color: #d0d0d0be;
	display: flex;
	flex-direction: column;
}

.project h2{
	font-size: 2.5vw;
	font-family: Destroy;
}
.project h3{
	font-size: 1.5vw;
	font-family: 'Cormorant Garamond';
}
.project p{
	font-size: 1.2vw;
	font-family: 'Cormorant Garamond';
	font-style: italic;
	padding: 0 10%;
}
.fights{
	position: absolute;
	width: 100vw;
	z-index: -1;
}
#heading0{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
}

#heading0 img{
	opacity: .3;
}


.progress{
	/* position: absolute; */
	height: auto;
	width: auto;
	margin: 5vh 5vw;
	z-index: 100;
	bottom: 0;
	opacity: .8;
	/* background-color: #3C80FF; */
}


/* ............Stats............. */

.Erin{
	position: relative;
	display: flex;
	flex-direction: row;
	/* align-items: center;
	justify-content: center; */
	height: 111vh;
	width: 100vw;
	/* background-image: url(images/Prophet-bg.png); */
	/* background-size:contain;
	background-repeat: no-repeat;
	background-position: center; */
}
.stats{
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100vh;
	width: 50vw;
	margin: 5vh 5vw;
	z-index: 100;
	opacity: .8;
	/* background-image: url(images/Stats_table.jpg); */
	/* background-color: #3c80ff69; */
}

.stats1 img{
	height: auto;
	width: 100%;
}

.written {
	position: relative;
	/* background-color: #060d1a0f; */
	margin-bottom: 5vh;
	margin-top: auto;
	
}

.written p{
	font-family: 'Courier Prime', monospace;
	font-size: 2vw;
}


/* ............ About ............. */

.about{
	position: relative;
	width: 100%;
	display: flex;
	padding-bottom: 5%;
	height: 112vh;

}


.align{
	text-align: center;
	padding: 0 0 5vh 0;
}
.align h3{
	font-family: 'Diplomata SC';
	font-size: 2.5vw;
	color: rgb(26, 26, 26);
}
.aboutCyph{
	position: relative;
	transform: translateX(100%);
	width: 45%;
	color: #151515;
	display: flex;
	flex-direction: column;
	padding-top: 10vh;
	/* background: #3c80ff29; */
}
.aboutCyph h2{
	font-size: 2.5vw;
	font-family: Destroy;
}
.aboutCyph p{
	font-size: 1.2vw;
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: bold;
	padding: 0 10%;
}

.note{
	background-color: #909288;
	text-align: center;
	margin-top: 15vh;
	padding: 2em;
	width: 100%;
}
.note h2{
	font-size: 2.5rem;
	font-family: 'Courgette', cursive;
	color: black;
	font-weight: 900;
	letter-spacing: 1px;
}
.note p{

	font-size: 2.5rem;
	font-family: 'Courgette', cursive;
	color: black;
	font-weight: 300;
	letter-spacing: 1px;
}

.highli{
	font-size: 2.5rem;
	font-family: 'Courgette', cursive;
	color: black;
	font-weight: 600;
	letter-spacing: 1px;
}

.heading{
	color: #fff;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: 1px;
	margin-bottom: 10px;
}
.text{
	color: #fff;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 1px;
}


/* ............ Upcoming ............. */


.upcoming{
	position: relative;
	width: 100%;
	display: flex;
	padding-bottom: 5%;
	height: 112vh;
}

.columnz{
	display: flex;
	flex-direction: column;
	width: 45%;
	/* background-color: #3c80ff6b;s */
}
.titles{
	position: relative;
	top:5vh;
	left: 12vw;
}


.titles h4{
	font-family: 'Courgette', cursive;
	font-weight: 400;
	font-size: 4vw;
}
.Lightning_2{
	position: relative;
	left: 5vw;
	top: 10vh;
	height: 80%;
	padding: 1vh;
	width: 65%;
	background-color: hsla(0, 0%, 100%, 0.5);
}
.Lightning_2 h2{
	margin-top: 2vh;
	font-size: 2vw;
	font-family: Destroy;
	text-align: center;
}
.Lightning_2 p{
	margin: 5vh 1.5vw 2vh 2vw;
	font-family: 'Courgette', cursive;
	font-size: 1.3rem;
}
.progrezz{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	z-index: 100;
	bottom: 1vh;
	opacity: .8;
	/* background-color: #3C80FF; */
}
.Right{
	position: relative;
	top: 5vh;
	right: -18vw;
	height: 107%;
	width: 42%;
	/* background-color: #0033fd; */
	overflow: hidden;
}
.Ani h2{
	margin-top: 2vh;
	font-family: 'Eagle Lake', cursive;
	font-weight: 400;
	font-size: 3vw;
}
/* ............ Writing Samples ............. */


.l2_height{
	height: 95%;
	background-color: hsla(171, 3%, 48%, 0.747);

}
.bigger{
	font-family: "Destroy";
	font-size: 2.4vw;
}
.red{
	font-family: "Destroy";
	color: rgb(109, 48, 48);
}
.yellow{
	font-family: "Destroy";
	color: rgb(109, 104, 48);
}
.l2_height p{
	font-family: 'Cormorant Garamond', serif;
	font-size: 2vw;
	margin: 2vw 2.7vw;
	text-align: center;
	color: #d0d0d0;	
}

.Right_2{
	position: relative;
	top: 5vh;
	right: 0vw;
	height: 100%;
	width: 42%;
}

.caption{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 0;
	/* justify-content: center; */
	scale: (1);
	transition: all 1s;
}
.caption a img{
	position: relative;
	left: 18%;
	height: auto;
	width: 65%;
	align-self: start;
}

.caption :hover{
	position: relative;
	transform: translateX(0) scale(1.1);
	/* left: 5%; */
	/* height: auto; */
	/* width: 75%; */
	/* align-self: start; */
}
.inlay{
	position: relative;
	left: 15%;
	width: 35%;
	height: auto;
	background-color: hsla(173, 22%, 93%, 0.299);
	padding: 0;
	align-self: start;
}
.inlay p{
	text-align: center;
	 color: rgb(24, 24, 24);
	 padding: 0;
	 margin: 10%;
	 font-size: 1.2vw;
}
.bold{

	font-family: 'Cormorant Garamond', serif;
	font-weight: bolder;
	font-size: 1.4vw;
}

.Lightning_3{
	position: relative;
	/* left: 25vw; */
	transform: translateX(25vw);
	top: 10vh;
	height: 80%;
	padding: 1vh;
	width: 65%;
	background-color: hsla(171, 3%, 48%, 0.747);

}
#tran{
	scale: (1);
	transform: translateX(0);
	transition-duration: 1200ms;
	transition-property: transform;
}
#tran :hover{
	transform: translateX(-55%) scale(1.2);
	/* background-color: brown; */
}

.Lightning_3 img{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 52%;
}
.boxIt{
	position: relative;
	display: flex;
	flex-direction: column;
	height: auto;
	/* background-color: hsla(171, 100%, 50%, 0.747); */
}
.boxIt a{
	font-family: 'Cormorant Garamond', serif;
	font-size: 2vw;
	/* margin: 2vw 2.7vw; */
	text-align: center;
	color: #0033fd;	
}
.Lightning_3 h2{
	margin-top: 3vh;
	font-size: 2vw;
	font-family: Destroy;
	text-align: center;
}
.Lightning_3 p{
	color: #d0d0d0;
}
.Lightning_3 a{
font-family: 'Cormorant Garamond', serif;
font-size: 2vw;
/* margin: 2vw 2.7vw; */
text-align: center;
color: #0033fd;	
}



/* ........... contact ............. */

.contact{
position: relative;
width: 100%;
display: flex;
flex-direction: column;
padding-bottom: 5%;
height: 112vh;

}
.contactBx{
	position: relative;
	display: flex;
	width: 70%;
	height: 70%;
	padding: 2vh 0;
	/* background: rgba(128, 255, 0, 0.358); */
}

.contactBx img{
	position: absolute;
	width: 15vw;
	opacity: .2;
	right: 28%;
	/* background: coral; */
}
.Contactnotes{
	width: 100%;
	display: flex-column;
	justify-content: center;
	align-items: center;
	margin-left: 4vw;
	/* background: #162c3b; */
	}
	.Contactnotes h3{
		font-size: 8vw;
		font-family: 'Cormorant Garamond', serif;
		color: black;
		font-weight: 400;
		letter-spacing: 1px;
	}
	.Contactnotes p{
		font-size: 1.8rem;
	}


.subSection{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	
	width: 70%;
	height: 30%;
	/* background-color: #909288; */
}

.email{
	position: relative;
	right: 7%;
	display: flex-column;
	justify-content: center;
	align-items: center;
	/* margin: 5vh 5vw; */
	padding: 1vh 1vw;
	text-decoration: none;
	font-size: 1.8rem;
	background: hsla(22, 73%, 97%, 0.439);
}
.email p{
	font-size: 2.6vw;
	font-family: 'Cormorant Garamond', serif;
	color: black;
	font-weight: bolder;
}
.email a{
	font-size: 2.8vw;
	font-family: 'Cormorant Garamond', serif;
	color: black;
	font-weight: 700;
	letter-spacing: 1px;
	text-decoration: none;
}

.email .socialBlock{
	position: relative;
	pointer-events: all;
	left: 0%;
	height: auto;
	width: 50%;
	margin-top: 1vh;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.socialBlock_2{
	font-size: 2.6vw;
	font-family: 'Cormorant Garamond', serif;
	color: black;
	font-weight: 900;
	pointer-events: all;
	opacity: 1;
	height: auto;
	width: 300px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 1vh 1vw;
	background: hsla(22, 73%, 97%, 0.439);
}

.socialBlock_2 .socialIcons{
	opacity: .8;
	height: 60px;
	width: 60px;
}


.email .socialBlock .socialIcons{
	opacity: .8;
	height: 50px;
	width: 50px;
}






/* ........................  Footer  .......................... */

footer{
	position: relative;
	top: 0;
	left: 0;
	/* bottom: 0; */
	width: 100%; 
	/* height: 100%; */
	display: flex-column;
    align-items: center;
    justify-content: center;
	padding: 2.2vh 0;
	z-index: 5000;
	/* background-color: rgba(0, 0, 0, 0.568); */
	background: url(images/stone.jpg);
}
.up{
	display: flex;
    align-items: center;
    justify-content: center;
	width: auto;
	height: auto;
	/* background-color: blueviolet; */
	text-decoration: none;
}
.up p{
	text-align: center;
	color: #d0d0d0;
	font-family: 'Diplomata SC', cursive;
	transform: scale(1,1.5);

}
footer::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
	z-index: -1;
    background-color: rgba(0,0,0,0.5);
}



.footBanner{
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 2vh;
	background: rgb(226, 38, 18);
	z-index: 10002;
	color: whitesmoke;
}








/* _________________________  SOCIAL MEDIA ______________________________ */


.socialIcons{
	opacity: .9;
	position: relative;
	height: 60px;
	width: 60px;
	margin-right: 2%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	/* background-color: #fff; */
}


.fbk{

	background-image: url(images/face2.png);

	transition-property: opacity, transform;
	transition-duration: 300ms, 300ms;
	transition-timing-function: ease-in-out;
	transition-delay: 0s, 0s;	
}
.fbk:hover{
	opacity: 1;
	transform: rotateX(15deg) scale(1.2);
	transition-property: opacity, transform;
	transition-duration: 500ms, 500ms;
	transition-timing-function: ease-in-out;
	transition-delay: 300ms, 0s;
}
.bird{
	background: url(images/bird.png);
	/* background-color: rgb(255, 255, 255); */
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	
	transition-property: opacity, transform;
	transition-duration: 300ms, 300ms;
	transition-timing-function: ease-in-out;
	transition-delay: 0s, 0s;	 
}
.bird:hover{
	opacity: 1;
	transform: rotate(5deg) scale(1.2);
	transition-property: opacity, transform;
	transition-duration: 500ms, 500ms;
	transition-timing-function: ease-in-out;
	transition-delay: 300ms, 0s;
}

.gram{
	background-image: url(images/ig2.png);

	transition-property: opacity, transform;
	transition-duration: 300ms, 300ms;
	transition-timing-function: ease-in-out;
	transition-delay: 0s, 0s;
}
.gram:hover{
	opacity: 1;
	transform: rotateY(15deg) scale(1.2);
	transition-property: opacity, transform;
	transition-duration: 500ms, 500ms;
	transition-timing-function: ease-in-out;
	transition-delay: 300ms, 0s;
}

.linkIn{
	background-image: url(images/li2.png);
	
	transition-property: opacity, transform;
	transition-duration: 300ms, 300ms;
	transition-timing-function: ease-in-out;
	transition-delay: 0s, 0s;
}
.linkIn:hover{
	opacity: 1;
	transform: rotateY(15deg) scale(1.2);
	transition-property: opacity, transform;
	transition-duration: 500ms, 500ms;
	transition-timing-function: ease-in-out;
	transition-delay: 300ms, 0s;
}




/* ____________________________       @ MEdia  --------------------------------- */



@media (max-width: 1675px){/* ---------------------------------------- */

	.forward{
		height: 100vh;
	}

	.Erin{
		height: 100vh;
	}

	.about{
		height: 100vh;
	}

	.upcoming{
		height: 100vh;
	}
	.contact{
		height: 100vh;
	}
}


@media (max-width: 1433px){  /* ---------------------------------------- */


	.review{
		padding: 15% 5%;
		font-size: 1.5vh;
	}
	.written {
		margin-bottom: 0vh;
		margin-top: 20vh;
	}
	.Lightning_2 p{
		margin: 5vh 1.5vw 2vh 2vw;
		font-family: 'Courgette', cursive;
		font-size: 1rem;
	}

	.forward{
		height: 90vh;
	}

	.Erin{
		height: 90vh;
	}

	.about{
		height: 90vh;
	}

	.upcoming{
		height: 90vh;
	}
	.contact{
		height: 90vh;
	}
}


@media (max-width: 1199px){/* ---------------------------------------- */

	#navText{
		display: none;
	}

	.map{
		height: 100vh;
	}
	.forward{
		height: 80vh;
	}
	.Erin{
		height: 80vh;
	}

	.about{
		height: 80vh;
	}

	.upcoming{
		height: 80vh;
	}
	.contact{
		height: 80vh;
	}

	.l2_height{
		height: 85%;
	}
	.Lightning_3{
		height: 70%;
	}
	.caption a img{
		left: 15%;
		width: 35%;
		align-self: start;
	}
	.Lightning_3 img{
		width: 35%;
	}

	.contact{
		flex-direction: column;
	}

	.note h2 {
		font-size: 1.5rem;
		font-family: 'Courgette', cursive;
		color: black;
		font-weight: 900;
		letter-spacing: 1px;
	}
	.highli {
		font-size: 1.5rem;
	}
	
	.note p{
		font-size: 1.5rem;
	}		

	.aboutCy .contentBx .note p{
		font-size: 1.5rem;
	}

	.social img {
		width: 11vw;
		margin-left: 8vw;
	}
	.social{
		font-size: 1.8rem;
	}
	.email .socialBlock .socialIcons{
		height: 50px;
		width: 50px;
	}
	.email .socialBlock{
		width: 80%;
	}

	.up img{
		width: 100px;
		height: auto;
	}
}
	



	@media (max-width: 999px){/* ---------------------------------------- */


		.socialBlock{
			position: relative;
			width: 200px;
			top: 10vh;
			right: 5vw;
		}
		.socialBlock .socialIcons{
			height: 40px;
			width: 40px;
		}
		
	}





@media (max-width: 992px){/* ---------------------------------------- */
	#navText{
		display: none;
	}

	.logo h1{
		top:-3vh;
		margin: 0;
		line-height: 5rem;
		font-size: 4.5vh;
	}
	.map{
		height: 60vh;
	}
	.imgBx{
		transform: translate(-50%, -30%);
		background-color: rebeccapurple;
	}
	.columnz{
		/* flex-direction: row;
		width: 100%; */
		/* background-color: #3c80ff6b; */
	}
	.Lightning_2{
		left: 1vw;
		top: 10vh;
		height: 80%;
		width: 100%;
	}
	.Right{
		position: relative;
		top: 5vh;
		/* right: -18vw; */
		height: 100%;
		width: 30%;
	}
	.l2_height{
		height: 65%;
	}
	.Right_2{
		position: relative;
		top: 5vh;
		right: 0vw;
		height: 70%;
		width: 42%;
	}
}


	
	@media (max-width: 700px){/* ---------------------------------------- */

		.socialBlock{
			position: relative;
			width: 230px;
			top: 15vh;
			right: 5vw;
		}
		.socialBlock .socialIcons{
			height: 40px;
			width: 40px;
		}

	header{
		height: 25vh;
	}

	.map{
		height: 50vh;
	}

	.aboutCy{
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		background-size: fit;
		background-position: center;
	}
	
	.aboutCy .contentBx{
		 padding:  5% 5% 0% 5%;
		 width: 100%;
	}
	.aboutCy .contentBx .note{
		background-color: rgba(0, 0, 0, 0.3);
		text-align: left;
		margin-top: 1vh;
		margin-bottom: 0vh;
		padding: 2em;
		width: 100%;
	}
	
	.aboutCy .contentBx .note p{
		padding: 0;
		margin: 0;
		color: cornsilk;
		font-size: .9rem;
		font-family: Courgette;
	}
	
	
	
	.aboutCy .contentBxName{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.aboutCy .contentBxName .noteName{
		margin-top: 0vh;
		margin-right: 0%;
		margin: 0 0 2vh 0;
	}
	
	.aboutCy .contentBxName .noteName h1{
		font-family: 'Diplomata SC', cursive;
		font-size: 4vw;
		text-align: center;
		color: rgb(15, 15, 15);
		line-height: 200%;
	}

}



@media (max-width: 600px){/* ---------------------------------------- */

	.Right{
		height: 100%;
		width: 62%;
		left: 1vw;;
	}

	header{
		height: 20vh;
	}

	/* header .logo{
		font-size: 1.5rem;
	} */
	.cobble{
		font-size: 1.5rem;
	}
	.map{

		height: 40vh;
	
	}
	
	.socialBlock{
		position: absolute;
		width: 230px;
		top: 15vh;
		right: 2vw;
	}
	.socialBlock .socialIcons{
		height: 40px;
		width: 40px;
	}
	

}




@media (max-width: 500px){/* ---------------------------------------- */
	.logo h1{
		
		font-family: 'Courgette';
		font-weight: 400;
		/* letter-spacing: 1px; */
		position: relative;
		top:-3vh;
		color: #fff;
		text-decoration: none;
		margin: 0;
		line-height: 5rem;
		/* background-color: #3C80FF; */
		font-size: 5vh;
	}

		.socialBlock{
			position: absolute;
			width: 230px;
			top: vh;
			right: 5vw; 
		}
		.socialBlock .socialIcons{
			height: 40px;
			width: 40px;
		}
		.map{
		height: 40vh;
		}	


	

}

											/* >>>>>>>>>>>>>>>>>>>>  Nav <<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

	.ham{
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		width: 50px;
		height: 50px;
		border-radius: 15px;
		right: 1.7vw;
		top: 1vh;
		cursor: pointer;
		background-color: rgba(254, 255, 240, 0.295);	
		z-index: 9999;
	}
										
	.toggle{
		display: flex;
		position: absolute;

		width: 30px;
		height: 30px;
		cursor: pointer;
	
		
	}
	.toggle::before{
		content: '';
		position: absolute;
		top: 2px;
		width: 100%;
		height: 4px;
		background-color: #000;
		z-index: 1;
		box-shadow: 0 10px 0 #000;
		transition: 0.5s;
	}
	.toggle::after{
		content: '';
		position: absolute;
		bottom: 4px;
		width: 100%;
		height: 4px;
		background-color: #000;
		z-index: 1;
		transition: 0.5s;
	}





#Nav {
	opacity: 1;
	cursor: pointer;
	height: 2em;
	width: 2.2em;
	right: 2vw;
	top: 2vh;
	overflow: hidden;
	position: fixed;
	z-index: 10000;
	/* background-image: url(images/hamb2.png); */
	background-repeat: no-repeat;
	background-size: contain;
	transition: 200ms ease-out 0s;
	transition: transform 800ms ease-in-out 600ms;
	/* background: rgba(37, 35, 53, 0.34); */
}
#Nav.dwn{
	/* top:8vh; */
	transition: transform 500ms ease-in-out 100ms;
	transform: translateY(6vh);
}
#Nav.up{
	/* top:8vh; */
	transition: transform 500ms ease-in-out 100ms;
	transform: translateY(0);
}

.NavOver{
	position: absolute;
	z-index: 10001;
	width: 80px;
	height: 80px;
	background-image: url(images/xbut.png);
	transition: opacity 200ms ease-in 0s;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
}
.NavOver.hide{
	opacity: 0;
}

#backOverlay{
	z-index: 90000;
	position: fixed;
	top: 0;
	left: 0;
	height: 0vh;
	width: 0vw;
	opacity: 0;
	transition: opacity 300ms ease 0s;
}
#backOverlay.on{
	height: 100vh;
	width: 100vw;
	opacity: 1;
	backdrop-filter: blur(3px);
	/* background-color: rgba(11, 11, 85, 0.144); */
	background-color: rgba(29, 29, 54, 0.144);
}
/* .NavOver:hover {

	transition: opacity 300ms ease-out 0s;
	opacity:0;
} */

/*#Nav:active ~ .overlay {
		left: 20vw;
		opacity: 1;
}*/
.overlay {		/** The Overlay (background) */
	/* Height & width depends on how you want to reveal the overlay (see JS below) */    
	height: 35em;
	/* width: 11em; */
	width: 180px;
	position: fixed; /* Stay in place */
	z-index: 100000; /* Sit on top */
	right: 0px;
	transform: translateX(180px);
	opacity: .78;
	top: 1vh;
	/*background-color: rgb(0,0,0);*/ /* Black fallback color */
	/*background-color: rgba(230,230,230,0.70);*/ /* Black w/opacity */
	/* background-color: rgb(0,0,0); */
	/* background-color: rgba(0,0,0,0.87); */
	background-color: rgba(0,0,0,0.87);
	transition-property: transform;
	transition: 1s;
	overflow-x: hidden; /* Disable horizontal scroll */
	transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
	overflow: hidden;
	background-repeat: no-repeat;
}
.overlay.on {		/** The Overlay (background) */
	transform: translateX(0px);
}

.bckNav{
	z-index: 12000;
	position: fixed;
	top: 0;
	left: 0;
	height: 0vh;
	width: 0vw;
	opacity: 0;
	transition: opacity 600ms ease-out 0s;
	/* background-color: #0033fd4d; */
}
.bckNav.on{
	height: 100vh;
	width: 100vw;
	opacity: 1;
	backdrop-filter: blur(3px);
	/* background-color: rgba(11, 11, 85, 0.144); */
	/* background-color: rgba(29, 29, 54, 0.144); */
	background-color: rgba(8, 33, 61, 0.404);
	/* transition: opacity 900ms ease-in 0s; */
}

.overlay-content {
	position: relative;
	top: 4em; /* 25% from the top */
	width: 100%; /* 100% width */
	text-align: center; /* Centered text/links */
	/*margin-top: 30px; *//* 30px top margin to avoid conflict with the close button on smaller screens */
}
.overlayOtc{
	/* transform: translateY(30px); */
	/* font-size: .6rem;
	font-style: italic;
	padding-top: 0px; */
	/* margin-top: .2rem; */
	/* margin-bottom: -130px; */
}
.overlayOtc p{
	font-size: .7rem;
	font-style: italic;
	padding-top: 0px;
	color: aliceblue;
}

.overlay a {								/* The navigation links inside the overlay */
	font-family: 'Michroma', sans-serif;
	font-size: 1em;		
	padding: 8px;
	text-decoration: none;
/*	font-size: 5vh;*/
	color: #EEEEEE;
	display: block; /* Display block instead of inline */
	transition: 0.3s; /* Transition effects on hover (color) */
	margin-top: 10px;
}

.b{
	color: aliceblue;
	font-size: .8em;
	/*	font-family: steiner, "Gotham Black", "Gotham Ultra", Gabriola, "Digital-7", CHAWP;*/
	
	font-style: normal;
	font-weight: lighter;
	
}

.overlay a:hover {		/* When you mouse over the navigation links, change their color */
	color: #3C80FF;
		text-shadow:  1px 1px 1px rgba(60,128,255,0.55),
				-1px -1px 1px rgba(6,93,255,1.00),
				0 0 25px  rgba(60,128,255,0.55),
				0 0 50px  rgba(60,128,255,0.55),
				0 0 200px  rgba(60,128,255,0.55);
}
.overlay a:focus {
	color: goldenrod;
}


#Nav.Nav_close{
	z-index: 110001;
	transition: 200ms ease-out 0;
	background-image: url(images/xbut.png);
	/* background-image: url(Images/x-button-png-20.png); */
	margin: .4em;
	height: 1.4em;
	width: 1.4em;
	opacity: 1;
	/* background-color: rgb(0, 255, 255); */
}






							/* >>>>>>>>>>>>>>>>>>>>  MAPS <<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */