/* css */

/* Fonts */
@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=c4b2abf6-3bfb-4b12-b296-ca0e009b5092&fontids=6286145");
@font-face{
    font-family:"CentSchbook BT W01 Roman";
    src:url("fonts/6286145/fd717dcb-51a5-40f6-aa94-147c5b307292.woff2") format("woff2"),url("fonts/6286145/e94c9395-38ee-4967-b604-cf988800472b.woff") format("woff");
}

/* Main */
body {
  font-family: 'CentSchbook BT W01 Roman';
  font-weight: normal;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;

}

body, * {margin: 0; padding: 0}

.none {display: none}
#days{display: inline-block;}

/* Type */
h2, p {margin: 0 0 1vw 0}
h2, li  {font-size: 2vw;font-weight: 400}
p{font-size: 1.69vw;hyphens: auto; -webkit-hyphenate-character: auto;    line-height: calc(100vw - 97.65vw);}
.uppercase {text-transform: uppercase; letter-spacing: 0.1vw}
.center {text-align: center;    padding: 1.5vw 0 0vw 0;}
sup {    vertical-align: -webkit-baseline-middle;
    font-size: 1vw;
    margin: 0;
    padding: 0;
    line-height: 0;}


    #nav a {color: black; text-decoration: none;letter-spacing: 0vw;transition: all 1s ease-out;
      width: fit-content;
      box-sizing: content-box;
      position: absolute;
      right: 1vw;}
    #nav a:hover {letter-spacing: 0.5vw; color: grey;}

#footer a {color: grey; text-decoration: none;letter-spacing: 0.5vw;transition: all 1s ease-out;}
#footer a:hover {letter-spacing: 0.15vw; color: black;}
/* nav */
#nav {padding: 1.5vw;}
ul {display: flex;justify-content: space-between;align-items: flex-start;margin: 0;padding: 0}
li {list-style-type: none;}
#nav li:nth-last-child(2) {    margin-left: -24vw;}

/* Other */
#intro {margin: 2vw 0 4vw 0}
#intro img {
    max-width: 70vw;
    width: 100%;
    display: block;
    margin: 0px auto;}

#desc {
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
  padding: 1.5vw;
  }
#desc .flex-item {max-width: 48%; width: 100%}

/* Graphic */

span.graphic {position: relative; width: 100%; display: flex; align-items: center;    padding: 0 0 2vw 0;}
.graph-part-1 {max-width: 30%;width: 100%;position: relative; height: 5vw; left: 11vw}

.blockquote {
    margin: 0;
    padding: 0;
    font-size: calc(1vw - 0.2vw);
    position: absolute;
    top: 1.5vw;
  }
.line {
    position: absolute;
    left: 7vw;
    z-index: 9999;
    height: 1px;
    background-color: black;
    top: 1.9vw;
    width: 58%;
    opacity: 1;
  }
  .delay {
      animation-duration: 5s;
      animation-name: delay;
    }

.graph-part-2 {max-width: 70%;width: 100%;position: relative;height: 6vw; left: 7vw}

@keyframes rectleft {
  0% {
    width: 0%;
  }


  100% {

    width: 30%;
  }
}

@keyframes delay {
  0% {
    opacity: 0;
  }

  85% {
    opacity: 0.3;
  }

  100% {

    opacity: 1;
  }
}
.circle {
    width: 5vw;
    height: 5vw;
    background-color: white;
    border-radius: 90%;
    position: absolute;
    z-index: 2;

  }

  .animation {
      animation-duration: 3s;
      animation-name: rectleft;
    }
.rect {
    width: 30%;
    height: 5vw;
    background-color: black;
    position: absolute;
    z-index: 1;
    left: 2.5vw;
  }


/* canvas */

#play {background-color: black; color: white; overflow: hidden;}
#nav-play {display: flex;justify-content: space-around;
    align-items: center;
    align-content: center;width: 100%}
