@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito.woff2') format('woff2');
}

@font-face {
  font-family: 'Comfortaa';
  src: url('../fonts/Comfortaa-Regular.woff2') format('woff2');
  src: url('../fonts/Comfortaa-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'MaterialIcons';
  src: url('../fonts/MaterialIconsSharp-Regular.otf') format('otf');
  src: url('../fonts/MaterialIcons-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'permanent_markerregular';
    src: url('../fonts/PermanentMarker-webfont.woff') format('woff');
    src: url('../fonts/PermanentMarker-webfont.ttf') format('truetype');
	src: url('../fonts/PermanentMarker-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;

}


body{
	font-family: 'Comfortaa',Arial,sans-serif;
	font-size: 140px;
	margin:0px;
}

header{
    opacity:1;
    width:100%;
    max-width:100%;
    flex:0 0 auto;
    text-shadow:none;
    box-shadow:none;
	margin: 10px;
	background-color: #ffffff;
	border: 0px solid #cccccc;
	margin: auto;
	text-align:center;
	font-size: 10%;
}

header .logo{
	display: block;
	position: left;
	float:left; 
	border: 0px solid #cccccc;
	width:14%;
	margin:0px;
	padding: 10px;
	background-color: #ffffff;
	margin-bottom: 6%;
	
}

header img{
  width: 60%;
  background-color: transparent;
  position: relative;  
}

p{
  font-size:30%;
  text-align:justify;
  padding:1%;
  padding-left:8%;	
  padding-right:8%;
}

.menu{
 display: table;
 position: inline;
 float:right; 
 border: 0px solid #cccccc;
 width:50%;
}

.menu ul > li{
	width: 10%;      
    text-align: center; 
	display: table-cell;
	list-style-type: none;
}
.menu ul li a{
 display: block;
 position: relative;
 background-color: #ffffff;
 color: #333;
 padding: 10px;
 line-height: 180%;
 text-decoration: none;
 font-size: 140%;
 
}

.menu ul li a:hover{
background-color:#75a1ea;
color: #ffffff;
}


.banner{
	clear: both;
	display: block;
    width:100%;
    text-shadow:none;
    box-shadow:none;
	text-align:center;
	/*align-items: center;
	justify-content: flex-start;
	align-content: stretch;*/

    border: 0px solid #000000;
	opacity: 0.7;
	background-color: #ffffff;
    position:relative;
}

.banner img{
   border-radius: 10px;
   width: 80%;
   margin:auto;
   position:relative;

}

.titulo{
	font-family: permanent_markerregular;
	font-size: 250%;
	font-weight: 100;
	text-shadow: none;
	margin-bottom: 20px;
	color:#000000;
	font-style: italic;
	background-color: transparent;
	opacity: 1.6;
	letter-spacing: 1px;
	line-height: 1.5;
}

.titulo2{
	font-family: 'Comfortaa',Arial,sans-serif;
	font-size: 60%;
	font-weight:bold;
	text-shadow: none;
	margin: 0px;
	color:#333469;
	background-color: transparent;
	opacity: 1.6;
	
}


.docImagen{
  height: 560px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  
}

.docImagen1{
  background-image: url("../img/doc01.png"); /* The image used */  
}


.docImagen2{
  background-image: url("../img/doc02.png"); /* The image used */  
}

.docImagen3{
  background-image: url("../img/doc03.png"); /* The image used */  
}

.docImagen4{
  background-image: url("../img/doc04.png"); /* The image used */  
}

.boton{
  display:block;
  margin: auto;
  font-family: 'Nunito',Arial,sans-serif;
  font-size: 40%;
  font-weight:bold;
  text-align: center;
  line-height: 20px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  background-color: #000;
  color: #ffffff;
  cursor: pointer;
  padding: 20px;
  padding-left: 30px;
  padding-right: 30px;
  letter-spacing: 2px;
  text-shadow: none;
  margin-bottom: 20px;
  width: 20%;
  text-decoration: none;
  text-align:center;
}

.boton:hover{
background-color:#82b7dc;
color: #000;
 
}

.whatWeDo{clear: both;
	display: block;
    width:100%;
    text-shadow:none;
    box-shadow:none;
	border: 0px solid #000000;
	text-align:center;
	align-items: center;
	justify-content: flex-start;
	align-content: stretch;
	margin-bottom: 0px;
	background-color:#dbf0f9;
	font-size: 50%;
}


.card{
	display:block;
	overflow-x:none;
	overflow-y:none;
    width:100%;
    text-shadow:none;
    box-shadow:none;
	border: 0px solid #cccccc;
	text-align:center;
	background: linear-gradient(to bottom right, blue, pink);
	background-image: url("../img/nebuolosa.jpg"); /* The image used */
    height: 500px; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
	margin:0;
	margin-bottom: 5%;
	
}

.tabla1 {
  border-collapse: collapse;
  width: 100%;
  display:table;
  margin:0;
  font-size: 40%; 
}


.tabla1 td{
	vertical-align: middle;
	text-align:center;
	border: 0px solid #cccccc;
}   

.myCard{
	display: block;
	position:relative;
	border: 0px solid #cccccc;
	width: 98%;
	background-color:#ffffff;
	opacity: 0.9;
	height: 450px;
	margin:auto;
	border-radius: 20px;
	margin-top: 20px;
}

.myCard h2 { font-size: 40%; padding-left: 6px; padding-right: 6px; border: 0px solid #cccccc; }

.myCard p { font-size: 30%; padding-left: 10px; padding-right: 10px; text-align:center;}

.myCard img{
 	
	margin:0;
	width:100%;
	height: 200px;
	border-radius: 20px;
	opacity: 2;

}

.statistics
{
  font-family: 'Comfortaa',Arial,sans-serif;
  display:block;
  position:relative;
  overflow-x:auto;
  border: 0px solid #cccccc;
  padding-top: 0%;
  padding-bottom:0%;
  text-align: center;
  font-size: 50%; 
 
}

.tabla2 {
  border-collapse: collapse;
  width: 100%;
  display:table;
}

.tabla2 td {
  text-align: left;
  padding: 8px;
  border: 1px solid #ddd;

  align-items: center;
  text-align: center;
  border-spacing: 10px;
  font-size: 70%; 
}

.tabla2 tr:nth-child(even){background-color: #f2f2f2}

.material-symbols-outlined
{
  font-family: 'MaterialIcons';
  font-style: normal;
  font-weight: 100;
  font-size: 100%;
  color: #5494ea;

}

.statistics p
{
  font-style: normal;
  font-weight: 100;
  color: #5494ea;
  text-align:center;
}


.statistics div{

   min-height: 250px;
   margin:20px;	
   border: 1px solid #cccccc;
   padding: 14px;
   margin: 80px;
   
   
}

.ourCustomers{
  display: block;
  position:relative;
  align-items: center;
  border: 0px solid #cccccc;
  padding-top: 2%;
  text-align: center;
  background-image: url("../img/doc02.png"); /* The image used */
  height: 460px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  margin-bottom: 30px;
  font-size: 40%;
}


.myCard2
{
	display: block;
	padding: 10px;
	width: 44%;
	float: left;
	margin:16px;
	color: #000000;
	border-radius: 20px;
	border: 0px solid #cccccc;
	background: rgba(255,255,255,0.8);	
	box-shadow: 5px 5px 15px gray;
}

.contact{
  clear: both;
  margin-top: 10px;
  position:relative;
  align-items: center;
  border: 0px solid #cccccc;
  padding: 40px;
  text-align: center;
  background: linear-gradient(to bottom, #ffffff, #dbf0f9);
  margin: 0; 
  display: block;
  align-items: center;
  font-size: 40%;
}


#contacto{
 display:none;
 font-size: 40%;
 text-align:center;
 color:#404040;
 align-items: middle;
 margin:auto;
 margin-bottom: 14px;
 width: 50%;
 border: 0px solid #000000;
 font-size: 10%;
 
}

.lista{
list-style: none;
font-size: 30%;	
text-align: left;
padding-left: 100px;	
}



#contacto span
{
  font-family: 'MaterialIcons';
  font-style: normal;
  font-weight: 100;
  font-size: 200%;
  color: #5494ea;

}

.dato{
	display: block;
	position:relative;
	border: 0px solid #cccccc;
	float:left;
	width:50%;
}

.credencial{

	display: block;
	background-image: url("../img/vcard_v1.1_web_250.png");
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	position: relative;
	border: 0px solid #cccccc;
	background-size: 250px 281px;
	width: 250px;
	height: 281px;
	margin:auto;
	float:right;
	width:40%;
	margin-top:30px;
}



.precio{
	display:block;
	overflow-x:none;
	overflow-y:none;
    width:100%;
    text-shadow:none;
    box-shadow:none;
	border: 0px solid #cccccc;
	text-align:center;
	/*background: linear-gradient(to bottom right, blue, pink); */
	/*background-image: url("../img/banner.jpg"); The image used */
    height: 560px; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
	margin:0;
	margin-bottom: 5%;
	
}

.tabla3 {
  border-collapse: collapse;
  width: 100%;
  display:table;
  margin:0;
  font-size: 40%; 
}


.tabla3 td{
	vertical-align: middle;
	text-align:center;
	border: 0px solid #cccccc;
	
}   

.myCardPrecio{
	display: block;
	position:relative;
	border: 1px solid #cccccc;
	width: 98%;
	background-color:#dbf0f9;
	opacity: 4;
	height: 530px;
	margin:auto;
	border-radius: 20px;
	margin-top: 20px;

}


.myCardPrecio p { font-size: 30%; padding-left: 10px; padding-right: 10px; text-align:center;}

.myCardPrecio img{
 	
	margin:0;
	width:100%;
	height: 200px;
	border-radius: 20px;
	opacity: 2;

}


footer{
  margin-top: 10px;
  position:relative;
  align-items: center;
  border: 0px solid #cccccc;
  padding: 40px;
  background: linear-gradient(to bottom, #76ccf0, #ffffff);
  margin: 0; 
  display: block;
  font-size: 12%;

}

.service{
 display : block;
 position: relative;
 float: left;
 text-align: left;
 border:0px solid #000000; 
 width: 48%;
 vertical-align: middle;
}

.network{
 display : block;
 position: relative;
 float: right;
 border: 0px solid #cccccc;
 width: 50%;
 vertical-align: middle; 
}

.network img{
	width:40px;
}

.network h4{
	 font-size: 60%;
}

/* Para todos los dispositivos móviles */
@media screen and (max-width: 480px) {
  /* Estilos generales para dispositivos móviles */
body{
font-size: 80px;	
	
}

.docImagen{
  height: 320px; 
  
}

.card{
	 height: 380px; 
}

.myCard{
  height: 330px; 	
}

.myCard img{
  height: 160px; 	
}

.myCard2
{
  width: 38%;	
  margin:4px;
}

footer{
  padding: 10px;
}
/* Para todos los dispositivos móviles */
@media screen and (max-width: 768px) {
  /* Estilos generales para dispositivos móviles */
}

/* Móvil en modo retrato 
@media screen and (max-width: 480px) and (orientation: portrait) {
  /* Estilos específicos para móvil en retrato */
}*/

/* Móvil en modo paisaje
@media screen and (max-width: 768px) and (orientation: landscape) {
  /* Estilos específicos para móvil en paisaje */
}*/

/* Para todos los dispositivos móviles 
@media screen and (max-width: 768px) {
  /* Estilos generales para dispositivos móviles */
}*/