@charset "UTF-8";

/* -- ROOT ELEMENTS / VARS -- */
:root {
  --branco: hsl(0,0%,99%);
  --preto: hsl(0,0%,8%);

  --azul-escuro: hsl(211.7,36.7%,9.2%);
  --azul: hsl(211.7,36.7%,19.2%);
  --azul-claro: hsl(211.7,36.7%,34.2%);
  --amarelo: hsl(47.5,100%,49.8%);

  --creme-escuro: hsl(43.2,47.2%,79.6%);
  --creme: hsl(43.2,47.2%,89.6%);
}


html { font-family: 'Barlow','Helvetica',Arial,sans-serif; background-color: var(--creme); }
h1,h2,h3,h4,h5,h6,.uk-h1,.uk-h2,.uk-h3,.uk-h4,.uk-h5,.uk-h6,.uk-heading-medium { font-family: 'Barlow Condensed','Helvetica',Arial,sans-serif; font-weight: 300 !important; line-height: 1.1em; }
p,a,em,li,button { font-weight: 400; }
em { color: #333333; }
strong { font-weight: 700; }


/* -- Modificadores UIKit -- */
#navigation-top { position: relative; z-index: 500; background-color: rgba(255,255,255,0.80); }
#navigation-top.uk-active { background-color: rgba(255,255,255,0.95); }
#navigation-top .uk-navbar-nav li:first-child .uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle { font-family: 'Barlow','Helvetica',Arial,sans-serif; font-weight: 400 !important; padding-left: 0px; }
#navigation-top .uk-navbar-item, #navigation-top .uk-navbar-nav>li>a, #navigation-top .uk-navbar-toggle { min-height: 60px; color: var(--azul-claro); }
#navigation-top .uk-navbar-nav>li>a:hover { color: var(--azul); }

#site-scroller { height: 3px; }
#site-scroller[value]::-webkit-progress-bar { border-radius: 0px !important; }
#site-scroller[value]::-webkit-progress-value { background-color: var(--amarelo) !important; }
#site-scroller[value]::-moz-progress-bar { background-color: var(--amarelo) !important; }



/* -- Estilos Proprietários -- */
#pre-header { position: relative; z-index: 10; background-color: rgba(33,33,33,1.00); }
#pre-header p { display: inline-block; margin-bottom: 0px; }
#pre-header .addthis_sharing_toolbox { display: inline-block; margin-left: 12px; vertical-align: text-top; }
#pre-header .addthis_sharing_toolbox .at-share-btn { margin-bottom: 0px; }


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

#branding { position: relative; z-index: 10; }
#branding .logo-CM { width: 130px; }
#branding .logo-Record { width: 180px; }

#heading { z-index: 10; padding: 110px 0px 0px 0px; }
#heading .heading-container { max-width: 600px; }
#heading .logo-Colecao { width: 450px; }
#heading h1 { color: var(--amarelo); text-shadow: 2px 2px var(--preto); font-size: 3.4rem; margin-top: 30px; }

#stamps { z-index: 20; position: relative; }
#stamps .uk-container { position: relative; }
#stamps .stamp { width: 360px; margin-bottom: 180px; }
#stamps .stamp-Escala { width: 120px; position: absolute; bottom: 0px; right: 450px; }

#apresentacao { position: relative; }
#apresentacao .uk-width-1-1 { position: relative; }
#apresentacao p { font-size: 1.35rem; font-weight: 700; }
#apresentacao li { font-size: 1.20rem; }
#apresentacao .stamp { z-index: 0; position: absolute; bottom: 160px; left: 50px; background-color: var(--amarelo); width: 100px; border-radius: 20px; padding: 16px 12px 40px 12px; display: inline-block; }
#apresentacao .stamp p { font-size: 1.1rem; color: var(--azul); }
#apresentacao .packshot { z-index: 10; position: relative; width: 750px; margin-top: -140px; }

#ticker { background-color: var(--azul); }

#a-colecao { background-color: var(--creme-escuro); }
#a-colecao h2, #a-colecao h4 { color: var(--azul); }
#a-colecao p { font-size: 1.15rem; color: var(--azul); }

#video { background-color: var(--azul-escuro); }

#pre-visualizacao .uk-container { max-width: 1080px; }


.btn-disabled, .btn-disabled:hover { background-color: rgba(140,140,140,0.20); color: rgba(140,140,140,1.00); border-color: rgba(140,140,140,1.00); cursor: default; }


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

footer { background-color: rgba(33,33,33,1.00); }
footer p { color: rgba(255,255,255,1.00); font-size: 0.95rem; }
footer .uk-text-small { font-size: 0.8rem; }
footer .social-icons a .icone { background-color: rgba(255,255,255,0.60); color: rgba(33,33,33,1.00); border-radius: 50px; font-size: 22px; width: 35px; height: 35px; line-height: 35px; text-align: center; }
footer .social-icons a:hover .icone{ background-color: rgba(255,255,255,0.80); }
footer .social-icons .stamp { height: 35px; }





/* --- Small screens ------------------------------------------------------------------ */
@media only screen and (max-width: 40em) {
  #pre-header { display: none; }
  #navigation-top .uk-navbar-item, #navigation-top .uk-navbar-nav>li>a, #navigation-top .uk-navbar-toggle { min-height: 40px; }
  header { min-height: 680px; }
  #branding .logo-CM { width: 90px; }
  #branding .logo-Record { width: 95px; }

  #heading { padding: 190px 0px 0px 0px; }
  #heading h1 { font-size: 2.5rem; margin-top: 5px; }
  #stamps .stamp { width: 160px; margin-top: 320px; margin-bottom: 0px; }
  #apresentacao .packshot { margin-top: 150px; }
  #apresentacao .stamp { left: 110px; }

} /* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) and (orientation: portrait) {
  #barraMicrosites { height: 475px; }
}

/* --- Medium screens / Tablet -------------------------------------------------------- */
@media only screen and (min-width: 40.063em) and (max-width: 63.938em) {
}
@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) {
} /* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
  .uk-container { padding-left: 60px; padding-right: 60px; }
  #pre-header { display: none; }
  #navigation-top .uk-navbar-item, #navigation-top .uk-navbar-nav>li>a, #navigation-top .uk-navbar-toggle { min-height: 50px; }

  #heading { padding: 100px 0px 0px 0px; }
  #heading .heading-container { max-width: 330px; }
  #heading .logo-Colecao { width: 300px; }
  #heading h1 { font-size: 2.8rem; margin-top: 10px; }
  #stamps .stamp { width: 280px; margin-top: -50px; margin-bottom: 0px; }

  #apresentacao .packshot { margin-top: -80px; margin-bottom: -50px; }
  #apresentacao .stamp { bottom: 110px; left: 60px; }

  #pre-visualizacao .uk-container { max-width: 920px; }
} /* 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) {
  #heading { padding: 100px 0px 0px 0px; }
  #heading .heading-container { max-width: 330px; }
  #heading .logo-Colecao { width: 300px; }
  #heading h1 { font-size: 2.8rem; margin-top: 10px; }
  #stamps .stamp { width: 280px; margin-top: -50px; margin-bottom: 0px; }
  #stamps .stamp-Escala { width: 110px; bottom: -40px; right: 480px; }

  #apresentacao .packshot { margin-top: -80px; margin-bottom: -50px; }
  #apresentacao .stamp { bottom: 100px; left: 50px; }
} /* 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 */