/*
Theme Name: 	Nanobio
Theme URI: 		http://www.design-hub.com
Description: 	Custom
Version: 		1.3
Author: 		Tedly Chesky
Author URI: 	http://www.design-hub.com
Tags: 			starkers, clean, basic
*/

@import "css/typo.css";
@import "css/pipeline.css";
@import "css/forms.css";


html { 
	height: 100%;
}

body {
	height: 100%;
	margin: 0 auto;
 	background: white;
	}
	
header.page {
	position: relative;
		margin-bottom: 1em;
}

.logo-band {
	margin-bottom: 1em;
}

#top-logo {
position: relative;
}

#top-logo img {
width: 90%;
max-width: 360px;
margin-left: -1%;
padding-top: 15px;
}

.tagline {
	display: none;
	font-size: 1.1em;
/* 	font-style: italic; */
	color: #9a9a9a;
}

nav.menuwrapper {
	width: 100%;
	margin: 0;
	padding: 0;
	border-radius: 0;
	z-index: 100;
 	}


.top-band { /* fluid container */
	height: 170px;
    border-top: 1px solid #fdbc07;
    border-bottom: 1px solid #fdbc07;
    
/* 	    ===  comment this out if trouble */

	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;

	align-items: center;
	    justify-content: flex-start;
/* 	    === */

	background: #2e3457;
	display: flex;	
	}

.container-fluid .row { /* applies to top band only */
	width: 100%;
	margin: 0;
	margin: auto;
	height: 170px;
}

.section-triangle-white {
	position: relative;
	top: -1px;
	left: 7%;
	width: 34px;
	display: none; /* hide at small sizes */
}

.nano-droplet {
	display: none;
}

.section-triangle-blue {
	position: absolute;
	bottom: -17px;
	left: 8.1%;
	width: 34px;
	display: none; /* hide at small sizes */
}

 h1.headline {
	 font-size: 2em;
	 color: white;
	margin-top: 1.4em;
	}


/* MENU STUFF ------------------------------------------------------- */

.skip-link {display: none; }

.toggle {
	display: block;
	padding: .8em 0;
}

button.menu-toggle {
	width: 99%;
	font-size: 1.1em;
	font-weight: 500;
	text-align: left;
	text-transform: uppercase;
	color: #999;
	background: none;
	border: none;
	margin-left: 1%;
}

.m-toggle {
	float: right;
	margin-left: 1%;
	margin-bottom: .2em;
	margin-right: 3%;
}

.menuwrapper .container {
	padding: 0;
}

#menu-holder {  
	text-align: left;
	vertical-align: top;
	margin: 0 auto;
	width: 100%;
/* 	border: 1px solid red; */
}

ul#menu-primary-menu {
	margin-bottom: 0;
    background: #2a3e7e;
}

ul#menu-primary-menu li,
ul#menu-footer-menu li   {
	font-size: 1.1em; 
    line-height: 1.8em;
	font-weight: 600;
	letter-spacing: 0.03em;
	border-bottom: 1px solid #c7c7c8;
	
	list-style-position: inherit;
	list-style-type: none;
	margin: 0;
	margin-left: -2.1em;
	padding: .6em 0;
	}

ul#menu-primary-menu a,
 ul#menu-footer-menu a {
	display: block;
	padding: 0 .6em;    
	color: white;
	}
	
ul#menu-primary-menu li.current_page_item a {
	color: white;
}

ul#menu-primary-menu li:hover a,
ul#menu-primary-menu li.current_page_item li a {
	text-decoration: none;
	color: white;
	}

ul#menu-primary-menu li.open {
	background: #444;
	}		

ul#menu-primary-menu li.open a {
	background: #444;
	box-shadow: none;
	}		

ul#menu-primary-menu li.open ul.dropdown-menu {
	display: block;
	position: relative;
	width: 100%;
	background: #444;
	}

ul#menu-primary-menu li.open ul.dropdown-menu li {
	margin-left: 0;
	background: #444;
}

ul#menu-primary-menu li.open ul.dropdown-menu li a{
	background: #444;
	}	
	
.dropdown-menu li {
	display: block;
	width: 100%;
		}
	
