/*
 * The MIT License (MIT)
 *
 * Copyright (c) 2013 Adobe System Incorporated
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:

 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
 #overview{
    top: 55px;
    z-index: 10;

    @include cache;

    .bg-container {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        @include cache;

        &.current {
            @include transform(scale3d(1.15,1.15,1) rotateZ(3deg));
            opacity: 0;
            &.show {
                @include transformTransition(1s ease-out, opacity 1s linear);
                @include cache;
                opacity: 1;
            }
        }
    }

}


.overview-wrapper {
    display: none;

    position: relative;
    width: 70%;
    max-width: 600px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;

    text-align: center;
    overflow: visible;



    .logo {
        display: inline-block;
        width: 161px;
        height: 64px;

        @include ui-asset(0, 136);
    }

    .title {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;

        font-size: 36px;
        font-style: italic;
        color: #d14543;

        text-shadow: 0 0 5px rgba(0,0,0,.8);
    }

    .description {
        font-size: 16px;
        line-height: 22px;
        padding-bottom: 80px;
        p {
            margin-bottom: 20px;
        }

        text-shadow: 0 0 5px rgba(0,0,0,.8);
    }

    &.appear {
        display: table;
        .logo-text {
            @include transform(perspective(500px) translate3d(0, 50px, 60px) rotateX(20deg));
        }
        .title {
            @include transform(perspective(500px) translate3d(0, 75px, 60px) rotateX(20deg));
        }
        .description {
            @include transform(perspective(500px) translate3d(0, 100px, 60px) rotateX(20deg));
        }
        .logo-text, .title, .description {
            opacity: 0;
        }
    }
    &.show{
        .logo-text {
            @include transformTransition(.3s ease-out, opacity .3s linear);
        }
        .title {
            @include transformTransition(.4s ease-out, opacity .4s linear);
        }
        .description {
            @include transformTransition(.5s ease-out, opacity .5s linear);
        }
        .logo-text, .title, .description {
            opacity: 1;
            @include transform(perspective(500px) translate3d(0, 0, 0));
        }
    }
    &.hide {
        .logo-text {
            @include transformTransition(.3s ease-in, opacity .3s linear);
            @include transform(perspective(500px) translate3d(0, -100px, 60px) rotateX(-20deg));
        }
        .title {
            @include transformTransition(.4s ease-in, opacity .4s linear);
            @include transform(perspective(500px) translate3d(0, -75px, 60px) rotateX(-20deg));
        }
        .description {
            @include transformTransition(.5s ease-in, opacity .5s linear);
            @include transform(perspective(500px) translate3d(0, -50px, 60px) rotateX(-20deg));
        }
        .logo-text, .title, .description {
            opacity: 0;
        }
    }
}



.overview-bottom {
    display: none;

    position: absolute;
    bottom: 0;
    width: 100%;
    height: 130px;

    text-align: center;

    .line {
        position: absolute;
        top: 0;
        left: 50%;
        width: 100px;
        height: 2px;
        margin-left: -50px;
        background-color: #7e6f85;
    }

    .item {
        display: inline-block;
        position: relative;
        width: 120px;
        height: 120px;


        .icon {
            position: relative;
            margin-left: auto;
            margin-right: auto;
            margin-top: 30px;
            margin-bottom: 13px;
        }

        .text {
            font-family: 'league-gothic-condensed', 'Arial Narrow', sans-serif;
            text-transform: uppercase;
            font-size: 22px;
            letter-spacing: 1px;
            color: #e7e5e1;
        }
    }

    .favorites {
        .icon {
            width: 41px;
            height: 36px;

            @include ui-asset(50, 30);
        }

        .count {
            position: absolute;
            left: 28px;
            top: -10px;
            width: 22px;
            height: 22px;
            font-weight: 700;
            font-size: 12px;
            font-style: italic;
            line-height: 22px;
            color: #d14443;

            @include ui-asset(100, 0);
        }
    }

    .schedule {
        .icon {
            width: 37px;
            height: 37px;

            @include ui-asset(100, 30);
        }
    }


    @include transition(opacity .5s linear);
    &.appear {
        display: table;
        opacity: 0;
    }
    &.show{
        opacity: 1;
    }
    &.hide {
        opacity: 0;
    }

}
