:root {
	--bg-gray:#f8f8f8;
	--bg-red:#c62641;
	--bg-blue:#667BFF;
	--bg-green:#26C756;
	--bg-yellow:#FFDF66;
	
	--bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;			--z-Header:50;	--z-CoverLetter:-1;	--z-CovImg:-2;	
}
*, *::after, *::before{
	margin:0px;
	padding:0px;
	box-sizing:border-box;
	border:0px;
    outline:none;
    list-style:none;
	font-family:'Roboto Condensed',Arial;
}
a {
    cursor:pointer;
    text-decoration: none;
}
img{
    border:0;
	outline:none;
}
h1{
    margin: 8px 0px 46px 0px;
    text-align:center;
    letter-spacing: -.05rem;
}
h2{
    font-size: 1.875rem;
    line-height: 2.3rem;
    margin:35px 0 15px 0;
}
h3{
    font-size:1rem;
    line-height:1.5rem;
}
p,li{
    font-size:1.25rem;
    letter-spacing: .01rem;
    font-weight:300;
}
@media (max-width: 575.98px) {
	 h1{
        font-size: 3rem;
        line-height: 3.2rem;
    }
    p,li{
        line-height:1.6rem;
    }
}
@media (min-width: 576px) {
	h1{
        font-size: 4rem;
        line-height: 4.5rem;
    }
    p,li{
        line-height:1.875rem;
    }
}
.row{
		--bs-gutter-x:0;
}

/* //////////////////// BAS: PageBar Section //////////////////// */
.pagebar-box{
    position:fixed;
    top:0px;
    left: 0px;
    z-index:400;
}
.pagebar-bg{
    width:100%;
    height:7px;
    background:#42B6F3;
}
.pagebar span{
    display: block;
    height:100vh;
    background: linear-gradient(90deg,  var(--ok-lgray10) 0%,  var(--ok-red10) 100%);
    transition:.2s;
}
/* //////////////////// BIT: PageBar Section //////////////////// */
/* //////////////////// BAS: Header Section //////////////////// */
.header{
	position:relative;
	z-index:var(--z-Header);
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}
header .container{
	padding:30px 0;
}
.header .logo img{
	width:70px;
}
.nav{
	justify-content:flex-end;
	align-self:center;
}
.nav span{
	display:block;
	cursor:pointer;
	padding:14px;
	transition:all .2s ease-in-out;
	transform:rotate(0deg);
}
.nav span:hover{
	transform:rotate(90deg);
}
.nav i{
	font-size:1.5rem;
	color:var(--bs-white);
}
/* //////////////////// BIT: Header Section //////////////////// */

