/********** COLOUR HUES **********/

#colour-chart {
    margin-top: 100px;
    margin-bottom: 30px;
}

    #colour-chart.container, #colour-chart.container .col-md-12{
        padding: 0px;
    }

    #colour-chart h1 {
        font-size: 80px;
        line-height: 90px;
    }
    #colour-chart .hue-categories {
        margin-top: 60px;
        margin-bottom: 50px;
    }

        #colour-chart .hue-categories #hues-ribbon-wrapper {
            padding: 0px;
        }

        #colour-chart .hue-categories p {
            font-size: 24px;
            line-height: 36px;
            font-weight: 300;
            padding-bottom:25px;
        }

        .colourChart .light.borders {
            padding: 0px 0 98px;
        }

.colourChart #SearchColours {
    padding: 40px 0 35px;
    position: relative;
    display: inline-block;
}
/* Colour Chart Ribbon */
#hues-ribbon-wrapper {
    padding: 5px 15px 0;
    height: 99px;
    text-align: center;
}

    #hues-ribbon-wrapper p {
        color: #4C4C4C;
    }

#colour-category-widget #hues-ribbon-wrapper #hue-category-ribbon {
    padding-top: 20px;
}

    #hues-inner-wrapper {
    height: 100%;
    padding: 0 6%;
    width: 100%;
}

.colourChart #hues-inner-wrapper {
    padding: 0;
}
#hue-category-ribbon {
    margin: 0 auto;
    text-align: center;
}

    #hue-category-ribbon .light.borders {
        padding: 54px 0;
    }


div.colourChart div.top-section,
div.colourChart div.grid-section div.breadcrumbRow div.container.breadcrumbs {
    margin: 0 auto !important;
    max-width: 1200px !important;
}


.colourChart .hues-chart .colour .colour-name p:last-of-type strong {
    font-weight: 300 !important;
}


.colourChart .collapse-trigger i {
    padding: 0;
}

    .colourChart .collapse-trigger i:before {
        font-size: 18px;
    }

#search-colours-form.col-md-8 {
    padding: 0 15px;
}

    #search-colours-form.col-md-8 #SearchColours {
        /*float: right;
        padding: 0 0 20px;
        width: 50%;*/
        float: right;
        padding: 0 0 20px;
    }

/*#search-colours-form.col-md-8 input#colourSearchInput {
        width: expression(100% - 130px) !important;
        width: -moz-calc(100% - 130px) !important;
        width: -webkit-calc(100% - 130px) !important;
        width: -o-calc(100% - 130px) !important;
        width: calc(100% - 130px) !important;
        max-width: initial;
        max-width: unset;
        float: left;
    }*/


div#hue-category-ribbon a.hue-category:first-of-type > div {
    border-top-left-radius: 30px 50%;
    border-bottom-left-radius: 30px 50%;
}

div#hue-category-ribbon a.hue-category:last-of-type > div {
    border-top-right-radius: 30px 50%;
    border-bottom-right-radius: 30px 50%;
}

a.hue-category {
    display: block;
    padding: 0;
    width: 8.333333333333333%;
    text-decoration: none;
}

    a.hue-category div {
        height: auto; /*54px*/
        margin: 0 0 10px;
        padding: 50% 0;
        width: 100%;
    }

    a.hue-category span,
    a.hue-category:visited span {
        color: #0A519A;
        float: left;
        font-size: 16px;
        font-weight: 300;
        line-height: 22px;
        position: absolute;
        display: none;
        text-decoration: underline;
        width: 100%;
        text-align: center;
        white-space: normal;
    }

    a.hue-category:hover span {
        display: block;
    }



/* Desktop Colour Chart */
.Mobile-Chart {
    display: none;
}

.Desktop-Chart.col-md-12 {
    padding: 0 15px;
}

.hues-chart .colour-name {
    display: none;
}

.hues-chart .colour {
    margin: 3px 0;
}

