/* @override
	http://sumosushibento.local/dojo/assets/css/promo.css
	http://dinein.sumosushibento.local/dojo/assets/css/promo.css */



/* Promotional ***************************************************** */

div.promobox {

	box-shadow: 0 0 14px rgba(0, 0, 0, 0.27);
	min-width: 360px;
	min-height: 450px;
	position: relative;
	overflow: hidden;
	max-width: 1500px;
	border-top-right-radius: 15px!important;
	border-top-left-radius: 15px!important;
	border-bottom-right-radius: 15px!important;
	border-bottom-left-radius: 15px!important;
	margin-top: 0;
	width: 100%;
}

.modal div.promobox {
	border-radius: 0px!important;
}

div.promocolor {
	color: #ffffff;
	width: 100%;
	height: 100%;
	min-height:475px;
	display: block;
	position: relative;
	padding-bottom: 10px!important;

}

div.promofoot-row {
	position: absolute;
	z-index: 12;
	left: 0;
	bottom: 0;
	width: 100%;
}

div.promoimage {
	color: #ffffff;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
	min-height: 475px;
	background-size: cover !important;
	background-position: right top;
	margin-bottom: 50px !important;
}
span.displayedprice,
div.displayedprice {
	font-size: 14px;
	margin-right: 0px;
	line-height: 28px;
	color: #ffffff;
	display: inline-block;
}
span.displayedprice small,
div.displayedprice small {
	font-size: 12px;
	margin-right: 3px;
	line-height: 28px;
	color: #8aedfb;
	position: relative;
	top: -1px;
}
span.displayedprice i,
div.displayedprice i {
	font-size: 12px;
	margin-right: 10px;
	line-height: 0;
	color: #c7d7d9;
	font-weight: normal;
	font-style: normal;
	padding-left: 2px;
}

div.panelbox div.displayedprice {
	position: relative;
	font-weight: normal;
	font-style: normal;
	color: #eae7e7;
	top: 5px;
	border-radius:10px;
	background-color: rgba(0, 0, 0, 0.25);
	padding: 0 0 0 8px;
	text-shadow: 1px 1px 2px #000000;
	left: 5px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.40);
}


span.displayedprice.bigger,
div.displayedprice.bigger {
	font-size: 18px;
	margin-right: 0px;
	line-height: 28px;
	color: #ffffff;
	display: inline-block;
}
span.displayedprice.bigger small,
div.displayedprice.bigger small {
	font-size: 14px;
	margin-right: 3px;
	line-height: 28px;
	color: #8aedfb;
	position: relative;
	top: -1px;
}
span.displayedprice.bigger i,
div.displayedprice.bigger i {
	font-size: 14px;
	margin-right: 10px;
	line-height: 0;
	color: #c7d7d9;
	font-weight: normal;
	font-style: normal;
	padding-left: 2px;
}


 div.panelitemtext div.miniring {
 	font-size: 11px;
 	float: right;
 	display: inline;
 	border: 1px solid #ffffff;
 	padding: 0 10px 1px;
 	margin-right: 10px;
 	border-radius:10px;
 	font-weight: normal;
 	font-style: normal;
 	position: relative;
 	top: 3px;
 }

div.promoitemtext {
	color: #ffffff;
	position: absolute;
	padding-left: 0px;
	padding-top: 35px;
	text-align: center;
	bottom: 10px;
	width: 100%;
}
div.promoitemtext div.promoitem_title {
	font-weight: bold;
	font-size: 2.8em!important;
	text-align: center;
	line-height: .8em;
}

div.promoitemtext div.taglinetext {
	font-size: 14px;
	position: relative;
	text-align: center;
	text-transform: uppercase;
}


div.promoitemtext div.promoitem_subtitle {
	font-size: 13px;
	position: relative;
	padding-top: 3px;
	text-align: center;
}



div.panelbox {
	border-radius: 15px;
	width: 100%;
	box-shadow: 0 0 14px rgba(0, 0, 0, 0.12);
	margin: 0 auto 5px;
	min-width: 160px;
	position: relative;
	overflow: hidden;
	padding-bottom: 10px;
}


div.panelitemtext {
	color: #ffffff;
	width: 100%;
	position: absolute;
	clear: both;
	z-index: 4;
	margin-left: 0;
	bottom: 4px;
	padding-left: 12px;
}
div.panelitemtext div.panelitem_title {
	font-weight: bold;
	font-size: 1.6rem;
	overflow: hidden;
	position: relative;
	margin-bottom: -7px;
}

div.panelitemtext div.paneltaglinetext {
	font-size: 1.2rem;
	bottom: -5px;
	position: relative;
}



