@import url(https://fonts.googleapis.com/css2?family=Anton&display=swap);@charset "UTF-8";

/* You can add global styles to this file, and also import other style files */

/* Resets bootstrap */

/* ---------------------------------------------------
               STYLES comum a todos
----------------------------------------------------- */

html {
  position: relative;
  min-height: 100%;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
}

body {
  overflow-y: scroll;
}

main {
  margin-bottom: 130px;
}

.h-5 {
  height: 30px;
}

.emptyRegisters {
  margin-top: 30px;
  font-size: 1.7em;
  color: #125488;
  font-weight: bold;
}

/* Topo
-------------------------------------------------- */

header#top-of-site {
  background-color: #125488;
  padding: 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 90909090;
}

header#top-of-site .container {
  padding: 0;
}

header#top-of-site #logo {
  text-align: center;
  margin: 25px 0;
  height: 50px;
}

header#top-of-site #logo svg {
  height: 50px;
}

header#top-of-site .hamburguer {
  cursor: pointer;
  margin: 25px 0;
  /* correção do espaço que seria o padding top */
}

header#top-of-site .hamburguer img {
  height: 25px;
  transition: 0.3s;
}

header#top-of-site .hamburguer img:hover {
  box-shadow: 0px 0px 10px black;
}

header#top-of-site #menus {
  width: 100%;
  transition: all 0.5s;
}

header#top-of-site #menus svg {
  width: 45px;
  height: 45px;
}

header#top-of-site #menus svg .cls-1,
header#top-of-site #menus svg .cls-3,
header#top-of-site #menus svg .cls-4,
header#top-of-site #menus svg path,
header#top-of-site #menus svg tspan {
  transition: 0.4s;
}

header#top-of-site #menus #social-buttons .col {
  display: flex;
  justify-content: space-between;
}

header#top-of-site #menus #social-buttons a:hover svg .cls-1,
header#top-of-site #menus #social-buttons a:hover svg .cls-3,
header#top-of-site #menus #social-buttons a:hover svg .cls-4,
header#top-of-site #menus #social-buttons a:hover svg path,
header#top-of-site #menus #social-buttons a:hover svg tspan {
  fill: #53A6D8;
}

#title-redes-sociais {
  font-family: "Anton", sans-serif;
  color: #015C92;
  font-size: 20px;
  margin: -5px 0 10px;
}

#social-buttons {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 10px;
}

#expand__menu2 {
  position: absolute;
  margin-top: -25px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 90;
}

#expand__menu2 img {
  width: 20px !important;
  height: 20px !important;
}

#expand__menu2 img:hover {
  box-shadow: 0px 0px 10px black;
}

/* #filters {  } */

#filters .form-group,
#filters .input-group {
  margin-bottom: 0;
}

#filters .combo-box {
  width: 100%;
}

#filters .combo-box > button {
  text-align: left;
  background-color: transparent;
  border: 1px solid #ced4da;
  border-radius: 7px;
}

#filters .combo-box > button::after {
  right: 10px;
}

#filters .combo-box .dropdown-menu {
  background-color: #125488;
}

#filters .combo-box .dropdown-menu button {
  color: white;
  border: 0;
  text-transform: uppercase;
  transition: 0.4s;
}

#filters .combo-box .dropdown-menu button::before {
  content: "";
  width: 8px;
  height: 8px;
  border: solid 1px #114671;
  border-left: 0;
  border-bottom: 0;
  left: 0;
  position: absolute;
  transform: rotate(45deg);
  margin-top: 5px;
  margin-left: 4px;
  transition: 0.4s;
}

#filters .combo-box .dropdown-menu button:focus {
  outline: solid 1px white;
}

#filters .combo-box .dropdown-menu button:hover {
  background: rgba(0, 0, 0, 0.3);
}

#filters .combo-box .dropdown-menu button:hover::before {
  border-color: white;
}

#filters .combo-box .dropdown-menu.dropdown-menu-lg-left {
  right: 0;
}

#filters .combo-box .dropdown-menu.dropdown-menu-right {
  left: 0;
}

