#headercontainer{width: 100%; height: 280px; overflow: hidden;}
#footercontainer{width: 100%; height: 500px; overflow: hidden;}
iframe{width: 100%; height: 100%; scrolling="no" frameBorder = "0";}
 
#page-header {
  font-size: 2em;
  color: black;
  text-align: center;
  margin: 20px 0px 30px 0px;
}

#page-header {
  text-align: left;
}

#page-header-empty {
  font-size: 8em;
  margin-top: 100px;
  margin-bottom: 500px;
  color: red;
}

 
body {
  font-size: 16px;
  color: #fff;
  background-color: #FFFFFF;
  font-family: 'Oxygen', sans-serif;
}


/** HEADER **/

/** Header Contact **/
#header-contact {
/**  background-color: #614fd7;  **/
  background-color: #614fd7;
  width: 100%;
  height: 44px;
  padding-top: 10px;
  margin-top: 0;
}

.header-contact-box {
}

.header-contact-setleft {
  height: 22px;
  background-color: #614fd7;
  float: left;
}

.header-contact-setright {
  float: right;
  background-color: #614fd7;
}

.header-contact-itemleft {
  margin-left: 10px;
}

.header-contact-itemright {
  margin-left: 30px;
  color: White;
}

.header-font-color {
  color: white;
  font-size: .96em;
  font-weight: 50;

}

.header-contact-itemright {
  margin-left: 30px;
}
/** EO Header Contact **/


/** Header Nav **/
#header-nav-box {
}

#header-nav {
  background-color: #FFFFFF;
  border-radius: 0;
  border: 0;
  margin-bottom: 10px;
  display: flex;
}

/** Logo **/
#header-logo {
  width: 203px;
  height: 165px;
  margin: 10px 15px 10px 0;
  margin: 10px 15px 10px 0;
  float: left;
}

#logo-img {
  background: url('../images/logo.jpg') no-repeat;
  width: 203px;
  height: 165px;
}
/** EO Logo **/

/** Nav **/
#header-nav-box {
/** background: blue; **/
  width: 530px;                   /************  WIDEN THIS TO ADD MENU ITEMS ***********/
  height: 100px;
  padding-left: 15px;
  color: red;
  display: flex;
  float: right;
}

#nav-list {
  margin-top: 0px;
}

.header-nav-collapsed {
  width: 150px;
  height: 50px;
  background-color: #614fd7;
  border: black;
  border-width: 1px;
  text-align: center;
  color: White;
  padding-top: 0px;
  margin: 0px 0px 5px 35%;
}

.navtextlink-header-sml {
  height: 18px;
  width: 100%;
  margin: 110px 0px  0px 0px;
  padding-top: 0px;
  text-align: center;
/**
border-style: solid;
border-color: red;
border-width: 1px;
**/
}

.navtextlink-item {
  font-size: 1em;
  color: #614fd7;
  margin-left: 30px;
}

.navtextlink-item1 {
  margin-left: 0px;
}




.banner-img {
/**  width:auto;  **/
  width:605;
  text-align:center;
  padding:0px;
  float: right;
  }


/** FOOTER **/

.footer-body {
  margin-top: 0px;
  width: auto;
  height: 430px;
  display: flex;
/**
border-style: solid;
border-color: red;
border-width: 2px;
**/
}

.footer-flex {
    flex: 1;
}

.footer-sep {
  background: url("../images/footersep.jpg") no-repeat;
  width: 100%;
  height: 15px;
 }

.footer-donate {
  background: url("../images/mainlower-background.jpg") no-repeat;  
  margin-top: 0px;
  width: auto;
  text-align: center;
  padding: 0px 0px 0px 0px;
  color: White;
}

.footer-donate-header {
  color: White;
  font-size: 2em;
}

.footer-donate-body {
  color: White;
  font-size: .9em;
  margin-right: 40px;
}

.footer-donate-button {
  color: White;
  font-size: 1.5em;
  margin-top: 0px;
}

.footer-left {
  height: 250px;
  float: left;
}

.footer-right {
  float: right;
  height: 252px;
}

.footer-box {
  width: 50%;
}

.footer-box-inner-left {
  margin: 2% 0% 0% 25%;
  width: 300px;
}

