* {margin: 0;padding: 0;word-wrap: break-word; }
body {
font-family: 'calibri', sans-serif;
display: grid;
grid-template-rows: auto auto 500px; 
grid-template-columns: 100%; 
/*height: 100vh; /* take up full height of viewport */
height:100%;
}
header {
grid-row: 1; 
text-align:center;
background:white;
width:100%;
-webkit-box-shadow: 0 4px 6px -6px #222;
-moz-box-shadow: 0 4px 6px -6px #222;
box-shadow: 0 4px 6px -6px #222;
padding:100px 0;
z-index:111;
}

#header, #navbar, #choose img, sticky-header {transition: 0.8s;}

.sticky-header {top:0;position:sticky;padding:0;}
.sticky-blurb {padding-top:100px;}

header img {max-height:150px;width:auto;}
#header {display:grid; grid-template-columns:1fr 2fr;align-items:center;justify-items:center;text-align:center;margin:0 auto;}
nav {display:grid; grid-template-columns:repeat(5,1fr);grid-gap:1em;align-items:center;justify-items:center;text-align:center;border-bottom:0.5em white solid;max-width:900px;margin:0 auto;}
nav a {font-family: "Text Me One", sans-serif;font-size: 1.2em;text-transform: uppercase;text-decoration: none;color: black;padding:0.5em;border-bottom:5px white solid;}
nav a:hover {color: #616A91;border-bottom:5px #4e6ae5 solid;font-weight:700;}


main {
height:100%;
grid-row: 2; 
}









main .spacer {text-align:center;width:100%;background-color: #ddd;padding:2em 0;font-size:1.5em;}


main section {padding:1em 0;margin: 10em auto;width:100%;}
main section h22 {padding:1em 0.5em;font-size:2em;background:#a3cbee;width:50%;color:black}

main section h3 {padding:1em 0;font-size:2em;color:#616A91;}
main section div {width:80%;margin:0 auto;}
main section p {padding-bottom:1em;}
main section sub {font-size: 0.8em;}


h2{font-family: "Text Me One", sans-serif;font-size:2.5em;color:black;width:60%;background:#FFF0AF;text-align:right;background: linear-gradient(90deg,rgba(255, 240, 175, 1) 0%, rgba(255, 240, 175, 1) 50%, rgba(255, 255, 255, 1) 100%);}
section .end {background:#a3cbee;width:80%;font-size:2.5em;grid-row:3;grid-column:1;padding:0 1.5em;height:100%;justify-self:end;background: linear-gradient(270deg,rgba(163, 203, 238, 1) 0%, rgba(255, 255, 255, 1) 100%);}

#mission, #regeneration, #process, #about {padding:0;display:grid; grid-template-columns:3fr 2fr;grid-template-rows:3fr 6fr 1fr;align-items:center;}
#mission h2, #regeneration h2, #process h2, #about h2 {grid-row:1;grid-column:1;padding:0 2em;height:100%;align-content:center;}
#mission div, #regeneration div, #process div, #about div {grid-row:2;grid-column:1;}
#mission img, #regeneration img, #process img, #about img {height:100%;margin:0;grid-row:1/4;grid-column:2;}
section .imagebg {width:100%;height:100%;grid-row:1/4;grid-column:2;}
#mission .imagebg {background-image:url("/images/net-zero-hand.png");background-repeat: no-repeat;background-size: cover;background-position: center;}
#regeneration .imagebg {background-image:url("/images/clothing-landfill.png");background-repeat: no-repeat;background-size: cover;background-position: center;}
#process .imagebg {background-image:url("/images/spinning-threads.jpg");background-repeat: no-repeat;background-size: cover;background-position: center;}
#about .imagebg {background-image:url("/images/recycle-machine.png");background-repeat: no-repeat;background-size: cover;background-position: center;}
#contact .imagebg {background-image:url("/images/clothing-recycle-sign.png");background-repeat: no-repeat;background-size: cover;background-position: center;}

#involvement {margin:0 auto;padding:4em 0;display:grid; grid-template-columns:1fr minmax(60%,600px) 1fr;max-width:unset;width:100%;align-items:center;text-align:center;}
#involvement div {grid-column:2;}
#involvement h2 {background:unset;width:unset;text-align:unset;}
#involvement blockquote {padding:0 4em;font-size:2em;font-style:italic;font-family: "Delius Swash Caps", cursive;}
#involvement p {padding:2em;}
#involvement hr {margin:3em auto;width:100px;height:5px;background:#4e6ae5;border:0;}

main .blurbfabric {padding:0;text-align:center;max-width:750px;width:80%; background-image: url("bg.jpg");-webkit-box-shadow:0px 0px 6px 2px #444;-moz-box-shadow:0px 0px 6px 2px #444;box-shadow:0px 0px 6px 2px #444;}
main .blurbfabric h3 {font-family: "Delius Swash Caps", cursive;padding:2em;margin: 0 auto;font-size:2.5em;letter-spacing:0.15em;color:#616A91;background:rgba(255, 240, 175, 0.5);}

#blurbfab {margin:0 auto;padding:4em 0;display:grid; grid-template-columns:1fr minmax(80%,800px) 1fr;grid-template-rows:2fr 4fr 2fr;max-width:unset;width:100%;align-items:center;text-align:center;background-image:url("bg.jpg");}
#blurbfab blockquote {color:#1E1F6D;padding:0 4em;font-size:3em;font-style:italic;font-family: "Delius Swash Caps", cursive;grid-column:2;grid-row:2;font-weight:700;text-shadow: 0px 0px 5px rgba(255,255,255, 1);}

#blurbquote {margin:0 auto;padding:4em 0;display:grid; grid-template-columns:1fr minmax(80%,800px) 1fr;grid-template-rows:2em auto 2em;max-width:unset;width:100%;align-items:center;text-align:center;background-image:url("/images/fabric-rolls.jpg");background-repeat: no-repeat;background-size: cover;background-position: center;}
#blurbquote blockquote {color:#1e1f6d;padding:2em 3em;font-size:3em;font-style:italic;font-family: "Delius Swash Caps", cursive;grid-column:2;grid-row:2;font-weight:700;text-shadow: 0px 0px 5px rgba(255,255,255, 1);}

#blurb {margin:0 auto;padding:4em 0;display:grid; grid-template-columns:1fr minmax(60%,600px) 1fr;grid-template-rows:2fr 4fr 2fr;max-width:unset;width:100%;align-items:center;text-align:center;background-image:url("/images/fabric-recycle-sign.png");background-repeat: no-repeat;background-size: cover;background-position: center;}
#blurb blockquote {color:white;padding:0 4em;font-size:3em;font-style:italic;font-family: "Delius Swash Caps", cursive;grid-column:2;grid-row:2;}


main .blurboption {padding:50px 0;text-align:center;width:100%;background-color: #444; background-image: url("/images/fabric-recycle-sign.png");background-position: center;background-repeat: no-repeat;background-size: contain;}
main .blurboption h3 {padding:1em 0;margin: 0 auto;max-width:600px;width:80%;height:100%;font-size:1.5em;font-style:italic;color:white;}

main .blurb {padding:50px 0;text-align:center;width:100%;background-color: #444; background-image: url("/images/fabric-recycle-sign.png");background-position: center;background-repeat: no-repeat;background-size: contain;}
main .blurb h3 {padding:1em 0;margin: 0 auto;max-width:600px;width:80%;height:100%;font-size:1.5em;font-style:italic;color:white;}
main .blurb img {width:100%;margin:2em 0;}


#choose {padding:1em;display:grid; grid-template-columns:repeat(3,1fr);grid-gap:1em;background:#ddd;width:90%;max-width:900px;-webkit-box-shadow:0px 0px 6px 2px #444;-moz-box-shadow:0px 0px 6px 2px #444;box-shadow:0px 0px 6px 2px #444;}
#choose span {border:2px #616A91 solid;background:white;display:grid; grid-template-rows:auto;}
#choose img {width:100%;margin:0;grid-row:2;grid-column:1;z-index:6;align-self:end;}
#choose img:hover {z-index:4;}
#choose h3 {text-align:center;align-self:center;grid-row:1;padding:0.5em;color:#E6724E;}
#choose p {padding:2em 0;grid-row:2;grid-column:1;z-index:5;align-self:center;background:rgba(255, 255, 255, 0.75);}
#choose p:hover {z-index:7;}



#contact {padding:0;display:grid; grid-template-columns:repeat(2,1fr);grid-gap:1em;}
#contact img {width:100%;margin:0;}

form {display: grid;grid-template-columns: auto;grid-template-rows: auto;padding:1em 0;}
form input, form textarea {color: #444444;font-size: 1em;width: 90%;padding: 5%;margin: 0 0 1em;border: 1px solid #cccccc;font-family: 'calibri', sans-serif;}
form input[type="submit"]:hover {background: #707070;transition: background-color 0.3s ease-in-out;}
form input[type="submit"] {cursor: pointer;width: 100%;border: none;background: #444444;color: white;padding:1em;}


footer {
grid-row: 3; 
background-image: url("jeans.jpg");
background-position: center;
background-repeat: no-repeat; 
background-size: cover;
text-align:center;
font-family: "Delius Swash Caps", cursive;
}
footer h4 {padding:50px 0;margin: 0 auto;max-width:600px;width:80%;font-size:1.5em;font-style:italic;font-weight:400;}