@font-face {
 font-family: 'Quack'; src: url('quacksal-webfont.eot');
	src: url('quacksal-webfont.eot?#iefix') format('embedded-opentype'),
	url('quacksal-webfont.woff') format('woff'),
	url('quacksal-webfont.ttf') format('truetype'),
	url('quacksal-webfont.svg#quacksalver_brknormal') format('svg');
	font-weight: normal; font-style: normal;
 
}

html { min-height:100vh; background: url("images/store-front-2.jpg") no-repeat left top; background-size: cover; }

body { font-family: arial, helvetica, sans-serif; margin: 0; padding: 0; color: #fff;
 font-size: 12px; line-height: 150%; letter-spacing:1px; text-transform:uppercase; }

a {
 color: #fff; text-decoration: none;
 }
a:hover {
 color: #e21e79;
 }
p { margin: 10px 0 0 0;}

div.wrapper { position:relative; margin: 13% 3% 1% 3%;}

div.homeheader { width:100%; height:100vh; position: fixed; top: 0px; left: 0px;
    background: transparent url("images/orange-border-1.png") repeat-x left top; text-align:center; background-size:7%; 
}


.homelogo {width:50%;}

.homedown { position:fixed; top:29%; left:3%; width:20vw; height:20vw; background: transparent url("images/homedown_button.png"); background-size:100%; z-index:900;}
.homedown:hover {background: transparent url("images/homedown_button3.png"); background-size:100%; }
.homemusic { position:fixed; bottom:6%; left:19%; width:20vw; height:20vw; background: transparent url("images/homemusic_button.png"); background-size:100%; z-index:901;}
.homemusic:hover {background: transparent url("images/homemusic_button3.png"); background-size:100%; }
.homehookah { position:fixed; top:36%; left:32%; width:12vw; height:12vw; background: transparent url("images/homehookah_button.png"); background-size:100%; z-index:902;}
.homehookah:hover {background: transparent url("images/homehookah_button3.png"); background-size:100%; }
.homemenu { position:fixed; bottom:20%; left:42%; width:12vw; height:12vw; background: transparent url("images/homemenu_button.png"); background-size:100%; z-index:903;}
.homemenu:hover {background: transparent url("images/homemenu_button3.png"); background-size:100%; }
.homecafe { position:fixed; top:23%; right:32%; width:20vw; height:20vw; background: transparent url("images/homecafe_button.png"); background-size:100%; z-index:904;}
.homecafe:hover {background: transparent url("images/homecafe_button3.png"); background-size:100%; }
.homedelivery {
    /*position:fixed; bottom:16%; right:30%; width:10vw; height:10vw; background: transparent url("images/homedelivery_button.png"); background-size:100%; z-index:905;*/
    
}
/*.homedelivery:hover {background: transparent url("images/homedelivery_button3.png"); background-size:100%; }*/

/*.menuPageDelivery {*/
/*    width: 10vw;*/
/*    height: 10vw;*/
/*    background: transparent url(images/homedelivery_button3.png);*/
/*    background-size: 100%;*/
/*    z-index: 905;*/
/*    background-color: transparent;*/
/*    margin: 0em;*/
/*    border-width: 0px;*/
    
/*}*/

.homeshop { position:fixed; bottom:24%; right:8%; width:20vw; height:20vw; background: transparent url("images/homeshop_button.png"); background-size:100%; z-index:906;}
.homeshop:hover {background: transparent url("images/homeshop_button3.png"); background-size:100%; }

div.homefooter {position:fixed; left:2%; bottom:2%;}
.homefooter a {
font-size:14px; margin-right:24px; }
div.copyright {position:fixed; right:9%; bottom:1%;}
a.mafrika { display:block; position:fixed; right:1.5%; bottom:1%; width:6vw; height:17vw;
 background: transparent url("mafrika.jpg"); background-size:100%; z-index:555;}

a.orderButtons {
    position: fixed;
    top: 1%;
    right: 6%;
    width: 11.2vw;
    height: 11.2vw;
    background: transparent url(images/homedelivery_button3.png);
    background-size: 100%;
    z-index: 905;
    background-color: transparent;
    margin: 0em em;
    border-width: 27px;
    background: transparent url(images/homedelivery_button.png);
    background-size: 100%;
    z-index: 906;
}


.fbuttons {
    position: fixed;
    top: 1%;
    right: 6%;
    width: 11.2vw;
    height: 11.2vw;
    background: transparent url(images/homedelivery_button3.png);
    background-size: 100%;
    z-index: 905;
    background-color: transparent;
    margin: 0em em;
    border-width: 27px;
    background: transparent url(images/homedelivery_button.png);
    background-size: 100%;
    z-index: 906;
   
}


.fbuttons {
 position: fixed;
    position: fixed;
    top: 1%;
    right: 6%;
    width: 17vw;
    height: 17vw;
    border: 2px solid #e92f2ff7;
    border-radius: 66px;
    opacity: 0.16;
    opacity: 1;
    background-color: none !important;
    font-size: 16px;
    border-radius: 168px;
    opacity: 0;
}


