/*
Theme Name: Treephonia
Author: Andrew Zhou
Version: 1.2
*/

/* General */
html, body{
  height: 100%;
  width: 100%;
}

a:link,
a:visited {
  color: #606060;
  text-decoration: none;
  transition: 0.2s;
}

a:hover {
  transition: 0.2s!important;
  color: #dea5a4!important;
}

p {
  font-family: 'DM Mono', monospace;
  color: #606060;
}

body {
  font-family: 'DM Mono', monospace;
  font-size: 16px;
  color: #606060;
  margin:0 auto;
  padding:0;
  max: 100%;
  overflow-x: hidden;
}

.wrapper {
  height: 100%;
}

/* Header */
.container {
  position: absolute;
  z-index: 10;
  width: 100vw;
  margin:0 auto;
  display: block;
}

.burger {
  display: flex;
  flex-wrap: wrap;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
}

.home, .home-info {
  display: inline-block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  margin-left: 60px;
  margin-right: 60px;
  white-space: nowrap;
}

.home-info {
  right: 0;
}

.home h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 2.8em;
  margin-top: 0;
  margin-bottom: 0;
  padding: 30px 0 30px 30px;
}

@media all and (max-width: 768px) {
  .home, .home-info {
    margin-left: 0px;
    margin-right: 0px;
  }

  .home h1 {
    font-size: 2.4em;
    padding: 20px 0 20px 30px;
  }

  body, html {
    height: 100%;
  }
}

/* Navigation */
#nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0 100px 0 35px;
  font-family: 'DM Mono', monospace;
  font-size: 22px;
  font-weight: bold;
  position: fixed;
  right: 0;
  height: 100%;
  z-index: 2;
  transform: translateX(100%);
  transition: transform 0.6s ease;
}

#nav.active {
  transform: translateX(0);
}

#nav ul {
  list-style: none;
  padding: 0;
}

#nav li {
  display: fixed;
  transform: translateY(120px);
  padding: 12px 0px 12px 20px;
}

#nav ul li {
  margin: 14px 20px;
  text-align: left;
}

.nav a {
  display: inline-block;
  font-size: 20px;
  color: #606060;
  text-decoration: none;
}

.nav a:hover {
  color: #dea5a4;
}

@media all and (max-width: 768px) {
  #nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    width: 100vw;
    right: 0;
    height: 100%;
    z-index: 2;
    transform: translateX(100%);
    transition: transform 0.6s ease;
  }

  #nav.active {
    transform: translateX(0);
  }

  #nav li {
    padding: 6px 0px 6px 0px;
    transform: translateY(60px);
  }

  #nav ul li {
    margin: 0 auto;
    text-align: center;
  }
}

/*Hamburger Nav*/
#hamburger {
  width: 12px;
  top: 55px;
  position: absolute;
  right: 90px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
  cursor: pointer;
  padding: 10px 10px;
}

#hamburger span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #606060;
  border-radius: 4px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#hamburger:hover span {
  background: #dea5a4;
}

#hamburger span:nth-child(1) {
  top: 0px;
}

#hamburger span:nth-child(2) {
  top: 8px;
}

#hamburger span:nth-child(3) {
  top: 16px;
}

#hamburger.open span:nth-child(1) {
  top: 8px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#hamburger.open span:nth-child(2) {
 opacity: 0;
 left: 25px;
}

#hamburger.open span:nth-child(3) {
 top: 8px;
 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -o-transform: rotate(135deg);
 transform: rotate(135deg);
}

/* Header Items Re-colour*/
#site-header-light {
  color: #fff;
}

#hamburger-light {
  width: 12px;
  top: 55px;
  position: absolute;
  right: 90px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
  cursor: pointer;
  padding: 10px 10px;
}

#hamburger-light span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #ffffff;
  border-radius: 4px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#hamburger-light.open span {
  background: #606060;
}

#hamburger-light:hover span {
  background: #dea5a4;
}

