html,
.scene {
height:100%;
width: 100%;
}
/*
.viewer {
max-height:500px;
height: 500px;
max-width: 556.529411px;
width: 556.529411px;
margin-left: auto;
margin-right: auto;
background-image: url(../img/app/Samlet_sequence2.png);
background-repeat: no-repeat;
background-position: 0 50%;
}
@media only screen and (max-width: 820px) {
.viewer {
max-height:280px;
height:280px;
max-width: 357px;
width:357px;
margin-left: auto;
margin-right: auto;
background-image: url(../img/app/Samlet_sequence2.png);
background-repeat: no-repeat;
background-position: 0 50%;
}
}*/
@media only screen and (max-width: 555px) {
.image-sequence-frame-lg{
display: none;
}
.image-sequence-sm{
width: 265px; height:246px; overflow:hidden;
display: block;
margin-left: auto;
margin-right: auto;
z-index:2;
position:relative;
}
}
@media only screen and (min-width: 556px) {
.image-sequence-lg{
width: 513px; height:476px; overflow:hidden;
display: block;
margin-left: auto;
margin-right: auto;
z-index:2;
position:relative;
}
.image-sequence-frame-sm{
display: none;
}}
[data-link] {
cursor: pointer;
}
.gridBlock {
opacity: 0;
}
.grid-section {
height: 100%;
width: 100%;
display:block;
}
/* Grid almost fully pulled from https://www.rino-pelle.com/ */
.grid-container {
width: 100vw;
height: 500vh;
position: relative;
}
.grid {
top: 0;
left: 0;
z-index: 1;
width: 70vw;
height: 60vw;
margin: 0 calc(100vw / 20 * 3);
position: absolute;
}
@media only screen and (max-width: 580px) {
.grid {
margin: 0;
width: 100vw;
height: 89.444vw;
}
}
.gridBlock {
background-size: cover;
border-radius: 10%;
}
.gridLayer {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
will-change: transform;
transform-origin: 44.951% 50%;
}
.gridLayer:nth-child(1) .gridBlock {
top: 5vw;
left: 20vw;
width: 10vw;
height: 10vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(1) .gridBlock {
top: 11.111vw;
left: 23.889vw;
width: 15vw;
height: 15vw;
}
}
.gridLayer:nth-child(2) .gridBlock {
top: 0;
left: 32.5vw;
width: 15vw;
height: 15vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(2) .gridBlock {
top: 0;
left: 43.333vw;
width: 26.389vw;
height: 26.389vw;
}
}
.gridLayer:nth-child(3) .gridBlock {
left: 0;
top: 25vw;
width: 15vw;
height: 15vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(3) .gridBlock {
top: 30.278vw;
left: 0;
width: 26.389vw;
height: 26.389vw;
}
}
.gridLayer:nth-child(4) .gridBlock {
top: 17.5vw;
left: 17.5vw;
width: 30vw;
height: 30vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(4) .gridBlock {
top: 30.278vw;
left: 30.278vw;
width: 39.444vw;
height: 39.444vw;
}
}
.gridLayer:nth-child(5) {
z-index: 1;
}
.gridLayer:nth-child(5) .gridBlock {
top: 20vw;
left: 50vw;
width: 5vw;
height: 5vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(5) .gridBlock {
top: 23.889vw;
left: 73.889vw;
width: 15.278vw;
height: 15.278vw;
}
}
.gridLayer:nth-child(5) a {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.gridLayer:nth-child(5) svg {
width: 1.75vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(5) svg {
width: 4.722vw;
}
}
.gridLayer:nth-child(6) .gridBlock {
left: 50vw;
top: 27.5vw;
width: 20vw;
height: 20vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(6) .gridBlock {
top: 43.889vw;
left: 73.889vw;
width: 26.389vw;
height: 26.389vw;
}
}
.gridLayer:nth-child(7) .gridBlock {
left: 10vw;
top: 42.5vw;
width: 5vw;
height: 5vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(7) .gridBlock {
display: none;
}
}
.gridLayer:nth-child(8) .gridBlock {
bottom: 5vw;
left: 42.5vw;
width: 5vw;
height: 5vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(8) .gridBlock {
display: none;
}
}
.gridLayer:nth-child(9) .gridBlock {
bottom: 0;
left: 50vw;
width: 10vw;
height: 10vw;
}
@media only screen and (max-width: 580px) {
.gridLayer:nth-child(9) .gridBlock {
top: 73.889vw;
left: 58.889vw;
width: 15.278vw;
height: 15.278vw;
}
}
.gridBlock {
display: block;
position: absolute;
}