@import url("./proxima-nova.css");

html, body, div, h1, h2, h3, h4, h5, h6, ul, li, ol, p, form, dd, dl, dt, label {
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 600;
}

body {
    margin: 0 0 0 0;
    font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    -webkit-font-smoothing: antialiased;
}

img {
    border: 0;
}

a {
    text-decoration: none;
    color: #08C;
}

    a:hover {
        text-decoration: underline;
    }

input, select, textarea {
    font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif
}


body {
    color: #fff;
    font-family: "Proxima Nova";
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.5;
    letter-spacing: -.007em;
}


h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.5rem;
    font-family: "Proxima Nova";
    font-weight: 600;
    line-height: 1.1;
    color: inherit;
    font-size: 29px;
    /* font-weight: 700; */
    padding-bottom: 3px;
    /*color: #424e5a;*/
    /* text-transform: uppercase; */
}

input, select, textarea {
    font-family: "Proxima Nova";
}


/*FIXES UTILES*/
.dupfix {
    float: left;
    width: 1px;
    height: 0px;
    line-height: 0px;
    visibility: hidden;
}

ul, ol {
    position: relative;
}

/*CLEARFIX*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

/*ESTRUCTURA*/
.center {
    width: 1006px;
    margin: 0 auto;
}

.left {
    float: left
}

.right {
    float: right
}

.center_text {
    text-align: center;
    padding: 18px 0px 10px 0px;
    display: block;
    overflow: hidden;
    float: none;
    clear: both;
}

    .center_text h3 {
        font-size: 1.3842em;
        line-height: 1.1666em;
        overflow: hidden;
        height: 25px;
    }

