@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');
}

body{
	font-family: 'Comfortaa',Arial,sans-serif;
	font-size: 100%;
}



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;
}

header .logo{
	display: block;
	position: left;
	float:left; 
	border: 0px solid #cccccc;
	width:32%;
}

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

p{
  font-size: 150%;	
}

.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;
	border: 0px solid #cccccc;
	text-align:center;
	align-items: center;
	justify-content: flex-start;
	align-content: stretch;
margin-bottom: 20px;
}

.titulo{
	font-size: 230%;
	font-weight: 700;
	text-shadow: none;
	margin-bottom: 20px;
	
}

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

.boton{
  display:block;
  margin: auto;
  font-family: 'Nunito',Arial,sans-serif;
  font-size: 120%;
  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: 10%;
  text-decoration: none;
}

.boton:hover{
 background-color:#bf9f21;
 
}


.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: 20px;
background-color:#d5d6f5;
padding-top: 7%;
padding-bottom:7%;
}

.whatWeDo p{
	font-size: 200%;
}
.card{clear: both;
	display: table;
    width:100%;
    text-shadow:none;
    box-shadow:none;
	border: 0px solid #cccccc;
	text-align:center;
	margin:0px;
margin-top: 20px;
background: linear-gradient(to bottom right, blue, pink);

background-image: url("../img/nebuolosa.jpg"); /* The image used */
  height: 400px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;

padding-top: 7%;
padding-bottom:7%;
	border-spacing: 20px;
	table-layout: fixed;
}

.myCard{
 	display: table-cell;
	position: relative;
	/* min-width:28%;*/
	color: #000000;
	margin: 28px;
	border-radius: 20px;
	border: 0px solid #cccccc;
	background: rgba(255,255,255,0.8);	
	box-shadow: 5px 5px 15px gray;
}   

.myCard h2 { padding-left: 6px; padding-right: 6px; }

.myCard img{
 	
	width:100%;
	height: 250px;
	border-radius: 20px;
}

.statistics
{
  display:block;
  position:relative;
  overflow-x:auto;
  border: 0px solid #cccccc;
  padding-top: 7%;
  padding-bottom:7%;
  text-align: center;

}

.statistics table {
  border-collapse: collapse;
  width: 100%;

 
}

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

  align-items: center;
  text-align: center;
  border-spacing: 10px;
}

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

.statistics span
{
  font-family: 'MaterialIcons';
  font-style: normal;
  font-weight: 100;
  font-size: 460%;
  color: #5494ea;

}

.statistics p
{
  
  font-style: normal;
  font-weight: 100;
  font-size: 130%;
  color: #5494ea;

}


.statistics div{

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

.ourCustomers{
  clear: both;
  display: block;
  position:relative;
  align-items: center;
  border: 0px solid #cccccc;
  padding-top: 2%;
  text-align: center;
  background-image: url("../img/fondo4.jpg"); /* The image used */
  height: 600px; /* 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;
}

.ourCustomers h2.titulo{
  background-color: rgba(255,255,255,0.7);
  line-height: 120%;  
}

.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.7);	
	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, #0ca0ba);
  margin: 0; 
  display: block;
  align-items: center;
}




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

#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;
}



footer{
  clear: both;
  margin-top: 10px;
  position:relative;
  align-items: center;
  border: 0px solid #cccccc;
  padding: 40px;
  background: linear-gradient(to bottom, #0ca0ba, #ffffff);
  margin: 0; 
  display: block;

}

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

.network{
display : block;
position: relative;
float: right;
 border: 0px solid #cccccc;
  
}

.noLink{
 text-decoration: none;
 color: #000000;
 cursor: pointer;
}

.noLink:hover{
 color: #22556c;
}


/* Para todos los dispositivos móviles */
@media screen and (max-width: 480px) {
  /* Estilos generales para dispositivos móviles */
header{
	align-items: center;
}

header .logo{

	width:70%;
} 

.boton{
  
  width: 30%;
}

.titulo{
	font-size: 160%;
}

.menu{
 align-items: center;
 width:50%;
}


.whatWeDo p{
	font-size: 120%;
}

.card{

	display: block;
    width:100%;
    height: 1240px; 
	text-align:justify-content;
	margin:0px;
	font-size: 80%;

}
  
.myCard{
	width:86%;
 	display: block;
	position: relative;
	text-align:justify-content;
	margin: auto;
}   

.myCard img{
 	
	width:100%;
	height: 120px;
	border-radius: 20px;
}


.statistics table {
  width: 50%;
}

.statistics th, td {

  width: 60px;
  vertical-align: top;
}


.statistics span
{
  font-size: 330%; 
}

.statistics p
{

  font-size: 100%;  

}


.ourCustomers{
  height: 760px; /* You must set a specified height */
 
}

.ourCustomers h2.titulo{
  background-color: rgba(255,255,255,0.7);
  line-height: 120%;  
}

.myCard2
{
	width: 94%;
	margin:auto;
	margin-bottom: 20px;
	font-size: 80%;
}


#contacto{

 width: 100%;
 
}


.dato{

	width:100%;
}

.credencial{


	width:100%;

}



}

/* 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 */
}*/