@import url("//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("//cdnjs.cloudflare.com/ajax/libs/unsemantic/1.2.3/unsemantic-grid-responsive.min.css");
@import url("//cdn.plyr.io/3.7.2/plyr.css");
@import url("//fast.fonts.net/t/1.css?apiType=css&projectid=03b59d3f-3d40-40d9-8ae3-9be742d24a58");

@-ms-viewport {
  width: device-width;
}

input::-ms-clear {
  display: none;
  height: 0;
  width: 0;
}

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
}

input[type="text"],
input[type="button"] {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

/* Basics */

@font-face {
  font-family: "Gill Sans Nova W01 Medium";
  src: url("Fonts/54b694e4-27f0-465e-9bc4-6639d5bf709a.woff2") format("woff2"),
    url("Fonts/fbbea18d-5f65-424f-8883-dadcefcc4ef8.woff") format("woff");
}
@font-face {
  font-family: "Sabon LT W01 Roman";
  src: url("Fonts/f953eb57-f41e-4ddd-9360-f2d77a2f0bd9.woff2") format("woff2"),
    url("Fonts/d2a1a331-9388-4a44-9c72-2aa988167982.woff") format("woff");
}
@font-face {
  font-family: "Sabon LT W01 Italic";
  src: url("Fonts/464719fc-af3a-47c7-a50d-82640f839090.woff2") format("woff2"),
    url("Fonts/a4aefa2c-1a64-4c13-9035-b09ac56f8e2b.woff") format("woff");
}
@font-face {
  font-family: "Sabon LT W01 Bold";
  src: url("Fonts/4a5b66a5-81f5-4551-8dc5-b1db4c632d81.woff2") format("woff2"),
    url("Fonts/21ea5cea-98df-4908-954d-ae56a3a08b04.woff") format("woff");
}

:root {
  --plyr-color-main: #b3b4b4;

  --hopkinsblue: #000b8c;
  --warm: #827c78;
  --cool: #24272a;
  --tangerine: #ff8300;
  --grass: #00ad4a;
  --lime: #a7da36;
  --teal: #00a5b2;
  --oxide: #da763e;
  --holly: #4f6d5a;
  --lichen: #bfb800;
  --ocean: #007481;
  --white: #fff;
  --lightgrey: #b3b4b4;
  --rouge: #d73d35;
}

/* Grid */

* {
  position: relative;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Gill Sans Nova W01 Medium";
  color: var(--cool);
  /* max-width: 1920px; */
}

.grid-nav {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1000;
  top: 0;
}

.grid-wrap {
  position: relative;
  /* max-width: 1920px;
  margin: 0 auto; */
}

.grid-container {
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  /* height: 100vh; */
}

.grid-10,
.grid-100,
.grid-15,
.grid-20,
.grid-25,
.grid-30,
.grid-33,
.grid-35,
.grid-40,
.grid-45,
.grid-5,
.grid-50,
.grid-55,
.grid-60,
.grid-65,
.grid-66,
.grid-70,
.grid-75,
.grid-80,
.grid-85,
.grid-90,
.grid-95,
.mobile-grid-10,
.mobile-grid-100,
.mobile-grid-15,
.mobile-grid-20,
.mobile-grid-25,
.mobile-grid-30,
.mobile-grid-33,
.mobile-grid-35,
.mobile-grid-40,
.mobile-grid-45,
.mobile-grid-5,
.mobile-grid-50,
.mobile-grid-55,
.mobile-grid-60,
.mobile-grid-65,
.mobile-grid-66,
.mobile-grid-70,
.mobile-grid-75,
.mobile-grid-80,
.mobile-grid-85,
.mobile-grid-90,
.mobile-grid-95 {
  padding-left: 15px;
  padding-right: 15px;
}

.grid-container-nom {
  margin-top: 30px;
  padding-left: 0;
  padding-right: 0;
  /* display: block;
  height: auto;
  float: left; */
}

.grid-container-nom-nom {
  padding-left: 15px !important;
}

.grid-25 {
  padding-left: 0;
  padding-right: 0;
}

.grid-75 {
  padding-left: 0;
  padding-right: 16px;
}

.grid-75.grid-main {
  opacity: 0;
  /* margin-bottom: 30px; */
  padding-right: 1px;
}

/* end Grid */

/* Basic font */

p,
.grid-container-practice ul {
  font-family: "Sabon LT W01 Roman";
  line-height: 1.35em;
  font-size: 1.1em;
  margin: 0 12% 13px 0;
}

.grid-container-practice ul {
  list-style-type: square;
  list-style-position: inside;
}

p a {
  text-decoration: underline;
  text-decoration-skip: edges;
  transition-duration: 0.5s;
  /* text-decoration: none; */
  color: var(--cool);
  /* font-family: "Sabon LT W01 Bold"; */
}

p a:hover {
  color: var(--hopkinsblue);
}

.grid-container-practice * p a:hover {
  color: var(--ocean);
}

.grid-container-projects * p a:hover {
  color: var(--hopkinsblue);
}

/* .grid-main-journal {
  margin-bottom: 0 !important;
} */

.grid-container-journal * p a:hover {
  color: var(--oxide);
}

.grid-container-contact * p a:hover {
  color: var(--lichen);
}

strong {
  font-family: "Sabon LT W01 Bold";
}

em {
  font-family: "Sabon LT W01 Italic";
}

::selection {
  background: var(--hopkinsblue);
  color: var(--white);
}
::-moz-selection {
  background: var(--hopkinsblue);
  color: var(--white);
}

/* Logo */

.logoHolder {
  position: absolute;
  z-index: 200;
  left: 15px;
  top: 30px;
}

img.logo {
  max-width: 252px;
}

img.logo:hover {
  opacity: 0.7;
}

/* Navigations */

ul.navigation {
  position: relative;
  margin-left: 15px;
  margin-top: calc(100vh - 225px);
  font-size: 1.35em;
  line-height: 1.75em;
  list-style-type: none;
  display: inline-block;
}

ul.subNavigation {
  margin-top: 24px;
}

ul.topNavigation {
  margin-top: 20px;
}

ul.topNavigation li a,
ul.subNavigation li a {
  font-size: 1.1em;
  line-height: 1.75em;
  list-style-type: none;
}

ul.topNavigation li {
  display: inline;
}

ul.topNavigation li a {
  color: var(--cool);
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 16px 8px 0;
  font-size: 1.2em !important;
}

ul.navigation li {
}

ul.navigation li a,
ul.subNavigation li a {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cool);
  transition-duration: 0.4s;
}

