/* MOBILE */

* {
    box-sizing: border-box;
}

html {
    height: 100%
}

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

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

/*h2 {
	font-size:1.85rem;
}*/

h1 {
	font-size:2rem;
	
}




/* MAIN CONTENT */
IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }

.studylist {
    margin: 25px;
    display: grid;
	/*grid-template-rows: repeat(auto-fill, 4rem); /*also auto-fit*/
    grid-template-rows: repeat(auto-fill, minmax(7rem auto));
    justify-content: center;
	grid-row-gap: 1.5rem;
	grid-auto-columns: 300%;
    }



 .el3b {
	grid-area: main1;
	padding: 1rem;
  	border-radius: 5px;
	}
 
.el3 {
    grid-area: main1a;
	padding: 0;
  	border-radius: 15px;
	background-image: url("../images/facilitators/materials.jpg");
	background-size: cover;
	justify-content: center;
	filter: none;
    border-radius: 15px;
	}

.el3:hover {
	filter: grayscale(50%);
}

.el6 {
	grid-area: main1b;
	padding: 0;
  	border-radius: 15px;
	background-image: url("../images/facilitators/workshop.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	justify-content: center;
	filter: none;
}


.el6:hover {
	filter: grayscale(50%); 
}

/* PROMS BUTTON */
.el9 {
	grid-area: main1c;
	padding: 0;
  	border-radius: 15px;
	background-image: url("../images/facilitators/contact.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	justify-content: center;
	filter: none;
}

.el9:hover {
	filter: grayscale(50%);
}

/* PUBLICATIONS BUTTON */
.el8 {
	grid-area: main2a;
	padding:0;
  	border-radius: 15px;
	background-image: url("../images/facilitators/materials.jpg");
	background-size: cover;
	justify-content: center;
	filter: none;
}

.el8:hover {
	filter: grayscale(50%);
	
}

/* POSTERS BUTTON */
.el10 {
	grid-area: main2b;
	padding: 0;
  	border-radius: 15px;
	background-image: url("../images/facilitators/workshop.jpg");
	background-size: cover;
	justify-content: center;
	filter: none;
}

.el10:hover {
	filter: grayscale(50%);

}

/* DATA PROTECTION BUTTON */
.el11 {
	grid-area: main2c;
	padding: 0;
  	border-radius: 15px;
	/*background-image: url("../images/research/dataProtection3.jpg");*/
    background-image: url("../images/facilitators/contact.jpg");
	background-size: cover;
	justify-content: center;
	filter: none;
}

.el11:hover {
	filter: grayscale(50%);
}

.el21 {
	grid-area: captiona;
	padding: 0.5rem 0;
  	border-radius: 15px;
	justify-content: center;
    font-weight:bold;
}

.el15 {
	grid-area: captionb;
	padding: 0.5rem 0;
  	border-radius: 15px;
	justify-content: center;
    /*font-size: smaller;*/
    font-weight:bold;
}

.el16 {
	grid-area: captionc;
	padding: 0.5rem 0;
  	border-radius: 15px;
	justify-content: center;
    /*font-size: smaller;*/
    font-weight:bold;
}

.el17 {
	grid-area: caption2a;
	padding: 0.5rem 0;
  	border-radius: 15px;
	justify-content: center;
    /*font-size: smaller;*/
    font-weight:bold;
}

.el18 {
	grid-area: caption2b;
	padding: 0.5rem 0;
  	border-radius: 15px;
	justify-content: center;
    /*font-size: smaller;*/
    font-weight:bold;
}

.el19 {
	grid-area: caption2c;
	padding: 0.5rem 0;
  	border-radius: 15px;
	justify-content: center;
    /*font-size: smaller;*/
    font-weight:bold;
}


.el22 {
	background: #CF578F;
	grid-area: divide;
  	border-radius: 5px;
	display: flex;
	align-items:center;
	justify-content: center;
	padding: 0.3rem;
	margin: 50px 0;
}

.error	{ color:#BF423A;
		  font-weight:bold;
		  font-style: oblique;
		  margin-left:12%;
		  float: left;
		  margin-bottom:0%;
		  margin-top: 0%;
          margin-right: 12%;
}

.subform	{
	font-size: 1.1em;
	color: black;
	background-color:#F4F4F4;
	padding: 1em 0 1em 0;
    margin-top: 3em;
    margin-bottom: 1em;
	margin-right: 2%;
	margin-left: 2%;
}
.subform input[type="submit"] {
	margin-top: 4em;
	margin-bottom: 3em;
    margin-right: 3em;
	margin-left: 1em;
	padding: 5px 15px;
	font-size: 0.9em;
	border-radius: 5px;
	float: right;
}
.subform textarea	{
	margin: auto;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 18px;
	width: 95%;
	height: 15%;
	padding: 0.2em;
	margin-top: 1em;
	margin-bottom: 1em;
}

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

.profile {
  border: none;
  background:#ECF1F4;
  padding:1.5rem;
  border-radius: 5px;
  border-style: ridge;
  margin: 25px 25px;
}

.wslist {
  border: none;
  background:#ffffff;
  padding:1.5rem;
  border-radius: 10px;
  border-style: ridge;
  margin: 25px 25px;
}

.matlist {
  border: none;
  background:#EBF7E1;
  padding:1.5rem;
  border-radius: 10px;
  border-style: ridge;
  margin: 25px 25px;
}

@media only screen and (max-width: 40rem) {
	
	h1 {
		font-size:2rem;
		
	}
.container {
    margin: auto 5px auto 30px;
	display: grid;
	grid-column-gap: 0;
	grid-row-gap: 1rem;
	/*grid-template-columns: repeat(4, [col-start] 23.1% [col-end]);*/
 	grid-template-columns: 95%;   
	grid-template-rows: [row-1-start] auto [row-1-end row-2-start] 8rem [row-2-end row-3-start] 4rem [row-3-end row-4-start] 8rem [row-4-end row-5-start] 4rem [row-5-end row-6-start] 8rem [row-6-end row-7-start] 4rem  [row-7-end row-8-start] 8rem [row-8-end row-9-start] 4rem [row-9-end row-10-start] 8rem [row-10-end row-11-start] 4rem [row-11-end row-12-start] 8rem [row-12-end row-13-start] 4rem [row-13-endrow-14-start] minmax(8rem, auto) [row-14-end] ;
	grid-template-areas: "header-left"
						 "header-right"
						 "main1a"
						 "captiona"
                         "main1b"
						 "captionb"
                         "main1c"
						 "captionc"
                      /*  "main2a"
                         "caption2a"
                         "main2b"
                         "caption2b"
                         "main2c"
                         "caption2c"*/
                         "side";
    }
     
    .el7 {
        background: white;
        grid-area: side;
        padding: 0 0 0 1rem;
        border-radius: 15px;
        grid-column-start: 1;
        margin-bottom: 5rem;
}
    
    .el7 .article-box {
        margin: 5rem 0;
    }
   
    .el21 {
	    padding: 0 0 3rem 0;
    }
    .el15 {
        padding: 0 0 3rem 0;
    }
    .el16 {
        padding: 0 0 3rem 0;
    }
    .el17 {
	    padding: 0 0 3rem 0;
    }
    .el18 {
        padding: 0 0 3rem 0;
    }
    .el19 {
        padding: 0 0 3rem 0;
    }
}
.faclist {
    margin: 0;
    display: grid;
	grid-auto-columns: 100%;
	grid-template-rows: repeat(auto-fill, minmax(7rem auto)); /*also auto-fit*/
    justify-content: center;
    
	grid-row-gap: 1.5rem;
	justify-items: stretch;
	align-items: stretch;
}

/*LARGER MOBILE DEVICES*/
@media only screen and (min-width: 481px)
{
	h1 {
		font-size:2.5rem;
		
	}
.container {
    margin: auto 5px auto 30px;
	display: grid;
	grid-column-gap: 0;
	grid-row-gap: 1rem;
	/*grid-template-columns: repeat(4, [col-start] 23.1% [col-end]);*/
 	grid-template-columns: 95%;   
	grid-template-rows: [row-1-start] auto [row-1-end row-2-start] 20rem [row-2-end row-3-start] 4rem [row-3-end row-4-start] 20rem [row-4-end row-5-start] 4rem [row-5-end row-6-start] 20rem [row-6-end row-7-start] 4rem  [row-7-end row-8-start] 20rem [row-8-end row-9-start] 4rem [row-9-end row-10-start] 20rem [row-10-end row-11-start] 4rem [row-11-end row-12-start] 20rem [row-12-end row-13-start] 4rem [row-13-end row-14-start] minmax(8rem, auto) [row-14-end];
	grid-template-areas: "header-left"
						"header-right"
						 "main1a"
						 "captiona"
                         "main1b"
						 "captionb"
                         "main1c"
						 "captionc"
                        /* "main2a"
                         "caption2a"
                         "main2b"
                         "caption2b"
                         "main2c"
                         "caption2c"*/
                         "side";
    }
     
    .el7 {
        background: white;
        grid-area: side;
        padding: 0 0 0 1rem;
        border-radius: 15px;
        grid-column-start: 1;
        margin-bottom: 5rem;
}
    
    .el7 .article-box {
        margin: 5rem 0;
    }
   
    .el21 {
	    padding: 0 0 3rem 0;
    }
    .el15 {
        padding: 0 0 3rem 0;
    }
    .el16 {
        padding: 0 0 3rem 0;
    }
    .el17 {
	    padding: 0 0 3rem 0;
    }
    .el18 {
        padding: 0 0 3rem 0;
    }
    .el19 {
        padding: 0 0 3rem 0;
    }    
}

/*TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
*/
@media only screen and (min-width: 920px)
{
		h1 {
	font-size:2.5rem;

}
.container {
    margin: 20px auto;
    width: 90%;
	display: grid;
	grid-column-gap: 3rem;
	grid-row-gap: 1.5rem;
	grid-template-columns: repeat(3, [col-start] 20% [col-end]);
	grid-template-rows: [row-1-start] 5rem [row-1-end row-2-start] 4rem [row-2-end row-3-start] minmax(10rem, auto) [row-3-end row-4-start] minmax(2rem, auto) [row-4-end row-5-start] minmax(10rem, auto) [row-5-end row-6-start] minmax(2rem, auto) [row-6-end row-7-start] 4rem [row-7-end];
	grid-template-areas: "header-left header-centre header-centre header-right"
						 "mnu mnu mnu mnu"
						 "main1a main1b main1c side"
						 "captiona captionb captionc side"
						/* "main2a main2b main2c side"
						 "caption2a caption2b caption2c side"*/
						 "footer footer footer footer";
	
	justify-items: stretch;
	align-items: stretch;
	justify-content: center;
	}
	
.faclist {
      margin: 0;
    display: grid;
	grid-column-gap: 0;
	grid-template-columns: 100%;
	grid-template-rows: repeat(auto-fill, minmax(7rem auto)); /*also auto-fit*/
    justify-content: center;
	grid-row-gap: 1rem;
	justify-items: stretch;
	align-items: stretch;
	}
	
.el7 {
        grid-column-start: 4;
        padding: 0;
}

.el22 {
	background: #CF578F;
	grid-area: divide;
  	border-radius: 5px;
	display: flex;
	align-items:center;
	justify-content: center;
	padding: 0.3rem;
	margin: 50px 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)
{
		h1 {
	font-size:2.5rem;
}
.container {
background-color: white;
    margin: 20px auto;
    width: 90%;
	display: grid;
	grid-column-gap: 6rem;
	grid-row-gap: 1.5rem;
	grid-template-columns: repeat(3, [col-start] 20% [col-end]);
	grid-template-rows: [row-1-start] 8rem [row-1-end row-2-start] 4rem [row-2-end row-3-start] minmax(15rem, auto) [row-3-end row-4-start] minmax(2rem, auto) [row-4-end row-5-start] minmax(15rem, auto) [row-5-end row-6-start] minmax(2rem, auto) [row-6-end row-7-start] 4rem [row-7-end];
	grid-template-areas: "header-left header-centre header-centre header-right"
						 "mnu mnu mnu mnu"
						 "main1a main1b main1c side"
						 "captiona captionb captionc side"
						/* "main2a main2b main2c side"
						 "caption2a caption2b caption2c side"*/
						 "footer footer footer footer";
	
	justify-items: stretch;
	align-items: stretch;
	justify-content: center;
	}

.el7 {
        grid-column-start: 4;
        padding: 0;
}

.el22 {
	background: #CF578F;
	grid-area: divide;
  	border-radius: 5px;
	display: flex;
	align-items:center;
	justify-content: center;
	padding: 0.3rem;
	margin: 50px 0;
    }
	
	

}

/* END DESKTOP */

/*LARGE VIEWING SIZE*/
@media only screen and (min-width: 1240px) {
		h1 {
	font-size:2.5rem;
}

}

@media only screen and (min-width: 1430px) {
		h1 {
	font-size:2.5rem;
}
.container {
	
    /*margin: 20px 50px 20px 100px;*/
    margin: 20px auto;
    width: 90%;
	display: grid;
	grid-column-gap: 6rem;
	grid-row-gap: 1.5rem;
	grid-template-columns: repeat(3, [col-start] 23% [col-end]);
	grid-template-rows: [row-1-start] 8rem [row-1-end row-2-start] 4rem [row-2-end row-3-start] minmax(15rem, auto) [row-3-end row-4-start] minmax(2rem, auto) [row-4-end row-5-start] minmax(15rem, auto) [row-5-end row-6-start] minmax(2rem, auto) [row-6-end row-7-start] 4rem [row-7-end];
	grid-template-areas: "header-left header-centre header-centre header-right"
						 "mnu mnu mnu mnu"
						 "main1a main1b main1c side"
						 "captiona captionb captionc side"
						 /*"main2a main2b main2c side"
						 "caption2a caption2b caption2c side"*/
						 "footer footer footer footer";
	
	justify-items: stretch;
	align-items: stretch;
	justify-content: center;
	}


}