/* TEXT STYLES */
#houseplants {
  background-image:url('../images/houseplant_bg_texture_lighter.png');
  background-size:cover;
  background-repeat:no-repeat;
  position:relative;
  background-attachment:fixed;
}

#urban-nature {
  /* background-image:url('../images/home_background_pattern_white_lowop.png'); */
background-color:#FFE8CB;
}

#virtualNature {
  background-color:black;
  overflow-x:hidden;
  transition: 1s ease;
}

/* .scroll-snap-container {
  scroll-snap-type:y mandatory;
  display:flex;
  flex-direction:column;
  overflow-y: scroll;
  height:100vh;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior:smooth;
} */


.horizontal-arrow-right {
  font-family:'DM Serif Display';
  color:black;
  display:flex;
  flex-direction:row-reverse;
  padding-top:16%;
  opacity:0.7;
  padding-right:7%;

}

.horizontal-arrow-right-figure {
  background-image:url('../images/refined_arrow_2.png');
  height:110px;
  width:110px;
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
}

.bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(30px);
  }
  60% {
    transform: translateX(15px);
  }
}



body {
  width:100vw;
  height:100vh;
}

p {
  font-family: 'Barlow';
  font-size: 1.5vw;
  line-height: 2.1vw ;
  padding-bottom:2%;
}

sup {
  display:none;
  vertical-align: super;
        font-size: small;
}

.chart-type-line {
  font-family:Barlow!important;
}

#landing p {
  font-size:1.3vw;
  line-height:1.7vw;
}

.accordion-question{
  background-color:green;
  color:white;
  padding:1% 2%;
  margin:2% 0% 0% 0%;

}

.accordion-answer{
  background-color:#ffe8cb!important;
  font-size:
}

.accordion-answer p:first-child {
  padding-top:2%;
}

.accordion-answer p {
  padding-left:2%;
  font-size:1.3vw;
}

#houseplants p a {
  color: green;
    font-weight: 500;
    text-decoration: underline;
}

h4 {
  font-family:Barlow;
  text-transform:uppercase;
  font-weight:500;
}

.accordion {
  cursor:pointer;
}

.endnote-section {
  background-color:black;
      padding:5% 0%;
      border-bottom:1px solid white;
}

#houseplants .endnote-section {
  background:rgba(0,0,0,0);
  padding:5% 0%;
}

.endnote-container {
    margin:0% 15%;
    padding:1% 3%;
    background:rgba(255,255,255,0.7);
}

#houseplants .endnote-container {
  border:1px solid black;
    margin:0% 15%;
    padding:1% 3%;
    background:rgba(255,255,255,0.7);
}

.endnote-list.panel {
  /* padding-top:2%; */
  background:rgba(255,255,255,0);
}

.endnote-title {
  margin-bottom:1%;
  /* background:rgba(255,255,255,0.5); */
}

#endnotes {
  display:none;
}

#endnotes .accordion:after {
  content: '\25B9'; /* Unicode character for "plus" sign (+) */
font-size: 1.5vw;
color: black;
padding-left:1%
}

#endnotes .accordion.active:after {
  content: '\25BF';
}

.accordion-question.accordion:after {
  content: '\25B9'; /* Unicode character for "plus" sign (+) */
font-size: 1.5vw;
color: white;
padding-left:1%
}

.accordion-question.accordion.active:after {
  content: '\25BF';
}

.endnote-list p{
  font-size:1.2vw;
  line-height:1vw;

}

.test-scrolly {
  width:100vw;
  height:100vh;
  background-size:contain;
  background-image: url('../images/placeholderformyplants.jpeg');
}

.text-experiment {
  padding-top:25vh;
  padding-bottom:25vh;
  font-size:40px;
  text-align:center;
}

.container-experiment {
  height:100%;
  overflow:auto;
}

.main-text .action-button {
  font-size:1.4vw;
}

.action-button-inverse {
background-color:white;
color:black;
font-family:'Barlow';
color:black;
padding:2px;
text-decoration:none;
border-bottom:1px solid black;
cursor:pointer;

}


.action-button-inverse:hover {
background-color:black;
color:white;

}

.action-button-simple-light {
border-bottom:1px solid green;
font-family:'Barlow';
color:white;
background-color:black;
padding:0.5% 1%;
text-decoration:none;
cursor:pointer;
transition:0.5s ease;
}


.action-button-simple-light:hover {
border-bottom:1px solid black;
font-family:'Barlow';
background-color:white;
color:green;
padding:0.5% 1%;
text-decoration:none;
cursor:pointer;
}

.start-button {
  font-size:1.5vw;
}

.section-header {
  margin-left:15%;
}

.section-header h2 {
  font-size:5vw;
}

h1 {
  font-size:12vw;
    font-family: 'DM Serif Display';
    text-align: center;
}

h2 {
  font-family: 'DM Serif Display';
  font-size:2.8vw;
}

h3 {
  font-family: 'Barlow';
  font-weight:500;
  font-size:1.8vw;
  line-height:2.3vw;
}

.modal-button:hover .settings-title{
  color:white;
}



.intro {
  padding: 3% 15%;
  padding-bottom:0px;
  margin-top:0px;
}

strong {
  font-weight:500;
}

.main-text {
  margin: 0% 20%;
  padding: 2% 3%;
  font-weight:300;
  /* background-color:white; */
}

.main-text-with-plant {
padding: 0% 3%;
margin: -2% 22%;
font-weight:300;
position:relative;
}

#houseplants .main-text {
  margin:0% 22%
}

h5 {
  font-family: 'Barlow';
  color:white;
}

.slug {
    background-color:#4F50A7;
      padding:4px 8px;
}

.slug-green {
    background-color:green;
      padding:4px 8px;

}

#plantModal .action-button:hover, #urbanModal .action-button:hover {
  background-color:#80b780;
  color:black;
}


#houseplants .slug {
    background-color:green;
      padding:4px 8px;
}

#virtualNature .slug {
  background-color:#4F50A7;
}

.action-button {
  font-family:'Barlow';
  color:black;
  padding:2px;
  text-decoration:none;
  border-bottom:1px solid black;
}

.urban-button {
  font-family:'Barlow';
  color:black;
  font-weight:400;
  padding:0.5% 1%;
  text-decoration:none;
  border-bottom:2px solid #008000;
  cursor:pointer;
}

.urban-button:hover {
  color:black;
  background-color:#80b780;
}

.urban-button.active {
  color:black;
  background-color:#9fbf9f;
}