.hues-chart a.colour {
    position: relative;
    z-index: 99;
    text-decoration: none;
}

    .hues-chart a.colour .colour-name {
        display: block;
        position: absolute;
        top: 10px;
        left: 10px;
    }

        .hues-chart a.colour .colour-name p,
        .hues-chart a.colour .colour-name p strong {
            font-size: 0.95em;
            font-weight: 600 !important;
            line-height: 18px;
            display: block;
            padding: 0 5px 0 0;
            white-space: normal;
        }

.hues-chart .colour > div {
    border: 1px solid rgba(0,0,0,0.3);
    padding: 50% 10px;
    height: auto !important;
    white-space: normal;
    position: relative;
}

.hues-chart div.colour > div {
    border: none;
}


/* 6 Columns */
.hues-chart .cols-6 {
    padding: 0 0.9% 0 0;
    width: 16.81%;
}

    .hues-chart .cols-6:nth-child(6n+6) {
        padding: 0;
        width: 15.86%;
    }

/* 5 Columns */
.hues-chart .cols-5 {
    padding: 0 1% 0 0;
    width: 20.2%;
}

    .hues-chart .cols-5 > div {
        border: 1px solid rgba(0,0,0,0.3);
        padding: 50% 10px;
        height: auto !important;
        white-space: normal;
        position: relative;
    }

    .hues-chart .cols-5:nth-child(5n+5) {
        padding: 0;
        width: 19.2%;
    }

/* 4 Columns */
.hues-chart .cols-4 {
    padding: 0 2% 0 0;
    width: 25.5%;
}

    .hues-chart .cols-4.colour {
        margin: 7px 0;
    }

    .hues-chart .cols-4 > div {
        border: 1px solid rgba(0,0,0,0.3);
        padding: 50% 10px;
        height: auto !important;
        white-space: normal;
        position: relative;
    }

    .hues-chart .cols-4:nth-child(4n+4) {
        padding: 0;
        width: 23.5%;
    }



/********** COLOUR DETAILS **********/
#colourDetails h4 {
    font-weight: 400;
    color: #4C4C4C;
    margin-bottom: 30px;
}

    #colourDetails h4.colour-title {
        padding-bottom: 30px;
        border-bottom: 1px solid #939393;
        margin-bottom: 35px;
    }

#colourDetails p {
    padding-bottom:25px;
}
    #colourDetails .colour-details.dark .container {
    padding: 0;
}

#colourDetails .colour-details {
    margin: 0px -10px 42px;
    padding: 50px 0;
}

    #colourDetails .colour-details.dark .col-md-11 {
        float: none;
        margin: 0 auto;
        padding: 0;
        width: 1020px;
    }

    /*#colourDetails .colour-details .col-md-6:first-of-type {
        padding: 0 60px 0 0;
        width: 540px;
    }*/

    #colourDetails .colour-details .col-md-6:first-of-type {
        padding: 0 35px 0 0;
    }

    #colourDetails .colour-details .col-md-6:last-of-type {
        /*width: 480px;*/
    }

    #colourDetails .colour-details.dark .title a > i {
        font-size: 0.8em;
    }

    #colourDetails .colour-details .item {
        /*border: 1px solid #bfbfbf;*/
    }

    #colourDetails .colour-details.dark .title {
        margin: 0 0 17px 10px;
        width: 460px;
        padding: 0px;
    }

#colourDetails .top-section h1 {
    line-height: 86px;
}
#colourDetails .top-section {
    padding-top: 60px;
    padding-bottom: 60px;
}
#colourDetails .owl-stage {
    position: relative;
}

#colourDetails .swatch.feature {
    position: relative;
    border: solid 1px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.3);
    /*padding: 20px 30px 20px 27px;*/
    padding: 30px;
    /*width: 100%;*/
    margin: 0px auto;
    max-width: 576px;
    width:100%;
    height: 576px;
}

