<style>body {
    overflow: auto;
    font-family: "Rubik";
}

.path {
    cursor: pointer;
}

.main .main-page-header-image #header-alunbrig span {
    display: none;
}

.main>div h1 {
    padding: 0px 20px 40px 0px;
}

.main .main-page-header-image .header-preview span.second-title-wrapper {
    position: relative;
}

.main .main-page-header-image .header-preview {
    height: 555px;
    min-height: 100%;
    min-width: 100%;
    position: relative;
    top: -28px;
    left: 0;
    background-size: contain !important;
}

.main .main-page-header-image .header-preview span.title-wrapper {
    display: none;
}

#home>main>div.page-container.alunbrig.content-page>div.main>div.container {
    /*max-width: 700px !important;*/
    width: 100% !important;
}

#home>main>div.page-container.alunbrig.content-page>div.main>div.header-image {
    display: none;
}

* {
    outline: none;
}

.header-image {
    display: none;
}

.main .main-page-header-image .header-preview span.second-title-wrapper {
    position: relative;
}

.main #header-alunbrig {
    display: none;
}

.container-display-grid {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 470px;
    grid-gap: 10px;
}

.container-display-grid-div {
    display: flex;
    justify-content: center;
    padding: 0;
}

.container-display-grid img {
    align-self: center;
}

.img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    padding: 0px;
}

/* Variaveis CSS */

:root {
    --roxo-advate: #5E166D;
    --laranja-advate: #F48100;
    --branco: #ffffff;
    --cinza-escuro: #5B6770;
    --lavanda-advate: #E6DBE8;
}

/* Classes Gerais de Cores e Estilos */

.texto-branco {
    color: var(--branco) !important;
}

.texto-roxo-advate {
    color: var(--roxo-advate) !important;
}

.fundo-roxo-advate {
    background: var(--roxo-advate) !important;
}

.texto-laranja-advate {
    color: var(--laranja-advate) !important;
}

.fundo-laranja-advate {
    background: var(--laranja-advate) !important;
}

.texto-laranja-advate {
    color: var(--laranja-advate) !important;
}

.fundo-laranja-advate {
    background: var(--laranja-advate) !important;
}

.texto-lavanda-advate {
    color: var(--lavanda-advate) !important;
}

.fundo-lavanda-advate {
    background: var(--lavanda-advate) !important;
}

.texto-cinza-escuro {
    color: var(--cinza-escuro) !important;
}

.fundo-cinza-escuro {
    background: var(--cinza-escuro) !important;
}

.sublinhado {
    text-decoration: underline !important;
}

.all-caps {
    text-transform: uppercase !important;
}

p.texto-legenda {
    font-size: 0.8em;
    line-height: 1.5em;
}

/* Button Grid Home */

.button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: max-content;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin: 20px 0 70px;
}

.button-item button {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 310px;
    padding: 30px 30px 10px;
    margin: 0;
    border: 0px;
    text-align: left;
    cursor: pointer;
    color: white;
    width: 100%;
}

.button-item button .button-conteudo ul {
    padding: 0 !important;
}

.button-item button .button-conteudo ul li::before {
    color: var(--cinza-escuro) !important;
}

.button-item button .button-conteudo {
    line-height: 1.5em;
    text-align: center;
    color: var(--cinza-escuro);
}

.button-item .button-titulo h3 {
    font-size: 1.3em;
    text-align: center;
    padding: 0;
    margin: 0;
    font-weight: 700;
    color: var(--roxo-advate) !important;
}

.button-item button hr {
    border: 2px solid var(--roxo-advate);
    margin: 20px auto 40px;
    background: #5E166D;
}

#mapa {
    display: block;
}

#estado {
    display: none;
}

#hemocentros {
    width: 45%;
}

/* Imagem Full-width */

.imagem-full-width {
    width: 100%;
    height: auto;
}

/*  Claiming Produto  */

.claiming-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100vw !important;
    left: 0;
    margin: -130px 0 40px;
    background-color: var(--roxo-advate) !important;
}

.claiming-content {
    width: 85%;
    max-width: 1100px;
    padding: 40px 20px 20px
}

.claiming-content p {
    color: white;
    font-weight: 600;
    font-size: 24px;
    text-align: center;
    line-height: 26px;
}

/* Botões Internos de Seção e Botão de Bula (Color-Block)*/

/*----- retirar estilo default de color-block*/

