#desing-print, #design-preview {
    width:1px; height:1px;
    visibility: hidden;
}
.custom-checkbox-wrapper {
    display:none;
    text-align: right;
    margin: 1rem 0;
}
.product.type-product form {
    display: none;
}
/*hide zoom icon*/
a.woocommerce-product-gallery__trigger {
    display: none;
}
.single-product.product:after {
    display: block;
    content: '';
    clear: both;
}
/*new*/
.single-product .content-area {
    width:100%;
}
.single-product div.product {
    overflow: visible;
}
@media all and (min-width: 900px) {
    .single-product div.product .summary-box, .product-title, .single-product .notebooks-type {
        float: right;
        width: 33% !important;
    }
    .single-product div.product .image {
        float: left;
        width:65%;
        margin-right:2%;
        min-height: 100px; /* to prevent jump/shift when image is loadin; to keep on right specs column*/
    }
}
@media all and (max-width: 899px)  and (min-width: 768px){
    .single-product div.product .summary-box, .product-title, .single-product .notebooks-type {
        float: right;
        width: 33%;
    }
    .single-product div.product .image {
        float: left;
        width:64%;
        margin-right:2%;
    }
}

@media all and (max-width: 700px) {
    .single-product div.product .summary-box, .product-title {
        float:none;
        width:100%;
    }
    .product-title h1{
        margin:0;
        font-size:2em;
    }
    .single-product div.product p.price {
        font-size:1em
    }

    .single-product .image.multi-variant {
        width:100%;
        float:none;
    }

    .single-product .notebooks-type {
        display:none;
    }
}


.single-product div.product .image {
    position: relative;
    z-index: 2;
    background: #fff;
    min-height: 20vw;
}

.single-product div.product .woocommerce-product-gallery {
    width: 100% !important;
    /*lscache issue TODO*/
}



/*
    Gallery
*/
/**
 * @snippet       CSS to Move Gallery Columns @ Single Product Page
 * @sourcecode    https://businessbloomer.com/?p=20518
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.4
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

/* Make image 75% width to make room to its right */
@media all and (min-width: 1025px) {
    .single-product div.product .woocommerce-product-gallery .flex-viewport, .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
        width: 82%;
        float: right;
        max-width: 82% !important;
    }
}

ul.woocommerce-product-gallery__wrapper {
    margin: 0;
}

.flex-viewport  li#mockup {
    width: 82%;
    float: right;
    max-width: 82% !important;
}
/*Hide stripe of left/right image on slider but TODO find better solution*/
.flex-viewport:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    height: 100%;
    background: #fff;
}


/* Make Gallery 25% width and place it beside the image */
@media all and (min-width: 1025px) {
    .single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
        width: 18%;
        float: left;
    }
    /*for slick support*/
    .single-product div.product .woocommerce-product-gallery .flex-control-nav li {
        width: 100% !important;
    }
}

@media all and (max-width: 1025px) {
    .single-product div.product .woocommerce-product-gallery ol li {
        float:left;
        width:25%;
    }
}

@media all and (max-width:  767px) {
    .mobile-edit.single-product div.product .woocommerce-product-gallery {
        height:50vh;
        margin-bottom: 0;
    }

    .mobile-edit.single-product div.product .woocommerce-product-gallery .flex-viewport {
        height:50vh !important;
    }

    .mobile-edit.single-product div.product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper li{
        width:100vw !important;
        height:50vh !important;
    }
    /*todo as first img is smaller than 100vw*/
    .mobile-edit.single-product div.product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper li:nth-child(1){
        height:50vh !important;
    }

    .mobile-edit .flex-viewport .woocommerce-product-gallery__wrapper {
        transform: translate3d(-100vw, 0, 0) !important;
    }

    .mobile-edit.mobile-edit-second .flex-viewport  .woocommerce-product-gallery__wrapper {
        transform: translate3d(-200vw, 0, 0) !important;
    }

    .single-product div.product .woocommerce-product-gallery {
        margin-bottom: 1em;
    }

}


/* Style each Thumbnail with width and margins */
.single-product div.product .woocommerce-product-gallery li {
    list-style: none;
    margin-bottom: 1.618em;
    cursor: pointer;
}
.single-product div.product .woocommerce-product-gallery .flex-control-nav li img {
    width: 90%;
    float: none;
    margin: 0 0 10% 10%;
    position:relative;
    z-index:1;
}
/* End Gallery*/

/*
    Spiners/Loaders
 */
.spinner-wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    max-width: 400px;
    width: 100%;
    z-index: -1;
    transform: translateY(-50%) translateX(-50%);
    display:none;
}

.spinner-wrapper img[src$="svg"]{
    width:100%;
}

.spinner-header {
    font-family: serif;
    font-size: 20px;
}

#spinner-dynamic {
    margin: 3px 0 -2px;
}

#loader.show .spinner-wrapper {
    z-index: 9999;
    display:block;
}

.spinner-text {
    font-size: 16px;
}

#loader button {
    border-radius: 13px;
    background: transparent;
    border: 2px solid #1f1f1f;
    padding: 6px 22px;
    margin: 0 7px;
    box-shadow: 5px 5px 0 0 #000;
    color: #000;
}

@media all and (max-width: 767px) {
    #loader button {
        padding: 6px 14px;
    }
}

.loader {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin:15px auto;
    position: relative;
    color: #000;
    box-sizing: border-box;
    animation: animloader 2s linear infinite;
    display:block;
}

.spinner-text > div {
    display:none;
}

.related .related a img {
    height: 200px;
    margin: 0 auto;
    width: auto;
    max-height: 50%;
}

.related .related a h2 {
    font-size: 1em;
}

.related .related > img {
    margin: 6px 0 14px;
}

.related .spinner-wrapper {
    max-width: 500px;
}

.related .related .price {
    color: #222222;
}

.related .related strike {
    color: #9a7f76;
}
.related .related i {
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 20px;
    padding: 10px;
}

#loader.loading .loading, #loader.info .info,
#loader.message .message,  #loader.crop .crop,
#loader.message-variable .message-variable,
#loader.related .related,
#loader.csv-preview #csvPreWrapper{
    display:block;
    text-align: center;
}

.modal-var .add-select {
    cursor: pointer;
}
.modal-var div[data-index]:after {
    content:'';
    display:block;
    clear:both;
}

.modal-var > p {
    font-size: 0.8rem;
    text-align: left;
}

#csvPreWrapper {
    text-align:center;
}

.csv-preview-button {
    display:none;
}

.csv-preview-button:hover{
    color: #fff;
    background: #2f2f2f;
}

#loader.csv-preview .spinner-wrapper {
    width: 100%;
    max-width: 900px;
    max-height: 100vh;
}
#loader.csv-preview .spinner-text {
    padding:0;
}

