@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); .anim { font-size: 10px; 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: 100%; height: 100%; background-position: center 40%; background-repeat: no-repeat; background-size: cover; background-image: linear-gradient(#8b9da9, #fff6e4);} #situation { position: absolute; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; } .orbit { position: absolute; top: 50%; left: 50%; border: 0px solid rgba(255, 255, 255, 0.2); border-radius: 50%; -webkit-transform-style: preserve-3d; -webkit-animation-name: orbit; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } .orbit .orbit { -webkit-animation-name: suborbit; } .pos { position: absolute; top: 50%; width: 2em; height: 2em; margin-top: -1em; margin-left: -1em; -webkit-transform-style: preserve-3d; -webkit-animation-name: invert; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } #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; } #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; -webkit-animation-timing-function: linear; } .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); } } @-webkit-keyframes suborbit { 0% { -webkit-transform: rotateX(90deg) rotateZ(0deg); } 100% { -webkit-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); } } /* ------------------------scale 3D view----------------------------------------*/ .view-3D.zoom-large #divid { -webkit-transform-style: preserve-3d; } .view-3D.zoom-large .orbit { -webkit-transform-style: preserve-3d; } .view-3D #situation { -webkit-transform: rotateX(75deg); } .view-3D #divid { -webkit-transform: rotateX(-90deg); } .view-3D .ring { -webkit-transform: rotateX(90deg); } .view-3D .object, .view-3D .satellitt { -webkit-transform: rotateX(0deg); } /* ------------------------zoom----------------------------------------------------------*/ .zoom-large #situation { width: 100%; } .zoom-large.view-3D .scale-stretched #situation { font-size: 40%; } /*originalstr.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; }/*2.89016*/ #activity2 .pos, #activity2 .object, #activity2.orbit { /*border: 1px solid white;*/ -webkit-animation-duration: 8.38237s; }/*7.38237*/ #activity3 .pos, #activity3 .object, #activity3.orbit { /*border: 1px solid white;*/ -webkit-animation-duration: 11.00021s; }/*12.00021*/ #activity3 .orbit .pos, #activity3 .orbit { /*border: 1px solid white;*/ -webkit-animation-duration: 0.89764s; }/*0.89764*/ #activity4 .pos, #activity4 .object, #activity4.orbit { /*border: 1px solid white;*/ -webkit-animation-duration: 13.57017s; }/*22.57017*/ #activity5 .pos, #activity5 .object, #activity5.orbit { /*border: 1px solid white;*/ -webkit-animation-duration: 17.35138s; }/*142.35138*/ #activity6 .pos, #activity6 .object, #activity6.orbit, #activity6 .ring { /*border: 1px solid white;*/ -webkit-animation-duration: 19.36998s; }/*353.36998*/ #activity7 .pos, #activity7 .object, #activity7.orbit { /*border: 1px solid white;*/ -webkit-animation-duration: 23.20215s; }/*1008.20215*/ #activity8 .pos, #activity8 .object, #activity8.orbit { /*border: 1px solid white;*/ -webkit-animation-duration: 27.49584s; }/*1977.49584*/ #activity9 .pos, #activity9 .object, #activity9.orbit { /*border: 1px solid white;*/ -webkit-animation-duration: 30.49584s; }/*1977.49584*/ #activity10 .pos, #activity10 .object, #activity10.orbit { /*border: 1px solid white;*/ -webkit-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');}