/* w3.cxx modifications */
.w3-sidebar { 
    background:inherit;
    border-bottom: 1vh solid var(--color1);
}
.w3-stretch { padding: 0 1em; }
.w3-button { border-radius: 1.5em; padding: 6px 16px;}
.w3-bar .w3-button { padding:8px 16px; border-radius: 0;}
.w3-modal-content {
    /*  This centers modal popups */
    position:fixed;
    margin: 0;
    top: 50%;
    left: 50%;
    padding-top: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media (max-width: 600px) { .w3-modal-content { margin:0; max-width:95%; min-width:90%!important;}}
@media (max-width: 768px) { .w3-modal-content { max-width: 80%!important; min-width:70%!important;}}
@media (max-width: 993px) { .w3-modal-content { max-width: 75%;}}

/*  General Styles  */
.ows-tagLine {
    font-family: 'Red Rose';
    font-size: 120%;
}
.ows-footTag {
    font-family: 'Red Rose';
}
.ows-at:before { 
    content: "at"; 
    padding: 0 0.5em; 
    font-size: 80%;
}
.ows-on:before {
    content: 'on';
    padding: 0 0.5em;
    font-size:80%;
}
.menuIcon {
    float:right;
    margin-bottom:-0.3em;
    padding-left:0.5em;
}
.mnuDivider {
    height: 2px!important;
    background: var(--color2);
    /*margin-top:-1vh;*/
    padding:0!important;
}
/* TITLE Bars */
.ows-titleFlex {
    /* Any number of items as long as the fit on one row  */
    display:flex;
    justify-content: space-between;
    align-items:baseline;
    row-gap: var(--rowGap);
}

.ows-titleGrid {
    /* Only TWO items on this bar - the second max 2em wide  */
    display:grid;
    grid-template-columns: 1fr 2em;
    grid-template-rows: auto;
    gap: 0 var(--colGap);
    align-items: baseline;
    grid-auto-rows: 0;
    margin-bottom:0;
}

.ows-titleFlex *,
.ows-titleGrid * {
    margin:0;
}

#Gull-Panel {
    position: absolute;
    bottom: 1.3vw;
    right: 30px;
    width: calc( (100vw - (var(--pageWidth) + 'px') / 2 * 80%));
    max-width: 5vw;
    height: auto;
    /*animation: gull-Fly 10s infinite;*/
}
@keyframes gull-Fly {
    0% {translate: 3vw 0; opacity: 0;}
    10% { opacity:1;}
    90% { translateX: -27vw; opacity:1}
    100%{ translate: -32vw 0; opacity:0;}
}
@media (max-width: 710px) {
    #Gull-Panel { opacity:0.2;}
}
/*  General header & footer layouts */
html, body {
    font-family: Inter, serif;
    font-size: clamp(0.8125rem, 0.7188rem + 0.375vw, 1rem); /* 13 to 16px */
}
html {
    --pageWidth: 1200;
    --rowGap: 2vh;
    --colGap: 1vw;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Red Rose', Inter, serif;
    margin:0;
}

h1 {font-size: 220%;}
h2 {font-size: 190%;}
h3 {font-size: 155%;}
h4 {font-size: 140%;}
h5 {font-size: 120%;}
h6 {font-size: 105%;}

