@media screen and (orientation: portrait) {
    .gameWrapperDesktop {
        visibility: collapse;
        display: none;
        opacity: 0;
    }
}
@media screen and (orientation: landscape) {
    .gameWrapperMobile {
        visibility: collapse;
        display: none;
        opacity: 0;
    }
}


@-webkit-keyframes logoShow {
    0% { transform: translateY(5vh); opacity: 0;}
    25% { transform: translateY(0px); opacity: 1;}
    50% { transform: translateY(0px); opacity: 1;}
    65% { transform: translateY(-3vh); opacity: 0;}
    75% { transform: translateY(-42vh); opacity: 0;}
    80% { opacity: 0;}
    100% { transform: translateY(-46vh); opacity: 1;}
}
@keyframes logoShow {
    0% { transform: translateY(5vh); opacity: 0;}
    25% { transform: translateY(0px); opacity: 1;}
    50% { transform: translateY(0px); opacity: 1;}
    65% { transform: translateY(-3vh); opacity: 0;}
    75% { transform: translateY(-42vh); opacity: 0;}
    80% { opacity: 0;}
    100% { transform: translateY(-46vh); opacity: 1;}
}


@-webkit-keyframes showFromTop {
    0% { transform: translateY(-10vh); opacity: 0;}
    100% { transform: translateY(0px); opacity: 0.7;}
}
@keyframes showFromTop {
    0% { transform: translateY(-10vh); opacity: 0;}
    100% { transform: translateY(0px); opacity: 0.7;}
}


@-webkit-keyframes polygonLeftReveal {
    0% { clip-path: polygon(39.5% 0, 39.5% 0, 59.5% 100%, 59.5% 100%);}
    100% { clip-path: polygon(-20% 0, 39.5% 0, 59.5% 100%, 0 100%);}
}
@keyframes polygonLeftReveal {
    0% { clip-path: polygon(39.5% 0, 39.5% 0, 59.5% 100%, 59.5% 100%);}
    100% { clip-path: polygon(-20% 0, 39.5% 0, 59.5% 100%, 0 100%);}
}


@-webkit-keyframes polygonRightReveal {
    0% { clip-path: polygon(40.5% 0%, 40.5% 0%, 60.5% 100%, 60.5% 100%);}
    100% { clip-path: polygon(40.5% 0%, 100% 0%, 120.5% 100%, 60.5% 100%);}
}
@keyframes polygonRightReveal {
    0% { clip-path: polygon(40.5% 0%, 40.5% 0%, 60.5% 100%, 60.5% 100%);}
    100% { clip-path: polygon(40.5% 0%, 100% 0%, 120.5% 100%, 60.5% 100%);}
}


@-webkit-keyframes polygonTopReveal {
    0% { clip-path: polygon(0 39.5%, 100% 59.5%, 100% 59.5%, 0 39.5%);}
    100% { clip-path:  polygon(0 -20.5%, 100% 0%, 100% 59.5%, 0 39.5%);}
}
@keyframes polygonTopReveal {
    0% { clip-path: polygon(0 39.5%, 100% 59.5%, 100% 59.5%, 0 39.5%);}
    100% { clip-path:  polygon(0 -20.5%, 100% 0%, 100% 59.5%, 0 39.5%);}
}


@-webkit-@keyframes polygonBottomReveal {
    0% { clip-path:  polygon(0 40.5%, 100% 59.5%, 100% 59.5%, 0 40.5%);}
    100% { clip-path: polygon(0 40.5%, 100% 59.5%, 100% 120.5%, 0 100%);}
}
@keyframes polygonBottomReveal {
    0% { clip-path:  polygon(0 40.5%, 100% 59.5%, 100% 59.5%, 0 40.5%);}
    100% { clip-path: polygon(0 40.5%, 100% 59.5%, 100% 120.5%, 0 100%);}
}

.corpLogo{
    animation-name: logoShow;
    animation-duration: 4s;
    animation-fill-mode: both;
}


.gameWrapperDesktop{
    display: block;
    position: absolute;
    overflow: hidden;
    top: 10vh;
    width: 100vw;
    height: 80vh;
}

.gameWrapperMobile{
    display: block;
    position: absolute;
    overflow: hidden;
    top: 11vh;
    width: 100vw;
    height: 80vh;
}

.polygonLeft{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 39.5% 0, 59.5% 100%, 0 100%);
    
    animation-name: polygonLeftReveal;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
    
}

.polygonLeft{
    transition: clip-path 1s, transform .8s .1s ease-in-out, opacity .8s .1s ease-in-out, background 1.8s ease-in-out, visibility 1s;
}

.polygonRight{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(40.5% 0%, 100% 0%, 100% 100%, 60.5% 100%);
    
    animation-name:polygonRightReveal;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
}

.polygonRight{
    transition: clip-path 1s, transform .8s .1s ease-in-out, opacity .8s .1s ease-in-out, background 1.8s ease-in-out, visibility 1s;
}

.dets{
    transition: visibility 1s;
}


.polygonTop{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 59.5%, 0 39.5%);
    
    animation-name: polygonTopReveal;
    animation-duration: 1.5s;
    animation-delay: 2.5s;
    animation-fill-mode: backwards;
    
}

.polygonTop{
    transition: clip-path 1s, transform .8s .1s ease-in-out, opacity .8s .1s ease-in-out, background 1.8s ease-in-out, visibility 1s;
}

.polygonBottom{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 40.5%, 100% 59.5%, 100% 100%, 0 100%);
    
    animation-name:polygonBottomReveal;
    animation-duration: 1.5s;
    animation-delay: 2.5s;
    animation-fill-mode: backwards;
    
}

.polygonBottom{
    transition: clip-path 1s, transform .8s .1s ease-in-out, opacity .8s .1s ease-in-out, background 1.8s ease-in-out, visibility 1s;
}

button {
    border: 3px solid #AEA8D3;
	color: #fff;
    background:#353535;
    width:200px;
	font-size:1.2rem;
	text-align: center;
	text-transform: uppercase;
    transform: skew(0deg,0deg) translate(-50%, -50%);
}

button {
    transition: background .3s ease-in, transform .2s .1s ease-in-out;
}

button:hover{
    background:#AEA8D3;
    color: #353535;
    transform: skew(20deg,0deg) translate(-50%, -50%) scale(1.2);
}

.unSkewedText{
    transform: skew(-20deg,0deg);
}

.skewButton{
    position: relative;
    width: 18%;
    height: 12%;
    transform: skew(20deg,0deg);
    
    margin: 2% auto 0;
}

.skewButton:hover{
    transform: skew(20deg,0deg) scale(1.2);
}
.social_wrapper {
    display: block;
    position: absolute;
    right: 1vw;
    bottom: 2vh;
    width: 180px;
    z-index: 5;
}

.social{
    opacity: 0.7;
    padding-right: 18px;
    
    animation-name: showFromTop;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
}

.social {
    transition: opacity .2s ease-in-out;
}

.social:hover{
    opacity: 1;
}

.email{
    display: block;
    position: absolute;
    left: 2vw;
    bottom: 0vh;
    width: auto;
    opacity: 0.7;
    z-index: 5;
    
    animation-name: showFromTop;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
}

.email {
    transition: opacity .2s ease-in-out;
}

.email:hover{
    opacity: 1;
}

.skewArea{
    transform: skew(20deg,0deg);
}