/*FONDOS
.fondo-tiendas{background-color: #1883ab}
.fondo-tiendas-beneficios{background-color: #eeeeee}
.tiendas-beneficios-iconos{background-color: #fff}
.fondo-tiendas-contacto{background-color: #0277bd}
.fondo-tiendas-preguntas{background-color: #bdbdbd}
*/
*,*:before,*:after{box-sizing: border-box}
body{font-family:"Open Sans",arial,verdana,sans-serif}
h1{line-height:110%;margin:2.1rem 0 1.68rem}h2{line-height:110%;margin:1.78rem 0 1.424rem}h3{line-height:110%;margin:1.46rem 0 1.168rem}
h4{line-height:110%;margin:1.14rem 0 0.912rem}h5{line-height:110%;margin:0.82rem 0 0.656rem}h6{line-height:110%;margin:0.5rem 0 0.4rem}
.h1,h1{font-size:40px}.h2,h2{font-size:34px}.h3,h3{font-size:24px}.h4,h4{font-size:20px}.h5, h5{font-size:18px}.h6,h6{font-size:16px}p,.p{font-size:14px;line-height:1.5em}
.uppercase{text-transform:uppercase}
ul{list-style:none}.ul-check-simple{list-style:outside none none; margin: 0; padding: 0}.ul-check-simple li{padding-left: 1.4em; text-indent: -1.35em}
.ul-check-simple li:before{content: '\f00c'; font-family: FontAwesome; margin-right: 5px}
.btn, .btn-large{cursor: pointer; letter-spacing: 0.5px; text-align: center; text-decoration: none;border: medium none; border-radius: 2px; display: inline-block; height: 36px; line-height: 36px; padding: 0 1.5rem; text-transform: uppercase; vertical-align: middle}
.title{font-weight: 300; text-transform: uppercase}.small{font-size:small} .smaller{font-size:smaller}
#containerGral{margin:0;width:100%}
#contenedorHero{position:relative; height:65vh; min-height: 400px; margin-top:64px; width:100%}
#contenedorHero.tiendas{background-image:url('../img/app/portada-tiendas.jpg'); background-size:cover; background-position:center center}
#contenedorHero.cobranzas{background-image:url('../img/app/portada-cobranzas.jpg'); background-size:cover; background-position:0% 80%}

.cocarda-logo{background-repeat:no-repeat; background-position:center center; background-size:100% auto; display: inline-block; height: 180px; width: 180px; position: absolute; top: 50%; transform: translateY(-50%)}
.cocarda-logo.centrada{left: 50%;transform:translate(-50%,-50%)}.cocarda-logo.izquierda{left:5%}.cocarda-logo.derecha{right:5%}
.cocarda-logo.mercadolibre{background-image:url('../img/app/logos/integraciones/cocarda-ml.png')}
.cocarda-logo.tiendanube{background-image:url('../img/app/logos/integraciones/cocarda-tn.png')}
.cocarda-logo.pedidosya{background-image:url('../img/app/logos/integraciones/cocarda-py.png')}
.cocarda-logo.mercadopago{background-image:url('../img/app/logos/integraciones/cocarda-mp.png')}
.cocarda-logo.todopago{background-image:url('../img/app/logos/integraciones/cocarda-tp.png')}

.nav-wrapper.container{width: 80%} nav.pure ul li a:not(.btn), nav.pure ul a:visited:not(.btn), #main-nav a:visited:not(.btn){color: #333}
#sidenav-overlay{z-index: 100}.drag-target{z-index: 100}.side-nav li{padding:0px}

