/* ===================================================================
 *
 *  Infinity v1.0 Main Stylesheet
 *  01-02-2017
 *  ------------------------------------------------------------------
 *
 *  TOC:
 *  01. webfonts and iconfonts
 *  02. base style overrides
 *  03. typography & general theme styles
 *  04. preloader
 *  05. forms
 *  06. buttons
 *  07. other components
 *  08. common and reusable styles
 *  09. header styles
 *  ------10. home MOVED TEMPORARILY
 *  11. about
 *  12. services
 *  13. portfolio
 *  14. testimonials
 *  15. clients
 *  16. contact
 *  17. footer
 *  18. Gallery General
 *  19. Home
 *  20. About Silkab
 *  21. People
 *  22. People: Image Carousel
 *  23. People: Alumni
 *  24. Publications
 *  25. Research
 *  26. News
 *  27. Tech Transfer
 *  28. Contact Silklab (contact us)
 *  29. Collaborators
 *  30. Tour
 *  31. New Page
 *
 * =================================================================== */


/* ===================================================================
 *  01. webfonts and iconfonts - (_document-setup)
 *
 * ------------------------------------------------------------------- */
@import url("font-awesome/css/font-awesome.min.css");
@import url("micons/micons.css");
@import url("fonts.css");


/* ===================================================================
 *  02. base style overrides - (_document-setup)
 *
 * ------------------------------------------------------------------- */

html {
  font-size: 10px;
}
@media only screen and (max-width: 1024px) {
  html {
    font-size: 9.375px;
  }
}
@media only screen and (max-width: 768px) {
  html {
    font-size: 10px;
  }
}
@media only screen and (max-width: 400px) {
  html {
    font-size: 9.375px;
  }
}

html, body {
  height: 100%;
}

body {
  background: #111111;
  font-family: 'montserrat-regular', serif !important;
  font-size: 1.6rem;
  line-height: 3rem;
  color: #353535;
  margin: 0;
  padding: 0;
}

:root { /* Tufts blue! */
	--main-acc-color: rgba(65, 125, 193, 1.0);

	/* Unfilled grid fix (Visitors, collaborators, undergrads) */
	--num-visitors-w2: 2;
	--num-visitors-w3: 3;
	--num-visitors-w4: 3;
	--num-visitors-w5: 3;
	--num-visitors-w6: 3;
	--num-visitors-w7: 3;

	--num-undergrads-w2: 2;
	--num-undergrads-w3: 3;
	--num-undergrads-w4: 3;
	--num-undergrads-w5: 3;
	--num-undergrads-w6: 3;
	--num-undergrads-w7: 3;

	/* Grayscale color palette */
	--no1: rgb(255, 255, 255);
	--no1-1: rgb(245, 245, 245);
	--no2: rgb(230, 230, 230);
	--no3: rgb(204, 204, 204);
	--no4: rgb(179, 179, 179);
	--no5: rgb(153, 153, 153);
	--no6: rgb(128, 128, 128);
	--no7: rgb(102, 102, 102);
	--no8: rgb(77, 77, 77);
	--no9: rgb(51, 51, 51);
	--no10: rgb(26, 26, 26);
	--wild: rgb(51, 51, 51);
}

/* -------------------------------------------------------------------
 * links - (_document-setup)
 * ------------------------------------------------------------------- */
a, a:visited {
  color: var(--no1);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

a:hover, a:focus {
  color: var(--main-acc-color) !important;
}


/* ===================================================================
 *  03. typography & general theme styles - (_document-setup.scss)
 *
 * ------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h01, .h02, .h03, .h04, .h05, .h06 {
  color: #151515;
  font-style: normal;
  font-weight: bold;
  text-rendering: optimizeLegibility;
  margin-bottom: 2.1rem;
}

h3, .h03, h4, .h04 {
  margin-bottom: 1.8rem;
}

h5, .h05, h6, .h06 {
  margin-bottom: 1.2rem;
}

h1, .h01 {
  font-size: 3.1rem;
  line-height: 1.35;
  letter-spacing: -.1rem;
}
@media only screen and (max-width: 600px) {
  h1, .h01 {
    font-size: 2.6rem;
    letter-spacing: -.07rem;
  }
}

h2, .h02 {
  font-size: 2.4rem;
  line-height: 1.25;
}

h3, .h03 {
  font-size: 2rem;
  line-height: 1.5;
}

h4, .h04 {
  font-size: 1.7rem;
  line-height: 1.76;
}

h5, .h05 {
  font-size: 1.4rem;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: .2rem;
}

h6, .h06 {
  font-size: 1.3rem;
  line-height: 1.85;
  text-transform: uppercase;
  letter-spacing: .2rem;
}

p img {
  margin: 0;
}

p.lead, .divider.lead {
  font-size: 1.8rem;
  line-height: 2.0;
  color: var(--no2);
  margin-bottom: 3.6rem;
}
@media only screen and (max-width: 768px) {
  p.lead {
    font-size: 1.6rem;
  }
	#home-page .divider.lead, #research .divider.lead {
		font-size: 1.4rem;
	}
}

@media only screen and (max-width: 500px) {
	#home-page .divider.lead, #research .divider.lead {
		font-size: 1.2rem;
	}
}

em, i, strong, b {
  font-size: 1.6rem;
  line-height: 3rem;
  font-style: normal;
  font-weight: normal;
}

em, i {
  font-style: italic;
}

strong, b {
  font-weight: bold;
}

small {
  font-size: 1.1rem;
  line-height: inherit;
}

blockquote {
  margin: 3rem 0;
  padding-left: 5rem;
  position: relative;
}

blockquote:before {
  content: "\201C";
  font-size: 10rem;
  line-height: 0px;
  margin: 0;
  color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 3.6rem;
  left: 0;
}

blockquote p {
  font-style: italic;
  padding: 0;
  font-size: 1.9rem;
  line-height: 1.895;
}

blockquote cite {
  display: block;
  font-size: 1.3rem;
  font-style: normal;
  line-height: 1.615;
}

blockquote cite:before {
  content: "\2014 \0020";
}

blockquote cite a,
blockquote cite a:visited {
  color: #4f4f4f;
  border: none;
}

abbr {
  font-weight: bold;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: .05rem;
  color: #4f4f4f;
}

var, kbd, samp, code, pre {
}

pre {
  padding: 2.4rem 3rem 3rem;
  background: #F1F1F1;
}

code {
  font-size: 1.4rem;
  margin: 0 .2rem;
  padding: .3rem .6rem;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 3px;
}

pre > code {
  display: block;
  white-space: pre;
  line-height: 2;
  padding: 0;
  margin: 0;
}

pre.prettyprint > code {
  border: none;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

mark {
  background: #FFF49B;
  color: #000;
}

hr {
  border: solid #d2d2d2;
  border-width: 1px 0 0;
  clear: both;
  margin: 2.4rem 0 1.5rem;
  height: 0;
}

/* -------------------------------------------------------------------
 * Lists - (_document-setup.scss)
 * ------------------------------------------------------------------- */
ol {
  list-style: decimal;
}

ul {
  list-style: disc;
}

li {
  display: list-item;
}

ol, ul {
  margin-left: 1.7rem;
}

ul li {
  /*padding-left: .4rem;*/
}

ul ul, ul ol,
ol ol, ol ul {
  margin: .6rem 0 .6rem 1.7rem;
}

ul.disc li {
  display: list-item;
  list-style: none;
  padding: 0 0 0 .8rem;
  position: relative;
}
ul.disc li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #07617d;
  position: absolute;
  left: -17px;
  top: 11px;
  vertical-align: middle;
}

dt {
  margin: 0;
  color: #07617d;
}

dd {
  margin: 0 0 0 2rem;
}

/* -------------------------------------------------------------------
 * Spacing - (_document-setup)
 * ------------------------------------------------------------------- */
button, .button {
  margin-bottom: 1.2rem;
}

fieldset {
  margin-bottom: 1.5rem;
}

input,
textarea,
select,
pre,
blockquote,
figure,
table,
p,
ul,
ol,
dl,
form,
.fluid-video-wrapper,
.ss-custom-select {
  margin-bottom: 3rem;
}

/* -------------------------------------------------------------------
 * floated image - (_document-setup)
 * ------------------------------------------------------------------- */
img.pull-right {
  margin: 1.5rem 0 0 3rem;
}

img.pull-left {
  margin: 1.5rem 3rem 0 0;
}

/* -------------------------------------------------------------------
 * block grids paddings
 * ------------------------------------------------------------------- */
.bgrid {
  padding: 0 20px;
}
@media only screen and (max-width: 1024px) {
  .bgrid {
    padding: 0 18px;
  }
}
@media only screen and (max-width: 768px) {
  .bgrid {
    padding: 0 15px;
  }
}
@media only screen and (max-width: 600px) {
  .bgrid {
    padding: 0 10px;
  }
}
@media only screen and (max-width: 400px) {
  .bgrid {
    padding: 0;
  }
}

/* -------------------------------------------------------------------
 * tables - (_document-setup.scss)
 * ------------------------------------------------------------------- */
table {
  border-width: 0;
  width: 100%;
  max-width: 100%;
}

.table {
	display: table;
	margin: 0 auto;
	text-align: center;
}

th,
td {
  padding: 1.5rem 3rem;
  text-align: left;
  border-bottom: 1px solid #E8E8E8;
}

th {
  color: #151515;
  font-weight: bold;
}

td {
  line-height: 1.5;
}

th:first-child,
td:first-child {
  padding-left: 0;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* -------------------------------------------------------------------
 * pace.js styles - minimal  - (_document-setup.scss)
 * ------------------------------------------------------------------- */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: rgba(65, 125, 193, 1.0);
  position: fixed;
  z-index: 900;
  top: 0;
  right: 100%;
  width: 100%;
  height: 6px;
}


/* ===================================================================
 *  04. Preloader
 *
 * ------------------------------------------------------------------- */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0F1215;
  z-index: 800;
  height: 100%;
  width: 100%;
}

.no-js #preloader, .oldie #preloader {
  display: none;
}

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  padding: 0;
  background-color: rgba(65, 125, 193, 1.0);
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
	  transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
	  transform: scale(1);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}


/* ===================================================================
 *  05. forms - (_forms.scss)
 *
 * ------------------------------------------------------------------- */
fieldset {
  border: none;
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  display: block;
  height: 6rem;
  padding: 1.5rem 2rem;
  border: 0;
  outline: none;
  vertical-align: middle;
  color: #444444;
  font-size: 1.4rem;
  line-height: 3rem;
  max-width: 100%;
  background: rgba(0, 0, 0, 0.1);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.ss-custom-select {
  position: relative;
  padding: 0;
}
.ss-custom-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  margin: 0;
  line-height: 3rem;
  vertical-align: middle;
}
.ss-custom-select select option {
  padding-left: 2rem;
  padding-right: 2rem;
}
.ss-custom-select select::-ms-expand {
  display: none;
}
.ss-custom-select::after {
  content: '\f0d7';
  position: absolute;
  top: 50%;
  right: 1.5rem;
  margin-top: -10px;
  bottom: auto;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 18px;
  text-align: center;
  pointer-events: none;
  color: #252525;
}

/* IE9 and below */
.oldie .ss-custom-select::after {
  display: none;
}

textarea {
  min-height: 25rem;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  color: #000000;
}

label, legend {
	/*
  font-weight: bold;
  font-size: 1.4rem;
  margin-bottom: .6rem;
  color: #020202;
  display: block;*/
}

input[type="checkbox"],
input[type="radio"] {
  display: inline;
}

label > .label-text {
  display: inline-block;
  margin-left: 1rem;
  line-height: inherit;
}

label > input[type="checkbox"],
label > input[type="radio"] {
  margin: 0;
  position: relative;
  top: .15rem;
}

/* -------------------------------------------------------------------
 * Style Placeholder Text - (_forms.scss)
 * ------------------------------------------------------------------- */
::-webkit-input-placeholder {
  color: #8e8e8e;
}

:-moz-placeholder {
  color: #8e8e8e;
  /* Firefox 18- */
}

::-moz-placeholder {
  color: #8e8e8e;
  /* Firefox 19+ */
}

:-ms-input-placeholder {
  color: #8e8e8e;
}

.placeholder {
  color: #8e8e8e !important;
}

/* -------------------------------------------------------------------
 * Change Autocomplete styles in Chrome - (_forms.scss)
 * ------------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none;
  -webkit-text-fill-color: #fabc5a;
  transition: background-color 5000s ease-in-out 0s;
}


/* ===================================================================
 *  06. buttons - (_button-essentials.scss)
 *
 * ------------------------------------------------------------------- */
.button,
a.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  font-weight: bold;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .3rem;
  height: 5.4rem;
  line-height: 5.4rem;
  padding: 0 3rem;
  margin: 0 .3rem 1.2rem 0;
  background: #A5A5A5;
  color: #222222;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  border: none;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.button:hover,
a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  background: #989898;
  color: #000000;
  outline: 0;
}

.button.button-primary,
a.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  background: #151515;
  color: #FFFFFF;
}

.button.button-primary:hover,
a.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  background: #030303;
}

button.full-width, .button.full-width {
  width: 100%;
  margin-right: 0;
}

button.medium, .button.medium {
  height: 5.7rem !important;
  line-height: 5.7rem !important;
  padding: 0 1.8rem !important;
}

button.large, .button.large {
  height: 6rem !important;
  line-height: 6rem !important;
  padding: 0rem 3rem !important;
}

button.stroke, .button.stroke {
  background: transparent !important;
  border: 3px solid #313131;
  line-height: 4.8rem;
}

button.stroke.medium, .button.stroke.medium {
  line-height: 5.1rem !important;
}

button.stroke.large, .button.stroke.large {
  line-height: 5.4rem !important;
}

button.stroke:hover, .button.stroke:hover {
  border: 3px solid rgba(65, 125, 193, 1.0);
  color: rgba(65, 125, 193, 1.0);
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}


/* ===================================================================
 *  07. other components - (_others.scss)
 *
 * ------------------------------------------------------------------- */

/**
 * alert box - (_alert-box.scss)
 * -------------------------------------------------------------------
 */
.alert-box {
  padding: 2.1rem 4rem 2.1rem 3rem;
  position: relative;
  margin-bottom: 3rem;
  border-radius: 3px;
  font-size: 1.5rem;
}
.alert-box .close {
  position: absolute;
  right: 1.8rem;
  top: 1.8rem;
  cursor: pointer;
}

.ss-error {
  background-color: #ffd1d2;
  color: #e65153;
}

