html {
    background: #000;
    color: #fff;
}

html, button {
    font-family: 'Source Code Pro';
    font-size: 1.1em;
}

body {
    margin: 0;
}

html[lang=en-GB] [lang]:not([lang=en-GB]),
html[lang=pt-PT] [lang]:not([lang=pt-PT]) {
    display: none !important;
}

* {
    outline:0;
}

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

a.img_link {
    line-height: 0;
}

.no_max_dimensions {
    max-width: 100%;
    max-height: 100%;
}

.home_button:hover {
    cursor: pointer;
}

.flex_column {
    flex-direction: column;
}

p a, li a {
    text-decoration: underline;
    background: antiquewhite;
    font-weight: bold;
}

p a:hover, li a:hover {
    text-transform: uppercase;
}

.button {
    font-family: 'Khand';
    padding: 0.4em 1em !important;
    background: #fffa;
    font-size: 1.5em;
    color: #000;
    text-transform: uppercase;
    transition: width 0.8s ease-in-out;
}

.button:hover {
    cursor: pointer;
    text-decoration: underline;
}

.dark_button {
    background: #000d;
    color: #fff;
}

.form_sent {
    display: none;
    padding-top: 3em;
    text-align: center;
}

h1, h2 {
    font-family: 'Khand';
}

h3 {
    text-transform: uppercase;
}

p.no_space {
    margin-bottom: 0;
}

p.no_space + p.no_space {
    margin-top: 0;
}

.mid_section {
    position: relative;
    height: 100vh;
}

.mid_section > div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    transition: background-position 1s;
    text-align: center;
}

.mid_section * + * {
    z-index: 10;
}

/* Forms */
.form_wrapper > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2em;
}

form {
    max-width: 40em;
    width: 100%;
    margin: auto;
}

form > *, form #full_address > * {
    width: 100%;
}

form p {
    margin: 0;
}

form input[type=text], form select, form input[type=email], form input[type=tel], form input[type=number] {
    margin: 1em 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: 0 1px 3px #ddd inset;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 0.8em 1em;
    font-size: 1em;
}

form input::placeholder {
    font-style: italic;
    color: #777;
}

form .invalid_input {
    border-color: #de1a1a !important;
}

/* Header */
header {
    position: absolute;
    top: 0;
    z-index: 100;
    width: 100%;
    padding: 2em 0;
    box-sizing: border-box;
    text-align: center;
}

#lang_selector {
    display: flex;
    justify-content: flex-end;
    margin-right: 5vw;
}

#lang_selector div {
    padding: 0.5em 1em;
    background: #fffa;
    color: #000;
}

#lang_selector div:hover {
    text-decoration: underline;
    cursor: pointer;
}

#omni_logo {
    max-width: 18em;
    margin: 2em 0;
    padding: 2.5em 3em;
    background: #fffa;
}

#omni_logo .svg_fill {
    fill: #fff;
}

#omni_logo .svg_stroke {
    stroke: #fff;
}

header nav .button {
    padding: 0.3em 0.8em 0.3em 2em;
}

header nav .button + .button {
    margin-left: 1.5em;
}

#kofi_support_us_list {
    width: 2em;
    vertical-align: middle;
}

/* Intro section */
#intro {
    min-height: 100vh;
    box-sizing: border-box;
    align-items: flex-end;
}

/* main */
#main {
    position: relative;
}

section {
    padding: 0 12vw 3em;
    box-sizing: border-box;
    background: #fff;
    color: #000;
    text-align: center;
}

section > h1, .shop_item_title > h1 {
    display: inline-block;
    margin: 1.5em 0 1em;
    color:#000;
    font-size: 2.5em;
    text-transform: uppercase;
}

section > h1 + h2 {
    margin: 0 0 3em;
}

section > h1 + div, section > p + div, .shop_item_title > h1 + div, .shop_item_title > p + div {
    padding-top: 0 !important;
}

section + section {
    border-top: 5em solid #000;
}

section div p {
    text-align: justify;
}

ul {
    text-align: justify;
}

/* Projects section */
#projects h1 {
    margin-bottom: 0;
}

