@import url(https://fonts.googleapis.com/css?family=Abel);

@font-face {
    font-family: "swetty";
    src: url(Swettiest.ttf);
}

body{
  margin: 0;
  background-size: cover;
  font-family: "Abel";
}


.popup-icon{
  width: 14%;
  position: absolute;
}
.bkgr{
  position: relative;
  width: 100%;
  height: 100vh;
}

.popup{
  text-align: justify;
  position: absolute;
  display: none;
  width: 40vw;
  max-height: 90vh;
  top: 5vh;
  left: 30vw;
  z-index: 10;
  background-color: #FFF;
  overflow-y: auto;
  font-family: "Abel";  
}

.popup-header{
  text-align: center;
  font-family: "swetty";
}

.popup-gallery{
  position: relative;
}

.nav-gallery{
  height: 100%;
  width: 8%;
  position: absolute;
  top: 42%;
  opacity: 0.8;
}

.left{
  left: 1%;
}

.right{
  right: 1%;
}

.panel-body.popup-body{
  display: none;
}

.coffee{
  top: 19%;
  left: 27%;
}

.sustainable{
  top: 19%;
  left: 54%;
}

.info{
  top: 53%;
  left: 27%;
}

.order{
  top: 53%;
  left: 54%;
}

.mouse-over-img{
  display: none;
}



@media (max-width: 767px){
  .popup{
    position: absolute;
    display: none;
    width: 90vw;
    max-height: 90vh;
    top: 5vh;
    left: 5vw;
    z-index: 10;
    background-color: #FFF;
    opacity: 0.95;
    overflow-y: auto;
    font-family: "Abel";  
  }

  .popup-icon{
    width: 24%;
  }
  
  .coffee{
    top: 18%;
    left: 17%;
  }

  .sustainable{
    top: 14%;
    left: 57%;
  }

  .info{
    top: 57%;
    left: 17%;
  }

  .order{
    top: 59%;
    left: 54%;
  }
}