@charset "UTF-8";
/* CSS Document */
ul.RangeNav {max-width:100%;margin:0 0 1em 0;padding:0px;box-sizing:border-box;text-align:left!important}
.RangeNav li {display:inline;}
.RangeNav a:link, .RangeNav a:visited {border-right:1px solid #999; color:#666;margin:0px;padding:0 10px 0 7px}
.RangeNav a:hover {color:#01a049}
.RangeNav a:active {color:#92d763}
.RangeNav a.FirstItem {border-left:none;border-right:none;margin-left:0px!important;padding-left:0px!important;padding-right:5px!important}

@media only screen and (min-width : 285px)  {
        /* Section versions */
        /*TABS*/
        .tabs {border:none;float: none;list-style: none;margin: 0;padding: 0;max-width: 100%;}
        .tabs:after {window: '';display: table;clear: both;}
        .tabs input[type=radio] {display:none;}
        .tabs label {background-color:white; -webkit-border-top-left-radius: 6px;-webkit-border-top-right-radius: 6px;-moz-border-radius-topleft: 6px;-moz-border-radius-topright: 6px;border-top-left-radius: 6px;border-top-right-radius: 6px;border: 0px dotted #999;border-bottom:3px solid #999;color: #666;cursor: pointer;display: inline-block;float: left;font-size: 14px;font-weight: normal;padding: 4px 0px 1px 0px;margin:0 20px 0 1%;}
        .tabs label span {display: inline-block;}
        .tabs label:hover {background-color:white;color: #74aa50; border-bottom: 3px solid #74aa50}
        .tab-window {background-color:#ffffff;border:0px solid #999;box-sizing: border-box;display: none;float: left;margin:0;padding: 8px 0; width: 100%;}

        .tabs [id^="tab"]:checked + label {background-color:#fff;background-image: none;border-bottom: 3px solid #74aa50;color: #000;}
        #tab1:checked ~ #tab-window1, #tab2:checked ~ #tab-window2, #tab3:checked ~ #tab-window3, #tab4:checked ~ #tab-window4 {display: block;}

        
        /* Links */
        a.light:link, a.light:visited {color:#fff;} a.light:hover {border-bottom:1px dotted #fff} a.light:active {border-bottom:1px solid #fff;color:#fff}
        a.dark:link, a.dark:visited {color:#000; font-size:13px; text-shadow:1px 1px 1px #ccc} a.dark:hover {border-bottom:1px dotted #000} a.dark:active {border-bottom:1px dotted #000;color:#74aa50}
    .tiny {font-size:10px}
       
        /* Windows with only one link (from bottom)*/
        img.own {margin:0!important;padding:0!important;max-width:100%;width:auto;height:auto;border-radius:6px}
        .Label-D {height:100%;position:relative;text-align:left;color:black} 
        .Label-D img {height:auto;width:auto}
        .Label-DText {position: absolute;bottom:10%;background-color:white;border-right:0px solid #eee;border-top:0px solid #eee;box-sizing:border-box;padding:5px 15px 5px 10px; border-bottom-right-radius: 6px;border-top-right-radius: 6px; opacity:0.8;margin:auto;width:auto;max-width:100%;box-shadow:2px 2px 2px #212121;font-weight:400}
        .Label-DText2 {position: absolute;bottom:10%;background-color:white;border-right:0px solid #eee;border-top:0px solid #eee;box-sizing:border-box;padding:5px 15px 5px 10px; border-bottom-right-radius: 6px;border-top-right-radius: 6px; opacity:0.9;margin:auto;width:auto;max-width:100%;box-shadow:2px 2px 2px #212121;font-weight:400}
        
        /* Window with multiple links (from top) */
        [class*="-window"] {border-radius:6px}
        .inspiration-window{background-image:url("picts/home/squares/latest-looks.jpg");background-size: cover;width: 100%; height: 0; padding-bottom: 90%;padding-top:10%;font-weight:400} 
        .tca-window{background-image:url("picts/home/squares/tca.jpg");background-size: cover;width: 100%; height: 0; padding-bottom: 90%;padding-top:10%;font-weight:400} 
        .order-window{background-image:url("picts/home/squares/order-drawdowns.jpg");background-size: cover;width: 100%; height: 0; padding-bottom: 90%;padding-top:10%;font-weight:400}
        .askus-window{background-image:url("picts/home/squares/ask.jpg");background-size: cover;width: 100%; height: 0; padding-bottom: 90%;padding-top:10%;font-weight:400}
        .range-window{background-image:url("picts/home/squares/product-range-spec.jpg");background-size: cover;width: 100%; height: 0; padding-bottom:90%;padding-top:10%;font-weight:400} 
        .learn-window{background-image:url("picts/home/squares/blue-band.jpg");background-size: cover;width: 100%; height: 0; padding-bottom: 90%;padding-top:10%;font-weight:400} 
        .webinar-window{background-image:url("picts/home/squares/webinar.jpg");background-size: cover;width: 100%; height: 0; padding-bottom: 90%;padding-top:10%;font-weight:400} 
        .colour-window {background-image:url("picts/home/squares/colour-library.jpg");background-size: cover;width: 100%; height: 0; padding-bottom: 90%;padding-top:10%;font-weight:400}
        .projects-window {background-image:url("picts/home/squares/projects.jpg");background-size: cover;width: 100%; height: 0; padding-bottom: 90%;padding-top:10%;font-weight:400} 
        .Link-Text {background-color:white;display:inline-block;padding:5px 15px 5px 10px; margin-bottom:0px!important;border-bottom-right-radius: 6px;border-top-right-radius: 6px; opacity:0.9;max-width:83%; width:auto;box-shadow:2px 2px 2px #212121;font-weight:400}
        
         /* PAINT BANDS */
        .JP2 {font-family:'Lexend',JamesPaul,arial,helvetica,sans-serif;font-size:24px;font-weight:normal;margin-bottom:0;margin-top:0}
        p.JP2 + p {margin-top: 5px}
        a.lightlink:link,  a.lightlink:visited{color:#000;border-bottom:1px dotted #666}  a.lightlink:hover {color:#74aa50;border-bottom:1px dotted #74aa50;} a.lightlink:active {color:#74aa50;border-bottom:1px dotted #fff;} 
        .PaintBandEffect {background-image: url(picts/home/painty-line-bottom.jpg);  background-position: right 9px bottom;  background-repeat: no-repeat;color:#000;margin:20px 0px;padding:0 0 20px 0}
        .NoPaintBandEffect {background-image: none; color:#000;margin:20px 0px;padding:0 0 20px 0}
        
        /* logos */
    .logo {float:left;box-sizing:border-box; width:25%; padding:5px 10px 5px 10px;} .logo img {max-width:100%;width:86px;height:auto}
        .logo2 {float:left;box-sizing:border-box; width:25%; padding:5px 10px 5px 10px;}
        .logo3 {float:left;box-sizing:border-box; width:50%; padding:5px 10px 5px 10px;}
        }
        
       @media only screen and (min-width : 481px)  {
            a.dark:link {font-size:14px}
            .Link-Text {max-width:58%}
           .logo  {float:left;box-sizing:border-box; width:20%; padding:5px 10px 5px 10px;}
           .logo2  {float:left;box-sizing:border-box; width:20%; padding:5px 10px 5px 10px;}
           .logo3 {float:left;box-sizing:border-box; width:30%; padding:5px 10px 5px 10px;}
        }
        
        @media only screen and (min-width:768px) {
            .Row-icon {clear:both;display: -webkit-flex; display:flex;-webkit-flex-wrap: wrap; flex-wrap: wrap;  -webkit-justify-content: center;justify-content:center;margin:auto;text-align:center;width:auto;max-width:100%;}
            .Link-Text {max-width:75%}
            .logo {width:12.5%}
            .logo2  {width:12%}
            .logo3  {width:20%}
        }

         @media only screen and (min-width:1024px) {
         .logo {width:14.285%}   /*16.666% 6 across 1 line*/  
        }