/* 
** PLAN EXPIRED MESSAGE **
*/

#plan-expired {
      border: 3px solid #E05745;
      width: 550px;
      margin: 0 auto;
      background-color: #F2CFCF;
      margin-top: 60px;
      text-align: center;
      padding: 10px;
}

/* 
** LIVE TESTING **
*/

#live-testing {
      border-bottom: 2px solid #489CFD;
      margin-top: 60px;
      position: relative;
}

#live-testing-background {
      right: 0;
      bottom: 0;
      position: absolute;
      z-index: -2;
}

#live-testing-triangle {
      height: 100%;
      position: relative;
      border-top: 500px solid transparent;
      border-right: 500px solid #489cfd;
}

#live-testing-background-browser {
      position: absolute;
      margin: 0 5%;
      width: 90%;
      margin-top: 50px;
      z-index: -1;
}

#live-testing-background-browser-top {
      border: 2px solid #a4c7f0;
      border-bottom: 0px;
      height: 30px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      background-color: white;
}

#live-testing-background-browser-body {
      border: 2px solid #a4c7f0;
      height: 200px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      background-color: white;
}

#live-testing-main-browser {
      margin: 0 11%;
      margin-bottom: 80px;
      width: 78%;
}

#live-testing-main-browser-top {
      border: 2px solid #a4c7f0;
      border-bottom: 0px;
      height: 30px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      background-color: white;
}

#live-testing-circles {
    margin-top: 10px;
    margin-left: 20px;
    font-size: 0;
}

#live-testing-circles .circle {
    display: inline-block;
    border: 1px solid #a4c7f0;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border-radius: 50%;
}

#live-testing-main-browser-body {
      border: 2px solid #a4c7f0;
      height: 400px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      text-align: center;
      background-color: white;
}

#live-testing-main-browser-body h1 {
      margin-top: 40px;
      font-size: 32px;
      color: #4272AB;
      font-family: 'Raleway', Ubuntu, Helvetica, sans-serif;
}

#live-testing-main-browser-body #five-secs {
      margin-top: 60px;
      font-size: 30px;
      color: #3d4550;
      font-family: 'Raleway', Ubuntu, Helvetica, sans-serif;
}

#live-testing-main-browser-body #five-secs strong {
      font-weight: normal;
}

#need-paid-plan {
      font-family: 'Open Sans', sans-serif;
      font-size: 18px;
      border: 2px solid #5581B5;
      padding: 5px;
      width: 400px;
      margin: 0 auto;
      margin-top: 20px;
      display: none;
}

#browser-selection {
      margin: 0 auto;
      margin-top: 35px;
}

#browser-selection #url-run {
      margin-top: 10px;
}

#browser-selection #url-run input {
      width: 450px;
      font-size: 20px;
      padding: 5px;
      border-radius: 2px;
      border: 1px solid #78ACE8;
      color: #2E527B;
}

#browser-selection #url-run input:focus {
      background-color: #E3F0FF;
}

#browser-selection #url-run button {
      width: 120px;
      font-size: 20px;
      padding: 5px;
      -webkit-appearance: none;
      border: 1px solid #78ACE8;
      border-radius: 3px;
      background: #3498db;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#3498db), to(#2980b9));
      background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
      background-image: linear-gradient(to bottom, #3498db, #2980b9);
      color: #ffffff;
}

#browser-selection #url-run button:hover {
      background: #3cb0fd;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#3cb0fd), to(#3498db));
      background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
      background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}

#browser-selection #url-run button:active {
      background: #3498db;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#3498db), to(#2980b9));
      background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
      background-image: linear-gradient(to bottom, #3498db, #2980b9);
}

#platform-browser-version {
      overflow: hidden;
      font-size: 12px;
      margin-top: 20px;
}

#platform-browser-version #platform {
      float: left;
      text-align: left;
      margin-right: 10px;
}

#platform-browser-version #browser {
      float: left;
      text-align: left;
      margin-right: 10px;
}

#platform-browser-version #version {
      float: left;
      text-align: left;
}


