/*

VIEWPORT WIDTHS

xs: 576
sm: 768
md: 992
lg: 1200

FONT WEIGHTS

	100	Thin (Hairline)
	200	Extra Light (Ultra Light)
	300	Light
	400	Normal (Regular)
	500	Medium
	600	SemiBold (Demi Bold)
	700	Bold
	800	Extra Bold (Ultra Bold)
	900	Black (Heavy)
	950	Extra Black (Ultra Black)


/*****************************************************
 * VARIABLES
 *
 */

 :root {
	 /* Colors */
	--c-brand: #B38552;
	--c-olive: #EEF3EF;
	--c-green: #8FBE94;
	--c-green-darker: #76A57B; /* 10% darker */
	--c-disabled: #B5B5B5;
	--c-success: #4FAB4F;
	--c-error: #DD0000;
	--c-soon: #3159b5;
	--c-paypal: #0451AD;
	--c-mercadolibre: #EAB50A;
	--c-br-input: #B4B4B4;

	--c-lightgray: #EFEFEF;
	--c-gray: #808080;
	--c-darkgray: #4D4D4D;

	/* Font weights */
	--f-w-light: 200;
	--f-w-normal: 300;
	--f-w-medium: 400;
	--f-w-semibold: 500;
	--f-w-bold: 500;
	
	/* Base font color */
	--base-f-c: var(--c-gray);
	--base-f-fam: 'Montserrat';
	--base-f-size: 12px;
	--base-f-w: var(--f-w-normal);
	--base-lt-s: 0.1em;
	--base-l-h: 1.8em;

	/* Base length */
	--b-l: 12px;

	/* Heights */
	--h-top-banner: 30px;
	--h-menu-container: 80px;
	--h-menu: calc(var(--h-top-banner) + var(--h-menu-container));
	
	/* Border mobile */
	--br-mob: 20px;

	/* Aspect ratios */
	--a-r-prod: calc((523 / 284) * 100%);
	--a-r: 100%;

	/* Max width */
	--max-width: 820px;
}

/*****************************************************
 * GENERAL HTML TAGS
 *
 */

* {
	box-sizing: border-box; 
}
body {
	margin: 0 auto; 
	width: 100%; height: 100%;
	overflow-x: hidden; overflow-y: auto;
	font-family: var(--base-f-fam), sans-serif;
	font-size: var(--base-f-size);
	font-weight: var(--base-f-w);
	line-height: var(--base-l-h);
	letter-spacing: var(--base-lt-s);
	color: var(--base-f-c);
	min-height: 100vh;
}
#content-wrapper {
	padding-top: var(--h-menu);
	min-height: 500px;
}
h1, h2, h3, h4, h5, p{
	margin: 0;
}
h1 {
	font-size: calc(30 / 20 * 12px);
	font-weight: var(--f-w-medium);
	color: #948B80;
	text-align: center;
	text-transform: uppercase;
}
h2 {
	font-size: calc(28 / 20 * 12px);
	font-weight: var(--f-w-bold);
}
h3 {
	font-size: calc(26 / 20 * 12px);
	font-weight: var(--f-w-bold);
	margin-bottom: 16px;
}
h4 {
	font-size: 1em;
	font-weight: var(--f-w-bold);
	line-height: 0.8em;
}
h5 {
	font-size: calc(22 / 20 * 12px);
	font-weight: var(--f-w-bold);
}
a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
a, button, input, select, textarea {
	font-family: inherit;	
}
button {
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	color: inherit;
	font-size: inherit;
	text-transform: inherit;
	letter-spacing: var(--base-lt-s);
}
input[type="text"], input[type="tel"], input[type="email"], input[type="url"], select, textarea {
	outline: none;
	display: block;
	line-height: 1.2;
	border: 2px solid var(--c-br-input);
	font-size: inherit;
	padding: 6px 12px;
	border-radius: 4px;
	background: white;
}
input:focus, select:focus, textarea:focus,
input.has-error:focus, select.has-error:focus, textarea.has-error:focus {
	border: 2px solid #000;
}
label + input[type="text"], label + input[type="tel"], label + input[type="email"], label + input[type="url"], label + select, label + textarea {
	width: 100%;
}
input[type="text"], input[type="tel"], input[type="email"], input[type="url"], select {
	height: 3em;
}
input::placeholder, textarea::placeholder {
	color: var(--c-disabled);
}
input[type="file"] {
	position: absolute;
	top: 0; left: 0;
	opacity: 0;
}
select:hover {
	cursor: pointer;
}
select:required:invalid {
	color: var(--c-disabled);
}
option[value=""][disabled] {
  display: none;
}
.thumb {
	border: 2px solid var(--c-gray);	
	width: 170px;
	background-color: #FFF;
	background-image: linear-gradient(45deg, lightgray 25%, transparent 25%, transparent 75%, lightgray 75%, lightgray),
										linear-gradient(45deg, lightgray 25%, transparent 25%, transparent 75%, lightgray 75%, lightgray);
	background-size: 16px 16px;
	background-position: 0 0, 8px 8px;
}
.thumb img {
	display: none;
}
.checkbox, .radio {
	position: relative;
}
.checkbox label {
	border: 2px solid var(--c-brand);
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 12px;
	transition: background-color .3s;
}
.checkbox input, .radio input {
	position: absolute;
	top: 0; left: 0;
	opacity: 0;
}
.checkbox label:hover {
	background: var(--c-lightgray);
}
.checkbox input:checked ~ label {
	background: var(--color-lightblue);
	border-color: var(--color-lightblue);
	color: #FFF;
}
.checkbox input:checked:focus ~ label {
	border-color: var(--color-darkblue);
}
.radio label {
	cursor: pointer;
}
.radio input:not(:checked) ~ label {
	border: 2px solid transparent;
}
.radio input:checked ~ label {
	border: 2px solid var(--c-brand);
}
form {
	display: flex;
	flex-direction: column;
}
form .flex > :not(:last-child) {
	margin-right: 12px;
}
fieldset {
	padding: 0;
	margin: 0;
	border: 0;
}
legend {
	display: block;
	width: 100%;
	padding: 0;
	margin-bottom: 10px;
	font-size: 1.1rem;
	color: #333;
	border-bottom: 1px solid var(--c-darkgray);
}
label, .label {
	display: block;
	margin: 15px 0 10px 0;
	font-weight: var(--f-w-medium);
}
/*****************************************************
 * STATES
 *
*/
.has-error,
input.has-error {
	border: 2px solid var(--c-error);
}
/*****************************************************
 * FONTS
 *
 */
 /**********     FAMILIES      **********/
