@charset "UTF-8";
/* Mixin */
body { position: relative; min-height: 100%; font-size: 20px; }

h1, h2, h3, h4, h5, h6 { break-after: avoid; }

dl, dt, dd { margin: 0; padding: 0; text-indent: 0; }

dt { margin-top: 0.5em; font-weight: bold; }

ruby { ruby-position: over; position: relative; }

rb { padding: 0.5rem; font-size: 2rem; font-weight: bold; }

rt { font-size: 0.8rem; position: relative; top: -1em; }

/* rbc, rtc {display:table-row} rb, rt {display:table-cell; padding: 0.5rem; } */
/* rt {font-size:2rem;}
rtc.rubino {display:block}
rb, rtc.rubino rt{font-size:1rem} */
.logo { display: inline; padding-right: 1rem; padding-top: 5rem; }

td p { margin: 0; padding: 0; }

.project p { margin: 0; }

.project td p { margin: 0; }

.projects td:first-child, .projects th:first-child { border-bottom: 0; }

#home main { padding-top: 7.5rem; }

#home a img { -o-transition: 0.5s; -webkit-transition: 0.5s; /* ...and now for the proper property */ transition: 0.5s; -webkit-filter: saturate(40%); /* Safari 6.0 - 9.0 */ filter: saturate(40%); }

#home a img:active, #home a img:hover { -webkit-filter: saturate(100%); /* Safari 6.0 - 9.0 */ filter: saturate(100%); }

#projects a img { -o-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; border-radius: 50%; min-width: 4rem; }

#home a img:active, #projects a img:hover { border-radius: 5%; }

#homeslides { -ms-box-pact: justify; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

#homeslides alt { display: none; }

.undisclosed { width: 400px; max-width: 100; height: auto; background-color: silver; }

.project a img { -o-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; /* ...and now for the proper property */ -webkit-filter: saturate(100%); /* Safari 6.0 - 9.0 */ filter: saturate(100%); }

.project a img:active, .project a img:hover { -o-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; -webkit-filter: saturate(10%); /* Safari 6.0 - 9.0 */ filter: saturate(10%); }

.project figcaption { z-index: 20; }

.projects td { vertical-align: top; }

.row figure { margin: 0; padding: 0; position: relative; }

.row figure figcaption { z-index: 1500; -o-text-overflow: ellipsis; text-overflow: ellipsis; text-align: left; max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0.3rem; -o-transition: 0.5s; -webkit-transition: 0.5s; /* ...and now for the proper property */ transition: 0.5s; opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ }

nav h1 img { max-height: 100%; }

nav a:active, nav a:focus, nav a:hover { -o-transition: 0.2s; -ms-transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; }

figure { position: relative; display: inline-block; overflow: hidden; margin-bottom: 0; }

a:active img, a:focus img, a:hover img { -o-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s; /* ...and now for the proper property */ -ms-transform: scale(1.05); /* IE 9 */ -webkit-transform: scale(1.05); /* Safari */ transform: scale(1.05); z-index: 100; }

#home main { margin: 0; padding: 0; isolation: isolate; }

#home section { margin: 0 auto; max-width: 112.0rem; position: relative; width: 100%; box-sizing: border-box; }

#landing { background-image: url("../static/imgs/ARC_blurExtra.svg"), url("../static/imgs/harinezumi.svg"); background-attachment: fixed, scroll; background-position: center 15vh, 95% 95%; background-repeat: no-repeat, no-repeat; background-size: 65vw, 8rem; text-align: center; margin: 0; height: 100vh; max-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: space-around; box-sizing: border-box; min-height: 100vh; min-width: 100vw; max-width: 100% !important; padding: 0; margin: 0; width: calc(100% - 2rem); }

#landing #menu { position: fixed; top: 0; right: 0; z-index: 1500; white-space: nowrap; }

#landing .project #menu, #landing .projects #menu { background-color: #7fb528 !important; width: 100%; }

#landing hgroup { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }

#landing hgroup h1 { font-size: 10vw; line-height: 4vw; text-align: justify; text-justify: distribute; -moz-text-align-last: justify; /* Code for Firefox */ text-align-last: justify; margin: 0 auto; width: 60vw; }

