/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}



/* ==========================================================================
   Estilos de Página
   ========================================================================== */

html, body {
    min-height: 100vh;
    margin: 0;
    background-color: #F7F5F5;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-smooth: always;
}


/*Links*/
a:link {
   color:inherit;
}

a:-webkit-any-link {
    text-decoration:none;
}

a, a:hover, a:active, a:focus { 
    outline: none; 
}
/*Links*/

/*Formas*/
button::-moz-focus-inner {
    border: 0;
}

input::-moz-focus-inner { 
  border: 0; 
}

textarea::-moz-focus-inner { 
  border: 0; 
}

input: focus, input:active {
    border: 0;
    outline: none;
}

textarea: focus, input:active {
    border: 0;
    outline: none;
}

input[type='range'], 
input[type='range']:focus, 
input[type='range']:active, 
input[type='range']::-moz-focus-inner, 
input[type='range']:-moz-focusring {
    border: 0;
    outline: none;
}

input, textarea {
    border: 0;
}

textarea {
    resize: none;
}

input {
    border-radius: 0;
}

input {
    -webkit-appearance: none;
}
/*Formas*/


/*Sombras para SVG*/
.sombraSVG {
    -webkit-filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.3));
            filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.3)); /* Same syntax as box-shadow */
}
/*Sombras para SVG*/


/* ==========================================================================
   Layout
   ========================================================================== */
/*Esto es para evitar que se quede pegado en Chrome por estar Fixed*/
.fixed {
    position: fixed;
    -webkit-transform: translateZ(0); 
}


/*Alinear Verticalmente*/
.verticalAlign {display: table;}

.top, .middle, .bottom {display: table-cell;}

.top {vertical-align: top;}

.middle {vertical-align: middle;}

.bottom {vertical-align: bottom;}

.fill {width:100%; height:100%;}

.width100 {width:100%;}

.height100 {height:100%;}


/*Padding y Márgenes*/
.paddingA { padding: 7.08vw 8.5vw; }
.marginA { margin: 7.08vw 8.5vw; }

.paddingB { padding: 4.25vw 5.666vw; }
.marginB { margin: 4.25vw 5.666vw; }

.paddingC { padding: 2.125vw; }
.marginC { margin: 2.125vw; }



/* ========================================
   Animaciones
   ======================================== */
.light { font-weight: 300; }
.mayus { text-transform: uppercase; }




/* ========================================
   Animaciones
   ======================================== */

.transition.all {
    -webkit-transition-property: all;
    transition-property: all;
}

.transition.in {
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
}

