@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Noto+Serif:wght@400;600&family=Roboto:wght@300;400;700&family=Source+Sans+Pro:wght@300;400;600&display=swap');

:root{

    /* fonts */
    --font-primary:'Roboto', sans-serif;
    --font-headline:'Noto Serif', serif;
    --font-category:'Montserrat', sans-serif;
    --font-tag:'Source Sans Pro', sans-serif;

    /* colors */
    --theme-red: #E22025;
    --theme-blue: #018CF1;
    --theme-green: #19C22A;
    --theme-orange: #FA7800;
    --theme-purple: #6E41E2;
    --theme-indigo: #5A2490;
    --theme-dark: #171F32;
    --theme-light: #F7F7F7;
    --theme-gray: #83858F;
    --theme-gray-dark: #54555E;
    --theme-gray-light: #E3E4E8;

}

body {
    font-family:var(--font-primary);
    font-size:1rem;
    font-weight:400;
    background-color:var(--theme-light);
}

h1,h2,h3,h3,h4,h5 {
    font-family:var(--font-headline);
    line-height:1;
    font-weight:700;
}

hr {
    border:1px solid var(--theme-gray-light);
}

.not-desktop { display:none; }
.only-desktop { display:block; }

.modal-content {
    border-radius:0;
}

    .modal-close {
        float:right;
        cursor:pointer;
        font-size:1.6rem;
        margin-top: -1.75rem;
        margin-right: -1.5rem;
    }

    .modal-body h1,.modal-body h2,.modal-body h3 {
        color:var(--theme-red);
    }

    .modal-body p {
        color:var(--theme-gray);
    }

    .modal-body a {
        color:var(--theme-red);
    }

#top-bar {
    background:white;
    border-radius:5px;
}

    .top-bar-title {
        display:inline-block;
        font-family: var(--font-tag);
        background:var(--theme-red);
        color:white;
        font-size:0.9rem;
        font-weight: bold;
        text-transform: uppercase;
        border-bottom-left-radius: 5px;
        padding:.5rem 1rem;
    }

    .top-bar-link {
        color:var(--theme-gray);
        font-size:.9rem;
        text-decoration:none;
        display:block;
    }

    .top-bar-link:hover {
        text-decoration:underline;
        color:var(--theme-gray-dark);
    }

    .top-bar-nav {
        padding-right:.5rem;
    }

    .top-bar-nav a {
        color:var(--theme-dark);
        margin-left:.25rem;
    }

    .vertical-slider {
        height:20px;
        margin:0px;
        padding:0px;
        list-style-type: none;
        margin-top:-4px;
        padding-left:.75rem;
        overflow:hidden;
    }

#header {
    padding-top:2rem;
    padding-bottom:2rem;
}

    #header ul {
        margin:0px;
        padding:0px;
        list-style-type: none;
    }

    #header ul li {
        display:inline-block;
        margin-right:1rem;
    }

    #header ul li a {
        color:var(--theme-dark);
        text-decoration:none;
        font-size:0.9rem;
    }

    #header ul li a:hover {
        text-decoration:underline;
    }

    #header .logo-large {
        max-width:460px;
    }

#header-menu {
    padding-top:1.5rem;
    padding-bottom:1.5rem;
    border-top:1px solid var(--theme-gray-light);
    border-bottom:1px solid var(--theme-gray-light);
    margin-bottom:2rem;
}

    #header-menu ul {
        margin:0px;
        padding:0px;
        list-style-type: none;
    }

    #header-menu ul li {
        display:inline-block;
    }

    #header-menu ul li a {
        color:var(--theme-dark);
        font-size:.9rem;
        padding:0.5rem;
        font-weight:bold;
        text-decoration:none;
        text-transform: capitalize;
    }

    #header-menu ul li a i {
        font-size:.7rem;
    }

    #header-menu ul li a:hover {
        text-decoration:none;
        color:var(--theme-red);
    }

    #header-menu a.has-submenu.active {
        background: white;
        color:var(--theme-red);
    }

    #header-menu ul li ul {
        position:absolute;
        background: white;
        border-top:none;
        padding:0.5rem 0.25rem;
        display:none;
        z-index:100;
        box-shadow: 0 3px 4px rgb(0 0 0 / 8%);
        min-width:130px;
    }

    #header-menu ul li ul li {
        display:block;
    }

    #header-menu ul li ul li a {
        display:block;
        font-weight:normal;
        padding:0.25rem 0.25rem;
        color:var(--theme-dark);
    }


