/* reset by rafaux */
* { margin: 0px; padding: 0px; border: 0px; font-weight: normal; font-size: 100%; list-style: none; line-height: 1; outline: 0px; background: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; }

/* var */
:root { --black: #222; --gray: #555; --red: #B8013F; --blue: #3568D9; --lightblue: #5E95B7; --orange: #FF9300; --purple: #BD0CF2; --green: #12BA46; --yellow: #F9B402; --lemon: #6fcc41; }

/* global class */
.block { position: relative; float: left; width: 100%; height: auto; }
.container { display: block; width: 1280px; height: auto; margin: 0px auto; }
.left { display: inline-block; width: calc(60% - 16px); height: auto; margin-right: 16px; vertical-align: top; }
.right { display: inline-block; width: calc(40% - 4px); height: auto; }
h1, h2, h3 { font-family: 'Libre Baskerville', serif; }

/* base */
a { color: var(--black); text-decoration: none; transition: all .5s ease; }
body { background-color: #F2F2F2; color: var(--black); font: normal 15px 'Nunito Sans', sans-serif; }
input, textarea, select, button { font: normal 15px 'Nunito Sans', sans-serif; appearance: none; -webkit-appearance: none; border-radius: 0px; cursor: pointer; }
input[type=submit], button { transition: all .5s ease; }

/* header */
#header { height: 148px; padding-top: 50px; }
#header span.logo { position: absolute; top: 50%; left: 50%; width: 70px; height: auto; transform: translate(-50%, -50%); }
#header span.logo img { display: block; width: 70px; height: auto; }
#header span.menu { float: left; width: auto; margin-top: 13px; cursor: pointer; }
#header span.menu b { position: relative; float: left; width: 25px; height: 25px; border-top: 2px solid var(--black); transition: all .5s ease; }
#header span.menu b::before { position: absolute; top: 7px; left: 0px; width: 100%; height: 2px; background-color: var(--black); transition: all .5s ease; content: ''; }
#header span.menu b::after { position: absolute; top: 16px; left: 0px; width: 100%; height: 2px; background-color: var(--black); transition: all .5s ease; content: ''; }
#header span.menu em { display: inline-block; width: auto; margin: 2px 0px 0px 10px; font-style: normal; font-weight: 700; font-size: 14px; text-transform: lowercase; }
#header span.menu b.on { border-top: transparent; }
#header span.menu b.on::before { top: 8px; transform: rotate(-45deg); }
#header span.menu b.on::after { top: 8px; transform: rotate(45deg); }
#header form { float: left; width: 320px; height: auto; margin-left: 110px; }
#header form input { display: block; width: 100%; height: 46px; padding: 0px 20px 0px 52px; background: #fff url('../img/header-search.svg') no-repeat 20px center; border-radius: 23px; border: 1px solid #EAEAEA; box-shadow: 0px 5px 20px rgba(0,0,0,.1); font-weight: 600; font-size: 14px; color: var(--black); }
#header form input::placeholder { color: #BFBFBF; }
#header .right { float: right; width: auto; text-align: right; }
#header .right span.weather { display: inline-block; width: auto; margin-right: 120px; vertical-align: middle; text-align: left; }
#header .right span.weather figure { display: inline-block; width: 36px; height: auto; margin-right: 20px; vertical-align: middle; }
#header .right span.weather figure img { display: block; width: 100%; height: auto; }
#header .right span.weather figcaption { display: inline-block; width: auto; vertical-align: middle; }
#header .right span.weather figcaption b { display: block; margin-bottom: 3px; font-weight: 700; font-size: 14px; }
#header .right span.weather figcaption em { display: inline-block; width: auto; margin-right: 5px; font-weight: 700; font-style: normal; font-size: 14px; text-transform: lowercase; }
#header .right span.weather figcaption em.min { color: var(--red); }
#header .right span.weather figcaption em.max { color: var(--blue); }
#header .right span.notify { position: relative; display: inline-block; width: auto; margin-right: 30px; vertical-align: middle; cursor: pointer; }
#header .right span.notify i { display: block; font-size: 24px; }
#header .right span.notify b { position: absolute; z-index: 2; top: 0px; right: -2px; width: 12px; height: 12px; background-color: var(--red); border: 2px solid #F2F2F2; border-radius: 100%; }
#header .right span.user { position: relative; display: inline-block; width: auto; vertical-align: middle; cursor: pointer; }
#header .right span.user i { display: inline-block; width: auto; margin-right: 7px; font-size: 20px; vertical-align: middle; }
#header .right span.user figure { display: inline-block; width: auto; vertical-align: middle; }
#header .right span.user figure img { display: block; width: 52px; height: 52px; object-fit: cover; border-radius: 100%; }
#header .right span.user nav { display: none; position: absolute; z-index: 10; top: 60px; right: 0px; width: 120px; height: auto; padding: 20px 20px 5px 20px; border-radius: 10px; background-color: #fff; box-shadow: 0px 10px 30px rgba(0,0,0,.1); }
#header .right span.user nav li a { display: block; margin-bottom: 15px; }
#header .right span.user nav li a:hover { text-decoration: underline; }
#header .right span.user nav::before { position: absolute; top: -20px; left: 0px; width: 100%; height: 20px; background-color: transparent; content: ''; }
#header .right span.user:hover nav { display: block; }

/* menu */
#menu { height: 60px; margin-bottom: 44px; background-color: var(--black); }
#menu nav ul { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: auto; border-top: 1px solid #D5D5D5; border-bottom: 1px solid #A2A2A2; }
#menu nav ul li { text-transform: uppercase; }
#menu nav ul li a { display: block; width: auto; height: 60px; line-height: 60px; font-weight: 700; color: #fff; }
#menu nav ul li a.red { color: var(--red); }
#menu nav ul li:last-of-type a { padding-right: 0px; }

    /* menu bg */
    #menu.block-cat nav ul li a.main,
    #menu.block-cat nav ul li:hover a.main { color: #fff !important; }
    #menu.block-cat nav ul { border: transparent; }
    #menu.block-cat nav ul li ul { background-color: transparent; }

    /* menu submenu */
    #menu nav ul li:hover .submenu { display: block; }
    #menu nav ul li a.main { position: relative; }
    #menu nav ul li:hover a.main::before { position: absolute; z-index: 2; top: 35px; left: 10px; font-size: 30px; color: #fff; font-weight: bold; font-family: 'Font Awesome 5 Pro'; content: '\f0de'; }
    #menu .submenu { display: none; position: absolute; z-index: 20; top: 60px; left: 0px; width: 100%; padding: 50px; background-color: #fff; border-radius: 10px; box-shadow: 0px 30px 60px rgba(0,0,0,.3); }
    #menu .submenu nav { float: left; width: 65%; height: auto; }
    #menu .submenu nav ul { display: grid; grid-template-columns: repeat(4, 1fr); border: none; }
    #menu .submenu nav ul li { margin-bottom: 20px; }
    #menu .submenu nav ul li a { height: auto; padding-right: 0px; line-height: 1; font-weight: 400; text-transform: none; }
    #menu .submenu nav ul li a:hover { text-decoration: underline; }
    #menu .submenu aside { float: left; width: 35%; height: auto; }
    #menu .submenu aside h6 { display: block; margin-bottom: 20px; font-weight: 800; font-size: 13px; text-transform: uppercase; }
    #menu .submenu aside figure { position: relative; display: inline-block; width: 100%; height: 150px; background-color: #000; border-radius: 10px; overflow: hidden; }
    #menu .submenu aside figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
    #menu .submenu aside h1 { display: block; margin-top: 15px; font-weight: 800; font-size: 24px; line-height: 1.2; text-transform: none; }
    #menu .submenu aside nav ul { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 10px; }
    #menu .submenu aside nav ul img { display: block; width: auto; width: 30px; height: auto; margin: 0px auto; }

/* feature */
#feature .container { margin-bottom: 44px; padding-bottom: 44px; border-bottom: 1px solid #A2A2A2; }
#feature .left section { float: left; width: 100%; height: 444px; }
#feature .left section article { position: relative; float: left; width: 100%; height: 444px; }
#feature .left section article figure { position: relative; float: left; width: 548px; height: 444px; background-color: #000; border-radius: 10px; overflow: hidden; }
#feature .left section article figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
#feature .left section article figcaption { position: absolute; top: 50%; right: 0px; width: 380px; height: 360px; padding: 35px; border-radius: 10px; transform: translateY(-50%); background-color: var(--black); }
#feature .left section article figcaption small { display: block; margin-bottom: 10px; font-weight: 800; font-size: 12px; text-transform: uppercase; color: #fff; }
#feature .left section article figcaption h1 { display: block; margin-bottom: 10px; font-weight: 800; font-size: 30px; line-height: 1.2; color: #fff; }
#feature .left section article figcaption p { display: block; line-height: 1.4; color: #fff; }
#feature .left section .slick-dots { position: absolute; top: 360px; right: 35px; width: auto; text-align: right; }
#feature .left section .slick-dots li { display: inline-block; width: 34px; height: 4px; margin-left: 18px; background-color: #fff; opacity: .3; cursor: pointer; }
#feature .left section .slick-dots li.slick-active { opacity: 1; }
#feature .left section .slick-dots li button { text-indent: -9999em; }
#feature .right section { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; }
#feature .right section article { display: block; margin-top: 42px; }
#feature .right section article figure { position: relative; display: block; height: 215px; margin-bottom: 14px; background-color: #000; border-radius: 10px; overflow: hidden; }
#feature .right section article figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
#feature .right section article figcaption small { display: block; margin-bottom: 10px; font-weight: 800; font-size: 12px; text-transform: uppercase; }
#feature .right section article figcaption h1 { display: block; font-weight: 800; font-size: 20px; line-height: 1.2; }

    /* feature -> urgente */
    #feature-alert section { position: relative; display: inline-block; width: 100%; height: 480px; margin-bottom: 40px; background-color: #000; border-radius: 10px; overflow: hidden; }
    #feature-alert section figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
    #feature-alert section figure::before { position: absolute; z-index: 2; bottom: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.2)); content: ''; }
    #feature-alert section figcaption { position: absolute; z-index: 3; bottom: 50px; left: 50%; width: 700px; height: auto; transform: translateX(-50%); text-align: center; }
    #feature-alert section figcaption small { display: block; margin-bottom: 20px; font-weight: 800; font-size: 20px; color: var(--red); text-transform: uppercase; }
    #feature-alert section figcaption h1 { display: block; font-weight: 800; font-size: 48px; color: #fff; text-transform: uppercase; line-height: 1.2; }

/* cover */
#cover { height: 380px; margin: -44px 0px 70px 0px; background-color: #000; }
#cover figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
#cover sub { position: absolute; z-index: 1000; bottom: -8px; left: 0px; width: auto; height: 8px; background-color: #000; }

/* single */
#single { margin-bottom: 80px; }
#single .container { width: 850px; }

    /* single -> header */
    #single header { position: relative; display: block; margin-bottom: 60px; }
    #single header::after { display: block; width: 100px; height: 1px; margin: 60px auto 0px auto; background-color: #BFBFBF; content: ''; }
    #single header h1 { display: block; margin-bottom: 20px; font-weight: 800; font-size: 72px; line-height: 1.1; }
    #single header h2 { display: block; margin-bottom: 20px; font-weight: 300; font-size: 36px; }
    #single header span.time { display: block; font-size: 14px; color: #777; }
    #single header span.left { position: absolute; top: 10px; left: -70px; width: auto; font-size: 12px; text-transform: lowercase; font-weight: 800; text-align: center; }
    #single header span.left .ouvir { display: block; width: 40px; height: auto; margin-bottom: 30px; }
    #single header span.left .ouvir i { display: block; width: 40px; height: 40px; margin-bottom: 10px; background-color: #fff; border-radius: 100%; line-height: 40px; }
    #single header span.left .libras a { color: var(--blue); }
    #single header span.left .libras img { display: block; width: 40px; height: auto; margin-bottom: 10px; }
    #single header nav { position: absolute; top: 20px; right: -70px; width: auto; }
    #single header nav li a { display: block; margin-bottom: 40px; font-size: 16px; }

    /* single -> content */
    #single section h1,
    #single section h2,
    #single section h3,
    #single section h4,
    #single section h5,
    #single section h6 { display: block; margin-bottom: 30px; font-weight: 800; font-size: 24px; }
    #single section p { display: block; margin-bottom: 30px; font-weight: 300; font-size: 16px; font-family: 'Libre Baskerville', serif; line-height: 1.8; }
    #single section blockquote.text { position: relative; float: right; width: 40%; height: auto; padding: 30px 0px 30px 80px; font-weight: 800; font-size: 30px; line-height: 1.4; }
    #single section blockquote.text::before { position: absolute; top: 20px; left: 20px; font-family: 'Font Awesome 5 Pro'; content: '\f10d'; }
    #single section .twitter-tweet-rendered { display: inline-block; width: 100%; }
    #single section iframe { display: block; width: 100%; height: 400px; margin-bottom: 40px; }
    #single .image { display: inline-block; width: 100%; height: auto; margin-bottom: 30px; padding: 10px; background-color: #fff; border-radius: 10px; border: 1px solid #ddd;; }
    #single .image img { display: block; width: auto; max-width: 100%; height: auto; margin-bottom: 13px; }
    #single .image p { float: left; width: 70%; height: auto; margin-bottom: 0px; padding-left: 10px; font-size: 12px; }
    #single .image span { float: right; width: auto; padding-right: 10px; font-size: 12px; }

    /* single -> relacionadas */
    .relacionadas { margin-top: 80px; }
    .relacionadas header { display: block; margin-bottom: 50px; }
    .relacionadas header::after { display: none !important; }
    .relacionadas header h5 { display: block; border-bottom: 1px solid var(--black); }
    .relacionadas header h5 b { float: left; width: auto; margin-top: -10px; padding-right: 20px; background-color: #F2F2F2; font-weight: 600; font-size: 20px; }

/* next */
#next { height: 380px; margin-bottom: -80px; background-color: #000; }
#next figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
#next figure::after { position: absolute; z-index: 2; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); content: ''; }
#next figcaption { position: absolute; z-index: 2; top: 50%; left: 50%; width: 800px; transform: translate(-50%, -50%); text-align: center; }
#next figcaption small { display: block; letter-spacing: 4px; font-weight: 800; font-size: 14px; color: #fff; text-transform: uppercase;; }
#next figcaption h1 { display: block; margin-top: 20px; font-weight: 800; font-size: 30px; color: #fff; line-height: 1.2; }

/* article single */
.article-single section article { display: inline-block; width: 100%; height: 157px; margin-bottom: 16px; padding: 30px; background-color: #fff; border-radius: 10px; }
.article-single section article figcaption { float: left; width: calc(100% - 155px); height: auto; padding-right: 30px; }
.article-single section article figcaption small { display: block; margin-bottom: 10px; font-weight: 800; font-size: 12px; text-transform: uppercase; }
.article-single section article figcaption h1 { display: block; font-weight: 800; font-size: 20px; line-height: 1.2; }
.article-single section article figure { position: relative; float: right; width: 155px; height: 98px; border-radius: 10px; overflow: hidden; }
.article-single section article figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }

/* article large */
.article-large { display: inline-block; width: 100%; height: auto; padding: 40px; background-color: #fff; border-radius: 10px; }
.article-large section article { display: inline-block; width: 100%; height: auto; margin-bottom: 40px; }
.article-large section article:last-of-type { margin-bottom: 0px; }
.article-large section article figure { position: relative; float: left; width: 280px; height: 172px; border-radius: 10px; background-color: #000; overflow: hidden; }
.article-large section article figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
.article-large section article figcaption { position: relative; float: left; width: calc(100% - 280px); height: 172px; padding: 5px 0px 0px 30px; }
.article-large section article figcaption small { display: block; margin-bottom: 10px; font-weight: 800; font-size: 12px; text-transform: uppercase; }
.article-large section article figcaption h1 { display: block; font-weight: 800; font-size: 24px; line-height: 1.2; }
.article-large section article figcaption sub { position: absolute; bottom: 10px; left: 30px; font-size: 13px; }

/* article slide */
.article-slide { display: inline-block; width: 100%; height: auto; margin: 16px 0px; }
.article-slide article { position: relative; display: inline-block; width: 100%; height: 442px; border-radius: 10px; overflow: hidden; }
.article-slide article figure { position: relative; float: left; width: 100%; height: 100%; background-color: #000; }
.article-slide article figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
.article-slide article figcaption { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 158px; padding: 35px 140px 10px 35px; }
.article-slide article figcaption small { display: block; margin-bottom: 10px; font-weight: 800; font-size: 12px; text-transform: uppercase; color: #fff; }
.article-slide article figcaption h1 { display: block; margin-bottom: 10px; font-weight: 800; font-size: 24px; line-height: 1.2; color: #fff; }
.article-slide article figcaption p { display: block; line-height: 1.4; color: #fff; }
.article-slide section .slick-dots { position: absolute; bottom: 35px; right: 35px; width: auto; text-align: right; }
.article-slide section .slick-dots li { display: inline-block; width: 34px; height: 4px; margin-left: 18px; background-color: #fff; opacity: .3; cursor: pointer; }
.article-slide section .slick-dots li.slick-active { opacity: 1; }
.article-slide section .slick-dots li button { text-indent: -9999em; }

/* media */
.media section { display: grid; grid-template-columns: 1fr; grid-gap: 16px; }
.media section article { position: relative; display: block; height: 334px; margin-bottom: 16px; background-color: #000; border-radius: 10px; overflow: hidden; }
.media section article::after { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 70%; background: linear-gradient(to top, rgba(0,0,0,.9), transparent); content: ''; }
.media figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
.media figcaption { position: absolute; z-index: 2; bottom: 0px; left: 0px; width: 100%; height: auto; padding: 0px 25px 25px 25px; }
.media figcaption small { display: block; margin-bottom: 10px; font-weight: 800; font-size: 12px; color: #fff; text-transform: uppercase; }
.media figcaption h1 { display: block; font-weight: 800; font-size: 20px; line-height: 1.2; color: #fff; }
.media figcaption p { display: block; margin: 10px 0px; line-height: 1.4; color: #fff; }
.media figcaption sub { display: block; font-size: 12px; color: #fff; }
.media.media-side section { grid-template-columns: 1fr 1fr; }
.media.media-side section article { height: 344px; }

/* videos */
.videos { margin: 60px 0px; }
.videos header { display: block; margin-bottom: 50px; }
.videos header h6 { display: block; border-bottom: 1px solid var(--black); }
.videos header h6 b { float: left; width: auto; margin-top: -10px; padding-right: 20px; background-color: #F2F2F2; font-weight: 600; font-size: 20px; }
.videos section { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 16px; }
.videos section article { display: block; height: 360px; background-color: #fff; border-radius: 10px; overflow: hidden; }
.videos section figure { position: relative; float: left; width: 100%; height: 190px; background-color: #000; }
.videos section figure img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; }
.videos section figure sup { position: absolute; top: 25px; right: 25px; width: auto; padding: 5px 10px; border-radius: 20px; font-weight: 800; font-size: 12px; color: #fff; }
.videos section figcaption { position: relative; float: left; width: 100%; height: 170px; padding: 40px 25px 10px 25px; }
.videos section figcaption small { display: block; margin-bottom: 10px; font-weight: 800; font-size: 12px; text-transform: uppercase; }
.videos section figcaption h1 { display: block; font-weight: 800; font-size: 20px; line-height: 1.2; }
.videos section figcaption span.play a { position: absolute; top: -27px; left: 25px; width: 54px; height: 54px; border-radius: 100%; color: #fff; text-align: center; line-height: 54px; }

/* tips */
.tips { display: grid; margin: 16px 0px; grid-template-columns: 1fr 1fr; grid-gap: 16px; }
.tips div { height: 213px; padding: 25px; background-color: #fff; border-radius: 10px; text-align: center; }
.tips div h6 { display: block; margin-bottom: 14px; font-weight: 800; text-transform: uppercase; }
.tips div h5 { display: block; margin-bottom: 14px; font-weight: 800; color: var(--blue); text-transform: uppercase; }
.tips div figure img { display: block; height: 44px; margin: 0px auto 15px auto; }
.tips .horoscope { grid-column: 1 / 3; }
.tips .horoscope p { display: block; line-height: 1.4; }
.tips .bolsa { padding: 25px 0px; overflow: hidden; }
.tips .bolsa section span { float: left; width: 100%; height: auto; margin-top: 10px; }
.tips .bolsa section span b { float: left; width: 60%; height: auto; padding-right: 5px; text-align: right; font-weight: 800; font-size: 14px; }
.tips .bolsa section span em { float: left; width: 40%; height: auto; padding-left: 5px; text-align: left; font-style: normal; font-weight: 800; font-size: 14px; color: var(--blue); }
.tips .bolsa section span em.menos { color: var(--red); }
.tips .loteria nav ul { display: block; padding: 0px 20px; }
.tips .loteria nav ul li { display: inline-block; width: 40px; height: 40px; margin: 0px 3px 6px 3px; border-radius: 100%; border: 2px solid var(--green); text-align: center; line-height: 36px; color: var(--green); font-weight: 800; font-size: 13px; }

/* footer */
#footer { position: relative; height: 120px; margin-top: 80px; background-color: var(--black); }
#footer span.logo { position: absolute; top: 50%; left: 50%; width: 70px; height: auto; transform: translate(-50%, -50%); }
#footer span.logo img { display: block; width: 70px; height: auto; }
#footer small { float: left; width: auto; margin-top: 50px; font-size: 12px; color: #fff; }
#footer nav { float: right; width: auto; margin-top: 50px; text-align: right; }
#footer nav li { display: inline-block; width: auto; margin-left: 20px; font-size: 12px; }
#footer nav li a { display: block; color: #fff; text-decoration: underline; }

/* sidebar */
#sidebar { position: fixed; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; visibility: hidden; }
#sidebar aside { position: fixed; z-index: 2; top: 0px; right: -270px; width: 270px; height: 100vh; padding: 40px 20px; background-color: #fff; transition: all .5s ease; }
#sidebar aside header { position: relative; display: inline-block; width: 100%; height: auto; }
#sidebar aside header sup { position: absolute; top: -20px; left: 7px; font-size: 24px; cursor: pointer; }
#sidebar aside header span.logo img { display: block; width: auto; height: 60px; margin: 0px auto 20px auto; }
#sidebar aside span.user { position: absolute; bottom: 20px; left: 0px; width: 100%; height: auto; padding: 0px 20px; }
#sidebar aside span.user figure { display: inline-block; width: 50px; height: auto; vertical-align: middle; }
#sidebar aside span.user figure img { display: block; width: 100%; height: 50px; border-radius: 100%; object-fit: cover; }
#sidebar aside span.user span { display: inline-block; width: calc(100% - 55px); padding-left: 10px; vertical-align: middle; font-weight: 800; font-size: 16px; }
#sidebar aside span.user b { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-size: 20px; }
#sidebar aside nav { display: inline-block; width: 100%; height: auto; margin-top: 40px; }
#sidebar aside nav li { display: block; margin-bottom: 30px; font-weight: 800; font-size: 18px; }
#sidebar aside nav li a { font-weight: 300; }
#sidebar aside nav li a:hover { text-decoration: underline; }
#sidebar sub { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); transition: all .5s ease; opacity: 0; }
#sidebar.on { visibility: visible; }
#sidebar.on aside { right: 0px; transition-delay: .4s; }
#sidebar.on sub { opacity: 1; transition-delay: .2s; }

/* ############################################ RESPONSIVE */

@media (max-width: 1280px){

    /* base */
    .container { width: 100%; padding: 0px 20px; }

    /* header */
    #header form { margin-left: 30px; }
    #header .right span.weather { margin-right: 30px; }

    /* menu */
    #menu { display: none; }

    /* cover */
    #cover { height: 240px; margin-top: 0px; }

}

@media (max-width: 1100px){

    /* article single */
    .article-single section article figcaption h1 { font-size: 16px; }

    /* article large */
    .article-large section article figure { width: 200px; }
    .article-large section article figcaption { width: calc(100% - 200px); }
    .article-large section article figcaption h1 { font-size: 20px; }

    /* tips */
    .tips div { padding: 25px 0px; }
    .tips .loteria nav ul { padding: 0px; }

    /* videos */
    .videos section figcaption h1 { font-size: 18px; }

}

@media (max-width: 1000px){

    /* header */
    #header form,
    #header .right span.weather { display: none; }

    /* feature */
    #feature .right section { grid-template-columns: 1fr; }
    #feature .right section article:last-of-type { display: none; }

}

@media (max-width: 890px){

    /* feature */
    #feature .container { padding-bottom: 0px; border-bottom: none; }
    #feature .left { width: 100%; margin-right: 0px; }
    #feature .left section article figure { width: 90%; }
    #feature .left section article figcaption { width: 50%; }
    #feature .left section article figcaption h1 { font-size: 24px; }
    #feature .right { display: none; }

    /* column */
    .column .left { width: 100%; margin-right: 0px; }
    .column .right { width: 100%; }

    /* slide */
    .article-slide article figcaption h1 { font-size: 20px; }

    /* tips */
    .tips div { padding: 25px; }
    .tips .loteria nav ul { padding: 0px 20px; }

    /* videos */
    .videos section { grid-template-columns: 1fr 1fr; }

    /* footer */
    #footer { padding: 20px 0px; height: auto; }
    #footer span.logo { position: relative; top: auto; left: 0px; transform: none; }
    #footer span.logo img { display: block; margin: 0px auto; }
    #footer nav { float: none; display: block; margin: 40px 0px 20px 0px; text-align: center; }
    #footer nav li { margin: 0px 10px; }
    #footer small { float: none; display: block; text-align: center; }

}

@media (max-width: 850px){

    /* single */
    #single .container { width: 100%; }
    #single header { margin-bottom: 0px; }
    #single header h1 { font-size: 30px; }
    #single header h2 { font-size: 20px; line-height: 1.4; }
    #single header span.left { position: relative; top: auto; left: auto; width: 100%; margin: 40px 0px 0px 0px; text-align: left; }
    #single header span.left small { display: inline-block !important; margin: 0px 10px 0px 0px; text-align: center; }
    #single header nav { position: relative; top: auto; right: 0px; display: inline-block; width: 100%; }
    #single header nav li { display: inline-block; width: auto; margin: 0px 10px 0px 0px; }
    #single header::after { display: none; }
    #single section h1, #single section h2, #single section h3, #single section h4, #single section h5, #single section h6 { font-size: 20px; }
    #single section p { font-size: 14px; line-height: 2; }
    #single section blockquote.text { width: 100%; font-size: 20px; }
    .relacionadas header { margin-bottom: 40px !important; }

    /* next */
    #next figcaption { width: 100%; padding: 0px 20px; }
    #next figcaption small { font-size: 10px; letter-spacing: 2px; }
    #next figcaption h1 { font-size: 24px; }
    
}

@media (max-width: 590px){

    /* header */
    #header .right span.notify { display: none; }

    /* feature */
    #feature .left section,
    #feature .left section article,
    #feature .left section article figure { height: 300px; }
    #feature .left section article figcaption { height: 260px; }
    #feature .left section article figcaption small { font-size: 10px; }
    #feature .left section article figcaption h1 { font-size: 18px; }
    #feature .left section article figcaption p { display: none; }
    #feature .left section .slick-dots { top: 240px; }

        /* feature -> alert */
        #feature-alert section { height: 300px; }
        #feature-alert section figcaption { bottom: 25px; width: 100%; padding: 0px 20px; }
        #feature-alert section figcaption small { font-size: 14px; }
        #feature-alert section figcaption h1 { font-size: 30px; }

    /* article single */
    .article-single section article { padding: 20px; }
    .article-single section article figcaption small { font-size: 10px; }
    .article-single section article figcaption h1 { font-size: 16px; }

    /* article large */
    .article-large { padding: 20px; }
    .article-large section article figure { width: 160px; height: 140px; }
    .article-large section article figcaption { width: calc(100% - 160px); height: 140px; }
    .article-large section article figcaption small { font-size: 10px; }
    .article-large section article figcaption h1 { font-size: 18px; }

    /* article slide */
    .article-slide article figcaption { padding: 15px 100px 10px 20px; }
    .article-slide article figcaption small { font-size: 10px; }
    .article-slide article figcaption h1 { font-size: 18px; }
    .article-slide section .slick-dots { bottom: 20px; }

    /* media */
    .media figcaption { padding: 0px 20px 20px 20px; }
    .media figcaption small { font-size: 10px; }
    .media figcaption h1 { font-size: 18px; }

    /* videos */
    .videos header h6 b { font-size: 18px; }
    .videos section { grid-template-columns: 1fr; }
    .videos section article { height: auto; }
    .videos section figure { height: 120px; }
    .videos section figcaption { height: auto; padding: 40px 20px 20px 20px; }
    .videos section figcaption small { font-size: 10px; }
    .videos section figcaption h1 { font-size: 16px; }

    /* tips */
    .tips { grid-template-columns: 1fr; }
    .tips div { height: auto; }
    .tips .horoscope { grid-column: 1; }

}

@media (max-width: 510px){

    /* feature */
    #feature .left section article figcaption { padding: 20px; }
    #feature .left section .slick-dots { right: 20px; }
    #feature .left section .slick-dots li { width: 20px; margin-left: 8px; }

    /* article single */
    .article-single section article figure { width: 120px; }
    .article-single section article figcaption { width: calc(100% - 120px); padding-right: 15px; }

    /* article large */
    .article-large section article figure { width: 100%; }
    .article-large section article figcaption { width: 100%; height: auto; padding: 20px 0px 0px 0px; }
    .article-large section article figcaption sub { position: relative; bottom: auto; left: auto; display: block; margin-top: 20px; font-size: 12px; }

    /* article slide */
    .article-slide article { height: 300px; }
    .article-slide article figcaption { height: 130px; }
    .article-slide section .slick-dots { right: 20px; }
    .article-slide section .slick-dots li { width: 20px; margin-left: 8px; }

    /* media */
    .media.media-side section article { height: 240px; }
    .media section article { height: 240px; }

}