@charset "UTF-8";

/*
BREAKPOINTS
*/

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

@font-face {
  font-family: "canaro";
  src: url(../../fonts/canaro_w00_extralight-webfont.eot?ab2640c703aaf90d71408dff15ec8326);
  src: url(../../fonts/canaro_w00_extralight-webfont.eot?ab2640c703aaf90d71408dff15ec8326) format("embedded-opentype"), url(../../fonts/canaro_w00_extralight-webfont.woff2?169ad761f6ea022bd376ab4b56202fc4) format("woff2"), url(../../fonts/canaro_w00_extralight-webfont.woff?7ec49cefeb544845697e177779b02843) format("woff"), url(../../fonts/canaro_w00_extralight-webfont.ttf?bcf5841b48f33eae0a0f03d3839fa445) format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "canaro";
  src: url(../../fonts/canaro_w00_book-webfont.eot?8f85bfe131b1dee2daad510b7cc69c67) format("embedded-opentype"), url(../../fonts/canaro_w00_book-webfont.woff2?39f96dece42b5af2a27dbb3cf0ad23cd) format("woff2"), url(../../fonts/canaro_w00_book-webfont.woff?97c66e34dc5069fba4a24e504d429fdc) format("woff"), url(../../fonts/canaro_w00_book-webfont.ttf?5c3781c4547a1060c0b95048c58a5a89) format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "canaro";
  src: url(../../fonts/canaro_w00_bold-webfont.eot?8e52e8eb12c103f2f517e32dfb2aa4e4);
  src: url(../../fonts/canaro_w00_bold-webfont.eot?8e52e8eb12c103f2f517e32dfb2aa4e4) format("embedded-opentype"), url(../../fonts/canaro_w00_bold-webfont.woff2?cea011d892ada01f921f6677139c251b) format("woff2"), url(../../fonts/canaro_w00_bold-webfont.woff?0c542e7492f12774b8ad19522cd7cb93) format("woff"), url(../../fonts/canaro_w00_bold-webfont.ttf?6793f52a460c78dd3edcc7a03494a381) format("truetype");
  font-weight: 700;
  font-style: normal;
}

html,
body {
  height: 100vh;
}

body {
  margin: 0;
  padding: 0;
  --azul-claro: #55B6E5;
  --azul-escuro: #174580;
  font-family: "canaro";
  font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "canaro";
  font-weight: 100;
}

label {
  display: block;
  text-align: left;
  font-weight: bold;
  color: #174580;
}

input[type=mail],
input[type=text],
textarea {
  padding: 0.55rem;
  border: 1px #c9c9c9 solid;
  width: 100%;
  margin-bottom: 8px;
  border-radius: 4px;
  font-size: 1.15rem;
  transition: 280ms ease;
  outline: none;
}

input[type=mail]:hover,
input[type=mail]:focus,
input[type=text]:hover,
input[type=text]:focus,
textarea:hover,
textarea:focus {
  border: 1px #979797 solid;
  transition: 280ms ease;
}

input[type=submit],
button[type=submit] {
  width: 100%;
  padding: 1rem;
  border: 0;
  background: #174580;
  text-transform: uppercase;
  font-weight: bold;
  color: white;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

input[type=submit]:hover,
input[type=submit]:focus,
button[type=submit]:hover,
button[type=submit]:focus {
  background: #0c2a52;
  transition: 280ms ease;
}

input[type=submit]:active,
button[type=submit]:active {
  transform: scale(0.985);
}

.flash {
  background: green;
  padding: 1rem;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.75);
}

article {
  text-align: center;
  width: 100%;
}

article ul {
  color: var(--azul-escuro);
}

article p,
blockquote,
ul {
  text-align: left;
}

article p,
blockquote {
  color: var(--azul-escuro);
  padding: 0 0 0.25rem 0;
  line-height: 1.6rem;
  font-weight: 200;
}

.legenda {
  text-align: center;
  font-size: 0.9rem;
  line-height: normal;
}

.form-group {
  margin-bottom: 1rem;
}

.bullet {
  border-left: 4px #7bb6e9 solid;
  padding-left: 15px;
}

@media screen and (min-width: 1028px) {
  article p,
  ul {
    font-size: 1.35rem;
    line-height: 2.35rem;
  }
}

article h1,
article h2,
article h3 {
  color: var(--azul-claro);
  text-transform: uppercase;
}