#filters .input-busca {
  /* Placeholder*/
  /* Firefox */
  /* Internet Explorer 10-11 */
  /* Microsoft Edge */
  /* Placeholder*/
}

#filters .input-busca input {
  background: transparent;
  color: white;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

#filters .input-busca input::-moz-placeholder {
  color: white;
  opacity: 1;
}

#filters .input-busca input:-ms-input-placeholder {
  color: white;
  opacity: 1;
}

#filters .input-busca input::-ms-input-placeholder {
  color: white;
  opacity: 1;
}

#filters .input-busca input::placeholder {
  color: white;
  opacity: 1;
}

#filters .input-busca input:-ms-input-placeholder {
  color: white;
}

#filters .input-busca input::-ms-input-placeholder {
  color: white;
}

#filters .input-busca button {
  font-family: "Anton", sans-serif;
  background: white;
  border: solid 1px white;
  color: #0B3C5E;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}

/* Sticky footer styles
-------------------------------------------------- */

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  /* Margin bottom by footer height */
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 909090;
}

footer section {
  background-color: #0B3C5E;
}

footer .box__footer--logos {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  padding: 0 15px;
}

footer .box__footer--logos .brand-footer svg {
  width: 70px;
  height: 50px;
}

footer .brand-footer {
  padding: 4px 0;
}

footer .brand-alternativa-digital {
  padding: 0;
}

/* ----------------------------------------------------------------- */

/*                           top-banner                              */

/* ----------------------------------------------------------------- */

section#top-banner .container {
  background-size: cover;
  background-position: center;
  height: 100%;
}

section#top-banner .container .row {
  height: 100%;
}

section#top-banner .container .col {
  padding: 0;
}

section#top-banner .container .cols__texts div {
  padding-left: 15px;
  font-family: "Anton", sans-serif;
}

section#top-banner .container .cols__texts--sindicato div {
  padding: 15px;
  font-family: "Anton", sans-serif;
}

section#top-banner .container .cols__texts--fetrafi-rs {
  display: flex;
  justify-content: space-between;
  height: inherit;
  align-items: center;
}

section#top-banner .container .cols__texts--fetrafi-rs div {
  font-family: "Anton", sans-serif;
  padding: 15px;
  background-color: rgba(8, 90, 76, 0.87);
}

section#top-banner .container .cols__texts--fetrafi-rs div:first-child {
  border-radius: 10px;
  margin-right: 5px;
}

section#top-banner .container .cols__texts--fetrafi-rs div:nth-child(2) {
  display: flex;
  margin-left: 5px;
  height: 100%;
}

section#top-banner .container .cols__texts--fetrafi-rs div a {
  display: flex;
}

section#top-banner .container-text-1 {
  font-size: 1.5em;
  line-height: 1.2em;
  padding: 5px;
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 20px;
  transition: all 0.3s;
}

section#top-banner .container-text-2 {
  font-size: 1.5em;
  line-height: 1.4em;
  padding: 2px;
  color: #333;
  background-color: rgba(255, 255, 255, 0.8);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 20px;
  transition: all 0.3s;
}

section#top-banner .container-text-3 {
  line-height: 1.2em;
  font-size: 2.5em;
  padding: 15px;
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  transition: all 0.3s;
}

section#top-banner .flex-texts {
  display: flex;
  flex-wrap: wrap;
}

section#top-banner .text1--sindicato {
  float: left;
  color: white;
  font-size: 2.1em;
}

section#top-banner .text1--sindicato span {
  background-color: rgba(0, 0, 0, 0.6);
  padding-right: 20px;
}

section#top-banner .container-text-1--sindicato .arrow__left--sindicato,
section#top-banner .container-text-1--fetrafi-rs .arrow__left--sindicato {
  background-color: rgba(0, 0, 0, 0.6);
  padding-right: 10px;
}

section#top-banner .container-text-1--sindicato .texts--sindicato,
section#top-banner .container-text-1--fetrafi-rs .texts--sindicato {
  font-size: 2.3em;
  line-height: 1.2em;
  padding-left: 0 !important;
}

