@charset "utf-8";
/* CSS Document */
body{
	overflow-x: hidden;
	background-color: #003366;
	}
@media screen and (min-width: 1920px){
	body {
		max-width: 75em;
		margin-left: auto;
		margin-right: auto;
	}
	.grid-container.fluid {
		max-width: 75em;
		margin-left: auto;
		margin-right: auto;
	}
}
/* barra top búsqueda, accesibilidad */
    .top-bar-info {
      background-color: #003366;
      color: #fff;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1rem;
      font-size: 0.9rem;
		border-bottom: 1px solid rgba(255,255,255,0.20);
		text-transform: uppercase;
    }
    .top-bar-info a {
      color: #fff;
     margin-left: 1rem;
    }
    .top-bar-info a:hover, .top-bar-info a:focus {
      color: #6AECBE;
      text-decoration: underline;
    }
@media screen and (max-width:40em){
	.top-bar-info-izq{
		  display:none;
		  }
	  }
/* menu */
nav.top-bar,
nav.topbar-responsive {
  background: #06498C;
background: -webkit-linear-gradient(180deg,rgba(0, 51, 102, 1) 0%, rgba(6, 73, 140, 1) 100%);
background: -moz-linear-gradient(180deg,rgba(0, 51, 102, 1) 0%, rgba(6, 73, 140, 1) 100%);
background: linear-gradient(180deg,rgba(0, 51, 102, 1) 0%, rgba(6, 73, 140, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr="#003366",
  endColorstr="#06498C",
  GradientType=0
);
  padding: 1rem 1rem 0 1rem;
	position:fixed;
	z-index:9999;
	}
.topbar-responsive .topbar-responsive-logo {
  vertical-align: top;
}
.topbar-responsive .topbar-responsive-logo img{
	width: auto; 
	height: 22px;
	margin-top: -1rem;
}
.topbar-responsive .menu {
  background: #06498C;
background: -webkit-linear-gradient(180deg,rgba(0, 51, 102, 1) 0%, rgba(6, 73, 140, 1) 100%);
background: -moz-linear-gradient(180deg,rgba(0, 51, 102, 1) 0%, rgba(6, 73, 140, 1) 100%);
background: linear-gradient(180deg,rgba(0, 51, 102, 1) 0%, rgba(6, 73, 140, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr="#003366",
  endColorstr="#06498C",
  GradientType=0
);
	font-family: 'Noto Sans', sans-serif !important;
	text-transform: uppercase;
	font-size: 0.9rem;
}
	  .topbar-responsive .menu a {
    margin: auto -0.75rem;
  }
	  .topbar-responsive .menu .cat {
    margin: auto 0 auto -0.25rem;
  }
.topbar-responsive .menu li:last-of-type {
  margin-right: 0;
}
.topbar-responsive .menu a:link,
.topbar-responsive .menu a:visited,
.topbar-responsive .menu .cat:link,
.topbar-responsive .menu .cat:visited{
  color: #fff;
  transition: color 0.15s ease-in;
}
.topbar-responsive .menu a:hover,
.topbar-responsive .menu a:focus,
.topbar-responsive .menu .cat:hover,
.topbar-responsive .menu .cat:focus{
  color:#6AECBE;
}
.top-bar .is-dropdown-submenu-parent > a:after {
  border-color: #FFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)!important; 
 }
@media screen and (min-width: 64em){
  .topbar-responsive .menu a {
    margin: auto -0.45rem;
  }
  .topbar-responsive .menu .cat {
    margin: auto 0 auto -0.35rem;
  }
}
@media screen and (max-width: 40em) {
  [data-sticky] {
    position: static !important;
    top: auto !important;
  }
}
@media screen and (max-width: 39.9375em) {
  .topbar-responsive .menu a {
    padding: 0.875rem 0;
  	}
	.is-accordion-submenu-parent[aria-expanded="true"] > a::after,
	.is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after{
  border-color: #FFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)!important; 
 	}	
	.topbar-responsive {
    padding: 0.75rem;
  	}
	
  .topbar-responsive .top-bar-title {
    position: relative;
    width: 100%;
		}
  .topbar-responsive .top-bar-title span {
    position: absolute;
    right: 0;
    border: 1px solid #fefefe;
    border-radius: 5px;
    padding: 0.25rem 0.45rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  	}
  .topbar-responsive .top-bar-title span .menu-icon {
    margin-bottom: 4px;
  	}
	.topbar-responsive .menu.simple.vertical.medium-horizontal li{
		width: 100%;
		text-align: left;
		margin-left: 1em;
		margin-right: 1em;
		padding-left: 1em;
	}
	.topbar-responsive .menu.simple.vertical.medium-horizontal li:first-of-type{
		margin-top:1.5em;
	} 
	.topbar-responsive .menu a {
    margin: 0 1em;
  }
	  .topbar-responsive .menu .cat {
    margin: 0 1em;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@media screen and (max-width: 39.9375em) {
  .topbar-responsive-links {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    width: 100%;
    -webkit-animation: fadeIn 1s ease-in;
            animation: fadeIn 1s ease-in;
  }
}
html.no-js .top-bar {
  display: none;
}
@media screen and (min-width: 40em) {
  html.no-js .top-bar {
    display: block;
  }
  html.no-js .top-bar-title {
    display: none;
  }
}
/* home */
	#encabezado {
		  padding-top: 2.5em;
		  background: #003366;
background: -webkit-linear-gradient(0deg,rgba(0, 51, 102, 1) 0%, rgba(6, 73, 140, 1) 100%);
background: -moz-linear-gradient(0deg,rgba(0, 51, 102, 1) 0%, rgba(6, 73, 140, 1) 100%);
background: linear-gradient(0deg,rgba(0, 51, 102, 1) 0%, rgba(6, 73, 140, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr="#003366",
  endColorstr="#06498C",
  GradientType=0
);
	  }
	.noto-sans-400 {
  		font-family: "Noto Sans", sans-serif !important;
  		font-optical-sizing: auto;
  		font-weight: 400;
  		font-style: normal;
	}
	h1, h2, h3, h4, h5 {
		font-family: "Noto Sans", sans-serif !important;
  		font-optical-sizing: auto;
  		font-weight: 900;
  		font-style: normal;
		color: #fff;
	}
	p, li, a, div, span{
	  	color: #fff;
	  	font-family: "Noto Sans", sans-serif !important;
  		font-optical-sizing: auto;
  		font-weight: 400;
  		font-style: normal;
	  }
	#encabezado h1,
	#encabezado p{
		color: #fff;
		font-family: "Noto Sans", sans-serif !important;
  		font-optical-sizing: auto;
  		font-weight: 900;
  		font-style: normal;
		padding-left: 2rem;
	}
	#encabezado h1{
		margin-top: 0.5em;
	  }
	#encabezado p{
		font-size: 1.35rem;
		font-weight: 400;
	}
@media screen and (max-width:64em){
	#encabezado h1,
	#encabezado p{
		padding-left: 2rem;
		padding-right: 2rem;
	}
	  }
