* {
      font-family: 'montserrat', sans-serif;
    }

    body {
      margin: 0;
      padding: 0;
    }

    .page {
      background: #f1f1f1;
      display: flex;
      flex-wrap: wrap;
    }

    .col {
      flex: 1;
      height: 100vh;
      position: relative;
    }

    .countdown-col {
      background: url('https://lh3.googleusercontent.com/pw/AP1GczNf0Rz7lvr8OlDTkUP4blQ-2OZb56kaQkUJcTn3et7BZZEXmVn5tO0Z8_0fpjm92NcXycD3eb_H_jBcKbvXEe-wFO3f_ha3sBcIobD09_95w1vcERR6ElTmDRWRdIPpPsvXLiv12nL2ooUmnWLa8HQ=w941-h681-s-no-gm?authuser=0') no-repeat center;
      background-size: cover;
    }

    .time {
      color: #fff;
      text-transform: uppercase;
      width: 90%;
      display: flex;
      justify-content: center;
    }

    .middle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .time span {
      padding: 0 14px;
      font-size: 10px;
    }

    .time span div {
      font-size: 40px;
    }

    .newslatter {
      width: 90%;
    }

    .newslatter h4 {
      font-style: italic;
      font-size: 12px;
    }

    .newslatter input,
    .newslatter button {
      display: block;
      margin: 12px auto;
      width: 100%;
      max-width: 400px;
      box-sizing: border-box;
      padding: 14px 20px;
      border-radius: 30px;
      border: 1px solid #ddd;
      outline: none;
    }

    .newslatter-button {
      background: linear-gradient(125deg, #3498db, #34495e);
      color: #fff;
      cursor: pointer;
      transition: 0.4s;
    }

    .newslatter-button:hover {
      opacity: 0.7;
    }

    @media screen and (max-width: 900px) {
      .col {
        flex: 100%;
      }
    }