h1 {
	margin: 15px 0px 10px 0px; 
	font-size: 30px; 
	font-family: 'Roboto';
	font-weight: bold;
}

h1:after {
	content: '';
	display: block;
	background: #3d7811; 	/* colhl */
	height: .15em;
	max-width: 1.2em;
	width: 100%;
	margin-top: 7px;
}

h2 {
	margin: 10px 0px 5px 0px; 
	font-weight: bold;
	font-size: 22px;
	font-family: 'Roboto Condensed';
}

h3 {
	margin: 7px 0px 3px 0px; 
	font-size: 22px; 
	font-family: 'Roboto';
	font-weight: bold;
	color: #3d7811; 	/* colhl */
}

h4 {
	margin: 7px 0px 3px 0px;
	font-size: 17px;
	font-weight: bold;
	color: #7f7f7f; 	/* colbg:-128 */
}

body {
	line-height: 1.3;
	font-family: 'Raleway', serif;
	margin: 0;
	font-size: 16px;
	color: #1a1a1a; 		/* colfg */
	background-color: #fff;	/* colbg */
	overflow-x: hidden;
}

a {
	color: #3d7811;	/* colhl */
}

a:hover {
	color: #1d5800;	/* colhl:-32 */
}

h2 a {
        text-decoration: none;
        border-bottom: 3px solid #3d7811; /* colhl */
}

h2 a:hover {
        text-decoration: none;
        border-bottom: 3px solid #1d5800; /* colhl:-32 */
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 6px dotted #222; /* colbg:-128 */
	margin: 1em 0;
	padding: 0; 
}

hr.bold {
	border-top: 5px solid #3d7811; /* colhl */
}

.spacer {
	display: block;
	margin: 0 auto;
	max-width: 980px;
	padding: 48px 4px 80px 4px;
	position: relative;
	overflow:auto;
	background: #fff;	/* colbg */
    height: 100%;
}

.content-wrap {

/* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

/*  -ms-word-break: break-all; */
  /* This is the dangerous one in WebKit, as it breaks things wherever */
/*  word-break: break-all; */
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.content a {
	position: relative;
	font-weight: bold;
	text-decoration: none;
	color: #3d7811;		/* colhl */
}

.content a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: -2px;
	left: 0;
	background-color: #3d7811;	/* colhl */
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

.content a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	bottom: 1.2em;
}

.content a::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: -2px;
	left: 0;
	display: block;
	background-color: #3d7811;	/* colhl */
	-webkit-transform: scaleX(0.8);
	transform: scaleX(0.8);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

.content a:hover:after {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	width: 100%;
}

.content p {
	font-size: 16px;
	text-align: justify;
	padding-bottom: 7px;
}

.content p::first-letter {
	font-size: 130%;
}

.center {
	text-align: center;
}

.content ul {
	font-size: 16px;
	list-style: none;
	padding:0;
	margin:0;
}

.content li { 
	padding: 5px 0px 7px 5px;
	padding-left: 1.3em;
	text-indent: -1.3em;
}

.content li:before {
	content: "\2023";
	font-family: 'Roboto';
	font-weight: bold;
	color: #3d7811; 		/* colhl */
	margin-right: 14px;
	padding-top: 45px;
	font-size: 1.8em;
}

.hide { display: none; }

.e-mail:before {
	content: attr(data-website) "\0040" attr(data-user);
	unicode-bidi: bidi-override;
	direction: rtl;
}

@media (min-width: 700px) {
	h1 { margin: 20px 0px 15px 0px;	font-size: 35px; }
	h2 { margin: 10px 0px 10px 0px; font-size: 26px; }
	.content ul { font-size: 18px; }
	.content p { font-size: 18px; }
}

@media (min-width: 990px) {
	.spacer {
        padding: 150px 10px 120px 10px;
        box-shadow: 0px 0px 10px #777;
    }
}

h2 a {
    white-space: normal;
}