/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles - samuel castillo kauil
   ========================================================================== */

*{
   /*color: #151515*/
}
ul{
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vertical-align{
    display: flex;
    align-items: center
}
.header-top{
    background-color: #002f56
}
.header-bottom{
    background-color: transparent;
    padding: 15px 0;
    margin-bottom: 40px
}
.header-bottom .btn {
    width: 90%;
    margin-left: 10%;
}
.header-bottom .container .row > *{
    padding: 0
}
header p{
    line-height: 1.3em
}
header nav ul li {
    margin: 0!important;
}
header nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 1.1em;
    padding: 0 12px;
    position: relative;
    /*text-shadow: 1px 1px #5f5f5f;*/
}
header .fixheader nav ul li a{
    color: #222
}
.txt-white{
    color:#fff;
}
.logo img,.logo-responsive img{
    max-width: 100%
} 
.logo-responsive{
    display: none
}
.social-list-h{
    width: 100%
}
.social-list-h li {
    display: inline;
    margin: 5px;
}
.contact-h{
    width: 100%
}
ul.contact-h li{
    display: inline-block;
    margin: 0 20px
}
ul.contact-h li p{
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    font-size: 1.2em;
}
ul.contact-h li p span{
    display: block;
}
.banner h1{
    font-size: 5em;
    line-height: 1.1em;
    margin: 0 0 15px 0;
}
.banner h2{
    font-size: 1.3em;
    line-height: 1.3em;
    margin: 0 0 20px 0;
}
.banner{
    overflow: hidden;
}
.banner, .prices{
    position: relative;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    padding: 0 0 60px 0;
    background: rgba(0, 138, 189, 0.85);
    background: -moz-linear-gradient(0deg, rgba(0, 138, 189, 0.85) 0%, rgba(0, 61, 109, 0.85) 100%);
    background: -webkit-linear-gradient(0deg, rgba(0, 138, 189, 0.85) 0%,rgba(0, 61, 109, 0.85) 100%);
    background: linear-gradient(0deg, rgba(0, 138, 189, 0.85) 0%,rgba(0, 61, 109, 0.85) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#159ed0', endColorstr='#125d9a',GradientType=1 );
}
.page .banner{
    /*background: rgba(49, 49, 49, 0.7);*/
}
.page .banner h1{
    font-size: 3em
}
.banner h1{
    font-size: 3.2em
}
.banner big, .banner small{
    text-shadow: 2px 2px 4px #404040;
}
.banner .background{
    width: 100%;
    position: relative;
    z-index: 1
}
.shadow-main{
    width: 100%;
    height: auto;
    position: relative;
}
#banner-main{
    position: relative;
}
.prices{
    overflow: hidden;
}
.prices .container{
    position: relative;
    z-index: 2
}
.banner big{
    position: absolute;
    top: 10%;
    font-size: 3.6em;
    width: 100%;
    text-align: center;
    z-index: 3
}
.banner small {
    position: absolute;
    top: 25%;
    font-size: 1.8em;
    width: 100%;
    text-align: center;
    z-index: 3;
}

.banner figure{
    display: inline-block;
    width: 100%;
    background-color: #fff;
    position: absolute;
    height: 30%;
    left: 0;
    bottom: 0;
    margin: 0;
    z-index: 2
}
.main-title{
    font-size: 1.04em;
    position: absolute;
    width: 100%;
    top: 45%;
    left: 0;
    transform: translate(0,-50%);
}
.who-is {
    padding-top: 100px;
    padding-bottom: 100px;
    background-image: url(../img/checklist.png);
    background-size: auto 140%;
    background-repeat: no-repeat;
    background-position: center right;
}
.character-content {
    padding-bottom: 30px;
    padding-top: 30px;
    border-left: 1px solid #1e4e75;
    border-bottom: 1px solid #1e4e75;
}
.character figure {
    display: inline-block;
    width: 130px;
    height: 130px;
    background-color: #fff;
    border-radius: 50%;
    margin: 0;
    position: relative;
}
.character figure .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.character h3, .character p{
    margin: 0;
}
.character-content:nth-child(1),.character-content:nth-child(4) {
    border-left: none;
}
.character-content:nth-child(4),.character-content:nth-child(5),.character-content:nth-child(6)  {
    border-bottom: none;
}
.list-whois{
    margin-top: 20px
}
.list-whois .icon{
    margin-bottom: 10px
}
.list-whois .content {
    display: inline-block;
}
.list-whois .content p,.list-whois .content h3{
    margin: 0;
}
.who-is .content h3 {
    font-size: 1.1em;
}
.list-whois .content p {
    font-size: 1em;
    text-align: justify;
}
.price-content{
    position: relative;
}
.prices{
    padding: 40px 0 50px 0;
}
.price{
    position: relative;
    background-color: #fff;
    background-image: url(../img/back-prices.png);
    background-position: 0 -20px;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    margin: 0 10px;
    left: 0;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.2);
    padding-bottom: 30px;
    min-height: 420px
}
.price.correorobotizado{
    min-height: 450px
}
/*.price:hover{
    -webkit-box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.2);
    box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.2);
    top: -10px
}*/
.price figure {
    margin: 0;
    padding: 35px 10px;
    min-height: 0;
    margin-bottom: 45px;
}
.price ul{
    font-size: .9em
}
.price ul li {
    margin: 0px;
    border-bottom: 1px solid #ddd;
    margin: 0px 10px;
    padding: 5px 0;
}
.price big {
    font-size: 5em;
    font-weight: bold;
    position: relative;
}
.price sup {
    display: inline-block;
    top: -4em;
    position: relative;
    font-weight: bold;
}
.price sub {
    display: inline-block;
    bottom: 0em;
    left: -2.5em;
    position: relative;
    font-weight: bold;
}
.price p {
    margin: 0;
    line-height: 1.5em
}
.price h1{
    margin: 0;
    line-height: 1em;
}
.price .btn {
    padding: 10px 0;
    border: none;
    margin: auto;
    bottom: 0;
    position: absolute;
    width: 80%;
    display: block;
    transform: translate(-50%,0);
    margin-left: 50%;
    margin-bottom: -15px;
}
.price.ilimitado{
    border: none;
    position: relative;
}
.price.ilimitado figure{
    border: 1px solid #c6c6c6;
    border-bottom: none;
}
.price.ilimitado ul li{
    border-bottom: 1px solid #1e4e75;
}
.price.ilimitado *{
    color: #fff;
}
.price .getfree{
    display: block;
    width: 100%;
    text-align: center;
}
.contact {
    padding: 20px 0 50px 0;
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/back-contact.png);
}
.form-container {
    padding: 20px 30px;
}
.form-container label, .form-container input, .form-container textarea, .form-container select{
    display: inline-block;
    width: 100%;
}
.form-container input:not(.btn), .form-container textarea,.form-container select {
    border-radius: 5px;
    border: 1px solid #c6c6c6;
    background-color: rgba(255,255,255,.5);
    padding: 8px;
    margin-bottom: 10px;
}
.form-container textarea{
    height: 7em;
    margin-bottom: 0;
}
.form-container select{
    height: 36px;
}
.title {
    margin: 0 0 10px 0;
    position: relative;
    font-size: 2em;
    line-height: 1em
}
.subtitle {
    margin: 0;
    font-size: 1em;
    line-height: 1.5em;
    margin-bottom: 20px
}
.testimonials{
    padding: 20px 0 30px 0
}
.testimonial{
    margin: 20px 0
}
.testimonial h3,.testimonial h2{
    margin: 0;
}
.testimonial{
    padding: 20px 10px;
    border: 1px solid #c6c6c6;
    margin: 20px 15px;
}
.testimonial .photo-content {
    border-top: 1px solid #c6c6c6;
    padding-top: 15px;
}
.testimonial p{
    font-style: italic;
    margin-top: 0
}
.testimonial h2{
    font-size: 1.4em
}
.testimonial h3{
    font-size: 1em
}
.character{
    padding: 50px 0;
    overflow: hidden;
}
.testimonial p span{
    font-size: 1.5em
}
#video {
    background-image: url(../img/back-video.png);
    background-position: center;
    background-size: cover;
    padding: 50px 0;
}
.footer-bottom {
    padding-bottom: 20px;
}
.social-list-f{
    padding: 20px 0;
    display: inline-block;
    width: 100%
}
.social-list-f li{
    display: inline-block;
    margin: 0 10px
}
.slick-track {
    display: flex;
    align-items: center;
}
.slick-prev:before, .slick-next:before {
    font-size: 50px;
    color: #002f56;
}
.slick-next {
    right: 5%;
}
.slick-prev {
    left: 1%;
    z-index: 999;
}
.slick-dots li button:before {
    font-size: 15px;
    opacity: 1;
    color: #002f56;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #ff5b04;
}
.testimonial .photo-content img{
    display: inline-block;
}
.form-free{
    display: block;
    padding-bottom: 20px;
}
.form-free:focus{
    outline:0px;
}
.formfree {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 99999999;
    top: 0;
    left: 0;
    display: none;
}
.formfree .content{
    width: 750px;
    background-color: #fff;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
    padding: 20px;
    background-image: url(../img/background-contact.png);
    border-radius: 10px
}
.formfree label, .formfree input, .formfree textarea, .formfree select{
    display: inline-block;
    width: 100%;
}
.formfree input:not(.btn), .formfree textarea,.formfree select {
    border-radius: 5px;
    border: 1px solid #c6c6c6;
    background-color: rgba(255,255,255,.5);
    padding: 8px;
    margin-bottom: 15px;
}
.formfree textarea{
    height: 8em;
    margin-bottom: 0;
}
.formfree select{
    height: 36px;
}
.closed {
    font-size: 2em;
    color: #565656;
    position: absolute;
    right: 10px;
    top: 0;
    font-weight: lighter;
    cursor: pointer;
}
.video{
    height: 518px;
}
.col-who{
    margin-top: 50px
}
.content-who{
    margin-bottom: 30px;
}
.price-movil{
    display: none;
}
.price-desktop{
    display: block;
}
#banner{
    position: relative;
}
.container-fluid,header{
    position: relative;
}
.container-fluid + div,.prices .container + div{
    display: none;
}
#banner canvas,.prices canvas{
    position: absolute!important;
    top: 0;
    left: 0;
    z-index:1!important
}
.slick-list {
    padding: 0 0 20px 0;
}
#form-contact .btn{
    margin: 5px 0
}
.price figure{
    text-align: center;
}
.price figure h1{
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
    font-size: 1.7em
}
.price figure .icon{
    display: inline-block;
    vertical-align: middle;
}
.correorobotizado h1{
    line-height: .8em;
    font-size: 2.2em;
}
.cfdirelacionados h1{
    line-height: .6em;
    font-size: 2.5em;
}
.correorobotizado h1 span{
    font-size: .7em
}
.cfdirelacionados h1 span{
    font-size: .5em;
}
.other-solution h2{
    margin-bottom: 0;
}
.other-solution p{
    margin-top: 0
}
.laptop{
    width: 130%;
    margin-left: -20%;
}
.prices-slider2 .slick-arrow{
    display: none!important
}
#solutions{
    padding: 60px 0
}
/*
.tabs-content ul{
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
}
.tabs-content ul li{
    display: none;
}
.tabs-content ul li.active{
    display: flex;
}*/
.tabs-content h2{
    margin: 0
}
.tabs-content .service {
    border-radius: 5px;
    display: inline-block;
    padding: 10px;
    margin-right: 20px;
    border:1px solid #ccc;
    /*-webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,.1);
    -moz-box-shadow: 3px 3px 10px 0px rgba(0,0,0,.1);
    box-shadow: 3px 3px 10px 0px rgba(0,0,0,.1);*/
    -webkit-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
   -moz-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
     -o-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
        transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */

-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
   -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
     -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
        transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
}
.tabs-content .service.s-free{
    background-color: #ffc800;
    border: 1px solid #efbc02;
}
.tabs-content .service.s-free:hover{
   border:1px solid #ccc;
}
.tabs-content .service:hover{
    background-color: #efefef
    /*background: #159ed0;
    background: -moz-linear-gradient(45deg, #159ed0 0%, #125d9a 100%);
    background: -webkit-linear-gradient(45deg, #159ed0 0%,#125d9a 100%);
    background: linear-gradient(45deg, #159ed0 0%,#125d9a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#159ed0', endColorstr='#125d9a',GradientType=1 );

*/}
.tabs-content .service img {
    display: inline-block;
    /*height: 50px;*/
    width: auto;
}
.solution{
    margin: 20px 0;
    text-align: center;
}
.solution a{
    border-radius: 5px;
    display: inline-block;
    padding: 10px;
    margin-right: 20px;
    border:1px solid #ccc;
    /*-webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,.1);
    -moz-box-shadow: 3px 3px 10px 0px rgba(0,0,0,.1);
    box-shadow: 3px 3px 10px 0px rgba(0,0,0,.1);*/
    -webkit-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
   -moz-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
     -o-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
        transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */

-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
   -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
     -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
        transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
}
.solution a img {
    display: inline-block;
    height: 50px;
    width: auto;
}
.solution a.s-free{
    background-color: #ffc800;
    border: 1px solid #efbc02;
}
.solution a.s-free:hover{
   border:1px solid #ccc;
}
.solution a:hover{
    background-color: #efefef
    /*background: #159ed0;
    background: -moz-linear-gradient(45deg, #159ed0 0%, #125d9a 100%);
    background: -webkit-linear-gradient(45deg, #159ed0 0%,#125d9a 100%);
    background: linear-gradient(45deg, #159ed0 0%,#125d9a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#159ed0', endColorstr='#125d9a',GradientType=1 );

*/}
.solution a img {
    display: inline-block;
    height: 50px;
    width: auto;
}

