.garden_click_grid_inner{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 100%;
}

#small_screen_garden_scroll .garden_click_grid_inner{
    height: 80%;
    left: 300px;
    right: 300px;
}

.touch_left_right_icon{
    position: absolute;
    width: 120px;
    height: 32px;
    left: calc(50% - 60px);
    bottom: 60px;
    opacity: 0;
    transition: opacity 250ms;
    display: none;
    visibility: hidden;
    background: url("../images/touch_left_right_icon.svg") no-repeat;
}

/* Garden hit zones */
.hit_zone_container{
    position: absolute;
}

.hit_zone{
    position: absolute;
    cursor: pointer;
}

/* Cashews */
.cashew_hit_zone_container{
    height: 33%;
    width: 22%;
    right: 0%;
    bottom: 33%;
}

.cashew_hit_zone_container .hit_zone:nth-child(2){
    height: 100%;
    width: 30%;
    left: 38%;
}

.cashew_hit_zone_container .hit_zone:nth-child(3){
    height: 30%;
    width: 63%;
    left: 23%;
    top: 8%;
}

.cashew_hit_zone_container .hit_zone:nth-child(4){
    height: 27%;
    width: 100%;
    left: 0%;
    top: 25%;
}

.cashew_hit_zone_container .hit_zone:nth-child(5){
    height: 27%;
    width: 36%;
    left: 2%;
    top: 52%;
}

.cashew_hit_zone_container .hit_zone:nth-child(6){
    height: 25%;
    width: 24%;
    right: 15%;
    top: 50%;
}

.cashew_popup{
    right: 17%;
    bottom: 22%;
}

/* Oranges */
.oranges_hit_zone_container{
    height: 23%;
    width: 13%;
    left: 36%;
    bottom: 0%;
}

.oranges_hit_zone_container .hit_zone:nth-child(2){
    height: 60%;
    width: 60%;
    left: 0px;
}

.oranges_hit_zone_container .hit_zone:nth-child(3){
    height: 80%;
    width: 55%;
    right: 0px;
    bottom: 0%;
}

.oranges_popup{
    left: 34%;
    bottom: 29%;
}

/* Bananas */
.bananas_hit_zone_container{
    height: 16%;
    width: 11%;
    right: 25%;
    bottom: 37%;
}

.bananas_hit_zone_container .hit_zone:nth-child(2){
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}

.bananas_popup{
    right: 35%;
    bottom: 25%;
}

/* Coconut */
.coconut_hit_zone_container{
    height: 16%;
    width: 9%;
    right: 9.5%;
    bottom: 65%;
}

.coconut_hit_zone_container .hit_zone:nth-child(2){
    height: 75%;
    width: 40%;
    top: 25%;
    left: 0px;
}

.coconut_hit_zone_container .hit_zone:nth-child(3){
    height: 75%;
    width: 70%;
    top: 10%;
    right: 0px;
}

.coconut_popup{
    right: 19%;
    bottom: 52%;
}

/* Mango */
.mango_hit_zone_container{
    height: 25%;
    width: 7%;
    left: 0px;
    bottom: 58%;
}

.mango_hit_zone_container .hit_zone:nth-child(2){
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}

.mango_popup{
    left: 7%;
    bottom: 37%;
}

/* Vanilla */
.vanilla_hit_zone_container{
    height: 32%;
    width: 12%;
    right: 8%;
    bottom: 0%;
}

.vanilla_hit_zone_container .hit_zone:nth-child(2){
    height: 50%;
    width: 70%;
    top: 0px;
    left: 0px;
}

.vanilla_hit_zone_container .hit_zone:nth-child(3){
    height: 65%;
    width: 70%;
    bottom: 0px;
    right: 0px;
}

.vanilla_popup{
    right: 8%;
    bottom: 34%;
}

/* Bergamot */
.bergamot_hit_zone_container{
    height: 23%;
    width: 13%;
    left: 16.5%;
    bottom: 0%;
}

.bergamot_hit_zone_container .hit_zone:nth-child(2){
    height: 80%;
    width: 80%;
    bottom: 0px;
    left: 0px;
}

.bergamot_hit_zone_container .hit_zone:nth-child(3){
    height: 60%;
    width: 25%;
    top: 0px;
    right: 0px;
}

