html, body {
    height: 100%;
    font-family: 'Lato', "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    line-height: 1;
}



a {
    text-decoration: none;
    color: #008cba;
}

    a:hover {
        text-decoration: none;
        color: #0078a0;
    }



.columns {
}

    .columns.nospacing {
        padding: 1%;
    }


.row {
    max-width: 75rem;
}

.goCenter {
    text-align: center;
}

h1, h2, h3 {
    color: #727272;
    font-family: "Montserrat", "Arial Rounded MT", "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}

.highlight {
    background-color: #fffeb6;
}

.fontB {
    font-family: "Montserrat", "Arial Rounded MT", "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}

input {
    font: inherit;
    padding: .2em;
}

    input[type="text"], input[type="password"] {
        padding-top: .5em;
        padding-bottom: .5em;
        padding-left: .7em;
        height: auto !important;
    }

    input.generalSmall {
        width: 10em;
        display: inline-block;
        margin-left: 1em;
        margin-right: 1em;
    }

.attractiveA {
    padding: .1em;
    display: inline-block;
    background-color: #fcfcfc;
}

.btn {
    color: #000;
    font-size: .9em;
    padding: 1em;
    padding-left: 2em;
    padding-right: 2em;
    display: inline-block;
    border-radius: .5em;
    border: none;
    margin-top: .7em;
    margin-bottom: .5em;
    font-family: "Montserrat", "Arial Rounded MT", "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
    opacity: 1;
    /*-webkit-box-shadow: inset 0 -3px 0 2px rgba(0,0,0,.08);
    -moz-box-shadow: inset 0 -3px 0 2px rgba(0,0,0,.08);
    box-shadow: inset 0 -3px 0 2px rgba(0,0,0,.08);*/
    background-color: #fff;
    transition: padding 200ms ease-in-out;
    -moz-transition: padding 200ms ease-in-out;
    -o-transition: padding 200ms ease-in-out;
    -webkit-transition: padding 200ms ease-in-out;
    /*-webkit-box-shadow: inset 0px 1em 3em 0px rgba(255, 255, 255, 0.15);
-moz-box-shadow:    inset 0px 1em 3em 0px rgba(255, 255, 255, 0.15);
box-shadow:         inset 0px 1em 3em 0px rgba(255, 255, 255, 0.15);*/
}

    .btn:after {
        background-image: url('rarrowW.svg');
        background-repeat: no-repeat;
        background-position: right center;
        content: '';
        width: 1em;
        height: .9em;
        display: inline-block;
        margin-left: .2em;
        vertical-align: central;
    }

    .btn.brightBg:after {
        background-image: url('rarrow.svg');
    }

    .btn:hover {
        border: none;
        padding-right: 1.5em;
        padding-left: 2.5em;
    }

    .btn:active, .btn:focus {
        opacity: .8;
    }

    .btn.huge {
        font-size: 1em;
        text-align: right;
    }

        .btn.huge:after {
            display: none;
        }

        .btn.huge span {
            font-size: .9em;
            letter-spacing: 1px;
        }


    .btn.small {
        font-size: .8em;
    }

    .btn.green {
        background-color: #049800;
        border: 1px solid #10830d;
        color: #fff;
    }



    .btn.lightgray {
        background-color: #8a8a8a;
        color: #fff;
    }

    .btn.gray {
        background-color: #4f4f4f;
        border: 1px solid #393939;
        color: #fff;
    }

    .btn.darkgray {
        background-color: #1e1e1e;
        color: #fff;
    }

    .btn.orange {
        background-color: #fb5e00;
        border: 1px solid #db5200;
        color: #fff;
    }

    .btn.blue {
        background-color: #2d99ec;
        border: 1px solid #137dcf;
        color: #fff;
    }

    .btn.ablue {
        border: 1px solid #168db6;
        background-color: #088fbd;
        color: #fff;
    }

    .btn.bordered {
        background-color: inherit;
        color: #0076d1;
        border: 1px solid #0076d1;
    }

    .btn.glassy {
        background-color: rgba(0, 0, 0, 0.2) !important;
    }

    .btn.wbordered {
        background-color: inherit;
        color: #fff;
        border: 1px solid #fff;
    }

    .btn.noarrow:after {
        display: none;
    }


.desktopSpacer {
    height: 1em;
}

#header2 {
    background: -moz-linear-gradient(left, rgba(255,0,0,0.25) 0%, rgba(254,15,0,0.25) 1%, rgba(241,249,0,0.25) 17%, rgba(0,209,17,0.25) 33%, rgba(41,137,216,0.25) 50%, rgba(0,209,17,0.25) 68%, rgba(241,249,0,0.25) 84%, rgba(255,0,0,0.25) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,0,0,0.25)), color-stop(1%,rgba(254,15,0,0.25)), color-stop(17%,rgba(241,249,0,0.25)), color-stop(33%,rgba(0,209,17,0.25)), color-stop(50%,rgba(41,137,216,0.25)), color-stop(68%,rgba(0,209,17,0.25)), color-stop(84%,rgba(241,249,0,0.25)), color-stop(100%,rgba(255,0,0,0.25))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,0,0,0.25) 0%,rgba(254,15,0,0.25) 1%,rgba(241,249,0,0.25) 17%,rgba(0,209,17,0.25) 33%,rgba(41,137,216,0.25) 50%,rgba(0,209,17,0.25) 68%,rgba(241,249,0,0.25) 84%,rgba(255,0,0,0.25) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255,0,0,0.25) 0%,rgba(254,15,0,0.25) 1%,rgba(241,249,0,0.25) 17%,rgba(0,209,17,0.25) 33%,rgba(41,137,216,0.25) 50%,rgba(0,209,17,0.25) 68%,rgba(241,249,0,0.25) 84%,rgba(255,0,0,0.25) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255,0,0,0.25) 0%,rgba(254,15,0,0.25) 1%,rgba(241,249,0,0.25) 17%,rgba(0,209,17,0.25) 33%,rgba(41,137,216,0.25) 50%,rgba(0,209,17,0.25) 68%,rgba(241,249,0,0.25) 84%,rgba(255,0,0,0.25) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(255,0,0,0.25) 0%,rgba(254,15,0,0.25) 1%,rgba(241,249,0,0.25) 17%,rgba(0,209,17,0.25) 33%,rgba(41,137,216,0.25) 50%,rgba(0,209,17,0.25) 68%,rgba(241,249,0,0.25) 84%,rgba(255,0,0,0.25) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40ff0000', endColorstr='#40ff0000',GradientType=1 ); /* IE6-9 */
    background-size: cover;
    transition: background-position 1000s linear;
    -moz-transition: background-position 1000s linear;
    -o-transition: background-position 1000s linear;
    -webkit-transition: background-position 1000s linear;
}

    #header2.go {
        background-position: -90000px 0 !important;
    }

