/*@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;
    margin-bottom: 15px;
}

h2 {
	margin: 0;
	padding: 0;
}

ul {
    list-style: none;
}

.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: wsTitle1;
    /*border-radius: 15px;
	background-image: url("../images/apps/studio_3.jpg");
	background-size: cover;
	justify-content: center;*/
}

.el52 {
    grid-area: wsTitle2;
    margin: 0 auto;
}

.el53 {
    grid-area: wsTitle3;
    margin: 0;
}


/* MOBILE */
@media (max-width: 40rem) {
	.container {
		margin: 10px;
		grid-template-columns: 95%;
		/*grid-template-rows: [row-1-start] 8rem [row-1-end row-2-start] 8rem [row-2-end row-3-start] 25px [row-3-end row-4-start] minmax(10rem, auto) [row-4-end row-5-start] minmax(10rem, auto) [row-5-end row-6-start] minmax(10rem, auto) [row-6-end row-7-start] 25px [row-7-end row-8-start] auto [row-8-end];*/
		
		grid-template-rows: [row-1-start] 5rem [row-1-end row-2-start] 5rem [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];
		grid-column-gap: 5px;
		grid-row-gap:  2px;
		grid-template-areas: "header-left" 
							 "header-right"
							 "wsTitle1"
						 	 "wsTitle2"
							 "wsTitle3";
	}
}
/* END MOBILE */

/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px)
{
.dropdown-content {
    top: 24rem;        
    }
    
.container {
    background-color: white;
    grid-template-areas: "header-left" 
				         "header-right"
				         "wsTitle1"
				         "wsTitle2"
				         "wsTitle3";
    }
    
.el51 img {
    margin: 1rem auto;
    }
    
.el54 {
    display: none;        
    }
    

}

/*
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 {
    background-color: white;
    width: 90%;
    margin: 20px auto;
	display: grid;
    grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 0.5rem;
	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] 50px [row-3-end row-4-start] minmax(5rem, auto) [row-4-end row-5-start] 3em [row-5-end];
	grid-template-areas: "header-left header-centre header-right"
						 "mnu mnu mnu"
                         "subTitle subTitle subTitle"
						 "wsTitle1 wsTitle2 wsTitle3"
						 "footer footer footer";
	justify-items: stretch;
	align-items: stretch;
	justify-content: center;
	
}

.dropdown-content {
    top: 15rem;        
    } 
    
.el51 img {
    margin: 0 auto;        
    }
    
.el54 {
    display: block;        
    }
    
/*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;
    }*/

}