/* Style Variables */
:root {
	
	/* Font */
	--font-body:"Alegreya Sans", sans-serif; /* Body Font */
	--font-logo:"Comfortaa", sans-serif; /* Logo Font */
	
	/* color Palette */
	--black: #000000;
	--darkest:#121616;
	--darker:#5C7070;
	--dark:#9AACAC;
	--light:#C7D1D1;
	--lighter:#E9EDED;
	--lightest:#FaFcFc;
	--white: #ffffff;
	
	--red:#AE091F;
	--blue:#0e495a;
	--cyan:#e1f6ff;
	--green:#098356;
	--old-green:#277370;
	--purple:#664176;
	--purple-light:#906DA0;
	--orange:#EE6F00; /* Miniimum darkness for accessibility with white */
	--orange-light:#FFA14E;
	--sand:#ecebdd;
	
	color:#FB8960
	--help:#54405b; /* Deep Purple */
	
	--frosted:rgb(255,255,255,.95);
	
	/* Legacy - Just in case */
	--color-white: #ffffff;
	--color-very-light:var(--lightest);
	--color-light:var(--lighter);
	--color-medium:var(--light);
	--color-dark:var(--dark);
	--color-very-dark:var(--darker);
	--color-black:var(--darkest);
	--color-black: #000000;
	
	--color-red:var(--red);
	--color-blue:var(--blue);
	--color-cyan:var(--cyan);
	--color-green:var(--green);
	--color-purple:var(--purple);
	--color-sand:var(--sand);
	--color-orange:var(--orange);
	
	/* Color Assignments */
	--color-logo:var(--orange);
	--color-background:var(--lightest);
	--color-font:var(--darkest);
	--color-screen:var(--light);
	
	--color-bubble:var(--cyan);
	
	--color-good:var(--green);
	--color-neutral:var(--blue);
	--color-warning:var(--red);
	
	/* Color Coding */
	--color-support:var(--orange);
	
	
	/* Measurements */
	/* Margins based on units of 4px */
	--margin:44px;
	
	--margin-xl:60px;
	--margin-l:var(--margin);
	--margin-m:24px;
	--margin-s:16px;
	--margin-xs:12px;
	--margin-xxs:8px;
	--margin-xxxs:4px;
	
	--margin-2:calc(var(--margin) * 2);
	--margin-3:calc(var(--margin) * 3);
	--margin-4:calc(var(--margin) * 4);
	--margin-5:calc(var(--margin) * 5);
	--margin-6:calc(var(--margin) * 6);
	--margin-7:calc(var(--margin) * 7);
	--margin-8:calc(var(--margin) * 8);
	--margin-9:calc(var(--margin) * 9);
	--margin-10:calc(var(--margin) * 10);
	
	--page-margin:var(--margin);
	
	--h3-height:var(--margin);
	--list-item-height:var(--margin);
	
	--button-height:var(--margin); /* WCAG 2.1 Required Minimum */
	--button-width:calc(var(--page-margin) * 2); /* minimum width */
	
	--header-height:calc(var(--margin) * 2);
	
	--card-width:calc(var(--margin) * 3);
	--card-height:calc(var(--card-width) * 2);
	
	--square-width:calc(var(--margin) * 5);
	--square-height:var(--square-width);

	--small-square-width:calc(var(--margin) * 3);
	--small-square-height:var(--small-square-width);

	--hero-height:calc(var(--margin) * 10);
	
	/* Styles */
	--shadow:0px 1px 3px rgba(0,0,0, 0.3);
	--shadow-spread:0px 0px 30px rgb(0,0,0,.1);
	
	--divider:1px solid var(--color-dark);
	--divider-light:1px solid var(--color-medium);
	
	--radius-round:100%;
	--radius-tight:5px;
} /* END Style Variables */

/* Z-Index

0		Background

8000	Messages
9000	Header
10000 	Dialog
*/