.transition.out {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.transition.inOut {
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.transition.dur150 {
    -webkit-transition-duration: 150ms;
    transition-duration: 150ms;
}

.transition.dur200 {
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
}

.transition.dur250 {
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
}

.transition.dur300 {
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
}

.transition.dur350 {
    -webkit-transition-duration: 350ms;
    transition-duration: 350ms;
}

.transition.dur400 {
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
}

.transition.dur450 {
    -webkit-transition-duration: 450ms;
    transition-duration: 450ms;
}

/*Transiciones*/
.ejemploDeTransformacion {
    -webkit-transform: translateY(6px) rotate(135deg);
    transform: translateY(6px) rotate(135deg);
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms;
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
}

.ejemploDeTransicion {
    -webkit-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
}
/*Transiciones*/


/************ Modales ***************/

/*Modificaciones a los modales de Bootstrap*/
.modal {
    color: #3e3e3e;
}
.modal-content {
    background-color: #FAF7F7;
    border-radius: 0 !important;
    padding: 16px;
}
.modal-content h6 {
    font-size: 28px;
    line-height: 1;
    margin: 0;
    text-align: left;
    margin-bottom: 16px;
}
.modal-content button.close {
    position: absolute;
    left: 100%;
    top: -8px;
    width: 40px;
    height: 40px;
}
.modal-content button.close img {
    height: 24px;
    width: 24px !important;
}

.modal-sm {
    width: 540px;
}
.modal-md {
    width: 720px;
}
.modal-lg {
    width: 996px;
}


/*Modificaciones a los modales de Bootstrap*/

/* ==========================================================================
   Los estilos del sitio
   ========================================================================== */

/*************** UI ***************/
.general-content h2 {
    text-transform: uppercase;
    font-size: 32px;
    display: inline-block;
    margin-bottom: 0;
}
.modal .general-content h2 {
    font-size: 21px;
    margin-top: 32px;
}
/*Este link está pensado para utilizarse como un Leer Más*/
.general-content h2 + a {
    font-size: 21px;
    color: #ccc;
    font-weight: 700;
    margin-left: 6px;
}
.modal .general-content h2 + a {
    font-size: 16px;
}
.general-content h2 + a:hover {text-decoration: underline;}
.general-content h2 + a:visited {color: #ccc;}

.general-content h3 {
    font-size: 21px;
    font-weight: 700;
    color: #291737;
    margin-top: 0;
}

.general-content h3:only-child {
    margin: 0;
}

.general-content + .general-content h2 {
    margin-top: 0;
}

.standard-card {
    background-color: #fff;
    padding: 16px;
    margin-bottom: 16px;
}

.standard-card .show-collapse h3,
.product-list-header h3 {
    display: inline-block;
    margin-bottom: 0;
}

.standard-card .show-collapse .caret-button {
    position: relative;
    float: right;
    color: #9a9a9b;
    padding-right: 32px;
    font-size: 0.95em;
    padding-top: 8px;
    cursor: pointer;
}
.standard-card .show-collapse .caret-button:hover {
    text-decoration: underline;
}
.standard-card .show-collapse .caret-button:after {
    position: absolute;
    top: 13px;
    right: 4px;
    width: 16px;
    height: 8px;
    background-image: url(../img/icn_gral_down-arrow-dark.svg);
    background-repeat: no-repeat;
    -webkit-transition: all 290ms ease-in-out;
    transition: all 290ms ease-in-out;
    content: '';
}
.standard-card .show-collapse .caret-button:hover:after {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
}
.standard-card .show-collapse.in .caret-button:after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.standard-card .show-collapse.in .caret-button:hover:after {
    -webkit-transform: rotate(180deg) translateY(3px);
    transform: rotate(180deg) translateY(3px);
}

.product-filter table {
    width: 100%;
    margin-top: 8px;
}
.product-filter thead {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
}
.product-filter table tr {
    table-layout: fixed;
    vertical-align: top;
}
.product-filter ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    margin-top: 4px;
}
.product-filter li {
    padding: 0.3em 0;
}
.product-list-header {
    margin-bottom: 4px;
}
.product-list-header .ui.select {
    float: right;
    width: 180px;
}
/* Select */
.ui.select {
    position: relative;
    height: 28px;
    margin-bottom: 8px;
    color: #3e3e3e;
}
.ui.select.normal {
    font-size: 14px;
    height: 28px;
    margin-bottom: 8px;
}
.ui.select.tablet-small,
.ui.select.small,
.ui.select.underline {
    font-size: 12px;
    height: 24px;
}
.ui.select.simple {
    font-size: 14px;
    height: 24px;
    margin-bottom: 6px;
}
.ui.select.simple-small {
    font-size: 12px;
    height: 22px;
    margin-bottom: 6px;
}
.ui.select.underline {
    margin-top: -1px !important;
}
.ui.select .pretty-ui {
    width: 100%;
    height: 100%;
    padding-top: 3px;
    padding-right: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transition: all 120ms ease-in;
    transition: all 120ms ease-in;
}
.ui.select.simple .pretty-ui {
    padding-top: 2px;
}
.ui.select.normal .pretty-ui,
.ui.select.small .pretty-ui,
.ui.select.tablet-small .pretty-ui {
    padding-left: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.ui.select.small .pretty-ui,
.ui.select.tablet-small .pretty-ui {
    padding-left: 10px;
    padding-right: 24px;
}
.ui.select.simple-small .pretty-ui {
    padding-left: 4px;
    padding-right: 20px;
}
.ui.select.underline .pretty-ui {
    font-size: 13px;
    font-weight: 700;
    color: #ccc;
}
.ui.select .pretty-ui:after {
    position: absolute;
    top: 12px;
    right: 9px;
    border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(62, 62, 62, 0);
	border-top-color: #3e3e3e;
}
.ui.select.tablet-small .pretty-ui:after,
.ui.select.small .pretty-ui:after,
.ui.select.simple-small .pretty-ui:after {
    top: 10.5px;
}
.ui.select.simple-small .pretty-ui:after {
    top: 9px;
    right: 7px;
}
.ui.select select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}
.ui.select:hover .pretty-ui:after {
    border-top-color: #614870;
}
.ui.select.normal:hover .pretty-ui,
.ui.select.small:hover .pretty-ui,
.ui.select.tablet-small:hover .pretty-ui {
    border: 1px solid #614870;
}
.ui.select.simple:hover .pretty-ui {
    color: #614870;
}
/* Select */

/* No List Style */
.no-list-style {
    list-style: none;
    padding-left: 0;
}
/* No List Style */

/* Campos de Texto General */
textarea.ui.field,
.ui.field textarea,
input[type="text"].ui.field,
.ui.field input,
button.ui.field,
.ui.field button {
    outline: none;
    letter-spacing: normal;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/**
 * input::-moz-input-placeholder,
 * textarea::-moz-input-placeholder,
 * input:-moz-input-placeholder,
 * textarea:-moz-input-placeholder,
 * input:-ms-input-placeholder,
 * textarea:-ms-input-placeholder {
 *     color: #ccc;
 *     font-weight: 700;
 *     font-size: 0.92em;
 *     letter-spacing: -0.03em;
 * }
 * input::-webkit-input-placeholder,
 * textarea::-webkit-input-placeholder {
 *     color: #ccc;
 *     font-weight: 700;
 *     font-size: 0.92em;
 *     letter-spacing: -0.03em;
 * }
 */
/* Campos de Texto General */


/* Layout de Inputs */
.ui.layout {
    margin-left: -4px;
    margin-right: -4px;
}
.ui.layout:before,
.ui.layout:after {
  content: " ";
  display: table;
}
.ui.layout:after {
  clear: both;
}
.ui.layout .ui.select,
.ui.layout .ui.field {
    width: 100%;
    float: left;
    padding-left: 4px;
    padding-right: 4px;
}
.ui.layout .ui.select.block-4,
.ui.layout .ui.field.block-4 {
    width: 100%;
}
.ui.layout .ui.select.block-3,
.ui.layout .ui.field.block-3 {
    width: 75%;
}
.ui.layout .ui.select.block-2,
.ui.layout .ui.field.block-2 {
    width: 50%;
}
.ui.layout .ui.select.block-1,
.ui.layout .ui.field.block-1 {
    width: 25%;
}
.ui.layout .ui.field:nth-child(n+2) {
    margin-top: 0px !important;
}
.ui.layout .label {
    font-weight: 700;
    padding-left: 4px;
}
/* Layout de Inputs */



/* Input Field Normal */
.ui.field input,
.ui.field textarea,
.ui.field.with-button,
.ui.select.underline .pretty-ui {
    border-bottom: 1px solid #3e3e3e;
}
.ui.field input:hover,
.ui.field textarea:hover,
.ui.field.with-button:hover,
.ui.select.underline .pretty-ui:hover {
    border-bottom: 1px solid #614870;
}
.ui.field.normal input,
.ui.field.normal textarea {
    width: 100%;
}
.ui.field.normal + .ui.field.normal {
    margin-top: 1px;
}
.ui input[type="text"] + .description,
.ui textarea + .description,
.ui.field input + .description {
    margin-top: 1px;
    visibility: hidden;
}
.ui.field.show-description input + .description,
.ui.field.show-description textarea + .description {
    visibility: visible;
}
.ui.error input[type="text"] + .description,
.ui.error textarea + .description,
.ui.field.error input + .description {
    visibility: visible;
    color: red;
}
.ui.field.normal label {
    font-weight: 700;
}
/* Input Field Normal */



/* Input Field con Botón */
.ui.field.with-button input {
    border-bottom: none;
}
.ui.field.with-button input:hover {
    border-bottom: none;
}
.ui.field.with-button input {
    display: inline-block;
    margin-right: -3px;
    height: 25px;
    padding-right: 4px;
}
.ui.field.with-button button {
    display: inline-block;
    background: none;
    border: 0;
    font-weight: 700;
    text-transform: uppercase;
    padding-right: 0;
    padding-left: 4px;
    text-align: center;
    font-size: 14px;
    height: 25px;
}
.ui.field.with-button button:hover {
    color: #614870;
}
/* Input Field con Botón */



/* Checkboxes y Radio */
.ui.checkbox,
.ui.select {
    position: relative;
}
input[type="checkbox"],
input[type="radio"] {
    display: none;
} 
input[type="checkbox"] + label,
input[type="radio"] + label {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(../img/icn_gral_check-option-normal.svg);
    background-size: 18px 36px;
    cursor: pointer;
    -webkit-transition: all 120ms ease-in;
    transition: all 120ms ease-in;
}
input[type="checkbox"] + label {
    background-position: 0 0;
}
input[type="radio"] + label {
    background-position: 0 -18px;
}
input[type="checkbox"] + label:hover,
input[type="radio"] + label:hover {
    background-image: url(../img/icn_gral_check-option-hover.svg);
}
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
    background-image: url(../img/icn_gral_check-option-checked.svg);
}
input[type="checkbox"]:checked + label span,
input[type="radio"]:checked + label span{
    font-weight: 700;
}
input[type="checkbox"]:checked + label:hover,
input[type="radio"]:checked + label:hover {
    background-image: url(../img/icn_gral_check-option-checkedhover.svg);
}
input[type="checkbox"] + label span,
input[type="radio"] + label span {
    position: absolute;
    left: 26px;
    top: 2px;
    line-height: 1;
    white-space: nowrap;
}
.small input[type="checkbox"] + label span,
.small input[type="radio"] + label span {
    font-size: 13px;
}
input[type="radio"] + label span img {
    display: block;
    height: 24px;
    margin-top: -5px;
}
.ui .description {
    font-size: 12px;
    color: #9a9a9b;
}
.ui input[type="radio"] ~ .description {
    margin-left: 27px;
    margin-top: -4px;
}
.ui.important-description .description {
    font-size: 13px;
}
.ui.important-description input[type="radio"]:checked ~ .description {
    color: #3e3e3e;
}
.ui.important-description .description + .ui.button.minimal {
    margin-left: 27px;
    margin-bottom: 6px;
}
.ui.field + .ui.checkbox,
.ui.field + .ui.select {
    margin-top: 4px;
}
/* Checkboxes y Radio */

/* Botones */
.ui.button {
    height: 40px;
    padding-left: 16px;
    padding-top: 9px;
    padding-right: 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 120ms ease-in;
    transition: all 120ms ease-in;
    cursor: pointer;
    text-align: center;
    border: none;
}
button.ui.button {
    padding-top: 3px;
    width: 100%;
}
.ui.button.primary {
    background-color: #614870;
}
.ui.button.primary:hover {
    background-color: #91809A;
}
.ui.button.discrete {
    background-color: #3e3e3e;
}
.ui.button.discrete:hover {
    background-color: #535353;
}
.ui.button.add-to-cart {
    background-color: #F1C860;
}
.ui.button.add-to-cart:hover {
    background-color: #F0BC43;
}
.ui.button.express {
    background-color: #ED9D3A;
}
.ui.button.express:hover {
    background-color: #ED8D18;
}
.ui.button.express,
.ui.button.add-to-cart {
    padding-left: 48px;
    padding-right: 8px;
    text-align: left;
}
.ui.button.add-to-cart:before,
.ui.button.express:before {
    background-position: 0px 0px;
    top: 11px;
    left: 13px;
    content: '';
    background-image: url(../img/icn_ui-button-checkout.svg);
    background-size: 37px 19px;
    background-repeat: no-repeat;
    width: 21px;
    height: 19px;
    position: absolute;
}
.ui.button.express:before {
    background-position: -21px 0px;
    top: 10px;
    left: 15px;
}
.ui.button.add-to-cart:after {
    content: 'Agregar a Carrito';
}
.ui.button.express:after {
    content: 'ExpressPay';
}
.ui.button.minimal {
    width: auto;
    height: auto;
    display: inline-block;
    color: #614870;
    padding: 3px 0;
    font-size: 0.9em;
    font-weight: 400;
    cursor: pointer;
    margin-bottom: -5px;
}
.ui.button.minimal:hover {
    text-decoration: underline;
}
.ui.button + .ui.button {
    margin-top: 12px;
}
.ui.button.with-icon {
    color: #3e3e3e;
    text-align: left;
    padding: 0;
    font-weight: 400;
    height: auto;
}
.ui.button.with-icon img,
.ui.button.with-icon .text {
    display: inline-block;
    height: 17px;
    vertical-align: middle;
    margin: 0;
}
.ui.button.with-icon .text {
    margin-left: 4px;
}

/* Botones */

/* Menus */
.ui.menu.minimal {
    margin-bottom: 16px;
}
.ui.menu.minimal a:hover .button {
    text-decoration: underline;
}
.ui.menu.minimal .button {
    display: inline-block;
    padding-left: 8px;
    padding-right: 12px;
    border-right: 1px solid #9a9a9b;
}
.ui.menu.minimal a:first-child .button {
    padding-left: 0;
}
.ui.menu.minimal a:last-child .button {
    border-right: none;
}
.ui.menu.minimal .button.active {
    text-decoration: underline;
}
/* Menus */
/*************** Temina UI ***************/


/*************** Header ***************/
body {
    padding-top: 48px;
}

#header {
    top: 0;
    left: 0;
    position: relative;
    height: 48px;
    width: 100%;
    background-color: #E5E3E3;
    color: #291737;
    z-index: 1000;
    position: fixed;
}

.head-logo {
    position: absolute;
    left: 0;
}
.head-logo img {
    margin: 8px;
    margin-left: 12px;
    height: 32px;
}
#user-menu {
    position: absolute;
    top: 0;
    right: 0;
    height: 48px;
    padding-left: 12px;
    cursor: pointer;
}
#user-menu .head-profile {
    margin-top: 8px;
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: top;
}
#user-menu .head-profile img {
    border-radius: 50%;
    width: 100%;
}
#user-menu-name {
    display: inline-block;
    padding: 8px;
    max-width: 200px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    vertical-align: top;
    margin-bottom: 0;
}
#user-menu-name strong {
    font-size: 13px;
}
#user-menu .caret-button,
.tools .caret-button {
    display: inline-block;
    width: 12px;
    height: 48px;
    background-repeat: no-repeat;
    background-image: url(../img/icn_gral_down-arrow-purple.svg);
    background-position: center center;
    margin-right: 12px;
}
#header .dropdown-parent {
    height: 48px;
}
#header .dropdown-parent:hover + .dropdown-child,
#header .sub-menu:hover .dropdown-child,
#user-menu:hover .dropdown-child,
.dropdown-child:hover {
    display: block;
}

