* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    margin: 5px auto 0 auto;
    max-width: 990px;
    font-family: Georgia, Times, "Times New Roman", serif;
    font-size: 15px;
    line-height: 1.5;
}


/* FONTS */

@font-face {
    font-family: BebasNeueRegular;
    src: url("../fonts/BebasNeueRegular.otf") format("opentype");
}

@font-face {
    font-family: FontAwesome6Brands;
    src: url("../fonts/FontAwesome6Brands.otf") format("opentype");
}

@font-face {
    font-family: FontAwesome6FreeSolid;
    src: url("../fonts/FontAwesome6FreeSolid.otf") format("opentype");
}

/* GENERAL */
img {
    width: 100%;
}
a {
    text-decoration: none;
    color: black;
}
ul {
    list-style-type: none;
}


/* NAVIGATION BAR */

nav {
    position: page;
    display: block;
    font-family: "BebasNeueRegular", serif;
    font-size: 15px;
    text-align: left;
    letter-spacing: 0.75px;
    padding: 0.5em;
    color: #2da8c6;
    border-bottom: 3px solid #CCC;
}
.line-one, .line-two {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 15px;
    align-items: center;
}
#userbar-left, #userbar-right, .sitelinks, .social {
    display: flex;
    flex-direction: row;
}

/* line-one */
a.podcast, a.shop, a.entra {
    padding: 7.5px;
}
a.entra {
    color: #2da8c6;
}
a.abbonati {
    background-color: #ffe725;
    padding: 7.5px 7.5px 5px 7.5px;
    border-radius: 5px;
    margin-left: 5px;
}
.abbonati span {
    font-size: 12px;
}

/* line-two mobile */
#tre-linee, #icona-cerca{
    display: none;
    font-size: large;
    padding: 10px 20px;
}

/* line-two */
.logo img {
     width: 230px;
     height: 92px;
 }
.sectionbar {
    display: flex;
    flex-direction: column;
}
.sitelinks {
    justify-content: space-between;
    padding-bottom: 6px;
    border-bottom: 1px solid #CCC;
    margin-bottom: 5px;
    margin-top: 10px;
}
.sitelinks a {
    padding: 0 3px;
}
.social a {
    line-height: 20px;
    font-size: 12px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    letter-spacing: normal;
    padding: 0 5px;
    border-radius: 2px;
    margin-right: 4px;
}
.social a:hover {
    text-decoration: underline;
}
a.twitter {
    color: white;
    background-color: #1b95e0;
}
a.facebook {
    color: white;
    background: #1877f2;
}
.facebook:before {
    font-family: "FontAwesome6Brands";
    content: "\f39e";
    color: white;
}
.instagram {
    color: white;
    background-color: #c13584;
}
a.telegram {
    color: white;
    background-color: #08c;
}
a.telegram:before {
    font-family: "FontAwesome6Brands";
    content: "\f3fe";
}
.cerca, .cerca input {
    background-color: #f5f5f5;
    font-family: BebasNeueRegular, serif;
    margin-left: auto;
    letter-spacing: 0.75px;
}
.cerca input {
    padding: 2px;
    font-size: 12px;
}


/* MAIN PART */

.main {
    display: grid;
    grid-template-columns: 52% 33% 15%;
    margin-top: 10px;
}
.left-section, .center-section, .right-section {
    border-right: 1px solid #CCC;
    padding: 0 15px;
}
.right-section {
    border-right: none;
}


/* LEFT-SECTION */

.mini-section {
    display: flex;
    flex-direction: row;
    font-family: Georgia, Times, "Times New Roman", serif;
    font-size: 13px;
    border-bottom: 1px solid rgb(204, 204, 204);
    margin-bottom: 1px;
}
.mini-section a:hover {
    text-decoration: underline;
}
a.mini-article {
    padding: 0 5px 5px 5px;
    margin-bottom: 10px;
    border-right: 1px solid rgb(204, 204, 204);
}
a.mini-article:nth-child(3) {
    border-right: none;
}
#first-article {
    border-top: 1px solid rgb(204, 204, 204);
    padding: 10px 0;
    border-bottom: 1px solid rgb(204, 204, 204);
    display: flex;
    flex-direction: column;
}
#first-article img {
    margin-right: 10px;
}
#first-article-text {
    max-width: 100%;
}
#first-article h2 {
    font-size: 24px;
    line-height: 1em;
}
#first-article p {
    font-size: 12px;
}
.article {
    padding: 10px 0;
    border-bottom: 1px solid rgb(204, 204, 204);
    font-weight: normal;
    height: auto;
    display: grid;
    grid-template-columns: 22% 88%;
    text-rendering: optimizeLegibility;
}
#middle-article {
    border-top: 1px solid rgb(204, 204, 204);
}
.article a img {
    padding-top: 5px;
    vertical-align: center;
}
.article-text {
    padding: 6px 13px;
    max-width: 87%;
}
.article-text h2 {
    font-family: Georgia, Times, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.1em;
    font-weight: 400;
    letter-spacing: 0.35px;
}
.article-text p {
    color: #333;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.3em;
    font-weight: 400;
    letter-spacing: 0.1px;
}
.article-text a:hover {
    text-decoration: underline;
}
#virgolette{
    padding-bottom: 10px;
}
#bits-left{
    display: none;
}

/* CENTER-SECTION */

/* news */
#news-title {
    color: white;
    background-color: #2da8c6;
    font-family: "BebasNeueRegular", serif;
    font-weight: 400;
    font-size: 14px;
    padding: 2.1px 0 5px 4.2px;
    vertical-align: center;
    letter-spacing: 0.05em;
    height: 15px;
}
ul.news-list li {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    color: #000;
    padding: 0.5em 0 0.5em 1.5em;
    border-bottom: 1px dotted #CCC;
}
ul.news-list li::before {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    content: "■";
    font-size: 1px;
    color: #2da8c6;
    padding-right: 8px;
}
ul.news-list li a:hover {
    text-decoration: underline;
}

