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


* {
    box-sizing: border-box;
}

html {
	height: 100%;
}



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

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

h2 {
	margin: 0;
	padding: 0;
}

ul {
    list-style: none;
}

li {
    font-size: 1.1rem;
    margin: 1rem 0;
}

.outputs {
    /*background-color:#F7E6EE;*/
    background-color: #ffffff;
    border-style: ridge;
    border-radius: 10px;
    /*height: auto;
    display: grid;
    grid-template-columns: 100%;*/
}

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

.el51 {
    grid-area: ws1;
    grid-row-end: 14;
}

.el52 {
    grid-area: ws2;
    margin: auto;
    vertical-align: top;
    margin-top: 0.5rem;
}

.el53 {
    grid-area: ws3;
}

.el54 {
    grid-area: ws4;
    margin: auto;
    vertical-align: top;
    margin-top: 0.5rem;
}

.el55 {
    grid-area: ws5;
}

.el56 {
    grid-area: ws6;
    margin: auto;
    vertical-align: top;
    margin-top: 0.5rem;
}

.el57 {
    grid-area: ws7;
}

.el58 {
    grid-area: ws8;
    margin: auto;
    vertical-align: top;
    margin-top: 0.5rem;
}

.el59 {
    grid-area: ws9;
}

.el60 {
    grid-area: ws10;
    margin: auto;
    vertical-align: top;
    margin-top: 0.5rem;
}

.el61 {
    grid-area: ws11;
}

.el62 {
    grid-area: ws12;
    margin: auto;
    vertical-align: top;
    margin-top: 0.5rem;
}

.el63 {
    grid-area: ws13;
}

.el64 {
    grid-area: ws14;
    margin: auto;
    vertical-align: top;
    margin-top: 0.5rem;
}

.el65 {
    grid-area: ws15;
}

.el66 {
    grid-area: ws16;
    margin: auto;
    vertical-align: top;
    margin-top: 0.5rem;
}

.el67 {
    grid-area: ws17;
}

.el68 {
    grid-area: ws18;
    margin: auto;
    vertical-align: top;
    margin-top: 0.5rem;
}

.el69 {
    grid-area: ws19;
}

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


    .container {
        /*margin: 20px 228px;*/
        width: 90%;
        margin: 20px auto;
        display: grid;
        /*grid-template-columns: repeat(3, 1fr);*/
        grid-column-gap: 0;
        grid-row-gap: 0;
        grid-template-rows: [row-1-start] 12rem [row-1-end row-2-start] 15rem [row-2-end row-3-start] minmax(35rem, 45rem) [row-3-end row-4-start] minmax(5rem, auto) [row-4-end row-5-start] minmax(5rem, auto) [row-5-end row-6-start] minmax(5rem, auto) [row-6-end row-7-start] minmax(5rem, auto) [row-7-end row-8-start] minmax(5rem, auto) [row-8-end row-9-start] minmax(5rem, auto) [row-9-end row-10-start] minmax(5rem, auto) [row-10-end row-11-start] minmax(5rem, auto) [row-11-end row-12-start] minmax(5rem, auto) [row-12-end row-13-start] minmax(5rem, auto) [row-13-end row-14-start] minmax(5rem, auto) [row-14-end row-15-start] minmax(5rem, auto) [row-15-end row-16-start] minmax(5rem, auto) [row-16-end row-17-start] minmax(5rem, auto) [row-17-end row-18-start] minmax(5rem, auto) [row-18-end row-19-start] minmax(5rem, auto) [row-19-end row-20-start] minmax(5rem, auto) [row-20-end row-21-start] minmax(5rem, auto) [row-21-end];
        grid-template-areas: "header-left"
                             "header-right"
                             "ws1"
                             "ws2"
                             "ws3"
                             "ws4"
                             "ws5"
                             "ws6"
                             "ws7"
                             "ws8" 
                             "ws9"
                             "ws10"
                             "ws11"
                             "ws12"
                             "ws13"
                             "ws14"
                             "ws15"
                             "ws16"
                             "ws17"
                             "ws18"
                             "ws19";
        justify-items: stretch;
        align-items: stretch;
        justify-content: center;
    }
}

@media only screen and (min-width: 900px) {
.container {
    /*margin: 20px 228px;*/
    width: 90%;
    margin: 20px auto;
	display: grid;
    grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 1rem;
	grid-row-gap: 0rem;
	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] minmax(5rem, auto) [row-4-end row-5-start] minmax(5rem, auto) [row-5-end row-6-start] minmax(5rem, auto) [row-6-end row-7-start] minmax(5rem, auto) [row-7-end row-8-start] minmax(5rem, auto) [row-8-end row-9-start] minmax(5rem, auto) [row-9-end row-10-start] minmax(5rem, auto) [row-10-end row-11-start] minmax(5rem, auto) [row-11-end row-12-start] 3rem [row-12-end];
	grid-template-areas: "header-left header-centre header-right"
						 "mnu mnu mnu"
						 "ws1 ws2 ws3"
                         "ws1 ws4 ws5"
                         "ws1 ws6 ws7"
                         "ws1 ws8 ws9"
                         "ws1 ws10 ws11"
                         "ws1 ws12 ws13"
                         "ws1 ws14 ws15"
                         "ws1 ws16 ws17"
                         "ws1 ws18 ws19"
						 "footer footer footer";
	justify-items: stretch;
	align-items: stretch;
	justify-content: center;
}

.dropdown-content {
    top: 15rem;        
    } 
    
/*MOBILE MENU - HIDDEN*/
.mobile-nav {
	  display: none;
    }

.mobile-nav__items {
	display: none;	
    }

.toggle-button {
	display: none;
    }
}


@media only screen and (min-width: 1030px) {
.container {
    /*margin: 20px 228px;*/
    width: 90%;
    margin: 20px auto;
	display: grid;
    grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 6rem;
	grid-row-gap: 0rem;
	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] minmax(5rem, auto) [row-4-end row-5-start] minmax(5rem, auto) [row-5-end row-6-start] minmax(5rem, auto) [row-6-end row-7-start] minmax(5rem, auto) [row-7-end row-8-start] minmax(5rem, auto) [row-8-end row-9-start] minmax(5rem, auto) [row-9-end row-10-start] minmax(5rem, auto) [row-10-end row-11-start] minmax(5rem, auto) [row-11-end row-12-start] 3rem [row-12-end];
	grid-template-areas: "header-left header-centre header-right"
						 "mnu mnu mnu"
						 "ws1 ws2 ws3"
                         "ws1 ws4 ws5"
                         "ws1 ws6 ws7"
                         "ws1 ws8 ws9"
                         "ws1 ws10 ws11"
                         "ws1 ws12 ws13"
                         "ws1 ws14 ws15"
                         "ws1 ws16 ws17"
                         "ws1 ws18 ws19"
						 "footer footer footer";
	justify-items: stretch;
	align-items: stretch;
	justify-content: center;
}

.dropdown-content {
    top: 15rem;        
    } 
    
/*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 {
    }

.el2 {
    font-size: 14px;
    }
.film-box {
    font-size: 22px;
    }

}