* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #1b1b1d;
    color: white;
}

nav {
    min-width: 350px;
}

/*breadcrumb*/
li.the-on-page.phone {
    display: none;
}

li.the-on-page.tablet {
    display: none;
}

li.the-on-page.phone-420px {
    display: none;
}



/*news details content*/
div.newsdetails-herobanner-top-img {
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(27, 27, 29, 0.1), rgb(27, 27, 29, 1)), url("../img/newsdetails-images/Ado-newsdetails-herobanner-top-leftrightadoblankcenter.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 700px;
    background-position: center;
    margin-top: 50px;
    min-width: 350px;
}

.newsdetails-herobanner {
    display: flex;
    justify-content: center;
}


.newsdetails-header {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

h3.newsdetails-heading {
    padding: 0px;
    margin: 0px;
}

h5.newsdetails-subheading {
    padding: 15px 0px;
    margin: 0px;
}

/*live*/
.live-info {
    min-width: 350px;
}

div.information-content {
    display: flex;
    gap: 35px;
    align-items: center;

}

.details-info-image {
    flex: 1;
    min-width: 350px;
}

img.details-info-image {
    min-width: 200px;
}

div.details-info-description {
    flex: 1;
}

h4.details-info-heading {
    padding: 0px;
    margin: 0px;
}

h5.details-info-subheading {
    font-weight: 650;
    margin: 15px 0px;
}

ul.details-points {
    font-family: 'Futura Std', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 3vw, 20px);
    margin: 0px;
}

