/* HBRITTO */

/* GERAL */
html, body, .wrapper {
    height: 100%;
    width: 100%;
}
body {
    font-family: 'Open Sans', sans-serif;
}
.wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.nav {
    display: flex;
    list-style: none;
    padding: 0;
}
a {text-decoration: none;}

.container {
    height: 100%;
    max-width: 1364px;
    width: 100%;
}

/* HEADER */
header {
    align-items: center;
    background-color: #1B1B1B;
    display: flex;
    height: 100%;
    justify-content: center;
    padding-top: 60px;
    width: 100%;
}

header .container {
    display: flex;
    flex-direction: column;
}

header .topbar {
    align-items: center;
    display: flex;
    height: 80px;
    justify-content: space-between;
    width: 100%;
}

header .topbar .nav {
    align-items: center;
    justify-content: space-between;
    /* justify-content: center; */
    width: 42%;
}
header .topbar .nav a {
    
    color: #f1f1f1;
    letter-spacing: 2px;
    font-size: 15px;
}
header .topbar .nav a:hover {
    color: #E51A22;
}

header .topbar .btn-contact, header .topbar .btn-contact a {
    color: #E51A22;
    letter-spacing: 2px;
    font-size: 15px;
}

header .logo {
    width: 80.8px;
}

header .logo img {
    width: 100%;
}

header .wrapper-content {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
}

header .content {
    margin-top: -50px;
    display: flex;
    flex-direction: column;
    max-width: 880px;
    width: 100%;
}

header .content .text {
    color: #f1f1f1;
    display: flex;
    flex-direction: column;
    font-size: 150px;
    font-weight: 700;
    letter-spacing: -5px;
    line-height: 0.9;
    margin: 0;
    text-transform: uppercase;
}
header .content .text span {display: flex;}
header .content .text span .word-1 {order: 2;}
header .content .text span .word-1 .red {
    position: relative;
    color: #E51A22;
}
header .content .text span .word-1 .red::after {
    background-color: #E51A22;
    border-radius: 50%;
    content: " ";
    height: 88px;
    margin: auto;
    position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
    width: 70px;
}
header .content .text span .word-2 {
    color: #444444;
    font-weight: 600;
    letter-spacing: 72px;
    order: 1;
}

header .content p {
    align-self: flex-end;
    color: #f1f1f1;
    float: right;
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 4px 12px;
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
}

/* FOOTER */
footer {
    align-items: center;
    background-color: #f1f1f1;
    display: flex;
    height: 100px;
    justify-content: center;
    width: 100%;
}

footer .container {
    display: flex;
    justify-content: center;
}

footer .nav {
    align-items: center;
    font-weight: 600;
    justify-content: space-between;
    letter-spacing: 1px;
    width: 100%;
} 

/* RESPONSIVE */

@media screen and (max-width: 1440px) {
    /* Geral */
    .container {max-width: 1024px;}
    /* HEADER */
    header {padding-top: 30px;}
    header .topbar .nav a {font-size: 12px;}
    header .topbar .btn-contact {font-size: 12px;}
    /* FOOTER */
    footer .nav {font-size: 12px;}
  }

  @media screen and (max-width: 1200px) {
    /* Geral */
    .container {max-width: 900px;}
  }

  @media screen and (max-width: 900px) {
    /* Geral */
    .container {max-width: 90%;}
    header .content {max-width: 90%;}
    header .content .text {font-size: 90px;}
    header .content p {font-size: 14px;}
    header .content .text span .word-1 .red::after {width: 52px; height: 52px;}
  }

  @media screen and (max-width: 600px) {
    header .content .text {font-size: 60px;     letter-spacing: -2px;}
    header .content .text span .word-2 {letter-spacing: 32px;}
    span.line-2 {flex-direction: column;}
    header .content p {font-size: 16px; margin-top: 20px; margin-left: 0;}
    header .content .text span .word-1 .red::after {width: 34px; height: 34px;}
    header .topbar .nav {display: none;}
    footer {padding: 20px 0 10px; height: auto;}
    footer .nav {flex-direction: column; font-size: 12px;}
    footer .nav li {margin-bottom: 14px;}
    header .topbar .btn-contact {font-weight: 600;}
  }

  /* Helper classes */
  .hidden, .hide {display: none;}