:root {
	--azul-main: #01A7B6;
	--verde-main: #19b400;
	--white-backgound: srgb(250, 252, 251);
	/* --whiter: rgb(236, 243, 235); */
	--letra: rgb(61, 61, 61);
}

.body2 {
	margin: 0;
	padding: 20px;
background-size: 55%;
backface-visibility: visible;
position:static;
background-repeat: no-repeat;
opacity: 0.9;

}

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}



.numero{
border-radius: 10px;
font-family: Raleway !important;
background-color: #38b6ff;
color: #FFFFFF;
font-size: 36px;
}

.quienessomos-maincontainer{
	height: 550px;
	width: 600px;
}
@media screen and (max-width:400px)
{
	.quienessomos-maincontainer{
		height: 100%;
		width: 100%;
		
	}
}

.mainconent-Nosotros{
padding-top:60px;
}

.quienesSomos-imagenFondo{
  opacity: 1;
  display: block;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  backface-visibility: hidden;
}



.quienesSomos-middle{
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 53%;
  left: 50%;
 width: 650px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)  
}	
@media screen and (max-width:400px)
{
	.quienesSomos-middle{
		width: 90%;
		top: 40%;
		
	}
}
@media screen and (max-width:50%)
{
	.quienesSomos-middle{
		width: 100%;
		top: 40%;
		
	}
}

.quienessomos-maincontainer:hover .quienesSomos-imagenFondo {
  opacity: 0.1;
}

.quienessomos-maincontainer:hover .quienesSomos-middle {
  opacity: 1;
}

.quienesSomos-text {
  color: black;
  font-size: 16px;

  justify-content: space-around;
  
}

@media screen and (max-width:400px)
{
	.quienesSomos-text{
		font-size: 8px;
		
	}
}

.iconos-boton-PORQUE {
	display:block;
	width:65px;
	height:65px;
	color:#fff;
	border-radius:50%;
	line-height:80px;
	text-align:center;
	z-index: 999;
	background-color: #38b6ff;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35);
}

@media screen and (max-width:400px)
{
	.iconos-boton-PORQUE{
		height: 30px;
		width: 30px;
		line-height: 28px;
	}
}

.iconos-icono-PORQUE{
	color: white;
	font-size: 35px;
}
@media screen and (max-width:400px)
{
	.iconos-icono-PORQUE{
		font-size: 15px;
		color: white;
	}
}

.iconos-boton-PORQUE:hover{
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.70);
}




.navbar-app {
	background-color: #18b4c3;
	/* height: 5rem; */
	margin-bottom: 2rem;
}

.navbar-img{
	height: 3.5rem;
}

.main{
	margin-top: 1rem;
}

.servicios-section{
	background-color: var(--white-backgound);
	border: 2px var(--azul-main) solid;
	border-top: none;
	border-bottom: none;
	/* border-radius: 10px; */
	margin-top: 3rem;
	padding: 1rem;
}

.servicios-titulo{
	/* text-decoration: underline; */
	background-color: var(--white-backgound);
	color: var(--letra);
	text-align: center;
	font-size: 50px;
}

.servicios-hr{
	width: 50%;
	margin: auto;
}