.radius10 {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.Header {
    height: 57px;
    width: 1043px;
    margin-top: 20px;
    z-index: 10000;
    position: relative;
}

x:-o-prefocus, .product_page.portal.aplicationstorage .Header {
    padding-top: 20px
}

.Header a {
    color: #fff;
    font: 16px/53px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    text-shadow: 0px -1px 1px black;
}

.Header h1 {
    background: url(../img/header_bg.png) left top repeat-x;
    height: 57px;
    width: 249px;
    display: block;
    float: left
}

    .Header h1 a {
        color: #fff;
        display: block;
        background: url(../img/logo.png) 18px 2px no-repeat;
        width: 219px;
        height: 50px;
        text-indent: -1000px;
        overflow: hidden
    }

.Header nav {
    float: left;
    height: 57px;
    width: 770px;
    display: block
}

.Header ul {
    float: left;
    margin: 0;
    background: url(../img/nav_bg.png) left top repeat-x;
    height: 57px;
    width: 770px;
    display: block
}

.Header .CV {
    float: left;
    background: url(../img/header_bg.png) right top repeat-x;
    height: 57px;
    width: 15px;
    display: block
}

.Header li {
    float: left;
    padding: 0;
    background: url(../img/nav_bg.gif) right 10px no-repeat;
    font-size: 15px;
    line-height: 50px;
}

    .Header li a {
        padding: 0px 16px 7px 16px;
        font-size: 0;
        line-height: 50px;
        height: 42px;
        display: block;
        text-indent: -1000px;
        overflow: hidden;
    }

        .Header li a span {
            background: url(../img/menu.png) center top no-repeat;
            display: block;
            width: 100px;
            height: 49px;
        }

        .Header li a.WAG span {
            background-position: -19px -2px;
            width: 165px
        }

        .Header li a.Tracker span {
            background-position: -46px -42px;
            width: 106px
        }

        .Header li a.SaaS span {
            background-position: center -97px;
            width: 96px;
        }

        .Header li a.usermanagement span {
            background-position: center -147px;
            width: 144px
        }

        .Header li a:hover {
            background: url(../img/hover.gif) left 1px repeat-x;
        }

        .Header li a.active {
            background: url(../img/selected.gif) left 1px repeat-x;
        }

    .Header li.first {
        position: relative;
    }
        /*.Header li.first a{padding: 0px 17px 7px;}*/
        .Header li.first span.corner {
            background: none;
            position: absolute;
            width: 50px;
            left: 0px;
            height: 50px;
            top: 0px
        }
    /*.Header li.first span.corner{background: url(../img/hover_first.png) left -1px no-repeat;position:absolute;width:50px;left:0px;height: 50px;top:0px}*/
    .Header li.last {
        background: none;
        margin-right: 0px;
        padding: 0 0 0 0px;
        position: relative;
        width: 123px;
    }



.frame {
    width: 1200px;
    position: relative;
}

.frame_top {
    background: url(../img/frame_top.png) center bottom no-repeat;
    height: 119px;
    width: 1200px;
    display: block;
    margin: 0 auto;
    position: absolute;
    z-index: 1000;
    top: -19px;
}

.frame_bottom {
    background: url(../img/frame_bottom.png) center top no-repeat;
    height: 56px;
    width: 1200px;
    display: block;
    margin: 0 auto;
    position: absolute;
    z-index: 1000;
    top: 652px
}

.frame_left {
    background: url(../img/fadehorizontal.png) left top repeat-y;
    height: 650px;
    width: 100px;
    display: block;
    margin: 0 auto;
    position: absolute;
    z-index: 1000;
    top: 110px;
    left: 0px;
}

.frame_right {
    background: url(../img/fadehorizontal.png) right top repeat-y;
    height: 650px;
    width: 100px;
    display: block;
    margin: 0 auto;
    position: absolute;
    z-index: 1000;
    top: 110px;
    right: 0px;
}


.foo:focus {
    outline: none;
}

.carousel-wrap {
}

.carousel-control {
    position: absolute;
    top: 50%;
    border: none;
    width: 46px;
    height: 47px;
    background: url(../img/arrows.png) top left no-repeat;
    z-index: 10040;
}

    .carousel-control:hover {
        text-decoration: none;
    }

input.carousel-control.previous.carousel-previous {
    color: #fff;
    display: block;
    background-position: left bottom;
    left: -47px;
}

    input.carousel-control.previous.carousel-previous:hover {
        background-position: right bottom;
    }

input.carousel-control.next.carousel-next {
    right: -45px;
    color: #fff;
    display: block;
    background-position: left top;
}

    input.carousel-control.next.carousel-next:hover {
        background-position: right top;
    }

input:hover {
    cursor: pointer
}


/*  Form  */
.bg_form {
    background: url(../img/trans.png);
    width: 100%;
    height: 100%;
    z-index: 100000;
    position: absolute;
    top: 0px;
}

.form {
    background: #fff url(../img/singup_bg.jpg) left -50px repeat-x;
    width: 740px;
    height: 700px;
    position: absolute;
    left: 24%;
    top: 121px;
    padding: 16px 20px 18px 20px;
    border-radius: 10px;
    box-shadow: -10px 0px 15px #555, 10px 0px 15px #555, 0px -9px 15px #555, 0px 9px 15px #555;
}
/*.logo_cloud{width: 174px;height: 122px;background:url(../img/corporatecentralcloud.png) 0 0 no-repeat;margin: 0 auto 8px;}*/
.logoscontainer {
    width: 584px; /* height: 122px; */
    margin: 0 auto 18px;
}

.logo_cloud { /* width: 186px; */ /* height: 122px; */ /* background:url(../img/corporatecentralcloud.png) 0 0 no-repeat; */ /* float:left; */
}

.logo_wag {
    width: 361px;
    height: 114px;
    background: url(../img/waglogo.svg) 0 0 no-repeat;
    margin: 0 auto;
    background-size: 361px;
}


.form .cont_h3 {
    border-bottom: 1px solid #999;
    margin: 0 0 10px 0;
}

.form h3 {
    font-size: 1.6em;
    border-bottom: 1px solid #BEF2FF;
    display: block;
    padding: 0 0 12px 14px;
    margin: 0;
    letter-spacing: -1px;
    color: #333;
}

.form h2 {
    font-size: 1.33em;
    display: block;
    padding: 0 0 0px 0;
    margin: 0;
    letter-spacing: -1px;
    text-align: center;
}

.red {
    color: Red;
    font-weight: normal !important;
    font-size: 26px;
    line-height: 25px;
}

.formcont .cont_h3 {
    border-bottom: 1px solid #7c83ad;
    margin: 0 0 10px 0;
}

.formcont h2 {
    font-size: 16px;
    display: block;
    padding: 3px 0 0px 0;
    margin: 0; /* letter-spacing: -1px; */
    text-align: center;
    font-weight: 600;
}

.formcont h3 {
    font-size: 1.3em; /* border-bottom: 1px solid #7784cc; */
    display: block;
    padding: 0 0 6px 14px;
    margin: 0; /* letter-spacing: -1px; */
    color: #fff;
    text-align: center;
}

    .formcont h3.thanks {
        font-size: 1.5em; /* border-bottom: 1px solid rgb(158, 162, 188); */
        display: block;
        margin: 0;
        letter-spacing: -1px;
        color: #fff;
        line-height: 30px;
    }

        .formcont h3.thanks .smallfont {
            font-size: 16px;
            letter-spacing: 0;
        }

        .formcont h3.thanks a {
            color: #fff;
            text-decoration: underline;
        }

.logo_cloud {
}

.formcont {
    width: 740px;
}

fieldset {
    border: 1px solid #3B6791;
    border-radius: 10px;
    padding: 10px 12px 8px 18px;
    margin: 3px 6px 7px;
}

legend {
    font-size: 1em;
    clear: both;
    margin: 0 0 0 1px;
    padding: 0 8px;
    font-weight: bold;
    font-size: 0.9em;
}

.ext_radios_bt { /* border: 1px solid #ffffff; */
    margin: 8px auto -3px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

.radios_bt {
    background: rgba(255, 255, 255, 0.8392156862745098); /* padding:6px 6px 6px 100px; */
    color: #403c3c;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    padding: 0;
}

    .radios_bt label {
        padding: 5px 10px;
        cursor: pointer;
        display: inline-block;
        margin: 4px;
        border-radius: 9px;
        border: 1px solid rgba(11, 41, 79, 0);
        position: relative;
    }

        .radios_bt label:hover {
            background: #ffffff87;
            border: 1px solid #ffffff;
        }

.formcont .cont_h3.no_paypalredirection,
.formcont .cont_h3.paypalredirection {
    border: none
}

.radios_bt label .tooltip { /* display:none; */
    position: absolute;
    top: 36px;
    left: 0;
    background: #f7f7f7;
    box-shadow: 1px 3px 3px #7b7b7b5c;
    width: 260px;
    z-index: 1111;
    font-size: 12px;
    border-radius: 10px;
    padding: 10px;
}

.tooltip:after, .tooltip:before {
    bottom: 100%;
    left: 50%;
    border: solid #ff5f5f;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    z-index: -100;
}

.tooltip:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #ff5f5f;
    border-width: 15px;
    margin-left: -15px;
}

.tooltip:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #ff5f5f;
    border-width: 15px;
    margin-left: -15px;
    /* filter:drop-shadow(10px 10px 10px #333); */
}