#loader.crop .crop {
    max-width: 60vh;
}

#loader.edit-more #continueInfo{
    display:none;
}
/*csv*/
#loader select {
    width: 90%;
    margin: 10px 0;
    padding: 5px 10px;
    float: left;
}


#loader .add-select {
    float: right;
    width: 10%;
    margin: 10px 0 0;
    text-align: right;
    padding: 5px 0;
    font-weight: bold;
    font-size: 18px;
}

/*end csv*/
@media (max-width: 767px) {
    .loader {
        width: 2px;
        height: 2px;
    }
}

#template .loader {
    position: absolute;
    top: 50%;
    left: 0;
    margin: 0 auto;
    right: 0;
}

@keyframes animloader {
    0% {
        box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
    }
    25% {
        box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 2px;
    }
    50% {
        box-shadow: 14px 0 0 -2px,  38px 0 0 -2px,  -14px 0 0 2px,  -38px 0 0 -2px;
    }
    75% {
        box-shadow: 14px 0 0 2px,  38px 0 0 -2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
    }
    100% {
        box-shadow: 14px 0 0 -2px,  38px 0 0 2px,  -14px 0 0 -2px,  -38px 0 0 -2px;
    }
}

.loader-payment {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: payment-animloader 1s linear infinite;
}

@keyframes payment-animloader {
    0% {
        box-shadow: -72px 0 #FFF inset;
    }
    100% {
        box-shadow: 48px 0 #FFF inset;
    }
}


#overlay {
    position: fixed;
    background: #fff;
    opacity: 0;
    top: 0;
    left: 0;
    bottom: 0;
    width:0;
    height:0;
    z-index: 9999;
    transition: opacity .5s;
}

#loader.show #overlay {
    width:100%;
    height:100%;
    opacity: 0.5;
}

/*
    Summary single product
 */
#download {
    width: 100%;
    background: #2f2f2f;
    text-transform: uppercase;
    color: #fff;
    clear:both;
    position:relative;
    z-index:1;
    border: 1px solid #9f9d9d;
    box-shadow: inset 0 0 11px 3px #242424;
    border-radius: 6px;
    padding:0.6em 1.4em;
}
#download i {
    padding: 0 8px;
}
#cuptext2, input.cuptext, .billy-input-style, .storefront-sorting select,
.summary select{
    background: white;
    border: 1px solid #b4b4b4;
    box-shadow: none;
    width: 100%;
    border-radius: 6px;
    padding: 6px 10px;
    outline:none;
    margin-bottom: 1em;
    font-weight: 400;
    color: #43454b;
    text-transform: capitalize;
    background-position-y: 3px !important;
    transition: border .4s ease-in-out;
    box-sizing: border-box;
}

#cuptext2, input.cuptext {
    text-transform: none;
}

.billy-input-style, .storefront-sorting select, .summary select {
    margin-bottom:0;
}
#summary .text-label-small {
    margin-top: -1em;
}
@media (max-width: 767px) {

    #cuptext2, input.cuptext {
        margin-bottom: 0.2em;
    }
    .text-group > div.show-c:before {
        display:none;
    }
    .text-group > div.show-c {
        margin-top:0 !important;
    }
    #summary .text-label-small {
        margin-top: -3px;
    }
    .summary-box .text-label {
        font-weight: 700;
    }
    .woocommerce-tabs ul.tabs li {
        width:33%;
        text-align: center;
    }
    .woocommerce-tabs ul.tabs {
        display: flex;
    }
    .woocommerce-tabs ul.tabs li::after {
        left: 0;
        text-align: center;
        top: auto;
        bottom: -15px;
        z-index: -1;
    }
    input::-webkit-input-placeholder {
        color: #c6c6c6;
    }
}

.text-label, .variations label {
    font-weight: 700;
    color: #333333;
}

.star-rating span:before, p.stars a:hover:after, p.stars a:after, .star-rating span:before {
    color:#333333 !important;
}

.single-product div.product .woocommerce-product-rating a {
    text-transform: capitalize;
    font-size: 10px;
}

.single-product div.product table.variations .value {
    margin-bottom: 0;
}

.single-product div.product form.cart {
    padding: 0;
}

/*.single-product div.product form.cart {*/
/*    visibility:hidden;*/
/*    height: 1px;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    overflow: hidden;*/
/*}*/

.single-product div.product .price {
    margin-bottom: 0;
}

.single-product div.product .edit-link {
    display: none;
}

.personalization {
    clear:both;
}

/*.personalization:before {*/
/*    position: absolute;*/
/*    background: white;*/
/*    top: 0;*/
/*    bottom: 0;*/
/*    left: -101%;*/
/*    width: 100%;*/
/*    content: '';*/
/*    z-index: 1;*/
/*}*/

/*.personalization:after {*/
/*    position: absolute;*/
/*    background: white;*/
/*    top: 0;*/
/*    bottom: 0;*/
/*    width: 100vw;*/
/*    content: '';*/
/*    z-index: 1;*/
/*    left: 100%;*/
/*}*/

/*
    Canvases
 */
#templateCanvas {
    width:100%;
}

#pdfCanvas, #testC {
    /*width:130%;*/
    display:none;
    width: auto;
    height:auto;
}

/*
    Photo
 */
.thumb { /*upload previews*/
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
}

/*
 TO tideup
 */
.med-cont {
    position: relative;
    background-size: cover;
}
.med-cont:after {
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    transition: background .3s;
    background-color:#fff0;
}

.wp-admin .med-cont img {
    height: auto;
    max-width: 100%;
    display: block;
    border-radius: 3px;
}


/* colours listing */
.billy-colours-attributes__values {
    margin: 0.8em auto 0.5em;
    font-size: 0;
    max-width: 73%;
}

.billy-colours-attributes__value:hover {
    cursor:pointer;
}

.billy-colours-attributes__value {
    list-style: none;
    width: 20px;
    height: 20px;
    border-radius: 30px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px 4px 0;
    float:none !important;/*overwriten by woocommerce*/
    box-shadow: inset 0 0 2px 1px #38383861;
}

.billy-colours-attributes__values .billy-colours-attributes__value:nth-of-type(n+4), .billy-colours-attributes__values.show .billy-colours-attributes-more  {
    opacity: 0;
    transition: opacity .3s, height .2s, width .2s;
    width: 0;
    height: 0;
    margin: 0;
    border: 0;
}

.billy-colours-attributes {
    padding: 0 0 0 4px;
}

.billy-colours-attributes__values.show .billy-colours-attributes-more {
    font-size:0;
    display: inline;
}

.billy-colours-attributes__values.show .billy-colours-attributes__value:nth-of-type(n+4) {
    opacity: 1;
    width: 20px;
    height: 20px;
    margin: 0 4px 4px 0;
}

