body

    {

        font-family: Helvetica, Verdana, Geneva, Tahoma, sans-serif;

        font-size: 16px;

        /* text-align: center; */

        margin-top: 0;

        margin-bottom: 0;

        padding: 0;

        overflow-y: scroll;

		background-attachment: fixed; 

		



    }



	

	



*   {

    color: #203a3b;

}



@media screen and (min-width: 801px) {

	.fixed 

	{

		position: absolute;

		top: 60px;

		right: 60px; 

		width: 10vw;

		transition: ease-in-out 200ms;

	}



.fixed:hover{

	transform: scale(1.15,1.15);

}

	

}





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

	.fixed 

	{

		position: absolute;

		top: 30px;

		right: 30px; 

		width: 20vw;

		transition: ease-in-out 200ms;

	}



.fixed:hover{

	transform: scale(1.15,1.15);

}	

}





a {

	color: #203a3b;

	/* transition: color .20s ease-in;

	-moz-transition: color .20s ease-in;

	-o-transition: color .20s ease-in;

	-webkit-transition: color .20 ease-in; */

	text-decoration: none;

}





/* a:hover {

	color: #3d6c6d;

	text-decoration: underline;

} */





.clearfloat	{

	clear: both; 

	/* height: 40px; */

	position: relative;

}



.container  {

	width: 95%;

	margin: auto;

	/* border: 1px solid black; */

}





.cont2 {

width: 80%;

height: auto;

/* float: left; */

/* border: 1px solid red; */

/* background-color: yellow; */

}



.cont3 {

	padding-left: 2%;

	padding-right: 2%;

	border-radius: 20px; 

	-moz-border-radius: 20px; 

	-webkit-border-radius: 20px;

	/* border: 5px solid #203a3b; */

	width: fit-content;

}



/* .cont3a {

	/* padding: 2%; */

	/* border: 1px solid #203a3b77; 

	display: flex;

	align-items: flex-end;

	vertical-align: bottom;

	 transition: ease 200ms;

	opacity: 0.75; 

} 

*/







.cont4 {

	/* width: auto; */

	margin: auto; 

	/*text-align: center;*/

	display: flex;

	justify-content: space-evenly;

	flex-wrap: wrap;

	align-content: space-between;

	row-gap: 20px;

	

}



@media screen and (min-width: 801px) {





.cont5 {

	width: 400px;

	height: 300px;

	float: left; 

	text-align: center;

	vertical-align: middle;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 20px; 

	-moz-border-radius: 20px; 

	-webkit-border-radius: 20px;

	border: 5px solid #203a3b;

	/* background-image: url(img/books_small.png); */

	background-size: cover; 

	background-position: center; 

	background-repeat: no-repeat; 



}









.inner1 {

	width: 250px;

	height: 150px;

	float: left; 

	text-align: center;

	vertical-align: middle;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 20px; 

	-moz-border-radius: 20px; 

	-webkit-border-radius: 20px;

	border: 5px solid #2b8064bb;

	background-color: #ebc5f8bb;

	transition: ease-in 250ms;

}





.inner2 {

	width: 250px;

	height: 150px;

	float: left; 

	text-align: center;

	vertical-align: middle;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 20px; 

	-moz-border-radius: 20px; 

	-webkit-border-radius: 20px;

	border: 5px solid #a8f3ffbb;

	background-color: #2b8064bb;

	transition: ease-in 250ms;

}





.inner3 {

	width: 250px;

	height: 150px;

	float: left; 

	text-align: center;

	vertical-align: middle;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 20px; 

	-moz-border-radius: 20px; 

	-webkit-border-radius: 20px;

	border: 5px solid #ebc5f8cc;

	background-color: #a8f3ffbb;

	transition: ease-in 250ms;



}





}







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





	.cont5 {

		width: 300px;

		height: 200px;

		float: left; 

		text-align: center;

		vertical-align: middle;

		display: flex;

		align-items: center;

		justify-content: center;

		border-radius: 20px; 

		-moz-border-radius: 20px; 

		-webkit-border-radius: 20px;

		border: 5px solid #203a3b;

		/* background-image: url(img/books_small.png); */

		background-size: cover; 

		background-position: center; 

		background-repeat: no-repeat; 

	

	}

	

	

	

	

	.inner1 {

		width: 200px;

		height: 100px;

		float: left; 

		text-align: center;

		vertical-align: middle;

		display: flex;

		align-items: center;

		justify-content: center;

		border-radius: 20px; 

		-moz-border-radius: 20px; 

		-webkit-border-radius: 20px;

		border: 5px solid #2b8064bb;

		background-color: #ebc5f8bb;

		transition: ease-in 250ms;

	}

	

	

	.inner2 {

		width: 200px;

		height: 100px;

		float: left; 

		text-align: center;

		vertical-align: middle;

		display: flex;

		align-items: center;

		justify-content: center;

		border-radius: 20px; 

		-moz-border-radius: 20px; 

		-webkit-border-radius: 20px;

		border: 5px solid #a8f3ffbb;

		background-color: #2b8064bb;

		transition: ease-in 250ms;

	}

	

	

	.inner3 {

		width: 200px;

		height: 100px;

		float: left; 

		text-align: center;

		vertical-align: middle;

		display: flex;

		align-items: center;

		justify-content: center;

		border-radius: 20px; 

		-moz-border-radius: 20px; 

		-webkit-border-radius: 20px;

		border: 5px solid #ebc5f8cc;

		background-color: #a8f3ffbb;

		transition: ease-in 250ms;

	

	}

	

	

	}







