*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:sans-serif;
}

h1 {
font-size: 1.75em;
font-weight: bold;
font-family: sans-serif;
text-align: center;
}

.returnhome {
font-size: 1.75em;
font-family: sans-serif;
text-align: center;
}

.borders{
  background-color: white;
  border-left-width: 5vw;
  border-right-width: 5vw;
  border-top-width: 2rem;
  border-bottom-width: 2rem;
  border-color: lightgrey;
  border-style: solid;
  padding: 1rem;
  margin-top: 1px;
}

.talktitle {
font-weight: bold;
text-align:center;
font-size: 1.75em;
}

.generalinfo {
margin-left: 3vw;
font-size: 1.5em;
text-align: center;
}

.titlebeforepicture {
font-weight: bold;
text-align:center;
font-size: 2em;
background-color: pink;
border-radius: 20px; 
padding:3px; 
}

.indexyearheading {
background-color: lightgreen;
font-size: 35px;
text-align: center;
}

.indexyear {
font-size: 1.5em;
margin-left: 3vw;
font-weight: bold;
}

.contactus {
 margin-left: 1vw;
 font-size: 1.5rem;
}

/* alter the height of the grid-template-rows to achieve a good picture*/

.imagegrid3 {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows:50vw;
    align-items:center;

  align-content:center; 
 justify-content:space-evenly;
 }

.imagegrid3 div {
}

    .imagegrid3 img {
/* it seems that object-fit does not work if the width and height are not specified   */
      width: 100%;
        height: 100%;
        border-radius: 20px;  
        padding: 3px;
/*           object-fit: contain;   */
     object-fit:cover; 
                   }

/* alter the height of the grid-template-rows to achieve a good picture*/

.imagegrid2 {
      display: grid;
      grid-template-columns:  auto auto;
      grid-template-rows:60vw;
    align-items:center;

/*  align-content:center; */
 justify-content:space-evenly;
 }

.imagegrid2 div {
}

    .imagegrid2 img {
/* it seems that object-fit does not work if the width and height are not specified   */
      width: 100%;
        height: 100%;
        border-radius: 20px;  
        padding:3px;
   /*        object-fit: contain; */
/* contain - Preserves the aspect ratio, and fits the image inside the container, without cutting - leaves empty space if needed. */
     object-fit:cover; 
/* cover - Preserves the aspect ratio, and the image fills the container. Cuts overflowing content if needed. */    
}





/* the container width is the % of the screen width
 and the container is centered with margin:auto */

.mainpiccontainer {
  width: 100%;
  height: 100%;
  margin-bottom: 25px;
  margin: auto;
  border-radius: 20px;
}

/* the width is the % of the container that the image will fill
the image will be placed at the left had edge of the container */

.mainpiccontainer img {
  width:100%;
  height: 100%;
  border-radius: 20px;
  padding:3px;
}

.underpicture {
text-align: center;
font-weight: bold;
font-size:1.5em;
}




h2 {
font-weight: bold;
text-align:left;
font-size: 1.5em;
/*margin-left: 1vw;
margin-right: 1vw;*/
}

.mainbodyoftalk {
font-weight: bold;
text-align:center;
font-size: 1.5em;
/*margin-left: 1vw;
margin-right: 1vw;*/
}

.endoftalk {
font-weight: bold;
text-align:center;
font-size: 1.75em;
}

.yearevents {
 margin-left: 1vw;
 font-size: 1.5rem;
 font-weight: bold;
}

.marquee {
  width: 100%;
  overflow: hidden;
    background-color:salmon;
}

.marquee span {
  display: inline-block;
/*  padding-left:100%; */
/* this is not needed because the banner starts at the right hand side of then window */
  white-space: nowrap;
  font-size:33px;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  /* 
  % is the percentage of the length of the text not the window
  vw is the view width - the width of the window
  so starting at 100vw starts the banner at the right hand end of the screen
  -100% means that the last part of the text has reached the left hand of the screen
  */
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

@media screen and (min-width:600px)
{
    .container{
        display: grid;
        grid-template-columns: 33.3% 33.3% 33.3%; 
              }

    .container div {
<!--   border: 1px solid black; 
         min-width: 0;
         align-content: center;-->
                   }

    .container img {
        display: block;
        width: 100%;
        height: auto;
       margin: auto;
                   }
}

@media screen and (max-width:600px)
{
    .container{
        display: grid;
        grid-template-rows: auto auto auto;
              }

    .container div {
                   }

    .container img {
        width:50%;
        height:auto;
        display: block;   
        margin: auto;
                   }
}