@charset "UTF-8";
body {
  margin: 0;
  padding: 0;
  font-size: 16px; /* base font size, all other type percentages go off this one*/
}
/* Webfont: Lato-Light */
@font-face {
  font-family: "LatoWebLight";
  src: url("fonts/Lato-Light.eot"); /* IE9 Compat Modes */
  src: url("fonts/Lato-Light.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("fonts/Lato-Light.woff2") format("woff2"),
    /* Modern Browsers */ url("fonts/Lato-Light.woff") format("woff"),
    /* Modern Browsers */ url("fonts/Lato-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "droid_sansregular";
  src: url("DroidSans-webfont.eot");
  src: url("DroidSans-webfont.eot?#iefix") format("embedded-opentype"),
    url("DroidSans-webfont.woff") format("woff"),
    url("DroidSans-webfont.ttf") format("truetype"),
    url("DroidSans-webfont.svg#droid_sansregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "droid_sansbold";
  src: url("DroidSans-Bold-webfont.eot");
  src: url("DroidSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),
    url("DroidSans-Bold-webfont.woff") format("woff"),
    url("DroidSans-Bold-webfont.ttf") format("truetype"),
    url("DroidSans-Bold-webfont.svg#droid_sansbold") format("svg");
  font-weight: normal;
  font-style: normal;
}
img {
  border-style: none;
}
p {
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 93%;
  line-height: 155%;
  color: #555555;
  text-align: justify;
}
p.alignleft {
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 93%;
  line-height: 130%;
  color: #555555;
  text-align: left;
}
p.alumni {
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 93%;
  line-height: 135%;
  color: #555555;
  text-align: left;
  margin: 0;
  padding-bottom: 8px;
}
p.caption {
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 88%;
  line-height: 140%;
  color: #4d6574;
  text-align: left;
}
p.notoppadding {
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 93%;
  line-height: 155%;
  color: #555555;
  text-align: justify;
  margin-top: 0;
}
p a:link,
p a:visited {
  color: #415d6d;
  text-decoration: none;
}
p a:hover,
p a:active {
  color: #415d6d;
  text-decoration: underline;
}
h1 {
  font-family: "droid_sansregular", Arial, sans-serif;
  color: #4d6574;
  font-size: 128%;
  line-height: 155%;
  font-weight: normal;
  text-align: center;
  margin: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
}
h2 {
  font-family: "droid_sansregular", Arial, sans-serif;
  color: #415d6d;
  font-size: 140%;
  line-height: 160%;
  font-weight: normal;
  margin: 0px;
  padding: 0px;
}
h2.vpv {
  font-family: "droid_sansregular", Arial, sans-serif;
  color: #415d6d;
  font-size: 140%;
  line-height: 120%;
  font-weight: normal;
  margin: 0px;
  padding: 0px;
}
h3 {
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 115%;
  line-height: 130%;
  text-align: left;
  color: #777777;
  font-weight: normal;
  margin: 0px;
  padding-top: 16px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 0px;
}
h4 {
  margin: 0px;
  padding: 0px;
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 18px;
  line-height: 22px;
  font-weight: normal;
  color: #415d6d;
}
h5 {
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 15px;
  font-weight: normal;
  color: #415d6d;
  padding-top: 15px;
  padding-bottom: 10px;
  line-height: 22px;
  margin: 0px;
}
h6 {
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 108%;
  color: #415d6d;
  font-weight: normal;
  line-height: 120%;
  margin: 10px 0 15px 0;
}
/* WEBSITE WRAPPER DIVS --------------------------------------------------------- */
#centerwrap {
  background-color: #fff;
  height: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 2%; /* adds white border between site and viewport*/
}
#innerwrap {
  background-color: #f6f5f8;
  width: 94%;
  background-image: url(assets/images/top_tint.png),
    url(assets/images/btm_tint.png);
  background-repeat: repeat-x, repeat-x;
  background-position: top, bottom;
  padding: 3% 3% 0.6%; /* 32px/1200px adds padding inside the grey box of the site */
}
/* HEADER SECTION --------------------------------------------------------- */
#header {
  width: 100%;
}
#crown {
  height: 44px;
  width: 100%;
  padding-top: 8px;
  display: block;
}
#crown img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#dept_name {
  padding-top: 25px;
  width: 100%;
}
h1.labtitle {
  font-family: "LatoWebLight", Arial, sans-serif;
  color: #666;
  font-size: 124%;
  line-height: 140%;
  font-weight: normal;
  text-align: center;
  margin: 0;
  padding: 0;
  letter-spacing: 0.13em;
}
.lighter {
  color: #b2b2b2; /* for "Columbia University" text in lab title */
}
/* DESKTOP NAVIGATION ------------------------------------------------------------------- */
#navbox {
  height: 45px;
  width: 100%;
  border-top: thin solid #bbbbbb;
  border-bottom: thin solid #bbbbbb;
  margin: 35px 0 0 0;
  z-index: 40;
}
#nav {
  font-family: "droid_sansregular", sans-serif;
  font-size: 96%;
  font-weight: 400;
  margin-left: 2.75%;
  margin-right: 2.75%;
}
#nav > a {
  display: none; /* hidden for desktop, for the mobile nav—for link directly inside #nav (Menu and Hide Menu) */
}
#nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
#nav li {
  position: relative;
}
#people-dropdown {
  z-index: 99999999999 !important;
}
#nav li a {
  color: #555555;
  display: block;
  text-decoration: none;
}
#nav li a:hover,
#nav li a#current {
  color: #415d6d;
}
#nav li a:active {
  background-color: #f6f5f8 !important;
}

