/*DESKTOP CSS*/
@font-face {
    font-family: 'AzoSans-Regular';
    src: url('https://www.next.co.uk/fonts/AzoSans-Regular-webfont.woff') format('woff');
}

@font-face {
    font-family: 'AzoSans-Medium';
    src: url('https://www.next.co.uk/fonts/AzoSans-Medium-webfont.woff') format('woff');
}

@font-face {
    font-family: 'AzoSans-Light';
    src: url('https://www.next.co.uk/fonts/AzoSans-Light-webfont.woff') format('woff');
}

body {
    font-family: 'AzoSans-light', sans-serif;
    margin: 0;
    padding: 0;
    font-size: 12px;
}

/*Adjusted this calculation of main to reduce the used white space - needs to be tested in other iframes*/
main {
    width: calc(100% - 20px);
    height: calc(100% - 100px);
    min-height: 180px;
}

header {
    width: 100%;
}

    header > h1 {
        font-size: 14px;
        width: 100%;
    }

#personalisation section.expander.gallery .social-title.select-album {
    font-size: 14px;
    margin-top: 5px;
}

#personalisation section.expander.add-text > article .input-wrapper-out, #personalisation section.expander.add-text > article .textarea-wrapper-out {
    float: right;
    width: 100%;
}

#personalisation section.expander.add-text > article input[type="text"], #personalisation section.expander.add-text > article textarea {
    padding: 0;
    width: 80%;
    height: 27px;
    padding-left: 5px;
}

#personalisation section.expander.add-imagery .social-select select,
#personalisation section.expander.gallery .social-select select,
#personalisation section.expander.effects .social-select select,
#personalisation section.expander.attributes .social-select select,
#personalisation section.expander.colour .social-select select,
#personalisation section.expander.options .social-select select,
#personalisation section.expander.layout .social-select select #personalisation section.expander.add-imagery select,
#personalisation section.expander.gallery select,
#personalisation section.expander.effects select,
#personalisation section.expander.attributes select,
#personalisation section.expander.colour select,
#personalisation section.expander.options select,
#personalisation section.expander.layout select {
    padding: 5px;
}

#personalisation section.expander.add-imagery select {
    padding: 5px;
    margin-bottom: 8px;
    border-radius: 2px;
}

main #personalisation article h1 {
    font-size: 14px;
    font-family: 'AzoSans-light', sans-serif;
}

#personalisation section.expander.active > article {
    font-size: 12px;
}

div > h1 {
    font-size: 14px;
}

.title {
    font-size: 18px;
	font-family: "AzoSans-Regular", sans-serif;
}

.row label, select, .text-area-input {
    font-size: 12px;
    font-family: 'AzoSans-Regular', sans-serif;
}

#personalisation section.expander.add-text > article label {
    padding: 8px 15px 0px 15px;
}

.social-title, .social-cancel {
    font-size: 14px;
}

.select-album {
    font-size: 12px;
    margin-top: 0px;
}

main #personalisation {
    overflow: auto;
    overflow-x: hidden;
}

#product .location {
    font-family: 'AzoSans-Regular', sans-serif;
    font-size: 11px;
    padding: 15px;
    text-align: center;
    position: absolute;
    bottom: 0;
    right: 25%;
    left: 25%;
}
/*Changed the bottom here */
button#add-to-bag {
    font-family: "AzoSans-Regular", sans-serif;    
    bottom: 30px;
}


.input-wrapper-out {
    display: none;
}

main #aspects > .aspect {
    margin-bottom: 0;
}

#personalisation section.expander > header {
    padding: 10px;
    font-size: 14px;
}

#product .aspect-helper {
    padding: 10px;
}

#personalisation section.expander.add-imagery div.upload {
    font-family: "AzoSans-Regular", sans-serif;
    font-size: 10px;
    width: 119px;
    height: 15px;
    letter-spacing: 1px;
}

#personalisation section.expander.add-imagery .user-image {
    border: 1px solid #C7C5C5;
    max-width: 90%;
    max-height: 300px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 5%;
    padding-right: 5%;
}

#personalisation section.expander.add-text > article .row.colour > div.colours {
    width: 60%;
}

button .colour {
    margin-right: 8px;
}

.gallery-item-image {
    width: 85px;
    height: 85px;
    margin-right: 8px;
}