/*		Copyright (C) Stephan W. http://www.3d-hobby-art.de, http://www.gnu.org/licenses/gpl.html GNU/GPL
	==================================================================================================================================================== */

@import "uikit/uikit.less";
@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,300';
@import 'https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic';

/*	========================================================================
		ui-TopStyle theme v1.0.5
	==================================================================================================================================================== */

// Variables Theme
// ========================================================================

@th-light-color:								#fff;
@th-dark-color:									#3c3c3c;
@th-primary-color:								#ff0000;
@th-secondary-color:							#222;
@th-muted-color:								#e4e4e4;


//
// Global
//
@global-primary-background:						@th-primary-color;


//
// Spacings
//
@global-margin:									20px;
@global-large-margin:							30px;


//
// Text
//
@global-text-shadow:							@th-light-color;
@global-link-color:								@th-primary-color;
@global-link-hover-color:						@th-primary-color;


//
// Breadcrumb
//
@breadcrumb-font-size:							@base-body-font-size - 3px;


//
// Backgrounds & Borders
//
@global-default-gradient-top:					@th-light-color;
@global-default-gradient-bottom:				#eee;

@global-primary-gradient-top:					#5cc0ea;
@global-primary-gradient-bottom:				#4cacd7;


//
// Base
//
@base-body-font-size:							15px;

@base-h1-font-size:								round(@global-font-size * 2.85); // 40px
@base-h1-line-height:							round(@base-h1-font-size * 1.25); // 50px
@base-h2-font-size:								round(@global-font-size * 2.28); // 32px
@base-h2-line-height:							round(@base-h2-font-size * 1.25); // 40px
@base-h3-font-size:								round(@global-font-size * 1.71); // 24px
@base-h3-line-height:							round(@base-h3-font-size * 1.25); // 30px
@base-h4-font-size:								round(@global-font-size * 1.28); // 18px
@base-h4-line-height:							round(@base-h4-font-size * 1.33); // 24px
@base-selection-background:						#1fa2d6;
@base-body-font-family:							'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
@base-heading-font-family:						'Ubuntu', 'Myriad Web Pro', 'Myriad Pro', Helvetica, Arial, 'Trebuchet MS', Verdana, Tahoma, sans-serif;
@base-heading-font-weight:						400;


@base-link-hover-text-decoration:				none;


//
// Panel
//
@panel-box-primary-background:					darken(@global-primary-background, 25%);
@panel-box-primary-color:						contrast(@global-primary-background, black, white, 40%);
@panel-box-primary-title-color:					contrast(@global-primary-background, black, white, 45%);
@panel-box-primary-border-color:				darken(@global-primary-background, 35%);


//
// Article
//
@article-title-font-weight:						300;


//
// Featured Articles
//
@featured-border-width:							15px;
@featured-border-color:							#000;

@featured-mask-article-grey-bg:					#808080;
@featured-mask-article-white-bg:				@th-light-color;

//
// Nav
//
@nav-padding-horizontal:						20px;
@nav-side-active-box-shadow:					rgba(0,69,109,0.25);
@nav-dropdown-hover-box-shadow:					rgba(0,69,109,0.25);
@nav-navbar-hover-box-shadow:					rgba(0,69,109,0.25);
@nav-search-active-box-shadow:					rgba(0,69,109,0.25);


//
// Navbar
//
@navbar-nav-height:								90px;
@navbar-background:								transparent;
@navbar-nav-hover-background:					transparent;
@navbar-nav-active-background:					transparent;
@navbar-nav-onclick-background:					transparent;
@navbar-nav-font-size:							@base-body-font-size + 2px;
@navbar-nav-font-family:						@base-body-font-family;

@nav-side-hover-background:						@base-link-hover-color;
@nav-side-hover-color:							@th-light-color;
@nav-side-active-background:					@base-link-hover-color;
@nav-side-active-color:							@th-light-color;

