@import "main.css";
/*
    Styles only for index page;
*/

    /*The animated logo on website loading*/
#blanklogo {
    position: absolute;
    z-index: 1;
    left: 1%;
    top: 1%;
    width: 12%;
    -webkit-animation-name: logo_in;
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 2.2s;
    animation-name: logo_in;
    animation-duration: 3s;
    animation-delay: 2.2s;
}
@-webkit-keyframes logo_in {
    0%      {opacity: 0.8;box-shadow: 0 0 14px 15px #F28B36;}
    25%     {opacity: 1;box-shadow:0 0 5px 8px #D81802;}
    50%     {opacity: 0.8;box-shadow: 0 0 10px 15px #D81802;}
    70%     {opacity: 1;box-shadow:0 0 5px 8px #D81802;}
    75%     {opacity: 0.8;box-shadow: 0 0 14px 15px #D81802;}
    90%     {opacity: 0.8;box-shadow: 0 0 10px 15px #D81802;}
    95%     {opacity: 1;box-shadow:0 0 5px 8px #D81802;}
}
@keyframes logo_in {
    0%      {opacity: 0.8;box-shadow: 0 0 14px 15px #F28B36;}
    25%     {opacity: 1;box-shadow:0 0 5px 8px #D81802;}
    50%     {opacity: 0.8;box-shadow: 0 0 10px 15px #D81802;}
    70%     {opacity: 1;box-shadow:0 0 5px 8px #D81802;}
    75%     {opacity: 0.8;box-shadow: 0 0 14px 15px #D81802;}
    90%     {opacity: 0.8;box-shadow: 0 0 10px 15px #D81802;}
    95%     {opacity: 1;box-shadow:0 0 5px 8px #D81802;}
}
#burger {
    position: absolute;
    z-index: 1;
    left: 1%;
    top: 1%;
    width: 12%;
    -webkit-animation-name: burgerdrop;
    -webkit-transition-timing-function: ease;
    -webkit-animation-duration: 2.5s;
    -webkit-animation-delay: 0s;
    animation-name: burgerdrop;
    transition-timing-function: ease;
    animation-duration: 2.5s;
    animation-delay: 0s;
}
@-webkit-keyframes burgerdrop {
    0%      {visibility:hidden; top:-200%;}
    80%     {top:-200%; opacity:1;}
    90%     {top:5%;}
    100%    {top:1%;}
}
@keyframes burgerdrop {
    0%      {visibility:hidden; top:-200%;}
    80%     {top:-200%; opacity:1;}
    90%     {top:5%;}
    100%    {top:1%;}
}

    /*The animated menu bar and links on webite loading*/
.menu_bar {
    -webkit-animation-name: bardrop;
    -webkit-transition-timing-function: ease; 
    -webkit-animation-duration: 4s;
    -webkit-animation-delay: 0s;
}
@-webkit-keyframes bardrop {
    0%      {visibility:hidden; top:-100%;}
    40%     {top:-100%; opacity:1;}
    100%    {top: 0;}
}
#venues {
    -webkit-animation-name: venueslide;
    -webkit-transition-timing-function: ease-out; 
    -webkit-animation-duration: 4s;
    -webkit-animation-delay: 0s;
    animation-name: venueslide;
    transition-timing-function: ease-out; 
    animation-duration: 4s;
    animation-delay: 0s;
}
@-webkit-keyframes venueslide {
    0%      {visibility:hidden; right:-100%;}
    60%     {right:-100%; opacity:1;}
    100%    {right:0px;}
}
@keyframes venueslide {
    0%      {visibility:hidden; right:-100%;}
    60%     {right:-100%; opacity:1;}
    100%    {right:0px;}
}
#vouchers {
    -webkit-animation-name: voucherslide;
    -webkit-transition-timing-function: ease-out; 
    -webkit-animation-duration: 4.3s;
    -webkit-animation-delay: 0s;
    animation-name: voucherslide;
    transition-timing-function: ease-out; 
    animation-duration: 4.3s;
    animation-delay: 0s;
}
@-webkit-keyframes voucherslide {
    0%      {visibility:hidden; right:-100%;}
    60%     {right:-100%; opacity:1;}
    100%    {right:0px;}
}
@keyframes voucherslide {
    0%      {visibility:hidden; right:-100%;}
    60%     {right:-100%; opacity:1;}
    100%    {right:0px;}
}
#recipes {
    -webkit-animation-name: recipeslide;
    -webkit-transition-timing-function: ease-out; 
    -webkit-animation-duration: 4.6s;
    -webkit-animation-delay: 0s;
    animation-name: recipeslide;
    transition-timing-function: ease-out; 
    animation-duration: 4.6s;
    animation-delay: 0s;
}
@-webkit-keyframes recipeslide {
    0%      {visibility:hidden; right:-100%;}
    60%     {right:-100%; opacity:1;}
    100%    {right:0px;}
}
@keyframes recipeslide {
    0%      {visibility:hidden; right:-100%;}
    60%     {right:-100%; opacity:1;}
    100%    {right:0px;}
}
#ingredients {
    -webkit-animation-name: ingredientslide;
    -webkit-transition-timing-function: ease-out; 
    -webkit-animation-duration: 4.9s;
    -webkit-animation-delay: 0s;
    animation-name: ingredientslide;
    transition-timing-function: ease-out; 
    animation-duration: 4.9s;
    animation-delay: 0s;
}
@-webkit-keyframes ingredientslide {
    0%      {visibility:hidden; right:-100%;}
    60%     {right:-100%; opacity:1;}
    100%    {right:0px;}
}
@keyframes ingredientslide {
    0%      {visibility:hidden; right:-100%;}
    60%     {right:-100%; opacity:1;}
    100%    {right:0px;}
}
#about {
    -webkit-animation-name: aboutslide;
    -webkit-transition-timing-function: ease-out; 
    -webkit-animation-duration: 5.2s;
    -webkit-animation-delay: 0s;
    animation-name: aboutslide;
    transition-timing-function: ease-out; 
    animation-duration: 5.2s;
    animation-delay: 0s;
}
@-webkit-keyframes aboutslide {
    0%      {visibility:hidden; right:-100%;}
    60%     {right:-100%; opacity:1;}
    100%    {right:0px;}
}
@keyframes aboutslide {
    0%      {visibility:hidden; right:-100%;}
    60%     {right:-100%; opacity:1;}
    100%    {right:0px;}
}

    /*The main content*/
main {
    -webkit-animation-name: mainentrance;
    -webkit-transition-timing-function: linear; 
    -webkit-animation-duration: 5.2s;
    -webkit-animation-delay: 0s;
    animation-name: mainentrance;
    transition-timing-function: linear; 
    animation-duration: 5.2s;
    animation-delay: 0s;
    height: 50%;
    background: none;
}
@-webkit-keyframes mainentrance {
    0%      {visibility:hidden; top: 150%;}
    80%     {top: 150%; opacity:1;}
    100%    {top: 0%;}
}
@keyframes mainentrance {
    0%      {visibility:hidden; top: 150%;}
    80%     {top: 150%; opacity:1;}
    100%    {top: 0%;}
}  


    /*The Animated Social media buttons*/
#facebook {
    -webkit-animation-name: facebookpopup;
    -webkit-transition-timing-function: linear; 
    -webkit-animation-duration: 5s;
    -webkit-animation-delay: 0s;
    animation-name: facebookpopup;
    transition-timing-function: linear; 
    animation-duration: 5s;
    animation-delay: 0s;
}
@-webkit-keyframes facebookpopup {
    0%      {visibility:hidden; top: 150%;}
    95%     {top: 150%; opacity:1;}
    100%    {top: 30%;}
}
@keyframes facebookpopup {
    0%      {visibility:hidden; top: 150%;}
    95%     {top: 150%; opacity:1;}
    100%    {top: 30%;}
}  
#youtube {
    -webkit-animation-name: youtubepopup;
    -webkit-transition-timing-function: linear; 
    -webkit-animation-duration: 5.2s;
    -webkit-animation-delay: 0s;
    animation-name: youtubepopup;
    transition-timing-function: linear; 
    animation-duration: 5.2s;
    animation-delay: 0s;
}
@-webkit-keyframes youtubepopup {
    0%      {visibility:hidden; top: 150%;}
    95%     {top: 150%; opacity:1;}
    100%    {top: 30%;}
}
@keyframes youtubepopup {
    0%      {visibility:hidden; top: 150%;}
    95%     {top: 150%; opacity:1;}
    100%    {top: 30%;}
}  
#delicious {
    -webkit-animation-name: deliciouspopup;
    -webkit-transition-timing-function: linear; 
    -webkit-animation-duration: 5.5s;
    -webkit-animation-delay: 0s;
    animation-name: deliciouspopup;
    transition-timing-function: linear; 
    animation-duration: 5.5s;
    animation-delay: 0s;
}
@-webkit-keyframes deliciouspopup {
    0%      {visibility:hidden; top: 150%;}
    95%     {top: 150%; opacity:1;}
    100%    {top: 30%;}
}
@keyframes deliciouspopup {
    0%      {visibility:hidden; top: 150%;}
    95%     {top: 150%; opacity:1;}
    100%    {top: 30%;}
}  
article {
    background: white;
    padding: 5%;
    font-size: x-large;
    margin-bottom: 10%;
    box-shadow:0 0 5px 8px #F28B36;    
}
h1 {
    margin-bottom: 2%;
}
article img {
    width: 20%;
    float: right;
}