/* LIGHT BAR ESSENTIALS */
.lightbar{position:absolute;z-index:10;left:calc(40%);top:calc(40%);padding:4px 2px;width:19%;min-width:200px;height:50px}
.lightbar:after{top:0;left:0;position:absolute;z-index:10000;display:block;content: "";width:100%;height:100%;border-radius:3px;background:linear-gradient(to bottom, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.24) 1%, rgba(255, 255, 255, 0.14) 43%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%)}
.light{z-index:10;position:relative;width:1.5vw;height:1vh;padding:5px 10px 4px;background-color:#222;border-top:2px solid #111;border-right:1px solid #333;border-bottom:1px solid #333;border-left:2px solid #111;border-radius:6px;animation-duration:800ms;animation-name:light;animation-iteration-count:infinite;display:inline-block}
.inner-light{z-index:10;position:absolute;width:100%;height:100%;background-color:transparent;top:-1px;left:-1px;border-radius:6px;border:1px solid transparent;opacity:0}
#light-1 .inner-light,#light-6 .inner-light{z-index:777}
#light-2 .inner-light,#light-5 .inner-light{z-index:888}
#light-3 .inner-light,#light-4 .inner-light{z-index:999}
/* USER CONTROLS */
.controls{display:flex;flex-wrap:wrap;width:50px;position:absolute;left:32.5%;top:38.5%}
#off{
  cursor:pointer;
  outline: none;
  border: 2px solid #444;
  background-color: #ddd;
  border-radius: 3px;
  color: #000;
  max-width: 50px;
  padding: 0.35rem;
  font-size: 1rem;
  font-family: "Rubik", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 100%;
  margin: 5px 2px;
  z-index:5;
  display:block;
  position:relative;
}
/* ANIMATION BASICS */
.delay .inner-light{animation-delay:400ms}
/* RED/BLUE LIGHTS */
.strobe.blue .inner-light{animation-duration:800ms;animation-name:strobe-blue;animation-iteration-count: infinite}
.strobe.red .inner-light{animation-duration:800ms;animation-name:strobe-red;animation-iteration-count:infinite}
@keyframes strobe-blue {
  0%, 25% {
    background-color: #222;
    box-shadow: 0px 0px 0px 0px #000;
    border: 1px solid #111;
    opacity: 0;
  }
  28%, 50% {
    border: 1px solid #139eff;
    background-color: #66d2ff;
    box-shadow: 0px 0px 100px 25px #0078ff;
    opacity: 1;
  }
  52%, 55% {
    background-color: #222;
    box-shadow: 0px 0px 0px 0px #000;
    border: 1px solid #111;
    opacity: 0;
  }
  57%, 69% {
    border: 1px solid #139eff;
    background-color: #66d2ff;
    box-shadow: 0px 0px 100px 25px #0078ff;
    opacity: 1;
  }
  70%, 71% {
    background-color: #222;
    box-shadow: 0px 0px 0px 0px #000;
    border: 1px solid #111;
    opacity: 0;
  }
  72%, 75% {
    border: 1px solid #139eff;
    background-color: #66d2ff;
    box-shadow: 0px 0px 100px 25px #0078ff;
    opacity: 1;
  }
  77%, 100% {
    background-color: #222;
    box-shadow: 0px 0px 0px 0px #000;
    border: 1px solid #111;
    opacity: 0;
  }
}
@keyframes strobe-red {
  0%, 25% {
    background-color: #222;
    box-shadow: 0px 0px 0px 0px #000;
    border: 1px solid #111;
    opacity: 0;
  }
  28%, 50% {
    border: 1px solid #ee2819;
    background-color: #ff3c2d;
    box-shadow: 0px 0px 100px 25px #ff4444;
    opacity: 1;
  }
  52%, 55% {
    background-color: #222;
    box-shadow: 0px 0px 0px 0px #000;
    border: 1px solid #111;
    opacity: 0;
  }
  57%, 69% {
    border: 1px solid #ee2819;
    background-color: #ff3c2d;
    box-shadow: 0px 0px 100px 25px #ff4444;
    opacity: 1;
  }
  70%, 71% {
    background-color: #222;
    box-shadow: 0px 0px 0px 0px #000;
    border: 1px solid #111;
    opacity: 0;
  }
  72%, 75% {
    border: 1px solid #ee2819;
    background-color: #ff3c2d;
    box-shadow: 0px 0px 100px 25px #ff4444;
    opacity: 1;
  }
  77%, 100% {
    background-color: #222;
    box-shadow: 0px 0px 0px 0px #000;
    border: 1px solid #111;
    opacity: 0;
  }
}
/* TRAFFIC "CAUTION" SETTINGS */
.caution .inner-light{animation-duration:2000ms;animation-iteration-count:infinite}
#light-4.caution .inner-light,#light-3.caution .inner-light{animation-name:caution-1}
#light-5.caution .inner-light,#light-2.caution .inner-light{animation-name:caution-2}
#light-1.caution .inner-light,#light-6.caution .inner-light{animation-name:caution-3}
@keyframes caution-1 {
  0%, 16% {
    background-color: #222;
    box-shadow: 0px 0px 0px 0px #000;
    border: 1px solid #111;
    opacity: 0;
  }
  17%, 97% {
    border: 1px solid #ffba13;
    background-color: #ffd368;
    box-shadow: 0px 0px 100px 25px rgba(255, 168, 0, 0.8);
    opacity: 1;
  }
  99%, 100% {
    background-color: #222;
    box-shadow: 0px 0px 0px 0px #000;
    border: 1px solid #111;
    opacity: 0;
  }
}
@keyframes caution-2 {
  0%, 36% {
    background-color: #222;
    box-shadow: 0px 0px 0px 0px #000;
    border: 1px solid #111;
    opacity: 0;
  }
  37%, 97% {
    border: 1px solid #ffba13;
    background-color: #ffd368;
    box-shadow: 0px 0px 100px 25px rgba(255, 168, 0, 0.8);
    opacity: 1;
  }
  99%, 100% {
    background-color: #222;
    box-shadow: 0px 0px 0px 0px #000;
    border: 1px solid #111;
    opacity: 0;
  }
}
@keyframes caution-3 {
  0%, 56% {
    background-color: #222;
    box-shadow: 0px 0px 0px 0px #000;
    border: 1px solid #111;
    opacity: 0;
  }
  57%, 97% {
    border: 1px solid #ffba13;
    background-color: #ffd368;
    box-shadow: 0px 0px 100px 25px rgba(255, 168, 0, 0.8);
    opacity: 1;
  }
  99%, 100% {
    background-color: #222;
    box-shadow: 0px 0px 0px 0px #000;
    border: 1px solid #111;
    opacity: 0;
  }
}
.flex-center{position:absolute;left:calc(50% - 6vmax - 50px);top:8%;display:flex;justify-content:center;align-items:center;width:80px}
.speaker{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #000;
  background-color: #b4b4b4;
  
  &.small{
    width: 50px;
    height: 50px;
  }
}

