/*
Theme Name: Vivacious Magazine
Theme URI: https://afthemes.com/products/vivacious-magazine/
Author: AF themes
Author URI: https://afthemes.com
Description: Vivacious Magazine is a child theme of Elegant Magazine. The theme facilitates a new option to display unlimited number of featured news. Furthermore, it is coming with different fonts, various color and background color changes. Additionally, the child theme also gives it's demo import feature on a click. It is mainly designed for fashion blog, fashion news portal and contemporary online magazine. With the help of  customizer options along with widgets, you can implement layouts as a modern fashion magazine, trending news journals, travel blogging & magazine, clean and minimal news sites, blogging site and even more. The theme is SEO friendly with optimized codes and awesome support. See our demo at https://demo.afthemes.com/elegant-magazine/vivacious-magazine/ and support at https://afthemes.com/supports/
Template: elegant-magazine
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vivacious-magazine
Tags: news, blog, entertainment, one-column, two-columns, left-sidebar, right-sidebar, custom-background, custom-menu, featured-images, full-width-template, custom-header, translation-ready, theme-options, threaded-comments
*/

body,
body button,
body input,
body select,
body optgroup,
body textarea {
    font-family: 'Roboto Condensed', sans-serif;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .main-navigation a,
body .font-family-1,
body .site-description,
body .trending-posts-line,
body .widget-title,
body .em-widget-subtitle,
body .grid-item-metadata .item-metadata,
body .af-navcontrols .slide-count,
body .figure-categories .cat-links,
body .nav-links a {
    font-family: 'Anton', sans-serif;
}

body .offcanvas-menu span,
body .data-bg,
body .primary-color {
    background-color: #35393d;
}

body{
    color: #35393d;
}

body .secondary-color,
body button,
body input[type="button"],
body input[type="reset"],
body input[type="submit"],
body .site-content .search-form .search-submit,
body .site-footer .search-form .search-submit,
body .figure-categories-bg .cat-links a,
body .tagcloud a:hover{
    background: #35393d;
}



body a:hover,
body a:focus,
body a:active,
body .figure-categories-2 .cat-links a,
body .elegant_magazine_single_col_categorised_posts .figure-categories .cat-links a,
body .categorised-article-list .figure-categories .cat-links a,
body .elegant_magazine_express_col_categorised_posts .em-express-article-lists .figure-categories .cat-links a {
    color: #35393d;
}

a{
    color: #35393d;

}

a:visited {
    color: #35393d;
}

.top-masthead, .top-masthead a {
    color: #ffffff;

}

.top-masthead a:visited{
    color: #ffffff;
}


.top-masthead a:hover{
    color: #ffffff;
}

.site-branding .site-title{
    font-size: 115px;
}

.site-footer a:visited {
    color: #ffffff;
}

.af-tabs.nav-tabs > li.active > a,
.af-tabs.nav-tabs > li:hover > a,
.af-tabs.nav-tabs > li:focus > a{
    color: #35393d;
}

.af-main-banner {
    border-bottom: 1px solid;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.banner-half {
    border-style: solid;
    border-width: 0 1px 1px 0;

}



.default-section-slider .main-slider {
    border-right: 1px solid;
    border-left: 1px solid;
    border-color: #e8e8e8;
}

@media only screen and (min-width: 992px) {
    

    .default-section-slider .no-gutter-col:nth-child(4),
    .default-section-slider .no-gutter-col:nth-child(8),
    .default-section-slider .no-gutter-col:nth-child(12),
    .default-section-slider .no-gutter-col:nth-child(16),
    .default-section-slider .no-gutter-col:nth-child(20) {
        border-left-width: 1px;
    }
}

@media only screen and (max-width: 991px) {
    .af-main-banner .no-gutter-col:nth-child(2),
    .af-main-banner .no-gutter-col:nth-child(4),
    .af-main-banner .no-gutter-col:nth-child(6),
    .af-main-banner .no-gutter-col:nth-child(8),
    .af-main-banner .no-gutter-col:nth-child(10),
    .af-main-banner .no-gutter-col:nth-child(12),
    .af-main-banner .no-gutter-col:nth-child(14),
    .af-main-banner .no-gutter-col:nth-child(16),
    .af-main-banner .no-gutter-col:nth-child(18) {
        border-left-width: 1px;
    }

}

.widget .slick-current .banner-half {
    border-left-width: 1px;
}

.banner-half figcaption {
    padding: 20px;
}

@media only screen and (max-width: 767px) {
    .banner-half {
        border-width: 1px;
    }

    .banner-half:last-child {
        border-left: 0;
    }
}


body h1,
body h2,
body h2 span,
body h3,
body h4,
body h5,
body h6 {
    color: #35393d;
}


.article-title, .site-branding .site-title, .main-navigation .menu ul li a, .slider-figcaption .slide-title {
    letter-spacing: 0;
    line-height: 1.3;
}

article.archive-layout-grid{
    padding-left: 1px;
    padding-right: 1px;

}

article.archive-layout-grid .spotlight-post{
    margin-bottom: 0;
}

body #primary .widget .article-title.article-title-2,
.em-latest-post-carousel .slider-figcaption .slide-title-1{
    font-size:18px;
}

.figure-categories-bg .em-post-format{
    background: #35393d;
    font-size: 12px;
    padding: 2px;
}
.em-post-format{
    color: #35393d;
}

body .slider-figcaption-1 .slide-title a {
    box-decoration-break: clone;
    -webkit-box-shadow: 10px 0 0 rgba(255, 255, 255, 0.75), -10px 0 0 rgba(255, 255, 255, 0.75);
    -moz-box-shadow: 10px 0 0 rgba(255, 255, 255, 0.75), -10px 0 0 rgba(255, 255, 255, 0.75);
    -ms-box-shadow: 10px 0 0 rgba(255, 255, 255, 0.75), -10px 0 0 rgba(255, 255, 255, 0.75);
    -o-box-shadow: 10px 0 0 rgba(255, 255, 255, 0.75), -10px 0 0 rgba(255, 255, 255, 0.75);
    box-shadow: 10px 0 0 rgba(255, 255, 255, 0.75), -10px 0 0 rgba(255, 255, 255, 0.75);
}

body .slider-figcaption-1 .slide-title a, body .slider-figcaption-1 .slide-title a, body .grid-item-metadata-1 {
    background: rgba(255, 255, 255, 0.75);
}

body .slider-figcaption-1 .slide-title a {
    background: rgba(255, 255, 255, 0.75);
}

.slider-figcaption-1 .slide-title a, .grid-item-metadata-1, .slider-figcaption a {
    color: #35393d;
}

/* Assicurati che lo slider principale sia sempre visibile */
@media screen and (max-width: 991px) { /* Partiamo da un breakpoint più ampio per sicurezza */
    .main-slider {
        display: block !important; /* Forza la visualizzazione come blocco */
        visibility: visible !important; /* Assicura che non sia nascosto dalla visibilità */
        opacity: 1 !important; /* Assicura che non sia trasparente */
    }

    /* Potrebbe essere necessario rendere visibili anche i contenitori del main-slider se nascosti */
    .af-main-banner,
    .main-banner-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media screen and (max-width: 767px) { /* Regole specifiche per schermi ancora più piccoli */
    .main-slider {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
     .af-main-banner,
    .main-banner-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Stile per le frecce dello slider */
.main-slider .slick-prev,
.main-slider .slick-next {
    position: absolute; /* Assicurati che siano posizionate relativamente al main-slider */
    z-index: 100; /* Un valore abbastanza alto per essere sopra le slide */
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%); /* Corregge il posizionamento per centrare */
    left: 10px; /* Posiziona la freccia sinistra a 10px dal bordo */
    right: 10px; /* Posiziona la freccia destra a 10px dal bordo (verrà sovrascritta per slick-prev) */
    cursor: pointer; /* Indica che sono cliccabili */
    color: #fff; /* Colore delle frecce, da adattare al tuo design */
    font-size: 2em; /* Dimensione delle icone */
    background: rgba(0,0,0,0.5); /* Sfondo semi-trasparente per visibilità */
    padding: 5px 10px; /* Padding per l'area cliccabile */
    border-radius: 3px; /* Angoli leggermente arrotondati */
}

.main-slider .slick-next {
    left: auto; /* Annulla il 'left' per la freccia destra */
    right: 10px; /* Posiziona la freccia destra a 10px dal bordo */
}

/* Regole per il form di ricerca quando è attivo (quello che si sovrappone) */
#af-search-wrap.af-search-toggle {
    z-index: 1000; /* Valore molto alto, per essere SEMPRE sopra lo slider */
    position: fixed; /* O absolute, se è dentro un contenitore specifico */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Sfondo scuro semi-trasparente */
    display: flex; /* Per centrare il contenuto del form */
    align-items: center;
    justify-content: center;
    overflow: auto; /* Permetti lo scroll se il contenuto è troppo grande */
}

/* Assicurati che il pulsante di chiusura della ricerca sia visibile */
.af-search-close {
    z-index: 1001; /* Ancora più alto per stare sopra il form di ricerca */
    position: fixed; /* O absolute, a seconda del suo contenitore */
    top: 20px; /* Posizionamento dall'alto */
    right: 20px; /* Posizionamento da destra */
    cursor: pointer;
    font-size: 2em; /* O la dimensione appropriata per la tua icona X */
    color: #fff; /* Colore della X */
}