/* Common styles */
#pageHead { 
    border-bottom: .5em solid var(--color3);
    position: relative;
    z-index:10;
    width:100%;
    /* Background image added here */
    /* background: url('images/testBG.jpg') no-repeat;*/
    /* You should investigate the options available to position the image to suite your site. */
    /* background-position: center bottom -45px;*/ /* This value needs to be adjusted to suite your image */
    /* background-position: center center;*/
}
@media (min-width: 2400px) {
    /* The value above should be set to the actual width of your image */
    #pageHead {
        background-size: cover;
    }
}
#subHead {
    max-width: calc( var(--pageWidth) * 1px);
    margin:auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto) calc( 1.6em + 12px);
    row-gap:.2em;
    grid-template-areas: "Logo . siteName" "Logo . siteInfo" "menu menu menu";
    align-items: end;
}
#logo {
    grid-area: Logo;
}
#logo img { 
    max-width:350px;
    width: 30vw; 
    min-width: 200px; 
    height: auto; 
    padding:.5vh 0 ;
}
#siteName { 
    grid-area: siteName; 
    /*display:none;*/ /* Uncomment this if you don't want the site name displayed */
    text-align: right;
    font-style: italic;
    line-height: 1.5em; 
    text-shadow: .03em .03em rgba(80, 80, 80,.5);
    margin:.3em 0.1em .3em 0;
    font-size: 90%;
}
#siteInfo {
    grid-area: siteInfo;
    display: grid;
    grid-template-columns: 1fr 7.5em;
    gap: 0.25em 1em;
    font-size: 90%;
    margin-bottom:.5em;
}
#siteInfo p { 
    margin:0; 
    line-height: 1.1em
}
#menuArea { 
    grid-area: menu; 
    border-top: 1px solid var(--color9); /* Comment out to remove top border */
}
#menuSidebar { transform-origin: top left;}
@keyframes menuOpen {
    0% { opacity: 0; transform: scaleX(0); }
    100% { opacity: 100%; transform: scaleX(1); }
}
@keyframes menuClose {
    0% {opacity: 100%; transform: scaleX(1);}
    50%{opacity: 75%;}
    100%{opacity: 0; transform: scaleX(0);}
}
#pageContent {
    position: relative;
    overflow:scroll;
}
#subContent {
    max-width: calc( var(--pageWidth) * 1px);
    margin:auto;
    overflow:scroll;
}
#Gull-head {
    position: absolute;
    top: 1.3vw;
    right: 30px;
    width: calc( (100vw - (var(--pageWidth) + 'px') / 2 * 80%));
    max-width: 6vw;
    height: auto;
}
@media (min-width: 1300px) {
    #Gull-head {
        animation: gullHead-FadeIn 1s;
        opacity: 1;
    }
}
@media (max-width: 1500px) {
    #Gull-head{ 
        animation: gullHead-FadeOut 1s;
        opacity: 0.2;
    }
}
@keyframes gullHead-FadeOut {
    0%  { opacity:1;}
    100% { opacity: .2;}
}
@keyframes gullHead-FadeIn {
    0%  { opacity: .2;}
    100%{ opacity: 1;}
}
            
#Gull-body {
    position: absolute;
    bottom:0;
    transform: scaleX(-1);  /* Comment out to make gull face left */
    left: 7.5%;             /* Comment out to put gull on right */
    /*right: 7.5%;*/        /* Uncomment to put gull on left */
    width:9vw;
    min-width:65px;
    max-width: 120px;
    transform-origin: bottom center;
}
@keyframes gullBody-FadeIn {
    0%    { opacity: 0;}
    100% { opacity: 1;}
}
@keyframes gullBody-LtR {
    0%   { transform: translate(-70vw, -5vh) scale(0.1)}
    90%  { transform: translate(1vw, -0.2vh) scale(1.1)}
    100% { transform: translate(0, 0) scale(1)}
}
@keyframes gullBody-RtL {
    0%   { transform: translate(13vw, -5vh) scale(.1)}
    90%  { transform: translate(-1vw, -0.2vh) scale(1.1)}
    100% { transform: translate( 0, 0 ) scale(1)}
}
@keyframes gullBody-Drop {
    0%  { transform: translate(0, -70vh) scale(0.1)}
    90% { transform: translate(0, -1vh) scale(1.2)}
    100%{ transform: translate(0, 0) scale(1)}
}
@keyframes gullBody-Expand {
    0%   { transform: scale(0)}
    90%  { transform: scale(110%)}
    100% { transform: scale(100%)}
}

#pageFoot {
    background: var(--color5);
    border-top:.3em solid var(--color3);
    width:100%;
    z-index:10;
}
#subFoot {
    max-width: calc( var(--pageWidth) * 1px);
    margin:auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 1em;
}
#subFoot p { margin: .5em 0; font-size: 80%}

#hamburger { border-radius: 0}
#menuSidebar  .w3-button  { border-radius: 0};

/*  Genearl page layouts */





/* TITLE Bars */
.ows-titleFlex {
    /* Any number of items as long as the fit on one row  */
    display:flex;
    justify-content: space-between;
    align-items:baseline;
    row-gap: var(--rowGap);
}

