#menu-institucional {
background: #fff;
}
#historia {
background: #fff;
padding-bottom: 3rem;
}
#historia .flex-grid {
display: flex;
flex-wrap: wrap;
}
#historia .flex-grid .left {
width: 20%;
}
#historia .flex-grid .left img {
margin-bottom: 1rem;
}
#historia .flex-grid .right {
width: 76%;
}
@media (max-width: 700px) {
#historia .flex-grid .left,
#historia .flex-grid .right {
width: 100%;
}
#historia .flex-grid .left {
margin-bottom: 2rem;
}
}
#linha-do-tempo {
background: #fff;
padding-bottom: 3rem;
}
#linha-do-tempo .b-container {
max-width: 840px;
}
#linha-do-tempo .menu {
display: inline-flex;
background: #e3e3e3;
border-radius: 255px;
}
#linha-do-tempo .menu li {
cursor: pointer;
font-family: Kanit;
padding: 1rem 2rem;
margin-right: 1rem;
border-radius: 255px;
transition: 0.3s;
}
#linha-do-tempo .menu li:hover {
color: var(--orange1);
}
#linha-do-tempo .menu li.ativo {
background: var(--orange1);
color: #fff;
}
#linha-do-tempo .menu li:last-child {
margin-right: 0;
}
#linha-do-tempo .timeline {
display: flex;
flex-direction: column;
align-items: center;
}
#linha-do-tempo .timeline li {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
}
#linha-do-tempo .timeline li:nth-child(2n) {
flex-direction: row-reverse;
}
#linha-do-tempo .timeline li .left {
padding-right: 3rem;
}
#linha-do-tempo .timeline li .right {
padding-left: 3rem;
}
#linha-do-tempo .timeline li:nth-child(2n) .left {
padding-right: 0;
padding-left: 3rem;
}
#linha-do-tempo .timeline li:nth-child(2n) .right {
padding-left: 0;
padding-right: 3rem;
}
#linha-do-tempo .timeline li .left,
#linha-do-tempo .timeline li .right {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200%;
width: 50%;
height: 200px;
padding-top: 2rem;
padding-bottom: 2rem;
box-sizing: border-box;
z-index: 3;
}
#linha-do-tempo .timeline li .left .image {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 2rem;
padding: 1rem 2rem;
}
#linha-do-tempo .timeline li .left .image img {
width: 100%;
}
#linha-do-tempo .timeline li .right .small-title {
font-family: Aller;
font-size: 16px;
font-weight: 700;
text-align: center;
color: var(--orange1);
margin-bottom: 1rem;
}
#linha-do-tempo .timeline li .sphere-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
#linha-do-tempo .timeline li .line-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
#linha-do-tempo .timeline li .line-grid .line {
height: 100%;
width: 1px;
background: var(--orange1);
}
#linha-do-tempo .timeline li .sphere-grid .sphere {
width: 24px;
height: 24px;
background: var(--orange1);
border-radius: 255px;
}
#linha-do-tempo .buttons-grid {
display: flex;
align-items: center;
justify-content: center;
}
#linha-do-tempo .buttons-grid .btn {
width: 42px;
height: 42px;
}
#linha-do-tempo .menu-grid {
display: flex;
justify-content: center;
}
@media (max-width: 920px) {
#linha-do-tempo .menu-grid {
justify-content: flex-start;
}
#linha-do-tempo .overflow-grid {
overflow-x: scroll;
padding-bottom: 1rem;
}
#linha-do-tempo .overflow-grid::-webkit-scrollbar {
height: 6px;
}
#linha-do-tempo .overflow-grid::-webkit-scrollbar-track {
background: #f1f1f1;
}
#linha-do-tempo .overflow-grid::-webkit-scrollbar-thumb {
background: var(--orange1);
}
#linha-do-tempo .overflow-grid::-webkit-scrollbar-thumb:hover {
background: var(--orange1-saturation);
}
}
@media (max-width: 650px) {
#linha-do-tempo .timeline li .left,
#linha-do-tempo .timeline li .right {
flex-direction: column;
width: 100%;
padding-right: 0;
padding-left: 2rem;
}
#linha-do-tempo .timeline li:nth-child(2n) .left,
#linha-do-tempo .timeline li:nth-child(2n) .right {
padding-right: 0;
padding-left: 2rem;
}
#linha-do-tempo .timeline li .left {
padding-bottom: 0;
}
#linha-do-tempo .timeline li .right {
padding-top: 0;
}
#linha-do-tempo .timeline li .sphere-grid {
box-sizing: border-box;
padding-left: 0.7rem;
justify-content: flex-start;
}
#linha-do-tempo .timeline li .line-grid {
box-sizing: border-box;
padding-left: 1.4rem;
justify-content: flex-start;
}
#linha-do-tempo .buttons-grid {
justify-content: flex-start;
}
}
#linha-tempo {
background: #fff;
padding-bottom: 3rem;
}
#linha-tempo .grid {
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
#linha-tempo .grid::-webkit-scrollbar {
height: 6px;
}
#linha-tempo .grid::-webkit-scrollbar-track {
background: #f1f1f1;
}
#linha-tempo .grid::-webkit-scrollbar-thumb {
background: var(--orange1);
}
#linha-tempo .grid::-webkit-scrollbar-thumb:hover {
background: var(--orange1-saturation);
}
#linha-tempo .grid ul {
display: inline-flex;
padding-bottom: 2rem;
}
#linha-tempo .grid ul li {
position: relative;
width: 160px;
display: flex;
flex-direction: column;
padding: 2rem;
}
#linha-tempo .grid ul li:after {
position: absolute;
content: "";
bottom: 0;
left: 2rem;
width: 232px;
margin-left: 4.5rem;
height: 1px;
background: var(--orange1);
}
#linha-tempo .grid ul li:last-child:after {
width: 0;
}
#linha-tempo .grid ul li .circle {
margin-left: 4.5rem;
background: var(--orange1);
height: 20px;
width: 20px;
border-radius: 255px;
margin-top: 2rem;
margin-bottom: -2.7rem;
}#banner {
background-color: var(--orange1);
}
#banner .overlay {
padding: 4.5rem 0 4.5rem;
background: #2e2e2e94;
}
#banner .b-container {
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#banner .breadcrumb {
text-align: center;
margin-bottom: 1rem;
}
#banner .breadcrumb,
#banner .breadcrumb a {
color: #fff;
}
#banner .breadcrumb a:hover {
color: var(--yellow);
}
#menu-institucional {
padding: 3rem 0 3rem;
z-index: 1;
}
#menu-institucional .i-menu ul {
width: 100%;
display: flex;
justify-content: space-between;
}
#menu-institucional .i-menu ul li {
width: 15%;
}
#menu-institucional .i-menu ul li a {
cursor: pointer;
background: #e3e3e3;
border-radius: 255px;
font-family: Kanit;
font-weight: 400;
font-size: 14px;
color: var(--black);
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
height: 42px;
padding: 0 1.5rem;
white-space: nowrap;
transition: 0.3s;
}
#menu-institucional .i-menu ul li a:hover {
color: var(--orange1);
}
#menu-institucional .i-menu ul li.current_page_item a{
font-weight: 700;
color: var(--orange1);
background: #fff;
border-radius: 255px;
box-shadow: 0 0 25px 0 rgb(0 0 0 / 10%);
}
@media (max-width: 1000px) {
#menu-institucional .i-menu ul {
flex-wrap: wrap;
}
#menu-institucional .i-menu ul li {
width: 30%;
margin-bottom: 1rem;
}
}
@media (max-width: 640px) {
#menu-institucional .i-menu ul li {
width: 47%;
}
}
@media (max-width: 450px) {
#menu-institucional .i-menu ul li {
width: 49%;
}
}
@media (max-width: 375px) {
#menu-institucional .i-menu ul li {
width: 100%;
}
}