@font-face {
font-family: 'DuctusSq';
src: url(//criticalinfrastructures.net/wp-content/themes/ciip-theme/assets/fonts/Ductus/monospace/otf/DuctusMonoSquared.otf) format('opentype');
}
@font-face {
font-family: 'Ductus';
src: url(//criticalinfrastructures.net/wp-content/themes/ciip-theme/assets/fonts/Ductus/regular/webfonts/DuctusGeometric.woff2) format('woff2');
}
:root {
--color-black: #00001a;
--color-graydark: #636363;
--color-gray: #c5c5c5;
--color-pinkgray: #ebdaf0;
--color-blue: #4f1dff;
--color-bluedark: #2f225f;
--color-pinkgray: #dbc6e2;
--color-pink:  #b0f;
--color-pinklight:  #c290fd;
--color-bluegreen: #3a7e8a;
--color-green: #78fac6 ;
---text-logo: calc(12px + 48 * (100vw - 320px) / 1600);
--title-fontsize: calc(26px + 1.5vw);
--title-fontsize-s: calc(18px + 1vw);
--body-fontsize: calc(14px + 6 * (100vw - 320px) / 1600) !important;
--body-fontsize-s: calc(11px + 6 * (100vw - 320px) / 1600) !important;
} body {
color: var(--color-bluedark);
margin: 0.5% 2.5% 1.5% 2.5%;
background-color: var(--color-pinkgray);
font-family: 'Ductus';  
font-size: var(--body-fontsize) ; 
}
#page {
min-height: 100vh;
position: relative;
} @media screen and (min-width: 1025px) {
.cursor-landing {
width: 55vw;
height: 55vw;
border: 1px solid var(--color-pinklight);
background-color: transparent;
border-radius: 50% 50% 45% 40%;
box-shadow: 0 1px 1px var(--color-pinklight) inset,0 1px 50px var(--color-pinklight);
position: absolute;
pointer-events: none;
transform: translate(-50%, -50%);
transition: 0.05s ease-in-out;
z-index: 9999; 
}
.cursor {
width: 5vw;
height: 5vw;
border: 1px solid var(--color-pinklight);
background-color: transparent;
border-radius: 50% 50% 45% 40%;
box-shadow: 0 1px 1px var(--color-pinklight) inset,0 1px 50px var(--color-pinklight);
position: absolute;
pointer-events: none;
transform: translate(-50%, -50%);
transition: 0.05s ease-in-out;
z-index: 9999; 
}
} h1 {
font-size: var(--title-fontsize);
}
h2 {
font-size: var(--title-fontsize-s);
}
p.bodyText {
font-family: 'Ductus';        
font-size: var(--body-fontsize);
}
p.smallText {
font-family: 'Ductus';        
font-size: var(--body-fontsize-s);
}
.fonts > * {
transition: color 0.3s ease-in-out;
}
.fonts {
width: 60%;
} .nav {
border-radius: 30px;
display: flex;
flex-wrap: row;
flex-wrap: wrap;
justify-content: space-around;
margin: 30px 0%;
}
.menu {
padding: 10px;
box-shadow: 0 4px 10px var(--color-blue) inset,0 4px 25px var(--color-pinklight);
}
.menu a {
text-decoration: none !important;
border-radius: 30px;
}
.menu a:hover {
box-shadow: 0 4px 4px var(--color-pinklight) inset,0 4px 4px var(--color-pinklight) !important;
}
.menu .selected {
background-color: var(--color-blue);
color: var(--color-pinkgray);
}
.menu .selected:hover {
color: var(--color-pinkgray);
}
.submenu {
padding: 10px;
}
.submenu a {
text-decoration: none;
border-radius: 30px;
margin: 10px 0%;
box-shadow: 0 4px 10px var(--color-pinklight) inset,0 4px 25px var(--color-pinklight);
}
.menumobile {
display: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
#site-navigation {
display: flex;
width: 95%;
flex-direction: column;
align-items: end;
}
.nav-button {
line-height: calc(24px + 6 * (100vw - 320px) / 1600);
text-align: right;
}
.menumobile {
display: initial;
width: fit-content;
box-shadow: 0 4px 10px var(--color-pinklight) inset, 0 4px 25px var(--color-blue) !important;
padding: 10px;
}
.nav {
flex-direction: column;
margin: 5px 0%;
}
.menu {
width: fit-content;
}
.hide-mobile-menu {
display: none;
}
} button{
font-family: 'Ductus';        
background: transparent;
padding: 0.5rem;
border: none;
border-radius: 30px;
box-shadow: inset 5px 5px 5px var(--color-pinklight);
}
button:hover {
box-shadow:  5px 5px 5px var(--color-pinklight);
}
a {
color: var(--color-bluedark);
text-decoration: underline solid var(--color-pink);
text-decoration-thickness: 0.1rem;
}
a:hover {
color: var(--color-pink);
text-decoration: underline dotted var(--color-pink);
text-decoration-thickness: 0.2rem;
cursor: grab;
} img {
width: 100%;
height: 100%;
border-radius: 50px 30px;
}
#logo {
width: 20vw;
max-width: 300px;
min-width: 100px;
border-radius: 0px !important;
}
.notLogo img {
border-radius: 50px 30px;
width: 100%;
}
figcaption {
font-size: var(--body-fontsize-s);
}
.logo-landing{
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
align-items: center;
}
#sublogo {
font-family: 'DuctusSq';  
font-size: var(---text-logo);
width: 70vw;
} @keyframes changeBorderRadius {
0% {
border-top-left-radius: var(--top-left-radius);
border-top-right-radius: var(--top-right-radius);
border-bottom-right-radius: var(--bottom-right-radius);
border-bottom-left-radius: var(--bottom-left-radius);
}
100% {
border-top-left-radius: var(--top-left-radius2);
border-top-right-radius: var(--top-right-radius2);
border-bottom-right-radius: var(--bottom-right-radius2);
border-bottom-left-radius: var(--bottom-left-radius2);
}
}
@keyframes changeBorderRadius-Tags {
0% {
border-top-left-radius: 25px;
border-top-right-radius: 50px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 50px;
}
100% {
border-top-left-radius: 50px;
border-top-right-radius: 30px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 20px;
}
}
.new_event {
box-shadow: 0 1px 1px var(--color-pinklight) inset,0 1px 25px var(--color-green);
}
.past_event {
box-shadow: 0 1px 1px var(--color-pinklight) inset,0 1px 25px var(--color-gray);
}
.past_event img {
filter: grayscale(100%);
transition: 0.25s;
}
.past_event img:hover {
filter: grayscale(0%);
} .footer {
color: var(--color-pinkgray);
background-color: var(--color-bluedark);
border-radius: 60px;
padding: 10px 30px 20px 30px;
box-shadow: 0 4px 10px var(--color-blue) inset,0 4px 25px var(--color-pinklight);
margin-top: auto;
}
.footer a {
color: var(--color-pinkgray) !important;
}
.footer > a:visited {
color: var(--color-pinkgray) !important;
}
.socialmedia {
font-family: "Ductus";
background: transparent;
padding: 0.5rem;
border: none;
border-radius: 30px;
box-shadow: inset 5px 5px 5px var(--color-pinklight);
text-decoration: none !important;
}
.socialmedia:hover {
box-shadow: 5px 5px 5px var(--color-pinklight);
}
@media screen and (max-width: 499px) {
.socialmedia {
display: block;
width: 50%;
margin: auto;
text-align: center; }
.socialmedia:nth-of-type(even) {
margin: 1rem auto;
}
} .skew {
transform: skewY(-20deg);
width: fit-content;
margin: 4rem 0 10rem 0;
}
#home .grid-landing {
display: grid;
gap: 0%;
grid-template-columns: 25% 25%  25%  25%;
grid-auto-rows: fit-content;
align-items: center;
justify-items: stretch;
margin: 10% 0%;
}
#home h2 a {
text-decoration: none !important;
}
#home .grid-landing article {
margin: -5%;
border: none;
padding: 22px;
border-top-left-radius: var(--top-left-radius2);
border-top-right-radius: var(--top-right-radius2);
border-bottom-right-radius: var(--bottom-right-radius2);
border-bottom-left-radius: var(--bottom-left-radius2);
animation: changeBorderRadius 10s alternate;
animation-iteration-count: 10;
}
#home .grid-landing article:hover {
background: var(--color-pinkgray); 
box-shadow: 0 4px 10px var(--color-pinklight) inset,0 4px 5px var(--color-pinklight);
opacity: 96%;
z-index: 99;
}
#home .grid-landing article:nth-child(even) {
transform: skewY(-25deg);
}
#home .grid-landing article:nth-child(odd) {
transform: skewY(20deg);
}
#home .grid-landing article img {
border-radius: 50px 30px;
width: 100%;
}
#home .grid-landing article .tag {
font-size: var(--body-fontsize-s);
box-shadow: inset 0 4px 10px var(--color-pinklight) , inset 0 4px 25px var(--color-pinklight);
text-decoration: none;
border-radius: 30px;
}
@media screen and (max-width: 1024px) {
#home .grid-landing article:nth-child(even) {
transform: skewY(-1deg);
}
#home .grid-landing article:nth-child(odd) {
transform: skewY(1deg);
}
}
@media screen and (min-width:500px) and (max-width: 1024px) {
#home .grid-landing {
display: grid;
gap: 2% 5% !important;
grid-template-columns: 45% 45% !important;
justify-content: center;;
padding-bottom: 25%;
}
.skew {
margin: 4rem 0 7rem 0;
}
}
@media screen and (min-width:0px) and (max-width: 499px) {
#home .grid-landing  {
display: block !important;
gap: 5%;
grid-template-columns: 95%;
align-items: stretch;
justify-items: stretch;
}
#home .grid-landing article {
margin: 0;
}
.skew {
margin: 4rem 0 5rem 0;
}
} body#about {
color: var(--color-pinkgray);
background: -moz-linear-gradient(180deg,  var(--color-pinkgray)  0%,  var(--color-bluedark)  40%,  var(--color-bluedark)  100%);
background: -webkit-linear-gradient(180deg, var(--color-pinkgray)  0%,  var(--color-bluedark)  40%,var(--color-bluedark) 100%);
background: linear-gradient(180deg,var(--color-pinkgray)  0%, var(--color-bluedark)  40%, var(--color-bluedark)  100%);
}
body#about .menu a {
color: var(--color-pinkgray) !important;
}
body#about .menu a:hover {
color: var(--color-bluedark) !important;
box-shadow: inset 0 4px 10px var(--color-pinkgray) , inset 0 25px 25px var(--color-pinkgray) !important;
}
body#about article p {
font-size: var(--title-fontsize-s); 
}
@media screen and (min-width: 729px ) and (max-width: 819px ) {
body#about article {
padding: 10% 0 25% 0; 
}
}
@media screen and (min-width: 820px ) and (max-width: 1024px ) {
body#about article {
padding: 2% 0 25% 0; 
}
}
@media screen and (max-width: 728px ) {
body#about article {
font-size: var( --body-fontsize);
padding: 10% 0; 
}
} body#people {
background: -moz-linear-gradient(180deg,  var(--color-pinkgray)  0%,  var(--color-pinkgray)  45%,  var(--color-pinklight)  100%);
background: -webkit-linear-gradient(180deg, var(--color-pinkgray)  0%,  var(--color-pinkgray)  45%,var(--color-pinklight) 100%);
background: linear-gradient(180deg,var(--color-pinkgray)  0%, var(--color-pinkgray)  45%, var(--color-pinklight)  100%);
}
#people .grid-four {
display: grid;
gap: 0%;
grid-template-columns: 25% 25%  25%  25%;
grid-auto-rows: fit-content;
align-items: center;
justify-items: stretch;
margin: 5.5% 0%;
}
#people .cell {
margin: -5%;
border: none;
padding: 22px;
border-top-left-radius: var(--top-left-radius2);
border-top-right-radius: var(--top-right-radius2);
border-bottom-right-radius: var(--bottom-right-radius2);
border-bottom-left-radius: var(--bottom-left-radius2);
animation: changeBorderRadius 10s infinite alternate;
animation-iteration-count: 10;
box-shadow: 0 1px 1px var(--color-pinklight) inset,0 1px 25px var(--color-green);
}
#people .cell:hover {
background: var(--color-pinkgray); 
box-shadow: 0 4px 10px var(--color-pinklight) inset,0 4px 5px var(--color-pinklight);
opacity: 96%;
z-index: 99;
}
#people .cell img {
border-radius: 50px 30px;
width: 100%;
}
#people .cell a {
text-decoration: none !important;
}
@media screen and (max-width: 1024px) {
#people .grid-four {
padding-bottom: 15%;
}
#people h1 {
padding-bottom: 2rem;
}
}
@media screen and (min-width: 500px) and (max-width: 1024px) {
#people .grid-four {
display: grid;
gap: 5% !important;
grid-template-columns: 45% 45% !important;
justify-items: stretch !important;
}
#people h1:nth-child(even) {
padding: 4rem 0 2rem 0;
}
}
@media screen and (min-width: 0px) and (max-width: 499px) {
#people .grid-four  {
display: block !important;
gap: 5%;
grid-template-columns: 95%;
align-items: stretch;
justify-items: stretch;
}
#people .cell {
margin: 0;
}
} @media screen and (min-width: 768px) {
body#people-article img {
width: 30%;
}
} body#events, #events-article {
background: -moz-linear-gradient(180deg,  var(--color-pinkgray)  0%,  var(--color-pinkgray)  90%,  var(--color-bluedark)  100%);
background: -webkit-linear-gradient(180deg, var(--color-pinkgray)  0%,  var(--color-pinkgray)  90%,var(--color-bluedark) 100%);
background: linear-gradient(180deg,var(--color-pinkgray)  0%, var(--color-pinkgray)  90%, var(--color-bluedark)  100%);
}
#events .list {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 10%;
}
#events .list .cell {
display: flex;
flex-direction: row;
margin: 0 0 -2% 0;
}
#events h1 {
padding-bottom: 2rem;
}
#events .wp-block-latest-posts__post-title {
text-decoration: none;
font-size: 1.17em;
}   
#events .cell {
margin: -5%;
border: none;
padding: 22px;
border-top-left-radius: var(--top-left-radius2);
border-top-right-radius: var(--top-right-radius2);
border-bottom-right-radius: var(--bottom-right-radius2);
border-bottom-left-radius: var(--bottom-left-radius2);
animation: changeBorderRadius 10s infinite alternate;
animation-iteration-count: 10;
}
#events .cell:hover {
background: var(--color-pinkgray); 
box-shadow: 0 4px 10px var(--color-pinklight) inset,0 4px 5px var(--color-pinklight);
opacity: 96%;
z-index: 99;
}
#events .cell:hover .read-more {
display: block;
}
#events .read-more {
display: none;
}
#events .cell img {
max-width: 200px;
margin-right: 2%;
}
@media screen and (max-width: 1024px) {
#events .cell {
margin: 2%;
}
#events .read-more {
display: initial;
}
}
@media screen and (max-width: 728px) {
#events .list .cell {
flex-direction: column;
}
} #projects .grid-two {
display: grid;
gap: 0%;
grid-template-columns: 50% 50%;
grid-auto-rows: fit-content;
align-items: center;
justify-items: stretch;
margin: 5.5% 0%;
}
body#projects, #projects-article {
background: -moz-linear-gradient(180deg,  var(--color-pinkgray)  0%,  var(--color-green)  85%,  var(--color-green)  100%);
background: -webkit-linear-gradient(180deg, var(--color-pinkgray)  0%,  var(--color-green)  85%,var(--color-green) 100%);
background: linear-gradient(180deg,var(--color-pinkgray)  0%, var(--color-green)  85%, var(--color-green)  100%);
}
#projects .cell {
margin: -5%;
border: none;
padding: 22px;
border-top-left-radius: var(--top-left-radius2);
border-top-right-radius: var(--top-right-radius2);
border-bottom-right-radius: var(--bottom-right-radius2);
border-bottom-left-radius: var(--bottom-left-radius2);
animation: changeBorderRadius 10s infinite alternate;
animation-iteration-count: 10;
box-shadow: 0 1px 1px var(--color-pinklight) inset,0 1px 25px var(--color-green);
}
#projects .cell:hover {
background: var(--color-pinkgray); 
box-shadow: 0 4px 10px var(--color-pinklight) inset,0 4px 5px var(--color-pinklight);
opacity: 96%;
z-index: 99;
}
#projects .cell img {
border-radius: 50px 30px;
width: 100%;
}
#projects .cell a {
text-decoration: none !important;
font-size: 1.17em;
}
@media screen and (max-width: 1024px) {
#projects .grid-two {
margin: 10% 0;
}
}   
@media screen and (min-width: 500px) and (max-width: 1024px) {
#projects .grid-two {
display: grid;
gap: 5% !important;
grid-template-columns: 45% 45% !important;
justify-items: stretch !important;
padding: 5% 0;
}
}
@media screen and (min-width:0px) and (max-width: 499px) {
#projects .grid-two  {
display: block !important;
gap: 5%;
grid-template-columns: 95%;
align-items: stretch;
justify-items: stretch;
}
#projects .cell{
margin: 0;
}
} body#pub {
background: -moz-linear-gradient(180deg,  var(--color-pinkgray)  0%,  var(--color-pinkgray)  90%,  var(--color-bluedark)  100%);
background: -webkit-linear-gradient(180deg, var(--color-pinkgray)  0%,  var(--color-pinkgray)  90%,var(--color-bluedark) 100%);
background: linear-gradient(180deg,var(--color-pinkgray)  0%, var(--color-pinkgray)  90%, var(--color-bluedark)  100%);
}
#pub .entry-content {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 10%;
}
.years {
width: auto;
padding: 22px;
box-shadow: 0 4px 10px var(--color-pinklight) inset,0 4px 5px var(--color-pinklight);
border-radius: 5rem;
margin-bottom: 2rem;
}
.year-button {
font-size: var(--title-fontsize-s);
}
.year-button a {
color: var(--color-bluedark);
background-color: transparent;
padding: 0;
}
.active a {
color: var(--color-pink);
}
.hidden {
overflow: hidden;
display: none !important;
}
#pub h3 {
padding-top: 2rem;
}
@media screen and (min-width: 500px) and (max-width: 1024px) {
#pub .footer {
position: absolute;
bottom: 8px;
}
} #federation .entry-content {
padding-bottom: 10%;
min-height: 25vh;
}
@media screen and (max-width: 767px) {
#federation .entry-content {
min-height: 30vh;  
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
#federation .entry-content {
min-height: 50vh;  
}
} body#tag-results {
background: -moz-linear-gradient(180deg,  var(--color-pinkgray)  0%,  var(--color-green)  85%,  var(--color-green)  100%);
background: -webkit-linear-gradient(180deg, var(--color-pinkgray)  0%,  var(--color-green)  85%,var(--color-green) 100%);
background: linear-gradient(180deg,var(--color-pinkgray)  0%, var(--color-green)  85%, var(--color-green)  100%);
box-shadow: none;
text-decoration: none;
}
body#tag-results #primary {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5%;
}
body#tag-results .nav-links {
padding: 3rem 0 1rem 0;
}
body#tag-results .article {
margin: 0 0 -2% 0;
border: none;
padding: 22px;
border-top-left-radius: var(--top-left-radius2);
border-top-right-radius: var(--top-right-radius2);
border-bottom-right-radius: var(--bottom-right-radius2);
border-bottom-left-radius: var(--bottom-left-radius2);
animation: changeBorderRadius 10s infinite alternate;
animation-iteration-count: 10;
box-shadow: 0 1px 1px var(--color-pinklight) inset,0 1px 25px var(--color-green);
}
body#tag-results .tag:hover {
text-decoration: none !important;
background: var(--color-pinkgray); 
box-shadow: 0 4px 10px var(--color-pinklight) inset,0 4px 5px var(--color-pinklight);
opacity: 96%;
z-index: 99;
}
body#tag-results #page #primary article {
font-size: var(--body-fontsize-s);
box-shadow: inset 0 4px 10px var(--color-pinklight) , inset 0 4px 25px var(--color-pinklight);
text-decoration: none;
border-radius: 30px;
display: flex;
flex-direction: column;
}
body#tag-results #page #primary article h2 a {
text-decoration: none !important;
}
body#tag-results #page #primary article img {
max-width: 200px;
}
body#tag-results #page #primary article:hover {
background: var(--color-pinkgray); 
box-shadow: 0 4px 10px var(--color-pinklight) inset,0 4px 5px var(--color-pinklight);
opacity: 96%;
z-index: 99;
}
body#tag-results .article:hover .read-more {
display: block;
}
body#tag-results .read-more {
display: none;
}
@media screen and (max-width: 1024px) {
body#tag-results #page #primary article {
margin: 2%;
}
body#tag-results .read-more {
display: initial;
}
body#tag-results .nav-links {
padding: 1rem 0;
}
}
@media screen and (max-width: 728px) {
body#tag-results .article {
flex-direction: column;
}
} @media screen and (max-width: 1024px) {
.article-body {
padding: 10% 3%;
}
}
@media screen and (min-width: 1025px) {
.article-body {
width: 80%;
padding: 0% 10% 5% 10%;
}
} .tag {
font-size: var(--body-fontsize-s);
box-shadow: inset 0 4px 10px var(--color-pinklight) , inset 0 4px 25px var(--color-pinklight);
text-decoration: none;
border-radius: 30px;
}
.tag:hover {
text-decoration: none !important;
}
@media screen and (max-width: 728px) {
.nav .tag {
max-width: fit-content;
margin: 0.25rem;
}
}
@media screen and (min-width: 729px) and (max-width: 768px) {
.nav:nth-of-type(even) {
flex-direction: row;
}
.nav .tag {
flex-wrap: wrap;
justify-content: space-around;
margin: 1rem;
}
} .error-404 {
padding-bottom: 10%;
}
@media screen and (min-width: 729px ) and (max-width: 1024px ) {
.error-404 {
padding: 5% 0 40% 0;
}
}