:root {
    /* efeitos webkit */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* fonte basica */
    --font: "Lato", sans-serif;
    /* html */
    --html-body-text-color: #212121;
    --html-body-background: #FFFFFF;
    /* top bar */
    --top-bar-menu-border-color: #212121;
    --top-bar-menu-text-color: #646464;
    /* tag line */
    --tag-line-text-color: #A6A6A6;
    /* quote */
    --quote-text-color:#A6A6A6;
    /* separator */
    --separator-background-color:#646464;
    /* place */
    --place-text-color: #212121;
    /* about */
    --about-resume-text-color: #333333;
    --about-resume-border-botton-color: #A6A6A6;
    /*  */
    --icon-marker-label: url("../images/gray-marker-4x4-t01.png");
}

/* HTML */

body{
    background-color: var(--html-body-background);
    color: var(--html-body-text-color);
    font-family: var(--font);
    font-size: 14px;
    margin: 16px 0 0 0;
    padding: 0;
}

ul,
ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

/* MAIN */

.interface{
    width: 1440px;
    margin: auto;
    padding: 0 32px;
}

.two_columns{
    display: flex;
    flex-direction: row;
}

.two_columns:has(.project_infos) {
    margin: 0 0 32px 0;
}

.index_infos,
.about_infos, 
.resume_infos,
.project_infos {
    width: 360px;
    margin: 0 128px 0 0;
    /* height: 640px;
    background-color: bisque; */
    align-self: flex-start;
    display: flex;
    flex-direction: column;
}

.about_content,
.resume_content,
.project_content{
    /* width: 800px;
    height: 640px;
    background-color: chocolate; */
    align-self: flex-start;
    display: flex;
    flex-direction: column;
}

.index_content form{
    width: 1376px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* background-color: chocolate;  */
}

.project_infos .page_name{
    padding: 0 0 12px 0;
}

/* TOP BAR > LOGO, TAG LINE E MENU */

.top_bar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
    margin: 0 0 64px 0;
    height: 67px;
}

.top_bar div:first-child{
    display: flex;
    flex-direction: column;
}

.tag_line{
    font-size: 14px;
    font-weight: 500;
    color: var(--tag-line-text-color);
    margin: 8px 0 0 0;
}

.menu {
    margin: 12px 0 0 0;
}

.menu li {
 display: inline-block;
 margin: 0 0 0 20px;
 height: 40px;
}

.menu li span{
    display: inline-block;
    padding: 8px;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--top-bar-menu-text-color);
}

.menu li span:hover{
    border-bottom: 4px solid var(--top-bar-menu-border-color);
}

.menu li span a{
    text-decoration: none;
    color: var(--top-bar-menu-text-color);
}

.menu li .place{
    color: var(--place-text-color);
    font-weight: 800;
    border-bottom: 4px solid var(--top-bar-menu-border-color);
}

/* GENERAL_INFOS */

.page_name{
    width: 420px;
    font-size: 84px;
    margin: 0 0 16px 0;
    font-weight: 300;
    line-height: 72px;
    text-transform: lowercase;
}

.separator{
    margin: 0 0 8px 0;
    align-self:start;
}

.separator hr {
    width: 52px;
    height: 4px;
    background-color: var(--separator-background-color);
    border: none;
}

.quote{
    font-size: 20px;
    font-weight: 500;
    width: 280px;
    color: var(--quote-text-color);
    text-transform: lowercase;
    margin: 0 0 24px 0;
}

/* MY_PICTURE AND SOCIAL_LINKS */

.my_picture{
    margin: 0 0  16px  0;
}

.social_links{
    display: flex;
    flex-direction: row;    
}

.social_links a:first-child{
    margin: 0 32px 0 0;
}

/* ABOUT_CONTENT */

.about_content{
    margin: 212px 0 0 0;
}

.about_content h1 {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 20px;
    margin: 0 0 12px 0;
}

.about_content h1::before {
    content: "_ ";
}

.about_content div p {
    width: 480px;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 16px;
}

.about_resume {
    width: 264px;
}

.about_resume p {
    font-size: 13px;
    color: var(--about-resume-text-color);
}

.about_resume p:last-child{
    margin: 0 0 32px 0;
    padding: 0 0 32px 0;
    border-bottom: 1px dotted var(--about-resume-border-botton-color);
}

.picture_and_legend {
    margin: 32px 0 64px 0;
}

.picture_and_legend li {
    display: inline-block;
}

.picture_and_legend li:first-child {
    margin: 0 12px 0 0;
}

.picture_and_legend li:last-child {
    width: 120px;
    vertical-align: top;
    font-size: 12px;
    font-weight: 700;
}

