/*! (AppTale - Landing Page) 2014-12-11 */
body {
    font-family: 'Open Sans', sans-serif;
    /*font-family: 'Roboto Condensed',sans-serif;*/
    font-size: 15px;
    line-height: 25px;
    font-weight: 400;
    color: #48575e;
    word-spacing: 2px;

     
}

a {
    /*text-decoration: none !important;*/
    color: #f45555;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

    a:hover {
        color: #3d4a50;
    }

p {
    margin-bottom: 25px;
}


.EN_font {

    font-family: 'Roboto Condensed', sans-serif !important;
}

.EN_font2 {
    font-family: 'Open Sans', sans-serif !important;
}
.filled_values {
    color:#263a7f !important;
}


blockquote {
    font-size: 17px;
    line-height: 26px;
    font-weight: 300;
    border-left: 3px solid #1fbae8;
}

.stepsExp {
font-size: 28px; display: block; margin-top: 45px; height: 31px;  word-spacing:4px;font-family:"Roboto Condensed",sans-serif;
 
}

.stepsExpSub {
font-size: 22px; display: block; margin-top: 45px; height: 31px;  word-spacing:4px;font-family:"Roboto Condensed",sans-serif;
 
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #3d4a50;
    font-family: 'Roboto Condensed', sans-serif;
}

.mb250 {
    margin-bottom: 250px !important;
}

.mb245 {
    margin-bottom: 245px !important;
}

.mb240 {
    margin-bottom: 240px !important;
}

.mb235 {
    margin-bottom: 235px !important;
}

.mb230 {
    margin-bottom: 230px !important;
}

.mb225 {
    margin-bottom: 225px !important;
}

.mb220 {
    margin-bottom: 220px !important;
}

.mb215 {
    margin-bottom: 215px !important;
}

.mb210 {
    margin-bottom: 210px !important;
}

.mb205 {
    margin-bottom: 205px !important;
}

.mb200 {
    margin-bottom: 200px !important;
}

.mb195 {
    margin-bottom: 195px !important;
}

.mb190 {
    margin-bottom: 190px !important;
}

.mb185 {
    margin-bottom: 185px !important;
}

.mb180 {
    margin-bottom: 180px !important;
}

.mb175 {
    margin-bottom: 175px !important;
}

.mb170 {
    margin-bottom: 170px !important;
}

.mb165 {
    margin-bottom: 165px !important;
}

.mb160 {
    margin-bottom: 160px !important;
}

.mb155 {
    margin-bottom: 155px !important;
}

.mb150 {
    margin-bottom: 150px !important;
}

.mb145 {
    margin-bottom: 145px !important;
}

.mb140 {
    margin-bottom: 140px !important;
}

.mb135 {
    margin-bottom: 135px !important;
}

.mb130 {
    margin-bottom: 130px !important;
}

.mb125 {
    margin-bottom: 125px !important;
}

.mb120 {
    margin-bottom: 120px !important;
}

.mb115 {
    margin-bottom: 115px !important;
}

.mb110 {
    margin-bottom: 110px !important;
}

.mb105 {
    margin-bottom: 105px !important;
}

.mb100 {
    margin-bottom: 100px !important;
}

.mb95 {
    margin-bottom: 95px !important;
}

.mb90 {
    margin-bottom: 90px !important;
}

.mb85 {
    margin-bottom: 85px !important;
}

.mb80 {
    margin-bottom: 80px !important;
}

.mb75 {
    margin-bottom: 75px !important;
}

.mb70 {
    margin-bottom: 70px !important;
}

.mb65 {
    margin-bottom: 65px !important;
}

.mb60 {
    margin-bottom: 60px !important;
}

.mb55 {
    margin-bottom: 55px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.mb45 {
    margin-bottom: 45px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mb35 {
    margin-bottom: 35px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb25 {
    margin-bottom: 25px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb15 {
    margin-bottom: 15px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb5 {
    margin-bottom: 5px !important;
}

.sec-title {
    text-align: center;
    margin-bottom: 70px;
    font-size:18px;
}

    .sec-title h3 {
        font-family: 'Roboto Condensed', sans-serif;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 1px;
        display: inline-block;
        position: relative;
        color: #3d4a50;
        margin-top: 0;
        margin-bottom: 19px;
    }

        .sec-title h3:after {
            content: '';
            width: 112px;
            height: 2px;
           /* background: #1fbae8;*/
            position: absolute;
            bottom: -15px;
            left: 50%;
            margin-left: -55px;
        }

    .sec-title p {
        max-width: 500px;
        margin: 0 auto;
    }

.owl-theme .owl-controls .owl-page span {
    width: 50px;
    height: 2px;
    border-radius: 0;
    background: #d3dadb;
    margin: 5px 0;
}

.owl-theme .owl-controls .owl-page.active span {
    background: #1fbae8;
}

.form-control {
    height: auto;
    border-color: #e3e5e5;
    border-style: solid;
    border-width: 1px;
    background-color: transparent;
    box-shadow: none !important;
    padding:5px;
    border-radius: 2px;
    position: relative;
    top: -2px;
    -webkit-transition: border-color 0.3s;
    transition: border-color 0.3s;
    color: #8b9599;
    background-color:#fff;
    color:#48575e;
    font-weight:600;
    font-family: 'Open Sans', sans-serif;
}

    .form-control:focus,
    .form-control:active {
        border-color: #1fbae8;
        outline: none !important;
    }

.thin-txt {
    font-weight: 200 !important;
}

.txt-al {
    text-align: left !important;
}

.txt-ar {
    text-align: right !important;
}

.txt-ac {
    text-align: center !important;
}

.animatebg {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.bgtransparent {
    background: transparent !important;
}

.videobg .bgtransparent {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.bgimgnan {
    background-image: none !important;
}

.bgwhite {
    background-color: #fff !important;
}

.at-home,
.at-features,
.at-features-ext,
.at-features-ot,
.at-gallery,
.at-testimonials,
.at-pricing,
.at-funfact,
.at-clients,
.at-subscribe,
.at-contact,
footer {
    overflow: hidden;
}

.nicescroll-rails {
    background: rgba(0, 0, 0, 0.1);
    width: 5px;
    z-index: 9999 !important;
}

    .nicescroll-rails:hover {
        opacity: 1 !important;
    }

    .nicescroll-rails > div {
        background: #1fbae8 !important;
    }

video.bgvid {
    position: fixed;
    right: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background: url(../video/Using-Smartphone.png) no-repeat;
    background-size: cover;
}

.tw700 {
    font-weight: 700 !important;
}

.at-highlight {
    color: #1fbae8 !important;
}

.at-title {
    font-weight: 300;
    text-transform: uppercase;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 10px;
    color: #3d4a50;
    font-size: 22px;
}

.btn {
    /*font-family: 'Roboto Condensed', sans-serif;*/
    border-width: 2px;
    font-weight: 500;
    letter-spacing: 1px;
    border-radius: 4px;
    -webkit-transition: color 0.3s, background-color 0.3s, border-color 0.3s;
    transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}

    .btn.btn-lg {
        padding: 9px 25px;
    }

    .btn.btn-o-white {
        border-radius: 2px;
        border-color: #fff;
        background-color: #fff;
        color: #1fbae8;
    }

        .btn.btn-o-white:hover {
            background-color: transparent;
            color: #fff;
        }

    .btn.btn-o-main {
        border-radius: 2px;
        color: #fff;
        background-color: #1fbae8;
        border-color: #1fbae8;
    }

        .btn.btn-o-main:hover {
            background-color: transparent;
            color: #1fbae8;
        }

    .btn.btn-o-dark {
        border-radius: 2px;
        color: #fff;
        background-color: #3d4a50;
        border-color: #3d4a50;
    }

        .btn.btn-o-dark:hover {
            background-color: transparent;
            color: #3d4a50;
        }

    .btn.btn-main {
        border-radius: 2px;
        color: #fff;
        background-color: #1fbae8;
        border-color: #1fbae8;
    }

        .btn.btn-main:hover {
            background-color: #1186a9;
            border-color: #1186a9;
        }

    .btn.btn-dark {
        border-radius: 2px;
        color: #fff;
        background-color: #3d4a50;
        border-color: #3d4a50;
    }

        .btn.btn-dark:hover {
            background-color: #1c2225;
            border-color: #1c2225;
        }

    .btn.btn-white {
        border-radius: 2px;
        border-color: #fff;
        background-color: #fff;
        color: #1fbae8;
    }

        .btn.btn-white:hover {
            background-color: #e6e6e6;
            border-color: #e6e6e6;
        }

header.header-navbar nav.main-nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    background-color: transparent;
    border-radius: 0;
    border-width: 0 0 1px 0;
    padding: 15px 0 15px;
    margin-bottom: 0;
}

    header.header-navbar nav.main-nav ul li {
        display: inline-block;
        float: left;
        padding: 20px 5px;
    }

        header.header-navbar nav.main-nav ul li a {
            font-family: 'Roboto Condensed', sans-serif;
            padding: 10px 0 5px 20px;
            display: block;
            font-weight: 400;
            font-size: 16px;
            line-height: 23px;
            /*letter-spacing: 1px;*/
           
             text-transform: uppercase; 
            border: 1px solid transparent;
            -webkit-transition: border-color 0.3s, color 0.3s, background 0.3s;
            transition: border-color 0.3s, color 0.3s, background 0.3s;
            border: 1px solid #fff;
            background-color:#fff;
            color:#323d42;
        }

        header.header-navbar nav.main-nav ul li > .dropdown-menu {
            padding: 0;
            border-radius: 0;
        }

            header.header-navbar nav.main-nav ul li > .dropdown-menu li {
                display: block;
                float: none;
                padding: 0;
            }

                header.header-navbar nav.main-nav ul li > .dropdown-menu li a {
                    color: #3d4a50;
                    font-size: 14px;
                    letter-spacing: 1px;
                    text-transform: none;
                    display: block;
                    width: 100%;
                    border-radius: 0;
                }

                    header.header-navbar nav.main-nav ul li > .dropdown-menu li a:hover {
                        color: #fff;
                    }

                header.header-navbar nav.main-nav ul li > .dropdown-menu li.current > a {
                    color: #fff;
                    background-color: #1fbae8;
                }

        header.header-navbar nav.main-nav ul li:hover > a,
        header.header-navbar nav.main-nav ul li.current > a {
            color: #fff;
            /*background-color: #1fbae8;*/
            border-radius: 2px;
            /*border: 1px solid #1fbae8;*/
            text-decoration:underline;
        }

header.header-navbar nav .btn {
    margin: 17px 0;
}

header.header-navbar .logo {
    display: block;
    margin: 20px 0;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    background-color: #1fbae8;
    color: #fff;
}

.at-clone {
    padding: 0 !important;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 999;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
    -webkit-transition: all 0.3s ease-in-out, opacity 0.3s;
    transition: all 0.3s ease-in-out, opacity 0.3s;
}

    .at-clone nav.main-nav {
        padding: 0 !important;
    }

        .at-clone nav.main-nav ul li {
            padding: 15px 5px !important;
        }

            .at-clone nav.main-nav ul li a {
                color: #8b9599 !important;
            }

            .at-clone nav.main-nav ul li:hover > a,
            .at-clone nav.main-nav ul li.current > a {
                border: 1px solid #1fbae8 !important;
                background: #1fbae8 !important;
                color: #fff !important;
            }

            .at-clone nav.main-nav ul li > .dropdown-menu {
                padding: 0 !important;
            }

                .at-clone nav.main-nav ul li > .dropdown-menu li {
                    display: block;
                    float: none;
                    padding: 0 !important;
                }

                    .at-clone nav.main-nav ul li > .dropdown-menu li a {
                        color: #3d4a50;
                        font-size: 14px;
                        display: block;
                        width: 100%;
                        border-radius: 0;
                    }

                        .at-clone nav.main-nav ul li > .dropdown-menu li a:hover {
                            color: #fff;
                        }

    .at-clone .logo {
        display: block;
        margin: 15px 0 !important;
    }

    .at-clone .navbar-default .navbar-toggle {
        border-color: #3d4a50;
        border-radius: 2px;
        -webkit-transition: background-color 0.3s, border-color 0.3s;
        transition: background-color 0.3s, border-color 0.3s;
    }

        .at-clone .navbar-default .navbar-toggle .icon-bar {
            background-color: #3d4a50;
            -webkit-transition: background-color 0.3s;
            transition: background-color 0.3s;
        }

        .at-clone .navbar-default .navbar-toggle:hover,
        .at-clone .navbar-default .navbar-toggle:active,
        .at-clone .navbar-default .navbar-toggle:focus {
            background-color: #1fbae8;
            border-color: #1fbae8;
        }

            .at-clone .navbar-default .navbar-toggle:hover .icon-bar,
            .at-clone .navbar-default .navbar-toggle:active .icon-bar,
            .at-clone .navbar-default .navbar-toggle:focus .icon-bar {
                background-color: #fff;
            }

    .at-clone .navbar-default .navbar-collapse,
    .at-clone .navbar-default .navbar-form {
        border-color: #3d4a50;
    }

.at-stick {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
}

.navbar-default .navbar-toggle {
    border-color: #fff;
    border-radius: 2px;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

    .navbar-default .navbar-toggle .icon-bar {
        /*background-color: #fff;*/
    }

    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:active,
    .navbar-default .navbar-toggle:focus {
        background-color: #fff;
    }

        .navbar-default .navbar-toggle:hover .icon-bar,
        .navbar-default .navbar-toggle:active .icon-bar,
        .navbar-default .navbar-toggle:focus .icon-bar {
            background-color: #1fbae8;
        }

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: rgba(255, 255, 255, 0.3);
    padding: 0;
}

.at-page-header {
    background-image: url(../images/17.jpg);
    background-position: top center;
    background-attachment: fixed;
    background-color: #1fbae8;
    padding: 0;
    margin: 0;
    border-width: 0;
}

    .at-page-header .at-page-title {
        font-family: 'Roboto Condensed', sans-serif;
        text-align: center;
        font-size: 50px;
        line-height: 70px;
        letter-spacing: 5px;
        word-spacing: 10px;
        font-weight: 300;
        color: #fff;
        text-transform: uppercase;
        padding: 50px 0 100px;
    }

.at-home {
   /* background-image: url(../images/17.png);*/
    background-position: top center;
    background-attachment: fixed;
    /*background-color: #1fbae8;*/
}

    .at-home .hero-unit {
        color: #fff;
        padding-top: 90px;
    }

        .at-home .hero-unit .main-title {
            max-width: 100%;
            text-align: center;
            margin: 10px auto 0;
        }

            .at-home .hero-unit .main-title h3 {
                font-family: 'Roboto Condensed', sans-serif;
                text-transform: uppercase;
                font-size: 55px;
                line-height: 70px;
                font-weight: 300;
                letter-spacing: 5px;
                color: #fff;
            }

                .at-home .hero-unit .main-title h3 strong {
                    font-weight: 700;
                }

            .at-home .hero-unit .main-title p {
                margin: 0 auto 30px;
                max-width: 700px;
                font-size: 20px;
                line-height: 33px;
                font-weight: 300;
                letter-spacing: 1px;
            }

            .at-home .hero-unit .main-title a.btn {
                margin: 0 5px;
            }

            .at-home .hero-unit .main-title .app-mockup {
                margin-top: 55px;
            }

            .at-home .hero-unit .main-title img.img-responsive {
                display: inline-block;
                *display: inline;
                *zoom: 1;
            }

        .at-home .hero-unit .app-details {
            max-width: 100%;
            margin: 15px auto 0;
        }

            .at-home .hero-unit .app-details .app-mockup {
                width: 40%;
                float: left;
                padding-right: 15px;
            }

            .at-home .hero-unit .app-details .app-desc {
                width: 60%;
                float: right;
                padding-left: 15px;
                padding-top: 50px;
                font-weight: 400;
            }

                .at-home .hero-unit .app-details .app-desc h4.title {
                    font-size: 30px;
                    font-weight: 600;
                    text-transform: uppercase;
                }

                .at-home .hero-unit .app-details .app-desc span.sub-title {
                    font-size: 20px;
                    font-weight: 300;
                    margin-bottom: 20px;
                    display: block;
                }

                .at-home .hero-unit .app-details .app-desc p {
                    margin-bottom: 25px;
                }

                .at-home .hero-unit .app-details .app-desc .appstore-buttons a {
                    margin-right: 20px;
                }

.at-features {
    padding: 70px 0;
}

.feature {
   /* border: 1px solid #f5f6f6;*/
    text-align: center;
    position: relative;
    /*padding: 40px 20px;*/
    padding: 30px 2px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
    -webkit-transition: border-color 0.9s;
    transition: border-color 0.9s;
}

    .feature .feature-icon {
        width: 92px;
        text-align: center;
        font-size: 40px;
        line-height: 90px;
        border-radius: 70px;
        border: 1px solid #1fbae8;
        position: relative;
        color: #1fbae8;
        -webkit-transition: color 0.6s, border-color 0.6s;
        transition: color 0.6s, border-color 0.6s;
        margin: 0 auto;
    }

    .feature h3.feature-title {
       /* font-family: 'Roboto Condensed', sans-serif;*/
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-size: medium;
        line-height: 22px;
        letter-spacing: 1px;
        position: relative;
        margin-bottom: 0;
        z-index: 9;
        top: 0;
        -webkit-transition: color 0.5s, top 0.4s;
        transition: color 0.5s, top 0.4s;
        color: #48575e;
       /* text-transform: uppercase;*/
    }

    .feature p.feature-desc {
        width: 100%;
        position: absolute;
        padding: 0 20px;
        color: #fff;
        top: 100%;
        left: 0;
        opacity: 1;
        -webkit-transition: color 0.5s, opacity 0.5s, top 0.4s;
        transition: color 0.5s, opacity 0.5s, top 0.4s;
    }

    .feature:after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background: rgba(73, 67, 69, 0.7) none repeat scroll 0 0;
        opacity: 0;
        -webkit-transition: top 0.5s, opacity 0.5s;
        transition: top 0.5s, opacity 0.5s;
    }

    .feature:hover {
        cursor: pointer;

    }

        .feature:hover .feature-icon {
            color: rgba(0, 0, 0, 0.07);
            border-color: rgba(0, 0, 0, 0.07);
            z-index: 9;
        }

        .feature:hover:after {
            top: 0;
            opacity: 1;
        }

        .feature:hover p.feature-desc {
            top: 75px;
            z-index: 9;
            opacity: 1;
            color: #fff;
        }

        .feature:hover h3.feature-title {
            top: -70px;
            color: #fff;
        }

        .feature:hover h3.feature-title .thin-txt span{
            color: #fff;
        }

        .feature h3.feature-title .thin-txt span {
            color: #606060;
            font-size:22px;
        }

        

       

.features-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .features-list li {
        width: 33.33333333%;
        float: left;
    }

        .features-list li .feature {
            border-radius: 0;
            border-right-width: 0;
            border-top-width: 0;
        }

        .features-list li:nth-child(3n) .feature {
            border-right-width: 1px;
        }

        .features-list li:last-child .feature {
            border-right-width: 1px;
        }

        .features-list li:nth-child(1) .feature,
        .features-list li:nth-child(2) .feature,
        .features-list li:nth-child(3) .feature {
            border-top-width: 1px;
        }

.at-features-ext {
    background-image: url(../images/17.jpg);
    background-position: top center;
    background-attachment: fixed;
    background-color: #000;
    padding: 100px 0;
}

.at-features-ot {
    background-image: url(../images/ot.jpg);
    background-position: top center;
    background-attachment: fixed;
    background-color: #000;
    padding: 20px 0px 100px 0px;
}

.at-features-ext .at-features-ot .at-feature-ext-img {
    margin: 10px 0 0;
}

.ext-feature {
    color: #fff;
    position: relative;
}

    .ext-feature .join-line {
        width: 1px;
        height: 50px;
        background-color: #fff;
        position: absolute;
        top: 100%;
        left: 51px;
    }

    .ext-feature .ft-icon {
        width: 102px;
        line-height: 100px;
        border-radius: 100px;
        font-size: 42px;
        text-align: center;
        background: rgba(255, 255, 255, 0);
        border: 1px solid #fff;
        color: #fff;
        float: left;
        -webkit-transition: background-color 0.3s, border-color 0.3s, color 0.3s;
        transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    }

    .ext-feature .ft-title {
        margin-left: 120px;
        font-family: 'Roboto Condensed', sans-serif;
        margin-top: 0;
        font-weight: 300;
        letter-spacing: 1px;
        color: #fff;
    }

    .ext-feature .ft-desc {
        margin-left: 120px;
    }

    .ext-feature:hover .ft-icon {
        background-color: #fff;
        color: #1fbae8;
    }

    .ext-feature.ext-feature-dark {
        color: #8b9599;
    }

        .ext-feature.ext-feature-dark .ft-icon {
            background: transparent;
            border: 1px solid #1fbae8;
            color: #1fbae8;
        }

        .ext-feature.ext-feature-dark .ft-title {
            color: #3d4a50;
        }

        .ext-feature.ext-feature-dark .join-line {
            background-color: #1fbae8;
        }

        .ext-feature.ext-feature-dark:hover .ft-icon {
            background-color: #1fbae8;
            color: #fff;
            border: 1px solid #1fbae8;
        }

.ext-featuer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .ext-featuer-list li .ext-feature {
        margin-bottom: 50px;
    }

        .ext-featuer-list li .ext-feature .ft-icon:after {
            content: '';
            height: 150px;
        }

    .ext-featuer-list li:last-child .ext-feature {
        margin-bottom: 0;
    }

        .ext-featuer-list li:last-child .ext-feature .join-line {
            height: 0 !important;
        }

.at-features-ext-2 {
    padding: 100px 0 0;
    background-color: #f7f7f7;
}



.expand_hide {
    margin-left:3px;font-family:'Open Sans',sans-serif; top: -3px; position: relative;font-size:12px;
}


.block-txt .bt-title {
    font-family: 'Roboto Condensed', sans-serif;
    color: #3d4a50;
    font-weight: 300;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.block-txt .bt-subtitle {
    font-family: 'Roboto Condensed', sans-serif;
    margin-bottom: 20px;
    font-style: italic;
    display: block;
    color: #a6aeb1;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 1px;
}

.nav-tabs > li,
.nav-pills > li {
    float: none;
    display: inline-block;
    *display: inline;
    /* ie7 fix */
    zoom: 1;
    /* hasLayout ie7 trigger */
}

    .nav-tabs > li a,
    .nav-pills > li a {
        border-width: 0 !important;
        position: static;
    }

.nav-tabs,
.nav-pills {
    text-align: center;
    border-width: 0;
}

.fade {
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
    transition: opacity 0.4s, transform 0.4s;
}

    .fade.in {
        /*opacity: 1;*/
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

ul.nav-tabs {
    margin-bottom: 50px;
}

    ul.nav-tabs li a {
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 48px;
        line-height: 48px;
        padding: 20px 50px;
        color: #3d4a50;
        border-radius: 2px;
        -webkit-transition: background-color 0.3s, color 0.3s;
        transition: background-color 0.3s, color 0.3s;
    }

        ul.nav-tabs li a:hover {
            color: #1fbae8;
            background-color: rgba(0, 0, 0, 0.05);
        }

    ul.nav-tabs li.active a {
        color: #fff;
        background-color: #1fbae8;
    }

        ul.nav-tabs li.active a:hover,
        ul.nav-tabs li.active a:focus {
            color: #fff;
            background-color: #1fbae8;
        }

.at-ext-mini-features {
    text-align: center;
    padding: 0 10px;
}

    .at-ext-mini-features .at-ext-mini-icon {
        width: 72px;
        font-size: 32px;
        line-height: 70px;
        border-radius: 70px;
        color: #1fbae8;
        border-color: #1fbae8;
        border-width: 1px;
        border-style: solid;
        margin: 0 auto 20px;
        -webkit-transition: background-color 0.3s, color 0.3s;
        transition: background-color 0.3s, color 0.3s;
    }

    .at-ext-mini-features strong {
        font-family: 'Roboto Condensed', sans-serif;
        display: block;
        color: #3d4a50;
        font-size: 20px;
        line-height: 28px;
        letter-spacing: 1px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .at-ext-mini-features:hover .at-ext-mini-icon {
        background-color: #1fbae8;
        color: #fff;
    }

.icon-list {
    list-style: none;
    padding-left: 10px;
    font-size: 14px;
    line-height: 24px;
}

    .icon-list li i {
        color: #1fbae8;
        font-size: 16px;
    }

.at-highlight-features {
    background-color: #3d4a50;
    color: #fff;
    padding: 50px 0;
}

    .at-highlight-features .at-ext-mini-features {
        text-align: center;
        padding: 0 10px;
    }

        .at-highlight-features .at-ext-mini-features .at-ext-mini-icon {
            color: #fff;
            border-color: #fff;
        }

        .at-highlight-features .at-ext-mini-features strong {
            color: #fff;
        }

        .at-highlight-features .at-ext-mini-features:hover .at-ext-mini-icon {
            background-color: #fff;
            color: #3d4a50;
        }

.at-main-features-cont {
    padding: 100px 0;
    background-color: #f7f7f7;
}

    .at-main-features-cont img {
        margin: 0 auto;
    }

    .at-main-features-cont .ft-sec {
        width: 30%;
        float: left;
        padding-top: 80px;
    }

    .at-main-features-cont .ft-sec-mockup {
        float: left;
        width: 40%;
        padding: 0 0;
    }

    .at-main-features-cont .at-ext-mini-icon.pull-right {
        margin-left: 20px;
        position: relative;
    }

        .at-main-features-cont .at-ext-mini-icon.pull-right:before {
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            border: 3px solid #f7f7f7;
            background-color: #1fbae8;
            position: absolute;
            top: 50%;
            right: -5px;
            margin-top: -5px;
            -webkit-transition: right 0.3s;
            transition: right 0.3s;
            -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
            transition-timing-function: cubic-bezier(1, 0, 0, 1);
        }

    .at-main-features-cont .at-ext-mini-icon.pull-left {
        margin-right: 20px;
        position: relative;
    }

        .at-main-features-cont .at-ext-mini-icon.pull-left:before {
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            border: 3px solid #f7f7f7;
            background-color: #1fbae8;
            position: absolute;
            top: 50%;
            left: -5px;
            margin-top: -5px;
            -webkit-transition: right 0.3s;
            transition: right 0.3s;
            -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
            transition-timing-function: cubic-bezier(1, 0, 0, 1);
        }

.panel-group .panel {
    border-radius: 2px;
    /*margin-bottom: 20px;*/
}

    .panel-group .panel > .panel-heading {
        border-radius: 1px 1px 0 0;
        font-family: 'Roboto Condensed', sans-serif;
        letter-spacing: 1px;
    }

        .panel-group .panel > .panel-heading a:hover {
            color: #fff;
        }

    .panel-group .panel .panel-body {
        background-color: #f5f5f5;
    }

.panel-default {
    border-width: 0;
    border-color: #3d4a50;
}

    .panel-default > .panel-heading {
        color: #fff;
        background-color: #3d4a50;
    }

    .panel-default.at-collapse-active {
        border-color: #1fbae8;
    }

        .panel-default.at-collapse-active > .panel-heading {
            color: #fff;
            background-color: #1fbae8;
        }

.alert strong {
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
}

.appscreens {
    width: 100%;
    box-sizing: content-box;
    max-height: 500px;
}

    .appscreens ul {
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        box-sizing: content-box;
    }

        .appscreens ul li {
            padding: 0 8px;
            display: inline-block;
            float: left;
            box-sizing: content-box;
        }

            .appscreens ul li a {
                border-radius: 5px;
                overflow: hidden;
                display: block;
                position: relative;
            }

                .appscreens ul li a:after {
                    content: '';
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0);
                    position: absolute;
                    top: 0;
                    left: 0;
                    -webkit-transition: background-color 0.3s;
                    transition: background-color 0.3s;
                }

                .appscreens ul li a:before {
                    content: '\e657';
                    font-family: "Pe-icon-7-stroke";
                    color: #fff;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin: -32px 0 0 -32px;
                    font-size: 64px;
                    line-height: 64px;
                    z-index: 1;
                    -webkit-transform: scale(2);
                    -ms-transform: scale(2);
                    transform: scale(2);
                    opacity: 0;
                    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
                    transition: transform 0.3s, opacity 0.3s;
                }

                .appscreens ul li a:hover img {
                    -webkit-transform: scale(1.2);
                    -ms-transform: scale(1.2);
                    transform: scale(1.2);
                }

                .appscreens ul li a:hover:after {
                    background-color: rgba(0, 0, 0, 0.5);
                }

                .appscreens ul li a:hover:before {
                    opacity: 1;
                    -webkit-transform: scale(1);
                    -ms-transform: scale(1);
                    transform: scale(1);
                }

                .appscreens ul li a img {
                    -webkit-transition: -webkit-transform 1s;
                    transition: transform 1s;
                }

.at-gallery {
    padding: 150px 0;
    background-color: #f7f7f7;
}

.client-testimonials ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .client-testimonials ul li {
        display: block;
    }

.at-testimonials {
    padding: 100px 0;
    background-image: url(../images/17.jpg);
    background-position: top center;
    background-attachment: fixed;
    background-color: #1fbae8;
}

.testimonials {
    color: #fff;
    max-width: 570px;
    margin: 0 auto;
}

    .testimonials blockquote {
        padding: 0;
        border-width: 0;
        font-size: 18px;
        line-height: 30px;
        text-align: center;
        font-style: italic;
    }

        .testimonials blockquote:after {
            content: '"';
        }

        .testimonials blockquote:before {
            content: '"';
        }

    .testimonials .client-info {
        display: inline-block;
        margin: 20px auto 10px;
        position: relative;
        left: 50%;
    }

        .testimonials .client-info img {
            border-radius: 100px;
            float: left;
            margin-top: -9px;
        }

        .testimonials .client-info strong {
            font-family: 'Roboto Condensed', sans-serif;
            font-size: 21px;
            font-weight: 400;
            margin-left: 70px;
            display: block;
        }

        .testimonials .client-info p {
            margin-left: 70px;
            font-size: 13px;
        }

.testimonials-icon {
    text-align: center;
    margin-bottom: 30px;
}

    .testimonials-icon i {
        font-size: 72px;
        color: #fff;
    }

.at-pricing {
    padding: 100px 0;
    text-align: center;
}

.pricing-table {
    display: inline-block;
    background: #fafafa;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    max-width: 270px;
    text-align: center;
    margin: 0 0 20px;
    overflow: hidden;
}

    .pricing-table .pricing-header strong {
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: 500;
        font-size: 23px;
        line-height: 33px;
        letter-spacing: 1px;
        padding: 30px 5px;
        display: block;
        width: 100%;
        color: #fff;
        background-color: #3d4a50;
    }

    .pricing-table .pricing-header p {
        padding: 20px 0;
        font-size: 45px;
        line-height: 45px;
        color: #3d4a50;
        font-family: 'Roboto Condensed', sans-serif;
        margin-bottom: 0;
    }

        .pricing-table .pricing-header p small {
            font-size: 14px;
            vertical-align: top;
        }

    .pricing-table .pricing-footer {
        text-align: center;
    }

        .pricing-table .pricing-footer a {
            font-family: 'Roboto Condensed', sans-serif;
            font-weight: 300;
            font-size: 20px;
            line-height: 30px;
            display: block;
            background-color: #3d4a50;
            color: #fff;
            padding: 15px 0;
            border-radius: 0 0 2px 2px;
            -webkit-transition: background-color 0.3s;
            transition: background-color 0.3s;
            position: relative;
            overflow: hidden;
        }

            .pricing-table .pricing-footer a:hover {
                background-color: #1fbae8;
            }

                .pricing-table .pricing-footer a:hover i {
                    bottom: 15px;
                    left: 55px;
                    -webkit-transform: rotate(0deg);
                    -ms-transform: rotate(0deg);
                    transform: rotate(0deg);
                    color: #ffffff;
                    font-size: 32px;
                }

            .pricing-table .pricing-footer a i {
                position: absolute;
                bottom: -8px;
                left: -8px;
                font-size: 64px;
                -webkit-transform: rotate(35deg);
                -ms-transform: rotate(35deg);
                transform: rotate(35deg);
                color: rgba(255, 255, 255, 0.2);
                -webkit-transition: -webkit-transform 0.3s, bottom 0.3s, left 0.3s, font-size 0.3s, color 0.3s;
                transition: transform 0.3s, bottom 0.3s, left 0.3s, font-size 0.3s, color 0.3s;
            }

    .pricing-table .pricing-body ul {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }

        .pricing-table .pricing-body ul li {
            font-size: 15px;
            line-height: 22px;
            padding: 15px 0;
            width: 100%;
            float: left;
            border-top: 1px solid #eeeeee;
        }

            .pricing-table .pricing-body ul li:nth-child(odd) {
                background-color: #f5f5f5;
            }

    .pricing-table.featured {
        position: relative;
        top: -425px;
        overflow: visible;
        margin-top: 45px;
    }

        .pricing-table.featured:after {
            content: "Best Value";
            font-family: 'Roboto Condensed', sans-serif;
            font-size: 16px;
            line-height: 26px;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: block;
            width: 100%;
            text-align: center;
            padding: 10px 0;
            position: absolute;
            top: -45px;
            left: 0;
            z-index: 2;
            color: #fff;
            background-color: #3d4a50;
            border-radius: 2px 2px 0 0;
        }

        .pricing-table.featured .pricing-header strong {
            color: #FFF;
            background-color: #1fbae8;
        }

        .pricing-table.featured .pricing-header p {
            color: #1fbae8;
        }

        .pricing-table.featured .pricing-body ul li:before {
            color: #1fbae8;
        }

        .pricing-table.featured .pricing-footer a {
            background-color: #1fbae8;
        }

            .pricing-table.featured .pricing-footer a:hover {
                background-color: #3d4a50;
            }

.at-funfact {
    padding: 20px 0;
    background-image: url(../images/1.png);
    background-position: top center;
    background-attachment: fixed;
    background-color: #1fbae8;
}

.funfact {
    color: #fff;
    padding: 20px 25px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    max-width: 300px;
    width: 20%;
    text-align: center;
    display: inline-block;
    margin: 0 15px;
}

    .funfact .at-funfact-icon {
        font-size: 64px;
        line-height: 75px;
    }

    .funfact .at-funfact-counter {
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 40px;
        line-height: 50px;
        font-weight: 400;
        vertical-align: middle;
        text-transform: uppercase;
    }

    .funfact .funfact-title {
        font-size: 14px;
        line-height: 24px;
        font-weight: 400;
    }

.all-funfacts {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.at-clients {
    padding: 100px 0;
}

.our-clients ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .our-clients ul li {
        text-align: center;
        margin-bottom: 10px;
    }

.at-subscribe {
    padding: 100px 0;
    background-image: url(../images/17.jpg);
    background-position: top center;
    background-attachment: fixed;
    background-color: #1fbae8;
}

.subscribe-form {
    color: #fff;
    text-align: center;
}

    .subscribe-form .input-group {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        max-width: 451px;
        width: 100%;
    }

    .subscribe-form input[type="text"],
    .subscribe-form input[type="email"] {
        max-width: 320px;
        width: 100%;
        border-color: rgba(255, 255, 255, 0.5);
        background-color: rgba(255, 255, 255, 0.1);
        border-right-width: 0;
        color: #fff;
        float: left;
        padding: 16px 20px;
        border-radius: 25px 0 0 25px;
        -webkit-transition: border-color 0.3s, background-color 0.3s;
        transition: border-color 0.3s, background-color 0.3s;
    }

        .subscribe-form input[type="text"]:focus,
        .subscribe-form input[type="email"]:focus {
            background-color: transparent;
            border-color: #ffffff;
            outline: none !important;
        }

        .subscribe-form input[type="text"]::-webkit-input-placeholder,
        .subscribe-form input[type="email"]::-webkit-input-placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

    .subscribe-form input[type="submit"] {
        float: left;
        margin: 0;
        padding: 13px 24px 14px;
        border-radius: 0 25px 25px 0;
        position: relative;
        top: -2px;
        left: 1px;
    }

    .subscribe-form .subscribe-title {
        font-size: 30px;
        line-height: 40px;
        text-transform: uppercase;
        font-weight: 600;
        margin-bottom: 25px;
        color: #fff;
        letter-spacing: 2px;
    }

.subscribe-result {
    max-width: 400px;
    margin: 0 auto;
    display: none;
    font-size: 16px;
}

    .subscribe-result i {
        display: block;
        font-size: 32px;
        margin-top: 20px;
    }

        .subscribe-result i.pe-7s-close-circle {
            color: red;
        }

        .subscribe-result i.pe-7s-check {
            color: green;
        }

.at-contact {
    padding: 50px 0;
}

.contact-form-container {
    margin: 0 auto;
}

    .contact-form-container input[type="text"],
    .contact-form-container input[type="email"],
    .contact-form-container input[type="tel"],
    .contact-form-container input[type="password"],
    .contact-form-container textarea {
        width: 100%;
        margin-bottom: 20px;
    }

    .contact-form-container textarea {
        height: 200px;
    }

    .contact-form-container .at-btn-container {
        text-align: center;
    }

.formFieldError {
    border-color: #e34444 !important;
    box-shadow: 0 0 3px #e34444;
}

#result-message {
    display: none;
    max-width: 600px;
    margin: 20px auto 0;
}

.contact-address {
    padding-left: 50px;
}

.contact-info {
    margin-bottom: 25px;
}

    .contact-info .contact-info-icon {
        float: left;
        font-size: 24px;
        line-height: 42px;
        color: #1fbae8;
        text-align: center;
        width: 42px;
    }

    .contact-info .contact-info-txt {
        margin-left: 55px;
    }

        .contact-info .contact-info-txt address {
            margin-bottom: 15px;
        }

            .contact-info .contact-info-txt address strong {
                font-size: 17px;
                line-height: 27px;
            }

.at-video-gallery {
    padding: 100px 0;
}

    .at-video-gallery .video-gallery-title {
        color: #fff;
        text-align: center;
        font-family: 'Open Sans', sans-serif;
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 35px;
    }

.video-prev a {
    position: relative;
    display: block;
    border-radius: 7px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.video-prev .play-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 5;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

    .video-prev .play-btn i {
        width: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 21px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -30px;
        margin-top: -25px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        -webkit-transition: background-color 0.3s, color 0.3s;
        transition: background-color 0.3s, color 0.3s;
        text-indent: 3px;
    }

.video-prev:hover .play-btn {
    background-color: rgba(255, 255, 255, 0.2);
}

    .video-prev:hover .play-btn i {
        background-color: rgba(31, 186, 232, 0.7);
    }

.at-blog {
    padding: 180px 0;
    background-color: #fff;
}

.post-container {
    /* margin-bottom: 50px;*/
}

    .post-container .post-thumb {
        float: left;
        border-radius: 4px;
        overflow: hidden;
    }

        .post-container .post-thumb a {
            display: block;
            position: relative;
        }

            .post-container .post-thumb a i {
                position: absolute;
                top: 50%;
                left: 0;
                margin: -16px 0 0 -8px;
                font-size: 32px;
                line-height: 32px;
                color: #fff;
                z-index: 1;
                opacity: 0;
                -webkit-transition: left 0.3s, opacity 0.3s;
                transition: left 0.3s, opacity 0.3s;
            }

            .post-container .post-thumb a img {
                -webkit-transition: -webkit-transform 1s;
                transition: transform 1s;
            }

            .post-container .post-thumb a:after {
                content: '';
                background-color: #1fbae8;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                -webkit-transition: opacity 0.3s;
                transition: opacity 0.3s;
            }

            .post-container .post-thumb a:hover i {
                opacity: 1;
                left: 50%;
            }

            .post-container .post-thumb a:hover img {
                -webkit-transform: scale(1.1);
                -ms-transform: scale(1.1);
                transform: scale(1.1);
            }

            .post-container .post-thumb a:hover:after {
                opacity: 0.85;
            }

    .post-container .post-data {
        /* margin-left: 120px;*/
    }

        .post-container .post-data .post-title {
            margin: 0 0 5px;
            font-family: 'Roboto Condensed', sans-serif;
            font-size: 19px;
            line-height: 25px;
            font-weight: 500;
        }

            .post-container .post-data .post-title a {
                display: block;
                color: #3d4a50;
                -webkit-transition: color 0.3s;
                transition: color 0.3s;
            }

                .post-container .post-data .post-title a:hover {
                    color: #1fbae8;
                }

        .post-container .post-data .post-meta {
            display: block;
            font-size: 13px;
            margin-bottom: 15px;
            color: #b4babd;
        }

            .post-container .post-data .post-meta i {
                margin-left: 7px;
                color: #1fbae8;
            }

                .post-container .post-data .post-meta i:first-child {
                    margin-left: 0;
                }

            .post-container .post-data .post-meta a {
                color: #b4babd;
            }

                .post-container .post-data .post-meta a:hover {
                    color: #1fbae8;
                }

        .post-container .post-data p {
            font-size: 13px;
            line-height: 23px;
        }

.main-blog {
    padding: 0;
}

    .main-blog .at-post {
        margin: 50px 0;
    }

        .main-blog .at-post:first-child {
            margin-top: 0;
        }

        .main-blog .at-post .at-post-thumb {
            border-radius: 4px 4px 0 0;
            overflow: hidden;
        }

            .main-blog .at-post .at-post-thumb a {
                display: block;
                position: relative;
            }

                .main-blog .at-post .at-post-thumb a i {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    margin: -16px 0 0 -8px;
                    font-size: 96px;
                    line-height: 32px;
                    color: #fff;
                    z-index: 1;
                    opacity: 0;
                    -webkit-transition: left 0.3s, opacity 0.3s;
                    transition: left 0.3s, opacity 0.3s;
                }

                .main-blog .at-post .at-post-thumb a img {
                    -webkit-transition: -webkit-transform 1s;
                    transition: transform 1s;
                }

                .main-blog .at-post .at-post-thumb a:after {
                    content: '';
                    background-color: #1fbae8;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0;
                    -webkit-transition: opacity 0.3s;
                    transition: opacity 0.3s;
                }

                .main-blog .at-post .at-post-thumb a:hover i {
                    opacity: 1;
                    left: 50%;
                }

                .main-blog .at-post .at-post-thumb a:hover img {
                    -webkit-transform: scale(1.2);
                    -ms-transform: scale(1.2);
                    transform: scale(1.2);
                }

                .main-blog .at-post .at-post-thumb a:hover:after {
                    opacity: 0.85;
                }

        .main-blog .at-post .post-all-contents {
            padding: 25px 20px 10px;
            border-bottom: 1px solid #f5f5f5;
            border-left: 1px solid #f5f5f5;
            border-right: 1px solid #f5f5f5;
        }

        .main-blog .at-post .post-title {
            font-family: 'Roboto Condensed', sans-serif;
            font-weight: 400;
            font-size: 25px;
            margin-top: 0;
        }

            .main-blog .at-post .post-title a {
                color: #3d4a50;
            }

                .main-blog .at-post .post-title a:hover {
                    color: #1fbae8;
                }

        .main-blog .at-post .post-meta {
            display: block;
            margin-bottom: 20px;
            color: #b4babd;
        }

            .main-blog .at-post .post-meta i {
                margin-left: 7px;
                color: #1fbae8;
            }

                .main-blog .at-post .post-meta i:first-child {
                    margin-left: 0;
                }

            .main-blog .at-post .post-meta a {
                color: #b4babd;
            }

                .main-blog .at-post .post-meta a:hover {
                    color: #1fbae8;
                }

    .main-blog .at-single-post .at-post-thumb {
        border-radius: 4px 4px 0 0;
        overflow: hidden;
    }

        .main-blog .at-single-post .at-post-thumb a {
            display: block;
            position: relative;
        }

            .main-blog .at-single-post .at-post-thumb a i {
                position: absolute;
                top: 50%;
                left: 0;
                margin: -16px 0 0 -8px;
                font-size: 96px;
                line-height: 32px;
                color: #fff;
                z-index: 1;
                opacity: 0;
                -webkit-transition: left 0.3s, opacity 0.3s;
                transition: left 0.3s, opacity 0.3s;
            }

            .main-blog .at-single-post .at-post-thumb a img {
                -webkit-transition: -webkit-transform 1s;
                transition: transform 1s;
            }

            .main-blog .at-single-post .at-post-thumb a:after {
                content: '';
                background-color: #1fbae8;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                -webkit-transition: opacity 0.3s;
                transition: opacity 0.3s;
            }

            .main-blog .at-single-post .at-post-thumb a:hover i {
                opacity: 1;
                left: 50%;
            }

            .main-blog .at-single-post .at-post-thumb a:hover img {
                -webkit-transform: scale(1.2);
                -ms-transform: scale(1.2);
                transform: scale(1.2);
            }

            .main-blog .at-single-post .at-post-thumb a:hover:after {
                opacity: 0.85;
            }

    .main-blog .at-single-post .post-title {
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: 400;
        font-size: 25px;
    }

        .main-blog .at-single-post .post-title a {
            color: #3d4a50;
        }

            .main-blog .at-single-post .post-title a:hover {
                color: #1fbae8;
            }

    .main-blog .at-single-post .post-meta {
        display: block;
        margin-bottom: 20px;
        color: #b4babd;
    }

        .main-blog .at-single-post .post-meta i {
            margin-left: 7px;
            color: #1fbae8;
        }

            .main-blog .at-single-post .post-meta i:first-child {
                margin-left: 0;
            }

        .main-blog .at-single-post .post-meta a {
            color: #b4babd;
        }

            .main-blog .at-single-post .post-meta a:hover {
                color: #1fbae8;
            }

    .main-blog .at-single-post .post-content {
        border-bottom: 1px solid #f2f2f2;
        margin-bottom: 20px;
    }

    .main-blog .at-single-post .tags-meta {
        margin-bottom: 70px;
    }

        .main-blog .at-single-post .tags-meta strong {
            display: inline-block;
        }

        .main-blog .at-single-post .tags-meta .at-all-tags {
            display: inline-block;
        }

.recent-posts-widget {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .recent-posts-widget .post-container {
        margin-bottom: 15px;
    }

        .recent-posts-widget .post-container .post-data {
            margin-left: 85px;
        }

            .recent-posts-widget .post-container .post-data .post-title a {
                font-size: 16px;
                line-height: 25px;
                font-weight: 600;
            }

    .recent-posts-widget li {
        border-width: 0 !important;
    }

.at-all-tags a {
    display: inline-block;
    padding: 5px 20px;
    background-color: #f5f5f5;
    margin-bottom: 7px;
    font-size: 13px;
    line-height: 22px;
    color: #3d4a50;
    border-radius: 2px;
    -webkit-transition: color 0.3s, background-color 0.3s;
    transition: color 0.3s, background-color 0.3s;
}

    .at-all-tags a:hover {
        color: #fff;
        background-color: #1fbae8;
    }

.at-widget h3.widget-title {
    font-family: 'Roboto Condensed', sans-serif;
    color: #3d4a50;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 1px;
    font-size: 20px;
    line-height: 25px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    margin-top: 0;
    border-bottom: 1px solid #f2f2f2;
}

.at-widget #searchform {
    position: relative;
}

    .at-widget #searchform input[type="text"] {
        width: 100%;
        padding-left: 38px;
    }

        .at-widget #searchform input[type="text"]:focus + i {
            color: #1fbae8;
        }

    .at-widget #searchform i.search-icon {
        position: absolute;
        top: 50%;
        left: 12px;
        margin-top: -13px;
        font-size: 20px;
        line-height: 24px;
        color: #a6aeb1;
    }

.at-widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .at-widget ul li {
        border-bottom: 1px solid #f2f2f2;
       /* padding: 10px 2px;*/
       padding: 0; 
    }

        .at-widget ul li a {
            color: #8b9599;
        }

            .at-widget ul li a:hover {
                color: #1fbae8;
            }

.at-sidebar-area {
    padding-left: 10px;
}

    .at-sidebar-area .at-widget {
        padding: 30px 0;
    }

        .at-sidebar-area .at-widget:first-child {
            padding-top: 0;
        }

.pagination {
    display: inline-block;
    padding-left: 0px;
    margin: 20px 0px;
    border-radius: 0;
}

    .pagination > li {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        margin: 0 2px;
    }

        .pagination > li > a {
            /*border-radius: 50%;*/
            color: #1fbae8;
            -webkit-transition: color 0.3s, background-color 0.3s, border-color 0.3s;
            transition: color 0.3s, background-color 0.3s, border-color 0.3s;
        }

            .pagination > li > a:hover {
                color: #fff;
                background-color: #1fbae8;
                border-color: #1fbae8;
            }

        .pagination > li.active > a {
            background-color: #1fbae8;
            border-color: #1fbae8;
        }

            .pagination > li.active > a:hover {
                color: #fff;
                background-color: #1fbae8;
                border-color: #1fbae8;
            }

        .pagination > li:first-child > a {
            /*border-radius: 50%;*/
        }

        .pagination > li:last-child > a {
            /*border-radius: 50%;*/
        }

.author-info-box .author-img {
    float: left;
    border-radius: 4px;
    overflow: hidden;
}

.author-info-box .author-info {
    margin-left: 80px;
}

    .author-info-box .author-info .author-name {
        font-weight: 600;
        font-size: 16px;
        display: block;
        margin-bottom: 10px;
    }

        .author-info-box .author-info .author-name a {
            color: #3d4a50;
        }

            .author-info-box .author-info .author-name a:hover {
                color: #1fbae8;
            }

.at-comments {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .at-comments ul {
        list-style: none;
    }

    .at-comments .comment {
        border-bottom: 1px solid #f2f2f2;
        padding: 20px 0 0;
    }

        .at-comments .comment .comment-avatar {
            float: left;
            border-radius: 4px;
        }

        .at-comments .comment .commenter-title {
            margin-left: 20px;
            font-weight: 500;
            font-size: 16px;
            line-height: 26px;
        }

        .at-comments .comment .comment-date {
            font-size: 13px;
            margin-left: 10px;
        }

        .at-comments .comment .comment-reply {
            float: right;
        }

        .at-comments .comment p {
            margin-left: 80px;
            margin-top: 10px;
        }

        .at-comments .comment a {
            color: #3d4a50;
        }

            .at-comments .comment a:hover {
                color: #1fbae8;
            }

.at-comment-form input[type="text"],
.at-comment-form textarea {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

.at-comment-form textarea {
    height: 200px;
}

.at-comment-form input[type="text"] {
    max-width: 470px;
}

.at-comment-form label {
    font-weight: 300;
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 10px;
}

.blog-more-post {
    margin: 0 auto;
    text-align: center;
}

footer .copyright {
    /*background-color: #f0f1f1;
    text-align: center;
    padding: 12px 0;*/
    /*background-color: #545454;*/
    color:#fff;
    padding-top:10px;
    /*height:50px;*/
}

footer .footer-social {
    text-align: center;
    padding: 50px 0;
    background-color: #f5f6f6;
}

    footer .footer-social h3 {
        margin-bottom: 30px;
    }

    footer .footer-social ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        footer .footer-social ul li {
            display: inline-block;
        }

            footer .footer-social ul li a {
                display: block;
                line-height: 45px;
                width: 45px;
                border-radius: 2px;
                background-color: #3d4a50;
                font-size: 16px;
                color: #fff;
                -webkit-transition: background-color 0.3s;
                transition: background-color 0.3s;
            }

                footer .footer-social ul li a:hover {
                    background-color: #1fbae8 !important;
                }

body.dark {
    background-color: #3d4a50;
    color: #dcdfe1;
}

    body.dark a:hover {
        color: #fff;
    }

    body.dark h1,
    body.dark h2,
    body.dark h3,
    body.dark h4,
    body.dark h5,
    body.dark h6 {
        color: #fff;
    }

    body.dark .at-clone {
        background: rgba(59, 71, 77, 0.98);
    }

        body.dark .at-clone nav.main-nav {
            border-bottom-width: 0;
        }

            body.dark .at-clone nav.main-nav ul li a {
                color: #fff !important;
            }

            body.dark .at-clone nav.main-nav ul li:hover a,
            body.dark .at-clone nav.main-nav ul li.current a {
                color: #fff !important;
            }

    body.dark .subscribe-form input[type="text"],
    body.dark .subscribe-form input[type="email"] {
        border-color: rgba(255, 255, 255, 0.5);
    }

        body.dark .subscribe-form input[type="text"]:focus,
        body.dark .subscribe-form input[type="email"]:focus {
            border-color: #ffffff;
        }

        body.dark .subscribe-form input[type="text"]::-webkit-input-placeholder,
        body.dark .subscribe-form input[type="email"]::-webkit-input-placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

    body.dark .bgwhite {
        background-color: #3d4a50 !important;
    }

    body.dark .feature {
        border-color: #48575e;
    }

        body.dark .feature h3.feature-title {
            color: #fff;
        }

    body.dark .at-main-features-cont {
        background-color: #445259;
    }

        body.dark .at-main-features-cont .at-ext-mini-icon.pull-right:before {
            border: 3px solid #445259;
        }

        body.dark .at-main-features-cont .at-ext-mini-icon.pull-left:before {
            border: 3px solid #445259;
        }

    body.dark .ext-feature.ext-feature-dark {
        color: #dcdfe1;
    }

        body.dark .ext-feature.ext-feature-dark .join-line {
            background-color: #fff;
        }

        body.dark .ext-feature.ext-feature-dark .ft-icon {
            border-color: #fff;
            color: #fff;
        }

        body.dark .ext-feature.ext-feature-dark .ft-title {
            color: #fff;
        }

        body.dark .ext-feature.ext-feature-dark:hover .ft-icon {
            background-color: #1fbae8;
            color: #fff;
            border: 1px solid #1fbae8;
        }

    body.dark .at-gallery,
    body.dark .at-features-ext-2 {
        background-color: #445259;
    }

    body.dark .at-blog {
        background-color: #445259;
        color: #fff;
    }

        body.dark .at-blog .post-container .post-data .post-title a,
        body.dark .at-blog .post-container .post-data .post-meta a {
            color: #fff;
        }

            body.dark .at-blog .post-container .post-data .post-title a:hover,
            body.dark .at-blog .post-container .post-data .post-meta a:hover {
                color: #1fbae8;
            }

    body.dark .main-blog {
        color: #fff;
    }

        body.dark .main-blog .at-post .post-title a,
        body.dark .main-blog .at-post .post-meta a,
        body.dark .recent-posts-widget .post-container .post-data .post-title a {
            color: #fff;
        }

            body.dark .main-blog .at-post .post-title a:hover,
            body.dark .main-blog .at-post .post-meta a:hover,
            body.dark .recent-posts-widget .post-container .post-data .post-title a:hover {
                color: #1fbae8;
            }

    body.dark .at-all-tags a {
        background-color: #4f5f67;
        color: #fff;
    }

        body.dark .at-all-tags a:hover {
            background-color: #1fbae8;
        }

    body.dark .main-blog .at-post .post-all-contents {
        border-color: #4f5f67;
    }

    body.dark .at-widget h3.widget-title,
    body.dark .at-widget ul li {
        color: #fff;
        border-color: #4f5f67;
    }

        body.dark .at-widget h3.widget-title a,
        body.dark .at-widget ul li a {
            color: #fff;
        }

            body.dark .at-widget h3.widget-title a:hover,
            body.dark .at-widget ul li a:hover {
                color: #1fbae8;
            }

    body.dark .pagination > li > a {
        color: #fff;
        background-color: #48575e;
        border-color: #53656d;
    }

        body.dark .pagination > li > a:hover {
            color: #fff;
            background-color: #1fbae8;
            border-color: #1fbae8;
        }

    body.dark .pagination > li.active > a {
        background-color: #1fbae8;
        border-color: #1fbae8;
    }

        body.dark .pagination > li.active > a:hover {
            color: #fff;
            background-color: #1fbae8;
            border-color: #1fbae8;
        }

    body.dark .main-blog .at-single-post .post-title a,
    body.dark .author-info-box .author-info .author-name a,
    body.dark .at-comments .comment a {
        color: #fff;
    }

        body.dark .main-blog .at-single-post .post-title a:hover,
        body.dark .author-info-box .author-info .author-name a:hover,
        body.dark .at-comments .comment a:hover {
            color: #1fbae8;
        }

    body.dark .main-blog .at-single-post .post-content,
    body.dark .at-title,
    body.dark .at-comments .comment {
        border-color: #4f5f67;
    }

    body.dark .sec-title h3 {
        color: #fff;
    }

    body.dark ul.nav-tabs li a {
        color: #fff;
    }

        body.dark ul.nav-tabs li a:hover {
            background-color: #323d42;
        }

    body.dark .block-txt .bt-title {
        color: #fff;
    }

    body.dark .block-txt .bt-subtitle {
        color: #a6aeb1;
    }

    body.dark .at-ext-mini-features strong {
        color: #fff;
    }

    body.dark .pricing-table {
        background-color: #323d42;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

        body.dark .pricing-table .pricing-header strong {
            color: #fff;
        }

        body.dark .pricing-table .pricing-header p {
            color: #fff;
        }

        body.dark .pricing-table .pricing-body ul li {
            border-top: 1px solid #323d42;
        }

            body.dark .pricing-table .pricing-body ul li:nth-child(odd) {
                background-color: #3d4a50;
            }

    body.dark input[type="text"],
    body.dark input[type="email"],
    body.dark input[type="tel"],
    body.dark input[type="password"],
    body.dark textarea {
        border-color: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

        body.dark input[type="text"]:focus,
        body.dark input[type="email"]:focus,
        body.dark input[type="tel"]:focus,
        body.dark input[type="password"]:focus,
        body.dark textarea:focus {
            border-color: #1fbae8;
        }

    body.dark .panel-default {
        border-color: #272f33;
    }

        body.dark .panel-default > .panel-heading {
            color: #fff;
            background-color: #272f33;
        }

        body.dark .panel-default.at-collapse-active {
            border-color: #1fbae8;
        }

            body.dark .panel-default.at-collapse-active > .panel-heading {
                color: #fff;
                background-color: #1fbae8;
            }

    body.dark .panel-group .panel .panel-body {
        background-color: #323d42;
        border-color: #323d42;
    }

    body.dark footer .copyright {
        background-color: rgba(0, 0, 0, 0.1);
        text-align: center;
        padding: 12px 0;
    }

    body.dark footer .footer-social {
        background-color: #445259;
    }

        body.dark footer .footer-social ul li a {
            background-color: #323d42;
        }

@media (min-width: 561px) and (max-width: 991px) {
    /*.options_header {
        height:160px;
    }

    .right_menu{
	    float:right; min-height: 50px;margin-top: 23px; 
    }*/

     .modal-dialog {
        width: 80%;
    }

    /*.logo_hkobc_mobile {
        display:none;
    }*/

    .pulldown_search {
    padding-right:86px; float:left; position:relative;left:0%;
}

     .search_engine{
         background-color: rgb(255, 254, 218);left: 10%;margin-left: 3px;margin-top: 2px;max-width: 400px;
    }

    .search_engine_button {
        float:left !important; left:10% !important; margin-top: 3px;
    }

    .features-list li {
        width: 50%;
    }

        .features-list li:nth-child(2n) .feature {
            border-right-width: 1px;
        }

        .features-list li:last-child .feature {
            border-right-width: 1px;
        }

        .features-list li:nth-child(1) .feature,
        .features-list li:nth-child(2) .feature {
            border-top-width: 1px;
        }

        .features-list li:nth-child(3) .feature,
        .features-list li:nth-child(4) .feature {
            border-top-width: 0;
        }

    .feature {
        margin-bottom: 30px;
    }

    .ft-sec-mockup {
        display: none;
    }

    .at-main-features-cont .ft-sec {
        width: 50%;
    }

    .pricing-table {
        max-width: 236px;
    }
}

@media (max-width: 560px) {
    /*.options_header {
        height:160px;
    }

    .right_menu{
	    float:right; min-height: 50px; width:30%;
    }*/
   .logo_hkobc_mobile {
    background-image: url("../images/logo_hkobc.png");
    float: left;
    width: 180px;
    height: 56px;
    /*margin-left:15px;*/
    }

     .modal-dialog {
        width: 97%
    }

    /*.logo_hkobc_mobile {
        display:block;
    }

    .logo_hkobc {
        display:none;
    }*/

    .pulldown_search {
        padding-right:86px; float:left; position:relative;left:22%;
    }
      .search_engine{
        background-color: rgb(255, 254, 218) !important; width: 39% !important;  clear:left; float: left; display: block; left:0% !important; margin-top: 5px;
    }

    .search_engine_button {
        clear:left; float:left !important; left:35% !important; margin-top: 15px;
    }

    .features-list li {
        width: 100%;
    }

        .features-list li .feature {
            border-right-width: 1px;
        }

        .features-list li:nth-child(1) .feature {
            border-top-width: 1px;
        }

        .features-list li:nth-child(2) .feature,
        .features-list li:nth-child(3) .feature,
        .features-list li:nth-child(4) .feature {
            border-top-width: 0;
        }

    .feature {
        margin-bottom: 30px;
    }

    .ft-sec-mockup {
        display: none;
    }

    .at-main-features-cont .ft-sec {
        width: 100%;
    }

        .at-main-features-cont .ft-sec .at-ext-mini-features {
            text-align: left !important;
        }

        .at-main-features-cont .ft-sec .at-ext-mini-icon.pull-right {
            float: left !important;
            margin-right: 20px;
            margin-left: 0;
        }

    .at-home .hero-unit .main-title h3 {
        font-size: 40px;
    }

    .at-home .hero-unit .main-title a.btn {
        margin-bottom: 10px;
    }

    .subscribe-form input[type="text"],
    .subscribe-form input[type="email"] {
        max-width: 200px;
    }
}

@media (max-width: 750px) {
    /*.options_header {
        height:160px;
    }
    
    .right_menu{
	    float:right; min-height: 50px; margin-top: -23px;
    }*/

    .logo_hkobc_mobile {
    background-image: url("../images/logo_hkobc.png");
    float: left;
    width: 180px;
    height: 56px;
    /*margin-left:15px;*/
    }

     .modal-dialog {
        width: 97%
    }
    /*.logo_hkobc_mobile {
        display:block;
    }
    .logo_hkobc {
        display:none;
    }*/

    .pulldown_search {
        padding-right:86px; float:left; position:relative;left:22%;
    }
     .search_engine{
        background-color: rgb(255, 254, 218) !important; width: 39% !important;  clear:left; float: left; display: block; left:0% !important; margin-top: 5px;
    }
    .search_engine_button {
        clear:left; float:left !important; left:35% !important; margin-top: 15px;
    }

    .pricing-table {
        max-width: 350px;
        display: block;
        margin: 0 auto 30px;
    }
}


@media (max-width: 767px) {
    /*.options_header {
        height:160px;
    }
    .right_menu{
	    float:right; min-height: 50px; width:30%;
    }*/

     .modal-dialog {
        width: 97%
    }

   .logo_hkobc_mobile {
    background-image: url("../images/logo_hkobc.png");
    float: left;
    width: 180px;
    height: 56px;
    /*margin-left:15px;*/
    }

    /*.logo_hkobc_mobile {
        display:block;
    }
       .logo_hkobc {
        display:none;
    }*/

    .pulldown_search {
        padding-right:86px; float:left; position:relative;left:0%;
    }
 .search_engine{
         background-color: rgb(255, 254, 218);left: 10%;margin-left: 3px;margin-top: 2px;max-width: 400px;
    }

    .flagLocation {
    
        padding:3px; width:42% !important;position:relative;float:left; margin-left:1%;

    }

    /*.logo_adapt {
        height:140px;

    }
    .header_options_right {
        width:90%;
    }*/

       .menu_annual_renewal {
         top:23px;
         clear:left;
    }


    .m_hide_step {
        display:none;
    }

    .step_item_active {
        width:50%;
    }

    .step_item_regular {
        width:15%;
    }

    /*header.header-navbar nav.main-nav .navbar-nav {
        float: none;
        margin: 0;
    }

    header.header-navbar nav.main-nav ul {
        display: block;
    }

        header.header-navbar nav.main-nav ul li {
            padding: 3px 1px;
            display: block;
            float: none;
            width: 100%;
            text-align: center;
        }

            header.header-navbar nav.main-nav ul li a {
                padding: 5px 15px;
                font-size: 15px;
                line-height: 23px;
                width: 100%;
                display: block;
            }*/
}

@media (max-width: 359px) {
    /*.options_header {
        height:160px;
    }
    .right_menu{
	    float:right; min-height: 50px;margin-top: 23px;
    }*/





    .logo_hkobc_mobile {
    background-image: url("../images/logo_hkobc.png");
    float: left;
    width: 180px;
    height: 56px;
    margin-left:15px;
    }

     .modal-dialog {
        width: 80%;
    }

    /*.logo_hkobc_mobile {
        display:none;
    }*/

    .pulldown_search {
        padding-right:86px; float:left; position:relative;left:0%;
    }

         .search_engine{
         background-color: rgb(255, 254, 218);left: 10%;margin-left: 3px;margin-top: 2px;max-width: 400px;
    }
    
        .search_engine_button {
        float:left !important; left:10% !important; margin-top: 3px;
    }

    .subscribe-form input[type="text"],
    .subscribe-form input[type="email"] {
        max-width: 180px;
    }

    .subscribe-form input[type="submit"] {
        width: 100%;
    }
}

.button_online {
    border: 1px solid transparent;
    color: #fff;
    display: block;
    font-family: "Roboto Condensed",sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 23px;
    padding: 5px 15px;
    text-transform: uppercase;
    transition: border-color 0.3s ease 0s, color 0.3s ease 0s, background 0.3s ease 0s;
    background-color: #f45555;
    border-radius: 2px;
    cursor: pointer;
    text-align: center;
    width: 162px;
}



.icon_payment_base {
    background-position: left top;
    cursor: default;
    display: block;
    float: left;
    height: 30px;
    width: 30px;
    margin-right: 7px;
    text-decoration: none;
    background-repeat: no-repeat;
}

.icon_payment_hk {
    background-image: url("../images/hk.png");
}

.icon_payment_sy {
    background-image: url("../images/sy.png");
}

.icon_payment_ms {
    background-image: url("../images/ms.png");
}

.icon_payment_dw {
    background-image: url("../images/dw.png");
}

.icon_payment_uk {
    background-image: url("../images/uk.png");
}

.icon_payment_bv {
    background-image: url("../images/bv.png");
}

.icon_payment_sm {
    background-image: url("../images/sm.png");
}

.icon_payment_pn {
    background-image: url("../images/pn.png");
}

.icon_payment_bh {
    background-image: url("../images/bh.png");
}

.icon_payment_cm {
    background-image: url("../images/cm.png");
}


.new_tag_en {
    background-image: url("../images/new_tag_en.png");
    background-position: left top;
    cursor: default;
    display: block;
    float: left;
    height: 30px;
    width: 30px;
    margin-right: 7px;
    text-decoration: none;
    background-repeat: no-repeat;
}


/**TABLE**/
/*table.dataTable {
    width: 100%;
    margin: 0 auto;
    clear: both;
    border-collapse: separate;
    border-spacing: 0;
}

    table.dataTable thead th, table.dataTable tfoot th {
        font-weight: bold;
    }

    table.dataTable thead th, table.dataTable thead td {
        padding: 10px 18px;
        border-bottom: 1px solid #111;
    }

        table.dataTable thead th:active, table.dataTable thead td:active {
            outline: none;
        }

    table.dataTable tfoot th, table.dataTable tfoot td {
        padding: 10px 18px 6px 18px;
        border-top: 1px solid #111;
    }

    table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {
        cursor: pointer;
        *cursor: hand;
    }

    table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
        background-repeat: no-repeat;
        background-position: center right;
    }

    table.dataTable thead .sorting {
        background-image: url("../images/sort_both.png");
    }

    table.dataTable thead .sorting_asc {
        background-image: url("../images/sort_asc.png");
    }

    table.dataTable thead .sorting_desc {
        background-image: url("../images/sort_desc.png");
    }

    table.dataTable thead .sorting_asc_disabled {
        background-image: url("../images/sort_asc_disabled.png");
    }

    table.dataTable thead .sorting_desc_disabled {
        background-image: url("../images/sort_desc_disabled.png");
    }

    table.dataTable tbody tr {
        background-color: #ffffff;
    }

        table.dataTable tbody tr.selected {
            background-color: #B0BED9;
        }

    table.dataTable tbody th, table.dataTable tbody td {
        padding: 8px 10px;
    }

    table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
        border-top: 1px solid #ddd;
    }

    table.dataTable.row-border tbody tr:first-child th, table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th, table.dataTable.display tbody tr:first-child td {
        border-top: none;
    }

    table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
        border-top: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }

    table.dataTable.cell-border tbody tr th:first-child, table.dataTable.cell-border tbody tr td:first-child {
        border-left: 1px solid #ddd;
    }

    table.dataTable.cell-border tbody tr:first-child th, table.dataTable.cell-border tbody tr:first-child td {
        border-top: none;
    }

    table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
        background-color: #f9f9f9;
    }

        table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
            background-color: #acbad4;
        }

    table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
        background-color: #f6f6f6;
    }

        table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected {
            background-color: #aab7d1;
        }

    table.dataTable.order-column tbody tr > .sorting_1, table.dataTable.order-column tbody tr > .sorting_2, table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1, table.dataTable.display tbody tr > .sorting_2, table.dataTable.display tbody tr > .sorting_3 {
        background-color: #fafafa;
    }

    table.dataTable.order-column tbody tr.selected > .sorting_1, table.dataTable.order-column tbody tr.selected > .sorting_2, table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1, table.dataTable.display tbody tr.selected > .sorting_2, table.dataTable.display tbody tr.selected > .sorting_3 {
        background-color: #acbad5;
    }

    table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
        background-color: #f1f1f1;
    }

    table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
        background-color: #f3f3f3;
    }

    table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
        background-color: whitesmoke;
    }

    table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
        background-color: #a6b4cd;
    }

    table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
        background-color: #a8b5cf;
    }

    table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
        background-color: #a9b7d1;
    }

    table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
        background-color: #fafafa;
    }

    table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
        background-color: #fcfcfc;
    }

    table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
        background-color: #fefefe;
    }

    table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
        background-color: #acbad5;
    }

    table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
        background-color: #aebcd6;
    }

    table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
        background-color: #afbdd8;
    }

    table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
        background-color: #eaeaea;
    }

    table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
        background-color: #ececec;
    }

    table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
        background-color: #efefef;
    }

    table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
        background-color: #a2aec7;
    }

    table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
        background-color: #a3b0c9;
    }

    table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
        background-color: #a5b2cb;
    }

    table.dataTable.no-footer {
        border-bottom: 1px solid #111;
    }

    table.dataTable.nowrap th, table.dataTable.nowrap td {
        white-space: nowrap;
    }

    table.dataTable.compact thead th, table.dataTable.compact thead td {
        padding: 4px 17px 4px 4px;
    }

    table.dataTable.compact tfoot th, table.dataTable.compact tfoot td {
        padding: 4px;
    }

    table.dataTable.compact tbody th, table.dataTable.compact tbody td {
        padding: 4px;
    }

    table.dataTable th.dt-left, table.dataTable td.dt-left {
        text-align: left;
    }

    table.dataTable th.dt-center, table.dataTable td.dt-center, table.dataTable td.dataTables_empty {
        text-align: center;
    }

    table.dataTable th.dt-right, table.dataTable td.dt-right {
        text-align: right;
    }

    table.dataTable th.dt-justify, table.dataTable td.dt-justify {
        text-align: justify;
    }

    table.dataTable th.dt-nowrap, table.dataTable td.dt-nowrap {
        white-space: nowrap;
    }

    table.dataTable thead th.dt-head-left, table.dataTable thead td.dt-head-left, table.dataTable tfoot th.dt-head-left, table.dataTable tfoot td.dt-head-left {
        text-align: left;
    }

    table.dataTable thead th.dt-head-center, table.dataTable thead td.dt-head-center, table.dataTable tfoot th.dt-head-center, table.dataTable tfoot td.dt-head-center {
        text-align: center;
    }

    table.dataTable thead th.dt-head-right, table.dataTable thead td.dt-head-right, table.dataTable tfoot th.dt-head-right, table.dataTable tfoot td.dt-head-right {
        text-align: right;
    }

    table.dataTable thead th.dt-head-justify, table.dataTable thead td.dt-head-justify, table.dataTable tfoot th.dt-head-justify, table.dataTable tfoot td.dt-head-justify {
        text-align: justify;
    }

    table.dataTable thead th.dt-head-nowrap, table.dataTable thead td.dt-head-nowrap, table.dataTable tfoot th.dt-head-nowrap, table.dataTable tfoot td.dt-head-nowrap {
        white-space: nowrap;
    }

    table.dataTable tbody th.dt-body-left, table.dataTable tbody td.dt-body-left {
        text-align: left;
    }

    table.dataTable tbody th.dt-body-center, table.dataTable tbody td.dt-body-center {
        text-align: center;
    }

    table.dataTable tbody th.dt-body-right, table.dataTable tbody td.dt-body-right {
        text-align: right;
    }

    table.dataTable tbody th.dt-body-justify, table.dataTable tbody td.dt-body-justify {
        text-align: justify;
    }

    table.dataTable tbody th.dt-body-nowrap, table.dataTable tbody td.dt-body-nowrap {
        white-space: nowrap;
    }

    table.dataTable, table.dataTable th, table.dataTable td {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

.dataTables_wrapper {
    position: relative;
    clear: both;
    *zoom: 1;
    zoom: 1;
}

    .dataTables_wrapper .dataTables_length {
        float: left;
    }

    .dataTables_wrapper .dataTables_filter {
        float: right;
        text-align: right;
    }

        .dataTables_wrapper .dataTables_filter input {
            margin-left: 0.5em;
        }

    .dataTables_wrapper .dataTables_info {
        clear: both;
        float: left;
        padding-top: 0.755em;
    }

    .dataTables_wrapper .dataTables_paginate {
        float: right;
        text-align: right;
        padding-top: 0.25em;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            box-sizing: border-box;
            display: inline-block;
            min-width: 1.5em;
            padding: 0.5em 1em;
            margin-left: 2px;
            text-align: center;
            text-decoration: none !important;
            cursor: pointer;
            *cursor: hand;
            color: #333 !important;
            border: 1px solid transparent;
            border-radius: 2px;
        }

            .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
                color: #333 !important;
                border: 1px solid #979797;
                background-color: white;
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc));
                background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
                background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
                background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
                background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
                background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
            }

            .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
                cursor: default;
                color: #666 !important;
                border: 1px solid transparent;
                background: transparent;
                box-shadow: none;
            }

            .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
                color: white !important;
                border: 1px solid #111;
                background-color: #585858;
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));
                background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
                background: -moz-linear-gradient(top, #585858 0%, #111 100%);
                background: -ms-linear-gradient(top, #585858 0%, #111 100%);
                background: -o-linear-gradient(top, #585858 0%, #111 100%);
                background: linear-gradient(to bottom, #585858 0%, #111 100%);
            }

            .dataTables_wrapper .dataTables_paginate .paginate_button:active {
                outline: none;
                background-color: #2b2b2b;
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
                background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
                background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
                background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
                background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
                background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
                box-shadow: inset 0 0 3px #111;
            }

        .dataTables_wrapper .dataTables_paginate .ellipsis {
            padding: 0 1em;
        }

    .dataTables_wrapper .dataTables_processing {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 40px;
        margin-left: -50%;
        margin-top: -25px;
        padding-top: 20px;
        text-align: center;
        font-size: 1.2em;
        background-color: white;
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));
        background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
        background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
        background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
        background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
    }

    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
        color: #333;
    }

    .dataTables_wrapper .dataTables_scroll {
        clear: both;
    }

        .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
            *margin-top: -1px;
            -webkit-overflow-scrolling: touch;
        }

            .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td {
                vertical-align: middle;
            }

                .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th > div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td > div.dataTables_sizing {
                    height: 0;
                    overflow: hidden;
                    margin: 0 !important;
                    padding: 0 !important;
                }

    .dataTables_wrapper.no-footer .dataTables_scrollBody {
        border-bottom: 1px solid #111;
    }

    .dataTables_wrapper.no-footer div.dataTables_scrollHead table, .dataTables_wrapper.no-footer div.dataTables_scrollBody table {
        border-bottom: none;
    }

    .dataTables_wrapper:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
    }

@media screen and (max-width: 767px) {
    .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
    }

    .dataTables_wrapper .dataTables_paginate {
        margin-top: 0.5em;
    }
}

@media screen and (max-width: 640px) {
    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
        float: none;
        text-align: center;
    }

    .dataTables_wrapper .dataTables_filter {
        margin-top: 0.5em;
    }
}*/

/**TABLE**/



.firstname { width: 30%; vertical-align:middle; }

.lastname { width: 30%; }

.username { width: 30%; }

.accordion-xs-collapse .lastname:before { content: 'Last Name: '; }

.accordion-xs-collapse .username:before { content: 'Username: '; }





  .divtable .tr {
  overflow: hidden;
  clear: both;
  /*border-bottom: 1px solid #ccc;*/
}

.divtable .th,
.divtable .td {
  padding: 5px 10px;
  float: left;
}

.divtable .th { font-weight: bold; }



.quotation1Service {
    width:35%;
    }   


/*.serviceName2 { width: 28%; text-align: left; padding-left: 2px }

.serviceName1 { width: 78%; text-align: left; padding-left: 2px }

.serviceFlag2 {  width: 16%; }

.serviceChineseName2 {  width: 17%; }

.serviceShelfAvailable2 {  width: 17%; }

.serviceCountry2 { }

.serviceContent2 { }



.serviceCountry { display:none;}

.serviceName1T { width: 78%;text-align: left; padding-left: 2px }
.serviceName2T { width: 43%;text-align: left; padding-left: 2px }

.serviceChineseName2T {  width: 15%; }

.serviceShelfAvailable2T {  width: 20%; }

.serviceCountry2T {  width: 13%; }

.serviceContent2T { }

.serviceContent2 { display:none;}


.serviceNameT { width: 57%;text-align: left; padding-left: 2px }

.serviceCountryT {  width: 13%; }

.serviceContentT { width: 25%; }



.serviceName { width: 57%; vertical-align:middle; }

.serviceCountry {  width: 13%;  padding-left: 2px;}

.serviceContent {  }


.serviceCode { width: 10%; }

.servicePrice { width: 10%; }

.serviceOffer { width: 20%; }*/


.servicePriceItem{
    font-size:18px;
    display:none;
}

.serviceButtonItem {
    font-size:90%;
    background-color: #3366cc; color:#fff; width: 90%;
}

.serviceCodeItem {
    font-size:16px;
    padding-top:4%;
    width:100px;
}

.step2Large {
    display:block;
}

.step2Small {
    display:none;
}

 .form-horizontal {
        width:97%; text-align:left; margin:auto;
        margin: 0px 0px 0px 15px; padding: 0;

    }

  .form-horizontal2 {
        width:100%; text-align:left; margin:auto;
        margin:0; padding: 0;

    }


  
    .tt_transfer_base {
        background-position: left bottom;
        display: block;
        /*float: left;*/
        width: 421px;
        height: 70px;
        background-repeat: no-repeat;
        cursor: pointer;
        border: 0;
       /* background-color: #fff;*/
    }

        .tt_transfer_base:hover {
        /*background-color: #fff;*/
        color:#48575e;
        }

    .tt_transfer {
        background-image: url("../images/TTPayment.png");
    }

        .tt_transfer:hover {
            /*background-image: url("../images/TTPayment_on.png");*/
            background-image: url("../images/TTPayment.png");
        }




  @media(max-width: 768px) {
      /*.options_header {
        height:160px;
    }
      .right_menu{
	    float:right; min-height: 50px;margin-top: 23px;
    }*/

       .modal-dialog {
        width: 80%;
    }

           .logo_hkobc_mobile {
    background-image: url("../images/logo_hkobc.png");
    float: left;
    width: 180px;
    height: 56px;
    /*margin-left:15px;*/
    }

      /*.logo_hkobc_mobile {
        display:none;
    }*/

      .pulldown_search {
        padding-right:86px; float:left; position:relative;left:0;
    }

      .search_engine{
         background-color: rgb(255, 254, 218);left: 10%;margin-left: 3px;margin-top: 2px;max-width: 400px;
    }

          .search_engine_button {
        float:left !important; left:10% !important; margin-top: 3px;
    }

    .tt_transfer_base {
        background-position: left bottom;
        display: block;
        float: left;
        width: 421px;
        height: 72px;
        background-repeat: no-repeat;
        cursor: pointer;
        border: 0;
       /* background-color: #fff;*/
    }

    .tt_transfer_base:hover {
        /*background-color: #fff;*/
        color:#48575e;
     }

    .tt_transfer {
        background-image: url("../images/TTPaymentMobile.png");
    }

    .tt_transfer:hover {
        background-image: url("../images/TTPaymentMobile_on.png");
    }

}



@media (max-width: 767px) {

    /*.options_header {
        height:160px;
    }

    .right_menu{
	    float:right; min-height: 50px;margin-top: 23px;
    }*/

     .modal-dialog {
        width: 80%;
    }

    /*.logo_hkobc_mobile {
        display:none;
    }*/

    .pulldown_search {
     padding-right:86px; float:left; position:relative;left:0%;
    }

     .search_engine{
         background-color: rgb(255, 254, 218);left: 10%;margin-left: 3px;margin-top: 2px;max-width: 600px;
    }

       .search_engine_button {
        float:left !important; left:10% !important; margin-top: 3px;
    }

    .flagLocation {
    
        padding:3px; width:42% !important;position:relative;float:left; margin-left:1%;

    }

     /*.logo_adapt {
        height:140px;

    }

    .header_options_right {
        width:90%;
    }*/

     .menu_annual_renewal {
        top:23px;
        clear:left;
    }

    .m_hide_step {
        display:none;
    }

     .step_item_active {
        width:50%;
    }

     .step_item_regular {
            width:15%;
    }

.form-horizontal {
    width:100%;
} 

.form-horizontal2 {
    width:100%;
} 
.step2Large {
    display:none;
}

.step2Small {
    display:block;
}


    .quotation1Service {
    width:45%;
    }   
.serviceName1T {
    width:45%;
    }   

.serviceCountry { display:block;}
.serviceCountryCollapseTitle {
    display:none;
}
.contentCountry {
    display:none;
}

.btn {
    font-size:12px;
    letter-spacing:0.5px;
}

.quotation2table {
    font-size:12px;
}

.serviceCodeItem {
    font-size:12px;
    padding-top:8%;
    width:80px;
}
.serviceButtonItem {
    font-size:65%;
    background-color: #3366cc; color:#fff; width: 100%;
}
.servicePriceItem{
    font-size:12px;
    display:block;
}

.contentPrice {
    display:none;
}
.icon_payment_base {
    margin-right:3px;
    }
.tablePrice {
    display:none;
    }

.contentBody {
    display:none;
}


}
.shop_MobileService {
    display:none;
}
 .shop_WebService {
        display: block;
}
 .flagLocation {
    padding:3px; width:18% !important;position:relative;float:left; margin-left:1%;
}

 
  .menu_annual_renewal {
         top:4px;
    }

.step_item_active {
        width:25%;
}
.step_item_regular {
        width:25%;
}


@media(max-width: 600px) {
    /*.options_header {
        height:160px;
    }
    .right_menu{
	    float:right; min-height: 50px; margin-top: 23px;
    }
    .logo_hkobc_mobile {
        display:none;
    }*/

  .mobilePadding{ 
      padding-right: 10px;
      padding-left: 10px;
    }

  .flagLocation {
    
        padding:3px; width:42% !important;position:relative;float:left; margin-left:5%;

    }

     .modal-dialog {
        width: 80%;
    }

     .pulldown_search {
        padding-right:86px; float:left; position:relative;left:0%;
    }
     .search_engine{
         background-color: rgb(255, 254, 218);left: 10%;margin-left: 3px;margin-top: 2px;max-width: 400px;
    }
    .search_engine_button {
        float:left !important; left:10% !important; margin-top: 3px;
    }
    .itemIssueDate {
        display: block;
    }

     .shopCompanyName{
        display: none;
    } 

}

@media (max-width: 797px) {

    /*.options_header {
        height:160px;
    }

    .right_menu{
	    float:right; min-height: 50px;margin-top: 23px;
    }
    .logo_hkobc_mobile {
        display:none;
    }*/

     .modal-dialog {
        width: 80%;
    }
    .flagLocation {
    
        padding:3px; width:42% !important;position:relative;float:left; margin-left:5%;

    }


    /*.header_options_right {
        width:90%;
    }*/

    .menu_annual_renewal {
         top:23px;
         clear:left;
    }

    .m_hide_step {
        display:none;
    }

     .step_item_active {
        width:50%;
    }
    .step_item_regular {
        width:15%;
    }
        


    .itemTotalAmount {
        display: block;
    }
    .itemIssueDate {
        display: block;
    }

    .itemExpiredDate {
        display: block;
    }
    .itemShowDelete {
        display: block;
    }

    /*  FOR RENEWALLIST */ 
    .colOrderNo {
        text-align:center;
        font-weight: bold;
        padding: 4px 8px 7px 7px;
    }
    .colCompanyInfo {
        text-align:left;
    }
    .colIncorpDate {
        display:none;
    }
    .colRenewalStatus {
        display:none;
    }
    .colPaymentExpDate {
        display:none;
    }
    .colSrvDetails {
        display:none;
    }

    /*  FOR ORDERLIST AND RECEIPTLIST */ 
    .colTotal{
        display: none;
    }
    .colIssueDate{
        display: none;
    }
    .colExpiredDate{
        display: none;
    }
    .colDelete{
        display: none;
    }
    .colShowMore{
        display: none;
    }


    /*  FOR CHECKOUT LIST */
    
    .shop_colLocation {
        display:none;
    }
    .shop_MobileService {
        display:none;
    }
    .shop_WebService {
        display: none;
    }
    .shop_colCompany{
      padding-right:3%;
    }
    .shop_colCINumber {
    
        display:none;
    }
    .shop_colPrice{
        display: none;
    } 
    .shopCompanyName{
        display: none;
    } 
    .shop_colDelete{
        display: none;
    }
    .totalValueLeftWeb {
        display: none;
    }

    .totalValueLeftMobile {
        display:block;
    }
    .totalLabelWeb {
        display:none;
    }


      .shopCINumber {
        display: block;
    }
    .shopService {
        display: block;
    }
    .shopPrice {
        display: block;
    }
    .shopTotalAmount {
        display: block;
    }


}

@media (min-width: 797px) and (max-width: 1200px){
     .modal-dialog {
        width: 75%;
    }
}

@media (min-width: 1201px){
     .modal-dialog {
        width: 55%;
    }
}

@media (min-width: 797px) {

    /*.options_header {
        height:160px;
    }

    .right_menu{
	    float:right; min-height: 50px;margin-top: 23px;
    }
     .logo_hkobc_mobile {
        display:none;
    }
    .logo_hkobc {
        display:block;
    }*/

     /*.modal-dialog {
        width: 65%;
    }*/

     .pulldown_search {
    padding-right:86px; float:left; position:relative;left:0%;
}
    .search_engine{
         background-color: rgb(255, 254, 218);left: 10%;margin-left: 3px;margin-top: 2px;max-width: 400px;
    }

    .search_engine_button {
        float:left !important; left:10% !important; margin-top: 3px;
    }

    .flagLocation {
    
        padding:3px; width:18% !important;position:relative;float:left; margin-left:1%;

    }

     .menu_annual_renewal {
         top:4px;
    }

    .itemTotalAmount {
        display: none;
    }
    .itemIssueDate {
        display: none;
    }

    .itemExpiredDate {
        display: none;
    }
    .itemShowDelete {
        display: none;
    }

    .colOrderNo {
        text-align:center;
        font-weight: bold;
        padding: 4px 8px 7px 7px;
    }
    .colCompanyInfo {
        text-align:left;
    }
    .colIncorpDate {
        text-align:center;
    }
    .colRenewalStatus {
        text-align:center;
    }
    .colPaymentExpDate {
        text-align:center;
    }
    .colSrvDetails {
        text-align:center;
    }




    .colIssueDate{
        text-align:center;
    }
    .colExpiredDate{
        text-align:center;
    }

     
    .totalLabelWeb {
        display:block;
    }

    .shopCINumber {
        display: none;
    }
    .shopService {
        display: none;
    }
    .shopPrice {
        display: none;
    }
    .shopTotalAmount {
        display: none;
    }
    .totalValueLeftMobile {
        display:none;
    }
}


@media (max-width: 100px) {
    /*.options_header {
        height:160px;
    }

    .right_menu{
	    float:right; min-height: 50px; width:30%;
    }

    .logo_hkobc_mobile {
        display:block;
    }*/

     .modal-dialog {
        width: 97%;
    }

    /*.logo_hkobc {
        display:none;
    }*/
    .pulldown_search {
    padding-right:86px; float:left; position:relative;left:22%;
}

      .search_engine{
       background-color: rgb(255, 254, 218) !important; width: 39% !important;  clear:left; float: left; display: block; left:0% !important; margin-top: 5px;
    }
    
     .search_engine_button {
        clear:left; float:left !important; left:35% !important; margin-top: 15px;
    }
    .login_container {
       clear: left;
       margin-top:20px;
       display:block;
       height:50px;
       width:100%;
    }
}



@media (max-width: 800px) {

    /*.options_header {
        height: 160px;
    }

    .right_menu{
	    float:right; min-height: 50px; width:30%;
    }
    .logo_hkobc_mobile {
        display: block;
    }*/

     .modal-dialog {
        width: 97%
    }

    /*.logo_hkobc {
        display: none;
    }*/

    .pulldown_search {
        padding-right:86px; float:left; position:relative;left:22%;
    }

          .search_engine{
        background-color: rgb(255, 254, 218) !important; width: 39% !important;  float: left; display: block;  clear:left; margin-top: 5px;
    }

        .search_engine_button {
        clear:left; float:left !important; left:35% !important; margin-top: 15px;
    }




}

@media (min-width: 200px) {

    /*.options_header {
        height:200px;
    }

    .logo_hkobc_mobile {
        display:block;
    }

    .logo_hkobc {
        display:none;
    }*/


.accordion-xs .headings { display: none; }

.serviceTitlePlusMain { color:#263a7f; font-weight:bold; font-size:14px; text-align:center; }

.serviceTitlePlus { color:#263a7f; text-decoration:underline; }

/*.serviceCountryT{ display:none;}*/




.accordion-xs .tr { border-bottom-color: #fff; }

.accordion-xs .th,
 .accordion-xs .td {
  float: none;
  width: auto;
  padding: 0;
}

.accordion-xs .accordion-xs-toggle {
  /*background-color: #f8f9f9;   */
  color: #323d42;
  padding: 10px;
  cursor: pointer;
}

.accordion-xs .accordion-xs-toggle:hover { background-color: #e9fdff; }

.accordion-xs .accordion-xs-toggle:after {
  content: '\2b';
  float: left;
  margin-right:5px;
  color:red;
}

.accordion-xs .accordion-xs-toggle.collapsed:after { content: '\2212';   }

.accordion-xs-collapse .inner { padding: 10px; }

.accordion-xs-collapse .td:before { font-weight: bold; }

/*.accordion-xs-collapse .serviceCountry:before { content: 'Country: '; }*/

.accordion-xs .accordion-xs-toggle:after {
  /*content: '\2b';*/
  content: 'more>>';
  float: right;
  /*margin-right:5px;*/
  padding-top:2px;
  color:red;  
  font-family:'Open Sans',sans-serif;
  font-size:12px;
  font-weight:bold;
  margin-top:2px;
  position:relative;
  top:20px;
  color:#263a7f;
}
}




.logo_hkobc {
    background-image: url("../images/logo_hkobc.png");
    float: left;
    width: 180px;
    height: 56px;
}


.topMenuLink {

background-color:none;
border: 0px;
color: #000;

}

.topMenuLink:hover {

background-color:none;border: 0px;color: #000;

}




.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.clearfix::before, .clearfix::after {
    content: " ";
    display: table;
}

.clearfix::after {
    clear: both;
}
.clearfix::before, .clearfix::after {
    content: " ";
    display: table;
}

.step_ul {
    background: #b0b0b0 none repeat scroll 0 0;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: relative;
}


.step_ul li.current {
    position: relative;
}
.step_ul li {
    float: left;
    line-height: 36px;
    text-align: center;
    /*width: 25%;*/
}

.step_ul li.current a::before {
    border-bottom: 18px solid transparent;
    border-left: 18px solid #fff;
    border-top: 18px solid transparent;
    content: "";
    position: absolute;
    right: -20px;
    top: 0;
}

.step_ul li.current a::after {
    border-bottom: 18px solid transparent;
    border-left: 18px solid #f45555;
    border-top: 18px solid transparent;
    content: "";
    position: absolute;
    right: -18px;
    top: 0;
}

.step_ul li.current a {
    background: #f45555 none repeat scroll 0 0;
    color: #fff;
}
.step_ul li a {
    color: #fff;
    display: block;
    font-family: "Roboto Condensed",sans-serif;
    padding: 0;
    font-size:18px;
}

.step_ul li.current a {
    color: #fff;
}
.step_ul li a {
    color: #fff;
   font-family: "Roboto Condensed",sans-serif;
}





.arrow-up {
    border-bottom: 5px solid #2f2f2f;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    height: 0;
    width: 0;
}
.arrow-down {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
    height: 0;
    width: 0;
}
.arrow-right {
    border-bottom: 19px solid transparent;
    border-left: 5px solid #f45555;
    border-top: 17px solid transparent;
    height: 0;
    width: 0;
}
.arrow-right-executed {
    border-bottom: 19px solid transparent;
    border-left: 5px solid #4c4c4c;
    border-top: 17px solid transparent;
    height: 0;
    width: 0;
}

.arrow-left {
    border-bottom: 10px solid transparent;
    border-right: 10px solid blue;
    border-top: 10px solid transparent;
    height: 0;
    width: 0;
}
#arrows-examples div {
    margin: 0 0 0px;
}



.b_bgfix_active {
    /*background: #f45555 none repeat scroll 0 0;*/
    background: #f45555 none repeat scroll 0 0;
    height: 35px;
    left: 0;
    position: absolute;
    width: 70%; /* width: 1000px;*/
}


.b_bgfix {
    /*background: #f45555 none repeat scroll 0 0;*/
    background: #4c4c4c none repeat scroll 0 0;
    height: 36px;
    left: 0;
    position: absolute;
    width: 70%; /* width: 1000px;*/
}

.b_bgfix2 {
    background: #b0b0b0 none repeat scroll 0 0;
    height: 36px;
    left: 0;
    position: absolute;
    /*width: 1000px;*/
    top: -1px;
}
.control_con {
    background: #f45555 none repeat scroll 0 0;
    margin: 0;
}

.control_con2 {
    background: #b0b0b0 none repeat scroll 0 0;
    margin: 0;
}

.control_con3 {
    background: #4c4c4c none repeat scroll 0 0;
    margin: 0;
    height:38px;
}

.control_con3_hide {
    display:none;
}

.step_ul li.pre_li {
    /*background: #f45555 none repeat scroll 0 0;*/
    background: #f45555 none repeat scroll 0 0;
}
.step_ul li.next_li {
    background: #b0b0b0 none repeat scroll 0 0;
}

.tableTitleText {
    font-weight: bold; background-color: #8a918e; color: rgb(255, 255, 255); vertical-align: middle; color:#fff;
}

.OrderCustomerAmount {
    width:80px;
    float:right;
    margin-top:-5px;
}



.OrderServiceAmount {
    text-align:center;
    display:block;
    height: 30px;
    padding-top: 3px;
}

.OrderCustomerAmount2 {
    text-align:right;
    display:block;
    clear:right;
    font-size:18px;
}

.servicePriceValue {
    font-size:15px;
}

.profile_link {
    float:left;left:5px; position: relative; top: 4px; background-color: #fff;border: 1px solid #fff;color: #323d42;display: block;font-family: 'Roboto Condensed',sans-serif;font-size: 16px;font-weight: 400;line-height: 23px; text-transform: uppercase;transition: border-color 0.3s ease 0s, color 0.3s ease 0s, background 0.3s ease 0s; 
}

.profile_link:hover {
    text-decoration:underline;
}

.header_main {
    background-color: #fff;border-top: 1px solid #fff;box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.15);height: auto;line-height: 1.5em;min-height: 75px;padding-left: 15px;padding-right: 15px;/*position: fixed;*/top: 0;width: 100%;z-index: 1001;
}


.button_x {
    float: right; 
    color: rgb(255, 255, 255); 
    position: relative; 
    border-radius: 12px; 
    text-align: center; 
    padding-top: 2px;  
    right: 4px; width: 18px; 
    height: 18px; top: -20px; 
    text-decoration:none;
    background-color: rgb(255, 255, 255); 
    opacity: 0.40;
}

.button_x:hover {
    text-decoration:none;
    background-color: rgb(255, 255, 255); opacity: 0.60;
}


/** ACCORDION CSS START **/

.accordion-xs .tr { border-bottom-color: #fff; }

.accordion-xs .th,
 .accordion-xs .td {
  float: none;
  width: auto;
  padding: 0;
}

.accordion-xs .accordion-xs-toggle {
  /*background-color: #f8f9f9;   */
  content:'more';
  color: #323d42;
  padding: 10px;
  cursor: pointer;
}

.accordion-xs .accordion-xs-toggle:hover { background-color: #e9fdff; }

.accordion-xs .accordion-xs-toggle:after {
  /*content: '\2b';*/
  content: 'more>>';
  float: right;
  /*margin-right:5px;*/
  padding-top:2px;
  color:red;
  font-family:'Open Sans',sans-serif;
  font-size:12px;
  font-weight:bold;
  margin-top:2px;
  position:relative;
  top:20px;
  color:#263a7f;


}

.accordion-xs .accordion-xs-toggle:after {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family:'Open Sans',sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  color:#263a7f;
}


.accordion-xs .accordion-xs-toggle.collapsed:after { 
    /*content: '\2212'; */
    content:'close>>';
    float:right;
    
}

.accordion-xs-collapse .inner { padding: 10px; }

.accordion-xs-collapse .td:before { font-weight: bold; }

/*.accordion-xs-collapse .serviceCountry:before { content: 'Country: '; }*/

.accordion-xs .accordion-xs-toggle:after {
   color: #263a7f;
    display: inline-block;
    font-family:'Open Sans',sans-serif;
    font-style: normal;
    font-weight: 400;
    height: 20px;
    line-height: 0;
    position: relative;
    top: 4px;
}
/** ACCORDION CSS END **/

.btn_circle_icon {
    width:30px; 
    height:30px; 
    cursor:pointer; 
    border-radius: 21px; 
    color: #fff; 
    font-size: 17px; 
    display:block; 
    float: left; 
    padding-top: 5px; 
    text-align: center; 
    background-color: #f45555;
}

.btn_circle_title {
    background-color: #d3d3d3;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    float: left;
    font-size: 50px;
    height: 80px;
    padding-top: 16px;
    text-align: center;
    width: 80px;
}


.btn_circle_icon:hover {
    background-color: #b0b0b0;
}

.btn_logout {
    background-color:#8b9599; border-color:#8b9599; margin-right: 0px; margin-top: -3px; float: left; margin-right: 5px;  padding: 0px 5px 0px 0px; height: 32px; border-radius: 6px;
}

.btn_logout:hover {
    background-color:#b0b0b0; border-color:#8b9599;
}

.validation-msg {
   float:left; text-align:center;
}

.validation-msg > ul {
    margin:0;padding:0; list-style:none; color:rgb(244, 85, 85); font-weight:bold; margin:10px 0px 20px 0px; 
}

.action_label {
     color:#0070ba; text-decoration:underline; 
}


.logo_hkobc_mobile {
    background-image: url("../images/logo_hkobc.png");
    float: left;
    width: 180px;
    height: 56px;
 
}