@media screen and (max-width:40em){
	#encabezado h1{
		font-size: 2.25em;
	}
}
	#encabezado {
	  padding-top: 1em;
	  padding-bottom: 1em;
	}
	#encabezado .imagen-con-texto {
      position: relative;
      display: inline-block;
      width: 100%;
    }
    #encabezado .imagen-con-texto img {
      width: 550px;
      height: auto;
      display: block;
		margin: auto;
    }
   #encabezado .texto-superpuesto {
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #2C2C2C;
      background-color: rgba(255, 255, 255,1); 
      padding: 10px 20px;
      border-radius: 8px;
      text-align: center;
		font-weight: bold;
		border: 1px solid #ccc;
    }
@media screen and (max-width:40em){
	#encabezado .texto-superpuesto {
      bottom: 2%;
      left: calc(50% - 50px);
		padding: 10px;
      }
}
	.flotar{
		animation: moverArribaAbajo 2s ease-in-out infinite;
	}
	@keyframes moverArribaAbajo{
		0%{
			transform: translateY(0);
		}
		50% {
			transform: translateY(-10px);
		}
		100%{
			transform:translateY(0);
		}
	}

	  .button {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 1rem 0;
  border: 1px solid #fefefe;
  border-radius: 50px;
  -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  font-family: inherit;
  font-size: 0.9rem;
  -webkit-appearance: none;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  padding: 0.85em 1em;
}
	.button.primary {
  		background-color: transparent;
  		color: #fefefe;
}
	.button.primary:hover, 
	.button.primary:focus {
  		background-color: transparent;
  		color: #fff;
		border: 1px solid #6AECBE;
	  }
	  section:not(.cta){
		  padding-top: 2em;
		  padding-bottom: 3em;
	  }
	  #quienes-somos,
		#servicios,	
		#portfolio {
			padding-top: 3em;
		}
		.cta{
		  padding-top: 3em;
	  }

@media screen and (max-width:40em){
	#servicios h2,
		#portfolio h2,
		#quienes-somos h2,
	.cta h2{
		font-size: 2.25em;
	}
	.contenido-paginas h2 {
		font-size: 1.85em;
	}
	.contenido-paginas h3 {
		font-size: 1.5em;
	}
}
	  #servicios .servicios-caja i,
		.contenido-paginas.seccion-servicios .servicios-caja i{
		  font-size: 4.5em;
	  }
	  #servicios h3,
		.contenido-paginas.seccion-servicios .servicios-caja h2{
		  font-size: 1.45em;
		  padding-top: 0.5em;
	  }
	  /* masonry fluid 5 columns */
	  #portfolio .grid{
		  padding-top: 1em;
	  }
		#portfolio .grid-sizer,
		#portfolio .grid-item { width: 20%; padding: 2px;}
	/* masonry 2 columns */
		#portfolio .grid-item--width2 { width: 40%; }
