:root {
    --red: #ff0000;
    --azul-profundo: #19324d;
    --azul: #255f85;
    --dorado: #c9a45c;
    --fondo: #f4f7fb;
    --texto: #243142;
    --muted: #6c7a89;
    --borde: #d8e1ea;
    --blanco: #ffffff;
    --verde: #237a57;
    --ambar: #9a6a18;
    --radio-lg: 28px;
    --radio-md: 22px;
    --sombra: 0 30px 80px rgba(0, 0, 0, .22);
    --sombra-suave: 0 12px 28px rgba(25, 50, 77, .12);
}    

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; height: 100%; }

body {
    min-height: 100vh;
    height: 100%;
    font-family: "Fira", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--texto);
    line-height: 1.6;
}    

a { color: #000; text-decoration: none;}

hr.custom-hr {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    margin: 30px 0 !important;

    border: 0 !important;
    border-top: 2px solid #555 !important;

    opacity: 1 !important;
    visibility: visible !important;
}

.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }

@font-face {
    font-family: 'contigo';
    src: url('/font/contigo.otf') format('opentype');
}

@font-face {
    font-family: 'Fira';
    src: url('/font/FiraSansCondensed-Light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'garamond';
    src: url('/font/AppleGaramond.ttf') format('truetype');
}

@font-face {
    font-family: 'blackone';
    src: url('/font/BlackOpsOne-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'teko';
    src: url('/font/Teko-VariableFont_wght.ttf') format('truetype');
}

/* STANDART
**********************************************************/
.pointer { cursor: pointer; border-bottom: 2px solid white; width: auto; }
.pointer:hover { cursor: pointer; border-bottom: 2px solid black; width: auto; }
.p-6 { padding-left: 10rem !important; padding-right: 10rem !important; }
.panel-height {height:800px !important; min-height:800px !important; max-height:800px !important; } 
.calc-height {height:550px !important; min-height:550px !important; max-height:550px !important; } 
.calc-height-lg {height:550px !important; min-height:550px !important; max-height:550px !important; } 

.direction { flex-direction: row; } 
.menu-div { width: 50% !important; }
.padding { padding: 3rem !important; }

.height-floor {height:800px !important; min-height:800px !important; max-height:800px !important; } 
.floor-top { padding-top: 0px; }
.floor-left { padding-left: 4rem; }
.floor-width { width: 25%; }
.printUseWidth { width: 50% !important; }
.printUse { width: 75% !important; border: 1px solid black;  }
.printWidth { width: 50% !important; border: 1px solid black; }
.paddingRecomm { padding-left: 2rem !important; padding-top: 0px !important; } 

.wide-div {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* align-items: center; */
    /* padding-left: 1rem; */
}

.field {
    margin-top: 18px;
}

.dimensions {
    display: grid;
    border: 3px solid red;
    grid-template-columns: 1fr 1fr 140px;
    gap: 12px;
}

/* MOBILE
**********************************************************/
@media (max-width: 600px) { 
    .direction { flex-direction: column; } 
    .p-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .panel-height { height:400px !important; min-height:400px !important; max-height:400px !important; } 
    .menu-div { width: 100% !important; }
    .padding { padding: 1.5rem !important; }
    
    .height-floor { height:1000px !important; min-height:1000px !important; } 
    .floor-top { padding-top: 2rem; }
    .floor-left { padding-left: 0rem; }
    .floor-width { width: 50%; }

    .printUseWidth { width: 100% !important; }
    .printUse { width: 100% !important; border: 1px solid black;  }
    .printWidth { width: 70% !important; border: 1px solid black; }
    .paddingRecomm { padding-left: 0px !important; padding-top: 2rem !important; } 

    .calc-height {height:550px !important; min-height:550px !important; max-height:550px !important; } 
    .calc-height-lg {height:950px !important; min-height:950px !important; max-height:950px !important; } 

    .wide-div {
        width: 100% !important;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: left;
    }    
}

/* TABLET
**********************************************************/
@media (max-width: 991px) { 
    .direction { flex-direction: column; } 
}