commit 342fa48b2eecf7e344dd033f32daa73b7408c669
Author: Olga Brani <olgabrani@grnet.gr>
Date:   Thu Aug 29 15:29:21 2013 +0300

    new ui: use of Magnific Popup as lightbox plugin

diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
index 22527e1..9686348 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
@@ -330,6 +330,25 @@ $(document).ready(function(){
         dictRemoveFile: "snf-Remove file",
     };
 
+
+    $('.main .files').magnificPopup({
+        delegate: 'a.show.image',
+        type: 'image',
+        tLoading: 'Loading image #%curr%...',
+        mainClass: 'mfp-img-mobile',
+        gallery: {
+            enabled: true,
+            navigateByImgClick: true,
+            preload: [0,1] // Will preload 0 - before current, and 1 after the current image
+        },
+        image: {
+            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
+            titleSrc: function(item) {
+                return item.el.data('title');
+            }
+        }
+    });
+
 })
 
 
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/jquery.magnific-popup.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/jquery.magnific-popup.js
new file mode 100644
index 0000000..6ae0f3c
--- /dev/null
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/jquery.magnific-popup.js
@@ -0,0 +1,2026 @@
+/*! Magnific Popup - v0.9.5 - 2013-08-21
+* http://dimsemenov.com/plugins/magnific-popup/
+* Copyright (c) 2013 Dmitry Semenov; */
+;(function($) {
+
+/*>>core*/
+/**
+ * 
+ * Magnific Popup Core JS file
+ * 
+ */
+
+
+/**
+ * Private static constants
+ */
+var CLOSE_EVENT = 'Close',
+	BEFORE_CLOSE_EVENT = 'BeforeClose',
+	AFTER_CLOSE_EVENT = 'AfterClose',
+	BEFORE_APPEND_EVENT = 'BeforeAppend',
+	MARKUP_PARSE_EVENT = 'MarkupParse',
+	OPEN_EVENT = 'Open',
+	CHANGE_EVENT = 'Change',
+	NS = 'mfp',
+	EVENT_NS = '.' + NS,
+	READY_CLASS = 'mfp-ready',
+	REMOVING_CLASS = 'mfp-removing',
+	PREVENT_CLOSE_CLASS = 'mfp-prevent-close';
+
+
+/**
+ * Private vars 
+ */
+var mfp, // As we have only one instance of MagnificPopup object, we define it locally to not to use 'this'
+	MagnificPopup = function(){},
+	_isJQ = !!(window.jQuery),
+	_prevStatus,
+	_window = $(window),
+	_body,
+	_document,
+	_prevContentType,
+	_wrapClasses,
+	_currPopupType;
+
+
+/**
+ * Private functions
+ */
+var _mfpOn = function(name, f) {
+		mfp.ev.on(NS + name + EVENT_NS, f);
+	},
+	_getEl = function(className, appendTo, html, raw) {
+		var el = document.createElement('div');
+		el.className = 'mfp-'+className;
+		if(html) {
+			el.innerHTML = html;
+		}
+		if(!raw) {
+			el = $(el);
+			if(appendTo) {
+				el.appendTo(appendTo);
+			}
+		} else if(appendTo) {
+			appendTo.appendChild(el);
+		}
+		return el;
+	},
+	_mfpTrigger = function(e, data) {
+		mfp.ev.triggerHandler(NS + e, data);
+
+		if(mfp.st.callbacks) {
+			// converts "mfpEventName" to "eventName" callback and triggers it if it's present
+			e = e.charAt(0).toLowerCase() + e.slice(1);
+			if(mfp.st.callbacks[e]) {
+				mfp.st.callbacks[e].apply(mfp, $.isArray(data) ? data : [data]);
+			}
+		}
+	},
+	_setFocus = function() {
+		(mfp.st.focus ? mfp.content.find(mfp.st.focus).eq(0) : mfp.wrap).focus();
+	},
+	_getCloseBtn = function(type) {
+		if(type !== _currPopupType || !mfp.currTemplate.closeBtn) {
+			mfp.currTemplate.closeBtn = $( mfp.st.closeMarkup.replace('%title%', mfp.st.tClose ) );
+			_currPopupType = type;
+		}
+		return mfp.currTemplate.closeBtn;
+	},
+	// Initialize Magnific Popup only when called at least once
+	_checkInstance = function() {
+		if(!$.magnificPopup.instance) {
+			mfp = new MagnificPopup();
+			mfp.init();
+			$.magnificPopup.instance = mfp;
+		}
+	},
+	// Check to close popup or not
+	// "target" is an element that was clicked
+	_checkIfClose = function(target) {
+
+		if($(target).hasClass(PREVENT_CLOSE_CLASS)) {
+			return;
+		}
+
+		var closeOnContent = mfp.st.closeOnContentClick;
+		var closeOnBg = mfp.st.closeOnBgClick;
+
+		if(closeOnContent && closeOnBg) {
+			return true;
+		} else {
+
+			// We close the popup if click is on close button or on preloader. Or if there is no content.
+			if(!mfp.content || $(target).hasClass('mfp-close') || (mfp.preloader && target === mfp.preloader[0]) ) {
+				return true;
+			}
+
+			// if click is outside the content
+			if(  (target !== mfp.content[0] && !$.contains(mfp.content[0], target))  ) {
+				if(closeOnBg) {
+					// last check, if the clicked element is in DOM, (in case it's removed onclick)
+					if( $.contains(document, target) ) {
+						return true;
+					}
+				}
+			} else if(closeOnContent) {
+				return true;
+			}
+
+		}
+		return false;
+	},
+	// CSS transition detection, http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr
+	supportsTransitions = function() {
+		var s = document.createElement('p').style, // 's' for style. better to create an element if body yet to exist
+			v = ['ms','O','Moz','Webkit']; // 'v' for vendor
+
+		if( s['transition'] !== undefined ) {
+			return true; 
+		}
+			
+		while( v.length ) {
+			if( v.pop() + 'Transition' in s ) {
+				return true;
+			}
+		}
+				
+		return false;
+	};
+
+
+
+/**
+ * Public functions
+ */
+MagnificPopup.prototype = {
+
+	constructor: MagnificPopup,
+
+	/**
+	 * Initializes Magnific Popup plugin. 
+	 * This function is triggered only once when $.fn.magnificPopup or $.magnificPopup is executed
+	 */
+	init: function() {
+		var appVersion = navigator.appVersion;
+		mfp.isIE7 = appVersion.indexOf("MSIE 7.") !== -1; 
+		mfp.isIE8 = appVersion.indexOf("MSIE 8.") !== -1;
+		mfp.isLowIE = mfp.isIE7 || mfp.isIE8;
+		mfp.isAndroid = (/android/gi).test(appVersion);
+		mfp.isIOS = (/iphone|ipad|ipod/gi).test(appVersion);
+		mfp.supportsTransition = supportsTransitions();
+
+		// We disable fixed positioned lightbox on devices that don't handle it nicely.
+		// If you know a better way of detecting this - let me know.
+		mfp.probablyMobile = (mfp.isAndroid || mfp.isIOS || /(Opera Mini)|Kindle|webOS|BlackBerry|(Opera Mobi)|(Windows Phone)|IEMobile/i.test(navigator.userAgent) );
+		_body = $(document.body);
+		_document = $(document);
+
+		mfp.popupsCache = {};
+	},
+
+	/**
+	 * Opens popup
+	 * @param  data [description]
+	 */
+	open: function(data) {
+
+		var i;
+
+		if(data.isObj === false) { 
+			// convert jQuery collection to array to avoid conflicts later
+			mfp.items = data.items.toArray();
+
+			mfp.index = 0;
+			var items = data.items,
+				item;
+			for(i = 0; i < items.length; i++) {
+				item = items[i];
+				if(item.parsed) {
+					item = item.el[0];
+				}
+				if(item === data.el[0]) {
+					mfp.index = i;
+					break;
+				}
+			}
+		} else {
+			mfp.items = $.isArray(data.items) ? data.items : [data.items];
+			mfp.index = data.index || 0;
+		}
+
+		// if popup is already opened - we just update the content
+		if(mfp.isOpen) {
+			mfp.updateItemHTML();
+			return;
+		}
+		
+		mfp.types = []; 
+		_wrapClasses = '';
+		if(data.mainEl && data.mainEl.length) {
+			mfp.ev = data.mainEl.eq(0);
+		} else {
+			mfp.ev = _document;
+		}
+
+		if(data.key) {
+			if(!mfp.popupsCache[data.key]) {
+				mfp.popupsCache[data.key] = {};
+			}
+			mfp.currTemplate = mfp.popupsCache[data.key];
+		} else {
+			mfp.currTemplate = {};
+		}
+
+
+
+		mfp.st = $.extend(true, {}, $.magnificPopup.defaults, data ); 
+		mfp.fixedContentPos = mfp.st.fixedContentPos === 'auto' ? !mfp.probablyMobile : mfp.st.fixedContentPos;
+
+		if(mfp.st.modal) {
+			mfp.st.closeOnContentClick = false;
+			mfp.st.closeOnBgClick = false;
+			mfp.st.showCloseBtn = false;
+			mfp.st.enableEscapeKey = false;
+		}
+		
+
+		// Building markup
+		// main containers are created only once
+		if(!mfp.bgOverlay) {
+
+			// Dark overlay
+			mfp.bgOverlay = _getEl('bg').on('click'+EVENT_NS, function() {
+				mfp.close();
+			});
+
+			mfp.wrap = _getEl('wrap').attr('tabindex', -1).on('click'+EVENT_NS, function(e) {
+				if(_checkIfClose(e.target)) {
+					mfp.close();
+				}
+			});
+
+			mfp.container = _getEl('container', mfp.wrap);
+		}
+
+		mfp.contentContainer = _getEl('content');
+		if(mfp.st.preloader) {
+			mfp.preloader = _getEl('preloader', mfp.container, mfp.st.tLoading);
+		}
+
+
+		// Initializing modules
+		var modules = $.magnificPopup.modules;
+		for(i = 0; i < modules.length; i++) {
+			var n = modules[i];
+			n = n.charAt(0).toUpperCase() + n.slice(1);
+			mfp['init'+n].call(mfp);
+		}
+		_mfpTrigger('BeforeOpen');
+
+
+		if(mfp.st.showCloseBtn) {
+			// Close button
+			if(!mfp.st.closeBtnInside) {
+				mfp.wrap.append( _getCloseBtn() );
+			} else {
+				_mfpOn(MARKUP_PARSE_EVENT, function(e, template, values, item) {
+					values.close_replaceWith = _getCloseBtn(item.type);
+				});
+				_wrapClasses += ' mfp-close-btn-in';
+			}
+		}
+
+		if(mfp.st.alignTop) {
+			_wrapClasses += ' mfp-align-top';
+		}
+
+	
+
+		if(mfp.fixedContentPos) {
+			mfp.wrap.css({
+				overflow: mfp.st.overflowY,
+				overflowX: 'hidden',
+				overflowY: mfp.st.overflowY
+			});
+		} else {
+			mfp.wrap.css({ 
+				top: _window.scrollTop(),
+				position: 'absolute'
+			});
+		}
+		if( mfp.st.fixedBgPos === false || (mfp.st.fixedBgPos === 'auto' && !mfp.fixedContentPos) ) {
+			mfp.bgOverlay.css({
+				height: _document.height(),
+				position: 'absolute'
+			});
+		}
+
+		
+
+		if(mfp.st.enableEscapeKey) {
+			// Close on ESC key
+			_document.on('keyup' + EVENT_NS, function(e) {
+				if(e.keyCode === 27) {
+					mfp.close();
+				}
+			});
+		}
+
+		_window.on('resize' + EVENT_NS, function() {
+			mfp.updateSize();
+		});
+
+
+		if(!mfp.st.closeOnContentClick) {
+			_wrapClasses += ' mfp-auto-cursor';
+		}
+		
+		if(_wrapClasses)
+			mfp.wrap.addClass(_wrapClasses);
+
+
+		// this triggers recalculation of layout, so we get it once to not to trigger twice
+		var windowHeight = mfp.wH = _window.height();
+
+		
+		var windowStyles = {};
+
+		if( mfp.fixedContentPos ) {
+            if(mfp._hasScrollBar(windowHeight)){
+                var s = mfp._getScrollbarSize();
+                if(s) {
+                    windowStyles.paddingRight = s;
+                }
+            }
+        }
+
+		if(mfp.fixedContentPos) {
+			if(!mfp.isIE7) {
+				windowStyles.overflow = 'hidden';
+			} else {
+				// ie7 double-scroll bug
+				$('body, html').css('overflow', 'hidden');
+			}
+		}
+
+		
+		
+		var classesToadd = mfp.st.mainClass;
+		if(mfp.isIE7) {
+			classesToadd += ' mfp-ie7';
+		}
+		if(classesToadd) {
+			mfp._addClassToMFP( classesToadd );
+		}
+
+		// add content
+		mfp.updateItemHTML();
+
+		_mfpTrigger('BuildControls');
+
+
+		// remove scrollbar, add padding e.t.c
+		$('html').css(windowStyles);
+		
+		// add everything to DOM
+		mfp.bgOverlay.add(mfp.wrap).prependTo( document.body );
+
+
+
+		// Save last focused element
+		mfp._lastFocusedEl = document.activeElement;
+		
+		// Wait for next cycle to allow CSS transition
+		setTimeout(function() {
+			
+			if(mfp.content) {
+				mfp._addClassToMFP(READY_CLASS);
+				_setFocus();
+			} else {
+				// if content is not defined (not loaded e.t.c) we add class only for BG
+				mfp.bgOverlay.addClass(READY_CLASS);
+			}
+			
+			// Trap the focus in popup
+			_document.on('focusin' + EVENT_NS, function (e) {
+				if( e.target !== mfp.wrap[0] && !$.contains(mfp.wrap[0], e.target) ) {
+					_setFocus();
+					return false;
+				}
+			});
+
+		}, 16);
+
+		mfp.isOpen = true;
+		mfp.updateSize(windowHeight);
+		_mfpTrigger(OPEN_EVENT);
+	},
+
+	/**
+	 * Closes the popup
+	 */
+	close: function() {
+		if(!mfp.isOpen) return;
+		_mfpTrigger(BEFORE_CLOSE_EVENT);
+
+		mfp.isOpen = false;
+		// for CSS3 animation
+		if(mfp.st.removalDelay && !mfp.isLowIE && mfp.supportsTransition )  {
+			mfp._addClassToMFP(REMOVING_CLASS);
+			setTimeout(function() {
+				mfp._close();
+			}, mfp.st.removalDelay);
+		} else {
+			mfp._close();
+		}
+	},
+
+	/**
+	 * Helper for close() function
+	 */
+	_close: function() {
+		_mfpTrigger(CLOSE_EVENT);
+
+		var classesToRemove = REMOVING_CLASS + ' ' + READY_CLASS + ' ';
+
+		mfp.bgOverlay.detach();
+		mfp.wrap.detach();
+		mfp.container.empty();
+
+		if(mfp.st.mainClass) {
+			classesToRemove += mfp.st.mainClass + ' ';
+		}
+
+		mfp._removeClassFromMFP(classesToRemove);
+
+		if(mfp.fixedContentPos) {
+			var windowStyles = {paddingRight: ''};
+			if(mfp.isIE7) {
+				$('body, html').css('overflow', '');
+			} else {
+				windowStyles.overflow = '';
+			}
+			$('html').css(windowStyles);
+		}
+		
+		_document.off('keyup' + EVENT_NS + ' focusin' + EVENT_NS);
+		mfp.ev.off(EVENT_NS);
+
+		// clean up DOM elements that aren't removed
+		mfp.wrap.attr('class', 'mfp-wrap').removeAttr('style');
+		mfp.bgOverlay.attr('class', 'mfp-bg');
+		mfp.container.attr('class', 'mfp-container');
+
+		// remove close button from target element
+		if(mfp.st.showCloseBtn &&
+		(!mfp.st.closeBtnInside || mfp.currTemplate[mfp.currItem.type] === true)) {
+			if(mfp.currTemplate.closeBtn)
+				mfp.currTemplate.closeBtn.detach();
+		}
+
+
+		if(mfp._lastFocusedEl) {
+			$(mfp._lastFocusedEl).focus(); // put tab focus back
+		}
+		mfp.currItem = null;	
+		mfp.content = null;
+		mfp.currTemplate = null;
+		mfp.prevHeight = 0;
+
+		_mfpTrigger(AFTER_CLOSE_EVENT);
+	},
+	
+	updateSize: function(winHeight) {
+
+		if(mfp.isIOS) {
+			// fixes iOS nav bars https://github.com/dimsemenov/Magnific-Popup/issues/2
+			var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
+			var height = window.innerHeight * zoomLevel;
+			mfp.wrap.css('height', height);
+			mfp.wH = height;
+		} else {
+			mfp.wH = winHeight || _window.height();
+		}
+		// Fixes #84: popup incorrectly positioned with position:relative on body
+		if(!mfp.fixedContentPos) {
+			mfp.wrap.css('height', mfp.wH);
+		}
+
+		_mfpTrigger('Resize');
+
+	},
+
+	/**
+	 * Set content of popup based on current index
+	 */
+	updateItemHTML: function() {
+		var item = mfp.items[mfp.index];
+
+		// Detach and perform modifications
+		mfp.contentContainer.detach();
+
+		if(mfp.content)
+			mfp.content.detach();
+
+		if(!item.parsed) {
+			item = mfp.parseEl( mfp.index );
+		}
+
+		var type = item.type;	
+
+		_mfpTrigger('BeforeChange', [mfp.currItem ? mfp.currItem.type : '', type]);
+		// BeforeChange event works like so:
+		// _mfpOn('BeforeChange', function(e, prevType, newType) { });
+		
+		mfp.currItem = item;
+
+		
+
+		
+
+		if(!mfp.currTemplate[type]) {
+			var markup = mfp.st[type] ? mfp.st[type].markup : false;
+
+			// allows to modify markup
+			_mfpTrigger('FirstMarkupParse', markup);
+
+			if(markup) {
+				mfp.currTemplate[type] = $(markup);
+			} else {
+				// if there is no markup found we just define that template is parsed
+				mfp.currTemplate[type] = true;
+			}
+		}
+
+		if(_prevContentType && _prevContentType !== item.type) {
+			mfp.container.removeClass('mfp-'+_prevContentType+'-holder');
+		}
+		
+		var newContent = mfp['get' + type.charAt(0).toUpperCase() + type.slice(1)](item, mfp.currTemplate[type]);
+		mfp.appendContent(newContent, type);
+
+		item.preloaded = true;
+
+		_mfpTrigger(CHANGE_EVENT, item);
+		_prevContentType = item.type;
+		
+		// Append container back after its content changed
+		mfp.container.prepend(mfp.contentContainer);
+
+		_mfpTrigger('AfterChange');
+	},
+
+
+	/**
+	 * Set HTML content of popup
+	 */
+	appendContent: function(newContent, type) {
+		mfp.content = newContent;
+		
+		if(newContent) {
+			if(mfp.st.showCloseBtn && mfp.st.closeBtnInside &&
+				mfp.currTemplate[type] === true) {
+				// if there is no markup, we just append close button element inside
+				if(!mfp.content.find('.mfp-close').length) {
+					mfp.content.append(_getCloseBtn());
+				}
+			} else {
+				mfp.content = newContent;
+			}
+		} else {
+			mfp.content = '';
+		}
+
+		_mfpTrigger(BEFORE_APPEND_EVENT);
+		mfp.container.addClass('mfp-'+type+'-holder');
+
+		mfp.contentContainer.append(mfp.content);
+	},
+
+
+
+	
+	/**
+	 * Creates Magnific Popup data object based on given data
+	 * @param  {int} index Index of item to parse
+	 */
+	parseEl: function(index) {
+		var item = mfp.items[index],
+			type = item.type;
+
+		if(item.tagName) {
+			item = { el: $(item) };
+		} else {
+			item = { data: item, src: item.src };
+		}
+
+		if(item.el) {
+			var types = mfp.types;
+
+			// check for 'mfp-TYPE' class
+			for(var i = 0; i < types.length; i++) {
+				if( item.el.hasClass('mfp-'+types[i]) ) {
+					type = types[i];
+					break;
+				}
+			}
+
+			item.src = item.el.attr('data-mfp-src');
+			if(!item.src) {
+				item.src = item.el.attr('href');
+			}
+		}
+
+		item.type = type || mfp.st.type || 'inline';
+		item.index = index;
+		item.parsed = true;
+		mfp.items[index] = item;
+		_mfpTrigger('ElementParse', item);
+
+		return mfp.items[index];
+	},
+
+
+	/**
+	 * Initializes single popup or a group of popups
+	 */
+	addGroup: function(el, options) {
+		var eHandler = function(e) {
+			e.mfpEl = this;
+			mfp._openClick(e, el, options);
+		};
+
+		if(!options) {
+			options = {};
+		} 
+
+		var eName = 'click.magnificPopup';
+		options.mainEl = el;
+		
+		if(options.items) {
+			options.isObj = true;
+			el.off(eName).on(eName, eHandler);
+		} else {
+			options.isObj = false;
+			if(options.delegate) {
+				el.off(eName).on(eName, options.delegate , eHandler);
+			} else {
+				options.items = el;
+				el.off(eName).on(eName, eHandler);
+			}
+		}
+	},
+	_openClick: function(e, el, options) {
+		var midClick = options.midClick !== undefined ? options.midClick : $.magnificPopup.defaults.midClick;
+
+
+		if(!midClick && ( e.which === 2 || e.ctrlKey || e.metaKey ) ) {
+			return;
+		}
+
+		var disableOn = options.disableOn !== undefined ? options.disableOn : $.magnificPopup.defaults.disableOn;
+
+		if(disableOn) {
+			if($.isFunction(disableOn)) {
+				if( !disableOn.call(mfp) ) {
+					return true;
+				}
+			} else { // else it's number
+				if( _window.width() < disableOn ) {
+					return true;
+				}
+			}
+		}
+		
+		if(e.type) {
+			e.preventDefault();
+
+			// This will prevent popup from closing if element is inside and popup is already opened
+			if(mfp.isOpen) {
+				e.stopPropagation();
+			}
+		}
+			
+
+		options.el = $(e.mfpEl);
+		if(options.delegate) {
+			options.items = el.find(options.delegate);
+		}
+		mfp.open(options);
+	},
+
+
+	/**
+	 * Updates text on preloader
+	 */
+	updateStatus: function(status, text) {
+
+		if(mfp.preloader) {
+			if(_prevStatus !== status) {
+				mfp.container.removeClass('mfp-s-'+_prevStatus);
+			}
+
+			if(!text && status === 'loading') {
+				text = mfp.st.tLoading;
+			}
+
+			var data = {
+				status: status,
+				text: text
+			};
+			// allows to modify status
+			_mfpTrigger('UpdateStatus', data);
+
+			status = data.status;
+			text = data.text;
+
+			mfp.preloader.html(text);
+
+			mfp.preloader.find('a').on('click', function(e) {
+				e.stopImmediatePropagation();
+			});
+
+			mfp.container.addClass('mfp-s-'+status);
+			_prevStatus = status;
+		}
+	},
+
+
+	/*
+		"Private" helpers that aren't private at all
+	 */
+	_addClassToMFP: function(cName) {
+		mfp.bgOverlay.addClass(cName);
+		mfp.wrap.addClass(cName);
+	},
+	_removeClassFromMFP: function(cName) {
+		this.bgOverlay.removeClass(cName);
+		mfp.wrap.removeClass(cName);
+	},
+	_hasScrollBar: function(winHeight) {
+		return (  (mfp.isIE7 ? _document.height() : document.body.scrollHeight) > (winHeight || _window.height()) );
+	},
+	_parseMarkup: function(template, values, item) {
+		var arr;
+		if(item.data) {
+			values = $.extend(item.data, values);
+		}
+		_mfpTrigger(MARKUP_PARSE_EVENT, [template, values, item] );
+
+		$.each(values, function(key, value) {
+			if(value === undefined || value === false) {
+				return true;
+			}
+			arr = key.split('_');
+			if(arr.length > 1) {
+				var el = template.find(EVENT_NS + '-'+arr[0]);
+
+				if(el.length > 0) {
+					var attr = arr[1];
+					if(attr === 'replaceWith') {
+						if(el[0] !== value[0]) {
+							el.replaceWith(value);
+						}
+					} else if(attr === 'img') {
+						if(el.is('img')) {
+							el.attr('src', value);
+						} else {
+							el.replaceWith( '<img src="'+value+'" class="' + el.attr('class') + '" />' );
+						}
+					} else {
+						el.attr(arr[1], value);
+					}
+				}
+
+			} else {
+				template.find(EVENT_NS + '-'+key).html(value);
+			}
+		});
+	},
+
+	_getScrollbarSize: function() {
+		// thx David
+		if(mfp.scrollbarSize === undefined) {
+			var scrollDiv = document.createElement("div");
+			scrollDiv.id = "mfp-sbm";
+			scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
+			document.body.appendChild(scrollDiv);
+			mfp.scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+			document.body.removeChild(scrollDiv);
+		}
+		return mfp.scrollbarSize;
+	}
+
+}; /* MagnificPopup core prototype end */
+
+
+
+
+/**
+ * Public static functions
+ */
+$.magnificPopup = {
+	instance: null,
+	proto: MagnificPopup.prototype,
+	modules: [],
+
+	open: function(options, index) {
+		_checkInstance();	
+
+		if(!options) 
+			options = {};
+
+		options.isObj = true;
+		options.index = index || 0;
+		return this.instance.open(options);
+	},
+
+	close: function() {
+		return $.magnificPopup.instance.close();
+	},
+
+	registerModule: function(name, module) {
+		if(module.options) {
+			$.magnificPopup.defaults[name] = module.options;
+		}
+		$.extend(this.proto, module.proto);			
+		this.modules.push(name);
+	},
+
+	defaults: {   
+
+		// Info about options is in docs:
+		// http://dimsemenov.com/plugins/magnific-popup/documentation.html#options
+		
+		disableOn: 0,	
+
+		key: null,
+
+		midClick: false,
+
+		mainClass: '',
+
+		preloader: true,
+
+		focus: '', // CSS selector of input to focus after popup is opened
+		
+		closeOnContentClick: false,
+
+		closeOnBgClick: true,
+
+		closeBtnInside: true, 
+
+		showCloseBtn: true,
+
+		enableEscapeKey: true,
+
+		modal: false,
+
+		alignTop: false,
+	
+		removalDelay: 0,
+		
+		fixedContentPos: 'auto', 
+	
+		fixedBgPos: 'auto',
+
+		overflowY: 'auto',
+
+		closeMarkup: '<button title="%title%" type="button" class="mfp-close">&times;</button>',
+
+		tClose: 'Close (Esc)',
+
+		tLoading: 'Loading...'
+
+	}
+};
+
+
+
+$.fn.magnificPopup = function(options) {
+	_checkInstance();
+
+	var jqEl = $(this);
+
+	// We call some API method of first param is a string
+	if (typeof options === "string" ) {
+
+		if(options === 'open') {
+			var items,
+				itemOpts = _isJQ ? jqEl.data('magnificPopup') : jqEl[0].magnificPopup,
+				index = parseInt(arguments[1], 10) || 0;
+
+			if(itemOpts.items) {
+				items = itemOpts.items[index];
+			} else {
+				items = jqEl;
+				if(itemOpts.delegate) {
+					items = items.find(itemOpts.delegate);
+				}
+				items = items.eq( index );
+			}
+			mfp._openClick({mfpEl:items}, jqEl, itemOpts);
+		} else {
+			if(mfp.isOpen)
+				mfp[options].apply(mfp, Array.prototype.slice.call(arguments, 1));
+		}
+
+	} else {
+
+		/*
+		 * As Zepto doesn't support .data() method for objects 
+		 * and it works only in normal browsers
+		 * we assign "options" object directly to the DOM element. FTW!
+		 */
+		if(_isJQ) {
+			jqEl.data('magnificPopup', options);
+		} else {
+			jqEl[0].magnificPopup = options;
+		}
+
+		mfp.addGroup(jqEl, options);
+
+	}
+	return jqEl;
+};
+
+
+//Quick benchmark
+/*
+var start = performance.now(),
+	i,
+	rounds = 1000;
+
+for(i = 0; i < rounds; i++) {
+
+}
+console.log('Test #1:', performance.now() - start);
+
+start = performance.now();
+for(i = 0; i < rounds; i++) {
+
+}
+console.log('Test #2:', performance.now() - start);
+*/
+
+
+/*>>core*/
+
+/*>>inline*/
+
+var INLINE_NS = 'inline',
+	_hiddenClass,
+	_inlinePlaceholder, 
+	_lastInlineElement,
+	_putInlineElementsBack = function() {
+		if(_lastInlineElement) {
+			_inlinePlaceholder.after( _lastInlineElement.addClass(_hiddenClass) ).detach();
+			_lastInlineElement = null;
+		}
+	};
+
+$.magnificPopup.registerModule(INLINE_NS, {
+	options: {
+		hiddenClass: 'hide', // will be appended with `mfp-` prefix
+		markup: '',
+		tNotFound: 'Content not found'
+	},
+	proto: {
+
+		initInline: function() {
+			mfp.types.push(INLINE_NS);
+
+			_mfpOn(CLOSE_EVENT+'.'+INLINE_NS, function() {
+				_putInlineElementsBack();
+			});
+		},
+
+		getInline: function(item, template) {
+
+			_putInlineElementsBack();
+
+			if(item.src) {
+				var inlineSt = mfp.st.inline,
+					el = $(item.src);
+
+				if(el.length) {
+
+					// If target element has parent - we replace it with placeholder and put it back after popup is closed
+					var parent = el[0].parentNode;
+					if(parent && parent.tagName) {
+						if(!_inlinePlaceholder) {
+							_hiddenClass = inlineSt.hiddenClass;
+							_inlinePlaceholder = _getEl(_hiddenClass);
+							_hiddenClass = 'mfp-'+_hiddenClass;
+						}
+						// replace target inline element with placeholder
+						_lastInlineElement = el.after(_inlinePlaceholder).detach().removeClass(_hiddenClass);
+					}
+
+					mfp.updateStatus('ready');
+				} else {
+					mfp.updateStatus('error', inlineSt.tNotFound);
+					el = $('<div>');
+				}
+
+				item.inlineElement = el;
+				return el;
+			}
+
+			mfp.updateStatus('ready');
+			mfp._parseMarkup(template, {}, item);
+			return template;
+		}
+	}
+});
+
+/*>>inline*/
+
+/*>>ajax*/
+var AJAX_NS = 'ajax',
+	_ajaxCur,
+	_removeAjaxCursor = function() {
+		if(_ajaxCur) {
+			_body.removeClass(_ajaxCur);
+		}
+	};
+
+$.magnificPopup.registerModule(AJAX_NS, {
+
+	options: {
+		settings: null,
+		cursor: 'mfp-ajax-cur',
+		tError: '<a href="%url%">The content</a> could not be loaded.'
+	},
+
+	proto: {
+		initAjax: function() {
+			mfp.types.push(AJAX_NS);
+			_ajaxCur = mfp.st.ajax.cursor;
+
+			_mfpOn(CLOSE_EVENT+'.'+AJAX_NS, function() {
+				_removeAjaxCursor();
+				if(mfp.req) {
+					mfp.req.abort();
+				}
+			});
+		},
+
+		getAjax: function(item) {
+
+			if(_ajaxCur)
+				_body.addClass(_ajaxCur);
+
+			mfp.updateStatus('loading');
+
+			var opts = $.extend({
+				url: item.src,
+				success: function(data, textStatus, jqXHR) {
+					var temp = {
+						data:data,
+						xhr:jqXHR
+					};
+
+					_mfpTrigger('ParseAjax', temp);
+
+					mfp.appendContent( $(temp.data), AJAX_NS );
+
+					item.finished = true;
+
+					_removeAjaxCursor();
+
+					_setFocus();
+
+					setTimeout(function() {
+						mfp.wrap.addClass(READY_CLASS);
+					}, 16);
+
+					mfp.updateStatus('ready');
+
+					_mfpTrigger('AjaxContentAdded');
+				},
+				error: function() {
+					_removeAjaxCursor();
+					item.finished = item.loadError = true;
+					mfp.updateStatus('error', mfp.st.ajax.tError.replace('%url%', item.src));
+				}
+			}, mfp.st.ajax.settings);
+
+			mfp.req = $.ajax(opts);
+
+			return '';
+		}
+	}
+});
+
+
+
+
+
+	
+
+/*>>ajax*/
+
+/*>>image*/
+var _imgInterval,
+	_getTitle = function(item) {
+		if(item.data && item.data.title !== undefined) 
+			return item.data.title;
+
+		var src = mfp.st.image.titleSrc;
+
+		if(src) {
+			if($.isFunction(src)) {
+				return src.call(mfp, item);
+			} else if(item.el) {
+				return item.el.attr(src) || '';
+			}
+		}
+		return '';
+	};
+
+$.magnificPopup.registerModule('image', {
+
+	options: {
+		markup: '<div class="mfp-figure">'+
+					'<div class="mfp-close"></div>'+
+					'<div class="mfp-img"></div>'+
+					'<div class="mfp-bottom-bar">'+
+						'<div class="mfp-title"></div>'+
+						'<div class="mfp-counter"></div>'+
+					'</div>'+
+				'</div>',
+		cursor: 'mfp-zoom-out-cur',
+		titleSrc: 'title', 
+		verticalFit: true,
+		tError: '<a href="%url%">The image</a> could not be loaded.'
+	},
+
+	proto: {
+		initImage: function() {
+			var imgSt = mfp.st.image,
+				ns = '.image';
+
+			mfp.types.push('image');
+
+			_mfpOn(OPEN_EVENT+ns, function() {
+				if(mfp.currItem.type === 'image' && imgSt.cursor) {
+					_body.addClass(imgSt.cursor);
+				}
+			});
+
+			_mfpOn(CLOSE_EVENT+ns, function() {
+				if(imgSt.cursor) {
+					_body.removeClass(imgSt.cursor);
+				}
+				_window.off('resize' + EVENT_NS);
+			});
+
+			_mfpOn('Resize'+ns, mfp.resizeImage);
+			if(mfp.isLowIE) {
+				_mfpOn('AfterChange', mfp.resizeImage);
+			}
+		},
+		resizeImage: function() {
+			var item = mfp.currItem;
+			if(!item || !item.img) return;
+
+			if(mfp.st.image.verticalFit) {
+				var decr = 0;
+				// fix box-sizing in ie7/8
+				if(mfp.isLowIE) {
+					decr = parseInt(item.img.css('padding-top'), 10) + parseInt(item.img.css('padding-bottom'),10);
+				}
+				item.img.css('max-height', mfp.wH-decr);
+			}
+		},
+		_onImageHasSize: function(item) {
+			if(item.img) {
+				
+				item.hasSize = true;
+
+				if(_imgInterval) {
+					clearInterval(_imgInterval);
+				}
+				
+				item.isCheckingImgSize = false;
+
+				_mfpTrigger('ImageHasSize', item);
+
+				if(item.imgHidden) {
+					if(mfp.content)
+						mfp.content.removeClass('mfp-loading');
+					
+					item.imgHidden = false;
+				}
+
+			}
+		},
+
+		/**
+		 * Function that loops until the image has size to display elements that rely on it asap
+		 */
+		findImageSize: function(item) {
+
+			var counter = 0,
+				img = item.img[0],
+				mfpSetInterval = function(delay) {
+
+					if(_imgInterval) {
+						clearInterval(_imgInterval);
+					}
+					// decelerating interval that checks for size of an image
+					_imgInterval = setInterval(function() {
+						if(img.naturalWidth > 0) {
+							mfp._onImageHasSize(item);
+							return;
+						}
+
+						if(counter > 200) {
+							clearInterval(_imgInterval);
+						}
+
+						counter++;
+						if(counter === 3) {
+							mfpSetInterval(10);
+						} else if(counter === 40) {
+							mfpSetInterval(50);
+						} else if(counter === 100) {
+							mfpSetInterval(500);
+						}
+					}, delay);
+				};
+
+			mfpSetInterval(1);
+		},
+
+		getImage: function(item, template) {
+
+			var guard = 0,
+
+				// image load complete handler
+				onLoadComplete = function() {
+					if(item) {
+						if (item.img[0].complete) {
+							item.img.off('.mfploader');
+							
+							if(item === mfp.currItem){
+								mfp._onImageHasSize(item);
+
+								mfp.updateStatus('ready');
+							}
+
+							item.hasSize = true;
+							item.loaded = true;
+
+							_mfpTrigger('ImageLoadComplete');
+							
+						}
+						else {
+							// if image complete check fails 200 times (20 sec), we assume that there was an error.
+							guard++;
+							if(guard < 200) {
+								setTimeout(onLoadComplete,100);
+							} else {
+								onLoadError();
+							}
+						}
+					}
+				},
+
+				// image error handler
+				onLoadError = function() {
+					if(item) {
+						item.img.off('.mfploader');
+						if(item === mfp.currItem){
+							mfp._onImageHasSize(item);
+							mfp.updateStatus('error', imgSt.tError.replace('%url%', item.src) );
+						}
+
+						item.hasSize = true;
+						item.loaded = true;
+						item.loadError = true;
+					}
+				},
+				imgSt = mfp.st.image;
+
+
+			var el = template.find('.mfp-img');
+			if(el.length) {
+				var img = document.createElement('img');
+				img.className = 'mfp-img';
+				item.img = $(img).on('load.mfploader', onLoadComplete).on('error.mfploader', onLoadError);
+				img.src = item.src;
+
+				// without clone() "error" event is not firing when IMG is replaced by new IMG
+				// TODO: find a way to avoid such cloning
+				if(el.is('img')) {
+					item.img = item.img.clone();
+				}
+				if(item.img[0].naturalWidth > 0) {
+					item.hasSize = true;
+				}
+			}
+
+			mfp._parseMarkup(template, {
+				title: _getTitle(item),
+				img_replaceWith: item.img
+			}, item);
+
+			mfp.resizeImage();
+
+			if(item.hasSize) {
+				if(_imgInterval) clearInterval(_imgInterval);
+
+				if(item.loadError) {
+					template.addClass('mfp-loading');
+					mfp.updateStatus('error', imgSt.tError.replace('%url%', item.src) );
+				} else {
+					template.removeClass('mfp-loading');
+					mfp.updateStatus('ready');
+				}
+				return template;
+			}
+
+			mfp.updateStatus('loading');
+			item.loading = true;
+
+			if(!item.hasSize) {
+				item.imgHidden = true;
+				template.addClass('mfp-loading');
+				mfp.findImageSize(item);
+			} 
+
+			return template;
+		}
+	}
+});
+
+
+
+/*>>image*/
+
+/*>>zoom*/
+var hasMozTransform,
+	getHasMozTransform = function() {
+		if(hasMozTransform === undefined) {
+			hasMozTransform = document.createElement('p').style.MozTransform !== undefined;
+		}
+		return hasMozTransform;		
+	};
+
+$.magnificPopup.registerModule('zoom', {
+
+	options: {
+		enabled: false,
+		easing: 'ease-in-out',
+		duration: 300,
+		opener: function(element) {
+			return element.is('img') ? element : element.find('img');
+		}
+	},
+
+	proto: {
+
+		initZoom: function() {
+			var zoomSt = mfp.st.zoom,
+				ns = '.zoom';
+				
+			if(!zoomSt.enabled || !mfp.supportsTransition) {
+				return;
+			}
+
+			var duration = zoomSt.duration,
+				getElToAnimate = function(image) {
+					var newImg = image.clone().removeAttr('style').removeAttr('class').addClass('mfp-animated-image'),
+						transition = 'all '+(zoomSt.duration/1000)+'s ' + zoomSt.easing,
+						cssObj = {
+							position: 'fixed',
+							zIndex: 9999,
+							left: 0,
+							top: 0,
+							'-webkit-backface-visibility': 'hidden'
+						},
+						t = 'transition';
+
+					cssObj['-webkit-'+t] = cssObj['-moz-'+t] = cssObj['-o-'+t] = cssObj[t] = transition;
+
+					newImg.css(cssObj);
+					return newImg;
+				},
+				showMainContent = function() {
+					mfp.content.css('visibility', 'visible');
+				},
+				openTimeout,
+				animatedImg;
+
+			_mfpOn('BuildControls'+ns, function() {
+				if(mfp._allowZoom()) {
+
+					clearTimeout(openTimeout);
+					mfp.content.css('visibility', 'hidden');
+
+					// Basically, all code below does is clones existing image, puts in on top of the current one and animated it
+					
+					image = mfp._getItemToZoom();
+
+					if(!image) {
+						showMainContent();
+						return;
+					}
+
+					animatedImg = getElToAnimate(image); 
+					
+					animatedImg.css( mfp._getOffset() );
+
+					mfp.wrap.append(animatedImg);
+
+					openTimeout = setTimeout(function() {
+						animatedImg.css( mfp._getOffset( true ) );
+						openTimeout = setTimeout(function() {
+
+							showMainContent();
+
+							setTimeout(function() {
+								animatedImg.remove();
+								image = animatedImg = null;
+								_mfpTrigger('ZoomAnimationEnded');
+							}, 16); // avoid blink when switching images 
+
+						}, duration); // this timeout equals animation duration
+
+					}, 16); // by adding this timeout we avoid short glitch at the beginning of animation
+
+
+					// Lots of timeouts...
+				}
+			});
+			_mfpOn(BEFORE_CLOSE_EVENT+ns, function() {
+				if(mfp._allowZoom()) {
+
+					clearTimeout(openTimeout);
+
+					mfp.st.removalDelay = duration;
+
+					if(!image) {
+						image = mfp._getItemToZoom();
+						if(!image) {
+							return;
+						}
+						animatedImg = getElToAnimate(image);
+					}
+					
+					
+					animatedImg.css( mfp._getOffset(true) );
+					mfp.wrap.append(animatedImg);
+					mfp.content.css('visibility', 'hidden');
+					
+					setTimeout(function() {
+						animatedImg.css( mfp._getOffset() );
+					}, 16);
+				}
+
+			});
+
+			_mfpOn(CLOSE_EVENT+ns, function() {
+				if(mfp._allowZoom()) {
+					showMainContent();
+					if(animatedImg) {
+						animatedImg.remove();
+					}
+				}	
+			});
+		},
+
+		_allowZoom: function() {
+			return mfp.currItem.type === 'image';
+		},
+
+		_getItemToZoom: function() {
+			if(mfp.currItem.hasSize) {
+				return mfp.currItem.img;
+			} else {
+				return false;
+			}
+		},
+
+		// Get element postion relative to viewport
+		_getOffset: function(isLarge) {
+			var el;
+			if(isLarge) {
+				el = mfp.currItem.img;
+			} else {
+				el = mfp.st.zoom.opener(mfp.currItem.el || mfp.currItem);
+			}
+
+			var offset = el.offset();
+			var paddingTop = parseInt(el.css('padding-top'),10);
+			var paddingBottom = parseInt(el.css('padding-bottom'),10);
+			offset.top -= ( $(window).scrollTop() - paddingTop );
+
+
+			/*
+			
+			Animating left + top + width/height looks glitchy in Firefox, but perfect in Chrome. And vice-versa.
+
+			 */
+			var obj = {
+				width: el.width(),
+				// fix Zepto height+padding issue
+				height: (_isJQ ? el.innerHeight() : el[0].offsetHeight) - paddingBottom - paddingTop
+			};
+
+			// I hate to do this, but there is no another option
+			if( getHasMozTransform() ) {
+				obj['-moz-transform'] = obj['transform'] = 'translate(' + offset.left + 'px,' + offset.top + 'px)';
+			} else {
+				obj.left = offset.left;
+				obj.top = offset.top;
+			}
+			return obj;
+		}
+
+	}
+});
+
+
+
+/*>>zoom*/
+
+/*>>iframe*/
+
+var IFRAME_NS = 'iframe',
+	_emptyPage = '//about:blank',
+	
+	_fixIframeBugs = function(isShowing) {
+		if(mfp.currTemplate[IFRAME_NS]) {
+			var el = mfp.currTemplate[IFRAME_NS].find('iframe');
+			if(el.length) { 
+				// reset src after the popup is closed to avoid "video keeps playing after popup is closed" bug
+				if(!isShowing) {
+					el[0].src = _emptyPage;
+				}
+
+				// IE8 black screen bug fix
+				if(mfp.isIE8) {
+					el.css('display', isShowing ? 'block' : 'none');
+				}
+			}
+		}
+	};
+
+$.magnificPopup.registerModule(IFRAME_NS, {
+
+	options: {
+		markup: '<div class="mfp-iframe-scaler">'+
+					'<div class="mfp-close"></div>'+
+					'<iframe class="mfp-iframe" src="//about:blank" frameborder="0" allowfullscreen></iframe>'+
+				'</div>',
+
+		srcAction: 'iframe_src',
+
+		// we don't care and support only one default type of URL by default
+		patterns: {
+			youtube: {
+				index: 'youtube.com', 
+				id: 'v=', 
+				src: '//www.youtube.com/embed/%id%?autoplay=1'
+			},
+			vimeo: {
+				index: 'vimeo.com/',
+				id: '/',
+				src: '//player.vimeo.com/video/%id%?autoplay=1'
+			},
+			gmaps: {
+				index: '//maps.google.',
+				src: '%id%&output=embed'
+			}
+		}
+	},
+
+	proto: {
+		initIframe: function() {
+			mfp.types.push(IFRAME_NS);
+
+			_mfpOn('BeforeChange', function(e, prevType, newType) {
+				if(prevType !== newType) {
+					if(prevType === IFRAME_NS) {
+						_fixIframeBugs(); // iframe if removed
+					} else if(newType === IFRAME_NS) {
+						_fixIframeBugs(true); // iframe is showing
+					} 
+				}// else {
+					// iframe source is switched, don't do anything
+				//}
+			});
+
+			_mfpOn(CLOSE_EVENT + '.' + IFRAME_NS, function() {
+				_fixIframeBugs();
+			});
+		},
+
+		getIframe: function(item, template) {
+			var embedSrc = item.src;
+			var iframeSt = mfp.st.iframe;
+				
+			$.each(iframeSt.patterns, function() {
+				if(embedSrc.indexOf( this.index ) > -1) {
+					if(this.id) {
+						if(typeof this.id === 'string') {
+							embedSrc = embedSrc.substr(embedSrc.lastIndexOf(this.id)+this.id.length, embedSrc.length);
+						} else {
+							embedSrc = this.id.call( this, embedSrc );
+						}
+					}
+					embedSrc = this.src.replace('%id%', embedSrc );
+					return false; // break;
+				}
+			});
+			
+			var dataObj = {};
+			if(iframeSt.srcAction) {
+				dataObj[iframeSt.srcAction] = embedSrc;
+			}
+			mfp._parseMarkup(template, dataObj, item);
+
+			mfp.updateStatus('ready');
+
+			return template;
+		}
+	}
+});
+
+
+
+/*>>iframe*/
+
+/*>>gallery*/
+/**
+ * Get looped index depending on number of slides
+ */
+var _getLoopedId = function(index) {
+		var numSlides = mfp.items.length;
+		if(index > numSlides - 1) {
+			return index - numSlides;
+		} else  if(index < 0) {
+			return numSlides + index;
+		}
+		return index;
+	},
+	_replaceCurrTotal = function(text, curr, total) {
+		return text.replace('%curr%', curr + 1).replace('%total%', total);
+	};
+
+$.magnificPopup.registerModule('gallery', {
+
+	options: {
+		enabled: false,
+		arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
+		preload: [0,2],
+		navigateByImgClick: true,
+		arrows: true,
+
+		tPrev: 'Previous (Left arrow key)',
+		tNext: 'Next (Right arrow key)',
+		tCounter: '%curr% of %total%'
+	},
+
+	proto: {
+		initGallery: function() {
+
+			var gSt = mfp.st.gallery,
+				ns = '.mfp-gallery',
+				supportsFastClick = Boolean($.fn.mfpFastClick);
+
+			mfp.direction = true; // true - next, false - prev
+			
+			if(!gSt || !gSt.enabled ) return false;
+
+			_wrapClasses += ' mfp-gallery';
+
+			_mfpOn(OPEN_EVENT+ns, function() {
+
+				if(gSt.navigateByImgClick) {
+					mfp.wrap.on('click'+ns, '.mfp-img', function() {
+						if(mfp.items.length > 1) {
+							mfp.next();
+							return false;
+						}
+					});
+				}
+
+				_document.on('keydown'+ns, function(e) {
+					if (e.keyCode === 37) {
+						mfp.prev();
+					} else if (e.keyCode === 39) {
+						mfp.next();
+					}
+				});
+			});
+
+			_mfpOn('UpdateStatus'+ns, function(e, data) {
+				if(data.text) {
+					data.text = _replaceCurrTotal(data.text, mfp.currItem.index, mfp.items.length);
+				}
+			});
+
+			_mfpOn(MARKUP_PARSE_EVENT+ns, function(e, element, values, item) {
+				var l = mfp.items.length;
+				values.counter = l > 1 ? _replaceCurrTotal(gSt.tCounter, item.index, l) : '';
+			});
+
+			_mfpOn('BuildControls' + ns, function() {
+				if(mfp.items.length > 1 && gSt.arrows && !mfp.arrowLeft) {
+					var markup = gSt.arrowMarkup,
+						arrowLeft = mfp.arrowLeft = $( markup.replace('%title%', gSt.tPrev).replace('%dir%', 'left') ).addClass(PREVENT_CLOSE_CLASS),			
+						arrowRight = mfp.arrowRight = $( markup.replace('%title%', gSt.tNext).replace('%dir%', 'right') ).addClass(PREVENT_CLOSE_CLASS);
+
+					var eName = supportsFastClick ? 'mfpFastClick' : 'click';
+					arrowLeft[eName](function() {
+						mfp.prev();
+					});			
+					arrowRight[eName](function() {
+						mfp.next();
+					});	
+
+					// Polyfill for :before and :after (adds elements with classes mfp-a and mfp-b)
+					if(mfp.isIE7) {
+						_getEl('b', arrowLeft[0], false, true);
+						_getEl('a', arrowLeft[0], false, true);
+						_getEl('b', arrowRight[0], false, true);
+						_getEl('a', arrowRight[0], false, true);
+					}
+
+					mfp.container.append(arrowLeft.add(arrowRight));
+				}
+			});
+
+			_mfpOn(CHANGE_EVENT+ns, function() {
+				if(mfp._preloadTimeout) clearTimeout(mfp._preloadTimeout);
+
+				mfp._preloadTimeout = setTimeout(function() {
+					mfp.preloadNearbyImages();
+					mfp._preloadTimeout = null;
+				}, 16);		
+			});
+
+
+			_mfpOn(CLOSE_EVENT+ns, function() {
+				_document.off(ns);
+				mfp.wrap.off('click'+ns);
+			
+				if(mfp.arrowLeft && supportsFastClick) {
+					mfp.arrowLeft.add(mfp.arrowRight).destroyMfpFastClick();
+				}
+				mfp.arrowRight = mfp.arrowLeft = null;
+			});
+
+		}, 
+		next: function() {
+			mfp.direction = true;
+			mfp.index = _getLoopedId(mfp.index + 1);
+			mfp.updateItemHTML();
+		},
+		prev: function() {
+			mfp.direction = false;
+			mfp.index = _getLoopedId(mfp.index - 1);
+			mfp.updateItemHTML();
+		},
+		goTo: function(newIndex) {
+			mfp.direction = (newIndex >= mfp.index);
+			mfp.index = newIndex;
+			mfp.updateItemHTML();
+		},
+		preloadNearbyImages: function() {
+			var p = mfp.st.gallery.preload,
+				preloadBefore = Math.min(p[0], mfp.items.length),
+				preloadAfter = Math.min(p[1], mfp.items.length),
+				i;
+
+			for(i = 1; i <= (mfp.direction ? preloadAfter : preloadBefore); i++) {
+				mfp._preloadItem(mfp.index+i);
+			}
+			for(i = 1; i <= (mfp.direction ? preloadBefore : preloadAfter); i++) {
+				mfp._preloadItem(mfp.index-i);
+			}
+		},
+		_preloadItem: function(index) {
+			index = _getLoopedId(index);
+
+			if(mfp.items[index].preloaded) {
+				return;
+			}
+
+			var item = mfp.items[index];
+			if(!item.parsed) {
+				item = mfp.parseEl( index );
+			}
+
+			_mfpTrigger('LazyLoad', item);
+
+			if(item.type === 'image') {
+				item.img = $('<img class="mfp-img" />').on('load.mfploader', function() {
+					item.hasSize = true;
+				}).on('error.mfploader', function() {
+					item.hasSize = true;
+					item.loadError = true;
+					_mfpTrigger('LazyLoadError', item);
+				}).attr('src', item.src);
+			}
+
+
+			item.preloaded = true;
+		}
+	}
+});
+
+/*
+Touch Support that might be implemented some day
+
+addSwipeGesture: function() {
+	var startX,
+		moved,
+		multipleTouches;
+
+		return;
+
+	var namespace = '.mfp',
+		addEventNames = function(pref, down, move, up, cancel) {
+			mfp._tStart = pref + down + namespace;
+			mfp._tMove = pref + move + namespace;
+			mfp._tEnd = pref + up + namespace;
+			mfp._tCancel = pref + cancel + namespace;
+		};
+
+	if(window.navigator.msPointerEnabled) {
+		addEventNames('MSPointer', 'Down', 'Move', 'Up', 'Cancel');
+	} else if('ontouchstart' in window) {
+		addEventNames('touch', 'start', 'move', 'end', 'cancel');
+	} else {
+		return;
+	}
+	_window.on(mfp._tStart, function(e) {
+		var oE = e.originalEvent;
+		multipleTouches = moved = false;
+		startX = oE.pageX || oE.changedTouches[0].pageX;
+	}).on(mfp._tMove, function(e) {
+		if(e.originalEvent.touches.length > 1) {
+			multipleTouches = e.originalEvent.touches.length;
+		} else {
+			//e.preventDefault();
+			moved = true;
+		}
+	}).on(mfp._tEnd + ' ' + mfp._tCancel, function(e) {
+		if(moved && !multipleTouches) {
+			var oE = e.originalEvent,
+				diff = startX - (oE.pageX || oE.changedTouches[0].pageX);
+
+			if(diff > 20) {
+				mfp.next();
+			} else if(diff < -20) {
+				mfp.prev();
+			}
+		}
+	});
+},
+*/
+
+
+/*>>gallery*/
+
+/*>>retina*/
+
+var RETINA_NS = 'retina';
+
+$.magnificPopup.registerModule(RETINA_NS, {
+	options: {
+		replaceSrc: function(item) {
+			return item.src.replace(/\.\w+$/, function(m) { return '@2x' + m; });
+		},
+		ratio: 1 // Function or number.  Set to 1 to disable.
+	},
+	proto: {
+		initRetina: function() {
+			if(window.devicePixelRatio > 1) {
+
+				var st = mfp.st.retina,
+					ratio = st.ratio;
+
+				ratio = !isNaN(ratio) ? ratio : ratio();
+
+				if(ratio > 1) {
+					_mfpOn('ImageHasSize' + '.' + RETINA_NS, function(e, item) {
+						item.img.css({
+							'max-width': item.img[0].naturalWidth / ratio,
+							'width': '100%'
+						});
+					});
+					_mfpOn('ElementParse' + '.' + RETINA_NS, function(e, item) {
+						item.src = st.replaceSrc(item, ratio);
+					});
+				}
+			}
+
+		}
+	}
+});
+
+/*>>retina*/
+
+/*>>fastclick*/
+/**
+ * FastClick event implementation. (removes 300ms delay on touch devices)
+ * Based on https://developers.google.com/mobile/articles/fast_buttons
+ *
+ * You may use it outside the Magnific Popup by calling just:
+ *
+ * $('.your-el').mfpFastClick(function() {
+ *     console.log('Clicked!');
+ * });
+ *
+ * To unbind:
+ * $('.your-el').destroyMfpFastClick();
+ * 
+ * 
+ * Note that it's a very basic and simple implementation, it blocks ghost click on the same element where it was bound.
+ * If you need something more advanced, use plugin by FT Labs https://github.com/ftlabs/fastclick
+ * 
+ */
+
+(function() {
+	var ghostClickDelay = 1000,
+		supportsTouch = 'ontouchstart' in window,
+		unbindTouchMove = function() {
+			_window.off('touchmove'+ns+' touchend'+ns);
+		},
+		eName = 'mfpFastClick',
+		ns = '.'+eName;
+
+
+	// As Zepto.js doesn't have an easy way to add custom events (like jQuery), so we implement it in this way
+	$.fn.mfpFastClick = function(callback) {
+
+		return $(this).each(function() {
+
+			var elem = $(this),
+				lock;
+
+			if( supportsTouch ) {
+
+				var timeout,
+					startX,
+					startY,
+					pointerMoved,
+					point,
+					numPointers;
+
+				elem.on('touchstart' + ns, function(e) {
+					pointerMoved = false;
+					numPointers = 1;
+
+					point = e.originalEvent ? e.originalEvent.touches[0] : e.touches[0];
+					startX = point.clientX;
+					startY = point.clientY;
+
+					_window.on('touchmove'+ns, function(e) {
+						point = e.originalEvent ? e.originalEvent.touches : e.touches;
+						numPointers = point.length;
+						point = point[0];
+						if (Math.abs(point.clientX - startX) > 10 ||
+							Math.abs(point.clientY - startY) > 10) {
+							pointerMoved = true;
+							unbindTouchMove();
+						}
+					}).on('touchend'+ns, function(e) {
+						unbindTouchMove();
+						if(pointerMoved || numPointers > 1) {
+							return;
+						}
+						lock = true;
+						e.preventDefault();
+						clearTimeout(timeout);
+						timeout = setTimeout(function() {
+							lock = false;
+						}, ghostClickDelay);
+						callback();
+					});
+				});
+
+			}
+
+			elem.on('click' + ns, function() {
+				if(!lock) {
+					callback();
+				}
+			});
+		});
+	};
+
+	$.fn.destroyMfpFastClick = function() {
+		$(this).off('touchstart' + ns + ' click' + ns);
+		if(supportsTouch) _window.off('touchmove'+ns+' touchend'+ns);
+	};
+})();
+
+/*>>fastclick*/
+})(window.jQuery || window.Zepto);
\ No newline at end of file
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/pithos_list.html b/snf-cyclades-app/synnefo/ui/new_ui/ui/pithos_list.html
index c7707e0..7dab5c6 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/pithos_list.html
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/pithos_list.html
@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="stylesheets/app.css" />
     <link rel="stylesheet" href="stylesheets/styles.css" />
     <link rel="stylesheet" href="stylesheets/font_custom.css" />