/*product version*/
div.product-section1 {
    background-image: linear-gradient(to top, #1b1b1d, #07175d, #1b1b1d);
    margin-top: 60px;
    min-width: 350px;
}

h4.details-center-heading {
    text-align: center;
    padding: 45px 0px;
    margin: 0px;
}

.product-info-mobile {
    display: none;
}

.product-info {
    display: flex;
    gap: 25px;
    align-items: center;
}

div.blu-ray,
div.dvd {
    flex: 1;
    background-color: #1b1b1d;
    border: 1px solid white;
    padding: 0px 25px 25px 25px;
}

div.blu-ray-2,
div.dvd-2 {
    flex: 1;
    background-color: #07175d;
    border: 1px solid white;
    padding: 0px 25px 25px 25px;
}


.ver-caption {
    font-weight: 650;
    padding: 20px 0px;
    margin: 0px;
}

div.price {
    display: flex;
    gap: 10px;
}

h5.price {
    font-weight: 400;
    padding: 10px 0px;
    margin: 0px;
}

h4.value {
    font-weight: 650;
    padding: 10px 0px;
    margin: 0px;
}

.tax {
    font-weight: 300;
    font-size: clamp(14px, 2.5vw, 16px);
}

.included {
    font-weight: 400;
    padding: 10px 0px;
    margin: 0px;
}

img.shinzou-product {
    max-width: 35%;
}

h3.ver-heading {
    font-weight: 650;
    text-align: center;
}

div.product-section2 {
    margin-top: 100px;
    min-width: 350px;
}

/*feature song*/
div.featurehitsong-banner-img {
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(27, 27, 29, 0.2), rgba(27, 27, 29, 0.2), rgb(27, 27, 29, 1)), linear-gradient(to top, rgba(255, 0, 0, 0), rgba(27, 27, 29, 0.2), rgba(27, 27, 29, 0.2), rgb(27, 27, 29, 1)), url("../img/newsdetails-images/Ado-newsdetails-banner-featurehitsong-adoredbg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 60%;
    background-position-y: 20%;
    height: 400px;
    min-width: 350px;
}

.feature-section {
    margin-top: -140px;
    min-width: 350px;
}


.feature-hit-songs {
    display: flex;
    gap: 15px;
}

.song-container {
    background-color: #1b1b1d;
    border: 1px solid white;
    padding: 20px 20px;
    text-align: center;
}

.song-img {
    max-width: 100%;
}

.song-name {
    font-weight: 650;
    padding: 15px 0px 8px 0px;
    margin: 0px;
}

.music-composer {
    font-weight: 400;
    padding: 0px;
    margin: 0px;

}

/*notes section*/
.notes-section {
    display: flex;
    gap: 35px;
    align-items: center;
    margin: 100px 0px 50px 0px;
    min-width: 350px;
}

div.notes-content {
    display: flex;
    gap: 35px;
    align-items: center;
}

.notes-description {
    padding: 0px 40px;
}

.notes-heading {
    padding: 0px;
    margin: 20px 0px;
}

.ado-shop {
    margin-top: 35px;
    display: flex;
    text-align: center;
    align-items: center;
    gap: 8px;
}

a.to-ado-shop {
    font-family: 'Futura Std', sans-serif;
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 650;
    color: #5D9DFE;
    text-decoration: underline;
}

a.to-ado-shop:hover {
    color: white;
}

footer {
    min-width: 350px;
}

@media screen and (max-width: 1024px) {

    /*live*/
    ul.details-points {
        font-size: clamp(16px, 2.5vw, 18px)
    }

    /*product*/
    .ver-caption {
        padding: 15px 0px 8px 0px;
        margin: 0px;
    }

    div.price {
        display: block;
    }

    h5.price {
        padding: 0px;
        margin: 0px;
    }

    h4.value {
        padding: 0px;
        margin: 0px;
    }

    /*notes*/
    .ado-shop {
        display: block;
        text-align: start;
    }

    a.to-ado-shop {
        font-size: clamp(18px, 3.8vw, 24px);
    }


}

@media screen and (max-width: 800px) {
    div.newsdetails-herobanner-top-img-mobile {
        background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(27, 27, 29, 0.2), rgb(27, 27, 29, 1)), url("../img/newsdetails-images/Ado-newsdetails-herobanner-top-leftrightadoblankcenter-mob.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        height: 600px;
        display: block;
        margin-top: 80px;
    }

    /*live*/
    div.information-content {
        flex-direction: column;

    }

    .details-liveinfo-image {
        max-width: 515px;

    }

    ul.details-points {
        font-size: clamp(16px, 2.5vw, 16px);
    }

    /*product*/
    img.shinzou-product-mobile {
        display: flex;
        width: 50%;
    }

    div.product-info-outer-container {
        display: flex;
        flex-direction: column;
    }

    .product-info-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .shinzou-product {
        display: none;
    }

    div.product-info {
        flex: 1;
        align-items: start;
    }

    div.price {
        display: flex;
        gap: 10px;
    }

    h5.price {
        padding: 10px 0px;
        margin: 0px;
    }

    h4.value {
        padding: 10px 0px;
        margin: 0px;
    }

    /*feature song*/
    .feature-hit-songs {
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: 20px;
    }


    /*notes*/
    div.notes-content {
        flex-direction: column-reverse;
    }

    a.to-ado-shop {
        font-size: clamp(18px, 3.5vw, 22px);
    }

    .ado-shop {
        display: flex;
        text-align: center;
        align-items: center;

    }

}

@media screen and (max-width:660px) {
    li.the-on-page.desktop {
        display: none;
    }

    li.the-on-page.tablet {
        display: inline-block;
    }

    div.price {
        display: block;
    }

    h5.price {
        padding: 0px;
        margin: 0px;
    }

    h4.value {
        padding: 0px;
        margin: 0px;
    }


}

@media screen and (max-width: 500px) {
    li.the-on-page.tablet {
        display: none;
    }

    li.the-on-page.phone {
        display: inline-block;

    }

    /*news details content*/
    .details-liveinfo-image {
        min-width: 350px;

    }

    /*product*/
    div.product-info {
        display: block;
    }

    .mobile-margin-bottom {
        margin-bottom: 15px;
    }

    div.price {
        display: flex;
        gap: 10px;
    }

    h5.price {
        padding: 10px 0px;

    }

    h4.value {
        padding: 10px 0px;
    }

    .tax {
        font-weight: 300;
        font-size: clamp(14px, 2.5vw, 16px);
    }

    .feature-hit-songs {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 20px;
    }


    /*notes*/
    .notes-description {
        padding: 0px 35px;
    }

    .notes-heading {
        margin: 0px 0px 20px 0px;
    }

    a.to-ado-shop {
        font-size: clamp(16px, 3vw, 20px);
    }

}

@media screen and (max-width: 420px) {
    li.the-on-page.phone {
        display: none;
    }

    li.the-on-page.phone-420px {
        display: inline-block;
    }
}