/* BASIC CSS */
body {
	margin: 0;
	font-family: "Open Sans", sans-serif;
	font-size: 1em; /* equivalent to 16px */
	background-color: #efefef;
}

header {
	background-color: #333;
}

header a, header a:hover {
    text-decoration: none;
}

/* CUSTOM HEADER */

.site-header .logo {
	display: flex;
	align-items: center;
}

@media only screen and (max-device-width: 480px) {
	.site-header #menu-icon {
		display: block;
	}

	#menu-icon .material-icons {
		padding: 0.5em;
    	margin: 0.5em 0;
    	font-size: 0.75em;
    	line-height: 0;
	}

	.site-header {
	    width: 100%;
	    height: 8.25em;
	    margin-left:0.5em;
	}

	.site-header img {
		border: none;
		width: 120px;
		margin: 0 20px 0 15px;
	}

	.site-header #menu-icon {
		display: flex;
		align-items: center;
	}

	.site-header .logo {
		float: left;
	}

	.site-header #menu-icon {
		float: right;
	}

	#header-text {
	    font-family: "Muli", sans-serif;
	    font-weight: 900;
	    font-size: 5.5em;
	    color: #eee;
		line-height: 1.5;
	}
}

@media only screen and (min-device-width: 480px) {
	.site-header #menu-icon {
		display: none;
	}

	.site-header {
	    width: 100%;
	    height: 5.25em;
	}

	.site-header img {
		border: none;
		width: 90px;
		margin: 0 10px 0 15px;
	}

	#header-text {
	    font-family: "Muli", sans-serif;
	    font-weight: 900;
	    font-size: 3.5em;
	    color: #eee;
		line-height: 1.5;
	}
}

/* MENU BAR */

@media only screen and (max-device-width: 480px) {
	#menu-bar {
		display: none;
		margin: 0;
	}

	#menu-list {
		margin: 0;
		padding: 0;
		width: 100%;
		list-style-type: none;
		text-align: center;
		color: #ddd;
	}

	#menu-list li {
		line-height: 2;
		background-color: #444;
		font-size: 2em;
	}

	#menu-list li a {
		color: #ddd;
	}

	#menu-list li ul {
		padding-left: 0;
		list-style: none;
		visibility: hidden;
		opacity: 0;
		display: none;
	}

	#menu-list li li {
		line-height: 2;
		background-color: #666;
		text-align: center;
		font-size: 1em;
	}

	#menu-list li:hover ul,
	#menu-list li:hover > ul,
	#menu-list li:focus-within > ul,
	#menu-list li li:hover {
		visibility: visible;
		opacity: 1;
		display: block;
	}
}

@media only screen and (min-device-width: 480px) {
	#menu-bar {
		font-family: "Muli", sans-serif;
		font-weight: 700;
		font-size: 1em;
		text-align: right;
		line-height: 2;
		color: #eee;
		background-color: #e66700;
	    filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.5));
	    z-index: 100;
	}

	#menu-list {
		list-style-type: none;
	    margin: 0;
	    padding: 0;
	    overflow: hidden;
	}

	#menu-list li {
		float: left;
	}

	#menu-list li a {
	    padding: 0.3em 1em;
	    color: #eee;
		/* NECESSARY FOR DROPDOWN */
		position: relative;
	    display: block;
	}

	#menu-list li:hover > a {
	    background-color: #eee;
	    color: #e66700;
	}

	/* MENU BAR DROPDOWN */

	#menu-list li ul {
		list-style: none;
		visibility: hidden;
		opacity: 0;
		display: none;
	    position: absolute;
	    text-align: left;
	}

	#menu-list li li {
	    float: none;
	    width: max-content;
	    margin-left: -40px;
	    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	}

	#menu-list li:hover ul,
	#menu-list li:hover > ul,
	#menu-list li:focus-within > ul,
	#menu-list li li:hover {
		visibility: visible;
		opacity: 1;
		display: block;
	}

	#menu-list li li a {
	    color: #333;
	    background-color: #ccc;
	    font-size: 1em;
	    padding: 0.2em 0.75em;
	    text-decoration: none;
	    display: block;
	}

	#menu-list li li:hover a {
		background-color: #333;
		color: #eee;
	}
}

/* SPLASHBOX (WELCOME) */

.splashbox {
	display: block;
	width: 100%;
	height: auto;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	margin-bottom: 0.5em;
}

.welcome {
	background-image: url("images/welcome.jpg");
}