.ss-success {
  background-color: #c8e675;
  color: #758c36;
}

.ss-info {
  background-color: #d7ecfb;
  color: #4a95cc;
}

.ss-notice {
  background-color: #fff099;
  color: #bba31b;
}

/* -------------------------------------------------------------------
 * additional typo styles - (_additional-typo.scss)
 * ------------------------------------------------------------------- */
/* drop cap
 * ----------------------------------------------- */
.drop-cap:first-letter {
  float: left;
  margin: 0;
  padding: 1.5rem .6rem 0 0;
  font-size: 8.4rem;
  font-weight: bold;
  line-height: 6rem;
  text-indent: 0;
  background: transparent;
  color: #151515;
}

/* line definition style
 * ----------------------------------------------- */
.lining dt, .lining dd {
  display: inline;
  margin: 0;
}
.lining dt + dt:before,
.lining dd + dt:before {
  content: "\A";
  white-space: pre;
}
.lining dd + dd:before {
  content: ", ";
}
.lining dd + dd:before {
  content: ", ";
}
.lining dd:before {
  content: ": ";
  margin-left: -0.2em;
}

/* dictionary definition style
 * ----------------------------------------------- */
.dictionary-style dt {
  display: inline;
  counter-reset: definitions;
}
.dictionary-style dt + dt:before {
  content: ", ";
  margin-left: -0.2em;
}
.dictionary-style dd {
  display: block;
  counter-increment: definitions;
}
.dictionary-style dd:before {
  content: counter(definitions,decimal) ". ";
}

/**
 * Pull Quotes
 * -----------
 * markup:
 *
 * <aside class="pull-quote">
 *		<blockquote>
 *			<p></p>
 *		</blockquote>
 *	</aside>
 *
 * --------------------------------------------------------------------- */
.pull-quote {
  position: relative;
  padding: 2.1rem 3rem 2.1rem 0px;
}
.pull-quote:before, .pull-quote:after {
  height: 1em;
  position: absolute;
  font-size: 10rem;
  color: rgba(0, 0, 0, 0.3);
}
.pull-quote:before {
  content: "\201C";
  top: 33px;
  left: 0;
}
.pull-quote:after {
  content: '\201D';
  bottom: -33px;
  right: 0;
}
.pull-quote blockquote {
  margin: 0;
}
.pull-quote blockquote:before {
  content: none;
}

/**
 * Stats Tab
 * ---------
 * markup:
 *
 * <ul class="stats-tabs">
 *		<li><a href="#">[value]<em>[name]</em></a></li>
 *	</ul>
 *
 * Extend this object into your markup.
 *
 * --------------------------------------------------------------------- */
.stats-tabs {
  padding: 0;
  margin: 3rem 0;
}
.stats-tabs li {
  display: inline-block;
  margin: 0 1.5rem 3rem 0;
  padding: 0 1.5rem 0 0;
  border-right: 1px solid #ccc;
}
.stats-tabs li:last-child {
  margin: 0;
  padding: 0;
  border: none;
}
.stats-tabs li a {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: bold;
  border: none;
  color: #252525;
}
.stats-tabs li a:hover {
  color: #07617d;
}
.stats-tabs li a em {
  display: block;
  margin: .6rem 0 0 0;
  font-size: 1.4rem;
  color: #4f4f4f;
}

/**
 * skillbars - (_skillbars.scss)
 * -------------------------------------------------------------------
 */
.skill-bars {
  list-style: none;
  margin: 6rem 0 3rem;
}
.skill-bars li {
  height: .6rem;
  background: #a1a1a1;
  width: 100%;
  margin-bottom: 6rem;
  padding: 0;
  position: relative;
}
.skill-bars li strong {
  position: absolute;
  left: 0;
  top: -3rem;
  font-weight: bold;
  color: #313131;
  text-transform: uppercase;
  letter-spacing: .2rem;
  font-size: 1.5rem;
  line-height: 2.4rem;
}
.skill-bars li .progress {
  background: #313131;
  position: relative;
  height: 100%;
}
.skill-bars li .progress span {
  position: absolute;
  right: 0;
  top: -3.6rem;
  display: block;
  color: white;
  font-size: 1.1rem;
  line-height: 1;
  background: #313131;
  padding: .6rem .6rem;
  border-radius: 3px;
}
.skill-bars li .progress span::after {
  position: absolute;
  left: 50%;
  bottom: -5px;
  margin-left: -5px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 5px solid #313131;
  content: "";
}
.skill-bars li .percent5 {
  width: 5%;
}
.skill-bars li .percent10 {
  width: 10%;
}
.skill-bars li .percent15 {
  width: 15%;
}
.skill-bars li .percent20 {
  width: 20%;
}
.skill-bars li .percent25 {
  width: 25%;
}
.skill-bars li .percent30 {
  width: 30%;
}
.skill-bars li .percent35 {
  width: 35%;
}
.skill-bars li .percent40 {
  width: 40%;
}
.skill-bars li .percent45 {
  width: 45%;
}
.skill-bars li .percent50 {
  width: 50%;
}
.skill-bars li .percent55 {
  width: 55%;
}
.skill-bars li .percent60 {
  width: 60%;
}
.skill-bars li .percent65 {
  width: 65%;
}
.skill-bars li .percent70 {
  width: 70%;
}
.skill-bars li .percent75 {
  width: 75%;
}
.skill-bars li .percent80 {
  width: 80%;
}
.skill-bars li .percent85 {
  width: 85%;
}
.skill-bars li .percent90 {
  width: 90%;
}
.skill-bars li .percent95 {
  width: 95%;
}
.skill-bars li .percent100 {
  width: 100%;
}

/* ===================================================================
 *  08. common and reusable styles
 *
 * ------------------------------------------------------------------- */
.section-intro {
  text-align: center;
  position: relative;
  /*margin-bottom: 1.5rem;*/
}
.section-intro h1 {
  font-weight: bold;
  font-size: 4.8rem;
  line-height: 1.375;
  color: #151515;
}
.section-intro h3 {
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.667;
  color: rgba(242, 242, 242, 0.5);
  text-transform: uppercase;
  letter-spacing: .3rem;
  margin-bottom: 1.2rem;
}

.section-intro h2 {
	text-transform: uppercase;
}
.section-intro .lead {
  font-size: 1.8;
  line-height: 1.833;
}
.section-intro.with-bottom-sep {
  padding-bottom: /*4.2rem; 1.0rem;*/ 0;
  position: relative;
	height: auto;
	margin: auto;
}

/*#people .section-intro.with-bottom-sep {
	padding-bottom: 5rem;
} */

.section-intro.with-bottom-sep::after {
  display: inline-block;
  height: 1px;
  width: 300px;
	position: relative;
	top: -2.0rem;
	background-color: var(--no7);
  text-align: center;
}

.cocoon-banner .section-intro.with-bottom-sep::before, .cocoon-banner .section-intro.with-bottom-sep::after {
  display: inline-block;
	position: relative;
	top: 2rem;
  height: 0px;
  width: 300px;
  background-color: var(--no7);
  text-align: center;

}

.cocoon-banner .section-intro.with-bottom-sep::after {
	top: -4rem;
}



/* -------------------------------------------------------------------
 * responsive:
 * section-intro
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
  .section-intro h1 {
    font-size: 4.4rem;
  }
  .section-intro .lead {
    font-size: 1.7rem;
  }
}
@media only screen and (max-width: 768px) {
  .section-intro h1 {
    font-size: 4rem;
  }
  .section-intro h3{
    font-size: 1.7rem;
  }
}
@media only screen and (max-width: 600px) {
  .section-intro h1 {
    font-size: 3.4rem;
  }
  .section-intro h3 {
    font-size: 1.7rem;
  }
}
@media only screen and (max-width: 500px) {
  .section-intro h3 {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 400px) {
  .section-intro h1 {
    font-size: 3.1rem;
  }
}
.wide {
  max-width: 1300px;
}

.narrow {
  max-width: 800px;
}

.js .animate-this, .js .animate-intro {
  opacity: 0;
}

.oldie .animate-this,
.oldie .animate-intro
.no-cssanimations .animate-this,
.no-cssanimations .animate-intro {
  opacity: 1;
}


/* ===================================================================
 *  09. header styles - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
header {
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 700;
}
header .row {
  height: auto;
  max-width: 1300px;
  position: relative;
}

/* -------------------------------------------------------------------
 * header logo - (_layout.css)
 * ------------------------------------------------------------------- */
header .header-logo {
  position: absolute;
  left: 32px;
  top: 30px;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
header .header-logo a {
  display: block;
  margin: 0;
  padding: 0;
  outline: 0;
  border: none;
  width: 120px;
  height: 27px;
  /*background: url("../images/logo.png") no-repeat center;
  background-size: 107px 27px;*/
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

/* -------------------------------------------------------------------
 * menu trigger - (_layout.css)
 * ------------------------------------------------------------------- */
#header-menu-trigger {
  display: block;
  position: fixed;
  right: 32px;
  top: 30px;
  height: 42px;
  width: 42px;
  line-height: 42px;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .2rem;
  color: var(--no10);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#header-menu-trigger.opaque {
  background-color: var(--no1);
}
/*
#home #header-menu-trigger {
	color: var(--no1);
}
#home #header-menu-trigger.opaque {
  background-color: var(--no10);
}
#home #header-menu-trigger .header-menu-icon {
	background-color: var(--no10);
} */


#header-menu-trigger.opaque .header-menu-text {
  background-color: var(--no1);
}

/* Return home to light on dark theme */
/* Initial color */
#header-menu-trigger.home-menu {
	color: var(--no1);
}
#header-menu-trigger.home-menu .header-menu-icon {
	background-color: var(--no1);
}
/* Appearing background color */
#header-menu-trigger.opaque.home-menu .header-menu-text {
  background-color: var(--no10); }
#header-menu-trigger.opaque.home-menu {
  background-color: var(--no10); }

/* Hover */
#header-menu-trigger.home-menu:hover, #header-menu-trigger.home-menu:focus {
  color: var(--no1) !important;
}
/* Done! :) */


#header-menu-trigger:hover, #header-menu-trigger:focus {
  color: var(--no10) !important;
	font-size: 1.55rem;
}

#header-menu-trigger .header-menu-text {
  display: block;
  position: absolute;
  top: 0;
  left: -75px;
  width: 75px;
  text-align: center;
  background-color: transparent;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#header-menu-trigger .header-menu-icon {
  display: block;
  height: 3px;
  width: 24px;
  background-color: var(--no10);
  position: absolute;
  top: 50%;
  right: 9px;
	margin-top: -1.5px;
}

#header-menu-trigger .header-menu-icon::before,
#header-menu-trigger .header-menu-icon::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: inherit;
  position: absolute;
  left: 0;
}
#header-menu-trigger .header-menu-icon::before {
  top: -9px;
}
#header-menu-trigger .header-menu-icon::after {
  bottom: -9px;
}

/* -------------------------------------------------------------------
 * off-canvas menu - (_layout.scss)
 * ------------------------------------------------------------------- */
#menu-nav-wrap {
  background: var(--no2);
  color: var(--no10);
  font-size: 1.5rem;
  line-height: 1.6;
  padding: 3.6rem 3rem;
  height: 100%;
  width: 240px;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  overflow-y: auto;
  z-index: 800;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

#menu-nav-wrap img {
	margin-left: -3.3rem;
}
#menu-nav-wrap a, #menu-nav-wrap a:visited {
  color: var(--no10);
}
#menu-nav-wrap a:hover, #menu-nav-wrap a:focus, #menu-nav-wrap a:active {
  color: var(--no10);
}
#menu-nav-wrap h3 {
  color: var(--no10);
  font-size: 2rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
#menu-nav-wrap .nav-list {
  margin: 3.6rem 0 1.5rem 0;
  padding: 0 0 1.8rem 0;
  list-style: none;
  line-height: 3.6rem;
}
#menu-nav-wrap .nav-list li {
  padding-left: 0;
  /*border-bottom: 1px dotted red; /*rgba(255, 255, 255, 0.03);*/
  line-height: 4.2rem;
	text-transform: uppercase;
}
#menu-nav-wrap .nav-list li:first-child {
  /*border-top: 1px dotted blue; /*rgba(255, 255, 255, 0.03);*/
}
#menu-nav-wrap .nav-list li a {
  color: var(--no10);
  display: block;
}
#menu-nav-wrap .nav-list li a:hover,
#menu-nav-wrap .nav-list li a:focus {
  color: white;
}
#menu-nav-wrap .header-social-list {
  list-style: none;
  display: inline-block;
  margin: 0;
  font-size: 2.1rem;
}
#menu-nav-wrap .header-social-list li {
  margin-right: 12px;
  padding-left: 0;
  display: inline-block;
}
#menu-nav-wrap .header-social-list li a {
  color: var(--no10); /*rgba(255, 255, 255, 0.5);*/
}
#menu-nav-wrap .header-social-list li a:hover,
#menu-nav-wrap .header-social-list li a:focus {
  color: var(--no10); /*white;*/
}
#menu-nav-wrap .header-social-list li:last-child {
  margin: 0;
}
#menu-nav-wrap .close-button {
  display: block;
  height: 30px;
  width: 30px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.0);
  position: absolute;
  top: 36px;
  right: 30px;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

#menu-nav-wrap .close-button:hover {
	background-color: var(--no3);
}

#menu-nav-wrap .close-button span::before,
#menu-nav-wrap .close-button span::after {
  content: "";
  display: block;
  height: 2px;
  width: 12px;
  background-color: /*#fff;*/ var(--no10);
  position: absolute;
  top: 50%;
  left: 9px;
  margin-top: -1px;
}
#menu-nav-wrap .close-button span::before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#menu-nav-wrap .close-button span::after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#menu-nav-wrap .sponsor-text {
  font-size: 1.4rem;
  line-height: 3rem;
}
#menu-nav-wrap .sponsor-text span {
  color: /*rgba(255, 255, 255, 0.5);*/ var(--no10);
}

/* menu is open */
.menu-is-open #menu-nav-wrap {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  visibility: visible;
  -webkit-overflow-scrolling: touch;
}