#nav-play ul {
      display: flex;
    justify-content: flex-start;
    position: relative;
    max-width: 30vw;
    width: 100%;
    align-items: center;
    align-content: center;
  }
#nav-play ul:nth-child(2) {
    justify-content: center;
    text-align: center;display: contents;
  }
  #nav-play ul:nth-child(2) p {
    font-size: 1vw;
    line-height: 1.5vw;
    margin: 0;
    padding: 0;
    border: 1px solid white;
border-radius: 20px;
padding: 3px 13px;
margin-top: -0.5vw;
  }
  #nav-play ul:nth-child(2) li {font-size: 2vw
    }
    #nav-play ul:nth-child(3) {
        justify-content: flex-end;
        text-align: center;
      }

#nav-play ul li {font-size: 1vw; margin-right: 3vw}

#canvas {min-height:80vh ; width: 100%; }


/* Canvas form */


.container {touch-action: none; position: relative;}
#nav-canvas {display: flex;    justify-content: space-evenly;    margin-top: 2vw;}

.item {
     fill: white;
     touch-action: none;
     user-select: none;
     height: 10vw;
     fill-opacity: 1;
     transform: scaleX(1);
     transform: scaleY(1);

   }
   #nav-canvas .container:nth-child(even) .anim {
     -webkit-animation: anim2 3s ease-in-out infinite;
       -moz-animation: anim2 3s ease-in-out infinite;
       -ms-animation: anim2 3s ease-in-out infinite;
       -o-animation: anim2 3s ease-in-out infinite;
       animation: anim2 3s ease-in-out infinite;
   }
   .item:active {
     fill: grey;
   }
   .item:hover {
     cursor: pointer;
   }

  svg {    height: 10vw;
    }
.show {display: block !important}
   .rotation-handle {
     padding: 3px 4px;
       position: absolute;
       display: none;
       left: 50%;
       z-index: 9999;
       /* right: 0; */
       /* bottom: -35px; */
       background-color: grey;
       transform: translate(-50%, -50%);
       border-radius: 20px;
       line-height: 1;
       text-align: center;
       font-weight: bold;
       color: #fff;
       top: 50%;
       width: 15px;
       z-index: 999;
       opacity: 0.2;

}

.resize{
  height: 120px;
  width: 120px;
  position:absolute;
  z-index:0;
}
/* checkbox */
.round {
  position: relative;
  display: flex;
}

.round p {margin-left: 1.2vw}
.round p:hover {cursor: pointer;}

.round a {color:white ; text-decoration: none; transition: all 1s ease-out;}
.round a:hover {color: grey; }

.round label {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 0.4vw;
  width: 28px;
}

.round label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 8px;
  transform: rotate(-45deg);
  width: 12px;
}

.round input[type="checkbox"] {
  visibility: hidden;
}

.round input[type="checkbox"]:checked + label {
  background-color: #000;
  border-color: #FFF;
}

.round input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

.anim {-webkit-animation: anim 3s ease-in-out infinite;
  -moz-animation: anim 3s ease-in-out infinite;
  -ms-animation: anim 3s ease-in-out infinite;
  -o-animation: anim 3s ease-in-out infinite;
  animation: anim 3s ease-in-out infinite;
}



@keyframes anim {
  0% {
    margin-left: 0px;
    padding: 0px;
    transform: rotate(0deg);
    margin:0px
}
25% {

  transform: scaleX(2);

}

50% {

  transform: scaleY(2);
  width: calc(100vw - 97vw)

}

75% {
  transform: rotate(90deg);

}

100% {
  margin: 0px;
  transform: rotate(90deg);
  margin:0px

}

}


@keyframes anim2 {
  0% {
    margin-left: 0px;
    padding: 0px;
    transform: rotate(0deg);
    margin:0px
}
25% {

  transform: scaleX(2);

}

50% {
  margin-left: 0px;
  margin-top: 0px;
  transform: scaleY(2);

}

75% {
  transform: rotate(450deg);

}

100% {
  margin: 0px;
  transform: rotate(180deg);
  margin:0px

}

}