#projects div + h2 {
    border-top: dotted 0.3em;
}

#projects > div {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 3em 0;
}

#projects > div > img, #projects > div .img_link img, #projects .project_image_overlay img {
    max-width: 35em;
    width: 35vw;
}

#projects > div:nth-of-type(even) > img, #projects > div:nth-of-type(even) .img_link, #projects > div:nth-of-type(even) > .project_image_overlay {
    order: 2;
}

#projects > div:nth-of-type(even) .project_description, #projects > div:nth-of-type(even) .project_synopsis {
    text-align-last: right;
}

#projects li {
    text-align-last: auto;
}

.project_description, .project_synopsis {
    display: flex;
    justify-content: flex-end;
}

* + .project_description {
    padding-top: 1em;
    border-top: 1px dashed;
}

.project_synopsis {
    margin-top: 3em;
}

.project_head {
    padding: 0.25em 2em 0;
}

.project_head img {
    width: 1.8em;
}

#projects > div:nth-of-type(even) .project_head {
    order: 2;
}

.project_description span p:first-child, .project_synopsis span p:first-child {
    margin-top: 0;
}

.project_description span p:last-child, .project_synopsis span p:last-child {
    margin-bottom: 0;
}

#projects > div + div {
    border-top: 1px solid;
}

#projects .project_image_overlay {
    position: relative;
    padding: 0;
    line-height: 0;
}

#projects .project_image_overlay > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 0;
    overflow: hidden;
    animation-name: image_overlay_animation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    background-size: cover;
}

#projects span > ul > ul + li {
    margin-top: 2em;
}

@keyframes image_overlay_animation {
    0% { right: 0%; }
    33% { right: 0%; }
    66% { right: 100%; }
    100% { right: 100%; }
}

.project_details {
    display: flex;
    justify-content: center;
    text-align: left;
}

.project_details > * {
    max-width: 80%;
}

.project_details div + div {
    margin-top: 2em;
}

.project_links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1.5em 0;
    gap: 1em 2em;
}

.project_links > * {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.project_links > * a {
    display: flex;
    align-items: center;
}

.project_links > * a.anim_logo svg:not(.standard_size), .project_links > * .instagram_logo {
    width: 2.5em;
    height: 2.5em;
}

.project_links > * a.anim_logo:hover {
    text-decoration: underline;
}

.project_links a > *:last-child {
    margin-left: 0.5em;
}

.project_links a > *:first-child {
    margin-left: 0;
}

.project_links a.kofi_support_us {
    margin-right: -0.6em;
}

/* Bio section */
#artists > div {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#artists > div + div {
    border-top: 1px solid;
}

#artists > div > img {
    max-height: 40em;
}

#artists > div > div {
    display: flex;
    align-items: flex-start;
    padding: 2em 0;
}

#artists > div > div .artist_name img {
    width: 2em;
}

#artists > div > div > div > div:last-child {
    display: inline-block;
}

#artists > div > div > div > div p:first-child {
    margin-top: 0;
}

#artists > div > div > div > div ul {
    margin-top: 3em;
    margin-bottom: 0;
}

#artists > div > div > div > div ul li {
    margin: 0.5em 0;
}

#joanam > div > .artist_name {
    padding: 0.25em 2em 0;
}

#miguelmd > div > .artist_name {
    padding: 0.25em 2em 0;
}

#miguelmd > div > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#miguelmd p {
    text-align-last: right;
}

/* Media section */
#media {
    padding-bottom: 5em;
}

#media > h1 {
    margin-bottom: 1em;
}

#media > div {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 3em 0.7em;
}

#media > div:nth-of-type(1) {
    padding-bottom: 3em;
}

.media_link {
    display: inline-block;
    max-width: 100%;
}

.media_link > div {
    position: relative;
    line-height: 0;
}

.media_link img {
    max-width: 100%;
    min-width: 34em;
    width: 34vw;
}

.media_link > div p {
    line-height: normal;
}

.media_link > div > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    background-color: #0007;
    transition: background-color 0.8s;
}

.media_link .media_title {
    padding: 0 2em;
}

.media_link .media_title > p:first-child {
    font-size: 1.4em;
    text-transform: uppercase;
    text-align: center;
}

