/* RESPONSIVE CSS ONLY */


@media only screen and (max-width: 3000px) {

.mp-newsletter-signup form {margin-top: 40px;}
.mp-newsletter-signup h3 {font-size: 2vw;}
.mp-newsletter-signup { width: 800px;}

}

@media only screen and (max-width: 1500px) {

.wrapper {max-width: 90%;}
.content-home figure img {max-height: none; width: 100%;}
.content-home p { max-width: 85%;}
p {font-size: 19px; line-height: 33px;}
.mp-banner.wide-view h1 { max-width: 65%;}
.mp-banner p {max-width:50%}
.pies-grid {grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
.mp-newsletter-signup h3 span::before {top: 7px; height: 3px;}
}

@media only screen and (max-width: 1300px) {

.mp-newsletter-signup h3 span::before {top: 6px; height: 3px; width: 95%;}

.pies-grid p {font-size: 15px; line-height: 18px !important;}
.sausage-rolls img {
    max-height: 380px;

}

.details {

    margin: 80px auto 0;
}

p {
    font-size: 18px;
    line-height: 27px;
}

}

@media only screen and (max-width: 900px) {

.wrapper {
    max-width: 85%;
}

.mp-grid.content > article {max-width: 100% !important}
.pies-grid .item img {max-width: 80%; margin:0 auto}
.pie-content h2 {text-align:center}

.form-field {width: 100%}
#stockform select {position:relative; transform:none; top:0}
#stockform button {position:relative}

.content-home p {max-width:100%}

header {height: 100px;}
.mp-nav {display:none}
.mp-container {  margin: 15px;}
.overlay-banner {position:relative; background-color: #e51f28; padding: 50px 0 30px 0}
.mp-banner h1 {max-width:none; font-size: 65px; line-height: 50px;}
h2 {font-size: 45px;}
.pie-content {
    padding-top: 30px;
}

.mp-banner.wide-view h1 {
    max-width: 100%;
}

.mp-grid.content {grid:none}

.mp-banner p {
    max-width: 95%;
}
.mp-logo img {
    max-width: 80px;
    margin: 10px 0;
}

.cart-logo {position: relative;right: 70px;display: block!important;}
.cart-logo img {height: 35px;width: 35px;}

.contact-form .flex-row input, .contact-form .flex-row select {
    width: 100%;
}

.details {
    margin: 20px 0;
}
.details .social-icons {
    margin: 20px 0;
}

.content-home {padding: 20px 0}

.content-grid article {padding: 30px 0 0px 0}
.content-grid > figure, .content-grid > article {width: 100%}
.content-grid > figure {margin-top: 30px}
.pies-grid {grid-gap: 40px;}

.store-form {max-width: 320px;}
.store-form input[type="text"], .store-form button {font-size: 15px;}
.store-form button {height: 50px;}

.mp-footer figure {width: 100px; margin:0 auto}
.mp-footer {padding: 30px 0}
.mp-newsletter-signup input[type="email"], .mp-newsletter-signup button {font-size:15px;}
.mp-newsletter-signup button {height: 50px;}

.content-home.mp-grid {grid:none}

.flex.shops {display:block}
.flex.shops > div {width: 100%;}

iframe {max-width: 310px; display:block}

.item:hover article {width: 95%;}

.pies-grid p {
    font-size: 18px;
    line-height: 26px !important;
}

.social-icons {margin: 30px auto 0}

.sausage-rolls .item, .sausage-rolls .item:last-child {
    display: flex;
    justify-content: center;
}

 #websiteFrameTop {top: 0; left: 0; width: 100%; height: 15px;}
 #websiteFrameRight { top: 0; bottom: 0; right: 0; width: 15px;}
 #websiteFrameBottom {bottom: 0; left: 0; width: 100%; height: 15px;}
 #websiteFrameLeft { top: 0; bottom: 0; left: 0; width: 15px;}

.mp-newsletter-signup h3 span::before {top: 4px; height: 3px; width: 90%;}

.hamburger {display: block;}

}

@media only screen and (max-width: 500px) {
  .mp-footer figure {margin: 0 auto 20px;}
  .mp-newsletter-signup h3 {font-size: 4.5vw;}
  .mp-newsletter-signup h3 span::before {top: 2px; height: 2px; width: 85%;}

  .mobile-nav #footer-menu a {font-size: 25px; line-height: 40px;}


  .content.wrapper .flex-row {flex-direction: column !important;}
  .content.wrapper .flex-row article {width: 100% !important;}
  .form .flex-row > div {width: 100%;}
  .change-password-container {width: 100%;}

  .table-div .one, .table-div .two, .table-div .three, .table-div .four, .table-div .five {width: 100%;}

  .cart__blocks {flex-direction: column !important;}
  .cart__left {width: 100% !important;}
  .cart__right {width: 100% !important;}

  .sized-container {width: 77% !important;}

  .checkout-right {width: 100% !important;}

}