/* General For All
––––––––––––––––––––––––––––––––––––––––––––––––––
font-family: menco, sans-serif; font-weight: 300;
font-style: normal;

font-family: 'Caveat', cursive;
*/


body{background-color: #0f1928;font-size: 100%;
}
img {max-width: 100%;}

header {width: 100%;
        height: 900px;
        background-image: url(images/header.gif);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;}

.logo {
    text-align: center;
        animation-delay: 1s;}

.section1 {display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    justify-content: space-between;
        width: 100%;
max-width: 1200px; 
    margin: auto;
padding-top: 50px;}

h1 {font-family: 'Caveat', cursive;
    font-size: 3em;
    line-height: 50px;
    padding-bottom: 40px;}

.falafel {width:50%;
        padding-top: 100px;}

.squgglies {width: 100%;
    height: 70px;
background-repeat: no-repeat;
float: left;}

.sec1 {color: white;
    font-family: menco, sans-serif;
    font-size: 1.2em;
    width: 50%;
    text-align: center;
    line-height: 20px;
    padding: 100px;
box-sizing: border-box;
}

.aboutmain {padding-top: 100px;}

.button1 {width: 190px;
    height: 200px;
padding-top: 118px;
font-size: 2em;
color: #0f1928;
margin: auto;
background-image: url(images/buttonorange.png);
background-repeat: no-repeat;
background-position: 0px 80px;
cursor: pointer;}


.button1:hover {opacity: 0.7;
transition: .5s ease;}

.sausage {width: 60%;
padding-bottom: 50px;
text-align: center;}

.section2 {display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    justify-content: space-around;
    width: 100%;
max-width: 1200px; 
    margin: auto;
padding-top: 50px;
}

.menuparagraph {color: white;
    font-family: menco, sans-serif;
    font-size: 1em;
   text-align: center;
    line-height: 20px;
    box-sizing: border-box;}

.burger, .menumain, .burgerpic {width:33%;}


.button2 {width: 190px;
    height: 200px;
    font-family: menco, sans-serif;
padding-top: 70px;
padding-left: 60px;
font-size: 2em;
color: #0f1928;
margin: auto;
background-image: url(images/buttonyellow.png);
background-repeat: no-repeat;
background-position: 0px 40px;
cursor: pointer;}

.button2:hover {opacity: 0.7;
transition: .5s ease;}

footer {width: 100%; 
        height: 300px;
        background-image: url(images/footer.png);
        background-repeat: no-repeat;
        background-size: cover;
}

.footerflex {width: 50%;
    padding-top: 70px;
    height: 320px;
    display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    justify-content: space-between;
 align-items: center;}

.footerbutton, .footerbutton2 {width: 109px;
    height: 102px;
    font-family: menco, sans-serif;
    font-size: 2em;
color: white;
text-align: center;
    padding-top: 25px; 
    box-sizing: border-box;
background-image: url(images/buttonblue.png);
background-repeat: no-repeat;
background-position: center;

}

.footerbutton, .footerbutton2 {width: 200%;}

.footerbutton:hover {
    opacity: 0.7;
transition: .5s ease;
} .footerbutton2:hover {
    opacity: 0.7;
transition: .5s ease;
}

.socialflex {
    width:
    padding-top: 70px;
    display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    justify-content: space-between;
 align-items: center;
}

.insta, .twitter, .fb {width: 63px;
height: 61px;}

.footerall {display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    justify-content: space-between;
 align-items: center;
padding-left: 20px;
padding-right: 20px}

.insta:hover, .twitter:hover, .fb:hover {opacity: 0.5;
transition: .5s ease;}

p {color: white;
font-family: menco, sans-serif;
font-size: .8em;
text-align: center;
}
/*----------MENU PAGE---------*/
.menuheader {width: 100%;
        height: 900px;
        background-image: url(images/headermenu.gif);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;}