.modal-open {
  height: 100vh;
  overflow-y:hidden;

}

#urban-nature p a {
  color:#80b780;
}

.action-button:hover {
  font-family:'Barlow';
  color:white;
  background-color:black;
  cursor:pointer;
}

.main-text p{
  position:relative;
}


.on-hover {
  display:none;
}

/* .pop-up {
  position:absolute;
  background-color:green;
  width:200px;
  height:100px;

} */

.frame-left{
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  position:fixed;
    height:100vh;
}

.frame-right{
  position:absolute;
  top:0;
  right:0;
  z-index:1;
  position:fixed;
    height:100vh;
}

.frame-top{
  position:absolute;
  top:0;
  z-index:1;
  position:fixed;
    width:100vw;
}

.frame-bottom{
  position:absolute;
  bottom:0;
  z-index:1;
  position:fixed;
    width:100vw;
}

.timeline-icon {
  background-image:url('../images/timeline_icon_good.png');
  background-size:cover;
  background-position:center;
  margin-top:4%;
  height:23px;
  background-repeat:no-repeat;
}

.timeline-blurb {
  margin-top:-0.7%;
  background:rgba(255,255,255,0.7);
}

.timeline-event {
  padding:0% 15%!important;
  font-size: 1.25vw;
}

.year {
  padding-bottom:5%!important;
  font-family:DM Serif Display;
  font-size:2vw;
}

.timeline-button {
  font-family:'Barlow';
  color:white;
  width:100%;
  padding:0px;
  text-align:center;
  text-decoration:none;
  border:none;
}

.timeline-button:hover {
  color:orange;
  cursor:pointer;
  background-color:none;
}

.timeline-button:hover .timeline-icon {
  background-image:url('../images/timeline_icon_active_1.png');
}


.timeline-button.active {
   color:orange;
 }

 .timeline-button.active .timeline-icon {
    background-image:url('../images/timeline_icon_active_1.png');
  }

.settings-container {
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
}

#virtualNature .settings-container .accordion {
  height:25vh;

}

.has-plant-right {
  position:relative;
  margin-bottom: -4%!important;

}

.plant-to-right {
  display:flex;
  flex-direction:column-reverse;
  position: absolute;
      background-size: contain;
      background-repeat: no-repeat;
      left: 60vw;
      height: 25vw;
      width: 18vw;
      top: -100px;
}

.box-to-right {
  display:none;
  position: absolute;
  left: 55vw;
  top: 30px;
  background: #b6bed5;
  padding: 1%;
  /* border: 0.5px #4f50a7 solid; */
  border-bottom: 6px #4f50a7 solid;
}

.box-image {
  background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 11vw;
width: 20vw;
padding-bottom: 2%;
}

#restorative-popup {
    background-image:url('../images/VN_hero_full.png');
}

.box-text {
  padding-top:3%;
  color:black;
}

.box-title {
  font-family: 'DM Serif Display';
    font-size: 2.5vw;
    line-height: 2.8vw;
    padding-top: 3%;
    padding-bottom: 3%;
}

.plant-to-right:hover .plant-legend-right {
display:block;
}

.plant-to-right:focus .plant-legend-right {
display:block;
}

.plant-legend-right {
  text-align:right;
  align-self:flex-start;
  position:relative;
  height:10%;
  font-style:italic;
  display:none;
  padding:2% 2%;
  width:50%;
}


.plant-to-left {
  position: absolute;
  display:flex;
  flex-direction:column-reverse;
      background-size: contain;
      background-repeat: no-repeat;
        display:flex;
      right: 60vw;
      height: 25vw;
      width: 18vw;
      top: -100px;
}

.plant-legend-left {
  text-align:left;
  align-self:flex-end;
  position:relative;
height:10%;
  margin-left:3%;
  display:none;
  width:50%;
  padding:2% 3%;
  font-style:italic;
}

.plant-to-left:hover .plant-legend-left {
display:block;
}

.plant-to-left:focus .plant-legend-left {
display:block;
}

#exotic {
  background-image:url('../images/unknown-exotic.png')
}

#peperomia {
  background-image: url('../images/peperomia_left.png');

}

#jade {
  background-image: url('../images/jade_right.png');
  top:-350px;

}

#pilea-stacked {
  background-image: url('../images/pilea_stacked.png');


}


.accordion {
  transition:0.4s;
}

.panel {
  padding: 0 18px;
  background-color:rgba(255,255,255, 0.3);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease-out;

}

.settings-title {
  font-family:DM Serif Display;
  font-size:2.5vw;
  color:#767bd5;
  text-align:center;
  padding-top:5%;
}

.block-quote {
  border-left:3px solid white;
  padding: 0% 0% 0% 2%;
  margin:3% 0% 3% 2%;
}

.panel p{
  color:black;
}


.full-image {
  position:relative;
  width:100vw;
  height:100vh;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}



.full-image div {
    position:absolute;
  margin:20% 25%;
  padding: 1% 2%;
    background:rgba(225,225,225,0.8);
    border-bottom:4px solid #4F50A7;

}

.full-image p {
  padding-bottom:0px;
}

.full-image span {

}

#prospect-refuge {
  background-image:url('../images/prospect-refuge.jpeg');
}

.hideme {
  opacity:0;
}


#prisons-container {
  background-image:url('../images/prison.jpeg');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

#prisons-container:hover {
  background-image:url('../images/prison_hover.jpeg');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

#school-container {
    background-image:url('../images/classroom.jpeg');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

#school-container:hover {
    background-image:url('../images/classroom_hover.jpeg');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

#workplace-container {
  background-image:url('../images/workplace.jpeg');
  background-position:bottom;
  background-size:cover;
  background-repeat:no-repeat;
}

#workplace-container:hover {
  background-image:url('../images/workplace_dark.jpeg');
  background-position:bottom;
  background-size:cover;
  background-repeat:no-repeat;
}

#hospital-container {
  background-image:url('../images/hospital.jpeg');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

#hospital-container:hover {
  background-image:url('../images/hospital_hover.jpeg');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}


#virtualNature .tabcontent {
  padding:3% 18%;
  width:auto;
}

#virtualNature .tabcontent strong {
  color:#4f50a7;
}

#virtualNature .section-header {
  color:white;
}


.centered-tab {
  margin-left:2%;
  margin-right:2%;
  text-align:center;
}

.title {
    width:35%;
  font-size:4.3vw;
  font-family:'Barlow';
  font-weight:500;
  font-style:italic;
  text-transform:uppercase;
  line-height:1.2em;
  height:65%;

}