+    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
 
     <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
     <script src="javascripts/vendor/custom.modernizr.js"></script>
@@ -121,57 +122,32 @@
 						<div class="actions-col">&nbsp;</div>
 					</li>
 					<li>
-						<div class="name-col folder" data-tooltip class="has-tip" title="metadata or info (ex. contains 3 files)">folder1</div>
+						<div class="name-col folder has-tip" data-tooltip title="metadata or info (ex. contains 3 files)">folder1</div>
 						<div class="size-col">123KB</div>
 						<div class="date-col">23/12/12 6:23 am</div>
 						<div class="actions-col">
-							<a href="" class="delete" data-tooltip class="has-tip" title="Delete"><span class="snf-font">n</span></a>
-							<a href="" class="copy"  data-tooltip class="has-tip" title="Copy"><span class="snf-font">q</span></a>
+							<a href="" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
+							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
 						</div>
 					</li>
 					<li>
-						<div class="name-col folder">folder1</div>
+						<div class="name-col image">Image.png</div>
 						<div class="size-col">123KB</div>
 						<div class="date-col">23/12/12 4:23 pm</div>
 						<div class="actions-col">
-							<a href="" class="delete" data-tooltip class="has-tip" title="Delete"><span class="snf-font">n</span></a>
-							<a href="" class="copy"  data-tooltip class="has-tip" title="Copy"><span class="snf-font">q</span></a>
-						</div>
-					</li>
-					<li>
-						<div class="name-col txt"  data-tooltip class="has-tip" title="metadata or info (ex. has been modified 3 times)">file1.txt</div>
-						<div class="size-col">5MB</div>
-						<div class="date-col">23/12/12 6:23 am</div>
-						<div class="actions-col">
-							<a href="" class="delete" data-tooltip class="has-tip" title="Delete"><span class="snf-font">n</span></a>
-							<a href="" class="copy"  data-tooltip class="has-tip" title="Copy"><span class="snf-font">q</span></a>
-						</div>
-					</li>
-					<li>
-						<div class="name-col pdf">mypdfile.pdf</div>
-						<div class="size-col">123KB</div>
-						<div class="date-col">23/12/12 6:23 am</div>
-						<div class="actions-col">
-							<a href="" class="delete" data-tooltip class="has-tip" title="Delete"><span class="snf-font">n</span></a>
-							<a href="" class="copy"  data-tooltip class="has-tip" title="Copy"><span class="snf-font">q</span></a>
-						</div>
-					</li>
-					<li>
-						<div class="name-col folder">folder1</div>
-						<div class="size-col">123KB</div>
-						<div class="date-col">23/12/12 6:23 am</div>
-						<div class="actions-col">
-							<a href="" class="delete" data-tooltip class="has-tip" title="Delete"><span class="snf-font">n</span></a>
-							<a href="" class="copy"  data-tooltip class="has-tip" title="Copy"><span class="snf-font">q</span></a>
+							<a href="" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
+							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
+							<a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" class="show has-tip image"  data-tooltip title="Copy" data-title="my Image">Show</a>
 						</div>
 					</li>
 					<li>