#header .dropdown-child {
    position: absolute;
    top: 100%;
    left: 0;
    width: 160px;
    list-style: none;
    padding-left: 0;
    background-color: #fff;
    margin: 0;
    display: none;
}
#header .right .dropdown-child {
    left: auto;
    right: 2px;
}
#header .dropdown-child li {
    margin: 0;
    padding: 8px;
    font-size: 0.8em;
    text-align: center;
    border-top: 1px solid #ededed;
}
#header .dropdown-child a:first-child li {
    border-top: none;
}
#header .dropdown-child li:hover {
    background-color: #F9F7FA;
    text-decoration: underline;
}

#header .tools {
    position: absolute;
    left: 200px;
    height: 48px;
}
#header .tools .tools-filter {
    display: inline-block;
    vertical-align: top;
    width: 17px;
    cursor: pointer;
    width: 48px;
    height: 48px;
    padding: 13px;
}
#header .tools .tools-filter img{
    width: 100%;
}

#header .sub-menu {
    position: relative;
    display: inline-block;
    margin-left: 48;
    height: 48px;
    padding-left: 12px;
    cursor: pointer;
	
}
#header .tools-filter:hover,
#header .sub-menu:hover,
#user-menu:hover {
    background-color: #d6d4d4;
}
#header .sub-menu .sub {
    display: inline-block;
    vertical-align: top;
    padding-top: 12px;
    padding-right: 8px;
    font-weight: 600;
    font-size: 15px;
}
/*************** Termina Header ***************/