.dropdown-menu li:hover,
.dropdown-menu li:hover a{
	background: #555;
	}
	
ul#menu-primary-menu li.active a {
	background: none;
	color: #888;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .active > a {
  background-image: none;
  box-shadow: none;
}


/* PAGE STUFF -------------------------------------------------------*/

section .container {
margin: 0 auto;
}

.intro {
text-align: left;
}

article {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px dotted #999;
}

article:first-child {
	margin-top: 0em;
	border: none;
}

.vacc-intro {
	font-size: 120%;
	margin: 1em 0;
	border-bottom: 1px solid #7f7f7f;
	}

.career-positions {
	border-top: 1px solid #aaa;
}

.panel-title .expando { /* careers page  */
	display: inline-block;
}

.panel {
	 box-shadow: none; /* careers page; override bstrap style */
}

.content p:last-child img {
	margin-top: 1em;
}

img.inline {
	display: inline-block;
	max-width: 220px;
	margin-left: 3%;
}

aside.media {
	margin: 1em 5% 2em 0;
	padding: .1em 1em 1em 1em;
	background: #ebeeff;
}

footer {
	background: #ebedef;
	text-align: left;
	margin: 3em 0 0 0;
	padding: 2em 0 2em 0;
	border-top: 1px solid #2a3e7e;
}

footer nav {
	display: none;
}

.vcard { margin: 1.5em 0; }

footer p.org {
	font-weight: 600;
	margin-bottom: .4em;
} 

footer p.adr  {
	margin: 0 0 -1em 0;
}

footer p {
	line-height: 1.3em;
	margin: 0;
}

.geo {visibility: hidden; height: 1px;} /* machine-readable lat/long  */

footer small {
	font-size: .8em;
	}

/* HOME PAGE  mobile ------------------------------------------*/
header.home  {
	position: relative;
}

.slider {
	position: relative;
	left: 0;
	right: 0;
	z-index: 0;

	margin: 0;
	padding: 0;

	max-height: 465px;
}

.slider .container,
#home-slider,
.carousel-inner  {
	width: 100%;
	padding: 0;
}

.carousel-indicators {
	display: none;  /* hide nav dots when only one slide!! */
}

.carousel-inner > .item {
	transition-property: left;
	transition-duration: 0.6s;
	transition-delay: 0s;
	
	margin: 0 auto;
}

.carousel-inner > .item  img.img-responsive {
	min-height: 250px;
/* 	min-width: 792px; */
}

.carousel-inner > .item:first-of-type img { /* covid art */
	margin: 0 auto;
}

img.nbp-bottle {
	display: block;
	position: absolute;
	z-index: -10;
	
	top: 6vw;
	right: -30%;
	}

.carousel-caption {
	display: block;
	position: absolute;
	text-align: left;
	z-index: 10;
	font-weight: 300;
	line-height: 1.4;
	color: white;
	text-shadow: 0px 2px 6px #242840;
		
	top: 5%;
	left: 50%;
	margin-left: -44%;
	width: 80%;
	font-size: 1em;
}

.carousel-caption h2 {
	color: white;
	margin: -.5em 0 0 0;
	padding: 0;
	border: none;
	}

.carousel-caption .button-container {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	width: 100%;
	align-items: flex-start;
	flex-wrap: wrap;
	}
	
.carousel-caption .button-container a {
	font-size: 80%;
	font-weight: 600;
	color: white;
	background: #a3c75c;  /* green */
	margin-right: 1em;
	padding: .3em .7em;
	text-decoration: none;
	
	margin-bottom: 0.5em;
}

 a.button-orders {
	font-weight: 600;
	color: white;
	background: #a3c75c;  /* green */
	padding: .3em .7em;
	text-decoration: none;

	display: inline-block;
	font-size: 100%;
	text-shadow: 0px 2px 6px #577e31;
	margin: 1em 0;
}

.carousel-caption a:hover,
a.button-orders:hover {
	color: #2a3d7e;
	text-shadow: none;
}

.carousel-caption p.amazon-note {
	margin-top: .5em;
	}
	