-						<div class="name-col txt">file1.txt</div>
+						<div class="name-col image has-tip"  data-tooltip title="metadata or info (ex. has been modified 3 times)">Myimage.jpg</div>
 						<div class="size-col">5MB</div>
 						<div class="date-col">23/12/12 6:23 am</div>
 						<div class="actions-col">
-							<a href="" class="delete" data-tooltip class="has-tip" title="Delete"><span class="snf-font">n</span></a>
-							<a href="" class="copy"  data-tooltip class="has-tip" title="Copy"><span class="snf-font">q</span></a>
+							<a href="" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
+							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
+							<a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" class="show has-tip image"  data-tooltip title="Copy" data-title="yet another image">Show</a>
 						</div>
 					</li>
 					<li>
@@ -179,8 +155,8 @@
 						<div class="size-col">123KB</div>
 						<div class="date-col">23/12/12 6:23 am</div>
 						<div class="actions-col">
-							<a href="" class="delete" data-tooltip class="has-tip" title="Delete"><span class="snf-font">n</span></a>
-							<a href="" class="copy"  data-tooltip class="has-tip" title="Copy"><span class="snf-font">q</span></a>
+							<a href="" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
+							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
 						</div>
 					</li>
 					<li>
@@ -188,17 +164,18 @@
 						<div class="size-col">123KB</div>
 						<div class="date-col">23/12/12 6:23 am</div>
 						<div class="actions-col">