.media_link .media_video {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    margin-top: 1.5em;
}

.media_link .media_video a {
    display: flex;
    align-items: center;
    color: #fff;
}

.media_link .media_video a.anim_logo:hover {
    text-decoration: none;
}

.media_link .media_video svg {
    width: 2.5em;
}

.media_link .youtube_logo {
    fill: #fff;
}

.media_link a.anim_logo:hover {
    cursor: pointer;
}

.media_link a.anim_logo:hover > div > div {
    background-color: transparent;
}

/* Support Us section */
#support_us > div {
    display: flex;
    align-items: center;
    gap: 2em 3em;
}

#support_us > div > div {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
}

#support_us > div > a {
    max-width: 50%;
}

#kofi_screenshot {
    max-width: 100%;
}

a.kofi_support_us, a.kofi_support_us svg {
    width: 4.5em !important;
    height: 4.5em !important;
}

.kofi_circle {
    fill: #00bbf100;
}

.kofi_cup_bg {
    fill: #fff;
}

.kofi_cup_stroke {
    fill: #000;
}

.kofi_cup_heart {
    fill: #000;
}

.kofi_circle, .kofi_cup_bg, .kofi_cup_stroke, .kofi_cup_heart {
    transition: fill 0.8s;
}

a.anim_logo:hover .kofi_circle {
    fill: #00bbf1;
}

a.anim_logo:hover .kofi_cup_bg {
    fill: #fff;
}

a.anim_logo:hover .kofi_cup_stroke {
    fill: #000;
}

a.anim_logo:hover .kofi_cup_heart {
    fill: #ff5f5f;
}

/* Social Media section */
#social_media {
    text-align: center;
}

#social_media h1 {
    margin-bottom: 1.5em;
    font-size: 1.7em;
}

#social_media div {
    display: flex;
    justify-content: center;
    gap: 1em 2em;
    flex-wrap: wrap;
    cursor: default;
}

/* Logo Animations */
a.anim_logo svg, .instagram_logo {
    width: 3em;
    height: 3em;
}

.instagram_logo, .facebook_logo, .youtube_logo, .spotify_logo, .whatsapp_logo, .mail_svg_env {
    fill: #000;
}

.mail_svg_bg {
    fill: #0000;
}

.instagram_logo {
    filter: brightness(0);
    transition: filter 0.8s;
}

.facebook_logo, .youtube_logo, .spotify_logo, .whatsapp_logo, .mail_svg_bg, .mail_svg_env, .ticket, .rca_logo, .viral_logo_bg {
    transition: fill 0.8s;
}

svg stop {
    transition: stop-color 0.8s;
}

.project_links > .ticket a.anim_logo:hover svg > * {
    fill: #fff;
}

.project_links > .ticket a.anim_logo:hover svg > *.white {
    fill: #000;
}

a.anim_logo:hover .rca_logo {
    fill: #c22324;
}

a.anim_logo:hover .apple_podcasts_logo stop:first-child {
    stop-color: #d56efc;
}

a.anim_logo:hover .apple_podcasts_logo stop:last-child {
    stop-color: #832bc1;
}

a.anim_logo:hover .instagram_logo {
    filter: brightness(1);
}

a.anim_logo:hover .facebook_logo {
    fill: #1877F2;
}

a.anim_logo:hover .youtube_logo {
    fill: #ff0000 !important;
}

a.anim_logo:hover .spotify_logo {
    fill: #1ED760;
}

a.anim_logo:hover .viral_logo_bg {
    fill: #008a5a;
}

a.anim_logo:hover .whatsapp_logo {
    fill: #25D366;
}

a.anim_logo:hover .mail_svg_bg {
    fill: #000;
}

a.anim_logo:hover .mail_svg_env {
    fill: #fff0;
}

/* Footer */
footer {
    box-sizing: border-box;
    padding: 2em;
    text-align: center;
}

footer span:last-child {
    font-size: 0.9em;
}

#up_button {
    display: none;
    position: fixed;
    right: 1em;
    bottom: 1em;
}

#up_button .button:hover {
    text-decoration: none;
}

