/*@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');*/


* {
    box-sizing: border-box;
}

html {
	height: 100%;
}

body {
    /*font-family: 'Montserrat', sans-serif;*/
    margin: auto;
	height: 100%;
}

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

p {
    margin: 0;
    padding: 0
}

.strong_contact {
    color: #000000;
    font-weight: bold;
    margin: 0;
}

a[href^=tel] { color: inherit; text-decoration: none; }

/* MOBILE */
@media (max-width: 40rem) {
	.container {
        margin-left: 10px;
    }
    
.el3 {
	grid-area: main1;
    column-span: all;
	padding: 1rem;
  	border-radius: 10px;
    background-color: #EBF7E1;
    margin: 0 auto;
    border: solid thin gray;
	}

.container {
    /*margin: 20px 210px;*/
    width: 90%;
    margin: 20px auto;
	display: grid;
	grid-column-gap: 0rem;
    grid-row-gap: 1rem;
    grid-template-columns: 100%;
	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 {
    background: #EBF7E1;
    margin: 0  auto;
    display: grid;
	grid-column-gap: 0;
	grid-auto-columns: 100%;
	grid-template-rows: repeat(auto-fill, 5rem); /*also auto-fit*/
    justify-content: center;
	grid-row-gap: 1rem;
	justify-items: stretch;
	align-items: stretch;
    }   
}
/* END MOBILE */

/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px)
{
.el3 {
	grid-area: main1;
    column-span: all;
	padding: 1rem;
  	border-radius: 10px;
    background-color: #EBF7E1;
    margin: 0 auto;
    border: solid thin gray;
	}

.container {
    /*margin: 20px 210px;*/
    width: 90%;
    margin: 20px auto;
	display: grid;
	grid-column-gap: 0rem;
    grid-row-gap: 1rem;
    grid-template-columns: 100%;
	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 {
    background: #EBF7E1;
    margin: 0  auto;
    display: grid;
	grid-column-gap: 0;
	grid-auto-columns: 100%;
	grid-template-rows: repeat(auto-fill, 5rem); /*also auto-fit*/
    justify-content: center;
    
	grid-row-gap: 1rem;
	justify-items: stretch;
	align-items: stretch;
    padding: 0 1rem;
    }     
}

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (min-width: 920px)
{
/*MOBILE MENU - HIDDEN*/
.mobile-nav {
	  display: none;
}

.mobile-nav__items {
	display: none;	
}

.toggle-button {
	display: none;
    }
}



/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1030px)
/* DESKTOP*/ 
{


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

}