@charset "UTF-8";
/* CSS Document */

body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
}
#tagline {
	font-size: 20px;
	margin-left: 75px;
	float: left;
	margin-top: 30px;
	font-weight: bold;
	color: #006c85;
}
.image-100 {
	height: auto;
	width: 100%;
}
.image-50-right {
	height: auto;
	width: 500px;
	float: right;
	margin-left: 15px;
	margin-bottom: 15px;
}
.image-60-right {
	height: auto;
	width: 650px;
	float: right;
	margin-left: 15px;
	margin-bottom: 15px;
}
.image-40-right {
	height: auto;
	width: 350px;
	float: right;
	margin-left: 15px;
	margin-bottom: 15px;
}
.image-30-right {
	height: auto;
	width: 300px;
	float: right;
	margin-left: 15px;
	margin-bottom: 15px;
}
.image-25-right {
	height: auto;
	width: 200px;
	float: right;
	margin-left: 15px;
	margin-bottom: 15px;
}
.image-40-left {
	height: auto;
	width: 400px;
	float: left;
	margin-bottom: 0px;
	margin-right: 15px;
}
.image-30-left {
	height: auto;
	width: 300px;
	float: left;
	margin-bottom: 0px;
	margin-right: 15px;
}
.image-50-left {
	height: auto;
	width: 500px;
	float: left;
	margin-bottom: 0px;
	margin-right: 15px;
}
.image-25-left {
	height: auto;
	width: 250px;
	float: left;
	margin-bottom: 0px;
	margin-right: 15px;
}
#page-pic {
	width: 100%;
	height: auto;
	min-height: 550px;
	overflow: hidden;
	z-index: 0;
	margin: 0px;
	padding: 0px;
	position: relative;
	background-color: #FFF;
}
#page-pic-taller {
	width: 100%;
	height: auto;
	min-height: 750px;
	overflow: hidden;
	z-index: 0;
	margin: 0px;
	padding: 0px;
	position: relative;
	background-color: #FFF;
}

#page-pic-container {
	display: block;
	background-color: rgba(89, 173, 64, 0.9);
	position: absolute;
	bottom: 0px;
	width: 100%;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

#page-pic h1 {
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	color: #FFF;
	text-align: left;
	font-size: 42px;
	display: block;
	max-width: 1000px;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	line-height: 48px;
}
#page-pic-taller h1 {
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	color: #FFF;
	text-align: left;
	font-size: 42px;
	display: block;
	max-width: 1000px;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	line-height: 48px;
}

#employee-title h1 {
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFF;
	text-align: center;
	display: block;
	background-color: rgba(0, 108, 133, 0.6);
	width: 100%;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
	font-size: 2.5em;
	margin-top:0px;
	margin-bottom:0px;
	
}

#text-container {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 25px;
	padding-top: 0px;
	max-width: 1000px;
}
#intro-text-container {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	padding-top: 0px;
}
#text-container  {
	font-size: 1em;
	line-height: 1.4;
	color: #000;
	}
#text-container h2{
	font-size: 24px;
	color: #458e34;
	margin-top: 0px;
	line-height: 28px;
}	
#text-container a {
	color: rgba(0, 108, 133, 0.8);
}
.footer-container a {
	color: rgba(0, 108, 133, 0.8);
}

	

#page-head {
	background-color: rgba(255, 255, 255, 0.8);
	width: 100%;
	padding-top: 30px;
	padding-bottom: 30px;
	z-index: 99;
	margin-top: 0px;
	position: absolute;
	top: 50px;
}
#head-container {
	width: 90%;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	z-index: 99;
}
#logo {
	float: left;
	height: auto;
	width: 100%;
	max-width: 200px;
	margin-left: 15px;
}
#menu {
	float: left;
	height: auto;
	width: 100%;
	max-width: 1400px;
	right: 0px;
	margin-top: 15px;
}
.home-title {
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	text-transform: uppercase;
	color: #FFFFFF;
	text-align: center;
	line-height: 24px;
	margin-top: 50px;
	width: 100%;
	position: absolute;
	bottom: 100px;
	text-shadow: 0px 0px 12px #000000;
}
.home-theme {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	color: #006c85;	/*text-shadow: 0px 0px 13px rgba(0,0,0,0.75);*/
}

#logo img{
	height: auto;
	width: 100%;
	margin-right: 20px;
}

body, html {
  height: 100%;
}

