@charset "utf-8";

/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; }

/* Make HTML 5 elements display block-level for consistent styling */
header, nav, article, footer, address { display: block; }

body { width: 100%; max-width: 100%; font-family: 'Roboto', sans-serif; background-color: var(--color-base); }
a { text-decoration: none; }

/* classes */
.cleaner { clear: both; }
.centered { text-align: center; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.middle { vertical-align: middle; }
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }
.row { clear: both; }
.onLeft { clear: left; float: left; }
.onRight { clear: right; float: right; }

.wrapper { margin: 0 auto; width: 1000px; height: 100%; position: relative; }

.hidden { display: none; }
.hide-field { height: 0px !important; overflow: hidden; }
.data { display: none; }
.dataHidden { display: none; }

.scroll-less { overflow: hidden; }

.vertical-aligner { display: flex; align-items: center; height: 100%; }
.vertical-aligner > div { margin: 0 auto; }

/**/
body[dev-mode="false"] .showOnDev { height: 0px !important; overflow: hidden !important; }

h2 { display: inline-block; min-height: 45px; margin: 0 auto; margin-bottom: 40px; padding: 6px 0px 0px 55px; color: var(--color-main); font-family: "Roboto"; font-size: 30px; font-weight: 400; text-align: left; background: url('') no-repeat 0px 0px transparent; }
h2 { color: var(--color-contrast-07); }
h3 { display: block; margin-bottom: 20px; color: var(--color-main); font-family: "Roboto"; font-size: 26px; font-weight: 400; line-height: 1em; text-align: center; }

.row { box-sizing: border-box; position: relative; width: 100%; height: 100%; margin: 0 auto; text-align: center; }
.row .container { position: relative; max-width: 990px; height: 100%; margin: 0 auto; }

#header { min-height: 100%; min-height: 100vh; padding: 54px 20px 56px 20px; color: var(--color-base); text-align: center; background: url('imgs/header_bg.jpg') no-repeat center center var(--color-main); background-size: cover; }
#header #logo { max-width: 100%; margin-bottom: 60px; }
#header #sello { position: absolute; top: -40px; right: -30px; cursor: pointer; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); transition: all 0.5s ease-out 0s; }
#header .boxed { display: block; width: 280px; margin-bottom: 10px; background: var(--color-contrast-05); }

#header .boxed { display: inline-block; width: auto; padding: 32px 40px; }
#header .boxed img { max-width: 100%; }
	@media only screen and ( max-width: 450px ) {
		#header .boxed { padding-left: 20px; padding-right: 20px; }
	}
	@media only screen and ( max-width: 400px ) {
		#header .boxed { width: calc(100% + 40px); margin-left: -20px; _padding-left: 30px; _padding-right: 30px; border-radius: 0px; }
	}

.boxed { box-sizing: border-box; display: inline-block; width: 49%; margin: 0 auto; margin-bottom: 3px; padding: 16px 20px 16px 20px; color: var(--color-base); text-align: center; background-color: var(--color-contrast-07); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; transition: all 0.5s ease-out 0s; }
.boxed h1 { padding-bottom: 12px; font-family: "Roboto"; font-size: 22px; font-weight: 400; line-height: 1em; }
.boxed p { font-size: 20px; font-weight: 300; line-height: 1.2em; }
/*
*/

#header .general-state { margin-top: -10px; }

.ver-descuentos a { padding: 8px 12px 8px 12px; color: var(--color-base); font-weight: 400; border: 1px solid var(--color-base); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; transition: all 0.5s ease-out 0s; }
.ver-descuentos a:hover { color: var(--color-contrast); background-color: var(--color-base); transition: all 0.5s ease-out 0s; }

/* zones */
.zonesWrapper { width: 100%; text-align: center; }
.zonesWrapper .zonesMap { box-sizing: border-box; display: inline-block; width: 49%; margin-bottom: 20px; padding-right: 20px; vertical-align: top; }
.zonesWrapper .zonesMap img { max-width: 100%; }
.zonesWrapper #zones { box-sizing: border-box; display: inline-block; width: 49%; }
.zonesWrapper #zones .zone { box-sizing: border-box; display: flex; align-items: center; position: relative; width: 100%; margin: 0 auto; margin-bottom: 20px; padding: 12px; color: var(--color-contrast-08); background: var(--color-base); overflow: hidden; text-align: left; z-index: 0; cursor: pointer; border-left: 8px solid var(--color-contrast-06); border-radius: 4px; transition: all 0.5s ease-out 0s; }
.zonesWrapper #zones .zone .zone-label { display: inline-block; width: 70px; height: 100%; font-size: 20px; font-weight: 500; line-height: 1.2em; text-align: center; }
.zonesWrapper #zones .zone .zone-info { display: inline-block; width: calc(100% - 90px); height: 100%; padding: 0px 0px 0px 20px; font-size: 14px; font-weight: 400; line-height: 1.2em; text-align: left; }
.zonesWrapper #zones .zone .zone-info p { margin: 0px 0px 4px 0px; }
.zonesWrapper #zones .zone .zone-info p:last-of-type { margin-bottom: 0px; }
.zonesWrapper #zones .zone .zone-info p .zone-info-minimun-required { display: block; margin: 0px 0px 4px 0px; }
.zonesWrapper #zones .zone .zone-info p .zone-info-delivery-charge { display: block; margin: 0px 0px 4px 0px; }
.zonesWrapper #zones .zone .zone-info p .zone-info-delivery-charge-note { font-size: 12px; opacity: 1; }
.zonesWrapper #zones .zone .zone-info p .zone-delimitation {  }
.zonesWrapper #zones .zone.selected { z-index: 1; cursor: default; }
.zonesWrapper #zones .zone:not(.selected) { background: var(--color-base) !important; }

.zonesWrapper #zones .zone:before { _content: attr(step); position: absolute; bottom: 10%; right: -20px; font-size: 210px; line-height: 50%; opacity: 0.1; }

/**/
.startArrow { width: 130px; height: 130px; margin: 0 auto; margin-top: 40px; background: url('imgs/arrow-down.png') no-repeat center 46px var(--color-base); cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; transition: all 0.5s ease-out 0s; }
.startArrow:hover { background-position: center 52px; transition: all 0.5s ease-out 0s; }
.startArrow { display: none; }
.startLabel { display: inline-block; margin-top: 55px; padding: 20px 36px; color: var(--color-base); font-family: "Roboto"; font-size: 24px; font-weight: 600; background: var(--color-contrast); border: 2px solid var(--color-base); border-radius: 1000px; cursor: pointer; }
.startLabel { padding: 14px 26px; color: var(--color-base); font-size: 20px; background: transparent; }