/* Features */
    section.features {
        position: relative;
        font-family: 'Roboto', sans-serif;
        background: #f7f7f7;
        margin: 0 auto;
        text-align: center;
        font-size: 0;
        padding-top: 50px;
        padding-bottom: 50px;
        -webkit-user-select: none;
                user-select: none;
    }
    section.features h2 {
        -webkit-user-select: text;
                user-select: text;
        font-family: 'Raleway', Ubuntu, Helvetica, sans-serif;
        font-size: 36px;
        color: #489cfd;
        margin-bottom: 20px;
        position: relative;
        top: -10px;
    }
    section.features .feature {
        font-size: 16px;
        margin: 15px;
        width: 350px;
        height: 375px;
        display: inline-block;
        vertical-align: top;
    }

    .feature .feature-animation {
        position: relative;
        height: 195px;
        padding: 10px;
    }
    .feature-live-sessions .feature-animation:hover .animation-browser {
        -webkit-transform: translate(60px, -20px);
                transform: translate(60px, -20px);
        width: 145px;
    }
    .feature-live-sessions .feature-animation:hover .animation-browser-scroll-bar {
        top: 99px;
    }
    .feature-live-sessions .feature-animation:hover .animation-browser-cursor-mouse {
        top: 109px;
    }
    .feature-live-sessions .feature-animation:hover .animation-browser-body-content {
        -webkit-transform: translateY(-100px);
                transform: translateY(-100px);
    }
    .feature-ssh-tunnels .feature-animation:hover .animation-terminal.first {
        -webkit-transform: translate(-15px, -15px);
                transform: translate(-15px, -15px);
    }
    .feature-ssh-tunnels .feature-animation:hover .animation-terminal.third {
        -webkit-transform: translate(15px, 15px);
                transform: translate(15px, 15px);
    }
    .animation-terminal.first {
        z-index: 3;
    }
    .animation-terminal.second {
        z-index: 2;
        opacity: 0.75;
    }
    .animation-terminal.third {
        z-index: 1;
        opacity: 0.5;
    }
    .animation-terminal {
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        width: 185px;
        top: 35px;
        left: 85px;
        position: absolute;
        height: 125px;
        display: inline-block;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
                box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
        background: rgba(0, 0, 0, 1);
        transition: all 0.5s ease;
    }
    .animation-window-kill:after {
        content: "";
        position: absolute;
        width: 1px;
        height: 7px;
        background: black;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        left: 5px;
        top: 2px;
    }
    .animation-window-kill:before {
        content: "";
        position: absolute;
        width: 1px;
        height: 7px;
        background: black;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        left: 5px;
        top: 2px;
    }
    .animation-window-kill {
        position: absolute;
        top: 7px;
        border-radius: 11px;
        right: 7px;
        width: 11px;
        height: 11px;
        background: white;
    }
    .animation-terminal-title {
        font-size: 12px;
        color: white;
        font-family: monospace;
        position: relative;
        left: 6px;
        top: 3px;
    }
    .animation-terminal-body {
        position: absolute;
        top: 22px;
        left: 0;
        right: 0;
        bottom: 0;
        color: rgba(255, 255, 255, 0.7);
        font-family: monospace;
        text-align: left;
        padding: 7px;
        padding-top: 0;
        font-size: 12px;
    }
    @-webkit-keyframes cursor-blink {
        0% {
            opacity: 0.75;
        }
        50% {
            opacity: 0.75;
        }
        51% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    @keyframes cursor-blink {
        0% {
            opacity: 0.75;
        }
        50% {
            opacity: 0.75;
        }
        51% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    .animation-cursor {
        -webkit-animation: cursor-blink 1.2s infinite linear;
                animation: cursor-blink 1.2s infinite linear;
        width: 6px;
        height: 1px;
        display: inline-block;
        position: relative;
        left: -3px;
        top: 1px;
        background: white;
    }
    .animation-terminal-top {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        font-size: 0;
        text-align: left;
        height: 18px;
    }
    .feature-ssh-tunnels .animation-background {
        background: rgba(0, 0, 0, 0.65);
    }
    .animation-background {
        width: 100%;
        height: 195px;
        position: absolute;
        left: 0;
        border-radius: 3px;
        z-index: 0;
        overflow: hidden;
        top: 0;
        background-size: cover;
    }
    .feature-live-sessions .animation-background {
        background-image: url(../images/features/background-live-interactive-sessions.jpg);
    }
    .animation-browser {
        z-index: 2;
        margin-bottom: 40px;
        width: 185px;
        position: relative;
        top: 20px;
        height: 125px;
        display: inline-block;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
                box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
        background: #f7f7f7;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        -webkit-transform: translate(-20px, 20px);
                transform: translate(-20px, 20px);
    }
    .animation-browser-top {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        font-size: 0;
        text-align: left;
        height: 18px;
        -webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 3px 3px 0 0;
    }
    .animation-browser-body {
        position: absolute;
        overflow: hidden;
        top: 18px;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0 0 3px 3px;
    }
    .animation-window-close, .animation-window-collapse, .animation-window-expand {
        background: grey;
        position: relative;
        display: inline-block;
        width: 8px;
        height: 8px;
        top: 5px;
        left: 5px;
        border-radius: 8px;
        margin-right: 4px;
    }

    .animation-window-close:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50%;
        height: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        border-radius: 4px;
        background: #f7f7f7;
    }

    .animation-window-close {
        background: #e56d64;
    }
    .animation-window-collapse {
        background: #efc75e;
    }
    .animation-window-expand {
        background: #45b09d;
    }

    .animation-browser-bar {
        position: absolute;
        left: 45px;
        height: 8px;
        top: 5px;
        right: 10px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.85);
    }
    .animation-browser-body-block-left {
        position: relative;
        width: 70%;
        height: 45px;
        margin: 5px 5px 0 5px;
        display: inline-block;
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.1);
    }
    .animation-browser-body-block-right {
        position: relative;
        width: 22%;
        height: 45px;
        margin: 5px 0 0 0;
        display: inline-block;
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.1);
    }
    .animation-browser-body-content {
        text-align: left;
        position: absolute;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        left: 0;
        top: 0;
        font-size: 0;
        right: 13px;
        bottom: -100px;
    }
    .animation-browser-scroll-bar {
        position: absolute;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        z-index: 9;
        border-radius: 4px;
        width: 5px;
        height: 22px;
        right: 4px;
        top: 22px;
        background: #777777;
    }
    .animation-browser-cursor-mouse {
        z-index: 10;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        width: 12px;
        right: -6px;
        top: 31px;
        position: absolute;
        background: url(../images/features/cursor.png);
        height: 19px;
        background-size: cover;
    }
    .animation-browser-cursor-drag {
        z-index: 10;
        width: 23px;
        left: 68px;
        top: -8px;
        position: absolute;
        background: url(../images/features/cursor-drag.png);
        height: 23px;
        background-size: cover;
        background-position: center;
    }
    .animation-browser-body:after {
        content: "";
        position: absolute;
        background: rgba(0, 0, 0, 0.15);
        right: 4px;
        bottom: 4px;
        top: 4px;
        border-radius: 4px;
        width: 5px;
    }
    .animation-browser-cursor-resize {
        z-index: 10;
        width: 23px;
        left: -11px;
        top: 70px;
        position: absolute;
        background: url(../images/features/cursor-move.png);
        height: 9px;
        background-size: cover;
        background-position: center;
    }
    .feature-description {
        -webkit-user-select: text;
                user-select: text;
        text-align: left;
        color: rgba(0, 0, 0, 0.8);
        padding: 0 30px 0 30px;
    }
    .feature-title {
        -webkit-user-select: text;
                user-select: text;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.8);
        font-size: 17px;
        padding: 25px 30px 5px 30px;
        text-align: left;
    }
    .animation-badge {
        position: absolute;
        z-index: 1;
        top: 56px;
        right: 12px;
        width: 90px;
        overflow: hidden;
        height: 94px;
        border-radius: 96px;
    }
    .feature-animation:hover .animation-badge-glow {
        -webkit-transform: rotate(45deg) translateX(72px);
                transform: rotate(45deg) translateX(72px);
        opacity: 1;
    }

    .animation-badge-inside {
        width: 90px;
        height: 90px;
        left: 0px;
        top: 0px;
        -webkit-box-shadow: 0 4px 0 0 #248f5b;
                box-shadow: 0 4px 0 0 #248f5b;
        position: relative;
        border-radius: 94px;
        background: #2db674;
    }

    .animation-badge-inside .icon:after {
        font-family: "Material Icons";
        content: "verified_user";
        color: white;
        font-size: 46px;
        top: 24px;
        position: relative;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }
    .animation-badge-glow {
        z-index: 9;
        -webkit-transition: all 0.75s ease;
        transition: all 0.75s ease;
        content: "";
        position: absolute;
        width: 128px;
        height: 128px;
        opacity: 0.25;
        left: 0;
        -webkit-transform: rotate(45deg) translateX(-96px);
                transform: rotate(45deg) translateX(-96px);
        background: -webkit-gradient(linear, left top, right top, color-stop(25%, transparent), color-stop(50%, #f7f7f7), color-stop(75%, transparent));
        background: -webkit-linear-gradient(left, transparent 25%, #f7f7f7 50%, transparent 75%);
        background: linear-gradient(to right, transparent 25%, #f7f7f7 50%, transparent 75%);
    }
    .feature-secure-connection .feature-animation {
        padding: 0;
    }
    .feature-real-browsers .animation-background {
        background-image: url(../images/features/background-real-browsers.jpg);
    }
    .animation-tabs-content {
        position: absolute;
        left: 0;
        right: 0;
        border-radius: 0 0 3px 3px;
        bottom: 0;
        padding: 10px;
        text-align: left;
        background: white;
        top: 77px;
    }
    .animation-tabs-block.smaller:after, .animation-tabs-block.smaller:before {
        content: "";
        position: absolute;
        bottom: -12px;
        width: 50px;
        height: 6px;
        border-radius: 6px;
        background: #cad8e8;
    }
    .animation-tabs-block.smaller:after {
        bottom: -24px;
    }
    .animation-tabs-block {
        position: relative;
        margin-right: 6px;
        background: #cad8e8;
        border-radius: 3px;
        width: 70px;
        height: 100%;
        display: inline-block;
    }
    .animation-tabs-block.smaller {
        height: 75%;
        vertical-align: top;
        width: 50px;
    }
    .animation-tabs-text {
        position: relative;
        border-radius: 3px;
        display: inline-block;
        vertical-align: top;
        background: #cad8e8;
        height: 35px;
        width: 80px;
    }
    .animation-tabs-text:before {
        content: "";
        height: 6px;
        border-radius: 3px;
        background: #cad8e8;
        width: 60px;
        bottom: -25px;
        position: absolute;
    }
    .animation-tabs-text:after {
        content: "";
        height: 6px;
        border-radius: 3px;
        background: #cad8e8;
        width: 80px;
        bottom: -13px;
        position: absolute;
    }
    .animation-tabs {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        border: 1px #999999 solid;
        background: #dadada;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
                box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
        border-radius: 3px;
    }
    .animation-tabs-input:before {
        position: absolute;
        background-image: url(../images/features/secure.png);
        background-size: cover;
        content: "";
        width: 8px;
        height: 11px;
        left: 9px;
        top: 7px;
    }
    .animation-tab {
        z-index: 2;
        position: relative;
        display: inline-block;
        margin-right: 16px;
        left: 15px;
        width: 100px;
        height: 29px;
        background: #f2f2f2;
        -webkit-box-shadow: inset 0 1px 0 #9a9a9a, 0 1px 0 #f2f2f2;
                box-shadow: inset 0 1px 0 #9a9a9a, 0 1px 0 #f2f2f2;
    }
    .animation-tabs-input-secure:after {
        content: "";
        position: absolute;
        right: -9px;
        width: 1px;
        top: 3px;
        height: 13px;
        background: green;
    }
    .animation-tabs-input-secure {
        font-size: 13px;
        position: absolute;
        left: 26px;
        top: 3px;
        color: green;
    }
    .animation-tabs-input-url {
        position: absolute;
        left: 84px;
        right: 0;
        text-align: left;
        font-size: 13px;
        top: 0;
        padding-top: 3px;
        bottom: 0;
        overflow: hidden;
           text-overflow: ellipsis;
    }
    .animation-tabs-input {
        position: absolute;
        right: 10px;
        height: 24px;
        -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
        left: 95px;
        top: 6px;
        border-radius: 2px;
        background: white;
    }
    .animation-tabs-top {
        position: absolute;
        top: 10px;
        text-align: left;
        left: 0;
        right: 0;
        height: 29px;
        -webkit-box-shadow: 0 1px 0 0 #999999;
                box-shadow: 0 1px 0 0 #999999;
    }
    .animation-tabs-box:before {
        background-image: url(../images/features/tab-menu.png);
        position: absolute;
        content: "";
        width: 70px;
        height: 14px;
        left: 10px;
        top: 11px;
    }
    .animation-tabs-box {
        position: absolute;
        top: 40px;
        height: 36px;
        left: 0;
        background: #f2f2f2;
        right: 0;
        -webkit-box-shadow: 0 1px 0 0 #999999;
                box-shadow: 0 1px 0 0 #999999;
    }
    .animation-tab:before {
        content: "";
        position: absolute;
        left: -15px;
        height: 29px;
        width: 15px;
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNSAyOSI+CiAgPGc+CiAgICA8cGF0aCBmaWxsPSIjZjJmMmYyIiBkPSJNIDE1IDAgTCAwIDI5IEwgMTUgMjkgTCAxNSAwIi8+CiAgICA8cGF0aCBzdHJva2U9IiM5YTlhOWEiIGQ9Ik0gMTUgMCBMIDAgMjkiLz4KICA8L2c+Cjwvc3ZnPg==");
        background-size: cover;
        -webkit-box-shadow: 0 1px 0 #f2f2f2;
                box-shadow: 0 1px 0 #f2f2f2;
    }
    .animation-tab-icon {
        background-image: url(../images/features/favicon.ico);
        position: absolute;
        top: 7px;
        left: 2px;
        width: 18px;
        height: 18px;
        background-size: cover;
    }
    .animation-tab-name {
        position: absolute;
        font-size: 12px;
        top: 7px;
        left: 27px;
        right: 0;
           text-overflow: ellipsis;
        overflow: hidden;
    }
    .animation-tab:after {
        content: "";
        position: absolute;
        right: -15px;
        height: 29px;
        width: 15px;
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNSAyOSI+CiAgPGc+CiAgICA8cGF0aCBmaWxsPSIjZjJmMmYyIiBkPSJNIDAgMCBMIDE1IDI5IEwgMCAyOSBMIDAgMCIvPgogICAgPHBhdGggc3Ryb2tlPSIjOWE5YTlhIiBkPSJNIDAgMCBMIDE1IDI5Ii8+CiAgPC9nPgo8L3N2Zz4=");
        background-size: cover;
        -webkit-box-shadow: 0 1px 0 #f2f2f2;
                box-shadow: 0 1px 0 #f2f2f2;
    }
    .animation-tab.inactive {
        background: #d0d0d0;
        -webkit-box-shadow: inset 0 1px 0 #9a9a9a;
                box-shadow: inset 0 1px 0 #9a9a9a;
        z-index: 1;
    }
    .animation-tab.inactive:before {
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNSAyOSI+CiAgPGc+CiAgICA8cGF0aCBmaWxsPSIjZDBkMGQwIiBkPSJNIDE1IDAgTCAwIDI5IEwgMTUgMjkgTCAxNSAwIi8+CiAgICA8cGF0aCBzdHJva2U9IiM5YTlhOWEiIGQ9Ik0gMTUgMCBMIDAgMjkiLz4KICA8L2c+Cjwvc3ZnPg==");
        -webkit-box-shadow: none;
                box-shadow: none;
    }
    .animation-tab.inactive:after {
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNSAyOSI+CiAgPGc+CiAgICA8cGF0aCBmaWxsPSIjZDBkMGQwIiBkPSJNIDAgMCBMIDE1IDI5IEwgMCAyOSBMIDAgMCIvPgogICAgPHBhdGggc3Ryb2tlPSIjOWE5YTlhIiBkPSJNIDAgMCBMIDE1IDI5Ii8+CiAgPC9nPgo8L3N2Zz4=");
        -webkit-box-shadow: none;
                box-shadow: none;
    }

    .animation-logos {
        z-index: 2;
        text-align: left;
        width: 100%;
        height: 100%;
        font-size: 0;
    }
    .animation-logos-col {
        height: 100%;
        display: inline-block;
        position: relative;
        width: 48px;
        margin-right: 15px;
    }
    .animation-logo:before {
        content: "";
        bottom: 0;
        width: 13px;
        position: absolute;
        height: 13px;
        background-image: url(../images/features/shortcut.png);
        background-size: cover;
    }
    .animation-logo:after {
        content: "";
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        background-size: 40px;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        width: 48px;
        height: 48px;
    }
    .animation-logo {
        background-size: 40px;
        background-position: center;
        background-repeat: no-repeat;
        width: 48px;
        height: 48px;
        clear: both;
        float: left;
        margin-bottom: 15px;
        position: relative;
        z-index: 2;
        display: inline-block;
    }
    .feature-real-browsers .feature-animation:hover .animation-logo-ie:after {
        opacity: 0;
        -webkit-transform: scale(2);
                transform: scale(2);
    }
    .feature-real-browsers .feature-animation:hover .animation-logos-window {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
    .feature-real-browsers .feature-animation {
        overflow: hidden;
    }
    .animation-logo-webkit, .animation-logo-webkit:after {
        background-image: url(../images/features/browser-chrome.png);
    }
    .animation-logo-ie, .animation-logo-ie:after {
        background-image: url(../images/features/browser-ie.png);
    }
    .animation-logo-o, .animation-logo-o:after {
        background-image: url(../images/features/browser-opera.png);
    }
    .animation-logo-moz, .animation-logo-moz:after {
        background-image: url(../images/features/browser-firefox.png);
    }

    .animation-logos-window {
        position: absolute;
        right: 0;
        opacity: 0;
        -webkit-transition: all 0.25s ease;
        transition: all 0.25s ease;
        -webkit-transform: translateY(10px);
                transform: translateY(10px);
        bottom: 0;
        background: white;
        border-top: 1px #1883d7 solid;
        border-left: 1px #1883d7 solid;
        top: 65px;
        left: 85px;
        z-index: 2;
    }

    .animation-logos-window-top {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 76px;
    }
    .animation-logos-window-navigation {
        position: absolute;
        width: 67px;
        height: 34px;
        bottom: 22px;
        background-image: url("../images/features/ie-navigation.png");
    }
    .animation-logos-window-tab {
        width: 198px;
        border: 1px #b2b2b2 solid;
        border-bottom: 0;
        height: 22px;
        left: 0;
        bottom: 0;
        position: absolute;
        background: white;
    }
    .animation-logos-window-tab-new {
        background: #dddddd;
        border: 1px #b2b2b2 solid;
        border-bottom: 0;
        border-left: 0;
        width: 21px;
        height: 22px;
        position: absolute;
        bottom: 0;
        left: 198px;
    }

    .animation-logos-window-input {
        position: absolute;
        right: 0;
        top: 28px;
        left: 76px;
        height: 22px;
        border: 1px #b2b2b2 solid;
        border-right: 0;
    }

    .animation-logos-window-logo {
        background-image: url(../images/features/browser-ie-small.png);
        top: 2px;
        left: 2px;
        background-size: contain;
        position: absolute;
        width: 16px;
        height: 16px;
    }

    .animation-logos-window-url {
        font-size: 12px;
        position: absolute;
        white-space: nowrap;
        top: 1px;
        left: 26px;
    }
    .animation-logos-window-no-image:before {
        content: "";
        position: absolute;
        left: 6px;
        top: 6px;
        width: 14px;
        height: 16px;
        background-image: url(../images/features/ie-broken-image.png);
    }
    .animation-logos-window-no-image {
        font-size: 13px;
        padding-top: 5px;
        text-align: left;
        padding-left: 28px;
        line-height: 18px;
        position: absolute;
        bottom: 0;
        border: 1px #a0a0a0 solid;
        border-right: 1px #e3e3e3 solid;
        border-bottom: 0;
        left: 10px;
        height: 40px;
        width: 150px;
    }

    .animation-logo-cursor {
        position: absolute;
        width: 17px;
        height: 22px;
        right: 0px;
        top: 32px;
        z-index: 2;
        background-image: url(../images/features/cursor-pointer.png);
        background-size: cover;
    }
    .animation-screenshot-scroll {
        position: absolute;
        right: 0;
        width: 17px;
        background: #f1f1f1;
        top: 0;
        bottom: 0;
    }
    .animation-screenshot-scroll:before {
        content: "";
        right: 5px;
        top: 7px;
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 3.5px 4px 3.5px;
        border-color: transparent transparent #505050 transparent;
    }
    .animation-screenshot-scroll:after {
        content: "";
        right: 5px;
        bottom: 7px;
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4px 3.5px 0 3.5px;
        border-color: #505050 transparent transparent transparent;
    }
    .animation-screenshot-scroll-bar {
        position: absolute;
        width: 13px;
        background: #c1c1c1;
        top: 70px;
        right: 2px;
        height: 40px;
    }
    .animation-screenshot-page {
        width: 100%;
        position: absolute;
        height: 100%;
        overflow: hidden;
        border-radius: 3px;
        background: white;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
                box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
        top: 0;
        left: 0;
    }
    .animation-screenshot-sidebar {
        position: absolute;
        padding: 10px;
        top: 0;
        left: 0;
        bottom: 0;
        width: 125px;
        background: #2d3e4e;
        border-radius: 3px 0 0 4px;
    }
    .animation-screenshot-content {
        padding: 10px;
        position: absolute;
        top: 0;
        background: rgba(0, 0, 0, 0.1);
        left: 125px;
        bottom: 0;
        right: 17px;
    }
    .animation-screenshot-content-block {
        position: relative;
        background: white;
        display: inline-block;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        width: 100%;
        height: 39px;
    }

    .animation-screenshot-content-block:before {
        content: "";
        position: absolute;
        width: 25px;
        height: 25px;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 25px;
        top: 7px;
        left: 9px;
    }
    .animation-screenshot-content-block-text:before {
        content: "";
        position: absolute;
        width: 100px;
        height: 8px;
        display: block;
        background: rgba(0, 0, 0, 0.1);
        top: 10px;
        left: 44px;
        border-radius: 5px;
    }
    .animation-screenshot-content-block-text:after {
        content: "";
        position: absolute;
        width: 45px;
        height: 8px;
        display: block;
        background: rgba(0, 0, 0, 0.1);
        top: 21px;
        left: 44px;
        border-radius: 5px;
    }
    .animation-screenshot-sidebar-option {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 23.5px;
        border-radius: 3px;
        background: transparent;
    }
    .animation-screenshot-sidebar-option:before {
        content: "";
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 12px;
        left: 7px;
        top: 6px;
        background: rgba(255, 255, 255, 0.5);
    }
    .animation-screenshot-sidebar-option:after {
        content: "";
        position: absolute;
        right: 8px;
        border-radius: 4px;
        top: 8px;
        left: 26px;
        height: 8px;
        background: rgba(255, 255, 255, 0.25);
    }
    .animation-screenshot-sidebar-option:nth-child(2) {
        background: rgba(255, 255, 255, 0.1);
    }


    .feature-screenshots .feature-animation:hover .animation-screenshot-area {
        -webkit-box-shadow: 0 0 0 20em rgba(0, 0, 0, 0.5), inset 0 0 0 1px white;
                box-shadow: 0 0 0 20em rgba(0, 0, 0, 0.5), inset 0 0 0 1px white;
        width: 125px;
        height: 85px;
     }


    .animation-screenshot-area {
        position: absolute;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        -webkit-box-shadow: 0 0 0 20em rgba(0, 0, 0, 0), inset 0 0 0 1px white;
                box-shadow: 0 0 0 20em rgba(0, 0, 0, 0), inset 0 0 0 1px white;
        z-index: 2;
        width: 0;
        height: 0;
        top: 32px;
        left: 80px;
    }
    .animation-screenshot-cursor {
        position: absolute;
        bottom: -14px;
        right: -14px;
        width: 25px;
        height: 24px;
        background-image: url(../images/features/cursor-precise.png);
        background-size: cover;
    }
    .animation-api-ufo {
        position: absolute;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        width: 105px;
        -webkit-transform: rotate(-15deg);
                transform: rotate(-15deg);
        height: 35px;
        z-index: 3;
        right: -100px;
        top: 38px;
        border-radius: 53px/18px;
    }

    .animation-api-ufo:after {
        content: "";
        position: absolute;
        width: 90px;
        height: 27px;
        left: 8px;
        top: -3px;
        border-radius: 45px/13px;
        background: #eef6ff;
    }

    .animation-api-ufo:before {
        content: "";
        position: absolute;
        width: 68px;
        height: 16px;
        left: 19px;
        top: 2px;
        z-index: 3;
        border-radius: 34px/8px;
        background: #272822;
    }

    .animation-api-ufo-top {
        position: absolute;
        background: #96d7ff;
        z-index: 3;
        width: 44px;
        height: 27px;
        left: 31px;
        top: -14px;
        border-radius: 20px;
        border-bottom-right-radius: 17px 5px;
        border-bottom-left-radius: 17px 5px;
    }

    .animation-api-ufo-top:after {
        position: absolute;
        background: #caebff;
        z-index: 3;
        width: 31px;
        height: 19px;
        left: 6px;
        top: 4px;
        border-radius: 20px;
        border-bottom-right-radius: 17px 2px;
        border-bottom-left-radius: 17px 3px;
        content: "";
    }

    .animation-api-ufo-top:before {
        position: absolute;
        background: #96d7ff;
        z-index: 4;
        width: 23px;
        height: 21px;
        left: 14px;
        top: 3px;
        border-radius: 3px/10px;
        border-bottom-right-radius: 0;
        border-top-right-radius: 12px;
        content: "";
    }

    .animation-api-ufo-beam {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        opacity: 0;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        -webkit-transform-origin: 45px 10px;
                transform-origin: 45px 10px;
        z-index: 2;
        position: absolute;
        left: 24px;
        top: 18px;
        border-bottom: 125px solid transparent;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        height: 0;
        width: 57px;
    }

    .animation-api-ufo-beam:before {
        z-index: 3;
        content: "";
        position: absolute;
        left: -9px;
        top: 5px;
        border-bottom: 120px solid rgba(255, 255, 255, 0.2);
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        height: 0;
        border-radius: 30px/15px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        width: 27px;
    }

    .animation-api-app {
        width: 200px;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        position: absolute;
        bottom: -3px;
        z-index: 0;
        top: 42px;
        left: 70px;
        background: #1985da;
        border-radius: 3px;
        -webkit-box-shadow: inset 0 0px 0 1px rgba(255, 255, 255, 0.25);
                box-shadow: inset 0 0px 0 1px rgba(255, 255, 255, 0.25);
    }

    .animation-api-app-collapse {
        position: absolute;
        top: 15px;
        right: 42px;
        height: 1px;
        background: rgba(255, 255, 255, 0.65);
        width: 7px;
    }

    .animation-api-app-close:after {
        content: "";
        position: absolute;
        width: 10px;
        height: 1px;
        background: white;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }

    .animation-api-app-close:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 1px;
        background: white;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }

    .animation-api-app-expand {
        position: absolute;
        width: 7px;
        height: 7px;
        right: 25px;
        top: 9px;
        border: 1px rgba(255, 255, 255, 0.65) solid;
    }

    .animation-api-app-close {
        position: absolute;
        right: 17px;
        top: 12px;
    }

    .animation-api-app-block-first {
        position: absolute;
        width: 65px;
        height: 40px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.5);
        top: 30px;
        left: 15px;
    }

    .animation-api-app-block-second {
        position: absolute;
        width: 40px;
        height: 30px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.3);
        top: 75px;
        left: 15px;
    }

    .animation-api-app-block-third {
        position: absolute;
        width: 20px;
        height: 30px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.3);
        top: 75px;
        left: 60px;
    }

    .animation-api-app-block-browser {
        position: absolute;
        border: 3px rgba(255, 255, 255, 0.5) dashed;
        background: transparent;
        border-radius: 3px;
        width: 95px;
        height: 75px;
        top: 30px;
        right: 15px;
    }
    .feature-api .feature-animation {
        background: #272822;
        overflow: hidden;
        border-radius: 3px;
    }

    .animation-floating {
        -webkit-animation: animation-floating 4s ease-in-out infinite;
                animation: animation-floating 4s ease-in-out infinite;
        will-change: transform;
    }

    .feature-api .feature-animation:hover .animation-api-app {
        left: 30px;
    }
    .feature-api .feature-animation:hover .animation-api-ufo {
        -webkit-transform: rotate(55deg);
                transform: rotate(55deg);
        right: 35px;
    }
    .feature-api .feature-animation:hover .animation-api-ufo-beam {
        -webkit-transform: rotate(5deg);
                transform: rotate(5deg);
        opacity: 1;
    }
    .feature-api .feature-animation:hover .animation-api-app-browser.first {
        opacity: 1;
        -webkit-transform: translate(-6px, -6px);
                transform: translate(-6px, -6px);
    }
    .feature-api .feature-animation:hover .animation-api-app-browser.second {
        opacity: 1;
        -webkit-transform: translate(6px, 6px);
                transform: translate(6px, 6px);
    }
    .animation-api-app-block-scroll {
        position: absolute;
        height: 5px;
        right: 15px;
        top: 115px;
        background: rgba(255, 255, 255, 0.3);
        left: 15px;
        border-radius: 3px;
    }
    .animation-api-app-block-scroll:before {
        content: "";
        position: absolute;
        background: white;
        height: 5px;
        width: 25px;
        left: 0px;
        border-radius: 3px 0 0 4px;
    }
    .animation-api-app-block-filler {
        position: absolute;
        left: 15px;
        right: 15px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px 3px 0 0;
        bottom: 0;
        top: 130px;
    }
    .animation-api-app-browser {
        position: absolute;
        opacity: 0;
        -webkit-transform: none;
                transform: none;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        top: 15px;
        background: #f7f7f7;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
                box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
        border-radius: 3px;
        left: 15px;
        right: 15px;
        bottom: 15px;
    }
    .animation-api-app-browser:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 8px;
        -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25);
                box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25);
        border-radius: 3px 3px 0 0;
        background: #dedede;
    }
    .animation-api-app-browser:after {
        content: "";
        position: absolute;
        width: 4px;
        top: 2px;
        right: 3px;
        border-radius: 4px;
        height: 4px;
        background: rgba(0, 0, 0, 0.5);
    }

    .feature-responsive .animation-background {
        background-image: url(../images/features/background-responsive-testing.jpg);
    }

    .animation-responsive-indicators {
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: 1;
        width: 100px;
        border-radius: 0 3px 3px 0;
        background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(80%, rgba(0, 0, 0, 0.75)));
        background: -webkit-linear-gradient(left, transparent 0%, rgba(0, 0, 0, 0.75) 80%);
        background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.75) 80%);
    }
    .animation-responsive-indicator .icon:after {
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        position: relative;
        font-size: 32px;
        top: -4px;
        left: 12px;
        color: rgba(255, 255, 255, 0.4);
        font-family: "Material Icons";
    }
    .animation-responsive-indicator {
        position: absolute;
        z-index: 1;
        right: 46px;
    }
    .animation-responsive-indicator.desktop {
        top: 24px;
    }
    .animation-responsive-indicator.desktop .icon:after {
        color: rgba(255, 255, 255, 0.85);
        content: "computer";
    }
    .animation-responsive-indicator.tablet {
        top: 83px;
    }
    .animation-responsive-indicator.tablet .icon:after {
        content: "tablet";
    }
    .animation-responsive-indicator.mobile {
        bottom: 11px;
    }
    .animation-responsive-indicator.mobile .icon:after {
        content: "phone_iphone";
    }
    .animation-responsive-arrow {
        position: absolute;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        right: 16px;
        top: 29px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 8.7px 5px 0;
        border-color: transparent white transparent transparent;
    }

    .feature-responsive .feature-animation:hover .animation-responsive-indicator.desktop .icon:after {
        color: rgba(255, 255, 255, 0.4);
    } 

    .feature-responsive .feature-animation:hover .animation-responsive-indicator.mobile .icon:after {
        color: rgba(255, 255, 255, 0.85);
    } 

    .feature-responsive .feature-animation:hover .animation-responsive-arrow {
        top: 151px;
    } 
    .feature-responsive .feature-animation:hover .animation-responsive-window {
        right: 225px;
    }
    .animation-responsive-window {
        position: absolute;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        top: 32px;
        bottom: 32px;
        left: 48px;
        right: 108px;
        border-radius: 3px;
        background: #f7f7f7;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
                box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
        z-index: 1;
    }
    .animation-responsive-window:after {
        content: "";
        width: 23px;
        right: -12px;
        top: 83px;
        position: absolute;
        background: url(../images/features/cursor-move.png);
        height: 9px;
        background-size: cover;
        background-position: center;
    }
    .animation-responsive-window-top {
        background: #202340;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 20px;
        border-radius: 3px 3px 0 0;
    }
    .animation-responsive-window-menu {
        position: absolute;
        height: 2px;
        width: 40px;
        left: 9px;
        top: 9px;
        background: rgba(255, 255, 255, 0.75);
    }
    .animation-responsive-window-menu:after {
        content: "";
        position: absolute;
        height: 2px;
        width: 15px;
        left: 0;
        top: 4px;
        background: rgba(255, 255, 255, 0.75);
    }
    .animation-responsive-window-menu:before {
        content: "";
        position: absolute;
        height: 2px;
        width: 40px;
        left: 0px;
        top: -4px;
        background: rgba(255, 255, 255, 0.75);
    }
    .animation-responsive-window-top:after {
        content: "";
        height: 2px;
        background: #c7c8cf;
        position: absolute;
        width: 10px;
        right: 9px;
        top: 9px;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    .animation-responsive-window-top:before {
        content: "";
        height: 2px;
        background: #c7c8cf;
        position: absolute;
        width: 10px;
        right: 9px;
        top: 9px;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
    .animation-responsive-window-content {
        padding: 9px;
        font-size: 0;
        position: absolute;
        top: 20px;
        overflow: hidden;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .animation-responsive-window-content:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 15px;
        border-radius: 0 0 3px 3px;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#f7f7f7));
        background: -webkit-linear-gradient(top, transparent, #f7f7f7);
        background: linear-gradient(to bottom, transparent, #f7f7f7);
    }
    .animation-responsive-window-block {
        display: inline-block;
        width: 50px;
        margin: 4px;
        height: 30px;
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.25);
    }

    .feature-no-plugins .feature-animation {
        border-radius: 3px;
        overflow: hidden;
        background: url(../images/features/background-no-plugins.jpg);
        background-size: cover;
    }

    .feature-no-plugins .feature-animation:hover .animation-broken-browser.left {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
        left: 47px;
        top: 44px;
    }

    .feature-no-plugins .feature-animation:hover .animation-broken-browser.right {
        -webkit-transform: rotate(4deg);
                transform: rotate(4deg);
        left: 200px;
        top: 44px;
    }
    .animation-broken-browser {
        -webkit-transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
        transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
        background: #dedede;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        position: absolute;
        top: 34px;
        width: 106px;
        height: 132px;
    }
    .animation-broken-browser.left {
        border-radius: 3px 0 0 3px;
        left: 68px;
    }
    .animation-broken-browser.right {
        border-radius: 0 3px 3px 0;
        left: 179px;
    }
    .animation-broken-browser.left .animation-broken-browser-top:before {
        background: #646464;
        z-index: 1;
        bottom: 0;
        right: -6px;
        width: 6px;
        height: 1px;
        position: absolute;
        content: "";
    }
    .animation-broken-browser-top:after, .animation-broken-browser-content:after {
        width: 6px;
        height: 100%;
        position: absolute;
        content: "";
        background-repeat-x: no-repeat;
        top: 0;
        bottom: 0;
    }
    .animation-broken-browser.left .animation-broken-browser-top:after {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDYgMTIiPg0KIDxnIGZpbGw9IiNhNmE2YTYiPg0KICA8cGF0aCBkPSJNIDAgMCBMIDYgMCBMIDAgNiBMIDYgMTIgTCAwIDEyIi8+DQogPC9nPg0KPC9zdmc+");
        right: -6px;
    }
    .animation-broken-browser.left .animation-broken-browser-content:after {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDYgMTIiPg0KIDxnIGZpbGw9IiNkZWRlZGUiPg0KICA8cGF0aCBkPSJNIDAgMCBMIDYgMCBMIDAgNiBMIDYgMTIgTCAwIDEyIi8+DQogPC9nPg0KPC9zdmc+");
        right: -6px;
    }

    .animation-broken-browser.right .animation-broken-browser-content:after {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDYgMTIiPg0KIDxnIGZpbGw9IiNkZWRlZGUiPg0KICA8cGF0aCBkPSJNIDYgMCBMIDAgNiBMIDYgMTIiLz4NCiA8L2c+DQo8L3N2Zz4=");
        left: -6px;
    }

    .animation-broken-browser.right .animation-broken-browser-top:after {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDYgMTIiPg0KIDxnIGZpbGw9IiNhNmE2YTYiPg0KICA8cGF0aCBkPSJNIDYgMCBMIDAgNiBMIDYgMTIiLz4NCiA8L2c+DQo8L3N2Zz4=");
        left: -6px;
    }
    
    .animation-broken-browser.right:before {
        left: -5px;
        background-position-x: 6px;
    }
    .animation-broken-browser.left:after {
        right: -5px;
    }
    .animation-broken-browser-block-extension .icon:after {
        content: "extension";
        font-family: "Material Icons";
        font-size: 24px;
        position: absolute;
        top: 13px;
        left: 32px;
        color: rgba(0, 0, 0, 0.3);
    }
    .animation-broken-browser-block-text {
        position: relative;
        margin: 0 10px 5px 10px;
        height: 4px;
        border-radius: 4px;
        background: #b2b2b2;
    }

    .animation-broken-browser-block-extension {
        position: relative;
        margin: 10px 10px 5px 10px;
        height: 50px;
        background: #b2b2b2;
        border-radius: 3px;
    }
    .animation-broken-browser-block-empty {
        position: relative;
        margin: 10px 10px 5px 10px;
        height: 35px;
        width: 50%;
        border: 3px #b2b2b2 dashed;
        border-radius: 3px;
    }
    .animation-broken-browser-block-error .icon:after {
        content: "change_history";
        font-family: "Material Icons";
        position: absolute;
        left: 6px;
        top: 4px;
        color: white;
        font-size: 18px;
    }
    .animation-broken-browser-button {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #5d5d5d;
        border-radius: 12px;
        position: relative;
        left: -18px;
        margin-right: 6px;
        top: 6px;
    }
    .animation-broken-browser-block-error {
        position: relative;
        margin: 10px 10px 5px 10px;
        height: 25px;
        background: crimson;
        border-radius: 3px;
    }
    .animation-broken-browser-block-empty:before {
        content: "";
        height: 23px;
        position: absolute;
        border-radius: 3px;
        width: 25px;
        top: -3px;
        right: -36px;
        background: #b2b2b2;
    }
    .animation-broken-browser-block-empty:after {
        content: "";
        height: 8px;
        position: absolute;
        border-radius: 3px;
        width: 25px;
        top: 24px;
        right: -36px;
        background: #bfbfbf;
    }
    
    .animation-broken-browser .animation-broken-browser-top {
        top: 0;
        position: absolute;
        left: 0;
        height: 24px;
        font-size: 0;
        -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.4);
                box-shadow: inset 0 -1px rgba(0, 0, 0, 0.4);
        background: #a6a6a6;
        right: 0;
    }
    .animation-broken-browser.left .animation-broken-browser-top {
        border-radius: 3px 0 0 0;
    }
    .animation-broken-browser.right .animation-broken-browser-top {
        border-radius: 0 3px 0 0;
    }
    .animation-broken-browser-content {
        position: absolute;
        top: 24px;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .feature-latest-browsers .feature-animation {
        border-radius: 3px;
        overflow: hidden;
        background: url(../images/features/background-latest-browsers.jpg);
        background-size: cover;
    }
    .animation-latest-window {
        position: absolute;
        overflow: hidden;
        top: 40px;
        left: 40px;
        right: 40px;
        bottom: 0;
        border-radius: 3px 3px 0 0;
        background: #f7f7f7;
    }
    .animation-latest-top {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 40px;
        border-radius: 3px 3px 0 0;
        -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3);
                box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3);
        background: #4CAF50;
    }
    .animation-latest-top:after {
        content: "";
        position: absolute;
        left: 44px;
        top: 17px;
        background: rgba(255, 255, 255, 0.5);
        right: 20px;
        height: 5px;
        border-radius: 5px;
    }
    .animation-latest-top:before {
        content: "";
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        position: absolute;
        left: 44px;
        top: 17px;
        background: white;
        right: 210px;
        border-radius: 5px 0 0 5px;
        height: 5px;
    }
    .animation-latest-browser {
        position: relative;
        margin-bottom: 10px;
        height: 48px;
        display: inline-block;
        width: 100%;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 3px;
    }
    .animation-latest-content {
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        margin: 10px;
        font-size: 0;
    }
    .feature-latest-browsers .feature-animation:hover .animation-latest-subtitle-wrapper {
        -webkit-transform: translateY(-91px);
                transform: translateY(-91px);
    }
    .feature-latest-browsers .feature-animation:hover .animation-latest-content {
        -webkit-transform: translateY(-125px);
                transform: translateY(-125px);
    }
    .feature-latest-browsers .feature-animation:hover .animation-latest-top:before {
        border-radius: 5px;
        right: 20px;
    }
    .animation-latest-subtitle-wrapper {
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        font-size: 0;
        -webkit-transform: translateY(-3px);
                transform: translateY(-3px);
    }
    .animation-latest-subtitle-wrapper span {
        display: inline-block;
        font-size: 15px;
        width: 100%;
    }
    .animation-latest-top .icon:after {
        content: "forward";
        font-family: "Material Icons";
        color: white;
        font-size: 24px;
        position: absolute;
        left: 10px;
        top: 7px;
        -webkit-transform: rotate(-90deg);
                transform: rotate(-90deg);
    }
    .animation-latest-subtitle-still, .animation-latest-subtitle-moving {
        position: relative;
        display: inline-block;
        height: 22px;
        overflow: hidden;
    }
    .animation-latest-subtitle-moving {
        height: 16px;
        top: -3px;
    }
    .animation-latest-subtitle {
        position: absolute;
        color: rgba(0, 0, 0, 0.75);
        width: 100%;
        text-align: left;
        top: 23px;
        font-size: 15px;
        left: 48px;
        bottom: 3px;
        overflow: hidden;
    }
    .animation-latest-title {
        position: absolute;
        font-size: 15px;
        left: 48px;
        top: 5px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.75);
    }
    .animation-latest-icon {
        position: absolute;
        width: 32px;
        height: 32px;
        top: 8px;
        left: 8px;
        background-size: contain;
    }
    .animation-latest-browser.ie .animation-latest-icon {
        background-image: url(../images/features/browser-ie.png);
    }
    .animation-latest-browser.chrome .animation-latest-icon {
        background-image: url(../images/features/browser-chrome.png);
    }
    .animation-latest-browser.firefox .animation-latest-icon {
        background-image: url(../images/features/browser-firefox.png);
    }
    .animation-latest-browser.opera .animation-latest-icon {
        background-image: url(../images/features/browser-opera.png);
    }
    .feature-extensions .feature-animation {
        background-size: cover;
        background-image: url(../images/features/background-extensions.jpg);
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
                box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
    }
    .animation-extension-browser-content {
        background: url(../images/features/foreground-extensions.png);
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .animation-extension-browser-bar {
        position: absolute;
        top: 32px;
        border-bottom: 1px #e1e1e2 solid;
        background: #f9f9fa;
        left: 0;
        right: 0;
        height: 40px;
    }
    .animation-extension-collapse {
        position: absolute;
        width: 10px;
        height: 1px;
        right: 110px;
        top: 16px;
        background: white;
    }
    .animation-extension-close {
        position: absolute;
        top: 12px;
        right: 18px;
    }
    .animation-extension-close:before, .animation-extension-close:after {
        content: "";
        background: white;
        height: 1px;
        width: 13px;
        position: absolute;
        right: 3px;
        top: 4px;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    .animation-extension-close:after {
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
    .animation-extension-url {
        border: 1px #0078d7 solid;
        border-left: 0;
        border-radius: 0 2px 2px 0;
        position: absolute;
        background: white;
        top: 5px;
        bottom: 5px;
        left: 0;
        width: 100px;
    }
    .animation-extension-search {
        border: 1px #bebebf solid;
        border-radius: 2px;
        position: absolute;
        background: white;
        top: 5px;
        bottom: 5px;
        left: 110px;
        width: 100px;
    }
    .animation-extension-expand {
        position: absolute;
        top: 12px;
        width: 10px;
        height: 10px;
        right: 64px;
        border: 1px white solid;
    }
    .animation-extension-browser-top {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 32px;
        background: transparent;
    }
    .animation-extension-browser {
        position: absolute;
        top: 30px;
        right: 30px;
        left: 0;
        bottom: 0;
        background: #202340;
        border-top: 1px solid;
        border-right: 1px solid;
        border-color: #0078d7;
    }
    .animation-extension-placeholder {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 10px;
        right: 46px;
        top: 14px;
        background: #b5b5b5;
    }
    .animation-extension-window {
        position: absolute;
        font-size: 0;
        -webkit-transition: all 0.25s ease;
        transition: all 0.25s ease;
        border-radius: 3px 3px 0 0;
        background: #5581b5;
        top: 72px;
        opacity: 0;
        padding-top: 27px;
        bottom: 0;
        left: 45px;
        right: 15px;
        z-index: 2;
    }
    .animation-extension-search .icon:after {
        content: "search";
        font-size: 21px;
        color: rgba(0, 0, 0, 0.5);
        position: absolute;
        left: 6px;
        top: 4px;
    }
    .feature-extensions .feature-animation:hover .animation-extension-window {
        top: 80px;
        opacity: 1;
    }
    .animation-extension-window:before {
        content: "";
        top: -10px;
        right: 60px;
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 10px 10px 10px;
        border-color: transparent transparent #5581b5 transparent;
    }
    .animation-extension-placeholder.second {
        right: 16px;
    }
    .animation-extension-window-icon {
        position: relative;
        width: 32px;
        height: 32px;
        display: inline-block;
        opacity: 0.75;
        margin-right: 8px;
        margin-left: 8px;
        background: url("../images/features/bw-browsers-white.png");
    }
    .animation-extension-window-icon.firefox {
        background-position-x: -32px;
    }
    .animation-extension-window-icon.opera {
        background-position-x: -64px;
    }
    .animation-extension-window-icon.safari {
        background-position-x: -96px;
    }
    .animation-extension-window-icon.ie {
        background-position-x: -128px;
    }
    .animation-extension-button {
        background: transparent;
        -webkit-transition: all 0.25s ease;
        transition: all 0.25s ease;
        border-radius: 2px;
        position: absolute;
        width: 24px;
        top: 8px;
        right: 74px;
        height: 24px;
    }
    .animation-extension-icon {
        background: url(../images/features/alien-ship-logo-52x52.png);
        background-size: contain;
        position: absolute;
        top: 2px;
        right: 1px;
        width: 21px;
        height: 21px;
    }
    .feature-extensions .feature-animation:hover .animation-extension-button {
        background: rgba(0, 0, 0, 0.1);
    }
    .feature-description .extension-links li {
        list-style-type: none;
        display: inline-block;
        position: relative;
        width: 65px;
        font-size: 15px;
        margin-left: 30px;
        margin-bottom: 4px;
    }
    .feature-description .extension-links li:after {
        content: "";
        -webkit-transition: all 0.25s ease;
        transition: all 0.25s ease;
        position: absolute;
        background: url(../images/features/bw-browsers.png);
        background-size: cover;
        width: 16px;
        left: -24px;
        top: 3px;
        height: 16px;
        opacity: 0.2;
    }
    .feature-description .extension-links li:not(.disabled):hover:after {
        opacity: 0.5;
    }
    .extension-links li.disabled {
        opacity: 0.5;
    }
    .extension-links li.disabled a {
        text-decoration: none;
        cursor: default;
        pointer-events: none;
    }
    .feature-description .extension-links li a {
        color: rgba(0, 0, 0, 0.75);
    }
    .feature-description .extension-links {
        -webkit-user-select: none;
                user-select: none;
        padding-top: 10px;
        font-size: 0;
    }
    .extension-links li.firefox:after {
        background-position-x: -16px;
    }

    .extension-links li.opera:after {
        background-position-x: -32px;
    }

    .extension-links li.safari:after {
        background-position-x: -48px;
    }

    .extension-links li.ie:after {
        background-position-x: -64px;
    }

    .extension-links li.edge:after {
        background-position-x: -80px;
    }
    .animation-bookmarklets-bar {
        background: white;
        text-align: left;
        z-index: 2;
        left: 0;
        position: absolute;
        width: 100%;
        top: 0;
        height: 36px;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    }
    .feature-bookmarklets .feature-animation {
        border: 1px #d2d2d2 solid;
        border-radius: 3px;
    }
    .animation-bookmarklets-link {
        position: relative;
        display: inline-block;
        height: 25px;
        top: 5px;
        left: 4px;
    }
    .animation-bookmarklets-page {
        position: absolute;
        border-radius: 0 0 3px 3px;
        top: 34px;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        background: #e8e8e8;
    }
    .animation-bookmarklets-bookmark-text {
        position: absolute;
        top: 6px;
        left: 27px;
        right: 3px;
        overflow: hidden;
           text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
    }

    .animation-bookmarklets-bookmark-icon {
        background: url(../images/features/browser-ie-small.png);
        position: absolute;
        width: 16px;
        height: 16px;
        top: 7px;
        left: 7px;
    }
    .animation-bookmarklets-bookmark-pointer {
        position: absolute;
        bottom: -12px;
        right: -4px;
        background: url(../images/features/cursor.png);
        background-size: cover;
        width: 12px;
        height: 19px;
        z-index: 1;
    }
    .animation-bookmarklets-bookmark-placeholder {
        position: absolute;
        top: 27px;
        right: 15px;
        border-radius: 3px;
        -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.15);
                box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.15);
        background: rgba(0, 0, 0, 0.05);
        height: 31px;
        width: 155px;
    }
    .feature-bookmarklets .feature-animation:hover .animation-bookmarklets-bookmark-element {
        right: 90px;
        top: 2px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    }
    .animation-bookmarklets-bookmark-element {
        z-index: 2;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        position: absolute;
        top: 61px;
        right: 15px;
        border-radius: 2px;
        background: white;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        height: 31px;
        width: 155px;
    }
    .animation-bookmarklets-page .icon:after {
        content: "book";
        font-size: 38px;
        position: absolute;
        color: rgba(0, 0, 0, 0.3);
        left: 10px;
        top: 24px;
    }
    .animation-bookmarklets-title:before {
        content: "";
        position: absolute;
        height: 8px;
        border-radius: 8px;
        width: 90px;
        background: rgba(0, 0, 0, 0.2);
        top: 27px;
        left: 50px;
    }
    .animation-bookmarklets-select {
        position: absolute;
        top: 82px;
        left: 15px;
        width: 100px;
        height: 25px;
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.15);
    }
    .animation-bookmarklets-select.second {
        left: 124px;
    }
    .animation-bookmarklets-select.third {
        left: 233px;
    }
    .animation-bookmarklets-select:after {
        content: "";
        width: 0;
        height: 0;
        right: 7px;
        top: 11px;
        border-style: solid;
        border-width: 4.5px 4px 0 4px;
        border-color: rgba(0, 0, 0, 0.3) transparent transparent transparent;
        position: absolute;
    }
    .animation-bookmarklets-title:after {
        content: "";
        position: absolute;
        height: 8px;
        border-radius: 8px;
        width: 70px;
        top: 39px;
        left: 50px;
        background: rgba(0, 0, 0, 0.2);
    }
    .animation-bookmarklets-block {
        position: absolute;
        background: rgba(0, 0, 0, 0.1);
        bottom: 0;
        top: 116px;
        left: 15px;
        right: 15px;
        border-radius: 3px 3px 0 0;
    }
    .animation-bookmarklets-link .icon:after {
        color: #1a73e8;
        content: "star";
        font-size: 16px;
        position: relative;
        top: -4px;
        left: 4px;
    }
    .animation-bookmarklets-link span {
        position: relative;
        font-size: 13px;
        left: 6px;
        top: -7px;
    }
    section.features .feature.feature-extensions {
        height: 420px;
    }
    .feature-coming-soon .feature-animation {
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.1);
    }
    .feature-coming-soon .feature-title, .feature-coming-soon .feature-description {
        color: rgba(0, 0, 0, 0.5);
    }
    .feature-coming-soon .feature-animation span {
        display: inline-block;
        font-size: 64px;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25);
        color: rgba(0, 0, 0, 0.2);
        position: relative;
        padding: 9px;
        top: 28px;
    }
    .feature-coming-soon .feature-animation span:nth-child(1) {
        -webkit-transform: rotate(-15deg) translateY(10px);
                transform: rotate(-15deg) translateY(10px);
    }
    .feature-coming-soon .feature-animation span:nth-child(3) {
        -webkit-transform: rotate(15deg) translateY(10px);
                transform: rotate(15deg) translateY(10px);
    }
    .animation-safe-inside {
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border: 3px #25282c solid;
        background: #383d43;
        border-radius: 5px;
    }
    .animation-safe-box {
        position: absolute;
        width: 160px;
        height: 110px;
        border-radius: 5px;
        background: #59616a;
        top: 40px;
        left: 90px;
    }
    .animation-safe-depth {
        position: absolute;
        width: 20px;
        height: 3px;
        background: #25282c;
    }
    .animation-safe-depth.top.left {
        top: -1px;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        -webkit-transform-origin: left;
                transform-origin: left;
    }
    .animation-safe-depth.top.right {
        top: -1px;
        right: 0px;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        -webkit-transform-origin: right;
                transform-origin: right;
    }
    .animation-safe-depth.bottom.left {
        bottom: -1px;
        -webkit-transform-origin: left;
                transform-origin: left;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
    .animation-safe-depth.bottom.right {
        bottom: -1px;
        -webkit-transform-origin: right;
                transform-origin: right;
        right: 0;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    .animation-safe-inside:before {
        position: absolute;
        content: "";
        left: 1px;
        border-top: 14px solid #2c3035;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        height: 0;
        width: 92px;
    }
    .animation-safe-inside:after {
        content: "";
        position: absolute;
        background: transparent;
        -webkit-box-shadow: inset 0 0 0 3px #25282c;
                box-shadow: inset 0 0 0 3px #25282c;
        top: 13px;
        bottom: 13px;
        left: 13px;
        right: 13px;
        border-radius: 3px;
    }
    .animation-safe-door {
        z-index: 3;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        position: absolute;
        border-radius: 3px;
        background: #41474e;
        top: 18px;
        left: 18px;
        right: 18px;
        bottom: 18px;
    }
    .animation-safe-knob {
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        position: absolute;
        top: 21px;
        left: 16px;
        width: 30px;
        height: 30px;
        border-radius: 30px;
        background: #a8b6c0;
    }
    .animation-safe-knob:after {
        content: "";
        position: absolute;
        top: 5px;
        left: 12px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 3px 5px 3px;
        border-color: transparent transparent #41474e transparent;
    }
    .feature-safe-browsing .feature-animation {
        border-radius: 3px;
        background: #9ea5ae;
    }
    .feature-safe-browsing .feature-animation:hover .animation-safe-knob {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
    .feature-safe-browsing .feature-animation:hover .animation-safe-door {
        opacity: 0.2;
    }
    .animation-safe-knob:before {
        content: "";
        position: absolute;
        background: #ebebeb;
        z-index: 2;
        width: 12px;
        height: 12px;
        border-radius: 10px;
        top: 9px;
        left: 9px;
    }
    .animation-safe-box:before, .animation-safe-box:after {
        position: absolute;
        content: "";
        bottom: -9px;
        left: 16px;
        border-top: 9px solid #3f444b;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        height: 0;
        width: 10px;
    }
    .animation-safe-box:after {
        left: 120px;
    }
    @-webkit-keyframes animation-floating {
        0% {
            -webkit-transform: translateY(0);
                    transform: translateY(0);
        }
        50% {
            -webkit-transform: translateY(8px);
                    transform: translateY(8px);
        }
        100% {
            -webkit-transform: translateY(0);
                    transform: translateY(0);
        }
    }
    @keyframes animation-floating {
        0% {
            -webkit-transform: translateY(0);
                    transform: translateY(0);
        }
        50% {
            -webkit-transform: translateY(8px);
                    transform: translateY(8px);
        }
        100% {
            -webkit-transform: translateY(0);
                    transform: translateY(0);
        }
    }
    @-webkit-keyframes animation-floating-shadow {
        0% {
            width: 56px;
        }
        50% {
            width: 74px;
        }
        100% {
            width: 56px;
        }
    }
    @keyframes animation-floating-shadow {
        0% {
            width: 56px;
        }
        50% {
            width: 74px;
        }
        100% {
            width: 56px;
        }
    }
    .animation-safe-shadow {
        -webkit-animation: animation-floating-shadow 4s ease-in-out infinite;
                animation: animation-floating-shadow 4s ease-in-out infinite;
        position: absolute;
        bottom: 5px;
        height: 3px;
        background: rgba(0, 0, 0, 0.2);
        width: 74px;
        border-radius: 3px;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
    }
    .animation-safe-browser {
        -webkit-animation: animation-floating 4s ease-in-out infinite;
                animation: animation-floating 4s ease-in-out infinite;
        position: absolute;
        z-index: 1;
        opacity: 1;
        -webkit-transform: none;
                transform: none;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        top: 10px;
        background: #f7f7f7;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
                box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
        border-radius: 3px;
        left: 25px;
        right: 25px;
        bottom: 20px;
    }
    .animation-safe-browser:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 8px;
        -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25);
                box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25);
        border-radius: 3px 3px 0 0;
        background: #dedede;
    }
    .animation-safe-browser:after {
        content: "";
        position: absolute;
        width: 4px;
        top: 2px;
        right: 3px;
        border-radius: 4px;
        height: 4px;
        background: rgba(0, 0, 0, 0.5);
    }

