/*
 * Superbox component
 */

.superbox *,
.superbox :after,
.superbox :before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.superbox {
	&-list {
		display: inline-block;
		*display: inline;
		zoom: 1;
		width: 12.5%;
		padding: 5px;
		position: relative;

		&.active:before {
			content: "\f0d8";
			font-family: FontAwesome;
			display: block;
			position: absolute;
			left: 43%;
			bottom: -34px;
			z-index: 2;
			text-align: center;
			font-size: 45px;
			color: #222;
		}

		@media only screen and (min-width:320px) {
			width: 50%;
		}
		@media only screen and (min-width:486px) {
			width: 25%;
		}
		@media only screen and (min-width:768px) {
			width: 16.66666667%;
		}
		@media only screen and (min-width:1025px) {
			width: 12.5%;
		}
		@media only screen and (min-width:1824px) {
			width: 12.5%;
		}
	}

	&-img {
		max-width: 100%;
		width: 100%;
		cursor: pointer;
	}

	&-show {
		text-align: left;
		position: relative;
		background-color: #222;
		width: 100%;
		float: left;
		padding: 25px 0 12px 25px;
		display: none;
		margin: 5px 0;
	}

	&-current-img {
		max-width: 100%;
		float: left;
		padding-right: 25px;
		padding-bottom: 13px;
	}

	&-img:hover {
		opacity: .8;
	}

	&-float {
		float: left;
	}

	&-close {
		opacity: .7;
		cursor: pointer;
		position: absolute;
		top: 15px;
		right: 15px;
		-webkit-transition: all .1s linear 0s;
		transition: all .1s linear 0s;

		&:hover {
			opacity: 1;
		}
	}

	&-imageinfo {
		display: inline-block;
		max-width: 500px;
		color: #fff;
		padding: 0 25px 0 0;

		span {
			font-size: 13px;
			color: #a19994;
			margin-right: -2px;
			padding-top: 10px;
			display: inline-block;
			padding-bottom: 13px;
		}

		>:first-child {
			margin-bottom: 10px;
			font-weight: 700;
		}

		span p:last-child {
			margin-top: 30px;
		}
	}
}
