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

@font-face {
  font-family: 'article-title';
  src: url('../../fonts/Magistral-Book.woff');
  font-display: swap;
}
@font-face {
  font-family: 'article-ind-text';
  src: url('../../fonts/PublicSans-Regular.otf');
  font-display: swap;
}
@font-face {
  font-family: 'example';
  src: url("../../fonts/ABeeZee-Regular.otf");
  font-display: swap;
}
@font-face {
  font-family: 'title-box';
  src: url("../../fonts/officecodepro-bold.otf");
  font-display: swap;
}
@font-face {
  font-family: 'box-text2';
  src: url("../../fonts/Nunito-SemiBold.woff");
  font-display: swap;
}
@font-face {
  font-family: 'universal';
  src: url('../../fonts/Sansation-R.woff');
  font-display: swap;
}

.blur-up {
	-webkit-filter: blur(4px);
	filter: blur(4px);
	/*transition: filter 400ms, -webkit-filter 400ms;*/
	transition: opacity 1000ms, filter 1500ms, -webkit-filter 1500ms;
}
.blur-up.lazyloaded {
	-webkit-filter: blur(0);
	filter: blur(0);
}

figure, figurecaption {
	margin:0; padding: 0;
}

/* CONTENT --START-- */
#content-container { /*articles & content main page*/
	display:flex; flex-direction: row; flex-wrap:wrap;
	justify-content: space-around;
	margin: 10px 0px; padding:0;
}
#articles-container {
	display:flex; flex-direction: column; flex-wrap:nowrap;
	align-content: center; align-items: center; justify-content: center;
	margin: 10px 0px; padding:0;
}
.tags-art {
	display:block;
	margin: 0px auto 20px auto; padding:3px 0px;
}
.level-tag-art {
  display:block; position:relative; width:100%;
	color:white; background-color:dodgerblue;
  font-size: 15pt; font-weight:bold; text-align:center;
  font-family: 'header-big';
	line-height: 1.5; letter-spacing: 2px;
  margin: 7px auto!important;
}
.type-tag-art {
  display:block; position:relative; width:100%;
	color:white; background-color:orangered;
  font-size: 15pt; font-weight:bold; text-align:center;
  font-family: 'header-big';
	line-height: 1.5; letter-spacing: 2px;
  margin: 7px auto;
}
.skills-tag-art {
  display:block; position:relative; width:100%;
	color:white; background-color:DIMGRAY;
  font-size: 15pt; font-weight:bold; text-align:center;
  font-family: 'header-big';
	line-height: 1.5; letter-spacing: 2px;
  margin: 7px auto;
}
.number-tag {
	display:block; position:relative;
	color:black;
  font-size: 22pt; font-weight:bold; text-align:center;
  font-family: 'header-big';
	line-height: 1; letter-spacing: 2px;
	margin:25px 0 0 0;
}
.italic-text {
  font-style: italic;
}
.uppercase {
	text-transform: uppercase!important;
}
.lowercase {
	text-transform: lowercase!important;
}
.capitalize {
	text-transform:capitalize!important;
}


/* ART-MAT-IND blocks --START-- */
.art-ind {
  position:relative; display:block;
  width:100%; /*min-height:75px;*/
	padding: 20px 0px; margin: 10px auto;
  border-radius: 0 0 12px 12px;
    /*background-color:white;
    -moz-box-shadow: 7px 8px 16px -6px black;
    -webkit-box-shadow: 7px 8px 16px -6px black;
    box-shadow: 7px 8px 16px -6px black;*/
}
.art-ind:first-child {
	margin-top:0px!important;
}
.art-ind:last-child {
	margin-bottom:0px!important;
}
.art-ind-deu {
  border:solid 2px green;
  border-top: 40px solid green;
}
.art-ind-deu-noborder {
  border:solid 2px green;
	border-top: 10px solid green;
}
.art-ind-diy {
  border:solid 2px darkorange;
  border-top: 40px solid darkorange;
}
.art-ind-diy-noborder {
  border:solid 2px darkorange;
	border-top: 10px solid darkorange;
}



.art-ind-lng {
  border:solid 1px dimgray;
  border-top: 40px solid dimgray;
}
.art-ind-eng {
  border:solid 1px red;
  border-top: 40px solid red;
}
.art-ind h3 {
  position: absolute; top: -30px; left: 0;
  margin-left: 30px;
  font-size: 1.2rem; font-family: 'article-title'!important;
  color: white;
  text-transform: lowercase; text-decoration: none;
  letter-spacing: 1.7px;
}