/* ul.navigation li a:hover,
ul.subNavigation li a:hover {
  color: var(--warm);
} */

/* ul.navigation li.active a,
ul.subNavigation li.active a {
  color: var(--hopkinsblue);
} */

ul.navigation li.search {
  margin-top: 15px;
}

ul.navigation li.active a#practice,
ul.navigation li a#practice:hover,
ul.mobileNavigation li.active a#practice,
ul.mobileNavigation li a#practice:hover,
ul.mobileNavigation li a#practice:active,
.practiceCol,
.grid-practice * a:hover {
  color: var(--ocean) !important;
}

ul.navigation li.active a#projects,
ul.navigation li a#projects:hover,
ul.mobileNavigation li.active a#projects,
ul.mobileNavigation li a#projects:hover,
ul.mobileNavigation li a#projects:active,
.projectsCol,
.grid-project * a:hover {
  color: var(--hopkinsblue) !important;
}

ul.navigation li.active a#journal,
ul.navigation li a#journal:hover,
ul.mobileNavigation li.active a#journal,
ul.mobileNavigation li a#journal:hover,
ul.mobileNavigation li a#journal:active,
.journalCol,
ul.navigation li.active a#journal {
  color: var(--oxide) !important;
}

ul.navigation li.active a#contact,
ul.navigation li a#contact:hover,
ul.mobileNavigation li.active a#contact,
ul.mobileNavigation li a#contact:hover,
ul.mobileNavigation li a#contact:active,
.contactCol,
ul.navigation li.active a#contact {
  color: var(--lichen) !important;
}

ul.navigation li.active a#search,
ul.navigation li a#search:hover,
ul.mobileNavigation li.active a#search,
ul.mobileNavigation li a#search:hover,
.searchCol,
ul.navigation li.active a#search {
  color: var(--rouge) !important;
}

.controlbar {
  /* text-align: center; */
  display: block;
  z-index: 100;
  /* align-items: center;
  justify-content: center; */
  color: #fff;
  position: fixed;
  width: 100%;
  opacity: 0;
  transition: ease-in-out 0.6s;
}

.controlbar .scrolled {
  height: 40px;
}

.controlbar .grid-container {
  height: 80px !important;
}

.distro {
  display: flex !important;
  justify-content: space-between !important;
}

.distro.distroprac {
  margin-top: 42px;
}

.distro p {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-family: "Gill Sans Nova W01 Medium";
  text-transform: uppercase;
  line-height: 1.2em;
  letter-spacing: 0.22em;
  font-size: 1.05em;
}

.distro p a {
  text-decoration: none;
  color: var(--hopkinsblue);
}

.distro.distroprac p a {
  color: var(--ocean);
}

.grid-control {
  padding-top: 26px;
  padding-bottom: 26px;
  display: block;
  height: auto;
  background: rgba(256, 256, 256, 1);
}

.grid-control ul li a {
  font-family: "Gill Sans Nova W01 Medium";
  text-transform: uppercase;
  line-height: 1.2em;
  letter-spacing: 0.22em;
  font-size: 1.05em;
  text-decoration: none;
  color: var(--hopkinsblue);
}

.grid-control.grid-control-practice ul li a {
  color: var(--ocean);
}