@nav-navbar-hover-background:					fade(@th-primary-color, 85%);
@nav-navbar-hover-color:						@th-light-color;

//
// Button
//
@button-color:									@th-light-color;
@button-background:								#282727;
@button-hover-background:						#323232;

@button-hover-color:							#9C9C9C;
@button-active-color:							@button-hover-color;
@button-active-background:						#282727;

@button-line-height:							35px;
@button-height:									36px;
@button-padding-horizontal:						20px;
@button-font-size:								@base-body-font-size - 3px;

@button-primary-color:							@button-color;
@button-primary-background:						#C74337;
@button-primary-hover-color:					@button-hover-color;
@button-primary-hover-background:				#c74337;
@button-primary-active-background:				#c74337;
@button-primary-active-color:					@button-hover-color;

@button-success-color:							@button-color;
@button-success-background:						#25bb65;

@button-success-hover-background:				#25bb65;
@button-success-hover-color:					#F6F6F6;

@button-success-active-background:				#25bb65;
@button-success-active-color:					#F6F6F6;


@button-disabled-color:							@button-hover-color;
@button-disabled-background:					rgb(245, 245, 245);

//
// Icon
//
@icon-button-hover-color:						@global-link-hover-color;

@icon-button-border:                            #ccc;
@icon-button-border-bottom:                     #bbb;
@icon-button-text-shadow:                       @global-text-shadow;

@icon-button-gradient-top:                      @global-default-gradient-top;
@icon-button-gradient-bottom:                   @global-default-gradient-bottom;

//
// Badge
//
@badge-font-size:								@base-body-font-size - 4px;
@badge-font-weight:								normal;


//
// Thumbnail
//
@thumbnail-background:							@th-light-color;


//
// Dropdown
//
@dropdown-width:								220px;


//
// Modal
//
@modal-dialog-margin-vertical:                  120px;


//
// Pagination
//
@pagination-padding-vertical:                   15px;


//
// Contrast
//
@contrast-base-link-color:						fade(@global-link-color, 70%);
@contrast-base-link-hover-color:				@global-link-hover-color;
@contrast-base-link-hover-text-decoration:		none;

//
// Utility
//
@utility-heading-large-font-size:				round(@global-font-size * 3.71); // 52px
@utility-heading-large-line-height:				round(@utility-heading-large-font-size * 1.23); // 64px
	

//
// uk-blocks
//
@block-muted-background:						@th-muted-color;	
@block-secondary-background:					@th-secondary-color;


//	Blocks
//	====================================================================================================================================================
.tm-toolbar,
.tm-headerbar {
    margin-top: @global-grid-gutter;
    margin-bottom: @global-grid-gutter;
}


.tm-navbar {
    margin-bottom: @global-grid-gutter;
}


@media (min-width: @breakpoint-xlarge) {

    .tm-headerbar{
        margin-top: @global-grid-gutter-large;
        margin-bottom: @global-grid-gutter-large;
    }

}


@media (max-width: @breakpoint-small-max) {

    .tm-navbar {
        margin: 0 -@utility-container-padding-horizontal @global-grid-gutter -@utility-container-padding-horizontal;
        border-width: 0 0 1px 0;
    }

    .tm-logo-small:hover { text-decoration: none; };

    .tm-navbar:not(.uk-navbar-attached) { border-radius: 0; }

}


//	Logo small
//	====================================================================================================================================================
.tm-logo-small {
	letter-spacing: -0.31em;
}


//	Toolbar
//	====================================================================================================================================================
.tm-toolbar {
	.uk-float-left {
		.uk-panel {
			margin: 0 @global-grid-gutter 0 0;
			float: left;
		}
	}
	.uk-float-right {
		.uk-panel {
			margin: 0 0 0 @global-grid-gutter;
			float: right;
		}
	}
}

