*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --basesrc : 20vw;
}
@media (orientation:landscape){ 
:root {
  --basesrc: 20vh;
}
}

.container {
  /*width: 200px;
  height: 200px;
  perspective: 4000px;
  margin: 100px auto 0;
    background:red;*/
  width: var(--basesrc);
  height: var(--basesrc);
  perspective: calc(20 * var(--basesrc));
  margin: 0px auto;
  animation: 0.2s linear 3s 1 reverse both zoom, 1s linear 0.3s 1 normal both appear;
overflow: hidden;
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    z-index:2;
}
.sphere {
  display: block;
  position: absolute;
  border-radius: 50%;
  width: calc(0.15*var(--basesrc));
  height: calc(0.15*var(--basesrc));
  background: rgba(255,51,0,1);
  top: calc(49% - (0.3*var(--basesrc)));
  left: 49%;
  animation:1s linear 1s 1 normal both appear;
}
.vision {
    animation:1s linear 2s 1 normal both appear;
}
.point {
  display: block;
  position: absolute;
  border-radius: 50%;
  width: 40%;
  height: 40%;
  background: #fff;
  top: 10%;
  right: 20%;
}
.cube {
  width: var(--basesrc);
  height: var(--basesrc);
  position: relative;
  transform-style: preserve-3d;
  animation: 1s ease-out 0.3s 1 reverse spin;
  /*animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);*/
      transform: rotateX(-20deg) rotateY(30deg);
}

.face {
  position: absolute;
  /*width: 200px;
  height: 200px;*/
  width: var(--basesrc);
  height: var(--basesrc);
  outline: 1px solid transparent
}

.top {
  background:rgba(128,128,128,0.75);
  transform: rotateX(90deg) translateZ(calc(0.5 * var(--basesrc)));
}
.bottom {
  background:rgba(128,128,128,0.75);
  transform: rotateX(-90deg) translateZ(calc(0.5 * var(--basesrc)));
}

.right {
  background:rgba(255,51,0,0.75);
  transform: rotateY(90deg) translateZ(calc(0.5 * var(--basesrc)));
}
.left {
  background:rgba(255,51,0,0.75);
  transform: rotateY(-90deg) translateZ(calc(0.5 * var(--basesrc)));
}

.front {
 background:none;
  transform: rotateX(0deg) translateZ(calc(0.5 * var(--basesrc)));
}
.back {
 background:none;
  transform: rotateX(-180deg) translateZ(calc(0.5 * var(--basesrc)));
}
.capsvision {
	margin-top: calc(0.3*var(--basesrc));
width: calc(1.2*var(--basesrc));
text-align: center;

height: calc(0.3*var(--basesrc));
/*font-family:open_sans_strong;
font-size:calc(0.3 * var(--basesrc));*/
/*background:url('img/capsvision.svg');
background-position:center;
background-repeat:no-repeat;
background-size:contain;
background: red;*/
}
@keyframes animNoir {
            80% {
                fill:transparent;
                stroke-dashoffset:0;
                stroke-width:1px;
            }
            100% {
                stroke-dashoffset:0;
                fill:rgba(170,170,170,1.0);
                /*fill:#5d5d5d;*/
                stroke-opacity: 1;
                stroke-width:2px;
            }
        }
/*.capsvision .noir {stroke-dasharray:600; stroke-dashoffset:600; stroke-linecap:square; stroke:rgba(51,51,51,1.0); stroke-width:2px; fill:transparent; paint-order:stroke fill; animation:animNoir 1s 5s linear forwards;}*/
.capsvision .noir path {stroke-dasharray:600; stroke-dashoffset:600; stroke-linecap:square; stroke:rgba(51,51,51,1.0); fill:transparent; paint-order:stroke fill; animation:animNoir 1s 1s linear forwards;}
.capsvision .noir .dot {animation:animNoir 1.5s 1s linear forwards;}

.container p {
width: calc(1.4*var(--basesrc));
text-align: center;
font-size:calc(0.1 * var(--basesrc));
line-height: calc(0.3 * var(--basesrc));
}

@keyframes spin {
  from {
     transform: rotateX(-20deg) rotateY(30deg);
    /*transform: rotateX(0deg) rotateY(0deg);*/
  }
  to {
         transform: rotateX(-20deg) rotateY(210deg);

    /*transform: rotateX(360deg) rotateY(360deg);*/
  }
}
 @keyframes appear {
  from {
  	opacity:0;
  	  perspective: calc(1/5 * var(--basesrc));
  }
  to {
  	opacity:1;
  	perspective: calc(20 * var(--basesrc));
  }
}
   @keyframes zoom {
0% {
    opacity:0;
    scale:0;
      perspective: calc(1/5 * var(--basesrc));
  }
  50% {
    scale : 1.5;
  }
100% {
    opacity:1;
    scale : 1;
    perspective: calc(20 * var(--basesrc));
  }
}
   @keyframes fadebg {
  0% {
    background:rgba(255,255,255,0);
  }
    40% {
    background:rgba(255,255,255,1);
  }
      60% {
    background:rgba(255,255,255,1);
  }
  100% {
    background:rgba(255,255,255,0);
  }
}