/* 
Theme Name: plantilla-1
Theme URI:
Author: Asiserver.com
Author URI: Asiserver.com
Description: Tema para emisora de radio
Version: 1.0
Tags: Emisora, Radio, Plantilla para radio, Theme Wordpress.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pradio
*/

:root {
    --font-textos: 'Roboto', sans-serif;
    --bg-sociales: #161616;
    --bg-nav: rgba(0, 0, 255, 0);
    --bg-actualidad: #3b34a18e;
    --bg-musica: #ad257475 ;
    --bg-deportes: #07411379;
    --background-gradient: linear-gradient(34deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 67%, rgba(252, 176, 69, 1) 100%);
    --color-sociales: #ec2626;
    --color-nav: #ffebeb;
    --color-principal: #000000;
    --color-banner-subtitulo: #65686c;
    --color-banner-titulo: #d3d2d2;
    --color-subtitulos: #747474;
    --color-blanco: #ffffff;
    --color-ver-mas:#fd0c5a;
    --border-actualidad:#d90074;
    --border-musica:#00a8ff;
    --border-deportes:#f0f00c;
    --bg-footer:#181818;
}

@font-face {
    font-family: metropolis;
    src: url('./fonts/Metropolis-Light.otf') format('truetype');
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: metropolis;
    src: url('./fonts/Metropolis-Medium.otf') format('truetype');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: metropolis;
    src: url('./fonts/Metropolis-Bold.otf') format('truetype');
    font-style: normal;
    font-weight: 700;
}


body {
    font-family: metropolis, serif;
}

/*================================
     MENU REDES SOCIALES
================================*/

.contenedor-redes {
    background-color: var(--bg-sociales);
}

.sociales ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sociales-footer ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sociales ul li,
.sociales-footer ul li {
    position: relative;
    display: inline-block;
}

.sociales ul li {
    width: 50px;
}

.sociales ul li a,
.sociales-footer ul li a {
    height: 100%;
    width: 100%;
    display: inline-block;
}

/*==== BEFORE ====*/

.sociales ul li a::before,
.sociales-footer ul li a::before {
    font-family: 'FontAwesome';
    display: inline-block;
    vertical-align: top;
    padding: 0.4rem;
    content: '\f08e';
    -webkit-font-smoothing: antialiased;
    font-size: 1.8rem;
}

.sociales ul li a::before,
.sociales-footer ul li a::before {
    color: var(--color-sociales);
}


.sociales ul li a[href*="facebook.com"]::before,
.sociales-footer ul li a[href*="facebook.com"]::before {
    content: '\f230';
}

.sociales ul li a[href*="twitter.com"]::before,
.sociales-footer ul li a[href*="twitter.com"]::before {
    content: '\f081';
}

.sociales ul li a[href*="instagram.com"]::before,
.sociales-footer ul li a[href*="instagram.com"]::before {
    content: '\f16d';
}

.sociales ul li a[href*="pinterest.com"]::before,
.sociales-footer ul li a[href*="pinterest.com"]::before {
    content: '\f0d2';
}

.sociales ul li a[href*="youtube.com"]::before,
.sociales-footer ul li a[href*="youtube.com"]::before {
    content: '\f16a';
}

.sociales ul li a[href*="whatsapp.com"]::before,
.sociales-footer ul li a[href*="whatsapp.com"]::before {
    content: '\f232';
}

.sociales ul li a[href*="telegram.org"]::before,
.sociales-footer ul li a[href*="telegram.org"]::before {
    content: '\f2c6';
}

/*==== AFTER ====*/
.sociales-footer ul li a[href*="facebook.com"]::after {
    content: '/VALLENATOS1A';
    position: absolute;
    top: 16px;
    color: #7b7272;
}

.sociales-footer ul li a[href*="twitter.com"]::after {
    content: '@VALLENATOS_1A';
    position: absolute;
    top: 16px;
    color: #7b7272;
}

.sociales-footer ul li a[href*="instagram.com"]::after {
    content: '@VALLENATOS1A';
    position: absolute;
    top: 16px;
    color: #7b7272;
}

.sociales-footer ul li a[href*="youtube.com"]::after {
    content: 'VALLENATOS1A';
    position: absolute;
    top: 16px;
    color: #7b7272;
}

/*================================
        MENU DE NAVEGACION
================================*/

.navegacion-page {
    background-color: var(--color-principal);
}

.navegacion {
    background-color: var(--bg-nav);
    width: 100%;
}

.navegacion-2 {
    background:var(--color-principal);
    width: 100%;
    position: fixed;
    top: 0;
}

.navbar-light .navbar-toggler {
    background-color:var(--color-nav);
}

.navbar-toggler {
    width: 50px;
    height: 40px;
}

.navbar-light .navbar-brand,
.navbar-light .navbar-brand:hover {
    color:var(--color-principal);
}

.navbar {
    padding-top: 0;
    padding-bottom: 0;
}

.nav-link {
    color: var(--color-nav);
    font-size: 1.1rem;
    transition: all .5s ease-in-out;
    font-weight: 700;
}

.nav-link:hover {
    color: var(--color-sociales);
    transition: all .5s ease-in-out;
}

.dropdown-item {
    font-size: .9rem;
}

.menu-responsive {
    font-size: 1.5rem;
}

.navbar-nav li {
    position: relative;
}