#hamburger-light span:nth-child(1) {
  top: 0px;
}

#hamburger-light span:nth-child(2) {
  top: 8px;
}

#hamburger-light span:nth-child(3) {
  top: 16px;
}

#hamburger-light.open span:nth-child(1) {
  top: 8px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#hamburger-light.open span:nth-child(2) {
 opacity: 0;
 left: 25px;
}

#hamburger-light.open span:nth-child(3) {
 top: 8px;
 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -o-transform: rotate(135deg);
 transform: rotate(135deg);
}

@media all and (max-width: 768px) {
  #hamburger {
    top: 40px;
    right: 30px;
  }
  #hamburger-light {
    top: 40px;
    right: 30px;
  }
}

/*Map*/
.svg-container {
  width: 100vw;
  height: 100%;
  top:0;
  left:0;
  position: fixed;
}

.svg-container svg {
  width: 100vw;
  height: 100%;
}

path:not(.bg-map):not(.zoom-area) {
  transition: 0.6s;
}

path:hover:not(.bg-map):not(.zoom-area) {
  fill: #006b3c;
}

.zoom-area {
  transition: 0.6s fill-opacity;
  pointer-events: bounding-box;
  cursor: pointer;
}

.zoom-area:hover {
  fill-opacity: 0.6;
}

.combo {
  fill: #006b3c !important;
  fill-opacity: 1;
}

.combos a path{
  fill: #fa0f0c !important;
}

.combo-1 path,.combo-2 path,.combo-3 path,.combo-5 path,.combo-6,.combo-7 path,.combo-9 path,.combo-10 path,.combo-11 path,.combo-12 path,.combo-13 path,.combo-14 path,.combo-15 path,
.combo-16 path,.combo-18 path,.combo-19 path,.combo-20 path,.combo-22 path,.combo-23 path,.combo-24 path,.combo-26 path,.combo-27 path,.combo-29 path,.combo-32 path{
  transition: 0.6s;
  cursor: pointer;
}

.combo-1:hover path,.combo-2:hover path,.combo-3:hover path,.combo-5:hover path,.combo-6:hover path,.combo-7:hover path,.combo-9:hover path,.combo-10:hover path,.combo-11:hover path,.combo-12:hover path,
.combo-13:hover path,.combo-14:hover path,.combo-15:hover path,.combo-16:hover path,.combo-19:hover path,.combo-18:hover path,
.combo-20:hover path,.combo-22:hover path,.combo-23:hover path,.combo-24:hover path,.combo-26:hover path,.combo-27:hover path,.combo-29:hover path,.combo-32:hover path {
  fill: #006b3c !important;
  fill-opacity: 1;
}

/*Home Banner
.banner_wrapper {
  position: fixed;
  bottom: 0px;
  margin: 0 auto;
  height:15%;
  width:70%;
  transform: translate(-50%, -50%);
  left: 50%;
  z-index: 999;
}

.banner_wrapper img {
  width: 100%;
  height: auto;
}*/

/*Map Overlay - Clouds*/
.animated-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(cloud.png);
  background-size:cover;
  z-index: 1;
  pointer-events: none;
  animation: animate 300s linear infinite;
}
@keyframes animate {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 5440px;
  }
}

/* Footer */
.logo-wrapper {
    margin-top: 15px;
    margin-bottom: 15px;
}

@media all and (max-width: 768px) and (max-height: 500px) {
  .logo-wrapper {
    display: none;
  }
}

@media all and (min-width: 768px) and (max-height: 690px) {
  .logo-wrapper {
    display: none;
  }
}

.site-footer {
  position: fixed;
  bottom: 30px;
  width: 100%;
  left: 0;
  color: #606060;
  text-align: center;
  z-index: 1;
}

.site-footer p {
  font-size: 15px;
}


@media all and (max-width: 489px) {
  .site-footer {
    bottom: 10px;
  }
}

