/* V. 10.01 */

/* div {border: 1px dotted orange;} */


/* colour scheme to try subtle brown and purples */

/* rgb(195, 195, 225); */	/* light purple */
/* rgb(139, 140, 196); */	/* dark purple */
/* rgb(200, 198, 196); */ /* subtle grey  */
/* rgb(225, 223, 221); */	/* subtle grey lighter */
/* rgb(243,246,251); */	/* subtle grey blue very light */
/* rgb(255, 213, 144); */	/* yellow */
/* rgb(247, 181, 72); */	/* orange */


* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

/* temp */
#LogoImage {
	display: none;
	position: absolute;
	left: 245px;
	top: 10px;
}



/* buymeacoffee inline moved to keep validator happy */
.bmc-button img {height: 34px !important;width: 35px !important;margin-bottom: 1px !important;box-shadow: none !important;border: none !important;vertical-align: middle !important;}
.bmc-button{padding: 7px 10px 7px 10px !important;line-height: 35px !important;height:51px !important;min-width:217px !important;text-decoration: none !important;display:inline-flex !important;color:#FFFFFF !important;background-color:#FF813F !important;border-radius: 5px !important;border: 1px solid transparent !important;padding: 7px 10px 7px 10px !important;font-size: 20px !important;letter-spacing:-0.08px !important;box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;margin: 0 auto !important;font-family:'Lato', sans-serif !important;-webkit-box-sizing: border-box !important;box-sizing: border-box !important;-o-transition: 0.3s all linear !important;-webkit-transition: 0.3s all linear !important;-moz-transition: 0.3s all linear !important;-ms-transition: 0.3s all linear !important;transition: 0.3s all linear !important;}
.bmc-button:hover, .bmc-button:active, .bmc-button:focus {-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;text-decoration: none !important;box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;opacity: 0.85 !important;color:#FFFFFF !important;}



html, body {
	margin: 0;
	padding: 0;
	overflow: auto;
	width: 100%;
	min-width: 820px;
	height: 100%;
	min-height: 720px;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

body {
	/* white-space: nowrap; */
	position: relative;
	background-color: #e6e7f7;

	font-family: Verdana, sans-serif;
	color: #33475a;
}

p, h1
{
	font-family: 'Varela Round', sans-serif;
	font-size: 14px;
	/* color: #aaa; */
	margin: 12px 0;
}

a, a:link, a:visited {
	color: #7a7a7a;
	text-decoration: none;
	border-bottom: 2px solid #cfe1db;
}

a:hover {
	color: rgba(136,186,20,1);
	border-bottom: 2px solid #cfe1db;
}


.Hidden
{
	display: none;
}



.FindLetterSelect {
	/* position: relative; */
	cursor: pointer;
	display: inline-block;
	width: 22px;
	height: 22px;
	z-index: 1;
	padding: 5px;
	/* margin: 5px; */
	font-family: 'Fredoka One', sans-serif;
	font-size: 22px;
	line-height: 22px;
	text-align: center;
}

.FindLetterSelect:hover {
	/* background-color: rgba(120, 190, 32, 1); */
	transform: scale(1.75);
	border-radius: 1em;
	color: orange;
}


#PanelLetters {
	visibility: hidden;
	position: absolute;
	z-index: 15;
	left: 100px;
	top: 60px;
	width: 600px;
	height: 75px;
	padding-left: 10px;
	padding-top: 5px;
	border-style: solid;
	border-width: 2px;
	border-color: rgb(139, 170, 191);
	border-radius: 1em;
	box-shadow: 0 10px 10px rgba(0,0,0,0.15);
	background: #fff;
	opacity: 0.95;

	border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
	border:solid 7px #0091ae;
}

#AddLetterDragger {
	visibility: hidden;
}

#PanelTitle {
	display: none;
	margin: 1px;
	color: orange;
	text-align: center;
	font-family: 'Fredoka One', sans-serif;
	font-size: 20px;
}


/*########## Outer holder ##########*/

#OuterHolder {
	/* stops letters from going outside the board during a drag */
	/* overflow: hidden; */
	position: relative;
	z-index: 1;
	width: 800px; height: 640px;
	margin-left: auto;
	margin-right: auto;
	top: 50%;
	transform: translateY(-50%);
	border-style: solid;
	border-width: 1px;
	border-color: #dedede;
	border-radius: 1em;
	background-color: #fdfdfd;
	box-shadow: 0 10px 10px rgba(0,0,0,0.15);
}