.inner1:hover {

	background-color: #ebc5f8;

}



.inner2:hover {

	background-color: #2b8064;

}



.inner3:hover {

	background-color: #a8f3ff;

}





.padd	{

	padding: 5px;

}





.vspacer {

	height: 20px;

	}











  @media screen and (min-width: 801px) {

	h3 {

		display: block;

		font-size: 1.5em;

		margin-top: 1em;

		margin-bottom: 1em;

		margin-left: 0;

		margin-right: 0;

		font-weight: lighter;

	}



  h2 {

	display: block;

	font-size: 1.8em;

	margin-top: 0.83em;

	margin-bottom: 0.83em;

	margin-left: 0;

	margin-right: 0;

	font-weight: bold;

  }



  h1 {

	display: block;

	font-size: 5em;

	margin-top: 0.2em;

	margin-bottom: 0.4em;

	margin-left: 0;

	margin-right: 0;

	font-weight: bold;

  }



  h4 {

	display: block;

	font-size: 1.2em;

	margin-top: 1em;

	margin-bottom: 1em;

	margin-left: 0;

	margin-right: 0;

	font-weight: lighter;

}



h5 {

	display: block;

	font-size: 1.0em;

	margin-top: 1em;

	margin-bottom: 1em;

	margin-left: 0;

	margin-right: 0;

	font-weight: lighter;

}



h1 {

	--s: 5px;   /* the thickness of the line */

	--c: #203a3b; /* the color */

	

	/* color: #0000; */

	padding-bottom: var(--s);

	background: 

		linear-gradient(90deg,var(--c) 50%,#000 0) calc(100% - var(--_p,0%))/200% 100%,

		linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) var(--s) no-repeat;

	-webkit-background-clip: text,padding-box;

			background-clip: text,padding-box;

	transition: ease-in-out 200ms;



}

	

	h1:hover {--_p: 100%}

/* 

	h3a {

		display: block;

		font-size: 1.5em;

		margin-top: 1em;

		margin-bottom: 1em;

		margin-left: 0;

		margin-right: 0;

		font-weight: lighter;

	}



h3a {

	--s: 5px;   /* the thickness of the line 

	--c: #203a3b; /* the color 

	

	/* color: #0000; 

	padding-bottom: var(--s);

	background: 

		linear-gradient(90deg,var(--c) 50%,#000 0) calc(100% - var(--_p,0%))/200% 100%,

		linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) var(--s) no-repeat;

	-webkit-background-clip: text,padding-box;

			background-clip: text,padding-box;

	transition: ease-in-out 200ms;



}

	

	h3a:hover {--_p: 100%}	 */



  }





  

  

  

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

	h3 {

		display: block;

		font-size: 1.0em;

		margin-top: 1em;

		margin-bottom: 1em;

		margin-left: 0;

		margin-right: 0;

		font-weight: bold;

	}



	h2 {

		display: block;

		font-size: 1.0em;

		margin-top: 0.83em;

		margin-bottom: 0.83em;

		margin-left: 0;

		margin-right: 0;

		font-weight: bold;

	  }



	  h1 {

		display: block;

		font-size: 2em;

		margin-top: 0.2em;

		margin-bottom: 0.4em;

		margin-left: 0;

		margin-right: 0;

		font-weight: bold;

	  }



	  h4 {

		display: block;

		font-size: 0.8em;

		margin-top: 1em;

		margin-bottom: 1em;

		margin-left: 0;

		margin-right: 0;

		font-weight: bold;

	}



	h5 {

		display: block;

		font-size: 0.6em;

		margin-top: 1em;

		margin-bottom: 1em;

		margin-left: 0;

		margin-right: 0;

		font-weight: bold;

	}

  }















  .flexparent {

		display: flex;

		/* flex-wrap: wrap; */

		align-content: space-between;

		/* background-color: white; */

		text-align: center;

		justify-content: space-evenly;

		gap: 20px 0px;

	  }