div.promofoot {
	background-color: rgb(0, 0, 0);
	opacity: 0.31;
	height: 50px;
	width: 100%;
	color: #ffffff;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

div.promofootertext {
	color: #ffffff !important;
	z-index: 6;
	width: 100%;
	height: 50px;
	padding: 12px 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}



div.promofootcolor {
	height: 50px;
	width: 100%;
	color: #ffffff;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	position: relative;
	z-index: 2;
	overflow: hidden;

}
.modal div.promofootcolor,
.modal div.promofootertext {
	border-radius: 0px;
}



div.promofootertext a {
	color: #ffffff;
}


div.detailexpansion {
	padding: 0;
	margin: 0;
	position: relative;
	display: block;
	float: left;
	width: 100%;
}



.ringedbutton {
	border-radius: 14px;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	padding: 4px 12px 6px;
	border: 1px solid #ffffff;
	margin-right: 6px;
}

.ringedbutton:hover {
	background-color: rgba(0, 0, 0, 0.42);
}
.addme {
	display: none;

}


a.promoadd {
	content: '';
	float: right;
	margin-right: 10px;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.12);
	position: relative;
	cursor:pointer;
	animation-name: roll-in-left;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: none;
}


a.promoadd:hover {
	width: 180px;
	border-radius: 14px;
	border: 1px solid #ffffff;
}


a.promoadd:hover .addme {
	margin-left: 10px;
	width: 180px;
	color: #ffffff;
	position: relative;
	top: 1px;
	display: inline;
	padding-left: 10px;
	text-align: center;
}

@keyframes roll-in-left {

	0% {
		transform:translateX(-800px) rotate(-540deg);
		opacity:0;
	}
	100% {
		transform:translateX(0) rotate(0deg);
		opacity:1;
	}
}

div.promofootertext a.promoadd.fa-4x svg.bi.bi-clock-fill path {
	display: inline;
	position: relative;
	margin-right: 1px;
}


a.paneladd {
	color: #ffffff;
	position: absolute;
	right: 12px;
	bottom: 0;
}


.cart-service {
	max-width: 100%;
	margin-top: 15px;
	margin-bottom: 20px;
	display: block;
	position: relative;
}



.sub-info-buttons {
	margin-left: 20px;

}
.sub-info-text {
	font-size: 1.2rem;
	padding-left: 8px;
	margin-top: 0px;
	color: #cacaca;
	width: 55%;

}

div.sub-info-text.floater.fw-lighter.d-flex {
	position: absolute;
    bottom: 90px;
	width: 50%;
}


.addto_cart_btn {
	max-width: 40%;
	margin-top: 25px;
	margin-bottom: 50px;
}

div.promocolor.green .btn-addto-white-outline.addtextcolor {
	color: #ffffff;
}
 .btn-addto-white-outline.addtextcolor:hover {
	color: #446201!important;
}



 .btn-addto-white.addtextcolor:hover {
	color: #ffffff!important;
}


.btn-addto-white {
	border: 1px solid rgba(255, 255, 255, 0.36);
	border-radius: 30px;
	margin-left: 22px;
	font-size: 1.4rem;
	font-weight: 400;
	padding: 3px 3px 6px 2px;
	cursor:pointer;
	background-color: #ffffff;
}


.btn-addto-white:hover {
	border: 1px solid #ffffff;
	background-color: rgba(56, 56, 56, 0.3);
	color: #ffffff;
}


.btn-addto-white-outline {
	border: 2px solid rgba(255, 255, 255, 0.36);
	border-radius: 30px;
	margin-left: 22px;
	font-size: 1.4rem;
	font-weight: 400;
	padding: 3px 3px 6px 2px;
	cursor:pointer;
}


.btn-addto-white-outline:hover {
		background-color: #ffffff;
}






/*Change width here to widen quantity count field*/
input#quantity.text-center.qty_text,
.fullpromo div.detailcart input.text-center.qty_text {
	background-color: transparent;
	color: #FFFFFF;
	border: 1px solid transparent;
	width: 45px;
	font-size: 20px;
	margin-top: -8px;
	line-height: 33px;
}
form#cartform input#quantity.text-center.qty_text{
color: #000000;
}

div.theitems {
	max-width: 55%;
	padding-left: 30px;
	z-index: 6;
}

div.theitems.promoted__items {
	margin-top: 10px;

}
div.theitems.promoted__items .bgimage {
	width: 100px;
	background-size: cover;
	background-position: center center;
	border-radius:8px;
	height: 100px;
	margin: 8px 2px;
	border-style: none;
	}



/*********** colors *************/
/*********** colors *************/
/*********** colors *************/