.ows-titleGrid {
    /* Only TWO items on this bar - the second max 2em wide  */
    display:grid;
    grid-template-columns: 1fr 2em;
    grid-template-rows: auto;
    gap: 0 var(--colGap);
    align-items: baseline;
    grid-auto-rows: 0;
    margin-bottom:0;
}

.ows-titleFlex *,
.ows-titleGrid * {
    margin:0;
}

/*  ~~~~~  BUTTON BAR  ~~~~~ */
.ows-btnBar {
    display: flex;
    justify-content: space-between;
    gap: 0.3em calc( var(--rowGap) / 2);
    flex-flow:row wrap; 
    align-items: baseline;
}
.ows-btnBar > div,
.ows-btnBar > button {
    flex-grow:1;
}

.ows-btnBar > p { margin:0;}

.ows-btnBar > div.w3-button,
.ows-btnBar >button.w3-button {
    padding: 4px 1.5em;
    border: 1px solid var(--color5);
}

.ows-btnBar > div.w3-button:hover {
    background: var(--gradient-up);
    color: var(--color2)!important;
}
.ows-btnBar > i {padding: 0 0.5vw}

.ows-stretch { flex-grow:4;}

/*  ~~~~~   DATA ROWS  ~~~~~  */
/*  Using a grid */
.ows-dataRow2c {
    display: grid;
    grid-template-columns: 1fr minmax(5em,7em);
    grid-template-areas: 'label data';
    grid-template-rows: auto;
    gap: 0 0;
    align-items:baseline;
    margin-top: 0.5vh;
}

.label {grid-area: label;}

.ows-dataRow2c p {
    margin:0; 
    padding: 0.2vh 0
}

.w3-container .label {
    margin:0 0 0 -0.5em!important; 
    padding:0.2vh 0 0.2vh 0.5em
}

.data {
    grid-area: data;
    text-align:right;
}

.w3-container .data {
    margin:0 -0.5em 0 0!important;
    padding:0 0.5em 0 0
}

.ows-dataRow2c:last-of-type { margin-bottom: 1vh;}

div.ows-dataRow2c:hover p {
    background: var(--gradient-databar);
    font-weight: 600;
}

.ows-dataRowFlex,
.ows-dataRowFlex-Heading {
    display:flex;
    justify-content:space-between;
    column-gap: 0;
    margin:0.4vh -16px 0.4vh -16px;
    padding:0.2em 1em 0.2em 1em;
}

.ows-dataRowFlex-Heading { border-bottom:1px solid var(--color5);}

div.ows-dataRowFlex:last-of-type{ margin-bottom:1vh;}

div.ows-dataRowFlex p { margin:0;}
    
.ows-dataRowFlex:hover {
    background: var(--gradient-databar);
    font-weight:600;
}

/*  ~~~~~   ANIMATIONS   ~~~~~ */
/*  General animations for use anywhere */
.ows-animate-entryOne {
    transform-origin: top center;
    animation: panelEntry 1s;
}
@keyframes panelEntry {
    0% { translate: 0 3em ;scale: 1 .1; opacity: .1;}
    20% { scale: 1 1; }
    80% { opacity: 1;  translate: 0 -.5vh}
    100% { translate: 0 0; scale: 1 1;}
}
@keyframes panelExit {
    0% { opacity: 1; }
    100%{ opacity: 0; translate: 0 50vh}
}

/*	~~~~~~~	  GRIDS   ~~~~~~~*/
.ows-grid {
    display:grid;
    grid-gap: var(--rowGap) var(--colGap);
    margin-bottom: var(--rowGap);
    --space: calc( ( var(--pageWidth) * 1px ) - var(--colGap) );
    &.col7 {
        --min-size: calc( var(--space) / 8 );
    }
    &.col6 {
        --min-size: calc( var(--space) / 7 );
    }
    &.col5 {
        --min-size: calc( var(--space) / 6 );
    }
    &.col4 {
        --min-size: calc( var(--space) / 5 );
    }
    &.col3 {
        --min-size: calc( var(--space) / 4 );
    }
    &.col2 {
        --min-size: calc( var(--space) / 3 );
    }
    &.col1 {
        --min-size: 100%;
    };
	grid-template-columns: repeat( auto-fill, minmax( var(--min-size), 1fr ));
    grid-template-rows:auto;
    grid-auto-rows:minmax(1em, auto);
}

