@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=sawp');

* {
    margin : 0;
    padding : 0;
    box-sizing : border-box;
    font-family : 'Poopins', sans-serif;
}

header {
    position : absolute;
    top : 0;
    left : 0;
    width : 100%;
    display : flex;
    justify-content : space-between;
    align-items : center;
    padding : 40px 100px;
    z-index : 1000;
}

header .logo {
    max-width : 120px
}

header .toogle {
    max-width : 60px;
    cursor : pointer;
}

header .logo img,
header .toogle img {
    max-width : 100%;
}

.banner {
    position : absolute;
    width : 100%;
    min-height : 100vh;
    padding : 0 100px;
    background: no-repeat url("../images/bg.jpg");
    background-position : center;
    background-size : cover;
    display : flex;
    justify-content : flex;
    align-items : center
}

.banner .content {
    max-width :  550px;
}

.banner .content h2 {
    text-transform : uppercase;
    font-weight : 400;
    font-size : 2.5em;
    letter-spacing : 0.1em;
    color : #fff;
}

.banner .content h2 span {
    font-weight : 800;
}

.banner .content p {
    font-size : 1.2em;
    font-weight : 300;
    letter-spacing : 0.02em;
    line-height : 1.5em;
    color : #fff;
    margin : 15px 0 35px;
}

.play {
    position : relative;
    display : inline-flex;
    justify-content : flex-start;
    align-items : center;
    color : #fff;
    text-transform : uppercase;
    font-weight : 500;
    text-decoration : none;
    letter-spacing : 2px;
    font-size : 1.2em;
}

.play img {
    margin-right : 10px;
    max-width : 50px;
}

.sci {
    position : absolute;
    top : 50%;
    transform : translateY(-50%);
    right : 20px;
    display : flex;
    justify-content : center;
    align-items : center;
    flex-direction : column;
}

.sci li {
    list-style : none;
}

.sci li a {
    text-decoration : none;
}

.sci li a img {
    filter : invert(1);
    transform : scale(0.6);
}

.slide {
    position : absolute;
    bottom : 50px;
    left : calc(50% - 250px /2);
    width : 250px;
    height : 150px;
    background: no-repeat url("../images/joker.png");
    background-size : cover;
    cursor : pointer;
    animation : animate 25s linear infinite;
}

@keyframes animate {
    0% {
        background-position : top;
    }
    45%,55% {
        background-position : bottom;
    }
}

.trailer {
    position : fixed;
    top : 50%;
    left : 50%;
    transform : translate(-50%, -50%);
    z-index : 10000;
    background : rgba(0,0,0,0.95);
    width : 100%;
    height : 100%;
    display : flex;
    justify-content : center;
    align-items : center;
    visibility : hidden;
    opacity : 0;
}

.trailer.active {
    visibility: visible;
    opacity: 1;
}

.trailer video {
    max-width : 900px;
    outline : none;
}

.trailer .close {
    position : absolute;
    top : 30px;
    right : 30px;
    cursor : pointer;
    filter : invert(1);
    max-width : 32px;
}

@media (max-width: 991px) {
    header {
        padding : 20px 50px;
    }
    header {
        padding : 20px 50px;
    }
    header .logo {
        max-width : 80px;
    }
    header .toggle {
        max-width : 80px;
    }
    .banner {
        padding : 100px 50px;
    }
    .banner .content h2 {
        font-weight : 400;
        font-size : 2em;
        letter-spacing : 0.05em;
    }
    .banner .content p {
        font-size : 1em;
    }
    .slide {
        position : relative;
        bottom : initial;
        left : 0;
        width : 250px;
        height : 150px;
        margin : 20px 0;
    }
    .sci {
        position : absolute;
        top : initial;
        right : initial;
        margin-top : 40px;
        transform : translateY(-50%);
        display : flex;
        justify-content : center;
        align-items : center;
        flex-direction : row;
    }
    .sci li {
        list-style : none;
        margin : 0 5px;
    }
    .trailer video {
        max-width : 90%;
        outline : none; 
    }
}