@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/Inder.woff');
  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-text';
  src: url("../../fonts/Nunito-SemiBold.woff");
  font-display: swap;
}

.LeCo_logo {
  display:block; position:relative;
  width:500px; /*height:400px;*/
  margin:0px auto;
}
.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);
}

#articles-container {
	display:flex;	flex-direction: row;
	flex-wrap:wrap;	justify-content: space-around;
	margin: 5px 40px 0px;
	min-height:100vh!important;
}

/* art-mat nests MATERIALS_DEU/_ENG, ARTICLES_DEU/_ENG  --START-- */
.art {
  position:relative; display: inline-block;
	flex:1 0 45%;
	min-height: 250px; min-width: 350px;
	margin:30px 8px;
  background-color:#F2F2F2;
  border:solid 1px none; border-radius: 8px;
  border-left:solid 40px transparent;
		-moz-box-shadow: 7px 8px 16px -6px black;
		-webkit-box-shadow: 7px 8px 16px -6px black;
		box-shadow: 7px 8px 16px -6px black;
}
.art:hover {
	background-color:whitesmoke;
  transform:scale(1.01); transition: ease-in 0.15s;
  	-webkit-transform:scale(1.01);
  	-moz-transform:scale(1.01);
  	-ms-transform:scale(1.01);
  	box-shadow: none;
}
.art:nth-last-of-type(1):nth-child(odd) .a-img {
	display:block; position:relative;
	width:50%!important; margin: 0 auto!important;
}

.art-deu {
  border-left:solid 1px DIMGRAY!important; border-bottom:solid 1px DIMGRAY!important;
  border-left:solid 40px DIMGRAY!important;
}
.art-deu:hover {
  border:solid 1px green!important;
	border-left:solid 40px green!important;
}
.art-diy {
  border-left:solid 1px DIMGRAY!important; border-bottom:solid 1px DIMGRAY!important;
  border-left:solid 40px DIMGRAY!important;
}
.art-diy:hover {
  border:solid 1px darkorange!important;
	border-left:solid 40px darkorange!important;
}

.art h3 {
	position: absolute; bottom: 0; left: 0;
  margin-left: -32px;
  font-family: 'article-title'; font-size: 1.2rem;
  color: white;
  letter-spacing: 0.8px; text-transform: lowercase;
		-webkit-transform: rotate(270deg);
		-moz-transform: rotate(270deg);
		-ms-transform: rotate(270deg);
		-o-transform: rotate(270deg);
		transform: rotate(270deg);
		-webkit-transform-origin: 0 0;
		-moz-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		-o-transform-origin: 0 0;
		transform-origin: 0 0;
}

/* text of the articles in the nest --START-- */
.a-text {
	padding: 40px 12px 30px!important;
}
.a-img {
	display:block; position:relative;
	width:100%;
	z-index:10;
}
.a-img-link {
	position:relative;
	outline: none; text-decoration: none;
}
.a-link-img {
	display:block; margin-right: 5px;
	width:32px;
}
.a-text h1 {
	text-align:right;
	font-family: 'article-ind-text';
  font-size: 22pt; line-height: 1.25;
	margin: 0px;
}
.a-text h2 {
	text-align:right;
	font-family: 'article-ind-text';
  font-size: 18pt; line-height: 1.2;
	margin: 0px 0px 10px 0px;
	text-transform: lowercase;
}
.a-text p {
  font-family: 'article-ind-text'!important;
	text-align:justify!important;
	font-size: 15pt!important; line-height: 1.25; font-weight: normal;
  letter-spacing: 0px; text-indent: 14px;
	
	overflow-wrap: break-word;
  word-wrap: break-word;
	
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
	
	-webkit-hyphenate-limit-before: 3; /* For Safari */
  -webkit-hyphenate-limit-after: 2; /* For Safari */
  -ms-hyphenate-limit-chars: 6 3 2;
	hyphenate-limit-chars: 6 3 2;
	
	-webkit-hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-last: always;   
  -webkit-hyphenate-limit-zone: 8%;
	hyphenate-limit-lines: 2;   
  hyphenate-limit-last: always;
  hyphenate-limit-zone: 8%;
	
	-ms-word-break: normal;
  word-break:normal;
	white-space: normal;
}


p.first-paragraph-deu:first-letter {
  font-weight:bold; font-size:24pt;
  color:white; background-color: darkgreen;
  padding:0 6px 0 6px; margin-right:3px;
  border-top: solid 3px darkgreen;
	border-left: solid 3px darkgreen;
	border-radius: 8px 0 8px 0;
}
p.first-paragraph-diy:first-letter {
  font-weight:bold; font-size:24pt;
  color:white; background-color: darkorange;
  padding:0 6px 0 6px; margin-right:3px;
  border-top: solid 3px darkorange;
	border-left: solid 3px darkorange;
	border-radius: 8px 0 8px 0;
}

/* text of the articles in the nest --END-- */


.a-No {
  display:block; width:150px;
  position:absolute; top:0; right:0;
  padding:8px auto;
  font-size: 12pt; font-weight: bolder;
	font-family: 'article-title';
	text-align: center;
	letter-spacing: 0.7pt;
	border-radius: 0px 8px 0px 8px;
}
.a-No-eng {
  background-color: red!important;
}
.a-No-deu {
  background-color: DIMGRAY!important; color:white;
}
.a-No-lng {
  background-color: grey!important;
}
.a-No-crs {
  background-color: darkorange!important;
}

