@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,700;1,300&display=swap");

/* -- ROOT ELEMENTS / VARS -- */
:root {
  --clr-black: hsl(0, 0%, 6%);
  --clr-white: hsl(0, 0%, 97%);
  --clr-gray: hsl(120, 1%, 15%);


  --sabado-red: #e3000f;
  --sabado-dark: #111111;
  --sabado-gray: #f4f4f4;
  --sabado-border: #dddddd;

  --bg-quote: #f4f1eb;

  --font-family-headings: "Merriweather", "Georgia", serif !important;
  --font-family-texts:  "Muli", "Helvetica", Arial, sans-serif;

  --font-weight-headings: 700;
  --font-weight-labels: 600;
  --font-weight-texts: 400;
}

section {
  overflow: hidden;
}
html {
  font-family: "Muli", "Helvetica", Arial, sans-serif;
  background-color: var(--clr-white);
}
h1,
h2,
h3,
h4,
h5,
h6,
.subtitle,
.uk-dropcap::first-letter,
.editorial-serif {
  font-family: "Merriweather", "Georgia", serif !important;
  color: var(--sabado-dark);
}
h2{
  font-weight: bold;
}
header h1 {
  color: var(--clr-white);
}
p,
a,
em,
li,
button {
  font-weight: var(--font-family-texts);
  color: var(--clr-black);
}
em {
  color: #333333;
}
strong {
  font-weight: var(--font-weight-headings);
}

header {
  height: 92vh;
  min-height: 620px;
}



/* UIKIT */
.uk-text-primary {
  color: var(--sabado-red) !important;
}
.uk-background-muted {
  background-color: var(--sabado-gray) !important;
}
.uk-dropcap::first-letter {
  color: var(--sabado-red);
  font-size: 4rem;
  float: left;
  margin-right: 10px;
  line-height: 1;
}
.uk-card-default {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--sabado-border);
  border-top: 4px solid var(--sabado-red);
  background-color: #fff;
}
.uk-progress {
  border-radius: 0;
  height: 10px;
  background-color: #e5e5e5;
}
.uk-progress::-webkit-progress-value {
  background-color: var(--sabado-red) !important;
}
.uk-progress::-moz-progress-bar {
  background-color: var(--sabado-red) !important;
}
.uk-progress-warning::-webkit-progress-value {
  background-color: #555 !important;
}
.uk-progress-warning::-moz-progress-bar {
  background-color: #555 !important;
}

/* Cartões Retos e Editoriais */
.uk-card-default {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--sabado-border);
  border-top: 4px solid var(--sabado-red);
  background-color: #fff;
}

.read-article h3{
  color: var(--clr-black) !important ;
}

/* Citações estilo Revista */
blockquote {
  border-left: 4px solid var(--sabado-red);
  padding-left: 20px;
  font-size: 1.1rem;
  font-family: "Merriweather", serif;
  font-style: italic;
  color: #333;
  margin-top: 20px;
  margin-bottom: 0;
}
blockquote footer {
  font-family: sans-serif;
  font-size: 0.85rem;
  margin-top: 10px;
  color: #777;
  font-style: normal;
  font-weight: bold;
}

#branding {
  position: relative;
  z-index: 10;
}
#branding .logoCM {
  width: 130px;
}
#branding .logo-Record {
  width: 150px;
}
#branding .logo-Sabado {
  width: 170px;
}
#branding .logo-Negocios {
  width: 180px;
}
#branding .logo-cmTV {
  width: 150px;
}
#branding .logo-TVG {
  width: 150px;
}
#branding .logo-CMB {
  width: 150px;
}

/* #corpo-destaque { background-color: rgba(255,204,0,1.00); }
#video { background-color: rgba(236,236,236,0.80); } */

#barraMicrosites {
  width: 100%;
  height: 340px;
  margin-bottom: -6px;
  padding: 0px;
  border: 0px none transparent;
}

#navigation-top{
  background: var(--clr-black);
}

.uk-offcanvas-bar {
  background: var(--clr-black);
}

.uk-offcanvas-bar .uk-nav-default>li>a, .uk-navbar-nav>li>a, .uk-navbar-toggle-icon {
   color: var(--clr-white);
}



