/* -----------------------------------------------------------
    Author       : Tanvirul Haque
    Template Name: Appi - Responsive App Landing Page
    Version      : 1.0
------------------------------------------------------------*/
/*============================================================
    CSS TABLE OF CONTENTS
==============================================================
    01. GENAREL CSS STYLE
    02. START BOOTSTRAP NAVIGATION OVERRIDES CSS STYLE
    03. START HEADER AREA CSS STYLE
    04. START FEATURE AREA CSS STYLE
    05. START ABOUT AREA & WHY CHOOSE CSS STYLE
    06. START SCREENSHOT AREA CSS STYLE
    07. START FEATURES VIDEO AREA & DOWNLOAD AREA CSS STYLE
    08. START TEAM AREA CSS STYLE
    09. START PRICING AREA CSS STYLE
    10. START TESTIMONIAL AREA CSS STYLE
    11. START BLOG AREA CSS STYLE
    12. START SUBSCRIVE AREA CSS STYLE
    13. START FOOTER AREA CSS STYLE
    14. SINGLE BLOG PAGE CSS STYLE
=============================================================*/
/*
* -------------------------------------------------------------
*    01. GENAREL CSS STYLE
* -------------------------------------------------------------
*/
body {
    width: 100%;
    height: 100%;
    color: #666;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    background-color: #fff;
    font-family: 'Ubuntu', sans-serif;
}
html,
body { height: 100% }
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: #111;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
}
h1 > span,
h2 > span,
h3 > span,
h4 > span,
h5 > span,
h6 > span {
    color: #02c0ef;
}
a {
    text-decoration: none;
    font-family: 'Ubuntu', sans-serif;
    -webkit-transition: all 0.36s;
    transition: all 0.36s;
}
a:hover {
    color: #fff;
    text-decoration: none;
}
a:focus {
    outline: none;
    text-decoration: none;
    color: #fff;
}
p { line-height: 2 }
ul,
li {
    margin: 0;
    padding: 0;
}
fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}
.section-padding { padding: 80px 0 }
.section-title {
    margin-bottom: 60px;
}
.section-title h2 {
    margin-bottom: 15px;
    font-weight: 900;
    font-size: 42px;
}
.section-title p {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    padding-bottom: 20px;
    position: relative;
    width: 60%;
}
.section-title p:before {
    border-bottom: 3px solid #555;
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 25%;
}
.section-title p:after {
    background: #02c0ef none repeat scroll 0 0;
    content: "";
    left: 0;
    right: 0;
    bottom: -3px;
    height: 10px;
    width: 10px;
    margin: 0 auto;
    position: absolute;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}