-							<a href="" class="delete" data-tooltip class="has-tip" title="Delete"><span class="snf-font">n</span></a>
-							<a href="" class="copy"  data-tooltip class="has-tip" title="Copy"><span class="snf-font">q</span></a>
+							<a href="" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
+							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
 						</div>
 					</li>
 					<li>
-						<div class="name-col txt">file1.txt</div>
+						<div class="name-col image">cool.jpg</div>
 						<div class="size-col">5MB</div>
 						<div class="date-col">23/12/12 6:23 am</div>
 						<div class="actions-col">
-							<a href="" class="delete" data-tooltip class="has-tip" title="Delete"><span class="snf-font">n</span></a>
-							<a href="" class="copy"  data-tooltip class="has-tip" title="Copy"><span class="snf-font">q</span></a>
+							<a href="" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
+							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
+							<a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" class="show has-tip image"  data-tooltip title="Copy" data-title="love this pic">Show</a>
 						</div>
 					</li>
 					<li>
@@ -206,8 +183,8 @@
 						<div class="size-col">123KB</div>
 						<div class="date-col">23/12/12 6:23 am</div>
 						<div class="actions-col">
-							<a href="" class="delete" data-tooltip class="has-tip" title="Delete"><span class="snf-font">n</span></a>
-							<a href="" class="copy"  data-tooltip class="has-tip" title="Copy"><span class="snf-font">q</span></a>
+							<a href="http://www.synnefo.org/images/synnefo-logo@2x.png" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
+							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
 						</div>
 					</li>
 					<li>
