* {
  padding: 0;
  margin: 0;
}

/* required to make footer stick to the bottom of the page */
html, body {
  height: 100%;
}

/* usual body stylings plus forcing footer to bottom of page */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}
header {
  margin-left: auto;
  margin-right: auto;
  max-width: 95%;
}
section {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.125rem;
  max-width: 95%;
}
footer {
  color:#454a4c;
  flex-shrink: 0;
  padding-top: 20px;
  background: #eee;
  padding-bottom: 5px;
  border-top: 3px solid #aaa;
  min-height: 150px;
}

/* making logos sit next to each other */
.content {
  flex: 1 0 auto;
}

/* giving a bit of a gap between paragraphs */
p {
  margin-bottom: 0.5rem;
}
p, li {
  font-size: 1.375rem;
}
li {
  padding-top: 0.5rem;
}
ul {
  list-style: none;
}
footer p, h2 {
  font-size: 1rem;
}
footer a {
  color: #454a4c;
}
h1 {
  font-size: 2.125rem;
  margin-bottom: 1rem;
}
h2 {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}
a:link {
  text-decoration: none;
  font-weight: 700;
  padding-bottom: 1px;
  border-bottom: 1px solid;
}
a:active{
  color: #a30000;
}
a:focus { 
  outline: thick solid transparent;
  background-color: #fd0;
}                      
a:visited {
  text-decoration: none;
}

/* each logo column */
.column {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.mainContent {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 25px;
}
.footerContent {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 25px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.text-center {
  text-align: center;
}
.pad-bot-20 {
  padding-bottom: 20px;
}
.pad-top-20 {
  padding-top: 20px;
}

/************** styling for logos in desktop *******************/
.logos {
    padding-bottom: 1.25em;
}
.logos img {
    max-width: 75%;
    max-height: 140px;
}
.footerContent img {
  max-height: 100px
}
/***************************************************************/

/*************** styling for phone and tablet ******************/
@media only screen and (max-width: 640px) {
  footer p,h2 {
    font-size: 1rem;
  }
  .column {
    width: 100%;
  }
  .mainContent {
    padding: 0;
    padding-top: 0;
    padding-bottom: 25px;
    max-width: 95%;
    margin: 0;
  }
  .footerContent {
    padding: 0;
    padding-top: 0;
    padding-bottom: 25px;
    max-width: 95%;
    margin: auto;
  }
  .logos img {
    max-width: 100%;
  }
}

@media only screen and (max-height: 560px),
(max-width:900px) {
  p, li {
    font-size: 1.125rem;
  }
  h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  footer p, h2 {
    font-size: 1rem;
  }
  .logos {
    margin-bottom: 5%;
  }
}
@media only screen and (max-width: 725px) {
  .right{
    float: none;
    clear: both;
  }
}
/***************************************************************/