@charset "UTF-8";
/* CSS Document */

/* DIVS */

#accelerator-icon{
	background-image: url("../images/animation/animation-acc-back.svg");
	background-position: center center;
	min-width: 450px !important;
	min-height: 500px !important;
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
}

#accelerator-dial{
	background-image: url("../images/animation/animation-acc-dial.svg");
	background-position: center center;
	min-width: 400px !important;
	min-height: 400px !important;
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
}

#icon-setone{
	background-image: url("../images/animation/iconset-e.svg");
	background-position: center center;
	min-width: 400px !important;
	min-height: 400px !important;
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
}

#icon-settwo{
	background-image: url("../images/animation/iconset-all.svg");
	background-position: center center;
	min-width: 800px !important;
	min-height: 800px !important;
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	
}

/* ANIMATIONS */

@keyframes fade-in {
	0% { opacity: 0;}
	50% {opacity: 0.5;}
	100% {opacity: 1;}
}

@keyframes fade-out {
	0% { opacity: 1;}
	50% {opacity: 0.5;}
	100% {opacity: 0;}
}

@keyframes scale-down{
	0% { scale: 1.2;color:#3DAE2B; }
	100% { scale: 1;color: #FFFFFF; }
}

@keyframes scale-up{
	0% { color: #FFFFFF; }
	100% { scale: 1.2;color:#3DAE2B; }
}


/* FADES */

.an-fade-in{
  animation-name: fade-in;
  animation-duration: 3s;
  animation-iteration-count: 1;
}

.an-fade-out{
  animation-name: fade-out;
  animation-duration: 5s;
  animation-iteration-count: 1;
}

.an-fade-mid{
  animation-name: fade-out;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: 5s;
}

.nav-fade-in{
	animation-name: fade-in;
  	animation-duration: 1s;
  	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.nav-fade-out{
	animation-name: fade-out;
  	animation-duration: 1s;
  	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

/* SCALE */

.button-scale-up{
	animation-name: scale-up;
  	animation-duration: 1s;
  	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.button-scale-down{
	animation-name: scale-down;
  	animation-duration: 1s;
  	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

/* SPINNER */

.animate-spin {
    position: relative;
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/* ROTATES */

.animate-rotate-180 {
    position: relative;
    -webkit-animation:accelerate 1s linear 1;
    -moz-animation:accelerate 1s linear 1;
    animation:accelerate 1s linear 1;
	animation-fill-mode: forwards;
}

@-moz-keyframes accelerate { 100% { -moz-transform: rotate(180deg); } }
@-webkit-keyframes accelerate { 100% { -webkit-transform: rotate(180deg); } }
@keyframes accelerate { 100% { -webkit-transform: rotate(180deg); transform:rotate(180deg); } }

.animate-rotate-180-reverse {
    position: relative;
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
    -webkit-animation:accelerate-reverse  1s linear 1;
    -moz-animation:accelerate-reverse  1s linear 1;
    animation:accelerate-reverse  1s linear 1;
	animation-fill-mode: forwards;
	
}

@-moz-keyframes accelerate-reverse { 100% { -moz-transform: rotate(-0deg); } }
@-webkit-keyframes accelerate-reverse  { 100% { -webkit-transform: rotate(-0deg); } }
@keyframes accelerate-reverse  { 100% { -webkit-transform: rotate(-0deg); transform:rotate(-0deg); } }

.animate-rotate-90 {
	position: relative;
    -webkit-animation:rotate-90 0.5s linear 1;
    -moz-animation:rotate-90 0.5s linear 1;
    animation:rotate-90 0.5s linear 1;
	animation-fill-mode: forwards;
}

.animate-rotate-90-reverse {
	position: relative;
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
    -webkit-animation:otate-90-reverse 0.5s linear 1;
    -moz-animation:otate-90-reverse 0.5s linear 1;
    animation:rotate-90-reverse 0.5s linear 1;
	animation-fill-mode: forwards;
}

@-moz-keyframes rotate-90 { 100% { -moz-transform: rotate(-90deg); } }
@-webkit-keyframes rotate-90 { 100% { -webkit-transform: rotate(-90deg); } }
@keyframes rotate-90 { 100% { -webkit-transform: rotate(-90deg); transform:rotate(-90deg); } }

@-moz-keyframes rotate-90-reverse { 100% { -moz-transform: rotate(0deg); } }
@-webkit-keyframes rotate-90-reverse  { 100% { -webkit-transform: rotate(0deg); } }
@keyframes rotate-90-reverse  { 100% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } }

/* VIDEO */

.video-background{
	position: relative;
	z-index: 0;
}

.mobile-video-background{
	position: relative;
	z-index: 0;
}

.video-background-cms{
	position: absolute;
	overflow: hidden;
	width: 62% !important;
	z-index: 0;
}

video.fullscreen {
  position: relative;
  z-index: 0;
  object-fit: contain;
  width:100%;
  height:100%;

  &::-webkit-media-controls {
     
  }
}