/* 
 * Deprecated DNN CSS class names will remain available for some time
 * before being  permanently removed. Removal will occur according to
 * the  following process:
 *
 * 1. Removal will only occur with a major (x.y) release, never
 *    with a maintenance (x.y.z) release.
 * 2. Removal will not occur less than six months after the release
 *    when it was deprecated.
 * 3. Removal will not occur until after deprecation has been noted 
 *    in at least two major releases.
 *
 *                                              |        |Planned |
 *  Name                                        |Release |Removal |
 *---------------------------------------------- -------- -------- 
 * Mod{NAME}C                                     5.6.2    6.2
 *   {NAME} = sanitized version of the DesktopModule Name 
 *   Used on <div> tag surrounding Module Content, inside container
 *---------------------------------------------- -------- -------- 
 */  



/* PAGE BACKGROUND */
/* background color for the header at the top of the page  */
.HeadBg {
}

/* background color for the content part of the pages */
Body
{
}

.ControlPanel {
}

/* background/border colors for the selected tab */
.TabBg {
}

.LeftPane  { 
}

.ContentPane  { 
}

.RightPane  { 
}

/* text style for the selected tab */
.SelectedTab {
}

/* hyperlink style for the selected tab */
A.SelectedTab:link {
}

A.SelectedTab:visited  {
}

A.SelectedTab:hover    {
}

A.SelectedTab:active   {
}

/* text style for the unselected tabs */
.OtherTabs {
}
    
/* hyperlink style for the unselected tabs */
A.OtherTabs:link {
}

A.OtherTabs:visited  {
}

A.OtherTabs:hover    {
}

A.OtherTabs:active   {
}

/* GENERAL */
/* style for module titles */
.Head   {
}

/* style of item titles on edit and admin pages */
.SubHead    {
}

/* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.SubSubHead {
}

/* text style used for most text rendered by modules */
.Normal
{
}

/* text style used for textboxes in the admin and edit pages, for Nav compatibility */
.NormalTextBox
{
}

.NormalRed
{
}

.NormalBold
{
}

/* text style for buttons and link buttons used in the portal admin pages */
.CommandButton     {
}
    
/* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link {
}

A.CommandButton:visited  {
}

A.CommandButton:hover    {
}
    
A.CommandButton:active   {
}

/* button style for standard HTML buttons */
.StandardButton     {
}

/* GENERIC */
H1  {
}

H2  {
}

H3  {
}

H4  {
}

H5, DT  {
}

H6  {
}

TFOOT, THEAD    {
}

TH  {
}

A:link  {
}

A:visited   {
}

A:hover {
}

A:active    {
}

SMALL   {
}

BIG {
}

BLOCKQUOTE, PRE {
}


UL LI   {
}

UL LI LI    {
}

UL LI LI LI {
}

OL LI   {
}

OL OL LI    {
}

OL OL OL LI {
}
OL UL LI   {
}

HR {
}

/* MODULE-SPECIFIC */
/* text style for reading messages in Discussion */    
.Message    {
}   

/* style of item titles by Announcements and events */
.ItemTitle    {
}

/* Menu-Styles */
/* Module Title Menu */
.ModuleTitle_MenuContainer {
}

.ModuleTitle_MenuBar {
}

.ModuleTitle_MenuItem {
}

.ModuleTitle_MenuIcon {
}

.ModuleTitle_SubMenu {
}

.ModuleTitle_MenuBreak {
}

.ModuleTitle_MenuItemSel {
}

.ModuleTitle_MenuArrow {
}

.ModuleTitle_RootMenuArrow {
}

/* Main Menu */

.MainMenu_MenuContainer {
}

.MainMenu_MenuBar {
}

.MainMenu_MenuItem {
}

.MainMenu_MenuIcon {
}

.MainMenu_SubMenu {
}

.MainMenu_MenuBreak {
}

.MainMenu_MenuItemSel {
}

.MainMenu_MenuArrow {
}

.MainMenu_RootMenuArrow {
}

/* Login Styles */
.LoginPanel{
}

.LoginTabGroup{
}

.LoginTab {
}

.LoginTabSelected{
}

.LoginTabHover{
}

.LoginContainerGroup{
}

.LoginContainer{
}
/*Custom CSS*/
@media (max-width:480px){
  .hidden-on-mobile{
  	display:none;
	}
}
a.btn-outline-primary:visited,
a.color-orange, 
a.color-orange:visited{
    color: #fe6307;
}
a.btn-outline-primary:visited:hover,
a.btn-primary:visited{
	color:white;
}
btn-outline-primary

