/*
what do we need in mobile
grid
centered (based on flexbox)
icons

NEED
- Swipe Box
- Tabs
- Panel
- View Controller may need to control views from within tabs
- Maybe multiple view controllers?
*/
html, body, .rodeo-view-wrapper {
    width:100%; 
    height:100%; 
    overflow:hidden;
    position:relative;
}

@keyframes on-enter-left {
    from {
        transform: translate3d(100%,0,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}

@keyframes on-exit-left {
    from {
        /*opacity:1;*/
        transform: translate3d(0,0,0);
        filter: brightness(100%);
    }
    to {
        /*opacity:.75;*/
        transform: translate3d(-30%,0,0);
        filter: brightness(65%);
    }
}

@keyframes on-enter-right {
    from {
        /*opacity:.75;*/
        transform: translate3d(-30%,0,0);
        filter: brightness(65%);
    }
    to {
        /*opacity:1;*/
        transform: translate3d(0,0,0);
        filter: brightness(100%);
    }
}

@keyframes on-exit-right {
    from {
        transform: translate3d(0,0,0);
    }
    to {
        transform: translate3d(100%,0,0);
    }
}

@-webkit-keyframes on-enter-left {
    from {
        -webkit-transform: translate3d(100%,0,0);
    }
    to {
        -webkit-transform: translate3d(0,0,0);
    }
}

@-webkit-keyframes on-exit-left {
    from {
        /*opacity:1;*/
        -webkit-transform: translate3d(0,0,0);
        -webkit-filter: brightness(100%);
    }
    to {
        /*opacity:.75;*/
        -webkit-transform: translate3d(-30%,0,0);
        -webkit-filter: brightness(65%);
    }
}

@-webkit-keyframes on-enter-right {
    from {
        /*opacity:.75;*/
        -webkit-transform: translate3d(-30%,0,0);
        -webkit-filter: brightness(65%);
    }
    to {
        /*opacity:1;*/
        -webkit-transform: translate3d(0,0,0);
        -webkit-filter: brightness(100%);
    }
}

@-webkit-keyframes on-exit-right {
    from {
        -webkit-transform: translate3d(0,0,0);
    }
    to {
        -webkit-transform: translate3d(100%,0,0);
    }
}
[data-role="view"] { 
    width:100%; 
    height:100%; 
    position:fixed; 
    text-align:center;
    transform: translate3d(100%,0,0);
    -webkit-transform: translate3d(100%,0,0);
    pointer-events:none;
    -webkit-animation-timing-function: cubic-bezier(0.4,0.6,0.2,1);
    animation-timing-function: cubic-bezier(0.4,0.6,0.2,1);
    animation-duration: 0.425s;
    -webkit-animation-duration: 0.425s;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    overflow:hidden;
    background-color:#FFF;
}
[data-role="view-content"] {
    width:100%;
    height:100%;
    -webkit-overflow-scrolling: touch;
    overflow-y:auto;
}
[data-role="view-content"].lock {
    overflow-y:hidden;
    /*
    -webkit-overflow-scrolling:auto;
    */
}
[data-role="view"].enabled {
    pointer-events:auto;
}
[data-role="view"].on-enter {
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
[data-role="view"].on-enter.child {
    z-index:1;
    animation-name: on-enter-left;
    -webkit-animation-name: on-enter-left;
}
[data-role="view"].on-enter.parent {
    z-index:0;
    animation-name: on-enter-right;
    -webkit-animation-name: on-enter-right;
}
[data-role="view"].on-enter.static {
    z-index:1;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
[data-role="view"].on-exit {
    
}
[data-role="view"].on-exit.static {
    z-index:0;
    transform: translate3d(100%,0,0);
    -webkit-transform: translate3d(100%,0,0);
}
[data-role="view"].on-exit.child {
    z-index:1;
    animation-name: on-exit-right;
    -webkit-animation-name: on-exit-right;
}
[data-role="view"].on-exit.parent {
    z-index:0;
    animation-name: on-exit-left;
    -webkit-animation-name: on-exit-left;
}


@keyframes on-child-enter {
    from {
        transform: scale(0.9);
        opacity:0;
    }
    to {
        transform: scale(1);
        opacity:1;
    }
}
@keyframes on-child-exit {
    from {
        transform: scale(1);
        opacity:1;
    }
    to {
        transform: scale(0.9);
        opacity:0;
    }
}
@-webkit-keyframes on-child-enter {
    from {
        -webkit-transform: scale(0.9);
        opacity:0;
    }
    to {
        -webkit-transform: scale(1);
        opacity:1;
    }
}
@-webkit-keyframes on-child-exit {
    from {
        -webkit-transform: scale(1);
        opacity:1;
    }
    to {
        -webkit-transform: scale(0.9);
        opacity:0;
    }
}
@keyframes on-parent-enter {
    from {
        
    }
    to {
        
    }
}
@keyframes on-parent-exit {
    from {
        
    }
    to {
        
    }
}
@-webkit-keyframes on-parent-enter {
    from {
       
    }
    to {
       
    }
}
@-webkit-keyframes on-parent-exit {
    from {
        
    }
    to {
        
    }
}
.platform-Android [data-role="view"] {
    animation-duration: .275s;
    -webkit-animation-duration: .275s;
}
.platform-Android [data-role="view"].on-enter, .platform-Android [data-role="view"].on-exit, .platform-Android [data-role="view"].enabled {
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
}
.platform-Android [data-role="view"].on-enter.parent {
    z-index:0;
    animation-name: on-parent-enter;
    -webkit-animation-name: on-parent-enter;
}
.platform-Android [data-role="view"].on-enter.child {
    z-index:1;
    animation-name: on-child-enter;
    -webkit-animation-name: on-child-enter;

}
.platform-Android [data-role="view"].on-exit.child {
    z-index:1;
    animation-name: on-child-exit;
    -webkit-animation-name: on-child-exit;
}
.platform-Android [data-role="view"].on-exit.parent {
    z-index:0;
    animation-name: on-parent-exit;
    -webkit-animation-name: on-parent-exit;
}

[data-role="modal"] {
    background-color:rgba(255,255,255,0.9);
    width:100%; 
    height:100%; 
    position:fixed; 
    text-align:center;
    /*opacity:0;*/
    pointer-events:none;
    z-index:3;
    transform: translate3d(0,100%,0);
    -webkit-transform: translate3d(0,100%,0);
    transition:transform 0.475s;
    -webkit-transition:-webkit-transform 0.475s;
    -webkit-transition-timing-function: cubic-bezier(0.4,0.6,0.05,1);
    transition-timing-function: cubic-bezier(0.4,0.6,0.05,1);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    overflow:hidden;
}
[data-role="modal"].enabled {
    pointer-events:auto;
}
[data-role="modal"].on-enter {
    /*opacity:1;*/
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
[data-role="modal"].on-exit {
    /*opacity:0;*/
    transform: translate3d(0,100%,0);
    -webkit-transform: translate3d(0,100%,0);
}
[data-role="modal"].on-enter.static {
    transition:transform;
    -webkit-transition:none;
}
[data-role="close-modal"] {
    z-index:4;
}
[data-role="close-modal"] * {
    pointer-events:none;
}

.platform-Android [data-role="modal"] {
    visibility:none;
    opacity:0;
    transform: translate3d(0,25%,0);
    -webkit-transform: translate3d(0,25%,0);
    transition:opacity 0.180s, transform 0.180s;
    -webkit-transition:opacity 0.180s, transform 0.180s;
    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}
.platform-Android [data-role="modal"].on-enter {
    visibility: visible;
    opacity:1;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}
.platform-Android [data-role="modal"].on-exit {
    visibility: visible;
    opacity:0;
    transform: translate3d(0,25%,0);
    -webkit-transform: translate3d(0,25%,0);
}

/*ELEMENT TRANSITIONS*/
.enter-top {
    opacity:0;
    transform: translate3d(0,-32px,0);
    transition: opacity 0.25s, transform 0.25s;
    -webkit-transform: translate3d(0,-32px,0);
    -webkit-transition: opacity 0.25s, -webkit-transform 0.25s;
}
.enabled .enter-top {
    opacity:1;
    transform: translate3d(0,0px,0);
    transition: opacity 0.25s, transform 0.25s;
    -webkit-transform: translate3d(0,0px,0);
    -webkit-transition: opacity 0.25s, -webkit-transform 0.25s;
}
.enter-bottom {
    opacity:0;
    transform: translate3d(0,32px,0);
    transition: opacity 0.25s, transform 0.25s;
    -webkit-transform: translate3d(0,32px,0);
    -webkit-transition: opacity 0.25s, -webkit-transform 0.25s;
}
.enabled .enter-bottom {
    opacity:1;
    transform: translate3d(0,0px,0);
    transition: opacity 0.25s, transform 0.25s;
    -webkit-transform: translate3d(0,0px,0);
    -webkit-transition: opacity 0.25s, -webkit-transform 0.25s;
}
.exit-bottom {
    opacity: 0;
    transform: translate3d(0,32px,0);
    transition: opacity 0.25s, transform 0.25s;
    -webkit-transform: translate3d(0,32px,0);
    -webkit-transition: opacity 0.25s, -webkit-transform 0.25s;    
}

*[data-role="rodeo-header"] {
    position:fixed;
    display:block;
    width:100%;
    padding:1em;
    background-color:#CCC;
    z-index:2;
    text-align:center;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

*[data-role="rodeo-header-label"] {
    position:absolute;
    width:100%;
    top:0;
    left:0;
    text-align:center;
}

*[data-role="rodeo-footer"] {
    z-index:2;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    padding:1em;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

*[data-role="rodeo-tabs"] [data-navigate].active {
}

*[data-segment] {
    display:none;
}

.rodeo-loading-overlay {
    pointer-events:none;
    opacity:0;
    position:fixed;
    display:table;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;
    color:inherit;
    transition:opacity 0.35s;
    -webkit-transition:opacity 0.35s;
}

.rodeo-loading-overlay .rodeo-loading-overlay-content {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}
.rodeo-loading-overlay.rodeo-loading-overlay-show {
    opacity:1;
}
.rodeo-loading-overlay-icon {
    display:inline-block;
    padding:18px;
    background-color:rgba(0,0,0,0.5);
    border-radius:4px;
}