li.billy-colours-attributes-more {
    display: inline;
    vertical-align: middle;
    color: #939393;
    letter-spacing: 0;
    font-size: 15px;
    float: none !important; /*overwriten by woocommerce*/
}



.mobile-edit {
    overflow: hidden;
}
.mobile-edit #summary, .mobile-edit .product-title-funny-wrapper{
    position: fixed;
    top: 50vh;
    height:50vh !important;
    background: #fff;
    z-index: 11;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    border-top: 1px solid #e4e4e4;
    z-index: 999;
    overflow-x: hidden;
}

.mobile-edit .product-title-funny-wrapper{
    position: fixed !important;
    z-index: 1000;
    overflow:visible;
}

.product-title-funny-wrapper.show-funny-edit .entry-title, .product-title-funny-wrapper.show-funny-edit .funny-edit {
    display:none;
}

.product-title-funny-wrapper.show-funny-edit .text-wrapper {
    display:block;
}

.mobile-edit #masthead {
    display:none;
}

.mobile-edit #firstGalleryItem {
    /*transform: scale(0.9) translateY(-65.9px);*/
}

.mobile-edit .single-product.product .image {
    position: fixed;
    top: 0;
    background: #fff;
    z-index: 11;
    left: 0;
    right: 0;
    height: 50vh;
    width: 100vw;
    z-index: 999;
}

.cls {
    clear:both;
}

.product textarea {
    background: rgb(251, 251, 251);
    border: 1px solid rgb(234, 234, 234);
}

/* Makes the featured single product image not clickable by changing the pointer. */
.mobile-edit .woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    pointer-events: none;
}

.close-text-advance-view.fas {
    display: none;
}

.mobile-edit .text-group > div.show-c {
    box-shadow: none;
    border: none;
    padding: 28px 10px;
}

.mobile-edit .nextStep, .mobile-edit #download, .mobile-edit #specification {
    display: none;
}

.mobile-edit #summary {
    min-height: 0;
}

.mobile-edit .text-wrapper {
    padding: 20px 10px 0;
}

.mobile-edit.mobile-text-focus .text-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    background: #fff;
    bottom: 1px !important;
}

.mobile-edit .close-text-advance-view {
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1;
}


.mobile-edit .flex-control-nav.flex-control-thumbs{

    display: none;
}



.page.left-sidebar .content-area {
    width:100%;
    float:none;
}

/*///wiro prototye*/
.wiro a.woocommerce-LoopProduct-link.woocommerce-loop-product__link:after {
    background-image: url(img/product-listing/notebook-a5-soft-wiro-effect.png);
    content: '';
    width: 100%;
    height: 300px;
    z-index: 99999999;
    position: absolute;
    top: 1px;
    background-size: contain;
    background-repeat: no-repeat;
}

/*single-product tabs*/

.personalization {
    transition:height .2s;
}


/*TODO avoid before after */
.personalization .variations .label:after {
    content: ':';
    font-weight: 500;
}

.personalization .variations .label:before {
    content: 'Choose ';
    font-weight: 500;
}

.single-product .notebooks-type {
    margin-bottom: 0;
    box-shadow: 1px -6px 18px -21px #000 inset;
}

.single-product div.product table.variations select {
    max-width:100%;
}
.single-product a.reset_variations {
    display:none;
}



/*dropdown for ios*/
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #ffffff url("data:image/svg+xml;utf8,<svg fill='%236d6d6d' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat calc(100% - 10px) 5px !important;
    background-size: 26px !important;
}



/* Single product summary.php */
/* ==========================================================================================================*/
.text-group input:focus {
    background-color: #fff;
}
.text-group > div {
    transition:max-height .2s, opacity 0.4s;
    opacity: 0;
    position: absolute;
    background: #fff;
    max-height: 0;
    overflow: hidden;
    width: 100%;
    box-shadow: 0 9px 10px 1px #d2d2d2;
    padding: 0;
    margin-top: 0;
    z-index: 1;
}

.group-box:before {
    display:none;
}

.text-group > div.show-c {
    opacity: 1;
    max-height: 500px;
    padding: 28px 10px 12px;
    margin-top: -1.2rem;
    border: 1px solid #494949;
    border-top: none;
    z-index: 3;
}

.text-group > div label {
    float:left;
    width:40%;
}

.text-group > div .input-holder {
    float: right;
    width:60%;
    text-align: left;
}

.font-familly-dropdown {
    border: 1px solid #bbbbbb;
    border-radius: 3px;
    padding: 5px 10px;
}

.text-group {
    position: relative;
}
.text-group div span {
    text-align: right;
    padding: 0 0 1rem;
    margin: 4px 4px 0;
}

.group-box.show-c:before {
    display:block;
    content: '';
    height: 1px;
    /*background: #e2e2e2;*/
    /* height: 2px; */
    width: 90%;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    top: 1px;
    /*border-top: 1px solid #e0e0e0;*/
}


.group-box.show-c:before {
    display: block;
    content: 'Your customisation';
    height: 1px;
    width: 100%;
    position: absolute;
    margin: 0 auto;
    top: 1px;
    border-top: 1px dotted #e0e0e0;
    text-align: center;
    font-size: 11px;
    border-color: #a0a0a0;
    border-radius: 3px;
}

/* range
 */
input[type=range]{
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #737373;
    margin-top: -4px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}


.close, .reset {
    margin-top: 0 !important;
    border-radius: 5px;
    display: inline-block !important;
    clear: both;
    padding: 5px 10px !important;
    font-size: 0.8rem;
    border: 1px solid #e2e2e2;
    font-weight: bold;
    background: #333333;
    color: #fff;
}
.close:hover, .reset:hover, .show-advance:hover {
    cursor: pointer;
}

.fontstyle, .fontweight {
    border: 1px solid #bbbbbb;
    border-radius: 3px;
    padding: 5px 10px;
    margin-right: 4px;
}
.fontstyle.disable, .fontweight.disable {
    opacity: 0.4;
}

.fontstyle.disable:hover, .fontweight.disable:hover{
    cursor: not-allowed;
}
.fontstyle[data-value='active'], .fontweight[data-value='active'] {
    background: #e4e4e4;
}

.fontstyle:hover, .fontweight:hover {
    cursor:pointer;
}

.colourbox {
    clear:both;
    max-height: 79px;
    overflow-x: hidden;
    overflow-y: scroll;
}

@media all and (max-width:767px) {
    .colourbox {
        white-space: nowrap;
        overflow-y: hidden;
        overflow-x: scroll;
    }
}

.colourbox span {
    display:inline-block;
    width: 24px;
    height:24px;
    border-radius:12px;
}