@media screen and (max-width:40em){
		.grid-sizer,
		.grid-item,
		.grid-item--width2{ width: 100%; }
		}
	  /* clearfix */
		.grid:after {
  			content: '';
  			display: block;
  			clear: both;
		}
	  .boton-portfolio{
		  margin-top: 1.5em;
	  }
	  section a:not(.button),
	  footer a:not(.button){
		  color: #6AECBE;
		  text-decoration: underline;
	  }
	  section a:hover, section a:focus, footer a:hover, footer a:focus{
		  text-decoration: underline;
		  color: #fff;
	  }
	  .cta {
		  background: url(../images/pixel.jpg);
		  padding-top: 3em;
		  padding-bottom: 2em;
	  }
	  .cta.cta-home h2{
		  padding-top: 0;
		  margin-top: -0.5em;
	  }
	  #quienes-somos{
		  padding-bottom: 3.5em;
	  }
	  footer {
		  background-color: #002448;
		  padding: 2em 1.5em;
	  }
	  footer .no-bullet a{
		  margin-left: 0;
		  padding-left: 0;
	  }
	  footer .enlaces-submenu a{
		  margin-left: 0.5em;
	  }
	footer .enlaces-menu li,
	.contenido-paginas.seccion-servicios.plantillas-redes li,
	.contenido-paginas.ecursos li{
		margin-top: 0.28em;
		margin-bottom: 0.28em;
	}
	  footer .redes i{
		  font-size: 30px;
		  padding: 10px;
	  }
	  footer .redes a{
		  padding-top: 10px;
		  text-decoration: none;
	  }
	  footer .redes a:hover, footer .redes a:focus{
		  text-decoration: none;
	  }
footer h2,
footer h3{
	font-size: 1.25em;
}
	.btn-whatsapp {
        display:block;
		font-size: 1.8em;
		line-height: 1.7em;
		background: #1DE29D;
        width:55px;
        height:55px;
        color:#fff;
        position: fixed;
        right:20px;
        bottom:100px;
        border-radius:50%;
        text-align:center;
		z-index:999;
		border: 2px solid #1DE29D;
	}
	.btn-whatsapp a{
		color: #263238;
		text-decoration: none;
		transition: color 0.15s ease-in;
}
	.btn-whatsapp:hover{
		color: #fff;
		text-decoration: none;
		border: 2px solid #fff;
		}
	.btn-whatsapp i{
		color: #fff;
		}
	.btn-arriba {
        display:block;
		font-size: 1.8em;
		line-height: 1.7em;
		background: #FBC02D;
        width:55px;
        height:55px;
        color:#fff;
        position: fixed;
        right:20px;
        bottom:20px;
        border-radius:50%;
        text-align:center;
		z-index:999;
		border: 2px solid #FBC02D;  
	}
	.btn-arriba a{
		color: #002448;
		text-decoration: none;
		transition: color 0.15s ease-in;
		}
	.btn-arriba:hover{
		color: #002448;
		text-decoration: none;
		background: #FBC02D;
		border: 2px solid #fff
		}
	.herramientas li{
		display: inline-block;
		margin: 0.5em;
		font-size: 0.9em;
	}
#accesibilidad a{
	margin-right: 10px;
}
#accesibilidad a:last-of-type{
	margin-right: 0;
}
footer .datafiscal img{
	width: 30px;
	height: auto;
}
#pie-pie span{
	display: inline-block;
	padding: 5px;
	font-size: 0.9em;
}
@media screen and (max-width:40em){
	#pie-pie span{
		display: block;
	}
}
#encabezado-paginas{
	padding-top: 2.5em;
	margin-bottom: 0;
	padding-bottom: 2em;
}
#encabezado-paginas .breadcrumbs{
	padding-top: 1em;
	}