.color-blocks {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.color-blocks>div section a {
    background-image: none;
}

.color-blocks>div section * {
    padding: 0;
    margin: 0
}

.color-blocks>div section a strong {
    display: none
}

.color-blocks>div section a span:hover {
    opacity: 1;
}

.color-blocks>div section a:hover>span {
    transform: none
}

.color-blocks>div section a>span {
    padding: 0px;
}

.color-blocks>div section a>span {
    width: 100% !important;
}

.color-blocks>div section {
    border-radius: 0px;
    display: flex;
}

.color-blocks>div section a span h3 {
    color: var(--branco);
    text-align: center;
    padding: 50px 30px;
    font-weight: 600;
    font-size: 0.8em;
}

.color-blocks>div section {
    border-radius: 4px;
}

.color-blocks>div {
    width: 500px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* Estilo Botões Internos (selecionar 1ª cor em 'Visual > link color' do bloco episerver) */

.color-blocks>div section.color1 {
    width: 85%;
}

/* Estilo Botão Bula (selecionar 5ª cor em 'Visual > link color' do bloco episerver) */

.color-blocks>div section.color5 {
    margin-top: 50px;
}

/*  Spot Button  */

.big-links {
    margin-bottom: 40px;
}

.big-links>h3 {
    font-weight: 700 !important;
    font-size: 2.2em !important;
    margin-top: 0px;
}

.big-links>.text-link {
    margin-top: -50px;
    line-height: 1.5em !important;
    font-size: 2.0em !important;
    font-weight: normal !important;
}

.big-links>.text-link:hover {
    color: var(--laranja-advate) !important;
}

.big-links a.right-link:hover {
    background-color: var(--laranja-advate) !important;
}

.big-links.active-link a.right-link {
    background-color: var(--laranja-advate) !important;
}

.big-links.active-link {
    border-color: var(--laranja-advate) !important;
}

.big-links.active-link a.text-link {
    color: var(--laranja-advate) !important;
}

.spot-botao-1linha {
    margin-bottom: -30px;
}

/* Texto RDC96 */

.rdc96>a {
    color: var(--roxo-advate);
}

.rdc96>a:hover {
    color: var(--roxo-advate);
}

/* Minibula Home  */

.page-container.alunbrig.section-page>.references>.container {
    max-width: 950px;
}

.references>.container {
    max-width: 670px;
}

.contraindicacoes {
    margin-top: 40px;
    border: solid 1px var(--cinza-escuro);
    padding: 20px 60px;
}

.minibula {
    width: 100% !important;
}

/* Correções Spot Blocks de Materiais de Referência  */

.resource>div:nth-child(2)>p:nth-child(2) {
    display: none;
}

.resource>div:nth-child(2)>p:nth-child(3) {
    max-width: 65%;
    font-size: 0.8em;
    line-height: 1.5em;
}

.resource>div h3 {
    max-width: 80%;
}

/* Bloco Check Lateral Feiba*/

.box-imagem-lateral-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}

.box-imagem-lateral-item {
    display: flex;
    flex-direction: row;
    min-width: 100%;
    padding: auto 50px;
}

.box-imagem-lateral-conteudo {
    border: 2px solid #FFEACB;
    border-radius: 15px;
    padding: 25px 30px;
    padding-left: 50px;
    margin-left: 25px;
    width: 100%;
}

.box-imagem-lateral-conteudo>p {
    font-size: 1.3em;
    line-height: 1.5em;
    margin: 0 auto;
    padding: 0;
}

.box-imagem-lateral-item img {
    position: absolute;
    align-self: center;
}

/* Bloco Box Fundo Colorido*/

.box-fundo-colorido-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}

.box-fundo-colorido-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    padding: 40px 30px;
    margin: 30px auto;
    border-radius: 15px;
}

/* Box Multi Etapas */

.box-multi-etapa-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    margin-bottom: 50px;
}

.imagem-topo-box {
    margin-bottom: -52px;
    z-index: 2;
}

.com-imagem-topo {
    padding-top: 60px !important;
}

.box-multi-etapa-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    min-width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 15px;
}

.box-multi-etapa-imagem-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0;
    margin: 0;
    margin-left: 60px;
    border-radius: 15px;
}

.box-multi-etapa-sessao {
    margin: 0;
    padding: 40px 50px;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    align-items: center;
    max-width: 100vw;
}

.box-multi-etapa-imagem-sessao {
    margin: 0;
    padding: 40px 50px 40px 20px;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    align-items: center;
}

.box-multi-etapa-imagem-lateral {
    position: absolute;
    width: 80px;
    height: auto;
    margin-left: -60px;
}