section#top-banner .container-text-1--sindicato .texts--sindicato div,
section#top-banner .container-text-1--fetrafi-rs .texts--sindicato div {
  clear: both;
  margin-left: -16px;
}

section#top-banner .container-text-1--sindicato .texts--sindicato span,
section#top-banner .container-text-1--fetrafi-rs .texts--sindicato span {
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  padding-right: 20px;
}

.__separador {
  opacity: 0.3;
}

.__separador .col div {
  background-color: #C1C1C1;
  height: 1px;
  margin: 20px 60px;
}

.__separador--without--line {
  opacity: 0.3;
}

.__separador--without--line .col div {
  height: 1px;
  margin: 15px;
}

/* Small devices (landscape phones, 576px and up) */

@media (max-width: 1200px) {
  /* Correções do padding right do container dos menus */

  #top-of-site .container .row {
    margin: 0;
  }

  #top-of-site .container .row #menus {
    padding: 0;
  }

  /*#top-of-site #menus { padding-right: 0; } */

  .container {
    max-width: none;
    width: 100% !important;
  }

  .container > col {
    padding: 0;
  }

  #box-top-fetrafi-rs {
    padding: 0;
  }
}

@media (max-width: 992px) {
  #top-of-site #menus {
    margin-top: -300px;
    padding: 15px 0;
    background-color: #0B3C5E;
  }

  #top-of-site .hamburguer {
    padding-right: 0;
  }

  #top-of-site #logo {
    margin: 0 !important;
    height: auto !important;
  }

  #top-of-site #logo svg {
    height: 40px !important;
  }

  #top-of-site #logo img {
    height: 40px;
    transition: 0.3s;
  }

  #top-of-site #social-buttons .row div {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  #top-of-site.showMenu2 #menus {
    margin-top: -8px;
    transition: all 0.3s;
  }

  #top-of-site.showMenu2 #menus nav {
    padding: 20px;
  }

  #top-of-site.showMenu2 #expand__menu2 {
    transform: rotate(180deg);
    margin-top: -28px;
    margin-left: -10px;
  }
}

@media (max-width: 575.98px) {
  #filters > div {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

/* Medium devices (tablets, 768px and up) */

/* Large devices (desktops, 992px and up) */

@media (max-width: 992px) {
  #social-buttons .row div {
    text-align: center;
  }

  #social-buttons img {
    max-height: 35px;
  }
}

/* Extra large devices (large desktops, 1200px and up) */

#content {
  margin-top: 100px;
}

@media (max-width: 992px) {
  #content {
    margin-top: 75px;
  }
}

/* MENU LATERAL */

/*
    DEMO STYLE
*/

body {
  background: #fafafa;
}

p {
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #999;
}

a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}

.navbar {
  padding: 15px 10px;
  background: #fff;
  border: none;
  border-radius: 0;
  margin-bottom: 40px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
  box-shadow: none;
  outline: none !important;
  border: none;
}

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
  margin: 40px 0;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

#sidebar {
  width: 300px;
  position: fixed;
  top: 0;
  left: -300px;
  height: 100vh;
  z-index: 99999999;
  background: #0B3C5E;
  color: #fff;
  transition: all 0.3s;
  overflow-y: scroll;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#sidebar.active {
  left: 0;
}

#dismiss {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 25px;
}

#dismiss:hover {
  background: #fff;
  color: #000;
}

.overlay {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 998;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.overlay.active {
  display: block;
  opacity: 1;
}

#sidebar .sidebar-header {
  padding: 20px;
}

#sidebar .sidebar-header a {
  display: block;
}

#sidebar .sidebar-header img {
  height: 32px;
  margin-left: 5px;
}

#sidebar ul.components {
  padding: 20px 0 0 0;
}

#sidebar ul p {
  color: white;
  margin-bottom: 0;
  padding: 0px 10px 0px 32px;
  font-family: "Anton", sans-serif;
  font-size: 2em;
  text-transform: uppercase;
}

