:root {
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-left: env(safe-area-inset-left);
    }
    
    html {
        -webkit-user-select: none;
    }
    a{
        text-decoration: none;
    }
    *:not(input):not(textarea) {
        -webkit-user-select: none; /* disable selection/Copy of UIWebView */
        -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
    }  

    /*================================================
    // TYPOGRAPHY
    /================================================*/

    

    /* Roboto */
    @font-face {
        font-family: 'Roboto-Light';
        src:url('fonts/Roboto-Light.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Roboto-Bold';
        src:url('fonts/Roboto-Bold.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    
    body{font:15px/1.5em 'Roboto-Light', sans-serif; font-weight:normal;color:#2d2d2d}

    h1{color: #12112b; font-family: 'Roboto-Bold',sans-serif; font-weight: normal; font-size: 230%; line-height: 1.1em}

    h1.logo-heading{font-family: 'Roboto-Bold',sans-serif; font-weight: normal; font-size: 230%}

    h2{font-size: 180%}
    h3{font-size: 130%;}

    



    h3{margin-bottom: 0;}

    

    .legal{color: #5e5e5e;}



    .button,
    .small-button,
    .toolbar-font-icon,
    .photo-tile img,
    .arrow-field,
    .onboarding-btns,
    .click-button,
    .menu,
    .link,
    .icon-button,
    .award-section-items li,
    .stream-player-options i,
    .volume-knob,
    .stream-player-track-position,
    .episode-list-item,
    a{cursor: pointer;}
    
    .link{color: var(--primary-color)}

    


    .big-heading{position: relative; padding-bottom: 30px;}

    td .fa{font-size: 19px; margin-left: 5px; float: right; margin-top: -1px; width: 21px; text-align: center}

    #walkthrough-content-inner h3{font-size: 150%}

    #walkthrough-content{padding: 15vw 7.5vw 7.5vw; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1) }

    #walkthrough-target .fa .tab-bubble,
    #walkthrough-target .fa span{display: none}
    #walkthrough-target .menu-icon.airshot-svg-icon *{stroke:#000!important}
    
    #walkthrough-target .menu-icon.airshot-svg-icon{
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        height: 13px;
        width: 28px;
    }


    .onboarding-container h2{margin-top:0!important; padding-bottom: 22.5px!important}

    #onboarding-view-body .tab-view .onboarding-text{transform: translate3d(25%,0,0); transition-delay: 0.1s; opacity: 0; transition-property: opacity, transform}


    #onboarding-view-body .tab-view.show .onboarding-text{transform: translate3d(0%,0,0); opacity: 1;}
    #onboarding-view-body .tab-view.hide .onboarding-text{transform: translate3d(-25%,0,0); opacity: 0;}

    /*================================================
    // LOADERS
    /================================================*/

    #background-stage{background:#fff url(../../assets/css/images/ui-icon.png) center center no-repeat; background-size:auto 15vh; background-position:center center; background-attachment:scroll;}

   

    .theme-applied #icon-colour{
        opacity: 0;
        transform: translate3d(-50%,-60%,0); 
    }

    .theme-applied #icon-white{
        opacity: 1;
        transform: translate3d(-50%,-60%,0); 
    }


    .icon-loading,.icon-reload,.button.loading:after,.footer-button.loading:after{
        box-sizing: border-box;
        width: 32px;
        height: 32px;
        border-radius: 100%;
        border: 2px solid rgba(255, 255, 255, 0);
        border-top-color: var(--primary-color);
        -webkit-animation: turn 1s infinite linear;
        animation: turn 1s infinite linear;
        display:block;
        content:"";
        text-indent: -9999px;
        background: none;
    }	 


    
    .app-tile .icon-loading,
    .icon-loading.in-colour{border-top-color: var(--primary-color)!important}

    .button.loading:after{position: absolute; top: 7px; right: 11.5px; width: 28px; height: 28px; border-top-color: #fff}


   
    .icon-loading.white{border-top-color: #fff!important}

    .footer-button.loading:after{position: absolute; top: 15px; right: 15px; width: 28px; height: 28px;}

    .progress-bar-container{position: relative; height:8px; border-radius: 8px; background: rgba(0, 0, 0,.1)}
    .progress-bar{height:8px; border-radius: 8px; background: rgba(0, 0, 0,.1)}
    .progress-bar-percent{position: absolute; height: 8px; border-radius: 8px; left:0;}


    

    /*================================================
    // ANIMATION
    /================================================*/

    .animate-from-bottom{transform: translate3d(0%, 5%, 0); opacity: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);
		}
	}

    /*================================================
    // ICONS
    /================================================*/

   
    .font-icon.medium{border: none;}
    .toolbar-center-icon{ height: 40px; width: 40px; position: absolute; top: 0; left: 50%; transform:translateX(-50%)}


    /*=== LANGUAGE BADGES ===*/

    /* Default, Light */
    .language-badge{
        width: 32px;
        height: 18px;
        border: 1.5px solid #2d2d2d;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: monospace;
        line-height: 0px;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.25px;
    }

    /* Thin */
    .fa-style-thin .language-badge{
        width: 33px;
        height: 19px;
        border: 1px solid #2d2d2d;
        font-weight: 100;
    }


    /* Sharp */
    .fa-style-sharp-solid .language-badge,
    .fa-style-sharp-regular .language-badge,
    .fa-style-sharp-light .language-badge{
        border-radius: 0!important;
    }


    /* Regular */
    .fa-style-sharp-regular .language-badge,
    .fa-style-regular .language-badge{
        width: 31px;
        height: 17px;
        border: 2px solid #2d2d2d;
        font-weight: 700;
    }
    

    /* Solid */
    .fa-style-duotone .language-badge,
    .fa-style-sharp-solid .language-badge,
    .fa-style-solid .language-badge{
        width: 29px;
        height: 15px;
        border: 3px solid #2d2d2d;
        font-weight: 900;
    }


    /* Tiny, Default */
    .language-badge.tiny{
        border-width: 1px;
        width: 21.5px;
        height: 13.5px;
        font-size: 10px;
        border-radius: 3px;
        justify-self: center;
        color: #2d2d2d;
    }


    /* Tiny, Regular & Solid */
    .fa-style-duotone .language-badge.tiny,
    .fa-style-sharp-solid .language-badge.tiny,
    .fa-style-sharp-regular .language-badge.tiny,
    .fa-style-solid .language-badge.tiny,
    .fa-style-regular .language-badge.tiny{
        border-width: 2px;
        width: 19.5px;
        height: 11.5px;
    }


    #ui-context-menu li:hover .language-badge.tiny{
        border-color: var(--primary-color);
        color: var(--primary-color);
    }
    

    .icon-size-large{width: 40vw; height: 40vw; max-width: 128px; height: 128px;}
    .icon-size-small{width:64px; height: 64px;}



    .svg-icon svg{width: 100%; height: auto;}



    #dialog-repeat-icon{border-radius:50%;width:42px; height:42px;;position:fixed; bottom:15px; right:15px; box-shadow:0 2.5px 7.5px rgba(0,0,0,0.2); z-index:2; display: none; cursor: pointer;}
    #dialog-repeat-icon.show{display: block}
    #dialog-repeat-icon .fa{position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%}
    
    #story-timer{
        position: fixed;
        top: 9px;
        left: 50%;
        transform: translate(-50%,0);
        z-index: 4;
        margin-top:var(--safe-area-inset-top)
    }

    #story-timer div{
        margin-bottom:var(--safe-area-inset-bottom);
        height:30px;
        width:64px;
        border-radius: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        

    }

    #story-timer input{border: none; background: none; width: auto; text-align: center;color: #fff; width: 60px;}



    .signin-logo{width:25vw; height:25vw; margin:0 auto 0; max-width: 128px; max-height: 128px;}

    .back-to-map-icon{color:#1f1f1f;position:absolute; right:15px; top:15px; font-size:32px!important;}
    .back-to-map-icon:hover{cursor: pointer; color:#6e97e9;}


    .tap-icon{width:48px; height:48px; display: flex; align-items: center;justify-content: center;}

    .floating-font-icon{
        position: relative;
    }
    .floating-font-icon div{
        position: relative;
        animation: 2s float-hover ease-in-out infinite;
        z-index: 1;
    }


   

    .floating-font-icon::after{
        content: ' ';
        background: rgb(0, 0, 0,0.07);
        height: 35px;
        width: 100%;
        position: absolute;
        bottom: -28px;
        left: 0;
        filter: blur(7px);
        z-index: 0;
        border-radius: 50%;
        animation: 2s float-hover-shadow ease-in-out infinite;
    }



    .onboarding-icon{
        width:96px; height:64px; margin:45px auto 45px
    }
    .onboarding-icon svg{
        height: 64px;
    }

    /*================================================
    // EMPTY SCREEN
    /================================================*/

    .no-items h2,
    .no-items h3,
    .no-items p{color: #999;}
    .no-items-icon{ margin:0 auto 16px;color: #999;}
    .no-items-icon .fa{font-size: 64px;}

    .no-items .app-content{max-width: 420px; margin: 0 auto;}


    
    /*================================================
    // ICON BANNERS
    /================================================*/
    
    .asset-banner{position: relative; background: url('images/svg/banner-background-dark.svg') center center no-repeat; background-size: 100%; max-width: 380px; margin:0 auto 15px;}
    .asset-banner.white{ background: url('images/svg/banner-background-light.svg') center center no-repeat; background-size: 100%;}

    
    

    .asset-banner svg{width: 100%; height: auto;}

    .asset-banner.white svg{width:110%; margin-left:-5%}


    .asset-banner svg .bg-fill{fill:#6e97e9}
    .asset-banner.secondary svg .bg-fill{fill:#6e97e9}
    .asset-banner.accent svg .bg-fill{fill:#6e97e9}


    .onboarding-banner svg{animation: 2s float-hover ease-in-out infinite}

    @keyframes float-hover{
        0%{
            transform:translate3d(0,5%,0)
        }
        50%{
            transform:translate3d(0,-5%,0)
        }
        100%{
            transform:translate3d(0,5%,0)
        }
    }

    /*================================================
    // TOOLBARS
    /================================================*/

    .toolbar-logo{background-size:90%; height: 48px; width: 48px; position: absolute; top: 0; left: 50%; transform:translateX(-50%)}
    .toolbar-center-icon{ height: 40px; width: 40px; position: absolute; top: 0; left: 50%; transform:translateX(-50%)}

    .close-activity .fa-angle-left{font-size: 20px!important;}

    .toolbar-tools{
        position: absolute; 
        top: 0; 
        right: 7.5px; 
        z-index: 2;
    }
	.toolbar-tools li{width: 38px; height: 48px; display:flex;float: left;cursor: pointer; position: relative; align-items: center;}
    .toolbar-tools li i{ font-size: 20px; position: absolute!important; left: 50%; top:50%; transform: translate(-50%,-50%);}	
    
    .bubble{ background: #6e97e9; }
    .toolbar-tools .bubble{right: 3px; top: 3px; background: #6e97e9; z-index: 1; line-height: 12px}

    .ellipsis{white-space: nowrap;overflow: hidden;text-overflow: ellipsis; display:inline-block; padding:0; width:100%}

    .toolbar-center .ellipsis{margin:3px 0 -3px; line-height: 1em;}

    .toolbar-text{padding:16px 5px;  margin:0 10px;cursor:pointer;display:block; line-height:100%; text-transform:uppercase;font-size: 13px;font-family: 'Roboto-Bold',sans-serif;}

    .fragment-toolbar,
    .panel-toolbars{font-size: 13px;}

    .reposition-onscroll{margin-top: 18px}

    .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);}
    .button-shadow{box-shadow: 0 -2.5px 7.5px rgba(0,0,0,0.1);}

	.bg-white-onscroll.visible .toolbar-search{margin:6px 10px 0 0;}
    .bg-white-onscroll.visible .reposition-onscroll{margin:0px;}
    
    .bg-white-onscroll{background:none; box-shadow:none;transition-property:transform,background; transition-property:transform,background;}
	.bg-white-onscroll.visible{background:#fff; box-shadow: 0 0 5px rgba(0,0,0,0.1); }
	.bg-white-onscroll .toolbar-center{transform:scale(0);transform:scale(0); opacity:0!important;
		transition:none;
	}
	.bg-white-onscroll.visible .toolbar-center{-webkit-transform:scale(1);transform:scale(1); opacity:1!important;}
	
	.bg-white-onscroll .toolbar-center{ color:#000}


    .onscroll-toolbar .toolbar-center{
        transform:scale(0); 
        opacity:0!important;
        transition:none;
    }
    .onscroll-toolbar.visible .toolbar-center{transform:scale(1); opacity:1!important;}

    .onscroll-toolbar.visible i,.bg-white-onscroll.visible i{color: #000!important}
    .onscroll-toolbar.visible .toolbar-right .toolbar-text,
    .bg-white-onscroll.visible .toolbar-right .toolbar-text{color: #000!important}

    
    


    /*======================================================
    // PATHWAY SWITCHER
    /=======================================================*/

    #pathway-manager-open-btn .counter {
        display: flex;
        align-items: center;
        justify-content: center;
        right: 5px;
        top: 5px;
        left: auto;
    }

    #switch-pathway-overlay{
        position: fixed;
        top:0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: -1;
        opacity: 0;
    }


    #switch-pathway-overlay.show{
        z-index: 11;
        opacity: 1;
    }


    #pathway-enroll-icon{
        transition: 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        transition-property: transform, opacity;
    }

    #pathway-next-icon,
    #pathway-current-icon{
        transition: 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        transition-property: transform, opacity;
        width: 96px;
        height: 96px;
        aspect-ratio: 1/1;
        border-radius: 20%;
        overflow: auto;
    }

    #pathway-next-icon{
        transform: translate3d(-50%,150%,0);
        opacity: 0;
    }

    #pathway-next-icon.present{
        transform: translate3d(-50%,-50%,0);
        opacity: 1;
    }

    #pathway-enroll-icon,
    #pathway-current-icon{
        transform: translate3d(-50%,-50%,0);
    }

    #pathway-enroll-icon.dismiss,
    #pathway-current-icon.dismiss{
        transform: translate3d(-50%,-200%,0);
        opacity: 0;
    }

    
    /*================================================
    // PAGE TABS
    /================================================*/

    .white-page-nav .tab-navigation{background: #fff; box-shadow:var(--elevation-medium); position: relative; z-index: 2;transform:translate3d(0,0,0)}
    .tab-navigation li:after{background: #6e97e9; height: 3px; }
    

    .tab-navigation li a{ text-transform: uppercase;}



    .md-content{border-radius: 10px; padding: 15px 0 30px}

    /*================================================
    // BUTTONS
    /===============================================*/ 

    .button {
        margin: 0 auto 16px;
    }

    .button i{display: inline-block; margin-right: 7.5px; font-size: 15px}

    .button.with-icon{
        display: inline-flex;
        align-items: center;
        line-height: 1em;
        gap: 4px;
        justify-items: center;
        justify-content: center;

    }

    .button.with-icon i{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }

    .button-white{border-color: #fff; background: none; color: #fff}

    .button-no-background,
    .button-background-none{background: none; color: #6e97e9;}


    .button.transparent{background: rgba(255, 255, 255, 0.7); border:none; padding:16px 12px}
    .button.transparent-border{border-color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7)}


    .button.float-left{min-width: 120px; margin-right: 15px}

    .button.small{font-size: 90%; padding: 9px 12px; max-width: 120px; margin:30px auto 0; font-family: 'Roboto-Light'; border-radius: 5px}

    .footer-button{color: #fff; background: #6e97e9; text-align: center; font-family: 'Roboto-Light'; text-transform: uppercase}

    
    .morph-button{transition: 0.3s  cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-property:  opacity; position: relative;}
    
    .morph-button .loader{display:none; }

    .morph-button .finish{transform: translate3d(-50%,-40%,0);transition: 0.3s  cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-property: transform, opacity; opacity: 0;}

    .morph-button .finish .fa{font-size: 40px!important; margin: 0!important}

    .morph-button.connect{ opacity: 0}

    .morph-button.connecting{opacity: 1; border-color: transparent!important; background: transparent!important}
    .morph-button.connecting .loader{display:block}
    .morph-button.connecting span{opacity: 0;}

    .morph-button.complete .loader{display:none}
    .morph-button.complete .finish{transform: translate3d(-50%,-50%,0); opacity: 1;}

    
    @media(hover: hover) and (pointer: fine) {
        .button-tiny:hover{
            box-shadow: 0 0 16px rgb(0 0 0 / 10%);
        }

        .content-banner .floating-action-btn:hover,
        .feature-item .button:hover{
            box-shadow: 0 0 30px rgb(0 0 0 / 10%);
        }
    }


    /*================================================
    // FORMS
    /================================================*/   

    .dialing-code-item{cursor: pointer;}
    .dialing-code-item td{background:rgba(0, 0, 0,.01)}



    .form-input{padding:5px 0; margin-bottom: 15px}

    .label-icon .fa{}
    fieldset{background: none;}
    

    .no-lr-padding{padding-left:0; padding-right:0}

    .wrong{background:none!important; border-bottom: 1px solid #cf4c5e;}

    .wrong input::placeholder{color: #cf4c5e;}

    .wrong .field-icon{color: #cf4c5e;}
    .wrong .placeholder-label{color: #cf4c5e!important;}

    .form-input{margin: 30px 0 15px}

    

    .placeholder-label{
        width: auto;
        position: absolute;
        top: 11px;
        left: 5px;
        color: #999;
        cursor: text;
        transition: all .15s ease-in-out 0s;
        transition-property: top, left;

    }

    .inputs:focus ~ .placeholder-label,
    .inputs:valid ~ .placeholder-label{
        top: -11px;
        left: 0;
        font-size: 14px; color: #000!important; line-height: 1em;
    }


    .inputs:focus ~ .placeholder-label .hint,
    .inputs:valid ~ .placeholder-label .hint{display:none}
    
    .tiny-label{font-size: 14px; color: #000!important; line-height: 1em;}
    

    .placeholder-label.to-center{
        left: 50%;
        transform: translate3d(-50%,0,0);
        text-align: center
    }

    .inputs:focus ~ .to-center,
    .inputs:valid ~ .to-center{
        top: -11px;
        left: 50%;
    }


    .focus-highlight{
        height: 1px; 
        background: #6e97e9; 
        position: absolute; 
        bottom: -1px; 
        left: 50%; 
        transform: translate3d(-50%,0,0); 
        width: 0%;
        transition: width .15s ease-in-out 0s;
        box-shadow: 0px 0px 1px #6e97e9
    }
    .inputs:focus ~ .focus-highlight{width: 100%;}

    @media(hover: hover) and (pointer: fine) {

        .discussion-item:hover{cursor: pointer;}
        .discussion-item:hover strong,
        .discussion-item:hover i{
            color: var(--primary-color);
        }
        .stats-list li:hover .stats-list-details,
        .fieldset-group fieldset:hover *,
        .list-button:hover span{
            cursor: pointer;
            color: var(--primary-color);
        }

    }

    /*================================================
    // PASSWORD FORM
    /================================================*/  

    .password-meter{position:relative; text-align: center}

	.password-meter span{display: inline-block; height:5px; border-radius: 5px; width: 21%; margin: 1%; background:rgba(0,0,0,0.1)}

    .field-loader,
    .field-validator,
	#password-check-indicator,
	#password-confirm-indicator{ display: none!important;}

    .field-loader.show,
    .field-validator.show,
	#password-check-indicator.show,
	#password-confirm-indicator.show{display: block!important;}

	.password-meter.score-1 span:nth-of-type(1){
		background:#E74C3C;
	}

	.password-meter p{color:#E74C3C;}

	.password-meter.score-2 span:nth-of-type(1),
	.password-meter.score-2 span:nth-of-type(2){
		background:#E67E22;
	}

	.password-meter.score-2 p{color:#E67E22;}

	.password-meter.score-3 span:nth-of-type(1),
	.password-meter.score-3 span:nth-of-type(2),
	.password-meter.score-3 span:nth-of-type(3){
		background:#F1C40F;
	}

	.password-meter.score-3 p{color:#F1C40F;}

	.password-meter.score-4 span{
		background:#1ABC9C;
	}

    .password-meter.score-4 p{color:#1ABC9C;}
    

    .field-loader{position: absolute; right:0; top:7px; width:28px; height: 28px; border-top-color: #888}
    .field-icon{position: absolute!important; right:0; top:12px; font-size:19px!important; color:#888;}

    /*=========================================================
	// GOOGLE CITY SEARCH
    /=========================================================*/
    
    #google-map:after,
    #google-map:before{
        content: ' ';
        position: absolute;
        background: #6e97e9;
        transform: translate3d(-50%,-50%,0);
        left: 50%; top: 50%;
        z-index: 1;
    }

    #google-map:after{width:100%; height: 1px;}
    #google-map:before{height:100%; width: 1px}
  

	.pac-container{box-shadow:none!important; border-top:none!important; border-bottom:1px solid rgba(0,0,0,.1);  margin:8px 0 0!important;  z-index:10004;}
	.pac-container:after{display:none!important;}
    .pac-icon{background:none!important; background-size:21px!important; width:21px!important; height:21px!important}
    .pac-icon:before{font-family: 'FontAwesome Light'; content: "\f3c5"; font-size: 21px}
	.pac-item{padding:7.5px 15px!important; font-family:'Roboto-Light', sans-serif!important}


    /*================================================
    // CONTENT
    /================================================*/    

    .activity-viewer .app-content h2{
        margin: 16px 0;
        line-height: 1.1em;
    }

    .data-table td{padding: 10px; background: none;}
    .cell-padding-large td{padding: 15px 10px}

    .bg-white.data-table td{background: #fff;}

    tr.ui-sortable-helper td{border-top: 1px solid rgba(0, 0, 0,.1);}
    tr.ui-sortable-helper td:last-of-type{border-right: 1px solid rgba(0, 0, 0,.1);}


    td .bubble{right:auto; top: 11px; left: 5px}
    .arrow-forward{padding-right: 0; text-align: center; width: 20px}
    .arrow-forward i{font-size: 30px; color: #666}


    .round-stat{width:25vw; height:25vw; margin:0 15px; position:relative; display: inline-block;}
    .round-stat-number{position:absolute; top:50%; left:50%; transform:translate3d(-50%,-50%,0); font-size: 32px; width: auto; text-align: center; height: 32px; line-height: 32px; color: #6e97e9}

    .chart{height: 25vh;}
    

    .border-bottom{border-bottom: 1px solid rgba(0,0,0,0.1);}


    
 
    .large-padding{padding:10vw
    
    }
    

    .timeline-point-date,
    .small-text{color: #666; font-size: 13px; text-transform: uppercase}


    .iphone-x .statusbar-is-overlay #bottom-top-toolbar.top .toolbar-center{padding-top: 76px!important}



    .white-text .font-icon{border-color: #fff!important;}
    .white-text *{color: #fff;}
    .white-text i{color: #fff!important}
  

   
    

    /*================================================
    // APP CONTENT
    /================================================*/   

    .font-icon{width: 64px; height: 64px; border: 2px solid var(--primary-color); margin:15px auto 0; border-radius: 50%; position: relative}
    .font-icon i{color: var(--primary-color); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 30px}

    .font-icon.solid{width: 42px; height: 42px; border: none; margin:0; }
    .font-icon.solid i{color:#fff!important;font-size: 18px;position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

    .font-icon.small{width: 42px; height: 42px; margin:0; border-width: 1px;}
    .font-icon.small i{font-size: 18px;position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

    .font-icon.tiny{width: 34px; height: 34px;}
    .font-icon.tiny i{font-size: 15px;position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
   

    .font-icon.large{
        width:90px;
        height: 90px;
    }

    .font-icon.large i{
        font-size: 42px;
    }
    
    .icon-trophy{width: 42px; height: 42px; border-radius: 50%;}
    .icon-trophy:after{position: absolute; left: 50%; top:50%; border: 1px solid #fff; border-radius: 50%; transform: translate(-50%,-50%); width: 30px; height:30px}
    .icon-trophy i{color: #fff; position: absolute!important; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 21px}

    .bg-gold{background:#f6e58d}
    .bg-silver{background:#95afc0}
    .bg-bronze{background:#ffbe76}

    .asset-banner.gold svg .bg-fill{fill:#f6e58d}
    .asset-banner.silver svg .bg-fill{fill:#95afc0}
    .asset-banner.bronze svg .bg-fill{fill:#ffbe76}


    .app-tile{background:#fff;  box-shadow: var(--elevation); border-radius: 10px; margin: 5vw 2.5vw 0vw; padding: 7.5vw; position: relative}
    .app-tile.floater:hover{transform: translate3d(0,-2.5%,0); box-shadow: 0 2.5px 10px rgba(0,0,0,0.05); cursor: pointer;}

   

    .story-tile:hover .book-cover{transform: translate3d(0,-2.5%,0); }
    .discover-tile:hover .story-icon{transform: translate3d(0,-2.5%,0); }

    .app-tile.padding-constraint-small{padding:5vw;}

    .app-tile.media{position: relative; height: 246px; margin-bottom: 90px; padding: 0; margin-top: 0}

    .app-tile-state-placeholder{height:37px}
    .app-tile-state{position:absolute; bottom:0; left:0; right:0; padding:7.5px 5vw; border-radius:0 0 7.5px 7.5px; display:none;  font-size: 13px; }
    .app-tile-state.show{display: block}

    .app-tile-state.incomplete{
        background: #fcfcfc;
        border-top: 1px solid rgba(0,0,0,0.05);
    }

    .app-tile-state-icon{position: absolute; right:5vw; top: 50%; transform: translateY(-50%)}

    .grid-list{
        display: grid;
        grid-template-columns:1fr 1fr;
        grid-gap: 5vw;
        margin: 5vw;
    }

    .grid-list .app-tile{
        break-inside: avoid;align-self: center;
        margin: 0;
    }


    .app-tile.fade-in{opacity: 0;}
    .app-tile.fade-in.show{opacity: 1;}


    /*================================================
    // LIBRARY CATEGORY MENU
    /================================================*/ 

    .library-filter-container{
        position:sticky;
        z-index:2; 
        top:0;
        padding: 0 30px;
        line-height: 1.1em;
    }

    .elevate .tab-navigation{box-shadow: none;}
    .elevate .library-filter-container{
        background: #fff;
        box-shadow: var(--elevation-medium);
    }

    .library-category-item{
        display: grid;
        grid-template-columns:32px 1fr; 
        column-gap:8px;
        align-items: center;
        padding:8px 0;   
    }

    .library-category-item-icon{
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20%;
        width: 32px;
        height: 32px;
    }


    .library-category-item:hover{color: var(--primary-color); cursor: pointer;}
    .library-category-item:hover .library-category-item-icon {
        color: var(--primary-color);
        background: rgb(0 0 0 / 10%);
    }

    .library-category-item.active .library-category-item-icon {
        color: #fff;
        background: var(--primary-color);
    }


    /*=======================================================
	// 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: var(--padding-small) 0;
        margin: 0 var(--margin-medium);
	}

    .grid-list-item:last-of-type{
        border-bottom: none;
    }

    
    .item-card h3:hover,
    #pathway-manager .grid-list-item:hover strong{
        cursor: pointer;
        color: var(--primary-color);
    }

    /*================================================
    // AVATAR
    /================================================*/ 

    #avatar-selector{
        display: grid;
        grid-template-columns: 20% 20% 20% 20%;
        grid-gap: 6.5%
    }

    #avatar-selector .column{break-inside: avoid;align-self: center;}

    #avatar-selector .column img{width: 100%; height: auto; border-radius: 50%; transform: scale(0.9); opacity: 0.7;}


    #avatar-selector .column.selected img{ transform: scale(1); box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.1); opacity: 1}

    .account-icon img{width: 100%; height: auto; border-radius: 50%; z-index: 1; position: absolute; left: 0; top:-1px}

    .user-profile-icon{width:100%; height:auto; border-radius:50%}
    .user-profile-icon.tiny{width:24px; height:auto; border-radius:50%; transform:translate(-50%,-50%); top:50%; left:50%; position:absolute;}


    /*=================================================
    // FEATURE ITEMS
    /================================================*/

    #latest-activity .feature-item{
        width: 100%;
        margin: 0 auto;
        max-width: none!important;
    }

    .discover-featured .discover-swipe-container{
        display: flex;
        gap: 0;
    }


    /* Feature Item */
    .feature-item{
        width: 100%;
        max-width: 1088px;
        flex-shrink:0;
    }

    .feature-item-inner{
        grid-template-columns:256px 1fr; 
        gap:32px;
    }

    .feature-item h2{
        cursor: pointer;
        font-size: 200%;
        line-height: 1.2em;
    }

    .feature-item-icon {
        aspect-ratio: 1/1;
        overflow: hidden;
        border-radius: 15%;
        background: rgb(0 0 0 / 10%);
        position: relative;
        background: rgb(0 0 0 / 10%)
    }
    .feature-item-icon img{
        width:100%;
        display:block;
    }

    .feature-item-icon img.media{height: auto; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

    .feature-item-icon{
        box-shadow: 0 0 30px rgb(0 0 0 / 10%);
    }

    .feature-item-text p{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 0;
        height: 28px;
        margin-bottom:var(--margin-small);
        overflow: hidden;
    }

    .feature-item .button{
        max-width: 180px;
        padding: 8px;
    }

    @media(hover: hover) and (pointer: fine) {
        .feature-item:hover .feature-item-icon{
            transform: translate3d(0,-2.5%,0);
        }
    }

    .star-rating .fa{font-size:13px; margin:var(--margin-xsmall) 0;}

    /*=================================================
    // LIBRARY & CONTENT ITEMS
    /================================================*/

    /* === Library === */
    .discover-items,
    #library-items{
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        column-gap:32px
    }


    /* === Content Items === */
    .content-item{
        grid-template-columns:80px 1fr;
        gap:12px;
        position:relative;
        line-height: 1em;
        flex-shrink: 0;
    }

    .content-item-option{ font-family: 'FontAwesome Light'!important;}

    /* Content Item Text */
    .content-item-category{margin-top: 4px;}
    .content-item-title{
        margin-top:0;
        margin-bottom:8px;
        height: 18px;
        line-height: 1.2em;
    }

    .content-item .font-body-small{font-size:13px}

    /* Content Item Icon */
    .content-item-icon{
        aspect-ratio:1/1;
        background:rgba(0,0,0,0.1);
        z-index: 0;
        position: relative;
        overflow: hidden;
        
    }

    .content-item-icon img{
        display:block;
        width:100%;
        border-radius: 20%;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
    }

    /* Content Item State */
    .content-item-state{
        grid-template-columns:auto 1fr 60px; 
        gap:4px; 
    }


    @media(hover: hover) and (pointer: fine) {
        .content-item:hover{
            cursor: pointer;
        }
        .content-item .content-item-title:hover{
            color: var(--primary-color);
        }

        .content-item:hover .content-item-icon{
            transform: translate3d(0,-2.5%,0);
        }

    }

    @media screen and (min-width:1600px){
        #library-items{
            grid-template-columns:1fr 1fr 1fr 1fr;
        }
    }

    @media screen and (min-width:2000px){
        #library-items{
            grid-template-columns:1fr 1fr 1fr 1fr 1fr;
        }
    }

    @media screen and (max-width:1100px){
        #library-items{
            grid-template-columns:1fr 1fr;
        }
    }

   

    /*================================================
    // STORY CONTENT
    /================================================*/ 

    .feature-tiles-heading {
        margin: 0 0 3vw;
        border-bottom: 1px solid rgba(0,0,0,.1);
        padding: 20px 5vw 2vw;
        position: relative;
    }


    .app-tile.story .grid{
        display: grid;
        grid-template-columns:15vw 1fr 24px;
        grid-gap: 15px;

    }

    .app-tile.story .grid.x2{
        display: grid;
        grid-template-columns: 1fr 92px;
        grid-gap: 15px;

    }

    .grid .column{break-inside: avoid;align-self: center;}

    
    .story-icon{width:15vw; height: 15vw; border-radius: 15%; overflow: hidden; position: relative; background:rgba(0, 0, 0,.1);-webkit-backface-visibility: hidden;z-index:1 }
    .story-icon img{display:block; width: auto; height:100%; position: absolute; }
    .story-icon.large,
    .story-icon.x-large{width:25vw; height: 25vw; max-width: 80px; max-height: 80px; border-radius: 15%;box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.1)}

    .story-icon img{border-radius: 10%;}
   
    .story-icon.large img,
    .story-icon.x-large img{border-radius: 15%;}

    .story-icon.shadow{box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.1)}

    .story-icon.blank{background:rgba(0, 0, 0,.1)}
   
    

   


    
    .story-description{margin-top: 15px; min-height: 50px}

    
	.percentage-complete{min-width:10%; width:0%; background:#fff; height:8px; border-radius:8px;}


    /* STORY BUTTON */

    

    .button-tiny,
	.story-button{
        padding:5px 10px;
        text-transform:uppercase; 
        background:var(--primary-color);
        font-family: var(--body-bold-font);
        color: white;
        display:block; 
        border-radius:15px; 
        line-height:normal; 
        font-size:12px; 
        text-align:center; 
        position:relative; 
        white-space:nowrap;
        letter-spacing: 0.5px
    }
	
    .button-tiny.white{
        background: white;
        color: var(--primary-color);
    }
	
	
	.story-button.has-icon{position:relative; padding:5px 25px 5px 7.5px;}
	.story-button.has-icon .button-icon{position:absolute; top:3px; right:3px; width:18px; height:18px; font-size: 16px}
	
	.story-button.has-icon .button-icon::before{ position: absolute; top:50%; left:50%; transform:translate(-50%,-50%) ; -webkit-transform:translate(-50%,-50%) ; -moz-transform:translate(-50%,-50%) ; -ms-transform:translate(-50%,-50%) ; -o-transform:translate(-50%,-50%) ; }
	
	.button-load-progress{display:block;}


    
	/* STORY BUTTON CONNECTING */
	.story-download-button.connecting,
	.story-button.connecting{
		  padding:0!important; margin:0 auto; display:block;
		  box-sizing: border-box;
		  width: 32px;
		  height: 32px;
		  min-width:32px!important;
		  border-radius: 100%;
		  border: 2px solid rgba(255, 255, 255, 0);
		  border-color:transparent;
		  border-top-color: #555555;
		  background:transparent;
		  -webkit-animation: turn 1s infinite linear;
		  animation: turn 1s infinite linear;
		  text-indent:-9999px;
          background:none!important;
          border-left-color: transparent!important;
          border-right-color: transparent!important;
          border-bottom-color: transparent!important;
	}
	
	
	.story-button.connecting .button-label,
	.story-button.connecting .button-icon,
	.fa-cloud-download.connecting{display:none!important;}

	.story-button.connecting{width: 27px; height: 27px; min-width: 27px!important;}

	.story-download-button .connecting{display:none;}
	
	.tab-bubble{background:#555555;}

	
	/* STORY BUTTON INSTALLING */
	.story-button.installing .button-load{display:block!important;}	
	.story-button.installing{text-indent:-9999px; background:none!important; border-color:transparent!important; min-width:58px!important; padding:0}

	.story-button.installing .button-icon{display: none;}
	
	td .story-button.installing{max-width:58px!important; min-width:0;}
	
    .td-ellipsis{width:99vw; text-overflow:ellipsis; white-space:nowrap; overflow:hidden}
    

    .story-download-button{width:24px; height:24px; opacity:1;}
    .delete-button{width:24px; height:24px; opacity:0;position:absolute; right:5vw; top:5vw; display: none}
	
	.editing .story-button{opacity: 0; visibility: hidden}
    .editing .delete-button{opacity:1; display: block }
    .editing .story-download-button{display: none;}


    /*================================================
    // PODCASTS
    /================================================*/ 

    #stream-view-activity-view{
        max-width: none;
    }

    .stream-heading{
        display: grid;
        grid-template-columns: 213px 1fr;
        gap: 32px;
        text-align: left;
        max-width: none;
    }


    .stream-details{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .stream-details h1{
        font-size: 200%;
        line-height: 1.2em;
    }

    .stream-buttons{
        display: flex;
        column-gap: 16px;
        margin: 0;
        max-width: 350px;
        justify-content: flex-start;
    }

    .stream-heading .stream-thumbnail{
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .stream-container{
        margin: 0 auto;
    }
    
    
    
    
    

    .stream-thumbnail{position: relative;border-radius: 15%; box-shadow: 0 0px 30px rgba(0,0,0,0.1); background: rgba(0,0,0,0.1);aspect-ratio: 1/1;}
    .stream-thumbnail .media-transition{position: absolute; top: 0;}
    .stream-thumbnail img{display: block; border-radius: 15%; width: 100%;}

    .stream-details{
        line-height: 1em;
    }

    .stream-buttons .floating-action-btn{
        width: 60%!important;
        margin: 0!important;
    }

    .stream-poster{height: 40vh; max-height: 320px; position: absolute; left: 0; right: 0; top: 0;}

    .stream-container{position: relative; z-index: 1;}


    /*================================================
    // EPISODES
    /================================================*/ 

    .episode-list-heading{
        display: grid;
        grid-template-columns: 42px 1fr 16px 120px 100px 100px;
        padding:7.5px 15px;
        border-bottom: 1px solid rgba(0, 0, 0,.1);
        column-gap: 15px;

    }

    .episode-list-heading i{font-size:19px}

    .episode-list-item{
        display: grid;
        grid-template-columns:28px 1fr 13px 70px; 
        padding: 12px 0;
        column-gap: 8px;
        align-items:center; 
        border-bottom: 1px solid rgba(0, 0, 0,.1);
    }

    .episode-list-item.extended{
        grid-template-columns:28px 1fr 13px 70px 70px; 
    }


    .episode-item-explict img{display: block; width: 13px; border-radius:20%;}

    .episode-item-title{line-height: 1em;}

    #playlist-items .episode-item-title .ellipsis{max-width: 200px;}

    .explicit-icon{width:16px; display:block; border-radius:3px; margin:6px 0 0}

    #stream-track-list{
        padding-top: 15px;
    }


    .episode-list-item.is-playing .episode-item-title strong,
    .episode-list-item:hover .episode-item-title strong,
    .episode-list-item:hover .fa{
        color: var(--primary-color);
    }

    .episode-item-title{
        line-height: 1em;
    }

    .episode-list-item.is-playing .episode-item-title strong{
        color: var(--primary-color);
    }
    
    .is-playing .episode-play-icon .sound-bars{
        display:block;
    }

    .is-playing .episode-play-icon i{
        display:none
    }


    .sound-bars{
        height: 24px;
        position: relative;
        width: 24px;
        display: none;
        margin: 0 auto;
    }
    .sound-bar{
        background: var(--primary-color);
        bottom: 1px;
        height: 3px;
        position: absolute;
        width: 3px;      
        
    }

    #micro-player.show .sound-bars .sound-bar,
    .is-playing .episode-play-icon .sound-bars .sound-bar{
        animation: sound 0ms -800ms linear infinite alternate;
    }


    @keyframes sound {
        0% {
           opacity: .35;
            height: 3px; 
        }
        100% {
            opacity: 1;       
            height: 19px;        
        }
    }

    .sound-bar:nth-child(1)  { left: 1px; animation-duration: 474ms!important; }
    .sound-bar:nth-child(2)  { left: 5px; animation-duration: 433ms!important; }
    .sound-bar:nth-child(3)  { left: 9px; animation-duration: 407ms!important; }
    .sound-bar:nth-child(4)  { left: 13px; animation-duration: 458ms!important; }
    .sound-bar:nth-child(5)  { left: 17px; animation-duration: 400ms!important; }


    .toolbar-drag-handle{
        cursor: pointer;
        height: 6px;
        background:rgba(0,0,0,0.5);
        border-radius: 3px;
        width: 25vw;
        max-width: 200px;
    }

    /*================================================
    // ANALYTICS
    /================================================*/ 
    
    .ring-container{width:220px; height:220px; position: relative; margin:0 auto;}
    

    .ring-0{ position: absolute;top:0; bottom:0; right:0; left:0;}
    .ring-1{ position: absolute; top:24px; bottom:24px; right:24px; left:24px;}
    .ring-2{position: absolute; top:47px; bottom:47px; right:47px; left:47px;}

    .micro-rings .ring-1{
        top:5px;
        left:5px;
        right:5px;
        bottom:5px;
    }
    .micro-rings .ring-2{
        top:10px;
        left:10px;
        right:10px;
        bottom:10px;
    }

    #analytics-view-body .tabbed-list nav a{border-color: var(--primary-color); color: var(--primary-color);}
    #analytics-view-body .tabbed-list nav a.show{background: var(--primary-color); color: #fff;}

    .ring-icon svg path,
    .ring-container svg path{stroke-linecap:round;}

    .analytic-item{border-bottom: 1px solid rgba(0, 0, 0, 0.1);}

    .activity-task-list{
        text-align: left;
        grid-template-columns:1fr 1fr; 
        column-gap:16px;
        display: grid;
    }

    /*================================================
    // MEDIA PLAYER
    /================================================*/ 

    .media-recommended-start{background:rgba(0, 0, 0, 0.3); height: 5px; left: 0; border-radius: 5px 0 0 5px; width: 10%; position: absolute; z-index: 1; top: 0;}
    .media-recommended-start .playback-start{
        width:5px; height:15px; border-radius: 3px;  position: absolute; right:0; top:-5.5px
    }
   
    .media-recommended-end{background:rgba(0, 0, 0, 0.3); height: 5px; right: 0; border-radius: 0 5px 5px 0; width: 10%; position: absolute; z-index: 1; top: 0; right: 0;}
    .media-recommended-end .playback-end{
        width:5px; height:15px; border-radius: 3px;  position: absolute; left:0; top:-5.5px
    }

    /* Media Trackbar */
    .stream-player-track-container{
        padding: 20px 5vw;
        position: relative;
    }

    .stream-player-track-container input{background:none; width: 42px; border: none; position: absolute; top: 29px; font-size: 12px;}

    .stream-track-time{left: 5vw; text-align: left;}

    .stream-track-duration{right:5vw; text-align: right;}

    .stream-player-track{
        height: 5px;
        background: rgba(0,0,0,0.1);
        position: relative;
        border-radius: 5px;
    }

    .stream-player-track-position{position: absolute; top:0; left: 0; height: 5px;border-radius: 5px;}


    /* Media Assets */
    .stream-play-poster{
        width: auto;
        height: 75vw;
        margin: 0 auto;
        border-radius: 10%;
        box-shadow:0 0 25px rgba(0,0,0,.2);
        display: block;
    }

    .stream-player-title{
        margin: 28px auto 4px !important;
        line-height: 1.3em !important;
        font-size: 120%;
        max-width: 480px;
    }
    .episode-name{line-height: 1em;}

    /* Media Controls*/
    
    .video-details-overlay{
        width:100vw; 
        height:100vh; 
        background:rgba(0,0,0,0.3);
    }

    .video-details-overlay .center-self{width:80%; margin: 0 auto;}

    
    .stream-player-controls{
        padding-bottom: var(--safe-area-inset-bottom);
    }

    .stream-player-buttons.bottom{height: 58px;}

    .stream-player-buttons{
		display:grid; 
		text-align:center;
        grid-template-columns:repeat( auto-fit, minmax(20%, 1fr) );
        align-items: center;
        padding: 15px 0px;
        max-width: 400px;
        margin: 0 auto;
    }

    .stream-player-btn{
        margin: 0 auto 0px;
        width: auto;
        height: auto;
        cursor: pointer;
        position: relative;
        display: flex;
        align-self:center
    }

    .stream-player-options i,
    .stream-player-btn i{font-size: 17px; color: rgba(0,0,0,0.7);}

    .stream-player-btn.large i{font-size: 32px;}
    .stream-player-btn.x-large i{font-size: 42px;}
    .stream-player-btn.small i{font-size: 17px;}

    .stream-player-btn span{
        font-size: 9px;
        position: absolute;
        color: #fff;
        top: 6px;
        left: 10px;
    }

    .stream-player-btn:hover i{color: rgba(0,0,0,1);}

    #media-player-play-btn,
    #stream-player-play-btn{
        width: 36px;
        height: 36px;
        border-radius: 50%;
        position: relative;
        display: flex;
        align-items: center;
        vertical-align: middle;
        text-align: center;
    }

    



    .volumne-track{
        height: 5px;
        background: rgba(0,0,0,0.1);
        position: relative;
        border-radius: 5px;
    }

    .volume-level{
        height: 5px;
        position: absolute;
        border-radius: 5px;
        top: 0;
        left: 0;
    }

    .volume-knob{
        position: absolute;
        background:#fff;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        top: -6.5px;
        transform: translateX(-9.5px);
        box-shadow: 0 1.5px 3.5px rgba(0,0,0,0.15);
        border:1px solid rgba(0, 0, 0,.1)
    }


    .episode-details{
        display: grid;
        grid-template-columns: 64px 1fr;
        column-gap: 15px;
        padding: 15px;
    }

    /* Youtube */
    #media-player-video,
    #stream-player-video{position:absolute; height:calc(100vh); width:100vw; display:block}

    #media-player-youtube-frame,
    #stream-player-youtube-frame{position:absolute; height:calc(100vh); width:100vw}


    #media-player-youtube-frame iframe,
    #stream-player-youtube-frame iframe{z-index: 0;}

    /*#media-player-youtube:after,
    #stream-player-youtube:after{
        content: ' ';
        position: absolute;
        z-index: 1;
        width: 100vw;
        height: 100vh;
    }*/

    /* Full Screen Video */
    #media-player.video *,
    #stream-player.fullscreen.video *{
        color: rgba(255,255,255,0.9)
    }

    #media-player.video .fragment-toolbar,
    #stream-player.video .fragment-toolbar{background-color: black;}
    
    

    #media-player.fullscreen.video .volumne-track,
    #media-player.fullscreen.video .stream-player-track,
    #stream-player.fullscreen.video .volumne-track,
    #stream-player.fullscreen.video .stream-player-track
    {
        background: rgba(255,255,255,0.1);
    }


    #media-player.fullscreen.video .compact-grid,
    #stream-player.fullscreen.video .compact-grid{
        background:rgba(0,0,0,0.3);
        -webkit-backdrop-filter: blur(50px);
        backdrop-filter: blur(50px);
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
    }

    #micro-player{
        width:58px; 
        height:58px; 
        right:-10px; 
        top:50%;
        position:fixed;
        transform: translate3d(150%,-50%,0);
        opacity: 0;
        z-index: -1;
    }

    #micro-player.show{
        transform: translate3d(0,-50%,0);
        opacity: 1;
        z-index: 13;
    }

    #expand-player-alt-btn{
        width:58px; 
        height:58px; 
        padding-right:50px;
        border-radius:15px; 
        align-items:center; 
        justify-content:center; 
        display:flex;
        box-shadow:0 0 10px rgb(0 0 0 / 15%); 
    }

    


    
    /* Compact Mode */

    #media-player.compact .compact-grid,
    #stream-player.compact .compact-grid{
        display: grid;
        grid-template-columns: 1fr 50% 1fr;
        column-gap: 30px;
        height: 95px;
        align-items: center;
    }

    .compact #stream-buffer-indicator .icon-loading{
        margin-top: -24px
    }


    #stream-player.compact .stream-player-buttons,
    #stream-player.compact .stream-player-buttons{
        position: absolute;
        left:0;
        right:0;
        bottom:0;
        
    }

    #media-player.compact #media-player-toolbar,
    #stream-player.compact #stream-player-toolbar{display:none}

    .stream-player-options{
        padding: 0 15px;
        display: grid;
        grid-template-columns: 24px 1fr 24px 24px;
        column-gap: 15px;
        align-items: center;
    }

    #stream-player.compact{
        height: 95px;
        bottom: 0;
        top: auto;
    }

    #stream-player.compact #stream-player-activity-view{
        background:#fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        height: 95px;
        bottom: 0;
        top: auto;
    }
    
    

    #stream-player.compact .stream-player-media{display:none!important}

    #stream-player.compact .stream-player-buttons.bottom,
    #stream-player.compact .overlay{
        display:none
    }


    #stream-player.compact .compact-grid{
        height: 95px;
        z-index:2;
    }

    #stream-player.compact #stream-player-podcast{display:none}

    
    


    .player-gap-height{height: 95px;}

    .compact-grid{z-index: 2;}


    

    /*================================================
    // STREAMS DEPRECATED
    /================================================*/ 

    .stream-list{padding:0}

    .stream-list-item{
        display: grid;
        grid-template-columns: 42px 1fr 21px 21px;
        border-bottom: 1px solid rgba(0, 0, 0,.1);
        padding: 5vw;
        line-height: 1.2em;
    }

    .stream-column{break-inside: avoid;align-self: center;}

    .stream-list-item img{border-radius: 15%; width: 100%; height: auto;}

    .episode-item-thumbnail{position: relative;}
    .episode-item-thumbnail .media-transition{position: absolute; left: 0; top:0}

    .stream-list-item p{margin-bottom: 0; display: block!important; max-width: 59vw;}
    
    .audio-bars{position: relative; height: 21px}
    .audio-bars .bar{width:0px; margin:0 0.5px; height: 21px; position: absolute; top: 0}

    


    .discover-subscribed-icon{bottom: 5vw}

   


    .stream-player-author-icon img{
        width: 100%;
        height: auto;
        border-radius: 15%;
    }

    /*================================================
    // STREAM VIEWER
    /================================================*/


    #stream-details-container{height:62vh}
    .stream-details-container{padding: 2.5vw 5vw;}


    #stream-preview img.media-transition{width:40%; height:auto; display:block; left:50%; top:50%; transform: translate(-50%,-50%); position: absolute; border-radius: 15%;}

    .stream-meta{padding-top: 0;}
    .stream-meta ul{
        list-style: none;
        display: grid;
        grid-template-columns: 60px 60px 1fr;
        column-gap: 10px;
        align-items: center;
        padding: 0;
    }

    .stream-meta ul li{
        padding-bottom: 0;
    }

    .stream-meta ul li.icon-button{
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(21px,1fr));
        column-gap:7.5px;
        align-items: center;

    }

    .stream-meta ul li .fa{
        font-size: 21px;
        display: inline-block;
        text-align: right;
    }

    .stream-meta ul li strong{
        display: inline-block;
        text-align: left;
    }

    .stream-player-author{
        display: grid;
        grid-template-columns: 42px 1fr;
        line-height: 1.2em;
        column-gap: 10px;
        align-items: center;
    }



    /*================================================
    // LISTS
    /================================================*/

    /* Icon List */
    .font-icon-list{margin-top: 15px}

    .font-icon-list-item{
        display: grid;
        grid-template-columns: 40px 1fr;
        grid-column-gap: 5px;
        border-bottom: 1px solid rgba(0, 0, 0,.1);
        padding: 10px 0
        
    }

    .font-icon-list-item i{text-align: center; font-size: 23px;}
    .font-icon-list-item strong{display: block; line-height: 1em;}
    .font-icon-list-item p{margin-bottom: 0;}


    .font-icon-list-item.route{
        padding: 15px 0;
        border-bottom: none;
        position: relative;
    }
    .font-icon-list-item.route:before{
        content: ' ';
        position: absolute;
        top: 48px;
        left: 18px;
        height: calc(100% - 39px);
        width: 2px;
        background: rgba(0,0,0,0.1);
    }


    .font-icon-list .font-icon-list-item.route:last-of-type:before{
        display: none;
    }
    


    /*=========================================================
	// STORY / STORE
    /=========================================================*/

    .discover-swipe-container{
        display: grid;
        grid-template-columns: 90vw 90vw 90vw 30vw;
        column-gap: 2.5vw;
    }

    .discover-tile{
        flex-shrink: 0;
        width: 90vw;
    }
    
    .discover-tile,.discover-view-tile{
        display:grid;
        grid-template-columns:minmax(21vw,80px) 1fr;
        grid-gap: 12px;
    }

    .discover-category-heading{padding: 5vw; font-size: 120%;}


    

    

    #search-results-list .discover-tile{
        padding-top:0;
    }
    .discover-swipe-container .discover-tile{
        padding-right:0;
        padding-top: 0
    }

    .discover-tile-details{height: 28vw; max-height: 96px; border-bottom: 1px solid rgba(0, 0, 0,.1);}

    .discover-btn{bottom: 5vw}

    .content-meta{border-top:1px solid rgba(0, 0, 0,.1); border-bottom: 1px solid rgba(0, 0, 0,.1); background: rgba(0, 0, 0,.01); position: relative;}

    .content-meta ul{
        padding: 0;
        margin: 0;
        list-style: none; 
        display: grid;
        grid-gap: 15px;
        letter-spacing: 0.5px;
        grid-template-columns: 
            30% 30% 30%
    }

    .content-meta ul li{break-inside: avoid;align-self: top; position: relative; text-align: center; padding-bottom: 0}

    .content-meta ul li strong{display: block; line-height: 1em; text-align: center; text-transform: uppercase;}
    .content-meta ul li i{display: inline-block; font-size: 15px}

    .content-view-details{
        display: grid;
        grid-template-columns: 1fr 30%;
    }


    .small-rating-star{font-size:9px!important; color:#888; display:inline-block; color:#f1c40f; margin: 0!important; width: 15px!important; padding: 0!important; line-height: 1.5em!important}

    .profile-icon{width: 32px; height: 32px; border-radius: 50%; overflow: hidden;}
    .profile-icon img{width: 100%; height: auto;}

    .comment-grid{
        display: grid;
        grid-template-columns: 32px 1fr;
        grid-gap: 15px;
    }

    .comment-grid .column{break-inside: avoid;align-self: top; position: relative;}

	.rating-percent{height:3px; border-radius:3px; background:rgba(0,0,0,0.1); width:100px}
	.rating-percent-bar{background:#888; height:3px; border-radius:3px; width:50%;}

    


    .preview-grid{
        display: grid;
        grid-gap: 2%;
        grid-template-columns: 
            32% 32% 32%
    }

    .preview-grid .column{
        break-inside: avoid;align-self: top; position: relative;
        background:rgba(0, 0, 0,.1); box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.1);
        border-radius: 10px;
        overflow: hidden;
    }
    
    .preview-grid .column img{
        width: 100%;
        height: auto;
        display: block;
        
    }

    .discover-tile .column{break-inside: avoid;align-self: top; position: relative;}





    
    .heading-label{
        font-size: 11px;
        display: inline-block;
        padding: 5px;
        text-transform: uppercase;
        color: #fff;
        line-height: 11px;
        margin: 2px 7px 0;
        border-radius: 4px;
    }
	
	

	#install-complete-container,#story-progress-container,.install-story-progress{width:60%; margin:15px auto 5px; position:relative; background:rgba(0,0,0,0.1); border-radius:15px; height:7.5px}
	#install-complete,#story-progress,.icon-installing{width:0%; height:7.5px; position:absolute;background:#2d2d2d; border-radius:15px;}
	#install-log{font-size:90%;}

	#install-complete-container{width: 120px; max-width: 120px}

	.star-rating{padding:3.25px; text-align:center;}
	.star{display:inline-block!important; font-size: 24px!important; width:42px; height:24px; margin:0 0;background-size:80%;}
	
	.star-rating.tiny{padding:0; text-align:right; line-height:0;}
	.star-rating.tiny .star{display:inline-block; width:16px; height:16px; margin:0 0; background-size:90%;}
	
	.text-align-left .star-rating.tiny{text-align:left; margin:0 0 0 -2px}
	
    #rate-meaning{font-style:italic; line-height:1em}
    

    .story-review-detail{
        display: grid;
        grid-template-columns: 16.875vw 1fr;
        grid-gap: 15px
    }

    

	
    .slide-info a{color:#2d2d2d}
    


    /*======================================================
	// ORIENTATION MODES
	/=====================================================*/

	.fullscreen .story-panel.show .object-image-container,
	.fullscreen .story-panel.show .image-slideshow
	{background:#0f0f0f;width:100%!important; height:100vh!important; position:fixed; top:0; left:0; bottom:0;}
	.fullscreen .story-panel.show .object-image-container img,
	.fullscreen .story-panel.show .image-slideshow img
	{
		position:absolute; left:50%; top:50%; -webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);
		width:100%!important; margin-left:0!important;
		
	}
	
	.fullscreen .story-panel.show .object-image-container video{width:100%!important; height:auto!important;}
	.fullscreen #panel-toolbars{display:none;}
	.fullscreen .story-panel.show .object-text{display:none;}
	.fullscreen .story-panel.show,.fullscreen .panels{min-height:100vh!important;max-height:100vh!important; z-index: 4;}
	
	.fullscreen .story-panel.show .media-portrait{height:100%; width:auto;}

    /*=========================================================
	// SUBSCRIPTIONS
    /=========================================================*/

    /* Subscription Options */
    #subscription-tiles{
        display: grid;
        grid-template-columns: 
            47vw 47vw 47vw 47vw;
    }

    #subscription-tiles .app-tile{break-inside: avoid; position: relative;margin-right:0; margin-left:2.5vw; padding:30px 15px}

    #subscription-list-overflow{max-height: 50vh;}

    .price-label span{opacity: 0.7;}

    .discount-badge{position:absolute; top:0; right:15px; font-size:11px; width:24px; line-height: 11px; padding: 7.5px; border-radius: 0 0 7.5px 7.5px;box-shadow: 0 1.5px 3.5px rgba(0,0,0,0.1)}

    .subscription-tile{margin: 5vw;}

    .subscription-tile.selected .fa{animation:1s float-hover-center infinite }

    .column.account-number{
        grid-area: header-left;
    }

    .column.card-logo{
        grid-area: footer-right;
    }

    .column.account-name{
        grid-area: footer-left;
    }

    .column.exp-date{
        grid-area: middle-left;
    }

    .column.cvv-code{
        grid-area: middle-right;
    }

    .credit-card-inner{
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: auto;
        grid-template-areas:
        "header-left header-left header-left header-left"
        "middle-left . . middle-right"
        "footer-left footer-left footer-left footer-right"

    }

    .credit-card-inner .column{margin: 7.5px 0;}

    

    .credit-card-inner input{font-family: monospace; color:#fff; background: none; border: none; font-size: 16px; display: block; width: 100%; text-transform: uppercase; text-shadow:1px 1px 1px rgba(0,0,0,0.1)}

    .credit-card-inner input::placeholder{color: rgba(255,255,255,0.8)}
    .credit-card-inner label{color: rgba(255,255,255,0.5)}

    .credit-card{padding: 5vw 7.5vw}

    .credit-card.visa{background: linear-gradient(135deg, #dfe4ea 0%, #8395a7 100%)}
    .credit-card.mastercard{background: linear-gradient(135deg, #576574 0%, #222f3e 100%)}
    .credit-card.ammex{background: linear-gradient(135deg, #99d3f5 0%, #2e77bc 100%)}
    .credit-card.discover{background: linear-gradient(135deg, #96989d 0%, #585b60 100%)}


    .credit-card-logo{border-radius: 5px;  height: 28px;}
    .credit-card-logo.blank{background: rgba(0, 0, 0,.1);}
    
    .visa .credit-card-logo{background: url(images/visa.png) center center no-repeat; background-size: 100%;}
    .mastercard .credit-card-logo{background: url(images/master-card.png) center center no-repeat; background-size: 100%}
    .ammex .credit-card-logo{background: url(images/ammex.png) center center no-repeat; background-size: 100%}
    .discover .credit-card-logo{background: url(images/discover.png) center center no-repeat; background-size: 100%}


    .bg-grey-gradient{background:linear-gradient(135deg, #f9f9f9 0%, #f9f9f9 100%)}
    .payment-screen{opacity: 0;}
    .payment-screen.show{opacity: 1;}
    .animate-text-from-right{transform: translate3d(25%,0,0); transition-delay: 1s; opacity: 0; transition-property: opacity, transform}
    .show .animate-text-from-right{transform: translate3d(0%,0,0);  opacity: 1; }

    

    @keyframes float-hover-center{
        0%{
            transform:translate3d(-50%,-50%,0)
        }
        50%{
            transform:translate3d(-50%,-60%,0)
        }
        100%{
            transform:translate3d(-50%,-50%,0)
        }
    }

   /*=========================================================
	// STORY PANELS
	/=========================================================*/


	#toolbar-underlay{position: fixed; top: 0; left: 0; right: 0; height: 49px; z-index: 2}

	.map-container::before{content:' '; position: absolute; width: 1px; left: 50%; top: 0; bottom: 0; background:none; z-index: 3}
	.map-container::after{content:' '; position: absolute; height: 1px; left: 0; top: 50%; right: 0; background:none; z-index: 3}
	

	/* Hide Story UI */
	#story-bottom-navigation.hidden,
	#panel-story-toolbar.show.hidden,
	#panel-story-toolbar.hide{opacity:0!important}


	.no-overflow{overflow: hidden!important;}
	.split-pages-container{background: none!important;}
	.story-panel{position: absolute; min-height: 100%; max-height: 100%; width: 100%; overflow:hidden;-webkit-overflow-scrolling: touch;transform: translate3d(0,101%,0); z-index: 0; background: #fff; display: none;}

    
	#panel-story-body{overflow: hidden!important; background: #000; -webkit-overflow-scrolling:touch; transform:translate3d(0,0,0)}
	
    .story-panel.show{transform: translate3d(0,0,0); z-index: 1; overflow:auto;overflow-x: hidden;display: block; box-shadow: 0 0 3px rgba(0,0,0,.3); opacity: 1;}
    .story-panel.next{transform: translate3d(0,101%,0); z-index: 2; box-shadow: 0 0 3px rgba(0,0,0,.3); display: block}
	.story-panel.prev{transform: translate3d(0,0,0) scale(0); z-index: 0; display: block; opacity: 0;}
	
	.half-page.will-animate,.story-panel.will-animate{transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1);transition-property:transform, opacity}

	.will-change{ will-change:transform;}


	

	#stop-bubble{position: fixed; z-index: 4; width: 100vw; height: 50vh; border-radius: 50%;background: rgba(241,243,244,.5); bottom: -40vh; left: 0; right: 0; transform: translate3d(0,100%,0) scale(0); opacity: 0;}
	#stop-bubble.show{opacity: 1}
	#stop-bubble.expand{ transform: translate3d(0,0,0) scale(1);  transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); transition-property: opacity,transform;border-radius: 50%; }
	#stop-bubble.burst{transform: translate3d(0,0,0) scale(2); opacity: 0;}

	#stop-bubble.expand:after{content:' '; border: 10px solid rgba(241,243,244,.5); animation: 1s pulseStop infinite; position: absolute;width: 100vw; border-radius: 50%; height: 50vh; margin: 0 0 0 -10px}
	
	@keyframes pulseStop{
		0% {
		  transform: translate3d(0,0,0) scale(.5);
		  opacity:1;
		}
		100% {
		  transform: translate3d(0,0,0) scale(1.2);
		  opacity:0;
		}
	  }

	
	@keyframes fadeIn{
		0%{opacity: 0}
		100%{opacity: 1}
	}


	#panel-story-toolbar.hide-up,#panel-story-toolbar.hide-up{opacity:0; }


	.half-page{position: absolute; min-height: 100%; max-height: 100%; width: 100%; overflow:hidden;-webkit-overflow-scrolling: touch;transform: translate3d(0,100%,0); z-index: 0; background: #fff; display: none; box-shadow: 0 0 3px rgba(0,0,0,.3);}

	.half-page,.layout-position-2 .half-page-2{transform: translate3d(0,0,0); z-index: 1; overflow:auto;overflow-x: hidden;display: block; opacity: 1;}
    .half-page.next,.half-page-2{transform: translate3d(0,100%,0); z-index: 2; box-shadow: 0 0 3px rgba(0,0,0,.3); display: block}
	.half-page.prev,.layout-position-2 .half-page-1{transform: translate3d(0,-50%,0); z-index: 0; display: block; opacity: 0; overflow: hidden;}



	.story-panel{transition-property:transform;}
	.page-turn-left{transform:translate3d(-30%,0,0)!important; box-shadow:0 0 3px rgba(0,0,0,.3);}
	.page-turn-right{transform:translate3d(30%,0,0)!important;box-shadow:0 0 3px rgba(0,0,0,.3);}
	
	
	.page-background{position:absolute; top:0; right:0; bottom:0; left:0; background-position:0 0; background-size:cover; background-repeat:no-repeat}
	.page-background{transition-property:opacity, background; transition-duration:.3s; transition-timing-function:ease-in; opacity:1; z-index:0;}
	.story-panel.show .page-background{opacity:1;background-position:0 0;}

	.glint{background: white; height: 3px; width: 141.4213562373095vh; transform: translate3d(-70%,0%,0) rotate(-45deg); position: fixed; top: 50%; left: 50%; transition-duration: 3s; filter: blur(5px); z-index: 4}
    
    .glint.show{ transform:translate3d(-30%,0%,0) rotate(-45deg);}


    /*=========================================================
	// HELPER
	/=======================================================*/

	#helper-dialog{position:fixed; top:0; bottom:0; right:0; left:0; background:rgba(0,0,0,.1);  opacity:0; z-index:-1}
	.helper-dialog-container{position:absolute; bottom:0; left:0; right:0; background:#fff; padding:0 15px 64px; transform:translate3d(0,100%,0);}

    #helper-dialog .effect-pulse{display:none}


	#helper-dialog.show{opacity:1; z-index:10003}
	#helper-dialog.show .helper-bubble{ -webkit-animation:popIn 0.5s;animation:popIn 0.5s;}
    #helper-dialog.show .helper-visual{ -webkit-animation:popIn 0.6s; animation:popIn 0.6s;}
    #helper-dialog.show .effect-pulse{display: block;}
	
	#helper-dialog.show .helper-dialog-container{ transform:translate3d(0,0%,0);}

	.helper-visual{width:96px; height:96px; border-radius:50%;  overflow:hidden; margin:-48px auto 0; border:10px solid #fff; background:#fff}
	.helper-visual img{width:100%; height:100%;}
	.helper-bubble{text-align:center;}
	.helper-bubble p{color:#000; padding:0 15px; font-size:100%}

	.helper-finger{background:url(../../enterprise/css/images/svg/finger.svg) center center no-repeat; background-size:48px 48px; height:48px; width:48px; position: absolute; bottom:-48px; right:0; cursor:pointer; z-index:1}


    /*=========================================================
	// CALLBACK DIALOG
	/=======================================================*/



	#callback-dialog-overlay{background:rgba(0,0,0,0.1); position:fixed; top:0; right:0; bottom:0; left:0; z-index:0;opacity: 0; visibility:hidden}
	.callback-dialog{position:absolute;width:100%; bottom:95px; left:-50%; -webkit-transform:translate3d(50%,0%,0);transform:translate3d(50%,0%,0);}
	
	.callback-dialog-bubble{ border-radius:15px; margin:15px auto; background:#fff;padding:15px;opacity:1;-webkit-transform:translate3d(0%,20%,0);transform:translate3d(0%,20%,0); max-width:80%; box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.1);}

	.callback-dialog-visual{width:64px; height:64px; border-radius:50%;float:left; margin-right:7.5px; overflow:hidden;}	
	.callback-dialog-visual img{width:100%; height:auto;}
	.callback-dialog-message{ display:table-cell; vertical-align:middle; height:61px}
	.callback-dialog-message strong{display:block;}
	
	.center-box{left:50%; top:50%; -webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);}
	
	#callback-dialog-overlay.show{ opacity:1; z-index:10003; visibility:visible}
	
	#callback-dialog-overlay.show .callback-dialog-bubble{opacity:1;-webkit-transform:translate3d(0%,0%,0);transform:translate3d(0%,0%,0);}


    /*=========================================================
	// LEFT NAVIGATION
	/=========================================================*/
	

	.left-navigation{position:fixed; top:0; left:0; bottom:0;transform:translate3d(0,0,0);background:#fff; z-index:6; box-shadow:0 7.5px 15px rgb(0 0 0 / 10%); display:none }
	
	.left-navigation ul{list-style:none;}
	.left-navigation ul li{position:relative;}
	.left-navigation ul li a{padding:15px 15px 15px 65px; display:block; }
	
	.left-navigation .menu-icon{width:28px; height:28px; left:15px; padding:12px 0; position:absolute; font-size:24px;}
	
	.left-navigation .menu-inner{position:relative;}

	.left-navigation .menu-icon.fa{text-align: center}
	.left-navigation .menu-icon.fa::before{position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%)}
	
	#panel-four-tab-menu{position:absolute!important; bottom:0; width:100%; border-top:1px solid rgba(0,0,0,.05)}
	

	.left-navigation .menu a{color:#2d2d2d; display:block; padding:15px 15px 15px 60px;}

	.left-navigation .menu.show a{background:#6e97e9; color:#fff}
    .left-navigation .menu.show .fa{color: #fff;}
    

    /*=========================================================
	// STORY NAVIGATION
	/=========================================================*/
	
	.close-menu{width:44px; height:44px;}
	.story-navigation-header{padding:15px;}
    #story-navigation .tab-navigation-view:before{display:none!important}
	.story-navigation-header #story-menu-title{width:80%; margin-bottom:0; font-size: 120%}
	
	.story-navigation-header span{color: rgba(255,255,255,0.5)}

	#story-icon{width:64px; height:64px; margin:0 auto 8px; border-radius:20%; overflow:hidden; float: left;-webkit-backface-visibility: hidden;}
	.story-navigtation-details{float: left; padding-top: 8px; margin-left: 16px; float: left; text-align: left; width:70%; line-height: 1.2em;}
	#story-icon img{border-radius: 20%;}
	
	.menu-overlay{position:fixed; background:rgba(0,0,0,.1); top:0; left:0; right:0; bottom:0; visibility:hidden; opacity:0}
	.menu-overlay.show{ visibility:visible; opacity:1}
	
	#story-navigation{-webkit-transform:translate3d(-105%,0,0);transform:translate3d(-105%,0,0);display:block!important; width:100%; }
	
	#story-navigation.show{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
	
    
    #story-bottom-navigation{
        position:fixed; bottom:0; left:0; right:0; height:48px; z-index:2; transform: translate3d(0,0%,0);box-shadow:0 0 5px rgba(0,0,0,0.3); 
        background: rgba(255,255,255,0.7)!important;
        -webkit-backdrop-filter: blur(100px);
        backdrop-filter: blur(100px);
        padding-bottom: var(--safe-area-inset-bottom);
    }

    .story-navigator{position:fixed; bottom:3px; margin-bottom: var(--safe-area-inset-bottom); width:41px; height:41px; font-size:28px;  text-align:center; padding:1px;  background-size:75%; z-index: 2; cursor: pointer}
	.story-navigator.next{right:5px;}
	.story-navigator.prev{left:5px;}

	.story-navigator i{font-size: 26px; width: 26px; height: 26px; transform: translate(-50%,-50%); top: 50%; left: 50%; color: #fff; position: absolute}

    #story-bottom-navigation.disabled,
	.story-navigator.disabled{display:none!important}

	.story-navigator.next:hover{transform: translate3d(5%,0,0);}
	.story-navigator.prev:hover{transform: translate3d(-5%,0,0);}
	
	@media screen and (max-width: 641px){

	}

	@media screen and (min-width: 641px){
		.tab-navigation li:hover:after{width:100%; transition:.1s linear}
		.tab-navigation ul{transform: none!important}
	}
	
	
	
	
	.story-menu-quit{position:absolute; bottom:0; left:0; right:0;border-top:1px solid rgba(0,0,0,.05); cursor:pointer;}

	.left-navigation .story-menu-quit a{padding: 20px;}
	
	.tab-navigation-view{bottom:63px; position:absolute; top:173px; width:100%; display:none; margin-top:var(--safe-area-inset-top); margin-bottom: var(--safe-area-inset-bottom);} 
	.tab-navigation-view.show{display:block}

	

	
	.search-result{padding:15px; border-bottom:1px solid rgba(0,0,0,0.05);} 
	
	.search-result:hover{background:rgba(0,0,0,0.01); cursor:pointer}
	.subtext{text-transform:uppercase; font-size:90%!important; display:block; margin-bottom:30px; line-height:normal;}


    .complete-activity-instruction{border: 4px solid #444; border-radius: 50%;  position: relative; width: 80px; height: 80px; margin: 0 auto 30px}
	.complete-activity-instruction:after{position: absolute; content: ' ';width: 100%; height: 100%; top: 0; left:0; border: 4px solid #444; border-radius: 50%; animation: 1s linear pulseObjective infinite; margin: -4px 0 0 -4px }


	.page-swipe-gesture .circle{border-radius:50%; animation: showPageSwipe 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite; position: absolute; height:48px; width: 48px; background: rgba(255,255,255,0.3); border: 2px solid #fff;}

	.page-swipe-gesture .fa{position: absolute; height: 29px; width: 29px; transform: translate(-50%,-50%); left: 50%; top: 50%; font-size: 29px; color: #fff}
	.page-swipe-gesture .circle:after{content: ' '; border: 2px solid #fff; width: 100%; height: 100%; position: absolute; animation: 1s pulseObjective linear infinite; border-radius: 50%; margin: -2px 0 0 -2px}

	.page-swipe-gesture{position: fixed; bottom: 0; left: 48px; top:0;  width: 48px; z-index: 15;}

	@keyframes showPageSwipe{
		0%{
			transform: translate3d(0,91vh,0)  rotate(83deg);
		}
		25%{
			transform: translate3d(0,80vh,0)  rotate(63deg)
		}
		50%{
			transform: translate3d(0,80vh,0)  rotate(63deg)
		}
		75%{
			transform: translate3d(0,91vh,0)  rotate(83deg);
		}

		100%{
			transform:translate3d(0,91vh,0)  rotate(83deg);
		}
	}



    /*=========================================================
	// ANALYTICS
	/=========================================================*/	

	.stats-list{list-style:none; padding:0!important;  }
	.stats-list li{padding:15px 0!important; border-bottom:1px solid rgba(0,0,0,0.1);display: grid; grid-template-columns: 52px 1fr;}

	.stats-list .stats-list-icon{width:42px; height:42px; position: relative;}

    .analytics-grid{margin-top:5vw}
    .analytics-grid .stats-list li:hover .stats-list-details{
        color: inherit!important;
        cursor:default!important;
    }

	.stats-list .stats-list-details{line-height:1.2em; padding-top: 4px}

	.stats-list .stats-list-subtext{font-size:13px; color: #666;}
    
    .analytics-grid .column{margin-top: 5vw; padding:5vw}


    .stats-nav{position:relative; top:0; left:50%; transform:translate(-50%,0); z-index:1; width:100%}

    .stats-heading{margin:0 0 16px; font-size: 120%;}

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

	
	/* TOP LEFT STORY MENU */
	.menu-icon{padding:13px;cursor: pointer}
	.menu-icon.active{display:block}
	
	
	.menu-icon span{display:block; background:#fff; height:2px; width:19px; margin:0 0 6px; border-radius:5px; }
	.menu-icon span:first-of-type{width:21px;}
	.menu-icon span:last-of-type{width:21px}

	

	

	/* CHAPTER MENU */
	.chapter-navigation ul{list-style:none;  padding-top:15px}
	.chapter-navigation ul li{position:relative; line-height:normal; cursor:pointer; padding:0 15px}
	.chapter-navigation ul li:hover{background:rgba(0,0,0,0.01);}
	.chapter-navigation ul li strong{display:block;}
	.chapter-navigation ul li a{display:block; padding:15px 15px; margin-left:37px}
    .chapter-navigation .fa{position: absolute; top:22.5px; left:15px; font-size: 24px}
	
    .chapter-navigation ul li.chapter:before{
        content:""; 
        width:2px; 
        background:#e6e6e6; 
        position:absolute; 
        height:calc(100% - 22px);
        left:33px;
        top:37px
    }
    	
	.chapter-navigation ul li .chapter-icon{ width:18px; height:18px; position:absolute; left:22.5px; top:15px; border:2px solid #e6e6e6; border-radius:50%}
	
	.chapter-navigation ul li.completed .chapter-icon::after{content: "\f00c"; position: absolute; top:3px; line-height:13px;left:3px; font-size: 13px; z-index: 1; font-family: 'FontAwesome Solid'; color:#fff}
	
	.menu-back-icon{width:44px; height:44px;}
	.menu-back-icon svg{width:70%; height:70%; margin:15% 0 0 0}
	
	.chapter-navigation ul li .story-help{background:url(images/svg/activity-help.svg) center center no-repeat; background-size:100%;}
	
	
	.chapter-navigation ul li .chapter-icon.in-progress{border-color:#5cc1a3;background:none!important}
	.chapter-navigation ul li .chapter-icon.in-progress:before{background-color:#5cc1a3; content:" "; width:14px; height:14px; border-radius:50%; position:absolute; top:2px; left:2px}
	.chapter-navigation ul li .chapter-icon.in-progress:after{
			content:" "; width:14px; height:14px; border-radius:50%; border:2px solid #5cc1a3; position:absolute; top:0; left:0;
			-webkit-animation:pulseObjective 1s infinite;animation:pulseObjective 1s infinite;
	}

	
	.chapter-navigation ul li.completed .chapter-icon{}
	.chapter-navigation ul li.completed .chapter-icon{border:2px solid #5cc1a3;background-color:#5cc1a3}
	.chapter-navigation ul li.completed .chapter-icon.in-progress:before{background-color:#5cc1a3}
	
	.chapter-navigation ul li.completed:before{background:#5cc1a3;}
	
	.chapter-navigation ul li.last-chapter:before{height:0;}
	
	.chapter-navigation ul li.non-chapter a{margin-left:0; padding:15px 15px 15px 52px;}

	.map-route li.done a{background:url(../../enterprise/css/images/svg/chapter-complete.svg) center center no-repeat!important; background-size:100%!important;}

	/* RESOURCE MENU */

	.resources-menu a{position: static!important;}
    .resources-menu .fa{
        position: absolute;
        display: flex;
        top: 22.5px;
        left: 15px;
        font-size: 21px;
        align-items: center;
        justify-content: center;
        width: 24px;
    }
	
	@keyframes pulseObjective{
	  0% {
		transform: translate3d(0,0,0) scale(.5);
		opacity:1;
	  }
	  100% {
		transform: translate3d(0,0,0) scale(2);
		opacity:0;
	  }
	}	


    /*======================================================
    // SPARKLES
    /=======================================================*/

    .sparkle{position: relative;}
    .sparkle:after,
	.sparkle:before{
		position: absolute;
		width: 100%;
		height: 100%;
		content: ' ';
		top: 0;
		left:0;
	}

    .sparkle:after{
		background: url('images/svg/sparkle-1.svg') center center no-repeat; background-size: 100%;
		animation: 2s fadeInOut infinite;
	}

	.sparkle:before{
		background: url('images/svg/sparkle-2.svg') center center no-repeat; background-size: 110%;
		animation: 2s fadeInOut infinite 0.666s;
		z-index: 2;
    }
    
    @keyframes fadeInOut{
		0%{
			opacity: 0;
		}
		50%{
			opacity: 1
		}
		100%{
			opacity: 0
		}
    }
    



    /*======================================================
    // PHOTOS
    /=======================================================*/

    .photo-grid {
        display: grid;
        grid-template-columns:33% 33% 33%;
        grid-gap: 5px;

	}
	.photo-tile {
        position: relative;
        break-inside: avoid;
        width : 25vw;
        height: 25vw;
        background: rgba(0,0,0,0.05);
        border-radius: 5px;
        margin-bottom: 5px;
        overflow: hidden;

    }

    .photo-tile .fa{font-size: 38px; color: #666}
    .photo-tile .progress-bar{opacity: 0;}

    .photo-tile.uploading .fa{opacity: 0;}
    .photo-tile.uploading .photo-tile-thumbnail img{filter: grayscale(1)!important; opacity: 0.5!important;}
    .photo-tile.uploading .progress-bar{opacity: 1;}

    .photo-grid.large{
        column-count: 4;
        column-gap:0;
        margin: 5px 0 5px 5px
    }

    .photo-grid.large .photo-tile {
        width : calc(25vw - 5px);
        height: calc(25vw - 5px);
        border-radius: 0;
        margin-bottom: 5px;
    }
    
    .photo-tile img{position: absolute; left:50%; top: 50%; transform: translate3d(-50%,-50%,0); display: block; width: 100%; height: auto;}

    .photo-tile img.landscape{width: auto; height: 100%;}
    .photo-tile img.portrait{width: 100%; height: auto;}

    #photo-viewer{background:#000;}
    #photo-viewer img{position: absolute; left:50%; top: 50%; transform: translate3d(-50%,-50%,0); display: block; width: 100%; height: 100%; object-fit: contain;}

    #photo-viewer img.portrait{height:100vh; width:auto;}
    #photo-viewer img.landscape{width:100vw; height: auto;}

    #photo-viewer video{background:#000;width: 100vw; height: auto; max-height: calc(100% - 96px); position: absolute; left:50%; top: 50%; transform: translate3d(-50%,-50%,0);  margin-bottom: env(safe-area-inset-top)}

    @media screen and (min-width:768px) and (orientation: portrait){

        #photo-viewer img{ border-radius:5px; box-shadow:0 2.5px 25px rgba(0,0,0,0.3); z-index:1}

        #photo-viewer img.landscape{max-width:95vw;}
        #photo-viewer img.portrait{max-height:80vh; height:100%; width: auto;}

        

    }
    
    @media screen and (min-width: 1024px) and (orientation: landscape) {


        #photo-viewer img{border-radius:5px; box-shadow:0 2.5px 25px rgba(0,0,0,0.3); z-index:1}

        #photo-viewer img{max-height:85vh; height: 100%!important; width: auto!important;}


    }

    .will-remove{opacity: 0!important;}



    .media-transition{transition:opacity 0.3s linear;}

    /*================================================
    // APP ONBOARDING
    /================================================*/

    
   
    .onboarding-btns{bottom:0; padding-bottom:var(--safe-area-inset-bottom)}


   
    .bottom-button{position: absolute; bottom: 48px; left: 0; right: 0; padding-bottom: var(--safe-area-inset-bottom)}

    
    .bottom-button.hidden{
        transform: translate3d(0,110%,0);
    }

    /*================================================
    // ARTICLE VIEWER
    /================================================*/

    .article{font-size: 17px;}

   

    /* Contents Menu */
    .article-contents{
        z-index: 0;
        top: 48px;
        left: 0;
        min-width: 160px;
        width: calc(20% - 60px);
        bottom: 0;
        position: absolute;
        transform: translate3d(-10%,0,0);
        opacity: 0;
        transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
        font-size: 13px;
        z-index: 3;
        padding: 30px;
        border-right: 1px solid rgb(0, 0, 0,0.1);

    }

    .article-contents.show{
        transform: translate3d(0%,0,0);
        opacity: 1;
    }

    .article-content *{
        overflow-wrap: break-word;
        word-break: break-word;
    }


    .article-contents strong {
        font-size: 11px;
        display: block;
        margin-bottom: 0.5em;
    }

    .article-contents li {
        list-style: none;
        margin-bottom: 0.5em;
    }


    #article-contents-mobile-list{list-style: none; margin:0; padding:0}
    #article-contents-mobile-list li{margin-bottom: 0.5em;}

    /* Feature Image */
    .article-feature-image{position: absolute; height:63%;top:0; left:0; right:0; overflow: hidden; z-index: 1; background:#000}
    .article-feature-image img{width: 100%; height: auto; display: block; position: absolute; left: 50%; top:50%; transform: translate3d(-50%,-50%,0);}

    .article-feature-image h2{color: rgba(255, 255, 255, 0.7);}
    .article-feature-image .font-icon{width:64px; height: 64px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; margin: 0 auto 15px; position: relative;}

    .article-feature-image i{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-size: 24px;
        color: rgba(255, 255, 255, 0.7);
    }

    /* Article Page */
    
    .article-page{max-width: 800px; min-height: 680px; width:60%; margin: 30vh auto 30px; box-shadow: 0 7.5px 30px -20px rgba(0, 0, 0, 0.3); background: #fff; position: relative; z-index: 2; font-size: 17px;padding:3%}
    .article-reviews{max-width: 672px; margin:30px auto}

    /* Article Heading */
    .article-heading{padding:2em 2em 1em}

    .article h1,
    .article h2,
    .article h3,
    .article h4,
    .article h5,
    .article p{
        word-wrap: break-word;
    }

    .article-page h1{font-size: 180%; margin-bottom: 0.5em; line-height: 1.2em; }
    .article-page h2{margin: 1.5em 0 0;  padding: 1em 0 0.5em; border-top: 1px solid rgba(0, 0, 0, 0.1); line-height: 1.2em; font-size:160%}
    .article-page h3{ padding: 1em 0 0.5em; font-size: 140%; line-height: 1.2em;}

    .article-page h4{ padding: 1em 0 0.5em; font-size: 100%; line-height: 1.2em;}



    

    .article-page blockquote{padding: 0 2em; margin-left:1em; border-left: 5px solid #ccc; margin:2em 0; font-style: italic;}

    .article-section img,
    .article-section video{display: block; width: 100%; height: auto; margin-bottom: 1.5em;}
    .article-section audio{ margin-bottom: 1.5em;}


    .article-section audio{
        display: block; width: 100%;
    }

    .article-resource{
        display: grid;
        grid-template-columns: 32px 1fr 60px;
        padding: 15px;
        box-shadow: 0 2.5px 7.5px rgb(0, 0, 0,0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
        margin-bottom: 1.5em;
    }


    .article-page p{
        margin-top: 0em;
        padding-bottom: 1.5em;
        line-height: 1.7em;
        font-size: clamp(16px, 1rem, 17px);
    }

    .article-page .media-figure{margin-top: 0.5em; margin-bottom:1.5em;}

    .article-page ul, .article-page ol{
        padding:0 1.5em 1em
    }

    .article-page pre{
        padding: 2em;
        background: rgba(0, 0, 0, 0.05);
        font-family: Menlo, Monaco, "Courier New", Courier, monospace;
        font-size: 16px;
        line-height: 1.5em;
        margin-bottom: 1.5em;
        border-radius: 5px;
        overflow-x: auto;
    }

    .article-page p code{
        background: rgba(0, 0, 0, 0.05);
        font-family: Menlo, Monaco, "Courier New", Courier, monospace;
        font-size: 16px;
        padding:2px 5px;
        border-radius: 2px;
    }

    .article-page li, .article-page li{
        padding-bottom: 1em;
        line-height: 1.5em;
    }


    .article-page table {
        width: 100%;
        font-size: 16px;
        line-height: 1.5em;
        border-collapse: collapse;
        border: none!important;
        margin-bottom: 1.5em;
    }

    .article-page table tr {
        border-bottom: 1px solid rgb(0, 0, 0,0.1);
    }

    .article-page table tr:first-child {
        color: rgb(0, 0, 0,0.5);
        font-family: 'Roboto Bold',sans-serif;
        border-bottom: 2px solid rgb(0, 0, 0,0.1);
    }

    .article-page table td {
        padding: 10px;
    }

    /* Article Meta */
    .article-meta{
        display: grid;
        grid-template-columns: 48px 1fr;
        column-gap: 1em;
        align-items: center;
        font-size: 15px;
        line-height: 1.5em;
    }

    .author-icon{background: rgba(0, 0, 0, 0.1); border-radius: 15%; box-shadow: 0 2.5px 7.5px rgba(0, 0, 0, 0.1); height: 48px;}
    .author-icon img{border-radius: 15%; width:100%; height:auto}


    /* Article Section */
    .article-section{padding:0 2em; position: relative;}


    /* Flatten */
    .article.flatten{background:#fff}
    .article.flatten .article-page{box-shadow: none;}

    .article.flatten .article-feature-image{opacity: 0;}

    /*======================================================
    // PATHWAYS
    /=======================================================*/

    .label-tag,
    .new-tag{
        background: var(--accent-color);
        color: white;
        font-size: 9px;
        font-family: var(--body-bold-font);
        padding: 3px 4px;
        border-radius: 3px;
        line-height: 1em;
        transform: translate(0, -1px);
        display: inline-block;
    }

    .pathway-main{
        max-width: calc(100% - 420px);
        height: calc(100vh - 96px);
    }


    .pathway-aside{
        transform: translate3d(0%,0,0);
        position: absolute;
        top: 0;
        right: 0;
        max-width: 420px;
        width: 100%;
        height: calc(100vh - 92px);
        opacity: 1;
        z-index: 0;
    }

    #pathway-container-view{
        width:auto; 
        max-width:none; 
        padding:var(--padding) var(--padding) 48px
    }

    /*.pathway-type-route .pathway-aside{
        max-width:320px;
    }

    .pathway-type-route .pathway-main{
        max-width: calc(100% - 320px);
    }*/

    .pathway-type-route #pathway-header{
        display: none;
    }

    .pathway-type-route #pathway-container-view{
        width:auto; 
        max-width:none; 
        padding:var(--padding) var(--padding-small) 0
    }

    .pathway-stats-btn{display: none;}


    .pathway-header-icon{
        width: 128px;
        height: 128px;
        overflow: hidden;
    }
    .pathway-header-icon img{
        display: block;
        width: 100%;
    }

    .pathway-snackbar{
        bottom:0;
        left:0;
        right: 421px;
        transform: translate3d(0,100%,0);
        opacity: 0;
        z-index: -1;
        position:fixed;
        margin:var(--margin-small)
    }


    .pathway-snackbar .activity-view-snackbar{
        z-index:1;
        grid-template-columns:1fr 32px; 
        column-gap:16px; 
        padding-top:12px;
        padding-bottom: 12px;
        max-width: 320px;
        margin:0 auto
    }

    .pathway-snackbar.show{
        transform: translate3d(0,0%,0);
        opacity: 1;
        z-index: 1;
    }


    .locked-cohort{
        top:0; 
        left:0; 
        right:0; 
        bottom:calc(58px + var(--safe-area-inset-bottom)); 
        z-index:1;-webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }

    

    .round-close-icon,
    .pathway-close-icon{
        background:rgb(255,255,255,0.5); 
        backdrop-filter: blur(100px);
        -webkit-backdrop-filter: blur(100px);
        width: 38px; 
        height: 38px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        border-radius: 50%; 
        margin:10px;
        transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
        transition-property: background, width, height, margin;
    }

    .round-close-icon .fa,
    .pathway-close-icon .fa{
        color:#000;
        margin-left: -1px;
    }

    .compacted .round-close-icon,
    .compacted .pathway-close-icon{
        background: none;
        width: 48px; 
        height: 48px; 
        display: block; 
        margin:0;
        backdrop-filter: none;
        -webkit-backdrop-filter:none;
    }

    .compacted .round-close-icon .fa{
        color: black;
    }
    .compacted .pathway-close-icon .fa{
        color: white!important;
    }

    /* Levels */
    .pathway-level{position: relative;}


    /* Segments */
    .pathway-segments{position: relative;}

    .hidden-segment{display:none!important}

    .pathway-segment{
        transition: 0.6s cubic-bezier(0.770, 0.000, 0.175, 1.000);
        transition-property: opacity, transform;
    }

    .pathway-segment.hidden{
        opacity: 0;
    }

    .pathway-segment.did-hide-down{
        transform: translate3d(0,10%,0);
        opacity: 0;
    }

    .pathway-segment.did-hide-up{
        transform: translate3d(0,-10%,0);
        opacity: 0;
    }

    .pathway-segment.hidden *{
        
        visibility: hidden!important;
        box-shadow: none!important;
        display: none!important;
        transition: none!important;
        animation: none!important
    }

    .pathway-activity-container .activity-title-mobile{
        white-space: normal;
        text-overflow: unset;
        line-height: 1.2em;
        word-wrap: break-word;
        display: block;
        overflow: overlay;
        display: flex;
        justify-content: center;
        margin: 2.5px auto 5px;
        max-width: 300px;

    }


    /* Paths */
    .activities-link-path{ position: relative;}
    .activities-link-path svg{display: block; width: 100%; height: auto;}

    .path-link-svg{transition: 1s ease-in;}

    .path-link-svg.center{
        stroke-dasharray: 84px;
        stroke-dashoffset: 84px;
        transition-property: stroke-dashoffset
    }

    .path-link-svg.fromRight,
    .path-link-svg.fromLeft{
        stroke-dasharray: 364px;
        stroke-dashoffset: 364px;
        
        transition-property: stroke-dashoffset
    }

    
    

    .path-link-svg.center.fill{
        stroke-dashoffset: 0;
    }

    .segment-complete .path-link-svg.center.fill{
        stroke-dashoffset: 0;

    }

    .path-link-svg.no-animation{
        stroke-dashoffset: 0;
        animation: none!important;
    }

    .path-link-svg.fromLeft.fill,
    .path-link-svg.fromRight.fill{
        stroke-dashoffset: 0
    }


    .pathway-activity-row{
        grid-template-columns:64px 1fr 29px; 
        gap:16px; 
        align-items:flex-start
    }


    .pathway-activity-row:hover{
        cursor: pointer;
    }

    .pathway-activity-row p{
        margin: 0;
        padding: 0;
    }

    .activity-progress{
        background: #fff;;
        position: relative; 
        width: 84px; 
        height: 84px; 
        margin: 0 auto 15px;
        box-shadow: 0 2.5px 7.5px rgba(0, 0, 0,.1);
        border-radius: 50%;
    }
    

    .activity-progress svg path{stroke-linecap:round; }

    .award-icon,
    .activity-icon{
        width: 64px; height: 64px;
        border-radius: 50%;
        background: #444;
        position: absolute;
        margin: 0 auto;
        top: 10px;
        left: 10px;
        overflow: hidden;
    }

    


    .activity-icon .fa{
        position: absolute!important;
    }


    .pathway-activity.greyscale .activity-icon{
        background:#bbb!important
    }


    .activity-progress.small{
        width: 64px;
        height: 64px;
        margin-bottom: 0;
    }

    

    .activity-progress.small .activity-icon{
        width: 48px;
        height: 48px;
        top: 8px;
        left: 8px;
    }

    .activity-progress.small .activity-icon .fa{
        font-size: 21px;
    }

    #pathway-stats-mobile .activity-view{
        background: var(--color-off-white);
    }


    /*=== Pathway Screen Adaptations ===*/

    @media screen and (max-width:1279px) {
        .pathway-main{
            max-width: calc(100% - 360px);
        }
    
    
        .pathway-aside{
            max-width: 360px;
        }

        .pathway-snackbar{
            right: 361px;
        }
    }
    

    @media screen and (max-width:1024px) {
        
        .pathway-main{
            max-width: 100%;
            height: auto;
        }

        .pathway-aside{
            display: none;
        }

        .pathway-stats-btn{display: block;}

        .pathway-snackbar{
            right: 0;
            bottom: 0;
        }

    }

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

        .pathway-snackbar{
            right: 0;
            bottom: calc(58px + var(--safe-area-inset-bottom));
        }

        .pathway-header-icon{
            width: 23vw;
            height: 23vw;
            max-width: 102.4px;
            max-height: 102.4px;
        }

        #pathway-playlist-name{font-size: 160%;}

        .pathway-activity-row{
            grid-template-columns:58px 1fr 29px; 
            gap:8px; 
        }

        
        .pathway-activity-row .pathway-activity-snippit{
            font-size: 13px;
        }

        .activity-progress.small{
            width: 58px;
            height: 58px;
            margin-bottom: 0;
        }
    
        
    
        .activity-progress.small .activity-icon{
            width: 42px;
            height: 42px;
            top: 8px;
            left: 8px;
        }
    
        .activity-progress.small .activity-icon .fa{
            font-size: 18px;
        }

    }


   


    /* Activities */
    .pathway-activities{
        display: grid;
        grid-template-columns:repeat( auto-fit, minmax(calc(33% - 12px), 1fr) );
        column-gap: 12px;
    }

    .pathway-activity{
        cursor: pointer;
        padding:  0;
        text-align: center;
    }

    .pathway-activity-hidden{
        display: none!important;
    }

    .activity-title{margin-bottom:-8px; display:block}
    .activity-description{
        font-size: 13px;
        line-height: 1.5em;
    }

    @media(hover: hover) and (pointer: fine) {
        .pathway-activity:hover{
            transform: translate3d(0,-5px,0);
        }
        .pathway-activity:hover .app-tile{
            box-shadow: 0 7.5px 21px rgba(0, 0, 0,.1);
           
        }
    }
    

    

    .pathway-activity.greyscale p,
    .activities-link-path .fa-lock-alt,
    .pathway-activity.greyscale .activity-description{color: #888!important;} 

    .award-tile{text-align: center;}

    .award-tile .award-details {
        line-height: 1.5em;
        font-size: 13px;
        margin: 5px 0 0;
    }

    .award-list{
        column-count: 3;
        grid-auto-rows: 1fr;
        grid-column-gap: 0;
        grid-row-gap: 30px;
        grid-template-columns: repeat(3, 1fr);
        display: grid;
        margin: 30px 0 60px;
    }
    


    .award-icon{position: relative; top: 0; left: 0;}
    .award-icon.small{box-shadow: 0 2.5px 7.5px rgba(0, 0, 0,.1); position: relative; top: auto; left: auto;width: 42px; height: 42px; margin:0; border: 4px solid rgba(255,255,255,0.1);}

    .award-icon.small i{
        position: absolute;
    }

    .award-icon.large{
        width: 74px;
        height: 74px;
        border: 8px solid rgba(255,255,255,0.1);
        box-shadow: var(--elevation-medium);
    }

    .award-icon.gained:before,
    .award-icon.gained:after{
        position: absolute;
        width: 200%;
        height: 5px;
        content: ' ';
        top: 0px;
        right:-40px;
        background: rgba(255,255,255,.1);
        border-radius: 15px;

        transform: rotate(-45deg)
    }


    .award-icon.large{
        font-size: 36px;
    }

    


    .award-icon.gained.small:before,
    .award-icon.gained.small:after{
        position: absolute;
        width: 200%;
        height: 3px;
        content: ' ';
        top: 0px;
        right:-30px;
        background: rgba(255,255,255,.1);
        border-radius: 15px;

        transform: rotate(-45deg)
    }

    .award-icon.gained:after{
        right: -46px;
        top: 10px;
        height: 15px;
    }

    .award-icon.gained.small:after{
        right: -33px;
        top: 10px;
        height: 7.5px;
    }

    .award-icon.large:before{
        top:11px;
        right: -42px;
    }
    .award-icon.large:after{
        top: 24px;
        right:-52px;
    }

    .award-icon.badge-view{
        background: none;
        width: 196px;
        height: 196px;
        border: 10px solid rgba(255,255,255,0.3);
        
    }
    .award-icon.badge-view .fa{
        font-size: 90px;
        position: absolute!important;
    }

    .award-icon.badge-view::before{
        right: -207px;
        height: 15px;
        top: 0;
        width: 253%;
    }

    .award-icon.badge-view::after{
        right: -270px;
        height: 36px;
        top: 0;
        width: 253%;
    }

    .award-icon i,
    .activity-icon i{color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 30px}
    
    .award-icon.small i{font-size: 21px;}


    .activity-stats{padding:7.5px; border-radius:0 0 10px 10px; opacity: 0;}
    .activity-stats .grid{display:grid; grid-template-columns:70px 1fr; align-content: center; justify-content: center; font-size: 13px;}
    .activity-stats i{font-size: 15px; display: inline;}

    .completed .activity-stats{opacity: 1;}

    .activity-stats div{text-align: left; padding:0 7.5px}


    .activity-state{margin-top: 15px;}

    .activity-state-icon {
        width: 21px;
        height: 21px;
        border-radius: 50%;
        background: #444;
        position: absolute;
        bottom: 0;
        right: 0;
        opacity: 1;
        border: 3px solid #f9f9f9;
    }

    .activity-state-icon i {
        color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-size: 12px;
    }


    /* Activity Placeholder */
    .activity-placeholder{
        position: relative; 
        width: 78px; 
        height: 78px; 
        margin: 0 auto 15px;
        border-radius: 50%;
        border: 3px dashed rgba(0, 0, 0,.05);
    }

    .activity-placeholder-icon{
        width: 64px; height: 64px;
        border-radius: 50%;
        background: rgba(0, 0, 0,.05);
        position: absolute;
        margin: 0 auto;
        top: 7px;
        left: 7px;
        overflow: hidden;
    }

    .activity-placeholder-icon i{color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 30px}



    .upload-progress-container{height:4px; background:rgba(0,0,0,0.1); position: absolute; left:0; right: 0; top:-4px; opacity: 0;}
    .upload-progress-bar{height:4px; left:0; top:0; right:0; width: 0%;}


    .activity-header{height: 100%;}


    .activity-header .activity-progress{
        margin: 15px auto;
        width: 104px;
        height: 104px;
        box-shadow: 0 7px 30px rgba(0, 0, 0,.1);
    }

    .activity-header .font-icon.solid{
        background:#fff!important;
    }


    


    /*================================================
    // AWARDS
    /================================================*/

    .award-tag{
        background: var(--accent-color);
        color: white;
        font-size: 9px;
        font-family: var(--body-bold-font);
        padding: 3px 4px;
        border-radius: 3px;
        line-height: 1em;
        transform: translate(0, -1px);
        display: inline-block;
        text-transform: uppercase;
    }

    .award-section-items{
        display: grid;
        grid-template-columns: repeat(auto-fit,30%);
        gap: 16px;
    }

    .award-section-items li{
        display: grid;
        grid-template-columns: 60px 1fr 21px;
        align-items: center;
    }


    #award-image .panel-padding-top{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: calc(100vh - 82px);
    }
    
    #award-image-content{background:#444}

    #award-image .media-transition{position: absolute; top: 0;}

    
    #award-image-content{
        width:auto;
        height: auto;
        position: relative;
        margin: 0 auto;
        max-width: 90%;
        box-shadow: 0 0  35px rgb(0 0 0 / 17%)
    }
    
    #award-image-content img{
        width: auto;
        height: 100%;
        border-radius: 5px;
    }

    #award-image-content #placeholder-certificate{
        width: 90vw;
        display: block;
        height: auto;
        max-width: 420px;
    }
    

    @media screen and (min-width:768px) and (orientation: portrait) {
        #award-image-content #placeholder-certificate{
            width:60vw;
            max-width: 1399px;
        }
    }

    @media screen and (min-width: 768px) and (orientation: landscape){
        #award-image-content #placeholder-certificate{
            width: 440px;
            max-width: 1399px;
            height: auto;
        }
    }

    /*================================================
    // VOUCHER
    /================================================*/

    .voucher-header{
        padding:15px 15px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }


    .voucher-banner{
        background: rgb(0, 0, 0,.1);
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .voucher-details{
        padding:30px 15px 15px
    }

    .voucher-details span{text-transform: uppercase; display: block; font-size:13px}
    .voucher-details strong{font-size: 14px;}

    .voucher-details{display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 7.5px;}

    .voucher-qrcode{padding:30px 0 30px}

    #voucher-qrcode-container{width:50%; margin:0 auto; position: relative;}
    #voucher-qrcode-container .media-transition{position: absolute; top: 0;}
    .voucher-qrcode img{width:100%; display: block; border-radius: 5px;}
    .voucher-qrcode span{text-transform: uppercase; display: block; font-size:13px; margin-top:5px}

    /* Voucher View */
    

    #voucher-view-activity-view .panel-padding-top{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: calc(100vh - 82px);
    }
    #voucher-view-activity-view .card-container{
        padding: 0;
        max-width: 420px;
        margin-top: 30px;
        margin: -41px auto 0;
        max-height: 480px;
        width: 90%;
    }


    

    .card-container{perspective: 900px; margin:2.5vw}
    .card-face{position: absolute; width:100%; height:100%; top:0; left:0; -webkit-backface-visibility: hidden;}

    .card-front{transform: rotateY(180deg); border-radius: 7.5px; -webkit-backface-visibility: hidden;}
    .card-back{transform: rotateY(0deg); border-radius: 7.5px;}

    .card-flip{
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        height: 100%;
        transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) transform;
        box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.1);
        border-radius: 7.5px;
        will-change: transform;
    }

    .badge-container.flipped .card-flip,
    .card-container.flipped .card-flip{transform:rotateY(0deg)}

    .badge-container{
        width: 220px;
        height: 220px;
        perspective: 900px;
        margin: 0 auto 16px;
        cursor: pointer;
    }

    .badge-container .card-flip,
    .badge-container .card-face{
        border-radius: 50%;
    }

    /*================================================
    // MEDIA PLAYER
    /================================================*/

    .media-player-controls{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        padding-top: 7.5px;
    }

    .media-player-buttons{
        display:grid; 
        text-align:center;
        grid-template-columns:repeat( auto-fit, minmax(20%, 1fr) );
        align-items: center;
        padding: 0 85px 7.5px;
        max-width: 400px;
        margin: 0 auto;
    }


    .media-player-btn{
        margin: 0 auto 0px;
        width: auto;
        height: auto;
        cursor: pointer;
        position: relative;
        display: flex;
        align-self:center
    }

    .media-player-play-btn{
        width: 32px;
        height: 32px;
        border: 1px solid rgba(0,0,0,0.7);
        border-radius: 50%;
        position: relative;
        display: flex;
        align-items: center;
        vertical-align: middle;
        text-align: center;
    }

    .media-player-options i,
    .media-player-btn i{font-size: 15px; color: rgba(0,0,0,0.7);}

    /* Media Trackbar */
    .media-player-track-container{
        padding: 0 15px 7.5px;
        position: relative;
    }

    .media-player-track-container input{background:none; width: 42px; border: none; position: absolute; top: -20px; font-size: 12px;color: rgba(0,0,0,0.7);}

    .media-track-time{left: 15px; text-align: left;}
    .media-track-duration{right:15px; text-align: right;}

    .media-player-track{
        height: 5px;
        background: rgba(0,0,0,0.1);
        position: relative;
        border-radius: 5px;
    }

    .media-player-track-position{position: absolute; top:0; left: 0; height: 5px;border-radius: 5px;}


    /* Full Screen Video */
    .white-controls .media-player-controls{
        background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    }
    .white-controls .media-player-controls *{
        color: rgba(255,255,255,0.9);
        
    }
    
    .white-controls .media-player-controls .media-player-play-btn{
        border: 1px solid rgba(255,255,255,0.7);
    }

    .white-controls .media-player-controls .volumne-track,
    .white-controls .media-player-controls .media-player-track
    {
        background: rgba(255,255,255,0.1);
    }


    .ui-video-player{position: relative; border-radius: 10px; overflow: hidden;}
    .ui-video-player.fullscreen{position: fixed; background: #000; width: 100vw; height: 100vh; z-index: 4; top: 0; left: 0; border-radius: 0; overflow: initial }

    .ui-video-player.fullscreen video{position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%);}

    .ui-video-player .media-player-controls{border-radius: 0 0 10px 10px}

    .ui-video-player.fullscreen .media-player-controls{
        background: rgba(0,0,0,0.1);
        backdrop-filter: blur(100px);
        -webkit-backdrop-filter: blur(100px);
        padding-bottom: var(--safe-area-inset-bottom);
        border-radius: 0
     
    }

    .ui-video-player.fullscreen .media-player-buttons{padding-bottom: 28px}

    .ui-video-player.fullscreen .media-player-track-container input{display: block!important}

    .qr-target{
        position: absolute;
        border: 2px solid rgba(255,255,255,0.9);
        width: 30px;
        height: 30px;
    }

    .qr-target.tl{
        top: 0;
        left: 0;
        border-right: none;
        border-bottom: none;
        border-radius: 3px 0 0 0;
    }

    .qr-target.tr{
        top: 0;
        right: 0;
        border-left: none;
        border-bottom: none;
        border-radius: 0 3px 0 0;
    }

    .qr-target.bl{
        bottom: 0;
        left: 0;
        border-right: none;
        border-top: none;
        border-radius: 0 0 0 3px;
    }

    .qr-target.br{
        bottom: 0;
        right: 0;
        border-left: none;
        border-top: none;
        border-radius: 0 0 3px 0;
    }

    /*================================================
    // BACKGROUNDS
    /================================================*/

    
    .bg-blank{min-height: calc(100vh - 92px)}


    .bg-black-translucent{
        background:rgba(0,0,0,0.5); 
        -webkit-backdrop-filter: blur(100px);
        backdrop-filter: blur(100px);
    }

    .bg-white-translucent,
    .bg-translucent{
        background: rgba(255,255,255,0.7); 
        -webkit-backdrop-filter: blur(100px);
        backdrop-filter: blur(100px);
    }

    #stream-player-podcast .bg-translucent{
        background: linear-gradient(0deg, white, rgba(255,255,255,0.6)); 
    }

    

    .bg-translucent-light{
        background: rgba(255,255,255,0.3); 
        -webkit-backdrop-filter: blur(100px);
        backdrop-filter: blur(100px);
    }

    .bg-translucent-gradient{background: linear-gradient(180deg, rgb(249,249,249,0.5) 0%, rgb(249,249,249,0.75) 50%, rgb(249,249,249,1) 90%);}

    .bg-grey{background: #f9f9f9}
    .bg-dark-grey{background: #f0f0f0;}
    .bg-white{background: #fff;}
    .bg-black{background:#000}
    
    .bg-gradient{background:linear-gradient(135deg, #6e97e9 0%, #8545e3 50%)}

    .bg-primary{background:#6e97e9}
    .bg-light{background:#99bbff}
    .bg-accent{background: #8545e3}
    .bg-dark{background:#2a2743}


    .frost.banner{
        backdrop-filter:unset;
        -webkit-backdrop-filter:unset;
    }
    .frost.banner::after,
    .frost.banner::before{
        content: ' ';
        display: block;
        position: absolute;
        top: 0%;
        width: 100%;
        bottom: -1px;
    }

    .frost.white::after{
        background: linear-gradient(50deg,#fff 5%,rgba(255,255,255,0.3) 100%);
    }
    .frost.white::before{
        background: linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 100%);
    }

    .frost.grey::after{
        background: linear-gradient(50deg,#f9f9f9 5%,rgba(249,249,249,0.3) 100%);
    }
    .frost.grey::before{
        background: linear-gradient(0deg,#f9f9f9 0%,rgba(249,249,249,0) 100%);
    }


    .parallax .tab-pages,
    .parallax .ui-view{perspective: 10px;}

    .dashboard-container,
    .parallax .tab-pages .page-tab {
        transform-style: preserve-3d;
    }
    .parallax .background-element {
        transform-style: preserve-3d;
        transform: translateZ(-5px);
        top: -26vh;
        left: -26%;
        right: -26%;
        position: absolute;
        height: 76vh;
    }

    .dashboard-container .background-element{
        max-height: 60vh;
    }

    .wave,.asset-bg{ height:100%; position: absolute; top: 0; left: 0; right: 0;}


    .subscription-bg:after{
        content: ' ';
        position: absolute;
        top: 0;
        left:0;
        right: 0;
        bottom:0;
        /*background: url(../../enterprise/css/images/assets/bg-2.jpg) top center no-repeat;*/
        background-size:cover;
        opacity: 0.5;

    }

    
    .wave:before,.asset-bg:before{
        content: ' ';
        /*background: url(../../enterprise/css/images/assets/bg-07.png) top center;*/
        background-size:cover;
        position: absolute;
        top: 0;
        left:0;
        right: 0;
        height: 100%;
        opacity: 0.3;
    }

    .wave .curve,.asset-bg .curve{
        position: absolute;
        bottom: -14px;
        width:180%;
        left: 50%;
        transform: translate(-50%,0);
    }

    
   

   

    /*================================================
    // BOTTOM NAVIGATION
    /================================================*/

    .tabbed-navigation ul li{ font-size:10px}
    .tabbed-navigation ul li{ opacity: 1}
    .tabbed-navigation ul li .tab-icon:before,
    .tabbed-navigation ul li .tab-icon:after,
    .tabbed-navigation ul li .tab-icon svg,
    .tabbed-navigation ul li .tab-icon span{filter:grayscale(1);}

    .tabbed-navigation .airshot-svg-icon{width: 32px;}
    .tabbed-navigation .airshot-svg-icon svg{margin-top: -3px;}

    .tabbed-navigation ul li.show *,
    .tabbed-navigation ul li.show svg,
    .tabbed-navigation ul li.show .tab-icon:before,
    .tabbed-navigation ul li.show .tab-icon:after
    {filter: grayscale(0)}

    .tabbed-navigation ul li .airshot-line-icon{width: 32px}

    .tab-icon.fa{font-size: 26px; color: #6e97e9}
    .tab.show span{color: #6e97e9}

    .tab-bubble{background:#8545e3;}

    .tabbed-navigation{box-shadow: 0 0 35px -20px rgba(0,0,0,0.5); border-top: none}

    .tabbed-navigation{transform: translate3d(0, 120%,0);}
    .tabbed-navigation.show{transform: translate3d(0, 0%,0);}

    .navigation-bar-overlay-gap{height: calc(74px + var(--safe-area-inset-bottom));}


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

        .tabbed-navigation li span{font-size: 9px}
        .tab-navigation li a{font-size: 11px; }

        .app-tile.story .grid{
            display: grid;
            grid-template-columns:15vw 1fr 24px;
            grid-gap: 15px;
    
        }
       

        .signin-logo{width: 95px; height: 95px;}
        h1.logo-heading{font-size: 340%}

        body,p{font-size:14px;}

    }


    /*=========================================================
	// ACTIVITY CONTROLLERS
	/=========================================================*/

    


    #library-item-manager,
    #pathway-manager,
    #discover-search{
        z-index: 5;
    }
    

    #library-item-manager .overlay,
    #pathway-manager .overlay,
    #discover-search .overlay{opacity: 0.2;}

    #library-item-manager .activity-view,
    #pathway-manager .activity-view,
    #discover-search .activity-view{
        box-shadow: var(--elevation);
    }

	.activity-view-controller .dialog{
		max-width:380px; width:90%; height:auto; 
        left:50%; top: 50%; 
		opacity: 0; 
		box-shadow:var(--elevation-high);
        transform: translate3d(-50%,-40%,0); 
        border-radius: 5px;
    }
    .activity-view-controller.show .dialog{transform:  translate3d(-50%,-50%,0); opacity: 1}
    

    .activity-view-controller.dismiss > .dialog{
		transform: translate3d(-50%,-40%,0); opacity: 0;
    }	


    .activity-view-controller .card-popup{

        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:var(--elevation-high);
        transition-property: transform, opacity;

    }

    .activity-view-controller > .activity-view.inapp-clip{
        max-height: 600px;
        max-width: 420px;
    }



    .in-app-web-view-container{
        position:relative; 
        height:calc(560px - 48px); 
        margin-top:48px
    }

    .in-app-web-view-container iframe{
        border-radius: 0 0 var(--radius) var(--radius);
    }

    @media screen and (max-width: 767px){
        .activity-view-controller .card-popup.bottom{
            border-radius: 10px 10px 0 0;
            bottom: 0;
            left: 0;
            right: 0;
            top: auto;
            width: auto;
            max-width: none;
            transform: translate3d(0,110%,0);
            box-shadow: 0 2.5px 25px rgb(0 0 0 / 15%);
        }

        .activity-view-controller.show .card-popup.bottom{
            transform: translate3d(0,0,0);
        }

        .activity-view-controller.dismiss .card-popup.bottom{
            opacity: 1;
            transform: translate3d(0,110%,0);
        }
    }

    .card-popup-banner{
        min-height:240px; width:100%; position:relative; border-radius:7.5px 7.5px 0 0
    }
    .card-popup-content{min-height:280px}

    .card-popup-icon{
        background: #fff;;
        position: relative; 
        box-shadow: 0 2.5px 7.5px rgba(0, 0, 0,.1);
        border-radius: 50%;
        margin:45px auto 45px; 
        width:104px; 
        height:104px
    }

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


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

    .activity-view-controller.dismiss > .card-popup{
		transform: translate3d(-50%,-40%,0); opacity: 0;
    }	

    #award-dialog .overlay{background:rgba(0,0,0,0.02)}


    
    #dialing-codes-selection.show,
    #badge-view.show,
    #award-view.show,
    #voucher-view.show,
    #stream-player.show{z-index: 12;}

    .activity-view-controller .appear-from-right.activity-viewer{
        max-width: 520px
    }
    

    /*======================================================
    // PHOTOS
    /=======================================================*/

    .upload-grid {
        display: grid;
		grid-template-columns: 1fr 1fr 1fr;
        column-gap: 5px;
        row-gap: 5px;
        align-items: center;
        justify-content: center;

    }

   
    .upload-grid.x-2,
    .upload-grid.x-4{
        grid-template-columns: 1fr 1fr;
    }

    .upload-grid.x-1{
        grid-template-columns: 1fr;
    }


   

    .upload-tile-container .upload-icon{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        color:#444;
        font-size: 42px;
    }


    
    

   
    .upload-tile-container .progress-bar{display:none; z-index: 1; height: 5px; position: absolute!important;}

    .upload-tile-container.uploading .progress-bar{display: block;}
    .upload-tile-container.uploading .fa{display: none;}

    .upload-tile-container{
        position: relative;
        z-index: 0;
    }
	.upload-tile {
        position: relative;
        break-inside: avoid;
        width : 100%;
        background: rgba(0,0,0,0.1);
        border-radius: 5px;
        overflow: hidden;

    }


    .upload-tile {
        height: 30vw;
    }
    .upload-grid.x-1 .upload-tile{
        height: 80vw;
    }

    .upload-grid.x-2 .upload-tile,
    .upload-grid.x-4 .upload-tile{
        height: 37.5vw;
    }


    .upload-file-thumbnail{position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
    .upload-file-thumbnail i{font-size:36px; color: #fff;}

    .progress-bar-percent{height:5px; border-radius: 3px;}

    .upload-grid.large{
        column-count: 4;
        column-gap:0;
        margin: 5px 0 5px 5px
    }

    .upload-grid.large .upload-tile {
        width : calc(25vw - 5px);
        height: calc(25vw - 5px);
        border-radius: 0;
        margin-bottom: 5px;
    }
    
    .upload-tile img,
    .upload-tile video{position: absolute; left:50%; top: 50%; transform: translate3d(-50%,-50%,0); display: block; width: 100%; height: auto; z-index: 1;}

    .upload-tile video{height: 100%; width: auto;}

    .upload-tile img.landscape{width: auto; height: 100%;}
    .upload-tile img.portrait{width: 100%; height: auto;}




    /*================================================
    // CORE OVERRIDES
    /================================================*/

    /* Form */
    .slide-info-icon{width: 25vw; height: 25vw;}


    .greyout h2{
        color: #666;
    }
    
    .greyout p{
        color: #888;
    }

    .greyout .font-icon{
        border-color: #666;
    }

    .greyout .font-icon i{
        color: #666;
    }
    

    /*=======================================================
	// PWA INSTALLER
	/======================================================*/
	#phone-installer{ z-index: 100;}
	.phone-installer-container{background:#fff; box-shadow:0 0 3px rgba(0,0,0,0.3); margin:0 5%;}
    #adhs-button-no{position: absolute; right: 0; top: 0; width:48px; height: 48px;}
    .bg-pwa{background: #2a2743}

    .show-on-ios{display: none}
    .show-on-android{display: block;}

    .ios .show-on-ios{display: block}
    .ios .show-on-android{display: none;}


    .icon-add-to-home-screen{background: url(images/svg/add-to-home-screen.svg) center center no-repeat; background-size: 100%; width: 16px; height:16px; filter: grayscale(1);}


    
    
    
    
    

    /*=======================================================
	// IOS OVERLAY
    /======================================================*/
    
    .ipad-statusbar-white{background: #f9f9f9}

    .ipad .statusbar-is-overlay .toolbar-panels, .ipad .statusbar-is-overlay .fragment-toolbars{
        height: 75px;
    }
	
    .tiny-padding-top{padding-top:var(--safe-area-inset-top)}
	.walkthrough-title{padding-top:var(--safe-area-inset-top);}
	.close-walkthrough{top:var(--safe-area-inset-top);}

	.statusbar-is-overlay .html-page, .statusbar-is-overlay .text-page{ padding-top:79px}
	
    
    
    





	/*=======================================================
	// IPHONE X
	/======================================================*/
	
	


    .tab-navigation-view:before,
	.story-navigation-header:before{
        content: '';
        display: block;
        height: var(--safe-area-inset-top)!important;
    }

	.page-swipe-gesture{bottom:var(--safe-area-inset-top);}


    .left-navigation .story-menu-quit a:after,
	.submit-button:after{
        content: '';
        display: block;
        height: var(--safe-area-inset-bottom)!important;
    }


    i.fa{
    -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
    }

    .page-caliper{margin-bottom: 0!important}


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

    .appear-from-right.full-width{max-width:none!important; width: auto; left: 0; box-shadow: none;}
    



    /*================================================
    // ANDROID FIXES
    /================================================*/ 

    .android #stream-player-podcast .bg-translucent,
    .android .bg-translucent{background:#fff}
    
    .android .map-completed{background:rgba(0,0,0,.7)!important}

    /*================================================
    // FIXES
    /================================================*/ 
    
    /*=== Duotone FA icons ===*/
    .fa-style-duotone .fa.position-absolute{position: absolute; }


    /*=== QR Scanner ===*/
    .qr-scanner-active body,
    .qr-scanner-active .activity-view{
        background:none!important
    }

    .qr-scanner-active .sliver-content,
    .qr-scanner-active .fragment-toolbar,
    .qr-scanner-active #container{display: none}
    .qr-scanner-active .sliver-appbar{
        height: 90vh!important;
        background: none!important
    }