#header-menu .btn-search {
        font-size:1.25rem;
        color:var(--theme-dark);
    }

    #header-menu .btn-login {
        background:var(--theme-red);
        padding:1rem 1.5rem;
        border-radius:5px;
        color:white;
        font-family: var(--font-headline);
        text-decoration:none;
    }

    #header-menu .btn-login:hover {
        background:var(--theme-dark);
    }

    #header-menu .btn-login i {
        background:#F9C7C8;
        padding:.5rem;
        border-radius:50%;
        margin-left:.5rem;
        color:var(--theme-red);
    }

    #header-menu .btn-logout {
        background:var(--theme-gray-dark);
    }

    #header-menu .btn-logout i {
        background:var(--theme-gray-light);
        color:var(--theme-gray-dark);
    }

    #search-input {
        display:none;
    }

    .search-input {
        min-width:90%;
        padding:.45rem 1rem;
        border-radius:30px;
        border:1px solid var(--theme-red);
        font-family:var(--font-headline);
    }

#footer {
    background:white;
    padding:2rem 0;
    font-size:0.85rem;
    color:var(--theme-gray);
}

    #footer .col-title {
        font-size:1.05rem;
        color:var(--theme-dark);
    }

    #footer .col-contact a {
        color:var(--theme-red);
        text-decoration:none;
    }

    #footer .col-contact a:hover {
        text-decoration:underline;
    }

    #footer ul {
        margin:0px;
        padding:0px;
        list-style-type:none;
    }

    #footer ul li a {
        font-size:1.05rem;
        color:var(--theme-dark);
        text-decoration:none;
        text-transform: capitalize;
    }

    #footer ul li a:hover {
        text-decoration:underline;
    }

    #footer ul li ul {
        margin-top:0.7rem;
        margin-bottom:1rem;
    }

    #footer ul li ul li a {
        font-size:0.85rem;
        color:var(--theme-gray);
    }

    #footer .col-contact a.social-footer {
        display:inline-block;
        width:2rem;
        height:2rem;
        text-align:center;
        padding-top:.4rem;
        padding-bottom:.4rem;
        color:white;
        background:var(--theme-dark);
        border-radius:50%;
    }

    #footer .col-contact a.social-footer:hover {
        background:var(--theme-red);
    }

#tabs-homepage {
    display:none;
    padding-bottom:1rem;

}
#tabs-homepage a {
    color:var(--theme-gray);
    font-size:1.1rem;
    text-transform: uppercase;
    display:inline-block;
    margin-right:.5rem;
    text-decoration: none;
    font-weight:bold;
}

#tabs-homepage a:hover, #tabs-homepage a.active {
    color:var(--theme-red);
}

.story-hero {
    background: white;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);

}

    .story-hero img {
        width:100%;
        height:100%;
        object-fit: cover;
        border-radius: 5px 0px 0px 5px;
    }

    .story-hero h1 {
        font-family:var(--font-headline);
        font-size:2.1rem;
        line-height:1.35;
        letter-spacing: -0.5px;
        text-transform: none;
        font-weight:bold;
    }

    .story-hero h1 a {
        display:inline-block;
        text-decoration:none;
        color: var(--theme-dark);
    }

    .story-hero h1 a:hover {
       color:var(--theme-red);
    }

