* {
  padding: 0px;
  margin: 0px;
}

@media screen and (min-width: 500px) { /* -------------- Screen Size ---------------*/
  body {
    background-color: red;
  }
}

@media screen and (min-width: 768px) {  /*-------------- Screen Size ---------------*/
  body {
    background-color: green;
  }
}

@media screen and (min-width: 1024px) { /* -------------- Screen Size ---------------*/
  body {
    background-color: blue;
  }
}

@media screen and (min-width: 1280px) { /* -------------- Screen Size ---------------*/
  /*body {
    background-color: grey;
    margin: 0px auto;
    width: 400px;
    height: 750px;
    outline: black solid 5px;
}

.Navigation {
  height: 175px;
  width: 400px;
}

.WebsiteLogo {
  margin: 0 auto;
  width: 150px;
  height: 150px;
}

.WebsiteLogo img {
  width: 150px;
  height: 150px;
}

.NavigationBar {
  background-color: #7ba177;
  margin: auto 0;
}

.NavigationBar ul {
  list-style-type: none;
  overflow: hidden;
}

.NavigationBar ul li {
  float: left;
  background-color: #7ba177;
}

.NavigationBar ul li a {
  display: block;
  color: #787373;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  width: 75px;
  height: 25px;
  padding-top: 0px;
  font-family: Brush Script MT;
}

.NavigationBar ul li a:hover {
  background-color: #abea90;
}*/

body {
  width: 1000px;
  height: 1500px;
  margin: 0 auto;
  background-color: #8BA582;
}



              /*Navigaion Bar*/
.Navigation {
  margin: 0;
  width: 1000px;
  height: 300px;
}

.WebsiteLogo {
  float: left;
  width: 300px;
  height: 300px;
}

.WebsiteLogo img {
  width: 300px;
  height: 300px;
}

.LoginBox {
  background-color: #7ba177;
  float: right;
  width: 200px;
  height: 25px;
  padding-top: 5px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.LoginBox ul {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
}

.LoginBox ul li {
  float: left;
  background-color: #7ba177;
  padding: 10px;
}

.LoginBox ul li:first-child {
  border-bottom-left-radius: 50px;
}

.LoginBox ul li:last-child {
  border-bottom-right-radius: 50px;
}

.LoginBox ul li a {
  color: #787373;
  text-align: center;
  text-decoration: none;
  height: 70px;
}

.LoginBox ul li a:hover {
  background-color: #abea90;
}

.LoginBox ul li:first-child a {
  border-bottom-left-radius: 50px;
  padding-right: 10px;
}

.LoginBox ul li:last-child a {
  border-bottom-right-radius: 50px;
  padding-right: 25px;
}

.NavigationBar {
  margin-top: 75px;
  margin-left: 25px;
  float: left;
  height: 95px;
}

.NavigationBar ul {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
}

.NavigationBar ul li {
  float: left;
  background-color: #7ba177;
}

.NavigationBar ul li:first-child {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

.NavigationBar ul li:last-child {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

.NavigationBar ul li a {
  display: block;
  color: #787373;
  text-align: center;
  text-decoration: none;
  font-size: 35px;
  width: 150px;
  height: 75px;
  padding-top: 20px;
  font-family: Brush Script MT;
}

.NavigationBar ul li a:hover {
  background-color: #abea90;
}

.NavigationBar ul li:first-child a {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

.NavigationBar ul li:last-child a {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  padding-right: 25px;
}

.OpeningTimes {
  margin-top: 10px; 
  margin-right: 200px;
  float: right;
  width: 400px;
  height: 100px;
}

.OpeningTimes p {
  margin-left:30px;
}

.TwoCentreBoxes {
  border-top: 1px white solid;
  border-top-right-radius: 50px;
  margin: 0;
  width: 1000px;
  height: 600px;
}

.PictureFrame {
  width: 500px;
  height: 500px;
  border-top: 1px white solid;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}

.PictureFrame table {
  border-collapse: separate;
  border-spacing: 10px;
}

.PictureFrame img {
  width: 300px;
  height: 300px;
}



                    /* index page content */
.PromotionalImage {
  float: left;
  width: 400px;
  height: 600px;
}

.PromotionalImage img {
  width: 400px;
  height: 600px;
}

.PromotionalText {
  float: left;
  width: 600px;
  height: 600px;
}

.TextBoxPromotional {
  margin-left: 30px;
}

.TextBoxPromotional p {
  margin-top: 20px;
  font-size: 20px;
}

.TextBoxPromotional h3 {
  margin-left: 25px;
}

.PictureFrame {
  margin-top: 20px;
  width: 1000px;
  height: 1000px;
}

.PictureFrame h1 {
  text-align: center;
}

.PictureFrame table {
  margin: 0 auto;
}

.PictureFrameSlideShow {
  width: 1000px;
  height: 500px;
}

.Promotions {
  margin: 0;
  margin-top: 25px;
  width: 1000px;
  height: 500px;
}

.Promotions h1 {
  text-align: center;
  margin-bottom: 5px;
}

.PromotionalOfferOne {
  width: 100px;
  height: 100px;
  float: left;
  margin-left: 10px;
}

.PromotionalOfferOne img {
  width: 300px;
}

.PromotionalOfferTwo {
  width: 100px;
  height: 100px;
  float: left;
  margin-left: 240px;
}

.PromotionalOfferTwo img {
  width: 300px;
}

.PromotionalOfferThree {
  width: 100px;
  height: 100px;
  float: left;
  margin-left: 240px;
}

.PromotionalOfferThree img {
  width: 300px;
}

/*slideshow*/
#slide1 {background-image: url(../images/SlideShow/1.jpg);}
#slide2 {background-image: url(../images/SlideShow/2.jpg);}
#slide3 {background-image: url(../images/SlideShow/3.jpg);}
#slide4 {background-image: url(../images/SlideShow/4.jpg);}
#slide5 {background-image: url(../images/SlideShow/5.jpg);}
#slide6 {background-image: url(../images/SlideShow/6.jpg);}
#slide7 {background-image: url(../images/SlideShow/7.jpg);}
#slide8 {background-image: url(../images/SlideShow/8.jpg);}
#slide9 {background-image: url(../images/SlideShow/9.jpg);}
#slide10 {background-image: url(../images/SlideShow/10.jpg);}
#slide11 {background-image: url(../images/SlideShow/11.jpg);}
#slide12 {background-image: url(../images/SlideShow/12.jpg);}
#slide13 {background-image: url(../images/SlideShow/13.jpg);}
#slide14 {background-image: url(../images/SlideShow/14.jpg);}
#slide15 {background-image: url(../images/SlideShow/15.jpg);}
#slide16 {background-image: url(../images/SlideShow/16.jpg);}
#slide17 {background-image: url(../images/SlideShow/17.jpg);}
#slide18 {background-image: url(../images/SlideShow/18.jpg);}
#slide19 {background-image: url(../images/SlideShow/19.jpg);}
#slide20 {background-image: url(../images/SlideShow/20.jpg);}
#slide21 {background-image: url(../images/SlideShow/21.jpg);}
#slide22 {background-image: url(../images/SlideShow/22.jpg);}
#slide23 {background-image: url(../images/SlideShow/23.jpg);}
#slide24 {background-image: url(../images/SlideShow/24.jpg);}
#slide25 {background-image: url(../images/SlideShow/25.jpg);}
#slide26 {background-image: url(../images/SlideShow/26.jpg);}
#slide27 {background-image: url(../images/SlideShow/27.jpg);}
#slide28 {background-image: url(../images/SlideShow/28.jpg);}
#slide29 {background-image: url(../images/SlideShow/29.jpg);}
#slide30 {background-image: url(../images/SlideShow/30.jpg);}
#slide31 {background-image: url(../images/SlideShow/31.jpg);}
#slide32 {background-image: url(../images/SlideShow/32.jpg);}
#slide33 {background-image: url(../images/SlideShow/33.jpg);}
#slide34 {background-image: url(../images/SlideShow/34.jpg);}
#slide35 {background-image: url(../images/SlideShow/35.jpg);}
#slide36 {background-image: url(../images/SlideShow/36.jpg);}
#slide37 {background-image: url(../images/SlideShow/37.jpg);}

#slideshow {
  position: relative;
  max-width: 500px;
  height: 500px;
  margin: 0 auto;
}

.slide {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 800px;
  height: 500px;
  margin: 0 auto;
  max-width: 100%;
  transition: opacity 300ms;
  z-index: 1;
}



/* Deliveries Page */
.FoodGallery {
  width: 1000px;
  height: 1000px;
  margin: 0 auto;
  display: inline-block;
}

.BreakfastMenu1 img {
  width: 500px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}



              /* Login Page */
.LoginBox1 {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid black;
  border-radius: 100px;
}

.LoginBox2 {
  padding-top: 50px;
  padding-left: 50px;
}