.tm-toolbar {
	.uk-subnav {
		a {
			border-bottom: 2px solid transparent;
			-webkit-transition: border-bottom-color 1s;
			transition: border-bottom-color 1s;
			&:hover {
				border-bottom: 2px solid @base-link-hover-color;
			}
		}
	}
}


//	Headerbar
//	====================================================================================================================================================
.tm-headerbar {
	.tm-logo {
		float: left;
	}
	.uk-panel {
		max-width: 300px;
		margin-right: 0;
		float: right;
	}
}


//	Nav / fixed
//	====================================================================================================================================================
.tm-navbar {
	.uk-parent {
		a {
			&:before {
				font-family: 'FontAwesome';
				content: "\f105";
				font-weight: normal;
				font-style: normal;
				padding-right: 10px;
			}
		}
	}
	.uk-parent.uk-open {
		a {
			&:before {
				font-family: 'FontAwesome';
				content: "\f107";
				font-weight: normal;
				font-style: normal;
				padding-right: 5px;
			}
		}
		.uk-dropdown {
			a {
				&:before {
					content: "";
					padding-right: 0px;
				}
			}
		}
	}
	.uk-nav.uk-nav-navbar {
		a {
			&:before {
				content: "";
				padding-right: 0px;
			}
		}
	}
}

.tm-navbar.uk-active{
	background: white;
	background: rgba(255, 255, 255, 0.98);
	border-bottom: 1px solid rgb(238, 238, 238);
	-webkit-box-shadow: 0px 4px 10px 3px rgba(45, 45, 45, 0.1);
	-moz-box-shadow: 0px 4px 10px 3px rgba(45, 45, 45, 0.1);
	box-shadow: 0px 4px 10px 3px rgba(45, 45, 45, 0.1);
}


//	Sub-Nav / Sidebar
//	====================================================================================================================================================
.uk-nav-side {
	>li {
		-webkit-transition: 0.24s;
		transition: 0.24s;
		&:hover {
			a {
				color: @nav-side-active-color;
			}
		}
	}
	li {
		&:hover {
			background: @base-link-hover-color;
		}
	}
}


ul.uk-nav-sub {
	padding: 5px 0 5px 30px;
	li {
		-webkit-transition: 0.24s;
		transition: 0.24s;
		&:hover {
			padding-left: 5px;
		}
	}
	li.uk-parent {
		&:hover {
			padding-left: 0px;
		}
	}
}


//	Breadcrumbs
//	====================================================================================================================================================
#breadcrumbs.uk-block {
	padding-top: 15px;
	padding-bottom: 13px;
}

#breadcrumbs {
	ul.uk-breadcrumb {
		margin-bottom: 0;
		li {
			a {
				border-bottom: 2px solid transparent;
				-webkit-transition: border-bottom-color 1s;
				transition: border-bottom-color 1s;
				&:hover {
					border-bottom: 2px solid @base-link-hover-color;
				}
			}
		}
	}
}


//	youtube bg section
//	====================================================================================================================================================
.tm-vertical-align-middle {
    height: auto !important;
    left: 0;
    max-width: none !important;
}

.mb_YTPlayer {
	&:focus {
		outline: 0;
	}
}

.YTPWrapper {
	display: block;
	transform: translateZ(0) translate3d(0, 0, 0);
	transform-style: preserve-3d;
	perspective: 1000;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	box-sizing: border-box;
}

.mbYTP_wrapper {
	iframe {
		max-width: 8000px !important;
	}
}

.inline_YTPlayer {
	margin-bottom: 20px;
	vertical-align: top;
	position: relative;
	left: 0;
	overflow: hidden;
	border-radius: 4px;
	box-shadow: 0 0 5px rgba(0, 0, 0, .7);
	background: rgba(0, 0, 0, .5);
	img {
		border: none !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: none !important;
	}
}


//	Middle
//	====================================================================================================================================================
.tm-main > :nth-child(n+2) {
	margin-top: @global-grid-gutter;
}

.tm-content > :last-child {
	margin-bottom: 0;
}