/* first level------------------- */
#nav > ul {
  /* ">" symbol is for ul directly inside the #nav rather than further nested */
  height: 46px; /* one px extra accounts for pinline border, drops sub-nav below it */
}
#nav > ul > li {
  /* applies to mobile nav as well */
  width: 12.5%;
  height: 100%;
  float: left;
}
#nav > ul > li > a {
  /* applies to mobile nav as well */
  height: 100%;
  font-size: 100%; /* 100% = 16px */
  line-height: 3em;
  text-align: center;
}
#nav > ul > li:hover > a,
#nav > ul:not(:hover) > li.active > a {
  color: #415d6d;
}
/* second level -------------------- */
#nav li ul {
  font-family: "droid_sansregular", sans-serif;
  background-color: #e4e4e4;
  display: none; /* keeps the sub-nav hidden until rollover */
  position: absolute;
  top: 100%;
  width: 265px;
  text-align: left;
}
#nav li:hover ul {
  display: block;
  margin-left: 10%; /* aligns the drop-down underneath main li */
  z-index: 40;
}
#nav li:not(:first-child):hover ul {
  left: -1px;
}
#nav li ul a {
  font-size: 95%;
  padding: 10px 20px 10px;
}
#nav li ul li a:hover,
#nav li ul:not(:hover) li.active a {
  background-color: #d8d8d8;
}
/* HOME PAGE --------------------------------------------------------- */
#homegrid {
  width: 100%;
  margin: 0 auto;
  border: 6px solid #ffffff;
  -webkit-box-sizing: border-box; /* puts the white border inside the div */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0px 1px 5px 6px #e0e0e0; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 0px 1px 5px 6px #e0e0e0; /* Firefox 3.5 - 3.6 */
  box-shadow: 0px 1px 5px 6px #e0e0e0; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  /* [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color] */
}
#homegrid img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
#homeinfo {
  height: 100%;
  width: 100%;
  text-align: center;
  margin-top: 25px;
  margin-bottom: 15px;
  padding-bottom: 13px;
  padding-top: 8px;
}
#hometext {
  width: 48%;
  height: 360px; /* 380px - 25px top padding */
  float: left;
  clear: both;
  background-color: #e4e4e4;
  border: 1px solid #dddddd;
  text-align: center;
  padding: 25px 4% 0; /* top left/right bottom*/
}
p.home {
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 101%;
  line-height: 165%;
  color: #696969;
  text-align: justify;
}
#learnmore {
  margin: 30px 0 10px; /* top left/right bottom*/
}
#homeinfo a:link,
#homeinfo a:visited {
  color: #ffffff;
  background-color: #415d6d;
  padding: 8px 15px;
  text-align: center;
  text-decoration: none;
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 104%;
}
#homeinfo a:hover,
#homeinfo a:active {
  color: #fff;
  background-color: #555;
}
#twtimeline {
  width: 42%;
  background-color: #e4e4e4;
  border: 1px solid #dddddd;
  /* height: 385px; */
  height: 100%;
  float: right;
}
#twfeed {
  /* height: 313px; */
  overflow: hidden;
  padding-top: 10px;
  padding-right: 2%;
  padding-left: 2%;
  padding-bottom: 10px; /* top left/right bottom*/
}
h3.newsevents {
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 115%;
  line-height: 130%;
  text-align: left;
  color: #777777;
  background-color: #d8d8d8;
  font-weight: normal;
  margin: 0px;
  padding: 10px 0 10px 20px;
}
/* MAIN PAGES CONTAINER DIVS--------------------------------------------------------- */
#main {
  height: 100%;
  width: 100%;
  padding: 55px 0 30px;
  margin: 0;
  border-bottom: thin solid #aaaaaa;
}
#main ul,
#main ol {
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 95%;
  line-height: 125%;
  color: #555555;
}
#bodytwocol {
  height: 100%;
  width: 95%;
  margin: 0 auto;
}
#bodysinglecol {
  height: 100%;
  width: 80%;
  margin: 0 auto;
}
#bodysinglecol img {
  max-width: 100%;
  height: auto;
  padding-top: 10px;
}
#bodysinglecol a:link,
#bodysinglecol a:visited {
  font-family: "droid_sansbold", Helvetica, sans-serif;
  color: #415d6d;
  text-decoration: none;
}
#bodysinglecol a:hover,
#bodysinglecol a:active {
  font-family: "droid_sansbold", Helvetica, sans-serif;
  color: #415d6d;
  text-decoration: underline;
}

