@charset "utf-8";

/* Include padding & borders in all element widths and heights */
* {
	box-sizing: border-box;
}

/* Global default font family and color selection ( dark grey) */
html {
    font-family: Century Gothic, Trebuchet MS, Tahoma;
    color: #615d5c;
}


/* MAJOR SECTION CONTAINERS (like top menu, work area)
/* Top menu container: full eaicontainer width, no additional padding */
.topmenucontainer {
    margin-bottom: 2%;
	width: 100%;
    height: auto;
}
/* page container is everything below the top menu. Scrollable. Has a white background. */
/* Height is sized for maximum device, e.g. tablet in portrait mode. */
.pagecontainer {
	width: 100%;
	height: 90vh;
	padding-top: 2%;
	padding-bottom: 2%;
	padding-left: 4%;
	padding-right: 4%;
	background-color: white;
	overflow: auto;
}
/* Background for all EAi pages except home, Big Sur photo, same for all sizes 600 px and up */
.bigsur {
    background-image: url(../static/images/Background1.jpg);
}
/* Background for EAi home page, Big Sur faded photo, same for all sizes 600 px and up */
.bigsurfade {
	background-image: url(../static/images/Background1fade.jpg);
}
	   

/* TEXT CONTAINERS: text alignment and bottom margin % */
.tccentermb0 {
	text-align: center;
	margin-bottom: 0%;
}
.tccentermb1 {
	text-align: center;
	margin-bottom: 1%;
}
.tccentermb1_25 {
	text-align: center;
	margin-bottom: 1.25%;
}
.tccentermb2 {
	text-align: center;
	margin-bottom: 2%;
}
.tccentermb3 {
	text-align: center;
	margin-bottom: 3%;
}
.tccentermb5 {
	text-align: center;
	margin-bottom: 5%;
}
.tcleftmb0 {
	text-align: left;
	margin-bottom: 0%;
}
.tcleftmb1 {
	text-align: left;
	margin-bottom: 1%;
}
.tcleftmb2 {
	text-align: left;
	margin-bottom: 2%;
}
.tcleftmb3 {
	text-align: left;
	margin-bottom: 3%;
}
.tcleftmb5 {
	text-align: left;
	margin-bottom: 5%;
}
.tcleftmb6 {
	text-align: left;
	margin-bottom: 6%;
}
.tcleftml20mb2 {
	text-align: left;
	margin-left: 20%;
	margin-bottom: 2%;
}
.tcleftml20mr20mb2 {
	text-align: left;
	margin-left: 20%;
	margin-right: 20%;
	margin-bottom: 2%;
}
.tcleftml20mr20mb3 {
	text-align: left;
	margin-left: 20%;
	margin-right: 20%;
	margin-bottom: 3%;
}
.tcleftml30mb3 {
	text-align: left;
	margin-left: 30%;
	margin-bottom: 3%;
}
.tcrightmb0 {
	margin-bottom: 0%;
    text-align: right;
}
.tcrightmb1 {
	margin-bottom: 1%;
    text-align: right;
}
.tcrightmb2 {
	margin-bottom: 2%;
    text-align: right;
}
.tcrightmb3 {
	text-align: right;
	margin-bottom: 3%;
}
.tcrightmb6 {
	margin-bottom: 6%;
    text-align: right;
}


/* FONT STYLES: size, color, weight, etc. But NOT alignment, margins, padding, etc. */
/* Font sizes in em units, even though class names use px, e.g. "fs30grn" is for standard 30 px, which is 1.88 em. */
/* In reality, em size is relative to each media's html default font size */
/* Default text color is dark grey, defined earlier. So only add color here if different */
fs14 {
	font-size: .88em;
}
fs14bld {
	font-size: .88em;
	font-weight: bold;
}
fs14grnsup { 
    vertical-align: super;
    font-size: .88em;
	color: #458206;
}
fs16 {
	font-size: 1em;
}
fs18 {
	font-size: 1.125em;
}
fs18bld {
	font-size: 1.125em;
	font-weight: bold;
}
fs18bldgrn {
	font-size: 1.125em;
	font-weight: bold;
	color: #458206;
}
fs20 {
	font-size: 1.25em;
}
fs20bldgrn {
	font-size: 1.25em;
	font-weight: bold;
	color: #458206;
}
fs20bld {
	font-size: 1.25em;
	font-weight: bold;
}
fs20bldital {
	font-size: 1.25em;
	font-weight: bold;
	font-style: italic;
}
fs20bldgrnital {
	font-size: 1.25em;
	font-weight: bold;
	font-style: italic;
	color: #458206;
}
fs20bldred {
	font-size: 1.25em;
	font-weight: bold;
	color: #ff0000;
}
fs24 {
	font-size: 1.5em;
}
fs24bld {
	font-size: 1.5em;
	font-weight: bold;
}
fs24grn {
	font-size: 1.5em;
	color: #458206;
}
fs30grn {
	font-size: 1.88em;
	color: #458206;
}


