* {
    box-sizing: border-box;
}

html {
	height: 100%;
}

body {
    
    margin: auto;
	height: 100%;
}

.toggle-button {
	  display: block;
	  width: 3rem;
	  /*background: transparent;*/
	  border: none;
	  cursor: pointer;
	  padding-top: 0;
	  padding-bottom: 0;
	  vertical-align: middle;
	  position: absolute;
	  left: 20px;
	  top: 0;
	}

	.toggle-button:focus {
	  outline: none;
	}

	.toggle-button__bar {
	  width: 100%;
	  height: 0.2rem;
	  background: black;
	  display: block;
	  margin: 0.6rem 0;
	}
      
	.mobile-nav {
	  display: none;
	  position: fixed;
	  z-index: 101;
	  top: 40px;
	  left: 0;
	  /*width: 80%;*/
	  height: 100vh;
	  background:rgba(0,0,0,.6);
	  color: #ffffff;
	  border-radius: 15px;
	  padding: 0 30px;
		
	}

	.mobile-nav__items {
	  display: block;
	  /*width: 90%;*/
	  height: 100%;
	  list-style-type: none;
	  margin: 10% auto;
	  padding: 0;
	  text-align: center;
	}

	.mobile-nav__item {
	  margin: 1rem 0;
	}

	.mobile-nav__item a {
	  font-size: 1.5rem;
	  text-decoration: none;
	  color: #ffffff;
	  font-weight: bold;
	  padding: 0.2rem 0;
	}

img {
	object-fit: contain;
	vertical-align: top;
}

h1 {
    font-size: 2rem;
    text-align: center;
}

h2, h3 {
	margin: 0;
	padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

/*MAIN CONTENT*/
.el3 {
	grid-area: main1;
	padding: 1rem;
  	border-radius: 5px;
	}

.el6 {
	grid-area: talk2;
	padding: 1rem;
  	border-radius: 15px;
	justify-content: center;
	background-color: #EBF7E1;
}

.el9 {
	grid-area: talk3;
	padding: 1rem;
  	border-radius: 15px;
	justify-content: center;
	background-color: #FFFFFF;
    /*margin-right: 100px;*/
}

.el8 {
	grid-area: talk4;
	padding: 1rem;
  	border-radius: 15px;
	justify-content: center;
	background-color: #EBF7E1;
    /*margin-left: 100px;*/
}

.el10 {
	grid-area: talk5;
	padding: 1rem;
  	border-radius: 15px;
	justify-content: center;
	background-color: #FFFFFF;
}
    
/* MOBILE */
@media (max-width: 40rem) {
.container {
		margin: 0 0 0 15px;
		display: grid;
        grid-template-columns: 95%;
		grid-template-rows: [row-1-start] minmax(1rem, auto) [row-1-end row-2-start] auto [row-2-end];
		grid-column-gap: 0;
		grid-row-gap:  0;
		grid-template-areas: "header-left" 
							 "main1";
	}

.studylist {
    margin: 0;
    display: grid;
	grid-auto-columns: 100%;
	grid-template-rows: repeat(auto-fill, minmax(1rem auto)); /*also auto-fit*/
    justify-content: center;
	grid-row-gap: 0;
	justify-items: stretch;
	align-items: stretch;
}

.study {
  display: block;
  border: none;
  background:#EBF7E1;
  padding: 0.5rem;
  border-radius: 5px;
  border-style: ridge;
  margin: 0.5rem 0;
}

.talkType {
  display: block;
  background:#ffffff;
  padding: 0;
  border: none;
  font-weight: bold;
  margin-bottom: 0;
}

.talkList {
  background:#EBF7E1;
  padding: 1rem;
  border-radius: 10px;
  border: solid thin gray;        
    }

.talkLink {
  background:#EBF7E1;
  padding: 0;
  border: none;
  margin: 0;
}
 
.contained {
    display: block;
    margin-top: 0;
    margin-bottom: 3rem; 
    
    }
    
.emphasis	{
    display: block;
	margin-top: 1rem;
    margin-bottom: 1rem;
    }
}
/* END MOBILE */

/*LARGER MOBILE DEVICES*/
@media only screen and (min-width: 481px)
{
    
.container {
		margin: 0 0 0 15px;
		display: grid;
        grid-template-columns: 95%;
		grid-template-rows: [row-1-start] minmax(1rem, auto) [row-1-end row-2-start] auto [row-2-end];
		grid-column-gap: 0;
		grid-row-gap:  0;
		grid-template-areas: "header-left" 
							 "main1";
	}

.studylist {
    margin: 0;
    display: grid;
	grid-auto-columns: 100%;
	grid-template-rows: repeat(auto-fill, minmax(1rem auto)); /*also auto-fit*/
    justify-content: center;
	grid-row-gap: 0;
	justify-items: stretch;
	align-items: stretch;
}

.study {
  display: block;
  border: none;
  background:#EBF7E1;
  padding: 0.5rem;
  border-radius: 5px;
  border-style: ridge;
  margin: 0.5rem 0;
}

.talkType {
  background:#ffffff;
  padding: 0.5rem;
  border: none;
  font-weight: bold;
  margin: 25px 0;
}
    
.talkLink {
  background:#ffffff;
  padding: 0;
  border: none;
  margin: 0;
}
     

.talkList {
  background:#ffffff;
  padding: 1rem;
  border-radius: 10px;
  border: solid thin gray;        
    }

.contained {
    display: block;
    margin-top: 0;
    margin-bottom: 3rem;
    background:#EBF7E1;
    }
    
.emphasis	{
    display: block;
	margin-top: 1rem;
    margin-bottom: 1rem;
    }
}
/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
*/
@media only screen and (min-width: 920px)
{
    
.container {
    width: 90%;
    margin: 20px auto;
	display: grid;
    grid-column-gap: 1rem;
    grid-row-gap: 1.5rem;
	grid-template-rows: [row-1-start] 8rem [row-1-end row-2-start] 4rem [row-2-end row-3-start] auto [row-3-end row-4-start] 50px [row-4-end];
	grid-template-areas: "header-left"
						 "mnu"
						 "main1"
						 "footer";
	justify-items: stretch;
	align-items: stretch;
	justify-content: center;
	
}

.studylist {
    margin: 0;
    display: grid;
	grid-column-gap: 3rem;
	grid-template-columns: 10% 80%;
	grid-template-rows: repeat(auto-fill, minmax(7rem auto)); /*also auto-fit*/
    justify-content: center;
	grid-row-gap: 0;
	justify-items: stretch;
	align-items: stretch;
}

.study {
  border: none;
  background:#EBF7E1;
  padding: 1rem;
  border-radius: 10px;
  border-style: none;
}

.talkLink {
  display: block;
  background:#ffffff;
  padding: 1rem;
  border: none;
  margin: 25px 0;
}
 
.contained {
    margin-bottom: 0; 
    background:#EBF7E1;
    }

.centered_img	{
	margin-top: 1rem;
    margin-bottom: 0;
}



/*MOBILE MENU - HIDDEN*/
.mobile-nav {
	  display: none;
    }

.mobile-nav__items {
	display: none;	
    }

.toggle-button {
	display: none;
    }

}

/*DESKTOP*/
@media only screen and (min-width: 1030px)
 {
.container {
    width: 90%;
    margin: 20px auto;
     }
}


/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {
    
}

@media only screen and (min-width: 1430px) {



}