* {
    box-sizing: border-box;
}

html {
    height: 100%
}

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

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

.el5 {
    margin: 0;
}

.el41 {
    grid-area: strap;
}

img.banner {
    width: 100%;
    height: auto;
}
/* RESEARCH BUTTON */
.el3 {
    display: block;
    padding: 0;
    grid-area: main1a;
    border-radius: 15px;
	background-image: url("../images/home/research3.jpg");
	background-size: cover;
	justify-content: center;
	}

.el3:hover {
	filter:none;
}

/* WORKSHOPS BUTTON */
.el6 {
    display: block;
	grid-area: main1b;
	padding: 0;
  	border-radius: 15px;
	background-image: url("../images/home/workshops4.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	justify-content: center;
	/*filter: grayscale(50%);*/
}

.el6:hover {
	filter: none;
}

/* NEWS BUTTON */
.el9 {
    display: block;
	grid-area: main1c;
	padding: 0;
  	border-radius: 15px;
	background-image: url("../images/SHORE-Csign.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	justify-content: center;
	/*filter: grayscale(50%);*/
}

.el9:hover {
	filter: none;
}

/* PUBLICATIONS BUTTON */
.el8 {
    display: block;
	grid-area: main2a;
	padding:0;
  	border-radius: 15px;
	background-image: url("../images/home/pubs13.jpg");
	background-size: cover;
	justify-content: center;
	/*filter: grayscale(50%);*/
}

.el8:hover {
	filter: none;
	
}

/* FILMS BUTTON */
.el10 {
    display: block;
	grid-area: main2b;
	padding: 0;
  	border-radius: 15px;
	background-image: url("../images/home/sayordoHands.PNG");
    background-size: cover;
	justify-content: center;
	/*filter: grayscale(50%);*/
}

.el10:hover {
	filter: none;

}

/* APPS BUTTON */
.el11 {
    display: block;
	grid-area: main2c;
	padding: 0;
  	border-radius: 15px;
	background-image: url("../images/home/apps5.jpg");
	background-size: cover;
	justify-content: center;
	/*filter: grayscale(50%);*/
}

.el11:hover {
	filter: none;
}

.el21 {
    display: block;
	grid-area: captiona;
    padding: 0 0 2rem 0;
	justify-content: center;
}

.el15 {
    display: block;
	grid-area: captionb;
    padding: 0 0 2rem 0;
	justify-content: center;
}

.el16 {
    display: block;
	grid-area: captionc;
    padding: 0 0 2rem 0;
	justify-content: center;
}

.el17 {
    display: block;
	grid-area: caption2a;
    padding: 0 0 2rem 0;
	justify-content: center;
}

.el18 {
    display: block;
	grid-area: caption2b;
    padding: 0 0 2rem 0;
	justify-content: center;
}

.el19 {
    display: block;
	grid-area: caption2c;
    padding: 0 0 2rem 0;
	justify-content: center;
    }

.el23 {
    grid-area: shorec;
}

.centered {
    font-weight: normal;
	}

/* MOBILE */
@media only screen and (max-width: 40rem)
{
    
img.banner {
    width: auto;
    height: 100%;
}
    
h1 {
    /*font-size: 1.7rem; */
    display: block;
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 28px;
    }
    
.el7 {
	background: white;
	grid-area: side;
	padding: 0 0 0 1rem;
  	border-radius: 15px;
    grid-column-start: 1;
}

.container {
        margin-left: 15px;
		display: grid;
		column-gap: 0;
		row-gap: 15px;
        grid-template-columns: 95%;
		/*grid-template-columns: repeat(2, [col-start] 48% [col-end]);*/
    /*grid-template-rows: [row-1-start] 8rem [row-1-end row-2-start] 10rem [row-2-end row-3-start] minmax(18rem, auto) [row-3-end row-4-start] minmax(3rem, auto) [row-4-end row-5-start] minmax(18rem, auto) [row-5-end row-6-start] minmax(3rem, auto) [row-6-end row-7-start] minmax(18rem, auto) [row-7-end row-8-start] minmax(3rem, auto) [row-8end row-9-start] minmax(18rem, auto) [row-9-end row-10-start] minmax(3rem, auto) [row-10-end row-11-start] minmax(18rem, auto) [row-11-end row-12-start] minmax(3rem, auto) [row-12-end row-13-start] minmax(18rem, auto) [row-13-end row-14-start] minmax(8rem, auto) [row-14-end row-15-start] minmax(3rem, auto) [row-15-end row-16-start] minmax(5rem, auto) [row-16-end] ;*/
    
    grid-template-rows: [row-1-start] 8rem [row-1-end row-2-start] 6rem [row-2-end row-3-start] 8rem [row-3-end row-4-start] 10rem [row-4-end row-5-start] minmax(18rem, auto) [row-5-end row-6-start] minmax(3rem, auto) [row-6-end row-7-start] minmax(18rem, auto) [row-7-end row-8-start] minmax(3rem, auto) [row-8-end row-9-start] minmax(18rem, auto) [row-9-end row-10-start] minmax(3rem, auto) [row-10end row-11-start] minmax(18rem, auto) [row-11-end row-12-start] minmax(3rem, auto) [row-12-end row-13-start] minmax(18rem, auto) [row-13-end row-14-start] minmax(3rem, auto) [row-14-end row-15-start] minmax(18rem, auto) [row-15-end row-16-start] minmax(8rem, auto) [row-16-end row-17-start] minmax(3rem, auto) [row-17-end row-18-start] minmax(5rem, auto) [row-18-end] ;
		
		grid-template-areas: "header-left"
                             "header-centre"
                             "header-right"
                             "shorec"
                             "main1a"
                             "captiona"
                             "main2a"
                             "caption2a"
                             "main1b"
                             "captionb"
                             "main1c"
                             "captionc"
                             "main2b"
                             "caption2b"
                             "main2c"
                             "caption2c"
                             "strap"
							 "side";
	}
    .article-box {
        margin-bottom: 5rem;
        font-size: larger;
    }
    
    .accordion {
        margin-left: 15px;
    }
    
    .el10 {
	background-image: url("../images/home/sayordoHandsRH2.png");
}



}
  
/*
LARGER MOBILE DEVICES
*/
@media only screen and (min-width: 481px)
{
img.banner {
    width: auto;
    height: 100%;
}
.container {
        margin-left: 15px;
		display: grid;
		column-gap: 0;
		row-gap: 15px;
        grid-template-columns: 95%;
		/*grid-template-columns: repeat(2, [col-start] 48% [col-end]);*/
    /*grid-template-rows: [row-1-start] 8rem [row-1-end row-2-start] 10rem [row-2-end row-3-start] minmax(18rem, auto) [row-3-end row-4-start] minmax(3rem, auto) [row-4-end row-5-start] minmax(18rem, auto) [row-5-end row-6-start] minmax(3rem, auto) [row-6-end row-7-start] minmax(18rem, auto) [row-7-end row-8-start] minmax(3rem, auto) [row-8end row-9-start] minmax(18rem, auto) [row-9-end row-10-start] minmax(3rem, auto) [row-10-end row-11-start] minmax(18rem, auto) [row-11-end row-12-start] minmax(3rem, auto) [row-12-end row-13-start] minmax(18rem, auto) [row-13-end row-14-start] minmax(8rem, auto) [row-14-end row-15-start] minmax(3rem, auto) [row-15-end row-16-start] minmax(5rem, auto) [row-16-end] ;*/
    
    grid-template-rows: [row-1-start] 8rem [row-1-end row-2-start] 1rem [row-2-end row-3-start] 8rem [row-3-end row-4-start] 10rem [row-4-end row-5-start] minmax(18rem, auto) [row-5-end row-6-start] minmax(3rem, auto) [row-6-end row-7-start] minmax(18rem, auto) [row-7-end row-8-start] minmax(3rem, auto) [row-8-end row-9-start] minmax(18rem, auto) [row-9-end row-10-start] minmax(3rem, auto) [row-10end row-11-start] minmax(18rem, auto) [row-11-end row-12-start] minmax(3rem, auto) [row-12-end row-13-start] minmax(18rem, auto) [row-13-end row-14-start] minmax(3rem, auto) [row-14-end row-15-start] minmax(18rem, auto) [row-15-end row-16-start] minmax(8rem, auto) [row-16-end row-17-start] minmax(3rem, auto) [row-17-end row-18-start] minmax(5rem, auto) [row-18-end] ;
		
		/*grid-template-areas: "header-left"
                             "shorec"
                             "main1a"
                             "captiona"
                             "main2a"
                             "caption2a"
                             "main1b"
                             "captionb"
                             "main1c"
                             "captionc"
                             "main2b"
                             "caption2b"
                             "main2c"
                             "caption2c"
                             "strap"
							 "side";*/
    
    grid-template-areas: "header-left"
                             "header-centre"
                             "header-right"
                             "shorec"
                             "main1a"
                             "captiona"
                             "main2a"
                             "caption2a"
                             "main1b"
                             "captionb"
                             "main1c"
                             "captionc"
                             "main2b"
                             "caption2b"
                             "main2c"
                             "caption2c"
                             "strap"
							 "side";
	}
    .article-box {
        margin-bottom: 5rem;
        font-size: larger;
    }
    
    .accordion {
        margin-left: 15px;
    }

 .el10 {
	background-image: url("../images/home/sayordoHandsRH2.png");
    }
}
/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
*/
@media only screen and (min-width: 920px)
{
    
img.banner {
    width: 100%;
    height: auto;
}
.container {
    width: 90%;
    margin: 20px auto;
	display: grid;
	grid-column-gap: 1rem;
	grid-row-gap: 1.5rem;
	grid-template-columns: repeat(3, [col-start] 23% [col-end]);
	grid-template-rows: [row-1-start] 5rem [row-1-end row-2-start] 4rem [row-2-end row-3-start] 6rem [row-3-end row-4-start] minmax(15rem, auto) [row-4-end row-5-start] minmax(2rem, auto) [row-5-end row-6-start] minmax(15rem, auto) [row-6-end row-7-start] minmax(2rem, auto) [row-7-end row-8-start] minmax(30rem, auto) [row-8-end row-9-start] 4rem [row-9-end];
	grid-template-areas: "header-left header-left header-centre header-right"
						 "mnu mnu mnu mnu"
                         "shorec shorec shorec shorec"
						 "main1a main1b main1c side"
						 "captiona captionb captionc side"
						 "main2a main2b main2c side"
						 "caption2a caption2b caption2c side"
                         "strap strap . . "
						 "footer footer footer footer";
	
	justify-items: stretch;
	align-items: stretch;
	justify-content: center;
	}

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

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

.mobile-nav__items {
	display: none;	
    }

.toggle-button {
	display: none;
    }
     
.accordion {
    background-color:#55788c;
    color: #fff;
    width: 100%;
    margin: auto;
    margin-top: 2rem;
    /*font-size: 0.8rem;*/
    }
    
.accordion:hover {
    background-color:#EBF7E1;
    color: #55788c;        
    }

.article-box {
    font-weight: bold;
    margin-top: 0;
    font-size: 18px;
    }
    
    .el10 {
        background-image: url("../images/home/sayordoHands.PNG");
    }
}

/*
DESKTOP*/
@media only screen and (min-width: 1030px)
 {
 .container {
    /*margin: 20px 50px 20px 150px;*/
    background-color: white;
    width: 90%;
    margin: 20px auto;
	display: grid;
	grid-column-gap: 1rem;
	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] 5rem [row-3-end row-4-start] minmax(15rem, auto) [row-4-end row-5-start] minmax(2rem, auto) [row-5-end row-6-start] minmax(15rem, auto) [row-6-end row-7-start] minmax(2rem, auto) [row-7-end row-8-start] minmax(30rem, auto) [row-8-end row-9-start] 4rem [row-9-end];
	grid-template-areas: "header-left header-left header-centre header-right"
						 "mnu mnu mnu mnu"
                         "shorec shorec shorec shorec"
						 "main1a main1b main1c side"
						 "captiona captionb captionc side"
						 "main2a main2b main2c side"
						 "caption2a caption2b caption2c side"
                         "strap strap . . "
						 "footer footer footer footer";
	
	justify-items: stretch;
	align-items: stretch;
	justify-content: center;
	}
}
/* END DESKTOP */

/*LARGE VIEWING SIZE*/
@media only screen and (min-width: 1240px) {

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


}