/* LINK STYLES: links in <a> tags. When we want to override the default link styling (dark blue w/underline) we add lots of attributes */
.ls18grn {
	font-size: 1.125em;
	text-decoration: none;
	color: #458206;
	outline: none;
}
.ls20grnboldital {
	font-size: 1.25em;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
	outline: none;
	color: #458206;
}
.ls20grnboldital:hover  {
	color: #615d5c;
}
.ls20boldital {
	font-size: 1.25em;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
	outline: none;
	color: #615d5c;
}
.ls20boldital:hover  {
	color: #458206;
}
.ls24grnboldital {
	font-size: 1.5em;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
	outline: none;
	color: #458206;
}
.ls24grnboldital:hover  {
	color: #615d5c;
}
.ls26 {
	font-size: 1.625em;
	text-decoration: none;
	outline: none;
	color: #615d5c;
}
.ls26:hover {
	color: #458206;
}
.ls26grn {
	font-size: 1.625em;
	text-decoration: none;
	color: #458206;
	outline: none;
}
.ls30bld {
	font-size: 1.88em;
	font-weight:bold;
	text-decoration: none;
	color: #615d5c;
	outline: none;
}
.ls30bld:hover {
	color: #458206;
}


/* Top menu stuff which does NOT change with media */
.blogcolink:hover  {
	color: #458206;
}
.signlink:hover  {
	color: #458206;
}


/* GENERAL CONTAINERS. Determines margins, padding, float. */
.gcmb3 {
	margin-left: 0%;
	margin-right: 0%;
	margin-top: 0%;
	margin-bottom: 3%;
}
.gcmb4 {
	margin-left: 0%;
	margin-right: 0%;
	margin-top: 0%;
	margin-bottom: 4%;
}
.gcplr5mb4 {
	padding-left: 5%;
	padding-right: 5%;
	margin-bottom: 4%;
}
.gcplr10mb4 {
	padding-left: 10%;
	padding-right: 10%;
	margin-bottom: 4%;
}
.gcflw50plr10mb5 {
	float: left;
	width: 50%;
	padding-left: 10%;
	padding-right: 10%;
	margin-bottom: 5%;
}
.gcfrw50plr10mb5 {
	float: right;
	width: 50%;
	padding-left: 10%;
	padding-right: 10%;
	margin-bottom: 5%;
}

/* IMAGE CONTAINERS: for centered images like EAi logo, will shrink but not grow beyond image width */
.centimg8em {
	display: block;
    max-width: 8em;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}