.colourbox span[style="background:#ffffff"] {
    border:1px solid #a9a9a9;
}


.group-box.show-c  div:not([class]) {
    margin: 5px 0 0;
    clear: both;
}

.group-box.show-c  div:not([class]):after {
    clear: both;
    content: '';
    display: table;
}

.group-box.show-c > * {
    min-height: 28px;
}

.fontModal {
    position: absolute;
    background: white;
    z-index: -1;
    transition: opacity .3s .1s, top .3s, left .2s,
    max-height .3s, max-width .3s, z-index .7s .3s, width .3s, height .3s;
    opacity: 0;

    border: 1px solid #f0f0f0;
    overflow: hidden;
    width:0;
    height:0;
}

.fontModal .active {
    border: 1px solid #e5dada;
    text-align: center;
    background: #f1f1f1;
    border-radius: 3px;
}

.showFontModal .fontModal {
    overflow: auto;
    opacity: 1;
    max-width: 700px !important;
    max-height: 700px !important;
    z-index: 1000;
    transition: opacity .3s, top .3s, left .2s, max-height .3s, max-width .3s, z-index 0s 0s, width .3s, height .3s;
    border: 1px solid #bbbbbb;
    border-radius: 3px;
}

.fontModal .font-list > div{
    opacity:0;
    transition: opacity .2s .3s;
}

.fontModal .font-list {
    text-align: right;
    padding: 0 34px 10px 10px;
}

.close-font-modal{
    width: 20px!important;
    padding: 5px 4px;
    font-size: 1em;
    position: sticky;
    top: 0;
    text-align: right;
    left: 100%;
    padding: 13px;
    box-sizing: content-box;
}

.showFontModal .fontModal .font-list > div{
    opacity:1;
}

.showFontModal .fontModal .font-list img{
    width:100%;
}

.showFontModal .personalization {
    overflow: hidden;
}

.woocommerce-variation-price:before {
    content: 'Price: ';
    display: inline-block;
    padding-right: 10px;
}
.woocommerce-variation-price {
    font-size: 1.41575em;
}
.woocommerce-variation-price .price {
    display: inline-block !important;
}


.summary.entry-summary {
    transition:height .2s;
}
@media (min-width: 768px) {
    .single-product div.product .summary {
        width: 100% !important;
        float: none !important;
    }
}


.mobile-edit.single-product #templateCanvas {
    left: 0;
    right: 0;
}

.mobile-edit.single-product div#template > img, .mobile-edit.single-product div#template > canvas  {
    height: 50vh !important;
    width: auto !important;
    margin: 0 auto;
    max-height: 100vw;
}

.mobile-edit.single-product div#template {
    height: 50vh !important;
    text-align: center;
    width: 100vw !important;
    max-height: 100vw;
}

.mobile-edit.single-product .type-product:not(.product_cat-mugs) div#template {
    background-image: none !important;
}

.mobile-edit.single-product div.product .woocommerce-product-gallery {
    height: 50vh;
    margin-bottom: 0;
}

.mobile-edit #template-preview-effect {
    display:none;
}

@media all and (max-width: 766px) {
    .mobile-edit.single-product .product_cat-mugs div#template {
        background-size: 50vh !important;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain !important;
    }
    .mobile-edit.single-product .product_cat-mugs div#template > img {
        margin: 0 auto;
        left: 0;
        right: 0;
        display:block;
    }
}

.mug-previews {
    visibility:hidden;
    width:1px; height:1px;
}

.billy-flex {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 10px;
}

.billy-flex img {
    width: 23%;
}


@media all and (max-width:767px) {
    .billy-flex img {
        width: 30%;
    }
}

.photos-wrapper > div {
    margin: 1em 0;
}

.inputfile-4  {
    position:absolute;
    z-index:0;
    overflow:hidden;
    width:0.1px;
    height:0.1px;
    outline: none !important;
}

.inputfile-4 + label {
    color: #ffffff;
    background-color: #2f2f2f;
}

.inputfile + label {
    width:100%;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    vertical-align: middle;
    border-radius: 3px;
}

.card150 .inputfile + label {
    color: #ffffff;
    background-color: #2f2f2f;
    border: 1px solid #9f9d9d;
    box-shadow: inset 0 0 11px 3px #242424;
    border-radius: 6px;
}

.card150.woocommerce-product-gallery:hover  {
    cursor:zoom-in;
}

.card150.woocommerce-product-gallery.open-inner:hover  {
    cursor:zoom-out;
}

.card150 .woocommerce-product-gallery__wrapper > li:last-child {
    z-index: 2 !important;
}

.card150.woocommerce-product-gallery.open-inner .woocommerce-product-gallery__wrapper > li:last-child {
    z-index: 4 !important;
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    margin-right: 0.25em;
}

.photo-settings-wrapper {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: row;
    justify-content: end;
}
.photo-settings-wrapper.show {
    display:flex;
}
.photo-settings-wrapper > div {
    padding: 0 5px;
    display:none;
    width: 50%;
}

.mobile-edit-second .photos-wrapper, .mobile-edit .photos-wrapper {
    display: none;
}

.photo-settings-wrapper > div.photo-scale-wrapper.show {
    display:flex;
    flex-direction: column;
    text-align: center;
    font-size: 10px;
    padding: 0 10px;
}
.photo-settings-wrapper > div.photo-scale-wrapper input {
    width:100% !important;
}
.photo-settings-wrapper > div.photo.show {
    display:block;
    position: relative;
    /*flex-grow:1;*/
    /*text-align:right;*/
}
.photo-settings-wrapper > div.photo img {
    max-width: 100%;
    padding-right: 10px;
    max-height: 190px;
    display: flex;
}

span.close-circle {
    position: absolute;
    right: 0px;
    margin-top: -11px;
    opacity:1;
}
span.close-circle > *{
    background: #2f2f2f;
    border-radius: 50%;
    border: 1px solid #ffffff;
    padding: 10px;
    color: white;
    width: 33px;
    height: 33px;
    font-size: 12px;
    text-align: center;
}

span.close-circle:hover {
    cursor:pointer;
}

input[type=file]::file-selector-button {
    border: 1px solid #000;
    padding: 0.2em 0.4em;
    border-radius: 0.2em;
    background-color: #2f2f2f;
    transition: 1s;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
}

input[type=file]::file-selector-button:hover {
    background-color: #2f2f2f;
    border: 1px solid #b1b1b1;
}

.variations {
    display:none;
}

.text-label-small {
    font-size:10px;
    font-weight: 300;
}


.summary-box .text-label {
    display: block;
    font-size: 0.8em;
    margin: 1em 0 0;
}

.quantity .qty {
    background: #fff;
    border: 1px solid #b3b3b3;
    text-align: center;
}