.logo-sabado{
  width: 112px;
  height: auto;
}


footer {
  background-color: var(--clr-black);
}
footer p {
  color: rgba(255, 255, 255, 1);
  font-size: 0.95rem;
}
footer .uk-text-small {
  font-size: 0.8rem;
}

.social-icons .uk-icon {
  background-color: transparent;
  border: 1px solid var(--sabado-red);
  color: var(--sabado-red);
}

.social-icons .uk-icon:hover {
  background-color: var(--sabado-red);
  color: var(--clr-white);
}

.footer-custom-grid {
  display: grid;
  gap: 20px;
}

.area-logo {
  grid-area: logo;
}
.area-copy {
  grid-area: copy;
}
.area-social {
  grid-area: social;
}

.logo-footer{
  width: 100px;
}


.uk-dropcap span {
  color: var(--sabado-red);
}

.box {
  border: 1px solid black;
}
/* --- Blockquote --- */
section.blockquote {
  background: var(--bg-quote);
}
blockquote {
  font-style: normal !important;
  color: var(--clr-black);
}
.blockquote blockquote {
  position: relative;
}
.blockquote p {
  font-family: var(--font-family-texts) !important;
  font-weight: 900 !important;
  font-size: 25px;
  line-height: 1.2;
}
.blockquote .quote-left blockquote::before {
  content: "";
  position: absolute;
  left: -120px;
  display: block;
  width: 76px;
  height: 56px;
  background: url("../i/aspas.png") no-repeat 50% scroll;
  background-size: contain;
  margin-top: 5px;
}
.blockquote .quote-right blockquote::after {
  content: "";
  position: absolute;
  top: 0;
  right: -80px;
  display: block;
  width: 76px;
  height: 56px;
  background: url("../i/aspas.png") no-repeat 50% scroll;
  background-size: contain;
  margin-top: 5px;
}
blockquote footer {
  background-color: transparent !important;
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--sabado-red);
}



/* --- Small screens ------------------------------------------------------------------ */
@media only screen and (max-width: 40em) {
  .uk-padding {
    padding: 20px 0px;
  }
  #branding .logo-CM {
    width: 90px;
  }
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) and (orientation: portrait) {
  #barraMicrosites {
    height: 475px;
  }

  .footer-custom-grid {
    grid-template-columns: 1fr ;
    grid-template-areas:
      "logo"
      "copy"
      "social";
    gap: 20px;
    
  }
  .area-logo {
    text-align: center;
    margin-bottom: 20px;
    justify-self: center;
  }

  .area-copy {
    text-align: center;
  }

  .area-social {
    text-align: center;
    display: flex;
    flex-direction: column;
  }
}

/* --- Medium screens / Tablet -------------------------------------------------------- */
@media only screen and (min-width: 40.063em) and (max-width: 63.938em) {
  
  .footer-custom-grid {
    grid-template-columns: 1fr ;
    grid-template-areas:
      "logo"
      "copy"
      "social";
    gap: 20px;
    
  }
  .area-logo {
    text-align: center;
    margin-bottom: 20px;
    justify-self: center;
  }

  .area-copy {
    text-align: center;
  }

  .area-social {
    text-align: center;
    display: flex;
    flex-direction: column;
  }
}
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 40.063em) and (max-width: 64em) and (orientation: portrait) {
  #barraMicrosites {
    height: 260px;
  }
}

/* --- Large screens ------------------------------------------------------------------ */
@media only screen and (min-width: 64.063em) {
  .footer-custom-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "copy logo"
      "copy social";
  }
  .area-logo {
    justify-self: end;
    text-align: right;
    align-self: start;
  }

  .area-social {
    justify-self: end;
    text-align: right;
    align-self: end;
  }

  .area-copy {
    justify-self: start;
    text-align: left;
    align-self: start;
    margin-top: 10px;
  }
} /* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
} /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/* --- XLarge screens ------------------------------------------------------------------ */
@media only screen and (min-width: 90.063em) {
} /* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
} /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* --- XXLarge screens ------------------------------------------------------------------ */
@media only screen and (min-width: 120.063em) {
} /* min-width 1921px, xxlarge screens */