/* General Style */
@font-face {
    font-family: 'Forza';
    src: url('font/Forza-Medium.eot');
    src: local('Forza Medium'), local('Forza-Medium'),
        url('font/Forza-Medium.eot?#iefix') format('embedded-opentype'),
        url('font/Forza-Medium.woff2') format('woff2'),
        url('font/Forza-Medium.woff') format('woff'),
        url('font/Forza-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
html{overflow: hidden;}
body {
    margin: 0px;
    padding: 0px;
    background: #383838;
    font-family: 'Forza';
    color: #fff;
    font-size: 21px;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 500;
    overflow: hidden;
}
img {
    max-width: 100%;
    height: auto;
}
/* Selection */
::selection {
    background-color: #000000;
    color: #fff;
}
::-moz-selection {
    background-color: #000000;
    color: #fff;
}
::-webkit-selection {
    background-color: #000000;
    color: #fff;
}
*, ::after, ::before {
    box-sizing: border-box;
}
b,
strong {
    font-weight: 700;
}
a,
a:visited,
a:active {
    color: #000000;
}
a:hover,
a:focus {
    text-decoration: none;
    color: #000000;
    outline: 0;
}
h1 {
    font-size: 72px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 15px 0;
}
p{
    margin: 0 0 20px 0;
}
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    position: relative;
    z-index: 2;
}
.comingsoon {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: end;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.ft_shape1::before {
    content: '';
    clip-path: polygon(0 94%, 100% 56%, 100% 100%, 0% 100%);
    background: linear-gradient(170deg, #1f1f1f 70%, #303030 77%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	animation: clip-path 2s 0s;
    z-index: 2;
}
@keyframes clip-path {
    0% {
        clip-path: polygon(0 94%, 100% 100%, 100% 100%, 0% 100%);
        opacity: 0;
    }
    100% {
        clip-path: polygon(0 94%, 100% 56%, 100% 100%, 0% 100%);
        opacity: 1;
    }
}
.ft_shape1::after {
    content: '';
    clip-path: polygon(0 98%, 100% 72%, 100% 100%, 0% 100%);
    background: linear-gradient(172deg, #000 70%,#303030 90%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	animation: clip-path2 2s 0s;
    z-index: 3;
}
@keyframes clip-path2 {
    0% {
        clip-path: polygon(0 98%, 100% 100%, 100% 100%, 0% 100%);
        opacity: 0;
    }
    100% {
        clip-path: polygon(0 98%, 100% 72%, 100% 100%, 0% 100%);
        opacity: 1;
    }
}
.ft_shape2::before {
    content: '';
    clip-path: polygon(0 92%, 100% 30%, 100% 100%, 0% 100%);
    background: #2a2a2a;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	animation: clip-path2-2 2s 0s;
    z-index: 1;
}
@keyframes clip-path2-2 {
    0% {
        clip-path: polygon(0 92%, 100% 100%, 100% 100%, 0% 100%);
        opacity: 0;
    }
    100% {
        clip-path: polygon(0 92%, 100% 30%, 100% 100%, 0% 100%);
        opacity: 1;
    }
}
.topleftshape {
    clip-path: polygon(0 0, 0 44%, 98% 0);
    background-color: #2a2a2a;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	animation: clip-path3 2s 0s;
}
@keyframes clip-path3 {
    0% {
        clip-path: polygon(0 0, 0 0%, 98% 0);
        opacity: 0;
    }
    100% {
        clip-path: polygon(0 0, 0 44%, 98% 0);
        opacity: 1;
    }
}
.main_logo{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 52%;
}
.main_logo img{
    animation: gelatine 10s infinite;
}
@keyframes gelatine {
    0% { 
        transform: translate(-100%,70%); 
        opacity: 0;
    }
    15%{
        transform: translate(-100%,70%); 
        opacity: 0;
    }
    20% { 
        transform: translate(-1%, -2%); 
        opacity: 0.5;
    }
    21% { 
        transform: translate(0, 0); 
        opacity: 1;
    }
    22% { 
        transform: translate(-1%, -2%); 
        opacity: 1;
    }
    23% { 
        transform: translate(0, 0); 
        opacity: 1;
    }
    95% { 
        transform: translate(0, 0); 
        opacity: 1;
    }
    100% { 
        transform: translate(100%,-70%); 
        opacity: 0;
    }
}
[class*="logo_shape"] img,
.main_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
[class*="logo_shape"]{
    position: absolute;
    top: 42%;
    left: 22%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 110px;
}
.logo_shape2 {
    top: 42%;
    left: 85%;
    width: 180px;
}
.logo_shape3 {
    top: 68%;
    left: 64%;
    width: 90px;
}
.logo_shape1 img {
	animation: zoom-in-zoom-out 5s 3s linear infinite backwards;
}
.logo_shape2 img {
	animation: zoom-in-zoom-out 8s 2s linear infinite backwards;
}
.logo_shape3 img {
	animation: zoom-in-zoom-out 7s 4s linear infinite backwards;
}
@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(0.2, 0.2);
        filter: blur(10px);
        opacity: 0;
    }
    90% {
        transform: scale(0.8, 0.8);
        filter: blur(0px);
        opacity: 1;
    }
    100% {
        transform: scale(1, 1);
        filter: blur(0px);
        opacity: 0;
    }
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding-bottom: 25px;
    width: 100%;
    text-align: center;
}

@media(max-width:1600px){
    .topleftshape {
        clip-path: polygon(0 0, 0 34%, 98% 0);
    }
    @keyframes clip-path3 {
        0% {
            clip-path: polygon(0 0, 0 0%, 98% 0);
            opacity: 0;
        }
        100% {
            clip-path: polygon(0 0, 0 34%, 98% 0);
            opacity: 1;
        }
    }
    .logo_shape1 {
        top: 38%;
        left: 20%;
        width: 80px;
    }
    .logo_shape2 {
        width: 130px;
    }
    .logo_shape3 {
        top: 74%;
        left: 64%;
        width: 70px;
    }
}
@media(max-width:1199px){
    body {
        font-size: 18px;
    }
    .main_logo {
        width: 64%;
        top: 44%;
    }
    .logo_shape1 {
        left: 18%;
    }
    .logo_shape2 {
        width: 110px;
        top: 44%;
        left: 88%;
    }
    .topleftshape {
        clip-path: polygon(0 0, 0 30%, 100% 0);
    }
    @keyframes clip-path3 {
        0% {
            clip-path: polygon(0 0, 0 0%, 100% 0);
            opacity: 0;
        }
        100% {
            clip-path: polygon(0 0, 0 30%, 100% 0);
            opacity: 1;
        }
    }

    .ft_shape1::before {
        clip-path: polygon(0 96%, 100% 62%, 100% 100%, 0% 100%);
        background: linear-gradient(167deg, #1f1f1f 72%,#303030 80%);
    }
    @keyframes clip-path {
        0% {
            clip-path: polygon(0 96%, 100% 100%, 100% 100%, 0% 100%);
            opacity: 0;
        }
        100% {
            clip-path: polygon(0 96%, 100% 62%, 100% 100%, 0% 100%);
            opacity: 1;
        }
    }

    .ft_shape1::after {
        clip-path: polygon(0 99%, 100% 74%, 100% 100%, 0% 100%);
        background: linear-gradient(170deg, #000 70%,#303030 90%);
    }
    @keyframes clip-path2 {
        0% {
            clip-path: polygon(0 99%, 100% 100%, 100% 100%, 0% 100%);
            opacity: 0;
        }
        100% {
            clip-path: polygon(0 99%, 100% 74%, 100% 100%, 0% 100%);
            opacity: 1;
        }
    }
    
    .ft_shape2::before {
        clip-path: polygon(0 94%, 100% 38%, 100% 100%, 0% 100%);
    }
    @keyframes clip-path2-2 {
        0% {
            clip-path: polygon(0 94%, 100% 100%, 100% 100%, 0% 100%);
            opacity: 0;
        }
        100% {
            clip-path: polygon(0 94%, 100% 38%, 100% 100%, 0% 100%);
            opacity: 1;
        }
    }

    footer {
        padding-bottom: 10px;
    }
}
@media(max-width:991px){
    .main_logo {
        width: 80%;
    }
    .logo_shape1 {
        left: 14%;
    }
    .logo_shape2 {
        top: 50%;
        left: 90%;
    }
    .logo_shape3 {
        top: 75%;
        left: 67%;
    }
    .topleftshape {
        clip-path: polygon(0 0, 0 24%, 100% 0);
        width: 70%;
    }
    @keyframes clip-path3 {
        0% {
            clip-path: polygon(0 0, 0 0%, 100% 0);
            opacity: 0;
        }
        100% {
            clip-path: polygon(0 0, 0 24%, 100% 0);
            opacity: 1;
        }
    }

    .ft_shape1::before {
        clip-path: polygon(0 96%, 100% 65%, 100% 100%, 0% 100%);
        background: linear-gradient(167deg, #1f1f1f 76%,#303030 90%);
    }
    @keyframes clip-path {
        0% {
            clip-path: polygon(0 96%, 100% 100%, 100% 100%, 0% 100%);
            opacity: 0;
        }
        100% {
            clip-path: polygon(0 96%, 100% 65%, 100% 100%, 0% 100%);
            opacity: 1;
        }
    }
    
    .ft_shape1::after {
        clip-path: polygon(0 99%, 100% 80%, 100% 100%, 0% 100%);
        background: linear-gradient(169deg, #000 80%,#303030 92%);
    }
    @keyframes clip-path2 {
        0% {
            clip-path: polygon(0 99%, 100% 100%, 100% 100%, 0% 100%);
            opacity: 0;
        }
        100% {
            clip-path: polygon(0 99%, 100% 80%, 100% 100%, 0% 100%);
            opacity: 1;
        }
    }

    .ft_shape2::before {
        clip-path: polygon(0 94%, 100% 45%, 100% 100%, 0% 100%);
    }
    @keyframes clip-path2-2 {
        0% {
            clip-path: polygon(0 94%, 100% 100%, 100% 100%, 0% 100%);
            opacity: 0;
        }
        100% {
            clip-path: polygon(0 94%, 100% 45%, 100% 100%, 0% 100%);
            opacity: 1;
        }
    }
}
@media(max-width:575px){
    body {
        font-size: 16px;
    }
    .main_logo {
        width: 90%;
    }
    .logo_shape1 {
        width: 80px;
        top: 32%;
        left: 12%;
    }
    .logo_shape2 {
        width: 100px;
        top: 60%;
        left: 85%;
    }
    .logo_shape3 {
        width: 65px;
        top: 76%;
        left: 62%;
    }
    .topleftshape {
        width: 90%;
    }
    footer {
        padding-bottom: 0;
    }
    footer p {
        margin-bottom: 10px;
    }
    .ft_shape1::before {
        background: linear-gradient(162deg, #1f1f1f 77%,#303030 90%);
        clip-path: polygon(0 92%, 100% 67%, 100% 100%, 0% 100%);
    }
    @keyframes clip-path {
        0% {
            clip-path: polygon(0 92%, 100% 100%, 100% 100%, 0% 100%);
            opacity: 0;
        }
        100% {
            clip-path: polygon(0 92%, 100% 67%, 100% 100%, 0% 100%);
            opacity: 1;
        }
    }
    .ft_shape1::after {
        background: linear-gradient(165deg, #000 80%,#303030 92%);
        clip-path: polygon(0 95%, 100% 80%, 100% 100%, 0% 100%);   
    }
    @keyframes clip-path2 {
        0% {
            clip-path: polygon(0 95%, 100% 100%, 100% 100%, 0% 100%);
            opacity: 0;
        }
        100% {
            clip-path: polygon(0 95%, 100% 80%, 100% 100%, 0% 100%);   
            opacity: 1;
        }
    }
    .ft_shape2::before {
        clip-path: polygon(0 88%, 100% 55%, 100% 100%, 0% 100%);
    }
    @keyframes clip-path2-2 {
        0% {
            clip-path: polygon(0 88%, 100% 100%, 100% 100%, 0% 100%);
            opacity: 0;
        }
        100% {
            clip-path: polygon(0 88%, 100% 55%, 100% 100%, 0% 100%);
            opacity: 1;
        }
    }
}