.servicios-contenido{
	font-weight: bold;
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.cards-section{
	margin-top: 2rem;
}

.clientes{
	margin-top: 5rem;
	display: flex;
	justify-content: center;
}

.clientes-img {
	width: 95%;
}


footer{
	background-color: var(--azul-main);
	color: var(--white-backgound);
	margin-top: 9%;
}

.footer{
	background-color: var(--azul-main);
	height: 100px;
	margin-top: 5rem;
	display: flex;
	align-items: center;

}

.copyright{
	background-color: var(--azul-main);
	padding: 2rem 0 2rem 0;
	text-align: center;
}

.navbar-app {
	background-color: #3F3E4D;
	/* height: 5rem; */
	margin-bottom: 2rem;
}

.text {
	font-family: Arial, Helvetica, sans-serif;
	text-align: justify;
}

.letter-nosotros {
	font: 1500;
	text-align: center;
	font-family: 'Times New Roman', Times, serif;
}
.letter-nav {

	color: #38b6ff;
}
.icono-texto{
	font-size: 20px;
}

@media screen and (max-width:400px)
{
	.icono-texto{
		font-size: 15px;
		
	}
}
.icono-derecha1{
	margin-top: 2.7%;
}

@media screen and (max-width:400px)
{
	.icono-derecha1{
		margin-top: 2%;
		
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.main{
		margin-top: 6px;
	}
   
}

@media (min-width: 0px) and (max-width: 100px)
{
	.quienessomos-maincontainer{
		height: 300px;
		width: 300px;
	}
}

@media (min-width: 768px) and (max-width: 991.98px)
{
	.quienesSomos-middle{
		transition: .5s ease;
		opacity: 0;
		position: absolute;
		top: 39%;
		left: 50%;
	   width: 650px;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%)  
	  }
}

@media (min-width: 768px) and (max-width: 991.98px)
{
	.quienesSomos-text {
		color: black;
		font-size: 18px;
	  
		justify-content: space-around;
		
	  }
}


/*------------------------------------------------------------------------------------------------------------------*/
   /* Galaxy A51 */
   @media only screen and (-webkit-min-device-pixel-ratio: 2.625) {
	.quienesSomos-middle{
		width: 97%;
		top: 41%;
		
		
	}
}
/* Galaxy A51 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.625) {
	.quienesSomos-text {
		color: black;
		font-size: 14px;
		
	  
		justify-content: space-around;
		
	  }
}

/* iphone 3 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) {
	.quienesSomos-middle{
		width: 97%;
		top: 41%;
		
		
	}
  }
  /* iphone 3 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) {
	.quienesSomos-text {
		color: black;
		font-size: 14px;
		
	  
		justify-content: space-around;
		
	  }
  }


	
 /* iphone 4 */
 @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) {
	.quienesSomos-middle{
		width: 97%;
		top: 41%;
		
		
	}
  }
  @media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) {
	.quienesSomos-middle{
		width: 97%;
		top: 41%;
		
		
	}
  }
 
 /* iphone 5 */
 @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { 
	.quienesSomos-text {
		color: black;
		font-size: 14px;
		
	  
		justify-content: space-around;
		
	  }
 }
 
 /* iphone 6, 6s, 7, 8 */
 @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { 
	
 }
	 
 /* iphone 6+, 6s+, 7+, 8+ */
 @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
	
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .quienesSomos-text {
		color: black;
		font-size: 10px;
		
	  
		justify-content: space-around;
		
	  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .quienesSomos-middle{
		width: 97%;
		top: 35%;
		
		
	}
}
 
 /* iphone X , XS, 11 Pro, 12 Mini */
 @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
	
  }

 /* iphone 12, 12 Pro */
 @media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) { 
	.quienesSomos-text {
		color: black;
		font-size: 10px;
		
	  
		justify-content: space-around;
		
	  }
 }
  /* iphone 12, 12 Pro */
  @media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) { 
	.quienesSomos-middle{
		width: 97%;
		top: 35%;
		
		
	}
 }

 /* iphone XR, 11 */
 @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) {
	.quienesSomos-text {
		color: black;
		font-size: 14px;
		
	  
		justify-content: space-around;
		
	  }
 }
  /* iphone XR, 11 */
  @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) {
	.quienesSomos-middle{
		width: 97%;
		top: 40%;
		
		
	}
 }

	 
 /* iphone XS Max, 11 Pro Max */
 @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) { 
	
 }

 /* iphone 12 Pro Max */
 @media only screen and (min-device-width : 428px) and (max-device-height : 926px) and (-webkit-device-pixel-ratio : 3) {
	.quienesSomos-text {
		color: black;
		font-size: 4px;
		
	  
		justify-content: space-around;
		
	  }
  }
   /* iphone 12 Pro Max */
 @media only screen and (min-device-width : 428px) and (max-device-height : 926px) and (-webkit-device-pixel-ratio : 3) {
	.quienesSomos-middle{
		width: 90%;
		top: 41%;
		
		
	}
  }