.plusBtWrapper { position: relative; width: 130px; height: 130px; margin: 0 auto; margin-top: 25px; vertical-align: top; }
.plusBtWrapper .plusBt { position: relative; top: 0px; width: 130px; height: 130px; margin: 0 auto; background: url('imgs/plus-bt.png') no-repeat center center var(--color-main); cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; transition: all 0.5s ease-out 0s; }
.plusBtWrapper .plusBt:not(.onlyText):hover { top: 10px; width: 110px; height: 110px; transition: all 0.3s ease-out 0s; }
.doneBtWrapper { position: relative; width: 130px; height: 130px; margin: 0 auto; margin-top: 25px; vertical-align: top; }
.doneBtWrapper .doneBt { position: relative; top: 0px; width: 130px; height: 130px; margin: 0 auto; background: url('imgs/done-bt.png') no-repeat center center var(--color-main); cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; transition: all 0.5s ease-out 0s; }
.doneBtWrapper .doneBt:not(.onlyText):hover { top: 10px; width: 110px; height: 110px; transition: all 0.3s ease-out 0s; }

	.onlyText { box-sizing: border-box; padding: 20px 10px; color: var(--color-base); font-size: 22px; font-weight: 600; line-height: 1em; background: none !important; }
	.onlyText span { display: block; font-weight: 300; }
		.onlyText > * { position: relative; }
	.onlyText:before { content: ''; display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: var(--color-contrast-06); border-radius: 1000px; z-index: 0; transition: all 0.3s ease-out 0s; }
	.onlyText:hover:before { transform: scale(1.2); }

.plusBtWrapper { display: inline-block; height: 180px; margin: 25px 10px 0px 10px; }
.doneBtWrapper { display: inline-block; height: 180px; margin: 25px 10px 0px 10px; }
.plusBtWrapper,
.doneBtWrapper { display: none; }
.plusBtWrapper.onlyTextWrapper,
.doneBtWrapper.onlyTextWrapper { display: inline-block; height: 130px; margin-bottom: 10px; }

.inBtLabel { display: block; position: absolute; bottom: 0px; height: 40px; overflow: hidden; color: var(--color-main); font-family: "Roboto"; font-size: 16px; font-weight: 500; line-height: 1.2em; }

.plusDone { box-sizing: border-box; width: 100%; max-width: 300px; min-height: 128px; margin: 0 auto; margin-top: 30px; padding: 20px 20px 20px 140px; color: var(--color-accent); font-family: "Roboto"; font-size: 20px; font-weight: 500; line-height: 1.2em; background: url('imgs/icon_delivery.png') no-repeat center left transparent; cursor: pointer; }
.plusDone.displaying { display: block; opacity: 1; transition: all 0.5s ease-out 0s; }
.plusDone img { float: left; max-width: 30%; }

.step { padding: 54px 6px 56px 6px; }
.step h2 { position: relative; }
.step h2:before { content: attr(step); display: inline-block; position: absolute; top: 0px; left: 0px; width: 45px; height: 45px; color: var(--color-base); font-family: Roboto; font-size: 35px; font-weight: 600; line-height: 45px; text-align: center; background: var(--color-main); border-radius: 1000px; }

#step-1 { background-color: var(--color-bg-step1); }
#step-2 { padding-bottom: 0px; background-color: var(--color-bg-step2); }
#step-3 { background-color: var(--color-bg-step3); }

/**/
#overlay { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: var(--color-contrast-03); z-index: -1; opacity: 0; transition: all 0.5s ease-out 0s; }
#overlay.enabled { z-index: 899; opacity: 1; transition: all 0.5s ease-out 0s; }
#overlay.heavy { background: var(--color-contrast-06); }

/**/
#step-2a { position: relative; box-sizing: border-box; width: 100%; height: 0px; min-height: 0px; margin-top: 0px; padding: 0px; background-color: var(--color-base); background-color: var(--color-bg-step2); z-index: 901; overflow: hidden; transition: all 0.5s ease-out 0s; }
#step-2a.opened { height: 200px; height: auto; min-height: 200px; margin-top: 30px; overflow: inherit; transition: all 0.5s ease-out 0s; }
#step-2a .arrow-up { position: relative; top: 0px; width: 100%; height: 57px; background: url('') no-repeat top center var(--color-contrast-03); opacity: 0; transition: all 0.5s ease-out 0s; }
#step-2a .arrow-up:before { content: ''; position: absolute; top: 0px; left: calc(50% - 57px); width: 0; height: 0; border-bottom: 57px solid var(--color-bg-step2); border-left: 57px solid transparent; border-right: 57px solid transparent; }
#step-2a.opened .arrow-up { opacity: 1; transition: all 0.5s ease-out 0s; }
#step-2a .container { height: auto; padding: 40px 4px 40px 4px; }

#step-2a .psp-type-selector { display: inline-block; width: 170px; height: 170px; margin: 1% 1% 1%; color: var(--color-base); font-family: 'Roboto'; font-size: 24px; font-weight: 600; line-height: 1em; text-align: center; background: var(--color-main); border-radius: 1000px; cursor: pointer; vertical-align: top; transition: all 0.5s ease-out 0s; }
#step-2a .psp-type-selector span { display: block; font-size: 14px; font-weight: 400; line-height: 1em; text-transform: capitalize; }
#step-2a .psp-type-selector img { max-width: 100%; transition: all 0.5s ease-out 0s; }
#step-2a .psp-type-selector:hover { opacity: 0.8; transition: all 0.5s ease-out 0s; }
#step-2a .psp-type-selector.disabled { opacity: 0.2; transition: all 0.5s ease-out 0s; }
#step-2a .psp-type-selector.disabled:hover { opacity: 0.6; transition: all 0.5s ease-out 0s; }
#step-2a .psp-type-selector.selected { opacity: 1; cursor: default; transition: all 0.5s ease-out 0s; }
#step-2a .psp-type-selector.selected:hover { opacity: 1; transition: all 0.5s ease-out 0s; }

.psp-type-process { display: none; padding: 20px 0px 20px 0px; }
.psp-type-process.active { display: block; }

.help-tip { display: inline-block; max-width: 420px; margin: 2px 4px 22px 4px; padding: 12px 14px 14px 14px; color: var(--color-contrast-04); font-family: "Open Sans"; font-size: 16px; font-weight: 400; line-height: 1.2em; text-align: center; background-color: var(--color-contrast-01); border: 1px solid var(--color-contrast-02); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; transition: all 0.5s ease-out 0s; }
	@media only screen and ( max-width: 600px ) {
		#step-2a .psp-type-selector { height: 140px; width: 140px; }
	}
	@media only screen and ( max-width: 500px ) {
		#step-2a .psp-type-selector { font-size: 20px; }
	}
	@media only screen and ( max-width: 460px ) {
		#step-2a .psp-type-selector { height: auto; width: 134px; margin: 0.5%; padding: 8px; border-radius: 4px; }
	}

/* productsTable */
#productsTable_wrapper { width: 600px; max-width: 100%; margin: 0 auto; }
.productsTable { clear: both; width: 600px; max-width: 100%; margin: 0 auto; margin-top: 30px; }
.productsTable .products-row { box-sizing: border-box; width: 100%; min-height: 40px; margin: 0px; padding: 8px; color: var(--color-table-row-text); font-size: 16px; font-weight: 400; line-height: 1.1em; text-align: left; background-color: var(--color-table-row); cursor: pointer; transition: all 0.5s ease-out 0s; }
.productsTable .products-row.even { background-color: var(--color-table-row-even); }

.productsTable.no-footer { border-color: var(--color-table-row-text) !important; }
.productsTable thead th { color: var(--color-table-row-text); border-color: var(--color-table-row-text); }
.productsTable thead .pt-title { padding-left: 10px; text-align: left; }
.productsTable thead .pt-price { text-align: right; }
.productsTable .products-row > .pt-title { box-sizing: border-box; padding: 10px; font-weight: 500; text-align: left; white-space: normal; }
.productsTable .products-row > .pt-price { box-sizing: border-box; width: 110px; padding: 10px; font-weight: 500; text-align: right; white-space: nowrap; }
.productsTable .products-row > .pt-price:before { content: "$"; margin-right: 2px; }