.page-header {
	border-bottom: 1px solid #e5e5e5;
	position: relative;
	margin-bottom: @global-large-margin;
	margin-top: @global-margin;
	.uk-container {
		&:before {
			background: #1e1e1e;
			bottom: 0px;
			content: "";
			display: block;
			height: 1px;
			left: @global-grid-gutter;
			margin: 0 0 -1px;
			position: absolute;
			width: 60px;
		}
	}
}

.uk-contrast {
	.page-header {
		.uk-container {
			&:before {
				background: #505050;
			}
		}
	}
}


//	Panel Icons
//	====================================================================================================================================================
span.tm-icon {
	display: inline-block;
	width: 120px;
	height: 120px;
	background: rgb(32, 45, 53);
	border: 6px solid rgba(138, 138, 138, 0.8);
	margin-bottom: @global-margin;
	i {
		line-height: 120px;
		font-size: 60px;
		color: @th-light-color;
	}
}


//	Panels
//	====================================================================================================================================================
.uk-contrast .uk-panel-box {
    background: rgb(0, 0, 0);
    color: rgb(195, 195, 195);
}


.uk-panel-box-primary {
	a {
		border-bottom: 2px solid transparent;
		-webkit-transition: border-bottom-color 1s;
		transition: border-bottom-color 1s;
		&:hover {
			border-bottom: 2px solid @global-link-color;
			color: @global-link-color;
		}
	}
}


.tm-panel-box-gradient {
    background-origin: border-box;
    background-image: -webkit-linear-gradient(top, @global-default-gradient-top, @global-default-gradient-bottom);
    background-image: linear-gradient(to bottom, @global-default-gradient-top, @global-default-gradient-bottom);
}


//	Panel Shadow
//	====================================================================================================================================================
.tm-shadow {
	-webkit-box-shadow: 0 12px 10px -12px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 35px rgba(0, 0, 0, 0.12) inset;
	-moz-box-shadow: 0 12px 10px -12px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 35px rgba(0, 0, 0, 0.12) inset;
	box-shadow: 0 12px 10px -12px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 35px rgba(0, 0, 0, 0.12) inset;
}

[class*="tm-shadow"] {
	position: relative;
}


//	Blog
//	====================================================================================================================================================
.tm-leading-article .uk-article:last-child {
	padding-bottom: @article-margin-top;
}