@@ -215,8 +192,8 @@
 						<div class="size-col">123KB</div>
 						<div class="date-col">23/12/12 6:23 am</div>
 						<div class="actions-col">
-							<a href="" class="delete" data-tooltip class="has-tip" title="Delete"><span class="snf-font">n</span></a>
-							<a href="" class="copy"  data-tooltip class="has-tip" title="Copy"><span class="snf-font">q</span></a>
+							<a href="http://www.synnefo.org/images/synnefo-logo@2x.png" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
+							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
 						</div>
 					</li>
 					<li>
@@ -224,8 +201,9 @@
 						<div class="size-col">5MB</div>
 						<div class="date-col">23/12/12 6:23 am</div>
 						<div class="actions-col">
-							<a href="" class="delete" data-tooltip class="has-tip" title="Delete"><span class="snf-font">n</span></a>
-							<a href="" class="copy"  data-tooltip class="has-tip" title="Copy"><span class="snf-font">q</span></a>
+							<a href="http://www.synnefo.org/images/synnefo-logo@2x.png" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
+							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
+							<a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" class="show has-tip txt"  data-tooltip title="Copy">Show</a>
 						</div>
 					</li>
 					<li>
@@ -233,17 +211,8 @@
 						<div class="size-col">123KB</div>
 						<div class="date-col">23/12/12 6:23 am</div>
 						<div class="actions-col">
-							<a href="" class="delete" data-tooltip class="has-tip" title="Delete"><span class="snf-font">n</span></a>
-							<a href="" class="copy"  data-tooltip class="has-tip" title="Copy"><span class="snf-font">q</span></a>
-						</div>
-					</li>
-					<li>
-						<div class="name-col folder">folder1</div>
-						<div class="size-col">123KB</div>
-						<div class="date-col">23/12/12</div>
-						<div class="actions-col">
-							<a href="" class="delete" data-tooltip class="has-tip" title="Delete"><span class="snf-font">n</span></a>
-							<a href="" class="copy"  data-tooltip class="has-tip" title="Copy"><span class="snf-font">q</span></a>
+							<a href="http://www.synnefo.org/images/synnefo-logo@2x.png" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
+							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
 						</div>
 					</li>
 				</ul>
@@ -251,9 +220,11 @@
 			</div>
 		</div>
 		<div class="progress-bar">
-			<span class="counter">6 files uploading</span>
-			<div class="progress-wrap"><div class="progress"><span class="meter" style="width:25%"></span></div></div>
-			<span class="more"><a href="">details ></a></span>
+			<div class="onecol">
+				<span class="counter">6 files uploading</span>
+				<div class="progress-wrap"><div class="progress"><span class="meter" style="width:25%"></span></div></div>
+				<span class="more"><a href="">details ></a></span>
+			</div>
 		</div>
 	</div>
 	
@@ -288,6 +259,7 @@
 	<script src="javascripts/foundation/foundation.topbar.js"></script>
 	<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
 	<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
+	<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
 	<script type="text/javascript" src="javascripts/dropzone.js"></script>
 	
 	<script src="javascripts/common.js"></script>
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss
index d35f406..38a5c8c 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss
@@ -29,7 +29,7 @@ $body-font-family: "Open Sans", "Helvetica", Helvetica, Arial, sans-serif;
 
 // We use these as default colors throughout
 $primary-color: #919194;
