.banner-home-servicios {

	background-image: url(../img/webp/img-service.webp);

	width: 100%;

	height: 500px;

	background-repeat: no-repeat;

	position: relative;

	background-size: cover;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

}

 @media (max-width: 768px) {

		.banner-home-servicios {

			background-position: center;

			height: 430px;

			align-items: center;

		}

	}


	.titulo-banner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1vw;
	}


	.titulo-banner-pequeno{

		font-size: 40px;

		font-family: 'Klavika';

		font-weight: 500;

		margin: 0px;

		height: 20px;

		color: #fff;

	}

	 @media (max-width: 768px){

	 	.titulo-banner-pequeno{

	 		height: 40px;

	 	}

	 }



/* ++++++++++++++++++ Contenido principal ++++++++++++++++++ */

main.content-service{

	align-items: center;

	background-color: #ffffff;

	display: flex;

	flex-direction: column;

	height: auto;

	width: 100%;

	margin-top: -75px;

}



section.contain-cards-service{

	display: flex;

	height: auto;

	flex-direction: row;

	width: 70%;

	border-radius: 15px;

	justify-content: center;

	margin-top: 15px;

	z-index: 0;

}

 @media (max-width: 768px){

 	section.contain-cards-service{

 		flex-direction: column;

 		width: 90%;

 	}

 }

div.div-card-left{

	height: 100%;

	width: 100%;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

}

 @media (max-width: 768px){

 	div.div-card-left{

 		width: 100%;

 	}

 }

article.card{

	display: flex;

	align-items: center;

	flex-direction: row;

	height: auto;

	padding: 20px;

	background-color: #F2F3F4;

	border-radius: 10px;

	margin: 0px 10px;

}

 @media (max-width: 768px){

 	article.card{

 		margin: 0px;

 	}

 }

article.card img.card-img {

	width: 91px;

	height: 91px;

}

article.card p.card-text{

	display: flex;

	justify-content: space-between;

	margin-left: 30px;

	font-family: 'ClearSans', sans-serif;

	font-weight: 600;

	line-height: 1.1em;

	width: auto;

	height: auto;

}



div.div-contain-text{

	height: auto;

	display: flex;

	text-align: justify;

	width: auto;

	margin-bottom: 10px;

}

.text-service{

	font-family: 'Clearsans', sans-serif;

	font-size: 16px;

	width: 95%;

	height: 80px;

	margin: auto;

	padding: 10px;

	box-sizing: border-box;

	line-height: 1.1em;

 transition: all 0.3s ease;

 overflow: hidden;

 display: flex;

 flex-direction: column;

 color: #182828;

}

.ampliado{

	width: 95%;

	height: auto;

	transition: all 0.3s ease out;

}



.text-service::after {

	content: "Ver más";

	font-family: 'ClearSans', sans-serif;

	font-weight: bold;

	display: flex;

	justify-content: center;

	background-image: linear-gradient(to bottom, rgb(255, 255, 255, 0.5), #fff);

	color: #182828;

	padding: 7px;

	position: sticky;

	bottom: -10px;

	margin-top: 5px;

	left: 50%;

	z-index: 0;

	cursor: pointer;

}



.ampliado::after {

	content: "Ver menos";

	z-index: 0;

	cursor: pointer;

}



div.div-contain-imgs{

	width: 90%;

	height: 127px;

	display: flex;

	flex-direction: row;

	justify-content: center;

	align-items: center;

}

.contenerdor-img-servicios{

	width: 100%;

	height: 100px;

	overflow: hidden;

	border-radius: 10px;

}

img.contain-img-service{

	width: 100%;

	height: 110px;

 cursor: pointer;

 transition: 0.3s;

 margin: 0px 3px;

 border-radius: 10px;

 object-fit: cover;

}

 @media (max-width: 768px){

 	img.contain-img-service{

 		height: 100%;

 		width: auto;

 	}

 }

img.contain-img-service:hover{

	opacity: 0.7;

}



div.div-card-right{

	height: 100%;

	width: 437px;

	display: flex;

	flex-direction: column;

	justify-content: space-between;

}





/* The Modal (background) */

.modal {

  display: none; 

  position: fixed;

  z-index: 1000;

  left: 0;

  top: 0;

  width: 100%; 

  height: 100%; 

  overflow: auto;

  background-color: rgba(0,0,0,0.8);

}



.int-modal {

	width: 100%;

	height: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

}



/* Modal Content (image) */

.modal-content {

  margin: auto;

  display: block;

  width: auto;

  height: 90%;

  opacity: 1 !important;

}

 @media (max-width: 768px){

 	.modal-content{

 		width: 95%;

 		height: auto;

 	}

 }



/* Add Animation */

.modal-content, .modal-caption {  

  -webkit-animation-name: zoom;

  -webkit-animation-duration: 0.6s;

  animation-name: zoom;

  animation-duration: 0.6s;

}



@-webkit-keyframes zoom {

  from {-webkit-atransform:scale(0)} 

  to {-webkit-transform:scale(1)}

}



@keyframes zoom {

  from {transform:scale(0)} 

  to {transform:scale(1)}

}



/* The Close Button */

.modal-close {

  position: absolute;

  top: 20px;

  right: 20px;

  color: #182828;

  font-size: 35px;

  font-weight: bold;

  transition: 0.3s;

  background-color: #fff;

  width: 35px;

  height: 35px;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

}

/* @media (max-width: 768px){

 	.modal-close{

 		top: 75%;

 		right: 44%;

 	}

 }*/



.modal-close:hover,

.modal-close:focus {

  color: #bbb;

  text-decoration: none;

  cursor: pointer;

}