/* Font ––––*/
@font-face {
    font-family: 'rock_saltregular';
    src: url('rocksalt-webfont.woff2') format('woff2'),
         url('rocksalt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}





@font-face {
    font-family: 'mistralregular';
    src: url('mistral-webfont.woff2') format('woff2'),
         url('mistral-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}



/* General For All
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body{font-size: 100%;
     }

.hero {width:100%;
        height:760px;
        margin:auto;
        box-sizing: border-box;
        background-image: url("images/hero.jpg");
        background-repeat: no-repeat;
        background-size:cover;}

.background {width:100%;
            height: 1700px;
            background-image: url(images/background_gradient.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            padding-top: 25px;} 

nav{height:180px;
    width:30%;
    text-align: center;
    float:left;
    margin-top: 60px;
    box-sizing: border-box;}

nav a {text-decoration: none;
        padding:10px;
        margin: auto;
        margin-top: 75px;}

nav a:hover{text-decoration: none;
            opacity:.4;
            transition: all .4s ease-in;}

.nav_b {display:none;}

header{width:100%;
        max-width: 1024px;
        height:780px;
        margin:auto;}

h1 {font-family: 'Rock Salt', cursive;
    font-size: 2.2em;
    text-align: center;
    color: #FFFFFF;}

h2 {font-family: 'Rock Salt', cursive;
    font-size: 1.4em;
    text-align: center;
    color: #FFFFFF;}

footer {width:100%;
        height: 160px;
        margin:auto;
        padding: 35px;
        box-sizing: border-box;
        clear:both;
        text-align: left;
        color:#FFFFFF;
        font-family: 'Muli', sans-serif;
        font-size: .9em;}



.logo_nav{float:left;
          width:40%;
          margin:auto;
          margin-top: 15px;
          text-align: center;}

.logo_nav a:hover{opacity:.4;
                  transition: all .4s ease-in;}


.feel_good_food{clear:both;
                margin:auto;
                text-align: center;
                color:#FFFFFF;
                font-size: 2.8em;
                  font-family: 'rock_saltregular';
                padding-top: 50px;}



.intro_paragraph {height:145px;
                  width:80%;
                  margin: auto;
                  text-align: center;
                  font-family: 'Muli', sans-serif;
                  color: #FFFFFF;
                  font-size:1.4em;}

.wrapper {width:80%;
          height:1100px;
          margin:auto;
          margin-top: 75px;}


.square1 {width:50%;
         max-width: 400px;    
         height: 415px;
         border-style: double;
         border-width: 5px;
         float: left;
         margin-top: 75px;
         font-family: 'Muli', sans-serif;
         color: #FFFFFF;
         font-size: 1em;
         text-align: center;}



.square2 {width:50%;
         max-width: 400px;
         height: 415px;
         border-style: double;
         border-width: 5px;
         float: right;
         margin-top: 75px;
         font-family: 'Muli', sans-serif;
         color: #FFFFFF;
         font-size: 1em;
         text-align: center;}


.square_photo1{width:300px;
            height:175px;
            text-align: center;
            margin: auto;
            background-image: url(images/pizza_hp.jpg);
            background-repeat: no-repeat;
            background-size:cover;}

.square_photo1:hover{background-image: url(images/pizza_hp_hover.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            transition: all .4s ease-in;
            opacity:.7;}

.square_photo2{width:300px;
            height:200px;
            text-align: center;
            margin: auto;
            background-image: url(images/salad_hp.jpg);
            background-repeat: no-repeat;
            background-size:cover;}

.square_photo2:hover {background-image: url(images/salad_hp_hover.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            transition: all .4s ease-in;
            opacity:.7;}

.square_photo3{width:300px;
            height:200px;
            text-align: center;
            margin: auto;
            background-image: url(images/catering_hp.jpg);
            background-repeat: no-repeat;
            background-size:cover;}

.square_photo3:hover {background-image: url(images/catering_hp_hover.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            transition: all .4s ease-in;
            opacity:.7;}

.square_photo4{width:300px;
            height:200px;
            text-align: center;
            margin: auto;
            background-image: url(images/gallery_hp.jpg);
            background-repeat: no-repeat;
            background-size:cover;}

.square_photo4:hover {background-image: url(images/gallery_hp_hover.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            transition: all .4s ease-in;
            opacity:.7;}

.paragraph_square {width:335px;
                   height:120px;
                   text-align: center;
                   clear:both;
                   margin: auto;
                   font-family: 'Muli', sans-serif;
                   font-size: 1.2em;}

.headline{font-family: 'Rock Salt', cursive;
          font-size: 1.1em;}

.footer_contact {width: 30%;
              height:155px;
              float:left;
              margin: auto;
              text-align: left;
              text-decoration: none;}

.footer_logo_mobile{display:none;} 

.footer_logo {width: 30%;
              height:155px;
              float:left;
              margin: auto;
              text-align: center;
              font-family: 'Muli', sans-serif;
              text-decoration: none;
              color:#FFFFFF;
              font-size: .7em;}

.footer_logo a:hover {opacity:.5;
                  transition: all .4s ease-in;}



.footer_hours {width:30%;
               height:155px;
               float:right;
               text-align: right;
               font-family: 'Muli', sans-serif;
               color:#FFFFFF;
               font-size: .9em;}

.footer_hours a:hover {opacity:.5;
                  transition: all .4s ease-in;}



/*-- MENU-SCREEN  --*/

/*-- ACCORDIAN --*/
  .accordion-toggle {cursor: pointer;}
  .accordion-content {display: none;}
  .accordion-content.default {display: block;}

#accordion{width: 100%;
           text-align: center;
           font-family: 'Muli', sans-serif;
           color: #FFFFFF;
           font-size:.9em;}

#accordion:hover{transition: all .2s ease-in;
                          opacity:.4;}

.name {font-family: 'Rock Salt', cursive;}

.menu {height: 100%;}

.menu_hero {width:100%;
        height:760px;
        margin:auto;
        box-sizing: border-box;
        background-image: url("images/menu_hero.jpg");
        background-repeat: no-repeat;
        background-size:cover;}


.menu_hero_paragraph{clear:both;
                margin:auto;
                text-align: center;
                color:#FFFFFF;
                font-size: 2.8em;
                 font-family: 'rock_saltregular';
                margin-top: 5px;
                padding-top: 50px}

.menu_intro {height:145px;
                  width:80%;
                  margin: auto;
                  text-align: center;
                  font-family: 'Muli', sans-serif;
                  color: #FFFFFF;
                  font-size:1.4em;}
.menu_item {width: 100%;
            text-align: center;
            font-family: 'Muli', sans-serif;
            color: #FFFFFF;
            font-size:1.5em;}

.menu_item2 {width: 50%;
            text-align: center;
            float:left;
            font-family: 'Muli', sans-serif;
            color: #FFFFFF;
            font-size:1.5em;}

.salads {width: 40%;
            text-align: center;
            float:right;
            font-family: 'Muli', sans-serif;
            color: #FFFFFF;
            font-size:1.1em;}

.wrapper_menu {width:90%;
          height:1025px;
          margin:auto;
          margin-top: 5px;}

.background_menu {width:100%;
            height: 1750px;
            background-image: url(images/background_gradient.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            padding-top: 25px;}



/*-- ABOUT-SCREEN  --*/

.about {height: 100%;}

.background_about {width:100%;
            height: 1600px;
            background-image: url(images/background_gradient.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            padding-top: 25px;}

.story {clear:both;
                margin:auto;
                margin-top: -10px;
                text-align: center;
                color:#FFFFFF;
                font-size: 2.6em;
                font-family: 'Rock Salt', cursive;}

.wrapper_about {width:80%;
          height: 950px;
          clear: both;
          margin:auto;
          margin-top: -1250px;}

.about_paragraph{width: 50%;
                float: left;
                text-align: left;
                font-family: 'Muli', sans-serif;
                color:#FFFFFF;
                font-size: 1.1em;}
.experince { text-align: center;
                color:#FFFFFF;
                font-size: 1em;
                font-family: 'Rock Salt', cursive;}
.img_about {width:35%;
               height:400px;
               float: right;
               background-image: url(images/about_storyimg.jpg);
               background-repeat: no-repeat;
               background-size: contain;}


/*-- CATERING-SCREEN  --*/

.catered_to_you {clear:both;
                margin:auto;
                margin-top: -10px;
                text-align: center;
                color:#FFFFFF;
                font-size: 2.6em;
                font-family: 'Rock Salt', cursive;}

.background_catering {width:100%;
            height: 1500px;
            background-image: url(images/background_gradient.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            padding-top: 25px;}

.wrapper_catering {width:80%;
          clear: both;
          margin:auto;
          margin-top: -1110px;
          }

.catering_paragraph {width: 50%;
                    
                    float: left;
                    text-align: left;
                    font-family: 'Muli', sans-serif;
                    color:#FFFFFF;
                    font-size: 1.1em;}

.img_catering {width:40%;
               height:300px;
               float: right;
               background-image: url(images/catering_img.jpg);
               background-repeat: no-repeat;
               background-size: cover;}

.getting_started {width: 90%;
                  clear: both;
                  margin: auto;
                  padding-top: 10px;
                  text-align: center;
                  font-family: 'Muli', sans-serif;
                  color:#FFFFFF;
                  font-size: 1.3em;}

.getting_started a {text-decoration: none;
                     color:#FFFFFF;}

.getting_started a:hover {color:goldenrod;
                          transition: all .4s ease-in;
                          opacity:.7;}

.large {font-size: 1.5em;}

.offers {width: 90%;
        height: 150px;
        clear: both;
        margin: auto;
        margin-top: 20px;
        text-align: center;
        font-family: 'Muli', sans-serif;
        color:#FFFFFF;
        font-size: 1.3em;}

.special_offers {width:90%;
                 height:65px;
                 clear: both;
                 margin: auto;
                 text-align: center;}

.catering {height: 100%;}


/*-- CONTACT-SCREEN  --*/

.contact {height: 100%;}

.contact_us {clear:both;
                margin:auto;
                margin-top: -10px;
                text-align: center;
                color:#FFFFFF;
                font-size: 2.6em;
                font-family: 'Rock Salt', cursive;}

.background_contact {width:100%;
            height: 1500px;
            background-image: url(images/background_gradient.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            padding-top: 25px;}

.wrapper_contact {width:95%;
          height: 650px;
          clear: both;
          margin:auto;
          margin-top: -1110px;
          }

.contact_paragraph {width: 30%;
                    float: left;
                    margin-bottom: 25px;
                    text-align: center;
                    font-family: 'Muli', sans-serif;
                    color:#FFFFFF;
                    font-size: 1.1em;}

.contact_paragraph a {text-decoration: none;
                     color:#FFFFFF;}

.contact_paragraph a:hover {color:goldenrod;
                          transition: all .4s ease-in;
                          opacity:.7;}

.contact_social {width: 50%;
                    float: left;
                    margin-top: 75px;
                    margin-bottom: 25px;
                    text-align: center;
                    font-family: 'Muli', sans-serif;
                    color:#FFFFFF;
                    font-size: 1.1em;}

.contact_social a{text-decoration: none;
                  color:#FFFFFF;}

.contact_social a:hover {transition: all .4s ease-in;
                         color:goldenrod;
                         opacity:.5;}


.contact_map {width:40%;
              float:right;}


/* EXTRA MEDIA QUERY FOR HOMEPAGE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 796px) and (max-width: 1070px) 

{ .hero {width:100%;
        height:625px;
        margin:auto;
        box-sizing: border-box;
        background-image: url("images/hero.jpg");
        background-repeat: no-repeat;
        background-size:cover;}   
    
.feel_good_food{clear:both;
                margin:auto;
                text-align: center;
                color:#FFFFFF;
                font-size: 2.5em;
                 font-family: 'rock_saltregular';
                margin-top: 5px;
                padding-top: 10px;}  
    
.intro_paragraph {height:200px;
                  width:90%;
                  margin: auto;
                  text-align: left;
                  font-family: 'Muli', sans-serif;
                  color: #FFFFFF;
                  font-size:1.35em;
                  padding-left: 10px;
                  padding-right: 10px;}
    
h1 {font-family: 'Rock Salt', cursive;
    font-size: 1.8em;
    text-align: center;
    color: #FFFFFF;}       
    
    
.wrapper {width:100%;
          height:1050px;
          margin:auto;
          margin-top: 100px;}    
    
.square_photo1{width:180px;
            height:105px;
            text-align: center;
            margin: auto;
            background-image: url(images/pizza_hp.jpg);
            background-repeat: no-repeat;
            background-size:contain;}
    
.square_photo1:hover{background-image: url(images/pizza_hp_hover.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            transition: all .4s ease-in;
            opacity:.7;}    


.square_photo2{width:180px;
            height:135px;
            text-align: center;
            margin: auto;
            background-image: url(images/salad_hp.jpg);
            background-repeat: no-repeat;
            background-size:cover;}

.square_photo2:hover{background-image: url(images/salad_hp_hover.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            transition: all .4s ease-in;
            opacity:.7;}     

.square_photo3{width:180px;
            height:135px;
            text-align: center;
            margin: auto;
            background-image: url(images/catering_hp.jpg);
            background-repeat: no-repeat;
            background-size:cover;}
    
.square_photo3:hover{background-image: url(images/catering_hp_hover.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            transition: all .4s ease-in;
            opacity:.7;}     
    

.square1 {width:100%;    
         height: 320px;
          clear: both;
         float: none;
         margin: auto;
         text-align: center;
         margin-top: 30px;
         font-family: 'Muli', sans-serif;
         color: #FFFFFF;
         font-size: .9em;}


.square2 {width:100%;
         height: 320px;
         clear: both;
         float: none;
         margin: auto;
         clear: both;
         text-align: center;
         margin-top: 30px;
         font-family: 'Muli', sans-serif;
         color: #FFFFFF;
         font-size: .9em;
         text-align: center;}    
    
    .hidden {display:none;}    
    
 }



/* Tablet
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 481px) and (max-width: 800px) 

    

{
 body {}
.hidden {display:none;}
.hero {width:100%;
        height:500px;
        margin:auto;
        box-sizing: border-box;
        background-image: url("images/hero.jpg");
        background-repeat: no-repeat;
        background-size:cover;}   
    
    
.nav_b {display:none;}    
    
.feel_good_food{clear:both;
                margin:auto;
                text-align: center;
                color:#FFFFFF;
                font-size: 2em;
                 font-family: 'rock_saltregular';
                margin-top: 5px;
                padding-top: 0px;}
    
.background {width:100%;
            height: 1600px;
            background-image: url(images/background_gradient.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            padding-top: 25px;}    
    
    
h1 {font-family: 'Rock Salt', cursive;
    font-size: 1.6em;
    text-align: center;
    color: #FFFFFF;}
    

.intro_paragraph {height:175px;
                  width:90%;
                  margin: auto;
                  text-align: left;
                  font-family: 'Muli', sans-serif;
                  color: #FFFFFF;
                  font-size:1em;
                  padding-left: 10px;
                  padding-right: 10px;} 
    
.wrapper {width:100%;
          height:1050px;
          margin:auto;
          margin-top: 50px;}
    
.square_photo1{width:180px;
            height:105px;
            text-align: center;
            margin: auto;
            background-image: url(images/pizza_hp.jpg);
            background-repeat: no-repeat;
            background-size:contain;}
    
.square_photo1:hover{background-image: url(images/pizza_hp_hover.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            transition: all .4s ease-in;
            opacity:.7;}    


.square_photo2{width:180px;
            height:135px;
            text-align: center;
            margin: auto;
            background-image: url(images/salad_hp.jpg);
            background-repeat: no-repeat;
            background-size:cover;}

.square_photo2:hover{background-image: url(images/salad_hp_hover.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            transition: all .4s ease-in;
            opacity:.7;}     

.square_photo3{width:180px;
            height:135px;
            text-align: center;
            margin: auto;
            background-image: url(images/catering_hp.jpg);
            background-repeat: no-repeat;
            background-size:cover;}
    
.square_photo3:hover{background-image: url(images/catering_hp_hover.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            transition: all .4s ease-in;
            opacity:.7;}     
    

.square1 {width:100%;    
         height: 320px;
          clear: both;
         float: none;
         margin: auto;
         text-align: center;
         margin-top: 30px;
         font-family: 'Muli', sans-serif;
         color: #FFFFFF;
         font-size: .9em;}


.square2 {width:100%;
         height: 320px;
         clear: both;
         float: none;
         margin: auto;
         clear: both;
         text-align: center;
         margin-top: 30px;
         font-family: 'Muli', sans-serif;
         color: #FFFFFF;
         font-size: .9em;
         text-align: center;}
    
    
.paragraph_square {width:350px;;
                   height:120px;
                   text-align: center;
                   clear:both;
                   margin: auto;
                   font-family: 'Muli', sans-serif;
                   font-size: 1.1em;}

.headline{font-family: 'Rock Salt', cursive;
          font-size: 1.4em;
          text-align: center;} 
    
footer {width:100%;
        margin:auto;
        padding: 35px;
        box-sizing: border-box;
        clear:both;
        text-align: left;
        color:#FFFFFF;
        font-family: 'Muli', sans-serif;
        font-size: .8em;}  
    
    
    
    
.footer_contact {width: 30%;
              
              float:left;
              margin: auto;
              text-align: left;}
    

.footer_logo {width: 30%;
             
              float:left;
              margin: auto;
              text-align: center;
              font-family: 'Muli', sans-serif;
              text-decoration: none;
              color:#FFFFFF;
              font-size: .7em;}
    

.footer_hours {width:30%;
               
               float:right;
               text-align: right;
               font-family: 'Muli', sans-serif;
               color:#FFFFFF;
               font-size: .9em;}
    
    
/*-- MENU-TABLET  --*/

/*-- ACCORDIAN --*/
  .accordion-toggle {cursor: pointer;}
  .accordion-content {display: none;}
  .accordion-content.default {display: block;}

#accordion{width: 100%;
           text-align: center;
           font-family: 'Muli', sans-serif;
           color: #FFFFFF;
           font-size:.9em;}

#accordion:hover{transition: all .2s ease-in;
                          opacity:.4;}

.name {font-family: 'Rock Salt', cursive;}

.menu {height: 100%;}

.menu_hero {width:100%;
        height:500px;
        margin:auto;
        box-sizing: border-box;
        background-image: url("images/menu_hero.jpg");
        background-repeat: no-repeat;
        background-size:cover;}


.menu_hero_paragraph{width: 100%;
                clear:both;
                margin:auto;
                text-align: center;
                color:#FFFFFF;
                font-size: 2em;
                 font-family: 'rock_saltregular';
                margin-top: 5px;
                padding-top: 0px;}

.menu_intro {height:145px;
                  width:90%;
                  margin: auto;
                  text-align: center;
                  font-family: 'Muli', sans-serif;
                  color: #FFFFFF;
                  font-size:1.3em;}
.menu_item {width: 100%;
            text-align: center;
            font-family: 'Muli', sans-serif;
            color: #FFFFFF;
            font-size:1.5em;}

.menu_item2 {width: 60%;
            text-align: center;
            float:left;
            font-family: 'Muli', sans-serif;
            color: #FFFFFF;
            font-size:.9em;}

.salads {width: 40%;
            text-align: center;
            float:right;
            font-family: 'Muli', sans-serif;
            color: #FFFFFF;
            font-size:.8em;}

.wrapper_menu {width:90%;
          height:1200px;
          margin:auto;
          margin-top: 5px;}

.background_menu {width:100%;
            height: 1675px;
            background-image: url(images/background_gradient.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            padding-top: 25px;}
    
    
    
    
    
/*-- ABOUT-TABLET  --*/

.about {height: 100%;}

.background_about {width:100%;
            height: 1300px;
            background-image: url(images/background_gradient.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            padding-top: 25px;}

.story {clear:both;
                margin:auto;
                margin-top: -10px;
                text-align: center;
                color:#FFFFFF;
                font-size: 2.2em;
                font-family: 'Rock Salt', cursive;}

.wrapper_about {width:80%;
          height: 650px;
          clear: both;
          margin:auto;
          margin-top: -950px;}

.about_paragraph{width: 100%;
                float: left;
                text-align: center;
                font-family: 'Muli', sans-serif;
                color:#FFFFFF;
                font-size: 1em;
                }
.experince {text-align: center;
            margin: auto;
            font-size: 1em;
            font-family: 'Rock Salt', cursive;}
    
.img_about {display: none;}
    
    
    
    
/* -- CATERING-TABLET --*/    
    
.catered_to_you {font-size: 2.2em;
                font-family: 'Rock Salt', cursive;}

.background_catering {width:100%;
            height: 1525px;
            background-image: url(images/background_gradient.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            padding-top: 25px;}

.wrapper_catering {width:80%;
                   height:900px;
                   margin:auto;
                   margin-top: -1175px;}

.catering_paragraph {width: 100%;
                    clear: both;
                    text-align: center;
                    font-family: 'Muli', sans-serif;
                    color:#FFFFFF;
                    font-size: .9em;}

.img_catering {width:100%;
               height:200px;
               clear: both;
               margin: auto;
               text-align: contain;
               background-image: url(images/catering_img.jpg);
               background-repeat: no-repeat;
               background-size: cover;}

.getting_started {width: 100%;
                  height: 200px;
                  clear: both;
                  margin: auto;
                  padding-top: 10px;
                  text-align: center;
                  font-family: 'Muli', sans-serif;
                  color:#FFFFFF;
                  font-size: 1em;}

.large {font-size: 1.2em;}

.offers {width: 100%;
        height: 130px;
        margin-top: 125px;    
        text-align: center;
        font-family: 'Muli', sans-serif;
        color:#FFFFFF;
        font-size: 1em;}
    
    
/*-- CONTACT-TABLET  --*/

.contact {height: 100%;}

.contact_us {clear:both;
                margin:auto;
                margin-top: -10px;
                text-align: center;
                color:#FFFFFF;
                font-size: 2.2em;
                font-family: 'Rock Salt', cursive;}

.background_contact {width:100%;
            height: 1520px;
            background-image: url(images/background_gradient.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            padding-top: 25px;}

.wrapper_contact {width:95%;
          height: 900px;
          clear: both;
          margin:auto;
          margin-top: -1175px;
          }

.contact_paragraph {width: 50%;
                    float: left;
                    margin-bottom: 25px;
                    text-align: center;
                    font-family: 'Muli', sans-serif;
                    color:#FFFFFF;
                    font-size: 1.1em;}
    
.contact_center {width: 100%; clear: both;
                     margin: auto;
                     text-align: center;}    
    

.contact_paragraph a {text-decoration: none;
                     color:#FFFFFF;}

.contact_paragraph a:hover {color:goldenrod;
                          transition: all .4s ease-in;
                          opacity:.7;}

.contact_social {display:none;}

.contact_social:hover {transition: all .4s ease-in;
                          opacity:.5;}


.contact_map {width:100%;
              clear: both;
              text-align: center;
              margin: auto;
              margin-top: 5px;}
    
}








/* Mobile
––––––––––––––––––––––––––––––––––––––––––––––––––*/
@media screen and (max-width: 480px)
    
    
{body {}
.hidden {display:none;}
.mobile_hidden {display:none;}    
.hero {width:100%;
        height:500px;
        margin:auto;
        box-sizing: border-box;
        background-image: url("images/hero_mobile.jpg");
        background-repeat: no-repeat;
        background-size: cover;}

nav{display:none;}
    
.nav_b {display:block;}    

.nav_b a {display:block;
          text-decoration: none;
          text-align: center;
          margin:auto;
          padding:5px; }

.nav_b a:hover{text-decoration: none;
            opacity:.4;
            transition: all .4s ease-in;}
    
.logo_nav{clear:both;
          width:100%;
          margin:auto;
          margin-top: 15px;
          text-align: center;}

.logo_nav a:hover{opacity:.4;
                  transition: all .4s ease-in;}
    
.feel_good_food{clear:both;
                margin:auto;
                text-align: center;
                color:#FFFFFF;
                font-size: 1.2em;
                 font-family: 'rock_saltregular';
                margin-top: 5px;
                padding-top: 0px;} 
    
.background {width:100%;
            height: 1500px;
            background-image: url(images/background_gradient.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            padding-top: 25px;}
    
h1 {font-family: 'Rock Salt', cursive;
    font-size: 1.35em;
    text-align: center;
    color: #FFFFFF;}
    
.intro_paragraph {height:210px;
                  width:90%;
                  margin: auto;
                  text-align: ;
                  font-family: 'Muli', sans-serif;
                  color: #FFFFFF;
                  font-size:.9em;
                  padding-left: 5px;
                  padding-right: 5px;}    
   
.wrapper {width:80%;
          height:925px;
          margin:auto;
          margin-top: 35px;}
    
.square_photo1{width:250px;
            height:175px;
            text-align: center;
            margin: auto;
            background-image: url(images/pizza_hp.jpg);
            background-repeat: no-repeat;
            background-size:contain;}
    
.square_photo1:hover{ background-image: url(images/pizza_hp_hover.jpg);
            background-repeat: no-repeat;
            background-size:contain;
            transition: all .4s ease-in;
            opacity:.7;}     


.square_photo2{width:250px;
            height:210px;
            text-align: center;
            margin: auto;
            background-image: url(images/salad_hp.jpg);
            background-repeat: no-repeat;
            background-size:contain;}
    
.square_photo2:hover{transition: all .4s ease-in;
            opacity:.7;}     

.square_photo3{width:250px;
            height:200px;
            text-align: center;
            margin: auto;
            background-image: url(images/catering_hp.jpg);
            background-repeat: no-repeat;
            background-size:cover;}
    
.square_photo3:hover{transition: all .4s ease-in;
            opacity:.7;}     

.square1 {width:100%;
         max-width: 300px;
         height: 385px;
         margin: auto;
         text-align: center;
         margin-top:35px;}

.square2 {width:100%;
         max-width: 300px;
         height: 390px;
         margin: auto;
         text-align: center;
         margin-top:35px;}
    
   
    
.paragraph_square {width:240px;
                   height:140px;
                   text-align: center;
                   clear:both;
                   margin: auto;
                   font-family: 'Muli', sans-serif;
                   font-size: 1em;}

.headline{font-family: 'Rock Salt', cursive;
          font-size: 1em;
          text-align: center;}     
    

.footer_logo {display:none;}
   

.footer_contact {width: 100%;
              height:100px;
              clear: both;
              margin: auto;
              margin-top: -180px;
              text-align: center;
              font-size: 1.2em;
              text-decoration: none;}


.footer_hours {width:100%;
               height:50px;
               clear:both;
               margin-top:-50px;
               text-align: center;
               font-family: 'Muli', sans-serif;
               color:#FFFFFF;
               font-size: 1.2em;
               text-decoration: none;}
    
/*-- MENU-MOBILE  --*/

/*-- ACCORDIAN --*/
  .accordion-toggle {cursor: pointer;}
  .accordion-content {display: none;}
  .accordion-content.default {display: block;}

#accordion{width: 100%;
           text-align: center;
           font-family: 'Muli', sans-serif;
           color: #FFFFFF;
           font-size:.55em;}

#accordion:hover{transition: all .2s ease-in;
                          opacity:.4;}

.name {font-family: 'Rock Salt', cursive;}

.menu {height: 100%;}

.menu_hero {width:100%;
        height:500px;
        margin:auto;
        box-sizing: border-box;
        background-image: url("images/menu_hero.jpg");
        background-repeat: no-repeat;
        background-size:cover;}


.menu_hero_paragraph{width: 90%;
                clear:both;
                margin:auto;
                text-align: center;
                color:#FFFFFF;
                font-size: 1em;
                 font-family: 'rock_saltregular';
                   margin-top: 5px;
                padding-top: 0px;}

.menu_intro {height:90px;
                  width:90%;
                  margin: auto;
                  text-align: center;
                  font-family: 'Muli', sans-serif;
                  color: #FFFFFF;
                  font-size:.9em;}
.menu_item {width: 90%;
            text-align: center;
            font-family: 'Muli', sans-serif;
            color: #FFFFFF;
            font-size:.9em;}

.menu_item2 {width: 90%;
            text-align: center;
            float:left;
            font-family: 'Muli', sans-serif;
            color: #FFFFFF;
            font-size:.9em;}

.salads {display:none;}

.wrapper_menu {width:90%;
          min-height:950px;
          max-height:1100px;
          margin:auto;
          margin-top: 5px;}

.background_menu {width:100%;
            max-height: 1900px;
            background-image: url(images/background_gradient.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            padding-top: 25px;}    
    
    
    
/*-- ABOUT-MOBILE  --*/

.about {height: 100%;}

.background_about {width:100%;
            height: 1350px;
            background-image: url(images/background_gradient.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            padding-top: 25px;}

.story {clear:both;
                margin:auto;
                margin-top: -10px;
                text-align: center;
                color:#FFFFFF;
                font-size: 1.2em;
                font-family: 'Rock Salt', cursive;}
    
.wrapper_about {width:95%;
          height: 525px;
          clear: both;
          margin:auto;
          margin-top: -850px;}

.about_paragraph{width: 100%;
                float: left;
                text-align: center;
                font-family: 'Muli', sans-serif;
                color:#FFFFFF;
                font-size: .75em;}
    
.experince {text-align: center;
            margin: auto;
            font-size: 1em;
            font-family: 'Rock Salt', cursive;}
    
.img_about {display: none;}
        
    
    
    
    
    
    
/* -- CATERING-MOBILE --*/

.catered_to_you {font-size: 1.1em;
                font-family: 'Rock Salt', cursive;}

.background_catering {width:100%;
            height: 1675px;
            background-image: url(images/background_gradient.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            padding-top: 25px;}

.wrapper_catering {width:80%;
          height:850px;
          margin:auto;
          margin-top: -1190px;
          margin-bottom: 50px;}
   

.catering_paragraph {width: 100%;
                    height: 250px;
                    margin-bottom: 35px;
                    clear: both;
                    text-align: center;
                    font-family: 'Muli', sans-serif;
                    color:#FFFFFF;
                    font-size: .83em;}

.img_catering {width:100%;
               height:200px;
               clear: both;
               margin: auto;
               margin-top: 25px;
               text-align: contain;
               background-image: url(images/catering_img.jpg);
               background-repeat: no-repeat;
               background-size: cover;}

.getting_started {width: 100%;
                  height: 250px;
                  clear: both;
                  margin: auto;
                  padding-top: 10px;
                  text-align: center;
                  font-family: 'Muli', sans-serif;
                  color:#FFFFFF;
                  font-size: .9em;}

.large {font-size: 1.1em;}

.offers {width: 100%;
        height: 130px;
        margin-top: 50px;    
        text-align: center;
        font-family: 'Muli', sans-serif;
        color:#FFFFFF;
        font-size: .9em;}
    
/*-- CONTACT-MOBILE --*/

.contact {height: 100%;}

.contact_us {clear:both;
                margin:auto;
                margin-top: -10px;
                text-align: center;
                color:#FFFFFF;
                font-size: 1.2em;
                font-family: 'Rock Salt', cursive;}

.background_contact {width:100%;
            height: 1500px;
            background-image: url(images/background_gradient.jpg);
            background-repeat: no-repeat;
            background-size:cover;
            padding-top: 25px;}

.wrapper_contact {width:95%;
          height: 675px;
          clear: both;
          margin:auto;
          margin-top: -985px;
          }

.contact_paragraph {width: 100%;
                    margin-bottom: 25px;
                    text-align: center;
                    font-family: 'Muli', sans-serif;
                    color:#FFFFFF;
                    font-size: 1em;}
    
.contact_center {width: 100%; clear: both;
                     margin: auto;
                     text-align: center;}    
    

.contact_paragraph a {text-decoration: none;
                     color:#FFFFFF;}

.contact_paragraph a:hover {color:goldenrod;
                          transition: all .4s ease-in;
                          opacity:.7;}

.contact_social {display:none;}

.contact_social:hover {transition: all .4s ease-in;
                          opacity:.5;}


.contact_map {display: none;}    
    
    
    

}