/* ------------- ALL ------------- */
html, body { max-width: 100%; overflow-x: hidden; }
body { font-family: 'Noto Sans JP', sans-serif; background-color: #17171b; color: #fffefb; }

h1, h2, h3, h4, h5, h6 { font-family: 'Assistant', sans-serif; }
h1 { font-size: 4rem; font-weight: 800; line-height: 4.3rem; padding-bottom: 1rem; }
h2 { font-size: 3rem; font-weight: 800; line-height: 3.3rem; padding-bottom: 1rem; }
h3 { font-size: 2rem; font-weight: 800; line-height: 2.3rem; padding-bottom: 1rem; }
h4 { font-size: 1.4rem; font-weight: 700; line-height: 1.7rem; padding-bottom: 1rem; }
h5 { font-size: 1.1rem; font-weight: 600; line-height: 1.3rem; padding-bottom: 1rem; }
h6 { font-size: 1.1rem; font-weight: 600; line-height: 1.3rem; padding-bottom: 1rem; }

a { color: #e8c95b; text-decoration: none; border-bottom: 1px dotted #e8c95b;
    outline: 2px solid transparent;
    outline-offset: .5rem;
    transition: outline-offset .2s linear; }
a:hover { color: #17171b; background-color: #e8c95b; }
a:focus { color: #17171b; background-color: #e8c95b; outline: .125rem solid #08c; outline-offset: .125rem; }

i.icons { font-size: 1rem; vertical-align: -.2rem; text-rendering: optimizeLegibility; }
.sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* HEADER */
header h1 { color: #e8c95b; }
header p { color: #f2f2f2; font-size: 1.2rem; }

/* HERO */
.hero {
    width: 100vw; height: 100vh;
    display: flex;
    justify-content: center; align-items: center; text-align: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.3)), url(../img/bg-hero-ferramentas.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.hero-inner { width: 60vw; margin-top: -10%; }
.hero-inner-text { width: 80%; margin: 0 auto; }
.hero-inner-arrow { margin-top: 1.5rem; }
.hero-inner strong { color: #e8c95b; }
/* MAIN */

/* FOOTER */
footer { padding: .5rem; text-align: center; }
footer p { color: #ffffff; margin-bottom: 0; }
footer a { color: #e8c95b; text-decoration: none; border-bottom: 1px dotted #e8c95b; }
footer a:hover { color: #17171b; background-color: #e8c95b; }
footer a:focus { color: #17171b; background-color: #e8c95b; outline: .125rem solid #e8c95b; outline-offset: .125rem; }

/* ------------- MEDIA QUERIES ------------- */

@media (max-width: 1399.98px) {
    h1 { font-size: 4rem; font-weight: 800; line-height: 4.3rem; padding-bottom: 1rem; }
}
@media (max-width: 1199.98px) {
    h1 { font-size: 3.5rem; font-weight: 800; line-height: 3.8rem; padding-bottom: 1rem; }
}
@media (max-width: 991.98px) {
    h1 { font-size: 3rem; font-weight: 800; line-height: 3.3rem; padding-bottom: 1rem; }
    .hero-inner { width: 80vw; margin-top: -5%; }
    .hero-inner-text { width: 90%; margin: 0 auto; background-color: rgba(6, 6, 6, 0.3); padding: .5rem; border-radius: 2rem; }
    header p { color: #f2f2f2; font-size: 1.1rem; }
}
@media (max-width: 767.98px) {
    h1 { font-size: 2.5rem; font-weight: 800; line-height: 2.8rem; padding-bottom: 1rem; }
    .hero-inner { width: 80vw; margin-top: -10%; }
    header p { color: #f2f2f2; font-size: .9rem; }
}
@media (max-width: 575.98px) {
    h1 { font-size: 2rem; font-weight: 800; line-height: 2.2rem; padding-bottom: 1rem; }
}

/* ------------- PRINT ------------- */
@media print {
    *,
    *:before,
    *:after { background: transparent !important; color: #000 !important; -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; }
    a, a:visited { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    a[href^="#"]:after,
    a[href^="javascript:"]:after { content: ""; }
    
    pre { white-space: pre-wrap !important; }
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    
    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }

    main p, main ul li, main ol li, footer p { font-size: 0.8rem; }
    cite { font-size: .8rem; font-weight: 700; color:#441214; }
    h1 { font-size: 3rem; }
    h1 span { line-height: .5rem; }
    h1 small { font-size: 1.8rem; }
    h2 { font-size: 1.8rem; }
    h2.principio { font-size: 1.5rem; line-height: 1.5rem; margin-top: 3rem; margin-bottom: .5rem; }
    h3 { font-size: 1.2rem; }

    .no-print { display: none; }
  }