#colourDetails .swatch.feature p {
    font-size: 1.5em; /*18px*/
    /*letter-spacing: -.10px;*/
    line-height: 1.5em;
    text-transform: uppercase;
    padding: 0;
}

        .swatch.feature p strong {
            font-weight: 600;
        }



        .swatch.feature p:last-of-type strong {
            /*font-weight: 300 !important;*/
        }


#colourDetails .feature .action.zoom {
    border-right: none !important;
    border-bottom: none !important;
    height: 70px;
    width: 65px;
    border-color: #838383:
}


#colourDetails .action.zoom i {
    font-size: 2.75em;
    line-height: 55px;
    padding: 7px 6px;
    color: rgba(0,0,0,1.0);
}

#colourDetails .suggestions {
    padding: 0 0 30px;
}

    #colourDetails .suggestions:last-of-type {
        padding: 0;
    }

    #colourDetails .suggestions .title {
        margin: 0 0 20px 0;
    }


    #colourDetails .suggestions .owl-carousel {
        float: left;
        border-bottom: 1px solid #c9c9c9;
        padding: 5px 0 80px;
        width: 100%;
    }

    #colourDetails .suggestions #colour-schemes-carousel.owl-carousel {
        padding: 5px 0 40px;
    }

#colourDetails #colour-schemes-carousel.owl-carousel .owl-prev,
#colourDetails #colour-schemes-carousel.owl-carousel .owl-next {
    top: 35%;
    transform: translateY(-35%);
}

#colourDetails #related-colours-carousel.owl-carousel .owl-prev,
#colourDetails #related-colours-carousel.owl-carousel .owl-next {
    top: 26%;
    transform: translateY(-26%);
}

#colourDetails div.li.small-swatch p,
#colourDetails div.primary-swatch p {
    font-size: 18px;
    line-height: 30px;
}


#products-available-carousel,
#related-colours-carousel,
#colour-schemes-carousel,
.item img {
    display: block;
    width: 100%;
    height: auto;
}

    #colour-schemes-carousel .owl-wrapper-outer {
        margin: 0 0 0 -10px;
    }

    #colour-schemes-carousel .colour-scheme .li {
        float: left;
        padding: 0 0 41px;
        position: relative;
        width: 165px;
    }

    #colour-schemes-carousel .colour-scheme .primary-swatch {
        padding: 0;
    }

        #colour-schemes-carousel .colour-scheme .primary-swatch .li {
            width: 370px;
        }

    #colour-schemes-carousel .thumbs {
        padding: 0;
    }

    #colour-schemes-carousel .colour-scheme .action {
        bottom: 21px;
    }

#products-available-carousel .item {
    width: auto;
    height: auto;
}

    #products-available-carousel .item p {
        padding: 15px 0 0;
        padding-left: 5px;
        padding-right: 5px;
    }

#colourDetails #products-available-carousel .owl-item .product {
 margin-right:35px;
}


#colourDetails .colour-details .owl-controls {
    display: none;
}


#colourFullScreenOverlay .close-action {
    background-color: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.15);
    position: absolute;
    top: 20px;
    right: 20px;
}

    #colourFullScreenOverlay .close-action:hover {
        background-color: rgba(0,0,0,0.10);
        border-color: rgba(0,0,0,0.3);
    }

    #colourFullScreenOverlay .close-action i {
        color: #000;
        opacity: 0.3;
    }

#colourFullScreenOverlay #colourName {
    margin: 0;
    position: absolute;
    top: 15px;
    left: 20px;
}

    #colourFullScreenOverlay #colourName p {
        font-weight: 700;
    }
       
/********** COLOUR CHART LANDING **********/