.story-vertical {
    border-radius:5px;
    background: white;
    height:100%;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
}

    .story-vertical img {
        display:block;
        height:180px;
        width:100%;
        object-fit: cover;
        border-radius: 5px 5px 0px 0px;
    }

    .story-vertical h2 {
        font-size:1.1rem;
        line-height:1.4;
        font-weight:500;
        letter-spacing: -0.5px;
        margin-bottom: 0px;
    }

    .story-vertical h2 a {
        display:inline-block;
        text-decoration:none;
        color: var(--theme-dark);
    }

    .story-vertical h2 a:hover {
        color:var(--theme-red);
    }

    .story-vertical .label-cat {
        z-index:100;
        margin-left: 10px;
        margin-top: -37px;
        position:relative;
        float:left;
    }

    .story-vertical-mare img {
        height:360px;
    }

    .story-vertical-mare h2 {
        font-size:1.7rem;
    }

    .story-vertical-carousel {
        box-shadow: none;
    }

.story-autor {
    margin-bottom:1rem;
    border-bottom:1px solid var(--theme-gray-light);
}

    .story-autor.is-last,.story-autor.is-last p {
        margin-bottom:0;
        border-bottom:none;
    }

    .story-autor img {
        width:50px;
        height:50px;
        object-fit: cover;
        border-radius:50%;
    }

    .story-autor h2 {
        margin-bottom:5px;
        font-size:1rem;
        line-height:1.3;
        font-weight:600;
    }

    .story-autor h2 a {
        display:inline-block;
        text-decoration:none;
        color: var(--theme-dark);
    }

    .story-autor h2 a:hover {
        color:var(--theme-red);
    }

    .story-autor p {
        margin-top:.75rem;
        font-size:0.75rem;
        color:var(--theme-gray);
    }

.story-orizontal {
    border-radius:5px;
    background: white;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
}

    .story-orizontal-mic {
        border-radius:0;
        background: transparent;
        box-shadow: none;
        border-bottom:1px solid var(--theme-gray-light);
        padding-bottom:.5rem;
        margin-bottom:1rem;
        height:80px;
    }

    .story-orizontal-mic.is-last {
        border-bottom:none;
        padding-bottom:0rem;
        margin-bottom:0em;
    }

    .story-orizontal img {
        display:block;
        height:180px;
        width:100%;
        object-fit: cover;
    }

    #categorie .story-orizontal img {
        height:250px;
    }

    #cautare .story-orizontal img {
        height:250px;
    }

    .story-orizontal-mare img {
        height:240px;
    }

    .story-orizontal-mic img {
        width:90px;
        height:60px;
        border-radius:5px;
        object-fit:cover;
    }

    .story-orizontal.img-right img {
        border-radius: 0px 5px 5px 0px;
    }

    .story-orizontal.img-left img {
        border-radius: 5px 0px 0px 5px;
    }

    .story-orizontal h2 {
        font-size:1.1rem;
        line-height:1.4;
        font-weight:500;
        letter-spacing: -0.5px;
        margin-bottom:.75rem;
    }

    .story-orizontal-mare h2 {
        font-size: 1.3rem;
    }

    .story-orizontal-mic h2 {
        font-size: 0.9rem;
        margin-bottom:0px;
    }

    .story-orizontal h2 a {
        display:inline-block;
        text-decoration:none;
        color: var(--theme-dark);
    }

    .story-orizontal h2 a:hover {
        color:var(--theme-red);
    }

    .story-orizontal .label-cat {
        z-index:100;
        margin-left: 10px;
        margin-top: -37px;
        position:relative;
        float:left;
    }

    .story-orizontal p {
        margin-top:1rem;
        color:var(--theme-gray);
        margin-bottom:0px;
        font-size:0.9rem;
    }