/*  ~~~~~~  FLEXBOXES    ~~~~~*/
/*  Styles for basic layout */
.ows-flex {
    display:flex;
    gap: var(--rowGap) var(--colGap);
    margin-bottom: var(--rowGap);
    /*justify-content: stretch;*/
    flex-flow: row wrap;
    --space: calc( ( var(--pageWidth) * 1px ) - var(--colGap));
    & > div {
        flex:1;
        min-height: 1em;
    }
    &.col7 > div { flex-basis: calc( var(--space) / 8); flex-grow:1; }
    &.col6 > div { flex-basis: calc( var(--space) / 7); flex-grow:1; }
    &.col5 > div { flex-basis: calc( var(--space) / 6); flex-grow:1;}
    &.col4 > div { flex-basis: calc( var(--space) / 5); flex-grow:1;}
    &.col3 > div { flex-basis: calc( var(--space) / 4); flex-grow:1; }
    &.col2 > div { flex-basis: calc( var(--space) / 3); flex-grow:1;}
    &.col1 > div { min-width: 100%; }
}
/*  Fixed width boxes */
.ows-fixed {
    justify-content:space-around;
    &.ows-flex.col7 > div { max-width: calc( ( var(--pageWidth) * 1px - (var(--colGap) * 6)) / 7);}
    &.ows-flex.col6 > div { max-width: calc( ( var(--pageWidth) * 1px - (var(--colGap) * 5)) / 6); }
    &.ows-flex.col5 > div { max-width: calc( ( var(--pageWidth) * 1px - (var(--colGap) * 4)) / 5); }
    &.ows-flex.col4 > div { max-width: calc( ( var(--pageWidth) * 1px - (var(--colGap) * 3)) / 4); }
    &.ows-flex.col3 > div { max-width: calc( ( var(--pageWidth) * 1px - (var(--colGap) * 2)) / 3); }
    &.ows-flex.col2 > div { max-width: calc( ( var(--pageWidth) * 1px - (var(--colGap))) / 2); }
}
/*  Growing Flexbox individual divs */
.ows-flex.col7.ows-fixed .ows-growX2 {
    max-width: calc( var(--pageWidth) * 1px / 7 * 2 - var(--colGap) );
}
.ows-flex.col6.ows-fixed .ows-growX2 {
    max-width: calc( var(--pageWidth) * 1px / 3 - var(--colGap));
}
.ows-flex.col5.ows-fixed .ows-growX2 {
    max-width: calc( var(--pageWidth) * 1px / 5 * 2 - var(--colGap));
}
.ows-flex.col4.ows-fixed .ows-growX2 {
    max-width: calc( var(--pageWidth) * 1px / 2 - var(--colGap) );
}
.ows-flex.col3.ows-fixed .ows-growX2 {
    max-width: calc( var(--pageWidth) * 1px / 3 * 2 - var(--colGap));
}
.ows-flex.col2.ows-fixed .ows-growX2 {
    max-width: calc( var(--pageWidth) * 1px);
}
.ows-flex.col7.ows-fixed .ows-growX3 {
    max-width: calc( var(--pageWidth) * 1px / 7 * 3 - (var(--colGap) * 2));
}
.ows-flex.col6.ows-fixed .ows-growX3 {
    max-width: calc( var(--pageWidth) * 1px / 2 - (var(--colGap) * 2));
}
.ows-flex.col5.ows-fixed .ows-growX3 {
    max-width: calc( ( var(--pageWidth) * 1px ) / 5 * 3 - (var(--colGap) *2 ));
}
.ows-flex.col4.ows-fixed .ows-growX3 {
    max-width: calc( ( var(--pageWidth) * 1px) / 4 * 3 - (var(--colGap) * 2 ));
}
.ows-flex.col7.ows-fixed .ows-growX4 {
    max-width: calc( ( var(--pageWidth) * 1px) / 7 * 4 - (var(--colGap) * 3 ));
}
.ows-flex.col6.ows-fixed .ows-growX4 {
    max-width: calc( ( var(--pageWidth) * 1px) / 6 * 4 );
}
.ows-flex.col5.ows-fixed .ows-growX4 {
    max-width: calc( (var(--pageWidth) * 1px) / 5 * 4 );
}