/*************** Sidebar ***************/
#sidebar {
    width: 248px;
    height: calc(100% - 48px);
    background-color: #e5e3e3;
    z-index: 100;
    color: #fff;
    padding: 12px;
    -webkit-transform: translateX(-248px);
    transform: translateX(-248px);
}
#sidebar,
.main-info {
    -webkit-transition: all 190ms ease-in-out;
    transition: all 190ms ease-in-out;
}
/*Mediante jQuery le agregamos la clase expanded para abrir el sidebar*/
#sidebar.expanded {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
#sidebar h3 {
    color: #9a9a9b;
    font-size: 16px;
}
.calendario {
    width: 224px;
    color: #291737;
    font-size: 12px;
}
.calendario * {
    float: left;
}
.calendario .title .prev,
.calendario .title .next {
    width: 28px;
    height: 28px;
    cursor: pointer;
    background-size: 6px 12px;
    background-position: center center;
    background-repeat: no-repeat;
}
.calendario .title .prev:hover,
.calendario .title .next:hover {
    opacity: 0.6;
}
.calendario .title .prev {
    background-image: url(../img/icn_gral_left-arrow-purple.svg);
}
.calendario .title .next {
    background-image: url(../img/icn_gral_right-arrow-purple.svg);
}
.calendario .title .month {
    padding-top: 3px;
    width: 168px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
}
.calendario .day-names {
    padding-left: 28px;
    font-weight: 700;
}
.calendario .weeks {
    width: 28px;
    color: #9a9a9b;
}
.calendario .day-names div,
.calendario .weeks div,
.calendario .days div {
    position: relative;
    width: 28px;
    height: 28px;
    padding-top: 6px;
    text-align: center;
    text-transform: uppercase;
    background-size: 26px;
    background-position: center center;
    background-repeat: no-repeat;
}
.calendario .weeks div:hover {
    color: #222;
    cursor: pointer;
}
.calendario .weeks div:hover:after,
.calendario .weeks div.active:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 224px;
    height: 28px;
    border-radius: 4px;
    background-color: hsl(279, 11%, 85%);
    z-index: -1;
}
.calendario .weeks div.active {
    color: #fff;
}
.calendario .weeks div.active:after {
    background-color: hsl(279, 11%, 65%);
}
.calendario .days {
    width: 196px;
}.calendario .days div {
    cursor: pointer;
}
.calendario .days .active {
    color: #fff;
    background-image: url(../img/icn_sidebar_calendar-active.svg);
}
.calendario .days .secondary {
    color: #6f6f70;
}
.calendario .days div:not(.active):hover {
    background-image: url(../img/icn_sidebar_calendar-hover.svg);
}
.quick-calendar {
    margin-top: 12px;
}
.quick-calendar .title {
    color: #291737;
    font-weight: 700;
    margin-bottom: 6px;
}
.quick-calendar .select {
    display: inline-block;
    vertical-align: top;
}
#qc-day.ui.select {
    width: 38px;
    margin-top: 0 !important;
}
#qc-month {
    width: 86px;
}
#qc-year {
    width: 52px;
}
.quick-calendar button {
    outline: none;
    letter-spacing: normal;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    background-color: #614870;
    border-radius: 50%;
    border: none;
    font-size: 12px;
    font-weight: 400;
    line-height: 0;
    margin-top: 0;
    display: inline-block;
    vertical-align: top;
    color: #fff;
}
.quick-calendar button:hover {
    background-color: #291737;
}
#sidebar .ui.select {
    color: #291737;
}
#sidebar .ui.select:first-child {
    margin-top: 12px;
}
#sidebar .ui.select.normal .pretty-ui,
#sidebar .ui.select.small .pretty-ui,
#sidebar .ui.select.tablet-small .pretty-ui {
    border: 1px solid #b3b3b3;
}
#sidebar .ui.select .pretty-ui:after {
	border-color: rgba(62, 62, 62, 0);
	border-top-color: #291737;
}
#sidebar .footer {
    position: absolute;
    bottom: 4px;
    width: 224px;
    color: #291737;
    font-size: 12px;
}
#sidebar .footer div {
    border-top: 1px solid #291737;
    padding: 7px 2px;
}
#sidebar .footer .info2 {
    font-size: 9.5px;
}
/*************** Termina Sidebar ***************/