//	Featured Articles
//	====================================================================================================================================================
@media (min-width: @breakpoint-medium) {

	.tm-featured-articles {
		.tm-container-100 {
			max-width: 100%;
			padding-right: 0;
			padding-left: 0;
			.uk-article {
				.tm-title {
					padding-left: @grid-gutter-vertical;
				}
				.tm-mask-article-white {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 2;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
					-webkit-transition: all 0.2s ease-out;
					-moz-transition: all 0.2s ease-out;
					-o-transition: all 0.2s ease-out;
					transition: all 0.2s ease-out;
					background: fade(@featured-mask-article-white-bg, 70%);
					&:before {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						border: 0px solid transparent;
						-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box;
						box-sizing: border-box;
						content: '';
						-webkit-transition: border-width 0.34s, border-color 0.34s;
						-moz-transition: border-width 0.34s, border-color 0.34s;
						-ms-transition: border-width 0.34s, border-color 0.34s;
						-o-transition: border-width 0.34s, border-color 0.34s;
						transition: border-width 0.34s, border-color 0.34s;
					}
				}
				.tm-mask-article-grey {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 2;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
					-webkit-transition: all 0.2s ease-out;
					-moz-transition: all 0.2s ease-out;
					-o-transition: all 0.2s ease-out;
					transition: all 0.2s ease-out;
					background: fade(@featured-mask-article-grey-bg, 70%);
					&:before {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						border: 0px solid transparent;
						-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box;
						box-sizing: border-box;
						content: '';
						-webkit-transition: border-width 0.34s, border-color 0.34s;
						-moz-transition: border-width 0.34s, border-color 0.34s;
						-ms-transition: border-width 0.34s, border-color 0.34s;
						-o-transition: border-width 0.34s, border-color 0.34s;
						transition: border-width 0.34s, border-color 0.34s;
					}
				}
				.tm-featured-articles-content {
					padding: 0px @grid-gutter-vertical;
				}
				.tm-more {
					position: absolute;
					width: 0;
					margin-left: @featured-border-width;
					padding: @grid-gutter-horizontal 0;
					z-index: 3;
					display: none;
					visibility: hidden;
					-webkit-transition: width 0.34s;
					-moz-transition: width 0.34s;
					-ms-transition: width 0.34s;
					-o-transition: width 0.34s;
					transition: width 0.34s;
				}
				.tm-edit {
					position: absolute;
					width: 0;
					margin-left: @featured-border-width;
					padding: @grid-gutter-horizontal 0;
					z-index: 3;
					display: none;
					visibility: hidden;
					-webkit-transition: width 0.34s;
					-moz-transition: width 0.34s;
					-ms-transition: width 0.34s;
					-o-transition: width 0.34s;
					transition: width 0.34s;
				}
				&:hover {
					.tm-edit {
						width: calc(~'100% - '@featured-border-width*2);
						background: rgba(33, 33, 33, 0.85);
						display: block;
						visibility: visible;
						top: @featured-border-width;
					}
					.tm-more {
						width: calc(~'100% - '@featured-border-width*2);
						background: rgba(33, 33, 33, 0.85);
						display: block;
						visibility: visible;
						bottom: @featured-border-width;
						a {
							color: @base-link-color;
							border-bottom: 2px solid transparent;
							-webkit-transition: border-bottom-color 1s;
							transition: border-bottom-color 1s;
							&:hover {
								border-bottom: 2px solid @base-link-color;
							}
						}
					}
					.tm-mask-article-grey {
						background: fade(@featured-mask-article-grey-bg, 35%);
						&:before {
							border-width: @featured-border-width;
							border-color: fade(@featured-border-color, 25%);
						}
					}
					.tm-mask-article-white {
						background: fade(@featured-mask-article-white-bg, 20%);
						&:before {
							border-width: @featured-border-width;
							border-color: fade(@featured-border-color, 25%);
						}
					}
				}
			}
		}
		.tm-content {
			>.uk-grid {
				margin-left: 0;
				>* {
					padding-left: 0;
				}
				&+.uk-grid {
					margin-top: 0 !important;
				}
				>div {
					margin-top: 0 !important;
				}
			}
		}
	}

}


@media (min-width: 1920px) {

	.tm-featured-articles .tm-container-100 {
		max-width: 1900px;
		padding-right: @utility-container-large-padding-horizontal;
		padding-left: @utility-container-large-padding-horizontal;
	}

}


