@import 'config.less';

/** Accordion **/
.tm-accordion {
  .accordion-title {
	&.active {
	  h3 {
		a {
		  &:after {
			border-right: 5px solid transparent;
			  border-top: 5px solid @white;
			  border-left: 5px solid transparent;
			  border-bottom: 5px solid transparent;
			  margin-top: -3px;
		  }
		}
	  }
	}
	h3 {
	  a {
		position: relative;
		&:after {
		  border-bottom: 5px solid transparent;
			border-left: 5px solid @white;
			border-top: 5px solid transparent;
			content: "";
			height: 0;
			margin-top: -5px;
			position: absolute;
			right: 15px;
			top: 50%;
			width: 0;   
		}
	  }
	}
  }
  .accordion-container {
	padding: 0 10px;
  }
  &.tm-style1 {
	.accordion-title {
	  &.active {
		h3 {
		  a {
			background: @scheme;
		  }
		}
	  }
	  h3 {
		a {
		  background: lighten(@black, 80%);
		  .rounded;
		  color: @white;
		  display: block;
		  padding: 7px 20px;
		  margin-bottom: 5px;
		}
	  }
	}
	.accordion-container {
	  margin: 10px 0;
	}
  }
  &.tm-style2 {
	background: @white;
	border: 1px solid @grey;
	.accordion-title {
	  &:first-child {
		h3 {
		  a {
			border-top: none;
		  }
		}
	  }
	  &.active {
		h3 {
		  a {
			border-bottom: 1px solid @grey;
			color: @black;
			&:after {
			  border-right: 5px solid transparent;
				border-top: 5px solid @black;
				border-left: 5px solid transparent;
				border-bottom: 5px solid transparent;
			}
		  }
		}
	  }
	  h3 {
		a {
		  padding: 10px 20px;
		  display: block;
		  color: lighten(@black, 70%);
		  border-top: 1px solid @grey;
		  &:after {
			border-left-color: @grey;
		  }
		}
	  }
	}
	.accordion-container {
	  padding: 20px;
	}
  }
  &.tm-style3 {
	.accordion-title {
	  &:first-child {
		h3 {
		  a {
			border-top: none;
		  }
		}
	  }
	  h3 {
		a {
		  color: @black;
		  padding: 14px 0 14px 35px;
		  border-top: 1px solid @grey;
		  display: block;
		  &:after {
			content: "+";
			background: @black;
			height: 24px;
			width: 24px;
			text-align: center;
			line-height: 24px;
			color: @white;
			border: none;
			position: absolute;
			left: 0;
			right: auto;
			top: 50%;
			margin-top: -12px;
			.rounded;
		  }
		}
	  }
	  &.active {
		h3 {
		  a {
			&:after {
			  content: "-";
			  background: @scheme;
			}
		  }
		}
	  }
	}
	.accordion-container {
	  padding: 5px 0 20px 0;
	}
  }
  &.tm-style4 {
	.accordion-title {
	  &.active {
		position: relative;
		&:after {
		  border-right: 7px solid transparent;
		  border-bottom: 7px solid @scheme;
		  border-left: 7px solid transparent;
		  border-top: 7px solid transparent;
		  position: absolute;
		  content: "";
		  left: 20px;
		  bottom: 0;
		}
		h3 {
		  a {
			color: @white;
			&:after {
			  border-right: 5px solid transparent;
				border-top: 5px solid @white;
				border-left: 5px solid transparent;
				border-bottom: 5px solid transparent;
			}
		  }
		}
	  }
	  h3 {
		a {
		  background: lighten(@black, 10%);
		  color: lighten(@black, 50%);
		  display: block;
		  padding: 10px 20px;
		  border-bottom: 1px solid lighten(@black, 15%);
		  &:after {
			display: none;
		  }
		}
	  }
	}
	.accordion-container {
	  padding: 20px;
	  background: @scheme;
	  color: @white;
	}
  }
}

/** Alert Message **/
.tm-alert {
  padding: 20px;
  color: @white;
  position: relative;
  &.error {
	background-color: #ec8e92;
  }
  &.success {
	background-color: #7cc576;
  }
  &.info {
	background-color: #599490;
  }
  &.notice {
	background-color: #465150;
  }
  a.close {
	width: 24px;
	height: 24px;
	.rounded;
	text-align: center;
	position: absolute;
	top: 50%;
	right: 20px;
	margin-top: -12px;
	color: @white;
	&:hover {
	  background-color: rgba(0,0,0,.1);
	}
	i {
	  line-height: 22px;
	}
  }
}

/** Animation **/
.setanimate {
  .tm-animate {
	.opacity(0);
	.transition(all 0.9s ease-in-out 0s);
	position: relative;
	&.slide-from-left {
	  left: -100px;
	}
	&.slide-from-right {
	  right: -100px;
	}
	&.slide-from-top {
	  top: -100px;
	}
	&.slide-from-bottom {
	  bottom: -100px;
	}
  }
  &.visible {
	.tm-animate {
	  .opacity(1);
	  &.slide-from-left {
		left: 0;
	  }
	  &.slide-from-right {
		right: 0;
	  }
	  &.slide-from-top {
		top: 0;
	  }
	  &.slide-from-bottom {
		bottom: 0;
	  }
	}
  }
}

