@charset "utf-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Lato:400,900italic,900,700italic,400italic,700,300italic,300,100italic,100&subset=latin,latin-ext);

body {
    font-family: 'Lato', sans-serif;
    background: #fff;
    font-weight: 600;
    color: #999;
}

a:focus {
    outline: none;
}

.container {
    max-width: 1170px;
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 26px;
}

h3 {
    font-size: 20px;
}

h4 {
    font-size: 18px;
}

input {
    margin: 10px 0;
}

.navbar-brand {
    padding: 0px;
}

/*---------------------Header---------------------*/

body {
    margin: 0;
    background-size: 120%;
    background-position: center;
    font-family: "Barlow Condensed", sans-serif;
    -webkit-animation: tighten-vinette ease-out 1800ms forwards;
    animation: tighten-vinette ease-out 1800ms forwards;
    background: rgb(109,179,242);
    background: -moz-linear-gradient(top,  rgba(109,179,242,1) 0%, rgba(30,105,222,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(109,179,242,1) 0%,rgba(30,105,222,1) 100%);
    background: linear-gradient(to bottom,  rgba(109,179,242,1) 0%,rgba(30,105,222,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );

}

.images {
    pointer-events: none;
    height: 100vh;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
    opacity: 0.6;
    z-index: 20;
    background-size: cover;
    background-position: center;
    background-repeat: none;
    background-image: url("../img/12.jpg");
}

.wrapper {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    cursor: pointer;
    text-align: center;
}

.logo:hover .restart {
    opacity: 0.8;
}

.restart {
    color: #fff;
    margin-top: 20px;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: -0.08rem;
    transition: opacity 150ms linear;
}

.marvel,
.studios {
    position: relative;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.2rem;
    font-size: 5rem;
    margin: 0.05rem 0.05rem 0.5rem;
    padding: 0 0.4rem;
    display: inline-block;
}

.studios {
    font-weight: 500;
    letter-spacing: -0.3rem;
    transform: translateX(-95px);
}

.marvel {
    z-index: 10;
    font-weight: 800;
    transform: translateX(95px);
}

.marvel:before {
    z-index: -10;
    content: "";
    display: block;
/*    background-color: #e12835;*/
/*    border: solid rgba(255, 255, 255, 0.2) 1px;*/
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.studios:after,
.studios:before {
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    background-color: #fff;
    display: block;
    left: 0.4rem;
    right: 0.4rem;
}

.studios:before {
    top: 0;
}

.studios:after {
    bottom: 0;
}

.wrapper.run-animation {
    -webkit-animation: shrink ease-out 4800ms forwards 600ms;
    animation: shrink ease-out 4800ms forwards 600ms;
}

.wrapper.run-animation .marvel {
    transform: translateX(95px);
    -webkit-animation: slide-out-X 750ms ease forwards;
    animation: slide-out-X 750ms ease forwards;
}

.wrapper.run-animation .studios {
    transform: translateX(-95px);
    color: transparent;
    -webkit-animation: slide-out-X 750ms ease forwards, show-text 300ms linear forwards 1500ms;
    animation: slide-out-X 750ms ease forwards, show-text 300ms linear forwards 1500ms;
}

.wrapper.run-animation .studios:before {
    transform: translateY(2.9rem);
    -webkit-animation: slide-out-Y 300ms ease forwards 750ms;
    animation: slide-out-Y 300ms ease forwards 750ms;
}

.wrapper.run-animation .studios:after {
    transform: translateY(-2.9rem);
    -webkit-animation: slide-out-Y 300ms ease forwards 750ms;
    animation: slide-out-Y 300ms ease forwards 750ms;
}

.wrapper.run-animation .restart {
    opacity: 0;
    -webkit-animation: fade-down 1200ms ease 3600ms forwards;
    animation: fade-down 1200ms ease 3600ms forwards;
}

.wrapper.run-animation ~ .images {
    -webkit-animation: flicker-images 1500ms 2 steps(1, end), fade-out 4500ms forwards;
    animation: flicker-images 1500ms 2 steps(1, end), fade-out 4500ms forwards;
}

@-webkit-keyframes slide-out-X {
    100% {
        transform: translateX(0);
    }
}

@keyframes slide-out-X {
    100% {
        transform: translateX(0);
    }
}

@-webkit-keyframes slide-out-Y {
    100% {
        transform: translateY(0);
    }
}

@keyframes slide-out-Y {
    100% {
        transform: translateY(0);
    }
}

@-webkit-keyframes show-text {
    100% {
        color: #fff;
    }
}

@keyframes show-text {
    100% {
        color: #fff;
    }
}

@-webkit-keyframes shrink {
    100% {
        transform: scale(0.8);
    }
}

@keyframes shrink {
    100% {
        transform: scale(0.8);
    }
}

@-webkit-keyframes tighten-vinette {
    100% {
        background-size: 120%;
    }
}

@keyframes tighten-vinette {
    100% {
        background-size: 120%;
    }
}

@-webkit-keyframes fade-down {
    0% {
        transform: translateY(-2rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 0.5;
    }
}

@keyframes fade-down {
    0% {
        transform: translateY(-2rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 0.5;
    }
}

@-webkit-keyframes fade-out {
    100% {
        opacity: 0;
    }
}

@keyframes fade-out {
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes flicker-images {
    0% {
        background-image: url("../img/01.jpg");
    }

    10% {
        background-image: url("../img/02.jpg");
    }

    20% {
        background-image: url("../img/03.jpg");
    }

    30% {
        background-image: url("../img/04.jpg");
    }

    40% {
        background-image: url("../img/05.jpg");
    }

    50% {
        background-image: url("../img/06.jpg");
    }

    60% {
        background-image: url("../img/07.jpg");
    }

    70% {
        background-image: url("../img/08.jpg");
    }

    80% {
        background-image: url("../img/09.jpg");
    }

    90% {
        background-image: url("../img/10.jpg");
    }

    100% {
        background-image: url("../img/11.jpg");
    }
}

@keyframes flicker-images {
    0% {
        background-image: url("../img/01.jpg");
    }

    10% {
        background-image: url("../img/02.jpg");
    }

    20% {
        background-image: url("../img/03.jpg");
    }

    30% {
        background-image: url("../img/04.jpg");
    }

    40% {
        background-image: url("../img/05.jpg");
    }

    50% {
        background-image: url("../img/06.jpg");
    }

    60% {
        background-image: url("../img/07.jpg");
    }

    70% {
        background-image: url("../img/08.jpg");
    }

    80% {
        background-image: url("../img/09.jpg");
    }

    90% {
        background-image: url("../img/10.jpg");
    }

    100% {
        background-image: url("../img/11.jpg");
    }
}

/*---------------------Header-Nav-CSS-------------------*/





.countdown-container {
	display: flex;
    justify-content: center;
}

.time {
	display: flex;
	font-size: 1.2em;
	flex-direction: column;
	margin: 0 15px;
}
.time h1 {
	margin-bottom: 0;
}
.time small {
    color: #ccc;
    text-transform: uppercase;
    font-size: 70%;
}


.demo_options {
    background: #fff;
    padding: 10px;
    display: inline-block;
    margin: 10px;
    position: absolute;
    top: 0;
    left: 0;
}
.demo_options a {
    color: #000;
    margin-right: 10px;
    text-decoration: none;
}
.demo_options a:last-child{
    margin: 0;
}
.demo_options a:hover{
    color: #ff0000;
}
/*---------------------Slider-CSS--------------------*/










/*---------------------Middle-Contain--------------------*/












/*---------------------Footer---------------------*/


















/*------------------------------media------------------------------------*/
@media (min-width:991px) and (max-width: 1200px) {}

@media (min-width:767px) and (max-width: 991px) {}

@media (max-width: 767px) {}

@media (max-width: 500px) {}

@media (max-width: 360px) {}