html{
height:100%;
}

body{
height:100%;
background-color:#143e56;
padding:0;
margin:auto;
font-family:'Montserrat',Helvetica,Arial,sans-serif;
font-size:100%;
color:#a6a8a6;
display:flex;
flex-direction:column;
text-align:center;
}

body.splash{
background-image:url(../images/splash/20190622_GONKSTOCK_97_-_P1120012_LR-1920-cwebp82.webp);
background-position:center;
background-repeat:no-repeat;
background-size:cover;
text-align:left;
}

#content{
padding:12px;
max-width:1280px;
margin:auto;
}

header{
width:100%;
max-width:100%;
box-sizing:border-box;
}

.headerwrap{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap: wrap;
gap:1em;
}

nav{
display: flex;
flex-direction: column;
text-align: right;
padding: 0 12px;
}

nav a{
font-style:italic;
font-size: clamp(1rem, 2vw, 1.5rem);
text-decoration:none;
text-transform:uppercase;
text-shadow:#143e56 3px 2px;
font-weight:bold;
line-height: 1.1;
}

footer{
text-align:left;
margin-top:auto;
}

.poster img{
height:384px;
aspect-ratio:3/4;
object-fit:contain;
background-color:white;
}

.flexgallery {
display: flex;
flex-wrap: wrap;
gap: 0.3em;
justify-content:center;
}

.flexgallery img{width:calc(50vw - 12px - 0.3em);max-width:206px;}

a:link, a:visited{color:#d3455d}
a:hover, a:active{color:#1FBD8B}

a.altlink:link, a.altlink:visited{color:#262d2d}
a.altlink:hover, a.altlink:active{color:#1FBD8B}

a.pisslink:link, a.pisslink:visited{color:#ffbf3f}
a.pisslink:hover, a.pisslink:active{color:#1FBD8B}

a.headline:link, a.headline:visited{color:#d3455d}
a.headline:hover, a.headline:active{color:#d3455d}

/*------FLEX------*/

.distribute{
padding:6px 12px;
display:flex;
justify-content:space-between;
}

.distributeeven{
padding:1rem;
display:flex;
justify-content:space-evenly;
}

/*------CLASSES------*/


.floaty{
float:right;
overflow:auto;
}

.usefultable{
width:auto;
margin:10px auto 0px;
}

.usefultableeven{
width:100%;
table-layout:fixed;
margin:auto;
}

td.usefultableL{
text-align:left;
color:#262d2d;
padding:0px 10px;
}

td.usefultableR{
text-align:right;
font-weight:800;
font-style:italic;
padding:0px 10px;
}

.rightytighty{
text-align:right;
}

.leftyloosey{
text-align:left;
}

.middlefiddle{
text-align:center;
}

.hidden{
display:none;
}

.smallprint{
font-size:80%;
}

.noclick{
pointer-events:none;
text-decoration:line-through;
cursor:not-allowed;
color:#a6a8a6;
}

.rounded{
padding:6px 12px;
border-radius:26px 6px;
}

.nopad{
padding:0;
}

.headline{
text-shadow:2px 2px 2px #262d2d;
cursor:pointer;
text-decoration:none;
user-select:none;
}

.headlinemini{
font-weight:800;
font-style:italic;
text-transform:uppercase;
color:#d3455d;
}

.emfitalic{
font-style:italic;
}

.icon{
width:26px;
height:26px;
fill:currentColor;
}

.vertcentre{
margin:auto 0px;
}

/*------COLOUR CLASSES------*/

.bgGonkPetrol{
background-color:#143e56;
}
.bgGonkPewter{
background-color:#a6a8a6;
}
.bgGonkPuce{
background-color:#d3455d;
}
.bgGonkPitch{
background-color:#262d2d;
}
.bgGonkPine{
background-color:#20b682;
}
.bgGonkPiss{
background-color:#ffbf3f;
}
.bgGonkWhite{
background-color:#ffffff;
}

.textGonkPetrol{
color: #143e56;
}
.textGonkPewter{
color: #a6a8a6;
}
.textGonkPuce{
color: #d3455d;
}
.textGonkPitch{
color: #262d2d;
}
.textGonkPine{
color:#20b682;
}
.textGonkPiss{
color: #ffbf3f;
}
.textGonkWhite{
color: #ffffff;
}

/*------TEXT------*/

h1{
font-size: clamp(3rem, 8vw, 5rem);
font-weight:800;
font-style:italic;
margin:0;
padding:0;
}

h2{
font-size:320%;
font-weight:600;
font-style:normal;
margin:0;
padding-bottom:2px;
}

h3{
font-size:150%;
font-style:normal;
margin:0;
padding:0px 0px 4px;
}

h5{
font-size:70%;
font-weight:400;
font-style:normal;  
margin:0;
padding:0px 0px 6px;
}

p{
font-weight:400;
font-style:normal;
margin:0;
padding:5px;
}

textarea{
max-width:64%;
min-width:40%;
min-height:130px;
max-height:320px;
}

hr{
width:96%;
}

/*----BARCHART----*/

.barchart{
margin:auto;
}

.barwrapper{
width:calc(1300px/7);
float:left;
margin:0px 12px;
}

.barY{
width:20px;
margin:0px;
padding-right:6px;
float:left;
text-align:right;
border-right:1px solid #262d2d;
}

.bar{
position:relative;
height:200px;
overflow:hidden;
}

.barfill{
position:absolute;
bottom:0;
width:100%;
transition:all 0.3s;
}

.barfill:hover{
transform:translate(0px,-8px);
transition:all 0.6s;    
}

.doubt{
opacity:0.2;
}

.captionstack {
display:flex;
flex-flow:row;
}

.captionstack > h3{
position:absolute;
word-break:keep-all;
}

@media only screen and (max-width: 768px){
.navigation a{
font-size:4vw;
}
}

.contactflex {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
  align-items: center;
  margin:auto;
}

.contactflex label {
  font-weight: bold;
  margin:1em 0 -1em;
  display: block;
}

.contactflex input,
.contactflex textarea {
  padding: 1em;
  border: none;
  border-radius: 6px;
  font: inherit;
  width:100%;
  resize:none;
}

.contactflex button {
  padding: 1em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  width:6em;
  font-weight: bold;
}

.contacterror{outline:2px solid red !important}