.empty-line {
  text-align:right!important;
}
.gap-3 {
	display:block;
	margin:0px 0px 3px 0px!important;
}
.gap-5 {
	display:block;
	margin-top:5px!important;
}
.gap-10 {
	display:block;
	margin-top:10px!important;
}
.gap-15 {
	display:block;
	margin-top:15px!important;
}
.gap-20 {
	display:block;
	margin-top:20px!important;
}
.gap-30 {
	display:block;
	margin-top:30px!important;
}
.gap-40 {
	display:block;
	margin-top:40px!important;
}
/* ART-MAT-IND blocks --END-- */

/* ART-MAT-IFRAME blocks --START-- */
.art-frame {
  position:relative; display:block;
	width:100%; min-height:100px;
  border-radius: 0px 0px 12px 12px;
  margin:0px auto 10px; padding:0px!important;
  background-color:white!important;
 }
.art-frame-deu {
  border:solid 2px dimgray;
	border-top: 40px solid dimgray;
}
.art-frame-deu-noboarder {
  border:solid 2px dimgray;
	border-top: 10px solid dimgray;
}
.art-frame-diy {
  border:solid 2px darkorange;
	border-top: 40px solid darkorange;
}
.art-frame-diy-noboarder {
  border:solid 2px darkorange;
	border-top: 10px solid darkorange;
}
.art-frame h3 {
  font-size: 1.2rem;
  font-family: 'article-title'!important;
  color: white;
  text-transform: lowercase;
  text-decoration: none;
  letter-spacing: 1.7px;
  position: absolute;
  top: -30px;
  left: 0;
  margin-left: 30px; 
}

.header-5 {
	color:black;
	font-size: 20pt; font-family: 'header-big';
  letter-spacing: 0px; line-height: 1.25;
  text-transform: lowercase; text-align: center;
	margin:10px auto;
}
#header-B {
  color:black;
	font-size: 23pt; font-family: 'header-big';
  letter-spacing: 0.25px; line-height: 1.25;
  text-transform:none; text-align: center;
	margin:0px auto 20px;
}
/* ART-MAT-IFRAME blocks --END-- */




/*  <ARTICLES> STYLES  --START-- */
.a-body {
	position: relative; display: block;
	padding: 0px 20px;
}
.a-body p {
	position: relative; display:block;
  margin:auto 0px;
  font-family: 'article-ind-text'!important;
  font-size: 15pt; line-height: 1.5; font-weight: normal;
  text-align: justify; text-indent: 14px;
  letter-spacing: normal; hyphens: auto;
}
.zho-text {
  font-size: 17pt; line-height: 1.5; font-weight: normal;
}
.a-body p+p {
  margin:10px 0px;
}
.a-body p:first-child {
  margin-top:0px!important;
}
.a-body p:last-child {
  margin-bottom:0px!important;
}
.a-body-first-deu {
	text-indent: 0px!important;
}
.a-body-first-deu:first-letter{
    float: left;
		color:darkgreen;
		font-weight: bold; font-size: 56pt; line-height: 0.7;
    padding: 10px 6px 6px 4px; margin: -15px 0px 0px 0px;
		text-shadow: 4px 4px 2px black;
		border-top: solid 3px darkgreen;
		border-left: solid 3px darkgreen;
}
.a-body-first-diy {
	text-indent: 0px!important;
}
.a-body-first-diy:first-letter{
    float: left;
		color:darkorange;
		font-weight: bold; font-size: 56pt; line-height: 0.7;
    padding: 10px 6px 6px 4px; margin: -15px 0px 0px 0px;
		text-shadow: 4px 4px 2px black;
		border-top: solid 3px darkorange;
		border-left: solid 3px darkorange;
}
.a-body-title {
	display:block; position: relative;
	font-family: 'header-big'!important;
	font-size:20pt;
	margin:30px 0px 10px!important; padding:auto 0px!important;
}
.a-body-title-c {
	text-align:center!important;
}
.a-body-title-l {
	text-align:left!important;
}
.a-body-title-r {
	text-align:right!important;
}

