@font-face
  {
    font-display    : swap;
    font-family     : 'PostBus';
    font-style      : normal;
    font-weight     : normal;
    src             : local('PostBus'), url('PostBusPro.woff') format('woff');
  }

    @font-face
  {
    font-display    : swap;
    font-family     : 'NunitoSans';
    font-style      : normal;
    font-weight     : normal;
    src             : local('NunitoSans'), url('NunitoSans.woff') format('woff');
  }

*,
*::before,
*::after
  {
    box-sizing      : border-box;
  }

body
  {
    width           : 100%;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    padding         : 0;
    margin          : 0;
    background      : #fff;
    color           : #445;
    font-family     : 'NunitoSans';
    font-size       : 1em;
    font-weight     : normal;
    line-height     : 1.4em;
  }

/* ####################################################################################### */

/* ---------- ELEMENTS ----------------------------------------------------- */

/* ####################################################################################### */

h1
  {
    padding         : 0;
    margin          : 0;
    color           : #888;
    text-align      : center;
    font-size       : 5em;
    line-height     : 1.25em;
    font-weight     : normal;
    font-family     : 'PostBus';
  }

h2
  {
    font-size       : 1.75em;
    line-height     : 1.4em;
  }

h3
  {
    font-size       : 1.5em;
  }

h4
  {
    font-size       : 1.25em;
  }

h5
  {
    font-size       : 1.15em;
  }

h6
  {
    font-size       : 1em;
  }

a
  {
    color           : #448;
    text-decoration : none;
  }

a,
a:link,
a:visited,
a:hover,
a:active,
a:focus
  {
    border          : 0;
    outline         : 0;
  }

a:hover
  {
    color           : orangered;
  }

abbr
  {
    text-decoration : none !important;
    border          : none !important;
  }

img
  {
    max-width       : 100%;
  }

address
  {
    margin          : 1em 0;
    font-style      : normal;
	line-height     : 1.6em;
  }

p, li
  {
    line-height      : 1.6em;
  }

ul
  {
	list-style-type   : none;
	padding           : 0;
	margin            : 0;
  }

mark
  {
    background        : inherit;
    color             : orangered;
    font-weight       : bold;
  }

em
  {
    font-style        : normal;
    font-weight       : bold;
  }

/* ####################################################################################### */

/* ---------- STRUCTURE ---------------------------------------------------- */

/* ####################################################################################### */

header
  {
    width           : 100%;
    margin          : 0;
	position        : fixed;
  }

main
  {
    width           : 95%;
	min-block-size  : 580px;
    margin          : 5em auto 1em;
    border          : 0;
    border-radius   : 0 0 2em 0;
	background      : #fff url(../_img-graphics/wkg-mark.png) no-repeat fixed 50% 50%;
    box-shadow      : 3px 3px 3px 0 rgba(0,0,48,0.1);
  }

article
  {
    width           : 80%;
    padding         : 0;
    margin          : auto;
    background      : transparent;
	font-size       : 1.5em;
  }

footer
  {
    clear           : both;
    width           : 100%;
    padding-right   : 2.5%;
    padding-bottom  : 0.5em;
    margin          : 0 auto;
    text-align      : right;
    font-size       : 0.8em;
    line-height     : 1.2em;
    font-family     : 'PostBus';
  }

.c3grid {
    display              : grid;
    grid-template-columns: 31% auto 31%;
    gap                  : 3em;
}

.c2grid {
    display              : grid;
    grid-template-columns: 50% 50%;
    gap                  : 1em;
}

.c4gridEven {
    display              : grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-auto-rows       : max-content;
    gap                  : 2em;
    border-top           : 1px solid #eee;
    align-content        : flex-start;
}

/* ####################################################################################### */

/* ---------- IDs & CLASSES ------------------------------------------------ */


.listArtists h3
  {
    text-aligsn      : center;
  }

.listArtists ul
  {
    padding         : 0;
	margin          : 0;
  }

.butts
  {
    width           : 66%;
	margin          : 1em auto;
  }

.butts li
  {
    width           : 45%;
	padding         : 0;
	margin          : 1em auto;
	display         : inline-block;
	border-radius   : 1em;
	box-shadow      : 2px 2px 6px #aaa;
	transition      : background 2s, box-shadow 2s;
    background      : #fff;
  }

.butts li a
  {
	display         : inline-block;
    padding         : 0.5em 1em;
	width           : 100%;
	height          : 100%;
	transition      : color 2s;
	text-align      : center;
  }

.butts li:hover
  {
    background      : orangered;
	box-shadow      : 3px 3px 7px #f00;
  }

.butts li:hover a
  {
	color           : #fff;
  }


