/*
Player viewport size = fixed at 480 x 270 px
*/

@font-face {
	font-family: 'roboto_condensedbold';
	src: url('fonts/robotocondensed-bold-webfont.woff2') format('woff2'),
		  url('fonts/robotocondensed-bold-webfont.woff') format('woff'),
		  url('fonts/robotocondensed-bold-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'AromaNo2LTCom-Semibold';
	src: url('fonts/AromaNo2LTCom-Semibold.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'AromaNo2LTCom-Light';
	src: url('fonts/AromaNo2LTCom-Light.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
}

*{
  box-sizing: border-box;
}

html,body{
	width: 100%;
  height: 100%;
}
#bodyRed{
  background-color: white;
  padding: 40px;
}
#bodyGreen{
  visibility:hidden
}

.container{
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.container #bodyRed{
  transform: translateX(100vw);
}
.container #bodyGreen{
  transform: translateX(0);
}


.container.warning #bodyRed{
  transform: translateX(0);
}
.container.warning #bodyGreen{
  transform: translateX(-100vw);
}

.container #bodyRed,
.container #bodyGreen{
  transition: transform 1s ease-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#left-red div, #left-green div{
  text-align: center;
}
#left-red{
  font-family: 'AromaNo2LTCom-Light';
  font-weight: 400;
  position: absolute;
  /* right: 50%; */
  top: calc(50vh - 270px);
  width: 1010px;
  color: white;
  font-size: 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 640px;
}
#left-green{
  font-family: 'AromaNo2LTCom-Light';
  position: absolute;
  /* right: 50%; */
  top: calc(50vh - 230px);
  width: 1010px;
  color: white;
  font-size: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 600px;
}
#left-green>div{
  display: flex;
  flex-direction: column;
}
.icon-green{
  padding-bottom: 50px;
}

#icon-stop{
  display: flex;
  margin: 0 auto;
}

#icon-camera{
  position: absolute;
    bottom: 40px;
    right: 40px;
}
#right-red, #right-green{
  font-family: 'AromaNo2LTCom-Semibold';
  position: absolute;
  top: calc(50vh - 175px);
  color: #5A5A5F;
  text-align: right;
  font-size: 90px;
}
#right-red{
  right: 80px;
  font-size: 50px;
  top: calc(50vh - 80px);


}
#right-green{
  right: 250px;
}

.appview{
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

img.logo{
  position: absolute;
	right: 40px;
  top: 40px;

}

.hasAccess{
  display: none;
}

.icon-green{
  animation: zoom-in-out 3s ease-in-out infinite;
}
#icon-stop{
  animation: zoom-in-out 5s ease-in-out infinite;
}

@keyframes zoom-in-out {
	0%, 100% {
    transform: scale(0.95);

	 }
	50% {
    transform: scale(1.05);

	}
 }

.theme-default{
  color: black;
  font-family:'roboto_condensedbold', sans-serif;
  font-size: 120px;
  background-color: white !important;
}

.theme-bmw{
  color: white;
  font-family:'BMWTypeWebBoldAll', sans-serif;
  font-size: 110px;
  background-color: #8e8e8e !important;

}

.languages-4{
  animation: slideDown4 15s ease-in-out infinite;
}

.languages-3{
  animation: slideDown3 15s ease-in-out infinite;
}

.languages-2{
  animation: slideDown2 15s ease-in-out infinite;
}

.languages-1{
/* Nothing */

}

/* Animation with intermediate keyframes  ( 4 LANGUAGES ) */
@keyframes slideDown4 {
  0% { transform: translateY(90vh); opacity: 1; }
  8%, 23% { transform: translateY(0vh); opacity:1 }
  27%{opacity: 0;}
  31%, 46% { transform: translateY(-100vh);opacity:1  }
  50%{opacity: 0;}
  54%, 69% { transform: translateY(-200vh);opacity:1  }
  73%{opacity: 0;}
  77%, 92% { transform: translateY(-300vh);opacity:1  }
  96%{opacity: 0;}
  100% { transform: translateY(-390vh); }
}

/* Animation with intermediate keyframes  ( 3 LANGUAGES ) */
@keyframes slideDown3 {
  0% { transform: translateY(90vh); opacity: 1; }
  10%, 30% { transform: translateY(0vh); opacity:1 }
  35%{opacity: 0;}
  40%, 60% { transform: translateY(-100vh);opacity:1  }
  65%{opacity: 0;}
  70%, 90% { transform: translateY(-200vh);opacity:1  }
  95%{opacity: 0;}
  100% { transform: translateY(-290vh); }
}

/* Animation with intermediate keyframes  ( 2 LANGUAGES ) */
@keyframes slideDown2 {
  0% { transform: translateY(90vh); opacity: 1;}
  13.3%, 43.3% { transform: translateY(0vh); opacity:1}
  51.6%{opacity: 0;}
  56.6%, 86.6% { transform: translateY(-100vh);opacity:1}
  95%{opacity: 0;}
  100% { transform: translateY(-190vh);}
}