@keyframes fade-in {
            0% {
	        opacity:0%;
            }
            100% {
	        opacity:100%; 
            } 
        }
        
@keyframes dialog-out {
            0% {
	        opacity:100%;
            }
            100% {
	        opacity:10%; 
            } 
        }
        
@keyframes message-in {
            0% {
	        opacity:0%;
            transform:translateY(-30%); 
            }
            20% {
	        opacity:0%;
            transform:translateY(-30%); 
            }
            100% {
	        opacity:100%;
            transform:translateY(0%); 
            } 
        }

        
@keyframes seethru {
            0% {
	        opacity:0%;
            }
            50% {
	        opacity:0%;
            }
            100% {
	        opacity:100%;
            } /* Scrolls left */
        }


/* Animated Stripe Pattern */
@keyframes stripes_animation {
	0% {
		background-position: initial;
	}
	100% {
		background-position: 100px 0px;
	}
}

.stripes {
	background: repeating-linear-gradient(
		45deg,
		var(--orange),
		var(--orange) 5%,
		var(--orange-light) 5%,
		var(--orange-light) 10%
	);
	background-size: 100px 100px;
	animation: stripes_animation 2s linear infinite;
}
	


/* Basic reset and styling */
* {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
	}

div {
	position:relative;
	}
	
svg.icon {
	height:24px;
	width:24px;
}

body {
	margin:auto;
	font-family:var(--font-body);
	font-size:1em;
	line-height:1.5em;
	color:var(--darkest);
	background:var(--lightest);
}
	
p {
	margin-bottom:var(--margin-s);
}
	
	p.caption {
		font-size:12px;
	}


ul {
	margin-bottom:var(--margin-s);
}
	
	div.layout ul {
		margin-left:var(--margin-m);
	}
	


/* Anchors */
a { 
	position:relative;
	color:var(--darkest);
	text-decoration:none;
	transition:.5s;
	cursor:pointer;
	}
	
	a:hover {
		color:var(--orange);
		} 
		
		a.delete:hover {
			color:var(--red) !important;
			}
	
	a.orange_link,
	a.link {
		color:var(--orange);
		text-decoration:underline;
	}
		a.orange_link:hover,
		a.link:hover {
			color:var(--blue);
		}
		


/* Headings */
h1, h2, h3 {
	font-family:var(--font-logo);
	font-weight:900;
	margin:0;
	padding:0;
	color:var(--orange);
	position:relative;
	clear:both;
}

h1 {
	font-size:26px;
	line-height:31px;
	margin-bottom:var(--margin-s);
}

h2 {
	font-size:26px;
	line-height:31px;
	margin-bottom:var(--margin-s);
}

h3 {
	font-size:18px;
	line-height:22px;
	margin-bottom:var(--margin-xs);
	color:var(--blue);
}
	
h4 {
	font-size:14px;
}



/* Logo */
.logo {
	font-family:var(--font-logo);
	font-weight:900;
	color:var(--orange);
}



/* Universal Page Layout */
div.layout {
	width:calc(100vw - var(--margin-2));
	max-width:calc(1440px - var(--margin-2));
	margin:auto;
	margin-bottom:0px;
	margin-top:calc(var(--header-height) + (var(--margin) *2));
	}
	
/* Applies below 800 px */
@media (max-width: 800px) {
  
  div.layout {
	width:calc(100vw - var(--margin));
  }
}




/* Hide & Show */
.hide, hidden {
	display:none !important;;
}

.show, .visible {
	display:block;
}




/* Used with the PHP function frostedPixels() */
.frosted_pixels {
	position:absolute;
	top:0px;
	left:0px;
	height:110%;
	width:110%;
	overflow:hidden;
	z-index:1 !important;
}

.frosted_pixels div {
	background-color:var(--lightest);
	opacity:0;
	height:16px;
	width:16px;
	float:left;
	margin:0px;
	padding:0px;
}