/* ===================================================
	FONTS LOADING
   ===================================================	*/
	
@font-face {
   font-family: 'AubreyPro';
   src: url('fonts/AubreyPro.eot');
   src: url('fonts/AubreyPro.woff') format('woff'),
      	url('fonts/AubreyPro.ttf') format('truetype');
   font-weight: 100;
   font-style: normal;
}

@font-face {
   font-family: 'Angst-50';
   src: url('fonts/Angst-50.woff2') format('woff2'),
      	url('fonts/Angst-50.otf') format('truetype');
   font-weight: 50;
   font-style: normal;
}

@font-face {
   font-family: 'Gropled-Bold';
   src: url('fonts/Gropled-Bold.woff') format('woff'),
      	url('fonts/Gropled-Bold.otf') format('truetype');
   font-weight: 100;
   font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');

/* ===================================================
	CONSTANTS DEFINING
   ===================================================	*/
:root {
	--display-font: 'Gropled-Bold';	
	--basic-font: sans-serif;
}

/* ===================================================
	AUXILARY CLASSES
   ===================================================	*/
.desktopOnly { display: block; }
.mobileOnly {display: none;}

.inplace, .noframe {
	border-radius: 5px;
	border: 1px solid transparent;
	background-color: transparent;
}

.editing {
	border-radius: 5px;
	border: 1px solid #0070d6;
	background-color: white !important;
}

select.inplace {
	color: #0070d6;
	text-decoration: underline;
	text-decoration-style: dotted;
	cursor: pointer;
}

.ratio-2x1, .ratio-xs-2x1, .ratio-sm-2x1 {
	--bs-aspect-ratio: 50%;
}

.light {
	font-size: smaller;
	font-weight: 100;
	opacity: 0.6;
}
/* ===================================================
	c r o p   m o d a l   s t y l i n g
   ===================================================	*/
#file, #article-body-file, #staff-photo-file{
	display: none;
}

#crop-dialog {
	width: 90%;
	height: 90%;
	top: 5%;
	left: 5%;
	border: 1px solid #888;
	box-shadow: 0px 2px 40px 31px rgba(0, 0, 0, 0.6);
	z-index: 90;
	padding: 5%;
	background-color: white;
	display: none;
	position: fixed;
	overflow: hidden;
}
#crop-dialog h2 {
	height: 10%;
}

#cropbox {
	border: 1px solid black;
	position: absolute;
}

#imagePreview {
	max-height: 100%;
	max-width: 100%;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}


/* ===================================================
	t y p o g r a p h e r   m o d a l   s t y l i n g
   ===================================================	*/
#typographer-modal #preview p{
	background-color: rgba(var(--article-color), 0.05);
	border-left: 3px solid rgba(var(--article-color), 1);
	padding-left: 1em !important;
	font-size: larger;
	margin-top: 0.5em;
}

#typographer-modal .modal-body p {
	margin: 0 !important;
	padding: 0 !important;
}

#typographer-modal #source{
	background-color: rgba(128, 128, 128, 0.05);
	border-left: 3px solid rgba(128, 128, 128, 1);
	padding-left: 1em !important;
}

/* ===================================================
	i m a g e   u p l o a d   s t y l i n g
   ===================================================	*/
.upload-box {
}

.upload-box-over {
	outline-offset: -3em;
	outline: 6px dashed rgb(var(--icon-color-21x9));
	cursor: -webkit-grabbing;
}

.icon-container{
	text-align: center;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 24em;
	height: 12em;
	display: block;
	margin: 0 auto;
}

.upload-icon {
	display: inline-block;
	margin: 2em;
	width: 12em;
	height: 12em;
	border-radius: 10px;
	text-align: center;
	font-size: x-small;
	color: rgb(var(--icon-color-21x9));
}

.upload-icon i {
	display: block;
	font-size: 7.6em;
}

.upload-button {
	cursor: pointer;
	background-color: rgba(var(--icon-color-21x9), 0.3);
}

.upload-button:hover {
	box-shadow: 0px 2px 2px 1px rgba(var(--icon-color-21x9), 0.5);
}

.helper-container{
	display: block;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	height: 12rem;
	color: rgba(var(--icon-color-21x9), 0.7);
	font-size: 5em;
	line-height: 120%;
}

