/*Cody edits*/
div#TEI {
	clear: both;
		margin-left: auto;
		margin-right: auto;
		padding-left: 1em;
		padding-right: 1em;
		-webkit-animation: intro 0.3s both;
		animation: intro 0.3s both;
		max-width: 100%;
		-webkit-animation-delay: 0.15s;
		animation-delay: 0.15s;
		}

		/* .page__content p,.page__content li,.page__content dl {
			font-size:.8em
		} */

	/* Hide scrollbar for Chrome, Safari and Opera */
	.sidebar.sticky::-webkit-scrollbar {
	  display: none;
	}

	/* Hide scrollbar for IE, Edge and Firefox */
	.sidebar.sticky {
	  -ms-overflow-style: none;  /* IE and Edge */
	  scrollbar-width: none;  /* Firefox */
	}
	h4.nav__title{
	  display:none;
	}

	img.thumb{
		/* max-width: 75px; */
		height: auto;
		vertical-align: middle;
		border: 3px solid black;
	}

    /*  these styles are for handling the inventory pages in the apothecary section
     *  The thumbnail navigation at the top is a flex-box so that we can include a bit of text
     *  under the thumbnail image.
     *  how do we handle the side by send image and text? Tried flex but it didn't work well so later.
	    */

	div.thumb-nav {
	    display: flex;
	    flex-flow: row wrap;
	}

	span.thumb-nav-p {
	    width: 10%;
		height: auto;
		vertical-align: middle;
		/*border: 3px solid black;*/
		margin : 3px;
	}

	img.thumb-menu {
		/*width: 10%;*/
		height: auto;
		vertical-align: middle;
		border: 3px solid black;
	}

	div.side-by-side {
	     display: flex;
	    flex-flow: row wrap;
	}


    table.inventory {
  	 max-width: 35%!important;
	  /* clear: none!important;*/
	   font-size: .6em !important;
    }

    table.inventory  td {
        padding: 0;
    }

    p.inventory-image-float {
        max-width: 60%;
        /*float: left;*/
        margin-right: 5%;
        vertical-align: middle;
    }

    /*  End section for inventory display */

	img.img-ctr {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	img.img-left {
		margin-right: 1em;
	  }
	img.img-right {
		margin-left: 1em;
	  }
	#page-title {display:none;}
	.top-flex {
		display: flex;
		justify-content: center;
		align-items: center;
		/* border: 1px solid blue; */
	}

	.flex-child {
		flex: 1 0 50%;
		padding-bottom: 1em
		/* border: 2px solid yellow; */
	}

	.flex-child:first-child {
		padding-right: 1em;
		text-align: right;
	}

	.top-flex img#img1 {
		width: 35%;
		padding-right: .125em;
	}
	.top-flex img#img2 {
		width: 35%;
		padding-left: .125em;
	}
	h2.top-name {
		font-weight: normal;
		margin: 0;
	}
	h3.top-name {
	    font-weight: bold;
		margin: 0;
	}
	/* #main {
		max-width: 80%;
	} */
	/* #main article {
		width: calc(100%-500px);
		padding-right: 0;
	} */
	hr.horizline {
		display: block;
		margin: auto;
		border-top: thick double aqua;
		width: 80%;
		}
	/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

	/* CSS */

  }

  /*
	##Device = Laptops, Desktops
	##Screen = B/w 1025px to 1280px
  */

  @media (min-width: 1025px) and (max-width: 1280px) {
	.top-flex img#img1 {
		width: 50%;
		height: auto;
		padding-right: .125em;
	}
	.top-flex img#img2 {
		width: 50%;
		height: auto;
		padding-left: .125em;
	}
  }

  /*
	##Device = Tablets, Ipads (portrait)
	##Screen = B/w 768px to 1024px
  */

  @media (min-width: 768px) and (max-width: 1024px) {

	/* CSS */

  }

  /*
	##Device = Tablets, Ipads (landscape)
	##Screen = B/w 768px to 1024px
  */

  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

	/* CSS */

  }

  /*
	##Device = Low Resolution Tablets, Mobiles (Landscape)
	##Screen = B/w 481px to 767px
  */

  @media (min-width: 481px) and (max-width: 767px) {
	.top-flex img#img1 {
		width: 45%;
		height: auto;
		padding-right: .125em;
	}
	.top-flex img#img2 {
		width: 45%;
		height: auto;
		padding-left: .125em;
	}

  }

  /*
	##Device = Most of the Smartphones Mobiles (Portrait)
	##Screen = B/w 320px to 479px
  */

  @media (min-width: 320px) and (max-width: 480px) {
	h3{
		font-size:.8em;
	}
	.top-flex img#img1 {
		width: 45%;
		height: auto;
		padding-right: .125em;
	}
	.top-flex img#img2 {
		width: 45%;
		height: auto;
		padding-left: .125em;
	}
  }

  @font-face {
	font-family: "BodoniOrnaments";
	src: url("https://emylonas.github.io/xml-minimal/assets/fonts/bodoni_ornaments.woff2") format("woff2");
	font-style: normal;
	font-weight: normal;
	}
div.ornament {
	font-family: BodoniOrnaments;
	text-align: center;
}
.row{
display: flex;
}
.colmn{
	width:45%;
	padding:5px;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
	.colmn {
	  width: 100%;
	}
  }
	/* .page.h-entry {
		width: 100%;
		padding-right: 0;
	}
	.page {
		@include breakpoint($large) { float: right;
		width: 100%;
		padding-right: 0;
		@include breakpoint($x-large) { width: 100%;
		padding-right: 0;
	}
	.page__inner-wrap {
		float: left;
		margin-top: 1em;
		margin-left: 0em;
		margin-right: 0;
		width: 100%;
		clear: both;
		.page__content, .page__meta, .page__share { position: relative;
		float: left;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		clear: both;
	}
	} */
	/* .top-flex a img {
		  width: 25%;
		  height: 25%;
		  height: 230px;
	    width: 50%;
		float: left;
		text-align: center;
		margin: auto;
		display: inline-block;
			max-height: 100%;
		max-width: 100%;
			position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}*/

	/* .top-flex a img#img1 {
		border: 1px solid blue;
		padding-right: 2px;
	} */
	/* a #img2 {
		border: 1px solid blue;
		padding-right: 2px;
	} */
		/* .top-flex a {
		margin-top: 0;
		margin-bottom: 0;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
	} */