-$secondary-color: #ff7bac;
+$secondary-color: #3582AC;
 $black:#333;
 $white:#fff;
 
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/app.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/app.scss
index f426c4e..fbd3924 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/app.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/app.scss
@@ -859,6 +859,7 @@ body.with-overlay {
 			border:1px solid transparent;
 			@extend .clearfix;
 			text-align: left;
+			font-weight: normal;
 			.name-col {
 				float:left;
 				width:35%;
@@ -866,6 +867,8 @@ body.with-overlay {
 				&.folder { background:url(../images/icon-folder.png) no-repeat left center; }
 				&.txt { background:url(../images/icon-txt.png) no-repeat left center; }
 				&.pdf { background:url(../images/icon-pdf.png) no-repeat left center; }
+				&.image { background:url(../images/icon-image.png) no-repeat left center; }
+				font-weight: normal;
 			}
 			.size-col {
 				float:left;
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/magnific-popup.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/magnific-popup.scss
new file mode 100644
index 0000000..db7fce1
--- /dev/null
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/magnific-popup.scss
@@ -0,0 +1,598 @@
+/* Magnific Popup CSS */
+
+@import "settings";
+
+////////////////////////
+//
+// Contents:
+//
+// 1. Default Settings
+// 2. General styles
+//    - Transluscent overlay
+//    - Containers, wrappers
+//    - Cursors
+//    - Helper classes
+// 3. Appearance
+//    - Preloader & text that displays error messages
+//    - CSS reset for buttons
+//    - Close icon
+//    - "1 of X" counter
+//    - Navigation (left/right) arrows
+//    - Iframe content type styles
+//    - Image content type styles
+//    - Media query where size of arrows is reduced
+//    - IE7 support
+//
+////////////////////////
+
+
+
+////////////////////////
+// 1. Default Settings
+////////////////////////
+
+$overlay-color:                   #0b0b0b !default;
+$overlay-opacity:                 0.8 !default;
+$shadow:                          0 0 8px rgba(0, 0, 0, 0.6) !default; // shadow on image or iframe
+$popup-padding-left:              8px !default; // Padding from left and from right side
+$popup-padding-left-mobile:       6px !default; // Same as above, but is applied when width of window is less than 800px
+
+$z-index-base:                    1040 !default; // Base z-index of popup
+$include-arrows:                  true !default; // include styles for nav arrows
+$controls-opacity:                0.65 !default;
+$controls-color:                  #FFF !default;
+$inner-close-icon-color:          #333 !default;
+$controls-text-color:             #CCC !default; // Color of preloader and "1 of X" indicator
+$controls-text-color-hover:       #FFF !default;
+$IE7support:                      true !default; // Very basic IE7 support
+
+// Iframe-type options
+$include-iframe-type:             true !default;
+$iframe-padding-top:              40px !default;
+$iframe-background:               #000 !default;
+$iframe-max-width:                900px !default;
+$iframe-ratio:                    9/16 !default;
+
+// Image-type options
+$include-image-type:              true !default;
+$image-background:                #444 !default;
+$image-padding-top:               40px !default;
+$image-padding-bottom:            40px !default;
+$include-mobile-layout-for-image: true !default; // Removes paddings from top and bottom
+
+// Image caption options
+$caption-title-color:             #F3F3F3 !default;
+$caption-subtitle-color:          #BDBDBD !default;
+
+// A11y
+$use-visuallyhidden:              false !default; // Hide content from browsers, but make it available for screen readers 
+
+
+
+////////////////////////
+// 2. General styles
+////////////////////////
+
+// Transluscent overlay
+.mfp-bg {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: $z-index-base + 2;
+  overflow: hidden;
+  position: fixed;
+
+  background: $overlay-color;
+  opacity: $overlay-opacity;
+  @if $IE7support {
+    filter: alpha(opacity=$overlay-opacity*100);
+  }
+}
+
+// Wrapper for popup
+.mfp-wrap {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: $z-index-base + 3;
+  position: fixed;
+  outline: none !important;
+  -webkit-backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar
+}
+
+// Root container
+.mfp-container {
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  padding: 0 $popup-padding-left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+// Vertical centerer helper
+.mfp-container:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+
+// Remove vertical centering when popup has class `mfp-align-top`
+.mfp-align-top .mfp-container:before {
+  display: none;
+}
+
+// Popup content holder
+.mfp-content {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 auto;
+  text-align: left;
+  z-index: $z-index-base + 5;
+}
+.mfp-inline-holder .mfp-content,
+.mfp-ajax-holder .mfp-content {
+  width: 100%;
+  cursor: auto;
+}
+
+// Cursors
+.mfp-ajax-cur {
+  cursor: progress;
+}
+.mfp-zoom-out-cur,
+.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+  cursor: -moz-zoom-out;
+  cursor: -webkit-zoom-out;
+  cursor: zoom-out;
+}
+.mfp-zoom {
+  cursor: pointer;
+  cursor: -webkit-zoom-in;
+  cursor: -moz-zoom-in;
+  cursor: zoom-in;
+}
+.mfp-auto-cursor .mfp-content {
+  cursor: auto;
+}
+
+.mfp-close,
+.mfp-arrow,
+.mfp-preloader,
+.mfp-counter {
+  -webkit-user-select:none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+// Hide the image during the loading
+.mfp-loading.mfp-figure {
+  display: none;
+}
+
+// Helper class that hides stuff
+@if $use-visuallyhidden {
+  // From HTML5 Boilerplate https://github.com/h5bp/html5-boilerplate/blob/v4.2.0/doc/css.md#visuallyhidden
+  .mfp-hide {
+    border: 0 !important;
+    clip: rect(0 0 0 0) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+  }
+} @else {
+  .mfp-hide {
+    display: none !important;
+  }
+}
+
+
+////////////////////////
+// 3. Appearance
+////////////////////////
+
+// Preloader and text that displays error messages
+.mfp-preloader {
+  color: $controls-text-color;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  text-align: center;
+  margin-top: -0.8em;
+  left: 8px;
+  right: 8px;
+  z-index: $z-index-base + 4;
+}
+.mfp-preloader a {
+  color: $controls-text-color;
+}
+.mfp-preloader a:hover {
+  color: $controls-text-color-hover;
+}
+
+// Hide preloader when content successfully loaded
+.mfp-s-ready .mfp-preloader {
+  display: none;
+}
+
+// Hide content when it was not loaded
+.mfp-s-error .mfp-content {
+  display: none;
+}
+
+
+// CSS-reset for buttons
+button.mfp-close,
+button.mfp-arrow {
+  overflow: visible;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  display: block;
+  padding: 0;
+  z-index: $z-index-base + 6;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+button::-moz-focus-inner {
+    padding: 0;
+    border: 0
+}
+
+
+// Close icon
+.mfp-close {
+  width: 44px;
+  height: 44px;
+  line-height: 44px;
+
+  position: absolute;
+  right: 0;
+  top: 0;
+  text-decoration: none;
+  text-align: center;
+  opacity: $controls-opacity;
+  padding: 0 0 18px 10px;
+  color: $controls-color;
+
+  font-style: normal;
+  font-size: 28px;
+  font-family: Arial, Baskerville, monospace;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+
+  &:active {
+    top: 1px;
+  }
+}
+.mfp-close-btn-in .mfp-close {
+  color: $inner-close-icon-color;
+}
+.mfp-image-holder .mfp-close,
+.mfp-iframe-holder .mfp-close {
+  color: $controls-color;
+  right: -6px;
+  text-align: right;
+  padding-right: 6px;
+  width: 100%;
+}
+
+// "1 of X" counter
+.mfp-counter {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: $controls-text-color;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+// Navigation arrows
+@if $include-arrows {
+  .mfp-arrow {
+    position: absolute;
+    opacity: $controls-opacity;
+    margin: 0;
+    top: 50%;
+    margin-top: -55px;
+    padding: 0;
+    width: 90px;
+    height: 110px;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+  }
+  .mfp-arrow:active {
+    margin-top: -54px;
+  }
+  .mfp-arrow:hover,
+  .mfp-arrow:focus {
+    opacity: 1;
+  }
+
+  .mfp-arrow {
+
+    &:before,
+    &:after,
+    .mfp-b,
+    .mfp-a {
+      content: '';
+      display: block;
+      width: 0;
+      height: 0;
+      position: absolute;
+      left: 0;
+      top: 0;
+      margin-top: 35px;
+      margin-left: 35px;
+      border: medium inset transparent;
+    }
+
+    &:after,
+    .mfp-a {
+
+      border-top-width: 13px;
+      border-bottom-width: 13px;
+      top:8px;
+    }
+
+    &:before,
+    .mfp-b {
+      border-top-width: 21px;
+      border-bottom-width: 21px;
+    }
+
+  }
+
+  .mfp-arrow-left {
+    left: 0;
+
+    &:after,
+    .mfp-a {
+      border-right: 17px solid #FFF;
+      margin-left: 31px;
+    }
+    &:before,
+    .mfp-b {
+      margin-left: 25px;
+      border-right: 27px solid #3f3f3f;
+    }
+  }
+
+  .mfp-arrow-right {
+    right: 0;
+    &:after,
+    .mfp-a {
+      border-left: 17px solid #FFF;
+      margin-left: 39px
+    }
+    &:before,
+    .mfp-b {
+      border-left: 27px solid #3f3f3f;
+    }
+  }
+}
+
+
+
+// Iframe content type
+@if $include-iframe-type {
+  .mfp-iframe-holder {
+    padding-top: $iframe-padding-top;
+    padding-bottom: $iframe-padding-top;
+  }
+  .mfp-iframe-holder .mfp-content {
+    line-height: 0;
+    width: 100%;
+    max-width: $iframe-max-width;
+  }
+  .mfp-iframe-scaler {
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    padding-top: $iframe-ratio * 100%;
+  }
+  .mfp-iframe-scaler iframe {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: $shadow;
+    background: $iframe-background;
+  }
+  .mfp-iframe-holder .mfp-close {
+    top: -40px;
+  }
+}
+
+
+
+// Image content type
+@if $include-image-type {
+
+  /* Main image in popup */
+  img.mfp-img {
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    display: block;
+    line-height: 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: $image-padding-top 0 $image-padding-bottom;
+    margin: 0 auto;
+  }
+
+  /* The shadow behind the image */
+  .mfp-figure:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: $image-padding-top;
+    bottom: $image-padding-bottom;
+    display: block;
+    right: 0;
+    width: auto;
+    height: auto;
+    z-index: -1;
+    box-shadow: $shadow;
+    background: $image-background;
+  }
+  .mfp-figure {
+    line-height: 0;
+  }
+  .mfp-bottom-bar {
+    margin-top:  -36px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    cursor: auto;
+  }
+  .mfp-title {
+    text-align: left;
+    line-height: 18px;
+    color: $caption-title-color;
+    word-wrap: break-word;
+    padding-right: 36px; // leave some space for counter at right side
+  }
+
+  .mfp-figure small {
+    color: $caption-subtitle-color;
+    display: block;
+    font-size: 12px;
+    line-height: 14px;
+  }
+  .mfp-image-holder .mfp-content {
+    max-width: 100%;
+  }
+
+  .mfp-gallery .mfp-image-holder .mfp-figure {
+    cursor: pointer;
+  }
+
+
+  @if $include-mobile-layout-for-image {
+
+      @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) {
+        /**
+         * Remove all paddings around the image on small screen
+         */
+        .mfp-img-mobile .mfp-image-holder {
+          padding-left: 0;
+          padding-right: 0;
+        }
+        .mfp-img-mobile img.mfp-img {
+          padding: 0;
+        }
+        /* The shadow behind the image */
+        .mfp-img-mobile .mfp-figure:after {
+          top: 0;
+          bottom: 0;
+        }
+
+        .mfp-img-mobile .mfp-bottom-bar {
+          background: rgba(0,0,0,0.6);
+          bottom: 0;
+          margin: 0;
+          top: auto;
+          padding: 3px 5px;
+          position: fixed;
+          -webkit-box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          box-sizing: border-box;
+        }
+        .mfp-img-mobile .mfp-bottom-bar:empty {
+          padding: 0;
+        }
+        .mfp-img-mobile .mfp-counter {
+          right: 5px;
+          top: 3px;
+        }
+        .mfp-img-mobile .mfp-close {
+          top: 0;
+          right: 0;
+          width: 35px;
+          height: 35px;
+          line-height: 35px;
+          background: rgba(0, 0, 0, 0.6);
+          position: fixed;
+          text-align: center;
+          padding: 0;
+        }
+        .mfp-img-mobile .mfp-figure small {
+          display: inline;
+          margin-left: 5px;
+        }
+      }
+  }
+
+}
+
+
+
+// Scale navigation arrows and reduce padding from sides
+@media all and (max-width: 900px) {
+  .mfp-arrow {
+    -webkit-transform: scale(0.75);
+    transform: scale(0.75);
+  }
+  .mfp-arrow-left {
+    -webkit-transform-origin: 0;
+    transform-origin: 0;
+  }
+  .mfp-arrow-right {
+    -webkit-transform-origin: 100%;
+    transform-origin: 100%;
+  }
+  .mfp-container {
+    padding-left: $popup-padding-left-mobile;
+    padding-right: $popup-padding-left-mobile;
+  }
+}
+
+
+
+// IE7 support
+// Styles that make popup look nicier in old IE
+@if $IE7support {
+  .mfp-ie7 {
+    .mfp-img {
+      padding: 0;
+    }
+    .mfp-bottom-bar {
+      width: 600px;
+      left: 50%;
+      margin-left: -300px;
+      margin-top: 5px;
+      padding-bottom: 5px;
+    }
+    .mfp-container {
+      padding: 0;
+    }
+    .mfp-content {
+      padding-top: 44px;
+    }
+    .mfp-close {
+      top: 0;
+      right: 0;
+      padding-top: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
index 595f57d..95fc9df 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
@@ -1703,7 +1703,7 @@ small {
 code {
   font-family: Consolas, "Liberation Mono", Courier, monospace;
   font-weight: bold;
-  color: #ff2f7c;
+  color: #235672;
 }
 
 /* Lists */
@@ -2014,17 +2014,17 @@ button:hover, button:focus, .button:hover, .button:focus {
 }
 /* line 177, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.secondary, .button.secondary {
-  background-color: #ff7bac;
-  border-color: #ff488c;
-  color: #333333;
+  background-color: #3582ac;
+  border-color: #296585;
+  color: white;
 }
 /* line 123, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
-  background-color: #ff488c;
+  background-color: #296585;
 }
-/* line 129, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
+/* line 134, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
-  color: #333333;
+  color: white;
 }
 /* line 178, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.success, .button.success {
@@ -2042,17 +2042,17 @@ button.success:hover, button.success:focus, .button.success:hover, .button.succe
 }
 /* line 179, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.alert, .button.alert {
-  background-color: #ff7bac;
-  border-color: #ff488c;
-  color: #333333;
+  background-color: #3582ac;
+  border-color: #296585;
+  color: white;
 }
 /* line 123, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus {
-  background-color: #ff488c;
+  background-color: #296585;
 }
-/* line 129, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
+/* line 134, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus {
-  color: #333333;
+  color: white;
 }
 /* line 181, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.large, .button.large {
@@ -2118,9 +2118,9 @@ button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[dis
 }
 /* line 190, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.disabled.secondary, button[disabled].secondary, .button.disabled.secondary, .button[disabled].secondary {
-  background-color: #ff7bac;
-  border-color: #ff488c;
-  color: #333333;
+  background-color: #3582ac;
+  border-color: #296585;
+  color: white;
   cursor: default;
   opacity: 0.6;
   -webkit-box-shadow: none;
@@ -2128,15 +2128,15 @@ button.disabled.secondary, button[disabled].secondary, .button.disabled.secondar
 }
 /* line 123, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
-  background-color: #ff488c;
+  background-color: #296585;
 }
-/* line 129, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
+/* line 134, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
-  color: #333333;
+  color: white;
 }
 /* line 147, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
-  background-color: #ff7bac;
+  background-color: #3582ac;
 }
 /* line 191, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.disabled.success, button[disabled].success, .button.disabled.success, .button[disabled].success {
@@ -2162,9 +2162,9 @@ button.disabled.success:hover, button.disabled.success:focus, button[disabled].s
 }
 /* line 192, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.disabled.alert, button[disabled].alert, .button.disabled.alert, .button[disabled].alert {
-  background-color: #ff7bac;
-  border-color: #ff488c;
-  color: #333333;
+  background-color: #3582ac;
+  border-color: #296585;
+  color: white;
   cursor: default;
   opacity: 0.6;
   -webkit-box-shadow: none;
@@ -2172,15 +2172,15 @@ button.disabled.alert, button[disabled].alert, .button.disabled.alert, .button[d
 }
 /* line 123, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
-  background-color: #ff488c;
+  background-color: #296585;
 }
-/* line 129, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
+/* line 134, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
-  color: #333333;
+  color: white;
 }
 /* line 147, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
 button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
-  background-color: #ff7bac;
+  background-color: #3582ac;
 }
 
 /* line 197, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_buttons.scss */
@@ -2596,8 +2596,8 @@ span.error, small.error {
   margin-bottom: 1em;
   font-size: 0.75em;
   font-weight: bold;
-  background: #ff7bac;
-  color: #333333;
+  background: #3582ac;
+  color: white;
   display: none;
 }
 
@@ -2605,8 +2605,8 @@ span.error, small.error {
 .error input,
 .error textarea,
 .error select {
-  border-color: #ff7bac;
-  background-color: rgba(255, 123, 172, 0.1);
+  border-color: #3582ac;
+  background-color: rgba(53, 130, 172, 0.1);
   margin-bottom: 0;
 }
 /* line 230, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_forms.scss */
@@ -2619,7 +2619,7 @@ span.error, small.error {
 /* line 370, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_forms.scss */
 .error label,
 .error label.error {
-  color: #ff7bac;
+  color: #3582ac;
 }
 /* line 374, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_forms.scss */
 .error small.error {
@@ -2629,8 +2629,8 @@ span.error, small.error {
   margin-bottom: 1em;
   font-size: 0.75em;
   font-weight: bold;
-  background: #ff7bac;
-  color: #333333;
+  background: #3582ac;
+  color: white;
 }
 /* line 378, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_forms.scss */
 .error span.error-message {
@@ -2640,8 +2640,8 @@ span.error, small.error {
 /* line 384, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_forms.scss */
 input.error,
 textarea.error {
-  border-color: #ff7bac;
-  background-color: rgba(255, 123, 172, 0.1);
+  border-color: #3582ac;
+  background-color: rgba(53, 130, 172, 0.1);
 }
 /* line 230, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_forms.scss */
 input.error:focus,
@@ -2652,8 +2652,8 @@ textarea.error:focus {
 
 /* line 388, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_forms.scss */
 .error select {
-  border-color: #ff7bac;
-  background-color: rgba(255, 123, 172, 0.1);
+  border-color: #3582ac;
+  background-color: rgba(53, 130, 172, 0.1);
 }
 /* line 230, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_forms.scss */
 .error select:focus {
@@ -2663,7 +2663,7 @@ textarea.error:focus {
 
 /* line 392, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_forms.scss */
 label.error {
-  color: #ff7bac;
+  color: #3582ac;
 }
 
 /* Button Groups */
@@ -2931,7 +2931,7 @@ label.error {
 }
 /* line 79, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_split-buttons.scss */
 .split.button.secondary span {
-  border-left-color: #ff2f7c;
+  border-left-color: #235672;
 }
 /* line 142, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_split-buttons.scss */
 .split.button.secondary span:before {
@@ -2939,7 +2939,7 @@ label.error {
 }
 /* line 79, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_split-buttons.scss */
 .split.button.alert span {
-  border-left-color: #ff2f7c;
+  border-left-color: #235672;
 }
 /* line 79, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_split-buttons.scss */
 .split.button.success span {
@@ -4292,11 +4292,11 @@ label.error {
 }
 /* line 253, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_top-bar.scss */
 .top-bar-section ul li > a.button.secondary {
-  background: #ff7bac;
+  background: #3582ac;
 }
 /* line 255, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_top-bar.scss */
 .top-bar-section ul li > a.button.secondary.hover {
-  background: #ff488c;
+  background: #296585;
 }
 /* line 259, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_top-bar.scss */
 .top-bar-section ul li > a.button.success {
@@ -4308,11 +4308,11 @@ label.error {
 }
 /* line 265, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_top-bar.scss */
 .top-bar-section ul li > a.button.alert {
-  background: #ff7bac;
+  background: #3582ac;
 }
 /* line 267, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_top-bar.scss */
 .top-bar-section ul li > a.button.alert.hover {
-  background: #ff488c;
+  background: #296585;
 }
 /* line 275, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_top-bar.scss */
 .top-bar-section ul li.hover > a {
@@ -5490,15 +5490,15 @@ label.error {
 }
 /* line 103, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_alert-boxes.scss */
 .alert-box.alert {
-  background-color: #ff7bac;
-  border-color: #ff488c;
-  color: #48001b;
+  background-color: #3582ac;
+  border-color: #296585;
+  color: white;
 }
 /* line 104, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_alert-boxes.scss */
 .alert-box.secondary {
-  background-color: #ff7bac;
-  border-color: #ff488c;
-  color: #48001b;
+  background-color: #3582ac;
+  border-color: #296585;
+  color: white;
 }
 
 /* Breadcrumbs */
@@ -5774,9 +5774,9 @@ form.custom .custom.dropdown.open.large ul {
 }
 /* line 211, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_custom-forms.scss */
 form.custom .error .custom.dropdown {
-  border-color: #ff7bac;
-  background-color: rgba(255, 123, 172, 0.1);
-  background: rgba(255, 123, 172, 0.1);
+  border-color: #3582ac;
+  background-color: rgba(53, 130, 172, 0.1);
+  background: rgba(53, 130, 172, 0.1);
   margin-bottom: 0;
 }
 /* line 230, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_forms.scss */
@@ -5888,8 +5888,8 @@ kbd {
 }
 /* line 80, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_labels.scss */
 .label.alert {
-  background-color: #ff7bac;
-  color: #333333;
+  background-color: #3582ac;
+  color: white;
 }
 /* line 81, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_labels.scss */
 .label.success {
@@ -5898,8 +5898,8 @@ kbd {
 }
 /* line 82, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_labels.scss */
 .label.secondary {
-  background-color: #ff7bac;
-  color: #333333;
+  background-color: #3582ac;
+  color: white;
 }
 
 /* Inline Lists */
@@ -6130,7 +6130,7 @@ ul.pagination li {
 }
 /* line 57, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_progress-bars.scss */
 .progress.secondary .meter {
-  background: #ff7bac;
+  background: #3582ac;
   height: 100%;
   display: block;
 }
@@ -6142,7 +6142,7 @@ ul.pagination li {
 }
 /* line 59, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_progress-bars.scss */
 .progress.alert .meter {
-  background: #ff7bac;
+  background: #3582ac;
   height: 100%;
   display: block;
 }
@@ -6814,8 +6814,8 @@ a.th {
 }
 /* line 95, ../sass/app.scss */
 .btn1:hover, .btn2:hover, .btn3:hover, .create-vm .select-flavor dl dt span:hover, .upload-widget .btns a:hover, .btn4:hover, .header .new-btn a:hover, .details .top .actions ul li a:hover, .btn1.current, .current.btn2, .current.btn3, .create-vm .select-flavor dl dt span.current, .upload-widget .btns a.current, .current.btn4, .header .new-btn a.current, .details .top .actions ul li a.current {
-  border-color: #ff7bac;
-  background: #ff7bac;
+  border-color: #3582ac;
+  background: #3582ac;
   color: white;
 }
 /* line 100, ../sass/app.scss */
@@ -6825,9 +6825,9 @@ a.th {
 
 /* line 106, ../sass/app.scss */
 .btn2 {
-  color: #ff7bac;
+  color: #3582ac;
   background: white;
-  border-color: #ff7bac;
+  border-color: #3582ac;
 }
 /* line 112, ../sass/app.scss */
 .btn2:hover, .btn2.current {
@@ -6842,7 +6842,7 @@ a.th {
 }
 /* line 124, ../sass/app.scss */
 .btn3:hover, .create-vm .select-flavor dl dt span:hover, .upload-widget .btns a:hover, .btn3.current, .create-vm .select-flavor dl dt span.current, .upload-widget .btns a.current {
-  color: #ff7bac;
+  color: #3582ac;
   background: white;
   border-color: white;
 }
@@ -6948,7 +6948,7 @@ a:hover {
 
 /* line 206, ../sass/app.scss */
 body.with-overlay {
-  background: #ff7bac;
+  background: #3582ac;
 }
 
 /* line 210, ../sass/app.scss */
@@ -7006,7 +7006,7 @@ body.with-overlay {
 }
 /* line 248, ../sass/app.scss */
 .header .actions ul li a.active:hover {
-  color: #ff7bac;
+  color: #3582ac;
   cursor: pointer;
 }
 /* line 253, ../sass/app.scss */
@@ -7080,7 +7080,7 @@ body.with-overlay {
 
 /* line 319, ../sass/app.scss */
 .info.alert {
-  background: #ff7bac;
+  background: #3582ac;
   color: white;
 }
 
@@ -7118,8 +7118,8 @@ body.with-overlay {
 }
 /* line 350, ../sass/app.scss */
 .items-list li .add-new a:hover {
-  border-color: #ff7bac;
-  color: #ff7bac;
+  border-color: #3582ac;
+  color: #3582ac;
 }
 /* line 356, ../sass/app.scss */
 .items-list li .img-wrap {
@@ -7144,7 +7144,7 @@ body.with-overlay {
 }
 /* line 366, ../sass/app.scss */
 .items-list li .container.set-border {
-  border-color: #ff7bac;
+  border-color: #3582ac;
 }
 /* line 371, ../sass/app.scss */
 .items-list li .container .options {
@@ -7172,7 +7172,7 @@ body.with-overlay {
 }
 /* line 390, ../sass/app.scss */
 .items-list li .container .options .wrap a:hover {
-  color: #ff7bac;
+  color: #3582ac;
 }
 /* line 400, ../sass/app.scss */
 .items-list li .check {
@@ -7192,7 +7192,7 @@ body.with-overlay {
 }
 /* line 411, ../sass/app.scss */
 .items-list li .check.active {
-  color: #ff7bac;
+  color: #3582ac;
 }
 /* line 415, ../sass/app.scss */
 .items-list li .info-box {
@@ -7423,7 +7423,7 @@ body.with-overlay {
 }
 /* line 597, ../sass/app.scss */
 .details .close:hover {
-  color: #ff7bac;
+  color: #3582ac;
 }
 
 /* line 607, ../sass/app.scss */
@@ -7435,7 +7435,7 @@ body.with-overlay {
 
 /* line 613, ../sass/app.scss */
 .overlay {
-  background: #ff7bac;
+  background: #3582ac;
   position: relative;
   z-index: 10;
 }
@@ -7503,7 +7503,7 @@ body.with-overlay {
 }
 /* line 670, ../sass/app.scss */
 .create-vm .select-os li:hover h2, .create-vm .select-os li:hover p, .create-vm .select-os li:hover a, .create-vm .select-os li.selected h2, .create-vm .select-os li.selected p, .create-vm .select-os li.selected a {
-  color: #ff7bac;
+  color: #3582ac;
 }
 /* line 674, ../sass/app.scss */
 .create-vm .select-os li a {
@@ -7583,7 +7583,7 @@ body.with-overlay {
 /* line 730, ../sass/app.scss */
 #vm-connect .ssh span {
   padding: 10px 30px;
-  background: #ff7bac;
+  background: #3582ac;
   color: white;
 }
 
@@ -7593,7 +7593,7 @@ body.with-overlay {
 }
 /* line 743, ../sass/app.scss */
 .reveal-modal a {
-  color: #ff7bac;
+  color: #3582ac;
 }
 /* line 745, ../sass/app.scss */
 .reveal-modal a:hover {
@@ -7602,7 +7602,7 @@ body.with-overlay {
 /* line 748, ../sass/app.scss */
 .reveal-modal a.close-reveal-modal:hover {
   text-decoration: none;
-  color: #ff7bac;
+  color: #3582ac;
 }
 
 /* line 757, ../sass/app.scss */
@@ -7647,7 +7647,7 @@ body.with-overlay {
 
 /* line 805, ../sass/app.scss */
 .editable .editbuttons a {
-  color: #ff7bac;
+  color: #3582ac;
 }
 /* line 808, ../sass/app.scss */
 .editable .editbuttons a.save, .editable .editbuttons a.cancel {
@@ -7690,7 +7690,7 @@ body.with-overlay {
 }
 /* line 835, ../sass/app.scss */
 .storage .lt-sidebar ul li:hover > a {
-  color: #ff7bac;
+  color: #3582ac;
 }
 /* line 837, ../sass/app.scss */
 .storage .lt-sidebar ul li:hover > a + span {
@@ -7699,7 +7699,7 @@ body.with-overlay {
 /* line 842, ../sass/app.scss */
 .storage .lt-sidebar ul li span {
   float: right;
-  color: #ff7bac;
+  color: #3582ac;
   display: none;
 }
 /* line 851, ../sass/app.scss */
@@ -7715,130 +7715,136 @@ body.with-overlay {
   padding: 10px 20px;
   border: 1px solid transparent;
   text-align: left;
+  font-weight: normal;
 }
-/* line 862, ../sass/app.scss */
+/* line 863, ../sass/app.scss */
 .storage .files li .name-col {
   float: left;
   width: 35%;
   padding-left: 50px;
+  font-weight: normal;
 }
-/* line 866, ../sass/app.scss */
+/* line 867, ../sass/app.scss */
 .storage .files li .name-col.folder {
   background: url(../images/icon-folder.png) no-repeat left center;
 }
-/* line 867, ../sass/app.scss */
+/* line 868, ../sass/app.scss */
 .storage .files li .name-col.txt {
   background: url(../images/icon-txt.png) no-repeat left center;
 }
-/* line 868, ../sass/app.scss */
+/* line 869, ../sass/app.scss */
 .storage .files li .name-col.pdf {
   background: url(../images/icon-pdf.png) no-repeat left center;
 }
 /* line 870, ../sass/app.scss */
+.storage .files li .name-col.image {
+  background: url(../images/icon-image.png) no-repeat left center;
+}
+/* line 873, ../sass/app.scss */
 .storage .files li .size-col {
   float: left;
   width: 10%;
 }
-/* line 874, ../sass/app.scss */
+/* line 877, ../sass/app.scss */
 .storage .files li .date-col {
   float: left;
   width: 20%;
 }
-/* line 878, ../sass/app.scss */
+/* line 881, ../sass/app.scss */
 .storage .files li .actions-col {
   float: left;
   width: 30%;
   visibility: hidden;
 }
-/* line 883, ../sass/app.scss */
+/* line 886, ../sass/app.scss */
 .storage .files li .actions-col a {
-  color: #ff7bac;
+  color: #3582ac;
   margin-right: 10px;
 }
-/* line 886, ../sass/app.scss */
+/* line 889, ../sass/app.scss */
 .storage .files li .actions-col a:hover {
   color: #919194;
 }
-/* line 890, ../sass/app.scss */
+/* line 893, ../sass/app.scss */
 .storage .files li:hover {
-  border-color: #ff7bac;
+  border-color: #3582ac;
 }
-/* line 892, ../sass/app.scss */
+/* line 895, ../sass/app.scss */
 .storage .files li:hover .actions-col {
   visibility: visible;
 }
-/* line 894, ../sass/app.scss */
+/* line 897, ../sass/app.scss */
 .storage .files li.titles {
   color: #919194;
 }
-/* line 896, ../sass/app.scss */
+/* line 899, ../sass/app.scss */
 .storage .files li.titles .name-col {
   padding-left: 0;
 }
-/* line 897, ../sass/app.scss */
+/* line 900, ../sass/app.scss */
 .storage .files li.titles:hover {
   border-color: transparent;
 }
-/* line 904, ../sass/app.scss */
+/* line 907, ../sass/app.scss */
 .storage .breadcrumbs li:first-child {
   font-weight: bold;
 }
-/* line 906, ../sass/app.scss */
+/* line 909, ../sass/app.scss */
 .storage .breadcrumbs li:first-child a {
   color: #333333;
 }
-/* line 908, ../sass/app.scss */
+/* line 911, ../sass/app.scss */
 .storage .breadcrumbs li:first-child a:hover {
-  color: #ff7bac;
+  color: #3582ac;
 }
-/* line 913, ../sass/app.scss */
+/* line 916, ../sass/app.scss */
 .storage .breadcrumbs a:hover {
-  color: #ff7bac;
+  color: #3582ac;
 }
 
-/* line 919, ../sass/app.scss */
+/* line 922, ../sass/app.scss */
 .progress-bar {
   position: fixed;
   bottom: 0;
   left: 0;
-  border-top: 1px solid #ff7bac;
+  border-top: 1px solid #3582ac;
   width: 100%;
   background: #fff;
   padding: 20px 0 20px 310px;
   color: #919194;
 }
-/* line 928, ../sass/app.scss */
+/* line 931, ../sass/app.scss */
 .progress-bar span.counter {
   display: inline-block;
   margin-right: 20px;
   float: left;
 }
-/* line 933, ../sass/app.scss */
+/* line 936, ../sass/app.scss */
 .progress-bar a:hover {
-  color: #ff7bac;
+  color: #3582ac;
 }
-/* line 936, ../sass/app.scss */
+/* line 939, ../sass/app.scss */
 .progress-bar div.progress-wrap {
   display: inline-block;
   float: left;
   width: 40%;
   margin-right: 60px;
 }
-/* line 941, ../sass/app.scss */
+/* line 944, ../sass/app.scss */
 .progress-bar div.progress-wrap .progress {
   position: relative;
   top: 2px;
 }
-/* line 946, ../sass/app.scss */
+/* line 949, ../sass/app.scss */
 .progress-bar span.more {
   display: inline-block;
 }
 
-/* line 951, ../sass/app.scss */
+/* line 954, ../sass/app.scss */
 .overlay-wrapper {
   position: relative;
 }
-/* line 954, ../sass/app.scss */
+/* line 957, ../sass/app.scss */
 .overlay-wrapper .overlay-area {
   display: none;
   position: absolute;
@@ -7847,10 +7853,10 @@ body.with-overlay {
   top: 0;
   width: 100%;
   height: 100%;
-  background: #ff7bac;
+  background: #3582ac;
   z-index: 20;
 }
-/* line 965, ../sass/app.scss */
+/* line 968, ../sass/app.scss */
 .overlay-wrapper .close {
   position: absolute;
   right: 2.5em;
@@ -7862,14 +7868,14 @@ body.with-overlay {
   text-indent: -2000px;
   overflow: hidden;
 }
-/* line 971, ../sass/app.scss */
+/* line 974, ../sass/app.scss */
 .overlay-wrapper .overlay-div {
   display: none;
   z-index: 100;
   position: relative;
 }
 
-/* line 978, ../sass/app.scss */
+/* line 981, ../sass/app.scss */
 .upload-widget {
   padding: 45px 0;
   width: 80%;
@@ -7877,40 +7883,40 @@ body.with-overlay {
   margin: 50px auto;
   text-align: center;
 }
-/* line 984, ../sass/app.scss */
+/* line 987, ../sass/app.scss */
 .upload-widget h2, .upload-widget a {
   color: #fff;
 }
-/* line 988, ../sass/app.scss */
+/* line 991, ../sass/app.scss */
 .upload-widget .btns a {
   margin: 0 10px;
 }
-/* line 993, ../sass/app.scss */
+/* line 996, ../sass/app.scss */
 .upload-widget .breadcrumbs {
   display: inline-block;
 }
-/* line 994, ../sass/app.scss */
+/* line 997, ../sass/app.scss */
 .upload-widget .breadcrumbs *, .upload-widget .breadcrumbs > *:before, .upload-widget .breadcrumbs li a:first-child, .upload-widget .breadcrumbs a:hover, .upload-widget .breadcrumbs li a:first-child:hover {
   color: #fff;
 }
-/* line 997, ../sass/app.scss */
+/* line 1000, ../sass/app.scss */
 .upload-widget .breadcrumbs a:hover {
   text-decoration: underline;
 }
 
-/* line 1006, ../sass/app.scss */
+/* line 1009, ../sass/app.scss */
 .dz-success-mark, .dz-error-mark, .dz-error-message {
   display: none;
 }
 
-/* line 1012, ../sass/app.scss */
+/* line 1015, ../sass/app.scss */
 .onecol {
   max-width: 75em;
   margin: 0 auto;
 }
 
 @media only screen and (min-width: 68.75em) {
-  /* line 1019, ../sass/app.scss */
+  /* line 1022, ../sass/app.scss */
   .entities .items-list {
     display: block;
     padding: 0;
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/athina.css b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/athina.css
index 1f77938..2a69bc8 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/athina.css
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/athina.css
@@ -18,11 +18,11 @@
 .create-vm .main .select-flavor dl dt span:hover {
   color: white;
   border-color: white;
-  background-color: #ff7bac;
+  background-color: #3582ac;
 }
 /* line 29, ../sass/athina.scss */
 .create-vm .main .select-flavor dl dt span.current:hover {
-  color: #ff7bac;
+  color: #3582ac;
   border-color: white;
   background-color: white;
 }
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/magnific-popup.css b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/magnific-popup.css
new file mode 100644
index 0000000..0bac43a
--- /dev/null
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/magnific-popup.css
@@ -0,0 +1,536 @@
+/* Magnific Popup CSS */
+/* line 77, ../sass/magnific-popup.scss */
+.mfp-bg {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1042;
+  overflow: hidden;
+  position: fixed;
+  background: #0b0b0b;
+  opacity: 0.8;
+  filter: alpha(opacity=80);
+}
+
+/* line 94, ../sass/magnific-popup.scss */
+.mfp-wrap {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1043;
+  position: fixed;
+  outline: none !important;
+  -webkit-backface-visibility: hidden;
+}
+
+/* line 106, ../sass/magnific-popup.scss */
+.mfp-container {
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  padding: 0 8px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* line 120, ../sass/magnific-popup.scss */
+.mfp-container:before {
+  content: '';
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+
+/* line 128, ../sass/magnific-popup.scss */
+.mfp-align-top .mfp-container:before {
+  display: none;
+}
+
+/* line 133, ../sass/magnific-popup.scss */
+.mfp-content {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 auto;
+  text-align: left;
+  z-index: 1045;
+}
+
+/* line 142, ../sass/magnific-popup.scss */
+.mfp-inline-holder .mfp-content,
+.mfp-ajax-holder .mfp-content {
+  width: 100%;
+  cursor: auto;
+}
+
+/* line 148, ../sass/magnific-popup.scss */
+.mfp-ajax-cur {
+  cursor: progress;
+}
+
+/* line 152, ../sass/magnific-popup.scss */
+.mfp-zoom-out-cur,
+.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
+  cursor: -moz-zoom-out;
+  cursor: -webkit-zoom-out;
+  cursor: zoom-out;
+}
+
+/* line 157, ../sass/magnific-popup.scss */
+.mfp-zoom {
+  cursor: pointer;
+  cursor: -webkit-zoom-in;
+  cursor: -moz-zoom-in;
+  cursor: zoom-in;
+}
+
+/* line 163, ../sass/magnific-popup.scss */
+.mfp-auto-cursor .mfp-content {
+  cursor: auto;
+}
+
+/* line 170, ../sass/magnific-popup.scss */
+.mfp-close,
+.mfp-arrow,
+.mfp-preloader,
+.mfp-counter {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+/* line 177, ../sass/magnific-popup.scss */
+.mfp-loading.mfp-figure {
+  display: none;
+}
+
+/* line 195, ../sass/magnific-popup.scss */
+.mfp-hide {
+  display: none !important;
+}
+
+/* line 206, ../sass/magnific-popup.scss */
+.mfp-preloader {
+  color: #cccccc;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  text-align: center;
+  margin-top: -0.8em;
+  left: 8px;
+  right: 8px;
+  z-index: 1044;
+}
+
+/* line 217, ../sass/magnific-popup.scss */
+.mfp-preloader a {
+  color: #cccccc;
+}
+
+/* line 220, ../sass/magnific-popup.scss */
+.mfp-preloader a:hover {
+  color: white;
+}
+
+/* line 225, ../sass/magnific-popup.scss */
+.mfp-s-ready .mfp-preloader {
+  display: none;
+}
+
+/* line 230, ../sass/magnific-popup.scss */
+.mfp-s-error .mfp-content {
+  display: none;
+}
+
+/* line 237, ../sass/magnific-popup.scss */
+button.mfp-close,
+button.mfp-arrow {
+  overflow: visible;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  display: block;
+  padding: 0;
+  z-index: 1046;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+/* line 249, ../sass/magnific-popup.scss */
+button::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+/* line 256, ../sass/magnific-popup.scss */
+.mfp-close {
+  width: 44px;
+  height: 44px;
+  line-height: 44px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  text-decoration: none;
+  text-align: center;
+  opacity: 0.65;
+  padding: 0 0 18px 10px;
+  color: white;
+  font-style: normal;
+  font-size: 28px;
+  font-family: Arial, Baskerville, monospace;
+}
+/* line 275, ../sass/magnific-popup.scss */
+.mfp-close:hover, .mfp-close:focus {
+  opacity: 1;
+}
+/* line 279, ../sass/magnific-popup.scss */
+.mfp-close:active {
+  top: 1px;
+}
+
+/* line 283, ../sass/magnific-popup.scss */
+.mfp-close-btn-in .mfp-close {
+  color: #333333;
+}
+
+/* line 287, ../sass/magnific-popup.scss */
+.mfp-image-holder .mfp-close,
+.mfp-iframe-holder .mfp-close {
+  color: white;
+  right: -6px;
+  text-align: right;
+  padding-right: 6px;
+  width: 100%;
+}
+
+/* line 296, ../sass/magnific-popup.scss */
+.mfp-counter {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: #cccccc;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+/* line 307, ../sass/magnific-popup.scss */
+.mfp-arrow {
+  position: absolute;
+  opacity: 0.65;
+  margin: 0;
+  top: 50%;
+  margin-top: -55px;
+  padding: 0;
+  width: 90px;
+  height: 110px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/* line 318, ../sass/magnific-popup.scss */
+.mfp-arrow:active {
+  margin-top: -54px;
+}
+
+/* line 322, ../sass/magnific-popup.scss */
+.mfp-arrow:hover,
+.mfp-arrow:focus {
+  opacity: 1;
+}
+
+/* line 331, ../sass/magnific-popup.scss */
+.mfp-arrow:before, .mfp-arrow:after,
+.mfp-arrow .mfp-b,
+.mfp-arrow .mfp-a {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  margin-top: 35px;
+  margin-left: 35px;
+  border: medium inset transparent;
+}
+/* line 345, ../sass/magnific-popup.scss */
+.mfp-arrow:after,
+.mfp-arrow .mfp-a {
+  border-top-width: 13px;
+  border-bottom-width: 13px;
+  top: 8px;
+}
+/* line 353, ../sass/magnific-popup.scss */
+.mfp-arrow:before,
+.mfp-arrow .mfp-b {
+  border-top-width: 21px;
+  border-bottom-width: 21px;
+}
+
+/* line 360, ../sass/magnific-popup.scss */
+.mfp-arrow-left {
+  left: 0;
+}
+/* line 364, ../sass/magnific-popup.scss */
+.mfp-arrow-left:after,
+.mfp-arrow-left .mfp-a {
+  border-right: 17px solid #FFF;
+  margin-left: 31px;
+}
+/* line 369, ../sass/magnific-popup.scss */
+.mfp-arrow-left:before,
+.mfp-arrow-left .mfp-b {
+  margin-left: 25px;
+  border-right: 27px solid #3f3f3f;
+}
+
+/* line 375, ../sass/magnific-popup.scss */
+.mfp-arrow-right {
+  right: 0;
+}
+/* line 378, ../sass/magnific-popup.scss */
+.mfp-arrow-right:after,
+.mfp-arrow-right .mfp-a {
+  border-left: 17px solid #FFF;
+  margin-left: 39px;
+}
+/* line 383, ../sass/magnific-popup.scss */
+.mfp-arrow-right:before,
+.mfp-arrow-right .mfp-b {
+  border-left: 27px solid #3f3f3f;
+}
+
+/* line 393, ../sass/magnific-popup.scss */
+.mfp-iframe-holder {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+/* line 397, ../sass/magnific-popup.scss */
+.mfp-iframe-holder .mfp-content {
+  line-height: 0;
+  width: 100%;
+  max-width: 900px;
+}
+
+/* line 402, ../sass/magnific-popup.scss */
+.mfp-iframe-scaler {
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  padding-top: 56.25%;
+}
+
+/* line 408, ../sass/magnific-popup.scss */
+.mfp-iframe-scaler iframe {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  background: black;
+}
+
+/* line 418, ../sass/magnific-popup.scss */
+.mfp-iframe-holder .mfp-close {
+  top: -40px;
+}
+
+/* Main image in popup */
+/* line 429, ../sass/magnific-popup.scss */
+img.mfp-img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  display: block;
+  line-height: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 40px 0 40px;
+  margin: 0 auto;
+}
+
+/* The shadow behind the image */
+/* line 443, ../sass/magnific-popup.scss */
+.mfp-figure:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 40px;
+  bottom: 40px;
+  display: block;
+  right: 0;
+  width: auto;
+  height: auto;
+  z-index: -1;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  background: #444444;
+}
+
+/* line 457, ../sass/magnific-popup.scss */
+.mfp-figure {
+  line-height: 0;
+}
+
+/* line 460, ../sass/magnific-popup.scss */
+.mfp-bottom-bar {
+  margin-top: -36px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  cursor: auto;
+}
+
+/* line 468, ../sass/magnific-popup.scss */
+.mfp-title {
+  text-align: left;
+  line-height: 18px;
+  color: #f3f3f3;
+  word-wrap: break-word;
+  padding-right: 36px;
+}
+
+/* line 476, ../sass/magnific-popup.scss */
+.mfp-figure small {
+  color: #bdbdbd;
+  display: block;
+  font-size: 12px;
+  line-height: 14px;
+}
+
+/* line 482, ../sass/magnific-popup.scss */
+.mfp-image-holder .mfp-content {
+  max-width: 100%;
+}
+
+/* line 486, ../sass/magnific-popup.scss */
+.mfp-gallery .mfp-image-holder .mfp-figure {
+  cursor: pointer;
+}
+
+@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
+  /**
+   * Remove all paddings around the image on small screen
+   */
+  /* line 497, ../sass/magnific-popup.scss */
+  .mfp-img-mobile .mfp-image-holder {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  /* line 501, ../sass/magnific-popup.scss */
+  .mfp-img-mobile img.mfp-img {
+    padding: 0;
+  }
+
+  /* The shadow behind the image */
+  /* line 505, ../sass/magnific-popup.scss */
+  .mfp-img-mobile .mfp-figure:after {
+    top: 0;
+    bottom: 0;
+  }
+
+  /* line 510, ../sass/magnific-popup.scss */
+  .mfp-img-mobile .mfp-bottom-bar {
+    background: rgba(0, 0, 0, 0.6);
+    bottom: 0;
+    margin: 0;
+    top: auto;
+    padding: 3px 5px;
+    position: fixed;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  /* line 521, ../sass/magnific-popup.scss */
+  .mfp-img-mobile .mfp-bottom-bar:empty {
+    padding: 0;
+  }
+
+  /* line 524, ../sass/magnific-popup.scss */
+  .mfp-img-mobile .mfp-counter {
+    right: 5px;
+    top: 3px;
+  }
+
+  /* line 528, ../sass/magnific-popup.scss */
+  .mfp-img-mobile .mfp-close {
+    top: 0;
+    right: 0;
+    width: 35px;
+    height: 35px;
+    line-height: 35px;
+    background: rgba(0, 0, 0, 0.6);
+    position: fixed;
+    text-align: center;
+    padding: 0;
+  }
+
+  /* line 539, ../sass/magnific-popup.scss */
+  .mfp-img-mobile .mfp-figure small {
+    display: inline;
+    margin-left: 5px;
+  }
+}
+@media all and (max-width: 900px) {
+  /* line 552, ../sass/magnific-popup.scss */
+  .mfp-arrow {
+    -webkit-transform: scale(0.75);
+    transform: scale(0.75);
+  }
+
+  /* line 556, ../sass/magnific-popup.scss */
+  .mfp-arrow-left {
+    -webkit-transform-origin: 0;
+    transform-origin: 0;
+  }
+
+  /* line 560, ../sass/magnific-popup.scss */
+  .mfp-arrow-right {
+    -webkit-transform-origin: 100%;
+    transform-origin: 100%;
+  }
+
+  /* line 564, ../sass/magnific-popup.scss */
+  .mfp-container {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+}
+/* line 576, ../sass/magnific-popup.scss */
+.mfp-ie7 .mfp-img {
+  padding: 0;
+}
+/* line 579, ../sass/magnific-popup.scss */
+.mfp-ie7 .mfp-bottom-bar {
+  width: 600px;
+  left: 50%;
+  margin-left: -300px;
+  margin-top: 5px;
+  padding-bottom: 5px;
+}
+/* line 586, ../sass/magnific-popup.scss */
+.mfp-ie7 .mfp-container {
+  padding: 0;
+}
+/* line 589, ../sass/magnific-popup.scss */
+.mfp-ie7 .mfp-content {
+  padding-top: 44px;
+}
+/* line 592, ../sass/magnific-popup.scss */
+.mfp-ie7 .mfp-close {
+  top: 0;
+  right: 0;
+  padding-top: 0;
+}