/* -------------------------------------------------------------------
 * responsive:
 * header section
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
  header .header-logo a {
    width: 51px;
    height: 24px;
    background-size: 51px 24px;
  }
}
@media only screen and (max-width: 460px) {
  #header-menu-trigger .header-menu-text {
    display: none;
  }
}





/* ===================================================================
 *  11. about - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#about {
  position: relative;
  padding: 4.2rem 0 12rem;
  background-color: #FFFFFF;
  min-height: 696px;
  text-align: center;
}
#about .about-wrap {
  max-width: 850px;
}
#about span {
  color: rgba(65, 125, 193, 1.0);
}
#about h3 {
  font-weight: bold;
  font-size: 1.9rem;
  line-height: 1.667;
  color: rgba(65, 125, 193, 1.0);
  text-transform: uppercase;
  letter-spacing: .3rem;
  position: relative;
}
#about h3::before {
  display: block;
  content: "";
  width: 3px;
  height: 9.6rem;
  background-color: rgba(149, 149, 149, 0.7);
  margin: 0 auto 2.4rem;
}
#about .lead {
  font-weight: bold;
  font-size: 4rem;
  line-height: 1.8;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 6rem;
}

/* -------------------------------------------------------------------
 * responsive:
 * about
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
  #about {
    min-height: 636px;
  }
  #about .about-wrap {
    max-width: 800px;
  }
  #about .lead {
    font-size: 3.8rem;
  }
}
@media only screen and (max-width: 900px) {
  #about .about-wrap {
    max-width: 720px;
  }
  #about .lead {
    font-size: 3.6rem;
  }
}
@media only screen and (max-width: 768px) {
  #about h3 {
    font-size: 1.7rem;
  }
  #about .about-wrap {
    max-width: 600px;
  }
  #about .lead {
    font-size: 3.1rem;
  }
}
@media only screen and (max-width: 600px) {
  #about {
    min-height: auto;
  }
  #about .about-wrap {
    max-width: 500px;
  }
  #about .lead {
    margin-top: 4.8rem;
    font-size: 2.8rem;
  }
}
@media only screen and (max-width: 500px) {
  #about h3 {
    font-size: 1.5rem;
  }
  #about .lead {
    font-size: 2.5rem;
  }
}
@media only screen and (max-width: 400px) {
  #about {
    padding: 4.2rem 0 9.6rem;
  }
  #about .about-wrap {
    max-width: 380px;
  }
  #about .lead {
    font-size: 2.3rem;
  }
}


/* ===================================================================
 *  12. services - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#services {
  background-color: #19191b;
  background-image: url(../images/hero-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  min-height: 800px;
  position: relative;
  padding: 15rem 0 15rem;
  color: rgba(255, 255, 255, 0.3);
}
#services .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(5, 5, 5, 0.7);
}
#services .gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .4;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9000000', endColorstr='#00000000',GradientType=0 );
}
#services .section-intro h3 {
  color: var(--no3);
}
#services .section-intro h1 {
  color: #FFFFFF;
}
#services .section-intro .lead {
  color: var(--no5);
	text-align: justify;
	text-justify: inter-word;
	text-align-last: center;
}
#services .services-content {
  text-align: center;
  max-width: 1040px;
}
#services .services-list {
  margin-top: 1.2rem;
  text-align: center;
}
#services .services-list .service-item {
  margin-bottom: 3rem;
  padding: 0 50px;
}
#services .services-list .service-item p {
  color: var(--no5);
}
#services .services-list .icon {
  display: inline-block;
  margin-bottom: 1.5rem;
}
#services .services-list .icon i {
  font-size: 5.4rem;
  color: #7ABFF7;
}
#services .services-list .h05 {
  font-size: 1.7rem;
  line-height: 1.765;
  color: #FFFFFF;
  margin-bottom: 3rem;
}

/* -------------------------------------------------------------------
 * responsive:
 * services
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
  #services .services-list .service-item {
    padding: 0 40px;
  }
}
@media only screen and (max-width: 900px) {
  #services .services-list .service-item {
    padding: 0 30px;
  }
}
@media only screen and (max-width: 768px) {
  #services {
    padding: 12rem 0 12rem;
  }
  #services .services-content {
    max-width: 550px;
  }
  #services .services-list .service-item {
    padding: 0 15px;
  }
  #services .services-list .icon i {
    font-size: 5.1rem;
  }
}
@media only screen and (max-width: 600px) {
  #services .services-list .service-item {
    padding: 0 10px;
  }
  #services .services-list .icon i {
    font-size: 5rem;
  }
#services .section-intro .lead {
	text-align: justify;
}
}
@media only screen and (max-width: 400px) {
  #services .services-list .service-item {
    padding: 0;
  }
}




/* ===================================================================
 *  13. portfolio - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#portfolio {
  background-color: #19191b;
  background-image: url("../images/hero-bg-dark.jpg");
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  min-height: 800px;
  position: relative;
  padding: 15rem 0 15rem;
  color: rgba(255, 255, 255, 0.3);
}
#portfolio .intro-wrap {
  padding: 0rem 0 21rem;
}
#portfolio h3 {
  color: #FFFFFF;
}
#portfolio .section-intro h1 {
  color: #FFFFFF;
}
#portfolio .section-intro .lead {
  color: rgba(242, 242, 242, 0.6);
}

#portfolio .bricks-wrapper:before,
#portfolio .bricks-wrapper:after {
  content: "";
  display: table;
  margin: 0;
}
#portfolio .bricks-wrapper:after {
  clear: both;
}
#portfolio .bricks-wrapper .brick {
	float: left;
	width: 100%;
	/*padding: 0 2em 4em; */
	/*padding: 0;
	margin: 0 0 0 0; */
	overflow: hidden;
}
#portfolio .bricks-wrapper .brick:nth-child(2n+1) {
  clear: both;
}

/* Used for publications draft, to be (most likely) deleted: */
.row-two {
	margin: 0 auto;
}

/* -------------------------------------------------------------------
 * masonry entries - (_layout.css)
 * ------------------------------------------------------------------- */
.bricks-wrapper .item-wrap { /* Necessary for people page currently! */
	display: table;
	/*position: relative; */
	margin: 0 0;
}
.bricks-wrapper .item-wrap .overlay {
  cursor: zoom-in;
}
.bricks-wrapper .item-wrap .overlay img {
  vertical-align: bottom;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.bricks-wrapper .item-wrap .overlay::before {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}
.bricks-wrapper .item-wrap .overlay::after {
  content: "...";
  font-size: 3rem;
  z-index: 1;
  display: block;
  height: 30px;
  width: 30px;
  line-height: 30px;
  margin-left: -15px;
  margin-top: -15px;
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
}
.bricks-wrapper .item-wrap .item-text {
  position: absolute;
  top: 0rem;
  left: 0;
  padding: 2.0rem 0 0 0rem;
  margin: 0 6rem 0 2rem;
  z-index: 3;
  color: #FFFFFF;
  text-align: left;
  width: 100%;
}

.bricks-wrapper .item-wrap .details-link {
  display: block;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 4.6rem;
  width: 4.6rem;
  line-height: 4.6rem;
  color: white;
  text-align: center;
  z-index: 2;
  border-radius: 3px;
  position: absolute;
  top: 3.6rem;
  right: 3rem;
}
.bricks-wrapper .item-wrap .details-link i {
  font-size: 2rem;
  line-height: 4.2rem;
}
.bricks-wrapper .item-wrap .details-link:hover, .bricks-wrapper .item-wrap .details-link:focus {
  background-color: #FFFFFF;
  color: #000000;
}

.bricks-wrapper .item-wrap:hover .overlay::before {
  opacity: 1;
  visibility: visible;
}
.bricks-wrapper .item-wrap:hover .overlay::after {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.bricks-wrapper .item-wrap:hover .overlay img {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

.bricks-wrapper .pub-overlay {
	text-align: left;
	position: absolute;
	bottom: 0rem;
	left: 0;
	z-index: 3;
	line-height: 1.8rem;
	font-size: 1.8rem;
	padding: 1.2rem 0 1.2rem 2rem;
	margin: 0 0 0rem;
	color: rgba(242, 242, 242, 1.0);
	background-color: rgba(0, 0, 0, 0.4);
	width: 100%;
	height: 11.2rem;
}

/* -------------------------------------------------------------------
 * Light Gallery Overrides - (_layout.css)
 * ------------------------------------------------------------------- */
.lg-sub-html {
  padding: 12px 20% 15px;
}
.lg-sub-html a, .lg-sub-html a:visited {
  color: rgba(65, 125, 193, 1.0);
}
.lg-sub-html a:hover, .lg-sub-html a:focus {
  color: #FFFFFF;
}
@media only screen and (max-width: 1024px) {
  .lg-sub-html {
    padding: 12px 15% 15px;
  }
}
@media only screen and (max-width: 768px) {
  .lg-sub-html {
    padding: 12px 40px 15px;
  }
}

.lg-sub-html h4 {
  color: #FFFFFF;
  font-size: 1.8rem;
  line-height: 1.333;
}

.lg-sub-html p {
  font-size: 1.3rem;
  line-height: 2.4rem;
  margin: .6rem 0 0;
  color: rgba(255, 255, 255, 0.6);
}

.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
  border-color: rgba(65, 125, 193, 1.0);
}

.lg-progress-bar .lg-progress {
  background-color: #FFFFFF;
}

#lg-counter {
}

/* -------------------------------------------------------------------
 * responsive:
 * portfolio
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
  #portfolio .intro-wrap {
    padding: 12rem 0 21rem;
  }
	#portfolio .bricks-wrapper .brick { /* tablet */
		float: none;
		width: 50%;
		padding: 0 0.75em 1.5em;
	}
}

@media only screen and (max-width: 600px) {
  #portfolio .bricks-wrapper .brick { /* Mobile */
	  float: none;
	  width: 100%;
	  padding: 1em 2em;
  }
}

/* ===================================================================
 *  14. testimonials - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#testimonials {
  background: var(--no2);
  padding: 4rem 0 4rem;
  text-align: center;
	position: relative;
	top: 0;
}
#testimonials h2 {
  font-weight: bold;
  font-size: 2.6rem;
  line-height: 1.667;
  color: /*rgba(65, 125, 193, 1.0);*/ var(--main-acc-color);
  text-transform: uppercase;
  letter-spacing: .3rem;
  position: relative;
  margin-bottom: 4.2rem;
}

#testimonials .flex-gall-container {
  width: 80%;
  max-width: 900px;
  margin: 0 auto;
}

#testimonial-slider {
  margin: 0 0 3rem 0;
  position: relative;
}
#testimonial-slider .slides {
  padding-bottom: 3rem;
}
#testimonial-slider p {
  font-weight: bold;
  /*font-size: 3rem;*/
	font-size: 2rem;
  line-height: 1.8;
  /*color: #151515;*/
	color: var(--no9);
}

#testimonials #testimonial-slider p a {
	color: var(--no9);
	text-decoration: underline;
}

#testimonial-slider p::before, #testimonial-slider p::after {
  display: inline-block;
  font-weight: bold;
  font-size: 3.6rem;
  line-height: 1;
}

testimonial-slider .testimonial-author {
  margin-top: 4.2rem;
}
#testimonial-slider .testimonial-author img {
  width: 7.4rem;
  height: 7.4rem;
  margin: 0 auto 1.2rem auto;
  display: block;
  border-radius: 50%;
  vertical-align: middle;
}
#testimonial-slider .testimonial-author .author-info {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
  margin-top: .9rem;
  margin-bottom: 3rem;
  color: #151515;
}
#testimonial-slider .testimonial-author .author-info span {
  display: block;
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 1.313;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(0, 0, 0, 0.5);
  margin-top: .3rem;
}

/* control nav */
#testimonials .flex-control-nav {
  width: 100%;
  text-align: center;
  display: block;
  position: absolute;
  bottom: -1.5rem;
}
#testimonials .flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
}

#testimonials .flex-control-paging li a {
  width: 9px;
  height: 9px;
  background-color: #959595;
  display: block;
  cursor: pointer;
  border-radius: 50%;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}
#testimonials .flex-control-paging li a:hover {
  background-color: #555555;
}
#testimonials .flex-control-paging li a.flex-active {
  background-color: #000000;
}

#testimonials .inner-embedded {
	height: 550px;
	width: 400px;
	background-color: rgba(0, 0, 0, 0.0);
	display: block;
	float: none;
	position: relative;
	left: calc(50% - 200px);
}

.iframe-placement {
	margin: 0 auto;
	padding: 0;
}

.most-recent-pub {
	overflow: hidden;
	width: 400px;
	height: 550px;
}

#pub-frame {
	overflow: hidden;
	width: 400px;
	height: 550px;
}

.flex-center.iframe {
	background-color: var(--no1-1);
}

#iframe-news {
	margin-bottom: 0rem;
	float: none;
	height: 300px;
	width: auto;
	color: #FFFFFF;
	line-height: 300px;
}

#iframe-news img {
	height: 300px;
	width: 450px;
}
@media only screen and (max-width: 822px) {
	#iframe-news span {
		padding-top: 0px;
		padding-bottom: 0;
		margin: 0;
		background-color: rgba(0, 0, 0, 0);
	}
}

#iframe-news span.back-up {
	display: inline-block;
	width: 40%;
	color: #FFFFFF;
	margin: 0;
	padding: 0 1rem;
	position: relative;
	top: 50%;
	left: 25%;
	transform: translate(-75%, -50%);
}

@media only screen and (max-width: 822px) {
	.flex-center.iframe {
		height: 300px;
	}

	#iframe-news {
		transform: translateY(-50px);
		margin: auto 0;
		margin-bottom: /*-100px;*/ -25px;
		height: auto;
		padding-bottom: 1.5rem;

	}
	#iframe-news img {
		min-height: 10rem;
		padding-top: 50px;
	}
}

@media only screen and (max-width: 500px) {
	#iframe-news img {
		width: calc(100vw);
		height: auto;
	}
}

.iframe-pubs-text, .iframe-news-text {
	margin: 0rem;
}

#iframe-pubs {
	width: 230.76px;
	height: 300px;
	margin-bottom: 0;
	overflow: hidden;
	position: relative;
	color: #000000;
	line-height: 300px;
}

#iframe-pubs img {
	margin: 0;
	padding: 0;
	position: relative;
	width: 230.76px;
	height: 300px;
}

.twitter-widget {
	position: relative;
	margin: 0;
	padding: 0;
	height: 550px;
}

.twitter-widget .twitter-timeline {
	margin: 0 auto;
}

#testimonials #testimonial-slider p a:hover {
	color: var(--main-acc-color);
}

