/*
Theme Name: mm2021
Author: Bira Borges
Author URI: http://biraborges.com.br/
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}  	


/*
  Marisa Monte 2020 
  Author: Bira Borges
*/


/* CUSTOM SCROLLBARS */
::-webkit-scrollbar {
    width: 5px;
    height: 2px;
    background: rgba(0,0,0,1);
}
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(240,240,240,0.5); 
    -webkit-box-shadow: inset 0 0 6px rgba(240,240,240,0,5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(240,240,240,0.4); 
}


@font-face {
    font-family: 'din_light';
    src: url('fonts/din_light-webfont.woff2') format('woff2'),
         url('fonts/din_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'din_regular';
    src: url('fonts/din_regular-webfont.woff2') format('woff2'),
         url('fonts/din_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'din_bold';
    src: url('fonts/din_bold-webfont.woff2') format('woff2'),
         url('fonts/din_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body {
    height: 100%;
}

body {
  display: block;
  height: 90%;
  font-family: din_light;
  font-size: 10px;
  background-color: #e5e1da;
}

  body.home {
    animation: 1s 1s ease-out forwards home-bg-in;
  }
            @keyframes home-bg-in {
              0% { background-color: #e5e1da; }
              100% { background-color: #567B36; }
            }

  b, strong {
    font-family: din_bold;
  }

  #wrap {
    position: relative;
    width: 100%;
    height: 100%;
    height: 100vh;
    overflow: hidden;
  }

    #header-home, #header {
      position: relative;
      width: 100%;
    }

    #menu-lang {
      position: absolute;
      top: 20px;
      left: 25px; 
      line-height: 30px;
      font-size: 18px;
    }

      .home #menu-lang {
        opacity: 0;
        animation: 1s 1s ease-out forwards home-menu-lang-in;
      }
            @keyframes home-menu-lang-in {
              0% { opacity: 0; }
              100% { opacity: 1; }
            }

      #menu-lang a {
        display: inline-block ;
        margin-right: 10px;
        width: 30px;
        height: 30px;
        text-align: center;
        text-decoration: none;
        font-family: din_bold;
        color: #000000;
        line-height: 30px;
        font-size: 18px;
        overflow: hidden;
        text-transform: uppercase;
      }

          #menu-lang a:hover {
            background-color: #ffffff;
            color: #000000;
          }

          #menu-lang a.selected {
            background-color: #000000;
            color: #FFF;
          }

      /* MENU HAMBURGER */

      #nav-icon {
        width: 38px;
        height: 32px;
        position: fixed;
        right: 45px;
        top: 20px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
        z-index: 102;
      }

      #nav-icon span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: #000;
        border-radius: 4px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
      }

      #nav-icon span:nth-child(1) {
        top: 0px;
      }

      #nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
        top: 14px;
        height: 3px;
      }

      #nav-icon span:nth-child(4) {
        top: 29px;
      }

      #nav-icon.open span:nth-child(1) {
        top: 14px;
        width: 0%;
        left: 50%;
      }

      #nav-icon.open span:nth-child(2) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
      }

      #nav-icon.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }

      #nav-icon.open span:nth-child(4) {
        top: 14px;
        width: 0%;
        left: 50%;
      }
      /* END OF MENU HAMBURGER */



      /* MENU PRINCIPAL */
    #main-menu {
  		display: flex;
      flex-wrap: wrap;
  		align-items: stretch;
  		align-content: stretch;
      height: calc(100vh - 160px);
      margin-top: 100px;
      font-size: 100px;
      overflow: hidden;
    }

      .interna #main-menu {
        position: absolute;
        top: 0px;
        margin-top: 0px;
        height: calc(100vh - 60px);
        pointer-events: none;
        z-index: 98;
        width: 100%;
      }

      	#main-menu .menu-item {
          position: relative;
          flex:1 1 auto;
          padding: 0 10%;
          min-width: 80%;
          overflow: hidden;
          left: 100%; 
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
           pointer-events: auto;
      	}

        #main-menu .menu-item a {
          text-transform: uppercase;
          text-decoration: none;
        }

            @keyframes menu-home-intro {
              0% { left: 100%; }
              100% { left: 0; }
            }

            @keyframes menu-home-outro {
              0% { left: 0; }
              100% { left: -100%; }
            }

            @keyframes menu-geral-in {
              0% { left: -100%; }
              100% { left: 0; }
            }

            @keyframes menu-geral-out {
              0% { left: 0; }
              100% { left: -100%; }
            }

            #menu-spacer { background-color: #567B36; min-height: 50px; }
            #menu-agenda { background-color: #567B36; }
            #menu-musica { background-color: #911417; background-image: url('img/menu-bg-musica.jpg'); }
            #menu-audiovisual { background-color: #E26C02; }
            #menu-fotos { background-color: #F3C405; background-image: url('img/menu-bg-fotos.jpg'); }
            #menu-imprensa { background-color: #BCA409; }
            #menu-biografia { background-color: #BCC8E2; background-image: url('img/menu-bg-biografia.jpg'); }

                .home #menu-spacer.intro { animation: 1.5s ease-in-out forwards menu-home-intro; }
                .home #menu-agenda.intro { animation: 1.5s ease-in-out forwards menu-home-intro; }
                .home #menu-musica.intro { animation: 1.35s ease-in-out forwards menu-home-intro; }
                .home #menu-audiovisual.intro { animation: 1.75s ease-in-out forwards menu-home-intro; }
                .home #menu-fotos.intro { animation: 2.25s ease-in-out forwards menu-home-intro; }
                .home #menu-imprensa.intro { animation: 2s ease-in-out forwards menu-home-intro; }
                .home #menu-biografia.intro { animation: 2.5s ease-in-out forwards menu-home-intro; }

                .home #menu-spacer.outro { animation: 1.5s ease-in-out forwards menu-home-outro; }
                .home #menu-agenda.outro { animation: 1.5s ease-in-out forwards menu-home-outro; }
                .home #menu-musica.outro { animation: 1.35s ease-in-out forwards menu-home-outro; }
                .home #menu-audiovisual.outro { animation: 1.75s ease-in-out forwards menu-home-outro; }
                .home #menu-fotos.outro { animation: 2.25s ease-in-out forwards menu-home-outro; }
                .home #menu-imprensa.outro { animation: 2s ease-in-out forwards menu-home-outro; }
                .home #menu-biografia.outro { animation: 2.5s ease-in-out forwards menu-home-outro; }

                .interna #menu-spacer.in { animation: 1.2s ease-in-out forwards menu-geral-in; }
                .interna #menu-agenda.in { animation: 1.2s ease-in-out forwards menu-geral-in; }
                .interna #menu-musica.in { animation: 1.3s ease-in-out forwards menu-geral-in; }
                .interna #menu-audiovisual.in { animation: 1.4s ease-in-out forwards menu-geral-in; }
                .interna #menu-fotos.in { animation: 1.5s ease-in-out forwards menu-geral-in; }
                .interna #menu-imprensa.in { animation: 1.6s ease-in-out forwards menu-geral-in; }
                .interna #menu-biografia.in { animation: 1.7s ease-in-out forwards menu-geral-in; }

                .interna #menu-spacer.out { animation: 1.4s ease-in-out forwards menu-geral-out; }
                .interna #menu-agenda.out { animation: 1.4s ease-in-out forwards menu-geral-out; }
                .interna #menu-musica.out { animation: 1.2s ease-in-out forwards menu-geral-out; }
                .interna #menu-audiovisual.out { animation: 1.6s ease-in-out forwards menu-geral-out; }
                .interna #menu-fotos.out { animation: 1.9s ease-in-out forwards menu-geral-out; }
                .interna #menu-imprensa.out { animation: 1.8s ease-in-out forwards menu-geral-out; }
                .interna #menu-biografia.out { animation: 2s ease-in-out forwards menu-geral-out; }

          	#main-menu .menu-item .label {
              display: block;
              position: relative;
              top: 50%;
              left: -10px;
              transform: translate(0,-50%);
              transition: 0.4s;
              color: #000;
              font-size: 1em;
              height: 100px;
          	}

              	#main-menu .menu-item:hover .label {
              		font-size: 2em;
                  height: 200px;
              	}

            #main-menu .submenu {
              position: absolute;
              right: 80px;
              top: 50%;
              transform: translate(0,-50%);
              width: 250px;
              font-size: 20px;
              line-height: 26px;
              text-align: right;
            }

            #main-menu .submenu a {
              transition: 0.3s;
              color: #000;
            }

            #main-menu .submenu a:hover {
              font-family: din_bold;
              color: #000;
              font-size: 24px;
            }

      /* END OF MENU PRINCIPAL */

              

      /* FOOTER */

    #footer {
      position: fixed;
      bottom: 0;
      width: 90%;
      height: 60px;
      background-color: #000;
      padding: 0 5%;
      line-height: 60px;
      z-index: 100;
      font-family: din_bold;
      font-size: 1.8em;
      color: #fff;
      animation: 1s ease-out forwards home-footer-in;
    }
            @keyframes home-footer-in {
              0% { bottom: -60px; }
              100% { bottom: 0; }
            }

        #footer a {
          color: #fff;
          text-transform: uppercase;
          text-decoration: none;
          margin-right: 18px;
        }

            #footer a:hover {
              color: #999;
            }

        #bt-nasredes {
          display: none;
          margin-left: 5%; 
        }

        #bt-nasredes span {
          display: inline-block;
          width: 16px;
          height: 14px;
          background: url('img/seta.png') no-repeat left center;
          transition: 0.2s;
          margin-right: 6px;
        }

            #bt-nasredes span.open {
              -webkit-transform: rotate(-90deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                  -ms-transform: rotate(-90deg);  /* IE 9 */
                      transform: rotate(-90deg);  /* Firefox 16+, IE 10+, Opera */
            }

        #nasredes-links {
          position: absolute;
          left: 0;
          bottom: -540px;
          z-index: 99;
          width: 80%;
          padding: 20px 10% 10px;
          background-color: #000;
          overflow: hidden;
        }

            #nasredes-links a {
              display: block;
              line-height: 50px;
              font-family: din_bold;
              font-size: 1.8em;
              color: #fff;
              text-transform: uppercase;
              text-decoration: none;
            }

                #nasredes-links a:hover {
                  color: #999;
                }

        #sns-menu {
          display: inline-block;
        }

        #bt-contato {
          float: right;
          margin-right: 30px !important;
        }

        #copyright {
          color: #fff;
          float: right;
        }

      /* END OF FOOTER */



    #home-overlay {
      position: absolute; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%,-50%); 
      width: 100%;
      height: 100%;
      pointer-events: none;
      background-image: url('img/home-overlay.png');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      opacity: 0;
      animation: 1s 1.5s ease-out forwards home-overlay-in;
    }
            @keyframes home-overlay-in {
              0% { opacity: 0; }
              100% { opacity: 1; }
            }



