@charset "utf-8";
/* CSS Document */
html {  box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

html, body {height: 100%; margin: 0px; padding: 0px;}
html {overflow: -moz-scrollbars-vertical; overflow-y: scroll; scroll-behavior: smooth;}

:root {
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-sans-serif:Verdana, Geneva, sans-serif;
  --color-dark: #000;
  --color-light:#FFF;
  --color-light-grey:#E5E5E5;
  --color-gold:#d9bd13;
  --color-westend:#003366;
  --color-eastend:#af0202;
  --color-denim:#6094bc;
  --txt-embolden:font-weight:800;
}

body {
    margin: 0;
	display: flex;
    flex-direction: column;
    min-height: 100vh;
	background-color:#F7F7F7;
	/* Uncomment to prevent selection - stops accidents on mobiles when scrolling, etc.*/
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	-ms-user-select:none;
	-webkit-touch-callout:none;
}

.position-static {position: static !important;}
.position-relative {position: relative !important;}
.position-absolute {position: absolute !important;}
.position-fixed {position: fixed !important;}
.position-sticky {position: -webkit-sticky !important; position: sticky !important;}

/* PSUEDO LOGO (toon1892.com) */
.toon,
.d1892 { font-family:var(--font-serif); font-weight:bold }
.toon {color:var(--color-gold)}
.d1892{color:#6CF;}

header {
  display: flex;
   position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  height: 50px;
  background: #000;
  border-top:5px solid var(--color-gold);
  color: #fff;
  justify-content: left;
  align-items: left;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
header .topnavlist li{display:inline;color:#d9bd13; padding:0 1rem}
header .headerlogo{position:absolute;top:10px;right:25px; font-size:1.25em}
.topnavlist{display:none}

.topnavlist a {font-family: var(--font-sans-serif); color:var(--color-gold); text-decoration:none}
.topnavlist a:hover, .topnavlist a:focus {color:var(--color-light)}

span.light {color: var(--color-light-grey);}
span.dark {color: var(--color-dark);}

main {display: flex; flex-direction: column;}
main section div {width:80%; margin: 0 auto; padding-bottom:2em}

/*---------------------------------------
	UNIVERSAL STYLING FOR FOOTER
---------------------------------------*/
footer{background:#333333;color:#aff; border-bottom:1px solid #d9bd13}
footer section {padding:0 2rem}
footer p {font-size: clamp(0.9rem, 0.4500rem + 2.0000vw, 1.5rem); line-height:1.2;}
footer ul {list-style: none; padding: 0; margin: 0;}
footer a { color:var(--color-light); text-decoration:none }
footer a:hover { color:var(--color-gold);}
footer li {padding:5px 0 5px 16px; border-bottom:1px solid #666; min-height:48px}
footer li:last-child {border-bottom: none;}
footer li a:before {content: "\00BB \0020"; padding-right: 8px; color: #aff;}
footer h1 {color:#fff; margin-bottom:10px; padding-bottom:0;}
.copyright{background-color:#000000; padding:5px;display: flex;  -webkit-flex-flow: row wrap; flex-flow: row wrap;justify-content: space-between;}
.copyright img {height:16px; width: auto; margin:0 5px 0 0; float:right;} /*padding-right:5px;*/
.minigal img {width:50px; height:80px}
.copyright picture img {height:16px; width: auto; margin:0 5px 0 0; float:right;}


.img-fluid{max-width:100%;height:auto}




h1, h2, h3, h4, h5{font-family:var(--font-serif) !important;}
h1{font-size:calc(1.5rem + 3.5vw);font-weight:300}
h2{font-size:calc(1.425rem + 2.1vw);font-weight:300}

main p {font-size: clamp(0.9rem, 0.4500rem + 2.0000vw, 1.5rem); line-height:1.4; margin-top:0}
.multi-column {  column-gap: 4em; column-rule: 1px solid #999; column-fill: balance-all; column-width: max(400px);}
.multi-column p:not(:first-of-type) { text-indent:3rem; }

.txt-centred {text-align:center}
.txt-left {text-align:left}
.txt-right {text-align:right}
.txt-justified {text-align:justify}
.txt-shadowed-dark {text-shadow: 2px 2px #000000}
.txt-shadowed-light {text-shadow: 2px 2px #fff}

.Box1 { grid-area: Box1; }
.Box2 { grid-area: Box2; }


.embolden { font-weight: 800 }
.box-shadowed { 
	-webkit-box-shadow: 1px 9px 6px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 1px 9px 6px 0px rgba(0,0,0,0.4);
	box-shadow: 1px 9px 6px 0px rgba(0,0,0,0.4);
	margin-bottom:1.5rem;
}

/* --- INTRO ------------------------------------------------------------- */
#intro{min-height:500px;background-image:url(../images/banner-item1.jpg); background-position:left; background-repeat:no-repeat; background-size:cover}
#intro .content{width:90%; margin:0 auto; padding-top:70px}
#intro .content p {line-height:1.5}
#intro h1, #intro h2, #intro h3, #intro h4 {margin: 0 auto 1rem auto; text-align:center}
#intro h1 {color:var(--color-westend); font-weight:var(--txt-embolden)}
#intro h2, #intro h3 {color:var(--color-eastend); font-weight:var(--txt-embolden)}
/* --- ABOUT ------------------------------------------------------------- */
#about {background-color:var(--color-light)}
/* --- MANAGERS ------------------------------------------------------------- 5C4033*/
#managers {background-color:#7B3F00; color:#fff} 
/* --- MISC ------------------------------------------------------------- */
#misc {background-color:var(--color-light)}
/* --- PRICING ------------------------------------------------------------- */
#pricing .hero {width:100%; min-height:250px; padding:0; margin:0; background-image:url(../images/gallery_index/money.jpg); background-position:left; background-repeat:no-repeat; background-size:cover}
#pricing h1 span:first-of-type {color:var(--color-westend)}
#pricing h1 span {color:var(--color-eastend)}



.grid-container {
  /*** User input values.  */
  --grid-layout-gap: 10px;
  --grid-column-count: 2;
  --grid-item--min-width: 300px;

  /*** Calculated values. */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}

.grid-container3 {
  /*** User input values.  */
  --grid-layout-gap: 2rem;
  --grid-column-count: 3;
  --grid-item--min-width: 300px;

  /*** Calculated values. */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}


.btn-bar{display:flex;flex-flow: row wrap;margin:10px auto 10px auto; justify-content:center;}
.btn-category {font-family:var(--font-sans-serif);display:inline-block; margin: 0 2px; padding:8px 16px; color: #fff; font-size: 1rem; border-radius:4px; white-space:nowrap; text-align:center;text-decoration:none; margin-bottom:1em}
.btn-category:hover {background-color:var(--color-dark); color:var(--color-gold)}
.bck-eastend {background-color:var(--color-eastend)}
.bck-westend {background-color:var(--color-westend)}
.bck-denim {background-color:var(--color-denim)}

.frame80 {width:80%; margin:1.5em auto;}

figure { width:90%; margin:0 auto; text-align:center;}
figcaption {margin:1rem; font-size: clamp(0.9rem, 0.4500rem + 2.0000vw, 1.5rem); line-height:1.4;}
figcaption a {text-decoration:none; font-weight:600; font-size: inherit}
figcaption a:hover {background-color:var(--color-dark); color:var(--color-gold) }

@media screen and (min-width: 900px) {
  #hamburger{ display:none}
  .topnavlist{display:inline}
  header .topnavlist li:first-child, header .topnavlist li:last-child {display:none}

}

@media screen and (min-width: 1100px) { header {justify-content: center; align-items: center;} }