.title-inner {
  width:100%;
  font-size:4.3vw;
  font-family:'Barlow';
  font-weight:500;
  font-style:italic;
  text-transform:uppercase;
  line-height:1.2em;
  background-image:url('../images/logo_final.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  height:100%;
  margin-top:2%;

}

.menu-logo {
  background-image:url('../images/logo_only_blackback.png');
  width:15%;;
  height:25%;
  position:absolute;
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  top:13%;
  z-index:-1;
}




.is-nature {
  font-family: DM Serif Display;
  color:white;
  font-size:2.3vw;
}


.nature-is {
  font-family: DM Serif Display;
  color:white;
  font-size:2.3vw;

}

.card-title-wrap {
  display:none;
  position:absolute;
  bottom:20px;
  left: 10px;
  right:10px;
}

.card-title:hover .card-title-wrap {
  display:block;
}

#exotic-companions {
width: 100vw;
height: 70vh;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
padding-top:90px;
}

#companions {
  background-image: url('../images/120ppi/companions@120x.png');
  width: 80vw;
  height: 40vh;
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
  float:right;
  margin-top:-15vh;
  margin-bottom: 5%;
}

/* TABBED CONTENT */
#dataVizSection {
  width:80vw;
  display:flex;
  margin:0% 10%;

}


.landing-split {
  display:flex;
  height:100vh;
  min-width:100vw;
  scroll-snap-align: center;
}

.split-headline {
  background-image:url('../images/urban_horizontal_hero_2.png');
  width:100vw;
  height:100vh;
  background-repeat:no-repeat;
  background-position:left;
  background-size:cover;
}

.headline {
  height:100vh;
  width:100vw;
color:white;

}

.headline h1 {
padding:12% 18% 2% 18%;
font-size:8vw;
}

#virtualNature .intro {}

#virtualNature .main-text {
  color:white;
  /* background-color:black; */

}

#virtualNature {
  background-image:url('../images/VN_hero_onlybackground.png');
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
}

.vr-frame-right {
  background-image:url('../images/VN_hero_right.png')!important;
  width:20%;
  height:100vh;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  height:100vh;
}


.vr-frame-left {
  background-image:url('../images/VN_hero_left.png');
  width:20%;
  height:100vh;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;

}

.quote-container {
  padding:20% 10%;
}


.quote-main {
  font-family: Barlow;
  font-weight:400;
  line-height:2.3vw;
  text-transform:uppercase;
  font-size:1.8vw;
}
/* .split-headline h1 {
 text-align:left!important;
 font-size: 10vw;
} */

/* .split-hero {
  width:50%;
  height:100%;
  background-size:contain;
  background-position:bottom;
  background-repeat:no-repeat;
} */

.main-text-centered {
  height:100vh;
  width:100vw;
  padding:10% 20%;
  text-align:center;
  scroll-snap-align: center;
  background-color:#F5B183;
}



.tab {
  width:20%;
  display:flex;
  flex-direction:column;
  overflow: hidden;
}

#urban-nature .tab {
  flex-direction:row;
  justify-content:center;
  width:100%;
}

#virtualNature .tab {
  flex-direction:row;
  justify-content:space-around;
  align-content:center;
  width: 90%;
padding: 0% 5%;
}

#houseplants .tablinks {
    text-align:left;
    font-family: 'Barlow';
}

#virtualnature .tablinks {
    text-align:center;
    font-family: 'Barlow';
}

.image-legend {
  margin-top:1%;
  padding:0% 20%;
  margin-bottom:1%;
}

/* Style the buttons inside the tab */
.tab button {
  background-color:rgba(255,255,255,0.5);
  float: left;
  border:none;
  border-bottom: 3px solid black;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #80b780;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #008000;
  color:white;
}

/* Style the tab content */
.tabcontent {
  display: none;
  width:80%;
  padding: 6px 12px;
}

.herbcontent {
  display: none;
  width:100%;
}



/* Style the close button */
.topright {
  float: right;
  cursor: pointer;
  font-size: 28px;
}

.topright:hover {color: red;}


/* STRUCTURE */
#landing {
  overflow:hidden;
}

.essay-section {
margin: 2% 0%;
width:100vw;
height:75vh;
}

.essay-section#dataVizSection{
  height:auto;
}

.map-container {
  margin:8% 10%;
}


#virtualNature .essay-section {
  background-color:rgba(255,255,255, 0.7);
  color:black;
  height:auto;
  margin:0px;
}

#urban-nature .essay-section  {
  /* height:100vh;
  min-width:100vw; */
  scroll-snap-align: center;
}

.dark-text {
  color:black;
}

.clear-text {
  color:white;
}

.section-intro {
  text-align:center;
  padding-top:2%;
}

.section-intro-centered {
    padding-top:2%;
  text-align:center;
}

.light-text {
  font-weight:300;
}

.slug-centered {
  margin-top:15%;
  text-align:center;
}



#first-slide {
  background-image: url('../images/colonialdrawing.png');
  background-size:cover;
  background-repeat:no-repeat;
  transition: ease;
  background-color:black;
  color:white;

}

#first-slide:hover {
  cursor:pointer;

}

.slide-content {
  display:flex;
}

#first-slide .slide-content {
  align-items:center;
  padding:15% 15%;
}

.slide-centered {
  padding:20% 15%;
  flex-direction:column;
  align-items:center;
}

.slide-split {
  flex-direction:row-reverse;
  justify-content:center;
  align-items: center;
height: 100%;
}

.slide-left, .slide-right {
  width:50%;
  align-self:center;
  color:white;
  padding:0% 5%;
}

#egyptians {
  background-image:url('../images/egypt_vertical.jpg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  margin:3% 2% 3% 3%;
  height:90%;
}

#colonial-map {
    background-image: url('../images/map.jpeg');
    background-size:cover;
    background-repeat:no-repeat;
    transition: ease;
    background-color:black;
    color:white;
}


#colonial-map .slide-content {
  background:rgba(0,0,0,0.8);
  height:100%;
}


#somerset {
 background-image: url('../images/somerset.jpeg');
 background-size:cover;
 background-repeat:no-repeat;
 transition: ease;
 background-color:black;
 color:white;
}

#somerset .slide-content {
        background:rgba(0,0,0,0.6);
            height:100%;
}

#ferns {
 background-image: url('../images/ferns.png');
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 transition: ease;
 background-color:black;
 color:white;
}

#ferns .slide-content {
        background:rgba(0,0,0,0.6);
            height:100%;
}




