@font-face {font-family: 'intro1'; src: url('../style/fonts/intro1.woff2') format('woff2'), url('../style/fonts/intro1.woff') format('woff'), url('../style/fonts/intro1.ttf') format('truetype'); font-weight: normal; font-style: normal;}
.horoscope{overflow: hidden;margin-bottom: 30px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;padding: 20px 7px 20px 10px;box-sizing: border-box;background-color: #061733;color: #ffffff;background-image: url("../img/vertical.jpg");background-size: cover;}
.horoscope-title{text-align: center;font-size: 30px;font-family: 'intro1';padding-right: 10px;margin-top: 15px;}
.horoscope-today{text-align: center;padding-right: 10px;font-size: 17px;margin-top: -5px;margin-bottom: 10px;}
.horoscope-conte{display: flex;flex-wrap: wrap;}
.horoscope-conte-li{display: flex;width: 16.33333333333%;padding-right: 0px;box-sizing: border-box;}
.horoscope-conte-li > button{border: none;background: none;display: flex;flex-direction: column;color: #ffffff;align-items: center;padding-bottom: 15px;transition: background 0.5s ease;-webkit-transition: background 0.5s ease;-moz-transition: background 0.5s ease;-o-transition: background 0.5s ease;cursor: pointer;}
.horoscope-conte-li > button:hover{background-color: rgba(255, 255, 255, 0.15);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.horoscope-conte-li > button > img{width: 100%;}
.horoscope-name{font-size: 15px;font-weight: bold;}
.horoscope-date{font-size: 10px;opacity: 0.7;margin-top: 2px;}
.info-horoscope{padding: 20px 17px 20px 20px;text-align: center;}
.button-horo{text-decoration: none;display: flex;padding: 0px 15px;box-sizing: border-box;color: #292929;height: 45px;align-items: center;font-size: 18px;margin-right: 2px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;background-color: #ffcb09;}
.button-horo:hover{background-color: #ffd94d;}
.horoscope-button{display: flex;justify-content: center;margin-bottom: 20px;}
#popup-horoscope{position: fixed;top: 0;left: 0;display: flex;width: 100%;height: 100%;z-index: 999;flex-direction: column;align-items: center;background-color: rgba(0, 0, 0, 0.4);padding: 0px 30px;box-sizing: border-box;}
.popup-horoscope{max-width: 770px;width: 100%;background-color: #ffffff;box-sizing: border-box;box-shadow: 0px 10px 30px rgba(0,0,0,0.2);-webkit-border-radius: 10px;-webkit-border-bottom-right-radius: 7px;-webkit-border-bottom-left-radius: 7px;-moz-border-radius: 10px;-moz-border-radius-bottomright: 7px;-moz-border-radius-bottomleft: 7px;border-radius: 10px;border-bottom-right-radius: 7px;border-bottom-left-radius: 7px;margin: 70px 0px;}
.popup-horoscope-top{background-color: #061733;color: #ffffff;background-image: url(../img/horizon.jpg);display: flex;padding: 5px;position: relative;-webkit-border-top-left-radius: 7px;-webkit-border-top-right-radius: 7px;-moz-border-radius-topleft: 7px;-moz-border-radius-topright: 7px;border-top-left-radius: 7px;border-top-right-radius: 7px;}
.popup-horoscope-forecast{opacity: 0.4;font-size: 14px;margin-top: 25px;margin-bottom: 4px;}
.popup-horoscope-title{font-size: 30px;font-family: 'intro1';padding-right: 20px;}
#close-popup-horoscope{height: 35px;width: 35px;border: none;padding: 10px;background: none;position: absolute;right: 0;top: 0;opacity: 0.3;transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;cursor: pointer;margin-top: 5px;margin-right: 5px;}
#close-popup-horoscope:hover{opacity: 0.9;}
.popup-horoscope-sort{display: flex;margin-top: 5px;margin-bottom: 25px;flex-wrap: wrap;}
.popup-horoscope-sort > button{border: none;background: none;color: #ffffff;height: 35px;margin-right: 5px;padding: 0px 15px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;text-decoration: underline;font-size: 14px;cursor: pointer;margin-bottom: 5px;}
.popup-horoscope-sort > button:hover{text-decoration: none;background-color: rgba(255, 255, 255, 0.15);}
.popup-horoscope-sort > button.active{background-color: #4cae51;text-decoration: none;}
#popup-horoscope-text{padding: 30px 30px 15px;overflow-y: scroll;height: 300px;}
#popup-horoscope-text > p{margin-bottom: 15px;font-size: 17px;text-align: justify;}
@media screen and (min-width: 0px) and (max-width: 500px), only screen and (min-device-width: 0px) and (max-device-width: 500px){  .popup-horoscope{margin: 0px;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;box-shadow: none;overflow: auto;}  #popup-horoscope{height: 100%;position: fixed; padding: 0px;}.popup-horoscope-top{flex-direction: column;align-items: center;}  .popup-horoscope-top-right{flex-direction: column;align-items: center;display: flex;text-align: center;}  .popup-horoscope-title{padding: 0px 20px;}.popup-horoscope-sort{justify-content: center;} .popup-horoscope-top{-webkit-border-top-left-radius: 0px;-webkit-border-top-right-radius: 0px;-moz-border-radius-topleft: 0px;-moz-border-radius-topright: 0px;border-top-left-radius: 0px;border-top-right-radius: 0px;}}