@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700;900&display=swap');

html,
body {
  height: 100%;
  background-color: #ffffff;
  padding: 0.5rem;
  font-family: 'Poppins', sans-serif;
}

body {
  display: -ms-flexbox;
  display: flex;
}

img {
  width: 75%;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

p {
  font-weight: 300;
  font-size: 18px;
}

.kokbar {
  background-color: #222222;
  color: #EFEDE8;
}

.bistro {
  background-color: #EFEDE8;
  color: #222222;
}

button {
  background: transparent;
  outline: none;
  position: relative;
  border: 1px solid #222222;
  padding: .8rem 2rem;
  overflow: hidden;
  color: #222222;
  border-radius: 25px;
  font-weight: 100;
}

.kokbar button {
  border: 1px solid #EFEDE8;
  color: #EFEDE8;
}

button:hover:before{
  opacity: 1;
  transform: translate(0,0);
}

button:before{
  content: attr(data-hover);
  position: absolute;
  top: 0.8rem;
  left: 0;
  width: 100%;
  font-weight: 300;
  opacity: 0;
  transform: translate(-100%,0);
  transition: all .3s ease-in-out;
}

button:hover div{
  opacity: 0;
  transform: translate(100%,0)
}

button div {
  font-weight: 300;
  transition: all .3s ease-in-out;
}

/*--------------------------------------------------------------
# MEDIA QUERY
--------------------------------------------------------------*/
@media (min-width: 768px) {

  img {
    width: 50%;
  }

}