#cacti {
  background-image:url('../images/womanwithcactus.jpg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  margin:3% 2% 3% 3%;
  height:90%;
}

#sixties {
 background-image: url('../images/1970s.png');
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 transition: ease;
 background-color:black;
 color:white;
}

#sixties .slide-content {
        background:rgba(0,0,0,0.6);
            height:100%;
}

#nineties {
 background-image: url('../images/1960.jpeg');
 background-size:cover;
 background-repeat:no-repeat;
 transition: ease;
 background-color:black;
 color:white;
}

#nineties .slide-content {
        background:rgba(0,0,0,0.6);
            height:100%;
}

#NASA {
  background-image:url('../images/nasa.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  margin:3% 2% 3% 3%;
  height:90%;
}

#NASA .slide-content {
        background:rgba(0,0,0,0.6);
            height:100%;
}


.image-bundle {
  padding:2%;
}

.image-grid {
  display:flex;
  flex-wrap:wrap;
  justify-content: space-around;

}

.slide-left {
  padding-right:10%;
}

.section-slug {
  padding:2% 21%;
  font-size:1.6vw;
}

.section-content{
  display: flex;
      height: 100%;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-around;
      padding: 0% 20%;
}

.section-content-benefits{
  display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-around;
      padding: 0% 20%;
}

.benefits-row {
  height: 35%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: space-around;
  margin: 1%;
}

.benefit-icon {
  width: 22%;
  height: auto;
  aspect-ratio: 1/1;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  cursor:pointer;
}

.section-intro {
  text-align:left;
}



.benefit-icon:hover .benefit-explanation {
  display:block;

}

.benefit-icon:focus .benefit-explanation {
  display:block;
}



.benefit-explanation {
  display:none;
  text-align:center;
}

.benefit-explanation p {
  padding-top:30%;
  font-size:1.2vw;
  line-height:1.4vw;
}

.weed-card-1 {
  margin: 2%;
  margin-bottom:5%;

}



.bouquet-1{
background-image:url('../images/weeds_parkinglot.png')!important;
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}

.weed-card-1.active .legend {
  display:block;
  font-weight:600;
}

.weed-card-1.active .herbarium-caret {
  display:block;
  font-weight:600;
}

.urban-main {
  scroll-snap-align:center;
  display:flex;
  flex-direction:column;
  margin-top:-5%;;
  width:100vw;
  /* height:100vh; */
}

.weed-card-intro {
  height:50%;
  width:50%;
}

.bouquets {
  width:100%;
  height:100%;
}

.bouquets:hover .legend {
  display:block;

}

.urban-intro {
padding: 0% 8%;
}

.intro-bouquets {
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-content:center;
}

.bouquet-2{
background-image:url('../images/bouquet_bikeway.png')!important;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}

.bouquet-3{
background-image:url('../images/bouquet_flowers.png')!important;
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}

.medium-text {
  font-size:1.3vw;
  line-height:1.7vw;
  padding-bottom:0.5%;
}

.small-text {
  font-size:1.1vw;
  line-height:1.3vw;
  padding-bottom:0.5%;
}

.devices-content .small-text {
  padding-bottom:5%;
}

.leaflet-popup-content p {
    margin: 1% 0;
}

.legend {
  display:block;
  text-align:center;
  margin-top:3%;
  height:auto;
}



.weed-card-1:hover .legend {
  display:block;
}

em {
  font-style:italic;
}

.weed-card {
  margin: 2%;
  background-color:brown;
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}

.section-content-wide {
  display: flex;
height: 80vh;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-around;
      padding: 0% 10%;
}

.journeys-row {
  height: 70%;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  margin: 1%;
}

.journeys-icon {
  width: 100%;
  height: 60%;
}

.main-text-center {
  width:100vw;
  height:100vh;
  padding: 15% 20%;
  text-align:center;
}

#benefits-section {
  height:auto;
  margin-top:0;
}

.journey-title {
  text-align: center;
}

.essay-section #journeys {
  height:40vh;
}

 #journeys {
  height:45vh;
}


.journey-plant-container {
  width: 50%;
  height: 100%;
  display:flex;
  flex-direction:column;
}

#pilea {
    background-image:url('../images/pilea2.jpeg');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    width: 100%;
    padding: 0px;
  }





#pilea-journey {
  background-image: url('../images/journeys/journey_pilea_dark.png');
  background-size:contain;
  background-repeat:no-repeat;
  transition: 1s ease;
}

#pilea-journey:hover {
  background-image: url('../images/journeys/journey_pilea_clear.png');
  background-size:contain;
  background-repeat:no-repeat;
    cursor:pointer;
}


#palm-journey {
  background-image: url('../images/journeys/journey_palm_dark.png');
  background-size:contain;
  background-repeat:no-repeat;
  transition: 1s ease;

}

#palm-journey:hover {
  background-image: url('../images/journeys/journey_palm_clear.png');
  background-size:contain;
  background-repeat:no-repeat;
  cursor:pointer;
    cursor:pointer;
}

#spider-journey {
  background-image: url('../images/journey_spiderplant.png');
  background-size:contain;
  background-repeat:no-repeat;
  transition: 1s ease;

}

#concentration {
  background-image: url('../images/infographic/concentration_colored.png');
}

#concentration:hover, #concentration:focus {
  background-image: url('../images/infographic/concentration_colored_white.png');
}

#cleanliness {
  background-image: url('../images/infographic/cleanliness_colored.png');

}

#cleanliness:hover, #cleanliness:focus {
  background-image: url('../images/infographic/cleanliness_colored_white.png');

}

#relax {
  background-image: url('../images/infographic/relax_colored.png');

}

#relax:hover, #relax:focus {
  background-image: url('../images/infographic/relax_colored_white.png');

}

#optimism {
  background-image: url('../images/infographic/optimism_colored.png');

}

#optimism:hover, #optimism:focus {
  background-image: url('../images/infographic/optimism_colored_white.png');

}

#care {
  background-image: url('../images/infographic/care_color_2.png');

}

#care:hover, #care:focus {
  background-image: url('../images/infographic/care_color_white.png');

}


#microbiome {
  background-image: url('../images/infographic/microbiome_colored.png');

}

#microbiome:hover, #microbiome:focus {
  background-image: url('../images/infographic/microbiome_colored_white.png');

}

#header {
  /* display:none!important; */
  position:fixed;
  background-color:white;
  font-family:Barlow;
  display:flex;
  color:white;;
  z-index:3;
  width:100vw;
  height:auto;
  padding-top:1%;
  background-image:url('../images/home_background_pattern_white_full.png');
  transition: opacity 0.5s;
}