header {
    background-color: #097ec1;
    color: #fff;
    position: relative;
}


    header.home {
        /*background: url('headers/home.jpg') no-repeat center top;*/
        background: url('flare.png') no-repeat center top;
        background-size: cover;
        background-color: #097ec1;
        display: table;
        width: 100%;
        position:relative;
    }


        header.home:after {
            position:absolute;
            content: ' ';
            width:100%;
            height:2em;
            -webkit-box-shadow: inset 0px -10px 16px -7px rgba(50, 50, 50, 0.4);
            -moz-box-shadow: inset 0px -10px 16px -7px rgba(50, 50, 50, 0.4);
            box-shadow: inset 0px -10px 16px -7px rgba(50, 50, 50, 0.4);
            bottom:0;
        }


        header.home .callToAction {
            z-index: 99;
            position: relative;
            margin-bottom: 2em;
        }



        header.home .headScreenshot {
            max-height: 25em;
            overflow: hidden;
        }

        header.home .animateBars {
            width: 100%;
            height: 400px;
            position: absolute;
            bottom: 0;
            overflow: hidden;
            z-index: 0;
        }

            header.home .animateBars .bar {
                width: 35px;
                height: 100%;
                display: inline-block;
                margin-left: 8px;
                position: relative;
            }

                header.home .animateBars .bar .in {
                    background-color: #354d5a;
                    width: 100%;
                    height: 30%;
                    position: absolute;
                    bottom: 0;
                    -webkit-box-shadow: inset 0px -16px 28px -13px rgba(0,0,0,0.56);
                    -moz-box-shadow: inset 0px -16px 28px -13px rgba(0,0,0,0.56);
                    box-shadow: inset 0px -16px 28px -13px rgba(0,0,0,0.56);
                    transition: height linear 100ms;
                }

                header.home .animateBars .bar:hover .in {
                    border-top: .5em solid #000;
                }

                    header.home .animateBars .bar:hover .in.milestone {
                        background-image: url('logoBar.svg');
                    }

                header.home .animateBars .bar .in.milestone {
                    background-color: #004e7b;
                    background-position: center bottom;
                    background-repeat: no-repeat;
                    background-size: 70%;
                }




                header.home .animateBars .bar.centered:before {
                    background-image: url('MouseStatsStart.svg');
                    width: 70em;
                    height: 15em;
                    background-size: contain;
                    background-repeat: no-repeat;
                    position: absolute;
                    content: '';
                    z-index: 999;
                    bottom: 4em;
                    opacity: .6;
                }


    header .homeHeadMiddle {
        display: table;
        width: 100%;
    }

        header .homeHeadMiddle .homeHeadMiddleIn {
            display: table-cell;
            vertical-align: middle;
            padding-bottom: 1em;
        }





    header.heatmap {
        background: url('headers/heatmap.jpg') no-repeat center center;
        background-size: cover;
    }

    header.playbacks {
        background: url('headers/playbacks.jpg') no-repeat center center;
        background-size: cover;
    }

    header.formanalytics {
        background: url('headers/formanalytics.jpg') no-repeat center center;
        background-size: cover;
    }

    header.microsurveys {
        background: url('headers/microsurveys.jpg') no-repeat center center;
        background-size: cover;
    }

    header.city {
        background: url('headers/city.jpg') no-repeat center center;
        background-size: cover;
    }

    header.pricing {
        background: url('headers/pricing.jpg') no-repeat center center;
        background-size: cover;
    }

    header.terms {
        background: url('headers/terms.jpg') no-repeat top center;
        background-size: cover;
    }

    header.demo {
        background: url('headers/demo.jpg') no-repeat top center;
        background-size: cover;
    }

    header.optout {
        background: url('headers/optout.jpg') no-repeat center center;
        background-size: cover;
    }

    header.large {
    }

    header a {
        border-bottom: 1px solid #808080;
    }

        header a:hover {
            border-bottom-style: dashed;
        }


    header h1 {
        font-size: 2.1em;
        display: block;
        font-family: "Montserrat", "Arial Rounded MT", "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
        color: #fff;
        line-height: 1.1;
        margin-top: 1.2em;
        text-transform: capitalize;
    }

    header .columns.bigTitle {
        text-align: right;
        font-size: 1.4em;
        padding-top: 2em;
        padding-bottom: 0em;
        text-transform: uppercase;
    }

        header .columns.bigTitle span {
            font-size: 2.4em;
            display: block;
            font-family: "Montserrat", "Arial Rounded MT", "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
        }

    header .columns.smallTitle {
        font-variant: small-caps;
        padding-top: 2.8em;
        padding-bottom: 0em;
    }

    header .columns.titleCentered {
        text-align: center;
    }

    header .columns.bigTitle2 {
        font-size: 1em;
        padding-top: 0;
        padding-bottom: .5em;
    }

    header .columns.smallTitle2 {
        padding-bottom: .5em;
        font-size: 1em;
        font-variant: normal;
        opacity: .7;
        line-height: 1.2;
    }

    header .columns.spacer {
        padding-top: 3.5em;
    }

    header .darkItems {
        margin: 0;
    }

        header .darkItems .row {
            text-align: center;
        }


        header .darkItems .homeIconic {
            line-height: 1.3;
            font-size: .7em;
            padding-top: 1em;
            padding-bottom: 1em;
        }

            header .darkItems .homeIconic * {
                opacity: .8;
            }

            header .darkItems .homeIconic:hover * {
                opacity: 1;
            }

            header .darkItems .homeIconic .icon {
                height: 5em;
                width: 5em;
                background-repeat: no-repeat;
                background-position: left center;
                display: inline-block;
                margin: auto;
                margin-bottom: .5em;
            }

                header .darkItems .homeIconic .icon.heatmaps {
                    background-image: url('icon-heatmapsW.svg');
                }


                header .darkItems .homeIconic .icon.playbacks {
                    background-image: url('icon-playbacksW.svg');
                }

                header .darkItems .homeIconic .icon.formanalytics {
                    background-image: url('icon-formanalyticsW.svg');
                }

                header .darkItems .homeIconic .icon.microsurveys {
                    background-image: url('icon-microsurveysW.svg');
                }

            header .darkItems .homeIconic .title {
                font-weight: bold;
                text-transform: uppercase;
                margin-top: .3em;
                margin-bottom: .3em;
            }

            header .darkItems .homeIconic .hotOffer {
                position: absolute;
                top: 0;
                left: 45%;
                opacity: 1;
            }

        header .darkItems .btn {
            background-color: inherit;
            color: #92d7ff;
            border: 1px solid #92d7ff;
            visibility: hidden;
        }

        header .darkItems .homeIconic:hover .btn {
            visibility: visible;
        }

        header .darkItems .btn:after {
            width: 0;
        }


        header .darkItems .homeIconic {
            padding-bottom: 1em;
            text-align: center;
        }


            header .darkItems .homeIconic:last-child {
                padding-bottom: 0;
            }

#topNav {
    background-color: #fff;
    border-bottom: 1px solid #eeeeee;
    padding: 0;
    overflow: visible;
    position: relative;
}

    #topNav #logo {
        height: 3em;
        width: 10em;
        opacity: .9;
        transition: opacity linear 100ms;
    }

        #topNav #logo:hover {
            opacity: 1;
        }


    #topNav .menu {
        text-align: right;
        font-size: 1.05em;
    }

        #topNav .menu a {
            text-transform: uppercase;
            font-size: .75em;
            font-weight: bold;
            border-bottom-color: #000;
            color: #404040;
            display: inline-block;
            padding-top: 2.3em;
            padding-bottom: 1em;
            padding-left: 1em;
            padding-right: 1em;
            margin-left: .1em;
            opacity: .6;
            transition: border-top linear 200ms;
        }

            #topNav .menu a:last-child {
                padding-right: 0;
            }

            #topNav .menu a.choosed {
                color: #0078a0;
                border-top: .4em solid #0078a0;
                padding-top: 1.9em;
            }

            #topNav .menu a:hover {
                color: #0078a0;
            }

            #topNav .menu a.pricing {
                opacity: .8;
            }


    #topNav #megaMenu {
        background-color: #fff;
        position: absolute;
        z-index: 101;
        top: 100%;
        width: 100%;
        border-bottom: 1px solid #eeeeee;
        display: none;
        -webkit-box-shadow: 0px 6px 8px -2px rgba(34, 50, 50, 0.35);
        -moz-box-shadow: 0px 6px 8px -2px rgba(34, 50, 50, 0.35);
        box-shadow: 0px 6px 8px -2px rgba(34, 50, 50, 0.35);
    }

        #topNav #megaMenu .inMenu {
            padding-top: 1em;
            padding-bottom: 2em;
            line-height: 1.5;
        }

            #topNav #megaMenu .inMenu .tab {
                display: none;
            }


                #topNav #megaMenu .inMenu .tab.tabProducts {
                }

                    #topNav #megaMenu .inMenu .tab.tabProducts .category {
                    }

                        #topNav #megaMenu .inMenu .tab.tabProducts .category .title {
                            text-transform: uppercase;
                            margin-bottom: .3em;
                        }

                        #topNav #megaMenu .inMenu .tab.tabProducts .category .list {
                            font-size: .95em;
                        }

                            #topNav #megaMenu .inMenu .tab.tabProducts .category .list a {
                                display: block;
                                padding-bottom: .5em;
                                padding-top: .5em;
                                transition: padding-left linear 100ms;
                                border-top: 1px solid #f5f5f5;
                            }

                                #topNav #megaMenu .inMenu .tab.tabProducts .category .list a .hotOffer {
                                    font-size: .8em;
                                    margin-left: .5em;
                                }

                                #topNav #megaMenu .inMenu .tab.tabProducts .category .list a:hover {
                                    padding-left: .3em;
                                }


                #topNav #megaMenu .inMenu .tab.tabDemo {
                    font-size: .95em;
                }

                    #topNav #megaMenu .inMenu .tab.tabDemo .btn {
                        font-size: .7em;
                        letter-spacing: normal;
                        line-height: 1;
                        text-transform: uppercase;
                        margin-top: .3em;
                    }


        #topNav #megaMenu .tab.tabDemo .menuIconic .icon {
            height: 3em;
            width: 3em;
            background-repeat: no-repeat;
            background-position: left center;
            display: inline-block;
            background-size: contain;
            opacity: .6;
        }

            #topNav #megaMenu .tab.tabDemo .menuIconic .icon.heatmaps {
                background-image: url('icon-heatmaps.svg');
            }


            #topNav #megaMenu .tab.tabDemo .menuIconic .icon.playbacks {
                background-image: url('icon-playbacks.svg');
            }

            #topNav #megaMenu .tab.tabDemo .menuIconic .icon.formanalytics {
                background-image: url('icon-formanalytics.svg');
            }

            #topNav #megaMenu .tab.tabDemo .menuIconic .icon.microsurveys {
                background-image: url('icon-microsurveys.svg');
            }

        #topNav #megaMenu .tab.tabDemo .menuIconic .title {
            font-size: .9em;
            font-weight: bold;
            text-transform: uppercase;
            margin-top: .3em;
            margin-bottom: .3em;
        }



