label{
    display: block;
}

#avis{
    display: block;
    position: relative;
    min-height: 100vh;
    padding-bottom: 10vw;
    background-color: var(--yel);
}

#Fform{
    display: inline-block;
    width: 40%;
    margin-right: 5%;
    height: 15vw;
}

#fFlex{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    flex-direction: column;

}

#Sform{
    display: inline-block;
    width: 50%;
    vertical-align: top;
}

#CommentForm_cite{
    display: none;
}
#CommentForm_email{
    display: none;
}
.CommentForm_stars{
    display: none;
}

.CommentFormSubmit{
    display: block;
    padding-top: 2vw;
    position: relative;
    text-align: right;
}


#CommentForm_text{
    height: 13vw;
}

#bg{
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  opacity: .8;
  cursor: pointer;
  background-color: black;

}

#otherForm{
    display:none;
    position: fixed;
    width: 60vw;
    height: auto;
    padding: 3vw;
    border-radius: var(--bradius);
    background-color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#otherForm h4{
    padding-bottom: 2vw;
    
}

#otherForm h5{
    padding-bottom: 1vw;
    font-size: 1vw;
    
}

.stara{
  display: inline-block;
  width: 2vw;  
  aspect-ratio: 1;
  transition: .2s;
  cursor: pointer;
  background: rgb(220,220,220);
  clip-path: polygon(50% 0,
    calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
    calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn))) 
   ); 
}

.stara:hover{
  background: var(--bl) !important;
}

#stars img{
    width: 2vw ;
    cursor: pointer;
    height: auto;
}


.inT{
    display: block;
}

input{
    border-radius: var(--bradius);
    border: 0px;
    font-family: gotham;
    padding: 1vw;
    font-size: 1vw;
    background-color: whitesmoke;
}

textarea{
    border-radius: var(--bradius);
    width: calc(100% - 2vw);
    border: 0px;
    font-family: gotham;
    font-size: 1vw;
    padding: 1vw;
    background-color: whitesmoke;
}

button{
    border-radius: var(--bradius);
    background-color: var(--bl);
    border: 0px;
    font-family: gotham;
    font-size: 1vw;
    font-weight: 900;
    transition: .2s;
    color: var(--yel);
  
    padding: 1vw 2vw;
    margin-top: 0;
    height: 100%;
    text-decoration: none;
    cursor: pointer;
  }

  button:hover{
    background-color: var(--yel);
    color: var(--bl);
  }


  input:focus, textarea:focus{
    outline: 2px solid var(--yel);
  }

/*  -------- MASONRY ------------ */

.grid{
    text-align: center;
}

.grid-sizer,
.grid-item { width: 22%; }

.grid-item{
    float: left;
    text-align: left;
    display: block;
    border-radius: var(--bradius);
    width: 22%;
    margin-right: 10px;
    margin-top: 10px;
    font-size: 1vw;
    padding: 1vw;
    background-color: white;
   
}

.grid-item p{
    font-size: 1vw;
    padding-top: .5vw;
}

