/*main style sheet*/
*{
	box-sizing: border-box;
}
html,body{

	background-color:var(--theme-color5);
}

body{
	margin:0;
	color:black;

}
:root{
	--header-height:90px;
	--2ndheader-height:350px;
	
	--main-bg-color:#ffff;
	--theme-color1:#a40220;/*ironlink red*/
	--theme-color2:#171717;/*dark grey*/
	--theme-color3:#707070;/*med grey*/
	--theme-color4:#a3a3a3;/*light grey*/
	--theme-color5:#5e0011;/*darker ironlink red*/
	
	--insetPadLeft:3rem;
	--insetPadTop:1rem;
	--padBot:5px;
	--padRgt:10px;

	font-size:16px;
}
.sans-serif{
	font-family:Verdana, Helvetica, sans-sefif;
}
.sans-serif2{
	font-family:Tahoma, Geneva, courier,sans-serif;
}
.serif{
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, courier, serif;
}
.clearfix:after {
    content:"";
    display:block;
    clear:both;
}

#header-top{
	position:sticky;
	top:0;
	z-index:1;
	background-color:white;
	box-shadow:2px 0px 3px 5px rgba(0,0,0,0.3);
	transition: visibility 0s, opacity 0.5s linear;
}


#header-top .flex-container{
  display:flex;
  flex-wrap:wrap;
  width:100%;
  justify-content:space-between;
  align-items: center;

}
#logo-container{
	height:var(--header-height);
	max-width:40%;
}
#logo{
  max-height:60%;
  max-width:100%;/*of #logo-container which is 50% of fullwidth*/
  padding-top:var(--insetPadTop);
  padding-left:var(--insetPadLeft);
}
#tagline{
	margin:0;
	padding-left:var(--insetPadLeft);
	padding-bottom:1rem;
	font-size:1rem;
	font-style:italic;
	color:var(--theme-color2);
	white-space:nowrap;
}
#nav-container {

  justify-content:center;
  height:var(--header-height);
  display:flex;
  
}
/*header styling for medium screens*/
@media screen and (min-width:601px) and (max-width:1000px){

	#nav-container{
		width:100%;	/*break nav onto new line*/
		height:3rem; /*make nav smaller than if on big screen*/
	}
	
	
}
/*header styling for small screens*/
@media screen and (max-width:600px){
	#header-top{
		padding:1rem;
	}
	#tagline{
		display:none;/*hide tagline*/
	}
	#logo{
		padding:0;
	}
	#logo-container{
		height:auto;
	}
	#nav-container{
		height:auto;
	}
}



nav ul{
  height:100%;/*fill header height*/
  display: flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:stretch;
  list-style:none;
  margin: 0;
  padding: 0;
  overflow: visible;
  z-index: 1;
}
nav ul li{
	margin:0;
	height:100%;/*fill ul height*/
	position:relative;
}
nav li a{
	height:100%; /*fill li height*/
	display:flex;
	align-items:center;
	justify-content:stretch;
	margin:0;
	padding:0 1rem;
	color:var(--theme-color2);
	white-space:nowrap;
	font-size:1rem;
	text-decoration:none;
}

/*negative margin to accomodate sticky header - i.e. so that the header doesn't cover the anchor tag*/
span.menuAnchor{
    display: block;
    position: relative;
    top: calc(var(--header-height) * -1); /* size of header as a negative*/
    visibility: hidden;
}
@media screen and (min-width:601px) and (max-width:1000px){
	span.menuAnchor{
		top:calc((var(--header-height) + 3rem) * -1); /*size of header as a negative*/
	}
}
@media screen and (max-width:600px){
	span.menuAnchor{
		top:-2rem; /*size of header as a negative*/
	}
}
nav li#menuToggleBtn{
	/*keep menu toggle button hidden by default. Only show when screen size is less than screenThresh*/
	display:none;	
}



#currentPage{
	background-color:var(--theme-color1);
	color:white;
}
/*settings for widescreen*/
/*hide nav submenus ....*/
nav ul.menuOff .subMenu{
	height:auto;
	display:none;
	position:absolute;
	z-index:1;
	background-color:var(--theme-color4);
	box-shadow:3px 3px 2px 3px rgba(0,0,0,0.3);
	width:auto;
}
nav ul.menuOff .subMenu ul{
	display:block;
}
nav ul.menuOff .subMenu li{
	background-color:var(--theme-color4);
	height:2rem;
}
nav ul.menuOff .subMenu li a:hover{
	color:white;
}
	