#magellanHolder {
    height: 0;
    width: 100%;
    overflow: hidden;
    z-index: 999999;
}

    #magellanHolder #magellanBar {
        background-color: #fff;
        text-align: center;
        text-transform: uppercase;
        -webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.09);
        -moz-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.09);
        box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.09);
        font-size: .9em;
    }

        #magellanHolder #magellanBar .btn {
            margin-left: .5em;
        }

.triangleHolder {
    display: table;
    width: 100%;
    position: absolute;
    bottom: 0;
}

    .triangleHolder div {
        display: table-cell;
        height: .7em;
        font-size: .8em;
        background-color: #fff;
    }

    .triangleHolder .triangle {
        width: 2em;
        background-color: transparent;
        background-image: url('triangle.svg');
        background-size: cover;
        background-position: center center;
    }

/*.triangleHolder .triangle
    {
        width: 0px;
        height: 0px;
        margin-left: 500px;
        border-style: solid;
        border-width: .5em .7em 0 .7em;
        border-color: #000000 transparent transparent transparent;
    }*/



#menu {
    padding-bottom: 2em;
}

    #menu a {
        color: #404040;
    }

        #menu a:hover {
            color: #0078a0;
        }

.iconic {
    display: table;
    box-sizing: border-box;
    margin-top: 1em;
    margin-bottom: .5em;
    font-size: 1em;
}

    .iconic .iconicMenuItem {
        width: 9.5em;
        height: 5em;
        float: left;
        text-align: center;
        padding-top: 3.5em;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 3em;
        display: inline-block;
        border: none;
        transition: opacity 0.2s linear;
        opacity: 0.5;
        margin-bottom: 0.5em;
        font-weight: bold;
        position: relative;
    }

        .iconic .iconicMenuItem.choosed {
            opacity: 1;
            cursor: default;
        }

        .iconic .iconicMenuItem:hover {
            opacity: 1;
        }

        .iconic .iconicMenuItem.heatmaps {
            background-image: url('icon-heatmaps.svg');
        }

        .iconic .iconicMenuItem.playbacks {
            background-image: url('icon-playbacks.svg');
        }

        .iconic .iconicMenuItem.formanalytics {
            background-image: url('icon-formanalytics.svg');
        }

        .iconic .iconicMenuItem.microsurveys {
            background-image: url('icon-microsurveys.svg');
        }

            .iconic .iconicMenuItem.microsurveys .hotOffer {
                font-size: .7em;
                position: absolute;
                top: -1em;
                left: 50%;
            }

.subMenu {
    border: 1px solid #e8e8e8;
    border-radius: .3em;
    margin-left: 0px;
    position: relative;
    padding-top: .4em;
    display: inline-block;
}

    .subMenu:before {
        content: '';
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 .8em .6em .8em;
        border-color: transparent transparent #e8e8e8 transparent;
        position: absolute;
        top: -.6em;
        left: .15em;
        margin-left: .5em;
    }

.subMenuPsedu:before {
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 .7em .5em .7em;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    top: -.5em;
    left: .21em;
    margin-left: .5em;
}

.subMenu a {
    transition: opacity 0.2s linear;
    opacity: 0.6;
    display: inline-block;
    font-size: .95em;
    border: none;
    padding-top: .3em;
    padding-bottom: 0.7em;
    padding-left: 1em;
    padding-right: 1em;
}

    .subMenu a:hover {
        opacity: 1;
        border: none;
    }

    .subMenu a:last-child {
        margin-right: 0;
    }


.subMenu .choosed {
    opacity: .8;
    font-weight: bold;
}


section {
    padding-top: 4em;
    padding-bottom: 4em;
    line-height: 1.3;
}

    section .columns {
        font-size: .9em;
    }

    section.gray {
        background-color: #fafafa;
        /*border-bottom: 1px solid #eeeeee;
        border-top: 1px solid #eeeeee;*/
    }

    section.line {
        border-bottom: 2px dashed #eeeeee;
        border-top: 2px dashed #eeeeee;
    }

    section.noTopPadding {
        padding-top: 0;
    }

    section.noPadding {
        padding-top: .5em;
        padding-bottom: .5em;
    }

    section.lineSpacing-15 {
        line-height: 1.5;
    }

    section ul {
        list-style: square;
        margin: 0;
        padding: 0;
        margin-left: 2em;
        line-height: 1.5;
        font-size: 1em;
    }

        section ul li {
            padding-top: 1.2em;
        }


    section h2 {
        font-size: 1.5em;
        text-transform: uppercase;
        color: #727272;
    }


    section .animate .goRight {
        text-align: right;
        color: #585858;
        padding-top: 10vh;
    }


    section .row.serviceInfo {
    }


        section .row.serviceInfo .screenshot {
            width: 100%;
            height: auto;
            border: 2px solid #e8e8e8;
            border-radius: .3em;
        }


    section .row.serviceOverview {
    }

        section .row.serviceOverview .columns {
            text-align: center;
            font-weight: lighter;
            font-size: 1.1em;
            line-height: 1.3em;
        }

        section .row.serviceOverview h2 {
            font-size: 1.5em;
            margin-top: 0;
        }


    section .row.serviceImageList {
    }

        section .row.serviceImageList h2 {
            margin-top: 0;
            margin-bottom: 1em;
        }

        section .row.serviceImageList .columns {
            text-align: center;
        }



        section .row.serviceImageList .copyrightInfo {
            padding-top: 1em;
            color: #898989;
            font-variant: small-caps;
        }



    section .techLogo {
        width: 15em;
        height: 7em;
        background-image: url('compatibleLogo/Emberjs.png');
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        display: inline-block;
        transition: all linear 200ms;
        -webkit-filter: grayscale(50%);
        -moz-filter: grayscale(50%);
        filter: grayscale(50%);
    }

        section .techLogo:hover {
            -webkit-filter: inherit;
            -moz-filter: inherit;
            filter: inherit;
        }

        section .techLogo.angularjs {
            background-image: url('compatibleLogo/angularjs.svg');
        }

        section .techLogo.emberjs {
            background-image: url('compatibleLogo/emberjs.png');
        }

        section .techLogo.backbone {
            background-image: url('compatibleLogo/backbone.png');
        }

        section .techLogo.ssl {
            background-image: url('compatibleLogo/ssl.svg');
            width: 10em;
        }


.serviceAnimateA {
    position: relative;
}

    .serviceAnimateA .bg {
    }

    .serviceAnimateA #pointer {
        width: 4vh;
        position: absolute;
        transition: opacity 1s;
        top: 75%;
        left: 45%;
        transition-property: left, top;
    }

        .serviceAnimateA #pointer.odd {
            top: 75%;
            left: 45%;
        }

    .serviceAnimateA #hand {
        width: 15vh;
        position: absolute;
        top: 0;
        transition: opacity 1s;
        transition-property: left, top;
        top: 70%;
        left: 70%;
    }

        .serviceAnimateA #hand.odd {
            top: 65%;
            left: 70%;
        }