/*Showroom Locations*/
#showroom-locations .col-sm-8 section,
#showroom-locations .col-sm-8 .img-fluid{
  width:100%!important;
}
#showroom-locations .color-white{
	color:white;
}
@media (max-width:1366px){
  #showroom-locations .col-sm-8,
  #showroom-locations .col-sm-4
  {
    flex:100%;
    max-width:100%;
  }
  #showroom-locations .order-md-2{
    order:1;
  }
  #showroom-locations .order-md-1{
    order:2;
  }
}

/*Homepage - Banner*/
#dnn_ctr1517_ContentPane .btn-outline-dark-gray{
  text-transform:uppercase;
}
@media (min-width:992px){
  #dnn_ctr1517_ContentPane .justify-content-center{
    -webkit-box-pack: start;
    ms-flex-pack:start!important;
    justify-content:start!important;
    padding:2rem!important;
  }
}

/*Health & Safety*/
#health-and-safety .btn:visited,
#health-and-safety .btn:focus{
  color:white;
  -webkit-box-shadow: none);
  box-shadow: none;
}
#health-and-safety .btn-primary {
    color: #ffffff;
    background-color: #6f6f6f;
    border-color: #ffffff;
}
#health-and-safety .btn-primary:hover,
#health-and-safety .btn-primary[aria-expanded=true]{
  background-color:#fe6307;
}
#health-and-safety a:visited,
#health-and-safety a{
  color:#fe6307;
}

/*Blockquote*/
.blockquote p,
.blockquote footer{
  color:#777777;
}

/*The Design Series*/
form[action="/the-design-series-by-caesarstone"] .featured-sliders .btn-outline-primary{
  display:none;
}
#the-design-series .article-list-summary{
	font-size:14px;
}

/*Contact*/
form[action="/online-enquiries"] #requestSamples div.text-primary.mt-3.mt-sm-4{
	display:none;
}

/*New Homepage*/
#new-homepage .homepage-tile{
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow:hidden;
    position:relative;
    background-color:black;
    z-index:1;
}
#new-homepage .homepage-tile *{
    transition:all 0.3s;
    text-decoration:none;
}
#new-homepage .col-lg-4 .homepage-tile,
#new-homepage .col-lg-12 .homepage-tile{
    height: 450px;
}
#new-homepage .col-lg-4 .homepage-tile .tile-text,
#new-homepage .col-lg-12 .homepage-tile .tile-text{
    width:100%;
}
@media (min-width:981px){
    #new-homepage .col-lg-12 .homepage-tile{
        height: 450px;
    }
    #new-homepage .col-lg-12 .homepage-tile .tile-text{
        height:100%;
        display:flex;
        width: 32.33%;
    }
    #new-homepage .col-lg-12 .homepage-tile .tile-text>div{
        margin:auto 0;
    }
}
#new-homepage .homepage-tile .tile-background{
    position:absolute;
    width:100%;
    height:100%;
    background-size:cover;
    z-index:2;
}
#new-homepage .homepage-tile .tile-text{
    z-index:3;
    padding:2em;
    background-color:#ffffff80;
}
#new-homepage .homepage-tile h2{
    color:#212529;
    font-size:42px;
    font-family: "Publico Text Web Semibold";	
}
#new-homepage .homepage-tile h2:after {
    content: '';
    width: 2em;
    height: 5px;
    background-color: #fe6307;
    margin: 15px 0;
    display: block;
    transition:all 0.3s;
}
#new-homepage .homepage-tile:hover h2:after {
    width: 3em;
}
#new-homepage .homepage-tile p{
    color:#212529;
    font-size:18px;
}
#new-homepage p{
    color:#212529;
    font-size:18px;
  	line-height:1.3;
}
#new-homepage .homepage-tile .tile-button{
    display: inline-block;
    border: 1px solid #212529;
    font-size: 18px;
    padding: 0.5rem 0.75rem;
    color: #3d3c3c;
    margin-top: 1em;
}
#new-homepage .homepage-tile .tile-button:hover {
    border: 1px solid #212529;
    background-color: #212529;
    color: white;
}
@media (max-width:490px){
  #new-homepage .homepage-tile h2{
      font-size:28px;
  }
  #new-homepage #caesarstone-logo{
    width:80%;
  }
}

/*Showroom Pages*/
.showroom-page{
	padding-top:0.5em;
}
.showroom-page img{
  max-width:100%;
}
.showroom-page .row{
	padding:0.5em 0;
}
.showroom-page .col-lg-4{  
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: left;
}
.showroom-page h2{  
    font-family: "Publico Text Web Semibold";
    font-size: 36px;
  	width:100%;
}
.showroom-page p{  
    font-size:18px;
  	line-height:1.3;
}
.showroom-page .blockquote p{  
    font-size:24px;
}
.showroom-page p a{  
    color:#333;
}
.showroom-page .color-orange{
	color:#FF914D;
}
.showroom-page .color-white{
	color:#FFFFFF;
}