@media screen and (min-width: 1028px) {
  article h2 {
    font-size: 2.15rem;
    text-align: left;
  }
}

article + h1 {
  font-size: 1.2rem;
  text-align: center;
}

@media screen and (min-width: 1028px) {
  article + h1 {
    font-size: 2.15rem;
  }
}

article img {
  width: 100%;
  display: block;
  text-align: center;
  margin: 0 auto 1rem;
}

blockquote {
  position: relative;
  font-size: 1.25rem;
  line-height: 1.65rem;
  margin: 1.75rem 1rem;
}

blockquote:after {
  position: absolute;
  content: "";
  width: 35px;
  height: 35px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M14.193 9.412C6.367 9.412.001 15.778.001 23.604c0 7.55 5.925 13.742 13.37 14.17.128 1.392.031 5.18-3.599 10.45a1 1 0 0 0 .117 1.274c1.485 1.485 2.403 2.42 3.046 3.075.84.855 1.224 1.246 1.786 1.756a.997.997 0 0 0 1.328.014C22.374 48.84 29.4 37.467 28.384 23.532c-.596-8.182-6.564-14.12-14.19-14.12zm1.21 42.81c-.273-.268-.584-.585-1.042-1.05a417.05 417.05 0 0 0-2.478-2.507c4.405-6.789 3.573-11.623 3.209-12.317a1.036 1.036 0 0 0-.899-.55c-6.722 0-12.192-5.47-12.192-12.194 0-6.723 5.47-12.192 12.192-12.192 6.55 0 11.678 5.158 12.197 12.264 1.142 15.674-8.173 25.85-10.988 28.546zM63.9 23.532v-.001c-.597-8.18-6.566-14.12-14.191-14.12-7.826 0-14.193 6.367-14.193 14.193 0 7.55 5.925 13.742 13.37 14.17.13 1.39.032 5.177-3.599 10.45a1 1 0 0 0 .116 1.274c1.48 1.48 2.396 2.413 3.038 3.066.845.861 1.23 1.254 1.795 1.766a1.002 1.002 0 0 0 1.328.012c6.326-5.504 13.352-16.876 12.336-30.81zm-12.982 28.69a95.14 95.14 0 0 1-1.05-1.06c-.556-.566-1.317-1.341-2.47-2.497 4.405-6.79 3.574-11.623 3.21-12.317a1.04 1.04 0 0 0-.899-.55c-6.724 0-12.193-5.47-12.193-12.194 0-6.723 5.47-12.192 12.193-12.192 6.548 0 11.678 5.158 12.197 12.265 1.142 15.671-8.174 25.85-10.988 28.545z'/%3E%3C/svg%3E");
  opacity: 0.15;
  right: 0;
  bottom: -20px;
}

header {
  border-top: 4px var(--azul-claro) solid;
  padding-top: 1rem;
  text-align: center;
}

header.margin-bottom {
  margin-bottom: 1rem;
}

@media screen and (max-width: 1028px) {
  #logo {
    width: 150px;
  }
}

@media screen and (max-width: 768px) {
  #logo {
    width: 180px;
  }
}

#btn-busca {
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  transition: 300ms ease;
  top: 3.25rem;
  right: 1rem;
  width: 50px;
}

#btn-busca:active {
  transform: scale(0.92);
  opacity: 0.8;
}

#btn-busca:focus svg,
#btn-busca:hover svg {
  fill: black;
  transition: 300ms ease;
}

#btn-busca svg {
  width: 100%;
  fill: var(--azul-escuro);
}

.container {
  display: flex;
  margin: 0 auto;
  width: 320px;
  padding: 1rem;
}

.container.column {
  flex-flow: column;
}

.container-full {
  width: 100%;
}

@media screen and (min-width: 1280px) {
  .container-full {
    width: 1000px;
  }
}

.container.center {
  justify-content: center;
}

.mural {
  display: flex;
  flex-flow: column;
}

.mural .box {
  position: relative;
  background: var(--azul-claro);
  width: 45px;
  height: 45px;
  background-size: cover !important;
}

.mural-topo * {
  display: flex;
}

.mural-corpo {
  display: flex;
}

.mural-corpo nav {
  display: flex;
  flex-basis: 225px;
}

.mural-corpo nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "canaro";
  font-size: normal;
  line-height: normal;
}

.mural-corpo nav ul li {
  display: inline-block;
  width: 100%;
}

