/*****************************************************
*** Title Page ***
*****************************************************/
.titleText
{
    font-family: "Ailerons";
    color: #fff;
    font-weight: 100;
    font-size: 40px;
}

#titlePage
{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.logo
{
    padding: 0;
    position: absolute;
    top: -20px;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
    background-repeat: no-repeat;
    background-size: contain;
    webkit-transition: all 0.75s cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 0.75s cubic-bezier(0.42, 0, 0.58, 1);
    transform: translate3d(0, 0, 0);
}

@media handheld,screen and (max-width: 575px)
{
    .logo
    {
        width: 200px;
        height: 200px;
        background-image: url("/Resources/images/logo_medium.png");
    }
    
    .titleText { font-size: 0px; }
}

@media handheld,screen and (min-width:576px) and (max-width: 767px)
{
    .logo
    {
        width: 250px;
        height: 250px;
        background-image: url("/Resources/images/logo_medium.png");
    }
    
    .titleText { font-size: 20px; }
}

@media handheld,screen and (min-width:768px) and (max-width: 991px)
{
    .logo
    {
        width: 300px;
        height: 300px;
        background-image: url("/Resources/images/logo_large.png");
    }
    
    .titleText { font-size: 28px; }
}

@media handheld,screen and (min-width:992px) and (max-width: 1199px)
{
    .logo
    {
        width: 335px;
        height: 335px;
        background-image: url("/Resources/images/logo_large.png");
    }
    
    .titleText { font-size: 35px; }
}

@media handheld,screen and (min-width:1200px)
{
    .logo
    {        
        width: 350px;
        height: 350px;
        background-image: url("/Resources/images/logo_large.png");
    }
    
    .titleText { font-size: 40px; }
}


@media handheld,screen and (min-width:1200px) and (min-height:900px)
{
    .logo
    {        
        width: 375px;
        height: 375px;
        background-image: url("/Resources/images/logo_large.png");
    }
}

@media handheld,screen and (min-width:1200px) and (min-height:1000px)
{
    .logo
    {        
        width: 400px;
        height: 400px;
        background-image: url("/Resources/images/logo_large.png");
    }
}

@media handheld,screen and (min-width:1200px) and (min-height:1100px)
{
    .logo
    {        
        width: 450px;
        height: 450px;
        background-image: url("/Resources/images/logo_large.png");
    }
}



/*****************************************************
*** Title Play Button & Text ***
*****************************************************/
#titlePage
{
    opacity: 0;
    
    -webkit-transition: opacity 0.75s ease;
    -moz-transition: opacity 0.75s ease;
    -o-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
}

#titlePage.showing
{
    opacity: 1.0;
    
    -webkit-transition: opacity 1.3s ease;
    -moz-transition: opacity 1.3s ease;
    -o-transition: opacity 1.3s ease;
    transition: opacity 1.3s ease;
}


#titlePage .bottom
{
    position: absolute;
    bottom: 10%;
    width: 100%;
}

.enterButton
{
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 1px;
    font-size: 17px;
    padding: 7px 55px;
    background: rgba(255, 255, 255, 0.1);
    
    border: 1px solid rgba(255, 255, 255, 0.15);
    outline: 1px solid rgba(255, 255, 255, 0.45);
    outline-offset: 5px;
    
    -webkit-transition: background 0.2s ease, outline-color 0.2s ease, outline-offset 0.2s ease;
    -moz-transition: background 0.2s ease, outline-color 0.2s ease, outline-offset 0.2s ease;
    -o-transition: background 0.2s ease, outline-color 0.2s ease, outline-offset 0.2s ease;
    transition: background 0.2s ease, outline-color 0.2s ease, outline-offset 0.2s ease;
}

.enterButton:hover
{
    text-decoration: none;
    color: #fff;
    background: rgba(0, 0, 0, 0.1);
    
    outline: 1px solid rgba(255, 255, 255, 0.7);
    outline-offset: 0px;
}

.enterButton:active
{
    text-decoration: none;
    color: #fff;
    
    outline: 1px solid rgba(255, 255, 255, 0.7);
    outline-offset: 0px;
}

.enterButton:focus
{
    text-decoration: none;
    color: #fff;
    
    outline: 1px solid rgba(255, 255, 255, 0.7);
    outline-offset: 0px;
}


.enterWide
{
    font-size: 14px;
    letter-spacing: 3px;
    word-spacing: 5px;
}


.dividerLarge
{
    width: 100%;
        
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+98&0+33,0.4+50,0+66 */
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 33%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 98%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 33%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 66%,rgba(255,255,255,0) 98%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 33%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 66%,rgba(255,255,255,0) 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    
    height: 1px;
}

.dividerSmall
{
    width: 50%;
    margin: auto;
        
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+98&0+33,0.4+50,0+66 */
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 33%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 98%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 33%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 66%,rgba(255,255,255,0) 98%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 33%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 66%,rgba(255,255,255,0) 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    
    height: 1px;
}