/* ===================================================
	a d m i n   p a n e l   s t y l i n g
   ===================================================	*/
.admin-panel-container { transform: translateY(-3em); margin-bottom: -3em;}

.admin-panel {
	background-color: white;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	padding: 0.1em;
	text-align: center;
}

.admin-panel p {
	font-size: 1em;
	color: #999;
	font-size: x-small;
	padding: 0;
}

.admin-panel:first-of-type {
	border-bottom-left-radius: 3em;
	border-top-left-radius: 3em;
	border-left: 1px solid #999;
}

input.datePicker {
	margin: 0 -0.4em;
	padding: 0.1em 0.4em 0.1em 1em;
	border-radius: 0.8em 0.3em;
	border: none;
	background: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background-image: linear-gradient(to right, rgba(var(--article-color), 0.1), rgba(var(--article-color), 0.6) 4%, rgba(var(--article-color), 0.3));
	text-align: center;
	max-width: 90%;
}

.datePicker td.active {
	background-color: rgb(var(--article-color)) !important;
}

#logout {
	display: inline-block;
	z-index: 3000;
	padding: 0.2em 2em;
	position: fixed;
	top: 0;
	right: 1%;
	background-color: rgba(255, 255, 255, .8);
	color: black;
	font-size: 1em;
	border: 1px solid #999;
	border-bottom-left-radius:  1em;
	border-bottom-right-radius: 1em;
}

/* ===================================================
	a d d   p a n e l   s t y l i n g
   ===================================================	*/
.add-panel {
	background-color: white;
	border: 1px solid #bbb;
	-webkit-border-radius: 4em;
	-moz-border-radius: 4em;
	border-radius: 4em;
	font-size: 3em;
	padding: 0.25em;
	margin-top: 1em;
	margin-bottom: 1em;
}
.add-panel-icon {
	color: #bbb;
}
.add-panel-button {
	color: rgb(var(--article-color));
	padding: 0 0.4em;
	cursor: pointer;
}
.add-panel .bi-file-earmark-plus {
	border-left: 1px dotted #bbb;
	border-right: 1px dotted #bbb;
	padding: 0 0.6em;
}
.add-panel .bi-info-circle {
	color: #999;
}


/* ===================================================
	a r t i c l e   b o d y  s t y l i n g
   ===================================================	*/
#article-body p {
	background-color: white;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	cursor: grab;
	border: 2px dashed #eee;
	border-radius: 1em;
	padding: 2em 1em;	
	margin: 2em auto 0.5em auto;
}

#article-body p.typo {
	border-left: 6px solid orange;
	text-indent: -2em;
}

#article-body p.typo:before{
	content: "T";
	color: white;
	display: inline-block;
	position: relative;
	left: -1.8em;
	font-family: var(--display-font);
	font-size: 2em;
	text-align: center;
	width:1em;
	height: 1em;
	text-indent: 0;
	border-radius: 0.2em;
	background-color: orange;
}


#article-body div.htmlcode {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	cursor: grab;
	border: 2px dashed rgba(var(--article-color), .5);
	border-radius: 1em;
	padding: 2em 1em;	
	background-color: white;
	margin: 2em auto 0.5em auto;
	text-align: center;
}

#article-body textarea {
	border: 2px dashed transparent;
	border-radius: 1em;
	padding: 2em 1em;	
	background-color: white;
	width: 100%;
	margin: 2em auto 0.5em auto;
}

#article-body textarea.htmlcode {
	font-family: 'Ubuntu Mono', monospace;
	margin: 2em auto 0.5em auto;
	padding: 2em 1em 3em;
	border-radius: 1em;
	border: 1px solid rgb(var(--article-color));
	background-repeat: no-repeat;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#eee' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z'/%3E%3C/svg%3E" );
}

#article-body img, img {
	display: block;
	text-align: center;
	max-width: 95%;
	border: 8px solid white;
	outline: 1px solid #999;
	margin: 0 auto;
	border-radius: 0px;
	background: linear-gradient(145deg, #ffffff, #e6e6e6);
	box-shadow:  6px 6px 4px #f7f7f7, -6px -6px 4px #ffffff;
}