@media all and (max-width: 768px) and (max-height: 360px) {
  .site-footer {
    display: none;
  }
}

@media all and (min-width: 768px) and (max-height: 570px) {
  .site-footer {
    display: none;
  }
}

/*Breadcrumb Nav*/
.breadcrumbs {
  position: relative;
  top: 120px;
  left:0;
  right:0;
  padding: 20px 0 20px 30px;
  margin-left: 60px;
  margin-right: 60px;
  font-size: 16px;
  font-family: 'DM Mono', monospace;
  color: #606060;
  border-bottom: 1px solid #606060;
}

.breadcrumbs a:hover {
  color: #606060 !important;
  text-decoration: underline;
}

@media all and (max-width: 768px) {
  .breadcrumbs {
    padding: 10px 0 15px 30px;
    margin: 0;
    top: 100px;
    font-size: 16px;
    font-family: 'DM Mono', monospace;
    color: #606060;
    border-bottom: 1px solid #606060;
  }
}

/* Info Pages */
.wp-block-latest-posts a {
    font-size: 20px !important;
    font-weight: 600px;
    color: rgb(102, 102, 102)
}

.home-info h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 2.8em;
  margin-top: 0;
  margin-bottom: 0;
  padding: 30px 0 30px 30px;
  border-bottom: 1px solid #606060;
  background: #fff;
}

.page-content {
  position: static;
  padding: 0 90px 30px 90px;
  margin-top: 150px;
}

.page-content h2 {
  font-size: 1.8em;
  color: #606060;
  padding: 10px 0 15px 0;
}

.page-content h3 {
  font-family: 'Roboto', sans-serif;
  color: #606060;
}

.page-content p {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  font-size: 16px;
  margin-right: 100px;
}

.page-content h4 {
  font-family: 'Roboto', sans-serif;
  font-size: 1.1em;
  font-weight: normal;
  color: #606060;
  padding: 0 0 0 0;
}

@media all and (max-width: 768px) {
  .home-info {
    margin-left: 0px;
    margin-right: 0px;
  }

  .home-info h1 {
    font-size: 2.4em;
    padding: 20px 0 20px 30px;
  }

  .page-content {
    position: static;
    padding: 0 30px 0 30px;
    margin-top: 120px;
    padding-bottom: 20px;
  }

  .page-content p {
    margin-right: 10px;
  }
}

/* Visit Page */
.visit-map iframe {
   position: relative;
   left: 0px;
   top: 0px;
}

@media all and (max-width: 768px) {
  .visit-map iframe {
    position: relative;
    left: 0px;
    top: 0px;
  }
}

@media screen and (max-width: 489px) {
  .visit-map iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:relative;
  }
}