/* -------------------------------------------------------------------
 * responsive:
 * testimonials
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
  #testimonial-slider p {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 768px) {
  #testimonials h2 {
    font-size: 1.7rem;
  }

  #testimonial-slider p {
    font-size: 1.5rem;
  }
  #testimonial-slider .testimonial-author img {
    width: 6.6rem;
    height: 6.6rem;
  }
  #testimonial-slider .testimonial-author .author-info {
    font-size: 1.8rem;
  }
  #testimonial-slider .testimonial-author .author-info span {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 600px) {
  #testimonials .flex-gall-container {
    width: 90%;
  }

  #testimonial-slider p {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 500px) {
  #testimonials h2 {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 400px) {
  #testimonials .flex-gall-container {
    width: 100%;
  }

  #testimonial-slider p {
    font-size: 1.0rem;
  }
}


/* ===================================================================
 *  15. clients - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#clients {
  background-color: #e9eaea;
  padding: 4.8rem 0 4.8rem;
}
#clients .client-lists .owl-item {
  opacity: .6;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}
#clients .client-lists .owl-item:hover {
  opacity: 1;
}
#clients .owl-carousel .owl-nav {
  margin-top: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
#clients .owl-carousel .owl-nav [class*='owl-'] {
  color: #FFFFFF;
  font-size: 1.4rem;
  height: 3rem;
  line-height: 3rem;
  margin: .6rem;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.5);
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
}
#clients .owl-carousel .owl-nav [class*='owl-']:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  text-decoration: none;
}
#clients .owl-carousel .owl-nav .disabled {
  background: rgba(0, 0, 0, 0.2);
  cursor: default;
}
#clients .owl-carousel .owl-nav.disabled + .owl-dots {
  margin-top: 1.8rem;
}
#clients .owl-carousel .owl-dots {
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
#clients .owl-carousel .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
  *display: inline;
}
#clients .owl-carousel .owl-dots .owl-dot span {
  width: 9px;
  height: 9px;
  background-color: #959595;
  margin: 6px 6px;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity 200ms ease;
  border-radius: 50%;
}
#clients .owl-carousel .owl-dots .owl-dot.active span,
#clients .owl-carousel .owl-dots .owl-dot:hover span {
  background-color: #000000;
}


/* ===================================================================
 *  16. contact - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#contact {
  background-color: #111111;
  background-image: url(../images/contact-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  padding: 12rem 0 12rem;
  position: relative;
}
#contact .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .75;
  background-color: #000000;
}
#contact .section-intro h1 {
  color: white;
}
#contact .section-intro h3 {
  color: rgba(242, 242, 242, 0.5);
}
#contact .section-intro p.lead {
  color: rgba(242, 242, 242, 0.4);
}

.contact-content {
  max-width: 1024px;
  margin-top: 3rem;
  color: #FFFFFF;
  z-index: 600;
  position: relative;
}
.contact-content h5 {
  color: #FFFFFF;
  margin-bottom: 5.4rem;
}
.contact-content h6 {
  color: #555555;
  font-size: 1.4rem;
}

/* contact info */
.contact-info .cinfo {
  margin-bottom: 4.2rem;
}

/* contact form */
#contact form {
  margin-top: 0;
  margin-bottom: 3rem;
}
#contact form .form-field {
  position: relative;
}
#contact form .form-field:before, #contact form .form-field:after {
  content: "";
  display: table;
}
#contact form .form-field:after {
  clear: both;
}
#contact form .form-field label {
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.4;
  position: absolute;
  bottom: 1.5rem;
  right: 0;
  text-transform: uppercase;
  letter-spacing: .05rem;
  padding: .6rem 2rem .6rem 2rem;
  margin: 0;
  color: #000000;
  background: rgba(65, 125, 193, 1.0);
  border-radius: 3px;
}
#contact form .form-field label::after {
  position: absolute;
  right: 15px;
  top: 1px;
  margin-top: -6px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(65, 125, 193, 1.0);
  content: "";
}
#contact form ::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
#contact form :-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
  /* Firefox 18- */
}
#contact form ::-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
  /* Firefox 19+ */
}
#contact form :-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
#contact form .placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

#contact input[type="text"],
#contact input[type="password"],
#contact input[type="email"],
#contact textarea {
  width: 100%;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 3.6rem;
  background: rgba(255, 255, 255, 0.1);
}

#contact input[type="text"]:focus,
#contact input[type="password"]:focus,
#contact input[type="email"]:focus {
  color: #FFFFFF;
}

#contact textarea {
  min-height: 21rem;
  padding: 1.8rem 2rem;
}
#contact textarea:focus {
  color: #FFFFFF;
}

#contact button.submitform {
  font-size: 1.5rem;
  display: block;
  letter-spacing: .2rem;
  height: 6rem;
  line-height: 6rem;
  padding: 0 3rem;
  width: 100%;
  background: rgba(65, 125, 193, 1.0);
  color: #000000;
  margin-top: .6rem;
}
#contact button.submitform:hover, #contact button.submitform:focus {
  background: #f89e0f;
}

#message-warning, #message-success {
  display: none;
  background: #000000;
  padding: 3rem;
  margin-bottom: 3.6rem;
  width: 100%;
}

#message-warning {
  color: #D32B2E;
}

#message-success {
  color: rgba(65, 125, 193, 1.0);
}

#message-warning i,
#message-success i {
  margin-right: 10px;
}

/* form loader */
#submit-loader {
  display: none;
  position: relative;
  left: 0;
  top: 1.8rem;
  width: 100%;
  text-align: center;
  margin-bottom: 4.2rem;
}
#submit-loader .text-loader {
  display: none;
  font-weight: bold;
  font-size: 1.4rem;
  color: #FFFFFF;
  letter-spacing: .2rem;
  text-transform: uppercase;
}

.oldie #submit-loader .s-loader {
  display: none;
}
.oldie #submit-loader .text-loader {
  display: block;
}

/* ---------------------------------------------------------------
 * loader animation - (_layout.scss)
 * --------------------------------------------------------------- */
.s-loader {
  margin: 1.2rem auto 3rem;
  width: 70px;
  text-align: center;
  -webkit-transform: translateX(0.45rem);
  -ms-transform: translateX(0.45rem);
  transform: translateX(0.45rem);
}

.s-loader > div {
  width: 9px;
  height: 9px;
  background-color: #FFFFFF;
  border-radius: 100%;
  display: inline-block;
  margin-right: .9rem;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.s-loader .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.s-loader .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
/* -------------------------------------------------------------------
 * responsive:
 * contact
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {
  .contact-info {
    width: 38%;
  }
}
@media only screen and (max-width: 768px) {
  .contact-content {
    max-width: 600px;
    text-align: center;
  }

  .contact-info {
    width: 100%;
    margin-top: 3.6rem;
  }
}
@media only screen and (max-width: 600px) {
  .contact-content {
    max-width: 480px;
  }
}
@media only screen and (max-width: 400px) {
  .contact-info {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
}


/* ===================================================================
 *  17. footer - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
footer {
  margin: 0 0 5.4rem 0;
  padding: 0;
  /*font-size: 1.5rem;*/
 background-color: var(--no1);
}

#people-carousel footer {
	position: relative;
	width: 100%;
	margin-bottom: 0;

}
footer a, footer a:visited {
  color: var(--wild);
}
footer a:hover, footer a:focus {
  color: var(--main-acc-color); /*rgba(65, 125, 193, 1.0);*/
}
footer .row {
  max-width: 1024px;
}

footer h4.h05 {
  color: var(--wild);
  position: relative;
  padding-bottom: 0rem;
  margin: 0.5rem 0 0;
	font-size: calc(0.3rem + 0.7vw);
	letter-spacing: 0.1rem;
}

footer h4.h05::after {
  display: block;
  content: "";
  width: 12rem;
  height: 1px;
  background-color: var(--no4); /* gray underlines */
  margin: 0.5rem auto 0 auto;
}

/* footer main
 * --------------------------------- */
.footer-main {
  padding-top: 4rem;
  padding-bottom: 0rem;

	margin-right: calc(-6rem + 16vw);
	margin-left: calc(-6rem + 16vw);
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	column-gap: 0;
	row-gap: 1.5rem;
}

#footer ul .list-links {
	list-style: none;
	padding-top: 0px;
}

#footer ul .list-links li {
	display: inline;
	text-align: center;
	vertical-align: bottom;
}

.footer-social img {
	height: 5rem;
	width: auto;
}



.footer-subscribe img {
	height: 6rem;
	width: auto;
	margin: auto 0;
}

.footer-col {
	/*height: calc(1.8rem + 3.3vw);*/
	display: flex;
	justify-content: center;
}

.footer-main .footer-twitter a {
	color: rgba(255, 255, 255, 0.4);
}

.footer-main .footer-twitter a:hover {
	color: #FFFFFF;
}

.footer-main .subscribe-form {
  position: relative;
}
.footer-main #mc-form {
  margin: 0;
  padding: 0;
}
.footer-main #mc-form input[type="email"] {
  height: 6rem;
  padding: 1.5rem 8rem 1.5rem 2rem;
  margin-bottom: 1.5rem;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}
.footer-main #mc-form button {
  background-color: rgba(65, 125, 193, 1.0);
  color: #000000;
  width: 6rem;
  height: 6rem;
  line-height: 6rem;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.footer-main #mc-form button:hover {
  background-color: #f89e0f;
}
.footer-main #mc-form button i {
  font-size: 2.6rem;
  line-height: 6rem;
  margin: 0;
  position: relative;
  left: .2rem;
}
.footer-main #mc-form label {
  color: rgba(65, 125, 193, 1.0);
}

/* footer bottom
 * --------------------------------- */
.footer-bottom {
	display: flex;
  margin-top: 4rem;
  font-size: 1.4rem;
	text-align: center;
}

.footer-bottom .copyright span {
  display: inline-block;
	color: var(--wild);

}


.footer-bottom .copyright span:first-child::after {
  content: "|";
  display: inline-block;
  padding: 0 1rem 0 1.2rem;
  color: var(--wild);/*rgba(255, 255, 255, 0.1); */
}
.footer-bottom .copyright span:last-child::after {
  display: inline-block;
}

#go-top {
  position: fixed;
  bottom: 42px;
  right: 30px;
  z-index: 700;
  display: none;
}
#go-top a {
  text-decoration: none;
  border: 0 none;
  display: block;
  height: 43px;
  width: 40px;
  line-height: 43px;
  text-align: center;
  background-color: #000000;
  color: #888;
  text-transform: uppercase;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#go-top a i {
  font-size: 1.7rem;
  line-height: inherit;
}
#go-top a:visited {
  background: #000000;
  color: #888;
}
#go-top a:hover, #go-top a:focus {
  background: #000000;
  color: #FFFFFF;
}

/* -------------------------------------------------------------------
 * responsive:
 * footer
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
  #go-top {
    bottom: 0;
    right: 0;
  }
	#go-top a i {
		font-size: 1.4rem;
	}
}

@media only screen and (max-width: 600px) {
  .footer-bottom {
    padding-bottom: .6rem;
	  font-size: 1.0rem;
  }

  .footer-bottom .copyright span {
  }
  .footer-bottom .copyright span::after {
  }

  footer h4.h05::after {
	  width: 8rem;
  }
}

/* ===================================================================
 *  18. Gallery General/Shared
 *
 * ------------------------------------------------------------------- */

#gallery .gall-container {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding-top: calc(4.0rem + 1.8vw);
	padding-bottom: calc(4.0rem + 1.8vw);
	z-index: -5;
	background-color: rgba(0, 100, 100, 0.0);
}

.gallery-item { /* Applies to each image, individually */
	position: relative;
	/* overflow: hidden */
	font-size: 100%;
	margin: 0;
	padding: 0;
	/* alt stuff */
}

.gall-grid img, .gall-grid-match img { /* Each image has same size as the grid cells. Defines transition for zoom */
	/* Nota bene: I think each image has to have the exact same dimensions: W=1x, H=1.3x. Although if they are slightly off, the border may catch a tiny amount. I've been using a properly sized AI illustrator, centering the image, then exporting the artboard. */
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
}

.gallery-img { /* Each img shares this class; fit entire cell */
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dark-cocoon-back {
	background-image: url("../images/hero-bg-light-blur.jpg");
		/*linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%),
		url("../images/hero-bg-light-blur.jpg");*/
	background-size: cover;
	background-repeat: no-repeat;
}

.banner {
	width: 100%;
	height: auto;
	display: block;
	justify-content: center;
	align-content: center;
	background-color: var(--no1-1); /*var(--no1);*/
	padding: 12px 0 20px; /*12px 0 20px; /*12px 0 32px;*/
	margin-bottom: 0px;
	z-index: +100;
}
.banner img {
	z-index: +101;
}



#gallery .cocoon-banner {
	background-color: transparent;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: /*top left*/ center;
	background-origin: content-box, border-box;
	z-index: 5;
	width: 100%;
	height: 150px;
	margin-bottom: 0rem;
	padding: 0;
	margin-top: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#gallery .cocoon-banner h2 {
	color: var(--no10);
	padding: /*4rem 0 4rem;*/ 0;
	position: relative;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: +0.1rem;
	line-height: 150px !important;
}

#gallery .intro-wrap { /* Modified version of portfolio padding */
	padding: 0 0 0rem;
	margin-top: 0;

}

#gallery .people-segments:not(#news) {
	background-color: transparent;
	position: relative;
	top: calc(4.5rem + 1.8vw);
	height: auto;
	width: 100%;
	padding: 0 0;
	margin: 0 0;
}

#gallery .people-segments.first-segment {
	position: relative;
	top: 1.75rem;
	margin: 0 0;
}

#gallery .people-segments h3, #gallery .people-segments h2 {
	color:  var(--no10);
	margin-bottom: 0;
	display: block;
}

.container-wrapper {
	display: flex;
	flex-direction: column;
	position: relative;
	padding-bottom: 4rem;
	border: 1px solid red;
	background-image: none;
}

/* Hover and zoom settings */
.img-hover-zoom {
	overflow: hidden;
	display: inline-block;
}

.img-hover-zoom img {
	width: 100%;
	vertical-align: middle;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
}

.img-hover-zoom:hover img {
	transform: scale(1.3);
}

.img-hover-zoom-shallow {
	overflow: hidden;
	display: inline-block;
}

.img-hover-zoom-shallow img {
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
}

.img-hover-zoom-shallow:hover img {
	transform: scale(1.08);
}

/* End of hover-zoom-shallow */

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

/* 'Stolen' from Portfolio section */
#portfolio ul li a::after, #gallery ul li a::after{
	content: '';
	position: relative;
	bottom: 0;
	left: 0;
	width: 100%;
	opacity: 1.0;
	transform: scale(0);
	transform-origin: center;
}

