/* ---------------------------------------------------------------------- */
/*  Settings -> Variables
/* ---------------------------------------------------------------------- */


:root {

    /* Colors */

    --main-bg-color: #FBFBFB;
    --secondary-bg-color: rgba(250, 250, 250, .87);

    --main-font-color: #000;
    --secondary-font-color: rgba(5, 5, 1, .66);
    --tertiary-font-color: #999;

    --error-color: #bf1a1a;

    --color-yellow: #F2F97A;
    --color-salmon: #FF8979;
    --color-blue: #65B0CA;

    /* Typography */

    --main-font-family: 'HN', sans-serif;

    --base-font-size: 14px;
    --small-font-size: .8rem; /* 12px */
    --medium-font-size: 24px;
    --big-font-size: 30px; /* 48px */
    --bigger-font-size: 40px;


    /* Box Model */

    --spacer: 36px;
    --spacer-2x: 72px;
    --spacer-3x: 108px;
    --spacer-half: 18px;

}


@media all and (max-width: 768px) {

    :root {
        --base-font-size: 14px;
        --small-font-size: .8rem; /* 12px */
        --medium-font-size: 17px;
        --big-font-size: 20px; /* 48px */
        --bigger-font-size: 25px;

        --spacer: 20px;
        --spacer-2x: 40px;
        --spacer-half: 10px;

    }


    

}

@media all and (min-width: 768px) and (max-width: 1024px) {

    :root {
        --base-font-size: 15px;
        --small-font-size: .8rem; /* 12px */
        --medium-font-size: 20px;
        --big-font-size: 25px; /* 48px */
        --bigger-font-size: 30px;

        --spacer: 36px;
        --spacer-2x: 72px;
        --spacer-3x: 108px;
        --spacer-half: 18px;

    }


}




/* ---------------------------------------------------------------------- */
/*  Generic –> Box Sizing
/* ---------------------------------------------------------------------- */

*, *:before, *:after {box-sizing: border-box;}


/* ---------------------------------------------------------------------- */
/*  Generic –> Shared
/* ---------------------------------------------------------------------- */