#sidebar ul li a {
  padding: 4px 10px 4px 42px;
  font-size: 1.6em;
  display: block;
  text-transform: uppercase;
}

#sidebar ul li a:hover {
  color: #000;
  background: #fff;
  border-left: solid 4px #fff;
}

#sidebar ul li.active > a,
a[aria-expanded=true] {
  color: #fff;
  /*0B3C5E*/
  border-left: solid 4px #fff;
  box-sizing: border-box;
}

#sidebar ul li.active > a:hover {
  color: #0B3C5E;
  border-left: solid 4px #000;
}

a[data-toggle=collapse] {
  position: relative;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

ul.CTAs {
  padding: 20px;
}

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}

a.download {
  background: #fff;
  color: #000;
}

a.article,
a.article:hover {
  background: #000 !important;
  color: #fff !important;
}

#sidebar .redes-sociais {
  width: 210px;
  margin: 0 auto;
}

#sidebar .redes-sociais div {
  margin: 5px 0;
}

#sidebar .redes-sociais div div {
  width: 45px;
  height: 45px;
}

#sidebar .redes-sociais div div a svg {
  width: 45px;
  height: 45px;
}

#sidebar .redes-sociais div div a svg .cls-1,
#sidebar .redes-sociais div div a svg .cls-3,
#sidebar .redes-sociais div div a svg .cls-4,
#sidebar .redes-sociais div div a svg path,
#sidebar .redes-sociais div div a svg tspan {
  transition: 0.4s;
}

#sidebar .redes-sociais div div a:hover svg .cls-1,
#sidebar .redes-sociais div div a:hover svg .cls-3,
#sidebar .redes-sociais div div a:hover svg .cls-4,
#sidebar .redes-sociais div div a:hover svg path,
#sidebar .redes-sociais div div a:hover svg tspan {
  fill: #53A6D8;
}

#sidebar .contato {
  margin-top: 4px;
  padding: 5px;
  margin-left: 30px;
}

#sidebar .contato .d-flex div {
  font-size: 1.1em;
  margin-left: 10px;
  margin-bottom: 10px;
  line-height: 2em;
}

#sidebar .contato .d-flex div:first-child {
  margin-left: 0;
  width: 30px;
  height: 30px;
}

/* ---------------------------------------------------
                    STYLES dos Forms
    Estilos default dos formulários de todo projeto
----------------------------------------------------- */

form.fieldsRounded label {
  color: #919191;
  margin-bottom: 0.2rem;
  font-size: 1.1rem;
  font-weight: bold;
}

form.fieldsRounded input,
form.fieldsRounded textarea,
form.fieldsRounded select {
  border-radius: 10px !important;
  box-shadow: 0px 4px 5px #B4B4B460;
}

form.fieldsRounded .required {
  border-color: #53A6D8;
}

form.fieldsRounded .btn {
  border-radius: 10px;
  font-weight: bold;
  font-size: 1.1em;
}

form.fieldsRounded .btn div::before {
  content: url("/_site/assets/SVGs/Arrow-Btn-Form-Left.svg");
  width: 20px;
  height: 20px;
  margin-top: 2px;
  position: absolute;
  margin-left: -16px;
}

/* ---------------------------------------------------
               STYLES Layout Sindicatos
       Estilos default das páginas dos sindicatos
----------------------------------------------------- */

#content-syndicate {
  font-family: Arial, Helvetica, sans-serif;
}

#content-syndicate h1 {
  font-family: "Anton", sans-serif;
  font-size: 1.8em;
}

#content-syndicate p {
  font-size: 1em;
  color: #333;
}

/* ---------------------------------------------------
    COMPONENTES STYLE
----------------------------------------------------- */

/* collapse */

.accordionStandard {
  transition: 0.4s;
  cursor: pointer;
}

@media (max-width: 575.98px) {
  .accordionStandard {
    margin-left: -15px;
    margin-right: -15px;
  }
}

.accordionStandard .card {
  font-family: "Anton", sans-serif;
  background-color: transparent;
  color: #333;
  border: 0;
}

