*, *:focus, *:hover, *:active {outline: none !important; } html, body {min-width: 220px; } html {height: 100%;scroll-behavior: smooth;scroll-padding-top: 6.8333333333rem;font-size: 13px; } @media (min-width: 576px) {html {font-size: 14px;} } @media (min-width: 768px) {html {font-size: 15px;} } @media (min-width: 992px) {html {font-size: 16px;} } @media (min-width: 1220px) {html {font-size: 17px;} } @media (min-width: 1480px) {html {font-size: 18px;} } html p, html li, html a, html .card-text, html label, html .btn {font-size: 1.2222222222rem; } @media (min-width: 768px) {html p, html li, html a, html .card-text, html label, html .btn {font-size: 1rem;} } body {display: flex;flex-direction: column;min-height: 100%;min-width: 270px;line-height: 1.5; } .main {flex-grow: 1; } @media (max-width: 767.98px) {.main {margin-top: 4.8888888889rem;} } .main .side-contact {position: fixed;z-index: 900;background: var(--primary);right: 0;top: 30%;transform: rotate(270deg);color: var(--white);display: flex;align-items: center;transform-origin: 100% 100%;border-radius: 0.2222222222rem 0.2222222222rem 0 0; } .main .side-contact:hover {background-color: var(--black);text-decoration: none; } .main .side-contact:hover span {background-color: rgba(0, 0, 0, 0.8); } .main .side-contact:hover span svg {transform: rotate(450deg);transition: transform 0.5s; } .main .side-contact p {margin-bottom: 0;padding: 0 1.1111111111rem;font-weight: bold; } .main .side-contact span {padding: 0.5555555556rem 1.1111111111rem;background-color: var(--secondary);border-radius: 0.2222222222rem 0 0 0.2222222222rem; } .main .side-contact span svg {transform: rotate(90deg);width: 1.1111111111rem;transition: transform 0.5s; }