body {
	margin: 0px;
  background-color: #ece7e4;
}

/*-----------------------------Grid--------------------------*/
.gridContainer {
    
    display: grid;
    grid-template-columns: 75% 25%;
    grid-template-rows: auto;
 
    
    grid-template-areas:
            "nav nav"
            "main main"
            "footer footer"   
}


header {
    grid-area: nav;
}
main {
    grid-area: main;
    
}
aside {
    grid-area: latest;
}
footer {
    grid-area: footer;
    
}

footer {
  grid-area: footer;
  color: white;
  background-color: #4f4542;
  
  
}

/*-----------------------------Grid-END--------------------------*/

/*-----------------------------NAV--------------------------*/

.topnav {
    overflow: hidden;
    background-color: #d4cdc2;
  }
  
  .topnav a {
    float: right;
    display: block;
    color: #4f4542;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family:Georgia, 'Times New Roman', Times, serif
  }
  
  .topnav a:hover {
    background-color: #ece7e4;
    color: black;
  }
  
  .topnav a.active {
    background-color: #4f4542;
    color: #d4cdc2;
  }

  .topnav a.logo {
    float: left;
  }
 
  .topnav .icon {
    display: none;
  }

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

    

    .topnav.responsive a.logo {
       
        text-align: left;
      }

    
  }

/*-----------------------------NAV-END--------------------------*/

/*-----------------------------Banner--------------------------*/

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(./images/Banner3.jpg);
  height: 250px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1em;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.hero-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: white;
  background-color: #b8a692;
  text-align: center;
  cursor: pointer;

  border-radius: 5px;
  box-shadow: 0 4px #948471;
}

.hero-text button:hover {
  background-color: #4f4542;
  color: white;
  box-shadow: 0 4px #3d3533;
}

@media screen and (min-width: 601px) {
  .hero-image {
    height: 400px;
  }

 
}
 /*-----------------------------Banner-END--------------------------*/   

 .flexParent {
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  flex-direction: column;
  width: 80%;
  margin: auto;
  height: auto;

  
  

 
}


.flexChildren {
  
  margin: 10px;
  padding: 30px;
  width: 80%;
  margin: auto;
  

  
}

.flexChildren img{

  max-width: 100%;
  height: auto;
 padding: 5px;
  
  
 

}





.flexChildren h2{

  color: #4f4542;
}

.flexChildren p{
  
  color: #7b726c;
 
}


@media screen and (min-width: 746px) {
	.flexParent {
    width: 80%;
  }

  .flexChildren {
    width: 80%;
  }
}

@media screen and (max-width: 746px) {
  .flexParent {
    width: 90%;
  }

  .flexChildren {
    width: 80%;
  }
}




  
 /*-------------------------------------------------------*/

  /*-----------------------Card-Container-----------------------*/

  .cardContainerParent{
    display: flex;
    flex-wrap: wrap;
    background-color: #3d3533;
    flex-direction: column;
    width: 100%;
    margin: auto;
    height: auto;

  }

  .cardContainerChild {
  
    margin: 30px;
    padding: 10px;
    width: 20%;
    margin: auto;
    text-align: center;
    
    
  
    
  }

  .cardContainerChild h2 {
    color: white;
  }

  .cardContainerChild p {
    color: #d4cdc2;
    border-bottom: white;
    border-bottom: solid;
    padding: 5%;

  }

  .cardContainerChild img{
    padding-top: 10px;
  }

  

  @media screen and (min-width: 746px) {
	
    .cardContainerParent  {
		display: flex;
		flex-direction: row;
	}

	
}

@media screen and (max-width: 746px) {
  .cardContainerChild {
    width: 70%;
  }
}

  /*-----------------------Footer -----------------------*/

  .footerParent{
    display: flex;
    flex-wrap: wrap;
    background-color: #d4cdc2;
    flex-direction: column;
    width: 100%;
    margin: auto;
    height: auto;
    border-top: solid;
   border-color: #ece7e4;
   border-top-width: 50px;

  }

  .footerChild {
  
    margin: 30px;
    padding: 15px;
    width: 45%;
    margin: auto;
    text-align: center;  
  }

  .footerChild h2 {
    color: #3d3533;
  }

  .footerChild p {
    color: #3d3533;
    padding: 2%;
    

  }

  

  .latestNews {
  
    margin: 30px;
    padding: 10px;
    width: 45%;
    margin: auto;
    
  }

  .latestNews h2 {
    color: #3d3533;
    text-align: center;  
    
    
  }

  .latestNews p {
    color: #3d3533;
    padding: 3%;
    text-align: left;  
    

  }

  .Date {
  
    
    flex-wrap: wrap;
    background-color: #ece7e4;
    flex-direction: column;
    width: 50px;
    margin-right: 10px;
    height: auto;
    border-top: solid;
   border-color: #948471;
   border-top-width: 2px;
   
  }

  .Date h2 {
    color: #3d3533;
    text-align: center;  
    font-size: 20px;
    margin: 5px;
  }

  .Date p {
    color: #3d3533;
    text-align: center;  
    font-size: 15px;
    margin: 5px;
  }
 


  @media screen and (min-width: 746px) {
	
    .footerParent  {
		display: flex;
		flex-direction: row;
	}

	
}

@media screen and (max-width: 746px) {
  .footerChild {
    width: 70%;
  }

  .latestNews {
  
    margin: 30px;
    padding: 10px;
    width:80%;
    margin: auto;
    
  }

}




 /*-----------------------Image Slider -----------------------*/

 .mySlides {
  display: none
}


.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  padding-top: 50px;
}
.slideshow-container img {
  height: auto;
  width: 100%;
  object-fit: contain;
}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #ffffff;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #d4cdc2;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active,
.dot:hover {
  background-color: #3d3533;
}
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}
@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}
@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px
  }
}

iframe {
  display: block;
  margin: auto; /* centers horizontally and vertically */
  height: 400px;
  width: 60%;
  
}



ul li:before {
  content: '✓ ';
}


@media screen and (min-width: 746px) {
	ul {
    list-style: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    color: #7b726c;
  }

  iframe {
    display: block;
    margin: auto; /* centers horizontally and vertically */
    height: 400px;
    width: 80%;
    
  }
 
}

@media screen and (max-width: 746px) {
  ul {
    list-style: none;
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
    color: #7b726c;
  }

  iframe {
    display: block;
    margin: auto; /* centers horizontally and vertically */
    height: 300px;
    width: 100%;
    
  }
}