body {font-family: 'Poppins', sans-serif; }

.websiteFrame {  position: fixed; z-index: 990; background-color:#e51f28;}
 #websiteFrameTop {top: 0; left: 0; width: 100%; height: 25px;}
 #websiteFrameRight { top: 0; bottom: 0; right: 0; width: 25px;}
 #websiteFrameBottom {bottom: 0; left: 0; width: 100%; height: 25px;}
 #websiteFrameLeft { top: 0; bottom: 0; left: 0; width: 25px;}

.message-account {background:#e51f28; color:#fff; padding: 10px 20px 5px;}
.message-account p {color:#fff; font-size: 14px; line-height: 17px;}

 .mp-container {margin: 25px}

 .wrapper {max-width: 1440px; margin:0 auto; width: 100%;}
 .wrapper-sml {max-width: 1366px; margin:0 auto; width: 100%;}

.fieldMessage {display: block;background: #e51f28; color:#fff; padding: 10px 20px; font-size: 15px;}

.js-qty__num {width: 30px; padding: 5px; text-align:center}

#cart-message > span {background: mediumseagreen; padding: 10px; border-radius:5px; color:#fff; display:block}

/* HEADER */

header {height: 150px; background: #fff;}
.mp-logo img {max-width: 125px; margin:12px 0}
.mp-nav {width:80%}
.mp-nav ul {display:flex; justify-content: flex-start; width: 100%;}
.mp-nav li {margin-left:30px}
.mp-nav a {color:#515151; text-decoration: none; display: block; font-weight:900; font-size: 24px; letter-spacing: -1px;}
.mp-nav a:hover {color: #e51f28;}

.hamburger {width: 50px; height: 30px; position: absolute; cursor: pointer; right: 50px; top: 50px; transition: 0.3s; z-index: 99999; display: none;}
.hamburger span {height: 4px; background: #e51f28;; width: 100%; position: absolute; opacity: 1; transition: 0.3s;}
.hamburger span:nth-child(1) {top: 0;}
.hamburger span:nth-child(2) {top: 13px;}
.hamburger span:nth-child(3) {bottom: 0;}


.hamburger.active {position: fixed;}
.hamburger.active span:nth-child(2) {opacity: 0; transform: rotate(90deg); top: 15px;}
.hamburger.active span:nth-child(1) {top: 0; transform: rotate(135deg); top: 15px;}
.hamburger.active span:nth-child(3) {bottom: 0; transform: rotate(225deg); top: 15px;}

.mobile-nav { box-sizing: border-box; position: fixed; display: block;background: #e51f28;top: 0; z-index: 99; transition: 0.5s; height: 100vh; width: 100%; left: -110%; border-radius: 50%; padding: 40px;}
.mobile-nav img {width: 150px; z-index: 9999;position: relative;mix-blend-mode: multiply;}
.mobile-nav ul {display: flex; flex-direction: column; padding: 30px 20px;}
.mobile-nav ul li {position: relative; color: #1d1f1e; display: inline-block;z-index: 9999;font-size: 60px;font-family: 'Recoleta';font-weight: 400; transition: 0.3s;}
.mobile-nav ul a {text-decoration: none;font-family: 'Poppins';color: #000;line-height: 60px;font-size: 35px;}
.mobile-nav ul a:hover {color: #e51f28;}
.mobile-nav ul li >img {padding: 0;}


.mobile-nav::after { box-sizing: border-box; content: ""; position: absolute; display: block; background: #fffbf6;top: 0; z-index: 99; transition: 0.5s; height: 100vh; width: 100%; left: -120%; border-radius: 50%;}
.mobile-nav.active {left: 0; border-radius: 0;}
.mobile-nav.active::after {left: 0; border-radius: 0;}

/* BASE STYLES */

h1 {font-family: 'extenda50_mega'; font-size: 7vw; line-height: 5.5vw; margin-bottom: 40px; text-transform: uppercase;}
h2 {font-family: 'extenda50_mega'; font-size: 6vw; text-transform: uppercase; color:#e51f28;}
h3 {font-family: 'Poppins'; font-size: 22px; line-height: 30px; margin-bottom:0; letter-spacing: 0px; color:#222}
h4 {}
h5 {}
h6 {}

p {font-family: 'Poppins'; font-weight: normal; font-size: 16px; color:#323232; line-height: 30px; margin: 15px 0}
strong {font-weight: 700; font-family: 'Poppins';}

.text-right {text-align: right;}
.text-left {text-align: left;}
.text-center {text-align: center;}


.line {height: 1px; background:#eee; display: block; margin-top: 0px;}

/* CONTENT */

.mp-banner {position: relative;}
.mp-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 30px; margin: 30px 0}
.content-home {padding: 50px 0}
.content-home p {max-width: 75%;}
.content-home figure {display: flex; align-content: flex-end; text-align: right; justify-content:flex-end}
.content-home figure img {max-height: 300px; width: auto}

.content {padding: 50px 0; border-top: 5px solid #e51f28;}

.overlay-banner {position: absolute; width: 100%; height:100%}
.flex-center {display:flex; align-items: center;}

.mp-banner h1 {color: #fff; max-width: 600px;}
.mp-banner.wide-view h1 {max-width: 70%;}
.mp-banner p {max-width: 45%; color: #fff; line-height: 28px !important; }

.form {max-width: 900px; margin: 20px 0}
.form label {font-size: 15px; font-weight: 600}
.form input[type="text"], .form input[type="password"], .form input[type="email"], .form select {margin: 10px 0; box-shadow: inset 0 0 0 1px #222; border:none; width:100%; padding: 13px 0px; text-indent: 15px; outline: none; font-family: 'Poppins'; font-size: 16px;}
.form input[type="text"], .form input[type="password"] {border: 1px solid #000;box-shadow: none;border-radius: 0px;}

.select {margin: 0; box-shadow: inset 0 0 0 1px #222; border:none; width:100%; padding: 13px 0px; text-indent: 15px; outline: none; font-family: 'Poppins'; font-size: 16px;}

.form .flex-row > div {width: 48%}

.form .button {border:none; font-family: 'Poppins';  cursor:pointer;  padding: 15px; display:inline-block; font-size: 14px; text-transform:uppercase; color: #fff; font-weight:700; background:#e51f28}
.form .button:hover {background:#e51f28}


.button {border:none; font-family: 'Poppins'; text-decoration:none;  cursor:pointer;  padding: 15px; display:inline-block; font-size: 14px; text-transform:uppercase; color: #fff; font-weight:700; background:#e51f28}
.button:hover {background:#e51f28}

form textarea {box-shadow: inset 0 0 0 4px #e51f28; height: 100px; margin-top: 10px; border:none; width:100%; padding: 10px 0px; text-indent: 15px; outline: none; font-family: 'Poppins'; font-size: 20px;}

.form a {border-bottom:1px solid #e51f28; text-decoration:none; color: #222}

.cart__left {display:block !important}

.details {max-width: 70%; margin:110px auto 0;}
.details strong {color:#e51f28}
.details .social-icons {margin-top: 25px}

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

.radio {display:flex; margin-bottom: 20px;}
.radio label {position: relative; box-shadow: inset 0 0 0 4px #e51f28; margin-right: 8px; color:#e51f28; font-weight: 700; width: 45px; height: 45px; display: block; font-size: 20px; line-height: 45px; text-align:center}
.radio label input {display:none}


/* PIES */

table {
    border-spacing: 1;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    margin: 50px auto;
    position: relative
}

table * {
    position: relative
}

table td,table th {
    padding-left: 8px; text-align:left;
}

table thead tr {
    height: 60px;
    background: #36304a
}


table td {vertical-align: middle;}


table tbody tr:last-child {
    border: 0
}


table th {

    font-size: 18px;
    color: #fff;
    line-height: 1;
    font-weight: unset
}

tbody tr:nth-child(even) {
    background-color: #f5f5f5
}

tbody tr {

    font-size: 15px;
    color: gray;


}

tbody tr:hover {
    color: #555;
    background-color: #f5f5f5;
    cursor: pointer
}

table thead tr {
    height: 40px;
    background: #36304a;
}

table thead span {display:block; padding: 13px 0; text-transform:uppercase; letter-spacing: 2px; font-size: 14px; font-weight:bold}


.pies-grid {}
.item {position: relative;  width: 100%; border-bottom:1px solid #eee;}
.item a {border-bottom: 1px solid #eee; text-decoration:none; color:inherit;}
.item:last-child a {border-bottom:none}

.name {margin: 0; position:relative}

.item figure {padding: 8px 0}
.item figure img {height: 60px; width: auto; mix-blend-mode:multiply}

.item .price { color: #999}
.item .price p {color:#999 !important}

.item p.trade-price {color:#e51f28 !important; font-size: 15px; text-align:left}

.item strong {text-transform:uppercase; letter-spacing: 1px; font-size: 17px; }
.item p {}


.item .button {border:none; font-family: 'Poppins';  cursor:pointer;  padding: 12px; margin-top: 0px; display:inline-block; font-size: 14px; text-transform:uppercase; color: #fff; font-weight:700; background:#e51f28}
.item .button:hover {background:#e51f28}

.category-item {border: 5px solid #e51f28}
.category-item h2 {font-size: 37px; letter-spacing:1px; line-height:28px; position:relative; top: 5px; min-height: 65px}
.category-item article {padding: 20px; }

.category-item .view-button {border:none; font-family: 'Poppins';  cursor:pointer;  padding: 12px; margin-top: 20px; display:inline-block; font-size: 14px; text-transform:uppercase; color: #fff; font-weight:700; background:#e51f28}
.category-item a {text-decoration:none; color:inherit}

.category-item figure {padding-top: 25px}
.category-item figure img {max-height: 150px; width: auto; margin: 0 auto}

.content-grid {padding-bottom: 50px;}
.content-grid > figure, .content-grid > article {width: 48%}




/* MAP */

#queryLocations li {margin: 0px; border-bottom:1px solid #eee; padding: 10px 0; font-size: 16px; font-weight: 600}

/* FOOTER */


.mp-footer {padding: 70px 0}
.border-top {border-top: 5px solid #e51f28}
.social-icons {max-width: 113px;}
.social-icons > a {width: 48%}

.mp-newsletter-signup {width: 600px; }
.mp-newsletter-signup h3 {font-family: 'extenda50_mega'; font-size: 2.5vw; text-transform: uppercase; color:#e51f28; letter-spacing: normal; text-align: center; letter-spacing: 1px;}
.mp-newsletter-signup h3 span {position: relative;}
.mp-newsletter-signup h3 span::before {content: '';position: absolute; top: 8px; width: 100%; height: 5px; background:#e51f28 }
.mp-newsletter-signup form {position: relative; margin-top: 10px;}
.mp-newsletter-signup input[type="email"] {border: 4px solid #e51f28; width:100%; padding: 10px 0px; text-indent: 15px; outline: none; font-family: 'Poppins'; font-size: 20px;}
.mp-newsletter-signup button {position: absolute; right:0px; bottom:0; color: #e51f28; text-transform: uppercase; font-weight: 700; font-family: 'Poppins';
    background:none;  border:none; border-left: 4px solid #e51f28;
font-size: 20px; height: 58px; padding: 0 20px; cursor: pointer;}

footer figure img {max-width: 115px;}
.mp-footer-btm {padding-bottom: 50px; font-size: 16px; color:#7f7f7f}

/* FLEX */

.v-align {align-items: center;}
.flex-row { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; flex-flow: row wrap;align-content: stretch;}
.flex-row.top { align-items: flex-start !important;}
.flex { display: flex; align-items: flex-start | flex-end | center | baseline; flex-wrap: wrap; justify-content: space-between;}
.flex-plain { display: flex; align-items: flex-start; }
.columns-2 {display: flex; flex-direction: row; flex-wrap: wrap; flex-flow: row wrap; align-content: flex-end; align-self: flex-start;}
.flex-row.stretch {  display: flex; align-items: flex-start | flex-end | center | baseline | stretch;  flex-wrap: wrap;  justify-content: center;}



/*PIE CLASSES*/

.Yellow:hover article {border: 10px solid #bea500;}
.Blue:hover article {border: 10px solid #334fb0;}
.Green:hover article  {border: 10px solid #6fad00;}
.Black:hover article  {border: 10px solid #000;}
.Brown:hover article  {border: 10px solid #aa443a;}