.button{
    font-family: 'Ubuntu', sans-serif;
    text-transform: uppercase;
    display: inline-block;
    padding: 12px 25px;
    font-weight: 700;
    font-size: 14px;
    color: #333 !important;
    letter-spacing:1px;
    border: 2px solid #333;
    background: transparent none repeat scroll 0 0;
    border-radius: 4px;
    -webkit-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
}
.button i{
    font-size: 16px;
    margin-right: 10px;
}
.button:hover,
.button:focus {
    background: #333 !important;
    color: #fff !important;
}
.preloader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../img/preloader.gif) center no-repeat #fff; 
}
.owl-carousel .item  {
    display: block;
    width: 100%;
    height: auto;
}
.carousel-indicators .active { background-color: #333 }
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span { background: #333 none repeat scroll 0 0 }
/*
* -------------------------------------------------------------
*    01. / END GENAREL CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    02. START BOOTSTRAP NAVIGATION OVERRIDES CSS STYLE
* -------------------------------------------------------------
*/
.header-top-area {
    position: relative;
    width: 100%;
    z-index: 999;
    -webkit-transition: all 0.36s ease-out;
            transition: all 0.36s ease-out;
}
.sticky-wrapper {
    position: absolute;
    width: 100%;
    z-index: 999;
}
.navbar-default {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    margin-bottom: 0;
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
    width: 100%;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus { background-color: transparent }
.navbar-brand {
    color: #fff !important;
    font-family: 'Lato', sans-serif;    
    font-size: 28px;
    font-weight: 900;
    padding: 25px 0;
    letter-spacing: 1px;
    -webkit-transition: 0.36s;
    transition: 0.36s;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form { border-color: #fff }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: #fff }
.navbar-default .navbar-toggle .icon-bar { background-color: #333 }
.mainmenu li a {
    color: #fff !important;
    font-family: 'Ubuntu', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    padding: 30px 15px;
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
}
.mainmenu ul.nav.navbar-nav li a:hover { color: #333 !important }
.navbar-default .navbar-toggle { background: #fff none repeat scroll 0 0 }
.is-sticky .header-top-area{
    background: #fff;
    box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24);
}
.is-sticky .mainmenu li a {
    padding: 28px 15px;
    color: #666 !important; 
}
.is-sticky .mainmenu ul.nav.navbar-nav li.active a { color: #333 !important }
.is-sticky .navbar-brand {
    color: #333 !important;
    font-size: 26px;
    padding: 25px 0;
}
/*
* -------------------------------------------------------------
*    02. / END BOOTSTRAP NAVIGATION OVERRIDES CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    03. START HEADER AREA CSS STYLE
* -------------------------------------------------------------
*/
.header-area { height: 100%; }
.home-welcome-area,
.home-welcome-area div { height: 100% }
.home-welcome-area div.home-display-table-cell,
.home-welcome-area div.home-display-table-cell div { height: auto }
.home-welcome-area {
    background: url(../img/bg/reuniao-sites.jpg) scroll 0 0;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.home-welcome-area:after {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
}
.home-display-table {
    width: 100%;
    height: 100%;
    display: table;
}
.home-display-table-cell {
    display: table-cell;
    vertical-align: middle;
}
.home-welcome-area h2 {
    color: #fff;
    font-size: 62px;
    font-weight: 900;
    margin-bottom: 20px;
    margin-top: 100px;
    text-transform: capitalize;
}
.home-welcome-area p {
    width: 80%;
    color: #fff;
    font-size: 16px;
    margin-bottom: 30px;
}
.home-btn a { margin-right: 5px }
.home-btn > .button {
    background: #fff !important;
    color: #333 !important;
}
.home-btn > .button:hover {
    background: #333 none repeat scroll 0 0 !important;
    color: #fff !important;
}
/*
* -------------------------------------------------------------
*    03. / END HEADER AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    04. START FEATURE AREA CSS STYLE
* -------------------------------------------------------------
*/
.features-area {
    background: #f6f6f6 none repeat scroll 0 0;
    padding-bottom: 50px;
}
.single-feature {
    background: #fff;
    margin-bottom: 30px;
    padding: 40px;
    -webkit-transition: all 0.36s ease-in-out 0s;
            transition: all 0.36s ease-in-out 0s;
}

.single-feature:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.single-feature i {
    font-size: 52px;
    color: #02c0ef;
    -webkit-transition: all 0.36s ease-in-out 0s;
            transition: all 0.36s ease-in-out 0s;
}
.single-feature:hover.single-feature i{ color: #02c0ef }
.single-feature h4 { margin: 20px 0 10px 0 }
.single-feature p {
    font-size: 13px;
    margin: 0;
}
/*
* -------------------------------------------------------------
*    04. / END FEATURE AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    05. START ABOUT AREA & WHY CHOOSE CSS STYLE
* -------------------------------------------------------------
*/
.about-area,
.why-choose-area { padding-bottom: 0px }
.about-text,
.why-choose-text { margin-top: 100px }
.about-img,
.why-choose-img {
  margin: auto auto 0;
  max-width: 400px;
}
.about-text > h2,
.why-choose-text > h2 { margin-bottom: 20px }
.about-text > p,
.why-choose-text > p { margin-bottom: 20px }
.about-text ul,
.why-choose-text ul { margin-bottom: 25px }
.about-text ul li,
.why-choose-text ul li {
    font-size: 13px;
    margin-bottom: 10px;
}
.about-text li i,
.why-choose-text li i {
    color: #333;
    margin-right: 5px;
}
/*
* -------------------------------------------------------------
*    05. / END ABOUT AREA & WHY CHOOSE CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    06. START SCREENSHOT AREA CSS STYLE
* -------------------------------------------------------------
*/
#screenshot-carousel .item img {
    display: block;
    margin: 0 auto;
    width: auto;
}
/*
* -------------------------------------------------------------
*    06. / END SCREENSHOT AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    07. START FEATURES VIDEO AREA & DOWNLOAD AREA CSS STYLE 
* -------------------------------------------------------------
*/
.features-video-area {
    background: rgba(0, 0, 0, 0) url("../img/bg/howtowork-bg.jpg") no-repeat fixed center center / cover ;
    position: relative;
    z-index: 111;
}
.download-area {
    background: rgba(0, 0, 0, 0) url("../img/bg/download-bg.jpg") no-repeat fixed center center / cover ;
    position: relative;
    z-index: 111;
}
.features-video-area:after,
.download-area:after {
    background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -111;
}
.video-area iframe {
    width: 100%;
    height: 310px;
    border: medium none;
}
.video-text  h3 { margin-bottom: 20px }
.download-icon img {
    -webkit-transition: all 0.36s ease-in-out 0s;
            transition: all 0.36s ease-in-out 0s;
}
.download-icon img:hover { -webkit-transform: scale(1.05); transform: scale(1.05) }
.download-icon a {
    display: inline-block;
    margin-right: 10px;
}
/*
* -------------------------------------------------------------
*    07. / END FEATURES VIDEO AREA & DOWNLOAD AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    08. START TEAM AREA CSS STYLE
* -------------------------------------------------------------
*/
.team-area { padding-bottom: 50px }
.single-team{
    -webkit-transition: all 0.36s ease-in-out 0s;
            transition: all 0.36s ease-in-out 0s;
}
.single-team:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.single-team-img{
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}
.team-overlay {
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 0.6s ease-in-out 0s;
            transition: all 0.6s ease-in-out 0s;
}
.single-team:hover .team-overlay {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.team-title { margin-top: 130px }
.team-title p { margin: 0 }


.team-social-link { overflow: hidden }
.team-social-link a {
    display: inline-block;
    font-size: 26px;
    margin-top: 10px;
    -webkit-transform: translate3d(0px, 200%, 0px);
            transform: translate3d(0px, 200%, 0px);
    -webkit-transition: all 0.36s ease-in-out 0s;
            transition: all 0.36s ease-in-out 0s;
}
.team-social-link a:hover{ color: #333 !important }
.single-team:hover .team-social-link a {
    color: #666;
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
}
.single-team:hover .team-social-link a:first-child {
    -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
}
.single-team:hover .team-social-link a:nth-child(2) {
    -webkit-transition-delay: 0.15s;
            transition-delay: 0.15s;
}
.single-team:hover .team-social-link a:nth-child(3) {
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
}
.single-team:hover .team-social-link a:nth-child(4) {
    -webkit-transition-delay: 0.25s;
            transition-delay: 0.25s;
}
.single-team:hover .team-social-link a:nth-child(5) {
    -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
}
/*
* -------------------------------------------------------------
*    08. / END TEAM AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    09. START PRICING AREA CSS STYLE
* -------------------------------------------------------------
*/
.single-pricing {
    background: #fff;
    padding: 50px 25px;
    -webkit-transition: all 0.36s ease 0s;
            transition: all 0.36s ease 0s;
}
.single-pricing:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.price {
    padding-bottom: 25px;
    -webkit-transition: all 0.6s ease 0s;
            transition: all 0.6s ease 0s;
}
.single-pricing h3 {
    border-bottom: 1px solid #ddd;
    display: inline-block;
    font-family: "Ubuntu",sans-serif;
    font-size: 16px;
    letter-spacing: 3px;
    margin-bottom: 10px;
    padding: 0 0 10px;
    -webkit-transition: all 0.36s ease 0s;
            transition: all 0.36s ease 0s;
}
.price h4 {
    color: #666;
    font-size: 52px;
    font-weight: 900;
    -webkit-transition: all 0.36s ease 0s;
            transition: all 0.36s ease 0s;
}
.price h4 sup { font-size: 18px }
.price span { font-size: 12px }
.pricing-list {
    list-style: outside none none;
    text-align: center;
    padding: 0 25px;
}
.pricing-list li {
    border-bottom: 1px solid #eee;
    color: #161616;
    padding: 15px 0;
    -webkit-transition: all 0.36s ease 0s;
            transition: all 0.36s ease 0s;
}
.pricing-btn { padding-top: 25px }
.single-pricing.recommended {
    box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08);
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
}
.single-pricing.recommended .price h4,
.single-pricing:hover .price h4 { color: #333 }
/*
* -------------------------------------------------------------
*    09. / END PRICING AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    10. START TESTIMONIAL AREA CSS STYLE
* -------------------------------------------------------------
*/
.testimonial-area { background: #f6f6f6 }
.testimonial-area .item img {
    background: #ddd;
    border-radius: 50%;
    height: 80px;
    margin: 0 auto 15px;
    padding: 5px;
}
.testimonial-area .item h6 {
    font-weight: 400;
    margin: 10px 0 15px;
}
.testimonial-img { position: relative; }
.testimonial-img:before {
  bottom: 0;
  color: #ddd;
  content: "\f10d";
  font-family: fontawesome;
  font-size: 75px;
  left: 0;
  position: absolute;
  right: 0;
  top: 105px;
  z-index: -1;
}
.cutomers-rating i {
    color: #ffc207;
    font-size: 16px;
    margin-bottom: 15px;
}
/*
* -------------------------------------------------------------
*    10. / END TESTIMONIAL AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    11. START BLOG AREA CSS STYLE
* -------------------------------------------------------------
*/
.single-blog {
    background: #fff;
    -webkit-transition: all 0.36s ease 0s;
            transition: all 0.36s ease 0s;
}
.single-blog:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.single-blog img { padding: 10px 10px 0px 10px }
.blog-content { padding: 25px }
.blog-content span {
    font-size: 12px;
    margin: 10px 0;
    display: block;
    color: #333;
}
.blog-content a h2 { font-size: 20px }
.blog-content span i { color: #333 }
.blog-content a.read-more {
  color: #999;
  display: block;
  font-size: 12px;
  text-align: right;
  -webkit-transition: all 0.36s ease-in-out 0s;
  transition: all 0.36s ease-in-out 0s;
}
a.read-more:hover { color: #333 }
.blog-btn { margin-top: 30px }
/*
* -------------------------------------------------------------
*    11. / END BLOG AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    12. START SUBSCRIVE AREA CSS STYLE
* -------------------------------------------------------------
*/
.subscrive-area { background: #f6f6f6 none repeat scroll 0 0; }
.signup { margin-top: 30px }
.signup input[type="email"] {
    background: transparent none repeat scroll 0 0;
    border: 2px solid #333;
    border-radius: 4px;
    padding: 12px;
    width: 300px;
}


.form-control {
    background-color: transparent;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: none;
    color: #333;
    height: auto;
    padding: 12px;
    -webkit-transition: all 0.36s ease 0s;
            transition: all 0.36s ease 0s;
}
.form-control:hover,
.form-control:focus {
    border-color: #000;
    box-shadow: none;
}
.success {
    text-align: center;
    margin: 80px 0;
    font-size: 18px;
    font-weight: 700;
}
/*
* -------------------------------------------------------------
*    12. / END SUBSCRIVE AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    13. START FOOTER AREA CSS STYLE
* -------------------------------------------------------------
*/
.copyright {
    background: #333;
    padding: 60px 0;
    color: #fff;
}
.social-icon { margin-bottom: 15px }
.social-icon h3 {
    color: #fff;
    margin-bottom: 15px;
}
.social-icon a i {
    color: #fff;
    font-size: 28px;
    line-height: 28px;
    margin-right: 5px;
    -webkit-transition: all 0.36s ease-in-out 0s;
            transition: all 0.36s ease-in-out 0s;
}
.social-icon a:hover i {
    color: #fff !important;
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
}
.copyright p { margin: 0 }
/*
* -------------------------------------------------------------
*    13. / END FOOTER AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    14. SINGLE BLOG PAGE CSS STYLE
* -------------------------------------------------------------
*/
.breadcrumb-main{
    background:url(../img/bg/breadcrumb-bg.jpg);
    background-position: center center;
    background-size: cover;
    position: relative;
    height:  350px;
    z-index:1;
}
.breadcrumb-main::after {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: -1;
}
.breadcrumb-title{ padding-top: 150px }
.breadcrumb-title h2{
    font-weight: 900;
    color: #fff;
}
.breadcrumb-title p,
.breadcrumb-title p a{ color: #fff }
.single-blog-details,
.comments-area { padding-bottom: 50px }
.single-blog-details h3 {
    margin: 30px 0 20px;
    font-weight: 700;
}
.single-blog-info{ margin: 0 0 20px }
.single-blog-info span {
    color: #999;
    font-size: 12px;
    margin-right: 10px;
    display: inline-block;
}
.single-blog-info span i,
.single-comment span i {
    margin-right: 5px;
    font-size: 14px;
    color: #333;
}
.comments-area h4,
.comment-form h4 {
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 3px double #eee;
}
.single-comment img {
    float: left;
    width: auto;
    height: 100px;
    margin-right: 15px;
    border: 5px solid #f0f0f0;
}
.single-comment h5 { margin-bottom: 10px }
.single-comment span {
    color: #999;
    display: block;
    font-size: 12px;
    margin-bottom: 10px;
}
.single-comment p {
    font-size: 13px;
    overflow: hidden;
}
.reply-comment { margin-left: 50px }
.single-comment span.reply-button {
    display: block;
    float: right;
    cursor: pointer;
}
.single-widget{ margin-bottom: 50px }
.search-box input{
    margin: 0;
    height: 50px;
    padding: 0 0 0 15px;
    border: 1px solid #ccc;
}
.search-box input:hover,
.search-box input:focus {   border: 1px solid #333 }
.latest-post h4,
.categories h4,
.tags h4 {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px double #eee;
}
.latest-post > .single-latest-post{ margin-bottom: 30px }
.categories li a {
    color: #555;
    display: block;
    font-size: 14px;
    padding: 0 0 10px 0;
}
.single-latest-post img {
    background: #f0f0f0 none repeat scroll 0 0;
    float: left;
    margin-right: 10px;
    padding: 3px;
    width: 30%;
}
.single-latest-post a h2 {
    font-size: 16px;
    margin: 5px 0;
    -webkit-transition: all 0.36s ease 0s;
            transition: all 0.36s ease 0s;
}
.single-latest-post span { font-size: 12px }
.single-latest-post span i {
    margin-right: 5px;
    font-size: 14px;
    color: #333;
}
.single-latest-post:hover a h2{ color: #000 }
.categories li a:hover { color: #333 }
.categories li a i {
    margin-right: 10px;
    color: #333;
}
.tags li a {
    border: 1px solid #ccc;
    color: #555;
    display: block;
    float: left;
    font-size: 12px;
    margin: 5px;
    padding: 5px 15px;
    text-transform: uppercase;    
    -webkit-transition: all 0.36s ease 0s;
            transition: all 0.36s ease 0s;
}
.tags li a:hover {
    background: #333 none repeat scroll 0 0;
    border: 1px solid #333;
    color: #fff;
}
/*
* -------------------------------------------------------------
*    14. END BLOG PAGE CSS STYLE
* -------------------------------------------------------------
*/