/*************** Main Login ***************/
#main-login {
    height: 100%;
    width: 100%;
}
#main-login .logo {
    text-align: center;
    margin-bottom: 16px;
}
#main-login .logo img {
    width: 130px;
}
#main-login .minimal {
    display: block;
}
/*************** Termina Main Login ***************/


/*************** Dashboard ***************/
#dashboard {
    margin-top: 56px;
}
.dashboard-icon {
    display: inline-block;
    width: 192px;
    height: 192px;
    margin-right: 6.7%;
    margin-bottom: 80px;
    background-color: #291737;
}
.dashboard-icon:hover {
    background-color: #6a5d73;
}
.dashboard-icon:nth-child(4) {
    margin-right: inherit;
}
.dashboard-icon img {
    width: 100%;
}
.dashboard-icon .icon-name {
    padding: 10px 0;
    font-weight: 600;
    text-align: center; 
}
/*************** Termina Dashboard ***************/


/*********** Contenido Central ********+*/
.new-container {
    width: auto;
    overflow-x: scroll;
    overflow-y: visible;
    position: relative;
}
/*Mediante jQuery agregamos la clase expanded para que se recorra junto con la sidebar*/
.main-info.expanded {
    margin-left: 248px;
}

.main-info {
    padding: 12px;
}
.main-info.big-table {
    padding: 0;
}
.main-info h1 {
    margin-top: 0;
    margin-bottom: 0.15em;
}
.big-table h1 {
    margin-top: 12px;
    margin-left: 12px;
}
.main-info table {
    background-color: #fff;
}

