
/* #Fancy titles and separators
================================================== */

/* !- Thin divider */

	.divider-thin (@color) {
		border-style: solid;
		border-width: 1px;
		border-color: @color;

		border-left: none;
		border-right: none;
	}

	.divider-horisontal (@color) {
		border-style: @divider-thin-style;
		border-width: @divider-thin-height;
		border-color: @color;

		border-top: none;
		border-right: none;
		border-bottom: none;
	}

/* !- Thick divider */
	.hr-style (@style, @color) when (@style = style-5) {
		height: 0;
		border: none;
		border-top: solid 5px @color;
	}

	.hr-thick {
		.hr-style (@divider-thick-switch, @divider-color); 
	}

	.hr-breadcrumbs .breadcrumbs:after {
		.hr-style (@divider-thick-bread-switch, @divider-color); 
	}

	.hr-thick {
		border-color: fade(@base-color,10%);
	}

	.hr-thin {
		.divider-thin(@divider-color);
		border-bottom: none;
	}

	.hr-thin.style-dashed {
		border-top-style: dashed;
		border-bottom: none;
	}
	.hr-thin.style-dotted {
		border-top-style: dotted;
		border-bottom: none;
	}
	.hr-thin.style-double {
		border-top-style: double;
		border-top-width: 3px;
		border-bottom: none;
	}

.accent-border-color .separator-holder,
.accent-border-color.hr-thin,
.accent-border-color.hr-thick {
	border-color: @accent-bg-color;
}
.accent-border-color.hr-thin.style-line,
.accent-border-color.hr-thick {
	.accent-gradient & {
		border-width: 0;
		border-color: @accent-bg-color;
	    -moz-border-image: -moz-linear-gradient(@accent-text-color-2);
	    -webkit-border-image: -webkit-linear-gradient(@accent-text-color-2);
	     border-image: linear-gradient(@accent-text-color-2);
	    border-image-slice: 1;
	}
}

.dt-fancy-title.bg-on,
hr.gf_rule {
	.transparent-bg-mixin;
}
.accent-border-color .dt-fancy-title.bg-on {
	.accent-bg-mixin;
}
.accent-title-color .dt-fancy-title {
	.color-accent;
}
.title-color .dt-fancy-title {
	.header-color;
}
.dt-fancy-separator,
.dt-fancy-separator * {
	.color-base-transparent;
}
.separator-holder {
	border-color: @divider-color;
}
.separator-holder,
.accent-border-color .bg-on .separator-holder {
	.transparent-border-mixin;
}
.dt-fancy-title.bg-on {
	min-height: @base-font-size*2;
	line-height: @base-font-size*2;
}
.text-small .dt-fancy-title.bg-on {
	min-height: @text-small*2;
	line-height: @text-small*2;
}
.text-big .dt-fancy-title.bg-on {
	min-height: @text-big*2;
	line-height: @text-big*2;
}
.h1-size .dt-fancy-title.bg-on {
	min-height: @h1-font-size-desktop*2;
	line-height: @h1-font-size-desktop*2;
	@media (max-width: @lg-breakpoint - 1) {
		min-height: @h1-font-size-tablet*2;
		line-height: @h1-font-size-tablet*2;
	}
	@media (max-width: @md-breakpoint - 1) {
		min-height: @h1-font-size-mobile*2;
		line-height: @h1-font-size-mobile*2;
	}
}
.h2-size .dt-fancy-title.bg-on {
  min-height: @h2-font-size-desktop*2;
  line-height: @h2-font-size-desktop*2;
  @media (max-width: @lg-breakpoint - 1) {
    min-height: @h2-font-size-tablet*2;
    line-height: @h2-font-size-tablet*2;
  }
  @media (max-width: @md-breakpoint - 1) {
    min-height: @h2-font-size-mobile*2;
    line-height: @h2-font-size-mobile*2;
  }
}
.h3-size .dt-fancy-title.bg-on {
  min-height: @h3-font-size-desktop*2;
  line-height: @h3-font-size-desktop*2;
  @media (max-width: @lg-breakpoint - 1) {
    min-height: @h3-font-size-tablet*2;
    line-height: @h3-font-size-tablet*2;
  }
  @media (max-width: @md-breakpoint - 1) {
    min-height: @h3-font-size-mobile*2;
    line-height: @h3-font-size-mobile*2;
  }
}
.h4-size .dt-fancy-title.bg-on {
  min-height: @h4-font-size-desktop*2;
  line-height: @h4-font-size-desktop*2;
  @media (max-width: @lg-breakpoint - 1) {
    min-height: @h4-font-size-tablet*2;
    line-height: @h4-font-size-tablet*2;
  }
  @media (max-width: @md-breakpoint - 1) {
    min-height: @h4-font-size-mobile*2;
    line-height: @h4-font-size-mobile*2;
  }
}
.h5-size .dt-fancy-title.bg-on {
  min-height: @h5-font-size-desktop*2;
  line-height: @h5-font-size-desktop*2;
  @media (max-width: @lg-breakpoint - 1) {
    min-height: @h5-font-size-tablet*2;
    line-height: @h5-font-size-tablet*2;
  }
  @media (max-width: @md-breakpoint - 1) {
    min-height: @h5-font-size-mobile*2;
    line-height: @h5-font-size-mobile*2;
  }
}
.h6-size .dt-fancy-title.bg-on {
  min-height: @h6-font-size-desktop*2;
  line-height: @h6-font-size-desktop*2;
  @media (max-width: @lg-breakpoint - 1) {
    min-height: @h6-font-size-tablet*2;
    line-height: @h6-font-size-tablet*2;
  }
  @media (max-width: @md-breakpoint - 1) {
    min-height: @h6-font-size-mobile*2;
    line-height: @h6-font-size-mobile*2;
  }
}