* {box-sizing: border-box;}
:root {
  --blu: rgb(0,36,100);
  --wht: rgb(128, 128, 128);
  --gry:rgba(250,250,252,.5);
  --gry-dk:rgba(230,230,232,1);
  --ylw: rgba(255,255,0,.25);
}
body {font-family:sans-serif;background-color:var(--gry);height:100%;}
h1{font-size: 1.85em;font-style:italic;font-weight:200;color:white;text-align:center;}
h2{font-size: .9em;font-weight:300;text-align:center;}
h3{text-align:center;color:var(--blu);}
p{font-size:1em;line-height:1.5;margin:auto;}
p.small{font-size:.9em;border:1px solid var(--blu);border-radius:8px;margin: 2em 1em 0 1em;padding:1em;}
.light{color:white;}
.dark{color:var(--blu);}
img {display:block;width:100%;height:auto;}
.hdg{display:flex;flex-flow:row nowrap;justify-self:center;width:100%;background-color:var(--blu);padding:1em;}
.main {
  display:flex;
  flex-flow:row nowrap;
  justify-content:center;
  background-color: transparent;
  color:var(--blu);
  padding: 20px 0;
  float: left;
  width: 100%;
}
/* menu */
 .sidepanel  {
  width: 0;
  position: fixed;
  z-index: 1;
  height: 250px;
  top: .5em;
  right: .5em;
  background-color: rgba(40,80,140,1);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidepanel a {
  padding: .4em .15em .5em 2em;
  text-decoration: none;
  font-size: 1.2em;
  color: white;
  display: block;
  transition: 0.3s;
}

.sidepanel a:hover {
  color: #f1f1f1;
}

.sidepanel .closebtn {
  position: absolute;
  top: .25em;
  right: 1.2em;
  font-size: 36px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: rgba(0,36,100,.8);
  color: white;
  padding: 10px 15px;
  border: none;
  float:right;
}

.openbtn:hover {
  background-color:rgba(4,90,180,.6);
}
/* end menu */
.icon{color:white;}
.centerfield{display:flex;flex-flow:row wrap;justify-content:space-around;width:85%;margin:auto;}
.left{display:flex;flex-flow:column nowrap;background-color: var(--gry-dk);border:2px solid var(--blu);border-radius:8px;float: left;width:50%;margin:auto 0;}
.middle{background-color: transparent;padding: 2%;float:left;width:50%;}
.right{background-color: transparent;float: left;width: 50%;margin:0}
.ctr{text-align:center;}
.button{background-color: var(--blu);
  border: none;
  color: white;
  padding: .25em 1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5em;
  font-family:sans-serif;
  margin: 0;
  cursor: pointer;
  border-radius:12px}
#mission{text-align:center;width:85%;font-size:.95em;}
#mission-stmts{display:flex;flex-flow:row wrap;justify-content:space-evenly;width:90%;margin:2em auto;}
.mission-stmt{text-align:center;width:33%;margin:.5em;}
.mission-stmt a{font-size:120%;text-decoration: none;}
#statements{display:flex;flex-flow:row nowrap;border:2px solid var(--blu);border-radius:0 0 8px 8px;width:100%;}
.links{font-size:1.1em;text-align:center;background:var(--blu);border-radius:8px;padding:1em;margin:1em auto;width:80%;}
.links a{text-align:center;color:white;text-decoration: none;}
.bigtext{font-size:200%;color:var(--blu);}
#logo{width:80%;margin-left:.5em;}
#insode-logo{justify-self:center;width:40%;height:auto;margin:auto;}
#insode-join{text-align:center;font-size:1.3em;padding:1em;margin:auto;}
#volunteer{font-size:.75em;padding:1em;}
#donate{font-size:.75em;padding:1em}
#qrcode{width:65%;margin-left:2em;padding-top:0;padding-left:1em;}
#donations{display:flex;flex-flow:row wrap;justify-content:center;color:var(--blu);font-size:.9em;text-align:center;width:85%; padding:2em 0 0 0;margin:auto;}
#phone{color:white;width:50%;}
#email{color:white;width:50%;}
#news{font-size:110%;background:var(--ylw);border:4px solid var(--blu);border-radius:8px;padding:0 1em 1em 1em;margin:1em 2em;}
.news-article{text-align:center;font-size:medium;padding:.5em;}
footer {
  display:flex;
  flex-flow:row nowrap;
  color:white;
  background-color: var(--blu);
  font-weight:600;
  font-size:.85em;
  text-align: center;
  align-items: center;
  height:6em;
  width:100%;
  padding:1em;
}
footer a{color:white;}
@media screen and (min-width:480px){
  p.small{font-size:.8em;border:1px solid var(--blu);border-radius:8px;margin: 2em 2em 0 2em;padding:1em;}
  #qrcode{width:60%;margin-left:3em;padding-left:1em;}
  #news{margin:1em 3em;}
 }
@media screen and (min-width:680px){
  .left{width:42%;margin-left:2em;}
  #volunteer,#donate{margin:1em 4em;}
  #qrcode{width:53%;}
  #news{margin:1em 4em;}
  #insode-logo{justify-self:center;width:30%;height:auto;margin:auto;}
}
@media screen and (min-width:768px){
  h1{font-size:2em;}
  h2{font-size:1.2em;}
  .button{width:75%;}
  .sidepanel .closebtn {top: .4em;right: 2em;}*/
  .centerfield{width:70%;}
  .links{width:70%;}
  #mission-stmts{width:80%;}
  #mission{font-size:1em;}
  #logo{width:60%;margin-left:2.5em;}
  #volunteer,#donate{margin:1em 4em;}
  #qrcode{width:50%;margin-left:6em;padding-left:2em;}
  #donations{font-size:.95em;}
  #news{width:60%;margin:1em auto;}
  footer{font-size:1em;}
}
@media screen and (min-width:1024px){
  h1{font-size:2.2em;}
  .sidepanel .closebtn {top: 1.6em;right: 4em;}
  .openbtn{margin-right:5em;}
  .centerfield{width:65%;}
  .left{width:40%;margin:auto 0 auto 4em;}
  #mission{width:70%;}
  #mission-stmts{flex-flow:row wrap;width:65%;}
  .mission-stmt{font-size:110%;width:70%;}
  #logo{width:50%;margin-left:8em;}
  #qrcode{width:40%;margin-left:9em;padding-left:1em;}
  #donations{width:70%;padding-bottom:1em;}
  #news{width:40%;}
}
@media screen and (min-width: 1280px){
  p.small{font-size:.7em;width:75%;}
  .sidepanel .closebtn {top: 1.6em;right: 5em;}
  .openbtn{margin-right:8em;}
  .centerfield{width:60%;}
  .left{width:35%;margin:auto 0 auto 6em;}
  .mission-stmt{width:60%;}
  #mission{width:60%;font-size:1.3em;}
  #mission-stmts{width: 60%;}
  #logo{width:40%;margin-left:14em;}
  #qrcode{width:45%;}
  #volunteer,#donate{margin:1em 3em;}
  #donations{font-size:1.2em;width:60%;}
  #news{width:30%;}
  #news p{text-align:center;}
}
@media screen and (min-width:1352px){
  #logo{margin-left:16em;}
  .sidepanel .closebtn {top: .9em;right: 4.3em;}
  #mission-stmts{width:50%;}
  #qrcode{width:40%;padding-left:2em;}
  #donations{width:50%;}
  #news{width:25%;}
}
@media screen and (min-width:1620px){
  .button{width:60%;}
  #logo{margin-left:20em;}
  #volunteer,#donate{margin:1em 2em;width:85%;}
  #qrcode{width:35%;padding-left:3em;}
  #news{width:20%;}
}