.tags {
  display: block; position:absolute;
	margin-top:-25px;
	z-index:100;
}
.level-tag {
	display: inline-block;;
	background-color:dodgerblue; color:white;
  font-size: 13pt; line-height: 1.5;
	font-family: 'header-big'; font-weight:bold;
	letter-spacing: 1px;
  padding: 0 10px; margin:0px 0px 4px -12px;
	border-radius: 0px 6px 6px 0px;
}
.type-tag {
	display: inline-block;
	background-color:orangered; color:white;
  font-size: 13pt; line-height: 1.5;
	font-family: 'header-big'; font-weight:bold;
	letter-spacing: 1px;
	padding: 0 10px; margin:0px 0px 6px -12px;
	border-radius: 0px 6px 6px 0px;
}


.moreless {
	position:absolute; right:-8px; bottom:-8px;
	color:DARKSLATEGRAY; background-color:white;
	font-family: 'moreless';
	font-weight:normal!important; font-size:16pt;
	font-style: normal!important;
	padding: 0px 6px;
	border-radius:8px; border:solid 1.5px DARKSLATEGRAY;
}
.moreless:hover {
	background-color:DARKSLATEGRAY; color:white;;
}

.show-more-btn {
	display: block; width:140px;
	background-color:green; color:white;
	margin:10px auto 0px auto; padding:0 6px;
	border:0; cursor:pointer;
	font-family: 'moreless'; font-size:16pt; font-weight: 700;
	text-align: center; letter-spacing: 1px; line-height: 1.5;
	transition:color .25s ease;
	border-radius:24px; border: solid 1px green;
}
.show-more-btn:hover {
	background-color:white; color:green;
	transition: background-color .25s cubic-bezier(0.45, 0, 0.55, 1) 0s;
}
.show-more-btn_diy {
	display: block; width:140px;
	background-color:darkorange; color:white;
	margin:10px auto 0px auto; padding:0 6px;
	border:0; cursor:pointer;
	font-family: 'moreless'; font-size:16pt; font-weight: 700;
	text-align: center; letter-spacing: 1px; line-height: 1.5;
	transition:color .25s ease;
	border-radius:24px; border: solid 1px darkorange;
}
.show-more-btn_diy:hover {
	background-color:white; color:darkorange;
	transition: background-color .25s cubic-bezier(0.45, 0, 0.55, 1) 0s;
}

.read-btn {
	display: flex; flex-direction: row; flex-wrap: nowrap; width:65%;
	justify-content: center;
	position:absolute; right:0; left:0; bottom:-38.5px;
	text-decoration: none;
	background-color:DIMGRAY; color: white;
	margin:0px auto; padding:1px 6px;
	cursor:pointer; transition:color .25s ease;
	font-family: 'moreless'; font-size:17pt; font-weight: 700;
	text-align: center; letter-spacing: 0.5px;
	border-radius:0 0 16px 16px; border: solid 2px transparent;
}
.read-btn-deu:hover {
	background-color:green; color:white;
	transition: background-color .25s cubic-bezier(0.45, 0, 0.55, 1) 0s;
}
.read-btn-diy:hover {
	background-color:darkorange; color:white;
	transition: background-color .25s cubic-bezier(0.45, 0, 0.55, 1) 0s;
}



.br-1100 {
	display:none;
}
/* art-mat nests MATERIALS_DEU/_ENG, ARTICLES_DEU/_ENG  --END-- */


@media screen and (max-width : 1250px ){
#articles-container {
	margin: 5px 30px 0px;
}
.tags {
  position:relative!important;
	margin-top:-35px!important;
}
.a-img {
	position: relative;
	margin-top:-5px!important;
}
}


@media screen and (max-width : 1100px ){
.br-1100 {
	display:inline-block;
}
#articles-container {
	margin: 5px 25px 0px;
}
.art:nth-last-of-type(1):nth-child(odd) .a-img {
	display:block; position:relative;
	width:75%!important; margin: 0 auto!important;
}
.a-text h1 {
	text-align:right;
  font-size: 21pt; line-height: 1.15;
	margin: 0 0 10px 0;
}
.a-text p {
 	text-align:justify!important;
	font-size: 14pt!important; line-height: 1.25;
  text-indent: 14px;
}

p.first-paragraph-deu:first-letter {
  font-size:22pt;
  padding:0 5px 0 5px; margin-right:3px;
}

}


@media screen and (max-width : 850px ){
#articles-container {
	margin: 5px 10px 0px;
}
.art {
 	min-width: 350px; min-height: 200px;
}
.art:nth-last-of-type(1):nth-child(odd) .a-img {
	display:block; position:relative;
	width:100%!important; margin: 0 auto!important;
}

.br-1100 {
	display:none;
}
.a-text h1 {
	text-align:right;
  font-size: 22pt; line-height: 1.25;
	margin: 0 0 10px 0;
}
.a-text p {
 	text-align:justify!important;
	font-size: 15pt!important; line-height: 1.25;
  text-indent: 0px;
}

p.first-paragraph-deu:first-letter {
  font-size:23pt;
  padding:0 5px 0 5px; margin-right:3px;
}

}


@media screen and (max-width : 690px ){
#articles-container {
	margin: 5px 0px 0px;
}

p.first-paragraph-deu:first-letter {
  font-size:22pt;
}

}


@media screen and (max-width : 550px ){
.a-text h1 {
	text-align:right;
  font-size: 20pt; line-height: 1.2;
	margin: 0 0 10px 0;
}
.a-text p {
 	text-align:justify!important;
	font-size: 14pt!important; line-height: 1.25;
  text-indent: 0px;
}

p.first-paragraph-deu:first-letter {
  font-size:21pt;
  padding:0 5px 0 5px; margin-right:3px;
}
}