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

:root { /*note that some basic rules don't use variables for compatibility, so you must still Find-replace*/
	--colour-main: #77b255;
	--colour-main-trsp: #77b25500; /* #0000 does not create tinge, but this used in case some browser can't gradient */
	--colour-tabHover: #77b25588; /* rgba(119, 178, 85, 0.5) older brosers may not support 4byte alpha! need rgba()*/
	--colour-bg: #DDDDDD;
}
/*Other colour schemes:
#d0d882; #e5eabb; #FFFFFF;
#b9db3d; #dfeea7; #EEEEEE;
#e6b30d; //Harting official??
#fdc716; //Sampled Harting button hsl(46, 90, 100)
#e5b20b; //new yellow hsl(46, 95, 90)
#ffc919; //new yellow hover
#3fb235; #75d86c; //new vibrant green
//current: battery emoji green
*/

a:link {
	text-decoration: none;
/*	color: #000000;  */
	font-weight: bold;
}
a:hover {
/*	color: #0000FF; */
	text-decoration: underline;
}
/*
a:visited {
//	color: #000000;
}
a:active {
	color: #98D3E3;
}
*/
a.headlink:link, a.headlink:visited {
	color: #000000;
	font-weight: normal;
}
body {
	background: #DDDDDD;
	margin: 0px; /*Makes green fades go to screen edge*/
}
#Outline {
/*	font-family: "Calibri Light", Calibri, sans-serif; */
/*	font-family: "Lato", sans-serif; */
	font-family: "Noto Sans", Noto, sans-serif;
	font-size: 16px;
	color: #000000;
	
	max-width: 100%;
	width: 940px; /* This is the main value to adjust website width; it makes cards 900px wide not including padding*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px; /* Distance from top of tab to top of viewport */
	position: relative;
	/*overflow: hidden;*/
}
#TabBar {
	min-width: 700px;
	min-height: 45px;
}
.Tab {
	font-size: 20px;
	font-weight: normal;
	text-align: center;
	color: #000000;
	float: left;
	min-width: 75px;
	height: 35px;
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.Tab:hover {
	background: rgba(119, 178, 85, 0.5);
}
#TabOpen {
	background: #77b255;
	color: #000000;
}
#Content {
	text-align: justify;
	min-height: 100vh; /*percent of viewport height*/
}
#TopFade {
	height: 250px;
	margin-bottom: -250px; /*this cancells out height of gradient */
	background: #77b255;
	background: -webkit-linear-gradient(#77b255, rgba(119, 178, 85, 0));
	background: -o-linear-gradient(#77b255, rgba(119, 178, 85, 0));
	background: -moz-linear-gradient(#77b255, rgba(119, 178, 85, 0));
	background: linear-gradient(#77b255, rgba(119, 178, 85, 0));
}
#BotFade {
	position: relative;
	z-index: -10;
	height: 250px;
	margin-top: -250px;
	background: #77b255;
	background: -webkit-linear-gradient(rgba(119, 178, 85, 0), #77b255);
	background: -o-linear-gradient(rgba(119, 178, 85, 0), #77b255);
	background: -moz-linear-gradient(rgba(119, 178, 85, 0), #77b255);
	background: linear-gradient(rgba(119, 178, 85, 0), #77b255);
}
.overlayFade {
	background: none;
	background: linear-gradient(#DDDDDD00,#DDDDDDFF);
}
#Intro p {
	margin: 20px; /* needs margin like a card, but without a border */
}
#Foot {
	text-align: right;
	min-height: 100px;
	padding-top: 20px;
	margin-bottom: -5px;
	background: #77b255;
}
#Foot p {
	margin-right: 20px;
}
.Card {
	background: #FFFFFF; /*fallback*/
	background: -webkit-linear-gradient(135deg, #09192130, #09192105);
	background: -o-linear-gradient(135deg, #09192130, #09192105);
	background: -moz-linear-gradient(135deg, #09192130, #09192105);
	background: linear-gradient(135deg, #09192130, #09192105);
	box-shadow: 0px 2px 10px -6px #000000; /*x y blur spread colour */
	min-height: 80px;
	padding: 20px;
	margin: 20px;
	border-radius: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
	overflow: hidden;
}
.CardSmall {
	background: #FFFFFF; /*fallback*/
	background: -webkit-linear-gradient(135deg, #09192130, #09192105);
	background: -o-linear-gradient(135deg, #09192130, #09192105);
	background: -moz-linear-gradient(135deg, #09192130, #09192105);
	background: linear-gradient(135deg, #09192130, #09192105);
	color: #000000;
	box-shadow: 0px 2px 10px -6px #000000;
	transition: background 0.15s ease-in-out;
	min-height: 80px;
	padding: 20px;
	padding-bottom: 0px;
	border-radius: 10px;
	overflow: hidden;
	text-align: left;
	
	width: 400px;
	float: left;
	margin-left: 20px;
	margin-bottom: 20px;
	font-weight: normal;
}
.CardSmall:hover {
	background: #EEEEEE; /*fallback*/
	background: -webkit-linear-gradient(135deg, #09192105, #09192100);
	background: -o-linear-gradient(135deg, #09192105, #09192130);
	background: -moz-linear-gradient(135deg, #09192140, #09192130);
	background: linear-gradient(135deg, #09192140, #09192100);
}
.CardDash {
/*	background: rgba(255,255,255,0.5); 
	box-shadow: none; */
/*	min-height: 72px; /*normal height - 2*(border width) */
	border: dashed 4px gray;
}
.square {
	float: left;
	margin: -20px; /* to cancel padding */
	margin-right: 20px; /* against text */
	margin-bottom: 0px; /* because there's no bottom card padding */
	padding-top: 5px;
	height:115px;
	width: 120px;
	text-align: center;
	color: #FFFFFF;
	font-size: 90px;
	font-family: sans-serif;
}
#SocialBar {
	float: left;
	margin-left: 20px;
}
.SButt {
	float: left;
	border-radius: 50%;
	border: solid 1px rgba(0,0,0,0.5);
	color: rgba(0,0,0,0.5);
	padding-top: 7px;
	padding-bottom: 7px;
	height: 26px;
	width: 40px;
	margin-right: 10px;
	text-align: center;
	font-size: 20px;
/*	line-height: 100px; */
}
.SButt p {
/*	margin: 1px; */
}
.SButt:hover {
	background: rgba(255, 255, 255, 0.1);
}
h1 {
	font-size: 16px; /* same as site normal */
	font-weight: normal;
	margin: 0px;
}
#emojiContainer {
/*	color: #EEEEEE; */
}
@media screen and (max-width: 940px) {
.CardContact {
	margin-left: auto;
	margin-right: auto;
	float: none;
}
}
@media screen and (max-width: 780px) {
.largeImg {
	width: 100%;
}
.Card {
	margin-left: 0px;
	margin-right: 0px;
}
}
@media screen and (max-width: 600px) {
.medImg {
	width: 100%;
}
}

/* !!!! OLD JUNK FOR LEGACY PAGES or JUST IN CASE !!!! */

#BigName {
	font-size: 36px;
	text-align: center;
}
#Schedule table {
	text-align: center;
	font-size: 23px;
}
#Content table {
	text-align: justify;
}
#Border {
	max-width: 840px;
	background: #F7EEE1;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
}