* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}



.flexcontainer1, .flexcontainer2, .flexcontainer3 {
    display: flex;
    flex-flow: row wrap;

}

.flexcontainer1 .innercontainer {
    flex: 1 0 50%;
    box-sizing: border-box;
    border: 10px solid #222;
    min-height: 33.33vh;
    display:
}

.flexcontainer2 .innercontainer {
    flex: 1 0 33%;
    box-sizing: border-box;
    border: 10px solid #222;
    min-height: 33.33vh;
}
.flexcontainer3 .innercontainer {
    flex: 1 0 100%;
    box-sizing: border-box;
    border: 10px solid #222;
    min-height: 33.33vh;
}

@media screen and (max-width: 600px) {
    .navbar a:not(:first-child) {display: none;}
    .navbar a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .navbar.responsive {position: relative;}
    .navbar.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .navbar.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    
  }


@media screen and (max-width: 1099px) {
    .flexcontainer1 .innercontainer {
    flex: 1 0 100%;
    box-sizing: border-box;
    border: 10px solid black;
    min-height: 33.33vh;
}

.flexcontainer2 .innercontainer {
    flex: 1 0 100%;
    box-sizing: border-box;
    border: 10px solid #222;
    min-height: 33.33vh;
}
.flexcontainer3 .innercontainer {
    flex: 1 0 100%;
    box-sizing: border-box;
    border: 10px solid #222;
    min-height: 33.33vh;
}
}
body {
    /*background-image: url(../images/water.jpg);*/
    background-size: cover;
    color: black;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 100%;
    width: 100%;
}




article {
                margin: 12px 0px;
        padding: 12px;
}



h2 {
    text-align: center;
    font-weight: normal;
    text-transform: lowercase;
}

p {
    font-family: times;
    color: black;
    text-indent: 1em;
    line-height: 1.6;
}
header {
   
    width: 100%;
    min-height: 325px;
    margin-bottom: 3in;
    /*border: 4px solid black;*/
    margin: 12px 0px;
    padding: 12px;
    background-image: linear-gradient(to right, transparent, black), url(../images/horizon.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    font-size: 10vh;
    
}
nav {
 
    margin: 12px 0px;
    padding: 12px;   
    width: 95%;
    justify-content: center;
}
body {
    font-family: Verdana
}
main {

    margin: 12px 0px;
    
    width: 100%;
}



.aside1 {
    
   
    margin: 12px 0px;
    padding: 12px;
    height: 400px;
}
.aside2 {
  
    margin: 12px 0px;
    padding: 12px;
    height: 400px;
}
main {
   
    overflow: hidden;
}

li {
    margin-bottom: 12px;
    list-style: square
}
dt {
    margin-top: 16px; margin-bottom: 8px;
}


  .navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    justify-content: center;
  }

  .navbar a:hover {
    background: #ddd;
    color: black;
  }

  .body2 {
    padding-top: 50px;
  }

  .footer {
    position: fixed;
    background-color: #333;
    bottom: 0;
    width: 100%;
  }
  main {
      margin-bottom: 300pt;
  }

  .flex-container {
    
    min-height: 400px;
    width: 100%;
}
.flex-container div {
    
    color: white;
    display: flex;
    flex-flow: row wrap;
    
}
.flex-container div figure {
    background-color: white;
    flex: 1 0 200px;
    width: 30px; height: auto;
}