.master-of-break {
	font-family: 'Master-Of-Break', sans-serif;
}
/**********     LETTER SPACINGS      **********/
.ls-005 {
	letter-spacing: .05em;
}
.ls-02 {
	letter-spacing: .2em;
}
/**********     LINE HEIGHTS      **********/
.lh-25 {
	line-height: 1.6em;
}
/**********     WEIGHTS      **********/
.medium {
	font-weight: var(--f-w-medium);
}
.semibold {
	font-weight: var(--f-w-semibold);
}
/**********     STYLES      **********/
.italic {
	font-style: italic;
}
/**********     COLORS      **********/
.darkgray {
color: var(--c-darkgray);
}
.green {
	color: var(--c-green);
}
.white {
	color: #FFF;
}
/**********     SIZES      **********/
.f-70 {
	font-size: .7em;
}
.f-75 {
	font-size: .75em;
}
.f-80 {
	font-size: .8em;
}
.f-85 {
	font-size: .85em;
}
.f-90 {
	font-size: .9em;
}
.f-110 {
	font-size: 1.1em;
}
.f-120 {
	font-size: 1.2em;
}
.f-140 {
	font-size: 1.4em;
}
.f-170 {
	font-size: 1.7em;
}
.f-190 {
	font-size: 1.9em;
}
/*****************************************************
 * STYLES
 *
*/
/**********     TEXTS      **********/
.uppercase {
	text-transform: uppercase;
}
.tx-center {
	text-align: center;
}
.tx-right {
	text-align: right;
}
.pre-wrap {
	white-space: pre-wrap;
}
.no-wrap {
	white-space: nowrap;
}
/**********     BACKGROUNDS      **********/
.bk-brand {
	background: var(--c-brand);
}
.bk-green {
	background: var(--c-green);
}
.bk-lightgray {
	background: var(--c-lightgray);
}
.bk-olive {
	background: var(--c-olive);
}
.bk-disabled {
	background: var(--c-disabled);
}
.bk-soon {
	background: var(--c-soon);
}
/**********     BORDERS      **********/
.br-brand {
	border: 1px solid var(--c-brand);
}
/**********     SVGs      **********/
.svg-brand {
	filter: invert(63%) sepia(20%) saturate(1051%) hue-rotate(355deg) brightness(93%) contrast(84%);
}
.svg-white {
	filter: invert(100%) sepia(0%) saturate(7417%) hue-rotate(254deg) brightness(125%) contrast(118%);
}
.svg-error {
	filter: invert(11%) sepia(68%) saturate(7497%) hue-rotate(358deg) brightness(86%) contrast(123%);
}
.svg-gray { /* --c-gray */
	filter: invert(55%) sepia(0%) saturate(0%) hue-rotate(179deg) brightness(92%) contrast(87%);
}
/**********     OPACITY      **********/
.op-40 {
	opacity: 40%;
}
/**********     LAYOUTS      **********/
.block {
	display: block;
}
.rel {
	position: relative;
}
.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: var(--h-menu);
	z-index: 100;
}
.dissapear {
	display: none;
}
.prevent-scroll {
	overflow-y: hidden;
}
.overlay {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}
.overlay-screen {
	position: fixed;
  top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 1400;
	display: none;
}
.overlay-screen.show {
	display: block;
}
.of-cover {
	object-fit: cover;
}
.img-wrapper {
	display: block;
  position: relative;
  height: 0;
	padding-top: var(--a-r);
	overflow: hidden;
}
.img-wrapper img,
.img-wrapper picture {
  position: absolute;
	top: 0; left: 0;
  width: 100%; height: 100%;
	object-fit: cover;
}
/**********     WIDTHS      **********/
.w-25 {
	width: 25%;
}
.w-30 {
	width: 30%;
}
.w-35 {
	width: 35%;
}
.w-40 {
	width: 40%;
}
.w-50 {
	width: 50%;
}
.w-60 {
	width: 60%;
}
.w-70 {
	width: 70%;
}
.w-75 {
	width: 75%;
}
.w-100 {
	width: 100%;
}
.h-100 {
	height: 100%;
}
/**********     MARGINS      **********/
/*		TOP		*/
.mt-1 {
	margin-top: var(--b-l);
}
.mt-2 {
	margin-top: calc(var(--b-l) * 2);
}
/*		BOTTOM		*/
.mb-05 {
	margin-bottom: calc(var(--b-l) / 2);
}
.mb-1 {
	margin-bottom: var(--b-l);
}
.mb-1-5 {
	margin-bottom: calc(var(--b-l) * 1.5);
}
.mb-2 {
	margin-bottom: calc(var(--b-l) * 2);
}
/*		LEFT		*/
.ml-05 {
	margin-left: 8px;
}
.ml-10 {
	margin-left: 10px;
}
/*		RIGHT		*/
.mr-05 {
	margin-right: 8px;
}
.mr-1 {
	margin-right: var(--b-l);
}
.mr-2 {
	margin-right: calc(var(--b-l) * 2);
}
.mr-3 {
	margin-right: calc(var(--b-l) * 3);
}
.mr-4 {
	margin-right: calc(var(--b-l) * 4);
}
/**********     PADDINGS      **********/
.p-05 {
	padding: calc(var(--b-l) / 2);
}
/*		TOP		*/
.pt-2 {
	padding-top: calc(var(--b-l) * 2);
}
.pt-3 {
	padding-top: calc(var(--b-l) * 3);
}
.pt-4 {
	padding-top: calc(var(--b-l) * 4);
}
/*		BOTTOM		*/
.pb-1 {
	padding-bottom: var(--b-l);
}
.pb-2 {
	padding-bottom: calc(var(--b-l) * 2);
}
.pb-4 {
	padding-bottom: calc(var(--b-l) * 4);
}
.pb-6 {
	padding-bottom: calc(var(--b-l) * 6);
}
/*		LEFT		*/
.pl-1 {
	padding-left: var(--b-l);
}
/*		RIGHT		*/
.pr-1 {
	padding-right: var(--b-l);
}
.pr-2 {
	padding-right: calc(var(--b-l) * 2);
}
/*****************************************************
 * OTHERS
 *
*/
.pointer {
	cursor: pointer;
}
.ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.anchor {
	position: absolute;
	bottom: 0;
	height: calc(100% + var(--h-menu));
	width: 1px;
}
.currency-code {
	font-size: 0.8em;
}
.down-arrow {
	transition: transform .2s;
	width: 18px;
}
.rotate-180 {
	transform: rotate(180deg);
}
/**********     BUTTONS      **********/
.btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: relative;
	color: white;
	padding: 4px 16px;
	min-height: 28px;
	/* border-radius: 5px; */
	text-transform: uppercase;
}
.btn-wrapper {
	display: flex;
	justify-content: flex-end;
	position: relative;
}
.btn-wrapper.right .btn {
	width: 250px;
}
.btn-wrapper.left {
	justify-content: flex-start;
}
/*****************************************************
 * COMPONENTS
 *
 */