.productsTable .products-extradata { width: 100%; }
.productsTable .products-extradata td { padding: 0px; }
.productsTable .products-extradata .pt-image { width: 78px; vertical-align: top; }
.productsTable .products-extradata .pt-image .pt-image-wrapper { display: block; width: 78px; height: 78px; background: url('imgs/pt-image-bg.png') no-repeat center center transparent; background-size: cover; }
.productsTable .products-extradata .pt-image .pt-image-shadowboxGallery { display: none; }
.productsTable .products-extradata .pt-info { padding: 6px 6px 6px 16px; font-size: 14px; font-weight: 400; line-height: 1.2em; text-align: left; white-space: normal; vertical-align: top; }
.productsTable .products-extradata .pt-info .pt-id { display: none; margin-bottom: 4px; font-weight: 500; }
.productsTable .products-extradata .pt-info .pt-description { margin: 0px 0px 14px 0px; }
	.productsTable .products-extradata .pt-info .pt-description:empty { display: none; }
.productsTable .products-extradata .pt-info .pt-details {  }
.productsTable .products-extradata .pt-info .pt-description ul > li { list-style: none; position: relative; padding: 0px 0px 0px 14px; }
.productsTable .products-extradata .pt-info .pt-description ul > li:before, 
.productsTable .products-extradata .pt-info .pt-description ul > li:after { content: ''; display: block; position: absolute; top: 5px; left: 2px; width: 7px; height: 2px; background: var(--color-main); border-radius: 10px; transform: rotate(45deg); }
.productsTable .products-extradata .pt-info .pt-description ul > li:after { transform: rotate(-45deg); top: 8px; }

.productsTable .products-extradata tr.noImage .pt-image { display: none; width: 0px !important; }
.productsTable .products-extradata tr.noImage .pt-info { padding-left: 6px; }

.dataTables_wrapper .dataTables_filter label, 
.dataTables_wrapper .dataTables_filter input { color: var(--color-table-row-text); font-family: 'Roboto'; font-size: 16px; line-height: 1em; }
.dataTables_wrapper .dataTables_filter label { font-weight: 500; }
.dataTables_wrapper .dataTables_filter input { padding: 8px; }

.dataTables_wrapper .dataTables_length { text-align: left; }
.dataTables_wrapper .dataTables_length label, 
.dataTables_wrapper .dataTables_length select, 
.dataTables_wrapper .dataTables_length select option { color: var(--color-table-row-text); font-family: 'Roboto Condensed'; font-size: 16px; line-height: 1em; }
.dataTables_wrapper .dataTables_length label { font-weight: 500; }
.dataTables_wrapper .dataTables_length select { margin-right: 0.1em; padding: 8px 0px; text-align: right; }

.dataTables_wrapper .tools-top .dataTables_length { margin: 0px 0px 10px; }
.dataTables_wrapper .tools-bottom .dataTables_length { display: none; margin: 10px 0px 0px; }

.dataTables_wrapper .dataTables_paginate { float: none; margin-top: 40px; padding-top: 2px; font-weight: 500; text-align: center; }
.dataTables_wrapper .dataTables_paginate, 
.dataTables_wrapper .dataTables_paginate select, 
.dataTables_wrapper .dataTables_paginate select option { color: var(--color-table-row-text); font-family: 'Roboto Condensed'; font-size: 16px; line-height: 1em; }
.dataTables_wrapper .dataTables_paginate select { margin-right: 0.1em; padding: 8px 0px 8px 4px; text-align: right; }

#productsTable_info { color: #999999; font-size: 14px; line-height: 1em; font-style: italic; }

	@media only screen and ( max-width: 640px ) {
		body .dataTables_wrapper .tools-top .dataTables_length { display: none; }
		
		body .dataTables_wrapper .tools-bottom .dataTables_length { display: inline-block; float: left; max-width: 50%; }
		body .dataTables_wrapper .tools-bottom .dataTables_paginate { float: right; margin-top: 8px; }
	}
	@media only screen and ( max-width: 400px ) {
		body .dataTables_wrapper .dataTables_length { width: 150px; text-align: left; }
		body .dataTables_wrapper .dataTables_length select { float: left; margin-right: 0.3em; }
	}
	
/* #counter */
#counter { position: relative; box-sizing: border-box; width: 100%; margin: 6px 0px 0px; color: var(--color-table-row-text); text-align: left; background-color: transparent; transition: all 0.5s ease-out 0s; }
#counter > div { vertical-align: top; }
#counter .product-price { float: right; box-sizing: border-box; width: 96px; margin-left: 6px; padding-top: 1px; font-weight: 600; text-align: right; white-space: nowrap; }
#counter .product-price:before { content: "$"; margin-right: 2px; }
#counter .product-counter { box-sizing: border-box; display: inline-block; position: relative; width: 78px; height: 28px; margin: 0px 12px 0px 0px; padding: 0px 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; transition: all 0.5s ease-out 0s; }
#counter .product-counter .product-counter-quantity { box-sizing: border-box; float: left; width: 30px; height: 20px; color: var(--color-main); color: var(--color-table-row-text); font-size: 16px; font-weight: 600; line-height: 1.4em; text-align: center; }
#counter .product-counter .product-counter-increase, 
#counter .product-counter .product-counter-decrease { box-sizing: border-box; float: left; width: 22px; height: 22px; color: var(--color-table-row-text); font-size: 18px; font-weight: 600; line-height: 1em; text-align: center; background-color: var(--color-base); cursor: pointer; border: 2px solid var(--color-contrast-02); border-radius: 50px; transition: all 0.3s ease-out 0s; }
#counter .product-counter .product-counter-increase, 
#counter .product-counter .product-counter-decrease { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; }
#counter .product-counter .product-counter-increase:not(.disabled):hover, 
#counter .product-counter .product-counter-decrease:not(.disabled):hover { background: var(--color-contrast-01); }
#counter .product-counter .product-counter-increase.disabled, 
#counter .product-counter .product-counter-decrease.disabled { cursor: default; opacity: 0.2; transition: all 0.5s ease-out 0s; }
#counter #psp-bt-add_floating { position: absolute; top: 4px; right: -36px; box-sizing: border-box; width: 32px; height: 32px; color: var(--color-base); font-size: 28px; text-align: center; background-color: var(--color-main); cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: url('imgs/cart_icon-cart.png') no-repeat center center var(--color-main); background-size: cover; }
#counter #psp-bt-add_floating.light { background-image: url('imgs/cart_icon-cart_light.png'); background-color: transparent; }
#counter .psp-bt-wrapper { box-sizing: border-box; display: inline-block; }
#counter .psp-bt-wrapper .psp-bt { box-sizing: border-box; display: inline-block; position: relative; margin: 0px 0px 2px; padding: 1px 6px; color: var(--color-table-row-text); font-size: 14px; font-weight: 400; text-align: left; white-space: nowrap; background-color: transparent; border: 2px solid var(--color-contrast-02); border-radius: 100px; cursor: pointer; overflow: hidden; transition: all 0.3s ease-out 0s; }
	#counter .psp-bt-wrapper .psp-bt:last-of-type { margin-bottom: 0px; }
