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

*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'poppins', 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:140px;
}

header .toggle{
    max-width: 60px;
    cursor: pointer;
}
header .logo img,
header .toggle img
{
    max-width: 100%;
}
.banner{
    position: relative;
    width:100%;
    min-height: 100vh;
    padding: 0 100px;
    background: url(../img/AI.jpg);
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

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

.banner .content h2
{
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.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);  /* For change color balck to white */
    transform: scale(0.6);
}

.slide
{
    position: absolute;
    bottom: 50px;
    left: calc(50% - 250px / 2);
    width: 250px;
    height:150px;
    background: url(../img/thumbnail.jpg);
    background-size: cover;
    cursor: pointer;
    animation: animate 25s linear infinite;

}

@keyframes animate
{
    0%,100%
    {
        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 5px;
        
    }
    header{
        
        padding: 20px 5px;
        
    }
    header .logo
    {
        
     max-width: 80px;        
    }
    
    header .toggle
    {
        max-width: 40px;        

    }
    .banner
    {
        padding: 100px 50px;
    }
    .banner .content h2
    {
        font-weight: 400;
        font-weight: 2em;
        letter-spacing: 0.05em;
        color:#fff;
    }
    .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;
    }
}