// --------------------------------------------------------------------------------------------
// INSTAGRAM
// --------------------------------------------------------------------------------------------

.instagram-widget {
	position: relative;

	&.instagram-with-error {

		img {
			width: 100%;
		}

		&.loading {
			-webkit-animation: semi-fade-out .4s infinite alternate linear;
			animation: semi-fade-out .4s infinite alternate linear;
		}
	}

	.instagram-content {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		display: flexbox;
		display: flex;
		display: -webkit-flex;
		display: -ms-flex;
		justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
	}

	.instagram-content-inner {
		z-index: 5;
		background: rgb(255, 255, 255);
		outline: 5px solid rgba(255, 255, 255, 0.5);
		max-width: 300px;
		width: 100%;
		padding: 25px;
	}

	.instagram-pics {
		
		li {
			position: relative;
			max-width: 33.33333%;
			-webkit-flex-basis: 33.33333%;
			-ms-flex-basis: 33.33333%;
			flex-basis: 33.33333%;
			margin-bottom: 0;
			text-align: center;
			-webkit-backface-visibility: hidden;
			-ms-backface-visibility: hidden;
			backface-visibility: hidden;

			a {
				position: absolute;
				top:0;
				left:0;
				width: 100%;
				height: 100%;
				z-index: 3;
			}

			.wrapp-pics {
				position: relative;
				overflow: hidden;
			}

			.hover-mask {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				width: 100%;
				height: 100%;
				-webkit-transition: all 0.3s;
				transition: all 0.3s; 
				
				-webkit-backface-visibility:hidden;
				-ms-backface-visibility:hidden;
				backface-visibility:hidden;

				&:after {
					@include font-icon($icon-angle-right);
					font-size:40px;
					position: absolute;
					top: 50%;
					left: -20px;
					width: 100%;
					color: white;
					visibility:hidden;
					opacity:0;
					transform:translateY(-50%);
					-webkit-transform:translateY(-50%);
					-ms-transform:translateY(-50%);
					
					-webkit-transition: all 0.3s;
					transition: all 0.3s; 
				}
			}

			&:hover {

				.hover-mask {
					background-color: rgba(0,0,0,0.7);

					&:after {
						visibility:visible;
						opacity:1;
						left: 0;
					}
				}
			}
		}
		
		@include clear-element;
	}

	.clear {
		margin-top: 5px;
		
		a {
			font-size: 13px;
			letter-spacing: 0.3px;
		
			&:before {
				content: "\e609";
				display: inline-block;
				vertical-align:middle;
				margin-right: 5px;
				font-family: 'simple-line-icons';
			}
		}
	}

	&.instagram-rounded {

		.instagram-pics {

			li {

				.wrapp-pics,
				.hover-mask {
					border-radius: 50%;
				}
			}
		}
	}

	&.instagram-slider {

		.instagram-pics {

			li {
				-webkit-flex-basis: 100%;
				-ms-flex-basis: 100%;
				flex-basis: 100%;
				max-width: 100%;
			}
		}
	}

	&.instagram-with-spaces {

		.instagram-pics {
			margin: -5px;

			li {
				padding: 5px;
			}
		}

		&.instagram-slider {
			margin-left: -10px;
			margin-right: -10px;

			.instagram-pics {
				margin: 0;

				li {
				   padding: 10px;
				}
			}
		}
	}

	&.instagram-grid {

		.instagram-pics {
			margin: -10px;

			li {
				padding: 10px;
			}
		}
	}

	&:not(.instagram-slider) {

		.instagram-pics {
			display: flexbox;
			display: flex;
			display: -webkit-flex;
			display: -ms-flex;
			flex-direction: row;
			-webkit-flex-direction: row;
			-ms-flex-direction: row;
			-webkit-align-items: stretch;
			-ms-flex-align: stretch;
			align-items: stretch;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-justify-content: flex-start;
			-ms-justify-content: flex-start;
			justify-content: flex-start;
		}
	}
}

.vc_row-no-padding {

	.instagram-grid,
	.instagram-with-spaces {

		.instagram-pics {
			margin: 0;
		}
	}
}

@each $row in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {

	.instagram-per-row-#{$row} {
		
		.instagram-pics {

			li {
				-webkit-flex-basis: 100% / $row;
				-ms-flex-basis: 100% / $row;
				flex-basis: 100% / $row;
				max-width: 100% / $row;
			}
		}
	}
}

// ------------------------------------------
// SPACE IN SIDE-BAR
// ------------------------------------------

.basel-instagram {

	.instagram-pics {
		margin:-3px;
	}

	li {
		padding:3px;
	}
} 

// ------------------------------------------
// INSTAGRAM WITH API
// ------------------------------------------

.instagram-widget {

	&.data-source-api {

		.wrapp-pics {
			padding-bottom: 100%;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
	}
}