@import 'variables';

.body-overflow-hidden{
	overflow: hidden !important;
}

.ng-image-gallery{
	outline:none;

	*{
		outline:none;
	}

	.ng-image-gallery-thumbnails{
		&:after{
			content: "";
			width:0;
			height:0;
			display: block;
			visibility: hidden;
			clear:both;
		}

		.thumb{
			float:left;
			overflow:hidden;
			background-size:cover;
			background-position:center center;
			cursor: pointer;
			background-color: $thumb-background-color;
			position: relative;

			&:not(:last-child){
				margin-right: 5px;
				margin-bottom: 5px;
			}

			>.loader{
				position: absolute;
				left: 10%;
				top: 10%;
				right: 10%;
				bottom: 10%;
				animation: thumb-load 1.4s infinite linear;
				transform: translateZ(0);

				@keyframes thumb-load{
					0% {transform: rotate(0deg);}
					100% {transform: rotate(360deg);}
				}

				&:before{
					width: 50%;
					height: 50%;
					background: #ccc;
					border-radius: 100% 0 0 0;
					position: absolute;
					top: 0;
					left: 0;
					content: '';
				}
				&:after{
					background: $thumb-background-color;
					width: 75%;
					height: 75%;
					border-radius: 50%;
					content: '';
					margin: auto;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
				}
			}
		}
	}

	.ng-image-gallery-modal{
		position: fixed;
		z-index: 5000;
		top:0;
		right:0;
		bottom:0;
		left:0;
		overflow:hidden;

		// Animate when visible
		transition: opacity 0.3s ease-in-out;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;

		// ngAnimate classes
		&.ng-hide-add{
			opacity : 1;
		}

		&.ng-hide-add-active{
			opacity : 0;
		}

		&.ng-hide-remove{
			opacity : 0;
		}

		&.ng-hide-remove-active{
			opacity : 1;
		}

		// Gallery backdrop view
		.ng-image-gallery-backdrop{
			background-color : rgba(0,0,0,0.85);
			position : absolute;
			top:0;
			right:0;
			bottom:0;
			left:0;
			z-index: 1;
		}

		// Gallery content view
		.ng-image-gallery-content{
			position : absolute;
			top:0;
			right:0;
			bottom:0;
			left:0;
			z-index: 2;

			.actions-icons-container{
				position:absolute;
				left: 10px;
				top:20px;

				.delete-img{
					&.ng-leave-active{
						display: none;
					}

					&:hover{
						background-color: rgba(255,255,255,0.1);
					}

					&:before{
						content : "";
						display: block;
						position: absolute;
						top : 5px;
						right: 5px;
						bottom:5px;
						left:5px;
						background-size:100% 100%;
						background-repeat:no-repeat;
					}

					transition: background-color 0.3s ease-in-out;
					position: relative;
					display: inline-block;
					width:30px;
					height:30px;
					overflow: hidden;
					cursor: pointer;
					text-decoration: none;
					color:#fff;
					vertical-align: bottom;
				}

				.delete-img:before{
					background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTkgNTkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU5IDU5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4NCjxwYXRoIGQ9Ik01Mi41LDZIMzguNDU2Yy0wLjExLTEuMjUtMC40OTUtMy4zNTgtMS44MTMtNC43MTFDMzUuODA5LDAuNDM0LDM0Ljc1MSwwLDMzLjQ5OSwwSDIzLjVjLTEuMjUyLDAtMi4zMSwwLjQzNC0zLjE0NCwxLjI4OSAgQzE5LjAzOCwyLjY0MiwxOC42NTMsNC43NSwxOC41NDMsNkg2LjVjLTAuNTUyLDAtMSwwLjQ0Ny0xLDFzMC40NDgsMSwxLDFoMi4wNDFsMS45MTUsNDYuMDIxQzEwLjQ5Myw1NS43NDMsMTEuNTY1LDU5LDE1LjM2NCw1OSAgaDI4LjI3MmMzLjc5OSwwLDQuODcxLTMuMjU3LDQuOTA3LTQuOTU4TDUwLjQ1OSw4SDUyLjVjMC41NTIsMCwxLTAuNDQ3LDEtMVM1My4wNTIsNiw1Mi41LDZ6IE0yMC41LDUwYzAsMC41NTMtMC40NDgsMS0xLDEgIHMtMS0wLjQ0Ny0xLTFWMTdjMC0wLjU1MywwLjQ0OC0xLDEtMXMxLDAuNDQ3LDEsMVY1MHogTTMwLjUsNTBjMCwwLjU1My0wLjQ0OCwxLTEsMXMtMS0wLjQ0Ny0xLTFWMTdjMC0wLjU1MywwLjQ0OC0xLDEtMSAgczEsMC40NDcsMSwxVjUweiBNNDAuNSw1MGMwLDAuNTUzLTAuNDQ4LDEtMSwxcy0xLTAuNDQ3LTEtMVYxN2MwLTAuNTUzLDAuNDQ4LTEsMS0xczEsMC40NDcsMSwxVjUweiBNMjEuNzkyLDIuNjgxICBDMjIuMjQsMi4yMjMsMjIuNzk5LDIsMjMuNSwyaDkuOTk5YzAuNzAxLDAsMS4yNiwwLjIyMywxLjcwOCwwLjY4MWMwLjgwNSwwLjgyMywxLjEyOCwyLjI3MSwxLjI0LDMuMzE5SDIwLjU1MyAgQzIwLjY2NSw0Ljk1MiwyMC45ODgsMy41MDQsMjEuNzkyLDIuNjgxeiIgZmlsbD0iI0ZGRkZGRiIvPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
				}
			}

			.control-icons-container{
				position:absolute;
				right: 10px;
				top:20px;

				.ext-url,
				.close{
					&.ng-leave-active{
						display: none;
					}

					&:hover{
						background-color: rgba(255,255,255,0.1);
					}

					&:before{
						content : "";
						display: block;
						position: absolute;
						top : 5px;
						right: 5px;
						bottom:5px;
						left:5px;
						background-size:100% 100%;
						background-repeat:no-repeat;
					}

					transition: background-color 0.3s ease-in-out;
					position: relative;
					display: inline-block;
					width:30px;
					height:30px;
					overflow: hidden;
					cursor: pointer;
					text-decoration: none;
					color:#fff;
					vertical-align: bottom;
				}

				.ext-url:before{
					background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTkxLjYgNTkxLjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU5MS42IDU5MS42OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNNTgxLjQsMjA0Yy01LjcxMiwwLTEwLjIsNC40ODgtMTAuMiwxMC4ydjMyNi40YzAsMTYuOTMyLTEzLjY2OCwzMC42LTMwLjYsMzAuNkg1MWMtMTYuOTMyLDAtMzAuNi0xMy42NjgtMzAuNi0zMC42VjUxICAgIGMwLTE2LjkzMiwxMy42NjgtMzAuNiwzMC42LTMwLjZoMzI2LjRjNS43MTIsMCwxMC4yLTQuNDg4LDEwLjItMTAuMlMzODMuMTEyLDAsMzc3LjQsMEg1MUMyMi44NDgsMCwwLDIyLjg0OCwwLDUxdjQ4OS42ICAgIGMwLDI4LjE1MiwyMi44NDgsNTEsNTEsNTFoNDg5LjZjMjguMTUyLDAsNTEtMjIuODQ4LDUxLTUxVjIxNC4yQzU5MS42LDIwOC42OTIsNTg2LjkwOCwyMDQsNTgxLjQsMjA0eiIgZmlsbD0iI0ZGRkZGRiIvPg0KCQk8cGF0aCBkPSJNNTkxLjM5Niw4LjE2YzAtMC4yMDQtMC4yMDQtMC42MTItMC4yMDQtMC44MTZjMC0wLjQwOC0wLjIwNC0wLjYxMi0wLjQwOC0xLjAyYy0wLjIwNC0wLjQwOC0wLjQwOC0wLjYxMi0wLjYxMi0xLjAyICAgIGMtMC4yMDQtMC4yMDQtMC4yMDQtMC42MTItMC40MDgtMC44MTZjLTAuODE2LTEuMDItMS42MzItMi4wNC0yLjg1Ni0yLjg1NmMtMC4yMDQtMC4yMDQtMC42MTItMC4yMDQtMC44MTYtMC40MDggICAgYy0wLjQwOC0wLjIwNC0wLjYxMi0wLjQwOC0xLjAyLTAuNjEyYy0wLjQwOC0wLjIwNC0wLjYxMi0wLjIwNC0xLjAyLTAuNDA4Yy0wLjIwNCwwLTAuNjEyLTAuMjA0LTAuODE2LTAuMjA0ICAgIGMtMC42MTIsMC4yMDQtMS4yMjQsMC0xLjgzNiwwbDAsMEg0MzguNmMtNS43MTIsMC0xMC4yLDQuNDg4LTEwLjIsMTAuMnM0LjQ4OCwxMC4yLDEwLjIsMTAuMmgxMTguMTE2bC0zNzAuMjYsMzcwLjI2ICAgIGMtNC4wOCw0LjA4LTQuMDgsMTAuNDA0LDAsMTQuNDg0YzIuMDQsMi4wNCw0LjY5MiwzLjA2LDcuMTQsMy4wNmMyLjQ0OCwwLDUuMzA0LTEuMDIsNy4xNC0zLjA2TDU3MS4yLDM0Ljg4NFYxNTMgICAgYzAsNS43MTIsNC40ODgsMTAuMiwxMC4yLDEwLjJzMTAuMi00LjQ4OCwxMC4yLTEwLjJWMTAuMkM1OTEuNiw5LjU4OCw1OTEuMzk2LDguOTc2LDU5MS4zOTYsOC4xNnoiIGZpbGw9IiNGRkZGRkYiLz4NCgkJPHBhdGggZD0iTTUxLDQ1LjljLTIuODU2LDAtNS4xLDIuMjQ0LTUuMSw1LjF2MTQyLjhjMCwyLjg1NiwyLjI0NCw1LjEsNS4xLDUuMXM1LjEtMi4yNDQsNS4xLTUuMVY1Ni4xaDEzNy43ICAgIGMyLjg1NiwwLDUuMS0yLjI0NCw1LjEtNS4xcy0yLjI0NC01LjEtNS4xLTUuMUg1MXoiIGZpbGw9IiNGRkZGRkYiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==);
				}

				.close:before{
					background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTJweCIgdmVyc2lvbj0iMS4xIiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0Ij4NCiAgPGc+DQogICAgPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTI4Ljk0MSwzMS43ODZMMC42MTMsNjAuMTE0Yy0wLjc4NywwLjc4Ny0wLjc4NywyLjA2MiwwLDIuODQ5YzAuMzkzLDAuMzk0LDAuOTA5LDAuNTksMS40MjQsMC41OSAgIGMwLjUxNiwwLDEuMDMxLTAuMTk2LDEuNDI0LTAuNTlsMjguNTQxLTI4LjU0MWwyOC41NDEsMjguNTQxYzAuMzk0LDAuMzk0LDAuOTA5LDAuNTksMS40MjQsMC41OWMwLjUxNSwwLDEuMDMxLTAuMTk2LDEuNDI0LTAuNTkgICBjMC43ODctMC43ODcsMC43ODctMi4wNjIsMC0yLjg0OUwzNS4wNjQsMzEuNzg2TDYzLjQxLDMuNDM4YzAuNzg3LTAuNzg3LDAuNzg3LTIuMDYyLDAtMi44NDljLTAuNzg3LTAuNzg2LTIuMDYyLTAuNzg2LTIuODQ4LDAgICBMMzIuMDAzLDI5LjE1TDMuNDQxLDAuNTljLTAuNzg3LTAuNzg2LTIuMDYxLTAuNzg2LTIuODQ4LDBjLTAuNzg3LDAuNzg3LTAuNzg3LDIuMDYyLDAsMi44NDlMMjguOTQxLDMxLjc4NnoiLz4NCiAgPC9nPg0KPC9zdmc+DQo=);
				}
			}


			.prev,
			.next{
				position:absolute;
				top: 50%;
				margin-top:-25px;

				width:50px;
				height:50px;
				background-size:100% 100%;
				background-repeat:no-repeat;
				overflow: hidden;
				cursor: pointer;

				&.bubbles-on{
					top:calc((100% - 50px) / 2);
				}

				@media screen and (max-width:600px){
					margin-top:-15px;
					width:30px;
					height:30px;
				}
			}

			.prev{
				left: 0px;
				background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDc3LjE3NSA0NzcuMTc1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NzcuMTc1IDQ3Ny4xNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPg0KPGc+DQoJPHBhdGggZD0iTTE0NS4xODgsMjM4LjU3NWwyMTUuNS0yMTUuNWM1LjMtNS4zLDUuMy0xMy44LDAtMTkuMXMtMTMuOC01LjMtMTkuMSwwbC0yMjUuMSwyMjUuMWMtNS4zLDUuMy01LjMsMTMuOCwwLDE5LjFsMjI1LjEsMjI1ICAgYzIuNiwyLjYsNi4xLDQsOS41LDRzNi45LTEuMyw5LjUtNGM1LjMtNS4zLDUuMy0xMy44LDAtMTkuMUwxNDUuMTg4LDIzOC41NzV6IiBmaWxsPSIjRkZGRkZGIi8+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==);
			}

			.next{
				right: 0px;
				background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDc3LjE3NSA0NzcuMTc1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NzcuMTc1IDQ3Ny4xNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPg0KPGc+DQoJPHBhdGggZD0iTTM2MC43MzEsMjI5LjA3NWwtMjI1LjEtMjI1LjFjLTUuMy01LjMtMTMuOC01LjMtMTkuMSwwcy01LjMsMTMuOCwwLDE5LjFsMjE1LjUsMjE1LjVsLTIxNS41LDIxNS41ICAgYy01LjMsNS4zLTUuMywxMy44LDAsMTkuMWMyLjYsMi42LDYuMSw0LDkuNSw0YzMuNCwwLDYuOS0xLjMsOS41LTRsMjI1LjEtMjI1LjFDMzY1LjkzMSwyNDIuODc1LDM2NS45MzEsMjM0LjI3NSwzNjAuNzMxLDIyOS4wNzV6ICAgIiBmaWxsPSIjRkZGRkZGIi8+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==);
			}

			.galleria{
				position:absolute;
				top:0;
				bottom:0;
				left:80px;
				right:80px;
				overflow: hidden;
				display:flex;
				flex-direction: column;
				align-items: center;

				.galleria-images{
					position: relative;
					flex: 1;
					width: 100%;

					.galleria-image{
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						max-width: 100%;
						max-height: 100%;

						// Animate when visible
						backface-visibility: hidden;
						-webkit-backface-visibility: hidden;

						// Prevent user selection and highlighting
						-webkit-touch-callout: none;
						-webkit-user-select: none;
						-khtml-user-select: none;
						-moz-user-select: none;
						-ms-user-select: none;
						user-select: none;
					}

					/*****************************************************/

					// image fade animation
					&.img-anim-fade{
						.galleria-image{
							&.ng-enter{
								transition: opacity 0.3s ease-in-out;
								opacity : 0;
							}
							&.ng-enter-active{
								opacity : 1;
							}
							&.ng-leave-active{
								opacity : 0;
							}
						}
					}

					// image fadeup animation
					&.img-anim-fadeup{
						.galleria-image{
							&.ng-enter{
								transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
								opacity : 0;
								transform: scale(0.98);
							}
							&.ng-enter-active{
								opacity : 1;
								transform: scale(1);
							}
							&.ng-leave-active{
								opacity : 0;
							}
						}
					}

					// image zoom animation
					&.img-anim-zoom{
						.galleria-image{
							&.ng-enter{
								transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
								opacity : 0;
								transform: scale(0);
							}
							&.ng-enter-active{
								opacity : 1;
								transform: scale(1);
							}
							&.ng-leave{
								transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
							}
							&.ng-leave-active{
								opacity : 0;
								transform: scale(0);
							}
						}
					}

					// image slide animation
					&.img-anim-slide{
						&.img-move-dir-backward{
							.galleria-image{
								&.ng-enter{
									transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
									transform: translateX(-100%);
									opacity : 0;
								}
								&.ng-enter-active{
									transform: translateX(0px);
									opacity : 1;
								}
								&.ng-leave{
									transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
								}
								&.ng-leave-active{
									opacity : 0;
									transform: translateX(100%);
								}
							}
						}
						&.img-move-dir-forward{
							.galleria-image{
								&.ng-enter{
									transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
									transform: translateX(100%);
									opacity : 0;
								}
								&.ng-enter-active{
									transform: translateX(0px);
									opacity : 1;
								}
								&.ng-leave{
									transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
								}
								&.ng-leave-active{
									opacity : 0;
									transform: translateX(-100%);
								}
							}
						}
					}

					// image pop animation
					&.img-anim-pop{
						&.img-move-dir-backward{
							.galleria-image{
								&.ng-enter{
									transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
									transform: translateX(-100%) scale(0,0);
									opacity : 0;
								}
								&.ng-enter-active{
									transform: translateX(0px) scale(1,1);
									opacity : 1;
								}
								&.ng-leave{
									transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
								}
								&.ng-leave-active{
									opacity : 0;
									transform: translateX(100%) scale(0,0);
								}
							}
						}
						&.img-move-dir-forward{
							.galleria-image{
								&.ng-enter{
									transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
									transform: translateX(100%) scale(0,0);
									opacity : 0;
								}
								&.ng-enter-active{
									transform: translateX(0px) scale(1,1);
									opacity : 1;
								}
								&.ng-leave{
									transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
								}
								&.ng-leave-active{
									opacity : 0;
									transform: translateX(-100%) scale(0,0);
								}
							}
						}
					}

					// image revolve animation
					&.img-anim-revolve{
						&.img-move-dir-forward{
							.galleria-image{
								&.ng-enter{
									animation: revolve-in-forward;
									animation-duration: 0.3s;
								}
								&.ng-leave{
									animation: revolve-out-forward;
									animation-duration: 0.3s;
								}
							}
						}
						&.img-move-dir-backward{
							.galleria-image{
								&.ng-enter{
									animation: revolve-in-backward;
									animation-duration: 0.3s;
								}
								&.ng-leave{
									animation: revolve-out-backward;
									animation-duration: 0.3s;
								}
							}
						}
					}
				}

				.galleria-title-description-wrapper{
					flex: none;

					>div{
						padding: 20px 0;
						text-align: center;
						color: #fff;

						.title{
							font-size: 18px;
							margin-bottom: 10px;
						}

						.desc{
							font-size: 12px;
							line-height: 1.3;
						}
					}
				}

				.galleria-bubbles-wrapper{
					flex: none;
					margin: 20px 0;
					overflow: hidden;
					width: 100%;
					font-size: 0;

					>.galleria-bubbles{
						display: block;
						text-align: center;
						white-space: nowrap;
						transition: margin-left 0.3s;

						span{
							flex: none;
							position:relative;
							display: inline-block;
							margin:0 5px;
							cursor: pointer;
							overflow: hidden;
							border-radius: 100%;
							background-size: cover;
							background-position: center center;
							vertical-align: middle;
							background-color: $bubble-background-color;

							&.ng-leave-active{
								display: none;
							}

							&:not(.img-bubble){
								background-color : rgba(255,255,255,0.5);
								border-radius:100%;
								overflow: hidden;
								transition: all 0.3s ease-in-out;

								&.active{
									background-color : #fff;
								}
							}

							&.img-bubble{
								box-sizing:border-box;
								border:1px solid transparent;
								transition: border 0.3s ease-in-out, margin 0.3s ease-in-out;

								&.active{
									border:1px solid #fff;
								}
							}
						}
					}
				}
			}
		}


		// Image Error
		.ng-image-gallery-errorplaceholder{
			position : absolute;
			top: 0;
			bottom: 0;
			left: 80px;
			right: 80px;
			z-index: 1;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		// Image loading animation view
		.ng-image-gallery-loader{
			position : absolute;
			top:0;
			right:0;
			bottom:0;
			left:0;
			z-index: 3;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			// Spinner from http://tobiasahlin.com/spinkit/
			.spinner{
				flex:none;
				width: 50px;
				height: 50px;
				text-align: center;
				font-size: 10px;

				>div{
					background-color: #fff;
					height: 100%;
					width: 7px;
					margin: 0 3px 0 0;
					display: inline-block;

					-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
					animation: sk-stretchdelay 1.2s infinite ease-in-out;
				}

				.rect2{
					-webkit-animation-delay: -1.1s;
					animation-delay: -1.1s;
				}

				.rect3{
					-webkit-animation-delay: -1.0s;
					animation-delay: -1.0s;
				}

				.rect4{
					-webkit-animation-delay: -0.9s;
					animation-delay: -0.9s;
				}

				.rect5{
					-webkit-animation-delay: -0.8s;
					animation-delay: -0.8s;
				}
			}

		}
	}


	/*****************************************************************
								INLINE GALLERY
	/*****************************************************************/
	&.inline{

		// Convert modal to inline dic
		.ng-image-gallery-modal{
			position: relative;
			z-index: 1;
			overflow:hidden;
			width:100%;
			height:300px;

			.ng-image-gallery-content{
				.actions-icons-container{
					top:0;

					.delete-img{
						margin:0;

						&:before{
							background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTkgNTkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU5IDU5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNNTIuNSw2SDM4LjQ1NmMtMC4xMS0xLjI1LTAuNDk1LTMuMzU4LTEuODEzLTQuNzExQzM1LjgwOSwwLjQzNCwzNC43NTEsMCwzMy40OTksMEgyMy41Yy0xLjI1MiwwLTIuMzEsMC40MzQtMy4xNDQsMS4yODkNCglDMTkuMDM4LDIuNjQyLDE4LjY1Myw0Ljc1LDE4LjU0Myw2SDYuNWMtMC41NTIsMC0xLDAuNDQ3LTEsMXMwLjQ0OCwxLDEsMWgyLjA0MWwxLjkxNSw0Ni4wMjFDMTAuNDkzLDU1Ljc0MywxMS41NjUsNTksMTUuMzY0LDU5DQoJaDI4LjI3MmMzLjc5OSwwLDQuODcxLTMuMjU3LDQuOTA3LTQuOTU4TDUwLjQ1OSw4SDUyLjVjMC41NTIsMCwxLTAuNDQ3LDEtMVM1My4wNTIsNiw1Mi41LDZ6IE0yMC41LDUwYzAsMC41NTMtMC40NDgsMS0xLDENCglzLTEtMC40NDctMS0xVjE3YzAtMC41NTMsMC40NDgtMSwxLTFzMSwwLjQ0NywxLDFWNTB6IE0zMC41LDUwYzAsMC41NTMtMC40NDgsMS0xLDFzLTEtMC40NDctMS0xVjE3YzAtMC41NTMsMC40NDgtMSwxLTENCglzMSwwLjQ0NywxLDFWNTB6IE00MC41LDUwYzAsMC41NTMtMC40NDgsMS0xLDFzLTEtMC40NDctMS0xVjE3YzAtMC41NTMsMC40NDgtMSwxLTFzMSwwLjQ0NywxLDFWNTB6IE0yMS43OTIsMi42ODENCglDMjIuMjQsMi4yMjMsMjIuNzk5LDIsMjMuNSwyaDkuOTk5YzAuNzAxLDAsMS4yNiwwLjIyMywxLjcwOCwwLjY4MWMwLjgwNSwwLjgyMywxLjEyOCwyLjI3MSwxLjI0LDMuMzE5SDIwLjU1Mw0KCUMyMC42NjUsNC45NTIsMjAuOTg4LDMuNTA0LDIxLjc5MiwyLjY4MXoiLz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K);
						}
					}
				}

				.control-icons-container{
					top:0;

					.ext-url{
						margin:0;

						&:before{
							background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGZpbGw9IiM5OTk5OTkiIGQ9Ik01MDMuMTczLDE3Ni41NTJjLTQuOTQ0LDAtOC44MjgsMy44ODQtOC44MjgsOC44Mjh2MjgyLjQ4M2MwLDE0LjY1My0xMS44MjksMjYuNDgyLTI2LjQ4MiwyNi40ODJINDQuMTM4DQoJCQljLTE0LjY1MywwLTI2LjQ4Mi0xMS44MjktMjYuNDgyLTI2LjQ4MlY0NC4xMzhjMC0xNC42NTMsMTEuODI5LTI2LjQ4MiwyNi40ODItMjYuNDgyaDI4Mi40ODNjNC45NDMsMCw4LjgyNy0zLjg4NCw4LjgyNy04LjgyOA0KCQkJUzMzMS41NjQsMCwzMjYuNjIxLDBINDQuMTM4QzE5Ljc3NCwwLDAsMTkuNzc0LDAsNDQuMTM4djQyMy43MjVDMCw0OTIuMjI3LDE5Ljc3NCw1MTIsNDQuMTM4LDUxMmg0MjMuNzI1DQoJCQlDNDkyLjIyNyw1MTIsNTEyLDQ5Mi4yMjcsNTEyLDQ2Ny44NjJWMTg1LjM3OUM1MTIsMTgwLjYxMiw1MDcuOTM5LDE3Ni41NTIsNTAzLjE3MywxNzYuNTUyeiIvPg0KCQk8cGF0aCBmaWxsPSIjOTk5OTk5IiBkPSJNNTExLjgyMyw3LjA2MmMwLTAuMTc2LTAuMTc3LTAuNTMtMC4xNzctMC43MDZjMC0wLjM1My0wLjE3Ni0wLjUzLTAuMzUzLTAuODgzcy0wLjM1NC0wLjUzLTAuNTMtMC44ODMNCgkJCWMtMC4xNzYtMC4xNzYtMC4xNzYtMC41My0wLjM1My0wLjcwNmMtMC43MDYtMC44ODMtMS40MTItMS43NjYtMi40NzItMi40NzJjLTAuMTc3LTAuMTc3LTAuNTI5LTAuMTc3LTAuNzA2LTAuMzUzDQoJCQljLTAuMzU0LTAuMTc3LTAuNTMtMC4zNTQtMC44ODMtMC41M2MtMC4zNTQtMC4xNzctMC41My0wLjE3Ny0wLjg4My0wLjM1M2MtMC4xNzcsMC0wLjUzLTAuMTc3LTAuNzA2LTAuMTc3DQoJCQljLTAuNTMsMC4xNzctMS4wNiwwLTEuNTksMGwwLDBIMzc5LjU4NmMtNC45NDMsMC04LjgyNywzLjg4NC04LjgyNyw4LjgyOHMzLjg4NCw4LjgyOCw4LjgyNyw4LjgyOEg0ODEuODFMMTYxLjM2OCwzMzguMDk3DQoJCQljLTMuNTMxLDMuNTMxLTMuNTMxLDkuMDA0LDAsMTIuNTM1YzEuNzY2LDEuNzY2LDQuMDYxLDIuNjQ4LDYuMTc5LDIuNjQ4YzIuMTE5LDAsNC41OS0wLjg4Myw2LjE4LTIuNjQ4TDQ5NC4zNDUsMzAuMTl2MTAyLjIyNA0KCQkJYzAsNC45NDMsMy44ODQsOC44MjcsOC44MjgsOC44MjdjNC45NDMsMCw4LjgyNy0zLjg4NCw4LjgyNy04LjgyN1Y4LjgyOEM1MTIsOC4yOTgsNTExLjgyMyw3Ljc2OCw1MTEuODIzLDcuMDYyeiIvPg0KCQk8cGF0aCBmaWxsPSIjOTk5OTk5IiBkPSJNNDQuMTM4LDM5LjcyNGMtMi40NzIsMC00LjQxNCwxLjk0Mi00LjQxNCw0LjQxNHYxMjMuNTg2YzAsMi40NzIsMS45NDIsNC40MTQsNC40MTQsNC40MTQNCgkJCWMyLjQ3MiwwLDQuNDE0LTEuOTQyLDQuNDE0LTQuNDE0VjQ4LjU1MmgxMTkuMTcyYzIuNDcyLDAsNC40MTQtMS45NDIsNC40MTQtNC40MTRjMC0yLjQ3Mi0xLjk0Mi00LjQxNC00LjQxNC00LjQxNEg0NC4xMzh6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=);
						}
					}
				}

				.prev{
					background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZmlsbD0iIzk5OTk5OSIgZD0iTTE1NS43ODQsMjU1Ljk4NkwzODcuMDEyLDI0Ljc1OWM1LjY4Ny01LjY4Nyw1LjY4Ny0xNC44MDcsMC0yMC40OTRjLTUuNjg4LTUuNjg3LTE0LjgwNy01LjY4Ny0yMC40OTQsMA0KCQlMMTI0Ljk4OSwyNDUuNzkzYy01LjY4Nyw1LjY4Ny01LjY4NywxNC44MDcsMCwyMC40OTRsMjQxLjUyOCwyNDEuNDIxYzIuNzksMi43OSw2LjU0NSw0LjI5MiwxMC4xOTMsNC4yOTINCgkJczcuNDAzLTEuMzk1LDEwLjE5My00LjI5MmM1LjY4Ny01LjY4Nyw1LjY4Ny0xNC44MDcsMC0yMC40OTRMMTU1Ljc4NCwyNTUuOTg2eiIvPg0KPC9nPg0KPC9zdmc+DQo=);
				}

				.next{
					background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZmlsbD0iIzk5OTk5OSIgZD0iTTM4Ny4wNTgsMjQ1Ljc5M0wxNDUuNTMsNC4yNjVjLTUuNjg3LTUuNjg3LTE0LjgwNy01LjY4Ny0yMC40OTQsMHMtNS42ODcsMTQuODA3LDAsMjAuNDk0bDIzMS4yMjgsMjMxLjIyOA0KCQlMMTI1LjAzNiw0ODcuMjE0Yy01LjY4Nyw1LjY4OC01LjY4NywxNC44MDgsMCwyMC40OTRjMi43OSwyLjc5LDYuNTQ1LDQuMjkyLDEwLjE5Myw0LjI5MmMzLjY0OCwwLDcuNDAzLTEuMzk1LDEwLjE5My00LjI5Mg0KCQlMMzg2Ljk1LDI2Ni4xOEMzOTIuNjM3LDI2MC42MDEsMzkyLjYzNywyNTEuMzczLDM4Ny4wNTgsMjQ1Ljc5M3oiLz4NCjwvZz4NCjwvc3ZnPg0K);
				}

				.prev, .next{
					margin-top: -15px;
					width: 30px;
					height: 30px;
				}

				.galleria{
					.galleria-bubbles{
						span{
							&:not(.img-bubble){
								background-color : rgba(0,0,0,0.5);

								&.active{
									background-color : #333;
								}
							}

							&.img-bubble{
								&.active{
									border:1px solid #000;
								}
							}
						}
					}
				}
			}

			.ng-image-gallery-loader{
				.spinner{
					> div{
						background-color: #999;
					}
				}
			}
		}
	}
}