/*
.showroom-page p{  
    line-height: 2rem;
    font-size: 1.75rem;
}
*/
@media (min-width:981px){
  .showroom-page img{
    width: 100%;
    max-height: 500px;
    object-fit: cover;
  }
}
@media (min-width:981px) and (max-width:1666px){
  #showrooms.showroom-page img{
    height:100%;
    width: 100%;
    max-height: 100%;
    object-fit: cover;
  }
}

/*Colour Pages*/
.DnnModule-Onque_Colours .dnnFormWarning{
display:none;
}
.DnnModule-Onque_Colours .image-viewer{
overflow:hidden;
height:100%!important;
}

/*Laundry Rooms Page*/
#dnn_ctr2109_ModuleContent .col-sm-6{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#dnn_ctr2109_ModuleContent a, 
#dnn_ctr2109_ModuleContent a:visited{
    color: #fe6307;
}

#dnn_ctr2109_ModuleContent .btn-outline-primary:hover{
	color:white;
}

/*The Block 2019*/
#dnn_ctr2113_ContentPane .tile{
    position: relative;
    display: flex;
    align-items: start;
    overflow: hidden;
    z-index: 2;
}
#dnn_ctr2113_ContentPane .text{
    position: absolute;
    width: 100%;
    display: flex;
    padding: 1em;
    min-height: 125px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: #00000085;
    color: white;
    z-index: 2;
 	overflow:hidden;
}
#dnn_ctr2113_ContentPane h3,
#dnn_ctr2113_ContentPane h2{
	color:white;
}
#dnn_ctr2113_ContentPane .bg-image{
 	max-width: 100%;
}
/*
#dnn_ctr2113_ContentPane .bg-image{
 	max-width: 100%;
    filter: brightness(0.4) blur(3px);
    transform: scale(1.1);
    z-index: 1;
    transition: all 0.5s;
}
#dnn_ctr2113_ContentPane .tile:hover img{
	transform: scale(1)!important;
    filter: brightness(1) blur(0)!important;
}
*/
#dnn_ctr2113_ContentPane p{
	font-size: 18px;
	line-height:1.3;
}
#dnn_ctr2113_ContentPane .non-hover,
#dnn_ctr2113_ContentPane .hover{
	position:absolute;
    transition: all 0.5s;
}
#dnn_ctr2113_ContentPane .hover a{
	border: 2px solid white;
    padding: 0.5em 0.75em;
	text-decoration:none;
  	color:white;
}
#dnn_ctr2113_ContentPane .tile:hover .non-hover {
    margin-top: -100%;
}
/*
#dnn_ctr2113_ContentPane .tile:not(:hover) .hover {
    margin-top: 100%;
}
*/
@media (min-width:981px){
  #dnn_ctr2113_ContentPane h5{
  	min-height:75px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/*Standard Designs*/
#dnn_ctr2120_ContentPane .jarallax,
#dnn_ctr2117_ContentPane .jarallax,
#dnn_ctr2123_ContentPane .jarallax,
#dnn_ctr2126_ContentPane .jarallax,
#dnn_ctr2129_ContentPane .jarallax{
  	display:flex;
 	align-items:center;
	justify-content:center;
}
#dnn_ctr2126_ContentPane .row{
	align-items:center;
}

/*For Sale*/
form[action="/inspiration/for-sale"] .item-2454 .btn-outline-primary{
	display:none;
}
@media(max-width:490px){
  .slide-caption .caption-position-left {
      -ms-grid-row: 1 / -1;
      grid-area:auto;
  }
}

/*Why Caesarstone*/
#dnn_ctr2141_ContentPane .col-sm-6{
	display:flex;
  	align-items:center;
	justify-content:center;
  	flex-direction:column;
}

/*Contact Page*/
#dnn_ctr1070_ContactUs_formPane a.btn-outline-primary.selected{
color:white!important;
}

/*Shop*/
@media (min-width:1281px){
  #listwrapper .product-bak img{
    min-height:240px;
    object-fit:cover;
  }
}

.modal-backdrop.show{
display:none;
}