/** Blockquote **/
blockquote {
  &.tm-style1 {
	padding: 50px;
	text-align: center;
	background: @scheme;
	color: @white;
	.rounded;
	position: relative;
	&:after {
	  border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid @scheme;
		bottom: -10px;
		content: "";
		display: inline-block;
		height: 0;
		left: 50%;
		margin-left: -10px;
		position: absolute;
		width: 0;
	}
  }
  &.tm-style2 {
	background: lighten(@grey, 15%);
	padding: 30px;
	font-style: italic;
	border-left: 5px solid @scheme;
  }
}

/** Button **/
.tm-btn, .button, input[type="submit"] {
  &.small {
	padding: 5px 10px;
	height: auto;
	line-height: 1.8;
  }
  &.big {
	padding: 15px 45px;
	height: auto;
	line-height: 1.8;
  }
  color: @white;
  background: @scheme;
  background-image: none;
  background-color: @scheme;
  padding: 0 25px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  height: 36px;
  line-height: 36px;
  .rounded;
  .transition;
  display: inline-block;
  margin: 5px;
  &.blue {
	background: @blue;
  }
  &.lightblue {
	background: @lightblue;
  }
  &.darkblue {
	background: @darkblue;
  }
  &.red {
	background: @red;
  }
  &.green {
	background:@green;
  }
  &.orange {
	background: @orange;
  }
  &.dark {
	background: @dark;
  }
  &.light {
	background: @light;
	color: @black;
	&:hover {
	  color: @white;
	}
  }
  &.linelight {
	border: 1px solid @white;
	background: rgba(0,0,0,.1);
	color: @white;
	.rounded(0);
  }
  &.linedark {
	border: 1px solid @black;
	background: transparent;
	color: @black;
	.rounded(0);
  }
  &:hover {
	background: @black;
	color: @white;
  }
  &.tm-disabled, &:disabled {
	background: lighten(@grey, 15%);
	color: darken(@grey, 10%);
	cursor: no-drop;
  }
}
/**Social**/
ul.social-networks {
  width: 100%;
  background: rgba(0,0,0,.07);
  padding: 15px; 
  li {
	display: inline-block;
	a {
	  width: 32px;
	  height: 32px;
	  background: @black;
	  color: @white;
	  text-align: center;
	  display: inline-block;
	  margin-right: 5px;
	  .rounded;
	  position: relative;
	  &:hover {
		background: @scheme;
		&:before,
		&:after {
		  .opacity(1);
		}
	  }
	  &:before {
		content: attr(data-title);
		position: absolute;
		background: @black;
		left: 0;
		top: -30px;
		padding: 0 10px;
		.rounded(2px 2px 2px 0);
		.opacity(0);
		.transition;
	  }
	  &:after {
		border-top: 7px solid @black;
		  border-right: 7px solid transparent;
		  content: "";
		  height: 0;
		  width: 0;
		  position: absolute;
		  left: 0;
		  top: -10px;
		  .opacity(0);
		  .transition;
	  }
	  i {
		line-height: 32px;
	  }
	}
  }
}

/**Columns**/
.one-half {
  width: 48%;
}
.one-third {
  width: 30.6666%;
}
.two-third {
  width: 65.3332%;
}
.one-fourth {
  width: 22%;
}
.three-fourth {
  width: 74%;
}
.one-half,
.one-third,
.two-third,
.three-fourth,
.one-fourth {
	float: left;
	margin-right: 4%;
	position: relative;
	&.last {
	  margin-right: 0;
	}
	img {
	  max-width: 100%;
	}
}

/** Countdown **/
.tm-countdown {
  &.simple {
	color: @black;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 3em;
	span {
	  color: @grey;
	  margin: 0 5px;
	}
  }
  &.styled {
	div {
	  text-align: center;
	  border: 1px solid @grey;
	  width: 120px;
	  height: 120px;
	  font-size: 3em;
	  font-weight: bold;
	  color: @black;
	  line-height: 100%;
	  text-transform: uppercase;
	  display: inline-block;
	  margin: 0 15px;
	  padding-top: 30px;
	  span {
		display: block;
		font-size: 12px;
	  }
	}
  }
}

/** Heading **/
h1, h2, h3, h4, h5, h6 {
  color: @black;
  font-family: @heading-font;
}
h1 {
  font-size: 24px;
}
h2 {
  font-size: 18px;
}
h3 {
  font-size: 12px;
}
h4 {
  font-size: 12px;
  color: @scheme;
}
h5 {
  font-size: 12px;
  color: lighten(@black, 70%);
}
h6 {
  font-size: 11px;
}