.formfree p{
    margin: 0;
}
.tabs {
  position: relative;
  margin: 20px 0;
  border-bottom: 1px solid #ccc;
}
.tabs li {
    display: inline-block;
    padding: 10px;
    text-decoration: none;
    width: 33%;
    text-align: center;
}
.tabs li p{
    display: inline-block;
    color: #7c7c7c;
    margin-left: 10px;
    vertical-align: middle;
    line-height: 1.5em;
    font-size: .9em;
}
.tabs li.selected p{
    color: #151515
}
.tabs .indicater{
    margin-bottom: -1px;
}
.more-services{
    margin-top: 25px
}
.tab-img img{
    max-width: 100%
}
.s-banner{
    position: relative;
    overflow: hidden;
}
.s-banner:before{
    content: "";
    background: #159ed0;
    background: -moz-linear-gradient(45deg, #159ed0 0%, #125d9a 100%);
    background: -webkit-linear-gradient(45deg, #159ed0 0%,#125d9a 100%);
    background: linear-gradient(45deg, #159ed0 0%,#125d9a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#159ed0', endColorstr='#125d9a',GradientType=1 );
    position: absolute;
    left: -9%;
    top: 0;
    height: 100%;
    width: 60%;
    display: inline-block;
    z-index: 0;
    transform: skewX(-10deg);
}
.s-banner:after {
    content: "";
    position: absolute;
    left: -9%;
    top: 0;
    height: 100%;
    width: 60%;
    display: inline-block;
    z-index: 0;
    transform: skewX(-10deg);
    background-image: url(../img/back-s-banner.png);
    background-position: center;
    background-size: contain;
    background-attachment: fixed;
    opacity: .3;
}
.s-banner.right:before{
    left: auto;
    right: -9%;
}
.s-banner.right:after{
    left: auto;
    right: -9%;
}
.s-banner.timbrado {
    background-image: url(../img/banner-timprado.jpeg);
    background-size: cover;
    background-position: center;
}
.s-banner.correo-robotizado {
    background-image: url(../img/back-robotizado.png);
    background-size: cover;
    background-position: center;
}
.s-banner-content{
    width: 50%;
    padding: 150px;
    position: relative;
    z-index: 1;
    font-size: 1.2em
}
.s-banner-content a{
    font-size: .8em
}
.s-banner-content h2{
    margin: 0
}
.s-banner-content p{
    margin-top: 0
}
.s-banner.right .s-banner-content{
    margin-left: 50%;
    text-align: right;
}
#why-edifactmx{
    padding: 60px 0
}
#certifications{
    padding: 60px 0
}
#certifications > .container > .row > .col-md-6:first-child{
    border-right: 1px solid #ccc
}
.certification p,.certification h3{
    margin: 0;
}
.certification figure {
    height: 105px;
    position: relative;
}
.certification figure img{
    position: absolute;
    top: 50%;
    max-width: 100%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#prefooter{
    position: relative;
}
#prefooter img{
    width: 100%;
    height: auto;
}
.calltoaction{
    position: absolute;
    width: 100%;
    top: 0
}
#videobanner{
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.why-item-content {
    margin-top: 30px;
}
.why-item h3, .why-item p {
    margin: 0;
}
.why-item figure{
    margin-bottom: 10px
}
.why-item figure img{
    width: auto;
    height: 100px;
}
footer{
    display: inline-block;
    width: 100%;
    position: relative;
    padding: 40px 0 0 0
}
footer .container{
    position: relative;
    z-index: 2
}
footer:before{
    content: "";
    background: #159ed0;
    background: -moz-linear-gradient(45deg, #159ed0 0%, #125d9a 100%);
    background: -webkit-linear-gradient(45deg, #159ed0 0%,#125d9a 100%);
    background: linear-gradient(45deg, #159ed0 0%,#125d9a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#159ed0', endColorstr='#125d9a',GradientType=1 );
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: inline-block;
    z-index: 1;
}
footer:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: inline-block;
    z-index: 1;
    background-image: url(../img/back-s-banner.png);
    background-position: center;
    background-size: contain;
    background-attachment: fixed;
    opacity: .3;
}
.f-top a{
    color: #fff;
    text-decoration: none;
    display: inline-block;
}
.f-top a:hover{
    text-decoration: underline;
}
.f-top li{
    margin-bottom: 5px;
}
footer h3{
    margin-bottom: 10px
}
.f-social{
    text-align: left;
    width: 100%;
    display: inline-block;
    margin: 0 0 10px 0
}
.f-social li {
    display: inline-block;
    vertical-align: middle;
    margin: 0 20px 0 0;
}
.f-middle{
    text-align: center;
    position: relative;
    margin: 25px 0;
}
.f-middle img{
    width: 150px;
    height: auto;
    display: inline-block;
}
.f-middle:before,.f-middle:after{
    content: "";
    height: 1px;
    width: 40%;
    background-color: #89d5ff;
    position: absolute;
    left: 0;
    top: 50%;
}
.f-middle:after{
    right: 0;
    left: auto;
}
.fixheader{
    padding: 0;
    -webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
   -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
     -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
        transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */

-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
        transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}

header .fixheader nav ul.nav-niv1 > li > a:before,header .fixheader nav ul.nav-niv1 > li > a:after  {
    background-color: #222;
}
.nav-niv2{
    position: absolute;
    width: 220px;
    background-color: #fff;
    top: 100%;
    left: 0;
    padding: 0;
    transform: translateY(10%);
    opacity: 0;
    visibility: hidden;
    transition: transform .4s ease, opacity .4s ease,visibility .4s ease;
    -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);
}
.fixheader .nav-niv2 {
    position: absolute;
    margin-top: 1px
}
.nav-niv1 > li:hover .nav-niv2{
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    visibility: visible;
}
.nav-niv2 li {
    width: 100%;
    position: relative;
}
.nav-niv2 li:hover{
    background-color: #1492c6;
}

header nav ul.nav-niv2 li:hover > a{
    color: #fff
}
header nav ul.nav-niv2 li a {
    color: #292929;
    display: inline-block;
    width: 100%;
    font-size: .9em;
    text-align: left;
    padding: 7px 15px;
}
.nav-niv1 > li{
    position: relative;
    padding: 20px 0;
}
.fixheader .nav-niv1 > li{
    padding-bottom: 26px
}
.nav-niv3{        
    width: 115%;
    top: 0;
    position: absolute;   
    left: 100%;
    background-color: #1492c6;
    transform: translateX(20%);
    opacity: 0;
    visibility: hidden;
    transition: transform .4s ease, opacity .4s ease,visibility .4s ease;   
    background-color: #fff;
    -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);
}
.nav-niv3 li a{
    color-rendering: #fff
}
.nav-niv2 li:hover .nav-niv3{
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    visibility: visible;
}
.nav-responsive {
    display: none;
    cursor: pointer;
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 11;
}
.bar1, .bar2, .bar3 {
    width: 25px;
    height: 2px;
    background-color: #113250;
    margin: 4px 0;
    transition: 0.4s;
}
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-4px, 5px);
    transform: rotate(-45deg) translate(-4px, 5px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-4px, -4px);
    transform: rotate(45deg) translate(-4px, -4px);
}
#banner-image {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: auto;
}
#banner-image img{
    width: 100%;
    height: auto;
}
.page .shadow-main {
    width: 50%;
}
#form-contact{
    margin: 40px 0 0 0
}
form .input-content{
    margin-bottom: 10px;
    display: block;
    float: left;
    width: 98%
}
form .input-content input,form .input-content textarea,form .input-content select{
    display: inline-block;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f7f7f7;
    padding: 10px;
}
form .input-content select{
    height: 40px
}
form .input-content textarea{
    height: 7em
}
form .input-content label{
    display: inline-block;
    width: 100%;
    text-align: left;
    font-size: .9em
}
form .input-content.middle{
    width: 48%;
    margin-right: 2%
}
#form-contact h3, #form-contact h4{
    margin: 0
}
.list-uens li{
    margin-bottom: 15px
}
.maps{
    margin-top: 20px
}
.maps img{
    width: 100%
}
.price {
    min-height: 482px;
    padding-bottom: 50px
}
.prices-content{
    justify-content: center;
    margin-top: 20px
}
.product-content{
}
.product-content img{
    max-width: 100%
}
.slick-initialized .slick-slide{
}
.back-gray{
    background-color: #f7f7f7
}
.why{
    padding: 40px 0
}
.back-blue-part:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: inline-block;
    z-index: 1;
    background-image: url(../img/back-s-banner.png);
    background-position: center;
    background-size: contain;
    background-attachment: fixed;
    opacity: .3;
}
.back-blue-part:before {
    content: "";
    background: #159ed0;
    background: -moz-linear-gradient(0deg, #159ed0 0%, #125d9a 100%);
    background: -webkit-linear-gradient(0deg, #159ed0 0%,#125d9a 100%);
    background: linear-gradient(0deg, #159ed0 0%,#125d9a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#159ed0', endColorstr='#125d9a',GradientType=1 );
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: inline-block;
    z-index: 1;
}
header{
    z-index: 10
}
.video-ficha{
    width: 100%;
    height: 300px;
}
.price ul li.price-prod {
    font-size: 1.7em;
    border-bottom: 1px solid #ddd;
    margin: auto 10px;
    padding: 10px;
}
.download-file{
    text-decoration: none;
    display: inline-block;
    margin-top: 10px
}
.download-file p{
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px
}
.download-file:hover p{
    text-decoration: underline;
}
img{
    max-width: 100%
}
#prefooter img{
	max-width: 5000px
}
.border-bottom{
    border-bottom: 1px solid #ddd;
    padding: 50px 0
}
.border-bottom.last{
    border-bottom: none
}
.about-content{
}
.about-content h2{
    margin-top: 0
}
.margin-bottom-40{
    margin-bottom: 40px
}
.btn-contact {
    padding: 12px!important;
    font-size: 1.1em;
}
.list-uens{
    font-size: .9em
}
.content-list{
    list-style: disc;
    line-height: 2em
}
.product-content h2{
    margin-top: 0
}
.list-complements li {
    width: 33%;
    vertical-align: top;
    float: left;
}
.list-complements.concept li {
    width: 50%;
}
.list-complements li a{
    text-decoration: none;
    color: inherit;
}
.list-complements li a:hover{
    text-decoration: underline;
}
.addendas-list{
    width: 100%;
    list-style: none
}
.addendas-list li {
    width: 49%;
    vertical-align: top;
    float: left;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-right: 1%;
}
.addendas-list h3 {
    width: 49%;
    display: inline-block;
    text-align: left;
    font-weight: 500;
    font-size: .9em;
}
.addendas-list a{
    text-decoration: none;
    color: inherit;    
}
.addendas-list div{
    width: 49%;
    display: inline-block;
    text-align: center;
}
.addendas-list div img{
    max-width: 100%;
    display: inline-block;
}
#calltoaction {
    padding: 100px 0;
    background-attachment: fixed;
    background-size: cover;
    position: relative;
}
#calltoaction:before{
    content: "";
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
}
#calltoaction h2{
    font-size: 2em;
    margin: 0;
}
#calltoaction h3{
    font-size: 1.5em;
    margin: 0;
}
.intro-solutions{
    padding: 60px 0
}
.intro-plans{
    margin:0
}
.plan-left{
    border-right: 1px solid #ddd
}
.plan-right h2{
    margin-bottom: 20px
}
.plans-content .tabs-content .service{
    margin: 0;
    margin-bottom: 20px
}
.plans{
    margin-bottom: 20px
}
.who-content figure img{
    height: 100px
}
.normal-mouse{
    cursor: default;
}
.all33 .col-md-3{
    border-right: 1px solid #ddd
}
.all33 .row{
    padding: 30px 0;
}
.all33 h4{
    margin: 0;
    font-size: 1.1em
}
.all33 h3{
    font-size: 1.3em;
    margin: 0
}
.all33 ul{
    width: 100%
}
.all33 ul li{
    width: 32.8%;
    display: inline-block;
    margin-bottom: 10px;
}
.slick-prev, .slick-next{
    display: none!important
}
.h-call-phone{
    transform: scale(.9,.9);
}
.contact-responsive{
    display: none!important
}
.sat-news .img-post {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,000000+100&0+62,1+100 */
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(97,97,97,0) 62%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(97,97,97,0) 62%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(97,97,97,0) 62%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}
.sat-news .img-post a {
    display: inline-block;
}
.sat-news .img-back {
    width: 100%;
    height: auto;
}
.sat-news .img-main {
    width: 100%;
    height: auto;
    min-height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    -webkit-transition: all 200ms cubic-bezier(0.000, 0.000, 0.580, 1.000); 
   -moz-transition: all 200ms cubic-bezier(0.000, 0.000, 0.580, 1.000); 
     -o-transition: all 200ms cubic-bezier(0.000, 0.000, 0.580, 1.000); 
        transition: all 200ms cubic-bezier(0.000, 0.000, 0.580, 1.000); /* ease-out */

-webkit-transition-timing-function: cubic-bezier(0.000, 0.000, 0.580, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.000, 0.000, 0.580, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.000, 0.000, 0.580, 1.000); 
        transition-timing-function: cubic-bezier(0.000, 0.000, 0.580, 1.000); /* ease-out */
}
.sat-news:hover .img-main{
    transform: scale(1.1,1.1);
}
.why-item p {
    margin: 0;
    line-height: 1.5em;
    margin-bottom: 10px;
    font-size: .95em
}
.why-item h3{
    
}