/*Tablas*/
.main-info table {
    width: 100%;
}
tr[data-href] {
    cursor: pointer;
}
th, td {
    padding: 0.5em 0.75em;
}
tbody td {
    /*color: #6f6f70;*/
}
tbody tr {
    border-bottom: 1px solid #9a9a9b;
}
/*tbody tr:nth-child(even) {
    background-color: hsl(278, 22%, 96%);
}
tbody tr:hover {
    background-color: hsl(278, 22%, 91%);
}*/
tbody td {
    text-align: center;
}
tbody td:first-child {
    text-align: left;
}
.main-info table .up {
    color: green;
}
.main-info table .down {
    color: red;
}
.main-info table .up span,
.main-info table .down span {
    position: relative;
    margin-left: 12px;
}
.main-info table .up span:after,
.main-info table .down span:after {
    content: '';
    position: absolute;
    top: 0.45em;
    right: 4px;
    width: 0; 
    height: 0; 
}
.main-info table .up span:after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid green;
}
.main-info table .down span:after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid red;
}
.main-info table a,
.main-info table a:visited {
    text-decoration: underline;
    color: #614870;
}
/*Tablas*/

/*Tabla Grande de Encabezado Fijo que utilizamos en Open To Buy*/
.big-table {
    position: relative;
}
.big-table table {
    border-collapse: collapse;
    margin: 0 12px 12px 12px;
    background-color: #fff;
}
/*Este estilo es fundamental para que funcione el encabezado fijo*/
.big-table table.fixed {
    top: 48px;
    position: fixed;
    width: auto;
    display: none;
    border: none;
    z-index: 10;
    table-layout: fixed;
    -webkit-transition: -webkit-transform 190ms ease-in-out;
    transition: -webkit-transform 190ms ease-in-out;
    transition: transform 190ms ease-in-out;
    transition: transform 190ms ease-in-out, -webkit-transform 190ms ease-in-out;
}
/*Esto hace que cuando abramos el filtro el header también recorra*/
.main-info.expanded.big-table table.fixed {
    -webkit-transform: translateX(248px);
    transform: translateX(248px);
    left: 0;
}
.big-table tr {
    position: relative;
}
.big-table td {
    white-space: nowrap;
}
.big-table thead tr:first-child th,
.main-info thead tr:only-child th {
    border-bottom: 2px solid #3e3e3e;
    background-color: #fff;
    color: #3e3e3e;
    font-size: 15px;
}
.big-table thead tr:nth-child(2) {
    white-space: nowrap;
}
.big-table thead tr:nth-child(3) {
    font-size: 12px;
}
.big-table thead tr:nth-child(n+3) th {
    color: rgba(255,255,255,0.85);
}
.big-table thead th {
    color: #fff;
    line-height: 1.2;
}
/*Fondo para la 2da, 3ra y 4ta fila del header en las primeras columnas*/
.big-table thead tr:nth-child(n+2) th:nth-child(-n+7) {
    background-color: #3e3e3e;
}
/*Fondo para la 2da, 3ra y 4ta fila del header a partir de la 8va columna*/
.big-table thead tr:nth-child(n+2) th:nth-child(n+8):nth-child(-n+10) {
    background-color: #614870;
}
.big-table thead tr:nth-child(n+2) th:nth-child(n+11):nth-child(-n+13) {
    background-color: hsl(278, 22%, 41%);
}
.big-table thead tr:nth-child(n+2) th:nth-child(n+14):nth-child(-n+16) {
    background-color: hsl(278, 22%, 46%);
}
.big-table thead tr:nth-child(n+2) th:nth-child(n+17):nth-child(-n+19) {
    background-color: hsl(278, 22%, 51%);
}
.big-table thead tr:nth-child(n+2) th:nth-child(n+20):nth-child(-n+22) {
    background-color: hsl(278, 22%, 56%);
}
.big-table thead tr:nth-child(n+2) th:nth-child(n+23):nth-child(-n+25) {
    background-color: hsl(278, 22%, 61%);
}
.big-table thead tr:nth-child(n+2) th:nth-child(n+26):nth-child(-n+28) {
    background-color: hsl(278, 22%, 66%);
}
.big-table thead tr:nth-child(n+2) th:nth-child(n+29):nth-child(-n+31) {
    background-color: hsl(278, 22%, 71%);
}
.big-table thead tr:nth-child(n+2) th:nth-child(n+32):nth-child(-n+34) {
    background-color: hsl(278, 22%, 76%);
}
.big-table thead tr:nth-child(n+2) th:nth-child(n+35):nth-child(-n+37) {
    background-color: hsl(278, 22%, 81%);
}
.big-table thead tr:nth-child(n+2) th:nth-child(n+38) {
    background-color: hsl(278, 22%, 86%);
}
/*letra más obscura para la última columna de cada semana*/
.big-table tbody td:nth-child(3n+7) {
    color: #3e3e3e;
}
/*letra más obscura y texto alineado a la izquierda de las primeras 2 columnas*/
.big-table tbody td:nth-child(-n+2) {
    text-align: left;
    color: #3e3e3e;
}