/* Solo Pages */
body.page {
  position: relative;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.scene-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg-layer {
  z-index: 0;
}

.click-layer {
  left: 0;
  top: 0;
  height: 100%;
  width: 100vw;
  pointer-events: all;
  z-index: 5;
}

/* Multi Label */
.multi-layer {
  pointer-events: all;
  z-index: 6;
  position: relative;
  width: 100%;
  height: 100%;
}

.label-mini {
  position: absolute;
}

.label-mini span {
  display:inline-block;
  text-align: center;
  background: rgba(64, 64, 64, 0.8);
  color: white;
  font-family: 'DM Mono', monospace;
  font-size: calc(8px + 0.4vw);
  padding: 10px;
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
  transition: 0.4s ease;
}

.label-mini:hover span {
  background: rgba(128, 128, 128, 0.8);
}

/*Multi Label Reposition - "combo-style.css"*/

/* Species Label */
.label-wrapper {
  position: absolute;
  width: fit-content;
  left: 50%;
  top: 50%;
  font-size: 0;
  z-index: 10;
}

.label span {
  display:inline-block;
  text-align: left;
  width: fit-content;
  background: rgba(64, 64, 64, 0.8);
  color: white;
  font-family: 'DM Mono', monospace;
  font-size: calc(18px + 0.6vw);
  padding: 15px;
  overflow: hidden;
  white-space: nowrap;
}

.sublabel span {
  display:inline-block;
  text-align: left;
  width: fit-content;
  background: rgba(128, 128, 128, 0.8);
  font-family: 'Maitree', serif;
  font-style: italic;
  font-weight: 300;
  color: white;
  font-size: calc(16px + 0.4vw);
  padding: 1px 15px 1px 15px;
  overflow: hidden;
  white-space: nowrap;
}

@media screen and (max-width: 489px) {
  .label-wrapper {
    left: 40px !important;
    top: 55% !important;
  }

  .bg-layer img {
    object-fit: cover !important;
  }
}

/*Underline Animation*/
a.underline-left {
    position: relative;
}

a.underline-left:before {
  content: "";
  position: absolute;
  width: 0;
  height: calc(1px + 0.05vh);
  bottom: 18px;
  left: 15px;
  background-color: #FFF;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}

a.underline-left:hover:before {
  visibility: visible;
  width: calc(100% - 15px);
}

/*More Info*/
.moreinfo a {
  text-align: left;
  font-family: 'Maitree', serif;
  font-weight: 300;
  color: #fff;
  font-size: calc(16px + 0.4vw);
  padding: 15px 0px 15px 15px;
}

.moreinfo span {
  display:inline-block;
  position: relative;
  white-space: nowrap;
}

.moreinfo a:hover {
  color: #fff!important;
}

/* Combo */
.combo-symbol {
  position: absolute;
  height: 75px;
  transition: 0.4s ease;
}

.combo-symbol:hover {
  opacity: 0.7;
}

.combo-button {
  position: fixed;
  bottom: 30px;
  left: 90px;
}

.combo-info {
  transform: translate(-5px,-15px);
}

@media all and (max-width: 768px) {
  .combo-button {
    bottom: 30px;
    left: 30px;
  }
}

@media only screen and (max-width: 489px) {
  .combo-symbol  {
    display: none !important;
  }
}

/*Random Tree Generator*/
.random-button {
  position: fixed;
  bottom: 30px;
  right: 125%;
  z-index: 1;
}

.random-button a {
  font-size: 40px;
  color: #ffffff;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  transition: color 0.4s;
  overflow: hidden;
  white-space: nowrap;
}

.random-button:hover {
  color: #dea5a4;
}

.random-button h5 {
  font-family: 'DM Mono', monospace;
  color: #ffffff;
  display: inline-block;
  font-size: .4em;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  font-weight: normal;
  transition: color 0.4s;
}

.random-button:hover h5 {
  color: #dea5a4;
}

@media all and (max-width: 768px) {
  .random-button {
    position: fixed;
    right: 105%;
    bottom: 20px;
    font-size: 35px;
  }
}

/*Back To Map*/
.back-map {
  position: fixed;
  bottom: 130px;
  right: 125%;
  z-index: 1;
}

.back-map a {
  font-size: 40px;
  color: #ffffff;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  transition: color 0.4s;
  overflow: visible;
  white-space: nowrap;
  line-height:0.6em;
}

.back-map:hover {
  color: #dea5a4;
}

.back-map h5 {
  font-family: 'DM Mono', monospace;
  color: #ffffff;
  display: inline-block;
  font-size: .4em;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  font-weight: normal;
  transition: color 0.4s;
}

.back-map:hover h5 {
  color: #dea5a4;
}

@media all and (max-width: 768px) {
  .back-map {
    position: fixed;
    right: 105%;
    bottom: 120px;
    font-size: 35px;
  }
}

/* Audio Player */
.buttons {
  position: relative;
  top: 0px;
}

button {
  border: none;
  cursor:pointer;
  outline: none;
  font-size: 0;
  position: relative;
  top: 0px;
}

button#playpausebtn {
  background:url(volumeon.svg) no-repeat;
  height:45px;
  width:56px;
  opacity: 1;
  transition: opacity 0.4s ease;
  transform: translateY(-10%);
}

button#playpausebtn:hover {
  opacity: 0.68;
}