div.promocolorblock.green,
div.colorbk.green,
div.color--box.green,
div.promofootcolor.green,
div.promobox.green {
	background-color: rgb(69, 99, 2);
}
div.promocolorblock.teal,
div.colorbk.teal,
div.color--box.teal,
div.promofootcolor.teal,
div.promobox.teal {
	background-color: rgb(79, 194, 218);
}
div.promocolorblock.orange,
div.colorbk.orange,
div.color--box.orange,
div.promofootcolor.orange,
div.promobox.orange {
	background-color: rgb(209, 67, 19);
}
div.promocolorblock.red,
div.colorbk.red,
div.color--box.red,
div.promofootcolor.red,
div.promobox.red {
	background-color: rgb(215, 3, 48);
}
div.promocolorblock.blue,
div.colorbk.blue,
div.color--box.blue,
div.promofootcolor.blue,
div.promobox.blue {
	background-color: rgb(0, 62, 77);
}
div.promocolorblock.purple,
div.colorbk.purple,
div.color--box.purple,
div.promofootcolor.purple,
div.promobox.purple {
	background-color: rgb(123, 45, 110);
}
div.promocolorblock.lime,
div.colorbk.lime,
div.color--box.lime,
div.promofootcolor.lime,
div.promobox.lime {
	background-color: rgb(157, 190, 95);
}
div.promocolorblock.pink,
div.colorbk.pink,
div.color--box.pink,
div.promofootcolor.pink,
div.promobox.pink {
	background-color: rgb(200, 58, 125);
}
div.promocolorblock.yellow,
div.colorbk.yellow,
div.color--box.yellow,
div.promofootcolor.yellow,
div.promobox.yellow {
	background-color: rgb(241, 212, 2);
}
div.promocolorblock.white,
div.colorbk.white,
div.color--box.white,
div.promofootcolor.white,
div.promobox.white {
	background-color: rgb(255, 255, 255);
}
div.promocolorblock.gold,
div.colorbk.gold,
div.color--box.gold,
div.promofootcolor.gold,
div.promobox.gold {
	background-color: rgb(219, 177, 89);
}
div.promocolorblock.brown,
div.colorbk.brown,
div.color--box.brown,
div.promofootcolor.brown,
div.promobox.brown {
	background-color: rgb(89, 40, 26);
}



a.green.btn-addto-white.addtextcolor {
	color: rgb(69, 99, 2);
}

a.teal.btn-addto-white.addtextcolor {
	color: rgb(79, 194, 218);
}

a.orange.btn-addto-white.addtextcolor {
	color: rgb(209, 67, 19);
}

a.red.btn-addto-white.addtextcolor {
	color: rgb(215, 3, 48);
}

a.blue.btn-addto-white.addtextcolor {
	color: rgb(0, 62, 77);
}

a.purple.btn-addto-white.addtextcolor {
	color: rgb(123, 45, 110);
}

a.lime.btn-addto-white.addtextcolor {
	color: rgb(157, 190, 95);
}

a.pink.btn-addto-white.addtextcolor {
	color: rgb(200, 58, 125);
}

a.yellow.btn-addto-white.addtextcolor {
	color: rgb(241, 212, 2);
}

a.white.btn-addto-white.addtextcolor {
	color: rgb(255, 255, 255);
}

a.gold.btn-addto-white.addtextcolor {
	color: rgb(219, 177, 89);
}

a.brown.btn-addto-white.addtextcolor {
	color: rgb(89, 40, 26);
}





div.promocolor.green {
	background: linear-gradient(12deg, rgb(69, 99, 2) 0%, rgb(69, 99, 2) 21%, rgba(69, 99, 2, 0.77) 25%, rgba(69, 99, 2, 0.38) 32%, rgba(255,255,255,0) 35%);
}
div.promoimage.green{
	background-size: cover;
}

div.promocolor.teal {
	background: linear-gradient(12deg, rgb(79, 194, 218) 0.6%, rgb(79, 194, 218) 21%, rgba(79, 194, 218, 0.77) 25%, rgba(79, 194, 218, 0.38) 32%, rgba(255,255,255,0) 35%);
}
div.promoimage.teal {
	background-size: cover;
}

div.promocolor.orange {
	background: linear-gradient(12deg, rgb(209, 67, 19) 0.6%, rgb(209, 67, 19) 21%, rgba(209, 67, 19, 0.77) 25%, rgba(209, 67, 19, 0.38) 32%, rgba(255,255,255,0) 35%);
}

div.promoimage.orange {
	background-size: cover;
}


div.promocolor.red {
	background: linear-gradient(12deg, rgb(215, 3, 48) 0%, rgb(215, 3, 48) 21%, rgba(215, 3, 48, 0.77) 25%, rgba(215, 3, 48, 0.38) 32%, rgba(255,255,255,0) 35%);
}
div.promoimage.red {
	background-size: cover;
}

