/* Begin css Combined CSS */
/* Begin css critical CSS */
 
 /** Begin CSS Section: defaults */

 /* Begin CSS Part: Base */

 /* Begin CSS Part: Layout */

 /* Begin CSS Part: Desktop Defaults */

 /* Begin CSS Part: Tablet Defaults */

 /* Begin CSS Part: Mobile Defaults */

 /** Begin CSS Section: core */

 /* Begin CSS Part: DISABILITY */

 /* Begin CSS Part: Fonts */

 /* Begin CSS Part: Buttons */

 /* Begin CSS Part: Colours */

 /* Begin CSS Part: Menus */

 /* Begin CSS Part: Responsive Menu */

 /* Begin CSS Part: Editor Overrides */

 /* Begin CSS Part: Specials */

 /* Begin CSS Part: Effects */

 /* Begin CSS Part: Site Design */

 /* Begin CSS Part: User Design */

 /* Begin CSS Part: Site Components */

 /* Begin CSS Part: Results */

 /* Begin CSS Part: Pages */

 /** Begin CSS Section: modules */

 /* Begin CSS Part: 404 */

 /* Begin CSS Part: Admin */

 /* Begin CSS Part: Auto Pdf */

 /* Begin CSS Part: Basket */

 /* Begin CSS Part: Calendar */

 /* Begin CSS Part: Categories */

 /* Begin CSS Part: Checkout */

 /* Begin CSS Part: Collation */

 /* Begin CSS Part: Collation Admin */

 /* Begin CSS Part: Cookies */

 /* Begin CSS Part: Crm */

 /* Begin CSS Part: Currency Converter */

 /* Begin CSS Part: Discount */

 /* Begin CSS Part: Email Template */

 /* Begin CSS Part: Form */

 /* Begin CSS Part: Home */

 /* Begin CSS Part: Kit Designer */

 /* Begin CSS Part: Multi User */

 /* Begin CSS Part: News Letter */

 /* Begin CSS Part: Order Manager */

 /* Begin CSS Part: Orders */

 /* Begin CSS Part: Payment Gateway */

 /* Begin CSS Part: Qanda */

 /* Begin CSS Part: Redirect */

 /* Begin CSS Part: Review */

 /* Begin CSS Part: Scroller */

 /* Begin CSS Part: Search */

 /* Begin CSS Part: Search Results */

 /* Begin CSS Part: Seo */

 /* Begin CSS Part: Shipping */

 /* Begin CSS Part: Snippets */

 /* Begin CSS Part: Sub Layout */

 /* Begin CSS Part: System Manager */

 /* Begin CSS Part: User */

 /* Begin CSS Part: Warning *//* Begin css late-load CSS */
 
 /** Begin CSS Section: defaults */

 /* Begin CSS Part: Base */

 /* Begin CSS Part: Layout */

 /* Begin CSS Part: Desktop Defaults */

 /* Begin CSS Part: Tablet Defaults */

 /* Begin CSS Part: Mobile Defaults */

 /** Begin CSS Section: core */

 /* Begin CSS Part: DISABILITY */

 /* Begin CSS Part: Fonts */
/*****FONTS********

@font-face {
    font-family:'Bourbon';
    src: url('/userfiles/fonts/bourbongrotesque-regular+(1).otf');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family:'Comfortaa';
    src: url('/userfiles/fonts/comfortaa-regular.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}

*/


/****GENERAL FONTS***/

body {
    font-family: 'Lato', sans-serif;
    line-height: 1.4;
}


h1, h2, h3, h4, h5, h6 {
	font-family: 'Oswald', sans-serif;
}


h1 {
  font-size: 2.750em;
  line-height: 1.250em;
}

h2 {
    font-size: 2em;
    line-height: 1.2em;
    margin-bottom: 8px;
}

h3 {font-size:1.200em; line-height:1.550em;}

h4 {font-size:1.1em; line-height:1em;}

label {
    display: block;
    font-size: 14px;
}

p, 
.rich-text,
.rich-text div,
.content div, .content {
  font-size:16px;  
  line-height: 26px;
}

p, .rich-text div, .content div {
    margin: 0 0 4px;
}

p *, 
.rich-text,
.rich-text div *,
.content div *{
  font-size:inherit; 
  text-align: inherit;
}

small {font-size: 85%;}

.text-nowrap {white-space: nowrap;}
.lowercase {text-transform: lowercase;}
.uppercase {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}

abbr[title] {border-bottom: 1px dotted;}
b, strong {font-weight: bold;}
dfn, em, i {font-style: italic;}



/* -------------------- Links -------------------- */

a:link, a:active, a:visited, a:hover, button, .button {text-decoration: none;}

.richtext a:link, .description a:link {
    font-weight: bold;
}

.nopointer {cursor:default;}


/***********LISTS***************/

ul.bullet-list {}
ul.bullet-list li {
    list-style: circle;
    font-size: 14px;
    margin-left: 30px;
    margin-top: 6px;
}


ul.numeric li {
    list-style: decimal;
    font-size: 14px;
    margin-left: 30px;
    margin-top: 6px;
}


.tick-list li {
    background-image: url("/userfiles/images/roundedcheckmark.png");
    list-style: none;
    font-size: 20px;
    margin-left: 12px;
    margin-top: 6px;
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: left center;
    padding-left: 32px;
    margin-bottom: 6px;
}


.quick-list {padding:12px;}

.quick-list li {
    list-style: none;
    font-size: 15px;
    margin-left: 12px;
    padding: 2px 0px 2px 24px;
    background-image: url(/userfiles/css/images/rightarrow.png);
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: left 6px;
    margin-bottom: 6px;
    font-weight: bold;
}

.fill-2 .quick-list li {
    background-image: url(/userfiles/css/images/rightarrowwhite.png);
}

.quick-list.large-list li {
    font-size: 16px;
    margin-bottom: 12px;
    font-weight:normal;
}


.quick-list.larger-list li {
    font-size: 18px;
    margin-bottom: 12px;
}

/**********RESPONSIVE*********/


@media screen and (max-width:520px) {
  
  h1 {
    font-size: 1.50em;
    line-height: 1.75em;
}

}
 /* Begin CSS Part: Buttons */
/*****BUTTON STYLES*****/

button, .button, a.button, input[type="submit"], input[type="reset"], input[type="button"], .action-button a {
  text-align: center !important;
  max-width:100%;
  border-radius:6px;
  white-space: normal;
  border-width: 1px;
  border-style: solid; 
  background-repeat: no-repeat;
}


button, .button, input[type="reset"], input[type="button"], .action-button a {
    font-size: 11px;
    line-height: 1em;
    padding: 6px 16px;
}

.large.button, input[type="submit"], .action-button.large a, .large-button .button {
    font-size: 1em;
    line-height: 1.2em;
    padding: 10px 26px 10px;
}


a.super, input[type="submit"].super, .action-button.super a {
    font-size: 2em;
    line-height: 1.5em;
    border-width: 2px;
    padding: 4px 24px 4px;
}

.proceed .button {
    background-image: url(/userfiles/images/rightarrow.png);
    background-position: 5% center;
    background-size: 22px;
    padding-left: 50px !important;
}

.proceed .button:hover {
	padding-left: 26px;
    background-position: 90% center;
        padding-right: 50px !important;
}


@media screen and (max-width:600px) {

a.super, input[type="submit"].super, .action-button.super a {
    font-size: 1em !important;
    line-height: 1.5em !important;
    border-width: 2px !important;
    padding: 4px 24px !important;
}

  
}

 /* Begin CSS Part: Colours */
/*******COLOURS*****/

/*****SITE STRUCTURE*****/