/*########## Header & Burger Menu Options ##########*/

#Header {
	z-index: 1;
	position: absolute;
	width: 800px;
	height: 60px;
	margin-left: auto;
	margin-right: auto;
	border-bottom: solid #b0b0b0 1px;
	clear: both;
}


/* #Logo { */
	/* visibility: hidden; */
	/* display: none; */
	/* position: relative; */
	/* float: left; */
	/* width: 240px; */
	/* margin-right: 400px; */
/* } */


#LogoCSS {
	position: absolute;
	overflow: hidden;
	/* background-color: #fdfdfd; */
	/* background-color: #e0e0e0; */
	left: 10px;
	top: 0px;
	width: 265px;
	height: 55px;
}


#HeaderText {
	position: absolute;
	left: 5px;
	top: 0px;
	width: 265px;
	height: 55px;
	font-size: 26px;
	/* font-family: 'Russo One'; */
	font-family: 'Fredoka One', sans-serif;
	/* font-family: 'Luckiest Guy'; */
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgb(21,92,142);
	/* color: white; */
    text-shadow: rgba(0,0,0,.10) 0 0 2px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


#HeaderTitle {
	position: absolute;
	left: 20px;
	top: 5px;
/* width: 265; */
	height: 55px;
	/* margin-left: 25px; */
}

.loony {
	color: orange;
}

.letters {
	color: #78be20;
}

#HeaderStrapline {
	position: absolute;
	left: 0;
	top: 35px;
	/* margin-left: 3px; */
	color: rgb(21,92,142);
	font-size: 16px;
	/* font-family: 'Russo One'; */
	font-family: 'Fredoka One', sans-serif;
	/* letter-spacing: 0.05em; */
	/* font-family: 'Luckiest Guy'; */
}


/* header letters L rotated and coloured */

.hltr1, .hltr2 {
	position: absolute;
	/* display: inline-block; */
	font-size: 32px;
	color: rgb(139,170,191);
}

.hltr1 {
	left: 0;
	top: 2px;
	color: orange;
}

.hltr2 {
	left: 106px;
	top: 2px;
	color: #78be20;
}


#HeaderMsg {
	opacity: 0;
	position: absolute;
	left: 270px;
	top: 10px;
	width: 160px;
	height: 35px;
	padding: 0px;
	text-align: center;
	color: orange;
	font-size: 18px;
	font-family: 'Russo One', sans-serif;
	border-radius: 10px;
	background-color: white;
}

#HeaderUsersChange {
	/* visibility: hidden; */
	position: absolute;
	left: 325px;
	top: -10px;
	width: 230px;
	height: 25px;
	padding-top: 12px;
	opacity:  0;

	color: rgb(21,92,142);
	font-size: 15px;
	font-family: 'Russo One', sans-serif;
	text-align: center;
	border-radius: 10px;
	border: 2px solid rgb(21,92,142);
}

#HeaderUsers {
	position: absolute;
	overflow: hidden;
	left: 440px;
	top: 5px;
	width: 45px; height: 45px;
	border-style: solid;
	border-width: 3px;
	background-color: #fdfdfd;
	border-color: #f0f0f0;
	border-radius: 35px;
	cursor: pointer;
}

#HeaderUsers:hover {
	border-color: orange;
}

#UserAnim {
	position:absolute;
	left: 16px;
	top: 16px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #aaa;
	opacity: 0;
}

#UserIcon {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 30px;
	height: 45px;
	padding-left: 14px;
	margin-top: 5px;
	opacity: 0.5;
	color: rgb(21,92,142);
	font-size: 125%;
}

#NumUsers {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 45px;
	height: 45px;
	margin-top: 28px;
	text-align: center;
	color: rgb(21,92,142);
	font-family: 'Russo One', sans-serif;
	font-size: 15px;
	font-weight: bold;
}


#HeaderUsersAnim {
	position: absolute;
	overflow: hidden;
	z-index: 1;
	opacity: 0;
	left: 555px;
	top: 5px;
	width: 45px; height: 45px;
	border-style: solid;
	border-width: 3px;
	border-color: rgb(139, 170, 191);
	border-color: #f0f0f0;
	border-radius: 35px;
	text-align:center;
	color: rgb(21,92,142);
	font-family: 'Russo One', sans-serif;
	font-size: 18px;
	font-weight: bold;
}



