FarmBot/Farmbot-Web-App

<% content_for :head do %>
  <style>
@media screen and (min-width: 769px) {
    .demo-phone {
        display: none;
        height: auto;
    }
}

@media screen and (max-width: 768px) {
    .demo-video {
        display: none;
    }
}

.demo-phone {
   width: 363px;
   height: 726px;
}

.demo-container {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}

.demo-video {
    opacity: 0.99;
    width: 100%;
}

.demo-button {
    animation: bounce 4s infinite;
    background-color: #489fe4;
    border: none;
    border-radius: 5px;
    bottom: 60px;
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
    color: #fff;
    font-family: "Cabin", sans-serif;
    font-size: 25px;
    font-weight: bold;
    padding: 15px 30px;
    position: absolute;
}

.demo-options {
  position: absolute;
  bottom: 15px;
}

.demo-button:hover {
    background-color: #287dc1;
    cursor: pointer;
}

@-moz-keyframes bounce {
    10%, 26%, 40%, 0%, 50% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }

    20%, 21% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -8px, 0);
    }

    35% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -5px, 0);
    }

    45% {
        transform: translate3d(0, -2px, 0);
    }
}

@-webkit-keyframes bounce {
    10%, 26%, 40%, 0%, 50% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }

    20%, 21% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -8px, 0);
    }

    35% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -5px, 0);
    }

    45% {
        transform: translate3d(0, -2px, 0);
    }
}

@-o-keyframes bounce {
    10%, 26%, 40%, 0%, 50% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }

    20%, 21% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -8px, 0);
    }

    35% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -5px, 0);
    }

    45% {
        transform: translate3d(0, -2px, 0);
    }
}

@keyframes bounce {
    10%, 26%, 40%, 0%, 50% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }

    20%, 21% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -8px, 0);
    }

    35% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -5px, 0);
    }

    45% {
        transform: translate3d(0, -2px, 0);
    }
}
  </style>
<% end %>