.mural-corpo nav ul li a {
  display: inline-flex;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  height: 39.4px;
  width: 225px;
  align-items: center;
  justify-content: center;
  color: var(--azul-escuro);
  background: var(--azul-claro);
  outline: none;
  font-size: 13.5px;
}

.mural-corpo nav ul li a:hover,
.mural-corpo nav ul li a:focus {
  background: #90cfee;
}

.mural-corpo nav ul li a:active {
  transform: scale(0.95);
}

.submenu-wrapper {
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6392156863);
}

.submenu-wrapper.open {
  display: inline-flex;
}

.submenu {
  width: 280px;
  height: auto;
  padding: 0;
  margin: 0;
  background: var(--azul-claro);
  text-align: center;
  list-style: none;
}

.submenu li a {
  display: inline-flex;
  text-decoration: none;
  font-family: "canaro";
  height: 40px;
  align-items: center;
  text-transform: uppercase;
  color: var(--azul-escuro);
  width: 100%;
  justify-content: center;
  border-bottom: 1px rgba(255, 255, 255, 0.1) solid;
  font-size: 0.9rem;
}

.submenu li a:focus,
.submenu li a:hover {
  background: #90cfee;
}

.mural-fundo * {
  display: flex;
}

.box img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

.animated-box img {
  position: absolute;
  opacity: 1;
  -webkit-animation: fadeFoto 5s ease forwards alternate infinite;
          animation: fadeFoto 5s ease forwards alternate infinite;
}

@-webkit-keyframes fadeFoto {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeFoto {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.rodape {
  display: flex;
  color: var(--azul-escuro);
}

.rodape .wrapper {
  display: flex;
  flex-flow: row;
}

.rodape .buttons {
  margin-bottom: 1rem;
}

.rodape .buttons a {
  display: inline-block;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 4px;
  background: white;
  border: 1px rgba(0, 0, 0, 0.4) solid;
  color: rgba(0, 0, 0, 0.4);
}

.rodape .buttons a.btn-home {
  margin-bottom: 0.5rem;
  background: var(--azul-escuro);
  color: white;
  border-color: var(--azul-escuro);
}

.rodape .container {
  flex-flow: column;
}

.rodape div#instagram {
  display: flex;
  flex-basis: 15%;
  align-items: center;
  padding-left: 10px;
}

.rodape div#info {
  display: flex;
  flex-flow: column;
  justify-content: center;
  flex-basis: 85%;
  text-align: right;
  font-size: 0.65rem;
  font-family: "canaro";
  padding-right: 10px;
}

.rodape div#info p {
  margin: 0;
}

#btn-politica-privacidade {
  text-decoration: none;
  color: var(--azul-claro);
  font-size: 0.7rem;
}

/* Página: colecionadoras */

.colecionadoras {
  display: flex;
  flex-flow: column;
}

.colecionadoras .wrapper-perfil {
  display: flex;
  flex-flow: row;
}

.colecionadoras .perfil {
  width: 50%;
  margin: 0.5rem;
}

.colecionadoras .perfil h2 {
  background: var(--azul-escuro);
  color: white;
  font-weight: 700;
  text-align: center;
  margin: 0;
  font-size: 1rem;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

article .perfil .foto {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 414px) {
  article .perfil .foto {
    height: 125px;
  }
}

/*
Acervo
*/

.acervo-header {
  flex-flow: column;
  width: 100%;
}

.acervo-header .titulo {
  text-align: center;
  color: var(--azul-claro);
  font-weight: 500;
}

.acervo-header nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.acervo-header nav ul li a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--azul-claro);
}

.acervo-header nav ul li a:hover,
.acervo-header nav ul li a.ativo {
  color: var(--azul-escuro);
}

.discos {
  display: grid;
  grid-template-columns: 50fr 50fr;
  grid-column-gap: 5px;
  grid-row-gap: 16px;
}

@media screen and (min-width: 768px) {
  .discos {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 8px;
    grid-row-gap: 16px;
  }
}

.discos img {
  width: 100%;
  height: 230px;
  -o-object-fit: cover;
     object-fit: cover;
}

.disco {
  text-decoration: none;
}

.disco:hover {
  opacity: 0.9;
}

.disco .caption > h3,
.disco .caption > p {
  padding: 0;
  margin: 0;
  text-align: center;
  background: var(--azul-escuro);
  color: white;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
}

.disco .caption > h3 {
  margin-bottom: 4px;
}