.img_file { /* FILE ICONS */
	display:inline-block; margin:0 auto;
  position:relative;
  width:30px;
	vertical-align:middle;
	transition: all 0.3s ease;
}
.img_file-c { /* FILE ICONS */
	display:block; margin:0 auto;
  position:relative;
  width:50px;
}
.img_file:hover {
	transform: scale(1.1);
	box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.6);
}

.art-link { /* links within the article */
  text-decoration: none;
  color: orangered; font-weight: bold;
	border-bottom: solid 3px orangered;
	transition: all 0.3s ease;
}
.art-link:hover {
  text-decoration: none;
  color: orangered; background-color: white;
	border-bottom:none;
}
.art-link:before, .art-link:after{
  opacity: 0;
  transition: all 0.3s ease;	
}
.art-link:before{
  content: '|'; font-weight: bold;
}
.art-link:after{
  content: '|'; font-weight: bold;
}
.art-link:hover:before{
  margin-right: 5px;
  content: '|'; font-weight: bold;
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  transform: translateX(20px);
  opacity: 1;
}
.art-link:hover:after{
  margin-left: 5px;
  content: '|'; font-weight: bold;
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  transform: translateX(-20px);
  opacity: 1;
}
/* <ARTICLES> STYLES  --START-- */


/* ARTICLE PARTS + RELATED MATERIALS --START-- */
.a-parts {
  display:flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: center; align-content: center;
  margin: 10px auto 30px; width:100%;
}
.a-parts li {
  display:inline-block;
  margin:8px; 
}
.a-parts li a {
  font-family: 'box-text2'; font-size: 14pt;
	font-weight:bold; text-decoration: none;
  padding:2px 8px;
}
.a-parts li a:hover {
  border-radius:8px 8px 0 0;
}
.a-parts-deu li a {
  color:dimgray;
	border-bottom: solid 2px dimgray;
}
.a-parts-deu li a:hover {
  color:white; background-color: dimgray;
}
.a-parts-eng li a {
  color:red;
	border-bottom: solid 2px red;
}
.a-parts-eng li a:hover {
  color:white; background-color: red;
}
.active-part-deu a {
  color:white!important; background-color: dimgray;
  border-radius:8px 8px 0 0;
}
.active-part-eng a {
  color:white!important; background-color: red;
  border-radius:8px 8px 0 0;
}
/* ARTICLE PARTS + RELATED MATERIALS --END-- */

/* RELATED MATERIALS --START-- */
.related-ma {
  position: relative; display:block; min-height: 20px;
  background-color:white;
	margin:10px 0px 0px; padding: 10px 15px;
	border-radius: 8px;
  	/*-moz-box-shadow: 7px 8px 16px -6px black;
  	-webkit-box-shadow: 7px 8px 16px -6px black;
  	box-shadow: 7px 8px 16px -6px black;*/
}
.related-ma-deu {
  border:solid 1px dimgray!important;
  border-top: 40px solid dimgray!important;
}
.related-ma-eng {
  border:solid 1px red!important;
  border-top: 40px solid red!important;
}
.related-ma-crs {
  border:solid 1px darkorange!important;
  border-top: 40px solid darkorange!important;
}
.related-ma h3 {
  position: absolute; top: -33px; left: 0;
  color: white;
  margin-left: 30px;
  font-size: 1.4rem; font-family: 'article-title';
  font-weight: bold; text-transform: uppercase;
  text-decoration: none; letter-spacing: 1px;
}
.related-ma ul {
  margin-left: -25px;
}
.related-ma li {
  font-size:14pt; line-height: 18pt;
  font-weight:500; font-family: "box-text2";
  list-style-type:none;
  padding:4px 0px;
}
.related-ma li+li {
  margin:6pt auto;
}
.related-ma li:before {
  content: "\25c9  ";
	color:dimgray;
}

.related-ma-link {
		font-size:0.9em;
    color:white; background-color: green;
    text-decoration:none;
    margin:auto 2px; padding:0px 5px;
    border-radius:4px; border:solid thin transparent;
}
.related-ma-link:hover{
    color:green; background-color: white;
    border:solid thin dimgray;
}
.related-ma-exrc {
		font-size:0.9em;
    color:white; background-color: #FA6900;
    text-decoration:none;
    margin:auto 2px; padding:0px 5px;
    border-radius:4px; border:solid thin transparent;
}
.related-ma-exrc:hover{
    color:#FA6900; background-color: white;
    border:solid thin #FA6900;
}
/* RELATED MATERIALS --END-- */