/** Divider **/
hr {
  border: none;
  background: rgba(0,0,0,0.1);
  height: 1px;
  margin: 30px 0;
}
.tm-double-line {
  border-top:1px solid rgba(0,0,0,0.1);
  border-bottom:1px solid rgba(0,0,0,0.1);
  height: 7px;
  margin: 30px 0;
}
.tm-dashed {
  height: 1px;
  border-bottom: 1px dashed rgba(0,0,0,0.1);
  margin: 30px 0;
}
.tm-fat-line {
  height: 5px;
  background: lighten(@grey, 15%);
  border-bottom:1px solid lighten(@grey, 7%);
  margin: 30px 0;
}
.header-line-center {
  text-align: center;
  h1,h2,h3,h4,h5,h6 {
	display: inline-block;
	position: relative;
	&:before {
	  position: absolute;
	  content: "";
	  background: rgba(0,0,0,0.1);
	  height: 1px;
	  width: 35px;
	  left: -45px;
	  top: 50%;
	  margin-top: -1px;
	}
	&:after {
	  position: absolute;
	  content: "";
	  background: rgba(0,0,0,0.1);
	  height: 1px;
	  width: 35px;
	  right: -45px;
	  top: 50%;
	  margin-top: -1px;
	}
  }
}
.header-line-center-bottom {
  text-align: center;
  h1,h2,h3,h4,h5,h6 {
	display: inline-block;
	position: relative;
	padding-bottom: 10px;
	&:before {
	  position: absolute;
	  content: "";
	  background: rgba(0,0,0,0.1);
	  height: 1px;
	  width: 100px;
	  left: 50%;
	  top: 100%;
	  margin-left: -50px;
	}
  }
}
.header-line-bottom {
  h1,h2,h3,h4,h5,h6 {
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(0,0,0,0.1);
  }
}
.header-line-right {
  overflow: hidden;
  h1,h2,h3,h4,h5,h6 {
	position: relative;
	display: inline-block;
	&:after {
	  background: rgba(0,0,0,0.1);
	  height: 1px;
	  position: absolute;
	  content: "";
	  top: 50%;
	  margin-top: -1px;
	  left: 105%;
	  width: 9999em;
	}
  }
}
.header-double-line-right {
  overflow: hidden;
  h1,h2,h3,h4,h5,h6 {
	position: relative;
	display: inline-block;
	&:after {
	  border-bottom:1px solid rgba(0,0,0,0.1);
	  border-top:1px solid rgba(0,0,0,0.1);
	  height: 6px;
	  position: absolute;
	  content: "";
	  top: 50%;
	  margin-top: -3px;
	  left: 105%;
	  width: 9999em;
	}
  }
}
.header-line-left {
  overflow: hidden;
  text-align: right;
  .tm-to-top {
	position: relative;
	display: inline-block;
	color: @black;
	&:hover {
	  color: @scheme;
	}
	&:after {
	  background: rgba(0,0,0,0.1);
	  height: 1px;
	  position: absolute;
	  content: "";
	  top: 50%;
	  margin-top: -1px;
	  right: 110%;
	  width: 9999em;
	}
  }
}
.header-double-line-left {
  text-align: right;
  overflow: hidden;
  .tm-to-top {
	position: relative;
	display: inline-block;
	color: @black;
	&:hover {
	  color: @scheme;
	}
	&:after {
	  border-bottom:1px solid rgba(0,0,0,0.1);
	  border-top:1px solid rgba(0,0,0,0.1);
	  height: 6px;
	  position: absolute;
	  content: "";
	  top: 50%;
	  margin-top: -3px;
	  right: 110%;
	  width: 9999em;
	}
  }
}

/** Dropcaps **/
.tm-dropcap {
  float: left;
  display: inline-block;
  width: 40px;
  height: 40px;
  .rounded;
  text-align: center;
  line-height: 40px;
  font-size: 24px;
  margin: 0 10px 0 0;
  font-family: times new roman;
  &.tm-style1 {
	background: @white;
	color: @black;
  }
  &.tm-style2 {
	background: @grey;
	color: @white;
  }
  &.tm-style3 {
	background: @black;
	color: @white;
  }
}