.story-list {
    margin:0px;
    padding:0px;
    list-style-type:none;
}

    .story-list li {
        display:flex;
        border-bottom:1px solid var(--theme-gray);
        padding-bottom:1rem;
        margin-bottom:1rem;
    }

    .story-list li i {
        color:var(--theme-gray-dark);
        margin-right:0.75rem;
        font-size:0.7rem;
        display:inline-block;
        margin-top:4px;
    }

    .story-list li a {
        display:inline-block;
        font-size:0.8rem;
        text-decoration:none;
        color:var(--theme-dark);
        line-height:1.5;
    }

    .story-list li a:hover {
        text-decoration:underline;
    }

    .story-list.story-list-light li a {
        color:white;
    }

    .story-list.story-list-light li i {
        color:var(--theme-blue);
    }

    .story-list.story-list-compact li {
        border-bottom:1px solid var(--theme-light);
        padding-bottom:0.5rem;
        margin-bottom:0.5rem;
    }

.story-image {
    border:none;
    height:100%;
}

    .story-image img {
        height:100%;
        width:100%;
        object-fit: cover;
    }

    .story-image .card-img-overlay {
        background: rgb(255,255,255);
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 83%);
    }

    .story-image h2 {
        font-size:1.1rem;
        line-height:1.4;
        font-weight:500;
        letter-spacing: -0.5px;
        margin-bottom:1rem;
    }

    .story-image h2 a {
        display:inline-block;
        text-decoration:none;
        color: var(--theme-light);
    }

    .story-image h2 a:hover {
        text-decoration:underline;
    }

    .story-image .label-autor {
        color:white;
    }

    .story-image .label-autor a {
        color:var(--theme-blue);
    }

.story-simple {
    margin-bottom:1rem;
    border-bottom:1px solid var(--theme-gray-light);
}

    .story-simple.is-last,.story-simple.is-last p {
        margin-bottom:0;
        border-bottom:none;
    }

    .story-simple h2 {
        margin-bottom:10px;
        font-size:0.95rem;
        line-height:1.2;
        font-weight:600;
    }

    .story-simple h2 a {
        display:inline-block;
        text-decoration:none;
        color: var(--theme-dark);
    }

    .story-simple h2 a:hover {
        color:var(--theme-red);
    }

    .story-simple p {
        margin-top:.75rem;
        font-size:0.75rem;
        color:var(--theme-gray);
        text-transform:uppercase;
    }

.label-cat {
    display: inline-block;
    font-family: var(--font-tag);
    background: var(--theme-red);
    color: white;
    font-size: 0.725rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius:5px;
    padding: 0.15rem 0.75rem;
}

.label-autor {
    font-family:var(--font-tag);
    font-size:0.8rem;
    line-height:1.3;
    font-weight:bold;
    text-transform: uppercase;
    color:var(--theme-gray);
}

.label-autor a {
    color:var(--theme-red);
    text-decoration:none;
}

.card-custom {
    border-radius:5px;
    background: white;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
    padding:1rem;
}

h1.titlu-widget ,h2.titlu-widget ,h3.titlu-widget ,h3.titlu-widget ,h4.titlu-widget ,h5.titlu-widget ,h6.titlu-widget  {
    font-family:var(--font-primary);
    text-transform: uppercase;
    color:var(--theme-red);
    font-weight:bold;
    letter-spacing: 0.05em;
}

.color-inverse h1.titlu-widget, .color-inverse h2.titlu-widget,.color-inverse h3.titlu-widget,.color-inverse h4.titlu-widget,.color-inverse h5.titlu-widget,.color-inverse h6.titlu-widget {
    color:white;
}

h6.titlu-widget  { font-size:1rem; }
h5.titlu-widget  { font-size:1.1rem; }
h4.titlu-widget  { font-size:1.2rem; }
h3.titlu-widget  { font-size:1.3rem; }
h2.titlu-widget  { font-size:1.4rem; }
h1.titlu-widget  { font-size:1.5rem; }

