@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ==========================================================================
   Base styles:opinionated defaults
   ========================================================================== */
html{color:#3d3d3d;  font-size:1em;  line-height:1.4}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection{background:#b3d4fc;  text-shadow:none}

::selection{background:#b3d4fc;  text-shadow:none}

/*
 * A better looking default horizontal rule
 */
hr{display:block;  height:1px;  border:0;  border-top:1px solid #ccc;  margin:1em 0;  padding:0}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video{vertical-align:middle}

/*
 * Remove default fieldset styles.
 */
fieldset{border:0;  margin:0;  padding:0}

/*
 * Allow only vertical resizing of textareas.
 */
textarea{resize:vertical}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade{margin:0.2em 0;  background:#ccc;  color:#000;  padding:0.2em 0}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body{background-color:#fff; margin:0px; padding:0px; font-family:'Roboto',sans-serif; font-size:100%; font-size:14px; line-height:normal; font-weight:normal; color:#3d3d3d}
p{font-size:100%}
.container{max-width:1280px !important}
a{text-decoration:none; color:#1b3799}
a:hover{color:#1b3799; text-decoration:underline}
a:active{
	outline:none;
	color:#06F
}
a:focus{outline:none}
img{border:none}
.cl{font-size:0;  line-height:0;  height:0;  clear:both}
.Espacio{clear:both; margin-bottom:10px}
.Centro{text-align:center; margin-right:auto; margin-left:auto; clear:both}
.Derecha{text-align:right; clear:both}
.align_left{float:left;  margin-right:1em;  margin-bottom:1em}
.align_right{float:right;  margin-left:1em;  margin-bottom:1em}
.align_center{display:block;  margin-left:auto;  margin-right:auto}
img.opacity{opacity:1; filter:alpha(opacity=100)}
img.opacity:hover{opacity:0.8; filter:alpha(opacity=80)}
/*-----------------navbar-----------------*/
.navbar{color:#296ca0; line-height:25px; font-size:100%}
.navbar a{color:#296ca0 !important; padding:7px;  -moz-transition:all .5s ease-in;  -o-transition:all .5s ease-in;  -webkit-transition:all .5s ease-in;  transition:all .5s ease-in; background-color:#FFF}
 .navbar .navbar-collapse a:hover{color:#296ca0; text-decoration:none; background-color:#BBD9EE}
.navbar .nav-item{padding-left:30px}
.navbar .navbar-toggler{color:#296ca0 !important}
/*-----------------slide-----------------*/
.slideshow{background-color:#193589; background-image:url(../images/slide.jpg); height:665px; width:100%; background-repeat:no-repeat; background-position:50%}
.slideshow h1{font-weight:bold; color:#FFF; text-align:center; padding:15px}
.slideshow h2{color:#FFF; text-align:center; padding:15px}
.slideshow .btn{width:200px}
/* CSS personalizado para los botones del carrusel */
  .carousel-control-prev,
  .carousel-control-next {
    color: #000; /* Cambia el color del texto a blanco */
    border-radius: 5px; /* Agrega esquinas redondeadas */
    padding: 5px 10px; /* Ajusta el padding */
    margin-top: -25px; /* Ajusta la posición vertical */
  }

  .carousel-control-prev:hover,
  .carousel-control-next:hover {
    background-color: #F9F9FB; /* Cambia el color de fondo al pasar el mouse */
  }
  /*-----------------hosting-----------------*/
.hosting{padding-top:35px; padding-bottom:20px}
.hosting h1{color:#1b378b; text-align:center; font-family:'Roboto Condensed',sans-serif}
.hosting h4{color:#999; text-align:center; padding-bottom:20px}
.hosting .encabezado{ position:relative;  height:150px;  background-image:linear-gradient(#173d90,#4177bd);  border-bottom-left-radius:50% 40%;  border-bottom-right-radius:50% 40%}
.hosting .encabezado2{ position:relative;  height:150px;  background-image:linear-gradient(#3579ac,#5aa9df);  border-bottom-left-radius:50% 40%;  border-bottom-right-radius:50% 40%}
.hosting .encabezado3{ position:relative;  height:150px;  background-image:linear-gradient(#5aa9df,#173d90);  border-bottom-left-radius:50% 40%;  border-bottom-right-radius:50% 40%}
.hosting .encabezado h2{text-align:center; color:#FFF; font-family:'Roboto Condensed',sans-serif; padding-top:15px}
.hosting .encabezado h3{text-align:center; color:#FFF; font-size:350%; font-weight:bold}
.hosting .encabezado2 h2{text-align:center; color:#FFF; font-family:'Roboto Condensed',sans-serif; padding-top:15px}
.hosting .encabezado2 h3{text-align:center; color:#FFF; font-size:350%; font-weight:bold}
.hosting .encabezado3 h2{text-align:center; color:#FFF; font-family:'Roboto Condensed',sans-serif; padding-top:15px}
.hosting .encabezado3 h3{text-align:center; color:#FFF; font-size:350%; font-weight:bold}
.hosting .encabezado .precio{font-size:40%}
/*-----------------servicios-----------------*/
.servicios{padding-top:35px; padding-bottom:20px}
.servicios h1{color:#1b378b; text-align:center; font-family:'Roboto Condensed',sans-serif}
.servicios h4{color:#999; text-align:center; padding-bottom:20px}
.servicios .icono{text-align:center; margin:auto; position:relative; width:135px}
.servicios .icono .fa{color:#ff7c3f; font-size:80px; box-sizing:content-box; line-height:122px; text-align:center; width:122px; height:122px; display:inline-block; overflow:hidden; border-radius:15%; background-color:#ffebe2}
.servicios .numero{color:#6c757d; font-size:25px; box-sizing:content-box; line-height:35px; text-align:center; width:35px; height:35px; display:inline-block; overflow:hidden; border-radius:50%; background-color:#FFF; position:absolute; top:0px; right:0px; font-weight:bold}
.servicios .card-title{color:#ff7c3f; text-align:left; font-family:'Roboto Condensed',sans-serif; font-size:160%; padding-top:10px; padding-bottom:5px}
.servicios .card-text{color:#666; text-align:justify}
/*-----------------homeblog-----------------*/
.homeblog{
	padding-top: 10px;
	padding-bottom: 30px;
	color: #666;
}
.homeblog h1{color:#1b378b; text-align:center; font-family:'Roboto Condensed',sans-serif}
.homeblog h4{color:#999; text-align:center; padding-bottom:20px}
.homeblog  .card-title{ color:#1b3799;font-family:'Roboto Condensed',sans-serif}
/*-----------------main-----------------*/
.main{
	padding-top: 25px;
	padding-bottom: 25px;
	text-align: justify;
}
.main h1{color:#1b378b; text-align:center; font-family:'Roboto Condensed',sans-serif}
.main h4{color:#999; text-align:center; padding-bottom:20px}
.main .clientescat{}
.main .clientescat .icono{text-align:center; margin:auto; position:relative; width:135px}
.main .clientescat .icono .fa{color:#007bff; font-size:80px; box-sizing:content-box; line-height:122px; text-align:center; width:122px; height:122px; display:inline-block; overflow:hidden; border-radius:15%; background-color: #DDF}
.main .clientescat .numero{color:#6c757d; font-size:25px; box-sizing:content-box; line-height:35px; text-align:center; width:35px; height:35px; display:inline-block; overflow:hidden; border-radius:50%; background-color:#FFF; position:absolute; top:0px; right:0px; font-weight:bold}
.main .clientescat .card-title{color:#ff7c3f; font-family:'Roboto Condensed',sans-serif; font-size:130%; padding-top:10px; padding-bottom:5px}
.main .clientesicons .fas{
	color: #007bff;
	padding-right: 5px;
}
.main .clientescards .card-title{
	font-size: 110%;
}
.main .clientescards .card-text{
	font-size: 85%;
}
/*-----------------footer-----------------*/
.pie{background-color:#172337; color:#CCC; text-align:left; font-size:90%; padding-top:35px; padding-right:25px; padding-bottom:25px; padding-left:25px}
.pie h2{font-family:'Roboto Condensed',sans-serif; font-size:140%; font-weight:bold; color:#FFF}
.pie h4{font-size:100%}
.pie .final{text-align:center; padding:10px; border-top-width:1px; border-top-style:solid; border-top-color:#6c757d}
.pie a{color:#fff; text-decoration:none}
.pie a:hover{color:#fff; text-decoration:underline}
.pie .fab{
	font-size: 150%;
	color: #CCC;
	padding-right: 20px;
}
/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers:
 */
.hidden{display:none !important}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.visuallyhidden{border:0;  clip:rect(0 0 0 0);  height:1px;  margin:-1px;  overflow:hidden;  padding:0;  position:absolute;  width:1px}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus{clip:auto;  height:auto;  margin:0;  overflow:visible;  position:static;  width:auto}

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible{visibility:hidden}

/*
 * Clearfix:contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after{content:""; /* 1 */ display:table; /* 2 */}

.clearfix:after{clear:both}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width:35em){/* Style adjustments for viewports that meet the condition */}

@media print,
 (-webkit-min-device-pixel-ratio:1.25),
 (min-resolution:1.25dppx),
 (min-resolution:120dpi){/* Style adjustments for high resolution devices */}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print{*,*:before,*:after{background:transparent !important;  color:#000 !important; /* Black prints faster:                              http://www.sanbeiji.com/archives/953 */ box-shadow:none !important;  text-shadow:none !important}

 a,
 a:visited{text-decoration:underline}

 a[href]:after{content:"("attr(href) ")"}

 abbr[title]:after{content:"("attr(title) ")"}

 /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
 a[href^="#"]:after,
 a[href^="javascript:"]:after{content:""}

 pre,
 blockquote{border:1px solid #999;  page-break-inside:avoid}

 /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
 thead{display:table-header-group}

 tr,
 img{page-break-inside:avoid}

 img{max-width:100% !important}

 p,
 h2,
 h3{orphans:3;  widows:3}

 h2,
 h3{page-break-after:avoid}
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* Para 960px */
@media only screen and (max-width:960px) and (min-width:821px){}

/* Para 600px */
@media only screen and (max-width:820px) and (min-width:501px){

   #main iframe{width:100%; height:auto}
   .slideshow h1{font-size: 90%;}


}

/* Para 480px */
@media only screen and (max-width:500px) and (min-width:141px){

   #main iframe{width:100%; height:auto}
   .slideshow h1{font-size: 140%;}

}