html, body > .layout {background-color: #ffffff;}


/***Primary Website Colour*****/

body > .layout .fill-1 {background-color: #efefef;}

body > .layout .fill-1 h1,
body > .layout .fill-1 h2,
body > .layout .fill-1 h3,
body > .layout .fill-1 h4,
body > .layout .fill-1 label,
body > .layout .fill-1 div,
body > .layout .fill-1 p,
body > .layout .fill-1 span,
body > .layout .fill-1 a,
body > .layout .fill-1 a:link,
body > .layout .fill-1 a:visited,
body > .layout .fill-1 li:hover a {
	color: #212121!important;
}
body > .layout .fill-1 a.button {color:#fff !important;}

.bg-1 {background-color: #efefef;}
.bg-2 {background-color: #0F85BC;}

/***Secondary Website Colour*****/

body > .layout .fill-2 {background-color: #0F85BC;}

body > .layout .fill-2 h1,
body > .layout .fill-2 h2,
body > .layout .fill-2 h3,
body > .layout .fill-2 h4,
body > .layout .fill-2 label,
body > .layout .fill-2 div,
body > .layout .fill-2 p,
body > .layout .fill-2 b,
body > .layout .fill-2 i,
body > .layout .fill-2 span,
body > .layout .fill-2 a,
body > .layout .fill-2 a:link,
body > .layout .fill-2 a:visited,
body > .layout .fill-2 li:hover a {
	color: #FFFFFF!important;
}

body > .layout .fill-2 a.button {color:#fff !important;}

/******HEADER*********/

body > .layout > .header {
    background-color: #212121;
    
}


body > .layout > .header h1,
body > .layout > .header h2,
body > .layout > .header h3,
body > .layout > .header h4,
body > .layout > .header label,
body > .layout > .header div,
body > .layout > .header p,
body > .layout > .header span,
body > .layout > .header a {
	color: #ffffff;
}


/*******FOOTER*******/

body > .layout > .footer {
	background-color: #424242;
    /*background-image: url(/userfiles/images/); */
    

background: -moz-linear-gradient(300deg, rgba(0,0,0,1) 0%, rgba(51,51,51,1) 51%, rgba(85,85,85,1) 100%);
background: -webkit-linear-gradient(300deg, rgba(0,0,0,1) 0%, rgba(51,51,51,1) 51%, rgba(85,85,85,1) 100%);
background: linear-gradient(300deg, rgba(0,0,0,1) 0%, rgba(51,51,51,1) 51%, rgba(85,85,85,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#555555",GradientType=1); 
    
    
}

body > .layout > .footer h1,
body > .layout > .footer h2,
body > .layout > .footer h3,
body > .layout > .footer h4,
body > .layout > .footer label,
body > .layout > .footer div,
body > .layout > .footer p,
body > .layout > .footer span,
body > .layout > .footer li a,
body > .layout > .footer li:hover a,
body > .layout > .footer a:link,
body > .layout > .footer a:visited {
	color: #ffffff;
}


body > .layout > .footer input[type="text"], 
body > .layout > .footer input[type="email"], 
body > .layout > .footer input[type="number"], 
body > .layout > .footer select, 
body > .layout > .footer textarea, 
body > .layout > .footer input[type="password"], 
body > .layout > .footer input[type="file"] {
	color: #4a4a4a!important;
}


/*****FONTS AND MESSAGES*******/

h1, .page-title .content {color: #212121;}

h2, .title, .layout .title a {color: #0F85BC;}

h3, h4, h5, h6 {color:#1f1f1f;}

label, legend {color:#1f1f1f;}

p, .layout-component {color:#212121;}


b, strong, i, em {color: #0F85BC;}


/*****LINKS*****/

a, a:link {color: #0F85BC;}

a:hover {color: #22323b;}

a:visited {color: #3F536E;}


/*****NOTIFICATIONS*****/

.notifications > div {
	background-color:#616161; 
	border: 4px solid #FFFFFF; 
}
    
.notifications > div.error_container {background-color:#8F0606;}

.notifications > div h4, 
.notifications > div li,
.notifications > div p,
.notifications > div span {
	color:#FFFFFF;
}


/*******BUTTONS*****/

button, .button, a.button, input[type="submit"], input[type="reset"], input[type="button"], .action-button a {
    background-color:   #0F85BC;
    color:              #ffffff;
    border-color:       #ffffff;
}

button:hover, .button:hover, a.button:hover,
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover,
.action-button a:hover {
    background-color:   #212121;
    color:              #ffffff;
    border-color:       #d6d6d6;
}


/****GO BUTTONS****/

.go, input.go, a.go, .file .button {
    background-color:   #0F85BC;
    color:              #ffffff;
}

.go:hover, input.go:hover,a.go:hover, .file .button:hover {
    background-color:   #1e629e;
    color:              #ffffff;
}


a.edit {
    background-color:   #0F85BC;
    color:              #ffffff;
}

a.edit:hover {
    background-color:   #1e629e;
    color:              #ffffff;
}


/****CANCEL BUTTONS****/

.cancel, input.cancel, a.cancel, a.delete, input.delete, .delete a, a.remove-product  {
    background-color:   #9E2323;
    color:              #FFFFFF;
    border-color:   #9E2323;
}
.cancel:hover, input.cancel:hover,a.cancel:hover, a.delete:hover, input.delete:hover, a.remove-product:hover {
    background-color:   #7A0612;
    color:              #FFFFFF;
    border-color:   #7A0612;
}


/***MENUCOLOURS*****/

ul.menubar li a { color: #888888;}
ul.menubar li:hover a { color: #4f4f4f;}

/******MENU SECTION*******/

.menu-section {
  background-color: #000000; 
  border-color: #616161;
}

.main-menu {  
	background-color: #000000;
}

.main-menu > .menubar > li > a {color: #ffffff;}

.main-menu > .menubar > li:hover {
background-color: #0F85BC;
}

.main-menu > .menubar > li:hover > a {color: #FFFFFF;}


/**SUBMENU***/

.main-menu ul.menubar li ul {background-color: #616161; border-color: #616161;}

.main-menu ul.menubar li ul li {background-color: #616161; border-color: #616161;}

.main-menu ul.menubar li ul li a {color: #FFFFFF;}

.main-menu ul.menubar li ul li:hover {background-color: #0F85BC;}

.main-menu ul.menubar li ul li:hover a {color: #FFFFFF;}


/*****HEADER MAIN MENU********/

.header .main-menu {background-color:transparent;}


/****RESPONSIVE MENU*****/

.responsive-menu .mod_sub_layout .layout-cell.istart, 
.responsive-menu .slaved {
 background-color: #000000; 
}


/*****INPUTS*****/

input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="file"], select, textarea {
    background-color:   #FFFFFF;
    color:              #4a4a4a;
    border:             1px solid #8c8c8c;
    /*box-shadow: 1px 1px 1px rgba(119, 119, 119, 0.25) inset;*/
}

input[type="text"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, 
input[type="file"]:hover, select:hover, textarea:hover {
    background-color:   #EFEFEF;
    color:              #4a4a4a!important;
    border-color:       #777777;
    /*box-shadow: 1px 1px 1px rgba(119, 119, 119, 0.25) inset;*/
}

input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, 
input[type="file"]:focus, select:focus, textarea:focus {
    background-color:   #EFEFEF;
    color:              #4a4a4a!important;
    border-color:       #4a4a4a;
    /*box-shadow: 1px 1px 1px rgba(119, 119, 119, 0.25) inset;*/
}

input[type="text"]:focus:hover, input[type="email"]:focus:hover, input[type="number"]:focus:hover, input[type="password"]:focus:hover, 
input[type="file"]:focus:hover, select:focus:hover, textarea:focus:hover {
    background-color:   #EEEEEE;
    color:              #4a4a4a!important;
    border-color:       #4a4a4a;
    /*box-shadow: 1px 1px 1px rgba(119, 119, 119, 0.25) inset;*/
}


/******BORDERS*****/


body {border-color:#969696;}

.invoice {border-color:#4a4a4a;}

.mini {border-color:#969696;}

.mini:hover {border-color:#0F85BC;}


/*****/





 /* Begin CSS Part: Menus */
/********MENUS AND SUBMENUS******/

ul.menubar, .user-menu {list-style:none; list-style-type:none; z-index:70;}
ul.menubar li, .user-menu li {position: relative; list-style:none; vertical-align:top;}
ul.menubar li a, .user-menu li a {padding:0px 8px; width:100%;}

/*sub menu positioning */

ul.menubar ul {
    display:            none;
    position:           absolute;
    left:               0px;
    min-width:          105%;
}

ul.vertical li, .vertical.menu ul li, .menubar li li, ul.menubar li:hover > ul {display:block;}

.menubar ul li, .menubar ul li a {}

/*sub sub menu positioning */

ul.menubar ul ul, ul.vertical ul {top:0 !important; left:99% !important;}



/****MAIN MENU - FULLWIDTH *****/

.menu-section .main-menu {}

.menu-section .main-menu > .menubar > li, 
.menu-section .main-menu > .menubar > li > a {
    height: 50px;
    line-height: 50px;
    font-size: 15px;
}



.menu-section .main-menu > .menubar > li {position:static;}
.menu-section .main-menu > .menubar > li.li_end {border-right:none;}
.menu-section .main-menu > .menubar > li + li {}

.menu-section .main-menu > .menubar > li > a {
    padding: 0px 10px;
    text-transform: uppercase;
}

.header .main-menu > .menubar > li:hover > a {
    border-bottom: 8px solid #fff;
}


.menu-section .main-menu > .menubar > li.li0 > a {
    background-image: url("/userfiles/images/homeicon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    font-size: 0px;
    color: transparent;
    width: 50px;
    display: inline-block;
    vertical-align: top;

}


.menu-section .main-menu > .menubar .menubar {
padding:8px; 
border:2px solid #fff;
}

.menu-section .main-menu > .menubar .menubar li, 
.menu-section .main-menu > .menubar .menubar li a {
  text-align: left;
  height: auto;
}


.menu-section .main-menu > .menubar .menubar li a {
  padding: 4px 18px;
  display: inline-block;
  width: 100%;

}


/*****Large sub menu*******/

.menu-section .main-menu > .menubar > li > .menubar {
min-width: 100%;
}

.menu-section .main-menu > .menubar > li > .menubar > li {
    display: inline-block !important;
    width:20%;
    margin-bottom:12px;
    padding:12px;
}

.menu-section .main-menu > .menubar > li > .menubar > li:hover {background-color:transparent !important;}

.menu-section .main-menu > .menubar > li > .menubar > li > a {
    border-bottom: 2px solid #fff;
    font-size: 18px;
    padding: 8px;
    background-image: url(/userfiles/images/fastforward.png);
    background-size: 0px;
    background-position: -100% center;
    background-repeat: no-repeat;
    margin-bottom:8px;
}

.menu-section .main-menu > .menubar > li > .menubar > li:hover > a {
    background-position: 100% center;
     background-size: 20px;
}


.menu-section .main-menu > ul.menubar > li > ul > li > ul {
    display: block;
    position: relative;
    left: 0px !important;
    min-width: 100%;
    border:none !important;
    background-color:transparent !important;
    padding:0px !important;
}

.menu-section .main-menu > ul.menubar > li > ul > li > ul > li {display:inline-block; width:100%; border-radius:4px;}



.main-menu ul.menubar li ul {
    background-color: rgba(0, 0, 0, 0.85);
    border: 1px solid #fff;
    padding:8px 0px;
}

.main-menu ul.menubar li ul li {background-color: transparent; border-color: #616161;}

 /* Begin CSS Part: Responsive Menu */
@media screen and (max-width:1000px) {

/*****RESPONSIVE MENU DEFAULTS****/ 
  
.responsive-menu,
.responsive-menu .mod_sub_layout {line-height:0;}

.responsive-menu {
    width: 100% !important;
    padding-bottom: 50px;
}

.responsive-menu .mod_sub_layout > .layout-cell.istart {
    height: 50px;
    left: 0;
    position: fixed;
    top: 0;
    z-index: 200;
}
.responsive-menu .mod_sub_layout .layout-cell.istart .layout-component {margin:0px 4px !important;}
.responsive-menu .mod_sub_layout .layout-cell.istart .resp-logo {float:left;}  
.responsive-menu .mod_sub_layout .layout-cell.istart .layout-component img {
  height: 35px;
  width: auto;
  margin-top: 5px;
}
  
.responsive-menu .slaved {
  position: fixed !important;
  padding: 60px 24px;
  left: -100%;
  width: 100%;
  z-index: 10;
  overflow-y: auto;
  top: 50px;
  height: 100%;
}
.responsive-menu .slaved.open { 
    left:0%;
  }
  

 
/*****RESPONSIVE MENU*****/
  
  
  
.responsive-menu .menu .menubar li ul {
    position: relative;
    left: 2% !important;
    width: 98%;
    max-width: 98%;
    min-width: 98%;
    display: inline-block;
    border-left: 2px solid #fff;
    margin-bottom: 12px;
}

.responsive-menu .menu .menubar li:hover ul {}

 .responsive-menu .menu .menubar li, 
 .responsive-menu .user-menu li { 
    border-bottom: 1px solid #fff !important;
  }
  
.responsive-menu .menu .menubar li > a,  .responsive-menu .user-menu li a {
  background-repeat: no-repeat;
  background-position: 96%;
  color: #fff !important;
  padding-left: 2% !important;
  background-size: 20px;
  padding-bottom: 8px !important;
  padding-right: 22px !important;
  line-height: 20px !important;
  padding-top: 8px !important;
  white-space: normal;
  background-color: transparent;
}

  
  

  
  
/*****END RESPONSIVE MENU DEFAULTS****/  
  
}



 /* Begin CSS Part: Editor Overrides */

 /* Begin CSS Part: Specials */

 /* Begin CSS Part: Effects */
.slaved, body > .layout > .header .layout-cell, 
body > .layout > .header, header-slave,
.menu-section .main-menu > .menubar > li > .menubar > li > a,
.circle-grid .layout-component img {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}



.gallery-outer .thumb-container .gallery-thumbs .gallery-thumb, .mini, .mini .title h4 {
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -ms-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear;
}



.mini:hover {
  -moz-transform: scale(1.025) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1.025) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1.025) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1.025) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1.025) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}



@media screen and (min-width:640px) {
  
.transition, .transition *, .button, input[type="submit"] {
  -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

 
}





.circle-grid .layout-component:hover img {
   animation: bounce 0.5s infinite; //other browsers
   -webkit-animation: bounce 0.5s infinite; //webkit browsers
   -moz-animation: bounce 0.5s infinite; //firefox
   -o-animation: bounce 0.5s infinite; //opera
}



@-webkit-keyframes bounce {
    0%,  
    100% {
       -webkit-transform: translateY(0);
    } 
    50% {
        -webkit-transform: translateY(-10px);
    }
}
@-moz-keyframes bounce {
    0%, 
    100% {
       -moz-transform: translateY(0);
    }
    50% {
       -moz-transform: translateY(-10px);
    }
}
@-o-keyframes bounce {
    0%,
    100% {
       -o-transform: translateY(0);
    }
    50% {
       -o-transform: translateY(-10px);
    }
}
@keyframes bounce {
    0%,  
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}




















@-webkit-keyframes bounceRight {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  60% {
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px);
  }
}
@-moz-keyframes bounceRight {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(-30px);
  }
  60% {
    transform: translateX(-15px);
  }
}
@keyframes bounceRight {
  0%,
  20%,
  50%,
  80%,
  100% {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  60% {
    -ms-transform: translateX(-15px);
    transform: translateX(-15px);
  }
}
/* /right bounce */


/* assign bounce */
.button-link .collation-item-link:hover {
  -webkit-animation: bounceRight 1s infinite;
  animation: bounceRight 1s infinite;

}




.credits {padding-top:50px; display:block; clear:both;}








.slideDown {
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}




 /* Begin CSS Part: Site Design */
body {
    padding-top: 160px;
}

@media screen and (max-width : 1000px) {

body {
    padding-top: 0px;
}
}


body > .layout > .header {
    position: fixed;
    top: 0px;
    left: 0px;    
}




body.slim > .layout > .header .company-info, 
body.slim > .layout > .header .social-block {
display:none;
}

body.slim > .layout > .header .layout-cell.col4 {width:15% !important;}
body.slim > .layout > .header .layout-cell.col2 {width:68% !important;}



.pg-home .bottom-divide {
    border-bottom: none !important;
}



.header .image {
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: -16px;
    padding-right: 40px;
}

.slim .header .image {
    margin-top: 6px;
    padding-right: 0px;
}

.header .company-info-part {
    padding-left: 20px;
    color: #fff !important;
    padding-right: 2px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 16px;
    margin-top: 12px;
    font-size: 14px;
}

.header .company-info-part.telephone {
    background-image: url(/userfiles/images/telephoneicon.png);
}

.header .company-info-part.email {
 background-image: url(/userfiles/images/emailfilledclosedenvelope.png);
}
.header .social-block {margin-top:8px;}
.header .social-block img {
    width: 16px;
    margin-left: 6px;
}

.header .search-icon {
    height: 97px;
    line-height: 97px;
}
.header .search-icon img {
    width: 50px;
}

.header-slave {
    position: absolute;
    padding: 12px;
    top:0px;
    background-color: rgba(0, 0, 0, 0.5);
    right: 0px;
    width: 50% !important;
    box-shadow: 0px 12px 16px -10px #000;
    height:0px;
    opacity:0;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    z-index: 90 !important;
}

.header-slave.open {
    height:auto;
    opacity:1;
      top: 131px;
}

.header.slim .header-slave {
    top: 97px;
    background-color: rgba(76, 76, 76, 0.98);
}

.no-banner .header-slave {
    background-color: rgba(76, 76, 76, 0.98);
}



.search-sect  {padding-top:22px;}
.basket-sect {padding-top:16px;}


.header .account-link {
    display: inline-block !important;
    line-height: 0;
}

.header .account-link img {width:40px;}

.header .account-link label {
    line-height: 20px;
    font-size: 12px;
    margin-top:4px;
}



/**********SERVICES GRID**********/

.services-grid .layout-component {
    display: inline-block !important;
    }



.services-grid .layout-component h4 {
    background-color: #e8e8e8;
    color: #2b2b2b;
    padding: 12px 0px 0px;
    margin-top: 12px;
    font-weight: bold;
}

.services-grid .layout-component .content {
    padding: 12px;
    box-shadow: 0px 150px 100px -130px inset rgba(0, 0, 0, 0.15);
}


.services-grid .layout-component img {
    width: 45%;
    margin-bottom:12px;
}



/**********SPLIT SECT***********/

@media screen and (min-width:761px) {

.split-sect {display:table !important;}
.split-sect > .i {display:table-row !important;}

.split-sect > .i > .layout-cell {
    display: table-cell !important;
    vertical-align: middle;
}

.split-sect > .i > .layout-cell > .layout-component {max-width:650px;}

}

.split-sect > .i > .layout-cell {padding:50px;}
.split-sect > .i > .layout-cell.left-cell > .layout-component {margin-right:0px !important; margin-left:auto;}

.split-sect > .i > .layout-cell.fill-bg {
    background-image: url(/userfiles/images/embg.jpg);
    background-size: cover;
}

.split-sect > .i > .layout-cell.fill-bg-2 {
    background-image: url(/userfiles/images/trophies.jpg);
    background-size:cover;
}



/*********FOOTER********/

.footer {
}

.footer .mod_sub_layout > .contain {}

@media screen and (max-width : 1000px) {

.footer .contain .tab-col1 {border-bottom:4px solid #fff; padding-bottom:24px; margin-bottom:24px;}

}


.inline-contact {margin-bottom:12px;}

.inline-contact > label {
    display: inline-block;
}

.inline-contact > div {
    display: inline-block;
}


.footer .layout-cell > label {
    font-size: 2em;
    margin-bottom: 24px;
}

.footer li:hover a {
    text-decoration: underline;
}

.footer ul.menubar li a {
    padding: 2px 0px !important;
}

.footer li ul {display:none !important;}


.footer .social-block img {width:35px; margin-left:12px;}


.footer .slim-footer {
    font-size: 12px;
    padding-top: 24px;
    padding-bottom: 20px;
    background-color: rgba(0, 0, 0, 0.1);
}

.footer .slim-footer .menu li a {padding-left:8px !important; padding-right:8px !important;}
 /* Begin CSS Part: User Design */

 /* Begin CSS Part: Site Components */
/****CUSTOM SCROLLERS*****/

/***General****/

.beta-scroller-container > .slide-container {max-width:100% !important;}

.full-width.banner-image img {width:100%; max-width:100%;}

.slide {vertical-align:top; display:inline-block;}


/****MAIN BANNER***********/


.main-banner .banner-image .custom-slide:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.015);
    display: inline-block;
    z-index: 999999999;
    top: 0px;
    left: 0px;
}

.banner-image .slide-content {
    position: absolute;
    top: 35%;
    width: 100%;
    margin: auto;
    text-align: center;
    z-index: 100000000000;
}

.banner-image .slide-content h1 {
    font-size: 6em;
    line-height: 1.4em;
}

.banner-image .slide-content h3 {
    font-size: 2em;
    line-height: 1.4em;
}

.banner-image .slide-content p {
    margin: 12px 0px;
    font-size: 20px;
    line-height: 28px;
}


.banner-image .slide-content .button {
    margin-top: 24px;
    margin-left: 12px;
}

.banner-image .slide-content * {color:#fff !important;}


@media screen and (max-width:1675px) {

.banner-image .slide-content h1 {
    font-size: 4em;
    line-height: 1.4em;
}

}

@media screen and (max-width:1400px) {

.banner-image .slide-content h1 {
    font-size: 3em;
    line-height: 1.4em;
}

}


@media screen and (max-width:1200px) {

.banner-image .slide-content {
    top: 35%;
    }


.banner-image .slide-content h1 {
    font-size: 2em;
    line-height: 1.4em;
}

}

@media screen and (max-width:1000px) {

.banner-image .slide-content {
    top: 15%;
    }

}



@media screen and (max-width:760px) {

.banner-image .slide-content {
    top: 5%;
    }
    
}

  

/*******ARROWS*****/

.beta-scroller .scroll-prev, .beta-scroller .scroll-next {
    font-size: 0px;
    width: 40px;
    z-index: 10000000000000;
    position: absolute;
    height: 40px;
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0.2);
    background-size: 15px;
    background-position: center;
    top: 50%;
    border-radius: 6px;
    opacity: 0.5;
}

.beta-scroller .scroll-prev:hover, 
.beta-scroller .scroll-next:hover {
  background-color: rgba(0,0,0,0.3);
  opacity:1;
}

.beta-scroller .scroll-prev {background-image: url(/userfiles/images/left.png); left:10px;}
.beta-scroller .scroll-next {background-image: url(/userfiles/images/right.png); right:10px;}


/**********SCROLLER RESULTS***********/

.beta-scroller .slide > .mini {width:100% !important; margin-right:0px !important;}




/*******COMPANY INFO DEFAULTS********/

.company-info.inline > label, .company-info.inline > div {display:inline-block;}

.company-info.inline-address .company-info-part.address > div > div {
    display: inline-block;
    padding-right: 8px;
}

.company-info.inline-address .company-info-part.address > div > div:after {
    content: ",";
}

.company-info.inline-address .company-info-part.address > div > div:last-child:after {
content: "";

}

/********ITEM SCROLL**********/

.item-scroll .slide-group > .slide > div {width:100% !important;}

/*******LOGO SCROLL********/


.row-scroll .custom-slide > img {display:none !important;}

.row-scroll .slide-content img {
    width: 20%;
    margin: 1%;
}



.divide-block {
    display: block !important;
    height: 0px;
}






 /* Begin CSS Part: Results */

 /* Begin CSS Part: Pages */

 /** Begin CSS Section: modules */

 /* Begin CSS Part: 404 */

 /* Begin CSS Part: Admin */

 /* Begin CSS Part: Auto Pdf */

 /* Begin CSS Part: Basket */
.mini-basket .action-button .button {
    background-color: transparent;
    border: none !important;
    font-size: 0px;
    height: 40px;
    background-image: url(/userfiles/images/shoppingbasket.png);
    background-repeat: no-repeat;
    background-size: 40px;
    width: 40px;
    vertical-align: top;
    background-position: center;
}

.mini-basket .total span {
    line-height: 20px;
    font-size: 12px;
    margin-top: 4px;
    display: inline-block;
}




/*******CART STAGES***********/

.cartstages {padding-bottom:12px;}

.cartstages p {
    background: #eee;
    font-size: 18px;
    padding: 4px;
    margin: 4px;
    font-weight: bold;
    text-indent: 8px;
    opacity:0.5;
}

.cartstages p span.text {
    font-weight: normal;
    margin-left: 16px;
    line-height: 24px;
    font-size: 16px;
    vertical-align: top;
}

.cartstages p a {color:#333;}

.cartstages .active p {
    background-color: #0F85BC;
    color: #fff;
    opacity:1;
}

.cartstages .active p a {color:#fff !important;}

.cartstages .complete p {
    background-color: green;
    color: #fff;
    opacity: 0.75;
}

.cartstages .complete p a {color:#fff !important;}

.cartstages p span.number {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-block;
    background-color: #333;
    color: #fff;
    text-align: center !important;
    margin: 0px !important;
    text-indent: 0px;
    font-size: 14px;
    line-height: 24px;
    font-weight: bold !important;
        vertical-align: top;
}

.cartstages .active p span.number {    background-color: #fff; color:#0F85BC;}

.cartstages .complete p span.number {
    background-image: url(/userfiles/css/images/tick.png);
    font-size: 0px;
    background-color: transparent;
    background-position: center;
    background-size: 22px;
    background-repeat: no-repeat;
}

@media screen and (max-width : 1000px) {
.cartstages .col4 {width:49.5%}
}


@media screen and (max-width : 760px) {
.cartstages .col4 {
    width: 100%;
    margin: 0px !important;
    text-align: left !important;
}

.cartstages .col4 p {
    text-align: left !important;
}

}



/*********BASKET CONTROLS**************/


.basket-controls .button {
    font-size: 12px;
    padding: 10px 12px 10px 38px;
    background-image: url(/userfiles/images/rightarrow.png);
    background-size: 20px;
    background-position: 10px center;
}

 /* Begin CSS Part: Calendar */

 /* Begin CSS Part: Categories */
.border-bottom-cell, .border-bottom > .layout-cell {
    border-bottom: 8px solid #ccc;
    padding-bottom: 24px;
}

/*****PRODUCTS AND CATEGORIES*****/

.mini {
    border-radius: 6px;
    overflow: hidden;
}


.mini.products {
    border: 1px solid #ccc;
    margin-bottom: 12px;
}

.mini.category {
    border: 1px solid #ccc;
    margin-bottom: 12px;
}

.mini .title h4 {
    background-color: #424242;
    color: #ffffff;
    line-height: 1.4em;
    padding: 14px 2px;
    font-size: 14px;
}


.mini:hover .title h4 {
    background-color: #0F85BC;
    color: #fff;
}


.mini.products .price {
    position: absolute;
    top: 0px;
    right: 0px;
    width: auto;
    padding: 6px 12px;
     background-color: rgba(0, 0, 0, 0.75);
border-radius: 0px 0px 0px 4px;
color: #fff;
    font-size: 14px;
    font-weight: bold;
}




/*********NEWS***********/

.news.mini {
padding:24px 0px;
}
.news.mini + .news.mini + .news.mini {border-top:1px solid #ccc;}

.news.mini .display label {
    font-size: 12px;
    font-style: italic;
    padding-top:12px;
}
.news.mini:hover .display label {text-decoration:underline; color:#333;}

@media screen and (min-width:1000px) {
.linked-items .news.mini + .news.mini {
    border-top: 1px solid #ccc;
}
}

/*******BLOG*******/


.side-bar h4 {
    margin-bottom: 12px;
}

.link-cats .iteration {margin-bottom:8px;}

.link-cats .iteration .title h4 {
    display: inline-block;
    padding: 12px;
    background-color: #424242;
    color: #ffffff;
    width:100%;
}

.link-cats .iteration:hover .title h4 {
    background-color: #201f1f;
    color:#fff;
}

.link-cats .iteration .active .iteration {
    background-color: #201f1f;
    color:#fff;
}


.blog.mini {
    padding: 12px 0px;
}

.blog.mini + .blog.mini {
    border-top: 1px solid #ccc;
}

.blog.mini h3 {
    font-size: 1.5em;
}

 /* Begin CSS Part: Checkout */
.headed-section select, 
.headed-section input[type="text"],
.headed-section textarea {
    width: 96%;
}

.headed-section.discount-code .apply-code, .headed-section.discount-code .remove-code, 
.headed-section.delivery-address .button, .headed-section.billing-address .button {
    border-radius: 0px;
    height: 27px;
    line-height: 26px;
    padding: 0px 12px;
}


.headed-section.discount-code .apply-code {
    width: 70px;
    position: absolute;
    top: 0px;
    right: 70px;
    border: 0px;
    background-color: green;
    border-right: 2px solid #fff;
    border-left: 2px solid #fff;
}

.headed-section.discount-code .remove-code {
    width: 70px;
    position: absolute;
    top: 0px;
    right: 0px;
    border: 0px;
    background-color: darkred;
}


.headed-section.delivery-address .button, .headed-section.billing-address .button {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #61859b;
    border-left: 1px solid #fff;
    border-top: none;
    border-bottom: none;
    border-right: none;
}


.termsConditions {
    padding: 12px;
    max-height: 164px;
    overflow: auto;
    border: 1px solid #ccc;
    width: 96%;
    margin: auto;
    min-height: 164px;
}

.termsConditions .layout-cell {padding:0px !important;}
.termsConditions .layout-cell h1, .termsConditions .layout-cell h2 {font-size:18px !important;}

.terms-accept {
    text-align: center !important;
    padding: 12px;
}
.terms-accept > * {display:inline-block;}

.terms-conditions .error .message {
    text-align: center;
    padding: 12px;
    border: 1px solid #ccc;
width: 96%;
margin: 12px auto;
background-color: darkred;
color:    #fff;
}



/**********CHANGE DELIVERY***********/

.address-form.new-address {text-align:left;}

.address-form.new-address > div {
    width: 49% !important;
    text-align: left;
    display: inline-block;
    margin-right: 1%;
}

.address-form.new-address > div:nth-child(even) {
    margin-right: 0%;
}

.create-address .footer-controls {border-top:1px solid #ccc; padding-top:12px; margin-top:12px;}


@media screen and (max-width:520px) {
.address-form.new-address > div {width:100% !important; margin-right:0px !important;}
}

 /* Begin CSS Part: Collation */
/**********PRODUCT PAGE*******/

.product-purchase-sect {
    z-index: 10;
}

/*********IMAGES************/

.collation-item-thumbs {padding:12px 0px;}
.collation-item-thumbs .image-thumb {padding:0px 8px; cursor:pointer;}


.collation-gallery-image-container .gallery-image {padding:0px !important;}

/*****PRICE****/

.mod_collation_component_collation_item.product-main .purchase-sect .price {
    background-color: #4c4c4c;
    box-shadow: 0 10px 10px -10px #000;
    color: #fff;
    padding: 8px 24px;
    font-size: 28px;
    line-height: 24px;
}

.mod_collation_component_collation_item.product-main .purchase-sect .price label {
    color: #fff;
    font-size: 10px;
    line-height: 14px;
}

.mod_collation_component_collation_item.product-main .purchase-sect .price .vat-display {
    display: block;
    font-size: 10px !important;
    line-height: 14px;
}


/****QUANTITY*******/


.mod_collation_component_collation_item .quantity label {
    position: absolute;
    height: 68px;
    line-height: 68px;
    font-size: 10px;
    padding: 0px 10px;
}

.mod_collation_component_collation_item .quantity input {
    text-align: right !important;
    height: 68px;
    font-size: 20px;
    line-height: 68px;
    max-width: 110px;
}


.mod_collation_component_collation_item.product-main .purchase-sect .add-to-basket .button {
    border-radius: 0px 6px 6px 0px;
    border-left: 0px;
    border: none;
    padding: 10px 26px 10px 26px;
    line-height: 48px;
    height: 68px;
    font-size: 20px;
}


/******TOTAL PRICE*******/

.inline-label > div {display:inline-block;}

.from-price > div, .to-price > div {
    font-weight: bold;
    color: #0f85bc;
    margin-right: 12px;
    font-size: 18px;
}

.from-price, .to-price {
    margin-left: 12px;
    margin-top: 12px;
}

/*****CODE******/

.mod_collation_component_collation_item.product-main .code {font-weight:bold;     font-size: 14px;}
.mod_collation_component_collation_item.product-main .code label {display:inline-block; font-size:12px;}

/******WAS PRICE*******/

.mod_collation_component_collation_item.product-main .was-price .price-display,
.mod_collation_component_collation_item.product-main .was-price label {
    color: red;
    display: inline-block;
    text-decoration: line-through;
}

.mod_collation_component_collation_item.product-main .was-price .price-display {
	font-weight:bold;
}

.mod_collation_component_collation_item.product-main .was-price label {
    font-size: 12px;
}



/*******RRP***********/






.product-purchase-sect {}


/*******ATTRIBUTES*********/

/*****TEXT ATTRIBUTES*******/

.text-attributes .collation-attribute {
    width: 100%;
    display: inline-block;
    border-bottom: 1px dotted #555;
    padding: 4px 0px;
}

.text-attributes .collation-attribute:nth-child(4n+4) {margin-right:0px !important;} 

.text-attributes .collation-attribute .attribute-name {
    display: inline-block;
    font-size: 12px;
}
.text-attributes .collation-attribute .attribute-value {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
}

.text-attributes .attribute-image {display:none;}
    
    
/********COLOUR ATTRIBUTES******/


.image-attributes {
    margin-top: 8px;
} 
    
.image-attributes .collation-attribute {
    width: auto;
    display: inline-block;
    margin-right: 24px;
    margin-bottom: 12px;
}

.image-attributes .collation-attribute-group .attribute-name, 
.image-attributes .collation-attribute-group .attribute-main-image {
    display: none;
}
.image-attributes .collation-attribute .attribute-value {
    display: none;
    font-size: 14px;
    font-weight: bold;
}


.image-attributes .collation-attribute .attribute-image {
    max-width: 180px;
    display: inline-block;
}
  
.image-attributes .collation-attribute .attribute-image img {
    max-height: 55px;
}



/**********BULK BUY*********/

.bulk-buy {
    display: table !important;
    margin: 12px 0px;
    border-collapse: collapse;
}

.bulk-buy > label {
    width: 100%;
    font-size: 12px;
    background-color: #062f4f;
    display: table-caption;
    color: #fff;
    padding: 8px;
    text-align: center;
}

.bulk-buy > .bb-band.headings {
    display: table-row;
    background-color: #505050;
    color: #fff;
    font-size: 12px;
}

.bulk-buy > .bb-bands {display:table-row-group;}
.bulk-buy > .bb-bands > .bb-band {display:table-row;}
.bulk-buy > .bb-band.headings > div,
.bulk-buy > .bb-band.headings > div, .bulk-buy > .bb-bands > .bb-band > div {
    display: table-cell;
    border: 1px solid #ccc;
    border-collapse: collapse;
    padding: 2px;
    text-align: center;
}

.bulk-buy > .bb-bands > .bb-band > div {
    font-size: 14px;
}


/****STOCK****/

.stock {
    font-size: 14px;
    font-weight: bold;
    color: green;
}

.stock label {    
	display: inline-block;
	font-size:12px;
	font-weight:normal;
}

.stock:after {
    content: "in Stock";
    font-size: 12px;
    color:#1f1f1f;
    	font-weight:normal;
}


/*******NOTES*********/

.notes {
    padding: 24px;
    margin: 12px 0px;
    background-color: #efefef;
    border-radius: 8px;
}

.notes > label {font-weight:bold;}



/******RELATED - LINKED ITEMS*****/

.linked-items {
    border-top: 1px solid #ccc;
}

.linked-items > h4 {}



/**********OPTIONS*************/


.option_radio, .checkbox-options .checkbox {
    display: inline-block;
    margin-right:1%;
}
.option_radio input, .checkbox-options .checkbox input {display: inline-block;}
.option_radio label, .checkbox-options .checkbox label {display: inline-block;}



@media screen and (min-width : 1001px) {
.option_radio, .checkbox-options .checkbox {
    width:32.66%; 
}
.option_radio:nth-child(3n+3), .checkbox-options .checkbox:nth-child(3n+3) {
margin-right:0px !important;
}
}

@media screen and (min-width:761px) and (max-width:1000px) {
.option_radio, .checkbox-options .checkbox {
    width:49.5%; 
}
.option_radio:nth-child(2n+2), .checkbox-options .checkbox:nth-child(2n+2) {
margin-right:0px !important;
}
}

@media screen and (max-width:760px) {
.option_radio, .checkbox-options .checkbox {
    width:100%; 
    margin-right:0px !important;
}
}



.option-qty-grid-container, .product-option.option_colour {
    border: 1px solid #ccc;
    margin-bottom:12px;
}
.option-qty-grid-container > label, .product-option.option_colour > label {
    background-color: #505050;
color: #fff;
    font-size: 14px;
    padding: 2px 8px;
}
.option-qty-grid-container > .content, .product-option.option_colour > .content {
    padding: 12px;
    background-color: #fff;
}
.option-qty-grid-container > .content span.option-qty-grid {
    display: inline-block;
    width: 8.181%;
    margin-right: 1%;
    margin-bottom:12px;
}

.option-qty-grid-container > .content span.option-qty-grid:nth-child(11n+11) {margin-right:0px !important;}

.option-qty-grid-container img {display:none !important;}

.option-qty-grid label {
    text-align: center !important;
    font-size: 14px;
    line-height: 18px;
    background-color: #505050;
    color: #fff;
    padding: 4px;
}

.option-qty-grid input {margin-bottom:0px !important; text-align:center !important;}
.option-qty-grid-container .price-diff {
    display: inline-block;
    width: 100%;
    text-align: center !important;
    font-size: 14px;
    line-height: 20px;
    vertical-align: top;
    background-color: #0f85bc;
    color: #fff;
    padding: 4px;
}



/********COLOURS************/


.product-option.option_colour > .content .colour-element {
    display: inline-block;
    width: 11.62%;
    margin-right: 1%;
    cursor: pointer;
    border: 1px solid #ccc;
    vertical-align: top;
    text-align: center;
    position:relative;
    background-color: transparent !important;
    line-height:0;
}

.product-option.option_colour > .content .colour-element:nth-child(8n+8) {margin-right:0px !important;}

.product-option.option_colour > .content .colour-element img {width:100%;}

.product-option.option_colour > .content .colour-element span {
    font-size: 12px;
    line-height: 16px;
    display: inline-block;
    width: 100%;
    background-color: rgba(255, 255, 255,0.5);
    z-index: 10;
    text-align:center !important;
    position:relative;
    padding:4px 0px;
}

.product-option.option_colour > .content .colour-element.active span {
    background-color: #333;
    color:#fff;
}

/*********NEWS & BLOGS************/


.post-details {
    border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
    margin-bottom: 12px;
}

.inline-display > label {
    display: inline-block;
    font-size: 12px;
    color: #555;
}

.inline-display > .content {
    display: inline-block;
    font-size: 12px;
    color: #555;
}

.right-column {
    background-color: #efefef;
    padding: 24px;
}

.side-column .linked-items {border:none !important;}


@media screen and (min-width:521px) and (max-width:1000px) {

.side-column .linked-items .iteration {
   width:49.5% !important; margin-right:1% !important; display:inline-block;
}

.side-column .linked-items .iteration:nth-child(2n+2) {
margin-right:0px !important;
}

}

@media screen and (max-width:520px) {
.linked-items .news.mini + .news.mini {
    border-top: 1px solid #ccc;
}
}
 /* Begin CSS Part: Collation Admin */

 /* Begin CSS Part: Cookies */

 /* Begin CSS Part: Crm */

 /* Begin CSS Part: Currency Converter */

 /* Begin CSS Part: Discount */

 /* Begin CSS Part: Email Template */

 /* Begin CSS Part: Form */
/****INPUTS****/

input, select, textarea {
      display: inline-block;
}

input[type="text"], input[type="email"], input[type="number"], select, textarea, input[type="password"], input[type="file"] {
  cursor: text;
  width: 100%;
  padding: 4px 12px;
  font-size: 12px;
  height: 40px;
  line-height: 40px;
  margin-bottom:12px;
}


.ajax-image-upload {
  cursor: pointer !important;
  height: 40px !important;
  line-height: 20px !important;
  margin-top: 4px;
  padding: 10px !important;
  vertical-align: middle;
}


input[type="number"] {
    -moz-appearance: textfield;
}

select {cursor:pointer;}


textarea {
    min-height: 200px;
    line-height: 20px;
}

input[type="checkbox"], input[type="radio"] {}



.missing, .missing:hover {
  border-color: rgb(255, 0, 0) !important;
  box-shadow: 0 0 2px 2px rgb(255, 0, 0) !important;
}


.rt-label {display:inline-block;}

/*****FILE UPLOAD*******/

.file input{
    opacity: 0;
    width: 100%;
    position: absolute;
    left: 0px;
    cursor: pointer;
    z-index: 10000;
}

.file .button {
    font-size: 16px;
    padding-left: 38px;
    line-height: 24px;
    background-image: url(/userfiles/images/upload.png);
    background-position: 10px center;
    background-size: 20px;
}


/****CHECKBOXES****/

.multi-select-container {
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

.checkbox-options span.checkbox {
    clear: both;
    display: inline-block;
}

.multi-select-container input, .checkbox-value input, span.checkbox input {
    margin-top: 4px;
    margin-right: 6px;
    vertical-align: top;
}

.multi-select-container.checkbox-value label, span.checkbox label {
    display: inline-block;
    width: auto;
    max-width: 90%;
    font-size: 13px;
}

.checkbox-value label {display: inline-block;}


/*****SECURITY CODE*****/

.captcha-code, .security-code {
  margin: 10px 0 !important;
  padding: 8px 0;
  text-align: center !important;
  width: 100% !important;
}
.captcha-code label, .security-code label {
  text-align: center !important;
  font-size: 12px;
}
.captcha-code img, .security-code img {
  display: inline-block;
  height: 42px;
  width: auto !important;
}
.captcha-code input, .security-code input {
  display: inline-block;
  font-size: 20px;
  height: 42px !important;
  vertical-align: top;
  width: 122px !important;
  margin-bottom: 0px;
}


.g-recaptcha > div {
    margin: auto !important;
}

/****END SECURITY CODE*****/

 /* Begin CSS Part: Home */

 /* Begin CSS Part: Kit Designer */
/***************TABS*************************************************************************************/


.option-config > .tab-container {
    text-align: center;
    padding: 12px 0px;
}

.option-config > .tab-container .lm-tab {
    width: 49.5%;
    display: inline-block;
    background-color: #505050;
    color: #fff;
    padding: 12px;
    margin-right: 1%;
    background-image: url(/userfiles/css/images/tick.png);
    background-repeat: no-repeat;
    background-position: 12px center;
}


.option-config > .tab-container .lm-tab:first-child {
background-image: url(/userfiles/css/images/left-chevron.png);
}

.option-config > .tab-container .lm-tab.active:first-child {
background-image: url(/userfiles/css/images/tick.png);
}

.option-config > .tab-container .lm-tab:last-child {
	margin-right:0px !important;
background-image: url(/userfiles/css/images/plus.png);
}

.option-config > .tab-container .lm-tab.active {
    background-color: #0f85bc;
    background-image: url(/userfiles/css/images/tick.png);
}

.option-config > .tab-container .lm-tab.active:last-child {
background-image: url(/userfiles/css/images/tick.png);
}


.selection-area .lm-tab {
    width: 32.66%;
    display: inline-block;
    background-color: #505050;
    color: #fff;
    padding: 6px 12px;
    text-align: center;
    margin-right: 1%;
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 6px center;
    opacity: 0.5;
}

.selection-area .lm-tab:last-child {
    margin-right: 0% !important;
    width: 32.67%;
}

.selection-area .lm-tab.active {background-color:#0f85bc; background-image: url(/userfiles/css/images/tick.png); opacity:1;}


.selection-area .lm-tab-wrapped {
    border: 1px solid #ccc;
    padding: 12px;
}


.section-tabs .section-tab {
    background-color: #505050;
    color: #fff;
    padding: 12px 12px 12px 12px;
    margin-right: 1%;
    border-radius: 4px;
    cursor:pointer;
}

.section-tabs .section-tab.active {
    background-color: #0f85bc;
    color: #fff;
    padding: 12px 12px 12px 34px;
    margin-right: 1%;
    border-radius: 4px;
    background-image: url(/userfiles/css/images/tick.png);
    background-repeat: no-repeat;
    background-position: 6px center;
    background-size: 20px;
}

/*********END TABS**************************************************************************************/

/********STEPS************************************************/

.selection-area .step-ctrls {
    text-align: center;
    padding: 12px;
    border-top: 1px solid #ccc;
    margin-top: 12px;
}

.selection-area .step-ctrls .button {
    font-size: 20px;
    padding: 12px 24px;
}

.selection-area .step-ctrls .disabled {
opacity:0.1;
}

.selection-area .section .text-component-select, 
.selection-area .section .image-component-select  {
    display: inline-block;
    width: 19.2%;
    margin-right: 1%;
    vertical-align: top;
    text-align: center;
    border: 1px solid #ccc;
    margin-bottom: 12px;
}


.selection-area .section .selected {
    opacity: 0.5;
    box-shadow: 0px 0px 20px -10px #000;
}


.selection-area .section .text-component-select img, 
.selection-area .section .image-component-select img {
    width: 50%;
    display: block;
    margin: 8px auto;
}

.button.select, .button.select-position, .button.select-font {
    margin-bottom: 12px;
    border-radius: 0px;
    width: 80%;
    margin-top: 12px;
    line-height: 20px;
}

.selected .button {
    background-image: url(/userfiles/css/images/tick.png);
    background-size: 16px;
    background-position: 6px center;
    background-color:#000;
}


.font-colour .selected label {
    background-image: url(/userfiles/css/images/tick.png);
    background-size: 16px;
    background-position: 6px center;
    background-repeat: no-repeat;
    padding-left: 10px;
}

.selection-area .section .text-component-select:nth-child(5n+5),
.selection-area .section .image-component-select:nth-child(5n+5) {margin-right:0px !important;} 

.text-component-select .text-one,
.image-component-select .text-one {
    display: block;
    color: #0f85bc;
    text-transform: uppercase;
        font-weight: bold;
}
.text-component-select .text-two,
.image-component-select .text-two {
    display: block;
    text-transform: uppercase;
    font-size: 14px;
    color: #000;
    font-weight: bold;
}




.selection-area .section h2 {
    font-size: 1.25em;
    line-height: 1.2em;
    margin-bottom: 8px;
    color: #212121 !important;
}


.selection-area .section .section-stage {}

.selection-area .section .section-stage + .section-stage {
    padding-top: 18px;
    border-top: 2px solid #ccc;
    margin-top: 12px;
}


/****POSITION********/

.selection-area .section .section-stage > div > div {
    width: 19.2%;
    margin-right: 1%;
    border: 1px solid #ccc;
    padding: 0px;
    text-align: center;
    margin-bottom:12px;
    vertical-align:top;
}

.selection-area .section .section-stage > div > div:nth-child(5n+5) {margin-right:0px !important;} 




/********FONT************/

.selection-area .section .fonts .text-font img {width:90%; display:inline-block;}

/*******FONT COLOUR*********/

.selection-area .section .font-colour .text-colour {
   width: 9.1%;
    margin-right: 1%;
    border: 1px solid #ccc;
    padding: 0px;
    text-align: center;
    margin-bottom:12px;
    position:relative;
}

.selection-area .section .font-colour .text-colour .button {
    position: absolute;
    top: 0px;
    width: 100%;
    left: 0px;
    height: 100%;
    opacity: 0;
}

.selection-area .section .font-colour .text-colour .colour-block {
    min-height: 40px;
}

.selection-area .section .font-colour .text-colour label {
    position: absolute;
    top: 0px;
    width: 100%;
    color: #fff;
    height: 40px;
    line-height: 38px;
}

.selection-area .section .font-colour .text-colour:nth-child(10n+10) {margin-right:0px !important;} 



.design-summary {
    padding: 12px 0px 12px;
    margin: 12px 4px 24px;
    border-bottom: 2px solid #ccc;
    border-top: 2px solid #ccc;
    background-color: #f7f7f7;
}

.design-summary img {
    width: 40px;
    vertical-align: top;
    margin-right: 12px;
    margin-left: 12px;
}

.design-summary .text-one, .design-summary .text-two {display:none;}

.design-summary .price {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    vertical-align: top;
    font-weight: bold;
}

.design-summary input[type="text"], .design-summary input[type="file"] {
    width: 50%;
    float: right;
    margin-bottom: 0px !important;
}

.design-summary input[type="file"] {
    line-height: 30px;
}







.preview {text-align:center;}

.preview .swap-image {
    font-size: 16px;
    line-height: 30px;
    padding-left: 40px;
    background-image: url(/userfiles/css/images/swap.png);
    background-position: 8px center;
    background-size: 26px;
}

.preview .component-previews {
    margin-top: 12px;
}

.preview .component-previews > .preview-block {
border:1px solid #ccc; margin-bottom:12px;
    background-color: #333;
    }

.preview .component-previews > .preview-block .preview-content {padding:12px;}

.preview .component-previews div span {
    display: block;
    color: #fff !important;
    font-size: 14px;
}

.preview .component-previews div .name {
    background-color: #0f85bc;
    padding: 6px;
    font-weight: bold;
}
  
.preview .component-previews div .selected {}

.preview .component-previews div .value {
    font-style: italic;
    padding: 12px;
}

.preview .component-previews div .price {
    font-size: 20px;
}
.preview .component-previews div .font span {display:inline-block;}
.preview .component-previews div .font label {color:#fff !important;display:inline-block; font-size: 14px;}

.preview .component-previews div .font img {
    display:none !important;
}


 /* Begin CSS Part: Multi User */

 /* Begin CSS Part: News Letter */

 /* Begin CSS Part: Order Manager */
.mod_orders_component_invoice {}
.summary-section {border:1px solid #ccc;}
 /* Begin CSS Part: Orders */
.product-table-display .heading-row, 
.headed-section > label, 
.summary-section > label, 
.summary-section .layout-component > label { background-color: #444;}

.padding-top-large  {padding-top:24px;}
.padding-right-large  {padding-right:24px;}
.padding-bottom-large  {padding-bottom:24px;}
.padding-left-large  {padding-left:24px;}


.invoice-layout {padding:12px;}

.invoice-logo {padding-bottom:24px;}

.headed-section {
    margin-bottom: 12px;
    border: 1px solid #ccc;
    text-align:center;
}

.headed-section > label {
    color: #fff;
    padding: 4px 8px;
    margin-bottom: 8px;
    text-align:left !important;
    display:block;
}


.delivery-address > div, .billing-address > div {
    padding: 0px 12px 12px;
    text-align: left;
}






/****Products*****/

.product-table-display > .layout > .layout-cell {
    padding: 4px 12px;
}


.product-table-display .heading-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  font-weight: normal;
}

.product-table-display .heading-row .layout-component {line-height:24px; color:#fff; font-size:12px;}

.product-table-display .result-row .layout-cell {border: 1px solid rgb(204, 204, 204);}

.product-table-display .result-row .title {font-weight:bold;}


.product-table-display .options .option-field {
    border-top: 1px solid #ccc;
    padding: 2px;
}
.product-table-display .options .option-field label {}
.product-table-display .options .option-field span {}

.product-table-display .options .option-field label, .product-table-display .options .option-field span {
    display: inline-block;
    font-size: 12px;
}

.product-table-display .result-row .quantity input {margin-bottom:0px !important;}


.product-table-display .result-row .quantity .qty.increase, .product-table-display .result-row .quantity .qty.decrease {
    position: absolute;
    top: 0px;
    width: 14px;
    padding: 0px;
    height: 40px;
    line-height: 40px !important;
    text-align: center !important;
    border-radius: 0px;
    border: none !important;
    font-size: 14px;
}

.product-table-display .result-row .quantity .qty.increase {
    right: 0px;
}


.product-table-display .result-row .quantity .qty.decrease {
    left: 0px;
}


.product-table-display .heading-row .title-hide {display:none !important;}


.product-table-display .preview-block {
padding:4px 0px;
}

.product-table-display .preview-block + .preview-block {border-top:1px solid #ccc;}

.product-table-display .preview-block div span {
    display: block;
    font-size: 14px;
}

.product-table-display .preview-block .name {
    font-weight: bold;
}
  
.preview .component-previews div .selected {}

.product-table-display .preview-block .value {
    font-style: italic;
    padding: 0px;
    font-weight: bold;
}

.product-table-display .preview-block .price {
}
.product-table-display .preview-block .font span {display:inline-block;}
.product-table-display .preview-block .font label {display:inline-block; font-size: 14px;}

.product-table-display .preview-block .font img {
    display:none !important;
}









@media screen and (min-width:761px) {


.product-table-display {
    display: table !important;
    border-collapse: collapse;
}
.product-table-display > .layout {display:table-row;}

.product-table-display > .layout > .layout-cell {
    display: table-cell;
    vertical-align: middle;
}


.product-table-display > .layout > .layout-cell > label {display:none !important;}

.product-table-display > .layout > .layout-cell > .layout-component > label {display:none !important;}

.product-table-display .result-row .quantity .qty.increase, .product-table-display .result-row .quantity .qty.decrease {width:20px !important;}

}



@media screen and (max-width:760px) {

.product-table-display .heading-row {display:none !important;}
.product-table-display > .layout > .layout-cell {width:100% !important; margin:0px !important;}
.product-table-display > .layout > .layout-cell * {text-align:center !important;}

.summary-section {width:100% !important; margin:right:0px !important;}

.product-table-display > .layout > .layout-cell > label {
    background-color: #555;
	color:#fff;
    font-size: 12px;
    padding: 4px;
}

.product-table-display > .layout > .layout-cell {padding:0px; border:none !important;}
.product-table-display > .layout > .layout-cell .layout-component {padding:6px;}

.product-table-display > .layout > .layout-cell .layout-component.price {
    font-size: 18px;
    font-weight: bold;
}


.product-table-display .result-row {
    border: 2px solid #555;
    margin-bottom: 24px;
}


.product-table-display .result-row .quantity .qty.increase, .product-table-display .result-row .quantity .qty.decrease {
    top: 6px;
}

.product-table-display .result-row .quantity .qty.increase {
    right: 6px;
}


.product-table-display .result-row .quantity .qty.decrease {
    left: 6px;
}



}



/********Summary Section**********/

.summary-section {
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

.summary-section > label {
    color: #fff;
    border-bottom: 1px solid #ccc;
	padding: 8px;
    font-size: 14px;
    text-align: center;
    display:block;
}


.summary-section .layout-component {
	border-bottom:1px solid #ccc;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    clear: both;
}

.summary-section .layout-component > label {
    width: 50%;
    display: inline-block;
    color: #fff;
    float:left;

}

/******INVOICE DISPLAY********/

.layout-component.invoice > .mod_orders_component_invoice.invoice-layout {
    padding: 24px;
    border: 1px solid #ccc;
}

.invoice-footer {
    padding: 12px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.invoice-footer > .layout-cell > label {font-weight:bold;}

.invoice-footer .company-info {
    margin: 6px auto;
        margin-right: auto;
    font-size: 14px;
    color:  #333;
}

.invoice-footer .company-info label {    color:  #333;     font-size: 14px;}

.company-info.inline > label, .company-info.inline > div {
    display: inline-block;
}

.company-info.inline-address .company-info-part.address > div > div {
    display: inline-block;
    padding-right: 8px;
}


.summary-section {border:1px solid #ccc;}


/***********PERSONALISATION BASKET*************/

.preview-image, .preview-info {
    display: inline-block;
    width: 50%;
    vertical-align: top;
    padding: 8px;
}

.preview-info label {display:inline-block;}

.preview-info div {
    font-size: 12px;
    line-height: 18px;
}



@media screen and (max-width:760px) {

.preview-image, .preview-info {
    width: 100%;
}

}



 /* Begin CSS Part: Payment Gateway */
.payment-gateway-content {
    padding: 150px 12px 12px 12px;
    max-width: 1224px;
    margin: auto !important;
}

.mod_payment_gateway_component_gateway {border:1px solid #ccc; margin-bottom:12px;}

.mod_payment_gateway_component_gateway img {
}

.mod_payment_gateway_component_gateway .link a {
	padding:12px;
    background-color: #555;
	color: #fff !important;
    display: inline-block;
    width: 100%;
}

.mod_payment_gateway_component_gateway .link a:hover {background-color:#333;}



.mod_payment_gateway .headed-section.delivery-address .button, 
.mod_payment_gateway .headed-section.billing-address .button {display:none !important;}


 /* Begin CSS Part: Qanda */
/*******QA CONTROL*******/

.qanda-ctrl.disabled {display:none !important;}

.qanda-ctrl .slave-toggle label {
    background-color: green;
    color: #fff;
    padding: 12px 24px;
    width: 100%;
    display: inline-block;
    cursor: pointer !important;
    font-weight: bold;
    border-radius: 4px;
}

.qanda-ctrl .slaved {
    display: none;
    padding: 24px;
    border-bottom: 1px solid #ccc;
    background-color: #efefef;
}

.qanda-ctrl .slaved.open {
    display: inline-block;
}

/******QA LIST********/

.mod_qanda_component_list {
    margin: auto;
}

.mod_qanda_component_list .iteration.headings {display:none !important;}

.mod_qanda_component_list .iteration {
    padding: 24px;
    background-color: rgba(232, 232, 232, 0.4);
    margin-bottom: 12px;
    border-radius: 8px;
}

.mod_qanda_component_list .iteration .name {
    font-weight: bold;
    font-size: 18px;
    line-height: 20px;
}

.mod_qanda_component_list .iteration .comment {}

.question-cell {
    border-bottom: 2px solid #ccc;
    padding-left: 70px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    background-image: url(/userfiles/images/question.png);
    background-size: 60px;
    background-repeat: no-repeat;
    min-height: 75px;
}

.question-cell .question label {
    font-size: 14px;
    color: #005fa8;
    font-weight: bold;
}



.answer-cell {
    padding-left: 70px;
    background-image: url(/userfiles/images/answer.png);
    background-size: 60px;
    background-repeat: no-repeat;
    min-height: 75px;
}

.answer-cell .answer label {
    font-size: 14px;
    color: #db7e04;
    font-weight: bold;
}


 /* Begin CSS Part: Redirect */

 /* Begin CSS Part: Review */
/*****MINI REVIEW STARS******/

.mini-review {vertical-align:bottom;}
.mini-review .star-rating-star {
    width: 30px;
    height: 30px;
}

.layout .average label, .layout .average .average-stars {    display: inline-block;}

.layout .average .based-on {
    display: inline-block;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    vertical-align: top;
}




/******ADD REVIEW********/

.review-ctrl.disabled {display:none !important;}

body .layout .toggle-section {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    display: inline-block !important;
    padding: 12px;
}

.layout .toggle-section * {
    vertical-align: middle;
}

.review-ctrl .slave-toggle label {
    background-color: green;
    color: #fff;
    padding: 12px 24px;
    width: 100%;
    display: inline-block;
    cursor: pointer !important;
    font-weight: bold;
    border-radius: 4px;
}


.review-ctrl .slaved {
    display: none;
    padding: 24px;
    margin: 0px !important;
    border-bottom: 1px solid #ccc;
    background-color: #efefef;
}

.review-ctrl .slaved.open {
    display: inline-block;
}

.review-ctrl .star-rating-star {
    width: 40px;
    height: 40px;
}


/*******REVIEWS LIST******/


.mod_review_component_list {
    margin: 12px auto;
}

.mod_review_component_list hr {
    opacity: 0;
    margin: 0px;
}

.mod_review_component_list .iteration.headings {display:none !important;}

.mod_review_component_list .iteration {
    padding: 24px;
    background-color: rgba(232, 232, 232, 0.4);
    margin-bottom: 12px;
    border-radius: 8px;
}

.mod_review_component_list .iteration .name {
    font-weight: bold;
    font-size: 18px;
    line-height: 20px;
    vertical-align: bottom;
}

.mod_review_component_list .iteration .location {
    font-size: 12px;
    vertical-align: bottom;
    line-height: 20px;
    font-style: italic;
}

.mod_review_component_list .iteration .comment {
    background-image: url(/userfiles/images/leftquote.png), url(/userfiles/images/rightquote.png);
    background-repeat: no-repeat;
    background-position: top left, bottom right;
    padding-left: 50px;
    padding-right: 50px;
    background-size: 35px;
    min-height: 50px;
    padding-top: 8px;
}









 /* Begin CSS Part: Scroller */

 /* Begin CSS Part: Search */
.search .search-go {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #474747;
    min-width: 40px;
    height: 40px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 0px;
    background-image: url(/userfiles/images/search.png);
    background-size: 38px;
    background-repeat: no-repeat;
    background-position: center;
}

.search .collation-search-results {
    position: absolute;
    width: 100%;
    background-color: #000;
    padding: 12px;
    border: 2px solid #fff;
}

.search .collation-search-results * {
    color: #fff !important;
}

.total-result-count {
    text-align: right;
    font-size: 12px;
    border-bottom: 1px solid #fff;
    margin-bottom: 12px;
    padding-bottom: 8px;
}
.total-result-count span {}
.total-result-count span + span {}

.search .collation-search-results .section-results {}
.search .collation-search-results .section-results .item-result {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 4px;
    font-size: 14px;
}

.search .collation-search-results .section-results .item-result:hover {
    background-color: rgba(0, 0, 0, 0.3);
    font-weight:bold;
}

 /* Begin CSS Part: Search Results */

 /* Begin CSS Part: Seo */

 /* Begin CSS Part: Shipping */

 /* Begin CSS Part: Snippets */
/******PAGE GALLERY***********/

.gallery-preview .gallery-thumb {
    border: 1px solid #ccc;
    width:32.66%;
    margin-bottom: 12px;
    margin-right:1%;
    position:relative;
}
.gallery-preview .gallery-thumb:nth-child(3n+3) {margin-right:0px !important;} 

.gallery-preview .gallery-thumb img {padding:12px;}
.gallery-preview .gallery-thumb label {
    text-align: center;
    background-color: #505050;
    color: #fff !important;
    padding: 12px;
}



/********SLIDE*********/

.gallery-slide {padding:0px !important; border:1px solid #ccc;}

.gallery-slide label {
    display: inline-block;
    font-size: 16px;
    line-height: 20px;
    background-color: #333;
width: 100%;
color: #fff;
    padding: 8px;
}

.gallery-outer .thumb-container {
    text-align: center !important;
    border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
    margin-top: 12px;
}


.gallery-outer .thumb-container .gallery-thumbs {

}

.gallery-outer .thumb-container .gallery-thumbs .gallery-thumb {
    max-width: 100px !important;
    cursor: pointer;
    padding: 4px;
    border: 1px solid #ccc;
    margin: 10px 4px;
}

.gallery-outer .thumb-container .gallery-thumbs .gallery-thumb:hover,
.gallery-outer .thumb-container .gallery-thumbs .gallery-thumb.active {
    border: 2px solid #646464 !important;
    transform: scale(1.1, 1.1);
    -web-kit-transform: scale(1.1, 1.1);
	background-color: #fff;
    z-index: 1000;
}

.gallery-outer .thumb-container .gallery-thumbs .gallery-thumb {max-width:100px !important; cursor:pointer;}
.gallery-outer .thumb-container .gallery-thumb.active {}
.gallery-outer .thumb-container .gallery-thumb label {display:none !important;}


.gallery-arrow-left, .gallery-arrow-right {
    font-size: 0px;
    width: 40px;
    z-index: 10000000000000;
    position: absolute;
    height: 40px;
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0.2);
    background-size: 15px;
    background-position: center;
    top: 50%;
    border-radius: 6px;
    opacity: 0.5;
}

.gallery-arrow-left:hover, 
.gallery-arrow-right:hover {
  background-color: rgba(0,0,0,0.3);
  opacity:1;
}

.gallery-arrow-left {background-image: url(/userfiles/images/left.png); left:10px;}
.gallery-arrow-right {background-image: url(/userfiles/images/right.png); right:10px;}
 /* Begin CSS Part: Sub Layout */
/*********HOME SECTION GRID - SQUARE**********/

.section-grid .layout-component {
    display: inline-block !important;
    border-left: 4px solid #ffffff;
    border-right: 4px solid #ffffff;
    line-height: 0;
    margin-bottom: 12px !important;
}

.section-grid .layout-component:first-child {border-left:none !important;}
.section-grid .layout-component:last-child {border-right:none !important;}

.section-grid .layout-component h4 {
    background-color: #424242;
    color: #ffffff;
    padding: 12px;
}

.section-grid .layout-component label {
    line-height: 20px;
    background-color: #872a3f;
    color: #fff;
    font-size: 12px;
    padding: 6px;
}


/*********HOME SECTION GRID - CIRCLES**********/

.circle-grid .layout-component {
    padding:12px;
    margin-bottom:8px;
}

.circle-grid .layout-component img {
    border-radius: 50%;
    max-width: 120px;
    background-color: #0F85BC;
    padding: 20px !important;
}

.circle-grid .layout-component:hover img {
    background-color: #555555;
	padding:14px !important;
}

.circle-grid .layout-component h4 {
    padding: 12px 0px 4px;
}

.circle-grid .layout-component .content * {
    line-height: 16px !important;
    font-size: 12px;
    color: #555;
}
 /* Begin CSS Part: System Manager */

 /* Begin CSS Part: User */
/*******LOGIN REG***********/

.mod_user_component_login .login-tab > .collapsible-trigger {
    width: 100%;
    padding: 16px;
    font-size: 22px;
    background-color: #333333;
    color: #fff;
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: 98% center;
}

.mod_user_component_login .login-tab {margin-bottom:12px;}

.mod_user_component_login .login-tab > .i {
    border: 2px solid #ccc;
    border-top:none !important;
    padding: 12px;
}


.mod_user_component_login .login-tab.have-account > .collapsible-trigger {
    background-image: url(/userfiles/css/images/enter.png);
}

.mod_user_component_login .login-tab.new-customer > .collapsible-trigger {
    background-image: url(/userfiles/css/images/addcustomer.png);
}



.mod_user_component_login .submit-button input {
    width: 100%;
}

.forgot-password a {
    font-size: 12px;
    margin: 12px auto;
    display: inline-block;
    width: 100%;
    text-decoration: underline;
}


.fp-message {
    border: 1px solid #ccc;
    margin-bottom: 12px;
    background-color: #3f87bd;
    color: #fff;
}


.password-reset-sent .email-sent {
    font-size: 12px;
    margin: 12px auto;
    display: inline-block;
    width: auto;
    text-decoration: none;
    background-color: #005fa8;
    padding: 12px 24px 12px 40px;
    color: #fff;
    opacity: 0.75;
    background-image: url(/userfiles/css/images/tick.png);
    background-repeat: no-repeat;
    background-position: 8px center;
}


.password-reset-sent .email-sent + .fp-message {padding:12px;}


.button.plain-text-toggle {
    font-size: 12px;
    display: inline-block;
    text-decoration: underline;
    background-color: transparent !important;
    border: none !important;
    color: #000 !important;
    position: absolute;
    top: 4px;
    padding: 0px;
    right: 0px;
}

/***********DEFAULTS******/

.headed-cell {border:1px solid #ccc;}
.headed-cell > label {
    background-color: #555;
	color:#fff;
    padding: 8px 12px;
}
.headed-cell > .i {padding:12px;}


/*****ADDITIONAL*****/

@media screen and (min-width : 1001px) {

.account-sidebar {padding-right:24px;}

}

/***Account Sidebar*****/

.account-sidebar .layout-component {
    border: 1px solid #969696;
}
.account-sidebar .layout-component > label {
    background-color: #0F85BC;
    color: #FFFFFF;
    display: inline-block;
    padding: 6px 12px;
    width: 100%;
}




.account-sidebar .user-menu li + li {
    border-top: 1px solid #969696;
}

.account-sidebar .user-menu li a {
    font-size: 14px;
    border-left: 4px solid #969696;
    padding: 4px 8px;
}

.account-sidebar .user-menu li:hover {
    background-color: #EFEFEF;
}

.account-sidebar .user-menu li:hover a {
    border-left: 4px solid #0F85BC;
  	color:#4a4a4a ;
}


/******USER DETAILS*******/

.password {}

.inc-confirm .password-entry {width:49.5%; display:inline-block; margin-right:1%;}
.inc-confirm .password-entry + .password-entry {margin-right:0px !important;}

.password-entry label {display:block;}

@media screen and (max-width:520px) {
.password-entry {width:100% !important; margin:0px !important;}
}


.avatar input {
    width: auto;
}


.avatar img {
    max-width: 40px;
    max-height: 40px;
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: top;
}

/******END USER DETAILS*******/

@media screen and (min-width:1001px) {
.mobile-account {display:none !important;}
}
  
@media screen and (max-width:1000px) {

.account-sidebar {display:none !important;}

.account-mainbar {
    width: 100% !important;
    margin: 0px !important;
}
  
.mobile-account label {
    cursor: pointer;
    background-color:#0F85BC;
    color: #FFFFFF;
    padding: 8px;
    background-image: url(/userfiles/images/smoothmenuicon.png);
    background-position: 12px center;
    background-repeat: no-repeat;
    background-size: 30px;
    font-size: 18px;
    border-radius: 4px;
    z-index:10;
    position:relative;
}

.mobile-account.layout-component {margin-bottom:24px;}
  
.mobile-account .content {
    width: 100%;
    border: 1px solid #969696;
    margin-top: -4px;
	padding-top: 4px;
	z-index: 1;
    position:relative;
}
  
  .mobile-account li {
  border-bottom:1px solid #969696; 
  padding:4px 2px;
  }
  
  .mobile-account li a {color:#333; padding:6px;}
  
  .mobile-account li:hover {background-color:#0F85BC;}
  .mobile-account li:hover a {background-color:; color:#FFFFFF;}
  
  }
  
  /****END MOBILE MENU****/
  


/******PRIVACY**********/

.privacy-page > div {vertical-align:top;}

.checkbox.inline-entry > label {display:inline-block;}
.checkbox.inline-entry {padding:4px 0px;}



/*********ORDERS**********/

.eos-list-output {
    display: table !important;
    border-collapse: collapse;
    margin-top: 12px;
    width: 100%;
}
.eos-list-output .list-entries {display:table-row-group !important;}
.eos-list-output .list-headings, .eos-list-output .list-entry {display:table-row !important;}
.eos-list-output .list-column {
    display: table-cell !important;
    border: 1px solid #ccc;
    width:auto !important;
    font-size: 12px;
    padding: 4px;
}

.list-headings {
    background-color: #555;
    font-weight: bold;
    color: #fff;
    margin-top: 12px;
}

.order-history .filter .auto {
    margin-right: 2px;
    margin-bottom: 4px;
    border: 1px solid #ccc;
padding: 4px 6px;
min-width: 58px;
background-color:#efefef;
}
.order-history .filter .auto label {
    display: inline-block;
    font-size: 12px;
    vertical-align: top;
    line-height: 22px;
}
.order-history .filter .auto input {} 

.large-check label {display:inline-block;}
.large-check input {margin-right:4px;}

.time-restrict {text-align:center; border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding:8px;}


 /* Begin CSS Part: Warning */