/* RESEARCH PAGES HEADER LINKS  -------------------------------------------------------------------------- */
#researchgridbox {
  height: 100%;
  width: 100%;
  background-color: #eeeeee;
  -webkit-box-shadow: 0px 1px 5px 6px #e0e0e0; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: 0px 1px 5px 6px #e0e0e0; /* Firefox 3.5 - 3.6 */
  box-shadow: 0px 0px 5px 6px #e0e0e0; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  /* [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color] */
  margin-bottom: 35px;
}

#neuro,
#social,
#invis,
#power,
#methods {
  height: 140px;
  float: left;
  width: 20%;
  -webkit-box-sizing: border-box; /* puts the white border inside the div */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#neuro {
  border-color: #ffffff;
  border-style: solid;
  border-width: 6px 6px 6px 6px; /* top right bottom left */
  background-image: url(assets/images/neurons-blue-360x140.jpg);
  background-repeat: no-repeat;
  background-position: center;
}
#social {
  border-color: #ffffff;
  border-style: solid;
  border-width: 6px 6px 6px 0; /* top right bottom left */
  background-image: url(assets/images/hands-360x150.jpg);
  background-repeat: no-repeat;
  background-position: center;
}
#invis {
  border-color: #ffffff;
  border-style: solid;
  border-width: 6px 6px 6px 0; /* top right bottom left */
  background-image: url(assets/images/people-360x150.jpg);
  background-repeat: no-repeat;
  background-position: center;
}
#power {
  border-color: #ffffff;
  border-style: solid;
  border-width: 6px 6px 6px 0; /* top right bottom left */
  background-image: url(assets/images/city-360x150.jpg);
  background-repeat: no-repeat;
  background-position: center;
}
#methods {
  border-color: #ffffff;
  border-style: solid;
  border-width: 6px 6px 6px 0; /* top right bottom left */
  background-image: url(assets/images/methods-360x150.jpg);
  background-repeat: no-repeat;
  background-position: center;
}