//	Timeline Blog
//	====================================================================================================================================================
.tm-timeline {
	padding: 20px 0;
	position: relative;
	&:before {
		background-color: #d2d2d2;
		background-color: rgba(0,0,0,.25);
		-webkit-border-radius: 1px;
		-moz-border-radius: 1px;
		border-radius: 1px;
		content: "";
		display: block;
		height: 100%;
		left: 50%;
		margin-left: -2px;
		position: absolute;
		top: 0;
		width: 4px;
	}
	.uk-article {
		padding: 0 40px 5px 0;
		.tm-timeline-info {
			left: 50%;
			margin: 30px 0 0 35px;
			position: absolute;
		}
		i.uk-icon-info-circle {
			background: @base-body-color;
			-webkit-border-radius: 38px;
			-moz-border-radius: 38px;
			border-radius: 38px;
			color: @th-light-color;
			left: 50%;
			margin: 24px 0 0 -18px;
			position: absolute;
			text-align: center;
			width: 38px;
			height: 38px;
			line-height: 38px;
			.uk-icon-large {
				font-size: 38px;
			}
		}
		.uk-panel {
			&:before {
				border: 15px solid transparent;
				border-left-color: rgb(229, 229, 229);
				content: "";
				display: block;
				position: absolute;
				right: -30px;
				top: 26px;
			}
			&:after {
				border: 15px solid transparent;
				border-left-color: rgb(229, 229, 229);
				content: "";
				display: block;
				position: absolute;
				right: -30px;
				top: 26px;
				border: 14px solid transparent;
				border-left-color: @panel-box-background;
				right: -28px;
				top: 27px;
			}
			.uk-panel-teaser {
				margin-top: -@panel-space-padding;
				margin-left: -@panel-space-padding;
				margin-right: -@panel-space-padding;
					img {
						-webkit-border-radius: 3px 3px 0px 0px;
						-moz-border-radius: 3px 3px 0px 0px;
						border-radius: 3px 3px 0px 0px;
					}
			}
			.tm-timeline-more {
				text-align: center;
					a {
						border-bottom: 2px solid transparent;
						-webkit-transition: border-bottom-color 1s;
						transition: border-bottom-color 1s;
						&:hover {
							border-bottom: 2px solid @base-link-hover-color;
						}
					}
			}
		}
	}
	.uk-article.tm-right {
		margin-left: 50%;
		padding: 0 0 5px 40px;
		.tm-timeline-info {
			left: auto;
			margin: 30px 40px 0 0;
			right: 50%;
			text-align: right;
		}
		.uk-panel {
			&:before {
				border: 15px solid transparent;
				border-right-color: rgb(229, 229, 229);
				left: -30px;
				right: auto;
			}
			&:after {
				border: 14px solid transparent;
				border-right-color: @panel-box-background;
				left: -28px;
				right: auto;
			}
		}
	}
}

@media (max-width: @breakpoint-small-max) {

	.tm-timeline {
		&:before {
			left: 20px;
		}
		.uk-article {
			margin: 0;
			padding: 0 0 30px 60px;
			.tm-timeline-info {
				left: 0;
				margin: 0 0 5px;
				position: relative;
				right: 0;
				text-align: left;
			}
			i {
				left: 0;
				margin: 22px 0 0 0;
			}
			.uk-panel {
				&:before {
					border: 15px solid transparent;
					border-right-color: rgb(229, 229, 229);
					left: -30px;
					right: auto;
				}
				&:after {
					border: 14px solid transparent;
					border-right-color: @panel-box-background;
					left: -28px;
					right: auto;
				}
			}
			.uk-panel.border {
				&:before {
					border: 15px solid transparent;
					border-right-color: rgb(229, 229, 229);
				}
			}
		}
		.uk-article.tm-right {
			margin: 0;
			padding: 0 0 30px 60px;
			.tm-timeline-info {
				left: 0;
				margin: 0 0 5px;
				position: relative;
				right: 0;
				text-align: left;
			}
			.uk-panel {
				&:before {
					border: 15px solid transparent;
					border-right-color: rgb(229, 229, 229);
					left: -30px;
					right: auto;
				}
				&:after {
					border: 14px solid transparent;
					border-right-color: @panel-box-background;
					left: -28px;
					right: auto;
				}
			}
		}
	}

}