img.framed {
	margin: 1em auto;
}

#article-body img + p, img + p {
	text-align: center;
	font-size: smaller;
	padding: 1em 1em;
	margin-top: 0.1em;
	color: #999;
}

#article-body div.iconic {
	text-align: center;
	font-size: 5em;
	padding: 0.2em;
	color: rgb(var(--article-color));
	opacity: 0.5;
	border: 2px dashed rgb(var(--article-color));
	border-radius: 0.1em;
	margin: 0.2em auto;
	background-color: white;
	cursor: hand;
	cursor: -webkit-grabbing;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

div.htmlcode {
	padding: 2em 1em;	
	margin: 2em auto 0.5em auto;
	text-align: center;
	max-width: 100%;
}

div.htmlcode iframe {
	max-width: 100%;
}

img.no-style {
	display: inline;
	margin: 1em auto;
	border: none;
	background: none;
	box-shadow: none;
	outline: none;
}

.no-decoration {
	text-decoration: none;
}

.line {
	outline-left: 3px dotted #eee;
	margin-left: 0 auto;
	background-position: center top;
	background-repeat: repeat-y;
	background-size: 4px 16px;
	background-image: url(../images/line.svg);
}

.line_date {
	display: inline-block;
	position: relative;
	top: 30%;
	width: 2em;
	height: 2em;
	padding: 5pt;
	background-color: orange;
	border-radius: 1em;
	font-family: 'Georgia';
	font-style: italic;
	font-weight: 900;
	font-size: 2em;
	color: white;
	line-height: 1;
	text-align: center;
	}
	
.line_date small {
	font-size: 14pt;
	font-style: normal;
	font-weight: 100;
}


.contact-inpage-block {
	margin-top: 20pt;
	margin-bottom: 20pt;
	border-top: 1px solid rgb(var(--article-color));
	border-bottom: 1px solid rgb(var(--article-color));
	border-radius: 10pt;
	padding: 15pt 20pt 0pt 7pt;
	background: linear-gradient(180deg, rgba(var(--article-color),0.08) 0%, rgba(var(--article-color),0.03) 45%, rgba(var(--article-color),0) 90%);
}

.contact-inpage-block button {
	border-color: rgb(var(--article-color)) !important;
	background-color: rgba(var(--article-color), 0.9) !important;
	margin: 0 !important;
}


.donate-inpage-block {
	margin-top: 20pt;
	margin-bottom: 20pt;
	border-left: 1px solid rgb(var(--article-color));
	border-right: 1px solid rgb(var(--article-color));
	border-radius: 10pt;
	padding: 15pt 20pt 0pt 7pt;
	background: linear-gradient(180deg, rgba(var(--article-color),0.08) 0%, rgba(var(--article-color),0.03) 45%, rgba(var(--article-color),0) 90%);
}

.donate-inpage-block button {
	border-color: rgb(var(--article-color)) !important;
	background-color: rgba(var(--article-color), 0.9) !important;
}


/* ===================================================
	STYLING
   ===================================================	*/

body, p {
	color: #334;
	line-height: 200%;
	font-size: 1em;
}

p {
	padding: 0em 0em 1em 0em;	
	margin: 2em auto 0.5em auto;
}

h1, h2 {
	font-size: 4em;
	font-family: var(--display-font);
	color: rgba(var(--article-color), 1);
}

h2 {
	font-size: 1.8em;
}

.publication_line h2{
	font-size: 2.5em;
	font-family: var(--display-font);
	text-decoration: none !important;
	position: relative;
	transform: translateY(-55%);
	top: 50%;
}

 .article_title {
	font-family: var(--display-font);
	color: rgba(var(--article-color), 1);
	margin: 1em 0 0.5em 0;
	text-align: center;
	font-size: 4em;
}

.author {
	font-family: var(--display-font);
	font-variant: small-caps;
	font-size: 1.2em;
}

.article_author {

}

a {color: rgb(var(--article-color));}

em {
	font-style: normal;
	margin: 0 -0.4em;
	padding: 0.1em 0.4em;
	border-radius: 0.8em 0.3em;
	background: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background-image: linear-gradient(to right, rgba(var(--article-color), 0.1), rgba(var(--article-color), 0.6) 4%, rgba(var(--article-color), 0.3));
}