/**********     BREADCRUMB      **********/
.breadcrumb {
	padding: 40px 0 32px 0;
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	color: #948B80;
	font-weight: var(--f-w-medium);
	letter-spacing: 0;
}
.breadcrumb li {
	display: inline;
}
.breadcrumb span.text {
	color: var(--base-f-c);
}
.breadcrumb strong.text {
	color: var(--c-brand);
}
.breadcrumb :nth-child(even) {
	margin: 0 10px 0 10px;
}
/**********     NOTIFIERS      **********/
[data-notify] {
	font-size: 12px;
	text-align: center;
	display: none;
	width: 100%;
	padding-top: 5px;
}
[data-notify].error {
	color: var(--c-error);
}
[data-notify].success {
	color: var(--c-success);
}
[data-notify].box {
	color: white;
	padding: 10px;
}
[data-notify].error.box {
	background: var(--c-error);
}
[data-notify].success.box {
	background: var(--c-success);
}
/**********     SOCIAL ICONS      **********/
.social-icons {
	display: flex;
	align-items: center;
	padding: 0;
}
.social-icons :not(:last-child) {
	margin-right: 12px;
}
.social-icons img {
	width: 18px;
	height: 18px;
}
/*****************************************************
 * LOADERS
 *
 */
 /**********     DOTS      **********/
