html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: ''; clear: both; height: 0; }

html { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

*, *:before, *:after {box-sizing: inherit}

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden;}

body {    

    background: #000000;
    color: #f3f4f1;
    overflow-x: hidden;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    padding-bottom: 100px;
    width: 100%;
    justify-content: center;
}

main {
display: flex;
flex-direction: column;
align-items: center;
}

header {
    display: block;
    margin: 0 auto;
    width: 180px;
    padding-top: 100px;
}

a:hover {
  background-color: rgb(7, 112, 21);
  font-size: 18px;
}

/* Gallery paramters set here */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10vmin;
    overflow: hidden;
    transform: skew(-5deg);
}


/* [ON BIG SCREEN] */
/* (A) WRAPPER */
#hamnav {
    
    position: fixed;   
    z-index: 100; //exceed z-index of other elements on the page
    display: none;
    background: transparent url(https://sherwoodarcheryshop.ca/trees-ed.jpg) bottom repeat-x;
    width: 100%;
    top: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
}

  /* (B) HORIZONTAL MENU ITEMS */
#hamitems { display: flex; }
#hamitems a {
    flex-grow: 1;
    flex-basis: 0;
    padding: 10px;
    color: #f2ed3b;
    text-decoration: none;
    text-align: center;
}

#hamitems a:hover { background: #000000; }

  /* (C) HIDE HAMBURGER */
#hamnav label, #hamburger { display: none; }

    /* Some more styles to beutify this example */
    nav a{
    color: #006308;
    text-decoration: none;
    display: inline-block;
    border-radius:50px;
}
/*.container p{
    line-height: 200px; /* Create scrollbar to test positioning
} */

h1 {
    font-size: 70px;
    text-align: center;
    padding-top: 100px;
}

h2  {
    font-size: 50px;
    text-align: center;
    padding-top: 100px;
    }

h3  {
    font-size: 30px;
    text-align: center;
    padding-top: 100px;
}

/* unvisited link */
a {
    text-decoration: none;
    color: #ffffff;
}

/* mouse over link */
a:hover {
    color: rgb(7, 112, 21);
}

  /* selected link */
/*a:active {
    color: #f3f4f1;
}
*/

.flex-parent {
    display: flex;
    justify-content: space-around;
    font-size: 16px;
    border: 0;
    height: 80%;
}

.flex-child {
    border: 0;
    padding: 20px;
    padding-bottom: 50px;
}

.bows   {
    height: 700px;

}

img {
    max-width: 100%;
}

/* wrapper styles */
.wrapper {
    max-width: 1700px;
    width: 95%;
    margin: 0 auto;
}

/* The hero image */
.hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: url("https://sherwoodarchery.ca/tough.jpg");
    /* Set a specific height */
    height: 100vh;
    background-size: cover;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
}

/* Same parameters as above, for the Arrows page */
.hero-archer {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: url("https://sherwoodarchery.ca/back.jpg");
    /* Set the height to match the viewpoert */
    height: 100vh;
    width: 100%;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

  /* Place text in the middle of the image */
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 22px;
}

/* header styles */
/* Steps:
    1. Allow the header elements to have a base font-size 2rem but allow it to grow by 0.5vw 
    2. Center the text and make it uppercased at all times 
    3. Give it a margin on the top and bottom of 5vh and on the left and right of 20px 
    4. Give it the colour of #ffc000 */

/* ul styles */
/* Steps:
    1. Give the ul element the display of flex as well as the ability to wrap.
    2. On the same selector, justify the content for all of the child elements to stay centered horizontally at all times. */
ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* li styles */
/* Steps:
    1. Each li element should take up 1/3 of the total space 
    2. Each figure should have a margin of 30px on all sides  
    3. Give them a border that is 2px solid with a colour of #ffc000 
    4. Give them a padding of 25px on the top and bottom and 2% on the left and right 
    5. Set a min-width of 220px to prevent the lis from shrinking too small
    6. Pass in the value of text-align: center to allow the p elements to be centered */
/* list item styles */
li  {
    width: calc((100%/3) - 100px);
    margin: 5px;
    text-align: center;
    /* border: 2px solid #ffc000; */
    padding: 50px 0%;
    min-width: 330px;
    max-width: 1280px;
}

li p {
    padding: 5px 0 0 0;
}

/* Stylized Number List parameters begin here */

.list-wrap {
  padding:40px;
  background-color:#d8b9c3;
  border-radius:5px;
  width:400px;
}

div.list {
  counter-reset: list-number 0;
}

div.list div:before {
  counter-increment: list-number;
  content: counter(list-number);
  
  margin-right: 10px;
  margin-bottom:10px;
  width:35px;
  height:35px;
  display:inline-flex;
  align-items:center;
  justify-content: center;
  font-size:16px;
  background-color:#f2ed3b;
  border-radius:50%;
  color:#000000;
}

article {
    background-color: #2E362F;
    transform: translate(-50%, -50%);
    align-items:center;
    justify-content: center;
    font-size:16px;
    text-align: center;
    /* border: 2px solid #ffc000; */
    padding: 50px 0%;
    min-width: 330px;
    max-width: 1280px;
}


.row    {
    box-sizing: border-box;
    overflow: hidden;
}

.nav 
{display: flex;
align-items: center;
text-align: left;}

.nav ul a 
{padding: 10%;
border-radius: 4px;}

.nav .col:first-of-type {  }

.nav li {padding: 5%;}


.col {}


.footer {
padding-top: 25px;
align-items: center;
display: flex;
flex-direction: column;
}

hr {
box-sizing: content-box;
height: 0;
overflow: visible;
width: 100vw;
}