#workshop_link {
    display: flex;
    position: absolute;
    top: -1em;
    right: 1em;
    transform: translateY(-100%);
    flex-direction: column;
    background: #000c;
    padding: 1.5em 1em;
    align-items: center;
    color: #fff;
    z-index: 100;
}

#workshop_link img {
    width: 12em;
    max-width: 40vw;
}

@media (max-height: 760px) {
    #intro {
        min-height: 760px !important;
    }
}

@media (max-width: 1500px) and (max-height: 950px) {
    #intro {
        min-height: 950px !important;
    }
}

@media (max-width: 1800px) {
    header nav {
        font-size: 0.9em;
    }

    section {
        padding-right: 5vw;
        padding-left: 5vw;
    }

    #artists > div > img {
        max-height: 35em;
    }
}

@media (max-width: 1500px) {
    header nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    header nav a {
        margin: 0.3em 0;
    }

    header nav .button + .button {
        margin-left: 0;
    }

    #artists > div:nth-of-type(odd) {
        align-items: flex-end;
    }

    #media > div {
        flex-direction: column;
    }

    .media_link img {
        min-width: 0;
        width: 35em;
    }
}

@media (max-width: 1150px) {
    html {
        font-size: 1em;
    }

    #projects > div {
        flex-direction: column;
    }

    #projects > div:nth-of-type(odd) .project_head {
        padding-left: 0;
    }

    #projects > div:nth-of-type(even) .project_head {
        padding-right: 0;
    }

    #projects > div > img, #projects .project_image_overlay img {
        width: 45vw;
    }

    #projects > div > div:not(.project_image_overlay) {
        order: 2;
        margin-top: 2em;
    }

    .project_description, .project_synopsis {
        justify-content: space-evenly;
    }

    #artists > div {
        flex-direction: column;
    }

    #artists > div:nth-of-type(odd) {
        align-items: center;
        padding-bottom: 3em;
    }

    #artists > div + div {
        padding-top: 3em;
    }

    #joanam > div {
        margin-top: 2em;
    }

    #joanam > div > .artist_name {
        padding-left: 0;
    }

    #miguelmd > div {
        order: 2;
        margin-top: 2em;
    }

    #miguelmd > div > .artist_name {
        padding-right: 0;
    }

    .media_link img {
        min-width: 30em;
    }

    #support_us > div {
        flex-direction: column;
    }

    #support_us > div > a {
        max-width: 70%;
    }

    #support_us > div > div {
        width: 100%;
        justify-content: center;
    }

    #social_media {
        font-size: 0.9em;
    }
}

@media (max-width: 700px) {
    .mobile_full_width {
        width: 100%;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 600px) {
    html {
        font-size: 0.95em;
    }

    header nav {
        font-size: 0.9em;
    }

    section {
        padding-right: 0;
        padding-left: 0;
    }

    #about {
        padding-right: 2em;
        padding-left: 2em;
    }

    #projects > div > div, #artists > div > div, #media > div {
        padding: 0 2em;
    }

    #projects > div > img, #projects .project_image_overlay img {
        max-width: none;
        width: 100%;
    }

    #projects .project_image_overlay img {
        height: 100%;
    }

    #projects > div:nth-of-type(odd) .project_head {
        padding-right: 1em;
    }

    #projects > div:nth-of-type(even) .project_head {
        padding-left: 1em;
    }

    .project_details > * {
        max-width: none;
    }

    #artists > div + div {
        padding-top: 0;
    }

    #artists > div > img {
        width: 100%;
        max-height: none;
    }

    #artists ul {
        padding-left: 2em;
    }

    #joanam > div > .artist_name {
        padding-right: 1em;
        padding-left: 0;
    }

    #miguelmd > div > .artist_name {
        padding-right: 0;
        padding-left: 1em;
    }

    .media_link {
        width: 100%;
    }

    .media_link img {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    #support_us > div > a {
        max-width: 100%;
    }

    #support_us > div > div > * {
        padding: 0 2em;
    }

    #social_media {
        font-size: 0.8em;
    }

    #workshop_link img {
        max-width: 9em;
    }
}