#browser {
  background: black;
  width: 100%;
  height: 100%;
  border-radius: 0.5em;
  background: #ddd;
  position: relative;
  overflow: hidden;
  -webkit-animation: scale-up-center 0.6s ease-in-out both;
  animation: scale-up-center 0.6s ease-in-out both;
  box-shadow: 1px 1px 5px 0 rgba(26, 26, 67, 0.05), 39px 62.5px 125px -25px rgba(50, 50, 93, 0.5), 23.4px 37.5px 75px -37.5px rgba(0, 0, 0, 0.6);
  z-index: 1; }
  #browser #urlbar {
    position: absolute;
    left: 80px;
    top: 8px;
    right: 10px;
    padding: 0 0.25em;
    background: #fff;
    text-align: left; }
  #browser .buttons {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 30px; }
    #browser .buttons .button {
      background: #59C9A5;
      border-radius: 0.5em;
      width: 14px;
      height: 14px;
      display: inline-block;
      margin-right: 0.25em; }
      #browser .buttons .button:nth-child(1) {
        background: #EF6F6C; }
      #browser .buttons .button:nth-child(2) {
        background: #999; }
  #browser #body-flycricket {
    position: absolute;
    top: 40px;
    right: 10px;
    left: 10px;
    bottom: 10px;
    background: linear-gradient(25deg, #1e8ab0, #008DD5);
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    transform: translateY(0) translateX(600px); }
    #browser #body-flycricket.in {
      transform: translateX(0); }
    #browser #body-flycricket .title {
      padding: 1em;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      color: white; }
    #browser #body-flycricket .prompt {
      padding: 2em 2em;
      width: 50%;
      margin: auto;
      text-align: center;
      margin-top: 10%; }
    #browser #body-flycricket .overview-icon {
      width: 50px;
      display: inline-block;
      margin-bottom: 0.75em;
      margin-right: 0.35em; }
      #browser #body-flycricket .overview-icon .st0 {
        fill: #fff; }
  #browser #body-itunes {
    position: absolute;
    top: 40px;
    right: 10px;
    left: 10px;
    bottom: 10px;
    background: #fff;
    overflow: hidden;
    transition: transform 0.5s linear;
    -webkit-transition: transform 0.5s linear;
    transform: translateX(600px); }
    #browser #body-itunes #stamp {
      font-family: 'Alfa Slab One', cursive;
      position: absolute;
      bottom: 50px;
      right: 0px;
      left: 0px;
      text-align: center;
      text-transform: uppercase;
      color: #DA6563;
      font-size: 2em;
      transition: all 0.5s ease-in;
      opacity: 0;
      transform: scale(3); }
      #browser #body-itunes #stamp.slam {
        opacity: 1;
        transform: scale(1) rotate(-15deg); }
    #browser #body-itunes.in {
      transform: translateX(0); }
    #browser #body-itunes.out {
      transform: translateX(-600px); }
    #browser #body-itunes #ios-only {
      transform: scale(1);
      position: relative; }
  #browser .body-app {
    transition: transform  0.5s linear, opacity  0.75s linear;
    transform: translateX(0);
    position: absolute;
    top: 40px;
    right: 10px;
    left: 10px;
    bottom: 10px;
    background: #78B8D2;
    overflow: hidden;
    opacity: 0;
    display: none; }
    #browser .body-app .title {
      width: 50%;
      height: 50%;
      margin-top: 10%;
      border-radius: 0.5em;
      position: relative;
      display: inline-block;
      position: relative;
      float: right;
      color: #fff;
      font-size: 2em;
      text-align: left; }
      #browser .body-app .title #phone-form {
        transition: opacity 0.5s ease-in-out;
        display: none;
        opacity: 0; }
        #browser .body-app .title #phone-form #phone-input {
          width: 100%;
          background: rgba(255, 255, 255, 0.8);
          margin: 1em 0;
          border: 1px solid #eee;
          margin-bottom: 0;
          padding: 0.25em;
          font-size: 0.35em;
          border-radius: 0.25em; }
        #browser .body-app .title #phone-form #phone-desc {
          font-size: 0.5em;
          color: white;
          display: inline-block;
          margin-left: 10px;
          position: relative;
          bottom: 7px; }
          #browser .body-app .title #phone-form #phone-desc #phone-desc-fc {
            position: relative;
            text-decoration: none;
            color: white; }
            #browser .body-app .title #phone-form #phone-desc #phone-desc-fc:before {
              content: "";
              position: absolute;
              width: 100%;
              height: 1px;
              bottom: -2px;
              left: 0;
              background-color: #fff;
              visibility: hidden;
              -webkit-transform: scaleX(0);
              transform: scaleX(0);
              -webkit-transition: all 0.4s ease-in-out 0s;
              transition: all 0.4s ease-in-out 0s; }
            #browser .body-app .title #phone-form #phone-desc #phone-desc-fc.underline {
              color: white; }
              #browser .body-app .title #phone-form #phone-desc #phone-desc-fc.underline:before {
                visibility: visible;
                -webkit-transform: scaleX(1);
                transform: scaleX(1); }
        #browser .body-app .title #phone-form #phone-submit {
          display: inline-block;
          background: #EF6F6C;
          color: #fff;
          padding: 0.2em 1em;
          font-size: 0.5em;
          position: relative;
          top: -0.5em;
          border-radius: 0.25em; }
          #browser .body-app .title #phone-form #phone-submit.clicked {
            -webkit-animation: itunes-click 0.8s ease-in-out both;
            animation: itunes-click 0.8s ease-in-out both; }
        #browser .body-app .title #phone-form.show {
          display: block;
          opacity: 1; }
      #browser .body-app .title .itunes {
        margin-top: 0.5em;
        position: relative;
        display: inline-block;
        transition: all 1s linear; }
        #browser .body-app .title .itunes img {
          transition: all 0.5s ease-in-out; }
          #browser .body-app .title .itunes img.clicked {
            -webkit-animation: itunes-click 0.8s ease-in-out both;
            animation: itunes-click 0.8s ease-in-out both; }
          #browser .body-app .title .itunes img.grow-out {
            transform: scale(3);
            opacity: 0; }
          #browser .body-app .title .itunes img.hidden {
            opacity: 0; }
    #browser .body-app .iphone {
      width: 35%;
      height: 100%;
      background: #fff;
      border-radius: 0.5em;
      position: relative;
      display: inline-block;
      left: 2em;
      top: 2em;
      float: left; }
      #browser .body-app .iphone .screen {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 40px;
        background: #888;
        bottom: 0; }
    #browser .body-app.out {
      transform: translateX(-600px); }

