.trySpan {
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;

    z-index: 1;
}

.pageButtons:hover {
    position:relative;
    transition:0.3s;
    width:calc(14em + 10px);
    clip-path: polygon(100% 0, 100% 100%, 0% 100%, 10% 50%, 0% 0%);
}

.contentDiv {
    margin-top:80px;
    position: inherit;
    align-self:center;
}

.contentDiv > * {
    font-family: BodyText;
    text-align:center;
    font-size:18px;
}

.contentDiv > h2 {
    font-size: 20px;
    line-height:1.5em;
    padding-top: 25px;
    padding-bottom: 50px;

    text-wrap:balance;
}

.projectsContainer {
    position:relative;

    transition:0.2s;

    padding:25px;
    margin-bottom:50px;

    background-color:#e6d7b5;

    border-color:#e6d7b5;

    border-radius:1px;
    border-style:dashed;
}

.projectsContainer:hover {
    background-color:#cfbe97;

    border-color:#ad9c74;
}

.projectsContainer > h3 {
    line-height:0.9em;
    font-size:18px;
}

#threeDChar {
    width: auto;
    height: 150px;
}

#threeDEnv {
    width: 200px;
    height: auto;
}

.image {
    margin-top: 40px;
    margin-bottom: 20px;
}

/*
responsiivisuus
*/

@media only screen and (max-width:700px) {
    .contentDiv {
        margin-top:20px;
    }
    .pageButtons:hover {
        position:relative;
        transition:0.3s;
        width:4em;
        height:12em;
        clip-path: polygon(100% 0, 100% 100%, 50% 90%, 0 100%, 0% 0%);
    }
    .pageButtons {
        width:4em;
        height:10em;
        align-content:center;
        text-align:center;
        border-right-width:0;
        border-top-width:1em;
        clip-path: polygon(100% 0, 100% 100%, 50% 90%, 0 100%, 0% 0%);
    }

}

@media only screen and (min-width:701px) and (max-width: 1260px) {

}

@media only screen and (min-width:1261px) {

}