/* ================================== HOROSCOPO =============================== */
.container-cx-horoscopo { overflow: hidden; margin-bottom: 10px; width: 99%; padding: 30px 20px 50px; -webkit-box-shadow: 1px 2px 2px 0px rgba(208,208,208,1); -moz-box-shadow: 1px 2px 2px 0px rgba(208,208,208,1); box-shadow: 1px 2px 2px 0px rgba(208,208,208,1); }

.horoscopo-left { float: left; width: 400px; }
.conteudo-signos { margin-bottom: 20px; }
.conteudo-signos h4 { color: #CC217A; font-family: 'oswald-regular'; font-size: 18px; line-height: 24px; text-transform: uppercase; margin-bottom: 15px; }
.conteudo-signos li { display: none; }
.conteudo-signos li:first-child { display: block }
.conteudo-signos p { font-size: 19px; line-height: 26px; font-family: 'PT Serif'; }
.conteudo-signos p a { color: #CC217A; }
#data-previsao { font-family: 'oswald-light'; font-size: 17px; line-height: 25px; color: #444; overflow: hidden; clear: both; }
#data-previsao span { float: left; }
#data-previsao a { display: inline-block; margin-left: 10px; }

.horoscopo-right { float: right; width: 220px; }
.horoscopo-right p { color: #CC217A; font-family: 'oswald-light'; font-size: 20px; line-height: 24px; margin-bottom: 5px; }
.lista-signos li { display: block; float: left; width: 25%; position: relative; cursor: pointer; }
.lista-signos li a { display: inline-block; margin: 0 auto; font-size: 0px; width: 50px; height: 50px; background-repeat: no-repeat; background-size: 100%; background-position: center; outline: none;  -webkit-transition: background .5s; -moz-transition: background .5s; -o-transition: background .5s; transition: background .5s; }
.lista-signos li span { position: absolute; z-index: 20; display: inline-block; text-align: center; background: #CC217A; color: #fff; top: 64px; left: 0; padding: 0px 0; font-size: 16px; line-height: 22px; text-transform: lowercase; font-family: 'oswald-light'; width: 70px; margin-left: -8px; cursor: pointer }

/* Icons Horoscopo */
.icon-peixes { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-peixes.png'); }
.icon-aquario { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-aquario.png'); }
.icon-capricornio { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-capricornio.png'); }
.icon-sagitario { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-sagitario.png'); }
.icon-virgem { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-virgem.png'); }
.icon-leao { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-leao.png'); }
.icon-cancer { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-cancer.png'); }
.icon-gemeos { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-gemeos.png'); }
.icon-escorpiao { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-escorpiao.png'); }
.icon-libra { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-libra.png'); }
.icon-touro { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-touro.png'); }
.icon-aries { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-aries.png'); }

/* Hover Icons Horoscopo */
.icon-peixes:hover, .icon-peixes:active, .signo-ativo.icon-peixes { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-peixes-hover.png'); }
.icon-aquario:hover, .icon-aquario:active, .signo-ativo.icon-aquario { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-aquario-hover.png'); }
.icon-capricornio:hover, .icon-capricornio:active, .signo-ativo.icon-capricornio { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-capricornio-hover.png'); }
.icon-sagitario:hover, .icon-sagitario:active, .signo-ativo.icon-sagitario { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-sagitario-hover.png'); }
.icon-virgem:hover, .icon-virgem:active, .signo-ativo.icon-virgem { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-virgem-hover.png'); }
.icon-leao:hover, .icon-leao:active, .signo-ativo.icon-leao { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-leao-hover.png'); }
.icon-cancer:hover, .icon-cancer:active, .signo-ativo.icon-cancer { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-cancer-hover.png'); }
.icon-gemeos:hover, .icon-gemeos:active, .signo-ativo.icon-gemeos { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-gemeos-hover.png'); }
.icon-escorpiao:hover, .icon-escorpiao:active, .signo-ativo.icon-escorpiao { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-escorpiao-hover.png'); }
.icon-libra:hover, .icon-libra:active, .signo-ativo.icon-libra { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-libra-hover.png'); }
.icon-touro:hover, .icon-touro:active, .signo-ativo.icon-touro { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-touro-hover.png'); }
.icon-aries:hover, .icon-aries:active, .signo-ativo.icon-aries { background-image: url('https://www.opovo.com.br/divirtaseimages/imgs/divirtase/horoscopo/icon-aries-hover.png'); }

@media (max-width: 1045px) and (min-width: 767px) {
    .horoscopo-left, .horoscopo-right {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .container-cx-horoscopo {
        box-shadow: none;
        width: 100%;
        padding: 10px 0 0;
    }
}

@media (max-width: 700px) {
    .horoscopo-left, .horoscopo-right {
        width: 100%;
    }
}

@media (max-width: 585px) {
    .container-cx-horoscopo {
        display: flex;
        flex-direction: column-reverse;
    }
    .horoscopo-left {
        margin-top: 30px;
    }
    .conteudo-signos h4 {
        margin-bottom: 10px;
    }
    .tit-capa {
        margin-bottom: 10px;
    }
}