/** Gallery **/
.tm-gallery {
  ul {
	display: inline-block;
	li {
	  position: relative;
	  &:hover {
		.tm-mask {
		  .opacity(1);
		}
	  }
	  a {
		display: block;
		.tm-mask {
		  position: absolute;
		  background: rgba(0,0,0,0.8);
		  left: 0;
		  top: 0;
		  width: 100%;
		  height: 100%;
		  text-align: center;
		  .transition;
		  .opacity(0);
		  &:before {
			content: "";
			  display: inline-block;
			  height: 100%;
			  vertical-align: middle;
		  }
		  .tm-mask-content {
			display: inline-block;
			  height: auto;
			  vertical-align: middle;
		  }
		  i {
			color: @white;
			font-size: 28px;
		  }
		}
	  }
	}
  }
  &.gallery-gird {
	ul {
	  li {
		float: left;
		margin: 0 10px 10px 0;
	  }
	}
  }
  &.gallery-carousel {
	ul {
	  li {
		margin: 0 10px 0 0;
	  }
	}
	ol.flex-control-nav {
	  position: static;
	  .opacity(1);
	  margin-top: 20px;
	  display: none;
	}
	ul.flex-direction-nav {
	  li {
		a {
		  left: -10px;
		  &.flex-next {
			left: auto;
			right: -10px;
		  }
		}
	  }
	}
  }
  &.gallery-thumb {
	ul {
	  display: block;
	}
	#tm-slider {
	  position: relative;
	  margin-bottom: 5px;
	  &:hover {
		ul.flex-direction-nav {
		  .opacity(1);
		}
	  }
	  ul.slides {
		li {
		  position: static;
		  a {
			display: block;
			img {
			  width: 100%;
			  height: auto;
			}
		  }
		}
	  }
	  ul.flex-direction-nav {
		.opacity(0);
		.transition;
		li {
		  position: static;
		  a {
			background: rgba(0,0,0,.5);
			width: 48px;
			height: 48px;
			text-align: center;
			display: inline-block;
			position: absolute;
			left: 20px;
			top: 50%;
			margin-top: -24px;
			.rounded;
			&:hover {
			  background: rgba(0,0,0,0.8);
			}
			i {
			  color: @white;
			  font-size: 28px;
			  line-height: 46px;
			}
			&.flex-next {
			  position: absolute;
			  right: 20px;
			  left: auto;
			}
		  }
		}
	  }
	}
	#tm-carousel {
	  padding: 0 25px;
	  position: relative;
	  ul.slides {
		li {
		  margin: 0 5px 0 0;
		  cursor: pointer;
		  a {
			display: block;
			img {
			  width: 75px;
			  height: 75px;
			}
		  }
		}
	  }
	  ul.flex-direction-nav {
		li {
		  position: static;
		  a { 
			height: 75px;
			width: 20px;
			background: @scheme;
			position: absolute;
			top: 0;
			left: 0;
			text-align: center;
			&.flex-next {
			  right: 0;
			  left: auto;
			}
			&:hover {
			  background: @black;
			}
			i {
			  font-size: 28px;
			  line-height: 75px;
			  color: @white;
			}
		  }
		}
	  } 
	}
  }
}

/** Icon Box **/
.tm-iconbox {
  &.tm-style1 {
	.tm-box {
	  .iconlist-icon-header {
		span {
		  float: left;
		  display: inline-block;
		  margin: 0 15px 0 0;
		  i {
			font-size: 28px;
			.transition;
		  }
		}
		h3 {
		  overflow: hidden;
		  padding-top: 4px;
		}
	  }
	}
  }
  &.tm-style2 {
	.tm-box {
	  &:hover {
		span {
		  background: @scheme;
		  i {
			color: @white;
		  }
		}
	  }
	  text-align: center;
	  .iconlist-icon {
		span {
		  .transition;
		  display: inline-block;
		  height: 64px;
		  width: 64px;
		  margin-bottom: 20px;
		  .rounded(64px);
		  i {
			font-size: 28px;
			line-height: 64px;
			.transition;
		  }
		}
	  }
	}
  }
  &.tm-style3 {
	.tm-box {
	  display: inline-block;
	  background: @white;
	  width: 145px;
	  height: 145px;
	  text-align: center;
	  vertical-align: middle;
	  float: left;
	  margin: 0 5px 5px 0;
	  .transition;
	  &:before {
		content: "";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	  }
	  &:hover {
		background: @scheme;
		color: @white;
		.tm-box-inner {
		  .iconlist-icon {
			span {
			  color: @white;
			}
		  }
		  .iconlist-entry {
			h3 {
			  color: @white;
			}
		  }
		}
	  }
	  .tm-box-inner {
		display: inline-block;
		height: auto;
		width: 90%;
		vertical-align: middle;
		margin-bottom: -15px;
		.iconlist-icon {
		  span {
			display: inline-block;
			height: 60px;
			width: 60px;
			color: @black;
			.transition;
			i {
			  font-size: 28px;
			  line-height: 60px;
			}
		  }
		}
		.iconlist-entry {
		  h3 {
			.transition;
			color: @black;
		  }
		}
	  }
	}
  }
  &.tm-style4 {
	.tm-box {
	  background: @white;
	  padding: 50px 20px 30px 20px;
	  position: relative;
	  .rounded;
	  &:hover {
		.iconlist-icon {
		  span {
			background: @black;
		  }
		} 
	  }
	  text-align: center;
	  .iconlist-icon {
		span {
		  .transition;
		  position: absolute;
		  left: 50%;
		  margin-left: -32px;
		  top: -32px;
		  display: inline-block;
		  height: 64px;
		  width: 64px;
		  margin-bottom: 20px;
		  .rounded(64px);
		  background: @scheme;
		  color: @white;
		  i {
			font-size: 28px;
			line-height: 64px;
			.transition;
		  }
		}
	  }
	}
  }
}