#counter .psp-bt-wrapper .psp-bt.disabled { opacity: 0.4; cursor: default; }
	
#counter .psp-bt-wrapper .psp-bt.psp-bt-add {  }
#counter .psp-bt-wrapper .psp-bt.psp-bt-add:not(.disabled):hover { background: var(--color-contrast-01); }

#counter .psp-bt-wrapper .psp-bt.psp-bt-cancel { top: -2px; transition: all 0.3s ease-out 0s; }
#counter .psp-bt-wrapper .psp-bt.psp-bt-cancel .icon { display: inline-block; position: relative; left: -4px; width: 15px; height: 15px; margin: 0px 0px -3px 0px; background: var(--color-ready-ko); border-radius: 50%; transition: all 0.3s ease-out 0s; }
#counter .psp-bt-wrapper .psp-bt.psp-bt-cancel .icon:before { content: ''; position: absolute; top: 6px; left: 2px; width: 11px; height: 3px; background: var(--color-base); border-radius: 1000px; transform: rotate(45deg); transition: all 0.3s ease-out 0s; }
#counter .psp-bt-wrapper .psp-bt.psp-bt-cancel .icon:after { content: ''; position: absolute; top: 6px; left: 2px; width: 11px; height: 3px; background: var(--color-base); border-radius: 1000px; transform: rotate(-45deg); transition: all 0.3s ease-out 0s; }
	@media only screen and ( max-width: 400px ) {
		#counter .psp-bt-wrapper .psp-bt.psp-bt-cancel { width: 23px; transition: all 0.3s ease-out 0s; }
		#counter .psp-bt-wrapper .psp-bt.psp-bt-cancel:not(.disabled) .icon:hover { transform: scale(1.1); }
	}

/*  */
#step-2a .bt { box-sizing: border-box; display: inline-block; width: 180px; margin: 30px 2px 0px 2px; padding: 14px 28px 20px 28px; color: var(--color-base); font-family: "Open Sans"; font-size: 30px; font-weight: 400; line-height: 1em; text-align: center; background-color: var(--color-main); cursor: pointer; -webkit-border-radius: 4px; border-radius: 4px; transition: all 0.5s ease-out 0s; }
#step-2a .bt:not(.disabled):hover { opacity: 0.8; transition: all 0.5s ease-out 0s; }
#step-2a .bt.disabled { cursor: default; opacity: 0.1; transition: all 0.5s ease-out 0s; }

#step-2a .bt.bt-add { display: none; }
#step-2a .bt.bt-cancel { color: var(--color-base); background: #666; }

	@media only screen and ( max-width: 400px ) {
		#step-2a .bt { width: calc(50% - 12px); margin-left: 2px; margin-right: 2px; padding: 24px 6px 30px 6px; }
	}

#step-2b { padding-top: 20px; }
#step-2b { padding-top: 20px; }

#step-2b .bt { box-sizing: border-box; display: inline-block; margin: 10px 2px 0px 2px; padding: 14px 28px 20px 28px; color: var(--color-base); font-family: "Open Sans"; font-size: 24px; font-weight: 400; line-height: 1em; text-align: center; background-color: var(--color-main); cursor: pointer; -webkit-border-radius: 4px; border-radius: 4px; transition: all 0.5s ease-out 0s; }
#step-2b .bt:not(.disabled):hover { opacity: 0.8; transition: all 0.5s ease-out 0s; }
#step-2b .bt.disabled { cursor: default; opacity: 0.1; transition: all 0.5s ease-out 0s; }

.ticket { box-sizing: border-box; position: fixed; top: 40px; left: calc(50% - 140px); width: 300px; padding: 14px; text-align: center; background-color: var(--color-base-09); z-index: 900; }
.ticket h2 { margin: 0px; padding: 10px 0px 0px 0px; text-align: center; }
.ticket .ticket-number { margin: 20px -12px 14px -12px; padding: 14px 0px 14px 0px; color: var(--color-base); font-family: "Roboto"; font-size: 22px; font-weight: 300; letter-spacing: -1px; background: var(--color-contrast-08); }
.ticket .command { text-decoration: none; cursor: pointer; }

/**/
#dc-modal { box-sizing: border-box; position: fixed; top: calc(50% - 200px); top: -110%; left: calc(50% - 200px); width: 400px; height: 400px; max-width: 100%; max-height: 100%; padding: 40px 20px 40px 20px; text-align: center; background: var(--color-base); opacity: 0; z-index: 901; overflow: hidden; transition: all 0.5s ease-out 0s; }
#dc-modal { background-color: var(--color-bg-modal); }
	#dc-modal.opened { top: calc(50% - 200px); opacity: 1; overflow: inherit; transition: all 0.3s ease-out 0s; }
	#dc-modal .closer { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; background: url('imgs/plus-bt_000.png') no-repeat center center transparent; background-size: 100%; transform: rotate(-45deg); cursor: pointer; transition: all 0.3s ease-out 0s; }
	#dc-modal .closer:hover { transform: rotate(135deg); transition: all 0.3s ease-out 0s; }

#dc-modal h2 { min-height: auto; margin: 0px; padding: 0px 0px 24px 0px; }
#dc-modal p { margin-bottom: 16px; color: var(--color-main); font-size: 17px; font-weight: 300; line-height: 1.2em; }
#dc-modal .field { margin-bottom: 24px; }
#dc-modal .field input { max-width: 280px; font-weight: 400; text-align: center; }
#dc-modal .field input { font-size: 25px; }
#dc-modal #dc_validation { box-sizing: border-box; width: 100%; height: 76px; text-align: center; transition: all 0.3s ease-out 0s; }
#dc-modal #dc_validation.voucher { padding: 6px 2px 0px 2px; border: 1px dashed var(--color-main); transition: all 0.3s ease-out 0s; }
#dc-modal #dc_validation p { margin-bottom: 6px; font-size: 14px; font-weight: 400; }
#dc-modal #dc_validation p .big { font-size: 16px; font-weight: 500; }
#dc-modal #dc_validation p.error { color: #FF3333; font-weight: 500; }

#dc-modal .bt { box-sizing: border-box; display: inline-block; width: 130px; margin: 24px 2px 0px 2px; padding: 14px 6px 18px 6px; color: var(--color-base); font-family: "Open Sans"; font-size: 24px; font-weight: 400; line-height: 1em; text-align: center; background-color: var(--color-main); cursor: pointer; -webkit-border-radius: 4px; border-radius: 4px; transition: all 0.5s ease-out 0s; }
#dc-modal .bt:not(.disabled):hover { opacity: 0.8; transition: all 0.5s ease-out 0s; }
#dc-modal .bt.disabled { cursor: default; opacity: 0.1; transition: all 0.5s ease-out 0s; }

#dc-modal .bt.bt-start { font-size: 24px; background: #205BBD; }
#dc-modal .bt.bt-validate { width: auto; margin-top: 0px; padding-left: 20px; padding-right: 20px; }
#dc-modal .bt.bt-cancel { color: var(--color-base); background: #666; }

	@media only screen and ( max-width: 460px ) {
		#dc-modal { left: 0px; width: 100%; height: 100%; }
		#dc-modal.opened { top: 0px; }
	}

