@charset "utf-8";

/* *********************************** */
/*      RESETS E ESTILOS PADRAO        */
/* *********************************** */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6{ font-size: 100%; font-weight: normal; }
ul { list-style: none; }
button, input, select, textarea{ margin: 0; }
img, embed, iframe, object, video{ height: auto; max-width: 100%; border: 0; margin: 0; padding: 0; }
audio { max-width: 100%; }
iframe { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; text-align: left; }
html { font-size: 62.5%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; min-width: 300px; overflow-x: hidden; text-rendering: optimizeLegibility; box-sizing: border-box; background-color: var(--color4); transition: var(--smooth); }
*, *::before, *::after { box-sizing: inherit; }
article, aside, figure, footer, header, hgroup, section{ display: block; }
body, button, input, select, textarea{ font-family: var(--font); }
code, pre{ -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; font-family: monospace; }
body { color: var(--color1); font-weight: 400; line-height: 1.5; -webkit-overflow-scrolling: touch; margin: 0; }
a { cursor: pointer; text-decoration: none; color: inherit; }
a strong { color: currentColor; }
a:hover{ color: inherit; }
code { background-color: whitesmoke; color: #ff3860; font-size: 0.875em; font-weight: normal; padding: 0.25em 0.5em 0.25em; }
hr { background-color: whitesmoke; border: none; display: block; height: 2px; margin: 1.5rem 0; }
input[type="checkbox"], input[type="radio"] { vertical-align: baseline; }
small { font-size: 0.875em; }
span { font-style: inherit; font-weight: inherit; }
strong { font-weight: bolder; }
fieldset { border: none; }
pre { -webkit-overflow-scrolling: touch; background-color: whitesmoke; color: #4a4a4a; font-size: 0.875em; overflow-x: auto; padding: 1.25rem 1.5rem; white-space: pre; word-wrap: normal; }
pre code { background-color: transparent; color: currentColor; font-size: 1em; padding: 0; }
table td, table th { text-align: left; vertical-align: middle; }

::-moz-selection { background: #D5EAFF; }
::selection { background: #D5EAFF; }

.centralizador { width:1300px; width:130rem; }
.hack   { clear:both; }
.oculto { display:none; }
.block  { display: block; }

.flex             { display: flex; }
.inline-flex      { display: inline-flex; }
.flex-wrap        { flex-wrap: wrap; }
.justify-center   { justify-content: center; }
.justify-start    { justify-content: flex-start; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }
.align-center     { align-items: center; }
.align-start      { align-items: flex-start; }
.align-base       { align-items: baseline; }
.align-end        { align-items: flex-end; }
.direction-column { flex-direction: column; }
.direction-row    { flex-direction: row; }

.aesquerda { float:left; }
.adireita  { float:right; }
.center    { margin-right: auto; margin-left: auto; }

.txt-aesquerda { text-align:    left; }
.txt-adireita  { text-align:   right; }
.txt-aocentro  { text-align:  center; }
.txt-justify   { text-align: justify; }

.thin      { font-weight: 100; }
.extralight{ font-weight: 200; }
.light     { font-weight: 300; }
.regular   { font-weight: 400; }
.medium    { font-weight: 500; }
.semibold  { font-weight: 600; }
.bold      { font-weight: 700; }
.extrabold { font-weight: 800; }
.black     { font-weight: 900; }
.italic    { font-style: italic; }

.capitalize { text-transform: capitalize; }
.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }

.ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.left{ margin-right: 8px; }
.right{ margin-left: 8px; }

.row    { display: flex; flex-wrap: wrap; }
.cl     { padding: 0 12px; transition: var(--smooth); }
.cl_100 { width: 100%;     }
.cl_90  { width: 90%;      }
.cl_80  { width: 80%;      }
.cl_70  { width: 70%;      }
.cl_75  { width: 75%;      }
.cl_66  { width: 66.666%;  }
.cl_60  { width: 60%;      }
.cl_50  { width: 50%;      }
.cl_40  { width: 40%;      }
.cl_33  { width: 33.333%;  }
.cl_30  { width: 30%;      }
.cl_25  { width: 25%;      }
.cl_20  { width: 20%;      }
.cl_10  { width: 10%;      }

/* ******************* */
/*    DESKTOP LARGE    */
/* ******************* */
@media screen and (min-width: 1320px) {
    .centralizador        { max-width:1300px; max-width:130rem; margin:0 auto; }
    .esconde_desktop      { display: none; }
    .esconde_fulldesktop  { display: none; }
    .exibe_desktop        { display: block; }
    .exibe_fulldesktop    { display: block; }

    .cl_fd     { padding: 0 12px; }
    .cl_fd_100 { width: 100%;     }
    .cl_fd_90  { width: 90%;      }
    .cl_fd_80  { width: 80%;      }
    .cl_fd_70  { width: 70%;      }
    .cl_fd_75  { width: 75%;      }
    .cl_fd_66  { width: 66.666%;  }
    .cl_fd_60  { width: 60%;      }
    .cl_fd_50  { width: 50%;      }
    .cl_fd_40  { width: 40%;      }
    .cl_fd_33  { width: 33.333%;  }
    .cl_fd_30  { width: 30%;      }
    .cl_fd_25  { width: 25%;      }
    .cl_fd_20  { width: 20%;      }
    .cl_fd_10  { width: 10%;      }
    
}

/* ******************* */
/*        DESKTOP      */
/* ******************* */
@media screen and (min-width: 1024px) and (max-width: 1319px) {
    .centralizador        { width:98%; max-width:1280px; max-width:128rem; margin:0 auto; }
    .esconde_desktop      { display: none; }
    .esconde_smalldesktop { display: none; }
    .exibe_desktop        { display: block; }
    .exibe_smalldesktop   { display: block; }
    
    .cl_d     { padding: 0 12px; }
    .cl_d_100 { width: 100%;     }
    .cl_d_90  { width: 90%;      }
    .cl_d_80  { width: 80%;      }
    .cl_d_70  { width: 70%;      }
    .cl_d_75  { width: 75%;      }
    .cl_d_66  { width: 66.666%;  }
    .cl_d_60  { width: 60%;      }
    .cl_d_50  { width: 50%;      }
    .cl_d_40  { width: 40%;      }
    .cl_d_33  { width: 33.333%;  }
    .cl_d_30  { width: 30%;      }
    .cl_d_25  { width: 25%;      }
    .cl_d_20  { width: 20%;      }
    .cl_d_10  { width: 10%;      }

}

/* ******************* */
/*       TABLET        */
/* ******************* */
@media only screen and (min-width: 641px) and (max-width: 1023px) {
    .centralizador    { width:98%; margin: 0 auto; }
    .esconde_tablet   { display: none !important; }
    .exibe_tablet     { display: block; }

    .cl_t     { padding: 0 12px; }
    .cl_t_100 { width: 100%;     }
    .cl_t_90  { width: 90%;      }
    .cl_t_80  { width: 80%;      }
    .cl_t_70  { width: 70%;      }
    .cl_t_75  { width: 75%;      }
    .cl_t_66  { width: 66.666%;  }
    .cl_t_60  { width: 60%;      }
    .cl_t_50  { width: 50%;      }
    .cl_t_40  { width: 40%;      }
    .cl_t_33  { width: 33.333%;  }
    .cl_t_30  { width: 30%;      }
    .cl_t_25  { width: 25%;      }
    .cl_t_20  { width: 20%;      }
    .cl_t_10  { width: 10%;      }
}

/* ******************* */
/*       CELULAR       */
/* ******************* */
@media only screen and (max-width: 640px) {
    .centralizador    { width: 95%; margin: 0 auto; }
    .esconde_celular  { display: none !important; }
    .exibe_celular    { display: block; }   

    .cl_c     { padding: 0 12px; }
    .cl_c_100 { width: 100%;     }
    .cl_c_90  { width: 90%;      }
    .cl_c_80  { width: 80%;      }
    .cl_c_70  { width: 70%;      }
    .cl_c_75  { width: 75%;      }
    .cl_c_66  { width: 66.666%;  }
    .cl_c_60  { width: 60%;      }
    .cl_c_50  { width: 50%;      }
    .cl_c_40  { width: 40%;      }
    .cl_c_33  { width: 33.333%;  }
    .cl_c_30  { width: 30%;      }
    .cl_c_25  { width: 25%;      }
    .cl_c_20  { width: 20%;      }
    .cl_c_10  { width: 10%;      }

    .w3-copy{ top: calc(100vh + 390px) !important; }
}


/* ************************************************************************************************************************** */
/*          CSS CLIENTE           CSS CLIENTE           CSS CLIENTE           CSS CLIENTE           CSS CLIENTE               */
/* ************************************************************************************************************************** */
/* BUTTONS */
.btn{ display: inline-block; font-size: 12px; font-weight: 700; vertical-align: middle; text-align: center; cursor: pointer; border-radius: 8px; color: var(--color5); text-transform: uppercase; padding: 12px 24px; margin-top: 16px; line-height: 1.4; white-space: nowrap; border: 0; box-shadow: var(--shadow-sm); transition: var(--smooth); }
.btn:focus{ opacity: .75; outline: none; }
/* Tamanhos */
.btn-sm{ font-size: 12px; padding: 8px 16px; letter-spacing: -.4px; line-height: initial; }
.btn-lg{ font-size: 14px; padding: 14px 64px; }
/* Variações */
.btn-default      { background-color: var(--color2); }
.btn-default:hover{ background-color: var(--color1); color: var(--color5); }


/* VARIÁVEIS DO PROJETO */
:root{
    --color1: var(--color-user15);
    --color2: var(--color-user16);
    --color3: #e9ecef;
    --color4: #f8f9fa;
    --color5: #ffffff;
    --font: 'Open Sans', 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;

    --shadow-sm: 0 4px 7px -1px rgb(0 0 0 / 11%), 0 2px 4px -1px rgb(0 0 0 / 7%);
    --shadow-xl: 0 20px 27px 0 rgb(0 0 0 / 5%);

    --smooth: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
}


/*************************************** CSS PADRÃO ***************************************/
.w3-topo{ text-align: center; padding: 20px; position: absolute; width: 100%; top: 0; left: 0; background: linear-gradient(180deg, rgba(76, 150, 115, .5) 0%, #4c967300 100%); z-index: 1; }
.w3-topo img{ height: 120px; }

.w3-box{ display: flex; width: 100%; }
.w3-box-individual{ width: 25%; height: 100vh; }
.w3-box-individual:nth-of-type(1){ background: url('../img/bg_casa_bauru.jpg') no-repeat center; background-size: cover; }
.w3-box-individual:nth-of-type(2){ background: url('../img/bg_casa_jau.jpg') no-repeat center; background-size: cover; }
.w3-box-individual:nth-of-type(3){ background: url('../img/bg_casa_sao_carlos.jpg') no-repeat center; background-size: cover; }
.w3-box-individual:nth-of-type(4){ background: url('../img/bg_minha_garagem.jpg') no-repeat center left; background-size: cover; }
.w3-box-individual .conteudo{ height: inherit; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, .9); backdrop-filter: blur( 4px ); -webkit-backdrop-filter: blur( 4px ); transition: var(--smooth); }
.w3-box-individual .conteudo:hover{ background-color: rgba(255, 255, 255, 1); }
.w3-box-individual .conteudo .header img{ height: 50px; filter: drop-shadow(0px 5px 7px rgba(0,0,0,.4)); transition: var(--smooth); }
.w3-box-individual .conteudo:hover .header img{ transform: scale(1.1); transition: var(--smooth); }
.w3-box-individual .conteudo:hover .body{ transform: scale(1); opacity: 1; transition: var(--smooth); }
.w3-box-individual .conteudo .body{ text-align: center; transition: var(--smooth); opacity: 0; transform: scale(-0.9); }
.w3-box-individual .conteudo .body h1{ font-size: 20px; font-weight: 900; margin-top: 10px; color: #333; }
.w3-box-individual .conteudo .body h2{ font-size: 16px; font-weight: 500; margin-top: 5px; }
.w3-box-individual .conteudo .body i{ font-size: 18px; margin-top: 16px; }

/* ******************* */
/*    DESKTOP LARGE    */
/* ******************* */
@media screen and (min-width: 1320px) {
    
}

/* ******************* */
/*        DESKTOP      */
/* ******************* */
@media screen and (min-width: 1024px) and (max-width: 1319px) {
    
}
/* ******************* */
/*       TABLET        */
/* ******************* */
@media only screen and (min-width: 641px) and (max-width: 1023px) {
    .w3-topo{ position: initial; height: 90px; background: rgba(76, 150, 115,.3); }
    .w3-topo img{ height: 100%; }

    .w3-box{ flex-wrap: wrap; }
    .w3-box-individual{ width: 100%; height: calc(90vh / 4); }
    .w3-box-individual .conteudo .body{ opacity: 1; transform: scale(1); }
}

/* ******************* */
/*       CELULAR       */
/* ******************* */
@media only screen and (max-width: 640px) {
    .w3-topo{ position: initial; height: 90px; background: rgba(76, 150, 115,.3); }
    .w3-topo img{ height: 100%; }

    .w3-box{ flex-wrap: wrap; }
    .w3-box-individual{ width: 100%; height: calc(90vh / 4); }
    .w3-box-individual .conteudo .body{ opacity: 1; transform: scale(1); }
    .w3-box-individual .conteudo .body h1{ font-size: 18px; margin-top: 8px; }
    .w3-box-individual .conteudo .body h2{ margin-top: 0px; }
    .w3-box-individual .conteudo .body i{ margin-top: 10px; }
}
/*************************************** CSS PADRÃO ***************************************/