.featureList {
    margin-top: 1em;
}

    .featureList .featureItem {
        opacity: .6;
        line-height: 1.3;
        margin-bottom: 1em;
    }

        .featureList .featureItem .icon {
            height: 4em;
            width: 4em;
            background-repeat: no-repeat;
            background-position: left center;
        }

            .featureList .featureItem .icon.updateAssessment {
                background-image: url('features-updateOk.svg');
            }

            .featureList .featureItem .icon.improve {
                background-image: url('features-increase.svg');
            }

            .featureList .featureItem .icon.error {
                background-image: url('features-error.svg');
            }

            .featureList .featureItem .icon.fields {
                background-image: url('features-fields.svg');
            }

            .featureList .featureItem .icon.updateSequence {
                background-image: url('features-updateSequence.svg');
                width: 6em;
            }

            .featureList .featureItem .icon.adplace {
                background-image: url('features-adloc.svg');
            }

            .featureList .featureItem .icon.responsive {
                background-image: url('features-responsive.svg');
            }

            .featureList .featureItem .icon.mobile {
                background-image: url('features-mobile.svg');
            }

            .featureList .featureItem .icon.ab {
                background-image: url('features-ab.svg');
            }

            .featureList .featureItem .icon.realtime {
                background-image: url('features-realtime.svg');
            }

            .featureList .featureItem .icon.realtimeB {
                background-size: contain;
                background-image: url('features-realtimeB.svg');
            }

            .featureList .featureItem .icon.checkbox {
                background-image: url('features-checkbox.svg');
            }

            .featureList .featureItem .icon.css {
                background-image: url('features-css.svg');
                width: 6em;
            }

            .featureList .featureItem .icon.improveUserExperience {
                background-image: url('features-smile.svg');
            }

            .featureList .featureItem .icon.optimize {
                background-image: url('features-optimize.svg');
            }

            .featureList .featureItem .icon.updateAssessment {
                background-image: url('features-updateQ.svg');
            }

            .featureList .featureItem .icon.resources {
                background-image: url('features-resources.svg');
            }

            .featureList .featureItem .icon.multiple {
                background-image: url('features-multiple.svg');
            }

            .featureList .featureItem .icon.share {
                background-image: url('features-share.svg');
                width: 5em;
            }

            .featureList .featureItem .icon.https {
                background-image: url('features-https.svg');
                width: 4.5em;
            }


        .featureList .featureItem .title {
            font-weight: bold;
            text-transform: uppercase;
            margin-top: .3em;
            margin-bottom: .3em;
        }


.brightTxt {
    color: #7b7b7b;
}

.brightTxt2 {
    color: #a8a8a8;
    font-size: 1em;
}

.secClock {
    background-image: url('headers/support.jpg');
    background-size: cover;
    background-position: left bottom;
}

    .secClock .highlight {
        background-color: #00a6aa;
        padding-left: .3em;
        padding-right: .3em;
        display: inline-block;
        color: #fff;
        border-radius: .25em;
        margin-right: .2em;
    }

.clock {
    text-align: center;
    margin-top: 2em;
}

    .clock * {
        -moz-transform-origin: initial;
        -webkit-transform-origin: initial;
        -o-transform-origin: initial;
        -ms-transform-origin: initial;
        transform-origin: initial;
    }

    .clock .columns {
    }

    .clock #clock1 {
        max-width: 20em;
    }

    .clock #clock3 {
        -webkit-transform: translate(-50%, 0) rotate(-90deg);
        -moz-transform: translate(-50%, 0) rotate(-90deg);
        -o-transform: translate(-50%, 0) rotate(-90deg);
        -ms-transform: translate(-50%, 0) rotate(-90deg);
        transform: translate(-50%, 0) rotate(-90deg);
        transform-origin: center center;
    }

        .clock #clock3.odd1 {
            /* Firefox */
            -moz-transition: all 2s ease-out;
            /* WebKit */
            -webkit-transition: all 2s ease-out;
            /* Opera */
            -o-transition: all 2s ease-out;
            /* Standard */
            transition: all 2s ease-out;
        }

        .clock #clock3.odd2 {
            -webkit-transform: translate(-50%, 0) rotate(0deg);
            -moz-transform: translate(-50%, 0) rotate(0deg);
            -o-transform: translate(-50%, 0) rotate(0deg);
            -ms-transform: translate(-50%, 0) rotate(0deg);
            transform: translate(-50%, 0) rotate(0deg);
        }

    .clock img.centered {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
    }


.secClock .sayHello {
    opacity: 0;
    /* Firefox */
    -moz-transition: opacity 1s linear;
    /* WebKit */
    -webkit-transition: opacity 1s linear;
    /* Opera */
    -o-transition: opacity 1s linear;
    /* Standard */
    transition: opacity 1s linear;
}

    .secClock .sayHello.odd {
        opacity: 1;
    }


.webLayoutAnimate {
    text-align: center;
    margin-top: 2em;
    margin-bottom: 2em;
}

    .webLayoutAnimate .webLayoutAnimateHolder {
        max-width: 40em;
        text-align: center;
        margin: auto;
        position: relative;
    }

    .webLayoutAnimate .item {
        position: absolute;
        top: 0;
        left: 0;
        width: 20%;
        /* Firefox */
        -moz-transition: all 500ms linear;
        /* WebKit */
        -webkit-transition: all 500ms linear;
        /* Opera */
        -o-transition: all 500ms linear;
        /* Standard */
        transition: all 500ms linear;
    }

    /*Variation A*/
    .webLayoutAnimate .webLayoutAnimateHolder.variationA #webLayout2 /*btn*/ {
        top: 32%;
        left: 40%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationA #webLayout3 /*title*/ {
        top: 25%;
        left: 10%;
        width: 80%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationA #webLayout4 /*lines*/ {
        top: 45%;
        left: 10%;
        width: 55%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationA #webLayout5 /*block*/ {
        top: 45%;
        left: 65%;
        width: 30%;
    }


    /*Variation B*/
    .webLayoutAnimate .webLayoutAnimateHolder.variationB #webLayout2 /*btn*/ {
        top: 35%;
        left: 70%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationB #webLayout3 /*title*/ {
        top: 25%;
        left: 10%;
        width: 80%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationB #webLayout4 /*lines*/ {
        top: 35%;
        left: 10%;
        width: 55%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationB #webLayout5 /*block*/ {
        top: 50%;
        left: 65%;
        width: 30%;
    }



    /*Variation C*/
    .webLayoutAnimate .webLayoutAnimateHolder.variationC #webLayout2 /*btn*/ {
        top: 24%;
        left: 68%;
        width: 25%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationC #webLayout3 /*title*/ {
        top: 25%;
        left: 10%;
        width: 55%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationC #webLayout4 /*lines*/ {
        top: 35%;
        left: 10%;
        width: 55%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationC #webLayout5 /*block*/ {
        top: 40%;
        left: 65%;
        width: 30%;
    }


    /*Variation D*/
    .webLayoutAnimate .webLayoutAnimateHolder.variationD #webLayout2 /*btn*/ {
        top: 31%;
        left: 7%;
        width: 25%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationD #webLayout3 /*title*/ {
        top: 30%;
        left: 38%;
        width: 55%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationD #webLayout4 /*lines*/ {
        top: 40%;
        left: 38%;
        width: 55%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationD #webLayout5 /*block*/ {
        top: 50%;
        left: 5%;
        width: 30%;
    }


    /*Variation E*/
    .webLayoutAnimate .webLayoutAnimateHolder.variationE #webLayout2 /*btn*/ {
        top: 32%;
        left: 40%;
        width: 20%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationE #webLayout3 /*title*/ {
        top: 25%;
        left: 10%;
        width: 80%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationE #webLayout4 /*lines*/ {
        top: 45%;
        left: 38%;
        width: 55%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationE #webLayout5 /*block*/ {
        top: 45%;
        left: 5%;
        width: 30%;
    }



    /*Variation F*/
    .webLayoutAnimate .webLayoutAnimateHolder.variationF #webLayout2 /*btn*/ {
        top: 80%;
        left: 37%;
        width: 20%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationF #webLayout3 /*title*/ {
        top: 25%;
        left: 10%;
        width: 80%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationF #webLayout4 /*lines*/ {
        top: 35%;
        left: 38%;
        width: 55%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationF #webLayout5 /*block*/ {
        top: 35%;
        left: 5%;
        width: 30%;
    }


    /*Variation G*/
    .webLayoutAnimate .webLayoutAnimateHolder.variationG #webLayout2 /*btn*/ {
        top: 80%;
        left: 73%;
        width: 20%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationG #webLayout3 /*title*/ {
        top: 25%;
        left: 10%;
        width: 80%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationG #webLayout4 /*lines*/ {
        top: 35%;
        left: 38%;
        width: 55%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationG #webLayout5 /*block*/ {
        top: 35%;
        left: 5%;
        width: 30%;
    }




    /*Variation H*/
    .webLayoutAnimate .webLayoutAnimateHolder.variationH #webLayout2 /*btn*/ {
        top: 24%;
        left: 73%;
        width: 20%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationH #webLayout3 /*title*/ {
        top: 28%;
        left: 10%;
        width: 60%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationH #webLayout4 /*lines*/ {
        top: 40%;
        left: 38%;
        width: 55%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationH #webLayout5 /*block*/ {
        top: 40%;
        left: 5%;
        width: 30%;
    }


    /*Variation I*/
    .webLayoutAnimate .webLayoutAnimateHolder.variationI #webLayout2 /*btn*/ {
        top: 60%;
        left: 70%;
        width: 20%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationI #webLayout3 /*title*/ {
        top: 45%;
        left: 10%;
        width: 80%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationI #webLayout4 /*lines*/ {
        top: 50%;
        left: 10%;
        width: 50%;
    }

    .webLayoutAnimate .webLayoutAnimateHolder.variationI #webLayout5 /*block*/ {
        top: 21%;
        left: 30%;
        width: 35%;
    }



