/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

.icon-rotate-90 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.icon-chevron-right:before {
    content: "\e99a";
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}


.GRY {color: #959595 !important; font-weight: 100;}
.AVGRN {color: #2c7d85 !important;}

.skpbody {
	font-family: 'skpbody', 'Open Sans', sans-serif !important;
}

/*COLOURWAYS*/

.BAK {
background: #FFFFFF !important; /* Old browsers */
color: #000 !important;
/*background-image: url(images/COLOUR-GRAIN.webp);
background-position: left bottom;
background-repeat: no-repeat;
background-size: cover;*/
}

.BAKBLK {
background: #000 !important; /* Old browsers */
}

/*STYLING #FF5D48 */
.STYLING,
div.col-12.m-0.STYLING > h2
{
background-color: #FF5D48 !important;
color: #000 !important;
	}

/*CUTTING #FFA800 */
.CUTTING,
div.col-12.m-0.CUTTING > h2
{
background-color: #FFA800 !important;
color: #000 !important;
	}

/*COLOUR #D255C6*/
.COLOUR,
div.col-12.m-0.COLOUR > h2
{
background-color: #D255C6 !important;
color: #000 !important;
	}
/*PARTNERS    #003a4c */
.PARTNERS,
div.col-12.m-0.PARTNERS > h2
{
background-color: #726eab !important;
color: #000 !important;
	}
/*BACKBAR #00C1C8 */
.BACKBAR,
div.col-12.m-0.BACKBAR > h2
{
background-color: #00C1C8 !important;
color: #000 !important;
	}

.BACKBARTITLE {
  /*width: 100vw;*/
  height: 100%;
  background-color: transparent;
  background-image: linear-gradient(to right, #00C1C8, #00C1C8);
  background-size: 100% 67%;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.STYLINGTITLE{
  /*width: 100vw;*/
  height: 100%;
  background-color: transparent;
  background-image: linear-gradient(to right, #FF5D48, #FF5D48);
  background-size: 100% 65%;
  background-position: center bottom;
  background-repeat: no-repeat;
}

    
.CUTTINGTITLE{
  /*width: 100vw;*/
  height: 100%;
  background-color: transparent;
  background-image: linear-gradient(to right, #FFA800, #FFA800);
  background-size: 100% 65%;
  background-position: center bottom;
  background-repeat: no-repeat;
}

    
.COLOURTITLE{
  /*width: 100vw;*/
  height: 100%;
  background-color: transparent;
  background-image: linear-gradient(to right, #D255C6, #D255C6);
  background-size: 100% 67%;
  background-position: center bottom;
  background-repeat: no-repeat;
}

    
.BACKBARTITLE{
  /*width: 100vw;*/
  height: 100%;
  background-color: transparent;
  background-image: linear-gradient(to right, #00C1C8, #00C1C8);
  background-size: 100% 67%;
  background-position: center bottom;
  background-repeat: no-repeat;
}

    
.PARTNERSTITLE{
  /*width: 100vw;*/
  height: 100%;
  background-color: transparent;
  background-image: linear-gradient(to right, #716FAD, #716FAD);
  background-size: 100% 72%;
  background-position: center bottom;
  background-repeat: no-repeat;
}


.PARTNERSBAK
{
background-color: rgba(241, 166, 147, 1.00) !important;
color: #000!important;
	}
.TRANSP {background-color: transparent !important;}
.WHTBAK {background-color: #FFFFFF !important;}


/*TITLES*/

/*STYLING#FF5D48 */
.titleSTYLING
{
color: #FF5D48 !important;
	}
/*CUTTING #FF5D48 */
.titleCUTTING
{
color: #FFA800 !important;
	}
/*COLOUR #D255C6*/
.titleCOLOUR
{
color: #D255C6 !important;
	}

.titlePARTNERS
{
color: #726eab !important;
	}
/*BACKBAR #43263a */
.titleBACKBAR
{
color: #00C1C8 !important;
	}
.titlePFB
{
color: #43263a !important;
	}


.buttonCOL {background-color: #D255C6 !important;}
.buttonSTY {background-color: #FF5D48 !important;}
.buttonCUT {background-color: #FFA800 !important;}
.buttonBAK {background-color: #00C1C8 !important;}
.buttonPART {background-color: #726eab !important;}

.divCOL {background-color: #eab4f2 !important;}
.divSTY {background-color: #ffb983 !important;}
.divCUT {background-color: #ffcd5f !important;}
.divBAK {background-color: #82e8df !important;}
.divPART {background-color: #beb4e6 !important;}

.detCOL {background-color: #d255c6 !important;}
.detSTY {background-color: #ff5d48 !important;}
.detCUT {background-color: #ffa800 !important;}
.detBAK {background-color: #00c1c8 !important;}
.detPART {background-color: #716fad !important;}

.togCOL {background-color: #f3d2f7 !important;}
.togSTY {background-color: #ffd5b5 !important;}
.togCUT {background-color: #ffe19f !important;}
.togBAK {background-color: #b4f1ec !important;}
.togPART {background-color: #d8d2f0 !important;}

.borderCOL {border: 1px solid #D255C6;border-radius: 2px;}
.borderSTY {border: 1px solid #FF5D48;border-radius: 2px;}
.borderCUT {border: 1px solid #FFA800;border-radius: 2px;}
.borderBAK {border: 1px solid #00C1C8;border-radius: 2px;}
.borderPART {border: 1px solid #726eab;border-radius: 2px;}

.BAKNEU {color: #FFF !important; background-color: #c92020; padding-left: 9px; padding-right: 9px;}
.FCPALE {color: #d4d3e6;}

.EXPERT{color: #716eb1 !important;}
.ADVANCED{color: #e349cb !important;}
.ESSENTIAL{color: #ff4b3a !important;}


.offsetPURP, .offsetPURP2, .offsetPURP3, .offsetPURP4, .OFFSETBAK {
  display: inline-block;
  position: relative;
    background-color: transparent !important;
    z-index: 2 !important;
}

.OFFSETBAK::before {
  content: "";
    position: absolute;
    width: 80%;
    height: 125%;
    top: -55px;
    left: -55px;
    background-color: rgba(241, 166, 147, 100);
    z-index: -1;
}


.offsetPURP::before {
  content: "";
    position: absolute;
    width: 9.0em;
    height: 84%;
    top: -8%;
    left: -8%;
    background: rgba(241, 166, 147, 100);
    z-index: -1;
}

.offsetPURP2::before {
    content: "";
    position: absolute;
    width: 11em;
    height: 46%;
    top: -8%;
    left: -8%;
    background: rgba(241, 166, 147, 100);
    z-index: -1;
}

.offsetPURP3::before {
    content: "";
    position: absolute;
    width: 12em;
    height: 84%;
    top: -8%;
    left: -5%;
    background: rgba(241, 166, 147, 100);
    z-index: -1;
}

.offsetPURP4::before {
    content: "";
    position: absolute;
    width: 9em;
    height: 54%;
    top: -8%;
    left: -5%;
    background: rgba(241, 166, 147, 100);
    z-index: -1;
}

.thickhr {
border-bottom: 6px solid rgba(241, 166, 147, 100);
}

.WICON {width: 215px;}
.WITXT {min-width: 280px;}

@media only screen and (max-device-width: 600px) { 
    
    .OFFSETBAK::before {
  content: "";
    display: none !important;
    z-index: -1;
}
    
    
     .offsetPURP::before {
  content: "";
    position: absolute;
    width: 9.7em;
    height: 70%;
    top: 10%;
    left: -7%;
    background: rgba(241, 166, 147, 100);
     z-index: -1;
    } 
     
    .offsetPURP2::before {
    content: "";
    position: absolute;
    width: 11em;
    height: 37%;
    top: 10%;
    left: -8%;
    background: rgba(241, 166, 147, 100);
        z-index: -1;
    }
     
    .offsetPURP3::before {
    content: "";
    position: absolute;
    width: 12em;
    height: 76%;
    top: 10%;
    left: -5%;
    background: rgba(241, 166, 147, 100);
    z-index: -1;
} 
    
    .offsetPURP4::before {
    content: "";
    position: absolute;
    width: 12em;
    height: 52%;
    top: 10%;
    left: -8%;
    background: rgba(241, 166, 147, 100);
    z-index: -1;
} 
    
    .centeronmobile  {text-align: center;}  
     
     }

/*VARIOUS*/

.WHT {color:#FFFFFF !important;}

.SLS-number {
	position: absolute;
	top: 8px;
    display: inline-block;
    font-size: 10px;
    color: #FFF;
    width: 38px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    z-index: 1;
    overflow: hidden;
	background-color: #000;
	margin-left: 7px;
	
}

.STOCK-number {
    display: inline-block;
    font-size: 10px;
    color: #FFF !important;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    z-index: 1;
    overflow: hidden;
    background-color: #424242 !important;
    margin-bottom: -5px;
}
.CSTOCK-number {
    display: inline-block;
    font-size: 14px;
    color: #FFF;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 50%;
    z-index: 1;
    overflow: hidden;
    background-color: #000;
    margin: 0px;
}

.SHOWMOBILE {
display: none !important
}
.SHOWDESK{
display: block !important
}
	
@media  (max-width: 576px) {

.SHOWMOBILE {
display: block !important
}
	
.SHOWDESK {
display: none !important
}

}

.btn {font-family: 'skpheadlines', sans-serif;}

.TRradius {border-top-right-radius: 20px;}

.PillButton {border-radius: 25px !important;}

.button.button-3d:hover {
	background-color: rgba(241, 166, 147, 100);
	opacity: 0.9;
}