:root {
    --color: #0f0f0f;
    --black: #000000;
}

/* bg color */
.panel-header,
.button,
.toggle-select,
.canvas-toggle-select,
.slider-preview2.active,
.range-circle,
.header-col2,
.button-circle,
.button-gray:hover,
.slide-arrow-left,
.slide-arrow-right,
.tab-menu-a.active,
.button-circle-resume,
.button-circle-send,
.slider-preview.active,
.modal-button,
.resume-circle,
.range-slide::-webkit-slider-thumb,
.loading,
.separator hr,
.ilustrative, 
.ilustrative2,
.links-block,
.range-slide::-webkit-slider-thumb,
.test,
.range-slide::-webkit-slider-thumb {
    background-color: var(--color);
}

.button:hover,
.button-circle:hover,
.slide-arrow-left:hover,
.slide-arrow-right:hover,
.button-circle-resume:hover,
.button-circle-send:hover,
.modal-button:hover,
.modal-button2:hover {
    background-color: var(--black);
}

.navbar,
.panel-footer,
.footer {
    background-color: rgba(15, 15, 15, 0.1);
}

.button-gray {
    background-color: rgba(15, 15, 15, 0.6);
    border-radius: 0;
}

.slide-arrow-left, 
.slide-arrow-right {
    border-radius: 0;
}

/* font color */
.toggle,
.component.active,
.label,
.canvas-toggle-in,
.select-toggle-icon,
.select-li:hover,
.range-slide,
.color-icon,
.ralselect-li:hover,
.resume-back,
.footer-a,
.form-label,
.form-a,
.success-text,
.header-col3,
.slider-preview,
.type-col2-title,
.type-fix-col1,
.toggle-type,
.label-a:hover,
.panel-back,
.panel-info,
.modal-title,
.shortcuts-span,
.tooltip,
.title-resume,
.resume-label,
.canvas-toggle.active .canvas-toggle-out,
code,
.collection-text.active,
.nolink,
.canvas-toggle.active .canvas-toggle-out,
.range-input,
.range-slide,
.range-value,
.select-li, 
.select-toggle-text,
.acoordion-toggle,
.acoordion-toggle-icon,
.toggle-text-out,
.toggle-type.active .toggle-text-in, 
.toggle.active .toggle-text-in,
.tab-menu-a,
.color-radio,
.color-radio-ral,
.subselect-toggle-text,
.subselect-toggle-icon,
.select-a {
    color: var(--color);
    text-transform: capitalize;
}

#dropper {
    fill: var(--color);
}

/* div#door_type {
    font-size: 11px;
} */

.apply-more a {
    font-size: 12px;
    padding: 2px 10px;
}

.modal-title {
    font-size: 1.7em;
}

/* border color */

.slider-preview2:hover,
.slider-preview2.active,
.color-radio.active .color-circle,
.color-radio-ral.active .color-circle,
#ral-colors.active .color-circle,
.loading-icon,
.field:hover,
.field:focus,
.color-radio.active .color-circle,
.color-radio-ral.active .color-circle,
#ral-colors.active .color-circle {
    border-color: var(--color);
}

.component-col1 img,
.accordion-image img,
.footer-a img,
.shortcut-a img,
.color-circle img {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

#panel6 .plataformWall .color-circle img, #panel6 img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

.button-circle-send {
    border-radius: 0;
    width: 150px;
}

.l-icon {
    background-image: url(../images/favicon.png);
    height: 40px;
    -webkit-filter: invert(1);
    filter: invert(1);
}

.canvas .canvas-toggle {
    border-radius: 0;
}

#panel6 a#menu2 {
    text-transform: none;
}

#ativaShortcuts {
    display: none;
}

/* .canvas-toggle-in, .canvas-toggle-out {
    width: auto;
} */

.canvas-toggle {
    width: 270px;
}

@media (max-width: 991px) {
    .header {
        background-color: var(--color);
    }
}

@media (max-width: 767px) {
    .slider-preview2 {
        border-color: var(--color);
        color: var(--color);
    }
}

@font-face {
    font-family: 'FullAccess';
    src: url(../fonts/FullAccess.otf) format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'OpenAccess';
    src: url(../fonts/OpenAccess.otf) format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'UntitledSerif';
    src: url(../fonts/UntitledSerif-Regular.otf) format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'UntitledSerif';
    src: url(../fonts/UntitledSerif-Bold.otf) format('opentype');
    font-weight: 700;
    font-style: bold;
}

body {
    font-family: UntitledSerif, sans-serif;
    /* font-size: 11px;
    line-height: 15px; */
    /* color: #9f9f9e; */
    color: var(--color);
}

.panel-title,
.button-gray,
.canvas-toggle,
.button-circle-resume,
.button-circle-send,
.header-col2,
.shortcut-a.nolink,
.title-resume {
    font-family: FullAccess, sans-serif;
}

/* .resume-label,
.component .label  {
    font-family: OpenAccess, sans-serif;
} */

.resume-label,
.component .label  {
    font-family: FullAccess, sans-serif;
}

@media print { 
    body * {
        font-family: UntitledSerif,sans-serif;
        color: #9f9f9e;
    }
    .resume-label, .title-resume {
        color: var(--color) !important;
    }
    #brand-1 { 
        top: 205%;
    }
    #brand-2 { 
        top: 105%;
    }
    #brand-3 {
        top: 90%;
    }
}