//Imports

//Variables

//Mixins

%box-sizing-border-box {
	box-sizing: border-box;
}

#slb_viewer_wrap {
	.slb_theme_slb_baseline {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99999;
		text-align: center;
		line-height: 0;
		color:#000;
		font: {
			family: arial, verdana, sans-serif;
			size: 12px;
		}

		//Reset
		* {
			margin: 0;
			padding: 0;
			line-height: 1.4em;
			text-align: left;
			vertical-align: baseline;
			white-space: normal;
			outline: none;
			border: 0px;
			background: none;
			opacity: 1;
			width: auto;
			height: auto;
			position: static;
			float: none;
			clear: none;
			[dir="rtl"] & {
				text-align: right;
			}
		}

		//General

		a img {
			border: none;
		}

		.slb_viewer_layout {
			@extend %box-sizing-border-box;
			z-index: 2;
			position: absolute;
			width: 100%;
			text-align: center;
		}

		.slb_viewer_overlay {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
			min-height: 105%;
			min-width: 100%;
			background-color: #000;
		}

		.slb_container {
			@extend %box-sizing-border-box;
			position: relative;
			display: inline-block;
			background-color: #fff;
			margin: 0 auto;
			padding: 16px;
		}

		.slb_loading {
			background: url('../images/loading.gif') center center no-repeat;
			position: absolute;
			left: 0%;
			top: 0;
			width: 100%;
			height: 100%;
			min-width: 31px;
			min-height: 31px;
			text-align: center;
			line-height: 0;
			display: none;
		}

		.slb_template_tag_ui {
			cursor: pointer;
		}

		//UI

		  //Content
		.slb_content {
			position: relative;
		}

		.slb_details {
			margin: 0 auto;
			text-align: left;

			.inner {
				display: table;
				width: 100%;
			}
			.slb_data {
				display: table-caption;
			}
		}

		.slb_template_tag_item_content > * {
			width: 100%;
			height: 100%;
		}

		/* Single */
		&.item_single {
			.slb_group_status,
			.slb_nav,
			.slb_slideshow {
				display: none;
			}
		}
		/* Loading */
		&.loading {
			.slb_loading {
				display: block;
			}

			.slb_template_tag_ui {
				opacity: 0;
			}
		}

		//Media

		//Small screen
		@media screen and (max-width: 480px) {
			%vsizing {
				min-height: 100%;
				min-width: 320px;
				width: 100%;
			}
			@extend %vsizing;
			.slb_viewer_layout {
				@extend %vsizing;
				display: block;
			}
			.slb_container {
				@extend %vsizing;
				max-width: 100%;
				margin: 0;
				padding: 5px;
				position: absolute;
				top: 0;
				left: 0;
				.slb_content  {
					img, iframe, object, .slb_inner {
						max-width: 100%;
					}
					img {
						height: auto;
					}
				}
			}
		}
	}
}