#paperSize {
    text-transform: capitalize;
}



#specification > .form  {
    margin: 1em 0 0;
}

.slick-arrow {
    position: absolute;
    top: 50%;
    z-index:1;
    padding: 30px 10px;
    transform: translateY(-85%);
    font-size: 1.3em;
}

.fa-chevron-left  {
    left:-1.2em;
}
.fa-chevron-right {
    right:-1.2em;
}

.slick-disabled {
    opacity: 0.4;
}

.slick-slide {
    margin: 0 10px;
}

div#summary * {
    line-height:1.5;
    box-sizing: border-box;
}

.show-advance {
    background: url(img/font-settings-icon.jpg);
    box-sizing: border-box;
    width: 1.5em;
    height: 1.5em;
    background-size: contain;
    display: block;
    position: absolute;
    right: 0;
    z-index: 2;
    font-size: 12px;
    padding: 1.5em;
    background-size: 1.5em 1.5em;
    background-repeat: no-repeat;
    background-position: center;
}

span.show-advance:before {
    content: '';
    height: 17px;
    width: 1px;
    background: #e0e0e0;
    display: block;
    position: absolute;
    top: 8px;
    left: -2px;
}

span.show-advance.tooltip.textarea:after {
    content: 'edit';
    font-size: 9px;
    position: absolute;
    top: calc(50% + 12px);
    left: 0;
    right: 0;
    text-align: center;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 2;
    top: -30px;
}

@media all and (min-width: 768px) {
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
}


.spinner-text {
    position: relative;
    padding: 4% 5% 5%;
    border-style: solid;
    border-width: 35px;
    border-image: url(img/modal/border.png) 75 75 75 75 stretch;
    background: linear-gradient(to bottom, white 0%, white 100%) no-repeat;
}

#layoutViewport {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
}


/*deprecate older .li.billy-colours-attributes-more class above later*/
li.billy-colours-attributes-more {
    display: inline-block;
    font-size: 10px;
    width: 20px !important;
    height: 20px;
    border-radius: 30px;
    border: 1px solid #919191;
    line-height: 1.8;
    margin: 0 4px 4px -2px;
    box-shadow: inset 0 0 2px 1px #ffc6c642;
}

/*Move to teacher planner only*/
.flipbook-menu-header {
    font-weight: bold;
}

.flipbook-icon {
    font-size: 20px;
    padding-top: 9px;
}


.product-colour-variant .colour:hover, .billy-input-style:hover, .storefront-sorting select:hover, .summary select:hover {
    cursor: pointer;
}

.funny-notebook .text-wrapper {
    display: none;
}

.woocommerce-checkout ul.wc-item-meta li > *:first-letter {
    text-transform: capitalize;
}

.text-wrapper textarea {
    border: 1px solid #b4b4b4;
    width: 100% !important;
    outline: none;
    border-radius: 6px;
    padding-right:40px;
}

span.show-advance.textarea:before {
    top: 15px !important;
    height: calc(100% - 25px);
}
.show-advance.textarea {
    height: calc(100% - 10px);
    bottom: 10px;
    right: 8px;
}

.funny-notebook #summary > div > div.text-group > div > div:nth-child(5) {
    display:none;
}

.funny-notebook .button {
    width: 100%;
    background: #2f2f2f;
    text-transform: uppercase;
    color: #fff;
    clear: both;
    position: relative;
    z-index: 1;
    border-radius: 3px;
}


.woocommerce-cart .woocommerce-message {
    display: none;
}


/*Funny notebooks only*/
@media all and (max-width: 768px) {
    #funnyColourSwatch .pallete-colours div {
        width: 33%;
        float: left;
        white-space: break-spaces;
    }

    #funnyColourSwatch .pallete-colours > li {
        padding: 0 5%;
    }

    #funnyColourSwatch .pallete-colours .cover-colour {
        margin-right: 2px;
    }
    .funny-notebook .product_title.entry-title {
        font-size: 1.4em;
        margin: 0.3em 0;
    }
}

@media (min-width: 769px)
.product_title.entry-title {
    font-size: 2.4em;
    margin: 0 0 0.8em;
}

#funnyColourSwatch span.cover-colour.active {
    border: 2px solid #0000005c;
    box-shadow: inset 0 0 1px 1px #fff;
}

ul.dots-colours {
    text-align: center;
    width: 100%;
    margin: 0;
    position:relative;
}

.colours-config[data-current="0"] .left{
    opacity:0.1 !important;
}

.colours-config[data-current="5"] .right{
    opacity:0.3 !important;
}

.colours-config[data-current="0"] .dots-colours li:nth-child(1), .colours-config[data-current="1"] .dots-colours li:nth-child(2), .colours-config[data-current="2"] .dots-colours li:nth-child(3),
.colours-config[data-current="3"] .dots-colours li:nth-child(4), .colours-config[data-current="4"] .dots-colours li:nth-child(5), .colours-config[data-current="5"] .dots-colours li:nth-child(6) {
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px black;
}

ul.dots-colours li {
    display: inline-block;
    height: 12px;
    width: 12px;
    background: #2f2f2f;
    border-radius: 50%;
    margin: 0 10px;
    border: 0 solid #fff;
    transition: all .3s ease-in;
    box-shadow: 0 0 0 0 black;
}
ul.dots-colours li:hover {
    cursor:pointer;
}

@media all and (min-width: 769px) {
    .funny-notebook .product_title.entry-title {
        white-space: pre-line;
        font-size: 1.4em;
        margin:0;
    }
}

.cover-colour {
    display:inline-block;
    margin-right:5px;
    width: 13%;
    min-width: 30px;
    height:30px;
    border: 1px solid #0000;
    box-shadow:inset 0 0 2px 0px #383838;
    transition: all .2s;
}

.cover-colour:hover {
    cursor:pointer;
}

#funnyColourSwatch {
    position:relative;
}

#funnyColourSwatch .left  {
    position:absolute;
    top:calc(50% - 10px);
    left:0;
    z-index: 2;
    transform: translateY(-50%);
    font-size: 14px;
    padding: 7px;
    opacity:1;
    transition:opacity .2s;
    height: 100%;
    display: flex;
    align-items: center;
}

#funnyColourSwatch .right {
    position:absolute;
    top:calc(50% - 10px);
    right:0;
    z-index: 2;
    transform: translateY(-50%);
    font-size: 14px;
    padding: 7px;
    height: 100%;
    display: flex;
    align-items: center;

}

#funnyColourSwatch .right:hover, #funnyColourSwatch .left:hover {
    cursor:pointer;
}

#funnyColourSwatch *{
    &::-webkit-scrollbar {
        background-color: #fff;
        height: 20px;
        width: 20px;
    }

    &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 99em;
        border: 3px solid #ddd;
    }
}