#dc { margin-top: 20px; }
#dc #dc_current { box-sizing: border-box; display: inline-block; position: relative; margin: 0px 0px 0px 0px; padding: 20px 20px 20px 20px; border: 1px dashed var(--color-main); -webkit-border-radius: 4px; border-radius: 4px; transition: all 0.5s ease-out 0s; }
#dc #dc_current:empty { display: none; }
#dc #dc_current h2 { min-height: auto; margin: 0px; padding: 0px 0px 12px 0px; }
#dc #dc_current .code { box-sizing: border-box; display: inline-block; position: relative; margin: 6px 0px 12px 0px; padding: 14px 20px 18px 20px; color: var(--color-base); font-family: "Open Sans"; font-size: 24px; font-weight: 400; line-height: 1em; text-align: center; background-color: var(--color-main); background: var(--color-main-08); -webkit-border-radius: 4px; border-radius: 4px; transition: all 0.5s ease-out 0s; }
#dc #dc_current p { margin: 0px 0px 10px 0px; }
#dc #dc_current .notes { max-width: 400px; margin: 0 auto; color: #777; font-size: 13px; font-weight: 400; line-height: 1em; text-align: center; }
#dc .bt-remove { position: absolute; top: 12px; right: -36px; width: 30px; height: 30px; background: url('imgs/plus-bt_000.png') no-repeat center center transparent; background-size: 100%; transform: rotate(-45deg); cursor: pointer; transition: all 0.3s ease-out 0s; }
#dc .bt-remove:hover { transform: rotate(135deg); transition: all 0.3s ease-out 0s; }

/* cart */
.cartWrapper { max-width: 700px; margin: 0 auto; margin-top: 30px; }

