@import url(https://fonts.googleapis.com/css?family=Montserrat);body,html{height:100%;font-family:Montserrat,sans-serif}body{margin:0;background:#eb3349;background:linear-gradient(to left,#f45c43,#eb3349);color:#fff}.container{height:inherit;display:-ms-grid;display:grid;-ms-grid-rows:1fr 1fr 50px;-ms-grid-columns:(1fr)[12];grid-template:1fr 1fr 50px/repeat(12,1fr)}.container div{grid-column:1/-1;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.container .timer{-ms-grid-row:1;-ms-grid-row-span:2;grid-row:1/3;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.container .footer{grid-row:3/-1;white-space:pre;font-size:12px}.heart{-webkit-animation:heartbeat .5s infinite alternate;animation:heartbeat .5s infinite alternate}.timer-item{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.timer-item .counter{font-size:5em}.timer-item .text{font-size:2em;text-transform:uppercase}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}.animated{-webkit-animation-duration:8s;animation-duration:8s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@media all and (max-width:430px){.container .timer{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}}@media all and (max-width:768px){.container .counter{font-size:3em}.container .text{font-size:1em}}@-webkit-keyframes heartbeat{to{-webkit-transform:scale(1.3);transform:scale(1.3)}}@keyframes heartbeat{to{-webkit-transform:scale(1.3);transform:scale(1.3)}}@-webkit-keyframes rollIn{from{opacity:0}to{opacity:1}}@keyframes rollIn{from{opacity:0}to{opacity:1}}