.accordionStandard .card .card-header {
  background-color: inherit;
  border: inherit;
}

.accordionStandard .card .card-body {
  padding: 0 45px 15px 45px;
}

.accordionStandard .box--header .title--header {
  font-family: inherit;
  margin-left: 28px;
  font-size: 2.1em;
  color: #0B3C5E;
  transition: 0.3s;
}

.accordionStandard .box--header .title--header::before {
  content: "";
  position: absolute;
  margin-top: 11px;
  position: absolute;
  width: 13px;
  height: 13px;
  margin-left: -28px;
  border-right: solid 1px #919191;
  border-bottom: solid 1px #919191;
  transition: 0.3s;
}

.accordionStandard .box--header[aria-expanded=false] .title--header::before {
  transform: rotate(-45deg);
}

.accordionStandard .box--header[aria-expanded=true] .title--header {
  color: #53A6D8;
}

.accordionStandard .box--header[aria-expanded=true] .title--header::before {
  transform: rotate(45deg);
  border-right: solid 1px #125488;
  border-bottom: solid 1px #125488;
}

/* Modal */

.modal {
  z-index: 90909090;
  background: rgba(0, 0, 0, 0.8);
}

.modal .modal-content {
  background: transparent;
  border: 0;
}

.modal .modal-header {
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

.modal .modal-header .close {
  padding: 0;
  margin: 0;
  color: white;
  opacity: 1;
  transition: ease 0.3s;
  font-size: 5rem;
}

.modal .modal-header .close:hover {
  color: #0B3C5E;
}

.modal .modal-body {
  padding: 0;
}

/* lgpd */

#lgpd {
  position: fixed;
  bottom: 0;
  border: solid 1px #125488;
  z-index: 90909090;
  width: 100%;
  padding: 20px;
  background-color: #0B3C5E;
}

#lgpd p {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 1.5em;
  line-height: 1.2em;
  color: white;
}

#lgpd .actions {
  text-align: center;
}

#lgpd .actions .btnLgpd {
  font-family: "Anton", sans-serif;
  background: #0B3C5E;
  border: solid 1px #0B3C5E;
  font-size: 1.2em;
  color: white;
  padding: 5px 20px;
  margin: 0 5px;
  border-radius: 7px;
}

.title-page {
  --colorTitle: #125488;
  font-size: 2.9rem;
  color: var(--colorTitle);
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  margin-top: 30px;
  margin-left: 10px;
  margin-right: -15px;
  transition: 0.4s;
}

.title-page.fetrafi-rs {
  --colorTitle: #13695A;
}

.title-page span:last-child {
  color: #C1C1C1;
}

.title-page::before {
  content: "";
  margin-left: -15px;
  margin-top: -5px;
  width: 20px;
  height: 20px;
  border-top: solid 3px var(--colorTitle);
  border-left: solid 3px var(--colorTitle);
  position: absolute;
  transition: 0.4s;
}

.title-page::after {
  transform: translate(-12px, 8px);
  content: "";
  width: 20px;
  height: 20px;
  border-right: solid 3px var(--colorTitle);
  border-bottom: solid 3px var(--colorTitle);
  display: inline-table;
  transition: 0.4s;
}

/* ----------------------------------------------------------------- */

/*               File of global functions (mixin)                    */

/* ----------------------------------------------------------------- */

.COMPONENTE__news--with--image .__news--left,
.COMPONENTE__news--with--video .__news--left,
.COMPONENTE__news--with--audio .__news--left,
.COMPONENTE__news--with--only-text .__news--left {
  padding-bottom: 10px;
}

.COMPONENTE__news--with--image .__news--left div,
.COMPONENTE__news--with--video .__news--left div,
.COMPONENTE__news--with--audio .__news--left div,
.COMPONENTE__news--with--only-text .__news--left div {
  background-position: center !important;
  background-size: cover !important;
}

.COMPONENTE__news--with--image .__news--right,
.COMPONENTE__news--with--video .__news--right,
.COMPONENTE__news--with--audio .__news--right,
.COMPONENTE__news--with--only-text .__news--right {
  line-height: 1.4em;
  font-family: "Anton", sans-serif;
  color: #333;
}