.colLeft {
    width: 343px;
    float: left;
}

.colRight {
    width: 320px;
    float: left
}

.row { /* overflow:hidden; */
    clear: both;
    height: 36px;
    width: 340px; /* overflow-y: visible; */
}

.colRight .row.individualconsumerrow label {
    line-height: 15px;
}
/*.colLeft .row.gov_change label{line-height:15px;}*/
.row .left {
    width: auto;
    line-height: 1.6em;
    padding: 0px 0px 0px 10px;
    text-transform: capitalize;
    min-width: 112px;
    font-size: .8em;
    width: 110px;
}

    .row .left sup {
        position: relative;
        padding: 0px;
        margin: -5px 0px 0px 0px;
    }

        .row .left sup span {
            position: absolute;
        }

.row.checkbox .right sup {
    position: relative;
    padding: 0px;
    margin: 0px 0px 0px -10px;
    width: 6px;
    display: block;
    float: left;
}

    .row.checkbox .right sup span {
        position: absolute;
    }

.step3 .row .right {
    float: left;
    position: relative;
}

.row .right {
}

    .row .right select {
        border-radius: 5px;
        height: 27px;
        font-weight: 600;
    }

    .row .right input.showerror {
        background: #df7272;
        border-color: #B50000;
        color: #fff
    }

#errorSummary {
    font-family: Arial;
    font-size: 13px;
    text-align: center;
    color: #ffffff;
    margin: 0 auto;
    width: 80%;
    display: block;
    padding-top: 0px;
    background: #d22a2a;
    border-radius: 6px;
}

#lblMsg {
    font-family: Arial;
    font-size: 13px;
    text-align: center;
    color: red;
    margin: 0 auto;
    width: 100%;
    display: block;
    padding-top: 3px;
}

#ErrorPhoneMsg {
    color: #b50000;
    position: absolute
}