#funnyColourSwatch *::-webkit-scrollbar {
    background-color: #fbfbfb;
    height: 18px;
    width: 18px;
    border: 1px solid #b4b4b4;
    border-radius: 5px;
    box-shadow: inset 0 0 10px -1px #ccc;
}

#funnyColourSwatch *::-webkit-scrollbar-thumb {
    background: #2f2f2f;
    border-radius: 5px;
    border: 1px solid #b4b4b4;
}

#funnyColourSwatch * {
    scroll-behavior: smooth;
}

#funnyColourSwatch h3 {
    font-size: 9px;
    margin: -9px 0 6px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    opacity: 0.8;
}

#funnyColourSwatch img {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
}

#funnyColourSwatch ul {
    padding: 0;
    margin: 0;
    display: block;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    white-space: nowrap;
    text-align: center;
    scroll-behavior: smooth;
}

#funnyColourSwatch li {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    width: 100%;
    display: inline-block;
    text-align: center;
    background-color: #fff;
    color: #9b9dad;
    /*padding-bottom: 1.5rem;*/
    font-size: clamp(18px, 2.5vw, 22px);
    /*box-shadow: 0 0 22px 0 rgba(0,0,0, 0.25);*/
    margin-left: 0;
}

#funnyColourSwatch {
    font-family: "Inter", sans-serif;
    /*background-color: #1e1f26;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 10vh;
}

/*Funny notebooks end*/

/*funny notebook listing*/
.funny-heading-wrapper {
    position:relative; padding: 0 0 50%;
    margin-bottom: 50px;
}
@media all and (max-width: 767px) {
    .funny-heading-wrapper {
        margin-bottom: 100px;
    }
    .funny-price {
        font-size:1em !important;
    }
}
.funny-img-loop {
    visibility: hidden;
}
.funny-holder {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-size: 160%;
    background-position: center;
    background-repeat: no-repeat;
}
.funny-heading {
    position: absolute;
    left: 0;
    right: 0;
    top: 93%;
    z-index: 3;
}
.page-template-notebooks ul.products {
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
}

.page-template-notebooks .site-main ul.products li.product, .page-template-notebooks-diary .site-main ul.products li.product {
    margin-right: 0 !important;
    float: none !important;
    width: 33% !important;
    padding: 1%;
}

@media all and (max-width: 767px) {
    .page-template-notebooks .site-main ul.products li.product, .page-template-notebooks-diary .site-main ul.products li.product {
        width: 48% !important;
    }
}

button.button.is-checked {
    background: #000;
    color: #fff;
}
button {
    transition: color .2s, background .2s;
    outline: none !important;
}

.button-group.filters-button-group {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 2;
    width: 100%;
    flex-direction: row;
}
.button-group.filters-button-group button {
    flex-grow: 1;
}
.filters-button-group button {
    background:none;
    color: #8b8b8b;
    border: none;
    box-shadow: none;
    border-radius: 0;

}
.filter-funny-wrapper {
    border: 1px solid #8b8b8b;
    border-width: 0 0 1px;
    text-align: center;
}
@media all and (max-width: 767px) {
    .filter-funny-wrapper {
        border-width: 1px 0;
        padding: 10px;
    }
}

.yaydp-pricing-table-wrapper {
    display: none !important;
}

.dots-colours {
    display:none;
}

.funny-edit {
    position: absolute;
    right: 0;
    z-index: 3;
    margin-top: -1.7em;
    font-size: 20px;
    color: #3d3d3d;
    text-shadow: 0 0 10px #e8e2e2;
    padding: 10px;
}

.funny-edit:hover {
    cursor:pointer;
}

.funny-notebook .product_title {
    display:inline-block;
}

.funny-notebook .product-title .text-wrapper .text-label {
    /*display: none;*/
}

.funny-notebook .product-title .text-wrapper .text-label {
    position: relative;
    left: 5px;
    padding: 0 9px 10px;
    z-index: 1;
    display: inline-block;
    font-size: .8em;
    font-weight: 700;
}

.funny-notebook .product-title  .text-wrapper textarea {
    border-radius: 6px;
}

.funny-notebook .product-title {
    margin-bottom: 1em;
}

.product-colour-variant.blank .label {
    position: relative;
    left: 5px;
    padding: 0 9px 10px;
    z-index: 1;
    display: inline-block;
    font-size: 0.8em;
    font-weight: bold;
}

.mobile-edit .product-title .close-text-advance-view {
    padding: 10px;
    font-size: 20px;
    top: -39px;
    z-index: 999999;
    background: #fff;
    right: 0;
    border: 1px solid #dedede;
    border-bottom-width: 0;
}


.blank-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 1.6em 0 1em;
}
.blank-categories a {
    min-width: 33%;
    text-align: center;
    font-weight: bold;
    color: #000;
    letter-spacing: 1px;
}

.blank-categories a:after {
    content: '';
    display: block;
    height: 1px;
    width: 0;
    background: #000000;
    margin: 0 auto;
    transition: width .2s;
    margin-top: 3px;
}

.blank-categories a.active:after, .blank-categories a:hover:after {
    width: 151px;
}

/* endfunny notebook listing*/

.billy-quantity-wrapper {
    text-align: right;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 0 0;
}

.billy-quantity-wrapper > *{
    padding:0 10px;
    font-weight: bold;
}
.billy-quantity-wrapper > *:hover {
    cursor:pointer;
}
.billy-quantity-wrapper > i {
    padding: 4px;
    margin: 0 7px;
}
#quantityBilly {
    border: 1px solid #b4b4b4;
    box-shadow: none;
    border-radius: 6px;
    outline: none;
    width: 40px;
    background: #fff;
    text-align: center;
    padding: 6px 10px;
}


/*CARD*/
.card150 .woocommerce-variation-price {
    text-align: right;
}
.yaydp-offer-description {
    text-align: right;
}
.wc-block-grid__product-onsale, .onsale {
    display:none;
}
/*end cards*/


.card150 textarea::-webkit-scrollbar {
    width: 1em;
}

.card150 textarea::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.card150 textarea::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
    border-radius: 33px;
}

.woocommerce-product-gallery.card150 .woocommerce-product-gallery__wrapper > li {
    position: absolute;
    top: 0;
    z-index: 3;
}

.woocommerce-product-gallery.card150 .woocommerce-product-gallery__wrapper > li:nth-child(1) {
    z-index: 5 !important;
}

