* {
  box-sizing: border-box;
}

body {
  background: linear-gradient(to bottom, #1652EF 0%, 50%,#fff 50%,white 100%); 
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  padding-bottom: 90px;
}
h1 h2 h3 h4 {
  font-family: 'Arvo', serif;
}

.row {
  max-width: 1000px;
  padding-top: 25px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
}

.row::before,
.row::after {
  display: table;
  content: '';
}

.row::after {
  clear: both;
}

.col-3, .col-4, .col-6, .col-12 {
  float: left;

  /* Gutters:
   * Each column is padded by half-a-gutter on each side,
   *
   * Half a gutter is 10px, 10/960 (context) = 1.041666%
   *
   */
  padding-left: 1.04166666%;
  padding-right: 1.04166666%;
}

/* Mobile defaults */
.col-3, .col-4, .col-6, .col-12 {
  width: 100%;
}

/* Non-mobile, grid */
@media only screen and (min-width: 640px) {
  /* 3 columns, 3/12 in % */
  .col-3 {
    width: 25%;
  }
  /* 4 columns, 4/12 in % */
  .col-4 {
    height: 475px;
    width: 33.333333%;
  }
  
  /* 12 columns, 12/12 in % */
  .col-12 {
    width: 100%;
  }
}

@media only screen and (max-width: 639px) {
 
  h1.title {
    width: 100%;
    text-align: center;
    font-size: 21px;
  }

  .nav-bar{
    margin-top: 10px;
    width: 100%;
  }
  .nav-bar ul{
    padding: 3px;
    width: 100%;
    justify-content: space-around;
  }
  .col-4 {
    height: 390px;
    margin: 5px;
  }
}

.card {
  height: 100%;
  border: 1px solid gray;
  color: #000;
  background: #fff;
  border-collapse: separate;
  box-shadow: 0px 2px 0px 0px silver;
}

.card:hover {
  cursor: pointer;
}

.card-image {
  width: 100%;
  height: 40%;
  border-bottom: 1px solid #f1f1f1;
}

.card-content {
  height: 60%;
 
  padding: 10px;
}

.card-content a {
  margin: 0.5em 0;
}

.card-content a {
  margin: 0.5em 0;
}

.card-content p {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5em;
  text-align: left;
  padding-bottom: 0;
  padding: 6px;
  margin: 0;
}

.col-6 { 
  height: 275px;
}

.col-12 {
  padding: 0px 0px 15px 0px;
}

 h1, h2 {
  color: #fff;
}

nav{
  display: inline-block;
  width: 49%;
  margin:  auto;
}

nav ul li{
  list-style:none;
  text-align:center;
  border: 1px dashed rgba(255,255,255, 0);
  color:#fff;
  cursor:pointer;
  transition:all .2s;
  -webkit-transition:all .2s;
}

nav ul li:hover{
  color: silver;
}

header {
  margin-bottom: 50px;
}
nav ul{
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.title {
  display: inline-block;
  width: 49%;
  color: #fff;
  text-align: center;
}

header {
  background: #1652EF;
}

.active{
  border-bottom: 1.5px solid silver; 
}

.card-content h3 {
  font-size: 22px;
  margin: 5px;
  text-align: center;
}

h2 {
  font-size: 22px;
  text-align: center;
}

#js-search-form {
  display: none;
} 

#js-news-results {
  padding-top: 40px;
}
form {
  text-align: center;
}

li {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: double
}

.search-button {
  padding-top: 20px;
}

.news-header h2 {
  padding: 40px 0px 0px 0px;
  margin: 0; 
}

.input-box {
  border: 1px solid #212121;
  line-height: 0;
  font-size: 17px;
  width: 65%;
  display: inline-block;
  padding: 10px 15px;
  color: #212121;
  font-weight: 100;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
  border-radius: 7px;
}

.nav-button {
  list-style:none;
  text-align:center;
  color:#fff;
  cursor:pointer;
  transition:all .2s;
  -webkit-transition:all .2s;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
}

#landing-section {
  margin-top: 70px;
}

.main-header {
  text-align: center;
  font-weight: 800;
}

table.darkTable {
  font-family: Arial, Helvetica, sans-serif;
  border: 2px solid #192a36;
  background-color: #192a36;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

table.darkTable td, table.darkTable th {
  border-bottom: 1px solid silver;
  padding: 6px 8px;
}

table.darkTable tbody td {
  font-size: 14px;
  color: #FEFEFE;
}

table.darkTable thead {
  background: #192a36;
}

table.darkTable thead th {
  font-size: 15px;
  font-weight: bold;
  color: #E6E6E6;
  text-align: center;
}

table.darkTable tfoot td {
  font-size: 12px;
}

#js-search-form {
  display: none;
}
#js-ticker-all-results {
  display: none;
}

.btn {
  border-radius: 5px;
  padding: 15px 25px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: #fff;
  position: relative;
  display: inline-block;
}
button.refresh {
  position: static;
  margin: 20px auto;
  display: block;
}

.btn:active {
  transform: translate(0px, 5px);
  -webkit-transform: translate(0px, 5px);
  box-shadow: 0px 1px 0px 0px;
}

.green {
  background-color: #2ecc71;
}

.green:hover {
  cursor: pointer;
}