/* ---------------- STRUCTURE ---------------- */
body { line-height: 130%;
    font-family: 'Roboto';

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body * { box-sizing: border-box;}

#container {
    box-sizing: border-box;
    position: relative;
    top: 0; bottom: 0;
    transition: all 2s ease;
}

header { position: fixed; top: 0; left: 0; z-index: 10;
    width: 100%; height: 24%;
    background-color: rgba(255,255,255,0.8); backdrop-filter: blur(20px);
}

menu { position: fixed; top: 0; left: 0; z-index: 10;
    width: 100%; height: 90px;
}

footer { width: 100%; float: left; display: inline-block; padding: 24px; text-align: left;}

/* ---------------- COMPONENTS ---------------- */
/*  TOP  */
.headerbox { border-radius: 0.5em; text-align: left; width: 100%; position: absolute; bottom: 0; right: 0; line-height: 150%;}
.headerbox h1, .headerbox h2 { max-width: 80%; font-weight: 300;}
.headerbox h2 { color: #8a8a8a;}
.headerbox .logo { max-height: 50px; max-width: 14%; float: right; position: absolute;}

.menubox {
    border-radius: 0.5em;
    box-sizing: border-box;
    padding: 20px;
    float: left;
    position: relative;
    line-height: 150%;
    height: 100%;
    width: 100%;
}

.menubox a { background-color: rgba(0,0,0,0); background-position: center center; background-repeat: no-repeat; background-size: 50%; border-radius: 99em;
    height: 48px; width: 48px; opacity: 0.35;
    text-indent: 99em; display: inline-block; overflow: hidden;
}
.menubox a:hover { background-color: rgba(0,0,0,0.1); opacity: 0.65;}

.menubox a.linkedin { background-image: url(00_assets/ico_linkedin.svg);}
.menubox a.twitter { background-image: url(00_assets/ico_twitter.svg);}
.menubox a.instagram { background-image: url(00_assets/ico_instagram.svg);}
.menubox a.github { background-image: url(00_assets/ico_github.svg);}
.menubox a.cvfile { background-image: url(00_assets/ico_cv.svg);}
.menubox a.contact { background-image: url(00_assets/ico_contact.svg);}
.menubox a.contact, .menubox a.cvfile { float: right;}

/* BODY */
article { background-size: cover; background-color: var(--bg-color); background-repeat: no-repeat;
    margin-bottom: 1em; position: relative; cursor: pointer;
    aspect-ratio: 1 / 1;}
article.small { aspect-ratio: 2 / 1;}

article#streetfighter { background-image: url(00_assets/article_sf.jpg); --bg-color: #da942f;}
article#motogp, article#motogp { background-image: url(00_assets/article_motogp.jpg); --bg-color:#931637;}
article#nespressotools { background-image: url(00_assets/article_nespresso-tools.jpg); --bg-color: #926c3f;}
article#nespressovr { background-image: url(00_assets/article_nespresso-vr.jpg); --bg-color: #183401;}
article#benedict { background-image: url(00_assets/article_benedict.jpg); --bg-color: #b3b1b1;}
article#davis { background-image: url(00_assets/article_davis.jpg); --bg-color: #6e8146;}
article#labo { background-image: url(00_assets/article_labo.jpg); --bg-color: #a3a3a3;}
article#landscape { background-image: url(00_assets/article_landscape.jpg); --bg-color: #2d2d2d;}

article#jti { background-image: url(00_assets/article_jti_small.jpg); --bg-color: #3aab75;}
article#hotusa { background-image: url(00_assets/article_hotusa_small.jpg); --bg-color: #aabccd;}
article#aggrid { background-image: url(00_assets/article_aggrid_small.jpg); --bg-color: #5ca3e8;}
article#franklinsquare { background-image: url(00_assets/article_franklinsquare_small.jpg); --bg-color: #30363d;}
article#granvia { background-image: url(00_assets/article_gv2_small.jpg); --bg-color: #0f4a7e;}
article#fcbarcelona { background-image: url(00_assets/article_fcb_small.jpg); --bg-color: #992b31;}
article#tuenti { background-image: url(00_assets/article_tuenti_small.jpg); --bg-color: #0075c7;}
article#marfeel { background-image: url(00_assets/article_marfeel_small.jpg); --bg-color: #fe9739;}

article .pill {background-color: var(--bg-color); font-weight: 300;}

/* BOTTOM */
footer span { display: block;}


#topbox { width: 100%; position: absolute; top: 0; left: 0; color: #ffffff; text-align: left; box-sizing: border-box; filter: drop-shadow(0px 0px 8px var(--bg-color));}
#hub #topbox .logo { max-height: 80px; max-width: 40%; margin-bottom: 32px;}
#hub .small #topbox .logo { max-height: 40px; max-width: 40%; margin-bottom: 24px;}


#nespressovr .logo, #nespressotools .logo { margin-left: -8px;}

#bottombox {
    width: 100%;
    position: absolute;
    bottom: 0; left: 0;
    color: #ffffff;
    text-align: left;
    box-sizing: border-box;
}
#bottombox .pill {
    color: #fff;
    box-sizing: border-box;
    border-radius: 90em;
    margin-right: 0.5em;
    padding: 0.5em 1em;
    text-transform: uppercase;
    display: inline-block;
    margin-top: 1em;
}