#portfolio ul li a:hover::after, #portfolio ul li a:focus::after, #gallery ul li a:hover::after, #gallery ul li a:focus::after {
	transform: scale(1);
}

#portfolio ul, #gallery ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#portfolio ul li, #gallery ul li {
	display: inline;
	position: relative;
}

/* My button stuff */

#news .mybutton, #people-carousel #carousel .mybutton, #lachesis .mybutton {
	background-color: transparent;
	color: var(--no9);
	transform-origin: bottom center;
}

#news .mybutton:hover, #people-carousel #carousel .mybutton:hover, #lachesis .mybutton:hover {
	background-color: var(--no6);
	color: var(--no1-1) !important;
}

@media (hover: none) {
	.mybutton {
		background: var(--no6) !important;
		color: var(--no1-1) !important;
	}
}

/* Miscellaneous */

.wrapper {
	margin: 0;
	padding: 0;
	height: auto;
	position: relative;
	display: block;
	top: 0;
}

/* ------------------- General Gallery Responsiveness ------------------- */

@media only screen and (max-width: 768px) { /* Tablet */
	#gallery .intro-wrap {
		padding: 12rem 0 5rem;
	}
	.banner img {
		width: 350px;
	}
	.cocoon-banner .row {
	}
}

@media only screen and (max-width: 600px) {
}

/* The grid sizing should already be responsive! See #publications #gallery .gall-grid */


/* ===================================================================
 *  19. Home - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#home {
  width: 100%;
  height: 100%;
  background-color: #151515;
  background-image: url("../images/Home-bg-enhanced-3.jpg");
  background-repeat: no-repeat;
  background-position: center 30%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  min-height: 804px;
  position: relative;
}

#home img.mobile-background {
	display: none;
}

@media screen and (max-width: 499px) and (hover: none), screen and (max-height: 499px) and (hover: none) {
	#home {
		background-image: none;
    background-color: transparent;
	}
	#home .mobile-fix {
    z-index: -5;
		height: 100%;
		width: 100%;
		position: relative;
    background-color: transparent;
	}
	#home img.mobile-background {
    background-color: transparent;
		height: 100%;
		width: 100%;
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
	 	object-fit: cover;
  		}
    #home .home-content-table {
      z-index: +10;
      position: absolute;
      top: 0;
    }
}


#home .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background-color: #19191b;
}

.home-content-table {
  width: 100%;
  height: 100%;
  display: table;
  position: relative;
  text-align: center;
}

#home .home-content-table img {
	width: calc(50vw + 150px);
}
.home-content-tablecell {
  display: table-cell;
  vertical-align: middle;
  z-index: 500;
}
.home-content-tablecell .row {
  position: relative;
  padding-top: 16.2rem;
  padding-bottom: 15rem;
}
.home-content-tablecell h3 {
  font-weight: bold;
  font-size: 2.2rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: .3rem;
  margin: 0 0 .9rem 0;
}
.home-content-tablecell h1 {
  font-style: bold;
  font-size: 9rem;
  line-height: 1.133;
  color: #FFFFFF;
}
.home-content-tablecell .more {
  margin: 4.8rem 0 0 0;
}
.home-content-tablecell .more .button {
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* home social-list */
.home-social-list {
  position: absolute;
  left: 48px;
  bottom: 54px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 2.4rem;
  line-height: 1.75;
  text-align: center;
}
.home-social-list::before {
  display: block;
  content: "";
  width: 2px;
  height: 42px;
  background-color: rgba(255, 255, 255, 0.3);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
}
.home-social-list li {
  padding-left: 0;
}
.home-social-list li a, .home-social-list li a:visited {
  color: #FFFFFF;
}
.home-social-list li a:hover,
.home-social-list li a:focus,
.home-social-list li a:active {
  color: #151515;
}

/* scroll down */
.scrolldown {
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: right top 0;
  -ms-transform-origin: right top 0;
  transform-origin: right top 0;
  float: right;
}

.scrolldown i.fa.fa-long-arrow-right {
  padding-left: 9px;
	font-size: 1.7rem;
}

.scrolldown .fa-long-arrow-right:before {
	position: relative;
	top: 0.05rem;
}

.scrolldown a:hover, .scrolldown a:focus, .scrolldown a:active {
  color: #151515 !important;
}

html[data-useragent*='MSIE 10.0'] .scrolldown,
.oldie .scrolldown {
  display: none;
}

.scroll-icon {
  display: inline-block;
  font-weight: bold;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .3rem;
  color: #FFFFFF !important;
  background: transparent;
  position: relative;
  top: 36px;
  right: 42px;
  -webkit-animation: animate-it 3s ease infinite;
  animation: animate-it 3s ease infinite;
}
#news .scroll-icon {
	color: var(--no10);
}

/* vertical animation */
@-webkit-keyframes animate-it {
  0%, 60%, 80%, 100% {
    -webkit-transform: translateX(0);
	  transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-5px);
	  transform: translateX(-5px);
  }
  40% {
    -webkit-transform: translateX(20px);
	  transform: translateX(20px);
  }
}
@keyframes animate-it {
  0%, 60%, 80%, 100% {
    -webkit-transform: translateX(0);
	  transform: translateX(0);
  }
  20% {
    -webkit-transform: translateX(-5px);
	  transform: translateX(-5px);
  }
  40% {
    -webkit-transform: translateX(20px);
	  transform: translateX(20px);
  }
}

/* -------------------------------------------------------------------
 * Home & Research combined
 *
 * ------------------------------------------------------------------- */
/* Note that the #home-page id refers to the research section of the home-page. The rest of the pages use the custom of being all wrapped in a section with an id identifying the page (e.g. #research, #people, etc.) */

#home-page #gallery {
  background-color: #19191b;
  height: auto;
  position: relative;
	top: 0;
  padding: 0rem 0 0rem;
  color: rgba(255, 255, 255, 0.3);
}

#home-page #gallery .intro-wrap {
	padding-top: 4rem;
}

#home-page #gallery .research-wrapper .gall-container {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 4vw auto; /* top & bottom margins must equal row/column gap in .gall-grid */
	padding-top: 0;
	padding-bottom: 0;
	background-image: none;
}

#home-page #gallery .intro-wrap h2 {
	color: var(--no1);
}

#home-page #gallery .gall-grid, #research #gallery .gall-grid { /* Defines a new grid for the home page*/
	display: grid;
	position: relative;
	align-items: center;
	justify-content: center;
	/* May change these for style */
	grid-template-columns: repeat(auto-fit, minmax(330.24px, 1fr));
	/* This is the size that makes it break into 2 columns at 768px (tablet). In the browser view on the alternate Tufts comptuer it looks wrong, but the math is simple and the file on my own desktop looks right. -Audrey */
	grid-template-rows: auto;
	width: 85%;
	row-gap: 4vw;
	column-gap: 4vw;
}

#home-page #small-themes {
	display: none;
}

#research #gallery .gallery-item, #home-page #gallery .gallery-item { /* The cursor suggests it's clickable otherwise */
	cursor: default;
}

#home-page .with-bottom-sep .col-twelve {
	margin-bottom: -4rem;
}

#research p.lead, #home-page p.lead {
	display: none;
}

/* This weird divider thing is for a very specific purpose! The research grid themes are originally centered so that the white space lines up with the middle gap of the grid. But when the browser size decreases such that the grid is only one column, this centering looks weird (the words on left & right are not the same length). This centers the entire line. Divider is only visible at this smaller screen size, when the original themes list disappears. Is this a crude hack? Yes. Yes it is. */
.divider {
	height: 30px;
	width: 2px;
	position: relative;
	top: 0.5rem;
	left: calc(50% - 1px);
	white-space: nowrap;
}

.divider.top {
	margin-bottom: 0.5rem;
	margin-top: -1rem;
}

.divider.top::before, .divider.top::after, .divider.bottom::before, .divider.bottom::after {
	display: inline-block;
	position: absolute;
	top: 0;
	width: auto;
}

.divider.top::before, .divider.bottom::before {
	right: 0.75rem; }

.divider.top::after, .divider.bottom::after {
	left: 0.75rem; }

.divider.top::before {
	content: "SUSTAINABLE TECHNOLOGY"; }

.divider.top::after {
	content: "ADVANCED MATERIALS"; }

.divider.bottom::before {
	content: "ART & SCIENCE"; }

.divider.bottom::after {
	content: "GLOBAL HEALTH"; }


/* Grid Text */
.theme-overlay-desc {
	position: absolute;
	bottom: 0;
	left: 0;
	display: none;
}

.theme-overlay-desc a {
	text-decoration: underline;
}

.text-sizing {
	font-size: 2rem;
}

.theme-overlay-cats {
	position: absolute;
	top: 0px;
	left: 0;
  	padding-top: calc(3.0rem + 2.2vw);
  	margin: 0em 60px 0 1.25em;
  	z-index: 3;
  	color: #FFFFFF;
  	text-align: left;
  	width: 100%;
	overflow-x: hidden;
	font-size: 100%;
}

.theme-overlay-cats a {
  text-decoration: underline;
}

.theme-overlay-desc p { /* Formats the research theme overlay description */
	background-color: rgba(0, 0, 0, 0.4);
	padding: 1rem 2rem;
	margin: 0;
	font-size: 1.0em;
	line-height: 1.2;
}

.gall-container .gall-grid .folio-title {
	width: 100%;
	color: #FFFFFF;
	font-size: 1.2em;
	line-height: 1.1;
	text-transform: uppercase;
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px 0 0;
	margin: 3px 60px 0 1.05em;
}

.gall-container .gall-grid .folio-types {
  text-transform: uppercase;
  letter-spacing: .1rem;
  position: relative;
	font-size: 0.9em;
	line-height: 1.4;
}


/* -------------------------------------------------------------------
 * responsive:
 * home section
 * ------------------------------------------------------------------- */

@media only screen and (min-width: 1800px) {
}

@media only screen and (max-width: 1200px) {
  .home-content-tablecell h3 {
    font-size: 2.1rem;
  }
  .home-content-tablecell h1 {
    font-size: 7rem;
  }
}

@media only screen and (max-width: 1024px) {
  .home-content-tablecell h3 {
    font-size: 2rem;
  }
  .home-content-tablecell h1 {
    font-size: 6rem;
  }
	.gall-container .gall-grid .theme-overlay-cats {
		margin-top: 0.2em;
	}
	.text-sizing {
		font-size: 1.8rem;
	}
}

@media only screen and (max-width: 925px) {
	.text-sizing {
		font-size: 1.6rem;
	}
	#home-page #gallery .gall-grid, #research #gallery .gall-grid { /* Previously under 930px */
		width: 90%;
	}
}

@media only screen and (max-width: 768px) {
  .home-content-tablecell .row {
    max-width: 600px;
  }
  .home-content-tablecell h3 {
    font-size: 1.8rem;
  }
  .home-content-tablecell h1 {
    font-size: 5.2rem;
  }
  .home-content-tablecell h1 br {
    display: none;
  }
  .home-social-list {
    left: 36px;
    bottom: 30px;
    font-size: 2.1rem;
  }
  .home-social-list::before {
    height: 30px;
  }
  .scrolldown .scroll-icon {
    font-size: 1.2rem;
    top: 24px;
    right: 10px;
  }
  .scrolldown .scroll-icon i.fa.fa-long-arrow-right {
		font-size: 1.4rem;
	}
  .scrolldown .fa-long-arrow-right:before {
	position: relative;
	top: 0rem;
}

	#home-page #gallery .gall-grid, #research #gallery .gall-grid {
		width: 75%;
	}
	.text-sizing {
		font-size: 2.0rem;
	}

	.divider, #home-page .intro-wrap h3 {
		display: none;
	}
	#home-page #small-themes {
		display: block;
	}
	#home-page .intro-wrap h2 {
		display: none;
	}
	#research p.lead, #home-page p.lead {
		display: block;
		font-size: 1.4rem;
	}
}

@media only screen and (max-width: 600px) {
  .home-content-tablecell .row {
    max-width: 480px;
    padding-top: 12rem;
    padding-bottom: 12rem;
  }
  .home-content-tablecell h3 {
    font-size: 1.7rem;
  }
  .home-content-tablecell h1 {
    font-size: 4.8rem;
  }
	.text-sizing {
		font-size: 1.6rem;
	}
	#research p.lead, #home-page p.lead {
		font-size: 1.18rem;
	}
}
@media only screen and (max-width: 500px) {
  .home-content-tablecell .row {
    max-width: 420px;
  }
  .home-content-tablecell h3 {
    font-size: 1.5rem;
  }
  .home-content-tablecell h1 {
    font-size: 4.2rem;
  }
  .home-social-list {
    left: 30px;
    bottom: 30px;
    font-size: 1.8rem;
  }
  .home-social-list::before {
    height: 24px;
  }
	.text-sizing {
		font-size: 1.4rem;
	}
/* Removed a curly brace here */

  .home-content-tablecell .row {
    padding-top: 4.8rem;
    padding-bottom: 10.8rem;
  }
  .home-content-tablecell h3 {
    font-size: 1.4rem;
  }
  .home-content-tablecell h1 {
    font-size: 3.6rem;
  }
}

@media only screen and (max-width: 350px) {
	#home-page #gallery .gall-grid, #research #gallery .gall-grid {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
	#research p.lead, #home-page p.lead {
		font-size: 1.0;
	}
}

/* ===================================================================
 *  20. About Silklab Page/Template
 *  DOES NOT EXIST YET! :)
 * ------------------------------------------------------------------- */


/* ===================================================================
 *  21. People Page
 *
 * ------------------------------------------------------------------- */

#people #gallery {
	width: 100%;
}

#people #gallery .cocoon-banner, #alumni #gallery .cocoon-banner, #collaborators #gallery .cocoon-banner {
	background-image: url("../images/banners/people_banner.jpg");
}

#gallery .cocoon-banner {
	background-color: transparent;
	height: 150px;
	padding: 0;
	margin: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.cocoon-banner::after, .cocoon-banner::before {
	content: "";
	display: inline-block;
	height: 15px;
	width: 100%;
	position: absolute;
	wekbit-box-shadow: 0 0 13px 10px var(--no1-1);
	-moz-box-shadow: 0 0 13px 10px var(--no1-1);
	box-shadow: 0 0 13px 10px var(--no1-1);
}

.cocoon-banner::after {
	top: -15px;
}
.cocoon-banner::before {
	bottom: -15px;
}

