/* Variables */ :root { --tile-margin: .9vw; --caption-hmargin: calc(2 * var(--tile-margin)); --caption-vmargin: calc(1.5 * var(--tile-margin)); --body-margin: 3.6vw; --theme-color: #46c8a5; --bgcolor: white; --header-inner-space: calc(8 * var(--tile-margin)); --header-space: calc(10 * var(--tile-margin) - 10px + var(--tile-margin)); } /* Columns */ @media (min-width: 1501px) { :root { --columns: 5; } } @media (max-width: 1500px) { :root { --columns: 5; } } @media (max-width: 1000px) { :root { --columns: 4; } } @media (max-width: 700px) { :root { --columns: 3; } } @media (max-width: 500px) { :root { --columns: 2; } } @media (max-width: 400px) { :root { --columns: 2; } } /* Font Size */ :root { font-size: 1.2vw; font-weight: 100; } h1 { font-size: 1.18vw; } /* @media (max-width: 1500px) { :root { font-size: 22px; } h1 { font-size: 22px; } } @media (max-width: 1240px) { :root { font-size: 18px; } } @media (max-width: 1080px) { :root { font-size: 16px; } } */ /* Margins */ /* @media (max-width: 1080px) { :root { --tile-margin: 12.75px; --body-margin: 33px; } } */ /* Header */ @media (max-width: 600px) { #mobile-header { visibility: visible; } #wide-header { visibility: hidden; } :root { --header-space: 100px; } } @media (min-width: 601px) { #mobile-header { visibility: hidden; } #wide-header { visibility: visible; } } #logo { width: 10vw; margin: 0 .7vw -.9vw .5vw; } /* Typographies */ @font-face { font-family: 'akrobat-regular'; src: url('/static/font/Akrobat-Regular.otf') format('opentype'); } @font-face { font-family: 'akrobat-bold'; src: url('/static/font/Akrobat-Bold.otf') format('opentype'); } /* Rules */ :root { font-family: 'akrobat-regular'; letter-spacing: .07rem; } .sec-div { font-weight: bold; font-family: 'akrobat-regular'; } a { color: black; margin: .05rem .3rem; text-decoration: none; } a.en { margin-bottom: .3em; } h1 { font-size: 1.1em; text-align: center; letter-spacing: .05rem; font-weight: 100; font-family: 'akrobat-bold'; text-decoration: none; text-transform: uppercase; margin: .2em 0; } h2 { font-size: .9em; font-family: 'akrobat-bold'; text-decoration: none; text-transform: uppercase; } a.selected, a[href]:hover { color: var(--theme-color); } div { display: -webkit-box; display: -ms-flexbox; display: flex; } body { width: calc(100% - 2*var(--body-margin)); margin: 0 var(--body-margin); position: absolute; background-color: var(--bgcolor); } #logo #background { fill: var(--bgcolor) !important; } #wide-header { width: calc(100% - 2*(var(--body-margin))); margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: fixed; background-color: var(--bgcolor); height: var(--header-space); position: fixed; z-index: 1; } .header-box { padding-bottom: calc(2 * var(--tile-margin)); overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; height: var(--header-inner-space); } .vbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .rbox .vbox { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .lbox .vbox { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .hbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .lbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .rbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .header-subtitle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 0; } #alucho-title, #designer-subtitle { -ms-flex-wrap: wrap; flex-wrap: wrap; } .no-bottom { margin-bottom: 0; } .header-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } a.first { margin-left: var(--tile-margin); } a.last { margin-right: var(--tile-margin); } main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-top: calc(var(--header-space) - var(--tile-margin)); position: static; } figure { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(100% / var(--columns) - 2 * var(--tile-margin)); margin: var(--tile-margin); overflow: hidden; } figure img.tile, svg { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; cursor: pointer; } figure figcaption { font-size: .7em; padding: var(--caption-vmargin) var(--caption-hmargin); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; background-color: var(--bgcolor); bottom: 0; width: calc(100% - 2 * var(--caption-hmargin)); -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: .3s ease; transition: .3s ease; } figure:hover figcaption { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: .3s ease; transition: .3s ease; } figcaption h1 { margin: 0; } .caption { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 var(--tile-margin); height: var(--body-margin); font-size: .7em; font-weight: 900; } footer::after { content: ""; height: var(--tile-margin); bottom: 0; } .footer-content { height: calc(var(--body-margin) - var(--tile-margin)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } footer .copyright, footer .social { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } footer a.first { margin-left: 0; } footer a.last { margin-right: 0; } footer svg { width: auto; height: 1.5em; margin-left: .75em; } .social a { margin: 0; } .hidden { visibility: hidden; }