#browser-container {
  transition: all 1.0s ease-in-out; }
  #browser-container.small {
    -webkit-animation: scale-down-left 0.8s ease-in-out both;
    animation: scale-down-left 0.8s ease-in-out both; }

#app-icon {
  border-radius: 0.2em;
  background: #F87930;
  border: 0;
  width: 50px;
  height: 50px;
  vertical-align: inherit;
  position: relative;
  top: 0.75em; }

#browser #body-flycricket .prompt #app-icon.phoned {
  -webkit-animation: icon-out 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: icon-out 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

#new-app-icon {
  border-radius: 0.2em;
  background: #F87930;
  border: 0;
  width: 30px;
  height: 30px;
  position: relative;
  top: 4px;
  left: 4px;
  vertical-align: inherit;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out; }

#phone-container {
  z-index: 3; }

#phone-container #separate-phone {
  transition: all 0.8s ease-in-out;
  position: absolute;
  right: 0;
  top: 20px;
  width: 180px;
  height: 284px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 1em;
  transform: scale(0);
  opacity: 0;
  box-shadow: 1px 1px 5px 0 rgba(26, 26, 67, 0.05), 39px 62.5px 125px -25px rgba(50, 50, 93, 0.5), 23.4px 37.5px 75px -37.5px rgba(0, 0, 0, 0.6); }
  #phone-container #separate-phone #separate-phone-container {
    position: absolute;
    right: 10px;
    top: 30px;
    left: 10px;
    bottom: 30px;
    overflow: hidden; }
    #phone-container #separate-phone #separate-phone-container #separate-phone-container-screen {
      width: 100%;
      height: 100%;
      position: relative;
      background: #222; }
      #phone-container #separate-phone #separate-phone-container #separate-phone-container-screen #app-title {
        transition: opacity 0.5s ease-in-out;
        position: absolute;
        text-align: center;
        padding: 2em 1em;
        font-size: 1.5em;
        line-height: 1.2em;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        color: white;
        z-index: 999;
        opacity: 0; }
      #phone-container #separate-phone #separate-phone-container #separate-phone-container-screen #icons {
        padding-top: 10px;
        padding-left: 10px;
        text-align: left; }
        #phone-container #separate-phone #separate-phone-container #separate-phone-container-screen #icons .icon {
          width: 40px;
          height: 40px;
          background: #444;
          border-radius: 8px;
          display: inline-block;
          margin: 2px; }
        #phone-container #separate-phone #separate-phone-container #separate-phone-container-screen #icons #new-icon {
          transition: transform 0.75s ease-in-out;
          background: #008DD5;
          transform: scale(0); }
          #phone-container #separate-phone #separate-phone-container #separate-phone-container-screen #icons #new-icon.show {
            transform: scale(1); }
          #phone-container #separate-phone #separate-phone-container #separate-phone-container-screen #icons #new-icon.grow {
            transform: scale(8); }

@keyframes ios-only-pulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.2); }
  100% {
    transform: scale(1); } }

@keyframes itunes-click {
  0% {
    transform: scale(1);
    box-shadow: 0; }
  50% {
    transform: scale(1.2);
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); }
  100% {
    transform: scale(1);
    box-shadow: 0; } }

@keyframes itunes-out {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-400px); } }

@keyframes icon-out {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  100% {
    -webkit-transform: translateX(460px) translateY(-90px);
    transform: translateX(460px) translateY(-90px); } }

@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  75% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes scale-down-left {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1; }
  100% {
    opacity: 0.8;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 50% 50%; } }