@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
section.tempmobile {
  font-family: 'Roboto', sans-serif;
}

h2{
  font-family: 'Roboto', sans-serif;
}
.style_icon_browsers{
  width: 180px;
}
h3{
  margin-top: -5px;
  margin-bottom: 45px;
}
  section.tempmobile {
    display: block;
    background-image: url("http://repoimagenesmesfix8182.cloudapp.net/images/mobile_temp/mobile_bg.png");
    background-size: contain;
  }
  html, body {
    font-family: 'Open Sans', sans-serif;
    height: 100vh;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: 100%;
    font-style: normal;
    line-height: 1;
  }
  body * {
    box-sizing: border-box;
  }
  .header h2 {
    font-size: 1.8rem;
    color: #6F7272;
    font-weight: 100;
    padding: 0 1.5rem;
    line-height: initial;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .message {
    border-top: 1.5rem solid #A4CEDD;
    position: relative;
  }
  .message h3 {
    font-size: 1.2rem;
    color: white;
    font-weight: 100;
    padding: 0 1rem;
    line-height: initial;
    position: relative;
    top: 32%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-weight: bold;
  }
  .message-border {
    background: url("http://repoimagenesmesfix8182.cloudapp.net/images/mobile_temp/footer_mobile.png")repeat-x bottom;
    height: 25px;
    position: absolute;
    bottom: -4px;
    width: 100%;
    background-repeat-y: no-repeat;
    background-size: contain;
  }
  .footer img {
    position: relative;
    top: 50%;
    width: 200px;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  
  div.header {
    height: 25vh;
  }
  div.pc {
    height: 35vh;
  }
  div.message {
    height: 22vh;
    background-color: #6DAFCC;
  }
  div.footer {
    height: calc(100vh - 86vh);
    background-color: #2877A3;
  }
  @-webkit-keyframes screenOn {
    0% {
      -webkit-transform: scale3d(0, 0, 1);
              transform: scale3d(0, 0, 1);
    }
    1% {
      -webkit-transform: scale3d(0.01, 0.01, 1);
              transform: scale3d(0.01, 0.01, 1);
    }
    50% {
      -webkit-transform: scale3d(1, 0.01, 1);
              transform: scale3d(1, 0.01, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }
  @keyframes screenOn {
    0% {
      -webkit-transform: scale3d(0, 0, 1);
              transform: scale3d(0, 0, 1);
    }
    1% {
      -webkit-transform: scale3d(0.01, 0.01, 1);
              transform: scale3d(0.01, 0.01, 1);
    }
    50% {
      -webkit-transform: scale3d(1, 0.01, 1);
              transform: scale3d(1, 0.01, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }
  @-webkit-keyframes slideMug {
    0% {
      -webkit-transform-origin: 100% 100%;
              transform-origin: 100% 100%;
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0px);
              transform: translateX(0px);
      opacity: 1;
    }
  }
  @keyframes slideMug {
    0% {
      -webkit-transform-origin: 100% 100%;
              transform-origin: 100% 100%;
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0px);
              transform: translateX(0px);
      opacity: 1;
    }
  }
  @-webkit-keyframes slideDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-24px);
              transform: translateY(-24px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
    }
  }
  @keyframes slideDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-24px);
              transform: translateY(-24px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
    }
  }
  @-webkit-keyframes up1 {
    0% {
      -webkit-transform: rotateZ(45deg) translateY(0px) translateX(0px);
              transform: rotateZ(45deg) translateY(0px) translateX(0px);
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: rotateZ(45deg) translateY(-62px) translateX(-62px);
              transform: rotateZ(45deg) translateY(-62px) translateX(-62px);
    }
  }
  @keyframes up1 {
    0% {
      -webkit-transform: rotateZ(45deg) translateY(0px) translateX(0px);
              transform: rotateZ(45deg) translateY(0px) translateX(0px);
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: rotateZ(45deg) translateY(-62px) translateX(-62px);
              transform: rotateZ(45deg) translateY(-62px) translateX(-62px);
    }
  }
  @-webkit-keyframes up2 {
    0% {
      -webkit-transform: rotateZ(45deg) translateY(0px) translateX(0px);
              transform: rotateZ(45deg) translateY(0px) translateX(0px);
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: rotateZ(45deg) translateY(-42px) translateX(-42px);
              transform: rotateZ(45deg) translateY(-42px) translateX(-42px);
    }
  }
  @keyframes up2 {
    0% {
      -webkit-transform: rotateZ(45deg) translateY(0px) translateX(0px);
              transform: rotateZ(45deg) translateY(0px) translateX(0px);
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: rotateZ(45deg) translateY(-42px) translateX(-42px);
              transform: rotateZ(45deg) translateY(-42px) translateX(-42px);
    }
  }
  @-webkit-keyframes up3 {
    0% {
      -webkit-transform: rotateZ(45deg) translateY(0px) translateX(0px);
              transform: rotateZ(45deg) translateY(0px) translateX(0px);
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: rotateZ(45deg) translateY(-82px) translateX(-82px);
              transform: rotateZ(45deg) translateY(-82px) translateX(-82px);
    }
  }
  @keyframes up3 {
    0% {
      -webkit-transform: rotateZ(45deg) translateY(0px) translateX(0px);
              transform: rotateZ(45deg) translateY(0px) translateX(0px);
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: rotateZ(45deg) translateY(-82px) translateX(-82px);
              transform: rotateZ(45deg) translateY(-82px) translateX(-82px);
    }
  }
  .laptop-wrapper {
    width: 300px;
    position: absolute;
    top: 48%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }

  .screen {
    position: relative;
  }
  .screen__window {
    width: 170px;
    height: 120px;
  }
  .screen__window--background {
    background-color: #859199;
    border-radius: 13px/16px;
  }
  .screen__window--foreground {
    background-color: #D4D6D7;
    top: 0;
    left: 10px;
    border-radius: 16px;
    padding: 16px;
  }
  .screen__display {
    width: 143px;
    height: 99px;
    margin-top: -5px;
    margin-left: -3px;
    background-color: #FFF9F0;
    padding: 2px 2px;
    -webkit-animation: screenOn 1s ease-in-out 0s backwards;
            animation: screenOn 1s ease-in-out 0s backwards;
  }
  .screen__base {
    width: 201px;
    height: 20px;
    background-color: #828181;
    border-radius: 20px;
    position: absolute;
    bottom: -20px;
    left: 0;
    z-index: 10;
  }
  .screen__base .base {
    position: absolute;
    top: 0px;
  }
  .screen__base .base__middle {
    width: 50px;
    height: 12px;
    left: 115px;
    background-color: #859199;
    border-radius: 0 0 14px 14px / 0px 0px 18px 18px;
  }
  .screen__base .base__plugs {
    width: 75px;
    height: 20px;
    background-color: #aaaaaa;
    border-radius: 20px;
  }
  .screen__base .base .plug {
    top: 7px;
    position: absolute;
    border-radius: 6px;
    height: 6px;
  }
  .screen__base .base .plug--usb, .screen__base .base .plug--psu {
    background-color: #263F3D;
  }
  .screen__base .base .plug--usb {
    width: 10px;
  }
  .screen__base .base .plug--usb--1 {
    left: 10px;
    background-color: #723B39;
  }
  .screen__base .base .plug--usb--2 {
    left: 30px;
  }
  .screen__base .base .plug--psu {
    width: 6px;
    right: 32px;
  }
  .screen .row {
    margin-top: 18px;
  }
  .screen .row:first-child {
    margin-top: 0;
  }
  .screen .row:nth-child(3n+1) {
    -webkit-animation: slideDown 0.6s cubic-bezier(0.18, 0.92, 0.71, 1.21) 1.2s both;
            animation: slideDown 0.6s cubic-bezier(0.18, 0.92, 0.71, 1.21) 1.2s both;
  }
  .screen .row:nth-child(3n+2) {
    -webkit-animation: slideDown 0.6s cubic-bezier(0.18, 0.92, 0.71, 1.21) 1.4s both;
            animation: slideDown 0.6s cubic-bezier(0.18, 0.92, 0.71, 1.21) 1.4s both;
  }
  .screen .row:nth-child(3n+3) {
    -webkit-animation: slideDown 0.6s cubic-bezier(0.18, 0.92, 0.71, 1.21) 1.6s both;
            animation: slideDown 0.6s cubic-bezier(0.18, 0.92, 0.71, 1.21) 1.6s both;
  }
  .screen .display__item {
    display: inline-block;
    position: relative;
    font-size: 0;
    vertical-align: top;
  }
  .screen .display__item--stripe {
    width: 50px;
    height: 20px;
    border-radius: 3px;
    margin-right: 1px;
    background-color: #faa799;
  }
  .screen .display__item--stripe:before {
    content: "";
    display: block;
    width: 55px;
    height: 2px;
    background-color: #ffefda;
    -webkit-transform: rotateZ(-17deg);
            transform: rotateZ(-17deg);
    bottom: 0;
    left: -2px;
    position: absolute;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
  .screen .display__item--box {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background-color: #f9b6ac;
  }
  .screen .display__item--box:after, .screen .display__item--box:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 2px;
    background-color: #ffefda;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
  .screen .display__item--box:after {
    -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
    top: -2px;
    left: 0;
  }
  .screen .display__item--box:before {
    -webkit-transform: rotateZ(-45deg);
            transform: rotateZ(-45deg);
    bottom: -2px;
    left: 0;
  }
  .screen .display__item--message {
    background-color: #faa799;
    margin-left: 1px;
    width: 40px;
    height: 4px;
    border-radius: 6px;
    font-size: 0;
    vertical-align: top;
  }
  .screen .display__item--message:after, .screen .display__item--message:before {
    width: 40px;
    height: 4px;
    border-radius: 6px;
    background-color: inherit;
    content: "";
    display: block;
    position: relative;
  }
  .screen .display__item--message:before {
    top: 15px;
    width: 20px;
  }
  .screen .display__item--message:after {
    top: 3px;
  }
  .screen__shadow {
    background-color: rgba(0, 0, 0, 0.2);
    width: 250px;
    height: 12px;
    border-radius: 9px;
    top: 15px;
    left: 2px;
  }

  .mug {
    width: 45px;
    height: 50px;
    background-color: #859199;
    position: absolute;
    top: 88px;
    left: 200px;
    -webkit-animation: slideMug 1s ease-in-out 1.5s backwards;
            animation: slideMug 1s ease-in-out 1.5s backwards;
  }
  .mug__liquid {
    width: 12px;
    position: absolute;
    z-index: 6;
    top: 0;
    border-radius: 0 0 10px 10px;
  }
  .mug__liquid--small {
    background-color: #D4D6D7;
    height: 17px;
    left: 8px;
  }
  .mug__liquid--big {
    background-color: #395872;
    height: 30px;
    left: 27px;
  }
  .mug__handhelper {
    position: absolute;
    z-index: -1;
    top: 5px;
    left: 42px;
    width: 20px;
    height: 40px;
    background-color: #2D4D6D7;
    border: 8px solid #D4D6D7;
    border-left: none;
    border-radius: 0 34px 34px 0 / 0 30px 30px 0;
    -webkit-animation: slideDown .5s ease-in-out 2.4s backwards;
            animation: slideDown .5s ease-in-out 2.4s backwards;
  }
  .mug__particles {
    position: absolute;
    top: 7px;
    left: 0;
    width: 100%;
    height: 0;
    z-index: -1;
  }
  .mug .particle {
    position: absolute;
    top: 0;
    -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
  }
  .mug .particle--diamond {
    width: 4px;
    height: 4px;
  }
  .mug .particle--diamond--1 {
    left: 44px;
    -webkit-animation: up1 4s ease-in-out 3.7s infinite backwards;
            animation: up1 4s ease-in-out 3.7s infinite backwards;
  }
  .mug .particle--diamond--2 {
    left: 20px;
    -webkit-animation: up3 5.5s ease-in-out 5s infinite backwards;
            animation: up3 5.5s ease-in-out 5s infinite backwards;
  }
  .mug .particle--cross {
    width: 9px;
    height: 3px;
  }
  .mug .particle--cross:before {
    content: "";
    display: block;
    height: 9px;
    width: 3px;
    position: absolute;
    top: -3px;
    left: 3px;
    background-color: inherit;
  }
  .mug .particle--cross--1 {
    left: 5px;
    -webkit-animation: up1 3.3s ease-in-out 3.5s infinite backwards;
            animation: up1 3.3s ease-in-out 3.5s infinite backwards;
  }
  .mug .particle--cross--2 {
    left: 11px;
    -webkit-animation: up2 2.6s ease-in-out 4.2s infinite backwards;
            animation: up2 2.6s ease-in-out 4.2s infinite backwards;
  }
  .mug .particle--cross--3 {
    left: 22px;
    -webkit-animation: up3 3s ease-in-out 3.3s infinite backwards;
            animation: up3 3s ease-in-out 3.3s infinite backwards;
  }
  .mug .particle--cross--4 {
    left: 33px;
    -webkit-animation: up2 4s ease-in-out 3s infinite backwards;
            animation: up2 4s ease-in-out 3s infinite backwards;
  }
  .mug .particle--pink {
    background-color: #D4D6D7;
  }
  .mug .particle--blue {
    background-color: #628dd1;
  }
  .mug .particle--green {
    background-color: #4c988e;
  }
  .mug .particle--yellow {
    background-color: #ffefda;
  }