@import 'https://fonts.googleapis.com/css?family=Titillium+Web:400,700';
   /*html {
  background-color: #c4cad5;
}*/
   body {
     position: relative;
     background-image: url(../img/cnt-bg.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     font-family: 'Titillium Web', sans-serif !important;
     -webkit-font-smoothing: antialiased;
     height: 100vh;
     width: 100%;
     touch-action: manipulation;
   }
   #restartbtn {
     text-align: center;
     color: #fff;
     cursor: pointer;
     margin: 20px;
     touch-action: manipulation;
   }
   .table {
     display: table;
     height: 100%;
     width: 100%;
     position: relative;
   }
   .cell {
     display: table-cell;
     vertical-align: middle;
     position: relative;
     width: 100%;
     text-align: center;
     touch-action: manipulation;
   }
   /*------
# Pincode
----*/
   #pincode {
     position: initial;
     overflow: hidden;
     /*height: 86vh;
  width: 63vh;*/
     z-index: 9999;
     background-color: #f0f3f4;
     /*background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/214624/mountain.jpg");*/
     background-size: cover;
     background-position: center;
     color: #fff;
     border-radius: 10px;
     text-align: center;
     -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6);
     -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6);
     box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6);
     top: 50%;
     left: 50%;
     padding: 50px;
     /*margin-top: -335px;*/
     /* Negative half of height. */
     /*margin-left: -188px;*/
     /* Negative half of width. */
     touch-action: manipulation;
   }
   #pincode h3 {
     color: #e90079;
     margin: 35px 0 80px;
   }
   #numbers {
     max-width: 400px;
     padding: 0 20px;
     margin: 0 auto;
     position: relative;
     display: block;
     -webkit-transition: all 1s ease-out;
     -moz-transition: all 1s ease-out;
     transition: all 1s ease-out;
     opacity: 1;
     touch-action: manipulation;
   }
   #numbers.hide {
     opacity: 0.3;
   }
   #pincode button {
     width: 80px;
     height: 80px;
     margin-bottom: 30px;
     background-color: #005e94;
     border: 0;
     color: #fff;
     font-size: 25px;
     line-height: 50px;
     border-radius: 100%;
     opacity: 1;
     outline: 0;
     border: 2px solid #299ceb;
     touch-action: manipulation;
   }
   #pincode button:active {
     background-color: rgba(0, 0, 0, 0.6);
     outline: 0;
   }
   #fields {
     padding: 0 20px;
     margin: 50px auto;
     position: relative;
     display: block;
   }
   #fields .numberfield {
     text-align: center;
     display: inline-block;
     margin: 0 5px;
     touch-action: manipulation;
   }
   #fields .numberfield span {
     height: 20px;
     width: 20px;
     border-radius: 100%;
     position: relative;
     display: inline-block;
     text-align: center;
     touch-action: manipulation;
   }
   #fields .numberfield:nth-child(1) span {
     border: 2px solid #f0098d;
   }
   #fields .numberfield:nth-child(2) span {
     border: 2px solid #f36d26;
   }
   #fields .numberfield:nth-child(5) span {
     border: 2px solid #57b74c;
   }
   #fields .numberfield:nth-child(4) span {
     border: 2px solid #2fa1dc;
   }
   #fields .numberfield:nth-child(3) span {
     border: 2px solid #555;
   }
   #fields .numberfield:nth-child(6) span {
     border: 2px solid #92278f;
   }
   #fields .numberfield:nth-child(7) span {
     border: 2px solid #57b74c;
   }
   #fields .numberfield:nth-child(8) span {
     border: 2px solid #f36d26;
   }
   #fields .numberfield:nth-child(9) span {
     border: 2px solid #2fa1dc;
   }
   #fields .numberfield:nth-child(10) span {
     border: 2px solid #f0098d;
   }
   .txt_dlt_btn {
     margin: 24px 0;
   }
   #fields .numberfield.active:nth-child(1) span {
     background: #f0098d;
   }
   #fields .numberfield.active:nth-child(2) span {
     background: #f36d26;
   }
   #fields .numberfield.active:nth-child(5) span {
     background: #57b74c;
   }
   #fields .numberfield.active:nth-child(4) span {
     background: #2fa1dc;
   }
   #fields .numberfield.active:nth-child(3) span {
     background: #555;
   }
   #fields .numberfield.active:nth-child(6) span {
     background: #92278f;
   }
   #fields .numberfield.active:nth-child(7) span {
     background: #57b74c;
   }
    #fields .numberfield.active:nth-child(8) span {
     background: #f36d26;
   }
    #fields .numberfield.active:nth-child(9) span {
     background: #2fa1dc;
   }
    #fields .numberfield.active:nth-child(10) span {
     background: #f0098d;
   }
   
   #fields .numberfield.right span {
     background-color: #272a2f;
     border-color: #272a2f;
     transition: all .5s ease-in-out;
     -webkit-transition: all .5s ease-in-out;
   }
   /*------
# Toast Grid
----*/
   .grid {
     list-style: none;
     margin-left: -20px;
   }
   .grid__col--1-of-3, .grid__col--2-of-6, .grid__col--4-of-12 {
     width: 33.33333%;
   }
   .grid__col--1-of-4, .grid__col--2-of-8, .grid__col--3-of-12 {
     width: 25%;
   }
   .grid__col {
     box-sizing: border-box;
     display: inline-block;
     margin-right: -.25em;
     min-height: 1px;
     padding-left: 20px;
     vertical-align: top;
   }
   .grid__col--centered {
     display: block;
     margin-left: auto;
     margin-right: auto;
   }
   .grid__col--d-first {
     float: left;
   }
   .grid__col--d-last {
     float: right;
   }
   .grid--no-gutter {
     margin-left: 0;
     width: 100%;
   }
   .grid--no-gutter .grid__col {
     padding-left: 0;
   }
   .grid--no-gutter .grid__col--span-all {
     margin-left: 0;
     width: 100%;
   }
   .grid__col--ab {
     vertical-align: bottom;
   }
   .grid__col--am {
     vertical-align: middle;
   }
   .miss {
     -webkit-animation: miss .8s ease-out 1;
     animation: miss .8s ease-out 1;
   }
   @-webkit-keyframes miss {
     0% {
       -webkit-transform: translate(0, 0);
       transform: translate(0, 0);
     }
     10% {
       -webkit-transform: translate(-25px, 0);
       transform: translate(-25px, 0);
     }
     20% {
       -webkit-transform: translate(25px, 0);
       transform: translate(25px, 0);
     }
     30% {
       -webkit-transform: translate(-20px, 0);
       transform: translate(-20px, 0);
     }
     40% {
       -webkit-transform: translate(20px, 0);
       transform: translate(20px, 0);
     }
     50% {
       -webkit-transform: translate(-10px, 0);
       transform: translate(-10px, 0);
     }
     60% {
       -webkit-transform: translate(10px, 0);
       transform: translate(10px, 0);
     }
     70% {
       -webkit-transform: translate(-5px, 0);
       transform: translate(-5px, 0);
     }
     80% {
       -webkit-transform: translate(5px, 0);
       transform: translate(5px, 0);
     }
     100% {
       -webkit-transform: translate(0, 0);
       transform: translate(0, 0);
     }
   }
   @keyframes miss {
     0% {
       -webkit-transform: translate(0, 0);
       transform: translate(0, 0);
     }
     10% {
       -webkit-transform: translate(-25px, 0);
       transform: translate(-25px, 0);
     }
     20% {
       -webkit-transform: translate(25px, 0);
       transform: translate(25px, 0);
     }
     30% {
       -webkit-transform: translate(-20px, 0);
       transform: translate(-20px, 0);
     }
     40% {
       -webkit-transform: translate(20px, 0);
       transform: translate(20px, 0);
     }
     50% {
       -webkit-transform: translate(-10px, 0);
       transform: translate(-10px, 0);
     }
     60% {
       -webkit-transform: translate(10px, 0);
       transform: translate(10px, 0);
     }
     70% {
       -webkit-transform: translate(-5px, 0);
       transform: translate(-5px, 0);
     }
     80% {
       -webkit-transform: translate(5px, 0);
       transform: translate(5px, 0);
     }
     100% {
       -webkit-transform: translate(0, 0);
       transform: translate(0, 0);
     }
   }
   #hastylink {
     position: fixed;
     bottom: 5px;
     left: 0;
     right: 0;
     font-size: 13px;
     color: #fff;
     text-decoration: none;
     text-align: center;
   }
   .mediapage {
     /*left: 33%;*/
     margin: 0 auto;
   }
   @media (max-width: 768px) {
     .mediapage {
       left: 8%;
     }
     .main-logo {
       width: 100%;
     }
     #pincode h3 {
       margin: 0 !important;
     }
     #pincode {
       padding: 30px;
     }
     #fields {
       margin: 30px auto;
     }
   }