/* 

  display: flex;

  flex-wrap: wrap;

  align-content: space-between;

  text-align: center;

  justify-content: space-evenly; */



  .flexchild1 {

	/* width: 20vw; */

	margin:auto;

	background-size: cover; 

	background-position: center; 

	background-repeat: no-repeat; 

  }





  .flexchild2a {

	width: 30vw;

	margin:auto;

	/* background-color: dodgerblue; */

	border-radius: 20px; 

	-moz-border-radius: 20px; 

	-webkit-border-radius: 20px;

	/* border: solid 5px #2b8064; */

	/* background-color: firebrick; */

	padding-left: 2%;

	padding-right: 2%;

	display: flex;

	flex-direction: column;

	align-content: space-around;

  }







  .flexchild2b {

	width: 60vw;

	margin:auto;

	/* background-color: dodgerblue; */

	border-radius: 20px; 

	-moz-border-radius: 20px; 

	-webkit-border-radius: 20px;

	border: solid 5px #2b8064;

	background-color: #2b806499;

	padding-left: 2%;

	padding-right: 2%;

	text-align: center;

	vertical-align: middle;

  }



.flexchild2asub	{

	padding-left: 2%;

	padding-right: 2%;

	border-radius: 20px; 

	-moz-border-radius: 20px; 

	-webkit-border-radius: 20px;

	border: 5px solid ;

	text-align: center;

	vertical-align: middle;

	min-width: 25vw;

}









.flexchild3	{

	width: 60vw;

	margin:auto;

	border-radius: 20px; 

	-moz-border-radius: 20px; 

	-webkit-border-radius: 20px;

	border: solid 5px #2b8064;

	/* background-color: #2b806499; */

	padding-left: 2%;

	padding-right: 2%;

	text-align: justify;

	vertical-align: middle;

}









@media screen and (min-width: 801px) {

	.flexchild3img	{

		/* width: 18vw;

		height: 25vh; */

		width: 275px;

		height: 220px;

		display: flex;

		float: left;

		margin:auto;

		border-radius: 20px; 

		-moz-border-radius: 20px; 

		-webkit-border-radius: 20px;

		border: solid 5px #2b8064;

		justify-content: center;

		/* background-color: #2b806499; */

		/* padding-left: 2%;

		padding-right: 2%;

		vertical-align: middle; */

		background-size: cover; 

		background-position: center; 

		background-repeat: no-repeat; 

	}

	

}





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

	.flexchild3img	{

		/* width: 18vw;

		height: 25vh; */

		width: 175px;

		height: 120px;

		display: flex;

		float: left;

		margin:auto;

		border-radius: 20px; 

		-moz-border-radius: 20px; 

		-webkit-border-radius: 20px;

		border: solid 5px #2b8064;

		justify-content: center;

		/* background-color: #2b806499; */

		/* padding-left: 2%;

		padding-right: 2%;

		vertical-align: middle; */

		background-size: cover; 

		background-position: center; 

		background-repeat: no-repeat; 

	}

}







.satsimg1 {

	width: 30vw;

	max-width: 200px;

	opacity: 1;

	transition: ease-in 250ms;

  }



  .satsimg1:hover	{

  opacity: 0.25;

  animation: shake 0.5s;

  animation-iteration-count: infinite;

  }





  @keyframes shake {

	0% { transform: translate(1px, 1px) rotate(0deg); }

	10% { transform: translate(-1px, -2px) rotate(-1deg); }

	20% { transform: translate(-3px, 0px) rotate(1deg); }

	30% { transform: translate(3px, 2px) rotate(0deg); }

	40% { transform: translate(1px, -1px) rotate(1deg); }

	50% { transform: translate(-1px, 2px) rotate(-1deg); }

	60% { transform: translate(-3px, 1px) rotate(0deg); }

	70% { transform: translate(3px, 1px) rotate(-1deg); }

	80% { transform: translate(-1px, -1px) rotate(1deg); }

	90% { transform: translate(1px, 2px) rotate(0deg); }

	100% { transform: translate(1px, -2px) rotate(-1deg); }

  }





