/**
 * details.css
 *
 * Contains the style of the details page.
 * The magazine and bonus pages have the same layout.
 *
 * Index
 * - DETAILS
 *
 * Media
 * - TABLET
 * - DESKTOP
 */

/* ------------------------------------ *
 * #DETAILS
 * ------------------------------------ */
.details {
    margin: 0 0 40px;
}
.details.details-magazine {

}
.details.details-bonus {

}
.details-back {
    display: block;
    padding: 15px 0;
    text-decoration: none;
}
.details-back:before {
    content: '\f0d9';
    font-family: FontAwesome;
    padding: 0 5px 0 0;
}
.details-back span {
    text-decoration: underline;
}

.details-image {
    position: relative;
}
.details-image img {
    display: block;
    width: 100%;
    max-width: 320px;
}

.details-image-manufacturer {
    max-width: 320px;
}
.details-image-manufacturer img {
    display: block;
    margin: 0 auto;
    width: auto;
}

.details-longdesc {
    width: 88%;
    margin: 15px 0;
}
.details-longdesc ul {
    padding-left: 20px;
}
.details-longdesc li {
    padding: 2px 0;
}

.details-frequency {
    margin: 15px 0;
}

.details-runtime {

}

.details-price {
    margin: 15px 0;
    font-size: 1.3em;
}
.details-price span {

}
.details-price span :nth-child(1),
.details-price span :nth-child(2) {
    font-family: AmbleBold;
    color: rgb(131, 192, 41);
}


.details-buttonrow {

}



/* #TABLET */
@media screen and (min-width: 640px) {
    .details-back {
        display: none;
    }
}



/* #DESKTOP */
@media screen and (min-width: 1024px) {
    /* #DETAILS */
    .details > h2 {
        margin-top: 5px;
    }
    .details-image {
        float: left;
        width: 320px;
    }
    .details-container {
        float: right;
        width: 390px;
        margin: 0 0 15px;
    }
    .details-longdesc,
    .details-longdesc p:first-child {
        margin-top: 0;
    }
}