button#reloadbtn {
  background:url(reload.svg) no-repeat;
  height:45px;
  width:56px;
  opacity: 1;
  transition: opacity 0.4s ease;
  transform: translateY(-10%);
}

button#reloadbtn:hover {
  opacity: 0.68;
}


@media all and (max-width: 768px) {
  button#playpausebtn {
    height:40px;
    width:50px;
  }
}

/* Label Reposition */
.page-id-22 .label-wrapper {
  left: 65%;
  top: 50%;
}

.page-id-483 .label-wrapper {
  left: 65%;
  top: 50%;
}

.page-id-60 .label-wrapper {
  left: 32%;
  top: 50%;
}

.page-id-45 .label-wrapper {
  left: 70%;
  top: 50%;
}

.page-id-61 .label-wrapper {
  left: 67%;
  top: 65%;
}

/* Label Recolour */
.page-id-44 .label span {
  border-top: 5px solid #e2decc;
}
.page-id-45 .label span {
  border-top: 5px solid #39ae94;
}
.page-id-43 .label span {
  border-top: 5px solid #898989;
}
.page-id-51 .label span {
  border-top: 5px solid #c45b22;
}
.page-id-42 .label span {
  border-top: 5px solid #5b1c7f;
}
.page-id-56 .label span {
  border-top: 5px solid #82c4e8;
}
.page-id-34 .label span {
  border-top: 5px solid #bfa46f;
}
.page-id-22 .label span {
  border-top: 5px solid #f7f719;
}
.page-id-483 .label span {
  border-top: 5px solid #f7f719;
}
.page-id-41 .label span {
  border-top: 5px solid #c6dfb4;
}
.page-id-50 .label span {
  border-top: 5px solid #f36412;
}
.page-id-37 .label span {
  border-top: 5px solid #6d153e;
}
.page-id-49 .label span {
  border-top: 5px solid #c42f00;
}
.page-id-38 .label span {
  border-top: 5px solid #ac0031;
}
.page-id-35 .label span {
  border-top: 5px solid #f048a0;
}
.page-id-36 .label span {
  border-top: 5px solid #92a1cf;
}
.page-id-63 .label span {
  border-top: 5px solid #ffc40c;
}
.page-id-40 .label span {
  border-top: 5px solid #93a05c;
}
.page-id-54 .label span {
  border-top: 5px solid #ae77b8;
}
.page-id-57 .label span {
  border-top: 5px solid #8fd81d;
}
.page-id-47 .label span {
  border-top: 5px solid #264348;
}
.page-id-46 .label span {
  border-top: 5px solid #b6d366;
}
.page-id-48 .label span {
  border-top: 5px solid #6f91bb;
}
.page-id-32 .label span {
  border-top: 5px solid #92ca4f;
}
.page-id-8 .label span {
  border-top: 5px solid #eeb9d6;
}
.page-id-53 .label span {
  border-top: 5px solid #5b5b5b;
}
.page-id-58 .label span {
  border-top: 5px solid #f2cb27;
}
.page-id-59 .label span {
  border-top: 5px solid #89811b;
}
.page-id-60 .label span {
  border-top: 5px solid #1da4c9;
}
.page-id-52 .label span {
  border-top: 5px solid #9b7a4e;
}
.page-id-39 .label span {
  border-top: 5px solid #2e5494;
}
.page-id-55 .label span {
  border-top: 5px solid #4bc6a3;
}
.page-id-61 .label span {
  border-top: 5px solid #cc4848;
}
.page-id-62 .label span {
  border-top: 5px solid #833c0d;
}
.page-id-64 .label span {
  border-top: 5px solid #465429;
}

/* Multi Labels */
@media only screen and (max-width: 489px) {
  .label-mini {
    display: none !important;
  }
}