/* Pricing */
    i.icon.icon-cake:after { content: "cake"; }
    i.icon.icon-time:after { content: "timelapse"; }
    i.icon.icon-globe:after { content: "public"; }
    i.icon.icon-person:after { content: "person"; }
    i.icon.icon-group:after { content: "group"; }
    i.icon.icon-bug:after { content: "bug_report"; }
    i.icon.icon-brightness:after { content: "brightness_low"; }
    i.icon.icon-help:after { content: "help"; }
    i.icon.icon-star:after { content: "star"; }
    i.icon.icon-check:after { content: "check"; }
    i.icon.icon-back:after { content: "arrow_back"; }
    i.icon.icon-lock:after { content: "lock"; }
    i.icon.icon-update:after { content: "cached"; }
    i.icon.icon-warning:after { content: "warning"; }
    i.icon.icon-settings:after { content: "settings"; }
    i.icon.icon-check-circle:after { content: "check_circle"; }

    section.plans {
        font-size: 0;
        margin: 0 auto;
        position: relative;
        text-align: center;
        -webkit-user-select: none;
                user-select: none;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
        background: #5481b5;
        padding: 120px 0 120px 0;
    }

    /* Fixes MacOS backface-visibility rendering bug */
    section.plans .plans-container {
        opacity: 0.9999;
    }

    @media (max-width: 776px) {
        section.plans.has-selected > .plan-team.selected.in-state-payment {
            margin-top: 210px;
        }
        section.plans.has-selected > .plan-team.selected.in-state-payment .plan-side-back.state-payment .plan-settings-window {
            right: 0;
            width: 275px;
            top: -210px;
        }
    }

    .pricing-title {
        position: relative;
        width: 100%;
        top: -79px;
        height: 46px;
        font-family: 'Raleway', Ubuntu, Helvetica, sans-serif;
        color: white;
        margin: 0 auto;
    }

    .pricing-period-selector {
        position: relative;
        top: -3px;
        font-size: 26px;
    }

    .pricing-period-selector span {
        position: relative;
        padding-left: 22px;
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
    }

    .pricing-period-selector span.selected {
        color: white;
        text-decoration: underline;
    }

    .pricing-period-selector span:first-child {
        padding-left: 0;
    }
    .pricing-period-selector span:first-child:after {
        content: none;
    }

    .pricing-period-selector span:after {
        content: "/";
        position: absolute;
        left: -2px;
        top: -2px;
        color: white;
    }

    .pricing-title h2 {
        font-size: 36px;
        width: auto;
        display: inline-block;
        position: relative;
        -webkit-user-select: text;
                user-select: text;
    }

    section.plans.has-selected .plan {
        width: 0px;
        margin: 0;
        -webkit-transform: scale(0.95);
                transform: scale(0.95);
    }

    section.plans.has-selected .plan.selected {
        width: 275px;
        height: 435px;
        -webkit-transform: scale(1.0) rotateY(180deg);
                transform: scale(1.0) rotateY(180deg);
        -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
                box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        outline: none;
        z-index: 99;
    }

    section.plans .plan.selected {
        overflow: visible;
    }

    section.plans .plan {
        -webkit-user-select: text;
                user-select: text;
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        white-space: nowrap;
        display: inline-block;
        position: relative;
        overflow: hidden;
        width: 275px;
        height: 428px;
        margin: 0 10px 20px 10px;
        background: white;
        -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.16);
                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.16);
        border-radius: 5px;
    }
    .plan-billing {
        -webkit-user-select: none;
                user-select: none;
        position: relative;
        text-align: left;
        font-size: 16px;
        padding-top: 1px;
        height: 42px;
        text-shadow: 0 1px 0 white;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.5);
        background: rgba(0, 0, 0, 0.05);
        -webkit-box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 -2px 2px -2px rgba(0, 0, 0, 0.2), inset 0 1px white;
                box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2), 0 -2px 2px -2px rgba(0, 0, 0, 0.2), inset 0 1px white;
    }
    .plan-billing span {
        -webkit-user-select: text;
                user-select: text;
        display: inline-block;
        position: relative;
    }
        background: #3297fd;
        color: white;
        text-shadow: none;
    }
    .plan-billing span::selection {
        background: #3297fd;
        color: white;
        text-shadow: none;
    }
    .plan-billing .currency {
        font-size: 17px;
        left: 55px;
        top: -2px;
    }
    .plan-billing .amount {
        font-size: 27px;
        top: 2px;
        left: 53px;
        color: rgba(0, 0, 0, 0.65);
    }
    .plan-billing .timespan {
        top: -2px;
        left: 54px;
    }
    .plan .plan-side-back, .plan .plan-side-front {
        position: absolute;
        background: white;
        border-radius: 5px;
        transform: rotateX(0deg);
        -webkit-transform: rotateX(0deg);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        width: 100%;
        height: 100%;
    }

    section.plans .plan .plan-side-front {
        z-index: 2;
    }

    section.plans .plan .plan-side-back {
        z-index: 1;
        transform: rotateX(0deg) rotateY(180deg);
        -webkit-transform: rotateX(0deg) rotateY(180deg);
    }



    .plan .plan-title {
        height: 60px;
        -webkit-user-select: text;
                user-select: text;
        border-radius: 5px 5px 0 0;
        -webkit-box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
                box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
        position: relative;
    }

    .plan-title > .icon {
        position: absolute;
        left: 16px;
        top: 16px;
        font-size: 27px;
        color: rgba(255, 255, 255, 0.75);
    }

    .plan-title .plan-name {
        font-size: 16px;
        font-weight: bold;
        position: absolute;
        left: 56px;
        top: 11px;
        color: white;
    }

    .plan-features {
        padding-top: 14px;
    }

    .plan-title .plan-price {
        position: absolute;
        -webkit-user-select: text;
                user-select: text;
        left: 56px;
        top: 31px;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.75);
    }

    .plan-feature .icon {
        position: absolute;
        left: 18px;
        top: 9px;
        font-size: 22px;
        color: rgba(0, 0, 0, 0.4);
    }

    .plan-feature {
        padding: 8px 0 8px;
        position: relative;
    }

    .plan-feature span {
        position: relative;
        vertical-align: top;
        padding-left: 55px;
        padding-right: 15px;
        text-align: left;
        color: rgba(0, 0, 0, 0.8);
        font-size: 14px;
        top: 2px;
        width: 275px;
        display: inline-block;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .plan-free .plan-feature .icon {
        color: #2ab6f9;
    }

    .plan-developer .plan-feature .icon {
        color: #e2ad58;
    }

    .plan-team .plan-feature .icon {
        color: #d96d59;
    }

    .plan-free .plan-title {
        background: -webkit-gradient(linear, left top, right top, from(#3fc1fd), to(#03A9F4));
        background: -webkit-linear-gradient(left, #3fc1fd 0%, #03A9F4);
        background: linear-gradient(to right, #3fc1fd 0%, #03A9F4);
    }

    .plan-developer .plan-title {
        background: -webkit-gradient(linear, left top, right top, from(#e7bb74), to(#dd9f3c));
        background: -webkit-linear-gradient(left, #e7bb74 0%, #dd9f3c);
        background: linear-gradient(to right, #e7bb74 0%, #dd9f3c);
    }

    .plan-team .plan-title {
        background: -webkit-gradient(linear, left top, right top, from(#e5806c), to(hsla(10, 58%, 54%, 1)));
        background: -webkit-linear-gradient(left, #e5806c 0%, hsla(10, 58%, 54%, 1));
        background: linear-gradient(to right, #e5806c 0%, hsla(10, 58%, 54%, 1));
    }

    .plan-pro .plan-title {
        background: -webkit-gradient(linear, left top, right top, from(#404040), to(black));
        background: -webkit-linear-gradient(left, #404040 0%, black);
        background: linear-gradient(to right, #404040 0%, black);
    }

    .plan .plan-button {
        -webkit-user-select: none;
                user-select: none;
        position: absolute;
        bottom: 0;
        border-radius: 0 0 5px 5px;
        left: 0;
        right: 0;
        height: 48px;
        text-align: center;
    }

    .plan-button button {
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        width: 100%;
        height: 100%;
        border: 0;
        outline: none;
        border-radius: 0 0 5px 5px;
        padding: 8px;
        font-family: "Roboto", sans-serif;
        font-weight: bold;
        letter-spacing: 0.7px;
        text-transform: uppercase;
        font-size: 14px;
        cursor: pointer;
        color: rgba(0, 0, 0, 0.75);
        background: rgba(0, 0, 0, 0.08);
        -webkit-box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, 0.25);
                box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, 0.25);
    }

    .plan-developer .plan-button button,
    .plan-team .plan-button button {
        background: hsla(115, 39%, 52%, 1);
        color: rgba(255, 255, 255, 0.9);
    }

    .plan-button button:disabled, .plan-button button.muted {
        opacity: 0.5;
        background: rgba(0, 0, 0, 0.08);
        color: rgba(0, 0, 0, 0.75);
    }

    .plan-payment-methods {
        background: url(../images/pricing/payment-methods.png);
        height: 30px;
        width: 232px;
        position: relative;
        top: 16px;
        left: 22px;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .plan.generic-error .plan-generic-error {
        opacity: 1;
    }
    .plan-generic-error {
        -webkit-transition: all 0.25s ease;
        transition: all 0.25s ease;
        opacity: 0;
        height: 0;
        position: relative;
        font-size: 12px;
        top: 80px;
        text-align: left;
        margin: 0 21px 0 22px;
        overflow: hidden;
    }
    .plan-generic-error .plan-generic-error-container {
        position: relative;
        top: 0px;
        right: 3px;
        display: inline-block;
        padding-left: 30px;
        white-space: normal;
        width: 100%;
        height: auto;
    }
    .plan-generic-error-container span {
        padding: 6px;
        position: relative;
        display: inline-block;
        background: #ea123b;
        border-radius: 3px;
        color: white;
        width: 100%;
    }
    .plan-generic-error .icon:after {
        content: "error";
        position: absolute;
        color: crimson;
        top: 2px;
        left: -2px;
    }
    .plan-payment-data {
        position: relative;
        margin: 0 21px 0 22px;
        top: 32px;
        white-space: normal;
    }

    .plan-input input {
        border: 0;
        outline: none;
        padding: 7px;
        line-height: 15px;
        border-radius: 3px;
        font-size: 13px;
        font-family: "Roboto";
        -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
                box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
        background: rgba(0, 0, 0, 0.075);
    }

    .plan-input input[type=text]:focus {
        -webkit-box-shadow: inset 0 0 2px;
                box-shadow: inset 0 0 2px;
    }

    .plan-card-number, .plan-input-card-number {
        width: 100%;
    }

    .plan-input {
        display: inline-block;
    }
    .plan-card-cvc {
        width: 45px;
        text-align: center;
    }

    .plan-card-exp-month, .plan-card-exp-year {
        width: 36px;
        text-align: center;
    }

    .plan-input-card-exp {
        position: absolute;
        top: 33px;
        left: 0;
    }

    .plan-input-card-exp-slash {
        font-size: 14px;
        margin: 0 3px;
    }

    .plan-input-card-cvc {
        position: absolute;
        top: 33px;
        right: 0;
    }

    .plan-payment-info {
        position: relative;
        top: 78px;
        color: rgba(0, 0, 0, 0.85);
        margin: 0 21px 0 22px;
        font-size: 12px;
        text-align: left;
        white-space: normal;
    }

    .plan-payment-info-text {
        margin-bottom: 5px;
    }

    .plan-coupon-info {
        position: relative;
        opacity: 0;
        -webkit-transition: all 0.25s ease;
        transition: all 0.25s ease;
    }
    .plan-coupon-info .icon {
        cursor: default;
    }
    .plan-coupon-info .icon:after {
        content: "redeem";
        font-size: 27px;
        left: -6px;
        top: -6px;
        color: rgba(0, 0, 0, 0.3);
        position: absolute;
    }
    .plan-coupon-info .icon.alt:after {
        font-size: 16px;
        position: absolute;
        top: 9px;
        left: 8px;
    }
    .plan-payment-coupon.error .plan-coupon-info .icon.alt:after {
        content: "error";
        color: crimson;
    }
    .plan-payment-coupon.success .plan-coupon-info .icon.alt:after {
        content: "check_circle";
        color: #4a9843;
    }
    .plan-payment-coupon {
        background: white;
    }
    .plan-coupon-info .plan-coupon-info-text span{
        display: inline-block;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        max-height: 100%;
        overflow: hidden;
           text-overflow: ellipsis;
        line-height: 14px;
        word-break: normal;
    }
    .plan-coupon-info .plan-coupon-info-text {
        position: absolute;
        left: 36px;
        -webkit-user-select: text;
                user-select: text;
        top: 9px;
        height: 38px;
        right: 0px;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.75);
    }


    .plan-payment-info input.plan-coupon-show  {
        display: none;
    }

    .plan-payment-info input.plan-coupon-show:checked + label ~ .plan-payment-coupon {
        visibility: visible;
        opacity: 1;
        top: 3px;
    }
    .plan-payment-info input.plan-coupon-show:checked + label ~ .plan-payment-coupon.extended {
        top: -34px;
    }

    .plan-payment-coupon.extended .plan-coupon-info {
        opacity: 1;
    }

    .plan-payment-info input.plan-coupon-show:checked + label {
        text-decoration: none;
        cursor: default;
        color: rgba(0, 0, 0, 0.85);
    }

    .plan-payment-info a, .plan-payment-info label, .plan-auth-scroll label {
        color: #0000EE;
        text-decoration: underline;
        cursor: pointer;
    }

    .plan-payment-coupon {
        -webkit-user-select: none;
                user-select: none;
        visibility: hidden;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
        opacity: 0;
        position: relative;
        top: -12px;
        text-align: left;
    }
    .plan-payment-coupon .icon {
        position: relative;
        display: inline-block;
        left: 3px;
        color: rgba(0, 0, 0, 0.75);
        top: 6px;
        font-size: 24px;
        cursor: pointer;
    }
    .plan-payment-coupon .icon.disabled {
        opacity: 0.2;
        cursor: default;
    }
    .plan-coupon-code {
        width: 200px;
        text-transform: uppercase;
    }
    /* empty */
    .plan-coupon-code:invalid {
        text-transform: none;
    }

    .plan-side-back .plan-title > .icon {
        left: 14px;
        top: 18px;
        color: rgba(0, 0, 0, 0.5);
        cursor: pointer;
    }

    .plan-side-back .plan-title {
        background: rgba(0, 0, 0, 0.1);
    }

    .plan-side-back .plan-name, .plan-side-back .plan-price {
        color: rgba(0, 0, 0, 0.7);
    }

    .plan-side-back.state-payment .plan-button button {
        background: hsla(115, 39%, 52%, 1);
        color: rgba(255, 255, 255, 0.9);
    }

    .plan-side-back.state-payment .plan-button button .icon {
        line-height: 0;
        position: relative;
        font-size: 15px;
        color: rgba(255, 255, 255, 0.9);
        top: 2px;
        left: -4px;
        opacity: 1;
    }

    .plan-button button .icon {
        line-height: 0;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        color: rgba(0, 0, 0, 0.75);
        position: relative;
        font-size: 0;
        top: 2px;
        left: 6px;
        opacity: 0;
    }

    .plan-side-scroll-container {
        overflow: hidden;
        position: absolute;
        top: 60px;
        bottom: 48px;
        left: 0;
        right: 0;
    }

    .plan-side-scroller, .plan-auth-scroller {
        font-size: 0;
        -webkit-transition: -webkit-transform 0.5s ease;
        transition: -webkit-transform 0.5s ease;
        transition: transform 0.5s ease;
        transition: transform 0.5s ease, -webkit-transform 0.5s ease;
        width: 100%;
        position: relative;
        height: 100%;
    }

    .plan-side-scroll, .plan-auth-scroll {
        position: relative;
        height: 100%;
        vertical-align: top;
        width: 100%;
        display: inline-block;
    }

    .plan-side-back.state-payment .plan-side-scroller {
        -webkit-transform: translateX(-275px);
                transform: translateX(-275px);
    }
    .plan-side-back.state-complete .plan-side-scroller {
        -webkit-transform: translateX(-550px);
                transform: translateX(-550px);
    }
    body.simple-transforms section.plans.has-selected .plan {
        -webkit-transform: scale(0.95);
                transform: scale(0.95);
    }
    body.simple-transforms section.plans.has-selected .plan.selected {
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
    }
    body.simple-transforms section.plans.has-selected .plan.selected .plan-side-back {
        display: block;
        -webkit-transform: none;
                transform: none;
    }
    body.simple-transforms section.plans.has-selected .plan.selected .plan-side-front, body.simple-transforms section.plans.has-selected .plan .plan-side-back {
        display: none;
        -webkit-transform: none;
                transform: none;
    }

    .plan-side-back .plan-price-scroll-container {
        position: absolute;
        left: 56px;
        top: 31px;
        height: 20px;
        right: 0;
        overflow: hidden;
           text-overflow: ellipsis;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.7);
    }

    .plan-price-scroll-container .plan-price-scroll {
        display: inline-block;
        width: 100%;
        text-align: left;
        float: left;
        clear: both;
    }

    .plan-price-scroll-container .plan-price-scroller {
        position: relative;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        width: 100%;
        height: 100%;
        display: block;
    }



    .plan-side-back .plan-auth-mode + .plan-auth-scroller {
        -webkit-transform: translateX(-275px);
                transform: translateX(-275px);
    }

    .plan-side-back .plan-auth-mode:checked + .plan-auth-scroller {
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
    }

    .plan-side-back.state-auth .plan-price-scroller {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }

    .plan-side-back.state-payment .plan-price-scroller {
        -webkit-transform: translateY(-19px);
                transform: translateY(-19px);
    }

    .plan-side-back.state-complete .plan-price-scroller {
        -webkit-transform: translateY(-38px);
                transform: translateY(-38px);
    }

    .scroll-complete-thanks-icon {
      font-size: 20px;
      margin-top: 100px;
      color: #5481b5;
    }

    .scroll-complete-thanks-message-primary {
      font-size: 16px;
      margint-top:10px;
    }

    .scroll-complete-thanks-message-secondary {
      font-size: 14px;
      margin-top: 20px;
    }

    .plan-auth-scroll-container {
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .plan-auth-text {
        position: relative;
        top: 52px;
        color: rgba(0, 0, 0, 0.85);
        margin: 0 21px 0 22px;
        font-size: 14px;
        text-align: left;
        white-space: normal;
    }

    .plan-auth-text-create-account {
        position: relative;
        top: 90px;
        color: rgba(0, 0, 0, 0.85);
        margin: 0 21px 0 22px;
        font-size: 12px;
        text-align: left;
        white-space: normal;
    }

    .plan-auth-text-sign-in {
        position: relative;
        top: 90px;
        color: rgba(0, 0, 0, 0.85);
        margin: 0 21px 0 22px;
        font-size: 12px;
        text-align: left;
        white-space: normal;
    }

    .plan-side-back .plan-side-scroll-container .plan-auth-mode {
        display: none;
    }

    .plan-auth-data {
        position: relative;
        margin: 0 21px 0 22px;
        top: 80px;
        white-space: normal;
    }

    .plan-auth-data input[type=text], .plan-auth-data input[type=password] {
        width: 100%;
        margin-bottom: 14px;
    }

    .plan-auth-info {
        position: relative;
        margin: 0 21px 0 22px;
        top: 48px;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
        opacity: 0;
        white-space: normal;
        text-align: left;
    }

    .plan-auth-info.visible {
        opacity: 1;
        top: 56px;
    }

    .plan-auth-info .icon {
        color: rgba(0, 0, 0, 0.4);
        font-size: 22px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .plan-auth-info.error .icon-time, .plan-auth-info .icon-warning {
        display: none;
    }

    .plan-auth-info.error .icon-warning {
        display: block;
    }


    .plan-auth-info-text {
        padding-left: 30px;
        position: relative;
        top: 2px;
        vertical-align: top;
        text-align: left;
        color: rgba(0, 0, 0, 0.8);
        font-size: 12px;
        width: 233px;
        display: inline-block;
        white-space: normal;
        word-wrap: break-word;
    }
    .plan-auth-info-text span {
        display: none;
    }

    .plan-side-back .plan-settings {
        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        position: absolute;
        right: 0;
    }

    .plan-side-back.state-payment .plan-settings {
        visibility: visible;
        opacity: 1;
    }

    .plan-settings-window {
        -webkit-transition: all 0.25s ease;
        transition: all 0.25s ease;
        position: absolute;
        right: -240px;
        width: 225px;
        height: 200px;
        top: 0px;
        background: #fdfdfd;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
                box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }

    .plan-settings .icon-settings {
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
        position: absolute;
        top: 19px;
        left: -35px;
        color: rgba(0, 0, 0, 0.75);
    }

    .plan-side-back.state-payment .plan-settings .icon-settings {
        -webkit-transform: none;
                transform: none;
    }

    .plan-team-size-selector {
        -webkit-user-select: none;
                user-select: none;
        white-space: normal;
        font-size: 0;
        padding-top: 14px;
    }
    .plan-team-size-selector input {
        display: none;
    }
    .plan-team-size-title {
        height: 30px;
        -webkit-user-select: none;
                user-select: none;
        position: relative;
        border-radius: 3px 3px 0 0;
        -webkit-box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
                box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
        text-align: left;
        font-size: 14px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.7);
        background: #e6e6e6;
    }
    .plan-team-size-title .team-size-name {
        top: 5px;
        left: 8px;
        position: absolute;
    }
    .plan-team-size-title .team-size-number {
        position: absolute;
        top: 5px;
        right: 8px;
        color: rgba(0, 0, 0, 0.5);
    }
    .plan-team-price-info {
        white-space: normal;
        text-align: left;
        color: rgba(0, 0, 0, 0.8);
        font-size: 14px;
        padding: 12px;
    }
    .plan-team-price-info-size {
        font-size: 16px;
    }
    .plan-team-price-info-price {
        font-size: 16px;
    }
    .plan-team-size-info {
        white-space: normal;
        text-align: left;
        color: rgba(0, 0, 0, 0.8);
        font-size: 12px;
        padding: 12px;
        position: absolute;
        bottom: 0;
    }

    .plan-team-size-selector label {
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        border-radius: 100%;
        color: rgba(0, 0, 0, 0.35);
        line-height: 23px;
        cursor: pointer;
        width: 22px;
        height: 22px;
        margin-right: 1px;
        text-align: center;
    }

    .plan-team-size-selector input:checked + label {
        color: white;
        background: rgba(0, 0, 0, 0.7);
    }

    .plans-questions {
        -webkit-user-select: text;
                user-select: text;
        margin-top: 50px;
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        color: white;
    }

    .plans-questions a {
        color: white;
    }

    .plans-questions .pq2 {
        margin-top: 12px;
    }

/* 
** CUSTOMERS **
*/

#customers {
      margin: 0 auto;
      overflow: hidden;
      text-align: center;
      font-family: 'Open Sans', sans-serif;
}

#customers h2 {
      font-size: 30px;
      color: #489cfd;
      overflow: hidden;
      margin-top: 50px;
      margin-bottom: 40px;
      font-family: 'Raleway', Ubuntu, Helvetica, sans-serif;
}

#customers #wall {
      border-radius: 25px;
      background-color: white;
      width: 850px;
      margin: 0 auto;
      margin-top: 10px;
}

#customers #more-customers {
      font-weight: bold;
      color: rgb(80,80,80);
}

#customers #more-customers .user-count {
      font-size: 20px;
      color: #1A77E3;
}

/* 
** TESTIMONIALS **
*/

#testimonials {
      margin: 0 auto;
      overflow: hidden;
      text-align: center;
      font-family: 'Open Sans', sans-serif;
      border-bottom: 2px solid #e2e2e2;
      padding-bottom: 40px;
      color: #5c5c5c;
}

#testimonials h2 {
      font-size: 30px;
      color: #489cfd;
      overflow: hidden;
      margin-top: 50px;
      margin-bottom: 40px;
      font-family: 'Raleway', Ubuntu, Helvetica, sans-serif;
}

#testimonials .testimonial-text {
      margin: 0 auto;
      width: 600px;
      font-style: italic;
      font-size: 14px;
}

#testimonials .testimonial-sep {
      border-top: 1px solid #cccccc;
      border-bottom: 1px solid #cccccc;
      width: 80px;
      margin: 0px auto;
      margin-top: 20px;
}

#testimonials .testimonial-name {
      margin-top: 20px;
      font-weight: bold;
}

#testimonials #testimonials-pics {
      margin-top: 35px;
      overflow: hidden;
}

#testimonials-pics .testimonial-pic {
      float: left;
      margin-right: 15px;
}

#testimonials-pics .testimonial-pic img {
      opacity: 0.3;
      cursor: pointer;
}

#testimonials-pics .testimonial-pic img.selected {
      opacity: 1;
}

#testimonial-0,
#testimonial-1,
#testimonial-3,
#testimonial-4,
#testimonial-5,
#testimonial-6 {
      display: none;
}