html{
    font:normal 12px / 16px "Helvetica Neue",Helvetica,Arial,sans-serif;
    height: 100%;
    overflow: hidden;
    margin: 0;
}


body {
  margin: 0;
  overflow: hidden;
  -webkit-transition: opacity 400ms;
  -moz-transition: opacity 400ms;
  transition: opacity 400ms;
  color:#4d4d4f;
  font-family: "Helvetica","Arial" , sans-serif;
  height: 100%;
}

h2, .uk-h2 {
    font-size: 3.2vh;
    line-height: 3.6vh;
}


h3, .uk-h3 {
    font-size: 2.8vh;
    line-height: 3.2vh;
}

.map{
    background: url('../images/map.png') no-repeat left top;
    background-size: auto 100%;
    height: 100vh;
    width: 58vh;
    position: absolute;
    right: 0;
    z-index: 100;
    transform: translateX(100%);
}

.bottle{
    background: url('../images/bottle.png') no-repeat left bottom;
    background-size: auto 80%;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 101;
}

.bottle2{
    background: url('../images/bottle.png') no-repeat left bottom;
    background-size: 60% auto;
    height: 88vh;
    width: 60%;
    position: absolute;
    bottom: 12vh;
    max-width: 600px;
}


.tag{
    font-size:4vh;
    font-weight:bold;
}

.brandlogo{
    width: 26vh;
}

.uk-slidenav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.uk-slidenav-next{
    right:0;
}

.pointer{
    position: absolute;
    border: 4px solid #4d4d4f;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: transparent;
    
    cursor:pointer;
    
   -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    
}

.pointer-text{
    font-size:3.6vh;
    text-indent: 3vh;
    font-weight: bold;
}

.lezzet-text{
    font-size:3.0vh;
    line-height:3.6vh;
}

.lezzet-img{
   width: 26vh;
}

.logo-img{
    width: 50vh;
}

.collection-logo{
    width: 44vh;
}

.map-icon{
    margin-top: -8px;
    display: inline;
}
.pointer::before{
    position: absolute;
    top: 4px;
    left: 4px;
    content:'';
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #f37d55;
    
     -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
}

.nav-button{
    border:0;
    box-shadow:none;
    outline: none;
    background-color: #666666;
    background-image: url('../images/button-01.png');
    background-size: 30%;
    background-position: center center;
    background-repeat: no-repeat;
    height:10vh;
    cursor:pointer;
    transition: all 0.3s ease-out;
    box-shadow: 0px  0px 0px 0px #666666;
}

.uk-active .nav-button,
.nav-button:hover{
    box-shadow: 0px -10px 0px 0px #666666;
}

.nav-button.nb-00{
    background-color: #4d4d4d;
    background-image: url('../images/button-00.png');
    box-shadow: 0px  0px 0px 0px #4d4d4d;
}

.uk-active .nav-button.nb-00,
.nav-button.nb-00:hover{
    box-shadow: 0px -10px 0px 0px #4d4d4d;
}

.nav-button.nb-02{
    background-color: #808080;
    background-image: url('../images/button-02.png');
    box-shadow: 0px  0px 0px 0px #808080;
}

.uk-active .nav-button.nb-02,
.nav-button.nb-02:hover{
    box-shadow: 0px -10px 0px 0px #808080;
}

.nav-button.nb-03{
    background-color: #b9b2a0;
    background-image: url('../images/button-03.png');
    box-shadow: 0px  0px 0px 0px #b9b2a0;
}

.uk-active .nav-button.nb-03,
.nav-button.nb-03:hover{
    box-shadow: 0px -10px 0px 0px #b9b2a0;
}
/*
.pointer:hover{

    transform: scale(1.2,1.2);
}

.pointer:hover::before{
    transform: scale(1.6,1.6);
}*/

.main2{
        position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity:0;
}
.p0{ top: 35.5%; left: 39%; }
.p1{ top: 22.5%; left: 17%; }
.p2{ top: 31%; left: 20%; }
.p3{ top: 62%; left: 34%; }
.p4{ top: 28%; left: 14%; }
.p5{ top: 51%; left: 36%; }
.p6{ top: 61%; left: 50%; }
.p7{ top: 22%; left: 20%; }
.p8{ top: 63%; left: 48%; }
.p9{ top: 60%; left: 46%; }
.p10{ top: 22%; left: 19%; }
.p11{ top: 59%; left: 42%; }
.p12{ top: 18%; left: 14%; }
.p13{ top: 43%; left: 20%; }
.p14{ top: 58%; left: 38%; }
.p15{ top: 27.5%; left: 23%; }
.p16{ top: 23.5%; left: 26%; }
.p17{ top: 61%; left: 60%; }
.p18{ top: 63%; left: 40%; }
.p19{ top: 61%; left: 60%; }
.p20{ top: 58%; left: 27%; }
.p21{ top: 21%; left: 10%; }
.p22{ top: 69%; left: 44%; }
.p23{ top: 57%; left: 43%; }
.p24{ top: 52%; left: 50%; }
.p25{ top: 56%; left: 32%; }
.p26{ top: 59.5%; left: 37%; }
.p27{ top: 60%; left: 46%; }
.p28{ top: 53%; left: 32%; }
.p29{ top: 53%; left: 47%; }
.p30{ top: 34.5%; left: 25%; }
.p31{ top: 61%; left: 50%; }


.uk-tooltip{
    background: #b9b2a0;
    font-size:4vh;
    color:#4d4d4f;
    padding: 2vh 1vh;
}

.uk-tooltip:after{
    border-right-color: #b9b2a0;
}

.bottle,
.welcome > div > div{
    opacity: 0;
}

.bottle{
/*    transform: translate3d(0, 100%, 0);*/
}

.uk-container{
    padding: 0;
}


@keyframes inFromRight {
 0 {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}


.inFromRight {
  -webkit-animation-name: inFromRight;
  animation-name: inFromRight;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}


@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-easing: 'ease-in';
  animation-easing: 'ease-in';
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}


@keyframes back3d {
 0 {
    -webkit-transform: rotate3d(0, 0, 0, 45deg) scale(1) translateX(0);
    transform: rotate3d(0, 0, 0, 45deg) scale(1) translateX(0);
  }
  
  50%{
          opacity:1;

  }

  100% {
    -webkit-transform: rotate3d(1, 0, 0.2, 45deg) scale(1.5);
    transform: rotate3d(1, 0,  0.2, 45deg) scale(1.5);
    opacity:0;
  }
}

.back3d {
  -webkit-animation: back3d;
  animation-name: back3d;
   -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.stay3d{
    -webkit-transform: rotate3d(1, -1, 1, 60deg);;
    transform: rotate3d(1, -1, 1, 60deg);;
}

#menu{
    position:fixed; bottom:-5px; left:0; display: none;
}

.tab-2{
    background: #eaeaea;
}

.tab-2-inner{
    background-color: #FFFFFF;    margin: 0 20px; top: 20px;
}

.tab-4-logo{
    width: 36vh;
}
.tab-4-text{
    font-size:2vh;
}

.main2>.uk-container{
    position: relative;
}

@media screen and (max-width:960px){
    .pointer-text{
        text-indent:3.8vh;
    }
    
    .uk-scrollable-box{
        height: 300px;
        border:none;
        padding-bottom: 50px;
    }
}

.uk-scrollable-box{
    height: 400px;
    border:none;
        padding-bottom: 50px;
}