.footer-box-inner-right {
  margin: 1% 0% 0% 25%;
  width: 300px;
}

.footer-left-header {
  font-size: 1em;
  font-weight: bold;
  color: #33aeff;
  clear: right;
}

.footer-left-body {
  font-size: 1em;
  color: gray;
  clear: both;
}

.check-cyan {
  background: url("../images/checkcyan.jpg") no-repeat;
  width: 15px;
  height: 15px;
  float: left;
  margin-right: 15px;
 }

.footer-left-bullet {
  margin-top: 15px;
  color: gray;
}

.footer-right-header {
  font-size: 1.5em;
  font-weight: bold;
  color: #f05c66;
}

.footer-right-body {
  font-size: 1em;
  color: gray;
  clear: both;
}

.footer-map {
  margin-left: 10px;
  font-size: 1em;
  font-weight: bold;
  text-decoration: underline;
  margin-bottom: 40px;
/**  color: #f05c66; **/
}

.red-link {
  color: #f05c66; 
}

.blue-link {
  color: blue; 
}

.gray-link {
  color: gray; 
}

.copyright {
  color: gray;
  font-size: .8em;
  width: 100%;
  margin-top:  0px;
  margin-bottom:  20px;
  text-align: center;
/**
border-style: solid;
border-color: black;
border-width: 2px;
**/
}

/*** EO FOOTER **


/** DEVICE SIZE CONTROL**/

/********** Large devices only **********/

@media (min-width: 1200px) {

#headercontainer{width: 100%; height: 280px; overflow: hidden;}
#footercontainer{width: 100%; height: 490px; overflow: hidden;}
iframe{width: 100%; height: 490px; scrolling="no" frameBorder = "0";}

.header-contact-box {
  height: 44px;
}
}

@media (min-width: 768px) and (max-width: 991px) {

  #headercontainer{width: 100%; height: 280px; overflow: hidden;}

  #header-nav-box {
     width: 425px;
  }

  #header-nav {
    font-size: .70em;
  }

.banner-img img {
  width: 480px;
  height: auto;
  float: left;
}

  .footer-body {
  margin-top: 0px;
  width: auto;
  height: 450px;
}

.footer-box {
   width: 50%;
  }

  .footer-body {
    height: 450px;
}

.footer-box-inner-left {
  margin-left: 0%;  
  width: 300px;
}

.footer-box-inner-right {
  width: 300px;
  float: right;
}
}

  
@media (max-width: 785px) {

  #headercontainer{width: 100%; height: 420px; overflow: hidden;}

#header-logo {
  height: 165px;
}

}


@media (min-width: 422px) and (max-width: 783px) {

}


@media (min-width: 333px) and (max-width: 421px) {
.banner-img img {
  width: 320px;
}
}


/********** Small devices only **********/
@media (min-width: 468px) and (max-width: 767px) {

#headercontainer{width: 100%; height: 400px; overflow: hidden;}
#footercontainer{width: 100%; height: 750px; overflow: hidden;}
iframe{width: 100%; height: 750px; scrolling="no" frameBorder = "0";}


  #header-contact {
    background-color: #614fd7;
    padding-top: 15px;
    height: 105px;
  }

  #header-nav-box {
     height: 300px;
  }

  .header-contact-setleft-sm {
    background-color: #614fd7;  
    width: 100%;
    display: flex;
    justify-content: center;
    height: 24px;
  }

  .header-contact-setright-sm {
    background-color: #614fd7;
    width: 100%;
    padding-top: 25px;
    display: flex;
    justify-content: center;
    font-size: .91em;
    font-weight: 50;  
  }

  .header-contact-setleft-box-sm {
    justify-content: center;
    width: 288px;  
  }

  .header-contact-setright-box-sm {
    width: 288px;
  }

  .header-contact-itemleft-1-sm {
    margin-left: 90px;
  }

  .header-contact-itemleft-sm {
    margin-left: 15px;
  }

  .header-contact-itemright-1-sm {
  margin-left: 0;
  }

  .header-contact-itemright-sm {
   margin-left: 35px;
  }

  .header-nav-sm {
    display: flex;
    justify-content: center;
   }

  #header-logo {
    width: 100%;
    height: 145px;
    float: none;
   }

  
  #logo-img {
    background: url('../images/logo-sm.jpg') no-repeat;
    margin-left: auto;
    margin-right: auto;
  }