#neuro a:link,
#neuro a:visited,
#social a:link,
#social a:visited,
#invis a:link,
#invis a:visited,
#power a:link,
#power a:visited,
#methods a:link,
#methods a:visited {
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 95%;
  color: #ffffff;
  text-decoration: none;
  line-height: 18px;
  text-align: left;
  height: 45px;
  width: 90%;
  background-color: #888888;
  opacity: 0.9;
  float: left;
  margin: 74px 0 0 0; /* top right bottom left */
  padding: 10px 0 0 10%; /* top right bottom left */
  display: block;
  z-index: 1;
}
#neuro a:hover,
#neuro a:active,
#social a:hover,
#social a:active,
#invis a:hover,
#invis a:active,
#power a:hover,
#power a:active,
#methods a:hover,
#methods a:active {
  background-color: #6c6c6c;
  opacity: 0.9;
}
#neuro a#researchcurrent,
#social a#researchcurrent,
#invis a#researchcurrent,
#power a#researchcurrent,
#methods a#researchcurrent {
  background-color: #415d6d;
  opacity: 0.9;
}
.researchclearfix {
  width: 100%;
  height: 0.0001%;
  background-color: #fff;
  clear: both;
}
/* PEOPLE PAGES --------------------------------------------------------- */
.peoplerow {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 14px;
}
.peoplerow a:link,
.peoplerow a:visited {
  font-family: "droid_sansbold", Helvetica, sans-serif;
  font-size: 100%;
  color: #415d6d;
  text-decoration: none;
}
.peoplerow a:hover,
.peoplerow a:active {
  text-decoration: underline;
}
.peoplerow img {
  max-width: 100%;
  height: auto;
}
.peoplepinline {
  width: 100%;
  background-color: #cccccc;
  height: 1px;
  clear: both;
}
.peoplepinlinefirst {
  width: 100%;
  background-color: #cccccc;
  height: 1px;
  clear: both;
  margin-top: 15px;
}
.bio-image {
  width: 18.5%;
  padding-right: 1.875%;
  float: left;
  height: 100%;
}
.bio-text {
  /* post-doc text to go wtih .peopleentry-one*/
  width: 77.75%;
  float: right;
  padding-left: 1.875%;
  padding-top: 7px;
}
.peopleentry-one,
.peopleentry-two,
.peopleentry-three,
.peopleentry-four {
  /* photo, name, title 5 accross desktop */
  /* width: 18.5%; */
  padding-right: 1.875%;
  margin-bottom: 20px;
  float: left;
  height: 100%;
}
.peopleentry-five {
  /* photo, name, title 5 accross desktop */
  width: 18.5%;
  padding-right: 0;
  float: right;
  height: 100%;
}
.imagetitles {
  width: 100%;
  height: 100%;
}
#lgbioleft {
  /* bio page VPV */
  width: 25%;
  padding-right: 3%;
  padding-top: 5px;
  float: left;
  height: 100%;
}
#lgbioleft img {
  /* bio page VPV */
  width: 100%;
  height: auto;
}
#lgbioright-title {
  width: 70%;
  padding-top: 8px;
  float: right;
}
#lgbioright {
  /* bio page VPV */
  float: right;
  height: 100%;
  width: 70%;
}
.inaug-fellows {
  float: left;
  display: inline;
  width: 35%;
  padding-right: 3%;
  padding-top: 10px;
}
.inaug-fellows img {
  max-width: 100%;
  height: auto;
}
.hannah-emily {
  float: right;
  display: inline;
  width: 35%;
  padding-left: 3%;
  padding-top: 10px;
}
.hannah-emily img {
  max-width: 100%;
  height: auto;
}
.staffdoct-colone {
  /* grad students list */
  width: 47%;
  padding-right: 3%;
  float: left;
  height: 100%;
}
.staffdoct-coltwo {
  /* research assistants list */
  width: 47%;
  float: left;
  height: 100%;
}
.alumni-colone {
  /* Lab Alumni page */
  width: 48%;
  padding-right: 2%;
  float: left;
  height: 100%;
}
.alumni-coltwo {
  /* Lab Alumni page */
  width: 48%;
  padding-left: 2%;
  float: left;
  height: 100%;
}

/* MEDIA PAGE ----------------------------------------------------------------*/
.medialinksbox {
  width: 85%;
  height: 100%;
  margin-top: 15px;
  margin-bottom: 40px;
  padding: 0;
}
.medialinks,
.medialinks-last {
  width: 23%;
  margin-right: 2%;
  float: left;
}
.medialinks a:link,
.medialinks a:visited {
  color: #ffffff;
  font-weight: normal;
  background-color: #bbbbbb;
  text-decoration: none;
  display: block;
  text-align: center;
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 97%;
  line-height: 97%;
  padding: 15px 0 15px 0;
}
.medialinks a:hover {
  color: #ffffff;
  background-color: #9c9c9c;
  text-decoration: none;
}
.medialinks a:active,
.medialinks a#medialinkscurrent {
  color: #ffffff;
  background-color: #415d6d;
  text-decoration: none;
}
h3.media {
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 105%;
  line-height: 130%;
  text-align: center;
  color: #777777;
  background-color: #d8d8d8;
  font-weight: normal;
  margin: 0px;
  padding: 13px;
}
.smaller {
  font-size: 82%; /* text: click logos for article links */
  color: #888888;
}
#maincolleft {
  /* used on the media pages*/
  float: left;
  width: 60%;
  padding-right: 5%;
  height: 100%;
}
#maincolright {
  /* used on the media pages, featured logos */
  margin-top: 50px;
  float: right;
  width: 35%;
  height: 700px; /* fixed height for scrollbars*/
  background-color: #ffffff;
}
#media-logobox {
  width: 100%;
  height: 700px; /* fixed height for scrollbars */
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.medialogos {
  width: 65%;
  margin: 0 auto;
  padding: 25px 17.5% 25px 17.5%;
  background-color: #ffffff;
}
.medialogos-cbs {
  /* special format for CBS logo due to logo design */
  width: 85%;
  margin: 0 auto;
  padding: 25px 7.5% 25px 7.5%;
  background-color: #ffffff;
}
.medialogos img {
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  display: block;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin-bottom: 40px;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* GALLERY PAGE ------------------------------------ */

#gallery-container {
  height: 100%;
  width: 75%;
  margin: 0 auto;
  margin-bottom: 20px;
  z-index: 1;
}

/* UP ARROW---------------------------------------------------------------------------------- */