#ErrorPhoneMsg, #ErrorEmailMsg {
    color: #ffffff;
    position: absolute;
    color: #efbebe;
    font-size: .6em; /* padding: 0  3px; */
    border-radius: 5px;
    top: 27px;
    z-index: 111111;
    left: 0;
}

.row.checkbox {
    width: 700px;
    height: 27px;
}

    .row.checkbox .left {
        width: 14px;
        min-width: 0px;
    }

    .row.checkbox .right {
        padding: 2px 0px 0px 12px;
        text-align: left;
        float: left;
        border: 0px;
        width: 560px;
        font-size: .8em;
    }

    .row.checkbox a {
        text-decoration: underline;
        color: #fff;
    }

        .row.checkbox a:hover {
            text-decoration: underline;
            color: #fff;
        }

    .row.checkbox .left input {
        margin-top: 6px;
        height: 14px;
        width: 14px;
        border: 0px
    }

.row.button {
    width: 735px;
    height: 53px;
    bottom: 0px;
    margin: 6px auto 0;
}

.row.have_read {
    width: 580px;
    height: 29px;
    padding: 9px 0 0 12px;
}

    .row.have_read label {
        width: 390px;
        padding: 0;
    }

    .row.have_read .right {
        width: 26px;
        padding: 0;
        float: left;
        border: none;
    }

        .row.have_read .right input {
            width: 20px;
            float: left;
            border: 0;
        }

.row.button .hide {
    display: none
}

.row.button .hide {
    display: none
}


.step3 .row.button input {
    width: 194px;
    height: 36px;
    margin: 0px auto 0;
    display: block;
    padding: 0;
    /*  background: url(../img/input-orange.png) 0 0  no-repeat; */
    color: #fff;
    font-size: 1.1em;
    text-shadow: 1px 1px 1px rgba(0,0,0, 0.4);
    border: none;
    font-weight: 700;
    line-height: 38px;
}

/* 
.row.button input:hover{background-position: left -55px;}
.row.button input:active{background-position: left -55px;}
.row.button input:focus{background-position: left -55px;}
 */

.row input {
    border: 1px solid #e6e6e6;
    width: 177px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 0 0 0 5px;
    margin: 0;
    height: 25px;
    font-size: .8em;
    font-family: "Proxima Nova";
    font-weight: 600;
}

.row select {
    width: 161px;
    padding: 0 0 0 5px;
    margin: 0;
    height: 21px;
}

.colLeft .row .right select {
    width: 183px;
    border-radius: 5px;
    height: 27px;
}

.close_bt {
    display: block;
    position: absolute;
    height: 36px;
    width: 36px;
    background: url(../img/close.png) 0 0 no-repeat;
    right: -16px;
    top: -17px;
}

    .close_bt:hover {
        background-position: left bottom;
    }