.cocoon-banner .section-intro {
	height: 100%;
	margin: auto auto;
	align-self: center;
}

#people #gallery .gall-grid { /* Defines a new grid for the people page, see section 13.5 for more */
	display: grid;
	position: relative;
	align-items: flex-start;
	justify-content: center;
	/* May change these for style */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-template-rows: auto;
	width: 85%;
	row-gap: calc(20px + 1.6vw); /* Basically gives it a minimum of 1rem for mobile sizes. Responsiveness without a query! Love it */
	column-gap: calc(20px + 1.6vw);
}

/* These are sized using math to match the flex-grid in the top section. If you have fewer than 7 people, this should be applied. -Audrey */
#people #gallery .gall-grid-match {
	display: grid;
	position: relative;
	align-items: center;
	justify-items: center;
	justify-content: center;
	align-content: center;
	margin: 0 auto;
	padding: 0;
	grid-gap: calc(20px + 1.6vw);
}

.gall-grid-match .gallery-item {
	padding: 0;
	margin: 0;
	width: 100%;
}

/* ----- Adjustments...see JS of people.html for explanation ----- */


@media only screen and (min-width: 1px) { /* one image */
	#people #gallery .gall-grid-match {
		grid-template-columns: calc(85vw);
	}
}
@media only screen and (min-width: 503.597px) { /* two images */
	#people #gallery .gall-grid-match.visitors {
		grid-template-columns: repeat(var(--num-visitors-w2), calc(41.7vw - 10px));
	}
	#people #gallery .gall-grid-match.undergrads {
		grid-template-columns: repeat(var(--num-undergrads-w2), calc(41.7vw - 10px));
	}
}

@media only screen and (min-width: 782.396px) { /* three images */
	#people #gallery .gall-grid-match.visitors {
		grid-template-columns: repeat(var(--num-visitors-w3), calc(27.27666vw - 13.333px));
	}
	#people #gallery .gall-grid-match.undergrads {
		grid-template-columns: repeat(var(--num-undergrads-w3), calc(27.27666vw - 13.333px));
	}
}

@media only screen and (min-width: 1072.319px) { /* four images */
	#people #gallery .gall-grid-match.visitors {
		grid-template-columns: repeat(var(--num-visitors-w4), calc(20.05vw - 15px));
	}
	#people #gallery .gall-grid-match.undergrads {
		grid-template-columns: repeat(var(--num-undergrads-w4), calc(20.05vw - 15px));
	}
}

@media only screen and (min-width: 1374.046px) { /* five images */
	#people #gallery .gall-grid-match.visitors {
		grid-template-columns: repeat(var(--num-visitors-w5), calc(15.72vw - 16px));
	}
	#people #gallery .gall-grid-match.undergrads {
		grid-template-columns: repeat(var(--num-undergrads-w5), calc(15.72vw - 16px));
	}
}

@media only screen and (min-width: 1688.312px) { /* six images */
	#people #gallery .gall-grid-match.visitors {
		grid-template-columns: repeat(var(--num-visitors-w6), calc(12.8333vw - 16.6666px));
	}
	#people #gallery .gall-grid-match.undergrads {
		grid-template-columns: repeat(var(--num-undergrads-w6), calc(12.8333vw - 16.6666px));
	}
}

@media only screen and (min-width: 2015.915px) { /* seven images */
	#people #gallery .gall-grid-match.visitors {
		grid-template-columns: repeat(var(--num-visitors-w7), calc(10.77143vw - 17.14286px));
	}
	#people #gallery .gall-grid-match.undergrads {
		grid-template-columns: repeat(var(--num-undergrads-w7), calc(10.77143vw - 17.14286px));
	}
}

#people .gallery-item {
	justify-content: center;
	align-items: center;
	position: relative;
}

.portrait {
	margin: 0;
	padding-top: 0vw;
	padding: 0;
	background-color: var(--no1-1);
}

.portrait img {
	display: block;
	margin: 0 auto;
}

.na-ti { /* details on the name & title text, also zoom transitions */
	display: block;
	text-align: center;
	font-size: 1.4rem;
	line-height: 1.3;
	font-weight: bold;
	padding: 0 auto;
	margin: 0 auto 0.9vw;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transform-origin: top center;
	color: var(--no10);
}

.na-ti.alumni-text {
	margin-top: 0rem;
	font-size: 1.1em;
	color: var(--no9);
}

.gall-container.collaborator-text {
	height: 12rem;
	pading-top: 0;
	padding-bottom: 0;
}

/* ===================================================================
 *  Responsive:
 *  People
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 705px) {
	.na-ti {
		font-size: 1.2rem;
	}
	.na-ti .title {
		font-size: 1.1rem;
	}
}

@media only screen and (max-width: 941px) {
	.na-ti {
		font-size: 1.4rem;
	}
	.na-ti .title {
		font-size: 1.3rem;
	}
}


/* Apply styles for hover elements (elements only visible when you hover.) */
.gall-container .gallery-item .cover-details {
opacity: 0;
color: #FFFFFF;
width: 100%;
visibility: hidden;
}

/* These two sections deal with hover elements and how they change between different media types (e.g. you can't hover on a phone!) */
@media only screen and (hover: hover) and (pointer: fine), only screen and (hover: hover) and (pointer: coarse) {
/* In theory, this media query targets two things. The first is any device with a hovering capability and a fine pointer (e.g. computers, laptops, touchpads). The second is any device with a hovering capability and a coarse pointer (e.g. smart TVs and video game consoles). This combination should identify all devices that are using a hover mode. Because I use hover and pointer instead of any-hover and any-pointer, it doesn’t catch devices such as a phone with a Bluetooth mouse/stylus. Most of the hover material is not essential, so this is fine. However, the research themes content is kind of important. So, we’ll do a separate media query for that condition. */
/* Initial set-up of hidden things, give transitions */
	.gall-container .gallery-item .cover-details {
	-webkit-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	}
	/* On hover, appear! And fly up */
	.gall-container .gallery-item:hover .cover-details {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	}


	.gallery-item:hover:not(.no-hover-effect) img { /* When you hover on an item, cover zooms in slightly. Overflow:hidden on .gallery-item keeps it from expanding */
		transform: scale(1.1); }
	.gallery-item:hover:not(.no-hover-effect) { /* Pointer cursor */
		cursor: pointer; }
	#gallery-item-4.darken:hover img, #gallery-item-3.dark:hover { /* Extra darken */
		filter: brightness(45%); }
	/* Zoom-in stuff specific to people (less of a zoom-in than regular) */
	#people .gallery-item:hover:not(.no-hover-effect) .na-ti {
		transform: scale(1.08); }
	#people .gallery-item:hover:not(.no-hover-effect) .na-ti::after {
		opacity: 1;
		visibility: visible;
		transform: scale(1);
	}

	/* Darken stuff */
	.darken {
		overflow: hidden;
		display: inline-block;
	}

	.darken img {
		-moz-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		-webkit-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		transform-origin: center center;
		filter: brightness(100%);
		overflow: hidden;
		vertical-align: middle;
	}

	.darken:hover img {
		filter: brightness(60%);
	}

}

/*@media only screen and (any-hover: hover) and (any-pointer: coarse), only screen and (any-hover:hover) and (any-pointer: fine) {*/
/* The idea here is that already the vendor has done something (how & what I have no idea) so that a hover on mobile is activated by touch. Since there are currently no links on the research themes grid, we'll just leave this as is for all media types.
If, in the future, clickable links are added, I suggest using a media query to detect if the person has a (primary? or any, not sure) input that can hover. If they don't, let the text be visible automatically. Otherwise, you won't be able to click on the individual links, I think. Maybe, though, if they're only shown via hover it would work (as opposed to being in the originally visible element, like in publications). Well, we’ll cross that bridge when we come to it! For now, a hover shows the themes w/o links.*/
	.gall-container .gallery-item .theme-overlay-cats { /* This is a complete rip-off (duplicate) of the other section. It’s just the (lack of a) media query that’s different*/
		/* If you want to add a description to the research theme squares, you would add it here & below, mimicking -cats. */
		opacity: 0;
		color: var(--no1);
		width: 100%;
		visibility: hidden;
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		transform: translateY(100%);
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	.gall-container .gallery-item:hover .theme-overlay-cats { /* On hover, appear */
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}

	.darken {
		overflow: hidden;
		display: inline-block;
	}

	.darken img{
		-moz-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		-webkit-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		transform-origin: center center;
		filter: brightness(100%);
		overflow: hidden;
		vertical-align: middle;
	}

	.darken:hover img {
		filter: brightness(60%);
	}

	.gallery-item:hover:not(.no-hover-effect) img { /* When you hover on an item, cover zooms in slightly. Overflow:hidden on .gallery-item keeps it from expanding */
		transform: scale(1.1); }


/*} No media query wrapping this! */

/* ===================================================================
 *  22. People: Image Carousel
 *
 * ------------------------------------------------------------------- */

#people-carousel #carousel {
	padding: 0;
	height: 100%;
}

#people-carousel .banner {
	background-color: var(--no2);
}

.slide-show-container {
	position: relative;
	width: 100%;
}

.people-all { /* This contains the current visible slide.*/
	width: 100%;
	padding-bottom: 4rem;
	position: relative;
	overflow: hidden;
	min-height: calc(100vh - 113.426px);
}

#carousel .slide-show-container .slide { /* Applies to each person */
	width: 100%;
	height: auto;
	position: relative;
	top: 0;
	left: 0;
}

.scene { /* Inside each slide */
	width: 100%;
	margin: 0 auto;
	display: flex;
}

.person-left { /* Contains picture, title, research area, and contact icons */
	display: flex;
	width: 35%;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.person-picture { /* contains person-details */
	display: block;
	width: 100%;
	height: 200px;
	padding-bottom: 0rem;
	margin-bottom: 0rem;
}

.person-details { /* both picture & position span (.person-position) */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
	margin: 8rem auto 0rem; /* Controls top space distance, along with .person-name */
	padding: 0;
}

.person-details img {
	margin-bottom: 0.5rem;
	padding: 0;
	display: block;
	position: relative;
}

.person-position, .person-research-area { /* Applies to both text spans */
	position: relative;
	min-width: 200px;
	color: var(--no10);
	padding: 0;
	margin: 0rem 15px 0.5rem;
	text-align: center;
	font-weight: bold;
	font-size: calc(1.2rem + 0.2vw);
	line-height: 1.2;
}

.person-research-area {
	font-size: calc(1.05rem + 0.2vw);
	margin: 5.5rem 0 -0.5rem;
}

.position-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 2rem auto 0;
	padding: 0rem auto 0rem;
	line-height: 1.0;
	height: auto;
}

.position-icon img {
	width: 40px;
}

.registered_trademark::after { /* Not currently in use, but if ever needed. Just adds the legal symbol. */
	content: "";
	background-image: url("../images/icons/linkedIn_R_icon.png");
	width: 13px;
	height: 13px;
	position: relative;
	top: -13px;
	left: 30px;
}

.person-right { /* Includes name and bio */
	display: flex;
	width: 65%;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 0;
	text-align: left;
}

.person-name {
	display: block;
	justify-content: center;
	align-items: center;
	padding: 1rem 0rem 0.0rem 3.5rem;
	margin: 0;
	width: 100%;
	height: 8.0rem;
	text-align: left;
	color: var(--no10);
	font-size: 3.0rem;
}

.slide-show-container h1 { /* Formats the name */
	display: inline-block;
	color: var(--no10);
	font-size: 3.0rem;
	font-weight: normal;
}

.person-right p { /* the bio */
	border-left: thin solid var(--no8);
	color: var(--no10);
	padding: 0 3.5rem;
	font-size: calc(1.4rem + 0.2vw);
	text-align: justify;
}

/* Slideshow functionality & the transition. There's more description in the JS, but here's the general idea:
There are two black divs ('screens') the size of the viewport. One is positioned just offscreen to the right, while the other is to the left. When you go to the next profile, the right div moves left. When it is exactly covering the screen, the slide changes and the next person appears. Then it resets to its original position. When you go to the previous profile, the left screen moves to the right and the same thing happens. :)
*/

#black-screen-next, #black-screen-prev {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: var(--no2);
	z-index: 5;
}

#black-screen-next { left: 100%; }

#black-screen-prev { left: -100%; }

#people-carousel .disabled { pointer-events: none; }

#black-screen-next.ease-in-out, #black-screen-prev.ease-in-out {
	-webkit-transition: all 1.0s ease-in-out;
	-moz-transition: all 1.0s ease-in-out;
	-ms-transition: all 1.0s ease-in-out;
	-o-transition: all 1.0s ease-in-out;
	transition: all 1.0s ease-in-out;
}

a.mybutton {
	padding: 1.0em;
	font-size: 2rem;
	user-select: none;
	margin: 0;
	cursor: pointer;
}

.prev, .next { /* Buttons */
	display: inline-block;
	position: absolute;
	bottom: 0px;
}

#prev, #next {
	width: auto; }
.prev {
	left: 0;  }

.next {
	right: 0; }


/* --- Individual people's margins --- */

.slide-show-container #Guidetti .person-picture, .slide-show-container #Farinola .person-picture { /* Doc: Two titles */
	margin-bottom: 2rem;
}

#Simon .person-picture { /* Doc: No research area */
	margin-bottom: 5rem;
}

/* ===================================================================
 *  Responsive:
 *  People: Image Carousel
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 768px) {
	.person-position {
		font-size: 1.2rem;
	}
}

@media only screen and (min-width: 769px) {
	.people-all {
		height: calc(185rem - 83vw);
	}
}

@media only screen and (min-width: 601px) {
	.people-all {
		height: calc(210rem - 120vw - (10rem / 10vw));
	}
}

@media only screen and (max-width: 600px) {
	#carousel .scene {
		flex-direction: column;
	}
	#carousel .person-name {
		position: absolute;
		top: 14px;
		text-align: center;
		padding-left: 0;
		padding-right: 0;
	}
	#carousel .person-details img {
		margin-top: 3rem;
	}
	#carousel .person-picture {
		margin-bottom: 2.5rem;
	}
	#carousel .person-left {
		width: 100%;
		padding-bottom: 0rem;
		margin-bottom: 0rem;
		position: relative;
	}

	#carousel .person-left::after { /* Dividing line! */
		content: "";
		background: rgba(26, 26, 26, 1.0);
		position: absolute;
		text-align: center;
		bottom: -4rem; /* match .person-right p margin-top */
		height: 1px;
		width: 80%;
	}

	#carousel .person-right {
		width: 100%;
	}

	#carousel .person-right p {
		margin-top: 6rem;
		text-align: justify;
		border: none;
	}

	#carousel .prev, #carousel .next {
		font-size: 1.5rem;
	}

	.slide-show-container #Guidetti .person-picture, .slide-show-container #Farinola .person-picture { /* Doc: Two titles */
		margin-bottom: 4.5rem;
	}

