:root {
	/* GRISES */
	--color0-1: #555555; --color0-2: #888888; --color0-3: #dddddd; --color0-4: #f9f9f9; --color0-5: #f1f1f1;
	
	/* PRINCIPALES */
	/* --color1-1: #00A8E8; --color1-2: #98FF98; --color1-3: #C0C0C0; --color1-4: #FF6B35; */
	--color1-1: #7db8b3; --color1-2: #70c42d; --color1-3: #C0C0C0; --color1-4: #FF6B35;
	
	/* AZUL*/
	--color3-1: #B2EFAA; --color3-2: #E0F7E5; --color3-2: #DEEBE4;
	
	/* OK */
	--color4-1: #00DD97; --color4-2: #003b28;
	
	/* NOK */
	--color5-1: #CF6160; --color5-2: #DFA4B6; --color5-3: #3C131A;
	
	/* Amarillo */
	--color6-1	: #FFC107;
}

@font-face {font-family: 'Open Sans'; src: local('Open Sans'), url('/Assets/fonts/OpenSans/OpenSans.ttf') format('truetype'); font-weight: normal;font-style: normal; font-display: swap;}
@font-face {font-family: 'Open Sans Light'; src: local('Open Sans Light'), url('/Assets/fonts/OpenSans/OpenSans-Light.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap;}
/* @font-face {font-family: 'Roboto Regular';src: local('Roboto Regular'), url('/Assets/fonts/Roboto/Roboto-Regular.ttf') format('truetype');font-weight: normal;font-style: normal;font-display: swap;} */

/* FUENTES */
.font-thin {font-family: 'Open Sans Light', sans-serif;}
.font-extrabold {font-family: 'Open Sans', sans-serif;}
body, input, select, textarea {font-family: 'Open Sans', sans-serif;}

/* ------------------------- UTILITARIOS */

/* FONT-WEIGHT */
.font-normal {font-weight: normal;}
.f-bold {font-weight: bold;}

/* TEXT-ALIGN */
.text-left {text-align:left;}
.text-center {text-align:center;}
.text-right {text-align:right;}

/* FLEX */
.flex-column-w {display: flex; flex-flow: column wrap;}
.flex-column {display: flex; flex-flow: column nowrap;}
.flex-row-w {display: flex; flex-flow: row wrap;}
.flex-row {display: flex; flex-flow: row nowrap;}
.flex-align-c {align-items: center;}
.flex-align-s {align-items: flex-start;}
.flex-align-e {align-items: flex-end;}
.flex-align-st {align-items: stretch;}
.flex-align-b {align-items: baseline;}
.flex-just-sb {justify-content: space-between;}
.flex-just-sa {justify-content: space-around;}
.flex-just-s {justify-content: flex-start;}
.flex-just-e {justify-content: flex-end;}
.flex-just-c {justify-content: center;}

/* GRID */
.grid-g1 {grid-gap: 1rem;}

/* BG */
.bg-transp {background-color: transparent;}
.bg-white {background-color: white;}
.bg0-1 {background-color: var(--color0-1);}
.bg0-2 {background-color: var(--color0-2);}
.bg0-3 {background-color: var(--color0-3);}
.bg0-4 {background-color: var(--color0-4);}
.bg0-5 {background-color: var(--color0-5);}
.bg1-1 {background-color: var(--color1-1);}
.bg1-2 {background-color: var(--color1-2);}
.bg1-3 {background-color: var(--color1-3);}
.bg1-4 {background-color: var(--color1-4);}
.bg1-5 {background-color: var(--color1-5);}
.bg3-1 {background-color: var(--color3-1);}
.bg3-2 {background-color: var(--color3-2);}
.bg5-1 {background-color: var(--color5-1);}
.bg6-1 {background-color: var(--color6-1);}

/* ENLACES */
.text-black, .link-black {color: black;}
.text-white, .link-white {color: white;}
.text0-1, .link0-1 {color: var(--color0-1);}
.text0-2, .link0-2 {color: var(--color0-2);}
.text1-1, .link1-1 {color: var(--color1-1);}
.text1-2, .link1-2 {color: var(--color1-2);}
.text1-3, .link1-3 {color: var(--color1-3);}
.text3-1, .link3-1 {color: var(--color3-1);}
.text3-2, .link3-2 {color: var(--color3-2);}
.text4-1, .link4-1 {color: var(--color4-1);}
.text5-1, .link5-1 {color: var(--color5-1);}
.text5-2, .link5-2 {color: var(--color5-2);}
.text5-3, .link5-3 {color: var(--color5-3);}
.text6-1, .link6-1 {color: var(--color6-1);}
.link0-1:hover, .link0-1:focus, .link0-1:active,
.link0-2:hover, .link0-2:focus, .link0-2:active,
.link1-1:hover, .link1-1:focus, .link1-1:active,
.link1-3:hover, .link1-3:focus, .link1-3:active,
.link3-1:hover, .link3-1:focus, .link3-1:active,
.link-white:hover, .link-white:focus, .link-white:active,
.link-black:hover, .link-black:focus, .link-black:active {opacity: .75;}

/* MARGENES */
.mgn-1 {margin: .1rem;}
.mgn-25 {margin: .25rem;}
.mgn-5 {margin: .5rem;}
.mgn1 {margin: 1rem;}
.mgn2 {margin: 2rem;}
.mgn4 {margin: 4rem;}

.mgnH-25 >*:not(:last-child) {margin-right: .25rem;}
.mgnH-5 >*:not(:last-child) {margin-right: .5rem;}
.mgnH1 >*:not(:last-child) {margin-right: 1rem;}
.mgnH2 >*:not(:last-child) {margin-right: 2rem;}
.mgnV-25 >*:not(:last-child) {margin-bottom: .25rem;}
.mgnV-5 >*:not(:last-child) {margin-bottom: .5rem;}
.mgnV1 >*:not(:last-child) {margin-bottom: 1rem;}
.mgnV2 >*:not(:last-child) {margin-bottom: 2rem;}
.mgnV4 >*:not(:last-child) {margin-bottom: 4rem;}

.mgnLRa {margin-left: auto; margin-right: auto;}
.mgnLR2 {margin-left: 2rem; margin-right: 2rem;}

.mgnL-25 {margin-left: .25rem;}
.mgnL-5 {margin-left: .5rem;}
.mgnL1 {margin-left: 1rem;}
.mgnL2 {margin-left: 2rem;}
.mgnL4 {margin-left: 4rem;}
.mgnR-25 {margin-right: .25rem;}
.mgnR-5 {margin-right: .5rem;}
.mgnR1 {margin-right: 1rem;}
.mgnR2 {margin-right: 2rem;}
.mgnR4 {margin-right: 4rem;}

.mgnT-25 {margin-top: .25rem;}
.mgnT-5 {margin-top: .5rem;}
.mgnT1 {margin-top: 1rem;}
.mgnT1-5 {margin-top: 1.5rem;}
.mgnT2 {margin-top: 2rem;}
.mgnT3 {margin-top: 3rem;}
.mgnT4 {margin-top: 4rem;}
.mgnB-1 {margin-bottom: .1rem;}
.mgnB-25 {margin-bottom: .25rem;}
.mgnB-5 {margin-bottom: .5rem;}
.mgnB1 {margin-bottom: 1rem;}
.mgnB2 {margin-bottom: 2rem;}
.mgnB4 {margin-bottom: 4rem;}

.mgnTB-25 {margin-top: .25rem; margin-bottom: .25rem;}
.mgnTB-5 {margin-top: .5rem; margin-bottom: .5rem;}
.mgnTB1 {margin-top: 1rem; margin-bottom: 1rem;}
.mgnTB2 {margin-top: 2rem; margin-bottom: 2rem;}

/* RELLENOS */
.pdn-1 {padding: .1rem;}
.pdn-25 {padding: .25rem;}
.pdn-5 {padding: .5rem;}
.pdn1 {padding: 1rem;}
.pdn2 {padding: 2rem;}
.pdn2-5 {padding: 2.5rem;}
.pdn3 {padding: 3rem;}
.pdn4 {padding: 4rem;}

.pdnT-1 {padding-top: .1rem;}
.pdnT-25 {padding-top: .25rem;}
.pdnT-5 {padding-top: .5rem;}
.pdnT1 {padding-top: 1rem;}
.pdnT2 {padding-top: 2rem;}
.pdnT3 {padding-top: 3rem;}
.pdnT4 {padding-top: 4rem;}

.pdnB-1 {padding-bottom: .1rem;}
.pdnB-25 {padding-bottom: .25rem;}
.pdnB-5 {padding-bottom: .5rem;}
.pdnB1 {padding-bottom: 1rem;}
.pdnB2 {padding-bottom: 2rem;}
.pdnB4 {padding-bottom: 4rem;}

.pdnL-1 {padding-left: .1rem;}
.pdnL-25 {padding-left: .25rem;}
.pdnL-5 {padding-left: .5rem;}
.pdnL1 {padding-left: 1rem;}
.pdnL2 {padding-left: 2rem;}

.pdnR-1 {padding-right: .1rem;}
.pdnR-25 {padding-right: .25rem;}
.pdnR-5 {padding-right: .5rem;}
.pdnR1 {padding-right: 1rem;}
.pdnR2 {padding-right: 2rem;}

.pdnTB-1 {padding-top: .1rem; padding-bottom: .1rem;}
.pdnTB-25 {padding-top: .25rem; padding-bottom: .25rem;}
.pdnTB-5 {padding-top: .5rem; padding-bottom: .5rem;}
.pdnTB1 {padding-top: 1rem; padding-bottom: 1rem;}
.pdnTB2 {padding-top: 2rem; padding-bottom: 2rem;}
.pdnTB4 {padding-top: 4rem; padding-bottom: 4rem;}

.pdnLR-1 {padding-left: .1rem; padding-right: .1rem;}
.pdnLR-25 {padding-left: .25rem; padding-right: .25rem;}
.pdnLR-5 {padding-left: .5rem; padding-right: .5rem;}
.pdnLR-75 {padding-left: .75rem; padding-right: .75rem;}
.pdnLR1 {padding-left: 1rem; padding-right: 1rem;}
.pdnLR2 {padding-left: 2rem; padding-right: 2rem;}
.pdnLR4 {padding-left: 4rem; padding-right: 4rem;}

/* ANCHOS */
.w-75 {width: .75rem;}
.w1 {width: 1rem;}
.w1-5 {width: 1.5rem;}
.w2 {width: 2rem;}
.w2-5 {width: 2.5rem;}
.w3 {width: 3rem;}
.w4 {width: 4rem;}
.w5 {width: 5rem;}
.w7-5 {width: 7.5rem;}
.w10 {width: 10rem;}
.w15 {width: 15rem;}
.w20 {width: 20rem;}
.w50 {width: 50rem;}
.w75 {width: 75rem;}
.w40p {width: 40%;}
.w80p {width: 80%;}
.w50p {width: 50%;}
.w100 {width: 100%;}

/* ALTOS */
.ht1 {height: 1rem;}
.ht2 {height: 2rem;}
.ht2-5 {height: 2.5rem;}
.ht3 {height: 3rem;}
.ht5 {height: 5rem;}
.ht7-5 {height: 7.5rem;}
.ht10 {height: 10rem;}
.ht15 {height: 15rem;}
.ht100 {height: 100%;}
.ht-sh {height: calc(100vh - 7.5rem);}

/* BORDER RADIUS */
.br-25 {border-radius:.25rem;}
.br-5 {border-radius:.5rem;}
.br1 {border-radius:1rem;}
.radius2 {border-radius: 2rem;}
.radius5 {border-radius: 5rem;}
.br-full {border-radius:100%;}

/* BORDES */
.bor0-3 {border: 1px solid var(--color0-3);}
.bor1-1 {border: 1px solid var(--color1-1);}
.bor1-2 {border: 1px solid var(--color1-2);}
.bor1-3 {border: 1px solid var(--color1-3);}
.bor1-4 {border: 1px solid var(--color1-4);}
.bor1-5 {border: 1px solid var(--color1-5);}
.bor-white {border: 1px solid white;}

/* SHADOW */
.bs0-3 {box-shadow: 0 0 .25rem .05rem var(--color0-3);}

/* OTROS */
.word-nowrap {white-space: nowrap;}
.rltv {position: relative;}
.ofA {overflow: auto;}
.ofV {overflow: visible;}
.ofS {overflow: scroll;}
.ofH {overflow: hidden;}

/* ------------------------- CLASES ESPECIFICAS */

/* GENERAL */
* {margin: 0; padding: 0; box-sizing: border-box; outline: 0;}
html {font-size: 16px;}
body {width: 100%; background-color: var(--color0-1); color: var(--color0-1);}
main {margin: 0 auto; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; min-height: 55vh; background-color: white; transition: all 0.5s;}
section {width: 100%;}
.section-main {padding: 2rem; background-color: white;}
::selection {background-color: var(--color1-3); color: white;}
::-webkit-scrollbar {width: 0.5rem; height: 0.5rem;}
::-webkit-scrollbar-track {background: var(--color0-3);}
::-webkit-scrollbar-thumb {background: var(--color1-1);}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {background: var(--color1-3);}
.element-blocked {opacity: .5; pointer-events: none;}
.grecaptcha-badge {display: none;}

/* CABECERA */
header {top: 0; z-index: 2; width: 100%; height: 11rem; padding: 0 2rem; transition: all 0.5s;}
.header-fixed {background-color: white; border-bottom: .05rem solid var(--color0-3);}
/* .header-fixed #menu-category > a {color: white;} */
.header-fixed div:nth-child(2) > button {color: white;}
.header-sticky {position: sticky; background-color: white; box-shadow: 0 .1rem .2rem -.1rem var(--color0-2);}
/* .header-sticky div:nth-child(2) > button img {filter: invert(32%) sepia(0%) saturate(0%) hue-rotate(159deg) brightness(96%) contrast(87%);} */
/* #logo {margin-left: 2.5rem;} */
#logo {position: absolute; left: calc(50% - 8rem);}
#logo img {width: 12.5rem;}
.scroll-el {scroll-margin-top: 8rem;}

/* TEXTOS */
.fs-7 {font-size: .7rem;}
.fs-8 {font-size: .8rem;}
.fs-9 {font-size: .9rem;}
.fs1 {font-size: 1rem;}
.fs1-5 {font-size: 1.5rem;}
.fs2 {font-size: 2rem;}
.fs2-5 {font-size: 2.5rem;}
.fs3 {font-size: 3rem;}
.fs4 {font-size: 4rem;}

.h1 {font-size: 2.5rem; padding-bottom: 1rem;}
.h2 {font-size: 2.5rem;}
.h3 {font-size: 2rem;}
.h4 {font-size: 1.7rem;}
.h5 {font-size: 1.4rem;}
.h6 {font-size: 1.1rem;}
.h1-light {font-weight: lighter; font-size: 1.5rem;}
.title1 {font-size: 1rem; font-weight: bold;}
.min-title {font-size: .7rem; font-weight: bold;}

.video-home {width: 50rem; max-width: 50%; max-height: 100%;}

a {text-decoration: none;}
#cart-count span {position: absolute; top: -.5rem; right: -.8rem; padding: .15rem .25rem; background-color: var(--color1-2); color: white; border-radius: 100%; font-weight: bold; text-align: center; font-size: .7rem; border: .05rem solid white;}
.pricebefore {font-size: 0.8rem; text-decoration: line-through; color: var(--color0-2);}
.priceafter {color: var(--color1-1); white-space: nowrap; font-weight: bold;}
.discount {padding: 0 .25rem; font-size: 0.8rem; font-weight: bold; color: white; background-color: var(--color5-1); border-radius: .5rem; white-space: nowrap; margin-right: .5rem;}
.productGrid .discount, .productList .discount {position: absolute; top: 1.5rem; right: -.75rem; font-size: .8rem; border-radius: 1rem .15rem .15rem 1rem; padding: .1rem 1rem; background-color: var(--color1-1); color: white;}

.etiqueta-producto {border: 2px solid var(--color6-1); border-radius: .5rem; padding: .25rem .5rem; font-weight: bold; font-size: .7rem;}
.etiqueta-producto:hover {background-color: var(--color6-1); color: white;}

.pointer {cursor: pointer;}

/* NOTIFICACIONES */
#notification-general {position: fixed; bottom: 1rem; right: 5rem; z-index: 5; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; text-align: center;}
#notification-general .notify-main-ok {display: none; padding: 1rem 2rem; background-color: var(--color1-2); color: var(--color0-4); border-radius: .5rem;}
#notification-general .notify-main-error {display: none; padding: 1rem 2rem; background-color: var(--color5-1); color: white; border-radius: .5rem;}

.svgWave {display: inline-block;position: absolute;top: 0;left: 0;}

/* CONTENEDORES */
#contactHeader {width: 100%; height: 2rem; border-bottom: 1px solid white;}
#contactHeader .rrss img {width: 1.2rem; filter: brightness(0%) saturate(100%) invert(100%);}
#contactHeader .rrss >*:not(:last-child) {margin-right: 1.5rem;}
.section-planes {padding: 4rem 0rem; border-top: 10px solid var(--color0-3); background: linear-gradient(0deg, white 30%, var(--color1-2) 30%);}
.scroll-content {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1rem; padding: 0 2rem;}
.integraciones {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 4rem 8rem;}
.integraciones > div {display: flex; align-items: center; justify-content: center;}
#nosotros {display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-around; padding: 7.5rem 3rem; background-color: var(--color1-1);}
#nosotros > div:first-child {display: flex; flex-flow: column nowrap; align-items: flex-start; justify-content: center; padding: 2rem; width: 40%;}
.form-contact {background-color:white;padding:2rem 4rem;border-radius:.5rem; box-shadow: 0 .2rem .25rem .1rem var(--color0-3);}
#formContacto {padding-left: 3rem;}
.contacto {display: flex; flex-flow: column nowrap;align-items: center; padding-right: 3rem; border-right: 1px solid var(--color0-3);}
.contacto >*:not(:last-child) {margin-bottom: 2rem;}
.grid-reseñas {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem;}
.reseñas {display: flex; flex-flow: row nowrap; justify-content: center;}
.reseñas > .reseña:not(:last-child) {margin: 0 2rem 0 0;}
.reseña {display: flex; flex-flow: column nowrap; align-items: center; min-width: 30%; max-width: 450px; border-radius: .5rem; box-shadow: 0 0 .5rem 0 var(--color0-2); padding: 2rem; background-color: white;}
.halfDiv {width: 50%;}
.hide {display: none !important;}
.menu-actions {display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: center; width: auto;}
.menu-actions button {width: 6.5rem;}

.contacto-container {display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;}
.blog-container-main {display: flex; flex-flow: row nowrap; justify-content: center;}
.blog-container-main >*:not(:last-child) {margin-right: 2rem;}
.blog-container-main > div:nth-child(1) {width: 180%;}
.blog-container-main > div:nth-child(2) {width: 100%;}
.blog-container-main a > img:hover, .blog-cuerpo img:focus {opacity: .9;}
.blog-cuerpo ul, .blog-cuerpo ol {margin-left:2rem;}
.blog-cuerpo ul > *:not(:last-child), .blog-cuerpo ol > *:not(:last-child) {margin-bottom:1rem;}
.blog-cuerpo h2 {margin: 2rem 0;}
.blog-cuerpo p {margin-bottom: 1.5rem;}
.blog-cuerpo a {color: var(--color1-1);}
.blog-cuerpo a:hover, .blog-cuerpo a:focus {opacity: .7;}
.blog-cuerpo img {max-width: 100%; height: auto;}
.blog-grid {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 3rem 2rem;}

.cntSide {display: flex; flex-flow: row nowrap; align-items: center;}
.cntSide img {max-width: 100%;}
.cntSide > *:nth-child(1) {margin: 2rem 1rem 2rem 5rem; width: 50%; text-align:right;}
.cntSide > *:nth-child(2) {margin: 2rem 5rem 2rem 1rem; width: 50%;}

    /* SEARCH */
#search-visible {position: relative; display: flex; flex-flow: row nowrap; height: 3rem; border-radius: 5rem; overflow: hidden; margin-left: 2rem; }
#search-visible > div {border-right: 1px solid var(--color0-3); padding: 0 .5rem 0 1rem;}
#search-visible label {font-size: .7rem; position: absolute; top: .1rem;}
#search-visible select {padding: .25rem 0 .25rem 0; margin-top: 1rem;}
#search-visible select:active, #search-visible select:focus {box-shadow: none;}
/* #search-visible .select-square label {padding-left: .5rem;} */
#search-visible input {border: none; width: 20rem; font-size: .9rem; padding: 0 1rem;}
#search-visible input::placeholder {color: var(--color1-1);}
#search-visible button img {width: 1rem;}

#search-btn {display: none;}
#search-btn img {height: 1.7rem;}
#search {display: none;}
#search input {color: var(--color0-1); font-size: .9rem;}
#search input::placeholder {color: var(--color0-2);}
#search button {position: absolute; bottom: 3rem; right: 2.75rem;}
#search button img {width: 1.5rem;}

/* CATEGORIA DESPLEGABLE */
#menu-category {width: 20rem; background-color: white;}
#btn-category img {width: 2rem;}
.categoria {display: flex; flex-flow: column nowrap; width: 100%;}
.categoria a {display: flex; flex-flow: row nowrap; align-items: center; padding: .75rem; color: var(--color1-1); width: 100%;}
/* .categoria a > img {width: 2rem; margin: 0 2rem 0 1rem; vertical-align: middle;} */
.categoria a:hover, .categoria a:focus, .categoria a:active, .categoria button:hover, .categoria button:focus, .categoria button:active {background-color: var(--color0-5); color: var(--color1-1);}
.subcategoria {position: absolute; display: flex; flex-flow: column nowrap; background-color: white; width: 100%; padding: 2rem;}
/* .categoria > li > a:hover img, .categoria > li > a:focus img, .categoria > li > a:active img {filter: invert(79%) sepia(81%) saturate(1004%) hue-rotate(327deg) brightness(109%) contrast(99%);} */

/* CATEGORIA SECCION */
.categoria-button {display: flex; flex-flow: column nowrap; align-items: center; color: black; width: 6.5rem; text-align: center; font-size: .8rem;}
.categoria-button img {width: 5rem; margin-bottom: .5rem;}
/* .categoria-button:hover, .categoria-button:focus, .categoria-button:active {border-bottom: .25rem solid var(--color1-1);} */
.categoria-button:hover img, .categoria-button:focus img, .categoria-button:active img {width: 6rem;}

/* MENU OPCIONES */
.menu-options {display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; padding: 2rem;}
.references {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}
.references a {display: flex; flex-flow: row nowrap; align-items: center; color: var(--color0-2);}
.reference-arrow {margin: 0 .5rem; font-size: .8rem; color: var(--color0-2);}
.reference-arrow:after {content: "|";}
.references a:last-of-type {color: var(--color1-2); font-style: italic; font-weight:bold;}
.references a:hover, .references a:focus, .references a:active {color: var(--color1-2);}
.sort {display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between;}

.input-calendar {position: absolute; right:.75rem; top:1rem; width:1.5rem; content:url('/Assets/img/icons/schedule-calendar-icon.png'); filter: invert(70%) sepia(27%) saturate(589%) hue-rotate(62deg) brightness(102%) contrast(94%);}
.input-calendar-basic {position: absolute; right:.75rem; top:2.3rem; width:1.5rem; content:url('/Assets/img/icons/schedule-calendar-icon.png'); filter: invert(70%) sepia(27%) saturate(589%) hue-rotate(62deg) brightness(102%) contrast(94%);}

/* DATEPICKER */
.ui-datepicker {background: white;}
.ui-datepicker-header, .ui-widget-header {background: var(--color0-3) !important; padding: .25rem 0 !important;}
.ui-datepicker-header select {padding: .25rem .5rem !important;}
.ui-datepicker-title {display: flex; flex-flow: row nowrap; justify-content: center;}
.ui-datepicker-calendar th {font-weight: normal !important; color: var(--color0-1);}
.ui-datepicker-month {margin-right: .5rem !important;}
.ui-datepicker-month, .ui-datepicker-year {border-radius: .25rem;}
.ui-state-default {background: none !important; border: none !important; text-align: center !important; padding: .5rem .5rem !important; font-size: .85rem;}
.ui-state-hover, .ui-state-active {color: white !important; border-radius: 100%; background-color: var(--color1-1) !important;}
/* .ui-datepicker-current, .ui-datepicker-close {color: var(--color0-1) !important;} */
/* .ui-datepicker-current:hover, .ui-datepicker-close:hover {color: white !important; border-radius: .25rem;} */
/* .ui-priority-primary, .ui-priority-secondary {font-weight: normal !important; opacity:1 !important;} */

.ProfileImg {width: 10rem; border-radius: 1rem; vertical-align: middle; margin: 0 auto;}
.ProfileImgMin {width: 3.5rem; border-radius: 100%;}

/* IMG COLORS */
.imgBlack {filter: brightness(0) saturate(100%);}
.imgWhite {filter: brightness(0%) saturate(100%) invert(100%);}
.imgColor1-1 {filter: invert(78%) sepia(9%) saturate(1161%) hue-rotate(126deg) brightness(89%) contrast(84%);}
.imgColor1-2, img.hov-imgColor1-2:hover, .hov-imgColor1-2:hover img {filter: invert(62%) sepia(93%) saturate(375%) hue-rotate(48deg) brightness(92%) contrast(88%);}
.imgColor1-3 {filter: invert(83%) sepia(0%) saturate(1354%) hue-rotate(195deg) brightness(102%) contrast(73%);}
.imgColor0-1 {filter: invert(32%) sepia(0%) saturate(0%) hue-rotate(159deg) brightness(96%) contrast(87%);}
.imgColor0-2 {filter: invert(56%) sepia(0%) saturate(0%) hue-rotate(159deg) brightness(96%) contrast(88%);}
.imgColor0-3 {filter: invert(56%) sepia(6%) saturate(0%) hue-rotate(143deg) brightness(96%) contrast(80%);}
.imgColor0-4 {filter: invert(99%) sepia(1%) saturate(276%) hue-rotate(9deg) brightness(113%) contrast(95%);}
.imgColor5-1 {filter: invert(71%) sepia(18%) saturate(6152%) hue-rotate(312deg) brightness(81%) contrast(102%);}
.imgColor5-2 {filter: invert(78%) sepia(6%) saturate(1706%) hue-rotate(293deg) brightness(92%) contrast(89%);}

/* SIDEBAR USER */
.section-sidebar {display: flex; flex-flow: row nowrap; align-items: stretch; background-color: white;}
.section-sidebar > section {width: 100%; min-height: calc(100vh - 11rem - 1.5rem); border-left: .05rem solid var(--color0-3); overflow: auto;}
.sidebar-user {width: auto; max-width: 35%; min-height: calc(100vh - 11rem - 1.5rem); text-align: center;}
.sidebar-user li {padding: 0 1rem;}
.sidebar-user li {display: flex; flex-flow: row nowrap; justify-content: center; list-style: none; width: 100%;}
.sidebar-user li img {filter: invert(56%) sepia(6%) saturate(0%) hue-rotate(143deg) brightness(96%) contrast(80%);}
.sidebar-user a {padding: .5rem 0; color: var(--color0-1); display: flex; align-items: center; text-align: center; width: 100%;}
.sidebar-user li a:hover, .sidebar-user li a:focus, .sidebar-user li a:active {color: var(--color1-2);}
.sidebar-user li:hover img, .sidebar-user li:focus img, .sidebar-user li:active img {filter: invert(61%) sepia(68%) saturate(450%) hue-rotate(26deg) brightness(93%) contrast(85%);}
.sidebar-user-active {background-color: var(--color1-1); width: 100%;}
.sidebar-user-active a {color: white;}
.sidebar-user-active img {filter: brightness(0%) saturate(100%) invert(100%);}

/* CATÁLOGO DE PRODUCTOS */
.catalogue {display: grid; grid-auto-flow: row; grid-gap: .5rem; grid-template-columns: minmax(100px, 400px) minmax(100px, 400px) minmax(100px, 400px); justify-items: center;}
.catalogue-filter {display: flex; flex-flow: row nowrap; justify-content: space-between; padding: 0 1rem;}
.catalogue-filter .catalogue {width: 80%; background-color: white; box-shadow: 0 0 .25rem 0 var(--color0-3); padding: 1rem .25rem; border-radius: 1rem;}

/* GRID */
.productGrid {position: relative; border-radius: .25rem; text-align: center; width: 15rem; transition: all .5s;}
.catalogue-img {display: flex; justify-content: center;}
.catalogue-img img {width: 15rem; min-height: 10rem; border-radius: .5rem;}
.productGrid .catalogue-body {display: flex; flex-flow: column nowrap; padding: .5rem;}
.productGrid .catalogue-resume, .productGrid .catalogue-details {display: none;}
/* .productGrid:hover {box-shadow: 0 0 1rem .1rem var(--color0-3);} */

/* LIST */
.productList {position: relative; display: flex; flex-flow: row nowrap; align-items: center; width: 100%; background-color: white; padding: 1rem;}
.productList:not(:first-child) {border-top: 1px solid var(--color0-3);}
.productList .catalogue-body {display: flex; flex-flow: row nowrap; justify-content: space-between; width: 80%; padding-left: 1rem;}
.productList .catalogue-body > div:nth-child(1) {display: flex; flex-flow: column nowrap; justify-content: space-between;}
.productList .catalogue-body > div:nth-child(2) {padding: 0 1rem; display: flex; flex-flow: column nowrap; align-items: center; justify-content: space-around;}
.productList .catalogue-name {overflow: visible;}
.productList .catalogue-details {display: flex; flex-flow: row nowrap; margin-top: 1rem;}
.productList .catalogue-details p {padding: .15rem .3rem; margin-right: .5rem; border: .05rem solid var(--color0-3); border-radius: .25rem; font-size: .8rem; color: var(--color0-2); text-align: center;}
.productList .catalogue-resume {display: flex; padding: 1rem 2rem 1rem 0; overflow: hidden; max-height: 5rem; font-size: 1rem; line-height: 1.3rem; width: 100%;}

.product-addcart {display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;}

.catalogue-name {overflow: hidden;}
.tab, .button-filter {display: none;}

/* FLOATINGS */
.menu-top-right {position: fixed; right: 0; z-index: 3; max-height: calc(100vh - 9.6rem); display: none;}
.menu-center {position: fixed; top: calc(50vh - 10rem); left: 50%; z-index: 2; overflow: auto; transform: translate(-50%, calc(-25% + 5rem)); max-height: calc(100vh - 10rem); display: none;}
.menu-left-full {position: fixed; left: 0; overflow: auto; z-index: 3; display: none;}
.menu-right-full {position: fixed; right: 0; overflow: auto; z-index: 3; display: none;}

/* FONDOS */
.fondo1 {background-image: url('/Assets/img/pictures/frutos.jpeg'); background-repeat: no-repeat; background-size: cover;}
.fondoWhite {background: rgba(255, 255, 255, .85); border-radius: 1rem;}

/* DESCRIPCIÓN DEL PRODUCTO */
#dp {display: flex; flex-flow: row wrap; margin: 0 2rem; background-color: white; box-shadow: .1rem .1rem .5rem 0 var(--color0-3); border-radius: 1rem;}
#album {display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: left; width: 30%;}
#mainimage-wrapper {width: 100%; padding: 2.5rem;}
#mainimage {display: block; width: 100%; border-radius: 1rem 0 0 0;}
#minialbum {display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;}
.minimage {width: 5rem; opacity: 0.75; cursor: pointer; padding: 0.25rem; margin-bottom: .25rem;}
.dp-cover {position: relative; width: 70%; padding: 0 1rem;}
.dp-variant {display: flex; flex-flow: row nowrap; align-items: center;}
.dp-variant p {margin: 0 1rem;}
.variant1 .item {width: 5rem;}
.variant2 .item {width: 15rem;}
.dp-variant .item {margin: 0.25rem; padding: 0.5rem; text-align: center; border: .05rem solid var(--color0-3); color: var(--color0-1); cursor: pointer; border-radius: .5rem; background-color: var(--color0-4);}
.dp-variant .item:hover, .dp-variant .item:focus, .dp-variant .item:active {border: .15rem solid var(--color1-2); color: var(--color0-1);}
.dp-variant .activeitem {border: .15rem solid var(--color1-2);}
.dp-detalle {display: flex; flex-flow: row nowrap; width: 100%; border-top: .05rem solid var(--color0-3);}
.dp-detalle div {width: 100%;}
.dp-detalle > div:nth-child(2) {border-left: .05rem solid var(--color0-3);}
.dp-comment {position: relative; padding: .5rem 1rem; border: .05rem solid var(--color0-3); border-radius: .5rem;}
.answer {margin-left: 1rem; border: .1rem solid var(--color1-1);}
.dp-descripcion {padding: 2rem;}
.dp-descripcion ol, .dp-descripcion ul {margin-left: 2rem;}
.dp-descripcion img {border-radius: 0 0 1rem 1rem; max-width:100%;}

/* --- CARRITO --- */
.cart-shopping {width: 100%; padding: 0.75rem 0;}
.cart-sku {padding: .5rem 0;}
/* .cart-sku:not(:last-child) {border-bottom: .05rem solid var(--color0-3);} */
.cart-img {overflow: hidden; width: 6rem; margin-right: 1rem;}
.cart-img img {width: 6rem; vertical-align: middle; border-radius: .5rem; overflow: hidden;}
.cart-total {text-align: right;}

/* --- PASOS DE COMPRA --- */
#stepline {display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; margin-bottom: 2rem;}
#stepline .step {display: flex; flex-flow: column nowrap; align-items: center; width: 8rem;}
#stepline span {padding: .5rem 1rem; font-size: 1rem; border: .1rem solid var(--color0-3); border-radius: .25rem; background-color: var(--color0-4);}
#stepline .activetab span {background-color: var(--color6-1); color: white;}
#stepline .finish span {color: white; background-color: var(--color1-1);}
#stepline .wrong span {color: white; background-color: var(--color5-1);}

/* FORMULARIOS */
.form-client {position: relative; width: auto; margin: 2rem; padding: 2rem; background-color: white; border-radius: .35rem; box-shadow: 0 0 1rem .1rem var(--color0-3); overflow: auto;}
.form-client-r {flex-flow: column nowrap; padding: 2rem; background-color: white; border-radius: .35rem; box-shadow: 0 0 .5rem 0 var(--color0-3); overflow: auto;}
form .website {display:none;}

.login {display: flex; flex-flow: row nowrap;}
.login > *:nth-child(1) {border-width: 0 .05rem 0 0; border-style: solid; border-color: var(--color0-3);}
.login > *:nth-child(2) > div {width: 100%;}

/* INPUT */
/* label {white-space:nowrap;} */
input[type='number'] {-moz-appearance:textfield;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;}
input, select {display: block; width: 100%; color: var(--color0-1); border: none; font-size:.85rem;}
select:disabled {background-color: var(--color0-4); opacity: 1;}
textarea {resize: none; width: 100%; height: 5rem; border: .05rem solid var(--color0-3)}
input[type=radio] {width: 1.5rem; height: 1.5rem;}
input[type=radio] + label {width: auto; cursor: pointer;}
input[type=radio]:checked + label {font-weight: bold;}
.btn-radio-1, .rating-stars {position: absolute; width: 0; height: 0; display: none;}
.opcionEnvio {text-align: left; border: .05rem solid var(--color0-3);}
.opcionEnvio-active {font-weight: bold; border: .05rem solid var(--color1-1);}
.btn-radio-1 + label {padding: .5rem .75rem; border: .05rem solid var(--color0-3); border-radius: .5rem; font-size: .85rem; font-weight: bold;}
.btn-radio-1:checked + label {text-align: left; font-weight: bold; border: .15rem solid var(--color1-1);}
.ratingStars img {filter: grayscale(100%);}
.rating-stars + img {cursor: pointer;}
.textarea-main {border-radius: .5rem; padding: 1rem;}
.input-square, .select-square, .textarea-square, .input-square-basic, .select-square-basic, .textarea-square-basic {position: relative;}
.input-square input, .select-square select, .textarea-square textarea {padding: 1.5rem 0.75rem 0.5rem 0.75rem; border: .05rem solid var(--color0-3); border-radius: .5rem;}
.input-square label, .select-square label, .textarea-square label {position: absolute; top: .5rem; left: .75rem; font-size: .75rem; transition: all .25s; color: var(--color0-2);}
.input-focus {font-size: .85rem !important; top: 1rem !important;}
.input-square input:focus, .input-square input:active, .select-square select:focus, .select-square select:active, .textarea-square textarea:focus, .textarea-square textarea:active {box-shadow: 0 0 .1rem .1rem var(--color3-1);}

.input-square-basic label, .select-square-basic label, .textarea-square-basic label {font-size: .8rem; transition: all .25s; color: var(--color0-1); font-weight: bold; display: block; padding: .25rem .5rem;}
.input-square-basic input, .select-square-basic select, .textarea-square-basic textarea {padding: .75rem; border: .05rem solid var(--color0-3); border-radius: .5rem;}
.input-square-basic input::placeholder, .textarea-square-basic::placeholder {color: var(--color0-2);}
.input-square-basic input:focus, .input-square-basic input:active, .select-square-basic select:focus, .select-square-basic select:active, .textarea-square-basic textarea:focus, .textarea-square-basic textarea:active {box-shadow: 0 0 .1rem .05rem var(--color1-2);}

.input-checkbox {display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;}
.input-checkbox input {width: 1rem; margin-right: .75rem;}
.input-checkbox label {cursor: pointer;}
.input-round {padding: .25rem .75rem; border: .05rem solid var(--color1-1); border-radius: 1rem;}
.invalid {border: .05rem solid var(--color5-1) !important;}
.checkbox-select-all {width: 2rem; margin: 0 auto;}

/* FILTRO */
#filter {width: 20%; height: 100%; margin: 0 2rem 0 1rem;}
#filter .input-round {max-width: 10rem;}
.filter-checkbox {display: flex; flex-flow: row wrap; list-style: none; font-size: .9rem;}
.filter-checkbox li label {display: flex; background-color: white; border: .05rem solid var(--color1-1); color: var(--color0-1); border-radius: 1rem; margin: 0 .25rem .5rem 0; transition: all .2s; padding: .25rem .5rem; cursor: pointer;}
.filter-checkbox input:hover + label, .filter-checkbox input:focus + label, .filter-checkbox input:active + label {border: .05rem solid var(--color1-2); color: var(--color1-2);}
.filter-checkbox input[type="checkbox"] {position: absolute; opacity: 0; width: auto;}
.filter-checkbox input[type="checkbox"]:checked + label:before {content: "\2713"; font-size: 0.8rem; transform: rotate(-360deg); transition: transform .3s ease-in-out;}
.filter-checkbox input[type="checkbox"]:checked + label {background-color: var(--color1-2); color: white; transition: all .2s;}
.filter-checkbox label::before {display: inline-block; margin-right: 0.25rem; content: "+"; transition: transform .3s ease-in-out;}
.input-switch {display: flex; flex-flow: row nowrap; align-items: center;}
.input-switch > div {margin-left: .75rem;}
.input-switch > label {margin-left: .75rem;}
.input-switch label {font-size: .9rem; color: var(--color0-1); display: block;}
.input-switch input[type="checkbox"] {display: none;}
.switch {position: relative; min-width: 3rem; height: 1.5rem;}
.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 1rem;}
.slider:before {position: absolute; content: ""; height: 1rem; width: 1rem; left: .25rem; bottom: .25rem; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 50%;}
.switch input:checked + .slider {background-color: var(--color1-2);}
.switch input:checked + .slider:before {-webkit-transform: translateX(1.5rem); -ms-transform: translateX(1.5rem); transform: translateX(1.5rem);}

/* TABLAS */
table {border-collapse: collapse;}
.table-normal {margin: 0 auto; font-size: .9rem; text-align: center;}
.table-normal th {padding: 0.25rem;}
.table-normal td {padding: 0.25rem; color: var(--color0-1); border: .05rem solid var(--color0-3);}

.table-comp {display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;}
.table-comparative {display: block; /*border: 1px solid var(--color1-3);*/}
.table-comparative thead:nth-child(1) {background-color: white; border: .05rem solid var(--color0-3);}
.table-comparative th {padding: 2rem 1rem;}
.table-comparative tbody tr:first-child td {border-top: none; padding-top: .75rem;}
.table-comparative tbody td {text-align: center; padding: .5rem; border-width: 1px; border-style: solid; border-color: var(--color0-3); max-width: 25rem;}
.table-comparative .conceptButton {text-align:left;}
.table-comparative .conceptButton:hover, .table-comparative .conceptButton:active, .table-comparative .conceptButton:focus {color: var(--color1-3);}
.table-comparative .conceptButton:after {content: "\27A4"; margin-left: .5rem; color: var(--color0-2);}

.table-admin-container {overflow: auto; max-height: calc(100vh - 15rem);}
.table-admin {font-size: .8rem; border-radius: 2rem; text-align: center; width: 100%;}
.table-admin th {padding: .5rem; background-color: var(--color1-2); color: white; font-weight: normal;}
.table-admin td {padding: .5rem; color: var(--color0-1); text-align: center;}
.table-admin tr:nth-child(even) {background-color: #f5f5f5;}
.table-admin tr:nth-child(odd) {background-color: white;}
.table-admin th:first-child {border-radius: 1rem 0 0 0;}
.table-admin th:last-child {border-radius: 0 1rem 0 0;}
.table-admin tr:last-child td:first-child {border-radius: 0 0 0 1rem;}
.table-admin tr:last-child td:last-child {border-radius: 0 0 1rem 0;}

.table-admin-container::-webkit-scrollbar {width: 0.5rem; height: 0.5rem;}
.table-admin-container::-webkit-scrollbar-track {background: var(--color0-3); border-radius: 1rem;}
.table-admin-container::-webkit-scrollbar-thumb {background: var(--color0-2); border-radius: 1rem;}
.table-admin-container::-webkit-scrollbar-thumb:hover, .table-admin-container::-webkit-scrollbar-thumb:active {background: var(--color0-1);}

.resumenCompra, .detalleCompra {background-color: var(--color0-4); color: var(--color0-1); border-radius: 1rem; padding: 1rem; border: .05rem solid var(--color0-3);}
.resumenCompra p {display: flex; flex-flow: row nowrap; justify-content: space-between; padding: .25rem 1rem;}
.resumenCompra span:first-child {margin-right: 5rem;}

.informacion-nutricional {color: black; border: .2rem solid black; width: 60%;}
.informacion-nutricional th {font-size: 1rem; font-weight: bold; border-bottom: .3rem solid black; padding: .2rem 0;}
.informacion-nutricional td:first-child {padding: 0 .5rem;}
.informacion-nutricional td:last-child {padding: 0 .5rem; text-align: right;}
.informacion-nutricional thead tr:nth-child(2) td, .informacion-nutricional tbody tr:first-child td, .informacion-nutricional tfoot tr:first-child td {padding-top: .5rem;}
.informacion-nutricional thead tr:last-child td, .informacion-nutricional tbody tr:last-child td, .informacion-nutricional tfoot tr:last-child td {padding-bottom: .5rem; border-bottom: .15rem solid black;}

/* OBJETOS */
.button-quantity {border: .05rem solid var(--color0-3);}
.button-quantity input {width: 2.5rem; padding: .5rem; text-align: center;}
.btn-operator {width: 100%; color: var(--color0-2); padding: .1rem .35rem;}
.btn-operator:first-child {border-right: .05rem solid var(--color0-3);}
.btn-operator:last-child {border-left: .05rem solid var(--color0-3);}
.btn-addcart, .wishlist-off, .wishlist-on {width: 1.75rem; height: 1.75rem; background-repeat: no-repeat; background-size: 100%; background-position: center; filter: grayscale(100%); opacity: .4;}
.btn-addcart {background-image: url("/Assets/img/icons/cart-black.png");}
.wishlist-off {background-image: url("/Assets/img/icons/heart-black.png"); background-size: 85%;}
.btn-addcart:hover, .btn-addcart:focus, .btn-addcart:active,
.wishlist-off:hover, .wishlist-off:focus, .wishlist-off:active {filter: invert(71%) sepia(18%) saturate(6152%) hue-rotate(312deg) brightness(81%) contrast(102%); opacity: .6;}
.wishlist-on {background-image: url("/Assets/img/icons/heart-black.png"); filter: grayscale(100%); filter: invert(40%) sepia(87%) saturate(325%) hue-rotate(313deg) brightness(100%) contrast(101%); background-size: 85%; opacity: 100;}
#loading {position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 5; background-color: white;}
#loading img {width: 30rem;}
.btn-help {cursor:pointer;}
.btn-circle-black {display: inline-block; text-align: center; font-size: 0.7rem; font-weight: bold; border-radius: 100%; padding: .05rem .25rem 0 .25rem; color: white; background-color: black; line-height: .8rem;}
.btn-circle-black:hover, .btn-circle-black:active {background-color: var(--color0-2);}
.msg-help {position: absolute; z-index: 3; display: none; background-color: white; box-shadow: 0 0 .25rem .1rem var(--color0-3); padding: 1rem; max-width: 50vw; max-height: 75vh; overflow: auto;}
.separacion {background-color: var(--color1-1); height: .25rem; width: 4rem; border-radius: .5rem;}

.scrollh-leftarrow-large, .scrollh-rightarrow-large {position: absolute; height: 3rem; width: 3rem; font-size: 2rem; background-color: var(--color1-1); color: white; border-radius: 100%; vertical-align: top;}
.scrollh-leftarrow-large, .scrollh-rightarrow-large {top: 50%; transform: translate(-50%, -50%);}
.scrollh-leftarrow-large {left: 2rem;}
.scrollh-rightarrow-large {right: -1rem;}
.scrollh-leftarrow-large:hover, .scrollh-leftarrow-large:focus,, .scrollh-leftarrow-large:active,
.scrollh-rightarrow-large:hover, .scrollh-rightarrow-large:focus, .scrollh-rightarrow-large:active {box-shadow: 0 0 .15rem 0 var(--color1-1);}

.rrss {display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;}
.rrss img {filter: invert(32%) sepia(0%) saturate(0%) hue-rotate(159deg) brightness(96%) contrast(87%); display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;}

.rrss-share, .rrss-share a, .rrss-share div {display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;}
.rrss-share img {width: 1.5rem; height: 1.5rem;}
.rrss-share img:hover, .rrss-share img:focus, .rrss-share img:active {filter: invert(83%) sepia(31%) saturate(233%) hue-rotate(123deg) brightness(91%) contrast(86%);}

/* BOTONES */
button {display: flex; align-items: center; justify-content: center; color: var(--color0-1); font-size: .85rem; border: none; cursor: pointer; text-align: center; background: none; transition: all .25s;}
button[disabled], button[disabled]:hover {opacity: .5 !important;}
.btn0 {padding: .5rem 1.5rem; background-color: var(--color0-3); color: var(--color0-1); margin: .5rem 0; border-radius: 2.5rem;}
.btn0:hover {background-color: var(--color0-2); color: white;}
.btn1-1 {background-color: var(--color1-1); padding: 0.5rem 1.5rem; color: white; border-radius: .5rem; font-weight: bold; white-space: nowrap;}
.btn1-1:hover, .btn1-1:focus, .btn1-1:active {opacity: .75;}
.btn1-1-empty {background-color: white; padding: 0.5rem 1.5rem; color: var(--color1-1); border-radius: .5rem; font-weight: bold; white-space: nowrap; border: .15rem solid var(--color1-1);}
.btn1-1-empty:hover, .btn1-1-empty:focus, .btn1-1-empty:active {background-color: var(--color1-1); color: white;}
.btn1-2 {background-color: var(--color1-2); padding: 0.5rem 2rem; color: white; border-radius: .5rem; font-weight: bold;}
.btn1-2:hover, .btn1-2:focus, .btn1-2:active {opacity: .8;}
.btn1-3 {background-color: var(--color1-3); padding: 0.5rem 1.5rem; color: white; border-radius: .5rem;}
.btn1-3:hover, .btn1-3:focus, .btn1-3:active {opacity: .75;}
.btn3 {background-color: var(--color3-1); padding: 0.5rem; color: var(--color0-4); margin: .5rem 0; border-radius: 2.5rem;}
.btn3:hover, .btn3:focus, .btn3:active {background-color: var(--color3-2);}
.btn5-1 {background-color: var(--color5-1); padding: 0.75rem; color: white; margin: .5rem 0; border-radius: 2.5rem;}
.btn-link {border: .05rem solid var(--color1-1); color: var(--color1-1); padding: .2rem .4rem; border-radius: .25rem;}
.btn-link:hover, .btn-link:active {background-color: var(--color1-1); color: white;}
/* .btn-vertodos {padding: .5rem .5rem; font-weight: bold; background-color: var(--color0-2); color: white; border-radius: 0 0 1rem 1rem; text-align: center; margin: 0 1rem 1rem 1rem;} */
/* .btn-vertodos:hover, .btn-vertodos:active, .btn-vertodos:focus {background-color: var(--color1-3);} */
.btn-white-transparency {color:#737F26; background: rgba(255,255,255, 0.65); padding: 1rem 2rem; font-weight:bold; font-size:2.5rem; border-radius:2rem; text-align:center;}

.btn-list {width: 100%; padding: 0.75rem; margin: 0.25rem 0; background-color: var(--color0-4); color: var(--color0-1); border: .05rem solid var(--color0-3); border-radius: .25rem; font-size: 1rem;}
.btn-list:hover, .btn-list:focus, .btn-list:active {background-color: var(--color1-3); box-shadow: 0 .075rem .25rem 0 var(--color0-3); color: white;}
.btn-more {padding: .5rem .75rem; background-color: var(--color1-1); color: white; border-width: 0 .05rem .05rem .05rem; border-style: solid; border-color: var(--color0-3); border-radius: .25rem; font-size: 1rem;}
.btn-more:hover, .btn-more:focus, .btn-more:active {background-color: var(--color1-3); color: white; box-shadow: 0 .075rem .25rem 0 var(--color0-3);}
.btnLoadProduct {grid-column: span 3;}
.collapsible {display: flex; justify-content: space-between; width: 100%; padding: 1rem; background-color: white; color: var(--color0-1); border: .05rem solid var(--color1-1); border-radius: 1rem; font-size: 1rem;}
.collapsible:not(:first-child) {margin-top: .5rem;}
.collapsible:hover, .collapsible:focus, .collapsible:active, .collapsible-active {background-color: var(--color1-1); color: white;}
.button-arrow:after {content: "\2335"; margin-left: 0.25rem; font-weight: bold;}
.button-arrow:hover, .button-arrow:focus, .button-arrow:active {color: var(--color1-2);}
.button-arrow-active:after {display: block; transform: rotate(180deg);}
.btn-pad {background-color: white; color: var(--color0-1); box-shadow: 0 0 .25rem .05rem var(--color0-3); border-radius: .25rem;}
.btn-pad:hover, .btn-pad:focus, .btn-pad:active {box-shadow: 0 0 .25rem .05rem var(--color1-2);}
.btn-pad-active {background-color:var(--color1-1); color:white;}
.btn-active {box-shadow: 0 .075rem .15rem 0 var(--color1-1);}
.btn-drop-option:focus, .btn-drop-option:hover, .btn-drop-option:active {background-color: var(--color0-3); border-radius: 100%;}
.btn-option-collapsible {font-size: .8rem; text-align: left; width: 100%; padding: .5rem 0;}
.btn-option-collapsible:hover, .btn-option-collapsible:active, .btn-option-collapsible:focus {background-color: var(--color0-3);}
.collapsible-list {position: absolute; width: 100%; background-color: white; z-index: 1; display: none; border-width: 0 .05rem .05rem .05rem; border-style: solid; border-color: var(--color0-3);}
#opcionesEnvio {display: flex; flex-flow: column nowrap; justify-content: space-around;}
.btn-option {width: 100%; white-space: nowrap; padding: .5rem 1rem; font-size: 1.2rem;}
.btn-option:hover, .btn-option:focus, .btn-option:active {color: var(--color3-1);}
.cart-remove:hover, .cart-remove:focus, .cart-remove:active {opacity: .6;}

.divOptions {position: absolute; top: 3.5rem; right: .5rem; display: none; flex-flow: column nowrap; align-items: flex-end; background-color: white; border: .05rem solid var(--color0-3); box-shadow: 0 .075rem .15rem 0 var(--color0-3); z-index: 1;}

.btn-close {position: absolute; top: 0; right: 0; font-size: 1.5rem; padding: .7rem 1rem; color: var(--color0-2); border-radius: 100%;}
.btn-close:hover, .btn-close:focus, .btn-close:active {color: var(--color5-1);}

/* DESPLEGABLES */
.collapsible:after {content: "\25b2"; color: var(--color0-2); margin-left: 1rem;}
.collapsible-active:after {content: "\25bc";}
.collapsible-active:after, .collapsible:hover:after {color: white;}
.collapsible-content {display: none; transition: all 0.25s ease-out; padding: 1rem; border-width: 0 .05rem .05rem .05rem; border-style: solid; border-color: var(--color1-1); width: 98%; margin: 0 auto; background-color: white;}

/* DESLIZANTES */
#slides-principal {position: relative; width: 100%;}
.slides {position: relative; display: flex; width: 100%; height: calc(100vh - 28rem); transition: transform 0.5s ease-in-out;}
.slide {width: 100%; flex: 0 0 100%; position: relative;}
.slide > img {width: 100%; height: 100%; object-fit: cover; border-radius: .5rem;}

#banner-principal-1 {content:url('/Assets/img/pictures/Banner-principal-1.jpg'); object-position: center 20%;}
#banner-principal-1 + .slide-title {position: absolute; top: 23%; left: 50%; width: 40%; color: black; font-size: 1.2rem;}
#banner-principal-2 {content:url('/Assets/img/pictures/Banner-principal-2.jpg'); object-position: center 20%;}
#banner-principal-2 + .slide-title {position: absolute; top: 23%; left: 50%; width: 40%; color: black; font-size: 1.2rem;}
#banner-principal-3 {content:url('/Assets/img/pictures/Banner-principal-3.jpg'); object-position: center center;}
#banner-principal-3 + .slide-title {position: absolute; top: 25%; right:5%; width: 30%; color: black; text-align: center;}
#banner-principal-4 {content:url('/Assets/img/pictures/Banner-principal-4.jpg'); object-position: 35% 25%;}
#banner-principal-4 + .slide-title {position: absolute; top: 50%; left: 25%; width: 50%; text-align: center;}
#banner-principal-5 {content:url('/Assets/img/pictures/Banner-principal-5.jpg'); object-position: 35% 25%;}
#banner-principal-5 + .slide-title {position: absolute; top: 30%; right: 7.5%; width:25%; color:#683C11; text-align: center;}

.dot {width: 0.75rem; height: 0.65rem; border: .1rem solid var(--color1-1); border-radius: 100%; margin: 0 .25rem; background-color: white; transition: all 0.5s ease;}
.dot:hover, .dot:focus, .dot:active {background-color: var(--color1-1);}
.activeslide {background-color: var(--color1-1); width: 1.8rem; border-radius: .5rem;}
.fade {animation-name: fade; animation-duration: 1s; -webkit-animation-name: fade; -webkit-animation-duration: 1s;}

/* CARRUSEL */
.carousel {overflow: hidden;}
.carousel > div {display: flex; transition: transform 0.5s ease-in-out;}

@keyframes fade {from {opacity: .4} to {opacity: 1}}
@-webkit-keyframes fade {from {opacity: .4} to {opacity: 1}}

/* MEDIOS DE PAGO Y ENVÍO */
.info-politics {display: flex; flex-flow: row nowrap; align-items: center; background-color: white;}
.info-politics > div:nth-child(2) {border-left: .05rem solid var(--color0-3);}
.info-politics img {height: 1.8rem;}
.info-politics div:first-child img:nth-child(1) {margin: 0 0.5rem; height: 1.6rem;}
.info-politics div:last-child img:nth-child(1) {margin: 0 0.5rem;}
#dp .info-politics {border-top: 1px solid var(--color0-3);}

.mlCuenta p {margin: .5rem 2rem;}

/* PIE DE PÁGINA */
footer {display: flex; flex-flow: column nowrap; align-items: center; justify-content: space-around; background-color: white; /*min-height: 100vh;*/ border-top: 1px solid var(--color0-3);}
footer ul {list-style: none;}
.footer-main {position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; width: 100%; padding: 6rem 5rem;}
.footer-main > nav {font-size: 1.2rem;}
.footer-list {display: flex; flex-flow: row nowrap; justify-content: center;}
.footer-list > div:not(:last-child) {margin-right: 5rem;}

.footer-business {margin-right: 2rem;}
.footer-business > * {white-space: nowrap; overflow: hidden; line-height: 1.2rem;}
.footer-business .rrss img {width: 1.5rem;}

.footer-secondary {background-color: white; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; width: 100%; padding: 2rem 2rem 3rem 2rem; color: black; border-top: 1px solid var(--color0-3);}
.footer-list a:link, .footer-list button {color: var(--color0-1);}
footer a:visited {color: var(--color0-1);}
footer a:hover, footer a:focus, footer a:active, footer nav button:hover, footer nav button:focus, footer nav button:active {text-decoration: underline; text-underline-position: under; text-underline-offset: 4px; text-decoration-color: var(--color1-2);  text-decoration-style: solid; text-decoration-thickness: 2px; text-decoration-skip: ink;}

/* AJUSTES DE VISUALIZACIÓN */
@media only screen and (max-width: 2500){
	/* html {font-size: 22px;} */
}
@media only screen and (max-width: 1920px){
	/* html {font-size: 20px;} */
}
@media only screen and (max-width: 1500px){
	.grid-reseñas {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem;}
	.section-planes {background: linear-gradient(0deg, white 25%, var(--color1-2) 25%);}
	.scroll-content {grid-template-columns: repeat(2, 1fr); grid-gap: 3rem 2rem;}
}
@media only screen and (max-width: 1280px){
	/* #banner-principal-1 {object-position: 70% center;} */
	#banner-principal-1 + .slide-title {width: 40%;}
	.integraciones {grid-template-columns: repeat(3, 1fr);}
	.blog-grid {grid-template-columns: repeat(1, 1fr); grid-gap: 2rem 0;}
}
@media only screen and (max-width: 1024px){
	.login {flex-flow: column-reverse nowrap;}
	.login > *:nth-child(1) {border-width: .05rem 0 0 0;}
	#search {min-width: 50%;}
	#search-btn {display: flex;}
	#search-visible {display: none;}
	.references {padding: 1.5rem 0;}
    #dp > div {width: 100%; height: 100%;}
    #mainimage {max-width: 100%; width: 50%; border-radius: 1rem 1rem 0 0; margin: 0 auto;}
    .dp-cover {border: none;}
	.dp-detalle {flex-flow: column wrap;}
	.dp-detalle > div:nth-child(2) {border-left: none;}
    #filter {display: none; width: auto; max-height: 0; transition: all 0.5s; margin: 0 0 2rem 0;}
    .button-filter {display: flex; flex-flow: row nowrap; background-color: white; border: .05rem solid var(--color0-3); color: var(--color0-1); font-size: 1rem; padding: 0.75rem;}
    .button-filter:hover, .button-filter:focus, .button-filter:active {border: .05rem solid var(--color1-1); color: var(--color1-1);}
    .button-filter-active {border: .05rem solid var(--color1-1); color: var(--color1-1);}
    .catalogue-filter {flex-flow: column nowrap; align-items: center;}
    .catalogue-filter .catalogue {width: 100%;}
	.productList .catalogue-body {flex-flow: row wrap;}
	.productList .catalogue-body > div:nth-child(2) {flex-flow: row wrap; margin-top: .5rem;}
	.productList .catalogue-resume {padding: 1rem 0 1rem 0;}
	#registros {text-align: center;}
    .info-politics {flex-flow: column nowrap;}
    .info-politics > div:nth-child(1) {border: none; border-bottom: .05rem solid var(--color0-3);}
	.info-politics > div:nth-child(2) {border: none;}
	#nosotros {display: flex;flex-flow: column nowrap;align-items:center; justify-content: center; padding: 5rem 7rem;}
	#nosotros > div:first-child {display: flex; flex-flow: column nowrap; align-items: center; width: 100%; margin-bottom: 2rem; padding-bottom: 15rem;}
	#nosotros .form-contact {position:absolute; bottom: -12rem;}
	#nosotros-debajo {padding-top: 17rem !important;}
	#preguntas-frecuentes {padding-top: 17rem !important;}
	.grid-reseñas {display: flex; flex-flow: column nowrap; align-items: center;}
	.reseñas {flex-flow: column nowrap; align-items: center;}
	.reseñas > .reseña:not(:last-child) {margin: 0 0 2rem 0;}
	.reseña {min-width: 90%; max-width: 90%;}
	.cntSide {flex-flow: column nowrap;}
	.cntSide:nth-child(even) {flex-flow: column-reverse nowrap;}
	.cntSide:not(:last-child) {margin-bottom: 4rem;}
	.cntSide img {width: 15rem;}
	.cntSide > div {width: 100%;}
	.cntSide > *:nth-child(1) {margin: 1rem 1rem 0rem 1rem; width: 100%; text-align:center;}
	.cntSide > *:nth-child(2) {margin: 1rem 1rem 0rem 1rem; width: 100%; text-align:center;}
	/* #banner-principal-1 {object-position: 75% center;} */
	/* #banner-principal-1 + .slide-title {top: 10%; left: 7.5%; width: 40%;} */
}
@media only screen and (max-width: 840px){
    /* html {font-size: 13px;} */
	/* .slides {height: 110vh;} */
	/* .webp #banner-principal-1 {content:url('/Assets/img/pictures/Banner-principal-cel-1.webp'); object-position: center top;} */
	.no-webp #banner-principal-1 {content:url('/Assets/img/pictures/Banner-principal-cel-1.jpg'); object-position: center 50%;}
	.no-webp #banner-principal-2 {content:url('/Assets/img/pictures/Banner-principal-cel-2.jpg'); object-position: center 50%;}
	.no-webp #banner-principal-3 {content:url('/Assets/img/pictures/Banner-principal-cel-3.jpg'); object-position: center top;}
	.no-webp #banner-principal-4 {content:url('/Assets/img/pictures/Banner-principal-cel-4.jpg'); object-position: center top;}
	.no-webp #banner-principal-5 {content:url('/Assets/img/pictures/Banner-principal-cel-5.jpg'); object-position: center top;}
	#banner-principal-1 + .slide-title {text-align: center; top: 30%; left: 5%; width: 90%;}
	#banner-principal-2 + .slide-title {text-align: center; top: 30%; left: 5%; width: 90%;}
    .footer-main {flex-flow: column nowrap; align-items: center;}
	.footer-business {margin-right: 0; margin-bottom: 4rem;}
	.footer-list {display: flex; flex-flow: column nowrap; justify-content: center;}
	.footer-list > div:not(:last-child) {margin-bottom: 3rem;}
	.cart-shopping > div > * {margin: .25rem;}
	.halfDiv {width: 100%;}
	/* .slides {aspect-ratio: 425/638;} */
	.catalogue {grid-gap: .5rem; grid-template-columns: repeat(2, 1fr);}
	.btnLoadProduct {grid-column: span 2;}
	.product-addcart {flex-flow: row wrap;}
	.section-planes {background: linear-gradient(0deg, white 15%, var(--color1-2) 15%);}
	.scroll-content {display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 2rem 1rem;}
	.integraciones {grid-template-columns: repeat(2, 1fr);}
	.blog-container-main {flex-flow: column nowrap; align-items: center;}
	.blog-container-main >*:not(:last-child) {margin: 0 0 2rem 0;}
	.blog-container-main > div:nth-child(1) {width: 100%;}
	.blog-container-main > div:nth-child(2) {width: 100%;}
	.table-comp {align-items: flex-start; overflow: auto;}
	#logo img {width: 10rem;}
	.video-home {max-width: 90%;}
}
@media only screen and (max-width: 600px){
	/* header {padding: 0 1.5rem;} */
    html {font-size: 14px;}
	.grecaptcha-badge {top: 75% !important;}
    .menu-options {flex-flow: column nowrap;}
    .slide1-content, .slide2-content, .slide3-content {top: 25%;}
	.form-client {padding: 1rem;}
	.footer-secondary {display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;}
	.footer-secondary > div {margin-bottom: 2rem;}
	#nosotros .form-contact {bottom: -20rem;}
	#nosotros-debajo {padding-top: 28rem !important;}
	#preguntas-frecuentes {padding-top: 28rem !important;}
	.contacto-container {flex-flow: column-reverse nowrap;}
	.contacto {flex-flow: row nowrap; align-items: flex-start; border-top: 1px solid var(--color0-3); border-right: none; padding: 2rem 0 0 0;}
	.contacto >*:not(:last-child) {margin: 0 2rem 0 0;}
	#formContacto {padding: 0 0 3rem 0; width: 100%;}
	/* .slides {height: 110vh;} */
}
@media only screen and (max-width: 480px){
	html {font-size: 11px;}
	/* #banner-principal-1 + .slide-title {top:10%;} */
	.productGrid {max-width:100%;}
	.catalogue {grid-gap: .1rem; grid-template-columns: minmax(100px, 200px) minmax(100px, 200px);}
	.integraciones {grid-gap: 3rem 5rem;}
	#pagoexpress {display: none;}
	/* .slides {height: 100vh;} */
	#logo img {width: 8rem;}
}
@media only screen and (max-width: 360px){
    html {font-size: 10px;}
	.integraciones {grid-gap: 3rem 4rem;}
}
@media only screen and (max-width: 280px){
    html {font-size: 8px;}
	.catalogue {grid-gap: .5rem; grid-template-columns: repeat(1, 1fr);}
	.btnLoadProduct {grid-column: span 1;}
	.catalogue .productGrid .catalogue-img img {width: 100%;}
}
@media only screen and (max-width: 240px){
    html {font-size: 7px;}
}
/* * {border: 1px solid black;} */