/* SWIPER */

#swipe {
  position: relative;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
}

.images-center {
  position: relative;
    margin: 0px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
}
#swipe img{
  max-width: 50%;
    margin: 0;
    padding: 0px 0px 4vw;
}

#swipe img:nth-child(2){
  max-width: 80%;
    padding: 0px 0px 3vw;
}

#swipe img:nth-child(3){
    margin-top: -3vw;
}


.thank {
  font-size: 10vw;
  margin: 10vw 0 0;
}
.obtain {margin: 0 0 40vw}
.obtain h2 {line-height: 3vw}

#countdown{
  display: inline-block;
  line-height: 3vw;
letter-spacing: 0.15vw;

}
/* media */

@media all and (max-width:520px){
      #desc {
        display: block;
        padding: 8vw;
      }
      #desc .flex-item {max-width: 100%}
      #desc h2 {font-size: 4vw}
      #desc p {font-size: 3vw; line-height: 4.2vw}
      #desc .flex-item:nth-child(2) {margin-top: 5vw}
      #canvas {min-height: 45vh}
      #nav-play p {font-size:2vw}
      #nav-play ul li {
        font-size: 1vw;
        margin-right: 1vw;
      }
      #nav-play ul:nth-child(2) p {
        font-size: 3vw;line-height: 3.3vw;
      }
      #nav-play {    margin-bottom: 5vw;}
      #play h2 {    padding: 2vw 0 2vw;
        font-size: 4vw;}

        #swipe{margin-bottom: 5vw}


      .line {
          position: absolute;
          left: 13vw;
          z-index: 9999;
          height: 1px;
          background-color: black;
          top: 1.9vw;
          width: 55%;
          opacity: 1;
      }
      li {
    font-size: 2.5vw;
    font-weight: 400;
  }
      #nav a {
        color: black;
        text-decoration: none;
        letter-spacing: 0vw;
        transition: all 1s ease-out;
        width: fit-content;
        box-sizing: content-box;
        position: absolute;
        right: 4vw;
    }

    .blockquote {font-size: 1.5vw; top:1vw}
    span.graphic {padding-top: 2vw}

    .graph-part-1 {
    left: 16vw;
    }
    .graph-part-2 {
    left: 13vw;
    }
  }

@media all and (min-width:521px) and (max-width:780px){
      #desc {
        display: block;
        padding: 8vw;
      }
      #desc .flex-item {max-width: 100%}
      #desc h2 {font-size: 3vw}
      #desc p {font-size: 2vw; line-height: 3.2vw}
      #desc .flex-item:nth-child(2) {margin-top: 5vw}
      #canvas {min-height: 45vh}
      #nav-play p {font-size:2vw}
      #nav-play ul li {
        font-size: 1vw;
        margin-right: 1vw;
      }
      #nav-play ul:nth-child(2) p {
        font-size: 2vw;line-height: 2.3vw;
      }
      #nav-play {    margin-bottom: 5vw;}
      #play h2 {    padding: 2vw 0 2vw;
        font-size: 4vw;}
      #swipe{margin-bottom: 5vw}

      .line {
          position: absolute;
          left: 13vw;
          z-index: 9999;
          height: 1px;
          background-color: black;
          top: 1.9vw;
          width: 55%;
          opacity: 1;
      }
      li {
    font-size: 2.5vw;
    font-weight: 400;
  }
        #nav a {
          color: black;
          text-decoration: none;
          letter-spacing: 0vw;
          transition: all 1s ease-out;
          width: fit-content;
          box-sizing: content-box;
          position: absolute;
          right: 4vw;
      }
      .blockquote {font-size: 1.5vw; top:1vw}
      .graph-part-1 {
      left: 16vw;
      }
      .graph-part-2 {
      left: 13vw;
      }

  }