/* 768 and up --------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:768px) {
	
	.page-template-default  a.button-orders {
		display: block;
		position: absolute;
		top: 2.5em;
		right: 11%;
	}
	
	.post-template-default  a.button-orders {
		display: block;
	}
	
} /* buttons 768 */


.media-link a {
	font-size: 80%;
	font-weight: 600;
	color: white;
	background: #fdbc07;  /* yellow */
	padding: .3em .5em;
	text-decoration: none;
	text-shadow: 0px 2px 6px #9f8745;
}

.media-link  a:hover {
	color: #2a3d7e;
	text-shadow: none;
}

.home .intro {
	font-size: 1.3em;
	font-weight: 400;
}

.recent-photo {
	display: none;
}

ul.recent-posts {
	width: 98%;
}

ul.recent-posts li {
	position: relative;
	list-style-type: none;
	vertical-align: top;
	margin-left: -2.3em;
	margin-bottom: 1em;
	
	padding-left: 6.4em;
	padding-right: .5em;
	padding-top: 0.3em;
	vertical-align: middle;
	border-top: 1px dotted #aaa;
}

.newsdate, .newshead {
	display: inline-block;
}

.newsdate {
	font-weight: 600;
	color: white;
	background: #fdbc07; /* old yeller */
    background: #2a3e7e;

	padding: .5em  .6em;
	
	width: 5.3em;
	text-align: center;
	
	position: absolute;
	left: 0;
	top: -.03em;
}

.newshead {
min-height: 3em;
}

.btn-contact {
background:  #829d83;
}

.btn-contact:hover {
background:  #517c52;
}

.btn-contact:active {
	background: #333;
}

.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus
{
  outline: none;
}

.podcast h3 {
	margin-bottom: .8em;
}

.podcast {
	position: relative;
}

.pod-content {
	position: relative;
	display: block;
	margin-top: .8em;
	padding-bottom: .7em;
}

.pod-content .alignleft {
	position: relative;
	top: .2em;
}

.pod-content p {
	font-size: 90%;
}

.pod-audio {
	position: relative;
}

.mejs-controls {
	position: relative !important;
}






/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* 480 and up --------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:480px) {

.logo-band {
	margin-bottom: .2em;
}

#top-logo img {
max-width: 330px;
}

.carousel-inner > .item:first-of-type img {
	margin-left: auto;
	margin-right: 0%;
}

.carousel-caption {
	top: 5%;
	left: 50%;
	margin-left: -44%;
	width: 75%;
}

img.nbp-bottle {
	top: 3vw;
	right: -35%;
	}
	
	
} /* end 480 */

/* 600 and up *--------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:600px) {

header.page {
	margin-bottom: 2em;
}

#top-logo {
display: inline-block;
position: relative;
top: 0;
}

#top-logo img {
max-width: 350px;
}

.tagline {
	position: relative;
	margin-top: 70px;
}

#menu-holder {  
	width: 100%;
}

img.far-right {
	float: right;
	margin: 0 5% 1em 4%;
}



/* HOME STUFF  600+------------------------------------ */

.carousel-inner > .item img {
	margin-left: 0%;
}

.carousel-inner > .item:first-of-type img {
	margin-left: 0%;
}

.carousel-caption {
	top: 12%;
	left: 50%;
	margin-left: -44%;
	width: 75%;
	font-size: 1.2em;
}


img.nbp-bottle {
	top: -5vw;
	right: -35%;
	}
	
	
.carousel-caption .button-container {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	width: 100%;
	}
	
} /* end 600 */

/* 668 and up *--------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:668px) {

} /* end 668 */

/* 710 and up *--------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:710px) {

} /* end 668 */


/* 768 and up *--------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:768px) {
	
header.page {
/* 	max-height: 380px; 
		height: 210px;
	height: 38vw;
*/
}
	
.tagline {
	display: block;
	float: right;
}

.container-fluid .row {
/* 	margin: 0 auto;  */
	width: 750px;
}

.section-triangle-white {
	display: block;
}

.nano-droplet {
	display: block;
	position: absolute;
	top: 25px;
	right: 4%;
	max-height: 120px;
}