section.getStarted .columns {
    margin: auto !important;
    float: none;
}


section.homeSec1 {
    padding-top: 3em;
    padding-bottom: 3em;
}


.row.customers {
}

    .row.customers .cLogo {
        height: 80px;
        background-repeat: no-repeat;
        background-position: center center;
    }

        .row.customers .cLogo.customer1 {
            background-image: url('customers1.png');
        }

        .row.customers .cLogo.customer2 {
            background-image: url('customers2.png');
        }

        .row.customers .cLogo.customer3 {
            background-image: url('customers3.png');
        }

        .row.customers .cLogo.customer4 {
            background-image: url('customers4.png');
        }


.row.homeServiceDescr {
}

    .row.homeServiceDescr .title {
        font-size: 1.6em;
        font-weight: bold;
        text-transform: uppercase;
        margin-top: .5em;
        margin-bottom: .5em;
    }

    .row.homeServiceDescr .txt {
        font-size: 1.2em;
        line-height: 1.5;
        color: #909090;
        position: relative;
    }

    .row.homeServiceDescr .icon {
        height: 5em;
        width: 5em;
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain;
        display: inline-block;
        opacity: .7;
    }

        .row.homeServiceDescr .icon.heatmaps {
            background-image: url('icon-heatmaps.svg');
        }


        .row.homeServiceDescr .icon.playbacks {
            background-image: url('icon-playbacks.svg');
        }

        .row.homeServiceDescr .icon.formanalytics {
            background-image: url('icon-formanalytics.svg');
        }

        .row.homeServiceDescr .icon.microsurveys {
            background-image: url('icon-microsurveys.svg');
        }

    .row.homeServiceDescr .btn {
        margin-top: 2em;
    }

        .row.homeServiceDescr .btn.green {
            font-size: 1.3em;
        }

    .row.homeServiceDescr .serviceScreenshot {
        padding: 1em;
        padding-top: 0;
        padding-bottom: 0;
    }

        .row.homeServiceDescr .serviceScreenshot.rounded {
            border-radius: .5em;
            padding: 0;
        }

    .row.homeServiceDescr.homeServiceTumbs {
        margin-top: 3em;
    }

    .row.homeServiceDescr.homeServiceTumbs {
        margin-top: 2em;
        margin-bottom: 1em;
        text-align: center;
    }

        .row.homeServiceDescr.homeServiceTumbs .columns {
            transition: opacity linear 100ms;
            cursor: pointer;
        }

            .row.homeServiceDescr.homeServiceTumbs .columns:hover {
                opacity: .9;
            }

        .row.homeServiceDescr.homeServiceTumbs img {
            border: 2px solid #e8e8e8;
            border-radius: .3em;
        }

        .row.homeServiceDescr.homeServiceTumbs .btn {
            margin-top: .5em;
        }

        .row.homeServiceDescr.homeServiceTumbs .title {
            margin-top: .7em;
            font-size: 1em;
        }

            .row.homeServiceDescr.homeServiceTumbs .title a {
                color: inherit;
            }

    .row.homeServiceDescr .techList {
        text-align: center;
        margin-top: 1.5em;
        opacity: .5;
    }

        .row.homeServiceDescr .techList .techLogo {
            width: 10em;
            height: 4em;
            margin-top: .5em;
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            filter: grayscale(100%);
        }

        .row.homeServiceDescr .techList b {
            text-transform: uppercase;
            font-size: .8em;
        }


.row.homeDemos {
    margin-top: 2em;
    font-variant: small-caps;
}

    .row.homeDemos .btn {
        font-size: .8em;
        margin-left: .5em;
        margin-right: .5em;
    }

    .row.homeDemos .columns {
    }

#bestBundleEver {
    height: 10em;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url('BundleEver.svg');
    display: inline-block;
    margin-bottom: 3em;
}

section.textContent {
    padding-top: 1em;
}

    section.textContent p {
        text-align: justify;
    }

    section.textContent h2 {
        font-size: 1.5em;
        font-weight: normal;
        margin-top: 2em;
    }

    section.textContent h3 {
        font-size: 1.2em;
        font-weight: normal;
        margin-top: 1em;
        margin-bottom: 0;
    }

