@font-face {
  font-family: 'DirecTVCurve';
  src: url('../fonts/directv_curve_regular.woff'); /* IE9 Compat Modes */
  src: url('../fonts/directv_curve_regular.woff') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/directv_curve_regular.woff') format('woff'), /* Super Modern Browsers */
       url('../fonts/directv_curve_regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/directv_curve_regular.woff')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/directv_curve_regular.woff') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'DirecTVCurveBold';
  src: url('../fonts/directv_curve_bold.woff'); /* IE9 Compat Modes */
  src: url('../fonts/directv_curve_bold.woff') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/directv_curve_bold.woff') format('woff'), /* Super Modern Browsers */
       url('../fonts/directv_curve_bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/directv_curve_bold.woff')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/directv_curve_bold.woff') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'DirecTVCurveMedium';
  src: url('../fonts/directv_curve_medium.woff'); /* IE9 Compat Modes */
  src: url('../fonts/directv_curve_medium.woff') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/directv_curve_medium.woff') format('woff'), /* Super Modern Browsers */
       url('../fonts/directv_curve_medium.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/directv_curve_medium.woff')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/directv_curve_medium.woff') format('svg'); /* Legacy iOS */
}

@media screen and (min-width: 701px) {
  .card{
    font-size: 20pt;
    margin-top: 30pt !important;
  }
  .lead{
    font-size: 20pt;
  }}

@media screen and (max-width: 700px) {
  /* estilos para las tarjetas de pago  */
  .card{
    font-size: 30pt;
    margin-top: 0 !important;
  }
  .lead{
    font-size: 30pt;
  }
}

@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) {  
  .card{
 font-size: 100pt ;
}}

@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) { .card{
 font-size: 40pt ;
}}


@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { 
 .card{
   font-size: 40pt;
 }
.lead{
  font-size: 30pt;
}

}


body {
  font-family: 'DirecTVCurve', monospace !important;
  font-weight: 800;
}

.lead{  

  font-weight: 200;
  margin-bottom: 0px;
}

.flex-shrink-0{
  margin-bottom: 10px;
}

.diplay-4{
  font-family: 'DirecTVCurveMedium', sans-serif;
  font-weight: 400;
  margin-bottom: 40px;
}

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}

.navbar.navbar-expand-lg.navbar-dark.bg-dark{
  background: #292929 !important;
  padding: 20px;
}

.footer {
  background-color: #f5f5f5;
}

/* estilos para las tarjetas de pago  */
.card{
  background: #0082b7;
  border: none;
  color: aliceblue;
  /* font-size: 20pt; */
}

.card-header{
  background: #00000022;
  font-family: 'DirecTVCurveMedium', sans-serif, Verdana, Geneva, Tahoma, sans-serif;
}

.card-footer{
  background: white;
  color: #0082b7;

}

.btn-lg{
  font-size: 80% !important;
}

.card-footer .btn{
    background: #ffc60b;
    color: #000;
    font-size: 16px;
    font-family: 'DirecTVCurveMedium', sans-serif, Verdana, Geneva, Tahoma, sans-serif;
}

.btn-atras{
  background: #ffffff !important;
  color: #000 !important;
  font-size: 16px;
  font-family: 'DirecTVCurveMedium', sans-serif, Verdana, Geneva, Tahoma, sans-serif;
}

.card-footer .btn:hover {
  background: #ffd80b;
}

.form-group .btn{
  background: #ffc60b;
  color: #000;
  font-size: 16px;
  font-family: 'DirecTVCurveMedium', sans-serif, Verdana, Geneva, Tahoma, sans-serif;
}

.form-group .btn:hover{
  background: #ffd80b;
}

.form-group label{
  text-align: left !important;
  font-size: 15pt !important;
  font-weight: 300 !important;
}

.form-control{
  color: #000;
  font-size: 16px;
  font-family: 'DirecTVCurveMedium', sans-serif, Verdana, Geneva, Tahoma, sans-serif;
}

.form-control::placeholder{
  color: #00000036 !important ;
  font-size: 16px;
  font-family: 'DirecTVCurveMedium', sans-serif, Verdana, Geneva, Tahoma, sans-serif;
}

footer{
  background: url("./../images/BG_Desktop_footer.jpg");
  height: 100px;
  padding: 0px !important;
}

.flex-shrink-0{
  margin-top: -20px;
}

.query-form{
  margin-top: -10px;
}

.form-group .error{
  font-size: 0.8rem;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  margin-top: 2px;
  margin-bottom: -2px;
  text-align: right !important;
}

.wrapper-progressBar {
  width: 100%;
  margin-bottom: 0px;
}

.progressBar {
}

.progressBar li {
  list-style-type: none;
  float: left;
  width: 33%;
  position: relative;
  text-align: center;
}

.progressBar li:before {
  content: " ";
  line-height: 30px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: block;
  text-align: center; 
  border: 1px solid #ddd;
  margin: 0 auto 10px;
  background-color: white
}

.progressBar li:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  border: 1px solid #ddd;
  background-color: #ddd;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressBar li:first-child:after {
  content: none;
}

.progressBar li.active {
  color: #0082b7;
}

.progressBar li.active:before {
  border-color: #0082b7;
  background-color: #0082b7
}

.progressBar .active:after {
  background-color: #0082b7;
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
   .modalloading {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('/images/ajax-loader.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modalloading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modalloading {
    display: block;
}

body.noscroll {
  overflow: hidden;
}