.date {
	font-family: var(--display-font);
}

.breadcrumbs {
	margin: 2em auto;	
}

.breadcrumbs a {
	color: rgba(var(--article-color), .5);
	font-variant: small-caps;
	text-decoration: none;
	padding: 0 .5em 0 0;
}

.breadcrumbs a:first-of-type {
	margin-left: -20pt;
	padding-left: 0;
}

.breadcrumbs a:hover {
	color: rgba(var(--article-color), 1);
	text-decoration: underline;
}

.breadcrumbs i {
	color: rgba(128, 128, 128, .5);
	padding: 0 .5em 0 0;
}

.title_image {
	background-color: rgb(var(--article-color));
	--bs-aspect-ratio: 42%;
	background-position: center center;
	background-size: cover;
}

.footer {
	border: none;
	border-top: 8px solid rgb(var(--article-color));
	margin: 3em auto;
	padding-top: 2em;
}

.footer a {
	display: inline-block;
	font-variant: small-caps;
	color: #bbb;
	text-decoration: none;
	margin: 1em auto;
	position: relative;
	font-size: smaller
}

.footer a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #ddd;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.footer a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}


.bi-key {
	display: inline-block;
	cursor: pointer;
	opacity: 0.3;
	font-size: 1em;
	padding-top: 1em;
}


.main-page-title {
	display: inline-block;
	width: 40vw;
	height: 39.9vw;
	color: white;
	float: left;
	vertical-align: top;
	position: relative;
	overflow: hidden;
	background-color: green;
	background: radial-gradient(at 25% 30%, rgba(57,181,74,1) 2%, rgba(41,113,33,1) 60%);
}

.main-page-title a {
	display: inline-block;
	font-variant: small-caps;
	color: white;
	text-decoration: none;
	margin: 1em auto;
	position: relative;
}

.main-page-title a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: white;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.main-page-title a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.main-page-post {
	display: inline-block;
	width: 19.98vw;
	height: 19.98vw;
	color: white;
	vertical-align: top;
	position: relative;
	overflow: hidden;
	padding: 0;
}

.main-page-post:nth-child(odd) {
	border: 20px solid white;
}
a.no-decoration .main-page-post-content {
	font-family: var(--display-font);
	color: white;
	background: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.77) 0%, hsla(0, 0%, 0%, 0.76) 2.7%, hsla(0, 0%, 0%, 0.733) 5.17%, hsla(0, 0%, 0%, 0.69) 7.5%, hsla(0, 0%, 0%, 0.635) 9.6%, hsla(0, 0%, 0%, 0.57) 11.76%, hsla(0, 0%, 0%, 0.499) 13.73%, hsla(0, 0%, 0%, 0.423) 15.7%, hsla(0, 0%, 0%, 0.347) 17.63%, hsla(0, 0%, 0%, 0.271) 19.6%, hsla(0, 0%, 0%, 0.2) 21.5%, hsla(0, 0%, 0%, 0.135) 23.6%, hsla(0, 0%, 0%, 0.08) 25.83%, hsla(0, 0%, 0%, 0.037) 28.16%, hsla(0, 0%, 0%, 0.01) 30.6%, hsla(0, 0%, 0%, 0) 33.3%);
	background-blend-mode: multiply;
}

.main-page-post-bg {
	display: inline-block !important;	
	opacity: 1;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	max-width: 100%;
	padding: 0 !important;
	margin: 0 !important;
	transform: none;
}

.main-page-post-bg-rect {
	max-width: none;
	width: auto;
	height: 100% !important;
	display: none !important;
}

.main-page-post-content {
	padding: 10pt;
	position: relative;
	width: 100%;
	height: 100%;
}
.main-page-post-content .publication_date {
	font-family: var(--basic-font);
	font-size: smaller;
	font-weight: 300;
}

#create-new-publication {
	background-color: rgba(250, 250, 250, 1); 
	color: rgba(200, 200, 200, 1); 
	font-size: 8em; 
	cursor: pointer;
}

#create-new-publication svg {
	position: relative;
	width: 50%;
	height: 50%;
	top: 25%;
	left: 25%;
}