#products .btn{
   /*padding: 5px 25px;*/
   width: 100%;
   font-size: .9em
}
#products .item-product{
    padding-bottom: 25px
}
#products{
    padding: 60px 0 0 0
}
#products .why-item figure img {
    width: auto;
    height: 70px;
}
.list-done{
    list-style: circle;
    padding-left: 20px
}
form .bnt-form-send{
    display: none;
}
.alert {
    display: inline-block;
    margin: 0;
    background-color: #ff7d7d;
    padding: 5px 15px;
    border-radius: 3px;
    border: 1px solid #f96b6b;
    color: #ffffff;
    margin-bottom: 10px;
    width: 100%;
    font-size: .9em;
    position: relative;
}
.alert.success{
    background-color: #19b549;
    border: 1px solid #1d9c2d; 
}
.closealert {
    position: absolute;
    right: 10px;
    font-size: 1.5em;
    top: -50%;
    transform: translate(0,50%);
    cursor: pointer;
}
.webinar{
    overflow: hidden;
    border-radius: 5px;
    background-color: #fff;
    padding-bottom: 20px;
    box-shadow: 0 2px 15px 0 rgba(0,0,0,.1);
    webkit-transition-property: -webkit-box-shadow;
    transition-property: -webkit-box-shadow;
    -o-transition-property: box-shadow;
    transition-property: box-shadow;
    transition-property: box-shadow,-webkit-box-shadow;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
}
.webinar:hover{
    box-shadow: 0 2px 20px 0 rgba(0,0,0,.3)
}
.webinar .img-content{
    overflow: hidden;
    position: relative;
}
.webinar .img-back{
    position: relative;
    width: 100%;
    height: auto;
}
.webinar .img-main{
    position: absolute;
    width: 100%;
    height: auto;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.webinar .info-webinar{
    padding: 0 15px;
}
.webinar .info-webinar a.ref-h1{
    text-decoration: none;
    color: #151515;
}
.webinar .info-webinar h1{
    font-size: 1.1em;
    line-height: 1.5em;
    min-height: 78px;
    overflow: hidden;
}
.webinar .info-webinar h2,.webinar .info-webinar h3{
    font-size: 1em;
    display: inline-block;
    margin-bottom: 0
}
.webinar .info-webinar h2{
}
.webinar .info-webinar h3{
    padding-right: 10px;
    border-right: 1px solid #b5b5b5;
    margin-right: 7px;
}
.more-webinars{
    margin-top: 40px
}
.txt-orange {
    color: #ff5900;
}
.list-webinars{
    margin-top: 40px
}
.row.filtr-container{
    margin:0;
}
/* final */
/* ---------------- classes buttons --------------- */
a.btn{
    display: inline-block;
    text-decoration: none
}
.btn{
    line-height: 1em;
    display: inline-block;
    padding: 12px 30px;
    vertical-align: middle;
    cursor: pointer;
    -webkit-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
   -moz-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
     -o-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
        transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */

-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
   -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
     -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
        transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
        -webkit-box-shadow: 7px 7px 15px -2px rgba(0,0,0,0.2);
        -moz-box-shadow: 7px 7px 15px -2px rgba(0,0,0,0.2);
        box-shadow: 7px 7px 15px -2px rgba(0,0,0,0.2);
}
.btn-yellow{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff5900+0,f8874a+100 */
    background: #ff5900; /* Old browsers */
    background: -moz-linear-gradient(left, #ff5900 0%, #f8874a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ff5900 0%,#f8874a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ff5900 0%,#f8874a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5900', endColorstr='#f8874a',GradientType=1 ); /* IE6-9 */
    color:#fff;
    text-align: center;
    border:1px solid #d66500;
}
.btn-yellow:hover{
    background-color: #e2a805;
    -webkit-box-shadow: 3px 3px 15px -2px rgba(0,0,0,0.2);
-moz-box-shadow: 3px 3px 15px -2px rgba(0,0,0,0.2);
box-shadow: 3px 3px 15px -2px rgba(0,0,0,0.2);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f8874a+0,ff5900+100 */
background: #f8874a; /* Old browsers */
background: -moz-linear-gradient(left, #f8874a 0%, #ff5900 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f8874a 0%,#ff5900 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f8874a 0%,#ff5900 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8874a', endColorstr='#ff5900',GradientType=1 ); /* IE6-9 */
}
.btn-blue{
    background-color: #002f56;
    color:#fff;
    text-align: center;
}
.btn-blue:hover{
    background-color: #00a0df
}
.btn-blue{
     background: #159ed0;
    background: -moz-linear-gradient(280deg, #159ed0 0%, #125d9a 100%);
    background: -webkit-linear-gradient(280deg, #159ed0 0%,#125d9a 100%);
    background: linear-gradient(280deg, #159ed0 0%,#125d9a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#159ed0', endColorstr='#125d9a',GradientType=1 );
    border:1px solid #125d9a;
}
.btn-blue:hover{
     background: #159ed0;
    background: -moz-linear-gradient(280deg, #125d9a 0%, #159ed0 100%);
    background: -webkit-linear-gradient(280deg, #125d9a 0%,#159ed0 100%);
    background: linear-gradient(280deg, #125d9a 0%,#159ed0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#125d9a', endColorstr='#159ed0',GradientType=1 );
}
/* ---------------- classes icon --------------- */
.icon{
    display: inline-block;
    vertical-align: middle;
}
.i-phone-b {
    background: url('../img/sprites.png') no-repeat -18px -18px;
    width: 30px;
    height: 30px;
}
.fixheader .i-phone-b {
    background: url('../img/sprites.png') no-repeat -18px -62px;
    width: 30px;
    height: 30px;
}
.i-mail-b {
    background: url('../img/sprites.png') no-repeat -69px -22px;
    width: 36px;
    height: 22px;
}
.i-logo-epyme {
    background: url('../img/sprites.png') no-repeat -648px -217px;
    width: 298px;
    height: 98px;
}
.i-logo-epymelite {
    background: url('../img/sprites.png') no-repeat -18px -200px;
    width: 298px;
    height: 106px;
}
.i-logo-epymepro {
    background: url('../img/sprites.png') no-repeat -334px -213px;
    width: 299px;
    height: 106px;
}
.i-who1 {
    background: url('../img/sprites.png') no-repeat -18px -108px;
    width: 48px;
    height: 48px;
}
.i-who2 {
    background: url('../img/sprites.png') no-repeat -129px -108px;
    width: 40px;
    height: 47px;
}
.i-who3 {
    background: url('../img/sprites.png') no-repeat -241px -108px;
    width: 39px;
    height: 47px;
}
.i-who4 {
    background: url('../img/sprites.png') no-repeat -77px -108px;
    width: 40px;
    height: 47px;
}
.i-who5 {
    background: url('../img/sprites.png') no-repeat -185px -108px;
    width: 47px;
    height: 47px;
}
.i-who6 {
    background: url('../img/sprites.png') no-repeat -295px -108px;
    width: 47px;
    height: 47px;
}
.i-pac {
    background: url('../img/sprites.png') no-repeat -359px -79px;
    width: 83px;
    height: 106px;
}
.i-access {
    background: url('../img/sprites.png') no-repeat -462px -103px;
    width: 101px;
    height: 59px;
}
.i-update {
    background: url('../img/sprites.png') no-repeat -574px -87px;
    width: 90px;
    height: 90px;
}
.i-security {
    background: url('../img/sprites.png') no-repeat -678px -95px;
    width: 86px;
    height: 74px;
}
.i-fast {
    background: url('../img/sprites.png') no-repeat -781px -91px;
    width: 80px;
    height: 83px;
}
.i-support {
    background: url('../img/sprites.png') no-repeat -886px -85px;
    width: 73px;
    height: 95px;
}
.i-facebook {
    background: url('../img/sprites.png') no-repeat -151px -23px;
    width: 17px;
    height: 17px;
}
.i-twitter {
    background: url('../img/sprites.png') no-repeat -115px -23px;
    width: 21px;
    height: 17px;
}
.i-youtube {
    background: url('../img/sprites.png') no-repeat -116px -57px;
    width: 19px;
    height: 12px;
}
.i-linkeding {
    background: url('../img/sprites.png') no-repeat -148px -54px;
    width: 19px;
    height: 17px;
}
.i-sat {
    background: url('../img/sprites.png') no-repeat -9px -159px;
    background-size: 500px 222px;
    width: 35px;
    height: 51px;
}
.i-amexipac {
    background: url('../img/sprites.png') no-repeat -52px -171px;
    background-size: 500px 222px;
    width: 130px;
    height: 28px;
}
.i-amiti {
    background: url('../img/sprites.png') no-repeat -189px -165px;
    background-size: 500px 222px;
    width: 84px;
    height: 40px;
}
.i-eespa {
    background: url('../img/sprites.png') no-repeat -287px -171px;
    background-size: 500px 222px;
    width: 161px;
    height: 29px;
}
.i-webservice {
    background: url('../img/data.svg') no-repeat 0 0;
    width: 60px;
    height: 60px;
}
.i-portalweb {
    background: url('../img/computer.svg') no-repeat 0 0;
    width: 60px;
    height: 60px;
}
.i-correorobotizado {
    background: url('../img/robot.svg') no-repeat 0 0;
    width: 60px;
    height: 60px;
}
.i-cfdirelacionados {
    background: url('../img/profiles.svg') no-repeat 0 0;
    
    width: 60px;
    height: 60px;
}
.i-infinite {
    background: url('../img/infinite.svg') no-repeat 0 0;
    width: 50px;
    height: 50px;  
}
.i-certificate {
    background: url('../img/certificate.svg') no-repeat 0 0;
    width: 80px;
    height: 80px;  
}
.i-check-list {
    background: url('../img/check-list.svg') no-repeat 0 0;
    width: 80px;
    height: 80px;  
}
.i-files {
    background: url('../img/files.svg') no-repeat 0 0;
    width: 80px;
    height: 80px;  
}
.i-setting {
    background: url('../img/setting.svg') no-repeat 0 0;
    width: 80px;
    height: 80px;  
}
.i-pdf {
    background: url('../img/pdf.svg') no-repeat 0 0;
    width: 80px;
    height: 80px;  
}
.i-pyme{
    background: url('../img/pyme-gray.png') no-repeat 0 0;
    background-size: 40px 50px;
    width: 40px;
    height: 50px;
}
.i-download {
    background: url('../img/i-download.png') no-repeat 0 0;
    background-size: 25px 23px;
    width: 25px;
    height: 23px;
}
.selected .i-pyme{
    background: url('../img/pyme-blue.png') no-repeat 0 0;
    background-size: 40px 50px;
    width: 40px;
    height: 50px;
}
.i-empresarial {
    background: url('../img/i-empresarial-gray.png') no-repeat 0 0;
    background-size: 56px 50px;
    width: 56px;
    height: 50px;
}
.selected .i-empresarial {
    background: url('../img/i-empresarial-blue.png') no-repeat 0 0;
    background-size: 56px 50px;
    width: 56px;
    height: 50px;
}
.i-corporativo {
    background: url('../img/i-corporativo-gray.png') no-repeat 0 0;
    background-size: 49px 50px;
    width: 49px;
    height: 50px;
}
.selected .i-corporativo {
    background: url('../img/i-corporativo-blue.png') no-repeat 0 0;
    background-size: 49px 50px;
    width: 49px;
    height: 50px;
}
.i-fphone {
    background: url('../img/sprites.png') no-repeat -421px -23px;
    width: 18px;
    height: 18px;
}
.i-fmail {
    background: url('../img/sprites.png') no-repeat -461px -26px;
    width: 19px;
    height: 13px;
}
.i-fplace {
    background: url('../img/sprites.png') no-repeat -513px -23px;
    width: 13px;
    height: 18px;
}
.i-calendar {
    background: url('../img/i-calendar-gray.png') no-repeat 0 0;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}
.selected .i-calendar {
    background: url('../img/i-calendar-blue.png') no-repeat 0 0;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}
.i-money {
    background: url('../img/i-money-gray.png') no-repeat 0 0;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}
.selected .i-money {
    background: url('../img/i-money-blue.png') no-repeat 0 0;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}
.i-infinity {
    background: url('../img/i-infinity-gray.png') no-repeat 0 0;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}
.selected .i-infinity {
    background: url('../img/i-infinity-blue.png') no-repeat 0 0;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}
.i-facturacion{
    background: url('../img/i-facturacion.png') no-repeat 0 0;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}
.i-calculator{
    background: url('../img/i-calculator.png') no-repeat 0 0;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}
.i-nomina{
    background: url('../img/i-nomina.png') no-repeat 0 0;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}
.i-validacion{
    background: url('../img/i-validacion.png') no-repeat 0 0;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}
.i-webservice{
   background: url('../img/i-webservice.png') no-repeat 0 0;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}
.iw-calendar-g{
    background: url('../webinars/img/calendar-g.svg') no-repeat 0 0;
    width: 15px;
    height: 15px;
    vertical-align: text-top;
}
.iw-calendar-w{
    background: url(../webinars/img/calendar-w.svg) no-repeat 0 0;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
.iw-clock-w{
    background: url(../webinars/img/clock-w.svg) no-repeat 0 0;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
.iw-user-g{
    background: url('../webinars/img/user-g.svg') no-repeat 0 0;
    width: 15px;
    height: 15px;
    vertical-align: text-top;
}
.iw-user-w{
    background: url('../webinars/img/user-w.svg') no-repeat 0 0;
    width: 50px;
    height: 50px;
    vertical-align: text-top;
}
.i-allinsumos{
    background: url('../img/i-insumos.png') no-repeat 0 0;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}
/* ---------------- classes text --------------- */
.filtr-container p {
    line-height: 2em;
    text-align: justify;
    font-size: .9em;
    margin:5px 0;
}
.margin-bottom{
    margin-bottom: 20px
}
.txt-white{
    color:#fff!important;
}
.txt-blue{
    color: #002f56;
}
.txt-bluelight{
    color: #00a0de
}
.txt-red{
    color: red;
}
.txt-gray{
    color: #7c7c7c;
}
.txt-yellow{
    color: #e3b913;
}
.txt-center{
    text-align: center;
}
.txt-left{
    text-align: left;
}
.txt-right{
    text-align: right;
}
.txt-justify{
    text-align: justify;
}
.txt-content{
    font-size: 1.2em
}
.font-lato{
    font-family: 'Lato', sans-serif;
    font-weight: normal
}
.font-lato-l{
    font-family: 'Lato', sans-serif;
    font-weight: lighter;
}
.font-lato-b{
    font-family: 'Lato', sans-serif;
    font-weight: bold;
}
.font-lato-xb{
    font-family: 'Lato', sans-serif;
    font-weight: 900
}
.whitout-margin{
    margin: 0;
}
/* ------ classes responsive ----- */

/* 1000 x 444 */
 @media only screen and (max-width : 1300px) {

 }
 @media only screen and (max-width : 1204px) {
    .slider-webinars {
        overflow-y: scroll;
        padding-bottom: 20px;
    }
    #banner{
        padding: 0;
    }
    .banner h1{
        font-size: 3em
    }
    .banner h2{
        font-size: 1em;
        margin-bottom: 10px
    }
    .banner h2 br{
        display: none
    }
    #videobanner{
        width: 120%;
        height: auto;
    }
    #solutions{
        padding: 30px 0
    }
    .tabs li{
        width: 32.5%;
        padding: 0;
    }
    .tabs li p {
        margin-left: 0;
        text-align: center;
        font-size: 1.1em;
        margin: 10px 0;
    }
    .tabs-content h2{
        text-align: center;
    }p
    .solution-description p{
        text-align: justify;
    }
    .tabs-content .service{
        width: 150px;
        padding: 5px;
        margin-right: 5px;
        margin-bottom: 5px
    }
    .tabs-content .service img{
        width: 100%;
        height: auto;
    }
    .more-services{
        margin-top: 10px
    }

    #why-edifactmx{
        padding: 30px 0
    }
    .why-item-content {
        margin-top: 0px;
    }
    #certifications {
        padding: 30px 0;
        text-align: center;
    }
    #certifications p{
        text-align: justify;
    }
    #prefooter {
        overflow: hidden;
        padding-top:50px 
    }
    #prefooter h1{
        font-size: 1.2em;
    }
    .f-top{
        font-size: .9em
    }
    .footer-bottom .icon{
        margin-bottom: 10px
    }
    .f-middle:before, .f-middle:after{
        width: 25%
    }
    .title{
        font-size: 1.7em
    }
    .certification figure{
        margin: 0
    }
    .s-banner-content {
        width: 60%;
        padding: 30px;
        position: relative;
        z-index: 1;
        font-size: 1em;
    }
    .s-banner:before,.s-banner:after{
        width: 70%
    }
    .s-banner-content p {
        line-height: 1.6em;
    }
    .s-banner.right .s-banner-content {
        margin-left: 40%;
    }
    .main-title{
        top: 40%
    }
    #prefooter img {
        width: 100%;
        height: auto;
        margin-left: 0;
    }
    .webinar .info-webinar h2, .webinar .info-webinar h3{
        font-size: .8em
    }
    .webinar .info-webinar h1{
        font-size: 1em
    }
}


@media only screen and (min-width : 1204px) {
    #products .item-product{
        opacity: 0;
    }
    .fixheader{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        border-bottom: 1px solid #ddd;
        background-color: #fff;
        margin-bottom: 0
    }
    .fixheader .logo{
        display: none
    }
    .fixheader .logo-responsive{
        display:block;
    }
    .fixheader ul.contact-h li p span{
        color: #222!important
    }
    header nav ul.nav-niv1 > li > a:before {
        content: "";
        height: 1px;
        background-color: #fff;
        position: absolute;
        bottom: -4px;
        display: inline-block;
        width: 0%;
        left: 50%;
        -webkit-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
       -moz-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
         -o-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
            transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */

    -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
       -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
         -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
            transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
    }
    header nav ul.nav-niv1 > li > a:after {
        content: "";
        height: 1px;
        background-color: #fff;
        position: absolute;
        bottom: -4px;
        display: inline-block;
        width: 0%;
        right: 50%;
        -webkit-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
       -moz-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
         -o-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
            transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */

    -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
       -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
         -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
            transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
    }
    header nav ul li:hover a:after,header nav ul li:hover a:before{
        width: 50%
    }
    header nav ul li.active a:after,header nav ul li.active a:before{
        width: 50%
    }
}
@media only screen and (max-width : 1200px) {
        .nav-niv1 > li .nav-niv2 {
            -webkit-transform: none;
            transform: none;
            opacity: 1;
            visibility: visible;
            height: 0;
            overflow: hidden;
        }
        .nav-niv1 > li.open .nav-niv2{
            height: auto;
        }

        .nav-niv2 li .nav-niv3 {
            position: relative;
            left: 0;
            padding-left: 20px;
            -webkit-transform: none;
            transform: none;
            opacity: 1;
            visibility: visible;
            height: 0;
            overflow: hidden;
        }
        .nav-niv2 > li.open .nav-niv3{
            height: auto;
        }
        header nav ul.nav-niv2 > li > a:before {
            content: "";
            position: relative;
            left: -4px;
            line-height: 0;
            display: inline-block;
            bottom: 3px;
            background-color: #5f5f5f;
            width: auto;
            height: 2px;
            width: 5px;
        }

    .nav-niv2,.nav-niv3{
        box-shadow:none;
    }
    .contact-responsive{
        display: block!important;
    }

    .nav-responsive {
        display: inline-block;
        top: 30px;
        right: 30px;
    }
    .header-middle {
        height: 0;
    }
    nav {
        background-color: #fff;
        height: 100%;
        margin-top: 6px;
        width: 40%;
    }
    nav {
        -webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
        -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
        -o-transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
        transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
        -webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000);
        -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000);
        -o-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000);
        transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000);
    }
    nav {
        position: fixed;
        left: -100%;
    }
    .d-lg-none{
        display: none!important
    }
    .header-bottom {
        padding: 10px 0;
        margin-bottom: 0;
    }
    #banner {
        padding: 0;
    }
    .shadow-main {
        display: none;
    }
    .main-title {
        position: relative;
    }
    nav.show {
        left: 0;
        overflow-y: scroll;
        padding-bottom: 100px
    }
    .nav-niv1 {
        width: 100%;
    }
    ul.contact-h li:first-child {
        border-top: 0;
    }
    .nav-niv1 > li {
        padding: 0;
    }
    .nav-niv1 > li {
        position: relative;
        padding: 10px 0;
    }
    header nav ul li a {
        text-decoration: none;
        color: #292929;
        font-size: 1.1em;
        padding: 0 12px;
        position: relative;
        width: 100%;
        text-align: left;
        display: block;
        padding: 10px 50px;
    }
    header nav ul.nav-niv1 > li > a:before {
        content: "";
        position: relative;
        left: -4px;
        line-height: 0;
        display: inline-block;
        bottom: 5px;
        background-color: #5f5f5f;
        width: auto;
        height: 2px;
        width: 10px;
    }
    .nav-niv1 > li .nav-niv2 {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
        visibility: visible;
    }
    .nav-niv1 > li ul {
        display: block;
        width: 100%;
    }
    .nav-niv2 {
        position: relative;
    }
    header nav ul li {
        display: block!important;
        width: 100%;
    }
    header nav ul.nav-niv2 li a {
        text-align: left;
        padding-left: 60px;
    }
    .nav-niv1 > li {
        padding: 0;
    }
    .nav-niv2 li:hover {
        background-color: #fff;
    }
    header nav ul.nav-niv2 li:hover > a{
        color: #292929
    }
    .nav-niv2 li .nav-niv3 {
        position: relative;
        left: 0;
        padding-left: 20px;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
        visibility: visible;
    }
    .all33{
        text-align: center;
    }
    .all33 .row{
        border-bottom: 1px solid #ddd
    }
    #tabs-demo{
        display: none
    }
    #products {
        padding: 30px 0 0 0;
    }
    .contact-h {
        width: 100%;
        text-align: center!important;
    }
}
@media only screen and (max-width : 768px) {
   .logo-responsive {
        display: block!important;
        width: 30%;
        margin-left: 35%;
    }
    .logo {
        display: none;
    }
    #tabs-demo{
        display: none
    }
    .webinar .info-webinar h1 {
        font-size: 1.1em;
    }
    #tabs-desarrollo a {
        min-height: 60px;
    }
	#banner:after,.videos:after {
	    background-size: contain!important;
	}
    #banner{
        padding: 0;
    }
    .banner h1{
        font-size: 1.7em
    }
    .banner h2{
        font-size: 1em;
        margin-bottom: 10px
    }
    .banner h2 br{
        display: none
    }
    #videobanner{
        width: 120%;
        height: auto;
    }
    #solutions{
        padding: 30px 0
    }
    .tabs li{
        width: 32.5%;
        padding: 0;
    }
    .tabs li p {
        margin-left: 0;
        text-align: center;
        font-size: 1.1em;
        margin: 10px 0;
    }
    .tabs-content h2{
        text-align: center;
    }
    .solution-description p{
        text-align: justify;
    }
    .tabs-content .service{
        width: 200px;
        padding: 5px;
        margin-right: 5px;
        margin-bottom: 10px
    }
    .tabs-content .service img{
        width: 100%;
        height: auto;
    }
    .tabs-content{
        text-align: center;
    }
    .tab-img{
        display: none
    }
    .more-services{
        margin-top: 10px
    }

    #why-edifactmx{
        padding: 30px 0
    }
    .why-item-content {
        margin-top: 0px;
    }
    #certifications {
        padding: 30px 0;
        text-align: center;
    }
    #certifications p{
        text-align: justify;
    }
    #prefooter {
        overflow: hidden;
        padding-top:50px 
    }
    #prefooter h1{
        font-size: 1.2em;
    }
    #prefooter img {
        width: 100%;
        height: auto;
        margin-left: 0;
    }
    .f-top{
        font-size: .9em
    }
    .footer-bottom .icon{
        margin-bottom: 10px
    }
    .f-middle:before, .f-middle:after{
        width: 25%
    }
    .title{
        font-size: 1.7em
    }
    .certification figure{
        margin: 0
    }
    .s-banner-content {
        width: 100%;
        padding: 20px 15px;
        position: relative;
        z-index: 1;
        font-size: 1.2em;
        text-align: center;
    }
    .s-banner:before,.s-banner:after{
        opacity: .8;
        transform: none;
        width: 100%;
        left: 0;
    }
    .s-banner-content p {
        line-height: 1.6em;
    }
    .s-banner.right .s-banner-content {
        margin-left: 0;
        text-align: center;
    }
    .nav-responsive {
        display: inline-block;
        top: 20px;
        right: 30px;
    }
    .logo{
        display: none
    }
    .logo-responsive{
        display: block!important;
        width: 30%;
        margin-left: 35%;
    }
    .info-contact{
        display: none
    }
    nav{
        position: fixed;
        left: -100%;
    }
    header nav ul li{
        display: block!important;
        width: 100%;
    }
    .header-bottom {
        padding: 0;
        margin-bottom: 0;
    }
    .header-bottom .container{
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
    .header-bottom .container .row{
        margin: 0
    }
    .header-middle{
        height: 0
    }
    nav{
        -webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
   -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
     -o-transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
        transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */

-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
        transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */
    }
    nav{
        background-color: #fff;
        height: 100%;
        margin-top: 6px;
        width: 50%;
    }
    nav.show{
        left: 0;
        overflow-y: scroll;
    }
    header nav ul li a {
        text-decoration: none;
        color: #292929;
        font-size: 1.1em;
        padding: 0 12px;
        position: relative;
        width: 100%;
        text-align: left;
        display: block;
        padding: 10px 50px;
    }
    .nav-niv1{
        width: 100%
    }
    .nav-niv1 > li {
        position: relative;
        padding: 10px 0;
    }
    header .fixheader nav ul li a {
        color: #fff;
    }
    .nav-niv1 > li {
        padding: 0;
    }
    .nav-niv2{
        position: relative;
    }
    header nav ul.nav-niv2 li a{
        text-align: center;
    }
    .nav-niv2{
        display: none;
    }
    .nav-niv1 > li ul{
        display: block;
        width: 100%
    }
    .fixheader .nav-niv1 > li {
        padding-bottom: 0;
    }
    .fixheader .nav-niv2 {
        position: relative;
    }
    header nav ul.nav-niv2 li a {
        text-align: left;
        padding-left: 60px;
    }
    ul.contact-h li:first-child{
        border-top: 0
    }
    .nav-niv2 li:hover {
        background-color: #fff;
    }
    .nav-niv2 li:hover a{
        color: #292929;
    }
    header nav ul li.active a:after{
        display: none
    }
    header nav ul.nav-niv1 > li > a:before {
        content: "";
        position: relative;
        left: -4px;
        line-height: 0;
        display: inline-block;
        bottom: 5px;
        background-color: #5f5f5f;
        width: auto;
        height: 2px;
        width: 10px;
    }
    #banner-image {
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 150%;
        height: auto;
    }
    #banner {
        padding:0;
    }
    .shadow-main{
        display: none
    }
    .main-title{
       position: relative; 
    }
    .s-banner.timbrado,.s-banner.correo-robotizado{
        background-image: none
    }
    .s-banner.right:before{
        right: 0;
        left: 0
    }
    .nav-niv1 > li .nav-niv2{
        -webkit-transform: none;
        transform: none;
        opacity: 1;
        visibility: visible;
    }
    .llamesincosto{
        display: block;
    }
    .intro-text h1{
        margin: 0!important
    }
    h2{
        margin: 10px 0;
    }
    p{
        margin: 5px 0
    }
    .formfree .content {
        width: 90%!important;
        margin-left: 0%;
        height: 90%!important;
        overflow: scroll;
    }
    .webinar .info-webinar h1 {
        font-size: 1.3em;
    }
    .logo{
        display: none
    }
    .logo-responsive {
        display: block!important;
        width: 100%;
        margin-left: 0;
        background-color: #fff;
        padding: 20px 0;
    }
    .logo-responsive img {
        max-width: 100%;
        width: 30%;
        display: block;
        margin: 0 auto;
    }
    .contact-h{
        text-align: center;
        margin: 10px 0
    }
    .header-bottom .btn {
        width: 100%;
        margin-left: 0;
        margin-top: 5px;
        position: fixed;
        bottom: 0;
        left: 0;
        font-size: 1.5em;
    }

}
@media only screen and (max-width : 480px) {
    ul.contact-h li p {
        display: inline-block;
        margin: 0;
        vertical-align: middle;
        font-size: .8em;
    }
    ul.contact-h li {
        margin: 0px;
    }
    #products {
        padding: 25px 0 0 0;
    }
    .contact-h{
        text-align: center;
        margin-top: 5px
    }
    .header-bottom .btn {
        width: 100%;
        margin-left: 0;
        margin-top: 5px;
        position: fixed;
        bottom: 0;
        font-size: 1em
    }
    .webinar{
        margin-bottom: 20px
    }
    .slider-webinars {
        overflow-y: inherit;
        padding-bottom: 0;
    }
    .sat-news h3{
        height: auto!important;
    }
    .download-content:before{
        content: "Descargar: ";
        font-weight:bold;
    }
    .download-content{
        margin-top: 10px
    }
    .row-title{
        text-align: center;
    }
    .row-title .col-12{
        border-top: 1px solid #fff 
    }
    header{
    }
    .nav-responsive {
        display: inline-block;
        top: 11px;
        right: 15px;
    }
    #banner {
        padding: 0
    }
    .shadow-main {
        display: none
    }
    .banner h1{
        font-size: 2em
    }
    .banner h2{
        font-size: 1em;
        margin-bottom: 10px
    }
    .banner h2 br{
        display: none
    }
    .main-title{
        position: relative;
    }
    #videobanner{
        width: auto;
        height: 100%;
    }
    #solutions{
        padding: 30px 0
    }
    .tabs li{
        width: 32.5%;
        padding: 0;
    }
    .tabs li p {
        margin-left: 0;
        text-align: center;
        font-size: 1.1em;
        margin: 10px 0;
    }
    .tabs-content h2{
        text-align: center;
    }
    .solution-description p{
        text-align: justify;
    }
    .tabs-content .service{
        width: 200px;
        padding: 5px;
        margin-right: 5px;
        margin-bottom: 5px
    }
    .tabs-content .service img{
        width: 100%;
        height: auto;
    }
    .tabs-content{
        text-align: center;
    }
    .tab-img{
        display: none
    }
    .more-services{
        margin-top: 10px
    }
    .s-banner-content {
        width: 100%;
        padding: 20px 15px;
        position: relative;
        z-index: 1;
        font-size: 1.2em;
        text-align: center;
    }
    .s-banner:before {
        opacity: .8;
        transform: none;
        width: 100%;
        left: 0;
    }
    .s-banner:after {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 0;
        transform: none;
        background-size: cover;
        opacity: .3;
    }
    .s-banner-content h2 {
        font-size: 1.2em;
        text-align: center;
    }
    .s-banner-content p {
        margin-top: 0;
        text-align: justify;
        line-height: 1.5em;
        font-size: .9em;
    }
    #why-edifactmx{
        padding: 30px 0
    }
    .why-item-content {
        margin-top: 0px;
    }
    .s-banner.right:before {
        right: 0;
    }
    .s-banner.right .s-banner-content {
        margin-left: 0;
        text-align: center;
    }
    .s-banner.right:after {
        left: auto;
        right: 0;
    }
    #certifications {
        padding: 30px 0;
        text-align: center;
    }
    #certifications p{
        text-align: justify;
    }
    #prefooter {
        overflow: hidden;
        padding-top:50px 
    }
    #prefooter h1{
        font-size: 1.2em;
    }
    #prefooter img {
        width: 300%;
        height: auto;
        margin-left: -135%;
    }
    .f-top{
        font-size: .9em
    }
    .footer-bottom .icon{
        margin-bottom: 10px
    }
    .f-middle:before, .f-middle:after{
        width: 25%
    }
    .title{
        font-size: 1.7em
    }
    .certification figure{
        margin: 0
    }
    .logo{
        display: none
    }
    .logo-responsive {
        display: block!important;
        width: 100%;
        margin-left: 0;
        background-color: #fff;
        padding: 20px 0;
    }
    .logo-responsive img {
        max-width: 100%;
        width: 30%;
        display: block;
        margin: 0 auto;
    }
    .info-contact{
        display: none
    }
    nav{
        position: fixed;
        left: -100%;
    }
    header nav ul li{
        display: block!important;
        width: 100%;
    }
    .header-bottom {
        padding: 0;
        margin-bottom: 0;
    }
    .header-middle{
        height: 0
    }
    nav{
        -webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
   -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
     -o-transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
        transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */

-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
        transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */
    }
    nav{
        background-color: #fff;
        height: 100%;
        margin-top: 6px;
        width: 100%;
    }
    nav.show{
        left: 0;
    }
    header nav ul li a {
        text-decoration: none;
        color: #292929;
        font-size: 1.1em;
        padding: 0 12px;
        position: relative;
        width: 100%;
        text-align: left;
        display: block;
        padding: 10px 50px;
    }
    .nav-niv1{
        width: 100%
    }
    .nav-niv1 > li {
        position: relative;
        padding: 10px 0;
    }
    header .fixheader nav ul li a {
        color: #fff;
    }
    .nav-niv1 > li {
        padding: 0;
    }
    .nav-niv2{
        position: relative;
    }
    header nav ul.nav-niv2 li a{
        text-align: center;
    }
    .nav-niv2{
        display: none;
    }
    .nav-niv1 > li ul{
        display: block;
        width: 100%
    }
    .fixheader .nav-niv1 > li {
        padding-bottom: 0;
    }
    .fixheader .nav-niv2 {
        position: relative;
    }
    header nav ul.nav-niv2 li a {
        color: #292929;
        text-align: left;
        padding-left: 60px;
    }
    ul.contact-h li:first-child{
        border-top: 0
    }
    .nav-niv1 > li:last-child:after {
        /*content: "";
        width: 100%;
        height: 1px;
        background-color: #1b3e63;
        display: block;
        margin-bottom: -2px;*/
    }
    header nav ul li.active a:after{
        display: none
    }

    .nav-niv2 li .nav-niv3 {
        position: relative;
        left: 0;
        padding-left: 20px;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
        visibility: visible;
    }
    header nav ul.nav-niv2 li:hover > a {
        color: #292929;
    }
    .nav-niv2 li:hover {
        background-color: #fff;
    }
    li.active > a{
        background-color: #1492c6;
        color: #fff
    }
    li.active > a:before{
        background-color: #fff!important
    }
    .get-more-info {
        text-align: center;
        margin: 15px 0;
    }
    .get-more-info .btn:last-child{
        /*margin-top: 10px*/
    }
    .download-file{
        text-align: center;
        width: 100%;
        margin: 10px 0;
    }
    .page .banner h1 {
        font-size: 1.8em;
        margin-bottom: 0;
    }   
    .list-complements li {
	    width: 100%;
	    vertical-align: top;
	    float: left;
	}
	.certification p, .certification h3 {
	    margin: 0;
	    font-size: 90%;
	}
	.certification small {
	    font-size: 65%;
	}
    .logo-quienesomos{
        margin: 20px 0 40px 0
    }
    .f-cert:last-child{
        margin-top: 15px
    }
}
@media only screen and (max-width : 480px) {
    .g-recaptcha{
        text-align: center;
    }
    .g-recaptcha > div{
        display: inline-block;
    }
    .main-title {
        top: 30%;
    }
    #banner {
        padding:0;
    }
    .shadow-main {
        display: none
    }
    .banner h1{
        font-size: 1.5em
    }
    .banner h2 {
        font-size: .9em;
        margin-bottom: 10px;
    }
    .banner h2 br{
        display: none
    }
    .main-title{
        position: relative;
    }
    #videobanner{
        width: auto;
        height: 100%;
    }
    #solutions{
        padding: 30px 0
    }
    .tabs li{
        width: 32.5%;
        padding: 0;
    }
    .tabs li p {
        margin-left: 0;
        text-align: center;
        font-size: .9em;
        margin: 10px 0
    }
    .tabs-content h2{
        text-align: center;
    }
    .solution-description p{
        text-align: justify;
    }
    .tabs-content .service{
        width: 150px;
        padding: 5px;
        margin-right: 5px;
        margin-bottom: 5px
    }
    .tabs-content .service img{
        width: 100%;
        height: auto;
    }
    .tabs-content{
        text-align: center;
    }
    .tab-img{
        display: none
    }
    .more-services{
        margin-top: 10px
    }
    .s-banner-content {
        width: 100%;
        padding: 20px 15px;
        position: relative;
        z-index: 1;
        font-size: 1.2em;
        text-align: center;
    }
    .s-banner:before {
        opacity: .8;
        transform: none;
        width: 100%;
        left: 0;
    }
    .s-banner:after {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 0;
        transform: none;
        background-size: auto;
        opacity: .3;
    }
    .s-banner-content h2 {
        font-size: 1.2em;
        text-align: center;
    }
    .s-banner-content p {
        margin-top: 0;
        text-align: justify;
        line-height: 1.5em;
        font-size: .9em;
    }
    #why-edifactmx{
        padding: 30px 0
    }
    .why-item-content {
        margin-top: 0px;
    }
    .s-banner.right:before {
        right: 0;
    }
    .s-banner.right .s-banner-content {
        margin-left: 0;
        text-align: center;
    }
    .s-banner.right:after {
        left: auto;
        right: 0;
    }
    #certifications {
        padding: 30px 0;
        text-align: center;
    }
    #certifications p{
        text-align: justify;
    }
    #prefooter {
        overflow: hidden;
        padding-top:50px 
    }
    #prefooter h1{
        font-size: 1.2em;
    }
    #prefooter img {
        width: 300%;
        height: auto;
        margin-left: -135%;
    }
    .f-top{
        font-size: .8em
    }
    .footer-bottom .icon{
        margin-bottom: 10px
    }
    .f-middle:before, .f-middle:after{
        width: 25%
    }
    .title{
        font-size: 1.7em
    }
    .certification figure{
        margin: 0
    }

    #banner-image {
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 150%;
        height: auto;
    }
    form .input-content.middle {
        width: 100%;
        margin-right: 2%;
    }
    .list-uens {
        width: 100%;
        text-align: center;
    }
    .intro-text{
       font-size: .6em; 
    }
    .row-table{
        overflow: hidden;
    }
    p {
        line-height: 1.8em;
        font-size: .9em;
        margin: 5px 0;
        text-align: justify;
    }
    h2{
        margin: 5px 0
    }
    .why .why-item-content{
        margin: 10px 0;
    }
    .why .why-item-content figure{
        width: 25%;
        display: inline-block;
        margin: 0;
    }
    .why .why-item-content figure img{
        height: 80px;
    }
    .why .why-item-content p{
        font-size: .8em
    }
    .why .why-item-content:nth-child(odd) figure{
        float: left;
        margin-right: 10px;
    }
    .why .why-item-content:nth-child(odd) h3{
        text-align: right;
    }
    .why .why-item-content:nth-child(odd) p{
        text-align: right;
    }
    .why .why-item-content:nth-child(even) figure{
        float: right;
        margin-left: 10px;
    }
    .why .why-item-content:nth-child(even) h3{
        text-align: left;
    }
    .why .why-item-content:nth-child(even) p{
        text-align: left;
    }
    .content-list {
	    padding-left: 20px;
	    font-size: .9em
	}
	.addendas-list li {
	    width: 100%;
	    margin-right: 0;
	}	
    #calltoaction h2 {
        font-size: 1.5em;
        text-align: center;
    }
    #calltoaction h3 {
        font-size: 1.2em;
        text-align: center;
        margin-bottom: 20px
    }
    #calltoaction .btn{
        display: block;
        width: 100%
    }
    #calltoaction .row{
        border: none
    }
    .all33 ul li {
        width: 49%;
    }

}
@media only screen and (max-width : 376px) {
    .webinar .info-webinar h1 {
        font-size: 1.1em;
    }
    .product-content img{
        margin-bottom: 10px
    }
    .video-ficha {
        margin-top: 10px;
    }
    .shadow-main {
        display: none
    }
    .banner h1{
        font-size: 2em
    }
    .banner h2{
        font-size: 1em;
        margin-bottom: 10px
    }
    .banner h2 br{
        display: none
    }
    .main-title{
        position: relative;
    }
    #videobanner{
        width: auto;
        height: 100%;
    }
    #solutions{
        padding: 30px 0
    }
    .tabs li{
        width: 32.5%;
        padding: 0;
    }
    .tabs li p {
        margin-left: 0;
        text-align: center;
        font-size: .9em;
        margin: 10px 0
    }
    .tabs-content h2{
        text-align: center;
    }
    .solution-description p{
        text-align: justify;
    }
    .tabs-content .service{
        width: 150px;
        padding: 5px;
        margin-right: 5px;
        margin-bottom: 5px
    }
    .tabs-content .service img{
        width: 100%
    }
    .tabs-content{
        text-align: center;
    }
    .tab-img{
        display: none
    }
    .more-services{
        margin-top: 10px
    }
    .s-banner-content {
        width: 100%;
        padding: 20px 15px;
        position: relative;
        z-index: 1;
        font-size: 1.2em;
        text-align: center;
    }
    .s-banner:before {
        opacity: .8;
        transform: none;
        width: 100%;
        left: 0;
    }
    .s-banner:after {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 0;
        transform: none;
        background-size: cover;
        opacity: .3;
    }
    .s-banner-content h2 {
        font-size: 1.2em;
        text-align: center;
    }
    .s-banner-content p {
        margin-top: 0;
        text-align: justify;
        line-height: 1.5em;
        font-size: .9em;
    }
    #why-edifactmx{
        padding: 30px 0
    }
    .why-item-content {
        margin-top: 0px;
    }
    .s-banner.right:before {
        right: 0;
    }
    .s-banner.right .s-banner-content {
        margin-left: 0;
        text-align: center;
    }
    .s-banner.right:after {
        left: auto;
        right: 0;
    }
    #certifications {
        padding: 30px 0;
        text-align: center;
    }
    #certifications p{
        text-align: justify;
    }
    #prefooter {
        overflow: hidden;
        padding-top:50px 
    }
    #prefooter h1{
        font-size: 1.2em;
    }
    #prefooter img {
        width: 300%;
        height: auto;
        margin-left: -135%;
    }
    .f-top{
        font-size: .8em
    }
        .banner h1 {
        font-size: 1.6em;
    }
    .banner h2 {
        font-size: .9em;
        margin-bottom: 10px;
    }
    .subtitle {
        font-size: .85em;
        text-align: center;
    }
    .tabs li p {
        font-size: .7em;
    }
    .title {
        font-size: 1.4em;
    }
    .tabs-content h2 {
        font-size: 1.2em;
    }
    .s-banner.timbrado {
        background-image: none;
    }
    .s-banner.correo-robotizado {
        background-image: none;
    }
    .certification{
        margin-bottom: 10px
    }
    .more-services .btn{
        padding: 10px
    }
    p{
        font-size: .9em;
        line-height: 1.7em;
    }
    .page .banner h1 {
        font-size: 1.5em;
        line-height: 1.2em;
    }
    .intro-solutions {
        padding: 20px 0;
    }
    #banner-image {
        width: 140%;
    }
    .solution {
        margin: 0 0 10px 0;
        text-align: center;
    }
    #calltoaction h2 {
        font-size: 1.5em;
        text-align: center;
    }
    #calltoaction h3 {
        font-size: 1.2em;
        text-align: center;
        margin-bottom: 20px
    }
    .border-bottom {
        border-bottom: none;
        padding: 0;
    }
    .product-content h2 {
        text-align: center;
        font-size: 1.2em;
    }
    .product-content p{
        text-align: justify;
    }
    .video-ficha {
        width: 100%;
        height: 160px;
        margin-bottom: 15px
    }
    .download-file {
        text-decoration: none;
        display: block;
        text-align: center;
    }
    .title {
        font-size: 1.4em;
        line-height: 1em;
        margin-bottom: 0
    }
    form .input-content.middle {
        width: 100%;
        margin-right: 0;
    }
    .list-uens {
        font-size: .9em;
        text-align: center;
        width: 100%;
    }
    .about-content h2 {
        font-size: 1.3em;
        text-align: center;
        margin-top: 20px
    }
    .about-content p{
        text-align: justify;
    }
    #form-contact h2 {
        text-align: center;
        font-size: 1.1em;
    }
    .plans {
        margin-bottom: 20px;
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;
    }
    #form-contact {
        margin: 0;
    }
    .product-content h2 {
        margin-top: 0px;
        font-size: .8em
    }
    .intro-text{
        font-size: .5em
    }
    .guia-content{
        text-align: center;
    }
}
@media only screen and (max-width : 320px) {
    .tabs li {
        width: 32%;
    }
    p {
        line-height: 1.7em;
    }
    .tabs-content .service {
        width: 130px;
    }
    .banner h1 {
        font-size: 1.6em;
    }
    .banner h2 {
        font-size: .9em;
        margin-bottom: 10px;
    }
    #banner {
        padding: 100px 0 25px 0;
    }
    .subtitle {
        font-size: .85em;
        text-align: center;
    }
    .tabs li p {
        font-size: .7em;
    }
    .title {
        font-size: 1.4em;
    }
    .tabs-content h2 {
        font-size: 1.2em;
    }
    .s-banner.timbrado {
        background-image: none;
    }
    .s-banner.correo-robotizado {
        background-image: none;
    }
    .certification{
        margin-bottom: 10px
    }
    .more-services .btn{
        padding: 10px
    }
    p{
        font-size: .9em
    }
    .page .banner h1 {
        font-size: 1em;
        line-height: 1.5em;
    }
    .intro-solutions {
        padding: 20px 0;
    }
    #banner-image {
        width: 140%;
    }
    .solution {
        margin: 0 0 10px 0;
        text-align: center;
    }
    #calltoaction h2 {
        font-size: 1.5em;
        text-align: center;
    }
    #calltoaction h3 {
        font-size: 1.2em;
        text-align: center;
        margin-bottom: 20px
    }
    .border-bottom {
        border-bottom: 1px solid #ddd;
        padding: 30px 0;
    }
    .product-content h2 {
        text-align: center;
        font-size: 1.5em;
    }
    .product-content p{
        text-align: justify;
    }
    .video-ficha {
        width: 100%;
        height: 160px;
        margin-bottom: 15px
    }
    .download-file {
        text-decoration: none;
        display: block;
        text-align: center;
    }
    .title {
        font-size: 1.4em;
        line-height: 1.5em;
    }
    form .input-content.middle {
        width: 100%;
        margin-right: 0;
    }
    .list-uens {
        font-size: .9em;
        text-align: center;
        width: 100%;
    }
    .about-content h2 {
        font-size: 1.3em;
        text-align: center;
    }
    .about-content p{
        text-align: justify;
    }
    #form-contact h2{
        text-align: center;
    }
    .intro-text {
        font-size: .45em;
    }
}







/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}