.woocommerce-product-gallery.card150 .woocommerce-product-gallery__wrapper > li:nth-child(2),
.woocommerce-product-gallery.card150 .woocommerce-product-gallery__wrapper > li:nth-child(1){
    position: absolute;
    top: 0;
    z-index: 4;
    transform-origin: 14.4% 50%;
    transform: rotateY(0);
    transition: transform 1s .2s, z-index 0s 0.5s;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.woocommerce-product-gallery.card150.open-inner .woocommerce-product-gallery__wrapper > li:nth-child(2),
.woocommerce-product-gallery.card150.open-inner .woocommerce-product-gallery__wrapper > li:nth-child(1) {
    transform: rotateY(-180deg);
}

.woocommerce-product-gallery.card150 .woocommerce-product-gallery__wrapper > li:nth-child(1) {
    position:relative;
}

.woocommerce-product-gallery.card150 .woocommerce-product-gallery__wrapper > li:nth-child(2):after {
    content: '';
    right: 0px;
    bottom: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(to right, black, transparent);
    -webkit-transform: rotateY( 180deg );
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    background-image:url(/wp-content/designs/card150/config/standard/preview_soft_transparent.png);
    background-size: 100%;
    background-position: center center;
}

.woocommerce-product-gallery.card150 .woocommerce-product-gallery__wrapper > li:nth-child(1) {
    transition: transform 1s .2s, z-index 0s 0.5s, opacity .2s .2s;
    opacity: 1;
}

.woocommerce-product-gallery.card150.hide-mockup .woocommerce-product-gallery__wrapper > li:nth-child(1) {
    /*visibility:hidden;*/
    opacity: 0 !important;
    transition: opacity .1s !important;
}


.card150 div#template {
    background: none !important;
}

.card150 ul > li:last-child > img {
    display: none;
}

.mobile-edit.mobile-edit-second .card150 .woocommerce-product-gallery__wrapper {
    transform:translate3d(0, 0, 0) !important
}

.mobile-edit .card150 .woocommerce-product-gallery__wrapper {
    transform:translate3d(0, 0, 0) !important
}

.card150 .med-cont:after {
    z-index:-1;
}

.text-group-0 .card150 .med-cont:after {
    background-color: white;
}

.products .product a > div {
    position:relative;
}

.page-template-notebooks .products .product a > div, .page-template-notebooks-diary .products .product a > div {
    position: absolute;
}

.loop-img-zoom {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 100%;
    background-position: center;
    transition: background-size .3s .2s ease-in-out, background-position .1s linear;
}
.loop-img-zoom:hover {
    background-size: 250%;
    cursor: zoom-in;
}

.related .loop-img-zoom {
    z-index: -1;
}






.woocommerce-product-gallery__wrapper > li:nth-child(n+2) {
    display: none;
}

.card150 .woocommerce-product-gallery__wrapper > li:nth-child(n+2) {
    display: block;
}

#flipbook-gallery:hover, #flipbook > img {
    cursor: zoom-in;
}





/*font size component*/
.billy-font-size {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 0;
    font-weight: bold;
}

.billy-font-size button {
    border: 1px solid #b4b4b4;
    background: #fff;
    border-radius: 3px;
    height: 36px;
    padding: 0;
    width: 50px;
}

.billy-font-size button:first-child {
    font-size: 0.8em;
}

.billy-font-size button:last-child {
    font-size: 1.2em;
}



/*product gallery*/

@media all and (max-width:  767px) {
    .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
        width: 12%;
        margin-bottom: 0;
        float: none;
        display: inline-block;
    }
    .single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
        text-align:center;
    }
}

ul.flex-direction-nav {
    position: absolute;
    top: 30%;
    width: 100%;
    left: 0;
    margin: 0;
    padding: 0px;
    list-style: none;}

@media all and (max-width:766px) {
    li.flex-nav-prev {
        float: left;
    }

    li.flex-nav-next {
        float: right !important;
    }

    li.flex-nav-prev a {
        display:inline-block;
        padding: 0px 30px;
    }

    li.flex-nav-next a {
        display:inline-block;
        padding: 0px 30px;
    }
}


@media all and (min-width:767px) {
    li.flex-nav-next {
        margin-right:0;
    }

    .flex-direction-nav {
        text-align: right;
    }
    .flex-direction-nav li {
        display: inline-block;
    }
    .flex-direction-nav li a {
        display: inline-block;
        border: 1px solid #a7a7a78c;
        padding: 5px;
        background: #cbcbcb45;
    }
}

a.flex-next::after {
    visibility:visible;content: '\f054';
    font-family: 'Font Awesome 5 Free';
    margin-right: 10px;
    font-size: 20px;
    font-weight: bold;
}

a.flex-prev::before {
    visibility:visible;
    content: '\f053';
    font-family: 'Font Awesome 5 Free';
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
}

ul.flex-direction-nav li a {
    color: #ccc;
}

ul.flex-direction-nav li a:hover {
    text-decoration: none;
}

ul.flex-direction-nav li a {
    color: #ccc;
}

ul.flex-direction-nav li a:hover {
    text-decoration: none;
}


li.flex-nav-prev {
    font-size: 0;
}

li.flex-nav-next {
    font-size: 0;
}
ul.flex-direction-nav {
    bottom: 3.5%;
    top:auto;
}
/*end product gallery*/


/*colour*/

.colour-text {
    font-size: 0.8em;
    font-weight: bold;
    color: #333333;
}

.product-colour-variant .colour {
    width: 25%;
    float:left;
    margin: 0;
}

.mobile-edit .product-colour-variant {
    position: fixed;
    top: 0;
    background: #fff;
    z-index: 11;
    right: 0;
    height: 50vh;
    width:20vw;
    border-bottom:1px solid #000;
}

.colour {
    background: #fff url(img/loading_icon.gif) no-repeat center/80%;
}

.product-colour-variant {
    overflow:hidden;
}

@media all and (max-width: 700px) {
    .product-colour-variant .to-hide {
        display:none;
    }
}

@media all and (max-width: 700px) {
    .colour-text {
        text-transform: capitalize;
    }

    .product-colour-variant.hide-colour .colour{
        transform: translateX(110%);
    }

    .product-colour-variant > div {
        height: 50%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .product-colour-variant .text-label {
        font-size: 14px;
        text-transform: capitalize;
        font-weight: 500;
        position: relative;
        z-index: 2;
    }
}

/*end colour*/



.cuptext.hide, .tooltip.hide {
    display:none;
}


#variations {
    display:none;
}
#variations.show {
    display:block;
}

.photo-book #summary, .photo-book #variations, .photo-book #photo-pages, .photo-book #firstGalleryItem {
    position: fixed;
    top: 40px;
    z-index: 999;
    bottom: 0;
    background: #fff; // #ede1e1;
    padding: 45px 0;
    box-shadow: 0px 3px 11px -6px #000;
    z-index: 1500;
}