.disco .caption > p {
  color: rgba(255, 255, 255, 0.5411764706);
}

/* Loader */

.loading-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.loading-wrapper svg {
  width: 128px;
}

.loading-wrapper svg #girar_svg {
  -webkit-animation: girarSvg 2s ease forwards infinite;
          animation: girarSvg 2s ease forwards infinite;
  transform-origin: center;
}

@-webkit-keyframes girarSvg {
  to {
    transform: rotate(360deg);
  }
}

@keyframes girarSvg {
  to {
    transform: rotate(360deg);
  }
}

.menu-acervo a {
  display: inline-block;
  width: 100%;
  text-decoration: none;
  text-align: center;
  color: var(--azul-escuro);
  background: var(--azul-claro);
  margin-bottom: 0.25rem;
  padding: 0.5rem;
  text-transform: uppercase;
}

.menu-acervo a:hover,
.menu-acervo a:focus {
  background: #90cfee;
}

.menu-acervo a:active {
  transform: scale(0.95);
}

.filter {
  text-align: center;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter form {
  display: flex;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .filter form {
    width: 420px;
  }
}

.filter select {
  width: 80%;
  height: 47px;
  display: flex;
  padding: 0.6rem;
  margin-right: 0.25rem;
  border: 1px #cacaca solid;
}

.filter button {
  width: 100px;
}

.pagination {
  padding: 0;
  text-align: center;
}

.pagination .page-item {
  display: inline-block;
  border-radius: 20px;
}

.pagination .page-item .page-link {
  display: inline-block;
  border-radius: 20px;
  text-decoration: none;
  padding: 1rem;
  line-height: 0;
  border: 1px rgba(0, 0, 0, 0.4) solid;
}

.pagination .page-item .page-link.disabled {
  opacity: 0.6;
}

.pagination .page-item.active {
  background: #969696;
  font-weight: bold;
}

ul.breadcrumb {
  padding: 0px;
  list-style: none;
  font-weight: 100;
}

ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}

ul.breadcrumb li + li:before {
  padding: 8px;
  color: black;
  content: "\203A";
}

ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}

ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

.empty {
  text-align: center;
}

.empty svg {
  width: 160px;
}

@media screen and (min-width: 1366px) {
  .container-full {
    width: 980px;
  }

  article img {
    width: 700px;
  }

  blockquote {
    font-size: 1.8rem;
    line-height: 2rem;
  }
}

.cookies {
  position: fixed;
  background: black;
  color: rgba(255, 255, 255, 0.8784313725);
  bottom: 0;
  padding: 1rem;
  line-height: 1.45rem;
  display: flex;
  left: 0;
  right: 0;
  align-items: center;
}

.cookies p {
  margin: 0;
  flex-basis: 90%;
}

.cookies button {
  width: 100%;
  flex-basis: 10%;
  padding: 1rem;
  background: orange;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  font-weight: bold;
}

.card-resultado {
  text-align: left;
  display: inline-block;
  background: whitesmoke;
  width: 100%;
  margin: 0.25rem 0;
  padding: 1rem;
  border-left: 3px #55b6e5 solid;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}

.card-resultado:hover {
  background: #ebebeb;
}

.card-resultado h1 {
  font-size: 1rem;
  margin: 0;
}

.card-resultado p {
  margin: 0;
}

.mural-wrapper {
  display: flex;
  flex-flow: row;
}

@media screen and (max-width: 768px) {
  .mural-wrapper {
    flex-flow: column;
  }
}

.mural-wrapper .esq {
  padding: 1rem;
  display: flex;
  background: #55b6e5;
  flex-flow: column;
  flex: 0 0 45%;
}

@media screen and (max-width: 768px) {
  .mural-wrapper .esq {
    padding: 0.5rem;
    flex: 0 0 100%;
  }
}

.mural-wrapper .esq p {
  margin: 0 0 1rem 0;
}

.mural-wrapper .esq h2 {
  margin: 0 0 0.5rem 0;
  padding: 0.5rem;
  background: #174580;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.89);
  font-size: 1.25rem !important;
}

@media screen and (max-width: 768px) {
  .mural-wrapper .esq h2 {
    font-size: 1rem;
  }
}

.mural-wrapper .dir {
  padding: 1rem;
  background: #f5f5f5;
  flex: 0 0 55%;
}

@media screen and (max-width: 768px) {
  .mural-wrapper .dir {
    flex: 0 0 100%;
    padding: 0.5rem;
  }
}