/*....until hovered. Display siblings with class="subMenu"*/
nav ul.menuOff li:hover .subMenu{
	display:block;
}

/* smaller screen settings - may need to adjust ul li too*/
@media screen and (max-width:600px){
	/*style the menu button to show*/
	nav li#menuToggleBtn{
		display:flex;/*unhide*/
	}
	nav li{
		display:none;/*hide all other menu items*/
	}
	#header-top .flex-container{
		flex-wrap:nowrap;/*stop menu from wrapping if screen gets small - keep logo and toggle on one line*/
	}
	nav.menuOn {
		position:fixed;
		
		top:0;
		left:0;
		bottom:0;
		right:0;
		overflow-x: hidden;
		overflow-y: scroll;
	}
	nav ul.menuOn{
			display:flex;
			flex-direction:column;
			height:auto;
			width:100%;
	}

	nav ul.menuOn li{
		width:100%;
		font-size:2rem;
		display:block;/*unhide*/
		background-color:var(--theme-color4);/*grey color for this menu*/
	}
	
	nav ul.menuOn li a{
		height:4rem;/*limit height back from 100%*/
		width:100%;
	}
	
	nav li#menuToggleBtn{
		order:-1;/*move menu toggle button to top of the nav flexbox*/
	}
	

}
	
/*2nd header*/
#header-2nd{
	height:var(--2ndheader-height);
	background:
	linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),
	url('./images/misc/bgheader.jpg') no-repeat;
	background-position:center center;
	background-size:cover;
	display:flex;
	align-items:center;
	justify-content:center;
	
}
#header-2nd-content{
	position:relative;
	margin:1rem;

	
	font-size:1.5rem;
	font-family:Helvetica;
}
#header-2nd-content h2{
	/*color:var(--theme-color4);*/
	color:white;
	font-weight:normal;
}
	

/*Main content*/
main{
	background-image:linear-gradient(to right,#bdc3c7,#79848f);
	/*background-color:grey;*/
}
main .flexContainer{
	display:flex;
	justify-content:center;
	align-items:flex-start;
}
h1,h2,h3,h4{
	line-height:150%;
}
main h1{
	text-align:center;
	font-size:2rem;
	font-weight:normal;
	color:var(--theme-color5);

}
main h2{
	text-align:center;
	font-size:1.5rem;
	font-weight:normal;
	color:var(--theme-color2);
	margin-bottom:1.5rem;
}

main h3{
	color:var(--theme-color2);
	font-size:1.2rem;
}
main h4{
	color:var(--theme-color5);
	font-size:1.2rem;
}
main .mainContent{
	max-width:750px;
	text-align:left;
	font-size:1rem;
	line-height:150%;
	font-family:Helvetica;
	padding-left:1rem;
	padding-right:1rem;
}
main .mainContent.fullWidth{
	max-width:100%;
}

main .mainContent.centerAlign{
	text-align:center;
}
main .mainContent .emphasis{

	font-weight:bold;
	font-size:140%;
	color:var(--theme-color2);
	font-style:italic;
}
main .quote{
	padding:1rem 8rem;/*make side padding 0 for mobile*/
	margin:2rem 3rem 2rem 3rem;
	font-size:1rem;
	font-style:italic;
	color:white;
	background-color:var(--theme-color5);
	box-shadow:
		6px 6px 6px 3px rgba(0,0,0,0.4);
	
	/*border-radius:10px;*/
	line-height:160%;
}
@media screen and (max-width:600px){
	main .quote{
		margin:1rem 0rem;
		padding:1rem 1rem;/*make side padding 0 for mobile*/
	}
}
main .quote span{
	display:block;
	font-style:normal;
	font-weight:bold;
	text-align:right;
}
main img{
	width:400px;
	height:auto;
	margin:0rem 1rem 1rem 1rem;
}
main img.floatRight{
	float:right;
	clear:both;
}
main img.floatLeft{
	float:left;
	clear:both;
}
main img.fullWidth{
	float:none;
	width:100%;
	margin:0 0 8px 0;
}

footer{

	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	align-items:start;
	background-color:var(--theme-color3);
	color:white;
	line-height:150%;
	font-size:0.9rem;
}
footer h3{
		font-weight:normal;
}

footer a:link{
	color:white;
	text-decoration:none;
}
footer a:visited{
	color:white;
}
footer a:hover, footer a:focus{
	color:var(--theme-color5);
	text-decoration:none;
}
footer #footer1{

	flex:auto;
	padding-left:var(--insetPadLeft);

}
footer #footer2{

	font-weight:normal;
	flex:auto;
	padding-left:var(--insetPadLeft);
}
footer #footer2 ul{

	margin:0;
	padding:0;
	list-style:none;
}
footer #footer3{
	flex:auto;
	background-color:var(--theme-color5);
	width:100%;
	padding:1rem 0;
	padding-left:var(--insetPadLeft);
	height:100%;
}