.hide {
    opacity: 0;
  }

#headerLogo {
  background-image:url('../images/logo_only.png');
  width: 10%;
height: 60px;
background-size: contain;
background-repeat: no-repeat;
margin: 1%;
margin-left:3%;
align-self:left;
}

#headerMenu {
  display:flex;
  flex-direction:column;
  width:100%;
  justify-content:space-around;
}

#headerTitle{
  align-self:center;
  color:black;
  font-size:1.8vw;
  font-weight:600;
  width:100%;
  text-align:center;
  padding:0.5% 0%;;
}

#headerTitle span{
  background-color:white;
}

.dataviz-headline {
  padding:0% 0% 2% 5%;
}


#headerQuestion{
}

#headerOptions {
  font-size:1.2vw;
  display:flex;
  justify-content:space-around;
  align-items:center;
  background:rgba(0,0,0,0.8);
text-align:center;
  color:white;

background-size:cover;
height:50%;
}

#headerOptions div {
    width:15%;
    border-bottom:0px;
    height: 100%;
    display: flex;
    padding:0px;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

#headerOptions .green-button-simple {
  color:white;
}



footer {
  display:flex;
  font-family:Barlow;
  background-color:black;
  margin-top:5%;
  height:35vh;
    padding: 0% 10%;
    justify-content:space-between;
}

#urban-nature footer {
    scroll-snap-align: center;
}

#virtualNature footer {
  margin-top:0%;
}

.footer-logo {
  background-image:url('../images/logo_final.png');
  width:20%;
  margin: 3% 0%;
      padding: 1%;
      height: 50%;
  background-size:contain;
  background-repeat: no-repeat;
  background-position:center;
}

footer p {
  color:white;
  padding-top:20%;
}

.footer-column {
  width:30%;
}

.footer-button {
  color:white;
  padding: 1% 0%;
  margin:3% 0%;
}

.footer-button a {
  text-decoration:none;
  color:white;
}

.home-hero {
  display:flex;
  flex-direction:row;
  /* justify-content:space-between; */
  background-color:black;
  color:white;
  height:38vh;
}

.home-hero .action-button {
  color:white;
}



.home-hero .action-button:hover {
  color:black;
  background-color:white;
}

.home-hero .action-button:focus {
  color:black;
  background-color:white;
}

.home-hero div {
  padding: 2.5% 8%;
}

.info-section {
  display:flex;
  flex-direction:column;
  padding-left:15%!important;
  width:35%;
  justify-content: center;


}

.info-section p {
  padding-bottom: 5%;
}

.info-blurb {
  display: flex;
    flex-direction: column;
}

.info-section span {
  margin:1% 0%;
}

.info-section a {
  margin-left:1%;
}

#virtualNature p a {
  color:#767bd5;
}

#houseplants strong {
  color:#295c27;
}

#virtualNature strong {
  color:#b6bed5
}

.info-menu {
  display:flex;
  padding-top: 5%!important;
  justify-content:space-around;
}

.home-grid-container {
  background-image:url('../images/home_background_pattern_white_full.png');
  background-size:cover;
  width:100vw;
  height:62vh;
  display:flex;
  flex-direction:column;
}

.about-container {
  width:100vw;
  height:62vh;
  /* background-image:url('../images/home_background_pattern_white_full.png');
  background-size:cover; */
  background-color:white;
  background-color:rgba(255,255,255,0.95);
  position:absolute;
  bottom:0;
    transition: opacity 0.5s ease;

}

.about-content {
  margin:1% 10%;
  /* background: white; */
  color: black;
  /* border:1px solid black; */
  padding:2% 5%;
}

.credits {
  display:flex;
}

.credits div {
  width:50%;
  padding-left:2%;
    padding-right:2%;
}

.row {
  width:100vw;
  display:flex;
  flex-direction:row;
  justify-content:center;
}

.row div {
  width:16.6vw;
  height:16.6vw;
  position:relative;
  cursor:pointer;
}

.weeds-container .row {
  width:100%;
}

.intro-bouquets {
}

.final-urban {
  min-width:100vw!important;
}


.card-title {
  position:absolute;
  bottom:0px;
}

#colonial-slider.essay-section   {
  height:100vh;
}

.slide {
  width:100vw!important;
  height:100vh!important;
  background:rgba(0,0,0,0.8);
}

.arrows {
  position: absolute;
right: 4%;
      top: 7%;
      z-index: 1;
      font-family: DM Serif Display;
      font-size: 5vw;
      color:white;
}

.arrows span {
  cursor:pointer;
}



/* STYLING GRID CARDS */

#plantCard {
  background-image:url('../images/houseplants_icon.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition:1s ease;

}

#plantCard:hover {
  background-image:url('../images/houseplants_icon_darkest.png');
  background-size:cover;
  background-color: rgba(0, 0, 0, 0.5);
  background-position:center;
  background-repeat:no-repeat;
}

#urbanCard {
  background-image:url('../images/bouquet_logo.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition:1s ease;
}

#urbanCard:hover {
  background-image:url('../images/bouquet_logo_dark.png');
  background-size:cover;
  background-color: rgba(0, 0, 0, 0.8);
  background-position:center;
  background-repeat:no-repeat;

}

#virtualCard {
  background-image:url('../images/headset_square.png');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  transition:1s ease;
}

#virtualCard:hover {
  background-image:url('../images/headset_square_dark.png');
  background-size:contain;
  background-color: rgba(0, 0, 0, 0.8);
  background-position:center;
  background-repeat:no-repeat;

}

#filmCard {
  background-image:url('../images/rolleiflex.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition:1s ease;
}

#filmCard:hover {
  background-image:url('../images/rolleiflex_dark.png');
  background-size:cover;
  background-color: rgba(0, 0, 0, 0.8);
  background-position:center;
  background-repeat:no-repeat;
}

#musicCard {
    background-image:url('../images/vinyl_icon.png');
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    transition:1s ease;
}


#musicCard:hover {
    background-image:url('../images/vinyl_icon_dark.png');
    background-size:contain;
    background-color: rgba(0, 0, 0, 0.8);
    background-position:center;
    background-repeat:no-repeat;
}

#natparkCard {
    background-image:url('../images/national_parks_icon.png');
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    transition:1s ease;
}

#natparkCard:hover {
    background-image:url('../images/national_parks_icon_dark.png');
    background-size:contain;
    background-color: rgba(0, 0, 0, 0.8);
    background-position:center;
    background-repeat:no-repeat;

}


