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;}

/* Small screen display css code parameters begin here */

@media screen and  (max-width: 600px) {

    /* Add some padding on document's body to prevent the content
    to go underneath the header and footer */

body{        
    background: #000000;
    color: #f3f4f1;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    padding-top: 60px;
    padding-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh;
    max-width: 500px;
    text-align: center;
    justify-content: center;
    align-items: center;
}


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


/* Page Banner parameters begin here */
.container{
    margin: 0 auto; /* Center the DIV horizontally */
}

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

/* [ON SMALL SCREENS] */
@media screen and (max-width: 768px){
    /* (A) BREAK INTO VERTICAL MENU */
#hamitems a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #333;
}
    /* (B) SHOW HAMBURGER ICON */
#hamnav label { 
    position: sticky;
    top: 0;
    display: inline-block;
    color: #2E362F;
    background: #f3f4f1;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
}

    /* (C) TOGGLE SHOW/HIDE MENU */
#hamitems { display: none; }
#hamnav input:checked ~ #hamitems { display: block; }
}

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

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

h2  {
    font-size: 26px;
    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: 14px;
    border: 0;
}

.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://sherwoodarcheryshop.ca/tough.jpg");
    /* Set a specific height */
    height: 100vh;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* 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://sherwoodarcheryshop.ca/back.jpg");
    /* Set a specific height */
    height: 85%;
    /* 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;
  border-radius: 10px;

}

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;
}

/* Footer parameters set here */
footer {

    padding: 25px;
    height: 0 auto;
}

.foot   {
    bottom: 25px;
    padding-top: 25px;
    align-items:center;
    justify-content: center;
    text-align: center;
}