.breadcrum {
    height: 28px;
    padding: 5px 0px; /* background: url(../img/breadcrum.png) left top; */
    margin: 0 auto 15px;
    width: 532px;
}

    .breadcrum:before {
        content: " ";
        font-size: 6em;
        display: block;
        height: 1px;
        width: calc(100% - 500px); /*- 124px - 124px*/
        background: rgb(158, 162, 188);
        line-height: 0px;
        position: absolute;
        margin-top: -5px;
        /* margin-left:calc(50% - 10px); */
        margin-left: 124px;
    }


    .breadcrum.active1 {
    }

        .breadcrum.active1 a:before {
        }

        .breadcrum.active1 a.stepone:before {
            background: rgb(255, 255, 255)
        }

        .breadcrum.active1 a.steptwo:before {
        }

        .breadcrum.active1 a.stepthree:before {
        }

    .breadcrum.active2 a:before {
    }

    .breadcrum.active2 a.stepone:before {
        background: rgb(255, 255, 255);
        border: 1.5px solid rgba(255, 255, 255, 0); /* width: 15px; */ /* height: 15px; */
        margin-top: -34px;
        transform: scale(.5);
    }

    .breadcrum.active2 a.steptwo:before {
        background: rgb(255, 255, 255);
    }

    .breadcrum.active2 a.stepthree:before { /* background: rgb(158, 162, 188); */
    }

    .breadcrum.active3 a.active:after {
    }

    .breadcrum.active3 a:before {
        background: #b2b5c3
    }

    .breadcrum.active3 a.stepone:before {
        background: rgb(255, 255, 255);
        border: 1.5px solid rgba(255, 255, 255, 0); /* width: 15px; */ /* height: 15px; */
        margin-top: -34px;
        transform: scale(.5) rotateZ(-226deg); /* content: "¬"; */ /* font-size: 19px; */ /* color: red; */ /* line-height: 50px; */
    }

    .breadcrum.active3 a.steptwo:before {
        background: rgb(255, 255, 255);
        border: 1.5px solid rgba(255, 255, 255, 0); /* width: 15px; */ /* height: 15px; */
        margin-top: -34px;
        transform: scale(.5); /* content: "¬"; */
    }

    .breadcrum.active3 a.stepthree:before {
        background: rgb(255, 255, 255);
    }


    .breadcrum a {
        position: relative;
        height: 20px;
        padding: 15px 0px 0;
        width: 243px;
        float: left;
        text-align: center;
        color: #000;
        /* font-weight: bold; */
        outline: none;
        display: block;
        text-transform: uppercase;
        font-size: .7em;
    }

        .breadcrum a.stepthree {
            width: 233px;
        }

        .breadcrum a.stepone {
        }

        .breadcrum a.steptwo {
        }

        .breadcrum a.stepthree {
        }

    .breadcrum a {
        color: #9ea2bc;
    }

        .breadcrum a.active {
            color: #ffffff;
        }


        .breadcrum a:before {
            content: " ";
            font-size: 6em;
            display: block;
            background: #3c4579;
            line-height: 0px;
            position: absolute;
            margin-top: -34px;
            margin-left: calc(50% - 10px);
            transition: all .2s;
            border: 1.7px dotted rgb(158, 162, 188);
            width: 25px;
            height: 25px;
            border-radius: 100%;
        }

        .breadcrum a.active:before {
            color: #fff;
            font-size: 10em; /* margin-top: -53px; */
            background: #fff;
            border-style: double;
        }




        .breadcrum a.active:after {
            content: " ";
            font-size: 6em;
            display: block;
            background: #7a81ad;
            line-height: 0px;
            position: absolute;
            margin-top: -20px;
            margin-left: calc(50% - 10px);
            transition: all .2s;
            width: 95px;
            z-index: -1;
            margin-left: 69px;
            height: 20px;
            border-radius: 4px;
        }

    .breadcrum.active1 a.active:after {
        width: 65px;
        margin-top: -20px;
        margin-left: calc(50% - 37px);
    }

    .breadcrum.active2 a.active:after {
        width: 115px;
        margin-top: -20px;
        margin-left: calc(50% - 58px);
    }


.sliderform {
    width: 740px; /* overflow: hidden; */
}

    .sliderform .slideron {
        width: 2260px;
        overflow: hidden;
        position: relative;
        transition: all .5s ease;
        -moz-transition: all .5s ease; /* Firefox 4 */
        -webkit-transition: all .5s ease; /* Safari and Chrome */
        -o-transition: all .5s ease; /* Opera */
    }

        .sliderform .slideron.go1 {
            margin-left: 0px
        }

        .sliderform .slideron.go2 {
            margin-left: -740px;
            overflow: hidden-webkit-paged-x;
        }

        .sliderform .slideron.go3 {
            margin-left: -1480px
        }

.step1 {
    float: left;
    width: 740px;
    overflow: visible;
}

    .step1 .grid_container {
        overflow: hidden;
        margin: 0 auto;
    }

        .step1 .grid_container .grid {
            width: 740px;
            overflow: hidden;
            height: 450px;
        }

.grid_container .grid li {
    float: left;
    width: 236px;
    height: 156px;
    margin: 16px 5px 43px;
}

    .grid_container .grid li label:hover {
        cursor: pointer
    }

.step1 .grid_container .grid li label input {
    opacity: 0;
    width: 1px;
    height: 1px;
    position: absolute;
}