#Simon .person-picture { /* Doc: No research area */
	margin-bottom: 7.5rem;
}
}

/* ===================================================================
 *  23. People: Alumni Page (23. Alumni)
 *
 * ------------------------------------------------------------------- */
/* More stuff in 21. People*/

.alumni-list {
	width: 85%;
	column-count: 2;
	text-align: left;
}

.alumni-list ul li, .alumni-list ul li a {
	color: var(--no10);
	font-size: 1.6rem;
}

#alumni .gall-container .alumni-list ul li {
	display: block;
}

.na-ti a { /* This actually only applies to the alumni section */
	text-decoration: underline;
	color: var(--no10);
}

@media only screen and (max-width: 768px) {
	.alumni-list ul li {
		font-size: 1.2rem; }
}

@media only screen and (max-width: 600px) {
	#alumni #alum-undergrads {
		background-image: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%), url("../images/hero-bg-vert.jpg"), url("../images/hero-bg.jpg");
	}
	.alumni-list ul li {
		font-size: 1.6rem;
		padding: 0.1rem 0;
	}
	.alumni-list {
		column-count: 1;
		text-align: center;
	}
}

/* ===================================================================
 *  24. Publications Page
 *
 * ------------------------------------------------------------------- */

#publications #gallery .gall-grid { /* Defines a grid that changes its column number according to the browser size. Edit min of minmax (currently 150px) to adjust size. 1fr can't be changed, I believe. I suggest defining a new .gall-grid for different pages to adjust grid size & style. Copy everything else. See section 13.5 for more */
	display: grid;
	position: relative;
	align-items: center;
	/* May change these for style */
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /*DW throws error bc it's older than the fr unit, but this still works */
	grid-template-rows: auto;
	width: 85%;
	row-gap: 5.5px;
	column-gap: 5.5px;
	padding-top: 0px;
}

#publications #gallery .cocoon-banner {
	background-image: url("../images/banners/publications_banner.jpg");
}

/* The Journal Covers! */

#publications .gall-container { /*A flex display to center the grid */
	width: 100%;
	display: flex;
	justify-content: center;
	padding-top: calc(4.0rem + 1.8vw);
	padding-bottom: calc(4.0rem + 1.8vw);
	margin: 0rem auto 0rem;
}

.gall-grid .cover-details, .alt-gall-grid .cover-details { /*Governs the caption for publications that will appear & positions it.*/
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	text-align: center;
}

.cover-details p { /* Formats the cover details for publications */
	background-color: rgba(0, 0, 0, 0.4);
	padding: 4px;
	margin: 0;
	font-size: calc(2.2rem - 0.45vw);
	line-height: 1.1;
}

/* Fixes for certain covers */

/* Publications List & button functionality */

.publications-list {
	padding: 4rem 10rem 8rem;
	/*background-color: rgba(50, 50, 50, 1.0); */
}

.publications-list h3 {
	color: var(--no10);
	margin-top: -1rem;
	text-align: center;
}
.publications-list ul.pub-page {
	list-style: none;
}

.publications-list ul li {
	position: relative;
	color: var(--no9);
	font-size: 1.5rem;
	line-height: 0.5;
}

.publications-list ul li a {
	color: var(--no9);
}

.publications-list ul li a:hover {
	color: var(--main-acc-color);
}

.publications-list ul li a span { /* Proper citations! My 9th grade english teacher would be so proud. -Audrey */
	font-style: italic;
}

#publications #gallery ul .mybutton {
	margin: 0 10rem;
	position: absolute;
	padding: 0rem 2rem;
}

#publications #gallery ul .mybutton.next-page {
	right: 1rem;
}

#publications #gallery ul .mybutton.prev-page {
	right: 10rem;
}

/* ---------------- Publications responsiveness ---------------- */

@media only screen and (max-width: 600px) {
	#carousel a.mybutton {
		font-size: 1.5rem;
	}
	.publications-list {
		padding-left: 7.5%;
		padding-right: 7.5%;
}
}

/*---- Check here */

.no-hover-effect .na-ti {
	margin-top: 1rem;
}

/* ===================================================================
 *  25. Research Page
 *
 * ------------------------------------------------------------------- */

#home-page #gallery {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%),
		url("../images/hero-bg.jpg"), url("../images/hero-bg-vert.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	padding-bottom: calc(4.0rem + 1.8vw);
}

#research .research-wrapper {
	padding-top: calc(4.0rem + 1.8vw);
	padding-bottom: calc(4.0rem + 1.8vw);
}

@media only screen and (max-width: 768px) {
	#home-page #gallery {
		background-image: linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%),
		url("../images/hero-bg-vert.jpg"), url("../images/hero-bg-vert.jpg");
	}
}

#research .cocoon-banner {
	background-image: url("../images/banners/research_banner.jpg");
}

#research #gallery .gall-container {
	margin: 4vw auto; /* top & bottom margins must equal row/column gap in .gall-grid */
	padding-top: 0;
	padding-bottom: 0;
}

#research .research-wrapper .intro-wrap {
	padding-top: 4rem;
}

#research .research-wrapper .col-twelve {
	margin-bottom: -4rem;
}

/* ===================================================================
 *  26. News & Media Page
 *
 * ------------------------------------------------------------------- */
#news #gallery {
	margin: 0; }

#news #gallery .cocoon-banner {
	background-image: url("../images/banners/news_banner.jpg");
}



.inner-embedded { /* Contains twitter widget */
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	right: 0;
	margin-top: /*4.2rem; */ 0;
	margin-left: 0px;
	height: /*calc(98.2vw - 420px - 4.0rem);*/ 100vh;
	width: 45%;
	overflow-y: scroll;
	float: left;
	background-color: var(--no1-1);
	padding: 0 2.5rem;
}

#news .scrolldown { /* repositions it as opposed to Home */
	bottom: -35%;
}



#news .home-content-table {
	width: 85%;
	padding-top: calc(4.0rem + 1.8vw);
	padding-bottom: calc(4.0rem + 1.8vw);
	margin: 0 auto;
	position: relative;
	left: 0;
	top: 0;
}

.vid-desc {
	display: block;
	text-align: left;
	margin: auto 1rem;
	padding: 0 0rem;
	width: calc(50% - 2rem);
	font-size: 1.8rem;
	line-height: 1.2;
}

.vid-desc a {
	color: var(--no9);
}

.border-red {
	width: 100%;
	margin: 0px auto 4rem;
	padding: 0 auto;
	display: flex;
	background-color: var(--no1);
	z-index: 10;
}

#testimonials .border-red {
	margin-bottom: 0;
	background-color: var(--no1-1);
}

.border-red img, .border-red iframe {
	width: calc(44% - 2rem);
	margin: 0 2rem 0 0rem;
	height: calc(24.9vw - 1.332rem);
}

/* Load More Button */

.load-more {
	position: absolute;
	left: calc(50% - 7.5rem);
	margin: 0;
	bottom: 2.1em;
}

.load-more .mybutton {
	width: 15rem;
	margin: 0;
}

/* ---------- News responsive section ---------- */

@media only screen and (max-width: 822px) {

	.border-red {
		width: 100%;
		height: auto;
		flex-direction: column;
		align-items: center;
		margin: 50px auto; /* match with iframe */
		background-color: transparent;
	}


	.border-red img, .border-red iframe {
		width: 100%;
		height: 100%;
		padding: calc(2rem + 5vw);
		padding-top: 0;
		padding-bottom: 0;
		margin: 0;
	}

	.border-red iframe {
		width: calc(100% - 3.8rem - 10vw);
		padding: 0rem;
		height: 333px !important;
		border: none;
	}

	.vid-desc {
		width: calc(100% - 3.8rem - 10vw);
		margin: auto 0;
		padding: 1rem 1rem;
		text-align: center;
		background-color: var(--no1);
	}
}

@media only screen and (max-width: 768px) {
	.inner-embedded {
		width: 75%;
	}
	.vid-desc {
		font-size: 1.6rem;
	}
}

@media only screen and (max-width: 610px) {
	.vid-desc {
		font-size: 1.4rem;
	}
}

@media only screen and (max-width: 499px) {
	.border-red iframe {
		width: calc(100% - 3.8rem - 10vw);
		/*padding: calc(2rem + 5vw);*/
		padding-top: 0;
		padding-bottom: 0;
		height: auto !important;
		border: none;
	}
	.border-red img {
		width: 100%;
		height: 100%;
		padding: calc(2rem + 5vw);
		padding-top: 0;
		padding-bottom: 0;
		margin: 0;
	}
}

/* ===================================================================
 *  27. Technology Transfer (27. Tech Transfer)
 *
 * ------------------------------------------------------------------- */

#tech-transfer #gallery .cocoon-banner {
	background-image: url("../images/banners/tech_banner.jpg");
}

#tech-transfer .gall-container {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto; /* top & bottom margins must equal row/column gap in .gall-grid */
}

.tech-block {
	margin: 0 4rem 1rem;
}

.tech-block img {
	width: 500px;
	-moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.tech-block img:hover {
	wekbit-box-shadow: 0 0 10px 8px rgba(140, 140, 140, 0.8);
	-moz-box-shadow: 0 0 10px 8px rgba(140, 140, 140, 0.8);
	box-shadow: 0 0 10px 8px rgba(140, 140, 140, 0.8);
}

.tech-block a {
	margin: 1rem auto;
}

.tech-block #vaxess {
	background-color: #FFFFFF;
}


/* ===================================================================
 *  00. Sandbox
 *
 * ------------------------------------------------------------------- */

#sandbox #gallery .cocoon-banner {
	background-image: url("../images/banners/publications_banner.jpg");
}

.beginning {
	width: 75px;
	height: 75px;
	background-color: red;
	position: relative;
	top: 0px;
	left: calc(50% - 37.5px);
	margin: 120px 0;
}
.beginning::after {
	content: "";
	display: block;
	width: 5px;
	height: 100px;
	background-color: blue;
	position: relative;
	top: 85px;
	left: 35.5px;
}



/* ===================================================================
 *  28. Contact Us
 *
 * ------------------------------------------------------------------- */

#contact-us #gallery .cocoon-banner {
	background-image: url("../images/banners/contact_banner.jpg");
}

#contact-us .gall-container {
	height: auto;
	flex-direction: column;
}

#contact-us .gall-container .col-twelve {
	padding: 0rem 0 2rem;
	margin-bottom: 2rem;
	background-color: rgba(65, 125, 193, 0.0);
  text-align: center;
  text-align-last: center;
}


#contact-us .gall-container h2, #contact-us .gall-container h3, #contact-us .gall-container h4, #contact-us .gall-container h5 {
	color: var(--no10);
	text-transform: uppercase;
}

#contact-us .gall-container h5 {
	text-decoration: underline;
}

#contact-us .position-icon {
	margin-top: -2.5rem;
}

@-moz-document url-prefix() {
	#contact-us .position-icon {
		margin-top: 0;
		margin-bottom: 2rem;
	}
	#contact-us #simon-email {
		margin-bottom: 0;
	}
}

.hiring-pre {
	width: 85vw;
	height: auto;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	gap: 0;
}

.left {
  width: 66.667%;
  margin-right: 3.75%;
  height: auto;
}

.map {
	width: 100%;
	margin: 0 0 0;
  padding: 0;
}

.map iframe {
	width: 100%;
	height: 28.3333vw;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.address {
	text-align: center;
	position: relative;
}

.right {
  width: 33.333%;
  height: 28.3333vw;
  align-self: flex-start;
  align-items: flex-start;
  justify-content: center;
  padding: 0 0 0 3.75%;
  padding-top: calc(0);
  text-align: center;
  border-left: 1px solid var(--no7);
}

.contact-text {
  width: auto;
  height: auto;
  padding: 0;
  margin-top: 0;
  position: relative;
  left: 0;
}

.hiring-pre span, .address {
	color: var(--no10);
	font-size: 1.8rem;
}

.hiring-pre.hiring img {
	width: 33.3333%;
	padding: 0 0 0;
	margin: 0 3.65% 0 0;
	max-width: 400px;
}

.pic-text {
	width: 66.667%;
	height: auto;
	margin: 0;
	text-align: justify;
	text-align-last: center;
	position: relative;
	display: block;
	padding-left: 3.75%;
	border-left: 1px solid var(--no7);
	font-size: 1.6rem;
}

.where-is .pic-text::before {
	content: "";
	display: block;
	background-color: rgba(255, 255, 255, 0.8);
	width: 2px;
	height: 100%;
	position: absolute;
	right: 100%;
	top: 0;
}

.pic-text p {
	margin: 0;
	width: 100%;
	padding: 0 0 0 0rem;
	text-align: justify;
	text-align-last: center;
}

.openings {
	text-align: center;
	width: 85%;
	margin-top: 2rem;
	padding-left: 7.5%;
	padding-right: 7.5%;
	padding-top: calc(3.8rem + 1.8vw);
	padding-bottom: calc(1.0rem + 1.8vw);
	margin-bottom: calc(-4.0rem - 1.8vw);
}

#contact-us p {
	color: var(--no10);
}

#contact-us p a {
	color: var(--no10);
	text-decoration: underline;
}

@media only screen and (max-width: 1011px) {
  .contact-text {
    padding-top: calc(8rem - 3vw);
  }
}

@media only screen and (max-width: 768px) {
  /* Where is Silklab */
  .hiring-pre.where-is {
    flex-direction: column;
    position: relative;
    justify-content: flex-start;
  }
  .right {
    width: 100%;
    height: auto;
    border: none;
    padding: 6rem 0 0 0;
    position: relative;
  }
  .right::before {
    content: "";
		display: block;
		width: 76.5vw;
		height: 1px;
		background-color: var(--no7);
		position: absolute;
		top: 3rem;
		left: 4.25vw;
  }
  .contact-text {
    margin: 0;
    padding-top: 0;
    width: 100%;
  }
  .left {
    width: 100%;
    margin: 0;
  }
  .map {
    margin: 0;
    width: 100%;
    height: 50vw;
  }
  .map iframe {
    height: 100%;
    padding-bottom: 2rem;
  }
  .address {
    width: 100%;
  }


  /* Hiring */

	.hiring-pre {
		flex-direction: column-reverse;
		position: relative;
		justify-content: flex-start;
	}
	.pic-text {
		border-left: none;
		position: relative;
		width: 85%;
		padding-bottom: 0rem;
	}
	.pic-text p {
		padding-bottom: 0rem;
	}
	.hiring-pre img {
		margin: 2rem 0;
		padding: 0rem 0 0rem;
		position: relative;
		height: auto;
		float: none;
		display: block;
	}
	.openings {
		padding-top: 5rem;
		margin-top: 0;
		height: auto;
		position: relative;
	}
	.openings::before {
		content: "";
		display: block;
		width: 76.5vw;
		height: 1px;
		background-color: var(--no7);
		position: absolute;
		top: 2rem;
		left: 4.25vw;
	}
}