.MenuIcon {
	position: absolute;
	z-index: 1;
	width: 35px;
	height: 35px;
	border-style: solid;
	border-width: 3px;
	padding-left: 10px;
	padding-top: 10px;
	background-color: #fdfdfd;
	border-color: #f0f0f0;
	border-radius: 35px;
	overflow: hidden;
	cursor: pointer;
	color: rgb(21,92,142);
	font-size: 125%;
	opacity: 1;
	transform: scale(1);
	transition-duration: 250ms;
}

.MenuIcon:hover {
	z-index: 10;
	transform: scale(1.5);
	transition-duration: 250ms;
	color: #78be20;
	border-color: orange;
	background-color: #ffffff;
}

.SearchLetters {
	cursor: pointer;
	transition: 0.25s;
}


#AddLetter {
	left: 500px;
	top: 5px;
}

#AddLetter i {
	visibility: hidden;
}


.AddLetterText {
	margin-left: -5px;
	font-weight: bold;
}


#RubbishBin {
	left: 560px;
	top: 5px;
}


#ArrowHelper {
	visibility: hidden;
	position: absolute;
	z-index: 10;
	left: 505px;
	top: 10px;
	/* width: 35px; */
	/* height: 35px; */
	color: orange;
	border-style: solid;
	border-width: 3px;
	/* padding-left: 10px; */
	/* padding-top: 10px; */
	/* padding: 5px; */
	background-color: #fdfdfd;
	border-color: #fdfdfd;
	border-radius: 35px;
	overflow: hidden;
	font-size: 175%;
}


#SearchLetters {
	left: 620px;
	top: 5px;
}

#ShareThis i {
	position: absolute;
	top: 12px;
	left: 12px;
}

#ShareThis {
	/* position: absolute; */
	top: 5px;
	left: 680px;
}

#HeaderMenu {
	left: 740px;
	top: 5px;
}


#NavMenuIcon {
	z-index: 10;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 45px; height: 45px;
	padding-left: 12px;
	padding-top: 14px;
}


#CloseMenuIcon {
	position: absolute;
	z-index:20;
	left: 675px;
	/* right: 0; */
	/* margin-left: auto; */
	/* margin-right: auto; */
	top: -25px;
	width: 25px; height: 25px;
	padding-left: 10px;
	padding-top: 10px;
	color: #0091ae;
	background-color: #fdfdfd;
	border-style: solid;
	border-width: 5px;
	border-color: #0091ae;
	border-radius: 35px;
	/* overflow: hidden; */
	cursor: pointer;
	font-size: 150%;
	transform: scale(1);
	transition-duration: 250ms;
	/* opacity: 0.5; */
	/* padding-left: 14px; */
	/* padding-top: 14px; */
}

#CloseMenuIcon:hover {
	color: rgb(139, 170, 191);
	border-color: rgb(139, 170, 191);
	background-color: #ffffff;
	transform: scale(1.5);
	transition-duration: 250ms;
}


/*########## Letterboard styles ##########*/

#LetterBoard {
	z-index: 1;
	position: absolute;
	width: 800px; height: 580px;
	left: 0px;
	top: 61px;
	margin-left: auto;
	margin-right: auto;
}

.StyleBoardDefault {
	background-color: white;
	border-radius: 0.5em;
}

.StyleBoardChalkBoard {
	background-color: black;
	border-width: 2px;
	border-color: #b5651d;
	border-radius: 0.1em;
}

.letterDrag {
	position: absolute;
	display: block;
	left: 1px; top: 1px;
	width: 28px; height: 28px;
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: 'Fredoka One', sans-serif;
	font-size: 28px;
	line-height: 28px;

	text-shadow: 1px 1px 1px rgba(150,150,150, 1),
				 2px 2px 4px rgba(150,150,150, 0.5);
}

.letterHighlight {
	background-color: #E5F557;
	border: 2px solid orange;
	border-radius: 50%;
}

.letterDragDefault {
	font-family: 'Fredoka One', sans-serif;

	text-shadow: 1px 1px 1px rgba(150,150,150, 1),
				 2px 2px 4px rgba(150,150,150, 0.5);
}