/** icon list **/
.tm-iconlist {
  &.tm-style1 {
	li {
	  border-bottom: 1px dotted @grey;
	  padding: 25px 0;
	  &:last-child {
		border-bottom: none;
	  }
	  .iconlist-icon {
		width: 60px;
		height: 60px;
		text-align: center;
		background: @scheme;
		color: @white;
		.rounded(60px);
		float: left;
		margin: 5px 15px 0 0;
		i {
		  font-size: 28px;
		  line-height: 60px;
		}
	  }
	  .iconlist-entry {
		.iconlist-container {
		  overflow: hidden;
		}
	  }
	}
  }
  &.tm-style2 {
	border: 1px solid lighten(@grey, 10%);
	background: @white;
	li {
	  border-bottom: 1px solid lighten(@grey, 10%);
	  padding: 25px;
	  &:last-child {
		border-bottom: none;
	  }
	  .iconlist-icon {
		width: 60px;
		height: 60px;
		text-align: center;
		background: @grey;
		color: @white;
		.rounded(60px);
		float: left;
		margin: 5px 25px 0 0;
		i {
		  font-size: 28px;
		  line-height: 60px;
		}
	  }
	  .iconlist-entry {
		.iconlist-container {
		  overflow: hidden;
		}
	  }
	}
  }
}

/** Logo Clients **/
.tm-logo-client {
  &:hover {
	li {
	  .opacity(0.3);
	}
  }
  ul {
	display: table;
	width: 100%;
	li {
	  display: table-cell;
	  vertical-align: middle;
	  .transition;
	  &:hover {
		.opacity(1);
	  }
	  a {
		display: block;
		img {
		  width: 100%;
		}
	  }
	}
  }
  &.with-border {
	ul {
	  li {
		a {
		  padding: 0 10px;
		  img {
			border: 1px solid lighten(@grey, 10%);
		  }
		}
	  }
	}
	&.logo-grid, &.tm-gallery {
	  ul {
		li {
		  a {
			padding: 0;
		  }
		}
	  }
	}
	&.logo-grid {
	  ul {
		&:last-child {
		  li {
			a {
			  img {
				border-bottom: none;
			  }
			}
		  }
		}
		li {
		  &:last-child {
			a {
			  img {
				border-right: none;
			  }
			}
		  }
		  a {
			img {
			  border: none;
			  border-right: 1px solid lighten(@grey, 10%);
			  border-bottom: 1px solid lighten(@grey, 10%);
			}
		  }
		}
	  }
	}
  }
  .flex-control-nav {
	display: none;
  }
  .slides {
	padding: 1px 0;
  }
}

/** Post Content **/
.tm-recent-post {
  ul {
	&:hover {
	  li {
		.opacity(0.3);
	  }
	}
	margin: 0 -10px;
	li {
	  &:hover {
		.opacity(1);
	  }
	  float: left;
	  padding: 0 10px;
	  margin-bottom: 20px;
	  .transition;
	  a {
		display: block;
		margin-bottom: 15px;
		&.thumb {
		  img {
			width: 100%;
			height: auto;
			.rounded;
		  }
		}
	  }
	  h3 {
		a {
		  color: @black;
		  width: 100%;
		  display: inline-block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		  &:hover {
			color: @scheme;
		  }
		}
	  }
	}
  }
}

/** Progress Bar **/
.tm-progress-bar {
  position: relative;
  text-align: left;
  .tm-progress-bar-wrap {
	background: lighten(@grey, 15%);
	position: relative;
	.tm-progress-bar-inner {
	  height: 100%;
	  position: relative;
	  overflow: hidden;
	  background: @scheme;
	  &.blue {
		background: @blue;
	  }
	  &.lightblue {
		background: @lightblue;
	  }
	  &.darkblue {
		background: @darkblue;
	  }
	  &.red {
		background: @red;
	  }
	  &.green {
		background:@green;
	  }
	  &.orange {
		background: @orange;
	  }
	  &.dark {
		background: @dark;
	  }
	  &.light {
		background: @light;
	  }
	  p {
		text-align: right;
		height: 100%;
		line-height: 35px;
		padding: 0 10px 0 0;
		color: @white;
	  }
	}
  }
  &.tm-style1 {
	.tm-progress-bar-wrap {
	  height: 35px;
	}
	strong {
	  position: absolute;
	  left: 10px;
	  color: @white;
	  height: 100%;
	  top: 0;
	  line-height: 35px;
	  z-index: 9;
	}
  }
  &.tm-style2 {
	.tm-progress-bar-wrap {
	  height: 10px;
	  .rounded(10px);
	}
	strong {
	  margin-bottom: 5px;
	  display: block;
	  span {
		float: right;
	  }
	}
	.tm-progress-bar-inner {
	  .rounded(10px);
	}
  }
  .tm-animation {
	.tm-progress-bar-inner {
	  &:after,
	  span {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-image: -webkit-gradient(linear, 0 0, 100% 100%,  
						  color-stop(.25, rgba(255, 255, 255, .2)),  
						  color-stop(.25, transparent), 
						  color-stop(.5, transparent),  
						  color-stop(.5, rgba(255, 255, 255, .2)),  
						  color-stop(.75, rgba(255, 255, 255, .2)),  
						  color-stop(.75, transparent), to(transparent));
		background-image: -moz-linear-gradient(  -45deg,  rgba(255, 255, 255, .2) 25%,  
						  transparent 25%,  
						  transparent 50%,  
						  rgba(255, 255, 255, .2) 50%,  
						  rgba(255, 255, 255, .2) 75%,  
						  transparent 75%,  
						  transparent);
		z-index: 1;
		-webkit-background-size: 50px 50px;
		-moz-background-size: 50px 50px;
		background-size: 50px 50px;
		-webkit-animation: move 2s linear infinite;
		-moz-animation: move 2s linear infinite;
	  }
	  &:after {
		display: none;
	  }
	}
  }
  @-webkit-keyframes move {
	0% {
	  background-position: 0 0;
	}
	100% {
	  background-position: 50px 50px;
	}
  }
  @-moz-keyframes move {
	0% {
	  background-position: 0 0;
	}   
	100% {
	   background-position: 50px 50px;
	}
  }
}

