*{
		margin:0; padding:0; outline:none;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
		-webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''
	
	}
	
	.disable-selection, .disable-selection *{
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		user-select: none;
	}


	body{background:#fff;}
	.app-body{background:#000}
	header{display:block;}
	footer{display:block;}
	
	a{text-decoration:none;}
	h1{ line-height:1em; margin:7.5px 0;}
	h1 strong{font-weight:400; }
	h2{ margin-bottom:0px;}
	h3{font-weight:bold; margin-bottom:7px;}
	

	.no-overflow{overflow:hidden!important;}
	/*	APP LOADING	*/

	#app-loading{position:fixed; top:0; bottom:0; right:0; left:0; background:#f6f6f0; z-index:9999; display:none}
	#app-loading-container{max-width:480px; margin:30px auto; text-align:center}
	#app-loaded-bar{height:15px; border-radius:5px; max-width:191px; width:100%; background:rgba(0,0,0,0.03); margin:15px auto; position:relative}
	#app-loaded-bar-percent{height:15px; width:0%; border-radius:5px; background:#629d7d}
	#app-loading-cover{background:url(images/app-load.jpg) center center; height:420px; width:191px; margin:0 auto}

	/*	Transitions	*/
	.transition-childs > *,
	.transition-self,
	.transition-all *,
	.transition-all *:hover
	{
	    -webkit-transform: translateZ(0);
	    transform: translateZ(0);
		-webkit-transition-duration:400ms;
		-webkit-transition-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1);
		-webkit-transition-property:transform, opacity, background, visibility, width, height;
		transition-duration:400ms;
		transition-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1);
		transition-property:transform, opacity, background, visibility, width,height;

	}
	
	.transition-none{transition:none!important;}
	
	
	.gpu{
	   -webkit-transform: translateZ(0);
	   -moz-transform: translateZ(0);
	   -ms-transform: translateZ(0);
	   -o-transform: translateZ(0);
	}

	.slow-transition
	{
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
	}
	

	.overflow::-webkit-scrollbar {
		width: 5px;
		display:none
	}

	.overflow.with-scrollbar::-webkit-scrollbar {
		display:block
	}
	
	.sliver-view::-webkit-scrollbar,
	.fragment::-webkit-scrollbar,
	.ui-view::-webkit-scrollbar,
	.overflow::-webkit-scrollbar{
	  width: 5px;
	  display: none;
	}
	
	/* TRACK */
	.overflow::-webkit-scrollbar-track{
		 background: rgba(0,0,0,0.05)!important; 
		-webkit-border-radius: 0;
		border-radius: 0;
	}
	
	.overflow::-webkit-scrollbar-track-piece{
    	 /* Here */
  		display: none;
	}
	
	
	/* THUMB */
	.overflow::-webkit-scrollbar-thumb{
	  /* This is the EXACT color of Mac OS scrollbars. 
		 Yes, I pulled out digital color meter */
	  background: rgba(0,0,0,0.1)!important;
	  border-radius: 100px;
	  
	}
	.overflow::-webkit-scrollbar-thumb:vertical:active{
	  background: rgba(0,0,0,0.61); /* Some darker color when you click it */
	  border-radius: 100px;
	}
	.overflow{overflow:auto!important; overflow-x: hidden!important;}	
	.overflow.touch-scroll{-webkit-overflow-scrolling: touch;}

	#app-activity{width:100vw; height: 100vh; overflow: hidden; transform: none;}

	

	/*/////////////////////////////////////////////////////////
	//	TOP
	/////////////////////////////////////////////////////////*/
	.top-actions{width:64px; height:46px; display:inline-block; margin:0 4px; text-transform:uppercase; font-size:12px; color:#ccc; margin-top:5px; position:relative;}
	
	.top-action-bubble{background:#bea586; font-size:13px; padding:3px 6px 3px; border-radius:15px; top:-15px; right:0; color:#fff; position:absolute; line-height:13px; font-family:sans-serif; opacity:0; transform:scale(0);-webkit-transform:scale(0); z-index:1000}
	.top-action-bubble.show{
		opacity:1;
		transform: scaleX(1) scaleY(1) translateZ(0);
		-webkit-transform: scale(1) translateZ(0);
	}
	
	.tap-icon{display:block; margin:0 auto 0px; width:28px; height:28px; cursor:pointer}

	.tapped{color:#674941}
	

	/* Action Bar	*/
	.apple-back,#action-bar{background:#e3ded8; min-height:48px; display:block; position:absolute; width:100%; z-index:1; top:0; left:0; right:0; max-width:640px; margin:0 auto}
	
	
	.panel-icon{height:48px; width:48px; position:absolute; top:0; background:url(images/svg/arrow-back.svg) center center no-repeat; display:none; background-size:80%; cursor:pointer}
	.apple-panel-icon{height:48px; width:48px; position:absolute; top:0; left:0; background:url(images/svg/arrow-back.svg) center center no-repeat;  background-size:80%; cursor:pointer}
	.fragment-window-title,.menu-title{color:#fff; font-weight:400; text-transform:uppercase; text-align:center; font-size:14px; padding:12px}
	
	
	.login-thumb{width:120px; height:120px; background:url(images/svg/logo.svg) center center; background-size:100%; border-radius:50%;}
	
	.circle-stitch{width:150px; height:150px; border:1px dashed #674941; padding:7.5px; margin:0px auto 30px; border-radius:50%; }
	
	
	.countdown-section{display:inline-block; margin:0 3.5px; width:48px;}
	.countdown-amount{display:block; margin:0 0 0 0; line-height:normal; font-size:18px; font-weight:bold; color:#629d7d}
	.countdown-period{display:block; font-size:90%; text-transform:uppercase; line-height:normal; color:#ccc}
	

	.circle{border-radius:50%; overflow:hidden; width:48px; height:48px;}
	.circle img{width:100%; height:100%; display:block}
	
	.image-container img{width:100%; height:auto; display:block;}

	/*/////////////////////////////////////////////////////////
	//	BODY
	/////////////////////////////////////////////////////////*/
	#container{ overflow:hidden; position:relative;}
	

	.video-container video {
		position: fixed;
		min-width: 100%;
		min-height: 100%;
		max-height:100%;
		left: 50%;
		top: 50%;
		-webkit-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
	}
	
	.stage-view{position:relative; margin:0 0 0}
	

	
	#stage{height:100vh;  overflow:hidden; transition:none!important}
	#stage-body{margin-top:48px;}
	.ui-header-overlay #stage-body{margin-top:0;}
	.ui-header-overlay .panel{}
	.panel-padding-top{padding-top:48px;}
	
	#app-body{overflow:hidden; }
	.slides{overflow:hidden; position:relative;}
	.slide{position:absolute;width:100%; -webkit-transform: translate3d(100%, 0, 0)!important; transform: translate3d(100%, 0, 0)!important;}

	
	.panel-left{-webkit-transform: translate3d(-10%, 0, 0)!important; transform: translate3d(-10%, 0, 0)!important; opacity:0; }
	.panel-center{-webkit-transform: translate3d(0, 0, 0)!important; transform: translate3d(0, 0, 0)!important; opacity:1;  }

	
	
	.app-context-header{background:#0eaccc; color:#fff;text-align:center; position:relative; padding:7.5px 0}
	.app-context-header h1{ padding:7.5px 30px; border-top:1px dashed rgba(255,255,255,0.5); border-bottom:1px dashed rgba(255,255,255,0.5); font-family:'bitter', sans-serif; text-transform:uppercase; font-size:18px}

	/*/////////////////////////////////////////////////////////
	//	LOAD INDICATOR
	/////////////////////////////////////////////////////////*/


	.pace .pace-progress {
        background: rgba(255,255,255,0.2);
	  position: fixed;
	  z-index: 2000;
	  top: 0px;
	  left: 0;
	  height: 3px;
	
	  -webkit-transition: width 1s;
	  -moz-transition: width 1s;
	  -o-transition: width 1s;
	  transition: width 1s;
	
	  box-shadow:0 0 3px rgba(0,0,0,0.3)
	}
	
	.pace-inactive {
	  display: none;
	}
	/*/////////////////////////////////////////////////////////
	//	UPLOADER
	/////////////////////////////////////////////////////////*/


	#ftp-indicator{position:fixed; bottom:49px; right:10px; background:rgba(0,0,0,0.7);  display:block; cursor:pointer; display:none; z-index:9011}
	.ftp-indicator-gif{color:#fff; width:32px; height:32px; line-height:100%; font-weight:100; font-size:200%; text-align:center}
	
	#ftp-container{position:fixed; top:0; bottom:0; left:0; right:0; background:#34495E;z-index:5; color:#ccc; z-index:9011; transform:translateX(100%); -webkit-transform:translateX(100%);}
	#ftp-indicator .outline-button{color:#fff; border:1px solid #fff;}
	
	.filename{font-size:11px;}
	.uploadifive-queue-item{border-bottom:1px dotted rgba(255,255,255,.1); padding:10px; position:relative; color:#fff;}
	.uploadifive-queue-item div{}
	.uploadifive-queue-item .progress{border-radius:5px; height:10px; background:rgba(0,0,0,0.1); margin:10px 0 0; position:relative;width:100%;}
	.uploadifive-queue-item .progress-bar{height:10px; border-radius:5px; position:absolute; background:#bb1333}
	.uploadifive-queue-item .close{position:absolute; display:block; padding:0px; color:#fff; text-decoration:none; right:20px;top:5px; z-index:1000}

	/*/////////////////////////////////////////////////////////
	//	FORMS
	/////////////////////////////////////////////////////////*/

	/*Forms */
	.hidden-element{display:none;}
	.form-container{max-width:540px; margin:0 auto;}
	
	.label-icon{width:48px; height:48px;right:0; top:0; opacity:1; background-repeat:no-repeat; background-position:center center; background-size:28px; position:absolute}

	
	.label-icon.left{left:0!important; right:auto!important;}


	.padding-bottom-none{padding-bottom:0;}
	.padding-left-right{padding:0 15px;}
	
	.fieldset-group{border-top:1px solid rgba(0,0,0,0)}
	.fieldset-group fieldset:last-of-type:after{display: none;}

	fieldset{border:none; padding:2.5% 5%; display:block;position:relative; background:rgba(255,255,255,0.2); border-bottom:1px solid rgba(0,0,0,.1)}
	.inputs,.fake-inputs{ border:none; font:inherit; display:inline-block; background:none; width:100%; color:#000; margin:0; padding:0; -webkit-appearance:none; padding:5px 0}
	.padded-label{padding:7.5px 15px 7.5px; display:block}

	.menu-fieldset{border-bottom:none!important;}
	.menu-fieldset:after{content:" "; left:0; border-bottom:1px solid rgba(0,0,0,.1); display:block; position:absolute; right:0; bottom:0;}
	

	.inline-short-inputs{width:61%!important;}

	.inline-inputs{width:80%!important; margin-left:38px}
	.inline-input{}

	.inline-input label{margin:0; padding:5px 0; width:145px}
	.inline-input .inputs{display:block; margin:4px 0 0 0; width:145px; text-align:left; line-height:100%;}
	.inline-input select.inputs{}
	.right-align{text-align:right!important;}

	.fieldset-title{padding:7.5px 5%; font-weight:bold; display:block;}

	.arrow-field{position:absolute; right:5px; width:32px; height:32px;}

	.sign-in-form ::-webkit-input-placeholder { color:rgba(255,255,255,0.7); }
	
	label{ display:inline-block; width:100%;}
	.inline-label{width:31%; margin-right:15px; font-size:14px; max-width:100px}
	
	.tick-box-checkbox{border:1px solid #ccc; width:24px; height:24px; display:block; cursor:pointer}
	.tick-box-checked, .tick-box-checkbox:hover{background:url(images/confirm.png) center center no-repeat;}

	.fieldset-top-inputs{text-align:right; padding:0 15px}
	.fieldset-top-inputs span{width:48px; display:inline-block; text-align:center; text-transform:uppercase; font-weight:bold}
	.double-inline-input label{margin:0; padding:0; width:50%}
	.double-inline-input .inputs{display:inline-block; margin:0; padding:0; width:48px; text-align:center!important;}
	.double-inline-input .inputs::-webkit-input-placeholder{text-align:center!important;}
	
	
	.slide-info-container{padding:15px; text-align:center;}
	.slide-info-container h2{ margin:5% 0 7.5px; font-size:180%; font-weight:100}
	.slide-info-icon{width:28vw; height:28vw; margin:0 auto; position:relativ; max-width:150px; max-height:150px}
	

	
	.toolbar-input{padding:7.5px 15px;text-align:center; border-bottom:1px solid rgba(0,0,0,.1)}
	.toolbar-input fieldset{border-radius:30px; background:#fff; padding:0 15px; margin:0 0; border-bottom:none;}
	.toolbar-input input{line-height:100%; display:block; padding:8.5px 0 6.5px}

	
	/* LOGIN FORM */
	.sign-in-form fieldset{ border-top:2px solid rgba(255,255,255,0.1); background:none}
	.sign-in-form{font-weight:700}
	.sign-in-form input{color:#fff;}


	.grid-layout{
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax(20%, 1fr));
		align-content: center;
	}

	.grid-column.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}



	.otp-input-container{margin:0 auto; max-width: 338px;}
	
	.opt-number-input{padding:0; border: none;}

    .opt-number-input input{text-align:center; font-size:150%; text-transform:uppercase; border:1px solid rgb(0, 0, 0,0.1); border-radius: 7.5px; padding:0; width: 48px; height: 48px;}

	@media screen and (max-width: 767px){
		.opt-number-input input{width: 42px; height: 42px;}

	}

	/*=======================================================
	// BOX LAYOUT -> COLLAPSED
	/======================================================*/

	.box-constraint-center,
	.box-constraint-center.app-tile{
		z-index: 1;
       	overflow: hidden;
		height: 90vh;
		width: 90vw;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
        margin: 0 auto;
        position: absolute;
        display: flex; 
        justify-content: center; 
        align-items: center; 
		flex-direction: column;
		padding: 0;
		
    }

	.box-fill-height{ width: 100%; height: 100%;}
	.box-fill-center{display: flex; align-items: center;}
	
	.with-scrollbar.box-fill-height{margin: 5px; width: calc(100% - 10px);height: calc(100% - 10px);}

	.with-scrollbar.box-fill-height .floating-bottom-btn{margin-bottom: 0px;}
	

    @media screen and (max-width: 767px){
		
		.collapse-on-mobile.box-constraint-center.app-tile{
            position: absolute;
            display: block;
            height: 100%;
            overflow: hidden;
			padding: 0;
			border-radius: 0;
			transform: none;
			left: 0;
			top: 0;
			margin: 0;
			width: 100%;
			max-height: none!important;
		}
		
		.floating-bottom-btn{border-radius: 0!important;}

		.box-slides-navigation-bar{border-radius: 0!important;}

		.with-scrollbar.box-fill-height{margin:0; width: 100%;}
    }

	/*=======================================================
	// FLAT BUTTON
	/======================================================*/

	.flat-button{
		padding: 7px 15px;
		border-radius: 30px;
        display: inline-block;
        width: auto;
		text-transform: uppercase;
		text-align: center;
    }

	.flat-button > div{
		height: 21px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/*=======================================================
	// FLOATING ACTION BUTTON
	/======================================================*/


	.floating-bottom-btn.hidden{
		transform: translate3d(0,100%,0);
		opacity: 0;
	}

	.floating-bottom-btn.elevation-0{
		box-shadow: none!important;
		border-top: 1px solid rgb(0, 0, 0,.1);
	}

	.floating-bottom-btn{
		position:absolute;bottom:0; left:0; right:0;box-shadow:0px -6px 22px -21px #000; padding-top:15px;  z-index: 1;
	}

	.floating-bottom-btn.radius-bottom{
		border-radius: 0 0 10px 10px;
	}

	.floating-bottom-btn::after{
		content: ' ';
		display:block;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.floating-action-btn{
		color: #fff;
		display: inline-flex;
		box-sizing: border-box;
		align-items:center;
		justify-content:center;
		position: absolute;
		bottom: 1.5rem;
		right: 1.5rem;
		border-radius: 50%;
		background:#000;

		cursor: pointer;
		height: 48px;
		width: 48px;

		box-shadow: 
			0px 3px 5px -1px rgba(0, 0, 0, 0.1), 
			0px 6px 10px 0px rgba(0, 0, 0, 0.07), 
			0px 1px 18px 0px rgba(0,0,0,.06);
    }

    .floating-action-btn.extend{
        width: auto;
        padding: 0 21px;
        border-radius: 24px;
        height: 42px;
        font-size: 12px;
        /*letter-spacing: .0892857143em;*/
        text-decoration: none;
        text-transform: uppercase;
    }

    .floating-action-btn:before{
        content: ' ';
        background : rgba(255,255,255,0.1);
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 24px;
        opacity: 0;
        transition: 0.1s cubic-bezier(0.6, -0.28, 0.735, 0.045) opacity;
    }

    .floating-action-btn:hover:before{
        opacity: 1;
    }

    .floating-action-btn:hover{
        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1), 0px 8px 10px 1px rgba(0, 0, 0, 0.07), 0px 3px 14px 2px rgba(0,0,0,.06);
    }

    .floating-action-btn.extend span{
        justify-content: flex-start;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }


    .floating-action-btn i{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        font-size: 24px;
    }

    .floating-action-btn.extend i{
        margin: -2px 7.5px 0 -8px;
        width: 19px;
        height: 19px;
        font-size: 14px!important;
        
	}
	
	.elevation-0,
	.elevation-0:hover{box-shadow: none;}
	.position-relative{position: relative; top: 0; bottom: 0; right: 0; left: 0;}

	/*================================================
    // SNACKBAR
    /================================================*/
    
    #snackbar-dialog{position: fixed; transform: translate3d(0,110%,0); bottom: 0; left: 0; right: 0; z-index: 11;
        background:#fff;
        box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.1);}

    #snackbar-dialog.show{transform: translate3d(0,0%,0);}

    #snackbar-dialog .container{
		max-width: 960px;
		margin: 0 auto 0;
		padding: 15px 30px;
		display: grid;
		grid-template-columns: 53px 1fr 280px;
		align-items: center;
	}
	
	.snackbar-icon{
        width: 38px;
        height: 38px;
		border-radius: 50%;
		border: 1px solid;
        display: flex;
        align-items: center;
        justify-content: center;
	}
	
	.snackbar-icon .fa{
		/*font-size: 28px;*/
	}

    #snackbar-dialog .snackbar-buttons{
        text-align: right;
    }

    #snackbar-dialog .flat-button{
        /*margin-left:15px;*/
    }

	

	
	/*=======================================================
	// BUTTON
	/======================================================*/


	.button-container{margin:15px 0;}
	.button:hover{}
	
	
	

	.progress-button{
	}
	
	.progress-button{
		position:relative;
	}
	
	.progress-button:before,
	.progress-button:after{
		content: ""; 
		position: absolute;
		left: 0;
		top:0;
		opacity: 0.1;
		width: 0;
		height: 33px;
		background:rgba(0,0,0,0.3);
	
	}
	
	.progress-button.state-processing{
		background:#a5cd3c;
		color:#fff;
	}
	
	.progress-button.state-processing::before{
		width:100%;
		opacity: 0.3;
		-webkit-transition: width 3s, opacity 3s;
		transition: width 3s, opacity 3s;
		
		
	}
	
	
	
	.progress-button.state-error::before
	.progress-button.state-success::before{
	
		
	} 


	
	.theme{border:2px solid rgba(0,0,0,0.1); margin:0px 7.5px 0px 7.5px}
	.theme-bit{height:32px; width:33.333%; float:left}
	.theme-selected{border:2px solid #2d2d2d;}



	/*	Actions	*/
	.action{ padding:15px 15px 0;}
	.action-description{color:#fff; margin:0 0 0 63px; }
	
	/*	Action bg	*/
	.sunflower-bg{background:#bea586;}
	.orange-bg{background:#a2825c;}
	.carrot-bg{background:#674941;}



	/*	Icons	*/
	.dropdown-spinner{background:url(images/dropdown-arrow.png) right bottom no-repeat; border-bottom:1px solid #818181; padding:5px 30px 5px 5px; display:inline-block}


	/*	SVG	*/
	
	/*Menu*/
	.timeline-icon{background-image:url(images/svg/paw-menu.svg); background-position:center top; background-repeat: no-repeat; background-size:64px 64px}


	/*	Actions	*/
	.icon-zoom{background:url(images/svg/zoom.svg) center center no-repeat; width:48px; height:48px; background-size:32px 32px; margin:8px 15px 0}
	.icon-login{width:120px; height:120px;  background:url(images/svg/logo.svg); margin:0px auto 15px; background-size:120px 120px}

	
	.trash-comment{background:url(images/delete.png) left center no-repeat; height:24px; padding:0 0 0 21px; color:#bbb; height:24px; display:inline-block}
	.flag-comment{background:url(images/flag-box.png) left center no-repeat; height:24px; padding:0 0 0 21px; color:#bbb; height:24px; display:inline-block}
	.is-flagged{background:url(images/is-flagged.png) left center no-repeat!important;}


	.waiting-clock-icon{background:url(images/clock.png) center center no-repeat; width:128px; height:128px; margin:15px auto}
	.map-image{background:url(images/map.png) center center no-repeat; width:128px; height:128px; margin:15px auto 30px;}

	.right-arrow-button{width:31px; height:48px; background:url(images/right-arrow.png) center center no-repeat; display:block; opacity:0.3}
	.icon-link:hover,
	.right-arrow-button:hover{opacity:1; cursor:pointer}
	
	.arrow-down{background:url(images/arrow-down.png) right center no-repeat; border-top:1px solid rgba(0,0,0,0.1); padding:7px 0}
	.arrow-up{background:url(images/arrow-up.png) right center no-repeat; border-top:1px solid rgba(0,0,0,0.1); padding:7px 0}
	.reveal-content{display:none}
	
	
	.navigate-prev{display:inline-block; text-indent:-9999px; width:25px; height:28px; background:url(images/navigate-prev.png) center center no-repeat;}
	.navigate-next{display:inline-block; text-indent:-9999px; width:25px; height:28px; background: url(images/svg/arrow-forward-hover.svg) center center no-repeat; background-size:100%;}

	.box-shadow-3{}
	.drop-shadow{box-shadow:0 0 15px rgba(0,0,0,0.3);}
	
	.bit-information{font-size:11px; }


	
	.greyscale{-webkit-filter: grayscale(100%);}
	.half-greyscale{-webkit-filter: grayscale(30%);}
	.half-greyscale:hover{-webkit-filter: grayscale(0%);}
	.md-content{margin:0 15px 15px!important;}
	
	.photo-album{position:relative;}
	

	.form-padding{padding-top:15px}
	@media screen and (max-width: 640px) {
		#container{position:relative}
	
	}
	@media screen and (max-width: 480px) {
	}

	@media screen and (max-width: 320px) {
		
		.button{display:block; text-align:center; margin-bottom:15px!important; float:none; }
		
		.app-tile-option{padding:20px 10px;}
		
		
		
		
		.scroll-down{margin-top:-49px!important;}
		
		
	    .form-padding{0}
		
		
	}
	
	@media screen and (max-width: 240px) {
		.column-50{width:100%; float:none;}	
	}




	/*==========================================
	//	CHARTS & STATS
	/=========================================*/


	.chart-area{padding:7.5px;}
	.chart-area a{color: rgba(255,255,255,.4);}
	.chart-area b{color: rgba(255,255,255,1);}

	.graph-stat{position:absolute;}
	.graph-stat.float-left{top:15px; left:15px}
	.graph-stat.float-right{top:15px; right:15px; text-align:right}
	.graph-stat h2{color:#fff; font-size:18px; line-height:14px}
	.graph-stat span{font-size:12px; color:#fff; text-transform:uppercase;}
	
	.small-bar{height:10px; border-radius:30px; background:rgba(0,0,0,0.1); width:100px; position:relative;}
	.small-bar-percent{height:10px; border-radius:30px; position:absolute; width:0%}
	.stat-label{color:rgba(0,0,0,0.5); display:block;font-size:13px;  text-transform:uppercase; line-height:13px}
	.stat-max{ font-weight:300; color:#516b8e; font-family:'Designo', sans-serif; }
	.stat-value{font-size:120%;font-weight:300; font-family:'Designo', sans-serif; color:#516b8e;}


	/*==========================================
	//	FOOTER BUTTONS
	/==========================================*/
	
	#footer-actions{position:absolute; bottom:0; left:0; right:0; z-index:1; -webkit-transform: translate3d(0, 100%, 0) ;transform: translate3d(0, 100%, 0); visibility:hidden}
	#footer-actions.show{ -webkit-transform: translate3d(0, 0%, 0) ;transform: translate3d(0, 0%, 0);}
	.footer-panels{overflow:hidden; position:relative; height:0}
	.footer-panel{position:absolute;width:100%; visibility:hidden;-webkit-transform: translate3d(0, 100%, 0) ;transform: translate3d(0, 100%, 0);}
	.footer-panel.show{visibility:visible;-webkit-transform: translate3d(0, 0%, 0) ;transform: translate3d(0, 0%, 0);}
	
	.footer-buttons{position:absolute; bottom:0; left:0; right:0; width:100%;display:block; text-align:center}
	.footer-button{padding:19px 15px; text-transform:uppercase; display:block; text-align:center;}
	


	
	

	/*==========================================
	//	TOOLS BARS
	/=========================================*/
	
	#left-navigation{width:256px; display:none;}

	.icon-close{width: 48px; height: 48px; position: fixed; top:env(safe-area-inset-top); right: 0; cursor: pointer; z-index: 2}
    .icon-close i,
	.icon-back i{font-size: 24px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%}
	
	.icon-close i{font-size: 24px;}

	.icon-back{width: 48px; height: 48px;cursor: pointer}
	.icon-back i{font-size: 30px;}
	
	.toolbars{height:48px;background:none; position:absolute; top:0; left:0; right:0; z-index:2;margin:0 auto; -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}

	/*MAIN*/
	.header-input{font:inherit; line-height:normal; background:#fff; border-radius:30px; border:none; display:block; margin:-1px auto -5px; width:70%; text-align:center; padding:3px!important}
	.toolbar-panels{ position:relative; }
	.toolbar-panel{position:absolute;width:100%; -webkit-transform: translate3d(0%, 0, 0)!important; transform: translate3d(0%, 0, 0)!important; min-height:48px; max-height:48px;  -webkit-transition-property:transform; transition-property:transform;}
	.toolbar-panel.show{-webkit-transform: translate3d(0, 0, 0)!important; transform: translate3d(0, 0, 0)!important; opacity:1; z-index:1;visibility:visible; }
	.toolbar-panel.hiding{-webkit-transform: translate3d(-0%, 0, 0)!important; transform: translate3d(-0%, 0, 0)!important; z-index:0}
	.toolbar-panel.hide{-webkit-transform: translate3d(-0%, 0, 0)!important; transform: translate3d(-0%, 0, 0)!important; z-index:0}
	
	/*FRAGMNET TOOL BARS*/
	.fragment-toolbars{ position:relative;}
	.fragment-toolbar{position:absolute;width:100%; -webkit-transform: translate3d(100%, 0, 0)!important; transform: translate3d(100%, 0, 0)!important;min-height:48px;opacity:0;-webkit-transition-property:transform opacity; transition-property:transform opacity;z-index:0}
	.fragment-toolbar.show{-webkit-transform: translate3d(0, 0, 0)!important; transform: translate3d(0, 0, 0)!important; opacity:1;z-index:1}
	.fragment-toolbar.hide{-webkit-transform: translate3d(-50%, 0, 0)!important; transform: translate3d(-50%, 0, 0)!important;  z-index:0;opacity:0;}
	
	.toolbar-center{display:flex; flex-direction: column; align-items: center; justify-content: center; text-align:center; color:#000;padding:13px 0 13px; opacity:0; font-size: 13px; text-transform:uppercase; margin:0 77px; position: relative;min-height: 22px}
	
	.back-with-text .toolbar-text{position:absolute; top:-1px; left:16px; display:block}
	.toolbar-text.long{width:60px;}
	.toolbar-left,.toolbar-right{position:absolute; top:0; height:48px;}
	.toolbar-left{left: 0;}
	.toolbar-right{right: 0}



	.toolbar-panel > div,
	.fragment-toolbar.show > div{transition: .5s linear opacity; transition-delay: .25s}

	

	.toolbar-panel    > .toolbar-left,
	.toolbar-panel    > .toolbar-center,
	.toolbar-panel    > .toolbar-right,
	.fragment-toolbar > .toolbar-left,
	.fragment-toolbar > .toolbar-center,
	.fragment-toolbar > .toolbar-right
	{ opacity:0; z-index:1}

	.fragment-toolbar.hide > div{opacity: 0!important;}



	.toolbar-panel.show    > .toolbar-left,
	.toolbar-panel.show    > .toolbar-center,
	.toolbar-panel.show    > .toolbar-right,
	.fragment-toolbar.show > .toolbar-left,
	.fragment-toolbar.show > .toolbar-center,
	.fragment-toolbar.show > .toolbar-right
	{opacity:1;}
	



	.effect-rotate{ -webkit-animation:turn  1.5s infinite linear; animation:turn  1.5s infinite linear;}


	.toolbar-huge{height:auto; max-height:none!important;}
	.toolbar-huge > .toolbar-center{
		font-size:300%; color:#000; position:absolute; left:0%; padding:10vw 5vw 0; 
		-webkit-transition-duration:300ms;
		-webkit-transition-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1);
		-webkit-transition-property:all;
		transition-duration:300ms;
		transition-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1);
		transition-property:all;
	}

	.toolbar-huge.visible{ max-height:49px!important;}
	.toolbar-huge.visible > .toolbar-center{font-size:100%; color:#000; text-align:center;left:50%; transform:translate3d(-50%,0,0); padding:15px 0 7px;}
	
	.toolbar-huge.visible.toolbar-panel{border-bottom:1px solid rgba(0,0,0,.1);}

	.toolbar-shadow{box-shadow: 0 0 3px rgba(0,0,0,0.3)}


    .toolbar-font-icon{position: relative; width: 48px; height: 48px;}
	.toolbar-font-icon .fa{transform: translate3d(-50%,-50%,0); position: absolute!important; left: 50%; top: 50%; font-size: 21px}

	.story-menu-icon .fa,
	.icon-close .fa{position: absolute!important;}
	
	
	.toolbar-font-icon.with-text{
        display: grid;
        grid-template-columns: 30px 1fr;
        align-items: center;
        width: auto!important;

    }

    .toolbar-font-icon.with-text.align-right{
        grid-template-columns: 1fr 30px;

    }

	.toolbar-font-icon.with-text div{position: relative;}
	.toolbar-font-icon.with-text span{text-transform: uppercase; line-height: 1em; display: block; margin: 0px!important; padding:0!important}

	.toolbar-border{border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
    .toolbar-shadow{box-shadow: 0 0 5px rgba(0,0,0,0.3);}
	
	/*//////////////////////////////////////////
	//	PANEL WIDOWS
	//////////////////////////////////////////*/
	
	.panels{overflow:hidden; position:relative;min-height:100vh; height:100vh;  z-index:0}
	.panel{position:absolute;width:100%;  transform: translate3d(100%, 0, 0); z-index:1;  transition-property:transform; min-height:100%; height:100%; overflow:hidden;overflow-x:hidden; will-change:transform}
	.panel.show{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity:1;  z-index:2!important;overflow:hidden;overflow-x:hidden;}
	
	.panel.hiding{-webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); z-index:1;overflow:hidden;overflow-x:hidden;}
	.panel.hide{-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}
	
	.panel.hidden{visibility:hidden!important; transition:none!important; z-index:0!important; opacity:0!important}
	
	.panel.hide.solid{ opacity:1;}
	
	.panel .ui-view{ min-height:100%; height:100%; position:absolute; width:100%; z-index: 1;}
	.panel.show.no-childs .ui-view{-webkit-overflow-scrolling: touch; overflow:auto;overflow-x:hidden; }

	.ios .panel:after{content:' '; position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.1); display:block; z-index:2;}
	.ios .panel.show:after{opacity:0; z-index:0; display:none;}


	.android .panel{transition-property: opacity}

	.android .panel,
	.android .panel.hide,
	.android .panel.hiding,
	.android .panel.hidden
	{opacity: 0; transform: translate3d(0,0,0)!important}
	.android .panel.show{opacity: 1;}

	
	.panel-effect-z{-webkit-transform: translate3d(0,0%, 0) scale(1.2); transform: translate3d(0,0%, 0) scale(1.2) ;opacity:0; z-index:0}
	.panel-effect-z.show{-webkit-transform: translate3d(0,0%, 0); transform: translate3d(0,0%, 0);opacity:1; z-index:1}
	.panel-effect-z.hide{-webkit-transform: translate3d(0%, 0, 0) scale(.8); transform: translate3d(0%, 0, 0) scale(.8); opacity:0;  z-index:0}

	.panel .inputs,.panel input{visibility:hidden}
	.panel.show .inputs,.panel.show input{visibility:visible;}
	.panel.hide .inputs,.panel.hide input{visibility:hidden}
	
	
		
	/*//////////////////////////////////////////
	//	FRAGMENT WIDOWS
	//////////////////////////////////////////*/
	
	.fragments{overflow:hidden; position:relative;min-height:100vh; height:100vh; width:100%;}
	.fragment{position:absolute;width:100%; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); z-index:0; -webkit-transition-property:transform; transition-property:transform;-webkit-overflow-scrolling: touch; min-height:100%; height:100%; overflow:hidden;}
	
	
	.ios .fragment:after{content:' '; position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.1); display:block; z-index:2;}
	.ios .fragment.show:after{opacity:0; z-index:0; display:none;}
	.ios .fragment.hide:after{opacity:1; z-index:2; display:block;}

	.fragment.show{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity:1;  visibility:visible; overflow:auto;overflow-x:hidden}
	.fragment.hide{-webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); opacity:1;overflow:hidden;overflow-x:hidden}
	.fragment.hide.solid{ opacity:1}

	.fragment.hidden{visibility:hidden!important; transition:none!important; z-index:0!important; opacity:0!important}
	


	@-webkit-keyframes fadeIn {
	  0% {
		opacity: 0;
		visibility:hidden;
	  }
	  100% {
		opacity: 1;
		visibility:visible;
	  }

	}
	
	@-webkit-keyframes turn {
		from {
			-webkit-transform:rotate(0deg);
		}
		to {
			-webkit-transform:rotate(360deg);
		}

	}	

	

	/*TOOLBAR ICONS*/



	/*Back*/
	.back-icon{height:44px; width:44px;}
	.black-back-icon{height:44px; width:44px;}


	
	
	/*//////////////////////////////////////////
	//	FOOTER / TABBED NAVIGATION / ACTIONS
	//////////////////////////////////////////*/
	
	.tabbed-navigation{height:58px; background:#fff; position:absolute; bottom:0; left:0; right:0; border-top:1px solid rgba(0,0,0,0.2); z-index:1; margin:0 auto; -webkit-transform: translate3d(0, 120%, 0) ;transform: translate3d(0, 110%, 0); }
	.tabbed-navigation ul{
		list-style:none; 
		display:grid; 
		text-align:center;
		grid-template-columns:repeat( auto-fit, minmax(20%, 1fr) );
	}
	.tabbed-navigation ul li{display:inline-block; text-transform:uppercase; font-size:11px; position:relative; opacity:.5; font-size: 10px;}
	.tabbed-navigation ul li img{filter: grayscale(1)}

	.tabbed-navigation.show{-webkit-transform: translate3d(0, 0%, 0)!important; transform: translate3d(0, 0%, 0)!important;}
	
	.tabbed-navigation ul li.show{ opacity:1;}
	.tabbed-navigation ul li.show img{filter: grayscale(0)}

	.tabbed-navigation{ padding-bottom: env(safe-area-inset-bottom); }
	
	.tab.show span{color:#000}
	
	.tab-inner{padding:7.5px 0px 0;}
	.tab-icon{display:block; margin:0 auto 0px; width:28px; height:28px; cursor:pointer; position: relative;  }
	.tab-bubble,.bubble{
		min-width:10px; 
		height:14px; 
		text-align:center;
		background:#2d2d2d; 
		font-size:12px; 
		padding:3px 5px; 
		border-radius:10px;  
		color:#fff; 
		position:absolute; 
		line-height:14px; 
		font-family:sans-serif; 
		opacity:0; 
		transform:scale(0);
	}
	
	.tab-bubble{top:-5px; right:-10px;}
	
	.tab-bubble.show,.bubble.show{
		opacity:1;
		transform: scaleX(1) scaleY(1) translateZ(0);
		-webkit-transform: scale(1) translateZ(0);
		 z-index: 1;
	}
	
	.tabbed-navigation.show .tab-bubble{display:block}


	.checkbox-tick{background:url(images/svg/check.svg) center center; background-size:100%; visibility:hidden;}
	.checkbox-tick.show{visibility:visible;}
	
	
	


	/*//////////////////////////////////////////
	//	ANIMATION
	//////////////////////////////////////////*/
	
	.animation{
	    -webkit-transform: translateZ(0);
	    transform: translateZ(0);
		-webkit-transition-duration:900ms;
		-webkit-transition-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1);
		-webkit-transition-property:transform, opacity, background, visibility, width;
		transition-duration:900ms;
		transition-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1);
		transition-property:transform, opacity, background, visibility, width;

		
	}

	.animation-bounce{
	   -webkit-transform: translateZ(0);
	   -moz-transform: translateZ(0);
	   -ms-transform: translateZ(0);
	   -o-transform: translateZ(0);
		-webkit-transition: all 900ms  cubic-bezier(.87,-.41,.19,1.44);
		-moz-transition: all 900ms cubic-bezier(.87,-.41,.19,1.44);
		-o-transition: all 900ms cubic-bezier(.87,-.41,.19,1.44);
		transition: all 900ms cubic-bezier(.87,-.41,.19,1.44);
		
	}

	.animate-from-left{ -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); opacity:0}
	.animate-from-right{ -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); opacity:0}
	.animate-from-bottom{ -webkit-transform: translate3d(0%, 100%, 0); transform: translate3d(0%, 100%, 0); opacity:0}
	.animate-from-top{ -webkit-transform: translate3d(0%, -100%, 0); transform: translate3d(0, -100%, 0); opacity:0}
	.animate-popIn{ -webkit-transform: scale(0); transform:scale(0); opacity:1; visibility:hidden}
	.animate-fadeIn{opacity:0}

	.animate-expand{width:0; opacity:0}

	.animate-from-bottom.run{ -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); opacity:1}
	.animate-from-left.run{ -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); opacity:1}
	.animate-from-right.run{ -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); opacity:1}
	.animate-from-top.run{ -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); opacity:1}
	.animate-popIn.run{
		 -webkit-animation:popIn 0.5s;  -webkit-animation-fill-mode: forwards; animation:popIn 0.5s;  animation-fill-mode: forwards;visibility:visible
	}
	.animate-fadeIn.run{
		opacity:1
	}
	
	.animate-visible{display:none!important; transition:none!important; -webkit-transition:none!important;}
	.animate-visible.run{display:block!important;}

	.effect-pulse{
		 -webkit-animation:pulse 1s infinite;
	}

	@-webkit-keyframes pulse {
	  0% {
		-webkit-transform: scale(0.85) translateZ(0);
	  }
	  50% {
		-webkit-transform: scaleX(1) scaleY(1) translateZ(0);
	  }
	  100% {
		-webkit-transform: scale(0.85) translateZ(0);
	  }

	}
	
	@-webkit-keyframes popIn {
	  0% {
		-webkit-transform: scale(0.9) translateZ(0);
		opacity:0.5;
	  }
	  50% {
		-webkit-transform: scaleX(1.05) scaleY(1.05) translateZ(0);
		opacity:1;
	  }
	  100% {
		-webkit-transform: scale(1) translateZ(0);
		opacity:1;
	  }

	}

	@keyframes popIn {
	  0% {
		transform: scale(0.9) translateZ(0);
		opacity:0.5;
	  }
	  50% {
		transform: scaleX(1.05) scaleY(1.05) translateZ(0);
		opacity:1;
	  }
	  100% {
		transform: scale(1) translateZ(0);
		opacity:1;
	  }

	}
	

	/*=========================================================
	// ANIMATIONS
	/=========================================================*/
	
	@-webkit-keyframes turn {
		from {
			-webkit-transform:rotate(0deg);
		}
		to {
			-webkit-transform:rotate(360deg);
		}

	}	
	@keyframes turn {
		from {
			transform:rotate(0deg);
		}
		to {
			transform:rotate(360deg);
		}

	}	


	@keyframes fadeInAndOut {
		0% {
			opacity:0;
		}
		100% {
			opacity:1;
		}

	}	

	.fadeInAndOut{animation: 1s infinite both fadeInAndOut;}
	
	.effect-turn-90{-webkit-transform:rotate(90deg);transform:rotate(90deg); }

	.content-loader{padding:15px; text-align:center}
	.content-loader-icon{background:url(images/content-loader.gif) center center no-repeat; background-size:100%; width:24px; height:24px; margin:0 auto 15px}
	
	.delete{ transform: translate3d(-100%, 0, 0);}

	.shake-no{animation:shake 0.82s cubic-bezier(.36,.07,.19,.97) both;}

	@keyframes shake {
		10%, 90% {
		  transform: translate3d(-1px, 0, 0);
		}
		
		20%, 80% {
		  transform: translate3d(2px, 0, 0);
		}
	  
		30%, 50%, 70% {
		  transform: translate3d(-4px, 0, 0);
		}
	  
		40%, 60% {
		  transform: translate3d(4px, 0, 0);
		}
	}

	/*//////////////////////////////////////////
	//	FRAGMENT POPUP
	//////////////////////////////////////////*/

	#fragment-container{position:absolute; top:0; left:0; right:0; bottom:0;  z-index:2;  -webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);  }

	#fragment-window{margin:0px;position:relative; background:#f9f9f9; opacity:0; padding-bottom:60px}
	#fragment-window{
		 -webkit-transform:translate3d(0%,100%,0);
		 -moz-transform:translate3d(0%,100%,0);
		 transform:translate3d(0%,100%,0);
		 
	}
	#fragment-window-header{background:#000; min-height:48px; position:relative; z-index:1}
	#fragment-window-close{height:48px; width:48px;background:url(images/svg/arrow-back-white.svg) center center no-repeat; background-size:80%; }
	.fragment-header-right{height:48px; position:absolute; top:0;}
	.fragment-header-left{height:48px;  position:absolute; top:0;}
	#fragment-container.show{-webkit-transform:translate3d(0%,0,0);}
	#fragment-container.show #fragment-window{
		 -webkit-transform:translate3d(0%,0,0);
		 -moz-transform:translate3d(0%,0,0);
		 transform:translate3d(0%,0,0);
		 opacity:1;
	}

	.toolbars .outline-button, #fragment-window-header .outline-button{border:1px solid #fff; color:#fff; }
	


	/*//////////////////////////////////////////
	//	RESOLVE ICON
	//////////////////////////////////////////*/
	
	.resolve{width:16px; height:16px;  border-radius:50%; float:left; margin-top:5px}
	.resolve.red{border:1px solid #bb1333;}
	.resolve.green{border:1px solid #1ABC9C;}
	.resolve.green .resolve-bit{background:#1ABC9C; margin:2px; width:12px; height:12px; border-radius:50%;}


	/*//////////////////////////////////////////
	//	TEXT CONTENT
	//////////////////////////////////////////*/

	.app-content{padding:5vw;}
	.app-content h1,.app-content h2{}

	.app-content p{margin:0 0 15px;}
	.app-content h3{margin:0 0 5px;}
	.app-content h2{margin:7.5px 0 0;}
	.app-content ul,.app-content ol{padding:0 15px 30px;}
	
	.app-content ul li{padding-bottom:7.5px;}

	.app-content hr{margin:30px 0px; border:none; border-bottom:1px dashed #ccc;}

	.app-content,.app-content p{line-height:1.7em;}
	
	.image-cover img{width:100%; height:auto;}

	.page-content-image{max-width:100%; height:auto; margin:0 auto;}

	.options-menu{list-style:none; padding-bottom:30px; border-top:1px solid rgba(0,0,0,0.2); display:none; opacity:0}
	.options-menu li a{color:#fff; padding:5px; border-bottom:1px solid rgba(0,0,0,0.2); display:block; background:rgba(0,0,0,0.1);}


		
	/*==========================================
	//	TAB VIEWS
	/=========================================*/


	.tabbed-pages nav{text-align:center; background:#34495E;}
	.tabbed-pages nav span{display:inline-block;  width:24.2%;}
	.tabbed-pages nav span a{padding:7.5px 15px; color:#fff; text-decoration:none; position:relative; text-transform:uppercase; display:block; font-size:90%;}
	
	.tabbed-pages nav span a::after{
		content:" "; background:none; height:3px; display:block; position:absolute; bottom:0; left:50%; width:0; transform:translate3d(-50%,0,0); -webkit-transform:translate3d(-50%,0,0);
		-webkit-transition: all 300ms  cubic-bezier(0.075, 0.82, 0.165, 1);
		-moz-transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
		-o-transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
		transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);

	}
	.tabbed-pages nav span a.show::after{
		background:#0eaccc;width:100%;
		
	}
	
	.tabbed-pages{position:relative; overflow:hidden}
	
	.tab-page{
		width:100%;position:absolute; transform:translate3d(100%,0,0); -webkit-transform:translate3d(100%,0,0);
	}
	.tab-page.show{
		 transform:translate3d(0%,0,0); -webkit-transform:translate3d(0%,0,0);
	}
	.tab-page.hide{
		 transform:translate3d(-100%,0,0); -webkit-transform:translate3d(-100%,0,0);
	}
	
	.tab-page .inputs,.tab-page input{visibility:hidden!important}
	.tab-page.show .inputs,.tab-page.show input{visibility:visible!important;}
	.tab-page.hide .inputs,.tab-page.hide input{visibility:hidden!important;}
	
	
	/*==========================================
	//	TAB NAVIGATION
	/=========================================*/

	.tab-navigation{border-bottom:1px solid rgba(0,0,0,.1); position: relative; z-index: 1;}
	.tab-navigation ul{
		display: grid;
		grid-template-columns: 32% 32% 32% 32% 32% 32% 32% 32% 32% 32%;
		list-style:none; 
		text-align:center;  
		position:relative; 
		max-width: 720px; 
		margin: 0 auto;
		
	}
	.tab-navigation li{cursor:pointer; display:inline-block; position:relative; width: 100%}
	.tab-navigation li:after{content:" "; display:block; position:absolute; width:0%; background:#000; height:2px; bottom:-1px; left:50%; -webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);}
	.tab-navigation li i{ padding:15px; text-align:center; font-size:24px}
	.tab-navigation li a{ padding:10px 3px; text-align:center; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 12px;}

	
	.tab-navigation li.show i,
	.tab-navigation li:hover i
	{color:#000;}	

	.tab-navigation li:hover:after,
	.tab-navigation li.show:after{width:100%; transition:.1s linear}


	.tab-pages{overflow-x: hidden!important}
	.page-tab{display: none;}
	.page-tab.show{display: block}


	/*================================================
    // SWIPEABLES
    /================================================*/   

    .swipe-view{margin: 0 30px}
    .swipe-view-pan{position: relative; }
    .swipe-item{position: absolute; width: 88vw}

    .swipe-item > div{margin: 0 15px 0 0}


	
	/*==========================================
	//	TAB VIEWS
	/=========================================*/

	.segmented-list nav{
		
		display:flex;
    flex-flow:row wrap;
    box-sizing:border-box;
		text-align:center;
		max-width: 520px;
		margin: 0 auto;

	}
	.segmented-list nav a{
		display:block;
    flex:1;
    box-sizing:border-box;
    border:1px solid #167efb;
    border-right:none;
    color:#167efb;
    margin:0;
    padding:7.5px;
    cursor: pointer;
    user-select:none;
		-webkit-user-select:none;
		line-height: 1em;
		font-size: 80%;
		text-transform:uppercase;
	}
	.segmented-list nav a:first-of-type{ border-radius:.4em 0 0 .4em;}
	.segmented-list nav a:last-of-type{border-right:1px solid #167efb; border-radius:0 .4em .4em 0;;}

	.segmented-list nav a.show{background:#167efb;color:#fff;}
	
	.tabbed-list nav{text-align:center; margin:0;}
	.tabbed-list nav a{display:inline-block; padding:5px 7.5px; border-top:1px solid #848484; border-bottom:1px solid #848484;text-transform:uppercase; font-size:11px;border-left:1px solid #848484; width:24.5vw;line-height:normal; color:#848484; -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); max-width: 60px; cursor: pointer}
	.tabbed-list nav a:first-of-type{ border-radius:5px 0 0 5px;}
	.tabbed-list nav a:last-of-type{border-right:1px solid #848484; border-radius:0px 5px 5px 0;}

	.tabbed-list nav a.show{background:#848484; color:#fff;}
	
	.tabbed-view{position:relative; overflow:hidden;}
	.tab-view{position:absolute;-webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); width:100%;}
	.tab-view.show{-webkit-transform: translate3d(0%, 0, 0)!important; transform: translate3d(0%, 0, 0)!important;}
	.tab-view.hide{-webkit-transform: translate3d(-100%, 0, 0)!important; transform: translate3d(-100%, 0, 0)!important;}
	
	/* WHITE THEME */
	.tabbed-list.white-theme nav a{border-color:#fff; color:#fff;}
	.tabbed-list.white-theme nav a:last-of-type{border-color:#fff;}
	.tabbed-list.white-theme nav a.show{background:#fff; color:#516b8e;}

	.bullet-theme nav a{width:10px; height:10px; border:none; background:#bfbfbf; border-radius:50%; margin:0 2.5px;  text-indent:-9999px; font-size:0; padding:0}
	.bullet-theme nav a:first-of-type{ border-radius:50%;}
	.bullet-theme nav a:last-of-type{border-right:none; border-radius:50%;}

	.swipe-layer-nav{text-align:center;}
	.swipe-layer-nav a{display:inline-block;width:10px; height:10px; border:none; background:#bfbfbf; border-radius:50%; margin:0 2.5px;  text-indent:-9999px; font-size:0; padding:0}
	.swipe-layer-nav a.selected{background:#848484;}

	/*//////////////////////////////////////////
	//	UI LISTS
	//////////////////////////////////////////*/
	
	.data-table{width:100%;}
	.data-table td{padding:15px 10px; background:#fff; line-height:1.2em}
	.cell-padding-10 td{padding:10px 10px 10px 0px; }
	.cell-padding-10 td:first-of-type{padding-left:10px;}
	
	.cell-padding-tb-10 td{padding:10px 0;}
	
	.list-table{display:table; font-size:90%;}
	.list-table .row{display:table-row;}
	.list-table .row span{display:table-cell;}
	
	
	.data-row{border-bottom:1px solid rgba(0,0,0,0.1);}
	.data-row:after{content:' '; clear:both; display:block;}
	.data-row > div{padding:10px;}
	
	.data-table td{border-bottom:1px solid rgba(0,0,0,0.1); }
	.data-table th{color:#ddd;border-bottom:1px solid rgba(0,0,0,0.1); padding:3px 10px; font-weight:normal; text-align:left; text-transform:uppercase; font-size:80%; background:#fff}
	.data-table-stat{border-radius:30px; padding:5px 7.5px; background:rgba(0,0,0,0.1); color:#2d2d2d; display:block; line-height:normal; font-size:80%; text-align:center; text-transform:uppercase}
	.data-table .forward-arrow{width:32px; height:32px;}
	.data-table td strong{display:block;}
	.image-td{padding:0 5px 0 0!important}
	.image-td img{width:100%; height:auto; display:block;}
	
	.icon-td{padding:0 0 0 10px!important}
	.arrow-td{padding:10px 0!important;}
	.add-td{padding:10px 0 10px 5px!important;}
	

	.list-menu-colour{list-style:none; background:#fff; padding-bottom:15px}
	.list-menu-colour li{background:#fff;}
	.list-menu-colour li span{display:block; float:left; width:15px;background:#a2825c; height:69px}
	.list-menu-colour li a{display:block; padding:21px 15px 21px 0px;border-bottom:1px solid rgba(0,0,0,0.1); margin-left:30px; color:#2d2d2d}

	.list-icon-menu{list-style:none; background:#fff;}
	.list-icon-menu li{background:#fff; padding:15px 0 0 7.5px}
	.list-icon-menu li span{display:block; float:left; width:36px;height:36px}
	.list-icon-menu .forward-arrow{height:32px; width:32px; float:right;margin:0 5px 0 0}
	.list-icon-menu li a{display:block; padding:3px 15px 15px 0;border-bottom:1px solid rgba(0,0,0,0.1); margin-left:49.5px;color:#2d2d2d}
	.list-counter{float:right; padding:3px 0 0; display:none; color:#999}
	
	.list-counter.show{display:block;}
	
	.list-single-menu{list-style:none;}
	.list-single-menu li{ padding:10px 30px 10px 10px;border-bottom:1px solid rgba(0,0,0,.1); position:relative}
	.list-single-menu .forward-arrow{height:32px; width:32px; float:right;margin:0 0 0 0; position:absolute; top:6px; right:0px}
	.list-single-menu li strong{display:block; padding:0;}
	
	.list-stat{border-radius:30px; padding:5px 7.5px; background:rgba(255,255,255,.35);  display:block; line-height:normal; font-size:80%; text-align:center; text-transform:uppercase; float:right; width:48px}

	
	.list-stats{list-style:none;}
	.list-stats li{padding:10px 15px;border-bottom:1px solid rgba(0,0,0,0.1);}



	.list-menu-plain{list-style:none; background:#fff; border-top:1px solid rgba(0,0,0,0.1); }
	.list-menu-plain li{display:block; padding:10px 0 10px 10px;border-bottom:1px solid rgba(0,0,0,0.1); line-height:normal}
	.list-menu-plain .forward-arrow{height:42px; width:42px; float:right;margin:0}
	.list-menu-plain strong{display:block}


	.box-list{padding:15px; background:#fff; box-shadow:3px 3px 0 rgba(0,0,0,0.1); margin:7px 7px 0;}
	.stylist-list{ border-right:5px solid #472d8b}


	.list-menu{list-style:none; background:#fff; padding-bottom:60px}
	.list-menu li a{display:block; padding:15px!important;border-bottom:1px solid rgba(0,0,0,0.1);}

	.category-all{background:#674941!important;}

	.forward-arrow{background:url(images/svg/arrow-forward.svg) center center no-repeat; background-size:100%;}
	
	.list-menu .forward-arrow{height:32px; width:32px; float:right; margin:17px 5px 17px 7.5px}

	.list-menu li:hover{}
	.list-menu li:hover a{border-bottom:1px solid rgba(0,0,0,0);}
	.list-menu li:hover .forward-arrow{}
	
	
	.list-menu .li-braids:hover{background:#906090!important;}
	.list-menu .li-ponytail-drawstrings:hover{background:#604878!important;}
	.list-menu .li-weaves:hover{background:#483078!important;}
	.list-menu .li-wigs:hover{background:#301860!important;}


	.list-plain-menu{list-style:none; background:#fff; border-top:1px solid rgba(0,0,0,0.1);  padding-bottom:60px}
	.list-plain-menu li{display:block; padding:10px 5px 10px 15px;border-bottom:1px solid rgba(0,0,0,0.1); line-height:normal}
	.list-plain-menu .forward-arrow{height:32px; width:32px; float:right;margin:0}
	
	.small-text{color:#fff; text-transform:uppercase; font-size:90%}
	.grey-text{ color:#aaa;}

	.category-title{text-align:center; border-top:1px solid rgba(0,0,0,0.1); padding:15px 0 15px; margin:0 0 0 0; font-size:120%; background:#f9f9f9;font-family:'Yanone', sans-serif; text-transform:uppercase}
	
	.list-info{color:#fff!important; float:right;}
	
		
	/*//////////////////////////////////////////
	//	TRANSFORM EFFECTS
	//////////////////////////////////////////*/
	
	.stage-left{-webkit-transform: translate3d(100px, 0, 0)!important; transform: translate3d(100px, 0, 0)!important;}
	.stage-up{-webkit-transform: translate3d(0, -48px, 0)!important; transform: translate3d(0, -48px, 0)!important; opacity:0.5}


	/*/////////////////////////////////////////////////////////
	//	ALIGN DEVICE
	/////////////////////////////////////////////////////////*/
	

	
	.device-right #menu{left:0}
	.device-right .toolbar-right,.device-right #fragment-window-close{right:0;}
	.device-right .toolbar-left{left:0;}
	
	.device-right .fragment-header-right{right:0}
	.device-right .fragment-header-left{left:0;}



	/*/////////////////////////////////////////////////////////
	//	MAIN ACTIVITY LOADER
	/////////////////////////////////////////////////////////*/
	

	
	#background-stage{ transform: translate3d(0, 0%, 0) scale(1.2); opacity: 0;z-index:10003!important}
	
	#background-stage.show{ transform: translate3d(0%, 0, 0) scale(1); opacity: 1;}
	#background-stage.hidden{z-index:0!important;opacity: 0!important;}
	
	.background-spinner{background-size:32px; position:absolute; bottom:80px; left:50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); height:32px; width:32px;}
	
	
	#reset-connection{visibility:hidden; opacity:0; bottom:30px; position:absolute; left:50%; -webkit-transform: translate3d(-50%, 0, 0) scale(0); transform: translate3d(-50%, 0, 0) scale(0); height:32px;}
	#reset-connection.show{visibility:visible; opacity:1;-webkit-transform: translate3d(-50%, 0, 0) scale(1);transform: translate3d(-50%, 0, 0) scale(1);}
	
	#reset-connection .button{text-align:center; background:#1f1f1f}
	


	@media screen and (max-width: 800px) {
		#background-stage{background-size:auto 100%;}
	}
	
	@media screen and (max-height:480px){
		#background-stage{background-size:100%!important;background-position:center!important}
		canvas{min-width:100%!important; max-width:100%!important;}

	}
	
	@media screen and (max-width: 320px){
	
	}
	/*///////////////////////////////////////////
	//	THEME STYLES
	///////////////////////////////////////////*/


	.wrong{background:rgba(255,0,0,0.05)!important;}
	.correct{}
	.return-validation{position:absolute; right:5px; top:5px; font-size:80%; }
	
	.wrong .return-validation{color:#bb1333; opacity:0}
	.correct .return-validation{color:#fff;}
		



	/*/////////////////////////////////////////////////////////
	//	MODAL DIALOGS
	/////////////////////////////////////////////////////////*/	
	
	#fullscreen-dialog{position:fixed; top:0%; right:0%; bottom:0%; left:0%; -webkit-transform:translate3d(0,0,0) scale(1.2);transform:translate3d(0,0,0) scale(1.2); opacity:0; z-index:0}

	#fullscreen-dialog.show{-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1); opacity:1; z-index:10003;}
	#fullscreen-dialog #content{position:absolute; top:0; right:0; top:0; bottom:0; left:0;}
	
	#fullscreen-dialog .overflow{ }
	
	.pushback-main{
		-webkit-transition: all 500ms  cubic-bezier(0.075, 0.82, 0.165, 1);
		transition: all 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
		-webkit-transform:translate3d(0,0,0) scale(.7);transform:translate3d(0,0,0) scale(.7);}
	
	#modal-alert,#modal-option{max-width:380px;}

	.md-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 100%;
		max-width: 630px;
		min-width: 280px;
		height: auto;
		z-index: -1;
		opacity:1;
		transform: translateX(-50%) translateY(-50%);
		
	}
	
	.md-show {
		display:block;
		opacity:1;
		z-index: 10004;
	}
	
	.md-overlay {
		position: fixed;
		width: 100%;
		height: 100%;
		-webkit-transform:translate3d(100%,0,0);
		transform:translate3d(100%,0,0);
		top: 0;
		left: 0;
		z-index: 10003;
		opacity: 0;
		background: rgba(0,0,0,0.3);
	}
	.md-overlay.show,
	.md-show ~ .md-overlay {
		opacity: 1!important;
		 -webkit-transform:translate3d(0%,0,0);
		 transform:translate3d(0%,0,0);
		 
	}
	
	/* Content styles */
	.md-content {
		color: #505050;
		background: #fff;
		position: relative;
		border-radius: 3px;
		margin: 0 auto;
		padding: 0 0 15px;
		opacity:1;
		box-shadow:0 0 15px rgba(0,0,0,0.3);
	}
	
	.md-content .button-container{border-radius:0 0 3px 3px;}
	
	.md-content .md-title {
		margin: 0;
		padding: 20px;
		font-size: 140%;
		font-weight: 300;
		opacity: 0.8;
		background: #b7d763;
		display:block;
		color:#fff;
	}
	
	.md-content > .md-content-text {
		padding: 10%;
		margin: 0;
		text-align:center;
		
	}
	
	.md-content > div p {
		margin: 0;
	
	}
	
	.md-content > div ul {
		margin: 0;
		padding: 0 0 30px 20px;
	}
	
	.md-content > div ul li {
		padding: 5px 0;
	}
	
	.md-content .button {
		display: block;
		margin: 0 auto 15px;
		max-width:220px;
		
	}

	/* Effect 1: Fade in and scale up */
	.md-effect-1 .md-content {
		-webkit-transform: scale(0.7);
		-moz-transform: scale(0.7);
		-ms-transform: scale(0.7);
		transform: scale(0.7);
		opacity: 0;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}
	
	.md-show.md-effect-1 .md-content {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}



	/* Effect 3: Slide from the bottom */
	.md-effect-3 .md-content {

		-webkit-transform: translateY(20%);
		-moz-transform: translateY(20%);
		-ms-transform: translateY(20%);
		transform: translateY(20%);
		opacity: 0;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}
	
	.md-show.md-effect-3 .md-content {
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}



	/*==========================================
	//	CONTEXT MENU
	/==========================================*/

	#context-menu-dialog{display:none; position:fixed; z-index:1000}

	#context-menu{width:160px; border:1px solid rgba(0,0,0,0.2); box-shadow:1px 1px 1px rgba(0,0,0,0.1); border-radius:5px; background:#fff;}

	.context-menu-options ul{list-style:none;}
	.context-menu-options ul li{border-bottom:1px solid rgba(0,0,0,0.1);  padding:0 0 0 0; }
	.context-menu-options ul li a{display:block;padding:10px; color:#2d2d2d; cursor:pointer; text-decoration:none;position:relative}
	.context-menu-options ul li a.fa-icon{padding-left:26px}

	.context-menu-options ul li:hover{background:rgba(0,0,0,0.03)}

	.context-menu-options .fa{position:absolute; top:10px; left:7.5px; font-size:18px}

	#context-menu-dialog.show{display: block}

	#context-menu-cancel{display: none;text-align:center; text-align:center;padding:10px; background:#fff; border-radius:5px; margin-top:7.5px; color: red}

	@media screen and (max-width: 641px){

		#context-menu-dialog{background:rgba(0,0,0,0.3); bottom:0; right:0; left:0!important; top:0!important; z-index:1000; transform:translate3d(0,110%,0); opacity:0; display: block;}
		#context-menu-cancel{display: block;}

		#context-menu{position:fixed; bottom:7.5px; left:7.5px; right:7.5px; z-index:1001; transform:translate3d(0,110%,0); box-shadow:none; opacity:0; background: none; width: auto; border: none;}
		.context-menu-options{display:block; background:#fff; border-radius:5px; text-align:center; width: auto}

		.context-menu-options ul li a.fa-icon{padding-left:0}

		#context-menu-dialog.show{
			opacity: 1!important;
			transform:translate3d(0,0%,0);
			 -webkit-transform:translate3d(0%,0,0);
		}


		.context-menu-options .fa{position:absolute; top:10px; left:15px; font-size:21px}

		#context-menu-dialog.show #context-menu{ transform:translate3d(0,0%,0); -webkit-transform:translate3d(0,0%,0); opacity:1}

	}

	/*
	#context-menu-dialog{position:fixed; background:rgba(0,0,0,0.3); bottom:0; right:0; left:0; top:0; z-index:1000; transform:translate3d(0,110%,0); -webkit-transform:translate3d(0,110%,0); opacity:0}
	#context-menu{position:fixed; bottom:7.5px; left:7.5px; right:7.5px; z-index:1001; transform:translate3d(0,110%,0); -webkit-transform:translate3d(0,110%,0); opacity:0}
	.context-menu-options{display:block; background:#fff; border-radius:5px; text-align:center;}
	#context-menu ul{list-style:none; padding:0; margin:0}
	#context-menu ul li{padding:10px 7.5px; border-top:1px solid rgba(0,0,0,0.1);}
	



	
	
	#context-menu-title{color:#bbb; font-size:90%; padding:7.5px; display:block}
	
	#context-menu-cancel{text-align:center; color:#516b8e; text-align:center; display:block; padding:7.5px; background:#fff; border-radius:5px; margin-top:7.5px}
	
	#context-menu-dialog.show{
		opacity: 1!important;
		transform:translate3d(0,0%,0);
		 -webkit-transform:translate3d(0%,0,0);
	}
	#context-menu-dialog.show #context-menu{ transform:translate3d(0,0%,0); -webkit-transform:translate3d(0,0%,0); opacity:1}

	*/

	/*/////////////////////////////////////////////////////////
	//	OBJECT CSS
	/////////////////////////////////////////////////////////*/


	/*	Text Align Center	*/
	
	.text-align-center{text-align:center!important;}
	.text-align-left{text-align:left;}
	.text-align-right{text-align:right!important;}
	/*	Columns	*/
	
	.column-33{width:33.3333333333333%; float:left}
	.column-66{width:66.6666666666666%; float:left}
	.column-25{width:25%; float:left}
	.column-20{width:20%; float:left}

	.column-100{width:100%;}
	

	/*	BOX CURVES	*/

	.radius-5-top{border-radius:5px 5px 0 0;}
	.radius-5-bottom{border-radius:0 0 5px 5px;}
	.radius-5-left{border-radius:5px 0 0 5px;}
	.radius-5-right{border-radius:0 5px 5px 0;}
	.radius-5{border-radius:5px}

	.radius-3-top{border-radius:3px 3px 0 0;}
	.radius-3-bottom{border-radius:0 0 3px 3px;}
	.radius-3-left{border-radius:3px 0 0 3px;}
	.radius-3-right{border-radius:0 3px 3px 0;}
	.radius-3{border-radius:3px}
	
	.circle{border-radius:50%; overflow:hidden}

	/*	Floats	*/
	.float-left{float:left;}
	.float-right{float:right;}
	.float-none{float:none;}
	.clear{height:0; line-height:none; clear:both;}

	.center-box{-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0); left:50%; top:50%; position:absolute;}

	@media screen and (max-height:480px){
		#background-stage{background-size:100% auto;}
	}


	@-webkit-keyframes bubbles {
		from { -webkit-transform: rotate(0deg) translate3d(150px,0,0) rotate(0deg); }
		to   { -webkit-transform: rotate(360deg) translate3d(150px,0,0) rotate(-360deg); }

	}
	
	
	@media screen and (max-width:641px){
		.column-33{float:none; width: 100%}
	}

	


	/*=======================================================
	// LAYOUTS
	/======================================================*/	

	.vertical-center,.center-vertical{display: flex; align-items: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100vh;}
  	.center-self{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}


	/*=======================================================
	// ACTIVITY VIEW CONTROLLER
	/======================================================*/	

    .activity-view-controller{
		position: fixed; top: 0; right: 0; bottom: 0; left: 0;
		z-index: -1;
		visibility: hidden;
		opacity: 0;
		will-change: transform, opacity;

	}

	/* SET PANELS TO RELATIVE HEIGHT */
	.activity-view .panels{height: 100%; min-height: 100%;}
	
	.activity-view-controller .overlay{
		background:rgba(0,0,0,0);
		position: fixed; top: 0; right: 0; bottom: 0; left: 0;
		transition-property: background;
		will-change: background;
	}

    .activity-view-controller > .activity-view{
        position: absolute;  top: 0; right: 0; bottom: 0; left: 0;
		transform: translate3d(0,10%,0);
		transition-property: transform, opacity;
	}
	
	.activity-view-controller .activity-view.present-from-right{
		transform: translate3d(100%,0%,0);
	}

	/* SHOW */
	.activity-view-controller.show{visibility: visible; z-index: 10; opacity: 1;}
	.activity-view-controller.show .overlay{background:rgba(0,0,0,.2)}
    .activity-view-controller.show > .activity-view{
        transform: translate3d(0,0%,0);
    }	
	
	/* DISMISS */
	
    .activity-view-controller.dismiss > .activity-view{
		transform: translate3d(0,10%,0);
		opacity: 0;
		transition-delay: 0s;
    }		
	.activity-view-controller.dismiss .overlay{background:rgba(0,0,0,0)!important; transition-delay: 0.4s;}
	

	.activity-view-controller .appear-from-right{
		width: 100%;
		max-width: 420px;
		right:0;
		left:auto;
		top:0;
		bottom:0;
		opacity: 0; 
		box-shadow:0 0 15px rgba(0,0,0,.4);
        transform: translate3d(5%,0%,0); 
	}

	.activity-view-controller.show .appear-from-right{transform:  translate3d(0%,0%,0); opacity: 1; transition-delay: 0.1s;}

	.activity-view-controller.dismiss .appear-from-right{
		opacity: 0; 
        transform: translate3d(5%,0%,0); 
	}

	/* Bottom Dialog */
	.activity-view.bottom-dialog{
		background: #fff;
		box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.05);
		top:auto;
		bottom: 0;
		left: 0;
		right: 0;
		margin-bottom: env(safe-area-inset-bottom);
	}


	/* Activity View Card Dialog */
	.activity-view-controller .card-dialog{

        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        border-radius: 10px;
        height: auto;
        max-height: 90vh;
        width: 90%;
        max-width: 420px;
        transform: translate3d(-50%,-45%,0);
        opacity: 0;
        box-shadow:0 0 15px rgba(0,0,0,0.3);
        transition-property: transform, opacity;

    }

	.activity-view-controller .card-dialog.elavation-medium{
        box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.2);
    }


    .activity-view-controller.show .card-dialog{transform:  translate3d(-50%,-50%,0); opacity: 1}
    

    .activity-view-controller.dismiss > .card-dialog{
		transform: translate3d(-50%,-40%,0); opacity: 0;
	}	
	
	.card-dialog.flex-height{
		min-height: 90vh;
	}

	

	.pwa-install-header{
		display: grid;
		grid-template-columns: 42px 1fr;
		column-gap: 15px;
		align-items: center;
	}

	.pwa-install-heade h3,
	.pwa-install-header p{margin-bottom: 0;}

	.pwa-install-btns{
		display: grid;
		grid-template-columns: 110px 110px;
		justify-content: center;
		margin-top: 15px;
	}


	.sliver-view{
		height: 100vh;
		overflow: auto;
	}


	.activity-view.pop-over{
        border-radius: 15px 15px 0 0;
        top: env(safe-area-inset-top);
        overflow: hidden;
        margin-top: 2vh
    }

    .activity-view-pushed-back{
        border-radius: 15px 15px 0 0;
        transform: translate3d(0, env(safe-area-inset-top),0) scale(0.96)!important;
        overflow: hidden;
        margin-top: -2vh
    }

	.activity-view-pushed-left{
        transform: translate3d(-5%,0,0)!important;
        overflow: hidden;
    }


    .activity-view.pop-over .panel-padding-top:before,
    .activity-view.pop-over .fragment-toolbar:before{
        display:none;
    }

    .activity-view.pop-over .fragment-toolbar .toolbar-left,
    .activity-view.pop-over .fragment-toolbar .toolbar-right,
    
    .activity-view.pop-over .icon-close{
        top:0;
    }

	/*=======================================================
	// SLIVER SCROLL
	/======================================================*/

	.sliver-appbar{

		height: 34vh;
		position: absolute;
		top:0; 
		left: 0;
		right: 0;
		min-height: 48px;
		padding-top: env(safe-area-inset-top);
		color:#fff;
		will-change: height;
		transform: translate3d(0,0,0);

	}

	.sliver-appbar .fragment-toolbar{top:0}

	.sliver-appbar-content{
		position: absolute;
		height: 100%;
		overflow: hidden;
		width: 100%;
		top: 0;
		padding-bottom: env(safe-area-inset-top);
	}

	.sliver-content{margin-top:34vh; min-height: calc(100vh - 48px); padding-top: env(safe-area-inset-top)}

	/*=======================================================
	// WALKTHROUGH
	/======================================================*/

	#walkthrough-overlay{background:rgba(0,0,0,.1); position:fixed; top:0; right:0; left:0; bottom:0; z-index:12; visibility:hidden; transform:translate(-100%,0); opacity:0; transition-property:visibility, opacity}
	#walkthrough-target{position:absolute; top:0; left:0; padding:7.5px; width:48px; height:48px; border-radius:50%; opacity:0; background:#fff;}
	#walkthrough-content{background:#fff; padding:30px; box-shadow:0 0 3px rgba(0,0,0,.3); position:absolute; min-width: 360px; max-width:420px; opacity:0; transform:translate3d(0,10%,0); transition-property:opacity, transform; }
	#walkthrough-content-inner h3{font-size: 180%; font-weight: 700; margin-bottom: 7.5px}
	
	#walkthrough-target .center-self *{position: relative!important; padding: 0; filter: grayscale(1);}
	#walkthrough-target .fa{font-size: 24px; }
	#walkthrough-target .fa::before{position: absolute; top: 50%; left: 50%;  transform: translate(-50%,-50%);}

	#walkthrough-target img{width: 28px; height: 28px; border-radius: 50%; display: block}

	#walkthrough-target .menu-icon span{background: #444!important;}

	#walkthrough-content.center-self{left: 50%!important; top: 50%!important; transform: translate3d(-50%,-40%,0);}

	.guide-icon{max-width: 90px; max-height: 90px; width: 35vw; height: 35vw; margin:0 auto 30px}

	.guide-icon.fa{font-size: 90px;}
	
	#walkthrough-overlay.show{visibility:visible; transform:translate(0%,0); opacity:1;}
	
	#walkthrough-overlay.show-help #walkthrough-target{
		opacity:1;
		border-color:#fff;
		transition:
			transform .5s cubic-bezier(0.075, 0.82, 0.165, 1),
			opacity .5s cubic-bezier(0.075, 0.82, 0.165, 1),
			border-top-color 0.15s linear,
			border-right-color 0.15s linear 0.10s,
			border-bottom-color 0.15s linear 0.20s,
			border-left-color 0.15s linear 0.30s;	
	}

	#walkthrough-overlay #walkthrough-target:after{
		content:" "; width:100%; height:100%; border-radius:50%; border:4px solid #fff; position:absolute;top:-4px; left:-4px;
		animation:pulseObjective 1.3s infinite ; 
	}

	#walkthrough-overlay.show-help #walkthrough-content{opacity:1; transform:translate3d(0,0%,0);}


	#walkthrough-overlay.show-help #walkthrough-content.center-self{transform: translate3d(-50%,-50%,0);}


	@media screen and (max-width: 959px){
		#walkthrough-content{position: absolute; left:50%!important; transform: translate3d(-50%,0%,0)!important; width: 80%; max-width: 420px; min-width: 0}
		#walkthrough-content.center-self{position: absolute; left:50%!important; transform: translate3d(-50%,-50%,0)!important; top: 50%!important}

	}


	@media screen and (max-width: 320px){
		#walkthrough-content{ max-width: 240px;}

	}

	@keyframes pulseObjective{
		0% {
		  transform: translate3d(0,0,0) scale(.5);
		  opacity:1;
		}
		100% {
		  transform: translate3d(0,0,0) scale(2);
		  opacity:0;
		}
	  }	


	/*================================================
    // SKELETON SCREEN
    /================================================*/

    .skeleton-screen{position: relative}

    .skeleton-screen .bg{background: #efefef!important;overflow: hidden;}

    .skeleton-screen *{box-shadow: none!important}

    .skeleton-screen h2.text,
    .skeleton-screen h3.text{background:rgba(0, 0, 0,.03); border-radius: 45px; width: 30%; padding: 2.5px; margin-bottom: 45px; overflow: hidden;}
    .skeleton-screen span.text{background:rgba(0, 0, 0,.03); border-radius: 45px; width: 50%; padding: 0px; display: block; margin: 7.5px 0;overflow: hidden;}
    .skeleton-screen span.space{padding: 0px; display: block; margin-bottom: 7.5px}

    .skeleton-screen .button{background:rgba(0, 0, 0,.03)!important; overflow: hidden;}

	.gradient-load{position: relative;}
    .skeleton-screen .gradient-load{position: relative; overflow: hidden;background:rgba(0, 0, 0,.03)!important; border-color: transparent!important; -webkit-backface-visibility: hidden;}
	.skeleton-screen .gradient-load.font-icon{border-color: transparent!important; z-index: 1;}
	
    .skeleton-screen .gradient-load:after{
        top: 0;
        display: block;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        transform: translateX(-100%);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
        animation: loading 1.5s infinite;
        
	}
	
	.skeleton-screen .gradient-load.font-icon::after{z-index: 0;}

    .skeleton-screen .data-table td{border-bottom: 1px solid rgb(0, 0, 0,0.03)!important;}

    @keyframes loading {
        100% {
          transform: translateX(100%);
        }
      }
      


	/*=======================================================
	// CONTEXT DIALOG VIEW
	/======================================================*/

	.context-dialog-header{padding:10px 15px;}
	.context-dialog{ background:#fff; position: absolute;  z-index: 1; visibility: hidden; transform: translate3d(0,10%,0); opacity: 0; box-shadow: 0 0 3px rgb(0, 0, 0,.3)}

	.context-dialog.show{transform: translate3d(0,0,0); opacity: 1; visibility: visible}
	
	
	/*=======================================================
	// GRID LIST
	/======================================================*/

	.grid-list-item{
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(0px,1fr));
		border-bottom: 1px solid rgb(0, 0, 0,.1);
		padding: 15px 0;
	}

	.grid-icon-list-item{
		display: grid;
		grid-template-columns: 48px 1fr 32px 32px;
		align-items: center;
		border-top: 1px solid rgb(0, 0, 0,.1);
		padding:0;
		text-align: left;
	}

	.grid-switch-list-item{
		border-top: 1px solid rgb(0, 0, 0,.1);
		padding:15px 0;
		text-align: left;
	}

	.grid-switch-list-item-columns{
		display: grid;
		grid-template-columns: 1fr 42px;
		align-items: center;
		margin-bottom: 5px;;

	}

	.grid-switch-list-item .onoff-switch{justify-self: end; }

	

	.list-item-icon{width:48px; height: 48px; display: flex; align-items: center; justify-content: center;}
	.list-item-icon .fa{font-size: 21px;}


	.list-item-state, .list-item-open{justify-self: center;}
	.list-item-open .fa{font-size: 30px;}

	.icon-heading{display: grid; grid-template-columns:28px 1fr; column-gap: 5px; line-height: 1em; align-items: center;}
	.icon-heading .fa{justify-self: center; display: flex; width: 28px; height: 28px; align-items: center; justify-content: center;}


	.icon-heading.right{display: grid; grid-template-columns: 1fr 28px;}
	

	.box-slides-navigation-bar{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		min-height:48px;
		border-radius: 10px 10px 0 0;
		z-index: 2;
	}

	.box-slides-navigation-bar .fragment-toolbar{
		transform: translate3d(10%,0,0)!important;
		z-index: 0;
	}
	
	.box-slides-navigation-bar .fragment-toolbar.show{
		transform: translate3d(0%,0,0)!important;
		z-index: 1;
	}
	.box-slides-navigation-bar .fragment-toolbar.hide{
		transform: translate3d(-10%,0,0)!important;
		z-index: 0;
	}

	.box-slides{
		height: 100%;
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	.box-slide{
		opacity: 0;
		transform: translate3d(10%,0,0);
		position: absolute;
		height: 100%;
		width: 100%;
		will-change: transform, opacity;
	}

	

	
	.box-slide.present{
		opacity: 1;
		z-index: 1;
		transform: translate3d(0,0,0);
	}


	.box-slide.dismiss{
		opacity: 0;
		z-index: 0;
		transform: translate3d(-10%,0,0);
	}


	.box-slide .floating-bottom-btn{visibility: hidden; opacity: 0; transform: translate3d(0,10%,0); transition-property: opacity, transform;}
    .box-slide.present .floating-bottom-btn{visibility: visible; transition: .2s cubic-bezier(0.075, 0.82, 0.165, 1); transition-delay: .3s; opacity: 1;transform: translate3d(0,0%,0);}

    .box-slide.dismiss .floating-bottom-btn{visibility: hidden; opacity: 0;transform: translate3d(0,10%,0); transition-property: opacity, transform;}

	/*=======================================================
	// UI SWITCH
	/======================================================*/

	.onoff-switch{width:50px; height:30px; border-radius: 50px; background:rgba(0,0,0,.03); position: relative; border: 1px solid rgba(0,0,0,0.1); box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; cursor: pointer;}
	.onoff-switch{transition: border 0.2s ease-in 0s, box-shadow 0.2s ease-in 0s, background-color .2s ease-in 0s}

	.switch-btn{width:30px; height:30px;border-radius: 50%; box-shadow:0 1px 3px rgba(0,0,0,0.2); background:#fff; position: absolute; left: 0px; top: 0px}
	.switch-btn{transition: transform 0.1s ease-in}

	
	.onoff-switch.on .switch-btn{transform: translate3d(20px,0,0)}


	.onoff-switch.small{width:30px; height:17px; border-radius: 42px; }
	.onoff-switch.small .switch-btn{width:17px; height:17px;}
	.onoff-switch.on .switch-btn{transform: translate3d(13px,0,0)}

	/*=======================================================
	// UI INPUTS
	/======================================================*/


	.ui-checkbox{
		display:inline-grid; 
		grid-template-columns:0 24px auto; 
		column-gap:5px;
		align-items:center;
		justify-content:center;
	}
	.ui-checkbox-input{
		width:18px; 
		height:18px; 
		border-radius:3px;
		border:1px solid rgba(0,0,0,0.1);
		display:flex;
		align-items:center;
		justify-content:center;
	}

	.ui-checkbox-input i{
		opacity:0;
	}

	.ui-checkbox input:checked ~ .ui-checkbox-input {
		background-color: #2196F3;
	}
	.ui-checkbox input:checked ~ .ui-checkbox-input i{
		opacity:1;
	}

	.ui-radio-input{
		width:24px;
		height: 24px;
		border-radius: 50%;
		border:2px solid rgb(0, 0, 0,.3);
		position: relative;
		transition: border 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
	}

	.ui-radio-input:after{
		content: ' ';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 75%;
		height: 75%;
		transform: translate3d(-50%,-50%,0) scale(0);
		background: #444;
		border-radius: 50%;
		transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
	}

	

	.ui-radio-input.checked{
		border-color: #444;;
	}
	.ui-radio-input.checked::after{
		transform: translate3d(-50%,-50%,0) scale(1);
	}
	.ui-radio-input.checked .fa{
		opacity: 1;
	}

	.ui-radio-input.small{
		width:18px;
		height: 18px;
	}

	.ui-radio-input.small:after{
		width: 75%;
		height: 75%;
	}

	/*=======================================================
	// MENU BUTTON CONTROLLER
	/======================================================*/

	.menu-button-container{position: relative;}
    .menu-button{width: 54px; height:54px; background:#444;  margin:15px auto 15px; border-radius: 50%; position: relative;}

	.menu-button > i{color: #fff!important; font-size: 28px; transform: translate3d(-50%,-50%,0); left: 50%; top: 50%; position: absolute}
    .menu-button > .fa-plus{ transition: 0.3s  cubic-bezier(0.68, -0.55, 0.265, 1.55) transform; }
    .menu-button.hover > .fa-plus{transform: translate3d(-50%,-50%,0) rotate(22.5deg);transition-duration: 1s;}


    .menu-button-list{
        width: auto; 
        position: absolute; 
        transform: translate3d(-50%,-50%,0) scale(0); 
        left: 50%; 
        top: 0; 
		opacity: 0;
		z-index: 2;
		transition: 0.3s  cubic-bezier(0.68, -0.55, 0.265, 1.55); 
		transition-property: transform, opacity;
    }

    .menu-button-list:after, .menu-button-list:before{
        opacity: 0;
        transition: 0.3s  cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    }

    .menu-button-list ul{
        list-style-type: none; 
        border-radius: 45px; 
        padding: 10px;
        text-align: center;
        background: #fff;
        box-shadow: 0 0 3px rgba(0,0,0,0.3);
        white-space:nowrap;
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center;
    }

    
    .menu-button-list:after, .menu-button-list:before {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }


	
    
    .menu-button-list:after {
        border-color: rgba(255, 255, 255, 0);
        border-top-color: #fff;
        border-width: 7px;
        margin-left: -7px;
    }
    .menu-button-list:before {
        border-color: rgba(194, 225, 245, 0);
        border-top-color: rgba(0,0,0,0.2);
        border-width: 8px;
        margin-left: -8px;
    }


	/* Point Up */
	.menu-button-list.point-up:after, .menu-button-list.point-up:before{
		bottom:100%;
		top: auto;
	}


	.menu-button-list.point-up:after {
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #fff;
        border-width: 7px;
        margin-left: -7px;
    }
    .menu-button-list.point-up:before {
        border-color: rgba(194, 225, 245, 0);
        border-bottom-color: rgba(0,0,0,0.2);
        border-width: 8px;
        margin-left: -8px;
    }


	/* Items */
    .menu-button-list li{display: block; width: 42px; height:auto; padding:0!important; font-size: 28px; text-align: center; transform: translate3d(0%,10%,0); opacity: 0; transition: 0.3s  cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-property: transform, opacity; transition-delay: 0.3s}
    .menu-button-list li i{font-size: 21px; color: #444}


    .menu-button-container.open .menu-button-list{transform: translate3d(-50%,-50%,0) scale(1); opacity: 1;}
    .menu-button-container.open .menu-button-list:after, 
    .menu-button-container.open .menu-button-list:before{
        opacity: 1;
    }

    .menu-button-container.open .menu-button-list li{opacity: 1; transform: translate3d(0%,0,0);}
    .menu-button-container.open .menu-button .fa-plus{transform: translate3d(-50%,-50%,0) rotate(135deg); transition-duration: 0.3s }


	/*=======================================================
	// ICON SIZES
	/======================================================*/
	
	.icon-64{width:64px; height:64px;}
	
	/*=======================================================
	// IOS OVERLAY
	/======================================================*/


	.toolbar-panel.no-childs:before,
	.panel-padding-top:before,
	.fragment-toolbar:before{
		content: ' ';
		display: block;
		position: static;
		height:env(safe-area-inset-top);
	}
	
	

	.toolbar-right,
	.toolbar-left{top:env(safe-area-inset-top)}

	.toolbar-panel{max-height: none}

	
	/*.tab-bar-gap{height:58px;}*/
	


	.status-bar-overlay-gap{height:env(safe-area-inset-top);}
	.navigation-bar-overlay-gap{height:env(safe-area-inset-top);}



	/*=======================================================
	// IPAD
	/======================================================*/

	/* Padding for bottom black bar */
	.ipad .tabbed-navigation{padding-bottom:13px}

	.ipad body.statusbar-is-overlay:before{
		content: ' ';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 20px;
		background:#000;
		z-index: 11;
	}

	.ipad.ipad-statusbar-white body.statusbar-is-overlay:before{
		background:#fff;
	}


	.ipad .statusbar-is-overlay .toolbar-panel.no-childs,
	.ipad .statusbar-is-overlay .fragment-toolbar{padding-top:20px;}

	.ipad .statusbar-is-overlay .toolbar-left,
	.ipad .statusbar-is-overlay .toolbar-right{top:20px;}



	/*=======================================================
	// MOBILE
	/======================================================*/

	@media screen and (max-width: 767px){
		#snackbar-dialog .container{
			grid-template-columns: 1fr;
			text-align: center;
			box-shadow: 0 2.5px 25px rgb(0 0 0 / 15%);
		}

		#snackbar-dialog .snackbar-buttons{
			text-align: center;
			padding-bottom: env(safe-area-inset-bottom);
			padding-top: 30px;
			margin-bottom: 15px;
			display: grid;
			justify-content: center;
			align-content: center;
			grid-template-columns: 1fr 1fr;
		}
		#snackbar-dialog .snackbar-buttons.x1{
			grid-template-columns: 1fr;
		}
	}

	/*=======================================================
	// PHABLET
	/======================================================*/
	@media screen and (min-width:768px) and (orientation: portrait){
		.pwa-install-banner{
			display: grid;
			grid-template-columns: 1fr 220px;
			align-items: center;
		}
		
		.pwa-install-btns{
			justify-content: end;
			margin-top: 0;
		}

		.view .view-scroll{padding:3%; margin:3%; height:calc(100% - 12% - 75px);}

		.box-constraint-center,
		.box-constraint-center.app-tile{
			height: 90vw
		}

	}

	/*=======================================================
	// TABLET
	/======================================================*/
	
	@media screen and (min-width: 1024px) and (orientation: landscape){

		.view .view-scroll{padding:3%; margin:3%; height:calc(100% - 12% - 75px);}

		.sliver-view::-webkit-scrollbar,
		.fragment::-webkit-scrollbar,
		.ui-view::-webkit-scrollbar,
		.overflow::-webkit-scrollbar{
			display: block;
		}
		
		.pwa-install-banner{
			display: grid;
			grid-template-columns: 1fr 1fr;
			align-items: center;
		}
		
		.pwa-install-btns{
			justify-content: end;
			margin-top: 0;
		}
		
		#fullscreen-dialog{background:rgba(0,0,0,.1);}
		
		
		/* POP OVER OVERLAY */		
		.panel.has-pop-over:before{content:' '; top:0; right:-50vw; bottom:0; left:0;position:absolute; background:rgba(0,0,0,0); transition:.1s linear background; transition-delay:.33s; z-index:10}		

		.panel.has-pop-over.half-hidden:before{background:rgba(0,0,0,.1);}	
		
		.has-pop-over.show:before{visibility:hidden;}	
		
		.footer-button.half-width{
			margin-left:50%;
		}


		/* HALF WIDTH FRAGMENTS */		

		.toolbar-panel.half-width .fragment-toolbars,
		.panel.half-width .fragments,
		.panel.half-width.no-childs,
		.toolbar-panel.half-width.no-childs
		{width:50%; left:50%;}
		
		.panel.half-width .fragments,
		.panel.half-width.no-childs.show{box-shadow:0 0 3px rgba(0,0,0,.3);}
		.has-pop-over.half-hidden{ transition-delay:.1s;}
		
		.panel.half-width .fragment.hide *{display:none}
		
		
		.panel.half-hidden.has-pop-over
		{-webkit-transform: translate3d(0, 0, 0)!important; transform: translate3d(0, 0, 0)!important; width:50%; display:block!important; opacity:1!important; visibility:visible!important; z-index:0}
		
		.toolbar-panel.half-hidden,
		.toolbar-panel.half-hidden .fragment-toolbar.show
		{-webkit-transform: translate3d(0, 0, 0)!important; transform: translate3d(0, 0, 0)!important; display:block!important; opacity:1!important; visibility:visible!important; z-index:0}
		
	
		
		.toolbar-panel.half-hidden.has-pop-over.full-width,
		.toolbar-panel.half-hidden.has-pop-over.full-width .fragment-toolbar,
		.panel.full-width{width:100%!important;}
		
		
		#fullscreen-dialog #content.half-width{width:50vw; left:50vw;}


		/* TRANSITION PANELS VERTICALLY */
		.vertical.panel{transform:translate3d(0%,100%,0);}
		
		.vertical.panel.hide,
		.vertical.panel.hiding{transform:translate3d(0,-100%,0);}
	
		.vertical.panel.show{transform:translate3d(0,0%,0);}

		/* Transition panels with fade */
		.panel-fade-in.panel{transform:translate3d(0%,10%,0); opacity: 0!important;transition-property:opacity, transform;}
		
		.panel-fade-in.panel.hide,
		.panel-fade-in.panel.hiding{transform:translate3d(0,-10%,0); opacity: 0!important;}
	
		.panel-fade-in.panel.show{transform:translate3d(0,0%,0); opacity: 1!important}
		
		/* Transition fragements with fade */
		.panel-fade-in.fragment{transform:translate3d(10%,0%,0); opacity: 0!important;transition-property:opacity, transform;}

		.panel-fade-in.fragment.hide,
		.panel-fade-in.fragment.hiding{transform:translate3d(-10%,0%,0); opacity: 0!important;}
	
		.panel-fade-in.fragment.show{transform:translate3d(0,0%,0); opacity: 1!important}


		/* Fragment toolbars */
		.fragment-toolbar{transform: translate3d(10%,0,0)!important; z-index: 0;}
		.fragment-toolbar.show{transform: translate3d(0%,0,0)!important; z-index: 1;}
		.fragment-toolbar.hide{transform: translate3d(-10%,0,0)!important;z-index: 0;}

		.fragment{transform: translate3d(10%,0,0)!important; z-index: 0;}
		.fragment.show{transform: translate3d(0%,0,0)!important; z-index: 1;}
		.fragment.hide{transform: translate3d(-10%,0,0)!important;z-index: 0;}


		/* PANEL OVERLAY */
		.ios .panel:after{content:' '; position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,.1); display:block; z-index:2;}
		.ios .panel.show:after{opacity:0; z-index:0; display:none;}
		
		

	
		
		.panel.half-width{transform:translate3d(100%,0,0);}
		.panel.half-width.show{transform:translate3d(0%,0,0);}

	}

	@media screen and (min-width:1400px){
		.toolbar-panel.half-width .fragment-toolbars,
		.panel.half-width .fragments{width:40%; left:60%;}
		
		.panel.hide.has-pop-over,
		.panel.hiding.has-pop-over
		{ width:60%}

		.footer-button.half-width{margin-left: 60%}

		
	}


	/*=======================================================
	// SAFEAREAS
	/======================================================*/
	

	.device-bottom-inset{
		padding-bottom: env(safe-area-inset-bottom);
	}

	.device-top-inset{
		padding-top:env(safe-area-inset-top);
	}