.bg {
	/* The image used */
	background-image: url(images/homepage-bg.jpg);
	/* Full height */
	height: 100%;
	/* Center and scale the image nicely */
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
.xclear{clear:both;}
.callout h3 {
	color: #006c85;
	font-size: 1.25em;
	margin: 0px;
}
.callout {
	width: 100%;
	box-sizing: border-box;
	margin-top: 15px;
	margin-bottom: 15px;
	float: none;
	margin-left: 0px;
	color: #006c85;
	font-size: 1.5em;
	line-height: 1.75em;
	padding-top: 30px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #458e34;
	border-bottom-color: #458e34;
	font-style: italic;
}

.bg-ceo_letter {
	background-image: url(images/102119-Koppers-Newsoms-HIGHRES-188-Retouch.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.bg-cso_letter {
	background-image: url(images/030818-KoppersLINKWomen-HIGHRES-167-Retouch.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.bg-covid {
	background-image: url(images/Alex-Campbell---department-in-Vance-Al.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.bg-about {
	background-image: url(images/102119-Koppers-Newsoms-HIGHRES-37.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}

.bg-people {
	background-image: url(images/Newsoms-Previews-WEB-5-1.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
.bg-sustain {
	background-image: url(images/Sustain-Strat-copy.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.bg-planet {
	background-image: url(images/102119-Koppers-Newsoms-HIGHRES-332.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.bg-performance {
	background-image: url(images/iStock-1126834532.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.bg-thank {
	background-image: url(images/drew.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.bg-download {
	background-image: url(images/iStock-901134626-brighter.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.bg-gri {
	background-image: url(images/newly-cut-telephone-poles-in-lumberyard-oregon-picture-id501745366.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}


/*tables - taken from last year*/
table {
	border-collapse: collapse;
	border-spacing: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 20px 0 10px;
}
	table tr { border-bottom: 1px solid #E8EDEF;}
	table thead tr { border-color: #333; border-width: 2px;}
	table tr td,  table tr th {
	padding: 11px 0;
	text-align: right;
	vertical-align: top;
}
	table tr td.first,  table tr th.first { text-align: left;}
	th.first.topdog strong {
	font-size: 1em;
}
	
.green { color: #66952e;}	
.left {
	text-align: left;
}
.intro_paragraph {
	font-size: 1.25em;
	font-style: italic;
	line-height: 1.5em;
	color: #006c85;
}
.intro-section {
	background-color: rgba(0, 108, 133, 0.2);
	width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
	margin: 0px;
	font-size: 1.25em;
	font-style: italic;
	line-height: 1.5em;
	color: #006c85;
}
.intro-section p {
	margin: 0px;
}
#text-container ul li {
	padding-bottom: 10px;
}
.footer-wrapper {
	width: 100%;
	padding-top: 15px;
	background-image: url(images/footer2020.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	padding-bottom: 250px;
}
.footer-container {
	width: 90%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	font-size: 0.75em;
}
.footer-left {
	float: left;
	width: 33%;
	text-align: left;
}
.footer-middle {
	float: left;
	width: 33%;
	text-align: center;
}
.footer-right {
	text-align: right;
	float: right;
	width: 30%;
}
.gray-callout {
	background-color: #e5e5e5;
	box-sizing: border-box;
	padding: 15px;
	width: 100%;
}
.blue-callout {
	background-color: #cce2e7;
	box-sizing: border-box;
	padding: 15px;
	width: 100%;
}
.report{
	width: 315px;
	float: left;
	margin-right: 15px;
	margin-bottom: 45px;
	font-size: 0.9em;
	text-align: center;
	line-height: 1.1em;
	}
	
.report p{
	margin-bottom:0px;
	margin-top:0px;}	
	
.report img{
	width: 100%;
	height: auto;
	margin-bottom:5px;
}	
#gri {
	text-align: left;
}
#gri tr td {
	text-align: left;
	vertical-align: top;
	padding: 5px;
	font-size: 12px;
}
#gri tr th  {
	text-align: left;
	font-size: 12px;
	padding: 5px;
}
#gri tr td h3 {
	margin: 0px;
	font-size: 13px;
	line-height: 16px;
}
#gri tr td p {
	margin: 0px;
	line-height: 14px;
}
#topline {
}
.upper {
	text-transform: uppercase;
}

#page-head-pages {
	width: 100%;
	padding-top: 80px;
	padding-bottom: 30px;
	z-index: 99;
	margin-top: 0px;
	background-image: url(images/pages-top.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.sidebar {
	float: right;
	width: 40%;
	background-color: #cce2e7;
	margin-bottom: 15px;
	margin-left: 15px;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 0px;
	padding-left: 15px;
}
.sidebar ul {
	font-weight: bold;
	color: rgba(0,0,0,0.8);
	list-style-image: url(images/yt-icon.png);
}
.sidebar ul li a {
	text-decoration: none;
	color: #000;
}