.section-triangle-blue {
	display: block;
	}

.toggle {
	display: none;
}

.menuwrapper,
.navbar,
.navbar-default  {  
	text-align: right;
	box-shadow: none;
	background: none;
}

#menu-holder {  
display: block;
margin: 0 0;
}

ul#menu-primary-menu  {
	margin: 0 0;
	padding-left: 0;
	text-align: right;


	background: none;
}

ul#menu-footer-menu  {
	margin: 0 0;
	padding-left: 0;
	text-align: left;
	background: none;
}

ul#menu-primary-menu  a,
ul#menu-footer-menu a {	
	color: #293e7d;
}

ul#menu-primary-menu li,
ul#menu-footer-menu li {
	display: inline-block;
	font-size: .9em;
    line-height:1.2em;	
    margin: 0 .3% 0 0;
	padding-left: 0;
	border-bottom: none;
	
			text-align: center; /* 103118 */

}

/*
.mline {
	display: inline-block;
	}
*/

		ul#menu-primary-menu li {
			max-width: 24%;
/* 			background: #fea; */
		}

		ul#menu-primary-menu li ul li {/*  fixes dropdown widths */
			max-width: 100%;
		}



ul#menu-primary-menu li:first-of-type a,
ul#menu-footer-menu  li:first-of-type a  {
  padding-left: 0;
}

ul#menu-primary-menu li:hover a,
ul#menu-primary-menu li.current_page_item li a {
	color: #293e7d;  /* dark blue */
	}

ul#menu-primary-menu li   {
		text-align: center; /* 103118 */
	}
		
ul#menu-primary-menu li  ul {
	display: none;
	}

ul#menu-primary-menu li  ul li {
	text-align: left; /* 103118 */
    padding: .3em .5em .3em 0;
    }
		
ul#menu-primary-menu li:hover ul { /* main  outer yellow dropdown menu block */
	display: block;
	position: absolute;
	top: 2.3em;
	background: #fdbc07;  /* yellow */
	left: 0;
	border: none;
	}

ul#menu-primary-menu li.menu-item-object-custom ul {
	position: relative;
	margin-bottom: 2em;
/* 	background: transparent; */    /* turn this on later! */
}


ul#menu-primary-menu ul.dropdown-menu li a {
  padding: 0.3em 0 0 .6em;
  	font-weight: 600;
	color: #293e7d;  /* dark blue */
}

ul#menu-primary-menu ul.dropdown-menu li:hover,  
ul#menu-primary-menu ul.dropdown-menu li:hover a {
	background: #293e7d; /* dark blue */
}

ul#menu-primary-menu ul.dropdown-menu li:hover a {
	color: white;
}

ul#menu-primary-menu li.open,ul#menu-primary-menu li.open a {
	background: #fff;
	}		
	
ul#menu-primary-menu li.open ul.dropdown-menu {
	display: none;
	position: relative;
	width: 100%;
	}



img.far-right {
	margin: 0 .4em 1em 2em;
}

.content img.alignnone {  /* maybe temporary!!  keeps graphs from getting too big */
	max-width: 768px;
}

.panel-title .expando { /* careers page  */
	display: inline-block;
}

footer .menuwrapper,
footer .navbar,
footer .navbar-default  {  
	text-align: left;
}

footer small {
	line-height: 1.4;
}

/* HOME PAGE  768+ ------------------------------------------*/

.slider {
	top: 0;
	}

.carousel-caption {
	top: 20%;
	left: 53%;
	margin-left: -39%;
	font-size: 1.4em;
	
	top: 10%;
	width: 70%;
	margin-left: -44%;
}

img.nbp-bottle {
	top: -5vw;
	right: -40%;
	height: 32vw;
	width: auto;
	}	
	
.carousel-caption p {
	font-weight: 400;
}

.carousel-caption p.amazon-note {
	margin-top: .25em;
	}



.home .intro .col-sm-4 {
margin-bottom: 30px;
padding: .3em 20px;
}

.home .intro img {
max-width: 150px;
}

.recent-photo {
	display: block;
	float: right;
	max-width: 30%;
}

ul.recent-posts {
	width: 67%;  /* 768 */
}