/* Images */
.visible-mobile {
  display: none !important;
}

@media only screen and (max-width: 489px) {
  .visible-mobile {
    display: inline !important;
  }

  .hidden-mobile {
    display: none !important;
  }
}

/* Contact */
div.wpforms-container-full .wpforms-form .wpforms-field-label {
  display: block;
  font-weight: 300;
  font-size: 16px;
  float: none;
  line-height: 1.3;
  margin: 0 0 4px 0;
  padding: 0;
}

div.wpforms-container input,
div.wpforms-container textarea {
  font-family: 'DM Mono', monospace;
}

div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit] {
  background-color: #eee; /* Grey background */
  border: 0;
  color: #606060;
  font-size: 1em;
  font-family: 'DM Mono', monospace;
  padding: 10px 15px; /* Distance between text and border */
}

div.wpforms-container-full .wpforms-form input[type=submit]:hover,
div.wpforms-container-full .wpforms-form input[type=submit]:active,
div.wpforms-container-full .wpforms-form button[type=submit]:hover,
div.wpforms-container-full .wpforms-form button[type=submit]:active,
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover,
div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
  border: 0;
}

/*Composer Page - Flip Cards*/
.page-id-25 .page-content {
  position: static;
  padding: 0 90px 0 90px;
  margin-top: 100px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  width: 80vw;
  margin: 0 auto;
}

.card {
  background-color: transparent;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  margin: 1.5em;
  margin-bottom: 2.5em;
  perspective: 1000px;
}

.card-composer {
  display: flex;
  align-items: baseline;
  width: 100%;
  position: absolute;
  bottom: 0px;
  text-align: center;
  font-size: 1.2em;
  color: #606060;
  justify-content: center;
  white-space: nowrap;
  transform: translateY(100%);
  padding-top: 5px;
}

.card-text-dark, .card-text-light {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.card-text-light {
  color: #fff;
}

.card-text-dark {
  color: #606060;
}

.inner-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.card:hover .inner-card {
  transform: rotateY(-180deg);
}

.front-card, .back-card {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.back-card {
  font-size: 1.4em;
}

.front-card {
  background-size: cover;
  background-repeat: none;
  background-position: center center;
}

#front-card-sweet-chestnut {
  background-color: #2e5494;
  background-image: url('./card-images/goi-ywei-chern.jpg');
}

#front-card-common-beech {
  background-color: #898989;
  background-image: url('./card-images/salvador-sanchez-fernandez.jpg');
}

#front-card-horse-chestnut {
  background-color: #f048a0;
  background-image: url('./card-images/anian-wiedner.jpg');
}

#front-card-common-hornbeam {
  background-color: #ac0031;
  background-image: url('./card-images/yiannis-maramathas.jpg');
}

#front-card-norway-maple {
  background-color: #92ca4f;
  background-image: url('./card-images/tymon-zgorzelski.jpg');
}

#front-card-saucer-magnolia {
  background-color: #9b7a4e;
  background-image: url('./card-images/yuyang-li.jpg');
}

#front-card-london-plane {
  background-color: #ae77b8;
  background-image: url('./card-images/andrew-zhou.jpg');
}

#front-card-lawson-cypress {
  background-color: #93a05c;
  background-image: url('./card-images/carla-garcia-ginjaume.jpg');
}

#front-card-common-yew {
  background-color: #833c0d;
  background-image: url('./card-images/jack-gionis.jpg');
}

#front-card-english-oak {
  background-color: #eeb9d6;
  background-image: url('./card-images/eluned-davies.jpg');
}

#front-card-common-ash {
  background-color: #39ae94;
  background-image: url('./card-images/zacharias-wolfe.jpg');
}

#front-card-caucasian-wingnut {
  background-color: #82c4e8;
  background-image: url('./card-images/ben-munro.jpg');
}