.satsimg2 {

	width: 30vw;

	max-width: 200px;

	transition: ease-in 250ms;

  }



.satsimg2:hover	{

	transform: scale(1.1);

}







@media screen and (min-width: 801px) {

.flexchild4	{

	width: 6vw;

	display: flex;

	padding: 1px;

	background-size: cover; 

	background-position: center; 

	background-repeat: no-repeat; 

	transition: transform 500ms ease-in-out;

	will-change: transform;

}

}





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

	.flexchild4	{

		width: 6vw;

		display: none;

		padding: 1px;

		background-size: cover; 

		background-position: center; 

		background-repeat: no-repeat; 

		transition: transform 500ms ease-in-out;

		will-change: transform;

	}

	}



.imgflip	{

	transform: scaleX(-1);

	}





.flexchild4:hover {

	transform: translateY(-20px);

	transition: transform 250ms;

}











.slideout	{

background-image: url(img/ghost.png);

width: 100px;

height: 105px;

position: relative; 

	top: -110px;

/* z-index: -100; */

opacity: 0;

transition: ease-in 800ms;

background-size: cover; 

background-position: center; 

background-repeat: no-repeat; 

/* transform: scaleX(-1); */

}









.flexchild3img:hover .slideout 	{

/* transform:translateY(-100px); */

/* z-index: 55555 !important; */

/* transform: translateZ(1); */

opacity: 1;

animation: shake 0.5s;

animation-iteration-count: infinite;

}









.gcseflexparent {

	display: flex;

	flex-wrap: wrap;

	align-content: space-between;

	text-align: center;

	justify-content: space-evenly;

	row-gap: 20px;

}





.gcse	{

	width: 300px;

	height: 200px;

	float: left; 

	text-align: center;

	vertical-align: middle;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 2px;



}





.gcseinner	{

	width:100%;

	height:90%;

	/* background-color: #ff9a00; */

	border-radius: 20px; 

	-moz-border-radius: 20px; 

	-webkit-border-radius: 20px;

	border: 5px solid #203a3b;

	background-size: cover; 

	background-position: center; 

	background-repeat: no-repeat;

}



.gcseinnerlabel	{

	width: 60%;

	border-radius: 20px; 

	-moz-border-radius: 20px; 

	-webkit-border-radius: 20px;

	border: 3px solid #203a3b;

	background-color: #2b806499;

	text-align: center;

	margin:auto;

	/* padding: 1px; */

	position: relative;

	display: inline-block;

	transition: ease-in 250ms;

	}



.gcseinnerlabel h4	{color:white}



.gcseinner:hover .gcseinnerlabel	{

	background-color: #2b8064;

}

















.mailto {

	--s: 5px;   /* the thickness of the line */

	--c: #203a3b; /* the color */

	

	/* color: #0000; */

	padding-bottom: var(--s);

	background: 

		linear-gradient(90deg,var(--c) 50%,#000 0) calc(100% - var(--_p,0%))/200% 100%,

		linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) var(--s) no-repeat;

	-webkit-background-clip: text,padding-box;

			background-clip: text,padding-box;

	transition: ease-in-out 150ms;



}

	

.mailto:hover {--_p: 100%}



.bunnyflex	{

	display: flex;

	flex-wrap: wrap;

	flex-direction: row;

	justify-content: space-evenly;

	align-content: space-evenly;

	text-align: center;

	/* height: 90%; */

	padding: 20px;

}



.bunnyflexpadd	{

	padding:20px;

}



.bunnyflexchild {

	display:flex;

	border: solid 5px #203a3b;

	border-radius: 20px; 

	-moz-border-radius: 20px; 

	-webkit-border-radius: 20px;

	width: 23vw;

	height: 17vw;

	text-align: center;

	justify-content: center;

	background-size: cover; 

	background-position: center; 

	background-repeat: no-repeat;

	padding: 20px;

}







/*

@media screen and (min-width: 801px) {



	

	}

	

	

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



}

*/

.satsflexparent {

	display: flex;

	flex-wrap: wrap;

	align-content: space-between;

	text-align: center;

	justify-content: space-evenly;

	margin: auto;

}





.satsflexchild {

width: 18vw;

height: 15vw;

background-color: green;

text-align: center;

	vertical-align: middle;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 2px;

}