/** Promobox **/
.tm-promobox {
  border: 1px solid lighten(@grey, 10%);
  padding: 20px;
  width: 100%;
  display: inline-block;
  position: relative;
  border-left: 3px solid lighten(@grey, 10%);
  .tm-promobutton {
	.tm-btn {
	  position: absolute;
	  right: 20px;
	  top: 50%;
	  margin-top: -20px;
	  &.small {
		margin-top: -15px;
	  }
	  &.big {
		margin-top: -25px;
	  }
	} 
  }
  &.has-button {
	.tm-promocontent {
	  margin-right: 200px;
	}
  }
  &.no-button {
	.tm-promocontent {
	  margin-right: 0;
	}
	.tm-promobutton {
	  display: none;
	}
  }
}
.tm-promobox-group {
  display: table;
  table-layout: fixed;
  width: 100%;
  &.column-2 {
	.box {
	  width: 50%;
	}
  }
  &.column-3 {
	.box {
	  width: 33.33333333%;
	}
  }
  &.column-4 {
	.box {
	  width: 25%;
	}
  }
  .box {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: @white;
	h1,h2,h3,h4,h5,a {
	  color: @white;
	}
  }
}

/** Tabs **/
ul.tm-filter {
  margin-bottom: 25px;
  &.tm-style1 {
	li {
	  display: inline-block;
	  a {
		padding: 7px 20px;
		background: lighten(@black, 80%);
		color: @white;
		font-weight: bold;
		display: block;
		text-align: center;
		min-width: 80px;
		.rounded;
		&.selected {
		  &:hover {
			background: @scheme;
			color: @white;
		  }
		  background: @scheme;
		  position: relative;
		  &:after {
			border-left: 5px solid transparent;
			  border-right: 5px solid transparent;
			  border-top: 5px solid @scheme;
			bottom: -5px;
			  content: "";
			  display: inline-block;
			  height: 0;
			  left: 50%;
			  margin-left: -5px;
			  position: absolute;
			  width: 0;
		  }
		}
		&:hover {
		  background: @black;
		  color: @white;
		}
	  }
	}
  }
  &.tm-style2 {
	text-align: center;
	padding: 0 0 15px 0;
	margin-bottom: 0;
	li {
	  display: inline-block;
	  a {
		color: lighten(@black, 70%);
		font-weight: bold;
		text-transform: uppercase;
		display: block;
		text-align: center;
		min-width: 80px;
		padding: 0 20px;
		span {
		  display: block;
		  white-space: nowrap;
		  overflow: hidden;
		  text-overflow:ellipsis;
		  i {
			font-size: 28px;
			margin-bottom: 15px;
		  }
		}
		&.selected {
		  color: @black;
		  position: relative;
		  &:after {
			  background: @black;
			  content: "";
			  display: inline-block;
			  height: 1px;
			  position: absolute;
			  width: 100%;
			  left: 0;
			  bottom: -16px;
		  }
		  &:before {
			border-left: 5px solid transparent;
			  border-right: 5px solid transparent;
			  border-top: 5px solid @black;
			  bottom: -21px;
			  content: "";
			  display: inline-block;
			  height: 0;
			  left: 50%;
			  margin-left: -5px;
			  position: absolute;
			  width: 0;
		  }
		}
		&:hover {
		  color: @black;
		}
	  }
	}
  }
  &.tm-style3 {
	width: 100%;
	display: table;
	table-layout: fixed;
	li {
	  display: table-cell;
	  padding: 0 5px;
	  a {
		font-weight: bold;
		display: block;
		text-align: center;
		color:  lighten(@black, 50%);
		padding: 12px;
		text-transform: uppercase;
		min-width: 100px;
		border:2px solid @grey;
		&.selected {
		  color: @black;
		  border-color:@black;
		}
	  }
	}
  }
  &.tm-style4 {
	width: 100%;
	margin: 0;
	li {
	  float: left;
	  border: 1px solid @grey;
	  margin: 0 -1px -1px 0;
	  a {
		padding: 10px 20px;
		display: block;
		font-weight: bold;
		color: @black;
		background: @white;
		&.selected {
		  position: relative;
		  &:after {
			position: absolute;
			height: 1px;
			background: @black;
			content: "";
			left: -1px;
			right: -1px;
			bottom: 100%;
		  }
		  &:before {
			position: absolute;
			width: 100%;
			height: 1px;
			background: @white;
			content: "";
			left: 0;
			top: 100%;
		  }
		}
	  }
	}
  }
}
.tm-tabs2 {
  .tab-container {
	.tab-content {
	  padding-top: 30px;
	}
  }
}
.tm-tabs4 {
  .tab-container {
	border:1px solid @grey;
	padding: 20px;
	background: @white;
	clear: both;
	aside {
	  margin-bottom: 0;
	}
  }
}
.tabs-left {
	display: inline-block;
	width: 100%;
	ul.tm-filter {
		float: left;
		width: 25%;
		li {
			display: block;
			width: 100%;
		}
	}
	.tab-container {
		width: 75%;
		clear: none;
		float: left;
	}
	&.tm-tabs1 {
		ul.tm-filter {
			&.tm-style1 {
				li {
					margin-bottom: 1px;
					a {
						.rounded(0);
						&.selected {
							&:after {
								display: none;
							}
						}
					}
				}
			}
		}
		.tab-container {
			padding: 0 0 0 20px;
		}
	}
	&.tm-tabs2 {
		ul.tm-filter {
			&.tm-style2 {
				li {
					a {
						padding: 10px 0;
						border-bottom: 1px solid lighten(@grey, 10%);
						&.selected {
							border-bottom: 1px solid @black;
							&:after,&:before {
								display: none;
							}
						}
					}
				}
			}
		}
		.tab-container {
			padding: 0 0 0 20px;
			.tab-content {
				padding: 0;
			}
		}
	}
	&.tm-tabs3 {
		ul.tm-filter {
			&.tm-style3 {
				li {
					padding: 0;
					margin-bottom: -2px;
					a {
						&.selected {
							border-color:@grey;
							background: @grey;
							color: @white;
						}
					}
				}
			}
		}
		.tab-container {
			padding: 0 0 0 20px;
		}
	}
	&.tm-tabs4 {
		ul.tm-filter {
			&.tm-style4 {
				li {
					margin: 0 2px -1px;
					a {
						&.selected {
							&:after,&:before {
								display: none;
							}
						}
					}
				}
			}
		}
	}
}

