/*@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Roboto: 100,400,900');
@import url('https://fonts.googleapis.com/css2?family=Anton');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:400,700');

* {
    box-sizing: border-box;
}



html {
	height: 100%;
}

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

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

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

.contact {
	padding: 1rem;
  	border-radius: 15px;
	background-color:#ffffff;
}

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

/* MOBILE */
@media (max-width: 40rem) {
	.container {
    /*margin: 20px 225px;*/
    width: 95%;
    margin-left: 15px;
	display: grid;
    grid-column-gap: 0;
    grid-template-columns: 100%;
    grid-row-gap: 0;
	grid-template-rows: [row-1-start] 120px [row-1-end row-2-start] auto [row-2-end];
	grid-template-areas: "header-left"
						 "main1";
	justify-items: stretch;
	align-items: stretch;
}

.studylist {
    margin: 0;
    display: grid;
	grid-template-columns: repeat(auto-fill, 46%);
	grid-template-rows: repeat(auto-fill, minmax(430px auto)); /*also auto-fit*/
    grid-column-gap: 0rem;
    grid-row-gap: 1rem;
    }
}
/* END MOBILE */

/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px)
{
.container {
    /*margin: 20px 225px;*/
    width: 90%;
    margin: 20px auto;
	display: grid;
    grid-column-gap: 3rem;
    grid-template-columns: repeat(4, [col-start] 20% [col-end]);
    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] minmax(5rem, auto) [row-3-end row-4-start] 4rem [row-4-end];
	grid-template-areas: "header-left header-left header-left header-centre header-right"
						 "mnu mnu mnu mnu mnu"
						 "main1 main1 main1 main1 main1"
						 "footer footer footer footer footer";
	justify-items: stretch;
	align-items: stretch;
}

.studylist {
    margin: 0;
    display: grid;
	grid-template-columns: repeat(auto-fill, 16%);
	grid-template-rows: repeat(auto-fill, minmax(250px, auto)); /*also auto-fit*/
    grid-column-gap: 0rem;
    grid-row-gap: 2rem;
	
}



}

/*
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 (min-width: 50rem)*/ {
.container {
    /*margin: 20px 225px;*/
    width: 90%;
    margin: 20px auto;
	display: grid;
    grid-column-gap: 3rem;
    grid-template-columns: repeat(4, [col-start] 20% [col-end]);
    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] minmax(5rem, auto) [row-3-end row-4-start] 4rem [row-4-end];
	grid-template-areas: "header-left header-left header-centre header-centre header-right"
						 "mnu mnu mnu mnu mnu"
						 "main1 main1 main1 main1 main1"
						 "footer footer footer footer footer";
	justify-items: stretch;
	align-items: stretch;
}

.studylist {
    margin: 0;
    display: grid;
	grid-template-columns: repeat(auto-fill, 16%);
	grid-template-rows: repeat(auto-fill, minmax(250px, auto)); /*also auto-fit*/
    grid-column-gap: 0rem;
    grid-row-gap: 2rem;
	
}


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

.mobile-nav__items {
	display: none;	
}

.toggle-button {
	display: none;
    }

}

/*
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) {
.container {
    }


}