//  =================
//      Imports
//  =================

@import '../../assets/base/color_variables';    // Color Variables
@import '../../assets/base/fonticons';              // Fonticons Variables
@import '../../assets/base/urls';                   // URLS Variables
@import '../../assets/base/utilities_variables';  // Utilities Variables

/*Basic*/
.my-gallery {
	img {
		width: 100%;
		height: auto;
	}
	figcaption {
		display: none;
	}
}
/*Advance   */
.demo-gallery {
	width: 100%;
	height: auto;
	float: left;
	a {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-touch-callout: none;
		display: block;
		float: left;
		line-height: 0;
		img {
			width: 100%;
			padding: 4px;
		}
	}
	figure {
		display: none;
	}
}
a.demo-gallery__img--main {
	width: auto;
	height: auto;
}
.demo-gallery__title {
	line-height: 14px;
	font-size: 14px;
	opacity: 0.8;
	margin-top: $m-5;
	width: 100%;
	float: left;
}
.share-buttons {
	h2 {
		text-align: $align-center;
		border: 0;
	}
	text-align: $align-center;
	position: $pos-rel;
	margin: $m-0 $m-0 24px;
	a {
		-moz-border-radius: 2px;
		border-radius: 2px;
		display: inline-block;
		padding: $p-10 $p-20;
		margin: $m-10;
		color: $white;
		text-decoration: none;
		background: $color_571;
		font-size: 16px;
		line-height: 22px;
		cursor: pointer;
		&:hover {
			opacity: 0.7;
		}
	}
}
#tweet {
	background: $color_572;
}
#like {
	background: $color_573;
}
#gplus {
	background: $color_574;
}
.img-1 {
	width: 33.333333%;
}
.img-2 {
	width: 33.333333%;
}
.img-3 {
	width: 33.333333%;
}
.img-4 {
	width: 66.666667%;
}
.img-5 {
	width: 33.333333%;
}
.img-6 {
	width: 33.333333%;
}
.img-7 {
	width: 33.333333%;
}
@media (max-width: 767px) {
	.img-1 {
		width: 100%;
	}
	.img-2 {
		width: 50%;
	}
	.img-3 {
		width: 50%;
	}
	.img-4 {
		width: 100%;
	}
	.img-5 {
		width: 50%;
	}
	.img-6 {
		width: 50%;
	}
	.img-7 {
		width: 100%;
	}
}
@media (max-width: 575px) {
	.img-1 {
		width: 100%;
	}
	.img-2 {
		width: 100%;
	}
	.img-3 {
		width: 100%;
	}
	.img-4 {
		width: 100%;
	}
	.img-5 {
		width: 100%;
	}
	.img-6 {
		width: 100%;
	}
	.img-7 {
		width: 100%;
	}
}