/*
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
    border-style: none;
    border-color: inherit;
    border-width: 0;
    margin: 0;
    padding: 0;
    font-size: small;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{
    display: block;
}

ol, ul
{
    list-style: none;
    margin: 0;
    /*padding: 0;*/
}

blockquote, q
{
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after
    {
        content: '';
        content: none;
    }

table
{
    border-collapse: collapse;
    border-spacing: 0;
}
/* start editing from here */
a
{
    text-decoration: none;
}

.txt-rt
{
    text-align: right;
}
/* text align right */
.txt-lt
{
    text-align: left;
}
/* text align left */
.txt-center
{
    text-align: center;
}
/* text align center */
.float-rt
{
    float: right;
}
/* float right */
.float-lt
{
    float: left;
}
/* float left */
.clear
{
    clear: both;
}
/* clear float */
.pos-relative
{
    position: relative;
}
/* Position Relative */
.pos-absolute
{
    position: absolute;
}
/* Position Absolute */
.vertical-base
{
    vertical-align: baseline;
}
/* vertical align baseline */
.vertical-top
{
    vertical-align: top;
}
/* vertical align top */
.underline
{
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    margin: 0 0 20px 0;
}
/* Add 5px bottom padding and a underline */
nav.vertical ul li
{
    display: block;
}
/* vertical menu */
nav.horizontal ul li
{
    display: inline-block;
}
/* horizontal menu */
img
{
    max-width: 100%;
}
/*end reset*/
body
{
    font-family: 'Open Sans', sans-serif;
    background: #E7EAEC;
}

.menu
{
    /*margin-top: 2%;*/
    float: left;
}

.img img
{
    width: 100%;
}

.logo h1
{
    font-size: 1.6em;
    font-family: 'Oswald', sans-serif;
    margin-top: 3px;
    color: #3889CF;
    letter-spacing: 2px;
}

    .logo h1 a:hover
    {
        text-decoration: none;
        color: none;
    }

.header-bg
{
    background: #fff;
    padding: 1% 0;
    box-shadow: 0px 1px 5px #D1D1D1;
    -webkit-box-shadow: 0px 1px 5px #D1D1D1;
    -moz-box-shadow: 0px 1px 5px #D1D1D1;
    -o-box-shadow: 0px 1px 5px #D1D1D1;
    -ms-box-shadow: 0px 1px 5px #D1D1D1;
}

.h_right
{
    position: relative;
    float: left;
    /*float chnges right to left*/
}

.menu
{
    float: left;
}

    .menu li
    {
        float: left;
        display: block;
        padding: 0px;
    }

        .menu li.active a, .menu li a:hover
        {
            color: #333;
            text-decoration: none;
        }

        .menu li a
        {
            color: #777;
            text-transform: uppercase;
            font-family: 'Open Sans', sans-serif;
            padding: 0px 10px;
            font-weight: 600;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .menu li.signup a
        {
            color: #3889CF;
            text-transform: uppercase;
            font-family: 'Open Sans', sans-serif;
            font-weight: 600;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

            .menu li.signup a:hover
            {
                color: #fff;
                background: #3889CF;
                box-shadow: 1px 1px 2px #333;
                -webkit-box-shadow: 1px 1px 2px #333;
                -moz-box-shadow: 1px 1px 2px #333;
                -o-box-shadow: 1px 1px 2px #333;
                -ms-box-shadow: 1px 1px 2px #333;
                border-radius: 3px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                -o-border-radius: 3px;
                -ms-border-radius: 3px;
            }

        .menu li.login a
        {
            color: #3889CF;
            text-transform: uppercase;
            font-family: 'Open Sans', sans-serif;
            font-weight: 600;
            margin-top: -4px;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

            .menu li.login a:hover, .menu li.login.active a
            {
                color: #fff;
                background: #3889CF;
                border-radius: 3px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                -o-border-radius: 3px;
                -ms-border-radius: 3px;
            }
/*-- start-smartphone_nav --*/
.nav
{
    display: none;
}

.nav-item
{
    float: left;
    *display: inline;
    zoom: 1;
}

    .nav-item a
    {
        display: block;
    }

        .nav-item a:hover
        {
            background: #C9C9C9;
            color: #FFFFFF;
            text-decoration: none;
        }

.nav-mobile
{
    display: none;
    cursor: pointer;
    position: absolute;
    top: -51px;
    right: 15px;
    background: url(../images/nav_icon.png) 60% 60% no-repeat;
    height: 35px;
    width: 35px;
}

.nav-mobile
{
    display: block;
}

.nav
{
    width: 100%;
}

.nav-list
{
    display: none;
    padding: 20px;
    float: left;
    font-weight: 400;
    background: #D5D7DA;
    font-family: 'Open Sans', sans-serif;
    padding: 20px;
    text-transform: uppercase;
    color: #5A5959;
    -webkit-transition: color .2s linear,background .2s linear;
    -moz-transition: color .2s linear,background .2s linear;
    -o-transition: color .2s linear,background .2s linear;
    transition: color .2s linear,background .2s linear;
    font-size: 0.8725em;
    width: 100%;
    /*  padding & float were added*/
}

.nav-item
{
    width: 100%;
    float: none;
}

    .nav-item a
    {
        /*font-weight: 400;
        background: #D5D7DA;
        font-family: 'Open Sans', sans-serif;
        padding: 10px;
        text-transform: uppercase;
        color: #5A5959;
        -webkit-transition: color .2s linear,background .2s linear;
        -moz-transition: color .2s linear,background .2s linear;
        -o-transition: color .2s linear,background .2s linear;
        transition: color .2s linear,background .2s linear;
        font-size: 0.8725em;*/
    }

.nav-inner
{
    display: none;
}

.nav-active, .nav-active-inner .nav-inner
{
    display: block;
}

a#boxclose:hover
{
    background: none;
    box-shadow: none;
}

#body label i a:hover
{
    background: none;
}
/* start login_box */
.login_box
{
    display: block;
    float: right;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    border-radius: 0px 9px 0px 0px;
    cursor: pointer;
}

    .login_box:hover
    {
    }

    .login_box p
    {
        float: left;
    }

        .login_box p a.signup
        {
            color: #5d5d5d;
            font-size: 0.8em;
            padding-right: 10px;
            border-right: 1px solid #888;
        }
/*-------LOGIN STARTS HERE -------*/
#loginContainer
{
    position: relative;
    float: right;
}
/* Login Button */
#loginButton
{
    display: inline-block;
    position: relative;
    z-index: 30;
    cursor: pointer;
}
    /* Login Button Text */
    #loginButton span
    {
        padding: 10px 7px;
        display: block;
    }
/* Login Box */
#loginBox
{
    position: absolute;
    top: 63px;
    right: 0px;
    display: none;
    z-index: 29;
}
/* Login Form */
#loginForm
{
    float: right;
    width: 300px;
    background: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
}

    #loginForm fieldset
    {
        margin: 0 0 10px 0;
        display: block;
        border: 0;
        padding: 0;
    }

fieldset#body
{
    padding: 10px 20px 20px;
    margin: 0;
}

#loginForm #checkbox
{
    width: auto;
    margin: 1px 6px 0 0;
    float: left;
    padding: 0;
    border: 0;
    *margin: -3px 9px 0 0; /* IE7 Fix */
}

#body label
{
    color: #3a454d;
    margin: 9px 0 0 0;
    display: block;
    float: left;
}

#loginForm #body fieldset label
{
    display: block;
    float: none;
    margin: 0 0 6px 0;
}

#body label i a
{
    font-size: .82355em;
    color: #686666;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    #body label i a:hover
    {
        color: rgba(122, 247, 31, 0.63);
        box-shadow: none;
    }
/* Default Input */
#loginForm input
{
    width: 100%;
    border: 1px solid #4886C9;
    color: #000;
    padding: 8px 8px;
    font-size: 0.85em;
    font-family: 'Open Sans', sans-serif;
    margin: 1em 0 1.5em 0px;
    display: block;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
}

    #loginForm input[type="submit"]
    {
        background: #4886C9;
        color: #fff;
        width: 30%;
        display: block;
        float: left;
        padding: 8px 8px;
        font-size: 0.85em;
        font-family: 'Open Sans', sans-serif;
        margin: 1em 0 1.5em 0px;
        display: block;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

#loginForm #login:hover
{
    color: rgba(113, 183, 62, 0.63);
}
/* Sign In Button */
#loginForm #login
{
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    width: auto;
    float: left;
    background: #3889CF;
    color: #fff;
    font-size: 0.9em;
    padding: 10px 18px;
    border: none;
    margin: 0 12px 0 0;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#loginForm input[type="submit"]:hover
{
    color: rgba(113, 183, 62, 0.63);
}
/* Forgot your password */
#loginForm span
{
    display: block;
    padding: 0px 15px 15px 15px;
}

    #loginForm span a
    {
        color: #3a454d;
        font-size: 0.8em;
    }

        #loginForm span a:hover
        {
            text-decoration: underline;
        }

input:focus
{
    outline: none;
}

.menu li.register a:hover, .menu li.register.active a
{
    color: #fff;
    background: #3889CF;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
}
/*end-login-box*/
/*--- button ---*/
.button
{
    margin: 10% 0 0;
}

    .button a input[type="submit"]
    {
        font-family: 'Open Sans', sans-serif;
        font-size: 1.2em;
        color: #F5ECE7;
        background: none;
        outline: none;
        padding: 15px 50px;
        border: 2px solid #F5ECE7;
        border-radius: 2em;
        cursor: pointer;
        font-weight: 600;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

        .button a input[type="submit"]:hover
        {
            color: #F5A87C;
            border: 2px solid #F5A87C;
        }

.menu img
{
    display: block;
}

#loginBox::before
{
    content: '';
    position: absolute;
    top: -9px;
    right: 42px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-bottom: 10px solid #FFFFFF;
    border-right: 10px solid transparent;
}

/* start register_box */
.register_box
{
    display: block;
    float: right;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    border-radius: 0px 9px 0px 0px;
    cursor: pointer;
}

.menu li.register a
{
    color: #3889CF;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    margin-top: -6px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.register_box:hover
{
}

.register_box p
{
    float: left;
}

    .register_box p a.signup
    {
        color: #5d5d5d;
        font-size: 0.8em;
        padding-right: 10px;
        border-right: 1px solid #888;
    }

a.popup-with-zoom-anim.jp-video-play-icon img
{
    position: absolute;
    top: 268px;
    right: 346px;
    width: 48px;
}
/*---start-feartures-grids----*/
.feature-grid
{
    float: left;
    margin-bottom: 5%;
}

    .feature-grid:nth-child(2), .feature-grid:nth-child(4), .feature-grid:nth-child(6)
    {
        margin-right: 0;
    }

.feature-grid-left
{
    width: 13%;
    float: left;
    margin-top: 0.3em;
}

    .feature-grid-left span
    {
        font-family: 'Open Sans', sans-serif;
        width: 64px;
        height: 64px;
        display: inline-block;
    }

.icon1 span
{
    background: url(../images/icons.png) no-repeat -6px 0px;
}

.icon2 span
{
    background: url(../images/icons.png) no-repeat -328px 0px;
}

.icon3 span
{
    background: url(../images/icons.png) no-repeat -268px 0px;
}

.icon4 span
{
    background: url(../images/icons.png) no-repeat -74px 0px;
}

.icon5 span
{
    background: url(../images/icons.png) no-repeat -140px 0px;
}

.icon6 span
{
    background: url(../images/icons.png) no-repeat -204px 0px;
}

.feature-grid-right
{
    width: 84%;
    float: right;
}

    .feature-grid-right h2
    {
        font-family: 'Open Sans', sans-serif;
        font-size: 1.8em;
        color: #3D3D3D;
        font-weight: 300;
        line-height: 1.5em;
        margin: 0px 0px 0.2em 0;
        display: block;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
    }

    .feature-grid-right p
    {
        font-family: 'Open Sans', sans-serif;
        color: #6B6A6A;
        line-height: 1.9em;
        width: 90%;
    }

.content-feature-grids
{
    border-bottom: 1px solid #eee;
    padding: 8% 0 5%;
}

    .content-feature-grids h3
    {
        color: #3D3D3D;
        font-size: 2.5em;
        font-family: 'Open Sans', sans-serif;
        text-align: center;
    }

    .content-feature-grids p
    {
        color: #3D3D3D;
        font-size: 1.2em;
        font-family: 'Open Sans', sans-serif;
        text-align: center;
        margin: 0 0 6%;
        font-weight: 300;
    }

div.feature-grid-right p
{
    text-align: left;
    font-size: 1em;
    font-weight: 300;
}
/*---//End-feartures-grids----*/
#toTop
{
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
    overflow: hidden;
    width: 44px;
    height: 44px;
    border: none;
    text-indent: 100%;
    background: url(../images/top_move.png) no-repeat right top;
}
/*--- pricing ---*/
div#prices h3
{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: x-large;
    text-align: center;
    color: #3D3D3D;
    text-decoration: underline;
}

/*div#prices p
{
    font-family: 'Open Sans', sans-serif;
    font-size: medium;
    text-align: left;
    margin-bottom: 5%;
    color: #3D3D3D;
    font-weight: 300;
}*/

.span3
{
    margin: 1% 2% 0 0;
    float: left;
}

    .span3 i
    {
        position: relative;
        font-size: 1.1em;
        color: #fff;
        background: #3889CF;
        padding: 13px 28px;
        font-style: normal;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

        .span3 i:hover
        {
            background: #49CBCD;
            color: #333;
        }

    .span3 a:hover
    {
        text-decoration: none;
    }
/*faq*/
div.faq-grid h5
{
    font-size: 1.3em;
    font-family: 'Open Sans', sans-serif;
    color: #3D3D3D;
    line-height: 1.9em;
    font-weight: 500;
}

div.faq-grid p
{
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
    color: #3D3D3D;
    line-height: 1.9em;
    text-align: left;
    font-weight: 300;
}
/* contact */
.contact
{
    padding: 5% 0%;
    background: #252E30;
}

.contact-left
{
    float: left;
}

    .contact-left h3
    {
        color: #fff;
        font-size: 2em;
    }

    .contact-left p.style
    {
        font-size: 1em;
        color: #999;
        line-height: 1.9em;
        margin: 3% 0;
    }

.contact-right
{
    float: left;
    width: 100%;
}

.get-intouch-left-address p.style1
{
    color: #f5f5f5;
    margin-top: 2%;
}

.get-intouch-left-address p.style2
{
    color: #f5f5f5;
}

.get-intouch-left-address p
{
    color: #999999;
    font-size: 1em;
    line-height: 2.3em;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}

    .get-intouch-left-address p a
    {
        color: #999999;
        font-size: 0.95em;
        line-height: 2.3em;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
    }

.image img
{
    border-radius: 2px;
}

.get-intouch-left-address p a:hover
{
    color: #fff;
    text-decoration: none;
}

.form
{
    float: left;
    width: 100%;
    margin: 2% 4% 0 0;
    display: block;
}

.contact input[type="text"], .contact textarea
{
    padding: 14px;
    width: 100%;
    margin: 6% 2% 0 0;
    background: #4B5456;
    outline: none;
    color: #fff;
    font-size: 0.92355em;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    font-family: 'Open Sans', sans-serif;
    border: 1px solid #4B5456;
    -webkit-appearance: none;
}

    .contact input[type="text"]:nth-child(2)
    {
        margin-right: 0em;
    }

.contact form textarea
{
    resize: none;
    height: 180px;
}

.contact input[type="submit"]
{
    padding: 14px 20px;
    background: #191F21;
    outline: none;
    color: #fff;
    font-size: 0.82355em;
    font-style: normal;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    font-family: 'Open Sans', sans-serif;
    border: none;
    -webkit-appearance: none;
    margin-top: 4%;
    cursor: pointer;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}

    .contact input[type="submit"]:hover
    {
        background: #3889CF;
        color: #fff;
    }
/*--- footer-bottom ---*/
.footer
{
    background: #191F21;
    padding: 2% 0;
}

.copy-right
{
    text-align: center;
    margin-right: 15px;
}

    .copy-right p
    {
        font-size: 0.92355em;
        color: #999999;
        margin: 0;
    }

        .copy-right p a
        {
            color: #3889CF;
            -webkit-transition: all 0.5s ease-out;
            -moz-transition: all 0.5s ease-out;
            -ms-transition: all 0.5s ease-out;
            -o-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
        }

            .copy-right p a:hover
            {
                color: #fff;
                text-decoration: none;
            }

.left
{
    float: left;
}

.CenterCode p
{
    float: left;
    font-family: Verdana;
    font-size: 12px;
    color: #9a1010;
    padding: 0 0 0 0;
}

.webpage p
{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: small;
    text-align: justify;
    padding: 10px;
}

.table td
{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: small;
    text-align: justify;
    padding: 10px;
}

.right
{
    float: right;
}

/*--media-queries--*/
@media only screen and (max-width: 1366px)
{
    .wrap
    {
        width: 95%;
    }

    a.popup-with-zoom-anim.jp-video-play-icon img
    {
        top: 194px;
    }
}

@media only screen and (max-width: 1280px)
{
    .wrap
    {
        width: 95%;
    }
}

@media only screen and (max-width: 1024px)
{
    .wrap
    {
        width: 95%;
    }

    .menu li a
    {
        padding: 0px 13px;
        font-size: 0.8755em;
    }

    .h_right
    {
        margin-top: 6px;
    }

    li.signup.active
    {
        margin-top: -20px;
    }

    .content-feature-grids h3, div#prices h3
    {
        font-size: 1.7em;
    }

    .contact-left h3
    {
        font-size: 1.4em;
    }

    .feature-grid-right h2
    {
        font-size: 1.4em;
    }

    div.feature-grid-right p
    {
        font-size: 0.8755em;
    }

    div.faq-grid h5
    {
        font-size: 1.1em;
    }

    div.faq-grid p
    {
        font-size: 0.8755em;
    }

    .contact-left p.style
    {
        font-size: 0.8755em;
    }

    .get-intouch-left-address p
    {
        font-size: 0.8755em;
    }

    .menu_box_list li
    {
        width: 92%;
    }

    .menu_box_list h1
    {
        font-size: 1.2em;
    }

    a#boxclose
    {
        margin: -20px -172px 0 0;
    }

    .right_bt
    {
        margin-top: 13%;
    }

    #loginBox
    {
        top: 53px;
    }

    .menu_box_list
    {
        margin: 10% auto 0;
    }

        .menu_box_list::before
        {
            top: 46px;
            right: 116px;
        }

    a#boxclose
    {
        margin: 56px -172px 0 0;
    }

    #registerBox
    {
        top: 51px;
    }

    a.popup-with-zoom-anim.jp-video-play-icon img
    {
        top: 135px;
        right: 184px;
    }
}

@media only screen and (max-width: 768px)
{
    .wrap
    {
        width: 95%;
    }

    .left
    {
        display: none;
    }

    nav.nav
    {
        display: block;
    }

    .h_right
    {
        width: 100%;
    }

    div.feature-grid-right p
    {
        margin-bottom: 1%;
    }

    div.faq-grid p
    {
        margin-bottom: 3%;
    }

    .contact input[type="text"], .contact textarea
    {
        margin: 2% 2% 0 0;
    }

    .nav-mobile
    {
        top: -43px;
    }

    li.signup.active
    {
        display: block;
    }

    .right
    {
        margin: -42px 100px 0 0px;
    }

    .menu_box_list
    {
        margin: 2.3% auto 0;
    }

        .menu_box_list::before
        {
            top: 6px;
            right: 218px;
        }

    a#boxclose
    {
        margin: 20px -172px 0 0;
    }

    a.popup-with-zoom-anim.jp-video-play-icon img
    {
        top: 89px;
        right: 131px;
    }
}

@media only screen and (max-width: 640px)
{
    .wrap
    {
        width: 95%;
    }

    div.logo
    {
        margin-top: 3px;
    }

    .nav-mobile
    {
        top: -56px;
    }

    .nav-mobile
    {
        top: -43px;
    }

    a.popup-with-zoom-anim.jp-video-play-icon img
    {
        top: 89px;
        right: 67px;
    }
}

@media only screen and (max-width: 480px)
{
    .wrap
    {
        width: 95%;
    }

    .content-feature-grids h3, div#prices h3
    {
        font-size: 1.2em;
    }

    .content-feature-grids p
    {
        font-size: 0.9em;
    }

    .feature-grid-right h2, div.faq-grid h5, .contact-left h3
    {
        font-size: 1em;
    }

    /*div#prices p
    {
        font-size: 0.8755em;
    }*/

    div.faq-grid p, .contact-left p.style, div.feature-grid-right p, .get-intouch-left-address p
    {
        font-size: 0.82355em;
    }

    .contact input[type="text"], .contact textarea
    {
        padding: 6px 14px;
    }

    .contact form textarea
    {
        height: 120px;
    }

    .feature-grid-right
    {
        width: 80%;
    }

    .menu_box_list::before
    {
        top: 3px;
    }

    a#boxclose
    {
        margin: 1px -172px 0 0;
    }

    .menu_box_list
    {
        margin: 2.9% auto 0;
    }

    #registerBox
    {
        right: -134px;
        top: 54px;
    }

        #registerBox::before
        {
            right: 169px;
        }

    a.popup-with-zoom-anim.jp-video-play-icon img
    {
        top: 26px;
        right: 39px;
    }
}

@media only screen and (max-width: 320px)
{
    .wrap
    {
        width: 95%;
    }

    .feature-grid-right
    {
        width: 71%;
    }

    .right
    {
        margin: -42px 25px 0 0px;
    }

    .right_bt input[type="submit"]
    {
        padding: 6px 0px;
        font-size: 0.8755em;
    }

    #loginButton span
    {
        padding: 6px 0px;
        font-size: 0.8755em;
    }

    .menu
    {
        margin: 4% 0 0 -21%;
    }

    li.signup.active
    {
        margin-top: -14px;
    }

    #loginForm
    {
        width: 232px;
    }

    #registerForm
    {
        width: 232px;
    }

    #registerButton span
    {
        padding: 6px 0px;
        font-size: 0.8755em;
    }

    .menu li.register a
    {
        margin-right: 17px;
    }

    #registerForm #login
    {
        margin: 0 12px 11px 0;
    }

    #registerBox
    {
        right: -58px;
        top: 47px;
    }

        #registerBox::before
        {
            right: 101px;
        }

    #loginBox
    {
        top: 47px;
    }

        #loginBox::before
        {
            right: 20px;
        }

    #loginForm input[type="submit"]
    {
        width: 37%;
        margin-top: 0px;
    }

    #body label
    {
        margin: 0px 0 0 0;
    }

    #registerForm fieldset
    {
        margin: 0 0 0px 0;
    }

    .menu li.login a
    {
        margin-top: -6px;
        margin-left: -17px;
    }

    .menu_box_list li input
    {
        width: 81%;
    }

    .menu_box_list li.a
    {
        height: 89px;
    }
}

textarea
{
    width: 72%;
}

/*.dropdown-submenu {
    position: relative;
}*/
/*.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}*/

/*.dropdown-submenu
{
    position: static ;
}

    .dropdown-submenu .dropdown-menu
    {
        top: 0;
        left: 100%;
        margin-top: -1px;
    }*/
table, td
{
    border: 1px solid black;
}

table
{
    border-collapse: collapse;
    left: 30%;
}

.inner_content
{
    width: 100%;
    font-size: 12px !important;
}

.btnSubmit
{
    float: right;
    /*left:50%;*/
}

.btnCancel
{
    /*left:500px;*/
}

.equalcolumn.number img, .equalcolumn.number img:hover
{
    border: medium none;
    display: block;
    margin: 0;
    padding: 0;
}

.equalcolumn.number p.number_nav
{
    background-color: #0095ec;
    border: medium none;
    border-radius: 24px 24px 24px 24px;
    color: #FFFFFF;
    display: block;
    float: left;
    font: bold 30px/48px Arial;
    height: 48px;
    margin: 0 21px 0 0;
    padding: 0;
    text-align: center;
    width: 48px;
}

    .equalcolumn.number p.number_nav:hover
    {
        background-color: #50b4e6;
    }

    .equalcolumn.number p.number_nav + div
    {
        display: table;
    }

.equalcolumn.number ul li
{
    margin: 0;
}
/*-------------------------------------- css for table or grid --------------------------------------*/
.TFtable
{
    width: 80%;
    border-collapse: collapse;
}

    .TFtable td
    {
        padding: 3px;
        border: #4e95f4 1px solid;
    }
    /* provide some minimal visual accomodation for IE8 and below */
    .TFtable tr
    {
        background: #b8d1f3;
    }
        /*  Define the background color for all the ODD background rows  */
        .TFtable tr:nth-child(odd)
        {
            background: #b8d1f3;
        }
        /*  Define the background color for all the EVEN background rows  */
        .TFtable tr:nth-child(even)
        {
            background: #dae5f4;
        }

/*KeyNote Details CSS*/
.work-list
{
    padding: 60px 0px;
}

    .work-list a .featured-img
    {
        width: 100%;
    }

        .work-list a .featured-img img
        {
            width: 100%;
            height: 200px;
            float: left;
            position: relative;
        }

        .work-list a .featured-img a p
        {
            width: 100%;
            height: 200px;
            float: left;
            position: relative;
        }

    .work-list a h3
    {
        text-align: center;
        padding: 15px 0px;
        font-size: 15px;
        float: left;
        width: 100%;
        font-weight: 600;
        background: #96cefc;
        color: #fff;
        margin: 0px;
        font-family: 'Roboto', sans-serif;
    }

    .work-list a:hover .image-hover
    {
        display: block;
        animation: 0.4s ease-in 0s normal none 1 running imagehover;
    }

.work-space
{
    margin: 20px 0px;
    top: 2px;
    left: 0px;
}


/*KeyNote Details CSS*/
/*.anny p
{
    font-family: 'Times New Roman';
    background-color: gray;
    color: #fff;
    font-size: 18px;
}*/
.StyleTable td
{
    padding: 5px;
}

.step_box
{
    border: 1.0px solid rgb(204, 204, 204);
    border-radius: 10.0px 10.0px 10.0px 10.0px;
}

    .step_box:hover, #selected_step_box, .QuickStartLong:hover
    {
        background: rgb(184, 225, 252);
    }