/*Global Rules start*/
body {font-family: 'Open Sans', sans-serif}/*for testing purpose*/
/*Global Rules end*/


/*Navbar start*/
.scrolled {background-color: rgba(0, 0, 0, .5)}/*jQuery trick*/
/*Navbar end*/


/*Header start*/
.header {color: #fff; background: url("../images/header.jpg") no-repeat top center; overflow: hidden;
    
            background-size: cover;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
    
        height: 100vh;/*Or min-height: 300px for example*//*to solve the mobile header problem use height: 950px*/
        position: relative}
.header .overlay {width: 100%; height: 100%; background-color: rgba(0, 0, 0, .6); position: absolute; top: 0; left: 0}
.header .centering-vh {margin-top: 25vh}
@media (max-width: 991px) {     .header .centering-vh {margin-top: 60px}  } 
.header h1 {font-weight: bold; font-size: 60px}
@media (max-width: 991px) {     .header h1 {text-align: center}      } 
.header h1 span {font-weight: normal; color: #ff8b38}
.header h1 ~ .lead {font-size: 30px}
@media (max-width: 991px) {     .header h1 ~ .lead {text-align: center}   }
.header h1 ~ .lead::after {content: ""; display: block; width: 70px; height: 2px; background-color: #fff; margin: 25px 0}
@media (max-width: 991px) {     .header h1 ~ .lead::after {margin: 25px auto}      } 
.header button {background: transparent; padding: 5px 15px; border: 2px solid #fff; margin-top: 20px}
@media (max-width: 991px) {     .header button {margin: 30px auto; display: block}    } 
.header form {width: 360px; background-color: #fff; border-radius: 5px; overflow: hidden}
.header form h2 {color: #333; background-color: #f5f5f5; font-size: 18px; font-weight: bold; padding: 15px; margin-top: 0; margin-bottom: 30px}
.header form h2 span {color: #ff8b38}
.header form .form-control {margin: 0 auto 40px; border: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid #ccc; width: 80%}
.header form input[type="submit"] {background-color: #ff8b38; padding: 15px; border-radius: 0}
@media (max-width: 991px) {     .text-center-xs {text-align: center}  }
/*Header end*/


/*Social Media start*/
.social-media {padding: 10px; box-shadow: -2px -5px 13px #000;
                      -webkit-box-shadow: -2px -5px 13px #000;
                         -moz-box-shadow: -2px -5px 13px #000;
                           -o-box-shadow: -2px -5px 13px #000}

@media (max-width: 991px) {     .social-media {text-align: center}      } 
.social-media h4 {font-weight: bold; margin-bottom: 5px}
@media (max-width: 991px) {     .social-media h4 {margin-bottom: 10px}      } 
.social-media p {color: #a1a1a1; line-height: 1.4}
.social-media i {cursor: pointer; color: #ccc; margin: 20px 15px; transition: all .3s ease-in-out;
                                                          -webkit-transition: all .3s ease-in-out;
                                                             -moz-transition: all .3s ease-in-out;
                                                               -o-transition: all .3s ease-in-out}
.social-media .fa-facebook:hover {color: #3b5998}
.social-media .fa-twitter:hover {color: #1da1f2}
.social-media .fa-google-plus:hover {color: #dd4b39}
.social-media .fa-pinterest:hover {color: #bd081c}
.social-media .fa-instagram:hover {color: #405de6}
.social-media .fa-stumbleupon:hover {color: #eb4924}
.social-media .fa-rss:hover {color: #f26522}
/*Social Media end*/


/*Tabs start*/
.tabs {padding: 80px 0; background-color: #f5f5f5}
@media(max-width: 991px) {  .tabs {text-align: center}   }
.tabs .tab-switch li {background-color: #333; color: #fff; border-bottom: 1px solid #fff; height: 110px; line-height: 110px; font-size: 20px; cursor: pointer}
.tabs .tab-switch li.selected, .tabs .tab-switch li:hover {background-color: #ff8b38}
.tabs .tabs-content div:not(.tab-one) {display: none}
.tabs .tabs-content h3 {margin-top: 0; font-weight: bold; margin-bottom: 20px; letter-spacing: -1px}
.tabs .tabs-content .lead {font-size: 18px; color: #7e7e7e; line-height: 1.6}
.tabs .tabs-content button {background-color: #ff8b38; color: #fff}
/*Tabs end*/


/*Sublist start*/
.sublist {padding: 80px 0}
@media(max-width: 991px) {  .sublist {text-align: center}   }
.sublist .sublist-img {margin-top: 50px}
.sublist .sublist-h {font-weight: bold}
.sublist .sublist-p {line-height: 1.6; margin-bottom: 30px}
.sublist .list-icon {margin-bottom: 30px; overflow: hidden}
.sublist .list-icon i {width: 40px; height: 40px; line-height: 36px; text-align: center; color: #ff8b38; border: 2px solid #ff8b38; border-radius: 50%; margin-right: 20px; margin-top: 20px}
@media(max-width: 991px) {  .sublist .list-icon i {float: none !important; margin: 10px 0}   }
.sublist .list-icon .text-info {width: calc(100% - 70px)}
@media(max-width: 991px) {  .sublist .list-icon .text-info {float: none !important; width: 100%}   }
.sublist .list-icon .text-info h4 {font-weight: bold}
/*Sublist end*/


/*Standard Picture start*/
.standard-picture {padding: 80px 0; background-color: #f5f5f5}
@media(max-width: 991px) {  .standard-picture {padding: 40px 0; text-align: center}  }
.standard-picture .standard-h {font-weight: bold; margin-top: 50px}
.standard-picture .standard-p {line-height: 1.6; margin-bottom: 30px}
/*Standard Picture end*/


/*This Is Awesome start*/
.awesome {padding: 80px 0}
.awesome .awesome-h {font-weight: bold; font-size: 50px}
.awesome .awesome-p {margin-bottom: 50px; color: #a9aaac}
.awesome i {color: #ff8b38; width: 70px; height: 70px; line-height: 68px; border: 2px solid #ff8b38; border-radius: 50%}
.awesome .fa-keyboard-o {font-size: 35px}
.awesome .feat-h {font-weight: bold; margin-top: 20px; margin-bottom: 20px}
.awesome .feat-p {color: #a9aaac}
/*This Is Awesome end*/


/*Pricing Options start*/
.pricing {padding: 80px 0; background-color: #f5f5f5}
.pricing .pricing-h {font-weight: bold; font-size: 40px}
.pricing .pricing-p {margin-bottom: 50px; color: #a9aaac}
.pricing .price-box {background-color: #fff}
.pricing .price-box .plan-h {background-color: #333; color: #fff; font-weight: bold; padding: 15px 0; margin: 0; border-bottom: 1px solid #fff}
.pricing .price-box .option-price {background-color: #333; padding: 10px 0 20px; font-weight: bold; border-bottom: 5px solid #ff8b38}
.pricing .price-box .option-price .price {color: #fff; font-size: 70px; display: block}
.pricing .price-box .option-price .price .usd {font-size: 30px}
.pricing .price-box .option-price .period {color: #adadad; font-weight: bold; font-style: italic}
.pricing .configuration li {padding: 10px; border-bottom: 1px solid #f5f5f5; color: #8c8c8c}
.pricing .most-popular {background-color: #ff8b38; color: #fff; padding: 5px 10px 10px; margin-bottom: 0; font-weight: bold}
.pricing .basic, .pricing .enterprise {margin-top: 35px}
/*Pricing Options end*/


/*Testimonials start*/
.testimonials {padding: 80px 0}
.testimonials .testimonials-p {margin-bottom: 40px}
.testimonials .client-say {background-color: #f5f5f5; color: #8e8f93; margin-bottom: 20px; padding: 20px; position: relative}
.testimonials .client-say::after {content: ""; width: 0; height: 0; display: block; border-style: solid; border-width: 15px; border-color: #ff8b38 transparent transparent; position: absolute;
                    bottom: -28px;
                    left: 26px}
.testimonials .media-heading {font-weight: bold; margin-top: 20px}
.testimonials .media-body p {color: #a9aaac}
/*Testimonials end*/


/*Stylish start*/
.stylish {color: #fff; background: url("../images/stylish.png") no-repeat top center; min-height: 320px;
    
            background-size: cover;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
    
        position: relative}
.stylish .overlay {width: 100%; height: 100%; background-color: rgba(0, 0, 0, .6); position: absolute; top: 0; left: 0; padding: 60px 0}
.stylish .stylish-p {color: #a9aaac}
.stylish .stylish-button {margin: 30px auto; display: block; padding: 8px 20px; border: 2px solid #fff; background: transparent}
.stylish .heading-border-center::after {background-color: #fff}
/*Stylish end*/


/*Contact Us start*/
.contact-us {padding: 80px 0}
.contact-us .contact-us-p {color: #a9aaac; margin-bottom: 40px}
.contact-us form input[type="text"], .contact-us form input[type="email"] {margin-bottom: 20px; border: none; box-shadow: none; border-bottom: 1px solid #e0e0e0; border-radius: 0}
.contact-us form textarea {height: 178px; border: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid #e0e0e0}
.contact-us .contact-us-button {margin: 30px auto; display: block; padding: 8px 20px; border: 2px solid #fff; background-color: #ff8b38; color: #fff; border-radius: 8px; font-size: 16px; font-weight: bold}
/*Contact Us end*/


/*Footer start*/
.footer {background-color: #000; color: #eee; padding: 20px; font-size: 18px}
/*Footer end*/



/*My Own Framework start*/
.heading-border::after {content: ""; display: block; width: 65px; height: 3px; background-color: #ff8b38; margin: 25px 0}
@media(max-width: 991px) {  .heading-border::after {margin: 25px auto}   }
.heading-border-center::after {content: ""; display: block; width: 65px; height: 3px; background-color: #ff8b38; margin: 25px auto}
@media (max-width: 767px) {
    .text-center-xs {text-align: center}
}
/*My Own Framework end*/