.grid-control ul li a:hover {
  color: var(--cool);
}

.grid-push-projects {
  margin-top: 86px;
}

.grid-push-practice {
  margin-top: 86px;
}

p a.navActive,
li.navActive a,
.distro p a:hover,
li:hover a {
  color: var(--cool) !important;
}

/* .scrollable-area {
  height: 200vh;
} */

/* end Navigations */

.grid-submenu {
  background: var(--warm);
  display: block;
  margin-bottom: 30px;
}

.grid-submenu ul,
.grid-submenu-white ul {
  padding: 30px;
  line-height: 1.4em;
  font-size: 1.1em;
  margin: 0 12% 18px 0;
}

.grid-submenu-white ul {
  padding: 10px 30px 30px 15px !important;
}

.grid-submenu ul li a {
  font-family: "Sabon LT W01 Roman";
  text-decoration: none;
  color: var(--white);
  list-style-type: none;
}

.grid-submenu-white {
  display: block;
  margin-bottom: 30px;
}

.grid-submenu-white ul li a {
  font-family: "Sabon LT W01 Roman";
  text-decoration: none;
  color: var(--cool);
  list-style-type: none;
}

/* Home page */

.grid-focal {
  padding: 0;
  margin-right: 16px;
}

.focal {
  margin-top: 30px;
  width: 100%;
  height: calc(100vh - (60px));
}

/* end Home page */

.largetext,
.quotetext {
  margin-bottom: 22px;
}

.largetext {
  margin-bottom: 30px;
}

.largetext h4,
.quotetext h4 {
  font-size: 2em;
  line-height: 1.15em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-left: 0;
  margin-right: 10%;
}

.quotetext h4 {
  font-size: 1.35em;
}

.quotetext h4 {
  margin-left: 10%;
  text-align: center;
}

.quotetext p {
  font-family: "Sabon LT W01 Italic";
  font-size: 1.2em;
  text-align: center;
  margin: 24px 0 24px 0;
  padding: 0;
}

.pChunk {
  margin-bottom: 30px;
}

/* .pChunk:hover * img {
  transition-duration: 0.5s;
  filter: grayscale(100%);
  opacity: 0.8;
} */

.pChunk .block h1 {
  transition: color 0.5s;
}

/* .pChunk:hover .block h1 {
  color: var(--hopkinsblue);
} */

/* .pChunk .block {
  background: #eee;
} */

.pFilm {
  margin-bottom: 20px;
}

.pChunkLeft {
  padding-left: 15px;
  padding-right: 15px;
}

.pChunkRight {
  padding-left: 15px;
  padding-right: 15px;
}

.block {
  width: 100%;
  /* height: 80%;
  position: relative;
  overflow: hidden !important; */
}

.drawing a img {
  border: 1px solid #e2e2e2;
}

/* .pChunk:hover h1.projectTitle {
  color: var(--hopkinsblue);
} */

h1.projectTitle {
  width: 90%;
  letter-spacing: 0.22em;
  /* transition-duration:0.5s; */
  text-transform: uppercase;
  font-size: 3em;
  color: var(--white);
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 14px;
  left: 17px;
  opacity: 0;
  z-index: 2;
  line-height: 1.15em;
  text-shadow: 2px 3px 5px rgb(0 0 0 / 60%);
}

h1.projectTitle.smallerProjectTitle {
  font-size: 2em;
  left: 18px;
  bottom: 16px;
}

h1.projectTitle.searchTitle {
  font-size: 1.1em;
}

h1.projectTitle span {
  font-size: 0.8em;
}

.showTitle {
  opacity: 1 !important;
  transition: 1s;
}

h1.pageTitle {
  letter-spacing: 0.22em;
  text-align: right;
  text-transform: uppercase;
  font-size: 2em;
  color: var(--cool);
  margin-bottom: 18px;
  margin-right: -6px;
  padding-right: 0;
  line-height: 1.15em;
}

.overlayText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.overlayText h1,
.overlayText h2,
.overlayText h3,
.overlayText h4,
.overlayText h5,
.overlayText h6,
.overlayText p {
  font-family: "Gill Sans Nova W01 Medium";
  width: 100%;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  font-size: 4.35em;
  color: var(--white);
  margin: 0;
  padding: 0;
  line-height: 1.35em;
  text-shadow: 2px 3px 5px rgb(0 0 0 / 60%);
}

.overlayText h2 {
  font-size: 4em;
}

.overlayText h3 {
  font-size: 3em;
}

.overlayText h4 {
  font-size: 2em;
}

.overlayText h5 {
  font-size: 1.6em;
}

.overlayText h6 {
  font-size: 1.4em;
}

.overlayText p {
  font-size: 1.2em;
}

.textpad {
  width: 100%;
  height: 32px;
}

p.optionalImageTitle {
  line-height: 1.3em;
  font-size: 1em;
  padding: 0;
  margin-bottom: 0;
}

