body{background: #f0f3f5;}
@import "css/fonts.css";
body{font-family: Helvetica Neue; font-size: 14px;}
.page-wrapper{background: #fff; padding-bottom: 0;}
header{padding:10px 0; transition: all 0.5s ease;}
header.fixed{background: #fff; padding: 10px 0; position: fixed; width: 100%; box-shadow: 0 0 10px #CCC; z-index: 10; top: 0;}
header.fixed .topmenu{padding-top: 0;}
a:hover, a:focus{text-decoration: none;}
header.fixed img{height: 40px;}
.btn-long{padding-left: 30px; padding-right: 30px;}
.btn-round{border-radius: 3px;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .cfont{font-weight: normal;}
.btn:focus{box-shadow: none;}
.btn, .form-control, .alert, .card{border-radius: 2px;}
.btn-xs{font-size: 90%; padding: 3px 5px;}
.text-light{color: #EEE;}
.qmenu a{color: #fff;}

.btn-round{border-radius: 2px;}
.btn-flat{border-radius: 0;}
.topbar{background: #222; padding: 8px 0; font-size: 13px; color: #AAA;}
.topbar ul{list-style: none; padding: 0; margin: 0; text-align: right;}
.topbar ul li{display: inline; margin-left: 20px; }

.topmenu{list-style: none; margin: 0; padding: 0; text-align: right; font-weight: normal; padding-top: 20px;}
.topmenu li{display: inline; position: relative;  font-size: 12px;  letter-spacing: 1px;}
.topmenu li a{display: inline-block; padding: 10px 15px 20px; color: #444;}
.topmenu li a:hover, .topmenu li.active a{text-decoration: none; color: #f00;}
.topmenu li a i{margin-right: 5px;}
.topmenu li .dropmenu{display: none; position: absolute; left: 0; top: 30px; width: 230px; z-index: 2;}
.topmenu li .submenu{position: relative; background: #FFF; box-shadow: 1px 1px 1px #DDD; text-align: left; margin-top: 18px; }
.topmenu li .submenu ul{list-style: none; padding: 0; margin: 0; }
.topmenu li .submenu ul li{ border-bottom: solid 1px #DDD; display: block; }
.topmenu li .submenu ul li:last-child{ border-bottom: none; }
.topmenu li .submenu ul li a{padding: 10px; display: block; font-size: 13px; }
.topmenu li.services-menu .dropmenu{width: 600px; margin-left: -180px;}
.topmenu li.services-menu .dropmenu .submenu ul li{ width: 49%; float: left; }
.topmenu li.services-menu .dropmenu .submenu ul li:nth-child(even){ width: 49%; float: left; margin-left: 10px; }
header.fixed .submenu{margin-top: 17px;}

.topmenu li:hover > .dropmenu{ display: block; }
.topmenu li:last-child a{padding-right: 0;} 

.welcome-wrapper{padding-top: 100px; border-bottom: solid 1px #DDD; background: url(img/banner2.jpg) center bottom no-repeat;}

.banner-about{padding: 0 0 40px; color: #444; }
.banner-about img{max-height: 80px; border-radius: 5px;}
.banner-about h1{font-size: 50px;  margin-bottom: 20px;}
.banner-about h1 span{font-size: 40px; }
.banner-about .subheading{font-size: 15px; color: #444;}
.banner-about .btn-lg{font-size: 13px;}
.subheading ul{margin: 0 0 20px; padding: 0;}
.subheading ul li{display: inline; position: relative; margin-right: 15px;}
.subheading ul li+li:before{content: ' '; display: block; position: absolute; width: 5px; height: 5px; border-radius: 5px; background: #444; left: -12px; top: 7px;}
.subheading a{color: #222;}
.subheading a:hover, .subheading a:focus{color: #f00; text-decoration: none;}
.heading{margin-bottom: 30px;}
hr{margin-bottom: 40px;}

.inner-header{background: #fff; padding-bottom: 10px; padding-top: 10px; border-bottom: solid 1px #DDD; transition: all 0.5s ease;}
.inner-header img{max-height: 60px;}
.inner-header .topmenu{padding-top: 10px;}
.inner-header.fixed .topmenu{padding-top: 0;}

.call-phone{font-size: 20px; padding-top: 40px; color: #666; }
.call-phone span{font-size: 30px; color: #444; text-shadow: 0 0 2px #FFF;}

.technology{background: url(img/replay-bg.png) left bottom no-repeat #FEFEFE; padding: 50px 0; border-top: solid 2px #0096ca; border-bottom: solid 2px #0096ca;}
.technology img{height: 80px; margin: 0 auto; display: block;}

.clients{padding: 30px 0;}
.client-logo{background: #fff; border: solid 1px #DDD; box-shadow: 1px 1px 1px #DDD; background: #fff; padding: 10px; border-radius: 3px; vertical-align: middle; line-height: 60px;}
.client-logo img{max-height: 60px;}

.we-hiring{position: fixed; left:10px; bottom:10px; z-index: 2; background: #fff; border-radius: 10px; width: 200px; overflow: hidden; }
/*==========Offers=================*/
.offers-wrapper{padding: 40px 0; border-top: solid 1px #DDD;}
.offers-wrapper img{width: 100%; box-shadow: 1px 1px 1px #DDD;}
.table-offer tr td:last-child{text-align: right;}
.whybox{background: #fff; padding: 20px 20px 20px 100px; font-size: 24px; position: relative; box-shadow: 1px 1px 1px #DDD; text-align: center; line-height: 25px; color: #fff; border-radius: 3px; margin-bottom: 10px;}
.whybox .f-icon{position: absolute; left: 25px; top: 28px; font-size: 40px; border-right: solid 1px #EEE; width: 80px; }
.whybox span{font-size: 13px; text-transform: uppercase; letter-spacing: 3px;}

/*=========Services==============*/
.services-wrapper{padding: 40px 0; background: #fff;}
.services{background: #fff;  border-radius: 3px; overflow: hidden; margin: 15px 0;}
.services-info{padding: 10px; font-size: 13px; text-align: center;}
.services-info h4{font-size: 14px; font-weight: bold;}
.services-info p{font-weight: 300; line-height: 1.3;}
.services img{width: 60px; margin: 30px auto; display: block;}

/*============Andriod App Wrapper=============*/
.android-app-wrapper{background: url("img/android-red.jpg") center top fixed; background-size: cover; color: #fff; padding: 40px 0 0; }
.apps-row{margin-top: 30px;}
.apps-row ul{list-style: none; margin: 0; padding: 0;}
.apps-row ul li{display: inline; width: 140px; margin: 10px 5px;}
.apps-row img{width: 100px; background: #fff; padding: 5px; border-radius:10px;}


/*==============Testimonials=================*/
.testimonials{padding: 40px 0; border-top: solid 1px #DDD;}
.test-box{background: #fff; padding: 20px; box-shadow: 2px 2px 2px #DDD; border-radius: 3px; text-align: center;}
.test-img{margin-bottom: 30px;}
.test-img img{width: 80px; height: 80px; border-radius: 100%; margin: 10px auto; display: block;}
.test-info{font-size: 13px;}
.test-author{padding-top: 30px; font-size: 12px;}

/*==============Projects =================*/

.project-wrappers{background: #fff; background-size: cover; padding: 40px;}
.project{position: relative; margin-bottom: 20px; border-radius: 3px; overflow: hidden; padding: 5px; border: solid 1px #DDD;}
.row-about{position: absolute; z-index: 9; left: 5px; bottom: 5px; width: calc(100% - 10px); padding: 10px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.07) 11%,rgba(0,0,0,0.19) 24%,rgba(0,0,0,0.69) 64%,rgba(0,0,0,0.85) 79%,rgba(0,0,0,0.97) 93%,rgba(0,0,0,1) 100%);}
.row-about a, .row-about .post-meta, .row-about .post-meta a{color: #fff;}
.row-about h3{font-size: 14px; font-weight: bold;}
.row-about h3 a:hover{text-decoration: none;}
.post-meta ul{list-style: none; padding: 0; margin: 0; font-size: 12px; font-weight: 300; color: #DDD;}
.post-meta ul li{display: inline; margin-right: 25px; position: relative;}
.post-meta > ul > li+li:before{position: absolute; content: ""; top: 50%; left: -15px; width: 5px; height: 5px; margin-top: -3px; border-radius: 100%; background-color: #c8cacc;}
.post-meta a{font-size: 12px; color: #888; }
.post-meta a:hover{text-decoration: none;}
.post-meta ul ul{display: inline;}
.post-meta ul ul li{margin-right: 5px;}


/*============Team Wrapper===============*/
.team-wrapper{background: #0acd9d; padding: 40px 0 10px; }
.team-wrapper h4{color: #fff;}
.team{background: #fff; box-shadow: 1px 1px 1px #888; border-radius: 3px; overflow: hidden; margin-bottom: 30px; position: relative;}
.team-body{padding: 10px; position: absolute; left: 0; width: 100%; bottom: 0; background: rgba(0, 0, 0, 0.2);}
.team-body .text-muted{color: #DDD !important;}
.team-img{border-radius: 3px 3px 0 0; overflow: hidden; background: #DDD; height: 160px; border-bottom: solid 1px #CCC;}
.team-button{padding: 10px; background: #f8f8f8; border-top: solid 1px #DDD; border-radius: 0 0 3px 3px;}
.team-body{text-align: center;}
.team-body h6{font-size: 13px; margin: 0; color: #fff;}
.team-body span{font-size: 10px;}
.team-wrapper hr{border-color: #69f0cf; }



/*=====================Products=====================*/
.products{background: #FFF; margin-bottom: 20px; box-shadow: 2px 2px 2px #DDD; border-radius: 3px; overflow: hidden;}
.product-banner{overflow: hidden;}
.product-summary{padding: 20px; text-align: justify;}
.product-summary p{color: #888;}
.product-summary .btn, .btn-sm{font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 8px 10px;}

/*======Footer --*/

.social{list-style: none; margin: 0; padding: 0;}
.social li{display: inline;}
.social li a{font-size: 12px; border: solid 1px #888; padding: 5px 8px; width: 30px; text-align: center; display: inline-block; border-radius: 20px; height: 30px; vertical-align: middle; line-height: 20px;}
.social li a:hover{background: #888; color: #fff;}
footer{background: #fff; padding: 30px 0 15px; border-top: solid 1px #EEE;}
footer h4{font-size: 16px; margin-bottom: 20px;}
footer ul{list-style: none; margin: 0; padding: 0; font-weight: normal; font-size: 14px;}
footer ul li{margin-bottom: 5px;}
footer ul li a{color: #444;}
footer a:hover{text-decoration: none;}
.copyright{background: #f8f8f8; color: #444; text-align: center; font-size: 12px; padding: 8px 0; border-top: solid 1px #EEE;}
#navicon{display: none;}
.footer-logo img{max-height: 40px; margin-top: 25px; margin-bottom: 15px;}

/*==================Inner Pages=========================*/

.page-inner{margin: 40px auto;}
.page-banner{border-radius: 3px 3px 0 0; overflow: hidden; position: relative; max-height: 400px;}
.page-heading{position: absolute; bottom: 0; left: 0; padding: 15px; color: #fff; z-index: 2; text-shadow: 1px 1px 2px #555;}
.page-content{background: #fff; padding: 20px; border-radius: 0 0 3px 3px; overflow: hidden;}
.page-content p{ text-align: justify;}
.page-content hr{margin: 10px 0 20px;}
.page-content img.pull-left{margin: 0 15px 15px 0;}
.page-content img.pull-right{margin: 0 0 15px 15px;}

.services-page{margin-bottom: 20px;}

.services-box{margin-bottom: 15px; overflow: hidden; background: #fff; border-bottom: solid 1px #DDD; border-right: solid 1px #DDD;}
.services-img{max-height: 160px; overflow: hidden;}
.services-box h6{padding: 10px;  border-radius: 0 0 3px 3px; margin: 0; font-size: 14px; }
.services-box a{color: #444;}
.services-box a:hover{color: #ff0000; text-decoration: none;}

.card{margin-bottom: 15px;}
.service-row{margin-bottom: 15px;}
.service-row p{color: #888;}
.service-row h6{font-size: 14px; position: relative; margin-bottom: 16px;}
.service-row h6:after{content: ' '; display: block; position: absolute; left: 0; height: 2px; width: 40px; background: #2aabd2; top: 20px;}

.box-contact{background: #1883E9; padding: 20px; font-size: 30px; color: #fff; font-weight: 300; text-align: center; text-shadow: 1px 1px 1px #888; border-radius: 3px;}
.box-contact span{font-size: 16px; color: #EEE; margin-right: 20px;}

.page-content ~ .box-contact{border-radius: 0 0 3px 3px;}


/*====================Sidebar===================*/
.sidebar a{display: block; color: #444;}
.sidebar a:hover, .sidebar li:hover a{color: #f00; text-decoration: none;}

.row-sm{margin-left: -10px; margin-right: -10px;}
.row-xs{margin-left: -5px; margin-right: -5px;}

.row-sm .col-sm-1, .row-sm .col-sm-2, .row-sm .col-sm-3, .row-sm .col-sm-4, .row-sm .col-sm-5, .row-sm .col-sm-6, .row-sm .col-sm-7, .row-sm .col-sm-8, .row-sm .col-sm-9, .row-sm .col-sm-10, .row-sm .col-sm-11, .row-sm .col-sm-12{padding-left: 10px; padding-right: 10px;}

.row-xs .col-sm-1, .row-xs .col-sm-2, .row-xs .col-sm-3, .row-xs .col-sm-4, .row-xs .col-sm-5, .row-xs .col-sm-6, .row-xs .col-sm-7, .row-xs .col-sm-8, .row-xs .col-sm-9, .row-xs .col-sm-10, .row-xs .col-sm-11, .row-xs .col-sm-12{padding-left: 5px; padding-right: 5px;}

.btn-inverse{background: #333; border: solid 1px #111; color: #fff;}
.btn-inverse:hover{background: #111; color: #fff;}
.btn-sd{box-shadow: 1px 1px 1px #888; padding-left: 20px; padding-right: 20px;}

.box{background: #FFF; margin-bottom: 15px; border-radius: 3px; border: solid 1px #E5E5E5;}
.box-round{border-radius: 3px;}
.box-2p{padding: 20px;}
.box-3p{padding: 25px;}
.box-p{padding: 15px;}
.box-bt{border-top: solid 1px #E5E5E5;}
.box-bb{border-bottom: solid 1px #E5E5E5;}
.box-footer{background: #f6f7f8; border-top: solid 1px #e9eaed; border-radius: 0 0 2px 2px; padding: 15px; display: table; width: 100%; color: #888;}
.box-header{background: #f6f7f8; border-bottom: solid 1px #e9eaed; padding: 15px; border-radius: 2px 2px 0 0;}
.box-border-less{border: none;}
.box-footer ul{padding: 0; list-style: none; margin: -15px;}
.box-footer ul li{display: table-cell; text-align: center; border-right: solid 1px #e9eaed; padding: 15px 20px;}
.box-footer ul li:last-child{border: none;}
.box-footer ul li a{color: #888;}
.box-gray{border-top: solid 2px #888888;}
.box-success{border-top: solid 2px #0acd9d;}
.box-info{border-top: solid 2px #44e2e4;}
.box-pink{border-top: solid 2px #da11dc;}
.box-yellow{border-top: solid 2px #f6c70c;}
.box-warning{border-top: solid 2px #eea236;}
.box-danger{border-top: solid 2px #c7254e;}
.box-primary{border-top: solid 2px #0573e3;}
.box-inverse{border-top: solid 2px #444;}
.box hr{margin: 15px 0;}
.box-title{margin: 0; padding: 0;}
.box-img{margin-left: -1px; margin-right: -1px; margin-top: -1px;}
.box-hr{border-bottom: solid 1px #ddd;}
.box-label{width: 40%; display: block; float: left; color: #da11dc; font-weight: bold;}
.box-label-info{margin-left: 45%;}
.box-label-info:after, .box-label:before{content: ' '; display: block; clear: both;}
.box-img{background: #EEE; border-bottom: solid 1px #e9eaed;}
.box-bb, .box-bt{position: relative;}
.box-dismiss{position: absolute; right: 0; top: 0; padding: 16px 20px;  color: #E5E5E5; cursor: pointer;}
.box-dismiss:hover{color: #666;}
.box-preicon{border-right: solid 1px #E5E5E5; padding: 10px; margin: -11px 10px -11px -5px;}

.box-ul{list-style: none; padding: 0; margin: 0;}
.box-ul li{border-bottom: solid 1px #EEE; padding: 10px 15px; }
.box-ul li:last-child{border: none;}
.box-ul li:hover{background: #EEE;}
.box-ul li a{display: block;}
.box-ul li ul{list-style: none; padding-left: 10px; display: none;}
.box-ul li.active ul{display: block;}
.box-ul li ul li{padding-left: 0;}
.box-ul li ul li:first-child{border-top: solid 1px #EEE; margin-top: 6px;}
.box-ul li ul li a{color: #888; font-size: 90%;}

.box table.table{margin: 0;}
.alert{border-radius: 2px; padding: 10px;}

.box-footer-column{padding: 0; display: block; width: 100%; background: #f6f7f8; border-top: solid 1px #DDD;}
.box-footer-column ul{list-style: none; padding: 0; margin: 0;}
.box-footer-column ul li{display: table-cell; padding: 10px; text-align: center; border-right: solid 1px #DDD;}
.box-footer-column ul li:last-child{border: none;}
.box-footer-column ul li a{color: #666;}
.box-footer-column ul li a:hover{color: #444; text-decoration: none;}

.form-control.input-brd, .form-control.input-brd:focus, .form-input-brd input.form-control{border: none; border-bottom: solid 1px #EEE; box-shadow: none; outline: none;}
.hr-or{margin: 40px auto; border-top: solid 1px #c00e3b; position: relative; font-size: 90%;}
.hr-or:after{position: absolute; left: 49%; width: 40px; height: 40px; border-radius: 100%; display: block; content: ' OR '; background: #c00e3b; color: #fff; top: -20px; text-align: center; line-height: 34px; border: solid 3px #fff;}

.contact-form .form-control{border-radius: 2px; font-size: 13px;}
.android-heading{padding-top: 30px;}
.row-payment img{width: 40px; background: #fff;}
.row-payment .card-header{padding: 5px;}
.row-payment .card-block strong{display: inline-block; width: 90px;}
.jumbotron{padding: 1em; border-radius: 3px;}
.jumbotron ul{list-style: none; margin: 0; padding: 0;}

.material{background: url(img/feature-banner.jpg) center -80px no-repeat; padding: 100px 0; color: #fff;}
.material ul{list-style: none; margin: 0; padding: 0;}
.material ul li{display: inline-block; margin-bottom: 20px; margin-right: 20px;}
.material .fbox{width: 140px; height: 130px; padding: 10px; background: #FFF; text-align: center; border-radius: 2px; color: #000; }
.material .fbox img{height: 70px; display: block; margin: 0 auto 10px; }
/*===================Courses*=======================================*/
.course-wrapper{background: #fff; border-radius: 3px; border-right: solid 1px #DDD; border-bottom: solid 1px #DDD; padding: 60px 15px 15px; text-align: center; position: relative; margin-top: 30px; margin-bottom: 30px;}

.course-logo{position: absolute; left: 0; width: 100%; text-align: center; top: -40px;}
.course-logo img{background: #fff; border: solid 1px #DDD; padding: 8px; width: 80px; border-radius: 80px;}
.course-info h3{color: #c00e3b;}
.course-more{border-top: solid 1px #EEE; padding-top: 10px; margin-top: 15px; text-align: left; font-size: 12px; color: #888;}

/*======================Portfolio Page===================*/
.portfolio-menu{list-style: none; margin: 0; padding: 0;}
.portfolio-menu li{display: inline-block;}

.site{background: #fff; position: relative; box-shadow: 2px 2px 2px #DDD; border-radius: 3px; margin-bottom: 10px;}
.site-img img{border-radius: 3px 3px 0 0;}
.site-info{padding: 10px; text-align: center;}
.site-info h3{font-weight: bold; margin-bottom: 6px;}
/*=====================Career Page====================*/
.jobs{ margin-bottom: 10px;}
.jobs-body{display: none; padding: 15px; border: solid 1px #f8f8f8; border-radius: 3px; border-top: none;}
.jobs-header h4{color: #fff; padding: 10px; margin: 0; border-radius: 3px 3px 0 0;}
.jobs-info{background: #f8f8f8; padding: 10px; border-radius: 0 0 3px 3px;}
.jobs-info ul{list-style: none; padding: 0; margin: 0; display: inline;}
.jobs-info ul li{display: inline-block; margin-right: 10px;}
.jobs-info ul li:last-child{float: right;}

/*========================Plans Page=====================*/
.plans h5{margin: 0; padding: 15px 0; text-transform: uppercase; font-size: 16px; letter-spacing: 1px;}
.plans tr th:first-child{text-align: left;}
.plans .big{font-size: 20px;}
@media (max-width: 1000px) {
    .banner-about h1{font-size: 25px;}
    .banner-about h1 span{font-size: 25px;}
    .banner-about .subheading{font-size: 14px;}
    .box-contact{font-size: 20px;}
    .topmenu li a{padding-left: 0; padding-right: 0;}
}


@media (max-width: 768px) {
    .topmenu li a{padding: 10px 2px;}
    .banner-about h1{font-size: 20px;}
    .page-wrapper{max-height: none; background-position: center 0; padding-bottom: 20px; }
    .android-heading{padding-top: 40px;}
    .banner-about h1 span{font-size: 20px;}
    .banner-about .subheading{font-size: 14px;}
    .box-contact{font-size: 18px;}
    .box-contact span{margin-right: 10px;}    
}


@media (max-width: 600px) {
    .topbar{text-align: center !important;}
    .topbar ul{text-align: center;}
    .test-box, .offer{margin-bottom: 15px;}
    #navicon{text-align: right; display: block; margin-top: -40px;}
    #navicon i{padding: 5px 10px; background: #fff; border: solid 1px #DDD; border-radius: 2px; font-size: 20px; cursor: pointer;}
    .topmenu{ text-align: left; box-shadow: 2px 2px 2px #888; }
    .topmenu li{display: block; border-bottom: solid 1px #DDD; font-size: 11px;}
    .topmenu li:last-child{border-bottom: none; }
    .topmenu li a{padding-left: 15px; display: block;}
    .topmenu li a i.fa{float: right; margin-right: 10px;}
    .topmenu li a:hover{background: #f8f9f5;}
    .topmenu li:hover > .dropmenu{display: none; }
    .topmenu li .submenu{background: #EEE;}
    .inner-header .topmenu{padding: 0;}
    .topmenu li .dropmenu{position: relative; top: 0; }
    .topmenu li.services-menu .dropmenu, .topmenu li.about-menu .dropmenu{width: 100%; margin: 0;}
    .topmenu li.services-menu .dropmenu .submenu, .topmenu li.about-menu .dropmenu .submenu{margin: 0; max-height: 300px; overflow: auto;}
    .topmenu li.services-menu .dropmenu .submenu ul li, .topmenu li.services-menu .dropmenu .submenu ul li:nth-child(even){ width: 100%; float: none; margin: 0; }
    .topmenu li.about-menu .dropmenu .submenu ul li, .topmenu li.about-menu .dropmenu .submenu ul li:nth-child(even){ width: 100%; float: none; margin: 0; }
    nav{display: none; position: absolute; z-index: 20; left: 0; top: 12px; width: 100%; background: #fff; }
    header.fixed nav{top: 35px;}
    .logo img{max-height: 40px;}
    .team{margin-bottom: 10px;}
    .android-heading{padding-top: 0; font-size: 14px;}
}