html{}
body{
  margin: 0;
}

/* Fonts */

@font-face {
  font-family: 'hawkes-med-reg';
  src: url('/assets/fonts/hawkes-medium-reg.woff') format('woff'),
      url('/assets/fonts/hawkes-medium-reg.woff2') format('woff2');
}
@font-face {
  font-family: 'hawkes-bold-reg';
  src: url('/assets/fonts/hawkes-bold-reg.woff') format('woff'),
      url('/assets/fonts/hawkes-bold-reg.woff2') format('woff2');
}
h1,h2,h3,h4,h5{
  font-family: 'hawkes-bold-reg';
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
p{
  font-family: 'hawkes-med-reg';
  line-height: 1.3rem;
  font-size: .9rem;
}
a{
  font-family: 'hawkes-bold-reg';
  letter-spacing: 3px;
}
.title{
  position: relative;
  height: 150px;
  width: 100%;
  background: url(/assets/title-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 1rem;
  align-items: center;
  justify-content: center;
  color: #584370;
  margin: 0;
}
.title h5{
  display: block;
  text-transform: uppercase;
}
.title h2{
  display: block;
}
#indicators-group{
  display: flex;
  position: relative;
  top: 20px;
}
.dot{
  background-color: #c98188;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  margin: 0px 5px;
  box-sizing: border-box;
}
.active-dot{
  background-color: #e54a2b;
}
.barrel-inside{
  height: 251px;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: url(/assets/barrel-inside-only.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  z-index: 100;
}
.barrel-outside{
  height: 251px;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: url(/assets/barrel-outside-only.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  z-index: 110;
}
.wrapper{
  position: relative;
  /* Test size for now */
  height: 812px;
  width: 375px;

  background: url('/assets/bg.png');
  background-size: cover;
}
.home-screen{
  width: 100%;
  padding: 5%;
  box-sizing: border-box;
  height: auto;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fba4ab;
}
.home-screen img{
  width: 100%;
  height: auto;
}
.home-screen p{
  font-size: 1.2rem;
}
/* The animation code */
@keyframes loading {
  from {transform: scale(1);}
  to {transform: scale(3);}
}
#loading-screen{
  background-color: rgba(0,0,0,0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@keyframes loadingcopy {
  0% {opacity: 0;}
  60% {opacity: 0;}
  100% {opacity: 1;}
}
#loading-screen h2{
  color: #fba0a8;
  font-family: 'hawkes-bold-reg';
  line-height: 1.8rem;
  text-align: center;
  position: relative;
  top: 40%;
  animation-name: loadingcopy;
  animation-duration: 3s;
  animation-iteration-count: 1;
}
#loading-screen img{
  width: 50px;
  height: auto;
  display: flex;
  margin: 0 auto;
  top: 40%;
  position: relative;
  animation-name: loading;
  animation-duration: 1s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}
.quiz-container{}

#question-container{}
.hide{}
.controls{}
  .btn{
    text-decoration: none;
    letter-spacing: 1px;
    font-size: .85rem;
    cursor: pointer;
  }
  .btn:hover{
    color: #e74c2c;
  }
  .control-btn{
    position: absolute;
    background: url(/assets/button-bg.png);
    background-size: contain;
    width: 150px;
    height: 50px;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    bottom: 75px;
    text-decoration: none;
    padding-bottom: 5px;
    transition: .4s;
    z-index: 1000;
  }
  .control-btn a:hover{
    color: #e74c2c;
  }
    #start-btn{}
    .start-btn{

    }
    #next-btn{

    }
    .next-btn{}
  #question{}
.learn-more-btn{
  position: inherit;
  height: 40px;
  font-size: .8rem;
  transition: .4s;
}
.learn-more-btn:hover{
  color: #e74c2c;
}
.buy-now-btn{
  position: inherit;
}
.btn-grid{
}
.btn-grid div:nth-child(1) {
  left: 42%;
  top: 22%;
  transform: rotate(3deg);
}
.btn-grid div:nth-child(2) {
  left: 14%;
  top: 35%;
  transform: rotate(355deg);
}
.btn-grid div:nth-child(3) {
  left: 64%;
  top: 37%;
  transform: rotate(10deg);
}
.btn-grid div:nth-child(4) {
  left: 6%;
  top: 58%;
  transform: rotate(354deg);
}
.btn-grid div:nth-child(5) {
  left: 35%;
  top: 49%;
  transform: rotate(15deg);
}
.btn-grid div:nth-child(6) {
  left: 68%;
  top: 55%;
  transform: rotate(340deg);
  padding: 5px;
}
.grape-btn{
  position: absolute;
  background: url(/assets/grape.png);
  background-size: contain;
  background-repeat: no-repeat;
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #FFFFFF;
  text-transform: uppercase;
  transition: .4s;
  font-family: 'hawkes-bold-reg';
  letter-spacing: 1px;
  font-size: .85rem;
  line-height: 1rem;
  z-index: 105;
}
.grape-btn:hover{
  cursor: pointer;
  color: #e74c2c;
}
.grape-btn.active{
  color: #e74c2c;
}

.decorative-grapes{}
.small-grape{
  position: absolute;
  background: url(/assets/small-grape.png);
  background-size: contain;
  background-repeat: no-repeat;
  height: 25px;
  width: 25px;
}
.med-grape{
  position: absolute;
  background: url(/assets/med-grape.png);
  background-size: contain;
  background-repeat: no-repeat;
  height: 50px;
  width: 50px;
}
.decorative-grapes .small-grape:nth-child(1) {
    left: 32%;
    top: 30%;
    transform: rotate(3deg);
}
.decorative-grapes .small-grape:nth-child(2) {
    left: 67%;
    top: 52%;
    transform: rotate(3deg);
}
.decorative-grapes .small-grape:nth-child(3) {
    left: 22%;
    top: 51%;
    transform: rotate(3deg);
}
.decorative-grapes .med-grape:nth-child(4) {
    left: 11%;
    top: 24%;
    transform: rotate(3deg);
}
.decorative-grapes .med-grape:nth-child(5) {
    left: 43%;
    top: 41%;
    transform: rotate(3deg);
}
.decorative-grapes .med-grape:nth-child(6) {
    left: 52%;
    top: 62%;
    transform: rotate(3deg);
}
.decorative-grapes .med-grape:nth-child(7) {
    left: 75%;
    top: 28%;
    transform: rotate(3deg);
}
#results-screen{}
#results-screen h5{
  text-align: center;
  color: #fba3ac;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 10px 0px;
}
.wine-result{
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  height: 400px;
  text-align: center;
  background-position: center;
}
.wine-result h2{
  opacity: 0;
}
.wine-result h3{}
.wine-result p{
  position: relative;
  top: 35%;
  color: #584370;
  margin: 0 3rem;
  font-size: .8rem;
}
.wine-result a{
  position: relative;
  top: 37%;
  bottom: unset;
  height: 40px;
  font-size: .8rem;
  transition: .4s;
}
.wine-result a:hover{
  color: #e74c2c;
}
.destination-result{
  width: 80%;
  margin: 0 auto;
}
.destination-result h5{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0;
}
.destination-result p{
  color: #FFFFFF;
}
.destination-title-group{
  display: grid;
  grid-template-columns: 20% 80%;
}
.destination-title-group img{
    width: 50px;
    height: auto;
}
.destination-title-sub-group{
  line-height: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.destination-title-group h2, .destination-title-group h3{
  margin: 0;
  color: #fba3ac;
  letter-spacing: 1px;
}
.destination-title-group h2{
  padding-bottom: 3px;
  font-size: 1.3rem;
}
.destination-title-group h3{
  font-size: .75rem;
  text-transform: uppercase;
  line-height: .9rem;
}
footer{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: url('/assets/footer-bg.png');
  background-position: bottom;
  display: grid;
  grid-template-columns: 33% 33% 33%;
  z-index: 1000;
}
footer div{
  display: block;
  align-self: center;
}
.share-button{
  align-self: center;
  text-align: center;
  text-decoration: none;
  background: url(/assets/share-icon.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: #FFFFFF;
  text-transform: uppercase;
  font-size: .8rem;
  padding-bottom: 3px;
  height: 18px;
  z-index: 1000;
  display: block;
}
footer img{
  display: block;
  margin: 0 auto;
  height: 22px;
  width: auto;
  padding-top: 14px;
}
.restart-button{
  align-self: center;
  text-align: center;
  text-decoration: none;
  background: url(/assets/restart.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: #FFFFFF;
  text-transform: uppercase;
  font-size: .8rem;
  padding-bottom: 3px;
  height: 18px;
  z-index: 1000;
  display: block;
}
.btn-grid .active.grape-animation{
  left: 38%;
  top: 77%;
  transform: rotate(0deg);
  transition: 1.3s
}
#share-container{
  position: absolute;
  bottom: 50px;
  width: 100%;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.5);
}
.social-button{
  width: 35px;
  height: 35px;
}
.fb-share{
  background: url(/assets/facebook.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 220px;
  bottom: 20px;
}
.twitter-share{
  background: url(/assets/twitter.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 130px;
  bottom: 20px;
}
.hide, div.hide{
  display: none;
}