#ctnS {
    width: 100%;
    height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #1b1b1b;

   margin-bottom: 20px;

  }


.switch {

  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.switch+label {

  top: 10px;
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;

}

.switch--shadow+label {

  padding: 2px;
  width: 120px;
  height: 60px;
  background-color: #dddddd;
  border-radius: 60px;

}

.switch--shadow+label:before,
.switch--shadow+label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: '';

}

.switch--shadow+label:before {
  right: 1px;
  background-color: #dddddd;
  border-radius: 60px;
  transition: all 0.4s;

}

.switch--shadow+label:after {
  width: 62px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.4s;

}

.switch--shadow:checked+label:before {
  background-color: #0088ff;
  font-weight: bold;
  justify-content: center;
  align-items: center;


}

.switch--shadow:checked+label:after {
  transform: translateX(60px);

}

/* Estilo da Imagem e dos botões da imagem que acende*/
#colorImage {
  width: 100%;

}

/* Estilo para a animação da luz*/
.polling_message {
  color: white;
  float: left;
  width: 100%;
  margin-right: 2%;
  font-size: 36px;
}

.view_port {

  background-color: black;
  height: 55px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: #019bde;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 30%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
  animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move_eye {
  from {
    margin-left: -20%;
  }

  to {
    margin-left: 100%;
  }
}

@keyframes move_eye {
  from {
    margin-left: -20%;
  }

  to {
    margin-left: 100%;
  }
}
@media screen and (min-device-width: 200px) and  (max-width: 290px){

  .switch--shadow+label {
    padding: 2px;
    width: 80px;
    height: 40px;
 
}
.switch--shadow+label:after {
  width: 45px;
}
.switch--shadow:checked+label:after {
  transform: translateX(35px);

}

#ctnS {
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #1b1b1b;


}
#colorImage {
  width: 100%;
  height: 200px;
}
}
@media screen and (min-device-width: 291px) and (max-width: 600px) {
  .switch--shadow+label {
    padding: 2px;
    width: 115px;
    height: 40px;
 
}
.switch--shadow+label:after {
  width: 52px;
}

#ctnS {
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #1b1b1b;


}
#colorImage {
  width: 100%;
  height: 200px;
}

}

.polling_message {
  font-size: 26px;
}