body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 17px;
	line-height: 21px;
}

a {
	color: $color-blue;
	&:focus {
		text-decoration: none;
	}
}

b, strong { font-family: 'Roboto', sans-serif; font-weight: 500; }

p { margin: 0 0 15px; }


a.dpnglossary {
	&.link {
		border-bottom: 1px dotted $color-blue;
		cursor: help;
		&:hover {
			text-decoration: none;
		}
	}
}

a.internal-link,
a.internal-link-new-window {
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
	&.panel-link {
		text-decoration: none;
	}
}

//a.internal-link {
//	top: 25px;
//	padding-left: 40px;
//	position: relative;
//	@extend .icon-arrow-right-after;
//	&:after {
////		@extend .icon-base-class;
////		content: 'l';
//		display: block;
//		position: absolute;
//		left: 0px;
//		top: -5px;
//		width: 30px;
//		height: 30px;
//		border-radius: 15px;
//		background-color: $color-blue;
//		text-align: center;
//		font-size: 12px;
//		line-height: 30px;
//		color: #fff;
//	}
//}

p {
	margin: 0 0 10px;
	line-height: 1.5;
}

a.panel-deep-link,
a.panel-link {
	padding-left: 17px;
	position: relative;
	text-decoration: none;
	&:before {
		position: absolute;
		left: 0;
		top: 3px;
		font-size: 13px;
		display:inline-block;
		@extend .icon-icon-plus;
		-moz-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
		-moz-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		-o-transform-origin: 50% 50%;
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}
	&:hover {
		text-decoration: underline;
		&:before {
			@include rotate(90deg);
		}
	}
	&:focus {
		text-decoration: none;
	}
}

.email {
 > a {
	 padding-left: 17px;
	 position: relative;
	 &:hover {
		 text-decoration: underline;
	 }
	 &:before {
		 position: absolute;
		 left: 0;
		 top: 4px;
		 font-size: 13px;
		 @extend .icon-icon-plus;
		 -moz-transition: all 0.5s ease;
		 -webkit-transition: all 0.5s ease;
		 -o-transition: all 0.5s ease;
		 transition: all 0.5s ease;
		 -moz-transform-origin: 50% 50%;
		 -ms-transform-origin: 50% 50%;
		 -o-transform-origin: 50% 50%;
		 -webkit-transform-origin: 50% 50%;
		 transform-origin: 50% 50%;
	 }
	 &:hover {
		 &:before {
			 @include rotate(90deg);
		 }
	 }
 }
}

a.external-link-new-window,
a.external-link {
	position: relative;
	@extend .icon-icon-external-link;
	white-space: nowrap;
	&:before {
		font-size: 70%;
		margin-right: 5px;
		text-decoration: none;
		display:inline-block;
	}

}

a.download {
	position: relative;
	white-space: nowrap;
	@extend .icon-icon-download-text;
	&:before {
		font-size: 70%;
		margin-right: 5px;
		display:inline-block;
//		-moz-transition: all 1s ease;
//		-webkit-transition: all 1s ease;
//		-o-transition: all 1s ease;
//		transition: all 1s ease;
//		-moz-transform-origin: 50% 50%;
//		-ms-transform-origin: 50% 50%;
//		-o-transform-origin: 50% 50%;
//		-webkit-transform-origin: 50% 50%;
//		transform-origin: 50% 50%;
	}
//	&:hover {
//		&:before {
//			@include rotate(-135deg);
//		}
//	}
}

a.circle-link,
a.circle {
	margin-top: 25px;
	display: block;
	padding-left: 40px;
	position: relative;
	white-space: nowrap;
	@extend .icon-arrow-right-after;
	border-bottom: 0 !important;
	&:after {
		display: block;
		position: absolute;
		left: 1px;
		top: -2px;
		width: 30px;
		height: 30px;
		border-radius: 15px;
		z-index: 10;
		text-align: center;
		font-size: 12px;
		line-height: 30px;
		color: #fff;
	}
	&:before {
		content: ' ';
		display: block;
		width: 30px;
		height: 30px;
		border-radius: 15px;
		background-color: $color-blue;
		position: absolute;
		left: 0px;
		top: -2px;
		z-index: 5;
	}
	&:hover {
		text-decoration: none;
		&:after {
			-webkit-animation: toRightFromLeft 0.5s forwards;
			-moz-animation: toRightFromLeft 0.5s forwards;
			animation: toRightFromLeft 0.5s forwards;
		}
	}

}