p.optionalImageTitle {
  margin-top: 8px;
  font-family: "Sabon LT W01 Bold";
}

.statszone {
  width: 100%;
  height: 0;

  padding-bottom: 100%;
  background: var(--lightgrey);
  display: block;
}

.statszoneInner {
  width: 100%;
  height: auto;
  float: left;
  display: block;
  padding: 24px 20px 20px 29px;
}

.alto {
  background: var(--lightgrey);
}

.statszone table {
  line-height: 1.3em;
  font-size: 1.05em;
  padding: 24px;
  font-family: "Gill Sans Nova W01 Medium";
  width: auto;
  letter-spacing: 0.22em;

  text-transform: uppercase;
  padding: 0;
  color: var(--white);
}

.statszone table tr td {
  padding: 0 8px 4px 0;
}

.fw {
  width: 100%;
}

.b-lazy {
  -webkit-transition: opacity 500ms ease-in-out;
  -moz-transition: opacity 500ms ease-in-out;
  -o-transition: opacity 500ms ease-in-out;
  transition: opacity 500ms ease-in-out;
  max-width: 100%;
  opacity: 0;
}
.b-lazy.b-loaded {
  opacity: 1;
}

/* end Images */

/* Search Panel */

.searchPanel {
  position: absolute;
  left: 25%;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 2000;
  background: var(--white);
  display: none;
  overflow-y: scroll !important;
}

.searchPanelMobile p,
.searchPanel p {
  font-family: "Gill Sans Nova W01 Medium";
  width: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 1.95em;
  margin-top: 40px;
  margin-bottom: 22px;
}

.searchPanelGo {
  display: block;
}

.grid-search-location {
  position: relative;
  margin-bottom: 30px;
  cursor: pointer;
}

.grid-search-location h4.selected,
.grid-search-location:hover h4 {
  color: var(--rouge);
}

.grid-search-location h4 {
  position: absolute;
  bottom: 19px;
  left: 33px;
  text-transform: uppercase;
  color: var(--white);
  font-size: 2em;
  z-index: 2;
  letter-spacing: 0.22em;
  transition-duration: 0.5s;
  max-width: 270px;
  text-shadow: 2px 3px 5px rgb(0 0 0 / 60%);
}

input.sinput,
input.smallinputA,
input.smallinputB {
  font-family: "Gill Sans Nova W01 Medium";
  width: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  width: 100%;
  border: 0;
  float: left;
  color: var(--rouge);
  font-size: 1.95em;
  padding: 0;
  background: transparent;
  border-bottom: 3px solid var(--cool);
  margin-top: 50px;
  margin-bottom: 30px;
}

input.smallinputA,
input.smallinputB {
  color: var(--ocean);
  font-size: 1.05em;
  border-bottom: 0px solid var(--cool);
  margin-top: 0px;
  margin-bottom: 0px;
}

ul.slist li {
}

ul.slist li a {
  font-family: "Gill Sans Nova W01 Medium";
  width: 100%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cool);
  display: inline-block;
  width: 100%;
  text-decoration: none;
  line-height: 1.4em;
  font-size: 1.1em;
  margin: 0 12% 8px 0;
}

ul.slist li a strong {
  font-family: "Gill Sans Nova W01 Medium";
}

ul.slist li a:hover {
  color: var(--rouge) !important;
}

ul.slist li a span.extract {
  color: var(--warm);
}

.searchby span:hover {
  color: var(--hopkinsblue);
  cursor: pointer;
}

ul.slist {
  height: auto !important;
}

::placeholder {
  color: var(--warm);
  opacity: 1;
}

mark {
  color: var(--rouge);
  background: transparent;
}

span.hidden {
  display: none;
}

.searchChunk {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: var(--lightgrey);
  position: relative;
  margin-bottom: 30px;
}

.searchChunk p {
  font-family: "Gill Sans Nova W01 Medium";
  width: 90%;
  letter-spacing: 0.22em;
  line-height: 1.3em;
  text-transform: uppercase;
  font-size: 1.15em;
  color: var(--white);
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 15px;
  left: 15px;
  transition-duration: 0.5s;
}

.pChunkSearchResult {
  display: none;
}
/* .pChunkSearchResult .block {
  background: #eee;
} */

.pChunkSearchResult:hover * h1 {
  color: var(--rouge);
}
/* end Search */

/* People Chunk */

