/*---- reset ---*/
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; font-weight: inherit; }

/*---- spacing and layout---*/
.round { border-radius: 6px; }
body {  background: #EEE; background-size: cover; padding: 85px 6px 85px 6px; background-image: url(images/background.webp); background-repeat: no-repeat; background-position: center; background-attachment: fixed; }
hr { color: #aaa; margin-bottom: 26px; margin-top: 22px; }
.container { max-width: 800px; text-align: center; margin: 0px auto; box-shadow: 0 4px 6px 6px rgba(0, 0, 0, 0.1); border-radius: 6px; }
ol, ul { margin-left: 30px; margin-bottom: 16px; margin-top: -10px; }
.element { border-radius: 6px; text-align: left; padding: 8px 18px 18px 18px;  }
h1, h1 a { padding: 8px 0px 18px 0px; }
h2 { margin: 3px 0px 9px 0px; }
h2 span { color: #888; font-size: 80%; padding-left: 15px; }
div.table {  background: rgba(255, 255, 255, 0.8); padding: 20px; border-radius: 6px; border: 1px solid #DDD; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-bottom: 8px;  }
div.table { margin: 25px 0px 10px 0px; }
thead { border-bottom: 2px solid #000; }
tbody tr { border-bottom: 1px solid #CCC; }
th, td { text-align: right; padding-right: 20px; }
td.label { text-align: left; }
td.metric-label { min-width: 145px; }
.metric-label a { display: inline-block; line-height: 1.2; }
.metric-label-line { display: block; white-space: nowrap; }
.logo_name_container { position: fixed; top: 28px; left: 20px; }
.org_name { padding-left: 16px; padding-right: 16px; position: relative; top: -15px; right: 9px; border-radius: 0px 6px 6px 0px; background: rgba(255, 255, 255, 0.8); }
#menu { display: inline-block; position: fixed; top: 31px; right: 25px; width: 20px; cursor: pointer; }

.searchicon { display: inline-block; position: fixed; top: 31px; right: 70px; height: 26px; cursor: pointer; }
.close_search { display: none; position: fixed; top: 35px; right: 77px; width: 15px; cursor: pointer; z-index: 10; filter: grayscale(100%); opacity: 0.5; }

#menucontent { padding-left: 30px; padding-top: 100px; background: rgba(255, 255, 255, 0.96); height: 100vh; width: 300px; z-index: 1000; position: fixed; top: 0; right: -80vw; box-shadow: 0 4px 6px 6px rgba(0, 0, 0, 0.1); transition: right 0.1s linear 0s; }
#menucontent h2 { margin-bottom: 24px; }
#menucontent a { font-weight: 400; color: #333; }
#closemenu { width: 19px; position: absolute; top: 32px; right: 27px; cursor: pointer; }
.starimage { height: 24px; padding-left: 10px; }
.show { display: block; }
.intro { margin-bottom: 50px; margin-top: 42px; max-width: 500px; }
.error { margin: -16px 0px 25px 0px; border: 1px solid red; background-color: pink; padding: 20px; border-radius: 6px; }
.get_started { height: 30px; }
.box { background: #FFF; padding: 20px 25px 20px 25px; margin: 0px 0px 24px 0px; border-radius: 6px; }
.box h2 { margin-bottom: 21px; }
.left { padding-right: 10px; }
.emb { margin-bottom: 33px; }
.lead { margin-bottom: 7px; }
.share-intro { margin-bottom: 13px; }
.mobile_only { display: auto; }
.hidden_by_default { display: none; }
.toggle { margin-top: 20px; }

/*--- images ---*/
.add { height: 15px; padding-right: 6px; position: relative; top:2px; }

/*--- fonts ---*/
body { font-family: 'Titillium Web', sans-serif; color: #333; font-weight: 400; line-height: 140%; font-size: 16px; }
h1 { font-weight: 700; font-size: 34px; letter-spacing: -1px; line-height: 100%; }
h1.fp { font-size: 50px; margin: 150px 0px 30px 0px; }
h2 { font-weight: 700; font-size: 23px; }
p { text-align: left; margin-bottom: 16px; line-height: 125%; }
.share-intro { line-height: 130%; }
.footer { text-align: center; }
.org_name { font-weight: bold; font-size: 18px; }
span.tag { text-decoration: none; color: #FFF; padding: 4px; font-size: 20px; }
.media_count { text-align: center; }
a.delete { color: #1d5443; }
#promo { display: none; }
.error p { font-size: 16px; margin-bottom: 5px; line-height: 110%; }
strong { font-weight: 700; }
.get_started {  color: #000; }
a { color: #000; text-decoration: none; font-weight: 400; text-decoration: none; }
a:hover { text-decoration: underline; }
.colon { font-size: 22px; font-weight: 700; padding: 0px 6px; }
.right { text-align: right; padding-right: 0 !important; }
.name { font-weight: 700; font-size: 22px; color: #000; padding-bottom: 20px; }
.small { font-size: 15px; color: #555; padding-right: 6px; position: relative; top: 3px; }
a.logo_name_container span.logo { font-size: 30px; color: #FFF; font-weight: bold; text-shadow: -0.2px -0.2px 0 #000, 
    0.2px -0.2px 0 #000, 
    -0.2px 0.2px 0 #000, 
    0.2px 0.2px 0 #000;
 }
form {
    display: flex;
  flex-wrap: wrap;

    justify-content: space-between;
    max-width: 100%; /* Adjust the width as needed */
    align-items: flex-end;
    margin: auto;
	margin-bottom: 16px;
}
.getinput {
    flex: 0 0 33.33%;
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%; /* Ensures each span takes the appropriate amount of space */
}

#exp_form input[name="button"] {
    margin-top: 10px;
}

.toggle {  }
.toggle-link { text-transform: uppercase; font-size: 14px; color: #333; border-radius: 6px; border: 1px solid #333; padding: 2px 10px; }
.toggle-link:hover { text-decoration: none; background: rgba(255, 255, 255, 0.8); }
.getinput label .small { font-size: 12px; position: relative; left: 0px; }

a.list {
  display: block;
  text-decoration: none;
}

.list p {
  margin: 9px -11px;
  padding: 10px;
  border: 1px solid transparent;
  line-height: 23px;
  background-color: transparent;
  transition: none;
}

a.list:hover p,
a.list:focus-visible p {
  border-color: #999;
  background-color: #fff;
}

a.list:hover { text-decoration: none; }
.mute_link { text-decoration: underline; color: #555; }
.mute_link:hover { color: #000; }
/*--- color ---*/
.transp { background: rgba(255, 255, 255, 0.8); }

/*--- form ---*/
input, .button, select { font-family: 'Titillium Web', sans-serif; border-radius: 6px; font-size: 15px; width: calc(100% - 5px); font-weight: 400; text-decoration: none; margin-right: 5px; }
input { padding: 4px 7px; border: 1px solid #777; }
select { padding: 4px 4px 4px 4px; color: #333; border-radius: 6px;  }
.getinput select { flex-grow: 2 }
option { font-size: 12px; }
.button { background: #008000; transition: background 0.3s ease; color: #FFF !important; padding: 4px 21px 4px 16px; margin-right: 0; }
.button:hover { background: #02a502; transition: background 0.3s;  }
.button:active { background: greenyellow; transition: background 0.3s ease; }
.searchfield { display: none; position: fixed; top: 27px; right: 61px; width: 40%; }


/*--- large screen ---*/
@media screen and (min-width: 768px) {
	body { font-size: 22px; }
	input, .button, select { 
		border-radius: 6px; 
		font-size: 20px; 
		font-weight: 700; 
		text-decoration: none; 
		margin-right: 5px; 
	}
	h1 { 
		font-size: 40px; 
		margin: -3px 0px 3px 0px; 
	}
	h1.fp { 
		font-size: 80px;  
	}
    .org_name { 
		font-size: 18px; 
	}
	#promo, #promo a { 
		display: inline; 
		font-weight: 700; 
		font-size: 15px; 
		text-decoration: none; 
		color: #aaa;  
		position: fixed; 
		bottom: 0px; 
		right: 5px; 
	}
	
.getinput {
    flex: 0 0 14.2857%;
}

	#exp_form input[name="button"] {
		margin-top: 0;
	}

	.getinput label .small { 
		left: 8px; 
		font-size: 15px; 
	}
	option, select { 
		font-weight: 400; 
		font-size: 15px; 
	}
	.element { 
		padding: 28px 50px 50px 50px; 
	}
	select { 
		padding: 7px 4px;   
	}
	.button { 
		padding: 4px 24px; 
	}
	.hovereffect { 
		margin: 0; 
		padding: 300px 0px; 
	}
	td.label { 
		min-width: 250px; 
	}
	.mobile_only { 
		display: none; 
	}
	.metric-label a {
		white-space: nowrap;
	}
	.metric-label-line {
		display: inline;
	}
	.metric-label-line + .metric-label-line::before {
		content: " ";
	}
	
	.searchfield { top: 22px; right: 61px; max-width: 275px; }

	
}