.COMPONENTE__news--with--image .__news--right .__text--1,
.COMPONENTE__news--with--video .__news--right .__text--1,
.COMPONENTE__news--with--audio .__news--right .__text--1,
.COMPONENTE__news--with--only-text .__news--right .__text--1 {
  color: #53A6D8;
  line-height: inherit;
  font-size: 1.5em;
}

.COMPONENTE__news--with--image .__news--right .__text--1 span,
.COMPONENTE__news--with--video .__news--right .__text--1 span,
.COMPONENTE__news--with--audio .__news--right .__text--1 span,
.COMPONENTE__news--with--only-text .__news--right .__text--1 span {
  color: #B3B3B3;
  padding-left: 10px;
}

.COMPONENTE__news--with--image .__news--right .__text--2,
.COMPONENTE__news--with--video .__news--right .__text--2,
.COMPONENTE__news--with--audio .__news--right .__text--2,
.COMPONENTE__news--with--only-text .__news--right .__text--2 {
  font-size: 2.9em;
  line-height: 1.2em;
  padding: 8px 0;
}

.COMPONENTE__news--with--image .__news--right .__text--3,
.COMPONENTE__news--with--video .__news--right .__text--3,
.COMPONENTE__news--with--audio .__news--right .__text--3,
.COMPONENTE__news--with--only-text .__news--right .__text--3 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 1.5em;
  line-height: 1.2em;
}

.COMPONENTE__news--with--video .__news--left .container,
.COMPONENTE__news--with--video .__news--left .container .row {
  height: 100%;
}

.COMPONENTE__news--with--video .__news--left .container {
  background-color: rgba(0, 0, 0, 0.4);
}

.COMPONENTE__news--with--video .__news--left .container:hover img {
  cursor: pointer;
}

.COMPONENTE__news--with--video .__news--left .player {
  border: solid 1px yellowgreen;
  width: 40px;
  height: 40px;
  background-color: yellowgreen;
}

.COMPONENTE__news--with--audio audio {
  display: none;
}

.COMPONENTE__news--with--audio .player__audio {
  cursor: pointer;
}

.COMPONENTE__news--with--audio .player__audio .__espectro--audio {
  background: url(/_site/assets/SVGs/audio-spectro-pause.svg) repeat-x;
  height: 95px;
  margin-bottom: 15px;
}

.COMPONENTE__news--with--audio .player__audio .__espectro--audio .control__play-Pause {
  background: url(/_site/assets/SVGs/audio-play.svg) no-repeat;
  width: 74px;
  height: 67px;
}

.COMPONENTE__news--with--audio .player__audio[rel=play] .__espectro--audio {
  background: url(/_site/assets/SVGs/audio-spectro-play.svg) repeat-x;
}

.COMPONENTE__news--with--audio .player__audio[rel=play] .__espectro--audio .control__play-Pause {
  background: url(/_site/assets/SVGs/audio-pause.svg) no-repeat !important;
}

/* ---------------------------------------------------
                    STYLES Shared
    Estilos com elementos, componentes reutilizaveis
    em varias paginas do projeto
----------------------------------------------------- */

/* Buttons Editais */

/**
* Padrão hover
*
* Style default para os buttons
* download editais com hover
*
* Arquivos que importam este estilo:
* editais.scss -> [editais.scss, acordos-e-convencoes]
*
* @package
*/

.SHARED__download {
  cursor: pointer;
}

.SHARED__download .cls-1,
.SHARED__download .cls-3,
.SHARED__download .cls-4,
.SHARED__download path,
.SHARED__download tspan {
  transition: 0.4s;
}

.SHARED__download:hover svg tspan,
.SHARED__download:hover svg fill,
.SHARED__download:hover svg path {
  fill: #0B3C5E;
  transition: 0.4s;
}

.SHARED__download:hover svg path[data-name=path-SVG-download-5] {
  fill: transparent;
}