@media screen and (max-width:600px){
	footer div{
		padding-left:1rem !important;
	}
}

/*Gallery layout*/
.gallery{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}
/*Modal styling for pop-up with more info - driven by button on each industry image*/
#galleryModalBackground{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3; /* Sit on top */
  left: 0;
  top: 0;
  align-items:center;
  justify-content:center;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}
#modalContent{
	position:relative;
	display:flex;
	align-items:flex-start;
	max-height:100%;
	overflow-y:auto;
	justify-content:initial;
	margin:50px 50px 0 50px;
	background-color:var(--theme-color4);
	padding:10px;
}
#modalContent img{

	max-width:400px;
	max-height:400px;
	width:20vw;
	height:auto;
	flex:1;
}
#modalContent p{
	font-size:1rem;
	margin-left:1rem;
	margin-block-start:1rem;
    margin-block-end:1rem;
	flex:2;
}
.container{

	max-width:500px;
}

/* The Close Button */
#modal-close {
  color: #dddddd;
  font-size: 3.5rem;
  font-weight: bold;
  margin:0px 20px;
}

/*Styling for Close button hover*/
#modal-close:hover,
#modal-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.elementSizing{
	min-width:150px;
	min-height:150px;
	width:20vw;
	height:20vw;
}

.elementBackground{
	position:relative;
	background-size:cover;
	margin:5px;
}
.elementBackground img{
	width:inherit;
	height:inherit;
	float:none;
	margin:0;
	padding:0;
	
}
.elementMask{
	width:inherit;
	height:inherit;
	background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3));
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	color:white;
	font-size:1.6rem;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
}
.elementTitle{
	text-align:center;
	padding:1rem;
	font-family:Verdana, Helvetica, sans-sefif;
}
.elementTitle h3{
	font-weight:normal;
	color:white;
	margin:0;
}
@media screen and (max-width:900px){
	.elementTitle h3{
		font-size:1rem;
		overflow:hidden;
	}
}

.elementMask i{
	font-size:2.2rem;
	display:none;
}

.elementBlurb{
	padding:15px;
	display:none;/*until hover*/
}
.elementBlurb p{
	margin-block-start:0;
    margin-block-end:0;
	font-family:Verdana, Helvetica, sans-sefif;
	font-size:1rem;
	display:inline-block;
}
.hasReadMore.elementMask:hover{
  background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7));
/*  outline: 2px solid white;
  outline-offset: -10px;*/
  cursor: pointer;
}
.hasReadMore.elementMask:hover i{
	display:initial;
}
/*
.elementMask:hover .elementBlurb{
	display:initial;
}*/
.elementBtn{
		width:inherit;
	height:inherit;
	padding:0;
	position:absolute;
	top:0;
	left:0;
	border:none;
	outline:none;
	background-color:transparent;
}

/*misc options for small screens*/

@media screen and (max-width:600px){


	
	main .mainContent{
	width:100%;
	}
	main img {
    width: 100%;
    height: auto;
    margin: 1rem;
	}
	main img.floatRight{
		width:50%;
	}
	#modalContent{
		margin:1rem;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	#expandedBlurb{
		order:3;
		width:100%;
	}

}