/* CSS Document */

html, body{
    height:100%;
    margin:0;
      font-family: sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
    font-size:16px;
}


h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}


button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  all: unset;            
  display: inline-block;
  cursor: pointer;
  font: inherit;
  text-align: center;
  line-height: 1; 
}


.text-left{ text-align:left;}
.text-center{ text-align:center;}
.text-right{ text-align:right;}




.text-xs { font-size: 12px; } 
.text-sm { font-size: 14px; }
.text-base { font-size: 16px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; } 
.text-3xl { font-size: 32px; } 
.text-4xl { font-size: 40px; }
.text-hero { font-size: 64px; }
.text-hero-2 { font-size: 56px; }

.text-line-height{ line-height:1;}

.tracking-tight {
  letter-spacing: -0.5px; 
}

.tracking-normal {
  letter-spacing: 0;
}

.tracking-wide {
  letter-spacing: 2px;
}

.sup {
  font-size: 0.50em;       /* shrink a bit */
  vertical-align: super;   /* push it up */
  line-height: 1;          /* avoid extra spacing issues */
}

.text-100 { font-weight: 100; }
.text-200 { font-weight: 200; }
.text-300 { font-weight: 300; }
.text-400 { font-weight: 400; }
.text-500 { font-weight: 500; }
.text-600 { font-weight: 600; }
.text-700 { font-weight: 700; }
.text-800 { font-weight: 800; }
.text-900 { font-weight: 900; }

.text-white { color:#fff; }
.text-black { color:#000;}
.text-yellow { color:#FFD641;}

.alpha-shadow {
  filter: drop-shadow( 2px 2px 4px rgba(0,0,0,0.5));
}

.box-shadow {
  box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.contain{
    width:1140px;
    margin:0 auto;
}
.h-100{
    height:100px;
}
.h-200{
    height:200px;
}
.grid-v-center{
    display:grid;
    align-items: center;
    justify-items:center;
}
.grid2c{
    display:grid;
    grid-template-columns:1fr 1fr;
}
.grid3c{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
}
.grid-header{
     grid-template-columns:auto 1fr auto;
}
.gap-8{ gap:8px; }
.gap-16{ gap:16px; }
.gap-24{ gap:24px; }
.gap-32{ gap:32px; }


.btn{
    border-radius:4px;
    background:#ccc;
    padding:10px;
}

.button1{
    background:#fff;
    color:#000;
}
.button2{
    background:#FFD641;
    color:#000;
}
.button3{
    background:#2699FB;
    color:#fff;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#top-nav ul {
  list-style: none;   /* remove bullets */
  margin: 0;
  padding: 0;
}

#top-nav ul li {
  display: inline-block; /* line up horizontally */
  margin: 0 15px;        /* spacing between items */
}

    
#header {
    flex: 0 0 auto;
    color:#fff;
}

#main {
  flex: 1 0 auto;
}

#hero{
    height:500px;
    background:url(/images/quarry_resize.jpg);
    background-size:cover;
}
#footer {
  flex: 0 0 auto;
  color:#fff;
}


.m-0  { margin: 0; }
.m-8  { margin: 8px; }
.m-16 { margin: 16px; }
.m-24 { margin: 24px; }
.m-32 { margin: 32px; }
.m-40 { margin: 40px; }

.mt-0  { margin-top: 0; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }

.mr-0  { margin-right: 0; }
.mr-8  { margin-right: 8px; }
.mr-16 { margin-right: 16px; }
.mr-24 { margin-right: 24px; }
.mr-32 { margin-right: 32px; }
.mr-40 { margin-right: 40px; }

.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }

.ml-0  { margin-left: 0; }
.ml-8  { margin-left: 8px; }
.ml-16 { margin-left: 16px; }
.ml-24 { margin-left: 24px; }
.ml-32 { margin-left: 32px; }
.ml-40 { margin-left: 40px; }

.mx-0  { margin-left: 0; margin-right: 0; }
.mx-8  { margin-left: 8px; margin-right: 8px; }
.mx-16 { margin-left: 16px; margin-right: 16px; }
.mx-24 { margin-left: 24px; margin-right: 24px; }
.mx-32 { margin-left: 32px; margin-right: 32px; }
.mx-40 { margin-left: 40px; margin-right: 40px; }

.my-0  { margin-top: 0; margin-bottom: 0; }
.my-8  { margin-top: 8px; margin-bottom: 8px; }
.my-16 { margin-top: 16px; margin-bottom: 16px; }
.my-24 { margin-top: 24px; margin-bottom: 24px; }
.my-32 { margin-top: 32px; margin-bottom: 32px; }
.my-40 { margin-top: 40px; margin-bottom: 40px; }

.p-0  { padding: 0; }
.p-8  { padding: 8px; }
.p-16 { padding: 16px; }
.p-24 { padding: 24px; }
.p-32 { padding: 32px; }
.p-40 { padding: 40px; }

.pt-0  { padding-top: 0; }
.pt-8  { padding-top: 8px; }
.pt-16 { padding-top: 16px; }
.pt-24 { padding-top: 24px; }
.pt-32 { padding-top: 32px; }
.pt-40 { padding-top: 40px; }
.pt-64 { padding-top: 64px; }
.pt-80 { padding-top: 80px; }
.pt-96 { padding-top: 96px; }
.pt-200 { padding-top: 200px; }

.pr-0  { padding-right: 0; }
.pr-8  { padding-right: 8px; }
.pr-16 { padding-right: 16px; }
.pr-24 { padding-right: 24px; }
.pr-32 { padding-right: 32px; }
.pr-40 { padding-right: 40px; }

.pb-0  { padding-bottom: 0; }
.pb-8  { padding-bottom: 8px; }
.pb-16 { padding-bottom: 16px; }
.pb-24 { padding-bottom: 24px; }
.pb-32 { padding-bottom: 32px; }
.pb-40 { padding-bottom: 40px; }

.pl-0  { padding-left: 0; }
.pl-8  { padding-left: 8px; }
.pl-16 { padding-left: 16px; }
.pl-24 { padding-left: 24px; }
.pl-32 { padding-left: 32px; }
.pl-40 { padding-left: 40px; }

.px-0  { padding-left: 0; padding-right: 0; }
.px-8  { padding-left: 8px; padding-right: 8px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.px-24 { padding-left: 24px; padding-right: 24px; }
.px-32 { padding-left: 32px; padding-right: 32px; }
.px-40 { padding-left: 40px; padding-right: 40px; }

.py-0  { padding-top: 0; padding-bottom: 0; }
.py-8  { padding-top: 8px; padding-bottom: 8px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }
.py-24 { padding-top: 24px; padding-bottom: 24px; }
.py-32 { padding-top: 32px; padding-bottom: 32px; }
.py-40 { padding-top: 40px; padding-bottom: 40px; }