/*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}
.ul-arrow ul{list-style:none;padding:0;margin:0}.ul-arrow li{padding-left:1.5em;text-indent:-.7em}.ul-arrow li:before{content:'\f105';font-family:FontAwesome;margin-right:5px}
#ancla-top{display: none;}
.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-color: #000000; background-image:url('../img/app/portada-tiendas.jpg'); background-size:cover; background-position:center center; padding-top:10px; padding-bottom:10px}
#contenedorHero.cobranzas{background-image:url('../img/app/portada-cobranzas.jpg'); background-size:cover; background-position:0% 80%}
#contenedorHero.tangonet{background-image:url('../img/app/portada-tangonet.jpg'); background-size:cover; background-position:0% 50%}
.titulo-portada{background-color: rgba(0,46,73,0.80);margin-top: 50px;margin-bottom: 0px!important;}
.titulo-portada h1{font-size: 3em; color: white;font-family: 'Roboto', sans-serif; font-weight: 100;}
.texto-portada-tangonet{color:#FFF;vertical-align: middle;margin-top: 10vh;}
.texto-portada-tangonet h1{text-shadow: 1px 1px 6px #000;font-weight: 300;}
.img-portada-tangonet img{vertical-align: middle;margin-top: 15vh;width: 15vw;}
mark{background-color: rgba(15, 96, 147, 0.7);; padding: 5px; margin-bottom:10px; line-height: 80px; color:#fff;}
.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')}

.col-tn{margin-top: 15vh;}
.tiendanube.tn{background-image:url('../img/app/logos/integraciones/logo-tiendanube.png');background-color: white;width: 100%;height: 140px;background-size: 80% auto;
background-position: center 75%; background-repeat: no-repeat;margin: 0 auto}
.tiendanube.tn span{font-weight: 300;color: #666;margin: 0px 0px 10px 0px;font-size: 24px;display: inline-block;}
.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: 90%} 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: 6px; 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}
.fancybox-nav{height: 85%;width: 33%}

.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%}

.fondoCobranzas{background:#00a193;}
.fondoCobranzas2{background:#00a193;}
.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-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: #1996d2}.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}
.fondo-tangonet{background-color: #00c1de!important}
.fondo-tangonet2{background-color: #00abc9}
.fondo-tangonet-preguntas{background-color: #bdbdbd}.fondo-tangonet-contacto{background-color: #1e708e}.fondo-tangonet-beneficios{background-color: #eeeeee}.tangonet-beneficios-iconos{background-color: #fff}

.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}
#bold-font{fond-weight:700;}
#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: 25%; width:25%; display: none;}
.pr .card{margin-top:0px}
#preguntasfrecuentes .collapsible{text-align:left; box-shadow:none}
.collapsible-header {position: relative}.collapsible-header:after {content: '\f078'; font-family: FontAwesome;position: absolute;right: 20px; bottom: 0; color: #757575}
.collapsible-header.active:after {content: '\f077'; font-family: FontAwesome;position: absolute; right: 20px; bottom: 0; color: #757575}
#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;height: 180px;}/*.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}
.tangonet-beneficios-iconos .submenu span.icono{background-color:#00c1de}
.submenu span.icono i{line-height: 90px;margin-top:0px}

.logos-integraciones img{width:70%;height:auto;max-width:381px}
.logos-integraciones-tiendas img{width:70%;height:auto;max-width:200px;}
.logos-integraciones .todopago img{max-width:185px}
.logos-integraciones div {margin-bottom:25px;}
.ficha-integracion{text-align: center; vertical-align: middle!important; border-radius: 4px; height: 30vh;}
.ficha-api{text-align: center; vertical-align: middle!important; border-radius: 4px; height: auto;}
.logo-portales{margin-top:20px!important; max-width:300px;}
.card .card-image img {display:inline-flex;}
.card-content div{display: block; text-align: center;}
.disponible-en{ display: block; text-align: center; color:#434343; padding-bottom: 10px; border-bottom: solid 1px #A6A6A6; margin: 30px;}
.card-content ul li:hover{color:#0288D1;}
.ficha-integracion a div p{font-weight: 600;}
#texto-api{color:#fff; margin-bottom: 20px;}
#texto-api:hover{color:#fff;}

#btn-api a{text-decoration: none; color:#fff; font-weight: 400;}
/*RIBBON*/

