/*@keyframes explosion {
    25% {
        content: "1";
        color: white;
        font-size: 100px;
    }

    50% {
        content: "2";
        color: white;
        font-size: 150px;
    }

    75% {
        content: "3";
        color: white;
        font-size: 200px;
    }

    100% {
        content: "";
        color: white;
        font-size: 250px;
    }
}*/
.screen-content[data-css-name="Howto"] {
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
  /*.countdown {
        display: none;
        z-index: 101;
        background-color: black;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        align-items: center;
        justify-content: center;

        .title.bomb:after {
            font-size: 0;
            content: "";
            display: block;
            color: red;
            text-align: center;
            animation: explosion 4s linear 1 reverse;
            transition: color .1s ease-in-out;
        }
    }*/
}
.screen-content[data-css-name="Howto"] .btn-start {
  position: absolute;
  bottom: 40px;
  left: calc(50vw - 440px / 2);
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Howto"] .btn-start {
    bottom: 40px;
    left: calc(50vw - 161.74px / 2);
  }
}
.screen-content[data-css-name="Howto"] h1 {
  font-size: 60px;
  font-weight: lighter;
  margin-top: 14.44vh;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Howto"] h1 {
    font-size: 30px;
    margin-top: 62px;
    margin-bottom: 0px;
  }
}
.screen-content[data-css-name="Howto"] .instructions {
  margin: auto;
  width: 1500px;
  height: 500px;
  /*.how-to-1 .image {
            background: url(/images/001_FF_AI_Challenge_How_To_1.jpg) center no-repeat;
        }

        .how-to-2 .image {
            background: url(/images/001_FF_AI_Challenge_How_To_2.jpg) center no-repeat;
        }

        .how-to-3 .image {
            background: url(/images/001_FF_AI_Challenge_How_To_3.jpg) center no-repeat;
        }*/
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Howto"] .instructions {
    width: calc(100vw - 120px);
    height: unset;
  }
}
.screen-content[data-css-name="Howto"] .instructions .how-to-item {
  float: left;
  width: 480px;
  color: #E6E6E6;
  margin: 0 10px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Howto"] .instructions .how-to-item {
    width: 100%;
    margin: unset;
    margin-right: -100%;
  }
}
.screen-content[data-css-name="Howto"] .instructions .how-to-item .title {
  font-size: 30px;
  font-weight: lighter;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Howto"] .instructions .how-to-item .title {
    display: none;
  }
}
.screen-content[data-css-name="Howto"] .instructions .how-to-item .image {
  background-color: #373737;
  border: 1px solid #707070;
  box-sizing: border-box;
  margin: 10px 0 0;
  width: 100%;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Howto"] .instructions .how-to-item .image {
    width: calc(100vw - 120px);
  }
}
.screen-content[data-css-name="Howto"] .instructions .how-to-item .describe {
  font-size: 20px;
  opacity: 0.9;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="Howto"] .instructions .how-to-item .describe {
    font-size: 14px;
    height: 110px;
  }
}