.letterDragChalkBoard {
	font-family: 'Permanent Marker', sans-serif;
	color: white  !important;
}





/*########## User options menu screens ##########*/

#UserOptions {
	/* overflow: hidden; */
	position: absolute;
	z-index: 20;
	left: 0;		/* setting left and right to 0 centres it ! */
	right: 0;
	margin-left: auto;
	margin-right: auto;
	top: -525px;
	width: 700px; height: 500px;
	background-color: #fdfdfd;

	border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
	border:solid 7px #0091ae;
}


#OptionsMenuWrapper {
	position: absolute;
	left: 0;
	top: 0;
	width: 150px; height: 500px;
	/* background-color: #f9f9f9; */
}


#OptionsMenu {
	position: absolute;
	left: 0;
	top: 0;
	width: 150px; height: 500px;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#OptionsMenu li {
	text-align: center;
	color: #a0a0a0;
	height: 48px;
	margin-left: 10px;
	margin-top: 25px;
	cursor: pointer;
}


.NavItem {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-family: 'Luckiest Guy', sans-serif;
	font-size: 22px;
	opacity: 0.6;
}


#NavAbout .NavItem {
	color: #1476c6;
}

#NavStyle .NavItem {
	color: #ff6c00;
	margin-top: 45px;
}
li#NavStyle {
	margin-top: 10px;
}

#NavShare .NavItem {
	color: green;
}
li#NavShare {
	margin-top: 30px;
}

#NavUsage .NavItem {
	color: orange;
}
li#NavUsage {
	margin-top: 10px;
}

#NavSupportUs .NavItem {
	color: #78be20;
}
li#NavSupportUs {
	margin-top: 10px;
}

#NavFeedback .NavItem {
	color: #A0522D;
}

#NavCookies .NavItem {
	color: purple;
}





/*########## Blurb texts for the About screens ##########*/

#About, #Share, #Style, #Usage, #Cookies, #Feedback, #SupportUs {
	position: absolute;
	z-index: 1;
	opacity: 0;
	top: -625px;
	top: 0px;
	left: 150px;
	right: 0;
	width: 530px; height: 500px;
	/* margin: 10px; */
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	padding-top: 10px;
}

#About {
	visibility: visible;
	opacity: 1;
	/* background-color: #f9f9f9; */
}

#About h1, #Style h1, #Share h1, #Usage h1, #Cookies h1, #Feedback h1, #SupportUs h1 {
	color: #1476c6;
	/* font-family: 'Nobile'; */
	font-family: 'Luckiest Guy', sans-serif;
	font-size: 28px;
	/* font-weight: bold; */
	letter-spacing: 0.1em;
	margin: 10px 0;
}

#About h1 {color: #1476c6;}

#Style h1 {color: #ff6c00}

#Share h1 {color: green;}

#Usage h1 {color: orange;}

#Cookies h1 {color: purple;}

#SupportUs h1 {color: #78be20;}

#Feedback h1 {color: #A0522D;}

#About p, #Style p, #Share p, #Usage p, #Cookies p, #Feedback p, #SupportUs p {
	color: #33475a;
	font-size: 16px;
}

#About .SmallerText { font-size: 14px; }


#About .bgfeint, #About .feintborder { color: #1476c6; border-color: #1476c6; }
#Style .bgfeint, #Style .feintborder { color: #ff6c00; border-color: #ff6c00; }
#Share .bgfeint, #Share .feintborder { color: green; border-color: green; }
#Usage .bgfeint, #Usage .feintborder { color: orange; border-color: orange; }
#SupportUs .bgfeint, #SupportUs .feintborder { color: #78be20; border-color: #78be20; }
#Feedback .bgfeint, #Feedback .feintborder { color: #A0522D; border-color: #A0522D; }
#Cookies .bgfeint, #Cookies .feintborder { color: purple; border-color: purple; }

.bgfeint {
	width: 75px;
	height: 75px;
	opacity: 0.15;
	position: absolute;
	bottom: 70px;
	right: 55px;
	font-family: 'Luckiest Guy', sans-serif;
	font-size: 76px;
}

.feintborder {
	width: 175px;
	height: 175px;
	opacity: 0.15;
	position: absolute;
	bottom: 0;
	right: 0;

	border: 8px solid #aaa;
	border-radius: 50%;
}