/* MODAL */
.intro-modal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-flow: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0,0,0,0.9);
  transition: opacity 0.5s ease;
  color: white;
}

.modal {
    opacity: 0;
    pointer-events: none;
}



.visible {
  opacity: 1;
  pointer-events: all;
}

.modal-content {
  background-color: #fefefe;
  display:flex;
  flex-direction:row;
  margin: 10% auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 60%; /* Could be more or less, depending on screen size */
  height:55%;
}



#dashboardMenu .modal-content {
  background-image:url('../images/home_background_pattern_white_full.png');
  background-position:center;
  background-size:cover;
  display:flex;
  flex-direction:column;
  margin: 10% auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 35%; /* Could be more or less, depending on screen size */
  height:auto;
  padding:2%;
  justify-content:center;
}

.menu-headline {
  border-bottom:2px solid;
  border-top:0px;
  text-align:center;
  height:10%;
  color:black;
  font-family:Barlow;
  font-size:1.5vw;
  padding: 3%;
  font-style:italic;
  text-transform:uppercase;
  cursor:pointer;

  /* background-color:white; */
}

#dashboardMenu a{
      text-decoration:none;
}

.menu-note a {
  text-decoration:underline!important;
}



.menu-headline:hover .pre-hover {
  display:none;
}

.menu-headline:hover .on-hover {
  display:block;
}

.purple-button {
background-color:#b6bed5;
color:black;
border-color:#4F50A7;
cursor:pointer;
}

.purple-button-simple {
color:white;
border-bottom:2px solid #767BD5;
cursor:pointer;
padding:1% 0%;
margin:0% 2%;
}

.purple-button:hover {
  background-color:#4F50A7;
  color:white;
  border-color:#4F50A7;
}

.purple-button-simple:hover {
background-color:#4f50a7;
color:white;
border-bottom:2px solid #767BD5;
cursor:pointer;
}

.purple-button-simple-active {
background-color:#4f50a7;
color:white;
border-bottom:2px solid #767BD5;
cursor:pointer;
}

.inactive:hover {
  color:black!important;
  background-color:grey!important;
}

#header a {
  text-decoration:none;
  color:black;
}

#headerOptions a {
  color:white;
  padding:6% 0%;
}

#introVideo {
  position:absolute;
  z-index:3;
  background:rgba(0,0,0,1);
  width:100vw;
  height:100vh;
  transition:visibility 1s linear, opacity 1s linear;
}

#video-container {
    margin:15vh 15%;
    position:absolute;
    transition:visibility 500ms linear, opacity 500ms linear;
}

#vid {
  cursor:pointer;
  transition:visibility 500ms linear, opacity 500ms linear;
}

.mobile-show {
  display:none;
}




/* PAGE LOADER */
#loader-container {
  position: absolute;
    z-index: 5;
    width:100vw;
    height:100vh;
    background-color:black;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transition:visibility 2s linear, opacity 2s linear;
}


#loader {
  /* position: absolute;
  left: 50%;
  top: 50%; */
  width: 120px;
  height: 120px;
  /* margin: -76px 0 0 -76px; */
  border: 6px solid white;
  border-radius: 50%;
  border-top: 6px solid green;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

#loading-text {
  color:white;
  font-family:Barlow;
  padding-top:1%;
  -webkit-animation: flickerAnimation 4s infinite;
     -moz-animation: flickerAnimation 4s infinite;
     -o-animation: flickerAnimation 4s infinite;
      animation: flickerAnimation 4s infinite;
}

@keyframes flickerAnimation {
  0%   { opacity:0; }
  80%  { opacity:1; }
  100% { opacity:0; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:0; }
  50%  { opacity:1; }
  100% { opacity:0; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:0; }
  50%  { opacity:1; }
  100% { opacity:0; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:0; }
  50%  { opacity:1; }
  100% { opacity:0; }
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.green-button {
background-color:#80B780;
color:black;
border-color:#1F4D2B;
cursor:pointer;
}



.close-video {
  position:absolute;
  top:2%;
  right:2%;
  z-index:10;
  color:black;
  font-family:Barlow;
  background-color:green;
  font-size:1.1vw;
  padding: 0.5% 1%;
  float:right;
  border:none;
  background:rgba(255,255,255,0.5);
  cursor:pointer;
  opacity:0;
  animation:fadeInAnimation ease 1s;
  animation-delay: 10s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

.green-button-simple {
color:white;
border-bottom:2px solid #008000;
padding:1% 0%;
cursor:pointer;
margin:0% 2%;
}

.green-button-simple-active {
background-color:#9fbf9f;
color:white;
border-bottom:2px solid #008000;
}

.green-button-simple:hover {
background-color:#9fbf9f;
color:black;
border-bottom:2px solid #008000;
}

.green-button:hover {
background-color:#1F4D2B;
color:white;
border-color:#1F4D2B;
}

.black-button {
background-color:black;
color:white;
border-color:white;
}

.black-button:hover {
background-color:grey;
color:black;
border-color:white;
}

.menu-note {
  color:black;
  font-family:'Barlow';
  padding-top:5%;
}

.herbarium-grid {
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  flex-wrap:wrap;
  height:auto;
  padding:0% 5% 3% 5%;
}

.herbcontent {
  background:rgba(255,255,255,0.3);
  border: 2px solid #1F4D2B;
}

.herbintro p{
  padding:3% 8%;
}

.herbarium-caret {
  display:none;
  color:#1F4d2b;
}

#flowerHerbarium {
  padding:0px;
  background-color:rgba(0,0,0,0);
}

#bikewayHerbarium {
  padding:0px;
  background-color:rgba(0,0,0,0);
}

.herbarium-grid div {
  width:20vw;
  height:25vh;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;

}



#camelia {
  background-image:url('../images/chamelia.png');
}

#collardgreen {
  background-image:url('../images/collard-greens.png');
  background-repeat:no-repeat;
  background-position:center;

}

#dogwood {
  background-image:url('../images/dogwood.png');

  background-repeat:no-repeat;
  background-position:center;
}

#pinkunknown {
  background-image:url('../images/pinkunknown.png');
  background-repeat:no-repeat;
  background-position:center;
}

#roseunknown {
  background-image:url('../images/roseunknown.png');
  background-repeat:no-repeat;
  background-position:center;
}

#trebol {
  background-image:url('../images/trebolflower.png');
  background-repeat:no-repeat;
  background-position:center;
}

