/* ------------------------------------------------------------------------------

  Template Name: Bobby
  Description: Bobby - Creative Service Landing Page
  Author: Murren
  Version: 1.0
  
  1.  Global

        1.1 General
        1.2 Typography
        1.3 Iconography
        1.4 Buttons
        1.5 Forms
        1.6 Loader
        1.7 Content helpers
        1.8 Background colors
        1.9 Colors

  2.  Header 

        2.1 Navbar
        2.2 Navbar affix
        2.3 Brand
        2.4 Navigation
        2.5 Masthead 

  3.  About
  4.  Services
  5.  Video section
  6   Specialization
  7.  Team
  8.  Features
  9.  Get in touch
  10. Showcase

      10.1 Magnific popup 

  11. Prices
  12. Reviews

      12.1 Owl carousel 

  13. Contacts
  14. Footer
  15. Modals
  16. Responsive styles


    
/*-------------------------------------------------------------------------------
  1. Global
-------------------------------------------------------------------------------*/
    /* 1.1 General */
    
    @import url('bootstrap.min.css');
    @import url('font-awesome.min.css');
    @import url('et-line-fonts.css');
    @import url('owl.carousel.css');
    @import url('magnific-popup.css');
    body {
        -webkit-font-smoothing: antialiased;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.5;
        color: #000;
        height: 100%;
        overflow: hidden;
        padding-right: 0!important;
    }
    
    .loaded {
        overflow: visible;
    }
    
     ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
     ::-webkit-scrollbar-thumb {
        cursor: pointer;
        background: #002c8a;
    }
    /* 1.2 Typography */
    
    h1,
    .h1 {
        font-weight: 200;
        font-size: 40px;
        line-height: 1.1;
        margin: 0;
    }
    
    h2,
    .h2 {
        position: relative;
        font-size: 36px;
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 20px 0;
    }
    
    .section-title:after {
        content: '';
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-left: 5px;
        background-color: #002c8a;
        border-radius: 50%;
    }
    
    h3,
    .h3 {
        font-size: 17px;
        font-weight: 600;
        line-height: 1.4;
    }
    
    h4,
    .h4 {
        font-size: inherit;
        font-weight: 700;
        margin: 10px 0;
    }
    
    strong {
        font-weight: 700;
    }
    
    p {
        margin: 10px 0 0;
    }
    
    ul {
        /*list-style: none;
  padding-left: 0;*/
    }
    
    a {
        color: inherit;
        text-decoration: underline;
    }
    
    a:hover,
    a:focus {
        color: white;
        text-decoration: none;
        outline: none;
    }
    
    a:focus {
        outline: none;
    }
    /* 1.3 Iconography */
    
    .icon {
        display: inline-block;
        font-size: 50px;
        text-decoration: none;
        -webkit-transition: .3s ease;
        -o-transition: .3s ease;
        transition: .3s ease;
    }
    /* 1.4 Buttons */
    
    .btn {
        padding: 10px 30px;
        border-radius: 30px;
        border: 1px solid transparent;
        background-color: #78588C;
        font-size: 17px;
        line-height: 1.4;
        font-weight: normal;
        color: #fff;
        text-decoration: none;
        -webkit-transition: all .2s ease-out;
        -o-transition: all .2s ease-out;
        transition: all .2s ease-out;
    }
    
    .btn:focus,
    .btn:active:focus,
    .btn.active:focus,
    .btn.focus,
    .btn:active.focus,
    .btn.active.focus {
        outline: none;
    }
    
    .btn:hover,
    .btn:focus,
    .btn.focus {
        color: #fff;
        background-color: #8E6BA5;
    }
    
    .btn:active {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
    
    .btn:active,
    .btn.active {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    
    .btn-yellow {
        background-color: #002c8a;
        color: #000;
    }
    
    .btn-light-gray {
        background-color: #EBEBEB;
        color: #000;
    }
    
    .btn-light-gray:hover,
    .btn-light-gray:focus {
        background-color: #002c8a;
        color: #000;
    }
    
    .btn-b-white {
        border: 1px solid rgba(255, 255, 255, 0.6);
        background-color: transparent;
    }
    
    .btn-b-white:hover,
    .btn-b-white:focus {
        border-color: transparent;
    }
    /* 1.5 Forms */
    
    .form-control {
        height: 54px;
        padding: 6px 18px;
        font-size: 15px;
        border: none;
        border-radius: 0px;
        border: 1px solid #fff;
        color: #fff;
        background: #fff;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-appearance: none;
    }
    
    .form-control::-webkit-input-placeholder {
        color: #b8b8b8;
    }
    
    .form-control:-moz-placeholder {
        /* Firefox 18- */
        color: #b8b8b8;
    }
    
    .form-control::-moz-placeholder {
        /* Firefox 19+ */
        color: #b8b8b8;
    }
    
    .form-control:-ms-input-placeholder {
        color: #b8b8b8;
    }
    
    .form-control:focus {
        border-color: #fff;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 78, 147, .6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 78, 147, .6);
    }
    
    textarea.form-control {
        resize: none;
        height: 125px;
        padding-top: 11px;
    }
    
    .row-fields {
        margin: 0 -8px;
    }
    
    .row-fields .form-group {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    label.error {
        margin-top: 3px;
        font-size: 13px;
        font-weight: normal;
        color: #CC506F;
    }
    /* 1.6 Loader */
    
    .loader {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.97);
        z-index: 100;
        text-align: center;
    }
    
    .cssload-bell {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -109px 0 0 -107px;
        width: 214px;
        height: 218px;
        border-radius: 100%;
    }
    
    .cssload-circle {
        width: 100%;
        height: 100%;
        position: absolute;
    }
    
    .cssload-circle .cssload-inner {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        border: 11px solid rgba(233, 206, 53, 0.7);
        border-right: none;
        border-top: none;
        background-clip: padding;
        box-shadow: inset 0px 0px 21px rgba(206, 206, 53, 0.15);
    }
    
    .cssload-circle:nth-of-type(0) {
        transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
    
    .cssload-circle:nth-of-type(0) .cssload-inner {
        animation: cssload-spin 2.3s infinite linear;
        -o-animation: cssload-spin 2.3s infinite linear;
        -ms-animation: cssload-spin 2.3s infinite linear;
        -webkit-animation: cssload-spin 2.3s infinite linear;
        -moz-animation: cssload-spin 2.3s infinite linear;
    }
    
    .cssload-circle:nth-of-type(1) {
        transform: rotate(70deg);
        -o-transform: rotate(70deg);
        -ms-transform: rotate(70deg);
        -webkit-transform: rotate(70deg);
        -moz-transform: rotate(70deg);
    }
    
    .cssload-circle:nth-of-type(1) .cssload-inner {
        animation: cssload-spin 2.3s infinite linear;
        -o-animation: cssload-spin 2.3s infinite linear;
        -ms-animation: cssload-spin 2.3s infinite linear;
        -webkit-animation: cssload-spin 2.3s infinite linear;
        -moz-animation: cssload-spin 2.3s infinite linear;
    }
    
    .cssload-circle:nth-of-type(2) {
        transform: rotate(140deg);
        -o-transform: rotate(140deg);
        -ms-transform: rotate(140deg);
        -webkit-transform: rotate(140deg);
        -moz-transform: rotate(140deg);
    }
    
    .cssload-circle:nth-of-type(2) .cssload-inner {
        animation: cssload-spin 2.3s infinite linear;
        -o-animation: cssload-spin 2.3s infinite linear;
        -ms-animation: cssload-spin 2.3s infinite linear;
        -webkit-animation: cssload-spin 2.3s infinite linear;
        -moz-animation: cssload-spin 2.3s infinite linear;
    }
    
    .cssload-bell {
        /*animation: cssload-spin 5.75s infinite linear;
    -o-animation: cssload-spin 5.75s infinite linear;
    -ms-animation: cssload-spin 5.75s infinite linear;
    -webkit-animation: cssload-spin 5.75s infinite linear;
    -moz-animation: cssload-spin 5.75s infinite linear;*/
    }
    
    @keyframes cssload-spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    @-o-keyframes cssload-spin {
        from {
            -o-transform: rotate(0deg);
        }
        to {
            -o-transform: rotate(360deg);
        }
    }
    
    @-ms-keyframes cssload-spin {
        from {
            -ms-transform: rotate(0deg);
        }
        to {
            -ms-transform: rotate(360deg);
        }
    }
    
    @-webkit-keyframes cssload-spin {
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }
    
    @-moz-keyframes cssload-spin {
        from {
            -moz-transform: rotate(0deg);
        }
        to {
            -moz-transform: rotate(360deg);
        }
    }
    /* 1.7 Content helpers */
    
    .content {
        position: relative;
        background-color: #fff;
    }
    
    .rel-1 {
        position: relative;
        z-index: 1;
    }
    
    .masked {
        position: relative;
    }
    
    .masked:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    .section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    .section-content {
        margin-top: 50px;
    }
    
    .section-lg {
        padding: 120px 0;
    }
    
    .modal-body {
        /*background-image: url(../images/popup.png);*/
        background-position: bottom right;
        background-size: cover;
    }
    
    .modal-body p,
    .modal-body ul {
        color: #000;
    }
    
    .modal-footer {
        padding: 0px;
    }
    
    @media (min-width: 768px) {
        .section {
            padding-top: 110px;
            padding-bottom: 110px;
        }
        .section-content {
            margin-top: 100px;
        }
        .section-lg {
            padding: 200px 0;
        }
    }
    
    .icon-header {
        display: block;
        margin-bottom: 30px;
        font-size: 60px;
    }
    
    .icon-header.icon-dial {
        font-size: 70px;
    }
    
    .btn-section {
        margin-top: 40px;
    }
    
    .row-baseline {
        margin-top: -30px;
    }
    
    .col-baseline {
        margin-top: 30px;
    }
    /* 1.8 Background colors */
    
    .bgc-white {
        background-color: #fff;
    }
    
    .bgc-primary {
        background-color: #002c8a;
        background-size: cover;
        background-position: center;
    }
    
    .bgc-light-gray {
        background-color: #f5f5f5;
    }
    
    .bgc-yellow {
        background-color: #002c8a;
    }
    /* 1.9 Colors */
    
    .text-white {
        color: #fff;
    }
    
    .text-muted {
        opacity: 0.6;
        color: inherit;
    }
    
    .text-primary {
        color: #866F9C;
    }
    
    .text-yellow {
        color: #002c8a;
    }
    /*-------------------------------------------------------------------------------
  2. Header
-------------------------------------------------------------------------------*/
    
    .header {
        color: #fff;
        /*background:url(../images/banner-01.png) center top no-repeat;
  background-size:cover;*/
    }
    
    .video {
        position: fixed;
        top: 0;
        left: 50%;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -o-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        ;
    }
    
    .video,
    .video-background {
        background: url(../video/poster.jpg) center top no-repeat;
        background-size: cover;
    }
    /* 2.1 Navbar */
    
    .navbar {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        padding-top: 10px;
        border-radius: 0;
        font-size: 13px;
        color: #fff;
        background-color: transparent;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
    
    .container>.navbar-header,
    .container-fluid>.navbar-header,
    .container>.navbar-collapse,
    .container-fluid>.navbar-collapse {
        margin-left: 0;
    }
    
    .navbar-collapse {
        border: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        max-height: 320px;
    }
    
    .navbar-toggle {
        margin-top: 13px;
        margin-bottom: 10px;
        border: 1px solid #002c8a;
    }
    /* 2.2 Navbar affix */
    
    .navbar.affix {
        position: fixed;
        background-color: #212121 !important;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }
    
    .navbar.affix img {
        width: 50%;
    }
    
    .navbar.affix .brand {
        font-size: 33px;
    }
    /* 2.3 Brand */
    
    .brand {
        font-size: 33px;
        font-weight: 800;
        line-height: 1;
        text-decoration: none;
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }
    
    .brand .circle {
        content: '';
        display: inline-block;
        width: 13px;
        height: 14px;
        background-color: #002c8a;
        margin-left: -3px;
        border-radius: 50%;
    }
    
    .brand:hover .circle {
        background-color: #fff;
    }
    
    .brand:focus {
        color: #fff;
    }
    
    .brand:hover {
        color: #002c8a;
    }
    /* 2.4 Navigation */
    
    .navbar-nav {
        margin-top: 23px;
        font-weight: 500;
    }
    
    .navbar-nav>li>a {
        position: relative;
        padding-top: 13px;
        padding-bottom: 13px;
        text-decoration: none;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
    
    .navbar-nav>li>a:hover,
    .navbar-nav>li>a:focus,
    .navbar-nav>.active>a {
        color: #fff;
        background-color: #00517F;
    }
    
    .navbar-toggle .icon-bar {
        background-color: #002c8a;
    }
    /* 2.5 Masthead */
    
    .masthead {
        display: table-cell;
        vertical-align: middle;
        width: 1%;
        padding: 170px 0 120px;
        height: 100vh;
    }
    
    .lead {
        font-size: inherit;
        margin: 20px 0 0;
    }
    
    .lead-text {
        margin-top: 20px;
    }
    
    .lead-direct {
        margin-top: 40px;
    }
    /*-------------------------------------------------------------------------------
  3. About
-------------------------------------------------------------------------------*/
    
    .about {
        padding: 60px 0;
    }
    
    .col-box {
        font-size: 15px;
        padding: 0 30px;
    }
    
    .col-box:first-child {
        border-left: 0;
    }
    /*-------------------------------------------------------------------------------
  4. Services
-------------------------------------------------------------------------------*/
    
    .service-content {
        margin-top: 50px;
    }
    
    .letter-lg {
        opacity: 0.1;
        font-size: 130px;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: -5px;
        font-weight: 900;
    }
    
    .col-service .media-body {
        vertical-align: bottom;
        padding-bottom: 15px;
    }
    /*-------------------------------------------------------------------------------
  5. Video section
-------------------------------------------------------------------------------*/
    
    .video-section {
        background: url(../images/bg/video-section.jpg) center no-repeat;
        background-size: cover;
    }
    /*-------------------------------------------------------------------------------
  6. Specialization
-------------------------------------------------------------------------------*/
    
    .specialization {
        overflow: hidden;
    }
    
    .progress-header {
        margin-bottom: 10px;
    }
    
    .progress {
        height: 15px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0;
    }
    
    .progress-bar {
        background-color: #7B5A91;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    /*-------------------------------------------------------------------------------
  7. Team
-------------------------------------------------------------------------------*/
    
    .team-profile {
        text-align: center;
    }
    
    .team-profile img {
        margin-bottom: 20px;
        border: 3px solid #002c8a;
    }
    
    .social {
        margin-left: -10px;
    }
    
    .social .icon {
        font-size: 40px;
        margin-left: 10px;
        opacity: 0.7;
    }
    
    .team-social {
        margin-top: 20px;
    }
    /*-------------------------------------------------------------------------------
  8. Features
-------------------------------------------------------------------------------*/
    
    .row-features {
        margin-top: -100px;
    }
    
    .col-feature {
        padding-top: 100px;
        text-align: center;
    }
    /*-------------------------------------------------------------------------------
  9. Get in touch
-------------------------------------------------------------------------------*/
    
    .getintouch {
        background: url(../images/bg/getintouch.jpg) center top no-repeat;
        background-size: cover;
    }
    /*-------------------------------------------------------------------------------
  10. Showcase
-------------------------------------------------------------------------------*/
    
    .showcase {
        overflow: hidden;
        padding-bottom: 0;
    }
    
    .filter {
        text-align: center;
        color: #333;
        margin: 60px 0 60px;
    }
    
    .filter li {
        position: relative;
        display: inline-block;
        margin: 10px 20px 0;
    }
    
    .filter li a {
        text-decoration: none;
    }
    
    .filter .active {
        color: #002c8a;
    }
    
    .filter .active:before {
        content: '';
        position: absolute;
        bottom: 7px;
        left: -12px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #002c8a;
    }
    
    .row-showcase {
        margin-left: -30px;
        margin-right: -30px;
    }
    
    .col-showcase {
        color: #fff;
    }
    
    .col-showcase a:hover,
    .col-showcase a:focus {
        color: inherit;
    }
    
    .col-showcase figure {
        position: relative;
        overflow: hidden;
    }
    
    .col-showcase figure img {
        width: 100%;
    }
    
    .col-showcase figcaption {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 20px;
        background: rgba(0, 0, 0, 0.3);
        text-align: center;
        -webkit-transition: .3s ease;
        -o-transition: .3s ease;
        transition: .3s ease;
    }
    
    .col-showcase header {
        position: absolute;
        left: 20px;
        right: 20px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    
    .col-showcase h3 {
        position: relative;
        display: inline-block;
        margin: 0;
        font-size: 30px;
        line-height: 1;
    }
    
    .col-showcase h3:after {
        content: '';
        position: absolute;
        bottom: 8px;
        left: -18px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #002c8a;
    }
    
    .col-showcase .icon-showcase {
        position: absolute;
        top: -20px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    
    .col-showcase:hover figcaption {
        background: rgba(123, 90, 145, 0.9);
    }
    
    .col-showcase:hover .icon-showcase {
        -webkit-transform: translateX(-50%) rotate(-180deg);
        -moz-transform: translateX(-50%) rotate(-180deg);
        transform: translateX(-50%) rotate(-180deg);
    }
    /* 10.1 Magnific popup */
    
    .mfp-figure {
        box-shadow: none;
    }
    
    .mfp-image-holder .mfp-close,
    .mfp-iframe-holder .mfp-close {
        padding: 0;
        margin-top: -10px;
        font-family: inherit;
        font-size: 40px;
        font-weight: 300;
        line-height: 0;
        color: #002c8a;
    }
    
    img.mfp-img {
        min-height: 220px;
    }
    
    .mfp-bottom-bar {
        margin-top: -30px;
    }
    
    .mfp-title {
        font-size: 20px;
        color: #002c8a;
    }
    
    .mfp-bg {
        background-color: #000;
    }
    
    .mfp-arrow-left:after,
    .mfp-arrow-left .mfp-a {
        border-right-color: #002c8a;
    }
    
    .mfp-arrow-right:after,
    .mfp-arrow-right .mfp-a {
        border-left-color: #002c8a;
    }
    
    .mfp-with-zoom .mfp-container,
    .mfp-with-zoom.mfp-bg {
        -webkit-backface-visibility: hidden;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    
    .mfp-with-zoom .mfp-container {
        -webkit-transform: scale(0);
    }
    
    .mfp-with-zoom.mfp-bg {
        opacity: 0;
    }
    
    .mfp-with-zoom.mfp-ready .mfp-container {
        -webkit-transform: scale(1);
    }
    
    .mfp-with-zoom.mfp-ready.mfp-bg {
        opacity: 0.9;
    }
    
    .mfp-with-zoom.mfp-removing .mfp-container {
        -webkit-transform: scale(0);
    }
    
    .mfp-with-zoom.mfp-removing.mfp-bg {
        opacity: 0;
    }
    /* ------------------------------------------------------------------------------- */
    /*  11. Prices
/* ------------------------------------------------------------------------------- */
    
    .col-price {
        position: relative;
        text-align: center;
        padding: 7px;
    }
    
    .price-box {
        background-color: #fff;
    }
    
    .price-inner {
        padding: 30px 20px;
    }
    
    .price-header {
        border: 1px solid #DCD4E1;
        border-width: 1px 0;
    }
    
    .price-title {
        padding: 30px 0;
        margin: 0;
    }
    
    .price {
        line-height: 1;
        margin-bottom: 20px;
    }
    
    .price+p {
        font-size: 13px;
    }
    
    .price strong {
        font-weight: 600;
    }
    
    .price-currency {
        display: inline-block;
        font-size: 30px;
    }
    
    .price-amount {
        font-size: 50px;
    }
    
    .price-delimiter {
        font-size: 40px;
        font-weight: 300;
    }
    
    .price-period {
        font-size: 20px;
    }
    
    .price-features {
        padding: 30px 0;
    }
    
    .price-features ul {
        margin-top: 0;
    }
    
    .price-features ul li {
        padding: 8px 0;
    }
    
    .col-price.leading .price-box {}
    
    .col-price.leading .price-header {
        margin: 0 -1px;
        background-color: #78588C;
        color: #fff;
    }
    /*-------------------------------------------------------------------------------
  12. Reviews
-------------------------------------------------------------------------------*/
    
    .reviews {
        background: url(../images/bg/reviews.jpg) center top no-repeat;
        background-size: cover;
    }
    
    .reviews:after {
        background-color: rgba(114, 80, 135, 0.95);
    }
    
    .review-carousel {
        margin-top: 30px;
    }
    
    .review-author {
        margin-top: 30px;
    }
    
    .review-author strong {
        font-size: 17px;
    }
    /* 12.1 Owl carousel */
    
    .owl-pagination {
        position: absolute;
        bottom: 20px;
        left: 0;
        width: 100%;
        text-align: center;
    }
    
    .owl-prev {
        position: absolute;
        top: -30%;
        font-size: 100px !important;
        color: #000 !important;
        right: 100px;
    }
    
    .owl-next {
        position: absolute;
        top: -30%;
        font-size: 100px !important;
        color: #000 !important;
        right: 50px;
        border: none !important;
    }
    
    .owl-prev:focus {
        outline: -webkit-focus-ring-color auto 0px;
    }
    
    .owl-next:focus {
        outline: -webkit-focus-ring-color auto 0px;
    }
    
    .owl-pagination .owl-page {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 5px;
        background-color: #fff;
        border-radius: 50%;
    }
    
    .owl-pagination .owl-page.active {
        background-color: #002c8a;
    }
    /*-------------------------------------------------------------------------------
  13. Contacts
-------------------------------------------------------------------------------*/
    
    .contacts {
        padding-bottom: 0;
    }
    
    .gmap {
        margin-top: 40px;
        height: 520px;
    }
    /*-------------------------------------------------------------------------------
  14. Footer
-------------------------------------------------------------------------------*/
    
    .footer {
        padding: 20px 0;
        color: #fff;
    }
    
    .footer .social {
        margin-top: 0;
    }
    
    .copyright {
        margin: 20px 0;
    }
    /*-------------------------------------------------------------------------------
  15. Modals
-------------------------------------------------------------------------------*/
    
    .modal {
        text-align: center;
        white-space: nowrap;
    }
    
    .modal:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
    
    .modal-dialog {
        width: 95%;
        display: inline-block;
        text-align: left;
        vertical-align: middle;
        white-space: normal;
        margin: 0;
    }
    
    .modal-content {
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0;
        border: none;
    }
    
    .modal-header {
        background-color: #002c8a;
        border-bottom: 0;
        color: #fff;
        text-align: center;
    }
    
    .modal-header .close {
        position: relative;
        z-index: 1;
        top: -15px;
        font-size: 30px;
        color: #fff;
        opacity: 1;
    }
    
    .modal-title {
        line-height: 1.1;
    }
    /*-------------------------------------------------------------------------------
  16. Responsive
-------------------------------------------------------------------------------*/
    
    @media (min-width: 480px) {
        h1,
        .h1 {
            font-size: 50px;
        }
    }
    
    @media (min-width: 768px) {
        .navbar {
            padding-bottom: 10px;
        }
        .navbar.affix-top {
            padding: 30px 0;
            background: none;
            box-shadow: none;
        }
        .navbar.affix .navbar-nav {
            margin-top: 10px;
        }
        .navbar-nav>li {
            margin-left: 15px;
        }
        .navbar-nav>li:first-child {
            margin-left: 0;
        }
        .navbar-nav>li>a {
            padding: 0;
        }
        .navbar-nav>li>a:hover,
        .navbar-nav>li>a:focus,
        .navbar-nav>.active>a {
            background-color: transparent;
            font-weight: 900;
        }
        .brand {
            font-size: 45px;
        }
        .masthead {
            padding: 250px 0 200px;
        }
        .modal-dialog {
            width: 700px;
        }
    }
    
    @media (min-width: 992px) {
        .footer .social {
            text-align: right;
        }
        .copyright {
            margin-bottom: 0;
        }
    }
    
    @media (min-width: 1200px) {
        .row-spec {
            margin: 0 -30px;
        }
        .col-spec {
            padding: 0 30px;
        }
    }
    
    .logoContenedor {
        width: 25%;
    }
    
    .titulo {
        font-weight: 700;
        font-size: 37px;
        color: #002c8a;
    }
    
    .titulo1 {
        font-weight: 700;
        font-size: 31px;
        color: #002c8a;
    }
    
    .tituloGrande {
        font-weight: 700;
        font-size: 54px;
        color: #002c8a;
        line-height: 54px;
    }
    
    .cardOwl {
        /* -webkit-box-shadow: 0px 0px 11px 0px rgba(184, 184, 184, 1);  */
        /* -moz-box-shadow: 0px 0px 11px 0px rgba(184, 184, 184, 1); */
        /* box-shadow: 0px 0px 11px 0px rgba(184, 184, 184, 1); */
        /* border-radius: 50px; */
        text-align: center;
        /* margin: 0px 80px; */
        padding: 55px 160px;
        height: 525px;
        background: url(../images/facturacion-18.webp);
        background-position: center;
        background-size: cover;
    }
    
    .cardOwl img {
        width: 150px;
    }
    
    .cardOwl .titulo {
        font-size: 19px;
        margin-bottom: 10px;
    }
    
    .cardOwl .cuerpo {
        color: #212121;
        text-align: center;
        font-size: 9px;
        margin: 0;
        font-weight: 700;
    }
    
    .tituloC {
        font-weight: 800;
        font-size: 20px;
        color: #fff;
    }
    
    .tituloC1 {
        font-weight: 800;
        font-size: 60px;
        color: #ffff;
        text-align: left;
        margin-bottom: 25px;
    }
    
    .tituloCon {
        color: #fff;
        font-size: 29px;
    }
    
    .subtituloCon {
        color: #fff;
        font-size: 23px;
    }
    
    .cuerpoCon {
        color: #fff;
        font-size: 18px;
    }
    
    .titulo2 {
        font-size: 37px;
        line-height: 42px;
        text-align: left;
        color: #002c8a;
        font-weight: 800;
    }
    
    .titulo3 {
        font-size: 37px;
        text-align: left;
        color: #002c8a;
        font-weight: 800;
    }
    
    .titulo4 {
        font-size: 25px;
        text-align: left;
        color: #002c8a;
        font-weight: 800;
    }
    
    .subtitulo1 {
        font-size: 22px;
        text-align: left;
        color: #002c8a;
        font-weight: 800;
    }
    
    .titulo2I {
        font-size: 35px;
        text-align: center;
        color: #fff;
        font-weight: 800;
    }
    
    .cuerpoI {
        font-size: 36px;
        line-height: 42px;
        text-align: center;
        color: #002c8a;
        font-weight: 800;
    }
    
    hr {
        height: 3px;
        width: 210px;
        margin-left: 0px;
        background: #212121;
        border: none;
    }
    
    .parrafoN {
        color: #002c8a;
        text-align: center;
        font-size: 32px;
    }
    
    .parrafoR {
        font-size: 23px;
        text-align: center;
        margin: 0px;
    }
    
    .parrafoA {
        font-size: 50px;
        font-weight: 900;
        color: #002c8a;
        text-align: center;
    }
    
    .parrafoA1 {
        font-size: 26px;
        font-weight: 500;
        color: #fff;
        text-align: center;
        line-height: 26px;
    }
    
    .contenedor {
        position: relative;
        display: inline-block;
        text-align: center;
    }
    
    .contenedor:hover .parrafoIma {
        display: initial;
    }
    
    .contenedor:hover .listaIma {
        display: block;
    }
    
    .texto-encima {
        position: absolute;
        bottom: 0px;
        width: 100%;
        text-align: left;
        padding: 10px;
    }
    
    .cardTable {
        background: transparent;
        padding: 40px;
        border-radius: 50px;
        border: 1px solid #002c8a;
        position: relative;
    }
    
    .tituloProceso {
        font-size: 50px;
        font-weight: 700;
        color: #fff;
        text-align: center;
    }
    
    .cardProceso img {
        width: 20%;
        display: block;
        margin: auto;
    }
    
    .cardProceso .cuerpo {
        text-align: center;
        color: #fff;
        font-size: 18px;
    }
    
    .parrafoProceso {
        text-align: center;
        color: #fff;
        font-size: 18px;
    }
    
    .cardTable .iva {
        text-align: center;
        color: #fff;
        font-weight: 800;
        font-size: 15px;
    }
    
    .cardTable table {}
    
    .cardTable .titulo-flotante {
        text-align: center;
        font-size: 14px;
        color: #fff;
        background: #0046b8;
        padding: 10px;
        width: 116px;
        display: block;
        margin: auto;
        font-weight: 600;
        position: absolute;
        left: 0;
        right: 0;
        top: -15px;
        border-radius: 50px;
    }
    
    .cardTable .titulo {
        text-align: center;
        font-size: 37px;
        color: #fff;
        padding: 0px;
    }
    
    .cardTable table .titulo {
        text-align: center;
        font-size: 20px;
        color: #01466f;
        background: transparent;
        padding: 0px;
        border: none;
        font-weight: 500;
    }
    
    .cardTable table .precio {
        color: #0a347f;
        text-align: center;
        font-size: 28px;
        border: none;
        font-weight: 500;
    }
    
    .cardTable a {
        display: block;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -25px;
        font-size: 18px;
    }
    
    .tituloIma {
        color: white;
        font-size: 20px;
    }
    
    .parrafoIma {
        color: white;
        font-size: 15px;
        display: none;
        -webkit-transition: all 2s ease-out;
        -moz-transition: all 2s ease-out;
        -o-transition: all 2s ease-out;
        transition: all 2s ease-out;
    }
    
    .listaIma {
        color: white;
        font-size: 15px;
        display: none;
        -webkit-transition: all 2s ease-out;
        -moz-transition: all 2s ease-out;
        -o-transition: all 2s ease-out;
        transition: all 2s ease-out;
    }
    
    #distribuidores:hover .subtituloP {
        background: #002c8a;
        color: white;
    }
    
    .centrado {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .subtituloP {
        text-align: center;
        font-size: 20px;
        color: #504F50;
        margin-top: 15px;
        border: 2px solid #002c8a;
        padding: 15px;
    }
    
    .beneficio {
        height: 100px;
    }
    
    .contacto {
        font-size: 20px;
        margin: 0px;
        color: #fff;
    }
    
    .cardContacto {
        margin-bottom: 25px;
    }
    
    .cardContacto img {
        width: 55px;
        height: 55px;
        margin-right: 10px;
        margin-top: 25px;
    }
    
    .cardContacto a {
        text-decoration: none;
        color: white;
        font-size: 16px;
    }
    
    .cardContacto i {
        font-size: 20px;
        margin-right: 15px;
    }
    
    .cardContacto .titulo {
        color: white;
        font-size: 19px;
        font-weight: 800;
        margin: 0px;
        padding: 0px;
    }
    
    .cardContacto .subtitulo {
        color: white;
        font-size: 16px;
        font-weight: 500;
        margin: 0px;
        padding: 0px;
        text-align: left;
    }
    
    .cardContacto p {
        text-decoration: none;
        color: white;
        font-size: 16px;
        margin-top: 0px;
    }
    
    .cardContacto2 {
        margin-bottom: 25px;
    }
    
    .cardContacto2 img {
        width: 55px;
        height: 55px;
        margin-right: 10px;
        margin-top: 25px;
    }
    
    .cardContacto2 a {
        text-decoration: none;
        color: #002c8a;
        font-size: 18px;
        font-weight: 600;
    }
    
    .cardContacto2 i {
        font-size: 20px;
        margin-right: 15px;
    }
    
    .cardContacto2 .titulo {
        color: #212121;
        font-size: 30px;
        font-weight: 800;
        margin: 0px;
        padding: 0px;
    }
    
    .cardContacto2 .subtitulo {
        color: #212121;
        font-size: 23px;
        margin: 0px;
        padding: 0px;
        text-align: left;
        font-weight: 700;
    }
    
    .cardContacto2 p {
        text-decoration: none;
        color: #002c8a;
        font-size: 18px;
        margin-top: 0px;
        font-weight: 600;
    }
    
    .contacto1 {
        font-size: 21px;
        color: white;
        margin: 0px;
    }
    
    .contacto a {
        text-decoration: none;
    }
    
    .contacto1 a {
        text-decoration: none;
    }
    
    .parrafoBeneficio {
        text-align: center;
        font-size: 20px;
    }
    
    .parrafoBeneficio span {
        font-weight: 700;
    }
    
    .parrafoNum {
        font-size: 20px;
        color: white;
        font-weight: 500;
    }
    
    .numero {
        font-size: 60px;
        font-weight: 800;
        color: #002c8a;
    }
    
    .parrafoP {
        text-align: center;
        font-size: 16px;
        color: #504F50;
    }
    
    .parrafoP2 {
        text-align: center;
        font-size: 16px;
        color: #504F50;
        margin: 0px;
    }
    
    .tituloP {
        text-align: center;
        font-size: 20px;
        font-weight: 800;
        color: #504F50;
    }
    
    .imagenP {
        width: 40%;
        display: block;
        margin: auto;
        /*filter: invert(59%) sepia(16%) saturate(1767%) hue-rotate(172deg) brightness(85%) contrast(83%);*/
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
        transition: all 1s ease-out;
    }
    
    .imagenP:hover {
        padding: 10px;
        /* filter: invert(100%) sepia(44%) saturate(5281%) hue-rotate(327deg) brightness(95%) contrast(93%); */
        filter: invert(12%) sepia(51%) saturate(5130%) hue-rotate(231deg) brightness(93%) contrast(90%);
        border: 5px solid #3782BA;
        border-radius: 150px;
    }
    
    .tituloP2 {
        text-align: left;
        font-size: 20px;
        font-weight: 800;
        color: #504F50;
    }
    
    .parrafoP3 {
        text-align: left;
        font-size: 16px;
        color: #504F50;
    }
    
    .buton {
        text-decoration: none;
        background: #212121;
        color: #fff;
        font-weight: 800;
        text-align: center;
        font-size: 15px;
        padding: 10px 20px;
        display: inline-block;
        margin-right: 15px;
        margin-top: 20px;
        width: 180px;
        border: none;
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
        transition: all 1s ease-out;
    }
    
    .buton:hover {
        background: #fff;
        color: #212121;
        /* border: 1px solid #002c8a; */
    }
    
    .buton-contacto {
        text-decoration: none;
        background: #212121;
        color: #fff;
        font-weight: 800;
        text-align: center;
        font-size: 15px;
        padding: 10px 20px;
        display: inline-block;
        margin-top: 5px;
        width: 180px;
        border: none;
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
        transition: all 1s ease-out;
        transition: all 1s ease-out;
    }
    
    .buton-contacto:hover {
        background: #fff;
        color: #212121;
        /* border: 1px solid #002c8a; */
    }
    
    .butonTap {
        text-decoration: none;
        background: #002c8a;
        color: #fff;
        font-weight: 500;
        text-align: center;
        font-size: 19px;
        padding: 10px 0px;
        display: inline-block;
        width: 100%;
        border: none;
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
        transition: all 1s ease-out;
        margin-top: 50px;
    }
    
    .butonTap:hover {
        background: #0063ee;
        color: #fff;
        /* border: 1px solid #002c8a; */
    }
    
    .butonTap:active {
        background: #0063ee;
        color: #fff;
        /* border: 1px solid #002c8a; */
    }
    
    button.active {
        background: #0063ee;
    }
    
    .buton-blue {
        text-decoration: none;
        background: #002c8a;
        color: #fff;
        border: 1px solid #002c8a;
        font-weight: 800;
        text-align: center;
        font-size: 15px;
        padding: 10px 20px;
        display: inline-block;
        margin-top: 20px;
        width: 180px;
        border: none;
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
        transition: all 1s ease-out;
    }
    
    .buton-blue:hover {
        background: #fff;
        color: #002c8a;
        border: 1px solid #002c8a;
    }
    
    .buton-small {
        text-decoration: none;
        background: #002c8a;
        color: #fff;
        font-weight: 800;
        text-align: center;
        font-size: 17px;
        padding: 5px 10px;
        display: block;
        margin: auto;
        margin-top: 20px;
        width: 150px;
        border-radius: 50px;
        border: none;
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
        transition: all 1s ease-out;
    }
    
    .buton-small:hover {
        background: white;
        color: #002c8a;
        border: 1px solid #002c8a;
    }
    
    .butonP {
        text-decoration: none;
        background: #002c8a;
        color: white;
        text-align: center;
        font-size: 12px;
        line-height: 12px;
        padding: 5px 10px;
        border-radius: 25px;
        margin: auto;
        border: 2px solid #002c8a;
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
        transition: all 1s ease-out;
    }
    
    .butonP:hover {
        background: white;
        color: #002c8a;
        border: 1px solid #002c8a;
    }
    
    .butonT {
        margin-top: -10px;
        font-size: 13px;
        width: auto;
        padding: 8px 10px;
        background: #002c8a;
        margin-right: 0px;
    }
    
    .butonT:hover {
        background: #212121;
    }
    
    .butonTT {
        margin-top: -10px;
        font-size: 13px;
        width: auto;
        padding: 8px 15px;
        background: #002c8a;
        border: 1px solid #002c8a;
        color: #fff;
        padding: 5px 10px;
    }
    
    .butonTT:hover {
        background-color: #fff;
        color: #002c8a;
        border: 1px solid #002c8a;
    }
    
    .butonTRA {
        margin-top: -10px;
        font-size: 13px;
        width: auto;
        color: #fff;
        padding: 5px 10px;
    }
    
    .centrarVertical {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 575px;
    }
    
    .centrarVertical2 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 525px;
    }
    
    .centrarVertical3 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 560px;
    }
    
    .tituloN {
        text-align: center;
        font-size: 47px;
        font-weight: 800;
        color: #e96400;
    }
    
    .subtituloN {
        text-align: center;
        font-size: 32px;
        font-weight: 500;
        color: #e96400;
    }
    
    .parrafoN {}
    
    .card2I {
        margin-left: -400px;
    }
    
    .card2D {
        margin-right: -400px;
    }
    
    .tituloA {
        color: #fff;
        font-size: 45px;
        font-weight: 700;
        text-align: center;
    }
    
    .conten {
        height: 354px;
    }
    
    .tituloPro {
        font-size: 22px;
        font-weight: 600;
    }
    
    .parrafoPro {
        font-size: 15px;
        font-weight: 400;
    }
    
    .subtitulo {
        font-size: 30px;
        margin-top: 100px;
        font-weight: 800;
        color: #00517F;
    }
    
    .imagenD {
        width: 80%;
        display: block;
        margin-left: auto;
    }
    
    .espaciadoD {
        padding: 50px 0px 0px;
    }
    
    .efecto {
        -webkit-transition: all 2s linear;
        -moz-transition: all 2s linear;
        -o-transition: all 2s linear;
        transition: all 2s linear;
    }
    
    .efecto2 {
        -webkit-transition: all 2s linear;
        -moz-transition: all 2s linear;
        -o-transition: all 2s linear;
        transition: all 2s linear;
    }
    
    .efecto2:hover .imagenD {
        -webkit-animation: rotation 5s infinite linear;
    }
    
    @-webkit-keyframes rotation {
        from {
            -webkit-transform: rotateY(0deg);
        }
        to {
            -webkit-transform: rotateY(359deg);
        }
    }
    
    .distribuidores {
        position: relative;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
    }
    
    .distribuidores>div {
        position: relative;
        bottom: 85px;
        color: #fff;
        background-color: rgb(55, 130, 186, 0.6);
        padding: 2px 10px;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
        /*opacity:0.5;*/
    }
    
    .distribuidores>div>h1 {
        font-weight: bold;
        font-size: 20px;
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
        transition: all 1s ease-out;
    }
    
    .distribuidores>div>p {
        font-size: 17px;
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
        transition: all 1s ease-out;
    }
    
    .distribuidores:hover div {
        bottom: 400px;
    }
    
    .distribuidores:hover div>h1 {
        font-weight: bold;
        font-size: 35px;
        text-align: center;
    }
    
    .distribuidores:hover div>p {
        font-size: 30px;
        text-align: center;
    }
    
    .imagenC {
        width: 30%;
    }
    
    .parrafoC {
        font-size: 16px;
        color: #504F50;
        margin: 0px;
    }
    
    .top {
        display: block;
        text-align: right;
    }
    
    .top a {
        display: inline-block;
        text-decoration: none;
        margin-right: 5px;
        margin-left: 5px;
    }
    
    .tituloBanner {
        font-size: 56px;
        color: #ffff;
        font-weight: 900;
        text-align: left;
    }
    
    .tituloBanner span {
        color: #002c8a;
    }
    
    .parrafo {
        text-align: left;
        font-size: 24px;
        margin-top: 15px;
        font-weight: 500;
        color: #212121;
    }
    
    .parrafoP {
        text-align: left;
        font-size: 20px;
        margin-top: 10px;
        font-weight: 500;
        color: #212121;
    }
    
    .parrafo1 {
        text-align: left;
        font-size: 24px;
        margin-top: 15px;
        font-weight: 500;
        color: #212121;
    }
    
    .parrafo2 {
        text-align: left;
        font-size: 24px;
        margin-top: 15px;
        font-weight: 500;
        color: #212121;
    }
    
    .parrafo-white {
        text-align: left;
        font-size: 26px;
        margin-top: 15px;
        font-weight: 700;
        color: #fff;
    }
    
    .parrafo span {
        font-style: italic;
    }
    
    .parrafoP span {
        font-style: italic;
    }
    
    .flotante {
        padding: 50px;
        background: white;
        margin-top: -250px;
        z-index: 1;
        position: relative;
    }
    
    .flotante p.encabezado {
        color: #00517F;
        margin-bottom: 50px;
        padding: 0px 100px;
        text-align: center;
    }
    
    .tituloBanner5 {
        text-align: left;
        font-weight: 700;
        font-size: 55px;
        font-style: italic;
        color: #504F50;
        line-height: 70px;
    }
    
    .tituloBanner5 span {
        font-weight: 400;
    }
    
    .tituloBanner2 {
        text-align: left;
        font-size: 30px;
        color: #fff;
    }
    
    .tituloBanner2 span {
        font-weight: 400;
    }
    
    .tituloBanner4 {
        text-align: center;
        font-weight: 700;
        font-size: 50px;
        font-style: italic;
        color: #504F50;
        line-height: 50px;
    }
    
    .card {
        /* background: linear-gradient(0deg, transparent 8%, #fff 8%); */
        padding: 0px 50px 0px 50px;
    }
    
    .card img {
        width: 35%;
        display: block;
        margin: auto;
    }
    
    .card .titulo {
        color: #002c8a;
        font-size: 22px;
        margin: 0px;
        text-align: center;
    }
    
    .card .tituloFondo {
        color: #e9ecf0;
        font-size: 73px;
        font-weight: 900;
        margin: 0px;
        text-align: left;
    }
    
    .card .cuerpo {
        text-align: center;
        color: #2d2d2d;
        font-weight: 600;
        font-size: 17px;
        height: 100px;
    }
    
    .card:hover img {
        -webkit-transform: scale(1.01);
        transform: scale(1.01);
        -webkit-transform: translate(0, -10px);
        transform: translate(0, -10px);
    }
    
    .cardIcono {
        background: #fff;
        text-align: center;
        padding: 40px 20px;
    }
    
    .cardIcono img {
        width: 45%;
        display: block;
        margin: auto;
    }
    
    .cardIcono .titulo {
        color: #002c8a;
        font-size: 16px;
        margin: 0px;
        text-align: center;
    }
    
    .cardIcono .parrafo {
        text-align: center;
        font-size: 14px;
    }
    
    .cardIcono:hover img {
        -webkit-transform: scale(1.01);
        transform: scale(1.01);
        -webkit-transform: translate(0, -10px);
        transform: translate(0, -10px);
    }
    
    .pilar {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 754px;
    }
    
    .centrar {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .ImgFondo {
        width: 47%;
        position: absolute;
        top: 750px;
        right: 0px;
    }
    
    .ImgFondo2 {
        width: 44%;
        position: absolute;
        top: 1638px;
        left: 0px;
    }
    
    .subTitulo {
        color: white;
        font-weight: 600;
        font-size: 35px;
        text-align: center;
    }
    
    .parrafo2 {
        font-size: 24px;
        text-align: left;
        font-weight: 800;
        color: #002c8a;
    }
    
    .imagenBB {
        width: 50%;
        display: block;
        margin: auto;
    }
    
    .fondoDividio {
        background: linear-gradient(0deg, #002c8a 57%, #FFFFFF 57%);
        padding: 50px;
    }
    
    .precio {
        color: #002c8a;
        font-weight: 800;
        text-align: left;
        font-size: 30px;
    }
    
    .espaciado {
        margin-top: 150px;
    }
    
    .card2 {
        margin-bottom: 25px;
    }
    
    .card2 img {
        width: 100%;
    }
    
    .card2 .contenido {
        height: 100px;
    }
    
    .card2 .titulo {
        font-size: 17px;
        padding: 0px;
        font-weight: 900;
        color: #212121;
        height: 50px;
    }
    
    .card2 .cuerpo {
        font-size: 12px;
        color: #212121;
    }
    
    .card2 a {
        font-size: 8px;
        width: 100px;
        background: #002c8a;
        padding: 8px 10px;
    }
    
    .parrafo-anuncio {
        font-size: 33px;
        color: #fff;
        font-weight: 800;
    }
    
    .parrafo-anuncio1 {
        font-size: 27px;
        color: #fff;
    }
    
    .parrafo-anuncio2 {
        font-size: 28px;
        color: #0a347f;
        text-align: center;
    }
    
    .numeracion {
        font-size: 24px;
        color: #212121;
    }
    
    .numeracion li {
        margin: 0;
        padding: 0 0 0 2em;
        text-indent: -2em;
        list-style-type: none;
        counter-increment: item;
        margin-bottom: 15px;
    }
    
    .numeracion li:before {
        display: inline-block;
        width: 1em;
        padding-right: 0.5em;
        font-weight: bold;
        text-align: right;
        content: counter(item) ".";
        font-size: 31px;
        color: #002c8a;
    }
    
    .card2C {
        margin-bottom: 25px;
    }
    
    .card2C img {
        width: 100%;
    }
    
    .card2C .contenido {}
    
    .card2C .titulo {
        font-size: 21px;
        padding: 0px;
        font-weight: 900;
        color: #383838;
        text-align: right;
        height: 62px;
    }
    
    .card2C .cuerpo {
        font-size: 16px;
        color: #002c8a;
        padding-left: 180px;
        text-align: right;
        height: 48px;
    }
    
    .card2C a {
        font-size: 10px;
        width: 114px;
    }
    
    .cardAnuncio .titulo {
        color: #606060;
        font-size: 48px;
        font-weight: 900;
        text-align: center;
    }
    
    .cardAnuncio img {
        width: 10% !important;
        display: block !important;
        margin: auto;
    }
    
    .cardAnuncio .tituloFondo {
        color: #f5e7dd;
        font-size: 86px;
        font-weight: 900;
        margin: 0px;
        text-align: center;
    }
    
    .cardAnuncio .cuerpo {
        text-align: center;
        color: #002c8a;
        font-size: 26px;
        font-weight: 500;
    }
    
    .espaciadoTop {
        margin-top: 50px;
    }
    
    .cardAnuncio .cuerpo span {
        font-weight: 700;
    }
    
    .subtitulo {
        text-align: left;
        font-size: 30px;
        color: #002c8a;
        margin-top: 10px;
    }
    
    .subtitulo2 {
        color: #2d2d2d;
        font-size: 20px;
        text-align: center;
    }
    
    .grid-container {
        display: grid;
        grid-column-gap: 10px;
        grid-template-columns: 65px auto;
        /* margin-left: 25px;*/
    }
    
    .grid-container2 {
        display: grid;
        grid-column-gap: 10px;
        grid-template-columns: auto 95px;
        margin-right: 25px;
    }
    
    .grid-item {}
    
    .card3 {
        background: #f4f4f4;
        padding: 50px 100px;
        -webkit-box-shadow: 0px 0px 15px 0px rgba(168, 168, 168, 1);
        -moz-box-shadow: 0px 0px 15px 0px rgba(168, 168, 168, 1);
        box-shadow: 0px 0px 15px 0px rgba(168, 168, 168, 1);
        position: relative;
        z-index: 1;
    }
    
    .card3 .titulo {
        font-size: 25px;
        padding: 0px;
    }
    
    .fondo {
        background-image: url(../images/inicio-08.jpg);
        background-size: cover;
    }
    
    .fondo2 {
        background-color: #002c8a;
    }
    
    .tituloContacto2 {
        font-size: 33px;
        color: #fff;
        font-weight: 700;
    }
    
    .cardNosotros {
        background: #fff;
        padding: 50px;
    }
    
    .cardNosotros .titulo {
        padding: 0px;
        color: #01466f;
        font-size: 47px;
        font-weight: 900;
    }
    
    .cardNosotros .cuerpo {
        text-align: justify;
        font-size: 19px;
        color: #4c4c4c;
    }
    
    .fondo3 {
        background-color: #e7eef8;
    }
    
    .fondo4 {
        background: url(../images/contabilidad-33.jpg)#e7eef8;
        background-size: contain;
        background-position: right;
        background-repeat: no-repeat;
    }
    
    .fondo5 {
        background-image: url(../images/contabilidad-34.jpg);
        background-size: cover;
        background-position: center;
    }
    
    .tituloD {
        color: #e96400;
        font-size: 36px;
        font-weight: 700;
        text-align: justify;
    }
    
    .parrafoD {
        font-size: 16px;
        color: #212121;
        font-weight: 800;
    }
    
    .fondoCon {
        background: #fff;
        padding: 100px 50px;
    }
    
    .cardImagen {}
    
    .cardImagen img {
        width: 100%;
    }
    
    .cardImagen .titulo {
        font-weight: 700;
        font-size: 20px;
        padding: 0px;
        color: #fff;
        margin-bottom: 10px;
    }
    
    .cardImagen .contenido {
        background: #01466f;
        padding: 10px 30px;
    }
    
    .cardImagen .cuerpo {
        display: none;
        color: #fff;
        font-size: 18px;
    }
    
    .cardImagen i {
        color: white;
        font-size: 25px;
        position: absolute;
        right: 25px;
    }
    
    .cardImagen .open {
        display: initial;
    }
    
    .cardImagen .close {
        display: none;
    }
    
    .cardImagen:hover .cuerpo {
        display: initial;
    }
    
    .cardImagen:hover .open {
        display: none;
    }
    
    .cardImagen:hover .close {
        display: initial;
        color: white;
        opacity: 1;
    }
    
    .cardImagen:hover .contenido {
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: -70px;
    }
    
    .owl-dots {
        text-align: center;
        margin-top: 15px;
    }
    
    .owl-carousel button.owl-dot {
        background: #e9ecf0;
        color: #e9ecf0;
        border: 1px solid #e9ecf0;
        padding: 0px !important;
        font: inherit;
        margin-right: 15px;
        width: 8px;
        height: 8px;
        border-radius: 108px;
    }
    
    .owl-carousel button.active {
        background: #002c8a;
        color: #002c8a;
        border: 1px solid #002c8a;
    }
    
    .cuerpo {
        text-align: left;
        color: #2d2d2d;
        font-size: 26px;
    }
    
    .listado {
        list-style: none;
        padding-left: 0;
        font-size: 16px;
        color: #212121;
        margin-top: 15px;
    }
    
    .listado li {
        position: relative;
        padding-left: 0px;
        margin-bottom: 5px;
    }
    
    .listado li:before {
        content: "• ";
        padding-right: 8px;
        color: #002c8a;
    }
    
    .icono {
        border: 1px solid #002c8a;
        margin: 20px 0px;
        padding: 10px;
    }
    
    .icono img {
        display: block;
        width: 35%;
        margin: auto;
    }
    
    .icono .titulo {
        text-align: center;
        color: #002c8a;
        font-size: 21px;
        padding: 0px;
        height: 54px;
    }
    
    .texto {
        border: 1px solid #002c8a;
        margin: 20px 20px;
        padding: 20px;
    }
    
    .texto .titulo {
        text-align: center;
        color: #002c8a;
        font-size: 21px;
        padding: 0px;
    }
    
    .texto1 {
        border-left: 1px solid #0945af;
        margin: 20px 20px;
        padding: 20px;
    }
    
    .texto1 .titulo {
        text-align: center;
        color: #fff;
        font-size: 18px;
        padding: 0px;
        height: 54px;
    }
    
    .texto1 .cuerpo {
        text-align: center;
        color: #fff;
        font-size: 12px;
        padding: 0px;
    }
    
    .flotante-azul {
        background: #002c8a;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -235px;
        width: 80%;
        display: block;
        margin: auto;
    }
    
    .cita {
        text-align: left;
        font-style: italic;
        font-size: 20px;
        color: #e96400;
        font-weight: 800;
    }
    
    .cita span {
        font-weight: normal;
    }
    
    @media(max-width: 1024px) {
        .tituloBanner2 {
            font-size: 50px;
            text-align: center;
        }
        .centrarVertical {
            height: auto;
            margin: 15px 0px;
        }
    }
    
    @media(max-width: 780px) {
        .fondo {
            padding: 30px;
        }
        .titulo2I {
            font-size: 23px;
        }
        .butonTap {
            margin-top: 10px;
        }
        .tituloGrande {
            font-size: 30px;
            line-height: initial;
        }
        .cardOwl {
            padding: 55px 10px;
        }
        .parrafo-anuncio {
            font-size: 25px;
        }
        .parrafo-anuncio1 {
            font-size: 23px;
        }
        .buenFin {
            top: -100px;
            left: 500px;
        }
        .numero {
            text-align: center;
        }
        .parrafoNum {
            text-align: center;
        }
        .card {
            margin-bottom: 0px;
            height: auto;
        }
        .card2 {
            margin-bottom: 55px;
            height: auto;
        }
        .card3 {
            padding: 10px 10px;
        }
        .espaciadoD {
            padding: 50px 0px 50px;
        }
        .butonP {
            padding: 0px 0px;
        }
        .butonT {
            margin-top: 10px;
        }
    }
    
    .logo {
        width: 90%;
    }
    
    .padding50 {
        padding: 50px 0px;
    }
    
    .Modelo1 .modal-body {
        border-left: 10px solid #212121;
        display: grid;
        grid-template-columns: 35% 65%;
        min-height: 340px;
    }
    
    .Modelo1 .modal-body .icono {
        position: absolute;
        top: -100px;
        left: -50px;
        width: 40%;
        border: none;
        margin: 0px;
        padding: 0px;
    }
    
    .Modelo1 .modal-body .logo {
        width: 33%;
        position: absolute;
        bottom: 10px;
    }
    
    .Modelo1 .modal-body .titulo {
        color: #000;
        font-size: 31px;
        padding: 0px;
        font-weight: 800;
    }
    
    .Modelo1 .modal-body ul {
        color: #000;
        font-size: 14px;
    }
    
    .Modelo1 .close {
        float: right;
        font-size: 31px;
        font-weight: bold;
        line-height: 1;
        color: #262626;
        text-shadow: 0 1px 0 #fff;
        margin-top: -5px;
        opacity: 1;
    }
    
    .Modelo2 .modal-header {
        background-size: cover;
    }
    
    .Modelo2 .modal-header .modal-title {
        font-size: 33px;
        font-weight: 800;
    }
    
    .Modelo2 button.close {
        background: #002c8a;
        border-radius: 50px;
        padding: 10px 15px;
        margin-top: -50px;
        margin-right: -25px;
    }
    
    .Modelo2 .close {
        float: right;
        font-size: 31px;
        font-weight: bold;
        line-height: 1;
        color: #fff;
        text-shadow: 0 1px 0 #fff;
        margin-top: -5px;
        opacity: 1;
    }
    
    .Modelo2 .modal-body {
        font-size: 12px;
    }
    
    .Modelo3 .modal-content {
        border-radius: 50px;
    }
    
    .Modelo3 .modal-body {
        color: #000;
        font-size: 12px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left;
        padding: 50px 50px;
        border-radius: 50px;
    }
    
    .Modelo3 .modal-body .titulo {
        color: #000;
        font-size: 31px;
        padding: 0px;
        font-weight: 800;
    }
    
    .Modelo3 .close {
        float: right;
        font-size: 31px;
        font-weight: bold;
        line-height: 1;
        color: #262626;
        text-shadow: 0 1px 0 #fff;
        margin-top: -35px;
        opacity: 1;
        margin-right: -35px;
    }
    
    @media (max-width: 560px) {
        .Modelo1 .modal-body .titulo {
            font-size: 25px;
        }
        .cuerpoI {
            font-size: 30px;
            line-height: 35px;
        }
        .icono img {
            width: 20%;
        }
        .Modelo3 .modal-body {
            padding: 20px 20px 20px 160px;
        }
        .cardAnuncio {
            margin-top: 20px;
        }
        .cardAnuncio img {
            width: 40% !important;
        }
        .Modelo3 .close {
            margin-top: -5px;
            margin-right: -5px;
        }
        .tituloBanner {
            font-size: 28px;
            text-align: left;
            line-height: initial;
        }
        .parrafo-white {
            font-size: 22px;
        }
        .fondo4 {
            background: #e7eef8;
            padding: 15px !important;
        }
        .titulo4 {
            font-size: 23px;
        }
        .flotante-azul {
            position: initial;
            width: 100%;
            margin-top: 25px;
        }
        .texto1 {
            border-left: none;
        }
        .parrafoA1 {
            font-size: 24px;
        }
        .card .tituloFondo {
            font-size: 45px;
        }
        .cardAnuncio .tituloFondo {
            font-size: 50px;
        }
        .cardAnuncio .titulo {
            font-size: 35px;
            margin-top: -150px;
        }
        .cardAnuncio .cuerpo {
            font-size: 20px;
        }
        .card .titulo {
            font-size: 30px;
        }
        .card .cuerpo {
            font-size: 19px;
            margin-bottom: 15px;
            margin-top: 25px;
        }
        .cardImagen:hover .contenido {
            position: absolute;
            left: 15px;
            right: 15px;
            bottom: -40px;
        }
        .tituloA {
            font-size: 35px;
        }
        .tituloC1 {
            font-size: 50px;
        }
        .buton {
            font-size: 15px;
            padding: 8px 10px;
            width: 150px;
            margin-bottom: 15px;
        }
        .cardContacto {
            justify-content: left;
            height: auto;
            margin-bottom: 15px;
        }
        .card2 .contenido {
            height: auto;
        }
        .card img {
            width: 20%;
            display: block;
        }
        .card .titulo {
            line-height: inherit;
            padding: 10px;
        }
        .titulo1 {
            font-size: 26px;
        }
        .numeracion {
            font-size: 20px;
        }
        .parrafoR {
            font-size: 20px;
        }
        .cardIcono {
            padding: 20px 10px;
        }
        .cardIcono img {
            width: 20%;
        }
        .fondoCon {
            padding: 20px 10px;
        }
        .tituloC {
            font-size: 50px;
        }
        .cardIcono .titulo {
            line-height: inherit;
            padding: 0px;
        }
        .cardTable {
            margin-bottom: 50px;
        }
        .card2I {
            margin-left: 0px;
        }
        .cardImagen {
            margin-bottom: 55px;
        }
        .card2D {
            margin-right: 0px;
        }
        .titulo2 {
            font-size: 28px;
        }
        .listado {
            font-size: 20px;
        }
        .tituloProceso {
            font-size: 30px;
        }
        .cuerpo {
            font-size: 20px;
        }
        .fondo3 {
            padding: 50px 0px !important;
        }
        .tituloN {
            font-size: 40px;
        }
        .parrafoA {
            font-size: 18px;
        }
        .cardNosotros {
            padding: 25px;
        }
        .cardNosotros .titulo {
            font-size: 30px;
        }
        .cardNosotros .cuerpo {
            font-size: 16px
        }
        .tituloD {
            font-size: 30px;
        }
        hr {
            width: 130px;
        }
        .padding50 {
            padding: 0px;
        }
        .ImgFondo {
            display: none;
        }
        .ImgFondo2 {
            display: none;
        }
        .flotante p.encabezado {
            padding: 0px 0px;
            text-align: justify;
            font-size: 16px;
        }
        .espaciado {
            margin-top: 0px;
        }
        .navbar-nav>li>a:hover,
        .navbar-nav>li>a:focus,
        .navbar-nav>.active>a {
            color: white;
            background-color: #002c8a;
        }
        .parrafo {
            text-align: left;
            font-size: 18px;
        }
        .buenFin {
            display: none;
        }
        .imagenD {
            margin-right: auto;
        }
        .subtitulo {
            font-size: 28px;
            text-align: center;
            margin-top: 0px;
        }
        .titulo3 {
            margin-top: 30px;
        }
        .pilar {
            height: auto;
            margin-top: 55px;
        }
        .imagenBB {
            width: 100%;
        }
        .fondoDividio {
            background: linear-gradient(0deg, #002c8a 75%, #FFFFFF 75%);
            padding: 0px;
        }
        .parrafoN {
            padding-right: 0px;
        }
        .conten {
            height: auto;
        }
        .centrarVertical2 {
            height: auto;
            padding: 20px;
        }
        .distribuidores>div {
            bottom: 115px;
        }
        .imagenC {
            display: block;
            margin: auto;
        }
        .parrafoC {
            text-align: center;
        }
        .logoContenedor {
            width: 100%;
        }
        .logo {
            width: 50%;
        }
        .card {
            padding: 0px;
            margin-top: 25px;
        }
        .butonT {
            margin-top: 10px;
            width: 100%;
            padding: 0px;
            border-radius: 0px;
        }
        .butonTT {
            margin-top: 10px;
            font-size: 15px;
            width: auto;
            padding: 5px 10px;
        }
        .espaciadoTop {
            height: 140px;
        }
        .grid-container2 {
            margin-right: 0px;
        }
        .grid-container {
            margin-left: 0px;
        }
        .card2C .cuerpo {
            padding-left: 0px;
            height: auto;
        }
        .card2 .cuerpo {
            padding-right: 0px;
            height: auto;
        }
    }
    
    .licencias {
        background: #e6f3fa;
        padding: 50px 10px;
    }
    
    .licencias:hover {
        background: #c0e2f2;
    }
    
    .licencias:hover img {
        filter: invert(79%) sepia(47%) saturate(922%) hue-rotate(359deg) brightness(101%) contrast(105%);
    }
    
    table.table-bordered {
        border: 1px solid transparent !important;
        margin-top: 20px;
    }
    
    table.table-bordered>tbody>tr>td.izquierda {
        border: 1px solid transparent;
        border-bottom: 1px solid white;
        width: 50%;
        color: white;
        border-right: 1px solid white;
        text-align: right;
        padding: 4px 20px;
    }
    
    table.table-bordered>tbody>tr>td.derecha {
        border: 1px solid transparent;
        border-bottom: 1px solid white;
        width: 50%;
        color: white;
        border-left: 1px solid white;
        text-align: left;
        padding: 4px 20px;
    }
    
    table.table-bordered>tbody>tr>td.borderT {
        border: 1px solid transparent;
        border-right: 1px solid white;
    }
    
    table.table-bordered>tbody>tr>td.borderI {
        border: 1px solid transparent;
        border-left: 1px solid white;
    }
    
    @media (max-width: 380px) {
        .flotante {
            margin-top: -150px;
        }
    }