#front-card-common-lime {
  background-color: #f7f719;
  background-image: url('./card-images/jieun-lee.jpg');
}

#front-card-himalayan-birch {
  background-color: #6d153e;
  background-image: url('./card-images/owen-ho.jpg');
}

#front-card-common-holly {
  background-color: #c42f00;
  background-image: url('./card-images/darren-sng.jpg');
}

#front-card-ginkgo {
  background-color: #264348;
  background-image: url('./card-images/daniel-lawton.jpg');
}

#front-card-red-oak {
  background-color: #89811b;
  background-image: url('./card-images/terrence-wong.jpg');
}

.back-card {
  transform: rotateY(-180deg);
  background-size: cover;
  background-repeat: none;
  background-position: center center;
}

#back-card-sweet-chestnut {
  background-image: url('./card-images/sweet-chestnut.jpg');
  font-size: 0.9em;
}

#back-card-common-beech {
  background-image: url('./card-images/common-beech.jpg');
  font-size: 1em;
}

#back-card-horse-chestnut {
  background-image: url('./card-images/horse-chestnut.jpg');
  font-size: 1.5em;
}

#back-card-pin-oak {
  background-image: url('./card-images/pin-oak.jpg');
}

#back-card-common-hornbeam {
  background-image: url('./card-images/common-hornbeam.jpg');
}

#back-card-white-ash {
  background-image: url('./card-images/white-ash.jpg');
}

#back-card-caucasian-elm {
  background-image: url('./card-images/caucasian-elm.jpg');
}

#back-card-saucer-magnolia {
  background-image: url('./card-images/saucer-magnolia.jpg');
}

#back-card-london-plane {
  background-image: url('./card-images/london-plane.jpg');
  font-size: 1.1em;
}

#back-card-lawson-cypress {
  background-image: url('./card-images/lawson-cypress.jpg');
  font-size: 1em;
}

#back-card-common-yew {
  background-image: url('./card-images/common-yew.jpg');
  font-size: 1.2em;
}

#back-card-english-oak {
  background-image: url('./card-images/english-oak.jpg');
}

#back-card-common-ash {
  background-image: url('./card-images/common-ash.jpg');
}

#back-card-norway-maple {
  background-image: url('./card-images/norway-maple.jpg');
  font-size: 1.2em;
}

#back-card-caucasian-wingnut {
  background-image: url('./card-images/caucasian-wingnut.jpg');
  font-size: 1em;
}

#back-card-common-lime {
  background-image: url('./card-images/common-lime.jpg');
  font-size: 1.2em;
}

#back-card-himalayan-birch {
  background-image: url('./card-images/himalayan-birch.jpg');
}

#back-card-common-holly {
  background-image: url('./card-images/common-holly.jpg');
  font-size: 1.2em;
}

#back-card-ginkgo {
  background-image: url('./card-images/ginkgo.jpg');
}

#back-card-red-oak {
  background-image: url('./card-images/red-oak.jpg');
}

.card.visible-tablet {
  display: none !important;
}

@media all and (max-width: 1859px) {
  .card.visible-tablet {
    display: inline !important;
  }
}

@media all and (max-width: 1239px) {
  .card.visible-tablet {
    display: inline !important;
  }
}

@media all and (max-width: 1139px) {
  .card.visible-tablet {
    display: none !important;
  }
}

@media all and (max-width: 768px) {
  .card-container {
    width: 100vw;
    position: absolute;
    left: 0;
  }

  .card {
      width: 150px;
      height: 150px;
      margin: 0.9em;
      margin-bottom: 2.3em;
  }

  .card-composer {
    font-size: 1em;
  }

  .back-card{
    font-size: 13px !important;
  }

  .card.visible-tablet {
    display: inline !important;
  }
}


@media all and (max-width: 715px) {
  .card.visible-tablet {
    display: none !important;
  }
}

@media all and (max-width: 489px) {
  .card.visible-tablet {
    display: none !important;
  }
}