#sticker{height: 64px; position:fixed; top: 0; background-color:#fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); width: 100%;z-index: 200}
#logo{height: auto;left: 20px; position: absolute;top: 4px; width: auto}#sticker #logo{max-width: 300px}
.contenedor-filtro{position:absolute; right:0px; height: 100%}
div#filtro{height: 100%}#filtro .filtro-item a{margin: 0 10px}.nav-collapse .btn{background-color: #00AFA9; color: #fff; font-size: 18px; font-weight: 400; height: auto; line-height: 36px; margin-top: 0px; }	
.nav-collapse li{width:auto; height: 100%; float:none; display:inline-block}.nav-collapse a{color: #333; line-height: 36px; text-decoration: none; margin-top: 0px}
.nav-collapse.opened{background: #bdbdbd; margin-left: 0; margin-top: 0; padding-left: 0; top: 90px; max-height:400px}.nav-collapse.opened li{width: 100%; margin: 10px 0; height:auto}.nav-collapse.opened li.filtro-item{max-width: 100%}.nav-collapse.opened li a:not(.btn){width: 100%}.nav-collapse .btn{width:auto}.nav-collapse.nav-collapse-0.closed{text-align: right; margin-left: 0; margin-right: 30px; padding-left: 0}
.beneficios h1, .beneficios h2{color: #404141}.pregFrecuentes h1, .pregFrecuentes h2, .pregFrecuentes h3{color: #404141}
.pregFrecuentes h3{font-family: "Open Sans",sans-serif; font-weight: 300; text-align: center; width: 100%}
section.introduccion h1{display: inline-block;font-weight: 300; text-align: center; width: 70%; color:#fff}section.introduccion h3{display: inline-block; font-weight: 300; text-align: center; width: 70%; color:#fff}
section.introduccion .img-intro{margin-top: 20px; height: auto; max-width: 400px; width: 85%}
#ico{width:100px; height:auto; margin-bottom: 40px; display: block; margin-left: auto; margin-right: auto}

.contendor-icono-before{position:relative}
.videos.play:before{content:'\f144';color:#FFF;font-family:FontAwesome;font-style:normal;font-weight:normal;left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;font-size:40px;text-shadow:1px 1px 3px #333}
.videos.play:hover:before{font-family:FontAwesome;font-size:4rem}
.videos.play img{box-shadow:0 8px 12px 0 rgba(0,0,0,0.2),0 6px 16px 0 rgba(0,0,0,0.19);transition:box-shadow .25s ease 0;width:90%}
.thumbs.lupa:before{content:'\f002';color:#FFF;font-family:FontAwesome;font-style:normal;font-weight:normal;left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;font-size:40px;text-shadow:1px 1px 3px #333}
.thumbs.lupa:hover:before{font-family:FontAwesome;font-size:4rem}
.thumbs.lupa img{box-shadow:0 8px 12px 0 rgba(0,0,0,0.2),0 6px 16px 0 rgba(0,0,0,0.19);transition:box-shadow .25s ease 0;width:90%}

.fondo-cobranzas{background-color: #00afa9}.fondo-cobranzas-preguntas{background-color: #bdbdbd}.fondo-cobranzas-contacto{background-color: #006064}.fondo-cobranzas-beneficios{background-color: #eeeeee}.cobranzas-beneficios-iconos{background-color: #fff}
.fondo-tiendas{background-color: #1883ab}.fondo-tiendas-preguntas{background-color: #bdbdbd}.fondo-tiendas-contacto{background-color: #0277bd}.fondo-tiendas-beneficios{background-color: #eeeeee}.tiendas-beneficios-iconos{background-color: #fff}
#preguntasfrecuentes .tiendas.tabs .tab a.active{background-color: #29b6f6}

.container{width: 70%; margin: 0 auto; max-width: 1280px}
section, .seccion, .section{display: block;padding-bottom: 40px;padding-top: 40px;position: relative;width: 100%;text-align:center}
.row{margin-bottom: 20px; margin-left: auto; margin-right: auto}.row:after{clear: both; content: ""; display: table}.row.no-bottom{margin-bottom: 0}.columna-responsive{float:left; width:50%; position:relative}
.columna-responsive .valign{}

#returns{background: transparent none repeat scroll 0 0;border-radius: 35px;bottom: 20px; display: none; height: 130px; position: fixed;right: 20px;text-align: center;text-decoration: none; transition: all 0.3s ease 0s;width: 50px; z-index: 220}
#returns > a{display: inline}
#godown{background: transparent none repeat scroll 0 0;border-radius: 35px;bottom: 20px;display: none;height: 130px;position: fixed;right: 20px;text-align: center;text-decoration: none;transition: all 0.3s ease 0s;width: 50px;z-index: 220}
#godown > a{display: inline}
#return-nexo{background: transparent none repeat scroll 0 0;border-radius: 35px;bottom: 80px;display: none;height: 50px;position: fixed;right: 20px;text-align: center;text-decoration: none;transition: all 0.3s ease 0s;width: 50px;z-index: 100}
#return-nexo i{color: rgba(0, 0, 0, 0.5);font-size: 38px;margin: 0;position: relative;top: 15px;transition: all 0.3s ease 0s}
#return-nexo:hover i{color: #000;top: 5px}
#return-to-top{background: transparent none repeat scroll 0 0;border-radius: 35px;bottom: 20px;display: none;height: 50px;position: fixed;right: 20px;text-align: center;text-decoration: none;transition: all 0.3s ease 0s;width: 50px;z-index: 120}
#return-to-top i{color: rgba(0, 0, 0, 0.5);font-size: 38px;margin: 0;position: relative;top: 13px;transition: all 0.3s ease 0s}
#return-to-top:hover i{color: #000;top: 5px}#return-to-bottom{background: transparent none repeat scroll 0 0; border-radius: 35px;bottom: 20px;display: none;height: 50px;position: fixed; right: 20px;text-align: center; text-decoration: none;transition: all 0.3s ease 0s;width: 50px; z-index: 120}
#return-to-bottom i{color: rgba(0, 0, 0, 0.5);font-size: 38px; margin: 0; position: relative;top: 13px;transition: all 0.3s ease 0s}
#return-to-bottom:hover i{color: #000;top: 5px}

#preguntasfrecuentes .ancla-invisible{cursor:pointer}
#preguntasfrecuentes .container{ width: 80%}
#preguntasfrecuentes .tabs .tab a{background-color: #ebebeb; color: #333}
#preguntasfrecuentes .tabs .tab a.active{color: #fff}
/*cada tabs activo puede tener su color por producto, ver más arriba*/
#preguntasfrecuentes .tabs .indicator{background-color:#333; top: 0; max-width: 315px; width:100%}
.pr .card{margin-top:0px}
#preguntasfrecuentes .collapsible{text-align:left; box-shadow:none}
#preguntasfrecuentes .collapsible-header.active{background-color: #ebebeb}
#preguntasfrecuentes .collapsible-body{padding: 1rem}
.respuesta{font-size: 15px}
.beneficios{color: #666;display: block;padding: 50px 0}
.beneficios .title{font-size: 40px; padding-left: 0; display: block;font-weight: 300; margin-left: auto;margin-right: auto; margin-top: 0;text-align: center;width: 70%}
.submenu{height: auto; margin-top: 20px}.submenu.col{margin-left: 0; width: 33.3333%; float:left; padding:10px}
.submenu.col{text-align:center; }
.submenu span.icono{border-radius: 50%; display: block; height: 90px; margin: auto; text-align: center; text-transform: uppercase; width: 90px; background-color:#009688; color:#fff}
.tiendas-beneficios-iconos .submenu span.icono{background-color:#039be5}
.submenu span.icono i{line-height: 90px; margin-top:0px}

.logos-integraciones img{width:70%; height:auto;max-width:381px}
.logos-integraciones .todopago img{max-width:185px}

section.pasos{background-color:#4db6ac; color:#fff}
section.pasos h1{}section.pasos h1, section.pasos h2{color: #fff; text-align:center; font-weight: 300} 
.submenu.pasos span.icono{border-radius: 50%; display: block; height: 90px; margin: auto; text-align: center; text-transform: uppercase; width: 90px; color:#4db6ac; background-color:#fff; box-shadow: 0 8px 4px -4px #ddd inset; line-height: 90px; font-size:30px; margin-top:0px}
.col.pasos{padding: 0 10px}

.pregunta:hover .cont-icoPreg:before{content: '\f075'}
#imgpanel{height: auto; max-width: 500px; width: 100%}

.contacto{color:#fff}
.contacto table{color: #fff;font-family: "Open Sans",arial,verdana,sans-serif; font-size: 20px; font-weight: 300}
.contacto td, th{padding: 5px; }
.contacto input, .contacto textarea{border: medium hidden; color: #333; background: #fff; display: block; font-family: "Open Sans",arial,verdana,sans-serif; font-size: 20px; font-weight: 300; height: 30px; margin-top: 10px; width: 100%; }

@media only screen and (min-width: 1920px){
.cocarda-logo{height: 238px; width: 238px}
}
@media only screen and (max-width: 1280px){
.cocarda-logo{width:200px; height:200px}
.columna-responsive{width:100%}
.container{width: 90%}
#imgpanel{display: inherit}
.columna-responsive .valign{}
.tabs{display:inline-table}
#preguntasfrecuentes .tabs .indicator{display:none}
}

@media only screen and (max-width: 800px){
.cocarda-logo{height: 150px; width: 150px}
}

@media only screen and (max-width: 720px){
#logo{ height: auto;  left: 0; position: absolute; top: 8px; width: auto}
#sticker #logo{max-width: 250px}
.contenedor-filtro{width: 100%}
.filtro-item{display: inline-block; float:right}
.filtro-botones .btn{line-height:22px}
.nav-collapse li{height: auto}
.nav-collapse li a{margin: 0}
.js .nav-collapse.nav-collapse-0.closed{top: 90px; opacity:0}
section.introduccion h1{width:100%}	
.submenu.col{margin-left: 0; width: 100%}
.columna-responsive{width: 100%}
.container{width: 90%}
.valign-wrapper{display:block}
section.introduccion h1, .section.pregFrecuentes h1{font-size: 30px}
section.pregFrecuentes h3{font-size: 18px}
#preguntasfrecuentes .ancla-invisible{margin: 0; width: calc(100% - 20px)}
}
@media only screen and (max-width: 370px){
.cocarda-logo{height: 80px; width: 80px}
}