.themenu {width: 100%;
        height: 1316px;
        margin: auto;
        padding-top 100px;
        background-image: url(images/menuborder.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;}

.hidden2 {display: none;}

ul {
  list-style: none;
  perspective: 900;
padding-top: 70px;
width: 35%;
  margin: auto;
}

.headline {width: 20%;
    height: 400px;
text-align: center;
margin: auto;
padding-top: 200px;
background-image: url(images/underline.png);
background-repeat: no-repeat;
background-position: center 290px}


.pepper {width: 35%;
float: right;}

.sausagefork {padding-left: 100px;
box-sizing: border-box;}
/*----------MENU PAGE---------*/

/*----------ABOUT PAGE----------*/
.bgabout {background-image: url(images/bgabout.png);
background-repeat: no-repeat;
background-size: contain;
width: 100%;
margin: auto;
}

.aboutheader {width: 100%;
        height: 900px;
        background-image: url(images/aboutheader.gif);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;}

.aboutpage, .sectionfirst, .section2 {
display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    justify-content: space-around;}




.abouttitle {font-family: 'Caveat', cursive;
    color: white;
    font-size: 5em;
    text-align: center;
    padding-top: 70px;}

.aboutborder {width: 100%;
text-align: center;}

.about {width: 40%;
    font-size: 1.25em;
text-align: left;

padding-top: 100px;
}

.kebab {
width: 476px;
height: 403px;
}

/*----------ABOUT PAGE----------*/

/*----------CONTACT PAGE--------*/
.contactheader {width: 100%;
        height: 900px;
        background-image: url(images/contactheader.gif);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;}

.contentpage {width: 100%;
display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    justify-content: space-between;
 }

.text {margin: auto;}

h4 {font-size: 4em;
    color: white;
text-align: center;}

.foodtruck {margin: auto;
}
/*----------CONTACT PAGE--------*/
/* ---------------Tablet --------------------------------------*/
@media screen and (min-width: 481px) and (max-width: 800px) {
    
    .logo {width: 33%;
        margin: auto;}
    
    .falafel {width: 40%;
    padding-top: 200px;}
    
    .squgglies {}
    
    .sec1 {width: 60%}
    
    .sausage {width: 60%;
padding-bottom: 50px; margin: auto;}
    
    .burger, .menumain, .burgerpic { width: 40%;} 
    
    h1 {font-family: 'Caveat', cursive;
    font-size: 2.25em;
    line-height: 40px;
    padding-bottom: 20px;}
    
    .aboutmain {padding-top: 20px;}
    
    .button1:hover {opacity: 1;}

    .button2:hover {opacity: 1;}
    
    header {width: 100%;
        height:500px;
        background-image: url(images/headertablet.gif);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;}
    
    footer {width: 100%;
        height: 400px;
        background-image: url(images/footertablet.png);
        background-repeat: no-repeat;
        background-size: cover;}
    
     .footerflex {flex-direction: column;
    height: 50%; margin: auto; padding-top: 130px}
    
    .arrow {display: none;}
    
     .socialflex {flex-direction: column;}
    
    .footerbutton:hover, .footerbutton2:hover {opacity: 1;}
    
    .insta:hover, .twitter:hover, .fb:hover {opacity: 1;}
    
/*----------MENU PAGE---------*/
.menuheader {width: 100%;
        height: 500px;
        background-image: url(images/headertabsub.gif);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;}
    
.headline {width: 40%;
padding-top: 250px;
background-position: center 340px}
    
.themenu {width: 100%;
        height: 1316px;
        margin: auto;
        padding-top 100px;
        background-image: url(images/menuborder.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;}
    
    
    
ul {
  list-style: none;
  perspective: 900;
padding-top: 70px;
width: 60%;
  margin: auto;
}
    
.pepper {width: 26%;
padding-top: 50px;
float: right;}
    
    .sausagefork {width: 70%;}
/*----------MENU PAGE---------*/
    
/*----------ABOUT PAGE--------*/
.aboutheader {width: 100%;
        height: 500px;
        background-image: url(images/abouttabsub.gif);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;}
    .abouttitle {font-size: 4em;}
    
    .kebab {width: 50%}
    
    .bgabout {background-image: url(images/bgabouttab.png);
    background-repeat: no-repeat;}
/*----------ABOUT PAGE--------*/
    
/*----------CONTACT PAGE------*/
.contactheader {width: 100%;
        height: 500px;
        background-image: url(images/contacttab.gif);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;}

/*----------CONTACT PAGE------*/
 }




/* ---------------Mobile -------------------------------------- */
@media screen and (max-width: 500px){
 body {
    }
    header {width: 100%;
        height: 550px;
        background-image: url(images/headerphone.gif);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
    
    .falafel {padding-top: 30px;}
    
    .logo {width: 100%;
        margin: auto;}
    
    .sec1, .falafel {width:100%;}
    
    .sec1 {padding: 50px;}
    
    .aboutmain {padding-top: 120px;}
    
     .sausage {width: 80%;
padding-bottom: 50px; margin: auto;}
   
    .burger, .menumain, .burgerpic {width:100%;
    text-align: center;}
    
    .button2 {padding-left: 10px}
    
    .menuparagraph {width: 70%;
    margin: auto;}
    
    footer {width: 100%;
        height: 400px;
        background-image: url(images/footerphone.png);
        background-repeat: no-repeat;
        background-size: cover;}
    
    .footerall {padding-left: 0px;
    padding-right: 0px;}
    
    .footerflex {flex-direction: column;
    height: 50%; margin: auto; padding-top: 100px}
    
    .arrow {display: none;}
    
    .socialflex {flex-direction: row;
    width: 100%;
    padding-top: 20px;}
    
    /*----------MENU PAGE---------*/
     .menuheader {width: 100%;
        height: 550px;
        background-image: url(images/headerphone.gif);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
    
    
    .headline {width: 50%;
padding-top: 250px;
background-position: center 340px}
    
    
    .themenu {width: 100%;
        height: 1316px;
        margin: auto;
        padding-top 100px;
        background-image: url(images/menubordermobile.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;}
    
    ul {
  list-style: none;
  perspective: 900;
padding-top: 0px;
width: 40%;
  margin: auto;
}
    
.headline {width: 70%;
    padding-top: 250px;}

.hidden2 {display: block;}    
    
.hidden {display: none;}
    
    .pepper {width: 40%;
padding-top: 50px;
float: right;}
    
.sausagefork {width: 80%;
    padding-left: 0px;
    margin: auto;}
    /*----------MENU PAGE---------*/
    
    /*----------ABOUT PAGE--------*/
    .aboutheader {width: 100%;
        height: 550px;
        background-image: url(images/headerphone.gif);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;}
        
        .abouttitle {font-size: 3em;}
    
    .about {width: 70%;
    font-size: 1.25em;
text-align: center;
padding-left: 20px;
}
    .bgabout {background-image: url(images/bgabouttab.png);
    background-repeat: no-repeat;
    background-size: }
    /*----------ABOUT PAGE--------*/
    
    /*----------CONTACT PAGE------*/
   .contactheader {width: 100%;
        height: 550px;
        background-image: url(images/headerphone.gif);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;}
    
    .text {padding-top: 20px}
    /*----------CONTACT PAGE------*/
 }