/*
    
    IMPORTANT NOTE:
    
    For demo purpose only.

    Except the Sin City Promotional Material and the downloadable Vegas plugin,
    any reproduction, even partial, of this design is strictly prohibited 
    without previous written authorisation from the author.
 
 */

.vegas-timer {
    z-index: 500 !important;
}

.vegas-timer-progress {
    background: #F24535;
}

.vegas-overlay {
    opacity: .5;
}

*, *:before, *:after {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    background: #000;
    color: #fff;
    font: 1em Arial, sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

.banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #000;
    color: #eee;
    text-align: center;
    text-transform: uppercase;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    font: 700 14px "PT Sans Narrow";
    z-index: 100;
}
    .banner a {
        color: #F24535;
    }

.container {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1280px;
}

.logo {
    width: 500px;
    position: absolute;
    left: 2.5%;
    bottom: 8%;
    transition: 1s all;
}
    .logo.collapsed {
        opacity: 0;
        transform: rotateX(90deg);
        transform-style: preserve3d;
    }

.characters {
    position: absolute;
    bottom: 8%;
    right: 5%;
    width: 580px;
    height: 500px;
    transition: 2.5s;
}
    .animated .characters {
        transform: rotate(5deg);
    }

.characters-list {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 280px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #000;
    font: 700 26px "PT Sans Narrow";
    text-align: right;
    line-height: 1.7;
}
    .characters-list li {
        opacity: 0;
        transition: 0.5s;
        transform: translateX(20px);
        margin: 0;
    }

    .characters-list li a {
        padding: 5px 20px;
    }

    .animated .characters-list li {
        opacity: 1;
        transform: translateX(0);
    }

    .animated .characters-list li:nth-child(1) {
        transition-delay: 0.2s;
    }
    .animated .characters-list li:nth-child(2) {
        transition-delay: 0.4s;
    }
    .animated .characters-list li:nth-child(3) {
        transition-delay: 0.6s;
    }
    .animated .characters-list li:nth-child(4) {
        transition-delay: 0.8s;
    }
    .animated .characters-list li:nth-child(5) {
        transition-delay: 1.0s;
    }
    .animated .characters-list li:nth-child(6) {
        transition-delay: 1.2s;
    }
    .animated .characters-list li:nth-child(7) {
        transition-delay: 1.4s;
    }
    .animated .characters-list li:nth-child(8) {
        transition-delay: 1.6s;
    }
    .animated .characters-list li:nth-child(9) {
        transition-delay: 1.8s;
    }
    .animated .characters-list li:nth-child(10) {
        transition-delay: 2s;
    }

    .characters-list .active a {
        color: #F24535;
    }

.characters-poster {
    position: absolute !important;
    bottom: 0;
    right: 0;
    border: 5px solid #fff;
    box-shadow: 0 5px 30px #000;
    width: 300px;
    height: 444px;
    background: #000;
    cursor: pointer;
}

.characters-label {
    position: absolute;
    right: -20px;
    bottom: 5px;
    width: 125px;
    text-align: center;
    background: #fff;
    color: #000;
    text-transform: uppercase;
    border: 2px solid #000;
    padding: 5px;
    font: bold 18px "Marker Felt", "Comic Sans MS", Arial, sans-serif;
    display: inline-block;
    box-shadow: 0 5px 30px #000;
    transition: .2s;

    opacity: 0;
    transform: rotateX(90deg) rotateZ(-15deg);
}
    .characters-label.animated {
        opacity: 1;
        transform: rotateX(0deg) rotateZ(-15deg);
    }

.orientation {
    background: rgba(0,0,0,.8);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 600;
    pointer-events: none;
    opacity: 0;
    animation-fill-mode: forwards;
}
    .orientation img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        height: 300px;
        margin-left: -200px;
        margin-top: -200px;
        height: auto;
        transform: rotate(45deg);
        animation-fill-mode: both;
        animation-iteration-count: 3;
    }

@media only screen and (orientation: portrait) and (max-device-width: 768px) {
    .orientation {
        animation: disapear 6s;
    }
    .orientation img {
        animation: rotation ease-in-out 2s infinite;
    }
}

@keyframes rotation {
    0% {
        opacity: 0;
        transform: rotate(45deg)
    }
    95% {
        opacity: 1;
        transform: rotate(-45deg);
    }
    100% {
        opacity: 0;
        transform: rotate(45deg)
    }
}

@keyframes disapear {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#adpacks,
#adblocked {
    position: fixed;
    top: 15px;
    left: 15px;
    padding: 8px 10px;
    width: 150px;
    color: #fff;
    background: #000;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    border: 1px solid #444;
    box-shadow: 0 0 20px #000;
    z-index: 200;
}
    .adpacks-img img {
        border: 1px solid #444;
        margin-bottom: 8px;
    }
    .adpacks-poweredby {
        color: #aaa;
        display: block;
        font-size: 10px;
        text-transform: capitalize;
        margin-top: 5px;
    }