//	Socialbuttons
//	====================================================================================================================================================
ul.socialbuttons-3d-hobby-art {
	-moz-user-select: none;
	background: transparent !important;
	.socialbutton-off {
		.uk-button {
			font-size: @base-body-font-size;
			text-shadow: 0 1px 1px fade(@global-link-color, 30%);
			-moz-box-shadow: inset 0px 1px 4px rgb(0, 0, 0);
			-webkit-box-shadow: inset 0px 1px 4px rgb(0, 0, 0);
			box-shadow: inset 0px 1px 4px rgb(0, 0, 0);
			background-image: none;
			background-color: @button-disabled-background;
			color: @button-disabled-color;
		}
		&:hover {
			.uk-button {
				text-shadow: none;
			}
		}
	}
	.socialbutton-on {
		.uk-button {
			text-shadow: none;
			color: @button-color;
			border: 1px solid #171616;
			-moz-box-shadow: inset 0 1px 1px #666;
			-webkit-box-shadow: inset 0 1px 1px #666;
			box-shadow: inset 0 1px 1px #666;
			background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE3MTcxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI3MjcyNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
			background-image: -moz-linear-gradient(bottom, #171717 0%, #272727 100%);
			background-image: -o-linear-gradient(bottom, #171717 0%, #272727 100%);
			background-image: -webkit-linear-gradient(bottom, #171717 0%, #272727 100%);
			background-image: linear-gradient(bottom, #171717 0%, #272727 100%);
			&:hover {
				border: 1px solid #171616;
				-moz-box-shadow: inset 0 1px 1px #666;
				-webkit-box-shadow: inset 0 1px 1px #666;
				box-shadow: inset 0 1px 1px #666;
				background-color: @button-hover-background;
				background-image: none;
				text-shadow: none;
			}
		}
		&:hover {
			.twitter-share-button {
				color: #4099ff;
			}
			.gplus-share-button {
				color: #db5a3c;
			}
			.fb-share-button {
				color: #3b5998;
			}
			.linkedin-share-button {
				color: #0177b5;
			}
			.whatsapp-share-button {
				color: #46B825;
			}
		}
	}
}

@media (max-width: @breakpoint-small-max) {

	ul.socialbuttons-3d-hobby-art {
		.socialbutton-on {
			.twitter-share-button {
				color: #4099ff;
			}
			.gplus-share-button {
				color: #db5a3c;
			}
			.fb-share-button {
				color: #3b5998;
			}
			.linkedin-share-button {
				color: #0177b5;
			}
			.whatsapp-share-button {
				color: #46B825;
			}
		}
	}

}


//	BG-Overlay
//	====================================================================================================================================================
@media only screen and (min-width: 960px){

	#tm-top-a,
	#tm-top-b,
	#tm-middle,
	#tm-bottom-a,
	#tm-bottom-b,
	#tm-bottom-c,
	#tm-footer {
		z-index: 1;
	}

	.tm-footer-overlay,
	.tm-bottom-c-overlay,
	.tm-bottom-b-overlay,
	.tm-bottom-a-overlay,
	.tm-middle-overlay,
	.tm-top-b-overlay,
	.tm-top-a-overlay {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		z-index: -1;
	}

}


//	Pagination
//	====================================================================================================================================================
.tm-pagination-line {
	position: relative;
	width: 80%;
	max-width: 240px;
	margin: 0 auto;
	opacity: .4;
	margin-bottom: 10px;
	padding-bottom: 10px;
	margin-top: 25px;
	padding-top: 25px;
	border-bottom: 1px dashed @base-link-color;
}

//	Footer
//	====================================================================================================================================================
#tm-footer {
	font-size: @base-body-font-size - 3px;
	a {
		border-bottom: 2px solid transparent;
		-webkit-transition: border-bottom-color 1s;
		transition: border-bottom-color 1s;
		&:hover {
			border-bottom: 2px solid @base-link-hover-color;
		}
	}
}
.tm-footer {
	position: relative;
	text-align: center;
	.uk-panel {
		&+.uk-panel {
			margin-top: @global-grid-gutter;
		}
	}
}


//	To-top scroller
//	====================================================================================================================================================
.tm-totop-scroller {
	display: block;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: @global-z-index;
	width: 20px;
	height: 20px;
	line-height: 20px;
	font-size: @base-body-font-size + 1px;
	color: @global-color;
	text-align: center;
	-webkit-transition: all linear 0.05s;
	transition: all linear 0.05s;
}

.tm-totop-scroller:after {
	content: "\f077";
	font-family: "FontAwesome";
}

.tm-totop-scroller:hover,
.tm-totop-scroller:focus { /* 1 */
	color: lighten(@global-color, 20%);
	font-size: @base-body-font-size + 2px;
	outline: none; /* 2 */
	text-decoration: none;
}

.tm-totop-scroller:active {
	color: darken(@global-color, 20%);
}


//	K2
//	====================================================================================================================================================

.tm-panel-k2 {
	.uk-subnav {
		>* {
			margin-top: 0;
		}
	}
}
#formLog.uk-alert {
	display: none;
}
#formLog.uk-alert.k2FormLogError {
	display: block;
}
.itemRatingForm {
	display: block;
	vertical-align: middle;
	line-height: 25px;
	float: left;
}
div.itemRatingForm {
	.formLogLoading {
		background: url(../images/k2_images/loading.gif) no-repeat left center;
		height: 25px;
		padding: 0 0 0 20px;
	}
}
.itemRatingList {
	background: transparent url(../images/k2_images/transparent_star.gif) left -1000px repeat-x;
	position: relative;
	float: left;
	width: 125px;
	height: 25px;
	overflow: hidden;
	list-style: none;
	margin: 0 15px;
	padding: 0;
	background-position: left top;
	a {
		&:hover {
			background: transparent url(../images/k2_images/transparent_star.gif) left -1000px repeat-x;
			background-position: left bottom;
		}
		position: absolute;
		top: 0;
		left: 0;
		text-indent: -1000px;
		height: 25px;
		line-height: 25px;
		outline: none;
		overflow: hidden;
		border: none;
		cursor: pointer;
	}
	.itemCurrentRating {
		background: transparent url(../images/k2_images/transparent_star.gif) left -1000px repeat-x;
		position: absolute;
		top: 0;
		left: 0;
		text-indent: -1000px;
		height: 25px;
		line-height: 25px;
		outline: none;
		overflow: hidden;
		border: none;
		cursor: pointer;
		z-index: 1;
		background-position: 0 center;
		margin: 0;
		padding: 0;
	}
	li {
		display: inline;
		background: none;
		padding: 0;
	}
	a.one-star {
		width: 20%;
		z-index: 6;
	}
	a.two-stars {
		width: 40%;
		z-index: 5;
	}
	a.three-stars {
		width: 60%;
		z-index: 4;
	}
	a.four-stars {
		width: 80%;
		z-index: 3;
	}
	a.five-stars {
		width: 100%;
		z-index: 2;
	}
}
span.siteRoot {
	display: none;
}