.actual {
    border-bottom: 2px solid var(--color-sociales);
}

.icon-hamburger {
    width: 20px;
}

/*==================
       HEADER
==================*/

.btn-header {
    background: transparent;
    font-size: 1.1rem;
    border-radius: 22px;
    padding: .7rem 1.5rem;
    border: solid 2px var(--color-blanco);
}

.btn-header::before {
    content: url(./img/play-1.png);
}

.btn-header:hover {
    color: var(--color-blanco);
    transform: translateY(-3px);
    transition: all .2s ease-in-out;
    border-color: var(--color-sociales);
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
}

.btn-descarga {
    background: var(--background-gradient);
    padding: .6rem 2.3rem;
    border-radius: 22px;
    line-height: 1rem;
}

.btn-descarga:hover {
    transform: translateY(-3px);
    transition: all .2s ease-in-out;
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
}

/*==========
   CARDS
==========*/

.card {
    -webkit-box-shadow: -3px 4px 8px -2px rgba(0, 0, 0, 0.54);
    box-shadow: -3px 4px 8px -2px rgba(0, 0, 0, 0.54);
}

.card-title {
    font-size: 1.4rem;
}

.card-title a {
    text-decoration: none;
    color: var(--color-principal);
}

.card-title a:hover {
    color: var(--color-principal);
    text-decoration: underline;
}

.card-img-news {
    position: relative;
    width: 100%;
    height: 14.6rem;
}

.card-img-news-bg {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: var(--color-blanco);
    font-size: 2rem;
}

.card-img-news-bg.categoria-4,
.card-img-news-bg.categoria-6,
.card-img-news-bg.categoria-8 {
    background: var(--bg-actualidad);
    z-index: 1000;
}

.card-img-news-bg.categoria-7 {
    background: var(--bg-musica);
    z-index: 1000;
}

.card-img-news-bg.categoria-5,
.card-img-news-bg.categoria-9 {
    background: var(--bg-deportes);
    z-index: 1000;
}

.card ul {
    list-style: none;
    padding: 0;
}

.card ul li a {
    text-decoration: none;
    color: var(--color-blanco);
}

.categoria-4 ul li {
    border-bottom: .3rem solid var(--border-actualidad);
}

.categoria-6 ul li,
.categoria-9 ul li,
.categoria-7 ul li {
    border-bottom: .3rem solid var(--border-musica);
}

.categoria-5 ul li,
.categoria-8 ul li {
    border-bottom: .3rem solid var(--border-deportes);
}

.categoria-news ul {
    list-style: none;
}

.categoria-news ul li a {
    text-decoration: none;
    color: var(--color-principal);
}

.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(1px);
}

.fecha::before {
    content: url(./img/calendario.png);
}

.autor::before {
    content: url(./img/usuario.png);
}

.ver-mas {
    text-decoration: none;
    color: var(--color-ver-mas);
}

.ver-mas:hover {
    color: var(--color-ver-mas);
    border-bottom: 1px solid var(--color-ver-mas);
}

.mb-6 {
    margin-bottom: 4rem;
}

/*=======================
    CLIP-PATH-SECTION
=======================*/

.clip {
    clip-path: polygon(86% 33%, 100% 0, 100% 100%, 0 100%, 0 0);
    padding-top: 10rem;
    padding-bottom: 2rem;
    background-color:var(--color-principal);
}

.widget-inicio img {
    height: auto;
}

/*===================
        PAGES
===================*/

.bg-nav {
    background: var(--color-principal);
}

.wave {
    position: absolute;
    width: 100%;
    bottom: 0;
}

.contenedor-team {
    width: 200px;
    height: 200px;
}

.contenedor-team img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.blockquote-noticias {
    font-size: 1.35rem;
    border-left: solid .3rem var(--color-principal);
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.auto-blog figure {
    width: 100% !important;
}

.auto-blog img {
    display: inline-block !important;
    width: 100% !important;
    object-fit: cover;
    height: auto;
}

/*===================
   páginador
===================*/

.pagination {
    clear: both;
    padding: 20px 0;
    position: relative;
    font-size: 11px;
    line-height: 13px;
    justify-content: center;
}

.pagination span,
.pagination a {
    display: block;
    float: left;
    margin: 2px 2px 2px 0;
    padding: 6px 9px 5px 9px;
    text-decoration: none;
    width: auto;
    color: var(--color-blanco);
    background: var(--color-principal);
}

.pagination a:hover {
    color:var(--color-blanco);
    background: var(--color-sociales);
}

.pagination .current {
    padding: 6px 9px 5px 9px;
    background: var(--color-banner-subtitulo);
    color:var(--color-blanco);
}

.page-404{
    background-image: radial-gradient(circle, #1c1a1a, #171515, #111010, #090809, #000000);
}

/*============
  PAGE-LIVE
=============*/
.contenedor-reproductor-live{
    height: 450px;
    background-size: cover;
    background-position: center top;
}

/*============
    FOOTER
============*/

.contenedor-footer {
    background-color: var(--bg-footer);
}

.s-footer {
    transform: translate(-20%);
}

/* ===============
   MEDIA QUERYS
=============== */

@media (max-width: 767px) {
    .navbar-nav {
        width: 50%;
    }
}


@media (min-width: 1200px) {
    .contenedor-cards-principal {
        padding: 40px 100px 0 100px;
    }
}