.ring{
  left:20%;
  top:20%;
  width: 50px;
  height: 50px;
  background-color: #b4b4b4;
  border-radius: 50%;
  border: 3px solid #000;
  
  &.small{
    width: 25px;
    height: 25px;
  }
}

.interior{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #000;
  
  &.small{
    width: 5px;
    height: 5px;
  }
}
.circle1{animation:tweeder 1s infinite ease}
@keyframes tweeder{
  0%{ transform: scale(1.1) }
  15%{ transform: scale(1.15) }
  35%{ transform: scale(1.1)}
  70%{ transform: scale(1.15) }
  90%{ transform: scale(1.1) }
  100%{ transform: scale(1.1) }
}
#geluidAanKnop{cursor:pointer;display:block;position:absolute;left:calc(50.25% - 12vmax - 50px);bottom:8%;width:30px;height:30px;font-size:30px}
#geluidUitKnop{cursor:pointer;display:block;position:absolute;left:calc(50% - 12vmax - 50px);bottom:8%;width:30px;height:30px;font-size:30px}
/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {  
.controls{width:50px;left:5%;top:49.5%}
#off{max-width:20px;font-size:0.5rem}
#geluidAanKnop{left:calc(50.25% - 14vmax - 50px);bottom:5%;font-size:20px;width:20px;height:20px}
#geluidUitKnop{left:calc(50% - 14vmax - 50px);bottom:5%;font-size:20px;width:20px;height:20px}
.lightbar{position:absolute;z-index:10;left:21%;top:50%;padding:4px 2px;width:20%;min-width:200px;height:50px}
.lightbar:after{top:0;left:0;position:absolute;z-index:10000;display:block;content: "";width:100%;height:100%;border-radius:3px;background:linear-gradient(to bottom, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.24) 1%, rgba(255, 255, 255, 0.14) 43%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%)}
.light{z-index:10;position:relative;width:6px;height:8px;background-color:#222;border-top:2px solid #111;border-right:1px solid #333;border-bottom:1px solid #333;border-left:2px solid #111;border-radius:6px;animation-duration:800ms;animation-name:light;animation-iteration-count:infinite;display:inline-block}
.inner-light{z-index:10;position:absolute;width:100%;height:100%;background-color:transparent;top:-1px;left:-1px;border-radius:6px;border:1px solid transparent;opacity:0}
.flex-center{left:4%;top:5%}
.speaker{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #000;
  background-color: #b4b4b4;
  
  &.small{
    width: 35px;
    height: 35px;
  }
}

.ring{
  left:22.5%;
  top:22.5%;
  width: 30px;
  height: 30px;
  background-color: #b4b4b4;
  border-radius: 50%;
  border: 2px solid #000;
  
  &.small{
    width: 15px;
    height: 15px;
  }
}

.interior{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #000;
  
  &.small{
    width: 5px;
    height: 5px;
  }
}
	}
/*# sourceMappingURL=sirene.css.map */