#up-arrow {
  width: 35px;
  height: 35px;
  background-image: url(assets/images/up-arrow.png);
  background-repeat: no-repeat;
  margin: 25px 0 10px 0; /* top right bottom left */
  border: solid 1px #cccccc;
}
#up-arrow:hover {
  background-image: url(assets/images/up-arrow-hover.png);
  background-repeat: no-repeat;
}
/* FOOTER ---------------------------------------------------------------------------------- */
#footer {
  height: 100%;
  width: 95%;
  padding: 30px 2.5% 0;
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 88%;
  color: #666666;
  text-decoration: none;
  line-height: 170%;
  clear: both;
}
#footleftcol {
  float: left;
  height: 100%;
  width: 50%;
}
#leftcoltitle {
  float: left;
  width: 57px;
  color: #415d6d;
}
#footleftcola {
  /* contact information*/
  float: left;
  height: 100%;
  width: 60%;
  padding-right: 2%;
}
#footleftcolb {
  /* address */
  float: left;
  height: 100%;
  width: 38%;
}
#footrightcol {
  float: right;
  height: 100%;
  width: 40%;
}
#footrightcola {
  /* nav row one*/
  float: left;
  height: 100%;
  width: 37%;
}
#footrightcolb {
  /* nav row two*/
  float: right;
  height: 100%;
  width: 45%;
}
#footer a:link,
#footer a:visited {
  color: #666666;
  text-decoration: none;
}
#footer a:hover,
#footer a:active,
#footer a#footercurrent {
  color: #415d6d;
}
#footer ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#footer ul li a:link,
#footer ul li a:visited {
  font-family: "droid_sansregular", Arial, sans-serif;
  color: #666666;
  text-decoration: none;
  line-height: 170%;
}
#footer ul li a:hover,
#footer ul li a:active {
  color: #415d6d;
}
#footer ul li a#footercurrent {
  color: #415d6d;
  text-decoration: none;
}
#footer ul ul {
  list-style-type: square;
  list-style-position: inside;
}
#footer ul ul li a:link,
#footer ul ul li a:visited {
  font-family: "droid_sansregular", Arial, sans-serif;
  color: #666666;
  text-decoration: none;
  line-height: 180%;
}
#footer ul ul li a:hover,
#footer ul ul li a:active,
#footer ul ul li a#footercurrent {
  color: #415d6d;
}
#footspacer {
  height: 2px;
  width: 100%;
  clear: both;
}
#fb_twitter {
  width: 100%;
  float: left;
  padding-top: 15px;
}
#fb_twitter img {
  width: 28px;
  height: 28px;
  padding-right: 15px;
}
#bottombar {
  height: 100%;
  width: 100%;
  clear: both;
  border-top: thin solid #bbbbbb;
  margin-top: 20px;
  padding-top: 22px;
}
#bottomlogo {
  height: 100%;
  width: 100%;
  margin: 0 auto;
}
#bottomlogo img {
  display: block;
  margin: 0 auto;
}
#copyright {
  font-family: "droid_sansregular", Arial, sans-serif;
  font-size: 65%;
  text-align: center;
  color: #777777;
  padding-top: 20px;
  width: 100%;
  padding-bottom: 12px;
  clear: both;
}
/* CLEARFIX --------------------------------------------------------- */

