@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
 @import url(https://fonts.googleapis.com/css?family=Vollkorn:400,700);
 @import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
/* GLOBAL STYLES -------------------------------------------------- */
/* Padding below the footer and lighter body text */
 body, html {
     width: 100%;
     height: 100%
}
 body {
     color: #5a5a5a;
     font-family: 'Open Sans', Arial, sans-serif;
}
 a, a:hover, .btn {
     outline: none!important;
}
 button, button:hover, .btn {
     outline: none!important;
}
 .no-padding {
     padding-left: 0;
     padding-right: 0;
}
 section {
     padding: 75px 0 100px;
}
 .btn {
     border-radius: 4px;
}
 .text-green {
     color: #0099ff;
}
 h1, h2, h3, h4, h5 {
     font-family: 'Oswald', serif;
     color: #232322;
}
 h1 {
     font-size: 4.5vw;
}
 h2 {
     font-size: 4vw;
}
 .btn-tranparent {
     border: 1px solid #fff;
     color: #fff;
}
 .btn-tranparent:hover, .btn-tranparent:focus {
     border: 1px solid #fff;
     color: #000;
     background: #fff 
}
 .btn-green {
     border: 1px solid #008ae6;
     color: #008ae6;
}
 .btn-green:hover, .btn-green:focus {
     border: 1px solid #008ae6;
     color: #fff;
     background: #008ae6;
}
 .no-gutter > [class*='col-'] {
     padding-right:0;
     padding-left:0;
}
 .loaders {
     width: 100%;
     box-sizing: border-box;
     display: flex;
     flex: 0 1 auto;
     flex-direction: row;
     flex-wrap: wrap;
}
 .loaders .loader {
     box-sizing: border-box;
     display: flex;
     flex: 0 1 auto;
     flex-direction: column;
     flex-grow: 1;
     flex-shrink: 0;
     flex-basis: 25%;
     max-width: 25%;
     height: 200px;
     align-items: center;
     justify-content: center;
}
 .loader{
    display: table;
     height: 100%;
     position: fixed;
     width: 100%;
     z-index: 1200;
}
 .loader-bg{
    background: #171717
}
 .loader-inner {
     display: table-cell;
     text-align: center;
     vertical-align: middle;
}
 .slideInDown {
     -webkit-animation-name: slideInDown;
     animation-name: slideInDown;
     -webkit-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
}
 @-webkit-keyframes slideInDown {
     0% {
         -webkit-transform: translateY(-100%);
         transform: translateY(-100%);
         visibility: visible;
    }
     100% {
         -webkit-transform: translateY(0);
         transform: translateY(0);
    }
}
 @keyframes slideInDown {
     0% {
         -webkit-transform: translateY(-100%);
         transform: translateY(-100%);
         visibility: visible;
    }
     100% {
         -webkit-transform: translateY(0);
         transform: translateY(0);
    }
}
/*-------------- Top Header --------------*/
 .top-bar {
     background-color: transparent;
     border: medium none;
     border-radius: 0;
     margin-bottom: 0;
     padding: 15px 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: 999;
}
 .top-bar .navbar-nav li a {
     color: #fff;
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
}
 .top-bar .navbar-nav > .active > a, .top-bar .navbar-nav > .active > a:focus, .top-bar .navbar-nav > .active > a:hover, .top-bar .navbar-nav li a:hover, .top-bar .navbar-nav li a:focus {
     color: #0099ff;
     background: transparent 
}
 .top-bar a.navbar-brand {
     color: #fff;
     font-size: 30px;
     font-weight: 800;
     padding-top: 16px;
     text-transform: uppercase 
}
 .top-bar a.navbar-brand span {
     color: #0099ff;
}
 .top-bar a.navbar-brand:hover {
     color: #0099ff;
}
 .top-bar a.navbar-brand:hover span {
     color: #fff;
}
 .affix {
     animation: 1s ease 0s normal both 1 running slideInDown;
     background-color: rgba(0, 0, 0, 0.8);
     padding: 0.75em 0;
     position: fixed;
     z-index: 1000;
}
 .color-bg-nav {
     background: #1f2d3c;
     margin-top: 0;
     padding: 5px 0 
}
/*-------------- Top Banner --------------*/
 .jumbotron {
     background: url(../img/bc.jpg) 0 -100px no-repeat;
     background-size: cover;
     height: 100vh;
     color: #fff;
     padding: 100px 0;
     margin-bottom: 0;
     float: left;
     width: 100%;
     position: relative;
}
 .jumbotron::before {
     background: rgba(0,0,0,0.85);
     position: absolute;
     width: 100%;
     height: 100%;
     content: "";
     top: 0;
     left: 0;
     z-index: 1 
}
 .jumbotron .content-sec {
     position: relative;
     z-index: 3;
     margin-top: 5%;
}
 .jumbotron .content-sec h1 {
     font-size: 52px;
}
 .jumbotron .content-sec p {
     text-transform: none;
     font-size: 18px;
     line-height: 30px;
     font-weight: 400 
}
 .jumbotron .content-sec .btn {
     margin-top: 10px 
}
 .intro-section {
     float: left;
     width: 100%;
     padding-bottom: 0 
}
 .intro-section .intro-text {
     color: #434e5b;
     font-size: 22px;
     font-weight: 700;
     line-height: 35px;
     padding: 0 13% 20px;
     text-align: center;
     text-transform: uppercase;
     position: relative;
}
 .intro-section .intro-text:before {
     background: #B24592;
     content: "";
     height: 4px;
     left: 50%;
     margin-left: -80px;
     position: absolute;
     width: 160px;
     bottom: 0;
}
 .intro-section p {
     font-size: 17px;
     margin-top: 38px;
     padding: 0 17%;
     text-align: center;
}
 .intro-section .mockup-block {
     float: left;
     margin-top: 60px;
     text-align: center;
     width: 100%;
}
 .intro-section .mockup-block img {
     margin: 0 auto 
}
 .under-banner {
     background: #008ae6;
     float: left;
     width: 100%;
     color: #fff 
}
 .under-banner .content-box {
     padding: 10px;
}
 .under-banner h3 {
     text-transform: uppercase;
     font-weight: 700;
     margin-bottom: 0;
     color: #fff;
     font-size: 21px;
}
 .under-banner i {
     font-size: 30px;
     height: 46px;
     line-height: 41px;
     width: 63px;
}
 .product-sec {
     float: left;
     width: 100% 
}
 .product-sec h2 {
     margin-bottom: 40px;
     top: 0;
     margin-top: 0 
}
 .product-sec h2 small {
     font-size: 28px;
     text-transform: uppercase;
     font-family: 'Open Sans', Arial, sans-serif;
     font-weight: 700;
     padding: 0 9px 4px;
     position: relative 
}
 .product-sec h2 small::after {
     content: "";
     position: absolute;
     height: 1px;
     width: 50%;
     background: #c8c8c8;
     bottom: 0;
     margin-left: -25%;
     left: 50%;
}
 .product-sec .img-sec img {
     width: 256px;
}
 .product-sec .content-block {
     float: left;
     margin-top: 30px;
}
 .product-sec .heading {
     color: #008ae6;
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 10px;
     text-transform: uppercase;
}
 .product-sec p {
     font-size: 16px;
     font-weight: 300;
     line-height: 28px;
     margin-bottom: 19px;
     padding-right: 10px;
}
 .product-sec .product-block {
     padding-top: 30px;
     padding-bottom: 30px 
}
/* -----------About Sec---------- */
 .about-sec {
     background: url(../img/about-bg.html) no-repeat 0 -236px;
     background-size: cover;
     float: left;
     width: 100%;
     padding: 40px 0;
     position: relative 
}
 .about-sec::before {
     background: rgba(0,0,0,0.8);
     content: "";
     position: absolute;
     width: 50%;
     right: 0;
     height: 100%;
     top: 0 
}
 .about-sec .content-block {
     padding: 0 20px;
}
 .about-sec h3 {
     color: #0099ff;
     font-size: 27px;
     text-transform: uppercase;
     margin-bottom: 30px;
     font-weight: 700 
}
 .about-sec h3:before {
     background: #fff;
     content: "";
     height: 1px;
     left: 35px;
     margin-top: 40px;
     position: absolute;
     width: 110px;
}
 .about-sec p {
     font-size: 16px;
     font-weight: 300;
     line-height: 27px;
     color: #fff;
}
 .about-sec ul {
     list-style: none;
     padding: 0 
}
 .about-sec ul li {
     font-weight: 600;
     color: #fff;
     padding: 10px 0 10px 30px;
     position: relative;
     padding-left: 20px 
}
 .about-sec ul li::before {
     background: #008ae6 none repeat scroll 0 0;
     content: "";
     height: 10px;
     left: 0;
     position: absolute;
     top: 16px;
     width: 9px;
     border-radius: 50% 
}
 .about-sec .btn-success {
     text-transform: uppercase;
     font-size: 15px;
     margin-top: 20px;
     font-weight: 600;
}
/* -----------Services Sec---------- */
 .services-sec {
     float: left;
     width: 100%;
     padding-bottom: 40px 
}
 .services-sec a {
     color: #0099ff;
}
 .services-sec a:hover {
     color: #006bb3;
}
 .services-sec h2 {
     margin-bottom: 40px;
     top: 0;
     margin-top: 0 
}
 .services-sec h2 small {
     font-size: 28px;
     text-transform: uppercase;
     font-family: 'Open Sans', Arial, sans-serif;
     font-weight: 700;
     padding: 0 9px 4px;
     position: relative 
}
 .services-sec h2 small::after {
     content: "";
     position: absolute;
     height: 1px;
     width: 50%;
     background: #c8c8c8;
     bottom: 0;
     margin-left: -25%;
     left: 50%;
}
 .services-sec .services-container {
     color: #fff;
     margin-top: 30px;
}
 .services-sec .services-container i {
     border: 1px solid #0099ff;
     border-radius: 50%;
     font-size: 33px;
     padding: 20px;
     color: #0099ff 
}
 .service-block {
     margin-bottom: 60px;
     padding: 10px 27px 
}
 .services-sec h3 {
     font-size: 17px;
     color: #232322;
     font-family: 'Open Sans', Arial, sans-serif;
     font-weight: 600;
     text-transform: uppercase;
}
 .services-sec p {
     font-size: 16px;
     font-weight: 300;
     line-height: 27px;
     color: #232322;
}
 .blog-sec {
     background: url(../img/service-bg.html) no-repeat;
     background-size: cover;
     margin-bottom: 0;
     float: left;
     width: 100%;
     position: relative;
}
/* -----------Blog Sec---------- */
 .blog-sec::before {
     background: rgba(0,153,255,0.85);
     position: absolute;
     width: 100%;
     height: 100%;
     content: "";
     top: 0;
     left: 0;
     z-index: 1 
}
 .blog-sec h2 {
     color: #fff;
     margin: 0 0 50px;
}
 .blog-sec h2 small {
     font-size: 28px;
     text-transform: uppercase;
     font-family: 'Open Sans', Arial, sans-serif;
     font-weight: 700;
     padding: 0 9px 4px;
     position: relative;
     color: #fff;
}
 .blog-sec h2 small::after {
     content: "";
     position: absolute;
     height: 1px;
     width: 50%;
     background: #fff;
     bottom: 0;
     margin-left: -25%;
     left: 50%;
}
 .blog-sec .blog-block {
     position: relative;
     z-index: 2 
}
 .blog-sec .content-block {
     background: #fff;
     margin-bottom: 30px;
}
 .blog-sec .text-block {
     padding: 31px 40px;
}
 .blog-sec h3 small {
     display: block;
     color: #0099ff;
     margin-top: 10px;
}
 .blog-sec p {
     font-size: 16px;
     font-weight: 300;
     line-height: 28px;
     margin-bottom: 19px;
     padding-right: 10px;
}
/* -----------Testimonial Sec---------- */
 .testimonial-sec {
     float: left;
     width: 100% 
}
 .testimonial-sec h2 {
     margin-bottom: 40px;
     top: 0;
     margin-top: 0 
}
 .testimonial-sec h2 small {
     font-size: 28px;
     text-transform: uppercase;
     font-family: 'Open Sans', Arial, sans-serif;
     font-weight: 700;
     padding: 0 9px 4px;
     position: relative 
}
 .testimonial-sec h2 small::after {
     content: "";
     position: absolute;
     height: 1px;
     width: 50%;
     background: #c8c8c8;
     bottom: 0;
     margin-left: -25%;
     left: 50%;
}
 .testimonial-sec #quote-carousel {
     padding: 0 10px 30px 10px;
     margin-top: 30px;
}
 .testimonial-sec #quote-carousel .carousel-control {
     background: none;
     color: #CACACA;
     font-size: 2.3em;
     text-shadow: none;
     margin-top: 30px;
}
 .testimonial-sec #quote-carousel .carousel-control.left {
     left: -60px;
}
 .testimonial-sec #quote-carousel .carousel-control.right {
     right: -60px;
}
 .testimonial-sec #quote-carousel .carousel-indicators {
     right: 50%;
     top: auto;
     bottom: 0px;
     margin-right: -19px;
}
 .testimonial-sec #quote-carousel .carousel-indicators li {
     width: 50px;
     height: 50px;
     margin: 5px;
     cursor: pointer;
     border: 4px solid #CCC;
     border-radius: 50px;
     opacity: 0.4;
     overflow: hidden;
     transition: all 0.4s;
}
 .testimonial-sec #quote-carousel .carousel-indicators .active {
     background: #333333;
     width: 128px;
     height: 128px;
     border-radius: 100px;
     border-color: #0099ff;
     opacity: 1;
     overflow: hidden;
}
 .testimonial-sec .carousel-inner {
     min-height: 300px;
}
 .testimonial-sec .item blockquote {
     border-left: none;
     margin: 0;
}
 .testimonial-sec .item blockquote p:before {
     content: "\f10d";
     font-family: 'Fontawesome';
     float: left;
     margin-right: 10px;
}
 .testimonial-sec i {
     color: #0099ff 
}
/* -----------Contact Sec---------- */
 .contact-sec {
     background: url(../img/contact-bg.jpg) no-repeat;
     background-size: cover;
     margin-bottom: 0;
     float: left;
     width: 100%;
     position: relative;
}
 .contact-sec::before {
     background: rgba(0,0,0,0.90);
     position: absolute;
     width: 100%;
     height: 100%;
     content: "";
     top: 0;
     left: 0;
     z-index: 1 
}
 .contact-sec .form-block {
     position: relative;
     z-index: 2 
}
 .contact-sec h2 {
     color: #fff;
}
 .contact-sec label {
     color: #fff;
}
 .contact-sec p {
     font-size: 16px;
     font-weight: 300;
     color: #fff;
     margin: 20px 0;
}
 .contact-sec .phone-sec {
     font-weight: 700;
     font-size: 22px;
     color: #fff;
}
 .contact-sec .btn-tranparent {
     font-weight: 600;
     font-size: 16px;
     padding: 5px 0px;
     text-transform: uppercase;
     width: 200px;
     border-width: 1px;
     margin-top: 60px;
}
 footer {
     background: #0099ff;
     float: left;
     width: 100%;
     color: #fff;
     padding: 30px 0 
}
 footer .love-text{
     text-align: right;
}
/* RESPONSIVE CSS -------------------------------------------------- */
 @media (max-width: 640px) {
     .banner-sec h1 {
         font-size: 27px;
    }
     .banner-sec h1 small {
         font-size: 14px;
         line-height: 26px;
    }
     .banner-sec .btn-tranparent {
         margin-top: 0 
    }
     .about-sec {
         background: none;
    }
}
 @media (min-width: 768px) {
    /* Navbar positioning foo */
     .navbar-wrapper {
         margin-top: 20px;
    }
     .navbar-wrapper .container {
         padding-right: 15px;
         padding-left: 15px;
    }
     .navbar-wrapper .navbar {
         padding-right: 0;
         padding-left: 0;
    }
    /* The navbar becomes detached from the top, so we round the corners */
     .navbar-wrapper .navbar {
         border-radius: 4px;
    }
    /* Bump up size of carousel content */
     .carousel-caption p {
         margin-bottom: 20px;
         font-size: 21px;
         line-height: 1.4;
    }
     .featurette-heading {
         font-size: 50px;
    }
}
 @media (min-width: 992px) {
     .featurette-heading {
         margin-top: 120px;
    }
}
 @media (max-width:1024px){
     .jumbotron{
        background-position: 0 0
    }
}
 @media (max-width:768px){
     .top-bar .navbar-nav li a {
        font-size: 13px;
         padding: 18px 9px;
    }
     .jumbotron{
        height: 700px;
         padding-bottom: 0;
         background-size: cover;
         background-position: 0 0
    }
     .product-sec h2{
        margin-bottom: 0
    }
     .product-sec .product-block{
        padding-top:0;
         text-align: center;
    }
     .product-sec .img-sec img{
        margin: 0 auto
    }
     .product-sec .pull-right{
        float: none!important
    }
     .about-sec::before{
        width: 100%
    }
     .blog-sec .img-sec img{
        width: 100%
    }
     .blog-sec .content-block .col-sm-12{
        border-bottom: 14px solid #008ae6
    }
     .testimonial-sec #quote-carousel .carousel-indicators{
         bottom: -38px;
         left: 30%;
         width: 100%;
    }
}
 @media (max-width:767px){
     .top-bar .navbar-nav{
        background-color: rgba(26, 26, 26, 0.8);
         margin: 0;
         border-radius: 0 0 5px 5px;
    }
     .top-bar .navbar-nav li a {
        border-top: 1px solid #005c99;
         box-shadow: 0 2px 0 #1aa3ff;
         color: #ffffff;
         font-size: 16px;
         font-weight: 700;
         text-align: center;
    }
     .top-bar .navbar-nav li:first-child a{
        border-top:0;
         box-shadow: none;
    }
     .jumbotron .content-sec{
        z-index: 1;
         text-align: center
    }
     footer .love-text{
        margin-top: 10px;
         text-align: center;
         width: 100%;
    }
     footer{
        text-align: center
    }
}