section.pricing {
    padding-bottom: 2em;
    padding-top: 3em;
}

    section.pricing h1 {
        text-transform: uppercase;
        font-size: 2.5em;
    }


    section.pricing .pricingPeriod {
        padding-top: 1em;
        padding-bottom: 1em;
        font-family: "Montserrat", "Arial Rounded MT", "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
    }

        section.pricing .pricingPeriod a {
            display: inline-block;
            background-color: #18b9dc;
            padding: 1em;
            padding-left: 2em;
            padding-right: 2em;
            margin: 0;
            color: #fff;
            text-transform: uppercase;
            font-size: .85em;
        }

            section.pricing .pricingPeriod a.choosed {
                background-color: #15a6c5;
                padding-top: 1.2em;
                padding-bottom: 1.2em;
                cursor: default;
                border-radius: .3em;
            }




    section.pricing .plans {
    }

        section.pricing .plans .large-2.columns {
            
        }

        section.pricing .plans .planBox {
            background-color: #18b9dc;
            text-align: center;
            color: #fff;
            padding: 1em;
            margin-top: 10em;
            border-radius: .3em;
        }

            section.pricing .selectorAnnually {
                display: none;
            }


            section.pricing .plans .planBox .theImg {
                height: 212px;
                background-image: url('pricingPlanIcon1.png');
                background-repeat: no-repeat;
                background-position: center center;
                margin-top: -160px;
                margin-bottom: 0px;
            }

                section.pricing .plans .planBox .theImg.plan1 {
                    background-image: url('pricingPlanIcon1.png');
                }

                section.pricing .plans .planBox .theImg.plan2 {
                    background-image: url('pricingPlanIcon2.png');
                }

                section.pricing .plans .planBox .theImg.plan3 {
                    background-image: url('pricingPlanIcon3.png');
                }

                section.pricing .plans .planBox .theImg.plan4 {
                    background-image: url('pricingPlanIcon4.png');
                }

            section.pricing .plans .planBox .title {
                text-transform: uppercase;
                font-size: 1.2em;
                font-family: "Montserrat", "Arial Rounded MT", "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
            }

            section.pricing .plans .planBox .price {
                padding-top: .1em;
                padding-bottom: .5em;
                font-size: 4em;
                line-height: 1;
            }

                section.pricing .plans .planBox .price .small {
                    font-size: .3em;
                }

                section.pricing .plans .planBox .price .prev {
                    text-decoration:line-through;
                    opacity:.8;
                    font-size:.8em;
                    display:block;
                }

            section.pricing .plans .planBox .quota {
                padding-top: .7em;
                padding-bottom: .5em;
                font-size: 1.4em;
                line-height: 1.5;
            }

                section.pricing .plans .planBox .quota .small {
                    font-size: .8em;
                }


    section.pricing .offertitle {
        background: #fff7a0;
        display: inline-block;
        border-radius: .4em;
        padding: 1em;
        padding-left:3.5em;
        margin-top: 1em;
        position:relative;
        font-weight:bold;
        font-size:1.2em;
    }

        section.pricing .offertitle:before {
            content: '';
            display:inline-block;
            background-image: url('OfferIcon.png');
            background-size: contain;
            width: 4em;
            height: 4em;
            position:absolute;
            left:-1em;
            top:-.5em;
        }

        section.pricing .offertitle span {
            font-weight: bold;
            margin-right: .5em;
            padding: .3em;
            border: 1px dashed rgb(234, 230, 53);
        }


    section.pricing .helpIcon:after {
        font-size: 1rem;
        line-height: .8;
        content: "i";
        display: inline-block;
        margin-left: .2em;
        background-color: #fff;
        color: #18b9dc;
        padding: .3em;
        padding-top: 0;
        padding-bottom: 0;
        font-style: italic;
        font-family: 'Times New Roman';
        border-radius: .5em;
        cursor: help;
    }



    section.pricing .checkListArea {
        padding-top: 4em;
        color: #565656;
    }

        section.pricing .checkListArea .helpIcon:after, section.pricing .pricingInfo .helpIcon:after {
            background-color: #575757;
            color: #fff;
        }

        section.pricing .checkListArea h2 {
            font-size: 1.4em;
        }

        section.pricing .checkListArea .list {
            font-size: 1.15em;
            line-height: 1.5;
            border-bottom: 1px solid #ebebeb;
            border-top: 1px solid #ebebeb;
            padding-top: .5em;
            padding-bottom: .5em;
        }

            section.pricing .checkListArea .list .item {
            }

                section.pricing .checkListArea .list .item:before {
                    content: '\2714';
                    color: #45bc16;
                    font-weight: bold;
                    font-size: 1.2em;
                    padding-right: .3em;
                }

                section.pricing .checkListArea .list .item.no:before {
                    content: '\2718';
                    color: #bc1616;
                }

                section.pricing .checkListArea .list .item .serviceIcon {
                    display: inline-block;
                    width: 1em;
                    height: 1em;
                    background-image: url('icon-playbacks.svg');
                    background-size: contain;
                    margin-right: .1em;
                }

                    section.pricing .checkListArea .list .item .serviceIcon.pb {
                        background-image: url('icon-playbacks.svg');
                    }

                    section.pricing .checkListArea .list .item .serviceIcon.fa {
                        background-image: url('icon-formanalytics.svg');
                    }

                    section.pricing .checkListArea .list .item .serviceIcon.hm {
                        background-image: url('icon-heatmaps.svg');
                    }

                    section.pricing .checkListArea .list .item .serviceIcon.ms {
                        background-image: url('icon-microsurveys.svg');
                    }



    section.pricing .pricingInfo {
        font-size: 1.1em;
        line-height: 1.5;
        margin-top: .6em;
        color: #565656;
    }

        section.pricing .pricingInfo .info {
            float: right;
            font-size: .8em;
        }

        section.pricing .pricingInfo .gateways {
            padding-bottom: 2.5em;
            width:30em;
            background-image: url('pricingGateways.png');
            background-repeat: no-repeat;
            background-position: right bottom;
        }



    section.pricing .pricingComparision {
        margin-top: 3em;
    }

        section.pricing .pricingComparision table {
            width: 100%;
            text-align: center;
            border-collapse: collapse;
           border: 1px solid #f6f6f6;
        }

            section.pricing .pricingComparision table td {
                text-align: center;
                border: 1px solid #f6f6f6;
                border-left: 0;
                border-top: 0;
                color:#494949;
            }

             section.pricing .pricingComparision table td.popular {
                 background-color:#ffffe1;
             }

            section.pricing .pricingComparision table .plansRow {

            }

              section.pricing .pricingComparision table .plansRow td {
                  padding-left:1em;
                  padding-right:1em;

            }

                section.pricing .pricingComparision table .plansRow .name {
                    font-size: 1.1em;
                    font-weight: bold;
                    display: block;
                    text-transform: uppercase;
                    padding-top: 1em;
                }

                section.pricing .pricingComparision table .plansRow .price {
                    font-size: 3em;
                    font-weight: bold;
                    display: block;
                    line-height: 1.1em;
                    color: #5e5e5e;
                    margin-top:.2em;
                    margin-bottom:-.3em;
                }

                 section.pricing .pricingComparision table .plansRow .price .dur {
                     font-size:.3em;
                 }

                section.pricing .pricingComparision table .plansRow .btn {
                    font-size:.8em;
                    margin-bottom: 1.5em;
                    margin-top:1.3em;
                    white-space:nowrap;
                }

            section.pricing .pricingComparision table .featuresRow {
            }

                section.pricing .pricingComparision table .featuresRow .name {
                    font-size:1.05em;
                    font-weight: bold;
                    padding-top:1em;
                    padding-bottom:1em;
                    text-align:right;
                }

                section.pricing .pricingComparision table .featuresRow .value {
                    font-size: 1.05em;
                    padding-top: 1em;
                    padding-bottom: 1em;
                }

                    section.pricing .pricingComparision table .featuresRow .value .infinite {
                        font-size: 2em;
                        line-height:.5em;
                    }

                section.pricing .pricingComparision table .featuresRow.important .value {
                    font-weight: bold;
                }

            section.pricing .pricingComparision table tr:nth-of-type(even) {
                background-color: #fff;
            }


        section.pricing .pricingComparision .helpIcon:after {
            background-color: #575757;
            color: #fff;
        }

        section.pricing .pricingComparision table span.check:before {
                    content: '\2714';
                    color: #45bc16;
                    font-weight: bold;
                    font-size: 1.2em;
                    padding-right: .3em;
                }

                section.pricing .pricingComparision table span.check.no:before {
                    content: '\2718';
                    color: #bc1616;
                }



.tooltip {
    max-width: 500px;
}

.tooltip {
    background-color: #fff424 !important;
    color: #353535;
}

    .tooltip > .nub {
        border-color: transparent transparent #f7f200;
    }


.hotOffer {
    background-color: #3bd11e;
    color: #fff;
    display: inline-block;
    font-size: 1em;
    padding: .3em;
    border-radius: .3em;
    margin-bottom: .5em;
}


section.article {
    padding-top: 1em;
}

    section.article .offer {
        margin-top: .5em;
        background-color: #f5f5f5;
        padding-top: 1em;
        padding-bottom: 1em;
        border-radius: .7em;
        color: #5b5b5b;
        padding-left: 1em;
        padding-right: 1em;
    }


        section.article .offer .important {
            color: #3d3d3d;
            padding-top: 1em;
            padding-bottom: 1em;
            border-top: 1px dotted #e9e9e9;
        }

            section.article .offer .important:first-child {
                margin-top: 1em;
            }

            section.article .offer .important span {
                font-size: 1.2em;
                display: block;
                font-weight: bold;
            }




    section.article .articleSubSection {
        margin-bottom: 3em;
        position: relative;
        font-size: 1.2em;
        line-height: 1.5;
    }


        section.article .articleSubSection p {
        }

        section.article .articleSubSection .artImg {
            padding: 1em;
        }

            section.article .articleSubSection .artImg.floatRight { /*inline images*/
                float: right;
                padding-right: 0;
            }

            section.article .articleSubSection .artImg.floatLeft { /*inline images*/
                float: left;
                padding-left: 0;
            }