.step1 .grid_container .grid li label {
    background-position: left bottom;
    width: 236px;
    position: relative;
    display: block;
    background-repeat: no-repeat;
    text-align: center;
    font-size: 16px; /* font-family: arial, "sans"; */
    font-weight: bold;
    text-shadow: none;
    color: #fff;
    height: 156px
}

    .step1 .grid_container .grid li label.individualconsumer {
        background-image: url(../img/typecustomers/Layer-1.png)
    }

    .step1 .grid_container .grid li label.smallbusiness {
        background-image: url(../img/typecustomers/Layer-2.png)
    }

    .step1 .grid_container .grid li label.mediumbusiness {
        background-image: url(../img/typecustomers/Layer-3.png)
    }

    .step1 .grid_container .grid li label.largeenterprise {
        background-image: url(../img/typecustomers/Layer-4.png)
    }

    .step1 .grid_container .grid li label.educationhealthcarenonprofit {
        background-image: url(../img/typecustomers/Layer-5.png)
    }

    .step1 .grid_container .grid li label.governmentgovCloud {
        background-image: url(../img/typecustomers/Layer-6.png)
    }

.step1 .grid_container .grid li label {
    cursor: pointer;
    ;
    background-position: center;
    transition: all .1s;
}


    .step1 .grid_container .grid li label:active {
        background-position: center;
    }

    .step1 .grid_container .grid li label.selected {
        background-position: center;
        filter: grayscale(0%);
    }

    .step1 .grid_container .grid li label.nonselected {
        background-position: center;
        filter: grayscale(100%) blur(.5px) brightness(.7);
        transition: all 1s;
    }

        .step1 .grid_container .grid li label.nonselected:hover,
        .step1 .grid_container .grid li label:hover {
            cursor: pointer;
            filter: grayscale(0%) blur(0px) contrast(1) brightness(1.1);
        }

    .step1 .grid_container .grid li label span {
        position: absolute;
        top: 160px;
        z-index: 1000;
        left: 0px;
        text-align: center;
        width: 100%;
    }

    .step1 .grid_container .grid li label:hover span {
        text-decoration: underline
    }

.step1 hr {
    border-color: rgba(205, 223, 238, 0.55)
}




/* transform: scale(1.01) */
/* background-size:102% */
/* .step1 .grid_container .grid li label:hover{cursor:pointer; filter: grayscale(0%);} */


.step1 .grid_container .grid li label.individualconsumer {
    background-image: url(../img/6.png);
}

.step1 .grid_container .grid li label.smallbusiness {
    background-image: url(../img/4.png)
}

.step1 .grid_container .grid li label.mediumbusiness {
    background-image: url(../img/3.png)
}

.step1 .grid_container .grid li label.largeenterprise {
    background-image: url(../img/2.png)
}

.step1 .grid_container .grid li label.educationhealthcarenonprofit {
    background-image: url(../img/1.png)
}

.step1 .grid_container .grid li label.governmentgovCloud {
    background-image: url(../img/5.png)
}


.facebookbuton {
    display: block;
    width: 200px;
    margin: 0 auto;
    width: 269px;
    height: 55px;
    margin: 0px auto 0;
    display: block;
    padding: 0;
    /*   background: url(../img/signup_fb.png) 0 0 no-repeat; */
    color: white;
    font-size: 1.7em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    border: none;
    line-height: 2.4em;
    font-weight: bold;
}

/* .facebookbuton:hover{background-position: left -54px} */



.facebookbuton {
    box-sizing: border-box;
    position: relative;
    /* width: 13em;  - apply for fixed size */
    /* margin: 0.2em; */
    padding: 0 15px 0 71px;
    border: none;
    text-align: left;
    line-height: 55px;
    white-space: nowrap;
    border-radius: 0.2em;
    font-size: 16px;
    color: #FFF;
}

    .facebookbuton:before {
        content: "";
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        width: 52px;
        height: 100%;
    }

    .facebookbuton:focus {
        outline: none;
    }

    .facebookbuton:active {
        box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
    }