/* Galaxy S9 */
@media only screen and (-webkit-min-device-pixel-ratio: 4) {
	.quienesSomos-middle{
		width: 97%;
		top: 35%;
		
		
	}
}
/* Galaxy S9 */
@media only screen and (-webkit-min-device-pixel-ratio: 4) {
	.quienesSomos-text {
		color: black;
		font-size: 7px;
		
	  
		justify-content: space-around;
		
	  }
}
@media only screen and (min-device-width : 414px) and (max-device-height : 736px) and (-webkit-device-pixel-ratio : 3) {
	.quienesSomos-text {
		color: black;
		font-size: 7px;
		
	  
		justify-content: space-around;
		
	  }
  }
  @media only screen and (min-device-width : 414px) and (max-device-height : 736px) and (-webkit-device-pixel-ratio : 3) {
	.quienesSomos-middle{
		width: 97%;
		top: 35%;
		
		
	}
  }
  @media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) { 
	.quienesSomos-middle{
		width: 97%;
		top: 30%;
		
		
	}
 }
 @media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) { 
	.quienesSomos-text {
		color: black;
		font-size: 9px;
		
	  
		justify-content: space-around;
		
	  }
 }

  /* iphone XR, 11 */
  @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) {
	.quienesSomos-imagenFondo{
		opacity: 1;
		display: block;
		width: 75%;
		height: 75%;
		transition: .5s ease;
		backface-visibility: hidden;
	  }
 }



  /* Galaxy A51 */
  @media only screen and (-webkit-min-device-pixel-ratio: 2.625) {
	.quienesSomos-imagenFondo{
		opacity: 1;
		display: block;
		width: 75%;
		height: 75%;
		transition: .5s ease;
		backface-visibility: hidden;
	  }
}

		 /* Galaxy A51 */
		 @media only screen and (min-width: 412px) and (max-width: 767px){

			.quienesSomos-text {
				color: black;
				font-size: 9px;
				
			  
				justify-content: space-around;
				
			  }
		 } 
/*aqui le cambie*/
		  /* Galaxy A51 */
		  @media only screen and (min-width: 412px) and (max-width: 767px){

			.quienesSomos-middle{
				width: 100%;
				top: 32.2%;
				
				
				
			}
	
		 } 
		  /*espacio a lado derecho de mas*/
		 @media only screen and (min-width: 412px) and (max-width: 915px){

			.quienessomos-maincontainer{
				height: 250px ;
				width: 400px;
			}
	
		 }
		 @media only screen and (min-width: 768px) and (max-width: 1180px)  { 
			.quienessomos-maincontainer{
				height: 550px ;
				width: 400px;
			} }

		 @media only screen and (min-width: 412px) and (max-width: 767px){

			/**/
	
		 }
		/* @media only screen and (-webkit-min-device-pixel-ratio: 2.625) {
			.quienessomos-maincontainer{
				height: 550px ;
				width: 400px;
			}
		}*/
		 
		
		 /*tamaño imagen*/
		 @media only screen and (min-width: 412px) and (max-width: 767px){

			.quienesSomos-imagenFondo{
				opacity: 1;
				display: block;
				width: 100%;
				height: 100%;
				transition: .5s ease;
				backface-visibility: hidden;
			  }
	
		 }

		 @media only screen and (-webkit-min-device-pixel-ratio: 3) {
			.quienesSomos-middle{
				width: 100%;
				top: 52%;
				
				
				
			}
		}

		@media only screen and (-webkit-min-device-pixel-ratio: 3) {
			.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
				width: 100%;
				padding-right: var(--bs-gutter-x,.75rem);
				padding-left: var(--bs-gutter-x,.75rem);
				margin-right: auto;
				margin-left: auto;
				
				padding-top: 12%;
			}
		}

			 
		@media only screen and (-webkit-min-device-pixel-ratio: 2.75) {
			
		}


		@media only screen and (-webkit-min-device-pixel-ratio: 2.75) {
			.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
				width: 100%;
				padding-right: var(--bs-gutter-x,.75rem);
				padding-left: var(--bs-gutter-x,.75rem);
				margin-right: auto;
				margin-left: auto;
				
				padding-top: 0% !important;
			}
		}
		@media only screen and (-webkit-min-device-pixel-ratio: 2.75) {
			.quienesSomos-middle{
				width: 100%;
				top: 29% !important;
				
				
				
			}
		}
		@media only screen and (-webkit-min-device-pixel-ratio: 2.75) {
			.quienesSomos-text {
				color: black;
				font-size: 9px;
			  
				justify-content: space-around;
				
			  }
		}

		@media only screen and (-webkit-min-device-pixel-ratio: 2.625) {
			.quienesSomos-middle{
				width: 100%;
				top: 35%;
				
				
				
			}
		}

		@media only screen and (-webkit-min-device-pixel-ratio: 2.625) {
			.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
				width: 100%;
				padding-right: var(--bs-gutter-x,.75rem);
				padding-left: var(--bs-gutter-x,.75rem);
				margin-right: auto;
				margin-left: auto;
				
			
			}
		}
		 
		 
		
		@media only screen and (-webkit-min-device-pixel-ratio: 4) {
			.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
				width: 100%;
				padding-right: var(--bs-gutter-x,.75rem);
				padding-left: var(--bs-gutter-x,.75rem);
				margin-right: auto;
				margin-left: auto;
			}
		}

		@media only screen and (-webkit-min-device-pixel-ratio: 4) {
			.quienesSomos-middle{
				width: 100%;
				top: 38%;
		
			}
		}
		
		@media only screen and (-webkit-min-device-pixel-ratio: 3) {
			.quienesSomos-middle{
				width: 100%;
				top: 35% !important;
				
				
				
			}
		}

		@media only screen and (-webkit-min-device-pixel-ratio: 3) {
			.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
				width: 100%;
				padding-right: var(--bs-gutter-x,.75rem);
				padding-left: var(--bs-gutter-x,.75rem);
				margin-right: auto;
				margin-left: auto;
			}
		}

		@media only screen and (-webkit-min-device-pixel-ratio: 3.5) {
			.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
				width: 100%;
				padding-right: var(--bs-gutter-x,.75rem);
				padding-left: var(--bs-gutter-x,.75rem);
				margin-right: auto;
				margin-left: auto;
			}
		}
		@media only screen and (-webkit-min-device-pixel-ratio: 3.5) {
			.quienesSomos-middle{
				width: 100%;
				top: 35% !important;
			}
		}

		@media only screen and (-webkit-min-device-pixel-ratio: 4) {
			.quienesSomos-middle{
				width: 100%;
				top: 45% !important;
				
				
				
			}
		}
	
	