#bikeway01 {
  background-image:url('../images/bikeway01.png');
  background-repeat:no-repeat;
  background-position:center;
}

#bikeway02 {
  background-image:url('../images/bikeway02.png');
  background-repeat:no-repeat;
  background-position:center;
}

#bikeway03 {
  background-image:url('../images/bikeway03.png');
  background-repeat:no-repeat;
  background-position:center;
}

#bikeway04 {
  background-image:url('../images/bikeway04.png');
  background-repeat:no-repeat;
  background-position:center;
}

#bikeway05 {
  background-image:url('../images/bikeway05.png');
  background-repeat:no-repeat;
  background-position:center;
}

#bikeway06 {
  background-image:url('../images/bikeway06.png');
  background-repeat:no-repeat;
  background-position:center;
}


#parkinglot01 {
  background-image:url('../images/parkinglot1.png');
  background-repeat:no-repeat;
  background-position:center;
}

#parkinglot02 {
  background-image:url('../images/parkinglot2.png');
  background-repeat:no-repeat;
  background-position:center;
}

#parkinglot03 {
  background-image:url('../images/parkinglot3.png');
  background-repeat:no-repeat;
  background-position:center;
}

#parkinglot04 {
  background-image:url('../images/parkinglot4.png');
  background-repeat:no-repeat;
  background-position:center;
}

#parkinglot05{
  background-image:url('../images/parkinglot5.png');
  background-repeat:no-repeat;
  background-position:center;
}

#parkinglot06 {
  background-image:url('../images/parkinglot6.png');
  background-repeat:no-repeat;
  background-position:center;
}




.fa-map-marker {
  color:#1f4d2b;
  cursor:pointer;
  -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
}

.plant-to-left,.plant-to-right {
  display:none;
}



.journeys-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-flow: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  padding: 1rem;

  transition: opacity 0.5s ease;
  color: white;

}

.journeys-content {
    background: rgba(0,0,0,0.7);
    padding:5% 10%;
}

.journeys-content p {
  font-size: 1.3vw;
  line-height:1.9vw;
}

.journeys-content-tabbed {
    background: rgba(0,0,0,0.5);
    padding:5% 10%;
    color:white;
}

.journeys-content-tabbed p {
  font-size: 1.3vw;
  line-height:1.9vw;
}




.modal-content-horizontal {
  background-color: #fefefe;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin: 10% auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 60%; /* Could be more or less, depending on screen size */
  height:55%;
}


#plantModal .modal-content {
  background-image:url('../images/houseplant_bg_texture_lowopacity.png');
  background-size:cover;
  background-repeat:no-repeat;
}

#virtualModal .modal-hero {
  background-image:url('../images/headset_icon.png');
}

#headset:hover, #playstation:hover, #screens:hover, #audio:hover {
    opacity:0.8;
}

.journey-header {
  padding-bottom:2%;
}

.modal button.close {
  top: 1rem;
  right: 1rem;
  align-self:start;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  color: black;
}


.journeys-modal button.close  {
  position:relative;
  float:right;
  color:white;
}

.herbarium-grid button.close {
  position:absolute;
  top: 100px;
right: 300px;
}

#dashboardMenu button.close {
  color:white;
  position:relative;
  z-index:3;
}


.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.close-about {
  position: relative;
    top: 0px;
    color: black;
    left: 102%;
    padding: 0.3% 1%;
    background-color: #80b780!important;
}

.modal-hero {
  background-image:url('../images/houseplant_intro.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  height:100%;
  width:60%;
}

#urbanModal .modal-hero {
    background-image:url('../images/urban-intro.png');
}

.modal-text {
  display:flex;
  flex-direction:column;
  width:40%;
  padding:0% 10% 0% 2%;
  justify-content:center;
  color:black;
}

.modal-text h5,.modal-text h2,.modal-text p, .modal-text div {
  padding: 2% 0%;
}

#plantModal .modal-content, #urbanModal .modal-content {
  border-bottom: 8px green solid;
  padding:1%;
}

#urbanModal .modal-content {
  background-color: #FFE8CB;
}

#virtualModal .modal-content-horizontal {
  background-image:url('../images/VN_hero_full.png');
  background-size:cover;
  background-position:center;
  border:none;
  border-bottom: 8px #4F50A7 solid;
}

#virtualModal .action-button {
  background-color:black;
  color:white;
  margin-top:2%;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom:1px solid white;
}

#virtualModal .action-button:hover {
  background-color:white;
  color:black;
  border-bottom:1px solid black;
}


#virtualModal h5, #virtualModal h2, #virtualModal p, #virtualModal div  {
  padding:1% 0%;
}

.modal-content-horizontal button.close {
  color:white;
  padding-right: 2%;
  padding-top:2%;
  padding-bottom: 10%;
  align-self:end;
}

#spider {
  background-image:url('../images/spider.jpeg');
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  width: 100%;
  padding: 0px;
}

#palm {
  background-image:url('../images/beaucarnea_final.jpeg');
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  width: 100%;
  padding: 0px;
}


#inProgress .modal-content-horizontal {
  background-color:black;
  border:none;
  color:white;
  text-align:center;
  border-bottom: 4px solid white;
}

#inProgress p {
  padding:5% 20%;
}

/* NAVIGATION */

#navbar {
  display:none;
}

#navbar div {
  width:60px;
  height:60px;
  margin:10px;
  background-repeat:no-repeat;
  background-size:contain;
}

#dashboardMenu {
  display:none;
}

.devices-infographic {
  display:flex;
  align-items:space-around;
  margin: 0% 13%;
}

.devices-icons {
  width:70%;
}

.intro-tabcontent {
  padding: 5% 10%;
  font-weight:500;
    background:rgba(255, 255, 255, 0);
}

.devices-content {
  width:30%;
  display:flex;
  flex-direction:column;
  margin-left:-10%;
  margin-right:10%;
}

.devices-content div {
  background:rgba(255, 255, 255, 0.6);
  color:black;
  padding:4% 8%!important;
  font-family:'Barlow';
}

.intro-tabcontent {
  padding: 5% 10%;
  font-weight:500;
  color:white!important;
  border-bottom:1px solid orange!important;
    background:rgba(255, 255, 255, 0)!important;
}

#dashboard-button {
background-image:url('../images/buttons/dashboardbutton.png');
}

#info-button {
  background-image:url('../images/buttons/infobutton.png');
};


@media only screen and (max-width:950px) {
body {
  background:yellow;
}

#header {
    display:none;
  }

  #navbar {
    display:block;
  }
}

