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; }
.error { font-size: 6.67vw; text-transform: uppercase; margin-top: 0.5em; }

h1, .extra_link, .menu ul, ul.menu { font-size: 6.67vw; font-weight: 200; display: inline; letter-spacing: -2.5px }

.tester { display: none; }

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

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

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

.sidebar { position: fixed; right: 2em; top: 1em; padding: 0.5em 0; }
.sidebar a { height: 2.3em; width: 2.3em; 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 rotation */
#blob { display: contents; }
.blob { margin: 2.7em 0 3em 0; width: 12.5vw; height: 12.5vw; }
.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); } }

#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; font-size: 1.667vw; }
#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; }

.items_archive { margin-top: 6em }
#items.items_archive .item { font-size: 1.2vw; width: 20% }
.items_archive .navigation { width: 100%; font-size: 1.1vw; }
.items_archive .navigation a { margin-right: 0.5em; border-bottom: 2px solid #000 }

.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); }

#page #top { display: none; }

#page .blob { width: 8vw; height: 8vw; margin: 1em 0 3em 0; cursor: pointer; }
#page .blob.blob2 { margin-left: -8vw; }
#page h2 { font-size: 6.67vw; font-weight: 200; text-transform: uppercase; margin-bottom: 0.5em; max-width: 60vw; }
#page h2.post_head { font-size: 4vw; margin-top: 1em; margin-bottom: 1em; line-height: 1.1em; font-weight: 200; text-transform: uppercase; max-width: 60vw; letter-spacing: -1px; }

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

#page #content { width: 680px; font-size: 1.25em; line-height: 1.6em; 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: 2em; }
#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 { font-size: 3.5vw; margin-top: 1em; margin-bottom: 1em; line-height: 1.1em; font-weight: 200; text-transform: uppercase; letter-spacing: -0.5px; }

#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%; }
#page .portraits .wp-caption { width: 33% !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  { object-fit: cover; margin: 0 0 0.5em 0 !important; border-radius: 50%; width: 190px !important; height: 190px !important; max-width: unset !important; max-height: unset; }

.box-black { background: #ecedef; padding: 1em; margin-bottom: 2em; }
.box-list li { list-style-type: none !important; font-weight: bold; }
.box-list li:before { content: '► ';  }
.box-list ul { margin-left: 0 !important }

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

#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; }

#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 { margin-top: 8em; }
.back a:after { content: "⭠"; }
.back a { text-decoration: none; font-size: 6.67vw; }

#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: 1080px) {
h1, .extra_link, .menu ul, #page h2, .back a, ul.menu { font-size: 74px  }
h3 { font-size: 37px !important; }
#items .item { font-size: 19px; }
#page h2.post_head { font-size: 50px; width: 680px; max-width: unset; }
#subscribe, #subscribe #newsletter_button, #subscribe #email, #subscription-panel .cancel { font-size: 13px; }
#items .item { font-size: 16px; width: 50%;}
#items.items_archive .item { width: 33%; font-size: 13px; }
.items_archive .navigation { font-size:13px; }
#logo { height: 20px; }
#key img, #flag img { height: 25px }

}

@media only screen and (max-width: 740px) {
h1, .extra_link, .menu ul, #page h2, .back a, ul.menu { font-size: 48px }
h3 { font-size: 27px !important; }
#page h2.post_head { font-size: 40px; width: 100%; }
#page #content, #items .item { font-size: 16px; width: 100%; }
#items { width: 100%; }
#items .item, #items.items_archive .item { width: 50%; }
#logo {  }
h1, .extra_link, .menu ul, ul.menu { letter-spacing: -1.25px }
#page .portraits .wp-caption img  { width: 130px !important; height: 130px !important; }
#footer p { font-size: 12px; }
}