.ib-header { width: 100%; box-shadow: 0px 5px 15px #0000000D; background-color: #FFF; padding: 20px 0px 24px 0px; display: flex; flex-direction: column; gap: 24px; } .ib-header > .header-wrapper { max-width: 1200px; margin:0 auto; width: 100%; display:flex; flex-direction: column; gap:24px; align-items: center; justify-content: center; } .ib-header > .header-wrapper > .header-top { display:flex; justify-content: space-between; align-items: center; width: 100%; } .ib-header > .header-wrapper > .header-top > .header-left { display:flex; gap:22px; align-items: center; } .ib-header > .header-wrapper > .header-top > .header-left > button { display:flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 25px; color: #E31837; font-size: 22px; cursor:pointer; } .ib-header > .header-wrapper > .header-top > .header-left > form { position: relative; width: 246px; height: 46px; border-radius: 27px; background-color: #F1F1F1; } .ib-header > .header-wrapper > .header-top > .header-left > form > img { width: 20px; height: 20px; position: absolute; top:13px; left:18px; z-index: 1; } .ib-header > .header-wrapper > .header-top > .header-left > form > input { width: 246px; height: 46px; position: absolute; padding-left: 50px; border-radius: 27px; } .ib-header > .header-wrapper > .header-top > a { width: 160px; height: 55px; } .ib-header > .header-wrapper > .header-top > a > img { width: 160px; height: 55px; } .ib-header > .header-wrapper > .header-top > h1 { width: 160px; height: 55px; overflow: hidden; } .ib-header > .header-wrapper > .header-top > h1 > a { width: 160px; height: 55px; } .ib-header > .header-wrapper > .header-top > h1 > a > img { width: 160px; height: 55px; } .ib-header > .header-wrapper > .header-top > .header-right > ul { display:flex; align-items: center; gap:10px; } .ib-header > .header-wrapper > .header-top > .header-right > ul li > a { display:flex; justify-content: center; align-items: center; width: 38px; height: 38px; border-radius: 50px; background-color: #E31837; } .ib-header > .header-wrapper > .header-bottom { min-height: 23px; } .ib-header > .header-wrapper > .header-bottom > ul { display:flex; align-items: center; justify-content: center; gap:30px; } .ib-header > .header-wrapper > .header-bottom > ul li > a { font-family: 'RedditSans-Regular'; font-size: 18px; line-height: 23px; color: #181818; } .ib-menuAside { top: 0; min-height: 100vh; visibility: hidden; opacity: 0; width: 100%; position: fixed; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 100; background-image: linear-gradient(286deg,#000000ab, #000000ab); background-size: 100%; z-index: 3000; } .ib-header:hover .ib-main{ padding-top: 146px; } .ib-scroll-header.top-show{ width: 100%; } .top-show { position: fixed; top: 0; z-index: 1000; } .ib-radiosAside { display: grid; grid-template-columns: repeat(4,1fr); align-items: center; gap: 24px; } .ib-radiosAside > a > img { width: 50px; height: 50px; object-fit: contain; } .ib-menuAside.active{ animation: showMenu 0.2s ease-in 1 forwards; } .ib-menuAside.active>aside{ animation: showMenuAside 0.2s ease-in 1 forwards; } @keyframes showMenu { to { visibility: visible; opacity: 1 } } .ib-menuAside > aside { min-height: 100vh; visibility: hidden; transform: translateX(-100vw); padding: 20px 50px; max-width: 416px; width: 100%; overflow: hidden; max-height: 100vh; display: flex; flex-direction: column; gap: 20px; background: transparent linear-gradient(211deg, #FF783E 0%, #E31837 70%, #C41230 100%) 0% 0% no-repeat padding-box; position: relative; border-radius: 0px 30px 30px 0px; } @keyframes showMenuAside { to { visibility: visible; transform: translateX(0); } } .ib-menuAside > aside::after{ content: ""; position: absolute; bottom: 10px; width: 100%; height: 70px; left: 0; background: transparent linear-gradient(180deg, #E3183700 0%, #E31837 100%) 0% 0% no-repeat padding-box; } .ib-menuAside > aside > header{ display: flex; align-items: center; justify-content: space-between; } .ib-menuAside > aside > header img{ cursor: pointer; } .ib-menuAside > aside > header > a > img{ width: 175px; height: 60px; } .ib-menuAside > aside > .ib-searchAside{ display: flex; align-items: center; justify-content: space-between; background-color:#fff; gap: 12px; background: #FFFFFF 0% 0% no-repeat padding-box; border-radius: 50px; padding: 13px 0px 13px 18px; } .ib-menuAside > aside > .ib-searchAside > input{ width: 100%; } .ib-menuAside > aside > ul{ display: flex; flex-direction: column; gap: 12px; overflow-y: scroll; height: 100%; padding-bottom: 60px; } .ib-menuAside > aside > ul li:first-of-type{ font-weight: 700; opacity: 1; } .ib-searchImg{ width: 18px; height: 18px; cursor: pointer; } .ib-menuAside > aside > ul li{ font-size: 20px; cursor: pointer; letter-spacing: 0.2px; opacity: 0.9; color: var(--branco); width: 100%; display:flex; z-index: 4; align-items: center; justify-content: space-between; width: 100%; } .ib-menuAside > aside > ul li > a{ color: var(--branco); } .header-breadcrumb { width: 100%; height: 56px; border-radius: 0px 0px 16px 16px; background-color: #E31837; } .header-breadcrumb > .breadcrumb-wrapper { max-width: 1200px; margin:0 auto; width: 100%; height: 100%; display:flex; align-items: center; gap:15px; padding: 14px 0 14px 0; } .header-breadcrumb > .breadcrumb-wrapper a { font-family: 'RedditSans-Bold'; font-size: 34px; line-height: 15px; letter-spacing: 0.42px; color: #FFFFFF; } .header-breadcrumb > .breadcrumb-wrapper a > img { width: 22px; height: 18px; } .header-breadcrumb > .breadcrumb-wrapper span { width: 5px; height: 16px; color: #fff; } .summary-item-icon { width: 26px; height: 26px; border-radius: 14px; background-color: #ff783e; color: #FFF; cursor: pointer; display: flex; justify-content: center; align-items: center; padding: 7px; } .summary-item-icon-plus { width: 26px; height: 26px; } .summary-item-icon-minus { display:none; } .link-menu-lateral { width: 100%; } @media (max-width:769px) { .header-breadcrumb { z-index: 0; width: 100%; border-radius: 0 0 16px 16px; background-color: #e31837; height: 140px; } .header-breadcrumb > .breadcrumb-wrapper { max-width: 100%; margin:0 auto; width: 100%; display:flex; align-items: flex-end; gap:15px; padding: 14px 20px 14px 20px; } .header-breadcrumb > .breadcrumb-wrapper a { font-family: 'RedditSans-Bold'; font-size: 26px; line-height: 22px; letter-spacing: 0.26px; color: #FFFFFF; } .ib-header { width: 100%; min-height: 76px; border-radius: 0px 0px 12px 12px; background-color: #FFF; padding:unset; gap: 0; box-shadow: 0px 5px 15px #0000001A; } .ib-menuAside > aside{ padding: 10px 22px; } .ib-header > .header-wrapper { z-index: 1; position: absolute; height: 76px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; justify-content: flex-start; border-radius: 0px 0px 12px 12px; background: #FFFFFF 0% 0% no-repeat padding-box; } .ib-header > .header-wrapper > .header-top { display:flex; gap: 73.5px; align-items: center; padding: 14px 20px 18px 20px; justify-content: normal; } .ib-header > .header-wrapper > .header-top > .header-left { position: absolute; display:flex; gap:24px; align-items: center; height: 16px; } .ib-header > .header-wrapper > .header-top > .header-left > button { order:2; display:flex; justify-content: center; align-items: center; width: 20px; height: 16px; border-radius: unset; background-color: unset; color:#E31837; } .ib-header > .header-wrapper > .header-top > .header-left > form { position: relative; width: unset; height: unset; order:1; display: none; } .ib-header > .header-wrapper > .header-top > .header-left > form > img { position: static; width: 24px; height: 24px; } .ib-header > .header-wrapper > .header-top > .header-left > form > input { display:none; } .ib-header > .header-wrapper > .header-top > a { order:1; width: 132px; height: 44px; margin: auto; } .ib-header > .header-wrapper > .header-top > a > img { width: 132px; height: 44px; } .ib-header > .header-wrapper > .header-top > .header-right { display:none; } .ib-header > .header-wrapper > .header-top > .header-right > ul li > a { display:flex; justify-content: center; align-items: center; width: 38px; height: 38px; border-radius: 50px; background-color: #E31837; } .ib-header > .header-wrapper > .header-bottom { min-height: 21px; padding: 0px 0px 18px 20px; max-width: 100%; } .ib-header > .header-wrapper > .header-bottom > ul { display:flex; align-items: center; justify-content: unset; gap:18px; overflow: scroll; max-width: 100%; } .ib-header > .header-wrapper > .header-bottom > ul li > a { font-family: 'RedditSans-Regular'; font-size: 16px; line-height: 21px; color: #181818; white-space: nowrap; } .header-bottom { display: none; } .ib-header > .header-wrapper > .header-top > h1 { width: 132px; height: 44px; margin: auto; } .ib-header > .header-wrapper > .header-top > h1 > a > img { width: 132px; height: 44px; } }