a:hover {
  text-decoration: none;
}
.section-hidden {
  display: none
}

/* .header-image{
  background-size:cover;
  background-repeat:no-repeat;
  background-image:url(https://firebasestorage.googleapis.com/v0/b/labocine-188b4.appspot.com/o/static%2Fhabitat_background_butterfly.jpg?alt=media&token=d4efc928-fbe3-4875-9716-55a3e5b5a654);
} */

.caption__main {
  font-weight: 400;
  font-size: 3.6rem;
  font-family: "BebasNeue", sans-serif;
  color: #FFF;
}

.caption__sub {
  font-weight: 300;
  color: #FFF;
}

.search__container {
  padding: 3em 0;
  width: 70%;
  margin: auto;
  text-align: center;
}

.search__input {
  width: 80%;
  /*background-color: rgba(255, 255, 255, 0.4);*/
  transition: transform 250ms ease-in-out;
  font-size: 14px;
  line-height: 18px;
  /*color: #FFF;*/
  background-image: url(http://mihaeltomic.com/codepen/input-search/ic_search_black_24px.svg);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  padding: 12px 15px;
  outline: 0;
  border: 2px solid #FFF;
  border-radius: 10px;
  background-position: 98% center;
}

.search__input::placeholder {
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.titles{
  line-height: 1.6;
}

.text-ellipsis--2{
  text-overflow:ellipsis;
  overflow:hidden;
  /* Addition lines for 2 line or multiline ellipsis */
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

@media screen and (max-width: 700px) {
  .search__container {
    padding: 1em 0;
    width: 100%;
  }
}



/* ================================================== */
/*code updated for landing page */
/* ================================================== */


.header-image{
  /* background-size: cover;
  background-repeat: no-repeat;
  background-image: url("LC_Habitat_gif-C.gif"); */
  /* height: 90vh; */
  justify-content: center;
  margin-bottom: 2rem;
}

.header-image .col-md{
  position: relative;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

.header-images
{
  max-width: 100%;
  height:auto;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  background-position: center;
  object-fit: cover;
}

.header-image-left{
  background-image: url("https://firebasestorage.googleapis.com/v0/b/labocine-188b4.appspot.com/o/static%2Fhabitat_banner_left.jpg?alt=media&token=dbedbc1f-7486-46a6-bead-e20100d8f474");
  /* filter: blur(8px);
  -webkit-filter: blur(8px); */
  overflow: hidden;
  background-position: right;
}

@media (min-width: 768px) {
  .header-image-left-md
  {
    filter: blur(0);
    -webkit-filter: blur(0);  
  }
}

.header-video{
  width: 100%;
  height: 100%;
  position: relative;
  /* top: 0;
  left: 0; */
  object-fit: cover;
  z-index: 0;
}

.header-video-left{
  filter: blur(8px);
  -webkit-filter: blur(8px);
  object-position: right center;
}

@media (min-width: 768px) {
  .header-video-left-md
  {
    filter: blur(0);
    -webkit-filter: blur(0);  
  }
}

@media (max-width: 576px) {
  .header-video-right-xs{
    object-position: 0 -20vw;
  }
}

@media (min-width: 576px) and (max-width: 768px) {
  .header-video-right-sm{
    object-position: 0 -30vw;
  }
}

.header-image-right{
  background-image: url("https://firebasestorage.googleapis.com/v0/b/labocine-188b4.appspot.com/o/static%2Fhabitat_banner_right.jpg?alt=media&token=50e5b434-0756-4baa-b65d-e0fc3816a735");
}

.layer {
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(8px);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}

@media (min-width: 768px) {
  .layer-md
  {
    opacity: 0;
  }
}

.habitat-landing-contentSection{
  top: 50%;
  position: relative;
  width: 100%;
  padding-left: 2%;
}

.habitat-landing-contentSection-sm{
  position: relative;
  width: 100%;
  padding-left: 2%;
}

.habitat-landing-container{
  color: #000;
  font-weight: 700;
  /* top: 50%; */
  position: relative;
  width: 70%;
  margin: auto;
  padding-left: 2.5%;
  padding-right: 2.5%;
  z-index: 10;

}

.habitat-landing-desc
{
  /* font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
  /* font-family: 'DDINExpRegular'; */
  font-weight: bold;
  font-style: bold;
  /* font-size: 1.12rem; */
  text-align: justify;
  /* font-size: 1.3vw; */ 
  margin-top: 12vw;
}

@media (min-width: 768px) {
  .landing-desc-margin-md
  {
    margin-top:0;
  }
}

@media (min-width: 992px) {
  .habitat-landing-desc-lg
  {
    font-size: 1.3vw; 
  }
}

.habitat-landing-subtitle{
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 800;
  font-style: bold;
  font-size: 1.7rem;
  line-height: 1.2;
  /* color: rgb(3, 104, 45); */
  color: #354f52;
  margin-top: 140px;
}

.habitat-landing-subtitle-sm{
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 800;
  font-style: bold;
  font-size: 1.7rem;
  line-height: 1.2;
  color: #354f52;
  margin-top: 50px;
}

@media (min-width: 576px) {
  .subtitle-sm
  {
    font-size: 1.7rem; 
    margin-top: 25px;
  }
}

@media (min-width: 768px) {
  .subtitle-md
  {
    font-size: 2.5vw; 
  }
  .landing-subtitle-margin-md
  {
    margin-top:0;
  }
}

@media (min-width: 992px) {
  .subtitle-lg
  {
    font-size: 2.2vw; 
  }
}


/* ================================================== */
/* display toggle */
/* ================================================== */

@media (max-width: 768px) {
  .display-visible-sm
  {
    display: block;
  }
  .display-visible-md
  {
    display: none;
  }
}

@media (min-width: 768px) {
  .display-visible-sm
  {
    display: none;
  }
  .display-visible-md
  {
    display: block;
  }
}
/* ----------------------------------------------------------------
join/update button
---------------------------------------------------------------- */

.habitat-landing-button{
  padding: 0 0 15px 0;	
  margin-top: 1.5rem;
  width: 100%;
  font-family: 'Lato', sans-serif;
  text-align: center;
  }
  
  @media (min-width: 576px) {
    .habitat-landing-button-sm{
      margin-top: 0.5rem;
    }
  }
    @media (min-width: 768px) {
    .habitat-landing-button-md{
      margin-top: 0;
    }
  }
  
  @media (min-width: 992px) {
    .habitat-landing-button-lg{
      margin-top: 0;
    }
  }
  
  .wrapper{
  position: relative;
  display: inline-block;
  }
  
  @media (min-width: 768px) {
    /* .wrapper-md{
      bottom: 25%;
    } */
  }
  
  .link_wrapper{
  position: relative;
  }
  
  .habitat-landing-button-link{
  display: block;
  /* width: 250px;
  height: 40px; */
  padding: 6px 10px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #1ECD97;
  border: 3px solid #1ECD97;
  transition: all .30s;
  border-radius: 5px;
  line-height: 0.97;
  font-size: 0.9rem;
  }
  
  .arrow-icon{
  width: 35px;
  height: 35px;
  border: 3px solid transparent;
  position: absolute;
  transform: rotate(45deg);
  right: 0;
  top: 0;
  z-index: -1;
  transition: all .30s;
  }
  
  .arrow-icon svg{
  width: 20px;
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  transform: rotate(-45deg);
  fill: #1ECD97;
  transition: all .30s;
  }
  
  .habitat-landing-button-link:hover{
  padding: 6px 18px;
  border: 3px solid #1ECD97;
  background: transparent;
  color: #1ECD97;
  text-decoration: none;
  }
  
  .habitat-landing-button-link:hover + .arrow-icon{
  border: 3px solid #1ecd97;
  right: -20%;
  }

  .habitat-profile-buttons-container{
    width: 100%;
    margin: -8px 0;
  }

  @media (max-width: 576px) {
    .habitat-profile-buttons-container-xs{
      width: 120%;
      margin-left: -10%;
    }
  }

  .landing-button-link-2{
    display: inline-block;
    padding: 6px 0;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all .30s;
    border-radius: 5px;
    line-height: 0.97;
    width: 155px;
    font-size: 0.9rem;
    margin: 3px 3px 2px 3px;
    }

    @media (max-width: 576px) {
      .landing-button-link-2-xs{
        padding: 5px 0;
        width: 135px;
        font-size: 0.8rem;
        margin: 2px;
      }
    }
    
    .landing-button-link-2:hover{
    background: transparent;
    text-decoration: none;
    width: 165px;
    }

    .landing-button-link-orange{
      background: #ff773d;
      border: 3px solid #ff773d;
    }

    .landing-button-link-green{

      background: #1ECD97;
      border: 3px solid #1ECD97;
    }

    .landing-button-link-orange:hover{
      color: #ff773d;
    }

    .landing-button-link-green:hover{

      color: #1ECD97;
    }




/* ----------------------------------------------------------------
search section
---------------------------------------------------------------- */

.habitat-landing-searchSection{
  position: sticky;
  background-image: linear-gradient(to right, #28e27f9c 0%, #f28621bf 100%);
  padding: 5px; 
  margin-top: 0.5rem;
  border-radius: 30px;
}

@media (max-width: 576px) {
  .habitat-landing-searchSection-xs{
    width: 110%;
    margin-left: -5%;
  }
}

@media (min-width: 768px) {
  .habitat-landing-searchSection-md
  {
    margin-top: 0;
  }
}

.habitat-landing-searchInput {
  border: none;
  width: 100%;
  transition: transform 250ms ease-in-out;
  font-size: 17px;
  font-weight: 500;
  /* background-image: url(http://mihaeltomic.com/codepen/input-search/ic_search_black_24px.svg); */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* background-color: yellow; */
  background-size: 20px 20px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  padding: 5px 20px;
  outline: 0;
  /* border: 4px solid #30d170ab; */
  border-radius: 30px;
  background-position: 96% center;
}

.habitat-landing-searchInput:focus {
  outline: none;
  box-shadow: 2px;
}

.habitat-landing-searchInput::placeholder {
  color: #1ECD97;
}

.search__input {
  width: 80%;
  /*background-color: rgba(255, 255, 255, 0.4);*/
  transition: transform 250ms ease-in-out;
  /* font-size: 14px; */
  font-size: 18px;
  font-weight: 400;
  font-family: Arial;
  line-height: 18px;
  /*color: #FFF;*/
  background-image: url(http://mihaeltomic.com/codepen/input-search/ic_search_black_24px.svg);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  padding: 12px 15px;
  outline: 0;
  border: 2px solid #FFF;
  border-radius: 10px;
  background-position: 98% center;
}

.search__input::placeholder {
  color: #000000;
}




.habitat-landing-searchContainer{
  display: none;
  width: 100%;
  text-align: center;
  padding: 20px 0 10px 0;
  /* background: #19261be3; */
  background: #fafafa;
  position: fixed;
  top: 0px;
  z-index: 200;
}


.habitat-landing-searchSection-1{
  width: 70%;
  position: relative;
  /* background: linear-gradient(to right, #31572c 0%, #31572c 20%, #1a936f 20%, #1a936f 40%, #88d498 40%, #88d498 60%, #fefae0 60%, #fefae0 80%, #dda15e 80%, #dda15e 100%); gradient with required colors */
  /* background: linear-gradient(to right, #74f1c3 0%, #f6894a 100%);
  background: linear-gradient(to right, #28e27f9c 0%, #f28621bf 100%); */
  background-image: linear-gradient(to right, #28e27f9c 15%, #f28621bf 85%);
  /* background: #30d170ab; */
    /* background: #87ec9b;
  /* height: 40px; */
  padding: 6px; 
  margin-top: 0rem;
  margin: 0 auto;
  border-radius: 30px;
}

@media (min-width: 768px) {
  .habitat-landing-searchSection-1-md
  {
    width: 50%;
  }
}

.habitat-landing-searchInput-1 {
  border: none;
  width: 100%;
  transition: transform 250ms ease-in-out;
  font-size: 17px;
  font-weight: 500;
  /* background-image: url(http://mihaeltomic.com/codepen/input-search/ic_search_black_24px.svg); */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* background-color: yellow; */
  background-size: 20px 20px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  padding: 2px 20px;
  outline: 0;
  /* border: 4px solid #30d170ab; */
  border-radius: 30px;
  background-position: 96% center;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .habitat-landing-searchInput-1-md
  {
    padding: 2px 30px;
  }
}



/* ----------------------------------------------------------------
custom viewport heights
---------------------------------------------------------------- */


@media (max-width: 576px) {
  
  .min-vh-20{
      min-height: 20vh;
      }
  .min-vh-30{
    min-height: 30vh;
    }
  .min-vh-35{
          min-height: 35vh;
          }
  .min-vh-40{
    min-height: 40vh;
    }
  .min-vh-45{
    min-height: 45vh;
    }
  .min-vh-55{
    min-height: 55vh;
    max-height: 55vh;;

    }

  .display-xs{
      background-position: 50% 35%;

      }

  .max-vh-35{
    max-height: 35vh;
    }
  }

@media (min-width: 576px) {

  .min-vh-sm-30 {
    min-height: 30vh;
    }
  .min-vh-sm-35 {
    min-height: 35vh;
    }
  .min-vh-sm-40 {
      min-height: 40vh;
      }
  .min-vh-sm-45 {
    min-height: 45vh;
  }
  
  .min-vh-sm-55 {
    min-height: 55vh;
    max-height: 55vh;;
    }

  .max-vh-sm-35{
    max-height: 35vh;
    }
}

@media (max-width: 576px) {
  .display-xs{
    background-position: 50% 35%;
  }
}

@media (max-width: 768px) {
  .display-sm{
    background-position: 50% 40%;
  }
}

@media (min-width: 768px) {

  .min-vh-md-75 {
      min-height: 75vh;
      }
  .max-vh-md-65 {
    max-height: 65vh;
    }
  .min-vh-md-65 {
    min-height: 65vh;
    }
  .max-vh-md-70 {
    max-height: 70vh;
    }
  .min-vh-md-70 {
    min-height: 70vh;
    }
  .min-vh-md-60 {
    min-height: 60vh;
    }
  }

@media (min-width: 992px) {
  .max-vh-lg-95 {
      max-height: 95vh;
    }
  .max-vh-lg-90 {
    max-height: 90vh;
  }
  .min-vh-lg-95 {
      min-height: 95vh;
    }
  .min-vh-lg-90 {
      min-height: 90vh !important;
  }
  .max-vh-lg-70 {
    max-height: 70vh;
  }
  .max-vh-lg-65 {
    max-height: 65vh;
  }
  .max-vh-lg-60 {
    max-height: 60vh;
  }
}




/* ================================================== */
/* code updated for user thumbnails */
/* ================================================== */



.card-profile-background{
  background-image: url(https://firebasestorage.googleapis.com/v0/b/labocine-188b4.appspot.com/o/static%2Fhabitat_card_bg.png?alt=media&token=a08f1a06-4591-4baa-b63c-3e758288c4df);
  background-size: cover;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(18px);
}

.card-profile-1{
  height: auto;
}

.layer-card-standard{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9; 
}

.card-header{
  background-color: transparent;
}

.green-olive
{
background-color: #538d22;
}

.green-1
{
background-color: #57cc99;
}

.green-2
{
background-color: #2b9348;
}

.green-3
{
background-color: #55a630;
}

.green-4
{
background: linear-gradient(0, #87ec9b 5%,  #ffe4a5 130%);
}

.green-5
{
background-color: #60d377;
}

.green-6
{
background: linear-gradient(180deg, #93e5ab 0%,  #65b891 100%);
}

.green-7
{
background: linear-gradient(0, #5b9279 5%,  #8fcb9b 95%);
}

.card-profile-img{
  width: 200px;
  height: 200px;
}

.img-thumbnail-1 {
  padding: 0.4rem;
  background-color: rgba(0, 0, 0, 0.1);
  /* border: 3px solid rgba(255, 255, 255, 1); */
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

.card-profile-name-2:hover .img-thumbnail-1 {
  padding: 0.1rem;
  transition: 0.1s ease;
}

.card-profile-background:hover .img-lg{
  padding: 0.2rem;
  margin-top: -35%;
  margin-left: -30%;
  transform: scale(0.45);
  transition: 0.2s ease;
  text-align: left;
}

@media (min-width: 1200px) {
  .card-profile-background:hover .img-xl{
      padding: 0.2rem;
      margin-top: -35%;
      margin-left: -45%;
      transform: scale(0.45);
      transition: 0.2s ease;
      text-align: left;
  }
}

.card-header-1{
  /* margin: 5rem auto; */
  text-align: center;
  padding-bottom: 0;
}

.card-profile-background:hover .card-header-1{
  text-align: left;
  margin: 0;
  transition: 0.2s ease;
}

.avatar-dimensions
{
  height: 9rem;
  width: 9rem;
}

@media (max-width: 576px) {
  .avatar-dimensions
  {
    height: 8rem;
    width: 8rem;
  }
}

.avatar-card{
  position: relative;
  margin: 0.25rem auto 0 auto;
}

.card-profile-background:hover .avatar-card{
  width: 5rem;
  height: 5rem;
  border-width: 0;
  /* margin: 0 0 0 0.25rem; */
  /* transition: 0.1s ease; */
}

.avatar-profile-1{
  z-index: 2;
}

.card-body-profile{
  z-index: 5;
  opacity: 2;
}

.card-body-1{
  text-align: center;    
  padding-bottom: 3rem;
  padding-top: 0.25rem;
}

.card-profile-background:hover .card-body-1{
  text-align: left;
  padding-top: 0;
  padding-left: 1.25rem;
  padding-bottom: 0.75rem;
  /* transition: 0.2s ease; */
}

.card-profile-name-2{
  font-weight: 700;
  font-size: 1.4rem;
  color: #354f52;
}

.card-profile-background:hover .card-profile-name-2{
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  text-decoration: underline;
}

.card-profile-subtitle{
  font-size: 0.95rem;
  color: #eaeeee;
  font-weight: 600;
  /* text-align: center; */
}

.card-profile-background:hover .card-profile-subtitle{
  font-size: 0.9rem;
}

.desc-box{
  background: green;
  height: 125px;
  bottom: 125px;
  margin-left: 100%;
  width: 100%;
  display: none;
  z-index: -2;
}

.card-profile-background:hover .desc-box{
  margin-left: 0;
  transition: 0.2s ease;
  display: block;
}

.desc-box-content{
  height: auto;
  margin-top: -125px;
  margin-left: 100%;
  width: 100%;
  color: #f8fff9;
  z-index: 5;
  font-size: 0.85rem;
  line-height: 0.95;
  font-weight: 500;
  padding: 10px 12px 1px 1.25rem;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  text-align: top;
}

.card-profile-background:hover .desc-box-content{
  margin-left:0;
  transition: 0.2s ease;
}

.text-ellipsis--7{
  text-overflow: ellipsis;
  overflow: hidden;
  /* Addition lines for 8 line or multiline ellipsis */
  display: -webkit-box !important;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.snw__badge{
  position: absolute;
  width: 30% !important;
  height: 30% !important;
  top: 90%;
  left: 80%;
  transform: translate(-50%, -50%);
}