@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap);
body,html{font-family:Roboto,sans-serif!important;font-weight:400;overflow:hidden}
body header{width:100%;height:auto!important;background:0 0!important;transition:all ease-in-out .5s}
.infoHeader{float:left;display:table;width:calc(100% - 40px);max-width:1600px;padding:10px 20px;margin-left:50%;transform:translateX(-50%)}
.infoHeader div{display:table-cell;vertical-align:middle}
.infoHeader div:last-of-type{text-align:right}
.banner{float:left;width:100%;background:url(/Images/ServicioAlCliente/bg.jpg) no-repeat 50% 50%;background-size:cover}
.banner .infoContent{float:left;width:calc(100% - 40px);max-width:1600px;padding:80px 20px 30px 20px;margin-left:50%;transform:translateX(-50%)}
.banner h1{float:left;width:100%;text-align:center;font-size:35px;font-weight:400;color:#0c131f}
.banner h1 b{color:#4040d2;font-weight:700}
.banner p{float:left;width:100%;text-align:center;font-size:26px;color:#0c131f}
.banner p span{color:#4242d4;font-weight:bold}
section{float:left;width:100%}
section .infoContent{float:left;width:calc(100% - 40px);max-width:1600px;padding:20px;margin-left:50%;transform:translateX(-50%)}
.contIframe,.container,.containerCard,.descripcion,.descripcion ul{float:left;width:100%}
.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:30px;grid-row-gap:30px}
.card{float:left;width:calc(100% - 40px);padding:20px;border-radius:8px}
.card:hover{filter:brightness(95%);transition:ease-in-out all 0.5s;cursor:pointer}
.card:nth-of-type(odd){background:#4242d4;background:linear-gradient(to bottom,#4242d4 0,#6565dc 100%)}
.card:nth-of-type(2n+2){background:#efeffc;background:linear-gradient(to bottom,#efeffc 0,#f9f9f9 100%);border:1px solid #e6e6fb}
.Icon{float:left;width:100%;display:table}
.Icon span{display:table-cell;vertical-align:middle;width:48px;padding-right:10px}
.Icon h2{display:table-cell;vertical-align:middle;width:calc(100% - 58px);font-size:24px;font-weight:400;line-height:22px;text-transform:uppercase;letter-spacing:-1px}
.Icon h2.title{text-transform:none;font-size:22px}
.icoVideo{vertical-align:top !important}
.card:nth-of-type(odd) .icoVideo img{filter:brightness(0) saturate(100%) invert(74%) sepia(62%) saturate(1096%) hue-rotate(160deg) brightness(105%) contrast(109%)}   
.card:nth-of-type(odd) .Icon h2{color:#fff}
.card:nth-of-type(2n+2) .Icon h2{color:#4141d3}
.descripcion{margin-top:15px}
.descripcion li{float:left;width:calc(100% - 16px);padding-left:16px;font-size:18px;line-height:16px;margin-bottom:8px}
.descripcion li:last-of-type{margin-bottom:0}
.card:nth-of-type(odd) .descripcion li{background:url(/Images/ServicioAlCliente/bullet.png) no-repeat 0 4px;color:#fff}
.card:nth-of-type(2n+2) .descripcion li{background:url(/Images/ServicioAlCliente/bullet2.png) no-repeat 0 4px;color:#4141d3}
.descripcion a{float:left;margin:10px 0 0 50px;padding:4px 10px;background:#FFF;border-radius:3px;text-decoration:none;font-size:16px}
.card:nth-of-type(odd) .descripcion a{background:#FFF;color:#4141d3}
.card:nth-of-type(2n+2) .descripcion a{background:#4242d4;color:#FFF;padding:5px 10px}
button.back{margin-top:20px;border-radius:4px;font-size:20px;padding:0 20px}
body footer{height:auto!important;width:100%!important;max-width:inherit!important;position:absolute!important;bottom:0!important;background:#4a5080!important;font-size:24px!important;padding-top:0!important}
.infoFooter{float:left;width:calc(100% - 40px);max-width:1600px;margin-left:50%;transform:translateX(-50%);padding:5px 20px}
footer p{text-align:center;font-size:14px}
footer a{color:#49ecfe;text-decoration:none;font-size:14px;display:inherit}
footer a:hover{color:#fff;transition:all ease-in-out .5s}
.flotante{display:none}
#bannerLeft{width:173px;height:120px;position:fixed;bottom:120px;left:0;z-index:999}
#bannerLeft a{float:left;width:100%;height:100%}
#bannerLeft a img{position:relative;max-width:100%}
#bannerLeft .cerrar{position:absolute;top:-8px;left:143px;width:auto;height:auto;border:1px solid #bbb;border-radius:5px 5px 5px 5px;color:#c81f49;font-weight:700;background:#FFF;padding:0 3px;text-decoration:none;font-size:16px;transition:.3s;z-index:+9999}
#bannerLeft .cerrar:hover{color:#09F;text-decoration:none}
.oculto{transition:1s;opacity:0;visibility:hidden}
@media(max-width:1580px){
.infoHeader div img{max-height:45px}
.banner .infoContent{padding:60px 20px 20px 20px}
.banner h1{font-size:30px}
.card{width:calc(100% - 30px);padding:15px;border-radius:4px}}
@media(max-width:1480px){
.grid{grid-column-gap:20px;grid-row-gap:20px}
.descripcion{margin-top:10px}
.descripcion li{width:calc(100% - 12px);padding-left:12px;font-size:16px;line-height:16px;margin-bottom:5px;background-size:6px!important}}
@media(max-width:1400px){
.infoHeader div img{max-height:40px}
.banner .infoContent{padding:50px 20px 20px 20px}
.grid{grid-column-gap:15px;grid-row-gap:15px}
.card{width:calc(100% - 20px);padding:10px}
.Icon span{width:40px}}
@media(max-width:1366px){
.banner h1{font-size:32px}
.banner p{font-size:18px}}
@media(max-width:1280px){
.infoHeader div img{max-height:35px}
.banner .infoContent{padding:50px 20px 15px 20px}}
@media(max-width:1080px){
.banner h1{font-size:25px}
.banner p{font-size:22px}
.Icon span{width:36px}
.Icon h2{font-size:22px;line-height:20px}
.descripcion{margin-top:5px}
.descripcion li{font-size:15px;line-height:15px}
.descripcion a{margin:10px 0 0 46px;font-size:15px;line-height:15px}
button.back{font-size:18px}}
@media (max-width:1000px){
.infoHeader div img{max-height:32px}
.banner .infoContent{padding:45px 20px 15px 20px}
.banner h1{font-size:22px}
.banner p{font-size:18px}
.Icon span{width:32px}
.Icon h2{font-size:20px;line-height:20px}
.descripcion li{font-size:14px;line-height:13px}
.Icon h2.title{font-size:20px}
.descripcion a{margin:0 0 0 42px;font-size:14px;line-height:13px}}
@media (max-width:860px){
.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px) and (min-width:621px){
.grid{grid-template-columns:repeat(2,1fr)}
.card:first-of-type,.card:nth-of-type(4),.card:nth-of-type(5){background:#4242d4;background:linear-gradient(to bottom,#4242d4 0,#6565dc 100%)}
.card:nth-of-type(2),.card:nth-of-type(3),.card:nth-of-type(6){background:#efeffc;background:linear-gradient(to bottom,#efeffc 0,#f9f9f9 100%);border:1px solid #e6e6fb}
.card:nth-of-type(4) span img,.card:nth-of-type(5) span img{filter:brightness(0) saturate(100%) invert(74%) sepia(62%) saturate(1096%) hue-rotate(160deg) brightness(105%) contrast(109%)}
.card:nth-of-type(3) span img{filter:brightness(0) saturate(100%) invert(52%) sepia(7%) saturate(2774%) hue-rotate(205deg) brightness(89%) contrast(92%)}
.card:first-of-type .Icon h2,.card:nth-of-type(4) .Icon h2,.card:nth-of-type(5) .Icon h2{color:#fff}
.card:nth-of-type(2) .Icon h2,.card:nth-of-type(3) .Icon h2,.card:nth-of-type(6) .Icon h2{color:#4141d3}
.card:first-of-type .descripcion li,.card:nth-of-type(4) .descripcion li,.card:nth-of-type(5) .descripcion li{background:url(/Images/ServicioAlCliente/bullet.png) no-repeat 0 6px;color:#fff}
.card:nth-of-type(2) .descripcion li,.card:nth-of-type(3) .descripcion li,.card:nth-of-type(6) .descripcion li{background:url(/Images/ServicioAlCliente/bullet2.png) no-repeat 0 6px;color:#4141d3}
.card:nth-of-type(3) .icoVideo img{filter:none}
.card:nth-of-type(3) .descripcion a{background:#4141d3;color:#FFF}
.card:nth-of-type(4) .descripcion a{background:#FFF;color:#4141d3}
.card:nth-of-type(3) .descripcion a,.card:nth-of-type(6) .descripcion a{padding:5px 10px}}
@media (max-width:620px){
html,html body{overflow:auto!important}
body header{position:relative!important}
.infoHeader,section .infoContent{width:calc(100% - 16px);padding:8px}
.infoHeader div img{max-height:28px}
.banner{margin-top:-55px}
.banner .infoContent{padding:45px 20px 5px 20px}
.banner p{font-size:16px;margin-top:-3px}
.grid{grid-template-columns:repeat(1,1fr);grid-column-gap:0;grid-row-gap:5px}
.banner h1{font-size:20px}
.Icon span{width:20px}
.card{padding:5px 10px}
.Icon h2{font-size:19px}
.descripcion{margin-top:2px}
.descripcion li{margin-bottom:2px;background-size:5px!important;font-size:13px;line-height:12px}
body footer{position:relative!important}
.infoFooter{padding:2px 20px}
footer a,footer p{font-size:13px}
footer p{margin-top:-3px}
.descripcion a{margin:0 0 0 30px}
.flotante{
display:block;
position:fixed;
bottom:5px;
right:5px;
width:40px;
height:40px;
z-index:+999;
}
.flotante a {
float:left;
position:relative;
font-size:40px;
width:40px;
min-width:40px;
height:40px;
text-align:center;
line-height:40px;
background:#00dcff;
border-radius:50%;
padding:0;
color:#FFF;
z-index:+999;
box-shadow:0px 0px 12px 0px rgba(0,0,0,0.4)
}
.flotante a span {
position:absolute;
top:6px;
left:10px;
width:16px;
height:16px;
border-left:3px solid #fff;
border-bottom:3px solid #fff;
transform: rotate(-45deg);
}
}