#col-abonare {
    border-radius:5px;
    background:var(--theme-dark);
    padding:2rem;
    color:white;
}

    #col-abonare h3 {
        color:var(--theme-red);
        line-height:1.4;
        margin-bottom:1.5rem;
    }

    #col-abonare p,#col-abonare ul {
        font-size:0.9rem;
    }

    #col-abonare p a {
        color:white;
        text-decoration:underline;
    }

#paywall {
    border-radius:5px;
    background:var(--theme-light);
    padding:1.5rem;
    color:black;
    border:1px dotted var(--theme-gray);
}

#paywall .btn-dark,#paywall .btn-outline-danger:hover {
    color:white !important;
}

#promo-abonare-footer {}

    #promo-abonare-footer .coperta {
        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
    }

    #promo-abonare-footer h1 {
        color:var(--theme-red);
        line-height:1.1;
        font-weight:bold;
        margin-bottom:1.5rem;
    }

    #promo-abonare-footer p {
        font-size:0.9rem;
    }

    #promo-abonare-footer p a {
        color:var(--theme-red);
    }

#articol {}

    #articol .cover-image img {
        border-radius:5px;
    }

    #articol a.social-icon {
        display:block;
        width:2rem;
        height:2rem;
        text-align:center;
        padding-top:.27rem;
        padding-bottom:.4rem;
        color:white;
        background:var(--theme-dark);
        border-radius:50%;
        margin-bottom:5px;
        margin-left:auto;
        margin-right:auto;
    }

    #articol a.social-icon:hover {
        background:var(--theme-red);
    }

    #articol h1 { line-height:1.15; }

    #articol .continut {
        color:var(--theme-gray-dark);
    }

    #articol .continut a {
        color:var(--theme-red);
    }

    #articol .continut p {
        font-size:1rem;
        line-height:1.55;
    }

    #articol .continut .note-autor p {
        font-size:0.9rem;
    }

    figcaption {
        font-size:0.8rem;
        margin-top:.5rem;
    }

    #articol .continut h2,#articol .continut h3,#articol .continut h4,#articol .continut h5 {
        margin-bottom:1rem;
        color:var(--theme-dark);
        line-height:1.2;
    }

    #articol .continut p.sapou {
        font-size:1.2rem;
        color:var(--theme-dark);
    }

    #articol .continut img {
        object-fit: contain;
        height: auto;
        max-width:100%;
    }

    blockquote {
        color:var(--theme-gray-dark);
        font-size:1.05rem;
        font-weight: 300;
        background-image:url("../img/quote.png");
        background-size:60px;
        padding-left:80px;
        background-repeat:no-repeat;
        background-position:0px 5px;
        margin-top:2rem;
        margin-bottom:2rem;
    }

        blockquote a {
            color:var(--theme-red);
        }

        blockquote a:hover {
            color:var(--theme-dark);
        }

    #articol .tags {
        font-size:0.8rem;
        letter-spacing: 0.05em;
    }

    #articol .tags span {
        font-weight:bold;
        color:var(--theme-dark);
    }

    #articol .tags a {
        font-size:0.7rem;
        display:inline-block;
        text-transform: uppercase;
        color:var(--theme-gray-dark);
        text-decoration:none;
        font-weight:bold;
        background:var(--theme-light);
        padding:0.1rem 0.5rem;
        margin-left:.5rem;
    }

    #articol .tags a:hover {
        color:var(--theme-light);
        background:var(--theme-dark);
    }

    .cover-video {
        border:none;
        height:auto;
    }

    .cover-video .card-img {
        height:600px;
        width:100%;
        object-fit: cover;
        border-radius:0px;
    }

    .cover-video .card-img-overlay-content {
        background: rgb(255,255,255);
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 73%);
    }

    .cover-video h1 {
        color:white;
        z-index:101;
    }

    .cover-video .label-autor {
        z-index:101;
        color:var(--theme-light);
    }

    .cover-video .play-video {
        z-index:100;
    }

    .cover-video .play-video img {
        width:7rem;
    }

    #galerie {
        margin-top:1rem;
        margin-bottom:1rem;
    }

    #galerie img {
        border-radius:5px;
    }

    .owl-widget img {
        width:100%;
        height:auto;
    }

    .owl-theme.owl-widget .owl-dots {
        margin-top: -4rem !important;
        margin-bottom: 2.5rem;
        position: relative;
    }

