@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
.anim {
font-size: 6px;
font-family: 'Source Sans Pro', Arial, sans-serif;
font-weight: 300;
margin:0;
/*background-color: #08090A;*/ }
#scene {
z-index: 1;
position: absolute;
overflow: hidden;
width: 50%;
height: 20%;
background-position: center 40%;
background-repeat: no-repeat;
background-size: cover;}
#situation {
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;/*chrome/safari*/
-moz-transform-style: preserve-3d; /*mozilla*/
-o-transform-style: preserve-3d;/*opera*/ }
.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 0px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
-webkit-transform-style: preserve-3d;/*chrome/safari*/
-moz-transform-style: preserve-3d; /*mozilla*/
-o-transform-style: preserve-3d;/*opera*/
-webkit-animation-name: orbit;/*chrome/safari*/
-moz-animation-name: orbit;/*mozilla*/
-o-animation-name: orbit;/*opera*/
-webkit-animation-iteration-count: infinite;/*chrome/safari*/
-moz-animation-iteration-count: infinite;/*mozilla*/
-o-animation-iteration-count: infinite;/*opera*/
-webkit-animation-timing-function: linear; /*chrome/safari*/
-moz-animation-timing-function: linear; /*mozilla*/
-o-animation-timing-function: linear;/*opera*/}
.orbit .orbit {
-webkit-animation-name: suborbit;/*chrome/safari*/
-moz-animation-name: suborbit;/*mozilla*/
-o-animation-name: suborbit; /*opera*/ }
.pos {
position: absolute;
top: 50%;
width: 2em;
height: 2em;
margin-top: -1em;
margin-left: -1em;
-webkit-transform-style: preserve-3d;/*chrome/safari*/
-moz-transform-style: preserve-3d; /*mozilla*/
-o-transform-style: preserve-3d;/*opera*/
-webkit-animation-name: invert;/*chrome/safari*/
-moz-animation-name: invert;/*mozilla*/
-o-animation-name: invert;/*opera*/
-webkit-animation-iteration-count: infinite;/*chrome/safari*/
-moz-animation-iteration-count: infinite;/*mozilla*/
-o-animation-iteration-count: infinite;/*opera*/
-webkit-animation-timing-function: linear;/*chrome/safari*/
-moz-animation-timing-function: linear; /*mozilla*
-o-animation-timing-function: linear;/*opera*/
}
#divid, .object, #activity3 .satellitt {
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
border-radius: 10%;
-webkit-transform-style: preserve-3d;/*chrome/safari*/
-moz-transform-style: preserve-3d; /*mozilla*/
-o-transform-style: preserve-3d;/*opera*/}
#divid {
/*background-color: #FB7209;*/
background-repeat: no-repeat;
background-size: cover;
/*box-shadow: 0 0 60px rgba(255, 160, 60, 0.4);*/}
.object {
background-repeat: no-repeat;
background-size: cover;
-webkit-animation-iteration-count: infinite;/*chrome/safari*/
-moz-animation-iteration-count: infinite;/*mozilla*/
-o-animation-iteration-count: infinite;/*opera*/
-webkit-animation-timing-function: linear;/*chrome/safari*/
-moz-animation-timing-function: linear;/*mozilla*/
-o-animation-timing-function: linear;/*opera*/
}
.ring {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%; }
/* -------------------index positions-------------------------------------------------------*/
#activity1 {
z-index: 12; }
#activity2 {
z-index: 11; }
#activity3 {
z-index: 10; }
#satellitt {
z-index: 9; }
#activity4 {
z-index: 8; }
#activity5 {
z-index: 7; }
#activity6 {
z-index: 6; }
#activity7 {
z-index: 5; }
#activity8 {
z-index: 4; }
#activity9 {
z-index: 3; }
#activity10 {
z-index: 2; }
#divid {
z-index: 1; }
/* --------------------------------activity starting positions----------------------------------------*/
#activity1 .pos {
left: 50%;
top: -1%; }
#activity2 .pos {
left: 0;
top: 50%; }
#activity3 .pos {
left: 100%;
top: 50%; }
#activity4 .pos {
left: 100%;
top: 50%; }
#activity5 .pos {
left: 50%;
top: 100%; }
#activity6 .pos {
left: 100%;
top: 50%; }
#activity7 .pos {
left: 0%;
top: 50%; }
#activity8 .pos {
left: 0%;
top: 100%; }
#activity9 .pos {
left: 100%;
top: 50%; }
#activity10 .pos {
left: 50%;
top: 100%; }
#activity11 .pos {
left: 50%;
top: 100%; }
/* --------------------webkit animations-----------------------------------------------------*/
@-webkit-keyframes orbit {
0% {
-webkit-transform: rotateZ(0deg); }
100% {
-webkit-transform: rotateZ(-360deg); }} /**/
@-moz-keyframes orbit {
0% {
-moz-transform: rotateZ(0deg); }
100% {
-moz-transform: rotateZ(-360deg); }} /**/
@-o-keyframes orbit {
0% {
-o-transform: rotateZ(0deg); }
100% {
-o-transform: rotateZ(-360deg); }} /**/
@-webkit-keyframes suborbit {
0% {
-webkit-transform: rotateX(90deg) rotateZ(0deg); }
100% {
-webkit-transform: rotateX(90deg) rotateZ(-360deg); }}/**/
@-moz-keyframes suborbit {
0% {
-moz-transform: rotateX(90deg) rotateZ(0deg); }
100% {
-moz-transform: rotateX(90deg) rotateZ(-360deg); }}/**/
@-o-keyframes suborbit {
0% {
-o-transform: rotateX(90deg) rotateZ(0deg); }
100% {
-o-transform: rotateX(90deg) rotateZ(-360deg); }}/**/
@-webkit-keyframes invert {
0% {
-webkit-transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
100% {
-webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }}/**/
@-moz-keyframes invert {
0% {
-moz-transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
100% {
-moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }}/**/
@-o-keyframes invert {
0% {
-o-transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
100% {
-o-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }}/**/
/* ------------------------scale 3D view----------------------------------------*/
.view-3D.zoom-large #divid {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
}
.view-3D.zoom-large .orbit {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
}
.view-3D #situation {
-webkit-transform: rotateX(75deg);
-moz-transform: rotateX(75deg);
-o-transform: rotateX(75deg);
}
.view-3D #divid {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
}
.view-3D .ring {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
}
.view-3D .object,
.view-3D .satellitt {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
}
/* ------------------------zoom----------------------------------------------------------*/
.zoom-large #situation {
width: 100%; }
.zoom-large.view-3D .scale-stretched #situation {
font-size: 40%; } /*original size.62*/
.zoom-large.view-3D .scale-d #situation {
font-size: 48%; }
.zoom-large.view-3D .scale-s #situation {
font-size: 14%; }
/* ---------------------------data-------------------------------------------------------*/
/* ---------------------------speed-------------------------------------------------------*/
/* sideral years */
#activity1 .pos,
#activity1 .object,
#activity1.orbit {
/*border: 1px solid black;*/
-webkit-animation-duration: 6.89016s;
-moz-animation-duration: 6.89016s;
-o-animation-duration: 6.89016s;
}/*2.89016*/
#activity2 .pos,
#activity2 .object,
#activity2.orbit {
/*border: 1px solid white;*/
-webkit-animation-duration: 8.38237s;
-moz-animation-duration: 8.38237s;
-o-animation-duration: 8.38237s;
}/*7.38237*/
#activity3 .pos,
#activity3 .object,
#activity3.orbit {
/*border: 1px solid white;*/
-webkit-animation-duration: 11.00021s;
-moz-animation-duration: 11.00021s;
-o-animation-duration: 11.00021s;
}/*12.00021*/
#activity3 .orbit .pos,
#activity3 .orbit {
/*border: 1px solid white;*/
-webkit-animation-duration: 0.89764s;
-moz-animation-duration: 0.89764s;
-o-animation-duration: 0.89764s;
}/*0.89764*/
#activity4 .pos,
#activity4 .object,
#activity4.orbit {
/*border: 1px solid white;*/
-webkit-animation-duration: 13.57017s;
-moz-animation-duration: 13.57017s;
-o-animation-duration: 13.57017s;
}/*22.57017*/
#activity5 .pos,
#activity5 .object,
#activity5.orbit {
/*border: 1px solid white;*/
-webkit-animation-duration: 17.35138s;
-moz-animation-duration: 17.35138s;
-o-animation-duration: 17.35138s;
}/*142.35138*/
#activity6 .pos,
#activity6 .object,
#activity6.orbit,
#activity6 .ring {
/*border: 1px solid white;*/
-webkit-animation-duration: 19.36998s;
-moz-animation-duration: 19.36998s;
-o-animation-duration: 19.36998s;
}/*353.36998*/
#activity7 .pos,
#activity7 .object,
#activity7.orbit {
/*border: 1px solid white;*/
-webkit-animation-duration: 23.20215s;
-moz-animation-duration: 23.20215s;
-o-animation-duration: 23.20215s;
}/*1008.20215*/
#activity8 .pos,
#activity8 .object,
#activity8.orbit {
/*border: 1px solid white;*/
-webkit-animation-duration: 27.49584s;
-moz-animation-duration: 27.49584s;
-o-animation-duration: 27.49584s;
}/*1977.49584*/
#activity9 .pos,
#activity9 .object,
#activity9.orbit {
/*border: 1px solid white;*/
-webkit-animation-duration: 30.49584s;
-moz-animation-duration: 30.49584s;
-o-animation-duration: 30.49584s;
}/*1977.49584*/
#activity10 .pos,
#activity10 .object,
#activity10.orbit {
/*border: 1px solid white;*/
-webkit-animation-duration: 33.49584s;
-moz-animation-duration: 33.49584s;
-o-animation-duration: 33.49584s;
}/*1977.49584*/
/* --------------------------------activity sizes----------------------------------------*/
/* --------------------------------stretched sizes-------------------------------------------*/
.scale-stretched #divid {
font-size: 24em; }/*24*/
.scale-stretched #activity1 .object {
font-size: 4.5em; }/*1.5*/
.scale-stretched #activity2 .object {
font-size: 5.58em; }/*3.72*/
.scale-stretched #activity3 .object {
font-size: 5.88em; }/*3.92*/
.scale-stretched #activity3 .satellitt {
font-size: 4.8em; }/*1.2*/
.scale-stretched #activity4 .object {
font-size: 5.88em; }/*2.9*/
.scale-stretched #activity5 .object {
font-size: 9em; }/*12*/
.scale-stretched #activity6 .object {
font-size: 8.1em; }/*10.8*/
.scale-stretched #activity7 .object {
font-size: 7.02em; }/*4.68*/
.scale-stretched #activity8 .object {
font-size: 4.9em; }/*4.9*/
.scale-stretched #activity9 .object {
font-size: 7.9em; }/*4.9*/
.scale-stretched #activity10 .object {
font-size: 7.9em; }/*4.9*/
/* ------------Streched orbits-----------------------------------------------------------------*/
.scale-stretched #activity1.orbit {
width: 32em; /*32*/
height: 32em;
margin-top: -16em; /*-16*/
margin-left: -16em; }
.scale-stretched #activity2.orbit {
width: 40em; /*40*/
height: 40em;
margin-top: -20em; /*-20*/
margin-left: -20em; }
.scale-stretched #activity3.orbit {
width: 56em; /*56*/
height: 56em;
margin-top: -28em; /*-28*/
margin-left: -28em; }
.scale-stretched #activity3 .orbit {
width: 16em; /*6*/
height: 16em;
margin-top: -8em; /*-3*/
margin-left: -8em; }
.scale-stretched #activity4.orbit {
width: 72em; /*72*/
height: 72em;
margin-top: -36em; /*-36*/
margin-left: -36em; }
.scale-stretched #activity5.orbit {
width: 80em; /*100*/
height: 80em;
margin-top: -40em; /*-50*/
margin-left: -40em; }
.scale-stretched #activity6.orbit {
width: 100em; /*150*/
height: 100em;
margin-top: -50em; /*-75*/
margin-left: -50em; }
.scale-stretched #activity7.orbit {
width: 120em; /*186*/
height: 120em;
margin-top: -60em; /*-93*/
margin-left: -60em; }
.scale-stretched #activity8.orbit {
width: 140em; /*210*/
height: 140em;
margin-top: -70em; /*-105*/
margin-left: -70em; }
.scale-stretched #activity9.orbit {
width: 160em; /*210*/
height: 160em;
margin-top: -80em; /*-105*/
margin-left: -80em; }
.scale-stretched #activity10.orbit {
width: 180em; /*210*/
height: 180em;
margin-top: -90em; /*-105*/
margin-left: -90em; }
/* ------------pictures---------------------------------------------------------------*/
#divid {
background-image: url('/img/anim/group.png'); }
#activity1 .object {
background-image: url('/img/anim/restaurant.png');}
#activity2 .object {
background-image: url('/img/anim/fly.png');}
#activity3 .object {
background-image: url('/img/anim/handel.png');}
#activity3 .satelite {
background-image: url('/img/anim/betaling.png');}
#activity4 .object {
background-image: url('/img/anim/bil.png');}
#activity5 .object {
background-image: url('/img/anim/bank.png');}
#activity6 .object {
background-image: url('/img/anim/uhell.png');}
#activity7 .object {
background-image: url('/img/anim/hus.png');}
#activity8 .object {
background-image: url('/img/anim/sport.png');}
#activity9 .object {
background-image: url('/img/anim/deltomsorg.png');}
#activity10 .object {
background-image: url('/img/anim/underholdning.png');}