html, body {font-family: var(--main-font-family); font-size: var(--base-font-size); font-weight: 300; color: #000; line-height: 1.7; letter-spacing: 1px;}
body {margin:0;}

hr {display: block; height: 1px; margin: 1em 0; padding: 0; border: 0; border-top: 1px solid #ccc;}

a {color: #000; text-decoration: none; transition: .6s;}
a:hover {opacity: .8;}


h1 {margin: 0 0 var(--spacer) 0;  font-size: var(--bigger-font-size); font-weight: 300; line-height: 1; }
h1 span {display: block; font-size: var(--small-font-size); margin-top: 10px;}
h1 span a {text-decoration: underline; }

h2 {margin: 0;  font-size: var(--medium-font-size); text-transform: uppercase; font-weight: 300; line-height: 1.2}
h3 {margin: 0;  font-size: var(--medium-font-size); text-transform: uppercase; font-weight: 300; line-height: 1}
h4, h5, h6 {margin: 0; font-weight: 400; text-transform: uppercase;}
h3+h3 {margin-top: 7px;}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-family: var(--main-font-family); font-size: var(--base-font-size); font-weight: 300; color: #000;
}
::-moz-placeholder { /* Firefox 19+ */
  font-family: var(--main-font-family); font-size: var(--base-font-size); font-weight: 300; color: #000;
}

p a {text-decoration: underline;}
p:first-child {margin-top: 0;}
p:last-child {margin-bottom: 0;}

img {display: block; max-width: 100%;}
figure {margin: 0; padding: 0px}
ul {margin: 0; padding: 0; list-style: none;}

section, .wrapper {max-width: 80%; margin: 0px auto;}
section {margin-top: var(--spacer-2x);}
main {margin-top: 200px;}
body.welcome-page main, main.about_page, main.contacts_page {margin-top: 0px;}


@media all and (max-width: 768px) {
    .grid {grid-template-columns: 1fr!important}
    section, .wrapper {max-width: 100%;}
    h1 {margin-left: var(--spacer);}
    main {margin-top: 100px;}

    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-family: var(--main-font-family); font-size: var(--base-font-size); font-weight: 300; color: #fff;}
    ::-moz-placeholder { /* Firefox 19+ */
  font-family: var(--main-font-family); font-size: var(--base-font-size); font-weight: 300; color: #fff;}
}

@media all and (min-width: 768px) and (max-width: 1024px) {
    main {margin-top: 150px;}
}


/* ---------------------------------------------------------------------- */
/*  Elements –> Header
/* ---------------------------------------------------------------------- */

header {position: fixed; top:0; left: 0; width: 100%; padding: var(--spacer); z-index: 999}
header .site-logo {position: absolute; z-index: 999;}
.langs {    position: absolute;
    right: -40px;
    top: 0;
    font-size: 30px;}
.langs a {opacity: 0.6}
.langs a.active {opacity: 1}

@media all and (max-width: 768px) {

    header .site-logo img {width: 86px}
    .langs {position:fixed; top:26px; right: 80px; font-size: 20px;}

}

@media all and (min-width: 768px) and (max-width: 1024px) {
    header .site-logo img {width: 120px}
      .langs {position:fixed; top:43px; right: 100px; font-size: 20px;}
}

/* ---------------------------------------------------------------------- */
/*  Pages –> Home
/* ---------------------------------------------------------------------- */

section.home {background: var(--color-yellow); width: 100%; max-width: 100%; height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; background-image: url('../../img/lisbonweek-bairroajuda.svg'); background-repeat: no-repeat; background-position: center; background-size: 80vw}

.article {position: relative;}
.article figure {background-color: #fff;}
.article img {width: 101%; height: 101%; object-fit: cover; display: block; transition: transform 1s}
.article .details, article .details {padding: 30px 18px 18px 18px; position: relative;}
.article .details a, article .details a {display:block; color: #000; text-decoration: underline; font-size: var(--small-font-size)}
.article .category, article .category {text-transform: uppercase; font-size: var(--small-font-size); margin:10px 0;}
.article .category:before, article .category:before {content: ''; width: 9px; height: 9px; border: 0.5px solid #000; border-radius: 50%; display: inline-block; margin-right: 4px;}
.article time, article time  {font-size: var(--small-font-size);}

.article:hover img {transform: scale(1.1);}
.article img.logo {height: 20px; width: auto; margin: 20px 0px}
.article:hover img.logo {transform: scale(1);}
.article .art-logos {margin-top: 20px; display: flex;}
.article .art-logos img:first-of-type {margin-right: 20px;}

section.whatson .grid{display: grid; grid-template-columns: 1fr 1fr 1fr;}
section.whatson .grid .article {background: var(--color-salmon);}
section.whatson .grid .article figure {width: 100%; height: 240px; overflow: hidden;}
section.whatson .grid .article time {position: absolute; top: 6px; right: 10px;}

section.program .grid{display: grid; grid-template-columns: 1fr 1fr;}
section.program .grid .article {border: 1px solid #000; display: grid; grid-template-columns: 160px auto; min-height: 205px; background: var(--color-blue);}
section.program .grid .article:nth-of-type(even) {margin-left: -1px}
section.program .grid .article:nth-of-type(n+3) {border-top: 0}

section.program .grid .article figure {height: 100%; overflow: hidden;}
section.program .grid .article .details {padding: 18px; display: flex; flex-flow: column;}
section.program .grid .article .info {margin-top: auto;}

@media all and (max-width: 768px) {
    section.home{background-image: url('../../img/lisbonweek-mobile.svg');}
    section.home img {max-width: calc(100vw - 20px)}
    section.program .grid .article {grid-template-columns: 110px auto; border-left: 0px none; border-right: 0px none;}
    body.welcome-page h1 {margin: -20px 20px 30px 20px}
    section.program .grid .article:nth-of-type(n+2) {border-top: 0}

}

@media all and (min-width: 768px) and (max-width: 1024px) {
    body.welcome-page h1 {margin: -36px 36px 36px 36px}
   section.whatson .grid{grid-template-columns: 1fr 1fr 1fr!important;}
   section.program .grid {grid-template-columns: 1fr 1fr!important}
   section.program .grid .article:nth-of-type(2) {border-top: 1px solid #000}
   article .details.mobile {padding:52px var(--spacer) var(--spacer) var(--spacer);}
}


/* ---------------------------------------------------------------------- */
/*  Elements –> Navigation
/* ---------------------------------------------------------------------- */


.nav-main {z-index: 998; width: 100%; position: fixed; left: 0; top: 0; background-color: var(--color-salmon); padding: 200px var(--spacer) var(--spacer-2x) var(--spacer); transform:translateX(100%); transition: transform .5s; height: 100vh}
body.nav-is-open .nav-main {transform:translateX(0%);}
.nav-main .wrapper { position: relative;}
.nav-main ul a {font-size: var(--bigger-font-size); color: #000;}
.nav-main ul:first-of-type {columns: 2; column-gap: var(--spacer-3x); display: inline-block;}
.nav-main ul li {margin-bottom: 6px;}

.nav-main ul li ul {padding: 0; margin: 0; columns: 1!important; display: block!important; }
.nav-main ul li ul li {margin-bottom: 0}
.nav-main ul li ul a {font-size: 16px;}

.nav-main img.lw {margin-top: var(--spacer); max-width: 300px}
.nav-main ul.social a {font-size: var(--base-font-size); }
.nav-main ul.social {position: absolute; right: 0; bottom:120px;}

.hamburger {width: 50px; height: 50px; padding: 10px; position: fixed; top: 72px; right: 72px; z-index: 9999}
.hamburger:focus {outline: 0;}
.hamburger-box {width: 30px; height: 26px;}
.hamburger-inner {margin-top: -1px;}
.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {width: 30px; height: 1px; background-color: var(--main-font-color);}
.hamburger-inner::before {top: -6px;}
.hamburger-inner::after {bottom: -6px;}

.page-about .hamburger-inner, .page-about .hamburger-inner::after, .page-about .hamburger-inner::before {background-color: #FFF;}
.page-contacts .hamburger-inner, .page-contacts .hamburger-inner::after, .page-contacts .hamburger-inner::before {background-color: #FFF;}

div.map {height: 400px; }

@media all and (max-width: 768px) {
    .hamburger {top:var(--spacer); right: var(--spacer);}
    .nav-main  {padding-top:100px; min-height: 100vh; overflow: auto; padding-left: 40px;}
    .nav-main ul a {font-size: var(--big-font-size);}
    .nav-main ul li ul a {font-size: 14px,;}

    .nav-main ul:first-of-type {columns: 1}
    .nav-main ul.social {position: static; margin: var(--spacer) 0 40px }
.nav-main img.lw {max-width: 90%;}
.nav-main ul li ul a {font-size: 14px;}



}
@media all and (min-width: 768px) and (max-width: 1024px) {

    .nav-main  {padding: 150px 72px 0 72px}
    .nav-main ul li ul{display: block!important;}
    .nav-main ul a {font-size: var(--big-font-size)}
}

/* ---------------------------------------------------------------------- */
/*  Elements –> program
/* ---------------------------------------------------------------------- */
ul.filters {display: flex;}
ul.filters li {border: 1px solid #000; padding: 2px 40px; cursor: pointer;}
ul.filters li.active {background-color: var(--color-yellow)}
ul.filters li:nth-of-type(n+2){border-left: 0;}
.days {font-size: var(--big-font-size); margin: var(--spacer-half) 0 var(--spacer) 0; display: flex;}
.days p {font-size: var(--small-font-size); opacity: 0.8; margin: 0; text-transform: lowercase;}
.days a {opacity: 0.2; line-height: 1}
.days a.active {opacity: 1}
.days>div {margin-right: var(--spacer-half)}
.days .dates {margin-top: -10px}

.themes ul {display:grid; grid-template-columns: repeat(4, max-content); grid-column-gap: var(--spacer); margin:var(--spacer-half) 0 var(--spacer) 0}
.themes ul li {text-transform: uppercase; position: relative;}
.themes span {width: 10px; height: 10px; display: inline-block; border-radius: 50%; margin-right: 10px;}
.themes li a.active span:before {content: ''; width: 14px; height: 14px; border:1px solid #000; position: absolute; top:5px; left: -2px; border-radius: 50%}

@media all and (min-width: 1025px) {

    .themes li:hover span:before {content: ''; width: 14px; height: 14px; border:1px solid #000; position: absolute; top:5px; left: -2px; border-radius: 50%}


}
@media all and (max-width: 768px) {
    .themes ul {font-size: 12px;}
    .days {display: block;}
    .days, .themes, .filters {padding: 0 var(--spacer);}
    .themes ul {grid-template-columns: repeat(2, max-content)}
    .themes li a.active span:before {top:2px;}
}


/* ---------------------------------------------------------------------- */
/*  Elements –> article page
/* ---------------------------------------------------------------------- */
section.program_item {width: 100%; max-width: 100%;}
section.program_item .grid {display: grid; grid-template-columns: 1fr 1fr;}
section.program_item h2 {margin-bottom: var(--spacer-half);}
section.program_item .main-article {padding-left:calc((100vw - (80vw))/2);}
section.program_item figure {padding-left: var(--spacer-2x); height: 460px; overflow: hidden;}
section.program_item figure img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
section.body2 .grid {display: grid; grid-template-columns: 1fr 1fr;}
.yellow-box {background-color: var(--color-yellow); padding: var(--spacer) 0; margin: 0 0 var(--spacer) 0}
section.program_item .body_small {font-size: 13px; margin-top: var(--spacer)}
.program-page.page-show h2 {font-size: var(--big-font-size); text-transform: none}
.details.mobile {display: none;}
.yellow-box h1 {margin-left: 0}

@media all and (max-width: 768px) {
    section.program_item .main-article{padding: var(--spacer)}
    section.program_item figure {height: auto; padding: 0; margin-top: var(--spacer)}
    .yellow-box {padding: var(--spacer)}
    section.body2 {padding: 0 var(--spacer) var(--spacer) var(--spacer)}
    .program-page section.program_item .main-article {order: 2}
    .program-page section.program_item figure {order: 1; margin-top: 0}
    .program-page .page-show main {margin-top: 0}
    .program-page .page-show main>.wrapper:first-of-type {display: none;}
    .program-page .page-show .program_item {margin: 0}
    .details.mobile {display: block;}
    .program-page.page-show h2 {font-size: var(--big-font-size); text-transform: uppercase; padding-top: 10px;}
    .program-page .page-show time {position: absolute; right: var(--spacer); top: 10px}
    .program-page a.back {position: absolute; left: var(--spacer); top: 10px}
    .program-page .main-article h2:first-of-type {display: none;}
}


/* ---------------------------------------------------------------------- */
/*  Elements –> about
/* ---------------------------------------------------------------------- */
section.about {background:#000; color: #fff;  width: 100%; min-width: 100%; margin-top: 0}
section.about .about-titles {padding-top: 200px;}
section.about .grid.about_grid {padding-bottom: var(--spacer-2x); display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--spacer-2x)}
section.about .grid.about_grid figure {padding-left: var(--spacer-2x)}
section.about a {color: #fff;}

.previous_editions .years {display: flex;}
.previous_editions .years li {font-size: var(--medium-font-size); opacity: 0.5; margin-right: var(--spacer-half)}

section.partners {background:#fff; color: #000;  width: 100%; min-width: 100%; padding: var(--spacer) 0}
section.previous_editions {background:#000; color: #fff; width: 100%; min-width: 100%; padding: var(--spacer) 0; margin-top: 0}
section.previous_editions a {color: #fff;}

.about_page+footer, .contacts_page+footer {
    margin-top: -72px;
}
@media all and (max-width: 768px) {

    section.about .about-titles{padding-top: 100px}
    section.about .main-article {padding: var(--spacer); order: 2}
    section.about .grid.about_grid figure{order: 1; padding-left: var(--spacer); margin-bottom: var(--spacer-2x);}
    section.about .grid.about_grid figure img {max-width: 80%}
    .previous_editions ul {padding: 0 var(--spacer);}
    .contacts_page+footer {margin-top: -40px}
 .about_page+footer, .contacts_page+footer {margin-top: -41px}
 section.partners h4 {margin-left: var(--spacer)}


}

@media all and (min-width: 768px) and (max-width: 1024px) {

    section.about .about-titles {padding-top: 150px;}
    .contacts_page+footer {margin-top: -72px;}
}

/* ---------------------------------------------------------------------- */
/*  Elements –> Footer
/* ---------------------------------------------------------------------- */
footer {}

a.buy-tickets {display: block; text-align: center; padding: var(--spacer); border-top: 1px solid #000; border-bottom: 1px solid #000; font-size: var(--medium-font-size); margin-top: var(--spacer-2x)}
div.buy-tickets {display: block; text-align: center; padding: var(--spacer); border-top: 1px solid #000; border-bottom: 1px solid #000; font-size: var(--medium-font-size); margin-top: var(--spacer-2x)}
div.buy-tickets .buy-logos {display: flex; justify-content: center; align-items: center;}
.buy-logos a{padding: 30px 30px 0px 30px}
.buy-logos img {height: 25px;}

footer .grid {display: grid; grid-template-columns: 40% 60%;}
footer .grid>div {padding: var(--spacer) 0;}
footer .grid .footer-menu {border-right: 1px solid #000; display: flex;}
footer .grid .footer-menu ul:first-of-type {margin-right: var(--spacer)}
footer .grid .newsletter {display: flex;  flex-flow: column; padding-left: var(--spacer-2x)}

footer ul li ul {display: none;}

footer .footer-bottom {background-color: #000; color: #fff; padding: var(--spacer) 0}
footer .footer-bottom .grid  { align-items: flex-end;}
footer .footer-bottom .grid>div {padding: 0;}

footer .grid .terms { padding-left: var(--spacer-2x)}

.partners-grid {display: flex; align-items: center; font-size: var(--small-font-size); margin-top: var(--spacer-half); margin-bottom: var(--spacer);}
.partners-grid>div {margin-right: var(--spacer)}

footer .newsletter form {position: relative;}
footer .newsletter h1 {margin-bottom: var(--spacer-half)}
footer .newsletter input {width: 100%; border: 0px none; border-bottom: 1px solid #000; color: #000; padding: 8px; font-family: var(--main-font-family); font-size: var(--base-font-size); font-weight: 300; color: #000; margin-bottom: 8px; border-radius: 0}
footer .newsletter button {border: 0px none; position: absolute; right: 0; bottom: 18px; background-color: transparent; cursor: pointer;}
footer .newsletter button:before {content: url('../../img/arrow-right.svg')}

@media all and (max-width: 768px) {
    a.buy-tickets {padding: 40px 0}
    .buy-logos a{padding: 20px 20px 0px 20px}


    footer .grid { font-size: 12px;}
    footer .grid .newsletter {order: 1; background:#000; color: #fff; padding: var(--spacer)}
    footer .grid .newsletter h1 {margin-left: 0; margin-top: var(--spacer);}
    footer .grid .newsletter input {border-bottom: 1px solid #fff; color: #fff; background:#000;}
    footer .grid .newsletter button svg {stroke: #fff}
    footer .grid .footer-menu {order: 2; padding-left: var(--spacer); border-right: 0px none}
    footer .grid .footer-menu ul:first-of-type {columns: 2;}
    footer .partners {padding: 0 var(--spacer) var(--spacer) var(--spacer)!important;}
    footer .terms {border-top: 1px solid #fff; padding: var(--spacer)!important;}
    footer .newsletter button:before {content: url('../../img/arrow-right-mobile.svg')}
    footer {margin-top: -41px;}
}
@media all and (min-width: 768px) and (max-width: 1024px) {
    footer {margin-top: -72px;}
}


/* ---------------------------------------------------------------------- */
/*  Pages –> Single Page
/* ---------------------------------------------------------------------- */

.pages-page h2 {font-size: var(--big-font-size); text-transform: none;}
.pages-page h3 {font-size: var(--medium-font-size); text-transform: none;}
.pages-page h3.opacity {opacity: 0.3}
.pages-page section {margin-top: var(--spacer)}
section.about {margin-top: 0}

.main-article .partners h4 {font-size: 14px; font-weight: 300; margin: var(--spacer) 0 0 0;  text-transform: none;}
.main-article .partners .logos {display: flex;}
.main-article .partners .logos img {margin-right: var(--spacer); max-width: 160px;}

#partners .partners-grid img {max-width: 170px; max-height: 50px; margin-bottom: var(--spacer)}
#partners .partners-grid {flex-wrap: wrap;}
footer .partners-grid {margin-bottom: 0}

@media all and (max-width: 1024px) {

    .pages-page h3 {margin-left: var(--spacer);}
    #partners .partners-grid {margin-left: var(--spacer)}
    #partners .partners-grid img {max-width: 160px; max-height: 30px; margin-bottom: var(--spacer)}
    .main-article .partners .logos {zoom:0.7;}
    


}