footer {
    padding-top: 2em;
    background-color: #404040;
    color: #fff;
    line-height: 1;
}

    footer h3 {
        font-variant: small-caps;
        font-weight: normal;
        margin-bottom: .1em;
        margin-top: 0;
        color: #a7a7a7;
        font-size: 1.3em;
    }


    footer ul {
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: .8em;
        margin-bottom: 2em;
    }


    footer a {
        color: #fff;
        border: none;
        display: block;
        padding: .15em;
    }

        footer a:hover {
            border: none;
            color: #bfef15;
        }

    /*footer .footNav a:hover
        {
            border: none;
            color: #00e087;
        }

        footer .footSupport a:hover
        {
            border: none;
            color: #e90081;
        }


        footer .footPartners a:hover
        {
            border: none;
            color: #d4c900;
        }

        footer .footSocial a:hover
        {
            border: none;
            color: #00bdca;
        }

        footer .footBlog a:hover
        {
            border: none;
            color: #c780ff;
        }*/


    footer .hot a:after {
        content: '[ new ]';
        display:inline-block;
        color:#81ff4f;
        font-variant:small-caps;
        padding-left:.4em;
    }
    footer .footBlog {
        border: none;
        color: #c780ff;
    }


    footer .social a {
        margin-bottom: .1em;
    }

        footer .social a:before {
            display: inline-block;
            content: '';
            width: 2em;
            height: 2em;
            margin-right: .5em;
            background-image: url('facebook_square.svg');
            background-repeat: no-repeat;
            vertical-align: middle;
            margin-top: -3px;
        }

        footer .social a.twitter:before {
            background-image: url('twitter_square.svg');
        }

        footer .social a.gplus:before {
            background-image: url('google_square.svg');
        }

    footer .sec2 {
        padding-top: 1.5em;
        margin-top: 1em;
        padding-bottom: 1.5em;
        background-color: #242424;
        color: #9f9f9f;
        line-height: 1.3em;
    }


        footer .sec2 .goRight {
            text-align: right;
        }

        footer .sec2 .columns {
            font-size: .7em;
            padding-top: 0.75em;
        }


        footer .sec2 .madeIn {
            padding-top: 0;
            line-height: 1.3em;
            font-size: .6em;
            text-transform: uppercase;
        }

            footer .sec2 .madeIn .flagImage {
                background-image: url("flag.svg");
                background-size: contain;
                margin-top: .5em;
                margin-left: .1em;
                margin-right: .1em;
                width: 4em;
                height: 2em;
                display: inline-block;
            }

            footer .sec2 .madeIn .flagImage.ns {
                background-image: url("flagns.svg");
            }
            footer .sec2 .madeIn .flagImage.hfx {
                background-image: url("flaghfx.svg");
            }

.rotate {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    /* Should be unset in IE9+ I think. */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#sticky {
    color: #fff;
    background-color: #636363;
    display: inline-block;
    position: fixed;
    font-size: 1.5em;
    padding: .2em;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 1em;
    top: 5em;
    z-index: 5;
    text-align: center;
    border-right: 3px solid #fb5e00;
    transition: padding 100ms ease-in-out;
    -moz-transition: padding 100ms ease-in-out;
    -o-transition: padding 100ms ease-in-out;
    -webkit-transition: padding 100ms ease-in-out;
}

    #sticky span {
        font-size: .5em;
        display: block;
        margin-left: -.2em;
        margin-top: 1.5em;
    }

    #sticky:hover {
        padding-left: .5em;
    }


@media only screen and (min-width : 10px) and (max-width : 768px) {
    .smallcenter {
        text-align: center !important;
    }

    .smallhide {
        display: none;
    }

    section .animate .goRight {
        padding-top: 1em;
    }

    .subMenu {
        margin-left: -1px !important;
    }

        .subMenu .subMenuPsedu {
            display: none;
        }

        .subMenu:before {
            display: none;
            margin-top: 0;
        }


    #header2 {
        background-size: auto;
    }


    section.pricing .pricingComparision {
        display:none;
    }



    #topNav .menu a.choosed {
        border: none;
    }


    .dropGlobal .columns {
        margin-bottom: 1em;
    }

    header.home .animateBars .bar.centered:before {
        display: none;
    }

    #sticky {
        display: none;
    }

    #topNav #megaMenu .tab.tabDemo .menuIconic .icon {
        margin-top: 2em;
    }

    .desktopSpacer {
        height: 0;
    }

    .row.homeServiceDescr .serviceScreenshot {
        margin-top: 2em;
    }

    .clock #clock1 {
        width: 70vw;
    }

    section.pricing .planDetails:after {
        content: '';
    }
}




/**
 * Dragdealer JS v0.9.5
 * http://code.ovidiu.ch/dragdealer-js
 *
 * Copyright (c) 2010, Ovidiu Chereches
 * MIT License
 * http://legal.ovidiu.ch/licenses/MIT
 */

.dragdealer {
    position: relative;
    height: 3em;
    background: #eeeeee;
    border-bottom: 1em solid #fff;
    cursor: pointer;
}

    .dragdealer:before {
        display: block;
        content: '';
        height: 1em;
        width: 100%;
        background-color: #fff;
        position: absolute;
    }

    .dragdealer .handle {
        position: absolute;
        cursor: w-resize;
        z-index: 2;
    }

    /*.dragdealer .handle:after
{
    width: 0px;
    height: 0;
    border-style: solid;
    content: '';
    border-width: .4em .4em 0 .4em;
    border-color: #fb5e00 transparent transparent transparent;
    left: 50%;
    top: 100%;
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}*/

    .dragdealer .red-bar {
        width: 2.5em;
        height: 3em;
        color: #FFF;
        line-height: 30px;
        text-align: center;
        border-radius: .5em;
        background: #fb5e00; /* Old browsers */
    }

    .dragdealer .disabled {
        background: #898989;
    }


.hasTip {
    position: relative;
    cursor: help;
    border-bottom: 1px dashed #939393;
    display: inline-block;
}


.dropGlobal {
    border: none;
    border-radius: .3em;
    margin-top: .7em;
    -webkit-box-shadow: -3px 4px 7px rgba(0,0,0,.18);
    -moz-box-shadow: -3px 4px 7px rgba(0,0,0,.18);
    box-shadow: -3px 4px 7px rgba(0,0,0,.18);
    padding: 1em;
    color: #636363;
    font-size: .8em;
}

    .dropGlobal a {
        color: #228cae;
    }

        .dropGlobal a.restore {
            font-variant: small-caps;
        }

    .dropGlobal h2 {
        font-variant: small-caps;
        font-weight: normal;
        padding-bottom: .2em;
        font-size: 1.6em;
        border-bottom: 1px dashed #e8e8e8;
        margin-top: .2em;
        margin-bottom: .3em;
    }

    .dropGlobal .title {
        display: inline-block;
        width: 25%;
        margin-bottom: .5em;
    }

    .dropGlobal .field {
        display: inline-block;
        width: 70%;
        margin-bottom: .5em;
    }

        .dropGlobal .field input {
            border: 1px solid rgba(0,0,0,.18);
            width: 100%;
            padding: .5em;
            background-color: #fbfbfb;
        }

            .dropGlobal .field input:focus {
                -webkit-box-shadow: 0 0 5px 1px rgba(0,191,225,.31);
                -moz-box-shadow: 0 0 5px 1px rgba(0,191,225,.31);
                box-shadow: 0 0 5px 1px rgba(0,191,225,.31);
                outline: 0;
                outline-color: transparent;
                outline-style: none;
            }


    .dropGlobal ul {
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 1.2em;
    }

        .dropGlobal ul li {
            border-radius: .2em;
            transition: padding 200ms ease-in-out;
            -moz-transition: padding 200ms ease-in-out;
            -o-transition: padding 200ms ease-in-out;
            -webkit-transition: padding 200ms ease-in-out;
        }

            .dropGlobal ul li:hover {
                padding-left: .5em;
                background-color: #f7f7f7;
            }

            .dropGlobal ul li a:before {
                content: '';
                width: .4em;
                height: .4em;
                display: inline-block;
                vertical-align: middle;
                border-radius: 50%;
                margin-right: .5em;
                background-color: #9f9f9f;
            }



    .dropGlobal.medium2 {
        max-width: 700px;
    }



#dropLogin {
    padding-top: 1.5em;
}

.f-dropdown:after {
    display: none !important;
}


.splitter {
    border-bottom: 1px dotted #e8e8e8;
    margin-top: 1em;
    margin-bottom: 1em;
}