.bergamot_popup{
    bottom: 22%;
    left: 15%;
}

/* Acai */
.acai_hit_zone_container{
    height: 21%;
    width: 5%;
    left: 0%;
    bottom: 38%;
}

.acai_hit_zone_container .mystery_zone_container{
    left: 25%;
}

.acai_hit_zone_container .hit_zone:nth-child(2){
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}

.acai_popup{
    bottom: 25%;
    left: 4%;
}

/* Popups */
.popup{
    position: absolute;
    background-color: #EBEDE0;
    padding: 17px 15px 17px 15px;
    font-size: 16px;
    line-height: 21px;
    transform: scale(0.0);
    color: #2F2A28;
    width: 100%;
    max-width: 220px;
    box-sizing: border-box;
    visibility: hidden;
    -webkit-animation: bounceOut 150ms linear forwards;
    animation: bounceOut 150ms linear forwards;
}

.animate_popup{
    -webkit-animation: bounceIn 900ms linear forwards;
    animation: bounceIn 900ms linear forwards;
}

@-webkit-keyframes bounceIn {
    0%{ display: none;}
    1%{ -webkit-transform:scale(0.3); opacity:0; display: block}
    20%{ -webkit-transform:scale(1.2); opacity:0.3;}
    40%{ -webkit-transform:scale(0.9); opacity:0.6;}
    55%{ -webkit-transform:scale(1.02); opacity:1;}
    80%{ -webkit-transform:scale(0.98); opacity:1;}
    100%{ -webkit-transform:scale(1); opacity:1;}
}

@keyframes bounceIn {
    0%{ display: none;}
    1%{ transform:scale(0.3); opacity:0; display: block;}
    20%{ transform:scale(1.2); opacity:0.333;}
    40%{ transform:scale(0.9); opacity:0.666;}
    55%{ transform:scale(1.02); opacity:1;}
    80%{ transform:scale(0.98); opacity:1;}
    100%{ transform:scale(1); opacity:1;}
}

@-webkit-keyframes bounceOut {
    0%{ -webkit-transform:scale(1); opacity:1;}
    99%{ -webkit-transform:scale(0.5); opacity:0;}
    100%{display: none;}
}

@keyframes bounceOut {
    0%{ transform:scale(1); opacity:1;}
    99%{ transform:scale(0.5); opacity:0;}
    100%{display: none;}
}

.popup_title{
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
}

.popup_close{
    position: absolute;
    top: 0px;
    right: 0px;
    height: 35px;
    width: 35px;
    transform: translate(50%, -50%);
    background: url("../images/popup_close.svg") no-repeat;
    display: none;
}

.popup_tail_right{
    position: absolute;
    top: 50%;
    left: 100%;
    height: 40px;
    width: 20px;
    transform: translate(-5px, -50%);
    background: url("../images/popup_tail_right.svg") no-repeat left center;
}

.popup_tail_left{
    position: absolute;
    top: 50%;
    left: -20px;
    height: 40px;
    width: 20px;
    transform: translate(5px, -50%);
    background: url("../images/popup_tail_left.svg") no-repeat left center;
}

.popup_tail_down{
    position: absolute;
    left: 50%;
    bottom: 0%;
    height: 20px;
    width: 40px;
    transform: translate(-50%, 15px);
    background: url("../images/popup_tail_down.svg") no-repeat top center;
}

.popup_links_container{
    margin-top: 14px;
}

.popup_all_products_link{
    font-weight: 400;
    display: inline-block;
    border-bottom: solid 1px #2F2A28;
    cursor: pointer;
}

/* Mystery zones */
.mystery_zone_container{
    position: absolute;
    height: 10px;
    width: 10px;
    opacity: 0;
    left: 50%;
    bottom: 50%;
    transition: opacity 250ms;
}

.mystery_zone{
    position: absolute;
    width: 2vw;
    height: 2vw;
    max-width: 35px;
    max-height: 35px;
    min-width: 15px;
    min-height: 15px;
    border-radius: 50%;
    background: url("../images/mystery.svg");
    background-size: 100% 100%;
    opacity: 0.9;
    box-shadow: 0px 0px 20px 20px rgba(236, 236, 222, 0.25);
}