.guide {
	background-image: url("images/wide.jpg");
}

.locations {
	background-image: url("images/outside.jpg");
}

.utd {
	background-image: url("images/utd.jpg");
}

.richardson {
	background-image: url("images/employee.jpg");
}

.seventyfive {
	background-image: url("images/closeup.jpg");
}

.recommendations {
	background-image: url("images/reduced.jpg");
}

.contact {
	background-image: url("images/customer.jpg");
}

.splashbox .overlay {
    width: 100%;
    height: 100%;
	background-color: rgba(0,0,0,0.5);
	overflow: hidden;
}

.splashbox .splashbox_text {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 3em;
	line-height: 0.9;
    color: #eee;
    text-align: center;
    padding: 2.5em 1em;
}

/* CONTENT TEXT */

@media only screen and (max-device-width: 480px) {
	.column {
		display: block;
		margin: 0 2em;
	}

	.img {
		width: auto;
	    height: auto;
	    max-height: 400px;
	    overflow: hidden;
	}

	.img img  {
	    left: 0;
	    top: 0;
	    height: 100%;
	    width: 100%;
	    transform: none;
	}
}

@media only screen and (min-device-width: 480px) {
	.flexbox {
		width: 100%;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		margin-top: -1em;
		margin-bottom: 2em;
	}

	.flexbox:last-child {
		margin-bottom: 0;
	}

	.img {
		flex: 0 0 50%;
		overflow: hidden;
	    position: relative;
	}

	/* FOR JUNKY OL INTERNET EXPLORER */
	.img img {
		position: absolute;
	    top: 50%;
	    left: 50%;
	    height: auto;
	    width: auto;
	    min-width: 100%;
	    min-height: 100%;
	    transform: translate(-50%, -50%);
    	padding: 0 1em;
	}

	@supports (object-fit: cover) {
	  .img img  {
	    position: absolute;
	    left: 0;
	    top: 20px;
	    height: 100%;
	    width: 100%;
	    transform: none;
	    object-fit: cover;
    	padding: 0 1em;
	  }
	}

	.txt {
		flex: 0 0 50%;
	}

	.txt p, .txt ul {
    	padding: 0 1em;
	}
}

.textcontainer {
	display: flex;
	justify-content: center;
}

.text {
	max-width: 1280px;
	padding: 0 2em;
	text-align: left;
	font-weight: 400;
}

.text a {
	font-weight: 700;
	color: #e66700;
}

.text a:hover {
	color: #333;
	text-decoration: none;
}

/* TEXT */

.text > p {
	padding: 0 1em;
}

.text h1, h2 {
	color: #e66700;
	font-weight: 700;
	line-height: 0.9;
	text-align: center;
	padding: 0.25em 0;
}

.text h1 {
	font-size: 2.5em; /* equivalent to 24px */
}

.text h2 {
	font-size: 2em; /* equivalent to 18px */
}

/* LISTS */

.text ul {
	font-style: italic;
	text-align: center;
}

.text ul li {
	list-style: none;
	padding-bottom: 1em;
}

.text ul li:last-child {
	padding-bottom: 0;
}

/* TABLE CSS */

table {
	width: 100%;
}

table, th, td {
	border-collapse: collapse;
}

th, td {
	padding: 0.5em 1em;
}

th.status {
	text-align: center;
	padding: 0.25em 0.5em 0em;
}

th.status#womens, th.status#mens, th.status#furniture {
	padding: 0em 0.5em 0.25em;
}

th {
	color: #333;
	background-color: #ddd;
}

td {
	color: black;
	text-align: left;
	vertical-align: top;
	border-width: 0 0 0.1em 0;
	border-color: #333;
	border-style: solid;
}

tr:last-child td {
	border: none;
}

td a {
	color: black;
}

/* locations */

td.name img {
	width: 100%;
	max-width: 100px;
}

td.status {
	vertical-align: middle;
	text-align: center;
}

td.name {
	vertical-align: middle;
	text-align: center;
}

th.status#womens, th.status#mens, th.status#furniture {
	font-size: 13px;
}

/* contact form */

.label {
	width: 6em;
}

.submitbutton {
    margin: 0 42%;
    padding: 0.5em;
}

table input, table textarea {
	width: 100%;
}

form table td {
	padding: 0.25em;
}

/* FOOTER */

footer {
	margin-top: 2em;
	text-align: center;
	font-size: 0.75em;
	font-style: italic;
}