#categorie {}

    #categorie h1 {
        font-size:1.3rem;
        font-weight: bold;
        text-transform: uppercase;
        color:var(--theme-gray);
        font-family: var(--font-category);
    }

#cautare {}

    #cautare h1 {
        font-size:1.3rem;
        font-weight: bold;
        text-transform: uppercase;
        color:var(--theme-gray);
        font-family: var(--font-category);
    }

.page-link,.page-link:hover {
    color:var(--theme-dark);
}

.active>.page-link, .page-link.active {
    z-index: 3;
    color: white;
    background-color: var(--theme-red);
    border-color: var(--theme-red);
}

.load-more {
    font-size:0.85rem;
    font-weight:bold;
    text-transform: uppercase;
}

.arhiva-revista img {
    min-height:400px;
    width:100%;
    object-fit:cover;
}

#cookiebar {
    position:fixed;
    bottom:0;
    background:var(--theme-red);
    color:white;
    font-size:.85rem;
}

#cookiebar a {
    display:inline-block;
    padding:3px 10px;
    color:white;
    border:1px solid white;
    border-radius:5px;
    text-decoration:none;
}

#cookiebar a:hover {
    text-decoration:underline;
}

/* RESPONSIVE SMALL */
@media (max-width: 990px) {

    #tabs-homepage { display:block; }

    .not-desktop { display:block; }
    .only-desktop { display:none; }

    .top-bar-title {
        display:block;
        border-radius:5px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        text-align:center;
        padding: 0.25rem 1rem;
    }

    .vertical-slider {
        margin-top:0;
        padding:.5rem;
        height:55px;
    }

    #header {
        padding-top: 1.5rem;
        padding-bottom: 1rem;
        border-bottom:1px solid var(--theme-gray-light);
        margin-bottom:1rem;
    }

        .mobile-icon-menu a {
            font-size:1.3rem;
            color:var(--theme-dark);
            margin-left:.65rem;
        }

        #search-mobile,#menu-mobile {
            padding-top:1.25rem;
            display:none;
        }

        .search-input {
            width: 100%;
            padding: .45rem 1rem;
        }

    #menu-mobile ul li {
        display:block;
    }

        #menu-mobile ul li i {
            float:right;
        }

        #menu-mobile ul li a {
            display:block;
            font-size:1rem;
            font-weight:bold;
            padding:.5rem 0;
        }

        #menu-mobile ul li ul {
            display:none;
            margin-left:1rem;
            margin-bottom:.5rem;
        }

        #menu-mobile ul li ul li a {
            color:var(--theme-gray-dark);
            font-weight:normal;
            padding:.3rem 0;
        }

        .col-contact {
            text-align:center;
        }

        #footer {
            padding:1rem;
        }

        .story-hero img {
            border-radius: 5px 5px 0px 0px;
        }

        .story-hero h1 {
            font-size:1.5rem;
        }

        #cautare .story-orizontal img {
            height:180px;
        }

        #cautare h1 {
            font-size: 1.15rem;
        }

        #articol a.social-icon {
            display:inline-block;
        }

        .cover-video .play-video img {
            width:3rem;
        }

        .cover-video .card-img {
            height:400px;
        }

    .cover-video h1 {
        font-size:1.3rem;
        line-height:1.4;
    }

    #promo-abonare-footer a {
        font-size:0.9rem;
    }


}

@media (min-width:1000px) and (max-width: 1440px) {
    .story-hero h1 {
        font-size:1.5rem;
    }
}

@media (min-width:768px) and (max-width: 1000px) {
    .story-hero h1 {
        font-size:1.2rem;
    }
}