/*this CSS contains all responsive design*/
/*all elements that need to be displayed differently on small screens and mobile devices should be handled here*/

/*header and footer*/
@media only screen and (max-width: 1024px) { 
	.headermenu li { /*list items inside header menu*/
		font-size: 1em;
		font-weight: bold;
		margin-left: 1em;
		margin-right: 1em;
}
}

/*content on index, missions and NOC pages*/
@media only screen and (max-width: 1024px) { 
	.textbox {
		max-width: 100%;
		justify-self: left;	
	}
	
	#NOC-Diagram{
		width: 95vw;
		height: 50vw;
	}
	
	.content {
		grid-template-columns: 100%;			/* <-- makes two columns into one*/
	}
	.textcontent {
		background-color: white; 
		padding: 0;
	}
	
	.map-container{
		width: 100%;
	}
}

@media only screen and (max-width: 1280px) { 
	#missions-intro{							/* <-- adds aditional space unter the image for the text to display*/
		background-color: black;
		height: 25em;
	}
}

@media only screen and (max-width: 560px) { 
	#missions-intro{							/* <-- adds aditional space unter the image for the text to display*/
		background-color: black;
		height: 30em;
	}
}
@media only screen and (max-width: 365px) { 
	#missions-intro{							/* <-- adds aditional space unter the image for the text to display*/
		background-color: black;
		height: 35em;
	}
}
@media only screen and (max-width: 310px) { 
	#missions-intro{							/* <-- adds aditional space unter the image for the text to display*/
		background-color: black;
		height: 40em;
	}
}

/*station tables*/
@media only screen and (max-width: 1024px) { 
	.content{
		overflow-y: scroll;
	}
	
	.Station-Table {
		justify-self: left;
	}

	.table-image, 	.table-text {
		width: 100%;
		margin: 0;
	}
	
	.th-rad th p, .th-opt th p{
	padding-left: 2em;
}
}

/*Note, Sizes and Units; 1em = 16px @100%, 1vw = 1% of viewport width */