.big-table .table-edit {
    width: auto;
    height: 40px;
    cursor: pointer;
}

.big-table .table-edit a {
    width: 100px;  
}
.big-table .table-edit a:hover {
    opacity: 0.7;
}

.big-table .table-edit img {
    padding: 2px 25px;  
}

#modal-table-edit .modal-content {
    background-color: #fff;
    border-radius: 0 !important;
    padding: 16px;
}
#modal-table-edit .modal-sm {
    width: 370px; 
}

#modal-table-edit form {
    line-height: 1.1;
}
#modal-table-edit input,
#modal-table-edit input::-webkit-input-placeholder {
    font-weight: 300;
    text-align: center;
}
#modal-table-edit input,
#modal-table-edit input:-ms-input-placeholder {
    font-weight: 300;
    text-align: center;
}
#modal-table-edit input,
#modal-table-edit input::placeholder {
    font-weight: 300;
    text-align: center;
}

#modal-table-edit input:disabled {
    font-weight: 600;
    background-color: #efefef;
    padding: 3px;
}

.edit-disable {
    border-bottom: none !important;
    cursor: not-allowed !important;
}

.modal-table-week {
    font-weight: 600;
    text-align: center;
}

.modal-table-week span {
    color: #999;
    font-weight: 300;
}

/*Termina Tabla Grande de Encabezado Fijo*/