.centimg20mb3 {
    max-width: 20%;
    height: auto;
    margin-left: 40%;
    margin-right: 40%;
    margin-bottom: 3%
}
.centimg25 {
    max-width: 25%;
    height: auto;
    margin-left: 37.5%;
    margin-right: 37.5%;
}
.centimg25mb3 {
    max-width: 25%;
    height: auto;
    margin-left: 37.5%;
    margin-right: 37.5%;
    margin-bottom: 3%
}
.centimg25mb5 {
    max-width: 25%;
    height: auto;
    margin-left: 37.5%;
    margin-right: 37.5%;
    margin-bottom: 5%
}
.centimg40 {
    max-width: 40%;
    height: auto;
    margin-left: 30%;
    margin-right: 30%;
}
.centimg50 {
    max-width: 50%;
    height: auto;
    margin-left: 25%;
    margin-right: 25%;
}
.centimg65 {
    max-width: 65%;
    height: auto;
    margin-left: 17.5%;
    margin-right: 17.5%;
}
.centimg75 {
    max-width: 75%;
    height: auto;
    margin-left: 12.5%;
    margin-right: 12.5%;
}
.centimg100 {
	display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
/* following has a shadow for screen shots or other stuff with white background and no border */
.centimg100Shadow {
    max-width: 100%;
    height: auto;
    margin-left: 0%;
    margin-right: 0%;
    box-shadow: 5px 5px 5px #888888;
    border-top-style: outset;
    border-top-width: 1px;
    border-left-style: outset;
    border-left-width: 1px;
}

/* for floating images */
.fltimgl20rm2 {
	float: left;
    max-width: 20%;
    height: auto;
    margin-right: 2%;
}
.fltimgl25rm2 {
	float: left;
    max-width: 25%;
    height: auto;
    margin-right: 2%;
}
.fltimgl35rm5 {
	float: left;
    max-width: 35%;
    height: auto;
    margin-right: 5%;
}


/* "ENERGYai(reg)" styles. Use these within a parent that sets the overall font size */
eai1 {font-size: 80%; font-weight: bold; color: #615d5c;}
eai1::after {content: "ENERGY";}
eai2 {font-size: 100%; font-weight: bold; color: #458206;}
eai2::after {content: "ai";}
eai3 {font-size: 50%; color: #458206; vertical-align: super;}
eai3::after {content: "®";}


/* After a grid row, clear everything */
.row::after {
    content: "";
    clear: both;
    display: block;
}

/* General form columns ("gfc"), 12 column grid for use when we DON'T want it to change with screen width */
/* Common general column settings */
[class*="gfc-"] {
    float: left;
    padding-top: 1px;
    padding-bottom: 1px;
	margin-bottom: 1%;
	margin-left: 0.5%;
	margin-right: 0.5%;
	font-size: 16px;
}

[class*="gfc-"] input {
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

[class*="fc-"] select {
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

.gfc-1 {width: 7.33%;}
.gfc-2 {width: 15.67%;}
.gfc-3 {width: 24%;}
.gfc-4 {width: 32.33%;}
.gfc-5 {width: 40.67%;}
.gfc-6 {width: 49%;}
.gfc-7 {width: 57.33%;}
.gfc-8 {width: 65.67%;}
.gfc-9 {width: 74%;}
.gfc-10 {width: 82.33%;}
.gfc-11 {width: 90.67%;}
.gfc-12 {width: 99%;}


/* THINGS THAT VARY WITH SCREEN WIDTH (PHONES, TABLETS, DESKTOP */
/* Phones in portrait, < 600 px */
@media only screen and (max-width: 37.49em) {

	/* Default font size relative to 16px = 100% standard */
	html {
	    font-size: 50%;
	}

	/* Container for entire workspace. Use entire screen, no margins */
	.eaicontainer {
		margin: 0;
		padding-top: 0%;
		padding-bottom: 1%;
		padding-left: 1%;
		padding-right: 1%;
    }

    /* Only 1 column in grid rows */
    [class*="col-"] {
        width: 100%;
    }

	/* Social media icons (FB, Twitter) left side of top menu. We don't show these on iphone portrait */
	.socmed {
		float: left;
		width: 0%;
	}
	
	/* Facebook link in top menu, not shown. */
	.fblink {
	    width: 0%;
	}
	
	/* Twitter link in top menu, not shown */
	.twlink {
	    width: 0%;
	}

	/* Container for top menu right side links: Blog, Partners, FAQ, Company, Signin */
	.blogcosign {
		text-align: center;
	}
	
	/* Top menu right side links, except for sign-in link */
	.blogcolink  {
		padding-right: .63em;
		padding-left: .63em;
		font-size: 2em;
		text-decoration: none;
		color: #615d5c;
		outline: none;
	}
	
	/* Top menu right side links, sign-in */
	.signlink  {
		padding-right: 0em;
		padding-left: .63em;
		font-size: 2em;
		font-weight: bold;
		color: #615d5c;
		text-decoration: none;
		outline: none;
	}
	
	/* The actual popup */
	.popup .popuptext {
	    visibility: hidden;
	    width: 15em;
	    background-color: #555;
	    color: #fff;
	    text-align: center;
	    border-radius: 0%;
	    padding: 0.5em 0.5em;
	    position: absolute;
	    z-index: 1;
	    bottom: 125%;
	    left: -12em;
	    margin-left: 0%;
	}

}

/* iPhone landscape mode, >= 600 px */
@media only screen and (min-width: 37.5em) {
	
	/* Default font size relative to 16px = 100% standard */
	html {
	    font-size: 73%;
	}

	/* Container for entire workspace. Thin margins */
	.eaicontainer {
		margin-left: 5%;
		margin-right: 5%;
		margin-top: 1%;
		margin-bottom: 0%;
		padding-top: 0%;
		padding-bottom: 1%;
		padding-left: 1%;
		padding-right: 1%;
	}

    /* Only 1 column in grid rows */
    [class*="col-"] {
        width: 100%;
    }

	/* Social media icons (FB, Twitter) left side of top menu */
	.socmed {
		float: left;
	}
	
	/* Facebook link in top menu */
	.fblink {
	    width: 6%;
	    height: auto;
	    margin-right: 7%;
	}
	
	/* Twitter link in top menu */
	.twlink {
	    width: 11%;
	    height: auto;
	}

	/* Social media icons (FB, Twitter) don't show */
	.socmed {
		width: 0%;
	}
	
	/* Facebook link in top menu */
	.fblink {
	    width: 0%;
	}
	
	/* Twitter link in top menu */
	.twlink {
	    width: 0%;
	}

	/* Container for top menu right side links: Blog, Partners, FAQ, Company, Signin */
	.blogcosign {
		text-align: center;
	}
	
	/* Top menu right side links, except for sign-in link */
	.blogcolink  {
		padding-right: .43em;
		padding-left: .43em;
		font-size: 1em;
		text-decoration: none;
		color: #615d5c;
		outline: none;
	}
	
	/* Top menu right side links, sign-in */
	.signlink  {
		padding-right: 0em;
		padding-left: .43em;
		font-size: 1em;
		font-weight: bold;
		color: #615d5c;
		text-decoration: none;
		outline: none;
	}
	
	/* The actual popup */
	.popup .popuptext {
	    visibility: hidden;
	    width: 15em;
	    background-color: #555;
	    color: #fff;
	    text-align: center;
	    border-radius: 0%;
	    padding: 0.5em 0.5em;
	    position: absolute;
	    z-index: 1;
	    bottom: 125%;
	    left: -17em;
	    margin-left: 0%;
	}

}

/* Tablet portrait mode, >= 720 px */
@media only screen and (min-width: 45em) {

	/* Default font size relative to 16px = 100% standard */
	html {
	    font-size: 80%;
	}

	/* Social media icons (FB, Twitter) left side of top menu */
	.socmed {
		float: left;
	}
	
	/* Facebook link in top menu */
	.fblink {
	    width: 6%;
	    height: auto;
	    margin-right: 7%;
	}
	
	/* Twitter link in top menu */
	.twlink {
	    width: 11%;
	    height: auto;
	}

	/* Social media icons (FB, Twitter) left side of top menu */
	.socmed {
		float: left;
		width: 10%;
	}
	
	/* Facebook link in top menu */
	.fblink {
	    width: 16%;
	    height: auto;
	    margin-right: 40%;
	}
	
	/* Twitter link in top menu */
	.twlink {
	    width: 28%;
	    height: auto;
	}

	/* Container for top menu right side links: Blog, Partners, FAQ, Company, Signin */
	.blogcosign {
		text-align: right;
	}
	
	/* Top menu right side links, except for sign-in link */
	.blogcolink  {
		padding-right: .39em;
		padding-left: .39em;
		font-size: 1.41em;
		text-decoration: none;
		color: #615d5c;
		outline: none;
	}
	
	/* Top menu right side links, sign-in */
	.signlink  {
		padding-right: 0em;
		padding-left: .39em;
		font-size: 1.41em;
		font-weight: bold;
		color: #615d5c;
		text-decoration: none;
		outline: none;
	}
	
}

/* Tablet landscape mode, >= 900 px */
@media only screen and (min-width: 56.25em) {

	/* Default font size relative to 16px = 100% standard */
	html {
	    font-size: 100%;
	}

	/* Container for entire workspace. Medium margins */
	.eaicontainer {
		margin-left: 10%;
		margin-right: 10%;
		margin-top: 1%;
		margin-bottom: 0%;
		padding-top: 0%;
		padding-bottom: 1%;
		padding-left: 1%;
		padding-right: 1%;
	}

	/* 12 column grid */
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.67%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.67%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.67%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.67%;}
	.col-12 {width: 100%;}

	/* Social media icons (FB, Twitter) left side of top menu */
	.socmed {
		float: left;
		width: 10%;
	}
	
	/* Facebook link in top menu */
	.fblink {
	    width: 16%;
	    height: auto;
	    margin-right: 40%;
	}
	
	/* Twitter link in top menu */
	.twlink {
	    width: 28%;
	    height: auto;
	}

	/* Top menu right side links, except for sign-in link */
	.blogcolink  {
		padding-right: .63em;
		padding-left: .63em;
		font-size: 1.25em;
		text-decoration: none;
		color: #615d5c;
		outline: none;
	}
	
	/* Top menu right side links, sign-in */
	.signlink  {
		padding-right: 0em;
		padding-left: .63em;
		font-size: 1.25em;
		font-weight: bold;
		color: #615d5c;
		text-decoration: none;
		outline: none;
	}
	
}

/* Desktop mode, >= 1200 px */
@media only screen and (min-width: 75em) {
	/* Container for entire workspace. Fixed at 1000 px width */
	.eaicontainer {
		width: 62.5em;
		margin-left: auto;
		margin-right: auto;
		margin-top: 2%;
		margin-bottom: 5%;
		padding-top: .0%;
		padding-bottom: 1%;
		padding-left: 1%;
		padding-right: 1%;
	}

}
/* END OF THINGS THAT VARY BY SCREEN WIDTH


/* Popup stuff */
/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

/* Enter new password (and confirmation), centered on page */
.pwchangeinput {
	width: 30%;
    margin: 0% 35% 3% 35%;
    padding: 1% 1% 1% 1%;
    text-align: left;
	font-size: 1.25em;
	background: white;
	border: 0.1em solid #385082;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
}