.clearfix {
  width: 100%;
  height: 1px;
  clear: both;
}
@media screen and (max-width: 1023px) {
  body {
    font-size: 95%;
  }
  #bodysinglecol {
    width: 90%;
  }
  #nav {
    margin: 0 1.5%;
  }
  #footer {
    font-size: 85%;
  }
}
/* MOBILE NAVIGATION --------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 850px) {
  body {
    font-size: 92%;
  }
  #bodysinglecol {
    width: 93%;
  }
  #navbox {
    margin: 35px 0 0 0;
  }
  #nav {
    margin-left: 0%;
    margin-right: 0%;
  }
  #hometext {
    width: 88%;
    height: 100%;
    padding-bottom: 15px;
    padding-left: 6%;
    padding-right: 6%;
    margin-bottom: 15px;
  }
  #twtimeline {
    width: 100%;
    background-color: #e4e4e4;
    border: 1px solid #dddddd;
    height: 100%;
    float: right;
  }
  #researchgridbox {
    height: 100%;
    width: 100%;
    background-color: transparent;
    box-shadow: none;
    margin-bottom: 35px;
  }
  #neuro,
  #social,
  #invis {
    height: 140px;
    float: left;
    width: 33.3333%;
  }
  #power {
    margin-left: 16.6665%;
  }
  #power,
  #methods {
    height: 135px;
    float: left;
    width: 33.3333%;
  }
  #neuro {
    border-width: 6px 6px 6px 6px; /* top right bottom left */
  }
  #social {
    border-width: 6px 6px 6px 0; /* top right bottom left */
  }
  #invis {
    border-width: 6px 6px 6px 0; /* top right bottom left */
  }
  #power {
    border-width: 0 6px 6px 6px; /* top right bottom left */
  }
  #methods {
    border-width: 0 6px 6px 0; /* top right bottom left */
  }
  #gallery-container {
    width: 100%;
  }
  #footleftcol {
    width: 100%;
  }
  #footleftcola {
    width: 70%;
  }
  #footleftcolb {
    width: 25%;
    float: right;
  }
  #footrightcol {
    display: none;
    width: 0;
    height: 0;
  }
}
@media only screen and (max-width: 768px) {
  body {
    font-size: 92%;
  }
  #nav {
    position: relative;
    top: auto;
    left: auto;
    margin: 0;
  }
  #nav > a {
    width: 97.5%; /* makes mobile nav bar the width of the site */
    height: 30px; /* 30px + 15px top padding makes 45px height and centers "Menu" text */
    text-align: left;
    padding-left: 2.5%;
    padding-top: 15px;
    text-decoration: none;
    color: #fff; /* Menu" text */
    background-color: #d2d2d2; /* background of menu bar before expanding*/
    background-image: url(assets/images/menu-icon.png);
    background-repeat: no-repeat;
    background-position: right;
    position: relative;
    z-index: 40;
  }
  #nav:not(:target) > a:first-of-type,
  #nav:target > a:last-of-type {
    display: block;
  }
  /* first level MOBILE------------------------------- */
  #nav > ul {
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
  }
  #nav:target > ul {
    display: block;
    background-color: #c4c4c4; /* shows up on mobile version as background color for main li hover */
    margin-top: 1px; /* accounts for bottom pinline on #navbox */
    z-index: 40;
  }
  #nav > ul > li {
    width: 100%;
    float: none;
  }
  #nav > ul > li > a {
    height: auto;
    text-align: left;
    padding: 0 6%;
    width: 88%;
  }
  #nav > ul > li:hover > a,
  #nav > ul:not(:hover) > li.active > a {
    background-color: #adadad; /*  background color for main li hover and parent menu (People) */
  }
  #nav > ul > li:not(:last-child) > a {
    border-bottom: 1px solid #8c8c8c;
  }
  /* second level MOBILE------------------------------- */

  #nav li ul {
    position: static;
    padding-left: 0;
    width: 100%;
    background-color: #adadad; /*  background color for sub-menu  */
    border-bottom: 1px solid #8c8c8c;
  }
  #nav li:hover ul {
    display: block;
    margin-left: 0;
  }
  #nav li ul a {
    font-size: 95%;
    padding: 15px 10% 15px; /*  centers sub-nav links top to bottom and indents 10%  */
    border-bottom: 1px solid #8c8c8c;
  }
  .bio-image {
    width: 25%;
    padding-right: 1.875%;
    float: left;
    height: 100%;
  }
  .bio-text {
    /* post-doc text to go wtih .peopleentry-one*/
    width: 71.25%;
    float: right;
    padding-left: 1.875%;
  }
  .peopleentry-one,
  .peopleentry-two {
    /* width: 25%; */
    float: left;
    /* padding-right: 12.5%; */
    height: 100%;
  }
  .peopleentry-three {
    /* width: 25%; */
    float: right;
    padding-right: 0;
    height: 100%;
  }
  .peopleentry-four,
  .peopleentry-five {
    /* width: 25%; */
    padding-right: 12.5%;
    float: left;
    height: 100%;
    clear: both;
  }
  .peopleentry-five {
    /* width: 25%; */
    float: left;
    height: 100%;
    clear: none;
  }
  #lgbioleft {
    /* bio page VPV */
    width: 30%;
    padding-right: 4%;
    float: left;
    height: 100%;
  }
  #lgbioleft img {
    /* bio page VPV */
    width: 100%;
    height: auto;
  }
  #lgbioright-title {
    width: 66%;
    padding-top: 8px;
    float: right;
  }
  #lgbioright {
    /* bio page VPV */
    float: left;
    height: 100%;
    width: 100%;
    clear: both;
  }
  .inaug-fellows {
    float: left;
    display: inline;
    width: 35%;
    padding-right: 2%;
  }
  .inaug-fellows img {
    max-width: 100%;
    height: auto;
  }
  .alumni-colone {
    /* Lab Alumni page */
    width: 100%;
    float: none;
  }
  .alumni-coltwo {
    /* Lab Alumni page */
    width: 100%;
    float: none;
    padding-left: 0;
  }
  #maincolleft {
    /* used on the media pages*/
    float: none;
    width: 100%;
    padding-right: 0;
  }
  #maincolright {
    /* used on the media pages, featured logos */
    margin-top: 35px;
    float: none;
    width: 100%;
    height: 100%; /* fixed height for scrollbars*/
  }
  #media-logobox {
    width: 100%;
    height: 400px; /* fixed height for scrollbars */
    overflow-y: scroll;
  }
  .medialogos {
    width: 30%;
    margin: 0;
    float: left;
    padding: 25px 10% 25px 10%;
    background-color: #ffffff;
  }
  .medialogos-cbs {
    width: 50%;
    float: left;
    margin: 0 auto;
    padding: 25px 5% 25px 5%;
    background-color: #ffffff;
  }
  .medialogos img {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    display: block;
  }
}
@media only screen and (max-width: 710px) {
  #footleftcol {
    width: 100%;
  }
  #footleftcola {
    width: 50%;
  }
  #footleftcolb {
    width: 30%;
    float: right;
    padding-left: 10%;
  }
  #footrightcol {
    display: none;
    width: 0;
    height: 0;
  }
}
@media only screen and (max-width: 600px) {
  #neuro,
  #social {
    height: 140px;
    float: left;
    width: 50%;
    margin-left: 0;
  }
  #invis,
  #power {
    height: 134px;
    float: left;
    width: 50%;
    margin-left: 0;
  }
  #methods {
    height: 134px;
    float: left;
    width: 50%;
    margin-left: 25%;
  }
  #neuro {
    border-width: 6px 6px 6px 6px; /* top right bottom left */
  }
  #social {
    border-width: 6px 6px 6px 0; /* top right bottom left */
  }
  #invis {
    border-width: 0 6px 6px 6px; /* top right bottom left */
  }
  #power {
    border-width: 0 6px 6px 0; /* top right bottom left */
  }
  #methods {
    border-width: 0 6px 6px 6px; /* top right bottom left */
  }
  #lgbioleft {
    /* bio page VPV */
    width: 35%;
    float: left;
  }
  #lgbioright-title {
    width: 60%;
    padding-top: 8px;
    float: right;
  }
  #lgbioright {
    /* bio page VPV */
    width: 100%;
  }
  #footleftcol {
    width: 100%;
  }
  #footleftcola {
    width: 50%;
  }
  #footleftcolb {
    width: 35%;
    float: right;
  }
  #footrightcol {
    display: none;
    width: 0;
    height: 0;
  }
}
@media only screen and (max-width: 500px) {
  .bio-image {
    width: 33%;
    padding-right: 1.875%;
    float: left;
    height: 100%;
    display: inline;
  }
  .bio-text {
    width: 63.25%;
    float: right;
    padding-left: 1.875%;
  }
  .peopleentry-one {
    /* width: 33%; */
    float: left;
    /* padding-right: 17%; */
    height: 100%;
  }
  .peopleentry-two {
    width: 33%;
    float: right;
    padding-right: 0;
    height: 100%;
  }
  .peopleentry-three {
    width: 33%;
    float: left;
    padding-right: 17%;
    height: 100%;
    clear: both;
  }
  .peopleentry-four {
    width: 33%;
    padding-right: 0;
    float: right;
    height: 100%;
    clear: none;
  }
  .peopleentry-five {
    width: 33%;
    float: left;
    height: 100%;
    clear: both;
  }
  #lgbioleft {
    /* bio page VPV */
    width: 50%;
    margin: 0 auto;
    float: left;
  }
  #lgbioright-title {
    width: 100%;
    padding-top: 8px;
    float: right;
  }
  #lgbioright {
    /* bio page VPV */
    width: 100%;
  }
  #footleftcol {
    float: none;
    height: 100%;
    width: 75%;
    padding-left: 25%;
  }
  #footleftcola {
    /* contact information*/
    float: left;
    height: 100%;
    width: 100%;
  }
  #footleftcolb {
    /* address */
    float: left;
    height: 100%;
    width: 100%;
    padding-left: 0;
    padding-top: 10px;
  }
  #footrightcol {
    display: none;
    width: 0;
    height: 0;
  }
}
@media only screen and (max-width: 480px) {
  .medialinksbox {
    width: 100%;
  }
  #neuro {
    height: 76px;
    float: none;
    width: 100%;
  }
  #social,
  #invis,
  #power {
    height: 70px;
    float: none;
    width: 100%;
  }
  #methods {
    height: 70px;
    float: none;
    width: 100%;
    margin-left: 0;
  }
  #neuro {
    border-width: 6px 6px 6px 6px; /* top right bottom left */
    background-size: 100%;
  }
  #social {
    border-width: 0 6px 6px 6px; /* top right bottom left */
    background-size: 100%;
  }
  #invis {
    border-width: 0 6px 6px 6px; /* top right bottom left */
    background-size: 100%;
  }
  #power {
    border-width: 0 6px 6px 6px; /* top right bottom left */
    background-size: 100%;
  }
  #methods {
    border-width: 0 6px 6px 6px; /* top right bottom left */
    background-size: 100%;
  }

  #neuro a:link,
  #neuro a:visited,
  #social a:link,
  #social a:visited,
  #invis a:link,
  #invis a:visited,
  #power a:link,
  #power a:visited,
  #methods a:link,
  #methods a:visited {
    line-height: 18px;
    height: 30px;
    background-color: #888888;
    margin: 25px 0 0 0; /* top right bottom left */
  }
  .bio-image {
    width: 33%;
    padding-right: 1.875%;
    float: left;
    height: 100%;
  }
  .bio-text {
    width: 63.25%;
    float: right;
    padding-left: 1.875%;
  }
  .peopleentry-one {
    /* width: 33%; */
    float: left;
    /* padding-right: 17%; */
    height: 100%;
  }
  .peopleentry-two {
    width: 33%;
    float: right;
    padding-right: 0;
    height: 100%;
  }
  .peopleentry-three {
    width: 33%;
    float: left;
    padding-right: 17%;
    height: 100%;
    clear: both;
  }
  .peopleentry-four {
    width: 33%;
    padding-right: 0;
    float: right;
    height: 100%;
    clear: none;
  }
  .peopleentry-five {
    width: 33%;
    float: left;
    height: 100%;
    clear: both;
  }
  .inaug-fellows {
    float: none;
    display: block;
    width: 63%;
    padding-right: 18.5%;
    padding-left: 18.5%;
    margin: 0 auto;
  }
  .inaug-fellows img {
    max-width: 100%;
    margin: 0 auto;
    height: auto;
  }
  #footleftcol {
    float: none;
    height: 100%;
    width: 85%;
    padding-left: 15%;
  }
  #footleftcola {
    /* contact information*/
    float: left;
    height: 100%;
    width: 100%;
  }
  #footleftcolb {
    /* address */
    float: left;
    height: 100%;
    width: 100%;
    padding-left: 0;
    padding-top: 10px;
  }
  #footrightcol {
    display: none;
    width: 0;
    height: 0;
  }
}
@media only screen and (max-width: 450px) {
  .staffdoct-colone {
    /* grad students list */
    width: 100%;
    padding-right: 0%;
    float: none;
  }
  .staffdoct-coltwo {
    /* research assistants list */
    width: 100%;
    float: none;
  }
}
@media only screen and (max-width: 400px) {
  .medialinks {
    width: 48%;
    margin-right: 2%;
    float: left;
    margin-bottom: 2%;
  }

  .bio-image {
    width: 45%;
    padding-right: 55%;
    float: left;
    height: 100%;
    padding-bottom: 10px;
  }
  .bio-text {
    width: 100%;
    float: none;
    padding-left: 0;
  }
  .peopleentry-one {
    /* width: 45%; */
    float: left;
    /* padding-right: 10%; */
    height: 100%;
  }
  .peopleentry-two {
    width: 45%;
    float: right;
    padding-right: 0;
    height: 100%;
  }
  .peopleentry-three {
    width: 45%;
    float: left;
    padding-right: 10%;
    height: 100%;
    clear: both;
  }
  .peopleentry-four {
    width: 45%;
    padding-right: 0;
    float: right;
    height: 100%;
    clear: none;
  }
  .peopleentry-five {
    width: 45%;
    float: left;
    height: 100%;
    clear: both;
  }
  #media-logobox {
    width: 100%;
    height: 400px; /* fixed height for scrollbars */
    overflow-y: scroll;
  }
  .medialogos {
    width: 50%;
    margin: 0;
    float: none;
    padding: 25px 25% 25px 25%;
  }
  .medialogos-cbs {
    width: 70%;
    float: none;
    margin: 0 auto;
    padding: 25px 15% 25px 15%;
  }
  .medialogos img {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    display: block;
  }
  #footleftcol {
    float: none;
    height: 100%;
    width: 100%;
    padding-left: 0;
  }
  #footleftcola {
    /* contact information*/
    float: left;
    height: 100%;
    width: 100%;
  }
  #footleftcolb {
    /* address */
    float: left;
    height: 100%;
    width: 100%;
    padding-left: 0;
    padding-top: 10px;
  }
  #footrightcol {
    display: none;
    width: 0;
    height: 0;
  }
}