/*########## User selectable board styles ##########*/

.StyleHolder {
	background-color: #fefefe;
	border: 1px solid #e7e9ed;
	cursor: pointer;
	float: left;
	width: 140px; height: 120px;
	margin: 10px;
	padding: 20px;
	margin-left: 45px;
	transition: 0.2s;
}

.StyleHolder > p {
	font-size: 14px;
	margin-top: 5px;
	text-align: center;
	/* display: block; */
	/* width: 100px; height: 100px; */
}

.StyleHolder:hover {
	background-color: #ffffff;
	border-radius: 5px;
    box-shadow: 0 10px 15px -10px rgba(30,45,62,.21), 0 5px 40px -10px rgba(31,44,60,.1);
}


#StylePreviewDefault, #StylePreviewChalkboard {
	cursor: pointer;
	display: block;
	width: 140px; height: 110px;
	border-width: 2px;
	border-style: solid;
	/* box-shadow: 0 5px 5px rgba(0,0,0,0.15); */
}

#StylePreviewDefault {
	border-color: #bfbfbf;
	border-radius: 0.5em;
	background-color: white;
}


#StylePreviewDefault p {
	text-align: center;
	margin-top: 25px;
	text-transform: uppercase;
	font-family: 'Fredoka One', sans-serif;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 2px;
	letter-spacing: 0.1em;
	color: blue;

	text-shadow: 1px 1px 1px rgba(150,150,150, 1),
				 2px 2px 4px rgba(150,150,150, 0.5);
}

#StylePreviewDefault p .textfridge {
	color: orange;
}
#StylePreviewDefault p .textmagnets {
	color: #78be20;
}


#StylePreviewChalkboard {
	border-color: #b5651d;
	border-radius: 0.1em;
	background-color: black;
}

#StylePreviewChalkboard p {
	border-radius: 0.25em;
	text-align: center;
	margin-top: 25px;
	font-family: 'Permanent Marker', sans-serif;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 0.2em;
	color: white;
}





/*########## Cookies Banner ##########*/
#CookiesBanner {
	display: none;
	position: absolute;
	z-index: 10;
	left: 0;		/* setting left and right to 0 centres it ! */
	right: 0;
	width: 800px; height: 25px;
	/* margin-top: 45px; */
	margin-left: auto;
	margin-right: auto;
	border: solid 2px #e0e0e0;
	border-radius: 0.25em;
	background-color: #e0e0e0;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-align: center;
}

#CookiesAgree {
	margin-left: 20px;
}


.CookiesButton {
	cursor: pointer;
	display: inline-block;
	height: 20px;
	/* width: 25px; */
	/* overflow: hidden; */
	margin-left: 20px;
/* overflow: hidden; */
	/* border: solid 2px rgb(252, 134, 30); */
	border-radius: 10px;
	padding: 0 10px;
	padding-top: 2px;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 700;
	background-color: rgb(240, 112, 10);	/* orange */
	color:  white;
	/* text-align: center; */
	transition: all .5s ease;
}






/*########## Support and donate links and buttons #########*/

.SmallButton {
	cursor: pointer;
	display: inline-block;
	height: 20px;
	width: 25px;
	overflow: hidden;
	margin-right: 20px;
/* overflow: hidden; */
	/* border: solid 2px rgb(252, 134, 30); */
	border-radius: 10px;
	padding-top: 2px;
	padding-left: 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	font-weight: 700;
/* background-color: rgba(220, 220, 220, 0.75); */
	/* background-color: rgb(67, 168, 55);	/* green */ 
	/* background-color: rgb(240, 112, 10);	/* orange */ 
	background-color: rgb(252, 134, 30, 0.25);	/* light orange */ 
	color:  rgb(240, 112, 10);
	/* text-align: center; */
	transition: all .5s ease;
}

.SmallButton:hover {
	background-color: rgb(252, 134, 30);	/* orange */
	color: #ffffff;
	width: 135px;
	transition: all .35s ease;
}


#paypaldonate, #buymeacoffee {
	width: 50%;
	float: left;
}

#paypaldonate form {
	padding-top: 10px;
	padding-left: 25%;
}





/*########## Advert holder #########*/