/* //////////////////// BAS: Container Section //////////////////// *//* ---------- Bas: Cover Section ---------- */
.cover{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display:flex;
	flex-wrap:wrap;
	background:var(--bg-red);
	align-items:center;
	justify-content:center;
}
.cover [class*="col"], .footer [class*="col"]{
	text-align:center;
}
.cover .link a{
	height:100vh;
	display:flex;
	align-items:center;
}
.cover .link a i{
	color:var(--bs-dark);
	font-size:16rem;
	opacity:.2;
	transform:scale(.01);
	transition: all .2s ease-in-out;
}
.cover .link a:hover i{
	transform:scale(1);
}.cov-img{	position:absolute;	top:0px;	height:100%;	z-index:var(--z-CovImg);}.cov-img img{	height:100%;	width:auto;}.cov-img:after{    content: "";    position: absolute;    left: 0;    top: 0;    height: 100%;    width: 100%;	background: rgba(0,0,0,0.6);    z-index:2;}
@media (max-width: 991.98px) {
	.cover .link{
		display:none;
	}
}
@media (min-width: 576px) and (max-width: 1199.98px) {
	.cover .link a i{
		font-size:10rem;
	}
}
.cover-letter{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size:36rem;
	font-weight:600;
	line-height: 1.2;
    color: rgba(0,0,0,.1);
    text-transform: uppercase;
	z-index:var(--z-CoverLetter);
}
.cover-content h1{
	color:var(--bs-white);
	text-transform:uppercase;
	transition: all .2s ease-in-out;
	text-shadow: 0 5px 10px rgb(0 0 0 / 30%);
}
.cover-info{
	display:flex;
	justify-content:center;
	align-items:center;
	padding-top:5px;
	font-size:1rem;
}
.cover-info, .cover-info a{
	color:var(--bs-white);
	text-decoration:none;
	padding-bottom:3px;
	transition: all .2s ease-in-out;
}
.cover-info a:hover{
	border-bottom:1px solid;
}
.cover-info .category::before{
	content:"/";
}
.cover-info .category{
	padding-left:5px;
}
@media (max-width: 575.98px) {
	.cover-letter{
		display:none;
	}
	.cover-content h2{
		font-size:2rem;
	}
	.cover-info{
		font-size:.9rem;
	}
}/* ---------- Bit: Cover Section ---------- */
/* ---------- Bas: Container Section ---------- */
.container-box{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	width:100%;
	margin-top:100vh;
	background:var(--bg-gray);
}
main .container{	display:flex;	justify-content:center;
	margin-top:-100px;
	margin-bottom:80px;
	background:var(--bs-white);
	box-shadow: 0 30px 50px 0 rgb(1 1 1 / 15%);
}/* ----- Bas: Post ----- */.post-head{	margin-top:1rem;	padding:2rem;	position:relative;	text-transform:uppercase;	text-align:center;}.post-head:after {    content: "";    height: 1px;    width: 50px;    position: absolute;    bottom: 0;    left: 50%;    margin-left: -25px;    background:var(--bs-gray-400);}.post-box{	width:100%;	display:flex;	flex-wrap:wrap;	justify-content:center;}.post{	max-width:100%;	padding:70px 50px;	display:flex;	flex-direction:column;	justify-content:center;	text-align:center;	position:relative;}.post-header{	text-transform:uppercase;}.post-header a{	color:var(--bs-gray-dark);	font-weight:bold;	font-size:1.5rem;	line-height:2rem;	letter-spacing:.7;}.post-datum{	margin-top:0.8rem;	color:var(--bs-gray-600);	font-size:1rem;	line-height:1.25rem;}.post-header,.post-datum{	z-index:5;}.post-letter{	position:absolute;	top: 50%;    left: 50%;    transform: translate(-50%,-50%);	color:var(--bs-gray-600);	opacity:0.1;	font-size:15rem;}/* ----- Bit: Post ----- *//* ----- Bas: Artikel ----- */
.article{
	position:relative;
}
@media (max-width: 575.98px) {
	main .container{
		margin-top:0px;
	}
	.article{
		padding: 2.6rem 8% 4rem;
	}
	.article-datum{
		display:none;
	}
}
@media (min-width: 576px) {	.post-head{		margin-top:1.25rem;		padding:2.5rem;		font-size:1.25rem;	}	.post{		max-width:50%;		padding:110px 50px;	}	.post-header a{		font-size:1.5rem;		line-height:2rem;		letter-spacing:.7;	}		.post-datum{		font-size:1rem;		line-height:1.25rem;	}	.post-letter{		font-size:18rem;	}		
	.article{
		padding: 7rem 14%;
	}
	.article-datum{
		right:.5rem;
	}
	.article-datum span{
		font-size:2rem;
		line-height:2rem;
	}

}
@media (min-width: 1200px) {	.post-header a{		font-size:2rem;		line-height:2.5rem;		letter-spacing:.7;	}		.post-datum{		font-size:1.2rem;		line-height:1.5rem;	}	.post-letter{		font-size:22rem;	}
	.article{
		padding: 10rem 14% 7rem;
	}
	.article-datum{
		right:2rem;
	}
	.article-datum span{
		font-size:3rem;
		line-height:3rem;
	}
}
.article-datum{
	position:absolute;
	top:5rem;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
    text-transform: uppercase;
}
.article-datum span{
	display:block;
	text-align:center;
	color:var(--bs-gray-600);
}
.article h1{
    text-transform: capitalize;
}
.article p{
    margin-bottom: 1rem;
}
.article ul{
    margin-bottom: 1rem;
}
.article li{
    margin: 0px 0px 10px 30px;
}
.article li:before{
    content:'–';
    position:absolute;
    display:inline-block;
    color:var(--ok-lgray10);
    margin-left:-30px;
}
.article figure{
    width:100%;
    margin:0 0 1rem 0;
    justify-content:center;
    display:flex;
    flex-direction:column;
    text-align:center;
    
}
.article img{
    max-height:100%;
    max-width:100%;
    width:auto;
    height:auto;
    align-self: center;
}
.article figcaption{
    align-self:center;
}
.article .video{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}
.article .video iframe{
    width: 500px;
    height: 300px;
}

.article-info{
    margin-top:3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
	border-top: 2px dashed var(--bs-gray-400);
}
.tags{
    margin:2rem 1rem;
    display:flex;
    flex-wrap:wrap;
}

.tags span{
    margin:5px;
    padding:10px;
    width:auto;
    height:auto;
    background: var(--bs-gray-200);
    color:var(--ok-gray07);
    font-size:0.875rem;
    font-weight: 300;
    letter-spacing:1px;
    text-transform: lowercase;
}

/* //////////////////// BIT: Container Section //////////////////// */


/* //////////////////// BAS: Footer Section //////////////////// */
footer{
	position:relative;
	top:-2px;
	padding:10px 0 80px;
	background:var(--bg-gray);
}
.footer{
	display:flex;
	flex-wrap:wrap;
	color:var(--bs-gray-600);
}

.footer img{
	width:50px;
	margin-bottom:10px;
	opacity:.6;
}
.footer .copy{
	margin-bottom:10px;
}
.footer a{
	color:var(--bs-gray-600);
}


/* //////////////////// BIT: Footer Section //////////////////// */


/*  Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { }

/*  Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {  }

/*  Large devices (desktops, 992px and up) */
@media (min-width: 992px) { }

/*  X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { }

/*  XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {  }


/*  `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { }

/*  `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { }

/*  `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { }

/*  `xl` applies to large devices (desktops, less than 1200px) */ 
@media (max-width: 1199.98px) {  }

/*  `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {  }

/*  Apply styles starting from medium devices and up to extra large devices */
@media (min-width: 576px) and (max-width: 1199.98px) { }