.VISUALIZAR__download {
  cursor: pointer;
}

.VISUALIZAR__download .cls-1,
.VISUALIZAR__download .cls-3,
.VISUALIZAR__download .cls-4,
.VISUALIZAR__download path,
.VISUALIZAR__download tspan {
  transition: 0.4s;
}

.VISUALIZAR__download:hover svg .st2 path {
  fill: white;
}

.VISUALIZAR__download:hover svg path {
  fill: #0B3C5E;
  transition: 0.4s;
}

.VISUALIZAR__download:hover svg path[data-name=path-SVG-download-5] {
  fill: transparent;
}

/* Icons Socials Midia */

/**
* Padrão hover
*
* Style default para os icones
* de redes sociais cinzas
* e com os incones no layout vertical
*
* Arquivos que importam este estilo:
* news.scss -> [noticia-only-text.blade.php,
                noticia-with-audio.blade.php,
                noticia-with-image.blade.php,
                noticia-with-video.blade.php]
* editais.scss -> editais.blade.php
* @package
*/

.SHARED__icons__socials--midia div {
  width: 70px;
  height: 55px;
}

.SHARED__icons__socials--midia div img {
  width: 50px;
}

.SHARED__icons__socials--midia div a {
  margin: 10px;
  display: block;
}

@media (min-width: 390px) {
  .SHARED__icons__socials--midia div a {
    margin: 15px;
  }
}

.SHARED__icons__socials--midia div a svg .cls-1,
.SHARED__icons__socials--midia div a svg .cls-3,
.SHARED__icons__socials--midia div a svg .cls-4,
.SHARED__icons__socials--midia div a svg path,
.SHARED__icons__socials--midia div a svg tspan {
  fill: #A5A5A5;
  transition: 0.4s;
}

.SHARED__icons__socials--midia div a:hover svg .cls-1,
.SHARED__icons__socials--midia div a:hover svg .cls-3,
.SHARED__icons__socials--midia div a:hover svg .cls-4,
.SHARED__icons__socials--midia div a:hover svg path,
.SHARED__icons__socials--midia div a:hover svg tspan {
  fill: #015C92;
  transition: 0.4s;
}

/* Loading */

/**
* Style default para os loadings
* de redes sociais cinzas
* e com os incones no layout vertical
*
* Arquivos que importam este estilo:
* welcome.blade 
* @package
*/

.loading {
  display: flex;
  justify-content: center;
  margin: 15px;
}

.loading .lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.loading .lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #015C92;
  -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
          animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loading .lds-ellipsis div:nth-child(1) {
  left: 8px;
  -webkit-animation: lds-ellipsis1 0.6s infinite;
          animation: lds-ellipsis1 0.6s infinite;
}

.loading .lds-ellipsis div:nth-child(2) {
  left: 8px;
  -webkit-animation: lds-ellipsis2 0.6s infinite;
          animation: lds-ellipsis2 0.6s infinite;
}

.loading .lds-ellipsis div:nth-child(3) {
  left: 32px;
  -webkit-animation: lds-ellipsis2 0.6s infinite;
          animation: lds-ellipsis2 0.6s infinite;
}

.loading .lds-ellipsis div:nth-child(4) {
  left: 56px;
  -webkit-animation: lds-ellipsis3 0.6s infinite;
          animation: lds-ellipsis3 0.6s infinite;
}

@-webkit-keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@-webkit-keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(24px, 0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(24px, 0);
  }
}

/* ----------------------------------------------------------------- */

/*               File of global functions (mixin)                    */

/* ----------------------------------------------------------------- */

.loading {
  margin-top: 70px;
}

.btn-more {
  margin-top: 80px;
  text-align: center;
}

#btn-more {
  background: no-repeat;
  border: solid 1px #0B3C5E;
  border-radius: 50px;
  padding: 6px 50px;
  font-size: 1.7em;
  color: #0B3C5E;
  transition: 1s ease;
}

#btn-more:hover {
  text-decoration: underline;
  color: #53A6D8;
  border-color: #53A6D8;
}