*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

}

:root {
    --logo-width: 250px;
}

/* ==============================
   LOGO CONTAINER
============================== */

.logo {
    width: var(--logo-width);

    perspective: 1800px;
    perspective-origin: center;
}

.logo-text{

    opacity:0;

}


.hero.loaded .logo-text{

    animation:
    revealText .25s 2.8s cubic-bezier(.16,1,.3,1) forwards;

}

.logo-text img {
    width: 900px;
    height: auto;
    display: block;
   margin-left: 80px;
}

.hero {
    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* FULL SCREEN VIDEO */

.hero-video {
    position: absolute;

    top: 50%;
    left: 50%;
    height: auto;

    object-fit: over;
    
    -webkit-transform:
    translate(-50%, -35%)
    scale(1.75);
    
     transform: translate(-50%, -35%) scale(1.75);

}



/* LOGO ABOVE VIDEO */

.logo-lockup{
    

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:center;


}

.logo-svg {
    width: 100%;
    height: auto;
    margin-left: 100px;
    overflow: visible;
}

.logo,
.logo-svg,
.shape{

    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;

}

/* ==============================
   SVG PIECES
============================== */

.shape{

    transform-box:fill-box;

    -webkit-transform-origin:center center;
    transform-origin:center center;

    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;

    opacity:0;

    will-change:transform,opacity;

}
/* Colours */

.grey {
    fill: #939598;
}

.orange {
    fill: #f7941d;
}

/* ==============================
   ANIMATIONS
============================== */

.piece1,
.piece2,
.piece3,
.piece4{

    opacity:0;

}


.hero.loaded .piece1{

    animation:
    assembleLeft 6s cubic-bezier(.22,1,.36,1) infinite;

}


.hero.loaded .piece2{

    animation:
    assembleRight 6s .35s cubic-bezier(.22,1,.36,1) infinite;

}


.hero.loaded .piece3{

    animation:
    assembleLeft 6s .7s cubic-bezier(.22,1,.36,1) infinite;

}


.hero.loaded .piece4{

    animation:
    assembleRight 6s 1.05s cubic-bezier(.22,1,.36,1) infinite;

}
/* ==============================
   LEFT SIDE ROTATION
============================== */

@keyframes assembleLeft {


0% {

    opacity:0;

    transform:
    translateX(-120px)
    rotateY(-70deg)
    rotateZ(-8deg)
    scale(.85);

}


35% {

    opacity:1;

    transform:
    translateX(0)
    rotateY(0deg)
    rotateZ(0deg)
    scale(1);

}


70% {

    opacity:1;

    transform:
    translateX(0)
    rotateY(0deg)
    rotateZ(0deg)
    scale(1);

}


100% {

    opacity:0;

    transform:
    translateX(-120px)
    rotateY(-70deg)
    rotateZ(-8deg)
    scale(.85);

}

}



/* ==============================
   RIGHT SIDE ROTATION
============================== */

@keyframes assembleRight {


0% {

    opacity:0;

    transform:
    translateX(120px)
    rotateY(70deg)
    rotateZ(8deg)
    scale(.85);

}


35% {

    opacity:1;

    transform:
    translateX(0)
    rotateY(0deg)
    rotateZ(0deg)
    scale(1);

}


70% {

    opacity:1;

    transform:
    translateX(0)
    rotateY(0deg)
    rotateZ(0deg)
    scale(1);

}


100% {

    opacity:0;

    transform:
    translateX(120px)
    rotateY(70deg)
    rotateZ(8deg)
    scale(.85);

}

}

@keyframes revealText {
    0% {
        opacity: 0;

        transform: translate(20px, 5px);
    }

    100% {
        opacity: 1;

        transform: translate(0, 5px);
    }
}