.seta-pos-sessao>p {
    font-size: 65px;
    transform: scaleX(1.5) scaleY(0.7);
    position: absolute;
    margin: -10px 0 0 -28px;
    padding: 0;
    user-select: none;
}

.box-simples-linha {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.box-simples-coluna {
    flex-basis: 35%;
    flex-grow: 1;
}

.box-simples-coluna-borda {
    border: 2px solid #5E166D;
    padding: 30px;
    border-radius: 15px;
}

.bola-z-index-1 {
    z-index: 1;
    width: 150px;
    height: 150px;
    border: 2px solid #D72526;
    margin-bottom: -142px;
    border-radius: 50%;
    background: white;
}

.bola-xx-xy {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #D489E9;
    padding-top: 44px;
    padding-left: 35px;
}

.hemofilia-flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: center;
}

.hemofilia-flex-items:nth-child(1) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: center;
    order: 0;
}

.hemofilia-flex-items:nth-child(2) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: center;
    order: 0;
}

.hemocentro-flex-container-linha {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: normal;
    align-items: normal;
    align-content: normal;
    width: 100%;
}

.hemocentro-flex-items-linha {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    padding: 5px;
}

.hemocentro-flex-container-coluna {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: normal;
    align-items: normal;
    align-content: normal;
}

.hemocentro-flex-items-coluna {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}

#hemocentros {
    width: 45% !important;
    padding-left: 30px;
}

#mapa {
    display: block;
}

#estado {
    display: none;
}

.hemocentro-flex-items-linha {
    padding: 5px 15px;
}

.hemocentro-flex-items-coluna {
    padding: 0px 10px;
}

.estados {
    display: none;
    overflow-y: scroll;
    padding: 20px;
    height: 400px !important;
}

@media only screen and (max-width: 1024px) {
    .page-container {
        width: 100% !important;
    }
    #hemocentros {
        width: 90% !important;
    }
    .hr {
        width: 90% !important;
        padding: 0px 0px 0px 25px !important;
    }
}

@media only screen and (max-width: 737px) {
    .box-multi-etapa-item-cuidados-no-armazenamento {
        margin: 44px;
    }
    .box-multi-etapa-sessao-padding-10 {
        padding: 10px 10px !important;
    }
    .box-multi-etapa-sessao-justify {
        text-align: justify !important;
    }
    .hemofilia-flex-container-hemofilia-column {
        flex-direction: column !important;
    }
    .hemofilia-flex-items-padding-20 {
        padding: 20px !important;
        padding-right: 15px !important;
    }
    .box-fundo-colorido-item-padding {
        padding: 10px 20px !important;
    }
    .text-justify {
        text-align: justify !important;
    }
    .width-90p {
        width: 90% !important;
    }
    .padding-40-20 {
        padding: 40px 20px !important;
    }
    .padding-0 {
        padding: 0px !important;
    }
    .padding-5 {
        padding: 5px !important;
    }
    .margin-bottom-10 {
        margin-bottom: 10px !important;
    }
    .padding-20 {
        padding: 20px !important;
    }
    .margin-top-0 {
        margin-top: 0px !important;
    }
    .margin-bottom-0 {
        margin-bottom: 0px !important;
    }
    .margin-top-m120 {
        margin-top: -120px !important;
    }
    .font-size24 {
        font-size: 24px !important;
    }
    .width-20 {
        width: 20% !important;
    }
    #head-div {
        width: 90% !important;
    }
    .page-container {
        width: 90% !important;
    }
    .box-multi-etapa-sessao {
        padding: 20px 0px !important;
    }
    #hemocentros {
        width: 100% !important;
    }
    .hemocentro-flex-items-linha {
        padding: 5px 15px;
    }
    .hemocentro-flex-items-coluna {
        padding: 0px 10px;
    }
    .hr {
        width: 90% !important;
        padding: 0px 0px 0px 25px !important;
    }
}

@media only screen and (max-width: 555px) {
    #mapa {
        display: none;
    }
    #estado {
        display: block;
    }
    #hemocentros {
        width: 100% !important;
        height: 120vh !important;
        /*overflow-y: scroll;*/
    }
    .estados {
        height: 400px !important;
        /*overflow-y: scroll;*/
    }
}

@media only screen and (max-width: 320px) {
    #hemocentros {
        width: 111% !important;
        margin-left: -20px !important;
        height: 120vh !important;
        /*overflow-y: scroll;*/
    }
    .estados {
        height: 400px !important;
        /*overflow-y: scroll;*/
    }
}

</style>