/* REFERENCE BLOCK AT THE BOTTOM and IN ACROSS THE TEXT --START-- */
.ref-box {
  position: relative; display:block; min-height: 20px;
  background-color:white;
	border-radius: 8px; border:solid 1px dimgray;
  border-top: 40px solid dimgray;
	margin:20px 0px 15px; padding: 10px 15px;
	 	/*-moz-box-shadow: 7px 8px 16px -6px black;
  	-webkit-box-shadow: 7px 8px 16px -6px black;
  	box-shadow: 7px 8px 16px -6px black;*/
}
.ref-box h3 {
  position: absolute; top: -33px; left: 0;
  margin-left: 30px;
  font-size: 1.4rem; color: white;
  font-family: 'article-title';
  font-weight: bold; text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
}
.reference a {
  color:black;
	font-size:10pt; font-weight:bold;
  margin: 0 1px; padding: 1px 2px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.reference a:hover {
  color:white; background-color:black;
	padding: 1px 2px;
	border-radius:6px;
}

.ref-box-list {
  margin-left: -5px;
}
.ref-box li {
	font-size: 14pt; line-height: 1.5;
	font-weight: 500; letter-spacing: 0px;
  font-family: "box-text2";
}
.ref-box li+li {
  margin:6pt auto;
}
.ref-box .ref-book-name{
    font-family: "box-text2"; font-style: italic;
}
.ref-box li:target {
  color:black; background-color:yellow;
  font-weight:bold;
  margin: 3px 0px; padding:2px 4px;
  border-radius:8px;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-animation: colorchange-reference 12s infinite alternate;
}
.ref-box-link {
  color:white; background-color:dimgray;
  font-size:0.9em; text-decoration:none;
  padding:0px 2px;
  border-radius:4px; border: solid thin transparent;
}
.ref-box-link:hover{
    color:dimgray; background-color:white;
		border: solid thin dimgray;
    text-decoration:none;
}
/* REFERENCE BLOCK AT THE BOTTOM and IN ACROSS THE TEXT --END-- */




@media screen and (max-width : 980px ){
#content-container, #articles-container, .related-ma, .ref-box {
	margin: 10px 0px;
}
}

@media screen and (max-width : 850px ){
#header-B {
	font-size: 20pt;
  letter-spacing: 0.15px; line-height: 1.25;
	margin:0px auto 20px;
}

}
@media screen and (max-width : 690px ){
#content-container, #articles-container, .related-ma, .ref-box {
	margin: 10px 0px;
}
#header-B {
	font-size: 18.5pt;
  letter-spacing: 0px; line-height: 1.2;
	margin:0px auto 20px;
}

}

@media screen and (max-width : 550px ){

#content-container, #articles-container, .related-ma, .ref-box {
	margin: 10px 0px;
}
.header-5 {
	font-size: 19pt; line-height: 1.25;
	text-align: center;
	margin:0px 20px 10px;
}
.art-ind h3 {
  position: absolute; top: -31px; left: 0;
  margin-left: 10px;
  font-size: 1.1rem; font-family: 'article-title'!important;
  color: white;
  text-transform: lowercase; text-decoration: none;
  letter-spacing: 1.4px;
}
.extra-long-thema {
  font-size:13pt!important;
}

.level-tag-art {
  font-size:14pt;
 
  line-height: 19pt;
  font-family: 'header-big';
}

.a-parts li {
  display:block;
  margin:8px;
}

.related-ma ul {
	margin-left:-35px;
}
.related-ma li {
  font-size:13pt; line-height: 1.4;
 	padding:8px 0px;
 }
.related-ma li+li {
  margin:-4pt auto;
}

.ref-box-list {
	margin-left:-15px;
}
.ref-box li {
  font-size:13pt; line-height: 1.4;
 	padding:8px 0px;
}
.ref-box li+li {
  margin:-4pt auto;
}


}

@media screen and (max-width : 365px ){
.header-5 {
	font-size: 17pt;
}
#header-B {
	font-size: 17pt;
	margin:0px auto 15px;
}
.extra-long-thema {
  font-size:11pt!important;
}
.extra-long-thema-box {
  border-top: 50px solid green!important;
}
.art-ind h3 {
  font-family: 'article-title'!important;
  color: white;
  text-transform: lowercase;
  text-decoration: none;
  letter-spacing: 1.4px;
  position: absolute;
  top: -35px;
  left: 0;
  margin-left: 15px; 
}

}