/* RESUME_INFOS */

.resume_journey p{
    color: #646464;
    margin: 0 0 12px 0;
    font-size: 15px;
}

.resume_journey p::before{
    content: "> ";
}

.resume_list_company{
    font-size: 14px;
    text-transform: lowercase;
    font-weight:700;
    color: #212121;
}

.resume_list_company a span{
    display: inline-block;
    padding: 0 0 8px 0;
    margin: 0 0 12px 0;
}

.resume_list_company a span{
    font-size: 14px;
    text-transform: lowercase;
    font-weight:700;
    text-decoration: none;
    color: #212121;
}

.resume_list_company span:hover {
    border-bottom: 2px solid #212121;
    padding: 0 0 6px 0;
}

.resume_topics{
    padding: 0 0 20px 24px;
}

.resume_topics li{
    list-style: square;
    font-size: 14px;
}

.resume_topics li:first-child {
    text-transform: lowercase;
    margin: 0 0 6px 0;
}

/* RESUME_CONTENT */

.resume_content{
    margin: 116px 0 0 0;
    display: flex;
    flex-direction: column;
}

.resume_content h1 {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 20px;
    margin: 0 0 12px 0;
}

.resume_content h1::before {
    content: "_ ";
}

.resume_content hr{
    margin: 12px 0 12px 0;
    width: 32px;
    height: 2px;
    background-color: #A6A6A6;
    border: none;
}

.resume_file_download{
    align-self: flex-end;
}

.resume_file_download ul{
    width: 88px;
}

.resume_file_download a{
    text-decoration: none;
}

.resume_file_download ul li {
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    color: #212121;
}

.resume_file_download ul li:last-child{
    height: 64px;
}

.resume_file_download ul li span{
    display: block;
    height: 48px;
}

.resume_file_download ul li span:hover {
    border-bottom: 2px solid #212121;
    padding: 0 0 6px 0;
}

.resume_place{
    text-transform: uppercase;
    font-size: 18px;
    margin: 0 0 16px 0;    
}

.resume_table{
    width: 704px;
}

.resume_table_last{
    width: 528px;
    margin: 0 0 64px 0;
}

.resume_table tr td,
.resume_table_last tr td {
    padding: 8px;
    border-bottom: 1px dotted #A6A6A6;
    border-right: 1px dotted #A6A6A6;
    vertical-align: top;
    font-size: 13px;
    width: 160px;
}

.resume_table tr td::first-letter,
.resume_table_last tr td::first-letter{
    text-transform: uppercase;
}

.resume_table tr td::after,
.resume_table_last tr td::after{
    content: ".";
}

.resume_table tr:last-child td,
.resume_table_last tr:last-child td{
    border-bottom: none;
}

.resume_table td:nth-child(4),
.resume_table_last td:nth-child(3){
    border-right: none;
}

/* INDEX_CONTENT */

.index_content{
    margin: 32px 0 64px 0;
}

.index_content div:not(:last-child){
    margin: 0 52px 40px 0;
}

.project_at_home a {
    text-decoration: none;
    cursor: pointer;
}

.project_at_home a img {
    margin: 0 0 12px 0;
}

.project_at_home a ul{
    border-top: 4px dotted #A6A6A6;
    padding: 4px 8px 8px 8px;
}

.project_at_home a,
.project_at_home a ul li:first-child{
    font-size: 20px;
    font-weight: 800;
    color: #212121;
}

.project_at_home a ul li:first-child::after{
    content: " >";
}

.project_at_home a ul li:last-child{
    font-weight: 400;
    font-size: 14px;
}

/* PROJECT_INFOS */

/* .project_infos .separator hr{
    margin: 0 0 16px 48px;
} */

.project_name_and_back{
    display: flex;
    flex-direction: row;
    width: 420px;
    margin: 0 0 24px 0;
}

.project_name_and_back div:first-child{
    margin: 28px 0 0 0;
}

.project_name_and_back div:last-child{
    font-size: 84px;
    font-weight: 300;
    line-height: 72px;
    text-transform: lowercase;
}

.project_data {
    margin: 0 0 0 20px;
}

.project_data p{
    color: #646464;
    margin: 0 0 16px 0;
    font-size: 15px;
}

.project_data p::before{
    content: "> ";
}

.project_data > ul{
    width: 320px;
    margin: 0 0 16px 0;
    padding: 0 0 12px 0;
    border-bottom: 1px dashed #A6A6A6;
}

.project_data > ul > li:nth-child(odd) {
    font-weight: 800;
    margin: 0 0 4px 0;
    font-size: 14px;
}

