@charset "utf-8";
:root {
--bg: white;
--text: black;
--primary-color: #FFF;
--bg-color: #FFF;
--primary-text-color: #000;
--secondary-text-color: #0000FF;
--modal:block;
}
/* ********* MOBILE FIRST CSS FOR ART + AUSTRALIA ISSUE 57.2, 2021 ~>
DEVELOPED BY KAREN ANN DONNACHIE & ANDY SIMIONATO
KARENANDY.COM , THISISAMAGAZINE.COM , ATOMICACTIVITY.COM ********* */
/* BASIC UNVERSAL PAGE PROPERTIES */
/* MOBILE FIRST : DESKTOP PROPERTIES AS MEDIA QUERIES */
#listenText, #duration{display:none;}
html {width:100vw;}
*, html {
box-sizing: border-box;
border: none;
outline: none;
margin: 0;
padding: 0;
scroll-padding-top: 1.6em;
}
#color-mode:checked ~ * {
--bg: black;
--text: white;
}
.dark-mode {
--bg: black;
--text: white;
--primary-color: black;
--secondary-text-color: yellow;
--primary-text-color: white;
}
.country{--modal:none;}
.zoomy{height:100vh;width:auto;z-index:200;cursor: zoom-out;}
.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
body {
position:relative;
width: 100%;
margin: 0;
padding: 0;
display:grid;
overflow-x: clip;
overflow-y: scroll;
font-size:14px;
font-family: eidetic-neo, Helvetica, Arial, sans-serif;
background-color: var(--bg);
color: var(--text);
background-size: cover;
background-position: 0px;
}
.noscroll{overflow-y: hidden;}
/*****PRELOAD LANDING PAGE IMAGES & FONTS **********/
body::after{
position:absolute; width:0; height:0; overflow:hidden; z-index:-1; // hide images
content:url(../aaImages/gallery_bg.jpg) url(../fonts/AAok.otf) ; // load images
}
.profiles summary, #refs summary {
border-bottom: unset;border-bottom: 0px !important;
}
details summary {
cursor: pointer;
border-bottom: 2px solid !important;
line-height: 1.6em;
align:center;
margin-left: -0.5em;
}
details a:not(.artLink) {
cursor: pointer;
border-bottom: 2px solid !important;
line-height: 1.6em;
}
.artLink{line-height:0.5em;}
details summary > * {
display: inline;
align:center;
}
details > summary {
list-style-type: '';
margin-left:-1.5em;
}
.form > details > summary {
list-style-type: '';
margin-left:0;
}
details[open] > summary {
list-style-type: '';
}
details summary::-webkit-details-marker { display:none; }
details > summary::before {/*font-size:1.5em;font-family:monospace;*/content: "→";vertical-align: bottom;}
details[open] > summary::before {/*font-size:1.5em;font-family:monospace;*/
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);content: "→ ";
padding:0;vertical-align: bottom;/* Rotate from top left corner (not default) */
transform-origin: 50% 50%;
display:inline-block;
}
#aa_menu{
background-color:var(--text);
color:var(--primary-color);
}
@media (min-width: 600px) and (orientation: landscape){
#scrolldown {
top: 84%;
}
}
@media (max-width:400px){
.wordtitle {
font-size:1.1em !important;
}
}
div.name:hover > .wordtitle, div.name:active > .wordtitle{animation:unset;}
.wordtitle {
font-size:1.1em;
overflow:ellipsis;
/*word-break:break-all;*/
max-width:80%;
animation:unset;
/*-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;*/
-webkit-transform: perspective(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
display:inline-block;
}
div.name:hover > .wordtitle {
color:inherit;
animation:unset;
/*-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;*/
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}
#listen{width:100%;}
#scrolldown{position: absolute; height: 25vh;top:82%;font-size: 60pt;color: white;z-index: 99;cursor:pointer;font-family: aa_titles_new;}
.colophon{padding-left:2em;}
html { width:100%;}
@font-face {
font-family: 'aa_titles';
line-height:1em;
padding-top:0.1em;
/*src: url('../fonts/AAok.otf');*/
src: url('https://artandaustralia.com/preview/fonts/Questrial-Regular.ttf');
font-feature-settings: "kern" 1;
}
@font-face {
font-family: 'aa_titles_new';
line-height:1em;
padding-top:0.1em;
/*src: url('../fonts/AAok.otf');*/
src: url('../fonts/AAokRegular2048em.otf');
}
@font-face {
font-family: 'editorial';
line-height:1em;
src: url('../fonts/PPEditorialNew-Regular.otf');
}
/* FULLSCREEN ELEMENT */
#container::backdrop {
background:none;
}
#element:fullscreen {
width:100%;
margin: 0;
}
#footnotes {
width: calc(70vw - 3em);
/*margin-left: -3em;*/
padding-top: 1em;
margin-top: 1em;
font-size: 0.8em;}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sup > a { text-decoration:none !important;}
sup > a:hover{font-style: italic;text-decoration:none !important;}
.footnotes sup {
top:0; font-size:inherit;}
.footnotes sup::before{content:"[";}
.footnotes sup::after{content:"]";}
sub {
top: 0.4em;
}
#footnotes a {text-decoration:none;border-bottom: 0px solid !important;text-decoration:underline; text-decoration-style:wavy;text-underline-offset: 0.2em;}
#footnotes details > summary{border-bottom:none !important;margin-left:0px;}
.links {text-align:left; font-size:1.2em;padding-left: 1.5em;}
.last{min-height:4em !important;}
/* HEADER + MENU */
.coverPage {
height:90vh;}
#header {
line-height: 1.6;
position: fixed;
top: 0;
left: 0;
width: 100vw;
margin-top:0px !important;
height: 2.4em !important;
z-index:199;
/* background-image:linear-gradient(to right, aqua, yellow); FLUO GREEN */
text-align: center;
color:black !important;
/* overflow:hidden; */
}
.bw img{-webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
filter: grayscale(80%); }
.grid{margin:0;
text-align: center;
display: block;
max-width: 100%;
grid-gap: 0.5em;}
.grid img{object-fit: contain;display: table-row-group;max-width: unset;
max-height: unset; */
width: auto;
}
.twoUp {width:100%;
height: auto;
display: inline-flex;
position: relative;
/* background-color: lightgreen; */
opacity: 1;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
margin-inline-end: 0;
}
#menuBuffer{width:0%;}
#search{text-align:right;width:50%;margin-top: -0.2em;margin-left:-0.5em;}
#searchInput{display:none;}
#magnific{text-align: right;}
#magnific svg{ width: 1em !important;
height: 86% !important;}
#aa_menu{width: calc(100vw);text-align:left;margin-left: -0.5em;}
#magmenu{width: calc(100vw + 1em);text-align:left;/*border-top: 2px solid black;*/user-select:none;
/*margin-left: -1.2em;*/
color:var(--primary-text); background-color:#44FF00;display:none;}
::-webkit-scrollbar {
display: none;
}
.a2a_svg {-webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
filter: invert(100%);background-color:#C9C9C9 !important;display:none;}
#usermenu{width: calc(100vw + 1em);text-align:left;left: -50vw;color:var(--primary-text); background-color:grey;}
.menuitem{width:100%;}
#magmenu.dropdown-content{left: calc(25%);
width: 100%;
max-height: 100%;
overflow-y: scroll;
/*left: calc(-13vw - 0em);width:100vw;*/}
#aa_menu.dropdown-content a{background-color:black;color:white;border-color:white;line-height: inherit;}
#magmenu.dropdown-content a{/*background-color:#44FF00;*/color:black;line-height: inherit;}
#usermenu.dropdown-content a{background-color:grey;color:white;border-color:white;line-height: inherit;}
#aa_menu.dropdown-content{ }
div.menu{
position: absolute;
display: inline-flex;
text-align: justify;
font-weight:400;
width:100%;
left: 0;
padding: 0.2em;
padding-top: 0em;
height: auto;
z-index: 200;
}
.menu a, .menu a:hover, .menu a:active, .menu a:visited {
z-index: 200;
text-transform: capitalize;
}
.menu a:hover {
}
.home::before{ content: "A + a";}
.inlinepic{ overflow:hidden;}
#Hero {font-size: 1.2em;
/*font-family: eidetic-neo, Garamond, serif, ui-serif;*/}
figcaption {
-webkit-user-select: none;
-webkit-touch-callout: none;
text-align: left;
/*background: rgba(255,255,255,1);*/
position: absolute;
bottom: 0em;
left: 0px;
line-height: 1em;
font-size: 1em;
width: 100%;
height: 3em;
z-index: 1;
transition: all 0.1s ease-in-out;
/*background: rgba(0,0,0,1);*/
padding: 1em;
}
.figcaptionmore {
display: none;
color:white;
}
figcaption:hover, figcaption:active, figcaption:focus {
background: rgba(0,0,0,0.6);
color:white !important;
width:100%;
height: max-content;
transition: all 0.5s ease-in-out;
display: inline-block;
}
figcaption:hover .figcaptionmore, figcaption:active .figcaptionmore, figcaption:focus .figcaptionmore {
display: inline;
}
/* LARGE SECTION | ARTICLE TITLES */
#title {
position: absolute;
width: 100%;
height:100%;
text-align: center;
/* padding: 0.6em;
*/ margin: auto;
}
.titlefade{opacity:1;transition: all 1s ease-in-out;}
.titlefade:hover{opacity:0;transition: all 1s ease-in-out;}
/* Page titles this 'char' style is h1 */
h1, .title{
overflow-wrap: anywhere;
text-wrap:balance;
/*position: absolute;*/
left:5%;
/* top: calc(45% - 1em); */
/* top: -55vh;
*/ width: 90%;
line-height: 1.05em;
text-align: center;
font-family: aa_titles, aktiv-grotesk, Helvetica, sans-serif ;
font-weight: 300;
font-size: clamp(4rem, -0.875rem + 8.333vw, 5.5rem);
text-align: center;
background: none;
}
h1:hover{/*font-family: eidetic-neo;
padding-bottom: 0.1em;
line-height: 0.9em;
font-size: 2.4em;*/}
h1:hover .title{width:85%;}
h3{line-height: 1em;
text-align: left;
font-family: aktiv-grotesk, Helvetica, sans-serif ;
font-weight: 300;font-size:1em; }
h3.input {position:absolute; left:30%;}
.liminalSpace.center{justify-content: center !important; text-overflow:ellipsis;white-space: nowrap;}
.center{text-align:center; }
.white:hover{ color: white; }
.white{ color: white; }
input[type=text], input[type=email] {font-size:1em;background-color: #7c7c7c; color: black;border:none;border-bottom: 2px solid black;}
.metaSummary input, .metaSummary select{background-color: #808080; color:black;min-width:60%;font-size: 20px;border:1px solid black;}
select{font-size: 1em;}
.tox-statusbar__branding{visibility:hidden;}
.tox .tox-tbtn svg, #tinymce {background-color:var(--bg-color);
border-color:var(--primary-text-color);
fill: var(--primary-text-color) !important;
color:var(--primary-text-color) !important;}
.tox-tinymce {margin-top:-2px;background-color:var(--bg-color) !important;
border-color:var(--primary-text-color) !important;
color: var(--primary-text-color) !important;
}
textarea {width:100%;height: fit-content !important;font-size:0.8em;background-color:var(--bg-color) !important;
color:var(--primary-text-color) !important;}
button{font-size:1em;}
.with-border{border:2px solid black !important;width:100%; }
#formContent{ position: relative;
left: 0;top:0;
width: 100%;}
h3 {line-height:1.5em; }
.editable {position:absolute;min-height:20%;width:80%; left:10%;line-height:1.6em;
border: 1px dashed black;}
.noBG{background-color: #808080;width:50%;position:absolute;left:30%;color:black;}
#Images{position:relative;width:90%;}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: black;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: black;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: black;
}
.igrid{display:inline-grid;}
.profile-upload:hover input.upload{
display:block;
}
.fade{position:relative;
/* background-color: lightgreen; */
opacity: 1;
}
/* (A) FIXED WRAPPER */
.hwrap {
overflow: hidden; /* HIDE SCROLL BAR */
/*background: #eee;*/
max-width: 75vw;
}
/* (B) MOVING TICKER WRAPPER */
.hmove { display: flex; }
/* (C) ITEMS - INTO A LONG HORIZONTAL ROW */
.hitem {
flex-shrink: 0;
max-width: fit-content;
box-sizing: border-box;
overflow: hidden;
max-width: 75vw;
float: left;
white-space: nowrap;
text-overflow: ellipsis;
}
/* (D) ANIMATION - MOVE ITEMS FROM RIGHT TO LEFT */
/* 4 ITEMS -400%, CHANGE THIS IF YOU ADD/REMOVE ITEMS */
@keyframes tickerh {
0% { transform: translate3d(0%, 0, 0); }
50% { transform: translate3d(-100%, 0, 0); }
50.1% { transform: translate3d(100%, 0, 0); }
100% { transform: translate3d(0%, 0, 0); }
}
.hmove { }
.hmove:hover, .hmove:active { animation: tickerh linear 12s forwards 1; animation-play-state: running;transform: translate3d(0%, 0, 0); }
.hmove:hover .hitem, .hmove.hover .hitem, .hmove:active .hitem, .hmove.active .hitem {text-overflow:unset;max-width: fit-content;}
/* HOME PAGE | SECTIONED PAGES */
div.menu{font-size:1.6em;}
.grid-container {
z-index:50;
position: relative;
margin-top: 4em; /* leaving room for header 38px and some margin */
height: calc(100vh - 6em);
width: 100%;
padding: 0% 2% auto 2%;
display: grid;
/* desktop grid-template-areas:
'. . middle . right'
'left . middle . right'
'left . footer . .'
'. . footer . .'
'footer2 footer2 footer2 footer2 footer2'; */
grid-template-areas:
'. middle middle right'
'. middle middle right'
'left footer footer .'
'left footer footer footer2' ;
grid-template-columns: 15% 35% 35% 15%;
grid-template-rows: 15% 35% 35% 15%;
max-width: 100vw;
}
video {
width: 100% !important;
height: 100% !important;
object-fit: contain;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.html5-video-player, div#player{width: 100% !important;
height: 100% !important;object-fit: cover;}
/* The grid container */
#featureContainer {
position: absolute;
z-index:-1;
top: 2em;
padding-top:1.6em; /* leaving room for header 38px and some margin */
left:0;
width: 100%;
margin: 0;
}
#featureContainer img{width:120%;margin-left:-10%;height:auto;}
#defaultCanvas0, {position:absolute; top:2em; height:calc(100% - 2em);width:100%;box-shadow: 0px 25px 30px grey;z-index:50; }
.headerPic{position:absolute; top:2em;width:100%;box-shadow: 0px 25px 30px grey;z-index:50; }
.headerPic img{
display: flex;
width: 100%;
min-height: 75vh;
width: 100vw;
height: auto;
/* width: auto; */
position: relative;
top: auto;
overflow: hidden;}
.plainContainer {
position: relative;
z-index:-1;
top: 2em;
/* padding-top:10px; leaving room for header 38px and some margin */
left:0;
width:100%;
min-height:calc(100% - 3.2em);
min-width:100%;
overflow:hidden;
margin: 0;
text-align:center;
}
.full img{min-height:100%;}
.liminalSpace{
z-index:51;
color:var(--text);
height:1.6em;
line-height: 1.8em;
scroll-behavior: smooth;
background-color:inherit;
font-size:1.6em;
text-align:center;
position:sticky;
top:1.6em;
width: 100vw;
margin-top: 0px;
padding-left: 1em;
padding-right:1em;
border-bottom:solid 2px black;
}
.liminalSpace:not(.header){display: flex;
align-items: center;justify-content:space-between;
}
.liminalSpace + .flow {border-top:none !important;}
.fixed { position: fixed;}
#playButton{display:none;float left;}
#go-button{min-width: 10em;}
/* .playButton{
visibility:hidden;
} */
.sketch {
width:100%;
z-index:5;
}
.fullImage{
background-image: url(aaImages/warathome_resized/The-war-at-home_Jon-Cattapan_2020-Untitled-8.jpg);
background-size:cover;
height:100%;
background-position:top;
background-repeat: no-repeat;
}
#pictures {
position:absolute;
left:0;
width: 100%;
top:300%;
}
#pictures1 {position:absolute;top:200%;left:0;width:100%;z-index:42;}
.pic1{width:30%;float:left;}
.picBig {width:200%;}
#pictures2 {
position:absolute;
right:0;
top:100%;
width: 30%;
text-align: right;
z-index:43;
}
#pictures4{
position:absolute;
right:0;
top:300%;
width: 30%;
text-align: right;
}
#pictures5{
position:fixed;
left:0px;
z-index:0;
bottom:0px;
width: 120%;
text-align: center;
}
#pictures img, #pictures2 img, #pictures3 img{
width: 100%;
}
#pictures3{
position:absolute;
width: 200%;
top:300%;
}
#longform img{
width:100%;
height:auto;
}
.second{/*overflow:unset;*/z-index: unset;}
.middle,
.right {
padding: 0px;
display: flex;
-ms-align-items:flex-end;
align-items:flex-end;
}
body, /* blink currently has bug that requires declaration on `body` */
html {
/* scroll-snap-type: y proximity; */
}
/* .snaptarget {
scroll-snap-align: start;
position: relative;
top: 200px;
height: 200px;
background-color: green;
} */
/* Style the left column */
.left{
text-align:left;
position:absolute;
grid-area: left;
height:100%;
max-width: 95%;
/* min-width: 20%;*/
display: flex;
flex-direction: column;
}
.open {display:block !important;}
.ellipse {
position: relative;
height:100%;
width:150%;
bottom:0px;
}
.squiggle {
position: relative;
height:70%;
width:100%;
top:0px;
left:-15%;
z-index:25;
}
.squiggle svg{
height:60%;
bottom:0px;
}
.ellipse svg{
height:110%;
bottom:0px;
left:10%;
}
.art {
width:100%;
bottom:0px;
}
/* Style the middle column */
.middle {
position:relative;
grid-area: middle;
max-width: 50%;
min-width: 50%;
display: flex;
-ms-align-items: flex-end;
align-items: flex-end;
justify-content: flex-end;
}
.cover {
position:relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
z-index: 11;
}
.cover svg{
width: 100%;
z-index: 99;
}
.cover img{
width: 100%;
max-height: 100%;
border:4px solid black;
/*width: 50%;*/
z-index: 99;
align-self: center;
}
.right {
position:relative;
/* min-width: 10%; */
max-width:100%;
grid-area: right;
display: flex;
-ms-align-items: flex-end;
align-items: flex-end;
justify-content: flex-end;
}
/* Style the right column */
.squiggle {
height: 100%;
}
.squiggle svg {
position:relative;
bottom:0px;
}
.embed iframe,
.embed object,
.embed embed {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100%;
}
.player .vp-title, .player .vp-title .vp-title-header{display: none !important;visibility:hidden !important;}
/* Style the footer */
.footer {
position:relative;
grid-area: footer;
min-height: calc(94% - 66%);
/*max-height: 33%;
background-color: #f1f1f1;*/
padding: 0px;
text-align: center;
border-top: 4px solid black; /* the bar */
margin-top: -4px; /*this pulls the bar up a bit*/
}
.triangle{
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 100%;
text-align: center;
overflow: visible;
height: 100%;
}
.triangle svg{
position:relative;
left:25%;
width: 50%;
height: 100%;
/* align-self: flex-end;
*/ }
.footer2 {
/*max-height: 20%;*/
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
grid-area: footer2;
/*background-color: #f1f1f1;*/
padding: 0px;
text-align: center;
}
.Rshape{
position:relative;
left:5%;
bottom:0;
width: 60%;
height: 100%;
transform: skew(-40deg);
/* skew(-20deg, -35deg); align-self: flex-end;
*/ }
.Tshape {
position:absolute;
left:70%;
top:60%;
width: 25%;
height: 100%;
transform: rotate(-40deg);
/* align-self: flex-end;
*/ }
.aust {
position: relative;
width: 100%;
height: 100%;
bottom: 0px;
}
.wave {
position: relative;
width: 100%;
bottom: 0px;
}
.wave svg {
width: 104%;
height: 20%;
bottom: 0px;
left: -13px;
position: relative;
left: -2%;
top:30%;
fill:white;
}
#WAR {overflow: visible;width: 100%;}
#soul{overflow: visible;width:80%;margin:auto;}
/* .flow, .div3, .div2, .div4 {-ms-grid-template-columns: unset;grid-template-columns: unset;-ms-grid-columns: 100% !important; /*(minmax(100px, 1fr))[auto-fit];*/
/* grid-template-columns: 100% !important;width:100%; } */
/* SETTING GRIDDED CARDS TEMPLATES */
.flow {
color: black;
position: relative;
top:0;
width: 100vw;
display: -ms-grid;
display: grid;
margin:0 auto;
grid-gap:2px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: space-between;
-ms-grid-column-align: center;
justify-items: center;
font-size: smaller;
}
/* tiles are 1-up on mobile */
.div1, .div3, .div2, .div4 {
grid-columns: 100%;
-ms-grid-columns: 100% ;
grid-template-columns: 100% ;
/* padding-top:1em; */
}
.sqdiv3{background-color:#000;border-color:#000;}
.div1 .card{position:relative;background-image:url(../aaImages/empty.gif);background-size:cover;height:80vh;background-position:Center;}
.div3 .card{position:relative;background-image:url(../aaImages/empty.gif);background-size:cover;height:80vh;background-position:Center;}
.div2 .card{position:relative;background-image:url(../aaImages/empty.gif);background-size:cover;height:80vh;background-position:Center;}
.sqdiv3 .card{background-color:#c0c0c0;background-size:cover;width: 100vw;background-position:Center;position:relative;background-image:url(../aaImages/empty.gif);color:white;overflow: visible;border-bottom:4px black solid;}
.sqdiv3 .card >a{color:white;}
.sqdiv3 .card .name{position: absolute;
height: 2.6em;
font-size: 1.6em;
overflow-wrap: break-word;
background-color: white;
width: auto;
top: calc(100% );
left: 0;
color: #000;
text-align: left;
padding-left: 1em;border-bottom: solid 4px black;}
.card {
padding-bottom:4px;padding-top:4px;
width:100%;
height:80vh;
min-height:100%;
position:relative;
/*display: inline-block;*/
margin: 0px;
overflow:hidden;
/* border: 3px solid #73AD21; */
text-align:center;
vertical-align:bottom;
display: flex;
justify-content: center;
/* margin-bottom:20%; */
}
.card svg{height:100%;}
.cardImage {width:100%;background-size:contain;}
div.name{
display: flex;
align-items: center;
position: relative;
top: 10%;
height: 80%;
margin: auto;
/*width: 90%;
max-width: 90%;*/
width:auto;
overflow-wrap: anywhere;
/* width: 80%;
left: 5%; */
font-size: 3em;
z-index: 50;
text-align: center;
background: none;
text-transform:uppercase;
opacity: 1;
transition: all 1s ease-in-out;}
#heroBox div.name{width:inherit;}
#heroBox div.name h1:hover{/*font-size:1.7em;padding-bottom:0.2em;*/}
div.div1 div.name{text-transform:uppercase;font-size:1em;/*top: calc(50% - 1em)*/;}
/*div.name:hover > .wordtitle, div.name:active > .wordtitle{color:aqua;transition: all 0.3s ease-in-out;animation:color-change 3s infinite;
}*/
@keyframes color-change {
0% { color: aqua; }
20% { color: aquamarine; }
40% { color: yellow; }
60% { color: greenyellow; }
90% { color: aqua; }
}
/*transition: all 0.3s ease-in-out;*/}
.sqdiv3 .card .book {width:100%;}
/*.wordtitle:hover, .wordtitle:active {color:aqua; animation: color-change 1s infinite;
font-size: 2.1em; padding-bottom: 16px;transition: all 0.3s ease-in-out;font-family: eidetic-neo;letter-spacing: 0.2rem;*/}
div.banner{}
#herobox div.name{margin-top:0;}
div.card div.name{ /*top:calc(50% - 1em);*/}
.wordtitle {width: 100%;font-size:1.8em;line-height:1em;
margin: auto;font-family: 'aa_titles';
}
div.name svg{
position:relative;
top: unset;
margin:auto;
/* margin-top: -50%;*/
max-height: 70%;
height: 80%;
width:90%;
max-width: 90%;
}
div.card img {
min-width:100%;
height: auto;
min-height: 100%;
margin: auto;
width: auto;
/* max-height: 100%; */
}
.div1{min-height:80%;min-width:100%;}
.div2 img, .div3 img, .div3 img, .div1 img{height:100%;width:auto;}
div.card p {position:absolute;
height: 20%;
top: 80%;
left: 0;
background-color: var(--bg);
width: 100%;
color: var(--text);
padding: 5%;
font-size: 2em; }
.shadow{
box-shadow:0px 20px 40px grey; }
.footer{/*max-height:40%;*/ min-height:33%;}
.cover{top:0px;}
.middle{max-width:100%; min-height:100%;width:auto;}
.right{min-width:15%;}
/* desktop grid-template-areas:
'. . middle . right'
'left . middle . right'
'left . footer . .'
'. . footer . .'
'footer2 footer2 footer2 footer2 footer2'; */
#clipPathContainer {
position: absolute;
top: 2em;
/* left: -2%; */
max-width: 105%;
width:100%;
/* height: auto; */
height: 100vh;
z-index: 7;
overflow: hidden;
}
.clip-me {
width: 105%;
height: 110%;
object-fit: fill;
}
#fullImage img{
position:relative;
width:105%;
clip-path:url(#sinecut);
}
svg img{
height:100%;
width:auto;
}
#stroke{
z-index:9;}
#stroke svg{stroke:none;}
svg {width:100%;
height:100%;}
#fullImage2{
position:relative;
width:100%;
text-align:center;
margin-top: -5vh;
z-index:5;
height:auto;
}
.plainContainer2 img{
margin-top:-17px;
width:100%;
height:auto;
}
#fullImage img{
position:relative;
width:105%;
clip-path:url(#sinecut);
}
.fullHeight{min-height:100% !important;}
.didactics {
color:white;
cursor: pointer;
font-family:aktiv-grotesk, Helvetica, Arial, sans-serif;
font-size:unset;
text-align:left;
position: absolute;
bottom:0;
left:0;
z-index:101;
padding-left:1em;
padding-bottom: 1em;
}
.fullDida{
opacity: 0;
transition: 1.2s ease;
font-size:2%;
}
/*.fulldidatext{position:absolute;bottom:0;}
/* html */
/*
test dida
test the other thing
*/
/* css */
#readMore:hover {font-style:italic;}
.readmore {
width: 100%;
height: 100%;
color:white;
background-color:rgba(48,48,48,0.5);
display:flex;
flex-direction: column-reverse;
}
.didactics-hover {background:grey;}
/* jquery */
.didactics:hover .fullDida, .didactics:active .fullDida{
opacity:0.9;
flex-direction: column-reverse;
}
.artistname{
font-size:2%;
position:absolute;
bottom:0;
}
.didactics:hover .artistname{
opacity:0;
flex-direction: column-reverse;
}
.wavyUnderline:hover{text-decoration:underline; text-decoration-style:wavy;text-underline-offset: 0.2em; }
#buylink{text-overflow:ellipsis;}
#closeButton{
position:absolute;
z-index:1000;
right:1em;
top:2em;
text-align:right;
background-color:none;
color:#44FF00;
width:1em;height:1em;
font-size:2em;
}
/* CENTERED CONTAINER FOR THE LONGFORM TEXT */
#longform{
--lh: 1.5em;
line-height: var(--lh);
position:relative;
padding:0em 1.5em 3em 1.5em;
font-size: 1.5em;
font-family: eidetic-neo, Garamond, serif, ui-serif;
/* left:20%; */
z-index:50;
margin:auto;
width:100%;
text-align:left;
/* background-color: rgba(249, 248, 240, 0.5); */
}
/* TEXT STYLING OF THE LONGFORM DIV TEXT */
.bodytext{
font-weight:normal;
text-overflow:ellipsis;
/* background-color: #f9f8f0; */
/* background: rgba(242,237,222,1); */
}
.bodytext p{padding-top:0.5em;padding-bottom:0.5em;}
.contrast {
background-color:black;
color:white;
padding:0.15em;
padding-left:0.5em;
padding-right:0.5em;
line-height:2em;}
.minorContrast {
width:100%;background-color:#999;
color:black;padding:0.5em;}
.alignleft{width:100%;text-align: left;padding:0.6em;}
ul {
width: 100%;
display: inline-flex;
list-style:none;
}
ul li {
float:left;
width:23%;
display: inline-block; border: 0;
}
.mce-content-body {
overflow-wrap: break-word;
word-wrap: break-word;
font-size:1em !important;
}
#ReorderGallery ul li{width:unset;margin:5px; border:solid 2pt white;}
#ReorderGallery li:first-of-type {
border:solid 2pt yellow;
}
#ReorderGallery li::before {
content:"Image";}
#ReorderGallery li:first-of-type::before {
content:"Hero Image";
}
a, a:link, a:hover, a:visited, a:active {
text-decoration: none;
color: var(--text);
}
p a, p a:link, p a:hover, p a:visited{text-decoration:underline;text-underline-offset: 0.2em;text-decoration-style: wavy;color: var(--text);}*/
blockquote{font-size: initial;
border-left:4px #999 solid;
border-style:wavy;
padding-left: 1em !important;}
.blockquoteBorder{}
blockquote {
/*quotes: """ """ "'" "'";
*/}
blockquote{font-size: 1em !important;
border-left:4px #999 solid;
border-style:wavy;
padding-left: 1em !important;}
/*blockquote:after {font-size:3em;content:close-quote;*/}
/*blockquote:before{font-size:3em;content: open-quote;*/}
.overflow {
--max-lines: 3;
position: relative;
max-height: calc(var(--lh) * var(--max-lines));
overflow: hidden;
padding-right: 1rem; /* space for ellipsis */
}
.overflow::before {
position: absolute;
content: "...";
/* inset-block-end: 0;
inset-inline-end: 0; */
bottom: 0;
right: 0;
}
.overflow::after {
content: "";
position: absolute;
/* inset-inline-end: 0; */
right: 0;
width: 1rem;
height: 1rem;
background: white;
}
.dropdown:hover, a:hover, a:focus, button:hover {word-wrap:normal;transition: 0.3s;}
.header:hover + .flow{ overflow-y:hidden; }
.nohover:hover{font-weight:400;}
textarea {width:100%;}
.dropbtn button, button, .button {
background-color:#44FF00;
border: none;
cursor: pointer;
}
.dropdown, .dropdown a{
transition: 0.3s;
/* background-color:#FFF; */
/* position: relative; */
/* display: inline-block; */
}
.dropdown-content {
position: absolute;
margin-left:-25vw;
width:100vw;
/* padding:12px; */
background-color: #44FF00;
opacity:0.9;
min-width: 160px;
/*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
z-index: 1;
font-weight:400;
line-height: 1.1;
/*transition: all 1s ease-in-out;*/
}
#myBtn:hover{font-style:italic;}
.error p {
color:#FF0000;
font-size:20px;
font-weight:bold;
margin:50px;
}
/*Splash animation stuff*/
#titleTrace {position: fixed; top:0; left:0; width: 100%; height: 100%; z-index: 99999;}
#titleTrace svg {width:100%;height:100%}
#titleTrace svg path {
stroke:#44FF00;
stroke-width:5;
stroke-dasharray: 2400;
stroke-dashoffset: 2400;
-webkit-animation: dash 3s linear alternate;
-moz-animation: dash 3s linear alternate;
animation: dash 3s linear alternate;
-webkit-animation-iteration-count: 2;
-moz-animation-iteration-count: 2;
animation-iteration-count: 2;
}
@-webkit-keyframes dash {
to {stroke-dashoffset: 0; }}
@-moz-keyframes dash {
to {stroke-dashoffset: 0; }}
@keyframes dash {
to {stroke-dashoffset: 0px; }}
.close-button {background:#FFF;color:#000;}
.modal {
position: fixed;
top: 10%;
left: 10%;
width:80%;
height:80%;
z-index: 1010;
display:var(--modal);
background: #000;
color:#FFF;
box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
}
.modal-guts {
/* cover the modal */
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size:1.8em;
text-align:center;
height: 100%;
display:var(--modal);
/* spacing as needed */
padding: 20% 10% 20% 10% ;
/* let it scroll */
overflow: auto;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 990;
display:var(--modal);
background: rgba(0, 0, 0, 0.6);
}
.new { /* margin-left: 1em; */
cursor: pointer;
border-bottom: 2px solid !important;
line-height: 1em;
align: center;
padding-left: 1.6em;
font-size: 1.6em;
margin-top: 1em;
}
#new summary {border-bottom:unset !important;margin-left: 1em;}
#new > form{margin-left:2em;line-height:1em;font-size:0.8em;}
.closeIt {
display:none !important;
}
#linkinfo p{line-height:2em;}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}