/** Table **/
table {
  border-collapse: collapse;
  border-spacing: 0;
	width: 100%;
  &.tm-table {
	&.tm-style1 {
	  tr {
		&.header {
		  font-weight: bold;
		  color: @black;
		  text-align: left;
		}
		td, th {
		  border-bottom: 1px solid lighten(@grey, 15%);
		  padding: 10px;
		}
	  }
	}
	&.tm-style2 {
	  tr {
		&.header {
		  font-weight: bold;
		  color: @black;
		  text-align: left;
		  th {
			background: @white;
		  }
		}
		&:nth-child(2n-1) {
		  background: lighten(@grey, 15%);
		}
		td, th {
		  padding: 10px 15px;
		}
	  }
	}
  }
  &.tm-data-table {
	tr {
	  td,th {
		padding: 10px;
		text-align: center;
		&.tm-head-row {
		  text-align: right;
		  font-weight: normal;
		  padding-right: 20px;
		  background: lighten(@grey, 10%);
		  &:empty {
			background: none;
		  }
		}
		&.tm-price-row {
		  background: @scheme;
		  border-bottom: none;
		  color: @white;
		  font-size: 48px;
		  padding: 20px;
		  p {
			line-height: 100%;
			span {
			  line-height: 100%;
			}
		  }
		  .symbol {
			font-size: 20px;
			position: relative;
			top: -18px;
			left: -10px;
			color: darken(@scheme, 10%)
		  }
		  small {
			font-size: 12px;
			font-style: italic;
			display: block;
			line-height: 100%;
			color: darken(@scheme, 10%)
		  }
		}
	  }
	}
	thead {
	  tr {
		th {
		  background: lighten(@black, 20%);
		  color: @white;
		  text-transform: uppercase;
		  &:empty {
			background: transparent;
		  }
		}
	  }
	}
	tbody {
	  tr {
		td {
		  border-bottom: 1px solid @white;
		  background: lighten(@grey, 15%);
		  font-weight: bold;
		}
	  }
	}
	tfoot {
	  tr {
		td {
		  padding: 20px 10px;
		}
	  }
	}
  }
}
.tm-pricing-table {
  display: table;
  width: 100%;
  table-layout: fixed;
  &.tm-style1 {
	.pricing-table-wrap {
	  ul{
		background: @white;
		margin: 0 10px;
		border: 1px solid lighten(@grey, 15%);
	  }
	}
  }
  &.tm-style2 {
	.pricing-table-wrap {
	  ul {
		li {
		  border-bottom: 1px solid @white;
		  background: lighten(@grey, 15%);
		  &:nth-child(2n) {
			background: lighten(@grey, 10%);
		  }
		  &.tm-head-row {
			margin: 0;
		  }
		  &.tm-price-row {
			margin: 0;
		  } 
		}
		&.tm-highlight {
		  border: 1px solid @grey;
		  li {
			background: @white;
			margin: 0 15px;
			border-bottom: 1px solid lighten(@grey, 10%);
			&.tm-head-row {
			  border-bottom: none;
			  color: @black;
			}
			&.tm-price-row {
			  background: @scheme;
			  margin: 0;
			  border-bottom: none;
			}
			&.tm-btn-row,
			&:last-child {
			  border-bottom: none;
			}
		  }
		}
	  }
	}
  }
  .pricing-table-wrap {
	display: table-cell;
	text-align: center;
	ul {
	  li {
		padding: 15px;
		border-bottom: 1px solid lighten(@grey, 15%);
		&:last-child,
		&.tm-btn-row {
		  border: none;
		}
		&.tm-head-row {
		  background: lighten(@black, 20%);
		  border-bottom: none;
		  margin: -1px;
		  color: @white;
		  text-transform: uppercase;
		  font-weight: bold;
		}
		&.tm-price-row {
		  background: @scheme;
		  border-bottom: none;
		  color: @white;
		  font-size: 48px;
		  padding: 20px;
		  margin: -1px;
		  p {
			line-height: 100%;
			span {
			  line-height: 100%;
			}
		  }
		  .symbol {
			font-size: 20px;
			position: relative;
			top: -18px;
			left: -10px;
			color: darken(@scheme, 10%)
		  }
		  small {
			font-size: 12px;
			font-style: italic;
			display: block;
			line-height: 100%;
			color: darken(@scheme, 10%)
		  }
		}
		&.tm-btn-row {
		  padding: 20px 0;
		}
	  }
	  &.tm-highlight {
		border-width: 5px;
		border-color: @scheme;
		li {
		  &.tm-head-row {
			padding-top: 30px;
		  }
		  &.tm-btn-row {
			padding-bottom: 30px;
		  }
		}
	  }
	}
  }
}