.ldr-dots {
  position: relative;
  width: 80px;
  height: 12px;
}
.ldr-dots div {
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.ldr-dots div:nth-child(1) {
  left: 8px;
  animation: ldr-dots1 0.6s infinite;
}
.ldr-dots div:nth-child(2) {
  left: 8px;
  animation: ldr-dots2 0.6s infinite;
}
.ldr-dots div:nth-child(3) {
  left: 32px;
  animation: ldr-dots2 0.6s infinite;
}
.ldr-dots div:nth-child(4) {
  left: 56px;
  animation: ldr-dots3 0.6s infinite;
}
@keyframes ldr-dots1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ldr-dots3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes ldr-dots2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
/**********     DISK      **********/
.ldr-disk {
	width: 50px; height: 0;
	padding-top: 100%;
  position: relative;
}
.ldr-disk > div {
  --color: black;
  --border: 10px;
  --speed: 1s;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
	border: var(--border) solid var(--color);
	border-left: var(--border) solid transparent;
  animation: spin var(--speed) linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/*****************************************************
 * SCREEN WIDE & FLEX SYSTEM
 *
 */
/**********     STARTING      **********/
.sw {
	width: 80%;
	margin: 0 auto;
	max-width: var(--max-width);
}
.sw.checkout {
	width: 90%;
	max-width: var(--max-width);
}
/* screen center */
.sc {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}
.flex {
	display: flex;
}
.v-flex {
	display: flex;
	flex-direction: column;
}
.flex.center,
.v-flex.center {
	justify-content: center;
	align-items: center;
}
.flex.row {
	flex-direction: row;
}
.flex.align {
	align-items: center;
}
.flex.between {
	justify-content: space-between;
}
.wrap {
	flex-wrap: wrap;
}
.grow {
	flex-grow: 1;
}
@media (max-width: 980px) {
	.sw.checkout {
		width: 100%;
		padding-left: var(--br-mob);
		padding-right: var(--br-mob);
	}
}
/**********     MD: 916      **********/
@media (max-width: 925px) {
	.sw {
		width: 100%;
		padding-left: var(--br-mob);
		padding-right: var(--br-mob);
	}
	:root {
		--h-menu-container: 60px;
		--h-menu:var(--h-menu-container);
	}
	.flex.on-md {
		display: block;
	}
	.flex.on-md > *{
		width: 100%;
	}
	.sc {
		width: 100%;
		padding-left: var(--br-mob);
		padding-right: var(--br-mob);
	}
	.md-pt-4 {
		padding-top: 64px;
	}
	.md-pb-4 {
		padding-bottom: 64px;
	}
	.md-mr-2 {
		margin-right: calc(var(--b-l) * 2);
	}
	.hidden.on-md {
		display: none;
	}
	.md-wide {
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
}
/**********     SM: 768      **********/
@media (max-width: 768px) {
	.flex.on-sm {
		display: block;
	}
	.flex.on-sm > *{
		width: 100% !important;
	}
	.md-wide {
		width: 100%;
	}
	.sm-wide {
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
	.sm-pt-3 {
		padding-top: 48px;
	}
	.sm-mr-0 {
		margin-right: 0;
	}
}
/**********     XS: 576      **********/
@media (max-width: 576px) {
	.flex.on-xs {
		display: block;
	}
	.flex.on-xs > *{
		width: 100% !important;
	}
	.sw.xs {
		padding-left: 0;
		padding-right: 0;
	}
	.hidden.on-xs {
		display: none;
	}
	.sm-wide {
		width: 100%;
	}
	.btn-wrapper.right .btn {
		width: 100%;
	}
	.xs-pt-3 {
		padding-top: 48px;
	}
}