#searchbar-main{
  width: 100%;
  margin: 0;
  height: calc(var(--vh, 1vh) * 91);
  position: fixed;
  top:145px;
  background-color: rgba(0,0,0,0.7);
  z-index: 1;
}

.searchbar{
  width: 90%;
  height: 5%;
}

#searchqueryresult{
  width:87.7%;
  position: absolute;
  z-index: 10;
  display:none;
  background-color: white;
}

.searchresult{
  border: 1px solid rgba(0,0,0,0.2);
  padding: 2%;
  font-size: 1.7rem;
}

.searchsubresult{
  border: 1px solid rgba(0,0,0,0.2);
  padding: 2%;
  font-size: 1.2rem;
}

.carousel{
  width:956px;
  height: 956px;
}

/* mainpage header */

#mainpage-header{
    margin:0;
    margin-top:70px;
    height:calc(var(--vh, 1vh) * 77);
    padding:0;
    position:relative;
    overflow:hidden;
}
.main-title-background{
    margin:0;
    padding:0;
    position:absolute;
    z-index:-1;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 90%;
}
.title-text{
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(255, 255, 255,1));
    position:absolute;
    z-index:0;
    display: flex;
    flex-direction: column-reverse;
    color: #325d33;
    font-weight: bold;
    text-align: left;
    width: 100%;
    margin-bottom:0;
    padding: 20px;
    padding-bottom:5%;
    text-align: left;
    height:70%;
    bottom:0;
}

.jumbotron-title{
    line-height: 1.2;
    font-weight: 900;
}
hr.title-hr{
    margin-left:0;
    border-top: 20px dotted rgba(0,0,0,0.4);
    width:30%;
}
.jumbotron-subtitle{
    font-weight:600;
}

/* image frame */
:root {
  --red: tomato;
  --bgColor: bisque;
}
img.framed {
  width:40%;
  box-shadow:
    -50px -50px 0 -40px var(--red),
    50px 50px 0 -40px var(--red);
  margin-right:10px;
}

/* about us */

#aboutus{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.big-textbox{
  text-align: justify;
  padding-top: 50px;
  width: 80%
}

.hyperlink_product{
  position:relative;
  z-index:1;
  text-align: center;
  width: 60%;
  margin-top: 20px;
}


@media screen and (max-device-width: 768px){
  img.framed {
    width:80%;
    box-shadow:
      -50px -50px 0 -40px var(--red),
      50px 50px 0 -40px var(--red);
    margin-right:0;
  }
}