/* ===================================================================
 *  03. typography & general theme styles - (_document-setup.scss)
 *
 * ------------------------------------------------------------------- */

.js-loading *,
.js-loading *:before,
.js-loading *:after {
 	animation-play-state: paused !important;
}

.default-background {
	background-color: var(--no1-1);
	position: relative;
	overflow: hidden;
}

#sandbox .flex-center {
	width: 100%;
}

.collaborators {
	padding: 0 0;
	position: relative;
}

.place { /* Contains dot, line, and table */
	position: absolute;
	width: 2vw;
	height: 2vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: visible;
	z-index: +2;
	-moz-transition: all 1.2s ease-in-out;
  	-o-transition: all 1.2s ease-in-out;
  	-webkit-transition: all 1.2s ease-in-out;
  	-ms-transition: all 1.2s ease-in-out;
  	transition: all 1.2s ease-in-out;
}

.place.notransition {
	-moz-transition: none !important;
  	-o-transition: none !important;
  	-webkit-transition: none !important;
  	-ms-transition: none !important;
  	transition: none !important;
}

/* On hover, zoom in dot and reveal table */
.place:hover .c-dot {
	transform: scale(125%);
}

.place:hover .label {
	-moz-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	-webkit-transition: all 0.3s ease-in-out;
  	-ms-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
	visibility: visible;
	opacity: 1.0;
}

.place:hover {
	z-index: +10 !important;
}

/* Design dot and line generally*/
.c-dot {
	width: 2vw;
	height: 2vw;
	position: absolute;
	border-radius: 50%;
  	border: 0.12vw solid var(--no1);
  	background-color: rgba(52, 92, 137, 0.75);
	-moz-transition: all 0.6s ease-in-out;
  	-o-transition: all 0.6s ease-in-out;
  	-webkit-transition: all 0.6s ease-in-out;
  	-ms-transition: all 0.6s ease-in-out;
  	transition: all 0.6s ease-in-out;
	z-index: 0;
}

.place .label {
	background-color: var(--no1-1);
	color: var(--no10);
	width: auto;
	white-space: nowrap;
	padding: 0.1vw 0.5vw;
	text-align: center;
	position: relative;
	bottom: calc(2em + 0.5vw);
	visibility: hidden;
	opacity: 0;
	border: 0.05vw solid var(--no9);
	-moz-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	-webkit-transition: all 0.3s ease-in-out;
  	-ms-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
	z-index: +5;
}

.place.visible .label {
	visibility: visible;
	opacity: 1.0;
}

.c-line {
	width: 0.2vw;
	height: 90px;
	background-color: var(--no9);
	position: absolute;
	top: 42.5%;
	left: 61.1%;
	z-index: 0;
	transform-origin: top center;
	-moz-transition: all 1.2s ease-in-out;
  	-o-transition: all 1.2s ease-in-out;
  	-webkit-transition: all 1.2s ease-in-out;
  	-ms-transition: all 1.2s ease-in-out;
  	transition: all 1.2s ease-in-out;
}

/* Table */

.place table.c-table {
	width: 10em;
	background-color: var(--no1);
	position: relative;
	top: 0;
	opacity: 0;
	display: none;
	-moz-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	-webkit-transition: all 0.3s ease-in-out;
  	-ms-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}
.place.visible table.c-table {
	opacity: 1.0;
	-moz-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	-webkit-transition: all 0.3s ease-in-out;
  	-ms-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
	display: table;
}

.c-table a, .c-table a:focus, .c-table a:visited {
	color: var(--no10);
}
.c-table a:focus {
	color: var(--no10) !important;
}

.place td, .place th {
	padding: 0.3em 1.5em;
	text-align: center;
}

td.t-data, th.t-header {
	text-align: center;
	white-space: nowrap;
}

#Tufts {
	top: calc(44.05% - 2vw);
	left: calc(62.30% - 2vw);
	z-index: 10;
}

#Britain {
	top: calc(37% - 2vw);
	right: calc(19.75% - 2vw);
}

#clBritain {
	rotate: -101.5deg;
	height: 36.2%;
}

#California {
	top: calc(45.5% - 2vw);
	left: calc(49.25% - 2vw);
}

#clCalifornia {
	rotate: 86.5deg;
	height: 23%;
}

#Germany {
	top: calc(39% - 2vw);
	right: calc(16% - 2vw);
}

#clGermany {
	rotate: -97deg;
	height: 42.3%;
}

#Italy {
	top: calc(45% - 2vw);
	right: calc(15.5% - 2vw);
}

#clItaly {
	rotate: -88.7deg;
	height: 42.9%;
}

#MIT {
	top: calc(44.05% - 2vw);
	left: calc(63.0% - 2vw);
}

#clMIT {
	rotate: -103.5deg;
	height: 1.5%;
}

#Nebraska {
	top: calc(46.5% - 2vw);
	left: calc(55.55% - 2vw);
}

#clNebraska {
	rotate: 78.6deg;
	height: 12%;
}

#NewMexico {
	top: calc(50.15% - 2vw);
	left: calc(53.25% - 2vw);
}

#clNewMexico {
	rotate: 69.6deg;
	height: 17%;
}

#Illinois {
	top: calc(44.4% - 2vw);
	left: calc(58.0% - 2vw);
}

#clIllinois {
	rotate: 86.0deg;
	height: 8%;
}

#Pennsylvania {
	top: calc(45.4% - 2vw);
	left: calc(60.75% - 2vw);
}

#clPennsylvania {
	rotate: 63.0deg;
	height: 3%;
}

#China {
	top: calc(51.25% - 2vw);
	left: calc(15.85% - 2vw);
}

#clChina {
	rotate: 85.0deg;
	height: 81.7%;
}

#South_Korea {
	top: calc(48.0% - 2vw);
	left: calc(18.2% - 2vw);
}

#clSouth_Korea {
	rotate: 87.2deg;
	height: 77.3%;
}

.worldmap {
	padding: 0 0;
}

/* ----- New Stuff ------ */
.default-background {
	background-color: var(--no1-1);
}

.intro-white {
	background-image: none;
	background-color: var(--no1-1);
	height: auto;
}

.box-shadow {
	wekbit-box-shadow: 5px 5px 5px 2px var(--no8);
	-moz-box-shadow: 5px 5px 5px 2px var(--no8);
	box-shadow: 5px 5px 5px 2px var(--no8);
}

/* ===================================================================
 *  30. Tour
 *
 * ------------------------------------------------------------------- */

#tour #gallery .cocoon-banner {
	background-image: url("../images/banners/publications_banner.jpg");
}

g.Room {
	-moz-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	-webkit-transition: all 0.3s ease-in-out;
  	-ms-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}

g.Room:hover polygon {
	fill: var(--no4);
	cursor: pointer;
}

g.Room:hover rect {
	fill: var(--no4);
	cursor: pointer;
}

#tour .gall-container {
  width: 85%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin: 0 auto;
  padding-top: calc(4.0rem + 1.8vw);
	padding-bottom: calc(4.0rem + 1.8vw);
}

.svg-wrapper {
  position: relative;
  left: 0;
  top: 0;
  width: 50%;
  height: 90vh;
  padding: 0;
  margin: 0;
}

.svg-wrapper svg {
  height: calc(42.5vw * 1.1327);
  width: auto;
  padding: 0;
  margin: 0 auto;
}

.items-wrapper {
  position: relative;
  top: 0;
  right: 0;
  width: 55%;
  height: 90vh;
}

.Rm-contents {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  overflow-y: scroll;
  background-color: var(--no2);
  padding-top: 2rem;
  display: none;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 3rem;
}

.item img {
  margin: 0 auto;
}

.item p {
  text-align: justify;
  padding: 0 0;
}

/* ===================================================================
 *  31. Lachesis
 *
 * ------------------------------------------------------------------- */
#lachesis #gallery .cocoon-banner {
	background-image: url("../images/banners/lachesis_banner.jpg");
}

#lachesis .cocoon-banner .section-intro h2 {
	color: var(--no1);
}

.flex-row {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	position: relative;
}

#lachesis .gall-grid {
	width: 85%;
}

#lachesis .person-left {
	width: 50%;
	position: relative;
	align-items: flex-end;
}

#lachesis .person-right {
	width: 50%;
}

#lachesis .person-right small {
	position: relative;
	width: 100%;
	left: 5.5rem;
	margin: 0.0rem 3.5rem 0 0;
}

#lachesis .person-right span, #lachesis .person-left span {
	font-weight: bold;
	font-size: 1.15em;
}

#lachesis .person-left img {
	padding: 0 0;
	position: relative;
	right: 3.5rem;
	width: 95%;
}


#lachesis .person-left img {
	width: 30vw;
}

#lachesis #lachesis-1 .person-left img {
	width: 50%;
}

#lachesis #lachesis-2 .person-left img {
	width: 85%;
}

#lachesis #lachesis-3 .person-left img, #lachesis-5 .person-left img, #lachesis-6 .person-left img {
	padding: 0.5rem 0;
}

#lachesis #lachesis-4 .person-left img {
	margin-bottom: 2rem;
}
.note {
	display: inline-block;
	position: relative;
	padding-top: 0;
	margin: 0.5rem 3.5rem 0 0;
	line-height: 1.5;
	width: 95%;
	text-align: justify;
}

.acknowledgements {
	width: 85%;
	padding-top: 2rem;
	margin: 0 auto;
	text-align: center;
	font-size: 0.7em;
}

.acknowledgements img {
	width: 50%;
	margin-top: 0.5rem;
}

.acknowledgements::after {
	display: block;
  	content: "";
 	width: 75%;
 	height: 1px;
  	background-color: var(--no4); /* gray underlines */
  	margin: -2.5rem auto 0 auto;
}

.acknowledgements a:hover {
	cursor: pointer;
}

.mobile-vis {
	display: none;
}

.mobile-invis {
	display: inline-block;
}

@media only screen and (max-width: 905px) {
	#lachesis .person-right {
	}
	#lachesis .gall-grid {
		width: calc(35% + 271.5px);
	}
}

@media only screen and (max-width: 770px) {
	#lachesis .person-left img {
		width: 85%;
	}
	
	#lachesis .flex-row {
		flex-direction: column;
	}
	
	#lachesis .gall-grid {
		width: 100%;
	}
	
	#lachesis .person-right {
		width: 100%;
		padding-top: 7rem;
	}
	#lachesis .person-name {
		position: relative;
		top: 0px;
		text-align: center;
		padding-left: 0;
		padding-right: 0;
	}
	#lachesis .person-right p {
		border: none;
	}
	
	#lachesis .person-left {
		width: 75%;
		align-items: center;
		position: relative;
	}
	.note {
		margin: 0;
	}
	#lachesis small {
		text-align: center;
		margin-top: -2em;
		padding-bottom: 2em;
	}
	
	#lachesis .person-left::before { /* Dividing line! */
		content: "";
		background: rgba(26, 26, 26, 1.0);
		position: absolute;
		text-align: center;
		bottom: -3.5rem; /* match .person-right p margin-top */
		height: 1px;
		width: 100%;
	}
	
	#lachesis .person-left img {
		padding: 0 0; /* calc(10px + 1.2vw)*/
		position: relative;
		right: 0rem;
	}
	
	.mobile-vis {
		display: block;
		margin: 0 0 -3rem;
	}

	.mobile-invis {
		display: none;
	}
}
/* ===================================================================
 *  31. New Page
 *
 * ------------------------------------------------------------------- */

#blank #gallery .cocoon-banner {
	/*background-image: ;*/
}

/*
#blank #gallery .cocoon-banner {
	background-image: url("../images/banners/contact_banner.jpg");
}
*/

#blank #gallery .gall-grid { /* PUBLICATION VERSION Defines a grid that changes its column number according to the browser size. Edit min of minmax (currently 180px) to adjust size. 1fr can't be changed. See section 13.5 for more */
	display: grid;
	position: relative;
	align-items: center;
	/* May change these for style */
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	grid-template-rows: auto;
	width: 85%;
	row-gap: 5.5px;
	column-gap: 5.5px;
	padding-top: 0px;
}

#blank #gallery .gall-grid { /* PEOPLE VERSION Edit min of minmax (currently 200px) to adjust size. Don't change 1fr. */
	display: grid;
	position: relative;
	align-items: flex-start;
	justify-content: center;
	/* May change these for style */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-template-rows: auto;
	width: 85%;
	row-gap: calc(20px + 1.6vw);
	column-gap: calc(20px + 1.6vw);
}

#blank #gallery .gall-grid { /* PUBLICATION VERSION Defines a grid that changes its column number according to the browser size. Edit min of minmax (currently 180px) to adjust size. 1fr can't be changed. See section 13.5 for more */
	display: grid;
	position: relative;
	align-items: center;
	/* May change these for style */
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	grid-template-rows: auto;
	width: 85%;
	row-gap: 5.5px;
	column-gap: 5.5px;
	padding-top: 0px;
}

/*
#blank #gallery .gall-grid { /* PEOPLE VERSION Edit min of minmax (currently 200px) to adjust size. Don't change 1fr. *
	display: grid;
	position: relative;
	align-items: flex-start;
	justify-content: center;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-template-rows: auto;
	width: 85%;
	row-gap: calc(20px + 1.6vw);
	column-gap: calc(20px + 1.6vw);
}

#blank #gallery .gall-grid { /* PUBLICATION VERSION Defines a grid that changes its column number according to the browser size. Edit min of minmax (currently 180px) to adjust size. 1fr can't be changed. See section 13.5 for more *
	display: grid;
	position: relative;
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	grid-template-rows: auto;
	width: 85%;
	row-gap: 5.5px;
	column-gap: 5.5px;
	padding-top: 0px;
} */