#colourChartLanding {
    padding-top: 75px;
    background-image: url(/images/wallpapers/full-top-blue.jpg);
    background-repeat: no-repeat;
    background-size: 100% 445px;
}

    #colourChartLanding .image-hue.tile-block .image-hue-text h6
    {
        color:white!important;
    }
    #colourChartLanding .image-hue.tile-block.whites .image-hue-text h6,
    #colourChartLanding .image-hue.tile-block.neutrals .image-hue-text h6,
    #colourChartLanding .image-hue.tile-block.yellows-oranges .image-hue-text h6 {
        color: #4C4C4C !important;
    }
       
    #colourChartLanding .top-section img.floating-image {
        width: 46%;
        position: absolute;
        right: -50px;
        top: 20px;
    }

    #colourChartLanding .top-section {
        padding-bottom: 275px;
    }

        #colourChartLanding .top-section h1 {
            font-size: 80px;
            line-height: 90px;
            padding-bottom: 25px;
            color: white;
            width: 60%;
        }

        #colourChartLanding .top-section p {
            color: white;
            font-weight: 300;
            font-size: 24px;
            line-height: 36px;
            width: 50%;
        }
        
#colourChartLanding .container-fluid {
    margin: 0 auto 10px;
}

#colourChartLanding .col-md-2 {
    padding: 10px 10px 14px;
    width: 20%;
}

#colourChartLanding .col-md-4 {
    width: 30%;
}

#colourChartLanding .col-md-8 {
    width: 60%;
}

    #colourChartLanding .col-md-8.col-md-offset-3 {
        margin-left: 20%;
    }

    #colourChartLanding .image-hue-colour {
        opacity: 1.00;
    }

    #colourChartLanding h6 {
        font-size: 24px;
        font-weight: 300;
        color: #fff;
    }

#colourChartLanding .image-hue-image {
    height: inherit !important;
    padding: 49%;
}

#colourChartLanding .image-hue-caption {
    bottom: 0%;
    width: 100%;
}

#colourChartLanding .image-hue-text {
    padding: 20px 15px;
}



/********** COLOURS - COLOUR SCHEMES & IDEAS **********/

#ColourSchemesContainer {
    height: 100%;
}

#colourSchemes .top-section {
    padding-bottom: 150px;
    margin: 0 auto !important;
    max-width: 1200px !important;
}

#colourSchemes .top-section img.floating-image {
    width: 70%;
    position: absolute;
    right: -120px;
    top: -195px;
}


#colourSchemes {
    padding-top: 75px;
    background-image: url(/Images/brush_green_crop-top.jpg);
    background-repeat: no-repeat;
    background-size: 100% 400px;
}

.colour-schemes-image-section {
    border-left: 4px solid #F2F2F2;
    border-radius: 3px;
}

#colourSchemes .top-section h1 {
    line-height: 90px;
    padding-bottom: 25px;
    color: white;
    width: 60%;
}

#colourSchemes .subheader {
    padding: 30px 0px;
}


.fancybox-wrap .colour-scheme-image {
    position: relative;
    vertical-align: sub !important;
}

.fancybox-wrap a.action.scheme {
    font-size: 1em;
    border: 1px solid rgba(204, 204, 204, 1.0);
    background-color: rgba(204, 204, 204, 0.2);
    bottom: 30px;
    right: 30px;
    height: 44px;
    width: 44px;
}

    .fancybox-wrap a.action.scheme:before {
        color: rgba(204, 204, 204, 1.0);
        font-size: 37px;
        line-height: 41px;
        opacity: 1;
    }

.gutterSizer {
    width: 2%;
}

#ColourSchemesContainer .masonItem:hover {
    cursor: pointer;
}

.masonItem {
    width: 32%;
    margin-bottom: 10px;
}

    .masonItem h5 {
        font-size: 1.12em;
    }

    .masonItem img {
        width: 100%;
    }


div.DisplayFeatured:hover {
    cursor: pointer;
}


.colourSchemesAndIdeas .button-group {
    padding: 0;
}


.DisplayFeaturedButton {
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 1.0);
    line-height: 19px;
    position: absolute;
    bottom: 25px;
    right: 20px;
    height: 22px;
    width: 22px;
    text-align: center;
    z-index: 49;
}

    .DisplayFeaturedButton i {
        line-height: 14px;
        color: #fff;
    }

    .DisplayFeaturedButton:hover {
        cursor: pointer;
    }

