path: root/public/css/divanim.less

@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: 20em;
  height: 23em;
  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: 2; }
#activity2 {
  z-index: 3; }
#activity3 {
  z-index: 4; }
#satellitt {
  z-index: 5; }
#activity4 {
  z-index: 6; }
#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%; }

/* --------------------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 white;*/
  -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*/
/* ------------Streched orbits-----------------------------------------------------------------*/
.scale-stretched #activity1.orbit {
  width: 72em; /*32*/
  height: 72em; 
  margin-top: -36em; /*-16*/
  margin-left: -36em; } 
.scale-stretched #activity2.orbit {
  width: 72em; /*40*/
  height: 72em; 
  margin-top: -36em; /*-20*/
  margin-left: -36em; } 
.scale-stretched #activity3.orbit {
  width: 72em; /*56*/
  height: 72em; 
  margin-top: -36em; /*-28*/
  margin-left: -36em; } 
.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; } 

/* ------------pictures---------------------------------------------------------------*/
#divid {
  background-image: url('group.png'); }
#activity1 .object {
  background-image: url('/img/dennis.jpg');}
#activity2 .object {
  background-image: url('/img/erling.jpg');}
#activity3 .object {
  background-image: url('/img/robert.jpg');}
#activity3 .satelite {
  background-image: url('betaling.png');}
#activity4 .object {
  background-image: url('/img/stian.jpg');}