section.form {
}

    section.form.noTopPadding {
        padding-top: 0;
    }

    section.form a {
        color: #1b9bdc;
    }

    section.form .txt {
        border: 1px solid rgba(0,0,0,.18);
        width: 15em;
        font-size: 1.3em;
        margin-bottom: .5em;
        background-color: #fbfbfb;
        margin-top: .3em;
    }

    section.form.gray .txt {
        background-color: #fff;
    }

    section.form .txt.txtsmall {
        display: inline-block;
    }

    section.form input:focus, section.form textarea:focus {
        -webkit-box-shadow: 0 0 5px 1px rgba(0,191,225,.31);
        -moz-box-shadow: 0 0 5px 1px rgba(0,191,225,.31);
        box-shadow: 0 0 5px 1px rgba(0,191,225,.31);
        border: 1px solid rgba(0,0,0,.18);
        outline: 0;
        outline-color: transparent;
        outline-style: none;
    }

    section.form textarea {
        width: 100%;
        padding: .5em;
        height: 8em;
        font: inherit;
        font-size: 1.3em;
        background-color: #fbfbfb;
        border: 1px solid rgba(0,0,0,.18);
        margin-top: .3em;
    }



    section.form.demoForm {
    }


        section.form.demoForm .theLabel {
            font-size: 1.3em;
            border-bottom: 1px dotted #d7d7d7;
            padding-bottom: 2px;
            margin-bottom: .5em;
        }

        section.form.demoForm label, section.form.demoForm input[type="radio"] {
            cursor: pointer;
            padding-left: .3em;
        }

        section.form.demoForm input[type="checkbox"] {
            vertical-align: baseline;
            cursor: pointer;
        }

        section.form.demoForm #demoBoxA {
            background-color: #7a7a7a;
            padding: 50px;
            text-align: center;
            font-size: 30px;
            margin-top: 20px;
            display: none;
            color: White;
        }

        section.form.demoForm .big {
            font-size: 1.3em;
        }

        section.form.demoForm h1 span.recordingIcon {
            display: inline-block;
            width: .7em;
            height: .7em;
            background-color: red;
            border: 1px solid #db0000;
            vertical-align: middle;
            border-radius: 50%;
            opacity: 1;
            transition: opacity ease-in-out 500ms;
            margin-right: .2em;
        }

            section.form.demoForm h1 span.recordingIcon.off {
                opacity: .1;
            }

        section.form.demoForm h1 span.recordingTitle {
            font-size: .5em;
            float: right;
            border: 3px dashed #eeeeee;
            padding: .3em;
            padding-left: .5em;
            padding-right: .5em;
            border-radius: .5em;
        }

    section.form #optcurrent {
        font-size: 1.1em;
        border-bottom: 1px dotted #727272;
    }


section.planInfoPage {
}

    section.planInfoPage table {
        margin-bottom: .5em;
        border-radius: .3em;
    }

        section.planInfoPage table td, section.planInfoPage table th {
            font-size: 1.1em;
        }

    section.planInfoPage .info {
        margin-top: 2em;
        font-size: .9em;
        background-color: #fff;
        padding: 1.5em;
        border-radius: .3em;
        padding-left: 2em;

    }

        section.planInfoPage .info li {
            margin-bottom: .5em;
            padding: .5em;
            font-size: .9em;
        }

        section.planInfoPage .stripe {
            background-color: #fff;
            font-style:italic;
            padding: .5em;
            border-radius: .4em;
        }

    section.planInfoPage .stripe a {
        color:inherit;
        border-bottom: 1px dotted rgba(0,0,0,.18);
        padding-bottom: .1em;
    }


     section.planInfoPage .annualOffer {
        background: #fff7a0;
        border-radius: .4em;
        padding: 1em;
        padding-left:4.5em;
        padding-top:.5em;
        padding-bottom:.5em;
        margin-top: 1em;
        position:relative;
        font-weight:bold;
        font-size:1.1em;
    }

        section.planInfoPage .annualOffer:before {
            content: '';
            display:inline-block;
            background-image: url('OfferIcon4m.png');
            background-size: contain;
            width: 5em;
            height: 5em;
            position:absolute;
            left:-1em;
            top:-.5em;
        }

        section.planInfoPage .annualOffer span {
            font-weight: bold;
            font-size:1.5em;
            padding:.1em;
            padding-left:.5em;
            padding-right:.5em;
            margin-left:.3em;
            margin-right:.3em;
        }

        section.planInfoPage .annualOffer .btn {
            font-weight:normal;
            margin-left:1em;
            font-size:.9em;
        }


section.billingInfo {
}

    section.billingInfo h2 {
        border-bottom: 1px solid #eeeeee;
        margin-bottom: 1em;
        padding-bottom: .3em;
    }

    section.billingInfo table td {
        vertical-align: top;
        line-height: 1.5em;
    }

        section.billingInfo table td .title {
            font-weight: bold;
            display: inline-block;
            width: 8em;
        }

        section.billingInfo table td.tdSmall {
            white-space: nowrap;
            width: 1%;
        }


    section.billingInfo .txt {
        width:90%;
    }



.standaloneBody {
    background-color: #fbfbfb;
    /*background-image: url('headers/standaloneBg.jpg');*/
    background-repeat: no-repeat;
    height: 100%;
    background-size: cover;
    background-position: center center;
}

section.standalone {
    padding-top: 8em;
}

    section.standalone .holder {
        border-top: 1px dotted #dddddd;
        padding-top: .01em;
    }


        section.standalone .holder h1 {
            border-bottom: 1px dotted #d8d8d8;
            font-weight: normal;
            font-size: 1.5em;
            padding-top: .3em;
            padding-bottom: .3em;
        }

        section.standalone .holder input[type="text"], section.standalone .holder input[type="password"] {
            width: 100%;
            background-color:#fff;
        }


    section.standalone .logo {
        background-image: url('logo.svg');
        background-position: center 2em;
        background-repeat: no-repeat;
        background-size: 100% auto;
        width: 4em;
        height: 3.8em;
        position: absolute;
        top: -3.8em;
        opacity: .85;
        transition: background-position ease-out 200ms;
        margin-left: -3px;
        opacity: .4;
    }

        section.standalone .logo.toggle {
            background-position: center top;
        }

.inpError {
    display: inline-block;
    background-color: #E00000;
    color: #fff;
    padding: 3px;
    margin-left: 10px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 11px;
    position: absolute;
}

/*.inpError:before {
        position: absolute;
        content: '';
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: .4em .6em .4em 0;
        border-color: transparent #E00000 transparent transparent;
        top: 30%;
        left: -.9em;
        margin-left: .5em;
    }*/


.msgError {
    background-color: red;
    color: #fff;
    padding: 1em;
    font-weight: bold;
}

    .msgError.green {
        background-color: #0ba000;
    }

.reveal-modal#modalPricing {
}

    .reveal-modal#modalPricing table {
        width: 100%;
    }

        .reveal-modal#modalPricing table tr {
            line-height: 1.5;
        }



            .reveal-modal#modalPricing table tr th {
                width: 30%;
                text-align: left;
            }

            .reveal-modal#modalPricing table tr td {
                text-align: left;
            }

                .reveal-modal#modalPricing table tr td span {
                    font-size: .7em;
                    line-height: 1.2;
                    display: inline-block;
                }


table tr.numValue {
    background-color: #f7f7f7;
    font-size: 1.2em;
    line-height: 2;
}

tr.numValue th {
    text-align: right;
    padding-right: .5em;
    font-weight: normal;
}

tr.numValue td {
    padding-left: .5em;
}

table tr.red {
    background-color: #fffc7e;
    color: #fff;
}

table tr.numValue span.small {
    font-size:.7em;
    padding-left:.3em;
}


/* Wrapper for image centering */
.zoomIt {
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
}

#lightwrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    cursor: -webkit-zoom-out;
    cursor: -moz-zoom-out;
    z-index: 99999;
}
/* overlay covering website */
#lightbg {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    z-index: 99998;
}

#lightwrap img {
    position: absolute;
    display: none;
    border: 5px solid #e8e8e8;
    border-radius: .3em;
}

#lightzoomed {
    opacity: 0;
}

#off-screen {
    position: fixed;
    right: 100%;
    opacity: 0;
}







#ouibounce-modal {
    font-family: 'Open Sans', sans-serif;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

    #ouibounce-modal .underlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        -webkit-animation: fadein 0.5s;
        animation: fadein 0.5s;
    }

    #ouibounce-modal .modal {
        background-color: rgba(7,135,206,.9);
        z-index: 1;
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 4px;
        -webkit-animation: popin 0.3s;
        animation: popin 0.3s;
        text-align: center;
        color: #fff;
        font-size: 1.3em;
        font-weight: bold;
        line-height: 1.5em;
    }

    #ouibounce-modal .modal-body {
        padding: 20px 35px;
        font-size: 0.9em;
        position: absolute;
        top: 30%;
        width: 100%;
    }

        #ouibounce-modal .modal-body .in-modal {
            border-radius: .2em;
            display:inline-block;
            padding:2em;
        }

    #ouibounce-modal p {
        font-size:2em;
    }

    #ouibounce-modal .modal-footer {
        text-align: center;
        width: 100%;
        color: #fff;
    }

        #ouibounce-modal .modal-footer p {
            text-transform: capitalize;
            cursor: pointer;
            display: inline;
            border-bottom: 1px solid #fff;
            color: #fff;
            font-size:1em;
        }

@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-webkit-keyframes popin {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  85% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-ms-keyframes popin {
  0% {
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  85% {
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes popin {
  0% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  85% {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}