/* ===================================================
	S t a f f   p a g e
===================================================	*/
.staff-card, .add-staff-card {
	cursor: pointer;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.staff, .add-staff {
    box-shadow:  6px 6px 4px #f7f7f7, -6px -6px 4px #ffffff;
    border-radius:0.4em;
    padding: 0.5vw; 
    border-top:1px solid rgba(240,240,240,0.5);
    border-left:1px solid rgba(240,240,240,0.5);
    overflow: hidden;
    margin: 1em;
}

.staff .photo-frame {
	--bs-aspect-ratio: 100%;
	position: relative;
	margin: 0 auto;
	border:  4px solid rgba(240, 240, 240, 0.3);
	overflow: hidden;
	padding: 0 !important;
}

.staff .photo-frame-rounded {
	border-radius: 50%;
}
	
.staff .photo-frame .photo-image {
	display: block;
	max-width: none !important;
	position: absolute;
	top: 0%; 
	left: 0;
	width: 101%;
	height: auto !important;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
}

.photo-image-expanded {
	top: 900% !important;
}

.card_expanded .staff .photo-frame {
		max-width: 30%;
		display: inline-block;
}

.card_expanded .staff .wrapper {
	display: inline-block;
	vertical-align: top;
	max-width: 65%;
	width: 100%;
	padding: 2em;
}


.staff-icon-switch, .staff-upload-icon {
	display: block;
	position: absolute;
	top: 5%;
	left: 80%;
	width: 1.2em;
	height: 1.2em;
	border-radius: 0.3em;
	padding: 0.12em;
	font-size: 2em;
	text-align: center;
	background-color: white;
	color: black;
	opacity: 0.5;
	cursor: pointer;
}

.staff-icon-switch:hover, .staff-upload-icon:hover {
	box-shadow: 0px 1px 10px rgba(var(--article-color), .9);
}

.invisible-icon {
	left: 80%;
}

.lock-icon {
	left: 5%;
}

.staff-upload-icon {
	left: 5%;
	top: 80%;
}
.staff-name {
	text-align: center;
	font-family: var(--display-font);
}

.staff-position {
	text-align: center;
	color: rgb(200, 200, 200);
	font-size: smaller;
}

p.staff-name, p.staff-position {
	margin: 0 !important;
	padding: 0;
	width: 100%;
}
.staff * .staff-about, .staff * .staff-pass {
	display: none;
	height: auto;
}

.card_expanded .staff * .staff-about, .card_expanded .staff * .staff-pass {
	display: block;
}

/* ===================================================
	XL
===================================================	*/
@media only screen and (max-width: 1400px) {
	.title_image {--bs-aspect-ratio: 42%;}
	.card_expanded .staff .photo-frame {
		max-width: 30%;
	}
}

/* ===================================================
	LG
===================================================	*/
@media only screen and (max-width: 1200px) {
	.title_image {--bs-aspect-ratio: 42%;}
	.add-panel { font-size: 2.6em;}
	.main-page-title a {margin: 0.4em auto;}
}

/* ===================================================
	MD
===================================================	*/
@media only screen and (max-width: 992px) {
	.add-panel { font-size: 2.4em;}
	.main-page-title { width: 50vw; height: 50vw;}
	.main-page-post {width: 25vw; height: 25vw;}
	.publication_line h2 {font-size: 2em;}
	.card_expanded .staff .photo-frame { max-width: 100%;}
	.card_expanded .staff .wrapper {max-width: 100%;}
	.main-page-title a {margin: 0.3em auto;}
}

/* ===================================================
	SM
===================================================	*/
@media only screen and (max-width: 768px) {
	.desktopOnly { display: none; } .mobileOnly {display: block;}
	h1, .article_title {font-size: 1.6em;}
	h2 {font-size: 1.2em;}
	.add-panel { font-size: 2.6em; border-radius: 2.6em;}
	.main-page-title { width: 50vw; height: 50vw;}
	.main-page-post {width: 50vw; height: 25vw;}
	.main-page-post:nth-child(odd) {border: none;}
	.main-page-post:nth-child(4n) {border: 20px solid white !important;}
	.main-page-post:nth-child(4n+3) {border: 20px solid white !important;}
	.main-page-post-bg-square {display: none !important;}
	.main-page-post-bg-rect {display: inline-block !important;}
	a.no-decoration .main-page-post-content {background: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.77) 0%, hsla(0, 0%, 0%, 0.76) 5.4%, hsla(0, 0%, 0%, 0.733) 10.34%, hsla(0, 0%, 0%, 0.69) 15%, hsla(0, 0%, 0%, 0.635) 19.2%, hsla(0, 0%, 0%, 0.57) 23.52%, hsla(0, 0%, 0%, 0.499) 27.46%, hsla(0, 0%, 0%, 0.423) 30.14%, hsla(0, 0%, 0%, 0.347) 35.26%, hsla(0, 0%, 0%, 0.271) 39.2%, hsla(0, 0%, 0%, 0.2) 43%, hsla(0, 0%, 0%, 0.135) 47.2%, hsla(0, 0%, 0%, 0.08) 51.66%, hsla(0, 0%, 0%, 0.037) 56.32%, hsla(0, 0%, 0%, 0.01) 61.2%, hsla(0, 0%, 0%, 0) 66% );}
	.line {background-image: none; text-align: center; margin:-4.5em auto 2em auto;} 
	.publication_line h2 {text-align: center; font-size: 1.7em; margin-bottom: 3em; top: 0; transform: none;}
	.card_expanded .staff .photo-frame { max-width: 100%;}
	.card_expanded .staff .wrapper {max-width: 100%;}
	.main-page-title a {margin: 0.10em auto;}
	.footer * h3 {margin-top: 2em;}
}