div.promocolor.blue {
	background: linear-gradient(12deg, rgb(0, 62, 77) 0%, rgb(0, 62, 77) 21%, rgba(0, 62, 77, 0.77) 25%, rgba(0, 62, 77, 0.38) 32%, rgba(255,255,255,0) 35%);
}
div.promoimage.blue {
	background-size: cover;
}

div.promocolor.purple {
	background: linear-gradient(12deg, rgb(123, 45, 110) 0%, rgb(123, 45, 110) 21%, rgba(123, 45, 110, 0.77) 25%, rgba(123, 45, 110, 0.38) 32%, rgba(255,255,255,0) 35%);
}
div.promoimage.purple {
	background-size: cover;
}


div.promocolor.lime {
	background: linear-gradient(12deg, rgb(157, 190, 95) 0%, rgb(157, 190, 95) 21%, rgba(157, 190, 95, 0.77) 25%, rgba(157, 190, 95, 0.38) 32%, rgba(255,255,255,0) 35%);
}
div.promoimage.lime {
	background-size: cover;
}

div.promocolor.pink {
	background: linear-gradient(12deg, rgb(200, 58, 125) 0%, rgb(200, 58, 125) 21%, rgba(200, 58, 125, 0.77) 25%, rgba(200, 58, 125, 0.38) 32%, rgba(255,255,255,0) 35%);
}
div.promoimage.pink {
	background-size: cover;
}

div.promocolor.yellow {
	background: linear-gradient(12deg, rgb(241, 212, 20) 0%, rgb(241, 212, 2, 110) 21%, rgba(241, 212, 2, 0.77) 25%, rgba(241, 212, 2, 0.38) 32%, rgba(255,255,255,0) 35%);
}
div.promoimage.yellow {
	background-size: cover;
}
div.promocolor.white {
	background: linear-gradient(12deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 21%, rgba(255, 255, 255, 0.77) 25%, rgba(255, 255, 255, 0.38) 32%, rgba(255, 255, 255, 0) 35%);
}
div.promoimage.white {
	background-size: cover;
}
div.promoimage.white div.promocolor.white div.promoitemtext {
	color: #696969 !important;
}

div.promocolor.gold {
	background: linear-gradient(12deg, rgb(219, 177, 89) 0%, rgb(219, 177, 89) 21%, rgba(219, 177, 89, 0.77) 25%, rgba(219, 177, 89, 0.38) 32%, rgba(219, 177, 89, 0) 35%);
}
div.promoimage.gold {
	background-size: cover;
}

div.promocolor.brown {
	background: linear-gradient(12deg, rgb(89, 40, 26) 0%, rgb(89, 40, 26) 21%, rgba(89, 40, 26, 0.77) 25%, rgba(89, 40, 26, 0.38) 32%, rgba(255, 255, 255, 0) 35%);
}
div.promoimage.brown {
	background-size: cover;
}

/*164, 62, 6 brown*/

div.detailcolor.green {
	background: linear-gradient(75deg, rgb(69, 99, 2) 0.6%, rgb(69, 99, 2) 51.4%, rgba(69, 99, 2, 0.77) 55%, rgba(69, 99, 2, 0.38) 57.6%, rgba(255,255,255,0) 60.4%), url('/sumotogo/img/detailimg.jpg') right top / contain no-repeat;
}



div.panelbox.green {
background-color: rgb(69, 99, 2);
}
div.panelbox.green div.panelcolor {
background: linear-gradient(6deg, rgb(69, 99, 2) 0%, rgb(69, 99, 2) 10.9%, rgb(69, 99, 2) 17.6%, rgba(69, 99, 2,0) 29%);
z-index: 1;
}

div.panelbox.teal {
background-color: rgb(79, 194, 218);
}
div.panelbox.teal div.panelcolor {
background: linear-gradient(6deg, rgb(79, 194, 218) 0%, rgb(79, 194, 218) 10.9%, rgb(79, 194, 218) 17.6%, rgba(79, 194, 218,0) 29%);
z-index: 1;
}

div.panelbox.orange {
background-color: rgb(209, 67, 19);
}

div.panelbox.orange div.panelcolor {
background: linear-gradient(6deg, rgb(209, 67, 19) 0%, rgb(209, 67, 19) 10.9%, rgb(209, 67, 19) 17.6%, rgba(209, 67, 19,0) 29%);
z-index: 1;
}
div.panelbox.red {
background-color: rgb(215, 3, 48);
}
div.panelbox.red div.panelcolor {
background: linear-gradient(6deg, rgb(215, 3, 48) 0%, rgb(215, 3, 48) 10.9%, rgb(215, 3, 48) 17.6%, rgba(215, 3, 48,0) 29%);
z-index: 1;
}