.grid-item--width2{
   width: 44%;
}

  #wrapAvis{
    display: block;
    width: 80vw;
    margin: 0 auto;
  }

  #GetAvis{
    background-color: var(--bl);
    color: var(--yel);
    height: calc(80vw * .22);
  }

  #GetAvis .textC{
    display: block;
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #GetAvis h3{
    display: block;
    font-size: 1.5vw;
    text-align: center;
  }

  .addAvis{
    display: block;
    background-color: var(--yel);
    margin:  0 auto;
    text-align: center;
    margin-top: 2vw;
    cursor: pointer;
    width: fit-content;
    font-weight: 900;
    transition: .2s;
    color: var(--bl);
    border-radius: var(--bradius);
    padding: 1vw;
  }

  .addAvis:hover{
    background-color: white;
  }

  .staravis{
    width: 20px;
    margin-right: 5px;
    height: auto;
    display: inline-block;
    vertical-align: top;
  }

  .staraS{
    display: inline-block;
    width: 20px;  
    aspect-ratio: 1;
    transition: .2s;
    cursor: pointer;
    background: var(--yel);
    clip-path: polygon(50% 0,
      calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
      calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
      calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
      calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn))) 
     ); 
  }
  

  .reviewUp{

  }

  .reviewDown{
    padding-top: 2vw;
    text-align: right;
  }

  .autR{
    display: block;
    margin-bottom: 5px;
    font-weight: 900;
  }
  .dateR{
    display: block;
    font-weight: normal;
    font-size: .80em;
    font-style: italic;
    color: darkgray;
  }

  #closeadd{
    display: block;
    position: absolute;
    pointer-events: none;
    transform: translate(140%, -10%);
    height: 2.3vw;
    cursor: pointer;
    right: 0;
    top : 0;
    width: 2.3vw;
  }

  #closeadd span{
    width: 100%;
    height: 7%;
    background-color: var(--yel);
    display: block;
    position: absolute;
    top : 50%;
    cursor: pointer;
    left: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  #closeadd span:first-of-type{
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  


 @media (orientation:portrait){

  .grid-sizer,
  .grid-item { width: 100%; }

  .grid-item{
    float: left;
    text-align: left;
    display: block;
    border-radius: var(--bradius);
    width: 100%;
    margin-right: 10px;
    margin: 0;
    min-height: 30vh;
    font-size: 1vw;
    padding: 0;
    margin-bottom: 5vw;
    background-color: white;
   
}

.grid-item p{
    font-size: 4vw;
    padding: 5vw 0;
}

.grid-item--width2{
   width: 100%;
}

.reviewUp{
  padding: 5vw;
}

.reviewDown{
  padding: 5vw;
  padding-top: 10vw;
  font-size: 4vw;
}

#GetAvis{
  height: auto;
  padding: 10vw 0;
}

  #GetAvis h3{
    margin: 5vw;
    font-size: 4.8vw;
  }


  #GetAvis .textC{
    display: block;
    position: absolute;
    width: 100%;
    top:50%;
    left: 0;
    transform: translate(0%, -50%);
  }

  .addAvis{
    margin:  0 auto;
    margin-top: 6vw;
    padding: 5vw;
    font-size: 4.8vw;
  }


  #otherForm{
    width: 80vw;
    height: auto;
    padding: 5vw;
    top: 50%;
    left: 50%;
    font-size: 3.3vw;
}

  #otherForm h4{
      padding-bottom: 2vw;
      
  }

  #otherForm h5{
      padding-bottom: 1vw;
      font-size: 1vw;
      
  }

  #Fform{
    display: block;
    width: 100%;
    margin-right: 0;
    height: auto;
}

#fFlex{
    display: block;
    width: 100%;
    height: 100%;


}

.stara{
  display: inline-block;
  width: 8vw;  
}

#Sform{
  display: block;
  width: 100%;
  vertical-align: top;
}
#otherForm h5{
  padding-top: 3vw;
  padding-bottom: 4vw;
  margin: 0 1vw;
  font-size: 3.3vw;
  
}

input{
  padding: 3vw;
  margin: 3vw 0;
  font-size: 3.3vw;
  width: calc(100% - 6vw);
}

textarea{
  width: calc(100% - 6vw);
  font-size: 3.3vw;
  margin: 3vw 0;
  padding: 3vw;
}

button{
  font-size: 3.3vw;

  padding: 3vw 5vw;
}

#closeadd{
  transform: translate(50%, 150%);
  height: 10vw;
  right: 50%;
  bottom : 0;
  top: unset;
  width: 10vw;
}

#closeadd span{
  width: 100%;
  height: 7%;
  background-color: var(--yel);
  display: block;
  position: absolute;
  top : 50%;
  cursor: pointer;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(45deg);
}


 }