/*Reportes*/
#chart {
    margin-top: 12px;
}
#chart .ui.select {
    width: 200px;
    float: right;
}
/*Termina Reportes*/


/*Many Fields Form*/
#manyFieldsform-area {
    padding: 0;
}
.mff-button {
    padding: 0;
    padding-bottom: 24px;
}
/*.mff-button:nth-child(1) {
    padding-right: 5px;
}
.mff-button:nth-child(2) {
    padding-left: 5px;
}*/
.mff-button:first-child {
    padding-right: 5px;
}
.mff-button:last-child {
    padding-left: 5px;
}
.mff-form {
    padding: 0;
    padding-right: 16px;
    border-right: 1px solid #999;
}
.mff-form:nth-child(2) {
    padding-left: 16px;
    padding-right: 0;
    border: 0;
}
.mff-form h3 {
    margin: 0;
    padding-bottom: 16px;
    text-transform: uppercase;
}
.mff-spacer {
    padding-top: 32px;
}
/*Many Fields Form*/

/**** Drop Element ****/
/*aquí definimos el color de fondo, la sombra y cositas para que haga trancsión animada*/
.drop-element {
    opacity: 0;
    background-color: #fff;
    padding: 12px;
    padding-bottom: 6px;
    -webkit-box-shadow: 0px 4px 10px -2px rgba(0,0,0,0.25);
    box-shadow: 0px 4px 10px -2px rgba(0,0,0,0.25);
    -webkit-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.drop-element.drop-open-transitionend {
    display: block;
}
.drop-element.drop-after-open {
    opacity: 1;
}
/**** Drop Element ****/

/**
 * Solo deberá usarse para celdas.
 */
table.table th.text-mid,
table.table td.text-mid {
    vertical-align: middle;
}

/*********** Termina Contenido Central ********+*/

/* ==========================================================================
   Los Media Queries
   ========================================================================== */

/********** Pantallas móviles de alta resolución **********/
@media (max-width: 414px) {

    /**
     * Estilos que brindan las propiedades para mostrar una tabla
     * en formatos pequeños.
     *
     * Añadir la clase `table-adaptative` a la tabla donde se desea
     * dicho comportamiento.
     *
     * Ejemplo:
     *
     *      <table class="table-adaptative">
     *          <thead> ... </thead>
     *          <tbody>
     *              <td data-label="Título 1"> .. </td>
     *              <td data-label="Título 2"> .. </td>
     *              <td data-label="Título 3"> .. </td>
     *          </tbody>
     *      </table>
     *
     * URL: https://codepen.io/geoffyuen/pen/FCBEg?editors=1100 .
     */
    .table-adaptative thead {
        display: none;
        visibility: hidden;
    }

    .table-adaptative tbody td {
        display: block;
        margin: 0;
        padding: .1em .6em;
        text-align: left;
    }

    .table-adaptative tbody td::before {
        content: attr(data-label) ':';
        font-weight: bold;
        display: inline-block;
        float: left;
        width: 10em;
        text-align: left;
    }             
    .MobileTable {
        display:none !important;
    }
    .table-adaptative tr:nth-child(odd){
        background-color:#f2f2f2;
      
    }
    
}

.dataTables_length{
    float: right;
   }
   
.dataTables_filter {
margin-top: 10px;
margin-bottom: 10px;
margin-right: 11px;
margin-left: 10px;
}

/********** Tablet Vertical **********/
@media (min-width: 768px) {
    
}

/********** Tablet Horizontal **********/
@media (min-width: 992px) {
    
}

/********** Escritorio 0 **********/
@media (min-width: 1025px) {
    
}

/********** Escritorio 1 **********/
@media (min-width: 1200px) {
    
}

/********** Escritorio 2 **********/
@media (min-width: 1380px) {
    
}

/********** Escritorio 3 **********/
@media (min-width: 1540px) {
    
}

/********** Escritorio 4 **********/
@media (min-width: 1850px) {
    
}

/********** Escritorio 5 **********/
@media (min-width: 2000px) {
    
}

/************** Portrait **************/
@media (orientation: portrait) {
    
}