main{
  background-image: url("../asset/indexbackground.jpg");
  background-size: cover;
  min-width: 100vw;
  min-height: 100vh;
}
heading{
  width: 100vw;
  background-color: #9C2D28;
  display: block;
  display: flex;
  align-items: center;
  padding:24px;
}
.desktopHeading{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.mobileHeading{
  display: flex;
  justify-content:space-between;
  align-items: center;
}
.desktopHeading{display:none;}
.mobileHeading{display:flex;}
.FSDLOGOABOVEINPUT{
  display: none;
  justify-content: center;
  margin-top:72px;
}
.searchpagecontent{
  margin-top:18vh;
}
#searchFormWrapper{
  position: relative;
  margin:0 auto;
  width:85%;
  max-width: 720px;
  margin-bottom:12px;
}
#searchForm{
  display:flex;
  height: 42px;
  align-items: center;
  border-radius: 21px;
  background:white;
}
#searchIcon{
  width: 45px;
  height: 45px;
  background-image: url("../asset/searchred.svg");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
}
#searchInput{
  flex: 1 1 0;
  background:rgba(0,0,0,0);
  border:0px solid #000;
}
#keyword{
  width: 100%;
  background:rgba(0,0,0,0);
  border:0px solid #000;
}
#crossButton{
  width: 45px;
  height: 45px;
  background-image: url("../asset/metro-cross.svg");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
#suggestedResultWrapper{
  position: absolute;
  background:white;
  width: 100%;
  z-index: 1;
  max-height: 65vh;
  overflow-y:auto;
}
.suggestedRow{
  display: flex;
  width: 100%;
  line-height: 20px;
  padding-top:10px;
  padding-bottom:10px;
  align-items: center;
  cursor: pointer;
}
.suggestedRow div:nth-child(1){
    flex: 0 0 45px;
}
.suggestedRow div:nth-child(2){
    flex: 1 1 0;
}
.suggestedRow div:nth-child(3){
    flex: 0 0 45px;
}
#hotKeywordWrapper{
  margin:0 auto;
  width:90%;
  max-width: 720px;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  position: absolute;
  left:0px;
  right:0px;
  z-index: 0;
}
.pin{
  position: absolute;
  top:-22px;
  left:-10px;
  height: 32px;
  width: 32px;
  background-image: url("../asset/metro-pin.svg");
  background-size: 32px;
  background-repeat: no-repeat;
  background-position: center center;
}
a{
  text-decoration: none;
  color:inherit;
}
.hotkeywordItem{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left:36px;
  padding-right:20px;
  height: 32px;
  border-radius: 16px;
  background:white;
  margin-top:32px;
  margin-left:6px;
  margin-right:6px;
  background-image: url("../asset/searchred.svg");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: left 12px center;
}
input{
  outline: none;
}
.suggestedRow:hover{
  background:rgba(90,100,250,0.1);
}

@media (min-width: 600px) {
  .desktopHeading{display:flex;}
  .mobileHeading{display:none;}
  .FSDLOGOABOVEINPUT{display: flex;}
  .searchpagecontent{margin-top:32px;}
}