p {
    font-size: 0.663rem
    color: #005A0C;
    font-family: "Capriola", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.25rem;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}

img {
  max-width: 100%; 
  height: auto;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

li{
  list-style-type: numerals;
  margin-right: 1.5rem;
  margin-left: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem; 
}


h1 { font-size: 3.4rem;
    color: #FFFFFF;
        font-family: "Bungee", sans-serif;
        font-weight: 400;
        font-style: normal;
        margin-top: 2.278rem;
        margin-bottom: 2.278rem;
        text-align: center;
}

h2 { font-size: 1.27rem;
    color: #005A0C;
    background-color: #A0FFA8;
    font-family: "Capriola", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-top: 1.054rem;
  margin-bottom: 1.054rem;
  padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 0.5rem;
line-height: 1.688rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
}

h3{font-size: 1.15rem;
    color: #005A0C;
    background-color: #A0FFA8;
    font-family: "Capriola", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 0.5rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
}

h4{font-size: 1.15rem;
    color: #005A0C;
    background-color: #A0FFA8;
    font-family: "Capriola", sans-serif;
  font-weight: 400;
  font-style: normal;
padding-bottom: 1rem;
padding-left: 0.5rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
}

h5{ font-size: 0.663rem
  color: #005A0C;
  font-family: "Capriola", sans-serif;
font-weight: 400;
font-style: normal;
margin-top: 1rem;
margin-bottom: 1rem;
line-height: 1.25rem;
margin-right: 0.5rem;
margin-left: 0.5rem;
margin-left: 0.5rem;
margin-right: 0.5rem;

}

li{font-size: 0.663rem
    color: #005A0C;
    font-family: "Capriola", sans-serif;
  font-weight: 400;
  font-style: normal;
}

ol{
margin-left: 1rem;
}

.bioblitzdescription h2{
  color: #005A0C;
  background-color: #FFFFFF;
}

header{ background-image: url('img/ellipseheadermobile.svg');
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
 background-size: 128%;
  padding-bottom: 45px;
}
  
.jaclogo { 
max-width: 70%;
display: block;
  margin: auto;
  width: 80%;
  }
  
  footer{
    text-align: center;
    background-image: url('img/border.svg');
    height: 15rem;
    background-size: 103%;
    background-position-y: 33px;
    background-position-x: 44%;
    background-repeat: repeat-x;
  }
  
  .copyright { 
    color: #A0FFA8;

  }


  .why > div:nth-child(2) {
    
    padding-bottom: 3.5rem;
    }

    
  


header a:link  {color: #A0FFA8;}
header a:visited  {color: #005A0C;}
header a:hover  {color: #00AE74;}
header a:active  {color: #006E4A;} 

main a:link  {color: #A0FFA8;}
main a:visited  {color: #005A0C;}
main a:hover  {color: #00AE74;}
main a:active  {color: #006E4A;}

footer a:link  {color: #A0FFA8;}
footer a:visited  {color: #005A0C;}
footer a:hover  {color: #00AE74;}
footer a:active  {color: #006E4A;}



@media screen and (min-width: 20.625rem) {

  header{ background-image: url('img/ellipse334.svg');
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: -85px;
   background-size: 123%;
    padding-bottom: 45px; }
  
  } /* closing media query */
    
  @media screen and (min-width: 21.6rem) {

    header{ 
      background-position-y: -118px;
     background-size: 123%;
      padding-bottom: 45px;
    }


}  /* closing media query */


@media screen and (min-width: 23.5rem) {

  header{ 
    background-position-y: -140px;
   background-size: 123%;
    padding-bottom: 45px;
  }


}  /* closing media query */


@media screen and (min-width: 24.938rem) {

  header{ 
    background-position-y: -179px;
   background-size: 125%;
    padding-bottom: 45px;
  }


}  /* closing media query */


@media screen and (min-width: 26.125rem) {

  header{ 
    
    padding-bottom: 50px;
  }
    h1{
      padding-left: 5px;
      padding-right: 5px;
      padding-top:1px;
    }

}  /* closing media query */


@media screen and (min-width: 26.75rem) {

  header{ 
    background-position-y: -179px;
   background-size: 125%;
    padding-bottom: 107px;
  }
    h1{
      
      padding-top:10px;
    }
    
}  /* closing media query */


@media screen and (min-width: 27.75rem) {

  header{ 
    background-position-y: -179px;
   background-size: 120%;
    padding-bottom: 107px;
  }
    h1{
      padding-left: 5px;
      padding-right: 5px;
      padding-top: 15px;
    }
    
}  /* closing media query */


@media screen and (min-width: 29.688rem) {

  header{ 
    background-position-x: center;
    
  }
    
}  /* closing media query */

@media screen and (min-width: 29.375rem) {

  header{ 
    background-position-x: center;
    background-position-y: -179px;
   background-size: 114%;
    padding-bottom: 100px;
  }
    
    
}  /* closing media query */


@media screen and (min-width: 30.813rem) {

  header{ 
    background-position-x: center;
    background-position-y: -179px;
   background-size: 108%;
    
  }
    
    
}  /* closing media query */

@media screen and (min-width: 32.75rem) {

  header{ 
    background-position-y: -239px;
    
  }

  .jaclogo { 
    max-width: 55%;
    display: block;
      margin: auto;
      width: 80%;
  }
    
}  /* closing media query */

@media screen and (min-width: 35.563rem) {

  header{ 
    background-position-y: -296px;
  }  
}  /* closing media query */

@media screen and (min-width: 36.5rem) {

  h1{      
    font-size: 4rem ;
  }

}  /* closing media query */

@media screen and (min-width: 40.625rem) {

  h1{      
    font-size: 4rem ;
  }

  header{ 
    background-position-y: -340px;
  }  

}  /* closing media query */

@media screen and (min-width: 42.75rem) {

  h1{      
    font-size: 4.5rem ;
  }
}  /* closing media query */

@media screen and (min-width: 44.813rem) {

  header{ 
    background-position-y: -410px;
    background-size: 113%;
  }  

}  /* closing media query */

@media screen and (min-width: 47rem) {

  header{ 
    background-position-y: -390px;
    background-size: 106%;
    
  }  
  h1{
    font-size: 5rem;
  }

}  /* closing media query */

@media screen and (min-width: 48rem) {

.flex-container {
    display: flex;
    /* put elements side-by-side */
}

.when .flex-container {
  flex-direction: row-reverse;
  /* places elements in reverse order: last element becomes first */
}

.when p,
.when picture,
.why p,
.why picture,
.what picture,
.what div,
.where picture,
.where p,
.how picture,
.how div

{
    flex-basis: 50%;
}

.what {
  position: relative;
}

.what::before {

  content: " "; 
  /* content cannot be empty, otherwise box collapses to no height */


  position: absolute;   
  /* position anywhere you like, on a layer */
  /* could also be "relative" for different behaviour */

  z-index: 99999;
  /* control stacking like "send to back" */
  /* can be any negative (send to back) or positive (send to front) number, 
  ex: 99 is the 99th layer above the background */

  display: block;
  /* behave as normal block level element */
 
  background-image: url(img/phoneandsquirelvertical.png);
  /* select image: path points from the css file to the image file */

  background-repeat: no-repeat;
  /* by default, backgrounds repeat to fill up the entire space */

  background-size: 100%; 
  /* or "contain", or a size expressed in em, rem, %, px, etc */
  
  width: 60%;
  height: 35rem;
  /* control size explicitly in em, rem, %, px, etc */

  top:16rem; 
  /* match height of pseudo-element to move it above top edge of parent */

  right:-2rem;
  /* align left */
}


.why {
position: relative;
}

.why::before {

content: " "; 
/* content cannot be empty, otherwise box collapses to no height */


position: absolute;   
/* position anywhere you like, on a layer */
/* could also be "relative" for different behaviour */

z-index: 99999;
/* control stacking like "send to back" */
/* can be any negative (send to back) or positive (send to front) number, 
ex: 99 is the 99th layer above the background */

display: block;
/* behave as normal block level element */

background-image: url(img/plantresearch.svg);
/* select image: path points from the css file to the image file */

background-repeat: no-repeat;
/* by default, backgrounds repeat to fill up the entire space */

background-size: 25%; 
/* or "contain", or a size expressed in em, rem, %, px, etc */

/* border-style: solid;
border-width: 5px;
border-color: red;
*/ 

width: 70%;
height: 15rem; 
/* control size explicitly in em, rem, %, px, etc */

top:15rem; 
/* match height of pseudo-element to move it above top edge of parent */

right:-18rem;
/* align left */
}
  
}   /* closing media query */

@media screen and (min-width: 50.125rem) {

  header{ 
    background-position-y: -419px;
    background-size: 104%;
    
  }  

}  /* closing media query */

@media screen and (min-width: 53.313rem) {

  header{ 
    background-position-y: -450px;
    background-size: 104%;
  }
    h1{
font-size: 5.5rem;
padding-left: 2rem;
padding-right: 2rem;
    } 

}  /* closing media query */

@media screen and (min-width: 56.625rem) {

  header{ 
    background-position-y: -430px;
    background-size: 97%;
  }  
  h1{
    padding-bottom: 0rem;
  }
  
}  /* closing media query */

@media screen and (min-width: 59.813rem) {

  header{ 
    background-position-y: -430px;
    background-size: 97%;
    padding-bottom: 8rem;
  }  
  
  h1{
    padding-bottom: 0rem;
  }
  
  .wrapper {
    max-width: 59.813rem; margin:0 auto;
  }

  .jac {
    max-width: 38%;
  }


  .what {
    position: relative;
  }

  .what::before {
  
    content: " "; 
    /* content cannot be empty, otherwise box collapses to no height */


    position: absolute;   
    /* position anywhere you like, on a layer */
    /* could also be "relative" for different behaviour */

    z-index: 99999;
    /* control stacking like "send to back" */
    /* can be any negative (send to back) or positive (send to front) number, 
    ex: 99 is the 99th layer above the background */

    display: block;
    /* behave as normal block level element */
   
    background-image: url(img/phoneandsquirelvertical.png);
    /* select image: path points from the css file to the image file */

    background-repeat: no-repeat;
    /* by default, backgrounds repeat to fill up the entire space */

    background-size: cover; 
    /* or "contain", or a size expressed in em, rem, %, px, etc */
    
    width: 60%;
    height: 35rem;
    /* control size explicitly in em, rem, %, px, etc */

    top:15rem; 
    /* match height of pseudo-element to move it above top edge of parent */

    right:0rem;
    /* align left */
}


.why {
  position: relative;
}

.why::before {

  content: " "; 
  /* content cannot be empty, otherwise box collapses to no height */


  position: absolute;   
  /* position anywhere you like, on a layer */
  /* could also be "relative" for different behaviour */

  z-index: 99999;
  /* control stacking like "send to back" */
  /* can be any negative (send to back) or positive (send to front) number, 
  ex: 99 is the 99th layer above the background */

  display: block;
  /* behave as normal block level element */
 
  background-image: url(img/plantresearch.svg);
  /* select image: path points from the css file to the image file */

  background-repeat: no-repeat;
  /* by default, backgrounds repeat to fill up the entire space */

  background-size: 40%; 
  /* or "contain", or a size expressed in em, rem, %, px, etc */
  
  /* border-style: solid;
  border-width: 5px;
  border-color: red;
  */ 

  width: 70%;
  height: 15rem; 
  /* control size explicitly in em, rem, %, px, etc */

  top:15rem; 
  /* match height of pseudo-element to move it above top edge of parent */

  right:-20rem;
  /* align left */
}



  
}  /* closing media query */