.filterBlock {
  background: var(--lightgrey);
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.filterBlock p {
  font-family: "Gill Sans Nova W01 Medium";
  letter-spacing: 0.22em;
  line-height: 1.2em;
  text-transform: uppercase;
  padding: 16px 0 0 19px;
  color: var(--white);
  font-size: 1em;
  margin-right: 0;
}

.peepChunk,
.peepChunkS,
.peepChunkF {
  margin-bottom: 30px;
  position: relative;
}

.peepChunkS,
.peepChunkF {
  display: none;
}

p.peepTitle {
  font-family: "Gill Sans Nova W01 Medium";
  width: 90%;
  letter-spacing: 0.22em;
  line-height: 1.3em;
  text-transform: uppercase;
  font-size: 1.1em;
  color: var(--white);
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 16px;
  left: 19px;
  opacity: 0;
  transition: opacity 1s;
  text-shadow: 2px 3px 5px rgb(0 0 0 / 80%);
  overflow-wrap: break-word;
}

p.peepTitle span {
  font-size: 0.9em !important;
}

.showTitle {
  opacity: 1 !important;
  transition: opacity 1s;
}

.peepChunk:hover * img {
  transition-duration: 0.5s;
}

.peepChunk:hover p.showTitle,
.peepChunkS:hover p.showTitle,
.peepChunkF:hover p.showTitle {
  color: var(--ocean);
  transition: color 0.5s;
}

.break {
  width: 100%;
  height: 30px;
  float: left;
  display: block;
}

.filterBlock p span:hover {
  cursor: pointer;
}

p span.selected {
  color: var(--cool);
}

h4.subjectName {
  margin-top: 8px;
  font-family: "Gill Sans Nova W01 Medium";
  width: 96%;
  letter-spacing: 0.22em;
  line-height: 1.2em;
  text-transform: uppercase;
  font-size: 2em;
}

h4.subjectName span {
  font-size: 0.7em;
}

.personColumn h4 {
  padding-bottom: 20px;
}

.personColumn p {
  margin-right: 0;
}

.personColumn img {
  margin-bottom: 11px;
}

h4.subjectName.journalGrid {
  font-size: 1.1em;
  margin-top: 8px;
  margin-bottom: 12px;
  transition-duration: 0.5s;
}

h4.subjectName.largeSubjectName {
  font-size: 4.2em;
  margin-top: 0;
  width: 100%;
  margin-right: 0;
  margin-bottom: 30px;
}

.journalChunk {
  padding-left: 0;
  padding-right: 0;
}

.journalChunk:hover h4 {
  color: var(--cool);
}

.journalChunk * {
  text-decoration: none;
}

.journalChunk p {
  margin-right: 2%;
  color: var(--cool);
  margin-bottom: 26px;
}

.grid-cvtext {
  margin-top: 52px;
}

.contactMap {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border: 1px solid #e2e2e2;
  margin-bottom: 21px;
}

h4.subjectName.contactCol {
  margin-top: 12px;
  margin-bottom: 20px;
}

/* end People Chunk */

/* Show page */

.init {
  opacity: 1 !important;
  transition-duration: 1.2s;
  transition-property: opacity;
}

/* end Show page */

.plyr {
  font-family: "Gill Sans Nova W01 Medium" !important;
}

.socio i.fa-brands {
  color: var(--warm);
  padding: 36px 12px 0 0;
  transition: color 0.5s;
}

.socio i.fa-brands:hover {
  color: var(--cool);
}

.grid-container-contact p {
  font-family: "Gill Sans Nova W01 Medium";
  overflow-wrap: break-word;
  font-size: 1.2em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-right: 4%;
}

.grid-container-contact p a {
  text-decoration: none;
}

/* Responsive */

@media only screen and (min-width: 1920px) {
  .grid-pre,
  .grid-nav {
    width: 15%;
  }
  .grid-main,
  .grid-control {
    width: 85%;
  }
  .searchPanel {
    left: 15%;
  }
}

@media only screen and (min-width: 1720px) and (max-width: 1919px) {
  .grid-pre,
  .grid-nav {
    width: 20%;
  }
  .grid-main,
  .grid-control {
    width: 80%;
  }

  .searchPanel {
    left: 20%;
  }
}
@media only screen and (max-width: 1400px) {
  .overlayText h1 {
    font-size: 3em;
  }
  .statszoneInner {
    padding: 14px 10px 10px 19px;
  }

  .statszone table {
    line-height: 1.3em;
    font-size: 1em;
  }
}

@media only screen and (max-width: 1120px) {
  .distro p {
    font-size: 0.95em;
  }
}

@media only screen and (max-width: 1000px) {
  .distro p {
    font-size: 0.85em;
  }
}

@media only screen and (max-width: 820px) {
  .distro p {
    font-size: 0.8em;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {
  img.logo {
    width: 20vw;
  }
}

@media only screen and (min-width: 980px) and (max-width: 1280px) {
  p.peepTitle,
  .filterBlock p {
    font-size: 1.05em;
  }
}

@media only screen and (max-width: 979px) {
  .filterBlock p {
    font-size: 1em;
  }
  .peepChunk,
  .peepChunkS,
  .peepChunkF,
  .filterChunk {
    width: 50% !important;
  }
  .grid-search-location h4 {
    font-size: 1.2em !important;
  }
}

@media only screen and (max-width: 900px) {
  .overlayText h1 {
    font-size: 2.4em;
  }
  /* p.peepTitle, */
  .filterBlock p {
    font-size: 0.9em;
  }

  p.peepTitle {
    bottom: 10px;
    left: 10px;
    font-size: 0.95em;
  }
  p.peepTitle span {
    font-size: 0.8em !important;
    line-height: 1.1em;
  }
  .grid-search-location h4 {
    font-size: 1.2em !important;
    bottom: 9px;
    left: 23px;
  }
  .searchPanel p {
    font-size: 1.3em;
  }
  input.sinput {
    margin-top: 45px;
    font-size: 1.3em;
  }
  h1.projectTitle.searchTitle {
    letter-spacing: 0.18em;
    font-size: 0.85em;
    bottom: 7px !important;
    left: 7px !important;
  }
}

@media only screen and (max-width: 767px) {
  /* * {
    transition-duration: 0s;
  } */
  .statszone table {
    font-size: 0.95em;
  }
  .socio {
    display: none;
  }

  .largetext h4 {
    margin-right: 0;
  }

  .grid-search-location {
    margin-bottom: 10px;
  }

  .pChunkSearchResult {
    margin-bottom: 10px !important;
  }

  /*h1.projectTitle.searchTitle {
    font-size: 1.2em;
    bottom: 13px;
    left: 13px;
  } */
  .grid-search-location h4 {
    /* font-size: 1.4em !important; */
    bottom: 13px;
    left: 13px;
    transition-duration: 0s !important;
  }

  h1.projectTitle.searchTitle {
    letter-spacing: 0.12em !important;
    font-size: 0.85em !important;
    bottom: 7px !important;
    left: 7px !important;
  }

  input.sinput {
    margin-top: 0;
  }

  .searchPanelMobile p {
    font-size: 1.1em;
  }

  p.peepTitle {
    width: 90%;
    letter-spacing: 0.18em;
    line-height: 1.1em;
    bottom: -4px;
    color: white;
    font-size: 0.9em;
    opacity: 1 !important;
    text-shadow: 2px 3px 5px rgb(0 0 0 / 92%);
    transition-duration: 0s !important;
  }

  p.peepTitle span {
    font-size: 0.75em !important;
  }

  .filterBlock p {
    padding: 10px 20px 10px 10px;
    font-size: 0.9em;
  }

  .pChunk {
    margin-bottom: 20px;
  }

  .grid-submenu,
  .grid-submenu-white {
    margin-bottom: 20px;
  }

  .topBlock {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 82px;
    background: rgba(256, 256, 256, 0.9);
    z-index: 2;
    border-bottom: 1px solid #e2e2e2;
  }

  .logoHolder {
    position: fixed;
    top: 20px;
  }

  img.logo {
    max-width: 189px;
  }

  .grid-10,
  .grid-100,
  .grid-15,
  .grid-20,
  .grid-25,
  .grid-30,
  .grid-33,
  .grid-35,
  .grid-40,
  .grid-45,
  .grid-5,
  .grid-50,
  .grid-55,
  .grid-60,
  .grid-65,
  .grid-66,
  .grid-70,
  .grid-75,
  .grid-80,
  .grid-85,
  .grid-90,
  .grid-95,
  .mobile-grid-10,
  .mobile-grid-100,
  .mobile-grid-15,
  .mobile-grid-20,
  .mobile-grid-25,
  .mobile-grid-30,
  .mobile-grid-33,
  .mobile-grid-35,
  .mobile-grid-40,
  .mobile-grid-45,
  .mobile-grid-5,
  .mobile-grid-50,
  .mobile-grid-55,
  .mobile-grid-60,
  .mobile-grid-65,
  .mobile-grid-66,
  .mobile-grid-70,
  .mobile-grid-75,
  .mobile-grid-80,
  .mobile-grid-85,
  .mobile-grid-90,
  .mobile-grid-95 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .personColumn,
  .grid-container-people {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .peepChunk,
  .peepChunkS,
  .peepChunkF,
  .filterChunk {
    margin-bottom: 10px;
  }

  .peepChunkS,
  .peepChunkF {
    display: none;
  }

  .personColumn

  /* p.peepTitle {
    font-size: 1em;
  } */

  .grid-cvtext {
    margin-top: 26px;
  }

  ul.mobileNavigation li a,
  ul.social li a {
    font-size: 1.2em !important;
    line-height: 1.65em;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--cool);
    /* transition-duration: 0.4s; */
  }

  ul.mobileNavigation li a:hover,
  ul.social li a:hover {
    color: var(--cool);
  }
  ul.subsub {
    margin-bottom: 12px;
  }
  ul.subsub li a {
    line-height: 2em !important;
  }

  ul.mobileNavigation li a.subMobileMenu {
    font-size: 1em !important;

    color: var(--warm);
  }

  ul.social {
    margin-top: 26px;
  }

  ul.social li a {
    font-size: 1em !important;
  }

  p {
    margin: 0 4% 18px 0 !important;
    font-size: 1.1em;
  }

  ul.subNavigation {
    display: none;
  }

  .grid-focal {
    height: calc(88vh);
    padding-left: 10px;
    padding-right: 0 !important;
    margin-right: 0;
  }

  .focal {
    margin-top: 6px;
    height: calc(100vh - 110px);
    margin-bottom: 0px;
  }

  /* Mobile Navigation */

  .con,
  .special-con {
    cursor: pointer;
    display: inline-block;
  }

  .bar {
    display: block;
    height: 3px;
    width: 40px;
    background: var(--cool);
    margin: 8px auto;
  }

  .con {
    position: fixed;
    z-index: 40;
    right: 10px;
    top: 12px;
    width: auto;
    margin: 0 auto;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }

  .middle {
    margin: 0 auto;
  }

  .bar {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }

  .con.tog .top {
    -webkit-transform: translateY(15px) rotateZ(45deg);
    -moz-transform: translateY(15px) rotateZ(45deg);
    -ms-transform: translateY(15px) rotateZ(45deg);
    -o-transform: translateY(15px) rotateZ(45deg);
    transform: translateY(11px) rotateZ(45deg);
    background: var(--cool);
  }

  .con.tog .bottom {
    -webkit-transform: translateY(-20px) rotateZ(-45deg);
    -moz-transform: translateY(-15px) rotateZ(-45deg);
    -ms-transform: translateY(-15px) rotateZ(-45deg);
    -o-transform: translateY(-15px) rotateZ(-45deg);
    transform: translateY(-11px) rotateZ(-45deg);
    background: var(--cool);
  }

  .con.tog .middle {
    width: 0;
  }

  ul.mobileNavigation {
    padding-top: 88px;
    list-style-type: none;
  }

  .momenu {
    position: fixed;
    top: 0;
    left: -100vw;
    width: 100%;
    height: 100%;
    z-index: 30;
    background: var(--white);
    transition-duration: 0.4s;
    opacity: 0;
    overflow-y: hidden !important;
  }

  .momenushow {
    left: 0;
    opacity: 1;
  }

  /* .momenu img.logo {
    position: absolute;
    top: 20px;
    left: 20px;
  } */

  .grid-container {
    padding-left: 5px;
    padding-right: 5px;
  }
  .grid-container-nom {
    margin-top: 86px;
  }

  .grid-container-nom-nom {
    padding-left: 0 !important;
  }

  .logoHolder {
    left: 10px;
  }
  .pChunkLeft {
    padding-right: 0;
  }

  .pChunkRight {
    padding-left: 0;
  }

  .contactSection {
    margin-bottom: 30px;
  }

  .peepChunk,
  .peepChunkS,
  .peepChunkF,
  .filterChunk {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* .peepChunkRight {
    padding-left: 10px !important;
    padding-right: 0 !important;
  } */
  h4.subjectName.largeSubjectName {
    font-size: 1.9em;
    margin-bottom: 12px;
    letter-spacing: 0.15em;
  }

  h1.projectTitle {
    font-size: 1.5em !important;
    opacity: 1 !important;
    transition-duration: 0s !important;
  }

  h1.projectTitle.smallerProjectTitle {
    font-size: 1.6em;
  }

  .grid-submenu-white ul {
    padding: 10px 30px 0 0 !important;
  }

  .grid-list {
    padding-left: 10px;
    padding-right: 10px;
  }

  .textpad {
    height: 8px;
  }

  .quotetext p {
    font-size: 1em;
  }

  .overlayText h1,
  .overlayText h2,
  .overlayText h3,
  .overlayText h4,
  .overlayText h5,
  .overlayText h6,
  .overlayText p {
    font-size: 1.6em !important;
  }

  .largetext h4 {
    font-size: 1.2em !important;
  }

  .quotetext h4 {
    font-size: 1.1em !important;
  }

  .grid-75.grid-main {
    padding-right: 0 !important;
  }

  .grid-push-practice,
  .grid-push-projects {
    margin-top: 0;
  }

  .statszone p {
    margin: 12px 0 6px 12px !important;
  }

  .quotetext p {
    margin: 12px 0 4px 0 !important;
  }
  .quotetext h4 {
    margin-left: 5% !important;
    margin-right: 5% !important;
  }
  .mobileNavigation li.active a#Projects {
    color: var(--hopkinsblue) !important;
  }
  .mobileNavigation li.active a#Practice {
    color: var(--ocean) !important;
  }
  .pChunkSearchResult {
    padding-left: 5px;
    padding-right: 5px;
  }
  .grid-search-location {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .grid-search-location:nth-child(2n) {
    padding-right: 5px !important;
    padding-left: 5px !important;
    opacity: 1 !important;
  }
  ul.slist li a {
    font-size: 1em !important;
    margin: 0 0 8px 0;
    transition-duration: 0s !important;
  }
}

/* end Responsive */

/* iPad 1, 2, Mini and Air */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  h4.subjectName.journalGrid {
    font-size: 1em;
  }
  ul.navigation {
    /* margin-top: calc(100vh - 250px); */
    font-size: 1.25em;
  }
  .grid-container-contact p {
    font-size: 0.95em;
    overflow-wrap: break-word;
  }
  .distro.distroprac {
    margin-top: 26px;
  }
  .distro p {
    font-size: 0.9em !important;
  }
  h1.projectTitle {
    font-size: 2.2em;
  }
  h1.projectTitle.smallerProjectTitle {
    font-size: 1.4em;
  }
  p {
    font-size: 1.05em;
    margin-right: 6%;
  }
  .statszone table tr td {
    font-size: 0.85em;
    letter-spacing: 0.12em;
  }
  .grid-list-container {
    overflow-x: hidden !important;
  }
  .focal {
    height: calc(100vh - (90px));
  }
  h4.subjectName.largeSubjectName {
    font-size: 2.8em !important;
  }
}

/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  h4.subjectName.journalGrid {
    font-size: 1em;
  }
  ul.navigation {
    /* margin-top: calc(100vh - 250px); */
    font-size: 1.15em;
  }
  .grid-container-contact p {
    font-size: 0.95em;
    overflow-wrap: break-word;
  }
  .distro.distroprac {
    margin-top: 26px;
  }
  .distro p {
    font-size: 0.9em !important;
  }
  h1.projectTitle {
    font-size: 2.2em;
  }
  h1.projectTitle.smallerProjectTitle {
    font-size: 1.4em;
  }
  p {
    font-size: 1.05em;
    margin-right: 6%;
  }
  .statszone table tr td {
    font-size: 0.85em;
    letter-spacing: 0.12em;
  }
  .grid-list-container {
    overflow-x: hidden !important;
  }
  .focal {
    height: calc(100vh - (90px));
  }
  h4.subjectName.largeSubjectName {
    font-size: 2.7em !important;
  }
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  h4.subjectName.journalGrid {
    font-size: 1em;
  }
  ul.navigation {
    /* margin-top: calc(100vh - 250px); */
    font-size: 1.15em;
  }
  .grid-container-contact p {
    font-size: 0.95em;
    overflow-wrap: break-word;
  }
  .distro.distroprac {
    margin-top: 26px;
  }
  .distro p {
    font-size: 0.9em !important;
  }
  h1.projectTitle {
    font-size: 2.2em;
  }
  h1.projectTitle.smallerProjectTitle {
    font-size: 1.4em;
  }
  p {
    font-size: 1.05em;
    margin-right: 6%;
  }
  .statszone table tr td {
    font-size: 0.85em;
    letter-spacing: 0.12em;
  }
  .grid-list-container {
    overflow-x: hidden !important;
  }
  .focal {
    height: calc(100vh - (90px));
  }
  h4.subjectName.largeSubjectName {
    font-size: 2.7em !important;
  }
}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) {
  h4.subjectName.journalGrid {
    font-size: 1em;
  }
  ul.navigation {
    /* margin-top: calc(100vh - 250px); */
    font-size: 1.15em;
  }
  .grid-container-contact p {
    font-size: 0.95em;
    overflow-wrap: break-word;
  }
  .distro.distroprac {
    margin-top: 26px;
  }
  .distro p {
    font-size: 0.9em !important;
  }
  h1.projectTitle {
    font-size: 2.2em;
  }
  h1.projectTitle.smallerProjectTitle {
    font-size: 1.4em;
  }
  p {
    font-size: 1.05em;
    margin-right: 6%;
  }
  .statszone table tr td {
    font-size: 0.85em;
    letter-spacing: 0.12em;
  }
  .grid-list-container {
    overflow-x: hidden !important;
  }
  .focal {
    height: calc(100vh - (90px));
  }
  h4.subjectName.largeSubjectName {
    font-size: 2.8em !important;
  }
}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  h4.subjectName.journalGrid {
    font-size: 1em;
  }
  ul.navigation {
    /* margin-top: calc(100vh - 250px); */
    font-size: 1.15em;
  }
  .grid-container-contact p {
    font-size: 0.95em;
    overflow-wrap: break-word;
  }
  .distro.distroprac {
    margin-top: 26px;
  }
  .distro p {
    font-size: 0.9em !important;
  }
  h1.projectTitle {
    font-size: 2.2em;
  }
  h1.projectTitle.smallerProjectTitle {
    font-size: 1.4em;
  }
  p {
    font-size: 1.05em;
    margin-right: 6%;
  }
  .statszone table tr td {
    font-size: 0.85em;
    letter-spacing: 0.12em;
  }
  .grid-list-container {
    overflow-x: hidden !important;
  }
  .focal {
    height: calc(100vh - (90px));
  }
  h4.subjectName.largeSubjectName {
    font-size: 2.8em !important;
  }
}