body{margin: 0;overflow-x: hidden;font-family: Georgia, serif;background: #000;padding: 60px;}
html {margin: 0;min-height: 100%;height: 100%;}
h1,h2,h3,h4,h5{color: #000;margin: 0;font-weight: 400;}
p{color: #000;font-size: 1em;margin: 0;}
a{color: #000;text-decoration: none;}

/*HEADER*/
header h1{text-align: center;margin-bottom: 60px;font-size: 3em;color: #FFF;}
.logo_42{position: absolute;right: 60px;top: 60px;}
.logo_42 img{height: 42px;width: auto;filter: invert(1);}

/*ARTICLE*/
.box{margin-bottom: 90px;text-align: center;}
.box h3{text-align: center;margin-bottom: 90px;font-size: 2em;}
.box img{height: 600px;width: auto;display: inline-block;}
.box p{line-height: 2em;font-size: 1.1em;}
.box a{background: #000;color: #FFF;padding: 5px 15px;font-size: 1.1em;font-weight: 600;margin-top: 90px;display: inline-block;}
.row{width: 550px;height: 1px;background: #000;display: inline-block;margin-top: 90px;}

/*NEW*/
.black{background: #000;}
.black header h1{color: #FFF;font-size: 3em;}
.black .logo_42 img {
    filter: invert(1);
}
.icani {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.icani img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    width: 30%;
}
.ascolta .btn {
    margin-top: 60px;
}

.btn {
    display: inline-block;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    padding: 5px 15px;
    font-size: 1.1em;
    font-weight: 600;
}
.ascolta{text-align: center;}
.data_prev{display: none;}
.telegram{position: absolute;left: 60px;top: 60px;}
.telegram img{height: 42px;width: auto;}
.prevendite{margin-bottom: 60px;}
.prevendite h3{
    display: inline-block;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    padding: 5px 15px;
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 60px;
}

.icani.post_prev{flex-direction: row;align-items: flex-start;}
.icani.post_prev .postmortem{padding-left: 30px;padding-right: 30px;}
.icani.post_prev .postmortem img{width: 60%;height: auto;}
.prevendite{padding-left: 30px;padding-right: 30px;}
.icani.post_prev .prevendite img{width: 60%;height: auto;}
.icani.post_prev .postmortem,
.icani.post_prev .prevendite {width: 50%;box-sizing: border-box;margin-bottom: 0;}
.no_active{display: none !important;}
.mockup_disco{display: none;}
.mockup{width: 50%;box-sizing: border-box;margin-bottom: 0;padding-left: 30px;padding-right: 30px;}
.icani.disco{flex-direction: row;align-items: flex-start;}
.icani.disco img{width: 90%;}
.link_disco{margin-bottom: 60px;}
.icani.post_prev .mockup img {width: 100%;height: auto;}
.icani img.new_image{display: none;}

@media (max-width: 1801px) {
    .mockup .btn{font-size: 1em;}
}

@media (max-width: 1601px) {
   .mockup{padding-left: 15px;padding-right: 15px;}
   .icani.post_prev .postmortem.mockup{padding-left: 15px;padding-right: 15px;}
   .mockup .btn {padding: 5px 10px;}
}

@media (max-width: 1401px) {
    .mockup .btn{font-size: 0.8em;}
}

@media (max-width: 1201px) {
    .icani img{width: 40%;}
    body{padding: 60px 15px;}
    .telegram{left: 30px;}
    .logo_42{right: 30px;}
    .mockup .btn{font-size: 0.75em;}
}

@media (max-width: 992px) {
    header h1{font-size: 2.5em;}
    .box h3{font-size: 1.7em;}
    .box img{height: 450px;}
    .box p{font-size: 1em;}
    .box a{font-size: 1em;}
    .btn{font-size: 1em;}
    .icani img{width: 80%;}
    .icani.post_prev {flex-direction: column-reverse;align-items: center;}
    .icani.post_prev .postmortem, .icani.post_prev .prevendite {width: 100%;/* padding: 0; */}
    .icani.post_prev .postmortem img, .icani.post_prev .prevendite img, .icani.post_prev .mockup img{width: 100%;}
    .icani.post_prev .prevendite{margin-bottom: 60px;}
    .icani.disco {flex-direction: column;align-items: center;}
    .mockup{margin-bottom: 0;width: 100%;}
    .icani.disco img{width: 100%;}
    .postmortem.mockup{order: 4;}
    .disco.mockup{order: 3;margin-top: 60px;}
    .disco2.mockup{order: 2;margin-top: 60px;}
    .prevendite.mockup{order: 1;margin-top: 60px;}
    .mockup .btn{font-size: 1em;padding: 5px 15px;}
}
@media (max-width: 767px) {
    body{padding: 30px;}
    .logo_42{right: 30px;top: 30px;}
    .telegram{left: 30px;top: 30px;}
    .logo_42 img{height: 32px;}
    .telegram img{height: 32px;}
    header h1{font-size: 2em;}
    .box h3{font-size: 1.5em;}
    .box img{height: 280px;}
    .box p{line-height: 1.7em;}
    .row{width: 280px;}
    .icani img{width: 90%;}
    .prevendite h3, .btn{font-size: 14px;}
    .icani.post_prev .postmortem.mockup {padding-left: 0px;padding-right: 0px;}
    .mockup{padding-left: 0px;padding-right: 0px;}
    .prevendite, .icani.post_prev .postmortem{padding-left: 0px;padding-right: 0px;}
}
@media (max-width: 320px) {
    .box img{height: 230px;}
    .row{width: 230px;}
    .logo_42 img{height: 24px;}
    .telegram img{height: 24px;}
    header h1{font-size: 2em;}
    .box h3{font-size: 1.2em;}
    .prevendite h3{font-size: 12px;}
}