/*Edge Profiles*/
#edge-profiles{
    font-size: 17px;
    line-height: 1.3;
}
#edge-profiles .col-sm-4 button p{
	color:#444;
  	text-align:left;
}
/*
#edge-profiles .col-sm-4 .photo-panel {
    border: 1px solid lightgrey;
}
*/
#edge-profiles .btn-primary.focus,
#edge-profiles .btn-primary:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}
#edge-profiles [type=button]:not(:disabled), 
#edge-profiles [type=reset]:not(:disabled), 
#edge-profiles [type=submit]:not(:disabled), 
#edge-profiles button:not(:disabled){
  cursor:default;
}
#edge-profiles #edge-profile-slider .carousel-caption {
    padding-bottom: 40px;
    background-color: #ffffff85;
  	right: 0;
    left: 0;
    bottom: 0px;
}

/*Colour  Inspirations Guide*/
#colour-inspirations-guide{
    font-size: 17px;
    line-height: 1.3;
}
#colour-inspirations-guide .nav-tabs{
	border-bottom:none;
}
#colour-inspirations-guide .nav-tabs .nav-link{
    font-family: "Publico Text Web";
    font-size: 20px;
 	padding-bottom:1em;
}
#colour-inspirations-guide .nav-tabs a.nav-link.active {
    color: black;
    border-bottom: 7px solid black!important;
  	opacity:1;
}
#colour-inspirations-guide .nav-tabs a.nav-link {
    color: black;
  	opacity:0.5;
    border-bottom: 0px solid black!important;
  	transition:all 0.3s;
}
#colour-inspirations-guide .nav-tabs a.nav-link:hover {
  	opacity:1;
    border-bottom: 7px solid black!important;
}
#colour-inspirations-guide .nav-tabs .nav-item.show .nav-link,
#colour-inspirations-guide .nav-tabs .nav-link,
#colour-inspirations-guide .nav-tabs .nav-link.active,
#colour-inspirations-guide .nav-tabs .nav-link:focus, 
#colour-inspirations-guide .nav-tabs .nav-link:hover {
	border:none;
}
#colour-inspirations-guide .tab-content .row>div:first-child{
  padding:0;
}
#colour-inspirations-guide .tab-content .btn-outline-light{
  color:white;
}
#colour-inspirations-guide .tab-content .btn-outline-light:hover{
  color:#3B3838;
}
#colour-inspirations-guide .tab-content .row{
  color:white;
  background-color:#3B3838;
}
#colour-inspirations-guide #get-the-look img.rounded{
    height: 190px!important;
    width: 190px;
    border-radius: 50%!important;
    border: 1px solid #D6D6D6;
    margin-bottom: 1em;
}
#colour-inspirations-guide #meet-our-collaborators{
	background-color:#F2F2F2;
}
#colour-inspirations-guide #meet-our-collaborators .carousel-inner{
	padding-bottom:1em;
}
#colour-inspirations-guide #meet-our-collaborators #collaborator-slider {
    padding-bottom: 60px;
}
#colour-inspirations-guide #meet-our-collaborators #collaborator-slider img{
  width:auto;
  height:100px!important;
  margin:auto;
}
#colour-inspirations-guide .carousel-indicators li{
    height: 25px;
    width: 25px;
  	opacity:1;
	border-radius:50%;
  	border:3px solid #7F7F7F;
    margin-right: 7px;
    margin-left: 7px;
	background-color:#FFFFFF;
}
#colour-inspirations-guide .carousel-indicators .active{
	background-color:#7f7f7fa6;
}
#colour-inspirations-guide #black-neutrals-slider .carousel-control-prev,
#colour-inspirations-guide #white-neutrals-slider .carousel-control-prev,
#colour-inspirations-guide #collaborator-slider .carousel-control-prev {
    left:unset;
  	right:100%;
}
#colour-inspirations-guide #black-neutrals-slider .carousel-control-next,
#colour-inspirations-guide #white-neutrals-slider .carousel-control-next,
#colour-inspirations-guide #collaborator-slider .carousel-control-next{
    right:unset;
    left: 100%;
}
#colour-inspirations-guide #black-neutrals-slider .font-family-2a,
#colour-inspirations-guide #white-neutrals-slider .font-family-2a {
    font-family: "Publico Text Web";
    font-size: 20px;
    line-height: 1.5;
}