/* GENERAL SETTINGS FOR INNER PAGES */

.mobile {
  display: none;
}

    #section-label {
      position: fixed; 
      top: 0; 
      right: -150px; 
      width: 150px;
      height: calc(100vh - 60px);
      pointer-events: none;
      background-repeat: no-repeat;
      background-position: right center;
      background-size: contain;
      z-index: 90;
    }
            @keyframes section-label-in {
              0% { right: -150px; }
              100% { right: 0; }
            }

            @keyframes section-label-out {
              0% { right: 0; }
              100% { right: -150px; }
            }

            #section-label.in { animation: 0.75s ease-in-out forwards section-label-in; }

            #section-label.out { animation: 0.75s ease-in-out forwards section-label-out; }


    #section-label.agenda {
      background-image: url('img/label-agenda.png');
    }

    #section-label.musica {
      background-image: url('img/label-musica.png');
    }

    #section-label.audiovisual {
      background-image: url('img/label-audiovisual.png');
    }

    #section-label.fotos {
      background-image: url('img/label-fotos.png');
    }

    #section-label.imprensa {
      background-image: url('img/label-imprensa.png');
    }

    #section-label.biografia {
      background-image: url('img/label-biografia.png');
    }


    #content {
      height: calc(100% - 60px);
      overflow: hidden;
    }

        #content.scroll {
          overflow-y: scroll;
          scroll-behavior: smooth;
          height: calc(100% - 60px);
        }


    .content-wrap {
        position: relative;
        width: 80%;
        margin: 0 10% 200px;
        font-family: din_regular;
    }


    h1 {
      text-align: center;
      font-family: din_bold;
      font-size: 36px;
      line-height: 80px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

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

            @keyframes fade-in {
              0% { opacity: 0; }
              100% { opacity: 1; }
            }

            @keyframes fade-out {
              0% { opacity: 1; }
              100% { opacity: 0; }
            }







/* CORREÇÂO DAS FONTES DO MENU, DE ACORDO COM A ALTURA DA TELA */

                      @media screen and (max-height: 960px) {
                        #main-menu .menu-item .label {
                          font-size: 0.9em;
                          height: 90px;
                        }
                        #main-menu .menu-item:hover .label {
                          font-size: 1.8em;
                          height: 180px;
                        }
                      }

                      @media screen and (max-height: 850px) {
                        #main-menu .menu-item .label {
                          font-size: 0.8em;
                          height: 80px;
                        }
                        #main-menu .menu-item:hover .label {
                          font-size: 1.6em;
                          height: 160px;
                        }
                      }

                      @media screen and (max-height: 740px) {
                        #main-menu .menu-item .label {
                          font-size: 0.7em;
                          height: 70px;
                        }
                        #main-menu .menu-item:hover .label {
                          font-size: 1.4em;
                          height: 140px;
                        }
                        #main-menu .submenu {
                          font-size: 18px;
                          line-height: 22px;
                        }
                      }

                      @media screen and (max-height: 630px) {
                        #main-menu .menu-item .label {
                          font-size: 0.6em;
                          height: 60px;
                        }
                        #main-menu .menu-item:hover .label {
                          font-size: 1em;
                          height: 100px;
                        }
                      }

                      @media screen and (max-height: 540px) {
                        #main-menu .menu-item .label {
                          font-size: 0.4em;
                          height: 40px;
                        }
                        #main-menu .menu-item:hover .label {
                          font-size: 0.8em;
                          height: 80px;
                        }
                      }

                      @media screen and (max-height: 450px) {
                        #main-menu .menu-item .label {
                          font-size: 0.3em;
                          height: 30px;
                        }
                        #main-menu .menu-item:hover .label {
                          font-size: 0.6em;
                          height: 60px;
                        }
                      }