#ColourSchemesContainer .colours-featured.widget.gallery {
    padding: 0;
    right: 10px;
    max-width: 250px;
    width: 90%;
    z-index: 50 !important;
}

#ColourSchemesContainer .colours-featured h6 {
    padding: 0 0 15px;
}

#ColourSchemesContainer .colours-featured .controls {
    display: table;
    padding-top: 43px;
    width: 27%;
    padding-right: 10px;
}

#ColourSchemesContainer .colours-featured .thumbs:first-of-type {
    padding: 10px 0 5px 10px;
    border-right: 1px dashed #ccc;
    min-height: 93px;
    width: 73%;
}

#ColourSchemesContainer .colours-featured .thumbs:last-of-type {
    padding: 39px 1% 5px 0;
    width: 23%;
    float: right;
    max-width: 68px;
    position: relative;
}

#ColourSchemesContainer .colours-featured ul:first-of-type {
    float: left;
}

#ColourSchemesContainer .colours-featured ul:last-of-type {
    float: left;
}

#ColourSchemesContainer .colours-featured ul:first-of-type li {
    margin: 5px 5px;
}

    #ColourSchemesContainer .colours-featured ul:first-of-type li:first-of-type {
        margin: 5px 5px 5px 0;
    }

    #ColourSchemesContainer .colours-featured ul:first-of-type li:nth-child(3n+3) + li {
        margin: 5px 5px 5px 0;
    }

#ColourSchemesContainer .colours-featured ul:last-of-type li {
    margin: 5px 5px;
}

#ColourSchemesContainer .more {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    background-color: rgb(229,234,235);
    height: 48px;
    width: 48px;
    border: solid 1px rgba(0,0,0,0.3);
    padding: 0;
    cursor: pointer;
}

    #ColourSchemesContainer .more i {
        font-size: 1.38em; /*22px*/
        color: #878787;
        padding: 8px 0 0;
        line-height: .1em;
    }

#ColourSchemesContainer .colours-featured .close-action {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.fancybox-skin {
    background: #fff !important;
    border-radius: 0 !important;
    color: #4d4d4d !important;
}

    .fancybox-skin .right-pane {
        padding: 35px 15px 20px;
    }

        .fancybox-skin .right-pane h5 {
            font-size: 1.1em;
        }

        .fancybox-skin .right-pane > p {
            max-height: 110px;
            overflow: hidden;
            width: 75%;
            margin: 0 0 30px 0;
            padding: 0;
        }

        .fancybox-skin .right-pane .thumbs.swatches ul {
            float: left;
            width: 100%;
            padding: 0 0 15px;
            border-bottom: 1px solid #ccc;
        }

        .fancybox-skin .right-pane .thumbs.swatches li {
            float: left;
            margin: 0;
            padding: 0 0 20px;
            position: static;
            width: 100%;
        }

            .fancybox-skin .right-pane .thumbs.swatches li > div {
                float: left;
                position: relative;
                margin: 0 15px 0 0;
                width: 48px;
            }



            .fancybox-skin .right-pane .thumbs.swatches li div:last-of-type {
                float: left;
                width: auto;
            }

            .fancybox-skin .right-pane .thumbs.swatches li p {
                font-size: 0.86em;
                font-weight: 400;
                color: #4c4c4c;
            }


/********** COLOUR BOOKLETS & CHIPS **********/

#colourbooklet-header {
    padding-top: 75px;
    background-image: url(/images/wallpapers/full-top-purple.jpg);
    background-repeat: no-repeat;
    background-size: 100% 445px;
}


    #colourbooklet-header .top-section img.floating-image {
        width: 45%;
        position: absolute;
        right: -50px;
        top: 15px;
    }

    #colourbooklet-header .top-section {
        padding-bottom: 150px;
    }

        #colourbooklet-header .top-section h1 {
            font-size: 80px;
            line-height: 90px;
            padding-bottom: 25px;
            color: white;
            width: 60%;
        }

        #colourbooklet-header .top-section p {
            color: white;
            font-weight: 300;
            font-size: 24px;
            line-height: 36px;
            width: 65%;
        }

        #colourbooklet-header .top-section img.floating-image {
            width: 50%;
            position: absolute;
            right: -200px;
            top: -180px;
        }

