@import url("//hello.myfonts.net/count/3fd6d5");
  
@font-face {
  font-family: "PancettaPro-Bold";
  src: url('../webFonts/PancettaProBold/font.woff2') format('woff2'), url('webFonts/PancettaProBold/font.woff') format('woff');
}
@font-face {
  font-family: "PancettaPro-Light";
  src: url('../webFonts/PancettaProLight/font.woff2') format('woff2'), url('webFonts/PancettaProLight/font.woff') format('woff');
}

body {
	margin:0;
	padding:0;
	background:#fdfdfc;
	font-size:100%;
	font-family: "PancettaPro-Light";
	}
	
nav { background:#fdfdfc; border-bottom:1px solid #959191; padding:0; min-height:147px;}
	nav a { color:#000; text-transform:uppercase;  font-family: "PancettaPro-Light"; font-weight:800; }
	.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color:#a77eb0; }
	.navbar-light .navbar-nav .nav-link { color:#000; }
	.navbar {
   		position: relative;
   		padding:0;
		}
	.navbar-brand {
   		position: absolute;
    	left: 50%;
    	margin-left: -100px !important;  /* 50% of your logo width */
    	display: block;
		}
		nav .sidenav {
			display:block;
			min-height:147px;
			padding:6% 15px;
			border-left:1px solid #959191;
			border-right:1px solid #959191;
			text-decoration:none;
			}
			nav a.sidenav:hover { color:#a77eb0; }
			
form { padding:50px; }
legend { font-family: "PancettaPro-Bold"; font-size:130%; text-align:center; }
label { display:block; width:100%; margin-top:15px; }
input, textarea { padding:10px; width:100%; border:0; }
input[type="submit"], a.portal {
	display:block;
	width:200px;
	margin:25px auto;
	background:#a77eb0;
	color:#fff;
	font-family: "PancettaPro-Bold";
	font-size:125%;
	border:1px solid #000;
	}
	a.portal:hover {
		background:#8ec7e2;
	}
	
.orange { color:#f99d1c; }
.purple { color:#a77eb0; }
.blue { color:#8ec7e2; }
.orangebkg { background:#f99d1c; }
.purplebkg { background:#a77eb0; }
.lightpurplebkg { background:#eddef0; }
.bluebkg { background:#8ec7e2; }
.left { text-align:left; }
.right { text-align:right; }
.center { text-align:center; }
.bordered { border-right:1px solid #959191; padding:15px; }
.bordered + .col-12 { padding:15px; }
.plus130 { font-size:130%; padding:25px 0; }

h1 { font-family: "PancettaPro-Bold"; text-align:center; }
	header.interior h1 { font-size:4.5rem; }
h2 { font-size:3.25rem; }
	h2.accordion-header { font-family: "PancettaPro-Bold"; padding:15px 0; }
	h2.accordion-header span {
		display:block;
		font-family: "PancettaPro-Light";
		text-transform:uppercase;
		font-size:80%;
		padding:5px 0 0 25px;
		}
h3 { font-family: "PancettaPro-Bold"; font-size:1.75rem; margin:75px 0 50px 0; }
h4 { font-family: "PancettaPro-Bold"; font-size:130%; text-align:center; }

.home .row { padding:50px 0; }
.btn.orangebkg { border-color:#f99d1c; }
.btn.purplebkg { border-color:#a77eb0; }
.btn.bluebkg { border-color:#8ec7e2; }
.btn.orangebkg:hover { background:#a77be0; border-color:#a77be0; }
.btn.purplebkg:hover { background:#f99d1c; border-color:#f99d1c; }
.btn.bluebkg:hover { background:#a77eb0; border-color:#a77eb0; }

header {
	position:relative;
	display:block;
	min-height:650px;
	background-image:url(../images/bkg-header.jpg);
	background-size:cover;
	background-position:center center;
	border-bottom:1px solid #959191;
	}
	header span {
		display:block;
		position:absolute;
		bottom:50px;
		max-width:60%;
		padding:30px 50px 30px 10%;
		background:#8ec7e2;
		font-size:2rem;
		line-height:2rem;
		}
	header.interior { display:flex; min-height:315px; background-image:url(../images/header-services.jpg); margin-bottom:75px; }
	header.interior.about { background-image:url(../images/header-about.jpg); }
	header.interior.contact { background-image:url(../images/header-contact.jpg); }
	header.interior.portal { background-image:url(../images/header-portal.jpg); }
	header.interior .col-12 { background:#fff; font-family: "PancettaPro-Bold"; text-align:center; font-size:1.5rem; padding:10px 0; }

.orangestripe { background:#f8e4c9; padding:40px 0; }
.rowheader { font-family: "PancettaPro-Bold";  padding:15px; margin-bottom:20px; font-size:1.25rem; line-height:1.25rem; }

.accordion-button { font-size:1.25rem; }
.accordion-button::after { display:none; }
.accordion-button::before {
		flex-shrink:0;
		width:1.25rem;
		height:1.25rem;
		margin-right:25px;
		content: "";
		background-image: url(../images/arrow-down.png);
		background-repeat:no-repeat;
		background-size:1.25rem;
		transition:transform .2s ease-in-out;
	}
	.accordion-button:not(.collapsed) { color:#000; background-color:#fff; box-shadow:none; }
	.accordion-body { background:#f8d4a2; padding:50px 10%; }
		.accordion-body a { color:#a77eb0; }
			.accordion-body a:hover { color:#8ec7e2; }
		.accordion-body ul { list-style:none; margin:25px 2%; }
			.accordion-body ul li { padding:10px 0; }

.bottom-banner {
	margin-top:15px;
	padding:100px 0;
	background-image:url(../images/bkg-callout.jpg);
	background-size:cover;
	background-position:center center;
	text-align:center;
	}
	.bottom-banner img { margin-left:15px; }
	.bottom-banner a { font-family: "PancettaPro-Bold"; color:#000; font-size:2rem; text-decoration:none; }
	.bottom-banner a:hover { color:#f99d1c; text-decoration:none; }

footer { padding:50px 0; }
footer img { margin-top:20px; }
footer ul { list-style:none; margin:0; padding:0; text-align:right; font-family: "PancettaPro-Light";  font-weight:800; }
	footer ul a { display:block; color:#000; text-transform:uppercase; padding:3px 0; text-decoration:none; }
		footer ul a:hover { color:#a77eb0; text-decoration:none; }
		
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.login a { display:block; color:#a77eb0; padding:10px 0; font-weight:600; text-decoration:none; }
	.login a i { padding-right:10px; }
	.login .col-4 { text-align:center; }
	
.testdirectory input {
	border:1px solid #ccc;
	width:39%;
	margin:25px 5%;
	}
	
.btn-primary:hover { background-color:#8ec7e2; border-color:#8ec7e2; }

table.supply th { background:#a77eb0; font-family:"PancettaPro-Bold"; text-transform:uppercase; padding:10px; letter-spacing:0.05em; margin-top:25px; }
table.supply td { padding:10px; }
table.supply tr:nth-child(odd) {
      background: #eee;
    }

@media(max-width:990px) {
	nav .sidenav {
		display:block;
		width:100%;
		min-height:auto;
		padding:15px;
		border-top:1px solid #000;
		margin-top:15px;
		}
	.navbar-brand { position:static; left:auto; margin-left:0 !important; }
	header span {
		max-width:100%;
		padding:30px 50px;
		}
	.right { text-align:left; }
}

@media(min-width:1024px) {
	tbody { font-size:88%; }
		tbody ul, tbody ol { padding:0; margin:0; }
	td:nth-of-type(5) { width:8%; }
	td:nth-of-type(6) { width:8%; }
	td:nth-of-type(9) { width:8%; }
	td:nth-of-type(10) { width:8%; }
	td:nth-of-type(11) { width:8%; }
}

/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    tr {
      margin: 0 0 1rem 0;
    }
      
    tr:nth-child(odd) {
      background: #ccc;
    }
    
		td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%!important;
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		td:nth-of-type(1):before { content: "Test Name"; }
		td:nth-of-type(2):before { content: "Test Code"; }
		td:nth-of-type(3):before { content: "Synonym(s)"; }
		td:nth-of-type(4):before { content: "Specimen Required"; }
		td:nth-of-type(5):before { content: "Useful For"; }
		td:nth-of-type(6):before { content: "Tests Included in Panel"; }
		td:nth-of-type(7):before { content: "Stability"; }
		td:nth-of-type(8):before { content: "Rejection Due To"; }
		td:nth-of-type(9):before { content: "Minimum Volume"; }
		td:nth-of-type(10):before { content: "Specimen Collection \a Instructions"; white-space: pre; }
		td:nth-of-type(11):before { content: "Reference Range"; }
		td:nth-of-type(12):before { content: "CPT Code"; }
		td:nth-of-type(13):before { content: "LOINC Code"; }
	}