.col33 { float: left; box-sizing: border-box;}
.col50 { float: left; box-sizing: border-box;}
#hub .col50 { padding: 0.5em 0.5em 0 0.5em;}
.col67 { float: right; box-sizing: border-box;}

.col100 {
    width: 100%;
    display: inline-block;
}
header, .menubox { -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; transition: all 150ms ease-in;}
article { -moz-transition: all 150ms ease-in-out; -webkit-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;}
footer article { -moz-transition: all 350ms ease-in-out; -webkit-transition: all 350ms ease-in-out; -o-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out;}
footer article .logo { -moz-transition: all 250ms ease-in-out; -webkit-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out;}



/* ---------------- DETAIL PAGE ---------------- */

#poster { position: fixed; top: 0; left: 0; overflow: hidden; background-position: top center; background-size: cover; width: 100%; display: inline-block;}
#poster { z-index: 2;}
#poster.onTop { z-index: -1;}
#poster.onBottom { z-index: 2;}
.layerPoster { width: 100%; height: 160px; margin-top: 529px; background-position: center bottom; background-size: contain; background-repeat: no-repeat; position: relative; z-index: 2;}
section { z-index: 2; background-color: #ffffff; position: relative; float: left; width: 100%;}
.layerPoster + section { padding-top: 24px;}
.startProduct { padding-top: 40px!important;}

#sidebar { text-align: left; color: #8a8a8a; font-weight: 300; float: left; box-sizing: border-box;}
#sidebar img { max-height: 30px; margin-bottom: 2em;}
#sidebar p { margin-bottom: 1em;}
#sidebar strong { color: #2d2d2d; font-weight: 300; padding-bottom: 4px;}
p + p { margin-top: 1em;}

#intro .col67 { text-align: left; float: right; box-sizing: border-box;}
#detail h3 { color: #8a8a8a; text-transform: uppercase; margin-bottom: 16px; font-weight: 300;}
#detail h2 { color: #2d2d2d; margin-bottom: 48px;}
#detail p { color: #7a7a7a; line-height: 130%;}


/* FIX SCALE */
#topbox h3 { width: 80%; font-weight: 600;}
section.artwork .col33 { padding: 0;}

section .h2 { margin-bottom: 32px;}
section .col33 { overflow: hidden;}
section .col33.artwork { text-align: right; padding-left: 0;}
section .col67.artwork { text-align: left; padding-right: 0;}

section .col67 .col50:not(.artwork) { padding-right: 6%; margin-bottom: 48px;}
section .col67 .col50.artwork:nth-child(1) { padding-right: 8px;}
section .col67 .col50.artwork:nth-child(2) { padding-left: 8px; padding-right: 0;}
section.artwork .col33.artwork:nth-child(1) { padding-right: 8px; width: 33%;}
section.artwork .col33.artwork:nth-child(2) { padding-left: 8px; padding-right: 8px; width: 34%; text-align: center;}
section.artwork .col33.artwork:nth-child(3) { padding-left: 8px; padding-right: 0; text-align: left;}
#detail section .col67 .col50 h2 { width: 100%; margin-bottom: 24px;}

section .col67.textcolumns div { text-align: left; padding-left: 0;}
section .col67.textcolumns + .col67 { margin-top: 48px;}

.textcolumns h2 { margin-bottom: 24px!important;}
#detail .artwork img { height: auto; width: 100%; max-height: 660px;}
#detail section.hero img { max-width: 100%;}

.artwork span { color: #8a8a8a; padding: 0.5em 20px 2em 20px; display: inline-block; font-weight: 300;}

#final { padding-bottom: 140px;}
#closing { padding: 120px 0 80px 0; background-color: #f4f2f2;}
#closing h2 { font-weight: 600;}


#hub footer { color: #8a8a8a;}
#detail footer { background-color: #333333; z-index: 1; bottom: 0; left: 0; text-align: center; padding: 40px 20px;}
footer article { width: 200px; margin: 8px; display: inline-block; opacity: 0.25; border-radius: 0.8em;}
footer article:hover { opacity: 1;}
#detail footer p { width: 100%; float: left; display: inline-block; margin-top: 2em;}
footer #topbox { text-align: center; padding-top: 0px; top: 30%;}
footer #topbox .logo {width: 100%; padding-left: 0;}
footer article:hover #topbox .logo { opacity: 1; filter: drop-shadow(0px 0px 8px var(--bg-color));}
footer article { background-size: 100%; background-position: center center;}
footer article:hover { background-size: 120%;}


/* hide scrollbar but allow scrolling */
element {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll;
}

::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}


/* ---------------- BUTTONS ---------------- */
#btnHome { background-color: rgba(0,0,0,0.65); background-image: url(00_assets/ico_close.svg); background-position: center center; background-repeat: no-repeat; background-size: 45%; border-radius: 99em;
    height: 48px; width: 48px; position: fixed; z-index: 10; right: 24px; top: 24px; opacity: 0;
    color: #ffffff; text-indent: -99em; display: inline-block; overflow: hidden;
    animation-name: FadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
#btnHome:hover { background-color: rgba(0,0,0,0.8);}

@keyframes FadeIn {
    from {opacity: 0; top: 0;}
    to {opacity: 1; top: 24px;}
  }

#btnNext { background-image: url(00_assets/ico_next.svg); background-position: center center; background-repeat: no-repeat; background-size: 45%; border-radius: 99em;
    height: 48px; width: 48px; position: absolute; bottom: 0; right: 32px; opacity: 0;
    color: #ffffff; text-indent: -99em; display: inline-block; overflow: hidden;}

.small #btnNext { background-image: url(00_assets/ico_external.svg);}

article:hover #btnNext { bottom: 24px; opacity: 1;}

#btnNext, #btnHome, .menubox a { -moz-transition: all 150ms ease-in-out; -webkit-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;}


/* ---------------- TEXTS ---------------- */
.text_masive { font-weight: 600; line-height: 110%;}
.text_huge { font-weight: 300; letter-spacing: 0.2px; line-height: 120%;}
.text_big { line-height: 130%; margin-bottom: 8px;}
.text_normal { font-weight: 300;}
.text_small { font-weight: 300; margin-bottom: 8px;}
.text_meta { font-weight: 100; font-size: 0.9em;}

#hub article { color: #fff!important;}
.text_huge { color: #2d2d2d!important;}

/* ---------------- CONSTANTS ---------------- */
.py_medium { padding: 40px 0;}
#intro.py_medium { padding-bottom: 64px;}
.pyt_medium { padding-top: 40px;}
.pyb_medium { padding-bottom: 40px;}



/* ----------------------------------------------- */
/* ---------------- MEDIA QUERIES ---------------- */

@media only screen and (max-width: 375px) {
    /* ---------------- TEXTS ---------------- */
    .text_masive { font-size: 2.4em!important; margin-bottom: 32px!important;}
    .text_huge { font-size: 1.8em!important;}
    .text_big { font-size: 1.44em!important;}
    .text_small { font-size: 1.2em!important;}
    .text_normal { font-size: 1.1em!important;}
    .text_meta { font-size: 0.6em!important;}


    /* ---------------- MINOR FIXES ---------------- */
    .headerbox { padding-bottom: 6%!important;}
    .headerbox .text_big { font-size: 1.1em!important;}
    .menubox {padding: 10px 20px;}
    #hub .col50 { padding-top: 45%!important;}
    #hub .col50 + .col50 { padding-top: 0px!important;}
    .col50, .col33, .col67 { width: 100%!important;}

    #poster {height: 400px!important;}
    .layerPoster { margin-top: 240px!important;}

    #detail section.hero img { max-width: 300%;}
    #detail section.hero { overflow: scroll; scroll-behavior: smooth;}

    .artwork { text-align: left!important; padding: 0!important;}
    #detail footer { position:relative!important;}
    footer article { width: 29%!important; opacity: 0.5; }
    footer #topbox .logo {opacity: 1;}
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 768px) {
    /* ---------------- TEXTS ---------------- */
    .text_masive { font-size: 2.4em!important; margin-bottom: 32px!important;}
    .text_huge { font-size: 2em; line-height: 110%; margin-bottom: 0.15em;}
    .text_big { font-size: 1.6em;}
    .text_small { font-size: 1.3em;}
    .text_normal { font-size: 1.2em;}
    .text_meta { font-size: 0.8em;}


    .headerbox {padding: 0 20px 10% 32px;}
    .headerbox .text_big { font-size: 1.2em;}
    .headerbox .logo { top: 18%; right: 16px; transform: rotateZ(90deg); }

    #hub .col50 { padding-top: 62%;}
    #hub .col50 + .col50 { padding-top: 0px;}

    #poster {height: 600px;}
    .layerPoster { margin-top: 360px;}
    #sidebar { width: 100%; padding: 0 20px 40px 20px;}
    #sidebar .logo { float: right; max-height: 45px!important; max-width: 30%;}

    .col50, .col33, .col67 { width: 100%!important;}
    section .col67:not(.artwork) { padding-right: 20px!important; padding-left: 20px!important;}
    #container { width: 100%; padding: 0 0.5em;}
    .col50 article { border-radius: 1em;}
    article.small { background-position: 50px center;}

    #detail h2 { width: 100%;}
    .artwork { text-align: left!important; padding: 0!important;}
    .small #topbox .logo { max-height: 30px; margin-bottom: 16px;}

    #detail section.hero img { max-width: 300%;}
    #detail section.hero { overflow: scroll; scroll-behavior: smooth;}

    #topbox { padding: 24px 24px 0 24px;}
    #bottombox { padding: 0 24px 24px 24px;}
    .col50 article { opacity: 1;}

    footer article { width: 29%!important; opacity: 0.5;}
    footer #topbox .logo {opacity: 1;}
}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

    /* ---------------- TEXTS ---------------- */
    .text_masive { font-size: 3.4em; margin-bottom: 56px!important;}
    .text_huge { font-size: 2.16em; margin-bottom: 0.35em;}
    .text_big { font-size: 1.6em;}
    .text_small { font-size: 1.3em;}
    .text_normal { font-size: 1.2em;}
    .text_meta { font-size: 0.8em; font-weight: 300;}


    /* ---------------- BUTTONS ---------------- */

    /* ---------------- STRUCTURE ---------------- */
    header { height: 430px; width: calc(50% - 0.5em);}
    .menuOpen header { height: 430px;}
    .menuClose header { height: 300px;}
    .menuOpen .headerbox { padding-bottom: 80px;}
    .menuClose .headerbox { padding-bottom: 60px;}

    menu { width: calc(50% - 0.5em);}
    .menuOpen menu { height: 250px;}
    .menuClose menu { height: 120px;}
    .menuOpen .menubox { padding-top: 80px;}
    .menuClose .menubox { padding-top: 30px;}

    footer { text-align: center;}


    /* ---------------- COMPONENTS ---------------- */
    /*  TOP  */
    .startProduct { padding-top: 140px!important;}
    menu { left: calc(50% + 0.5em); height: 250px; background-color: rgba(255,255,255,0.8); backdrop-filter: blur(20px);}
    .menubox {padding: 80px 24px;}
    .headerbox { padding: 0 20px 80px 40px;}
    .headerbox .text_big { font-size: 1.44em;}
    .headerbox .logo { top: 10%; right: 32px; transform: none; }

    #hub .col50 { padding-top: 430px;}
    #hub .col50 + .col50 { padding-top: 250px;}

    #poster {height: 689px;}
    .layerPoster { margin-top: 529px;}

    .col33 { width: 33%;}
    .col50 { width: 50%;}
    .col67 { width: 67%;}
    section .col67 { padding-right: 15%;}
    .col50 article { border-radius: 1em 0 0 1em;}
    .col50 + .col50 article { border-radius: 0 1em 1em 0;}
    article.small { background-position: center center;}

    /*  BODY  */
    #detail h2 { width: 80%;}
    #sidebar p { margin-bottom: 2em;}
    p + p { margin-top: 2em;}
    .small #topbox .logo { max-height: 60px; margin-bottom: 32px;}

    #topbox { padding: 48px 40px 0 40px;}
    #bottombox { padding: 0 40px 30px 40px;}

    .col50 article { opacity: 0.2;}
    .col50:hover article { opacity: 0.5;}
    .col50 article:hover { opacity: 1;}

    section .h2 { margin-bottom: 48px;}
    section .col33 { padding: 0 4% 0 15%;}

    #closing { margin-bottom: 340px;}
    footer span { display: inline-block; margin-right: 10px;}
    #detail footer { position: fixed; bottom: 0; left: 0;}

    footer #topbox .logo {opacity: 0;}

    .py_medium { padding: 60px 0;}
    .pyt_medium { padding-top: 60px;}
    .pyb_medium { padding-bottom: 60px;}
}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

    #container { width: 70%; margin: 0 auto;}
    .headerbox, .menubox { width: calc(70% - 0.5em);}
}

/* Extra huge devices (huge laptops 1800px and up) */
@media only screen and (min-width: 1800px) {
    #container { width: 65%; margin: 0 auto;}
    .headerbox, .menubox { width: calc(65% - 0.5em);}
}