/* Facebook */
.facebook_signup, .facebookbuton {
    background-color: #4C69BA;
    background-image: linear-gradient(#4C69BA, #3B55A0);
    /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
    text-shadow: 0 -1px 0 #354C8C;
}

    .facebook_signup, .facebookbuton:before {
        border-right: #364e92 1px solid;
        background: url('../img/icon_facebook.png') 10px 11px no-repeat;
        background-size: 34px;
    }

    .facebook_signup, .facebookbuton:hover,
    .facebook_signup, .facebookbuton:focus {
        background-color: #5B7BD5;
        background-image: linear-gradient(#5B7BD5, #4864B1);
    }


.step2 {
    float: left;
    width: 642px;
    height: 192px;
    overflow: visible;
    padding: 18px 0 2px 0px; /* background: #A5CBE0; */ /* background: -webkit-radial-gradient(51% 0%, 140% 217%, #E2E2E2 0%, #D6D6D6 10%, rgba(112, 126, 163, 0.1) 49%); */ /* border: 1px solid #D4DBEB; */
    margin: 50px 49px;
    border-radius: 10px; /* box-shadow: 1px 10px 19px rgba(0, 0, 0, 0.2),inset 1px 10px 19px rgba(255, 255, 255, 0.2); */
    position: relative;
}

    .step2 .left.now {
        width: 325px;
        height: 104px;
        border-style: solid;
        border-width: 0 1px 0px 0;
        padding-top: 49px;
        border-color: rgba(112, 112, 112, 0.79);
        display: block; /* margin: 0 auto; */
    }

    .step2 .right.now {
        width: 311px;
        height: 104px;
        padding-top: 49px; /* border-width: 0 0 0 1px; */ /* border-style: solid; */ /* border-color: rgba(255,255,255,.4); */
        display: block;
    }

    .step2 .now a {
    }

    .step2 .left.now a {
        display: block;
        width: 200px;
        margin: 0 auto;
        width: 269px;
        height: 53px;
        margin: 0px auto 0;
        display: block;
        padding: 0;
        background: url(../img/input-orange-large.png) 0 0 no-repeat;
        color: white;
        font-size: 1.7em;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
        border: none;
        line-height: 2.4em;
        font-weight: bold;
    }

        .step2 .left.now a:hover {
            background-position: left -54px;
        }


    .row.button input, .step2 .left.now a {
        display: block; /* width: 92px; */ /* height: 29px; */ /* background-image: url(../img/log_sing.png); */
        float: left;
        margin: 0 5px 0 0;
        overflow: hidden; /* text-indent: 260px; */
        background-repeat: no-repeat;
        background-size: 138px 60px;
    }

    .row.button input, .step2 .left.now a {
        background-position: 0 0px;
        width: 258px;
        padding: 0;
        margin: 0;
        text-align: center;
    }

        .row.button input, .step2 .left.now a:hover {
            background-position: 0 -30px;
        }

    .row.button input, .step2 .left.now a {
        background: #fe6400f7 !important;
        border-color: #fe6400;
        background: linear-gradient(rgb(249, 113, 26) 0%, rgb(255, 100, 0) 100%); /* margin-left: 4px; */
        border-radius: 4px;
        font-size: .9em;
        line-height: 53px; /* margin: 0 auto; */
        display: block;
        margin: 0 auto;
        float: none;
    }

        .row.button input, .step2 .left.now a:hover {
            background: #ff8500f7 !important;
            border-color: #ff8500f7;
            background: linear-gradient(rgb(249, 113, 26) 0%, rgb(255, 100, 0) 100%);
        }



    .step2 .right.now a {
    }

    .step2 h2 {
        font-size: 25px; /* font-family: arial; */
        margin: 0 auto 12px; /* text-shadow: 0px -1px 0px #fff; */
        font-weight: 600;
        color: rgb(255, 255, 255);
        z-index: 1111;
        position: relative;
        letter-spacing: 0; /* display: none !important; */
    }

    .step2 .step2cancel {
        font-size: 16px; /* font-family: arial; */
        margin: 0 auto 12px; /* text-shadow: 0px 0px 0px white; */
        color: #FFFFFF;
        z-index: 1000000;
        position: relative;
        background: #7981A2;
        padding: 7px 10px;
        border-radius: 11px;
        font-weight: 400;
        letter-spacing: 0;
    }

.step3 {
    float: left;
    width: 740px;
    overflow: hidden;
    position: relative;
}


/*REGULAR CLOUDS*/
@-webkit-keyframes reg_moving_clouds_right {
    0% {
        -webkit-transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-170%);
    }
}

@-webkit-keyframes reg_moving_clouds_left {
    0% {
        -webkit-transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(170%);
    }
}


@-webkit-keyframes front-an {
    0% {
        -webkit-transform: rotateX(90deg) translateY(-14px);
    }

    100% {
        -webkit-transform: rotateX(0deg) translateY(-14px);
    }
}

.showfacebookanimation {
    position: absolute;
    top: 30px;
    left: 0px;
    height: 223px;
    width: 100%;
    display: none; /* overflow: visible; */
}



    .showfacebookanimation .regular_clouds {
        width: 100%;
        display: block;
        height: 212px;
        z-index: 10; /* overflow: hidden; */
        border-radius: 10px;
        position: relative;
    }

        .showfacebookanimation .regular_clouds:hover {
            /* transform: rotateX(90deg) translateZ(320px) */
        }


    .showfacebookanimation .reg {
        border: 0px solid #B8B8B8;
        border-radius: 50%;
        height: 5px;
        width: 5px;
        display: block;
        position: absolute;
        margin: 0 auto;
        top: calc(50% - 5px);
        left: calc(50% - 5px);
        background: #41487b !important;
        z-index: 1;
    }

    .showfacebookanimation .one {
        -webkit-animation: NAME-YOUR-ANIMATION 1.6s 0s infinite;
        -moz-animation: NAME-YOUR-ANIMATION 1.6s 0s infinite;
        -ms-animation: NAME-YOUR-ANIMATION 1.6s 0s infinite;
        -o-animation: NAME-YOUR-ANIMATION 1.6s 0s infinite;
    }

    .showfacebookanimation .two {
        -webkit-animation: NAME-YOUR-ANIMATION 1.6s 0.1s infinite;
        -moz-animation: NAME-YOUR-ANIMATION 1.6s 0.1s infinite;
        -ms-animation: NAME-YOUR-ANIMATION 1.6s 0.1s infinite;
        -o-animation: NAME-YOUR-ANIMATION 1.6s 0.1s infinite;
    }

    .showfacebookanimation .three {
        -webkit-animation: NAME-YOUR-ANIMATION 1.6s 0.4s infinite;
        -moz-animation: NAME-YOUR-ANIMATION 1.6s 0.4s infinite;
        -ms-animation: NAME-YOUR-ANIMATION 1.6s 0.4s infinite;
        -o-animation: NAME-YOUR-ANIMATION 1.6s 0.4s infinite;
    }

    .showfacebookanimation .four {
    }

    .showfacebookanimation .five {
    }



@-webkit-keyframes NAME-YOUR-ANIMATION {
    0% {
        -webkit-transform: scale(1);
        opacity: 1
    }

    60% {
        opacity: 0
    }

    100% {
        -webkit-transform: scale(90);
        opacity: 0
    }
}


@-webkit-keyframes moving_clouds_left {
    0% {
        -webkit-transform: translateX(0%);
    }

    100% {
        -webkit-transform: translateX(400px);
    }
}

@-webkit-keyframes moving_clouds_right {
    0% {
        -webkit-transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-400px);
    }
}

