body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-color: #E8E0D2;
    margin: 0;
    padding: 0;
}

header {
    background-color: #404480;
    color: white;
    text-align: center;
    padding: 1em;
}

nav{
    background-color: #EEEEEE;
    padding: 1em;
}

ul {list-style: none;
    margin: 0;
    padding: 0;
}

li {display: inline;
    margin-right: 20px;
}

h1 {
    font-size: 3em;
    font-family: Georgia, 'Times New Roman', Times, serif;
    letter-spacing: 0.5em;
}

p {
    float: right;
    hyphens: auto; 
	text-align: justify;
    padding: 10mm;
    margin: 10mm;
}
img{
   /* float:left; */
    margin-right: 10mm;
}


 * {
    box-sizing: border-box;
  }           
  
  .row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
  }
 
  /* Create four equal columns that sits next to each other */
  .column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }
 
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }
 
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      -ms-flex: 50%;
      flex: 50%;
      max-width: 50%;
    }
  }
 
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      -ms-flex: 100%;
      flex: 100%;
      max-width: 100%;
    }
  }
@media only screen and (max-width: 600px) {
    nav{
        float: none;
        text-align: center;
    }
    nav li {
        display: block;
    }
    .grid-container {
        grid-template-columns: auto;
        margin-top: 150px;}
    }/*.slider-frame{
    overflow: hidden;
    height: 800px;
    width: 1000px;
    margin: auto;
}



@keyframes slide_animation{
0% {left:0px;}
      10% {left:0px;}
      20% {left:1200px;}
      30% {left:1200px;}
      40% {left: 2400px;}
      50% {left: 2400px;}
      60% {left: 1200px;}
      70% {left: 1200px;}
      80% {left: 0px;}
      90% {left: 0px;}
      100% {left:0px;}
}

@-webkit-keyframes slide_animation{
    0% {left:0px;}
    10% {left:0px;}
    20% {left:1200px;}
    30% {left:1200px;}
    40% {left: 2400px;}
    50% {left: 2400px;}
    60% {left: 1200px;}
    70% {left: 1200px;}
    80% {left: 0px;}
    90% {left: 0px;}
    100% {left:0px;}
}

.slide-images{
    width: 3600px;
    height: 800px;
    margin: 0 0 0 -2400px;
    position: relative;
    -webkit-animation-name: slide_animation;
    animation-name: slide_animation;
    -webkit-animation-duration: 44s;
    animation-duration: 44s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.img-container{
    height: 800px;
    width: 1200px;
    position: relative;
    float: left;
}







.slider-frame {
    overflow: hidden;
    height: 800px;
    width: 1200px;
    margin-left: 360px;
    margin-top: 20px;
}

@-webkit-keyframes slide_animation {
    0% {left: 0px;}
    10% {left: 0px;}
    20% {left: 1200px;}
    30% {left: 1200px;}
    40% {left: 2400px;}
    50% {left: 2400px;}
    60% {left: 1200px;}
    70% {left: 1200px;}
    80% {left: 0px;}
    90% {left: 0px;}
    100% {left: 0px;}
   }

.slide-images {
    width: 3600px;
    height: 800px;
    margin: 0 0 0 -2400px;
    position: relative;
    -webkit-animation-name: slide_animation;
    -webkit-animation-duration: 44s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;

}

.img-container{
    height: 800px;
    width: 1200px;
    position: relative;
    float: left;
}*/