.newshead {
/* 	width: 84%; *//* 768 */
}



} /* end 768 */


/* 900 and up *--------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:900px) {
	
	.carousel-caption {
		top: 19%;
		left: 50%;
		margin-left: -38%;
		width: 70%;
		}
		
img.nbp-bottle {
	top: -6vw;
	right: -33%;
	height: 28vw;
	}	
	.carousel-caption p.amazon-note {
		margin-top: .5em;
		}
	
	}
	
	
/* 992 and up *--------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:992px) {

#top-logo img {
margin-left: -2%;
}

header.page {
	position: relative;
/*
	height: 210px;
	height: 38vw;
*/
		margin-bottom: 2em;
}

.container-fluid .row {
width: 970px;
}
	
 h1.headline {	
	 font-size: 2.3em;
	margin-top: 1.1em;
	}

.content p,
.content ul,
.content ol,
.content h3,
.content h4,
footer small {
	width: 90%;
}

.vacc-intro  p {
	width: 100%;
	}

.page-id-40 p,
.page-id-40 ul {
	width: 100%;
	padding-right: 32%;
}

.page-id-40 .logo-band p {
	padding-right: 0%;
}


/* floats NIH logo to right on strategic alliances page */
/*
.page-id-40 h2+p:first-of-type {
	float: right;
	width: 28%;
	padding-right: 0%;
}
*/

.page-id-40 img.alliance-logo { /* floats  logos to right on strategic alliances page */
	position: absolute;
	right: 0;
	width: 28%;
	padding-right: 0%;
}


  
.page-id-40 img.far-right {
	float: none;
	max-width: 87%;
}

.single .content p {
	width: 75%;
}

aside.media {
	position: absolute;
	top: 11em;
	right: 2%;
	width: 20%;
	margin: 0;
	z-index: -2;
}

.postid-984 aside.button {
	position: absolute;
	top: 8em;
	right: 2%;
	width: 20%;
	margin: 0;
	z-index: 12;
}

.postid-984 aside.media {
	position: absolute;
	top: 12em;
	right: 2%;
	width: 20%;
	margin: 0;
	z-index: -2;
}

footer nav {
	display: block;
}

footer small {
	display: block;
	}

/* HOME PAGE  992+ ------------------------------------------*/

.slider .container,
#home-slider,
.carousel-inner  {
	width: 106%;
	margin-left: -3%;
}

.carousel-inner img {
	margin: 0 auto;
}

.carousel-caption {
	top: 23%;
	left: 50%;
	margin-left: -37%;
	width: 63%;
	font-size: 1.7em;
	font-weight: 700;
}

		
img.nbp-bottle {
	top: -6vw;
	right: -30%;
	width: auto;
	}	
	
.carousel-caption:first-of-type {
		width: 63%;
}

.podcast {
	margin-bottom: 2em;
}

.pod-audio {
	position: absolute;
	width: 80%;
	bottom: -2em;
	left: 150px;
}


} /* end 992 */


/* 1200 and up --------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1200px) {

.container-fluid .row {
	width: 1170px;
}

.vacc-intro  p {
	width: 100%;
	}

.page-id-40 p {
	width: 100%;
	padding-right: 32%;
}

.page-id-40 .logo-band p {
	padding-right: 0%;
}

.slider .container,
#home-slider,
.carousel-inner  {
	width: 100%;
	margin: 0 auto;
}

.carousel-caption {
	left: 50%;
	margin-left: -43%;
	width: 70%;
	font-size: 1.7em;
}

img.nbp-bottle {
	top: -7vw;
	right: -48%;
	height: 28vw;
	max-height: 440px;
	width: auto;
	}	
	
.pod-audio {
	width: 80%;
	left: 160px;
	bottom: -1.9em;
}


} /* end 1200 */

/* 1320 and up --------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1320px) {

.carousel-caption {
	margin-left: -36%;
	max-width: 900px;
	}
	
	
}


@media screen and (min-width:1750px) {
	
	.carousel-inner > .item img,
	.carousel-inner > .item:first-of-type img {
		margin: 0 auto;
		}
}