.project_data > ul > li:nth-child(even) {
    margin: 0 0 12px 16px;
    list-style: square;
    padding: 0 0 0 4px;
    font-size: 14px;
}

.project_data > ul > li:has(.project_ordered_list){
    list-style: none;
    margin: 0 0 0 0 ;
}

.project_ordered_list{
    margin: 8px 0 0 12px;
}

.project_ordered_list li{
    list-style: decimal;
    padding: 0 0 8px 4px;
}

/* PROJECT_OPENING */

.project_opening{
    /* height: 640px; */
    width: 800px;
    /* margin: 172px 0 0 0; */
    /* background-color: coral; */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: flex-end;
}

.project_format_vert_open{
    display: flex;
    flex-direction: column; 
    align-items: flex-end; 
    align-self: flex-end;
}

/* PROJECT_CONTENT */

.project_content {
    display: flex;
    flex-direction: column;
}

.project_content div{
    margin: 0 0 64px 0;
}

.project_format_hor_wide{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0 0 32px 0;
    padding:  0 0 32px 0;
    border-bottom: 1px dotted #A6A6A6;
}

.project_format_hor_wide ul{
    width: 320px;
    margin: 16px 0 0 0;
}

.project_format_hor_wide span{
    display: inline-block;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 16px;
    align-self: flex-end;
    width: 240px;
    text-align: right;
}

.project_format_hor_dir,
.project_format_hor_esq{
    display: flex;
    flex-direction: row;
    border-bottom: 1px dotted #A6A6A6;
    margin: 0 0 64px 0;
    padding: 0 0 64px 0;
}

.project_format_hor_dir ul,
.project_format_hor_esq ul{
    width: 320px;
}

.project_format_hor_dir ul li:first-child,
.project_format_hor_esq ul li:first-child,
.project_format_vert_open ul li:first-child,
.project_format_hor_wide ul li:first-child {
    text-transform: lowercase;
    font-weight: 300;
    margin: 0 0 12px 0;
    font-size: 28px;
    width: 240px;
}

.project_format_hor_dir{
    justify-content: flex-end;
    /* align-items: flex-start;  */
}

.project_format_hor_dir ul{
    margin: 0 48px 64px 0;
}

.project_format_hor_dir img {
    order: 2;
}

.project_format_hor_dir ul{
    order: 1;
}

.project_format_hor_esq{
    align-items: flex-end;
    justify-items: flex-start;
}

.project_format_hor_esq ul{
    margin: 0 0 64px 48px;
}

.project_format_hor_esq img {
    order: 1;
}

.project_format_hor_esq ul{
    order: 2;
}

.project_format_vert_open{
    display: flex;
    flex-direction: column; 
    align-items: flex-end; 
    align-self: flex-end;  
}

.project_format_vert_open ul{
    width: 188px;
    margin: 16px 0 0 0;
}

.project_format_vert_open ul li{
    text-align: right;
}

.project_filter p{
    color: #646464;
    margin: 0 0 16px 0;
    font-size: 15px;
}

.project_filter p::before{
    content: "> ";
}

.project_list{
    margin: 116px 0 0 0;
    display: flex;
    flex-direction: column;
}

.project_list p{
    font-size: 40px;
    font-weight: 300;
    margin: 0 0 32px 0;
}

