


    /*================================================
    // TABLET
    /================================================*/

    

    .account-icon img{position: relative;}

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

    .locked-cohort{
        bottom:0;
    }

    .discover-swipe-container .feature-item{background: none !important;}

    #signin-card{
        height: auto;
    }

    #award-view-activity-view,
    #voucher-view-activity-view{
        max-width: 540px;
    }

    /* Upload Tiles */
    .upload-tile {
        height: 130px;
    }
    .upload-grid.x-1 .upload-tile{
        height: 430px;
    }

    .upload-grid.x-2 .upload-tile,
    .upload-grid.x-4 .upload-tile{
        height: 190px;
    }


    .pathway-snackbar{
        margin:0;
    }
    .pathway-snackbar .activity-view-snackbar{
        border-radius: 0;
        border-left:none;
        border-right:none;
        border-bottom: none;
        box-shadow: none;
        max-width: none;
    }
    

    /* Sliver Scroll */
    .sliver-appbar{height: 340px;}
    .sliver-content{margin-top:340px}
    
    .activity-view-snackbar{padding:8px 28px!important}

    /* Flicker Fixes */
    .book-cover,
    .app-tile,
    .story-tile-button{-webkit-transform-style: preserve-3d}

    /* Mask Fixes */
    .book-cover-mask{-webkit-mask-image: -webkit-radial-gradient(black,white); width: 240px; height:240px; border-radius: 10px; overflow: hidden;}
    

    .show-on-tablet{display: block!important;}
    .show-on-mobile{display:none!important;}

    .phone-installer-container{ margin:0 auto;max-width:480px}
    
    .wave{height:96vh;}

    
	.app-content,
    .tile-feed-item{padding:45px; margin: 0}
    
    .app-content{margin: 0 auto;}
    
    .discover-tile{margin: 0}

    .small-padding{padding: 6%}
    
    .app-tile{padding:6%}
    .app-tile.padding-constraint-small{padding:6%}

  

    .story-icon{
        width: 64px;
        height: 64px;
    }

    .story-icon.large{
        width: 80px;
        height: 80px
    }

    .story-icon.x-large{
        width: 128px;
        height: 128px;
        max-width: none;
        max-height: none;
    }

    #subscriptions-list .story-title,
    .story-list-items .story-title{font-size: 120%}

    .app-tile.story .grid{
        grid-template-columns: 64px 1fr 24px
    }

    .app-tile-state{padding: 10px 6%}
    .app-tile-state-icon{right: 6%}

    .app-tile .heading{font-size: 120%}

	.width-constraint-small{max-width: 500px; margin-left: auto!important; margin-right: auto!important;}
	.width-constraint-medium{width:60%;max-width: 720px;margin-left: auto!important; margin-right: auto!important;}
	.width-constraint-large{width:80%;max-width: 960px;margin-left: auto!important; margin-right: auto!important;}
    .width-constraint-xlarge{width:95%;max-width: 1280px;margin-left: auto!important; margin-right: auto!important;}
    .margin-constraint-bottom{margin-bottom: 30px}
    
    .padding-constraint-large{padding: 12%!important;}
    
    
    .padding-constraint-large{padding: 12%!important;}


    .delete-button{top:15px; right: 15px;}

    .feature-tiles-heading{padding:20px 45px 20px}


    

    

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

    .analytics-grid{
        display: grid;
        grid-template-columns:
            calc(50% - 14px) calc(50% - 14px);
        column-gap: 29px;
        margin: 44px 0
    }

    .analytics-grid .column{break-inside: avoid; margin: 22px 0;  padding:44px}
    


    .chart{height:280px}


    /*================================================
    // PATHWAYS
    /================================================*/ 
    
    .activity-viewer{
        min-height:90%
    }


    .locked-cohort{
        bottom: 0;
    }
    


    @keyframes pathFillHalf{
        from {
            stroke-dashoffset: 180%;
        }
        to {
            stroke-dashoffset: 130%;
        }
    }

   

    @keyframes pathFillHalfCenter{
        from {
            stroke-dashoffset: 80%;
        }
        to {
            stroke-dashoffset: 75%;
        }
    }


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

    .library-categories{margin:15px  45px 15px}
    
    .page-tab .library-categories{justify-content: center;}

    .library-categories div:hover:after{
        transform: translate3d(-50%,-50%,0) scale(1);
        opacity: 1;
        background: rgba(0,0,0,.01);
        width: 100%;
    }

    .library-categories div{
        display: inline-flex;
		box-sizing: border-box;
		align-items:center;
		justify-content:center;
        margin-top: 7px;
    }
    
    .library-categories div span{
        justify-content: flex-start;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        display: none!important;
    }

    .library-categories div i{
        margin: 0;
        width: 19px;
        height: 19px;
        font-size: 17px;
    }
    

    /*================================================
    // STORY FEATURE
    /================================================*/

    .story-tiles{ min-height:371px; margin-bottom:0; position:relative}
	.story-tile{ min-height:288px;}
	.story-tile-inner{padding:45px;}
	
	.book-cover{width:240px; height:240px; position:absolute!important; box-shadow:0 0 25px rgba(0,0,0,.3); overflow:hidden; border-radius: 10px; background:#ccc; transform: translateZ(0); z-index: 1;}
    .book-cover img{position:absolute;top:50%; left:50%; width: 100%; height: auto; transform: translate(-50%,-50%)}
    
    .book-cover.audio{
        height: 240px;
    }

   
	
	.story-tile-details{margin:15px 0 15px 270px}
	.story-tile-star-rating .star-rating{text-align:left!important; float:left;}

	.story-tile-star-rating:after{content:' '; display: block; clear: both}

	/* DEFAULTS */
	.story-tile-details h2{font-size:140%;}
	.story-tile-star-rating .rating-count{ opacity:.8; font-size:90%; display:block; float:left; margin-left:7.5px}
	
	/* ON COLOUR BACKGROUND */
	.story-tile-inner .story-tile-details h2{color:#fff; font-size: 180%; line-height: 1.2em}
	.story-tile-inner .story-tile-details .story-category{color:#fff; opacity:.9}
	.story-tile-inner .story-tile-details p{color:#fff; min-height:59px}
	.story-tile-inner .story-tile-star-rating .star-rating .star{background:url(images/svg/black-star.svg) center center no-repeat!important; background-size:90%!important; opacity:.3}
	.story-tile-inner .story-tile-star-rating .star-rating .star.selected{background:url(images/svg/white-star.svg) center center no-repeat!important; background-size:90%!important; opacity:.9}
	.story-tile-inner .story-tile-star-rating .rating-count{color:#fff;}
	
	
	.story-tile-button .story-button{background:#fff!important; color:#2d2d2d!important; display:inline-block; border-color:#fff!important; min-width:180px;box-shadow:0 0 25px rgba(0,0,0,.3); margin:15px 0 0; font-size:100%;}


    .discover-category-heading{padding: 15px 45px}

    #subscriptions-list,
    .story-list-items{
        margin: 30px 45px 90px;
        display:grid;
        grid-template-columns: calc(50% - 15px) calc(50% - 15px);
        grid-gap: 30px
    }

    #latest-activity .story-tile{margin-bottom: 35px}

    #subscriptions-list .app-tile,
    .story-list-items .app-tile{margin: 0;}

    .discover-sections .discover-swipe-container{
        display: grid;
        grid-template-columns: 
        31% 31% 31%;
        grid-gap: 28px;
        overflow: unset;

    }

    


    #search-results-list .discover-tile{break-inside: avoid; padding:15px 0 0 }


    .discover-featured .discover-swipe-container .feature-item{
        width: 80%;
    }


    .discover-swipe-section-featured.full-width{grid-template-columns: 100%!important}

    .swipe-layer-nav{margin-top:8px}

    .discover-tile {
        grid-template-columns: 80px 1fr;
        padding: 0;
    }

    .discover-tile-details{height: 97px;}

    .discover-subscribed-icon,
    .discover-btn{bottom: 15px}



    ::-webkit-scrollbar
    {
        width: 8px;
        margin-right:5px;
    }

    /* TRACK */
    ::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.05);
        -webkit-border-radius: 0;
        border-radius: 0;
        
        visibility: hidden;
    }
    

    
    /* THUMB */
    ::-webkit-scrollbar-thumb
    {
        /* This is the EXACT color of Mac OS scrollbars. 
            Yes, I pulled out digital color meter */
        background: rgba(0,0,0,0.1);;
        -webkit-border-radius: 100px;
        visibility: hidden;
        
    }
    ::-webkit-scrollbar-thumb:vertical:active
    
    {
        background: rgba(0,0,0,0.61); /* Some darker color when you click it */
        -webkit-border-radius: 100px;
    }


    .overflow:hover::-webkit-scrollbar-track,
    .overflow:hover::-webkit-scrollbar-thumb{
        visibility: visible;
    }

    /*=========================================================
	// NOTIFICATION DIALOG
	/=======================================================*/
	
    
    
	.callback-dialog-bubble{ transform: translate3d(20%,0,0);}	
	#callback-dialog-overlay.show .callback-dialog-bubble{transform:translate3d(0%,0%,0);}
    .callback-dialog{bottom:49px; right: 0; left: auto; width: 380px; transform: translate3d(0%,0,0);}
    

    #dialog-repeat-icon{bottom: 63px}


	/*=========================================================
	// HELPER
	/=======================================================*/
	
	.helper-dialog-wrapper{ max-width: 960px; margin: 0 auto;}
	.helper-dialog-container{background:none; left:15%; right:15%; transform:translate3d(0,0%,0);}
	.helper-visual{margin-top:0;}
	
	#helper.show,.map-helper.show{ visibility:visible}
	#helper-dialog.show .helper-bubble{ -webkit-animation:popIn 0.3s;animation:popIn 0.3s;}
	#helper-dialog.show .helper-visual{ -webkit-animation:popIn 0.5s; animation:popIn 0.5s;}

	.helper-bubble{background:#fff; border-radius:15px; padding:30px; margin-left:145px; box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.1); cursor:pointer;text-align:left}
	.helper-bubble p{ min-height:74px; max-height:74px; overflow:auto; display:block; margin:0 0; padding:0px!important; color:#000; }
	.helper-visual{float:left; width:128px; height:128px; border-radius:50%; border:3px solid #fff; box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.1); overflow:hidden; position:relative}

	.map-helper .helper-bubble{background:#fff; border-radius:0 0 5px 5px; padding:15px; padding-left:145px; margin:0 0 0 0; cursor:pointer}
	.map-helper .helper-bubble p{ min-height:75px; max-height:75px; overflow:auto; display:block; margin:0 0; padding:0px!important; color:#000}
	.map-helper .helper-visual{position:absolute;width:118px; height:118px; border-radius:50%; border:5px solid #fff;; box-shadow:none; overflow:hidden; bottom:0; left:7px; z-index:16; background-color:#fff;}

	.helper-finger{background-size:48px 48px; height:48px; width:48px; position:absolute; bottom:15px; right:15px; cursor:pointer}
	.helper-visual img{width:100%; height:auto;}

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

   
    
    #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;}

    /*=========================================================
	// FORM ELEMENTS
	/=========================================================*/

	
	fieldset{padding:10px 15px;}
	
	.form-container{
		width:70%; max-width:580px; margin:0 auto
	}
	
	
	.fieldset-title{padding: 7.5px 0;}
	
	#gender-other fieldset{border-radius: 0; border-top: none}


	

	.sparkle:before{background-size: 100%}
    .sparkle:after{background-size:80%}
    
	

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

    :root{
        --menu-width: 80px;
        --menu-icon-size:42px;
        --stream-compact-left:80px;
    }

    @media screen and (min-width:1600px){
        :root{
            --menu-width: 200px;
            --menu-icon-size:72px;
            --stream-compact-left:200px;
        }

        .nav-style-compact{
            --menu-width: 80px;
        }

        #forum-post-view-toolbar {
            max-width: calc(100% - 481px)!important;
        }
    }

    

    #stream-player.compact{
        left: var(--menu-width)!important;
        right: 0;
        bottom: 0;
        z-index: 5;
        width: auto!important;
        
    }

    #stream-player.compact #stream-player-activity-view{
        box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    }

    


    #left-navigation{
        width: var(--menu-width)!important;
    }

    #container {
        margin-left: var(--menu-width)!important;
    }

    #left-navigation .menu-logo {
        width: var(--menu-icon-size)!important;
        height: var(--menu-icon-size)!important;
    }

    

    #left-navigation ul li a {
        text-indent: -9990px;
        padding: 25px;
    }

    #left-navigation .menu-icon {
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 1;
    }


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

    .appear-from-right.full-width{transform: translate3d(2.5%,0,0);}
    .show .appear-from-right.full-width{transform: translate3d(0%,0,0);}

    #pathway-view,
    #story-view,
    #stream-view,
    #chat-view,
    #forum-post-view{
        left:var(--menu-width);
        z-index: 4;
    }
    

    .nav-style-compact{
        --menu-width: 80px;
    }

    .nav-style-compact #container,
    .nav-style-compact #stream-player.compact,
    .nav-style-compact #pathway-view,
    .nav-style-compact #story-view,
    .nav-style-compact #stream-view{
        left: var(--menu-width)!important;
    }


    .content-width-constraint{
        width: 95%;
        max-width: 1280px;
        margin-left: auto!important;
        margin-right: auto!important;
    }

    

    #discover-search-activity-view{
        max-width: 512px;
    }

   

    

    @media screen and (min-width:1600px){

       

        #left-navigation ul li a{
            text-indent: 0;
            padding: 15px 15px 15px 55px
        }

        #left-navigation .menu-icon {
            width: 28px;
            height: 28px;
            left: 30px;
            padding: 12px 0;
            position: absolute;
            font-size: 24px;
        }

       
    
    }

    .menu-logo {
        width: 72px;
        height: 72px;
        margin: 42px auto;
    }

    #account-view-tab-menu {
        position: absolute!important;
        bottom: 0;
        width: 100%;
        border-top: 1px solid rgba(0,0,0,.05);
    }
    
	
    #account-views-tab-menu{position: absolute; bottom: 0; left: 0; right: 0; border-top: 1px solid rgba(0,0,0,0.1)}

    #walkthrough-content{padding: 45px;}


    .hide-menu .left-navigation{transform:translateX(-325px);}
	

	.hide-menu #container,
	.hide-menu #footer-actions,
	.hide-menu #panel-toolbars,
	.hide-menu #fullscreen-dialog{
		margin-left:0!important;
		left:0!important
	}


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

    /* Subscription Options */
    #subscription-tiles{
        max-width: 800px;
        margin: 90px auto;
        grid-template-columns: 
            25% 25% 25% 25%;
    }

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

    #subscription-list-overflow{max-height: 290px;}

    .subscription-bg{margin:25px 45px}



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

    .onboarding-banner{height:200px; position: relative}

    .onboarding-container{height:auto; margin: 0 auto; max-width: 520px; min-height: 0; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); padding: 0!important}

    .onboarding-container .app-content{height:200px; padding: 0!important;}

    
    .bottom-button.static{position: relative; bottom:0;}

    .onboarding-container h2{font-size: 200%}
    .onboarding-container p{font-size:110%;}

	

	/*=========================================================
	// ACTIVITY CONTROLLERS
    /=========================================================*/
    
    .map-canvas-dialog,
    #checkin-map{border-radius: 10px 10px 0 0;}

	.activity-view-controller .popup-view{
        width:520px; 
        height:auto; 
        min-height: 520px;
        max-height:90%;
        left:50%; 
        top: 50%; 
        bottom:auto;
		opacity: 0; 
		overflow: hidden;
		box-shadow:0 0 15px rgba(0,0,0,.4);
        transform: translate3d(-50%,-40%,0); 
        border-radius: 10px;
    }

    .nav-style-compact .activity-view-controller .popup-view{
        margin-left: 40px;
    }
    
    .activity-view-controller .popup-view.centered{
        margin-left: 0;
    }

    .activity-view-controller .popup-view .overflow{
        max-height: 90vh;
    }

    .activity-details{height:55vh}

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

	.popup-view .slant{height:335px!important; min-height: 0;top:-110px}
	
    .popup-view .center-on-slant{margin-top: calc(304px - 93px)}
    
    #event-checkin .overlay,
    #award-view .overlay{background:rgba(0,0,0,0.5)}

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


    /*================================================
    // REVIEW
    /================================================*/
    
    .story-review-detail{
        grid-template-columns: 64px 1fr;
    }

    .review-list .comment,
    #review-list .comment{margin:0 6% 6%}
    
    /*================================================
    // STORY
    /================================================*/

    .half-page{width:50%; float:left; position:relative; height:100%;}

    .half-page{position:relative; min-height:100vh;width:50%; transform:none; height: auto}
	.half-page-2{transform:none!important; z-index: 1}

	

	.half-page-2:after{content:' '; display: block; clear: both;}
    
    
    #story-navigation{ max-width:360px}


	.half-page{box-shadow: none!important;}
	
	#panel-story-toolbar{ 
        background: rgba(255,255,255,0.8)!important;
        box-shadow:0 0 5px rgba(0,0,0,0.3); 
        -webkit-backdrop-filter: blur(100px);
        backdrop-filter: blur(100px);
    }

	#story-top-navigation{position:fixed; top:0; left:0; right:0; height:49px; z-index:2;border-bottom:1px solid rgba(0,0,0,.1); transform: translate3d(0,0%,0);}





	



	.story-toolbar{background:#fff; box-shadow:0 0 3px rgba(0,0,0,.3);}
	
	

	.story-toolbar .menu-icon span{background:#444; box-shadow: none}

	.story-toolbar .toolbar-center{color: #444; display: block!important;}

	/*#story-bottom-navigation.focus-in{ transform: translate3d(0,0%,0); }
	#story-top-navigation.focus-in{ transform: translate3d(0,0%,0); background:#fff}*/

	.narrow{max-width: 520px; width: 100%;}


	.center-vertical-on-mobile{flex:none; position: relative;}

	.center-vertical-on-tablet{display:flex;align-items: center; position:absolute; bottom:0; top:0; left:0; right:0;}

	.see-all{margin-right:30px}

	.padding-on-tablet{padding:0 30px;}

	a:hover{cursor: pointer;}


    /*=========================================================
	// VIEW STORY
    /=========================================================*/


    .discover-view-tile{grid-template-columns: 128px 1fr; padding-bottom: 0}


    .preview-grid{
        grid-template-columns: 100% 100% 100% 100%;
        grid-column-gap: 15px
    }


    .preview-container{position: relative;width:100%; overflow:hidden;height:30vw; width:100%;max-height: 452px}
    .media-preview-slide{opacity:0; visibility:hidden; height:30vw; width:100%; position:absolute; overflow:hidden;box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.1);
        border-radius: 10px; max-height: 452px}
    .media-preview-slide.show{opacity:1; visibility:visible;}

    .media-preview-slide img,
    .media-preview-slide video{width:100%; height: auto; display: block; box-shadow: 0;}

    .media-preview-slide img{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%)}

    .preview-grid .column{align-self: center}
    .preview-grid video{display: block; width: 100%; height: auto}
    
    .story-heading{font-size: 240%}

    .story-view-details > .column{break-inside: avoid; align-self: flex-start}


    /*================================================
    // STREAM PLAYER
    /================================================*/ 

    .stream-player-buttons{padding:0}
    
    .stream-player-options i,
    .stream-player-btn i{font-size: 17px}
    #stream-player-play-btn{width:36px; height:36px}


    .stream-player-controls{ position: relative; padding:15px}
    .stream-player-track-container{ margin:0 auto; padding-bottom:0;}
    .stream-player-track-container input{ top: 14px;}

    .stream-track-time{left: 0; text-align: right;}
    .stream-track-duration{right:0; text-align: left;}

    #stream-player.compact .stream-player-buttons{position: relative;}
    

    .stream-play-poster{
        height: 50vh;
    }

    .stream-player-controls{padding:15px}

 


    .compact-grid{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        grid-template-columns: 270px 1fr 270px;
        height: 95px;
        display: grid;
        align-items: center;
        
        column-gap: 0px;
    }

    
    
    #stream-player.compact .compact-grid{
        border-top:none;
        grid-template-columns: 220px 1fr 220px;
    }



    



   

    /*================================================
    //  FALKOR 2.4
    /================================================*/

    /* Flatten the tabs */

    #awards-list .tab-navigation,
    #journey-list .tab-navigation,
    .flatten-tabs .tab-navigation,
    #discuss-list .tab-navigation,
    #discover-list .tab-navigation{box-shadow: none!important; background:var(--color-off-white)}

    #app-activity .fragment-toolbar.bg-white,
    #app-activity .toolbar-panel.bg-white{background:var(--color-off-white)}

    .elevate .library-filter-container{background:var(--color-off-white)!important;}

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

    .stream-player-author{display: grid!important;}

    .stream-player-grid{
        display: grid;
        grid-template-columns: 1fr 460px;
        column-gap: 0%;
        width: 100%;
        margin: 0 auto;
        
    }


    
    #stream-main-container{height:calc(100vh - 96px); padding: 48px 0; background:#f9f9f9}

    #stream-main-container .contraints{
        max-width: 1008px;
        margin: 0 auto;
    }


    #stream-details-container{height:calc(100vh - 96px); padding: 48px 0;}
    #stream-details-container .contraints{
        max-width: 432px;
        margin: 0 auto 0 0;
    }

    #stream-details-container .app-content{ padding:45px 30px}

  

   


    .stream-list-item p{max-width: 24vw;}


    .stream-list{padding:0}
    .stream-list-item{padding:20px}

    #stream-subscribe-button{bottom:30px; right:30px}

    .stream-meta{
        background: none!important;
        border-top: none!important;
        padding: 15px 0!important;
        margin: 0;
        border-bottom: none;
        
    }

    .stream-details-container{
        margin: 0 45px;
        background: none;
        padding: 15px 0;
        display: grid;
        grid-template-columns: 1fr 287px;
    }

    /*================================================
    // DEVICE FIXES
    /================================================*/

    
    

    @media screen and (max-width:1250px){
		
		#discover-sections .discover-swipe-container{
            display: grid;
            margin: 0 45px 45px;
            grid-template-columns: 
            47% 47%;
            grid-gap: 3%;
    
        }

	}

    @media screen and (min-width:1600px){
        .story-list-items,.assignment-grid{
            grid-template-columns: 32% 32% 32%
        }

        #discover-sections .discover-swipe-container{
            grid-template-columns: 23% 23% 23% 23%
        }


        
        .story-tile-inner{padding:60px 45px}

    }


    @media screen and (max-width:1024px){
        
        .discover-sections .discover-swipe-container{
            grid-template-columns: 49% 49%;
        }
    }

    @media screen and (min-width:1900px){
        
        .discover-sections .discover-swipe-container{
            grid-template-columns: 22% 22% 22% 22%;
        }
    }