.ribbon-resto {
  width: 150px;height: 40px;line-height: 40px;padding-left: 15px; font-size: 13px;
  position: absolute;left: -8px; top: 160px; background: #E5405D;color:#FFF;
}
.ribbon-resto:before, .ribbon-resto:after {
  content: "";
  position: absolute;
}
.ribbon-resto:before {
  height: 0; width: 0;top: -9px;left: 0.1px;border-bottom: 9px solid black;
  border-left: 9px solid transparent;
}
.ribbon-resto:after {
  height: 0;width: 0;right: -15px;border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;border-left: 15px solid #E5405D;
}

.ribbon-gestion {
  width: 150px;height: 40px;line-height: 40px;padding-left: 15px;position: absolute;
  left: -8px;top: 140px;background-color: #039BE5;color:#FFF;font-size: 13px;
}
.ribbon-gestion:before, .ribbon-gestion:after {
  content: "";position: absolute;
}
.ribbon-gestion:before {
  height: 0;width: 0;top: -9px;left: 0.1px;border-bottom: 9px solid black;
  border-left: 9px solid transparent;
}
.ribbon-gestion:after {
  height: 0; width: 0; right: -15px; border-top: 20px solid transparent;
  border-bottom: 20px solid transparent; border-left: 15px solid #039BE5;
}

.ribbon-pdv {
  width: 150px; height: 40px;line-height: 40px;padding-left: 15px;position: absolute;
  left: -8px;top: 200px;background-color: #4CAF50;color:#FFF; font-size: 13px;
}
.ribbon-pdv:before, .ribbon-pdv:after {
  content: "";
  position: absolute;
}
.ribbon-pdv:before {
  height: 0;width: 0; top: -9px;left: 0.1px; border-bottom: 9px solid black;
  border-left: 9px solid transparent;
}
.ribbon-pdv:after {
  height: 0;width: 0;right: -15px; border-top: 20px solid transparent;
  border-bottom: 20px solid transparent; border-left: 15px solid #4CAF50;
}

/*RIBBONS API*/
.ribbon-gestion-api {
  width: 150px;height: 40px;line-height: 40px;padding-left: 15px;position: absolute;
  left: -8px;top: 230px;background-color: #039BE5;color:#FFF;font-size: 13px;
}
.ribbon-gestion-api:before, .ribbon-gestion-api:after {
  content: "";position: absolute;
}
.ribbon-gestion-api:before {
  height: 0;width: 0;top: -9px;left: 0.1px;border-bottom: 9px solid black;
  border-left: 9px solid transparent;
}
.ribbon-gestion-api:after {
  height: 0; width: 0; right: -15px; border-top: 20px solid transparent;
  border-bottom: 20px solid transparent; border-left: 15px solid #039BE5;
}