@-webkit-keyframes jiggle {
    0% {
        -webkit-transform: translateX(-1px)
    }

    100% {
        -webkit-transform: translateX(1px);
    }
}

/*  Form  */




.whitlink {
    color: #fff
}




#signupiframe {
    width: 740px
}




.Pricing hr.p-0.m-0 {
    margin: 3px 0 !important;
}

.Pricing .row {
    width: auto;
    background: #ff5f5f;
    padding-top: 10px;
    padding-bottom: 0;
    margin: -10px -10px 6px -10px;
    border-radius: 10px 10px 0 0;
    color: #fff;
}

    .Pricing .row.p-0.m-0.heighth1 .text-right {
        display: inline-block;
    }

    .Pricing .row.p-0.m-0.heighth1 .col-md-3.p-0.m-0 {
        display: inline-block;
        width: 20px;
        line-height: 12px;
    }

.Pricing h1 {
    font-size: -8.4em;
    font-weight: 400 !important; /* height: 60px; */
    display: inline-block;
    margin: 0;
    padding: 0;
}

    .Pricing h1 b {
        font-weight: 600 !important; /* vertical-align: middle; */
        display: inline-block;
        margin: 0;
        padding: 0;
    }

.Pricing .signupPopUp {
    background-color: #fe6400f7;
    border-color: #fe6400;
    background: linear-gradient(rgb(249, 113, 26) 0%, rgb(255, 100, 0) 100%);
    font-size: 1.3em;
    height: 60px;
}

.Pricing .card h6 {
    font-size: .8em;
    font-weight: 400 !important
}

.Pricing .card .fontSmall5 {
    line-height: 16PX;
    padding: 0 10px !important;
}

.Pricing .card hr {
    margin-top: .2rem;
    margin-bottom: .2rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}