.cartWrapper .cart_row { box-sizing: border-box; width: 100%; min-height: 50px; margin-bottom: 2px; padding: 10px 8px 10px 8px; color: var(--color-table-row-text); font-size: 20px; font-weight: 600; line-height: 1.4em; text-align: left; background-color: var(--color-table-row); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.cartWrapper .cart_row:nth-of-type(2n) { background-color: var(--color-table-row-even); }
.artWrapper .cart_row > div:not(.splitter) { display: inline-block; vertical-align: top; }
.cartWrapper .cart_row div { vertical-align: top; }

.cartWrapper .cart_row .data_concept { display: inline-block; box-sizing: border-box; width: calc(100% - 154px); padding: 0px 4px 0px 4px; }
.cartWrapper .cart_row .data_price { display: inline-block; box-sizing: border-box; width: 110px; padding-left: 0px; text-align: right; white-space: nowrap; }
	.cartWrapper .cart_row .data_price:before { content: "$"; margin-right: 2px; }
.cartWrapper .cart_row .data_options { display: inline-block; box-sizing: border-box; width: 32px; text-align: center; white-space: nowrap; }
	.cartWrapper .cart_row .data_options .data_option_remove { display: block; width: 16px; height: 16px; margin: 0 auto; margin-top: 6px; background: url('imgs/cart_icon-remove.png') no-repeat center center; cursor: pointer; }
	.cartWrapper .cart_row .data_options .data_option_remove:hover { background-image: url('imgs/cart_icon-remove-hover.png'); }

.cartWrapper .data_concept .data_product { display: inline-block; box-sizing: border-box; idth: 118px; padding: 0px 8px 0px 42px; text-align: left; white-space: nowrap; background: url('') no-repeat 0px -1px transparent; vertical-align: top; }
.cartWrapper .data_concept .data_product { padding-left: 0px; }
.cartWrapper .data_concept .data_title { display: inline-block; box-sizing: border-box; idth: calc(100% - 190px); font-size: 20px; font-weight: 500; line-height: 1.4em; text-align: left; vertical-align: top; transition: all 0.5s ease-out 0s; }
.cartWrapper .data_concept .data_details, 
.cartWrapper .data_concept .data_description { display: inline-block; box-sizing: border-box; width: calc(100% - 190px); width: 100%; padding-top: 4px; font-size: 14px; font-weight: 500; line-height: 1.5em; text-align: left; vertical-align: top; transition: all 0.5s ease-out 0s; }

.cartWrapper .cart_row.cart_empty div { padding-top: 4px; font-size: 14px; font-weight: 400; }

.cartWrapper .cart_row.cart_subtotal .cart_discounter {  }
.cartWrapper .cart_row.cart_subtotal .cart_discounter.disabled { display: none; opacity: 0.2; }
.cartWrapper .cart_row.cart_subtotal .cart_discounter .cart_subtotal-discount-origin { display: inline-block; position: relative; top: -2px; margin-left: 8px; font-size: 16px; opacity: 0.6; white-space: nowrap; }

.cartWrapper .cart_row.cart_subtotal { color: var(--color-base); line-height: 1.1em; background-color: var(--color-table-subtotal) !important; }
	.cartWrapper .cart_row.cart_subtotal .data_concept { font-weight: 300; text-align: right; }
	.cartWrapper .cart_row.cart_subtotal .splitter { display: block; width: 100%; height: 6px; background-color: transparent; }
	.cartWrapper .cart_row.cart_subtotal > div { opacity: 0.9; }
.cartWrapper .cart_row.cart_total { color: var(--color-base); background-color: var(--color-table-total) !important; }
	.cartWrapper .cart_row.total .data_concept { text-align: right; }
	.cartWrapper .cart_row.total .splitter { display: block; width: 100%; height: 6px; background-color: transparent; }
.minimunPriceRequired { font-weight: 400; opacity: 0.5 !important; }

/* .readyTo */
.readyTo { position: relative; top: -5px; width: 32px; height: 28px; margin-bottom: -5px; background: url('imgs/readyToDeliver-not.png') no-repeat center 6px transparent; }
.readyTo.readyToDeliver { background: url('imgs/readyToDeliver.png') no-repeat center center transparent; }

.readyTo { box-shadow: 2px 2px 6px var(--color-base); }
.readyTo { position: relative; left: 3px; width: 28px; height: 28px; background: var(--color-ready-ko); background-image: none !important; border-radius: 50%; transition: all 0.3s ease-out 0s; }
.readyTo:before { _content: ''; display: block; position: absolute; left: -5px; top: -5px; width: 38px; height: 38px; background: transparent; border-radius: 1000px; border: 2px solid transparent; border: 2px solid transparent; border-left: 2px solid #FE4D53; border-right: 2px solid #FE4D53; transform: rotate(-45deg); transition: all 0.3s ease-out 0s;}
.readyTo > div { position: relative; width: 28px; height: 28px; background: var(--color-ready-ko); border: 2px solid var(--color-ready-ko); border-radius: 50%; transition: all 0.3s ease-out 0s; }
.readyTo > div:before { content: ''; position: absolute; top: 12px; left: 6px; width: 17px; height: 3px; background: var(--color-base); border-radius: 1000px; transform: rotate(45deg); transition: all 0.3s ease-out 0s; }
.readyTo > div:after { content: ''; position: absolute; top: 12px; left: 6px; width: 17px; height: 3px; background: var(--color-base); border-radius: 1000px; transform: rotate(-45deg); transition: all 0.3s ease-out 0s; }
.readyTo.readyToDeliver > div:before { top: 14px; left: 4px; width: 10px; transition: all 0.3s ease-out 0s; }
.readyTo.readyToDeliver > div:before { left: 3px; width: 11px; }
.readyTo.readyToDeliver > div:after { left: 8px; transform: rotate(-50deg); transition: all 0.3s ease-out 0s; }

.readyTo { background: transparent; }
.readyTo:before { border-left-color: var(--color-ready-ko); border-right-color: var(--color-ready-ko); }
.readyTo > div { background: var(--color-base); }
.readyTo > div:before, 
.readyTo > div:after { background: var(--color-ready-ko); }

.readyTo.readyToDeliver { background: transparent; }
.readyTo.readyToDeliver:before { border-left-color: var(--color-ready-ok); border-right-color: var(--color-ready-ok); transform: rotate(45deg); }
.readyTo.readyToDeliver > div { border-color: var(--color-ready-ok); }
.readyTo.readyToDeliver > div:before, 
.readyTo.readyToDeliver > div:after { background: var(--color-ready-ok); }

#cartMirror { margin-top: 0px; margin-bottom: 30px; }

.highlighted { color: var(--color-main) !important; transition: all 0.5s ease-out 0s; }

/* step3 */
.formWrapper { width: 580px; max-width: 100%; margin: 0 auto; }
.field { box-sizing: border-box; display: block; position: relative; width: 100%; eight: 50px; padding: 0px; margin-bottom: 4px; }
.field input { box-sizing: border-box; width: 100%; height: 50px; padding: 0px 12px 0px 12px; color: #666; font-family: "Open Sans"; font-size: 30px; font-weight: 300; line-height: 1em; text-align: left; border: 0px; -webkit-border-radius: 3px; border-radius: 3px; }
.field textarea { box-sizing: border-box; width: 100%; height: 200px; padding: 10px 12px 0px 12px; color: #666; font-family: "Open Sans"; font-size: 30px; font-weight: 300; line-height: 1em; text-align: left; border: 0px; -webkit-border-radius: 3px; border-radius: 3px; }
.error-msg  {display: none; }
.field .invalid + .error-msg { display: block; position: absolute; bottom: 1px; right: 1px; padding: 4px 8px; font-size: 12px; color: #333; background-color: var(--color-error-02); z-index: 1; -webkit-border-radius: 3px; border-radius: 3px; transition: all 0.5s ease-out 0s; }
#rdp-date + .error-msg, 
#rdp-time + .error-msg { right: 52px; }

.field-wrapper_number { display: inline-block; width: calc(100% - 228px); }
.field-wrapper_floor { display: inline-block; width: 110px; }
.field-wrapper_department { display: inline-block; width: 110px; }

/*
#rdp-delivery-detail { visibility: hidden; height: 0px; }
*/

/**/
.bt-payment-wrapper { display: flex; align-items: stretch; align-content: center; margin-bottom: 4px; }
.bt-payment { box-sizing: border-box; display: flex; width: 50%; margin: 0 auto; padding: 18px 14px 22px 14px; color: #999; font-family: "Open Sans"; font-size: 30px; font-weight: 400; line-height: 1em; text-align: center; background-color: #ccc; cursor: pointer; transition: all 0.3s ease-out 0s; }
	.bt-payment.active { color: #fff; background-color: var(--color-contrast-06); cursor: default; }
	.bt-payment:first-of-type { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
	.bt-payment:last-of-type { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.bt-payment .bt-payment-text { display: block; width: 100%; align-self: center; text-align: center; }
.bt-payment .bt-payment-text span { display: block; padding: 5px 0px 0px 0px; font-size: 14px; font-weight: 400; line-height: 1.1em; }
@media only screen and ( max-width: 400px ) {
	.bt-payment-wrapper { flex-direction: column; }
		.bt-payment { width: 100%; margin-bottom: 0px; }
		.bt-payment:first-of-type { border-radius: 0px; border-top-left-radius: 4px; border-top-right-radius: 4px; }
		.bt-payment:last-of-type { border-radius: 0px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
}

/**/
.general-state { margin-top: 0px; padding-bottom: 30px; }
.general-state p { margin: 0px 0px 6px 0px; color: var(--color-base); font-family: Roboto; font-size: 18px; font-weight: 400; line-height: 1.3em; text-align: center; }
.general-state p.title { font-size: 20px; font-weight: 600; line-height: 1em; }
.general-state .states_wrapper { display: flex; max-width: 320px; margin: 0 auto; margin-top: 24px; }
.general-state .states_wrapper .general-state_step { position: relative; min-width: 92px; color: var(--color-base); font-family: 'Roboto'; font-size: 14px; font-weight: 500; line-height: 1.3em; }
.general-state .states_wrapper .general-state_step_ { min-width: 86px; font-size: 13px; }
.general-state .states_wrapper .general-state_step .step-order { display: inline-block; width: 45px; height: 45px; margin: 0px 0px 16px 0px; color: var(--color-contrast); font-family: Roboto; font-size: 28px; font-weight: 600; line-height: 45px; text-align: center; background: var(--color-base); border-radius: 1000px; }
.general-state .states_wrapper .general-state_step .step-label { white-space: nowrap; }
.general-state .states_wrapper .general-state_step-connector { position: relative; width: 18px; height: 45px; min-width: 9px; color: var(--color-base); font-family: Roboto; font-size: 35px; font-weight: 600; line-height: 45px; text-align: center; background: transparent; }
	.general-state .states_wrapper .general-state_step-connector:before, 
	.general-state .states_wrapper .general-state_step-connector:after { content: ''; display: block; position: absolute; top: 18px; left: 3px; width: 13px; height: 3px; background: var(--color-base); background: var(--color-base); border-radius: 10px; transform: rotate(45deg); }
	.general-state .states_wrapper .general-state_step-connector:after { transform: rotate(-45deg); top: 25px; }
	@media only screen and ( max-width: 340px ) {
		.general-state .states_wrapper { margin-left: -7px; }
	}
.general-state .general-state_step .state-ok { display: none; position: absolute; top: 30px; right: 15px; transform: scale(0.8); }
.general-state .general-state_step.data-ready .state-ok { display: inline-block; }

/**/
.formWrapper .bt { box-sizing: border-box; width: 100%; margin: 0 auto; padding: 28px 14px 32px 14px; color: var(--color-base); font-family: "Open Sans"; font-size: 30px; font-weight: 400; line-height: 1em; text-align: center; background-color: var(--color-contrast-08); cursor: pointer; -webkit-border-radius: 4px; border-radius: 4px; transition: all 0.5s ease-out 0s; }
.formWrapper .bt.disabled { cursor: default; opacity: 0.3; transition: all 0.5s ease-out 0s; }

.formWrapper .select2-container { box-sizing: border-box; width: 100%; -webkit-border-radius: 3px; border-radius: 3px; }
.formWrapper .select2-container.select2-container-active.select2-dropdown-open {  }
.formWrapper .select2-container .select2-choice { box-sizing: border-box; height: 50px; padding: 10px 12px 0px 12px; color: #666; font-family: "Open Sans"; font-size: 30px; font-weight: 300; line-height: 1em; text-align: left; background: var(--color-base); border: 0px !important; -webkit-border-radius: 3px; border-radius: 3px; box-shadow: none; }
.formWrapper .select2-container .select2-choice .select2-chosen { height: 38px; }
.formWrapper .select2-container .select2-choice .select2-arrow { width: 50px; background: #999; }
.formWrapper .select2-container .select2-choice .select2-arrow b { background: url('imgs/arrow-select.png') no-repeat center center transparent; }

.select2-dropdown-open.select2-drop-above .select2-choice, 
.select2-dropdown-open.select2-drop-above .select2-choices { background: var(--color-base) !important; }
.select2-drop.select2-drop-above { box-shadow: none !important; }

.select2-drop.select2-display-none.select2-drop-active.date-dropdown { border: 0px; }
.select2-drop.select2-display-none.select2-drop-active.time-dropdown { border: 0px; }
.select2-results { font-size: 22px; font-weight: 300; line-height: 1em; }
.select2-drop.select2-display-none.select2-drop-active.time-dropdown .select2-results .select2-disabled { background-color: var(--color-base); opacity: 0.2; }
.select2-drop.select2-display-none.select2-drop-active.time-dropdown .select2-results .select2-disabled .select2-result-label { text-decoration: line-through; cursor: default; }

.date-in-list_narrow, .date-in-list_normal { display: none; }
.date-in-list_wide { display: block; }
.time-in-list_narrow, .time-in-list_normal { display: none; }
.time-in-list_wide { display: block; }

/**/
form#checkout { width: 0px; height: 0px; visibility: hidden; overflow: hidden; }
body:not([dev-mode="true"]) form#checkout { display: block; width: 600px; max-width: 100%; margin: 0 auto; }
body:not([dev-mode="true"]) form#checkout label { display: block; width: 100%; }
body:not([dev-mode="true"]) form#checkout input { width: 100%; margin: 0px 0px 10px 0px; }

/* #footer */
#footer { padding: 26px 20px 22px 20px; color: var(--color-base); font-family: 'Open Sans Condensed'; font-size: 16px; font-weight: 400; line-height: 1em; background-color: var(--color-main); }
	#footer a { color: var(--color-base); }
	#footer a:hover { text-decoration: underline; }
#footer .cols { box-sizing: border-box; display: inline-block; width: 33%; min-width: 280px; margin: 0 auto; padding: 24px 0px 6px 0px; }
#footer .cols span { display: block; font-size: 30px; font-weight: 600; line-height: 1.5em; }

#footer { font-family: Roboto; font-size: 14px; font-weight: 300; line-height: 1.4em; }

#bottom-bar { padding: 16px 0px 19px 0px; }
#bottom-bar img { position: relative; top: 0px; transition: all 0.5s ease-out 0s; }
#bottom-bar img:hover { transition: all 0.5s ease-out 0s; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }

/**/
.product-module { position: relative; margin: 0px 0px 10px 0px; }
.product-module:last-of-type { margin-bottom: 10px; }
	.product-module:after { content: ''; display: block; position: absolute; top: 0px; right: -5px; width: 3px; height: 100%; background: transparent; }
	body[dev-mode="true"] .product-module[data-valid="false"]:after { background: var(--color-ready-ko); }
	body[dev-mode="true"] .product-module[data-valid="true"]:after { background: var(--color-ready-ok); }
	
.product-module .product-module-title { margin: 0px 0px 6px 0px; padding: 0px 0px 0px 4px; font-size: 15px; font-weight: 500; line-height: 1em; }

.product-module .product-module-details { display: none; }
body[dev-mode="true"] .product-module .product-module-details { display: block; }

/**/
body[dev-mode="true"]:before { content: 'dev-mode'; box-sizing: border-box; display: block; position: fixed; top: -20px; left: -74px; width: 200px; height: 100px; padding-top: 76px; color: #fff; font-size: 16px; font-weight: 800; text-align: center; background: red; transform: rotate(-45deg); z-index: 999; }

/*
*/
.checkbox-wrapper .checkbox { display: inline-block; position: relative; margin: 2px; padding: 4px 8px 4px 28px; border: 1px solid #ddd; border-radius: 4px; opacity: 0.6; transition: all 0.3s ease-out 0s; }
	.checkbox-wrapper .checkbox:not(.disabled) { cursor: pointer; }
.checkbox-wrapper .checkbox.disabled { opacity: 0.4; }
.checkbox-wrapper .checkbox.checked { opacity: 1; }

.checkbox-wrapper .checkbox:before { content: ''; position: absolute; top: 13px; left: 6px; width: 8px; height: 3px; background: var(--color-contrast-06); border-radius: 1000px; transform: rotate(45deg); transition: all 0.3s ease-out 0s; }
.checkbox-wrapper .checkbox:after { content: ''; position: absolute; top: 11px; left: 9px; width: 14px; height: 3px; background: var(--color-contrast-06); border-radius: 1000px; transform: rotate(-50deg); transition: all 0.3s ease-out 0s; }
	.checkbox-wrapper .checkbox.checked:before, 
	.checkbox-wrapper .checkbox.checked:after { background: var(--color-contrast-08); }

/*
*/
.checkbox-wrapper.color .checkbox { display: inline-block; position: relative; margin: 2px; padding: 4px 8px 4px 28px; border: 1px solid #ddd; border-radius: 4px; opacity: 1; }

.checkbox-wrapper.color .checkbox:before { content: ''; position: absolute; top: 11px; left: 6px; width: 14px; height: 3px; background: var(--color-ready-ko); border-radius: 1000px; transform: rotate(45deg); transition: all 0.3s ease-out 0s; }
.checkbox-wrapper.color .checkbox:after { content: ''; position: absolute; top: 11px; left: 6px; width: 14px; height: 3px; background: var(--color-ready-ko); border-radius: 1000px; transform: rotate(-45deg); transition: all 0.3s ease-out 0s; }
	.checkbox-wrapper.color .checkbox.checked:before { top: 13px; left: 6px; width: 8px; }
	.checkbox-wrapper.color .checkbox.checked:after { left: 9px; transform: rotate(-50deg); transition: all 0.3s ease-out 0s; }
	.checkbox-wrapper.color .checkbox.checked:before, 
	.checkbox-wrapper.color .checkbox.checked:after { background: var(--color-ready-ok); }

/**/
.checkbox-wrapper.fullcolor .checkbox{ display: inline-block; position: relative; margin: 2px; padding: 4px 8px 4px 28px; color: var(--color-base); background: var(--color-ready-ko); border: 0px; border-radius: 4px; opacity: 1; }

.checkbox-wrapper.fullcolor .checkbox:before { content: ''; position: absolute; top: 11px; left: 6px; width: 14px; height: 3px; background: var(--color-base); border-radius: 1000px; transform: rotate(45deg); transition: all 0.3s ease-out 0s; }
.checkbox-wrapper.fullcolor .checkbox:after { content: ''; position: absolute; top: 11px; left: 6px; width: 14px; height: 3px; background: var(--color-base); border-radius: 1000px; transform: rotate(-45deg); transition: all 0.3s ease-out 0s; }
	.checkbox-wrapper.fullcolor .checkbox.checked { background: var(--color-ready-ok); }
	.checkbox-wrapper.fullcolor .checkbox.checked:before { top: 13px; left: 6px; width: 8px; }
	.checkbox-wrapper.fullcolor .checkbox.checked:after { left: 9px; transform: rotate(-50deg); transition: all 0.3s ease-out 0s; }
	.checkbox-wrapper.fullcolor .checkbox.checked:before, 
	.checkbox-wrapper.fullcolor .checkbox.checked:after { background: var(--color-base); }

/**/
.usersList { max-width: 400px; margin: 0 auto; margin-top: -20px; margin-bottom: 12px; }
.usersList .usersList_header { margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.usersList .usersList_users { }
.usersList .usersList_users .usersList_user { display: block; position: relative; margin: 0px 0px 4px; color: var(--color-contrast-06); font-size: 14px; font-weight: 500; line-height: 1em; text-align: left; background: var(--color-base-04); border-radius: 100px; cursor: pointer; transition: all 0.3s ease-out 0s; }
	.usersList .usersList_users .usersList_user:hover { color: var(--color-contrast-08); background: var(--color-base-06); }
.usersList .usersList_users .usersList_user [rel="email"] { padding: 2px 0px 0px; font-size: 12px; font-weight: 400; line-height: 1em; }

.usersList .usersList_users .usersList_user .usersList_user_data { box-sizing: border-box; display: inline-block; width: calc(100% - 44px); padding: 12px 12px 12px 24px; }
.usersList .usersList_users .usersList_user .usersList_user_remove { position: absolute; top: calc(50% - 16px); right: 10px; width: 32px; height: 32px; opacity: 0.6; transition: all 0.3s ease-out 0s; }
	.usersList .usersList_users .usersList_user .usersList_user_remove:hover { transform: scale(1.2); }
	.usersList .usersList_users .usersList_user .usersList_user_remove:before, 
	.usersList .usersList_users .usersList_user .usersList_user_remove:after { content: ''; display: block; position: absolute; top: 14px; left: 7px; width: 60%; height: 3px; background: var(--color-contrast); border-radius: 1px; cursor: pointer; }
	.usersList .usersList_users .usersList_user .usersList_user_remove:before { transform: rotate(45deg); }
	.usersList .usersList_users .usersList_user .usersList_user_remove:after { transform: rotate(-45deg); }

/* page:checkout */
body.checkout #header { min-height: auto; }
body.checkout #header #logo { margin: 0px; }

body.checkout h1 { display: block; margin-bottom: 40px; color: var(--color-contrast-08); font-size: 26px; font-weight: 400; text-align: center; }

body.checkout .ticket_detail { width: 280px; max-width: 100%; margin: 0 auto; margin-bottom: 30px; padding: 16px; border: 1px dashed #333; }
body.checkout .ticket_detail .row { clear: both; display: block; margin: 0px 0px 12px; padding: 0px 0px 12px; text-align: left; border-bottom: 1px solid rgba(0,0,0,0.2); }
	body.checkout .ticket_detail .row:last-of-type { margin-bottom: 0px; padding-bottom: 0px; border-bottom: 0px; }
body.checkout .ticket_detail .row > div { display: block; font-size: 18px; line-height: 1em; }
	body.checkout .ticket_detail .row > div:first-of-type { padding: 0px 0px 4px; font-size: 12px; line-height: 1em; }
	body.checkout .ticket_detail .row > div:last-of-type { font-weight: 600; }

body.checkout .mercadopago-button { box-sizing: border-box; display: inline-block; margin: 10px 2px 0px 2px; padding: 14px 28px 20px 28px; color: var(--color-base); font-family: "Open Sans"; font-size: 24px; font-weight: 400; line-height: 1em; text-align: center; background-color: var(--color-contrast-08); cursor: pointer; -webkit-border-radius: 4px; border-radius: 4px; transition: all 0.5s ease-out 0s; }
body.checkout .mercadopago-button:hover { background-color: var(--color-contrast-06); }
body.checkout .bt { box-sizing: border-box; display: inline-block; margin: 30px 2px 0px 2px; padding: 14px 18px 20px; color: var(--color-base); font-family: "Open Sans"; font-size: 20px; font-weight: 400; line-height: 1em; text-align: center; background-color: var(--color-contrast-08); cursor: pointer; -webkit-border-radius: 4px; border-radius: 4px; transition: all 0.5s ease-out 0s; }
body.checkout .bt:hover { background-color: var(--color-contrast-06); }

body.checkout .postData { max-width: 600px; margin: 0 auto; font-size: 12px; line-height: 1em; }
body.checkout .postData tr { background: rgba(0,0,0,0.1); }
	body.checkout .postData tr:first-of-type { background: rgba(0,0,0,0.2) !important; }
	body.checkout .postData tr:nth-child(even) { background: rgba(0,0,0,0.05); }
body.checkout .postData tr td, 
body.checkout .postData tr th { padding: 6px; text-align: left; }

@media only screen and ( min-width: 1000px ) {
	.zonesWrapper #zones .zone { margin-bottom: 30px; padding-top: 24px; padding-bottom: 24px; }
}
@media only screen and ( max-width: 900px ) {
	#header #sello { display: block; position: relative; top: -30px; right: 0px; max-width: 100%; margin: 0 auto; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); transition: all 0.5s ease-out 0s; }
}
@media only screen and ( max-width: 750px ) {
	.zonesWrapper .zonesMap { display: block; width: 100%; padding-right: 0px; }
	.zonesWrapper #zones { display: block; width: 100%; transition: all 0.5s ease-out 0s; }
	
	.zonesWrapper { display: flex; flex-direction: column; }
	.zonesWrapper #zones { order: 0; margin-bottom: 30px; }
	.zonesWrapper .zonesMap { order: 1; }
}
@media only screen and ( max-width: 700px ) {
	.boxed.zone { width: 100%; }
	
	#step-2a .psp-type-selector span { line-height: 1em; }
}
@media only screen and ( max-width: 620px ) {
	/* step3 */
	.date-in-list_narrow, .date-in-list_wide { display: none; }
	.date-in-list_normal { display: block; }
	.time-in-list_narrow, .time-in-list_wide { display: none; }
	.time-in-list_normal { display: block; }
	
	#counter #psp-bt-add_floating { top: 6px; right: 112px; transition: all 0.5s ease-out 0s; }
}
@media only screen and ( max-width: 550px ) {
	/* cart */
	#cartTable .data_concept .data_title { display: block; width: 100%; transition: all 0.5s ease-out 0s; }
	#cartTable .data_concept .data_details, 
	#cartTable .data_concept .data_description { display: block; width: 100%; transition: all 0.5s ease-out 0s; }
}
@media only screen and ( max-width: 470px ) {
	/* step3 */
	.time-in-list_normal, .time-in-list_wide { display: none; }
	.time-in-list_narrow { display: block; }
	
	.field .invalid + .error-msg { padding: 2px 4px; font-size: 10px; transition: all 0.5s ease-out 0s; }
}
@media only screen and ( max-width: 450px ) {
	/* step3 */
	.field-wrapper_number { display: block; width: 100%; }
	.field-wrapper_floor { display: inline-block; width: calc(50% - 2px); }
	.field-wrapper_department { display: inline-block; width: calc(50% - 2px); }
}
@media only screen and ( max-width: 400px ) {
	/* cart */
	#cartTable .data_concept .data_title { width: calc(100% + 110px); padding-top: 10px; transition: all 0.5s ease-out 0s; }
	#cartTable .data_concept .data_details, 
	#cartTable .data_concept .data_description { width: calc(100% + 110px); argin-top: 4px; transition: all 0.5s ease-out 0s; }
	
	/* step3 */
	.field-wrapper_dia { display: block; width: 100%; }
	.field-wrapper_hora { display: block; width: 100%; }
	
	.products .products-col > .product-title { font-size: 18px; }
	
	.date-in-list_normal, .date-in-list_wide { display: none; }
	.date-in-list_narrow { display: block; }
}