.photo-book .close-circle, .photo-book label[for="photo-cover-1"], .photobook label[for="photo-cover-1"] {
    
}

body > [id^="photo-cropped-"] {
    display: none;
}

.cropper-options {
    display:none;
}

.photo-book .cropper-options {
    display:block;
}

.photo-book #summary {
    right: 0;
    width: 25vw;
    height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 45px 2em;
}
.photo-book #variations {
    display:block;
    left:0;
    width: 25vw;
    height: 80vh;
    z-index: 150;
}

.photo-book .cropper-container {
    z-index:1;
    position: absolute;
    top: 0;
}
.photo-book .crop .cropper-container {
    position: relative;
}
.photo-book .cropper-drag-box.cropper-move.cropper-modal, .photo-book  .cropper-wrap-box {
    visibility:hidden;
}

.photo-book #variations img {
    width:30%;
    padding:1%;
}

.photobook-label {
    display: block;
    background: #2f2f2f;
    color: #fff;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.625rem 1.25rem;
    margin-bottom: 1em;
    width: 100%;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.8em;
    box-shadow: inset 0 0 7px -5px #000;
    border: 1px solid #141414;
}
.top-edit-bar {
    display:none;
}
.photo-book .top-edit-bar {
    display:block;
    position: fixed;
    top: 0;
    background: #fff;
    left: 0;
    right: 0;
    text-align: center;
    height: 45px;
    z-index: 157;
    border: 3px solid #000;
    box-shadow: 0px 3px 11px -6px #000;
    padding: 5px;
    border-width: 0 0 3px 0;
}

.top-edit-bar img {
    height: 100%;
    width: auto;
    display: inline-block;
}
#photo-pages, #preview3dButton {
    display:none;
}
.photo-book #preview3dButton {
    display:inline-block;
}
.photo-book #photo-pages {
    display:block;
    left: 0;
    right: 0;
    height: 20vh;
    top: 80vh;
    text-align: center;
    z-index: 1500;
    overflow: visible;
    padding-top: 0;
    border-top: 4px solid #2f2f2f;
    box-shadow: inset 0 10px 14px -8px #000;
}

/* no variation photobook for fulll cover*/
.photo-book.no-photo-variation #photo-pages {
    left: 75vw;
}

.photo-book.no-photo-variation .cropper-container {
	transform: scale(1.2);
    left: -240px;
}

.photo-book.no-photo-variation .cropper-crop-box:after {
    content: '';
    position: absolute;
    width: 409px;
    background: white;
    top: -4px;
    bottom: -5px;
    left: -3px;
}

#photo-pages .page-pod {
    box-shadow: 0 0 5px -2px #000;
    margin: 1%;
    display: inline-block;
    width: 48%;
    transform:scale(1);
    transition: transform .2s;
    background:#fff;
    max-width: 10vh;
    max-width: 7vh;
    counter-increment: numberCounter numberLast;
}

.no-photo-variation.photo-book div#photo-pages > div {
    display: flex;
    margin: 2em 0;
}

.no-photo-variation.photo-book div#photo-pages > div > div {
       flex-grow: 1;
}

.photo-book.no-photo-variation div#photo-pages > div > div:first-child::after {
    content:'front cover';
        display: block;
}

.photo-book.no-photo-variation div#photo-pages > div > div:last-child::after {
    content:'back cover';
        display: block;
}

#photo-pages .page-pod.selected {
    transform:scale(1.3);
    z-index: 1;
    position: relative;
}

div#photo-pages .photobook-label {
    position: absolute;
    transform: translateY(-100%);
}

.photo-book ul.woocommerce-product-gallery__wrapper {
    transform: none !important;
}

.product.type-product .photos-wrapper form {
    display: block;
}

.photo-book #firstGalleryItem {
    padding:0;
    left:25vw;
    right:25vw;
}

.photo-book.no-photo-variation #firstGalleryItem {
    left:0;
}

.photo-book #firstGalleryItem #previewTemplate {
     aspect-ratio: 1 / 1;
     max-height: 80vh;
     margin: 0 auto;
 }

.photo-book .canvas-page-nav {
    position: absolute;
    background: red;
    top: 50%;
    left: 0;
    font-size: 2em;
    padding: 0.3em;
    color: #fff;
    background: #2f2f2f;
    z-index:1;
}

.photo-book .canvas-page-nav.right {
    left: auto;
    right: 0;
}

.photo-book .slick-list {
    overflow: visible !important;
}

.photo-book .site-header {
    z-index: 1;
}

.photo-book {
    overflow: hidden;
}

.photo-book .med-cont:after, .photo-book #template-preview-effect {
    display:none;
}

.photo-book #btnphotobook{
    position: fixed;
    top: 6px;
    right: 10px;
    padding: 5px;
    z-index: 169;
    background: none;
}

.photo-book .cropper-crop-box {
	z-index:1;
}

.photo-book .photo-settings-wrapper > div {
    width: 100%;
    padding-top: 12px;
}

.photo-book .photo-settings-wrapper > div.photo.show {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.photo-book .photo-settings-wrapper > div.photo img {
    width: 32%;
    height:100%;
    flex: 1;
    max-height: none;
    padding: 1%;
}

.photobook .photo-settings-wrapper {
    display:none;
}
.photo-book .photobook .photo-settings-wrapper {
    display:block;
}

.woocommerce-breadcrumb .breadcrumb-separator {
    padding: 0 .5407911001em !important;
}

.slick-track {
    counter-reset: numberCounter -2 numberLast -1;
}

div.slick-slide:after {
    content: counter(numberCounter, decimal) " - " counter(numberLast, decimal);
}

.photo-book .slick-slide:first-child::after {
    content:'front cover';
}

.photo-book .slick-slide:last-child:after {
    content:'back cover';
}


.cropper-options.cropper-options-show {
    display: block;
    position: absolute;
    bottom: 0;
    padding: 1em;
    color: #fff;
    z-index: 2;
    left: 0;
    margin: 0 auto;
    right: 0;
    text-align: center;
    background: #141414b0;
}

.photo-book div#billy-product {
    z-index: 999;
    position: relative;
}

@media all and (max-width:767px) {
    .photo-book.no-photo-variation .cropper-container {
        filter: opacity(0.5);
        transform: none;
        left: auto;
    }
    .photo-book.no-photo-variation .cropper-crop-box:after {
        /*todo rewrite to not use after but filter on desktop too*/
        display:none;
    }
    .photo-book #summary {
        top: 50vh;
        width: 100%;
    }
    .photo-book.no-photo-variation #firstGalleryItem {
        right:0;
    }
    .photo-book.mobile-edit .flex-viewport .woocommerce-product-gallery__wrapper {
        transform: translate3d(0, 0, 0) !important;
    }
}