#encabezado-paginas .breadcrumbs a{
	font-size: 1.15em;
}
#encabezado-paginas h1{
	padding-top: 1.5em;
	font-size: 2.5em;
}
.contenido-paginas h2{
	font-size: 1.85em;
}
.contenido-paginas.portfolio h3{
	font-size: 1.25em;
}
.seccion-servicios h2{
	padding-top: 0;
	margin-top: 0;
	font-size: 1.45em;
}
.seccion-servicios .precio {
	font-size: 1.85em;
	font-weight: bold;
}
.seccion-servicios .tachado{
	text-decoration: line-through;
}
.seccion-servicios .caracteristicas li{
	font-size: 0.9em;
}
@media screen and (max-width:40em){
#encabezado-paginas h1{
	font-size: 2em;
}
.contenido-paginas h2{
	font-size: 1.55em;
}
.contenido-paginas.portfolio h3{
	font-size: 1.15em;
}
	.contenido-paginas.seccion-servicios .mas-espacio1{
		padding-top: 2em;
	}
	.contenido-paginas.seccion-servicios.planes .button.small,
	.contenido-paginas.seccion-servicios.portfolio .button.small,
	.contenido-paginas.seccion-servicios.plantillas-redes .button.small,
	.contenido-paginas.portfolio .button.small{
			font-size: 0.9em;
	}
}
.mas-espacio-arriba{
	padding-top: 4em;
}
.contenido-paginas.seccion-servicios .hosting h3{
	font-size: 1.25em;
}
.contenido-paginas.gratis h2{
		font-size: 1.35em;
	}
@media screen and (max-width:40em){
.contenido-paginas.gratis h2{
	font-size: 1.2em;
}
}
.contenido-paginas .imagen-articulo{
	width: 300px;
	height: auto;
	margin: 0 0 10px 10px;
}
@media screen and (max-width:64em){
	.contenido-paginas .imagen-articulo{
		width: 100%;
		height: auto;
		padding-bottom: 3em;
		margin: 0;
	}
}
.contenido-paginas ul.lista{
	margin-left: 1em;
	padding-left: 0;
	list-style: none;
}
.contenido-paginas ul.lista li{
	position: relative;
	padding-left: 0.8em;
}
.contenido-paginas ul.lista li::before {
  content: "";
  border-color: transparent #fff;
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.55em;
  display: inline-block;
  height: 0;
  width: 0;
  left: -0.8em;
  top: 0.5em;
  position: absolute;
	}
.contenido-paginas .buscadores a.button,
.contenido-paginas.seccion-servicios.planes a.button.small{
	margin-top: 1.5em;
}
.contenido-paginas .buscadores img{
	border: 1px solid #fff;
	padding: 3px;
}
.contenido-paginas.plantillas-redes .label,
.contenido-paginas.gratis .label{
	background-color: #000;
	color: #fff;
}
.contenido-paginas.plantillas-redes h3{
	font-size: 1.25em;
}
/* masonry servicios */
	  .contenido-paginas.seccion-servicios .grid{
		  padding-top: 1em;
	  }
		.contenido-paginas.seccion-servicios .grid-sizer,
		.contenido-paginas.seccion-servicios .grid-item { width: 25%; padding: 2px;}
.contenido-paginas.seccion-servicios .grid figcaption{
	background-color: #2C2C2C;
}
.contenido-paginas.ecursos h3{
	font-size: 1.45em;
}
.contenido-paginas.ecursos h4{
	font-size: 1.25em;
}
.contenido-paginas.ecursos .material{
	border: 1px solid #fff;
	padding: 0.5em;
}
.contenido-paginas.ecursos .table-wrapper thead,
.contenido-paginas.ecursos .table-wrapper tbody,
.contenido-paginas.ecursos .table-wrapper tfoot {
  border: 1px solid rgba(0,0,0,0.5);
  background-color: #2c2c2c;
	color: #fff;
}
.contenido-paginas.ecursos .table-wrapper thead{
	background-color: #000;
}
.contenido-paginas.ecursos .table-wrapper tbody tr:nth-child(even){
	background-color: rgb(0, 0, 0);
}
.contenido-paginas.ecursos .table-wrapper table.unstriped tbody {
  background-color: rgba(0,0,0,0.9);
}
.contenido-paginas.ecursos .table-wrapper table.unstriped tbody tr {
  border-bottom: 1px solid rgba(0,0,0,0.5);
  background-color: #2C2C2C;
}
.contenido-paginas.ecursos .ejemplo{
	background-color: #2c2c2c;
	padding: 0.5em;
}
.contenido-paginas.ecursos iframe{
	background-color: #fff;
	margin-top: 0.5em;
}
.contenido-paginas.ecursos figure{
	padding: 0.5em;
}
.contenido-paginas.ecursos dt{
	font-weight: bold;
	font-size: 1.15em;
	margin-top: 0.25em;
}
.contenido-paginas .formulario{
	background-color: #6AB08C;
	padding: 1em;
	border-radius:5px;
}
.contenido-paginas .formulario label{
	text-transform: uppercase;
	font-size: 0.9em;
}
.contenido-paginas .formulario .primary{
	color: #000;
	text-transform: uppercase;
}
.contenido-paginas .formulario .primary:hover,
.contenido-paginas .formulario .primary:focus{
	background-color: #4E946F;
	border-color:#4E946F;
}
.contenido-paginas.glosario img .fluid{
	width: 100%;
	height: auto;
}
@media screen and (max-width:64em){
	.visor-pdf{
		display: none;
	}
}
footer .nota-accesibilidad{
	font-size: 0.9em;
}