@media only screen and (max-width:992px) {
  .home-hero {
    flex-direction:column;
    width:100vw;
    justify-content:center;
    align-items:center;
    height:45vh;
  }

.home-hero div {
  width:80vw;
  padding:2% 0%;
}

.info-blurb .modal-button {
  font-size:2.8vw;
}

.title {
  height:auto;
}

#navbar {
  display:flex;
  flex-direction:row;
  padding-left:2%;
  padding-top:1%;
  position: fixed;
  top:0;
  z-index:2;
}



.title-inner {
  width:80%;
  height:18vh;
  padding-top:15%;
  background-image:url('../images/logo_mobile_2.png');
}

.info-section {
  padding:0px!important;
  text-align:center;
}

#landing p {
  font-size:3vw;
  line-height:3.3vw;
}

  .desktop-show {
    display:none;
  }

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

  #landing {
    overflow-y:auto;
  }

  #landing .row div {
    width: 30vw;
height: 30vw;
  }

  #urban-nature .row div {
    width: 35vw;
height: 35vw;
  }

 .home-grid-container {
   flex-direction:row;

 }

.modal-content{
  flex-direction:column;
  position:relative;
}

h2 {
  font-size: 8vw;
}

.modal-hero {
  width:100%;
  background-size:contain;
  height:40%;
}

.modal-text {
  width:80%;
  align-items:center;
  text-align:center;
  padding: 5% 10%;
}

.modal-text .action-button, .urban-button  {
  font-size:3.6vw;
  margin-top:6%;
}

.about-container {
  height:55vh;

}

.about-content {
    padding:10% 5%;
}

.about-content p {
  padding-top:1%;
}



.slug, .slug-green {
  font-size:2.5vw;
}

.modal-text p {
  font-size:4vw!important;
  line-height:4.2vw!important;
}

.modal-text div {
  padding-top:4%;
}

.modal button.close {
  order:-1;
  align-self:end;
  font-size:5vw;
  padding:0% 2%;
}

.card-title {
  display:none;
}

#inProgress .modal-content-horizontal p {
  font-size: 4vw;
line-height: 5.3vw;
height:auto;
}

#inProgress .modal-content-horizontal {

height:auto;
padding-bottom:5%;
}

#header {
  display:none;
}

.landing-split {
  height: 60vw;
}

.split-headline {
  background-size:cover;
  height:auto;
  background-position:top;
}

.urban-main {
  margin-top:-5%;
}

.main-text, #houseplants .main-text, .main-text-with-plant {
  margin:0% 3%;

}

.plant-to-left,.plant-to-right {
  display:none;
}

.intro {
  padding-bottom:2%;
    padding: 3% 5%;
}

.main-text p, .main-text-with-plant p {
    font-size:4vw;
    line-height:4.7vw;
}

.section-header {
  margin-left: 5%;
      margin-right: 4%;
    padding:1% 0%;
  margin-top:4%;
}

.section-header h2 {
  font-size:7vw;
}

#urban-nature .row {
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}

.legend {
  font-size:2.5vw;
}

.small-text {
  font-size:2.5vw;
  line-height:2.8vw;
}

#video-container {
    margin: 45% 2%;
  }

.medium-text {
  font-size:2.7vw;
  line-height:3vw;
}

.weed-card-1 {
  margin-bottom:10%;
}

.herbarium-caret {
  display:none!important;
}

.herbcontent {
  margin-top:5%;
  padding-top:2%;
}

.herbarium-grid div {
    width: 50%;
    height: 20vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;


}

.weeds-container {
  padding-top:4%;
}

footer {
  align-items:center;
  height:25vh;
}

.footer-column {
  width:40%;
  text-align:left;
}

#navbar div {
  width:12vw;
  height:12vh;
}

#exotic-companions {
  height:auto;
}

h3 {
  font-size: 4.5vw;
line-height: 5vw;
}


#exotic-companions div {
  height:35vh!important;
}

.benefit-icon {
    width: auto;
    height: auto;
    aspect-ratio: 1/1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    padding: 10% 5%;

}

.benefit-explanation p {
  font-size: 2.4vw;
  line-height: 2.6vw;
}

.benefits-row {
  height:auto;
    width: 50vw;
    display: flex;
    flex-wrap:nowrap;
    flex-direction: column;
    margin: 1%;
}

.section-content-benefits {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    padding: 0% 20%;
}

#colonial-slider.essay-section {
    height: 60vh;
}

#dataVizSection {
  flex-direction:column;
  width:80%;
  align-items:center;
  justify-content:center;
}

#dataVizSection .tab {
  width:100%;
}

#dataVizSection .tabcontent {
  width:100%;
}

.tab button {
  font-size:3vw;
  padding:1%;
  border-bottom:1px solid black;
}

.slide {
  height:60vh!important;
}

.headline h1 {
  font-size:15vw;
}

.headline {
  padding-top:15vh;
  height:auto;
}

.full-image {
  height:25vh;
}

.timeline-blurb p{
  font-size:2.8vw;
  line-height:3.1vw;
}

.timeline-icon {
 height:10px;
}

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

.devices-icons {
  width:100%;
}

.devices-content {
  width:90%;
  margin-left:0px;
  margin-right:0px;
}

.intro-tabcontent {
  font-size:2.5vw;
}

#virtualNature h2 {
  margin-right:5%;
  margin-left:5%;
}

#virtualNature .settings-container .accordion {
    height: 10vh;
}

#virtualNature .tabcontent {
  margin-top: -1.3%;
}

.settings-title {
  font-size: 4vw;
  padding-top: 8%;
}

.full-image p {
  font-size: 2.5vw;
  line-height:2.7vw;
}

.timeline-event, .year {
  font-size:2.3vw;
}

.mobile-show {
  display:block;
}

.menu-headline {
  font-size:4.5vw;
}

#dashboardMenu .modal-content {
  width:85%;
}

.menu-intro {
  padding-bottom:2%;
}

.menu-logo {
  width: 20%;
  top: 21%;
}

.menu-note {
  padding:2% 3% 0% 3%;
}

#dashboardMenu button.close {
  position: absolute;
    top: 33vh;
    margin-right: 3vw;
}


#dashboardMenu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-flow: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0,0,0,0.8);
  transition: opacity 0.5s ease;
  color: black;
  z-index:3;
}

.slide-content p {
  font-size:3vw;
  line-height:3.5vw;
}



/* HOUSEPLANTS (MAYBE ALSO USEFUL FOR OTHER PAGES) */