#landing hgroup h1 span { font-size: 2vw; /*text-transform: uppercase;*/ text-transform: capitalize; font-variant: small-caps; }

#landing nav a:link { z-index: 8000; background-color: rgba(255, 255, 255, 0.5); text-decoration: none; }

#intro, #wrks { padding: 10vh 0; background: url("../static/imgs/ruler.svg") repeat-x top center; background-color: #fff; text-align: left; position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; }

#wrks h1 a { font-size: 2rem; }

.projlist { display: inline; text-transform: uppercase; font-size: 4.5rem; line-height: 4rem; font-weight: 600; text-decoration: none; }

li.projlist::after { content: ". "; }

.projlist a:link, .projlist a:visited { text-decoration: none; color: #02111b; }

.projlist:nth-child(odd) a:link, .projlist:nth-child(odd) a:visited { color: #93a3b1; }

.projlist:nth-child(3n + 3) a:hover, :nth-child(3n + 3) .projlist a:focus { color: #7fb528; }

.projlist:nth-child(3n + 1) a:focus, .projlist:nth-child(3n + 1) a:hover { color: #E45A2F; }

.projlist:nth-child(3n + 2) a:focus, .projlist:nth-child(3n + 2) a:hover { color: #166a6a; }

.modalDialog { position: fixed; top: 5vh; right: 5vw; padding: 3rem; border: 1px solid #02111b; margin: 0; background: rgba(255, 255, 255, 0.8); z-index: 1000; opacity: 0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; }

.modalDialog:target { opacity: 1; pointer-events: auto; }

.modalDialog > div { text-align: center; width: 400px; position: relative; margin: auto; padding: 0; background: #fff; overflow: hidden; display: flex; justify-content: center; align-items: center; }

/* //https://www.nucleo.com.au/using-flexbox-for-modal-dialogs/ .modalDialog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; position: fixed; top: 2vh; left: 25%; background: rgba(0,0,0,0.5); max-height: 60%; max-width: 50%; min-height: auto; } .modalDialog > div { background:white; //overflow-x: scroll; } // */
.modalDialog figcaption { z-index: 3000; }

.close { background: #93a3b1; color: #fff !important; line-height: 0.5em; position: absolute; right: 0; top: 0; text-align: center; width: 1em; text-decoration: none; font-weight: bold; padding: 0.25em; z-index: 2000; }

.close:hover { background-color: #7fb528; }

#home footer { box-sizing: border-box; width: 100vw; padding: 1rem; text-align: center; align-items: flex-end; background-color: #02111b; color: #fff; fill: #fff; }

#home footer a:link, #home footer a:visited { text-decoration: none; color: #fff; }

#home footer a:hover { color: #E45A2F; fill: #E45A2F; }

#home footer span, #home footer svg { display: block; margin: 0 auto; }

#intro article { column-count: 3; column-gap: 3rem; column-rule: 1px solid #93a3b1; }

#intro h1, #intro h2, #intro h3 { margin-bottom: 0; }

#intro p { margin: 0; }

/* banner e navigazione */
.navigation { height: 5.2rem; left: 0; max-width: 100%; display: block; width: 100%; z-index: 1; min-width: 380px; }

.jobtitle { font-size: 0.5em; }

nav ul { list-style: none; height: 5.2rem; /*margin-top: 2.2rem;*/ margin-bottom: 0; }

nav h1, nav li { display: inline-block; }

a.navigation-link, nav ul a { /*height: 5.2rem;*/ padding-bottom: 2.1rem; padding-right: 1em; display: inline-block; min-width: 8rem; text-align: center; }

main.container { padding-top: 5.5rem; padding-bottom: 5rem; }

aside figure { max-width: 100%; }

aside figcaption { font-size: small; }

wrapper figcaption { font-style: italic; }

.text p + p { margin-bottom: 0; text-indent: 3rem; }

p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2.5rem; }

main a:active, main a:hover { text-decoration: underline; }

#honeypot { display: none; /*makes the field not visible to humans*/ }

footer { margin-top: 3rem; padding: 2rem; text-align: center; font-size: smaller; line-height: 1em; clear: both; /*display: block; position: absolute; bottom: 0;*/ -ms-flex-item-align: end; align-self: flex-end; }

.foot { background-image: url("../static/imgs/harinezumi.svg"); background-attachment: scroll; background-position: 95% 95%; background-repeat: no-repeat; background-size: 8rem; }

.copy { float: right; font-size: small; }

/* bypass milligram.css*/
.row .column.column-20 { -webkit-box-flex: 0; -ms-box-flex: 0; -ms-flex: 0 0 19%; flex: 0 0 19%; max-width: 19%; }

form { clear: both; }

/* headroom styles http://wicky.nillia.ms/headroom.js/ */
.header--fixed { position: fixed; z-index: 10; right: 0; left: 0; top: 0; }

.burp { unicode-bidi: bidi-override; direction: rtl; }

.burp::before { content: "ti.iccir"; }

.burp::after { content: "@bew"; }

/* https://icomoon.io/ */
main a[href^="http"]:not(.burp)::after { content: " " url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgOCA4IiBmaWxsPSIjZmFsc2UiID48cGF0aCBkPSJNMCAwdjhoOFY2SDd2MUgxVjFoMVYwSDB6bTQgMGwxLjUgMS41TDMgNGwxIDEgMi41LTIuNUw4IDRWMEg0eiI+PC9wYXRoPjwvc3ZnPg=="); height: 1rem; width: 1rem; display: inline-block; margin: 0 0.5rem; }

a.map::before { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjQwIDEwMjYiIGZpbGw9IiNmYWxzZSIgPjxwYXRoIGQ9Ik0zMjAgMUMxNDMgMSAwIDE0NCAwIDMyMXMxNjAgNDE2IDMyMCA3MDRjMTYwLTI4OCAzMjAtNTI3IDMyMC03MDRTNDk3IDEgMzIwIDF6bTAgNDQ4Yy03MSAwLTEyOC01Ny0xMjgtMTI4czU3LTEyOCAxMjgtMTI4IDEyOCA1NyAxMjggMTI4LTU3IDEyOC0xMjggMTI4eiI+PC9wYXRoPjwvc3ZnPg==") " "; height: 1rem; width: 1rem; display: inline-block; margin: 0 0.5rem; }

a.download::after { content: " " url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZmlsbD0iI2ZhbHNlIiA+PHBhdGggZD0iTTEwNyAzODRoMjk4djQzSDEwN3YtNDN6bTI5OC0xOTJMMjU2IDM0MSAxMDcgMTkyaDg1VjY0aDEyOHYxMjhoODV6Ij48L3BhdGg+PC9zdmc+"); height: 1rem; width: 1rem; display: inline-block; margin: 0 0.5rem; }

.headroom { will-change: transform; -webkit-transition: -webkit-transform 0.25s ease-in-out; transition: -webkit-transform 0.25s ease-in-out; -o-transition: transform 0.25s ease-in-out; transition: transform 0.25s ease-in-out; transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out; }

.headroom--pinned { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); }

.headroom--unpinned { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }

main::-moz-selection { /* Code for Firefox */ background: #93a3b1; }

main::selection { background: #93a3b1; }

/****** NOW IT'S ALL LESS *****/
/* ----------------- background-background-colorS ------------------ */
body { background-color: #fff; /*paper*/ color: #02111b; /*373737 charcoal */ }

/* link in genere */
a:link { color: #305050; text-decoration: underline; }

a:visited { color: #364a4a; }

a:focus, a:hover { color: #166a6a; }

a:active { color: #E45A2F; }

a[href^="http"]:not(.burp) { background-color: #fff; color: #93a3b1; }

a[href^="http"]:hover:not(.burp) { background-color: #93a3b1; color: #fff; }

a[href^="http"]::after:not(.burp) { stroke: #93a3b1; fill: #fff; }

.navigation { border-bottom: 1px dotted #02111b; background-color: white; z-index: 999999; }

.title { font-size: 3rem; letter-spacing: 0.1rem; padding-top: 1rem; }

.navigation a:link, .navigation a:visited { color: #02111b; text-decoration: none; }

.navigation-list { background: url("../static/imgs/ruler-up.svg") repeat-x bottom right/8rem fixed; }

.navigation a:focus, .navigation a:hover { color: #E45A2F; }

/* link dei menù  menu */
nav { position: relative; z-index: 999; }

nav li a:hover { border-bottom: 0.5rem solid #E45A2F; }

nav a, nav a:visited { color: #02111b; }

nav li li a { height: 3rem; }

nav a:focus, nav a:hover { color: #93a3b1; }

nav li a.active, nav li a:active { color: #93a3b1; border-bottom: 0.5rem solid #7fb528; margin-bottom: 0.5rem; }

nav li li a.active, nav li li a:active { cursor: default; background-color: #02111b; }

a.navigation-link { color: #02111b; white-space: nowrap; }

a.navigation-link:hover { z-index: 99999; }

/* https://www.w3schools.com/howto/howto_css_dropdown.asp */
/* Dropdown Button */
.dropbtn { color: #02111b; cursor: pointer; }

/* The container <div> - needed to position the dropdown content */
.dropdown { position: relative; display: inline-block; text-align: right; width: auto; }

/* Dropdown Content (Hidden by Default) */
.dropdown-content { position: absolute; visibility: hidden; right: 0; height: auto; width: auto; z-index: 1; margin: 0; overflow: auto; will-change: transform, opacity, scale; -webkit-transition: opacity 600ms, visibility 600ms; transition: opacity 600ms, visibility 600ms; -ms-transform: scale(0, 0); /* IE 9 */ -webkit-transform: scale(0, 0); /* Safari */ transform: scale(0, 0); }

.dropdown-content li { display: inline-block; font-size: 0.75em; }

/* Links inside the dropdown */
.dropdown-content a { text-align: right !important; color: #fff !important; background-color: #02111b; padding: 0.5em; margin: 1px; text-decoration: none; display: block; width: auto; white-space: nowrap; }

/* Change color of dropdown links on hover */
.dropdown-content a:hover { background-color: #7d7d7d; }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content { visibility: visible; opacity: 1; z-index: 99999; -ms-transform: scale(1, 1); /* IE 9 */ -webkit-transform: scale(1, 1); /* Safari */ transform: scale(1, 1); }

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn { color: #E45A2F; }

/* end menù */
.hide { display: none; }

/* MEDIA QUERIES #############################à */
/* Larger than mobile screen @media (min-width: 40.0rem) {  } Larger than tablet screen @media (min-width: 80.0rem) {  } Larger than desktop screen @media (min-width: 120.0rem) {  }*/
@media screen and (min-width: 80rem) and (max-width: 20000px) { main aside, main header { float: left; width: 49%; } .slide { padding: 0; margin: 0; } main article.images { float: right; width: 49%; } footer { clear: both; } }

@media screen and (min-width: 30em) and (max-width: 50em) { .jobtitle { display: none; } .modalDialog { position: fixed; bottom: 0; right: 0; top: 0; left: 0; border: none; background: rgba(2, 17, 27, 0.8); } .modalDialog > div { text-align: center; width: auto; padding: 1rem; } }

@media screen and (max-width: 30em) { .jobtitle { display: none; } .title span { display: none; } }

@media screen and (max-width: 80em) { #wrks, #intro { padding-left: 1rem; padding-right: 1rem; } #intro article { column-count: 2; } #intro article #landing nav { display: none; } }

@media screen and (max-width: 50em) { #intro article { column-count: 1; } }

@media screen and (max-width: 40em) { #home section { padding: 0 1em; } footer.row { flex-direction: row; } .row .column.column-20 { /*flex:0 0 100%;*/ max-width: 100%; /*width: 100%;*/ padding: 0; margin: 0; } .modalDialog > div, .row .column.column-20 img { /*flex:0 0 100%;*/ width: 100%; /*width: 100%;*/ padding: 0; margin: 0; right: 0; bottom: 0; left: 0; top: 0; } .modalDialog { position: fixed; bottom: 0; right: 0; top: 0; left: 0; border: none; background: rgba(2, 17, 27, 0.8); } figure.slide { margin: 0.5rem 0 !important; } }