/* ===================================================
	XS
===================================================	*/
@media only screen and (max-width: 576px) {
	.desktopOnly { display: none; } .mobileOnly {display: block;}
	.title_image {--bs-aspect-ratio: 100%;}
	.upload-box-over {outline: 6px dashed rgb(var(--icon-color-1x1));}
	.upload-icons {color: rgb(var(--icon-color-1x1));}
	.upload-button {background-color: rgba(var(--icon-color-1x1), 0.3);}
	.upload-button:hover {box-shadow: 0px 2px 2px 1px rgba(var(--icon-color-1x1), 0.5);}
	.helper-container{color: rgb(var(--icon-color-1x1));}
	h1{font-size: 1.5em;}
	h2 {font-size: 1em;}
	.add-panel { font-size: 1.8em; border-radius: 1.6em;}
	.article_title {font-size: 1.5em;}
	.article_author {text-align: center;}
	.author {text-align: center !important;}
	.admin-panel:first-of-type {border-bottom-left-radius: 0em;border-top-left-radius: 0em;}
	.main-page-title { width: 100vw; height: 100vw;}
	.main-page-post {width: 100vw; height: 100vw;}
	.main-page-post:nth-child(4n) {border: none !important;;}
	.main-page-post:nth-child(4n+3) {border: none !important;;}
	.main-page-post:nth-child(even) {border: 20px solid white !important;}
	.main-page-post-bg-square {display: inline-block !important;}
	.main-page-post-bg-rect {display: none !important;}
	a.no-decoration .main-page-post-content {background: linear-gradient( to bottom, hsla(0, 0%, 0%, 0.77) 0%, hsla(0, 0%, 0%, 0.76) 5.4%, hsla(0, 0%, 0%, 0.733) 10.34%, hsla(0, 0%, 0%, 0.69) 15%, hsla(0, 0%, 0%, 0.635) 19.2%, hsla(0, 0%, 0%, 0.57) 23.52%, hsla(0, 0%, 0%, 0.499) 27.46%, hsla(0, 0%, 0%, 0.423) 30.14%, hsla(0, 0%, 0%, 0.347) 35.26%, hsla(0, 0%, 0%, 0.271) 39.2%, hsla(0, 0%, 0%, 0.2) 43%, hsla(0, 0%, 0%, 0.135) 47.2%, hsla(0, 0%, 0%, 0.08) 51.66%, hsla(0, 0%, 0%, 0.037) 56.32%, hsla(0, 0%, 0%, 0.01) 61.2%, hsla(0, 0%, 0%, 0) 66% );}
	.line {background-image: none; text-align: center; margin:-4.5em auto 2em auto;} 
	.publication_line h2 {text-align: center; font-size: 1.7em; margin-bottom: 3em; top: 0; transform: none;}
	.card_expanded .staff .photo-frame { max-width: 100%;}
	.card_expanded .staff .wrapper {max-width: 100%;}
	.main-page-title a {margin: 0.3em auto;}
	.breadcrumbs {font-size: 0.7em;}
	.footer * h3 {margin-top: 2em;}
}