.tm-itemTags-k2 {
	li {
		a {
			color: @base-link-color;
			border-bottom: 2px solid transparent;
			-webkit-transition: border-bottom-color 1s;
			transition: border-bottom-color 1s;
			&:hover {
				border-bottom: 2px solid @base-link-hover-color;
			}
			&:before {
				color: @base-body-color;
				font-family: FontAwesome;
				font-weight: 400;
				font-style: normal;
				line-height: 1;
				-moz-osx-font-smoothing: grayscale;
				content: "\f292";
			}
		}
	}
}

.hook-thumbnail-caption(){
	background: rgba(255, 237, 237, 0.6);
}


.tm-featured-articles .tm-container-100 .itemView.itemIsFeatured {
    padding-right: @utility-container-padding-horizontal;
    padding-left: @utility-container-padding-horizontal;
}

// --- CSS added with JavaScript
.smallerFontSize {font-size:100%;line-height:inherit;}
.largerFontSize {font-size:150%;line-height:140%;}


.clr {
	clear: both;
	height: 0;
	line-height: 0;
	display: block;
	float: none;
	padding: 0;
	margin: 0;
	border: none;
}


//	Error
//	====================================================================================================================================================
.tm-error-icon {
	font-size: 250px;
}

.tm-error-headline {
	font-size: 100px;
}


//	Offline
//	====================================================================================================================================================
.tm-offline {
	width: 300px;
}