/* ----------- iPhone 6, 6S, 7 and 8 ----------- */


/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

  	.numero{
    	height: 100%;
        width: 100%;
        font-family: Verdana !important;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 30px;
}




}


/* ----------- iPhone 6+, 7+ and 8+ ----------- */


/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
   { 
  	.numero{
    		height: 100%;
        width: 100%;
        font-family: Verdana !important;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 30px;
}



}



/* ----------- iPhone x----------- */

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {

.numero{
    		height: 100%;
        width: 100%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 25px;
}



     }



/* ----------- Samsung s8, s9 ------- */ 


@media only screen 
    and (device-width : 360px) 
    and (device-height : 740px) 
    and (-webkit-device-pixel-ratio : 4) {

.numero{
    		height: 100%;
        width: 100%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 25px;
}



     }



     


     /* ----------- Samsung s6, s7, s7 edge ------- */ 


@media only screen 
    and (device-width : 360px) 
    and (device-height : 640px) 
    and (-webkit-device-pixel-ratio : 4) {

.numero{
    		height: 100%;
        width: 100%;
       
         font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 25px;
}



     }


     /* ----------- a51 ----------- */





/* Portrait */
@media only screen 
  and (min-device-width: 412px) 
  and (max-device-width: 914px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2.625) {

  		.numero{
    		height: 100%;
        width: 100%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size:25px;
}


}

/* Landscape */
@media only screen 
 and (min-device-width: 412px) 
  and (max-device-width: 914px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2.625) {
	.numero{
    		height: 100%;
        width: 100%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size:25px;
}

}




     /* ----------- iPhone 12  ------- */ 


@media only screen 
    and (device-width : 390px) 
    and (device-height : 844px) 
    and (-webkit-device-pixel-ratio : 3) {

.numero{
    	height: 100%;
        width: 100%;
		font-family: serif;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 30px;
}



     }


@media only screen 
    and (device-width : 393px) 
    and (device-height : 851px) 
    and (-webkit-device-pixel-ratio : 3) {

.numero{
    		height: 90%;
        width: 100%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 25px;
}



     }



/* ------------------- galaxy s20 ultra <----------*/ 

@media only screen 
    and (device-width : 412px) 
    and (device-height : 915px) 
    and (-webkit-device-pixel-ratio : 3.5) {

.numero{
    		height: 100%;
        width: 100%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 35px;
}



     }




     



/* ------------------- surface dou <----------*/ 

@media only screen 
    and (device-width : 720px) 
    and (device-height : 1114px) 
    and (-webkit-device-pixel-ratio : 2.5) {

.numero{
    		height: 100%;
        width: 120%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 25px;
}



     }

/* ------------------- Samsung Galaxy Fold <----------*/ 

@media only screen 
    and (device-width : 280px) 
    and (device-height : 653px) 
  {

.numero{
    		height: 100%;
        width: 120%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 25px;
}
  }

/* ------------------- Mac Book air <----------*/ 
  @media only screen 
    and (device-width : 1280px) 
    and (device-height : 800px) 
  {

.numero{
    	height: 100%;
        width: 120%;
        font-family: Verdana;
        background-color: #38b6ff;
        color: #FFFFFF;
        font-size: 25px;
}
  }



  .animate__animated.animate__zoomIn {
	--animate-duration: 6s;
  }