@font-face {
    font-family: 'Lato';
    src:url('../font/Lato-Light.ttf') format('truetype');
    font-weight: 300;
  }

  @font-face {
    font-family: 'Lato';
    src:url('../font/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
  }

  @font-face {
    font-family: 'Lato';
    src:url('../font/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
  }

  @font-face {
    font-family: 'Lato';
    src:url('../font/Lato-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
  }

  @font-face {
    font-family: 'Lato';
    src:url('../font/Lato-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
  }








@font-face {
    font-family: 'fontello';
    src:url('../font/fontello.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  [class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: never;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;

    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  }


  .icon-ico-excel:before { content: '\e800'; } /* '' */
  .icon-ico-generar-soportes:before { content: '\e801'; } /* '' */
  .icon-ico-importar:before { content: '\e802'; } /* '' */
  .icon-ico-planilla:before { content: '\e803'; } /* '' */
  .icon-ico-pse:before { content: '\e804'; } /* '' */
  .icon-facebook-squared:before { content: '\e805'; } /* '' */
  .icon-twitter-squared:before { content: '\e806'; } /* '' */
  .icon-youtube-play:before { content: '\e807'; } /* '' */
  .icon-certificate-solid:before { content: '\e84a'; } /* '' */
  .icon-circle-check-solid:before { content: '\e84b'; } /* '' */
  .icon-cloud-solid:before { content: '\e84c'; } /* '' */
  .icon-credit-card-solid:before { content: '\e84d'; } /* '' */
  .icon-file-arrow-up-solid:before { content: '\e84e'; } /* '' */
  .icon-file-invoice-dollar-solid:before { content: '\e84f'; } /* '' */
  .icon-file-lines-solid:before { content: '\e850'; } /* '' */
  .icon-layer-group-solid:before { content: '\e851'; } /* '' */
  .icon-left-right-solid:before { content: '\e852'; } /* '' */
  .icon-medal-solid:before { content: '\e853'; } /* '' */
  .icon-people-arrows-solid:before { content: '\e854'; } /* '' */
  .icon-table-solid:before { content: '\e855'; } /* '' */
  .icon-wallet-solid:before { content: '\e856'; } /* '' */





  body { font-family:'Lato', 'Courier New', Courier, monospace; }
  h2 { font-weight: 700; letter-spacing: -.03em;}
  h3 { color:#72207E; font-weight: 700; letter-spacing:-.03em; line-height:1.1em;}
  h4 { font-weight: 700; letter-spacing:-.03em;}
  a { color:#ff6600; text-decoration:none; }
  a:hover { color:#dd5313; text-decoration:underline; }

.bg-info { background: rgb(255,255,255);
              background: linear-gradient(121deg, rgba(255,255,255,1) 20%, rgba(195,235,238,.5) 40%, rgba(0,172,185,1) 100%); }

.bg-hero { background: url(../img/bg-hero.png); background-position: right top; background-repeat:no-repeat; background-size: cover; transition: all 2s; position: relative; height: 580px;}

.hero-highlight {
  text-align: center; background-color: #FF8C40; border-radius:20px; padding: 1.65em; position:absolute; font-size: 1.7em; font-weight: 700; font-style: italic; line-height:1em; color: #fff; left:50%; transform: translateX(-50%); top:500px; z-index: 200;
}

.quote-highlight {
  text-align: center;border-radius:20px; padding: 1.65em;  font-size: 1.7em; font-weight: 700; font-style: italic; line-height:1em; color: #fff;}

.quote-highlight .display-3 {font-size:2.4rem; font-weight: bold;}

.bg-purple { background-color:#72207E; }
.bg-blue { background-color:#285496; }



.hero-highlight p { margin-bottom:0;}

.bg-mask {  background: linear-gradient(90deg, rgba(255,255,255,1) 30%, rgba(255,255,255,.5) 50%, rgba(0,172,185,0) 80%); height: 580px;  }
@media (max-width: 780px) {
  .bg-hero { background: url(../img/bg-hero.png); background-position: center top; background-repeat:no-repeat; background-size: cover;}

  .bg-mask {  background: linear-gradient(90deg, rgba(255,255,255,1) 40%, rgba(255,255,255,.7) 70%, rgba(0,172,185,.7) 100%);  }

}


.headline div  {width: 80%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.headline img { width: 80%;  }
.headline blockquote { padding: 0; font-size: 1.7em; font-weight: 700; font-style: italic; line-height:1em; text-align: center!important; }
.headline div p { font-weight: 700; color:#72207E;  }

blockquote { padding: 2em;}
blockquote p { font-size: 1.5em; font-weight: 700; font-style: italic; line-height:1.3em; text-align: center!important; }


.bg-danger {
  background-color: #f9f9f9!important;
}
#whodoes .card { border-color:transparent!important; border-radius: 15px; box-shadow: 0px 4px 9px 0px rgba(0,0,0,0.1); padding: 1.5em; min-height:100%; height: auto; align-items: center; }
#whodoes .card img { max-width:195px; max-height: 195px; }
#whodoes .card p { line-height: 1.3em;}
#whodoes .card h5 { color:#72207E; font-weight: 700;}
#whodoes .row {  width: 85%;  margin: 0 auto;}
#whodoes .card-title i { font-size:1.7em; }
#whodoes .card-footer { border-top: none; background-color: transparent; font-style: italic; font-weight: 400; font-size:.85em; color: #888;}

.shadow-1 { box-shadow: 0px 4px 9px 0px rgba(0,0,0,0.1);}

@media (max-width: 1200px) {
  #whodoes .row {  width: 100%;  }


}

@media (max-width: 992px) {
  #whodoes .row {  width: 100%;  }
  #whodoes .card { display: flex; flex-direction: column!important; align-items: center;}
  #whodoes .card p, #whodoes .card h5 { text-align: center; }

}

#doitall .card { border-color:transparent; border-radius: 15px; color:#fff; min-height:100%; height: auto; align-items: center;}
#doitall .card-title { line-height:1.15em;}
#doitall .card-title i { background-color: #fff; padding: .3em; display:flex; align-items: center; border-radius: 50%; margin-right: 1em;  }
#doitall .card-title i::before { font-size:1.9em; margin: 0; }
#doitall .card-title { display:flex; align-items:center; }
#doitall .row div:first-child .card{ background-color:#00ACB9;}
#doitall .row div:first-child .card .card-title i {background-color: transparent; }
#doitall .row div:nth-child(2) .card{ background-color:#ff6600;}
#doitall .row div:nth-child(3) .card{ background-color:#72207E;}
#doitall .row div:nth-child(5) .card{ background-color:#B65EC0;}
#doitall .row div:nth-child(6) .card{ background-color:#FF8C40;}

#doitall .row div:nth-child(2) .card .card-title i::before { color:#ff6600; }
#doitall .row div:nth-child(3) .card .card-title i::before { color:#72207E; }
#doitall .row div:nth-child(5) .card .card-title i::before { color:#B65EC0; }
#doitall .row div:nth-child(6) .card .card-title i::before { color:#FF8C40; }

#doitall .container-fluid {
  background-image: url(../img/bg-circle.png);
  background-position: left 300px;
  background-repeat: no-repeat;
  padding-bottom:3em;

}


#doitall .card-title { font-weight:bold; font-size:1.2em; letter-spacing: -.02em;}

.nav#planillaTab {justify-content: center;}
.nav-tabs#planillaTab {border-bottom: none;

}

.nav-tabs#planillaTab .nav-link {margin-bottom: 0; border: none; border-top-left-radius:0; border-top-right-radius:0; padding:.75em 2.5em; font-weight: bold;}
.nav-tabs#planillaTab li .nav-link {background-color: #EFEFEF; color:#969696;}
.nav-tabs#planillaTab li .nav-link.active { background: linear-gradient(180deg, rgba(249,94,3,1) 0%, rgba(233,69,10,1) 100%); color: #fff;}
.nav-tabs#planillaTab li:first-child .nav-link { border-top-left-radius:25px;border-bottom-left-radius:25px;}
.nav-tabs#planillaTab li:nth-child(2) .nav-link { border-left: 1px solid #ccc;border-right: 1px solid #ccc;  }
.nav-tabs#planillaTab li:last-child .nav-link { border-top-right-radius:25px;border-bottom-right-radius:25px;}



@media (max-width: 992px) {
  #doitall .card-title { font-size:1.11em;}

  #doitall .container-fluid {
    background-position: left 400px;
  }

  .nav-tabs#planillaTab .nav-link {padding:.6em 1em;}
}

@media (max-width: 580px) {
  #doitall .card-title { font-size:1.05em;}
  #doitall .container-fluid {
    background-position: left 500px;
  }

}



.btn { border-radius:1.7em; font-size:1em; padding: .5em 3em; font-weight: 700; line-height:1em; }
.btn-primary {background-color: #ff6500; border-color: #ff6500; color: white!important;  }
a:hover.btn-primary, button:hover.btn-primary {background-color:#c64c09; border-color:#c64c09; text-decoration: none;  }
.btn-outline-primary { color: #ff6500 !important; border-color: #ff6500; background-color: white;}
a:hover.btn-outline-primary, button:hover.btn-outline-primary { color: white !important; background-color: #ff6500 !important; border-color: #ff6500;  }

.bg-dark {background-color:#333333!important;}
.bg-secondary {background-color:#ff6500!important;}
.bg-light { background-color:#fff!important; }



.btn-primary.disabled, .btn-primary:disabled { background-color:#E2E2E2 ; border-color:#E2E2E2 ; color:#4D4D4D!important; }
.btn-secondary { background-color: #c64c0a; border-color:#c64c0a ; }
.btn-secondary:hover { background-color: #ff6500; border-color:white ; color:white!important;  }

.btn-info { color:#ff6500; background-color: white; border-color:#DDDDDD; padding:.5em 1.5em;  }
.btn-info:hover, .btn-info:active  { color:#ff6500!important; background-color: white!important; border-color:#ff6500!important;  }


.simpleBanner .bannerListWpr ul li { width:110px !important;  }
.simpleBanner  { margin:0 auto;  }

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show›.btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(255,102,0,.5); }

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show›.btn-primary.dropdown-toggle
{ background-color :#ff6600; border-color:#ff6600; }


.btn-primary.focus, .btn-primary:focus { box-shadow:0 0 0 0.2rem rgba(255,102,0,.5); }
.btn.focus, .btn:focus { box-shadow:0 0 0 0.2rem rgba(255,102,0,.5); }

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show›.btn-primary.dropdown-toggle:focus { box-shadow:0 0 0 0.2rem rgba(255,102,0,.5);}

#steps .row { width: 80%; margin: 0 auto;}
#steps .card { border-color:transparent; border-radius: 15px; min-height:100%; height: auto; padding: 1.5em;  }
#steps .card p { text-align: center;}

#steps .card .card-body { display: flex; flex-direction: column; justify-content: space-between; }

#steps .bg-dark { background-color: #FF8C40!important;
  background-image: url(../img/bg-circle.png);
  background-position: right 400px;
  background-repeat: no-repeat;
  background-position: fixed;
}

#steps .card-title { color: #72207E; font-size:1.4em; letter-spacing: -.05em; font-weight: bold; text-align: center; line-height:1.2em; margin-bottom: 1em; }

#steps ol {
  list-style: none;
  counter-reset:counter;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  margin-bottom: 2em;
}
#steps ol li {
  counter-increment: counter;
  display: flex;
  font-size: 1em;
  font-weight: 700;
  align-items: center;
  margin-bottom: 1.5em;
}


#steps .row div.col-12.col-md-6:last-child .card-body ol li {
  margin-bottom:3em;

}
#steps ol li:last-child { margin-bottom: 0;}
#steps ol li::before {
  content: "" counter(counter);
  font-weight: bold;
  font-size: 4rem;
  margin-right: 0.5em;
  color:#00ACB9;
  line-height: 1;
}

@media (max-width: 1200px) {
  #steps .row {  width: 100%;  }

}

.bg-primary { background-color: #f9f9f9!important;}

#doubts ul li { margin-bottom:1.2em; }

#whatis div.container > div {
  margin: 0 auto;
  background-color: #FFF;
  border-radius: 15px;
  padding: 2em;
  width: 80%;
}

#whatis h6 { font-weight: 700; text-align: center; font-style: italic;}
#whatis h3 { text-align: center;}


#whatis .container-fluid {
  background-image: url(../img/bg-circle-sm.png);
  background-position: 8% 0;
  background-repeat: no-repeat;
  background-position: fixed;
}



@media (max-width: 992px) {
  #whatis div.container > div {
    width: 100%;
  }
}


#tips .bg-light { padding:2em; border-radius:15px;  }



footer › .container .row {padding-top: 4em;}
footer {color:#8d8d8d; font-size:14px; }
footer p { line-height:1.4em;}
footer strong { font-weight:500; }
footer h5 { color:#FFA773; font-style:normal; }
footer ul {list-style-type: none; padding-left: 0;}
footer a { color:white; }
footer a:hover { color:#ff6600; text-decoration: none; }
footer i {margin-right: .5em;}
footer > div:nth-child(2) { display: flex; justify-content: center;}
#contentSocial .icon-facebook-squared, #contentSocial .icon-twitter-squared, #contentSocial .icon-youtube-play { font-size: 1.8em!important;  }
#contentSocial ul { padding-top:1em; }


footer div.container:nth-child(2) > div:nth-child(2)  { display: flex; justify-content: center;}


footer .container:nth-child(2) { flex-direction: column;}


@media (max-width: 990px)  {

    footer h5 i { display: inline-block; width: 25px; height: 25px; /*float: left;*/}


        #contentSocial ul { padding-left: 0; padding-top: 1em; }
	#contentSocial .icon-facebook-squared, #contentSocial .icon-twitter-squared, #contentSocial .icon-youtube-play { margin-right:0;  }
}

@media (max-width: 576px)  {
    #contentSocial ul { padding-left: 3.7em; padding-top: 0;}

}

.footer-contact { border-top: 1px solid #525252;}
.footer-contact div.col-12 { padding-top: 2em;}
footer .container { padding:0 2em;}

.list-column {
  column-count: 2;
  column-gap: 40px;
}

@media (max-width:768px) {

  .list-column {
      column-count: 1;
      column-gap: 0;
  }

}




.float{
	position:fixed;
	width:120px;
	height:120px;
	bottom:40px;
	right:40px;
	background-color:#fff;

  font-weight: 700;
	border-radius:50%;
	text-align:center;
	box-shadow: 2px 2px 3px #9999996c;
  line-height: 1em;
  border: 3px solid #ff6500;
  text-decoration: none;
  display: flex;
  align-items: center;
  z-index:1000;
  transition: all .2s;
  text-decoration: none;
}

.float div {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.float div span {
  margin:0; margin-top: .3em; padding:0 .2em;
}

.float div span strong {
  display: block; color:#72207E;
}

.my-float{
	margin-top:22px;
}

.float:hover { background-color:#ff6500; color:#fff; text-decoration:none; }
.float i { font-size: 2em; color:#00ACB9;}
.float:hover i { color:#fff;}

.float:hover div span strong {
  color:#fff;
}

.modal-header { border-bottom:transparent;}

.modal .table { font-size:.95em; line-height:1.2em; box-shadow: 0px 4px 9px 0px rgba(0,0,0,0.1); border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }
.modal .table td { padding:1.1em;}
.modal .table td { border-bottom: none; }
.modal .table tr th { background-color:#72207E; text-align: center; vertical-align: middle; color:#fff;}
.modal .table tr th:first-child { border-top-left-radius: 10px; }
.modal .table tr th:last-child { border-top-right-radius: 10px; }


.modal .table tr:last-child td:last-child {border-bottom-right-radius: 10px;}
.modal .table tr:last-child td:first-child {border-bottom-left-radius: 10px;}


.tabs-container { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; padding:1.5em; border-radius:15px; background-color: #FFFF;}

#pillsTabContent .nav .nav-link { border-radius:10px; margin-bottom:10px;  background-color:#EFEFEF; display: flex; justify-content: flex-start; align-items: center; color:#848484;}
#pillsTabContent .nav .nav-link i {font-size:1.8em; margin-right:.65em;}
#pillsTabContent .nav .nav-link span { text-align: left; line-height:1.2em; font-weight:600;}
#pillsTabContent #settlement .nav .nav-link:hover, #pillsTabContent .nav .nav-link.active { background-color:#00ACB9; color: #fff;}

#pillsTabContent #pay .nav .nav-link:hover, #pillsTabContent #pay .nav .nav-link.active { background-color:#285496; color: #fff;}

#pillsTabContent #report .nav .nav-link:hover, #pillsTabContent #report .nav .nav-link.active { background-color:#72207E; color: #fff;}