/*================================================
    // PHABLET
    /================================================*/
    .discover-swipe-container .feature-item{
        background: none !important;
    }
    .feature-item h2{font-size: 180%;}
    .feature-item-inner{
        grid-template-columns: 224px 1fr;
    }

    #signin-card{
        height: auto;
    }

    .award-section-items{
        grid-template-columns: 1fr 1fr;
    }

    /**
     * PATCHES
     * 1. Set Half UI on reward, patyhway activity
     * 2. Padding fix on library feature item
     **/

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

    /**
     * TODO:
     * 1. Revise into groups
     * 2. Port standard layouts to codohydra     
     **/

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

    /* 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;
    }
    
    /* Sliver Scroll */
    .sliver-appbar{height: 340px;}
	.sliver-content{margin-top:340px}

    .activity-view-snackbar{padding:15px 45px!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: none!important;}
    .show-on-mobile{display:none!important}
    .show-on-phablet{display: block!important;}

    .hide-on-phablet{display:none!important;}

    .media-slide{height:12vh}

    #banner-view img.landscape{height: 100%; width: auto}
   
    .phone-installer-container{ margin:0 auto;max-width:480px}
    
    .channel-comment{  max-width: 65%;}

    #chat-room-view{padding:60px 0!important}
    .chat-message{margin: 2%!important}
    .chat-message-bubble{padding: 30px!important}


    #walkthrough-content{padding: 45px;}
 
    
	.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%}

	.width-constraint-small{max-width: 500px; margin-left: auto!important; margin-right: auto!important;}
	.width-constraint-medium {
        width: 80%;
        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:100%;max-width: 960px;margin-left: auto!important; margin-right: auto!important;}

    .center-vertical-on-tablet{display:flex;align-items: center; position:absolute; bottom:0; top:0; left:0; right:0;}
    
    .padding-constraint-large{padding: 12%!important;}

    .wave .curve,.asset-bg .curve{
        width: 200%;
    }


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

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

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

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

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

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

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

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

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

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

    #search-results-list, .discover-sections .discover-swipe-container{
        display: grid;
        margin: 0;
        grid-template-columns: 
        50% 50%;
        overflow: unset;

    }

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

    #story-navigation{ max-width:360px}


    .stream-play-poster{width:30vh; height:30vh}


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

    #stream-player.compact{display: none;}
    #stream-player.compact .stream-player-track-container {
        padding: 0;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
    }

    #stream-player.compact #stream-player-activity-view,
    #stream-player.compact .compact-grid{height:70px; box-shadow: none; padding-bottom: env(safe-area-inset-bottom); display:none}


    #stream-player.compact .stream-player-buttons{padding-bottom: env(safe-area-inset-bottom); bottom:15px}


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

    .stream-player-track-container{padding:10px 5vw;}
    .stream-player-buttons.bottom{height:48px}

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

    .overflow.with-scrollbar::-webkit-scrollbar {
		display:none
    }
    

    .article-page{margin:36vh auto 30px; width: auto;}
    .article-feature-image{
        height:43vh
    }
    .article-feature-image img{
        height: auto;
        width: 100%;
    }


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

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

   

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

   

    /*=========================================================
	// 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);}


	/*=========================================================
	// HELPER
	/=======================================================*/
	
	.helper-dialog-wrapper{ max-width: 960px; margin: 0 auto;}
	.helper-dialog-container{background:none; left:0%; right:0%; 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;}

    


    .discover-featured .discover-section{padding-left:0}

    .discover-featured .discover-section{padding-left:0}
    .discover-featured .discover-swipe-container{
        grid-template-columns: 
        100% 100% 100%
        100% 100% 100%
        100% 100% 100%
        100% 100% 100%
    }
    
    .swipe-layer-nav{margin-top:3%}

    /*=========================================================
	// 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:36.4vw; width:100%;max-height: 452px}
    .media-preview-slide{opacity:0; visibility:hidden; height:36.4vw; 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}

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

    #review-list .comment{margin:0 6% 6%}

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

    /* Subscription Options */
    #subscription-tiles{
        max-width: 480px;
        margin: 0 auto;
        grid-template-columns: 
        225px 225px;
        grid-gap: 30px;
    }

    #subscription-tiles .app-tile{break-inside: avoid; position: relative;margin-right:0; margin-left:0; padding:60px  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:250px; padding: 0!important;}

    .onboarding-container .bottom-button{position: relative;}

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

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

    .photo-grid {
        column-count: 3;
        grid-auto-rows: 1fr;
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        grid-template-columns: 1fr 1fr 1fr;
        display: grid;

	}
	.photo-tile {
        position: relative;
        break-inside: avoid;
        width : 100%;
        height: 148px;
        background: rgba(0,0,0,0.1);
        overflow: hidden;
        margin-bottom: 5px;

    }

    .photo-grid.large{
        column-count: 4;
        column-gap:1px;
        grid-row-gap: 1px;
        grid-template-columns:auto 1fr;
        margin: 0!important
    }

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

    .landscape{margin: 0 0 5px!important}
    .photo-tile.landscape img{width: auto; height: 110%; margin: 0}
    
    #photo-viewer{background:#000;}
    #photo-viewer img{position: absolute; left:50%; top: 50%; transform: translate3d(-50%,-50%,0); display: block; width: 100%; height: auto;}


    /*=========================================================
	// 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%}
    


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

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

    .analytics-grid .column{margin-top: 28px; padding:10%}


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

	.activity-view-controller .popup-view{
		width:520px; height:580px; 
		left:50%; top: 50%; 
		opacity: 0; 
		overflow: hidden;
		box-shadow:0 0 15px rgba(0,0,0,.4);
        transform: translate3d(-50%,-50%,0) scale(.7); 
        border-radius: 7.5px;
	}
	.activity-view-controller.show .popup-view{transform:  translate3d(-50%,-50%,0) scale(1); opacity: 1}

	.popup-view .slant{height:300px!important; min-height: 0;top:-110px}
    .popup-view .center-on-slant{margin-top: calc(274px - 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;
	}