a.arrow-link,
a.arrow {
	position: relative;
	white-space: nowrap;
	@extend .icon-arrow-right-before;
	color: $color-blue;
	&:before {

		display: inline-block;
		color: $color-blue;
		font-size: 70%;
		margin-right: 5px;
	}
	&:hover {
		&:before {
			-webkit-animation: toRightFromLeft 0.5s forwards;
			-moz-animation: toRightFromLeft 0.5s forwards;
			animation: toRightFromLeft 0.5s forwards;
		}
	}
}

hr {
	height: 1px;
	color: #000000;
}

p.paragraph1 {
	background-color: #F66;
}
p.paragraph2 {
	font-size: 24px;
	line-height: 1.5;
	font-style: italic;
	color: $color-blue;
}

td.cell1 {
	color: #C00;
}
td.cell2 {
	color: #069;
}
td.cell3 {
	color: #CCC;
}
tr.cell1 {
	color: #C00;
}
tr.cell2 {
	color: #069;
}
tr.cell3 {
	color: #CCC;
}
table.table1 {
	border:1px solid #C00;
	border-collapse: collapse;
}
table.table2 {
	border:1px solid #069;
	border-collapse: collapse;
}
table.table3 {
	border:1px solid #CCC;
	border-collapse: collapse;
}
span.text1 {
	color: #C00;
}
span.text2 {
	color: #069;
}
span.text3 {
	color: #CCC;
}
p.align-left, h1.align-left, h2.align-left, h3.align-left, h4.align-left, h5.align-left, h6.align-left, td.align-left {
	text-align: left;
}
p.align-center, h1.align-center, h2.align-center, h3.align-center, h4.align-center, h5.align-center, h6.align-center, td.align-center {
	text-align: center;
}
p.align-right, h1.align-right, h2.align-right, h3.align-right, h4.align-right, h5.align-right, h6.align-right, td.align-right {
	text-align: right;
}
.indent {
	padding-left: 30px;
}

h1.batterien,
h1.systemanalyse,
h1.photovoltaik,
h1.brennstoffzellen,
h1.intelligenteenergiesysteme,
h1.regenerativekraftstoffe {
	position: relative;
	padding-top: 55px;
	margin-top: 30px;
	margin-bottom: 50px;
	&:before {
		position: absolute;
		top: 0px;
		left: 0px;
		font-size: 50px;
	}
}

.csc-default {
	float: left;
	width: 100%;
}

h1.photovoltaik {
	&:before {
		@extend .icon-icon-photovoltaik;
	}
}

h1.regenerativekraftstoffe {
	&:before {
		@extend .icon-icon-regenerative-kraftstoffe;
	}
}

h1.batterien {
	&:before {
		@extend .icon-icon-batterien;
	}
}

h1.brennstoffzellen {
	&:before {
		@extend .icon-icon-brennstoffzellen;
	}
}

h1.systemanalyse {
	&:before {
		@extend .icon-icon-systemanalyse;
	}
}

h1.intelligenteenergiesysteme {
	&:before {
		@extend .icon-icon-querschnitt;
	}
}

h3 {
	color: $color-blue;
	font: normal 21px 'Roboto', Arial;
}

h1 {
	font: normal $font-size28 'Roboto', Arial;
	color: $color-blue;
	margin: 12px 0 30px 0;
	@include bp(sm) {
		margin: 12px 0 40px 0;
	}

	> a {
		color: $color-blue;
		text-decoration: none;
		&:focus,
		&:hover {
			text-decoration: none;
		}
	}
}

h2 {
	font-size: 24px;
	line-height: 1.5;
	@include bp(sm) {
		font-size: 30px;
	}

}

img {
	height: auto;
	max-width: 100%;
	width: 100%;
}