/*

Author: SimplexDraw

*/
    /* reset */
    
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    dl,
    dt,
    dd,
    ol,
    nav ul,
    nav li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }
    
    ol,
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    blockquote,
    q {
        quotes: none;
    }
    
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    /* start editing from here */
    
    a {
        text-decoration: none;
    }
    
    .txt-rt {
        text-align: right;
    }
    /* text align right */
    
    .txt-lt {
        text-align: left;
    }
    /* text align left */
    
    .txt-center {
        text-align: center;
    }
    /* text align center */
    
    .float-rt {
        float: right;
    }
    /* float right */
    
    .float-lt {
        float: left;
    }
    /* float left */
    
    .clear {
        clear: both;
    }
    /* clear float */
    
    .pos-relative {
        position: relative;
    }
    /* Position Relative */
    
    .pos-absolute {
        position: absolute;
    }
    /* Position Absolute */
    
    .vertical-base {
        vertical-align: baseline;
    }
    /* vertical align baseline */
    
    .vertical-top {
        vertical-align: top;
    }
    /* vertical align top */
    
    .underline {
        padding-bottom: 5px;
        border-bottom: 1px solid #eee;
        margin: 0 0 20px 0;
    }
    /* Add 5px bottom padding and a underline */
    
    nav.vertical ul li {
        display: block;
    }
    /* vertical menu */
    
    nav.horizontal ul li {
        display: inline-block;
    }
    /* horizontal menu */
    
    img {
        max-width: 100%;
    }
    /*end reset*/
    
    body {
        font-family: 'Roboto', sans-serif;
    }
    
    .wrap {
        width: 80%;
        margin: 0 auto;
        transition: all .2s linear;
        -moz-transition: all .2s linear;
        /* firefox */
        -webkit-transition: all .2s linear;
        /* safari and chrome */
        -o-transition: all .2s linear;
        /* opera */
        -ms-transition: all .2s linear;
    }
    
    .header_top {
        padding: 15px 0;
        border-bottom: 2px solid #6C733D;
        position: fixed;
        z-index: 1;
        width: 100%;
        clear: both;
        background: #FFF;
    }
    
    .logo {
        float: left;
    }
    
    .menu {
        float: right;
        margin: 3px 0;
    }
    
    .menu li {
        display: inline-block;
    }
    
    .menu li a {
        display: block;
        font-size: 1em;
        font-weight: 500;
        margin: 5px 15px;
        color: #222;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    
    .menu li a:hover {
        color: #6C733D;
    }
    
    .menu li.login a {
        -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 1px #381664;
        -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 1px #381664;
        box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 1px #381664;
        background: #6C733D;
        background: -moz-linear-gradient(top, #6C733D 0%, #8a4bdb 0%, #6C733D 100%, #7846ba 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6C733D), color-stop(0%, #8a4bdb), color-stop(100%, #6C733D), color-stop(100%, #7846ba));
        background: -webkit-linear-gradient(top, #6C733D 0%, #8a4bdb 0%, #6C733D 100%, #7846ba 100%);
        background: -o-linear-gradient(top, #6C733D 0%, #8a4bdb 0%, #6C733D 100%, #7846ba 100%);
        background: -ms-linear-gradient(top, #6C733D 0%, #8a4bdb 0%, #6C733D 100%, #7846ba 100%);
        background: linear-gradient(to bottom, #6C733D 0%, #8a4bdb 0%, #6C733D 100%, #7846ba 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#6C733D', endColorstr='#7846ba', GradientType=0);
        border: 1px solid #673d9d;
        font-weight: normal;
        color: #FFF;
        border-radius: 1px;
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        -o-border-radius: 1px;
    }
    
    .menu li.login a:hover {
        background: #7846ba;
        background: -moz-linear-gradient(top, #7846ba 0%, #6b36af 0%, #8a4bdb 100%, #6c38af 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7846ba), color-stop(0%, #6b36af), color-stop(100%, #8a4bdb), color-stop(100%, #6c38af));
        background: -webkit-linear-gradient(top, #7846ba 0%, #6b36af 0%, #8a4bdb 100%, #6c38af 100%);
        background: -o-linear-gradient(top, #7846ba 0%, #6b36af 0%, #8a4bdb 100%, #6c38af 100%);
        background: -ms-linear-gradient(top, #7846ba 0%, #6b36af 0%, #8a4bdb 100%, #6c38af 100%);
        background: linear-gradient(to bottom, #7846ba 0%, #6b36af 0%, #8a4bdb 100%, #6c38af 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7846ba', endColorstr='#6c38af', GradientType=0);
    }
    
    .menu li.login a:active {
        -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 1px rgba(58, 22, 104, 0.81);
        -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 1px rgba(58, 22, 104, 0.81);
        box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 1px rgba(58, 22, 104, 0.81);
        border: 1px solid #51258A;
        background: #622EA5;
    }
    /********** Login *************/
    /*-------LOGIN STARTS HERE -------*/
    
    #loginContainer {
        position: relative;
    }
    
    #loginContainer a span {
        display: block;
        padding: 4px 25px;
    }
    /* Login Button */
    
    #loginButton {
        display: inline-block;
        position: relative;
        z-index: 30;
        cursor: pointer;
    }
    /* Login Box */
    
    #loginBox {
        position: absolute;
        top: 60px;
        right: 10px;
        display: none;
        z-index: 29;
    }
    
    #loginForm:after {
        content: '';
        position: absolute;
        right: 40px;
        top: -10px;
        border-left: 10px solid rgba(0, 0, 0, 0);
        border-right: 10px solid rgba(0, 0, 0, 0);
        border-bottom: 10px solid #A764FF;
    }
    /* Login Form */
    
    #loginForm {
        width: 248px;
        border-radius: 3px 0 3px 3px;
        -moz-border-radius: 3px 0 3px 3px;
        margin-top: 0px;
        background: #A764FF;
        border: 1px solid #A764FF;
    }
    
    #loginForm fieldset {
        margin: 0 0 10px 0;
        display: block;
        border: 0;
        padding: 0;
    }
    
    fieldset#body {
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        padding: 15px 15px;
        margin: 0;
    }
    
    #loginForm #checkbox {
        width: auto;
        margin: 3px 6px 0 0;
        float: left;
        padding: 0;
        border: 0;
        *margin: -3px 9px 0 0;
        /* IE7 Fix */
    }
    
    #body label {
        color: #FFF;
        margin: 10px 0 0 0;
        display: block;
        float: left;
        font-size: 0.8em;
    }
    
    #loginForm #body fieldset label {
        display: block;
        float: none;
        margin: 0 0 6px 0;
    }
    
    #body label i {
        color: #383838;
        text-shadow: 1px 1px #929292;
        font-weight: 500;
    }
    /* Default Input */
    
    #loginForm input {
        width: 92%;
        border: 1px solid #DADADA;
        color: #222;
        background: #FFF;
        padding: 8px 8px;
        font-size: 0.85em;
        font-family: 'Roboto', sans-serif;
        -webkit-apperance: none;
    }
    /* Sign In Button */
    
    #loginForm #login {
        width: auto;
        float: left;
        font-family: 'Roboto', sans-serif;
        background: #6D2CC2;
        color: #fff;
        font-size: 0.8em;
        padding: 8px 15px;
        border: none;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        -webkit-apperance: none;
        margin: 0 12px 0 0;
        cursor: pointer;
        *padding: 7px 2px 8px 2px;
        /* IE7 Fix */
        transition: all .5s;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        -o-border-radius: 2px;
    }
    
    #loginForm #login:hover {
        background: #57229B;
    }
    /* Forgot your password */
    
    #loginForm span {
        display: block;
        padding: 0px 0px 15px 0px;
    }
    
    #loginForm span a {
        color: #383838;
        text-shadow: 1px 1px #929292;
        font-size: 0.8em;
        font-weight: 500;
        background: none;
        border: none;
        box-shadow: none;
    }
    
    #loginForm span a:hover {
        text-decoration: underline;
    }
    
    input:focus {
        outline: none;
    }
    /*** main ****/
    
    .content_top {
        position: relative;
        background: #6C733D;
    }
    
    .banner_desc {
        float: left;
        width: 62%;
        padding: 10em 0 3em 0;
        text-align: center;
        color: #FFF;
        font-weight: 300;
        text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.31);
        font-family: 'Roboto', sans-serif;
    }
    
    .banner_desc h1 {
        font-size: 3.5em;
    }
    
    .banner_desc h1 span {
        font-weight: bold;
    }
    
    .banner_desc h3 {
        font-size: 1.4em;
        margin-top: 10px;
    }
    
    .banner_desc a.play_icon {
        display: block;
        padding: 15px 0 10px 0;
    }
    
    .banner_desc h3 span {
        font-weight: bold;
    }
    
    .banner_desc p {
        font-size: 0.9em;
        font-style: italic;
        padding-top: 3px;
    }
    
    .sign_up {
        margin-top: 2.5em;
    }
    
    .sign_up input[type="text"] {
        padding: 6px 10px 9px;
        width: 300px;
        margin: 0;
        border: 1px solid #6B36AF;
        background: #FFF;
        font-size: 1em;
        color: #9E9E9E;
        outline: none;
        font-family: 'Roboto', sans-serif;
        box-shadow: 0px 0px 5px #6B36AF;
    }
    
    .sign_up input[type="text"]:focus {
        color: #686868;
    }
    
    .sign_up input[type="submit"] {
        -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 1px rgba(58, 22, 104, 0.81);
        -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 1px rgba(58, 22, 104, 0.81);
        box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 1px rgba(58, 22, 104, 0.81);
        background: #6C733D;
        background: -moz-linear-gradient(top, #6C733D 0%, #8a4bdb 0%, #6C733D 100%, #7846ba 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6C733D), color-stop(0%, #8a4bdb), color-stop(100%, #6C733D), color-stop(100%, #7846ba));
        background: -webkit-linear-gradient(top, #6C733D 0%, #8a4bdb 0%, #6C733D 100%, #7846ba 100%);
        background: -o-linear-gradient(top, #6C733D 0%, #8a4bdb 0%, #6C733D 100%, #7846ba 100%);
        background: -ms-linear-gradient(top, #6C733D 0%, #8a4bdb 0%, #6C733D 100%, #7846ba 100%);
        background: linear-gradient(to bottom, #6C733D 0%, #8a4bdb 0%, #6C733D 100%, #7846ba 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#6C733D', endColorstr='#7846ba', GradientType=0);
        display: inline-block;
        border: 1px solid #673d9d;
        padding: 7px 40px;
        font-size: 1em;
        font-family: 'Roboto', sans-serif;
        color: #FFF;
        margin: 0;
        text-decoration: none;
        cursor: pointer;
        outline: none;
        border-radius: 1px;
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        -o-border-radius: 1px;
        margin-left: 10px;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    
    .sign_up input[type="submit"]:hover {
        background: #7846ba;
        background: -moz-linear-gradient(top, #7846ba 0%, #6b36af 0%, #8a4bdb 100%, #6c38af 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7846ba), color-stop(0%, #6b36af), color-stop(100%, #8a4bdb), color-stop(100%, #6c38af));
        background: -webkit-linear-gradient(top, #7846ba 0%, #6b36af 0%, #8a4bdb 100%, #6c38af 100%);
        background: -o-linear-gradient(top, #7846ba 0%, #6b36af 0%, #8a4bdb 100%, #6c38af 100%);
        background: -ms-linear-gradient(top, #7846ba 0%, #6b36af 0%, #8a4bdb 100%, #6c38af 100%);
        background: linear-gradient(to bottom, #7846ba 0%, #6b36af 0%, #8a4bdb 100%, #6c38af 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7846ba', endColorstr='#6c38af', GradientType=0);
    }
    
    .sign_up input[type="submit"]:active {
        -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 1px rgba(58, 22, 104, 0.81);
        -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 1px rgba(58, 22, 104, 0.81);
        box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 1px rgba(58, 22, 104, 0.81);
        border: 1px solid #51258A;
        background: #622EA5;
    }
    
    .ipad {
        float: right;
        width: 37%;
        margin-bottom: -10em;
        padding-top: 10em;
    }
    
    .ipad img {
        display: block;
    }
    /**** Content top ****/
    
    .features {
        background: #FFF;
        padding: 10em 0 6em 0;
        text-align: center;
    }
    
    .features h2,
    .dashborder_img h2,
    .content_bottom h2 {
        font-size: 3.5em;
        color: #222;
        padding: 10px 0;
        font-weight: 300;
    }
    
    .features h2 span,
    .dashborder_img h2 span,
    .content_bottom h2 span {
        font-weight: bold;
        color: steelblue;
    }
    
    .features h4,
    .dashborder_img h4,
    .content_bottom h4 {
        font-size: 1.5em;
        color: #222;
        font-weight: 300;
    }
    
    .features_grids {
        margin-top: 3em;
    }
    /*  GRID OF Four   ============================================================================= */
    
    .section {
        clear: both;
        padding: 0px;
        margin: 0px;
    }
    
    .group:before,
    .group:after {
        content: "";
        display: table;
    }
    
    .group:after {
        clear: both;
    }
    
    .group {
        zoom: 1;
    }
    
    .grid_1_of_4 {
        display: block;
        float: left;
        margin: 1% 0 1% 1.6%;
    }
    
    .grid_1_of_4:first-child {
        margin-left: 0;
    }
    
    .images_1_of_4 {
        width: 23.8%;
        padding: 1.5% 0;
        text-align: center;
    }
    
    .images_1_of_4 img {
        max-width: 50%;
    }
    
    .images_1_of_4 h3 {
        font-size: 1.2em;
        color: #222;
        font-weight: 600;
        padding-top: 20px;
    }
    
    .images_1_of_4 h3 span {
        color: #d4d4d4;
    }
    
    .images_1_of_4 p {
        font-size: 1em;
        color: #222;
        text-align: center;
        margin: 0 auto;
        padding: 10px 0;
        width: 90%;
        line-height: 1.6em;
    }
    
    .button {
        text-align: center;
        margin-top: 2em;
    }
    
    .button a {
        display: inline-block;
        -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 1px #381664;
        -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 1px #381664;
        box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 1px #381664;
        background: #6C733D;
        background: -moz-linear-gradient(top, #6C733D 0%, #8a4bdb 0%, #6C733D 100%, #7846ba 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6C733D), color-stop(0%, #8a4bdb), color-stop(100%, #6C733D), color-stop(100%, #7846ba));
        background: -webkit-linear-gradient(top, #6C733D 0%, #8a4bdb 0%, #6C733D 100%, #7846ba 100%);
        background: -o-linear-gradient(top, #6C733D 0%, #8a4bdb 0%, #6C733D 100%, #7846ba 100%);
        background: -ms-linear-gradient(top, #6C733D 0%, #8a4bdb 0%, #6C733D 100%, #7846ba 100%);
        background: linear-gradient(to bottom, #6C733D 0%, #8a4bdb 0%, #6C733D 100%, #7846ba 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#6C733D', endColorstr='#7846ba', GradientType=0);
        border: 1px solid #673d9d;
        padding: 8px 30px;
        font-size: 1.2em;
        color: #FFF;
        text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.31);
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -o-border-radius: 2px;
    }
    
    .button a:hover {
        background: #7846ba;
        background: -moz-linear-gradient(top, #7846ba 0%, #6b36af 0%, #8a4bdb 100%, #6c38af 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7846ba), color-stop(0%, #6b36af), color-stop(100%, #8a4bdb), color-stop(100%, #6c38af));
        background: -webkit-linear-gradient(top, #7846ba 0%, #6b36af 0%, #8a4bdb 100%, #6c38af 100%);
        background: -o-linear-gradient(top, #7846ba 0%, #6b36af 0%, #8a4bdb 100%, #6c38af 100%);
        background: -ms-linear-gradient(top, #7846ba 0%, #6b36af 0%, #8a4bdb 100%, #6c38af 100%);
        background: linear-gradient(to bottom, #7846ba 0%, #6b36af 0%, #8a4bdb 100%, #6c38af 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7846ba', endColorstr='#6c38af', GradientType=0);
    }
    
    .button a img {
        vertical-align: middle;
        margin-bottom: 2px;
    }
    /********** Customize dashboard *******/
    
    .dashborder_img {
        padding: 6em 0 4em 0;
    }
    
    .dashborder_img img {
        margin-top: 2em;
    }
    /******** Content bottom *********/
    
    .content_bottom {
        padding: 5em 0 3em 0;
        text-align: center;
    }
    /*  GRID OF THREE   ============================================================================= */
    
    .section {
        clear: both;
        padding: 0px;
        margin: 0px;
    }
    
    .group:before,
    .group:after {
        content: "";
        display: table;
    }
    
    .group:after {
        clear: both;
    }
    
    .group {
        zoom: 1;
    }
    
    .grid_1_of_3 {
        display: block;
        float: left;
        margin: 2% 0 0 1.6%;
    }
    
    .grid_1_of_3:first-child {
        margin-left: 0;
    }
    
    .images_1_of_3 {
        width: 32%;
        padding: 2%;
    }
    
    .images_1_of_3 img {
        max-width: 40%;
        display: block;
        margin: 0 auto;
        padding: 5px;
        box-shadow: 0px 0px 5px #CCC;
        -webkit-box-shadow: 0px 0px 5px #CCC;
        -moz-box-shadow: 0px 0px 5px #CCC;
        -o-box-shadow: 0px 0px 5px #CCC;
        border-radius: 10em;
        -webkit-border-radius: 10em;
        -moz-border-radius: 10em;
        -o-border-radius: 10em;
        -ms-border-radius: 10em;
    }
    
    .images_1_of_3 h3 {
        font-size: 1.3em;
        font-weight: 600;
        padding-top: 20px;
    }
    
    .images_1_of_3 h3 a {
        color: #3F3F3F;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    
    .images_1_of_3 h3 a:hover {
        color: #252525;
    }
    
    .images_1_of_3 h5 {
        font-size: 1em;
        color: #222;
        padding-top: 5px;
    }
    
    .customer_desc {
        margin: 10%;
        box-shadow: 0px 0px 5px #A5A5A5;
        -webkit-box-shadow: 0px 0px 5px #A5A5A5;
        -moz-box-shadow: 0px 0px 5px #A5A5A5;
        -o-box-shadow: 0px 0px 5px #A5A5A5;
        border-radius: 1em;
        -webkit-border-radius: 1em;
        -moz-border-radius: 1em;
        -o-border-radius: 1em;
        margin-bottom: 3em;
        position: relative;
    }
    
    .customer_desc p {
        font-size: 1em;
        color: #131313;
        line-height: 2em;
        padding: 15%;
    }
    
    .customer_desc span.quotes {
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
    }
    
    .customer_desc span.up {
        background: url(../images/qutoes.png) no-repeat left;
        left: 1em;
        top: 1em;
    }
    
    .customer_desc span.down {
        background: url(../images/qutoes.png) no-repeat right;
        right: 1em;
        bottom: 2em;
    }
    
    .customer_desc span.testimonial-arrow {
        width: 55px;
        height: 20px;
        display: inline-block;
        background: url(../images/testimonial.png) no-repeat;
        position: absolute;
        left: 7em;
        bottom: -18px;
    }
    /**** Footer ****/
    
    .footer {
        padding: 15px 0;
        background: #222222;
    }
    /*  GRID OF FOUR   ============================================================================= */
    
    .section {
        clear: both;
        padding: 0px;
        margin: 0px;
    }
    
    .group:before,
    .group:after {
        content: "";
        display: table;
    }
    
    .group:after {
        clear: both;
    }
    
    .group {
        zoom: 1;
    }
    
    .col_1_of_2 {
        display: block;
        float: left;
        margin: 1% 0 1% 1.6%;
    }
    
    .col_1_of_2:first-child {
        margin-left: 0;
    }
    /* all browsers except IE6 and lower */
    
    .span_1_of_2 {
        width: 45.8%;
        padding: 1.5%;
    }
    
    .span_1_of_2 h3 {
        color: #FFF;
        font-size: 1.4em;
        padding-bottom: 15px;
    }
    
    .col_1_of_4 {
        display: block;
        float: left;
        margin: 1% 0 1% 1.6%;
    }
    
    .col_1_of_4:first-child {
        margin-left: 0;
    }
    /* all browsers except IE6 and lower */
    
    .span_1_of_4 {
        width: 20.8%;
        padding: 1.5%;
    }
    
    .span_1_of_4 h3 {
        color: #FFF;
        font-size: 1.4em;
        padding-bottom: 15px;
    }
    
    .list li a {
        display: inline-block;
        font-size: 1em;
        font-weight: 300;
        padding: 6px 0px;
        color: #CCC;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    
    .list li a:hover {
        color: #FFF;
    }
    
    .social-icons {
        margin-top: 2em;
    }
    
    .social-icons li a img {
        vertical-align: middle;
        padding-right: 5px;
        opacity: 0.7;
    }
    
    .list li a:hover>img {
        opacity: 1;
    }
    
    .copy_right {
        padding: 20px 0;
        text-align: center;
        background: steelblue;
    }
    
    .copy_right p {
        font-size: 1em;
        color: skyblue;
    }
    
    .copy_right p a {
        color: #FFF;
    }
    
    .copy_right p a:hover {
        text-decoration: underline;
    }
    /**************** Media Quries ************************/
    
    @media only screen and (max-width: 1366px) {
        .wrap {
            width: 90%;
        }
    }
    
    @media only screen and (max-width: 1280px) {
        .wrap {
            width: 90%;
        }
        .ipad {
            padding-top: 12em;
        }
        @media all and (max-width:1024px) {
            .wrap {
                width: 90%;
            }
            .banner_desc {
                width: 60%;
            }
            .banner_desc h1 {
                font-size: 3em;
            }
            .banner_desc h3 {
                font-size: 1.2em;
                margin-top: 5px;
            }
            .ipad {
                width: 40%;
            }
            .customer_desc span.testimonial-arrow {
                left: 5em;
            }
        }
        @media all and (max-width:800px) {
            .wrap {
                width: 95%;
            }
            .menu li a {
                font-size: 0.85em;
                margin: 5px 6px;
            }
            .menu li.login a {
                padding: 4px 20px;
            }
            .banner_desc h1 {
                font-size: 2.5em;
            }
            .banner_desc a.play_icon {
                padding: 0;
            }
            .sign_up input[type="text"] {
                width: 250px;
            }
            .sign_up input[type="submit"] {
                padding: 7px 25px;
            }
            .sign_up {
                margin-top: 1.5em;
            }
            .ipad {
                padding-top: 15em;
            }
            .features {
                padding: 6em 0 4em 0;
            }
        }
        @media all and (max-width:768px) {
            .wrap {
                width: 95%;
            }
            .ipad {
                padding-top: 16em;
                margin-bottom: -7em;
            }
        }
        @media all and (max-width:640px) {
            .wrap {
                width: 95%;
            }
            .menu {
                margin: 8px 0;
            }
            .banner_desc {
                padding: 8em 0 3em 0;
            }
            .banner_desc h1 {
                font-size: 2em;
            }
            .banner_desc h3 {
                font-size: 1em;
                margin-top: 0;
            }
            .sign_up input[type="text"] {
                width: 200px;
            }
            .sign_up input[type="submit"] {
                padding: 7px 20px;
            }
            .ipad {
                margin-bottom: -5em;
            }
            .grid_1_of_4,
            .grid_1_of_3,
            .col_1_of_4 {
                margin: 0;
            }
            .images_1_of_4,
            .images_1_of_3,
            .span_1_of_4 {
                width: 94%;
                padding: 3%;
            }
            .images_1_of_4 h3 {
                padding-top: 0;
            }
            .features {
                padding: 4em 0;
            }
            .features h2,
            .dashborder_img h2,
            .content_bottom h2 {
                font-size: 2.5em;
            }
            .features h4,
            .dashborder_img h4,
            .content_bottom h4 {
                font-size: 1.2em;
            }
            .features_grids {
                margin-top: 0em;
            }
            .images_1_of_4 p {
                width: 60%;
            }
            .customer_desc span.testimonial-arrow {
                left: 12em;
            }
            .images_1_of_5 {
                width: 100% !important;
            }
            .images_1_of_2 {
                float: left !important;
                width: 100% !important;
                margin-bottom: 20px !important;
            }
        }
        @media all and (max-width:480px) {
            .wrap {
                width: 95%;
            }
            .header_top {
                padding: 0px 0;
            }
            .menu {
                margin: 0 0 8px 0;
            }
            .logo {
                float: none;
                text-align: center;
            }
            .banner_desc {
                float: none;
                width: 100%;
            }
            .menu {
                float: none;
                text-align: center;
            }
            .menu li a {
                margin: 5px 10px;
            }
            .ipad {
                width: 100%;
                text-align: center;
                margin-bottom: -10em;
                padding-top: 0em;
            }
            .features {
                padding: 8em 0 4em 0;
            }
            .features h2,
            .dashborder_img h2,
            .content_bottom h2 {
                font-size: 2em;
            }
            .customer_desc span.testimonial-arrow {
                left: 8em;
            }
            .copy_right p {
                font-size: 0.85em;
                line-height: 1.8em;
            }
            .images_1_of_4 p {
                width: 100%;
            }
            .images_1_of_5 {
                width: 100% !important;
            }
        }
        @media all and (max-width:320px) {
            .wrap {
                width: 95%;
            }
            .menu li a {
                margin: 0px 4px 5px 4px;
                font-size: 0.8em;
            }
            .banner_desc {
                padding: 10em 0 0 0;
            }
            .banner_desc h1 {
                font-size: 1.6em;
            }
            .sign_up input[type="text"] {
                width: 160px;
            }
            .sign_up input[type="submit"] {
                font-size: 0.85em;
                margin-left: 5px;
            }
            .ipad {
                padding-top: 1em;
                margin-bottom: -6em;
            }
            .features {
                padding: 4em 0 2em 0;
            }
            .features h2,
            .dashborder_img h2,
            .content_bottom h2 {
                font-size: 1.6em;
            }
            .features h4,
            .dashborder_img h4,
            .content_bottom h4 {
                font-size: 1em;
            }
            .images_1_of_4 h3 {
                padding-top: 0;
            }
            .customer_desc {
                margin: 2em 0;
            }
            .customer_desc span.testimonial-arrow {
                left: 7em;
            }
            .images_1_of_5 {
                width: 100% !important;
            }
        }
    }
    
    .grid_1_of_5 {
        display: block;
        float: left;
        margin: 2% 0 1% 1.6%;
    }
    
    .grid_1_of_5:first-child {
        margin-left: 0;
    }
    
    .images_1_of_5 {
        width: 15.7%;
        padding: 1.5%;
    }
    
    .images_1_of_5 img {
        max-width: 70%;
        display: block;
        margin: 0 auto;
        padding: 5px;
    }
    
    .images_1_of_5 h3 {
        font-size: 1.3em;
        font-weight: 600;
        padding-top: 20px;
    }
    
    .images_1_of_5 h3 a {
        color: #3F3F3F;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    
    .images_1_of_5 h3 a:hover {
        color: #252525;
    }
    
    .images_1_of_5 h5 {
        font-size: 1em;
        color: #222;
        padding-top: 5px;
    }
    
    form {
        /* Apenas para centralizar o form na página */
        margin: 0 auto;
        width: 100%;
    }
    
    input:focus,
    textarea:focus {
        /* Dar um pouco de destaque nos elementos ativos */
        border-color: #000;
    }
    
    textarea {
        /* Para alinhar corretamente os campos de texto de várias linhas com sua label*/
        vertical-align: top;
        /* Para dar espaço suficiente para digitar algum texto */
        height: 5em;
        /* Para permitir aos usuários redimensionarem qualquer textarea verticalmente. Ele não funciona em todos os browsers */
        resize: vertical;
    }
    
    .dashborder_img h2 {
        text-align: center;
        margin-bottom: -10px;
    }
    
    .dashborder_img h4 {
        text-align: center;
        margin-bottom: 40px;
    }

    .fancybox-margin {
        margin-right: 17px;
    }
    
    .nav-link {
        color: steelblue !important;
        font-size: large;
    }
    
    .nav-item {
        color: steelblue !important;
        font-size: large;
    }
    
    .col-3 {
        color: antiquewhite;
    }
    
    .col-3 a {
        color: lightblue;
    }
    
    .col-3 a:hover {
        color: skyblue;
    }
    
    .col-6 {
        color: antiquewhite;
    }
    
    label {
        text-align: left;
    }
    
    .footer .wrap .section .row .col-md-3 h3 {
        color: white;
    }
    
    .footer .wrap .section .row .col-md-6 h3 {
        color: white;
    }
    
    .footer .wrap .section .row .col-md-3 ul li a {
        color: white;
    }
    
    @media screen and (max-width: 640px) {
        col-md-2 {
            width: 100% !important;
            max-width: 100% !important;
        }
    }