@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
*{font-family:'Open Sans', sans-serif;}

/*
    
    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 'Open Sans', sans-serif;
}

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

.banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: url("../img/header-bg.png") top left repeat-x;
    color: #363636;
    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 "Open Sans";
    z-index: 100;
}
.banner a {
    color: #F24535;
}

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

.logo {
    width:740px;
    bottom: 0;
    transition: 1s all;
    background: rgba(255,255,255,0.8);
    padding:10px 10px 0px 10px;
    font-size: 14px;
    font-weight: 400;
    margin-top: 100px;
    color: #303030;
    text-align: left;
}
.logo h2{
	margin: 8px 0px;
	color: #ce0021;
}
.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;
}

.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: 6px;
    color: #000;
    background: #fff;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    border: 1px solid #444;
    box-shadow: 0 0 6px #363636;
    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;
}