html, body, div, p, ul, ol, li, h1, h2, h3, h4, pre, form, p, button, img, a img { border: 0 none; margin: 0; padding: 0; }
ul, li { list-style-type: none; }
* { box-sizing: border-box; }

body { font-family: 'Arimo', Arial, sans-serif; background: #fff; color: #000; font-size: 16px; }
input, textarea { font-family: Arial, sans-serif; }
a { color: inherit; }

::selection { background: #001bf4; color: #fff; }
.tester { display: none; }
.error { font-size: 6.67vw; text-transform: uppercase; margin-top: 0.5em; }
#page #top { display: none; }

.font1, h2 { font-size: 100px; font-weight: 200; display: inline; letter-spacing: -2.65px; text-transform: uppercase; }
h2 { margin-bottom: 0.5em; display: block; }
.font2{ font-size: 20px; }
.font3, h3 { font-size: 50px; font-weight: 200; display: inline; letter-spacing: -1px; text-transform: uppercase; }
h3 { margin: 1em 0; display: block; }
h4 { margin-bottom: 0.5em; display: block; }

.button_behavior { text-underline-offset: 2px; }
.button_behavior:hover { color: #001bf4; }

#mainframe { width: 100%; padding: 1em 2em 0 2em; box-sizing: border-box; max-width: 1500px; }
#top { width: 90%; }
#top a { text-decoration: none; }

/* menu */
.menu, .menu ul, .menu li, ul.menu, .menu-main-menu-container { display: inline; }
.menu ul, ul.menu { text-transform: uppercase; }
.menu li:before { content: ' / '; }

/* socials */
.sidebar { position: fixed; right: 2em; top: 0.5em; padding: 0.5em 0; z-index: 100; }
.sidebar a { height: 2em; width: 2em; margin: 8px 0; display: block; border-radius: 50%; display: flex; align-items: center; justify-content: center; background:  #000; transition: background 0.25s; }
.sidebar a img { width: 75%; filter: invert(1); padding: 5px; }
.sidebar a:hover { background: blue; }

/* blob */
/*#blob { display: contents; }*/
.blob { margin: 2.7em 0 3em 0; width: 12.5vw; height: 12.5vw; cursor: pointer;}
.blob.blob1 { animation: blob infinite linear 25s; animation-delay: 10s; }
.blob.blob2 { margin-left: -12.5vw; animation: blob infinite linear 30s; }
@keyframes blob { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes blob { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }

/* news on homepage */
#items { width: 100%; display: flex; flex-wrap: wrap; padding: 0 0.25em; }
#items a { text-decoration: none; }
#items .item { width: 25%; padding: 0 3em 2em 0; line-height: 1.25em; }
#items .name span { border-bottom: 2px solid transparent; transition: border 0.1s, color 0.1s; }
#items a:hover .name span { border-bottom: 2px solid #001bf4; color: #001bf4; }

/* link to newsarchive */
.archive_link { font-size: 5em; margin-bottom: 1em; transition: transform 0.5s; width: 0.6em; text-align: center; height: 1em; line-height: 1em; margin-left: 2px; }
.archive_link a { text-decoration: none; }
.archive_link:hover { transform: rotate(90deg); }

/* newspage */
.items_archive { margin-top: 6em }
#items.items_archive .item { width: 20% }
.items_archive .navigation { width: 100%; }
.items_archive .navigation a { margin-right: 0.5em; border-bottom: 2px solid #000 }

/* page */
#pin_image { margin-bottom: 1em; }
#pin_image img { width: 100%; height: auto; }

#page #content { width: 720px; font-size: 20px; line-height: 1.5em; padding-left: 0.25em; padding-bottom: 0.25em; }
#page #content p, #page #content ul, #page #content ol { margin-bottom: 1em; }
#page #content ul, #page #content ol { margin-left: 1em; width: 90% }
#page #content ul li { list-style-type: square; }
#page #content ol li { list-style-type: decimal; }
#page #content h2 { margin-top: 0.5em; line-height: 1em; }
#page #content h3 { margin: 0.5em 0; line-height: 1em; }

#page #content .page_text li a, #page #content .page_text p a { text-decoration: none; color: #001bf4; }
#page #content .page_text li a:hover, #page #content .page_text p a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
#page #content .page_text img { width: 100%; height: auto; margin:  1em 0; }

/* portraits */
#page .portraits { display: flex; flex-wrap: wrap; width: 100%; margin: 2em 0; }
#page .portraits .wp-caption { width: 25% !important; margin: 0 0 1.25em 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start }
#page .portraits p { display: none; }
#page .portraits .wp-caption-text { display: block; line-height: 1.2em; text-align: center; width: 80%; }
#page .portraits .wp-caption img  { filter: saturate(0); object-fit: cover; margin: 0 0 0.5em 0 !important; border-radius: 50%; width: 150px !important; height: 150px !important; max-width: unset !important; max-height: unset; transition: filter 0.1s; }
#page .portraits .wp-caption img:hover { filter: saturate(0.8); }

/* typo -- blackbox */
.box-black { background: #ecedef; padding: 1em; margin-bottom: 2em; }
.box-list li { list-style-type: none !important; }
.box-list li:before { content: '► '; font-size: 95%  }
.box-list ul { margin-left: 0 !important }

#page hr { height: 5px; border: 0; background: #000; margin: 1.75em 0 }

/* footer */
#footer { border-top: 5px solid #000; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 1.25em 0 2em 0 }
#icons { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;  }
#logo { height: 25px; padding: 0 0 0 1em }
#key img { height: 30px; padding: 0 1em }
#flag img { height: 30px }
#footer p a { text-decoration: none; cursor: pointer; transition: 0.05s }
#footer p a:hover { text-decoration: underline; color: blue; text-underline-offset: 3px; text-decoration-thickness: 1px; }
#footer #icons a { display: flex; }

/* subscribe */
#subscription-panel, #subscription-panel-overlay { opacity: 0; display: none; }
#subscription-panel.show, #subscription-panel-overlay.show { opacity: 1; display: block; }
#subscription-panel { position: fixed; top: 50%; left: 50%; background: #fff; width: 50%; min-height: 30vh; transform: translate3d(-50%, -50%, 0px); padding: 2em; box-shadow: 2px 2px 10px #00000066; z-index: 10 }
#subscribe { width: 100%; display: flex; flex-wrap: wrap; align-items: center; margin-top: -4px; justify-content: center; padding-bottom: 1em; }
#subscribe, #subscribe #newsletter_button, #subscribe #email { font-size: 20px; }
#subscribe #email { margin: 1em 0.25em 0 0.75em; border: 0; padding: 3px 8px; width: 50%; background: none; color: blue; border-bottom: 1px dotted #fff; border: 1px solid #000; border-radius: 3px; cursor: default;}
#subscribe #newsletter_button { margin: 1em 0 0 0; border: 0; padding: 2px 7px; background: none; color: #000; cursor: pointer; text-underline-offset: 2px; text-decoration: underline;}
#subscribe #newsletter_button:hover { color: blue }
#subscription-panel .head { width: 100%; text-align: center; }
#subscription-panel .tos { font-size: 80%; text-align: center; margin-bottom: 2em; text-underline-offset: 2px; }
#subscription-panel .cancel { text-align: center; font-size: 20px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
#subscription-panel-overlay { position: fixed; top: 0; left: 0; background: #ffffffdb; width: 100vw; height: 100vh; z-index: 0 }

/* back button */
.back { margin: 1em 0 0.48em 0 !important; display: block; }
.back a:after { content: "⭠"; }
.back a { text-decoration: none;}

#page iframe { width: 100%; height: 380px; }
.wp-caption { max-width: 100% !important; margin: 2em 0; }
.wp-caption-text { font-size: 0.7em; }

/* text hover animation */

#top a, .hover1 a
	{ 
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient( to right, #001bf4, #001bf4 50%, #000000 50% );
	background-size: 200% 100%;
	background-position: 100%;
	transition: background-position 0.75s ease-out;
     }
#top a:hover, .hover1 a:hover { background-position: 0%; }

/* startup animations */ 

@keyframes fade1 { 0% { opacity: 0; } 100% { opacity: 1; } }
#top, #items, #blob { opacity: 0; }
#blob { animation: fade1; animation-iteration-count: 1; animation-duration: 0.5s; animation-delay: 0s;  animation-fill-mode: forwards; }
#items, #top { animation: fade1; animation-iteration-count: 1; animation-duration: 0.5s; animation-delay: 0.25s;  animation-fill-mode: forwards; }

/* flexibility */

@media only screen and (max-width: 1480px) {
.font1, h2 { font-size: 6.75vw; }
.font2, #page #content { font-size: 18px; }
#items.items_archive .item { width: 25%; }
}

@media only screen and (max-width: 1080px) {
.archive_link { font-size: 4em; }
h3 { font-size: 40px; }
.font2, #page #content, h4 { font-size: 16px; }
#subscribe, #subscribe #newsletter_button, #subscribe #email, #subscription-panel .cancel {  }
#items .item { width: 50%;}
.items_archive .navigation { }
#logo { height: 20px; }
#key img, #flag img { height: 25px }
.blob { width: 135px; height: 135px; }
.blob.blob2 { margin-left: -135px; }
#items.items_archive .item { width: 33%; }
}

@media only screen and (max-width: 740px) {
.font1, h2 { font-size: 50px }
.archive_link { font-size: 3em; }
h3 { font-size: 25px }
#page h2.post_head { font-size: 40px; width: 100%; }
#page #content, #items .item { width: 100%; }
#items { width: 100%; }
#items .item, #items.items_archive .item { width: 50%; padding-bottom: 1em; }
#page .portraits .wp-caption img  { width: 120px !important; height: 120px !important; }
#page .portraits .wp-caption { width: 30% !important; }
#footer p { font-size: 12px; }
}

@media only screen and (max-width: 640px) {
#items .item, #items.items_archive .item { width: 100%; }
#page .portraits .wp-caption img  { width: 90px !important; height: 90px !important; }
}

/* wide screen */

@media only screen and (min-width: 1500px) {
#mainframe { width: 1500px; }
.font1 { font-size: 100px; }
.blob { width: 187px; height: 187px; }
.blob.blob2 { margin-left: -187px; }
}