/* FIM DA CORREÇÂO DAS FONTES DO MENU */




                      @media screen and (max-width: 1400px) {
                        #sns-menu {
                          display: none;
                        }
                        #bt-nasredes {
                          display: inline-block;
                        }
                      }

                      @media screen and (max-width: 880px) {
                        .content-wrap {
                          width: 85%;
                          margin: 0 5% 200px;
                        }

                        #section-label {
                          height: calc((var(--vh, 1vh) * 100) - 50px); 
                          width: 10px;
                          background-size: cover;
                        }

                            #section-label.agenda {
                              background-image: url('img/label-agenda-m.png');
                            }

                            #section-label.musica {
                              background-image: url('img/label-musica-m.png');
                            }

                            #section-label.audiovisual {
                              background-image: url('img/label-audiovisual-m.png');
                            }

                            #section-label.fotos {
                              background-image: url('img/label-fotos-m.png');
                            }

                            #section-label.imprensa {
                              background-image: url('img/label-imprensa-m.png');
                            }

                            #section-label.biografia {
                              background-image: url('img/label-biografia-m.png');
                            }
                      }


                      @media screen and (max-width: 480px) { 
                        .mobile {
                          display: block;
                        }
                        .dsktp {
                          display: none;
                        }
                        #nav-icon {
                          right: 24px;
    					  transform: scale(0.8);
    					  top: 19px;
                        }
                        #menu-lang {
                          left: 5%; 
                        }

                        #home-overlay {
                          top: 0; 
                          left: 50%; 
                          height: 280px;
                          transform: translate(-50%, 0); 
                          background-position: center center;
                        }

            						#footer {
            							height: 50px;
            							line-height: 50px;
            							font-size: 1.5em;
            						}
                        #bt-nasredes {
                          margin-left: 0; 
                        }
                        #nasredes-links {
                          width: 90%;
                          padding: 20px 5% 10px;
                        }
            						#nasredes-links a {
            							line-height: 45px;
            							font-size: 1.5em;
            						}
                        .home #main-menu {
                          height: calc((var(--vh, 1vh) * 100) - 270px);
                          margin-top: 220px;
                          padding-bottom: 60px;
                        }
            						.interna #main-menu {
            							height: calc((var(--vh, 1vh) * 100) - 50px);
            						}
            						#section-label {
            							height: calc((var(--vh, 1vh) * 100) - 50px);
            						}
                        #main-menu .menu-item {
                          padding: 0 5%;
                          min-width: 90%;
                        }						
                        #main-menu .menu-item .label {
                          left: -5px;
                          font-size: 0.5em;
                          height: 50px;
                        }
                        #main-menu .menu-item:hover .label {
                          font-size: 0.7em;
                          height: 70px;
                        }
                        #main-menu .submenu {
                          display: none;
                        }
                        #menu-spacer { 
                          min-height: 30px; 
                        }
                        #content.scroll {
                          height: calc((var(--vh, 1vh) * 100) - 50px);
                        }
                        h1 {
                          text-align: left;
                          padding-left: 5%;
                          font-size: 22px;
                          line-height: 60px;
                        }

                      }


                      @media screen and (max-width: 480px) and (max-height: 600px) {

                          #main-menu .menu-item .label {
                            font-size: 0.4em;
                            height: 40px;
                          }
                          #main-menu .menu-item:hover .label {
                            font-size: 0.8em;
                            height: 80px;
                          }

                          #home-overlay { 
                            height: 220px;
                            width: 96%;
                            background-position: center 70%;
                          }
                          .home #main-menu {
                            margin-top: 185px;
                            height: calc((var(--vh, 1vh) * 100) - 230px);
                          }

                      }


                      @media screen and (max-width: 480px) and (max-height: 570px) {

                          #main-menu .menu-item .label {
                            font-size: 0.35em;
                            height: 35px;
                          }
                          #main-menu .menu-item:hover .label {
                            font-size: 0.65em;
                            height: 65px;
                          }

                      }