html, body, * {
    margin: 0;
    padding: 0;
}

html, body {
    background: black;
    overflow: hidden;
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-75%);
    transform: translateY(-75%);
}

div.full {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
    transition: clip-path 0.5s;
}
div.full div.bg {
    position: fixed;
    overflow:visible;
    left: 0;
    right: 0;
    width: 100%;
    transition: top 1s;
}
div.full.fulled div.bg {
    bottom:0;
    height:100%;
}

div.full div.bg img { 
    width:100%; 
    position:absolute;
    transition: margin-top 1s;
}

button {
    position: absolute;
    font-family: Impact;
    text-shadow: 0 0 4px rgba(128, 128, 128, 0.5);
    font-size: 5vh;
    background: transparent;
    border: none;
    width: 100%;
    left: 10%;
    width: 90%;
    height: 18%;
}

button span {
    position: relative;
    left: 25%;
    text-decoration: none;
    color: white;
    transition: scale 0.5s;
}

div.full:hover button span {
    scale: 110%;
}


#full0 {
    background-image: url(/static/images/full0.jpg);
    clip-path: polygon(0% 0%, 24% 0%, 4% 100%, 0% 100%);
    @starting-style {
        clip-path: polygon(0% 0%, 1% 0%, 1% 100%, 0% 100%);
    }
}

#full1 {
    clip-path: polygon(28% 2%, 98% 2%, 90% 20%, 24% 20%);
    @starting-style {
        clip-path: polygon(99% 2%, 100% 2%, 100% 20%, 99% 20%);
    }
}
#full1 div.bg { margin-top:1%; }
#full1 div.bg img { margin-top:-50%; }
#full1 button { 
    top: 2%;
    text-shadow: -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray, 1px 1px 0 gray;
}
#full1 button span { margin-left:0.75em; }
#full1:hover { clip-path: polygon(27% 1%, 99% 1%, 91% 21%, 23% 21%); }
#full1.fulled div.bg {
    width:100%;
    height:100%;
}

#full2 {
    clip-path: polygon(23.5% 25%, 98% 25%, 90% 43%, 19.5% 43%);
    @starting-style {
        clip-path: polygon(10% 25%, 11% 25%, 11% 43%, 10% 43%);
    }
}
#full2 div.bg { top:25%; }
#full2 div.bg img {  margin-top:-30%; }
#full2 button {
    top: 25%; 
    text-shadow: -1px -1px 0 orange, 1px -1px 0 orange, -1px 1px 0 orange, 1px 1px 0 orange;
 }

#full2:hover {
    clip-path: polygon(22.5% 24%, 99% 24%, 91% 44%, 18.5% 44%);
}

#full3 {
    clip-path: polygon(19% 48%, 98% 48%, 90% 66%, 15% 66%);
    @starting-style {
        clip-path: polygon(99% 48%, 100% 48%, 100% 66%, 99% 66%);
    }
}
#full3 div.bg { top:48% }
#full3 div.bg img {  margin-top:-28%; }
#full3 button { 
    top: 48%;
    text-shadow: -1px -1px 0 #3c78af, 1px -1px 0 #3c78af, -1px 1px 0 #3c78af, 1px 1px 0 #3c78af;
}
#full3 button span { margin-left:-0.75em; }
#full3:hover { clip-path: polygon(19% 47%, 99% 47%, 91% 67%, 14% 67%); }

#full4 {
    clip-path: polygon(14% 71%, 98% 71%, 90% 89%, 10% 89%);
    @starting-style {
        clip-path: polygon(10% 71%, 11% 71%, 11% 89%, 10% 89%);
    }
}
#full4:hover { clip-path: polygon(13% 70%, 99% 70%, 91% 90%, 9% 90%); }
#full4 div.bg { top:71%; }
#full4 div.bg img { margin-top:-24% }
#full4 button {
     top: 71%;
     text-shadow: -1px -1px 0 #312323, 1px -1px 0 #312323, -1px 1px 0 #312323, 1px 1px 0 #312323;
    }
#full4 button span { margin-left:-1.5em; }



#full1.fulled,
#full2.fulled,
#full3.fulled,
#full4.fulled {
    transition:clip-path 1s;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
#full1.fulled div.bg,
#full2.fulled div.bg,
#full3.fulled div.bg,
#full4.fulled div.bg {
    top:0;
}
#full1.fulled div.bg img,
#full2.fulled div.bg img,
#full3.fulled div.bg img,
#full4.fulled div.bg img {
    margin-top: 0;
}

h1 {
    color:white;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    margin: 1em;
    opacity: 1;
    transition: opacity 3s;
    @starting-style {
        opacity: 0;
    }
}

h1 a {
    text-decoration: none;
}

footer {
    position:absolute;
    bottom:  0;
    left:   10%;
    right:  10%;
    height:  8%;
    color:white;
}
footer p {
    position:absolute;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}
footer a.contact,
footer a.icon {
    display:inline-block;
    text-decoration: none;
    border-radius: 1em;
    background:rgb(169, 93, 0);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color:white;
    font-size:2vh;
    margin-bottom: -1.5em;;
    padding:0.5em 0.75em;
    transition: background-color,transform 0.5s;;
    transform:translateY(0);
    @starting-style {
        transform:translateY(1.5em);    
    }
}
footer a.contact:hover,
footer a.icon:hover {
    background-color: red;
    transform:translateY(-0.5em);
}
footer a.small {
    text-decoration: none;
    font-family: 'San Francisco', Helvetica, Arial, sans-serif;
    font-weight: 25;
    font-size: 80%;
    padding:1em;
    color:white;
}