#AdvertHolder {
	display: none;
	overflow: hidden;
	position: absolute;
	left: 0;		/* setting left and right to 0 centres it ! */
	right: 0;
	width: 800px; height: 60px;
	margin-top: 45px;
	margin-left: auto;
	margin-right: auto;
	border:solid 2px rgba(195, 195, 225, 0.5);
	background: linear-gradient(rgba(241, 143, 1, 0.9), rgba(241, 143, 1, 0.9));
/* background: linear-gradient(rgba(128, 0, 128, 0.6), rgba(128, 0, 128, 0.6)); */
}

#AdvertHolder p {
	color: #000;
	font-size: 18px;

	font-family: 'Roboto', sans-serif;
	font-weight: 700;
/* transform: translate(-50%, -50%); */
}

.lighter {
	font-weight: 300;
}




/*########## Social media ##########*/

.SocialShare {
	width: 100%;
  	margin: 10px;
	list-style-type: none;
	font-size: 18px;
}

.SocialShare li {
	display: inline;
  	text-align: center;
}

/* buttons */

.SocialShare a {
	border: 1px solid #e7e9ed;
	width: 50px;
  	height: 50px;
  	display: inline-block;
  	margin: 12px;
  	border-radius: 50%;
  	font-size: 24px;
  	color: #fff;
	opacity: 0.75;
	transition: 0.20s linear;
}

.SocialShare a:hover {
	opacity: 1;
	/* border-radius: 10px; */
    box-shadow: 0 10px 15px -10px rgba(30,45,62,.75), 0 5px 40px -10px rgba(31,44,60,.2);
}

/* icons */

.SocialShare i {
  	position: relative;
  	top: 25%;
  	/* transform: translateY(-50%); */
}

/* colors */

.facebook {
 	background: #3b5998;
}

.twitter {
  	background: #55acee;
}

.linkedin {
  	background: #0077b5;
}

.pinterest {
  	background: #cb2027;
}

.reddit {
	background: #ff4500;
}

.tumblr {
  	background: #3b5998;
}

.whatsapp {
  	background: #5fefa9;
}





/* ########## No click Overlay ########## */

#Overlay {
	position: absolute;
	visibility: hidden;
	/* display: none; */
	z-index: 2;
	left:0; top: 0;
	width: 100%; height: 100%;
	/* background-color: rgba(200,200,200, 0.1); */
	background-color: #000;
	opacity: 0.1;
}




/*########## Overlay screens Loading & Maximum users ##########*/

#Loading, #MaxUsers, #UseLandscape {
	position: absolute;
	z-index: 10;

	display: none;
	left: 0;
	right: 0;
	top: 66px;
	width: 800px; height: 575px;	/* need to look at the positioning of this div so that height can be same as letterboard ? */
	margin: auto;
	/* padding: 10px; */
	/* margin: 10px; */
	margin-left: auto;
	margin-right: auto;

	/* border: solid 1px white; */
	border-radius: 0.5em;
	background-color: white;
	opacity: 0.9;
}

#Loading {
	display: block;
}

#MaxUsers {
	/* z-index: 20; */
}

.vertalign {
	margin-top: 15%;
}

#Loading h1, #Loading h2, #MaxUsers h1, #UseLandscape h1 {
	color: #1476c6;
	font-family: 'Luckiest Guy', sans-serif;
	font-size: 28px;
	/* font-weight: bold; */
	letter-spacing: 0.1em;
	margin: 10px 0;
	text-align: center;
}

#Loading p, #MaxUsers p, #UseLandscape p {
	margin: 10px;
	color: #53675a;
	font-family: 'Varela Round', sans-serif;
	font-size: 24px;
	text-align: center;
}

.blue {
	color: #1476c6;
}

.orange {
	color: orange;
	margin-top: 2px;
}

.green {
	color: green;
	margin-top: -5px;
}

.teal {
	color: teal;
	margin-top: -1px;
}

.purple {
	color: purple;
}

.brown {
	color: #A0522D;
	margin-top: -6px;
}

.lightgreen {
	color: #78be20;
	margin-top: -7px;
}

#Loading #SearchIcon {
	opacity: 0.50;
	color: #1476c6;
	font-family: 'Varela Round', sans-serif;
	font-size: 60px;
}

#UseLandscape #MobileIcon {
	opacity: 0.50;
	color: #1476c6;
	font-family: 'Varela Round', sans-serif;
	font-size: 60px;
}