.project_filter_result_and_order {
    align-self: flex-end;
    margin: 0 0 48px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.project_order button {
    width: 36px;
    height: 36px;
    border: none;
    background-color: #212121;
    cursor:pointer
}

.project_order button:first-child{
    background-image: url("../image/bt-cres-ordered.png");
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 4px 0 0;
}

.project_order button:last-child{
    background-image: url("../image/bt-decres-ordered.png");
    background-position: center;
    background-repeat: no-repeat;
}

.project_filter_result button {
    display: inline-flex;
    align-items: center;  /* Vertically center icon and text */
    justify-content: center; /* Horizontally center content */
    gap: 12px;             /* Space between icon and label */
    padding: 0 12px;
    height: 36px;
    border: none;
    background-color: #212121;
    cursor:pointer;
    color: #FFFFFF;
    font-weight: 900;
}

.icon_close_filter_result{
    background-image: url("../image/bt-close-filter.png");
    background-position: center;
    background-repeat: no-repeat;
    height: 18px;
    width: 18px;
}

.project_filter_result button:first-child{
    margin: 0 4px 0 0;
}

.project_block a{
    text-decoration: none;
    color: #212121;
    cursor: pointer;
}

.project_block hr{
    margin: 0 0 24px 0;
    align-self:start;
    width: 52px;
    height: 4px;
    background-color: var(--separator-background-color);
    border: none;
}

.project_block a ul {
    padding: 0 0 32px 0;
    margin: 0 0 32px 0;
    border-bottom: 1px dotted #A6A6A6;
}

.project_block a ul li {
    padding: 4px 8px;
}

.project_block a ul li {
    font-weight: 600;
}

.project_block a ul li:nth-child(1) {
    text-transform: uppercase;
    font-size: 24px;
}

.project_block a ul li:nth-child(1)::before {
    content: "_ ";
}

.project_block a ul li:nth-child(2) {
    font-size: 14px;
    text-transform: lowercase;
}

.project_block a ul li:nth-child(3) {
    font-size: 14px;
    text-transform: lowercase;
    margin-bottom: 24px;
}

.project-filter-content{
    display: flex;
    flex-direction: column;
}

.project-filter-content-title{
    color: #646464;
    margin: 0 0 24px 0;
    font-size: 15px;
}

.project-filter-content-title::before{
    content: "> ";
}

.project-filter-group{
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    color: var(--html-option-default-text-color);
    font-weight: 700;
    /* margin: 0 0 28px 0; */
    margin: 0 0 32px 0;
}

.project-filter-group select{
    height: 32px;
}

.project-select-label{
    font-family: var(--font);
    font-size: 13px;
    font-weight: 900;
    color: var(--label-color-text);
    background-image: url("/image/gray-marker-4x4-t01.png");
    background-repeat: no-repeat;
    background-position: left 8px;
    padding: 0 0 0 12px;
    margin: 0 0 12px 0;
    display: inline-block;
}

.project-select-button-enabled,
.project-select-button-disabled {
    margin: 48px 0 0 0;
}

.project-select-button-enabled button,
.project-select-button-disabled button {
    font-size: 16px;
    font-weight: 900;
    padding: 16px 24px;
    font-family: var(--font);
}

.button-enabled {
    border: 1px solid #212121;
    background-color: #212121;
    color: #FFFFFF;
    cursor: pointer;
}

.button-disabled{
    border: 1px solid #646464;
    background-color: #646464;
    color: #cccccc;
    cursor: default;
}

.four_columns{
    display: flex;
    flex-direction: row;
    margin: 0 0 24px 0;
}

.four_columns div {
    width: 288px;
    margin: 0 15px 0 16px;
    padding: 0 16px 0 0;
    border-right: 1px dotted #A6A6A6;
}

.four_columns div:last-child {
    border-right: none;
}

.four_columns > div > ul{
    padding: 0 0 8px 0;
}

.four_columns > div > ul > li:nth-child(odd) {
    font-weight: 800;
    margin: 0 0 4px 0;
    font-size: 12px;
}

.four_columns > div > ul > li:nth-child(even) {
    margin: 0 0 12px 16px;
    list-style: square;
    padding: 0 0 0 4px;
    font-size: 12px;
}

.four_columns > div > ul > li:has(.project_ordered_list){
    list-style: none;
    margin: 0 0 0 0 ;
}

.project_ordered_list{
    margin: 8px 0 0 12px;
}

.project_ordered_list li{
    list-style: decimal;
    padding: 0 0 8px 4px;
}

.project_information {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.project_keywords{
    width: 320px;
}

.project_keywords .separator{
    width: 64px;
}

.project_keywords p{
    color: #646464;
    margin: 32px 0 16px 0;
    font-size: 15px;
}

.project_keywords p::before{
    content: "> ";
}

.project_keywords h1{
    font-size: 14px;
    font-weight: 500;
    width: 240px;
    margin: 0 0 0 8px;
}

.project_extra_infos{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 16px 0 0 0;
}

.project_extra_infos span{
    display: inline;
    text-align: right;
}

.project_date{
    font-size: 32px;
    font-weight: 500;
    width: 240px;
}

.project_company{
    font-size: 12px;
    font-weight: 900;
    width: 240px;
    padding: 4px 4px 4px 4px;
    background-color: #212121;
    color: #FFFFFF;
    text-transform: uppercase;
    margin: 4px 0;
    width: fit-content;
}

.project_client{
    font-size: 20px;
    font-weight: 300;
    text-transform: lowercase;
}

.project_message{
    width: 100%;
    font-size: 28px;
    font-weight: 300;
}

.project_design p{
    color: #646464;
    margin: 0 0 24px 0;
    font-size: 15px;
    padding:  0 0 24px 0;
    border-bottom: 1px dotted #A6A6A6;
}

.project_design p::before{
    content: "> ";
}

/* .project_design{} */