.projectthumb {
    display: inline-block;
    position: relative;
    margin: 0px;
    padding: 0px;
    width: 21.68vw;
    height: 26.04vh;
    vertical-align: top;
}

.aproject {
    margin: 0px;
    padding: 0px;
    position: relative;
    width: 28.91vh;
    height: 21.48vh;
    overflow: hidden;
}

.aproject img {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: ${14 * scaleMultiplier}px;
    left: ${5 * scaleMultiplier}px;
    width: 25vh;
    height: 18.75vh;
}

.aproject.empty {
    background:  url('../lobby/newproject.png');
    background-size: 100%;
}
.aproject.p1 {
    background:  url('../lobby/project1.png');
    background-size: 100%;
}
.aproject.p2 {
    background:  url('../lobby/project2.png');
    background-size: 100%;
}
.aproject.p3 {
    background:  url('../lobby/project3.png');
    background-size: 100%;
}
.aproject.p4 {
    background:  url('../lobby/project4.png');
    background-size: 100%;
}

.projecttitle {
    height: ${30 * scaleMultiplier}px;
    width: 25vh;
    line-height: ${15 * scaleMultiplier}px;
}

.projecttitle h4 {
    font-weight: bold;
    text-align: center;
    color: #355E7C;
    font-size: ${13 * scaleMultiplier}px;
    width: 25vh;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align:middle;
}

.samplethumb {
    display: inline-block;
    position: absolute;
    margin: ${8 * scaleMultiplier}px ${2 * scaleMultiplier}px 0;
    padding: 0px;
    width: 23.2%;
    height: 46.7%;
    vertical-align: top;
    -webkit-tap-highlight-color: transparent;
}

.samplethumb > p {
    font-weight: bold;
    text-align: center;
    color: #C18134;
    width: 100%;
    margin: ${5 * scaleMultiplier}px auto;
    overflow: hidden;
    font-size: 2.5vh;
    font-weight: bold;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.samplethumb .thumb {
    position: relative;
    margin: 0 auto;
    width: 84.8%;
    height: 78%;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
        -webkit-tap-highlight-color: transparent;
}

.samplethumb .thumb > div.woodframe {
    width: 100%;
    height: 100%;
    outline: 1px solid transparent;
    background:  url('../lobby/woodframe.svg') no-repeat;
	background-size: auto 100%;
    background-position-x: center;
    background-position-y: center;
}

.samplethumb .thumb > div.sampleicon {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 15px;
    left: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    outline: 1px solid transparent;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
}

.samplethumb#sample-0 { left:    0vw; top:   0vh; }
.samplethumb#sample-1 { left: 23.2vw; top:   0vh; }
.samplethumb#sample-2 { left: 46.4vw; top:   0vh; }
.samplethumb#sample-3 { left: 68.6vw; top:   0vh; }
.samplethumb#sample-4 { left:    0vw; top:  28vh; }
.samplethumb#sample-5 { left: 23.2vw; top:  28vh; }
.samplethumb#sample-6 { left: 46.4vw; top:  28vh; }
.samplethumb#sample-7 { left: 68.6vw; top:  28vh; }

.samplethumb .thumb.pos0 { -webkit-transform: rotateZ(-1deg);}
.samplethumb .thumb.pos1 { -webkit-transform: rotateZ(0.5deg);}
.samplethumb .thumb.pos2 { -webkit-transform: rotateZ(-0.7deg);}
.samplethumb .thumb.pos3 { -webkit-transform: rotateZ(0.2deg);}
.samplethumb .thumb.pos4 { -webkit-transform: rotateZ(-1deg);}
.samplethumb .thumb.pos5 { -webkit-transform: rotateZ(0.6deg);}
.samplethumb .thumb.pos6 { -webkit-transform: rotateZ(-0.3deg);}
.samplethumb .thumb.pos7 { -webkit-transform: rotateZ(1deg);}

.closex {
    position: relative;
    float: left;
    top: -54.17vh;
    z-index: 5;
    visibility: hidden;
    width: 5.86vh;
    height: 5.73vh;
    background:  url('../ui/closeit.svg');
    background-size: 101%;
}

.share {
    position: relative;
    top: -22.14vh;
    right: -12.7vw;
    z-index: 5;
    width: 5.47vw;
    height: 6.51vh;
    background: url('../ui/share-bow.svg');
    background-size: 101%;
    visibility: hidden;
}

.ribbonHorizontal {
    background-color: #1dafed;
    border: 3px solid #fff;
    height: 1.57vh;
    width: 18.75vw;
    position: relative;
    top: -27.34vh;
    z-index: 4;
    visibility: hidden;
}

.ribbonVertical {
    background-color: #1dafed;
    border: 3px solid #fff;
    width: 1.17vw;
    height: 19vh;
    position: relative;
    top: -32.81vh;
    right: -14.65vw;
    z-index: 4;
    visibility: hidden;
}

/* Gift trigger tile (second tile like iOS) */
.aproject.gifttile { position: relative; }
.aproject.gifttile .gifttrigger-icon {
    position: absolute;
    top: 2.0vh;
    right: 2.0vh;
    width: 5.2vh;
    height: 5.2vh;
    background: url('../ui/share-bow.svg') no-repeat center center;
    background-size: contain;
    pointer-events: none;
    z-index: 2;
}

*.inner {
    padding: 0px;
    margin: 0px 6.05%;
    width: 87.9%;
}

*.scrollarea{
    position: relative;
    padding: 0px;
    margin: 0px;
    width: 100%;
}