/* ===================================================
	t o y t o g g l e   c h e c k b o x
===================================================	*/	
toytoggle, toytoggle:before, toytoggle:after{border: none;box-sizing: border-box;margin: 0;padding: 0;transform: translate(10%, -10%);}toytoggle{--on: rgb(var(--article-color));--off: #f0f0f0;--transDur: 0.2s;display: inline-block;vertical-align: top;}toytoggle ~ label{margin: 3pt 0 0 10pt;}toytoggle input{opacity: 0;-webkit-appearance: none;-moz-appearance: none;appearance: none;}toytoggle .toy-toggle{background: radial-gradient(at top left, #fff 10%, #fff0 20%), radial-gradient(at top right, #fff 20%, #e4e4e4 35%);border-radius: 6em;cursor: pointer;display: block;font-size: 3.5px;position: relative;margin: auto;width: 20em;height: 12em;-webkit-tap-highlight-color: transparent;}toytoggle .toy-toggle span{display: block;position: absolute;}toytoggle .toy-toggle > span{top: 50%;left: 50%;}toytoggle .toy-toggle > span:not(.handle){transform: translate(-50%, -50%);}toytoggle .border1{background: #f0f0f0;border-radius: 5.5em;box-shadow: 0 0 0.2em 0.1em #f0f0f0;width: 19em;height: 11em;}toytoggle .border2{background: linear-gradient(0deg, #fff 33%, #ccc 45%);border-radius: 4.75em;box-shadow: 0 0 0.2em 0.3em #f0f0f0 inset;width: 16.5em;height: 9.5em;}toytoggle .border3, toytoggle .handle{background: linear-gradient(90deg, var(--on) 50%, var(--off) 0);}toytoggle .border3{background-position: 75% 0%;background-size: 200% 100%;border-radius: 4.25em;box-shadow: 0 0 0.1em 0.1em #ddd inset, 0 1.5em 1.5em 1em #0004 inset, 0 0 0 4.25em #0002 inset;width: 15.5em;height: 8.5em;transition: backrgound-position var(--transDur) ease-in-out;}toytoggle .handle{border-radius: 50%;box-shadow: 0 0 0.5em 0 #0007;width: 8.5em;height: 8.5em;transform: translate(-90%, -50%);transition: transform var(--transDur) ease-in-out;z-index: 0;}toytoggle .handle:before{background: radial-gradient(2em 1.5em at 50% 35%, #fff6 15%, #fff0), radial-gradient(1.5em 2.5em at 75% 40%, #fff6 15%, #fff0), radial-gradient(100% 100% at 50% 33%, #0000 25%, #0003 50%);border-radius: 50%;box-shadow: 0 0 0.3em, 0.1em #0003 inset;content: "";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 3;}toytoggle .handle-on, toytoggle .handle-off{width: 50%;height: 100%;transition: transform calc(var(--transDur)/2);z-index: 2;}toytoggle .handle-off{background: var(--off);border-radius: 100% 0 0 100% / 50% 50% 50% 50%;right: 50%;transform-origin: 100% 50%;transition-delay: calc(var(--transDur)/2);transition-timing-function: ease-out;}toytoggle .handle-on{background: var(--on);border-radius: 0 100% 100% 0/ 50% 50% 50% 50%;left: 50%;transform: scaleX(0);transform-origin: 0% 50%;transition-timing-function: ease-in;}toytoggle input:checked + .toy-toggle .border3{background-position: 25% 0%;}toytoggle input:checked + .toy-toggle .handle{transform: translate(-10%, -50%);}toytoggle input:checked + .toy-toggle .handle-off{transform: scaleX(0);transition-delay: 0s;transition-timing-function: ease-in;}toytoggle input:checked + .toy-toggle .handle-on{transform: scaleX(1);transition-delay: calc(var(--transDur)/2);transition-timing-function: ease-out;}