.ribbon-pdv-api {
  width: 150px; height: 40px;line-height: 40px;padding-left: 15px;position: absolute;
  left: -8px;top: 290px;background-color: #4CAF50;color:#FFF; font-size: 13px;
}
.ribbon-pdv-api:before, .ribbon-pdv-api:after {
  content: "";
  position: absolute;
}
.ribbon-pdv-api:before {
  height: 0;width: 0; top: -9px;left: 0.1px; border-bottom: 9px solid black;
  border-left: 9px solid transparent;
}
.ribbon-pdv-api:after {
  height: 0;width: 0;right: -15px; border-top: 20px solid transparent;
  border-bottom: 20px solid transparent; border-left: 15px solid #4CAF50;
}
/******************************************************************************************/
section.pasos{background-color:#4db6ac;}
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; background-color: #888}
.contacto table{color: #fff;font-family: "Open Sans",arial,verdana,sans-serif;font-size: 20px;font-weight: 300; width: 100%;}
.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%;}

.contenedor-form-slider{background-color:#fff;display: inline-block;padding:20px;max-width: 500px;}
::placeholder{color:#000}
.contenedor-form-slider textarea {border:0px; border-bottom: 1px solid #999;margin-bottom:10px;}
.titulo-tn {color:#000; font-size:1.5rem;}
.texto-requerido{font-size:0.9rem; margin: 5px; color: #777;}
#formulario-slider label.error {color:#ef5350}

@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: 1000px)and (min-width:801px){
.cocarda-logo{height: 150px;width: 150px}

.titulo-portada h1 br{display: none;}
#texto-api br{display:none;}

.ribbon-gestion-api {top: 210px}
.ribbon-pdv-api {top: 270px}
}
@media only screen and (max-width: 800px) and (min-width:721px){
.cocarda-logo{height: 150px;width: 150px}
.ficha-api{text-align: center; vertical-align: middle!important; border-radius: 4px; height: auto;}
.titulo-portada h1 br{display: none;}
#texto-api br{display:none;}
.img-portada-tangonet img{margin-top: 8vh;width: 30vw;}
.texto-portada-tangonet h1{margin-top: 10vh;}
.ribbon-gestion-api {top: 210px}
.ribbon-pdv-api {top: 270px}
mark br{display: none;}
}

@media only screen and (max-width: 720px)and (min-width:370px){
#logo{height: auto; left: 0;position: absolute;top: 8px;width: auto}
#sticker #logo{max-width: 250px}
.contenedor-filtro{width: 100%}
#contenedorHero.tiendas{height: 90vh;}
.col-tn{margin-top: 0vh;}
.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)}
.contenedor-form-slider {background-color: rgba(255,255,255,0.95); display: inline-block; padding: 15px; box-sizing: border-box; width: 100%;margin-top: 15px;}
.cocarda-logo.tiendanube.tn{left: 7%;top: 12%;height:120px}
#formulario-slider input {margin: 0 0 10px 0}
.tiendanube.tn{max-width: 300px;margin-top: 0vh}
.ficha-integracion{text-align: center; vertical-align: middle!important; border-radius: 4px; height: 50vh;}
.ficha-api{text-align: center; vertical-align: middle!important; border-radius: 4px; height: auto;}
#texto-api br{display:none; margin-bottom: 30%;}
.logos-integraciones-tiendas img{width:70%;height:auto;max-width:200px;text-align: center}
.titulo-portada{margin-top: 40vh;}
.titulo-portada h1 br{display: none;}
.texto-portada-tangonet{color:#FFF;vertical-align: middle;margin-top: 5vh;}
.texto-portada-tangonet h1{text-shadow: 1px 1px 6px #000;font-weight: 300;}
.img-portada-tangonet img{margin-top: 5vh;width: 30vw;}
mark br{display: none;}
}
@media only screen and (max-width: 370px){
.titulo-funcionalidades{font-size:35px;}
.cocarda-logo{height: 80px;width: 80px;}
#logo{max-width: 75vw!important;left:0;}
.logos-integraciones-tiendas img{width:70%;height:auto;max-width:200px;text-align: center;}
mark br{display: none;}
.tiendanube.tn{margin-top: 0vh}
.ficha-integracion{text-align: center; vertical-align: middle!important; border-radius: 4px; height: 250px;}
.texto-portada-tangonet{color:#FFF;vertical-align: middle;margin-top:1vh;}
.texto-portada-tangonet h1{text-shadow: 1px 1px 6px #000;font-weight: 300;}
.img-portada-tangonet img{vertical-align: middle;margin-top: 1vh;width: 35vw;}
.tangonet{height: 80vh!important;}
input{width:100%;}
form table tr td{max-width: 220px;}
}