#colour-booklets-chips {
    text-align: center;
}

    #colour-booklets-chips a {
        text-decoration: underline;
        color: #0A519A;
    }

    #colour-booklets-chips .product-img {
        text-align: center;
    }


.colourBookletsAndChips h3 {
    text-align: center;
    font-weight: 400;
}

.colourBookletsAndChips button {
    display: block;
    margin: 20px auto 0;
    width: 294px;
    padding: 9px;
}

.colourBookletsAndChips i {
    font-size: 11px;
}

.colourBookletsAndChips .booklet-close-btn {
    font-size: 15px;
    position: absolute;
    color: white;
    right: 28px;
    top: 0px;
    width: 30px;
    height: 30px;
    border: 1px solid white;
    background: transparent;
    padding: 0px;
}

.colourBookletsAndChips hr + h2 {
    padding: 15px 0 0;
}

#colour-booklets-chips.container {
    padding: 0;
}

    #colour-booklets-chips.container .col-md-6 {
        padding: 0 20px 0 0;
    }

#colour-booklets-chips .col-md-4 {
    padding: 0 10px 40px;
}

.colour-booklets-chips .col-md-6:last-of-type {
    margin: -8px 0 0;
}


/*COLOUR CONSULTANCY*/

.umb-grid.colourConsultancy {

    padding-bottom:25px;
}

.umb-grid.colourConsultancy .background-wallpaper {
    background-repeat: no-repeat;
    background-image: url(/images/colour-consultancy-banner.png);
    background-position: bottom center;
    background-size: cover;
    margin-bottom: 60px;
}
.umb-grid.colourConsultancy button.toggleform {
    font-size: 24px;
    color: #0A519A;
    font-weight:300;
    padding-top:19px;
    padding-bottom:19px;
}
.umb-grid.colourConsultancy #banner-image {
    position: absolute;
    top: -200px;
    height: 590px;
    right: -75px;
}

    .umb-grid.colourConsultancy .background-wallpaper h1 {
        font-size:80px;
        color: white;
    }
.umb-grid.colourConsultancy .background-wallpaper h2 {
    font-size:54px;
    color: white;
}


#colouriser div.top-section, #colouriserImage div.top-section {
    display: block;
    margin: 0 auto !important;
    max-width: 1200px !important
}

#colouriser .top-section {
    height: 383px;
}
#colouriserImage .top-section {
    height: 428px;
}

#colouriser, #colouriserImage {
    padding-top: 90px;
    background-image: url(/images/wallpapers/brush_lime_crop-top.jpg);
    background-repeat: no-repeat;
    background-size: 100% 445px;
}

    #colouriser .top-section h1, #colouriserImage .top-section h1 {
        font-size: 80px;
        line-height: 90px;
        padding-bottom: 25px;
        color: white;
        width: 60%;
    }

    #colouriser .top-section p, #colouriserImage .top-section p {
        color: white;
        font-weight: 300;
        font-size: 24px;
        line-height: 36px;
        width: 50%;
    }

    #colouriserImage #SearchColours {
        float: right;
        margin-top: -8px;
    }

    #colouriser .top-section img.floating-image, #colouriserImage .top-section img.floating-image {
        position: absolute;
        display: block;
        top: -175px;
        width: 51%;
        right: -87px;
    }


@-moz-document url-prefix() {
    .colourChart .collapse-trigger {
        position: relative;
    }

        .colourChart .collapse-trigger i {
            position: absolute;
            top: 6px;
            right: 10px;
        }
}