img[src="_img-graphics/wkg-illus.png"]
 {
  float        : right;
  clip-path    : circle(40%);
  shape-outside: circle(45%);
  margin-top   : 7em;
 }

img[src="_img-graphics/inarte.png"]
 {
  float        : left;
  margin-right : 3em;
 }

/* ####################################################################################### */


/* ---------- SEARCH FORM ------------------------------------------------ */

.simplesearch-search-form
  {
    width            : 100%;
    border           : 0;
  }

.simplesearch-search-form *
  {
    vertical-align   : middle;
  }

.simplesearch-search-form fieldset,
.simplesearch-search-form fieldset *
  {
    padding          : 0;
	border           : 0;
	margin           : 0;
	box-shadow       : 0 0 0 0;
  }

.simplesearch-search-form fieldset label
  {
    display          : none;
  }

.simplesearch-search-form input,
.simplesearch-search-form button
  {
    height            : 2em;
    padding           : 0.2em;
    border            : 0;
    border-radius     : 1em;
    vertical-align    : middle;
    background        : #fff;
    color             : #445;
    font-size         : 1em;
    box-shadow        : 2px 2px 4px #000;
  }

.simplesearch-search-form input[type="text"]
  {
    width             : 60%;
    caret-color       : fuchsia;

  }

.simplesearch-search-form input[type="text"]:active,
.simplesearch-search-form input[type="text"]:focus
  {
    outline           : 1px solid orangered !important;
    border            : 0 !important;
    background        : #eee !important;
    color             : #222 !important;
  }

.simplesearch-search-form button
  {
    width             : 2em;
    cursor            : pointer;
    font-weight       : bold;
    background        : transparent;
  }

.simplesearch-search-form button:active
  {
    background        : orangered;
    color             : #111;
  }

.simplesearch-highlight
  {
    color             : orangered;
    font-weight       : bold;
  }

/* ----------------------------------------------------------------------- */


/*##############################################################################################
IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG IMG
################################################################################################*/

img
  {
    margin          : 1em auto;
    border          : 1px solid #eee;
    border-radius   : 5px;
    box-shadow      : 3px 3px 8px #669;
  }

.illustration
  {
    display         : block;
    border          : 1px solid #eee;
    border-radius   : 5px;
    box-shadow      : 3px 3px 8px #669;
  }


img.icon
  {
    margin          : 0 !important;
    border          : 0 !important;
    border-radius   : 0 !important;
    box-shadow      : 0 0 0 #fff !important;
	vertical-align  : middle !important;
	height          : 1em;
  }

figure .illustration
  {
    margin          : 2em auto 0;
  }

figure:has(.illustration) figcaption
  {
    text-align      : center;
    margin-top      : 0.5em;
	font-size       : 0.7em;
  }


/* ####################################################################################### */

/* ---------- Gallery ---------------------------- */

/* ####################################################################################### */

figure.thumbs
  {
    width           : 100%;
	height          : 240px;
	margin          : 0 auto;
    padding         : 0;
	overflow        : auto;
    white-space     : nowrap;
    scrollbar-color : #dde #fff;
  }

figure.thumbs:hover
  {
    scrollbar-color : orangered #fff;
  }

figure.thumbs a
  {
	width           : 12.5%;
    text-align      : center;
	line-height     : 0.8em;
	display         : inline-flex;
  }

figcaption.exhibTitle
  {
    margin          : 3em auto 1em;
    padding         : 0;
	font-weight     : normal;
    vertical-align  : middle;
  }

a.thumb
  {
    text-align      : center;
    border          : 0 !important;
  }

a.thumb img
  {
    border          : 1px solid #eee;
    border-radius   : 8px;
    box-shadow      : 3px 3px 4px #888;
    padding         : 2px;
    margin          : 10px auto;
    height          : 200px;
    width           : 200px;
    text-align      : center;
    object-fit      : cover;
  }


/* ####################################################################################### */

/* --------------------------------------------------------------------------------------- */

@media (max-width: 1800px)
{

h1
  {
    font-size: 1.8em;
  }

article
  {
    width           : 100%;
    height          : 100%;
    padding         : 0.3em;
	font-size       : 1em;
  }

}
/* --------------------------------------------------------------------------------------- */

@media (max-width: 991px)
{

.c2grid,
.c3grid,
.c4gridEven
  {
    display         : block;
  }

figure.thumbs a
  {
	width           : 20%;
  }
img[src="_img-graphics/wkg-illus.png"]
 {
  float        : none;
  display      : block;
  margin-top   : 0em;
  margin       : auto;
  text-align   : center;
 }

img[src="_img-graphics/inarte.png"]
 {
  float        : none;
  display      : block;
  margin-right : 0;
  margin       : auto;
  text-align   : center;
 }

}

/* EOF#################################################################################### */