/*.slide-in {*/
/*    animation: slide-in 2.5s forwards !important;*/
/*    -webkit-animation: slide-in 2.5s forwards;*/
/*}*/

/*.slide-up {*/
/*    animation: slide-in 3.5s forwards;*/
/*    -webkit-animation: slide-in 2.5s forwards;*/
/*}*/

@keyframes slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    /*visibility: hidden;*/
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  animation-name: slideOutUp;
}

/*#slideUp {*/
    /* position: absolute; */
/*   animation-delay: 24s;*/
/*   animation-delay: 20s;*/
/*   animation-delay: -1500ms;*/
/*   transition-delay: 23s;*/
/*    bottom: 23%;*/
/*    width: 100px;*/
/*    height: 100px;*/
    /* background: blue; */
    /*transition: 6.5s;*/
/*      animation: slideOutUp 8.5s forwards;*/
/*    -webkit-animation: slideOutUp 8.5s forwards;*/

/*}*/

#delivery-slide-in-lg {
    position: absolute;
    right: -100px; 
    top: -123px;
    /* SET THE SLIDER TO BE OFFSCREEN INITIALLY */
    transition: 2s;
    animation-delay:3s;
    animation: delivery-slide-in-lg 3.5s forwards !important;
    -webkit-animation: delivery-slide-in-lg 3.5s forwards;
}
.slide-in-footer-lg {
    /*position: absolute;*/
    position: fixed;
    right: -100px; 

    /* SET THE SLIDER TO BE OFFSCREEN INITIALLY */
    transition: 3s;
    animation-delay:3s;
    animation: slide-in-footer 2.5s forwards !important;
    -webkit-animation: slide-in-footer 4.5s forwards;
}
@keyframes slide-in-footer {
    0% {
        transform: translateX(-100%);  
    }
   
    100% {
        transform: translateX(0%);  
    left: 2%;
    bottom: 2%;
 }
}

/*.slide-in {*/
/*    animation-delay:4s;*/
/*    animation: slide-in 2.5s forwards !important;*/
/*    -webkit-animation: slide-in 2.5s forwards;*/
/*}*/
@keyframes slide-in {
    0% {
        transform: translateX(-100%);  
        right: -30px; top: 1%;
        
    }
   
    100% {
        transform: translateX(0%);  
        right: -30px; top: 1%;}
}
    
@keyframes delivery-slide-in-lg {
        0% {
        transform: translateX(-100%);  
        right: -100%; top: 1%;
        
    }
   
    100% {
        transform: translateX(0%);  
        right: -30px;     top: -123px;}

}

@keyframes slide-in-footer-lg {
    0% {
        transform: translateX(-100%);  
        right: -30px; top: 1%;
        
    }
   
    100% {
        transform: translateX(0%);  
        right: -30px; top: 1%;}
}

#dim { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none;
	background-color: #000; z-index: 998; opacity: .33; filter: alpha(opacity=33); }
#bkg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; background-color: transparent; z-index: 999; }
#bkg table { width: auto; margin: 0 auto; height: 100%; }
#bkg td { height: 100%; vertical-align: middle; text-align: center; }
#apop { border: 6px solid #ccc;
	border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px; z-index:1000;
	background-color: #333; }
#padapop { padding: 30px; text-align: center;}
  #padapop p { margin-top: 12px; }
  #padapop h1 { margin: 0px 0 12px 0; }
  #padapop h2 { margin: 0px 0 12px 0; text-transform: none; text-align: center; }
  #padapop h3 { margin: 0px 0 12px 0; text-transform: none; text-align: left; font-size:15px; line-height:18px;}

@media all and (orientation: portrait)
{
.homedown { top:12%; left:12%; width:32vw; height:32vw; }
.homemusic { bottom:25%; left:3%; width:32vw; height:32vw; }
.homehookah { top:40%; left:36%; width:20vw; height:20vw; }
.homemenu { bottom:10%; left:37%; width:20vw; height:20vw; }
.homecafe { top:10%; right:12%; width:32vw; height:32vw; }
/*.homedelivery {*/
/*    bottom:16%; right:20%; width:16vw; height:16vw; */
    
/*}*/
.homeshop { bottom:33%; right:3%; width:32vw; height:32vw; }
.homefooter a {
    display:block;
    
}
.fbuttons {
    top: 32%;
    right: 28%;
    width: 32vw;
    height: 32vw;
}

div.copyright {
    right:16%;
  }
}
@media all and (max-width: 780px)
{
.homefooter a {
font-size:12px; margin-right:18px; }
div.copyright {display:none;}
}
@media all and (max-width: 480px)
{
.homefooter a {
font-size:10px; margin-right:12px; }
div.copyright {display:none;}
}

/*

*/