/** Team **/
.tm-team {
  .tm-team-img {
	margin-bottom: 10px;
	position: relative;
	img {
	  width: 100%;
	}
	&:hover {
	  .tm-mask {
		.opacity(1);
	  }
	}
	.tm-mask {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  background: rgba(255,255,255,.8);
	  text-align: center;
	  left: 0;
	  top: 0;
	  .opacity(0);
	  .transition;
	  &:after {
		display: inline-block;
		vertical-align: middle;
		height: 100%;
		content: "";
	  }
	  .tm-mask-inner {
		display: inline-block;
		  height: auto;
		  vertical-align: middle;
	  }
	}
  }
  .job-title {
	color: darken(@grey, 20%);
	margin-bottom: 10px;
  }
}

/** Testimonial **/
.tm-testimonial {
  &.tm-style1 {
	text-align: left;
	.testimonial-content {
	  padding: 20px;
	  background: @scheme;
	  color: @white;
	  margin-bottom: 20px;
	  position: relative;
	  &.red {
		background: @red;
		&:after {
		  border-top-color:@red;
		}
	  }
	  &.blue {
		background: @blue;
		&:after {
		  border-top-color:@blue;
		}
	  }
	  &.green {
		background: @green;
		&:after {
		  border-top-color:@green;
		}
	  }
	  &.dark {
		background: @dark;
		&:after {
		  border-top-color:@dark;
		}
	  }
	  &.light {
		background: @light;
		color: @dark;
		&:after {
		  border-top-color:@light;
		}
	  }
	  &.orange {
		background: @orange;
		&:after {
		  border-top-color:@orange;
		}
	  }
	  &.lightblue {
		background: @lightblue;
		&:after {
		  border-top-color:@lightblue;
		}
	  }
	  &.darkblue {
		background: @darkblue;
		&:after {
		  border-top-color:@darkblue;
		}
	  }
	  &:after {
		position: absolute;
		content: "";
		left: 33px;
		top: 100%;
		border-right: 10px solid transparent;
		border-top: 10px solid @scheme;
		border-left: 10px solid transparent;
		border-bottom: 10px solid transparent;
	  }
	}
	.info {
	  img {
		width: 65px;
		height: 65px;
		.rounded(65px);
		display: inline-block;
		vertical-align: middle;
		margin: 0 10px 0 10px;
	  }
	  .name {
		display: inline-block;
		vertical-align: middle;
	  }
	}
  }
  &.tm-style2 {
	text-align: center;
	.testimonial-content {
	  margin-bottom: 20px;
	}
	.info {
	  span {
		color: @grey;
	  }
	}
  }
}

/** WooCommerce **/
.tm-woo-banner {
  a {
	display: block;
	overflow: hidden;
	&:hover {
	  img {
		.scale;
	  }
	}
	img {
	  .transition;
	}
  }
}