/**
* based on Iulian's work, later found on bootstrap 4
* v0.1
*/
.pt-0 {padding-top:0px!important;}
.pt-5 {padding-top:5px;}
.pt-10 {padding-top:10px;}
.pt-20 {padding-top:20px;}
.pt-40 {padding-top:40px;}

.pl-4 {padding-left:4px;}
.pl-5 {padding-left:5px;}
.pl-10 {padding-left:10px;}
.pl-15 {padding-left:15px;}
.pl-20 {padding-left:20px;}
.pl-30 {padding-left:30px;}
.pl-40 {padding-left:40px;}

.pr-4 {padding-right:4px;}
.pr-5 {padding-right:5px;}
.pr-10 {padding-right:10px;}
.pr-15 {padding-right:15px;}
.pr-20 {padding-right:20px;}
.pr-30 {padding-right:30px;}

.pr-10 {padding-right:10px;}
.pr-15 {padding-right:15px;}
.pr-20 {padding-right:20px;}
.pr-30 {padding-right:30px;}

.pb-10 {padding-bottom:10px;}
.pb-15 {padding-bottom:15px;}
.pb-20 {padding-bottom:20px;}
.pb-30 {padding-bottom:30px;}

.p-4 {padding:4px;}
.p-5 {padding:5px;}
.p-10 {padding:10px;}
.p-20 {padding:20px;}
.p-30 {padding:30px;}

.mlr-auto {margin-left:auto; margin-right:auto;}

.ml-5 {margin-left:5px;}
.ml-10 {margin-left:10px;}
.ml-15 {margin-left:15px;}
.ml-20 {margin-left:20px;}
.ml-30 {margin-left:30px;}
.ml-40 {margin-left:40px;}

.ml-13 {margin-left:-13px;}
.ml-15 {margin-left:-15px;}

.mr-10 {margin-right:10px;}
.mr-20 {margin-right:20px;}
.mr-30 {margin-right:30px;}
.mr-40 {margin-right:40px;}
.mr-50 {margin-right:50px;}
.mr-60 {margin-right:60px;}

.mt-5 {margin-top:5px;}
.mt-10 {margin-top:10px;}
.mt-15 {margin-top:15px;}
.mt-20 {margin-top:20px;}
.mt-25 {margin-top:25px;}
.mt-30 {margin-top:30px;}
.mt-40 {margin-top:40px;}
.mt-45 {margin-top:45px;}
.mt-60 {margin-top:60px;}
.mt-90 {margin-top:90px!important;}
.mt-120 {margin-top:120px!important;}

.mb-4 {margin-bottom:4px;}
.mb-5 {margin-bottom:5px;}
.mb-10 {margin-bottom:10px;}
.mb-15 {margin-bottom:15px;}
.mb-20 {margin-bottom:20px;}
.mb-30 {margin-bottom:30px!important;}
.mb-40 {margin-bottom:40px;}

.m-5 {margin:5px;}
.m-7 {margin:7px;}
.m-10 {margin:10px;}
.m-15 {margin:15px;}
.m-20 {margin:20px;}
.m-auto{margin:auto;}

.v-spacer10 {height:10px;width:100%;}
.v-spacer20 {height:20px;width:100%;}

.v-center {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.d-mark-1{ border:1px solid red;}
.d-mark-2{ border:1px solid blue;}
.d-mark-3{ border:1px solid green;}
/*thanks to (c)https://codepen.io/nilsynils/pen/KgaRBo?editors=1100*/
.nb-truncate-3{
	position: relative;
	height: 3.6em; 
	overflow: hidden;
}

.nb-truncate-3:after{
	content: "";
	text-align: right;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50%;
	height: 3.6em;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 80%);
}

.nb-truncate-4{
	position: relative;
	height: 6em; 
	overflow: hidden;
}

.nb-truncate-4:after{
	content: "...";
	text-align: right;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50%;
	height: 1.2em;
	/*background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(212,206,212, 1) 80%);*/
}
@supports (-webkit-line-clamp: 2) {
	.nb-truncate-3{
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 0 auto;
		display: -webkit-box;
	}

	.nb-truncate-3:after {
		content: "...";
		position:relative;
	}

	.nb-truncate-4{
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 0 auto;
		display: -webkit-box;
	}
	.nb-truncate-4:after {
		content: "...";
		position:relative;
	}
}