div.panelbox.blue {
background-color: rgb(0, 62, 77);
}
div.panelbox.blue div.panelcolor {
background: linear-gradient(6deg, rgb(0, 62, 77) 0%, #003d4d 10.9%, rgb(0, 62, 77) 17.6%, rgba(0, 62, 77, 0) 29%);
z-index: 1;
}

div.panelbox.purple {
background-color: rgb(123, 45, 110);
}
div.panelbox.purple div.panelcolor {
background: linear-gradient(6deg, rgb(123, 45, 110) 0%, rgb(123, 45, 110) 10.9%, rgb(123, 45, 110) 17.6%, rgba(123, 45, 110, 0) 29%);
z-index: 1;
}

div.panelbox.lime {
background-color: rgb(157, 190, 95);
}
div.panelbox.lime div.panelcolor {
background: linear-gradient(6deg, rgb(157, 190, 95) 0%, rgb(157, 190, 95) 12.7%, rgba(157, 190, 95, 0.77) 19.4%, rgba(156, 190, 95, 0.41) 23.5%, rgba(157, 190, 95, 0) 29%);
z-index: 1;
}

div.panelbox.pink {
background-color: rgb(157, 190, 95);
}
div.panelbox.pink div.panelcolor {
background: linear-gradient(6deg, rgb(200, 58, 125) 0%, rgb(200, 58, 125) 12.7%, rgba(200, 58, 125, 0.77) 19.4%, rgba(200, 58, 125, 0.41) 23.5%, rgba(200, 58, 125, 0) 29%);
z-index: 1;
}

div.panelbox.yellow {
background-color: rgb(241, 212, 2);
}
div.panelbox.yellow div.panelcolor {
background: linear-gradient(6deg, rgb(241, 212, 2) 0%, rgb(241, 212, 2) 12.7%, rgba(241, 212, 2, 0.77) 19.4%, rgba(241, 212, 2, 0.41) 23.5%, rgba(241, 212, 2, 0) 29%);
z-index: 1;
}

div.panelbox.white {
background-color: rgb(255, 255, 255);
}
div.panelbox.white div.panelcolor {
background: linear-gradient(6deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 12.7%, rgba(255, 255, 255, 0.77) 19.4%, rgba(255, 255, 255, 0.41) 23.5%, rgba(255, 255, 255, 0) 29%);
z-index: 1;
}

div.panelbox.gold {
background-color: rgb(219, 177, 89);
}
div.panelbox.gold div.panelcolor {
background: linear-gradient(6deg, rgb(219, 177, 89) 0%, rgb(219, 177, 89) 10.6%, rgba(219, 177, 88, 0.86) 17.3%, rgba(219, 177, 88, 0) 29%);
z-index: 1;
}

div.panelbox.brown {
background-color: rgb(89, 40, 26);
}
div.panelbox.brown div.panelcolor {
background: linear-gradient(6deg, rgb(89, 40, 26) 0%, rgb(89, 40, 26) 10.6%, rgba(89, 40, 26, 0.86) 17.3%, rgba(89, 40, 26, 0) 29%);
z-index: 1;
}

/*********** colors *************/
/*********** colors *************/
/*********** colors *************/

.modal div.promobox {
	box-shadow: none;
	min-width: 350px;
	min-height: 450px!important;
	position: relative;
	overflow: hidden;
	max-width: 1500px;
	}

.modal div.promoimage {
		min-height: 450px!important;
	background-size: cover !important;
	background-position: right top;
	margin-bottom: 0px !important;
}

.modal div.promocolor {
	color: #ffffff;
	width: 100%;
	height: 100%;
	min-height:450px;
	display: block;
	position: relative;
	padding-bottom: 0px!important;

}

.modal div.promoitemtext {
	color: #ffffff;
	position: relative;
	padding-left: 0px;
	padding-top: 350px;
	text-align: center;
	width: 100%;
}
.modal div.promoitemtext div.promoitem_title {
	font-weight: bold;
	font-size: 2.8em!important;
	text-align: center;
	line-height: .8em;
}

.modal div.promoitemtext div.taglinetext {
	font-size: 12px;
	position: relative;
	text-align: center;
}


.modal div.promoitemtext div.promoitem_subtitle {
	font-size: 12px;
	position: relative;
	padding-top: 3px;
	text-align: center;
}



.modal div.detail-description {
	position: relative;
	padding: 12px 10%;
	max-width: 100%;
	margin-top: 0px;
}

.modal .cart-service {
	max-width: 100%;
	margin: 15px auto 15px;
	display: block;
	position: relative;
	padding-right: 10%;
	padding-left: 10%;
}

.modal .cart-service.slim {
	padding-left: 70px;
}


.modal .sub-info-buttons {
	margin: 0 auto;
}
.modal .sub-info-text {
	font-size: 1.2rem;
	padding: 10px 10% 18px;
	margin-top: 10px;
	color: #c0bcbc;
	width: 100%;
	display: block;
	margin-bottom: 50px;
}

.modal div.theitems {
	max-width: 100%;
	padding-left: 0%;
	z-index: 6;
	padding-right: 0%;
	margin-bottom: 1px;
}

.modal div.theitems.promoted__items .bgimage {
	width: 100px;
	background-size: cover;
	background-position: center center;
	border-radius:8px;
	height: 100px;
	margin: 8px 1px 10px!important;
	border-style: none;
	}

/* sumobar ***************************************************** */



/*********** Medium devices (tablets, 576px and up)***************/
/*********** Medium devices (tablets, 576px and up)***************/
/*********** Medium devices (tablets, 576px and up)***************/

/*Medium devices (tablets, 576px and up)*/
@media (min-width: 576px) {



div.promoitemtext div.promoitem_title {
	font-weight: bold;
	font-size: 2.8em!important;
	line-height: .8em;
	text-align: center;
}

.modal div.theitems {
	max-width: 100%;
	padding-left: 5%;
	z-index: 6;
	padding-right: 5%;
}

.modal div.theitems.promoted__items .bgimage {
	width: 100px;
	background-size: cover;
	background-position: center center;
	border-radius:8px;
	height: 100px;
	margin: 8px 2px 10px !important;
	border-style: none;
	}

}





/********** Medium devices (tablets, 768px and up) *************/
/********** Medium devices (tablets, 768px and up) *************/
/********** Medium devices (tablets, 768px and up) *************/

/********** Medium devices (tablets, 768px and up) *************/
@media (min-width: 768px) {







div.sumotextspacer {
		min-height: 100px;
}

.sub-info-text {
	font-size: 1.2rem ;
	padding-left: 40px;
	margin-top: 0px;
	color: #cacaca;
	width: 50%;
}
.sub-info-buttons {
	margin-left: 40px;
}


}
.modal .sub-info-text {
	font-size: 1.2rem;
	padding: 10px 10% 18px;
	margin-top: 10px;
	color: #c0bcbc;
	width: 100%;
	display: block;
}




/*********** Large devices (desktops, 992px and up) *****************/
/*********** Large devices (desktops, 992px and up) *****************/
/*********** Large devices (desktops, 992px and up)
background-size: 54% !important;
*****************/

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {

img.logo-center {
	width: 120px;
	height: auto;
}
div.modal-body {
	padding: 0;
	margin: 0;
	display: block;
	float: left;
}
.modal .fullpromo div.promobox {
	box-shadow: none;
	min-width: 350px;
	min-height: 450px!important;
	position: absolute;
	overflow: hidden;
	max-width: 1500px;
	margin-top: 0;
	margin-bottom: 0;
	top: 0;
}

.modal div.promoimage {
	min-height: 450px!important;
	background-size: cover !important;
	background-position: right top;
	margin: 0;
}

.fullpromo div.promoimage {
	color: #ffffff;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
	background-size: contain !important;
	background-position: right top;

}


.modal .sub-info-text {
	font-size: 1.2rem;
	padding: 10px 10px 5px 40px;
	margin-top: 10px;
	color: #c0bcbc;
	width: 50%;
	display: block;
}



.modal div.promocolor {
	color: #ffffff;
	width: 100%;
	height: 100%;
	min-height:400px;
	display: block;
	position: relative;
	padding-bottom: 0px!important;

}


.modal .fullpromo div.promoitemtext {
	color: #ffffff;
	position: relative;
	padding-left: 50px;
	padding-top: 45px;
}


.fullpromo div.promoitemtext {
	color: #ffffff;
	position: relative;
	padding-left: 50px;
	padding-top: 45px;
}
.fullpromo div.promoitemtext div.promoitem_title {
	font-weight: bold;
	font-size: 4.3em!important;
	line-height: .8em;
	text-align: left;
}
.fullpromo div.promoitemtext div.taglinetext {
	font-size: 14px;
	position: relative;
	text-align: left;
}


.fullpromo div.promoitemtext div.promoitem_subtitle {
	font-size: 13px;
	position: relative;
	padding-top: 3px;
	text-align: left;
}




.fullpromo div.promoitemtext.left div.promoitem_title {
	font-weight: bold;
	font-size: 2.5em!important;
	line-height: .8em;
	text-align: left;
}
.fullpromo div.promoitemtext.left div.taglinetext {
	font-size: 16px;
	position: relative;
	text-align: left;
}


.fullpromo div.promoitemtext.left div.promoitem_subtitle {
	font-size: 16px;
	position: relative;
	padding-top: 3px;
	text-align: left;
}






.modal div.detail-description {
	position: relative;
	padding: 12px 0 12px 45px;
	max-width: 45%;
	margin-top: 15px;
}



.modal div.detail-description.added {
	position: relative;
	padding: 12px 0 12px 45px;
	max-width: 45%;
	margin-top: 15px;
	font-size: 18px;
	margin-top: 0px;
}


.modal div.theitems {
	max-width: 55%;
	padding-left: 45px;
	z-index: 6;
	padding-right: 0;
}

.modal div.theitems.promoted__items .bgimage {
	background-size: cover;
	background-position: center center;
	border-radius:8px;
	height: 100px;

	border-style: none;
}


.modal .cart-service {
	max-width: 100%;
	margin: 15px auto 15px;
	display: block;
	position: relative;
	padding-right: 10%;
	padding-left: 10%;
}

.modal .cart-service.slim {
	padding-left: 50px;

}

.modal .sub-info-buttons {
	margin: 0 0 0 45px;
}


div.promobox.fullpromo div.promoitemtext div.taglinetext {
	font-size: 12px;
	position: relative;
}




.fullpromo div.image-container {
	display: block;
	z-index: 5;
}

div.detail-description {
	padding-left: 45px;
		padding-top: 15px;
	width: 45%;
		padding-bottom: 15px;
}


.fullpromo div.promocolor.green {
		background: linear-gradient(75deg, rgba(0, 0, 0, 0) 0%, rgb(48, 68, 0) 0%, #456302 22.6%, rgb(69, 99, 2) 49.5%, rgba(69, 99, 2, 0.92) 52.8%, rgba(69, 99, 2, 0.36) 59%, rgba(69, 99, 2, 0) 65.9%);
}
.fullpromo div.promocolor.teal {
		background: linear-gradient(75deg, rgba(0, 0, 0, 0) 0%, rgb(35, 144, 167) 0%, rgb(56, 188, 215) 22.6%, rgb(79, 194, 218) 49.5%, rgba(79, 194, 218, 0.92) 53%, rgba(79, 194, 218, 0.36) 59%, rgba(79, 194, 218, 0) 65.9%);

}

.fullpromo div.promocolor.orange {
	background: linear-gradient(75deg, rgba(0, 0, 0, 0) 0%, rgb(141, 42, 10) 0%, rgb(188, 61, 18) 22.6%, rgb(209, 67, 19) 51%, rgba(209, 67, 19) 53%, rgba(0, 0, 0, 0) 59%);

}
.fullpromo div.promocolor.red {
	background: linear-gradient(75deg, rgba(0, 0, 0, 0) 0%, rgb(143, 1, 31) 0%, rgb(184, 1, 40) 22.6%, rgb(215, 3, 48) 49.5%, rgba(214, 3, 47, 0.92) 53%, rgba(214, 3, 47, 0.36) 59%, rgba(213, 2, 46, 0) 65.9%);

}

.fullpromo div.promocolor.blue {
	background: linear-gradient(75deg, rgba(0, 0, 0, 0) 0%, rgb(0, 45, 56) 0%, rgb(0, 51, 63) 22.6%, rgb(0, 62, 77) 49.6%, rgba(0, 62, 77, 0.93) 52.3%, rgba(0, 62, 77, 0.55) 58.4%, rgba(0, 62, 77, 0) 64.5%);

}

.fullpromo div.promocolor.purple {
	background: linear-gradient(75deg, rgba(0, 0, 0, 0) 0%, rgb(84, 31, 75) 0%, rgb(93, 33, 83) 22.6%, rgb(123, 44, 108) 49.5%, rgba(123, 44, 108, 0.92) 53%, rgba(123, 44, 108, 0.36) 59%, rgba(123, 44, 108, 0) 65.9%);

}

.fullpromo div.promocolor.lime {
	background: linear-gradient(75deg, rgba(0, 0, 0, 0) 0%, rgb(116, 141, 69) 0%, rgb(129, 156, 77) 22.6%, rgb(157, 190, 95) 49.9%, rgba(157, 190, 95, 0.83) 53%, rgba(0, 0, 0, 0) 59.2%);

}

.fullpromo div.promocolor.pink {
	background: linear-gradient(75deg, rgba(0, 0, 0, 0) 0%, rgb(168, 36, 98) 0%, rgb(173, 40, 103) 22.6%, rgb(200, 58, 125) 49.5%, rgba(200, 58, 125, 0.92) 53%, rgba(200, 58, 125, 0.36) 59%, rgba(200, 58, 125, 0) 65.9%);

}

.fullpromo div.promocolor.yellow {
	background: linear-gradient(75deg, rgba(0, 0, 0, 0) 0%, rgb(185, 163, 13) 0%, rgb(206, 180, 9) 22.6%, rgb(241, 212, 20) 49.5%, rgba(241, 212, 20, 0.92) 53%, rgba(241, 212, 20, 0.36) 59%, rgba(241, 212, 20, 0) 65.9%);

}
.fullpromo div.promocolor.white {
	background: linear-gradient(75deg, rgba(0, 0, 0, 0) 0%, rgb(202, 202, 202) 0%, rgb(225, 225, 225) 22.6%, rgb(255, 255, 255) 49.5%, rgba(255, 255, 255, 0.92) 53%, rgba(255, 255, 255, 0.36) 59%, rgba(255, 255, 255, 0) 65.9%);

}
.fullpromo div.promoimage.white div.promocolor.white div.promoitemtext {
	color: #696969 !important;
}
.fullpromo div.promocolor.gold  {
	background: linear-gradient(75deg, rgba(0, 0, 0, 0) 0%, rgb(189, 145, 53) 0%, rgb(200, 157, 67) 22.6%, rgb(219, 177, 89) 49.5%, rgba(219, 177, 89, 0.92) 53%, rgba(219, 177, 89, 0.36) 59%, rgba(219, 177, 89, 0) 65.9%);

}
.fullpromo div.promocolor.brown  {
	background: linear-gradient(75deg, rgba(0, 0, 0, 0) 0%, rgb(47, 21, 13) 0%, rgb(73, 32, 20) 22.6%, rgb(89, 40, 26) 49.5%, rgba(88, 40, 26, 0.89) 53%, rgba(89, 40, 26, 0.36) 59%, rgba(89, 40, 26, 0) 65.9%);

}




}


/********** X-Large devices (large desktops, 1200px and up) **************/
/********** X-Large devices (large desktops, 1200px and up) **************/
/********** X-Large devices (large desktops, 1200px and up) **************/

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

	div.theitems {
		max-width: 40%;
	}


}

/* Promotional END ***************************************************** */



.modal div.detail-description.added {
	position: relative;
	padding: 12px 5px;
	max-width: 100%%;
	margin-top: 0px;
	font-size: 18px;
	text-align: center;
}

div.detail div.theitems.promoted__items {
	margin-top: 20px;
	width: 100% !important;
}
div.detail div.theitems.promoted__items .bgimage {
	width: 100px;
	background-size: cover;
	background-position: center center;
	border-radius:8px;
	height: 100px;
	margin: 8px 4px;
	border-style: none;
	}

div.detail div.detailexpansion div.theitems {
	width: 100%!important;
}

div.theitems.promoted__items.added div.theitems.promoted__items {
padding-left: 12px;
}

/* upsell cart ***************************************************** */

div.modal-body div.theitems.promoted__items.added span.item-price {
	color: #a8dbeb !important;
}

div.modal-body div.theitems.promoted__items .bgimage {
		width: 120px;
	background-size: cover;
	background-position: center center;
	border-radius:8px;
	height: 120px;
	margin: 0 4px !important;
	border-style: none;
}

div.modal-body div.menu-items {
	border-bottom-style: none;
	border: 1px solid rgba(233, 231, 231, 0.5);
	border-radius:10px;
	background-color: rgba(255, 255, 255, 0.16);
}
div.modal-body div.promofootertext .btn-addto-white {
	border: 1px solid rgba(255, 255, 255, 0.17) !important;
	border-radius: 30px;
	margin-left: 22px;
	font-size: 1.4rem;
	font-weight: 400;
	padding: 3px 3px 6px 2px;
	cursor:pointer;
	background-color: rgba(255, 255, 255, 0.70);
	margin-top: -3px;
}
div.modal-body div.promofootertext .btn-addto-white:hover {
	background-color: rgba(0, 0, 0, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.37) !important;
}


.ribbon {
  font-size: 16px;
  font-weight: bold;

}
.ribbon {
  --r: .8em; /* control the ribbon shape */

  padding-inline: calc(var(--r) + .3em);
  line-height: 1.8;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%, var(--r) 50%);
  background: #ffffff; /* the main color */
  width: fit-content;
}


.ribbon.green {
	color: rgb(69, 99, 2);
}

.ribbon.teal {
	color: rgb(79, 194, 218);
}

.ribbon.orange {
	color: rgb(209, 67, 19);
}

.ribbon.red {
	color: rgb(215, 3, 48);
}

.ribbon.blue {
	color: rgb(0, 62, 77);
}

.ribbon.purple{
	color: rgb(123, 45, 110);
}

.ribbon.lime {
	color: rgb(157, 190, 95);
}

.ribbon.pink{
	color: rgb(200, 58, 125);
}

.ribbon.yellow {
	color: rgb(241, 212, 2);
}

.ribbon.white{
	color: rgb(255, 255, 255);
}

.ribbon.gold {
	color: rgb(219, 177, 89);
}

.ribbon.brown {
	color: rgb(89, 40, 26);
}