.navtextlink-header-sml {
  margin: 110px 0px  0px 0px;
}

  .banner-img img {
    width: 95%;
  }

  .footer-box {
   width: 100%;
  }

  .footer-left {
    float: none;
    margin-left: 0%;
  }

  .footer-right {
    float: none;
    margin-left: 0%;
  }

  .footer-body {
    height: 700px;
/**  
border-style: solid;
border-color: yellow;
border-width: 1px;
**/
}

.footer-box-inner-left {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
  }

  .footer-box-inner-right {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
/**  
border-style: solid;
border-color: blue;
border-width: 1px;
**/
}

  .footer-donate-header {
    font-size: 1.3em;
  }

}


@media (max-width: 570px) {

.navtextlink-header-sml {
  margin: 100px 0px  0px 0px;
}

.navtextlink-item {
  font-size: .8em;
}
}


/********** Extra Small devices only **  <=500    ********/
@media (max-width: 467px) {

#headercontainer{width: 100%; height: 360px; overflow: hidden;}
#footercontainer{width: 100%; height: 760px; overflow: hidden;}
iframe{width: 100%; height: 850px; scrolling="no" frameBorder = "0";}

.navtextlink-header-sml {
  margin: 60px 0px  0px 0px;
}

.navtextlink-item {
  font-size: .6em;
}

##page-header {
  margin: 0px 0px 30px 0px;
  font-size: 1.6em;
}

  #header-contact {
    background-color: #614fd7;
/**    background-color: red;  **/
    padding-top: 15px;
    height: 105px;
  }

  #header-nav-box {
     height: 300px;
  }

  .header-contact-setleft-sm {
    background-color: #614fd7;  
    width: 100%;
    display: flex;
    justify-content: center;
    height: 24px;
  }

  .header-contact-setright-sm {
    background-color: #614fd7;
    width: 100%;
    padding-top: 25px;
    display: flex;
    justify-content: center;
    font-size: .91em;
    font-weight: 50;  
  }

  .header-contact-setleft-box-sm {
    justify-content: center;
    width: 288px;  
  }

  .header-contact-setright-box-sm {
    width: 288px;
  }

  .header-contact-itemleft-1-sm {
    margin-left: 90px;
  }

  .header-contact-itemleft-sm {
    margin-left: 15px;
  }

  .header-contact-itemright-1-sm {
  margin-left: 0;
  }

  .header-contact-itemright-sm {
   margin-left: 35px;
  }

  .header-nav-sm {
    display: flex;
    justify-content: center;
  }

  
  #header-logo {
    width: 100%;
    height: 145px;
    float: none;
   }
  

  #logo-img {
    background: url('../images/logo-sm.jpg') no-repeat;
    margin-left: auto;
    margin-right: auto;
  }

  .banner-img img {
    width: 95%;
  }

  .footer-box {
   width: 100%;
  }

  .footer-left {
    float: none;
    margin-left: 0%;
  }

  .footer-right {
    float: none;
    margin-left: 0%;
  }

.footer-box-inner-left {
  margin-left: auto;
  margin-right: auto;
  width: 300px;
}

.footer-box-inner-right {
  margin-left: auto;
  margin-right: auto;
  width: 300px;
}

.footer-donate-header {
  font-size: .9em;
}

.footer-donate-body {
  font-size: .7em;
}

  .footer-body {
    height: 700px;
/**  
border-style: solid;
border-color: green;
border-width: 1px;
**/
}

.footer-box-inner-left {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
  }

  .footer-box-inner-right {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
/**  
border-style: solid;
border-color: blue;
border-width: 1px;
**/
}
}

@media (max-width: 369px) {
#headercontainer{width: 100%; height: 350px; overflow: hidden;}
.navtextlink-header-sml {
  margin: 50px 0px  0px 0px;
}
.navtextlink-item {
  font-size: .45em;
  font-weight: bold;
}
#page-header {
  margin: 0px 0px 30px 0px;
  font-size: 1.6em;
}
}