.ib-page.horoscopo { margin: 22px auto 63px; padding: 0 20px; max-width: 1240px; } .ib-page.horoscopo>h2 { color: var(--vermelhoPadrao); font-size: 42px; line-height: 48px; font-weight: 700; text-transform: uppercase; flex-wrap: wrap; gap: 10px; align-items: center; display: flex; } span#data-hoje{ font-size: 14px;; } /*AREA TITULO*/ .mw-titulo-horoscopo { display: flex; flex-direction: column; gap: 20px; } /*AREA TITULO TEXTO*/ .mw-titulo-text { display: flex; flex-direction: row; gap: 20px; align-items: center; } .mw-titulo-text h2 { font-weight: 700; font-size: 40px; line-height: 46px; } .mw-titulo-text span { color: #757575; border-left: 1px solid #757575; font-weight: 400; font-size: 21px; line-height: 25px; padding-left: 20px; } /*AREA TITULO LOGO*/ .mw-titulo-horoscopo figure { display: flex; flex-direction: row; align-items: center; gap: 10px; width: fit-content; } .mw-titulo-horoscopo figure span { font-size: 16px; line-height: 20px; } .mw-titulo-horoscopo figure img { width: 130px; } /*SEÇÃO DOS ICONES*/ .mw-signos-icons { display: flex; justify-content: center; gap: 30px; margin: 30px 0; align-items: center; } .mw-signos-icons a img { max-width: 40px; width: 100%; height: 40px; } .mw-signos-icons a span { color: var(--vermelhoPadrao); font-weight: 700; } .mw-signos-icons a { display: flex; flex-direction: column; gap: 10px; align-items: center; } .mw-signos-icons a img:hover { transition: all .4s; } .mw-signos-icons a img:hover { transform: scale(1.2); } .mw-signos-icons a img { max-width: 40px; width: 100%; height: 40px; } /*SEÇÃO DE INFORMAÇÕES*/ .mw-signos-infor { display: flex; flex-direction: column; gap: 30px; } .mw-signos-card { display: flex; flex-direction: row; gap: 30px; align-items: center; padding: 32px 0 0 0; border-top: 1px solid #D9D9D9; } .mw-signos-card:last-of-type { padding-bottom: 32px; border-bottom: 1px solid #d9d9d9; } .mw-signos-card figure img { width: 100%; max-width: 40px; } .mw-signos-text { display: flex; flex-direction: column; gap: 10px; } .buttons-personare { display: flex; flex-direction: row; gap: 10px; align-items: center; } .mw-signos-text h3 { font-weight: 700; font-size: 21px; line-height: 26px; } .mw-signos-text h3 span { font-size: 16px; font-weight: 400; color: #999999; margin-left: 10px; } .mw-signos-text h4 { font-size: 16px; font-weight: 600; line-height: 22px; color: #333333; } .mw-signos-text button { border: 1px solid var(--vermelhoPadrao); font-size: 14px; color: var(--vermelhoPadrao); border-radius: 10px; padding: 13px 40px; width: fit-content; text-align: center; transition: all 0.1s; cursor: pointer; } .mw-signos-text button:hover { background-color: var(--vermelhoPadrao); } .mw-signos-text button:hover a { color: #fff !important; } .mw-signos-text button a { color: var(--vermelhoPadrao); } .mw-signos-text button a strong { font-weight: 700; } .mw-signos-card figure { width: 80px; height: 80px; min-width: 80px; display: flex; border-radius: 50%; box-shadow: 0.3px 2.4px 22.5px rgba(0, 0, 0, 0.18), 2px 19px 180px rgba(0, 0, 0, 0.09); justify-content: center; align-items: center; } .mw-signos-text header { display: none; align-items: center; gap: 16px; } .mw-signos-text header figure img { width: 100%; max-width: 24px; } .mw-signos-text header figure { width: 48px; height: 48px; min-width: 48px; display: flex; border-radius: 50%; box-shadow: 0.3px 2.4px 22.5px rgba(0, 0, 0, 0.18), 2px 19px 180px rgba(0, 0, 0, 0.09); justify-content: center; align-items: center; } @media (max-width: 1000px) { .mw-page-horoscopo { margin: 40px 20px !important; } .mw-signos-icons { max-width: 100%; overflow-x: scroll; justify-content: flex-start; } } @media (max-width: 700px) { .mw-signos-text>h3, .mw-signos-card figure { display: none; } .mw-signos-text header { display: flex; align-items: center; gap: 16px; } .mw-titulo-text { flex-direction: column; align-items: flex-start; } .mw-titulo-text span { padding-left: 0; border-left: none; } } @media (max-width: 500px) { .buttons-personare { flex-direction: column; } .mw-signos-text button { width: 100%; } } @media (max-width: 400px) { .mw-signos-card { flex-direction: column; } .mw-signos-text h4 { text-align: justify; } }