/* images */
.centre-right-image{
    font-family: "BebasNeueRegular", serif;
    color: #2da8c6;
    background-color: #f5f5f5;
    padding: 0 0.5em 0 0.5em;
    margin: 1em auto 0 auto;
}
.centre-right-image a{
    font-family: "BebasNeueRegular", serif;
    color: #2da8c6;
}
.podcast-app{
    margin-top: 15px;
}

/* flashes */
.flashes{
    margin-top: 10px;
}
.flashes-title {
    background-color: #292929;
    display: flex;
    justify-content: center;
}
.flashes-title img{
    width: 93.15px;
    height: 36px;
    padding: 3px 0 5px 0;
}
#flashes-list{
    background-color: #efefef;
    padding: 2px 0;
}
#flashes-list li{
    display: grid;
    grid-template-columns: 75% 25%;
    background-color: white !important;
    margin: 4px 4px;
}
#flashes-list li a {
    padding: 14px 10px;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
}
#flashes-list li img {
    width: 95%;
    margin: auto 0 auto auto;
    padding: 2px;
}

/* prime-pagine */
#prime-pagine{
    display: grid;
    grid-template-columns: 33.333% 33.333% 33.333%;
}
#prime-pagine a{
    padding: 0 5px;
}

/* cit */
.cit{
    margin: 0.5rem 1rem;
    margin-top: 1rem;
    text-align: center;
    font-weight: 200;
    font-size: 16px;
}
.cit a:hover{
    text-decoration: underline;
}
.cit h4 span{
    font-family: "BebasNeueRegular", serif;
    font-size: 22px;
    font-weight: lighter;
    background-color: #ffe725;
    padding: 4px 4px 2px 4px;
}
.cit h5, .cit h6{
    font-family: Georgia, Times, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 200;
    margin-top: 5px;
}
.cit h6{
    color: grey;
}


/* RIGHT SECTION */

/* bits */
.bits h1{
    color: white;
    background-color: #BB1212;
    font-family: "BebasNeueRegular", serif;
    font-weight: 400;
    font-size: 14px;
    padding: 2.1px 0 5px 4.2px;
    vertical-align: center;
    letter-spacing: 0.05em;
    height: 15px;
}
.bits h1 a{
    color: white;
}
.bits-item{
    font-family: Georgia,Times,"Times New Roman",serif;
    font-weight: 400;
    padding: 0.5em 0 0.5em 0;
    border-bottom: 1px dotted #CCC;
}
.hour{
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-weight: 400;
    color: #333333;
}
.bit a{
    display: block;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.4em;
}
.bit a:hover{
    text-decoration: underline;
}
#other-bits{
    display: flex;
    justify-content: flex-end;
}
#other-bits a{
    font-style: italic;
    font-weight: 200;
}

/* dalla-redazione */
#dalla-redazione-title, #ultime-gallery-title{
    font-size: 0.6rem;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}
.redaz a{
    display: block;

    line-height: 1.4em;
    font-size: 0.65rem;
}
.redaz a:hover{
     text-decoration: underline;
 }
.dalla-redazione-item, .ultime-gallery-item{
    padding: 0.3rem 0;
    border-bottom: 1px dotted #CCC;
}
.dalla-redazione-item .hour{
    font-size: 10px;
}
.dalla-redazione-item p{
    font-size: 0.65rem;
    color: #333333;
}

/* ultime-gallery */
#ultime-gallery-title{
    margin: 1.5rem 0 0.3rem 0;
}
.ultime-gallery-item a{
    display: block;
    text-align: center;
    font-size: 0.65rem;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.ultime-gallery-item a:hover{
    text-decoration: underline;
}

/* FOOTER SECTION */

footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 12px;
    font-family: Times, serif;
    border-top: 5px solid #29a6c4;
    padding: 15px;
    margin: 20px 20px 0 20px;
}
.footer-items {
    margin-left: auto;
}
.footer-items a {
    color: #2da8c6;
    padding: 0 3px;
}
.footer-text {
    padding-left: 3px;
}
.logo-mini a img {
    width: 100px;
}


/* IPAD MODE */

@media only screen and (max-width: 908px) {
    #tre-linee, #icona-cerca{
        display: block;
    }
    .logo img{
        width: 150px;
        height: 60px;
    }
    .sectionbar{
        display: none;
    }
    .main {
        display: grid;
        grid-template-columns: 60% 40%;
    }
    .center-section {
        border-right: none;
    }
    .right-section, .trattino {
        display: none;
    }
    footer {
        flex-direction: column;
    }
    .footer-items {
        margin-left: 0;
    }
}


/* MOBILE MODE */

@media only screen and (max-width: 685px) {
    .main {
        grid-template-columns: 100%;
        grid-auto-flow: row;
    }
    .left-section {
        border-right: none;
    }
    .article {
        padding: 10px 0;
        display: flex;
        flex-direction: column;
    }
    .article-text{
        max-width: 100%;
    }
    #bits-left{
        display: block;
        margin-top: 20px;
    }
    .bits-item{
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #CCC;
    }
    /* possibile implementazione quadratino rosso lista bits
    li.bits-item::before {
        content: "■";
        font-size: 1px;
        color: #BB1212;
        padding-right: 8px;
    }*/
    #last-article{
        padding: 10px 0;
        border-bottom: 1px solid rgb(204, 204, 204);
        margin-bottom: 20px;
    }
    #flashes-list li {
        grid-template-columns: 85% 15%;
    }
    #flashes-list li a {
        font-size: 16px;
        line-height: 18px;
    }
}