#colour-inspirations-guide #black-neutrals-slider .close,
#colour-inspirations-guide #white-neutrals-slider .close,
#colour-inspirations-guide #black-neutrals-slider2 .close,
#colour-inspirations-guide #white-neutrals-slider2 .close{
	opacity:1;
}
#colour-inspirations-guide #black-neutrals-slider .close,
#colour-inspirations-guide #white-neutrals-slider .close{
  padding:10px;
  transition:all 0.3s;
}
#colour-inspirations-guide #black-neutrals-slider .close:focus,
#colour-inspirations-guide #white-neutrals-slider .close:focus{
	outline:unset;
}
#colour-inspirations-guide #black-neutrals-slider .close p:first-child,
#colour-inspirations-guide #white-neutrals-slider .close p:first-child {
    box-shadow: 0px 0px 4px 4px #00000021;
  	overflow:hidden;
  	transition:all 0.3s;
}
#colour-inspirations-guide #black-neutrals-slider .close:hover p:first-child,
#colour-inspirations-guide #white-neutrals-slider .close:hover p:first-child {
    box-shadow: 0px 0px 4px 4px #6a6a6a69;
}
#colour-inspirations-guide #black-neutrals-slider .close .img-fluid,
#colour-inspirations-guide #white-neutrals-slider .close .img-fluid {
  	transition:all 0.3s;
}
#colour-inspirations-guide #black-neutrals-slider .close:hover .img-fluid,
#colour-inspirations-guide #white-neutrals-slider .close:hover .img-fluid {
    transform:scale(1.1);
}
#colour-inspirations-guide .modal.fade .modal-dialog{	
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
#colour-inspirations-guide .modal{
  	position:relative;
}
#colour-inspirations-guide #behind-the-guide-tab-content .col-md-6.d-flex{
	padding:4%!important;
}
@media (min-width: 769px){
  #colour-inspirations-guide .modal-dialog{
	max-width:50%;
  }
  #colour-inspirations-guide .modal-header .close{
    margin: -2rem -1rem -1rem auto;
    padding: 0;
    font-size:80px;
  } 
}
@media (max-width:767px){
  .visible-xs-block{
  	display:block;
  }
  .hidden-xs{
  	display:none;
  }
}
@media (min-width:768px){
  .visible-sm-block{
  	display:block;
  }
  .hidden-sm{
  	display:none;
  }
}

/*Carousel*/
.carousel-control-next-icon, 
.carousel-control-prev-icon {
    width: 50px;
    height: 50px;
}
.carousel-control-next-icon{
	background-image:url("/Portals/0/Images/Colour Inspirations Guide/Icons/Icon-Arrow-Right.png");
}
.carousel-control-prev-icon{
	background-image:url("/Portals/0/Images/Colour Inspirations Guide/Icons/Icon-Arrow-Left.png");
}

/*Colour Stories*/
#colour-stories{
  	font-size: 17px;
    line-height: 1.3;
}
#colour-stories .container{
	overflow: hidden;
}
#colour-stories .nav-tabs{
	display:flex;
  	flex-direction:column;
    border-bottom:none;
  	margin:0;
}
#colour-stories #colour-stories-dropdown{
	z-index:9;
}
#colour-stories #colour-stories-dropdown .dropdown-menu{
	right:0;
  	left:0;
  	padding:0;
}
#colour-stories #colour-stories-dropdown .dropdown-menu {
    display: block;
    margin-top: -200%;
    opacity: 0;
    transition: all 0.5s;
  	z-index:-9;
}
#colour-stories #colour-stories-dropdown .dropdown-menu.show {
    display: block;
    margin-top: 0;
    opacity: 1;
}
#colour-stories button{
 	outline: none;
    border: none;
    font-family: "Publico Text Web";
    font-size: 36px;
    background-color: white;
}
#colour-stories button span{
  	font-size: 20px;
	padding-bottom: 6px;
    border-bottom: 5px solid #222222;
    transition: all 0.3s;
}
#colour-stories button:hover span {
  	color:#fe6307;
    border-bottom: 5px solid #fe6307;
}
#colour-stories .dropdown.show button span {
    border: 0px solid #222222;
}
#colour-stories .dropdown button:after{
  content:"";
  background-image:url('/Portals/0/Images/Colour Inspirations Guide/Icons/Icon-Arrow-Down.png');
  width: 24px;
  height: 18px;
  display: inline-block;
  background-size: cover;
  transition:all 0.3s;
}
#colour-stories .dropdown.show button:after{
  transform: rotate(180deg);
}
#colour-stories .dropdown .nav-tabs li a{
	color:#fe6307;
    display: block;
    text-decoration: none;
    width: 100%;
	padding: 0.5em;
    transition: all 0.3s;
}
#colour-stories .dropdown .nav-tabs li a:hover{
  	color:white;
	background-color:#fe6307;
}
#colour-stories .dropdown .nav-tabs li:not(:last-child) a{
    border-bottom: 1px solid lightgray;
}
#colour-stories .container{
	display:flex;
  	flex-direction:column;
	align-items:center;
}